/* Classic television board: royal blue screens, black dividers, gold values. */
:root{--bg:#030414;--panel:#07146e;--muted:#c2c9f2;--gold:#ffcf67;--mint:#e6eaff}
body{background:radial-gradient(ellipse at 50% -20%,#3433a0 0,transparent 60%),linear-gradient(#070629,#030414);font-family:Arial,Helvetica,sans-serif}
header{max-width:1600px;border-bottom:1px solid #6966b7;padding:15px 3%}.brand{font-size:20px}.brand b{font-family:Impact,'Arial Narrow',sans-serif;font-size:21px;letter-spacing:1.5px}.brand span{font-size:12px;letter-spacing:3px;color:#fff}.top button{background:#0b1044;border:1px solid #6664a2;border-radius:3px;font-size:12px}.top .hostbadge{color:var(--gold);font-size:11px;letter-spacing:1px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main{max-width:1600px;padding:20px 3%}.headline{margin-bottom:18px}.eyebrow{color:#d2d0ff;font-size:10px;letter-spacing:4px}.headline h1{font-family:Impact,'Arial Narrow',sans-serif;font-size:clamp(30px,4.5vw,65px);font-weight:400;letter-spacing:1px;line-height:1.05;color:white;text-shadow:3px 4px 0 #000,0 0 35px #b8a6ff66;transform:scaleY(1.1);transform-origin:left}.headline h1 em{color:white}.headline p:last-child{font-size:13px;margin-bottom:0}.round{border-color:#7471ac}.round strong{font-family:Arial,sans-serif;color:var(--gold);font-weight:bold}.round span,.round small{color:#c2c9f2}.toolbar{margin-bottom:10px}.toolbar button,.toolbar select{border-radius:3px;background:#14144a}.pill{border-radius:2px;background:#29256c;color:white}.board{background:#000;border:7px solid #050509;box-shadow:0 0 0 2px #8079cb,0 0 0 5px #181738,0 15px 45px #000b;gap:6px}.category{background:linear-gradient(#101596,#050a73);border:0;border-radius:0;color:#fff;text-shadow:2px 2px #000;font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(12px,1.45vw,22px);font-weight:400;letter-spacing:1px;min-height:80px;padding:13px 9px}.tile{background:linear-gradient(115deg,#101ca5,#071080 65%);border:0;border-radius:0;color:#ffd16f;text-shadow:3px 4px 0 #000;font:bold clamp(30px,4vw,59px) 'Arial Narrow',Arial,sans-serif;letter-spacing:-2px;height:clamp(72px,9.2vh,120px);box-shadow:inset 0 0 25px #172dc522}.tile:hover{background:#222fbc;box-shadow:inset 0 0 0 2px #d2b86a;transform:none}.tile.used{background:linear-gradient(115deg,#101ca5,#071080 65%);border:0}.tile:disabled{opacity:1}
.scorehead{margin-top:24px}.scorehead h2{font-family:Arial,sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:2px}.scorehead h2 span{letter-spacing:0;text-transform:none}.scorehead button{border-radius:3px;background:#14143d}.teams{justify-content:center;gap:20px}.team{position:relative;text-align:center;background:linear-gradient(#151b83,#060c4d);border:3px solid #9795bd;border-top:3px solid #d4c593;border-radius:2px;padding:13px 15px 10px;box-shadow:0 7px 0 #292948,0 12px 20px #0009}.team:before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:#ffffff25}.team input{text-align:center;color:#fff;font:italic 24px Georgia,serif;padding:4px 0;border-bottom:1px solid #7772ae}.score{font:bold 34px Arial,sans-serif;color:white;background:#020622;border:1px solid #373f83;margin:12px 0 8px;padding:5px;font-variant-numeric:tabular-nums}.score small{font-size:11px;color:#c2c9f2}.scorebuttons{justify-content:center}.scorebuttons button{background:transparent;border:1px solid #646bab;border-radius:2px}footer{color:#aaa9ce}footer button{color:#cfcaef}
dialog{border-radius:3px;border:4px solid #a29cc9;background:linear-gradient(120deg,#111fa6,#070b78 70%);box-shadow:0 0 0 6px #131227,0 30px 130px #000c}dialog::backdrop{background:#020211e8;backdrop-filter:blur(4px)}#intro{width:min(840px,94vw);background:radial-gradient(ellipse at 50% 0,#5342b9,transparent 70%),linear-gradient(#17116c,#050638);border:2px solid #a9a1da}.intro{padding:20px 12px}.intro h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(53px,8vw,94px);letter-spacing:3px;font-weight:400;line-height:1.08;color:white;text-shadow:4px 5px #000,0 0 40px #d3bcff80;margin:24px 0}.intro h1 em{color:#fff}.intro p{color:#d1cbed}.stage-line{height:3px;max-width:350px;margin:25px auto;background:linear-gradient(90deg,transparent,#e3d3ff,transparent);box-shadow:0 0 25px #bd94ff}.intro small{font-size:10px;color:#bcb4d8}.primary{border-radius:3px;background:linear-gradient(#ffe7a0,#e8b34c);color:#17112f;box-shadow:0 3px 0 #806322;letter-spacing:.4px}.primary:hover{background:#ffe7a0}#hostform{display:grid;max-width:360px;margin:25px auto 0;gap:11px}#hostform label{font-size:10px;letter-spacing:3px;color:#e3dbff}#hostinput{width:100%;background:#06052b;border:1px solid #8c81bb;border-radius:3px;padding:14px;color:white;text-align:center;font-size:20px}#hostinput::placeholder{color:#9c94bd}.cluetop{color:#fff}.prompt{font:600 clamp(27px,3.8vw,47px)/1.35 Georgia,'Times New Roman',serif;text-transform:uppercase;text-shadow:2px 3px #000;max-width:810px;margin:40px auto}.timer{font-family:Arial,sans-serif;font-weight:bold;color:var(--gold)}.actions button{border-radius:3px}.answer{border-radius:3px;background:#040953;border-color:#8e8ac8}.answer strong{color:var(--gold)}.answer p{color:#e0def3}.judge{background:#050a51;border:1px solid #55559a;border-radius:3px}.judge button{border-radius:3px}#info h1,#clue h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:1px;font-weight:400}.winner{font-family:Georgia,serif;color:var(--gold)}
@media(min-width:1200px) and (max-height:850px){main{padding-top:12px}.headline h1{font-size:40px}.headline{margin-bottom:12px}.headline .eyebrow{margin-top:0}.category{min-height:60px}.tile{height:8.6vh}.scorehead{margin-top:18px}.team{padding:10px}.score{font-size:28px}}
@media(max-width:760px){header{flex-wrap:wrap;gap:12px;padding:12px}.top{flex-wrap:wrap;gap:6px}.top button{font-size:10px}.top .hostbadge{max-width:170px}main{padding:20px 10px}.headline h1{font-size:32px;letter-spacing:0}.headline .eyebrow{letter-spacing:2px;font-size:8px}.round{padding-left:10px}.round strong{font-size:24px}.board{gap:3px;border-width:4px}.category{font-size:10px;letter-spacing:0;min-height:65px;padding:7px 3px}.tile{font-size:clamp(20px,5.5vw,39px);letter-spacing:-1px;height:70px}.teams{gap:12px}.team{min-width:140px}.team input{font-size:21px}.scorehead h2{font-size:12px;letter-spacing:1px}.scorehead h2 span{font-size:10px}.intro{padding:10px}.intro h1{font-size:57px;letter-spacing:1px}.prompt{font-size:25px}.cluetop{letter-spacing:1px;font-size:11px}}

/* Board entrance runs once per presentation, not on score updates. */
[hidden]{display:none!important}.tile{animation:none}.board.awaiting .tile{color:transparent;text-shadow:none;pointer-events:none}.board.filling .tile{animation:boardFill .25s both;animation-delay:calc(var(--i)*var(--fill-step,.06s))}@keyframes boardFill{from{color:transparent;text-shadow:none;filter:brightness(.5)}to{color:var(--gold);text-shadow:3px 4px #000;filter:none}}@media(prefers-reduced-motion:reduce){.board.filling .tile{animation:none!important}}

/* Keep glyphs inside their screens at all viewport heights. */
header,.top,.toolbar,.toolbar>div,.scorehead,.scorehead>div{flex-wrap:wrap}.top{justify-content:flex-end}.headline>div:first-child{min-width:0}.headline h1{transform:none;overflow-wrap:anywhere}.round{flex-shrink:0}.board{min-width:0}.category{min-width:0;overflow-wrap:anywhere;line-height:1.22;font-size:clamp(10px,1.3vw,20px);padding:12px 7px}.tile{display:flex;align-items:center;justify-content:center;min-width:0;padding:6px 2px;line-height:1.1;font-size:clamp(22px,3.2vw,48px);letter-spacing:-1px;height:clamp(74px,9vh,110px)}.team{min-width:0}.team input{line-height:1.35;min-height:40px}.score{line-height:1.3}.scorehead>div{display:flex;gap:5px}dialog{max-height:calc(100dvh - 28px);overflow-y:auto;overflow-x:hidden}.cluetop{gap:10px;flex-wrap:wrap}.cluetop span{overflow-wrap:anywhere}.prompt{overflow-wrap:anywhere}.answer strong{overflow-wrap:anywhere}button{white-space:normal}.finalrow{flex-wrap:wrap}.finalrow label{min-width:160px}.teams{align-items:stretch}#openingstage{width:min(1100px,96vw);text-align:center;background:radial-gradient(ellipse at 50% 0,#674ac9,transparent 65%),linear-gradient(#181061,#030526);border:2px solid #b0a4d6;padding:clamp(20px,4vw,52px)}.show-intro h1{font:400 clamp(44px,8vw,100px)/1.08 Impact,'Arial Narrow',sans-serif;letter-spacing:2px;text-shadow:4px 5px #000,0 0 35px #9b70ff;margin:18px 0 26px}.show-intro h1 em{color:white}.spotlights{font-size:36px;color:#ffe3a4;animation:lights 2s ease-in-out infinite alternate}#hostreveal{animation:hostEnter .7s ease-out both}#stagename{font:italic 600 clamp(32px,7vw,86px)/1.2 Georgia,serif;color:var(--gold);overflow-wrap:anywhere;max-width:100%;margin:18px auto;text-shadow:0 0 40px #eab64966}#hostreveal>p{margin:12px 0}.show-intro .actions{margin-top:26px}@keyframes hostEnter{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes lights{from{opacity:.35;text-shadow:0 0 5px #fff}to{opacity:1;text-shadow:0 0 35px #d9b2ff}}@media(min-width:1200px) and (max-height:850px){.tile{height:74px;font-size:42px}.category{min-height:62px}}@media(max-width:760px){.top{justify-content:flex-start}.category{font-size:10px;padding:10px 3px}.tile{height:68px;font-size:clamp(20px,5vw,35px);letter-spacing:-1px}.teams{flex-wrap:wrap}.team{flex:1 1 140px}.toolbar>div{gap:8px}.prompt{font-size:clamp(21px,5vw,30px)}.headline{gap:10px}.headline h1{font-size:30px}.round{padding-left:10px}.round span,.round small{letter-spacing:0;font-size:8px}.show-intro h1{font-size:50px}}@media(prefers-reduced-motion:reduce){.spotlights,#hostreveal{animation:none}}
