/* =========================================================
   MANCK STATS — ESPN-style box score page
   Loads AFTER styles.css (reuses its color/font tokens).
   ========================================================= */

:root{
  --team1-color: #E8A33D;   /* accent (amber) */
  --team2-color: #6FA8DC;   /* cool blue, for contrast against team 1 */
  /* Contrast-safe companions to the raw team colors above — used in
     place of the raw color anywhere it sits as TEXT on our dark page
     background, or anywhere dark (--bg) text sits ON TOP of it as a
     fill. When a page sets a custom team color (converter/live setup),
     these get overridden with values computed by
     BoxscoreEngine.deriveTeamColorVars() so a dark school color like
     navy or forest green stays legible in both directions instead of
     defaulting to unreadable. Our own amber/blue defaults are already
     light enough to need no adjustment, so they just repeat as-is. */
  --team1-color-text: #E8A33D;
  --team2-color-text: #6FA8DC;
  --team1-on-color: #12181B;
  --team2-on-color: #12181B;
  --bar-track: rgba(242,239,233,0.08);
}

.espn-page{ padding: 32px 0 72px; }

.back-link{
  display: inline-block;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}
.back-link:hover{ color: var(--accent); }

.box-header-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.box-header-actions .back-link{ margin-bottom: 0; }
.print-page-btn{
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
}
.print-page-btn:hover{ border-color: var(--accent); color: var(--accent); }

/* ---------- GAME CARD ---------- */
.boxscore-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 24px 22px;
  margin-bottom: 28px;
}
.game-card-status{
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--live);
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ---------- LIVE VIEWER ---------- */
.live-dot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  margin-right: 6px;
  animation: live-pulse 1.6s ease-in-out infinite;
}
.live-dot.live-dot-static{ animation: none; }
.live-dot.live-dot-kickoff{
  animation: none;
  background: #D4AC0D;
}
.kickoff-text{ color: #D4AC0D; }
@keyframes live-pulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.45; transform: scale(0.75); }
}
.live-status-bar{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.live-status-bar.is-visible{ display: flex; }
.live-status-bar .live-dot{ margin-right: 0; }
.live-status-bar.is-stale .live-dot{ background: var(--text-muted); animation: none; }
.live-status-bar.is-stale{ color: var(--text-muted); }

.share-card-bar{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.share-card-bar.is-visible{ display: flex; }
.share-card-label{
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.share-card-btn{
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
}
.share-card-btn:hover{ border-color: var(--accent); color: var(--accent); }
.share-card-btn:disabled{ opacity: 0.5; cursor: default; }
.live-loading{
  text-align: center;
  color: var(--text-muted);
  padding: 60px 0;
  font-size: 15px;
}
.live-error{
  text-align: center;
  color: var(--live);
  padding: 40px 20px;
  font-size: 15px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.live-empty{
  color: var(--text-muted);
  font-size: 14px;
  padding: 12px 0;
}

/* ---------- Current situation (inside the top scoreboard card) ---------- */
/* Sits below the linescore/weather line, inside .boxscore-card, with a
   divider above it so it reads as a distinct "here's what's happening
   right now" block within the card: current situation on its own
   line, an optional scoring/red-zone alert banner, then "Last play"
   on its own line, then drive status. */
.situation-top{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
}
.situation-team{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.situation-team.st1{ color: var(--team1-color-text); }
.situation-team.st2{ color: var(--team2-color-text); }
.situation-dd{ color: var(--text); font-size: 16px; font-weight: 700; }
.situation-spot{ color: var(--text-muted); font-size: 14px; }
.situation-qtr{
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(232,163,61,0.12);
  padding: 3px 8px;
  border-radius: 999px;
}
.situation-lastplay-row{
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--font-body);
}
.situation-lastplay-label{
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.situation-lastplay-text{ color: var(--text-muted); font-size: 13px; }
.situation-drive{
  text-align: left;
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-body);
  margin-top: 8px;
}

/* ---------- Game alerts (scoring / red zone) ---------- */
.game-alert{
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.game-alert-score{ background: #1E8449; }
.game-alert-penalty{ background: #F1C40F; color: #12181B; }
.game-alert-redzone{ background: #C0392B; }
.game-alert-chunk{ background: #2E5FA3; }

/* ---------- Back-to-live floating button ---------- */
.back-to-live-btn{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--live);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.back-to-live-btn.is-visible{ display: inline-flex; }
.back-to-live-btn:hover{ background: #c13a24; }
@media (max-width: 640px){
  .back-to-live-btn{ bottom: 16px; right: 16px; padding: 10px 16px; font-size: 12px; }
}

/* ---------- Jump nav (top of the live game card) ---------- */
.jump-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.jump-nav a{
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.jump-nav a:hover{
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}
/* Offset anchor targets so the sticky site header (68px) doesn't cover
   the top of the section when jumped to. */
.espn-page section[id]{ scroll-margin-top: 84px; }

/* ---------- Single-page live layout section spacing ---------- */
.espn-page section{ margin-bottom: 44px; }
.espn-page section:last-child{ margin-bottom: 0; }

/* ---------- Sidebar live layout (Team Stats sidebar, PBP + Individual
   Stats stacked in the main column) ---------- */
.live-split{
  display: grid;
  /* minmax(0, 1fr) instead of plain 1fr for the same reason as
     .stat-duo-grid below: the livetest "Live" tab's wide side-by-side
     player tables need the main column to actually hold to its track
     width instead of growing to fit them, or the sidebar gets pushed
     off past the right edge of the page. */
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
  margin-bottom: 44px;
}
.live-main{ min-width: 0; }
.live-main section{ margin-bottom: 40px; }
.live-main section:last-child{ margin-bottom: 0; }
.live-sidebar{
  position: sticky;
  top: 84px;
}
@media (max-width: 900px){
  .live-split{ grid-template-columns: 1fr; gap: 0; }
  .live-sidebar{ position: static; margin-top: 0; order: -1; margin-bottom: 40px; }
}

/* ---------- Situation area with field diagram on the right ---------- */
.situation-wrap{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.situation-content{
  flex: 1 1 60%;
  min-width: 0;
}
.situation-field{
  flex: 1 1 50%;
  min-width: 0;
}
.field-diagram{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
@media (max-width: 640px){
  .situation-field{ flex-basis: 100%; }
}

/* ---------- Recent Plays column (right side of the situation row) ----------
   Replaces the old single "Last play" line with a short newest-first feed,
   similar to the recent-plays panel on StatBroadcast's live monitor —
   sits beside the down/distance/possession/drive-status info rather than
   inline within it, so both are scannable at a glance. */
.situation-recent-plays{
  flex: 1 1 40%;
  min-width: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.recent-plays-heading{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.recent-plays-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.recent-play-row{
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.recent-play-team{
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.recent-play-row.rp-t1 .recent-play-team{ background: rgba(232,163,61,0.16); color: var(--team1-color-text); }
.recent-play-row.rp-t2 .recent-play-team{ background: rgba(111,168,220,0.16); color: var(--team2-color-text); }
.recent-play-main{ min-width: 0; }
.recent-play-dd{
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.recent-play-desc{ font-size: 13px; color: var(--text); }
.recent-plays-empty{ color: var(--text-muted); font-size: 13px; }

@media (max-width: 760px){
  .situation-wrap{ flex-direction: column; }
  .situation-recent-plays{ flex-basis: 100%; }
}

.matchup-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.team-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 130px;
}
.team-badge{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}
.team-badge.t1{ background: var(--team1-color); color: var(--team1-on-color); }
.team-badge.t2{ background: var(--team2-color); color: var(--team2-on-color); }
.team-badge-logo{
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--text);
  border-radius: 50%;
  padding: 2px;
  box-sizing: border-box;
}
.team-name{ font-weight: 600; font-size: 15px; text-align: center; }
.team-record{ color: var(--text-muted); font-size: 13px; }

.score-row{
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
}
.score-sep{ color: var(--text-muted); font-size: 24px; }

/* ---------- Score-change flash (live page only) ---------- */
/* Pulses a handful of times over ~10 seconds when live.js detects the
   score changed between polls, then settles back to normal. */
.score{ display: inline-block; }
.score.is-flashing{
  animation: score-flash 10s ease-in-out 1;
}
@keyframes score-flash{
  0%, 100%{ color: var(--text); transform: scale(1); text-shadow: none; }
  5%, 25%, 45%, 65%, 85%{
    color: var(--accent);
    transform: scale(1.15);
    text-shadow: 0 0 10px var(--accent), 0 0 24px rgba(232,163,61,0.6);
  }
  15%, 35%, 55%, 75%, 95%{ color: var(--text); transform: scale(1); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce){
  .score.is-flashing{ animation: none; }
}

table.linescore{
  width: 100%;
  max-width: 340px;
  margin: 0 auto 18px;
  border-collapse: collapse;
  font-size: 13px;
}
table.linescore th, table.linescore td{
  text-align: center;
  padding: 6px 8px;
  color: var(--text-muted);
}
table.linescore th{ font-weight: 500; border-bottom: 1px solid var(--border); }
table.linescore td.ls-team{ text-align: left; font-weight: 600; color: var(--text); }
table.linescore td.ls-final{ font-weight: 700; color: var(--accent); }

/* ---------- Compact card variant — live.html ONLY ---------- */
/* Puts the linescore beside the logos/score instead of stacked below,
   to cut the card's vertical footprint. Scoped to .live-card-compact
   so the downloadable page and tabbed live layout are untouched. */
.boxscore-card.live-card-compact{ padding: 22px 24px 18px; }
.live-card-compact .live-card-main{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.live-card-compact .matchup-row{ margin-bottom: 0; }
.live-card-compact table.linescore{
  width: auto;
  max-width: none;
  margin: 0;
}
.live-card-compact .team-badge-wrap{
  position: relative;
  width: 64px;
  height: 64px;
}
.live-card-compact .possession-icon{
  position: absolute;
  bottom: -6px;
  right: -8px;
  width: 26px;
  height: auto;
  color: var(--accent);
  background: var(--panel);
  border-radius: 999px;
  padding: 2px 3px;
  box-shadow: 0 0 0 2px var(--panel);
}

/* ---------- Prominent quarter/clock box, beside the linescore ---------- */
.game-clock-box{
  text-align: center;
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.game-clock-qtr{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: uppercase;
}
.game-clock-time{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--text);
  margin-top: 2px;
}
.game-clock-caption{
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* ---------- Timeouts remaining, under each team's logo ---------- */
.win-prob-bar-wrap{
  margin: 10px 0 0;
}
.win-prob-label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.win-prob-label > span:first-child{ color: var(--team1-color-text, var(--accent)); }
.win-prob-label > span:last-child{ color: var(--team2-color-text, #6FA8DC); }
.win-prob-tooltip-wrap{
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.win-prob-chart-btn{
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
}
.win-prob-chart-btn:hover, .win-prob-chart-btn:focus{
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.win-prob-chart-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.win-prob-chart-overlay.is-active{ display: flex; }
.win-prob-chart-box{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 700px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
}
.win-prob-chart-close{
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.win-prob-chart-close:hover{ color: var(--text); }
.win-prob-chart-title{
  font-family: var(--font-display);
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--text);
  padding-right: 24px;
}
.win-prob-chart-note{
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.win-prob-chart-empty{
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  padding: 30px 0;
}
.win-prob-tooltip-icon{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1;
  cursor: help;
}
.win-prob-tooltip-text{
  display: none;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  line-height: 1.4;
  z-index: 5;
}
.win-prob-tooltip-icon:hover .win-prob-tooltip-text,
.win-prob-tooltip-icon:focus .win-prob-tooltip-text{ display: block; }
.win-prob-bar{
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--panel-alt);
}
.win-prob-bar-fill{ height: 100%; }
.win-prob-bar-fill.t1{ background: var(--team1-color, var(--accent)); }
.win-prob-bar-fill.t2{ background: var(--team2-color, #6FA8DC); }

.timeout-dots{
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
}
.timeout-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bar-track);
  border: 1px solid var(--border);
}
.timeout-dot.is-filled{
  background: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 640px){
  .live-card-compact .live-card-main{ gap: 20px; }
  .live-card-compact table.linescore{ width: 100%; max-width: 300px; margin: 0 auto; }
  .game-clock-box{ border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 12px; width: 100%; }
}

.game-info-line{
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- SCORING SUMMARY (condensed) ---------- */
.scoring-summary{ margin-bottom: 36px; }
.quarter-group{ margin-bottom: 18px; }
.quarter-label{
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.score-play-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.score-play-row:last-child{ border-bottom: none; }
.play-team-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.play-team-dot.t1{ background: var(--team1-color); }
.play-team-dot.t2{ background: var(--team2-color); }
.play-main{ flex: 1; min-width: 0; }
.play-desc-line{ color: var(--text); }
.play-time{ color: var(--text-muted); font-size: 12.5px; }
.play-drive-line{ color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.play-score{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 1px;
}
.scoring-table-head{
  display: flex;
  justify-content: flex-end;
  gap: 19px;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0 4px;
}
.scoring-table-head .sc-h1{ color: var(--team1-color-text); min-width: 32px; text-align: right; white-space: nowrap; }
.scoring-table-head .sc-h2{ color: var(--team2-color-text); min-width: 32px; text-align: right; white-space: nowrap; }
.play-score-col{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-muted);
  min-width: 32px;
  text-align: right;
  padding-top: 1px;
  flex-shrink: 0;
}
.play-score-col.sc-1{ color: var(--team1-color-text); }
.play-score-col.sc-2{ color: var(--team2-color-text); }

/* ---------- TABS ---------- */
.espn-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}
.espn-tab{
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.espn-tab:hover{ color: var(--text); }
.espn-tab.is-active{ color: var(--accent); border-bottom-color: var(--accent); }

.tab-panel{ display: none; }
.tab-panel.is-active{ display: block; }

/* ---------- COMPARISON BARS (Team Stats tab) ---------- */
.compare-legend{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
.compare-legend .l1{ color: var(--team1-color-text); }
.compare-legend .l2{ color: var(--team2-color-text); }

.compare-row{ margin-bottom: 11px; }
.compare-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 3px;
  flex-basis: 100%;
}
.compare-val{
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 32px;
}
.compare-val.v1{ text-align: left; }
.compare-val.v2{ text-align: right; }
.compare-label{
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Legacy fallback: pages generated before the value-label-value inline
   layout still use older markup (a separate .compare-values row div,
   then a separate .compare-label div below it — no .compare-line
   wrapper interleaving them). Since every box score page shares this
   one CSS file, reflow that old markup into the SAME single-line look
   as new pages, via `display: contents` to unwrap .compare-values so
   its two value <span>s become direct flex items of .compare-row
   itself, then reorder everything with `order`. This makes already-
   published pages visually match live.html without needing to
   regenerate their HTML. Safe to keep indefinitely — harmless for
   pages using the new .compare-line markup, since these selectors
   don't match anything there. */
.compare-row{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.compare-values{ display: contents; }
.compare-values span:first-child{ order: 1; font-size: 14px; font-weight: 600; flex-shrink: 0; min-width: 32px; }
.compare-values span:last-child{ order: 3; font-size: 14px; font-weight: 600; text-align: right; flex-shrink: 0; min-width: 32px; }
div.compare-label{
  order: 2;
  flex: 1;
  text-align: center;
  margin-bottom: 0;
}
.compare-bar{
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bar-track);
  flex-basis: 100%;
  order: 4;
}
.compare-bar .b1{ background: var(--team1-color); }
.compare-bar .b2{ background: var(--team2-color); }

/* detailed full stat table, collapsed by default */
details.full-stats{ margin-top: 36px; }
details.full-stats summary{
  cursor: pointer;
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
table.detail-table{ width: 100%; font-size: 13px; margin-top: 12px; }
table.detail-table td{ padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
table.detail-table tr.stat-bold td{ font-weight: 700; }
table.detail-table tr.stat-sub td:first-child{ padding-left: 22px; color: var(--text-muted); font-weight: 400; }
table.detail-table td:not(:first-child){ text-align: right; width: 90px; }
table.detail-table tr.stat-head td{
  background: var(--panel-alt); color: var(--accent);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
table.detail-table tr.stat-group td{
  padding-top: 16px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

/* ---------- PLAYER STATS (tabbed by team) ---------- */
.player-team-tabs{
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 24px;
}
.player-team-tab, .drive-filter-tab{
  background: none;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 20px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-body);
}
.player-team-tab.is-active, .drive-filter-tab.is-active{ background: var(--accent); color: var(--bg); }

.player-panel{ display: none; }
.player-panel.is-active{ display: block; }

.stat-supergroup{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
  margin: 32px 0 18px;
}
.stat-supergroup:first-of-type{ margin-top: 0; }

.stat-category{ margin-bottom: 28px; }
.stat-category h3{
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
table.player-table{ width: 100%; border-collapse: collapse; font-size: 13px; }
table.player-table th{
  text-align: right;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.player-table th:hover{ color: var(--accent); }
table.player-table th.sorted{ color: var(--accent); }
table.player-table th.sorted::after{ content: attr(data-arrow); margin-left: 4px; }
table.player-table th:first-child, table.player-table th:nth-child(2){ text-align: left; }
table.player-table th:first-child{ width: 34px; }
table.player-table td{
  text-align: right;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}
table.player-table td:first-child{ text-align: left; font-weight: 500; color: var(--text-muted); }
table.player-table td:nth-child(2){ text-align: left; font-weight: 500; }
table.player-table tr.totals-row td{ font-weight: 700; color: var(--accent); border-top: 1px solid var(--border); }

/* Scroll wrapper: keeps thead/tbody in ONE shared table layout (so
   header and body columns always line up) and lets the table scroll
   horizontally as a whole on narrow screens instead of truncating or
   squeezing any single column. */
.table-scroll{ overflow-x: auto; margin-bottom: 4px; }
.table-scroll table.player-table{ width: max-content; min-width: 100%; }

table.tendency-table{ width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 4px; }
table.tendency-table th{
  text-align: right; color: var(--text-muted); font-weight: 500; font-size: 11px;
  text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border);
}
table.tendency-table th:first-child{ text-align: left; }
table.tendency-table td{ text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
table.tendency-table td:first-child{ text-align: left; font-weight: 500; }

/* ---------- PLAY-BY-PLAY: quarter nav + drive cards ---------- */
.pbp-qtr-nav{
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.pbp-qtr-nav a{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.pbp-qtr-nav a:hover{ color: var(--accent); border-color: var(--accent); text-decoration: none; }

.pbp-quarter{ margin-bottom: 8px; scroll-margin-top: 90px; }
.pbp-quarter-label{
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 0 8px;
  border-bottom: 1px solid var(--border);
}

.drive-card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin: 16px 0;
  overflow: hidden;
}
.drive-card-header{
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  color: var(--team2-on-color);
  background: var(--team2-color);
}
.drive-card-header.dc-t1{ background: var(--team1-color); color: var(--team1-on-color); }
.drive-card-header.dc-t2{ background: var(--team2-color); color: var(--team2-on-color); }

table.pbp-table{ width: 100%; font-size: 13px; border-collapse: collapse; }
table.pbp-table td{ padding: 6px 10px; border-bottom: 1px solid var(--border); }
tr.pbp-play td{ background: transparent; }
tr.pbp-drive td{ background: rgba(242,239,233,0.04); color: var(--text-muted); font-style: italic; }
td.pbp-dd{ width: 65px; color: var(--text-muted); white-space: nowrap; }
td.pbp-spot{ width: 90px; color: var(--text-muted); white-space: nowrap; }
td.pbp-team{
  width: 62px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
tr.pbp-t1 td.pbp-team{ color: var(--team1-color-text); }
tr.pbp-t2 td.pbp-team{ color: var(--team2-color-text); }

.drive-card-summary{
  padding: 8px 14px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-style: italic;
  border-top: 1px solid var(--border);
}
.drive-card-score{
  padding: 8px 14px;
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  border-top: 1px solid var(--border);
}

/* ---------- DRIVE CHART ---------- */
table.drive-table{ width: 100%; font-size: 12px; border-collapse: collapse; }
table.drive-table th{
  background: var(--panel-alt);
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
}
table.drive-table td{ padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; color: var(--text); }
table.drive-table{ display: block; overflow-x: auto; }

/* ---------- PARTICIPATION ---------- */
.roster-block{ margin-bottom: 20px; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.roster-block b{ color: var(--text); }

/* ---------- PLAY BREAKDOWN (raw formation/tendency text) ---------- */
.pre-panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px 20px;
  overflow-x: auto;
}
.pre-panel pre{
  margin: 0;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre;
}

/* ---------- LIVETEST: side-by-side stat tables (Live tab) ----------
   Added for the livetest page only — shows both teams' Passing/
   Rushing/Receiving/etc. tables next to each other instead of behind
   a one-team-at-a-time tab toggle, matching how several competitor
   sites lay out their live/"Game" tab. Pure addition at the end of
   the stylesheet; nothing above this point was changed, so the
   production live.html + espn-boxscore.css pairing is untouched. */
.stat-duo{ margin-bottom: 28px; }
.stat-duo h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.stat-duo-grid{
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: a grid item won't shrink below its
     CONTENT's natural width by default, and these columns hold wide
     player tables — without the 0 floor, a wide table forces its
     whole column (and everything containing it, all the way out to
     the page) wider than the viewport instead of letting the table's
     own .table-scroll wrapper handle the overflow internally. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.stat-duo-col{ min-width: 0; }
.stat-duo-team-label{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}
.stat-duo-col:first-child .stat-duo-team-label{ color: var(--team1-color-text); border-bottom-color: var(--team1-color, var(--accent)); }
.stat-duo-col:last-child .stat-duo-team-label{ color: var(--team2-color-text); border-bottom-color: var(--team2-color, var(--accent-dark)); }
.stat-duo-empty{ font-size: 13px; }

/* Tablet range (iPad portrait/landscape and similar) still shows teams
   side-by-side (that only stacks below 760px), so each team's column
   is narrower than on a desktop monitor — shrink just the side-by-side
   tables' font/padding here rather than the tables used elsewhere
   (Drive Chart, the downloadable page's own Player Stats tab, etc.),
   so this doesn't make anything outside the Live tab's side-by-side
   view smaller than it needs to be. */
@media (max-width: 1180px){
  .stat-duo table.player-table{ font-size: 11px; }
  .stat-duo table.player-table th{ font-size: 9.5px; padding: 4px 5px; }
  .stat-duo table.player-table td{ padding: 4px 5px; }
}

@media (max-width: 760px){
  .stat-duo-grid{ grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px){
  .matchup-row{ flex-direction: column; }
  .score-row{ font-size: 32px; }
  .team-block{ width: 100px; }
  .espn-tab{ padding: 10px 12px; font-size: 13px; }
}

/* ---------- Game status moved into the banner's center column ----------
   The "LIVE • <date>" status line used to be its own full-width row above
   the whole matchup-row (with a 20px margin-bottom), adding a full line of
   vertical space before the scores even appeared. Here it instead sits
   directly above the score, inside the same centered column, so it reads
   like a caption on the score rather than a separate banner row. */
.matchup-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.matchup-center .game-card-status{ margin-bottom: 0; }

/* ---------- Field Position tab (field diagram + win probability) ----------
   Previously always visible under the banner alongside the situation text;
   now its own tab, so it just needs the width/centering the old persistent
   .situation-field wrapper gave it instead of inheriting the full page
   width inside .live-main. */
.field-tab-content{
  max-width: 760px;
  margin: 0 auto;
}


/* ---------- Banner as a 2-column grid (livetest) ----------
   Left column stacks score/clock bar over the situation info (left-aligned,
   not centered); Recent Plays spans the full banner height on the right. */
.boxscore-card.live-card-grid{
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  column-gap: 24px;
  align-items: stretch;
}
.live-card-grid .live-card-left{ min-width: 0; }
.live-card-grid .live-card-main{ justify-content: flex-start; gap: 28px; }
.live-card-grid .matchup-row{ justify-content: flex-start; }
.live-card-grid .game-info-line{ text-align: left; }
.live-card-grid .situation-content{ flex: none; }
.live-card-grid .situation-recent-plays{
  margin-top: 0;
  padding: 0 0 0 24px;
  border-top: none;
  border-left: 1px solid var(--border);
  align-self: stretch;
}
.live-card-grid .recent-plays-list{ max-height: none; overflow: visible; }
@media (max-width: 760px){
  .boxscore-card.live-card-grid{ grid-template-columns: 1fr; }
  .live-card-grid .situation-recent-plays{
    padding: 16px 0 0; border-left: none; border-top: 1px solid var(--border); margin-top: 16px;
  }
  .live-card-grid .live-card-main{ justify-content: center; }
  .live-card-grid .matchup-row{ justify-content: center; }
}

/* Left banner column: center each row within the column's width. */
.live-card-grid .live-card-main{ justify-content: center; }
.live-card-grid .matchup-row{ justify-content: center; }
.live-card-grid .game-info-line{ text-align: center; }
.live-card-grid .situation-top{ justify-content: center; }
.live-card-grid .situation-drive{ text-align: center; }

.situation-football{ width: 26px; height: 16px; vertical-align: -2px; margin-right: 2px; }

.live-card-grid .situation-recent-plays .game-alert{ margin: 0 0 14px; }

/* ---------- Player Stats: category headers + Offense/Defense/Special sub-tabs ---------- */
.stat-duo h3{
  font-size: 20px;
  text-align: center;
  color: var(--text);
  margin: 0 0 14px;
}
.stat-subtabs{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 0 0 20px;
}
.stat-subtab{
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  cursor: pointer;
}
.stat-subtab:hover{ color: var(--text); }
.stat-subtab.is-active{ color: var(--accent); border-bottom-color: var(--accent); }
.stat-subpanel{ display: none; }
.stat-subpanel.is-active{ display: block; }

/* Long headers (TFL/Yds, Sack/Yds, FR-Yds...) wrap onto two lines at the
   slash/hyphen so each column is as narrow as its data allows — keeps the
   13-column Defense table side by side without horizontal scrolling. */
.stat-duo table.player-table th{
  white-space: normal;
  line-height: 1.15;
  vertical-align: bottom;
}
/* max-content width (set for the stand-alone tables) blocks header wrapping;
   inside the side-by-side view let the table fill its column instead. */
.stat-duo .table-scroll table.player-table{ width: 100%; min-width: 0; }
.stat-duo table.player-table th, .stat-duo table.player-table td{ padding-left: 5px; padding-right: 5px; }
@media (max-width: 1500px){
  .stat-duo table.player-table{ font-size: 11px; }
  .stat-duo table.player-table th{ font-size: 9.5px; }
  .stat-duo table.player-table th, .stat-duo table.player-table td{ padding-left: 4px; padding-right: 4px; }
}

/* Tighten the gap between the main tab row and the Offense/Defense/Special
   row (pull it up into the main row's 28px bottom margin) and slim the row. */
.live-main .tab-panel > .stat-subtabs{ margin: -20px 0 14px; }
.stat-subtab{ padding: 5px 14px; font-size: 13px; }

/* ---------- Play Breakdown: quarter-by-quarter + side by side ---------- */
.pb-subhead{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 6px;
}
.qtr-summary-table th, .qtr-summary-table td{ text-align: center; padding: 6px 5px; }
.qtr-summary-table th{ white-space: normal; line-height: 1.15; vertical-align: bottom; }
.qtr-summary-table td:first-child{ text-align: left; font-weight: 600; }
.qtr-summary-table tr.totals-row td{ font-weight: 700; color: var(--accent); border-top: 1px solid var(--border); }
.stat-duo .pb-subhead{ font-size: 12px; text-align: left; color: var(--text-muted); margin: 18px 0 6px; }
table.tendency-table.qtr-summary-table th, table.tendency-table.qtr-summary-table td{ text-align: center; padding: 6px 5px; }
table.tendency-table.qtr-summary-table th:first-child, table.tendency-table.qtr-summary-table td:first-child{ text-align: left; }

/* Lock the two logos to the same height no matter how many lines a team
   name wraps to: top-align the team blocks instead of centering them, and
   center the status/score column against the logo row. */
.live-card-grid .matchup-row{ align-items: flex-start; }
.live-card-grid .matchup-center{ align-self: flex-start; min-height: 64px; justify-content: center; }
@media (max-width: 640px){
  .live-card-grid .matchup-row{ align-items: center; }
  .live-card-grid .matchup-center{ align-self: center; min-height: 0; }
}

/* ---------- Condensed Team Stats sidebar ----------
   Tighter rows so the whole board fits in one screen height; if a very
   short window still can't fit it, the sidebar scrolls inside itself
   (it's sticky) instead of running off the bottom of the screen. */
.live-split .live-sidebar{
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.live-sidebar .section-heading{ font-size: 20px; margin: 0 0 8px; }
.live-sidebar .compare-legend{ margin-bottom: 8px; font-size: 12px; }
.live-sidebar .compare-row{ margin-bottom: 6px; gap: 6px; }
.live-sidebar .compare-line{ margin-bottom: 1px; }
.live-sidebar .compare-val, .live-sidebar .compare-values span:first-child, .live-sidebar .compare-values span:last-child{ font-size: 13px; }
.live-sidebar .compare-label{ font-size: 11px; }
.live-sidebar .compare-bar{ height: 5px; }
.live-sidebar details.full-stats{ margin-top: 8px; }
@media (max-width: 900px){
  .live-split .live-sidebar{ max-height: none; overflow: visible; }
}

/* ---------- Scoreboard rows (stacked teams, score right-aligned) ---------- */
.scoreboard{ display:flex; flex-direction:column; gap:10px; min-width:260px; flex:0 1 340px; }
.scoreboard .game-card-status{ text-align:left; margin:0 0 2px; }
.scoreboard .sb-row + .sb-row{ border-top:1px solid var(--border); padding-top:10px; }
.scoreboard .sb-row{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; column-gap:12px; }
.scoreboard .team-badge-wrap{ width:52px; height:52px; position:relative; }
.scoreboard .team-badge-logo, .scoreboard .team-badge{ width:52px; height:52px; }
.scoreboard .possession-icon{ width:22px; bottom:-5px; right:-7px; }
.scoreboard .sb-info{ min-width:0; text-align:left; }
.scoreboard .team-name{ text-align:left; line-height:1.15; }
.scoreboard .sb-sub{ display:flex; align-items:center; gap:10px; margin-top:3px; }
.scoreboard .timeout-dots{ margin-top:0; }
.scoreboard .score-row{ display:block; font-size:44px; line-height:1; min-width:2ch; text-align:right; }
.live-card-grid .scoreboard{ align-self:center; }
@media (max-width:640px){ .scoreboard{ flex-basis:100%; } }

/* ---------- Tighter banner (vertical condensing) ---------- */
.boxscore-card.live-card-compact{ padding: 14px 24px 12px; }
.live-card-grid .live-card-main{ margin-bottom: 8px; }
.scoreboard{ gap: 6px; }
.scoreboard .game-card-status{ margin: 0; }
.scoreboard .sb-row + .sb-row{ padding-top: 6px; }
.scoreboard .sb-row{ grid-template-columns: 46px minmax(0,1fr) auto; }
.scoreboard .team-badge-wrap, .scoreboard .team-badge-logo, .scoreboard .team-badge{ width: 46px; height: 46px; }
.scoreboard .score-row{ font-size: 40px; }
.live-card-grid .situation-top{ margin-top: 8px; padding-top: 8px; }
.live-card-grid .game-info-line{ font-size: 12px; }

/* ---------- Light theme overrides (html[data-theme="light"]) ---------- */
html[data-theme="light"] .team-badge-logo{ background: #fff; border: 1px solid var(--border); }
html[data-theme="light"] .live-dot.live-dot-kickoff{ background: #B8860B; }
html[data-theme="light"] .kickoff-text{ color: #8A6508; }
html[data-theme="light"] tr.pbp-drive td{ background: rgba(18,24,27,0.05); }
html[data-theme="light"] .recent-play-row.rp-t1 .recent-play-team{ background: color-mix(in srgb, var(--team1-color) 18%, transparent); }
html[data-theme="light"] .recent-play-row.rp-t2 .recent-play-team{ background: color-mix(in srgb, var(--team2-color) 18%, transparent); }
html[data-theme="light"] .situation-qtr{ background: rgba(179,107,0,0.12); }
html[data-theme="light"] .game-alert-penalty{ color: #12181B; }

/* ---------- Less dead space between banner, tabs and tables ---------- */
.boxscore-card.live-card-grid{ margin-bottom: 10px; }
.live-split .espn-tab{ padding-top: 9px; padding-bottom: 9px; }
.live-main .espn-tabs{ margin-bottom: 14px; }
.live-main .tab-panel > .stat-subtabs{ margin: -6px 0 8px; }
.live-main .stat-duo h3{ margin: 0 0 8px; }
.live-main .stat-duo-grid{ margin-top: 0; }

/* Final: the pulsing red dot becomes a still, muted one. */
.live-dot.live-dot-final{ animation: none; background: var(--text-muted); }
.final-text{ color: var(--text-muted); font-weight: 700; }
.game-card-status:has(.live-dot-final){ color: var(--text-muted); }

/* Recent Plays: tighter line spacing on plays that wrap to two lines. */
.recent-play-desc{ line-height: 1.25; }
.recent-play-dd{ line-height: 1.2; }

/* ---------- Win Probability tab ---------- */
.wp-tab-chart{ max-width: 900px; margin: 0 auto; }
.wp-tab-chart svg{ display: block; width: 100%; height: auto; }
.wp-tab-note, .wp-tab-empty{ color: var(--text-muted); font-size: 12px; text-align: center; margin: 10px 0 0; }
html[data-theme="light"] .wp-tab-chart svg polyline{ stroke: var(--text); }
html[data-theme="light"] .wp-tab-chart svg line{ stroke: rgba(18,24,27,0.35); }
html[data-theme="light"] .wp-tab-chart svg text[fill="#93A2AA"]{ fill: var(--text-muted); }
html[data-theme="light"] .wp-tab-chart svg text[font-weight="700"]{ fill-opacity: 0.85; }

/* Current win probability, large, above the chart */
.wp-tab-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 4px 0 8px; }
.wp-tab-side.t2{ text-align: right; }
.wp-tab-team{ font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; }
.wp-tab-side.t1 .wp-tab-team, .wp-tab-side.t1 .wp-tab-pct{ color: var(--team1-color-text); }
.wp-tab-side.t2 .wp-tab-team, .wp-tab-side.t2 .wp-tab-pct{ color: var(--team2-color-text); }
.wp-tab-pct{ font-family: 'Chakra Petch', var(--font-display); font-weight: 700; font-size: 56px; line-height: 1; }
.wp-tab-bar{ margin-bottom: 18px; }
@media (max-width: 640px){ .wp-tab-pct{ font-size: 40px; } .wp-tab-team{ font-size: 15px; } }

/* ---------- Scoring Summary: tighter vertical spacing ---------- */
.scoring-summary{ margin-bottom: 20px; }
.quarter-group{ margin-bottom: 8px; }
.quarter-label{ padding: 3px 0; margin-bottom: 2px; }
.score-play-row{ padding: 5px 0; gap: 8px; }
.play-drive-line{ margin-top: 0; line-height: 1.25; }
.play-desc-line{ line-height: 1.3; }
.play-team-dot{ margin-top: 6px; }
.scoring-table-head{ padding-bottom: 2px; }