/* The lobby of a screen in someone else's room (#72 later item 29, Shell/GuestLobby.cs): "You"
   (the big look, the pickers, the name) beside "In the room" (a big chip for everyone). Waiting in
   the room it is the Connecting screen (.menu); in a match's waiting room a dialog over the match
   (.pg-dialog). TV and laptop: side by side. A phone held upright (narrow): one under the other.
   A phone on its side (s-land): side by side, smaller. More players at this screen (#80): a card
   each (.guest-cards), side by side across the width with "In the room" under them. */

.guest-lobby .guest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 1em;
  width: min(100%, 62em);
  align-items: start;
  text-align: start;
}

.guest-lobby .panel {
  width: auto;
  min-width: 0;
  padding: 0.9em 1.1em;
  /* Quiet dark panels with no edge (A · Console, #410); high contrast: the white one. */
  border-color: transparent;
  background: var(--ui-card);
}

.high-contrast .guest-lobby .panel {
  border-color: var(--ui-text);
}

/* Your card: its colour down its start side, as a match card's (no tinted fill: players are rings,
   shapes and strips in A · Console). */
.guest-lobby .panel.guest-me {
  border-inline-start: 0.35em solid var(--c);
  /* The strip takes its width from the padding, so the card's inside stays as wide (its swatches
     keep their rows: the room fits 720p with three pads, remote-lobby-pads). */
  padding-inline-start: 0.75em;
}

.guest-me-top {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin-bottom: 0.6em;
}

.guest-me-top svg {
  flex: none;
  width: 3.6em;
  height: 3.6em;
}

.guest-me-text {
  min-width: 0;
}

.guest-me-name {
  margin: 0;
  font-size: 1.5em;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.guest-me-look {
  margin: 0;
  color: var(--ui-dim);
  font-size: max(var(--fs-small), 0.85em);
}

.guest-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: 0.5em;
}

.guest-me .look-swatches {
  padding-inline-start: 0;
  margin-bottom: 0.7em;
}

.guest-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.guest-pad-hint {
  margin: 0.6em 0 0;
}

.guest-watch p {
  margin: 0;
}

/* The gamepad words only with a gamepad. */
.no-gamepad .guest-pad-hint,
.no-gamepad .guest-join,
.no-gamepad .guest-steps .pb {
  display: none;
}

/* This screen's players (#80): a card each, then how another pad joins. */
.guest-mine {
  display: grid;
  gap: 0.6em;
  min-width: 0;
  align-content: start;
}

.guest-cards {
  display: grid;
  gap: 0.6em;
  min-width: 0;
}

.guest-join {
  margin: 0;
}

/* The card's heading, with ✕ Leave beside it for a pad that joined. */
.guest-me-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.3em;
}

.guest-me-head h3 {
  margin: 0;
}

.guest-me-head .guest-out {
  flex: none;
  font-size: 0.85em;
  padding-block: 0.2em;
  padding-inline: 0.7em;
}

/* Several players here: the cards side by side across the whole width (two or three a row), and
   "In the room" under them, so a 1080p TV (and a 720p waiting room) shows everyone without
   scrolling. Smaller looks and names, one line of pad hints for all the cards, and no swatches
   (the steppers step past the taken ones) unless the screen is tall and not a TV. */
.guest-lobby .guest-many.guest-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.7em;
}

.guest-many .guest-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5em), 1fr));
}

.guest-hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2em 1.5em;
}

.guest-hints .hint {
  margin: 0;
}

.guest-many .guest-me {
  padding: 0.7em 0.9em;
}

.guest-many .guest-me-top svg {
  width: 2.4em;
  height: 2.4em;
}

.guest-many .guest-me-name {
  font-size: 1.2em;
}

.guest-many .guest-me-top {
  margin-bottom: 0.4em;
}

.guest-many .look-swatches {
  display: none;
}

@media (min-height: 900px) and (max-width: 1799.98px) {
  :root:not(.tv) .guest-many .look-swatches {
    display: flex;
  }
}

.guest-many .gchips {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11em), 1fr));
}

.guest-many .gchip {
  padding: 0.4em 0.6em;
}

.guest-many .gchip svg {
  width: 2em;
  height: 2em;
}

.gchips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr));
  gap: 0.5em;
}

.gchip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.6em;
  align-items: center;
  min-width: 0;
  padding: 0.55em 0.7em;
  border-radius: var(--r-l);
  background: var(--ui-raised);
  border: 2px solid transparent;
}

/* The shape as a badge ringed in its colour, as in the top bar (#410). */
.gchip svg {
  grid-row: span 2;
  width: 2.4em;
  height: 2.4em;
  box-sizing: border-box;
  padding: 0.35em;
  border-radius: 50%;
  background: var(--ui-key);
  box-shadow: 0 0 0 2px var(--c);
}

.high-contrast .gchip {
  border-color: var(--ui-text);
}

.gchip-name,
.gchip-device {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gchip-name {
  font-size: 1.1em;
  font-weight: 900;
}

.gchip-device {
  font-size: max(var(--fs-small), 0.8em);
  color: var(--ui-dim);
}

/* The host's ★ badge (#86) at the end of the device's row ("Big screen ★ Host"), so the chip keeps
   its two rows and the name its whole width. (As a grid item of its own it took a row, and the
   device line a third under the look: the 720p waiting room scrolled.) */
.gchip:has(> .host-badge) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.gchip:has(> .host-badge) .gchip-name {
  grid-row: 1;
  grid-column: 2 / span 2;
}

.gchip:has(> .host-badge) .gchip-device {
  grid-row: 2;
  grid-column: 2;
}

.gchip > .host-badge {
  grid-row: 2;
  grid-column: 3;
}

/* You: a white edge (your colour is on your badge). */
.gchip.me {
  border-color: var(--ui-text);
}

/* High contrast: every chip has the white edge, so yours has a thicker one (a ring outside it, so
   nothing moves). */
.high-contrast .gchip.me {
  box-shadow: 0 0 0 2px var(--ui-text);
}

/* Another player at this screen (#80). */
.gchip.mine:not(.me) {
  border-color: var(--ui-dim);
}

.gchip.away {
  opacity: 0.6;
  border-style: dashed;
}

/* Under any match's waiting room (the owner's lobby too) Esc opens no menu and the button behind
   the layer cannot be pressed: no Menu / Pause button and no "Esc menu" hint while it is up. The
   seat toast ("You play …") would sit on this lobby's heading, so it waits too. */
html:has(#lobby:not(.hidden)) :is(.pg-pause-btn, .pg-hints),
html:has(#lobby:not(.hidden) .guest-lobby) #toast {
  visibility: hidden;
}

/* In a match's waiting room: a dialog over the match, opaque (the HUD's cards are behind it). */
.pg-dialog.guest-lobby {
  max-width: min(62em, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg);
}

.pg-dialog.guest-lobby h2 {
  font-size: 1.8em;
}

/* Several players here: the whole width, so their cards go side by side (#80). */
.pg-dialog.guest-lobby.many {
  width: min(62em, 94vw);
  padding-block: 1.1em;
}

.pg-dialog.guest-lobby .lead {
  margin: 0.2em 0 0.8em;
  color: var(--ui-dim);
}

/* The swatches of a phone held upright: four and four, never seven and one. */
@media (max-width: 599px) and (orientation: portrait) {
  .guest-me .swatch-row {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 0.3em;
  }

  /* The sticky Leave bar sits on the dialog's bottom edge (the narrow padding would leave a gap
     that scrolled chips show through). */
  :root[data-fit] .pg-dialog.guest-lobby {
    padding-bottom: 0;
  }
}

/* A TV or laptop at big text (medium: 36–50 ems wide; not a phone on its side, which keeps the
   two columns): one column, "You" in two parts side by side (look and steppers; swatches and
   name), and the chips in rows of three or four, so everyone shows with little scrolling. */
@media (min-height: 500px) {
  :root[data-fit='medium'] .guest-lobby .guest-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  :root[data-fit='medium'] .guest-me:not(.guest-watch) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'title title'
      'top swatches'
      'steps name'
      'hint hint';
    column-gap: 2em;
    align-items: center;
  }

  :root[data-fit='medium'] .guest-me > .guest-me-head {
    grid-area: title;
  }

  :root[data-fit='medium'] .guest-me-top {
    grid-area: top;
  }

  :root[data-fit='medium'] .guest-me .guest-steps {
    grid-area: steps;
    margin-bottom: 0;
  }

  :root[data-fit='medium'] .guest-me .look-swatches {
    grid-area: swatches;
    margin-bottom: 0;
  }

  :root[data-fit='medium'] .guest-me .guest-name {
    grid-area: name;
  }

  :root[data-fit='medium'] .guest-me .guest-pad-hint {
    grid-area: hint;
  }

  :root[data-fit='medium'] .gchips {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10em), 1fr));
  }

  /* Several players here at big text: no lead line under the heading, and a short strip each, one under the other (the heading and
     the look on the left, the steppers and the name buttons on the right). */
  :root[data-fit='medium'] .guest-lobby.many .lead {
    display: none;
  }

  :root[data-fit='medium'] .guest-many .guest-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5em;
  }

  :root[data-fit='medium'] .guest-many .guest-me:not(.guest-watch) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'title steps'
      'top name';
    column-gap: 1.2em;
    row-gap: 0.3em;
  }

  :root[data-fit='medium'] .guest-many .guest-me-head,
  :root[data-fit='medium'] .guest-many .guest-me-top {
    margin-bottom: 0;
  }

  :root[data-fit='medium'] .guest-many .guest-name,
  :root[data-fit='medium'] .guest-many .guest-steps {
    justify-content: flex-end;
  }

  /* The Ready card stays where that lead line was hidden (#647), so it is short here (#684): its
     title a step smaller, less space between and inside the parts, and the steppers a step smaller. The
     heading, the card, the players' cards and "In the room" show on a 720p TV at 150 % with two
     players here; the rest is a pad's press away (focus scrolls it into view). */
  :root[data-fit='medium'] .menu.guest-lobby.many {
    gap: 0.5em;
  }

  :root[data-fit='medium'] .guest-lobby.many .guest-ready {
    padding-block: 0.4em;
  }

  :root[data-fit='medium'] .guest-lobby.many .guest-ready h3 {
    font-size: 1.15em;
  }

  /* The room has a game from the first second (#857), so the card would always add the game's one
     line here: the title names the game, and the line shows again with room for it (#894 review). */
  :root[data-fit='medium'] .guest-lobby.many .guest-ready-rule {
    display: none;
  }

  :root[data-fit='medium'] .guest-lobby .guest-many.guest-grid {
    gap: 0.5em;
  }

  :root[data-fit='medium'] .guest-many .guest-cards {
    gap: 0.3em;
  }

  :root[data-fit='medium'] .guest-many .guest-me {
    padding-block: 0.5em;
  }

  :root[data-fit='medium'] .guest-many .guest-mine {
    gap: 0.3em;
  }

  :root[data-fit='medium'] .guest-many .guest-steps {
    font-size: 0.85em;
  }
}

/* One column when the screen is narrow in lines of text (a phone held upright, 200 % text). */
:root[data-fit='narrow'] .guest-lobby .guest-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6em;
}

:root[data-fit='narrow'] .guest-lobby .panel {
  padding: 0.6em 0.8em;
}

:root[data-fit='narrow'] .guest-me-top svg {
  width: 2.8em;
  height: 2.8em;
}

:root[data-fit='narrow'] .gchips {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5em), 1fr));
}

/* A phone on its side (s-land): little height, so smaller looks and less space between. */
@media (max-height: 499.98px) and (orientation: landscape) {
  .menu.guest-lobby {
    gap: 0.4em;
    padding-top: 0.6em;
  }

  .menu.guest-lobby h2 {
    font-size: 1.3em;
  }

  .guest-lobby .panel {
    padding: 0.5em 0.7em;
  }

  .guest-me-top {
    margin-bottom: 0.3em;
  }

  .guest-me-top svg {
    width: 2.4em;
    height: 2.4em;
  }

  .guest-me-name {
    font-size: 1.2em;
  }

  .gchip {
    padding: 0.35em 0.5em;
  }

  .gchip svg {
    width: 1.8em;
    height: 1.8em;
  }

  /* The match's waiting room: the whole width (the pause dialog's 38 em would squeeze the two
     columns), the heading says it, and the pickers get the height. */
  .pg-dialog.guest-lobby {
    width: min(62em, 100%);
  }

  .pg-dialog.guest-lobby h2 {
    font-size: 1.3em;
  }

  .pg-dialog.guest-lobby .lead {
    display: none;
  }

  .guest-lobby .swatch {
    width: 1.9em;
    height: 1.9em;
  }
}

/* This screen as the room's host (#86): the games, Start, who knocks, the players and the lock. */
.guest-host {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5em;
  margin: 0 0 0.8em;
  border: 2px solid var(--ui-line);
}

.guest-host h3 {
  margin: 0;
}

.guest-host-games {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.guest-host .host-players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3em;
}

.guest-host .hp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2em 0.6em;
}

.guest-host .hp-text {
  overflow-wrap: anywhere;
}

/* Own screen or controller, near the top (#252). */
.guest-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3em 0.8em;
  margin: 0.3em 0;
}

.guest-switch p {
  flex: 1 1 14em;
  margin: 0;
  font-size: max(var(--fs-small), 0.85em);
  color: var(--ui-dim);
}

.guest-switch .mini {
  min-height: max(var(--touch-menu), 2.5em);
}

.guest-lobby.big-text .guest-switch p {
  display: none;
}

.guest-ways {
  flex: 1 1 100%;
}

/* More ways to play (#648): a quiet text button that opens the controller's line under it. */
.guest-ways-toggle {
  min-block-size: var(--touch-min);
  padding-block: 0.5em;
  padding-inline: 0.7em;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--ui-dim);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.guest-ways-toggle::after {
  content: ' ▾' / '';
}

.guest-ways.open .guest-ways-toggle::after {
  content: ' ▴' / '';
}

.guest-switch .guest-ways p {
  display: block;
  margin-block: 0.5em;
}

/* An upright phone: the host's chip has room for its badge, not for how it plays as well. */
:root[data-bp='xs'] .gchip:has(.host-badge) .gchip-device {
  display: none;
}

/* A room open in another tab (#311). On a short or narrow screen at big text, the heading and the
   buttons are in view with no scrolling; the sentence under them can scroll. */
@media (max-height: 600px) {
  :root .screen.open-elsewhere {
    padding-block: 0.3em;
    gap: 0;
  }
  :root .screen.open-elsewhere .menu {
    justify-content: flex-start;
    min-height: 0;
    gap: 0.3em;
    padding-block: 0;
    padding-inline: 0;
  }
  :root .screen.open-elsewhere .menu h2 {
    font-size: var(--fs-small);
    line-height: calc(1.2 * var(--line-k));
    margin: 0;
  }
  :root .screen.open-elsewhere .menu .lead {
    order: 1;
    margin: 0.3em 0 0;
    font-size: var(--fs-small);
    line-height: calc(1.2 * var(--line-k));
  }
  :root .screen.open-elsewhere .actions {
    flex: none;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    gap: 0.4em;
  }
  :root .screen.open-elsewhere .actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0.3em;
    font-size: var(--fs-small);
  }
}

/* The Ready card (#647, Shell/GuestLobby.cs Ready): what the host chose, its one line, and that
   this screen is ready. A quiet panel at the top, so a guest sees what is coming at one look. */
/* Compact (#684): it took the place of a one-line lead, and the menu's gap already spaces it, so
   no margins of its own (a little closer to the heading, as the lead was). The status on the
   title's line where it fits; the game's line under them. A TV at 1080p or 720p with pads keeps
   the whole lobby, Leave the room too, on the screen (remote-lobby-pads.spec). */
.guest-ready {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 1em;
  width: min(100%, 62em);
  box-sizing: border-box;
  margin: -0.3em auto 0;
  /* The sides do not grow with the text size: big text keeps its width for the words. */
  padding: 0.55em min(1.1em, 1rem);
  border: 1px solid transparent;
  border-radius: 0.6em;
  background: var(--ui-card);
  text-align: start;
}

.high-contrast .guest-ready {
  border-color: var(--ui-text);
}

.guest-ready h3 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-heading);
  font-weight: 900;
  overflow-wrap: anywhere;
}

/* A name moves to the next line whole ("Fuse Box" never splits over two lines), and breaks
   inside only when it is wider than a whole line (an 18-letter name at 200 % text, #673 review). */
.guest-ready h3 bdi {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.guest-ready-rule {
  order: 2;
  flex: 1 1 100%;
  margin: 0;
  color: var(--ui-text);
}

.guest-ready-status {
  order: 1;
  flex: 1 1 auto;
  margin: 0;
  font-size: max(var(--fs-small), 0.9em);
  font-weight: 700;
  /* Ready, as everywhere (tokens.css --ok); high contrast: the text colour. */
  color: var(--ok);
}

.high-contrast .guest-ready-status {
  color: var(--ui-text);
}

/* Names first (#653): one optional field for this screen's player's name, Save beside it, and the
   look's name as the way on under them. Asked once in a room. */
.guest-first {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  width: min(100%, 62em);
  box-sizing: border-box;
  margin: 0 auto 0.8em;
  text-align: start;
}

.guest-first-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.guest-first-row .name-input {
  flex: 1 1 10em;
  min-inline-size: 0;
  min-block-size: var(--touch-min);
}

.guest-first-row .btn {
  flex: none;
  min-block-size: var(--touch-min);
}

.guest-first-skip {
  align-self: flex-start;
  min-block-size: var(--touch-menu);
}

/* Change look (#647): a touch screen's pickers fold under it, ▸ folded, ▾ open. */
.guest-look {
  min-block-size: var(--touch-min);
  margin-block-start: 0.2em;
}

.guest-look::after {
  content: ' ▸' / '';
}

:root[dir='rtl'] .guest-look[aria-expanded='false']::after {
  content: ' ◂' / '';
}

.guest-look[aria-expanded='true']::after {
  content: ' ▾' / '';
}