:root{
  --navy:#0c2c56; --teal:#005c5c; --silver:#c4ced4; --gold:#d4b35a;
  --bg:#0a1f3a; --card:#11294a; --card2:#0e2342; --line:#1f3d63;
  --text:#eaf1f8; --muted:#9fb2c8; --win:#3ec06f; --loss:#e0596b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#08182e}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(160deg,#08182e 0%,#0a1f3a 50%,#0c2546 100%);
  color:var(--text); min-height:100vh; padding:24px 16px; overflow-x:clip;
}
.wrap{max-width:880px;margin:0 auto}
.topbar{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:18px;min-height:46px}
.brand{display:flex;align-items:center;gap:12px;margin:0 auto}
.brand-lockup{height:46px;width:auto;display:block}

/* header icon buttons (find / refresh) */
.iconbtn{background:var(--card);border:1px solid var(--line);border-radius:999px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--gold);cursor:pointer;padding:0}
.iconbtn:hover{border-color:var(--gold)}
.iconbtn:active{background:var(--card2)}
.findbtn{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.controls{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px}

.nav{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;justify-content:center}
.nav a{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;padding:7px 14px;border-radius:999px;border:1px solid var(--line)}
.nav a.active{color:var(--navy);background:var(--gold);border-color:var(--gold)}
.nav a:hover:not(.active){border-color:var(--gold);color:var(--text)}
.stickyhead{position:sticky;top:0;z-index:40;background:#0a1f3a;margin:-24px calc(50% - 50vw) 16px;padding:14px calc(50vw - 50%) 10px;border-bottom:1px solid var(--line)}
.stickyhead .nav{margin-bottom:0}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--win);margin-right:6px;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px;box-shadow:0 6px 24px rgba(0,0,0,.25)}

/* game navigation bar */
.gamenav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:0 2px}
.navbtn{background:var(--card);border:1px solid var(--line);border-radius:999px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:20px;font-weight:700;line-height:1;cursor:pointer;padding:0}
.navbtn:hover:not(:disabled){border-color:var(--gold)}
.navbtn:disabled{opacity:.35;cursor:default}
.gn-mid{text-align:center;flex:1}
.gn-date{font-size:13px;font-weight:700;color:var(--text)}
.gn-status{font-size:11px;color:var(--muted)}
.gn-status.live{color:var(--win)}

/* scoreboard */
.status-line{text-align:center;font-size:13px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.status-line.live{color:var(--win)}
.status-wrap{text-align:center;margin-bottom:14px}
.disrupt{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);background:var(--gold);padding:6px 14px;border-radius:999px}
.disrupt.severe{background:var(--loss);color:#fff}
.disrupt-when{font-size:12px;color:var(--muted);margin-top:6px}
.autorefresh{text-align:center;font-size:11px;color:var(--muted);margin:-8px 0 12px}
.lineup-link{display:block;text-align:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);color:var(--gold);font-size:13px;font-weight:600;text-decoration:none}
.lineup-link:hover{color:var(--text)}
.airing{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;font-size:12px}
.airing-lbl{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--navy);background:var(--gold);padding:2px 7px;border-radius:4px}
.airing .net{color:var(--text);font-weight:600}
.airing .nat{color:var(--gold);font-size:10px;font-weight:700;margin-left:3px}
.airing .bsep{color:var(--line)}
.matchup{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px}
.sb-team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.sb-team img{width:72px;height:72px;background:#f4f7fa;border-radius:50%;padding:3px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.sb-team .name{font-size:15px;font-weight:700}
.sb-team .rec{font-size:12px;color:var(--muted)}
.sb-score{font-size:54px;font-weight:800;line-height:1;min-width:64px;text-align:center;padding-top:12px}
.sb-score.dim{color:var(--muted)}
.vs{font-size:13px;color:var(--muted);font-weight:600;padding-top:6px}
.winner-tag{font-size:10px;font-weight:700;color:var(--win);letter-spacing:.5px}

/* situation */
.situation{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.diamond{position:relative;width:84px;height:84px;margin:0 auto}
.base{position:absolute;width:20px;height:20px;background:#22416b;border:1.5px solid #3a5d8c;transform:rotate(45deg)}
.base.on{background:var(--gold);border-color:var(--gold)}
.base.second{top:6px;left:32px}
.base.third{top:32px;left:6px}
.base.first{top:32px;left:58px}
.base.home{top:58px;left:32px;background:#0a1f3a}
.countinfo{font-size:14px}
.countinfo .row{margin-bottom:5px}
.countinfo b{color:var(--gold)}
.outs{display:inline-flex;gap:4px;vertical-align:middle;margin-left:4px}
.out{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted)}
.out.on{background:var(--loss);border-color:var(--loss)}
.pa{font-size:12px;color:var(--muted);margin-top:6px}
.pa b{color:var(--text)}

/* tables (linescore / standings / schedule) */
h2{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 6px;text-align:center;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:11px}
td.tm{text-align:left;font-weight:700;white-space:nowrap}
td.rhe{font-weight:800;color:var(--gold)}
.ls-wrap{overflow-x:auto}

/* plays */
.play{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.play:last-child{border-bottom:none}
.play .inn{flex:0 0 44px;font-size:11px;color:var(--muted);font-weight:700;text-align:center;padding-top:2px}
.play .desc{font-size:13px;line-height:1.45}
.play.scoring{background:rgba(212,179,90,.07);margin:0 -10px;padding:12px 10px;border-radius:8px}
.play.scoring .desc{color:#fbe9bf}
.play.pchange .desc{color:var(--muted);font-style:italic}
.pc-ico{color:#39b9c9;font-style:normal;font-weight:700;margin-right:3px}
.score-badge{display:inline-block;font-size:11px;font-weight:800;color:var(--navy);background:var(--gold);border-radius:4px;padding:1px 6px;margin-right:6px}
.pbp-toggle{display:block;width:100%;margin-top:12px;padding:10px;background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--gold);font-size:13px;font-weight:600;cursor:pointer}
.pbp-toggle:hover{border-color:var(--gold)}
.decisions{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;margin-top:4px}
.decisions .d span{color:var(--muted)}

.footer{text-align:center;font-size:11px;color:var(--muted);margin-top:6px}
.footer a{color:var(--gold);text-decoration:none}
.app-cta{color:#e8c25a;font-weight:600;text-decoration:none}
.loading,.err{text-align:center;padding:40px;color:var(--muted)}
.err{color:var(--loss)}

/* countdown */
.cd{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:9px 14px;margin-bottom:16px;font-size:13px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.cd-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--gold);font-weight:700}
.cd-match{display:flex;align-items:center;gap:5px;font-weight:700}
.cd-match img{width:20px;height:20px;vertical-align:middle;background:#f4f7fa;border-radius:50%;padding:2px}
.cd-when{color:var(--muted);font-size:12px}
.cd-clock{font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.cd-sep{color:var(--line)}
@media(max-width:560px){.cd-when{display:none}}

/* "Find a Game" modal calendar */
.modal{position:fixed;inset:0;z-index:100;background:rgba(4,12,24,.72);display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow:auto}
.modal[hidden]{display:none}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-head h2{margin:0;color:var(--text);font-size:15px;text-transform:none;letter-spacing:0}
.modal-btn{background:none;border:none;color:var(--gold);font-size:14px;font-weight:600;cursor:pointer;padding:4px}
.cal-monthrow{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-month{font-size:16px;font-weight:800;color:var(--text)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-wd{font-size:11px;font-weight:600;color:var(--muted);text-align:center;padding-bottom:2px}
.cal-cell{height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:8px}
.cal-cell .d{font-size:9px;font-weight:600;color:var(--muted)}
.cal-cell.empty .d{color:rgba(159,178,200,.4);font-size:12px}
.cal-cell.game{cursor:pointer}
.cal-cell.game:hover{background:var(--card2)}
.cal-cell.current{background:rgba(212,179,90,.18);outline:1px solid var(--gold)}
.cal-cell img{width:24px;height:24px;background:#f4f7fa;border-radius:50%;padding:2px}

/* add-to-home-screen banner */
.a2hs{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--gold);border-radius:12px;padding:12px 14px;font-size:13px;box-shadow:0 12px 32px rgba(0,0,0,.55)}
.a2hs[hidden]{display:none}
.a2hs-txt{flex:1;color:var(--text);line-height:1.45}
.a2hs-txt b{color:var(--gold)}
.a2hs .shareico{vertical-align:-3px;color:var(--gold)}
.a2hs-x{background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;flex:0 0 auto;padding:0 2px}

@media(max-width:560px){
  .sb-score{font-size:40px;min-width:48px}
  .sb-team img{width:56px;height:56px}
  .situation{grid-template-columns:1fr}
}