/* Home is the room (#73; #72 musts 1–3, should 21; Shell/HomeScreen.cs). The look is the TS
   home's (panels, player cards, game cards with pictures, the Join card with QR and big code);
   the layout keeps the Join card on screen on a TV with 8 players at 150 % text, 1080p and 720p,
   with no scrolling.
     TV / laptop (from 1200 px wide, 500 px tall): 3 fixed columns, Players · Games · Join card.
     Tablet (600–1200 px wide): Join card and Players side by side, the games in a row below.
     Phone (under 600 px wide, or under 500 px tall): "Join a game" first, then "Or host a game
     here" with the room and the Join card, then the games as full-width rows (the page scrolls). */

.home-room {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding-bottom: 0.8em;
}

.home3 {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 1.1em;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    'pjoin pjoin'
    'join players'
    'games games';
  align-items: start;
}

.home3 > .panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-players {
  grid-area: players;
}

.home-games {
  grid-area: games;
}

.join-card {
  grid-area: join;
}

.phone-join {
  grid-area: pjoin;
  display: none !important;
}

/* Phones: "Or host a game here" between joining and this phone's room (#72 build list 22). */
.phone-host {
  grid-area: host;
  display: none;
}

.home-room > .note:empty {
  display: none;
}

/* ------------------------------------------------------------ players: cards, then chips */

.home-players .players {
  gap: 0.5em;
}

.join-here {
  margin-top: 0.6em;
  padding: 0.55em 0.8em;
  border: 2px dashed var(--ui-line);
  border-radius: 0.9em;
}

.join-here-title {
  margin: 0;
  font-weight: 900;
}

.join-here-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

/* A touch screen's only way to play here: big enough for a thumb (#72). */
.join-here .join-tap {
  min-height: var(--touch-min);
  min-width: 12em;
  margin-top: 0.3em;
}

.pchips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4em, 1fr));
  gap: 0.4em;
  font-size: max(var(--fs-small), 0.9em);
}

.pchip {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 2px solid color-mix(in srgb, var(--c) 60%, transparent);
}

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

.pchip-look {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.4em;
  align-items: center;
  padding: 0.3em 0.5em;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.pchip-look svg {
  grid-row: span 2;
  width: 1.5em;
  height: 1.5em;
}

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

.pchip-name {
  font-weight: 900;
}

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

/* The VIP phone's line (#72 item 25), across the chip's foot: its gold badge, or "Make VIP" in
   words on the other phones. It wraps under the look, so nothing cuts it short. */
.pchip:has(.pchip-vip) {
  flex-wrap: wrap;
}

.pchip-vip {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.3em 0.3em;
  font-size: max(var(--fs-small), 0.75em);
  white-space: nowrap;
}

.pchip-vip .vip-badge {
  margin: 0;
  font-size: inherit;
  vertical-align: baseline;
}

button.pchip-vip {
  margin: 0 0.3em 0.3em;
  flex-basis: calc(100% - 0.6em);
  padding: 0.15em 0.4em;
  border: 1px solid color-mix(in srgb, var(--c) 60%, transparent);
  border-radius: 999px;
  background: none;
  color: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* A touch screen as the big screen: a finger-sized button. */
:root[data-touch] button.pchip-vip {
  min-height: var(--touch-min);
}

/* The name stops short of the corner button (#70: on a TV it ran under the ×). */
.pchip:has(.pchip-out) .pchip-look {
  padding-right: 1.5em;
}

/* Leaving: a small corner button, so the name keeps the chip's width. */
.pchip-out {
  position: absolute;
  top: 0.1em;
  right: 0.15em;
  background: none;
  border: 0;
  padding: 0.1em 0.3em;
  font-size: max(var(--fs-small), 0.75em);
  line-height: 1;
  cursor: pointer;
  color: var(--ui-dim);
  border-radius: 0.4em;
}

/* ------------------------------------------------------------ games */

.home-games {
  container-type: inline-size;
}

.home-games .games {
  grid-template-columns: repeat(auto-fit, minmax(9.5em, 1fr));
  gap: 0.8em;
}

/* A narrow games column (big text, a tablet in portrait): one game per row, the picture on the left. */
@container (max-width: 31em) {
  .home-games .games {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-games .gcard {
    flex-direction: row;
    align-items: center;
    gap: 0.8em;
  }

  .home-games .gcard-art {
    flex: 0 0 min(6em, 28%);
  }
}

.home-games .gcard {
  padding: 0.8em;
}

.gcard-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ the Join card */

.join-card {
  align-items: center;
  text-align: center;
  gap: 0.35em;
}

.join-card h2 {
  align-self: stretch;
  text-align: left;
}

.join-qr {
  /* At least 22 % of the screen's height (#72 should 21), never wider than the card. */
  height: 24vh;
  min-height: 7.5em;
  max-width: 100%;
  aspect-ratio: 1;
}

.join-qr .qr {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
}

.join-qr.empty {
  border: 2px dashed var(--ui-line);
  border-radius: 0.5em;
}

.join-how,
.join-other,
.join-locked,
.join-problem {
  margin: 0;
  font-size: max(var(--fs-small), 0.85em);
  color: var(--ui-dim);
  overflow-wrap: anywhere;
}

.join-how b,
.join-other b {
  color: var(--ui-text);
}

.join-cover {
  /* About the QR code's height, so the card keeps its size. */
  align-self: stretch;
  min-height: min(24vh, 12em);
}

.join-code {
  font-size: 3em;
  font-weight: 900;
  letter-spacing: 0.25em;
  margin-right: -0.25em;
  line-height: 1.1;
}

.code-row .join-code {
  /* In the row, the last letter's spacing is the gap to the speaker. */
  margin-right: 0;
}

.join-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3em;
}

.join-locked {
  color: #ffb86b;
  font-weight: 900;
}

.theme-paper .join-locked {
  color: #b35a00;
}

/* ------------------------------------------------------------ the setup's Start line */

.start-where {
  display: block;
  font-size: max(var(--fs-small), 0.6em);
  font-weight: 700;
  opacity: 0.85;
}

/* ------------------------------------------------------------ TV and laptop: 3 columns, no scrolling */

@media (min-width: 1200px) and (min-height: 500px) {
  .home-room {
    overflow: hidden;
    /* A TV cannot scroll: Home's text grows with the text setting only up to 1/38 of the screen
       height (28 px at 1080p, 19 px at 720p), its smallest labels likewise (#72 must 3 and 4). */
    font-size: min(1em, 100vh / 38);
    --fs-small: min(var(--fs-min) * var(--scale), 100vh / 38 * 0.857);
  }

  .home3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas: 'players games join';
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
  }

  .home3 > .panel {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  .home-games .gcard-art svg,
  .home-games .gcard-art img {
    max-height: min(8em, 17vh);
  }

  /* The swatches show for one or two players; with more, the steppers (and Ⓧ Ⓨ) pick a look,
     so four cards and the join hint fit. A column that still runs over scrolls inside. */
  .home-players:not(.few) .look-swatches {
    display: none;
  }

  .home-players {
    overflow-y: auto !important;
  }

  /* One or two players: each swatch row (8 shapes, 8 colours) on one line, smaller (#70). */
  .home-players .look-swatches {
    padding-left: 0;
    gap: 0.15em;
  }

  .home-players .swatch-row {
    flex-wrap: nowrap;
    gap: 0.1em;
  }

  .home-players .swatch {
    width: 1.3em;
    height: 1.3em;
  }
}

/* ------------------------------------------------------------ phones: join first, rows */

@media (max-width: 599px), (max-height: 499px) {
  .home3 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'pjoin'
      'host'
      'players'
      'join'
      'games';
  }

  .phone-join {
    display: flex !important;
  }

  .phone-host {
    display: block;
    margin: 0.3em 0 -0.5em;
    padding: 0 1.1em;
  }

  .phone-host h2 {
    margin: 0;
    font-size: 1.15em;
    font-weight: 900;
  }

  .phone-host .hint {
    margin: 0.2em 0 0;
  }

  .phone-join-form .code-input::placeholder {
    color: var(--ui-dim);
    opacity: 0.6;
  }

  .phone-join-form {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
  }

  .phone-join-form .code-input {
    width: 100%;
    font-size: 1.6em;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
  }

  .phone-join-actions {
    display: grid;
    /* Two side by side, one above the other at big text (#72: reflow, never sideways). */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr));
    gap: 0.5em;
  }

  .phone-join-actions .btn {
    min-height: 3em;
  }

  .join-qr {
    height: auto;
    width: min(60vw, 14em);
  }
}

/* Phones in landscape: the join form and the Join card side by side. */
@media (max-height: 499px) and (min-width: 600px) {
  .home3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'pjoin join'
      'host join'
      'players join'
      'games games';
  }

  .join-qr {
    width: min(40vh, 12em);
  }
}

/* ------------------------------------------------------------ "Join a game": the code and this screen's name */

.join-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4em;
  max-width: 100%;
  min-width: 0;
}

.join-form .row {
  max-width: 100%;
  min-width: 0;
}

.join-form input {
  max-width: 100%;
  min-width: 0;
}

.name-input {
  width: 12em;
  padding: 0.4em 0.6em;
  border-radius: 0.6em;
  border: 2px solid var(--ui-line);
  background: rgba(0, 0, 0, 0.3);
  font-weight: 800;
}

/* ------------------------------------------------------------ lobby energy (#72 should 15) */

/* The players counter: a pill that bumps when someone comes or goes. */
.pcount {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.05em 0.6em;
  border-radius: 1em;
  background: var(--ui-key);
  color: var(--ui-text);
  font-variant-numeric: tabular-nums;
}

.pcount.bump {
  animation: pcount-bump 0.5s ease-out both;
  animation-delay: var(--pop-at, 0s);
}

@keyframes pcount-bump {
  0% {
    transform: scale(1);
    background: var(--focus);
    color: var(--bg);
  }
  35% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

/* A new player's card or chip pops in (C# gives how far in it starts, so drawing Home again
   does not restart it). */
.pcard.pop,
.pchip.pop {
  animation: pcard-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--pop-at, 0s);
}

@keyframes pcard-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Reduced motion: no growing or bouncing; the new card fades in with a brief outline instead. */
.reduced-motion .pcount.bump {
  animation-name: pcount-flash;
}

.reduced-motion .pcard.pop,
.reduced-motion .pchip.pop {
  animation-name: pcard-flash;
  animation-timing-function: linear;
}

@keyframes pcount-flash {
  0% {
    background: var(--focus);
    color: var(--bg);
  }
}

@keyframes pcard-flash {
  0% {
    opacity: 0;
    outline: 3px solid var(--c, var(--focus));
  }
  40% {
    opacity: 1;
    outline: 3px solid var(--c, var(--focus));
  }
  100% {
    outline: 3px solid transparent;
  }
}