/* 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: left;
}

.guest-lobby .panel {
  width: auto;
  min-width: 0;
  padding: 0.9em 1.1em;
}

.guest-me {
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 10%, var(--ui));
}

.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-left: 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: 0.9em;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 2px solid color-mix(in srgb, var(--c) 60%, transparent);
}

.gchip svg {
  grid-row: span 2;
  width: 2.4em;
  height: 2.4em;
}

.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);
}

.gchip.me {
  border: 3px solid var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent);
}

/* Another player at this screen (#80). */
.gchip.mine:not(.me) {
  border: 3px solid var(--c);
}

.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: rgba(18, 16, 26, 0.97);
}

.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;
  }
}

/* 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;
  }
}