/* Tokens live in tokens.css and are the single source of truth for color,
 * type, spacing, elevation, and team theming. Component CSS below
 * references them via var(--…).
 */
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    font-family: var(--font-body);
    margin: 0;
    background: var(--bg-gradient, var(--bg));
    background-attachment: fixed;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
}

/* ---------- card surface (replaces six near-duplicate background+border+shadow blocks) ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
/* Reference-weight surfaces recede behind hero cards (used on /matchup secondary sections). */
.card-ref {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* ---------- focus ring (single rule covers every interactive control) ---------- */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ---------- site header / nav ---------- */
.site-header {
    background: var(--navy);
    color: #fff;
    border-bottom: 3px solid var(--accent);
}
.site-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 56px;
}
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.02em;
}
.brand-mark {
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
}
.brand-name {
    font-weight: 500;
    opacity: 0.88;
    font-size: 0.95rem;
}
.site-nav {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}
.site-nav a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 120ms, color 120ms;
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* ---------- theme toggle ---------- */
.theme-toggle {
    margin-left: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0;
    transition: background-color 120ms, color 120ms;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.theme-toggle .theme-toggle-icon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon--sun,
:root:not([data-theme="dark"]) .theme-toggle .theme-toggle-icon--moon {
    display: inline;
}

/* ---------- nav dropdown ---------- */
.nav-dropdown {
    position: relative;
    display: inline-block;
}
.nav-dropdown-trigger {
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    border: 0;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.45;
    transition: background-color 120ms, color 120ms;
}
.nav-dropdown-trigger:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.nav-dropdown-trigger .caret {
    font-size: 0.7rem;
    margin-left: 0.2rem;
    opacity: 0.85;
}
.nav-dropdown.active .nav-dropdown-trigger {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 -2px 0 0 var(--accent);
}
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: var(--shadow-pop);
    padding: 0.4rem 0;
    z-index: 50;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
    display: block;
    padding: 0.4rem 0.85rem;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
}
.nav-dropdown-menu a:hover {
    background: var(--bg);
    color: var(--accent-strong);
}
.nav-dropdown-menu a.muted { color: var(--ink-muted); font-size: 0.82rem; }
.nav-dropdown-overview {
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
    padding-bottom: 0.5rem !important;
}
.nav-dropdown-section { padding: 0.25rem 0; }
.nav-dropdown-section + .nav-dropdown-section {
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 0.4rem;
}
.nav-dropdown-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-dim);
    padding: 0.25rem 0.85rem;
}
.nav-dropdown-section a { padding-left: 1.4rem; }

/* ---------- analytics index list ---------- */
.analytics-list { margin: 0.5rem 0 0; }
.analytics-list dt {
    font-weight: 600;
    margin-top: 0.9rem;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.analytics-list dt a { font-size: 1rem; }
.analytics-list dt a.muted {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ink-muted);
}
.analytics-list dd {
    margin: 0.2rem 0 0 0;
    color: var(--ink-muted);
    font-size: 0.9rem;
    max-width: 64ch;
}
.analytics-page-header {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}
.analytics-page-header h2 {
    margin: 0 0 0.35rem;
    font-size: 1.4rem;
    font-weight: 600;
}
.analytics-page-header p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.9rem;
    max-width: 70ch;
}
.analytics-page-header .howto-link {
    font-size: 0.85rem;
    margin-left: 0.4rem;
}

main {
    padding: var(--space-5);
    max-width: 1280px;
    margin: 0 auto;
}

/* ---------- sections / typography ---------- */
section { margin: var(--space-6) 0; }
section h3 {
    margin: 0 0 var(--space-3);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    padding-left: 0.6rem;
    border-left: var(--accent-bar) solid var(--accent);
    line-height: 1.2;
}
section h4 {
    margin: 0 0 var(--space-2);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------- forms / filters ---------- */
fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    align-items: end;
    padding: var(--space-4) var(--space-4);
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: var(--space-4);
}
legend {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 var(--space-2);
}
label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    color: var(--ink-muted);
    gap: 0.3rem;
    font-weight: 500;
}
select {
    appearance: none;
    -webkit-appearance: none;
    min-width: 180px;
    height: var(--control-height);
    padding: 0.5rem 2.2rem 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5l3 3 3-3' stroke='%235b6472' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 0.7rem center;
    transition: border-color 120ms, box-shadow 120ms;
    font-family: inherit;
}
select:hover { border-color: var(--ink-dim); }
select:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

input[type="text"], input[type="number"] {
    height: var(--control-height);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    transition: border-color 120ms, box-shadow 120ms;
}
input[type="text"]:hover,
input[type="number"]:hover { border-color: var(--ink-dim); }
input[type="text"]:focus-visible,
input[type="number"]:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

button, .btn {
    height: var(--control-height);
    padding: 0 1.1rem;
    font-size: 0.9rem;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-family: inherit;
    transition: background-color 120ms;
}
button:hover, .btn:hover { background: var(--accent-strong); }
#csv-link {
    height: var(--control-height);
    padding: 0 1.1rem;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    background: #fff;
    display: inline-flex;
    align-items: center;
    transition: background-color 120ms, border-color 120ms;
}
#csv-link:hover { background: var(--bg); border-color: var(--ink-dim); }

/* ---------- tabs / segmented ---------- */
.view-toggle {
    display: flex;
    gap: 0;
    margin: 0.5rem 0 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    overflow: hidden;
    width: max-content;
    background: #fff;
}
.view-btn {
    height: var(--control-height);
    padding: 0 0.95rem;
    font-size: 0.85rem;
    background: #fff;
    color: var(--ink);
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: background-color 120ms, color 120ms;
}
.view-btn:last-child { border-right: 0; }
.view-btn:hover { background: var(--bg); }
.view-btn.active { background: var(--accent); color: #fff; }

/* ---------- result meta / empty / notice ---------- */
.result-meta { color: var(--ink-muted); font-size: 0.85rem; margin: 0.5rem 0; }
.result-meta .note {
    display: block;
    margin-top: 0.25rem;
    color: var(--ink-dim);
    font-style: italic;
    font-size: 0.78rem;
}
.empty { color: var(--ink-dim); font-style: italic; }
.badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.05em 0.5em;
    border-radius: var(--radius-pill);
    background: var(--bg-chip);
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}
.hint { color: var(--ink-muted); font-size: 0.85rem; margin: 0.25rem 0 0.5rem; }
.notice {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-left: var(--accent-bar) solid var(--amber);
    padding: 0.75rem 1rem;
    border-radius: 5px;
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: #5a4700;
}
.notice code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    font-size: 0.85rem;
}

/* ---------- crumbs ---------- */
.crumbs {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    color: var(--ink-muted);
}
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- tables (single base, modifiers stack as additional classes) ---------- */
.table-scroll {
    overflow-x: auto;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
table.results {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}
/* Standalone-table chrome — stripped automatically when wrapped in .table-scroll
   (the wrapper provides border + shadow) or when used as h2h-matrix variant. */
table.results.standalone {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
table.results th,
table.results td {
    padding: 0.55rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
table.results tr:last-child td { border-bottom: 0; }
table.results th {
    background: var(--bg-elevated);
    font-weight: 600;
    color: var(--ink-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
table.results tbody tr:hover { background: var(--bg); }
table.results tr.is-goal { background: #fff7dd; }
table.results tr.is-goal:hover { background: #fff1c2; }
table.results tr.is-goal td { font-weight: 500; }

/* leaderboard modifier */
table.results.leaderboard td.num,
table.results.leaderboard th.num { text-align: right; }
table.results.leaderboard td.rank,
table.results.leaderboard th.rank { text-align: right; color: var(--ink-dim); width: 2.5rem; }
table.results.leaderboard td.pos { color: var(--pos); font-weight: 600; }
table.results.leaderboard td.neg { color: var(--neg); font-weight: 600; }
table.results.leaderboard th.text { text-align: left; }
table.results.leaderboard th.sortable { cursor: pointer; user-select: none; }
table.results.leaderboard th.sortable:hover { background: var(--bg-elevated-strong); color: var(--ink); }
table.results.leaderboard th.sort-active { color: var(--navy); background: var(--bg-elevated-strong); }

/* summary-grid modifier (h2h summary table) */
table.results.summary-grid th,
table.results.summary-grid td { text-align: center; }
table.results.summary-grid tr.subhead th {
    font-size: 0.68rem;
    background: var(--bg-elevated-strong);
    font-weight: 700;
}

/* compact modifier (replaces the old .onice rule tree) */
table.results.compact th,
table.results.compact td { padding: 0.35rem 0.5rem; }
table.results.compact { font-size: 0.8rem; }

/* h2h-matrix — full borders, larger cells, fill support */
table.h2h-matrix {
    border-collapse: collapse;
    margin-top: 0.25rem;
    background: var(--surface);
    font-size: 0.78rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-variant-numeric: tabular-nums;
}
table.h2h-matrix th,
table.h2h-matrix td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.6rem;
    vertical-align: top;
    min-width: 140px;
    text-align: left;
}
table.h2h-matrix thead th { background: var(--bg-elevated); font-weight: 600; color: var(--ink-muted); }
table.h2h-matrix tbody th { background: #fafbfd; font-weight: 500; color: var(--ink); }
.unit-label { font-weight: 500; line-height: 1.2; }
.unit-toi { font-size: 0.72rem; color: var(--ink-muted); margin-top: 0.15rem; }
.h2h-cell { color: var(--ink); }
.h2h-cell.empty { color: var(--ink-dim); text-align: center; }
.h2h-toi { font-weight: 600; }
.h2h-xg { font-size: 0.7rem; color: var(--ink-muted); }

/* ---------- utility: team-color text + cell-fill (replaces inline styles in templates) ---------- */
.team-colored { color: var(--team-color, var(--ink)); }
.cell-fill { background: rgb(10 108 241 / var(--fill, 0)); }

a.skater-link { color: var(--accent); text-decoration: none; }
a.skater-link:hover { text-decoration: underline; }

/* ---------- shot map ---------- */
.shotmap-wrap {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    background: var(--surface);
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
svg.shotmap { display: block; flex: 0 0 auto; max-width: 100%; height: auto; }
svg.shotmap circle[data-tip] { cursor: crosshair; }
#shotmap-tip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: rgba(20, 24, 30, 0.94);
    color: #f5f7fa;
    font: 500 0.78rem/1.25 var(--font-sans, system-ui, sans-serif);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    max-width: 280px;
    white-space: nowrap;
}
#shotmap-tip[hidden] { display: none; }
.shotmap-legend {
    font-size: 0.82rem;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.25rem;
}
.shotmap-legend .hint {
    margin-top: 0.5rem;
    font-style: italic;
    color: var(--ink-dim);
}
.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 0.45rem;
    border-radius: 50%;
}
.swatch.dot-goal { background: var(--goal); }
.swatch.dot-shot { background: var(--accent); opacity: 0.55; }
.swatch.hex-lo { background: #eef5ff; border: 1px solid var(--border-strong); border-radius: 2px; }
.swatch.hex-hi { background: var(--goal); border-radius: 2px; }

/* ---------- matchup banner ---------- */
.matchup-banner {
    /* Hero card — full shadow, generous padding. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-5);
    margin: var(--space-4) 0 var(--space-5);
}
.matchup-banner h2 {
    margin: 0 0 var(--space-4);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.banner-sub {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.banner-meta {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.series-record {
    display: flex;
    gap: var(--space-4);
    align-items: stretch;
    flex-wrap: wrap;
}
.record-card {
    background: var(--bg);
    border-left: var(--accent-bar) solid var(--team-color, var(--navy));
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    min-width: 130px;
}
.record-team {
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    color: var(--team-color, var(--navy));
    margin-bottom: 0.15rem;
}
.record-row {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.record-row-sm {
    font-size: 0.78rem;
    color: var(--ink-muted);
    margin-top: 0.1rem;
}
.game-status { color: var(--ink-dim); font-size: 0.75rem; margin-left: 0.2rem; }

/* ---------- shotmap-duo (hero placement on /matchup) ---------- */
.shotmap-duo {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    background: var(--surface);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.shotmap-duo > div { flex: 1 1 360px; min-width: 300px; }
.duo-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

/* ---------- on-ice grid (reference weight on /matchup) ---------- */
.onice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: var(--space-4);
}
.onice-block {
    background: var(--bg);
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--border);
    border-left: var(--accent-bar) solid var(--team-color, var(--border-strong));
    border-radius: var(--radius);
}
.onice-block table.results { border: 0; box-shadow: none; background: transparent; }
.onice-block .table-scroll { border: 0; box-shadow: none; background: transparent; }

.team-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
    background: var(--team-color, var(--navy));
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    text-transform: none;
}

/* ---------- game page ---------- */
.game-header {
    background: var(--surface);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-5);
}
.game-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    font-size: 1.15rem;
    font-weight: 600;
}
.game-score {
    font-size: 2rem;
    font-weight: 700;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}
.game-team { color: var(--ink-muted); }
.game-meta {
    text-align: center;
    color: var(--ink-dim);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

/* ---------- series picker / chips ---------- */
.series-picker-set {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
}
.series-picker-set legend { font-weight: 600; padding: 0 var(--space-2); }
.game-chip {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: var(--bg-chip);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--ink);
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms;
}
.game-chip:hover { border-color: var(--ink-dim); }
.game-chip input { margin: 0; }
.game-chip:has(input:checked) {
    background: var(--bg-chip-active);
    border-color: var(--accent);
}
.game-chip:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.series-legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.8rem;
}
.series-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.series-legend .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ---------- footer ---------- */
footer {
    padding: 1.25rem 1.5rem;
    color: var(--ink-dim);
    font-size: 0.78rem;
    border-top: 1px solid var(--border);
    margin-top: 2.5rem;
    text-align: center;
}

/* ---------- play-index panel (inside /matchup, collapsible) ---------- */
details.play-index-wrap {
    margin-top: var(--space-6);
}
details.play-index-wrap > summary {
    cursor: pointer;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: var(--accent-bar) solid var(--navy);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 120ms;
}
details.play-index-wrap > summary::-webkit-details-marker { display: none; }
details.play-index-wrap > summary::before {
    content: "▸";
    display: inline-block;
    color: var(--ink-muted);
    transition: transform 120ms;
    font-size: 0.85rem;
}
details.play-index-wrap[open] > summary::before { transform: rotate(90deg); }
details.play-index-wrap > summary:hover { background: var(--bg); }
details.play-index-wrap > summary .play-index-summary-hint {
    margin-left: auto;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink-muted);
}
.play-index-panel {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.play-index-panel h3 { margin-top: 0; }
.play-index-panel .hint { margin-top: -0.25rem; margin-bottom: 0.9rem; }
.play-index-panel form { margin-bottom: 0.75rem; }
#mp-results { margin-top: 0.75rem; }

.mp-tallies { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; }
.mp-tallies > span { white-space: nowrap; }
.mp-tallies .hint { margin: 0; color: var(--ink-muted); }

.mp-pager {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.75rem;
}
.mp-pager button {
    height: auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    color: var(--ink);
}
.mp-pager button:hover { background: var(--bg-elevated); }
.mp-pager .pager-meta { color: var(--ink-muted); font-size: 0.82rem; }

/* Drill-down affordances: cells that link into the panel. */
.drill-cell { padding: 0 !important; }
.drill-link {
    display: block;
    padding: 0.5rem 0.6rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.12s ease;
}
.drill-link:hover,
.drill-link:focus {
    background: var(--accent-soft);
    text-decoration: none;
    outline: none;
}
.h2h-cell.drill-cell .drill-link:hover { background: var(--accent-soft-strong); }

/* Shot-map duo labels are anchor tags — strip default link styling. */
a.duo-label { text-decoration: none; color: var(--ink); }
a.duo-label:hover { color: var(--navy); }

/* Watch column reserves a fixed width so layout stays stable when most
   games lack a youtube_video_id. */
.watch-cell {
    width: 3.5rem;
    text-align: center;
    white-space: nowrap;
}
.watch-link {
    display: inline-block;
    color: var(--youtube-red);
    font-size: 1rem;
    text-decoration: none;
    line-height: 1;
}
.watch-link:hover { color: var(--youtube-red-strong); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .onice-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .matchup-banner h2 .banner-meta { margin-left: 0; }
    .shotmap-duo { padding: var(--space-4); gap: var(--space-4); }
}
@media (max-width: 720px) {
    .site-header-inner { gap: 1rem; padding: 0 1rem; }
    .brand-name { display: none; }
    .site-nav a { padding: 0.5rem 0.55rem; font-size: 0.85rem; }
    /* Below 720px the nav tabs start to crowd. Make the strip horizontally
       scrollable (with snap) instead of letting tabs wrap or overlap the
       active state. Single-row order is preserved; users swipe to reveal
       offscreen tabs. */
    .site-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav > a,
    .site-nav > .nav-dropdown { flex-shrink: 0; scroll-snap-align: start; }
    main { padding: 1rem; }
    section h3 { font-size: 1.05rem; }
    fieldset { gap: var(--space-2) var(--space-3); padding: var(--space-3); }
    select { min-width: 140px; }
    .play-index-panel { padding: var(--space-3); }
    .game-title { gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
    .game-score { font-size: 1.6rem; }
}

/* ---------- advanced filters (WOWY, period/clock, sequence primitives) ---------- */
details.advanced-filters {
    margin-top: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    background: var(--bg);
}
details.advanced-filters > summary {
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    padding: 0.25rem 0;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
details.advanced-filters > summary::-webkit-details-marker { display: none; }
details.advanced-filters > summary::before {
    content: "▸";
    display: inline-block;
    color: var(--ink-muted);
    transition: transform 120ms;
    font-size: 0.85rem;
}
details.advanced-filters[open] > summary::before { transform: rotate(90deg); }
details.advanced-filters > fieldset { margin-top: 0.5rem; }
details.advanced-filters .hint { margin: 0 0 0.5rem 0; font-size: 0.85rem; }
label.checkbox,
label.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
}
label.checkbox > input,
label.checkbox-label > input { margin: 0; }
.preset-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Pressure-tagged outline ring for shot-map dots. */
.shotmap-dot.pressure-tagged {
    stroke: var(--amber);
    stroke-width: 1.4;
}

/* Documentation pages. */
.doc-page { max-width: 760px; }
.doc-page h2 { margin-top: 1.5rem; }
.doc-page .caveats {
    border-left: var(--accent-bar) solid var(--amber);
    background: var(--amber-soft);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.doc-page code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

/* ============================================================
   Splash page — PWHL-themed home redesign
   ============================================================ */

/* ---------- Hero ---------- */
.splash-hero {
    position: relative;
    color: var(--brand-ice);
    background: var(--surface-hero);
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-hero);
}
.splash-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--surface-hero-overlay);
    pointer-events: none;
}
.splash-hero-inner {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2.25rem;
}
.splash-hero-eyebrow {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: var(--fs-sm);
    color: var(--brand-orange);
    font-weight: 600;
}
.splash-hero-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-weight: 800;
}
.splash-hero-sub {
    margin: 0;
    max-width: 64ch;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: rgba(247, 250, 252, 0.85);
}
.splash-hero-sub a {
    color: var(--brand-orange);
    text-decoration: none;
    border-bottom: 1px solid rgba(242, 107, 33, 0.5);
}
.splash-hero-sub a:hover { border-bottom-color: var(--brand-orange); }

.splash-hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.splash-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--fs-sm);
    color: rgba(247, 250, 252, 0.7);
    font-variant-numeric: tabular-nums;
}
.splash-hero-meta strong { color: var(--brand-ice); font-weight: 600; }

.splash-hero-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
}
.splash-hero-toggle-label {
    color: rgba(247, 250, 252, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--fs-xs);
    padding-left: 0.4rem;
}
.splash-hero-toggle-opt {
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    color: rgba(247, 250, 252, 0.7);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.splash-hero-toggle-opt:hover { color: var(--brand-ice); }
.splash-hero-toggle-opt.is-active {
    background: var(--brand-orange);
    color: #fff;
    font-weight: 600;
}

/* ---------- Daily Standouts (NHL-Edge-style top-of-page callout) ----------
   Full-bleed sunken band so the section reads as its own zone between
   the navy hero above and the white splash grid below. The inner
   container caps width at 1280px to align with the rest of the page. */
.daily-standouts {
    background: var(--surface-sunken);
    padding: 2rem 0 2.5rem;
    margin: 0 0 2rem;
    border-top: 1px solid rgba(10, 37, 64, 0.06);
    border-bottom: 1px solid rgba(10, 37, 64, 0.06);
}
.daily-standouts-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.daily-standouts-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.daily-standouts-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-orange);
    margin: 0;
}
.daily-standouts-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--brand-navy);
    margin: 0;
    letter-spacing: 0.01em;
}
.daily-standouts-date {
    color: rgba(10, 37, 64, 0.55);
    font-weight: 500;
    font-size: 1rem;
    margin-left: 0.25rem;
}
.daily-standouts-games {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    font-size: 0.9rem;
    color: rgba(10, 37, 64, 0.7);
}
.daily-standouts-game a {
    color: var(--brand-navy);
    text-decoration: none;
    border-bottom: 1px dashed rgba(10, 37, 64, 0.2);
}
.daily-standouts-game a:hover {
    border-bottom-color: var(--brand-orange);
}
.daily-standouts-game-sep {
    color: rgba(10, 37, 64, 0.3);
}

/* Season Highlights section header — paired with daily-standouts above so
   the user reads a clear "daily vs season" split. Lives on the regular
   page background (no sunken band) for direct contrast with the section
   above. */
.splash-season {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.splash-season-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
}
.splash-season-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-orange);
    margin: 0;
}

/* Three side-by-side winner cards. */
.daily-standouts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

/* Goalies-page hero row: 6 season-leader cards, slightly narrower than
   daily-standouts so all six fit on a typical wide viewport but still wrap
   gracefully on tablet / phone. Reuses `.daily-standout-card` for the cards
   themselves. */
.goalie-callouts,
.skater-callouts {
    margin: 1rem 0 1.5rem;
}
.goalie-callouts-head,
.skater-callouts-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}
.goalie-callouts-row,
.skater-callouts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
/* Skaters callouts row override — only 4 cards, so we want either all-4-in-a-
   row (desktop) or 1-per-row (tablet), never the awkward "2 narrow columns"
   the auto-fit minmax(220px) lands on between 480px and 720px wide. Cards
   capped + container centered so a stretched 1-up doesn't look weird. */
@media (max-width: 980px) {
    .skater-callouts-row {
        grid-template-columns: minmax(0, 480px);
        justify-content: center;
    }
}
/* Responsive presentation swap: phone widths get the rotating ticker; tablet
   and desktop get the static cards row. Both are rendered server-side so
   there's no FOUC, just a CSS display toggle. */
.skater-callouts .skater-ticker { display: none; }
@media (max-width: 600px) {
    .skater-callouts .skater-callouts-row { display: none; }
    .skater-callouts .skater-ticker { display: block; }
}

/* Wide stat tables overflow narrow viewports. Containing the horizontal
   scroll inside the htmx target divs keeps the rest of the page (callouts,
   filters, ticker) at the natural viewport width instead of getting pushed
   sideways by the table's intrinsic column widths. */
#lb-results,
#g-results {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Hero row: HD + PK side by side, each wide enough for the rink SVG. */
.goalie-callouts-row--large {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    margin-bottom: 1rem;
}
/* Large cards lay the headline + player blurb in the left column and the
   rink SVG in the right — drops card height roughly in half vs stacked.
   Named grid areas keep the rink as a single right-column block spanning
   all three left-column rows. At narrow widths the grid collapses to a
   single column (see media query below). */
.goalie-callout-large .daily-standout-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas:
        "photo      rink"
        "headline   rink"
        "supporting rink";
    column-gap: 1.25rem;
    row-gap: 0.6rem;
    align-items: center;
    text-align: center;
}
.goalie-callout-large .daily-standout-photo      { grid-area: photo; }
.goalie-callout-large .daily-standout-headline   { grid-area: headline; }
.goalie-callout-large .daily-standout-supporting { grid-area: supporting; }
.goalie-callout-large .goalie-callout-rink {
    grid-area: rink;
    margin: 0;
    padding: 0;
    background: transparent;
}
.goalie-callout-large .goalie-callout-rink svg.shotmap {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    background: #ffffff;
}
.goalie-callout-rink-caption {
    font-size: 0.75rem;
    color: var(--muted, #6b7280);
    margin-top: 0.25rem;
    text-align: center;
}
/* Hero-stat + photo upsize, scoped to large cards only — the stat needs to
   carry equal visual weight to the rink it sits beside. */
.goalie-callout-large .daily-standout-value {
    font-size: 4rem;
    line-height: 1;
}
/* Specificity needs to beat .player-blurb--hero .player-photo which is
   declared later in this stylesheet. */
.goalie-callout-large .player-blurb--hero .player-photo,
.goalie-callout-large .player-blurb .player-photo {
    width: 120px;
    height: 120px;
}
@media (max-width: 720px) {
    .goalie-callout-large .daily-standout-body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "photo"
            "headline"
            "supporting"
            "rink";
    }
}
.daily-standout-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.daily-standout-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-pop);
}
/* Team-color band naming the category — the section's spine, so it
   gets the top of every card instead of the muted pill it used to
   live in at the bottom. */
.daily-standout-band {
    background: var(--team-color);
    color: var(--team-color-contrast);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    padding: 0.45rem 0.75rem;
}
.daily-standout-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1rem 1.2rem;
    text-align: center;
}
.daily-standout-card .player-blurb {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}
.daily-standout-card .player-blurb-caption {
    align-items: center;
    text-align: center;
}
.daily-standout-card .player-meta {
    justify-content: center;
}
.daily-standout-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    line-height: 1;
}
.daily-standout-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    color: var(--brand-navy);
    letter-spacing: -0.01em;
    line-height: 1;
}
.daily-standout-label {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--team-color);
    margin-top: 0.15rem;
}
.daily-standout-supporting {
    font-size: 0.92rem;
    color: rgba(10, 37, 64, 0.7);
    line-height: 1.4;
    margin: 0;
    max-width: 28ch;
}

/* Rotating ticker beneath the three winner cards. The static top
   border is gone — each slide carries its own team-colored solid band
   that reaches the edges of the rounded card and matches the band on
   the small standout cards above. */
.daily-ticker {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.daily-ticker-stage {
    position: relative;
    padding: 0 1.5rem 1rem;
}
.daily-ticker-slide {
    display: none;
    animation: dailyTickerFade 0.4s ease;
}
.daily-ticker-slide.is-active {
    display: block;
}
@keyframes dailyTickerFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
/* Negative horizontal margins pull the band out of the stage's side
   padding so it spans the full width of the rounded ticker frame.
   Matches `.daily-standout-band` styling above. */
.daily-ticker-band {
    background: var(--team-color);
    color: var(--team-color-contrast);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    padding: 0.55rem 0.75rem;
    margin: 0 -1.5rem 1.25rem;
}
.daily-ticker-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2rem;
    align-items: start;
}
.daily-ticker-player-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.daily-ticker-player {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* Hero photo override: bigger than the small-card hero variant, with a
   thicker team-color ring so the player carries the slide. */
.daily-ticker-player .player-blurb {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
/* Specificity needs to beat `.player-blurb--hero .player-photo`, which
   sets 84px — the ticker hero photo wants to land at 130px so the
   player carries the slide. */
.daily-ticker-player .player-blurb--hero .player-photo {
    width: 130px;
    height: 130px;
}
.daily-ticker-player .player-blurb-caption {
    align-items: flex-start;
    text-align: left;
}
.daily-ticker-player .player-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    line-height: 1.05;
}
.daily-ticker-sub {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(10, 37, 64, 0.65);
    line-height: 1.4;
}
.daily-ticker-headline {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(10, 37, 64, 0.08);
}
.daily-ticker-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 4.5rem;
    color: var(--brand-navy);
    letter-spacing: -0.02em;
    line-height: 1;
}
.daily-ticker-label {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 1rem;
    font-weight: 700;
    color: var(--team-color);
    margin-top: 0.2rem;
}
.daily-ticker-supporting {
    margin: 0;
    font-size: 0.95rem;
    color: rgba(10, 37, 64, 0.75);
    line-height: 1.45;
}
.daily-ticker-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.5rem;
    margin: 0;
}
.daily-ticker-stat {
    background: var(--surface-sunken);
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.daily-ticker-stat dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(10, 37, 64, 0.55);
}
.daily-ticker-stat dd {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--brand-navy);
    line-height: 1.05;
}
.daily-ticker-videos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.daily-ticker-videos-label {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: rgba(10, 37, 64, 0.6);
}
.daily-ticker-video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.daily-ticker-video-item .play-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.daily-ticker-video-fallback {
    background: var(--surface-sunken);
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
    font-size: 0.75rem;
    color: rgba(10, 37, 64, 0.6);
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.daily-ticker-video-fallback .muted {
    color: rgba(10, 37, 64, 0.45);
}
.daily-ticker-cta {
    align-self: flex-start;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--brand-navy);
    text-decoration: none;
    background: var(--team-color-soft);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.daily-ticker-cta:hover {
    background: var(--team-color);
    color: var(--team-color-contrast);
}
.daily-ticker-shotmap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.daily-ticker-shotmap-meta {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(10, 37, 64, 0.65);
}
.daily-ticker-shotmap .shotmap {
    width: 100%;
    height: auto;
}
/* Stack legend below the rink — the ticker right column isn't wide
   enough to host the legend beside the SVG without truncation. */
.daily-ticker-shotmap .shotmap-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.daily-ticker-shotmap .shotmap-legend {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: rgba(10, 37, 64, 0.7);
}
.daily-ticker-shotmap .shotmap-legend .hint {
    flex-basis: 100%;
}

/* Slide nav dots — labeled tabs for clarity. */
.daily-ticker-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 1.5rem 1rem;
    border-top: 1px solid rgba(10, 37, 64, 0.08);
    background: var(--surface-sunken);
}
.daily-ticker-dot {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(10, 37, 64, 0.6);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    min-height: 36px;
}
.daily-ticker-dot:hover {
    color: var(--brand-navy);
    border-color: rgba(10, 37, 64, 0.15);
}
.daily-ticker-dot.is-active {
    background: var(--brand-navy);
    color: var(--brand-ice);
    border-color: var(--brand-navy);
}

/* Skater ticker — rotating single-frame variant for the Skaters page
   callouts. Simpler than the daily ticker since each slide only carries
   photo / name / big stat / supporting / CTA. Container caps at 720px
   centered so it doesn't stretch awkwardly on wide screens. */
.skater-ticker {
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    max-width: 720px;
    margin: 0 auto;
}
.skater-ticker-stage {
    position: relative;
    padding: 0 1.5rem 1.25rem;
}
.skater-ticker-slide {
    display: none;
    animation: dailyTickerFade 0.4s ease;
}
.skater-ticker-slide.is-active { display: block; }
.skater-ticker-band {
    background: var(--team-color);
    color: var(--team-color-contrast);
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    padding: 0.55rem 0.75rem;
    margin: 0 -1.5rem 1.25rem;
}
.skater-ticker-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    text-align: center;
}
.skater-ticker-player .player-blurb {
    grid-template-columns: auto auto;
    justify-content: center;
}
.skater-ticker-headline {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: center;
}
.skater-ticker-value {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-navy);
}
.skater-ticker-label {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-muted);
}
.skater-ticker-supporting {
    margin: 0;
    color: var(--ink-muted);
    font-size: 0.92rem;
    max-width: 44ch;
}
.skater-ticker-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--brand-navy);
    color: var(--brand-ice);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    transition: opacity 0.15s ease;
}
.skater-ticker-cta:hover { opacity: 0.85; }
.skater-ticker-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    padding: 0 1.25rem 1rem;
}
.skater-ticker-dot {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border, #e3e6ec);
    background: transparent;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.skater-ticker-dot:hover {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}
.skater-ticker-dot.is-active {
    background: var(--brand-navy);
    color: var(--brand-ice);
    border-color: var(--brand-navy);
}
@media (max-width: 720px) {
    .skater-ticker-value { font-size: 3rem; }
}

@media (max-width: 820px) {
    .daily-ticker-body {
        grid-template-columns: 1fr;
    }
    .daily-ticker-value {
        font-size: 3.5rem;
    }
}
@media (max-width: 720px) {
    .daily-standout-value {
        font-size: 2.5rem;
    }
}

/* ---------- Card grid (hero row + secondary grid) ---------- */
.splash-grid {
    display: grid;
    gap: 1.25rem;
    padding: 0 1.25rem 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
}
.splash-grid--hero {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    margin-bottom: 1.5rem;
}
.splash-grid--secondary {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* ---------- Card ---------- */
.splash-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    border-top: 4px solid var(--team-color);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.splash-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-pop);
}

.splash-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem 0.85rem;
    background: var(--team-color-soft);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.splash-card-head-text { min-width: 0; }
.splash-card-title {
    margin: 0;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: var(--fs-h2);
    color: var(--brand-navy);
    line-height: var(--lh-snug);
}
.splash-card-subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--fs-sm);
    color: var(--ink-muted, #5b6472);
    line-height: var(--lh-snug);
}
.splash-card-team-badge {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--team-color);
    color: var(--team-color-contrast);
    text-transform: uppercase;
}
.splash-card-empty {
    padding: 1.25rem 1.1rem;
    color: var(--ink-muted, #5b6472);
    font-style: italic;
}

.splash-card-foot {
    margin-top: auto;
    padding: 0.75rem 1.1rem 1rem;
    border-top: 1px solid var(--border, #e3e6ec);
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    justify-content: flex-end;
}
.splash-card-cta {
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--team-color);
    transition: opacity 0.15s ease;
}
.splash-card-cta:hover { opacity: 0.7; text-decoration: underline; }
.splash-card-cta--secondary {
    color: var(--muted, #6b7280);
    font-weight: 500;
}

/* ---------- Entries list ---------- */
.splash-entries {
    list-style: none;
    margin: 0;
    padding: 0.6rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.splash-entry {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.7rem 0.6rem 0.7rem 0.5rem;
    border-radius: 10px;
    background: var(--entry-team-color-soft, rgba(10, 37, 64, 0.04));
    border-left: 3px solid var(--entry-team-color, var(--team-color));
    transition: background 0.15s ease;
}
.splash-entry:hover {
    background: var(--entry-team-color-soft, rgba(10, 37, 64, 0.07));
    filter: brightness(0.98);
}
.splash-entry--rank-1 {
    background: var(--entry-team-color-soft, rgba(10, 37, 64, 0.06));
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.splash-entry-rank-pill {
    flex-shrink: 0;
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--entry-team-color, var(--team-color));
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 2px 6px rgba(10, 37, 64, 0.2);
}
.splash-entry--rank-1 .splash-entry-rank-pill {
    width: 2.4rem; height: 2.4rem;
    font-size: 1.1rem;
}

.splash-entry-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.splash-entry-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}
.splash-entry-primary {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-navy);
    font-variant-numeric: tabular-nums;
}
.splash-entry-secondary {
    font-size: var(--fs-sm);
    color: var(--ink-muted, #5b6472);
}

.splash-entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    font-size: var(--fs-sm);
    color: var(--ink-muted, #5b6472);
}
.splash-entry-meta-clock { font-variant-numeric: tabular-nums; }
.splash-entry-game {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.splash-entry-game:hover { color: var(--brand-navy); }
.splash-entry-meta .watch-link {
    color: var(--youtube-red, #cc0000);
    text-decoration: none;
    font-weight: 600;
}
.splash-entry-meta .watch-link:hover { text-decoration: underline; }

.splash-entry-cta {
    align-self: center;
    text-decoration: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ink-dim, #8a93a1);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.splash-entry-cta:hover {
    background: var(--entry-team-color, var(--team-color));
    color: #fff;
}

/* ---------- Player blurb ---------- */
.player-blurb {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    align-items: center;
    margin: 0;
}
.player-blurb .player-photo {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--team-color);
    display: grid; place-items: center;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--team-color);
    flex-shrink: 0;
}
.player-blurb .player-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.player-blurb--logo .player-photo,
.player-blurb--jersey .player-photo {
    background: #fff;
}
.player-blurb--logo .player-photo img,
.player-blurb--jersey .player-photo img {
    object-fit: contain;
    padding: 6px;
    background: #fff;
}
.player-blurb .player-photo-fallback {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--team-color-contrast);
    letter-spacing: 0.04em;
}
.player-blurb-caption {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.player-blurb .player-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: var(--lh-snug);
    color: var(--brand-navy);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.player-blurb .player-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-xs);
    color: var(--ink-muted, #5b6472);
}
.player-blurb .player-meta-item { font-variant-numeric: tabular-nums; }
.player-blurb .team-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.player-blurb--hero {
    gap: 1rem;
}
.player-blurb--hero .player-photo {
    width: 84px; height: 84px;
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--team-color);
}
.player-blurb--hero .player-photo-fallback { font-size: 1.5rem; }
.player-blurb--hero .player-name { font-size: 1.4rem; }
.player-blurb--hero .player-meta { font-size: var(--fs-sm); }

/* ---------- Duo blurb: overlapped venn-style headshots ---------- */
.player-blurb--duo .player-duo-photos {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Two 48px circles with ~⅓ overlap — total visible width is 48 + 32 = 80px. */
    width: 80px;
    height: 48px;
    flex-shrink: 0;
}
.player-blurb--duo .player-photo--duo {
    position: absolute;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--team-color);
}
.player-blurb--duo .player-photo--duo-a { left: 0; z-index: 1; }
.player-blurb--duo .player-photo--duo-b { left: 32px; z-index: 2; }
.player-blurb--duo .player-photo--duo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* Single team-logo fallback when either headshot is missing. */
.player-blurb--duo-logo .player-duo-photos {
    width: 48px;
    justify-content: center;
}
.player-blurb--duo .player-photo--duo-fallback {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--team-color);
    display: grid;
    place-items: center;
}
.player-blurb--duo .player-photo--duo-fallback img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 6px;
    background: #fff;
    display: block;
}

/* ---------- Video thumbnail ---------- */
.play-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--entry-team-color, var(--team-color));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    margin-top: 0.25rem;
}
.play-thumb:hover {
    transform: scale(1.015);
    box-shadow: 0 0 0 2px var(--entry-team-color, var(--team-color)),
                0 8px 22px rgba(0, 0, 0, 0.25);
}
.play-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.18s ease;
}
.play-thumb:hover img { filter: brightness(0.85); }
.play-thumb-overlay {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #fff;
}
.play-thumb-icon {
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.85);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.18s ease, background 0.18s ease;
}
.play-thumb:hover .play-thumb-icon {
    transform: scale(1.08);
    background: rgba(255, 0, 0, 1);
}
.play-thumb-stamp {
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
    padding: 0.15rem 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-pill);
}
.play-thumb-warn {
    margin-left: 0.3rem;
    font-weight: 500;
    opacity: 0.85;
}

/* ---------- Video embed (iframe) ---------- */
.play-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 2px var(--entry-team-color, var(--team-color));
    margin-top: 0.25rem;
}
.play-embed iframe {
    width: 100%; height: 100%;
    border: 0;
    display: block;
}
.play-embed-stamp {
    position: absolute;
    bottom: 0.5rem; left: 0.5rem;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    padding: 0.15rem 0.5rem;
    background: rgba(0, 0, 0, 0.55);
    border-radius: var(--radius-pill);
    pointer-events: none;
}

/* ---------- Hero card variant ---------- */
.splash-card--hero .splash-card-title { font-size: var(--fs-h1); }
.splash-card--hero .splash-card-head {
    padding: 1.25rem 1.4rem 1rem;
}
.splash-card--hero .splash-entries { padding: 0.8rem 1.4rem; }
.splash-card--hero .splash-entry--rank-1 {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 1rem;
    gap: 0.6rem 1rem;
}
.splash-card--hero .splash-entry--rank-1 .splash-entry-rank-pill {
    grid-row: 1; grid-column: 1;
}
.splash-card--hero .splash-entry--rank-1 .splash-entry-body {
    grid-row: 1; grid-column: 2;
}
.splash-card--hero .splash-entry--rank-1 .splash-entry-cta {
    grid-row: 1; grid-column: 2;
    justify-self: end;
    align-self: start;
}

/* ---------- Possession chain (kept, restyled) ---------- */
.splash-chain {
    margin-top: 0.25rem;
    font-size: var(--fs-xs);
}
.splash-chain summary {
    cursor: pointer;
    color: var(--ink-muted, #5b6472);
    font-weight: 500;
}
.splash-chain summary:hover { color: var(--brand-navy); }
.splash-chain-steps {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0 0 0 0.65rem;
    border-left: 2px solid var(--entry-team-color, var(--team-color));
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}
.splash-chain-steps li {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}
.splash-chain-steps li.is-goal {
    font-weight: 600;
    color: var(--brand-navy);
}
.splash-chain-steps .step-clock { color: var(--ink-dim, #8a93a1); min-width: 5em; }
.splash-chain-steps .step-zone { color: var(--ink-dim, #8a93a1); font-style: italic; }

/* ---------- Accessibility helper ---------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    .splash-hero-inner { padding: 2rem 1rem 1.5rem; }
    .splash-grid--hero,
    .splash-grid--secondary { grid-template-columns: 1fr; }
    .splash-hero-meta-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .splash-card--hero .splash-entry--rank-1 {
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
    }
    .splash-card--hero .splash-entry--rank-1 .splash-entry-rank-pill { grid-row: 1; grid-column: 1; }
    .splash-card--hero .splash-entry--rank-1 .splash-entry-body { grid-row: 1; grid-column: 2; }
    .splash-card--hero .splash-entry--rank-1 .splash-entry-cta { grid-row: 1; grid-column: 3; }
}

/* =================================================================
   Matchup page revamp — splash-aligned hero banner, stat-card grid,
   collapsible details. Layered on top of the legacy `.matchup-banner`,
   `.record-card`, `.onice-block`, `.h2h-matrix` rules above (kept for
   backward compat with any pages still using them).
   ================================================================= */

/* Sticky picker bar at the top — pill row, more compact than the
   legacy <fieldset> form. */
.matchup-picker-bar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface-hero, var(--brand-navy));
    color: #fff;
    padding: 0.85rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.matchup-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    max-width: 1280px;
    margin: 0 auto;
}
.matchup-picker fieldset { all: unset; display: contents; }  /* kill legacy form styling if reused */
.matchup-picker-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.matchup-picker-label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}
.matchup-picker select {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    padding: 0.4rem 0.8rem;
    font-size: var(--fs-sm);
    font-family: inherit;
    min-width: 140px;
}
.matchup-picker select option { color: #0d1620; }
.matchup-picker-vs {
    align-self: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--brand-orange, #F26B21);
    font-size: 1.2rem;
    padding-bottom: 0.4rem;
}
.matchup-picker-go {
    align-self: stretch;
    background: var(--brand-orange, #F26B21);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.4rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.matchup-picker-go:hover { filter: brightness(1.1); }

/* Empty-state when no teams are selected. */
.matchup-empty {
    max-width: 760px;
    margin: 4rem auto;
    text-align: center;
    color: var(--ink-muted, #5b6472);
}
.matchup-empty h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--brand-navy, #0A2540);
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Hero banner: two team-colored cards flanking a center separator. */
.matchup-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    max-width: 1280px;
    margin: 1.5rem auto;
    padding: 0 1.25rem;
    align-items: stretch;
}
.matchup-hero-card {
    background: var(--surface, #fff);
    border-radius: var(--radius-card, 14px);
    border-top: 5px solid var(--team-color);
    box-shadow: var(--shadow-card);
    padding: 1.1rem 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.4rem 1rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.matchup-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--team-color-soft);
    z-index: 0;
}
.matchup-hero-card > * { position: relative; z-index: 1; }

.matchup-hero-card--b { text-align: right; }
.matchup-hero-card--b .matchup-hero-team,
.matchup-hero-card--b .matchup-hero-record {
    align-items: flex-end;
}

.matchup-hero-logo {
    grid-row: 1 / span 2;
    width: 72px; height: 72px;
    background: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 3px var(--surface, #fff), 0 0 0 5px var(--team-color);
    overflow: hidden;
}
.matchup-hero-logo img {
    width: 80%; height: 80%;
    object-fit: contain;
}
.matchup-hero-card--b .matchup-hero-logo {
    grid-column: 2;
    grid-row: 1 / span 2;
    order: 2;
}
.matchup-hero-card--b > .matchup-hero-team,
.matchup-hero-card--b > .matchup-hero-record {
    grid-column: 1;
    order: 1;
}

.matchup-hero-team {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.matchup-hero-code {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--team-color);
    letter-spacing: 0.04em;
}
.matchup-hero-name {
    font-size: var(--fs-sm);
    color: var(--ink-muted, #5b6472);
    font-weight: 500;
    margin-top: 0.2rem;
}

.matchup-hero-record {
    display: flex;
    flex-direction: column;
}
.matchup-hero-record-big {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--brand-navy, #0A2540);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.matchup-hero-record-meta {
    font-size: var(--fs-xs);
    color: var(--ink-muted, #5b6472);
    margin-top: 0.3rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

.matchup-hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    text-align: center;
    min-width: 130px;
}
.matchup-hero-eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-orange, #F26B21);
    margin-bottom: 0.4rem;
}
.matchup-hero-vs {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--brand-navy, #0A2540);
    line-height: 1;
}
.matchup-hero-meeting {
    font-size: var(--fs-xs);
    color: var(--ink-muted, #5b6472);
    margin-top: 0.4rem;
}

/* Section titles + sub for major matchup sections. */
.matchup-section-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-navy, #0A2540);
    margin: 0 0 0.4rem;
}
.matchup-section-sub {
    margin: 0 0 1rem;
    color: var(--ink-muted, #5b6472);
    font-size: var(--fs-sm);
}

.matchup-cards-section,
.matchup-series,
.matchup-shotmaps,
.matchup-evolution {
    max-width: 1280px;
    margin: 1.5rem auto;
    padding: 0 1.25rem;
}
.matchup-cards-empty {
    background: var(--surface-sunken, #f4f6fa);
    border-radius: var(--radius-card, 14px);
    padding: 1rem 1.25rem;
    color: var(--ink-muted, #5b6472);
    font-size: var(--fs-sm);
}

/* Series table: row hover lift, team-chip-aware. */
.matchup-series-table tbody tr {
    transition: background 0.15s ease;
}
.matchup-series-table tbody tr:hover {
    background: var(--surface-sunken, #f4f6fa);
}

/* Collapsible details block for the legacy analytics tables. */
.matchup-details {
    max-width: 1280px;
    margin: 2rem auto 1rem;
    padding: 0 1.25rem;
}
.matchup-details-summary {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-navy, #0A2540);
    cursor: pointer;
    padding: 0.85rem 1.1rem;
    background: var(--surface-sunken, #f4f6fa);
    border-radius: var(--radius-card, 14px);
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}
.matchup-details-summary::-webkit-details-marker { display: none; }
.matchup-details-summary::before {
    content: "▶";
    font-size: 0.7rem;
    color: var(--brand-orange, #F26B21);
    transition: transform 0.18s ease;
}
.matchup-details[open] .matchup-details-summary::before {
    transform: rotate(90deg);
}
.matchup-details-hint {
    font-family: var(--font-body, inherit);
    font-size: var(--fs-sm);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink-muted, #5b6472);
}
.matchup-details-block {
    margin-top: 1.5rem;
}
.matchup-subsection-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-navy, #0A2540);
    margin: 0 0 0.7rem;
}

/* Mobile: stack the matchup hero cards vertically. */
@media (max-width: 720px) {
    .matchup-hero {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
    .matchup-hero-center { padding: 0.5rem 0; }
    .matchup-picker {
        flex-direction: column;
        align-items: stretch;
    }
    .matchup-picker-vs { display: none; }
    .matchup-picker select { min-width: 0; width: 100%; }
}

/* =========================================================================
 * Dark theme overrides
 * Targeted swaps for the most visible hardcoded #fff surfaces that don't
 * already key off --surface. Scope guard: only colors flip; layout, sizes,
 * and component structure are unchanged. Dark mode polish (custom hover
 * states, shotmap palette tuning, etc.) is intentionally a follow-up.
 * ========================================================================= */
:root[data-theme="dark"] body { color: var(--ink); }

:root[data-theme="dark"] select {
    background-color: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="number"] {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}
:root[data-theme="dark"] #csv-link {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--border);
}
:root[data-theme="dark"] #csv-link:hover {
    background: var(--surface-raised);
    border-color: var(--border-strong);
}
:root[data-theme="dark"] .view-toggle {
    background: var(--surface);
    border-color: var(--border);
}
:root[data-theme="dark"] .view-btn {
    background: var(--surface);
    color: var(--ink);
    border-right-color: var(--border);
}
:root[data-theme="dark"] .view-btn:hover { background: var(--surface-raised); }
:root[data-theme="dark"] .view-btn.active { background: var(--accent); color: #fff; }

/* Tables and cards rely mostly on tokenized surfaces, but a few rules use
 * literal whites. These keep table rows legible on a dark page. */
:root[data-theme="dark"] table { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] thead th,
:root[data-theme="dark"] tbody td { border-color: var(--border); }

/* Player photo fallback wrappers stay light — the underlying jersey/logo
 * PNGs are designed for white backgrounds. Leave .player-photo--logo /
 * --jersey backgrounds alone; only adjust the outer card chrome. */

/* Text that uses var(--brand-navy) as a *foreground* color disappears on a
 * navy background. The brand color itself stays the same (it's still used
 * as a surface in the site header and the hero gradient) — these rules
 * only flip the *text* uses to --ink so headings/names stay legible. */
:root[data-theme="dark"] .splash-card-title,
:root[data-theme="dark"] .player-blurb .player-name,
:root[data-theme="dark"] .daily-standouts-title,
:root[data-theme="dark"] .daily-standouts-game a,
:root[data-theme="dark"] .splash-entry-primary,
:root[data-theme="dark"] .splash-entry-game,
:root[data-theme="dark"] .splash-entry-game:hover,
:root[data-theme="dark"] .splash-chain summary,
:root[data-theme="dark"] .splash-chain summary:hover,
:root[data-theme="dark"] .skater-callouts-head h2,
:root[data-theme="dark"] .skater-ticker-dot:hover,
:root[data-theme="dark"] .daily-ticker-dot:hover,
:root[data-theme="dark"] table.results.leaderboard th.sort-active,
:root[data-theme="dark"] a.duo-label:hover,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 {
    color: var(--ink);
}

/* Hero band gradient is dark by design — let its eyebrow and accents
 * remain branded; only the body copy needs a bump on dark. */
:root[data-theme="dark"] .splash-hero-sub { color: rgba(255, 255, 255, 0.82); }
:root[data-theme="dark"] .splash-card-subtitle,
:root[data-theme="dark"] .splash-entry-secondary,
:root[data-theme="dark"] .splash-entry-meta,
:root[data-theme="dark"] .result-meta {
    color: var(--ink-muted);
}

/* Card surfaces in dark mode should sit on --surface, not white. */
:root[data-theme="dark"] .splash-card,
:root[data-theme="dark"] .daily-standout-card,
:root[data-theme="dark"] .goalie-callout-large {
    background: var(--surface);
    border-color: var(--border);
}

/* Daily standout / callout card text — the rules above set navy text on a
 * light card. In dark mode those are invisible against the dark surface,
 * so flip foreground tokens. */
:root[data-theme="dark"] .daily-standout-value,
:root[data-theme="dark"] .daily-standout-headline,
:root[data-theme="dark"] .daily-standouts-date {
    color: var(--ink);
}
:root[data-theme="dark"] .daily-standout-supporting {
    color: var(--ink-muted);
}
/* Team-color labels: when no team scope is set, --team-color falls back to
 * brand-navy which is invisible on dark. Override only the default; cards
 * with an explicit team scope still get their team-tinted label. */
:root[data-theme="dark"] .daily-standout-card:not([style*="--team-color"]) .daily-standout-label,
:root[data-theme="dark"] .splash-card:not([style*="--team-color"]) .daily-standout-label {
    color: var(--brand-orange);
}

/* Tickers (Skater + Daily) — same dark-on-dark issue as the static cards.
 * The tickers only render at narrow viewports so they were missed in the
 * first pass. Flip the navy text/label tokens to ink for legibility. */
:root[data-theme="dark"] .skater-ticker-value,
:root[data-theme="dark"] .daily-ticker-value,
:root[data-theme="dark"] .daily-ticker-stat dd {
    color: var(--ink);
}
:root[data-theme="dark"] .skater-ticker-supporting,
:root[data-theme="dark"] .daily-ticker-sub,
:root[data-theme="dark"] .daily-ticker-supporting,
:root[data-theme="dark"] .daily-ticker-stat dt,
:root[data-theme="dark"] .daily-ticker-videos-label {
    color: var(--ink-muted);
}
:root[data-theme="dark"] .daily-ticker-headline {
    border-top-color: var(--border);
}