/* Court-side scoreboard and bracket wall: a fixed 1920×1080 stage scaled to the screen. */
:root{--bg:#04123a;--bg2:#0d3fae;--ink:#fff;--muted:#a9bde9;--acc:#ffc60a;--acc2:#e0102b;--card:rgba(255,255,255,.08);--line:rgba(255,255,255,.16);--head:"Barlow Condensed",sans-serif;--body:"Barlow",system-ui,sans-serif}
[data-theme=gold]{--bg:#07060a;--bg2:#2a1d06;--muted:#cbbf9e;--acc:#ffd24a;--acc2:#ffd24a;--card:rgba(255,236,180,.06);--line:rgba(255,210,74,.22)}
[data-theme=court]{--bg:#04123a;--bg2:#1152d6;--acc:#d4ff3f;--acc2:#d4ff3f}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:var(--body)}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:radial-gradient(1400px 900px at 50% 120%,var(--bg2),var(--bg) 70%)}

/* court */
.cbg{position:absolute;inset:0;pointer-events:none}
.cbg i{position:absolute;border:4px solid rgba(255,255,255,.07)}
.cbg .cl1{left:120px;right:120px;top:180px;bottom:60px;border-radius:8px}
.cbg .cl2{left:50%;top:180px;bottom:60px;border-width:0 0 0 4px}
.cbg .cnet{left:120px;right:120px;top:56%;border-width:4px 0 0;border-style:dashed}
.ctop{position:absolute;left:0;right:0;top:0;height:170px;display:flex;align-items:center;gap:30px;padding:0 60px;background:linear-gradient(rgba(0,0,0,.45),transparent)}
.ctop .crest{height:130px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
.ct small{display:block;color:var(--muted);font:800 30px var(--head);letter-spacing:.2em;text-transform:uppercase}
.ct b{display:block;font:italic 900 96px/0.9 var(--head);text-transform:uppercase}.ct b em{color:var(--acc);font-style:italic}
.ctimer{margin-left:auto;display:grid;justify-items:center;padding:14px 34px;border-radius:24px;background:rgba(0,0,0,.4);border:3px solid var(--acc)}
.ctimer small{font:800 22px var(--head);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ctimer b{font:900 96px/1 var(--head);font-variant-numeric:tabular-nums;color:var(--acc)}
.ctimer span{width:220px;height:8px;border-radius:8px;background:rgba(255,255,255,.15);overflow:hidden}.ctimer span i{display:block;height:100%;background:var(--acc);transform-origin:0 50%}
.ctimer.warn{border-color:#ffab2e}.ctimer.warn b{color:#ffab2e}.ctimer.over{border-color:#ff2d4a;animation:blink 1s infinite}.ctimer.over b{color:#ff2d4a}
@keyframes blink{50%{opacity:.55}}
.cspon{height:90px;max-width:260px;object-fit:contain;margin-left:30px}
.ctimer[hidden]+.cspon{margin-left:auto}
.cmain{position:absolute;left:60px;right:60px;top:200px;bottom:40px;display:grid;grid-template-rows:auto 1fr auto;gap:20px}
.cround{justify-self:center;padding:10px 34px;border-radius:999px;background:var(--card);border:2px solid var(--line);font:800 40px var(--head);letter-spacing:.16em;text-transform:uppercase}
.cteams{display:grid;grid-template-columns:1fr 160px 1fr;align-items:center;gap:20px}
.cside{display:grid;gap:10px;justify-items:center;text-align:center}
.cside b{font:900 96px/0.95 var(--head);text-transform:uppercase;max-width:760px;overflow-wrap:anywhere}
.cscore{font:900 330px/0.85 var(--head);font-variant-numeric:tabular-nums;color:var(--acc);text-shadow:0 20px 60px rgba(0,0,0,.5)}
.cscore.dim{display:none}
.cvs{justify-self:center;font:italic 900 90px var(--head);color:var(--muted)}
.cnext{justify-self:center;padding:14px 34px;border-radius:18px;background:rgba(0,0,0,.35);font:700 40px var(--head);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cnext b{color:#fff}
.cflash{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);animation:fin .35s}
.cflash[hidden]{display:none}
.cflash .card{display:grid;justify-items:center;gap:14px;padding:50px 80px;border-radius:40px;background:linear-gradient(160deg,var(--bg2),var(--bg));border:4px solid var(--acc);box-shadow:0 40px 120px rgba(0,0,0,.7);animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.cflash .k{font:800 44px var(--head);letter-spacing:.24em;color:var(--acc);text-transform:uppercase}
.cflash .sc{font:900 260px/0.9 var(--head);font-variant-numeric:tabular-nums}
.cflash .w{font:900 70px var(--head);text-transform:uppercase}
.cflash .w small{display:block;text-align:center;font:800 30px var(--head);letter-spacing:.2em;color:var(--muted)}
@keyframes fin{from{opacity:0}}@keyframes pop{from{transform:scale(.8);opacity:0}}
.cdone{grid-row:1/-1;align-self:center;justify-self:center;text-align:center;font:900 110px/1 var(--head);text-transform:uppercase}.cdone small{display:block;font:700 40px var(--head);color:var(--muted);margin-top:20px}

/* bracket wall */
.bbg{position:absolute;inset:0;background:radial-gradient(900px 500px at 50% 50%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%)}
.btop{position:absolute;left:0;right:0;top:0;height:170px;display:flex;align-items:center;gap:30px;padding:0 60px}
.btop .crest{height:130px}.bt small{display:block;color:var(--muted);font:800 30px var(--head);letter-spacing:.2em;text-transform:uppercase}
.bt b{display:block;font:italic 900 86px/0.95 var(--head);text-transform:uppercase}.bt b em{color:var(--acc);font-style:italic}
.btrophy{margin-left:auto;height:130px;filter:drop-shadow(0 10px 30px rgba(255,190,40,.4))}
.bmain{position:absolute;left:60px;right:60px;top:190px;bottom:50px;display:flex;gap:40px}
.bwait{margin:auto;font:800 50px var(--head);color:var(--muted);text-transform:uppercase}
.bcol{flex:1;display:flex;flex-direction:column;min-width:0}
.bcol h3{margin:0 0 16px;font:800 30px var(--head);letter-spacing:.2em;color:var(--acc);text-transform:uppercase;text-align:center}
.bstack{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:18px}
.bm{border-radius:22px;background:rgba(0,0,0,.35);border:2px solid var(--line);overflow:hidden;transition:border-color .4s}
.bm.now{border-color:#ff2d4a;box-shadow:0 0 0 4px rgba(255,45,74,.25)}
.bm.done{border-color:color-mix(in srgb,var(--acc) 50%,transparent)}
.bm .lbl{display:flex;justify-content:space-between;padding:8px 18px;font:700 22px var(--head);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;background:rgba(255,255,255,.05)}
.bm .tm{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;border-top:2px solid var(--line);font:800 40px/1.05 var(--head);text-transform:uppercase}
.bm .tm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm .tm b{font:900 52px var(--head);min-width:60px;text-align:right;font-variant-numeric:tabular-nums}
.bm .tm.w{background:color-mix(in srgb,var(--acc) 16%,transparent)}.bm .tm.w b{color:var(--acc)}.bm .tm.l{color:rgba(255,255,255,.45)}
.bm .tm .tbd{color:var(--muted);font-style:italic;font-weight:600}
.bm.flash{animation:bflash 1.4s}@keyframes bflash{0%{background:color-mix(in srgb,var(--acc) 45%,transparent)}100%{background:rgba(0,0,0,.35)}}
.bchamp{flex:1.1;display:grid;place-items:center;align-content:center;gap:20px;text-align:center;border-radius:30px;background:radial-gradient(500px 400px at 50% 30%,color-mix(in srgb,var(--acc) 25%,transparent),transparent 70%);border:3px solid color-mix(in srgb,var(--acc) 50%,transparent)}
.bchamp img{height:260px;filter:drop-shadow(0 20px 40px rgba(255,190,40,.5))}
.bchamp small{font:800 34px var(--head);letter-spacing:.24em;color:var(--acc);text-transform:uppercase}
.bchamp b{font:italic 900 90px/0.95 var(--head);text-transform:uppercase;padding:0 20px}
.bchamp.tbd b{color:rgba(255,255,255,.35)}
.proj{flex:1;display:grid;align-content:center;gap:24px}
.proj h3{font:800 34px var(--head);letter-spacing:.2em;color:var(--acc);text-transform:uppercase;text-align:center;margin:0}
.proj .pairs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.proj .pair{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;padding:26px 30px;border-radius:24px;background:rgba(0,0,0,.35);border:2px dashed var(--line)}
.proj .pair span{font:800 44px/1.05 var(--head);text-transform:uppercase}.proj .pair span:last-child{text-align:right}.proj .pair small{display:block;font:700 22px var(--head);color:var(--muted);letter-spacing:.1em}
.proj .pair em{font:italic 900 40px var(--head);color:var(--acc)}
.bcol.n4 .bstack{gap:10px}.bcol.n4 .bm .lbl{font-size:17px;padding:4px 16px}.bcol.n4 .bm .tm{padding:5px 16px;font-size:30px}.bcol.n4 .bm .tm b{font-size:38px}