:root {
    --black: #050505;
    --ink: #111114;
    --navy: #0b1f3a;
    --navy-light: #1a3a5e;
    --red: #d7272d;
    --red-dark: #ad141b;
    /* The scoreboard's painted frame. Defined here rather than on .monster-board so the
       Play by play panel, which is its sibling, can match it exactly and butt onto it.
       5 and 4 divide cleanly, so the inner rules stay exactly a fifth thinner. */
    --board-frame: clamp(3.75px, 0.34vw, 5px);
    --board-white: rgba(233, 241, 228, 0.92);

    /* Green Monster wall (Fenway Park, Benjamin Moore SC-12) -- the app's primary identity color. */
    --green: #54796d;
    --green-dark: #3b584f;
    --green-deep: #202f2a;
    --green-light: #7ea296;
    /* The page sits on the wall itself, so white cards read as panels hung on it. */
    --background: #54796d;
    --card: #ffffff;
    --text: #172033;
    --muted: #667085;
    --border: #d8dee9;
    --border-light: #eaecf0;
    --away-color: #d7272d;
    --home-color: #111827;
}

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

/* Type scales with the viewport instead of sitting at one fixed size, so the page reads
   the same at 100% on a large display as it does zoomed in on a small one. The floor is
   the old fixed size, so nothing below roughly 1200px changes. */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background:
        radial-gradient(circle at 12% -8%, rgba(126,162,150,0.55), transparent 45%),
        radial-gradient(circle at 88% 2%, rgba(32,47,42,0.45), transparent 48%),
        var(--background);
    background-attachment: fixed;
    color: var(--text);
    font-size: clamp(15px, 0.25vw + 12px, 18px);
    line-height: 1.55;
}

/* ===== NAV ===== */
.topbar {
    background: linear-gradient(180deg, #0b1310, #060a08);
    color: white;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: clamp(64px, 3.6vw, 82px);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 18px rgba(0,0,0,0.34);
}

.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 17px;
    font-weight: 800;
    color: white;
    white-space: nowrap;
    text-decoration: none;
}

.topbar-brand:hover { text-decoration: none; }

/* Grows only on large viewports: the floor matches the old fixed size, so the
   narrow-width tagline and wrapping behaviour is unchanged. */
.brand-logo {
    width: clamp(126px, 7vw, 158px);
    height: clamp(34px, 1.9vw, 43px);
    object-fit: contain;
    display: block;
}

.brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.topbar-tagline {
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    margin-left: 6px;
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,0.18);
    white-space: nowrap;
}

.topbar-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.topbar-links a {
    color: rgba(255,255,255,0.68);
    text-decoration: none;
    font-size: clamp(13px, 0.16vw + 10.9px, 15px);
    font-weight: 650;
    padding: 9px clamp(16px, 1vw, 22px);
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.topbar-links a:hover {
    color: white;
    background: rgba(255,255,255,0.10);
    transform: translateY(-1px);
}

.topbar-links a:active {
    transform: translateY(0) scale(0.96);
}

.topbar-links a.active {
    color: white;
    background: var(--red);
    box-shadow: 0 3px 10px rgba(215,39,45,0.45);
}

.topbar-links a.active:hover {
    background: var(--red-dark);
    transform: none;
}

/* Mid-width: drop the tagline and tighten link padding before the nav pills
   run out of room and start wrapping into the brand row. */
@media (max-width: 1150px) {
    .topbar-tagline { display: none; }
    .topbar-links a { padding: 9px 11px; }
}

/* ===== PAGE LAYOUT ===== */
/* The column grows with the viewport rather than stopping dead at a fixed width, which
   is what made the page look like a narrow strip on a large monitor. The cap keeps line
   lengths readable instead of letting tables stretch edge to edge on an ultrawide. */
.page-content {
    width: min(1520px, calc(100% - 5vw));
    margin: clamp(20px, 2vw, 34px) auto;
}

/* ===== CARDS & PANELS ===== */
.hero-card, .panel, .player-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(16,24,40,0.05);
    margin-bottom: 20px;
}

.hero-card {
    padding: 28px 32px;
    border-top: 5px solid var(--red);
}


.hero-card h1 {
    font-size: clamp(26px, 0.75vw + 19.4px, 34px);
    color: var(--ink);
    margin: 6px 0 10px;
}

.game-detail-matchup {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
    align-items: center;
    gap: 18px;
    margin-top: 10px;
}

.game-detail-matchup h1 {
    margin: 0;
    text-align: center;
}

.game-detail-team {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 850;
    text-align: center;
}

.game-detail-logo {
    width: 86px;
    height: 86px;
    object-fit: contain;
}

.team-stats-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.team-stats-title h1 {
    margin: 0;
}

.team-stats-logo {
    width: 82px;
    height: 82px;
    object-fit: contain;
    flex: 0 0 auto;
}

.hero-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--red);
    text-transform: uppercase;
}

.hero-record {
    color: var(--muted);
    font-size: 14px;
    margin-top: 8px;
}

.hero-desc {
    color: var(--muted);
    max-width: 680px;
    margin-top: 8px;
}

.sep { margin: 0 8px; color: var(--border); }

.hero-actions { margin-top: 20px; display: flex; gap: 10px; }

/* ===== TODAY HERO ===== */
/* Zero side padding, on purpose, at every width: this black card should never show as
   a visible strip down the left or right edge. Its children (the header row, the green
   board, the white cards, the buttons) span its full width and touch its rounded
   corners directly; overflow:hidden clips them cleanly into that curve. None of those
   children carry their own compensating side padding, or the black would just show
   through a layer further in. Only the top and bottom padding remain, which is the
   black that's meant to stay visible. */
.today-hero {
    --hero-radius: 18px;
    color: white;
    background:
        linear-gradient(135deg, rgba(8,14,12,0.98), rgba(30,45,40,0.97) 48%, rgba(84,121,109,0.94));
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--hero-radius);
    /* No bottom padding: the action buttons finish the card, sitting flush on its
       bottom edge with their outer corners following its curve. */
    padding: 30px 0 0;
    margin-bottom: 22px;
    box-shadow: 0 22px 60px rgba(16,24,40,0.24);
    overflow: hidden;
}

.today-hero-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 2.4vw, 28px);
    padding: 0 clamp(20px, 3.2vw, 42px);
    margin-bottom: 18px;
}

.hero-status-group {
    display: contents;
}

.today-hero h1 {
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.02;
    letter-spacing: 0;
    margin-top: 4px;
    max-width: 880px;
}

.today-hero .hero-label { color: rgba(255,255,255,0.68); }

.live-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    border: 2px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.live-pill.is-live {
    color: white;
    background: var(--red);
    border-color: rgba(255,255,255,0.28);
}

.live-pill.is-delay {
    color: white;
    background: #b91c1c;
    border-color: rgba(255,255,255,0.34);
    box-shadow: 0 0 24px rgba(185,28,28,0.52);
}

/* Finished games keep the same grey oval, bordered green for a win and red for a loss. */
.live-pill.is-win,
.live-pill.is-loss {
    color: white;
    background: #6b7280;
    border-width: 3px;
}

.live-pill.is-win { border-color: #22c55e; }
.live-pill.is-loss { border-color: #ef4444; }

.matchup-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.36fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
    border: 3px solid rgba(219, 231, 210, 0.75);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

.matchup-side {
    min-width: 0;
    position: relative;
}

.matchup-side.home {
    text-align: right;
}

.featured-team-logo {
    width: 86px;
    height: 86px;
    object-fit: contain;
    display: block;
    padding: 17px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.5);
    position: relative;
    z-index: 2;
}

/* Wraps the featured-matchup logo so the halo/horns can be positioned around it. */
.logo-crown {
    position: relative;
    display: inline-block;
    margin-top: 20px;
    isolation: isolate;
}

.matchup-side.home .logo-crown {
    margin-left: auto;
}

.crown-icon {
    position: absolute;
    z-index: 0;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 152%;
    pointer-events: none;
}

.halo-icon {
    top: -23px;
    width: 122%;
    z-index: 3;
    transform: translateX(-50%) rotate(-2deg);
    filter: drop-shadow(0 2px 8px rgba(255,215,0,0.55));
}

.horns-icon {
    top: -6px;
    width: 86%;
    z-index: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.matchup-side-label,
.score-label, .panel-kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.58);
}

.matchup-side-name {
    color: white;
    font-size: clamp(24px, 4vw, 44px);
    font-weight: 900;
    line-height: 1;
    margin-top: 7px;
    overflow-wrap: anywhere;
}

.matchup-side-record {
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    font-weight: 750;
    margin-top: 7px;
}

.matchup-side-score,
.center-score {
    color: white;
    font-size: clamp(30px, 5vw, 58px);
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

.matchup-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: rgba(255,255,255,0.76);
}

.matchup-at-symbol {
    color: white;
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 950;
    line-height: 1;
}

.matchup-meta {
    max-width: 140px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
}

.score-value {
    font-size: 22px;
    font-weight: 850;
    color: white;
}

.score-value.small {
    font-size: 15px;
    line-height: 1.25;
}

.hero-intel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 14px;
    margin-top: 14px;
    min-width: 0;
}

.hero-intel-grid > * { min-width: 0; }

.probability-panel, .park-intel-panel {
    background: rgba(255,255,255,0.92);
    color: var(--text);
    border-radius: 14px;
    padding: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.probability-panel .panel-kicker,
.park-intel-panel .panel-kicker { color: var(--muted); }

.probability-panel .win-prob-bar-wrap { margin: 14px 0 0; }
.probability-panel .win-prob-bar { min-width: 0; }
.probability-panel .win-prob-label {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.probability-panel .home-label { justify-content: flex-end; }

.probability-explanation {
    margin: 15px 0 0;
    color: #354054;
    font-size: 14px;
    line-height: 1.55;
}

.probability-details {
    margin-top: 16px;
    padding-top: 11px;
    border-top: 1px solid rgba(16, 31, 48, 0.12);
}

.probability-details > summary,
.probability-category > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.probability-details > summary::-webkit-details-marker,
.probability-category > summary::-webkit-details-marker { display: none; }

.probability-details > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.probability-details > summary::before {
    content: '+';
    width: 14px;
    color: var(--red);
    font-size: 14px;
    line-height: 1;
    text-align: center;
}

.probability-details[open] > summary::before { content: '−'; }
.probability-details > summary:hover { color: var(--navy); }

.probability-detail-body {
    margin-top: 12px;
    padding-top: 13px;
    border-top: 1px solid rgba(16, 31, 48, 0.08);
}

.probability-detail-intro,
.probability-disclaimer {
    margin: 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.55;
}

.probability-category-list { margin-top: 12px; }

.probability-category {
    border-top: 1px solid rgba(16, 31, 48, 0.09);
}

.probability-category:last-child { border-bottom: 1px solid rgba(16, 31, 48, 0.09); }

.probability-category > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 8px 0;
}

.probability-category-name {
    color: var(--navy);
    font-size: 12.5px;
    font-weight: 800;
}

.probability-category-meta {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 650;
    text-align: right;
}

.probability-category.is-unavailable .probability-category-name,
.probability-category.is-unavailable .probability-category-meta { color: #9298a2; }

.probability-category-body {
    padding: 0 0 13px;
    color: #465064;
    font-size: 12px;
    line-height: 1.55;
}

.probability-category-body > p { margin: 0; }

.probability-category-comparison {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 9px;
}

.probability-category-comparison span {
    padding: 7px 9px;
    border-radius: 6px;
    background: rgba(16, 31, 48, 0.055);
    color: var(--navy);
    font-size: 11px;
    font-weight: 750;
}

.probability-supporting {
    list-style: none;
    margin: 9px 0 0;
    padding: 0;
}

.probability-supporting li {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 3px 10px;
    padding: 5px 0;
    border-top: 1px solid rgba(16, 31, 48, 0.06);
}

.probability-stat-label { color: #596377; }
.probability-supporting strong { color: var(--navy); font-size: 11.5px; }
.probability-stat-source {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    color: #8a92a0;
    font-size: 9.5px;
}

.probability-data-note { margin-top: 12px; }
.probability-disclaimer { margin-top: 12px; font-style: italic; }
.park-name { font-size: 22px; font-weight: 850; color: var(--navy); margin-top: 2px; }
.park-factors-quick.compact { gap: 8px; margin-bottom: 0; }
.park-factors-quick.compact .pf-block { min-width: 58px; padding: 9px 10px; }

.model-summary {
    color: var(--muted);
    font-size: 12px;
    margin-top: 10px;
}

.insight-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* These read as small cards, not pills, so they take the same 8px corner the buttons
   and panels use rather than a fully rounded capsule. Padding and type are matched to
   the buttons too, so a row of insights and a row of actions sit on the same rhythm. */
.insight-row span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 7px 14px;
    color: rgba(255,255,255,0.90);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.35;
}

/* Marks the win probability panel as showing MLB's live per-play numbers rather than
   the pre-game model. */
.win-prob-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--red);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* A class-level display beats the UA stylesheet's [hidden] rule, which would otherwise
   leave this badge showing "Live" over a scheduled game. */
.win-prob-live-tag[hidden] { display: none; }

.win-prob-live-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    animation: gamecast-pulse 1.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .win-prob-live-tag::before { animation: none; }
}

/* ===== GREEN MONSTER SCOREBOARD ===== */
/* Framed like the wall itself: a heavy painted border, square corners, and rules that
   run the full width of the panel rather than stopping inside the padding.
   --board-pad doubles as the gap above and below every rule, which is the same gap the
   header row leaves between the top of the board and the AMERICAN title. */
.monster-board {
    --board-pad: clamp(10px, 1.3vw, 16px);
    /* --board-frame and --board-white come from :root so the Play by play panel can
       match this frame exactly. */
    --board-rule: calc(var(--board-frame) * 0.8);
    /* Matches the gap the header row leaves between the frame and the AMERICAN title. */
    --board-gap: calc(var(--board-pad) + 6px);

    margin-top: 14px;
    padding: var(--board-pad);
    border: var(--board-frame) solid var(--board-white);
    border-radius: 3px;
    background:
        linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
    box-shadow: 0 14px 36px rgba(0,0,0,0.20);
    overflow-x: auto;
}

/* A rule that reaches both painted edges: pulled out by the padding, then given it
   back so its own contents stay in line with everything else. */
.monster-board .board-rule,
.monster-board > .board-matchup,
.monster-board > .monster-status,
.monster-board > .count-board {
    border-top: var(--board-rule) solid var(--board-white);
    margin-left: calc(-1 * var(--board-pad));
    margin-right: calc(-1 * var(--board-pad));
    padding-left: var(--board-pad);
    padding-right: var(--board-pad);
}

.monster-title {
    color: rgba(255,255,255,0.86);
    font-size: clamp(14px, 2.1vw, 20px);
    font-weight: 900;
    letter-spacing: 0.48em;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 8px;
}

/* --innings is set inline per board so extra-inning games get extra columns
   instead of overflowing the template and wrapping the whole grid. */
.monster-grid {
    display: grid;
    grid-template-columns: minmax(24px, .32fr) minmax(64px, 1.2fr) repeat(var(--innings, 10), minmax(17px, .48fr)) repeat(3, minmax(21px, .36fr));
    grid-auto-rows: clamp(20px, 3vw, 30px);
    gap: clamp(2px, .35vw, 3px);
    align-items: stretch;
    min-width: max-content;
}

.monster-cell {
    min-height: clamp(20px, 3vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.90);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: clamp(11px, 1.65vw, 17px);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0,0,0,0.45);
}

.monster-label,
.inning-num {
    color: rgba(255,255,255,0.72);
    font-size: clamp(10px, 1.35vw, 14px);
}

/* Numbers sit on plates recessed into the wall, so the wall face reads as the nearer
   surface: a hard shadow inside the top and left edges is the lip of the opening casting
   into the slot, and the bright hairline below it is that lip catching the light. */
.pitcher-slot,
.run-cell,
.total-cell {
    background: linear-gradient(180deg, rgba(9,18,15,0.66) 0%, rgba(20,34,30,0.50) 100%);
    border: none;
    border-radius: 2px;
    box-shadow:
        inset 0 3px 4px rgba(0,0,0,0.60),
        inset 3px 0 4px rgba(0,0,0,0.36),
        inset 0 -1px 0 rgba(255,255,255,0.11),
        inset -1px 0 0 rgba(255,255,255,0.07),
        0 1px 0 rgba(255,255,255,0.14);
    text-shadow: 0 2px 3px rgba(0,0,0,0.75);
}

/* Scoped to the board: the Matchup Center uses a bare .team-name for its club
   headings, and this slot styling was leaking onto it as a pale bar. */
.monster-cell.team-name,
.team-head {
    justify-content: flex-start;
    padding-left: clamp(4px, .75vw, 8px);
    background: rgba(255,255,255,0.10);
    letter-spacing: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.team-head {
    color: rgba(255,255,255,0.82);
    font-size: clamp(12px, 1.55vw, 16px);
    background: transparent;
    border: none;
}

.monster-cell.team-name.boston {
    color: white;
    font-size: clamp(12px, 1.8vw, 18px);
}

/* Only the frame in progress is lit, and only the digit itself: the slot keeps its
   recessed shading so the glow reads as a bulb behind the number, not a colored tile. */
.run-cell.lit {
    color: #f7c948;
    text-shadow:
        0 0 9px rgba(247,201,72,0.60),
        0 0 2px rgba(247,201,72,0.85),
        0 2px 3px rgba(0,0,0,0.75);
}

/* Batter left, frame centred, pitcher right. The outer columns are equal width so the
   frame sits dead centre regardless of how long the two names are. */
.monster-status {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(10px, 1.4vw, 24px);
    margin-top: var(--board-gap);
    padding-top: var(--board-gap);
}

.monster-status .status-mid { justify-content: center; }
.monster-status .status-right { justify-content: flex-end; }

.monster-status > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.monster-status > div span {
    color: rgba(255,255,255,0.72);
    font-size: clamp(10px, 1.3vw, 13px);
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.monster-status strong {
    color: white;
    min-width: 22px;
    font-size: clamp(11px, 1.55vw, 16px);
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* ===== COUNT PANEL: BALL / STRIKE / OUT LAMPS ===== */
/* Real boards use lamps, not digits. An unlit lamp is still a physical bulb sunk into
   the wall, so it keeps a dark body and a rim shadow; lighting one adds the colour and
   the bloom it throws onto the paint around it. */
/* Its own row across the bottom of the board, centred. */
.count-board {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    align-items: start;
    gap: clamp(18px, 3vw, 52px);
    margin-top: var(--board-gap);
    padding-top: var(--board-gap);
    padding-bottom: 4px;
}

.count-group {
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: clamp(78px, 9vw, 128px);
}

.count-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: clamp(13px, 1.35vw, 21px);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    /* The painted lettering catches the same light the lamps throw. */
    text-shadow: 0 0 10px rgba(255,255,255,0.35), 0 2px 3px rgba(0,0,0,0.7);
}

/* The flanking rules are painted on the wall, not lit, so they read black. */
.count-label::before,
.count-label::after {
    content: '';
    width: clamp(9px, 1.1vw, 18px);
    height: 3px;
    border-radius: 2px;
    background: #05100c;
    box-shadow: 0 1px 0 rgba(255,255,255,0.10);
}

.count-lamps { display: flex; gap: clamp(6px, 0.8vw, 12px); }

.lamp {
    width: clamp(15px, 1.7vw, 26px);
    height: clamp(15px, 1.7vw, 26px);
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.72);
    /* Off: a dull, dark bulb sitting in its socket. */
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.10) 0%, transparent 46%),
        #16241f;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.75),
        inset 0 -1px 2px rgba(255,255,255,0.07);
    transition: background 0.14s ease, box-shadow 0.2s ease;
}

/* On: colour, a hot highlight, and bloom spilling onto the wall. */
.lamp-green.is-on {
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.85) 0%, rgba(120,240,120,0.5) 26%, transparent 55%),
        radial-gradient(circle at 50% 55%, #58e558 0%, #22a622 78%);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.4),
        inset 0 -2px 4px rgba(0,60,0,0.5),
        0 0 10px rgba(70,225,70,0.85),
        0 0 22px rgba(70,225,70,0.45);
}

.lamp-red.is-on {
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.8) 0%, rgba(255,140,120,0.5) 26%, transparent 55%),
        radial-gradient(circle at 50% 55%, #e03a2f 0%, #9c1610 78%);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.35),
        inset 0 -2px 4px rgba(70,0,0,0.55),
        0 0 10px rgba(228,50,40,0.85),
        0 0 22px rgba(228,50,40,0.42);
}

/* WALK / STRIKE / MID 5TH take the lamps' place, lit the same way. */
.count-flash {
    display: none;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: clamp(15px, 1.7vw, 26px);
    font-weight: 900;
    letter-spacing: 0.07em;
    line-height: clamp(15px, 1.7vw, 26px);
    text-transform: uppercase;
    white-space: nowrap;
}

.count-group.is-flashing .count-lamps { display: none; }
.count-group.is-flashing .count-flash { display: block; }

.count-flash.is-green {
    color: #63f063;
    text-shadow: 0 0 9px rgba(70,225,70,0.9), 0 0 20px rgba(70,225,70,0.5), 0 2px 3px rgba(0,0,0,0.6);
}

.count-flash.is-red {
    color: #ff5347;
    text-shadow: 0 0 9px rgba(228,50,40,0.9), 0 0 20px rgba(228,50,40,0.5), 0 2px 3px rgba(0,0,0,0.6);
}

/* A lamp coming on reads better with a brief surge, like a filament warming. */
@keyframes lamp-strike {
    0%   { transform: scale(1); filter: brightness(1); }
    35%  { transform: scale(1.14); filter: brightness(1.5); }
    100% { transform: scale(1); filter: brightness(1); }
}

.lamp.just-lit { animation: lamp-strike 0.34s ease-out; }

@keyframes flash-in {
    0%   { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.count-group.is-flashing .count-flash { animation: flash-in 0.22s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .lamp.just-lit { animation: none; }
    .count-group.is-flashing .count-flash { animation: none; }
}

@media (max-width: 768px) {
    /* Stay centred as a group. Pushing them to the edges spread the three sets of lamps
       across the whole board and stopped reading as one panel. */
    .count-board { justify-content: center; gap: clamp(14px, 5vw, 30px); padding: 9px 4px; }
    .count-group { min-width: 0; gap: 5px; }
    .count-label { font-size: clamp(10px, 2.4vw, 13px); gap: 4px; }
    .count-label::before, .count-label::after { width: 7px; height: 2px; }
    .lamp { width: clamp(11px, 3vw, 15px); height: clamp(11px, 3vw, 15px); border-width: 1.5px; }
    .count-flash { font-size: clamp(11px, 3vw, 15px); line-height: clamp(11px, 3vw, 15px); }
}

/* The winning club's run total keeps a slow pulse once the game is settled, so the
   result reads at a glance without having to compare two numbers. */
.total-cell.is-winner {
    color: #ffe07a;
    text-shadow: 0 0 8px rgba(247,201,72,0.75), 0 2px 3px rgba(0,0,0,0.7);
    animation: winner-pulse 2.4s ease-in-out infinite;
}

@keyframes winner-pulse {
    0%, 100% {
        box-shadow:
            inset 0 3px 4px rgba(0,0,0,0.60),
            inset 3px 0 4px rgba(0,0,0,0.36),
            0 0 0 rgba(247,201,72,0);
    }
    50% {
        box-shadow:
            inset 0 3px 4px rgba(0,0,0,0.60),
            inset 3px 0 4px rgba(0,0,0,0.36),
            0 0 14px rgba(247,201,72,0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .total-cell.is-winner { animation: none; box-shadow: 0 0 12px rgba(247,201,72,0.6); }
}

/* Keeps a hyphenated record like 18-17-3 from breaking across two lines. */
.nowrap { white-space: nowrap; }

/* The AL placement sits under the MLB one, a shade quieter. */
.stat-sub-league {
    opacity: 0.72;
    margin-top: 0;
}

/* The play by play inside the Previous Game border sits flush with it. */
.gamecast.is-prev {
    margin: 10px 0 0;
    border-width: 1px;
    border-color: rgba(219, 231, 210, 0.32);
    background: rgba(9, 18, 15, 0.34);
}

/* ===== BOARD FOOTER: MATCHUP IDENTITY ===== */
/* The clubs, the date and the score now sit at the foot of the board rather than in a
   separate panel above it, so the whole thing reads as one extended Green Monster with
   the count scorebug as its centrepiece. */
/* The clubs sit directly under the linescore, behind a rule spaced to match the gap
   the header row leaves at the top of the board. */
.board-matchup {
    margin-top: var(--board-gap);
    padding-top: var(--board-gap);
}

/* Inside the board it no longer needs its own frame. The centre column sizes to the
   scorebug's actual (already-clamped-down) width instead of a flat 42%, so it never
   reserves more room than it needs and never gets shorted at a narrow width either;
   the two team columns split whatever is left, with a floor so a logo never collapses
   to nothing. */
.board-matchup .matchup-strip { grid-template-columns: minmax(60px, 1fr) auto minmax(60px, 1fr); }

.board-matchup .matchup-strip {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.board-matchup .matchup-side-label { margin-bottom: 2px; }
.board-matchup .logo-crown { margin-bottom: 2px; }
.board-matchup .matchup-side-name { margin-top: 0; }

/* At bat, the count and the bases now close the box, so the rule above them is what
   separates the scorebug from the clubs. */
.monster-status { margin-top: var(--board-gap); }

/* Final score treatment on the board footer. */
.matchup-side-score.is-sox-win,
.center-score.is-sox-win {
    color: #6df08a;
    text-shadow:
        0 0 10px rgba(80,230,120,0.85),
        0 0 26px rgba(80,230,120,0.45),
        0 2px 4px rgba(0,0,0,0.55);
    animation: sox-win-pulse 2.4s ease-in-out infinite;
}

@keyframes sox-win-pulse {
    0%, 100% { text-shadow: 0 0 10px rgba(80,230,120,0.85), 0 0 24px rgba(80,230,120,0.35), 0 2px 4px rgba(0,0,0,0.55); }
    50%      { text-shadow: 0 0 16px rgba(80,230,120,1),    0 0 40px rgba(80,230,120,0.6),  0 2px 4px rgba(0,0,0,0.55); }
}

/* An opponent that beat them gets a flat, deeper red rather than a celebration. */
.matchup-side-score.is-opponent-win,
.center-score.is-opponent-win {
    color: #b03a34;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Whoever lost simply recedes. */
.matchup-side-score.is-beaten,
.center-score.is-beaten {
    color: rgba(255,255,255,0.5);
    text-shadow: 0 2px 4px rgba(0,0,0,0.45);
}

@media (prefers-reduced-motion: reduce) {
    .matchup-side-score.is-sox-win,
    .center-score.is-sox-win { animation: none; }
}

/* ===== PREVIOUS GAME: WINNER AND RESULT LINE ===== */
/* The winning club's whole row is picked out in gold. */
.prev-game-board .monster-cell.won {
    box-shadow:
        inset 0 3px 4px rgba(0,0,0,0.55),
        inset 0 0 0 1.5px rgba(255,206,84,0.85);
}

.prev-game-board .monster-cell.team-name.won {
    background: linear-gradient(180deg, rgba(255,206,84,0.22) 0%, rgba(255,206,84,0.10) 100%);
    color: #ffe8a8;
    box-shadow: inset 0 0 0 1.5px rgba(255,206,84,0.85);
}

/* The result in words, between the linescore and the recap. */
.prev-result-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 7px;
    background: rgba(0,0,0,0.24);
    border: 1px solid rgba(255,255,255,0.12);
    font-family: "Arial Narrow", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.prev-result-team {
    font-size: clamp(15px, 1.5vw, 23px);
    font-weight: 900;
    color: #ffffff;
}

.prev-result-line.is-sox .prev-result-team { color: #7ef0a0; text-shadow: 0 0 10px rgba(80,230,120,0.5); }
.prev-result-line.is-opponent .prev-result-team { color: #ef8a84; }

.prev-result-verb {
    font-size: clamp(12px, 1.1vw, 17px);
    font-weight: 800;
    color: rgba(255,255,255,0.62);
}

/* Reads "2 to 1": the line is uppercase, the score is not. */
.prev-result-score {
    font-size: clamp(15px, 1.5vw, 23px);
    font-weight: 900;
    color: #ffe8a8;
    letter-spacing: 0.02em;
    text-transform: none;
}

/* ===== SCOREBUG IN THE MIDDLE, CLUBS EITHER SIDE ===== */
/* The count, game score, and bases all live together now: count above, score in the
   middle, diamond below. */
/* Pinned to the top of the row so the count labels sit level with AWAY and HOME
   rather than floating down by the club names. */
.matchup-center.scorebug {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    gap: 4px;
    padding: 0 clamp(6px, 1vw, 18px);
    min-width: 0;
}

/* The count panel keeps its own minimum widths, which made it wider than the middle
   column and spilled it out over both scores. Inside the scorebug it sizes to the
   room it is given instead. */
.matchup-center.scorebug .count-board {
    margin: 0;
    padding: 0;
    border-top: none;
    gap: clamp(8px, 1.4vw, 22px);
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.matchup-center.scorebug .count-group { min-width: 0; }

.center-score-row {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.6vw, 22px);
    margin: clamp(2px, 0.45vw, 7px) 0 0;
    min-width: 0;
}

.center-score {
    min-width: clamp(28px, 3.5vw, 50px);
    font-size: clamp(30px, 4.6vw, 58px);
    text-shadow: 0 2px 4px rgba(0,0,0,0.65);
}

.center-score-divider {
    color: rgba(255,255,255,0.52);
    font-size: clamp(16px, 2vw, 28px);
    font-weight: 900;
    line-height: 1;
}

.matchup-center.scorebug .bases { margin: 0 auto; }

/* Secondary context, so it trails the label/status group rather than competing with
   it. margin-left:auto pushes it to the far edge while there is room on the line. */
.hero-when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    margin-left: 0;
    color: rgba(255,255,255,0.62);
    font-size: clamp(10.5px, 0.18vw + 9.4px, 12.5px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 820px) {
    .today-hero-top {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 14px;
        padding-inline: clamp(16px, 4vw, 28px);
        margin-bottom: 12px;
    }

    .today-hero-top .hero-label {
        grid-column: 1;
        grid-row: 1;
    }

    .today-hero-top .live-pill {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .hero-when {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        font-size: 11px;
        letter-spacing: 0.03em;
    }
}

.hero-when-sep { opacity: 0.45; }

.board-game-meta {
    display: grid;
    justify-items: center;
    gap: 5px;
    margin-top: auto;
    margin-bottom: auto;
    padding: clamp(8px, 1.3vw, 18px) 0;
    color: rgba(255,255,255,0.82);
    font-size: clamp(10px, 0.8vw + 7px, 14px);
    font-weight: 900;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 3px rgba(0,0,0,0.65);
}

.board-game-line,
.board-duration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

.board-duration {
    color: rgba(255,255,255,0.72);
    font-size: clamp(9px, 0.72vw + 6px, 12px);
}

.board-duration[hidden] { display: none; }

.board-duration.is-delay {
    color: #ff4a40;
    text-shadow: 0 0 12px rgba(239,68,68,0.85), 0 2px 3px rgba(0,0,0,0.65);
}

.duration-clock {
    color: #ffffff;
    min-width: 42px;
}

/* ===== LIVE PLAY NOTIFICATIONS ===== */
.live-play-stage {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: clamp(150px, 30vw, 430px);
    max-width: 100%;
    min-height: clamp(52px, 5.5vw, 68px);
    margin-top: 2px;
    overflow: hidden;
}

.live-play-card {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    width: 100%;
    min-height: clamp(46px, 4.8vw, 60px);
    align-content: center;
    gap: 2px;
    padding: 7px clamp(9px, 1.4vw, 18px);
    border-block: 2px solid rgba(255,255,255,0.38);
    background: linear-gradient(90deg, rgba(5,16,12,0.18), rgba(5,16,12,0.9) 18%, rgba(5,16,12,0.9) 82%, rgba(5,16,12,0.18));
    box-shadow: 0 4px 16px rgba(0,0,0,0.24);
    color: white;
    opacity: 0;
    visibility: hidden;
    text-align: center;
}

.live-play-stage.is-active .live-play-card { visibility: visible; }

.live-play-kicker {
    color: #ff7771;
    font-size: clamp(7px, 0.45vw + 5.5px, 10px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.live-play-title {
    max-width: 100%;
    color: #ffffff;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: clamp(13px, 1.2vw + 8px, 22px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    text-shadow: 0 2px 3px rgba(0,0,0,0.75);
}

.live-play-description {
    display: -webkit-box;
    max-width: 100%;
    max-height: 2.5em;
    overflow: hidden;
    color: rgba(255,255,255,0.78);
    font-size: clamp(8px, 0.45vw + 6px, 11px);
    font-weight: 700;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.live-play-description[hidden] { display: none; }

.live-play-description.is-pitch-details {
    display: grid;
    justify-items: center;
    gap: 1px;
    max-height: none;
    overflow: visible;
    line-height: 1.05;
    -webkit-line-clamp: unset;
}

.live-pitch-type {
    color: rgba(255,255,255,0.82);
    font-size: clamp(8px, 0.48vw + 6px, 11.5px);
}

.live-pitch-call {
    color: #fff3c4;
    font-size: clamp(8px, 0.55vw + 6px, 12.5px);
    text-transform: uppercase;
}

.live-play-motion {
    position: absolute;
    z-index: 4;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.live-play-fireball {
    position: absolute;
    top: 50%;
    left: -82px;
    width: 72px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(255,71,24,0), rgba(255,71,24,0.72) 42%, #ffbd35 78%, #fff4b0 100%);
    filter: drop-shadow(0 0 6px #ff4a1e) drop-shadow(0 0 12px rgba(255,170,35,0.85));
    transform: translateY(-50%);
}

.live-play-fireball::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: radial-gradient(circle at 63% 38%, #ffffff 0 12%, #ffe56b 18%, #ff8a20 52%, #d7272d 78%);
    box-shadow: 0 0 13px #ffb52e, 0 0 24px rgba(215,39,45,0.88);
    transform: translateY(-50%);
}

.live-play-baseball {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -58px;
    width: clamp(42px, 4vw, 58px);
    height: clamp(42px, 4vw, 58px);
    object-fit: contain;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.5));
    transform: translateY(-50%);
}

.live-play-glove {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: clamp(58px, 5.4vw, 78px);
    height: clamp(58px, 5.4vw, 78px);
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.52));
    opacity: 0;
    transform-origin: center;
}

/* The supplied glove's top points left. A clockwise quarter-turn puts the fingers
   at the top and the wrist at the bottom; the left copy is then mirrored inward. */
.live-play-glove.is-right {
    right: clamp(-23px, -1.5vw, -12px);
    transform: translateY(-50%) rotate(90deg);
}

.live-play-glove.is-left {
    left: clamp(-23px, -1.5vw, -12px);
    transform: translateY(-50%) scaleX(-1) rotate(90deg);
}

.live-play-walker {
    position: absolute;
    top: 50%;
    left: -46px;
    font-size: clamp(25px, 3vw, 40px);
    line-height: 1;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.55));
    transform: translateY(-50%);
}

.live-play-stage.is-strikeout .live-play-fireball { animation: live-fireball-sweep 0.92s cubic-bezier(0.3,0.68,0.35,1) both; }
.live-play-stage.is-strikeout .live-play-card,
.live-play-stage.is-groundout .live-play-card,
.live-play-stage.is-flyout .live-play-card,
.live-play-stage.is-double-play .live-play-card,
.live-play-stage.is-walk .live-play-card,
.live-play-stage.is-hit .live-play-card { animation: live-card-wipe 0.74s 0.28s ease-out both; }
.live-play-stage.is-groundout .live-play-baseball { animation: live-baseball-groundout 1.28s ease-in-out both; }
.live-play-stage.is-groundout .live-play-glove.is-right,
.live-play-stage.is-flyout .live-play-glove.is-right,
.live-play-stage.is-double-play .live-play-glove.is-right { animation: live-glove-right-catch 1.35s ease-in-out both; }
.live-play-stage.is-flyout .live-play-baseball { animation: live-baseball-flyout 1.35s cubic-bezier(0.28,0.58,0.4,1) both; }
.live-play-stage.is-double-play .live-play-baseball { animation: live-baseball-double-play 1.38s ease-in-out both; }
.live-play-stage.is-double-play .live-play-glove.is-left { animation: live-glove-left-release 1.38s ease-in-out both; }
.live-play-stage.is-walk .live-play-walker { animation: live-walker-sweep 1.1s ease-in-out both; }
.live-play-stage.is-hit .live-play-baseball { animation: live-baseball-hit 1.75s ease-in-out both; }
.live-play-stage.is-popout .live-play-card { animation: live-card-pop 0.64s cubic-bezier(0.2,0.92,0.35,1.15) both; }
.live-play-stage.is-generic .live-play-card { animation: live-card-fade 0.42s ease-out both; }
.live-play-stage.is-pitch .live-play-card {
    min-height: clamp(58px, 5.8vw, 76px);
    border-color: rgba(255,243,196,0.42);
    animation: live-card-fade 0.3s ease-out both;
}

.live-play-stage.is-pitch .live-play-kicker {
    color: #ffffff;
    font-size: clamp(8px, 0.52vw + 6px, 11px);
}

.live-play-stage.is-pitch .live-play-title {
    color: #fff3c4;
    font-size: clamp(12px, 0.9vw + 8px, 18px);
    text-transform: none;
}

.live-play-stage.is-home-run .live-play-card {
    border-color: #ffd34e;
    background: linear-gradient(90deg, rgba(215,39,45,0.12), rgba(89,10,14,0.96) 18%, rgba(89,10,14,0.96) 82%, rgba(215,39,45,0.12));
    box-shadow: 0 0 18px rgba(255,211,78,0.25), 0 4px 16px rgba(0,0,0,0.28);
    animation: live-home-run-card 0.7s cubic-bezier(0.2,0.9,0.35,1.12) both;
}

.live-play-stage.is-home-run .live-play-kicker,
.live-play-stage.is-home-run .live-play-title { color: #ffd34e; }

.live-play-stage.is-leaving .live-play-card {
    animation: live-card-out 0.34s ease-in both;
}

@keyframes live-fireball-sweep {
    0% { left: -82px; transform: translateY(-50%) scale(0.76); }
    48% { transform: translateY(-50%) scale(1.08); }
    100% { left: calc(100% + 12px); transform: translateY(-50%) scale(0.9); }
}

@keyframes live-baseball-groundout {
    0% { left: -58px; top: 66%; transform: translateY(-50%) rotate(0deg) scale(0.9); }
    19% { top: 39%; }
    34% { top: 66%; }
    49% { top: 49%; }
    62% { top: 66%; }
    74% { top: 57%; }
    84% { top: 66%; transform: translateY(-50%) rotate(690deg) scale(0.86); }
    100% { left: calc(100% - 22px); top: 51%; transform: translate(-50%, -50%) rotate(900deg) scale(0.34); }
}

@keyframes live-baseball-flyout {
    0% { left: -56px; top: 82%; transform: translateY(-50%) rotate(0deg) scale(0.82); }
    48% { left: 50%; top: -4%; transform: translate(-50%, -50%) rotate(420deg) scale(1); }
    78% { top: 22%; }
    100% { left: calc(100% - 22px); top: 49%; transform: translate(-50%, -50%) rotate(720deg) scale(0.34); }
}

@keyframes live-baseball-double-play {
    0% { left: 22px; top: 51%; transform: translate(-50%, -50%) rotate(0deg) scale(0.34); }
    10% { top: 34%; transform: translate(-50%, -50%) rotate(80deg) scale(0.82); }
    27% { top: 65%; }
    45% { top: 43%; }
    61% { top: 65%; }
    75% { top: 54%; }
    86% { top: 65%; transform: translate(-50%, -50%) rotate(640deg) scale(0.84); }
    100% { left: calc(100% - 22px); top: 51%; transform: translate(-50%, -50%) rotate(820deg) scale(0.34); }
}

@keyframes live-glove-right-catch {
    0%, 12% { opacity: 0; transform: translateY(-50%) rotate(90deg) scale(0.9); }
    22%, 84% { opacity: 1; transform: translateY(-50%) rotate(90deg) scale(1); }
    94% { opacity: 1; transform: translateY(-50%) rotate(90deg) scale(1.1); }
    100% { opacity: 1; transform: translateY(-50%) rotate(90deg) scale(1); }
}

@keyframes live-glove-left-release {
    0% { opacity: 1; transform: translateY(-50%) scaleX(-1) rotate(90deg) scale(1.08); }
    14%, 82% { opacity: 1; transform: translateY(-50%) scaleX(-1) rotate(90deg) scale(1); }
    100% { opacity: 0.75; transform: translateY(-50%) scaleX(-1) rotate(90deg) scale(0.94); }
}

@keyframes live-baseball-hit {
    0% { left: -58px; transform: translateY(-50%) rotate(0deg); }
    34% { left: 100%; transform: translate(-100%, -50%) rotate(520deg); }
    67% { left: 0; transform: translate(0, -50%) rotate(180deg); }
    100% { left: 100%; transform: translate(-100%, -50%) rotate(760deg); }
}

@keyframes live-walker-sweep {
    0% { left: -46px; transform: translateY(-50%) scale(0.88); }
    45% { transform: translateY(-50%) scale(1.08); }
    100% { left: calc(100% + 8px); transform: translateY(-50%) scale(0.94); }
}

@keyframes live-card-wipe {
    0% { opacity: 0; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
    100% { opacity: 1; clip-path: inset(0); -webkit-clip-path: inset(0); }
}

@keyframes live-card-pop {
    0% { opacity: 0; transform: scale(0.12); }
    64% { opacity: 1; transform: scale(1.12); }
    82% { transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes live-card-fade {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes live-home-run-card {
    0% { opacity: 0; transform: scale(0.6); filter: brightness(2); }
    62% { opacity: 1; transform: scale(1.07); filter: brightness(1.25); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes live-card-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.96); }
}

.home-run-fireworks {
    position: fixed;
    z-index: 9999;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.firework-rocket {
    position: absolute;
    left: var(--rocket-x);
    bottom: -24px;
    width: 5px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 0 8px #ffd34e, 0 0 16px #d7272d;
    opacity: 0;
    animation: firework-rocket-rise 0.62s var(--firework-delay) ease-out both;
}

.firework-rocket::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 1px;
    width: 3px;
    height: 30px;
    background: linear-gradient(#ffd34e, rgba(215,39,45,0));
}

.firework-spark {
    position: absolute;
    top: var(--spark-y);
    left: var(--spark-x);
    width: 4px;
    height: 11px;
    border-radius: 999px;
    background: var(--spark-color);
    box-shadow: 0 0 7px var(--spark-color);
    opacity: 0;
    animation: firework-spark-fall var(--spark-duration) var(--firework-delay) cubic-bezier(0.18,0.62,0.35,1) both;
}

@keyframes firework-rocket-rise {
    0% { opacity: 0; transform: translateY(0) scale(0.7); }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; transform: translateY(var(--rocket-rise)) scale(0.28); }
}

@keyframes firework-spark-fall {
    0% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0deg); }
    5% { opacity: 1; }
    30% { opacity: 1; transform: translate(var(--spark-drift), var(--spark-lift)) scale(1) rotate(180deg); }
    100% { opacity: 0; transform: translate(var(--spark-drift-end), var(--spark-fall)) scale(0.45) rotate(620deg); }
}

@media (max-width: 620px) {
    .live-play-stage {
        width: clamp(126px, 38vw, 190px);
        min-height: 50px;
        margin-top: 0;
    }

    .live-play-card {
        min-height: 44px;
        gap: 1px;
        padding: 5px 6px;
        border-block-width: 1px;
    }

    .live-play-kicker { display: none; }
    .live-play-stage.is-pitch .live-play-kicker { display: block; }
    .live-play-title { font-size: clamp(9px, 2.5vw, 13px); }
    .live-play-description { font-size: clamp(7.5px, 1.9vw, 9px); }
    .live-play-stage.is-pitch .live-play-card { min-height: 58px; padding-block: 5px; }
    .live-play-stage.is-pitch .live-play-title { font-size: clamp(10px, 2.8vw, 13px); }
    .live-play-stage.is-pitch .live-play-kicker,
    .live-pitch-type,
    .live-pitch-call { font-size: clamp(7.5px, 2vw, 9px); }
    .live-play-baseball { width: 43px; height: 43px; }
    .live-play-stage.is-groundout .live-play-baseball,
    .live-play-stage.is-flyout .live-play-baseball,
    .live-play-stage.is-double-play .live-play-baseball { width: 34px; height: 34px; }
    .live-play-glove { width: 44px; height: 44px; }
    .live-play-glove.is-right { right: -14px; }
    .live-play-glove.is-left { left: -14px; }
    .live-play-stage.is-groundout .live-play-card,
    .live-play-stage.is-flyout .live-play-card { padding-right: 25px; }
    .live-play-stage.is-double-play .live-play-card { padding-inline: 25px; }
    .live-play-fireball { width: 58px; height: 18px; }
    .live-play-fireball::after { width: 18px; height: 18px; }
    .live-play-walker { font-size: 28px; }
}

@media (max-width: 340px) {
    .live-play-stage { width: min(100%, 300px); }
}

@media (prefers-reduced-motion: reduce) {
    .live-play-motion,
    .home-run-fireworks { display: none; }

    .live-play-stage.is-active .live-play-card,
    .live-play-stage.is-leaving .live-play-card {
        animation: none;
        clip-path: none;
        -webkit-clip-path: none;
        filter: none;
        opacity: 1;
        transform: none;
    }
}

/* ===== ABS CHALLENGES ===== */
/* Team-level ABS challenges. Both clubs start with their challenge lamps lit;
   a spent challenge turns one off as the live feed updates. */
.abs-row {
    display: inline-grid;
    justify-items: center;
    gap: 7px;
    margin-top: clamp(8px, 0.9vw, 12px);
}

.matchup-side.home .abs-row { justify-self: end; }

.abs-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: clamp(9px, 0.5vw + 7.5px, 12px);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 0 10px rgba(255,255,255,0.35), 0 2px 3px rgba(0,0,0,0.7);
}

.abs-label::before,
.abs-label::after {
    content: '';
    width: clamp(6px, 0.6vw, 10px);
    height: 2px;
    border-radius: 2px;
    background: #05100c;
    box-shadow: 0 1px 0 rgba(255,255,255,0.10);
}

.abs-lamps { display: inline-flex; gap: clamp(6px, 0.8vw, 12px); }

.lamp-abs.is-on {
    background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,0.9) 0%, rgba(255,231,150,0.55) 30%, transparent 60%),
        linear-gradient(140deg, #ffe07a 0%, #f5c243 55%, #d99a1c 100%);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.5),
        inset 0 -2px 4px rgba(120,80,0,0.45),
        0 0 10px rgba(247,201,72,0.75),
        0 0 22px rgba(247,201,72,0.4);
}

/* The middle column keeps narrowing as the window does, but the count labels stopped
   shrinking, so STRIKE and its dashes outgrew their group and ran into the others.
   Everything in the scorebug scales down through this band instead. */
@media (max-width: 1000px) {
    .matchup-center.scorebug .count-label {
        font-size: clamp(8.5px, 1.15vw, 13px);
        gap: 4px;
        letter-spacing: 0.03em;
    }

    .matchup-center.scorebug .count-label::before,
    .matchup-center.scorebug .count-label::after {
        width: clamp(4px, 0.6vw, 9px);
        height: 2px;
    }

    .matchup-center.scorebug .count-lamps { gap: clamp(3px, 0.45vw, 7px); }

    .matchup-center.scorebug .lamp {
        width: clamp(10px, 1.3vw, 17px);
        height: clamp(10px, 1.3vw, 17px);
    }

    .matchup-center.scorebug .count-flash {
        font-size: clamp(10px, 1.3vw, 17px);
        line-height: clamp(10px, 1.3vw, 17px);
    }

    .matchup-center.scorebug .bases {
        width: clamp(44px, 5vw, 62px);
        height: clamp(32px, 3.6vw, 45px);
    }

    .matchup-center.scorebug .base {
        width: clamp(17px, 2vw, 26px);
        height: clamp(17px, 2vw, 26px);
    }

    .matchup-center.scorebug .base-second { margin-left: calc(clamp(17px, 2vw, 26px) / -2); }
}

/* Real phones live in this band (roughly 340-620px), and the scorebug now stays on
   the same row as the clubs the whole way through it instead of dropping underneath
   them. Everything shrinks further: tighter gaps, smaller lamps, a smaller diamond,
   and the team columns give up their last bit of headroom around the logo. */
@media (max-width: 620px) {
    .board-matchup .matchup-strip { gap: clamp(4px, 1.6vw, 10px); }

    .matchup-center.scorebug {
        padding: 0 clamp(2px, 1vw, 6px);
        gap: 2px;
    }

    .board-game-meta {
        gap: 3px;
        padding: 8px 0;
    }

    .board-game-line {
        display: grid;
        justify-items: center;
        gap: 2px;
        line-height: 1.08;
    }

    .board-game-line .hero-when-sep {
        line-height: 0.85;
    }

    .matchup-center.scorebug .count-board {
        gap: clamp(5px, 2.2vw, 12px);
    }

    .matchup-center.scorebug .count-label {
        font-size: clamp(7.5px, 2.1vw, 10px);
        gap: 2px;
    }

    .matchup-center.scorebug .count-label::before,
    .matchup-center.scorebug .count-label::after {
        width: clamp(3px, 1vw, 5px);
    }

    .matchup-center.scorebug .count-lamps { gap: clamp(2px, 0.9vw, 4px); }
    .matchup-center.scorebug .lamp {
        width: clamp(8px, 2.2vw, 11px);
        height: clamp(8px, 2.2vw, 11px);
    }

    .matchup-center.scorebug .bases {
        width: clamp(34px, 8vw, 44px);
        height: clamp(25px, 6vw, 32px);
        margin-top: 4px;
    }

    .matchup-center.scorebug .base {
        width: clamp(13px, 3vw, 17px);
        height: clamp(13px, 3vw, 17px);
    }

    .matchup-center.scorebug .base-second { margin-left: calc(clamp(13px, 3vw, 17px) / -2); }

    .board-matchup .logo-crown { margin-top: 16px; }
    .board-matchup .featured-team-logo {
        width: clamp(62px, 17vw, 80px);
        height: clamp(62px, 17vw, 80px);
        padding: clamp(12px, 3.2vw, 16px);
    }
    .board-matchup .halo-icon {
        top: clamp(-21px, -5vw, -15px);
        width: 120%;
        transform: translateX(-50%) rotate(-1deg);
    }
    .board-matchup .horns-icon {
        top: clamp(-6px, -1.5vw, -3px);
        width: 86%;
    }
    .board-matchup .matchup-side-record { margin-top: 3px; }
}

/* A true safety net for devices narrower than any modern phone. Only here does the
   scorebug drop to its own row, and only because there is no realistic way to keep
   three legible columns in under 340px. */
@media (max-width: 340px) {
    .board-matchup .matchup-strip {
        grid-template-columns: 1fr 1fr;
        row-gap: 4px;
    }

    .board-matchup .matchup-side.away { grid-column: 1; grid-row: 1; }
    .board-matchup .matchup-side.home { grid-column: 2; grid-row: 1; }

    .matchup-center.scorebug {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 0;
        gap: 6px;
        margin-top: 6px;
    }

    /* Equal columns keep STRIKE exactly on the centre line, which is where the base
       diamond sits. Sizing them to their own labels left it a few pixels off. */
    .matchup-center.scorebug .count-board {
        gap: clamp(10px, 4vw, 26px);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: center;
        width: 100%;
        max-width: 360px;
        margin-inline: auto;
    }

    .matchup-center.scorebug .count-label { font-size: clamp(9px, 2.4vw, 13px); }
    .matchup-center.scorebug .lamp { width: clamp(11px, 3vw, 16px); height: clamp(11px, 3vw, 16px); }
    .board-matchup .logo-crown { margin-top: 14px; }
    .board-matchup .halo-icon {
        top: -16px;
        width: 118%;
        transform: translateX(-50%) rotate(0deg);
    }
}

/* ===== BASES ===== */
/* Read from behind home plate: second at the top, third to the left, first to the right.
   Squares turned 45 degrees, sunk into the wall like the count lamps. */
.bases {
    position: relative;
    width: clamp(58px, 5.4vw, 84px);
    height: clamp(42px, 3.9vw, 60px);
    margin: 10px auto 2px;
}

.base {
    position: absolute;
    width: clamp(23px, 2.2vw, 34px);
    height: clamp(23px, 2.2vw, 34px);
    transform: rotate(45deg);
    border: 2px solid rgba(0,0,0,0.72);
    border-radius: 3px;
    /* Empty: a dull plate with no light behind it. */
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,0.08) 0%, transparent 50%),
        #16241f;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.7),
        inset 0 -1px 2px rgba(255,255,255,0.06);
    transition: background 0.16s ease, box-shadow 0.22s ease;
}

.base-second { top: 0; left: 50%; margin-left: calc(clamp(23px, 2.2vw, 34px) / -2); }
.base-third  { bottom: 0; left: 0; }
.base-first  { bottom: 0; right: 0; }

/* Occupied: the same amber the scoreboard uses for a live number. */
.base.is-on {
    background:
        radial-gradient(circle at 32% 26%, rgba(255,255,255,0.9) 0%, rgba(255,231,150,0.55) 30%, transparent 60%),
        linear-gradient(140deg, #ffe07a 0%, #f5c243 55%, #d99a1c 100%);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.5),
        inset 0 -2px 4px rgba(120,80,0,0.45),
        0 0 10px rgba(247,201,72,0.75),
        0 0 22px rgba(247,201,72,0.4);
}

/* ===== GAMECAST: PLAY BY PLAY, BOX SCORE, GAME INFO ===== */
/* Sits directly under the scoreboard and stays shut until asked for, so the dashboard
   still leads with the story and the detail is one click away. */
/* Butted straight onto the bottom of the scoreboard so the two read as one unit: no
   gap, square top corners, and it borrows the board's own frame as its top edge
   instead of drawing a second line right beneath it. */
/* Squared off at the bottom so the Play by play panel butts straight onto it. */
.today-hero > .monster-board { border-radius: 3px 3px 0 0; }

.gamecast {
    margin-top: 0;
    border: var(--board-frame) solid var(--board-white);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: rgba(18, 30, 27, 0.42);
    overflow: hidden;
}

/* The Previous Game panel keeps its own detached look. */
.gamecast.is-prev {
    border-radius: 8px;
    border-top: 1px solid rgba(219, 231, 210, 0.32);
}

.gamecast-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px clamp(12px, 1vw, 18px);
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.9);
    font-size: clamp(13px, 0.2vw + 11px, 15px);
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease;
}

.gamecast-toggle:hover { background: rgba(255,255,255,0.07); }

.gamecast-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 4px;
    background: rgba(255,255,255,0.14);
    font-size: 14px;
    line-height: 1;
}

.gamecast-hint {
    margin-left: auto;
    color: rgba(255,255,255,0.6);
    font-size: clamp(11px, 0.18vw + 9.5px, 13px);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A live game gets a pulsing dot so it is obvious the page is following along. */
.gamecast-hint.is-live::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--red);
    animation: gamecast-pulse 1.8s ease-in-out infinite;
}

@keyframes gamecast-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(215,39,45,0.6); }
    50%      { opacity: 0.55; box-shadow: 0 0 0 5px rgba(215,39,45,0); }
}

@media (prefers-reduced-motion: reduce) {
    .gamecast-hint.is-live::before { animation: none; }
}

.gamecast-body {
    border-top: 1px solid rgba(255,255,255,0.16);
    background: rgba(9, 18, 15, 0.34);
}

.gamecast-tabs {
    display: flex;
    gap: 2px;
    padding: 8px clamp(10px, 0.9vw, 16px) 0;
}

.gamecast-tab {
    padding: 7px 14px;
    border: none;
    border-radius: 7px 7px 0 0;
    background: transparent;
    color: rgba(255,255,255,0.6);
    font-size: clamp(12px, 0.16vw + 10.5px, 13.5px);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.gamecast-tab:hover { background: rgba(255,255,255,0.09); color: #ffffff; }
.gamecast-tab.is-active { background: rgba(255,255,255,0.15); color: #ffffff; }

.gamecast-panel {
    max-height: 460px;
    overflow-y: auto;
    padding: clamp(10px, 1vw, 16px) clamp(12px, 1.1vw, 20px) 16px;
}

.gamecast-empty { color: rgba(255,255,255,0.55); font-style: italic; }

/* --- play by play --- */
.half-inning + .half-inning { margin-top: 14px; }

.half-inning-title {
    position: sticky;
    top: -2px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    padding: 5px 10px;
    border-radius: 5px;
    background: rgba(84,121,109,0.92);
    color: #ffffff;
    font-size: clamp(11px, 0.16vw + 9.6px, 12.5px);
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* The frame being played is red; completed frames stay green. */
.half-inning-title.is-live {
    background: var(--red);
    box-shadow: 0 0 12px rgba(215,39,45,0.45);
}

.half-inning-now {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    font-size: 9.5px;
    letter-spacing: 0.06em;
}

.play-list { list-style: none; margin: 0; padding: 0; }

.play {
    padding: 9px 0 10px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
}

.play:last-child { border-bottom: none; }

/* Runs scored get a red rail, the way a scoring play stands out in a game log. */
.play.is-scoring {
    padding-left: 11px;
    border-left: 3px solid var(--red);
    background: rgba(215,39,45,0.07);
    border-radius: 0 5px 5px 0;
}

.play-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }

.play-event {
    color: #ffffff;
    font-size: clamp(12.5px, 0.18vw + 11px, 14.5px);
    font-weight: 800;
}

.play-outs, .play-score {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.78);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.play-score { background: var(--red); color: #ffffff; }

.play-desc {
    margin-top: 3px;
    color: rgba(255,255,255,0.76);
    font-size: clamp(12px, 0.16vw + 10.6px, 13.5px);
    line-height: 1.45;
}

.pitch-list {
    list-style: none;
    margin: 7px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pitch {
    display: grid;
    grid-template-columns: 46px 68px 1fr auto;
    gap: 8px;
    align-items: baseline;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0,0,0,0.26);
    font-size: clamp(11px, 0.14vw + 10px, 12.5px);
}

.pitch-count { color: rgba(255,255,255,0.55); font-weight: 800; font-variant-numeric: tabular-nums; }
.pitch-speed { color: #f7c948; font-weight: 800; font-variant-numeric: tabular-nums; }
.pitch-type  { color: rgba(255,255,255,0.82); font-weight: 650; }
.pitch-call  { color: rgba(255,255,255,0.55); font-weight: 650; text-align: right; }
.pitch-call.in-play { color: #7ee0a6; font-weight: 800; }

/* --- box score --- */
.bx-team + .bx-team { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14); }

.bx-team-name {
    margin: 0 0 9px;
    color: #ffffff;
    font-size: clamp(13px, 0.2vw + 11px, 15.5px);
    font-weight: 800;
    letter-spacing: 0.03em;
}

.bx-scroll { overflow-x: auto; margin-bottom: 12px; }

.bx-table {
    width: 100%;
    min-width: 470px;
    border-collapse: collapse;
    font-size: clamp(11.5px, 0.14vw + 10.4px, 13px);
    font-variant-numeric: tabular-nums;
}

.bx-table th {
    padding: 5px 7px;
    border-bottom: 1px solid rgba(255,255,255,0.22);
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: right;
    white-space: nowrap;
}

.bx-table th:first-child { text-align: left; }

.bx-table td {
    padding: 5px 7px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.85);
    text-align: right;
    white-space: nowrap;
}

.bx-table td.bx-name { text-align: left; color: #ffffff; font-weight: 650; }

.bx-pos {
    margin-left: 6px;
    color: rgba(255,255,255,0.45);
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
}

/* Substitutions are indented the way a printed box score sets them. */
.bx-table tr.is-sub td.bx-name { padding-left: 18px; font-weight: 550; color: rgba(255,255,255,0.8); }

.bx-table tr.bx-totals td {
    border-top: 1px solid rgba(255,255,255,0.24);
    border-bottom: none;
    color: #ffffff;
    font-weight: 800;
}

.bx-notes {
    list-style: none;
    margin: 0 0 4px;
    padding: 9px 11px;
    border-radius: 6px;
    background: rgba(0,0,0,0.24);
    color: rgba(255,255,255,0.72);
    font-size: clamp(11px, 0.14vw + 10px, 12.5px);
    line-height: 1.6;
}

.bx-notes strong { color: #ffffff; margin-right: 5px; }

/* --- game info --- */
.gi-list { list-style: none; margin: 0; padding: 0; }

.gi-list li {
    display: grid;
    grid-template-columns: minmax(110px, 170px) 1fr;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: clamp(11.5px, 0.16vw + 10.3px, 13px);
}

.gi-list li:last-child { border-bottom: none; }
.gi-label { color: rgba(255,255,255,0.55); font-weight: 800; }
.gi-value { color: rgba(255,255,255,0.86); }

@media (max-width: 768px) {
    .pitch { grid-template-columns: 40px 60px 1fr; }
    .pitch-call { grid-column: 1 / -1; text-align: left; }
    .gi-list li { grid-template-columns: 1fr; gap: 2px; }
}

/* ===== PREVIOUS GAME BOX SCORE ===== */
.prev-game-board {
    margin-top: 0;
    margin-bottom: 20px;
}

.prev-game-win {
    border-color: var(--green);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 14px 36px rgba(0,0,0,0.20), 0 0 0 3px rgba(84,121,109,0.4);
}

.prev-game-loss {
    border-color: var(--red);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 14px 36px rgba(0,0,0,0.20), 0 0 0 3px rgba(215,39,45,0.4);
}

.prev-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 2px;
}

.prev-game-matchup {
    color: white;
    font-weight: 800;
    font-size: 14px;
}

.prev-game-date {
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    font-weight: 700;
    margin-right: auto;
    margin-left: 10px;
}

.prev-result-pill {
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: white;
}

.prev-result-pill.is-win { background: var(--green); }
.prev-result-pill.is-loss { background: var(--red); }

/* ===== RECENT GAMES SCROLL ===== */
.games-scroll {
    max-height: 600px;
    overflow-y: auto;
}

.games-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

tr.row-current td {
    border-top: 2px solid #ffd700;
    border-bottom: 2px solid #ffd700;
    box-shadow: inset 0 0 10px rgba(255,215,0,0.3);
}

tr.row-current td:first-child { border-left: 2px solid #ffd700; }
tr.row-current td:last-child { border-right: 2px solid #ffd700; }

.panel {
    padding: clamp(20px, 1.4vw, 30px) clamp(24px, 1.7vw, 36px);
}

.panel-title {
    font-size: clamp(15px, 0.28vw + 12.6px, 18px);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

/* ===== SECTION HEADERS ===== */
/* These sit directly on the green wall, so they carry light type rather than the
   muted grey used inside white panels. */
.section-header {
    font-size: clamp(13px, 0.28vw + 10.6px, 16px);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
    margin: clamp(22px, 1.8vw, 32px) 0 10px;
}

/* ===== STAT GRID ===== */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(16,24,40,0.04);
}

.stat-label {
    font-size: clamp(11px, 0.18vw + 9.5px, 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 4px;
}

.stat-value {
    font-size: clamp(26px, 0.85vw + 18.5px, 36px);
    font-weight: 800;
    color: var(--navy);
    line-height: 1.1;
}

.stat-sub {
    font-size: clamp(11px, 0.18vw + 9.5px, 13px);
    color: var(--muted);
    margin-top: 2px;
}

.small-value {
    font-size: 22px;
}

.calibration-panel {
    border-left: 4px solid var(--red);
}

.calibration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 8px;
}

.calibration-grid > div {
    background: #f8f9fb;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px;
}

/* ===== TABLES ===== */
table { width: 100%; border-collapse: collapse; }

th, td {
    padding: clamp(10px, 0.6vw, 14px) clamp(12px, 0.7vw, 17px);
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    font-size: clamp(14px, 0.22vw + 11.9px, 16.5px);
}

th {
    color: var(--muted);
    font-size: clamp(12px, 0.18vw + 10.5px, 14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8f9fb;
}

tr.row-win td { background: #f0fdf4; }
tr.row-loss td { background: #fff8f8; }
tr:last-child td { border-bottom: none; }

.team-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    font-weight: 750;
    text-decoration: none;
}

.team-link:hover {
    color: var(--red);
    text-decoration: none;
}

.table-team-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* ===== BADGES ===== */
.badge {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
}
.badge-win { background: #dcfce7; color: #166534; }
.badge-loss { background: #fee2e2; color: #991b1b; }
.badge-scheduled { background: #e0e7ff; color: #3730a3; }

/* ===== LINKS & BUTTONS ===== */
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

.button, button {
    display: inline-block;
    background: var(--red);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.button:hover, button:hover { background: var(--red-dark); text-decoration: none; color: white; }
.button.secondary, button.secondary { background: var(--green); }
.button.secondary:hover { background: var(--green-light); }
button.danger { background: #7a1724; }

.nav-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ===== MATCHUP PREVIEW (dashboard) ===== */
.matchup-preview-card { border-top-color: var(--navy); }

.matchup-header-mini {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
}

.team-mini-name { font-size: 18px; font-weight: 800; color: var(--navy); }
.team-mini-record { font-size: 14px; color: var(--muted); margin-top: 2px; }

.matchup-vs-mini {
    text-align: center;
    flex: 1;
}
.matchup-at { font-size: 28px; font-weight: 900; color: var(--navy); }
.matchup-date { font-size: 13px; color: var(--muted); margin-top: 4px; }
.matchup-venue { font-size: 13px; color: var(--muted); }

/* ===== WIN PROBABILITY BAR (dashboard mini) ===== */
.win-prob-mini { margin-top: 8px; }
.win-prob-bar-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.win-prob-label { font-size: 14px; font-weight: 700; white-space: nowrap; }
.away-label { color: var(--away-color); }
.home-label { color: var(--home-color); }

.win-prob-bar {
    flex: 1;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--away-color) var(--away-pct),
        var(--home-color) var(--away-pct)
    );
}

.win-prob-disclaimer {
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
    margin-top: 4px;
}

/* ===== MATCHUP CENTER PAGE ===== */
.game-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px;
}
.selector-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.selector-links { display: flex; gap: 8px; flex-wrap: wrap; }
.selector-links a {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.15s;
}
.selector-links a:hover { border-color: var(--red); color: var(--red); }
.selector-links a.selector-active { background: var(--red); color: white; border-color: var(--red); }

.selector-team-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 5px;
}

.matchup-calendar {
    padding: 18px;
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.calendar-toolbar h2 {
    margin: 3px 0 0;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.2;
}

.calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.calendar-nav a {
    min-width: 38px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--navy);
    background: white;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.calendar-nav a:hover {
    border-color: var(--red);
    color: var(--red);
}

.calendar-weekdays,
.calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background: #f8fafc;
}

.calendar-weekdays span {
    padding: 9px 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

/*
 * The month is always in the DOM. Collapsed, the viewport is one week tall and the track is
 * slid so the focus week sits at the top; expanded, the viewport grows to the full track.
 * Animating height and transform rather than toggling display keeps the change smooth and
 * leaves the grid geometry untouched, so a week row looks identical either way.
 */
.calendar-viewport {
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.calendar-track {
    will-change: transform;
}

.js-calendar .calendar-viewport {
    transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-calendar .calendar-track {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* A reader who has asked for less motion gets the same states without the travel. */
@media (prefers-reduced-motion: reduce) {
    .js-calendar .calendar-viewport,
    .js-calendar .calendar-track {
        transition: none;
    }
}

/* The month title doubles as the control that opens the month, so only one of them shows. */
.calendar-heading { min-width: 0; }
.js-calendar .calendar-static-title { display: none; }

.calendar-scope {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 1px 0 0;
    padding: 4px 10px 4px 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--navy);
    font-family: inherit;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    cursor: pointer;
}

/*
 * The global button rule paints a red fill on hover, which is right for an action button and
 * wrong for a heading that happens to be clickable. Every state is pinned back to transparent
 * so the title reads as a title.
 */
.calendar-scope:hover,
.calendar-scope:focus,
.calendar-scope:active,
.calendar-scope[aria-expanded="true"] {
    background: none;
}

.calendar-scope:hover { color: var(--red); }

.calendar-scope:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
}

.calendar-scope-chevron {
    flex-shrink: 0;
    color: var(--muted);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
}

.calendar-scope:hover .calendar-scope-chevron { color: var(--red); }
.calendar-scope[aria-expanded="true"] .calendar-scope-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .calendar-scope-chevron { transition: none; }
}

.calendar-day {
    min-height: 118px;
    padding: 8px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: white;
    overflow: hidden;
}

.calendar-day.is-muted {
    background: #fafafa;
}

.calendar-day.is-muted .calendar-date,
.calendar-day.is-muted .calendar-game {
    opacity: 0.45;
}

.calendar-day.is-today {
    box-shadow: inset 0 0 0 2px rgba(215,39,45,0.45);
}

.calendar-day.is-selected {
    background: #fff8f8;
}

.calendar-date {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 7px;
}

.calendar-date span {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
}

.calendar-day.is-today .calendar-date span {
    background: var(--red);
    color: white;
}

.calendar-games {
    display: grid;
    gap: 6px;
}

.calendar-game {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 2px 7px;
    align-items: center;
    padding: 7px 8px;
    border: 1px solid rgba(11,31,58,0.1);
    border-left: 3px solid var(--navy);
    border-radius: 6px;
    background: #f8fbff;
    color: var(--navy);
    text-decoration: none;
}

.calendar-game:hover {
    border-color: rgba(215,39,45,0.45);
    border-left-color: var(--red);
    background: white;
}

.calendar-game.active {
    border-color: var(--red);
    border-left-color: var(--red);
    background: var(--red);
    color: white;
}

.calendar-team-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    grid-row: span 2;
}

.calendar-opponent,
.calendar-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-opponent {
    font-size: 12px;
    font-weight: 700;
}

.calendar-opponent span {
    display: inline-block;
    min-width: 16px;
    color: inherit;
    opacity: 0.72;
}

.calendar-status {
    color: inherit;
    font-size: 11px;
    opacity: 0.76;
}

.calendar-status-compact { display: none; }

.matchup-team-logo {
    width: 108px;
    height: 108px;
    object-fit: contain;
    display: block;
    margin: 8px 0 12px;
    padding: 21px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.5);
}

.home-team .matchup-team-logo {
    margin-left: auto;
}

/* Green on a green wall disappears, so the matchup gets the same pale border the
   dashboard scoreboard uses to lift itself off the background. */
.matchup-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    background: linear-gradient(135deg, var(--green-deep), var(--green-dark) 55%, var(--green));
    border: 3px solid rgba(219, 231, 210, 0.75);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    color: white;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 14px 36px rgba(0,0,0,0.22);
}

.matchup-team {
    padding: 28px 32px;
}

.away-team { border-right: 1px solid rgba(255,255,255,0.1); }
.home-team { text-align: right; border-left: 1px solid rgba(255,255,255,0.1); }

.team-type {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: 4px;
}

.team-name {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 6px;
}

.team-record {
    font-size: 18px;
    font-weight: 700;
    opacity: 0.9;
}

.team-last10 {
    font-size: 13px;
    opacity: 0.7;
    margin-top: 4px;
}

.team-starter {
    font-size: 13px;
    margin-top: 10px;
    opacity: 0.85;
}

.starter-fip {
    font-size: 12px;
    opacity: 0.7;
    margin-left: 4px;
}

.starter-source,
.predicted-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 2px 7px;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
    vertical-align: middle;
}

.starter-source.predicted,
.predicted-box {
    background: var(--red);
    color: white;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
}

.starter-source.confirmed {
    color: #d1fae5;
    background: rgba(22, 101, 52, 0.65);
    border: 1px solid rgba(187, 247, 208, 0.24);
}

.prediction-note {
    margin: -4px 0 10px;
    color: var(--muted);
    font-size: 12px;
    font-style: italic;
}

.matchup-center-info {
    padding: 28px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.15);
}

.matchup-vs { font-size: 36px; font-weight: 900; opacity: 0.8; margin-bottom: 8px; }
.matchup-scoreline {
    font-size: 15px;
    font-weight: 800;
    color: white;
    margin-bottom: 6px;
}
.matchup-date { font-size: 13px; opacity: 0.75; }
.matchup-venue { font-size: 12px; opacity: 0.6; margin-top: 4px; }

/* ===== WIN PROBABILITY SECTION ===== */
.win-prob-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 20px;
    text-align: center;
}

.matchup-probability-card .win-prob-title { margin-bottom: 14px; }
.matchup-probability-card .numsox-reason { max-width: 760px; }
.matchup-probability-details {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.win-prob-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}

.win-prob-numbers {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.prob-team { font-size: 15px; font-weight: 700; color: var(--navy); flex: 1; }
.prob-team:last-child { text-align: right; }

.prob-pct {
    font-size: 32px;
    font-weight: 900;
    width: 70px;
    text-align: center;
}

.away-pct { color: var(--away-color); }
.home-pct { color: var(--home-color); }

.prob-bar-wrap { flex: 1; }

.prob-bar {
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--away-color) var(--away-pct),
        var(--home-color) var(--away-pct)
    );
}

.win-prob-confidence {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}

.main-reasons {
    text-align: left;
    max-width: 640px;
    margin: 16px auto 0;
    background: #f8f9fb;
    border-radius: 8px;
    padding: 14px 20px;
}
.reasons-title { font-weight: 700; margin-bottom: 8px; font-size: 13px; }
.main-reasons ol { margin: 0; padding-left: 18px; }
.main-reasons li { font-size: 14px; color: var(--text); margin-bottom: 4px; }

/* ===== NUMSOX MODEL ===== */
.win-prob-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}

.conf-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    background: #f3f4f6;
    color: #4b5563;
}
.conf-badge.conf-high { background: #dcfce7; color: #166534; }
.conf-badge.conf-medium { background: #fef3c7; color: #92400e; }
.conf-badge.conf-low { background: #fee2e2; color: #991b1b; }

.numsox-live-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    background: var(--red);
    color: #fff;
}

.coverage-note { font-size: 12px; color: var(--muted); }

/* What changed once the game started. */
.live-shift {
    max-width: 640px;
    margin: 12px auto 0;
    padding: 10px 16px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    font-size: 13px;
    color: #7c2d12;
    text-align: left;
}

.numsox-reason {
    max-width: 640px;
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    text-align: left;
}

.top-factors {
    text-align: left;
    max-width: 640px;
    margin: 16px auto 0;
    background: #f8f9fb;
    border-radius: 8px;
    padding: 14px 20px;
}

.factor-row { padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.factor-row:last-child { border-bottom: none; padding-bottom: 0; }

.factor-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 3px;
}

.factor-name { font-weight: 700; font-size: 13px; color: var(--navy); }

.factor-edge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.factor-weight { margin-left: auto; font-size: 11px; color: var(--muted); }
.factor-why { font-size: 13px; line-height: 1.5; color: var(--text); }

.breakdown-intro {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 12px;
}

.breakdown-table { width: 100%; }
.breakdown-table .cat-name { text-align: left; }
.breakdown-table .cat-weight { font-size: 12px; white-space: nowrap; }
.breakdown-table .cat-conf { font-size: 12px; color: var(--muted); }
.weight-effective { display: block; font-size: 10px; color: var(--muted); }

/* A category with no data behind it is dimmed, never hidden. */
tr.cat-unavailable td { color: var(--muted); font-style: italic; }
tr.cat-unavailable .cat-name { color: var(--muted); font-weight: 500; }
.edge-badge-none { background: #f3f4f6; color: #9ca3af; font-style: normal; }

.cat-detail { padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.cat-detail:last-child { border-bottom: none; }

.cat-detail-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.cat-detail-name { font-weight: 700; font-size: 13px; color: var(--navy); }
.cat-detail-weight { font-size: 11px; color: var(--muted); }
.cat-detail-conf { font-size: 11px; font-weight: 700; color: #9ca3af; }
.cat-detail-why { font-size: 13px; line-height: 1.55; color: var(--text); }

/* Every number carries where it came from, so nothing has to be taken on trust. */
.stat-provenance { list-style: none; padding: 0; margin: 8px 0 0; }
.stat-provenance li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
}
.prov-label { color: var(--muted); min-width: 190px; }
.prov-value { font-weight: 700; color: var(--navy); }
.prov-badge {
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: #f3f4f6;
    color: #9ca3af;
}
.prov-source { margin-left: auto; font-size: 10px; color: #9ca3af; }

.table-note {
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
    margin: 10px 0 0;
}

.glossary p { font-size: 13px; line-height: 1.55; margin-bottom: 8px; }
.glossary strong { color: var(--navy); }

@media (max-width: 700px) {
    .prov-label { min-width: 0; }
    .prov-source { margin-left: 0; flex-basis: 100%; }
    .factor-weight { margin-left: 0; }
}

/* ===== STRENGTHS & WEAKNESSES ===== */
.sw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.sw-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
}

.sw-header {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--border-light);
    color: var(--navy);
}

.away-header { border-bottom-color: var(--away-color); }
.home-header { border-bottom-color: var(--home-color); }
.weakness-header { margin-top: 16px; border-bottom-color: #fca5a5; color: var(--muted); }

.strength-list, .weakness-list { list-style: none; padding: 0; margin: 0; }
.strength-list li { padding: 6px 0; font-size: 13px; color: var(--text); }
.strength-list li::before { content: '+ '; color: var(--green); font-weight: 700; }
.weakness-list li { padding: 6px 0; font-size: 13px; color: var(--text); }
.weakness-list li::before { content: '− '; color: var(--red); font-weight: 700; }

/* ===== COMPARISON TABLE ===== */
.comparison-table th, .comparison-table td { text-align: center; }
.comparison-table .cat-name { font-weight: 600; color: var(--navy); }
.comparison-table .cat-away, .comparison-table .cat-home { font-size: 13px; }

tr.edge-away td.cat-away { font-weight: 700; color: var(--away-color); }
tr.edge-home td.cat-home { font-weight: 700; color: var(--home-color); }

.edge-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.edge-badge-away { background: #fee2e2; color: #991b1b; }
.edge-badge-home { background: #dbeafe; color: #1e40af; }
.edge-badge-even { background: #f3f4f6; color: #6b7280; }

/* ===== TWO-COL STATS ===== */
.two-col-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.stats-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
}

.stats-col-header {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-light);
    color: var(--navy);
}

.stats-col-header.away-header { border-bottom-color: var(--away-color); }
.stats-col-header.home-header { border-bottom-color: var(--home-color); }

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}
.stat-row:last-child { border-bottom: none; }

.sr-label { color: var(--muted); font-size: 13px; }
.sr-value { font-weight: 700; color: var(--navy); }

.pitcher-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 12px;
}

/* ===== EXPANDABLE SECTIONS ===== */
.stat-expander {
    border-top: 1px solid var(--border-light);
    margin-top: 8px;
    padding-top: 4px;
}

.stat-expander summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--red);
    padding: 8px 0;
    list-style: none;
    user-select: none;
}
.stat-expander summary::-webkit-details-marker { display: none; }
.stat-expander summary:hover { color: var(--red-dark); }

.stat-expander[open] summary { margin-bottom: 8px; }

.section-expander {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.section-expander-label {
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: var(--red);
    padding: 16px 20px;
    display: block;
    list-style: none;
    user-select: none;
    border-bottom: 1px solid var(--border-light);
}
.section-expander-label::-webkit-details-marker { display: none; }
.section-expander[open] .section-expander-label { background: #fff8f8; }
.section-expander[open] .stat-grid { padding: 16px 20px; }

/* ===== STAT EXPLANATION ===== */
.stat-explanation {
    background: #f8f9fb;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 8px;
}
.stat-explanation p {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.stat-explanation p:last-child { margin-bottom: 0; }

/* ===== BALLPARK ===== */
.ballpark-panel { border-top-color: var(--green); }
.ballpark-summary { font-size: 14px; color: var(--muted); margin-bottom: 14px; font-style: italic; }
.ballpark-meta { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.notable-features { font-size: 13px; color: var(--muted); margin-top: 8px; font-style: italic; }
.park-legend { font-size: 12px; color: var(--muted); margin-top: 10px; font-style: italic; }

.park-highlight-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.park-highlight-list div {
    background: #f8f9fb;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 13px;
    color: var(--text);
}

.fenway-card { border-top-color: var(--green); }

.park-factors-quick {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0;
}

.pf-block {
    background: #f4f6f8;
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
    min-width: 64px;
}

.pf-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
}

.pf-val.pf-high { color: var(--red); }
.pf-val.pf-low { color: var(--green); }

.pf-lbl { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; margin-top: 2px; }

.pf-item {
    background: #f4f6f8;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
}

.park-factors-grid { /* uses stat-row inside */ }

/* ===== PLAYER CARDS ===== */
.player-card {
    padding: 20px 24px;
    margin-bottom: 14px;
}

.player-card-compact { padding: 14px 20px; }

.player-card-header { margin-bottom: 14px; }

.player-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.player-number { font-size: 13px; color: var(--muted); font-weight: 600; }

.player-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
}

.player-position {
    background: var(--navy);
    color: white;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
}

.player-bats { font-size: 12px; color: var(--muted); }

.player-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

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

.ps-item {
    background: #f8f9fb;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.ps-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
}

.ps-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--navy);
}

/* ===== TABS ===== */
/* Tabs sit on the green wall, not inside a panel, so they need light type too. */
.tab-row {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 2px solid rgba(255,255,255,0.28);
    padding-bottom: 0;
}

.tab-link {
    font-size: clamp(14px, 0.2vw + 12px, 16px);
    font-weight: 650;
    color: rgba(255,255,255,0.78);
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    transition: all 0.15s;
    margin-bottom: -2px;
}

.tab-link:hover { color: #ffffff; background: rgba(255,255,255,0.14); }

.tab-link.tab-active {
    color: var(--navy);
    font-weight: 700;
    background: white;
    border-color: var(--border);
    border-bottom-color: white;
}

/* ===== SYNC TABLE ===== */
.sync-table td, .sync-table th { font-size: 13px; }
.sync-notes { max-width: 240px; color: var(--muted); font-size: 12px; }
.sync-note { font-size: 13px; color: var(--muted); margin-top: 14px; }

.sync-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== NOTES / GAME DETAIL ===== */
.note {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fbfcfe;
}

.tag {
    display: inline-block;
    background: var(--green);
    color: white;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
}

.empty-state {
    color: var(--muted);
    padding: 18px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    text-align: center;
}

/* ===== FORMS ===== */
.filters, .note-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    align-items: end;
}

label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    font-size: 13px;
    gap: 5px;
    color: var(--muted);
}

input, select, textarea {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--navy);
}

textarea { min-height: 100px; resize: vertical; }

/* ===== DATA FRESHNESS ===== */
.data-freshness {
    font-size: 12px;
    color: var(--muted);
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .topbar { height: auto; padding: 12px 16px; flex-direction: column; gap: 8px; }
    .topbar-links { justify-content: center; }
    .brand-logo { width: 118px; height: 32px; }
    .matchup-calendar {
        overflow: hidden;
        padding: 14px;
    }
    .calendar-toolbar {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
    }
    .calendar-scroll {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .calendar-weekdays,
    .calendar-viewport {
        width: 100%;
        min-width: 0;
    }
    .calendar-day {
        min-height: 106px;
    }
    .calendar-game {
        padding: 6px;
    }
    .featured-team-logo {
        width: 68px;
        height: 68px;
        padding: 14px;
    }
    .matchup-team-logo {
        width: 82px;
        height: 82px;
        padding: 16px;
    }
    .home-team .matchup-team-logo {
        margin-left: 0;
    }
    .game-detail-matchup {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
    }
    .game-detail-logo,
    .team-stats-logo {
        width: 64px;
        height: 64px;
    }
    .team-stats-title {
        align-items: flex-start;
        flex-direction: column;
    }
    .today-hero { --hero-radius: 14px; padding: 22px 0 0; }
    /* The header keeps its single left-aligned structure here; only the gap tightens. */
    .today-hero-top { gap: 8px 10px; }
    .matchup-strip {
        grid-template-columns: minmax(0, 1fr) minmax(54px, 0.28fr) minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }
    .matchup-side.home { text-align: right; }
    .matchup-center { align-items: center; text-align: center; }
    .matchup-side-name { font-size: clamp(20px, 6.5vw, 32px); }
    .matchup-side-record { font-size: 12px; }
    .matchup-side-score { font-size: clamp(30px, 9vw, 46px); }
    .matchup-at-symbol { font-size: clamp(30px, 8vw, 44px); }
    .matchup-meta { font-size: 11px; max-width: 92px; }
    .hero-intel-grid { grid-template-columns: 1fr; }
    .monster-board { overflow-x: auto; }
    .monster-title { letter-spacing: 0.32em; }
    .monster-grid {
        grid-template-columns: minmax(18px, .26fr) minmax(50px, 1fr) repeat(var(--innings, 10), minmax(13px, .36fr)) repeat(3, minmax(16px, .28fr));
        grid-auto-rows: 18px;
        gap: 2px;
    }
    .monster-cell { min-height: 18px; font-size: clamp(9px, 2.15vw, 12px); }
    .monster-label, .inning-num { font-size: clamp(8px, 1.9vw, 11px); }
    .monster-cell.team-name.boston { font-size: clamp(9px, 2vw, 12px); }
    /* Batter, frame and pitcher stay on one line at every width; they shrink and wrap
       inside their own column rather than stacking into a list. */
    .monster-status { gap: 6px; }
    .monster-status > div { gap: 4px; min-width: 0; }
    .monster-status > div span { font-size: clamp(8px, 1.8vw, 10px); }
    .monster-status strong {
        font-size: clamp(9px, 1.9vw, 11px);
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .matchup-header { grid-template-columns: 1fr; }
    .home-team { text-align: left; }
    .sw-grid, .two-col-stats { grid-template-columns: 1fr; }
    .win-prob-numbers { flex-direction: column; }
    .matchup-probability-card { padding: 22px 18px; }
    .matchup-probability-card .win-prob-numbers {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            'away-team home-team'
            'away-pct home-pct'
            'prob-bar prob-bar';
        gap: 4px 12px;
    }
    .matchup-probability-card .prob-team:not(.right-align) {
        grid-area: away-team;
        text-align: left;
    }
    .matchup-probability-card .prob-team.right-align {
        grid-area: home-team;
        text-align: right;
    }
    .matchup-probability-card .away-pct { grid-area: away-pct; text-align: left; }
    .matchup-probability-card .home-pct { grid-area: home-pct; text-align: right; }
    .matchup-probability-card .prob-bar-wrap { grid-area: prob-bar; width: 100%; margin-top: 5px; }
    .matchup-probability-card .prob-pct { width: auto; }
    .stat-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .page-content { width: calc(100% - 24px); margin: 16px auto; }
}

/* ===== STANDINGS DATE SCRUBBER & TIMELAPSE ===== */
/* Built as a control panel bolted to the wall rather than another white card, so it reads
   as an instrument for the standings below instead of competing with them. */
.standings-console {
    margin-bottom: 14px;
    padding: clamp(12px, 1vw, 18px) clamp(14px, 1.2vw, 22px);
    border: 2px solid rgba(255,255,255,0.22);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(32,47,42,0.72) 0%, rgba(32,47,42,0.52) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 22px rgba(0,0,0,0.18);
}

/* Arrows hug the date as one control rather than drifting to the panel edges. */
.scrub-row {
    display: grid;
    grid-template-columns: auto minmax(0, 300px) auto;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 1.4vw, 24px);
}

.scrub-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(38px, 2.6vw, 46px);
    height: clamp(38px, 2.6vw, 46px);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.26);
    background: rgba(255,255,255,0.07);
    color: #ffffff;
    font-size: clamp(20px, 1.4vw, 26px);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.14s ease, border-color 0.18s ease;
}

.scrub-arrow:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.5);
    text-decoration: none;
    transform: translateY(-1px);
}

.scrub-arrow:active { transform: translateY(0) scale(0.94); }

/* On the latest day there is nowhere forward to go. */
.scrub-arrow.is-disabled {
    opacity: 0.28;
    pointer-events: none;
    cursor: default;
}

.scrub-date { text-align: center; min-width: 0; }

.scrub-date-main {
    color: #ffffff;
    font-size: clamp(17px, 1.25vw, 24px);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.scrub-date-sub {
    color: rgba(255,255,255,0.58);
    font-size: clamp(11px, 0.22vw + 9.4px, 13px);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-top: 2px;
}

.timelapse-row {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.9vw, 14px);
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,0.16);
}

.tl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: none;
    border-radius: 999px;
    background: var(--red);
    color: #ffffff;
    font-size: clamp(13px, 0.18vw + 11px, 15px);
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, transform 0.14s ease, box-shadow 0.18s ease;
    box-shadow: 0 3px 10px rgba(215,39,45,0.4);
}

.tl-btn:hover { background: var(--red-dark); transform: translateY(-1px); }
.tl-btn:active { transform: translateY(0) scale(0.97); }

.tl-btn.is-playing {
    background: var(--green-light);
    color: var(--green-deep);
    box-shadow: 0 3px 10px rgba(0,0,0,0.28);
}

.tl-icon { font-size: 11px; line-height: 1; }

.tl-ghost {
    padding: 9px 13px;
    background: rgba(255,255,255,0.09);
    color: #ffffff;
    font-size: 16px;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.2);
}

.tl-ghost:hover { background: rgba(255,255,255,0.18); }

/* Season scrubber: a recessed track to echo the scoreboard slots. */
.tl-progress {
    flex: 1 1 auto;
    min-width: 80px;
    height: 8px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: rgba(0,0,0,0.42);
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.5);
    cursor: pointer;
}

.tl-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--red);
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    cursor: grab;
}

.tl-progress::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--red);
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    cursor: grab;
}

.tl-speeds {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.14);
}

.tl-speeds-label {
    color: rgba(255,255,255,0.5);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 5px 0 7px;
    text-align: right;
    white-space: nowrap;
}

.tl-speed {
    min-width: 30px;
    padding: 5px 8px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255,255,255,0.66);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.tl-speed:hover { background: rgba(255,255,255,0.12); color: #ffffff; }

.tl-speed.is-active {
    background: #ffffff;
    color: var(--green-deep);
}

.tl-note {
    margin-top: 9px;
    color: rgba(255,255,255,0.5);
    font-size: clamp(10.5px, 0.16vw + 9.2px, 12px);
    font-style: italic;
}

@media (max-width: 768px) {
    .timelapse-row { flex-wrap: wrap; }
    .tl-progress { order: 3; flex-basis: 100%; }
}

/* ===== STANDINGS ===== */
.standings-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.league-box {
    border-radius: 14px;
    border: 2px solid var(--border);
    background: var(--card);
    overflow: hidden;
}

/* The league tint is nearly transparent, so it needs the card colour underneath it.
   Without that base the green wall shows through and the standings type loses contrast. */
.league-box.league-al {
    border-color: var(--navy);
    background:
        linear-gradient(180deg, rgba(11,31,58,0.06) 0%, rgba(11,31,58,0.015) 140px),
        var(--card);
}

.league-box.league-nl {
    border-color: var(--red);
    background:
        linear-gradient(180deg, rgba(215,39,45,0.06) 0%, rgba(215,39,45,0.015) 140px),
        var(--card);
}

.league-box-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: white;
    padding: 10px 16px;
}

.league-al .league-box-title { background: var(--navy); }
.league-nl .league-box-title { background: var(--red); }

.division-block { padding: 14px 14px 4px; }

.division-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 6px 2px 8px;
}

.standings-table-wrap { overflow-x: auto; margin-bottom: 12px; }

.standings-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.standings-table th, .standings-table td {
    padding: 7px 8px;
    white-space: nowrap;
}

.standings-table th {
    font-size: 10.5px;
}

.standings-table td.tag-col, .standings-table th.tag-col { padding: 0; width: 46px; }

.standings-team {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--text);
}

.standings-team .table-team-logo { width: 20px; height: 20px; }

.standings-redsox td { background: var(--green); color: #ffffff; font-weight: 700; }
.standings-redsox .standings-team { color: #ffffff; }

.diff-pos { color: var(--green); font-weight: 700; }
.diff-neg { color: var(--red); font-weight: 700; }

/* Sideways bookmark tag: a ribbon tab pinned to the left edge of the row. */
.standings-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 42px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0;
    padding-right: 6px;
    box-sizing: border-box;
    clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
}

/* Division leader - shiny gold: glossy gradient + highlight + soft glow. */
.tag-div-leader {
    background: linear-gradient(135deg, #fff6cf 0%, #ffd700 30%, #d4a900 68%, #ffe680 100%);
    box-shadow: 0 1px 5px rgba(212,169,0,0.55), inset 0 1px 0 rgba(255,255,255,0.75);
    color: #4a3900;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* Wild card ranks - matte, flat, no gloss. */
.tag-wc-1 { background: #b8860b; color: #fff3d6; }
.tag-wc-2 { background: #a3a3a8; color: #26262a; }
.tag-wc-3 { background: #a5672a; color: #ffe9d1; }

/* ============================================================================
   MOBILE
   ----------------------------------------------------------------------------
   Everything below is either touch-only or inside a width media query, so the
   desktop rendering is untouched. Two breakpoints are used:

     <= 768px   phones and small tablets
     <= 520px   phones proper, where three columns of text stop fitting

   The pages are readable at 320px and scroll horizontally nowhere except inside
   containers that opt into it, such as wide stat tables. The matchup calendar
   keeps all seven days visible and becomes more compact instead of scrolling.
   ============================================================================ */

/* Touch-only, no effect on a mouse: kills the 300ms tap delay and stops iOS
   inflating text in landscape. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

a, button, input, select, summary, [role="button"] {
    touch-action: manipulation;
}

/* A horizontally scrollable region. Inert until the mobile query turns it on, so
   desktop layout is unaffected by the wrapper existing. */
.table-scroll { position: relative; }

@media (max-width: 768px) {

    /* ---- page shell ---- */
    body { overflow-x: hidden; }

    /* Respect the notch on phones that have one. */
    .page-content {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    /* ---- navigation ---- */
    /* Wrap to two rows rather than scroll: every destination stays visible, and
       each one gets a real 44px touch target. */
    /* One row rather than three: the logo sits on the left and the destinations
       scroll beside it. That cuts the bar from about 103px to roughly 50 while
       leaving every link a 40px target. It also slides out of the way going down
       the page and returns the moment you scroll up. */
    .topbar {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        min-height: 0;
        transition: transform 0.26s ease;
        will-change: transform;
    }

    .topbar.is-tucked { transform: translateY(-100%); }

    .topbar-brand {
        flex: 0 0 auto;
        min-height: 40px;
        align-items: center;
    }

    .brand-logo { width: 78px; height: 22px; }

    .topbar-links {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0 1px;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .topbar-links::-webkit-scrollbar { display: none; }

    .topbar-links a {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        border-radius: 999px;
    }

    .topbar-links a.active { box-shadow: 0 2px 7px rgba(215,39,45,0.4); }

    /* ---- wide tables ---- */
    /* Stat tables keep every column; the container scrolls instead of the page,
       and the fade tells you there is more to the right. */
    .table-scroll,
    .standings-table-wrap,
    .bx-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .table-scroll::after,
    .standings-table-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 26px;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.92));
    }

    .standings-table-wrap { position: relative; }

    .table-scroll table { min-width: 560px; }

    /* Roomier rows: a fingertip is not a cursor. */
    th, td { padding: 11px 10px; }

    /* ---- forms ---- */
    /* iOS zooms the page when a focused field is under 16px, which then leaves the
       layout scrolled sideways. Keeping fields at 16px avoids it entirely. */
    input, select, textarea {
        font-size: 16px;
        min-height: 44px;
    }

    .filters { flex-direction: column; align-items: stretch; gap: 12px; }
    .filters label { width: 100%; }
    .filters input, .filters select { width: 100%; }

    button, .button {
        min-height: 44px;
        padding: 11px 18px;
    }

    .sync-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .sync-actions form { width: 100%; }
    .sync-actions button { width: 100%; }

    /* ---- scoreboard ---- */
    /* Shrinking the board to fit a phone drove the digits to 8px. It scrolls
       sideways instead, at a size that can actually be read. */
    .monster-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .monster-grid {
        grid-template-columns:
            minmax(22px, .3fr) minmax(58px, 1.1fr)
            repeat(var(--innings, 10), minmax(22px, .42fr))
            repeat(3, minmax(24px, .34fr));
        grid-auto-rows: 26px;
        gap: 2px;
    }

    .monster-cell { min-height: 26px; font-size: 13px; }
    .monster-label, .inning-num { font-size: 11px; }
    .monster-cell.team-name.boston { font-size: 13px; }
    .monster-title { font-size: 13px; letter-spacing: 0.3em; }

    /* ---- gamecast ---- */
    .gamecast-panel { max-height: 60vh; }
    .gamecast-tabs { flex-wrap: wrap; }
    .gamecast-tab { min-height: 40px; }
    .bx-table { min-width: 430px; }
    .play-desc { font-size: 12.5px; }

    /* ---- standings console ---- */
    .scrub-arrow { width: 44px; height: 44px; }
    .tl-btn { min-height: 44px; }
    .tl-speed { min-height: 34px; min-width: 34px; }
    .tl-progress { height: 12px; }
    .tl-progress::-webkit-slider-thumb { width: 24px; height: 24px; }
    .tl-progress::-moz-range-thumb { width: 24px; height: 24px; }

    /* ---- matchup center ---- */
    .calendar-scroll,
    .calendar-viewport,
    .calendar-weekdays,
    .calendar-track,
    .calendar-week,
    .calendar-games {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }
    .calendar-scroll::after { display: none; }
    .calendar-week,
    .calendar-weekdays {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .calendar-day { min-width: 0; min-height: 92px; }
    .calendar-game { min-height: 40px; }
    .calendar-nav a, .calendar-nav button { min-height: 44px; }

    .matchup-header { grid-template-columns: 1fr; }
    .away-team, .home-team { border: none; text-align: left; }
    .home-team { border-top: 1px solid rgba(255,255,255,0.14); }
    .matchup-center-info { border-block: 1px solid rgba(255,255,255,0.14); padding: 18px; }

    /* Small badges were sitting at 10px, below the point they read cleanly. */
    .starter-source, .predicted-box, .badge { font-size: 11px; }

    /* Links inside table rows were 26px tall, so the tap target was the text
       rather than the row. They now fill the cell. */
    .team-link {
        display: flex;
        min-height: 40px;
        align-items: center;
    }

    /* Team chips on Team Stats, and the timelapse speed buttons. */
    .selector-links a { min-height: 40px; padding: 6px 13px; }
    .tl-speed { min-height: 40px; min-width: 40px; }
    .tab-link { min-height: 44px; display: inline-flex; align-items: center; }

    /* Four tabs do not fit across a 320px screen, so the row scrolls rather than
       pushing the page sideways. */
    .tab-row {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        flex-wrap: nowrap;
    }

    .tab-link { flex: 0 0 auto; white-space: nowrap; }
    .gamecast-toggle { min-height: 48px; }

    /* The smallest labels on the board and the standings ribbons. The ribbons are
       three capitals inside a 42px bookmark, so 10px is as large as they go
       without redrawing the tag itself. */
    .count-label { font-size: 11.5px; }
    .standings-tag { font-size: 10px; }

    /* An inline link in a sentence still needs a tappable box around it. */
    .data-freshness a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 8px;
    }
}

@media (max-width: 520px) {

    .matchup-calendar.panel {
        padding: 14px 8px;
        border-radius: 8px;
    }

    .calendar-toolbar {
        gap: 12px;
        margin-bottom: 12px;
        padding-inline: 4px;
    }

    .calendar-scope,
    .calendar-toolbar h2 {
        font-size: 19px;
        letter-spacing: 0;
    }

    .calendar-nav {
        width: 100%;
    }

    .calendar-nav a {
        height: 42px;
        min-height: 42px;
        min-width: 42px;
        padding-inline: 11px;
    }

    .calendar-weekdays span {
        padding: 7px 0;
        font-size: 0;
    }

    .calendar-weekdays span::after {
        font-size: 10px;
    }

    .calendar-weekdays span:nth-child(1)::after { content: 'S'; }
    .calendar-weekdays span:nth-child(2)::after { content: 'M'; }
    .calendar-weekdays span:nth-child(3)::after { content: 'T'; }
    .calendar-weekdays span:nth-child(4)::after { content: 'W'; }
    .calendar-weekdays span:nth-child(5)::after { content: 'T'; }
    .calendar-weekdays span:nth-child(6)::after { content: 'F'; }
    .calendar-weekdays span:nth-child(7)::after { content: 'S'; }

    .calendar-day {
        min-height: 82px;
        padding: 4px 2px;
    }

    .calendar-date {
        justify-content: center;
        margin-bottom: 3px;
    }

    .calendar-date span {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .calendar-games { gap: 3px; }

    .calendar-game {
        display: flex;
        min-width: 0;
        min-height: 51px;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        padding: 3px 1px;
        border-left-width: 2px;
        border-radius: 4px;
        text-align: center;
    }

    .calendar-team-logo {
        width: 21px;
        height: 21px;
        flex: 0 0 auto;
        grid-row: auto;
    }

    .calendar-opponent {
        max-width: 100%;
        font-size: 9px;
        line-height: 1;
    }

    .calendar-opponent span { min-width: 0; }
    .calendar-opponent strong { display: none; }
    .calendar-status-full { display: none; }

    .calendar-status-compact {
        display: block;
        max-width: 100%;
        font-size: 8.5px;
        font-weight: 700;
        line-height: 1.1;
    }

    .probability-panel,
    .park-intel-panel { padding: 16px 14px; }

    .probability-panel .win-prob-bar-wrap {
        display: grid;
        grid-template-columns: auto minmax(54px, 1fr) auto;
        gap: 8px;
    }

    .probability-panel .win-prob-label {
        gap: 3px;
        font-size: 12px;
    }

    .probability-explanation { font-size: 13.5px; }

    .probability-category > summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .probability-category-meta { text-align: left; }
    .probability-category-comparison { grid-template-columns: 1fr; }

    .park-factors-quick.compact {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .park-factors-quick.compact .pf-block { min-width: 0; }

    /* Three names across stops fitting on a phone, so batter, frame and pitcher
       stack. Above this width they stay on one line, as on desktop. */
    .monster-status {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .monster-status .status-mid,
    .monster-status .status-right { justify-content: flex-start; }
    .monster-status > div span { font-size: 10.5px; }
    .monster-status strong { font-size: 12.5px; }

    /* The club name was breaking mid-word ("Athletic / s") in a column this
       narrow, so it comes down a size and is allowed to sit on two lines. */
    .matchup-side-name {
        font-size: clamp(15px, 5vw, 21px);
        overflow-wrap: normal;
        hyphens: none;
    }

    /* The score is a grid column now, so it just needs a tighter gutter here rather
       than the percentage offsets the old absolute positioning used. */
    .matchup-side { column-gap: 6px; }

    .matchup-side-record { font-size: 11.5px; }
    .matchup-side-score { font-size: clamp(26px, 9vw, 38px); }
    .matchup-strip { padding: 14px 10px; gap: 8px; }
    .matchup-at-symbol { font-size: 26px; }
    .matchup-meta { font-size: 10.5px; max-width: none; }

    .featured-team-logo { width: 62px; height: 62px; }

    /* Stat cards two-up rather than four-up. */
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

    .hero-intel-grid { grid-template-columns: 1fr; }
    .park-factors-quick, .calibration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .today-hero { padding: 16px 0 0; }
    .panel { padding: 16px 14px; }

    .section-header { letter-spacing: 0.06em; }

    /* Roster and player cards go single file. */
    .roster-grid, .two-col-stats, .sw-grid { grid-template-columns: 1fr; }

    /* The games list on the dashboard gets more of the screen. */
    .games-scroll { max-height: 62vh; }

    /* The dark header above the board was taking a third of the first screen. The
       label and the status pill share one line and the padding comes down, so the
       Monster is what you see when the site opens. */
    .today-hero { padding: 10px 0 0; }

    .today-hero-top {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
        padding-inline: 12px;
        margin-bottom: 8px;
    }

    .today-hero-top .hero-label {
        min-width: 0;
        font-size: 10.5px;
        letter-spacing: 0.1em;
        white-space: normal;
    }

    .hero-when {
        font-size: 10px;
        line-height: 1.35;
    }

    /* Stays beside its label rather than being pushed to the opposite edge. */
    .live-pill {
        min-width: 0;
        padding: 5px 14px;
        font-size: 11.5px;
        border-width: 2px;
    }

    /* Every inning plus R, H and E on one line, no sideways scrolling. The board
       stops sizing itself to its content and divides the width it has instead, so
       the columns simply get narrower as innings are added. The decorative
       pitcher-number column gives up its space to buy room for the rest. */
    .monster-board { overflow-x: hidden; padding: 8px 6px; }

    .monster-grid {
        min-width: 0;
        grid-template-columns:
            minmax(48px, 1.4fr)
            repeat(var(--innings, 10), minmax(0, 1fr))
            repeat(3, minmax(0, 1.1fr));
        gap: 1.5px;
    }

    .monster-label,
    .pitcher-slot { display: none; }

    /* Digits scale with the column so they still fit once a game goes to extras. */
    .monster-cell { font-size: clamp(9px, 3vw, 13px); padding: 0; }
    .monster-label, .inning-num { font-size: clamp(8px, 2.5vw, 11px); }
    /* Wide enough for BOSTON without clipping it to BOST. */
    .monster-cell.team-name {
        padding-left: 3px;
        padding-right: 2px;
        font-size: clamp(8.5px, 2.6vw, 11.5px);
        letter-spacing: -0.02em;
    }
    .monster-cell.team-name.boston { font-size: clamp(8.5px, 2.6vw, 11.5px); }
}

/* Final dashboard action shape: one connected capsule centered under the matchup.
   The outside ends are rounded; the shared middle edge is perfectly flat. */
.today-hero > .hero-actions {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 24px auto 28px;
    padding: 0;
}

.today-hero > .hero-actions > .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    box-sizing: border-box;
    height: 52px;
    min-height: 52px;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0 clamp(20px, 3vw, 34px);
    box-shadow: none;
    line-height: 1;
    white-space: nowrap;
    transform: none;
}

.today-hero > .hero-actions > .button:first-child {
    border-radius: var(--hero-radius) 0 0 var(--hero-radius);
}

.today-hero > .hero-actions > .button:last-child {
    border-radius: 0 var(--hero-radius) var(--hero-radius) 0;
}

.today-hero > .hero-actions > .button.secondary:hover {
    background: #46695b;
}

@media (max-width: 520px) {
    .today-hero > .hero-actions {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        margin: 18px auto 22px;
    }

    .today-hero > .hero-actions > .button {
        flex: 1 1 50%;
        min-width: 0;
        height: 48px;
        min-height: 48px;
        padding-inline: clamp(12px, 4vw, 18px);
        font-size: clamp(12px, 3.6vw, 14px);
    }
}