/* HOOPS NIGHTLY BROADCAST KIT (21/10/2026) — the TV graphics package for creators' streams.
   Every scene is a 1920×1080 Browser Source. Overlays sit on a transparent page; full-screen scenes paint
   the whole canvas. Look: the site's ("Bloomberg meets Nike") — Big Shoulders numbers, the clubs' colours,
   court lines as the graphic system, amber as the brand light. Motion only when the data moves. */
@font-face{font-family:"HN Display";src:url(/fonts/big-shoulders-display.woff2) format("woff2");font-weight:100 900;font-display:block}
:root{
  --ink:#f4f5f8;--mu:#9aa1ae;--ln:rgba(255,255,255,.1);--glass:rgba(10,12,17,.94);--glass2:rgba(18,21,28,.96);
  --amber:#F5A623;--win:#3ed27e;--loss:#ff6b5e;
  --a:#552583;--ai:#fff;--h:#1d428a;--hi:#fff;
  --disp:"HN Display",Impact,"Arial Narrow",sans-serif;--sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --s:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:1920px;height:1080px;overflow:hidden}
body.bk{background:transparent;color:var(--ink);font:500 20px/1.25 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body.preview.overlay{background:transparent}
#stage{position:absolute;inset:0}
.d{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.88}
.mo{font-family:var(--mono)}
.eb{font-family:var(--mono);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--mu)}
.el{position:absolute;zoom:var(--s)}
svg.ball{display:block;flex:none}
.cr{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.cr::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.demo-tag{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;background:rgba(10,12,17,.86);color:var(--amber);padding:7px 12px;border:1px solid rgba(245,166,35,.45);border-radius:6px;zoom:var(--s)}
.full .demo-tag{top:22px;right:28px}

/* ── motion ─────────────────────────────────────────────────────────────────────────── */
@keyframes in-up{from{opacity:0;transform:translateY(26px)}}
@keyframes in-down{from{opacity:0;transform:translateY(-26px)}}
@keyframes in-left{from{opacity:0;transform:translateX(-40px)}}
@keyframes in-right{from{opacity:0;transform:translateX(40px)}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes pop{0%{transform:scale(1.32);filter:brightness(1.8)}60%{transform:scale(.97)}100%{transform:none;filter:none}}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
@keyframes sheen{0%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes rise{from{transform:scaleY(0)}}
@keyframes draw{from{stroke-dashoffset:var(--len,2000)}}
@keyframes flip-in{from{opacity:0;transform:translateY(100%)}}
@keyframes flare-in{0%{transform:translateY(100%);opacity:0}12%{transform:none;opacity:1}88%{transform:none;opacity:1}100%{transform:translateY(100%);opacity:0}}
@keyframes flare-down{0%{transform:translateY(-100%);opacity:0}12%{transform:none;opacity:1}88%{transform:none;opacity:1}100%{transform:translateY(-100%);opacity:0}}
@keyframes moment{0%{opacity:0;transform:translateY(-30px) scale(.94)}10%{opacity:1;transform:none}86%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-16px) scale(.98)}}
@keyframes count{from{--n:0}}
.chg{animation:pop .7s cubic-bezier(.2,.8,.2,1)}
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:sheen 1.4s .3s ease-out both;pointer-events:none}
.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--loss);box-shadow:0 0 10px var(--loss);animation:pulse 1.3s ease-in-out infinite}

/* ── SCORE BUG ──────────────────────────────────────────────────────────────────────── */
.bug{left:50%;bottom:44px;transform:translateX(-50%);animation:in-up .7s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.bug.p-top{top:36px;bottom:auto;animation-name:in-down}
.bug.p-bl{left:48px;transform:none}.bug.p-br{left:auto;right:48px;transform:none}
.bug.p-tl{left:48px;top:36px;bottom:auto;transform:none;animation-name:in-down}.bug.p-tr{left:auto;right:48px;top:36px;bottom:auto;transform:none;animation-name:in-down}
.bug-row{display:flex;align-items:stretch;height:84px;border-radius:12px;overflow:hidden;background:var(--glass);box-shadow:inset 0 0 0 1px var(--ln),inset 0 1px 0 rgba(255,255,255,.08);position:relative}
.tm{display:flex;align-items:center;gap:14px;padding:0 16px 0 0;min-width:300px;position:relative}
.tm::before{content:"";width:10px;align-self:stretch;background:var(--c)}
.tm .tm-bg{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 42%,transparent),transparent 78%);pointer-events:none}
.tm.h .tm-bg{background:linear-gradient(270deg,color-mix(in srgb,var(--c) 42%,transparent),transparent 78%)}
.tm.h{flex-direction:row-reverse;padding:0 0 0 16px}
.tm.h::before{order:-1}
.tm-id{display:flex;flex-direction:column;gap:4px;position:relative;min-width:84px}
.tm.h .tm-id{align-items:flex-end}
.tm-id b{font:800 40px/.85 var(--disp);letter-spacing:.02em}
.tm-id small{font:600 14px/1 var(--mono);color:var(--mu);letter-spacing:.06em;display:flex;gap:8px;align-items:center}
.tm.h .tm-id small{flex-direction:row-reverse}
.pips{display:inline-flex;gap:3px}.pips i{width:9px;height:4px;border-radius:2px;background:rgba(255,255,255,.75)}.pips i.u{background:rgba(255,255,255,.14)}
.bonus{font:700 11px/1 var(--mono);letter-spacing:.12em;color:#111;background:var(--amber);padding:3px 5px;border-radius:3px}
.tm-sc{font:800 70px/1 var(--disp);min-width:96px;text-align:right;position:relative;letter-spacing:-.01em}
.tm.h .tm-sc{text-align:left}
.tm.lead .tm-sc{color:#fff;text-shadow:0 0 22px color-mix(in srgb,var(--c) 70%,transparent)}
.tm.trail .tm-sc{color:rgba(255,255,255,.8)}
.tm.won .tm-sc{color:#fff}.tm.lost .tm-sc{color:rgba(255,255,255,.55)}
.tm.lost .tm-id b{opacity:.65}
.mid{width:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-left:1px solid var(--ln);border-right:1px solid var(--ln)}
.mid .per{font:800 22px/1 var(--disp);letter-spacing:.06em;color:var(--amber)}
.mid .clk{font:700 30px/1 var(--mono);letter-spacing:-.02em}
.mid .big{font:800 34px/1 var(--disp);letter-spacing:.04em}
.mid .sm{font:600 14px/1 var(--mono);letter-spacing:.1em;color:var(--mu);text-transform:uppercase}
.bug .brand{display:flex;align-items:center;padding:0 14px;border-left:1px solid var(--ln);background:rgba(0,0,0,.25)}
.bug .brand .cr{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;gap:6px}
.wpline{height:6px;display:flex;margin:0 6px;border-radius:0 0 6px 6px;overflow:hidden;background:rgba(10,12,17,.9)}
.wpline i{display:block;height:100%;transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.wpline .wa{background:var(--a)}.wpline .wh{background:var(--h)}
.wplabel{display:flex;justify-content:space-between;padding:5px 14px 0;font:600 12px/1 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.7);text-transform:uppercase;text-shadow:0 1px 3px #000}
.flare-box{position:absolute;left:0;right:0;bottom:100%;height:48px;overflow:hidden;pointer-events:none;margin-bottom:8px}
.p-top .flare-box,.p-tl .flare-box,.p-tr .flare-box{bottom:auto;top:100%;margin:22px 0 0}
.flare{position:absolute;left:50%;bottom:0;transform-origin:bottom;display:flex;align-items:center;gap:12px;height:48px;padding:0 22px 0 0;border-radius:10px;overflow:hidden;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--ln);white-space:nowrap;animation:flare-in 4.6s cubic-bezier(.2,.8,.2,1) both;translate:-50% 0}
.p-top .flare,.p-tl .flare,.p-tr .flare{animation-name:flare-down;bottom:auto;top:0}
.flare .fc{align-self:stretch;width:12px;background:var(--fc,var(--amber))}
.flare b{font:800 30px/1 var(--disp);letter-spacing:.05em}
.flare span{font:600 16px/1 var(--mono);color:var(--mu);letter-spacing:.08em;text-transform:uppercase}

/* ── TICKER (lower third) ───────────────────────────────────────────────────────────── */
.tick{left:48px;right:48px;bottom:40px;height:74px;display:flex;align-items:stretch;border-radius:12px;overflow:hidden;background:var(--glass);box-shadow:inset 0 0 0 1px var(--ln),0 18px 34px rgba(0,0,0,.45);animation:in-up .7s cubic-bezier(.2,.8,.2,1) both}
.tick.p-top{top:36px;bottom:auto;animation-name:in-down}
.tk-score{display:flex;align-items:center;gap:14px;padding:0 22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-right:1px solid var(--ln)}
.tk-score .t{display:flex;align-items:center;gap:9px;font:800 32px/1 var(--disp)}
.tk-score .t i{width:6px;height:30px;border-radius:2px;background:var(--c)}
.tk-score .t em{font-style:normal;font-size:40px}
.tk-score .st{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px}
.tk-score .st b{font:800 18px/1 var(--disp);color:var(--amber);letter-spacing:.06em}
.tk-score .st span{font:700 20px/1 var(--mono)}
.tk-feed{flex:1;position:relative;overflow:hidden}
.tk-item{position:absolute;inset:0;display:flex;align-items:center;gap:16px;padding:0 24px;animation:flip-in .55s cubic-bezier(.2,.8,.2,1) both}
.tk-item .chip{font:800 20px/1 var(--disp);letter-spacing:.06em;padding:7px 10px 6px;border-radius:5px;background:var(--c);color:var(--ci)}
.tk-item .when{font:600 16px/1 var(--mono);color:var(--mu);letter-spacing:.06em;white-space:nowrap}
.tk-item .txt{font:600 25px/1.15 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-item .tag{font:800 20px/1 var(--disp);letter-spacing:.08em;color:#111;background:var(--amber);padding:6px 9px 5px;border-radius:4px;white-space:nowrap}
.tk-item .sc{margin-left:auto;font:700 22px/1 var(--mono);color:var(--mu);white-space:nowrap}
.tk-brand{display:flex;align-items:center;padding:0 20px;border-left:1px solid var(--ln);background:rgba(0,0,0,.25)}

/* ── PANELS (river, leaders, grades) ────────────────────────────────────────────────── */
.panel{width:560px;border-radius:14px;overflow:hidden;background:var(--glass);box-shadow:inset 0 0 0 1px var(--ln),0 20px 40px rgba(0,0,0,.45)}
.panel.p-right{right:48px;top:50%;translate:0 -50%;animation:in-right .7s cubic-bezier(.2,.8,.2,1) both}
.panel.p-left{left:48px;top:50%;translate:0 -50%;animation:in-left .7s cubic-bezier(.2,.8,.2,1) both}
.panel.p-br{right:48px;bottom:150px;animation:in-right .7s cubic-bezier(.2,.8,.2,1) both}
.panel.p-bl{left:48px;bottom:150px;animation:in-left .7s cubic-bezier(.2,.8,.2,1) both}
.ph{position:relative;padding:18px 22px 16px;border-bottom:1px solid var(--ln);background:linear-gradient(120deg,color-mix(in srgb,var(--fc,var(--amber)) 30%,transparent),transparent 70%);overflow:hidden}
.ph::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--fc,var(--amber)),transparent 70%)}
.ph .row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:6px}
.ph h2{font:800 38px/.9 var(--disp);letter-spacing:.02em;text-transform:uppercase}
.ph .rt{font:600 15px/1.2 var(--mono);color:var(--mu);text-align:right}
.pf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 22px 14px;border-top:1px solid var(--ln);font:600 14px/1 var(--mono);color:var(--mu)}
.ct{position:absolute;right:-30px;top:-70px;width:260px;height:240px;opacity:.16;pointer-events:none}
/* river */
.rv-big{display:flex;align-items:baseline;gap:12px}
.rv-big b{font:800 76px/.8 var(--disp)}
.rv-big span{font:800 30px/1 var(--disp);letter-spacing:.04em}
.rv-wrap{padding:18px 22px 6px;position:relative}
.rv-wrap svg{display:block;width:100%;height:190px;overflow:visible}
.rv-wrap .q{stroke:rgba(255,255,255,.12);stroke-dasharray:3 5}
.rv-wrap .m{stroke:rgba(255,255,255,.35)}
.rv-wrap .wl{stroke:#fff;stroke-width:2.6;fill:none;stroke-linejoin:round;stroke-dasharray:var(--len);animation:draw 2.2s cubic-bezier(.3,.7,.2,1) both}
.rv-wrap .dot{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
.rv-ax{display:flex;justify-content:space-between;padding:4px 22px 14px;font:600 13px/1 var(--mono);color:var(--mu);letter-spacing:.12em}
.rv-sides{display:flex;justify-content:space-between;padding:0 22px 14px;font:700 15px/1 var(--mono)}
.rv-sides span{display:flex;align-items:center;gap:8px}.rv-sides i{width:12px;height:12px;border-radius:3px;background:var(--c)}
/* leaders */
.ld-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ld-col{padding:12px 0 6px}
.ld-col+.ld-col{border-left:1px solid var(--ln)}
.ld-th{display:flex;align-items:center;gap:10px;padding:0 18px 10px;font:800 26px/1 var(--disp);letter-spacing:.04em}
.ld-th i{width:8px;height:26px;border-radius:2px;background:var(--c)}
.ld-th small{margin-left:auto;font:700 22px/1 var(--mono);color:var(--mu)}
.ld{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 18px;animation:in-up .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*70ms + 200ms)}
.ld .jn{width:46px;height:46px;border-radius:9px;display:grid;place-items:center;background:var(--c);color:var(--ci);font:800 26px/1 var(--disp)}
.ld .nm{font:800 25px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld .ln{font:600 13.5px/1.2 var(--mono);color:var(--mu);margin-top:5px;white-space:nowrap}
.ld .pt{font:800 46px/.85 var(--disp);text-align:right}
.ld .pt small{display:block;font:600 11px/1 var(--mono);color:var(--mu);letter-spacing:.14em;margin-top:3px}
/* grades */
.gr{display:grid;grid-template-columns:64px 1fr 74px;align-items:center;gap:12px;padding:8px 18px;animation:in-up .5s both;animation-delay:calc(var(--i)*60ms + 200ms)}
.gr .lt{font:800 46px/.85 var(--disp);text-align:center}
.gr .lt.A{color:var(--win)}.gr .lt.B{color:#9be27a}.gr .lt.C{color:var(--amber)}.gr .lt.D,.gr .lt.F{color:var(--loss)}
.gr .nm{font:800 24px/1 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.gr .bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:7px;overflow:hidden}
.gr .bar i{display:block;height:100%;background:var(--c);transform-origin:left;animation:grow .9s cubic-bezier(.2,.8,.2,1) both .3s}
.gr .n{font:600 14px/1.2 var(--mono);color:var(--mu);text-align:right}
.cta{display:flex;align-items:center;gap:16px;padding:14px 18px 16px;border-top:1px solid var(--ln);background:rgba(255,255,255,.03)}
.cta img,.cta .qr{width:104px;height:104px;border-radius:8px;background:#fff;padding:6px;flex:none}
.cta b{display:block;font:800 30px/.95 var(--disp);text-transform:uppercase;letter-spacing:.02em}
.cta span{display:block;font:600 15px/1.3 var(--mono);color:var(--amber);margin-top:6px;word-break:break-all}
.empty{padding:26px 22px;font:600 18px/1.4 var(--sans);color:var(--mu)}

/* ── MOMENTS ────────────────────────────────────────────────────────────────────────── */
.mom{left:50%;top:120px;translate:-50% 0;display:flex;align-items:stretch;min-width:720px;border-radius:16px;overflow:hidden;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--ln),0 30px 60px rgba(0,0,0,.5);animation:moment 5.2s cubic-bezier(.2,.8,.2,1) both}
.mom .bar{width:16px;background:var(--fc)}
.mom .body{padding:22px 32px 22px 26px;flex:1;position:relative;overflow:hidden}
.mom .body::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,color-mix(in srgb,var(--fc) 34%,transparent),transparent 65%)}
.mom .k{position:relative;font:600 16px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
.mom .h{position:relative;font:800 86px/.86 var(--disp);text-transform:uppercase;letter-spacing:.01em;margin-top:10px}
.mom .s{position:relative;font:600 22px/1.25 var(--sans);color:rgba(255,255,255,.82);margin-top:10px}
.mom .sc{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 30px;border-left:1px solid var(--ln);font:800 52px/1 var(--disp);background:rgba(0,0,0,.25)}
.mom .sc small{font:600 15px/1 var(--mono);color:var(--mu);letter-spacing:.14em;margin-top:6px}

/* ── FULL-SCREEN SCENES ─────────────────────────────────────────────────────────────── */
.fs{position:absolute;inset:0;background:#07090d;overflow:hidden;isolation:isolate}
.fs .glow-a{position:absolute;left:-260px;top:-200px;width:1100px;height:1100px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--a) 62%,transparent),transparent 62%);opacity:.55;z-index:-1}
.fs .glow-h{position:absolute;right:-260px;bottom:-300px;width:1100px;height:1100px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--h) 62%,transparent),transparent 62%);opacity:.55;z-index:-1}
.fs .court{position:absolute;left:50%;top:50%;width:1500px;height:1410px;translate:-50% -46%;opacity:.07;z-index:-1}
.fs .grain{position:absolute;inset:0;z-index:-1;opacity:.12;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>")}
.fs .top{position:absolute;left:80px;right:80px;top:64px;display:flex;justify-content:space-between;align-items:flex-start;animation:in-down .8s both}
.fs .top .eb{font-size:18px}
.fs .top h1{font:800 64px/.9 var(--disp);text-transform:uppercase;letter-spacing:.02em;margin-top:10px}
.fs .top .rt{text-align:right}
.fs .foot{position:absolute;left:80px;right:80px;bottom:52px;display:flex;justify-content:space-between;align-items:center;font:600 17px/1.3 var(--mono);color:var(--mu);animation:in-up .8s .3s both}
.fs .foot .cr{font-size:15px}
.cam-hole{position:absolute;width:640px;height:360px;top:200px;border-radius:14px;box-shadow:0 0 0 2px rgba(255,255,255,.5),0 0 0 9999px transparent}
.cam-left .cam-hole{left:80px}.cam-right .cam-hole{right:80px}
.cam-left .fs,.cam-right .fs{-webkit-mask:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%,640px 360px}
.cam-left .fs{-webkit-mask-position:0 0,80px 200px}
.cam-right .fs{-webkit-mask-position:0 0,1200px 200px}
.cam-tag{position:absolute;top:572px;font:600 14px/1 var(--mono);letter-spacing:.16em;color:var(--mu);text-transform:uppercase}
.cam-left .cam-tag{left:80px}.cam-right .cam-tag{right:80px}
/* matchup */
.vs{position:absolute;left:80px;right:80px;top:250px;display:grid;grid-template-columns:1fr 180px 1fr;align-items:center}
.cam-left .vs,.cam-right .vs{top:610px}
.vs .side{display:flex;align-items:center;gap:30px;animation:in-left .9s .1s both}
.vs .side.h{flex-direction:row-reverse;text-align:right;animation-name:in-right}
.vs .side .nm{font:800 150px/.8 var(--disp);letter-spacing:.01em}
.vs .side .sub{font:600 22px/1.3 var(--mono);color:var(--mu);margin-top:12px;letter-spacing:.06em}
.vs .side .sub b{color:#fff}
.vs .at{text-align:center;font:800 54px/1 var(--disp);color:var(--amber)}
.vs .at small{display:block;font:600 16px/1.3 var(--mono);color:var(--mu);letter-spacing:.14em;margin-top:8px}
.cam-left .vs .side .nm,.cam-right .vs .side .nm{font-size:110px}
/* countdown */
.cd{text-align:right}
.cd .n{font:800 110px/.8 var(--disp);letter-spacing:.02em;color:#fff}
.cd .l{font:600 17px/1 var(--mono);letter-spacing:.2em;color:var(--amber);text-transform:uppercase;margin-bottom:12px}
/* tale of the tape */
.tape{position:absolute;left:80px;right:80px;top:560px;display:grid;grid-template-columns:1.25fr 1fr;gap:44px;animation:in-up .9s .25s both}
.cam-left .tape,.cam-right .tape{display:none}
.pg-strip{display:none}
.cam-left .pg-strip,.cam-right .pg-strip{display:grid;position:absolute;left:80px;right:80px;top:820px;grid-template-columns:1fr 1fr 1fr;gap:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);animation:in-up .9s .3s both}
.pg-strip h3{margin:0 0 10px;font:600 15px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--c,var(--amber))}
.pg-strip p{margin:0;font:600 22px/1.35 var(--sans);color:#fff}
.pg-strip small{display:block;font:600 15px/1.4 var(--mono);color:var(--mu);margin-top:4px;letter-spacing:.06em}
.pg-strip .pm{text-align:center}.pg-strip>div:last-child{text-align:right}
.tape-rows{display:flex;flex-direction:column;gap:14px}
.tr{display:grid;grid-template-columns:120px 1fr 190px 1fr 120px;align-items:center;gap:16px}
.tr .v{font:800 40px/1 var(--disp)}
.tr .v.h{text-align:right}
.tr .v small{display:block;font:600 13px/1 var(--mono);color:var(--mu);margin-top:4px;letter-spacing:.08em}
.tr .lab{text-align:center;font:600 15px/1.2 var(--mono);letter-spacing:.16em;color:var(--mu);text-transform:uppercase}
.tr .b{height:12px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;display:flex}
.tr .b.a{justify-content:flex-end}
.tr .b i{display:block;height:100%;border-radius:6px;background:var(--c);transform-origin:var(--o);animation:grow 1s cubic-bezier(.2,.8,.2,1) both .6s}
.tr .b i.best{box-shadow:0 0 14px var(--c)}
.outs{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-content:start}
.outs h3{display:flex;align-items:center;gap:10px;font:800 26px/1 var(--disp);letter-spacing:.05em;padding-bottom:10px;border-bottom:2px solid var(--c);margin-bottom:10px}
.outs li{list-style:none;display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--ln);font:600 18px/1.2 var(--sans)}
.outs li span{font:700 14px/1.3 var(--mono);color:var(--loss);text-transform:uppercase;white-space:nowrap}
.outs li span.q{color:var(--amber)}
.outs .none{font:600 17px/1.3 var(--mono);color:var(--mu)}
/* box */
.bx-score{position:absolute;left:80px;right:80px;top:200px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px;animation:in-up .8s .1s both}
.bx-score .t{display:flex;align-items:center;gap:22px}
.bx-score .t.h{flex-direction:row-reverse}
.bx-score .t b{font:800 84px/.85 var(--disp)}
.bx-score .t em{font:800 128px/.8 var(--disp);font-style:normal;margin-left:auto}
.bx-score .t.h em{margin-left:0;margin-right:auto}
.bx-score .t.lost em,.bx-score .t.lost b{opacity:.55}
.cam-right .bx-score{right:760px;gap:24px}.cam-left .bx-score{left:760px;gap:24px}
.cam-left .bx-score .t em,.cam-right .bx-score .t em{font-size:100px}.cam-left .bx-score .t b,.cam-right .bx-score .t b{font-size:60px}
.qt{border-collapse:collapse;font:700 22px/1 var(--mono)}
.qt th{font:600 13px/1 var(--mono);color:var(--mu);letter-spacing:.14em;padding:0 12px 8px;font-weight:600}
.qt td{padding:7px 12px;text-align:center;border-top:1px solid var(--ln)}
.qt td:first-child{font:800 22px/1 var(--disp);text-align:left;letter-spacing:.05em}
.qt td.tot{font:800 28px/1 var(--disp);color:var(--amber)}
.bx-teams{position:absolute;left:80px;right:80px;top:390px;display:grid;grid-template-columns:1fr 1fr;gap:44px;animation:in-up .8s .25s both}
.cam-left .bx-teams,.cam-right .bx-teams{top:600px;grid-template-columns:1fr 1fr}
.bt h3{display:flex;align-items:center;gap:12px;font:800 30px/1 var(--disp);letter-spacing:.05em;padding-bottom:10px;border-bottom:3px solid var(--c)}
.bt table{width:100%;border-collapse:collapse;margin-top:6px}
.bt th{font:600 13px/1 var(--mono);color:var(--mu);letter-spacing:.14em;text-align:right;padding:8px 6px}
.bt th:first-child{text-align:left}
.bt td{font:600 21px/1 var(--mono);text-align:right;padding:9px 6px;border-bottom:1px solid var(--ln)}
.bt td:first-child{text-align:left;font:800 24px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.bt td:first-child i{font-style:normal;display:inline-block;min-width:38px;color:var(--c)}
.bt td.pts{font:800 28px/1 var(--disp);color:#fff}
.bt tr.lead td.pts{color:var(--amber)}
.cam-left .bt tr:nth-child(n+6),.cam-right .bt tr:nth-child(n+6){display:none}
.cmp{position:absolute;left:80px;right:80px;bottom:120px;display:grid;grid-template-columns:repeat(6,1fr);gap:22px;animation:in-up .8s .4s both}
.cam-left .cmp,.cam-right .cmp{display:none}
.cm{display:flex;flex-direction:column;gap:8px}
.cm .lab{font:600 13px/1 var(--mono);letter-spacing:.16em;color:var(--mu);text-transform:uppercase;text-align:center}
.cm .vals{display:flex;justify-content:space-between;font:800 30px/1 var(--disp)}
.cm .split{display:flex;height:9px;border-radius:5px;overflow:hidden;gap:3px}
.cm .split i{display:block;height:100%;animation:grow 1s both .7s}
.cm .split i.a{background:var(--a);transform-origin:right}.cm .split i.h{background:var(--h);transform-origin:left}
/* final */
.fn-hero{position:absolute;left:80px;right:80px;top:210px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px}
.cam-left .fn-hero,.cam-right .fn-hero{top:600px}
.fn-hero .t{display:flex;align-items:center;gap:26px;animation:in-left .9s .1s both}
.fn-hero .t.h{flex-direction:row-reverse;animation-name:in-right}
.fn-hero .t b{font:800 92px/.85 var(--disp)}
.fn-hero .t small{display:block;font:600 18px/1.2 var(--mono);color:var(--mu);margin-top:8px}
.fn-hero .t em{font:800 190px/.78 var(--disp);font-style:normal;margin-left:auto}
.fn-hero .t.h em{margin:0 auto 0 0}
.fn-hero .t.won em{color:#fff;text-shadow:0 0 50px color-mix(in srgb,var(--c) 75%,transparent)}
.fn-hero .t.lost{opacity:.5}
.fn-hero .mid2{text-align:center}
.fn-hero .mid2 b{display:block;font:800 60px/1 var(--disp);color:var(--amber);letter-spacing:.06em}
.fn-row{position:absolute;left:80px;right:80px;top:540px;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:36px;animation:in-up .9s .3s both}
.cam-left .fn-row,.cam-right .fn-row{display:none}
.card{border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--ln);padding:24px 26px;position:relative;overflow:hidden}
.card .eb{margin-bottom:14px}
.potg{display:flex;gap:24px;align-items:center}
.potg .jn{width:150px;height:150px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 45%,#000));color:var(--ci);font:800 92px/1 var(--disp);flex:none;box-shadow:0 18px 40px color-mix(in srgb,var(--c) 40%,transparent)}
.potg .nm{font:800 56px/.88 var(--disp);text-transform:uppercase}
.potg .tm2{font:600 16px/1 var(--mono);color:var(--mu);margin-top:8px;letter-spacing:.1em}
.potg .stat{display:flex;gap:22px;margin-top:16px}
.potg .stat div{font:800 48px/.85 var(--disp)}
.potg .stat small{display:block;font:600 12px/1 var(--mono);color:var(--mu);letter-spacing:.16em;margin-top:5px}
.kn{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.kn div b{display:block;font:800 52px/.85 var(--disp)}
.kn div small{display:block;font:600 13px/1.25 var(--mono);color:var(--mu);letter-spacing:.1em;margin-top:6px;text-transform:uppercase}
.nx b{display:block;font:800 46px/.9 var(--disp);text-transform:uppercase}
.nx span{display:block;font:600 18px/1.3 var(--mono);color:var(--mu);margin-top:10px}
.nx .cta{margin:22px -26px -24px;padding:16px 26px}
.nx .cta .qr{width:92px;height:92px}
.nx .cta b{font-size:24px}
.ld .nm.lg{font-size:19px;letter-spacing:0}

.steady{animation:none!important}

/* ══ KIT 2 (25/10/2026) ═══════════════════════════════════════════════════════════════════ */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes timer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes sweep{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(220%) skewX(-20deg)}}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes hot{0%,100%{color:#fff;text-shadow:0 0 40px rgba(245,166,35,.25)}50%{color:var(--amber);text-shadow:0 0 70px rgba(245,166,35,.6)}}
@keyframes card-in{0%{opacity:0;transform:translateX(-60px)}100%{opacity:1;transform:none}}
@keyframes alert{0%,100%{box-shadow:inset 0 0 0 1px var(--ln),0 20px 40px rgba(0,0,0,.45),0 0 0 0 rgba(255,77,77,0)}50%{box-shadow:inset 0 0 0 1px var(--ln),0 20px 40px rgba(0,0,0,.45),0 0 0 6px rgba(255,77,77,.35)}}

/* ── AROUND THE LEAGUE ─────────────────────────────────────────────────────────────────── */
.lg{left:0;right:0;bottom:0;height:42px;display:flex;align-items:stretch;background:rgba(7,9,13,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);animation:in-up .7s cubic-bezier(.2,.8,.2,1) both}
.lg.p-top{top:0;bottom:auto;box-shadow:inset 0 -1px 0 rgba(255,255,255,.1);animation-name:in-down}
.lg-lab{display:flex;align-items:center;gap:12px;padding:0 30px 0 22px;background:linear-gradient(90deg,var(--amber),#e08a00);color:#111;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.lg-lab b{font:800 22px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.lg-lab span{font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.lg-view{flex:1;overflow:hidden;position:relative;-webkit-mask:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.lg-track{display:flex;align-items:stretch;height:100%;width:max-content;animation:marquee calc(var(--n,6)*7s) linear infinite}
.lg-track.still{animation:none;width:auto;justify-content:center}
.lg-g{display:flex;align-items:center;gap:14px;padding:0 22px;border-right:1px solid rgba(255,255,255,.08);white-space:nowrap}
.lg-t{display:flex;align-items:center;gap:7px}
.lg-t i{width:5px;height:22px;border-radius:2px}
.lg-t b{font:800 22px/1 var(--disp);letter-spacing:.04em}
.lg-t em{font:800 24px/1 var(--disp);font-style:normal;min-width:30px;text-align:right}
.lg-t.l{opacity:.55}
.lg-s{display:flex;align-items:center;gap:7px;font:700 13px/1 var(--mono);letter-spacing:.08em;color:var(--mu);text-transform:uppercase}
.lg-s .live-dot{width:8px;height:8px}
.lg-s u{text-decoration:none;color:#111;background:var(--loss);padding:3px 5px;border-radius:3px;font-size:11px;letter-spacing:.12em}
.lg-s small{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.06em}
.lg-g.live .lg-s{color:#fff}
.lg-g.me{background:linear-gradient(180deg,rgba(245,166,35,.16),rgba(245,166,35,.04));box-shadow:inset 0 -2px 0 var(--amber)}
.lg-g.close .lg-s u{animation:pulse 1.3s ease-in-out infinite}
.lg-cr{display:flex;align-items:center;padding:0 18px;border-left:1px solid rgba(255,255,255,.08)}
.lg-cr .cr{font-size:10.5px}

/* ── REMOTE CARDS ──────────────────────────────────────────────────────────────────────── */
.rc{left:48px;bottom:170px;min-width:600px;max-width:880px;border-radius:16px;overflow:hidden;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--ln),0 24px 50px rgba(0,0,0,.5);animation:card-in .6s cubic-bezier(.2,.8,.2,1) both}
.rc-pl{display:flex;align-items:stretch}
.rc-jn{width:170px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 45%,#000));color:var(--ci);position:relative;overflow:hidden}
.rc-jn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);animation:sweep 1.2s .4s ease-out both}
.rc-jn span{font:800 110px/.8 var(--disp)}
.rc-jn small{font:800 22px/1 var(--disp);letter-spacing:.1em;opacity:.85}
.rc-jn.sm{width:120px;align-self:stretch;border-radius:12px}
.rc-jn.sm span{font-size:72px}
.rc-body{padding:20px 28px 22px;min-width:0;flex:1;position:relative}
.rc-body::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,color-mix(in srgb,var(--c) 26%,transparent),transparent 60%);pointer-events:none}
.rc-eb{position:relative;font:600 15px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.rc-nm{position:relative;font:800 66px/.9 var(--disp);text-transform:uppercase;letter-spacing:.01em;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-st{position:relative;display:flex;gap:28px;margin-top:14px}
.rc-st div b{display:block;font:800 52px/.85 var(--disp)}
.rc-st div small{display:block;font:600 12px/1 var(--mono);letter-spacing:.16em;color:var(--mu);margin-top:6px}
.rc-note{position:relative;margin-top:12px;font:600 21px/1.25 var(--sans);color:rgba(255,255,255,.88)}
.rc-timer{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c,var(--fc,var(--amber)));transform-origin:left;animation:timer linear both}
.rc-inj{animation:card-in .6s cubic-bezier(.2,.8,.2,1) both,alert 1.6s ease-in-out 3 .6s}
.rc-flag{display:flex;align-items:center;gap:10px;padding:10px 22px;background:linear-gradient(90deg,#ff4d4d,#c81e1e);font:800 24px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.rc-flag::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:4px;background:#fff;color:#c81e1e;font:900 22px/1 var(--sans)}
.rc-inj.good .rc-flag{background:linear-gradient(90deg,#2fb86c,#1d8a4f)}.rc-inj.good .rc-flag::before{color:#1d8a4f}
.rc-inj.good{animation:card-in .6s cubic-bezier(.2,.8,.2,1) both}
.rc-row{display:flex;align-items:stretch;padding:14px 0 14px 14px}
.rc-inj .rc-nm{font-size:54px;margin-top:0}
.rc-status{position:relative;display:inline-block;margin-top:12px;font:800 30px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase;color:#ff7a70}
.rc-inj.good .rc-status{color:var(--win)}
.rc-msg{left:50%;bottom:170px;translate:-50% 0;min-width:820px;max-width:1500px;display:flex;align-items:stretch;border-radius:16px;overflow:hidden;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--ln),0 24px 50px rgba(0,0,0,.5);animation:in-up .6s cubic-bezier(.2,.8,.2,1) both}
.rc-msg .bar{width:16px;flex:none;background:var(--fc)}
.rc-mb{flex:1;padding:20px 30px 22px 26px;position:relative;overflow:hidden}
.rc-mb::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,color-mix(in srgb,var(--fc) 32%,transparent),transparent 65%)}
.rc-mb .h{position:relative;font:800 64px/.92 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.rc-mb .s{position:relative;font:600 24px/1.25 var(--sans);color:rgba(255,255,255,.86);margin-top:10px}
.rc-mcr{display:flex;align-items:flex-end;padding:0 18px 16px;background:rgba(0,0,0,.2)}
.rc-msg.tone-alert{animation:in-up .6s cubic-bezier(.2,.8,.2,1) both,alert 1.6s ease-in-out 3 .6s}
.rc-msg .rc-timer{background:var(--fc)}
.rc-panel{left:48px;top:50%;translate:0 -50%;animation:in-left .7s cubic-bezier(.2,.8,.2,1) both}
.rc-tb{padding:8px 0}
.rc-tr{display:grid;grid-template-columns:44px 64px 1fr 76px 64px;align-items:center;gap:8px;padding:7px 22px;animation:in-up .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*55ms + 250ms)}
.rc-tr.bd{grid-template-columns:44px 1fr 70px 120px}
.rc-tr .rk{font:700 18px/1 var(--mono);color:var(--mu)}
.rc-tr b{font:800 28px/1 var(--disp);letter-spacing:.04em}
.rc-tr b.nk{font:700 24px/1 var(--sans);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-tr .nm{font:600 17px/1 var(--sans);color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-tr .wl{font:800 28px/1 var(--disp);text-align:right}
.rc-tr .sk{font:600 14px/1 var(--mono);color:var(--mu);text-align:right}
.rc-tr.me{background:linear-gradient(90deg,rgba(245,166,35,.22),rgba(245,166,35,.04));box-shadow:inset 4px 0 0 var(--amber)}
.rc-tr.me .rk{color:var(--amber)}
.rc-tr.cut{border-bottom:2px dashed rgba(255,255,255,.18)}
.rc-key{display:flex;gap:22px;padding:4px 22px 10px;font:600 13px/1 var(--mono);color:var(--mu);letter-spacing:.06em}
.rc-key i{display:inline-block;width:18px;height:0;border-bottom:2px dashed rgba(255,255,255,.35);vertical-align:middle;margin-right:7px}
/* predictions */
.pd{right:48px;top:40px;width:520px;border-radius:16px;overflow:hidden;background:var(--glass2);box-shadow:inset 0 0 0 1px var(--ln),0 24px 50px rgba(0,0,0,.5);animation:in-right .7s cubic-bezier(.2,.8,.2,1) both}
.pd-h{padding:18px 22px 14px;background:linear-gradient(120deg,rgba(245,166,35,.28),transparent 70%);border-bottom:1px solid var(--ln);position:relative}
.pd-h::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--amber),transparent 70%)}
.pd-eb{display:flex;align-items:center;gap:9px;font:700 14px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.pd.locked .pd-eb{color:#9fb4ff}.pd.resolved .pd-eb{color:var(--win)}.pd.void .pd-eb{color:var(--mu)}
.pd-q{font:800 40px/.95 var(--disp);text-transform:uppercase;letter-spacing:.01em;margin-top:10px}
.pd-os{padding:14px 22px 4px;display:flex;flex-direction:column;gap:12px}
.pd-l{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pd-l b{font:800 30px/1 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.pd-l span{font:800 34px/1 var(--disp)}
.pd-bar{height:12px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}
.pd-bar i{display:block;height:100%;border-radius:6px;background:var(--c);transition:width 1.2s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 14px color-mix(in srgb,var(--c) 60%,transparent)}
.pd-o.right .pd-l b,.pd-o.right .pd-l span{color:var(--win)}
.pd-o.right .pd-bar i{background:var(--win)}
.pd-o.wrong{opacity:.42}
.pd-n{padding:6px 22px 12px;font:600 14px/1 var(--mono);color:var(--mu);letter-spacing:.08em;text-transform:uppercase}
.pd-cta{display:flex;align-items:center;gap:16px;padding:14px 22px 16px;border-top:1px solid var(--ln);background:rgba(255,255,255,.03)}
.pd-cta .qr{width:112px;height:112px;border-radius:8px;background:#fff;padding:6px;flex:none}
.pd-cta b{display:block;font:800 32px/.95 var(--disp);text-transform:uppercase}
.pd-cta span{display:block;font:600 17px/1.3 var(--sans);color:#fff;margin-top:6px}
.pd-cta em{font-style:normal;font-family:var(--mono);color:var(--amber);font-weight:700}
.pd-cta small{display:block;font:600 13px/1.3 var(--mono);color:var(--mu);margin-top:6px;letter-spacing:.06em}
.pd-foot{padding:14px 22px 16px;border-top:1px solid var(--ln);font:600 20px/1.2 var(--sans);color:var(--mu)}
.pd-foot b{font:800 40px/1 var(--disp);color:#fff;margin-right:4px}
.pd.resolved .pd-foot b{color:var(--win)}
.pd-cr{display:flex;justify-content:flex-end;padding:0 22px 12px}
/* be right back */
.rc-brb{position:absolute;inset:0;background:#07090d;overflow:hidden;isolation:isolate}
.rc-brb .glow-a{position:absolute;left:-260px;top:-200px;width:1100px;height:1100px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--a) 62%,transparent),transparent 62%);opacity:.55;z-index:-1;animation:breathe 6s ease-in-out infinite}
.rc-brb .glow-h{position:absolute;right:-260px;bottom:-300px;width:1100px;height:1100px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--h) 62%,transparent),transparent 62%);opacity:.55;z-index:-1;animation:breathe 6s 3s ease-in-out infinite}
.rc-brb .court{position:absolute;left:50%;top:50%;width:1500px;height:1410px;translate:-50% -46%;opacity:.07;z-index:-1}
.rc-brb .grain{position:absolute;inset:0;z-index:-1;opacity:.12;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>")}
.brb-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;animation:in-up .8s cubic-bezier(.2,.8,.2,1) both}
.brb-in .eb{font-size:20px;color:var(--amber)}
.brb-in h1{font:800 170px/.84 var(--disp);text-transform:uppercase;letter-spacing:.01em;max-width:1600px}
.brb-cd{font:800 150px/.8 var(--disp);letter-spacing:.02em;color:#fff;margin-top:10px}
.brb-eq{display:flex;gap:10px;height:70px;align-items:flex-end;margin-top:10px}
.brb-eq i,.in-eq i{width:12px;height:100%;border-radius:3px;background:var(--amber);transform-origin:bottom;animation:eq 1.1s ease-in-out infinite}
.brb-eq i:nth-child(2),.in-eq i:nth-child(2){animation-delay:-.3s}.brb-eq i:nth-child(3),.in-eq i:nth-child(3){animation-delay:-.6s}.brb-eq i:nth-child(4),.in-eq i:nth-child(4){animation-delay:-.15s}.brb-eq i:nth-child(5),.in-eq i:nth-child(5){animation-delay:-.75s}.in-eq i:nth-child(6){animation-delay:-.45s}.in-eq i:nth-child(7){animation-delay:-.9s}
.brb-mw{display:flex;align-items:center;gap:12px;margin-top:24px;padding:14px 26px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--ln);font:700 26px/1 var(--mono);letter-spacing:.04em}
.brb-foot{position:absolute;left:0;right:0;bottom:52px;display:flex;justify-content:center}
.brb-foot .cr{font-size:15px}

/* ── STARTING SOON ─────────────────────────────────────────────────────────────────────── */
.fs.in .glow-a,.fs.in .glow-h{animation:breathe 7s ease-in-out infinite}
.fs.in .glow-h{animation-delay:3.5s}
.in-sweep{position:absolute;top:-10%;bottom:-10%;left:0;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:sweep 9s linear infinite;z-index:-1}
.in-top{position:absolute;left:80px;right:80px;top:64px;display:flex;justify-content:space-between;align-items:center;animation:in-down .8s both}
.in-top .eb{font-size:18px}
.in-eq{display:flex;gap:6px;height:34px;align-items:flex-end;opacity:.35}
.in-eq i{width:7px}
.in-eq.on{opacity:1}
.in-eq:not(.on) i{animation-play-state:paused}
.in-main{position:absolute;left:80px;right:80px;top:190px;display:flex;flex-direction:column;align-items:center;text-align:center}
.in-main h1{font:800 120px/.86 var(--disp);text-transform:uppercase;letter-spacing:.015em;animation:in-up .9s .1s both}
.in-cd{font:800 280px/.8 var(--disp);letter-spacing:.01em;margin-top:30px;color:#fff;text-shadow:0 0 50px rgba(245,166,35,.22);animation:in-up .9s .2s both}
.in-cd.hot{animation:hot 1s ease-in-out infinite}
.in-cd.go{color:var(--amber);animation:pulse 1.2s ease-in-out infinite}
.in-vs{display:flex;align-items:center;gap:34px;margin-top:40px;animation:in-up .9s .3s both}
.in-m b{display:block;font:800 92px/.85 var(--disp);letter-spacing:.02em}
.in-m b em{font-style:normal;color:var(--mu);font-size:46px;vertical-align:middle;margin:0 10px}
.in-m small{display:block;font:600 20px/1.2 var(--mono);color:var(--mu);margin-top:10px;letter-spacing:.08em}
.in-tz{position:absolute;left:80px;right:80px;bottom:110px;padding:22px 30px;border-radius:16px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--ln),inset 6px 0 0 var(--c);animation:flip-in .6s cubic-bezier(.2,.8,.2,1) both;overflow:hidden}
.in-tz .k{font:600 15px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--c)}
.in-tz .h{font:800 54px/.92 var(--disp);text-transform:uppercase;margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.in-tz .s{font:600 20px/1.3 var(--mono);color:var(--mu);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs.in .foot span{display:flex;gap:8px}
.dt{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.dt.on{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.cam-left .in-main{left:780px;right:80px}
.cam-right .in-main{left:80px;right:780px}
.cam-left .in-main h1,.cam-right .in-main h1{font-size:88px}
.cam-left .in-cd,.cam-right .in-cd{font-size:200px}
.cam-left .in-vs,.cam-right .in-vs{display:none}

/* ══ VERTICAL 9:16 (&v=1): 1080×1920, for Shorts / TikTok / Reels lives ═══════════════════ */
html.vert,html.vert body{width:1080px;height:1920px}
/* overlays */
.vert .bug{bottom:120px}
.vert .bug .tm{min-width:0}
.vert .tick{left:32px;right:32px;top:60px;bottom:auto;animation-name:in-down}
.vert .tick .tk-brand{display:none}
.vert .tk-item .txt{font-size:22px}
.vert .panel.p-right,.vert .panel.p-left,.vert .panel.p-br,.vert .panel.p-bl{left:50%;right:auto;top:auto;bottom:330px;translate:-50% 0;width:980px}
.vert .mom{top:200px;min-width:0;width:980px}
.vert .mom .h{font-size:72px}
.vert .lg-lab b{font-size:18px}.vert .lg-lab span{display:none}.vert .lg-cr{display:none}
.vert .rc{left:50%;translate:-50% 0;bottom:330px;min-width:0;width:980px;max-width:none;animation-name:in-up}
.vert .rc-nm{font-size:58px}
.vert .rc-msg{width:980px;min-width:0;bottom:330px}
.vert .rc-mb .h{font-size:56px}
.vert .rc-panel{left:50%;top:200px;translate:-50% 0;width:980px;animation-name:in-up}
.vert .pd{left:50%;right:auto;translate:-50% 0;top:200px;width:980px;animation-name:in-down}
.vert .pd-q{font-size:46px}
/* full-screen scenes */
.vert .fs .top{left:60px;right:60px;top:70px;flex-direction:column;gap:24px;z-index:2}
.vert .fs .top .rt{text-align:left}
.vert .cd{text-align:left}
.vert .fs .top h1{font-size:60px}
.vert .fs .foot{left:60px;right:60px;bottom:60px}
.vert .fs .court{width:1300px;height:1222px}
.vert .fs .glow-a{left:-400px;top:-300px}.vert .fs .glow-h{right:-400px;bottom:-200px}
.vert .vs{left:60px;right:60px;top:430px;grid-template-columns:1fr;gap:26px}
.vert .vs .side,.vert .vs .side.h{flex-direction:row;text-align:left}
.vert .vs .side .nm{font-size:120px}
.vert .vs .at{text-align:left;padding-left:200px;font-size:44px}
.vert .vs .at small{display:inline;margin-left:14px}
.vert .vs svg.ball{width:150px;height:150px}
.vert .tape{left:60px;right:60px;top:1010px;grid-template-columns:1fr;gap:40px}
.vert .tr{grid-template-columns:100px 1fr 150px 1fr 100px;gap:12px}
.vert .tr .v{font-size:34px}
.vert .cd .n{font-size:96px}
.vert .bx-score{left:60px;right:60px;top:220px;grid-template-columns:1fr 1fr;gap:24px 30px}
.vert .bx-score .qt{grid-column:1/-1;grid-row:2;justify-self:center}
.vert .bx-score .t.h{grid-column:2;grid-row:1}
.vert .bx-score .t em{font-size:110px}.vert .bx-score .t b{font-size:64px}
.vert .bx-score svg.ball{width:76px;height:76px}
.vert .bx-teams{left:60px;right:60px;top:560px;grid-template-columns:1fr;gap:34px}
.vert .cmp{left:60px;right:60px;bottom:130px;grid-template-columns:repeat(3,1fr);gap:26px 30px}
.vert .fn-hero{left:60px;right:60px;top:240px;grid-template-columns:1fr 1fr;gap:30px}
.vert .fn-hero .mid2{grid-column:1/-1;grid-row:2}
.vert .fn-hero .t.h{grid-column:2;grid-row:1}
.vert .fn-hero .t{flex-direction:column;align-items:flex-start;gap:12px}
.vert .fn-hero .t.h{flex-direction:column;align-items:flex-end;text-align:right}
.vert .fn-hero .t em{font-size:160px;margin:0}
.vert .fn-hero .t.h em{margin:0}
.vert .fn-hero svg.ball{width:100px;height:100px}
.vert .fn-row{left:60px;right:60px;top:920px;grid-template-columns:1fr;gap:26px}
.vert .in-top{left:60px;right:60px}
.vert .in-main{left:60px;right:60px;top:300px}
.vert .in-main h1{font-size:118px}
.vert .in-cd{font-size:250px;margin-top:60px}
.vert .in-vs{margin-top:90px;flex-wrap:wrap;justify-content:center}
.vert .in-m b{font-size:80px}
.vert .in-tz{left:60px;right:60px;bottom:150px}
.vert .in-tz .h{font-size:46px;white-space:normal}
.vert .in-tz .s{white-space:normal}
.vert .brb-in h1{font-size:130px;max-width:960px}
.vert .brb-cd{font-size:130px}
.vert .brb-mw{font-size:22px}
/* the camera hole goes on top, full width, in vertical */
.vert .cam-hole{left:60px;right:auto;top:170px;width:960px;height:540px}
.vert.cam-left .fs,.vert.cam-right .fs{-webkit-mask-size:100% 100%,960px 540px;-webkit-mask-position:0 0,60px 170px}
.vert .cam-tag{top:722px;left:60px;right:auto}
.vert.cam-left .fs .top .rt,.vert.cam-right .fs .top .rt{display:none}
.vert.cam-left .fs .top,.vert.cam-right .fs .top{top:60px}
.vert.cam-left .fs .top h1,.vert.cam-right .fs .top h1{font-size:44px}
.vert.cam-left .vs,.vert.cam-right .vs{top:800px}
.vert.cam-left .pg-strip,.vert.cam-right .pg-strip{left:60px;right:60px;top:1420px;grid-template-columns:1fr;gap:26px}
.vert.cam-left .pg-strip>div,.vert.cam-right .pg-strip>div{text-align:left}
.vert.cam-left .bx-score,.vert.cam-right .bx-score{left:60px;right:60px;top:790px}
.vert.cam-left .bx-teams,.vert.cam-right .bx-teams{top:1120px}
.vert.cam-left .fn-hero,.vert.cam-right .fn-hero{top:790px}
.vert.cam-left .in-main,.vert.cam-right .in-main{left:60px;right:60px;top:790px}
.vert.cam-left .in-cd,.vert.cam-right .in-cd{font-size:200px}