/* StarCraft's pre-match PalNl world. The battle HUD keeps its own Protoss skin. */
#screen .lobby {
  background: #030507 url("./lobby72/background.png") center / cover no-repeat;
  color: #d9d5ad;
}
.lobby-shell {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 6.088993cqw minmax(0, 1fr) 4.215457cqw;
  gap: 1.405152cqw;
  padding: 2.34192cqw 3.278689cqw 2.107728cqw;
  font-size: 1.405152cqw;
  line-height: 1.4;
  text-shadow: 1px 1px #000;
}
.lobby-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.34192cqw;
  min-width: 0;
  border-bottom: 1px solid #777967;
  padding-bottom: 1.171cqw;
}
#screen .lobby-heading h1,
#screen .lobby-heading h2 {
  margin: 0;
  color: #e8dfb4;
  font-size: 2.34192cqw;
  font-weight: 400;
  line-height: 1.25;
}
.lobby-heading h1 small {
  display: inline-block;
  margin-left: 1.405152cqw;
  font-size: 1.288056cqw;
  color: #b8b79d;
  white-space: nowrap;
}
#party-code {
  margin: 0;
  padding: 0.468384cqw 0.936768cqw;
  background: #030809e8;
  border: 1px solid #727865;
  color: #d0cfb4;
  font-size: 1.405152cqw;
  text-align: right;
  white-space: nowrap;
}
.lobby-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27.868852cqw;
  gap: 2.107728cqw;
  min-height: 0;
}
.lobby-main {
  display: grid;
  grid-template-rows: 3.278689cqw 2.810304cqw minmax(0, 1fr) 3.278689cqw;
  gap: 1.171cqw;
  min-width: 0;
  min-height: 0;
}
.identity-row {
  display: grid;
  grid-template-columns: 9.836066cqw minmax(0, 1fr);
  gap: 1.171cqw;
  align-items: center;
}
.lobby-shell input,
.lobby-create input:not([type="checkbox"]) {
  min-width: 0;
  width: 100%;
  height: 3.278689cqw;
  padding: 0 1.054cqw;
  border: 1px solid #827e62;
  background: #050807e8;
  color: #ece8cd;
  box-shadow: inset 0 1px 3px #000;
  border-radius: 0;
  font: inherit;
  caret-color: #f0df83;
}
.panel-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.171cqw;
  color: #e0d6a7;
}
.lobby-shell button,
.lobby-create button {
  min-height: 3.278689cqw;
  padding: 0 1.405152cqw;
  border: 0;
  border-image: url("./lobby72/normal.png") 0 8 0 8 fill / 0 0.936768cqw / 0 stretch;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  font: inherit;
  color: #c9c9a5;
  text-shadow: 1px 1px #000;
}
.lobby-shell button:hover:not(:disabled),
.lobby-create button:hover:not(:disabled) {
  color: #ffffd5;
  filter: none;
}
.lobby-shell button:active:not(:disabled),
.lobby-create button:active:not(:disabled) {
  border-image-source: url("./lobby72/pressed.png");
}
.lobby-shell button:disabled,
.lobby-create button:disabled {
  border-image-source: url("./lobby72/disabled.png");
  color: #828576;
  filter: none;
}
/* shell72.css colours every #screen button; a blocked lobby action must still read as blocked. */
#screen :is(.lobby-shell, .lobby-create) button:disabled {
  color: #828576;
}
.lobby-shell button:focus-visible,
.lobby-create button:focus-visible,
.lobby-shell input:focus-visible,
.lobby-create input:focus-visible {
  outline: 1px solid #efe4aa;
  outline-offset: 2px;
}
.lobby-shell .primary,
.lobby-create .primary {
  color: #f1e78c;
}
#screen .lobby-shell .panel-label button {
  min-height: 2.810304cqw;
  font-size: 1.288056cqw;
  width: 10.30445cqw;
}
.rooms-actions {
  display: flex;
  gap: 0.585cqw;
}
#screen .lobby-shell .panel-label :is(#rooms-previous, #rooms-next) {
  width: 6.08899cqw;
}
.game-list {
  display: grid;
  grid-template-rows: 2.810304cqw minmax(0, 1fr) auto;
  min-height: 0;
  background: #030809e8;
  border: 1px solid #777b6e;
  overflow: hidden;
}
/* Name · code, seats, status. The heading and every row share the columns. */
.list-heading,
#screen .lobby-shell #rooms button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.21546cqw 5.15222cqw 7.259953cqw;
  align-items: center;
  gap: 1.171cqw;
}
.list-heading {
  padding: 0 1.171cqw;
  color: #d8d5b4;
  background: #1d282be8;
  border-bottom: 1px solid #687266;
  font-size: 1.288056cqw;
}
.list-heading span:first-child {
  grid-column: span 2;
}
.rooms-body {
  position: relative;
  display: grid;
  min-height: 0;
}
#screen .lobby-shell #rooms {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  overflow: auto;
  gap: 0;
  margin: 0;
}
#screen .lobby-shell #rooms:focus-visible {
  outline: 1px solid #efe4aa;
  outline-offset: -1px;
}
#screen .lobby-shell #rooms button {
  flex-shrink: 0;
  min-height: 3.747073cqw;
  border: 0;
  border-bottom: 1px solid #354239;
  background: none;
  box-shadow: none;
  text-align: left;
  padding: 0 1.171cqw;
}
#screen .lobby-shell #rooms button:hover {
  background: #334132ba;
  color: #f5eec3;
}
#screen .lobby-shell #rooms button[aria-pressed="true"] {
  background: #2c3d2fe0;
  color: #fff6c8;
  box-shadow: inset 0.351288cqw 0 #d6c56a;
}
.room-host {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-code,
.room-count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #bdbd99;
}
.room-code {
  color: #8f927c;
  letter-spacing: 0.04em;
}
.room-status {
  white-space: nowrap;
  color: #9fd787;
}
#rooms button[data-state="full"] .room-status {
  color: #dcc36e;
}
#rooms button[data-state="playing"] .room-status {
  color: #8fbde6;
}
#rooms button:is([data-state="finished"], [data-state="reconnecting"], [data-state="draining"]) .room-status {
  color: #a8a78f;
}
#rooms-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1.405152cqw;
  color: #b9c2ac;
  font-size: 1.405152cqw;
  pointer-events: none;
}
#rooms-empty:empty {
  display: none;
}
.room-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.171cqw;
  padding: 0.468384cqw 0.702576cqw 0.468384cqw 1.171cqw;
  background: #1d282be8;
  border-top: 1px solid #687266;
}
#room-detail {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d8d5b4;
  font-size: 1.288056cqw;
}
#screen .lobby-shell #join-selected {
  min-height: 2.810304cqw;
  font-size: 1.288056cqw;
}
#screen .lobby-shell .join-row {
  display: grid;
  grid-template-columns: 6.791569cqw minmax(0, 1fr) 11.241218cqw;
  align-items: center;
  gap: 1.171cqw;
  margin: 0;
  font-size: 1.405152cqw;
  min-width: 0;
}
#screen .lobby-shell .join-row input {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.map-brief {
  display: flex;
  flex-direction: column;
  gap: 1.405152cqw;
  min-width: 0;
  min-height: 0;
  padding: 1.405152cqw;
  background: #070c0ee8;
  border: 1px solid #70786d;
}
#screen .map-brief h2 {
  order: -1;
  font-size: 1.75644cqw;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: #e3dcb0;
}
.map-summary {
  display: grid;
  grid-template-columns: 14.98829cqw minmax(0, 1fr);
  gap: 1.171cqw;
  align-items: start;
}
.lobby-map {
  display: block;
  width: 14.98829cqw;
  height: 14.98829cqw;
  border: 1px solid #7c806c;
  background: #000;
  image-rendering: pixelated;
}
.lobby-units {
  display: grid;
  grid-template-rows: repeat(3, 5.386416cqw);
  gap: 0.117096cqw;
  min-width: 0;
}
.lobby-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 0;
  gap: 0;
  color: #cfceb5;
  font-size: 1.054cqw;
  line-height: 1;
}
.lobby-unit-art {
  display: block;
  flex: none;
  width: 5.620609cqw;
  height: 4.215457cqw;
  image-rendering: pixelated;
}
.map-brief dl {
  display: grid;
  grid-template-columns: 7.259953cqw minmax(0, 1fr);
  gap: 0.936768cqw 0.58548cqw;
  margin: 0;
  padding-top: 1.171cqw;
  border-top: 1px solid #434e46;
  font-size: 1.288056cqw;
  line-height: 1.35;
}
.map-brief dt {
  color: #aebcaa;
}
.map-brief dd {
  margin: 0;
  color: #d8d7b8;
  min-width: 0;
  overflow-wrap: anywhere;
}
.map-brief > p {
  font-size: 1.288056cqw;
  color: #bcc4ae;
  margin: 0;
}
#screen .lobby-shell .menu-actions {
  display: flex;
  align-items: center;
  gap: 1.171cqw;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid #74796a;
}
#screen .lobby-shell .menu-actions button {
  height: 3.278689cqw;
  min-width: 10.772834cqw;
  font-size: 1.405152cqw;
  margin: 0;
}
#screen .lobby-shell .menu-actions #lobby-settings,
#screen .lobby-shell .menu-actions #invite {
  margin-right: auto;
}
#screen .lobby-shell .menu-actions .primary {
  min-width: 12.64637cqw;
}
#party .lobby-main {
  grid-template-rows: 3.278689cqw 2.810304cqw minmax(0, 1fr) 3.278689cqw;
}
#members {
  min-height: 0;
  overflow: auto;
  border: 1px solid #70786d;
  background: #030809e8;
  padding: 0 1.405152cqw;
}
#screen .member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.405152cqw;
  min-height: 5.620609cqw;
  padding: 0.702576cqw 0;
  border-bottom: 1px solid #455143;
  font-size: 1.405152cqw;
}
.member-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.member-status {
  flex-shrink: 0;
  white-space: nowrap;
  color: #c8cfb9;
}
#screen .empty-slot {
  color: #8b9d8b;
}
.member:last-child {
  border-bottom: 0;
}
#party-status {
  font-size: 1.288056cqw;
  line-height: 1.3;
  color: #d4d5b7;
  margin: 0;
  align-self: center;
}
.lobby-create {
  width: 52.459016cqw;
  padding: 2.34192cqw;
  background: #080e12ed;
  border: 0.936768cqw solid transparent;
  border-image: url("./lobby72/frame.png") 8 fill / 0.936768cqw / 0 repeat;
  font-size: 1.405152cqw;
  color: #d9d5ad;
}
.lobby-create h2 {
  margin: 0 0 1.873536cqw;
  font-size: 2.107728cqw;
  font-weight: 400;
  color: #e8dfb4;
}
.lobby-create .selected-map {
  display: grid;
  grid-template-columns: 14.98829cqw minmax(0, 1fr);
  align-items: center;
  gap: 2.34192cqw;
  margin-bottom: 1.405152cqw;
}
.lobby-create .selected-map h3 {
  font-size: 1.639344cqw;
  font-weight: 400;
  margin: 0 0 1.171cqw;
}
.lobby-create .selected-map p {
  font-size: 1.288056cqw;
  margin: 0.58548cqw 0;
  color: #c4cab2;
}
.lobby-create .check-row {
  padding: 1.171cqw 0;
  border-color: #4d594b;
}
#screen .lobby-create .menu-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.171cqw;
  padding-top: 1.405152cqw;
  margin: 1.405152cqw 0 0;
  border-top: 1px solid #62735e;
}
.lobby-shell ::selection,
.lobby-create ::selection {
  background: #7c8060;
  color: #fffde0;
}
.lobby-shell ::-webkit-scrollbar {
  width: 0.936768cqw;
}
.lobby-shell ::-webkit-scrollbar-track {
  background: #080e0b;
}
.lobby-shell ::-webkit-scrollbar-thumb {
  background: #697561;
  border: 1px solid #9a9a75;
}
#screen:has(#lobby:not([hidden])) #error,
#screen:has(#party:not([hidden])) #error {
  bottom: 7.5%;
  left: 3.278689%;
  max-width: 90%;
  z-index: 8;
  background: #0b0e0ae8;
  padding: 0.4cqw 0.8cqw;
}