/* Couch mode: the TV (host.html) and the phone controller (play.html), docs/visual-design.md §7.4.
   Loaded after style.css (and account.css on the phone). Everything is scoped to body.host or body.phone.
   The TV is a 10-foot UI: its type scales with the screen (--tv-u) and nothing is smaller than about 20 px at 1080p. */

/* ==========================================================================================
   TV
   ========================================================================================== */
body.host {
  --tv-u: clamp(14px, min(1.35vw, 2.4vh), 38px); /* 25.9 px on a 1920 x 1080 screen, in proportion on any other */
  --sv-footer: 40px; /* Google's footer strip stays clear (§7.3.2); the clock and the tally sit above it */
  font-size: var(--tv-u);
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
.host a { color: inherit; }
.host .muted { color: var(--muted); }
.host .error { font-weight: 700; margin: 0; min-height: 0; }
.host .error:empty { display: none; }
.host .small, .host .tv-small { font-size: .8em; margin: 0; }
.host .legal-links { margin: .8em 0 0; padding: 0; font-size: .75em; }
.host .legal-links a { color: var(--ink-2); }

/* ---------- top bar ---------- */
.tv-bar {
  position: relative; z-index: 4; display: flex; align-items: center; gap: .7em;
  padding: .35em 1.1em; background: var(--bg); box-shadow: 0 3px 0 var(--ink);
}
.dusk .tv-bar { box-shadow: 0 3px 0 rgba(0, 0, 0, .55); }
.tv-bar .logo { font-size: 1.55em; line-height: 1.1; color: var(--text); text-decoration: none; }
.tv-mode { font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tv-bar-end { margin-left: auto; display: flex; align-items: center; gap: .9em; }
.tv-bar-end button { font-size: .8em; padding: .5em 1.2em; }
/* Ghost buttons on dusk (the TV's "Reveal now", the phone's round screen): style.css turns a hovered ghost
   white while the dusk text stays cream. Every state keeps a dark-on-light or light-on-dark pair here. */
body.host.dusk button.ghost:not(:disabled):hover {
  background: var(--lemon); color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 5px var(--cream), 0 4px 0 rgba(0, 0, 0, .6);
}
@media (hover: hover) {
  body.phone.dusk button.ghost:not(:disabled):hover {
    background: var(--lemon); color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 5px var(--cream), 0 4px 0 rgba(0, 0, 0, .6);
  }
}
@media (hover: none) {
  body.phone.dusk button.ghost:not(:disabled):hover { background: var(--cocoa-2); color: var(--cream); } /* no sticky white after a tap */
}
body.host.dusk button.ghost:not(:disabled):active, body.phone.dusk button.ghost:not(:disabled):active {
  background: var(--lemon); color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 5px var(--cream); translate: 0 3px;
}
body.host.dusk button.ghost:focus-visible, body.phone.dusk button.ghost:focus-visible { outline: 3px solid var(--lemon); outline-offset: 4px; }
body.host.dusk button.ghost:disabled, body.phone.dusk button.ghost:disabled { color: var(--sand); }
.tv-round:empty { display: none; }
.tv-round {
  font-weight: 800; padding: .15em .8em; border-radius: var(--r-pill);
  background: var(--lemon); color: var(--ink); box-shadow: var(--outline);
}
.host main { background: var(--bg); }
body.host:not(.dusk) main { background: url(/art/grain.svg) 0 0 / 220px 220px, var(--bg); }
body.host.lite:not(.dusk) main { background: var(--bg); }

/* ---------- welcome ---------- */
.tv-welcome { position: relative; height: 100%; display: grid; place-items: center; padding: 1.2em; overflow: hidden; }
.tv-welcome-bd { position: absolute; inset: 0; }
.tv-welcome-card {
  position: relative; z-index: 3; width: min(30em, 100%); text-align: center; background: var(--cream);
  border-radius: var(--r-xl); box-shadow: var(--outline), var(--toy-3); padding: 1.1em 1.6em .9em;
  display: grid; gap: .55em; justify-items: center;
}
.tv-wordmark { margin: 0; font-size: 3.4em; line-height: 1; letter-spacing: -.035em; }
.tv-wordmark span { color: var(--tangerine-ink); }
.tv-welcome-card .tv-wordmark { font-size: min(var(--fs-hero), 4.6em); } /* keep the wordmark within the card */
.tv-lead { margin: 0; font-size: 1.1em; max-width: 22em; }
.tv-welcome-card button.big { font-size: 1.35em; }

/* ---------- lobby ---------- */
.tv-lobby { height: 100%; display: grid; grid-template-columns: clamp(520px, 35vw, 820px) minmax(0, 1fr); }
.tv-lobby-side {
  position: relative; z-index: 3; min-height: 0; overflow: auto; padding: .7em 1.2em .6em;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45em;
  background: var(--cream); box-shadow: 4px 0 0 var(--ink);
}
.tv-eyebrow { margin: 0; font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.host .join-url { margin: 0; font-size: 1.2em; font-weight: 800; }
.tv-code { display: flex; gap: .1em; justify-content: center; font-size: 5em; line-height: 1; }
.tv-code .cell {
  width: 1.02em; height: 1.28em; display: grid; place-items: center; font-weight: 800; color: var(--ink);
  background: var(--lemon); border-radius: .16em; box-shadow: var(--outline), var(--toy-3);
}
.host .join-qr {
  margin: .1em 0; max-width: none; display: flex; align-items: center; gap: .8em; text-align: left;
  background: #fff; border-radius: var(--r-lg); padding: .5em .9em .5em .5em; box-shadow: var(--outline), var(--toy-2);
}
.host .join-qr svg { width: 7.4em; height: 7.4em; border-radius: var(--r-sm); flex: none; }
.host .join-qr figcaption { display: grid; gap: .1em; font-size: .85em; text-align: left; overflow-wrap: anywhere; }
.host .join-qr figcaption b { font-size: 1.35em; }
.tv-hint { margin: 0; font-weight: 800; font-size: 1.1em; }
.host .roster { margin: 0; max-width: none; gap: .35em .5em; }
.host .chip-name {
  background: #fff; color: var(--ink); font-size: .8em; font-weight: 700; padding: .2em .75em .2em .6em; gap: .45em;
  box-shadow: var(--outline);
}
.host .chip-name i { width: .8em; height: .8em; box-shadow: 0 0 0 2px var(--ink); flex: none; }
.host .chip-name.off { opacity: .45; }
.host .chip-name.away { opacity: .75; outline: 0; box-shadow: var(--outline), inset 0 -3px 0 var(--tangerine); }
.host .chip-name .kick { color: var(--ink-2); font-size: 1em; padding: 0 .3em; background: transparent; box-shadow: none; border-radius: var(--r-sm); }
.host .chip-name .kick:hover, .host .chip-name .kick:focus-visible { color: var(--stop); translate: none; }
.host .chip-name .kick.armed { color: var(--stop); }
.host .chip-name .badge { background: var(--leaf); color: var(--ink); font-size: .75em; }
.host .chip-name .badge.rated { background: var(--lemon); }
.tv-start-row { display: flex; gap: .7em; align-items: center; justify-content: center; margin-top: .15em; }
.tv-start-row button { font-size: 1em; }
.tv-start-row button.big { font-size: 1.3em; }
.tv-start-row button.ghost { font-size: .85em; }
.host .settings { margin: 0; gap: .5em; max-width: none; width: 100%; }
.host .presets { display: inline-flex; gap: 0; padding: .2em; background: var(--clay); border-radius: var(--r-pill); box-shadow: inset 0 0 0 2px var(--ink); flex-wrap: wrap; justify-content: center; }
.host .presets button {
  font-size: .8em; padding: .35em .95em; background: transparent; color: var(--ink); box-shadow: none; translate: none; font-weight: 700;
}
.host .presets button.on { background: var(--lemon); box-shadow: var(--outline); font-weight: 800; }
.host .presets button.custom { opacity: .5; }
.host .presets button.custom.on { opacity: 1; }
.host .presets button:hover:not(:disabled):not(.on) { background: var(--clay-2); box-shadow: none; translate: none; }
.tv-more { width: 100%; font-size: .8em; }
.tv-more summary { cursor: pointer; font-weight: 800; padding: .25em .6em; border-radius: var(--r-pill); width: max-content; margin: 0 auto; list-style: none; box-shadow: var(--outline); background: var(--cream); }
.tv-more summary::-webkit-details-marker { display: none; }
.tv-more summary::after { content: ' ▾'; }
.tv-more[open] summary::after { content: ' ▴'; }
.tv-more .fields { margin-top: .6em; display: grid; grid-template-columns: 1fr 1fr; gap: .5em .9em; }
.host .fields label, .host .league-pick { font-size: 1em; color: var(--ink-2); font-weight: 600; }
.host .fields select, .host .league-pick select { font-size: 1em; padding: .35em .6em; background: #fff; color: var(--ink); border-radius: var(--r-sm); border: 0; box-shadow: 0 0 0 2px var(--ink); }
.host .league-pick { grid-template-columns: auto 1fr; align-items: center; margin-top: .5em; }

/* ---------- name tags and 2D pucks on every scene ---------- */
.tv-scene { position: relative; min-width: 0; min-height: 0; }
.tv-scene > .stage-view { position: absolute; inset: 0; }
.tv-lobby-stage { overflow: hidden; background: #3b2a20; }
.tv-tags { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* 2D (no figures live): a row of pucks standing on the painted floor, names under them */
.tv-tags:not(.is-3d) { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; align-content: flex-end; gap: .5em 1.1em; padding: 0 1.5em 11%; }
.tv-tags:not(.is-3d) .tv-tag { display: inline-flex; flex-direction: column; align-items: center; gap: .3em; }
.tv-tags:not(.is-3d) .puck { --size: 3.1em; font-size: 1em; box-shadow: 0 0 0 3px var(--ink), inset 0 -.3em 0 rgba(0, 0, 0, .18), 0 .25em 0 rgba(0, 0, 0, .25); }
.tv-tags.no-names .tv-tag b { display: none; }
.tv-tags:not(.is-3d).no-names .puck { --size: 2.4em; }
.tv-tag b {
  display: inline-flex; align-items: center; gap: .4em; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .8em; font-weight: 800; color: var(--ink); background: var(--cream); padding: .1em .7em .1em .5em;
  border-radius: var(--r-pill); box-shadow: var(--outline), 0 3px 0 var(--edge-ink);
}
.tv-tag b::before { content: ''; width: .7em; height: .7em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--ink); flex: none; }
/* 3D: the tag is placed by script (--x, --y = the projected slot, CSS px in the view) */
.tv-tags.is-3d .tv-tag { position: absolute; left: 0; top: 0; opacity: 0; transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) + .75em)); transition: opacity var(--t-base) var(--ease-out); }
.tv-tags.is-3d .tv-tag.above { transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 100% - .2em)); }
.tv-tags.is-3d .tv-tag.placed { opacity: 1; }
.tv-tags.is-3d .puck { display: none; }

/* ---------- between rounds / start countdown ---------- */
.tv-loading { position: relative; height: 100%; overflow: hidden; background: #3b2a20; }
.tv-loading > .tv-scene { position: absolute; inset: 0; }
.tv-loading-card {
  position: absolute; left: 0; right: 0; top: 5%; z-index: 6; display: grid; justify-items: center; gap: .3em; text-align: center; padding: 0 2em; pointer-events: none;
}
.tv-loading-card button { pointer-events: auto; font-size: .85em; margin-top: .4em; }
.tv-loading-line { margin: 0; font-size: 1.9em; }
.tv-digit:not(.hidden) ~ .tv-loading-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the digit says it; the line stays for screen readers */
.tv-digit {
  margin: 0; font-size: 7.5em; line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: var(--cream); text-shadow: 0 .06em 0 var(--ink), 0 0 0 var(--ink); -webkit-text-stroke: .02em var(--ink); paint-order: stroke fill;
}
.tv-digit.tick { animation: tv-drop var(--t-slow) var(--ease-bounce) both; }
@keyframes tv-drop { from { transform: translateY(-.5em) scale(1.35); opacity: 0; } 60% { opacity: 1; } }

/* ---------- the round (dusk): panorama stays whole; the clock and the tally sit above the footer-clear zone ---------- */
.tv-guessing { position: absolute; inset: 0; }
.tv-hud { left: 1.1em; right: 1.1em; bottom: calc(var(--sv-footer) + 24px); align-items: flex-end; }
.tally { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45em .55em; max-width: 64%; align-items: flex-end; }
.tally-p {
  position: relative; display: grid; justify-items: center; gap: .1em; width: 4.9em; padding: .35em .3em .3em;
  background: var(--cocoa); color: var(--cream); border-radius: var(--r-md); box-shadow: 0 0 0 2.5px var(--sand), 0 4px 0 rgba(0, 0, 0, .55);
}
.tally-face { display: block; width: 2.5em; height: 2.5em; border-radius: 50%; overflow: hidden; background: var(--c); box-shadow: 0 0 0 3px var(--c); }
.tally-face img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.8); opacity: .6; transition: filter var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out); }
.tally-p b { font-size: .8em; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sand); }
.tally-p.locked { box-shadow: 0 0 0 3px var(--go-bright), 0 4px 0 rgba(0, 0, 0, .55); }
.tally-p.locked .tally-face { box-shadow: 0 0 0 3px var(--go-bright); }
.tally-p.locked .tally-face img { filter: none; opacity: 1; }
.tally-p.locked b { color: var(--cream); }
.tally-p.locked::after {
  content: '✓'; position: absolute; right: -.3em; top: -.4em; width: 1.3em; height: 1.3em; display: grid; place-items: center;
  background: var(--go-bright); color: var(--ink); font-weight: 800; font-size: .8em; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink);
}
.tally-p.just-locked { animation: tv-pop var(--t-base) var(--ease-spring) both; }
@keyframes tv-pop { from { transform: scale(.82); } }
.tally-p.off { opacity: .45; }
.tally-p.away { opacity: .75; }
.tally-p.ghost { opacity: .5; }
.tally-x { display: flex; gap: .2em; align-items: center; font-size: .75em; min-height: 0; }
.tally-x:empty { display: none; }
.tally .energy { width: 3.6em; margin: 0; }
.tv-clock {
  --tc: var(--cream); position: relative; flex: none; margin-right: max(52px, 4vw); /* left of Google's zoom and compass controls */ width: 4.6em; height: 4.6em; display: grid; place-items: center;
  background: var(--cocoa); border-radius: 50%; box-shadow: 0 0 0 3px var(--sand), 0 5px 0 rgba(0, 0, 0, .55);
}
.tv-clock svg { position: absolute; inset: .3em; width: calc(100% - .6em); height: calc(100% - .6em); transform: rotate(-90deg); }
.tv-clock circle { fill: none; stroke-width: 8; }
.tv-clock .track { stroke: rgba(255, 246, 228, .2); }
.tv-clock .sweep { stroke: var(--tc); stroke-linecap: round; transition: stroke var(--t-base) var(--ease-out); }
.tv-clock .timer, .tv-clock .timer.urgent {
  position: relative; min-width: 0; padding: 0; background: none; border-radius: 0; color: var(--tc);
  font-size: 2.1em; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.tv-clock[data-t='10'] { --tc: var(--tangerine); }
.tv-clock[data-t='5'] { --tc: var(--stop-bright); animation: tv-tick 1s ease-in-out infinite; }
@keyframes tv-tick { 50% { transform: scale(1.06); } }
.host .lead .ring { width: 260px; height: 260px; }
.host .lead .ring b { font-size: 8rem; }
.host .lead-note { font-size: 1.15em; bottom: 9%; color: var(--sand); }
.host .eyes-card b, .host .listen-card b { font-size: 2.4em; }
.host .eyes-card span, .host .listen-card span { font-size: 1.1em; }
.host #go-start { font-size: .8em; }

/* ---------- reveal ---------- */
.tv-reveal { grid-template-columns: minmax(0, 1fr) clamp(600px, 41vw, 900px); }
.tv-reveal .map { height: 100%; background: #a9d3df; } /* the map's water (gmap.js), while it loads */
.tv-reveal aside {
  min-height: 0; overflow: auto; background: var(--cream); padding: .7em 1.1em .6em; gap: .45em; box-shadow: -4px 0 0 var(--ink);
  position: relative; z-index: 2;
}
.tv-reveal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .8em; align-items: center; }
.tv-reveal-head > * { grid-column: 1; min-width: 0; }
.tv-reveal-head .thumb { grid-column: 2; grid-row: 1 / span 3; width: 6.4em; height: 4.4em; max-height: none; border-radius: var(--r-md); box-shadow: var(--outline); }
.tv-reveal h2 { margin: 0; font-size: 1.9em; line-height: 1.05; }
.tv-country { font-size: 1.1em; font-weight: 700; color: var(--ink-2); }
.tv-reveal .credit { font-size: .8em; }
.tv-reveal .credit a { color: var(--ink-2); }
.tv-reveal .highlights { gap: .3em; }
.tv-reveal .highlights p { font-size: .95em; padding: .3em .7em; border-radius: var(--r-md); border-left: 0; background: var(--lemon); color: var(--ink); box-shadow: var(--outline); }
.tv-reveal .guided { margin: 0; font-weight: 800; font-size: .95em; }
.tv-reveal .pick { margin: 0; }
.tv-reveal .pick .card { background: #fff; color: var(--ink); border: 0; box-shadow: var(--outline); padding: .3em .4em; }
.tv-reveal .pick .card.chosen { background: var(--lemon); }
.tv-reveal .pick .card .icon { font-size: 1.3em; }
.tv-reveal .pick > p, .tv-reveal .pick-line { font-size: .9em; font-weight: 700; }
.host table.results { flex: 0 0 auto; width: 100%; border-collapse: separate; border-spacing: 0 .26em; font-size: 1em; }
.host table.results td {
  padding: .18em .7em; background: #fff; color: var(--ink); vertical-align: middle; border: 0;
  border-block: 2.5px solid var(--ink); text-align: left; font-weight: 400;
}
.host table.results td:first-child { border-left: 2.5px solid var(--ink); border-radius: var(--r-md) 0 0 var(--r-md); }
.host table.results td:last-child { border-right: 2.5px solid var(--ink); border-radius: 0 var(--r-md) var(--r-md) 0; text-align: right; white-space: nowrap; font-weight: 800; width: 1%; }
.host table.results .r1 { display: flex; align-items: baseline; gap: .35em; min-width: 0; }
.host table.results .place { color: var(--ink-2); font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.4em; }
.host table.results .dot { display: inline-block; vertical-align: middle; align-self: center; flex: none; width: .75em; height: .75em; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); }
.host table.results .who { font-weight: 800; font-size: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host table.results .km { font-size: .8em; color: var(--ink-2); font-weight: 600; margin-left: .3em; white-space: nowrap; }
.host table.results .tag { font-size: .7em; background: var(--clay); border-radius: var(--r-sm); padding: .1em .5em; margin: 0; font-weight: 700; color: var(--ink); white-space: nowrap; }
.host table.results .tag.good { background: var(--leaf); color: var(--ink); }
.host table.results .parts { font-size: .78em; margin: 0 0 0 2.5em; color: var(--ink-2); line-height: 1.3; }
.host table.results .part.base { color: var(--ink-2); }
.host table.results .part.good { color: var(--go); }
.host table.results .part.bad { color: var(--stop); }
.host table.results .part.gold { color: var(--tangerine-ink); }
.host table.results .sep { color: var(--ink-2); }
.host table.results .r-end { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.host table.results .pts { font-size: 1.45em; font-variant-numeric: tabular-nums; min-height: 1.1em; }
.host table.results .total { font-size: .75em; color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.host .plus { color: var(--go); }
.host .minus { color: var(--stop); }
/* many players: two columns of cards (the rows are the cards, so FLIP still moves them) */
.host table.results.cols2, .host table.results.cols2 tbody { display: block; }
.host table.results.cols2 tbody { display: grid; grid-template-columns: 1fr 1fr; gap: .16em .5em; }
.host table.results.cols2 tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; background: #fff; border: 2.5px solid var(--ink); border-radius: var(--r-md); }
.host table.results.cols2 td, .host table.results.cols2 td:first-child, .host table.results.cols2 td:last-child { display: block; border: 0; border-radius: 0; background: none; padding: .04em .5em; width: auto; min-width: 0; }
.host table.results.cols2 .km, .host table.results.cols2 .total { display: none; }
.host table.results.cols2 .pts { font-size: 1.15em; }
/* many players: one line each */
.host table.results.dense { border-spacing: 0 .16em; }
.host table.results.dense td { padding-block: .04em; }
.host table.results.dense .parts, .host table.results.dense .tag { display: none; }
.host table.results.dense .r-end { flex-direction: row; align-items: baseline; gap: .5em; }
.host table.results.dense:not(.cols2) .total::before { content: '= '; }
.host table.results.dense .pts { font-size: 1.2em; min-height: 0; }
.host table.results .hit { display: inline; font-size: 1em; color: var(--stop); }
.host .energy { background: rgba(36, 23, 15, .18); }
.host .energy > i { background: var(--go); }
.host .energy.low > i { background: var(--stop); }
.tv-strip { flex: none; height: clamp(130px, 16vh, 260px); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--outline), var(--toy-2); background: #3b2a20; }
/* the strip takes the panel's free height (bigger figures for the couch), up to 40 % of the screen */
.tv-reveal .tv-strip { flex: 1 1 0; height: auto; min-height: clamp(130px, 16vh, 260px); max-height: 40vh; }
.tv-next { flex: none; display: flex; align-items: center; gap: 1em; margin-top: auto; }
.tv-next button.big { font-size: 1.1em; min-height: 0; padding: .4em 1.3em .4em 1em; }
.tv-next p { margin: 0; }
/* the answer beacon and the map labels */
.tv-beacon { position: relative; }
.tv-beacon i {
  position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; background: var(--lemon);
  box-shadow: 0 0 0 4px var(--ink), 0 6px 0 rgba(36, 23, 15, .45); animation: tv-beacon-drop var(--t-slow) var(--ease-bounce) both;
}
.tv-beacon i::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--ink); }
.tv-beacon b { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 3px var(--lemon); animation: tv-ring 1.6s var(--ease-out) .45s 2 both; }
@keyframes tv-beacon-drop { from { transform: translateY(-40px) scale(1.5); opacity: 0; } 55% { opacity: 1; } }
@keyframes tv-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.tv-dot { border-width: 4px; border-color: #fff6e4; }
.gp-tip.tv-tip { font: 800 20px/1.1 var(--font); color: var(--ink); background: var(--cream); border: 0; border-radius: 999px; padding: 4px 12px; box-shadow: 0 0 0 2.5px var(--ink), 0 3px 0 rgba(36, 23, 15, .4); }

/* ---------- final ---------- */
.tv-final { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(500px, 29vw, 660px); overflow: hidden; background: #3b2a20; }
.tv-final-stage { overflow: hidden; }
.tv-final-side {
  position: relative; z-index: 6; min-height: 0; overflow: auto; padding: .6em 1em .7em; display: flex; flex-direction: column; gap: .45em;
  background: var(--cream); box-shadow: -4px 0 0 var(--ink);
}
.tv-final-side h1 { margin: 0; font-size: 2.6em; }
.tv-final-side .awards { margin: 0; max-width: none; gap: .45em; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-final-side .award { padding: .3em .7em; gap: .6em; background: #fff; box-shadow: var(--outline); border-radius: var(--r-md); color: var(--ink); }
.tv-final-side .award .icon { font-size: 1.6em; }
.tv-final-side .award b { font-size: .9em; }
.tv-final-side .award span:not(.icon) { font-size: .75em; color: var(--ink-2); line-height: 1.25; display: block; }
.tv-final-side .roster { justify-content: flex-start; margin-top: .5em; }
/* the full ranking: one card per player, the top three in their podium colours */
.tv-final-side table.results { font-size: 1.05em; }
.tv-final-side table.results td { padding-block: .22em; }
.tv-final-side table.results .score { font-size: 1.25em; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-final-side table.results small { display: block; font-size: .7em; font-weight: 700; color: var(--ink-2); }
.tv-final-side table.results tr.p1 td { background: var(--lemon); }
.tv-final-side table.results tr.p2 td { background: var(--sky); }
.tv-final-side table.results tr.p3 td { background: var(--tangerine); }
.tv-final-side table.results tr.top .place { color: var(--ink); }
.tv-final-side table.results tr.top .dot { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4.5px #fff; }
.tv-final-side table.results.dense td { padding-block: .1em; }
.tv-final-side table.results.dense .score { font-size: 1.1em; }
.tv-final-side table.results.dense small { display: inline; margin-left: .3em; }
.host table.results.cols2 tr.p1 { background: var(--lemon); }
.host table.results.cols2 tr.p2 { background: var(--sky); }
.host table.results.cols2 tr.p3 { background: var(--tangerine); }
.tv-final-side table.results.cols2 td { background: none; }
.tv-final-side .tv-players summary { margin: 0; }
.tv-final-side #again { align-self: flex-start; margin-top: auto; font-size: 1.2em; }
/* 7+ players: a wider panel (two-column ranking, shorter award lines); "Play again" never scrolls away */
.tv-final.many { grid-template-columns: minmax(0, 1fr) clamp(600px, 40vw, 900px); }
.tv-final.many .tv-final-side h1 { font-size: 2.2em; }
.tv-final.many .tv-final-side .awards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-final.many .tv-final-side .award { padding: .25em .55em; gap: .45em; }
.tv-final.many .tv-final-side .award .icon { font-size: 1.3em; }
.tv-final.many .tv-final-side .award span:not(.icon) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.tv-final-side #again { position: sticky; bottom: 0; }
.tv-final-side .settings { font-size: .85em; }
.tv-final-side .tv-more, .tv-final-side .presets { font-size: .85em; }
.host .awards:empty, .host #final-league:empty { display: none; }
/* the podium's labels: above the heads while the figures are live ... */
.tv-podium { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tv-podium .pod { font-size: .85em; text-align: center; }
.pod .place, .pod .score, .pod b { color: var(--ink); }
.pod b { display: block; font-weight: 800; }
.tv-podium.is-3d .pod {
  position: absolute; left: 0; top: 0; opacity: 0; display: grid; justify-items: center; line-height: 1.15; padding: .2em .8em .25em;
  background: var(--cream); border-radius: var(--r-md); box-shadow: var(--outline), 0 3px 0 var(--edge-ink);
  transform: translate(calc(var(--x, 0px) - 50%), calc(var(--y, 0px) - 100% - .2em)); transition: opacity var(--t-base) var(--ease-out);
}
.tv-podium.is-3d .pod.placed { opacity: 1; }
.tv-podium.is-3d .pod .puck, .tv-podium.is-3d .pod .place { display: none; }
.tv-podium.is-3d .pod.p1 { background: var(--lemon); }
.tv-podium.is-3d .pod .score { font-size: .85em; font-weight: 700; }
.tv-podium.is-3d .pod.pr { padding: .05em .6em; font-size: .7em; }
.tv-podium.is-3d .pod.pr b { display: inline; }
.tv-podium.is-3d .pod small { display: none; }
/* ... and plain toy blocks in 2D */
.tv-podium:not(.is-3d) { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; align-content: flex-end; gap: .6em 1em; padding: 0 1em 6%; }
.tv-podium:not(.is-3d)::after { content: ''; flex-basis: 100%; height: 0; order: 1; }
.tv-podium:not(.is-3d) .pod:not(.pr) {
  order: 0; display: grid; justify-items: center; align-content: start; gap: .1em; min-width: 8em; padding: .5em .8em; border-radius: var(--r-lg) var(--r-lg) .3em .3em;
  background: var(--clay); box-shadow: var(--outline), var(--toy-2); height: 8em;
}
.tv-podium:not(.is-3d) .pod.p1 { background: var(--lemon); height: 11em; }
.tv-podium:not(.is-3d) .pod.p2 { background: var(--sky); height: 9em; }
.tv-podium:not(.is-3d) .pod.p3 { background: var(--tangerine); height: 7.4em; }
.tv-podium:not(.is-3d) .pod .place { font-size: 2.6em; font-weight: 800; line-height: 1; }
.tv-podium:not(.is-3d) .pod .puck { display: none; }
.tv-podium:not(.is-3d) .pod.pr { order: 2; display: inline-flex; align-items: center; gap: .4em; background: var(--cream); padding: .1em .7em .1em .3em; border-radius: var(--r-pill); box-shadow: var(--outline); }
.tv-podium:not(.is-3d) .pod.pr .puck { display: inline-grid; --size: 1.8em; }

/* ==========================================================================================
   Phone controller (/play): the same toy-box language, no three.js, old phones welcome
   ========================================================================================== */
body.phone { background: var(--cream); color: var(--ink); --me: var(--lemon); }
body.phone.dusk { background: var(--cocoa); color: var(--cream); }
body.phone:not(.dusk) { background: url(/art/grain.svg) 0 0 / 220px 220px, var(--cream); }
body.phone.lite:not(.dusk) { background: var(--cream); }
.phone .guess { padding: 0; gap: 0; }
.phone .logo { font-size: 2.6rem; margin: 0; text-align: center; line-height: 1; letter-spacing: -.035em; text-shadow: 0 .06em 0 rgba(255, 255, 255, .55); }
.phone .muted { color: var(--ink-2); }
.phone .small { font-size: .85rem; margin: 0; }
.phone .error { font-weight: 700; margin: 0; min-height: 0; }
.phone .error:empty { display: none; }
.phone .legal-links a, .phone .small a { color: var(--ink-2); }
.phone button { font-size: 1.05rem; }
.phone .join { gap: 14px; justify-content: center; }
.phone .join .small, .phone .join .muted { text-align: center; }
/* the party code: four chunky lemon cells over one real input */
.code-cells { position: relative; display: flex; justify-content: center; gap: 10px; }
.code-cells .cell {
  width: 62px; height: 78px; display: grid; place-items: center; font-size: 2.5rem; font-weight: 800; line-height: 1;
  background: var(--lemon); color: var(--ink); border-radius: var(--r-md); box-shadow: var(--outline), var(--toy-2);
  transition: translate var(--t-quick) var(--ease-out), background-color var(--t-quick) var(--ease-out);
}
.code-cells .cell.on { background: #fff; translate: 0 3px; box-shadow: var(--outline), var(--toy-1); }
.code-cells .cell.on:empty::after { content: ''; width: 3px; height: 1.3em; background: var(--ink); animation: ph-caret 1s steps(1) infinite; }
@keyframes ph-caret { 50% { opacity: 0; } }
.phone .join .code-cells input.code-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; padding: 0; letter-spacing: 0; cursor: text;
}
.name-row { display: flex; align-items: center; gap: 12px; }
.name-row .puck, .name-row .figure-btn { --size: 56px; flex: none; }
.name-row .figure-btn { --c: var(--lemon); }
.me-face.is-look { background: var(--me, var(--lemon)); border-radius: 50%; }
.phone .join input#name-input { font-size: 1.1rem; font-weight: 600; border-radius: var(--r-md); padding: .85em 1em; }
.phone #join-btn { font-size: 1.35rem; min-height: 60px; }
.phone .account-bar { font-size: .85rem; color: var(--ink-2); }
.phone .account-bar a { color: var(--ink); font-weight: 700; }
.phone .account-bar button.ghost { font-size: .9rem; padding: .5em 1.2em; }

/* the waiting screen: your portrait, then the message */
.me-card {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; background: #fff; color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--outline), var(--toy-2);
}
.me-card.hidden { display: none; }
.me-face { width: 72px; height: 72px; border-radius: 50%; flex: none; background: var(--me); box-shadow: 0 0 0 3px var(--ink), 0 0 0 7px var(--me); margin: 4px 7px 4px 4px; display: block; overflow: hidden; }
.me-name { font-size: 1.4rem; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.me-sub { font-size: .9rem; color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.phone .big-msg { font-size: 1.15rem; line-height: 1.35; }
.phone .big-msg > div { background: #fff; color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--outline), var(--toy-2); padding: 18px 16px; width: 100%; }
.phone .big-msg strong { display: block; font-size: 2.4rem; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; }
.phone .big-msg strong.plus, .phone .big-msg strong.locked-msg { color: var(--go); }
.phone .big-msg strong.locked-msg::before { content: '✓ '; }
.phone .big-msg strong.minus { color: var(--stop); }
.phone .big-msg .muted, .phone .big-msg .breakdown { color: var(--ink-2); }
.phone .big-msg .breakdown { font-size: .85rem; margin-top: 6px; }
.phone .big-msg a { color: var(--ink); font-weight: 700; }
.phone .ready-line { margin: 14px 0 0; }
.phone .ready-line button { font-size: 1.25rem; min-height: 56px; padding: .5em 2em; }
.phone .my-energy { color: var(--ink-2); }
.phone .reactions { gap: 10px; }
.phone .reactions button { font-size: 1.8rem; min-height: 60px; border-radius: var(--r-md); }
.phone .reactions button:active { transform: none; }
.phone .reactions.cooling button { opacity: .5; }
.phone .twist-note { color: var(--sand); }
.phone .pick { margin: 12px 0 0; text-align: left; }
.phone .pick .cards { gap: 8px; }
.phone .pick .card, .phone .pick button.card {
  background: #fff; color: var(--ink); padding: 10px 6px; border: 0; border-radius: var(--r-md); box-shadow: var(--outline), var(--toy-1); font-weight: 400;
  display: grid; gap: 2px; justify-items: center; text-align: center;
}
.phone .pick button.card[aria-pressed='true'], .phone .pick .card.chosen { background: var(--lemon); translate: 0 2px; box-shadow: var(--outline); }
.phone .pick .card b { font-weight: 800; }

/* the guess screen: dusk, like the TV round */
.phone .guess { background: var(--cocoa); color: var(--cream); }
.phone .guess .peek { background: #000; }
.phone .guess .peek .timer {
  top: 8px; right: 8px; min-width: 2.6em; padding: .15em .55em; font-size: 1.5rem; font-weight: 800; line-height: 1.15;
  color: var(--cream); background: var(--cocoa); border-radius: var(--r-pill); box-shadow: 0 0 0 2.5px var(--sand);
  font-variant-numeric: tabular-nums;
}
.phone .guess .peek .timer.urgent { color: var(--tangerine); }
.phone .guess .peek .timer[data-t='5'] { color: var(--stop-bright); }
.phone .guess .peek .expand, .phone .guess #go-start { background: var(--cocoa); color: var(--cream); box-shadow: 0 0 0 2.5px var(--sand); }
.phone .guess .peek .expand { padding: .3em .7em; }
.phone .guess .map { border: 4px solid var(--me); border-left-width: 0; border-right-width: 0; background: var(--clay); }
.phone .controls { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--cocoa-2); gap: 12px; }
.phone .chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 4px; background: var(--cocoa-3); border-radius: var(--r-pill); box-shadow: inset 0 0 0 2px var(--sand); }
.phone .chips button {
  background: transparent; color: var(--cream); padding: .7em .3em; font-size: .95rem; box-shadow: none; translate: none; font-weight: 700; white-space: nowrap;
}
.phone .chips button.on, .phone .chips button[aria-pressed='true'] { background: var(--lemon); color: var(--ink); box-shadow: var(--outline); font-weight: 800; }
.phone .chips button:hover:not(.on) { background: var(--cocoa-2); box-shadow: none; translate: none; }
.phone #lock { min-height: 58px; font-size: 1.2rem; }
.phone #lock:disabled { background: var(--cocoa-3); color: var(--sand); box-shadow: 0 0 0 2.5px var(--sand); }
.phone .guess .lead { background: var(--cocoa); color: var(--cream); }
.phone .guess .lead-note { color: var(--sand); }
.phone .guess .eyes-card, .phone .guess .listen-card { color: var(--cream); }
/* sign-in and the spot picker, daylight again */
.phone #signin, .phone #turf { color: var(--ink); }
.phone #signin .card { background: #fff; color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--outline), var(--toy-2); padding: 16px; }
.phone #signin .tabs { background: var(--clay); box-shadow: inset 0 0 0 2px var(--ink); }
.phone #signin .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.phone #signin .tabs button { background: transparent; color: var(--ink); box-shadow: none; translate: none; min-width: 0; padding: .55em .2em; font-size: .95rem; }
.phone #signin .tabs button[aria-selected='true'] { background: var(--lemon); box-shadow: var(--outline); }
.phone #signin .field { color: var(--ink-2); }
.phone #signin .linkish { background: none; box-shadow: none; color: var(--ink); text-decoration: underline; padding: 0; }
.phone #signin .notice { background: var(--clay); color: var(--ink); }
.phone #turf h2 { font-size: 1.5rem; }
.phone #turf-map { border: 4px solid var(--me); }
.phone .toast { bottom: 16px; }

@media (max-width: 360px) {
  .code-cells .cell { width: 56px; height: 70px; }
  .phone #lock { font-size: 1.05rem; padding: .6em .8em; min-height: 52px; }
  .phone .chips button { font-size: .85rem; }
  .me-name { font-size: 1.2rem; }
}

/* ==========================================================================================
   Reduced motion: everything lands in its end state, nothing loops (§5.7)
   ========================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tv-digit.tick, .tally-p.just-locked, .tv-beacon i, .tv-beacon b, .tv-clock[data-t='5'], .code-cells .cell.on:empty::after { animation: none; }
  .tv-beacon b { opacity: 0; }
  .tv-tags.is-3d .tv-tag, .tv-podium.is-3d .pod, .tally-face img, .tv-clock .sweep, .code-cells .cell { transition: none; }
}

/* ---------- language switch (i18n.js fills [data-lang-switch]) ---------- */
.tv-bar .tv-lang { font-size: .9rem; }
.join-alt a { color: inherit; }
.phone-lang { text-align: center; margin: .5rem 0 0; color: var(--muted); }