/* ═══════════════════════════════════════════════════════════════════════
   EDITORIAL TERMINAL — Design layer on top of style.css
   The Athletic / NYT Upshot editorial polish × Bloomberg Terminal density,
   sitting on the existing diamond-field background.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Editorial tokens — default values are tuned for dark mode (the original
       editorial-terminal look). Light-mode overrides further down. */
    --c-cream:        #e8e3d4;  /* primary foreground */
    --c-cream-soft:   #c8c2b0;  /* secondary text */
    --c-cream-dim:    #8c8676;  /* muted labels */
    --c-gold:         #d4af37;  /* accent / chalk-line / editorial flourish */
    --c-gold-soft:    rgba(212, 175, 55, 0.65);
    --c-pos:          #6fcf7c;  /* over / win / positive */
    --c-pos-soft:     rgba(111, 207, 124, 0.18);
    --c-neg:          #e57373;  /* under / loss / negative */
    --c-neg-soft:     rgba(229, 115, 115, 0.18);
    --c-neutral:      #8aa6b8;  /* steel-blue — informational */
    --c-watch:        #f0c860;  /* amber — caution */
    --c-hairline:     rgba(255, 255, 255, 0.18);
    --c-hairline-2:   rgba(255, 255, 255, 0.08);

    /* Card surface — lifted over the page bg so cards have a real edge.
       White at low alpha over navy = elevated, doesn't compete chromatically.
       --surface-2 (nested cards) is brighter than --surface (containing
       sections) so nested elements feel raised. */
    --surface:        rgba(255, 255, 255, 0.085);
    --surface-2:      rgba(255, 255, 255, 0.12);
    --surface-glow:   0 8px 28px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.10) inset;

    /* Typography stack */
    --font-display:   'Fraunces', 'Georgia', 'Times New Roman', serif;
    --font-sans:      'Inter Tight', 'Inter', 'Segoe UI', sans-serif;
    --font-mono:      'JetBrains Mono', 'SFMono-Regular', 'Consolas', monospace;
}

@media (prefers-color-scheme: light) {
    :root {
        /* Light-mode editorial palette — cream surfaces, ink text */
        --c-cream:      #1a1a1a;
        --c-cream-soft: #3b3631;
        --c-cream-dim:  #6a6358;
        --c-gold:       #b48a18;
        --c-gold-soft:  rgba(180, 138, 24, 0.55);
        --c-pos:        #1a6b3d;
        --c-pos-soft:   rgba(26, 107, 61, 0.12);
        --c-neg:        #b8232a;
        --c-neg-soft:   rgba(184, 35, 42, 0.10);
        --c-neutral:    #355c78;
        --c-watch:      #b8851a;
        --c-hairline:   rgba(10, 25, 41, 0.10);
        --c-hairline-2: rgba(10, 25, 41, 0.05);
        --surface:      rgba(253, 250, 240, 0.85);
        --surface-2:    rgba(244, 236, 216, 0.70);
        --surface-glow: 0 4px 16px rgba(10, 25, 41, 0.10), 0 1px 0 rgba(255, 255, 255, 0.30) inset;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME LAYER — paints the diamond-field gradient in dark mode; in light
   mode the body bg from style.css (var(--bg) = cream) shows through.
   iOS Safari does NOT honor background-attachment: fixed on body, so the
   gradient lives on a fixed pseudo-element on `html`.
   ═══════════════════════════════════════════════════════════════════════ */
html {
    -webkit-text-size-adjust: 100%;
    min-height: 100%;
}

@media (prefers-color-scheme: dark) {
    html {
        background-color: #0a1929;
    }
    /* Fixed gradient layer — paints once, doesn't scroll, works on iOS.
       Navy holds the upper 60% (where content lives); a subtle desaturated
       green warms the bottom edge as a nod to the field metaphor. */
    html::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -2;
        background:
            radial-gradient(ellipse 1400px 550px at 50% -120px, rgba(255, 220, 150, 0.10) 0%, transparent 70%),
            linear-gradient(180deg,
                #0a1929 0%,
                #0c2235 30%,
                #112a36 55%,
                #143430 80%,
                #173a2e 100%);
        pointer-events: none;
    }
    /* In dark mode: body is transparent so the html::before gradient shows */
    body {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
    }
}

body {
    font-family: var(--font-sans) !important;
    color: var(--c-cream) !important;
}
/* Disable the body::before/::after pseudos from style.css that were
   trying to paint their own backgrounds (causing iOS rendering bugs) */
body::before, body::after {
    background: none !important;
}

/* Anything that style.css gave a cream/white background → make transparent */
main { background: transparent !important; padding-top: 1rem !important; }
footer {
    background: transparent !important;
    border-top: 1px solid var(--c-hairline) !important;
    color: var(--c-cream-dim) !important;
}
footer small, footer .data-freshness, footer * { color: var(--c-cream-dim) !important; }
main a { color: var(--c-cream); }
h1, h2, h3, h4, h5, h6 { color: var(--c-cream) !important; }
.dashboard-section h2,
.dashboard-section h3,
section h2,
section h3,
.matchup-card h2,
.matchup-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-cream);
}

/* ───────────────────────────────────────────────────────────────────────
   GLOBAL DARK SURFACE — every page-level container becomes glassy navy.
   Nested cards (metric-card, highlight-box) get their own internal surface
   that's slightly lighter so they stand out from the parent section.
   ─────────────────────────────────────────────────────────────────────── */
section,
.dashboard-section,
.matchup-card,
.top-picks-card,
.standings-container,
.leaderboard,
.team-overview,
.player-overview,
.brief-section,
.highlights-strip,
.player-selector,
section.team-hero {
    background: var(--surface) !important;
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
    border: 1px solid var(--c-hairline) !important;
    border-radius: 8px !important;
    box-shadow: var(--surface-glow) !important;
    color: var(--c-cream) !important;
}

/* Inner nested cards — slightly lighter glass + own hairline.
   --surface-2 flips automatically per prefers-color-scheme. */
.metric-card,
.highlight-box,
.pitcher-card,
.standings-card,
.card {
    background: var(--surface-2) !important;
    border: 1px solid var(--c-hairline) !important;
    border-radius: 6px !important;
    color: var(--c-cream) !important;
    box-shadow: none !important;
}
.metric-card:hover,
.standings-card:hover,
.card:hover {
    border-color: var(--c-gold-soft) !important;
}

/* Force every paragraph / list item / heading inside containers to cream */
section, section *,
.dashboard-section, .dashboard-section *,
.matchup-card, .matchup-card *,
.metric-card, .metric-card *,
.highlight-box, .highlight-box * {
    color: inherit;
}
section, .dashboard-section, .matchup-card,
.metric-card, .highlight-box, .pitcher-card,
.standings-card, .standings-container, .leaderboard,
.team-overview, .player-overview {
    color: var(--c-cream) !important;
}

/* Headings inside any container — always cream */
section h1, section h2, section h3, section h4, section h5,
.dashboard-section h1, .dashboard-section h2, .dashboard-section h3,
.dashboard-section h4, .dashboard-section h5,
.metric-card h2, .metric-card h3, .metric-card h4,
.highlight-box h3, .highlight-box .highlight-title {
    color: var(--c-cream) !important;
}

/* Standings headers / division headings */
.standings-container h2,
.standings-container h3,
.division-name {
    color: var(--c-cream) !important;
}

/* Subtle gold hairline above each section title — editorial flourish */
.dashboard-section > h2:first-child::before,
.dashboard-section > h3:first-child::before {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-soft) 40%, transparent 100%);
    margin-bottom: 0.65rem;
    width: 120px;
}

/* ───────────────────────────────────────────────────────────────────────
   TOP PICKS — editorial column header look
   ─────────────────────────────────────────────────────────────────────── */
.top-picks-card {
    padding: 1rem 1.1rem !important;
}
.tpc-title {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    color: var(--c-cream) !important;
    letter-spacing: -0.005em !important;
    border-bottom: 1px solid var(--c-hairline);
    padding-bottom: 0.45rem;
    margin-bottom: 0.55rem;
    text-transform: none !important;
}
.tpc-row {
    border-bottom: 1px solid var(--c-hairline-2) !important;
    padding: 0.45rem 0 !important;
}
.tpc-row:last-child { border-bottom: none !important; }
.tpc-pick {
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    color: var(--c-cream) !important;
}
.tpc-meta {
    font-family: var(--font-sans) !important;
    color: var(--c-cream-dim) !important;
    font-size: 0.82rem !important;
}
.tpc-stat {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c-cream) !important;
}
.tpc-edge.positive-diff { color: var(--c-pos) !important; }
.tpc-edge.negative-diff { color: var(--c-neg) !important; }

/* ───────────────────────────────────────────────────────────────────────
   MATCHUP CARD HEADER — Editorial team names, hero scores
   ─────────────────────────────────────────────────────────────────────── */
.matchup-col-away .team-away,
.matchup-col-home .team-home {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 1.55rem !important;
    letter-spacing: -0.015em !important;
    line-height: 1.1 !important;
}
.matchup-col-away .team-away a,
.matchup-col-home .team-home a {
    color: var(--c-cream) !important;
    transition: color 0.15s ease;
}
.matchup-col-away .team-away a:hover,
.matchup-col-home .team-home a:hover {
    color: var(--c-gold) !important;
    text-decoration: none !important;
}

/* L10 record — terminal-style chip */
.team-record {
    background: transparent !important;
    color: var(--c-cream-dim) !important;
    border: 1px solid var(--c-hairline) !important;
    border-radius: 3px !important;
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    padding: 0.12rem 0.45rem !important;
    text-transform: uppercase;
}

/* Hero score — huge editorial display serif */
.team-final-score {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 3.2rem !important;
    line-height: 1 !important;
    color: var(--c-cream-soft) !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.03em !important;
}
.team-scoreline-winner .team-final-score {
    color: var(--c-cream) !important;
    text-shadow: 0 0 24px rgba(212, 175, 55, 0.25);
}
.team-win-badge {
    background: var(--c-gold) !important;
    color: #1a1410 !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 2px !important;
}

/* Team box line (R H HR BB K E) — Bloomberg ticker style */
.team-box-line {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 0.78rem !important;
    color: var(--c-cream-soft) !important;
    gap: 0.85rem !important;
}
.team-box-line .tb-val {
    font-weight: 600 !important;
    color: var(--c-cream) !important;
}
.team-box-line .tb-label {
    color: var(--c-cream-dim) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    margin-left: 0.15rem;
}

/* Top performers list */
.team-top-performers li {
    font-family: var(--font-sans) !important;
    font-size: 0.82rem !important;
    color: var(--c-cream-soft) !important;
    border-bottom: 1px dotted var(--c-hairline);
    padding: 0.15rem 0;
}
.team-top-performers li a {
    color: var(--c-cream) !important;
    font-weight: 500;
}
.team-top-performers .tp-line {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c-gold) !important;
    font-weight: 600;
}
.team-top-performers .tp-r,
.team-top-performers .tp-hr,
.team-top-performers .tp-rbi,
.team-top-performers .tp-bb,
.team-top-performers .tp-sb {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c-cream-dim) !important;
}

/* ───────────────────────────────────────────────────────────────────────
   CENTER COLUMN — H2H, time, venue, weather
   ─────────────────────────────────────────────────────────────────────── */
.matchup-col-center .center-stat {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 0.82rem !important;
    color: var(--c-cream-soft) !important;
}
.matchup-col-center .cs-label {
    color: var(--c-cream-dim) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    margin-right: 0.4rem;
}
.matchup-col-center .cs-val {
    color: var(--c-cream-soft) !important;
    font-weight: 500;
}
.matchup-col-center .cs-val.h2h-lead {
    color: var(--c-gold) !important;
    font-weight: 700;
}
.matchup-col-center .game-time-badge {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
    color: var(--c-cream) !important;
    background: transparent !important;
    border: 1px solid var(--c-hairline);
    padding: 0.2rem 0.6rem !important;
    letter-spacing: -0.01em;
}
.matchup-col-center .center-venue,
.matchup-col-center .center-weather {
    font-family: var(--font-sans) !important;
    font-size: 0.78rem !important;
    color: var(--c-cream-dim) !important;
    letter-spacing: 0.01em;
}
.matchup-col-center .center-status .game-status {
    font-family: var(--font-mono) !important;
    color: var(--c-watch) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Divisional badge */
.divisional-badge.center {
    background: transparent !important;
    color: var(--c-gold) !important;
    border: 1px solid var(--c-gold-soft) !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.18em !important;
    padding: 0.1rem 0.5rem !important;
}

/* ───────────────────────────────────────────────────────────────────────
   MODEL PICK BADGE — refined editorial chip
   ─────────────────────────────────────────────────────────────────────── */
.model-pick-badge {
    background: linear-gradient(180deg, var(--c-pos-soft) 0%, rgba(111, 207, 124, 0.08) 100%) !important;
    border: 1px solid rgba(111, 207, 124, 0.35) !important;
    border-radius: 3px !important;
    padding: 0.25rem 0.6rem !important;
    font-family: var(--font-sans) !important;
}
.mpb-label {
    font-weight: 700 !important;
    color: var(--c-pos) !important;
    letter-spacing: 0.14em !important;
    font-size: 0.72rem !important;
}
.mpb-pct {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c-cream) !important;
    font-weight: 600 !important;
}
.mpb-odds {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c-cream-dim) !important;
}

/* ───────────────────────────────────────────────────────────────────────
   LINESCORE — Bloomberg ticker table
   ─────────────────────────────────────────────────────────────────────── */
.linescore {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    background: transparent !important;
}
.linescore th {
    background: transparent !important;
    color: var(--c-cream-dim) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid var(--c-hairline) !important;
    text-transform: uppercase;
}
.linescore td {
    color: var(--c-cream-soft) !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid var(--c-hairline-2) !important;
}
.linescore .ls-team {
    font-family: var(--font-display) !important;
    color: var(--c-cream) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
}
.linescore .ls-tot {
    color: var(--c-cream) !important;
    font-weight: 700;
}
.linescore .ls-sep {
    border-left: 1px solid var(--c-hairline) !important;
    padding-left: 0.6rem;
}

/* ───────────────────────────────────────────────────────────────────────
   PITCHER CARDS — Hero ERA + dense mono splits
   ─────────────────────────────────────────────────────────────────────── */
.pitcher-card {
    background: var(--surface-2) !important;
    border: 1px solid var(--c-hairline) !important;
    border-radius: 6px !important;
    padding: 0.85rem 1rem !important;
    border-top: 3px solid transparent !important;
}
/* Distinguish the two pitcher cards by accent top border + a vertical fade
   overlay so the top quarter of each card breathes its accent hue.
   Away (left) = warm gold, home (right) = cool cyan. */
.pitcher-matchup-row > .pitcher-card:nth-child(1),
.matchup-card .pitcher-card:nth-of-type(1) {
    border-top-color: var(--c-gold) !important;
    background:
        linear-gradient(180deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.04) 18%, transparent 38%),
        var(--surface-2) !important;
}
.pitcher-matchup-row > .pitcher-card:nth-child(1) .pitcher-name-row,
.matchup-card .pitcher-card:nth-of-type(1) .pitcher-name-row {
    border-bottom: 1px solid rgba(212, 175, 55, 0.45) !important;
}
.pitcher-matchup-row > .pitcher-card:nth-child(2),
.matchup-card .pitcher-card:nth-of-type(2) {
    border-top-color: rgb(79, 193, 255) !important;
    background:
        linear-gradient(180deg, rgba(79, 193, 255, 0.12) 0%, rgba(79, 193, 255, 0.04) 18%, transparent 38%),
        var(--surface-2) !important;
}
.pitcher-matchup-row > .pitcher-card:nth-child(2) .pitcher-name-row,
.matchup-card .pitcher-card:nth-of-type(2) .pitcher-name-row {
    border-bottom: 1px solid rgba(79, 193, 255, 0.45) !important;
}

/* Pitch arsenal chips — give them a subtle inset bg + brighter type so they
   register as a real row of data instead of dim hairline outlines */
.pitch-chip {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--c-cream) !important;
}
.pitcher-name-row {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    color: var(--c-cream) !important;
    letter-spacing: -0.01em !important;
    border-bottom: 1px solid var(--c-hairline);
    padding-bottom: 0.4rem !important;
    margin-bottom: 0.55rem !important;
}
.pitcher-name-row a {
    color: var(--c-cream) !important;
    transition: color 0.15s;
}
.pitcher-name-row a:hover { color: var(--c-gold) !important; text-decoration: none !important; }
.pitcher-hand {
    font-family: var(--font-mono) !important;
    background: transparent !important;
    color: var(--c-neutral) !important;
    border: 1px solid var(--c-hairline) !important;
    font-size: 0.68rem !important;
    padding: 0.08rem 0.35rem !important;
    letter-spacing: 0.05em;
    border-radius: 2px !important;
}
.pitcher-record {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c-cream-dim) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
}
/* Proj-K chip — model strikeout projection, sits next to the pitcher's name */
.pitcher-projk {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-gold) !important;
    background: rgba(212, 175, 55, 0.10) !important;
    border: 1px solid rgba(212, 175, 55, 0.38) !important;
    border-radius: 2px !important;
    padding: 0.08rem 0.4rem !important;
    white-space: nowrap;
}
.pitcher-projk strong {
    font-weight: 700 !important;
    color: var(--c-gold) !important;
    font-size: 1.05em;
}
.pitcher-projk .projk-side { font-size: 0.95em; }   /* O/U marker, not enlarged */
/* Proj H+R+RBI line — model batter projection, sits under each Stars Align column */
.hrr-line {
    margin-top: 0.55rem;
    padding-top: 0.4rem;
    border-top: 1px dotted var(--c-hairline);
    font-family: var(--font-sans) !important;
    font-size: 0.8rem !important;
    color: var(--c-cream-soft) !important;
    line-height: 1.55;
}
.hrr-label {
    display: block;
    font-family: var(--font-sans) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-neutral) !important;
    font-weight: 700 !important;
    margin-bottom: 0.2rem;
}
.hrr-b { white-space: nowrap; color: var(--c-cream) !important; }
.hrr-b em {
    font-style: normal;
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
    color: var(--c-gold) !important;
    font-weight: 700;
}
.hrr-sep { color: var(--c-hairline); margin: 0 0.22rem; }

/* Hero ERA line — first stat is huge editorial serif */
.pitcher-season-line {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 0.85rem !important;
    color: var(--c-cream-soft) !important;
    gap: 0.85rem !important;
    border-bottom: 1px solid var(--c-hairline);
    padding-bottom: 0.55rem;
    margin-bottom: 0.55rem;
}
.pitcher-season-line span {
    color: var(--c-cream-dim) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pitcher-season-line span strong {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 1.45rem !important;
    color: var(--c-cream) !important;
    letter-spacing: -0.02em !important;
    text-transform: none;
    margin-right: 0.2rem;
    display: inline-block;
}

/* Pitch arsenal chips — compact terminal style */
.pitch-arsenal {
    gap: 0.4rem !important;
    margin-bottom: 0.65rem !important;
}
.pitch-chip {
    background: transparent !important;
    border: 1px solid var(--c-hairline) !important;
    color: var(--c-cream-soft) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: 2px !important;
    letter-spacing: 0.03em;
}
.pitch-chip em {
    font-style: normal !important;
    color: var(--c-cream) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}

/* vs Roster + Last-5-Starts sub-grids */
.pitcher-deep-stats {
    gap: 0.85rem !important;
}
.pitcher-deep-stats > div {
    background: transparent !important;
    border: 1px solid var(--c-hairline) !important;
    border-radius: 4px !important;
    padding: 0.5rem 0.65rem !important;
}
.vs-roster-label,
.recent-starts-section .vs-roster-label {
    font-family: var(--font-sans) !important;
    color: var(--c-cream-dim) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-hairline-2);
    padding-bottom: 0.25rem;
    display: block;
    margin-bottom: 0.4rem;
}
.pitcher-deep-stats th,
.pitcher-deep-stats td {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    background: transparent !important;
    border: none !important;
    padding: 0.2rem 0.4rem !important;
    color: var(--c-cream-soft) !important;
}
.pitcher-deep-stats th {
    color: var(--c-cream-dim) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
}

/* ───────────────────────────────────────────────────────────────────────
   STARS ALIGN — refined editorial list
   ─────────────────────────────────────────────────────────────────────── */
.stars-col-label {
    font-family: var(--font-sans) !important;
    color: var(--c-gold) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    padding-bottom: 0.4rem;
    margin-bottom: 0.55rem;
    position: relative;
    display: inline-block;
}
.stars-col-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-soft) 100%);
}
.star-entry {
    font-family: var(--font-sans) !important;
    font-size: 0.85rem !important;
    color: var(--c-cream) !important;
    padding: 0.2rem 0;
    border-bottom: 1px dotted var(--c-hairline);
}
.star-icons {
    color: #f5c518 !important;
    letter-spacing: -0.1em;
}
.star-name {
    font-weight: 600 !important;
    color: var(--c-cream) !important;
}
.star-signal {
    font-family: var(--font-mono) !important;
    background: transparent !important;
    border: 1px solid var(--c-hairline) !important;
    padding: 0.05rem 0.3rem !important;
    border-radius: 2px !important;
    font-size: 0.7rem !important;
}
.star-signal .ss-label {
    color: var(--c-cream-dim) !important;
    margin-right: 0.2rem;
}
.star-signal .ss-val {
    color: #7dd4ff !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.star-signal.strong .ss-val { color: #f5c518 !important; }

/* ───────────────────────────────────────────────────────────────────────
   HOT HITTERS / BULLPEN / TABLES — tabular numerals everywhere
   ─────────────────────────────────────────────────────────────────────── */
.data-table {
    font-family: var(--font-sans) !important;
    background: transparent !important;
}
.data-table thead th {
    background: transparent !important;
    color: var(--c-cream-dim) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-hairline) !important;
    padding: 0.5rem 0.6rem !important;
}
.data-table tbody td {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c-cream-soft) !important;
    background: transparent !important;
    border-bottom: 1px solid var(--c-hairline-2) !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem;
}
.data-table tbody td:first-child {
    font-family: var(--font-sans) !important;
    color: var(--c-cream) !important;
    font-weight: 500;
}
.data-table tbody td a {
    color: var(--c-cream) !important;
}
.data-table tbody td a:hover {
    color: var(--c-gold) !important;
    text-decoration: none;
}

/* Section sub-headers (HOT HITTERS — LAST 5 GAMES, BULLPEN, etc.) */
.matchup-card .muted {
    color: var(--c-cream-dim) !important;
}
.matchup-card div.muted {
    font-family: var(--font-sans) !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    font-size: 0.65rem !important;
    color: var(--c-cream-dim) !important;
    border-bottom: 1px solid var(--c-hairline);
    padding-bottom: 0.3rem !important;
    margin-bottom: 0.5rem !important;
}

/* ───────────────────────────────────────────────────────────────────────
   PREDICTIONS DASHBOARD — same editorial polish
   ─────────────────────────────────────────────────────────────────────── */
.highlight-box {
    background: var(--surface-2) !important;
    border: 1px solid var(--c-hairline) !important;
    border-radius: 6px !important;
    padding: 0.85rem 1rem !important;
}
.highlight-title {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    color: var(--c-cream) !important;
    font-size: 1.05rem !important;
    border-bottom: 1px solid var(--c-hairline);
    padding-bottom: 0.35rem;
    margin-bottom: 0.45rem;
    letter-spacing: -0.005em;
}
.highlight-box p {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 1.4rem !important;
    color: var(--c-cream) !important;
    margin: 0;
    line-height: 1.2;
}
.highlight-box p strong {
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    color: var(--c-cream) !important;
    letter-spacing: -0.02em;
}

.pred-accuracy {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    background: var(--c-pos-soft) !important;
    color: var(--c-pos) !important;
    border: 1px solid rgba(111, 207, 124, 0.3);
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    font-size: 0.72rem !important;
    letter-spacing: 0.08em !important;
}

/* Positive/Negative semantics — unified */
.positive-diff { color: var(--c-pos) !important; }
.negative-diff { color: var(--c-neg) !important; }

/* ───────────────────────────────────────────────────────────────────────
   MATCHUP DETAIL BUTTON — refined CTA
   ─────────────────────────────────────────────────────────────────────── */
.matchup-detail-btn {
    background: transparent !important;
    color: var(--c-cream) !important;
    border: 1px solid var(--c-gold-soft) !important;
    border-radius: 3px !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    padding: 0.45rem 1rem !important;
    transition: background 0.15s, color 0.15s;
}
.matchup-detail-btn:hover {
    background: var(--c-gold) !important;
    color: #1a1410 !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 2 — INLINE SVG VISUALIZATIONS
   W/L dots, sparklines, H2H stacked bars, cumulative-runs line.
   ═══════════════════════════════════════════════════════════════════════ */

/* L10 record now sits beside a row of W/L dots */
.team-record-with-dots {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem !important;
    background: transparent !important;
    border: 1px solid var(--c-hairline) !important;
    padding: 0.18rem 0.5rem !important;
    border-radius: 3px !important;
}
.team-record-with-dots .tr-label {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c-cream-dim) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    white-space: nowrap;
}
.wl-dots {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

/* H2H stacked proportional bar */
.h2h-bar {
    display: block;
    margin: 0 auto 0.45rem !important;
    opacity: 0.85;
}
.h2h-with-bar {
    margin-bottom: 0.1rem !important;
}

/* ERA / K sparkline next to the big hero number */
.era-with-spark,
.k-with-spark {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.4rem;
}
.spark-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    padding: 0.1rem 0.3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--c-hairline-2);
    border-radius: 2px;
}
.sparkline {
    display: block;
}

/* Cumulative runs strip under the linescore */
.cum-runs-row {
    display: grid;
    grid-template-columns: 70px 1fr 1fr;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0 0.1rem;
    margin-top: 0.3rem;
    border-top: 1px solid var(--c-hairline-2);
}
.cum-runs-label {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    color: var(--c-cream-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: right;
}
.cum-runs-spark {
    display: block;
    line-height: 0;
    opacity: 0.85;
}
.cum-runs-spark svg { width: 100%; height: 16px; }

/* ───────────────────────────────────────────────────────────────────────
   TEAM LINK GRID — Browse by Team (Hitting Explorer)
   ─────────────────────────────────────────────────────────────────────── */
.team-link-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.6rem;
    margin-top: 0.8rem;
}
.dashboard-section a.team-link-chip,
a.team-link-chip {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.95rem !important;
    background: linear-gradient(135deg, rgba(8, 18, 26, 0.85) 0%, rgba(20, 35, 48, 0.65) 100%) !important;
    border: 1px solid var(--c-hairline) !important;
    border-radius: 6px !important;
    color: var(--c-cream) !important;
    font-family: var(--font-display) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    text-decoration: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    position: relative;
    overflow: hidden;
}
.dashboard-section a.team-link-chip::after,
a.team-link-chip::after {
    content: '→';
    color: var(--c-gold-soft);
    font-family: var(--font-sans);
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.dashboard-section a.team-link-chip:hover,
a.team-link-chip:hover {
    border-color: var(--c-gold) !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(20, 35, 48, 0.75) 100%) !important;
    color: var(--c-gold) !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 14px rgba(212, 175, 55, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.4);
    text-decoration: none !important;
}
.dashboard-section a.team-link-chip:hover::after,
a.team-link-chip:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* PA window selector buttons (Hot Batters table header) */
.hot-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.window-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-sans);
    font-size: 0.75rem;
}
.window-selector .muted {
    color: var(--c-cream-dim) !important;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-right: 0.25rem;
}
.window-btn {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: transparent;
    border: 1px solid var(--c-hairline);
    border-radius: 3px;
    color: var(--c-cream-soft) !important;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.window-btn:hover {
    border-color: var(--c-gold-soft);
    color: var(--c-cream) !important;
    text-decoration: none;
}
.window-btn.active {
    background: var(--c-gold);
    color: #1a1410 !important;
    border-color: var(--c-gold);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   TEAM DETAIL — Hero strip + dense visual brief
   ═══════════════════════════════════════════════════════════════════════ */
.team-hero { padding: 0 !important; }
.team-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1.2fr;
    gap: 0;
    align-items: stretch;
}
.team-hero-block {
    padding: 1.1rem 1.3rem;
    border-right: 1px solid var(--c-hairline);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.team-hero-block:last-child { border-right: none; }

.th-eyebrow {
    font-family: var(--font-sans);
    color: var(--c-cream-dim);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.th-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--c-cream);
}
.th-season {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--c-cream-dim);
    letter-spacing: 0.08em;
}
.th-record {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin-top: 0.3rem;
}
.th-record-num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.8rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--c-cream);
    font-variant-numeric: tabular-nums;
}
.th-record-pct {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--c-gold);
    font-size: 1rem;
    font-weight: 600;
}
.th-gb {
    font-family: var(--font-mono);
    color: var(--c-cream-dim);
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}
.th-form {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.th-form-label {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--c-cream-dim);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.th-section-label {
    font-family: var(--font-sans);
    color: var(--c-cream-dim);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--c-hairline-2);
    padding-bottom: 0.3rem;
    margin-bottom: 0.45rem;
    font-weight: 600;
}

/* Splits — row of label / bar / value */
.split-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.18rem 0;
}
.split-label {
    font-family: var(--font-sans);
    color: var(--c-cream-dim);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.split-bar-wrap { display: flex; align-items: center; }
.split-bar-wrap svg { width: 100%; max-width: 180px; }
.split-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--c-cream);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.split-sep { color: var(--c-cream-dim); margin: 0 0.15rem; }

/* Streak pill */
.streak-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    background: var(--surface-2);
    border: 1px solid var(--c-hairline);
    align-self: flex-start;
}
.streak-pill.streak-w {
    background: rgba(111, 207, 124, 0.12);
    border-color: rgba(111, 207, 124, 0.35);
}
.streak-pill.streak-l {
    background: rgba(229, 115, 115, 0.12);
    border-color: rgba(229, 115, 115, 0.35);
}
.streak-pill.streak-t {
    background: rgba(138, 166, 184, 0.12);
    border-color: rgba(138, 166, 184, 0.35);
}
.streak-letter {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}
.streak-w .streak-letter { color: var(--c-pos); }
.streak-l .streak-letter { color: var(--c-neg); }
.streak-t .streak-letter { color: var(--c-neutral); }
.streak-num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--c-cream);
    letter-spacing: -0.02em;
}

/* Run differential — hero block */
.rd-hero {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.35rem 0;
}
.rd-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--c-cream);
    font-variant-numeric: tabular-nums;
}
.rd-pos .rd-num { color: var(--c-pos); }
.rd-neg .rd-num { color: var(--c-neg); }
.rd-sub {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--c-cream-dim);
    line-height: 1.35;
}
.rd-sub strong {
    font-family: var(--font-mono);
    color: var(--c-cream);
    font-weight: 600;
}
.rd-sep {
    font-size: 0.62rem;
    color: var(--c-cream-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 0.05rem 0;
}

/* Triple-slash + supporting stat row */
.triple-slash {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.ts-block {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}
.ts-num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--c-cream);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.ts-lbl {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    color: var(--c-cream-dim);
    letter-spacing: 0.16em;
    margin-top: 0.18rem;
    text-transform: uppercase;
}
.ts-sep {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--c-cream-dim);
    margin: 0 0.05rem;
    align-self: flex-start;
    line-height: 1;
}

/* Divisional record — horizontal bars */
.div-record-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.div-record-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--c-hairline-2);
}
.dr-label {
    font-family: var(--font-sans);
    color: var(--c-cream);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.dr-bar-wrap { display: flex; align-items: center; }
.dr-bar-wrap svg { width: 100%; max-width: 240px; }
.dr-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--c-cream);
    font-weight: 600;
}
.dr-sep { color: var(--c-cream-dim); margin: 0 0.15rem; }
.dr-pct {
    color: var(--c-cream-dim);
    font-size: 0.78rem;
    margin-left: 0.5rem;
    font-weight: 500;
}

/* Result pill — W/L badge in recent games */
.result-pill {
    display: inline-block;
    width: 1.4rem;
    text-align: center;
    padding: 0.1rem 0;
    border-radius: 3px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
.result-win {
    background: rgba(111, 207, 124, 0.2);
    color: var(--c-pos);
    border: 1px solid rgba(111, 207, 124, 0.4);
}
.result-loss {
    background: rgba(229, 115, 115, 0.2);
    color: var(--c-neg);
    border: 1px solid rgba(229, 115, 115, 0.4);
}

/* Recent + Upcoming side-by-side */
.games-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

/* Responsive — collapse hero to 2 columns then 1 */
@media (max-width: 1100px) {
    .team-hero-grid { grid-template-columns: 1fr 1fr; }
    .team-hero-block:nth-child(2) { border-right: none; }
    .team-hero-block { border-bottom: 1px solid var(--c-hairline); }
    .team-hero-block:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 700px) {
    .team-hero-grid { grid-template-columns: 1fr; }
    .team-hero-block { border-right: none; border-bottom: 1px solid var(--c-hairline); }
    .team-hero-block:last-child { border-bottom: none; }
    .games-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL TABLE THEME — every table on every page renders dark + cream.
   ═══════════════════════════════════════════════════════════════════════ */
table {
    background: transparent !important;
    color: var(--c-cream-soft) !important;
    border-collapse: collapse;
    width: 100%;
}
table thead th,
table th {
    background: rgba(0, 45, 114, 0.55) !important;
    color: var(--c-cream) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--c-hairline) !important;
    padding: 0.45rem 0.55rem !important;
}
table tbody tr {
    background: transparent !important;
    border-bottom: 1px solid var(--c-hairline-2) !important;
}
table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015) !important;
}
table tbody tr:hover {
    background: rgba(212, 175, 55, 0.06) !important;
}
table tbody td {
    background: transparent !important;
    color: var(--c-cream-soft) !important;
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
    padding: 0.4rem 0.55rem !important;
    font-size: 0.82rem;
    border: none !important;
}
table tbody td:first-child {
    font-family: var(--font-sans) !important;
    color: var(--c-cream) !important;
    font-weight: 500;
}
table tbody td a {
    color: var(--c-cream) !important;
    text-decoration: none;
}
table tbody td a:hover {
    color: var(--c-gold) !important;
}
table tbody td strong {
    color: var(--c-cream) !important;
}

/* Standings tables specifically — first-place star + division leader highlight */
.standings-table tbody tr:first-child td,
table tbody tr.division-leader td {
    color: var(--c-cream) !important;
}
.standings-table tbody tr:first-child td:first-child {
    color: var(--c-gold) !important;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   LEGACY LIGHT-THEME OVERRIDES — components in style.css that hard-code
   dark text on light backgrounds must be flipped for our dark surface.
   ═══════════════════════════════════════════════════════════════════════ */

/* Pitcher vs-roster + last-5-starts stat grids — values were 0.66rem #1a1a1a
   (basically black) on a faint-navy background. Invisible on mobile dark. */
.matchup-stats-grid.compact5 .stat-label {
    font-size: 0.62rem !important;
    color: var(--c-cream-dim) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
}
.matchup-stats-grid.compact5 .stat-val {
    font-size: 1.05rem !important;
    color: var(--c-cream) !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
}
/* Inner stat panels (VS ROSTER, LAST 5 STARTS) — elevate over their parent
   pitcher card with --surface-2 + brighter border, and tag the panel type
   with a strong colored top accent so the eye can distinguish "matchup
   history" panels (gold) from "recent form" panels (cyan).
   The label gets a colored background chip so the accent reads at a glance. */
.pitcher-deep-stats .vs-roster-section,
.pitcher-deep-stats .recent-starts-section {
    background: var(--surface-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-top: 3px solid transparent !important;
    border-radius: 6px !important;
    overflow: hidden;
    position: relative;
}

/* Both panels: solid elevated surface (no faded color wash), unified header
   bar in clean cream — differentiated only by a thin top-accent line so the
   gold/cyan still tags the panel type without the loud clashing headers. */
.pitcher-deep-stats .vs-roster-section {
    border-top-color: var(--c-gold) !important;
    background: var(--surface-2) !important;
}
.pitcher-deep-stats .recent-starts-section {
    border-top-color: rgb(79, 193, 255) !important;
    background: var(--surface-2) !important;
}
.pitcher-deep-stats .vs-roster-section .vs-roster-label,
.pitcher-deep-stats .recent-starts-section .vs-roster-label {
    display: block !important;
    color: var(--c-cream) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--c-hairline) !important;
    font-family: var(--font-sans) !important;
    font-weight: 700 !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 0.6rem !important;
    margin: -0.5rem -0.5rem 0.5rem -0.5rem !important;
}

/* Linescore — wrap had navy borders + body cells inherited cream text */
.linescore-wrap {
    border-top: 1px solid var(--c-hairline) !important;
    border-bottom: 1px solid var(--c-hairline) !important;
    background: transparent !important;
}
.linescore {
    color: var(--c-cream-soft) !important;
}
.linescore th { color: var(--c-cream-dim) !important; }
.linescore td, .linescore th { background: transparent !important; }
.linescore .ls-team { color: var(--c-cream) !important; }
.linescore .ls-tot { color: var(--c-cream) !important; }
.linescore .ls-sep { border-left: 1px solid var(--c-hairline) !important; }

/* Hot Hitters table — Recent column was rendering as dark-on-dark */
.matchup-card .data-table.compact td,
.matchup-card table.compact td {
    color: var(--c-cream-soft) !important;
    background: transparent !important;
}
.matchup-card .data-table.compact td strong,
.matchup-card table.compact td strong {
    color: var(--c-cream) !important;
}
.matchup-card .data-table.compact thead th,
.matchup-card table.compact thead th {
    background: rgba(0, 45, 114, 0.45) !important;
    color: var(--c-cream) !important;
    border-bottom: 1px solid var(--c-hairline) !important;
}

/* ── Hot Hitters — match the STARS ALIGN editorial sizing/positioning ──
   Gold underlined section label, transparent lighter column heads, airier
   dotted rows, and a roomier name column so names stop wrapping to 3 lines. */
.hh-head { margin-bottom: 0.5rem; }
.hh-label {
    font-family: var(--font-sans) !important;
    color: var(--c-gold) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    position: relative;
    display: inline-block;
    padding-bottom: 0.35rem;
}
.hh-label::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 40px; height: 2px;
    background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-soft) 100%);
}
.hh-sub {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-sans) !important;
    color: var(--c-cream-dim) !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.02em;
    font-weight: 400;
    line-height: 1.4;
}
.hh-sub strong { color: var(--c-cream-soft) !important; font-weight: 700; }

.matchup-card .data-table.compact.hh-table thead th {
    background: transparent !important;
    color: var(--c-cream-dim) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase;
    padding: 0.3rem 0.34rem !important;
    border-bottom: 1px solid var(--c-hairline) !important;
    white-space: nowrap;
}
.matchup-card .data-table.compact.hh-table tbody td {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--c-cream) !important;               /* brighter — was hard to read at cream-soft */
    font-size: 0.74rem !important;
    padding: 0.3rem 0.34rem !important;
    border-bottom: 1px dotted var(--c-hairline-2) !important;
    white-space: nowrap;
    vertical-align: middle;
}
/* lift the faded/muted cells (Season, non-tonight vs L/R) out of the dim grey */
.matchup-card .data-table.compact.hh-table tbody td.muted,
.matchup-card .data-table.compact.hh-table tbody td .muted {
    color: var(--c-cream-soft) !important;
}
/* name column: sans, a touch larger, and the only cell allowed to wrap */
.matchup-card .data-table.compact.hh-table tbody td:first-child {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-size: 0.76rem !important;
    white-space: normal;
    line-height: 1.25;
    width: 34%;
    padding-right: 0.5rem !important;
}
.matchup-card .data-table.compact.hh-table tbody td:first-child .hot-hitter-clk { font-weight: 600; }

/* Generic <td> safety net inside dashboard sections — never let a cream
   background slip through, never let near-black text get rendered */
.dashboard-section td,
.matchup-card td {
    background: transparent !important;
}
.dashboard-section td:not(.lbl):not(.num),
.matchup-card td {
    color: var(--c-cream-soft) !important;
}

/* Pitch arsenal chips — increase contrast */
.pitch-chip { background: rgba(8, 18, 26, 0.5) !important; }

/* Pitcher hand badge — was navy-on-light */
.pitcher-hand {
    background: rgba(8, 18, 26, 0.5) !important;
}

/* Bullpen workload pill colors — keep readable on dark */
.trust-high { color: var(--c-pos) !important; }
.trust-medium, .trust-med { color: var(--c-watch) !important; }
.trust-low { color: var(--c-neg) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — keep the editorial vibe but stack/shrink things
   so phones aren't a smashed-together mess.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
    /* Tighter outer padding */
    main {
        padding: 0.85rem 0.6rem 4rem !important;
    }

    /* Top picks grid → single column on phones */
    .top-picks-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }
    .top-picks-card {
        padding: 0.75rem 0.9rem !important;
    }

    /* Section headings shrink */
    .dashboard-section h2 {
        font-size: 1.3rem !important;
        line-height: 1.15;
    }
    .dashboard-section h3 {
        font-size: 1.1rem !important;
    }

    /* Matchup card — convert the 3-column header to a stacked layout */
    .matchup-card {
        padding: 0.7rem 0.7rem 0.85rem !important;
        margin-bottom: 0.8rem !important;
    }
    .matchup-3col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "away  home"
            "center center" !important;
        gap: 0.55rem !important;
    }
    .matchup-col-away { grid-area: away; }
    .matchup-col-home { grid-area: home; }
    .matchup-col-center {
        grid-area: center;
        text-align: center !important;
        border-top: 1px solid var(--c-hairline);
        padding-top: 0.55rem !important;
        margin-top: 0.2rem;
    }

    /* Smaller team names and scores so they fit */
    .matchup-col-away .team-away,
    .matchup-col-home .team-home {
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        flex-wrap: wrap !important;
    }
    .team-final-score {
        font-size: 2.2rem !important;
    }

    /* L10 chip with dots — make sure it fits on a row */
    .team-record-with-dots {
        flex-wrap: wrap;
        gap: 0.35rem !important;
        padding: 0.15rem 0.4rem !important;
    }
    .wl-dots { transform: scale(0.85); transform-origin: left center; }

    /* Team box-line — wrap if cramped */
    .team-box-line {
        gap: 0.55rem !important;
        font-size: 0.72rem !important;
    }

    /* Center column inside matchup — h2h bars centered */
    .matchup-col-center .center-stat { justify-content: center; }
    .h2h-bar { margin: 0.1rem auto 0.35rem !important; max-width: 200px; }

    /* Pitcher cards stack vertically on mobile */
    .pitcher-matchup-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }
    .pitcher-card { padding: 0.7rem 0.85rem !important; }
    .pitcher-name-row { font-size: 1.1rem !important; }
    .pitcher-season-line {
        gap: 0.55rem !important;
        font-size: 0.78rem !important;
    }
    .pitcher-season-line span strong { font-size: 1.2rem !important; }

    /* vs Roster / Last 5 Starts side-by-side → stack */
    .pitcher-deep-stats {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    /* Stars Align panels stack */
    .stars-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }
    .stars-col-spacer { display: none !important; }
    .star-entry {
        font-size: 0.78rem !important;
        line-height: 1.35;
    }
    .star-signals {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        margin-top: 0.15rem !important;
    }

    /* ═════════════════════════════════════════════════════════════════
       RESPONSIVE TABLES → STACKED CARDS on mobile.
       Each row collapses into a labeled column. The data-label attr is
       injected by JS (see base.html) by reading thead column titles.
       No horizontal scroll, ever — pure vertical flow.
       ═════════════════════════════════════════════════════════════════ */
    table {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
    }
    table thead {
        display: none !important;       /* headers shown inline per cell */
    }
    table tbody {
        display: block !important;
        width: 100% !important;
    }
    table tbody tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.6rem !important;
        padding: 0.55rem 0.7rem !important;
        background: rgba(8, 18, 26, 0.45) !important;
        border: 1px solid var(--c-hairline) !important;
        border-radius: 5px !important;
    }
    table tbody tr:nth-child(even),
    table tbody tr:hover {
        background: rgba(8, 18, 26, 0.55) !important;
    }
    table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
        gap: 0.6rem !important;
        padding: 0.22rem 0 !important;
        border: none !important;
        border-bottom: 1px dotted var(--c-hairline-2) !important;
        font-size: 0.85rem !important;
        text-align: right !important;
        min-height: 1.5rem;
    }
    table tbody td:last-child {
        border-bottom: none !important;
    }
    table tbody td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--c-cream-dim);
        font-family: var(--font-sans);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-align: left;
        min-width: 4rem;
    }
    table tbody td:first-child {
        font-family: var(--font-display) !important;
        color: var(--c-cream) !important;
        font-size: 0.95rem !important;
        font-weight: 600;
        border-bottom: 1px solid var(--c-hairline) !important;
        padding-bottom: 0.4rem !important;
        margin-bottom: 0.25rem !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    table tbody td:first-child::before {
        display: none;     /* hide "#" or "Player" label on the title cell */
    }
    /* Strong values (AVG, hits) pop in cream */
    table tbody td strong {
        color: var(--c-cream) !important;
        font-weight: 600 !important;
    }
    /* Linescore is the ONE table that stays tabular — readable as-is */
    .linescore {
        display: table !important;
        width: 100% !important;
    }
    .linescore thead { display: table-header-group !important; }
    .linescore tbody { display: table-row-group !important; }
    .linescore tr { display: table-row !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; }
    .linescore th, .linescore td {
        display: table-cell !important;
        padding: 0.18rem 0.3rem !important;
        font-size: 0.7rem !important;
        text-align: center !important;
        border: none !important;
    }
    .linescore td::before { display: none !important; }
    .linescore th { background: transparent !important; color: var(--c-cream-dim) !important; }

    /* Linescore stays full width but shrinks */
    .linescore { font-size: 0.78rem !important; }
    .linescore-wrap { margin: 0.4rem 0 0 !important; padding: 0.3rem 0 !important; }
    .linescore th { font-size: 0.6rem !important; padding: 0.15rem 0.25rem !important; }
    .linescore td { padding: 0.18rem 0.3rem !important; }

    /* Stat grid inside pitcher cards — shrink labels, keep values bright */
    .matchup-stats-grid.compact5 {
        gap: 0.15rem !important;
    }
    .matchup-stats-grid.compact5 .stat-label {
        font-size: 0.56rem !important;
    }
    .matchup-stats-grid.compact5 .stat-val {
        font-size: 0.85rem !important;
    }
    .pitcher-deep-stats .vs-roster-section,
    .pitcher-deep-stats .recent-starts-section {
        padding: 0.45rem 0.55rem !important;
    }

    /* Hot Hitters & general data tables — readable on mobile */
    .data-table.compact thead th,
    .data-table.compact tbody td {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.78rem !important;
    }

    /* Team-hero strip stacks fully */
    .team-hero-grid {
        grid-template-columns: 1fr !important;
    }
    .team-hero-block {
        border-right: none !important;
        border-bottom: 1px solid var(--c-hairline);
        padding: 0.85rem 0.9rem !important;
    }
    .team-hero-block:last-child { border-bottom: none !important; }
    .th-name { font-size: 1.5rem !important; }
    .th-record-num { font-size: 2.1rem !important; }

    /* Browse-by-team chip grid — 2 columns on phone */
    .team-link-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.45rem !important;
    }
    a.team-link-chip {
        padding: 0.55rem 0.7rem !important;
        font-size: 0.82rem !important;
    }

    /* Window selector buttons (PA window) wrap */
    .hot-section-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .window-selector { flex-wrap: wrap; }

    /* Recent + Upcoming games stack */
    .games-grid { grid-template-columns: 1fr !important; }

    /* Live-score pill — move to top so it doesn't overlap content */
    #live-score-status {
        position: fixed !important;
        bottom: auto !important;
        top: 4px !important;
        right: 4px !important;
        font-size: 0.62rem !important;
        padding: 0.15rem 0.4rem !important;
        z-index: 90 !important;
    }

    /* Tighten section gaps */
    .dashboard-section { margin-bottom: 0.85rem !important; padding: 0.85rem 0.9rem !important; }

    /* Site header smaller */
    .site-header { padding: 0.55rem 0.85rem !important; }
    .site-header h1 { font-size: 1.05rem !important; letter-spacing: 0.5px !important; }
    .site-header nav { gap: 0.15rem !important; flex-wrap: wrap !important; }
    .site-header nav a { padding: 0.25rem 0.5rem !important; font-size: 0.72rem !important; }

    /* Today's matchup heading */
    h2 .muted { display: block; font-size: 0.7em !important; }

    /* "Most Likely" banners: tighten the landing so games sit higher up.
       The 2-up grids are set in style.css; here we just trim the chrome. */
    .likely-banners { margin: 8px 0 10px !important; gap: 7px !important; }
    .likely-banner { padding: 6px 8px 7px !important; }
    .lb-head { margin-bottom: 4px !important; }
    .lb-note { width: 100%; }                         /* note drops below title, no awkward wrap */
    .lb-chip { padding: 5px 7px !important; gap: 6px !important; }
    .lb-pct { font-size: 1.05rem !important; }
    .lb-main { font-size: 0.78rem !important; }
    .lb-hit-row { padding: 4px 7px !important; }
    /* Compact the signal chips so they pack 2-per-line in a 2-up column
       instead of stacking one chip per line and re-bloating each row. */
    .lhr-sigs { gap: 3px !important; }
    .lhr-sig { font-size: 0.62rem !important; padding: 0 4px !important; }
    .lhr-l { font-size: 0.54rem !important; margin-right: 1px !important; }
    .lhr-name { font-size: 0.76rem !important; }
}

@media (max-width: 460px) {
    /* Phones: KEEP the 2-up scoreboard (away | home side by side) from the
       820px block — collapsing to a single column made this header a whole
       screen tall just to show the score. Center info spans full width below. */
    .matchup-3col {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "away  home"
            "center center" !important;
        gap: 0.35rem 0.5rem !important;
    }
    .matchup-col-away, .matchup-col-home { text-align: center !important; }
    .matchup-col-away .team-away,
    .matchup-col-home .team-home {
        justify-content: center !important;
        font-size: 0.98rem !important;
    }
    .team-scoreline, .team-box-line, .model-pick-badge { justify-content: center !important; }
    .team-final-score { font-size: 2rem !important; line-height: 1 !important; }

    /* Compact the center strip (was a tall vertical stack of big text):
       drop the decorative h2h bars and shrink the time/venue/weather/status.
       All the info stays — just dense. */
    /* center info becomes a compact, centered, wrapped strip (not a tall
       vertical stack). h2h numbers + time + venue + weather + status flow
       in a row and wrap. */
    .matchup-col-center {
        flex-flow: row wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.18rem 0.5rem !important;
        padding: 0.4rem 0.4rem 0.25rem !important;
        margin-top: 0.1rem !important;
    }
    .matchup-col-center .h2h-bar { display: none !important; }
    /* drop the redundant "VS. MATCHUPS" mini-label (the only center-stat with
       an inline opacity style) — the h2h numbers are self-explanatory. */
    .matchup-col-center .center-stat[style*="opacity"] { display: none !important; }
    .matchup-col-center .game-time-badge {
        font-size: 0.85rem !important;
        padding: 0.12rem 0.45rem !important;
        margin-top: 0.1rem !important;
    }
    .matchup-col-center .center-venue,
    .matchup-col-center .center-weather { font-size: 0.66rem !important; }
    .matchup-col-center .center-status .game-status { font-size: 0.72rem !important; }
    .matchup-col-center .cs-label { font-size: 0.58rem !important; }
    .matchup-col-center .cs-val { font-size: 0.8rem !important; }

    .team-link-grid { grid-template-columns: 1fr !important; }
    .th-record-num { font-size: 1.85rem !important; }
}

/* ───────────────────────────────────────────────────────────────────────
   LIVE SCORE INDICATOR (bottom-right) — terminal style
   ─────────────────────────────────────────────────────────────────────── */
#live-score-status {
    font-family: var(--font-mono) !important;
    font-size: 0.7rem !important;
    color: var(--c-cream-dim) !important;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.25rem 0.55rem;
    border-radius: 2px;
    border: 1px solid var(--c-hairline);
    backdrop-filter: blur(4px);
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE: EVERY TABLE BECOMES A STACK OF LABEL/VALUE CARDS.
   No horizontal scroll, ever. The base.html boot script tags every <td>
   with data-label="<column header>", and these rules use ::before to put
   the label next to the value. Linescore opts out with class="linescore".
   This block lives at the END of the LAST stylesheet so it always wins
   the cascade against earlier !important table rules.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    table:not(.linescore),
    .data-table:not(.linescore),
    .workload-table:not(.linescore) {
        display: block !important;
        width: 100% !important;
        border: none !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }

    /* visually hide thead — labels come from data-label */
    table:not(.linescore) thead,
    .data-table:not(.linescore) thead,
    .workload-table:not(.linescore) thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    table:not(.linescore) tbody,
    .data-table:not(.linescore) tbody,
    .workload-table:not(.linescore) tbody {
        display: block !important;
        width: 100% !important;
    }

    /* each row → one card */
    table:not(.linescore) tbody tr,
    .data-table:not(.linescore) tbody tr,
    .workload-table:not(.linescore) tbody tr {
        display: block !important;
        width: 100% !important;
        margin: 0 0 0.65rem 0 !important;
        padding: 0.55rem 0.7rem !important;
        background: var(--surface-2) !important;
        border: 1px solid var(--c-hairline) !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
    }
    table:not(.linescore) tbody tr:nth-child(even),
    table:not(.linescore) tbody tr:hover {
        background: var(--surface-2) !important;
    }

    /* each cell → a label/value flex row */
    table:not(.linescore) tbody td,
    .data-table:not(.linescore) tbody td,
    .workload-table:not(.linescore) tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 0.85rem !important;
        width: 100% !important;
        padding: 0.32rem 0 !important;
        border: none !important;
        border-bottom: 1px dashed var(--c-hairline-2) !important;
        text-align: right !important;
        font-size: 0.92rem !important;
        font-family: var(--font-mono) !important;
        color: var(--c-cream) !important;
        min-height: 1.7rem !important;
        background: transparent !important;
    }
    table:not(.linescore) tbody td:first-child {
        font-family: var(--font-sans) !important;
        font-weight: 600 !important;
    }
    table:not(.linescore) tbody td:last-child {
        border-bottom: none !important;
    }

    /* the column header, pulled from data-label */
    table:not(.linescore) tbody td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        text-align: left;
        font-family: var(--font-sans) !important;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--c-cream-dim);
    }
    table:not(.linescore) tbody td:not([data-label])::before,
    table:not(.linescore) tbody td[data-label=""]::before {
        content: none;
    }

    /* Linescore stays tabular — only place horizontal scroll is OK */
    table.linescore {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        font-size: 0.82rem !important;
    }

    /* No element on the page should overflow the viewport horizontally */
    html, body {
        overflow-x: hidden !important;
    }
    main, section, .dashboard-section, .matchup-card, .card,
    .metric-card, .highlight-box, .standings-card, .top-picks-card {
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE PITCHER-CARD COMPACTION  (inline stat cells + density)
   Last in source order, scoped <=768px, so it wins the cascade over the
   820px (~line 1629) and 768px (~line 1769) pitcher overrides and leaves
   desktop (>=821px) — side-by-side panels, large 1.05rem labels — untouched.

   Lever: .pitcher-deep-stats is ~65% of card height; its 4 stat grids each
   rendered as TWO lines (label STACKED over value). We flip each .stat-cell
   to ONE inline "LABEL value" line and lay each grid out as a content-sized
   flex strip — so a long pair (HARD% / WHIP / K/BB) WRAPS instead of being
   clipped by a fixed column. Plus chrome/density trims. ~554px -> ~320px.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* 0. SIDE BY SIDE: the two pitcher cards sit in 2 columns instead of
       stacking. Halves the vertical footprint so both starters fit on screen;
       each column is narrow, so the stat strips wrap to more lines (fine). */
    .pitcher-matchup-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem !important;
    }

    /* 1. INLINE, CONTENT-SIZED STAT CELLS — the structural win + clip fix.
       Each grid becomes a flex strip: pairs size to their content and pack
       from the left; if they don't all fit, the row WRAPS (never clips).
       Applies to all 4 grids (every grid carries .compact5). */
    .matchup-stats-grid.compact5 {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: baseline !important;
        column-gap: 0.5rem !important;
        row-gap: 0.12rem !important;
        margin-bottom: 0.25rem !important;
    }
    .matchup-stats-grid.compact5 .stat-cell {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        gap: 0.2rem !important;
        padding: 0.08rem 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    .matchup-stats-grid.compact5 .stat-cell .stat-label {
        font-size: 0.55rem !important;
        line-height: 1 !important;
        letter-spacing: 0.02em !important;
        color: var(--c-cream-soft) !important;   /* was --c-cream-dim — too faint on the panel */
    }
    .matchup-stats-grid.compact5 .stat-cell .stat-val {
        font-size: 0.74rem !important;   /* >= 0.72rem readable floor */
        line-height: 1 !important;
    }

    /* 2. Hide the secondary "statcast" rows on phones so the side-by-side cards
       breathe. The hidden metrics — vs-roster EV/LA/SLG/HARD%/HR and Last-5
       R9/K9/BB9/WHIP/KBB/PGS — remain on each game's "Full Matchup Detail"
       page. The primary rows stay: vs-roster PA/K%/BB%/AVG/OBP and Last-5
       ERA/R/IP/K/BB/HR. */
    .matchup-stats-grid.compact5.statcast-row { display: none !important; }

    /* 3. Slim the panel chrome (header bars + padding) — no data lost. */
    .pitcher-deep-stats { gap: 0.3rem !important; margin-top: 0.3rem !important; }
    .pitcher-deep-stats .vs-roster-section,
    .pitcher-deep-stats .recent-starts-section { padding: 0.3rem 0.4rem !important; }
    .pitcher-deep-stats .vs-roster-section .vs-roster-label,
    .pitcher-deep-stats .recent-starts-section .vs-roster-label {
        font-size: 0.54rem !important;
        padding: 0.16rem 0.4rem !important;
        margin: -0.3rem -0.4rem 0.24rem -0.4rem !important;
    }

    /* 4. Top-of-card density (narrow columns now, so trim a bit more). */
    .pitcher-card { padding: 0.5rem 0.5rem !important; }
    .pitcher-name-row {
        font-size: 0.88rem !important;
        gap: 0.3rem !important;
        padding-bottom: 0.22rem !important;
        margin-bottom: 0.28rem !important;
        flex-wrap: wrap !important;
    }
    .pitcher-record { margin-left: 0 !important; }
    .pitcher-season-line {
        gap: 0.25rem 0.4rem !important;
        padding-bottom: 0.28rem !important;
        margin-bottom: 0.28rem !important;
        line-height: 1.15 !important;
        font-size: 0.7rem !important;
    }
    /* ERA stays the anchor but smaller for the narrow column. */
    .pitcher-season-line span strong { font-size: 0.9rem !important; }
    /* Brighten the season-line secondary stats (IP/K/WHIP/K9/HR). */
    .pitcher-season-line span { color: var(--c-cream) !important; }
    .pitch-arsenal { gap: 0.2rem 0.22rem !important; margin-bottom: 0.28rem !important; }
    .pitch-chip { font-size: 0.56rem !important; padding: 0.03rem 0.28rem !important; }

    /* 5. CONTRAST FIX (dark mode only): the see-through panel renders lighter
       than expected on the phone, making text hard to read. Give the stat
       panels a SOLID dark background so contrast is guaranteed regardless of
       the gradient behind them. Light mode keeps its light panel (dark text). */
    @media (prefers-color-scheme: dark) {
        .pitcher-deep-stats .vs-roster-section,
        .pitcher-deep-stats .recent-starts-section {
            background: #14202d !important;          /* opaque dark slate */
        }
        .pitcher-deep-stats .vs-roster-section .vs-roster-label,
        .pitcher-deep-stats .recent-starts-section .vs-roster-label {
            background: rgba(255, 255, 255, 0.06) !important;
        }
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOT HITTERS on mobile — keep it a compact TABLE, not giant stacked cards.
   The global "table -> stacked label/value cards" transform (correct for the
   wide stat tables on other pages) blows this 7-col table up into full-screen
   cards. Here we opt the in-card Hot Hitters table back into a real table and
   stack the away/home tables vertically so each gets full width — matching the
   desktop compact look. CSS-only (template is server-cached), scoped <=768px
   and to .matchup-card so no other page's tables are affected.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Stack the away | home hitter tables vertically (full width each).
       :has() selects ONLY the flex row that directly wraps these tables. */
    .matchup-card div:has(> div > table.data-table.compact) {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Restore real table layout (undo the stacked-card + sr-only-thead rules). */
    .matchup-card table.data-table.compact {
        display: table !important;
        width: 100% !important;
        table-layout: auto !important;   /* columns size to content — no truncation */
        border-collapse: collapse !important;
        background: transparent !important;
        font-size: 0.64rem !important;
    }
    .matchup-card table.data-table.compact thead {
        display: table-header-group !important;
        position: static !important;
        width: auto !important; height: auto !important;
        clip: auto !important; overflow: visible !important;
        margin: 0 !important; padding: 0 !important;
    }
    .matchup-card table.data-table.compact tbody {
        display: table-row-group !important; width: auto !important;
    }
    .matchup-card table.data-table.compact tr {
        display: table-row !important;
        width: auto !important; margin: 0 !important; padding: 0 !important;
        background: transparent !important; border: none !important;
        border-radius: 0 !important; box-shadow: none !important;
    }
    .matchup-card table.data-table.compact th,
    .matchup-card table.data-table.compact td {
        display: table-cell !important;
        min-height: 0 !important;
        padding: 0.16rem 0.1rem !important;
        border: none !important;
        border-bottom: 1px solid var(--c-hairline) !important;
        text-align: right !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        font-size: 0.64rem !important;
        font-family: var(--font-mono) !important;
        color: var(--c-cream-soft) !important;
    }
    /* Header row: small uppercase tags (it was hidden/sr-only globally). */
    .matchup-card table.data-table.compact thead th {
        font-family: var(--font-sans) !important;
        font-size: 0.52rem !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
        color: var(--c-cream-dim) !important;
        font-weight: 700 !important;
        padding: 0.1rem 0.14rem !important;
    }
    /* Batter-name column: left aligned, wider, bright, ellipsis if long. */
    .matchup-card table.data-table.compact th:first-child,
    .matchup-card table.data-table.compact td:first-child {
        text-align: left !important;
        max-width: 38vw !important;       /* cap long names; numbers keep their space */
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-family: var(--font-display) !important;
        color: var(--c-cream) !important;
        font-weight: 600 !important;
    }
    .matchup-card table.data-table.compact td:first-child a { color: var(--c-cream) !important; }
    .matchup-card table.data-table.compact td strong { color: var(--c-cream) !important; }
    /* Kill the data-label ::before injected by the base.html boot script. */
    .matchup-card table.data-table.compact td::before,
    .matchup-card table.data-table.compact th::before { content: none !important; display: none !important; }
}

/* Sharp-vs-public money flag (Circa sharp $ fading the DraftKings public) — a
   signal to watch, intentionally understated, not a loud "bet this". */
.sharp-flag {
    font: 600 11px/1.45 ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: .02em;
    color: var(--c-cream, #e8e2d4);
    background: rgba(212, 160, 23, .10);
    border: 1px solid rgba(212, 160, 23, .34);
    border-radius: 4px;
    padding: 3px 9px;
    margin: 0 0 9px;
    display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
}
.sharp-flag .sf-tag { font-weight: 800; color: #d4a017; letter-spacing: .07em; }
.sharp-flag strong { color: #f0c64a; font-weight: 700; }
.sharp-flag .sf-vs { opacity: .6; font-weight: 500; }

/* "Biggest Sharp / Public Splits" header banner — gold accent to match the flag. */
.likely-banner.lb-sharp .lb-title { color: #e8c45a; }
.likely-banner.lb-sharp .lb-chip-sharp { border-color: rgba(212, 160, 23, .28); }
.likely-banner.lb-sharp .lb-chip-sharp:hover { border-color: rgba(212, 160, 23, .6); }
.lb-pct-sharp { color: #d4a017 !important; }

/* STARS ALIGN clickable stat chips + their detail popover. */
.star-signal.star-clk { cursor: pointer; }
.star-signal.star-clk:hover { background: rgba(212, 160, 23, .16); border-radius: 3px; }
.stat-pop {
    position: fixed;            /* viewport-anchored — never scrolls/moves the page */
    z-index: 9999; width: 262px; max-width: 88vw;
    background: #0f1a26; border: 1px solid rgba(212, 160, 23, .45);
    border-radius: 7px; box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
    font: 12px/1.45 ui-monospace, Menlo, monospace; color: var(--c-cream, #e8e2d4);
    overflow: hidden;
}
.stat-pop-h { display: flex; justify-content: space-between; align-items: center;
    background: rgba(212, 160, 23, .14); padding: 6px 9px; font-weight: 700; }
.stat-pop-t { color: #e8c45a; font-size: 11px; }
.stat-pop-x { cursor: pointer; opacity: .6; padding: 0 4px; font-size: 15px; }
.stat-pop-x:hover { opacity: 1; }
.stat-pop-sum { padding: 7px 9px; font-weight: 800; font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08); }
.stat-pop-rows { max-height: 232px; overflow-y: auto; }
.stat-pop-row { display: flex; gap: 8px; padding: 3px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .05); }
.stat-pop-row:nth-child(even) { background: rgba(255, 255, 255, .025); }
.spr-d { width: 62px; opacity: .6; }
.spr-o { flex: 1; font-weight: 700; }
.spr-e { opacity: .7; }
.stat-pop-load, .stat-pop-err { padding: 11px; opacity: .7; }

/* HOT HITTERS table — batter name opens the recent game-log popover (reuses the
   STARS ALIGN stat-pop machinery via the shared click handler). */
.hot-hitter-clk { cursor: pointer; text-decoration: underline dotted rgba(212, 160, 23, .55);
    text-underline-offset: 2px; transition: color .12s ease; }
.hot-hitter-clk:hover { color: #e8c45a; }
/* STARS ALIGN batter name — same recent-game popover; lighter treatment (bold
   name), underline only on hover so it doesn't fight the ★ row. */
.star-name-clk { cursor: pointer; transition: color .12s ease; }
.star-name-clk:hover { color: #e8c45a; text-decoration: underline dotted rgba(212, 160, 23, .6);
    text-underline-offset: 2px; }

/* ── Pick Results recap — win/loss marks unmistakably GREEN / RED ───────────
   The bare .positive-diff/.negative-diff rules already colour these, but this
   higher-specificity, bolder pass guarantees the ✓/✗ in the recap rows pop as
   green (win) / red (loss) and can't be washed out. (If marks still look plain
   white, it's a cached stylesheet — hard-refresh / purge the edge cache.) */
.results-row .rr-mark .positive-diff { color: var(--c-pos) !important; font-weight: 800; }
.results-row .rr-mark .negative-diff { color: var(--c-neg) !important; font-weight: 800; }