/* DunkChaser - NBA Playoff Odds — Light/Dark Theme (palette system inherited from BaseChaser via BlitzChaser) */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── DunkChaser components ─────────────────────────────────────────────── */
.logo-icon svg { width: 44px; height: 30px; }
.dim { color: var(--text-muted); }
.section-note { margin-top: 10px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
/* Horizontal scroll ONLY at widths where the table actually overflows (<1024px).
   An overflow value here at wider widths makes this div a scroll container, which
   scopes the standings' sticky column header to a box that never scrolls
   vertically — the header then rides off the top of the page instead of pinning. */
.table-scroll { -webkit-overflow-scrolling: touch; }
@media (max-width: 1023px) { .table-scroll { overflow-x: auto; } }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 500; margin: 16px 0 4px; }
.page-h1 { font-size: 24px; font-weight: 800; margin: 8px 0 4px; font-family: var(--font-display); }
.page-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 20px; }
.game-wp { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.seed-tag { display: inline-block; min-width: 16px; padding: 0 4px; margin-right: 6px; border-radius: 4px; background: var(--accent); color: var(--bg); font-size: 10px; font-weight: 800; text-align: center; line-height: 16px; font-variant-numeric: tabular-nums; vertical-align: middle; }
.teams-dropdown:hover .teams-mega, .teams-dropdown:focus-within .teams-mega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
.teams-division .tm-logo { width: 18px; height: 18px; object-fit: contain; }
.teams-division .tm-pct { margin-left: auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Odds board */
.ob-confs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ob-conf-title { font-size: 12px; font-weight: 800; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.ob-div { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; }
.ob-div-head, .ob-row { display: grid; grid-template-columns: minmax(0, 1fr) 78px 50px 54px 44px 58px; align-items: center; gap: 6px; padding: 8px 12px; }
.ob-div-head { background: var(--bg-elevated); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); }
.ob-div-name { font-size: 12px; color: var(--text); }
.ob-h { text-align: right; }
.ob-row { border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.ob-row:last-child { border-bottom: none; }
.ob-row:hover { background: var(--bg-card-hover); }
.ob-row.eliminated { opacity: .55; }
.ob-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ob-team img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.ob-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-rec { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob-cell { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ob-cell.dim { color: var(--text-muted); font-weight: 500; }
.ob-pct { font-weight: 800; }
.ob-delta { font-size: 10px; font-weight: 700; margin-left: 4px; }
.ob-delta.pos { color: var(--green); }
.ob-delta.neg { color: var(--red); }

/* Playoff picture */
.pp-confs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-conf { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 14px 8px; overflow-x: auto; }
.pp-title { font-size: 12px; font-weight: 800; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-table th { font-size: 10px; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--border); font-weight: 700; }
.pp-table th.al, .pp-table td.al { text-align: left; }
.pp-table td { padding: 6px; text-align: right; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp-table tr { cursor: pointer; }
.pp-table tr:hover td { background: var(--bg-card-hover); }
.pp-table tr.pp-out td { color: var(--text-muted); }
.pp-table tr.pp-out td.pp-team { color: var(--text); }
.pp-table tr.pp-cut td { border-bottom: 2px dashed var(--accent); }
.pp-seed { font-weight: 800; color: var(--text-muted); }
.pp-team { font-weight: 600; }
.pp-team img { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.pp-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted); }
.pp-tag.top { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 45%, transparent); background: color-mix(in srgb, var(--yellow) 14%, transparent); }
.pp-tag.div { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 14%, transparent); }
.pp-tag.wc { color: var(--purple); border-color: color-mix(in srgb, var(--blue) 45%, transparent); background: color-mix(in srgb, var(--blue) 14%, transparent); }

@media (max-width: 900px) {
  .ob-confs, .pp-confs { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ob-div-head, .ob-row { grid-template-columns: minmax(0, 1fr) 54px 40px 44px 34px 46px; padding: 7px 6px; gap: 3px; font-size: 12px; }
  .ob-h { font-size: 9px; letter-spacing: 0.02em; }
  .ob-team { flex-wrap: wrap; row-gap: 1px; }
  .ob-rec { flex-basis: 100%; margin-left: 28px; font-size: 11px; line-height: 1.2; }
  .ob-team img { width: 20px; height: 20px; }
  .pp-table th:nth-child(4), .pp-table td:nth-child(4), .pp-table th:nth-child(5), .pp-table td:nth-child(5) { display: none; }
  .pp-conf { padding: 10px 8px 6px; }
}

.share-dropdown {
  position: absolute; top: 100%; right: 0; z-index: 200;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  min-width: 180px; padding: 6px 0; margin-top: 6px;
}
.share-dropdown a {
  display: block; padding: 8px 16px; font-size: 13px; font-weight: 500;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.share-dropdown a:hover { background: var(--bg-card-hover); text-decoration: none; }

/* ── Light Theme (default) ──
   Spacing follows a 4px grid. Uppercase micro-labels use --ls-caps.
   Numeric data always gets font-variant-numeric: tabular-nums. */
:root, :root[data-theme="light"] {
  /* "Hardwood" palette — maple-court paper, walnut ink, lane-paint royal blue
     as the anchor. The DEFAULT, so it applies with no data-palette attribute. */
  --bg: #f5eee1;
  --bg-card: #fffbf4;
  --bg-card-hover: #f1e8d8;
  --bg-elevated: #ebe1cf;
  --border: #dccfb8;
  --text: #241a12;
  --text-muted: #63523f; /* 6.5:1 on the paper, 5.6:1 on elevated */
  --text-dim: #63523f;   /* collapsed into muted: dim grays fail WCAG on every surface */
  --green: #0a5c42;
  --green-dim: #dcefe6;
  --yellow: #8a5b00;
  --yellow-dim: #f4ead0;
  --red: #b8400e;
  --red-dim: #fbe7dc;
  --blue: #2c47b8;
  --blue-dim: #dfe4f7;
  --purple: #7a3e9d;
  --accent: #2c47b8;
  --header-bg: rgba(255, 251, 244, 0.95);
  /* Scoreboard module ground: one clear step down from the page's paper so the
     games grid reads as its own module without a dark box. */
  --panel-bg: #e4dbc9;
  --panel-border: #d2c5ab;
  --shadow: 0 4px 6px rgba(36,26,18,0.08);
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 20px;
  --ls-caps: 0.06em;
  /* Typography: display face for wordmark/headings, technical body face. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Dark Theme ── */
:root[data-theme="dark"] {
  /* Hardwood after the lights go down — arena-dark walnut, cream ink */
  --bg: #15110d;
  --bg-card: #1e1813;
  --bg-card-hover: #261f18;
  --bg-elevated: #2c241c;
  --border: #3d3328;
  --text: #f1e9dc;
  --text-muted: #b3a48f;
  --text-dim: #b3a48f;
  --green: #45d9a3;
  --green-dim: #0f2d1c;
  --yellow: #e5b04e;
  --yellow-dim: #33270f;
  --red: #ff7461;
  --red-dim: #3a1f1c;
  --blue: #8da2ff;
  --blue-dim: #1e2547;
  --purple: #c48fe6;
  --accent: #8da2ff;
  --header-bg: rgba(21, 17, 13, 0.95);
  /* Dark mode drops the panel entirely — the page ground already reads as one */
  --panel-bg: transparent;
  --panel-border: transparent;
  --shadow: 0 4px 6px rgba(0,0,0,0.45);
  --radius: 8px;
  --radius-lg: 12px;
  --ls-caps: 0.06em;
}

/* ── Selectable palettes ──
   Hardwood above is the default and applies with no data-palette attribute.
   Each palette below ships a full light AND dark token set, and derives its
   own scoreboard-module ground (--panel-bg/--panel-border) from its paper. */
/* "Harbor" — the BlitzChaser default: teal anchor, sea-glass neutrals */
:root[data-palette="harbor"] {
  --bg: #f0f5f6;
  --bg-card: #ffffff;
  --bg-card-hover: #e9f1f2;
  --bg-elevated: #e2ecee;
  --border: #d3e2e5;
  --text: #16323a;
  --text-muted: #486670; /* 4.6:1 on the scoreboard panel, 5.1:1 on elevated, 6.2:1 on cards */
  --text-dim: #486670; /* collapsed into muted: dim grays fail WCAG on every surface */
  --green: #0a5c42;
  --green-dim: #dcefe6;
  --yellow: #8a5b00;
  --yellow-dim: #f4ead0;
  --red: #b8400e;
  --red-dim: #fbe7dc;
  --blue: #0f7488;
  --blue-dim: #d9eef2;
  --purple: #0f7488;
  --accent: #0f7488;
  --header-bg: rgba(255, 255, 255, 0.95);
  /* Scoreboard module ground: one clear step down from the page's paper so the
     games grid reads as its own module without a dark box. */
  --panel-bg: #dadfe0;
  --panel-border: #c4d2d5;
  --shadow: 0 4px 6px rgba(12,27,33,0.08);
}

/* ── Dark Theme ── */
:root[data-palette="harbor"][data-theme="dark"] {
  /* Harbor at night — deep harbour blues, sea-glass ink */
  --bg: #081418;
  --bg-card: #0e1e24;
  --bg-card-hover: #132831;
  --bg-elevated: #17303a;
  --border: #21414b;
  --text: #e3eef1;
  --text-muted: #8fa9b1;
  --text-dim: #8fa9b1; /* collapsed into muted: dim grays fail WCAG on dark cards */
  --green: #45d9a3;
  --green-dim: #0f2d1c;
  --yellow: #e5b04e;
  --yellow-dim: #33270f;
  --red: #ff7461;
  --red-dim: #3a1f1c;
  --blue: #3ec3d4;
  --blue-dim: #0d3238;
  --purple: #3ec3d4;
  --accent: #3ec3d4;
  --header-bg: rgba(8, 20, 24, 0.95);
  /* Dark mode drops the panel entirely — the page ground already reads as one */
  --panel-bg: transparent;
  --panel-border: transparent;
  --shadow: 0 4px 6px rgba(0,0,0,0.45);
}
:root[data-palette="scoreboard"] {
  --bg: #f6f5f2;
  --bg-card: #ffffff;
  --bg-card-hover: #f1efeb;
  --bg-elevated: #edece8;
  --border: #e0ded8;
  --text: #1b2733;
  --text-muted: #5b6672;
  --text-dim: #98a1ab;
  --green: #0a5c42;
  --green-dim: #dcefe6;
  --yellow: #8a5b00;
  --yellow-dim: #f6e8c8;
  --red: #b8400e;
  --red-dim: #fbe7dc;
  --blue: #5646d0;
  --blue-dim: #eae7fb;
  --purple: #5646d0;
  --accent: #5646d0;
  --header-bg: rgba(255, 255, 255, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.08);
  --panel-bg: #e0dfdc;
  --panel-border: #d0cec9;
}
:root[data-palette="scoreboard"][data-theme="dark"] {
  --bg: #0b1220;
  --bg-card: #121a2b;
  --bg-card-hover: #17223a;
  --bg-elevated: #1a2438;
  --border: #263349;
  --text: #e7ecf5;
  --text-muted: #9aa7bd;
  --text-dim: #5b6880;
  --green: #45d9a3;
  --green-dim: #113026;
  --yellow: #e8b04b;
  --yellow-dim: #33270f;
  --red: #ff6a54;
  --red-dim: #37201f;
  --blue: #9d90ff;
  --blue-dim: #221d45;
  --purple: #9d90ff;
  --accent: #9d90ff;
  --header-bg: rgba(11, 18, 32, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.4);
  --panel-bg: transparent;
  --panel-border: transparent;
}
:root[data-palette="classic"] {
  --bg: #f8f9fa;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f1f3;
  --bg-elevated: #e9ecef;
  --border: #dee2e6;
  --text: #0a1f0a;
  --text-muted: #6c757d;
  --text-dim: #adb5bd;
  --green: #198754;
  --green-dim: #d1e7dd;
  --yellow: #cc8a00;
  --yellow-dim: #fff3cd;
  --red: #dc3545;
  --red-dim: #f8d7da;
  --blue: #0d6efd;
  --blue-dim: #cfe2ff;
  --purple: #6f42c1;
  --accent: #198754;
  --header-bg: rgba(255, 255, 255, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.08);
  --panel-bg: #e2e3e4;
  --panel-border: #ced2d6;
}
:root[data-palette="classic"][data-theme="dark"] {
  --bg: #0d1117;
  --bg-card: #161b22;
  --bg-card-hover: #1c2128;
  --bg-elevated: #21262d;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --text-dim: #484f58;
  --green: #3fb950;
  --green-dim: #1a4a2e;
  --yellow: #d29922;
  --yellow-dim: #4d3800;
  --red: #f85149;
  --red-dim: #4a1e1b;
  --blue: #58a6ff;
  --blue-dim: #122a4d;
  --purple: #bc8cff;
  --accent: #3fb950;
  --header-bg: rgba(13, 17, 23, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.4);
  --panel-bg: transparent;
  --panel-border: transparent;
}
:root[data-palette="rally"] {
  --bg: #f8f4f6;
  --bg-card: #ffffff;
  --bg-card-hover: #f3ecf0;
  --bg-elevated: #eee4e9;
  --border: #e4d7de;
  --text: #26161e;
  --text-muted: #6b5560;
  --text-dim: #a891a0;
  --green: #0a5c42;
  --green-dim: #dcefe6;
  --yellow: #8a5b00;
  --yellow-dim: #f6e8c8;
  --red: #b8400e;
  --red-dim: #fbe7dc;
  --blue: #b81d5b;
  --blue-dim: #f9dfe9;
  --purple: #b81d5b;
  --accent: #b81d5b;
  --header-bg: rgba(255, 255, 255, 0.95);
  --shadow: 0 4px 6px rgba(38,22,30,0.08);
  --panel-bg: #e2dee0;
  --panel-border: #d4c8ce;
}
:root[data-palette="rally"][data-theme="dark"] {
  --bg: #150e13;
  --bg-card: #1d1420;
  --bg-card-hover: #241a28;
  --bg-elevated: #2a1e2f;
  --border: #3a2b40;
  --text: #f0e8ee;
  --text-muted: #b09cab;
  --text-dim: #6b5566;
  --green: #45d9a3;
  --green-dim: #113026;
  --yellow: #e8b04b;
  --yellow-dim: #33270f;
  --red: #ff6a54;
  --red-dim: #37201f;
  --blue: #ff6b9d;
  --blue-dim: #3a1b2b;
  --purple: #ff6b9d;
  --accent: #ff6b9d;
  --header-bg: rgba(21, 14, 19, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.5);
  --panel-bg: transparent;
  --panel-border: transparent;
}
:root[data-palette="heritage"] {
  --bg: #f7f2e4;
  --bg-card: #fffdf6;
  --bg-card-hover: #f2ecdb;
  --bg-elevated: #ece4cf;
  --border: #ddd3b8;
  --text: #262c33;
  --text-muted: #6b675c;
  --text-dim: #a49e8d;
  --green: #0a5c42;
  --green-dim: #ddeddd;
  --yellow: #8a5b00;
  --yellow-dim: #f2e5c2;
  --red: #b8400e;
  --red-dim: #f8e2d3;
  --blue: #1e50a2;
  --blue-dim: #dde8f7;
  --purple: #1e50a2;
  --accent: #1e50a2;
  --header-bg: rgba(255, 253, 246, 0.95);
  --shadow: 0 4px 6px rgba(38,44,51,0.08);
  --panel-bg: #e1dccf;
  --panel-border: #cec4ab;
}
:root[data-palette="heritage"][data-theme="dark"] {
  --bg: #12151c;
  --bg-card: #1a1e27;
  --bg-card-hover: #212633;
  --bg-elevated: #262c3a;
  --border: #353d4e;
  --text: #ece7da;
  --text-muted: #a8a291;
  --text-dim: #6e685a;
  --green: #45d9a3;
  --green-dim: #113026;
  --yellow: #e8b04b;
  --yellow-dim: #33270f;
  --red: #ff6a54;
  --red-dim: #37201f;
  --blue: #7fa8e8;
  --blue-dim: #1a2c4a;
  --purple: #7fa8e8;
  --accent: #7fa8e8;
  --header-bg: rgba(18, 21, 28, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.45);
  --panel-bg: transparent;
  --panel-border: transparent;
}
:root[data-palette="graphite"] {
  --bg: #f4f4f5;
  --bg-card: #ffffff;
  --bg-card-hover: #ededef;
  --bg-elevated: #e6e6e9;
  --border: #dcdce0;
  --text: #1c1e21;
  --text-muted: #5e6269;
  --text-dim: #9a9ea6;
  --green: #0a5c42;
  --green-dim: #dfebe5;
  --yellow: #8a5b00;
  --yellow-dim: #efe7d2;
  --red: #b8400e;
  --red-dim: #f6e3da;
  --blue: #3b6484;
  --blue-dim: #e0eaf2;
  --purple: #3b6484;
  --accent: #3b6484;
  --header-bg: rgba(255, 255, 255, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.07);
  --panel-bg: #dededf;
  --panel-border: #cdcdd0;
}
:root[data-palette="graphite"][data-theme="dark"] {
  --bg: #101214;
  --bg-card: #17191c;
  --bg-card-hover: #1d2024;
  --bg-elevated: #222528;
  --border: #33373c;
  --text: #e8eaec;
  --text-muted: #9aa0a6;
  --text-dim: #5b6167;
  --green: #45d9a3;
  --green-dim: #113026;
  --yellow: #e8b04b;
  --yellow-dim: #33270f;
  --red: #ff6a54;
  --red-dim: #37201f;
  --blue: #88b3d8;
  --blue-dim: #17293a;
  --purple: #88b3d8;
  --accent: #88b3d8;
  --header-bg: rgba(16, 18, 20, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.45);
  --panel-bg: transparent;
  --panel-border: transparent;
}
:root[data-palette="chalk"] {
  --bg: #f4f5f7;
  --bg-card: #ffffff;
  --bg-card-hover: #eef0f3;
  --bg-elevated: #e9ebef;
  --border: #dde0e5;
  --text: #1f2733;
  --text-muted: #5c6673;
  --text-dim: #99a1ac;
  --green: #0a5c42;
  --green-dim: #dcefe6;
  --yellow: #8a5b00;
  --yellow-dim: #f4e9cb;
  --red: #b8400e;
  --red-dim: #fbe7dc;
  --blue: #44517f;
  --blue-dim: #e5e9f4;
  --purple: #44517f;
  --accent: #44517f;
  --header-bg: rgba(255, 255, 255, 0.95);
  --shadow: 0 4px 6px rgba(31,39,51,0.06);
  --panel-bg: #dedfe1;
  --panel-border: #ced0d5;
}
:root[data-palette="chalk"][data-theme="dark"] {
  --bg: #12161d;
  --bg-card: #191e27;
  --bg-card-hover: #1f2531;
  --bg-elevated: #242b38;
  --border: #313a49;
  --text: #e6eaf1;
  --text-muted: #9aa5b5;
  --text-dim: #5d6878;
  --green: #45d9a3;
  --green-dim: #113026;
  --yellow: #e8b04b;
  --yellow-dim: #33270f;
  --red: #ff6a54;
  --red-dim: #37201f;
  --blue: #a3b1e8;
  --blue-dim: #1f2440;
  --purple: #a3b1e8;
  --accent: #a3b1e8;
  --header-bg: rgba(18, 22, 29, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.45);
  --panel-bg: transparent;
  --panel-border: transparent;
}
:root[data-palette="whiteout"] {
  --bg: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f6f6f8;
  --bg-elevated: #f2f2f4;
  --border: #e4e4e8;
  --text: #1b2733;
  --text-muted: #5b6672;
  --text-dim: #98a1ab;
  --green: #0a5c42;
  --green-dim: #dcefe6;
  --yellow: #8a5b00;
  --yellow-dim: #f6e8c8;
  --red: #b8400e;
  --red-dim: #fbe7dc;
  --blue: #5646d0;
  --blue-dim: #eae7fb;
  --purple: #5646d0;
  --accent: #5646d0;
  --header-bg: rgba(255, 255, 255, 0.95);
  --shadow: 0 4px 6px rgba(27,39,51,0.06);
  --panel-bg: #e8e8e8;
  --panel-border: #d4d4d8;
}
:root[data-palette="whiteout"][data-theme="dark"] {
  --bg: #0b0b0d;
  --bg-card: #131316;
  --bg-card-hover: #19191d;
  --bg-elevated: #1e1e23;
  --border: #2a2a31;
  --text: #ededf0;
  --text-muted: #a2a2ac;
  --text-dim: #616169;
  --green: #45d9a3;
  --green-dim: #113026;
  --yellow: #e8b04b;
  --yellow-dim: #33270f;
  --red: #ff6a54;
  --red-dim: #37201f;
  --blue: #9d90ff;
  --blue-dim: #221d45;
  --purple: #9d90ff;
  --accent: #9d90ff;
  --header-bg: rgba(11, 11, 13, 0.95);
  --shadow: 0 4px 6px rgba(0,0,0,0.5);
  --panel-bg: transparent;
  --panel-border: transparent;
}


* { box-sizing: border-box; margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  transition: background 0.2s, color 0.2s;
  padding-top: 82px; /* fixed header (~70px) + breathing room */
}

/* Layout */
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* header ground now comes from each palette's --header-bg token */

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
}

.logo-icon { display: inline-flex; }
.logo-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.18));
}
.logo-icon img {
  display: block;
  width: 64px;
  height: 40px;
  object-fit: contain;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text);
}
.logo-text b { color: inherit; font-weight: 800; }

.teams-dropdown { position: relative; }
.teams-trigger { display: inline-block; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 600; padding: 6px 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.teams-trigger:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-card-hover); }
.teams-mega { display: none; position: absolute; top: 100%; left: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); z-index: 200; white-space: nowrap; }
/* 3 columns × 2 rows: East divisions on top, West below — left-anchored and narrow
   enough to stay on-screen now that links carry logos + odds */
.teams-dropdown:hover .teams-mega,
.teams-dropdown:focus-within .teams-mega { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
:root[data-theme="dark"] .teams-mega { box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
.teams-division { display: flex; flex-direction: column; gap: 2px; }
.teams-div-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.teams-division a { font-size: 13px; color: var(--text); text-decoration: none; padding: 4px 6px; border-radius: 4px; }
.teams-division a:hover { background: var(--bg-card-hover); }
/* Decorated by app.js with mini logo + live playoff odds (decorateTeamsMega) */
.teams-division a.tm-link { display: flex; align-items: center; gap: 8px; }
.tm-link .tm-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.tm-link .tm-pct { margin-left: auto; padding-left: 10px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

.header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 12px;
  margin-left: auto;
}

#last-updated {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}

.refresh-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.refresh-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.sim-badge {
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  color: color-mix(in srgb, var(--green) 80%, var(--text)); /* deepened vs. the green tint behind it (4.5:1 floor) */
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Theme Toggle — icon button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.theme-toggle svg { width: 15px; height: 15px; display: block; }
.theme-toggle:hover { color: var(--text); border-color: var(--text-dim); }

/* Small header icon-buttons / badges share sim-badge chrome */
.sim-badge svg { width: 12px; height: 12px; vertical-align: -1.5px; margin-right: 3px; }
.lang-badge { font-weight: 700; letter-spacing: var(--ls-caps); }

/* ─── Dark Games Strip ─── */
.games-tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.games-tab {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.games-tab:hover { color: var(--text); border-color: var(--text-dim); }
.games-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* The scoreboard module. Light mode gives it a pepper-grey ground so it reads
   as its own surface while keeping the page's ink and card colors; dark mode
   drops the panel and lets the cards sit straight on the page.
   (Class name predates the light treatment — it is no longer a dark strip.) */
.games-dark-strip {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  margin: 16px -20px 0;
  padding: 24px 20px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .games-dark-strip {
  border: none;
  margin: 16px 0 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* ─── Filter Bar ─── */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ─── Standings Table ─── */
.standings-section { padding: 24px 0; }

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.standings-table .header-cols th {
  font-size: 11px; color: var(--text-muted); text-align: right;
  text-transform: uppercase; letter-spacing: var(--ls-caps);
  padding: 4px 4px 6px; border-bottom: 2px solid var(--border);
  font-weight: 600; white-space: nowrap;
  /* top must equal the fixed chrome's height (.site-header = 61px) so the pinned
     header sits flush beneath it; a larger value leaves a gap that data rows
     scroll through, which reads as the header overlapping a row. */
  position: sticky; top: 61px; background: var(--bg); z-index: 2;
}
.standings-table .header-cols th.al { text-align: left; }
.standings-table .conf-row td {
  background: var(--bg-elevated); color: var(--accent); font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: var(--ls-caps);
  padding: 8px;
}
.standings-table .team-data td {
  padding: 6px 4px; border-bottom: 1px solid var(--border);
  text-align: right; font-size: 14px;
}
.standings-table .team-data:hover td { background: var(--bg-card-hover); }
.standings-table .col-team { text-align: left !important; font-weight: 600; white-space: nowrap; }
.standings-table .col-team a { color: var(--text); text-decoration: none; cursor: pointer; }
.standings-table .col-team a:hover { color: var(--accent); text-decoration: underline; }
.standings-table .col-pct { position: relative; min-width: 64px; font-weight: 700; }
.standings-table .pct-bar { position: absolute; left: 2px; top: 3px; bottom: 3px; opacity: 0.14; border-radius: 3px; max-width: calc(100% - 4px); }
.standings-table .pct-bar.high { background: var(--green); }
.standings-table .pct-bar.mid { background: var(--yellow); }
.standings-table .pct-bar.low { background: var(--red); }
.standings-table .pct-bar.safe { background: var(--blue); }
.standings-table .pct-num { position: relative; z-index: 1; }
.standings-table .pct-num.high { color: var(--green); }
.standings-table .pct-num.mid { color: var(--yellow); }
.standings-table .pct-num.low { color: var(--red); }
.standings-table .pct-num.safe { color: var(--blue); }
.standings-table .pct-num.dead { color: var(--text-dim); }
.standings-table .col-change { font-weight: 600; font-size: 12px; }
.standings-table .col-change.pos { color: var(--green); }
.standings-table .col-change.neg { color: var(--red); }
.standings-table .col-change.flat { color: var(--text-dim); }
.standings-table .col-next { text-align: left !important; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.standings-table .col-stat { font-size: 13px; font-weight: 600; }
.standings-table .team-data.eliminated td { opacity: 0.4; }
.standings-table .team-data.clinched .col-team a { color: var(--green); }
.standings-table .badge { font-size: 10px; font-weight: 700; padding: 2px 4px; border-radius: 3px; margin-left: 4px; vertical-align: middle; }
.standings-table .badge-x { background: var(--green); color: var(--bg); }
.standings-table .badge-e { background: var(--red); color: var(--bg); }
.standings-table .logo-tiny { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; }

/* ─── What If Table ─── */
.what-if-table {
  width: 100%;
  max-width: 650px;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.wif-table-wrap {
  max-height: 600px;
  overflow-y: auto;
  border-radius: 0 0 8px 8px;
}
.what-if-table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
}
.what-if-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.what-if-table tbody tr:hover { background: var(--bg-card-hover); }
.what-if-table tbody tr:last-child { border-bottom: none; }
.what-if-table tbody td { padding: 8px 12px; }

.wif-record { font-weight: 600; white-space: nowrap; }
.wif-times { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wif-make {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.wif-miss { font-weight: 600; text-align: right; }
.wif-bar-wrap {
  width: 60px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.wif-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

.what-if-pace td { background: color-mix(in srgb, var(--green) 8%, transparent); }
.wif-pace-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--green);
  color: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Seed Bar Chart */
.dive-seed-chart {
  margin-bottom: 4px;
}
.seed-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 0 2px;
}
.seed-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 2px;
}
.playoff-label { color: var(--yellow); }
.miss-label { color: var(--red); }

.seed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.seed-label {
  width: 52px;
  text-align: right;
  color: var(--text-muted);
  font-size: 10px;
  flex-shrink: 0;
}
.seed-track {
  flex: 1;
  height: 8px;
  background: var(--bg-elevated);
  border-radius: 4px;
  overflow: hidden;
}
.seed-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 0;
}
.playoff-fill { background: var(--yellow); }
.miss-fill { background: var(--red); }

.seed-pct {
  width: 36px;
  text-align: right;
  font-weight: 600;
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.seed-divider {
  border: none;
  border-top: 1px dotted var(--border);
  margin: 6px 0;
}

/* Hero Section (team strip sits directly above) */
.hero {
  padding: 20px 0 24px;
}

.hero-headline {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.hero-headline h1 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--text);
}

.hero-narratives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.narrative-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

.narrative-card .label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-dim);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* accent lives in the eyebrow, not a side-stripe */
.narrative-card.accent-stakes .label { color: var(--green); }
.narrative-card.accent-bubble .label { color: var(--purple); }
.narrative-card.accent-movers .label { color: var(--yellow); }

/* Section — rhythm varies by weight: hero is tight (20px), utility sections
   default to 24px, destination sections breathe more */
.section { padding: 24px 0; }
#standings.section, #nba-finals.section { padding: 36px 0; }
#bubble-watch.section { padding: 32px 0 44px; }

.section-title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* Tonight's Games */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* Borderless: the card's own ground against the panel is the separation */
.game-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.game-card:hover {
  box-shadow: var(--shadow);
}

/* Marquee games are marked by the HIGH STAKES pill alone — no card border. */

.game-matchup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.game-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.team-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.team-abbrev {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.team-odds-pct {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
}

.game-vs {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  padding: 0 8px;
}

.game-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.impact-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.impact-badge.CRITICAL { background: color-mix(in srgb, var(--red) 26%, transparent); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); }
.impact-badge.HIGH { background: color-mix(in srgb, var(--yellow) 26%, transparent); color: var(--yellow); border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent); }
.impact-badge.MEDIUM { background: color-mix(in srgb, var(--green) 26%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); }
.impact-badge.LOW { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); }
.impact-badge.NONE { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }

/* Bubble Watch */
.bubble-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.bubble-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bubble-team-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bubble-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.bubble-team-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.bubble-record {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.bubble-odds-big {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
}

.bubble-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.bubble-progress {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.bubble-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease;
}

.bubble-games-rem {
  font-size: 12px;
  color: var(--text-muted);
}

/* No games placeholder */
.no-games {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 15px;
}

/* Loading state */
.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: var(--text-muted);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Error state */
.error-card {
  background: color-mix(in srgb, var(--red) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  color: var(--red);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px 0;
  margin-top: 40px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}
.site-footer a { color: var(--accent); font-weight: 600; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Odds color classes */
.odds-high { color: var(--green); }
.odds-mid { color: var(--yellow); }
.odds-low { color: var(--red); }
.bar-high { background: var(--green); }
.bar-mid { background: var(--yellow); }
.bar-low { background: var(--red); }

/* Responsive */
@media (max-width: 640px) {
  .hero-narratives {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 0 4px;
    /* hide scrollbar */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */
  }
  .hero-narratives::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .narrative-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
  .games-grid { grid-template-columns: 1fr; }
  .bubble-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-text { font-size: 18px; }
  .sim-badge, #last-updated { display: none; }
  .header-meta { gap: 8px; }
  .teams-mega { display: none !important; }
  .teams-trigger { font-size: 13px; padding: 4px 8px; }
}

/* ─── Team Deep Dive ──────────────────────────────────────────────────────── */

#team-dive {
  padding: 24px 0;
}

#team-dive .section-title {
  margin-bottom: 12px;
}

/* Deep-dive team picker: a listbox, so each team shows its logo and odds the
   same way the header's Teams menu does. */
.team-select-wrap {
  margin-bottom: 20px;
  position: relative;
  max-width: 320px;
}

.dive-select {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  text-align: left;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.dive-select:hover,
.dive-select:focus-visible { border-color: var(--green); }
.dive-select img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.dive-select .ds-placeholder { color: var(--text-muted); font-weight: 500; }
.dive-select .ds-caret { color: var(--text-muted); margin-left: 4px; }
.dive-select .ds-pct { margin-left: auto; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

.dive-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 150;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
:root[data-theme="dark"] .dive-select-menu { box-shadow: 0 8px 30px rgba(0,0,0,0.4); }

.dive-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.dive-select-option img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.dive-select-option .ds-pct { margin-left: auto; padding-left: 10px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dive-select-option:hover { background: var(--bg-card-hover); }
/* Arrow keys are the only way through this list, and --bg-card-hover is nearly
   invisible on the palest palettes — keep the site's accent focus ring, inset
   so it isn't clipped by the menu's own scroll box. */
.dive-select-option:focus {
  background: var(--bg-card-hover);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.dive-select-option[aria-selected="true"] { background: var(--bg-elevated); }
.dive-select-clear .ds-placeholder { color: var(--text-muted); font-style: italic; }

.hidden { display: none !important; }

/* Dive header card */
.dive-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.dive-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.dive-team-info {
  flex: 1;
  min-width: 0;
}

.dive-team-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.dive-record {
  font-size: 13px;
  color: var(--text-muted);
}

.dive-division-pos {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.dive-odds-block {
  text-align: right;
  flex-shrink: 0;
}

.dive-odds-big {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
}

.dive-odds-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin-top: 4px;
}

.dive-odds-chart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.dive-odds-canvas {
  max-height: 160px;
}

.dive-status-badge {
  margin-top: 6px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.dive-status-badge.clinched { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.dive-status-badge.eliminated { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }

/* Scenario section */
.dive-section-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-dim);
  margin: 20px 0 12px;
}

.scenarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.scenario-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s;
}

.scenario-card:hover { border-color: var(--green); }
.scenario-card.impact-high { border-color: color-mix(in srgb, var(--yellow) 60%, var(--border)); }

.scenario-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px 8px;
  font-size: 12px;
  color: var(--text-muted);
  /* was a white hairline from when this sat on a dark panel — invisible once
     the surface went light, so draw it with the surface's own border ink */
  border-bottom: 1px solid var(--border);
}

.scenario-matchup .s-team {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

.scenario-matchup .s-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.scenario-matchup .s-at {
  font-size: 11px;
  color: var(--text-dim);
}

.scenario-rows {
  padding: 0;
}

.scenario-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}

.scenario-row:last-child { border-bottom: none; }

.scenario-row.ot-result {
  background: var(--bg-elevated);
}

.scenario-row.ot-result .scenario-row-label {
  color: var(--text-dim);
}

.scenario-row.ot-result .scenario-pct {
  color: var(--text-muted);
  font-weight: 600;
}

.scenario-row-label {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}

.scenario-row-label strong {
  color: var(--text);
  font-weight: 600;
}

.scenario-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.scenario-pct {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.scenario-delta {
  font-size: 12px;
  font-weight: 700;
  min-width: 48px;
  text-align: right;
}

.scenario-delta.pos { color: var(--green); }
.scenario-delta.neg { color: var(--red); }
.scenario-delta.neutral { color: var(--text-dim); }

/* Path to Playoffs */
.dive-path-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.7;
}

.dive-path-text {
  color: var(--text-muted);
}

.dive-path-text strong { color: var(--text); }

/* No scenarios */
.no-scenarios {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ─── End Team Deep Dive ──────────────────────────────────────────────────── */

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn 0.4s ease forwards; }

/* Game Scores */
/* Score sits on the team's own line, so the number is unambiguously theirs */
.team-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}
/* The score is the headline of a finished card, so it outranks the abbrev.
   The loser stays on --text-muted rather than --text-dim: dim is pale enough
   on some palettes that the number stopped reading as a number. */
.team-score {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.team-score.winner { color: var(--blue); }
.team-score.loser { color: var(--text-muted); }

/* Centre column now carries only the game's state */
.game-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
  padding: 0 12px;
  white-space: nowrap;
}
.game-status.live-pulse { color: var(--red); }
/* Shared pulsing live-dot recipe (also used by .live-badge::before) */
.game-status.live-pulse::before,
.live-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 1.5s ease-in-out infinite;
}
.game-status.live-pulse::before {
  display: inline-block;
  margin-right: 4px;
  vertical-align: 1px;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.game-team.team-won .team-abbrev {
  color: var(--blue);
  font-weight: 700;
}
.game-team.team-lost .team-abbrev {
  color: var(--text-dim);
}
.game-team.team-lost .team-logo {
  opacity: 0.4;
}

/* Tomorrow's Games */
.tomorrow-card {
  opacity: 0.9;
}

/* Clickable game teams */
.game-team.clickable {
  cursor: pointer;
  transition: opacity 0.15s ease;
  border-radius: 8px;
  padding: 4px;
}
.game-team.clickable:hover {
  opacity: 0.8;
}

.delta-arrow {
  font-size: 11px;
  font-weight: 700;
}

.delta-up { color: var(--green); }
.delta-down { color: var(--red); }
.delta-flat { color: var(--text-dim); }

/* ── Odds Movement Chart ── */
.odds-chart-section {
  padding: 24px 0 0;
}

.odds-chart-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.odds-chart-title {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.015em;
  color: var(--text);
}

.odds-chart-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.odds-chart-wrap {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow);
}

.odds-chart-box { position: relative; width: 100%; height: 360px; }
.odds-chart-canvas { display: block; }

.odds-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: center;
}

.odds-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s;
}

.odds-chart-legend-item:hover {
  background: var(--bg-elevated);
  border-color: var(--border);
}

.odds-chart-legend-item.active {
  background: var(--bg-elevated);
  border-color: var(--border);
  color: var(--text);
  font-weight: 600;
}

.odds-chart-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

.odds-chart-loading {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ── Mobile-first responsive additions ── */

/* Prevent any horizontal overflow at the root.
   `clip` (not `hidden`): hidden turns <body> into a scroll container, which
   silently defeats every position:sticky that should pin to the viewport
   (e.g. the standings column headers). clip clips without creating one;
   older browsers fall back to hidden and simply lose stickiness. */
html, body { overflow-x: hidden; overflow-x: clip; }

/* ── 375px baseline: small phones ── */
@media (max-width: 479px) {
  .container { padding: 0 12px; }

  .site-header { padding: 8px 0; }
  .header-inner { gap: 8px; flex-wrap: wrap; }
  .header-meta { gap: 6px; flex-wrap: wrap; }
  .share-btn { display: none; }
  .refresh-btn { padding: 5px 8px; font-size: 11px; }

  .hero { padding: 12px 0 12px; }
  /* Hide the note only when a LIVE pill already carries the meaning; for
     scheduled games the note IS the stake, so it stays visible */
  .stake-row .live-badge ~ .stake-note { display: none; }
  .hero-headline { padding: 14px 16px; margin-bottom: 12px; }
  .hero-headline h1 { font-size: 15px; }
  .hero-narratives { gap: 10px; padding: 0 2px; }
  .narrative-card { flex: 0 0 85%; padding: 14px; font-size: 13px; }

  .section-title { font-size: 15px; }
  .section { padding: 14px 0; }

  /* Games dark strip: remove the negative side margin that causes overflow */
  .games-dark-strip { margin: 12px 0 0; padding: 16px 12px; border-radius: 12px; }

  .games-grid { grid-template-columns: 1fr; gap: 8px; }
  .game-card { padding: 12px; }
  .team-logo { width: 36px; height: 36px; }
  .team-abbrev { font-size: 12px; }
  .team-score { font-size: 22px; }

  .bubble-grid { grid-template-columns: 1fr; }
  .bubble-card { padding: 14px; gap: 8px; }
  .bubble-odds-big { font-size: 28px; }

  .filter-bar { flex-wrap: wrap; gap: 6px; }
  .filter-btn { padding: 5px 12px; font-size: 11px; }

  /* Standings table: wrap in a scrollable container */
  .standings-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .standings-table { min-width: 500px; font-size: 12px; }
  .standings-table .team-data td { padding: 4px; font-size: 12px; }
  .standings-table .header-cols th { padding: 4px 2px; font-size: 10px; }

  /* What-if table: scrollable wrapper */
  .wif-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .what-if-table { min-width: 400px; }

  .dive-header { padding: 14px 16px; gap: 12px; }
  .dive-team-name { font-size: 18px; }
  .dive-odds-big { font-size: 36px; letter-spacing: -1px; }
  .dive-logo { width: 48px; height: 48px; }

  .team-select-wrap { max-width: 100%; }

  .scenarios-grid { grid-template-columns: 1fr; }

  .odds-chart-box { height: 220px; }
  .odds-chart-header { flex-wrap: wrap; gap: 6px; }
  .odds-chart-title { font-size: 15px; }
}

/* ── 480px–767px: larger phones ── */
@media (min-width: 480px) and (max-width: 767px) {
  .container { padding: 0 16px; }

  .hero { padding: 24px 0 16px; }
  .hero-headline { padding: 16px 20px; }
  .hero-headline h1 { font-size: 16px; }

  .games-dark-strip { margin: 12px 0 0; padding: 18px 16px; border-radius: 12px; }

  .standings-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .standings-table { min-width: 520px; }

  .wif-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .what-if-table { min-width: 420px; }

  .dive-odds-big { font-size: 42px; }
  .team-select-wrap { max-width: 100%; }
  .scenarios-grid { grid-template-columns: 1fr; }
}

/* ── 768px–1023px: tablets ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 0 20px; }

  .games-dark-strip { margin: 14px 0 0; padding: 20px; border-radius: 14px; }

  .standings-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .standings-table { min-width: 600px; }

  .scenarios-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .dive-odds-big { font-size: 46px; }
}

/* Ensure games-dark-strip never overflows on any sub-desktop viewport */
@media (max-width: 1023px) {
  .games-dark-strip { max-width: 100%; box-sizing: border-box; }
}

/* ─── Hamburger Menu ─── */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s;
}
.hamburger-btn:hover { border-color: var(--green); }
.hamburger-btn span {
  display: block;
  width: 16px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
}

.nav-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}
.nav-menu-backdrop.open { display: block; }

.nav-menu {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  z-index: 1000;
  overflow-y: auto;
  transition: right 0.25s ease;
  box-shadow: -4px 0 24px rgba(0,0,0,0.08);
}
.nav-menu.open { right: 0; }
:root[data-theme="dark"] .nav-menu {
  box-shadow: -4px 0 24px rgba(0,0,0,0.4);
}

.nav-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.nav-menu-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-muted);
}
.nav-menu-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.nav-menu-close:hover { color: var(--text); }

.nav-menu-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.nav-menu-section:last-child { border-bottom: none; }
.nav-menu-label {
  padding: 0 20px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav-menu-item {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.nav-menu-item:hover {
  background: var(--bg-card-hover);
  color: var(--accent);
  text-decoration: none;
}

/* ── Standings cut lines (top-6 / top-10) ── */
.wc-conf-row td {
  padding: 10px 8px;
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
}
.wc-divider td {
  padding: 0;
  border: none;
}
.wc-cutline {
  height: 3px;
  background: var(--red);
  opacity: 0.6;
  margin: 0;
}
.wc-in td {
  background: color-mix(in srgb, var(--green) 5%, transparent);
}
.col-gb {
  font-weight: 700;
  font-size: 13px;
  text-align: right;
}
.gb-ahead { color: var(--green); }
.gb-even { color: var(--text-muted); }
.gb-behind { color: var(--red); }

/* ChaseScore column */
.col-chase-score {
  font-weight: 700;
  font-size: 13px;
  text-align: right;
  color: var(--accent);
  letter-spacing: -0.3px;
}
.chase-delta {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}
.chase-delta.pos { color: var(--green); }
.chase-delta.neg { color: var(--red); }
.chase-score-header {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}
.chase-tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--text-muted);
  color: var(--bg);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}
.chase-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: -20px;
  width: 280px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  z-index: 50;
  pointer-events: none;
}
.chase-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 28px;
  border: 6px solid transparent;
  border-top-color: var(--border);
}
.chase-score-header:hover .chase-tooltip {
  display: block;
}


/* ── Mover chips (narrative "Movers" card) ── */
.mover-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.mover-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-elevated);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mover-chip .tri { font-size: 10px; line-height: 1; }
.mover-chip.up .tri, .mover-chip.up .pct { color: var(--green); }
.mover-chip.down .tri, .mover-chip.down .pct { color: var(--red); }
/* Bubble Watch chips emit oddsClass() on the pct span — same band vocabulary
   as standings pct-num and stake-pct */
.mover-chip .pct.odds-high { color: var(--green); }
.mover-chip .pct.odds-mid { color: var(--yellow); }
.mover-chip .pct.odds-low { color: var(--red); }

/* ── Tonight's Stakes rows (narrative card) ── */
.stake-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.stake-row { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.stake-main { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stake-main strong { font-weight: 600; }
/* Rendered as class="mover-chip stake-pct" — chip chrome comes from .mover-chip.
   Tier colors need the extra specificity to beat .mover-chip's color. */
.stake-pct {
  margin-left: auto;
  flex-shrink: 0;
}
.stake-pct.odds-high { color: var(--green); }
.stake-pct.odds-mid { color: var(--yellow); }
.stake-pct.odds-low { color: var(--red); }
.stake-note { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.stake-foot { font-size: 12px; color: var(--text-muted); }

/* ── Inline live badge (narrative text, hero) ── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(220, 53, 69, 0.12); /* fallback for pre-color-mix browsers */
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  vertical-align: 1px;
}

/* SEO static content — in the DOM for Google, visually hidden for users. JS removes it on load anyway. */
.seo-snapshot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.seo-footer { padding: 40px 20px; border-top: 1px solid var(--border); margin-top: 40px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.seo-footer h2 { font-size: 20px; margin-bottom: 12px; color: var(--text); }
.seo-footer h3 { font-size: 16px; margin: 16px 0 6px; color: var(--text); }
.seo-footer p { margin-bottom: 10px; }

/* ── Reduced motion ──
   Kills the ticker marquee, pulse, fadeIn, and all hover transforms for users
   who ask for it. Spinner survives one rotation as a static loading cue. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.seo-footer h3 { font-size: 16px; margin: 16px 0 6px; color: var(--text); }
.seo-footer p { margin-bottom: 10px; }

/* ── Palette Picker (nav menu) ── */
.palette-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 20px 10px;
}
.palette-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.palette-swatch .psw {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid var(--border);
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.palette-swatch:hover .psw { border-color: var(--text-dim); }
.palette-swatch.active .psw {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.palette-swatch.active .psw::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
/* Chalk and Whiteout preview near-white, where a white tick disappears. */
.palette-swatch.active .psw.psw-light::after {
  color: #1b2733;
  text-shadow: 0 1px 2px rgba(255,255,255,0.9);
}
.palette-swatch .plabel {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.palette-swatch.active .plabel { color: var(--accent); font-weight: 700; }

/* ── DunkChaser additions ── */
.preseason-banner {
  background: color-mix(in srgb, var(--yellow) 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.preseason-banner strong { color: var(--yellow); }
.badge-pi { background: var(--purple); color: var(--bg); }
.standings-table .badge-pi { background: var(--purple); color: var(--bg); }
.pp-tag.dl { color: var(--text-muted); }
.pp-table tr.pp-playin td { color: var(--text); }
.pp-table tr.pp-cut2 td { border-bottom: 2px dashed var(--purple); }
.seed-tag.playin { background: var(--purple); }
.wc-cutline.cut-playoff { background: var(--accent); }
.wc-cutline.cut-playin { background: var(--purple); }
.playin-label { color: var(--purple); }
.playin-fill { background: var(--purple); }
.dive-odds-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.dive-odds-sub strong { color: var(--text); }
.game-note { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.game-vs { min-width: 28px; text-align: center; }

/* ── Box Score ──────────────────────────────────────────────── */
.boxscore-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 0 3px;
  margin-top: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s;
}
.boxscore-toggle:hover { color: var(--accent); }
.game-card.boxscore-open { grid-column: 1 / -1; }

.boxscore-detail {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.boxscore-loading {
  text-align: center;
  padding: 20px;
  color: var(--text);
  font-size: 13px;
}
.boxscore-coming-soon {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
}

.boxscore-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.boxscore-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.boxscore-tab:hover:not([disabled]) { color: var(--accent); }
.boxscore-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.boxscore-tab[disabled] {
  opacity: 0.35;
  cursor: default;
}

.linescore-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 10px;
}
.linescore-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.linescore-table th,
.linescore-table td {
  text-align: center;
  padding: 5px 7px;
  border-bottom: 1px solid var(--border);
  min-width: 22px;
  color: var(--text);
}
.linescore-table th { font-weight: 700; color: var(--text); font-size: 12px; }
.linescore-table .ls-team {
  text-align: left;
  font-weight: 700;
  min-width: 40px;
  padding-right: 10px;
}
.linescore-table .ls-rhe {
  font-weight: 700;
  border-left: 1px solid var(--border);
}
.linescore-table thead .ls-rhe { font-weight: 700; }

.decisions-row {
  display: flex;
  gap: 16px;
  padding: 6px 0 10px;
  font-size: 12px;
  color: var(--text);
  flex-wrap: wrap;
}
.dec-item b { margin-right: 3px; }

.batting-section,
.pitching-section {
  margin-bottom: 10px;
}
.bs-team-label {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 0 4px;
  color: var(--text);
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
}
.batting-table,
.pitching-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.batting-table th,
.batting-table td,
.pitching-table th,
.pitching-table td {
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.batting-table th,
.pitching-table th {
  font-weight: 700;
  color: var(--text);
  font-size: 11px;
  text-transform: uppercase;
}
.batting-table .bs-name,
.pitching-table .bs-name {
  text-align: left;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-pos {
  color: var(--text-dim);
  font-size: 10px;
  margin-left: 3px;
}
.bs-totals td {
  font-weight: 700;
  border-top: 2px solid var(--border);
}

/* ─── Play Log ────────────────────────────────────────────────────────────── */
.play-log { padding: 4px 0; }
.pl-empty { text-align: center; padding: 24px; color: var(--text-dim); font-size: 13px; }
.pl-inning-group { margin-bottom: 2px; }
.pl-inning-header {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px; font-size: 12px; font-weight: 700;
  color: var(--text); background: var(--bg-elevated, var(--bg));
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1;
}
.pl-half-arrow { font-size: 10px; color: var(--text-muted); }
.pl-half-team {
  margin-left: 6px; font-size: 10px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-caps);
}
.pl-play {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  padding: 6px 12px; border-bottom: 1px solid var(--border);
  font-size: 12px; line-height: 1.5; transition: background 0.1s;
}
.pl-play:hover { background: var(--bg-card-hover, rgba(0,0,0,0.02)); }
.pl-play:last-child { border-bottom: none; }
.pl-scoring { background: rgba(10, 92, 66, 0.08); /* fallback for pre-color-mix browsers */ background: color-mix(in srgb, var(--green) 8%, transparent); }
.pl-scoring:hover { background: rgba(10, 92, 66, 0.14); /* fallback for pre-color-mix browsers */ background: color-mix(in srgb, var(--green) 14%, transparent); }
.pl-play-main { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; }
.pl-event-tag {
  flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-caps); padding: 2px 6px; border-radius: 4px;
  margin-top: 2px; white-space: nowrap;
}
.pl-evt-hr { background: var(--green-dim, #d4edda); color: var(--green, #2ea043); }
.pl-evt-hit { background: var(--blue-dim, #d1e5f7); color: var(--blue, #388bfd); }
.pl-evt-run { background: var(--green-dim, #d4edda); color: var(--green, #2ea043); }
.pl-evt-k { background: var(--red-dim); color: var(--red); }
.pl-evt-bb { background: var(--yellow-dim); color: var(--yellow); }
.pl-evt-out { background: var(--bg-elevated, #f0f0f0); color: var(--text-muted); }
.pl-evt-other { background: var(--bg-elevated, #f0f0f0); color: var(--text-muted); }
.pl-desc { color: var(--text); word-break: break-word; }
.pl-play-meta { flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.pl-score {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 600px) {
  .boxscore-tab { padding: 5px 8px; font-size: 11px; }
  .linescore-table { font-size: 12px; }
  .linescore-table th,
  .linescore-table td { padding: 3px 4px; min-width: 18px; }
  .batting-table, .pitching-table { font-size: 11px; }
  .batting-table .bs-name,
  .pitching-table .bs-name { max-width: 100px; }
  .pl-play { padding: 5px 8px; font-size: 11px; }
  .pl-event-tag { font-size: 10px; padding: 1px 4px; }
}

/* ── Mover chips (narrative "Movers" card) ── */
.mover-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.mover-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-elevated);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mover-chip .tri { font-size: 10px; line-height: 1; }
.mover-chip.up .tri, .mover-chip.up .pct { color: var(--green); }
.mover-chip.down .tri, .mover-chip.down .pct { color: var(--red); }
/* Bubble Watch chips emit oddsClass() on the pct span — same band vocabulary
   as standings pct-num and stake-pct */
.mover-chip .pct.odds-high { color: var(--green); }
.mover-chip .pct.odds-mid { color: var(--yellow); }
.mover-chip .pct.odds-low { color: var(--red); }

/* ── Tonight's Stakes rows (narrative card) ── */
.stake-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.stake-row { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.stake-main { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stake-main strong { font-weight: 600; }
/* Rendered as class="mover-chip stake-pct" — chip chrome comes from .mover-chip.
   Tier colors need the extra specificity to beat .mover-chip's color. */
.stake-pct {
  margin-left: auto;
  flex-shrink: 0;
}
.stake-pct.odds-high { color: var(--green); }
.stake-pct.odds-mid { color: var(--yellow); }
.stake-pct.odds-low { color: var(--red); }
.stake-note { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; }
.stake-foot { font-size: 12px; color: var(--text-muted); }

/* ── Inline live badge (narrative text, hero) ── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 10px;
  background: rgba(220, 53, 69, 0.12); /* fallback for pre-color-mix browsers */
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  vertical-align: 1px;
}

/* SEO static content — in the DOM for Google, visually hidden for users. JS removes it on load anyway. */
.seo-snapshot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.seo-footer { padding: 40px 20px; border-top: 1px solid var(--border); margin-top: 40px; color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.seo-footer h2 { font-size: 20px; margin-bottom: 12px; color: var(--text); }
.seo-footer h3 { font-size: 16px; margin: 16px 0 6px; color: var(--text); }
.seo-footer p { margin-bottom: 10px; }

/* ── Reduced motion ──
   Kills the ticker marquee, pulse, fadeIn, and all hover transforms for users
   who ask for it. Spinner survives one rotation as a static loading cue. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-scroll { animation: none; }
}
.seo-footer h3 { font-size: 16px; margin: 16px 0 6px; color: var(--text); }
.seo-footer p { margin-bottom: 10px; }

/* ── Palette Picker (nav menu) ── */
.palette-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 20px 10px;
}
.palette-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.palette-swatch .psw {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid var(--border);
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.palette-swatch:hover .psw { border-color: var(--text-dim); }
.palette-swatch.active .psw {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.palette-swatch.active .psw::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
/* Chalk and Whiteout preview near-white, where a white tick disappears. */
.palette-swatch.active .psw.psw-light::after {
  color: #1b2733;
  text-shadow: 0 1px 2px rgba(255,255,255,0.9);
}
.palette-swatch .plabel {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.palette-swatch.active .plabel { color: var(--accent); font-weight: 700; }

/* BaseChaser cross-link. The two sites share a palette (#f0f5f6 / #0f7488), so a
   default badge would read as part of this site. Amber marks it as the sibling
   product — the mirror of the NFL Odds pill on basechaser.com. */
.sim-badge.bc-mlb {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.sim-badge.bc-mlb:hover { background: #92400e; border-color: #92400e; color: #fff; }
[data-theme="dark"] .sim-badge.bc-mlb { background: #d97706; border-color: #d97706; color: #1a1205; }

.nav-menu-item.bc-mlb-item {
  color: #b45309; font-weight: 700;
}
[data-theme="dark"] .nav-menu-item.bc-mlb-item { color: #f59e0b; }

/* Wordmark pinning. "Blitz" set in Inter 800 is 5.6px narrower than "Base", so
   with BaseChaser's 8px gap the "Chaser" run and the Teams pill sit 5.6px further
   left than on basechaser.com and visibly jump when tabbing between the sites.
   Widen the mark-to-wordmark gap by exactly that amount on desktop so both land
   on the same x. Phone widths use the 18px wordmark and keep the shared gap. */
@media (min-width: 641px) {
  .logo { gap: 13.6px; }
}

/* ── NBA box score additions ─────────────────────────────────── */
.nba-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nba-player-table { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nba-player-table .bs-name { position: sticky; left: 0; background: var(--bg-card); z-index: 1; }
.nba-player-table tr.nba-starter + tr:not(.nba-starter):not(.bs-totals) td { border-top: 2px solid var(--border); }
.nba-dnp { font-size: 11px; color: var(--text-muted); padding: 6px 0 2px; }
.nba-team-stats th, .nba-team-stats td { font-variant-numeric: tabular-nums; }
.nba-team-stats tbody th { font-weight: 600; text-transform: none; color: var(--text-muted); font-size: 12px; }
.nba-team-stats { max-width: 560px; margin: 0 auto; }
.nba-team-stats td { width: 30%; font-weight: 600; }
.nba-wp-wrap { position: relative; height: 220px; padding: 4px 0 8px; }
.game-situation { color: var(--text-muted); font-variant-numeric: tabular-nums; }