/* Trivia Showdown: a game show stage. Navy and gold from the logo, cream and red lettering. */
:root{
  --bg:#0a1a3a; --navy:#011b34; --panel:#10275a; --panel2:#163270; --line:rgba(253,246,227,.14);
  --ink:#fdf6e3; --muted:#b9c3e6; --gold:#f7b21b; --amber:#f29507; --red:#ed3f2a; --good:#2fcf7a; --bad:#ff5b4a;
  --a:#ed3f2a; --b:#2f6fdb; --c:#f7b21b; --d:#22a05a;
  --display:"Lilita One", "Nunito", system-ui, sans-serif;
  --f:"Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:var(--f); -webkit-font-smoothing:antialiased}
/* The stage: a spotlight over faint sunburst rays. */
body{min-height:100dvh; display:flex; flex-direction:column;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(247,178,27,.18) 0%, transparent 70%),
    repeating-conic-gradient(from 0deg at 50% -10%, rgba(255,255,255,.035) 0 6deg, transparent 6deg 12deg),
    linear-gradient(180deg, #0f2452 0%, var(--bg) 55%, #06112a 100%) fixed}
body > main{flex:1}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
code{font-family:ui-monospace,Menlo,monospace; font-size:.9em; background:rgba(253,246,227,.1); padding:1px 5px; border-radius:5px}

.wrap{max-width:1100px; margin:0 auto; padding:26px 16px 40px}
.narrow{max-width:760px}
.logo{display:block; width:min(440px, 86%); height:auto; margin:0 auto; filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
.logo.small{width:min(220px, 60%)}
.hero{text-align:center; margin:4px 0 26px}
.hero p{margin:18px auto 0; color:var(--muted); font:700 18px/1.5 var(--f); max-width:540px}
.h1s{margin:14px 0 18px; font:400 34px var(--display); letter-spacing:.3px; text-align:center}
.cards2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:640px){ .cards2{grid-template-columns:1fr} }

/* Marquee panels: a gold frame with a row of bulbs along the top. */
.card{position:relative; background:linear-gradient(180deg, var(--panel2), var(--panel)); border:5px solid var(--gold); border-radius:22px; padding:26px 20px 20px;
  box-shadow:inset 0 0 0 3px var(--amber), 0 14px 40px rgba(0,0,0,.4)}
.card::before{content:""; position:absolute; left:18px; right:18px; top:-10px; height:14px;
  background:radial-gradient(circle at 7px 7px, #fffbe8 0 4px, #ffe39a 4.5px 5.5px, transparent 6px) 0 0 / 30px 14px repeat-x}
.card h2{margin:0 0 14px; font:400 26px var(--display); letter-spacing:.3px; color:var(--ink)}
.muted{color:var(--muted); line-height:1.5; margin:0 0 16px; font-weight:700}
.small{font-size:13.5px}
.fine{color:var(--muted); font-size:13px; font-weight:700; margin:20px 2px 0; text-align:center; opacity:.8}
.lbl{display:flex; justify-content:space-between; font:800 13px var(--f); color:var(--gold); letter-spacing:.6px; text-transform:uppercase; margin:0 0 8px}
.lbl em{font-style:normal; font-weight:700; text-transform:none; letter-spacing:0; color:var(--muted)}
input,select,textarea{width:100%; background:var(--navy); border:2px solid rgba(253,246,227,.18); border-radius:14px; padding:12px 14px; font-size:17px; font-weight:700; margin-bottom:16px}
input::placeholder,textarea::placeholder{color:rgba(185,195,230,.55)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold)}
textarea{resize:vertical; font:14px/1.5 ui-monospace,Menlo,monospace}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px}
.code-in{font:400 38px var(--display); letter-spacing:12px; text-align:center; text-transform:uppercase; color:var(--gold)}

/* Game show buttons: chunky, with a pressed-in bottom edge. */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; border:0; border-radius:16px; padding:14px 18px 16px;
  background:var(--red); color:var(--ink); font:400 22px var(--display); letter-spacing:.5px;
  box-shadow:0 6px 0 #a3230f, 0 12px 24px rgba(0,0,0,.35); transform:translateY(0); transition:transform .08s, box-shadow .08s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 #a3230f, 0 6px 14px rgba(0,0,0,.35)}
.btn:disabled{opacity:.55; cursor:default}
.btn.ghost{background:var(--gold); color:#2b1a00; box-shadow:0 6px 0 #b8700a, 0 12px 24px rgba(0,0,0,.35)}
.btn.ghost:active{box-shadow:0 2px 0 #b8700a}
.btn.small{width:auto; padding:9px 16px 11px; font-size:17px; border-radius:12px}
.btn.big{padding:17px 18px 19px; font-size:26px}
.back{border:0; background:none; color:var(--muted); font:800 15px var(--f); padding:4px 0}
.back:hover{color:var(--gold)}
.cats{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.cat{border:2px solid rgba(253,246,227,.2); background:var(--navy); border-radius:999px; padding:8px 14px; font:800 14px var(--f); color:var(--muted)}
.cat[aria-pressed="true"]{border-color:var(--gold); background:rgba(247,178,27,.16); color:var(--ink)}
.cat b{font-weight:900; color:var(--gold); margin-left:5px}
.plan{margin:0 0 16px; color:var(--gold); font:800 14px/1.5 var(--f)}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:600px){ .grid3{grid-template-columns:1fr} }
.check{display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; margin:0 0 18px; cursor:pointer}
.check input{width:22px; height:22px; margin:0; accent-color:var(--gold)}
.custom{border:2px dashed rgba(247,178,27,.4); border-radius:16px; padding:12px 14px; margin-bottom:18px}
.custom summary{cursor:pointer; font:400 19px var(--display); color:var(--gold); letter-spacing:.3px}
.custom[open] summary{margin-bottom:10px}
.err{color:var(--bad); font-weight:800; min-height:1.2em; margin:0 0 12px}
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--gold); color:#2b1a00; padding:10px 18px; border-radius:999px; font:800 15px var(--f); opacity:0; pointer-events:none; transition:.2s; z-index:60; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.toast.show{opacity:1; transform:translate(-50%,0)}
.conn{position:fixed; top:12px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font:800 14px var(--f); padding:8px 16px; border-radius:999px; z-index:50}

/* Footer */
.foot{display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; padding:22px 16px calc(22px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); font:700 13px var(--f); color:var(--muted)}
.foot .made{display:inline-flex; align-items:center; gap:9px; color:var(--muted); text-decoration:none}
.foot .made img{height:16px; width:auto; opacity:.85}
.foot .made:hover img{opacity:1}
.foot nav{display:flex; gap:16px}
.foot nav a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--gold)}

/* ---------- TV ---------- */
.tv{min-height:100dvh; display:flex; flex-direction:column; padding:0 clamp(16px,3vw,48px)}
.tv-top{display:flex; align-items:center; gap:18px; padding:14px 0 6px}
.tv-logo{height:clamp(56px,7vw,96px); width:auto; filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.tv-title{font:400 clamp(18px,1.8vw,30px) var(--display); color:var(--ink); letter-spacing:.3px}
.tv-meta{margin-left:auto; color:var(--gold); font:800 clamp(14px,1.4vw,22px) var(--f); letter-spacing:.3px}
.tv-tools{display:flex; gap:6px}
.icon-btn{width:40px; height:40px; border-radius:12px; border:2px solid rgba(253,246,227,.2); background:var(--navy); font-size:17px}
.tv-body{flex:1; display:flex; flex-direction:column; justify-content:center; padding:10px 0}
.tv-bar{display:flex; align-items:center; gap:14px; padding:14px 0 20px; border-top:2px solid rgba(247,178,27,.25)}
.tv-status{color:var(--ink); font:800 clamp(15px,1.4vw,22px) var(--f)}
.tv-actions{margin-left:auto; display:flex; gap:12px}
.tv-actions .btn{width:auto; min-width:170px; font-size:clamp(18px,1.5vw,24px)}
kbd{font:800 12px var(--f); border:1.5px solid currentColor; border-radius:6px; padding:0 6px; margin-left:8px; opacity:.6}

/* Lobby */
.lobby{display:grid; grid-template-columns:minmax(260px,34%) 1fr; gap:clamp(20px,4vw,60px); align-items:center}
.join-box{background:var(--ink); color:#0a1a3a; border:6px solid var(--gold); box-shadow:inset 0 0 0 3px var(--amber), 0 20px 50px rgba(0,0,0,.5); border-radius:26px; padding:clamp(14px,1.6vw,24px); text-align:center}
.join-box canvas{width:100%; height:auto; display:block; image-rendering:pixelated; border-radius:8px}
.join-box .url{font:800 clamp(12px,1.1vw,17px) var(--f); color:#3a4a70; margin-top:8px; word-break:break-all}
.code-big{font:400 clamp(44px,6vw,100px)/1 var(--display); letter-spacing:.1em; color:var(--red); margin:8px 0 2px}
.lobby h2{margin:0; font:400 clamp(30px,3.8vw,64px)/1.05 var(--display); letter-spacing:.3px}
.lobby .how{color:var(--muted); font:700 clamp(15px,1.5vw,24px)/1.45 var(--f); margin:12px 0 22px}
.team-cloud{display:flex; flex-wrap:wrap; gap:10px; min-height:60px}
.chip{background:var(--panel2); border:2px solid var(--gold); border-radius:999px; padding:8px 18px; font:400 clamp(17px,1.5vw,24px) var(--display); letter-spacing:.3px; animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.chip button{border:0; background:none; color:var(--muted); margin-left:6px; font:800 .9em var(--f); padding:0}
.chip button:hover{color:var(--bad)}
@keyframes pop{from{transform:scale(.4); opacity:0}}
.remote{display:flex; align-items:center; gap:12px; margin-top:24px; color:var(--muted); font:700 14px var(--f)}
.remote canvas{width:74px; height:74px; background:#fff; border-radius:8px; padding:4px}

/* Question */
.qhead{display:flex; align-items:center; gap:16px; margin-bottom:clamp(10px,2vh,22px)}
.qcat{display:inline-block; font:400 clamp(15px,1.5vw,24px) var(--display); color:#2b1a00; background:var(--gold); padding:.25em .8em; border-radius:999px; letter-spacing:.5px; text-transform:uppercase}
.ring{--p:1; position:relative; margin-left:auto; width:clamp(70px,7.5vw,120px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(closest-side, var(--navy) 78%, transparent 80%), conic-gradient(var(--gold) calc(var(--p)*360deg), rgba(253,246,227,.12) 0); box-shadow:0 0 0 4px var(--amber)}
.ring b{font:400 clamp(28px,3.2vw,52px) var(--display)}
.ring.hurry{background:radial-gradient(closest-side, var(--navy) 78%, transparent 80%), conic-gradient(var(--red) calc(var(--p)*360deg), rgba(253,246,227,.12) 0); box-shadow:0 0 0 4px var(--red)}
.qtext{font:400 clamp(30px,4.4vw,76px)/1.12 var(--display); letter-spacing:.3px; margin:0 0 clamp(16px,3vh,36px); max-width:26ch; text-shadow:0 4px 0 rgba(0,0,0,.25)}
.choices{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,22px)}
.choice{position:relative; display:flex; align-items:center; gap:clamp(10px,1.2vw,18px); border-radius:20px; padding:clamp(14px,2vh,26px) clamp(14px,1.6vw,26px); font:400 clamp(22px,2.5vw,42px)/1.15 var(--display); letter-spacing:.3px; color:#fff; overflow:hidden; transition:opacity .3s, transform .3s}
.choice .sh{flex:none; width:clamp(36px,3.2vw,56px); aspect-ratio:1; border-radius:12px; background:rgba(0,0,0,.2); display:grid; place-items:center; font:900 .75em var(--f)}
.choice.c0{background:var(--a); box-shadow:0 6px 0 #a3230f} .choice.c1{background:var(--b); box-shadow:0 6px 0 #1b4596}
.choice.c2{background:var(--c); color:#2b1a00; box-shadow:0 6px 0 #b8700a} .choice.c3{background:var(--d); box-shadow:0 6px 0 #146b3a}
.choice .n{margin-left:auto; font-size:.85em}
.choice .bar{position:absolute; left:0; bottom:0; height:7px; background:rgba(255,255,255,.6)}
.choices.revealed .choice:not(.right){opacity:.25; transform:scale(.97)}
.choices.revealed .choice.right{outline:6px solid var(--ink); outline-offset:2px}
.typein{border:3px dashed rgba(247,178,27,.5); border-radius:20px; padding:clamp(16px,3vh,34px); text-align:center; font:400 clamp(20px,2.2vw,34px) var(--display); color:var(--muted); letter-spacing:.3px}
.answer-big{font:400 clamp(38px,5.4vw,90px)/1.05 var(--display); color:var(--gold); margin:6px 0 10px; text-shadow:0 5px 0 rgba(0,0,0,.3)}
.typed{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.typed button{border:2px solid var(--line); background:var(--navy); border-radius:12px; padding:8px 12px; font:800 15px var(--f); text-align:left}
.typed button.ok{border-color:var(--good); color:var(--good)}
.typed button.no{border-color:rgba(255,91,74,.5); color:#ffb4ab}
.typed small{display:block; font-weight:700; color:var(--muted); font-size:12px}
.sidebar-note{color:var(--muted); font:700 clamp(14px,1.3vw,20px) var(--f); margin-top:16px}

/* Leaderboard */
.board{max-width:1000px; width:100%; margin:0 auto}
.board h2{margin:0 0 20px; font:400 clamp(32px,4vw,66px) var(--display); letter-spacing:.3px; text-align:center; color:var(--gold); text-shadow:0 5px 0 rgba(0,0,0,.3)}
.rows{display:grid; gap:9px}
.row{display:grid; grid-template-columns:clamp(40px,4vw,64px) 1fr auto auto; align-items:center; gap:14px; background:var(--panel2); border:2px solid var(--line); border-radius:16px; padding:10px 18px; font:400 clamp(18px,1.9vw,32px) var(--display); letter-spacing:.3px}
.row .rk{color:var(--muted)}
.row .gain{color:var(--good); font:900 .7em var(--f)}
.row .sc{min-width:4ch; text-align:right; color:var(--gold)}
.row.top1{border-color:var(--gold); background:linear-gradient(90deg, rgba(247,178,27,.28), var(--panel2))} .row.top1 .rk{color:var(--gold)}
.podium{display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,2vw,30px); margin:10px 0 26px}
.pod{text-align:center; font:400 clamp(18px,1.9vw,30px) var(--display); letter-spacing:.3px}
.pod .blk{margin-top:10px; width:clamp(110px,14vw,220px); border-radius:16px 16px 0 0; display:grid; place-items:center; font:400 clamp(34px,4.4vw,70px) var(--display); color:#2b1a00}
.pod.p1 .blk{height:clamp(120px,20vh,220px); background:linear-gradient(180deg,#ffd35c,var(--gold))} .pod.p2 .blk{height:clamp(90px,14vh,160px); background:#dfe5f5} .pod.p3 .blk{height:clamp(70px,10vh,120px); background:#f0a868}
.pod small{display:block; color:var(--muted); font:800 .6em var(--f)}
.confetti{position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden}
.confetti i{position:absolute; top:-20px; width:10px; height:16px; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

@media (max-width:760px){
  .lobby{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr}
  .tv-actions .btn{min-width:0}
  .tv-bar{flex-wrap:wrap}
}

/* ---------- Phone ---------- */
.phone .wrap{padding-top:16px}
.join-top{padding-top:6px}
.join-top h2{font:400 30px var(--display)}
.night{margin:10px 0 0 !important; color:var(--gold) !important; font:800 16px var(--f) !important}
.p-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; font:800 15px var(--f); color:var(--muted)}
.p-head b{color:var(--ink); font:400 19px var(--display); letter-spacing:.3px}
.p-center{text-align:center; padding:26px 6px}
.p-center h2{font:400 34px/1.1 var(--display); margin:10px 0 8px; letter-spacing:.3px}
.p-center p{color:var(--muted); font:700 17px/1.45 var(--f); margin:0 auto; max-width:360px}
.p-emoji{font-size:64px; line-height:1}
.p-q{font:400 24px/1.2 var(--display); letter-spacing:.3px; margin:0 0 18px}
.p-choices{display:grid; gap:14px}
.p-choices .choice{font-size:22px; min-height:76px; border:0; text-align:left; width:100%}
.p-choices .choice:active{transform:translateY(3px)}
.p-choices.locked .choice:not(.mine){opacity:.28}
.p-choices .choice.mine{outline:5px solid var(--ink); outline-offset:2px}
.p-timer{height:10px; background:rgba(253,246,227,.14); border-radius:5px; overflow:hidden; margin-bottom:16px}
.p-timer i{display:block; height:100%; background:var(--gold); transform-origin:left; transition:transform .25s linear}
.result{border-radius:24px; padding:26px 18px; text-align:center; margin-bottom:16px; border:5px solid rgba(255,255,255,.25)}
.result.ok{background:linear-gradient(160deg,#27b56a,#15804a)} .result.no{background:linear-gradient(160deg,#e0452f,#a3230f)}
.result h2{margin:6px 0 4px; font:400 42px var(--display); letter-spacing:.5px}
.result p{margin:0; font:800 18px var(--f)}
.me-score{display:flex; justify-content:space-around; background:var(--panel2); border:3px solid var(--gold); border-radius:20px; padding:16px; text-align:center; font:800 14px var(--f); color:var(--muted)}
.me-score b{display:block; color:var(--gold); font:400 34px var(--display)}
.leave{margin-top:22px; text-align:center}
.leave button{border:0; background:none; color:var(--muted); text-decoration:underline; font:700 14px var(--f)}
.rows.mini{margin-top:clamp(12px,2vh,22px); gap:7px}
.rows.mini .row{font-size:clamp(16px,1.5vw,26px); padding:7px 16px}
.demo-card{margin-top:22px}
.demo-card b{color:var(--gold)}
.demo-btns{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){ .demo-btns{grid-template-columns:1fr} }
a.btn{text-decoration:none}
.demo-note{margin-top:22px; color:var(--gold); font:800 clamp(14px,1.3vw,20px)/1.45 var(--f); max-width:560px}

/* Global leaderboard */
.board-card{margin-top:22px}
.lb-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.lb-head h2{margin:0}
.seg{display:inline-flex; gap:3px; background:var(--navy); border:2px solid rgba(253,246,227,.15); border-radius:999px; padding:3px}
.seg button{border:0; background:transparent; border-radius:999px; padding:6px 14px; font:800 13px var(--f); color:var(--muted)}
.seg button[aria-checked="true"]{background:var(--gold); color:#2b1a00}
.lb{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.lb-row{display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px; background:var(--navy); border:2px solid rgba(253,246,227,.1); border-radius:14px; padding:8px 14px}
.lb-row.first{border-color:var(--gold); background:linear-gradient(90deg, rgba(247,178,27,.22), var(--navy))}
.lb-rk{font:400 22px var(--display); color:var(--muted); text-align:center}
.lb-row.first .lb-rk{color:var(--gold)}
.lb-team{min-width:0}
.lb-team b{display:block; font:400 19px var(--display); letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-team small{display:block; color:var(--muted); font:700 13px var(--f); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-sc{text-align:right; font:400 21px var(--display); color:var(--gold)}
.lb-sc small{display:block; color:var(--muted); font:700 12px var(--f)}
.lb.sample .lb-row{opacity:.85}
.lb-note{margin:12px 2px 0; color:var(--muted); font:700 13px var(--f)}
.grid2{display:grid; grid-template-columns:2fr 1fr; gap:12px}

/* Accounts */
.topnav{display:flex; justify-content:flex-end; padding:14px 18px 0; max-width:1100px; margin:0 auto}
.topnav a{color:var(--ink); text-decoration:none; font:800 14px var(--f); border:2px solid rgba(253,246,227,.25); border-radius:999px; padding:7px 14px; background:rgba(1,27,52,.5)}
.topnav a:hover{border-color:var(--gold); color:var(--gold)}
a.back{text-decoration:none; display:inline-block}
.signin{max-width:480px; margin:18px auto 0}
.signin b{color:var(--gold)}
.my-top{display:flex; justify-content:space-between; align-items:center}
.who{color:var(--muted); font:700 14px var(--f)}
.games-card{margin-top:22px}
.games{list-style:none; margin:0 0 10px; padding:0; display:grid; gap:8px}
.games .game{display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--navy); border:2px solid rgba(253,246,227,.1); border-radius:14px; padding:10px 14px}
.games .game b{display:block; font:400 20px var(--display); letter-spacing:.3px}
.games .game small{color:var(--muted); font:700 13px var(--f)}
.games .empty{color:var(--muted); font-weight:700; padding:6px 2px}
.my-links{text-align:center; margin-top:22px; color:var(--muted)}
.linkish{border:0; background:none; color:var(--muted); font:700 14px var(--f); text-decoration:underline; padding:0}
.linkish:hover{color:var(--ink)} .linkish.danger:hover{color:var(--bad)}

/* Privacy page */
.policy .card{margin-top:18px}
.policy .card::before{display:none}
.policy .card{border-width:3px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.policy h2{font-size:23px; margin-bottom:10px; color:var(--gold)}
.policy p,.policy li{font:700 16px/1.6 var(--f); color:var(--ink)}
.policy p{margin:0}
.policy ul{margin:0; padding-left:20px; display:grid; gap:8px}
.policy li b{color:var(--gold)}
.policy a{color:var(--gold)}
.policy code{font-size:.85em}
.updated{text-align:center; color:var(--muted); font:700 14px var(--f); margin:-8px 0 6px}