/* tokens.css — THE style template (2026-09-17). Every visual decision lives here, once:
   tokens, scene, type, surfaces, controls, table. ui.css composes these into views
   and carries layout only. If something looks wrong everywhere, it is in this file;
   if it is wrong in one view, it is that view's composition in ui.css.

   Design language matches the MLB board (WebUIRedesign). Hues: --h base, --h2 accent;
   --si / --ai are the Settings intensity multipliers, --lb the base-lightness lever.
   Semantic colours (--pos/--neg/--wrn) and the day/night pill colours are fixed —
   they encode measured outcomes and kickoff windows and are never themed. */

/* ================================================================ 1. tokens */
:root{
  --h:192;--h2:258;--si:1;--ai:1;--lb:1;
  --font-ui:'Plus Jakarta Sans',system-ui,sans-serif;--font-num:'DM Mono',ui-monospace,monospace;
  --ac:hsl(var(--h2) calc(92% * var(--ai)) 62%);
  --ac2:hsl(var(--h2) calc(82% * var(--ai)) 68%);
  --pos:#2fd39a;--neg:#ff5f7e;--wrn:#ffc857;--neg2:#c2415c;
  --day:#e0a82e;--night:#4f8ff7;                          /* fixed: kickoff before 5 pm viewer-local = day */
  --bg:hsl(var(--h) calc(26% * var(--si)) calc(5% * var(--lb)));
  --pnl:hsl(var(--h) calc(22% * var(--si)) calc(8.5% * var(--lb)));
  --tx:hsl(var(--h) calc(30% * var(--si)) 96%);--d1:hsl(var(--h) calc(14% * var(--si)) 62%);--d2:hsl(var(--h) calc(12% * var(--si)) 42%);
  --ln:hsl(var(--h) calc(20% * var(--si)) 20% / .55);
  --ln-lit:hsl(var(--h) calc(30% * var(--si)) 42% / .55);          /* the lit top edge on raised surfaces */
  --ln-soft:hsl(var(--h) calc(20% * var(--si)) 20% / .25);         /* row hairlines */
  --ink:hsl(var(--h) calc(45% * var(--si)) 8%);                    /* text on an accent fill */
  --shadow:hsl(var(--h) calc(40% * var(--si)) 2%);
  --well:hsl(var(--h) calc(24% * var(--si)) 7% / .6);              /* recessed cell ground */
  --field:hsl(var(--h) calc(24% * var(--si)) 10% / .85);           /* inputs, buttons, strips */
  --raise:linear-gradient(168deg, hsl(var(--h) calc(22% * var(--si)) 15% / .66), hsl(var(--h) calc(24% * var(--si)) 8% / .74));
  --r-panel:18px;--r-card:16px;--r-sub:12px;--r-cell:10px;--r-ctl:9px;--r-chip:6px;
  --v1:hsl(190 88% 58%);--v2:hsl(160 70% 52%);--v3:hsl(42 94% 60%);--v4:hsl(12 90% 62%);
}

/* ================================================================ 2. ground + scene */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-ui);color:var(--tx);padding:26px 26px 60px;
 background:
  radial-gradient(1000px 620px at 12% -14%, hsl(var(--h) calc(80% * var(--si)) 50% / calc(.16 * var(--lb))), transparent 60%),
  radial-gradient(880px 560px at 92% -6%, hsl(var(--h2) calc(85% * var(--ai)) 62% / .12), transparent 62%),
  radial-gradient(720px 460px at 50% 112%, hsl(var(--h) calc(70% * var(--si)) 45% / calc(.12 * var(--lb))), transparent 60%),
  var(--bg);
 background-attachment:fixed}
.wrap{max-width:1340px;margin:0 auto;position:relative;z-index:1}
.scene{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(1px)}
.orb::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), transparent 42%)}
.o1{width:560px;height:560px;top:-190px;left:-150px;opacity:.42;
 background:radial-gradient(circle at 32% 26%, hsl(var(--h2) calc(95% * var(--ai)) 72%), hsl(var(--h2) calc(90% * var(--ai)) 46%) 44%, hsl(var(--h2) calc(85% * var(--ai)) 16%) 78%);
 box-shadow:0 60px 120px -30px hsl(var(--h2) calc(90% * var(--ai)) 30% / .6);animation:drift1 26s ease-in-out infinite}
.o2{width:430px;height:430px;top:-110px;right:3%;opacity:.36;
 background:radial-gradient(circle at 34% 28%, hsl(var(--h2) calc(92% * var(--ai)) 76%), hsl(var(--h2) calc(85% * var(--ai)) 50%) 46%, hsl(var(--h2) calc(80% * var(--ai)) 18%) 80%);
 box-shadow:0 50px 100px -28px hsl(var(--h2) calc(85% * var(--ai)) 32% / .55);animation:drift2 32s ease-in-out infinite}
.o3{width:400px;height:400px;bottom:-150px;left:34%;opacity:.30;
 background:radial-gradient(circle at 36% 30%, hsl(var(--h2) calc(90% * var(--ai)) 72%), hsl(var(--h2) calc(82% * var(--ai)) 44%) 48%, hsl(var(--h2) calc(76% * var(--ai)) 14%) 82%);
 animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(26px,32px,0)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-30px,24px,0)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(20px,-26px,0)}}
.ring{position:absolute;border-radius:50%;border:1.5px solid hsl(var(--h2) calc(80% * var(--ai)) 66% / .5);transform-style:preserve-3d}
.r1{width:720px;height:720px;top:-250px;right:-180px;opacity:.55;transform:perspective(900px) rotateX(72deg) rotateZ(-14deg);
 box-shadow:0 0 60px hsl(var(--h2) calc(85% * var(--ai)) 55% / .16) inset, 0 0 40px hsl(var(--h2) calc(85% * var(--ai)) 55% / .1);animation:spin1 60s linear infinite}
.r2{width:520px;height:520px;bottom:-180px;left:-120px;opacity:.5;border-color:hsl(var(--h2) calc(80% * var(--ai)) 72% / .5);
 transform:perspective(800px) rotateX(70deg) rotateZ(18deg);animation:spin2 78s linear infinite reverse}
@keyframes spin1{to{transform:perspective(900px) rotateX(72deg) rotateZ(346deg)}}
@keyframes spin2{to{transform:perspective(800px) rotateX(70deg) rotateZ(378deg)}}
.floor{position:absolute;left:-20%;right:-20%;bottom:-4%;height:52%;
 background-image:linear-gradient(hsl(var(--h) calc(75% * var(--si)) 65% / .3) 1px, transparent 1px),linear-gradient(90deg, hsl(var(--h) calc(75% * var(--si)) 65% / .3) 1px, transparent 1px);
 background-size:82px 82px;transform:perspective(560px) rotateX(70deg);transform-origin:bottom center;
 mask-image:linear-gradient(to top, #000 0%, transparent 74%);-webkit-mask-image:linear-gradient(to top, #000 0%, transparent 74%);opacity:.85}
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
@keyframes pl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.82)}}

/* ================================================================ 3. type
   UI face for labels, chrome and names; mono ONLY for numbers and codes. */
.mono,.num{font-family:var(--font-num)}
.lbl{font-family:var(--font-num);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--d2)}
.meta{font-family:var(--font-ui);font-size:11px;color:var(--d2);letter-spacing:0}
.sub-t{font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--d2)}
.pos{color:var(--pos)}.neg{color:var(--neg)}.wrn{color:var(--wrn)}.dim{color:var(--d2)}
.p h2{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:0 0 10px;color:var(--d1)}
.p h2 em{font-style:normal;font-family:var(--font-num);font-weight:400;letter-spacing:0;text-transform:none;color:var(--d2);margin-left:8px;font-size:10px}
.lnk,a.tl{color:inherit;text-decoration:none;border-bottom:1px dotted hsl(var(--h) calc(30% * var(--si)) 40% / .5)}
.lnk:hover,a.tl:hover{color:var(--ac);border-bottom-color:var(--ac)}
a.pl{color:var(--ac);text-decoration:none;font-weight:600}a.pl:hover{text-decoration:underline}
.empty-view{font-family:var(--font-ui);font-size:11px;color:var(--d2);padding:40px;text-align:center}
.rk{font-family:inherit;font-size:10px;color:var(--tx);opacity:.55;margin-left:3px}
.rk.proj{opacity:.45;font-style:italic}

/* ================================================================ 4. surfaces
   .p      raised panel — the frame every view sits in
   .card   raised card, one level lighter (slate game cards)
   .sub    contrast sub-box INSIDE a panel: lit top edge + inset ring, so it reads as its own object
   .cell   recessed stat cell: darker well, inset shadow; .cell.hi = the model's pick, lit
   .strip  flat info strip (counts, sort, provenance)
   .banner accent-tinted notice */
.p{border-radius:var(--r-panel);padding:16px 18px;position:relative;isolation:isolate;background:var(--raise);
 border:1px solid var(--ln);border-top-color:var(--ln-lit);backdrop-filter:blur(26px) saturate(1.35);
 box-shadow:0 1px 0 hsl(var(--h) calc(40% * var(--si)) 70% / .09) inset,0 2px 4px hsl(var(--shadow) / .5),0 12px 26px -10px hsl(var(--shadow) / .55)}
.card{border-radius:var(--r-card);padding:13px 15px;position:relative;
 background:linear-gradient(168deg, hsl(var(--h) calc(22% * var(--si)) 17% / .62), hsl(var(--h) calc(24% * var(--si)) 9% / .72));
 border:1px solid var(--ln);border-top-color:hsl(var(--h) calc(30% * var(--si)) 48% / .55);backdrop-filter:blur(22px) saturate(1.3);
 transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s;
 box-shadow:0 1px 0 hsl(var(--h) calc(40% * var(--si)) 72% / .10) inset,0 2px 3px hsl(var(--shadow) / .45),0 10px 20px -9px hsl(var(--shadow) / .6)}
.card.go{cursor:pointer}.card.go:hover{transform:translateY(-2px)}
.sub{border-radius:var(--r-sub);padding:10px 12px;
 background:linear-gradient(168deg, hsl(var(--h) calc(18% * var(--si)) 14% / .7), hsl(var(--h) calc(20% * var(--si)) 9% / .8));
 border:1px solid hsl(var(--h) calc(22% * var(--si)) 30% / .55);border-top-color:hsl(var(--h) calc(30% * var(--si)) 50% / .6);
 box-shadow:0 1px 0 hsl(var(--h) calc(40% * var(--si)) 75% / .10) inset,0 0 0 1px hsl(var(--shadow) / .35),0 6px 14px -8px hsl(var(--shadow) / .7)}
.sub .lbl{margin-bottom:7px;display:block}
.cell{border-radius:var(--r-cell);padding:7px 8px;background:var(--well);border:1px solid var(--ln-soft);
 box-shadow:0 1px 2px hsl(var(--shadow) / .45) inset,0 1px 0 hsl(var(--h) calc(30% * var(--si)) 60% / .04)}
.cell>i{display:block;font-style:normal;font-family:var(--font-num);font-size:8.5px;color:var(--d2);letter-spacing:.08em;text-transform:uppercase}
.cell>b{display:block;font-family:var(--font-num);font-size:13px;margin-top:2px}
.cell>s{text-decoration:none;display:block;font-family:var(--font-num);font-size:9.5px;color:var(--d1);margin-top:1px}
.cell>u{text-decoration:none;display:block;font-family:var(--font-num);font-size:10px;margin-top:2px}
.cell.hi{background:linear-gradient(168deg, hsl(var(--h) calc(22% * var(--si)) 14% / .8), hsl(var(--h) calc(24% * var(--si)) 8% / .85));
 border-color:color-mix(in srgb,var(--ac) 55%,transparent);border-top-color:color-mix(in srgb,var(--ac) 80%,transparent);
 box-shadow:0 1px 0 color-mix(in srgb,var(--ac) 35%,transparent) inset,0 0 14px -4px color-mix(in srgb,var(--ac) 45%,transparent)}
.strip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;border-radius:var(--r-sub);margin-bottom:12px;
 background:hsl(var(--h) calc(24% * var(--si)) 10% / .55);border:1px solid var(--ln);border-top-color:var(--ln-lit);
 font-family:var(--font-ui);font-size:11px;color:var(--d1)}
.strip b{color:var(--ac);font-family:var(--font-num);font-weight:500}
.strip code,.strip .num{font-family:var(--font-num);font-size:10.5px;color:var(--tx)}
.banner{font-family:var(--font-ui);font-size:11px;padding:10px 14px;border-radius:var(--r-sub);margin-bottom:14px;line-height:1.5;
 background:linear-gradient(168deg,hsl(var(--h2) calc(60% * var(--ai)) 30% / .25),hsl(var(--h) calc(24% * var(--si)) 8% / .8));
 border:1px solid hsl(var(--h2) calc(70% * var(--ai)) 55% / .35);border-top-color:hsl(var(--h2) calc(75% * var(--ai)) 65% / .5);color:var(--tx)}
.banner b{color:var(--ac2)}
.banner .num,.banner code{font-family:var(--font-num);font-size:10.5px}

/* ================================================================ 5. controls */
.bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;row-gap:12px}
.bar>.nav{margin-right:4px}
.nav{display:flex;gap:3px;padding:3px;border-radius:var(--r-ctl);width:max-content;background:var(--field);border:1px solid var(--ln)}
.nav a{font-family:var(--font-ui);font-size:12px;font-weight:600;padding:7px 13px;border-radius:7px;color:var(--d1);text-decoration:none;letter-spacing:-.01em;cursor:pointer}
.nav a:hover{color:var(--tx);background:hsl(var(--h) calc(40% * var(--si)) 70% / .07)}
.nav a.on{background:var(--ac);color:var(--ink)}
.nav a.gear{display:inline-flex;align-items:center;padding:6px 9px}
.nav a.gear svg{width:13px;height:13px}
.ctl{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;width:100%;padding:10px 12px;border-radius:var(--r-sub);background:hsl(var(--h) calc(24% * var(--si)) 10% / .55);border:1px solid var(--ln)}
.ctl .search{flex:1 1 180px;min-width:160px}
.ctl .date-picker{min-width:150px}
.seg,.mode{display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--field);border:1px solid var(--ln)}
.seg .seg-btn,.mode span,.mode .ab-btn{font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:-.01em;padding:5px 10px;border-radius:var(--r-chip);color:var(--d1);background:none;border:0;cursor:pointer}
.mode .ab-btn{color:var(--d2)}.mode .ab-btn:hover{color:var(--tx)}
.seg .seg-btn.is-on,.mode span.on,.mode .ab-btn.is-on{background:var(--ac);color:var(--ink)}
.mode label,.abmode label{font-family:var(--font-ui);font-size:11px;font-weight:500}
.abmode label{display:none}
.search,.date-picker{font-family:var(--font-ui);font-size:12px;padding:8px 12px;border-radius:var(--r-ctl);color:var(--tx);background:var(--field);border:1px solid var(--ln);outline:none;min-width:150px}
.search::placeholder{color:var(--d2)}
.search:focus{border-color:color-mix(in srgb,var(--ac) 55%,transparent)}
.btn,.se-btn{font-family:var(--font-ui);font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:var(--r-ctl);color:var(--d1);background:var(--field);border:1px solid var(--ln);cursor:pointer;white-space:nowrap}
.btn:hover,.se-btn:hover{color:var(--tx);border-color:var(--ac)}
.se-btn{background:transparent}
#freshness{font-family:var(--font-ui);font-size:11px;color:var(--d2);margin:0}
/* the game pill — ONE rule set, rendered by data.js gamePill() everywhere a game is selectable */
.gpills{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;min-width:0;justify-content:center;margin-bottom:12px}
.gpill{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;border:1px solid var(--ln);background:hsl(var(--h) calc(20% * var(--si)) 13% / .6);color:var(--d1);font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.gpill i{font-style:normal;color:var(--d2);font-weight:500}
.gpill:hover{border-color:color-mix(in srgb,var(--ac) 45%,transparent);color:var(--tx)}
.gpill.on{background:color-mix(in srgb,var(--ac) 22%,transparent);border-color:color-mix(in srgb,var(--ac) 60%,transparent);color:var(--tx)}
.gpill.on b{color:var(--ac)}
.gpill-n{opacity:.65;margin-left:3px;font-weight:600}
/* day / night borders — FIXED colours, never themed. Kickoff before 5 pm in the VIEWER's time zone = day. */
.gpill.dn-day{border-color:var(--day) !important;box-shadow:inset 0 0 0 1px rgba(224,168,46,.55)}
.gpill.dn-night{border-color:var(--night) !important;box-shadow:inset 0 0 0 1px rgba(79,143,247,.55)}
.gpill.on.dn-day{box-shadow:inset 0 0 0 2px var(--day)}
.gpill.on.dn-night{box-shadow:inset 0 0 0 2px var(--night)}
.card.dn-day{border-color:var(--day);box-shadow:0 0 0 1px rgba(224,168,46,.5),0 10px 20px -9px hsl(var(--shadow) / .6)}
.card.dn-night{border-color:var(--night);box-shadow:0 0 0 1px rgba(79,143,247,.5),0 10px 20px -9px hsl(var(--shadow) / .6)}
.dn-key{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-ui);font-size:10px;color:var(--d2)}
.dn-key i{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid;margin-right:4px;vertical-align:-1px}
.dn-key .d i{border-color:var(--day)}.dn-key .n i{border-color:var(--night)}
/* small marks */
.tag{display:inline-block;font-family:var(--font-ui);font-size:9px;font-weight:600;padding:2px 6px;border-radius:5px;background:hsl(var(--h) calc(24% * var(--si)) 14% / .9);border:1px solid var(--ln);color:var(--d1);margin-right:4px;letter-spacing:.02em}
.tag.warn{color:var(--wrn);border-color:hsl(42 80% 50% / .4)}
.tag.qb{color:var(--ac2);border-color:hsl(var(--h2) calc(80% * var(--ai)) 60% / .4)}
.chip{display:inline-flex;align-items:baseline;gap:4px;padding:2px 8px;border-radius:var(--r-chip);background:hsl(var(--h) calc(12% * var(--si)) 16% / .85);border:1px solid hsl(var(--h) calc(10% * var(--si)) 24% / .8)}
.chip u{text-decoration:none;font-family:var(--font-num);font-size:8.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--d2)}
.chip b{font-family:var(--font-num);font-size:11px;font-weight:600;color:var(--tx)}
.chip i{font-style:normal;font-family:var(--font-num);font-size:8.5px;color:var(--d2)}
.chip.proj{border-style:dashed;opacity:.85}.chip.proj b{color:var(--d1)}
.tg{background:transparent;border:1px solid var(--ln);color:var(--tx);opacity:.6;font-family:var(--font-ui);font-size:11px;font-weight:600;padding:2px 8px;margin-left:4px;border-radius:var(--r-chip);cursor:pointer}
.tg.on{opacity:1;border-color:var(--ac)}
.st{font-size:10px;padding:0 5px;border-radius:4px;border:1px solid var(--d2);color:var(--d1);white-space:nowrap}
.st.out{color:var(--neg);border-color:var(--neg)}.st.q{color:var(--wrn);border-color:var(--wrn)}.st.ina{color:var(--d2)}
.pf{font-size:9px;color:var(--d2);border:1px solid var(--d2);border-radius:3px;padding:0 4px;margin-left:5px;vertical-align:middle}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);font-family:var(--font-ui);font-size:11px;padding:8px 14px;border-radius:8px;background:var(--pnl);border:1px solid var(--ln);color:var(--tx);z-index:50}
.toast[hidden]{display:none}
.view[hidden]{display:none}
/* progress rails */
.rail{height:6px;border-radius:3px;background:hsl(var(--h) calc(20% * var(--si)) 20% / .5);position:relative}
.rail i{position:absolute;top:0;bottom:0;border-radius:3px}

/* ================================================================ 6. table */
table.t{width:100%;border-collapse:collapse;font-size:12px}
table.t th{font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--d2);text-align:right;padding:6px 8px;border-bottom:1px solid var(--ln);cursor:pointer;white-space:nowrap}
table.t th:first-child,table.t td:first-child{text-align:left}
table.t td{padding:7px 8px;text-align:right;border-bottom:1px solid var(--ln-soft);font-family:var(--font-num);font-size:11.5px;white-space:nowrap}
table.t td.n{font-family:var(--font-ui);font-weight:700;font-size:12.5px;letter-spacing:-.01em}
table.t tr:hover td{background:hsl(var(--h) calc(40% * var(--si)) 70% / .05)}
table.t th.on{color:var(--ac)}

/* ================================================================ 7. layout helpers */
.two,.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){body{padding:14px}.two,.grid2,.grid3{grid-template-columns:1fr!important}}

/* ================================================================ 8. settings (composed from the above) */
#v-settings .bar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
#v-settings .bar h1{font-size:16px;font-weight:800;letter-spacing:-.03em;margin:0}
.se-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.se-card{background:var(--pnl);border:1px solid var(--ln);border-top-color:var(--ln-lit);border-radius:var(--r-panel);padding:16px;display:flex;flex-direction:column;gap:14px}
.se-card h2{font-size:14px;font-weight:800;margin:0;letter-spacing:-.02em}
.se-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.se-row label{font-family:var(--font-ui);font-size:9.5px;font-weight:600;color:var(--d2);letter-spacing:.04em;text-transform:uppercase;min-width:64px}
.se-sw{display:flex;gap:6px;flex-wrap:wrap}
.se-sw i{width:22px;height:22px;border-radius:7px;cursor:pointer;border:2px solid transparent;display:inline-block}
.se-sw i.on{border-color:#fff}
.se-sl{flex:1;display:flex;align-items:center;gap:10px}
.se-sl input[type=range]{flex:1;accent-color:var(--ac)}
.se-sl b{font-family:var(--font-num);font-size:11px;min-width:44px;text-align:right}
.se-custom{display:inline-flex;align-items:center;gap:8px;margin-left:8px}
.se-custom input[type=color]{width:30px;height:26px;padding:0;border:1px solid var(--ln);border-radius:8px;background:transparent;cursor:pointer}
.se-custom input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.se-custom input[type=color]::-webkit-color-swatch{border:0;border-radius:6px}
.se-custom input[type=text]{width:84px;font-family:var(--font-num);font-size:11px;padding:6px 8px;border-radius:8px;border:1px solid var(--ln);background:var(--bg);color:var(--tx)}
.se-custom input[type=text].bad{border-color:var(--neg)}
@media(max-width:900px){.se-grid{grid-template-columns:1fr}}

/* ================================================================ 9. game view (shared by Games and Props)
   Both hosts carry .gameview: one header bar, one row grid, one rail. Ported from the MLB board. */
.gameview .bar{display:grid;grid-template-columns:1fr auto auto 1fr;grid-template-areas:"title pane meta ." "pills pills pills pills" "ctl ctl ctl ctl";align-items:center;column-gap:14px;row-gap:12px;
 padding:9px 14px;border-radius:14px;margin-bottom:16px;background:linear-gradient(168deg,hsl(var(--h) calc(22% * var(--si)) 15% / .72),hsl(var(--h) calc(24% * var(--si)) 8% / .8));
 border:1px solid var(--ln);border-top-color:var(--ln-lit);backdrop-filter:blur(20px)}
.gameview .bar h1{grid-area:title;justify-self:end;min-width:96px;text-align:right;font-size:16px;font-weight:800;letter-spacing:-.03em;margin:0;white-space:nowrap}
.gameview .bar .pane-seg{grid-area:pane;margin:0}
.gameview .bar .meta{grid-area:meta;justify-self:start;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);font-size:11px;color:var(--d2)}
.gameview .bar .gpills{grid-area:pills;flex:none;width:100%;margin:0}
.gameview .pctl{grid-area:ctl;flex:none;width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.gameview .seg{display:flex;gap:2px;padding:3px;border-radius:var(--r-ctl);background:var(--field);border:1px solid var(--ln)}
.gameview .seg span,.gameview .pane-seg .pane-lnk{font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:-.01em;padding:5px 11px;border-radius:7px;color:var(--d1);cursor:pointer;text-decoration:none}
.gameview .pane-seg .pane-lnk:hover{color:var(--tx)}
.gameview .seg span.on{background:var(--ac);color:var(--ink)}
#v-props .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#v-props .bar,#v-props .two{width:min(1760px,95vw);position:relative;left:50%;transform:translateX(-50%)}   /* the MLB pane breaks out of the wrap; Games keeps wrap width because its main panel is not a pair */
@media(max-width:1100px){#v-props .bar,#v-props .two{width:100%;left:0;transform:none}#v-props .two{grid-template-columns:1fr}.gameview .bar{grid-template-columns:1fr;grid-template-areas:"title" "pane" "meta" "pills" "ctl"}.gameview .bar h1,.gameview .bar .meta{justify-self:center;text-align:center}}
.gameview .p{border-radius:var(--r-card);padding:13px 15px}
.gameview .gh{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--ln);margin-bottom:2px}
.gameview .gh h2{font-size:18px;font-weight:800;letter-spacing:-.03em;margin:0;text-transform:none;color:var(--tx)}
.gameview .gh h2 .hd2{font-family:var(--font-ui);font-size:10px;font-weight:500;color:var(--d2);margin-left:4px;letter-spacing:0}
.gameview .gh .vs{font-family:var(--font-ui);font-size:11px;color:var(--d1)}
.gameview .gh .vs b{color:var(--tx)}
.gameview .armbox{margin-left:auto;display:flex;align-items:center;gap:12px}
.gameview .armstat{font-family:var(--font-num);font-size:9.5px;color:var(--d2);text-align:right;line-height:1.5}
.gameview .armstat b{color:var(--tx);font-size:11px}
.gameview .armstat b i{font-style:italic;font-size:8px;color:var(--d2);margin-left:1px}
.gameview .hdr,.gameview .row{display:grid;grid-template-columns:16px 30px minmax(180px,1fr) 44px 64px 116px 38px 42px 46px 26px;gap:8px;align-items:center}
.gameview .hdr{padding:9px 0 7px;font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--d2);border-bottom:1px solid var(--ln-soft)}
.gameview .r{text-align:right}.gameview .c{text-align:center}
.gameview .row{height:38px;padding:0;border-top:1px solid var(--ln-soft);transition:background .13s}
.gameview .row:first-of-type{border-top:0}
.gameview .row:hover{background:hsl(var(--h) calc(40% * var(--si)) 70% / .045)}
.gameview .row.hot{background:linear-gradient(90deg,hsl(var(--h2) calc(90% * var(--ai)) 60% / .085),transparent 55%)}
.gameview .n1{font-family:var(--font-num);font-size:9.5px;color:var(--d2)}
.gameview .n2{font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:.04em;color:var(--d1)}
.gameview .nm{display:flex;align-items:center;gap:5px;min-width:0}
.gameview .nml{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:0}
.gameview .nm b{font-size:13px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;flex-shrink:0}
.gameview .fls{display:flex;gap:3px;min-width:0;overflow:hidden}
.gameview .fl{font-family:var(--font-ui);font-size:8px;font-weight:600;padding:1px 4px;border-radius:3px;background:hsl(var(--h) calc(18% * var(--si)) 20% / .8);color:var(--d1);white-space:nowrap}
.gameview .fl.pos{background:hsl(160 60% 45% / .15);color:var(--pos)}
.gameview .fl.neg{background:hsl(348 90% 65% / .15);color:var(--neg)}
.gameview .fl.w{background:hsl(42 95% 60% / .15);color:var(--wrn)}
.gameview .fl.n{background:transparent;border:1px dashed var(--d2);color:var(--d2)}
.gameview .row.thin{opacity:.5}.gameview .row.thin:hover{opacity:.8}
.gameview .eg{font-family:var(--font-num);font-size:12px;color:var(--d1);text-align:right;letter-spacing:-.02em}
.gameview .pv{font-family:var(--font-num);font-size:14px;text-align:right;display:flex;align-items:baseline;justify-content:flex-end;gap:4px;line-height:1.05}
.gameview .pv i{font-style:normal;font-size:8px;color:var(--d2)}
.gameview .rail{position:relative;height:14px;border-radius:7px;overflow:hidden;background:linear-gradient(180deg,hsl(var(--h) calc(26% * var(--si)) 5% / .95),hsl(var(--h) calc(22% * var(--si)) 9% / .95));box-shadow:0 2px 4px hsl(var(--shadow) / .85) inset}
.gameview .fill{position:absolute;left:0;top:0;bottom:0}
.gameview .mark{position:absolute;top:-3px;bottom:-3px;width:3px;border-radius:2px;transform:translateX(-50%);background:linear-gradient(180deg,#fff,hsl(var(--h) calc(30% * var(--si)) 88%));box-shadow:0 0 0 1px hsl(var(--h) calc(30% * var(--si)) 6% / .9),0 0 9px rgba(255,255,255,.85)}
.gameview .h2h{font-family:var(--font-num);font-size:9.5px;color:var(--d1);text-align:right}
.gameview .foot{display:flex;justify-content:space-between;font-family:var(--font-ui);font-size:10px;color:var(--d2);margin-top:9px;padding-top:8px;border-top:1px solid var(--ln)}
.gameview .foot b{color:var(--ac);font-family:var(--font-num);font-size:10.5px}
/* props-only: EV column, add button, slip */
#v-props .padd{width:24px;height:24px;border-radius:7px;border:1px solid var(--ln);background:transparent;color:var(--d1);font-family:var(--font-num);font-size:13px;line-height:1;cursor:pointer;padding:0;justify-self:end}
#v-props .padd:hover{border-color:var(--ac);color:var(--tx)}
#v-props .padd.on{background:var(--ac);border-color:var(--ac);color:var(--ink)}
#v-props .prow.inslip{background:hsl(var(--h2) calc(60% * var(--ai)) 50% / .10);box-shadow:inset 3px 0 0 var(--ac)}
#v-props .pev{font-family:var(--font-num);font-size:11.5px;color:var(--d2);text-align:right}
#v-props .pev.on{color:var(--pos);font-weight:500}
#v-props .pev.mid{color:var(--wrn)}
#v-props .pev.neg{color:var(--neg)}
#v-props .pfoot{font-family:var(--font-ui);font-size:10px;color:var(--d2);padding:10px 2px 70px;line-height:1.6}
.slip-fab{position:fixed;right:18px;bottom:64px;z-index:55;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;border:0;cursor:pointer;background:var(--ac);color:var(--ink);font-family:var(--font-ui);font-weight:700;font-size:12px;box-shadow:0 10px 30px hsl(var(--h2) calc(90% * var(--ai)) 50% / .35)}
.slip-fab b{font-family:var(--font-num);font-weight:500}
.slip-sheet{position:fixed;right:18px;bottom:116px;z-index:56;width:min(360px,calc(100vw - 36px));max-height:70vh;overflow:auto;background:var(--pnl);border:1px solid color-mix(in srgb,var(--ac) 45%,transparent);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 50px hsl(var(--h) calc(30% * var(--si)) 3% / .6)}
.slip-sheet[hidden]{display:none}
.slip-hd{display:flex;align-items:baseline;gap:10px;font-size:15px}
.slip-hd a{margin-left:auto;font-family:var(--font-ui);font-size:11px;color:var(--d1);text-decoration:none}.slip-hd a+a{margin-left:10px}
.slip-sheet .meta{display:block;font-family:var(--font-ui);font-size:9.5px;color:var(--d2)}
.slip-leg{display:grid;grid-template-columns:1fr auto auto 20px;gap:8px;align-items:center;padding:8px 10px;background:var(--bg);border-radius:9px;font-size:12px}
.slip-leg .r{text-align:right}.slip-leg .r b{font-family:var(--font-num)}
.slip-leg .sv{font-family:var(--font-ui);font-size:10px;color:var(--d2);text-decoration:none;margin-right:6px}.slip-leg .sv:hover{color:var(--ac)}
.slip-x{color:var(--d2);text-decoration:none;font-size:16px;text-align:center}.slip-x:hover{color:var(--neg)}
.slip-tot{border-top:1px solid var(--ln);padding-top:10px;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--d1)}
.slip-tot span{display:flex;justify-content:space-between}.slip-tot b{font-family:var(--font-num);color:var(--tx)}
.slip-save{display:flex;gap:8px;align-items:center;border-top:1px solid var(--ln);padding-top:10px}
.slip-save input{width:80px;font-family:var(--font-num);font-size:11px;padding:7px 8px;border-radius:7px;border:1px solid var(--ln);background:var(--bg);color:var(--tx)}
.slip-save button{flex:1;padding:9px;border-radius:9px;border:0;background:var(--ac);color:var(--ink);font-weight:700;font-size:12px;cursor:pointer}
.slip-links{display:flex;flex-direction:column;gap:6px}.slip-links a{display:block;text-align:center;padding:10px;border-radius:9px;background:var(--ac);color:var(--ink);font-weight:700;font-size:12px;text-decoration:none}
/* settings: saved bets / props cards */
.se-rec{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.se-rec div{background:var(--bg);border-radius:8px;padding:8px;text-align:center}
.se-rec b{display:block;font-family:var(--font-num);font-size:16px}
.se-bet{background:var(--bg);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.se-bet .hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px}
.se-bet .hd b{font-family:var(--font-num)}
.se-leg{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--d1)}
.se-leg i{font-style:normal;font-family:var(--font-num);font-size:10.5px}
.st-w{color:var(--pos)}.st-l{color:var(--neg)}.st-p{color:var(--d2)}
.se-bet .rm{margin-left:auto;font-family:var(--font-ui);font-size:10px;color:var(--d2);text-decoration:none}.se-bet .rm:hover{color:var(--neg)}

/* ================================================================ 10. team ranks + standings (Teams tab) */
.tr-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 16px;padding:12px 16px;border-radius:16px;background:linear-gradient(168deg,hsl(var(--h) calc(22% * var(--si)) 15% / .72),hsl(var(--h) calc(24% * var(--si)) 8% / .8));border:1px solid var(--ln);border-top-color:var(--ln-lit);backdrop-filter:blur(20px)}
.tr-bar h1{font-size:16px;font-weight:800;letter-spacing:-.03em;margin:0}
.tr-bar .meta{font-family:var(--font-ui);font-size:11px;color:var(--d2)}
.tr-bar .seg{display:flex;gap:2px;padding:3px;border-radius:var(--r-ctl);background:var(--field);border:1px solid var(--ln)}
.tr-bar .seg span{font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:-.01em;padding:5px 11px;border-radius:7px;color:var(--d1);cursor:pointer}
.tr-bar .seg span.on{background:var(--ac);color:var(--ink)}
.tr-wrap{display:flex;gap:16px;align-items:flex-start}
.tr-tbl{flex:1;min-width:0;background:hsl(var(--h) calc(22% * var(--si)) 9% / .75);border:1px solid var(--ln);border-top-color:var(--ln-lit);border-radius:var(--r-panel);padding:8px;box-shadow:0 20px 50px -30px hsl(var(--shadow) / .8);overflow-x:auto}
.tr-hdr{height:34px;font-family:var(--font-ui);font-size:10.5px;font-weight:600;color:var(--d2);position:sticky;top:0;z-index:1;background:hsl(var(--h) calc(22% * var(--si)) 9% / .95);border-radius:10px}
.tr-row{height:48px;border-radius:12px;cursor:pointer;transition:background .12s;font-size:13px}
.tr-row:nth-child(even){background:hsl(var(--h) calc(20% * var(--si)) 50% / .035)}
.tr-row:hover{background:hsl(var(--h) calc(40% * var(--si)) 70% / .07)}
.tr-row.on{background:color-mix(in srgb,var(--ac) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent)}
.tr-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-family:var(--font-num);font-size:11px;color:var(--d1);background:hsl(var(--h) calc(14% * var(--si)) 62% / .10)}
.tr-n.top{background:color-mix(in srgb,var(--pos) 18%,transparent);color:var(--pos)}.tr-n.bot{background:color-mix(in srgb,var(--neg) 16%,transparent);color:var(--neg)}
.tr-team{display:flex;align-items:baseline;gap:8px;min-width:0}.tr-team b{font-size:14.5px;font-weight:800;letter-spacing:-.02em}.tr-team small{color:var(--d2);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-rec{font-family:var(--font-num);font-size:12px;color:var(--d1)}
.tr-py{position:relative;display:flex;align-items:center;gap:10px}.tr-py u{display:block;flex:0 0 auto;height:6px;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 45%,transparent),var(--ac));max-width:84px}
.tr-py u.neg{background:linear-gradient(90deg,color-mix(in srgb,var(--neg) 35%,transparent),color-mix(in srgb,var(--neg) 75%,transparent))}
.tr-py b{font-family:var(--font-num);font-size:12.5px;font-weight:500}
.tr-qb{font-family:var(--font-ui);font-size:12px;color:var(--d1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tr-qb b{font-family:var(--font-num);font-weight:500;margin-left:4px}
.tr-chip{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:24px;padding:0 8px;border-radius:999px;font-family:var(--font-num);font-size:11px;background:hsl(var(--h) calc(14% * var(--si)) 62% / .10);color:var(--d1);font-style:normal}
.tr-chip.top{background:color-mix(in srgb,var(--pos) 20%,transparent);color:var(--pos);font-weight:600}.tr-chip.good{background:color-mix(in srgb,var(--pos) 9%,transparent);color:color-mix(in srgb,var(--pos) 75%,var(--tx))}
.tr-chip.bot{background:color-mix(in srgb,var(--neg) 18%,transparent);color:var(--neg);font-weight:600}.tr-chip.low{background:color-mix(in srgb,var(--neg) 8%,transparent);color:color-mix(in srgb,var(--neg) 70%,var(--tx))}
.tr-chip.proj{box-shadow:inset 0 0 0 1px var(--ln);border:1px dashed var(--d2);opacity:.8}
.tr-drawer{width:330px;flex:none;background:hsl(var(--h) calc(22% * var(--si)) 9% / .75);border:1px solid color-mix(in srgb,var(--ac) 40%,transparent);border-top-color:color-mix(in srgb,var(--ac) 65%,transparent);border-radius:var(--r-panel);padding:18px;display:flex;flex-direction:column;gap:16px;position:sticky;top:12px;box-shadow:0 20px 50px -30px hsl(var(--shadow) / .8)}
.tr-drawer .meta{font-family:var(--font-ui);font-size:11px;color:var(--d2)}
.tr-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tr-cells div{background:hsl(var(--h) calc(20% * var(--si)) 13% / .6);border:1px solid var(--ln);border-radius:12px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.tr-cells div.proj{border-style:dashed}.tr-cells div.proj b{color:var(--d1)}
.tr-cells b{font-size:20px;font-weight:800;letter-spacing:-.02em}.tr-cells i{font-style:normal;font-family:var(--font-num);font-size:10.5px;color:var(--d1)}
.tr-list{display:flex;flex-direction:column;gap:5px}.tr-list>span{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}.tr-list>span.meta{font-size:10.5px;font-weight:600;color:var(--d2);margin-bottom:2px}
.tr-list em{font-style:normal}.tr-list i{font-style:normal;font-family:var(--font-num);font-size:11px;color:var(--d1);white-space:nowrap}
.tr-more{font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--ac);text-decoration:none;margin-top:2px}.tr-more:hover{text-decoration:underline}
/* standings */
.st-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 6px 0 0;vertical-align:middle}
.st-div{background:var(--pnl);border:1px solid var(--ln);border-top-color:var(--ln-lit);border-radius:12px;padding:12px 8px 6px;min-width:0;overflow-x:auto}
.st-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 8px 8px;font-size:13px}
.st-h .meta{font-family:var(--font-ui);font-size:10px;color:var(--d2)}
.st-hdr{font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--d2);border-bottom:1px solid var(--ln)}
.st-row{font-size:13px;border-bottom:1px solid var(--ln-soft)}.st-row:last-child{border-bottom:0}
.st-row .r,.st-hdr .r{text-align:right;font-family:var(--font-num);font-size:12px}
.st-row.lead{font-weight:600;background:color-mix(in srgb,var(--pos) 7%,transparent);border-radius:8px}.st-row.lead .r{color:var(--tx)}
.st-row .r{color:var(--d1)}.st-row a.tl{border-bottom:0;font-size:14px;font-weight:600}.st-row.lead a.tl{color:var(--tx)}
.st-wc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--pnl);border:1px solid var(--ln);border-top-color:var(--ln-lit);border-radius:10px;padding:8px 12px;margin-bottom:16px}
.st-wc .meta{margin-right:4px;letter-spacing:.06em;font-family:var(--font-ui);font-size:10px;color:var(--d2)}
.st-wct{font-size:12px;color:var(--d1);padding:4px 10px;border-radius:7px}.st-wct b{color:var(--tx)}.st-wct i{font-style:normal;font-family:var(--font-num);font-size:10.5px;color:var(--d2);margin-left:4px}
.st-wct.in{background:hsl(42 95% 60% / .10)}.st-wct.in i{color:var(--wrn)}