/* v20 theme: one brand accent (orange); lime only for live/verified/online states. Light + dark via CSS variables. */
html:root{color-scheme:dark;--bg:#08090b;--bg2:#0b0c0f;--bg3:#14161b;--bg-rgb:8 9 11;--pn:#101216;--card:#111317;--tx:#f2f3f5;--tx2:#c9ccd3;--mu:#8d929c;--dim:#8d929c;--inv:#ffffff;--on-inv:#0b0c0e;
 --c:#ff7a1a;--c-rgb:255 122 26;--o:#ff7a1a;--m:#ff7a1a;--l:var(--c);--on-c:#0b0c0e;--live:#d9ff3a;--live-rgb:217 255 58;--fg-rgb:255 255 255;--ln:rgb(255 255 255/.11);--chalk:#f2f3f5;--r:#ff4d5e;--r-rgb:255 77 94;--warn:#ffc93a;--warn-rgb:255 201 58}
html[data-theme=light]:root{color-scheme:light;--bg:#f5f4ef;--bg2:#ffffff;--bg3:#ffffff;--bg-rgb:245 244 239;--pn:#ffffff;--card:#ffffff;--tx:#15171c;--tx2:#353a42;--mu:#585e68;--dim:#585e68;--inv:#15171c;--on-inv:#ffffff;
 --c:#b23a0a;--c-rgb:178 58 10;--o:#b23a0a;--m:#b23a0a;--on-c:#ffffff;--live:#2f7a12;--live-rgb:47 122 18;--fg-rgb:21 23 28;--ln:rgb(21 23 28/.14);--chalk:#15171c;--r:#b4232f;--r-rgb:180 35 47;--warn:#8a5a00;--warn-rgb:138 90 0}
.pf{--o:var(--c);--k:var(--tx);--lm:var(--c);--g:rgb(var(--fg-rgb)/.13)}
/* status colors (lime) */
.x-ok,.st-active,.badge:not(.no),.pu-live,.is-live,.is-verified,.x-pill.v{color:var(--live)!important}
.x-pill.v,.st-active{border-color:rgb(var(--live-rgb)/.45)!important}
.x-status.ready .dot,.sp-online{background:var(--live)!important;box-shadow:0 0 8px rgb(var(--live-rgb)/.7)!important}
.badge:not(.no){border-color:rgb(var(--live-rgb)/.5)!important;background:rgb(var(--live-rgb)/.1)!important}
.sp-m.agent .sp-b{border-color:rgb(var(--live-rgb)/.4)}
/* light-mode specifics */
html[data-theme=light] body{background:var(--bg);color:var(--tx)}
html[data-theme=light] .btn:not(.ghost){background:var(--c);color:var(--on-c)}
html[data-theme=light] .banner{color:#fff}
html[data-theme=light] .pf-wm .turf{fill-opacity:.1}
html[data-theme=light] .pf-wm .lines line,html[data-theme=light] .pf-wm .lines circle,html[data-theme=light] .pf-wm .lines path,html[data-theme=light] .pf-wm .lines rect{stroke:rgb(21 23 28/.28)}
html[data-theme=light] .card,html[data-theme=light] .x-card,html[data-theme=light] .clip,html[data-theme=light] .jersey{box-shadow:0 1px 2px rgb(0 0 0/.05),0 8px 24px rgb(0 0 0/.05)}
/* the 3D hero and intro stay a dark "night court" band in both themes */
html[data-theme=light] .h3d{--bg:#08090b;--bg2:#0b0c0f;--bg3:#14161b;--bg-rgb:8 9 11;--tx:#f2f3f5;--tx2:#c9ccd3;--mu:#a3a8b1;--c:#ff7a1a;--c-rgb:255 122 26;--on-c:#0b0c0e;--fg-rgb:255 255 255;--inv:#fff;--ln:rgb(255 255 255/.11);--live:#d9ff3a;--live-rgb:217 255 58;color:var(--tx);background:#08090b}
html[data-theme=light] .h3d .btn:not(.ghost){background:#fff;color:#0b0c0e}
/* theme toggle */
.pu-theme{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--ln);background:transparent;color:var(--tx);cursor:pointer;pointer-events:auto}
.pu-theme:hover{border-color:var(--c);color:var(--c)}.pu-theme:focus-visible{outline:2px solid var(--c);outline-offset:2px}.pu-theme .pi{width:17px;height:17px}

/* v23 sport card photography: photo fills the card, dark gradient keeps labels readable (AA) in both themes */
.reel .jersey.ph,html[data-theme=light] .reel .jersey.ph{background:#0d0e11;isolation:isolate;border-color:rgb(255 255 255/.08)}
.jersey.ph .jp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.001);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.jersey.ph::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgb(8 9 12/.55) 0%,rgb(8 9 12/.12) 30%,rgb(8 9 12/.45) 58%,rgb(8 9 12/.92) 100%)}
.jersey.ph:hover .jp,.jersey.ph:focus-within .jp{transform:scale(1.07)}
.jersey.ph b,html[data-theme=light] .jersey.ph b{color:#fff;text-shadow:0 1px 10px rgb(0 0 0/.55)}
.jersey.ph small,html[data-theme=light] .jersey.ph small{color:#e9ebef;text-shadow:0 1px 6px rgb(0 0 0/.7)}
.jersey.ph .e,html[data-theme=light] .jersey.ph .e{color:#fff;filter:drop-shadow(0 1px 4px rgb(0 0 0/.6))}
.jersey.ph .e .pi{stroke:#fff}
.jersey.ph .n,html[data-theme=light] .jersey.ph .n{color:rgb(255 255 255/.16)}
.jersey.ph>div{position:relative}
@media (prefers-reduced-motion:reduce){.jersey.ph .jp{transition:none}.jersey.ph:hover .jp,.jersey.ph:focus-within .jp{transform:none}}
