/* The big screen (engine/tv/): TV mode, the stage, the start button, the banner and the phone
   remote. Layout only: colors and type come from the theme (its variables, with the browser's
   own colors as a fallback), and the scenes reuse the theme's own card, race, note and name
   styles. No colors are set here. */

/* ---- TV mode: just the theme's header (.hero), full screen, with the stage on top ---- */
html[data-tv], html[data-tv] body{overflow:hidden; height:100%}
html[data-tv] body > :not(.hero):not(#tv):not(svg){display:none !important}
html[data-tv] .hero{position:fixed; inset:0; width:100%; height:100%; min-height:0; margin:0; z-index:0}
html[data-tv] .hero > :not(canvas):not([aria-hidden="true"]){display:none !important}
html[data-tv][data-flat] body > .hero{display:none}
html:not([data-flat]) .tv-flat{display:none}
.tv-flat{position:fixed; inset:0; z-index:0}
.tv-flat .hero [aria-hidden="true"]{opacity:1 !important}

#tv{position:fixed; inset:0; z-index:5; cursor:none}
#tv.tv-awake{cursor:auto}
.tv-stage{position:absolute; left:50%; top:50%; width:1024px; height:576px; transform-origin:50% 50%}
/* scenes sit in the top of the screen so the live scene (or the flat painting) shows below */
.tv-scene{position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:26px 40px 0}
.tv-scene > .card{width:100%; max-width:860px; max-height:410px; margin:0; overflow:hidden; background:var(--paper, Canvas); box-shadow:0 12px 40px -18px}
.tv-in{animation:tv-in .7s ease both}
.tv-out{animation:tv-out .7s ease both}
@keyframes tv-in{from{opacity:0; transform:translateY(14px)}}
@keyframes tv-out{to{opacity:0}}
.tv-exit{position:absolute; top:16px; right:16px; opacity:0; transition:opacity .3s; pointer-events:none}
#tv.tv-awake .tv-exit{opacity:1; pointer-events:auto}

/* welcome */
.tv-scene > .tv-welcome{display:grid; grid-template-columns:1fr auto; gap:6px 40px; align-items:center; padding:26px 40px}
.tv-welcome-words{text-align:center}
.tv-welcome-words .script{font-size:56px; line-height:1.1; margin:6px 0}
.tv-welcome-words .caps{font-size:22px; margin:0}
.tv-qr{text-align:center}
.tv-qr svg{display:block; width:170px; height:170px; margin:0 auto 8px}
.tv-qr .caps{font-size:24px; margin:0}
.tv-qr .small{font-size:17px; margin:4px 0 0}
.tv-made{grid-column:1 / -1; text-align:center; font-size:17px; opacity:.75; margin:8px 0 0}

/* scenes from the section folders */
.tv-scene .sec-title{font-size:40px; margin:0 0 10px}
.tv-scene .lede, .tv-scene .small{font-size:20px}
.tv-scene .race{margin:10px 0}
.tv-latest{justify-content:center; margin-top:10px; font-size:19px}
.tv-line{position:relative; height:110px; margin:10px 24px 48px; border-bottom:3px solid}
.tv-dot{position:absolute; width:18px; height:18px; margin:0 0 3px -9px; border-radius:50%; background:currentColor; opacity:.8}
.tv-dot.won{opacity:1; outline:3px solid; outline-offset:2px}
.tv-due{position:absolute; top:100%; transform:translateX(-50%); padding-top:8px; white-space:nowrap; font-size:19px}
.tv-due::before{content:""; position:absolute; left:50%; bottom:100%; height:110px; border-left:2px dashed; opacity:.6}
.tv-stats{font-size:22px; margin:0 0 8px; font-weight:600}
.tv-guesses{list-style:none; padding:0; margin:0; text-align:center; font-size:20px; line-height:1.5}
.tv-scene .name-lists{font-size:24px; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 400px)); justify-content:center; gap:0 60px}
.tv-scene .heart{display:inline-flex; gap:4px; align-items:center; margin-left:10px}
.tv-scene .heart svg{width:22px; height:22px}
.tv-notes{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; font-size:20px}
.tv-notes .note p{display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden}
.tv-fresh{animation:tv-in 1.2s ease both}

/* ---- start button (TV browsers) and banner (laptops near party day) ---- */
.tv-prompt{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px; background:var(--paper, Canvas)}
.tv-prompt .card{max-width:640px; text-align:center; font-size:24px}
.tv-prompt .btn{display:block; width:100%; min-height:64px; margin:14px 0 0; font-size:26px}
.tv-banner{position:sticky; top:0; z-index:40; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
  padding:8px 14px; font-size:17px; background:var(--paper, Canvas); border-bottom:1px solid}
.tv-banner .btn{min-height:44px; margin:0}

/* ---- the phone remote ---- */
.tv-sheet-back{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center; background:color-mix(in srgb, var(--ink, CanvasText) 35%, transparent)}
.tv-sheet{position:relative; width:100%; max-width:520px; max-height:92vh; overflow:auto; margin:0; padding:22px 20px 28px;
  border-radius:16px 16px 0 0; background:var(--paper, Canvas); font-size:17px}
@media (min-width:700px){ .tv-sheet-back{align-items:center} .tv-sheet{border-radius:16px} }
.tv-sheet > .btn.solid{display:block; width:100%; min-height:52px; margin:6px 0 18px}
.tv-cast-link{display:flex; align-items:center; justify-content:center; width:100%; min-height:52px; margin:-8px 0 18px; box-sizing:border-box}
.tv-x{position:absolute; top:10px; right:10px; min-width:44px; min-height:44px; margin:0; padding:0; font-size:26px; line-height:1}
.tv-sheet .lede{font-size:17px}
.tv-sheet h3{margin:6px 0 2px}
.tv-pad{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0}
.tv-pad .btn{min-height:56px; margin:0; font-size:18px}
.tv-pad .btn:disabled{opacity:.45}
.tv-lock{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center; margin:12px 0; font-size:17px}
.tv-lock input{width:24px; height:24px; margin:0}
.tv-lock small{grid-column:2; font-size:17px; opacity:.8}
.tv-lock[hidden]{display:none}
.tv-guide{margin-top:14px; font-size:17px}
.tv-guide summary{min-height:44px; display:flex; align-items:center; cursor:pointer; font-weight:600}
.tv-guide dt{font-weight:600; margin-top:10px}
.tv-guide dd{margin:2px 0 0}

@media (prefers-reduced-motion: reduce){ .tv-in, .tv-out, .tv-fresh{animation:none} }