
:root{
  --bg:#0A0A0C; --row:#101013; --row2:#16161A; --hl:#1B1B20;
  --line:#1C1C21; --rule:#2A2A31;
  --txt:#E9E9EC; --mut:#86868F; --dim:#54545C;
  --gold:#F4B233; --grn:#34D399; --red:#FF4438; --blue:#5E9BFF;
  --bar-bets:#6E7A88; --bar-mon:#F4B233;   /* steel-gray bets vs gold money */
  --rk-top:#5E8F73; --rk-bot:#B5645C; --rk-mid:#6A6A74;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:"Saira",system-ui,sans-serif;
  font-size:14px;line-height:1.3;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono,.ml,.f5,.c-b,.c-m,.cn{font-family:"Spline Sans Mono",monospace;font-variant-numeric:tabular-nums}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:11px;
  padding:10px 18px;background:#0C0C0F;border-bottom:1px solid var(--rule)}
.bm{font-weight:800;font-size:17px;letter-spacing:.02em}
.bm span{color:var(--gold)}
.top .sep{color:var(--dim)}
.lg-mlb{font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--mut);
  border:1px solid var(--rule);padding:2px 8px;border-radius:3px}
.meta{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--mut);margin-left:6px}
.upd{margin-left:auto;font-family:"Spline Sans Mono",monospace;font-size:10.5px;letter-spacing:.08em;color:var(--dim)}

/* board = grid of distinct game tiles, multiple across the screen */
.board{max-width:1280px;margin:0 auto;padding:10px 16px 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(348px,1fr));gap:13px}
.g{display:flex;flex-direction:column;background:var(--row2);border:1px solid var(--rule);
  transition:border-color .12s,background .12s}
.g:hover{border-color:#414959;background:var(--hl)}
.gh{display:flex;align-items:center;gap:10px;padding:8px 13px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.018)}
.st{font-family:"Spline Sans Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--mut)}
.st.live{color:#fff;display:inline-flex;align-items:center;gap:5px} .st.fin{color:var(--dim)}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 6px rgba(255,68,56,.8);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.outs{display:inline-flex;gap:3px;align-items:center;margin-left:2px}
.outs i{width:6px;height:6px;border-radius:50%;border:1px solid var(--dim);box-sizing:border-box}
.outs i.on{background:var(--red);border-color:var(--red)}
.bases{position:relative;width:24px;height:19px;margin-left:3px;flex:none}
.bases .bs{position:absolute;width:8px;height:8px;border:1px solid var(--dim);
  transform:rotate(45deg);box-sizing:border-box}
.bases .bs.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 5px rgba(244,178,51,.6)}
.bases .b2{top:0;left:8px} .bases .b3{top:8px;left:1px} .bases .b1{top:8px;left:15px}
.mr.score{flex-direction:row;align-items:center;justify-content:flex-end}
.runs{font-family:"Spline Sans Mono",monospace;font-size:25px;font-weight:700;
  color:#3C3C44;min-width:26px;text-align:right;line-height:1}
.runs.win{color:var(--grn);font-weight:800;font-size:29px}
.runs.lead{color:#fff;font-weight:800;font-size:29px}
.tl.win .nm{color:#fff;font-weight:800}
.tl.lead .nm{color:#fff;font-weight:800}
.lt{font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.07em;font-weight:600}
.lt.in{color:var(--grn)} .lt.no{color:var(--dim)}
.arr{margin-left:auto;font-family:"Spline Sans Mono",monospace;font-size:14px;color:var(--dim)}
.g:hover .arr{color:var(--gold)}

.tls{padding:9px 13px 5px}
.tl{display:flex;align-items:center;gap:11px;padding:7px 0}
.tl+.tl{border-top:1px solid var(--line)}
/* FINAL winner: green left bar + tint bleeding from the name side so it scans on the left */
.tl.win{margin:0 -13px;padding:7px 13px 7px 10px;border-left:3px solid var(--grn);
  background:linear-gradient(90deg,rgba(52,211,153,.14),rgba(52,211,153,0) 55%)}
.tl.win+.tl{border-top:0}
/* LIVE leader: emphasis only (bold/enlarged via .nm + .runs.lead), no green/tint */
.tlg{width:30px;height:30px;object-fit:contain;flex:none}
.ti{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nm{font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm i{font-style:normal;font-size:11.5px;color:var(--dim);margin-left:7px;font-family:"Spline Sans Mono",monospace}
.sp{font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp em{font-style:normal;color:var(--gold);font-weight:700;font-size:9.5px;letter-spacing:.03em;margin-right:1px}
.sp .tbd{color:var(--dim);font-style:italic}
.mr{display:flex;flex-direction:column;gap:3px;align-items:flex-end;flex:none}
.ol{display:grid;grid-template-columns:16px 46px auto;align-items:center;gap:6px;
  font-family:"Spline Sans Mono",monospace}
.ol i{font-style:normal;font-size:8.5px;letter-spacing:.06em;color:var(--dim);text-align:left}
.ol b{font-size:15px;font-weight:700;color:var(--txt);text-align:right}
.ol b.fav{color:var(--gold)} .ol b.dash{color:var(--dim);font-weight:400}
.ol+.ol b{font-size:12.5px;color:var(--mut);font-weight:600}
.ol+.ol b.fav{color:var(--gold)}

/* brand-colored sportsbook labels — colored text, no fill */
.bkb{display:inline-block;font-family:"Spline Sans Mono",monospace;
  font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.bk-draftkings{color:#57C84A}
.bk-fanduel{color:#2A9DF4}
.bk-betmgm{color:#CDA64C}
.bk-caesars{color:#C0993F}
.bk-bet365{color:#E2C400}
a.bkb:hover{text-decoration:underline}

/* detail odds table */
.odds-tbl{display:grid;gap:1px;background:var(--line)}
.odr{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;
  background:var(--row2);padding:11px 13px}
.odr .lgsm{width:22px;height:22px;object-fit:contain}
.odt{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;min-width:0}
.odc{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:70px}
.odc i{font-style:normal;font-family:"Spline Sans Mono",monospace;font-size:8.5px;letter-spacing:.1em;color:var(--dim)}
.odc b{font-family:"Spline Sans Mono",monospace;font-size:17px;font-weight:700}
.odc b.dash{color:var(--dim);font-weight:400}
.odc .bkb{margin-top:4px;font-size:10px}

/* money meter — see the lean, don't compute it */
.mtrs{margin-top:auto;padding:9px 13px 11px;border-top:1px solid var(--line);display:grid;gap:6px}
.mtrs.none{font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.06em;color:var(--dim);text-align:center}
.mtr{display:grid;grid-template-columns:44px 24px 1fr 24px 78px;align-items:center;gap:7px}
.ml-lbl{font-family:"Spline Sans Mono",monospace;font-size:9px;letter-spacing:.1em;color:var(--dim);font-weight:600}
.end{font-family:"Spline Sans Mono",monospace;font-size:10px;font-weight:700;color:var(--mut)}
.end.r{text-align:right}
.bar{height:7px;background:#08080A;border-radius:0;overflow:hidden}
.bar .fill{display:block;height:100%}
.fill.bets{background:var(--bar-bets)} .fill.mon{background:var(--bar-mon)}
.pct{font-family:"Spline Sans Mono",monospace;font-size:10.5px;color:var(--mut);text-align:right;white-space:nowrap}
.pct i{font-style:normal;color:var(--dim);margin:0 1px}

.legend{max-width:1280px;margin:16px auto 0;padding:0 16px;font-family:"Spline Sans Mono",monospace;
  font-size:10.5px;line-height:1.6;letter-spacing:.03em;color:var(--dim)}
.legend .bl{color:var(--bar-bets)} .legend .gr{color:var(--bar-mon)}

/* team profile · league rank */
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tp{padding:0 16px 0 11px;border-left:3px solid var(--c)}
.tp+.tp{border-left:1px solid var(--line);padding-left:16px}
.tp h4{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--mut);margin-bottom:10px}
.tp-grp{margin-bottom:10px}
.tp-h{font-family:"Spline Sans Mono",monospace;font-size:9px;letter-spacing:.12em;color:var(--dim);display:block;margin-bottom:5px}
.tp-s{display:flex;flex-wrap:wrap;gap:6px}
.sc{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--line);padding:3px 7px}
.sc b{font-weight:600;font-size:10px;color:var(--dim);font-family:"Spline Sans Mono",monospace}
.sc u{text-decoration:none;font-family:"Spline Sans Mono",monospace;font-size:12.5px;font-weight:600;color:var(--txt)}
.rk{font-family:"Spline Sans Mono",monospace;font-size:10px;font-weight:700;padding:1px 4px;border-radius:2px}
.rk.r-top{color:var(--rk-top);background:rgba(94,143,115,.14)}
.rk.r-bot{color:var(--rk-bot);background:rgba(181,100,92,.14)}
.rk.r-mid{color:var(--rk-mid);background:rgba(106,106,116,.14)}

/* footer */
.ft{max-width:980px;margin:30px auto 0;padding:14px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:6px 22px;font-family:"Spline Sans Mono",monospace;
  font-size:10.5px;letter-spacing:.04em;color:var(--dim)}
.ft b{color:var(--gold)}

/* ---------- detail ---------- */
.dg{max-width:840px;margin:0 auto;padding:0 14px 50px}
.back{display:inline-block;font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.1em;
  color:var(--mut);padding:14px 0 12px}
.back:hover{color:var(--gold)}
.dhead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  border:1px solid var(--rule);border-radius:0;padding:16px;background:var(--row)}
.dt{display:flex;flex-direction:column;gap:1px;padding-left:11px;border-left:3px solid var(--c)}
.dt.r{text-align:right;padding-left:0;padding-right:11px;border-left:0;border-right:3px solid var(--c);align-items:flex-end}
.dab{font-weight:800;font-size:22px;letter-spacing:.02em}
.dnm{font-size:13px;color:var(--mut)}
.drec{font-family:"Spline Sans Mono",monospace;font-size:11px;color:var(--dim)}
.dmid{display:flex;flex-direction:column;align-items:center;gap:5px}
.dat{font-weight:800;color:var(--dim)}

.sec{border:1px solid var(--line);border-top:0;padding:15px 16px}
.sec:first-of-type{border-top:1px solid var(--line)}
.dg .sec{margin-top:0}
.sec h3{font-family:"Spline Sans Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:12px}

.dsp-row{display:grid;grid-template-columns:1fr 1fr;gap:0}
.dsp{display:flex;flex-direction:column;gap:2px;padding:2px 0 2px 11px;border-left:3px solid var(--c)}
.dsp+.dsp{padding-left:14px}
.dsp-ab{font-family:"Spline Sans Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--dim)}
.dsp-n{font-size:15px;font-weight:600}
.dsp-n em{font-style:normal;font-size:11px;color:var(--gold);font-weight:700;margin-left:4px}
.dsp-l{font-family:"Spline Sans Mono",monospace;font-size:12px;color:var(--mut)}

.oline{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.ocell{display:flex;flex-direction:column;justify-content:center;min-width:88px;padding:8px 16px 8px 0;
  font-family:"Spline Sans Mono",monospace;font-size:20px;font-weight:700;border-right:1px solid var(--line)}
.ocell i{font-style:normal;font-family:"Spline Sans Mono",monospace;font-size:9.5px;letter-spacing:.12em;color:var(--dim);font-weight:600}
.ocell.hi{color:var(--gold)} .ocell.hi u{text-decoration:none;font-size:10px;color:var(--mut)}
.ocell:last-of-type{border-right:0}
.betbtn{margin-left:auto;align-self:center;background:var(--gold);color:#000;font-weight:700;
  font-family:"Spline Sans Mono",monospace;font-size:13px;letter-spacing:.02em;padding:9px 14px}
.betbtn:hover{filter:brightness(1.1)}

.cr{display:grid;grid-template-columns:44px 56px 56px 1fr;align-items:center;gap:12px;padding:5px 0}
.cl{font-weight:700;font-size:14px}
.cn{font-family:"Spline Sans Mono",monospace;font-size:15px;font-weight:600;color:var(--mut)}
.cn i{font-style:normal;font-size:9px;color:var(--dim);margin-left:2px}
.cn.shp{color:var(--grn);font-weight:700}
.cbar{height:6px;display:flex;gap:2px;background:transparent}
.cbar i{display:block;height:100%}
.cbar .bb{background:var(--bar-bets)} .cbar .bm{background:var(--bar-mon)}

.lu-row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.lu-row h4{font-family:"Spline Sans Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--mut);margin-bottom:8px}
.lu{list-style:none}
.lu li{display:grid;grid-template-columns:18px 1fr auto auto;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--line)}
.lu .o{font-family:"Spline Sans Mono",monospace;font-size:11px;color:var(--dim)}
.lu .n{font-size:13px}
.lu .h{font-family:"Spline Sans Mono",monospace;font-size:10px;color:var(--mut)}
.lu .p{font-family:"Spline Sans Mono",monospace;font-size:10px;color:var(--dim);min-width:24px;text-align:right}
.nolu{font-family:"Spline Sans Mono",monospace;font-size:11px;color:var(--dim);padding:6px 0}

@media(max-width:620px){
  .bhd,.tm{grid-template-columns:1fr 50px 36px 34px 34px}
  .bhd span:nth-child(3),.c-f5{display:none}
  .tm .nm i,.bsp{display:none}
  .oline{gap:0}
  .lu-row,.dsp-row{grid-template-columns:1fr;gap:16px}
}
