/* MLB Game Detail — /mlb/game/<slug>
   Scoped under #mlb-game-detail so nothing leaks into the schedule / workbench.
   Sections: shared layout, matchup header, injuries, lineups, props, weather (wx-*). */

/* Isolated container — sits inside .main-content (horizontal flex)
   but we force it to be a full-width vertical stack with tight gaps. */
#mlb-game-detail {
  flex: 1 1 auto;
  min-width: 0;
  padding: 16px 20px 32px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#mlb-game-detail * { box-sizing: border-box; }
#mlb-game-detail h3, #mlb-game-detail p { margin: 0; }

/* ─── Live-tracker design tokens (from mlb-demo.html) ───
   Declared on both the page container AND .pbr-modal — the detail modal lives
   on document.body, outside #mlb-game-detail, so it needs its own copy. */
#mlb-game-detail, .pbr-modal, .pbt-overlay {
  --gd-surface: #0B0C10;
  --gd-surface-2: #12141A;
  --gd-surface-3: #191C24;
  --gd-line: rgba(255, 255, 255, .07);
  --gd-line-strong: rgba(255, 255, 255, .12);
  --gd-text: #F4F5F7;
  --gd-text-2: #9298A6;
  --gd-text-3: #565D6B;
  --gd-ball: #3DDC84;
  --gd-strike: #FF5C5C;
  --gd-inplay: #5AA9FF;
  --gd-live: #FF3B47;
  --gd-radius: 14px;
  --gd-font-body: 'Inter', system-ui, sans-serif;
  --gd-font-display: 'Barlow Condensed', 'Avenir', sans-serif;
  --gd-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}
/* The tracker surfaces read in Inter 400 like the demo — the site body stack
   ("Avenir", weight 200) would otherwise leak in on macOS/iOS. Scoped to the
   new surfaces so the Overview/Props/Weather tabs keep their existing look. */
.mlb-gd-topbar, .mlb-gd-sb, #mlb-pbp-root, .pbr-modal, .pbt-overlay {
  font-family: var(--gd-font-body);
  font-weight: 400;
}

/* ─── Tabs (underline row, demo style) ─── */
#mlb-game-detail .mlb-gd-tabs {
  display: flex;
  gap: 4px;
  margin: 2px 0 0;
  padding: 0;
  border-bottom: 1px solid var(--gd-line);
}
#mlb-game-detail .mlb-gd-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 15px 16px 7px;
  font-family: var(--gd-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--gd-text-2);
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color .15s ease;
}
#mlb-game-detail .mlb-gd-tab:hover { color: var(--gd-text); }
/* Selected tab = TEAL + BOLD, no underline. The transparent border-bottom is
   kept (never coloured) purely so the row's geometry is identical whichever tab
   is active — removing the border outright would shift every tab by 2px. */
#mlb-game-detail .mlb-gd-tab.is-active {
  color: rgb(var(--theme-accent-rgb, 0, 211, 189));
  font-weight: 700;
  border-bottom-color: transparent;
}
.mlb-gd-tdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gd-live);
  animation: mlbGdPulse 1.6s ease-in-out infinite;
}
#mlb-game-detail .mlb-gd-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#mlb-game-detail .mlb-gd-tab-panel[hidden] { display: none; }

/* Panel loading state: center the spinner in the empty content area below
   the tabs instead of hugging them (the header+tabs take ~260px; fill the
   rest of the viewport and center within it). */
#mlb-game-detail .mlb-gd-tab-panel > .loader-wrapper {
  min-height: calc(100vh - 340px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Section cards ─── */
#mlb-game-detail .mlb-gd-card {
  padding: 14px 16px;
  margin: 0;
  background: var(--gd-surface);
  border: 1px solid var(--gd-line);
  border-radius: 10px;
}

/* ─── Topbar (back link + venue meta) ─── */
.mlb-gd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 0;
}
.mlb-gd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 0;
  background: transparent;
  border: none;
  /* Teal + 700, matching the home-run-results "← Schedule" link and the
     schedule's own accent affordances — every "go somewhere" link in the MLB
     surfaces is one colour. The --theme-accent-rgb token, not a re-picked hex.
     The arrow is an inline <svg> using currentColor, so it follows the text. */
  color: rgba(var(--theme-accent-rgb, 0, 211, 189), .9);
  font-family: var(--gd-font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s ease;
}
.mlb-gd-back:hover {
  color: rgb(var(--theme-accent-rgb, 0, 211, 189));
  background: transparent;
}
.mlb-gd-back svg { flex: none; }
.mlb-gd-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gd-font-mono);
  font-size: 11px;
  color: var(--gd-text-3);
  letter-spacing: .04em;
  min-width: 0;
  text-align: right;
}
.mlb-gd-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gd-text-3); flex: none; }

/* ─── Scoreboard card ─── */
.mlb-gd-sb {
  background: linear-gradient(180deg, var(--gd-surface-2), var(--gd-surface));
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius);
  overflow: hidden;
}
.mlb-gd-sb-main {
  display: grid;
  grid-template-columns: 1fr minmax(220px, auto) 1fr;
  align-items: center;
  padding: 28px 36px 24px;
  gap: 24px;
}
.mlb-gd-team { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mlb-gd-team-away { justify-content: flex-start; }
.mlb-gd-team-home { justify-content: flex-end; flex-direction: row-reverse; }
.mlb-gd-team-logo { width: 54px; height: 54px; object-fit: contain; flex: none; }
.mlb-gd-team-nick { display: none; }
.mlb-gd-team-info { min-width: 0; }
.mlb-gd-team-home .mlb-gd-team-info { text-align: right; }
.mlb-gd-team-code {
  font-family: var(--gd-font-display);
  font-size: 26px; font-weight: 700;
  letter-spacing: .04em; line-height: 1;
  color: var(--gd-text);
}
.mlb-gd-team-name { font-size: 12px; color: var(--gd-text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlb-gd-team-score {
  font-family: var(--gd-font-display);
  font-weight: 700;
  font-size: 64px; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-left: auto; padding-left: 20px;
  color: var(--gd-text);
}
.mlb-gd-team-home .mlb-gd-team-score { margin-left: 0; margin-right: auto; padding-left: 0; padding-right: 20px; }
.mlb-gd-team-score.trailing { color: var(--gd-text-3); }
.mlb-gd-team-score[hidden] { display: none; }

/* center game-state module (pregame: start time · live: chip/inning/bases/count) */
.mlb-gd-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 12px;
}
.mlb-gd-when-time {
  font-family: var(--gd-font-display);
  font-size: 22px; font-weight: 600; letter-spacing: .08em;
  color: var(--gd-text); line-height: 1;
}
.mlb-gd-when-date {
  font-family: var(--gd-font-mono);
  font-size: 11px; color: var(--gd-text-2); letter-spacing: .04em;
}
.mlb-gd-live-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--gd-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  color: var(--gd-live);
  border: 1px solid rgba(255, 59, 71, .35);
  background: rgba(255, 59, 71, .08);
  padding: 4px 10px; border-radius: 99px;
}
.mlb-gd-final-chip {
  display: inline-flex; align-items: center;
  font-family: var(--gd-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  color: var(--gd-text-2);
  border: 1px solid var(--gd-line-strong);
  background: rgba(255, 255, 255, .04);
  padding: 4px 10px; border-radius: 99px;
}
.mlb-gd-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gd-live);
  animation: mlbGdPulse 1.6s ease-in-out infinite;
}
@keyframes mlbGdPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 59, 71, .5); }
  50% { opacity: .55; box-shadow: 0 0 0 5px rgba(255, 59, 71, 0); }
}
.mlb-gd-inning {
  font-family: var(--gd-font-display);
  font-weight: 600; font-size: 17px; letter-spacing: .16em;
  color: var(--gd-text);
  display: flex; align-items: center; gap: 7px;
}
.mlb-gd-inning svg { flex: none; }
.mlb-gd-basecount { display: flex; align-items: center; gap: 18px; }
.mlb-gd-bases { flex: none; }
.mlb-gd-count-col { display: flex; flex-direction: column; gap: 6px; }
.mlb-gd-count-row { display: flex; align-items: center; gap: 6px; }
.mlb-gd-count-label {
  font-family: var(--gd-font-mono);
  font-size: 10px; font-weight: 600;
  color: var(--gd-text-3); width: 12px; letter-spacing: .05em;
}
.mlb-gd-pip { width: 9px; height: 9px; border-radius: 50%; background: var(--gd-surface-3); border: 1px solid var(--gd-line-strong); }
.mlb-gd-pip.ball { background: var(--gd-ball); border-color: var(--gd-ball); }
.mlb-gd-pip.strike { background: var(--gd-strike); border-color: var(--gd-strike); }
.mlb-gd-pip.out { background: var(--gd-text-2); border-color: var(--gd-text-2); }

/* line score (built from the PA feed by the PBP module) */
.mlb-gd-linescore {
  border-top: 1px solid var(--gd-line);
  background: rgba(255, 255, 255, .012);
  padding: 12px 36px 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mlb-gd-linescore::-webkit-scrollbar { display: none; }
.mlb-gd-linescore[hidden] { display: none; }
.mlb-gd-linescore table {
  width: 100%; border-collapse: collapse;
  font-family: var(--gd-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mlb-gd-linescore th {
  font-weight: 500; color: var(--gd-text-3); font-size: 10px; letter-spacing: .08em;
  padding: 4px 0; text-align: center; min-width: 28px;
}
.mlb-gd-linescore th:first-child { text-align: left; min-width: 60px; }
.mlb-gd-linescore td { padding: 5px 0; text-align: center; color: var(--gd-text-2); }
.mlb-gd-linescore td:first-child {
  text-align: left; font-family: var(--gd-font-body); font-weight: 600;
  font-size: 12px; color: var(--gd-text); white-space: nowrap;
}
.mlb-gd-linescore td.current { color: var(--gd-text); background: rgba(255, 255, 255, .045); border-radius: 4px; }
.mlb-gd-linescore .rhe { color: var(--gd-text); font-weight: 600; }
.mlb-gd-linescore .sep { border-left: 1px solid var(--gd-line); }
.mlb-gd-ls-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
/* replay challenges remaining (diamond pips after the team code) */
.mlb-gd-ls-chal { margin-left: 7px; font-size: 8px; color: #F4D03F; letter-spacing: 2px; vertical-align: 1px; }
/* ─── Starting pitchers (Overview tab) ─── */
.mlb-gd-sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mlb-gd-sp-card {
  padding: 16px;
  background: var(--gd-surface);
  border: 1px solid var(--gd-line);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 14px;
}
.mlb-gd-sp-top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.mlb-gd-sp-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(255,255,255,.06);
}
.mlb-gd-sp-avatar.is-fallback { object-fit: contain; padding: 8px; }
.mlb-gd-sp-head { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mlb-gd-sp-team-tag {
  display: flex; align-items: center; gap: 6px;
  font-size: .65rem; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.mlb-gd-sp-team-logo { width: 16px; height: 16px; object-fit: contain; }
.mlb-gd-sp-name {
  font-size: 1.25rem; font-weight: 700; color: #f8fafc;
  line-height: 1.15; letter-spacing: -.01em;
  text-decoration: none;
}
.mlb-gd-sp-name:hover { color: #67e8f9; text-decoration: underline; }
.mlb-gd-sp-chips { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.mlb-gd-sp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: .65rem; font-weight: 700;
  border-radius: 6px;
  text-transform: uppercase; letter-spacing: .06em;
}
.mlb-gd-sp-chip-hand {
  background: rgba(239,68,68,.12); color: #fca5a5;
  border: 1px solid rgba(239,68,68,.28);
}
.mlb-gd-sp-chip-record {
  background: rgba(148,163,184,.08); color: #cbd5e1;
  border: 1px solid rgba(148,163,184,.16);
  text-transform: none; letter-spacing: 0; font-weight: 500;
}
.mlb-gd-sp-chip-record b { color: #f8fafc; font-weight: 700; margin-left: 2px; }

.mlb-gd-sp-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 2px;
}
.mlb-gd-sp-tab {
  background: none; border: none;
  color: #94a3b8;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.mlb-gd-sp-tab:hover { color: #e2e8f0; }
.mlb-gd-sp-tab.is-active {
  color: #67e8f9;
  border-bottom-color: #22d3ee;
}
.mlb-gd-sp-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.mlb-gd-sp-stats-grid[hidden] { display: none; }
.mlb-gd-sp-split-panel[hidden] { display: none; }

/* Hand-split table (Against Hitters tab) */
.mlb-gd-sp-split-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: #e2e8f0;
}
.mlb-gd-sp-split-table thead th {
  font-size: .6rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  padding: 6px 6px;
  border-bottom: 1px solid var(--gd-line);
  text-align: center;
}
.mlb-gd-sp-split-table thead th:first-child { text-align: left; }
.mlb-gd-sp-split-table tbody td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--gd-line);
}
.mlb-gd-sp-split-table tbody tr:last-child td { border-bottom: none; }
.mlb-gd-sp-split-table .sp-split-label {
  text-align: left;
  font-weight: 700;
  color: #67e8f9;
  letter-spacing: .02em;
  font-size: .78rem;
}
.mlb-gd-sp-split-table .sp-split-empty-cell {
  color: #64748b;
  font-style: italic;
}
.mlb-gd-sp-split-empty {
  padding: 20px 8px;
  text-align: center;
  color: #64748b;
  font-style: italic;
  font-size: .85rem;
}
/* Arsenal table — pitch-type name gets a colored dot */
.mlb-gd-sp-arsenal-table .sp-arsenal-name {
  text-align: left;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
}
.mlb-gd-sp-arsenal-table .sp-arsenal-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* Tiered color classes — match the player dashboard Q2 palette so the
   two views read identically. */
.mlb-gd-sp-split-table .sp-split-green-3 { background: rgba(34, 197, 94, 0.30); color: #bbf7d0; font-weight: 700; }
.mlb-gd-sp-split-table .sp-split-green-2 { background: rgba(34, 197, 94, 0.18); color: #d9f99d; }
.mlb-gd-sp-split-table .sp-split-green-1 { background: rgba(34, 197, 94, 0.09); color: #ecfccb; }
.mlb-gd-sp-split-table .sp-split-red-1   { background: rgba(239, 68, 68, 0.10); color: #fed7aa; }
.mlb-gd-sp-split-table .sp-split-red-2   { background: rgba(239, 68, 68, 0.20); color: #fca5a5; }
.mlb-gd-sp-split-table .sp-split-red-3   { background: rgba(239, 68, 68, 0.32); color: #fecaca; font-weight: 700; }
.mlb-gd-sp-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: var(--gd-surface-3);
  border: 1px solid var(--gd-line);
  border-radius: 8px;
  min-width: 0;
}
.mlb-gd-sp-stat-label {
  font-size: .6rem; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.mlb-gd-sp-stat-val {
  font-size: 1.1rem; font-weight: 700; color: #f8fafc;
  line-height: 1.1; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: 3px;
}
.mlb-gd-sp-stat-base {
  font-size: .6rem; color: #64748b;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.mlb-gd-sp-arrow { font-size: .68rem; line-height: 1; }
.mlb-gd-sp-stat.is-good {
  background: rgba(34,197,94,.07);
  border-color: rgba(34,197,94,.22);
}
.mlb-gd-sp-stat.is-good .mlb-gd-sp-stat-val { color: #4ade80; }
.mlb-gd-sp-stat.is-good .mlb-gd-sp-arrow   { color: #4ade80; }
.mlb-gd-sp-stat.is-bad {
  background: rgba(239,68,68,.06);
  border-color: rgba(239,68,68,.22);
}
.mlb-gd-sp-stat.is-bad .mlb-gd-sp-stat-val { color: #f87171; }
.mlb-gd-sp-stat.is-bad .mlb-gd-sp-arrow    { color: #f87171; }

.mlb-gd-sp-empty-card {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  background: var(--gd-surface-3);
  border: 1px dashed var(--gd-line-strong);
  border-radius: 12px;
}
.mlb-gd-sp-empty-card .mlb-gd-sp-team-logo { width: 40px; height: 40px; }
.mlb-gd-sp-empty { font-size: .88rem; color: #64748b; font-style: italic; }

/* Mobile-only: stretch the game-detail container to fill the viewport
   so the page-level footer is pushed below the fold on every tab —
   Weather's chart-heavy layout naturally fills most screens, but Props
   with an empty "No props posted" card and Overview with a short layout
   leave the footer creeping into view. `min-height: 100dvh` uses the
   dynamic viewport height (accounts for mobile browser chrome that
   shows/hides on scroll); `100vh` is the static fallback for browsers
   that don't support `dvh` yet. The bottom-nav is position: fixed so
   it doesn't claim layout height — main-app-wrapper's padding-bottom
   already keeps content above it, so we don't need to subtract here. */
@media (max-width: 1000px) {
  #mlb-game-detail {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

@media (max-width: 880px) {
  .mlb-gd-sp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mlb-gd-sp-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ─── Section-level ─── */
.mlb-gd-section-title { margin: 0 0 10px; font-size: .95rem; color: #f8fafc; letter-spacing: .02em; }
.mlb-gd-inj-grid, .mlb-gd-lineup-grid, .mlb-gd-props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mlb-gd-inj-team, .mlb-gd-lineup-team, .mlb-gd-props-team {
  font-weight: 700; color: #67e8f9;
  font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ─── Injuries ─── */
.mlb-gd-inj-row { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.mlb-gd-inj-row:last-child { border-bottom: none; }
.mlb-gd-inj-name { font-size: .88rem; color: #e2e8f0; font-weight: 500; }
.mlb-gd-inj-pos { margin-left: 8px; font-size: .68rem; color: #64748b; text-transform: uppercase; }
.mlb-gd-inj-status {
  display: inline-block; margin-top: 3px; padding: 1px 7px;
  font-size: .65rem; border-radius: 999px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(239, 68, 68, .12); color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, .28);
}
.mlb-gd-inj-status-day-to-day { background: rgba(245, 158, 11, .12); color: #fcd34d; border-color: rgba(245, 158, 11, .28); }
.mlb-gd-inj-desc { font-size: .76rem; color: #94a3b8; margin-top: 2px; }
.mlb-gd-inj-return { font-size: .7rem; color: #64748b; margin-top: 1px; }
.mlb-gd-inj-empty, .mlb-gd-empty { font-size: .82rem; color: #64748b; font-style: italic; padding: 6px 0; }

/* ─── Lineup tables ─── */
.mlb-gd-lineup-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mlb-gd-lineup-table th {
  text-align: left; color: #94a3b8;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 6px; border-bottom: 1px solid var(--gd-line); font-weight: 600;
}
.mlb-gd-lineup-table td { padding: 8px 6px; color: var(--gd-text); border-bottom: 1px solid var(--gd-line); vertical-align: middle; }
.mlb-gd-lineup-table tr:last-child td { border-bottom: none; }
.mlb-gd-order { font-weight: 700; color: #67e8f9; width: 24px; }

/* Batter cell — avatar + name + confirmed / hand chips. */
.mlb-gd-lineup-batter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mlb-gd-lineup-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(255,255,255,.06);
}
.mlb-gd-lineup-avatar.is-fallback { object-fit: contain; padding: 4px; }
.mlb-gd-lineup-name-col {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.mlb-gd-lineup-name-link {
  font-weight: 600; color: #e2e8f0;
  text-decoration: none; font-size: .9rem;
  line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mlb-gd-lineup-name-link:hover { color: #67e8f9; text-decoration: underline; }
.mlb-gd-lineup-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.mlb-gd-lineup-confirmed {
  color: #4ade80; font-weight: 700;
}
.mlb-gd-lineup-confirmed.mlb-gd-lineup-projected {
  color: #f59e0b;
}
.mlb-gd-lineup-hand {
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .06em;
}
.mlb-gd-lineup-hand-r { background: rgba(239,68,68,.14); color: #fca5a5; }
.mlb-gd-lineup-hand-l { background: rgba(79,143,247,.14); color: #7dd3fc; }
.mlb-gd-lineup-hand-s { background: rgba(168,85,247,.14); color: #d8b4fe; }

/* Section header (title + toggle pill group on the right) */
.mlb-gd-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.mlb-gd-section-header .mlb-gd-section-title { margin: 0; }

/* Season / vs-SP toggle */
.mlb-gd-lineup-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--gd-surface-3);
  border: 1px solid var(--gd-line);
  border-radius: 999px;
  padding: 2px;
}
.mlb-gd-lineup-pill {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: .03em;
  transition: color 120ms ease, background-color 120ms ease;
}
.mlb-gd-lineup-pill:hover:not(.is-active) { color: #e2e8f0; }
.mlb-gd-lineup-pill.is-active {
  color: #0a1628;
  background: rgba(0, 211, 189, 0.75);
}

/* Each team is its own card. Header is centered: logo + full team name
   + mode toggle (Season / vs SP) stacked; range toggle sits on its own
   centered row below; table scrolls horizontally on narrow screens. */
.mlb-gd-lineup-tablewrap {
  overflow-x: auto;
}
.mlb-gd-lineup-table td[data-stat] {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mlb-gd-lineup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 0 14px;
  margin-bottom: 10px;
}
.mlb-gd-lineup-logo {
  width: 56px; height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}
.mlb-gd-lineup-head-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.mlb-gd-lineup-team-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.mlb-gd-lineup-projected-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  border-radius: 999px;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

/* Range toggle — right-aligned, compact. Each option is its own
   standalone pill; inactive pills are outlined / muted, the active
   one is filled teal. */
.mlb-gd-lineup-toggle-range {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 14px;
  border-radius: 0;
}
.mlb-gd-lineup-toggle-range .mlb-gd-lineup-pill {
  border: 1px solid var(--gd-line);
  background: transparent;
  padding: 4px 14px;
  font-size: .72rem;
  text-align: center;
}
.mlb-gd-lineup-toggle-range .mlb-gd-lineup-pill:hover:not(.is-active) {
  color: #e2e8f0;
  background: rgba(148, 163, 184, .08);
  border-color: rgba(255, 255, 255, .16);
}
.mlb-gd-lineup-toggle-range .mlb-gd-lineup-pill.is-active {
  color: #0a1628;
  background: rgba(0, 211, 189, 0.75);
  border-color: rgba(0, 211, 189, 0.82);
}

.mlb-gd-lineup-pill:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Loading dim — while a filter fetch is in flight, dim only that team
   section's table (leave the filter bar interactive so the user can
   flip again or bail). */
.mlb-gd-lineup-section.is-loading .mlb-gd-lineup-tablewrap {
  opacity: 0.5;
  transition: opacity 120ms ease;
  pointer-events: none;
}

/* Tier colors — mirror the player-dashboard Q2 palette so readers get a
   consistent visual language across cards. */
.mlb-gd-lineup-table .lineup-green-3 { background: rgba(34, 197, 94, 0.30); color: #bbf7d0; font-weight: 700; }
.mlb-gd-lineup-table .lineup-green-2 { background: rgba(34, 197, 94, 0.18); color: #d9f99d; }
.mlb-gd-lineup-table .lineup-green-1 { background: rgba(34, 197, 94, 0.09); color: #ecfccb; }
.mlb-gd-lineup-table .lineup-red-1   { background: rgba(239, 68, 68, 0.10); color: #fed7aa; }
.mlb-gd-lineup-table .lineup-red-2   { background: rgba(239, 68, 68, 0.20); color: #fca5a5; }
.mlb-gd-lineup-table .lineup-red-3   { background: rgba(239, 68, 68, 0.32); color: #fecaca; font-weight: 700; }

/* ─── Pitch Mix column — clickable grade pill per batter ─── */
.mlb-gd-pm-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(148,163,184,.08);
  color: #cbd5e1;
  font-size: .82rem; font-weight: 700;
  cursor: pointer; user-select: none;
  transition: transform 100ms ease, border-color 100ms, background 100ms;
}
.mlb-gd-pm-pill:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.20); }
.mlb-gd-pm-pill.is-empty { cursor: default; opacity: .5; }
.mlb-gd-pm-pill.is-empty:hover { transform: none; border-color: rgba(255,255,255,.08); }
.mlb-gd-pm-pill.q2-green-3 { background: rgba(34,197,94,.30); color: #bbf7d0; border-color: rgba(34,197,94,.45); }
.mlb-gd-pm-pill.q2-green-2 { background: rgba(34,197,94,.18); color: #d9f99d; border-color: rgba(34,197,94,.30); }
.mlb-gd-pm-pill.q2-red-2   { background: rgba(239,68,68,.20); color: #fca5a5; border-color: rgba(239,68,68,.35); }
.mlb-gd-pm-pill.q2-red-3   { background: rgba(239,68,68,.32); color: #fecaca; border-color: rgba(239,68,68,.50); }

/* ─── Pitch Mix modal ─── */
body.mlb-gd-pm-open { overflow: hidden; }

.mlb-gd-pm-overlay {
  position: fixed; inset: 0; z-index: 1300;   /* above the fixed bottom nav (z-index 1200) */
  background: rgba(2, 6, 16, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: mlb-gd-pm-fade-in 140ms ease;
}
@keyframes mlb-gd-pm-fade-in { from { opacity: 0; } to { opacity: 1; } }

.mlb-gd-pm-modal {
  position: relative;
  background: #0E1014;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  width: min(1000px, 100%);
  max-height: min(90vh, 720px);
  overflow: auto;
  padding: 22px 24px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  color: #e2e8f0;
}

.mlb-gd-pm-close {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: #cbd5e1; font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 100ms;
}
.mlb-gd-pm-close:hover { background: rgba(255,255,255,.12); }

.mlb-gd-pm-header { margin-bottom: 14px; }
.mlb-gd-pm-matchup-title {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 1.05rem; font-weight: 700; color: #f8fafc;
}
.mlb-gd-pm-name { color: #f8fafc; }
.mlb-gd-pm-vs {
  color: #64748b; font-weight: 600;
  font-size: .82rem; text-transform: lowercase;
  letter-spacing: .04em;
  margin: 0 2px;
}
/* Hand chips — red/blue/purple matches the batting-order chips so a
   batter reads as L/R/S the same across the app. */
.mlb-gd-pm-hand {
  font-size: .62rem; font-weight: 700;
  letter-spacing: .4px;
  padding: 2px 7px; border-radius: 4px;
}
.mlb-gd-pm-hand-r { background: rgba(239,68,68,.14);  color: #fca5a5; }
.mlb-gd-pm-hand-l { background: rgba(79,143,247,.14); color: #7dd3fc; }
.mlb-gd-pm-hand-s { background: rgba(168,85,247,.14); color: #d8b4fe; }

/* Rating banner */
.mlb-gd-pm-rating {
  background: #10202F;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.mlb-gd-pm-rating-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.mlb-gd-pm-rating-label {
  font-size: .7rem; font-weight: 700; letter-spacing: 1px;
  color: #94a3b8; text-transform: uppercase;
}
.mlb-gd-pm-rating-score { display: flex; align-items: baseline; gap: 6px; }
.mlb-gd-pm-rating-num { font-size: 1.6rem; font-weight: 700; color: #f8fafc; }
.mlb-gd-pm-rating-denom { font-size: .8rem; color: #64748b; }
.mlb-gd-pm-rating-tag {
  margin-left: 10px; font-size: .82rem; font-weight: 700; color: #86efac;
}
.mlb-gd-pm-rating.q2-red-3 .mlb-gd-pm-rating-tag,
.mlb-gd-pm-rating.q2-red-2 .mlb-gd-pm-rating-tag { color: #fca5a5; }
.mlb-gd-pm-rating.q2-green-3 .mlb-gd-pm-rating-tag { color: #bbf7d0; }

.mlb-gd-pm-rating-track {
  position: relative; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.mlb-gd-pm-rating-fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, rgba(34,197,94,.6), rgba(34,197,94,.95));
  border-radius: 999px; transition: width 200ms ease;
}
.mlb-gd-pm-rating.q2-red-3 .mlb-gd-pm-rating-fill,
.mlb-gd-pm-rating.q2-red-2 .mlb-gd-pm-rating-fill {
  background: linear-gradient(90deg, rgba(239,68,68,.6), rgba(239,68,68,.95));
}
.mlb-gd-pm-rating-marks {
  position: absolute; left: 0; right: 0; top: 14px;
  display: flex; justify-content: space-between;
  font-size: .62rem; letter-spacing: .5px; color: #64748b;
  text-transform: uppercase; font-weight: 700;
}
.mlb-gd-pm-rating-marks span { flex: 1; text-align: center; }

/* Per-pitch table */
.mlb-gd-pm-table {
  width: 100%; border-collapse: collapse;
  font-size: .82rem; margin-top: 18px;
}
.mlb-gd-pm-table th {
  text-align: left; padding: 8px 10px; font-size: .68rem;
  font-weight: 700; color: #64748b; letter-spacing: .7px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mlb-gd-pm-table td {
  padding: 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #cbd5e1; vertical-align: middle;
}
.mlb-gd-pm-table tr:last-child td { border-bottom: none; }

.mlb-gd-pm-pitch { font-weight: 600; color: #f1f5f9; }
.mlb-gd-pm-usage { color: #94a3b8; font-size: .78rem; }
.mlb-gd-pm-velo  { color: #64748b; font-size: .68rem; margin-top: 2px; }

.mlb-gd-pm-batter,
.mlb-gd-pm-pitcher { font-weight: 700; width: 80px; }
.mlb-gd-pm-ab {
  font-size: .65rem; font-weight: 600;
  color: #64748b; margin-top: 2px;
  letter-spacing: .3px;
}
.mlb-gd-pm-ab-prior {
  color: #475569; font-weight: 500;
  margin-left: 3px;
}
/* Per-player coloring: sign-based. `+` = above league avg for that player
   (green), `−` = below league avg (red). The edge bar + overall rating
   still read from the batter's matchup perspective. */
.mlb-gd-pm-batter.is-pos,
.mlb-gd-pm-pitcher.is-pos { color: #86efac; }
.mlb-gd-pm-batter.is-neg,
.mlb-gd-pm-pitcher.is-neg { color: #fca5a5; }
.mlb-gd-pm-batter { text-align: right; }

.mlb-gd-pm-edge-head { text-align: center !important; color: #64748b; }

.mlb-gd-pm-edge-cell { padding: 0 8px; }
.mlb-gd-pm-edge-track {
  position: relative; height: 22px; background: rgba(255,255,255,.04);
  border-radius: 4px;
}
.mlb-gd-pm-edge-track::before {
  content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px;
  width: 1px; background: rgba(255,255,255,.14);
}
.mlb-gd-pm-edge-fill {
  position: absolute; top: 0; bottom: 0;
  border-radius: 3px;
  display: flex; align-items: center;
}
.mlb-gd-pm-edge-batter  {
  left: 50%;
  background: linear-gradient(90deg, rgba(34,197,94,.35), rgba(34,197,94,.85));
  justify-content: flex-end;
  padding-right: 6px;
}
.mlb-gd-pm-edge-pitcher {
  right: 50%;
  background: linear-gradient(90deg, rgba(239,68,68,.85), rgba(239,68,68,.35));
  justify-content: flex-start;
  padding-left: 6px;
}
.mlb-gd-pm-edge-val {
  font-size: .72rem; font-weight: 700;
  color: #f8fafc; white-space: nowrap; pointer-events: none;
}

.mlb-gd-pm-empty {
  text-align: center; padding: 20px; color: #64748b; font-style: italic;
}
.mlb-gd-pm-foot {
  margin-top: 14px; font-size: .72rem; color: #64748b; line-height: 1.5;
}

/* ─── Props — pills + single row per player ─── */
.mlb-gd-pills {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--gd-line);
}
.mlb-gd-pill {
  background: var(--gd-surface-3); color: #cbd5e1;
  border: 1px solid var(--gd-line);
  padding: 6px 14px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.mlb-gd-pill:hover { color: #f8fafc; background: rgba(148,163,184,.14); }
/* Active state mirrors .mlb-gd-tab.is-active above (the Overview/Props/
   Weather tabs) — same teal fill + dark text — so the visual treatment
   for "selected" is consistent across both rows of pills. */
.mlb-gd-pill.is-active {
  color: #0a1628;
  background: rgba(0, 211, 189, 0.75);
  border-color: rgba(0, 211, 189, 0.82);
}
.mlb-gd-players-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.mlb-gd-team-col { display: flex; flex-direction: column; min-width: 0; }
.mlb-gd-team-col-header {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: #67e8f9;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--gd-line);
}
.mlb-gd-team-col-logo { width: 20px; height: 20px; object-fit: contain; }
.mlb-gd-prop-player {
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--gd-line);
}
.mlb-gd-prop-player:last-child { border-bottom: none; }

/* ── Model projection badge ("74% PROJ") + stated bet + factor-impact pills.
   The % is the model's chance the over clears — deliberately untiered
   (absolute thresholds can't be calibrated across prop types); the pills
   carry the good/bad signal per factor. ── */
.mlb-gd-prop-grade {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: 6px; flex-shrink: 0;
  /* Same chrome as the odds pills — the cluster reads as one family. */
  background: var(--gd-surface-3); border: 1px solid var(--gd-line);
  box-sizing: border-box;
}
/* Number sized/weighted to match the odds inside the odds pills (.74rem/700)
   — all three pills' numbers read as one family. */
.mlb-gd-grade-num  { font-size: .74rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: #f8fafc; }
.mlb-gd-grade-word { font-size: .52rem; font-weight: 800; letter-spacing: .09em; color: #94a3b8; }
/* Edge pill mirrors the proj pill's type (same num/word classes inside).
   Both pills' NUMBERS take the edge sign's color (white when no edge);
   captions stay gray. */
.mlb-gd-edge-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: 6px; flex-shrink: 0;
  background: var(--gd-surface-3); border: 1px solid var(--gd-line);
  box-sizing: border-box; white-space: nowrap;
}
.mlb-gd-edge-pill.is-up .mlb-gd-grade-num,
.mlb-gd-prop-grade.is-up .mlb-gd-grade-num   { color: #4ade80; }
.mlb-gd-edge-pill.is-down .mlb-gd-grade-num,
.mlb-gd-prop-grade.is-down .mlb-gd-grade-num { color: #f87171; }
.mlb-gd-prop-verdict {
  margin-top: 2px; font-size: .76rem; font-weight: 600; color: #cbd5e1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Right cluster: [proj · odds · edge] pills, one chrome family, one height,
   top-aligned so expanded alt lines grow downward; the alt-lines expand
   chevron sits centered under the odds column. */
.mlb-gd-prop-right { display: flex; align-items: flex-start; gap: 8px; justify-self: end; }
.mlb-gd-lines-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mlb-gd-factors { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.mlb-gd-factor {
  font-size: .62rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--gd-line);
  color: #94a3b8; background: var(--gd-surface-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  cursor: pointer;
}
.mlb-gd-factor:hover { filter: brightness(1.25); }
.mlb-gd-factor.is-up   { color: #4ade80; border-color: rgba(74,222,128,.28); background: rgba(34,197,94,.09); }
.mlb-gd-factor.is-down { color: #f87171; border-color: rgba(248,113,113,.28); background: rgba(248,113,113,.09); }
.mlb-gd-prop-header { display: flex; gap: 10px; align-items: center; min-width: 0; }
.mlb-gd-prop-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  background: rgba(34, 211, 238, .08); flex-shrink: 0;
}
.mlb-gd-prop-avatar.is-fallback { object-fit: contain; padding: 4px; }
.mlb-gd-prop-identity { min-width: 0; flex: 1; }
.mlb-gd-prop-name {
  font-size: .9rem; font-weight: 600; color: #f8fafc; line-height: 1.15;
  text-decoration: none; cursor: pointer;
  transition: color 120ms ease;
}
.mlb-gd-prop-name:hover { color: #67e8f9; text-decoration: underline; }
.mlb-gd-prop-meta {
  display: flex; gap: 6px; margin-top: 2px;
  font-size: .66rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em;
}
/* Subtle expand affordance under the odds column; rotates when open. */
.mlb-gd-more-btn {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 12px; color: #5b6b85;
}
.mlb-gd-more-btn:hover { color: #67e8f9; }
.mlb-gd-more-btn svg { transition: transform 140ms ease; }
.mlb-gd-prop-player[data-expanded="true"] .mlb-gd-more-btn svg { transform: rotate(180deg); }
.mlb-gd-lines { display: flex; flex-direction: column; gap: 4px; justify-self: end; }
.mlb-gd-line-row {
  display: flex; gap: 6px;
  /* Alt lines stay collapsed until user clicks +N */
  display: none;
}
.mlb-gd-line-row.is-main { display: flex; }
.mlb-gd-prop-player[data-expanded="true"] .mlb-gd-line-row { display: flex; }
.mlb-gd-line-over, .mlb-gd-line-under {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 78px; justify-content: center;
  height: 32px; padding: 0 10px; border-radius: 6px;
  font-size: .74rem; font-weight: 500;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--gd-line);
  box-sizing: border-box;
}
.mlb-gd-line-over  { background: var(--gd-surface-3); color: #cbd5e1; }
.mlb-gd-line-under { background: var(--gd-surface-3); color: #cbd5e1; }
.mlb-gd-line-over em, .mlb-gd-line-under em { font-style: normal; font-weight: 700; color: #f8fafc; }
.mlb-gd-line-row.is-main .mlb-gd-line-over em  { color: #86efac; }
.mlb-gd-line-row.is-main .mlb-gd-line-under em { color: #fca5a5; }

/* ─── Loading / error ─── */
.mlb-gd-loading, .mlb-gd-error { padding: 30px; text-align: center; color: #94a3b8; }
.mlb-gd-error { color: #fca5a5; }

/* ═══════════════════════════════════════════════════════════
   Weather panel (ported from DataUpdater/demos/mlb/css/styles.css)
   ═══════════════════════════════════════════════════════════ */
.wx-panel { padding: 4px 0; }
.wx-panel.wx-indoor { text-align: center; padding: 28px; }
.wx-indoor-msg { font-size: 12px; color: #94a3b8; margin-top: 8px; }
.wx-empty { padding: 24px; text-align: center; color: #94a3b8; font-size: .85rem; }
.wx-top-row {
  display: grid; grid-template-columns: 280px 1fr; gap: 20px; margin-bottom: 16px;
}
/* Two-column layout: strip + field + venue caption on the left, score +
   key stats + ball flight model on the right. */
.wx-split-row {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 24px;
  margin-bottom: 16px;
}
.wx-split-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.wx-split-left svg {
  border-radius: 8px;
  width: 100%;
  max-width: 420px;
  height: auto;
}
.wx-venue-caption {
  padding: 8px 2px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.wx-venue-caption .wx-venue {
  font-size: 15px;
  justify-content: center;
}
.wx-split-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Conditions strip (shared with the research-hub weather grid).
   When it's the top child of .wx-split-left we drop the bottom border to
   keep the visual grouping tight against the field. */
.wh-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 4px 0 8px;
}
.wh-stat {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  align-items: center; text-align: center;
}
.wh-stat-label {
  font-size: .7rem; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.wh-stat-val {
  font-size: 1.25rem; font-weight: 700; color: #f8fafc;
  line-height: 1.1; letter-spacing: -.01em;
}
.wh-stat-sub {
  font-size: .7rem; color: #64748b;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.wh-forecast {
  display: flex; align-items: center; gap: 6px;
  text-transform: none; letter-spacing: 0;
  font-size: .85rem; color: #cbd5e1; font-weight: 500;
}
.wh-pill-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; padding: 0 2px 4px; margin-top: -4px;
}
.wh-pill-row-solo { margin-top: 0; padding: 14px 2px 8px; }
.wh-tag-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px;
}
.wh-tag {
  display: inline-block; align-self: flex-start;
  margin-top: 3px; padding: 2px 8px;
  font-size: .62rem; border-radius: 999px;
  font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border: 1px solid transparent;
  white-space: nowrap;
}
.wh-tag-row .wh-tag { margin-top: 0; }
.wh-tag-boost       { background: rgba(34,197,94,.12);  color: #4ade80; border-color: rgba(34,197,94,.28); }
.wh-tag-boost-soft  { background: rgba(34,197,94,.07);  color: #86efac; border-color: rgba(34,197,94,.18); }
.wh-tag-suppress    { background: rgba(239,68,68,.12);  color: #f87171; border-color: rgba(239,68,68,.28); }
.wh-tag-suppress-soft { background: rgba(239,68,68,.07); color: #fca5a5; border-color: rgba(239,68,68,.18); }
.wh-tag-neutral     { background: rgba(148,163,184,.1); color: #cbd5e1; border-color: rgba(148,163,184,.18); }
.wh-tag-alert       { background: rgba(234,179,8,.12);  color: #fcd34d; border-color: rgba(234,179,8,.28); }
.wh-tag-indoor      { background: rgba(79,143,247,.12); color: #7dd3fc; border-color: rgba(79,143,247,.28); }

.wx-info-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wx-venue {
  font-size: 14px; font-weight: 600; color: #f8fafc;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.wx-desc { font-size: 12px; color: #cbd5e1; margin-top: 3px; }
.wx-gust { color: #fcd34d; font-size: 11px; }

.wx-score-box {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.06);
}
.wx-score-num {
  font-size: 36px; font-weight: 800; letter-spacing: -1px;
  line-height: 1; min-width: 56px; text-align: center;
}
.wx-score-label { font-size: 14px; font-weight: 700; }
.wx-score-sub {
  font-size: 10px; color: #94a3b8; text-transform: uppercase;
  letter-spacing: .5px; margin-top: 1px;
}
.wx-score-elite    { background: rgba(34,197,94,.1);   border-color: rgba(34,197,94,.25); }
.wx-score-elite    .wx-score-num,
.wx-score-elite    .wx-score-label { color: #22c55e; }
.wx-score-boost    { background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.2); }
.wx-score-boost    .wx-score-num,
.wx-score-boost    .wx-score-label { color: #4ade80; }
.wx-score-neutral  { background: rgba(139,146,165,.06); border-color: rgba(139,146,165,.15); }
.wx-score-neutral  .wx-score-num,
.wx-score-neutral  .wx-score-label { color: #cbd5e1; }
.wx-score-suppress { background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.2); }
.wx-score-suppress .wx-score-num,
.wx-score-suppress .wx-score-label { color: #f87171; }
.wx-score-dead     { background: rgba(239,68,68,.1);   border-color: rgba(239,68,68,.25); }
.wx-score-dead     .wx-score-num,
.wx-score-dead     .wx-score-label { color: #ef4444; }

.wx-key-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wx-kstat { padding: 6px 10px; background: rgba(14, 16, 20,.5); border-radius: 8px; }
.wx-kstat-label {
  font-size: 9px; font-weight: 600; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .4px;
}
.wx-kstat-val { font-size: 13px; font-weight: 600; color: #f8fafc; margin-top: 1px; }

.wx-precip-warn {
  padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.25);
  color: #fcd34d; margin-bottom: 14px; text-align: center;
}

.wx-physics { margin-top: 14px; }
.wx-panel-title {
  font-size: 11px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px;
}
.wx-panel-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: #64748b; }
.wx-physics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wx-phys-card {
  padding: 10px 12px; background: rgba(14, 16, 20,.5); border-radius: 8px;
  border: 1px solid transparent;
}
.wx-phys-title {
  font-size: 9px; font-weight: 600; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px;
}
.wx-phys-val { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.wx-phys-note { font-size: 10px; color: #94a3b8; line-height: 1.3; }

.wx-carry-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wx-carry-card {
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.06); text-align: center;
}
.wx-carry-boost { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.2); }
.wx-carry-suppress { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.2); }
.wx-carry-neutral { background: rgba(148,163,184,.04); border-color: rgba(148,163,184,.18); }
/* Roof-closed cards take the place of the three per-direction cards, so
   they span the same width — leaving the score box in the 4th column. */
.wx-carry-roof-closed { grid-column: span 3; }
.wx-carry-dir {
  font-size: 10px; font-weight: 600; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px;
}
.wx-carry-val { font-size: 22px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 4px; }
.wx-carry-boost    .wx-carry-val { color: #4ade80; }
.wx-carry-suppress .wx-carry-val { color: #f87171; }
.wx-carry-neutral  .wx-carry-val { color: #cbd5e1; }
.wx-carry-breakdown { font-size: 9px; color: #94a3b8; }
.wx-carry-tag { color: #64748b; font-weight: 400; }

.wx-val-boost    { color: #4ade80; }
.wx-val-suppress { color: #f87171; }
.wx-val-neutral  { color: #cbd5e1; }
.wx-val-alert    { color: #fcd34d; }

.wx-roof-badge {
  font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .3px;
}
.wx-roof-retractable { background: rgba(79,143,247,.12); color: #7dd3fc; }
.wx-roof-fixed       { background: rgba(139,146,165,.12); color: #cbd5e1; }
.wx-roof-open        { background: rgba(34,197,94,.12); color: #4ade80; }
.wx-roof-closed      { background: rgba(239,68,68,.12); color: #f87171; }
.wx-roof-uncertain   { background: rgba(234,179,8,.12); color: #fcd34d; }
.wx-roof-alert {
  padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 500;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.2);
  color: #fca5a5; margin: 8px 0;
}
.wx-roof-warn {
  padding: 8px 12px; border-radius: 8px; font-size: 11px; font-weight: 500;
  background: rgba(234,179,8,.08); border: 1px solid rgba(234,179,8,.2);
  color: #fcd34d; margin: 8px 0;
}

/* ─── Weather-Adjusted Props table ─── */
/* Clean prop rows (mirrors the Props tab) instead of the old dense table:
   avatar + name + lean bet + weather-reason chips, with an impact pill
   (arrow strength + lean odds) on the right. Grouped over-lean / under-lean. */
.mlb-gd-wxgroup { margin-top: 16px; }
.mlb-gd-wxgroup:first-of-type { margin-top: 4px; }
.mlb-gd-wxgroup-head {
  display: flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #94a3b8; padding-bottom: 8px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mlb-gd-wxgroup-n {
  font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 99px;
  background: rgba(255,255,255,.07); color: #cbd5e1;
}
.mlb-gd-wxlist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.mlb-gd-wxrow {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.mlb-gd-wxrow:last-child { border-bottom: none; }
.mlb-gd-wx-ava {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: top center;
  background: rgba(34,211,238,.08); flex-shrink: 0;
}
.mlb-gd-wx-ava.is-fallback { object-fit: contain; padding: 4px; }
.mlb-gd-wx-id { min-width: 0; }
.mlb-gd-wx-bet {
  font-size: .76rem; font-weight: 600; color: #cbd5e1; margin-top: 2px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.mlb-gd-wx-hand { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: .3px; }
.mlb-gd-wx-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.mlb-gd-wxchip {
  font-size: .6rem; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.08); color: #94a3b8; background: rgba(148,163,184,.07);
  white-space: nowrap;
}
.mlb-gd-wxchip.is-up   { color: #4ade80; border-color: rgba(74,222,128,.28); background: rgba(34,197,94,.09); }
.mlb-gd-wxchip.is-down { color: #f87171; border-color: rgba(248,113,113,.28); background: rgba(248,113,113,.09); }
/* impact pill — same chrome as the Props odds pills */
.mlb-gd-wx-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 0 11px; border-radius: 6px; box-sizing: border-box;
  background: rgba(14, 16, 20,.4); border: 1px solid rgba(255,255,255,.06);
  font-variant-numeric: tabular-nums;
}
.mlb-gd-wx-ic { font-size: .7rem; font-weight: 800; color: #94a3b8; }
.mlb-gd-wx-od { font-size: .74rem; font-weight: 700; color: #f8fafc; }
.mlb-gd-wx-pill[data-tier="strong-boost"]    { border-color: rgba(34,197,94,.3); }
.mlb-gd-wx-pill[data-tier="strong-boost"]    .mlb-gd-wx-ic { color: #22c55e; }
.mlb-gd-wx-pill[data-tier="boost"]           .mlb-gd-wx-ic { color: #4ade80; }
.mlb-gd-wx-pill[data-tier="suppress"]        .mlb-gd-wx-ic { color: #f87171; }
.mlb-gd-wx-pill[data-tier="strong-suppress"] { border-color: rgba(239,68,68,.3); }
.mlb-gd-wx-pill[data-tier="strong-suppress"] .mlb-gd-wx-ic { color: #ef4444; }

/* Handedness chip colors (kept; used in the bet line) */
.wx-hand-r { background: rgba(79,143,247,.12); color: #7dd3fc; }
.wx-hand-l { background: rgba(139,92,246,.12); color: #c4b5fd; }
.wx-hand-s { background: rgba(234,179,8,.12);  color: #fcd34d; }
.wx-hand-x { background: rgba(139,146,165,.12); color: #94a3b8; }

/* ─── Responsive ─── */
@media (max-width: 820px) {
  #mlb-game-detail { padding: 10px 12px; gap: 12px; }
  .mlb-gd-inj-grid, .mlb-gd-lineup-grid, .mlb-gd-props-grid,
  .mlb-gd-players-list { grid-template-columns: 1fr; gap: 12px; }
  .wx-top-row,
  .wx-split-row { grid-template-columns: 1fr; }
  .wx-physics-grid { grid-template-columns: 1fr 1fr; }
  .wx-carry-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   Live Game Tracker tab (pbr-* — layout from mlb-demo.html). Tokens (--gd-*)
   are declared on #mlb-game-detail and .pbr-modal near the top of this file,
   so the tab renders consistently regardless of the page's theme tokens.
   ════════════════════════════════════════════════════════════════════════ */
.pbr-wrap { display: flex; flex-direction: column; gap: 16px; }
.pbr-empty { text-align: center; padding: 40px 16px; color: var(--gd-text-3); font-size: 13px; }

/* live header score beside each team — sizing lives with the scoreboard styles
   above (.mlb-gd-team-score); leading/trailing classes set by the PBP module. */

/* ── cards + layout grid ── */
#mlb-pbp-root .pbr-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
#mlb-pbp-root .pbr-grid[hidden] { display: none; }
#mlb-pbp-root .pbr-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pbr-card {
  background: var(--gd-surface);
  border: 1px solid var(--gd-line);
  border-radius: var(--gd-radius);
  overflow: hidden;
}
.pbr-card[hidden] { display: none; }
.pbr-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--gd-line);
}
.pbr-card-title {
  font-family: var(--gd-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  color: var(--gd-text-3); text-transform: uppercase;
}

/* ── "This at-bat" card ── */
.pbr-cab-status {
  font-family: var(--gd-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .1em;
  color: var(--gd-text-2); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  text-align: right; min-width: 0;
}
.pbr-cab-status.is-result { color: var(--gd-text); }
.pbr-live-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--gd-live); display: inline-block;
  animation: mlbGdPulse 1.6s ease-in-out infinite;
}
.pbr-matchup {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--gd-line); gap: 16px;
}
.pbr-player { display: flex; align-items: center; gap: 13px; min-width: 0; }
.pbr-player--pitcher { flex-direction: row-reverse; text-align: right; }
/* Avatar circle: initials sit underneath; a resolved headshot <img> covers them. */
.pbr-headshot {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gd-font-display);
  font-weight: 600; font-size: 15px;
  background: var(--gd-surface-3);
  border: 1px solid var(--gd-line-strong);
  color: var(--gd-text-2);
  overflow: hidden;
}
.pbr-headshot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  border-radius: 50%;
}
.pbr-headshot--sm { width: 36px; height: 36px; font-size: 12px; }
.pbr-player-id { min-width: 0; }
.pbr-player-tag {
  font-family: var(--gd-font-mono);
  font-size: 9px; font-weight: 600; letter-spacing: .12em;
  color: var(--gd-text-3); margin-bottom: 3px;
}
.pbr-player-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gd-text); }
.pbr-player-line { font-family: var(--gd-font-mono); font-size: 11px; color: var(--gd-text-2); margin-top: 3px; }
.pbr-vs {
  font-family: var(--gd-font-display);
  font-size: 13px; font-weight: 600;
  color: var(--gd-text-3); letter-spacing: .1em; flex: none;
}

/* pitch sequence (newest on top) | strike zone */
.pbr-cab-body { display: grid; grid-template-columns: 1fr 280px; gap: 0; }
.pbr-pitches { padding: 8px 8px 8px 12px; border-right: 1px solid var(--gd-line); min-width: 0; }
.pbr-pitches-empty { padding: 24px 12px; color: var(--gd-text-3); font-size: 12px; }
.pbr-pitch {
  display: grid;
  grid-template-columns: 24px 44px 1fr 76px 112px;
  align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 9px;
  transition: background .12s ease;
}
.pbr-pitch:hover { background: rgba(255, 255, 255, .03); }
.pbr-pitch.latest { background: rgba(255, 255, 255, .04); }
.pbr-pitch-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gd-font-mono);
  font-size: 10px; font-weight: 600;
  border: 1px solid var(--gd-line-strong); color: var(--gd-text-2);
}
.pbr-pitch-num.strike { background: rgba(255, 92, 92, .14); border-color: rgba(255, 92, 92, .5); color: var(--gd-strike); }
.pbr-pitch-num.ball { background: rgba(61, 220, 132, .12); border-color: rgba(61, 220, 132, .45); color: var(--gd-ball); }
.pbr-pitch-num.inplay { background: rgba(90, 169, 255, .14); border-color: rgba(90, 169, 255, .5); color: var(--gd-inplay); }
.pbr-pitch-type { font-family: var(--gd-font-mono); font-size: 11px; font-weight: 600; color: var(--gd-text); }
.pbr-pitch-type span { display: block; font-size: 9px; font-weight: 400; color: var(--gd-text-3); margin-top: 1px; letter-spacing: .02em; }
/* Pitch type unknown until the Statcast backfill lands — muted dash, not "?" */
.pbr-pitch-type .pbr-pitch-type--none { display: inline; font-size: 11px; color: var(--gd-text-3); margin-top: 0; }
.pbr-velo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pbr-velo-bar {
  display: block; flex: 1; height: 3px; border-radius: 2px;
  background: var(--gd-surface-3); overflow: hidden; max-width: 120px;
}
.pbr-velo-fill { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #8A92A6, #E4E8F0); }
.pbr-velo-num {
  font-family: var(--gd-font-mono);
  font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--gd-text);
  width: 76px; text-align: right; white-space: nowrap;
}
.pbr-velo-num span { color: var(--gd-text-3); font-size: 10px; }
.pbr-pitch-result {
  font-size: 11px; font-weight: 500; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--gd-text-2);
}
.pbr-pitch-result.strike { color: var(--gd-strike); }
.pbr-pitch-result.ball { color: var(--gd-ball); }
.pbr-pitch-result.inplay { color: var(--gd-inplay); }

/* transient "happening now" strip above the at-bat: ONE centered narrative
   line between hairlines ("Pitching Change: X replaces Y.") — appears when an
   event lands, is replaced by a newer event, clears on the next pitch */
.pbr-cab-banner {
  border-top: 1px solid var(--gd-line);
  border-bottom: 1px solid var(--gd-line);
  padding: 9px 20px;
}
.pbr-cab-banner[hidden] { display: none; }
.pbr-now {
  font-family: var(--gd-font-body);
  font-size: 13px; color: var(--gd-text-2);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pbr-now--challenge { color: #F4D03F; }
.pbr-now--challenge.in-progress { animation: mlbGdPulse 1.6s ease-in-out infinite; }

/* durable event chips on history feed rows (subs, steals, wild pitches,
   challenge verdicts) */
.pbr-chip-event {
  font-family: var(--gd-font-mono);
  font-size: 9px; font-weight: 600; letter-spacing: .08em;
  color: var(--gd-text-2);
  border: 1px solid var(--gd-line-strong);
  padding: 2px 7px; border-radius: 99px;
  white-space: nowrap;
}
.pbr-chip-event.overturned { color: #F4D03F; border-color: rgba(244, 208, 63, .4); }

/* strike zone panel */
.pbr-zone-panel { padding: 16px 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pbr-zone-panel .pbr-cab-zone {
  width: 100%; max-width: 248px;
  background: rgba(14, 17, 22, .55);
  border: 1px solid var(--gd-line);
  border-radius: 10px;
  padding: 6px;
}
.pbr-zone-svg, .pbr-field-svg { width: 100%; height: auto; display: block; }
.pbr-zone-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; justify-content: center; }
.pbr-zli {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--gd-font-mono);
  font-size: 10px; color: var(--gd-text-2); letter-spacing: .06em;
}
.pbr-zdot { width: 7px; height: 7px; border-radius: 50%; }

/* ── "Due up" / "On the mound" side cards ── */
.pbr-dueup { display: flex; flex-direction: column; }
.pbr-due-row { display: flex; align-items: center; gap: 13px; padding: 13px 20px; }
.pbr-due-row + .pbr-due-row { border-top: 1px solid var(--gd-line); }
.pbr-due-pos {
  font-family: var(--gd-font-display);
  font-size: 18px; font-weight: 600;
  color: var(--gd-text-3); width: 16px; text-align: center; flex: none;
}
.pbr-due-info { min-width: 0; }
.pbr-due-name { font-weight: 600; font-size: 13px; color: var(--gd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbr-due-stat { font-family: var(--gd-font-mono); font-size: 11px; color: var(--gd-text-2); margin-top: 2px; }
.pbr-due-label {
  font-family: var(--gd-font-mono);
  font-size: 9px; font-weight: 600; letter-spacing: .1em;
  color: var(--gd-text-3); margin-bottom: 2px;
}
/* Avatar-bases diamond beside the due-up rows — mobile only (the desktop
   header's small diamond covers it there). Runner headshots fill occupied
   bases; initials when no headshot resolves. */
.pbr-due-bases { display: none; position: relative; flex: none; }
.pbr-bb { position: absolute; }
.pbr-bb-sq {
  position: absolute; inset: 0; transform: rotate(45deg);
  border-radius: 10px; background: var(--gd-surface-3);
}
.pbr-bb.on .pbr-bb-sq { background: #2b3344; }
.pbr-bb-pic {
  position: absolute; inset: 12%; width: 76%; height: 76%;
  object-fit: cover; object-position: top center; border-radius: 50%; z-index: 1;
}
.pbr-bb-init {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gd-font-display); font-weight: 600;
  color: var(--gd-text-2);
}
.pbr-pstat-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--gd-line); }
.pbr-pstat { padding: 14px 0 13px; text-align: center; }
.pbr-pstat + .pbr-pstat { border-left: 1px solid var(--gd-line); }
.pbr-pstat b {
  display: block;
  font-family: var(--gd-font-display);
  font-size: 22px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--gd-text);
}
.pbr-pstat span {
  display: block;
  font-family: var(--gd-font-mono);
  font-size: 9px; letter-spacing: .12em;
  color: var(--gd-text-3); margin-top: 6px;
}

/* ── recent plays (grouped by half-inning) ── */
.pbr-plays .pbr-feed { display: flex; flex-direction: column; padding-bottom: 4px; }
.pbr-group-label {
  font-family: var(--gd-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .14em;
  color: var(--gd-text-3);
  padding: 12px 20px 8px;
  display: flex; align-items: center; gap: 10px;
}
.pbr-group-label::after { content: ''; flex: 1; height: 1px; background: var(--gd-line); }
.pbr-group-label:not(:first-child) { border-top: 1px solid var(--gd-line); margin-top: 2px; }
.pbr-play {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 20px;
  transition: background .12s ease;
}
.pbr-pa { cursor: pointer; }
.pbr-pa:hover { background: rgba(255, 255, 255, .025); }
.pbr-pa:focus-visible { outline: 2px solid var(--gd-text-2); outline-offset: -2px; }
.pbr-play-logo { width: 18px; height: 18px; object-fit: contain; flex: none; }
span.pbr-play-logo { display: inline-block; }
.pbr-play-desc { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pbr-play-batter { font-weight: 600; font-size: 13px; color: var(--gd-text); }
.pbr-play-event { font-size: 13px; color: var(--gd-text-2); }
.pbr-play-event.scoring { color: var(--gd-text); font-weight: 500; }
.pbr-chip-score {
  font-family: var(--gd-font-mono);
  font-size: 9px; font-weight: 600; letter-spacing: .08em;
  border: 1px solid;            /* color/border/background tinted inline with the batting team's accent */
  padding: 2px 7px; border-radius: 99px;
  white-space: nowrap;
}
.pbr-play-ctx {
  font-family: var(--gd-font-mono);
  font-size: 11px; color: var(--gd-text-3);
  flex: none; display: flex; align-items: center; gap: 14px;
  font-variant-numeric: tabular-nums;
}
.pbr-ctx-mini { display: flex; align-items: center; gap: 7px; flex: none; }
.pbr-ctx-logo { width: 16px; height: 16px; object-fit: contain; flex: none; }
.pbr-ctx-score { color: var(--gd-text-2); white-space: nowrap; }
.pbr-ctx-outs { white-space: nowrap; }
.pbr-chev { color: var(--gd-text-3); flex: none; }

/* ── mobile-only elements (Game/team tabs + play-card extras) — hidden on desktop ── */
.mlb-gd-tab--mobile { display: none; }
.pbr-play-headline, .pbr-play-sub, .pbr-feed-ava, .pbr-pitch-sub, .pbr-cab-count,
.mlb-gd-outs-line, .pbr-ctx-inn, .pbr-matchup-m,
.pbr-clu-batter, .pbr-clu-count, .pbr-clu-side, .pbr-cab-pthead { display: none; }
/* Wide-screen-only atoms (2026 redesign): hidden <=1000px so the approved mobile
   layout is untouched; the min-width:1001px block reveals them. */
.pbr-fd-top, .pbr-fd-desc, .pbr-fd-pitch, .pbr-fd-marker, .pbr-due-badge,
.pbr-zone-head, .pbr-zone-empty, .pbr-plays-live,
.pbr-zone-connect, .pbr-zone-plate { display: none; }
/* Due-up avatar wrapper: transparent to layout by default (avatar stays the
   direct flex child — mobile row unchanged); the desktop block makes it an
   inline-flex anchor for the lineup-spot badge. */
.pbr-due-avawrap { display: contents; }

/* ── Game tab: leads / momentum / head-to-head / details ── */
/* Game tab (.pbr-gt-*): summary cards → linescore + advantage → team comparison.
   Base rules here; rows stack on mobile and the min-width:1001px block lays them
   out side-by-side for the wide-screen redesign. */
#mlb-pbp-game.pbr-wrap { gap: 16px; }
.pbr-gt-row { display: flex; flex-direction: column; gap: 16px; }
.pbr-gt-card { display: flex; flex-direction: column; }
.pbr-gt-logo { width: 26px; height: 26px; object-fit: contain; flex: none; }

/* Key Game Insights */
.pbr-gt-insight-body { display: flex; align-items: center; gap: 18px; padding: 16px 20px 20px; flex: 1; }
.pbr-gt-diamond { flex: none; }
.pbr-gt-diamond svg { width: 96px; height: 84px; }
.pbr-gt-insight-lines { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pbr-gt-il { font-size: 15px; color: var(--gd-text-2); min-height: 1em; }
.pbr-gt-il b { color: var(--gd-text); font-weight: 700; }
.pbr-gt-il-lead { font-size: 20px; }
.pbr-gt-il-lead b { font-size: 22px; }
.pbr-gt-lead-team { font-family: var(--gd-font-display); font-weight: 700; }
.pbr-gt-base { color: #FFB51B; font-weight: 700; }

/* Score Summary */
.pbr-gt-sc-head { display: grid; grid-template-columns: 1fr 56px 56px 56px; align-items: center; padding: 14px 20px 8px; border-bottom: 1px solid var(--gd-line); }
.pbr-gt-sc-h { font-family: var(--gd-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--gd-text-3); text-align: center; }
.pbr-gt-sc-body { padding: 2px 20px 8px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pbr-gt-sc-row { display: grid; grid-template-columns: 1fr 56px 56px 56px; align-items: center; padding: 14px 0; }
.pbr-gt-sc-row + .pbr-gt-sc-row { border-top: 1px solid var(--gd-line); }
.pbr-gt-sc-team { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pbr-gt-sc-name { font-size: 16px; font-weight: 600; color: var(--gd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbr-gt-sc-v { font-family: var(--gd-font-display); font-weight: 700; font-size: 28px; text-align: center; color: var(--gd-text); font-variant-numeric: tabular-nums; }

/* Game Flow */
.pbr-gt-flow-body { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 20px; flex: 1; justify-content: center; }
.pbr-gt-fl { font-size: 15px; color: var(--gd-text-2); }
.pbr-gt-fl b { color: var(--gd-text); font-weight: 700; }
.pbr-gt-fl-big { font-family: var(--gd-font-display); font-size: 22px; }

/* Score by Inning (linescore table) */
.pbr-gt-scroll { overflow-x: auto; scrollbar-width: thin; flex: 1; }
.pbr-gt-ls { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pbr-gt-ls thead th { font-family: var(--gd-font-mono); font-size: 11px; font-weight: 700; color: var(--gd-text-3); padding: 10px 6px; text-align: center; }
.pbr-gt-ls tbody td { font-size: 15px; color: var(--gd-text-2); padding: 14px 6px; text-align: center; }
.pbr-gt-ls .pbr-gt-ls-team { text-align: left; width: 156px; padding-left: 16px; }
.pbr-gt-ls-teamflex { display: flex; align-items: center; gap: 10px; }
.pbr-gt-ls-teamflex span { font-size: 15px; font-weight: 600; color: var(--gd-text); white-space: nowrap; }
.pbr-gt-ls thead th.cur, .pbr-gt-ls tbody td.cur { background: rgba(255, 255, 255,.08); }
/* current inning: non-colour cue (weight + brightness) so it isn't signalled by tint alone */
.pbr-gt-ls thead th.cur { color: var(--gd-text); font-weight: 800; }
.pbr-gt-ls-tot { color: var(--gd-text); font-weight: 700; font-size: 17px; border-left: 1px solid var(--gd-line); }
.pbr-gt-ls tbody tr + tr td, .pbr-gt-ls tbody tr + tr th { border-top: 1px solid var(--gd-line); }

/* Game Advantage chart */
.pbr-gt-adv-legend { display: flex; gap: 14px; }
.pbr-gt-adv-key { display: inline-flex; align-items: center; gap: 6px; font-family: var(--gd-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--gd-text-2); }
.pbr-gt-adv-key i { width: 8px; height: 8px; border-radius: 50%; }
.pbr-gt-adv-wrap { padding: 10px 14px 12px; flex: 1; display: flex; align-items: center; }
.pbr-gt-adv-svg { width: 100%; height: auto; display: block; }
.pbr-gt-adv-x { fill: var(--gd-text-3); font-family: var(--gd-font-mono); font-size: 11px; }
.pbr-gt-adv-cur { fill: var(--gd-text-2); font-weight: 700; }
.pbr-gt-adv-y { font-family: var(--gd-font-mono); font-size: 11px; font-weight: 700; }
.pbr-gt-adv-note { fill: var(--gd-text-2); font-family: var(--gd-font-mono); font-size: 10px; }

/* Team Comparison */
.pbr-gt-cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 24px 12px; border-bottom: 1px solid var(--gd-line); }
.pbr-gt-cmp-team { display: flex; align-items: center; gap: 10px; font-family: var(--gd-font-display); font-weight: 700; font-size: 16px; letter-spacing: .04em; color: var(--gd-text); }
.pbr-gt-cmp-team-h { justify-content: flex-end; }
.pbr-gt-cmp-body { padding: 10px 24px 18px; }
.pbr-gt-cmp-row { display: grid; grid-template-columns: 64px 1fr 220px 1fr 64px; align-items: center; gap: 16px; height: 46px; }
.pbr-gt-cmp-val { font-family: var(--gd-font-mono); font-size: 15px; font-weight: 600; color: var(--gd-text); }
.pbr-gt-cmp-val-h { text-align: right; }
.pbr-gt-cmp-lbl { text-align: center; font-size: 14px; color: var(--gd-text-2); }
.pbr-gt-cmp-bar { position: relative; height: 6px; border-radius: 3px; background: var(--gd-surface-3); }
.pbr-gt-cmp-bar i { position: absolute; top: 0; height: 100%; border-radius: 3px; opacity: .92; }
.pbr-gt-cmp-ba i { right: 0; }
.pbr-gt-cmp-bh i { left: 0; }

/* ── team tabs: live box score ── */
/* team box-score tab (.pbr-tt-*): heading + summary + pitching/batting tables.
   Base + mobile rules here; the min-width:1001px block scales it up for desktop. */
.pbr-tt-head { position: relative; padding: 4px 4px 2px; overflow: hidden; }
.pbr-tt-title { font-family: var(--gd-font-display); font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--gd-text); letter-spacing: .01em; }
.pbr-tt-sub { font-family: var(--gd-font-mono); font-size: 12px; color: var(--gd-text-3); letter-spacing: .04em; margin-top: 6px; }
.pbr-tt-watermark { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 96px; height: 96px; object-fit: contain; opacity: .06; pointer-events: none; }

/* hairline separators between metrics via a 1px grid gap over the line colour.
   The .pbr-card.pbr-tt-summary (0,2,0) selector holds the background so the
   mobile de-box rule `.pbr-card { background:none }` (0,1,0) can't strip it. */
.pbr-tt-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.pbr-card.pbr-tt-summary { background: var(--gd-line); }
.pbr-tt-metric { text-align: center; padding: 14px 6px; background: var(--gd-surface); }
.pbr-tt-mlabel { font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gd-inplay); }
.pbr-tt-mval { font-family: var(--gd-font-display); font-weight: 700; font-size: 28px; line-height: 1; color: var(--gd-text); font-variant-numeric: tabular-nums; margin-top: 8px; }

.pbr-tt-cardtitle { font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gd-text-3); padding: 14px 18px 8px; }
.pbr-tt-scroll { overflow-x: auto; scrollbar-width: thin; }
.pbr-tt-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pbr-tt-table thead th { font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gd-text-3); padding: 12px 6px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--gd-line); }
.pbr-tt-table tbody td, .pbr-tt-table tbody th { font-size: 14px; color: var(--gd-text); padding: 10px 6px; text-align: center; white-space: nowrap; font-weight: 400; }
.pbr-tt-table tbody tr + tr th, .pbr-tt-table tbody tr + tr td { border-top: 1px solid var(--gd-line); }
.pbr-tt-table tbody tr:hover td, .pbr-tt-table tbody tr:hover th { background: rgba(255, 255, 255,.05); }
.pbr-tt-th-name, .pbr-tt-table td.pbr-tt-name, .pbr-tt-table th.pbr-tt-name { text-align: left; }
.pbr-tt-nameflex { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pbr-tt-pname { font-weight: 600; color: var(--gd-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbr-tt-nid { display: flex; flex-direction: column; min-width: 0; }
.pbr-tt-psub { font-family: var(--gd-font-mono); font-size: 11px; font-weight: 400; color: var(--gd-text-2); margin-top: 2px; }
.pbr-tt-num { color: var(--gd-text-3); width: 30px; }
.pbr-tt-pos { color: var(--gd-text-2); }
.pbr-tt-ava { width: 40px; height: 40px; flex: none; }
.pbr-tt-ava--sm { width: 34px; height: 34px; flex: none; font-size: 12px; }
.pbr-tt-table td.hl-hr, .pbr-tt-table td.hl-xbh { color: #FFB51B; font-weight: 600; }
.pbr-tt-table td.hl-rbi { color: var(--gd-inplay); font-weight: 600; }
.pbr-tt-brow.is-current th, .pbr-tt-brow.is-current td,
.pbr-tt-prow.is-current th, .pbr-tt-prow.is-current td { background: rgba(76,141,255,.07); }
.pbr-tt-brow.is-current th.pbr-tt-name, .pbr-tt-prow.is-current th.pbr-tt-name { box-shadow: inset 3px 0 0 var(--gd-inplay); }
.pbr-tt-atbat, .pbr-tt-cur { font-family: var(--gd-font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: var(--gd-inplay); border: 1px solid rgba(76,141,255,.4); border-radius: 5px; padding: 2px 6px; margin-left: 4px; white-space: nowrap; }
.pbr-tt-brow.is-sub th.pbr-tt-name { padding-left: 22px; }
.pbr-tt-brow.is-sub .pbr-tt-pname { color: var(--gd-text-2); font-weight: 500; }

/* ── detail modal (lives on document.body) ── */
.pbr-modal {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .7); z-index: 1300;   /* above the fixed bottom nav (z-index 1200) */
  display: flex; align-items: center; justify-content: center; padding: 24px;
  font-family: var(--gd-font-body);
}
.pbr-modal-card {
  position: relative;
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-line-strong);
  border-radius: var(--gd-radius);
  width: 100%; max-width: 660px; padding: 22px 22px 24px;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.pbr-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--gd-line-strong);
  color: var(--gd-text-2);
  font-size: 19px; line-height: 1; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pbr-modal-close:hover { color: var(--gd-text); background: rgba(255, 255, 255, .09); }

/* -- headline: result in big condensed caps, situation strip beneath -- */
.pbr-md-head { padding-right: 44px; }
.pbr-modal-title {
  font-family: var(--gd-font-display);
  font-size: 40px; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: .01em;
  color: var(--gd-text); margin: 0 0 8px;
}
/* Narrative results (the /plays fallback writes sentences) drop a face size and
   are allowed to wrap. */
.pbr-modal-title--long { font-size: 24px; line-height: 1.12; letter-spacing: 0; }
/* An unfinished PA titles as "At bat" behind a live dot -- at display size the
   6px inline dot needs lifting off the baseline or it reads as a period. */
.pbr-modal-title .pbr-live-dot {
  width: 9px; height: 9px; margin-right: 11px;
  position: relative; top: -.28em;
}
.pbr-modal-state {
  font-family: var(--gd-font-mono); font-size: 11px; font-weight: 500;
  color: var(--gd-text-2); letter-spacing: .04em;
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
}
/* The score is labelled so it can never read as another count. */
.pbr-md-score {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--gd-line-strong); border-radius: 99px;
  padding: 2px 9px; color: var(--gd-text); font-variant-numeric: tabular-nums;
}
.pbr-md-score i {
  font-style: normal; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gd-text-3);
}

/* -- batter VS pitcher -- */
.pbr-md-matchup {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 14px;
  margin: 18px 0 2px;
}
.pbr-md-side { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pbr-md-side--p { flex-direction: row-reverse; text-align: right; }
.pbr-md-ava { width: 46px; height: 46px; font-size: 15px; flex: none; }
.pbr-md-ident { min-width: 0; }
.pbr-md-name {
  font-size: 15px; font-weight: 700; color: var(--gd-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pbr-md-hand { color: var(--gd-text-3); font-weight: 500; margin-left: 5px; }
.pbr-md-role {
  font-family: var(--gd-font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 4px;
}
.pbr-md-vs {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gd-surface); border: 1px solid var(--gd-line-strong);
  font-family: var(--gd-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .04em; color: var(--gd-text-3);
}
/* Narrow: the two sides stop fitting side by side long before the names do,
   so stack them and let VS become the divider between. */
@media (max-width: 700px) {
  .pbr-modal .pbr-md-matchup { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pbr-modal .pbr-md-vs { justify-self: center; }
  .pbr-modal .pbr-md-side--p { flex-direction: row; text-align: left; }
}

/* -- panels -- */
.pbr-modal-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px; margin: 14px 0 12px; align-items: stretch;
}
/* With a ball in play the park earns the wider column. Without one the right
   column is just the pitch sequence, which is sized by its own row count -- so
   the columns are top-aligned rather than stretched into an empty box. */
.pbr-modal-grid:not(.pbr-modal-grid--bip) { align-items: start; }
.pbr-modal-grid--bip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.pbr-md-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pbr-modal-grid--bip .pbr-md-right > .pbr-md-field { flex: 1 1 auto; }
@media (max-width: 700px) {
  .pbr-modal-grid, .pbr-modal-grid--bip { grid-template-columns: minmax(0, 1fr); }
}
.pbr-md-panel {
  background: var(--gd-surface);
  border: 1px solid var(--gd-line);
  border-radius: 12px;
  padding: 12px 13px 13px;
  min-width: 0;
}
.pbr-panel-title {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--gd-font-mono);
  font-size: 10px; font-weight: 600;
  color: var(--gd-text-3); text-transform: uppercase; letter-spacing: .16em;
  margin-bottom: 10px;
}
.pbr-panel-title svg { width: 13px; height: 13px; flex: none; opacity: .85; }
/* Caps the zone when the grid stacks into one column (it is ~230px in the
   two-column layout, so this only bites on narrow screens). */
.pbr-md-zone .pbr-zone-svg { max-width: 360px; margin: 0 auto; }
.pbr-md-panel .pbr-zone-legend { margin-top: 10px; gap: 14px; }
/* code -> full name key for the tags plotted beside each pitch dot */
.pbr-md-key {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gd-line);
}
.pbr-md-ki {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--gd-font-mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--gd-text-2); min-width: 0;
}
.pbr-md-kc {
  flex: none; min-width: 26px; text-align: center;
  font-weight: 700; color: var(--gd-text);
  background: var(--gd-surface-3); border: 1px solid var(--gd-line-strong);
  border-radius: 5px; padding: 2px 5px;
}
/* park + the distance callout riding its top-right corner */
.pbr-md-fieldbox { position: relative; }
.pbr-md-dist {
  position: absolute; top: 2px; right: 4px;
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--gd-font-display); color: #FFB51B; line-height: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.pbr-md-dist b { font-size: 26px; font-weight: 700; }
.pbr-md-dist i {
  font-family: var(--gd-font-mono); font-style: normal;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
}
/* Fixed 3 slots (EV / LA / distance) so a partial Statcast row keeps its tiles
   the same size and place instead of ballooning to fill the width. */
.pbr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pbr-stat {
  background: var(--gd-surface); border: 1px solid var(--gd-line);
  border-radius: 10px; padding: 10px 8px 9px; text-align: center;
}
.pbr-stat-ico { display: flex; justify-content: center; color: var(--gd-text-3); margin-bottom: 5px; }
.pbr-stat-ico svg { width: 15px; height: 15px; }
.pbr-stat-val {
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  font-family: var(--gd-font-display); font-size: 25px; font-weight: 700;
  line-height: 1; color: var(--gd-text);
}
.pbr-stat-val i { font-family: var(--gd-font-body); font-style: normal; font-size: 11px; font-weight: 500; color: var(--gd-text-2); }
.pbr-stat-lbl { font-family: var(--gd-font-mono); font-size: 8.5px; color: var(--gd-text-3); text-transform: uppercase; letter-spacing: .1em; margin-top: 5px; }
.pbr-modal-note { font-size: 12px; color: var(--gd-text-3); padding: 16px 0; }

/* -- pitch sequence -- */
.pbr-pitchlist { display: flex; flex-direction: column; gap: 5px; }
.pbr-pitch-row {
  display: grid;
  grid-template-columns: 18px 38px minmax(58px, auto) minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--gd-text-2);
  padding: 8px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid transparent;
}
/* the pitch that ended the PA -- accent set inline (gold on a hit, else the
   pitch's own outcome color) */
.pbr-pitch-row.is-final {
  background: rgba(255, 255, 255, .05);
  border-color: var(--pbr-acc, var(--gd-line-strong));
  box-shadow: 0 0 16px -8px var(--pbr-acc, transparent);
}
.pbr-pitch-row.is-final .pbr-pcall { color: var(--pbr-acc, var(--gd-text)); font-weight: 700; }
.pbr-pnum { color: var(--gd-text-3); font-family: var(--gd-font-mono); font-variant-numeric: tabular-nums; text-align: center; }
.pbr-ptype {
  font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700;
  padding: 2px 0; border-radius: 6px; text-align: center;
}
.pbr-pvelo { color: var(--gd-text); font-family: var(--gd-font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pbr-pvelo i { font-style: normal; color: var(--gd-text-3); font-size: 9.5px; margin-left: 3px; }
.pbr-pcall {
  color: var(--gd-text-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 1px solid var(--gd-line); padding-left: 12px;
}
.pbr-pcount { font-family: var(--gd-font-mono); font-size: 10.5px; color: var(--gd-text-3); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .mlb-gd-pulse, .mlb-gd-tdot, .pbr-live-dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   GAME TRACKER — MOBILE (≤1000px)
   IMPORTANT SIZING CONTEXT: templates/index.html ships NO <meta viewport>,
   so phones lay the page out at a ~980px VIRTUAL width and zoom out ~2.5×.
   Every size below is therefore ~1.7-2× its "natural" value to land readable
   on the glass — same convention as the rest of the site's mobile CSS. If a
   real viewport meta is ever added site-wide, this block must be re-scaled.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  /* ── ONE CONTINUOUS SURFACE ──
     The reference design reads as a single full-bleed sheet: no boxed cards,
     content directly on the page background, sections split by hairlines, and
     the tab row sitting seamlessly between the scoreboard and the feed. */
  #mlb-game-detail { padding: 0; gap: 0; }
  /* the classic tabs keep their breathing room */
  #mlb-game-detail .mlb-gd-tab-panel[data-panel="info"],
  #mlb-game-detail .mlb-gd-tab-panel[data-panel="props"],
  #mlb-game-detail .mlb-gd-tab-panel[data-panel="weather"] { padding: 12px; }

  /* scoreboard: flat full-bleed band (no gradient card / border / radius) */
  .mlb-gd-sb { background: none; border: none; border-radius: 0; }

  /* tabs: flush under the scoreboard, full-bleed with side padding */
  #mlb-game-detail .mlb-gd-tabs { margin: 0; padding: 0 10px; }

  /* tracker sections: de-boxed — hairlines instead of card chrome */
  .pbr-wrap { gap: 0; }
  #mlb-pbp-root .pbr-grid { gap: 0; }
  #mlb-pbp-root .pbr-side { gap: 0; }
  .pbr-card { background: none; border: none; border-radius: 0; border-bottom: 1px solid var(--gd-line); }
  .pbr-card-head { border-bottom: none; padding-bottom: 4px; }
  .pbr-matchup { border-bottom: none; }
  .pbr-pitches { border-right: none; }

  /* topbar: back link only — the venue/weather line lives in the Game tab */
  .mlb-gd-topbar { padding: 8px 14px 0; }
  .mlb-gd-back { font-size: 19px; padding: 4px 6px 4px 0; gap: 10px; }
  .mlb-gd-back svg { width: 20px; height: 20px; }
  .mlb-gd-meta { display: none; }
  .mlb-gd-hide-m { display: none !important; }

  /* scoreboard: one compact row, pulled into a centered cluster so the clubs
     don't fling to the screen edges at the 980px virtual width */
  .mlb-gd-sb-main {
    grid-template-columns: 1fr minmax(150px, auto) 1fr;
    padding: 16px 24px 12px; gap: 10px;
  }
  /* team block: logo at the outer edge, score with the nickname beneath it */
  .mlb-gd-team {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "logo score" "logo info";
    gap: 0 18px; align-items: center; justify-content: start;
  }
  .mlb-gd-team-home {
    grid-template-areas: "score logo" "info logo";
    justify-content: end;
  }
  .mlb-gd-team-logo { grid-area: logo; width: 66px; height: 66px; }
  .mlb-gd-team-score {
    grid-area: score; justify-self: center;
    font-size: 58px; padding: 0; margin: 0; line-height: 1; align-self: end;
  }
  .mlb-gd-team-info { grid-area: info; justify-self: center; text-align: center; align-self: start; }
  .mlb-gd-team-code, .mlb-gd-team-name { display: none; }
  .mlb-gd-team-nick { display: block; font-size: 23px; font-weight: 700; color: var(--gd-text); margin-top: 5px; }
  /* center: just "● TOP 2ND / 1 out" — the diamond moves into the due-up
     block (with runner avatars) and the count headline lives in the at-bat */
  .mlb-gd-state { gap: 3px; padding: 0 6px; }
  .mlb-gd-live-chip { display: none; }
  .mlb-gd-final-chip { font-size: 13px; padding: 4px 12px; }
  .mlb-gd-basecount { display: none; }
  .mlb-gd-inning { font-size: 22px; letter-spacing: .1em; gap: 9px; }
  .mlb-gd-inning svg { display: none; }
  .mlb-gd-inning::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none;
    background: var(--gd-ball);
    animation: mlbGdPulse 1.6s ease-in-out infinite;
  }
  .mlb-gd-outs-line { display: block; font-size: 15px; color: var(--gd-text-2); }
  .mlb-gd-when-time { font-size: 26px; }
  .mlb-gd-when-date { font-size: 15px; }

  /* the box/linescore lives in the Game tab on phones — keep the header lean */
  #mlb-gd-linescore { display: none; }

  /* tabs: the live five-tab set (Live · Props · Game · AWAY · HOME) */
  #mlb-game-detail .mlb-gd-tabs { overflow-x: auto; scrollbar-width: none; justify-content: center; }
  #mlb-game-detail .mlb-gd-tabs::-webkit-scrollbar { display: none; }
  #mlb-game-detail .mlb-gd-tab { white-space: nowrap; flex: none; font-size: 23px; padding: 23px 26px 11px; gap: 10px; }
  #mlb-game-detail .mlb-gd-tab--mobile { display: flex; }
  #mlb-game-detail .mlb-gd-tab--desktop { display: none; }
  .mlb-gd-tdot { width: 9px; height: 9px; }

  /* density + readable card chrome */
  .pbr-wrap { gap: 14px; }
  .pbr-card { border-radius: 12px; }
  .pbr-card-head { padding: 14px 18px; }
  .pbr-card-title { font-size: 14px; }
  .pbr-empty { font-size: 18px; }

  /* Live tab: on-deck block first, no mound card, NO section kicker lines
     (DUE UP / THIS AT-BAT / RECENT PLAYS) — the content speaks for itself */
  #mlb-pbp-root .pbr-grid { grid-template-columns: 1fr; }
  #mlb-pbp-root .pbr-side { order: -1; }
  #mlb-pbp-mound { display: none; }
  #mlb-pbp-root .pbr-card-head { display: none; }
  #mlb-pbp-root .pbr-group-label { display: none; }
  .pbr-ctx-inn { display: inline; }

  /* due up: rows left, big avatar-bases diamond right */
  .pbr-due-flex { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 22px 12px 4px; }
  .pbr-due-row { padding: 8px 14px; gap: 14px; }
  .pbr-due-row + .pbr-due-row { border-top: none; }
  .pbr-due-label { font-size: 13px; margin-bottom: 3px; }
  .pbr-due-name { font-size: 20px; }
  .pbr-due-stat { font-size: 16px; margin-top: 3px; }
  .pbr-headshot--sm { width: 52px; height: 52px; font-size: 17px; }
  .pbr-due-bases { display: block; width: 168px; height: 128px; }
  .pbr-bb { width: 62px; height: 62px; }
  .pbr-bb--2 { top: 0; left: 53px; }
  .pbr-bb--1 { top: 58px; left: 106px; }
  .pbr-bb--3 { top: 58px; left: 0; }
  .pbr-bb-init { font-size: 17px; }

  /* at-bat: count headline, compact name·stat lines, zone beside the list */
  .pbr-cab-status { display: none; }
  /* the HITTER owns the block: big avatar with the pitcher tucked into its
     bottom-right corner, count headline + two tight lines beside (theScore) */
  .pbr-matchup { display: none; }
  .pbr-matchup-m { display: flex; gap: 18px; padding: 16px 18px 10px; align-items: flex-start; }
  .pbr-ab-faces { position: relative; width: 80px; height: 82px; flex: none; }
  .pbr-face-b { width: 66px; height: 66px; font-size: 21px; }
  .pbr-face-p { position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; font-size: 12px; border: 3px solid #0d1320; }
  .pbr-ab-text { min-width: 0; flex: 1; }
  .pbr-matchup-m .pbr-cab-count { display: block; padding: 0 0 7px; font-size: 25px; font-weight: 700; color: var(--gd-text); }
  .pbr-ab-line {
    font-family: var(--gd-font-body); font-size: 15px; color: var(--gd-text-2);
    margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pbr-ab-line b { color: var(--gd-text); font-weight: 700; font-size: 18px; }
  .pbr-ab-line .pbr-cab-bline, .pbr-ab-line .pbr-cab-pline { font-size: 14px; }
  .pbr-ab-line--p { font-size: 14px; }
  .pbr-cab-body { grid-template-columns: 1fr 44%; }
  .pbr-zone-panel { padding: 14px 16px 12px; justify-content: flex-start; }
  .pbr-zone-panel .pbr-cab-zone { max-width: 360px; padding: 8px; }
  .pbr-zone-legend { display: none; }

  /* pitch rows: number + call headline + "type · mph" subline */
  .pbr-pitch { grid-template-columns: 34px 1fr; gap: 14px; padding: 10px 12px; }
  .pbr-pitch-num { width: 28px; height: 28px; font-size: 13px; }
  .pbr-pitch-type, .pbr-velo, .pbr-velo-num { display: none; }
  .pbr-pitch-result { text-align: left; white-space: normal; }
  .pbr-pitch-call { display: block; font-size: 18px; font-weight: 600; }
  .pbr-pitch-sub { display: block; font-family: var(--gd-font-mono); font-size: 14px; color: var(--gd-text-3); margin-top: 2px; }
  .pbr-pitches-empty { font-size: 16px; padding: 28px 16px; }
  .pbr-cab-banner { padding: 12px 18px; }
  .pbr-now { font-size: 16px; }

  /* recent plays → one card per play: context on top, headline, day lines */
  .pbr-play {
    display: grid;
    grid-template-columns: 68px 1fr 18px;
    grid-template-rows: auto auto;
    gap: 3px 16px;
    align-items: start;
    padding: 17px 18px 18px;
  }
  .pbr-play-logo { display: none; }
  /* theScore alignment: the logos+score cluster is exactly as wide as the
     avatar column + grid gap, so "Top 3 · 2 out" starts flush with the text
     column below; score and state share one size/weight/color. */
  .pbr-play-ctx {
    grid-column: 1 / 3; grid-row: 1;
    flex-direction: row; justify-content: flex-start; gap: 0;
    font-family: var(--gd-font-body);
    font-size: 15px; font-weight: 600; color: var(--gd-text-2);
    margin-bottom: 6px;
  }
  .pbr-play-ctx .pbr-ctx-outs { display: inline; }
  .pbr-ctx-logo { width: 18px; height: 18px; }
  .pbr-ctx-mini { min-width: 84px; gap: 8px; }
  .pbr-play-ctx .pbr-ctx-score { color: inherit; }
  .pbr-feed-ava { display: block; position: relative; grid-column: 1; grid-row: 2; align-self: center; width: 68px; height: 68px; }
  .pbr-headshot--feed { display: flex; width: 68px; height: 68px; font-size: 21px; }
  .pbr-ava-badge { position: absolute; right: -5px; bottom: -3px; width: 27px; height: 27px; object-fit: contain; }
  .pbr-play-desc { display: block; min-width: 0; grid-column: 2; grid-row: 2; }
  .pbr-play-batter, .pbr-play-event { display: none; }
  .pbr-play-headline { display: block; font-size: 20px; font-weight: 700; color: var(--gd-text); line-height: 1.3; }
  .pbr-play-headline.scoring { color: var(--gd-ball); }
  .pbr-play-sub { display: block; font-family: var(--gd-font-body); font-size: 15px; color: var(--gd-text-2); margin-top: 3px; }
  .pbr-play-sub--b { color: var(--gd-text); font-size: 16px; }
  /* bare circular avatars (no ring chrome) like the reference */
  .pbr-headshot--feed, .pbr-headshot--sm, .pbr-face-b, .pbr-face-p { border-color: transparent; }
  .pbr-chip-score { margin-top: 8px; display: inline-block; margin-right: 8px; font-size: 12px; padding: 3px 10px; }
  /* durable event notes: quiet mono lines, not shouting pills */
  .pbr-chip-event {
    display: block; border: none; padding: 0; margin-top: 7px;
    font-size: 12px; letter-spacing: .08em; color: var(--gd-text-3);
  }
  .pbr-chip-event::before { content: "↳ "; }
  .pbr-chev { grid-column: 3; grid-row: 2; align-self: center; width: 18px; height: 18px; }
  .pbr-group-label { padding: 14px 18px 6px; font-size: 13px; }

  /* Game tab (mobile): cards stack; upsize the linescore + comparison text */
  .pbr-gt-ls thead th { font-size: 14px; }
  .pbr-gt-ls tbody td { font-size: 20px; padding: 16px 8px; }
  .pbr-gt-ls-teamflex span { font-size: 19px; }
  .pbr-gt-ls-tot { font-size: 22px; }
  .pbr-gt-cmp-row { grid-template-columns: 64px 1fr 150px 1fr 64px; height: 52px; }
  .pbr-gt-cmp-val { font-size: 18px; }
  .pbr-gt-cmp-lbl { font-size: 16px; }
  .pbr-gt-sc-v { font-size: 34px; }
  .pbr-gt-il { font-size: 18px; }
  .pbr-gt-il-lead { font-size: 24px; }
  .pbr-gt-fl { font-size: 18px; }
  .mlb-gd-ls-chal { font-size: 10px; }

  /* team box-score tab â scaled up for the ~980px virtual mobile viewport; the
     summary stays a 2Ã3 grid and the tables scroll horizontally. */
  .pbr-tt-head { padding: 8px 14px 2px; }
  .pbr-tt-title { font-size: 40px; }
  .pbr-tt-sub { font-size: 18px; margin-top: 8px; }
  .pbr-tt-watermark { width: 130px; height: 130px; }
  .pbr-tt-metric { padding: 18px 8px; }
  .pbr-tt-mlabel { font-size: 15px; }
  .pbr-tt-mval { font-size: 44px; margin-top: 10px; }
  .pbr-tt-cardtitle { font-size: 15px; padding: 18px 20px 10px; }
  .pbr-tt-table thead th { font-size: 15px; padding: 16px 12px; }
  .pbr-tt-table tbody td, .pbr-tt-table tbody th { font-size: 22px; padding: 15px 12px; }
  .pbr-tt-nameflex { gap: 14px; }
  .pbr-tt-psub { font-size: 15px; }
  .pbr-tt-num { width: 42px; }
  .pbr-tt-ava { width: 58px; height: 58px; }
  .pbr-tt-ava--sm { width: 50px; height: 50px; font-size: 17px; }
  .pbr-tt-atbat, .pbr-tt-cur { font-size: 12px; padding: 3px 8px; }
  .pbr-tt-brow.is-sub th.pbr-tt-name { padding-left: 30px; }

  /* detail modal: enlarge content + widen card (it lives on document.body) */
  .pbr-modal { padding: 10px; }
  .pbr-modal .pbr-modal-card { max-width: 820px; padding: 26px 22px 28px; }
  .pbr-modal .pbr-modal-close { width: 44px; height: 44px; font-size: 26px; top: 18px; right: 18px; }
  .pbr-modal .pbr-md-head { padding-right: 62px; }
  .pbr-modal .pbr-modal-title { font-size: 52px; margin-bottom: 10px; }
  .pbr-modal .pbr-modal-title--long { font-size: 32px; }
  .pbr-modal .pbr-modal-state { font-size: 15px; gap: 11px; }
  .pbr-modal .pbr-md-score { padding: 3px 11px; }
  .pbr-modal .pbr-md-score i { font-size: 12px; }
  .pbr-modal .pbr-md-matchup { gap: 18px; margin-top: 22px; }
  .pbr-modal .pbr-md-ava { width: 62px; height: 62px; font-size: 20px; }
  .pbr-modal .pbr-md-name { font-size: 21px; }
  .pbr-modal .pbr-md-role { font-size: 12px; margin-top: 5px; }
  .pbr-modal .pbr-md-vs { width: 40px; height: 40px; font-size: 12px; }
  .pbr-modal .pbr-md-panel { padding: 15px 16px 16px; border-radius: 14px; }
  .pbr-modal .pbr-panel-title { font-size: 13px; gap: 9px; margin-bottom: 12px; }
  .pbr-modal .pbr-panel-title svg { width: 17px; height: 17px; }
  /* the at-bat card drops this legend on mobile; the modal keeps it -- it is the
     only key to the dot colors on a completed PA */
  .pbr-modal .pbr-zone-legend { display: flex; gap: 18px; }
  .pbr-modal .pbr-zli { font-size: 14px; }
  .pbr-modal .pbr-zdot { width: 11px; height: 11px; }
  .pbr-modal .pbr-md-ki { font-size: 13px; gap: 10px; }
  .pbr-modal .pbr-md-kc { font-size: 13px; min-width: 36px; padding: 3px 7px; }
  .pbr-modal .pbr-md-dist b { font-size: 36px; }
  .pbr-modal .pbr-md-dist i { font-size: 12px; }
  .pbr-modal .pbr-stats { gap: 10px; }
  .pbr-modal .pbr-stat-ico svg { width: 20px; height: 20px; }
  .pbr-modal .pbr-stat-val { font-size: 34px; }
  .pbr-modal .pbr-stat-val i { font-size: 15px; }
  .pbr-modal .pbr-stat-lbl { font-size: 12px; }
  .pbr-modal .pbr-pitch-row {
    font-size: 17px; padding: 11px 13px; gap: 13px;
    grid-template-columns: 24px 52px minmax(80px, auto) minmax(0, 1fr) auto;
  }
  .pbr-modal .pbr-ptype { font-size: 13px; padding: 3px 0; }
  .pbr-modal .pbr-pvelo { font-size: 16px; }
  .pbr-modal .pbr-pvelo i { font-size: 13px; }
  .pbr-modal .pbr-pcount { font-size: 14px; }
  .pbr-modal .pbr-modal-note { font-size: 16px; }

  /* ── Props tab: the pregame decision surface. Same treatment as the Live
     tab — one continuous de-boxed surface, type at ~1.7-2x natural for the
     980px virtual viewport (no viewport meta site-wide). ── */
  #mlb-game-detail .mlb-gd-props-group {
    background: none; border: none; border-radius: 0;
    padding: 6px 4px 16px; box-shadow: none;
  }
  .mlb-gd-pills {
    flex-wrap: nowrap; overflow-x: auto; gap: 10px;
    padding: 4px 2px 14px; margin-bottom: 10px;
    scrollbar-width: none;
  }
  .mlb-gd-pills::-webkit-scrollbar { display: none; }
  .mlb-gd-pill { font-size: 22px; padding: 13px 26px; flex: none; }
  .mlb-gd-players-list { grid-template-columns: 1fr; gap: 4px; }
  .mlb-gd-team-col-header { font-size: 18px; padding: 18px 0 12px; margin-bottom: 2px; }
  .mlb-gd-team-col-logo { width: 36px; height: 36px; }
  .mlb-gd-prop-player { padding: 17px 0; gap: 14px; }
  .mlb-gd-prop-header { gap: 15px; }
  .mlb-gd-prop-avatar { width: 62px; height: 62px; }
  .mlb-gd-prop-name { font-size: 24px; font-weight: 700; }
  .mlb-gd-prop-verdict { font-size: 19px; margin-top: 4px; }
  .mlb-gd-factors { gap: 9px; margin-top: 10px; }
  .mlb-gd-factor { font-size: 16px; padding: 6px 15px; }
  .mlb-gd-prop-grade { height: 60px; padding: 0 15px; gap: 9px; border-radius: 10px; }
  .mlb-gd-grade-num { font-size: 19px; }
  .mlb-gd-grade-word { font-size: 12px; }
  .mlb-gd-edge-pill { height: 60px; padding: 0 15px; gap: 9px; border-radius: 10px; }
  .mlb-gd-prop-right { gap: 12px; }
  .mlb-gd-lines { gap: 9px; }
  .mlb-gd-line-over, .mlb-gd-line-under {
    font-size: 19px; min-width: 132px; height: 60px; padding: 0 15px; border-radius: 10px;
  }
  .mlb-gd-more-btn { padding: 4px 18px; }
  .mlb-gd-more-btn svg { width: 25px; height: 25px; }
  .mlb-gd-props-group .mlb-gd-empty { font-size: 18px; padding: 18px 4px; }

  /* Weather-adjusted props: single column + ~2x sizing, like the Props tab */
  .mlb-gd-wxlist { grid-template-columns: 1fr; }
  .mlb-gd-wxgroup-head { font-size: 16px; padding-bottom: 12px; }
  .mlb-gd-wxgroup-n { font-size: 12px; padding: 2px 9px; }
  .mlb-gd-wxrow { grid-template-columns: 52px 1fr auto; gap: 14px; padding: 15px 0; }
  .mlb-gd-wx-ava { width: 52px; height: 52px; }
  .mlb-gd-wx-bet { font-size: 16px; gap: 9px; margin-top: 3px; }
  .mlb-gd-wx-hand { font-size: 12px; padding: 2px 7px; }
  .mlb-gd-wx-chips { gap: 8px; margin-top: 9px; }
  .mlb-gd-wxchip { font-size: 13px; padding: 4px 12px; }
  .mlb-gd-wx-pill { height: 48px; padding: 0 14px; gap: 8px; border-radius: 10px; }
  .mlb-gd-wx-ic { font-size: 15px; }
  .mlb-gd-wx-od { font-size: 16px; }
}

/* ── Live in-play odds: suspended lines (book pulled the quote mid-game) ── */
.mlb-gd-line-row[data-live-suspended="1"] {
  opacity: 0.45;
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════════════
   DESKTOP LIVE TAB — Game-State Cluster (from Claude Design). The at-bat is
   one instrument panel: batter | strike-zone + giant count | bases + pitcher,
   with the pitch table full-width below. Bases + pitcher fold up out of the
   old due-up/mound bands (the mound band is retired on desktop). Boxed cards —
   the cluster IS the integration. Real player/team images throughout. All new
   pieces are desktop-only (display:none ≤1000px), so the approved mobile
   layout is untouched. Scoped under #mlb-pbp-root (the Game/team tab panels
   share .pbr-wrap and must not catch these).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1001px) {
  /* macro: stage (col 1) | feed rail (col 2). Live/final switch is the
     sibling selector reacting to the `hidden` flips paintLive already does. */
  #mlb-pbp-root.pbr-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
  }
  #mlb-pbp-root .pbr-grid {
    grid-column: 1; grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  /* Feed rail: pinned + INDEPENDENTLY SCROLLABLE. Caps to the viewport and
     scrolls its inner feed when the play list outgrows the stage, instead of
     stretching the whole page tall. The "Recent plays" card-head stays put
     (only .pbr-feed scrolls). Sticky degrades gracefully — if an app-shell
     ancestor has overflow set so sticky no-ops, the inner feed still scrolls
     on its own, which is the actual ask. */
  /* The rail matches the LEFT column's height and scrolls its play list
     INTERNALLY, so the tracker stays one screen-height unit — no full-page
     scroll to reach the feed's bottom. `height:0; min-height:100%` makes the
     rail take the grid row's height (set by the matchup card + due-up) without
     its own content inflating that row; .pbr-feed then flexes and scrolls. */
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays {
    grid-column: 2; grid-row: 1; min-width: 0;
    height: 0; min-height: 100%;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-feed {
    flex: 1 1 auto; overflow-y: auto; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-feed::-webkit-scrollbar { width: 8px; }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-feed::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.16); border-radius: 99px;
  }
  #mlb-pbp-root .pbr-grid[hidden] + .pbr-plays { grid-column: 1 / -1; }
  #mlb-pbp-root .pbr-side { gap: 16px; }
  #mlb-pbp-mound { display: none; }                    /* folded into the cluster */

  /* âââ WHY :is(#mlb-pbp-current, .pbr-cab) EVERYWHERE BELOW âââ
     The at-bat card used to be styled by its id alone. Schedule theater mode
     renders the SAME card once per live game, and ids must be unique â so the
     card is now addressed by its class (.pbr-cab, already on the element at
     gameDetailMLBPBP.js renderPbpPanelHtml) as well.
     :is() is used rather than a plain rename because it takes the specificity
     of its MOST specific argument â so every rule here keeps its original
     id-level weight (0,1,0,x) and the game page's cascade is unchanged. A bare
     .pbr-cab would drop to (0,0,1,x) and start tying .pbr-card rules, whose
     ordering these rules were never written to survive (see the specificity
     note at the mobile de-box rule above).
     If you add a rule for this card, follow the same pattern. */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-card-head { display: none; }   /* the cluster needs no title */

  /* reveal the desktop cluster atoms (base rule hides them ≤1000) */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-batter,
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-side,
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-count { display: flex; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-cab-pthead { display: grid; }

  /* ── the cluster grid inside the at-bat card ── */
  :is(#mlb-pbp-current, .pbr-cab) {
    display: grid;
    grid-template-columns: 1fr 312px 1fr;
    grid-template-areas:
      "banner banner banner"
      "side center batter"
      "side count  batter"
      "pthead pthead pthead"
      "pitch  pitch  pitch";
  }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-cab-banner { grid-area: banner; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-cab-banner[hidden] { display: block; visibility: hidden; }  /* CLS slot reservation */

  /* left column — batter */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-batter {
    grid-area: batter; align-self: center;
    flex-direction: column; gap: 14px; padding: 24px 22px;
  }
  .pbr-clu-ava { width: 56px; height: 56px; font-size: 18px; }
  .pbr-clu-name { font-weight: 700; font-size: 22px; line-height: 1.12; margin-top: 3px; color: var(--gd-text); }
  .pbr-clu-pos { font-family: var(--gd-font-mono); font-size: 12px; color: var(--gd-text-2); margin-top: 5px; }
  .pbr-clu-chips { display: flex; gap: 7px; flex-wrap: wrap; }
  .pbr-chip2 {
    font-family: var(--gd-font-mono); font-size: 11px; color: #C7CBD3;
    background: var(--gd-surface-2); border: 1px solid var(--gd-line);
    border-radius: 5px; padding: 4px 9px;
  }
  .pbr-chip2 b { color: #fff; font-weight: 700; }

  /* center column — strike zone (top) + giant count (bottom): one well */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-zone-panel {
    grid-area: center;
    background: none;
    border-left: 1px solid var(--gd-line); border-right: 1px solid var(--gd-line);
    padding: 20px 14px 6px; gap: 0; justify-content: flex-start;
  }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-zone-panel .pbr-cab-zone { max-width: 248px; background: none; border: none; padding: 0; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-zone-legend { display: none; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-count {
    grid-area: count;
    background: none;
    border-left: 1px solid var(--gd-line); border-right: 1px solid var(--gd-line);
    padding: 4px 14px 22px;
    flex-direction: column; align-items: center; gap: 12px;
  }
  .pbr-clu-bs {
    font-family: var(--gd-font-display); font-weight: 700; font-size: 58px; line-height: .78;
    display: flex; align-items: baseline; gap: 3px;
  }
  .pbr-clu-b { color: var(--gd-ball); }
  .pbr-clu-s { color: var(--gd-strike); }
  .pbr-clu-sep { color: #3a4150; font-size: 36px; }
  .pbr-clu-pips { display: flex; align-items: center; gap: 14px; }
  .pbr-clu-pgrp { display: flex; align-items: center; gap: 5px; }
  .pbr-clu-pgrp i { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--gd-text-3); }
  .pbr-clu-pip { width: 9px; height: 9px; border-radius: 50%; border: 1.3px solid rgba(255,255,255,.18); }
  .pbr-clu-pip.on-b { background: var(--gd-ball); border-color: var(--gd-ball); }
  .pbr-clu-pip.on-s { background: var(--gd-strike); border-color: var(--gd-strike); }

  /* right column — bases + runners + pitcher + stat strip */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-side {
    grid-area: side; align-self: center;
    flex-direction: column; gap: 16px; padding: 24px 22px;
  }
  .pbr-clu-situ { display: flex; align-items: center; gap: 18px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-bases .pbr-due-bases { display: block; width: 80px; height: 80px; flex: none; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-bases .pbr-bb { width: 32px; height: 32px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-bases .pbr-bb--2 { top: 0; left: 24px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-bases .pbr-bb--1 { top: 24px; left: 48px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-bases .pbr-bb--3 { top: 24px; left: 0; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-bases .pbr-bb-init { font-size: 11px; }
  .pbr-clu-rlabel { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--gd-text-3); margin-bottom: 6px; }
  .pbr-clu-rlist { font-family: var(--gd-font-mono); font-size: 12px; color: #C7CBD3; line-height: 1.7; }
  .pbr-clu-rb { color: var(--gd-inplay); }
  .pbr-clu-div { height: 1px; background: var(--gd-line); }
  .pbr-clu-pitcher { display: flex; align-items: center; gap: 13px; }
  .pbr-clu-pname { font-weight: 600; font-size: 16px; color: var(--gd-text); }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pstat { border-top: none; border: 1px solid var(--gd-line); border-radius: 9px; overflow: hidden; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pstat .pbr-pstat { padding: 9px 0; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pstat .pbr-pstat b { font-size: 21px; }

  /* full-width pitch table below the cluster */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-cab-body { display: contents; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-cab-pthead {
    grid-area: pthead;
    grid-template-columns: 24px 1fr 76px 130px; gap: 12px;
    padding: 9px 22px;
    border-top: 1px solid var(--gd-line); border-bottom: 1px solid var(--gd-line);
    font-family: var(--gd-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--gd-text-3);
  }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-cab-pthead .pbr-pth-mph,
  :is(#mlb-pbp-current, .pbr-cab) .pbr-cab-pthead .pbr-pth-res { text-align: right; }
  /* pitch list: ALWAYS reserve room for 6 rows (fixed height, not grow-to-fit),
     so the card doesn't reflow as pitches arrive; scroll internally past 6
     (newest on top). --pbr-pitch-h is the per-row height; the pthead stays put. */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-pitches {
    grid-area: pitch; border-right: none; padding: 6px 12px 8px;
    --pbr-pitch-h: 43px;
    height: calc(var(--pbr-pitch-h) * 6 + 14px);
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255,.28) transparent;
  }
  /* Written out rather than :is() — ::-webkit-scrollbar is a legacy pseudo
     handled by a separate WebKit code path that has historically dropped rules
     whose selector it cannot parse. No rule competes with these, so the
     specificity difference between the two branches is immaterial. */
  #mlb-pbp-current .pbr-pitches::-webkit-scrollbar,
  .pbr-cab .pbr-pitches::-webkit-scrollbar { width: 8px; }
  #mlb-pbp-current .pbr-pitches::-webkit-scrollbar-thumb,
  .pbr-cab .pbr-pitches::-webkit-scrollbar-thumb { background: rgba(255, 255, 255,.28); border-radius: 99px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-pitch { grid-template-columns: 24px 1fr 76px 130px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-velo { display: none; }
  /* pitch type: full name only (no abbreviation), a bit larger than the old code text */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-pitch-type { font-size: 13px; }

  /* due-up card — rows side by side; its diamond is hidden (now in the cluster) */
  #mlb-pbp-dueup .pbr-due-flex { justify-content: flex-start; gap: 28px; padding: 2px 2px 4px; }
  #mlb-pbp-dueup .pbr-dueup { flex-direction: row; gap: 28px; }
  #mlb-pbp-dueup .pbr-due-row + .pbr-due-row { border-top: none; }
  #mlb-pbp-dueup .pbr-due-flex .pbr-due-bases { display: none; }

  /* ── feed rail: theScore play cards in a boxed card; sticky half-inning
     labels; scoring plays break the rhythm with a green rail + wash ── */
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-group-label {
    position: sticky; top: 0; z-index: 2;
    background: var(--gd-surface);
    padding: 12px 20px 9px;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 12px;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    align-items: start;
    padding: 11px 20px 13px;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play + .pbr-play { border-top: 1px solid var(--gd-line); }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-logo,
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-batter,
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-event { display: none; }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-ctx {
    grid-column: 1 / 3; grid-row: 1;
    font-family: var(--gd-font-mono); font-size: 11px; font-weight: 600; color: var(--gd-text-2);
    gap: 0; margin-bottom: 3px;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-ctx-mini { min-width: 58px; gap: 6px; }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-ctx-logo { width: 15px; height: 15px; }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-feed-ava {
    display: block; position: relative; grid-column: 1; grid-row: 2;
    width: 46px; height: 46px; align-self: center;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-headshot--feed { display: flex; width: 46px; height: 46px; font-size: 14px; }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-ava-badge {
    position: absolute; right: -4px; bottom: -2px; width: 20px; height: 20px; object-fit: contain;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-desc { display: block; grid-column: 2; grid-row: 2; min-width: 0; }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-headline {
    display: block; font-size: 14px; font-weight: 700; color: var(--gd-text); line-height: 1.3;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-headline.scoring { color: var(--gd-ball); }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-sub {
    display: block; font-size: 12px; color: #C7CBD3; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-sub--b { color: var(--gd-text); }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-chev { grid-column: 3; grid-row: 2; align-self: center; }
  /* scoring play — green rail + wash, like the design */
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play--score {
    background: linear-gradient(90deg, rgba(61,220,132,.08), rgba(61,220,132,0) 60%);
    border-left: 3px solid var(--gd-ball);
    padding-left: 17px;
  }

  /* header + linescore de-card so the cards below don't sit under a boxed
     scoreboard; the cluster + cards carry the structure */
  /* The tab strip's full-width underline runs beneath BOTH the main panel and
     the Recent Plays rail, reading as a rule that joins two separate columns.
     The active-tab marker already says where the strip is, so the strip does
     not need a second line. Wide layout only — the narrow layout is a single
     column, where the underline is exactly right. */
  #mlb-game-detail .mlb-gd-tabs { border-bottom: 0; }

  #mlb-game-detail .mlb-gd-sb { background: none; border: none; border-radius: 0; }
  #mlb-game-detail .mlb-gd-sb-main { padding: 18px 10px 16px; }
  #mlb-game-detail .mlb-gd-linescore { display: none; }
  /* the cluster owns the bases + count now → drop the header mini-diamond/pips */
  #mlb-game-detail .mlb-gd-basecount { display: none; }
  /* venue/city/weather lives on the Weather tab — drop the topbar meta line */
  #mlb-game-detail .mlb-gd-meta { display: none; }
  /* The home team is row-reverse, so flex-end packs its content toward the
     CENTER (the reversed main-end). flex-start packs it to the right edge,
     mirroring the away team. The live score's margin-right:auto still floats
     it toward center, so only the empty pregame case is corrected. */
  #mlb-game-detail .mlb-gd-team-home { justify-content: flex-start; }
}


/* Bouncing-spheres loaders: center vertically in their region (the
   containers' original top-anchored padding left them sitting too high). */
.mlb-gd-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
}
.pbr-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* ── Compact live at-bat card (renderLiveAtBatCardHtml) ─────────────────
   The in-progress PA header for the dashboard's player game-log popup —
   count headline, faces, day lines, colored pitch rows, strike zone. */
.pbr-mini-cab {
  padding: 14px 16px 16px;
  border-bottom: 1px solid var(--gd-line);
}
.pbr-mini-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.pbr-mini-text { min-width: 0; }
.pbr-mini-count {
  font-size: 20px;
  font-weight: 800;
  color: var(--gd-text);
  margin-bottom: 4px;
}
.pbr-mini-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
}
.pbr-mini-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pbr-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gd-surface-2);
  border-radius: 10px;
  padding: 8px 12px;
}
.pbr-mini-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.pbr-mini-call { font-size: 14px; font-weight: 700; }
.pbr-mini-sub { font-size: 12px; color: var(--gd-text-3); }
.pbr-mini-zone { flex: 0 0 auto; }

@media (max-width: 560px) {
  .pbr-mini-body { grid-template-columns: 1fr; }
  .pbr-mini-zone { justify-self: center; }
}

/* ============================================================================
   DESKTOP LIVE PBP REDESIGN (2026) — WIDE SCREENS ONLY (min-width: 1001px).
   A cohesive broadcast-analytics surface: near-black navy panels, thin
   blue-gray hairlines, one rounded scoreboard header, a three-section matchup
   card with the strike zone as the focal point, a dense scannable play feed,
   and a compact metadata footer. This block sits AFTER the original desktop
   block, so it wins on equal-specificity conflicts. Mobile (<=1000px) uses a
   separate, mutually-exclusive media query and is completely untouched.
   ============================================================================ */
@media (min-width: 1001px) {
  /* Desktop-scoped palette: navy premium surfaces + blue-gray lines, applied to
     the scoreboard header, tab row, topbar, the live tracker, AND the Overview
     (info) + Props panels — their surfaces consume these --gd-* tokens, so they
     render navy on wide screens and fall back to the neutral base (:root ~24) on
     mobile. The Weather panel is intentionally left off and keeps the neutral theme. */
  #mlb-game-detail .mlb-gd-sb,
  #mlb-game-detail .mlb-gd-tabs,
  #mlb-game-detail .mlb-gd-topbar,
  #mlb-game-detail .mlb-gd-tab-panel[data-panel="info"],
  #mlb-game-detail .mlb-gd-tab-panel[data-panel="props"],
  #mlb-pbp-root,
  #mlb-pbp-team-away, #mlb-pbp-team-home, #mlb-pbp-game,
  .pbt-overlay {
    /* Neutral greys, anchored on the workbench's .glass-panel (#111319) so the
       game page reads as the same product as the parlay column and tableView.
       Was a navy family (#08111B / #0B1723 / #10202F) with blue-tinted borders
       — measured +19 blue bias (B minus R) against .glass-panel's +8. */
    --gd-surface:   #0E1014;
    --gd-surface-2: #111319;
    --gd-surface-3: #191C24;
    --gd-line:        rgba(255, 255, 255, .07);
    --gd-line-strong: rgba(255, 255, 255, .12);
    --gd-text:   #F5F7FA;
    --gd-text-2: #AAB4C2;
    --gd-text-3: #7B8898;   /* 5.26:1 on the old #08111B navy surface — clears WCAG AA for the 11px decisive-pitch / footer text */
  }

  /* wider, centered container + comfortable page padding. min-height fills the
     viewport so the app-shell .landing-footer (socials) stays below the fold on
     desktop too — same intent as the ≤1000px rule near the top of this file. */
  #mlb-game-detail { max-width: 1560px; padding: 18px 22px 40px; min-height: 100vh; min-height: 100dvh; }

  /* root grid: main content | wide feed rail */
  #mlb-pbp-root.pbr-wrap { grid-template-columns: minmax(0, 1fr) 440px; gap: 20px; }
  #mlb-pbp-root .pbr-grid { gap: 20px; }

  /* ── 1 · SCOREBOARD HEADER — one rounded panel ── */
  /* The tab strip's full-width underline runs beneath BOTH the main panel and
     the Recent Plays rail, reading as a rule that joins two separate columns.
     The active-tab marker already says where the strip is, so the strip does
     not need a second line. Wide layout only — the narrow layout is a single
     column, where the underline is exactly right. */
  #mlb-game-detail .mlb-gd-tabs { border-bottom: 0; }

  #mlb-game-detail .mlb-gd-sb {
    /* Grey twins of the old #0B1826 -> #06101A navy pair: same top-lighter-than-
       bottom fall, same step size, no blue. Kept as a gradient rather than a flat
       fill so the scoreboard still reads as the page's masthead. */
    background: linear-gradient(180deg, #14161C, #0B0D11);
    border: 1px solid var(--gd-line);
    border-radius: 16px;
  }
  #mlb-game-detail .mlb-gd-sb-main {
    grid-template-columns: 1fr minmax(230px, auto) 1fr;
    padding: 22px 34px; gap: 28px;
  }
  /* No bubble: the crest IS the artwork, and the disc + radial wash + border
     were three layers of chrome shrinking it inside a 106px-tall masthead. Bare
     and much larger instead — object-fit:contain (set at :171) keeps every
     silhouette intact, from the Pirates' round P to Arizona's tall A. The
     padding goes too, since there is no longer a rim to clear. */
  #mlb-game-detail .mlb-gd-team-logo {
    width: 92px; height: 92px;
    padding: 0; border: 0; border-radius: 0; background: none;
  }
  #mlb-game-detail .mlb-gd-team-code { font-size: 27px; }
  #mlb-game-detail .mlb-gd-team-name { font-size: 12.5px; color: var(--gd-text-2); }
  #mlb-game-detail .mlb-gd-team-score { font-size: 62px; }
  /* thin separators flanking the center state block */
  #mlb-game-detail .mlb-gd-state {
    align-self: stretch; justify-content: center; padding: 2px 30px;
    border-left: 1px solid var(--gd-line); border-right: 1px solid var(--gd-line);
  }
  /* center = LIVE pill + inning + compact bases diamond (count/outs live in the card) */
  #mlb-game-detail .mlb-gd-basecount { display: flex; justify-content: center; }
  #mlb-game-detail .mlb-gd-basecount .mlb-gd-count-col { display: none; }
  #mlb-game-detail .mlb-gd-outs-line { display: none; }

  /* ── 2 · TABS — clean underline, RED active accent ── */
  #mlb-game-detail .mlb-gd-tabs { gap: 2px; margin-top: 8px; }
  #mlb-game-detail .mlb-gd-tab { font-size: 13.5px; padding: 17px 18px 8px; color: var(--gd-text-2); }
  #mlb-game-detail .mlb-gd-tab:hover { color: var(--gd-text); }
  #mlb-game-detail .mlb-gd-tab.is-active {
    color: rgb(var(--theme-accent-rgb, 0, 211, 189));
    font-weight: 700;
    border-bottom-color: transparent;
  }

  /* ── 3 · MATCHUP CARD — batter | pitch viz (focal) | pitcher ── */
  :is(#mlb-pbp-current, .pbr-cab) {
    grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr);
    /* Grey twins of the old #0A1622 -> #070F18 navy pair. This one is the
       Live tab's whole 1080x812 canvas, and it hid from the earlier sweeps
       because it is a background-IMAGE — those only inspected
       background-color. */
    background: var(--gd-surface);
  }

  /* batter column — structurally mirrors the pitcher (.pbr-clu-side): the
     .pbr-clu-hitter sub-block (gap 12: eyebrow/avatar/name) matches .pbr-clu-pitcher,
     and .pbr-clu-batter's gap 16 matches .pbr-clu-side, so the spacing above/below
     AT BAT, the name, and RHB is identical to ON THE MOUND / name / RHP. */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-batter {
    align-self: start; align-items: center; text-align: center; gap: 16px; padding: 26px 22px;
  }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-hitter { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .pbr-clu-eyebrow {
    font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .18em; margin: 0;
  }
  .pbr-clu-avawrap { position: relative; display: inline-flex; flex: none; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-avawrap .pbr-clu-ava { width: 74px; height: 74px; font-size: 22px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-batter .pbr-clu-bid { display: flex; flex-direction: column; align-items: center; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-batter .pbr-clu-name { font-size: 23px; margin: 0; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-batter .pbr-clu-pos { margin: 4px 0 0; }

  /* 4-stat grid — batter (AVG/SLG/H-AB/RBI) + pitcher (W-L/ERA/K/IP) share visuals */
  .pbr-clu-bstat, :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pstat {
    display: grid; grid-template-columns: repeat(4, 1fr); width: 100%;
    border: 1px solid var(--gd-line); border-radius: 10px; overflow: hidden;
    background: rgba(255, 255, 255,.04);
  }
  .pbr-clu-bstat .pbr-pstat, :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pstat .pbr-pstat { padding: 9px 4px; }
  .pbr-clu-bstat .pbr-pstat b, :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pstat .pbr-pstat b { font-size: 18px; }
  .pbr-clu-bstat .pbr-pstat span, :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pstat .pbr-pstat span { font-size: 8.5px; margin-top: 5px; }

  /* batter status chip */
  .pbr-clu-bchip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--gd-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em;
    color: var(--gd-text-2); border: 1px solid var(--gd-line); border-radius: 7px; padding: 5px 12px;
  }
  .pbr-clu-bchip b { color: var(--gd-text); font-weight: 700; }
  .pbr-clu-bchip.is-result { color: var(--gd-text); border-color: var(--gd-line-strong); background: rgba(255, 255, 255,.08); }

  /* center — pitch visualization well (focal point) */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-zone-panel {
    background: none;
    border-left: 1px solid var(--gd-line); border-right: 1px solid var(--gd-line);
    padding: 14px 16px 16px; gap: 8px; justify-content: flex-start;
  }
  .pbr-zone-head {
    display: block; text-align: center; text-transform: uppercase;
    font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .14em; color: var(--gd-text-3);
  }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-zone-panel .pbr-cab-zone { max-width: 262px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-zone-empty:not([hidden]) {
    display: block; text-align: center; margin-top: -4px;
    font-family: var(--gd-font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--gd-text-3);
  }
  /* reveal + emphasize the desktop-only home-plate outline (pitch connector removed) */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-zone-plate { display: inline; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-zone-grid line { stroke: rgba(150,175,205,.15); }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-zone-box { stroke: rgba(150,175,205,.42); }

  /* center — BALLS / STRIKES / OUTS: three groups side by side, LABEL ABOVE the
     circles, sized up to fill the space beneath the zone */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-count {
    background: none;
    border-left: 1px solid var(--gd-line); border-right: 1px solid var(--gd-line);
    flex-direction: row; justify-content: center; align-items: center;
    padding: 22px 14px 26px; gap: 30px;
  }
  .pbr-clu-crow { display: flex; flex-direction: column; align-items: center; gap: 11px; }
  .pbr-clu-clabel {
    font-family: var(--gd-font-mono); font-size: 11px; font-weight: 700;
    letter-spacing: .14em; color: var(--gd-text-2);
  }
  .pbr-clu-cpips { display: flex; align-items: center; gap: 8px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-count .pbr-clu-pip {
    width: 15px; height: 15px; border-width: 1.6px;
    flex: none; aspect-ratio: 1 / 1; box-sizing: border-box;   /* never shrink → always a perfect circle */
  }
  .pbr-clu-pip.on-o { background: var(--gd-text-2); border-color: var(--gd-text-2); }

  /* right — ON THE MOUND eyebrow on top (mirrors AT BAT), then pitcher, W-L/ERA/K/IP,
     divider, runners. align-self:start keeps both eyebrows vertically aligned. */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-side { align-self: start; align-items: stretch; gap: 16px; padding: 26px 22px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pitcher { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pitcher .pbr-clu-ava { width: 74px; height: 74px; font-size: 22px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pitcher .pbr-clu-pid { display: flex; flex-direction: column; align-items: center; }
  .pbr-tag-mound { color: var(--gd-inplay); }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pname { font-size: 23px; }
  .pbr-clu-phand { font-family: var(--gd-font-mono); font-size: 12px; color: var(--gd-text-2); margin-top: 4px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-side .pbr-clu-div { margin: 2px 0; }
  /* runners: diamond LEFT + label/name list RIGHT. Sized up to fill the column's
     spare vertical space; the block height is still fixed by the diamond (doesn't
     grow row-by-row as runners reach base). */
  /* Stack the runners text BELOW the bases diamond (was side-by-side) so it gets
     the full column width instead of clipping next to the ~112px diamond
     ("RUNNERS", "1B M…"). Applies at all widths. */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ { flex-direction: column; align-items: center; gap: 10px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ .pbr-clu-bases { flex: none; }
  /* Bigger bases that tile cleanly: the rotated base square is shrunk (inset 15%)
     so it fits WITHIN its box instead of extending past it — that beyond-box
     overhang was what made adjacent bases overlap. Boxes overlap by half, so the
     diamonds meet edge-to-edge. */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ .pbr-clu-bases .pbr-due-bases { width: 112px; height: 82px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ .pbr-clu-bases .pbr-bb { width: 54px; height: 54px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ .pbr-clu-bases .pbr-bb--2 { top: 0;    left: 29px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ .pbr-clu-bases .pbr-bb--1 { top: 28px; left: 58px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ .pbr-clu-bases .pbr-bb--3 { top: 28px; left: 0; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ .pbr-clu-bases .pbr-bb-sq { inset: 15%; border-radius: 7px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ .pbr-clu-bases .pbr-bb-pic { inset: 16%; width: 68%; height: 68%; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-situ .pbr-clu-bases .pbr-bb-init { font-size: 16px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-runners { text-align: center; min-width: 0; flex: none; width: 100%; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-runners .pbr-clu-rlabel { font-size: 11px; margin-bottom: 8px; white-space: nowrap; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-runners .pbr-clu-rlist { font-size: 13px; line-height: 1.7; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-runners .pbr-clu-rlist > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* no trailing "· N" lineup spot on the desktop due-up kicker (kept on mobile) */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows .pbr-due-spot { display: none; }

  /* due-up moved into the batter column; the whole side stack (due-up + mound)
     is retired on desktop. Hiding .pbr-side (not just its children) drops the
     .pbr-grid gap it would otherwise claim, so the feed rail matches the
     matchup card's height exactly. */
  #mlb-pbp-root .pbr-grid > .pbr-side { display: none; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-dueup { width: 100%; display: flex; flex-direction: column; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-dueup[hidden] { display: none; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-dueup .pbr-clu-div { margin-bottom: 14px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-label { align-self: center; margin-bottom: 10px; color: var(--gd-text-2); }
  /* due-up rows: avatar + text sized to match the runners block (42px images,
     14px names, 11px kicker); no avatar badge (the spot lives in the label). */
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows { display: flex; flex-direction: column; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows .pbr-due-row { padding: 11px 4px; gap: 13px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows .pbr-due-row + .pbr-due-row { border-top: 1px solid var(--gd-line); }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows .pbr-due-avawrap { display: inline-flex; flex: none; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows .pbr-headshot--sm { width: 42px; height: 42px; font-size: 14px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows .pbr-due-info { min-width: 0; text-align: left; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows .pbr-due-label { font-size: 11px; letter-spacing: .1em; margin-bottom: 3px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows .pbr-due-name { font-size: 14px; }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-du-rows .pbr-due-stat { font-size: 13px; margin-top: 3px; }

  /* ── 4 · RECENT PLAYS RAIL ── */
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-card-head { justify-content: space-between; }
  #mlb-game-detail .pbr-plays-live:not([hidden]) {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--gd-font-mono); font-size: 9px; font-weight: 700;
    letter-spacing: .12em; color: var(--gd-text-3); text-transform: uppercase;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-group-label {
    color: #8FA8C6; padding: 13px 20px 8px;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play {
    grid-template-columns: 32px minmax(0, 1fr) 12px;
    grid-template-rows: auto; gap: 0 14px; align-items: center; padding: 12px 20px 13px;
  }
  /* hide the mobile / legacy row atoms; show the redesigned fd-* atoms */
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-feed-ava,
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-headline,
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-sub,
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-chip-score,
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-chip-event,
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-ctx { display: none; }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-fd-marker {
    display: flex; grid-column: 1; align-self: start; margin-top: 1px;
    width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%;
    font-family: var(--gd-font-mono); font-size: 12px; font-weight: 700;
    border: 1.5px solid var(--gd-line-strong); color: var(--gd-text-2); background: var(--gd-surface-2);
  }
  /* binary: green = batter reached base, red = batter out */
  .pbr-fd-marker.mk-on  { border-color: rgba(61,220,132,.55); color: var(--gd-ball);   background: rgba(61,220,132,.12); }
  .pbr-fd-marker.mk-out { border-color: rgba(255,92,92,.55);  color: var(--gd-strike); background: rgba(255,92,92,.12); }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-play-desc {
    display: flex; flex-direction: column; gap: 2px; grid-column: 2; grid-row: 1; min-width: 0;
  }
  .pbr-fd-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .pbr-fd-count {
    font-family: var(--gd-font-mono); font-size: 11px; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--gd-text-2);
    border: 1px solid var(--gd-line); border-radius: 5px; padding: 1px 6px;
  }
  .pbr-fd-result { font-size: 14px; font-weight: 700; color: var(--gd-text); }
  .pbr-fd-result.is-on  { color: var(--gd-ball); }   /* reached base */
  .pbr-fd-result.is-out { color: var(--gd-strike); } /* batter out */
  .pbr-fd-score {
    font-family: var(--gd-font-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em;
    border: 1px solid; padding: 2px 7px; border-radius: 99px; white-space: nowrap;
  }
  .pbr-fd-ev {
    font-family: var(--gd-font-mono); font-size: 9px; font-weight: 600; letter-spacing: .08em;
    color: var(--gd-text-2); border: 1px solid var(--gd-line-strong); padding: 2px 7px; border-radius: 99px;
  }
  .pbr-fd-ev.overturned { color: #F4D03F; border-color: rgba(244,208,63,.4); }
  .pbr-fd-desc { display: block; font-size: 12.5px; color: var(--gd-text-2); line-height: 1.35; }
  .pbr-fd-pitch {
    display: block; font-family: var(--gd-font-mono); font-size: 11px; color: var(--gd-text-3);
    font-variant-numeric: tabular-nums; margin-top: 1px;
  }
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-chev { grid-column: 3; grid-row: 1; align-self: center; }
  /* scoring play keeps the green rail + wash from the original block */

  /* ── 5 · DUE-UP — two players, divider between, lineup badge ── */
  #mlb-pbp-dueup .pbr-due-flex { gap: 0; }
  #mlb-pbp-dueup .pbr-dueup { flex: 1; gap: 0; }
  #mlb-pbp-dueup .pbr-due-row { flex: 1; padding: 6px 24px; }
  #mlb-pbp-dueup .pbr-due-row + .pbr-due-row { border-top: none; border-left: 1px solid var(--gd-line); }
  #mlb-pbp-dueup .pbr-due-avawrap { display: inline-flex; position: relative; flex: none; }
  #mlb-pbp-dueup .pbr-due-badge {
    display: flex; position: absolute; right: -4px; bottom: -4px;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    align-items: center; justify-content: center; border: 2px solid var(--gd-surface);
    background: var(--gd-surface-3); color: var(--gd-text);
    font-family: var(--gd-font-display); font-size: 10px; font-weight: 700; line-height: 1;
  }

  /* soft highlight of the newest play (first row in the feed) */
  #mlb-pbp-root .pbr-grid:not([hidden]) + .pbr-plays .pbr-feed .pbr-play:first-of-type {
    background: linear-gradient(90deg, rgba(255, 255, 255,.06), transparent 55%);
  }
}

/* Restrained new-play entrance (desktop) — respects reduced motion via the
   existing @media (prefers-reduced-motion) block below the base rules. */
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  #mlb-pbp-root .pbr-play { animation: pbrFeedIn .32s ease both; }
}
@keyframes pbrFeedIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ============================================================================
   DESKTOP TEAM BOX-SCORE TAB (2026) — WIDE SCREENS ONLY (min-width:1001px).
   Six-metric summary in one row, full-width pitching + batting tables with a
   wide left-aligned identity column. Reuses the live page's navy cards/tokens.
   ============================================================================ */
@media (min-width: 1001px) {
  #mlb-pbp-team-away.pbr-wrap, #mlb-pbp-team-home.pbr-wrap { display: flex; flex-direction: column; gap: 20px; }

  .pbr-tt-head { padding: 6px 6px 0; }
  .pbr-tt-title { font-size: 32px; }
  .pbr-tt-sub { font-size: 13px; margin-top: 7px; }
  .pbr-tt-watermark { width: 150px; height: 150px; opacity: .05; }

  /* summary: six metrics in one row */
  .pbr-tt-summary { grid-template-columns: repeat(6, 1fr); }
  .pbr-tt-metric { padding: 24px 10px; }
  .pbr-tt-mlabel { font-size: 11px; }
  .pbr-tt-mval { font-size: 32px; margin-top: 10px; }

  /* tables: fixed layout so numeric columns stay compact + evenly aligned */
  .pbr-tt-cardtitle { font-size: 11px; padding: 15px 22px 8px; }
  .pbr-tt-table { table-layout: fixed; }
  .pbr-tt-table thead th { font-size: 11px; padding: 13px 8px; }
  .pbr-tt-table tbody td, .pbr-tt-table tbody th { font-size: 15px; padding: 11px 8px; }
  .pbr-tt-table td.pbr-tt-name, .pbr-tt-table th.pbr-tt-name { padding-left: 22px; }
  .pbr-tt-brow.is-sub th.pbr-tt-name { padding-left: 42px; }   /* keep subs indented past the 22px base */
  .pbr-tt-nameflex { gap: 13px; }
  .pbr-tt-pname { font-size: 15px; }
  .pbr-tt-psub { font-size: 12px; }

  /* column widths */
  .pbr-tt-bat .pbr-tt-num { width: 44px; }
  .pbr-tt-bat .pbr-tt-name { width: 26%; }
  .pbr-tt-bat .pbr-tt-pos { width: 64px; }
  .pbr-tt-pit .pbr-tt-name { width: 30%; }
  .pbr-tt-pit thead th:last-child, .pbr-tt-pit tbody td:last-child { padding-right: 22px; }
  .pbr-tt-bat thead th:last-child, .pbr-tt-bat tbody td:last-child { padding-right: 22px; }

  /* row heights: batter ~62px, pitcher ~78px */
  .pbr-tt-brow td, .pbr-tt-brow th { padding-top: 12px; padding-bottom: 12px; }
  .pbr-tt-prow td, .pbr-tt-prow th { padding-top: 19px; padding-bottom: 19px; }
  .pbr-tt-ava { width: 42px; height: 42px; }
  .pbr-tt-ava--sm { width: 36px; height: 36px; font-size: 13px; }
}

/* ============================================================================
   DESKTOP GAME TAB (2026) — WIDE SCREENS ONLY (min-width:1001px).
   Row 1: three summary cards (Key Insights | Score Summary | Game Flow).
   Row 2: Score by Inning (44%) | Game Advantage (56%). Row 3: Team Comparison.
   ============================================================================ */
@media (min-width: 1001px) {
  #mlb-pbp-game.pbr-wrap { display: flex; flex-direction: column; gap: 18px; }
  .pbr-gt-row3 { display: grid; grid-template-columns: 1fr 1.25fr 0.9fr; gap: 18px; align-items: stretch; }
  .pbr-gt-row2 { display: grid; grid-template-columns: 44fr 56fr; gap: 18px; align-items: stretch; }
  .pbr-gt-row3 > .pbr-gt-card, .pbr-gt-row2 > .pbr-gt-card { min-width: 0; }
  /* Score by Inning: a larger table, vertically centred so any residual space is
     balanced (no dead void below it); the compressed Game Advantage chart sets the
     row height. */
  .pbr-gt-lscard .pbr-gt-scroll { display: flex; flex-direction: column; justify-content: center; }
  .pbr-gt-lscard .pbr-gt-ls thead th { font-size: 13px; padding: 12px 8px; }
  .pbr-gt-lscard .pbr-gt-ls tbody td { font-size: 19px; padding: 20px 8px; }
  .pbr-gt-lscard .pbr-gt-ls-teamflex span { font-size: 18px; }
  .pbr-gt-lscard .pbr-gt-ls-tot { font-size: 21px; }
  .pbr-gt-lscard .pbr-gt-logo { width: 30px; height: 30px; }
}

/* ============================================================================
   WEATHER TAB (game-detail, wide screens, 2026) — dedicated dashboard matching
   the redesigned Live/Game/Team tabs. Scoped to the game-detail Weather panel;
   the shared renderWeatherPanel consumers (player-dashboard Q2, props popup)
   are untouched. Multi-column grids are gated to >=1001px (desktop-only per
   brief); below that the cards simply stack.
   ============================================================================ */
#mlb-game-detail .mlb-gd-tab-panel[data-panel="weather"] {
  /* Same neutral grey family as the panels above — see that block. */
  --gd-surface:   #0E1014;
  --gd-surface-2: #111319;
  --gd-surface-3: #191C24;
  --gd-line:        rgba(255, 255, 255, .07);
  --gd-line-strong: rgba(255, 255, 255, .12);
  --gd-text:   #F5F7FA;
  --gd-text-2: #AAB4C2;
  --gd-text-3: #7B8898;
}

/* tone tokens — set --tone (+ tinted bg/border) on an element; descendants opt
   in via color:var(--tone). Applying a tone class does NOT itself recolour text. */
.wxt .wxt-boost    { --tone: #46D18A; --tone-bg: rgba(70,209,138,.12);  --tone-bd: rgba(70,209,138,.34); }
.wxt .wxt-suppress { --tone: #F4757B; --tone-bg: rgba(244,117,123,.12); --tone-bd: rgba(244,117,123,.34); }
.wxt .wxt-neutral  { --tone: #E7EDF4; --tone-bg: rgba(148,163,184,.10); --tone-bd: rgba(148,163,184,.22); }
.wxt .wxt-blue     { --tone: #5CA8F0; --tone-bg: rgba(92,168,240,.12);  --tone-bd: rgba(92,168,240,.34); }
.wxt .wxt-amber    { --tone: #F5C24B; --tone-bg: rgba(245,194,75,.12);  --tone-bd: rgba(245,194,75,.30); }
.wxt .wxt-purple   { --tone: #B593F0; --tone-bg: rgba(181,147,240,.14); --tone-bd: rgba(181,147,240,.34); }
/* inline accent spans do colour their own text */
.wxt span.wxt-blue   { color: #5CA8F0; }
.wxt span.wxt-amber  { color: #F5C24B; }
.wxt span.wxt-purple { color: #B593F0; }

.wxt { display: flex; flex-direction: column; gap: 14px; padding: 2px 0 4px; }
.wxt-row { display: flex; flex-direction: column; gap: 16px; }
.wxt-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(14,16,20,0) 58%),
    var(--gd-surface);
  border: 1px solid var(--gd-line);
  border-radius: 16px;
}
.wxt-card-title {
  font-family: var(--gd-font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gd-text-2);
  padding: 16px 18px 0;
}
.wxt-card-sub { color: var(--gd-text-3); letter-spacing: 0; text-transform: none; font-weight: 500; margin-left: 6px; }

/* ── Row 1: primary summary ── */
.wxt-sum { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.wxt-sum-lbl {
  font-family: var(--gd-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gd-text-3); margin-bottom: 9px;
}
.wxt-sum-main { display: flex; align-items: center; gap: 14px; }
.wxt-sum-main > i { font-size: 30px; width: 34px; text-align: center; flex: none; }
.wxt-sum-val { font-family: var(--gd-font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--gd-text); letter-spacing: -.5px; }
.wxt-sum-sub { font-size: 14px; color: var(--gd-text-2); margin-top: 5px; }
.wxt-ic-amber { color: #F5C24B; }
.wxt-ic-blue  { color: #5CA8F0; }
.wxt-sum-fc { display: grid; grid-template-columns: 1fr; gap: 16px; }
.wxt-sum-div { display: none; background: var(--gd-line); }
.wxt-sum-hit { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.wxt-sum-hit-left { flex: 1; min-width: 0; }
.wxt-sum-hit .wxt-ic-score { color: var(--tone); font-size: 28px; width: 34px; text-align: center; flex: none; }
.wxt-sum-hit .wxt-sum-val { color: var(--tone); }

/* radial gauge */
.wxt-gauge { width: 96px; height: 96px; flex: none; }
.wxt-gauge-track { stroke: rgba(255, 255, 255,.16); }
.wxt-gauge-fill  { stroke: var(--tone); }
.wxt-gauge-num    { fill: var(--tone); font-family: var(--gd-font-display); font-weight: 800; font-size: 34px; }
.wxt-gauge-rating { fill: var(--tone); font-family: var(--gd-font-mono); font-weight: 700; font-size: 10px; letter-spacing: .12em; }

/* ── Row 2: ballpark + weather factors ── */
.wxt-park { display: flex; flex-direction: column; padding: 16px 18px 14px; min-width: 0; }
.wxt-park-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wxt-park-name { font-family: var(--gd-font-display); font-weight: 700; font-size: 18px; color: var(--gd-text); letter-spacing: .01em; }
.wxt-park-dims { font-size: 12px; color: var(--gd-text-3); margin-top: 4px; }
.wxt-park-elev { font-size: 12px; color: var(--gd-text-3); white-space: nowrap; }
/* Field zone: CF label on top, then [LF | animated field | RF]; compass pinned
   bottom-right. The field itself is the shared renderWindyField (park image +
   flowing wind icons + centre team logo), sized a touch smaller via the stage. */
.wxt-fld { position: relative; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 4px 6px 6px; min-height: 0; }
.wxt-fld-mid { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.wxt-fld-side { flex: none; width: 66px; text-align: center; }
.wxt-fld-cf { text-align: center; }
.wxt-fld-stage { flex: 0 1 360px; max-width: 360px; min-width: 0; }
.wxt-fld-stage .wh-stage { width: 100%; }
.wxt-fld-stage .wh-stage svg { width: 100%; height: auto; display: block; }
.wxt-fld-pos2 { font-family: var(--gd-font-display); font-weight: 700; font-size: 15px; color: var(--gd-text-2); letter-spacing: .04em; }
.wxt-fld-carry2 { font-family: var(--gd-font-display); font-weight: 800; font-size: 19px; line-height: 1.15; color: var(--tone); }
.wxt-fld-carry-lbl2 { font-family: var(--gd-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gd-text-3); }
.wxt-fld-compass2 { position: absolute; right: 10px; bottom: 4px; width: 52px; height: 52px; }
.wxt-fld-compass-ring { fill: rgba(14,16,20,.6); stroke: var(--gd-line-strong); stroke-width: 2; }
.wxt-fld-compass-needle { fill: #9FB3C8; }
.wxt-fld-compass-n { fill: var(--gd-text-2); font-family: var(--gd-font-mono); font-weight: 700; font-size: 12px; }
.wxt-park-caption {
  text-align: center; font-family: var(--gd-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; padding: 9px; border: 1px solid var(--gd-line); border-radius: 10px;
  margin-top: 8px; color: var(--gd-text-2);
}
.wxt-park-caption.wxt-blue { color: #5CA8F0; border-color: rgba(92,168,240,.3); background: rgba(92,168,240,.06); }

.wxt-factors-card { display: flex; flex-direction: column; padding-bottom: 16px; }
.wxt-factors-grid { flex: 1; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 14px 18px 0; align-content: stretch; }
.wxt-factor { display: flex; gap: 16px; align-items: center; background: var(--gd-surface-2); border: 1px solid var(--gd-line); border-radius: 12px; padding: 16px 18px; }
.wxt-factor-ic { width: 48px; height: 48px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 19px; background: var(--tone-bg, rgba(148,163,184,.1)); color: var(--tone, var(--gd-text-2)); }
.wxt-factor-body { min-width: 0; }
.wxt-factor-lbl { font-family: var(--gd-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gd-text-3); margin-bottom: 7px; }
.wxt-factor-val { font-family: var(--gd-font-display); font-weight: 700; font-size: 21px; line-height: 1.1; color: var(--gd-text); }
.wxt-factor-note { font-size: 12.5px; color: var(--gd-text-2); margin-top: 4px; line-height: 1.4; }

/* ── Row 3: estimated ball flight + hourly ── */
.wxt-flight { display: flex; flex-direction: column; padding-bottom: 16px; }
.wxt-flt-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px 18px 0; }
.wxt-flt-card { background: var(--gd-surface-2); border: 1px solid var(--tone-bd, var(--gd-line)); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.wxt-flt-lbl { font-family: var(--gd-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--gd-text-2); }
.wxt-flt-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wxt-flt-val { font-family: var(--gd-font-display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--tone); }
.wxt-flt-vs { font-size: 11px; color: var(--gd-text-3); margin-top: 4px; }
.wxt-mini { width: 66px; height: 44px; flex: none; }
.wxt-mini-fan { fill: rgba(46,110,66,.5); stroke: rgba(120,160,130,.4); stroke-width: 1.5; }
.wxt-mini-inf { fill: rgba(150,116,74,.55); }
.wxt-mini-arrow { stroke: #5CA8F0; stroke-width: 3; }
.wxt-mini-head { fill: #5CA8F0; }
.wxt-flt-lines { display: flex; flex-direction: column; gap: 2px; margin-top: auto; font-size: 12px; color: var(--gd-text-2); }
.wxt-flt-foot { text-align: center; font-family: var(--gd-font-mono); font-size: 12px; font-weight: 700; color: var(--tone); background: var(--tone-bg); border-radius: 8px; padding: 6px; }
.wxt-flt-overall { align-items: center; justify-content: center; text-align: center; gap: 4px; }
.wxt-flt-score { font-family: var(--gd-font-display); font-weight: 800; font-size: 44px; line-height: 1; color: var(--tone); margin-top: 2px; }
.wxt-flt-rating { font-family: var(--gd-font-mono); font-weight: 700; font-size: 13px; letter-spacing: .08em; color: var(--tone); }
.wxt-flt-desc { font-size: 12px; color: var(--gd-text-2); margin-top: 8px; }
.wxt-flt-best { font-size: 11px; color: var(--gd-text-3); }

.wxt-hourly { display: flex; flex-direction: column; padding-bottom: 16px; }
.wxt-hr-body { display: flex; gap: 18px; padding: 14px 18px 0; align-items: stretch; flex: 1; }
.wxt-hr-col { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 20px; border-radius: 12px; flex: none; }
.wxt-hr-current { background: rgba(92,168,240,.1); border: 1px solid rgba(92,168,240,.28); }
.wxt-hr-time { font-family: var(--gd-font-mono); font-size: 14px; font-weight: 700; color: var(--gd-text); }
.wxt-hr-badge { font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5CA8F0; background: rgba(92,168,240,.18); border-radius: 5px; padding: 2px 7px; }
.wxt-hr-ic { font-size: 24px; margin: 4px 0; }
.wxt-hr-temp { font-family: var(--gd-font-display); font-weight: 800; font-size: 22px; color: var(--gd-text); }
.wxt-hr-wind, .wxt-hr-cond { font-size: 12px; color: var(--gd-text-2); }
.wxt-hr-carry { font-family: var(--gd-font-mono); font-weight: 700; font-size: 15px; color: var(--tone); margin-top: 2px; }
.wxt-hr-note { flex: 1; display: flex; align-items: center; font-size: 13px; color: var(--gd-text-3); line-height: 1.55; max-width: 300px; }

/* ── Row 4: metadata ── */

/* messages (indoor / missing / unavailable) */
.wxt-msg { background: var(--gd-surface); border: 1px solid var(--gd-line); border-radius: 16px; padding: 44px 28px; text-align: center; color: var(--gd-text-2); font-size: 14px; }
.wxt-msg-venue { font-family: var(--gd-font-display); font-weight: 700; font-size: 20px; color: var(--gd-text); margin: 12px 0 6px; }
.wxt-roof-pill { display: inline-block; font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7dd3fc; background: rgba(79,143,247,.12); border: 1px solid rgba(79,143,247,.28); border-radius: 999px; padding: 3px 10px; }

/* ── desktop grids (>=1001px) ── */
@media (min-width: 1001px) {
  .wxt { gap: 16px; }
  .wxt-row-summary { display: grid; grid-template-columns: 1.6fr 0.75fr 1fr; gap: 16px; align-items: stretch; }
  .wxt-row-field   { display: grid; grid-template-columns: 44fr 56fr; gap: 18px; align-items: stretch; }
  .wxt-row-flight  { display: grid; grid-template-columns: 57fr 43fr; gap: 18px; align-items: stretch; }
  .wxt-sum-fc { grid-template-columns: 1fr 1px 1fr; gap: 22px; align-items: center; }
  .wxt-sum-div { display: block; align-self: stretch; margin: 6px 0; }
  .wxt-factors-grid { grid-template-columns: 1fr 1fr; }
  .wxt-flt-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Weather tab: condensed dashboard for narrow / tablet widths (<=1000px) —
   keep the multi-column density (Forecast+Wind across the top, Humidity +
   Hitting paired, 2-col factors, 2x2 ball flight) instead of fully stacking.
   Field and Hourly rows keep the base flex-column (field then factors, ball
   flight then hourly). ── */
@media (max-width: 1000px) {
  .wxt { gap: 12px; }
  .wxt-row { gap: 12px; }
  .wxt-row-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .wxt-sum-fc { grid-column: 1 / -1; grid-template-columns: 1fr 1px 1fr; gap: 20px; align-items: center; }
  .wxt-sum-div { display: block; align-self: stretch; margin: 6px 0; }
  .wxt-gauge { width: 82px; height: 82px; }
  .wxt-factors-grid { grid-template-columns: 1fr 1fr; }
  .wxt-flt-grid { grid-template-columns: 1fr 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   "Other games" rail  (left column, WIDE SCREENS ONLY — >1000px)
   ---------------------------------------------------------------------------
   #mlb-gd-shell wraps the detail root + a persistent <aside id="mlb-games-rail">
   (built in gameDetailMLB.ensureContainer). The rail's game-CARD visuals (.gc*)
   are a self-contained port of the NBA "games-sidebar" look — that sheet
   (css/nba/live-prop-tracker.css) is gated `{% if default_sport in NBA/NFL %}`
   in index.html and is NOT loaded on MLB pages, so the styles are defined here,
   scoped under .mlb-games-rail (see the card block inside the media query).

   Mobile-safety: the shell is a transparent pass-through and the rail is
   `display:none` BY DEFAULT — it opts IN only at min-width:1001px (the page's
   own desktop cutover). A default of none (not a max-width override) means no
   later rule can leak it back onto phones.
   ───────────────────────────────────────────────────────────────────────── */
#mlb-gd-shell { flex: 1 1 auto; min-width: 0; display: block; }
#mlb-gd-shell.is-hidden { display: none !important; }
.mlb-games-rail { display: none; }
/* Rail lives outside #mlb-game-detail's border-box reset — set it here so card
   padding never overflows the track and alignRail()'s head-height math is exact. */
.mlb-games-rail, .mlb-games-rail * { box-sizing: border-box; }

@media (min-width: 1001px) {
  #mlb-gd-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    /* Wide enough that the content column (1fr) keeps the SAME ~1560px it had
       before the rail existed, so nothing in the original layout is squished:
       1560 content + 300 rail + 20 gap + 40 padding = 1920. Narrower viewports
       just shrink the content track (rail is fixed 300px). */
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 20px;
  }
  /* The 1fr track owns the width now — drop the root's own cap/centering so it
     doesn't double-constrain and drift off-center inside its column. */
  #mlb-gd-shell > #mlb-game-detail {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .mlb-games-rail {
    display: block;
    position: sticky;
    /* top:10px matches .main-content's margin-top so the rail sits at the same
       y as #mlb-game-detail (a larger value would clamp the rail down at rest,
       since its natural top is only ~10px, mis-aligning the columns). */
    top: 10px;
    align-self: start;
    /* padding-top mirrors #mlb-game-detail's wide padding (18px, see the
       min-width:1001px rule) so the rail's content-top equals the detail's;
       gamesRailMLB.alignRail() then sizes the back-button head so the first card
       lines up with the scoreboard box regardless of the topbar/meta height. */
    padding: 18px 2px 0 0;
    /* Leave the top offset + a gap above the fixed bottom nav so the last card
       of a full slate scrolls clear instead of tucking under it. */
    max-height: calc(100vh - 22px - var(--pb-bottom-nav-height, 64px));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #374151 transparent;
  }
  /* Bottom fade = "there are more games below". A sticky ::after INSIDE the
     scroller, not a background gradient: the game cards are opaque and paint
     over the rail's own background, so a background-based scroll shadow would
     never be visible. Negative margin so it overlays the last rows instead of
     adding height. Removed at the end of the list by .is-rail-end, so the fade
     always means something. */
  .mlb-games-rail::after {
    content: '';
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: block;
    height: 44px;
    margin-top: -44px;
    pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.94));
    transition: opacity 0.15s ease;
  }
  .mlb-games-rail.is-rail-end::after { opacity: 0; }
  .mlb-games-rail::-webkit-scrollbar { width: 6px; }
  .mlb-games-rail::-webkit-scrollbar-track { background: transparent; }
  .mlb-games-rail::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }
  /* Back-button head — the back button pins to the top; alignRail() sets this
     element's height so its bottom (and the card list below) meets the scoreboard. */
  .mlb-gd-rail-head { display: flex; align-items: flex-start; padding: 2px 0 0; }
  /* Nudge the "Schedule" back button up 4px (into the rail's top padding). Applied
     to the button, NOT the head — the head keeps the fixed height alignRail() gives
     it, so the first game card stays lined up with the scoreboard. */
  .mlb-gd-rail-back { margin-top: -4px; }
  .mlb-games-rail-list { display: block; }
  /* The rail owns the back button on wide screens; hide the in-page topbar one
     but keep the topbar's height so the scoreboard doesn't shift. */
  #mlb-gd-shell > #mlb-game-detail .mlb-gd-topbar .mlb-gd-back { display: none; }
  #mlb-gd-shell > #mlb-game-detail .mlb-gd-topbar { min-height: 23px; }

  /* Game-card visuals — self-contained port of the NBA "games-sidebar" .gc*
     styles (css/nba/live-prop-tracker.css), scoped under .mlb-games-rail so
     they don't depend on that sheet (it's gated to NBA/NFL and never loads on
     MLB) and can't leak the generic .gc/.gc-row/... class names elsewhere. */
  /* Cards use the same navy panel surface as the Live-tab components
     (.pbr-card → var(--gd-surface) = #0E1014 on wide; --gd-line border). Literal
     values because the rail sits outside #mlb-game-detail where those tokens live. */
  .mlb-games-rail .gc {
    background: #0E1014;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .mlb-games-rail .gc:hover { border-color: rgba(255, 255, 255, 0.30); background: #111319; }
  .mlb-games-rail .gc.gc-active {
    border-color: #3b82f6;
    background: #111319;
    box-shadow: 0 0 0 1px #3b82f6;
  }
  .mlb-games-rail .gc-row { display: flex; align-items: center; gap: 10px; }
  .mlb-games-rail .gc-row + .gc-row { margin-top: 6px; }
  .mlb-games-rail .gc-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
  .mlb-games-rail .gc-abbr {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 600; color: #d1d5db;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mlb-games-rail .gc-score {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
  }
  .mlb-games-rail .gc-score.gc-w { color: #f0f0f0; }
  .mlb-games-rail .gc-score.gc-l { color: #6b7280; }
  .mlb-games-rail .gc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
  }
  .mlb-games-rail .gc-time { font-size: 11px; color: #6b7280; }
  .mlb-games-rail .gc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .mlb-games-rail .gc-badge-live  { background: rgba(239, 68, 68, 0.15); color: #f87171; }
  .mlb-games-rail .gc-badge-live::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    animation: mlb-gc-pulse 1.5s ease-in-out infinite;
  }
  .mlb-games-rail .gc-badge-final { background: rgba(16, 185, 129, 0.15); color: #34d399; }
  .mlb-games-rail .gc-badge-sched { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
  .mlb-games-rail .gs-empty { padding: 20px 8px; color: #4b5563; font-size: 13px; text-align: center; }
}
@keyframes mlb-gc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Never render the rail inside the dashboard's embed/iframe widget. (There is
   no shell in embed mode either — ensureContainer skips it — but guard anyway
   in case a wide iframe trips the media query.) */
body.pb-embed .mlb-games-rail { display: none !important; }
body.pb-embed #mlb-gd-shell { display: block; max-width: none; padding: 0; margin: 0; }

/* Live at-bat card guards: the card is zoom-fit to its width by
   gameDetailMLBPBP.js (fitAtBatCard), but the narrow ~1000–1280px band floors at
   the min scale, so keep the primary names and the mini-stat labels on ONE line
   even there — those were the original cramp symptoms ("Randy\nDobnak", "W\nL",
   "H\nAB", "1\n2"). Scoped to the at-bat card so other .pbr-pstat uses are
   untouched; the id-scoped selectors also out-specify the base rules. */
@media (min-width: 1001px) {
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-name,
  :is(#mlb-pbp-current, .pbr-cab) .pbr-clu-pname {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  :is(#mlb-pbp-current, .pbr-cab) .pbr-pstat b,
  :is(#mlb-pbp-current, .pbr-cab) .pbr-pstat span {
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RECAP TAB (final games). Uses the existing .pbr-card / .pbr-card-head /
   .pbr-card-title tokens so it sits in the same visual system as the Game and
   team tabs — only the recap-specific interior is defined here.
   ═══════════════════════════════════════════════════════════════════════ */
#mlb-pbp-recap { display: flex; flex-direction: column; gap: 14px; }

/* Headline banner. The sentence is the one piece of prose on the page, so it
   gets real size; the FINAL chip rides beside it rather than under it. */
.pbr-rc-headline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px 18px;
}
.pbr-rc-headline h3 {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  color: var(--gd-text-1);
}

/* Two-up on a wide screen, stacked on a phone. Key Plays and the linescore are
   the tall/wide pair, so they lead their columns. */
/* TWO COLUMNS, 9/3. The left carries the linescore and the scoring feed; the
   right stacks the three short cards. Each side is its own flex column so the
   right can run past the left instead of being locked into shared grid rows.
   `align-items: stretch` (the grid default) makes both columns the height of
   the taller one, and .pbr-rc-grow lets the shorter column's designated card
   take up the slack — that is what makes the two finish flush. */
.pbr-rc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pbr-rc-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pbr-rc-col > section { flex: 0 0 auto; }
/* 1400px, NOT 1001px. The game page's content column is only ~640px wide at a
   1001px viewport (the games rail takes the rest), so a 3/12 side column is
   157px — narrower than one prop leg. The split waits until the side column
   clears ~280px. */
@media (min-width: 1400px) {
  .pbr-rc-grid { grid-template-columns: 9fr 3fr; align-items: stretch; }
  /* Only meaningful in the column that has slack; in the taller one the free
     space is zero, so this is inert there. balanceRecapColumns() adds
     .pbr-rc-nogrow when the slack is too large for a card to absorb without
     looking empty (a 1-0 game with one scoring play). */
  .pbr-rc-col > .pbr-rc-grow { flex: 1 1 auto; }
  .pbr-rc-grid.pbr-rc-nogrow .pbr-rc-col > .pbr-rc-grow { flex: 0 0 auto; }
}
/* One column below that. The wrappers become transparent so the five cards can
   be ordered independently of the desktop column they belong to — otherwise
   both prop panels would sit below the whole scoring feed. */
@media (max-width: 1399px) {
  .pbr-rc-col { display: contents; }
  .pbr-rc-col--main > :nth-child(1) { order: 1; }   /* Score by Inning */
  .pbr-rc-col--side > :nth-child(2) { order: 2; }   /* Hindsight Parlay */
  .pbr-rc-col--side > :nth-child(3) { order: 3; }   /* Top Prop Results */
  .pbr-rc-col--main > :nth-child(2) { order: 4; }   /* Scoring Plays */
  .pbr-rc-col--side > :nth-child(1) { order: 5; }   /* Environment */
}

/* The linescore must NEVER scroll: it is the one table where a hidden column
   means a hidden inning. Below 760px the club name gives way to its code (the
   data-code attribute gameDetailMLBPBP writes onto the team cell) and the cells
   tighten — 13 columns do not fit a phone otherwise.
   Scoped to .pbr-gt-lscard, NOT to a grid-span class: an earlier version keyed
   off .pbr-rc-w12 and silently stopped applying the moment the grid was
   restructured, which put the sideways scroll straight back. */
@media (max-width: 760px) {
  #mlb-pbp-recap .pbr-gt-lscard .pbr-gt-ls-teamflex span { font-size: 0; }
  #mlb-pbp-recap .pbr-gt-lscard .pbr-gt-ls-teamflex span::after {
    content: attr(data-code);
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
  }
  #mlb-pbp-recap .pbr-gt-lscard .pbr-gt-ls th,
  #mlb-pbp-recap .pbr-gt-lscard .pbr-gt-ls td { padding-left: 3px; padding-right: 3px; font-size: 12px; }
  #mlb-pbp-recap .pbr-gt-lscard .pbr-gt-ls-team { padding-left: 10px; }
  #mlb-pbp-recap .pbr-gt-lscard .pbr-gt-logo { width: 18px; height: 18px; }
  #mlb-pbp-recap .pbr-gt-lscard .pbr-gt-scroll { overflow-x: visible; }
}

/* ── Key Plays ── */
.pbr-rc-kplist { list-style: none; margin: 0; padding: 6px 0; }
.pbr-rc-kp {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 9px 20px;
}
.pbr-rc-kp + .pbr-rc-kp { border-top: 1px solid var(--gd-line); }
.pbr-rc-kp-inn {
  font-family: var(--gd-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gd-text-3);
  border: 1px solid var(--gd-line-strong); border-radius: 6px;
  padding: 3px 7px; white-space: nowrap;
}
.pbr-rc-kp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pbr-rc-kp-logo img { width: 20px; height: 20px; object-fit: contain; display: block; }
/* Same reasoning as .pbr-rc-leg-n — a scoring play cut mid-description tells
   you nothing about what scored. */
.pbr-rc-kp-txt {
  min-width: 0; font-size: 13px; color: var(--gd-text-1); white-space: normal;
}
.pbr-rc-kp-score {
  font-family: var(--gd-font-mono); font-size: 12px; color: var(--gd-text-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pbr-rc-kp-more {
  padding: 8px 20px 14px; font-size: 11px; color: var(--gd-text-3);
  border-top: 1px solid var(--gd-line);
}

/* ── Game at a Glance ── */
.pbr-rc-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 16px 12px; gap: 8px;
}
.pbr-rc-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; min-width: 0; }
.pbr-rc-stat + .pbr-rc-stat { border-left: 1px solid var(--gd-line); }
.pbr-rc-stat-l { font-size: 11px; color: var(--gd-text-3); }
.pbr-rc-stat-v {
  font-size: 19px; font-weight: 800; color: var(--gd-text-1);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pbr-rc-stat-v small { font-size: 11px; font-weight: 600; color: var(--gd-text-3); }

.pbr-rc-people {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--gd-line);
}
.pbr-rc-person {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 10px; text-align: center; min-width: 0;
}
.pbr-rc-person + .pbr-rc-person { border-left: 1px solid var(--gd-line); }
.pbr-rc-person-l { font-size: 11px; color: var(--gd-text-3); }
.pbr-rc-person-n { font-size: 14px; font-weight: 700; color: var(--gd-text-1); }
.pbr-rc-person-s {
  font-family: var(--gd-font-mono); font-size: 11px; color: var(--gd-text-2);
  line-height: 1.4;
}
/* avatarHtml() emits `<span class=…>INITIALS<img></span>` — the initials are the
   FALLBACK and the headshot layers on top, so the span must be a positioned
   circle and the img must cover it absolutely. Sizing it alone left both
   visible, stacked. */
.pbr-rc-ava {
  position: relative; flex: none;
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--gd-line);
  font-family: var(--gd-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .02em; color: var(--gd-text-3);
}
/* Row-sized avatar — the leg and scoring-play rows are 13px text, so the
   38px card avatar would dominate them. */
.pbr-rc-ava--sm { width: 26px; height: 26px; font-size: 9px; }
.pbr-rc-ava img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}

/* ── Top Performers ── */
.pbr-rc-perfs { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1001px) {
  .pbr-rc-perfs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pbr-rc-perf + .pbr-rc-perf { border-left: 1px solid var(--gd-line); border-top: 0; }
}
.pbr-rc-perf { display: flex; align-items: center; gap: 12px; padding: 16px 20px; min-width: 0; }
.pbr-rc-perf + .pbr-rc-perf { border-top: 1px solid var(--gd-line); }
.pbr-rc-perf-t { min-width: 0; flex: 1 1 auto; }
.pbr-rc-perf-n {
  font-size: 14px; font-weight: 700; color: var(--gd-text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pbr-rc-perf-p {
  font-family: var(--gd-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; color: var(--gd-text-3);
}
.pbr-rc-perf-s { font-family: var(--gd-font-mono); font-size: 11px; color: var(--gd-text-2); margin-top: 2px; }
.pbr-rc-perf-logo img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* Phone: the mobile game page runs a larger type scale than desktop. */
@media (max-width: 1000px) {
  .pbr-rc-headline h3 { font-size: clamp(1.15rem, 3.4vw, 1.6rem); }
  .pbr-rc-kp { grid-template-columns: auto auto auto minmax(0, 1fr); row-gap: 6px; padding: 11px 16px; }
  .pbr-rc-kp-dot { display: none; }
  /* The score sits under the description rather than fighting it for the row. */
  .pbr-rc-kp-score { grid-column: 1 / -1; font-size: 13px; }
  .pbr-rc-kp-txt { white-space: normal; font-size: 14px; }
  .pbr-rc-kp-inn { font-size: 11px; }
  .pbr-rc-stat-l, .pbr-rc-person-l { font-size: 12px; }
  .pbr-rc-stat-v { font-size: 21px; }
  .pbr-rc-person-n, .pbr-rc-perf-n { font-size: 15px; }
  .pbr-rc-person-s, .pbr-rc-perf-s { font-size: 12px; }
}

/* The play result alone ("Forceout") does not say a run scored — on a KEY play
   the run count is the whole reason the row is here. */
.pbr-rc-kp-runs {
  margin-left: 8px; padding: 2px 7px; border-radius: 5px;
  font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; color: var(--gd-text-2);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--gd-line);
  white-space: nowrap;
}
@media (max-width: 1000px) { .pbr-rc-kp-runs { font-size: 11px; } }

/* ── Recap: prop / parlay panels ────────────────────────────────────────── */
.pbr-rc-legs { list-style: none; margin: 0; padding: 6px 0; }
.pbr-rc-leg {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; min-width: 0;
}
.pbr-rc-leg + .pbr-rc-leg { border-top: 1px solid var(--gd-line); }
/* WRAPS, never ellipsises. "Jackson Holliday Hits o0.5" truncated to
   "Jackson Holliday Hits…" loses the line, which is the whole row. At 1001-1400
   the cards are ~320px and 12-14 of these were being cut. */
.pbr-rc-leg-n {
  flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--gd-text-2);
  white-space: normal;
}
.pbr-rc-leg-n b { color: var(--gd-text-1); font-weight: 600; }
.pbr-rc-leg-a {
  font-family: var(--gd-font-mono); font-size: 11px; color: var(--gd-text-3);
  white-space: nowrap;
}
/* HIT / MISS / MISS BY — one token, three states. */
.pbr-rc-v {
  font-family: var(--gd-font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; padding: 3px 8px; border-radius: 5px; white-space: nowrap; flex: none;
}
.pbr-rc-v.is-hit  { color: #22c55e; background: rgba(34, 197, 94, .12);  border: 1px solid rgba(34, 197, 94, .3); }
.pbr-rc-v.is-miss { color: #ef4444; background: rgba(239, 68, 68, .12);  border: 1px solid rgba(239, 68, 68, .3); }
.pbr-rc-v.is-near { color: #f59e0b; background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .3); }

.pbr-rc-chip {
  font-family: var(--gd-font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; color: rgba(var(--theme-accent-rgb, 0, 211, 189), .95);
  border: 1px solid rgba(var(--theme-accent-rgb, 0, 211, 189), .35);
  background: rgba(var(--theme-accent-rgb, 0, 211, 189), .08);
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
}
.pbr-rc-parlay-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-top: 1px solid var(--gd-line);
}
.pbr-rc-parlay-score {
  font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--gd-text-1);
}
.pbr-rc-parlay-score.is-hit { color: #22c55e; }
.pbr-rc-parlay-sub { font-size: 11px; color: var(--gd-text-3); margin-top: 3px; }
.pbr-rc-parlay-odds {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--gd-font-mono); font-size: 20px; font-weight: 800;
  color: rgba(var(--theme-accent-rgb, 0, 211, 189), .95);
}
.pbr-rc-parlay-odds small {
  font-family: var(--gd-font-primary, inherit); font-size: 9px; font-weight: 500;
  letter-spacing: .04em; color: var(--gd-text-3); margin-top: 2px;
}

/* Best Prop Performers — a player card whose body is that player's own legs. */
.pbr-rc-pps { display: grid; grid-template-columns: 1fr; }
/* Two-up before four-up: at 1001px the game page's content column is ~640px, so
   four cards are 160px each and every prop line inside them was being cut. */
@media (min-width: 1001px) { .pbr-rc-pps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .pbr-rc-pps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pbr-rc-pp { min-width: 0; }
.pbr-rc-pp + .pbr-rc-pp { border-top: 1px solid var(--gd-line); }
@media (min-width: 1001px) {
  /* Two-up: divide every card from its neighbour on the left, and the second
     row from the first. */
  .pbr-rc-pp + .pbr-rc-pp { border-top: 0; }
  .pbr-rc-pp:nth-child(odd) + .pbr-rc-pp { border-left: 1px solid var(--gd-line); }
  .pbr-rc-pp:nth-child(n+3) { border-top: 1px solid var(--gd-line); }
}
@media (min-width: 1400px) {
  .pbr-rc-pp + .pbr-rc-pp { border-left: 1px solid var(--gd-line); }
  .pbr-rc-pp:nth-child(n+3) { border-top: 0; }
}
.pbr-rc-pp-top { display: flex; align-items: center; gap: 11px; padding: 14px 18px 10px; min-width: 0; }
.pbr-rc-pp-id { min-width: 0; flex: 1 1 auto; }
.pbr-rc-pp-n {
  font-size: 14px; font-weight: 700; color: var(--gd-text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pbr-rc-pp-s { font-family: var(--gd-font-mono); font-size: 11px; color: var(--gd-text-2); margin-top: 2px; }
.pbr-rc-pp-top img.pbr-gt-logo { width: 22px; height: 22px; object-fit: contain; }
.pbr-rc-pp-legs { padding: 0 0 6px; }
.pbr-rc-pp-legs .pbr-rc-leg { padding: 7px 18px; }
.pbr-rc-pp-legs .pbr-rc-leg-n { font-size: 12px; }

/* Environment rows */
.pbr-rc-envs { padding: 6px 0; }
.pbr-rc-env {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline; gap: 10px; padding: 11px 20px;
}
.pbr-rc-env + .pbr-rc-env { border-top: 1px solid var(--gd-line); }
.pbr-rc-env-l { font-size: 13px; color: var(--gd-text-2); }
.pbr-rc-env-v {
  font-size: 19px; font-weight: 800; color: var(--gd-text-1);
  font-variant-numeric: tabular-nums;
}
.pbr-rc-env-s { font-size: 11px; color: var(--gd-text-3); }

/* Provenance note — these verdicts were computed here, not read from the
   settled archive. Said once, quietly, at the foot of the tab. */
.pbr-rc-prov { padding: 2px 4px 0; font-size: 11px; color: var(--gd-text-3); }

@media (max-width: 1000px) {
  .pbr-rc-leg { padding: 11px 16px; }
  .pbr-rc-leg-n { font-size: 14px; white-space: normal; }
  .pbr-rc-leg-a, .pbr-rc-pp-s { font-size: 12px; }
  .pbr-rc-v { font-size: 11px; }
  .pbr-rc-env-l { font-size: 14px; }
  .pbr-rc-env-v { font-size: 21px; }
  .pbr-rc-parlay-odds { font-size: 22px; }
  .pbr-rc-prov { font-size: 12px; }
}

/* Pitch-mix modal v2 (2026-08-01): SocialPoster mix-card layout - faces
   flanking, single diverging edge bar per pitch, grade chip. ASCII only in
   this file (stored double-encoded). */
.mlb-gd-pm2 { max-width: 660px; }
.mlb-gd-pm2-head { display: flex; align-items: center; justify-content: space-between;
  padding: 2px 26px 0 2px; }
.mlb-gd-pm2-title { font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  color: #7B8494; }
.mlb-gd-pm2-chip { font-size: 13px; font-weight: 700; border: 1.5px solid;
  border-radius: 999px; padding: 3px 12px; }
.mlb-gd-pm2-chip.is-green { color: #34d399; border-color: rgba(52,211,153,.45); }
.mlb-gd-pm2-chip.is-grey  { color: #c2c8d0; border-color: rgba(194,200,208,.4); }
.mlb-gd-pm2-chip.is-red   { color: #e0857f; border-color: rgba(224,133,127,.45); }
.mlb-gd-pm2-sub { font-size: 11px; color: #8B94A3; padding: 6px 2px 14px; }
.mlb-gd-pm2-body { display: flex; align-items: center; gap: 16px; }
.mlb-gd-pm2-facecol { flex: 0 0 64px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; }
.mlb-gd-pm2-face { position: relative; width: 52px; height: 52px; border-radius: 50%;
  background: #1D2330; overflow: hidden;
  box-shadow: 0 0 0 2px #0B0C10, 0 0 0 4px #3A424F; }
.mlb-gd-pm2-face img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; }
.mlb-gd-pm2-face-nm { font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: #AEB6C2; text-transform: uppercase; max-width: 64px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mlb-gd-pm2-pill { display: inline-block; font-size: 9px; font-weight: 800;
  letter-spacing: .6px; border-radius: 4px; padding: 2px 6px; }
.mlb-gd-pm2-pill-r { background: #26557d; color: #cfe9ff; }
.mlb-gd-pm2-pill-l { background: #5c2531; color: #f3bcc8; }
.mlb-gd-pm2-pill-s { background: #4c2a5c; color: #e0c8f3; }
.mlb-gd-pm2-rows { flex: 1; display: flex; flex-direction: column; gap: 9px;
  min-width: 0; }
.mlb-gd-pm2-row { display: flex; align-items: center; gap: 10px; }
.mlb-gd-pm2-pitch { flex: 0 0 88px; font-size: 14px; font-weight: 600;
  color: #CDD2D9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlb-gd-pm2-usage { flex: 0 0 40px; text-align: right; font-size: 12.5px;
  color: #6B7280; }
.mlb-gd-pm2-track { flex: 1; position: relative; height: 15px; background: #13171F;
  border-radius: 4px; overflow: hidden; }
.mlb-gd-pm2-mid { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: #3A424F; }
.mlb-gd-pm2-fill { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; }
.mlb-gd-pm2-fill.is-pos { background: #34d399; }
.mlb-gd-pm2-fill.is-neg { background: #e0857f; }
.mlb-gd-pm2-edge { flex: 0 0 46px; text-align: right; font-size: 13.5px;
  font-weight: 700; color: #AEB6C2; }
.mlb-gd-pm2-edge.is-pos { color: #34d399; }
.mlb-gd-pm2-edge.is-neg { color: #e0857f; }
.mlb-gd-pm2-cap { display: flex; justify-content: center; gap: 44px;
  padding: 14px 0 4px; font-size: 11px; color: #8B94A3; }

/* Pitch-mix modal v2 sizing pass: wider face columns so last names never
   crop, and a much larger layout on narrow viewports (<=1000px). */
.mlb-gd-pm2-facecol { flex: 0 0 96px; }
.mlb-gd-pm2-face-nm { max-width: 96px; font-size: 9.5px; letter-spacing: .4px; }
@media (max-width: 1000px) {
  .mlb-gd-pm-overlay { padding: 10px; }
  .mlb-gd-pm2 { max-width: none; width: 96vw; padding: 20px 16px 16px; }
  .mlb-gd-pm2-face { width: 64px; height: 64px; }
  .mlb-gd-pm2-facecol { flex: 0 0 104px; }
  .mlb-gd-pm2-face-nm { max-width: 104px; font-size: 10.5px; }
  .mlb-gd-pm2-pitch { flex-basis: 96px; font-size: 15px; }
  .mlb-gd-pm2-usage { font-size: 13.5px; }
  .mlb-gd-pm2-edge { font-size: 15px; flex-basis: 52px; }
  .mlb-gd-pm2-track { height: 17px; }
  .mlb-gd-pm2-rows { gap: 12px; }
  .mlb-gd-pm2-chip { font-size: 14px; }
  .mlb-gd-pm2-sub { font-size: 12px; }
}

/* Pitch-mix modal v2, phone widths: side-by-side facecols leave no room
   for the tracks. Restack - faces to the top corners, rows full width. */
@media (max-width: 600px) {
  .mlb-gd-pm2-body { flex-wrap: wrap; justify-content: space-between; row-gap: 4px; }
  .mlb-gd-pm2-rows { order: 3; flex-basis: 100%; }
  .mlb-gd-pm2-facecol { flex: 0 0 auto; }
  .mlb-gd-pm2-pitch { flex-basis: 82px; font-size: 14px; }
}

/* Lineup density pass (2026-08-01): single-row header + tighter rows so
   all 9 hitters sit above the fold at 1080p. Later rules override the
   originals above. */
.mlb-gd-lineup-header { justify-content: flex-start; gap: 12px;
  padding: 0 0 10px; margin-bottom: 6px; flex-wrap: wrap; }
.mlb-gd-lineup-logo { width: 30px; height: 30px; }
.mlb-gd-lineup-head-col { flex-direction: row; align-items: center;
  gap: 14px; flex-wrap: wrap; }
.mlb-gd-lineup-team-name { font-size: 1.02rem; }
.mlb-gd-lineup-head-right { margin-left: auto; }
.mlb-gd-lineup-head-right .mlb-gd-lineup-toggle-range { margin: 0; }
.mlb-gd-lineup-table td { padding: 5px 6px; }
.mlb-gd-lineup-avatar { width: 30px; height: 30px; }
.mlb-gd-lineup-name-col { gap: 1px; }
/* Safari renders collapsed-table hairlines at varying thickness when row
   heights land on fractional pixels; separate borders are stable. */
.mlb-gd-lineup-table { border-collapse: separate; border-spacing: 0; }

/* Pitch-mix modal v2, phone: a bit narrower + keep the grade chip clear
   of the absolute close button. */
@media (max-width: 1000px) {
  .mlb-gd-pm2 { width: 91vw; }
  .mlb-gd-pm2-head { padding-right: 36px; }
}

/* ------------------------------------------------------------------ */
/* Header odds strip: ML + runline pills under each team, total O/U   */
/* under the center clock (applyHeaderOdds in gameDetailMLB.js).      */
/* ASCII ONLY in this file.                                           */
/* ------------------------------------------------------------------ */
.mlb-gd-odds-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.mlb-gd-team-home .mlb-gd-odds-row { justify-content: flex-end; }
.mlb-gd-odds-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(10, 18, 32, 0.55);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mlb-gd-odds-lbl { color: #8fa3b8; }
.mlb-gd-odds-val { color: #2dd4bf; font-variant-numeric: tabular-nums; }
.mlb-gd-odds-ou {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 2px;
}
.mlb-gd-odds-total-lbl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fa3b8;
}
.mlb-gd-odds-total-val {
  font-size: 22px;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mlb-gd-odds-ou-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  font-weight: 700;
}
.mlb-gd-odds-ou-row .mlb-gd-odds-val { font-size: 12px; }
@media (max-width: 760px) {
  .mlb-gd-odds-row { display: none; }  /* team ML/RL pills are desktop-only;
                                          the total block stays (compact
                                          sizing <=620px below) */
}

/* ------------------------------------------------------------------ */
/* SP card: grouped overview tiles + arsenal preview on the card face */
/* Lineup table: column group header row. ASCII ONLY in this file.    */
/* ------------------------------------------------------------------ */
.mlb-gd-sp-stats-grid.mlb-gd-sp-groups {
  display: grid;
  grid-template-columns: 3fr 2fr 2fr;
  gap: 8px;
}
.mlb-gd-sp-group {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(10, 18, 32, 0.35);
  padding: 8px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mlb-gd-sp-group-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
}
.mlb-gd-sp-group-body {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  flex: 1;
}
.mlb-gd-sp-groups .mlb-gd-sp-stat { min-width: 0; }

.mlb-gd-sp-arsprev {
  margin-left: auto;
  min-width: 190px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 2px 0 0 12px;
}
.mlb-gd-sp-arsprev-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa3b8;
  margin-bottom: 1px;
}
.mlb-gd-sp-arsprev-row {
  display: grid;
  grid-template-columns: 64px 1fr 34px;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
}
.mlb-gd-sp-arsprev-nm {
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mlb-gd-sp-arsprev-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.12);
  overflow: hidden;
  display: block;
}
.mlb-gd-sp-arsprev-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.mlb-gd-sp-arsprev-pct {
  color: #8fa3b8;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1180px) { .mlb-gd-sp-arsprev { display: none; } }

.mlb-gd-lu-grouprow th.mlb-gd-lu-group {
  text-align: center;
  padding: 8px 4px 3px;
  background: transparent;
  border: none;
}
.mlb-gd-lu-grouprow th.mlb-gd-lu-group.is-player {
  text-align: left;
  padding-left: 6px;
}
.mlb-gd-lu-group-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px 2px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fa3b8;
  white-space: nowrap;
}
.mlb-gd-lineup-table td.mlb-gd-lu-gs {
  border-left: 1px solid rgba(148, 163, 184, 0.12);
}

/* Lineup table: center all column titles except Batter (col 2). */
.mlb-gd-lineup-table thead tr:not(.mlb-gd-lu-grouprow) th {
  text-align: center;
}
.mlb-gd-lineup-table thead tr:not(.mlb-gd-lu-grouprow) th:nth-child(2) {
  text-align: left;
}

/* Color legend: shared meaning across SP tiles and lineup cells. */
.mlb-gd-legend-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 2px 6px;
}
.mlb-gd-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #7c93ab;
  white-space: nowrap;
}
.mlb-gd-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 8px;
}
.mlb-gd-legend-dot:first-child { margin-left: 0; }
.mlb-gd-legend-dot.is-good { background: #22c55e; }
.mlb-gd-legend-dot.is-bad  { background: #ef4444; }
.mlb-gd-lineup-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* Legend placement: centered footer on SP cards and under each lineup table. */
.mlb-gd-sp-legend-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.mlb-gd-lu-legend-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Mobile (<=1000px): stack the SP tile GROUPS full-width so each tile keeps
   a readable horizontal footprint instead of squeezing three groups across
   a narrow card (label/value/avg were wrapping into tall slivers). */
@media (max-width: 1000px) {
  .mlb-gd-sp-stats-grid.mlb-gd-sp-groups {
    grid-template-columns: 1fr 1fr;   /* run prevention spans the top row;
                                         K/BB + workload pair up below */
    gap: 6px;
  }
  .mlb-gd-sp-groups [data-sp-group="run_prevention"] { grid-column: 1 / -1; }
  .mlb-gd-sp-groups .mlb-gd-sp-stat {
    padding: 6px 8px;
    align-items: center;   /* tiles stretch full width here — centered
                              content fills them instead of hugging the
                              left edge of a mostly-empty box */
    text-align: center;
  }
}

/* Mobile (<=700px) Overview lineup table: curated column set that fits the
   viewport with NO sideways scroll — #, Batter, Mix, PA, SLG, K%, ISO.
   The full 15-column set stays on wider screens. The group-pill row hides
   because its colspans cannot follow hidden columns. Rows get taller for
   touch. th and td share data-stat attrs so one selector list rules both. */
@media (max-width: 700px) {
  .mlb-gd-lu-grouprow { display: none; }
  .mlb-gd-lineup-table [data-stat="avg"],
  .mlb-gd-lineup-table [data-stat="obp"],
  .mlb-gd-lineup-table [data-stat="ops"],
  .mlb-gd-lineup-table [data-stat="k_pct"],
  .mlb-gd-lineup-table [data-stat="bb_pct"],
  .mlb-gd-lineup-table [data-stat="avg_ev"],
  .mlb-gd-lineup-table [data-stat="avg_la"],
  .mlb-gd-lineup-table [data-stat="fb_pct"],
  .mlb-gd-lineup-table [data-stat="iso"],
  .mlb-gd-lineup-table [data-stat="ab_per_hr"] { display: none; }
  .mlb-gd-lineup-table td.mlb-gd-lu-gs,
  .mlb-gd-lineup-table th.mlb-gd-lu-gs { border-left: none; }
  .mlb-gd-lineup-table td { padding-top: 12px; padding-bottom: 12px; }
  .mlb-gd-lineup-table td[data-stat] { font-size: 14.5px; }
  .mlb-gd-lineup-table thead th { font-size: 11.5px; }
}

/* Phone header (<=620px): the two-column team block (logo | score/nick)
   needs ~170-230px per side but the grid tracks resolve to ~86px at 390w,
   so nicknames painted OVER the center clock (visible grid overflow does
   not scroll, it overpaints). Stack each club vertically instead — logo,
   score, nickname centered in a narrow true-fitting column — and re-show
   a compact total under the clock now that the center has room. */
@media (max-width: 620px) {
  .mlb-gd-sb-main {
    grid-template-columns: 1fr minmax(140px, auto) 1fr;
    padding: 14px 10px 12px;
    gap: 8px;
  }
  .mlb-gd-team,
  .mlb-gd-team-home {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "logo" "score" "info";
    justify-content: center;
    justify-items: center;
    gap: 2px;
  }
  .mlb-gd-team-logo { width: 50px; height: 50px; }
  .mlb-gd-team-score { font-size: 34px; align-self: center; }
  .mlb-gd-team-nick {
    font-size: 13.5px;
    margin-top: 3px;
    max-width: 104px;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
  }
  .mlb-gd-when-time { font-size: 20px; }
  .mlb-gd-when-date { font-size: 12px; }
  .mlb-gd-odds-ou { display: flex; }        /* compact total fits again */
  .mlb-gd-odds-total-lbl { font-size: 9px; }
  .mlb-gd-odds-total-val { font-size: 17px; }
  .mlb-gd-odds-ou-row { font-size: 10.5px; gap: 5px; }
  .mlb-gd-odds-ou-row .mlb-gd-odds-val { font-size: 10.5px; }
}

/* Tablet band (621-1000px): pregame club info (nickname + odds pills) was
   centered in its wide grid track while the logo sat at the outer edge,
   leaving an orphan gap between logo and name. Snap the info block toward
   its logo. :has(score[hidden]) scopes this to pregame — live headers keep
   the centered score/nick cluster. */
@media (min-width: 621px) and (max-width: 1000px) {
  .mlb-gd-team:has(.mlb-gd-team-score[hidden]) .mlb-gd-team-info {
    justify-self: start;
    text-align: left;
  }
  .mlb-gd-team-home:has(.mlb-gd-team-score[hidden]) .mlb-gd-team-info {
    justify-self: end;
    text-align: right;
  }
}

/* Mobile (<=1000px — phones render this page at ~980px VIRTUAL width, no
   viewport meta, so 1000 is the app's real phone band): interleave the
   Overview into matchup pairs — each pitcher card full width, directly
   above the lineup he faces. display:contents flattens the SP grid so its
   two columns join the flow container and can be ordered against the
   lineup sections. Desktop keeps side-by-side cards + tables below. */
/* Desktop: the flow wrapper must be layout-transparent — the tab panel is a
   flex column whose 18px gap spaces the SP grid / lineup sections, and a
   plain div wrapper was swallowing them into one flex item (no gaps). */
.mlb-gd-matchup-flow { display: contents; }
@media (max-width: 1000px) {
  .mlb-gd-matchup-flow { display: flex; flex-direction: column; gap: 16px; }
  .mlb-gd-matchup-flow .mlb-gd-sp-grid { display: contents; }
  .mlb-gd-matchup-flow .mlb-gd-sp-col.is-away { order: 1; }
  .mlb-gd-matchup-flow .mlb-gd-lineup-section.is-home { order: 2; }
  .mlb-gd-matchup-flow .mlb-gd-sp-col.is-home { order: 3; }
  .mlb-gd-matchup-flow .mlb-gd-lineup-section.is-away { order: 4; }
}

/* SP identity blurb (slice 3) — one rule-generated line under the chips. */
.mlb-gd-sp-blurb {
  font-size: 12px;
  color: #8fa3b8;
  margin-top: 7px;
  line-height: 1.3;
}

/* Hitter role tags (slice 3) — assigned at stats hydration. */
.mlb-gd-role-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mlb-gd-role-tag.is-target {
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.45);
  background: rgba(45, 212, 191, 0.10);
}
.mlb-gd-role-tag.is-boombust {
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: rgba(251, 191, 36, 0.08);
}

/* HR Focus (slice 4): column preset — keep power-relevant stats only
   (PA SLG ISO AVG-EV FB% AB/HR). Group pill row hides because its static
   colspans cannot follow hidden columns. */
.mlb-gd-lineup-section[data-hr-focus="1"] .mlb-gd-lu-grouprow { display: none; }
.mlb-gd-lineup-section[data-hr-focus="1"] .mlb-gd-lineup-table [data-stat="avg"],
.mlb-gd-lineup-section[data-hr-focus="1"] .mlb-gd-lineup-table [data-stat="obp"],
.mlb-gd-lineup-section[data-hr-focus="1"] .mlb-gd-lineup-table [data-stat="ops"],
.mlb-gd-lineup-section[data-hr-focus="1"] .mlb-gd-lineup-table [data-stat="k_pct"],
.mlb-gd-lineup-section[data-hr-focus="1"] .mlb-gd-lineup-table [data-stat="bb_pct"],
.mlb-gd-lineup-section[data-hr-focus="1"] .mlb-gd-lineup-table [data-stat="avg_la"] {
  display: none;
}
.mlb-gd-lineup-section[data-hr-focus="1"] .mlb-gd-lineup-table td.mlb-gd-lu-gs,
.mlb-gd-lineup-section[data-hr-focus="1"] .mlb-gd-lineup-table th.mlb-gd-lu-gs {
  border-left: none;
}
.mlb-gd-lineup-pill-hrfocus { margin-left: 10px; }

/* The grouped grid sets display:grid AFTER the [hidden] guard in the
   cascade — restate the guard so subtab switching actually hides it. */
.mlb-gd-sp-stats-grid.mlb-gd-sp-groups[hidden] { display: none; }

/* Vertical density pass (2026-08-08): the full 9-hitter lineup should sit
   in the initial 1080p viewport. Same typography, columns, and hierarchy --
   only vertical padding/gaps tighten (~15-20 percent) above and within the
   lineup table. Desktop band only; the phone band keeps its own spacing. */
@media (min-width: 1001px) {
  #mlb-game-detail { padding: 10px 20px 24px; gap: 11px; }
  #mlb-game-detail .mlb-gd-tab-panel { gap: 11px; }
  #mlb-game-detail .mlb-gd-tab { padding: 9px 16px 6px; }
  .mlb-gd-sb-main { padding: 13px 36px 11px; gap: 18px; }
  .mlb-gd-team-logo { width: 46px; height: 46px; }
  #mlb-game-detail .mlb-gd-card { padding: 10px 14px; }
  .mlb-gd-sp-card { padding: 12px; gap: 9px; }
  .mlb-gd-sp-avatar { width: 58px; height: 58px; }
  .mlb-gd-sp-stat { padding: 5px 9px; }
  .mlb-gd-sp-group { padding: 6px 8px 4px; gap: 4px; }
  .mlb-gd-sp-tab { padding: 4px 10px; }
  .mlb-gd-lineup-table th { padding: 4px 6px; }
  .mlb-gd-lineup-table td { padding: 4px 6px; }
  .mlb-gd-lineup-avatar { width: 26px; height: 26px; }
  .mlb-gd-lu-grouprow th.mlb-gd-lu-group { padding: 4px 4px 2px; }
  .mlb-gd-lineup-header { padding: 0 0 7px; margin-bottom: 4px; }
}

/* Props tab (2026-08-08): rows are ~3 text lines tall but the avatar was a
   34px dot -- desktop scales it to fill the row's existing height (no row
   growth; the text stack still sets the height). Phone band already runs
   62px and stays untouched. */
@media (min-width: 1001px) {
  .mlb-gd-prop-avatar { width: 54px; height: 54px; }
  .mlb-gd-prop-header { gap: 12px; }
}

/* Header round 2 (2026-08-08): another ~10 percent off the scoreboard card,
   while the center TOTAL block gets MORE internal air -- it was packed at
   2px gaps inside a column with 10px gaps, which read as cramped. */
@media (min-width: 1001px) {
  .mlb-gd-sb-main { padding: 8px 36px 7px; }
  .mlb-gd-state { gap: 6px; }
  .mlb-gd-odds-ou { gap: 5px; margin-top: 4px; }
}

/* Recent sub-tab shows plain uncolored rows -- the better/worse legend is
   meaningless there. Hide it only while the Recent panel is the active one. */
.mlb-gd-sp-card:has([data-sp-panel="recent"]:not([hidden])) .mlb-gd-sp-legend-row {
  display: none;
}

/* Navy pivot (2026-08-08, user direction): surfaces move from neutral
   charcoal to a very dark blue-tinted navy; background stays black, teal
   accents and red/green stat states untouched. Overrides ALL THREE earlier
   token scopes (base ~24, wide-panel ~2707, weather ~3095) by cascade. */
#mlb-game-detail, .pbr-modal, .pbt-overlay,
#mlb-game-detail .mlb-gd-sb,
#mlb-game-detail .mlb-gd-tabs,
#mlb-game-detail .mlb-gd-topbar,
#mlb-game-detail .mlb-gd-tab-panel[data-panel="info"],
#mlb-game-detail .mlb-gd-tab-panel[data-panel="props"],
#mlb-game-detail .mlb-gd-tab-panel[data-panel="weather"],
#mlb-pbp-root, #mlb-pbp-team-away, #mlb-pbp-team-home, #mlb-pbp-game {
  --gd-surface:   #090E17;
  --gd-surface-2: #0D1420;
  --gd-surface-3: #121B2A;
  --gd-line: #202A36;
  --gd-line-strong: #2C3A4B;
}

/* Same navy family for the two non-tokened surfaces: the games rail's card
   visuals (hardcoded greys from the NBA sidebar port) and the site navbar
   (previously transparent over the page background). */
@media (min-width: 1001px) {
  .mlb-games-rail .gc { background: #090E17; border-color: #202A36; }
  .mlb-games-rail .gc:hover { background: none; border-color: #2C3A4B; }
}
.navbar {
  background: #090E17;
  border-bottom: 1px solid #202A36;
}

/* Overview rebalance (2026-08-08): same components and data — the header
   gives up ~20-25 percent of its height, the pitcher cards ~5-10 percent,
   and the hitter table spends the reclaimed space on taller rows so it
   reads as the dominant section. Desktop band only. */
@media (min-width: 1001px) {
  /* the wide-layout rule at ~2754 is #mlb-game-detail-scoped — match it */
  #mlb-game-detail .mlb-gd-sb-main { padding: 8px 34px 7px; gap: 28px 28px; row-gap: 0; }
  .mlb-gd-team-logo { width: 40px; height: 40px; }
  #mlb-game-detail .mlb-gd-team-code { font-size: 23px; }
  .mlb-gd-odds-row { margin-top: 6px; }
  .mlb-gd-odds-pill { padding: 3px 10px; }
  .mlb-gd-state { gap: 4px; }
  .mlb-gd-when-time { font-size: 18px; }
  .mlb-gd-odds-total-val { font-size: 19px; }
  .mlb-gd-odds-ou { gap: 4px; margin-top: 2px; }
  .mlb-gd-sp-card { padding: 10px 12px; gap: 7px; }
  .mlb-gd-sp-avatar { width: 52px; height: 52px; }
  .mlb-gd-sp-stat { padding: 4px 8px; }
  .mlb-gd-sp-group { padding: 5px 7px 3px; gap: 3px; }
  .mlb-gd-sp-tab { padding: 3px 9px; }
  .mlb-gd-lineup-table th { padding: 5px 6px; }
  .mlb-gd-lineup-table td { padding: 8px 6px; }
  .mlb-gd-lineup-avatar { width: 30px; height: 30px; }
  .mlb-gd-lu-grouprow th.mlb-gd-lu-group { padding: 6px 4px 3px; }
  .mlb-gd-lineup-header { padding: 2px 0 9px; margin-bottom: 4px; }
}

/* The scoreboard masthead hardcodes a literal grey gradient in the wide
   layout (~2746, the "grey twins" of the ORIGINAL navy pair) — vars don't
   reach it. Same top-lighter-than-bottom fall, back in the navy family. */
@media (min-width: 1001px) {
  #mlb-game-detail .mlb-gd-sb {
    background: linear-gradient(180deg, #101828, #070C14);
    border-color: #202A36;
  }
}

/* SP card header pass (2026-08-09): the STARTING PITCHER tag row is gone
   from the populated card (markup change in gameDetailMLBMatchup.js); the
   identity blurb is promoted to white and slightly larger; on wide screens
   the headshot grows to fill the name+chips+blurb column height. Scoped
   with #mlb-game-detail so these outrank the bare-class density passes. */
#mlb-game-detail .mlb-gd-sp-blurb,
.pbr-modal .mlb-gd-sp-blurb,
.pbt-overlay .mlb-gd-sp-blurb {
  color: #eef3f8;
  font-size: 13px;
}
@media (min-width: 1001px) {
  #mlb-game-detail .mlb-gd-sp-avatar { width: 88px; height: 88px; }
}

/* Masthead team identity, wide screens + UPCOMING games only (2026-08-09,
   replaces the reverted trio-width cap): drop the CODE-over-name stack and
   show the FULL team name at the code's size and weight on one line.
   Keyed on the pregame total block via :has() so live and final headers
   keep the compact code + score layout. */
@media (min-width: 1001px) {
  #mlb-game-detail .mlb-gd-sb-main:has(.mlb-gd-odds-ou) .mlb-gd-team-code {
    display: none;
  }
  #mlb-game-detail .mlb-gd-sb-main:has(.mlb-gd-odds-ou) .mlb-gd-team-name {
    font-family: var(--gd-font-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--gd-text);
    margin-top: 0;
  }
  /* rebalance the name-to-pills scale cliff: the wide density pass slims
     the pills, which fights the promoted one-line name - restore pill
     presence and give the row real separation under the big name */
  #mlb-game-detail .mlb-gd-sb-main:has(.mlb-gd-odds-ou) .mlb-gd-odds-row {
    margin-top: 9px;
    gap: 8px;
  }
  #mlb-game-detail .mlb-gd-sb-main:has(.mlb-gd-odds-ou) .mlb-gd-odds-pill {
    padding: 5px 12px;
    font-size: 13px;
  }
}

/* LHP hand chip (2026-08-09): lefty starters were red like righties - match
   the lineup's LHB blue so handedness reads consistently across the page. */
#mlb-game-detail .mlb-gd-sp-chip-hand-l,
.pbr-modal .mlb-gd-sp-chip-hand-l,
.pbt-overlay .mlb-gd-sp-chip-hand-l {
  background: rgba(79, 143, 247, 0.14);
  color: #7dd3fc;
  border-color: rgba(79, 143, 247, 0.32);
}

/* SHB hand chip (2026-08-09): switch hitters had NO -s rule (and feeds
   encoding switch as "B" got no chip at all - JS fixed alongside). Violet
   distinguishes from LHB blue / RHB red; the hand-s class was already
   expected by the platoon reader in gameDetailMLBMatchup.js. */
#mlb-game-detail .mlb-gd-lineup-hand-s,
.pbr-modal .mlb-gd-lineup-hand-s,
.pbt-overlay .mlb-gd-lineup-hand-s {
  background: rgba(139, 92, 246, 0.14);
  color: #c4b5fd;
}

/* ============================================================
   Desktop matchup-dashboard refinement pass (2026-08-09 mockup):
   tab rail fused into the masthead card, pitcher-card hierarchy,
   single-row lineup toolbar, quiet column-group labels with
   dividers, stronger divided identity column, tighter rows.
   Wide screens only; palette/data coloring untouched.
   ============================================================ */
@media (min-width: 1001px) {
  /* 1 - Overview/Props/Weather rail lives INSIDE the header card */
  #mlb-game-detail .mlb-gd-sb {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
  }
  #mlb-game-detail .mlb-gd-tabs {
    margin: -18px 0 0;             /* fuse over the shell's flex gap */
    background: var(--gd-surface);
    border: 1px solid var(--gd-line);
    border-radius: 0 0 var(--gd-radius) var(--gd-radius);
    justify-content: center;
    gap: 34px;
    padding: 3px 10px 0;
  }
  #mlb-game-detail .mlb-gd-tab {
    padding: 10px 8px 8px;
    font-size: 13.5px;
  }
  /* space between the fused header card and the pitcher cards */
  #mlb-game-detail .mlb-gd-tabs { margin-bottom: 16px; }
  /* matching 16px rhythm BELOW the cards (panel gap was 11) */
  #mlb-game-detail .mlb-gd-tab-panel { gap: 16px; }
  /* app-wide top trim (user: mirror the film): the page starts closer to
     the navbar - global main-content margin scoped to THIS page only */
  .main-content:has(#mlb-gd-shell) { margin-top: 2px; }
  #mlb-game-detail { padding-top: 4px; }
  #mlb-game-detail .mlb-gd-sb { margin-top: -8px; }
  /* rail alignment: first game card tops out level with the masthead and
     the back button rides higher (18px pad was pushing both 14px low) */
  .mlb-games-rail { padding-top: 4px; }
  .mlb-gd-rail-head { margin-bottom: 8px; }   /* air above the first card */
  /* the O/U odds row made the center column overflow the masthead (and
     dragged its flanking dividers down) - the Total is the story here */
  #mlb-game-detail .mlb-gd-odds-ou-row { display: none; }
  /* pregame masthead: bottom breathing room, and the center dividers hug
     the content instead of stretching the full card height */
  /* ALL states: the fused rail removed the card edge below the masthead,
     so every variant needs bottom padding or its center dividers run into
     the rail's border (live/final keep their full-height stretch; this
     just stops the bleed). The pregame :has rule below overrides deeper. */
  #mlb-game-detail .mlb-gd-sb-main {
    padding-top: 18px;
    padding-bottom: 26px;
  }
  /* pregame AND scaffold gate: the linescore sits [hidden] until the PBP
     module unhides it for live/final — one valid signal for every
     pre-data state. (Lesson: :has() cannot nest inside :has(); an invalid
     selector in a list VOIDS the whole rule, which silently stripped the
     settled masthead's padding.) */
  #mlb-game-detail .mlb-gd-sb:has(> .mlb-gd-linescore[hidden]) .mlb-gd-sb-main {
    padding-bottom: 27px;
    padding-top: 14px;
  }
  #mlb-game-detail .mlb-gd-sb:has(> .mlb-gd-linescore[hidden]) .mlb-gd-state {
    align-self: center;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* 2 - pitcher card: larger name, divider under the header block,
         arsenal hard-right, quieter mixed-case sub-tabs */
  #mlb-game-detail .mlb-gd-sp-name { font-size: 20px; }
  #mlb-game-detail .mlb-gd-sp-top {
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gd-line);
  }
  /* four preview rows are reserved with GHOST rows (see the arsPrev
     builder) — same markup, same layout math, so the reservation is exact
     at any browser zoom; a fixed px min-height drifted (user-caught) */
  #mlb-game-detail .mlb-gd-sp-arsprev { margin-left: auto; }
  /* half-height ghosts: the user wants the reservation midway between
     no-reserve and a full fourth row */
  .mlb-gd-sp-arsprev-ghost { visibility: hidden; height: 16px; overflow: hidden; }
  /* thin line stays BELOW the sub-tabs too (base border kept) */
  #mlb-game-detail .mlb-gd-sp-tabs { margin: 2px 0 10px; gap: 12px; }
  /* vertical dividers between the three stat groups */
  /* balanced divider flanks: grid gap 12 left of the line, 11px pad +
     1px border = 12 right (was 8 vs 15 - leaned left) */
  #mlb-game-detail .mlb-gd-sp-groups { gap: 12px; }
  #mlb-game-detail .mlb-gd-sp-group + .mlb-gd-sp-group {
    border-left: 1px solid var(--gd-line);
    padding-left: 11px;
  }
  #mlb-game-detail .mlb-gd-sp-group-title { margin-bottom: 6px; }
  #mlb-game-detail .mlb-gd-sp-tab {
    text-transform: none;
    letter-spacing: .02em;
    font-weight: 600;
    font-size: .8rem;
  }
  /* stat groups: no outer container box - the label floats above bare
     tiles (each tile keeps its own colored border) */
  #mlb-game-detail .mlb-gd-sp-group {
    border: none;
    background: none;
    padding: 0;
    border-radius: 0;   /* inherited radius curved the divider line ends */
  }

  /* 3 - lineup controls: team name + mode toggle on ONE toolbar row */
  #mlb-game-detail .mlb-gd-lineup-head-col {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  /* 4 - column-group pills become quiet labels; hairlines split groups */
  #mlb-game-detail .mlb-gd-lu-group-pill {
    border: none;
    background: none;
    padding: 0 2px;
    font-size: 10px;
    letter-spacing: .13em;
    color: #7f93a8;
  }
  #mlb-game-detail th.mlb-gd-lu-group { border-left: 1px solid var(--gd-line); }
  #mlb-game-detail th.mlb-gd-lu-group.is-player { border-left: none; }

  /* 5 - identity column divider: border-LEFT on the first stat cell so
     header and body lines share one physical edge (a body border-right
     meeting header border-lefts renders 1px apart - user-caught jog) */
  #mlb-game-detail .mlb-gd-lineup-table tbody td:nth-child(3) {
    border-left: 1px solid var(--gd-line);
  }
  /* identity header: '#' over numbers, PLAYER over avatars, BATTER over
     names - one balanced label row; the group-row Player pill retires */
  #mlb-game-detail .mlb-gd-lu-group.is-player .mlb-gd-lu-group-pill { display: none; }
  #mlb-game-detail .mlb-gd-lu-batter-th { display: flex; gap: 14px; padding-left: 6px; }
  /* group dividers continue through the column-label row at each group's
     first column (3=MIX 4=PA 9=K% 11=AVG EV 14=ISO) so the header lines
     align into single continuous verticals */
  #mlb-game-detail .mlb-gd-lineup-table thead tr:nth-child(2) th:nth-child(3),
  #mlb-game-detail .mlb-gd-lineup-table thead tr:nth-child(2) th:nth-child(4),
  #mlb-game-detail .mlb-gd-lineup-table thead tr:nth-child(2) th:nth-child(9),
  #mlb-game-detail .mlb-gd-lineup-table thead tr:nth-child(2) th:nth-child(11),
  #mlb-game-detail .mlb-gd-lineup-table thead tr:nth-child(2) th:nth-child(14) {
    border-left: 1px solid var(--gd-line);
  }
  #mlb-game-detail .mlb-gd-lineup-name-link { font-size: 13.5px; }

  /* 6 - tighter rows; section separation stays on the shell gap */
  #mlb-game-detail .mlb-gd-lineup-table td {
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* Hourly Game Forecast strip (2026-08-09): all three hour cards share the
   boxed treatment (the lone blue First Pitch card read as an accident) and
   split the row width evenly instead of hugging the left. */
.wxt-hr-body { gap: 14px; flex-wrap: wrap; }
.wxt-hr-body .wxt-hr-col {
  flex: 1 1 0;
  min-width: 150px;
  background: rgba(92, 168, 240, 0.09);
  border: 1px solid rgba(92, 168, 240, 0.24);
  padding: 16px 12px;
}