/* The system: Apple's calm (space, soft surfaces, one action at a time) with Nike's volume (black, huge condensed type).
   One colour rule: the accent means NOW. It is never decoration, and it is never text on a light surface. */
:root{
  --tx:#101b33;--accent:#d7ff3d;--on:#0a0a0a;
  --bg:#f1f4f9;--card:#fff;--ink:#16274d;--ink2:#1e3566;--ink3:#2f477c;
  --g:#5d6880;--g2:#b4c0d8;--fill:#e9e9eb;--line:rgba(60,60,67,.14);
  --warn:#ff9f0a;--bad:#ff3b30;--good:#34c759;
  --disp:"Anton","Arial Narrow",Impact,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif;
  --spring:cubic-bezier(.32,.72,0,1);
  --safe-t:max(env(safe-area-inset-top),14px);--safe-b:max(env(safe-area-inset-bottom),10px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#root{margin:0;height:100%}
body{font:400 16px/1.35 var(--text);color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased;letter-spacing:-.011em;font-feature-settings:"tnum"}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid #0a84ff;outline-offset:2px}
svg.i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- surfaces ---- */
.screen{position:relative;width:100%;height:100%;overflow:hidden;background:var(--bg);isolation:isolate}
.view{position:absolute;inset:0}
.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:var(--safe-t) 16px 112px;-webkit-overflow-scrolling:touch;scrollbar-width:none;animation:fade .32s ease}
.scroll::-webkit-scrollbar,.hs::-webkit-scrollbar{display:none}
.framed{--safe-t:62px;--safe-b:12px}
@keyframes fade{from{opacity:0;transform:translateY(6px)}}
@keyframes pop{from{opacity:0;transform:scale(.96)}}

/* ---- header ---- */
.head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}
.date{font-size:13px;font-weight:600;color:var(--g)}
.big{font:400 46px/1 var(--disp);text-transform:uppercase;letter-spacing:.002em;margin-top:2px}
.round{width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center;transition:transform .2s var(--spring)}
.round:active,.b:active,.court:active,.row.tap:active,.tile:active{transform:scale(.97)}

/* ---- buttons ---- */
.b{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 22px;border-radius:999px;font-size:17px;font-weight:600;width:100%;text-align:center;transition:transform .2s var(--spring),background .2s,opacity .2s}
.b.pri{background:var(--ink);color:#fff}
.b.go{background:var(--accent);color:var(--on)}
.b.sec{background:var(--fill);color:var(--tx)}
.b.bad{background:rgba(255,59,48,.12);color:#d70015}
.b.glass{background:rgba(255,255,255,.14);color:#fff}
.b.sm{min-height:44px;font-size:15px;padding:0 16px;width:auto}
.b[disabled]{opacity:.35;cursor:default}
.link{font-size:15px;font-weight:600;color:var(--g);min-height:44px;display:inline-flex;align-items:center}
.stack{display:grid;gap:10px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---- chips ---- */
.chips{display:flex;gap:8px;align-items:center;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 13px;border-radius:999px;background:var(--card);font-size:14px;font-weight:600;white-space:nowrap}
.chip.live{background:var(--ink);color:#fff}
.chip.on{background:var(--ink);color:#fff}
.chip.warn{color:#c93400}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---- check in bar ---- */
.check{display:flex;gap:8px;margin-bottom:14px}
.check .field{flex:1;display:flex;align-items:center;gap:10px;height:54px;border-radius:999px;background:var(--card);padding:0 18px;color:var(--g);font-size:17px;font-weight:500}
.check .round{width:54px;height:54px}

/* ---- courts ---- */
.courts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.court{position:relative;display:flex;flex-direction:column;background:var(--ink);color:#fff;border-radius:22px;padding:13px 14px 15px;min-height:172px;overflow:hidden;width:100%;transition:transform .2s var(--spring);animation:pop .4s var(--spring)}
.court-h{display:flex;justify-content:space-between;align-items:flex-start}
.num{font:400 44px/.95 var(--disp)}
.clock{font-size:14px;font-weight:600;color:var(--g2);padding-top:3px}
.clock.low{color:var(--warn)}.clock.over{color:var(--bad)}
.team{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14.5px;font-weight:600;margin-top:7px;line-height:1.15}
.team b{font:400 25px/1 var(--disp)}
.team+.team{margin-top:3px}
.team.dim{color:var(--g2)}
.court .tap-l{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;color:var(--g2)}
.prog{position:absolute;left:0;bottom:0;height:4px;background:var(--accent);width:var(--p,0%);transition:width 1s linear}
.court.open{background:var(--card);color:var(--g);justify-content:space-between}
.court.open .num{color:var(--tx)}

.sh{display:flex;justify-content:space-between;align-items:baseline;margin:24px 2px 8px}
.sh h2{font:400 24px/1 var(--disp);text-transform:uppercase}
.sh span{font-size:14px;font-weight:600;color:var(--g)}

/* ---- lists ---- */
.list{background:var(--card);border-radius:18px;overflow:hidden}
.row{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 14px;width:100%;transition:transform .2s var(--spring)}
.row+.row::before{content:"";position:absolute;left:14px;right:0;top:0;height:1px;background:var(--line)}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t small{display:block;color:var(--g);font-size:13.5px;margin-top:1px}
.row .r{font-size:15px;font-weight:600;color:var(--g);white-space:nowrap;display:flex;align-items:center;gap:4px}
.row .pos{width:26px;font:400 22px var(--disp);flex:none}
.tag{font-size:12.5px;font-weight:600;background:var(--fill);border-radius:7px;padding:2px 7px;color:var(--tx);white-space:nowrap}
.tag.owe{background:rgba(255,159,10,.18);color:#a64b00}
.tag.ok{background:rgba(52,199,89,.16);color:#177a35}
.tag.test{background:var(--ink);color:#fff}
.av{width:40px;height:40px;border-radius:50%;background:var(--fill);display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.av.lg{width:84px;height:84px;font-size:30px}
.hs{display:flex;gap:12px;overflow-x:auto;margin-inline:-16px;padding:2px 16px;scrollbar-width:none}
.wt{flex:none;width:58px;text-align:center;font-size:13px;font-weight:600;animation:pop .4s var(--spring)}
.wt .av{width:52px;height:52px;margin:0 auto 4px;background:var(--card)}
.wt small{display:block;color:var(--g);font-weight:500;font-size:12px}

/* ---- segmented ---- */
.seg{display:flex;background:var(--fill);border-radius:12px;padding:3px;margin-bottom:14px}
.seg button{flex:1;height:44px;border-radius:9px;font-size:14px;font-weight:600;text-align:center;color:var(--tx);transition:background .2s}
.seg button.on{background:var(--card);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.search{display:flex;align-items:center;gap:9px;background:var(--fill);height:46px;border-radius:14px;padding:0 13px;color:var(--g);margin-bottom:12px}
.search input{border:0;outline:0;background:none;flex:1;align-self:stretch;font-size:17px;color:var(--tx);min-width:0}

/* ---- tab bar ---- */
.tabs{position:absolute;left:12px;right:12px;bottom:var(--safe-b);display:flex;padding:5px;border-radius:32px;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);box-shadow:0 10px 34px rgba(0,0,0,.16),inset 0 0 0 .5px rgba(255,255,255,.7);z-index:5}
.tabs button{flex:1;height:54px;border-radius:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12px;font-weight:600;color:var(--g);transition:background .25s,color .25s}
.tabs button.on{background:var(--ink);color:#fff}
.tabs.dark{background:rgba(30,53,102,.8);box-shadow:0 10px 34px rgba(0,0,0,.4)}
.tabs.dark button{color:#c7c7cc}.tabs.dark button.on{background:#fff;color:var(--tx)}

/* ---- sheets ---- */
.layer{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-end;animation:scrim .3s ease}
.layer::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38)}
.scrim{position:absolute;inset:0}
.sheet{position:relative;width:100%;max-height:90%;overflow-y:auto;background:var(--bg);border-radius:30px 30px 0 0;padding:10px 16px calc(var(--safe-b) + 14px);animation:up .42s var(--spring);scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.grab{width:38px;height:5px;border-radius:3px;background:var(--g2);margin:0 auto 10px}
.closing{animation:scrimout .26s ease forwards}.closing .sheet,.closing .cover{animation:down .26s ease forwards}
@keyframes up{from{transform:translateY(100%)}}
@keyframes down{to{transform:translateY(100%)}}
@keyframes scrim{from{opacity:0}}
@keyframes scrimout{to{opacity:0}}
.s-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.s-h h2{font:400 32px/1 var(--disp);text-transform:uppercase}
.s-h .x{width:44px;height:44px;border-radius:50%;background:var(--fill);display:grid;place-items:center;flex:none}
.s-h .x svg{width:18px;height:18px}
.note{color:var(--g);font-size:14.5px}
.lbl{font-size:13.5px;font-weight:600;color:var(--g);margin:16px 2px 7px}
.inp{width:100%;height:52px;border-radius:14px;border:0;background:var(--card);padding:0 14px;font-size:17px;outline:0}
.inp:focus{box-shadow:0 0 0 2px var(--ink)}
.opt{display:flex;gap:7px;flex-wrap:wrap}
.opt button{flex:1 0 auto;min-width:54px;height:46px;border-radius:13px;background:var(--card);font-weight:600;font-size:15.5px;text-align:center;padding:0 10px;transition:background .15s,color .15s}
.opt button.on{background:var(--ink);color:#fff}
.price{font:800 54px/1 var(--text);letter-spacing:-.04em;text-align:center;margin:8px 0 2px}
.center{text-align:center}
.opt .sw{width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);min-width:0;flex:none;padding:0;background:var(--c)}
.opt .sw.on{background:var(--c);outline:3px solid var(--ink);outline-offset:2px}

.toast{position:absolute;left:50%;bottom:calc(var(--safe-b) + 78px);transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:11px 18px;font-size:15px;font-weight:600;z-index:30;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;animation:drop .4s var(--spring);box-shadow:0 8px 28px rgba(0,0,0,.28)}
@keyframes drop{from{transform:translate(-50%,60%);opacity:0}}

/* ---- score: two halves, tap to add a point ---- */
.cover{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;background:var(--ink);color:#fff;animation:up .42s var(--spring)}
.sc-bar{position:absolute;z-index:3;top:calc(var(--safe-t) - 4px);left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:600}
.pillb{height:40px;padding:0 16px;border-radius:999px;background:rgba(14,26,54,.86);color:#fff;font-weight:600;font-size:15px;display:flex;align-items:center}
.half:first-of-type{padding-top:calc(var(--safe-t) + 44px)}
.half{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:var(--ink);color:#fff;transition:background .22s,color .22s;text-align:center;touch-action:manipulation}
.half+.half{box-shadow:0 -1px 0 var(--ink3)}
.half.lead{background:var(--accent);color:var(--on)}
.half .n{font:400 clamp(120px,40cqw,172px)/1 var(--disp);transition:transform .16s var(--spring)}
.half .who{font-size:18px;font-weight:600}
.minus{position:absolute;right:16px;bottom:14px;width:46px;height:46px;border-radius:50%;background:rgba(120,120,128,.26);display:grid;place-items:center;font-size:26px;font-weight:500;z-index:2}
.minus.b2{bottom:auto;top:calc(50% - 94px)}
.sc-save{padding:12px 16px calc(var(--safe-b) + 8px);background:var(--ink)}
.screen{container-type:inline-size}
html,body{overscroll-behavior:none}

/* ---- idle + recap ---- */
.hero{background:var(--ink);color:#fff;border-radius:26px;padding:26px 22px 22px}
.hero h2{font:400 60px/.98 var(--disp);text-transform:uppercase}
.hero p{color:var(--g2);margin:10px 0 20px;font-size:16px}
.recap{justify-content:center;padding:24px 22px calc(var(--safe-b) + 16px)}
.recap h2{font:400 clamp(76px,24cqw,104px)/.95 var(--disp);text-transform:uppercase;color:var(--accent)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}
.stat{background:var(--ink2);border-radius:18px;padding:14px 16px}
.stat.w{background:var(--card)}
.stat b{display:block;font:400 42px/1 var(--disp)}
.stat b.m{font:800 32px/1.3 var(--text);letter-spacing:-.03em}
.stat small{color:var(--g2);font-size:14px}
.stat.w small{color:var(--g)}

/* ---- schedule ---- */
.days{display:flex;gap:7px;overflow-x:auto;margin:0 -16px 12px;padding:0 16px;scrollbar-width:none}
.days button{flex:none;height:44px;padding:0 15px;border-radius:999px;background:var(--card);font-weight:600;font-size:14.5px}
.days button.on{background:var(--ink);color:#fff}
.grid{position:relative;display:grid;background:var(--card);border-radius:18px;overflow:hidden}
.grid .ch{font-size:13px;font-weight:700;text-align:center;padding:10px 0;border-bottom:1px solid var(--line)}
.col{position:relative;border-left:1px solid var(--line)}
.slot{display:block;width:100%;border-bottom:1px solid var(--line)}
.slot.peak{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.hr{position:relative;font-size:12px;color:var(--g);font-weight:600;text-align:center;padding-top:3px}
.bk{position:absolute;left:3px;right:3px;border-radius:9px;background:var(--ink);color:#fff;padding:5px 6px;font-size:12px;font-weight:600;line-height:1.15;overflow:hidden;animation:pop .3s var(--spring)}
.bk small{display:block;font-weight:500;font-size:12px;color:var(--g2)}
.bk.block{background:var(--fill);color:var(--g)}
.bk.live{background:var(--accent);color:var(--on)}.bk.live small{color:var(--on)}
.bk.owe::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--warn)}
.now{position:absolute;left:0;right:0;height:2px;background:var(--bad);z-index:2;pointer-events:none}

/* ---- money ---- */
.total{background:var(--ink);color:#fff;border-radius:24px;padding:20px}
.total .amt{font:800 50px/1.1 var(--text);letter-spacing:-.045em}
.total small{color:var(--g2);font-size:14px}
.split{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--ink3);margin:14px 0 8px;gap:2px}
.split i{display:block;background:var(--accent)}.split i+i{background:#fff}
.legend{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.heat{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;padding:14px;background:var(--card);border-radius:18px}
.heat i{height:34px;border-radius:5px;background:var(--ink);opacity:var(--o)}
.heat span{grid-column:span 4;font-size:12px;color:var(--g);font-weight:600}
.pod{background:var(--ink);color:#fff;border-radius:24px;padding:18px 20px}
.pod small{color:var(--g2);font-size:13.5px;font-weight:600}
.pod h2{font:400 54px/1.02 var(--disp);text-transform:uppercase;margin:2px 0}

/* ---- player ---- */
.p{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--safe-t) + 8px) 22px 104px;transition:background .45s,color .45s}
.p.ph-wait,.p.ph-rest{background:var(--ink);color:#fff}
.p.ph-next{background:#fff;color:var(--tx)}
.p.ph-court{background:var(--accent);color:var(--on)}
.p.ph-out{background:var(--ink);color:#fff}
.p .k{font-size:15px;font-weight:600;opacity:.66}
.p .club{font-size:13.5px;font-weight:600;opacity:.6}
.p .mid{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.giant{font:400 clamp(150px,50cqw,212px)/.92 var(--disp);color:var(--accent);margin-left:-3px}
.unit{font:400 44px/1 var(--disp);text-transform:uppercase}
.shout{font:400 clamp(92px,29cqw,124px)/.94 var(--disp);text-transform:uppercase;margin-left:-2px}
.vs-box{margin-top:18px;font-size:19px;font-weight:600;line-height:1.3}
.vs-box small{display:block;font-size:14px;font-weight:500;opacity:.62}
.p .acts{display:flex;gap:10px}
.live-sc{font:400 54px/1 var(--disp);margin-top:12px}

.story{position:relative;aspect-ratio:9/11;border-radius:24px;background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;overflow:hidden}
.story::after{content:"";position:absolute;right:-30%;top:14%;width:62%;height:38%;background:var(--accent);transform:rotate(14deg)}
.story>*{position:relative;z-index:1}
.story small{font-size:13px;font-weight:600;color:var(--g2)}
.story h3{font:400 74px/.95 var(--disp);text-transform:uppercase;margin-top:auto}
.story .s{font:400 56px/1 var(--disp);color:var(--accent);mix-blend-mode:normal}
.story .w{font-size:16px;font-weight:600;margin-top:8px}

/* ---- big screen: everything in container units, so it works on any TV or in the preview ---- */
.tvs{position:absolute;inset:0;container-type:size;background:#0e1a36;color:#fff;overflow:hidden}
.tv{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.2cqw 2.4cqw;gap:1.5cqw}
.tv-h{display:flex;justify-content:space-between;align-items:center}
.tv-h .c{font:400 3cqw/1 var(--disp);text-transform:uppercase}
.tv-h .c span{color:#9fb0cf;margin-left:1.2cqw}
.tv-h .tm{font:400 3cqw/1 var(--disp)}
.tv-h .snd{font-size:1.2cqw;font-weight:600;color:#c7c7cc;background:#2f477c;border-radius:99px;padding:.6cqw 1.2cqw;margin-right:1.2cqw}
.tv-g{flex:1;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1.1cqw;min-height:0}
.tc{position:relative;background:var(--ink2);border-radius:1.6cqw;padding:1.5cqw 1.6cqw;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.tc-h{display:flex;justify-content:space-between;align-items:flex-start}
.tc-n{font:400 6.4cqw/.95 var(--disp)}
.tc-t{font-size:2.1cqw;font-weight:700;color:#c7c7cc}
.tc-t.low{color:var(--warn)}.tc-t.over{color:var(--bad)}
.tc-b{margin-top:auto;display:grid;gap:.9cqw}
.tc-r{display:flex;justify-content:space-between;align-items:baseline;gap:1cqw;font-size:var(--nm,2.4cqw);font-weight:700;line-height:1.08}
.tc-r b{font:400 6.2cqw/1 var(--disp)}
.tc .prog{height:.5cqw}
.tc.open{background:#16274d;color:#9fb0cf}
.tv-l{display:grid;grid-template-columns:1.35fr 1fr;gap:2.4cqw}
.tv-l h2{font:400 2.5cqw/1 var(--disp);text-transform:uppercase;margin-bottom:.7cqw}
.tv-next{display:grid;gap:.25cqw;font-size:1.75cqw;font-weight:600}
.tv-next div{display:flex;gap:1cqw;padding:.45cqw 0;border-top:1px solid #2f477c;white-space:nowrap}
.tv-next i{font:400 1.9cqw var(--disp);color:var(--accent);width:1.5cqw}
.tv-next em{font-style:normal;color:#9fb0cf}
.tv-wait{display:flex;flex-wrap:wrap;gap:.45cqw 1.6cqw;font-size:1.75cqw;font-weight:600}
.tv-wait span small{font-size:1.25cqw;color:#9fb0cf;font-weight:500;margin-left:.3cqw}
.tv-f{display:flex;justify-content:space-between;font-size:1.35cqw;font-weight:600;color:#9fb0cf}
.tv-f b{color:#fff;font-weight:600}
.calling{position:absolute;inset:0;background:var(--accent);color:var(--on);display:flex;flex-direction:column;justify-content:center;padding:0 5cqw;z-index:5;animation:wipe .55s var(--spring)}
@keyframes wipe{from{clip-path:polygon(0 0,0 0,-14% 100%,-14% 100%)}to{clip-path:polygon(0 0,114% 0,100% 100%,-14% 100%)}}
.calling .kk{font-size:2.1cqw;font-weight:700;letter-spacing:.02em}
.calling .cc{font:400 22cqw/.95 var(--disp);text-transform:uppercase;margin-left:-.4cqw}
.calling .pp{font-size:4.3cqw;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin-top:1cqw}
.calling.multi .cc{font-size:8cqw;margin-top:1.2cqw}
.calling.multi .pp{font-size:2.8cqw;margin-top:.2cqw}
.tv-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;text-align:center}
.tv-idle h2{font:400 11cqw/1 var(--disp);text-transform:uppercase}
.tv-idle p{font-size:2cqw;color:#9fb0cf}

/* ---- demo stage ---- */
.stage{min-height:100%;display:flex;flex-direction:column;background:#e9edf4;padding:14px 24px 18px}
.st-top{display:flex;align-items:center;gap:16px;height:44px;margin-bottom:12px}
.st-top img{height:34px;border-radius:7px;display:block}
.st-top .seg{margin:0;width:260px;background:#dcdce0}
.st-top .link{margin-left:auto}
.st-main{flex:1;display:flex;justify-content:center;align-items:center;gap:clamp(18px,2.6vw,44px);min-height:0}
.dv{flex:none;width:calc(390px*var(--s) + 22px);height:calc(844px*var(--s) + 22px);background:#000;border-radius:calc(56px*var(--s) + 11px);padding:11px;box-shadow:0 30px 70px rgba(0,0,0,.25)}
.dv-in{width:390px;height:844px;transform:scale(var(--s));transform-origin:0 0;border-radius:50px;overflow:hidden;position:relative}
.island{position:absolute;top:12px;left:50%;width:112px;height:32px;margin-left:-56px;background:#000;border-radius:18px;z-index:40;pointer-events:none}
.st-mid{flex:1;max-width:760px;min-width:0;display:flex;flex-direction:column;gap:18px}
.tvf{aspect-ratio:16/9;background:#000;padding:9px;border-radius:16px;box-shadow:0 30px 70px rgba(0,0,0,.25)}
.tvf>div{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden}
.cap{font-size:13px;font-weight:600;color:var(--g);text-align:center;margin-top:8px}
.guide h1{font:400 clamp(30px,3.1vw,44px)/1.02 var(--disp);text-transform:uppercase}
.guide ol{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;font-size:14.5px;font-weight:500;color:#3a3a3c}
.guide li b{display:block;font:400 26px/1 var(--disp);color:var(--tx);margin-bottom:3px}

.launch{min-height:100%;background:var(--ink);color:#fff;padding:calc(var(--safe-t) + 34px) 20px 28px;display:flex;flex-direction:column;gap:10px}
.launch h1{font:400 66px/.96 var(--disp);text-transform:uppercase;margin-bottom:18px}
.launch a{display:flex;justify-content:space-between;align-items:center;background:var(--ink2);border-radius:20px;padding:18px 20px;color:#fff;text-decoration:none;font-size:18px;font-weight:600}
.launch a small{display:block;color:var(--g2);font-size:14px;font-weight:400}

@media(prefers-reduced-motion:reduce){*,*::before{animation-duration:.01ms!important;transition-duration:.01ms!important}.dot{animation:none}}

/* ---- v2 additions ---- */
.toast{display:flex;align-items:center;gap:14px}
.toast button{color:var(--accent);font-weight:700}
.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border-radius:16px;padding:11px 14px;margin-bottom:12px;font-size:14px;color:var(--g);animation:pop .3s var(--spring)}
.bar b{display:block;color:var(--tx);font-size:15px}
.bar.on{background:var(--ink);color:#c7c7cc}.bar.on b{color:#fff}
.bar .b{flex:none}
.inp.ta{height:auto;padding:12px 14px;resize:vertical;font-family:inherit;line-height:1.35;display:block}
.opt button.left{flex:1 0 100%;text-align:left;padding:0 14px}
label.row{cursor:pointer}
.stp{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:16px;padding:10px 12px 10px 14px;margin-bottom:8px;font-weight:600}
.stp .t{flex:1;min-width:0}
.stp button{width:44px;height:44px;border-radius:50%;background:var(--fill);font-size:24px;text-align:center;line-height:1}
.stp b{font:400 38px/1 var(--disp);width:48px;text-align:center}
.tile{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--card);border-radius:18px;padding:15px 16px;font-size:17px}
.tile small{display:block;color:var(--g);font-size:14px}
.cardimg{display:block;width:62%;margin:0 auto 10px;border-radius:18px;background:var(--ink)}
.wait-c{aspect-ratio:9/16;display:grid;place-items:center;color:var(--g2);font-size:14px;font-weight:600}
.capbox{background:var(--card);border-radius:14px;padding:11px 14px 2px;font-size:14.5px;color:var(--tx)}
.p-ann{position:absolute;left:14px;right:14px;top:calc(var(--safe-t) + 34px);background:#fff;color:var(--tx);border-radius:16px;padding:12px 16px;font-weight:600;font-size:15.5px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:4;animation:drop2 .4s var(--spring)}
@keyframes drop2{from{transform:translateY(-30%);opacity:0}}
.tv-ann{position:absolute;left:2.4cqw;right:2.4cqw;bottom:2cqw;background:#fff;color:#0a0a0a;border-radius:1.4cqw;padding:1.5cqw 2.2cqw;font-size:3.2cqw;font-weight:800;letter-spacing:-.02em;z-index:3;box-shadow:0 1cqw 4cqw rgba(0,0,0,.6);animation:drop2 .4s var(--spring)}
.tv-logo{height:3.1cqw;width:auto;vertical-align:bottom;margin-right:1cqw;border-radius:.3cqw}
.tv-ad{color:#c7c7cc}
.capbox .link{display:flex}

/* ---- sign in + hosted ---- */
.authgate{position:fixed;inset:0;z-index:100;background:#16274d;color:#fff;display:flex;align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto}
.authgate[hidden]{display:none}
.ag-card{width:100%;max-width:380px;display:grid;gap:14px}
.ag-brand strong{font:400 64px/1 var(--disp);letter-spacing:.005em}.ag-brand em{font-style:normal;color:var(--accent);margin-left:.1em}
.ag-brand small{display:block;color:var(--g2);font-size:14px;margin-top:2px}
.ag-card h1{font:400 40px/1 var(--disp);text-transform:uppercase;margin-top:12px}
.ag-sub{color:var(--g2);font-size:15.5px}
.ag-msg{background:rgba(255,59,48,.18);color:#ff8a82;border-radius:12px;padding:10px 14px;font-size:14.5px}.ag-msg.ok{background:rgba(52,199,89,.18);color:#7fe39b}
#agForm{display:grid;gap:12px}
.authgate .field{display:grid;gap:5px;font-size:14px;font-weight:600;color:#c7c7cc}
.authgate input,.authgate select{height:52px;border-radius:14px;border:0;background:#22396d;color:#fff;padding:0 14px;font-size:17px;outline:0;width:100%}
.authgate input:focus{box-shadow:0 0 0 2px var(--accent)}
.ag-brand img{height:84px;width:auto;display:block;margin-left:-6px}
.authgate .btn{font:600 17px var(--text);text-align:center;min-height:54px;width:100%;border-radius:999px;background:var(--accent);color:var(--on);font-size:17px;font-weight:600;border:0;cursor:pointer;margin-top:4px}
.authgate .ag-links{display:flex;justify-content:space-between;gap:12px}
.authgate .linkbtn{color:#c7c7cc;font-size:15px;font-weight:600;min-height:44px}
.ag-guest{display:grid;gap:8px;margin-top:18px;font-size:14px;font-weight:600;color:#c7c7cc}.authgate .btn.ghost{background:#22396d;color:#fff}
.asks{position:absolute;left:14px;right:14px;top:calc(var(--safe-t) + 30px);display:grid;gap:8px;z-index:5}
.ask{background:#fff;color:var(--tx);border-radius:18px;padding:13px 14px;display:grid;gap:10px;font-size:14.5px;color:var(--g);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.ask b{display:block;color:var(--tx);font-size:16px}
.ask .b{width:100%}
#testBadge{position:fixed;left:50%;top:max(env(safe-area-inset-top),4px);transform:translateX(-50%);background:#ff9f0a;color:#0a0a0a;font:700 11px var(--text);padding:3px 10px;border-radius:99px;z-index:200;pointer-events:none}

.gcard{background:var(--card);border-radius:18px;padding:12px;margin-top:10px}
.gc-h{display:flex;gap:8px;align-items:center;margin-bottom:8px}.gc-h .inp{background:var(--bg);height:44px}
.gc-h .x,.row .x{width:44px;height:44px;border-radius:50%;background:var(--fill);display:grid;place-items:center;flex:none}.gc-h .x svg,.row .x svg{width:18px;height:18px}
.opt button[disabled]{opacity:.28}
.nm{font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:3px}

.hbtns{display:flex;gap:8px}
.round.plus{background:var(--accent);color:var(--on)}
.livecard{display:grid;gap:3px;width:100%;background:var(--ink);color:#fff;border-radius:26px;padding:20px 22px;transition:transform .2s var(--spring)}
.livecard:active{transform:scale(.98)}
.lc-k{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--g2)}
.lc-n{font:400 44px/1.02 var(--disp);text-transform:uppercase}
.lc-s{color:var(--g2);font-size:15px}
.lc-go{display:flex;align-items:center;gap:4px;margin-top:10px;font-weight:600;color:var(--accent);font-size:16px}
.cal{width:44px;height:48px;border-radius:12px;background:var(--bg);display:grid;place-items:center;align-content:center;font-size:12px;font-weight:600;color:var(--g);flex:none;line-height:1.1}
.cal b{font:400 21px/1 var(--disp);color:var(--tx)}
.sh .link{font-size:14px;font-weight:600;color:var(--g)}
button.list.row{width:100%}
.view>.bar{position:absolute;left:14px;right:14px;top:calc(var(--safe-t) + 6px);z-index:6;margin:0}
.view:has(>.bar) .scroll,.view:has(>.bar) .p{padding-top:calc(var(--safe-t) + 80px)}

/* ---- finishing a game ---- */
.sc-q{position:absolute;z-index:2;top:calc(var(--safe-t) + 44px);left:0;right:0;text-align:center;font:400 30px var(--disp);text-transform:uppercase;color:#fff;pointer-events:none}
.sc-pend{position:relative;z-index:3;margin:calc(var(--safe-t) + 88px) 14px 8px;background:var(--accent);color:var(--on);border-radius:20px;padding:14px 16px;text-align:left;display:grid;gap:2px;width:calc(100% - 28px)}
.sc-pend small{font-size:13px;font-weight:600}.sc-pend b{font:400 30px/1.1 var(--disp);text-transform:uppercase}.sc-pend span{font-weight:700;font-size:15px}
.half.pick{background:var(--ink);transition:background .15s;padding:0 18px}.half.pick:active{background:var(--accent);color:var(--on)}.half.pick+.half.pick{border-top:1px solid var(--ink3)}
.half.pick:first-of-type{padding-top:calc(var(--safe-t) + 60px)}
.nmz{font:400 clamp(44px,14cqw,62px)/1.02 var(--disp);text-transform:uppercase}
.sc-w{background:var(--accent);color:var(--on);padding:calc(var(--safe-t) + 52px) 18px 16px;text-align:center}.sc-w p{font-size:14px;font-weight:700}.sc-w h2{font:400 clamp(40px,12cqw,54px)/1.02 var(--disp);text-transform:uppercase}
.sc-l{flex:1;display:flex;flex-direction:column;padding:16px 14px calc(var(--safe-b) + 10px);min-height:0;overflow-y:auto}.sc-l h3{font:600 18px var(--text);text-align:center;margin-bottom:12px}
.sc-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.sc-t{background:var(--ink2);color:#fff;border-radius:16px;min-height:66px;display:grid;place-items:center;align-content:center;text-align:center;transition:background .12s,transform .12s}.sc-t:active{background:var(--accent);color:var(--on);transform:scale(.95)}.sc-t b{font:400 34px/1 var(--disp)}.sc-t small{font-size:12px;color:#aeaeb2;font-weight:600}
.sc-o{justify-content:center;width:100%;color:#c7c7cc;margin-top:6px}
.sc-man{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 16px;gap:4px;color:var(--tx)}.sc-man h2{font:400 36px var(--disp);text-transform:uppercase;color:#fff;margin-bottom:12px;text-align:center}.sc-man .stp{color:#0a0a0a;background:#fff}.sc-man .stp button{background:#e9e9eb;color:#0a0a0a}.sc-man .b{margin-top:10px}
/* ---- v1 additions ---- */
.av{overflow:hidden}.av img{width:100%;height:100%;object-fit:cover;display:block}.avwrap{cursor:pointer;display:inline-block}.center .av.lg{margin:0 auto}
.gphoto{display:block;width:100%;border-radius:18px;margin-bottom:12px;max-height:280px;object-fit:cover}
.slotg{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-size:13px;font-weight:600;color:var(--g)}.slotg>div{display:grid;gap:6px}
.slot-b{background:var(--card);border-radius:13px;min-height:46px;font-weight:600;font-size:15.5px;text-align:center;color:var(--tx);padding:0 8px}.slot-b.empty{color:var(--g);box-shadow:inset 0 0 0 1.5px var(--line)}
.row.acct{flex-wrap:wrap}.opt.role{width:100%}.opt.role button{height:36px;font-size:13px;background:var(--bg)}.opt.role button.on{background:var(--ink);color:#fff}
.tick{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--g2);flex:none}.tick.on{background:var(--accent);box-shadow:none}
.stat b.nmb{font:400 26px/1.1 var(--disp);text-transform:uppercase;margin:2px 0}
select.inp{-webkit-appearance:menulist;appearance:auto;color:var(--tx)}
label.b{cursor:pointer}
/* ---- dark mode ---- */
:root[data-theme=dark]{--tx:#f3f6fc;--bg:#0b1428;--card:#16274d;--ink:#16274d;--ink2:#1e3566;--ink3:#2f477c;--fill:#22396d;--g:#9fb0cf;--line:rgba(255,255,255,.14)}
:root[data-theme=dark] .b.pri,:root[data-theme=dark] .chip.on,:root[data-theme=dark] .days button.on,:root[data-theme=dark] .opt button.on{background:#f5f5f7;color:#0a0a0a}
:root[data-theme=dark] .tabs{background:rgba(30,53,102,.82);box-shadow:0 10px 34px rgba(0,0,0,.5)}:root[data-theme=dark] .tabs button{color:#c7c7cc}:root[data-theme=dark] .tabs button.on{background:#f5f5f7;color:#0a0a0a}
:root[data-theme=dark] .seg button.on{background:#2f477c}:root[data-theme=dark] .grid,:root[data-theme=dark] .heat{background:var(--card)}:root[data-theme=dark] .bk:not(.live):not(.block){background:#2f477c}
.p.ph-next,.ask,.ask b,.p-ann{color:#0a0a0a}.ph-next .b.sec{background:#e9e9eb;color:#0a0a0a}.ask .b.sec{background:#e9e9eb;color:#0a0a0a}
.bar.on,.total,.pod,.hero,.livecard{color:#fff}
:root[data-theme=dark] .opt .sw,:root[data-theme=dark] .opt .sw.on{background:var(--c)}
.sc-seg{margin-bottom:10px;background:var(--ink2)}.sc-seg button{color:#fff}.sc-seg button.on{background:#fff;color:#0a0a0a}
.stp+.seg:not(.sc-seg){margin-top:8px}

/* ---- EPC branding ---- */
.clogo{display:block;height:40px;width:auto;margin:0 0 2px -2px}
.logo-d{display:none}:root[data-theme=dark] .logo-l{display:none}:root[data-theme=dark] .logo-d{display:block}
.p .club{height:34px}.p .club img{height:34px;width:auto;display:block;margin-left:-2px}
.tv-logo{height:3.6cqw;width:auto;vertical-align:bottom;margin-right:1.1cqw;border-radius:0}
.tv-idle img{height:18cqw;width:auto}
.recap-logo{height:46px;width:auto;margin-bottom:16px;align-self:flex-start}
.ag-brand img{height:150px;margin-left:-4px}
.p .club{opacity:1}
/* A + B pass, 10/11/2026: tap targets, player board, buzz, TV QR */
.sh .link{min-height:44px!important;margin-block:-12px}
.p .club:has(.sn){height:auto}.p .club .sn{display:block;margin-top:6px;font-size:13.5px;font-weight:600;opacity:.75}
.boardbar{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-bottom:6px;font-size:15px;font-weight:600;color:inherit}.boardbar .i{width:16px;height:16px}
.buzz{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;margin-top:14px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:600;background:rgba(255,255,255,.14);color:#fff}.buzz .i{width:18px;height:18px}
.buzz.on{background:var(--accent);color:var(--on)}.ph-next .buzz:not(.on){background:#e9e9eb;color:#0a0a0a}
.tv-l:has(.tv-qr){grid-template-columns:1.35fr 1fr auto}
.tv-qr{display:flex;flex-direction:column;align-items:center;gap:.5cqw;font-size:1.2cqw;font-weight:600;color:#c7d2e6;text-align:center}.tv-qr img{width:9.5cqw;height:9.5cqw;display:block;border-radius:.6cqw;image-rendering:pixelated}
.tv-idle.more img.lg{height:12cqw}.tv-idle .ti-next{margin-top:1.6cqw}.tv-idle .ti-next small{display:block;font-size:1.8cqw;font-weight:600;color:#9fb0cf;margin-bottom:.4cqw}.tv-idle .ti-next b{font:400 3.6cqw/1.1 var(--disp);text-transform:uppercase;color:var(--accent)}
.tv-idle .ti-top b{color:#fff;font-weight:700}.tv-idle .tv-qr{position:absolute;right:2.4cqw;bottom:2.4cqw}
.chip{min-width:44px;justify-content:center}.sh .link{min-width:44px;justify-content:flex-end}
@media(max-height:720px){.shout{font-size:74px}.giant{font-size:130px}.unit{font-size:32px}.vs-box{margin-top:10px;font-size:17px}.live-sc{font-size:40px;margin-top:6px}.buzz{margin-top:10px}}
.tabs:empty{display:none}
.hlock{height:88px;width:auto;margin-left:-4px}
.tabs button.livetab svg.i{box-sizing:content-box;width:20px;height:20px;padding:3px;border-radius:50%;background:#d7ff3d;color:#16274d;stroke:#16274d;animation:liveglow 1.8s ease-in-out infinite}
@keyframes liveglow{0%,100%{box-shadow:0 0 6px 1px rgba(215,255,61,.75)}50%{box-shadow:0 0 16px 5px rgba(215,255,61,1)}}
.cwrap{display:flex;flex-direction:column;gap:6px}.callbar{display:grid;grid-template-columns:1fr 1fr;gap:6px}.callbar button{min-height:44px;text-align:center;border-radius:14px;background:var(--card);font-size:14px;font-weight:600;color:var(--tx)}
.cgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.cgrid button{height:46px;border-radius:13px;background:var(--card);font-weight:600;font-size:15.5px;text-align:center}.cgrid button.on{background:var(--ink);color:#fff}:root[data-theme=dark] .cgrid button.on{background:#f5f5f7;color:#0a0a0a}
.gg{font-size:17px;font-weight:700;color:var(--accent);margin-bottom:10px}
.agree p{font-size:17px;font-weight:600;margin-bottom:10px;text-align:center}
.tv-fair{font-size:1.2cqw;font-weight:600;color:#9fb0cf;margin:-.3cqw 0 .6cqw}