/* The TV. Sized off the viewport so it fills 720p, 1080p and 4K the same way. Kept to CSS old
   smart-TV browsers understand: no flex `gap`, no aspect-ratio, no color-mix. */
.tvbody { overflow: hidden; height: 100vh; cursor: default; }
.tvbody .drift span { font-size: 3vw !important; }
/* v1.8.1: the top is pushed down 9vh by default (the living-room TV has a drape over its top edge); the remote's
   up/down arrows move it per TV (tv.js, saved in localStorage). */
.tv { position: relative; z-index: 1; height: 100vh; padding: 9vh 4vw 3vh; display: flex; flex-direction: column; }
.tv h1.title { font-size: 6vw; margin: 0; text-align: center; }
.tv .sub { text-align: center; font-size: 2.2vw; color: var(--muted); font-weight: 700; margin-top: 0.6vh; }
.grow { flex: 1; display: flex; align-items: center; justify-content: center; }

/* lobby */
/* v1.8.3: the box starts 6vw higher (padding makes up for it) so the QR card's 6vw glow fades out instead of being
   cut flat by overflow:hidden; .sub sits above it so the glow never washes over the subtitle. */
.lobby-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding-top: calc(3vh + 6vw); margin-top: -6vw; min-height: 0; overflow: hidden; }
.tv .sub { position: relative; z-index: 2; }
.qr-card { background: #fff; border-radius: 2vw; padding: 1.6vw; text-align: center; color: #1a0b2e;
  box-shadow: 0 0 6vw rgba(var(--accent-rgb), 0.45), 0 0 0 0.6vw var(--accent); margin-right: 4vw; }
.qr-card svg { display: block; width: 20vw; height: 20vw; max-width: 38vh; max-height: 38vh; }
.qr-card .scan { font-family: var(--display); font-weight: var(--display-weight); font-size: 3.4vw; color: var(--qr-title); margin-top: 0.8vw; }
.qr-card .url { font-size: 1.3vw; font-weight: 700; color: var(--qr-url); }
.lobby-teams { width: 46vw; }
.lt-row { display: flex; align-items: center; padding: 1vh 1.2vw; margin-bottom: 1.2vh; border-radius: 1.2vw;
  border: 0.25vw solid var(--c); background: rgba(0, 0, 0, 0.35); }
.lt-row .em { font-size: 3.2vw; margin-right: 1.2vw; }
.lt-row .nm { font-weight: 900; font-size: 2.1vw; color: var(--c); min-width: 21vw; margin-right: 1vw; white-space: nowrap; }
.lt-row .who { font-size: 1.4vw; color: var(--text); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lt-row .who i { color: var(--muted); font-style: normal; }
.lt-row .who { letter-spacing: 0.15em; font-size: 1.9vw; }
.lt-row .who i { letter-spacing: 0; font-size: 1.4vw; }
.lt-row .n { font-size: 2.2vw; font-weight: 900; margin-left: 1vw; }

/* question / reveal */
.qhead { text-align: center; }
.qhead .round { font-family: var(--display); font-weight: var(--display-weight); font-size: 3.4vw; color: var(--accent2); }
.qhead .qn { font-size: 5vw; font-weight: 900; margin-top: 1vh; }
.qhead .qn small { font-size: 2.6vw; color: var(--muted); font-weight: 700; }
.count { font-size: 16vw; font-weight: 900; line-height: 1; color: var(--accent); text-shadow: 0 0 4vw rgba(var(--accent-rgb), 0.6); font-variant-numeric: tabular-nums; }
.count.low { color: var(--bad); text-shadow: 0 0 4vw rgba(244, 63, 94, 0.7); }
.count.done { font-size: 7vw; font-family: var(--display); }
.phones { font-size: 4vw; font-weight: 900; text-align: center; }
.phones .wob { display: inline-block; animation: wobble 2.6s ease-in-out infinite; }
.tiles { display: flex; justify-content: center; }
.tile { width: 16vw; margin: 0 0.8vw; padding: 1.6vh 1vw; border-radius: 1.4vw; text-align: center;
  border: 0.3vw solid var(--c); background: rgba(0, 0, 0, 0.4); }
.tile .em { font-size: 4vw; }
.tile .nm { font-weight: 900; font-size: 1.7vw; color: var(--c); margin: 0.4vh 0; }
.tile .st { font-size: 1.9vw; font-weight: 800; }
.tile.yes { background: rgba(255, 255, 255, 0.10); box-shadow: 0 0 3vw var(--c); }
.tile.right { background: rgba(163, 230, 53, 0.16); border-color: var(--good); }
.tile.right .st { color: var(--good); }
.tile.wrong { opacity: 0.75; }
.tile.wrong .st { color: #fda4af; }
.tile .pts { font-size: 3vw; font-weight: 900; }

/* scores */
.board { width: 80vw; margin: 0 auto; }
.brow { display: flex; align-items: center; margin-bottom: 1.6vh; }
.brow .rk { width: 5vw; font-family: var(--display); font-weight: var(--display-weight); font-size: 3.6vw; color: var(--accent2); text-align: center; }
.brow .em { font-size: 3.4vw; width: 5vw; text-align: center; }
.brow .barwrap { flex: 1; height: 7vh; background: rgba(255, 255, 255, 0.06); border-radius: 1vw; position: relative; overflow: hidden; margin: 0 1.5vw; }
.brow .bar2 { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); border-radius: 1vw; box-shadow: 0 0 3vw var(--c);
  transition: width 1.4s cubic-bezier(.2, .8, .2, 1); width: 0; }
.brow .bname { position: absolute; left: 1.2vw; top: 0; bottom: 0; display: flex; align-items: center; font-weight: 900; font-size: 2.2vw;
  text-shadow: 0 0.2vw 0.6vw rgba(0, 0, 0, 0.8); }
.brow .val { width: 18vw; text-align: right; font-weight: 900; font-size: 2.6vw; font-variant-numeric: tabular-nums; }
.brow .val small { display: block; font-size: 1.4vw; color: var(--muted); font-weight: 700; }

/* final */
.winner { text-align: center; margin: 2vh 0 3vh; }
.winner .crown { font-size: 7vw; display: inline-block; animation: wobble 2.2s ease-in-out infinite; }
.winner .wn { font-family: var(--display); font-weight: var(--display-weight); font-size: 6vw; text-shadow: 0 0 3vw var(--c); color: var(--c); line-height: 1.1; }
.winner.tie .wn { font-size: 4vw; }
.winner .wp { font-size: 2.6vw; font-weight: 900; }
.rounds-mini { font-size: 1.3vw; color: var(--muted); font-weight: 700; }

.rain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.85; overflow: hidden; }
.rain span { position: absolute; top: -10vh; font-size: 3vw; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(120vh) rotate(360deg); } }

.corner { position: fixed; right: 2vw; bottom: 2vh; z-index: 3; display: flex; align-items: center; background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--line); border-radius: 1vw; padding: 0.8vw; font-size: 1.2vw; font-weight: 800; color: var(--muted); }
.corner .mini-qr { background: #fff; padding: 0.4vw; border-radius: 0.5vw; margin-right: 0.8vw; }
.corner svg { display: block; width: 7vw; height: 7vw; }
.hint { position: fixed; left: 50%; bottom: 1.5vh; transform: translateX(-50%); z-index: 3; color: var(--muted); font-size: 1.1vw; opacity: 0.7; }

/* "It's a tie! Tiebreaker next" on the last round's scores */
.tv .tiebanner { text-align: center; margin: 1.2vh auto 0; padding: 1vh 2.4vw; border-radius: 1.4vw; font-size: 2.4vw; font-weight: 800;
  color: var(--accent2); background: rgba(var(--accent-rgb), 0.16); border: 0.25vw solid var(--accent); display: table; }
.tv .tiebanner i { font-style: normal; color: #fff; padding: 0 0.6vw; }
.tv .qhead .round i { font-style: normal; opacity: 0.7; }

/* reveal: the question and its answer (only after the reveal) */
.reveal { text-align: center; max-width: 84vw; }
.reveal .rq { font-size: 3vw; font-weight: 800; line-height: 1.25; }
.reveal .ra { display: inline-block; margin-top: 2.4vh; padding: 1.4vh 2.4vw; border-radius: 1.4vw; font-size: 3.6vw; font-weight: 900;
  color: var(--good); background: rgba(163, 230, 53, 0.14); border: 0.3vw solid var(--good); box-shadow: 0 0 3vw rgba(163, 230, 53, 0.35); }
.reveal .ra .lt { display: inline-block; margin-right: 1.2vw; padding: 0 1vw; border-radius: 0.8vw; background: var(--good); color: #1a0b2e; }
.reveal .rf { margin-top: 2vh; font-size: 1.8vw; color: var(--muted); }
.reveal .adv { margin-top: 2vh; font-size: 1.6vw; font-weight: 700; color: var(--accent); }

/* question: the question and the four choices while it's open (never which one is right) */
.qview { width: 90vw; text-align: center; }
.qq { font-size: 3.4vw; font-weight: 800; line-height: 1.2; margin-bottom: 2.4vh; }
.qc { display: flex; flex-wrap: wrap; justify-content: center; }
.qc .ch { width: 41vw; margin: 0.8vh 0.8vw; padding: 1.2vh 1.4vw; border-radius: 1.2vw; text-align: left; font-size: 2.4vw; font-weight: 800;
  background: rgba(0, 0, 0, 0.4); border: 0.25vw solid var(--line); box-sizing: border-box; }
.qc .ch .lt { display: inline-block; margin-right: 1vw; padding: 0 0.9vw; border-radius: 0.7vw; background: var(--accent); color: var(--accent-ink); font-weight: 900; }
.qfoot { margin-top: 2vh; }
.qfoot .count { display: inline-block; vertical-align: middle; font-size: 6vw; margin-right: 2vw; }
.qfoot .count[hidden] { display: none; }
.qfoot .count.done { font-size: 4vw; }
.qfoot .phones { display: inline-block; vertical-align: middle; font-size: 2.6vw; }

/* A TV browser with its address bar showing is wider than 16:9, and everything above is sized off the
   width, so shrink the question view to fit the height. */
@media (min-aspect-ratio: 17/9) {
  .qhead .round { font-size: 5.4vh; }
  .qhead .qn { font-size: 7vh; margin-top: 0; }
  .qhead .qn small { font-size: 4vh; }
  .qq { font-size: 5.6vh; margin-bottom: 1.6vh; }
  .qc .ch { font-size: 4vh; padding: 0.9vh 1.4vw; margin: 0.6vh 0.8vw; }
  .qfoot { margin-top: 1.2vh; }
  .qfoot .count { font-size: 9vh; }
  .qfoot .phones { font-size: 4.2vh; }
  .tile { padding: 1vh 1vw; }
  .tile .em { font-size: 6vh; }
  .tile .nm { font-size: 3vh; }
  .tile .st { font-size: 3.2vh; }
}
.corner.top { top: 9vh; bottom: auto; left: 2vw; right: auto; }

/* v1.7.0: the version, tiny, in the bottom-right corner (below the late-join QR card), and a nudge when
   the host has music on but the TV hasn't had the click browsers need before they'll play sound. */
.ver { position: fixed; right: 0.8vw; bottom: 0.3vh; z-index: 4; font-size: 0.85vw; color: var(--muted); opacity: 0.55;
  pointer-events: none; letter-spacing: 0.05em; }
.snd { position: fixed; left: 1.5vw; bottom: 1.5vh; z-index: 3; font-size: 1.1vw; color: var(--muted); opacity: 0.75;
  background: rgba(0, 0, 0, 0.45); padding: 0.5vh 0.8vw; border-radius: 0.8vw; pointer-events: none; }
.nudge { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; font-size: 2.4vw; font-weight: 800;
  background: rgba(0, 0, 0, 0.75); padding: 1.4vh 2vw; border-radius: 1vw; pointer-events: none; }