:root{--bg:#000;--card:#0f0f11;--card2:#17171a;--line:rgba(255,255,255,.12);--text:#fff;--muted:rgba(255,255,255,.62);--blue:#1DA8F6;--good:#2fd07a;--bad:#ff5a5f;--warn:#ffb44d}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:Figtree,system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;display:flex;justify-content:center}
button,input,select{font-family:inherit}
.app{width:100%;max-width:480px;padding:12px 16px 32px;display:flex;flex-direction:column;min-height:100dvh}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.brand img{height:44px;width:auto;display:block}
.hbtns{display:flex;align-items:center;gap:10px}
.me{display:flex;align-items:center;gap:8px;font-size:14px;background:none;border:0;color:#fff;cursor:pointer;max-width:170px}
.me span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{background:none;border:0;color:#fff;font-size:20px;cursor:pointer;padding:4px}
#adminLink{position:relative;text-decoration:none}
.badge-n{position:absolute;top:-4px;right:-8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff3b30;color:#fff;font:800 11px/18px Figtree,system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--bg)}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--card2);display:grid;place-items:center;font-weight:700;font-size:14px;color:var(--blue);flex:none;border:2px solid var(--line)}
.avatar.big{width:112px;height:112px;font-size:40px}
.tabs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;background:var(--card);padding:5px;border-radius:14px;margin-bottom:16px}
.tabs button{border:0;background:none;color:var(--muted);font-weight:600;font-size:15px;padding:10px;border-radius:10px;cursor:pointer}
.tabs button.on{background:var(--card2);color:#fff}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px}
.card+.card{margin-top:12px}
h1{font-size:28px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
h2{font-size:22px;font-weight:700}
.muted{color:var(--muted)}
.center{text-align:center}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:16px;font-weight:700;font-size:17px;cursor:pointer;background:var(--blue);color:#000;text-align:center;text-decoration:none}
.btn.ghost{background:none;color:#fff;border:1px solid var(--line)}
.btn.danger{background:none;color:var(--bad);border:1px solid rgba(255,90,95,.4)}
.btn:disabled{opacity:.4;cursor:default}
.stack>*+*{margin-top:14px}
input[type=text],input[type=email],select{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:#fff;font-weight:500;font-size:16px}
label.field{font-size:14px;color:var(--muted);display:block;margin-bottom:6px}
.photo-row{display:flex;align-items:center;gap:16px}
.photo-btns{display:grid;gap:8px;flex:1}
.photo-btns .btn{padding:11px;font-size:15px}
.pending{font-size:13px;color:var(--warn);margin-top:6px}
.checks{display:grid;gap:10px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#fff;cursor:pointer;line-height:1.35}
.check input{width:20px;height:20px;accent-color:var(--blue);flex:none;margin-top:1px}
.check a{color:var(--blue)}
.err{color:var(--bad);font-size:14px;min-height:0}
.signup-logo{display:block;width:78%;max-width:300px;height:auto;margin:0 auto 6px}
.tagline{text-align:center;color:var(--muted);margin-bottom:6px}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;margin:18px 0}
.rules div{background:var(--card2);border-radius:12px;padding:12px 6px}
.rules b{display:block;font-size:24px;color:var(--blue)}
.rules span{font-size:12px;color:var(--muted)}
/* prize banner */
.prize{background:linear-gradient(135deg,rgba(29,168,246,.25),rgba(29,168,246,.05));border:1px solid var(--blue);border-radius:20px;padding:18px;margin-bottom:12px}
.prize h2{font-size:20px}
.prize .code{font:800 26px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.15em;color:var(--blue);background:#000;border-radius:12px;padding:10px;text-align:center;margin:12px 0}
/* game */
.game{display:flex;flex-direction:column;flex:1}
.qhead{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:10px}
.timer{height:8px;border-radius:99px;background:var(--card2);overflow:hidden;margin-bottom:22px}
.timer i{display:block;height:100%;background:var(--blue);width:100%;transform-origin:left}
.timer.low i{background:var(--bad)}
.q{font-size:23px;line-height:1.3;font-weight:700;min-height:120px}
.opts{display:grid;gap:10px;margin-top:18px}
.opt{position:relative;text-align:left;border:1px solid var(--line);background:var(--card);color:#fff;font-weight:600;font-size:17px;padding:16px 44px 16px 16px;border-radius:14px;cursor:pointer;transition:background .12s,border-color .12s}
.opt:active{background:var(--card2)}
.opt:disabled{cursor:default}
.opt.right{background:rgba(47,208,122,.32);border:2px solid var(--good)}
.opt.wrong{background:rgba(255,90,95,.32);border:2px solid var(--bad)}
.opt.right::after,.opt.wrong::after{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:800;font-size:20px}
.opt.right::after{content:"✓";color:var(--good)}
.opt.wrong::after{content:"✗";color:var(--bad)}
.count{flex:1;display:grid;place-items:center;font-size:110px;font-weight:800;color:var(--blue)}
.score{font-size:64px;font-weight:800;color:var(--blue);line-height:1}
.dots{display:flex;gap:6px;justify-content:center;margin:16px 0}
.dots i{width:22px;height:22px;border-radius:50%;background:var(--card2)}
.dots i.r{background:var(--good)}.dots i.w{background:var(--bad)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.stats div{background:var(--card2);border-radius:12px;padding:12px;text-align:center}
.stats b{display:block;font-size:22px}
.stats span{font-size:12px;color:var(--muted)}
.recap{margin-top:8px}
.recap-row{padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.recap-row .rq{font-weight:600;line-height:1.35}
.recap-row .ra{margin-top:4px;color:var(--muted);font-size:14px}
.recap-row .ra b{color:var(--good)}
.recap-row .ra s{color:var(--bad)}
.recap-row .report{background:none;border:0;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer;margin-top:6px;padding:0}
/* league */
.row{display:grid;grid-template-columns:28px 36px 1fr auto;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .pos{color:var(--muted);font-weight:700;text-align:center}
.row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .pts{font-weight:800}
.row.you{background:rgba(29,168,246,.1);border-radius:12px}
.move{font-size:12px;font-weight:700;margin-left:6px;white-space:nowrap}
.move.up{color:var(--good)}.move.down{color:var(--bad)}.move.same{color:var(--muted)}.move.new{color:var(--blue)}
/* banners: start screen (under Start), end of game (under the score), bottom of the tables. Never during questions. */
/* One fixed 3:1 space; banners slide across it one at a time */
.bslot{margin-top:12px}
#topBanner .bslot{margin:0 0 12px}
#topBanner .bslot .bdots{margin-top:-2px}
.bslot .track{position:relative;aspect-ratio:3/1;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0b0b0d;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.bslot .b{position:absolute;inset:0;display:block;transform:translateX(100%);transition:transform .45s ease}
.bslot .b.on{transform:translateX(0)}
.bslot img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.bslot .bdots{display:flex;justify-content:center;margin-top:2px}
.bslot .bdots i{width:7px;height:7px;margin:8px 5px;border-radius:50%;background:var(--line);transition:background .3s;cursor:pointer;box-shadow:0 0 0 8px transparent}
.bslot .bdots i.on{background:var(--blue)}
@media (prefers-reduced-motion:reduce){.bslot .b{transition:none}}
.tonight{display:block;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--card2);border:1px solid var(--line);color:#fff;text-decoration:none;font-size:14px}
.tonight b{color:var(--blue)}
.flame{font-size:12px;font-weight:700;color:#ff9f43;margin-left:6px;white-space:nowrap}
.srow{display:grid;grid-template-columns:28px 36px 1fr auto;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow.you{background:rgba(255,159,67,.1);border-radius:12px}
.srow .pos{color:var(--muted);font-weight:700;text-align:center}
.srow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* table names: a long name glides to its end and back (fitNames in app.js decides who's too long) */
.row .nm,.srow .nm{min-width:0}
.nmline{display:flex;align-items:center;min-width:0}
.nmline>*{flex:none}
.nmline>.nmw{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.nmline .muted,.nmline .badge{margin-left:5px}
.nmt{display:inline-block;white-space:nowrap}
.nmw.scroll{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 8px),transparent);mask-image:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 8px),transparent)}
.nmw.scroll .nmt{padding-left:4px;animation:nmglide var(--dur,6s) ease-in-out infinite alternate}
@keyframes nmglide{0%,18%{transform:translateX(0)}82%,100%{transform:translateX(var(--dist,0))}}
@media (prefers-reduced-motion:reduce){.nmw.scroll .nmt{animation:none}}
.srow .sub{display:block;font-size:12px;color:var(--muted)}
.srow .sub.warn{color:var(--warn)}
.srow .big{font-weight:800;font-size:18px;color:#ff9f43;white-space:nowrap}
.streakline{text-align:center;font-weight:700;color:#ff9f43;margin-top:4px}
.keepit{background:rgba(255,159,67,.12);border:1px solid rgba(255,159,67,.45);color:#ffd2a6;border-radius:12px;padding:10px 12px;font-size:14px;margin-bottom:12px;text-align:center}
.note{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.5}
/* sheets: photo framing, rules, privacy, reports */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:flex-end;justify-content:center;z-index:15}
.sheet{background:var(--card);border-radius:20px 20px 0 0;max-width:480px;width:100%;max-height:88dvh;overflow:auto;padding:20px 18px 26px}
.sheet h2{margin-bottom:10px}.sheet p,.sheet li{font-size:15px;line-height:1.5;color:rgba(255,255,255,.85)}.sheet ul{padding-left:18px;margin:8px 0}
.crop{position:fixed;inset:0;background:rgba(0,0,0,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:16px;z-index:16}
.crop .stage{position:relative;width:280px;height:280px;touch-action:none;cursor:grab;border-radius:16px;overflow:hidden;background:#111}
.crop canvas{width:100%;height:100%;display:block}
.crop .ring{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 0 139px,rgba(0,0,0,.6) 140px)}
.crop .ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--blue)}
.crop input[type=range]{width:280px;accent-color:var(--blue)}
.crop .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:280px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#fff;color:#000;font-weight:700;padding:10px 16px;border-radius:99px;font-size:14px;z-index:30;max-width:90vw;text-align:center}
.splash{position:fixed;inset:0;background:radial-gradient(circle at 50% 45%,#0b2a44 0%,#000 65%);display:grid;place-items:center;z-index:40;transition:opacity .45s}
.splash img{width:82%;max-width:420px;height:auto;animation:pop 1.1s cubic-bezier(.2,1.4,.4,1) both;filter:drop-shadow(0 0 30px rgba(29,168,246,.45))}
.splash.gone{opacity:0;pointer-events:none}
@keyframes pop{0%{transform:scale(.4) rotate(-6deg);opacity:0}60%{opacity:1}100%{transform:none}}
.foot{margin-top:auto;padding-top:24px;text-align:center;font-size:12px;color:var(--muted)}
.foot a{color:var(--muted)}
.codebox{display:grid;gap:4px;justify-items:center;text-align:center;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:14px}
.codebox b{font:800 28px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.18em;color:var(--blue)}
.linkbtn{background:none;border:0;color:var(--muted);text-decoration:underline;font-size:13px;cursor:pointer;margin-top:4px}
/* today's answers, folded away until tapped */
.answers summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none;font-size:17px}
.answers summary::-webkit-details-marker{display:none}
.answers .chev{color:var(--muted);transition:transform .2s}
.answers[open] .chev{transform:rotate(180deg)}
.answers[open] summary{margin-bottom:6px}
/* countdown to the next game, top of the score card */
.nextgame{width:max-content;max-width:100%;margin:0 auto 14px;padding:7px 14px;border-radius:999px;background:var(--card2);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.nextgame b{color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.nextgame:empty{display:none}
/* closed-day screen: the week's top 3 */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 10px}
.pod{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.pod.you{border-color:var(--blue)}
.pod b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .muted{font-size:12px}
.pod .medal{font-size:20px}
/* mid-game "lost signal" note */
.netnote{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#2a2110;border:1px solid rgba(255,180,77,.5);color:var(--warn);padding:9px 16px;border-radius:999px;font-size:14px;font-weight:700;z-index:50;white-space:nowrap}
/* invite a friend */
.invited{background:rgba(29,168,246,.12);border:1px solid rgba(29,168,246,.4);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5;text-align:center}
.btnrow{display:flex;gap:8px}
.btnrow .btn{flex:1;padding:13px 8px;font-size:15px}
.btn.wa{background:#25D366;color:#04170b}
/* the invite card: one line of round icon buttons */
.invitecard{margin-top:12px;padding:16px 16px 12px}
.invhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:16px}
.invcount{font-size:12px;color:var(--muted)}
.iconrow{display:flex;justify-content:space-around;gap:6px;margin-top:12px}
.ibtn{background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:6px;font:600 12px Figtree,system-ui,sans-serif;cursor:pointer;padding:0;min-width:60px}
.ibtn .ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--card2);border:1px solid var(--line);color:#fff;transition:transform .1s}
.ibtn .ic svg{width:24px;height:24px}
.ibtn .ic.wa{background:#25D366;border-color:#25D366;color:#fff}
.ibtn .ic.wa svg{width:28px;height:28px}
.ibtn:active .ic{transform:scale(.92)}
.invnote{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}
/* League tab: week / today / yesterday */
.seg{display:flex;background:var(--card2);border-radius:12px;padding:3px;margin-bottom:14px}
.seg button{flex:1;background:none;border:0;color:var(--muted);font:700 14px Figtree,system-ui,sans-serif;padding:8px 4px;border-radius:9px;cursor:pointer}
.seg button.on{background:var(--bg);color:#fff}
.row .sub{display:block;font-size:12px;color:var(--muted);margin-top:1px}
#inviteBox{width:100%}
.qrbtn{margin-top:8px;padding:12px;font-size:15px}
.qrbtn .muted{font-weight:500;font-size:13px}
.qrbox{background:#fff;border-radius:18px;padding:14px;width:min(78vw,300px);margin:0 auto}
.qrbox svg{display:block;width:100%;height:auto}
/* add to home screen */
.steps{margin:0;padding:12px 14px 12px 34px;background:var(--card2);border-radius:12px;font-size:14px;line-height:1.7}
p.steps{padding-left:14px}
.shareicon{display:inline-block;border:1.5px solid currentColor;border-radius:4px;padding:0 4px;font-size:12px;line-height:1.3}
.demobar{background:rgba(255,180,77,.15);color:var(--warn);border:1px solid rgba(255,180,77,.4);border-radius:10px;padding:6px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-align:center;margin-bottom:10px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.splash img{animation:none}.opt{transition:none}}