/* Late Overs - the Matchday app's look (tools/labdash/full.html, MONOCHROME 2026-09-26): a black band holds the brand, the hero and its
   controls; a white sheet with rounded top corners holds the cards; a white tab bar on a phone, pills in the band on a desktop. Colour only
   where it carries meaning: green for a play / a win, red for a loss and the LIVE pill. Auto dark mode follows the device; the sun button
   picks Light or Dark on this device. */
:root{color-scheme:light;--ink:#0b0b0b;--ink2:#1a1a1a;--inkline:#ffffff26;--inkmuted:#a3a3a3;--paper:#fff;--txt:#111;--muted:#6b6b6b;--line:#ececec;--soft:#f4f4f4;--profit:#12a150;--loss:#e5484d;--up:var(--profit);--down:var(--loss);--live:#e5484d;--card:#fff;--glow:#12a15040}
:root[data-theme=dark]{color-scheme:dark;--paper:#121212;--txt:#ededed;--muted:#9b9b9b;--line:#262626;--soft:#1e1e1e;--profit:#2fc66f;--loss:#ff6b6f;--live:#ff5a5f;--card:#181818;--glow:#2fc66f40}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--paper:#121212;--txt:#ededed;--muted:#9b9b9b;--line:#262626;--soft:#1e1e1e;--profit:#2fc66f;--loss:#ff6b6f;--live:#ff5a5f;--card:#181818;--glow:#2fc66f40}}
.band{--up:#3ddc84;--down:#ff6b6f}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:var(--ink)}
body{margin:0;background:var(--paper);color:var(--txt);font:14px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased}
button,select{font:inherit;color:inherit}button{cursor:pointer}svg{display:block}h1,h2,h3,p{margin:0}
button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #6aa0ff;outline-offset:2px}
a{color:inherit}.up{color:var(--up)}.down{color:var(--down)}.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:9px}
/* the frame */
.shell{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
.band{background:var(--ink);color:#fff;padding:max(10px,env(safe-area-inset-top)) 0 46px}
.brandrow{display:flex;align-items:center;gap:12px;min-height:52px}
.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;letter-spacing:-.4px;color:#fff;text-decoration:none;flex:none}.brand svg{width:30px;height:30px}
.brand svg{animation:brandIn .7s cubic-bezier(.2,.8,.2,1) backwards}@keyframes brandIn{from{opacity:0;transform:rotate(-180deg) scale(.5)}}
.topnav{display:none}
.tools{margin-left:auto;gap:10px}
.health{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--inkmuted);white-space:nowrap}
.health i{position:relative;width:8px;height:8px;border-radius:50%;background:#3ddc84;flex:none}
.health i::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid #3ddc84;opacity:0;animation:dotPulse 2.2s ease-out infinite}
.health.stale i{background:#9a9a9a}.health.stale i::after{display:none}.health.bad i{background:#ff6b6f}.health.bad i::after{border-color:#ff6b6f}
.iconbtn{position:relative;width:40px;height:40px;border-radius:50%;border:1.5px solid #ffffff5c;background:transparent;display:grid;place-items:center;color:#fff;padding:0}.iconbtn svg{width:19px;height:19px;transition:transform .5s cubic-bezier(.3,.7,.3,1)}.iconbtn:hover{border-color:#fff}.iconbtn:active svg{transform:rotate(90deg)}
.hero{padding-top:14px}
.hero h1{font-size:26px;font-weight:700;letter-spacing:-.6px;line-height:1.2}
.hsub{font-size:16px;color:#cfcfcf;margin-top:2px}
.hstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}.hstats>div{min-width:0}.hstats>div+div{border-left:1px solid #ffffff33;padding-left:16px}
.hstats span{display:block;font-size:13px;color:#cfcfcf;white-space:nowrap}.hstats b{display:block;font-size:22px;font-weight:700;letter-spacing:-.5px;margin-top:2px;white-space:nowrap;font-variant-numeric:tabular-nums}
.hero .hnote{font-size:12px;color:var(--inkmuted);margin-top:12px}
.sheet{flex:1;background:var(--paper);border-radius:24px 24px 0 0;margin-top:-26px;position:relative;z-index:1;padding:22px 0 calc(100px + env(safe-area-inset-bottom))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;background:#fff;border-top:1px solid var(--line);padding:7px 6px max(10px,env(safe-area-inset-bottom))}
.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:#8c8c8c;font-size:11px;text-decoration:none;padding:4px 0;min-height:48px;transition:color .2s}.tab svg{width:24px;height:24px;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}.tab.active{color:#000;font-weight:700}.tab.active svg{transform:translateY(-1px) scale(1.08)}
.tb-badge{position:absolute;top:0;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--profit);color:#fff;font:700 10.5px/17px inherit;font-style:normal;text-align:center}.tb-badge:empty{display:none}
.appfoot{display:grid;gap:8px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line);margin-top:26px;padding-top:14px}.appfoot b{color:var(--txt);font-weight:600}
/* segmented pills: dark track in the band, light track on the sheet; the active one inverts */
.period{display:flex;gap:2px;padding:4px;background:#1b1b1b;border:1px solid #ffffff14;border-radius:999px;margin-top:14px}
.period button{flex:1;border:0;background:transparent;color:#d9d9d9;padding:6px 10px;border-radius:999px;font-size:14px;min-height:38px;white-space:nowrap;transition:background .25s,color .25s}
.period button.active{background:#fff;color:#000;font-weight:600;box-shadow:0 1px 3px #0005}
.hero .period+.period{margin-top:10px}
/* sections, list rows */
.block{margin-bottom:28px;min-width:0}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}.sechead h3{font-size:19px;font-weight:700;letter-spacing:-.35px}
.aside{font-size:13px;color:var(--muted);white-space:nowrap}
.list{border-top:1px solid var(--line)}.list>*{border-bottom:1px solid var(--line)}.list>*:last-child{border-bottom:0}
.lrow{display:flex;align-items:center;gap:12px;padding:11px 0;min-height:58px}
.lmain{flex:1;min-width:0}.lmain>b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;font-weight:500;line-height:1.3;overflow:hidden}.lmain>small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.lrow strong{font-size:15px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.lend{text-align:right;flex:none}.lend small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.empty{border:1px dashed #d6d6d6;border-radius:16px;padding:26px 16px;text-align:center;color:var(--muted);font-size:14px}
:root[data-theme=dark] .empty{border-color:#333}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .empty{border-color:#333}}
.footnote{font-size:11.5px;color:var(--muted);margin-top:12px;line-height:1.5}
/* crests: the ESPN logo on a disc, the team's initials under it until it loads (or when it never does) */
.crest{position:relative;overflow:hidden;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:800;background:#f1f1f1;color:#111}
.crest.logo{background:transparent}.crest>b{transition:opacity .35s}.crest.logo>b{opacity:0}
.crest img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.7);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.2,1)}.crest.logo img{opacity:1;transform:none}
.crest.sm{width:30px;height:30px;font-size:10px}
.pairav{display:flex;flex:none;min-width:34px}.pairav .crest{box-shadow:0 0 0 2px var(--paper)}.pairav .crest+.crest{margin-left:-8px}
:root[data-theme=dark] .crest{background:#262626;color:#e6e6e6}:root[data-theme=dark] .crest.logo{background:#f2f2f2}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .crest{background:#262626;color:#e6e6e6}:root:not([data-theme=light]) .crest.logo{background:#f2f2f2}}
/* badges */
.badge{font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-transform:uppercase;background:#f1f1f1;color:#444;flex:none}
.badge.live{background:#fdecec;color:var(--live)}.badge.live i{position:relative;width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.live i::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid currentColor;opacity:0;animation:dotPulse 1.8s ease-out infinite}
.badge.positive,.badge.win{background:#e8f6ee;color:#0d7f3f}.badge.negative,.badge.loss{background:#fdecec;color:var(--loss)}.badge.push{background:#111;color:#fff}
.badge.warning{background:#fff;color:#111;box-shadow:inset 0 0 0 1px #111}.badge.play{background:var(--profit);color:#fff}
.badge.upcoming{background:transparent;color:var(--muted);text-transform:none;font-size:12.5px;font-weight:500;letter-spacing:0;padding:3px 2px}
:root[data-theme=dark] .badge{background:#262626;color:#c9c9c9}:root[data-theme=dark] .badge.live{background:#3a1517;color:#ff8a8d}:root[data-theme=dark] .badge.win,:root[data-theme=dark] .badge.positive{background:#10301f;color:#4ade80}:root[data-theme=dark] .badge.loss{background:#3a1517;color:#ff8a8d}:root[data-theme=dark] .badge.warning{background:transparent;color:#ededed;box-shadow:inset 0 0 0 1px #ededed}:root[data-theme=dark] .badge.play{background:var(--profit);color:#0b0b0b}:root[data-theme=dark] .badge.push{background:#ededed;color:#111}:root[data-theme=dark] .badge.upcoming{background:transparent;color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .badge{background:#262626;color:#c9c9c9}:root:not([data-theme=light]) .badge.live{background:#3a1517;color:#ff8a8d}:root:not([data-theme=light]) .badge.win,:root:not([data-theme=light]) .badge.positive{background:#10301f;color:#4ade80}:root:not([data-theme=light]) .badge.loss{background:#3a1517;color:#ff8a8d}:root:not([data-theme=light]) .badge.warning{background:transparent;color:#ededed;box-shadow:inset 0 0 0 1px #ededed}:root:not([data-theme=light]) .badge.play{background:var(--profit);color:#0b0b0b}:root:not([data-theme=light]) .badge.push{background:#ededed;color:#111}:root:not([data-theme=light]) .badge.upcoming{background:transparent;color:var(--muted)}}
/* game cards (the app's .position) */
.positions{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.position{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--card);padding:12px 16px 16px;min-width:0;box-shadow:0 1px 2px #0000000a;transition:border-color .2s,box-shadow .3s;container:card/inline-size}
.position.hot{border-color:var(--profit);box-shadow:0 0 0 1px var(--profit),0 10px 34px -10px var(--glow);animation:hotGlow 2.8s ease-in-out infinite}
@keyframes hotGlow{50%{box-shadow:0 0 0 1px var(--profit),0 14px 44px -6px var(--glow)}}
.position-top{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px 9px;padding-bottom:11px;border-bottom:1px solid var(--line);min-height:44px}
.position-top .meta{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 20px;overflow:hidden}.position-top .meta svg{width:20px;height:20px;flex:none}
.position-top .mt{display:flex;flex-direction:column;min-width:0;line-height:1.2}.position-top .mt b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.position-top .mt span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.match{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:16px 0 14px}
.team{display:flex;align-items:center;gap:9px;min-width:0}.team.b{justify-content:flex-end;text-align:right}
.team b{font-size:13.5px;font-weight:600;line-height:1.25;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.team .tn{display:flex;flex-direction:column;min-width:0}.team small{font-size:11.5px;color:var(--muted);margin-top:1px}
.mid{position:relative;z-index:1;text-align:center;min-width:64px;max-width:120px}
.score{font-size:26px;font-weight:700;letter-spacing:-.4px;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}.score .colon{color:var(--muted);margin:0 .12em;font-weight:600}
.score .sf{display:inline-block;position:relative;isolation:isolate;min-width:.86em;padding:0 .08em;border-radius:.18em;background:#111;color:#fff;line-height:1.22;text-align:center}
.score .sf::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--card);opacity:.9;pointer-events:none}
:root[data-theme=dark] .score .sf{background:#2c2c2c}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .score .sf{background:#2c2c2c}}
.score.vs{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:.08em}
.score-sub{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.3;font-variant-numeric:tabular-nums}
.figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;padding:10px 0}
.figs>div{padding:0 10px;min-width:0}.figs>div+div{border-left:1px solid var(--line)}
.figs span{display:block;font-size:11px;color:var(--muted);white-space:nowrap}.figs b{display:block;font-size:16px;font-weight:650;margin-top:1px;font-variant-numeric:tabular-nums}
.watching{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--muted)}.watching i{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;animation:breathe 2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.25}}
/* THE PLAY: green panel, the max line big, the confidence ring, the ladder as chips */
.take{margin-top:14px;border-radius:16px;overflow:hidden;border:1px solid var(--profit);background:linear-gradient(180deg,#12a1500f,transparent 60%)}
.take-head{position:relative;overflow:hidden;background:var(--profit);color:#fff;padding:12px 14px;display:flex;align-items:center;gap:12px}
.take-head::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffff40 50%,transparent 65%);transform:translateX(-100%);animation:shine 3.2s ease-in-out 1s infinite}
@keyframes shine{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.take-head .tt{flex:1;min-width:0}.take-head small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;opacity:.9}
.take-head b{display:block;font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1.15;margin-top:1px}
.take-head em{display:block;font-style:normal;font-size:12px;opacity:.92;margin-top:2px}
.ring{position:relative;width:58px;height:58px;flex:none}.ring svg{width:58px;height:58px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}.ring .trk{stroke:#ffffff40}.ring .val{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.take-body{padding:12px 14px 14px}
.why{font-size:13.5px;line-height:1.45}
.conf{display:flex;align-items:center;gap:10px;margin-top:12px}.conf>span{font-size:12px;color:var(--muted);white-space:nowrap}
.bars{display:flex;gap:4px;flex:1;max-width:160px}.bars i{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden;position:relative}
.bars i.on::before{content:'';position:absolute;inset:0;background:var(--profit);border-radius:inherit;transform-origin:0 50%;animation:barIn .5s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i) * 90ms + .2s)}
@keyframes barIn{from{transform:scaleX(0)}}
.conf b{font-size:13px;font-weight:700;white-space:nowrap}
.kv{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.kv .pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:12.5px;background:var(--soft)}.kv .pill b{font-weight:700}
.kv .pill.seen{border-color:var(--profit);color:var(--profit);background:transparent}.kv .pill.seen i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:breathe 1.4s ease-in-out infinite}
.ladder-h{font-size:11.5px;color:var(--muted);margin:14px 0 7px;font-weight:600;letter-spacing:.02em}
.ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.chip{border:1px solid var(--line);border-radius:12px;padding:7px 4px;text-align:center;min-width:0;background:var(--card);transition:transform .2s}
.chip span{display:block;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.chip b{display:block;font-size:13px;letter-spacing:-.2px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}.chip small{display:block;font-size:10.5px;color:var(--muted)}
.chip.head{border-color:var(--profit);background:var(--profit);color:#fff}.chip.head span,.chip.head small{color:#ffffffd9}
/* lists on Tonight / Results */
.lrow .when{font-size:13px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.watchwhy{color:var(--txt)!important}
/* Record */
.rec-row .lmain>b{white-space:normal}.wpbar{height:5px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:6px;max-width:220px}.wpbar i{display:block;height:100%;background:var(--profit);border-radius:5px;transform-origin:0 50%;animation:barIn .7s cubic-bezier(.2,.7,.2,1) backwards}
/* skeleton */
.skeleton,.skeleton-line{background:linear-gradient(90deg,#efefef,#f7f7f7,#efefef);background-size:200% 100%;animation:skel 1.2s linear infinite;border-radius:8px;color:transparent!important}
.band .skeleton-line{background:linear-gradient(90deg,#1c1c1c,#2a2a2a,#1c1c1c);background-size:200% 100%}
:root[data-theme=dark] .skeleton{background:linear-gradient(90deg,#1c1c1c,#262626,#1c1c1c);background-size:200% 100%}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .skeleton{background:linear-gradient(90deg,#1c1c1c,#262626,#1c1c1c);background-size:200% 100%}}
@keyframes skel{to{background-position:-200% 0}}
.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.h20{height:20px}.h36{height:36px}.h90{height:90px;margin-top:6px}
.skel-match{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;justify-items:center;gap:8px;padding:16px 0}.skeleton.circle{width:42px;height:42px;border-radius:50%}
/* motion: a page laid in by a tab switch, a card that just appeared (staggered), a score that changed flips, the dots breathe */
.fx-pg{animation:fxPg .32s cubic-bezier(.2,.7,.3,1) backwards}@keyframes fxPg{from{opacity:.25;transform:translateY(10px)}}
.fx-new{animation:fxCard .42s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:calc(var(--i,0) * 45ms)}@keyframes fxCard{from{opacity:0;transform:translateY(16px) scale(.985)}}
.position.hot.fx-new{animation:fxCard .42s cubic-bezier(.2,.7,.3,1) backwards,hotGlow 2.8s ease-in-out .5s infinite}
.fx-new .crest{animation:vIn .45s cubic-bezier(.2,.8,.2,1) backwards}@keyframes vIn{from{opacity:0;transform:scale(.6)}}
.fx-new .score .sf{animation:sfIn .45s cubic-bezier(.2,.8,.2,1) backwards}@keyframes sfIn{from{opacity:0;transform:perspective(200px) rotateX(-75deg)}}
.score .sf.bump{animation:sfFlip .55s cubic-bezier(.2,.8,.2,1)}@keyframes sfFlip{0%{transform:perspective(200px) rotateX(-90deg);background:var(--profit)}60%{background:var(--profit)}100%{transform:none}}
.mid.bump::before{content:'';position:absolute;inset:-6px -10px;border-radius:14px;border:2px solid var(--profit);opacity:0;animation:pulseRing 1s ease-out}
@keyframes pulseRing{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.12)}}
.fx-new .chip{animation:chipIn .35s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 50ms + .25s)}@keyframes chipIn{from{opacity:0;transform:translateY(6px) scale(.96)}}
@keyframes dotPulse{0%{opacity:.75;transform:scale(.5)}75%,100%{opacity:0;transform:scale(2.3)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* sizes */
@container card (max-width:440px){.crest{width:36px;height:36px}.team{gap:7px}.team b{font-size:13px}.mid{min-width:60px}.score{font-size:24px}}
@media (max-width:379px){.hstats b{font-size:19px}.crest{width:36px;height:36px}.period button{padding:6px 7px;font-size:13px}.score{font-size:22px}.take-head b{font-size:19px}}
@media (min-width:900px){
 .wrap{padding:0 32px}.tabbar{display:none}
 .topnav{display:flex;gap:4px;margin-left:28px;padding:4px;border-radius:999px;background:#1b1b1b;border:1px solid #ffffff14}
 .topnav a{color:#cfcfcf;text-decoration:none;padding:8px 18px;border-radius:999px;font-size:14px;transition:background .25s,color .25s}.topnav a:hover{color:#fff}.topnav a.active{background:#fff;color:#000;font-weight:600}
 .band{padding:14px 0 58px}.hero{padding-top:26px}.hero h1{font-size:32px}.hero .hstats{max-width:620px}.hero .period{max-width:460px}
 .sheet{margin-top:-30px;border-radius:28px 28px 0 0;padding:32px 0 48px}
 .positions{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
 .appfoot{grid-template-columns:1fr 1fr;gap:24px}
}
:root[data-theme=dark] .tabbar{background:#121212f2;backdrop-filter:blur(8px);border-top-color:#262626}:root[data-theme=dark] .tab{color:#7d7d7d}:root[data-theme=dark] .tab.active{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tabbar{background:#121212f2;backdrop-filter:blur(8px);border-top-color:#262626}:root:not([data-theme=light]) .tab{color:#7d7d7d}:root:not([data-theme=light]) .tab.active{color:#fff}}
:root[data-theme=dark] .position{box-shadow:none}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .position{box-shadow:none}}
:root[data-theme=dark] .position.hot{box-shadow:0 0 0 1px var(--profit),0 10px 34px -10px var(--glow)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .position.hot{box-shadow:0 0 0 1px var(--profit),0 10px 34px -10px var(--glow)}}
/* WATCHING: the same panel, monochrome - no glow, no shine */
.take.watch{border-color:var(--line);background:transparent}
.take.watch .take-head{background:var(--soft);color:var(--txt)}.take.watch .take-head::after{display:none}
.take.watch .ring .trk{stroke:var(--line)}.take.watch .ring .val{stroke:var(--muted)}
.take+.take{margin-top:10px}
/* the books: one compact row each - badge, the line now, the price, its state */
.books{display:grid;gap:4px;margin-bottom:10px}
.bk{display:grid;grid-template-columns:34px minmax(0,1fr) auto 52px;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;font-variant-numeric:tabular-nums;font-size:13.5px;transition:background .3s}
.bkb{display:inline-grid;place-items:center;height:20px;border-radius:6px;background:#111;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em}
:root[data-theme=dark] .bkb{background:#2c2c2c;color:#ededed}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .bkb{background:#2c2c2c;color:#ededed}}
.bkl{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bkp{color:var(--muted);white-space:nowrap;font-size:12.5px}
.bks{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-align:right;color:var(--muted)}.bks.on{color:var(--profit)}
.bk.off{opacity:.62}
.bk.take{background:#12a15012}.bk.best{background:var(--profit);color:#fff}.bk.best .bkp,.bk.best .bks{color:#ffffffe0}.bk.best .bkb{background:#fff;color:var(--profit)}
.bk.best{animation:bestIn .6s cubic-bezier(.2,.8,.2,1) backwards .3s}@keyframes bestIn{from{background:transparent;color:var(--txt)}}
.mnote{font-size:12.5px;font-weight:650;margin:2px 0 8px;color:#b26a00}.mnote.closed{color:var(--loss)}
:root[data-theme=dark] .mnote{color:#f2b33d}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .mnote{color:#f2b33d}}
:root[data-theme=dark] .mnote.closed,:root:not([data-theme=light]) .mnote.closed{color:var(--loss)}
.sharp{font-size:12.5px;color:var(--muted);margin:0 0 8px;font-variant-numeric:tabular-nums}
.bknone{font-size:11.5px;color:var(--muted);padding:2px 8px 0}
/* How it works */
.how .hp{font-size:14px;line-height:1.5;margin:0 0 10px}.how .hp.never{margin-top:10px}
.how .lrow{align-items:flex-start}.how .lmain>b{-webkit-line-clamp:3}.how .lmain>small{line-height:1.45}
.how .mk{flex:none;min-width:84px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.how .num{flex:none;width:26px;height:26px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px}
:root[data-theme=dark] .how .num{background:#2c2c2c}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .how .num{background:#2c2c2c}}
.how .badge{margin-top:2px;min-width:84px;justify-content:center}
.how .lrow strong{font-size:17px;color:var(--profit)}
/* Live tab, 2nd section: in progress, not in the zone yet - muted rows */
.muted-block .sechead h3{color:var(--muted)}
.lrow.early{opacity:.72}.lrow.early .crest{filter:grayscale(.55)}.lrow.early .when{font-variant-numeric:tabular-nums}
/* THE LIVE GAME FX (app.js): the game clock (scoreboard digits + a ring that empties over the period, ticking between polls), a score that
   went up pops and floats +N (a ball bounces on a +3), a whistle for a foul / free throws, the last play sliding in under the score.
   prefers-reduced-motion: the rule above turns every animation off; the badges still appear and go (app.js removes them). */
.mid{max-width:132px}
.gclock{position:relative;display:inline-flex;align-items:center;gap:5px;margin-top:7px;padding:3px 8px 3px 4px;border-radius:9px;background:#0b0b0b;color:#fff;box-shadow:inset 0 0 0 1px #ffffff1c;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
.gclock .gc-ring{width:22px;height:22px;transform:rotate(-90deg);flex:none}.gclock circle{fill:none;stroke-width:2.6}.gclock .trk{stroke:#ffffff2b}.gclock .val{stroke:#ffcf4a;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.gc-per{font-size:10px;font-weight:700;letter-spacing:.04em;color:#bdbdbd}
.gc-t{font:700 15px/1 ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em;color:#ffcf4a;min-width:3.1em;text-align:right;text-shadow:0 0 8px #ffcf4a59}
.gclock:not(.run) .gc-t{color:#d9d9d9;text-shadow:none}.gclock.low.run .gc-t,.gclock.low.run .val{color:#ff6b6f;stroke:#ff6b6f;text-shadow:0 0 8px #ff6b6f66}
.gc-st{position:absolute;top:-7px;right:-6px;font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#ffcf4a;color:#111;border-radius:4px;padding:1px 4px}.gc-st:empty{display:none}
.gclock.run::after{content:'';position:absolute;top:3px;left:3px;width:4px;height:4px;border-radius:50%;background:#ff5a5f;animation:breathe 1s ease-in-out infinite}
.gclock.mini{margin-top:4px;padding:2px 6px 2px 3px;gap:4px;border-radius:7px}.gclock.mini .gc-ring{width:17px;height:17px}.gclock.mini .gc-t{font-size:12px;min-width:2.9em}.gclock.mini .gc-per{font-size:9px}
.fx{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:3}
.pts{position:absolute;top:-4px;display:flex;flex-direction:column;align-items:center;transform:translateY(-100%);animation:ptsUp 2s cubic-bezier(.2,.8,.2,1) forwards}
.pts.a{left:-10px}.pts.h{right:-10px}
.pts b{font-size:19px;font-weight:850;line-height:1;color:var(--profit);text-shadow:0 1px 0 var(--card),0 0 10px var(--glow)}
.pts small{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:1px;white-space:nowrap}
.pts.three b{font-size:22px}
@keyframes ptsUp{0%{opacity:0;transform:translateY(-40%) scale(.5)}14%{opacity:1;transform:translateY(-100%) scale(1.18)}24%{transform:translateY(-100%) scale(1)}78%{opacity:1;transform:translateY(-118%)}100%{opacity:0;transform:translateY(-135%)}}
.bbw{position:relative;width:22px;height:30px}.bb{position:absolute;left:2px;bottom:4px;width:18px;height:18px;animation:bbBounce .5s cubic-bezier(.45,0,.55,1) 4}
.bbs{position:absolute;left:4px;bottom:1px;width:14px;height:3px;border-radius:50%;background:#0000002e;animation:bbShadow .5s cubic-bezier(.45,0,.55,1) 4}
@keyframes bbBounce{0%,100%{transform:translateY(-12px) rotate(0)}48%{transform:translateY(0) rotate(90deg) scale(1,1)}55%{transform:translateY(1px) rotate(100deg) scale(1.12,.86)}62%{transform:translateY(0) rotate(110deg)}}
@keyframes bbShadow{0%,100%{transform:scale(.55);opacity:.5}50%{transform:scale(1);opacity:1}}
.whistle{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:#ffcf4a;color:#111;font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 14px -4px #0006;animation:whIn 2.8s cubic-bezier(.2,.8,.2,1) forwards}
.whistle .wh{width:14px;height:14px;transform-origin:70% 60%;animation:tweet .14s ease-in-out 6 alternate}
@keyframes whIn{0%{opacity:0;transform:translateX(-50%) scale(.6)}10%{opacity:1;transform:translateX(-50%) scale(1.08)}18%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}
@keyframes tweet{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.score .sf.pop{animation:sfPop .9s cubic-bezier(.2,.8,.2,1)}@keyframes sfPop{0%{transform:scale(1)}18%{transform:scale(1.32);background:var(--profit)}55%{background:var(--profit)}100%{transform:none}}
.play{display:flex;justify-content:center;min-height:22px;margin:-4px 0 12px;overflow:hidden}.play.none{display:none}
.pl-in{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-width:0;font-size:12.5px;line-height:1.3}
.pl-in.in{animation:plIn .5s cubic-bezier(.2,.8,.2,1)}@keyframes plIn{from{opacity:0;transform:translateY(10px)}}
.pl-k{flex:none;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:var(--soft);color:var(--muted)}
.pl-k.k-3pt,.pl-k.k-dunk{background:var(--profit);color:#fff}.pl-k.k-ft,.pl-k.k-foul{background:#ffcf4a;color:#111}.pl-k.k-timeout{background:#111;color:#fff}
:root[data-theme=dark] .pl-k.k-timeout{background:#ededed;color:#111}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .pl-k.k-timeout{background:#ededed;color:#111}}
.pl-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.play.mini{justify-content:flex-start;min-height:0;margin:4px 0 0}.play.mini .pl-in{font-size:11.5px;color:var(--muted)}.play.mini .pl-k{font-size:8.5px;padding:1px 5px}
.lrow.early .lend{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.lrow .when .sf{display:inline-block;border-radius:4px;padding:0 2px}.lrow .when .sf.pop{animation:rsPop .9s cubic-bezier(.2,.8,.2,1)}@keyframes rsPop{18%{transform:scale(1.35);background:var(--profit);color:#fff}55%{background:var(--profit);color:#fff}}
.lend .pts{top:-2px}.lend .pts.a{left:auto;right:34px}.lend .pts.h{right:-4px}.lend .pts b{font-size:15px}.lend .pts.three b{font-size:16px}.lend .bbw{transform:scale(.8);transform-origin:50% 100%}
.lend .whistle{left:auto;right:100%;bottom:auto;top:2px;transform:none;margin-right:6px;animation-name:whInR}@keyframes whInR{0%{opacity:0;transform:scale(.6)}10%{opacity:1;transform:scale(1.08)}18%{transform:none}85%{opacity:1}100%{opacity:0}}
/* the overhead court (FRIENDS_COURT=1): a hardwood floor, the halves washed in each team's colour, white lines; the labels are HTML over it */
.court{position:relative;margin:2px 0 12px;border-radius:12px;overflow:hidden;background:#c98a4b}.court.none{display:none}.has-court .play{display:none}
.court .ct{width:100%;height:auto;aspect-ratio:94/50}
.court .floor{fill:#d39a5c}.court .half{fill:#555;opacity:.16}
.court .ln{fill:none;stroke:#fff;stroke-width:.45;opacity:.85}.court .ln .bd{stroke-width:.8;opacity:1}
.court .lane{fill:#ffffff14;stroke:#fff;stroke-width:.45;transition:fill .3s}.court .lane.hl{fill:#ffcf4a8c;animation:laneHl 1.6s ease-out}
@keyframes laneHl{0%,60%{fill:#ffcf4ab0}100%{fill:#ffffff14}}
.court .rim{fill:none;stroke:#ff6a13;stroke-width:.5}.court .rim.swish{animation:swish .9s ease-out}@keyframes swish{0%{stroke:#fff;stroke-width:1.6;r:.9}50%{r:3.2;stroke:#3ddc84;opacity:.9}100%{r:4.5;opacity:0}}
.court .ball{fill:#f28a2e;stroke:#8a3f0c;stroke-width:.3}
.court .dot{stroke-width:.35}.court .dot.mk{fill:#fff;stroke:#0b0b0b}.court .dot.ms{fill:none;stroke:#fff;stroke-dasharray:.6 .4}
.ct-ov{position:absolute;left:0;right:0;top:0;aspect-ratio:94/50;pointer-events:none}
.ct-lab{position:absolute;transform:translate(-50%,-50%);display:inline-flex;flex-direction:column;align-items:center;white-space:nowrap;font-weight:850;line-height:1;animation:ctLab 1.8s cubic-bezier(.2,.8,.2,1) forwards}
.ct-lab>b{font-size:17px;color:#fff;text-shadow:0 1px 3px #000a}.ct-lab small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:.92;margin-top:2px;text-shadow:0 1px 2px #000a}
.ct-lab.made>b{color:#3ddc84;font-size:20px}.ct-lab.three>b{font-size:23px}.ct-lab.miss>b{font-size:13px;color:#ffd7d7}
.ct-lab.foul,.ct-lab.pulse{flex-direction:row;gap:5px;padding:4px 9px;border-radius:999px;font-size:10px;letter-spacing:.06em;background:#ffcf4a;color:#111}.ct-lab.foul>b,.ct-lab.pulse>b{font-size:10px;color:#111;text-shadow:none}
.ct-lab.foul .wh{width:13px;height:13px;transform-origin:70% 60%;animation:tweet .14s ease-in-out 6 alternate}
.ct-lab.pulse{background:#0b0b0bd9}.ct-lab.pulse>b{color:#fff}.ct-lab.pulse.k-rebound{background:#1f6feb}.ct-lab.pulse.k-turnover{background:#e5484d}
@keyframes ctLab{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}14%{opacity:1;transform:translate(-50%,-55%) scale(1.12)}24%{transform:translate(-50%,-55%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%)}}
.ct-pos{position:absolute;top:6px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:#0b0b0bc0;color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ct-pos.home,.ct-pos.away{display:inline-flex}.ct-pos .ar{font-style:normal;font-size:9px;color:#ffcf4a;animation:arr 1.2s ease-in-out infinite}.ct-pos .ar.l{animation-name:arrL}
@keyframes arr{50%{transform:translateX(2px)}}@keyframes arrL{50%{transform:translateX(-2px)}}
.ct-tick{background:var(--card);border-top:1px solid #0000001a;padding:6px 10px 7px;display:grid;gap:3px}
.ct-tick .tk{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;line-height:1.3;color:var(--muted)}.ct-tick .tk:first-child{color:var(--txt)}
.ct-tick .tk.in{animation:plIn .5s cubic-bezier(.2,.8,.2,1)}.tk-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tk-c{flex:none;font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted)}
.pl-k.k-miss{background:var(--soft);color:var(--muted)}.pl-k.k-shot{background:var(--profit);color:#fff}.pl-k.k-rebound{background:#1f6feb;color:#fff}.pl-k.k-turnover{background:#e5484d;color:#fff}
.court{border:1px solid var(--line)}