/* ================= Couch Party — TV / host screen ================= */

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
  overflow: hidden;
}

/* block panel: opaque, hard edge, hard shadow — no glass, no blur */
.card {
  background: var(--night-700);
  border: 2px solid var(--night-500);
  box-shadow: var(--shadow-2);
}

/* ---------------- topbar ---------------- */
#topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  position: relative;
}
/* hard rule under the chrome */
#topbar::after {
  content: '';
  position: absolute;
  left: var(--sp-5); right: var(--sp-5); bottom: 0;
  height: 2px;
  background: var(--night-600);
  pointer-events: none;
}
#logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: 0.04em;
  text-shadow: var(--text-step-sm);
}
.logo-couch { width: 44px; height: 32px; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5)); }

#roundpips { display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-4); }
.turnlabel {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: var(--sp-2);
  white-space: nowrap;
}
.turnlabel b { color: var(--gold); font-size: 1.25em; margin: 0 0.1em; }
.turnlabel i { font-style: normal; color: var(--ink-faint); }
/* round pips: little voxels */
.pip {
  width: 12px; height: 12px;
  background: var(--night-600);
  border: 2px solid var(--night-500);
  transition: all var(--t-med) var(--ease-out);
}
.pip.done { background: var(--pink); border-color: var(--pink-face); }
.pip.now { background: var(--gold); border-color: var(--gold-face); transform: scale(1.35); box-shadow: 2px 2px 0 var(--night-950); }

#topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }
#conn-lost { color: var(--danger); border-color: var(--danger); animation: pulse 1.2s infinite; }
#roomcode b { font-family: var(--font-px); font-size: 1.35em; color: var(--gold); letter-spacing: 0.12em; margin-left: 0.2em; }
.iconbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 20px;
  background: var(--night-700);
  border: 2px solid var(--night-500);
  box-shadow: var(--bevel-soft), 3px 3px 0 rgba(0, 0, 0, 0.35);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast);
}
.iconbtn:hover { background: var(--night-600); }
.iconbtn:active { transform: translateY(3px); box-shadow: var(--bevel-soft), 0 0 0 rgba(0, 0, 0, 0.35); }

/* ---------------- stage ---------------- */
#stage {
  min-height: 0;
  padding: var(--sp-3) var(--sp-6);
  display: grid;
  place-items: center;
}
/* max-height + scroll: a scene taller than the window must never clip off-screen */
#stage > * { animation: rise var(--t-slow) var(--ease-out); width: 100%; max-width: 1500px; max-height: 100%; overflow-y: auto; overflow-x: hidden; }

/* ---------------- scorebar ---------------- */
#scorebar {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  min-height: 62px;
}
.pchip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
  background: var(--night-700);
  border: 2px solid var(--night-500);
  border-left: var(--vx2) solid var(--c);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  font-size: clamp(15px, min(1.25vw, 2.2vh), 20px);
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-out);
  will-change: transform;
}
.pchip.off { opacity: 0.35; filter: grayscale(0.8); }
.pchip.bump { animation: chip-bump 0.55s var(--ease-pop); }
/* podium metals on the top three ranks */
.pchip.rank-1 {
  /* keep the player-color left bar; gild the other three sides */
  border-top-color: var(--gold);
  border-right-color: var(--gold);
  border-bottom-color: var(--gold-face);
}
.pchip.rank-1 .pc-rank { color: var(--gold); }
.pchip.rank-2 .pc-rank { color: #cfcfe2; }
.pchip.rank-3 .pc-rank { color: #e0a877; }
.pc-rank { color: var(--ink-faint); font-family: var(--font-px); font-size: 1.3em; min-width: 1.1em; text-align: center; }
.pc-name { font-weight: 700; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-stat { display: inline-flex; align-items: center; gap: 0.22em; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-stat b { display: inline-block; }
.pc-stat.up b { animation: stat-pop 0.6s var(--ease-pop); }
.pc-stars { color: var(--star); }
.pc-coins { color: var(--coin); }
.pc-beers { color: var(--beer); font-weight: 700; }
/* link status: a 9px voxel */
.pc-pip {
  width: 9px; height: 9px;
  flex: none;
  margin-left: var(--sp-1);
}
.pc-pip.direct { background: var(--lime); }
.pc-pip.relay { background: var(--sky); }
.pc-pip.dead { background: var(--danger); animation: pulse 1.2s infinite; }
/* legacy hooks (pre-economy scenes) */
.pc-pts { color: var(--gold); font-weight: 700; }
.pc-pts small, .pc-beers small { font-size: 0.8em; }
.pc-link { font-size: 0.85em; opacity: 0.5; }
.pc-link.direct { opacity: 1; }

/* ---------------- avatar ---------------- */
/* beveled voxel face, not a circle */
.avatar {
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--c) 30%, var(--night-700));
  border: 2px solid var(--c);
  box-shadow: var(--bevel-soft);
  flex: none;
  overflow: hidden;
}
.avatar-sm { width: 34px; height: 34px; font-size: 17px; }
.avatar-md { width: 48px; height: 48px; font-size: 24px; }
.avatar-lg { width: 84px; height: 84px; font-size: 44px; border-width: 3px; }
/* character portrait (SVG face) fills the block */
.avatar-char svg { width: 100%; height: 100%; }

/* ---------------- lobby ---------------- */
.lobby {
  display: grid;
  grid-template-columns: minmax(340px, 460px) 1fr;
  gap: var(--sp-6);
  align-items: stretch;
}
.lobby-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  text-align: center;
}
.lobby-left h1 { font-size: var(--fs-xl); }
.qrwrap {
  background: #fff;
  border: var(--vx) solid var(--night-950);
  padding: var(--sp-3);
  box-shadow: var(--shadow-2);
}
.qrwrap img { width: min(300px, 26vw, 34vh); height: auto; }
.qr-pending {
  width: min(300px, 26vw, 34vh);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--night-800);
  font-weight: 800;
}
.joinurl { font-size: var(--fs-md); font-weight: 700; color: var(--sky); word-break: break-all; }
.lobby-code { font-size: var(--fs-sm); color: var(--ink-dim); }
.lobby-code b { font-family: var(--font-px); color: var(--gold); letter-spacing: 0.18em; font-size: 1.5em; margin-left: 0.25em; }
.lobby-hint { color: var(--ink-faint); font-size: var(--fs-xs); }

/* Shelf copy has to work from couch distance, not just at laptop distance.
   The higher-specificity selectors override the scene-local menu stylesheet. */
#stage .mm-top { font-size: clamp(17px, min(1.45vw, 2.5vh), 22px); }
#stage .mm-tag { font-size: clamp(14px, min(1.1vw, 2vh), 17px); line-height: 1.3; }
#stage .mm-meta, #stage .mm-h2 small { font-size: clamp(13px, min(1vw, 1.8vh), 15px); }
.lobby-code, .lobby-hint { font-size: clamp(14px, min(1.1vw, 2vh), 17px); }

.lobby-right { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.lobby-right h2 { font-size: var(--fs-lg); }
#pcount { color: var(--ink-faint); font-weight: 600; }
#plist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-content: flex-start;
  min-height: 76px;
}
.lobby-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--night-700);
  border: 2px solid var(--night-500);
  border-left: var(--vx2) solid var(--c);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  animation: pop var(--t-med) var(--ease-pop);
}
.lobby-chip.off { opacity: 0.4; }
.lc-name { font-weight: 700; max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-link { color: var(--gold); }
.lc-kick {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink-faint);
  font-size: 13px;
  transition: all var(--t-fast);
}
.lc-kick:hover { background: var(--danger); color: #fff; }
.empty { color: var(--ink-faint); font-size: var(--fs-md); line-height: 1.6; padding: var(--sp-3); }

/* Wide screens (every TV): the lobby must fit the stage with zero outer
   scroll — the player list is the region that scrolls when the couch fills
   up, never the Start button or the game shelf. */
@media (min-aspect-ratio: 13/10) {
  .lobby { height: 100%; }
  .lobby-left { min-height: 0; }
  #plist { flex: 1 1 auto; overflow-y: auto; min-height: 60px; }
  .lobby-right { min-height: 0; overflow-y: auto; }
}
/* narrow-but-wide windows (960×540 TVs): slim QR column keeps the shelf at 2-up */
@media (min-aspect-ratio: 13/10) and (max-width: 1100px) {
  .lobby { grid-template-columns: minmax(260px, 330px) 1fr; gap: var(--sp-5); }
}

.settings { display: flex; flex-wrap: wrap; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); align-items: center; }
.setting { display: flex; align-items: center; gap: var(--sp-3); }
.setting-label { font-weight: 700; color: var(--ink-dim); font-size: var(--fs-sm); }
.seg {
  display: flex;
  background: var(--night-900);
  border: 2px solid var(--night-500);
  padding: var(--vx);
  gap: var(--vx);
}
.seg button {
  padding: 0.35em 1em;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  transition: all var(--t-fast) var(--ease-out);
}
.seg button.on { background: var(--pink); color: var(--night-900); box-shadow: var(--bevel-soft); }
.switch {
  width: 56px; height: 32px;
  background: var(--night-900);
  border: 2px solid var(--night-500);
  position: relative;
  transition: background var(--t-med);
}
.switch span {
  position: absolute;
  top: var(--vx); left: var(--vx);
  width: 20px; height: 20px;
  background: var(--ink-dim);
  box-shadow: var(--bevel-soft);
  transition: all var(--t-med) var(--ease-pop);
}
.switch.on { background: var(--pink-face); }
.switch.on span { left: 28px; background: var(--pink); }

/* the block CTA: bevel faces, solid extrusion, press = sink */
.bigbtn {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  padding: 0.5em 1.2em;
  background: var(--gold);
  color: var(--night-900);
  box-shadow:
    var(--bevel),
    0 var(--vx2) 0 var(--gold-face),
    var(--vx2) var(--vx4) 0 rgba(0, 0, 0, 0.4);
  transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out), filter var(--t-fast);
  align-self: flex-start;
}
.bigbtn:hover:not(:disabled) { filter: brightness(1.08); }
.bigbtn:active:not(:disabled) {
  transform: translateY(var(--vx2));
  box-shadow:
    var(--bevel),
    0 0 0 var(--gold-face),
    var(--vx) var(--vx) 0 rgba(0, 0, 0, 0.4);
}
.bigbtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--night-600);
  color: var(--ink-faint);
  box-shadow: var(--bevel-soft);
}
.fineprint { color: var(--ink-faint); font-size: var(--fs-xs); }

/* ---------------- intro & countdown ---------------- */
.intro {
  max-width: 900px !important;
  margin: 0 auto;
  text-align: center;
  /* vertical padding rides vh so the 6.5s read never clips on short TVs */
  padding: clamp(var(--sp-4), 6vh, var(--sp-7)) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-2), 1.6vh, var(--sp-3));
  align-items: center;
}
.intro-kicker { color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--fs-sm); }
.intro-emoji { font-size: var(--fs-hero); line-height: 1; animation: thump 1.4s ease-in-out infinite; }
.intro h1 { font-size: var(--fs-3xl); text-shadow: var(--text-step); }
.intro p { font-size: var(--fs-lg); color: var(--ink-dim); max-width: 34ch; }
.intro-drink { color: var(--amber) !important; font-weight: 700; }

.count {
  font-family: var(--font-px);
  font-size: var(--fs-hero);
  text-align: center;
  animation: pop 0.45s var(--ease-pop);
  color: var(--gold);
  text-shadow: var(--text-step);
}
.count.go { color: var(--lime); }

/* ---------------- tap frenzy ---------------- */
.tapgame { max-width: 1100px !important; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4); }
.timerbig {
  font-family: var(--font-px);
  font-size: var(--fs-2xl);
  text-align: center;
  color: var(--gold);
  text-shadow: var(--text-step-sm);
  font-variant-numeric: tabular-nums;
}
#bars { display: flex; flex-direction: column; gap: var(--sp-3); }
.bar-row { display: grid; grid-template-columns: 220px 1fr 90px; align-items: center; gap: var(--sp-4); }
.bar-label { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; overflow: hidden; white-space: nowrap; }
.bar-track {
  height: 34px;
  background: var(--night-900);
  border: 2px solid var(--night-500);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  background: var(--c);
  box-shadow: var(--bevel-soft);
  transition: width 120ms linear;
}
.bar-count { font-family: var(--font-px); font-size: var(--fs-lg); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------- quick draw ---------------- */
.qdgame { display: flex; flex-direction: column; align-items: center; gap: clamp(var(--sp-2), 1.8vh, var(--sp-4)); }
.qd-target { width: min(230px, 22vh); color: var(--ink-faint); transition: color var(--t-fast), transform var(--t-fast) var(--ease-pop); }
.qd-target.hot { color: var(--coral); transform: scale(1.15); filter: drop-shadow(0 0 30px rgba(255, 93, 93, 0.7)); }
.qd-wait { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink-dim); animation: pulse 1.6s infinite; }
.qd-go {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--coral);
  animation: pop 0.3s var(--ease-pop);
  text-shadow: var(--text-step);
}
#qdlist { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; max-width: 1000px; }
.qd-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--night-700);
  border: 2px solid var(--night-500);
  border-left: var(--vx2) solid var(--c);
  font-weight: 700;
}
.qd-time { font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.qd-time.ok { color: var(--ok); }
.qd-time.foul { color: var(--danger); }

/* ---------------- pass the bomb ---------------- */
.bombgame { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.bomb-stage { width: min(210px, 24vh); }
.bombgame.frantic .bomb-stage { animation: shake-x 0.18s linear infinite; }
#bombring { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; max-width: 1100px; }
.bomb-p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--night-700);
  border: 2px solid var(--night-500);
  min-width: 110px;
  transition: all var(--t-med) var(--ease-pop);
}
.bp-emoji { font-size: 38px; }
.bp-name { font-weight: 700; font-size: var(--fs-sm); }
.bomb-p.has-bomb {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 14%, var(--night-700));
  box-shadow: var(--vx) var(--vx) 0 var(--coral-face);
  transform: scale(1.12);
}
.bomb-p.has-bomb .bp-emoji::after { content: ' 💣'; }
#bombstatus { font-size: var(--fs-lg); font-weight: 700; color: var(--ink-dim); }
.boomview { text-align: center; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
.boom-emoji { font-size: var(--fs-hero); animation: pop 0.35s var(--ease-pop); }
.boomview h1 { font-size: var(--fs-2xl); text-shadow: var(--text-step); }
.boomview p { color: var(--ink-dim); font-size: var(--fs-lg); }

/* ---------------- majority rules ---------------- */
.majgame { display: flex; flex-direction: column; gap: var(--sp-5); align-items: center; }
.majgame h2 { font-size: var(--fs-xl); }
.maj-panels {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-5);
  align-items: start;
  width: 100%;
  max-width: 1200px;
}
.maj-panel {
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
  border: 3px solid var(--night-500);
}
.maj-panel.a { background: color-mix(in srgb, var(--pink) 14%, var(--night-800)); border-color: var(--pink); box-shadow: var(--vx) var(--vx) 0 var(--pink-face); }
.maj-panel.b { background: color-mix(in srgb, var(--sky) 12%, var(--night-800)); border-color: var(--sky); box-shadow: var(--vx) var(--vx) 0 var(--sky-face); }
.maj-opt { font-family: var(--font-display); font-size: var(--fs-xl); }
.maj-vs { align-self: center; width: 110px; }
.maj-voters { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.maj-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.8em;
  background: color-mix(in srgb, var(--c) 22%, var(--night-800));
  border: 2px solid var(--c);
  font-weight: 700;
  font-size: var(--fs-sm);
  animation: pop var(--t-med) var(--ease-pop);
}
.maj-chip.dead { opacity: 0.35; filter: grayscale(1); text-decoration: line-through; }
#majstatus, #simonstatus, #tugstatus, #cstatus, #nhiestatus { font-size: var(--fs-lg); font-weight: 700; color: var(--ink-dim); text-align: center; }

/* ---------------- simon sips ---------------- */
.simongame { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.simon-pads {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  width: min(360px, 38vh);
  aspect-ratio: 1;
}
.simon-pad {
  background: color-mix(in srgb, var(--c) 18%, var(--night-700));
  border: 3px solid color-mix(in srgb, var(--c) 45%, var(--night-500));
  box-shadow: var(--bevel-soft);
  transition: all 120ms ease-out;
}
.simon-pad.lit {
  background: var(--c);
  box-shadow: var(--bevel), 0 0 44px var(--c);
  transform: scale(1.06);
}
#simonalive { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; max-width: 900px; }

/* ---------------- tug of war ---------------- */
.tuggame { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 1200px !important; margin: 0 auto; }
.tug-teams { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.tug-team {
  padding: var(--sp-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.tug-team h3 { font-size: var(--fs-lg); }
.tug-team > div { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; align-items: center; font-weight: 700; }
.tug-team.red { background: color-mix(in srgb, var(--coral) 12%, var(--night-800)); border: 2px solid var(--coral); box-shadow: var(--vx) var(--vx) 0 var(--coral-face); }
.tug-team.blue { background: color-mix(in srgb, var(--sky) 10%, var(--night-800)); border: 2px solid var(--sky); box-shadow: var(--vx) var(--vx) 0 var(--sky-face); }
.tug-track {
  position: relative;
  height: 86px;
  background: var(--night-900);
  border: 2px solid var(--night-500);
  overflow: hidden;
}
.tug-zone { position: absolute; top: 0; bottom: 0; width: 18%; }
.tug-zone.red { left: 0; background: color-mix(in srgb, var(--coral) 30%, transparent); }
.tug-zone.blue { right: 0; background: color-mix(in srgb, var(--sky) 26%, transparent); }
.tug-rope {
  position: absolute;
  left: 4%; right: 4%; top: 50%;
  height: 10px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(-45deg, #c9a06a 0 12px, #a87f4f 12px 24px);
}
.tug-knot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 52px;
  transition: left 120ms linear;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5));
}

/* ---------------- color rush ---------------- */
.colorgame { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); text-align: center; }
.color-kicker { font-size: var(--fs-lg); color: var(--ink-dim); font-weight: 700; }
.color-kicker b { color: var(--gold); }
.color-word {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1;
  min-height: 1.2em;
  text-shadow: var(--text-step);
}
.color-word.reveal { animation: pop 0.3s var(--ease-pop); }
.color-progress { color: var(--ink-faint); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--fs-sm); }

/* ---------------- never have I ever ---------------- */
.nhiegame { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); max-width: 1100px !important; margin: 0 auto; }
.nhie-emoji { font-size: var(--fs-2xl); }
.nhie-prompt { font-size: var(--fs-xl); text-align: center; max-width: 26ch; }
.nhie-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); width: 100%; }
.nhie-col {
  background: var(--night-700);
  border: 2px solid var(--night-500);
  padding: var(--sp-4);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
}
.nhie-col h3 { font-size: var(--fs-lg); }

/* ---------------- results ---------------- */
.results {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px);
  gap: var(--sp-5);
  max-width: 1300px !important;
  margin: 0 auto;
  align-items: start;
}
.results-main { padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.results-main h2 { font-size: var(--fs-xl); }
.res-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.res-row {
  display: grid;
  grid-template-columns: 2.4em 1fr auto auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in srgb, var(--c) 10%, var(--night-800));
  border-left: var(--vx2) solid var(--c);
  animation: rise var(--t-med) var(--ease-out) backwards;
}
.res-row:nth-child(1) { animation-delay: 0.05s; }
.res-row:nth-child(2) { animation-delay: 0.14s; }
.res-row:nth-child(3) { animation-delay: 0.23s; }
.res-row:nth-child(4) { animation-delay: 0.32s; }
.res-row:nth-child(5) { animation-delay: 0.41s; }
.res-row:nth-child(n+6) { animation-delay: 0.5s; }
.res-place { font-size: var(--fs-lg); text-align: center; }
.res-name { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-md); overflow: hidden; white-space: nowrap; }
.res-note { color: var(--ink-faint); font-size: var(--fs-sm); }
.res-pts { color: var(--gold); font-family: var(--font-px); font-size: 1.4em; }
.res-drink { font-size: var(--fs-sm); }
.drinkcall {
  background: color-mix(in srgb, var(--amber) 12%, var(--night-800));
  border: 2px solid var(--amber);
  box-shadow: var(--vx) var(--vx) 0 var(--amber-face);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-md);
  color: var(--amber);
  text-align: center;
}
.results-side { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.results-side h3 { font-size: var(--fs-md); color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--sp-1); }
.stand-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; padding: 2px 0; }
.stand-row.hot .stand-name { color: var(--gold); }
.stand-rank { color: var(--ink-faint); min-width: 1.4em; text-align: center; }
.stand-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-pts { color: var(--gold); font-family: var(--font-px); font-size: 1.25em; }

/* ---------------- podium ---------------- */
.podium { display: flex; flex-direction: column; align-items: center; gap: clamp(var(--sp-2), 2.6vh, var(--sp-5)); text-align: center; }
.podium h1 { font-size: var(--fs-2xl); text-shadow: var(--text-step); }
.pod-ava { margin-bottom: var(--sp-1); animation: thump 1.6s ease-in-out infinite; }
.pod-1 .pod-ava { filter: drop-shadow(0 0 22px rgba(255, 225, 77, 0.55)); }
.podium-row { display: flex; align-items: flex-end; gap: var(--sp-4); }
.pod { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); animation: rise 0.7s var(--ease-pop) backwards; }
.pod-1 { animation-delay: 0.55s; }
.pod-2 { animation-delay: 0.25s; }
.pod-3 { animation-delay: 0.05s; }
.pod-name { font-weight: 700; font-size: var(--fs-md); }
.pod-score { color: var(--gold); font-family: var(--font-px); font-size: var(--fs-md); }
/* flat metal blocks with bevel faces — podiums are voxels too */
.pod-block {
  width: clamp(120px, 15vw, 200px);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--night-900);
  background: var(--c);
  box-shadow: var(--bevel), var(--shadow-2);
}
/* block heights ride vh: the whole ceremony (title → blocks → button) must
   fit a 540px-tall TV without scrolling — the Back button was falling off */
.pod-1 .pod-block { height: clamp(80px, 20vh, 150px); background: var(--gold); box-shadow: var(--bevel), var(--glow-gold), var(--shadow-2); }
.pod-2 .pod-block { height: clamp(56px, 14vh, 105px); background: #c9c9dc; }
.pod-3 .pod-block { height: clamp(40px, 10vh, 75px); background: #d29359; }
.podium .drinkcall { max-width: 620px; }
.podium .bigbtn { align-self: center; }

/* ---------------- countdown ring ---------------- */
.ring { width: 100%; }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 8; }
.ring-fg {
  fill: none;
  stroke: var(--gold);
  stroke-width: 8;
  stroke-linecap: butt;
  stroke-dasharray: 276.5;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: ring-drain linear forwards;
}
@keyframes ring-drain { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 276.5; } }
.ring-text {
  fill: var(--ink);
  font-family: var(--font-px);
  font-size: 34px;
  text-anchor: middle;
  dominant-baseline: central;
}

/* ---------------- scene transition curtain ---------------- */
/* durations must track CURTAIN_IN / CURTAIN_OUT in fx.js */
#curtain {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
}
/* stripes live on a full-screen layer so they stay seamless across both panels */
#curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 26px, transparent 26px 52px);
  opacity: 0;
  transition: opacity 260ms var(--ease-out) 200ms;
}
#curtain.in::before { opacity: 1; }
#curtain.out::before { opacity: 0; transition-delay: 0ms; }
.curtain-panel {
  position: absolute;
  left: 0; right: 0;
  height: 50.6%; /* slight overlap: no seam flash mid-wipe */
  transition: transform 360ms cubic-bezier(0.7, 0, 0.3, 1), box-shadow 260ms var(--ease-out) 240ms;
  will-change: transform;
}
/* mirrored vertical gradients meet on the same color: invisible seam when closed */
.curtain-panel.top { top: 0; transform: translateY(-102%); box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6); background: linear-gradient(180deg, #1c0837, #3b1168 58%, #521677 100%); }
.curtain-panel.bot { bottom: 0; transform: translateY(102%); box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.6); background: linear-gradient(0deg, #1c0837, #3b1168 58%, #521677 100%); }
#curtain.in .curtain-panel { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
#curtain.out .curtain-panel.top { box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6); }
#curtain.out .curtain-panel.bot { box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.6); }
/* gold lip where the panels meet */
.curtain-panel.top::after, .curtain-panel.bot::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: var(--gold);
}
.curtain-panel.top::after { bottom: 0; }
.curtain-panel.bot::before { top: 0; }
/* lip shows during the wipe, clears for the title beat */
.curtain-panel.top::after, .curtain-panel.bot::before { transition: opacity 260ms var(--ease-out) 240ms; }
#curtain.in .curtain-panel.top::after, #curtain.in .curtain-panel.bot::before { opacity: 0; }
#curtain.out .curtain-panel.top::after, #curtain.out .curtain-panel.bot::before { opacity: 1; transition-delay: 0ms; }
#curtain.in .curtain-panel { transform: translateY(0); }
#curtain.out .curtain-panel { transition-duration: 420ms; }
#curtain.out .curtain-panel.top { transform: translateY(-102%); }
#curtain.out .curtain-panel.bot { transform: translateY(102%); }
.curtain-title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  text-align: center;
  background: radial-gradient(42% 34% at 50% 50%, rgba(9, 3, 24, 0.5), transparent 100%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 200ms var(--ease-out), transform 340ms var(--ease-pop);
  transition-delay: 220ms; /* let the panels close first */
}
#curtain.in .curtain-title { opacity: 1; transform: scale(1); }
#curtain.out .curtain-title {
  opacity: 0;
  transform: scale(1.18);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  transition-delay: 0ms;
}
.curtain-emoji {
  font-size: var(--fs-hero);
  line-height: 1;
  filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.45));
}
.curtain-label {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1.05;
  max-width: 16ch;
  color: var(--gold);
  text-shadow: var(--text-step);
}

/* ---------------- toast ---------------- */
#toast {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translate(-50%, -16px);
  padding: var(--sp-3) var(--sp-5);
  background: var(--night-700);
  border: 2px solid var(--night-500);
  font-weight: 700;
  font-size: var(--fs-md);
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: all var(--t-med) var(--ease-pop);
  z-index: 80;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- small screens (windowed testing) ---------------- */
@media (max-width: 980px) {
  .bar-row { grid-template-columns: 140px 1fr 70px; }
}
/* Stack the two-column shells only when the window is actually tall/narrow.
   Small 16:9 TV browsers (e.g. 960×540 = 1080p at 2× scaling) are narrow in
   CSS px but still couch screens — stacking there shoves the picker and the
   Start button below a fold nobody can scroll. */
@media (max-width: 980px) and (max-aspect-ratio: 13/10) {
  .lobby, .results { grid-template-columns: 1fr; }
}

/* short viewports (16:9 TVs, 720p laptops): tighten the lobby's vertical
   rhythm so the Start button + player list never fall below the fold */
@media (max-height: 840px) {
  .lobby { gap: var(--sp-5); }
  #stage .mm-tag { line-height: 1.15; }
  .lobby-left { padding: var(--sp-4); gap: var(--sp-3); }
  .lobby-left h1 { font-size: var(--fs-lg); }
  .lobby-right { gap: var(--sp-3); }
  .lobby-right .bigbtn { font-size: var(--fs-lg); padding: 0.42em 1.1em; }
  .lobby-right .fineprint { font-size: 12px; line-height: 1.15; }
  #plist { min-height: 0; }
  .settings { padding: var(--sp-3) var(--sp-4); gap: var(--sp-4); }
  #scorebar { gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
  .pchip { gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); }
  .podium .avatar-lg { width: 64px; height: 64px; font-size: 34px; }
}

/* very short couch screens (960×540 TV browsers, tiny test windows): drop
   the nice-to-have copy and shrink the QR so play controls always fit */
@media (max-height: 620px) {
  .lobby-left { padding: var(--sp-3); gap: var(--sp-2); }
  .qrwrap img { width: min(300px, 26vw, 28vh); }
  .lobby-hint { display: none; }
  .lobby-right .fineprint { display: none; }
  .settings { padding: var(--sp-2) var(--sp-3); gap: var(--sp-3); }
  .intro-emoji { font-size: var(--fs-xl); }
  .intro { gap: clamp(4px, 1.2vh, 12px); padding: var(--sp-3) var(--sp-6); }
  .intro p { font-size: var(--fs-md); }
  /* intro cards that embed a result list (camel champion bets / finish):
     two columns halve the list height so the card clears the fold */
  .intro .res-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-3); width: 100%; }
  /* results: shave row + drinkcall chrome so 4-6 players fit above the fold */
  .results-main { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .res-list { gap: var(--sp-1); }
  .res-row { padding: 2px var(--sp-2); }
  .res-row .avatar-sm { width: 26px; height: 26px; font-size: 13px; }
  .results-side { padding: var(--sp-2) var(--sp-3); }
  .drinkcall { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
  /* podium: title → blocks → Back button must all fit a 540p couch screen */
  .podium { gap: clamp(6px, 1.6vh, 12px); }
  .podium h1 { font-size: var(--fs-xl); }
  .podium .avatar-lg { width: 44px; height: 44px; font-size: 22px; }
  .pod-1 .pod-block { height: 14vh; }
  .pod-2 .pod-block { height: 10vh; }
  .pod-3 .pod-block { height: 7vh; }
  .pod-name, .pod-score { font-size: var(--fs-sm); }
  .podium .bigbtn { font-size: var(--fs-md); padding: 0.4em 1em; }
}