/* The game night page (accounts plan docs/plans/active/2026-10-18-game-night.md, Tasks 10-11): King Fu's room
   (room.css) and the inner pages' base (account/page.css), plus the parts below. Read on a TV across a room: the join
   code is the biggest thing on the screen, the QR beside it, the names and the three games under it. Every size is in
   rem, so the page grows with the width (room.css: 21px on a 1080 TV, 16px on a laptop). Stacked (STACK in games.mjs,
   repeated below) everything is one column. */

/* ---------- the page ---------- */
.party{gap:1.2rem;padding-block:clamp(.8rem,3svh,2rem) .8rem}
.party h1{font-size:3.6rem}
.party h2{font:800 1.45rem/1.05 var(--display);font-stretch:84%;letter-spacing:.005em;color:var(--paper)}
.party .msg{color:var(--danger)}
.party .msg:empty{display:none}
.party .rm-eye b{font-weight:800;letter-spacing:.06em;color:var(--hi)}
/* a part's heading takes the focus when the part changes (screen readers hear where they are); no ring for that */
.party [tabindex="-1"]:focus{outline:none;box-shadow:none}

/* ---------- start: the TV's button beside a phone's join code, the night's three games under them ---------- */
.start{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem 3rem;align-items:center}
.start .lede{font-size:1.25rem;max-width:30ch}
.joinbox{display:grid;gap:.75rem}
.joinbox .fl{margin:0}
.joinbox .row .btn{flex:0 0 auto}
.cin{text-transform:uppercase;font:800 1.4rem/1 var(--display);font-stretch:112%;letter-spacing:.12em}
.tonight{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin:0;padding:0;list-style:none}
.tonight li{display:grid;gap:.55rem;font:700 1.1rem/1.2 var(--display);font-stretch:104%;color:var(--paper)}
.tonight img,.gm img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:.45rem;border:2px solid rgba(244,236,225,.24);box-shadow:0 .8rem 1.6rem -.8rem rgba(0,0,0,.8)}

/* ---------- the TV: the code and QR, who is here, the games ---------- */
.tv{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.4rem}
.codebox{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem}
.codebox .say{display:grid;gap:.5rem;min-width:0;container-type:inline-size}
.codebox h1.rm-eye{font:600 1.2rem/1.2 var(--body);text-shadow:none}
/* as big as its column allows: six characters across, never under the QR */
.bigcode{font:850 min(5.8rem,19cqi)/1 var(--display);font-stretch:100%;letter-spacing:.05em;font-variant-numeric:tabular-nums;color:var(--paper);white-space:nowrap}
.addr{font-size:1.15rem;color:var(--paper)}
.addr b{font-weight:700;color:var(--hi)}
/* dark squares on white with their quiet zone, so any phone camera reads it from the couch */
.qr{width:12rem;height:12rem;border-radius:.4rem}
.crew{display:grid;gap:.8rem;align-content:start}
.crewhead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.count{color:var(--soft);font-weight:600}
.seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.seats li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0;min-height:2.9rem;padding:.25rem .25rem .25rem .8rem;border-radius:.3rem;background:color-mix(in srgb,var(--paper) 9%,transparent)}
.seats .btn{--btn-h:2.4rem}
.seats li.open{background:none;border:2px dashed color-mix(in srgb,var(--paper) 22%,transparent)}
.who-n{min-width:0;font:700 1.15rem/1.2 var(--display);font-stretch:96%;color:var(--paper);overflow-wrap:anywhere}
.you{flex:none;padding-right:.55rem;font:700 .9rem/1 var(--body);color:var(--hi)}
.sure{display:grid;gap:.6rem}
.sure p{font-weight:600}
.picks{grid-column:1/-1;display:grid;gap:.8rem}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,20rem));gap:1.4rem;margin:0;padding:0;list-style:none}
/* a game to pick: its lineup card and name (home's .gm, a game in the lineup) */
.gm{display:grid;gap:.55rem;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;color:var(--paper);font:700 1.3rem/1.2 var(--display);font-stretch:104%}
.gm img{transition:transform .45s var(--spring),border-color .3s}
.gm:hover img{transform:translateY(-.3rem);border-color:var(--paper)}
.gm:focus-visible{box-shadow:none}
.gm:focus-visible img{transform:translateY(-.3rem);border-color:var(--paper);box-shadow:0 0 0 3px var(--night),0 0 0 6px var(--paper)}
.gm[aria-current="true"] img{border-color:var(--hi)}
.gm[disabled]{opacity:.6;cursor:default}

/* ---------- a phone: the names, then Next up ---------- */
.name,.wait,.note{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.4rem 3rem;align-items:center}
.note{grid-template-columns:minmax(0,1fr)}
.names{display:grid;gap:.9rem}
.me{display:grid;gap:.5rem;justify-items:start}
.pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.pick .btn{width:100%;white-space:normal;text-align:center;line-height:1.1}
.wait .lede{font-size:1.3rem}

/* ---------- stacked: phones, portrait tablets, short landscape (STACK in games.mjs) ---------- */
@media (max-aspect-ratio: 5/4), (max-height: 500px), (max-width: 760px){
  .party h1{font-size:2.6rem}
  .start,.tv,.name,.wait{grid-template-columns:minmax(0,1fr)}
  .tonight{gap:.6rem}
  .tonight li{font-size:.85rem}
  .codebox{grid-template-columns:minmax(0,1fr)}
  .qr{width:min(15rem,100%);height:auto;aspect-ratio:1}
  .seats{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
  .pick{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.gm img{transition:none}}