/* Free stats trackers, v3 theme.
   One stylesheet for the whole family: the hub (/stats-trackers) and every
   sport tracker, stats page and "today" page under it.

   The templates used to carry their own inline <style> block each, which is
   why the section drifted away from the rest of the site. The class names were
   already shared across sports, so one sheet replaces all of them. Sports
   differ only in a table class name (.td-table, .fb-table, .hr-table,
   .goal-table), so those selectors are grouped rather than duplicated.

   Tokens follow static/css/atd-history.css: read the v2/v3 variables from
   base.html, fall back to literals so the page still looks right when the v3
   flag is off. Prefix-free by necessity, so everything is scoped under .trk.

   Docs: docs/routes-and-pages.md, docs/historical-props.md */

.trk {
  --trk-accent: var(--accent, #00E676);
  --trk-accent-dim: var(--accent-dim, rgba(0, 230, 118, .15));
  --trk-bg: var(--bg-primary, #0A0A0F);
  --trk-elev: var(--bg-elevated, #12121A);
  --trk-hover: var(--bg-hover, #1A1A26);
  --trk-border: var(--border, #2A2A3A);
  --trk-text: var(--text-primary, #E8E6E3);
  --trk-dim: var(--text-secondary, #9C9CAD);
  --trk-mono: var(--font-mono, 'JetBrains Mono', monospace);
  --trk-display: var(--font-display, 'Outfit', sans-serif);
  --trk-gold: #FFC947;
  --trk-live: #FF5252;

  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 36px) clamp(12px, 4vw, 28px) 64px;
  color: var(--trk-text);
}

.trk a { color: var(--trk-accent); }

/* Section headings. The old templates centred these and coloured them green,
   which fought the left-aligned page. Component rules below override where a
   heading needs something different. */
.trk h2 { font-family: var(--trk-display); font-size: 20px; font-weight: 700; color: var(--trk-text); text-align: left; margin: 30px 0 12px; }
.trk h3 { font-family: var(--trk-display); font-weight: 600; color: var(--trk-text); }

/* ---- Page header ---- */
/* Flat panel, no gradient and no text glow: the old header fought every other
   page on the site for attention. */
.trk .page-header { text-align: left; margin: 0 0 24px; padding: 0; background: none; border: 0; }
.trk .page-header h1 { font-family: var(--trk-display); font-weight: 700; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.12; color: var(--trk-text); text-shadow: none; margin: 0; }
.trk .page-header .subtitle { font-family: var(--trk-mono); font-size: 13px; color: var(--trk-accent); margin: 8px 0 0; }
.trk .page-header .intro,
.trk .page-header > p { color: var(--trk-dim); font-size: 15px; line-height: 1.55; margin: 10px 0 0 !important; max-width: 78ch; }

/* ---- Sport cards (hub) ---- */
/* Two columns, never four: each card carries a paragraph and up to eight
   chips, and a four-across row squeezes both into ribbons. */
.trk .sport-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 40px; max-width: 1120px; }
@media (max-width: 880px) { .trk .sport-cards-grid { grid-template-columns: 1fr; } }
.trk .sport-card { background: var(--trk-elev); border: 1px solid var(--trk-border); border-left: 3px solid var(--trk-border); border-radius: 12px; padding: 20px 22px; transition: border-color .15s ease; }
.trk .sport-card:hover { transform: none; box-shadow: none; border-color: var(--trk-accent); }
.trk .sport-card.nba { border-left-color: #FFA726; }
.trk .sport-card.nfl { border-left-color: #EF5350; }
.trk .sport-card.mlb { border-left-color: #00E676; }
.trk .sport-card.nhl { border-left-color: #42A5F5; }
.trk .sport-card-header { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.trk .sport-card-header i { font-size: 18px; }
.trk .sport-card.nba .sport-card-header i { color: #FFA726; }
.trk .sport-card.nfl .sport-card-header i { color: #EF5350; }
.trk .sport-card.mlb .sport-card-header i { color: #00E676; }
.trk .sport-card.nhl .sport-card-header i { color: #42A5F5; }
.trk .sport-card-header h2 { font-family: var(--trk-display); font-size: 19px; font-weight: 700; color: var(--trk-text); margin: 0; }
.trk .sport-card p { color: var(--trk-dim); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.trk .sport-card-links { display: flex; flex-wrap: wrap; gap: 8px; }
/* Outlined chips, not solid blocks: eight solid buttons per card read as noise. */
.trk .sport-card-links a { display: inline-block; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--trk-border); background: var(--trk-bg); color: var(--trk-dim); font-family: var(--trk-mono); font-size: 12.5px; font-weight: 500; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.trk .sport-card-links a:hover { opacity: 1; transform: none; }
.trk .sport-card.nba .sport-card-links a:hover { color: #FFA726; border-color: #FFA726; }
.trk .sport-card.nfl .sport-card-links a:hover { color: #EF5350; border-color: #EF5350; }
.trk .sport-card.mlb .sport-card-links a:hover { color: #00E676; border-color: #00E676; }
.trk .sport-card.nhl .sport-card-links a:hover { color: #42A5F5; border-color: #42A5F5; }

/* ---- Tracker nav buttons ---- */
.trk .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.trk .nav-link-tracker { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; background: var(--trk-elev); border: 1px solid var(--trk-border); border-radius: 8px; color: var(--trk-dim); font-family: var(--trk-mono); font-size: 13px; text-decoration: none; line-height: 1.4; transition: color .15s ease, border-color .15s ease; }
.trk .nav-link-tracker:hover { background: var(--trk-elev); color: var(--trk-accent); border-color: var(--trk-accent); transform: none; box-shadow: none; }

/* ---- Conversion CTA ---- */
.trk .conversion-cta { margin: 12px 0 0; text-align: left; font-size: 13px; line-height: 1.6; color: var(--trk-dim); }
.trk .conversion-cta a { color: var(--trk-dim); text-decoration: none; border-bottom: 1px solid var(--trk-border); }
.trk .conversion-cta a:hover { color: var(--trk-accent); border-bottom-color: var(--trk-accent); }

/* ---- Week / date selector + filters ---- */
.trk .week-selector,
.trk .date-selector,
.trk .filter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 16px; padding: 0; background: none; border: 0; border-radius: 0; }
.trk .week-selector label,
.trk .date-selector label,
.trk .filter-group label { font-family: var(--trk-display); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--trk-dim); }
.trk .filter-group { display: flex; align-items: center; gap: 8px; }
.trk select,
.trk input[type="date"],
.trk input[type="search"],
.trk input[type="text"] { background: var(--trk-elev); color: var(--trk-text); border: 1px solid var(--trk-border); border-radius: 8px; padding: 9px 13px; font-family: var(--trk-mono); font-size: 14px; cursor: pointer; transition: border-color .15s ease; min-height: 40px; }
.trk select:hover,
.trk input:hover { background: var(--trk-elev); border-color: var(--trk-accent); }
.trk select:focus,
.trk input:focus { outline: none; border-color: var(--trk-accent); box-shadow: 0 0 0 2px var(--trk-accent-dim); }

/* ---- Tables ---- */
/* One rule set, four sport table names. */
.trk .td-table-container,
.trk .fb-table-container,
.trk .hr-table-container,
.trk .goal-table-container,
.trk .stats-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--trk-bg); border: 1px solid var(--trk-border); border-radius: 12px; padding: 0; max-width: 100%; box-sizing: border-box; }
.trk .td-table, .trk .fb-table, .trk .hr-table, .trk .goal-table, .trk .stats-table { width: 100% !important; max-width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; table-layout: auto; }
.trk thead tr { background: var(--trk-elev); }
/* The !important flags answer v2-backend-overrides.css, which paints every
   th and td accent-green with !important for the odds screener. Without them
   a leaderboard renders as a wall of green numbers. */
.trk th { padding: 12px 14px; text-align: left; font-family: var(--trk-display); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--trk-dim) !important; background-color: transparent; border-color: var(--trk-border) !important; border-bottom: 1px solid var(--trk-border); white-space: nowrap; }
.trk tbody tr { border-bottom: 1px solid var(--trk-border); transition: background-color .12s ease; }
.trk tbody tr:last-child { border-bottom: none; }
.trk tbody tr:hover { background: var(--trk-hover); }
.trk td { padding: 11px 14px; color: var(--trk-text) !important; background-color: transparent; border-color: var(--trk-border) !important; vertical-align: top; }
/* Cells that keep a colour of their own. */
.trk td.team-abbr, .trk td.team-name, .trk .team-name { color: var(--trk-accent) !important; }
.trk td.rank { color: var(--trk-dim) !important; font-family: var(--trk-mono); }
.trk td.count, .trk td.rank, .trk .stats-table td { font-variant-numeric: tabular-nums; }
.trk .first-td, .trk .first-hr, .trk .first-goal, .trk .first-overall,
.trk td.first-td, .trk td.first-hr, .trk td.first-goal { color: var(--trk-gold) !important; }
/* A row group is one game. A left accent bar reads cleaner than a tinted row. */
.trk .game-group { background: none; }
.trk .game-group-start td:first-child { box-shadow: inset 3px 0 0 var(--trk-accent); }
.trk .game-group-start td { border-top: 1px solid var(--trk-border); }
.trk .team-name { font-weight: 600; color: var(--trk-accent); }
.trk .matchup { font-weight: 600; color: var(--trk-text); }
.trk .game-date { color: var(--trk-dim); font-family: var(--trk-mono); font-size: 12.5px; white-space: nowrap; }
.trk .td-list, .trk .hr-list, .trk .goal-list { line-height: 1.7; margin: 0; padding: 0; }
.trk .first-td, .trk .first-hr, .trk .first-goal, .trk .first-overall { color: var(--trk-gold); font-weight: 600; }
.trk .player-name { color: var(--trk-text); }
.trk .no-data, .trk .no-results { text-align: center; padding: 40px; color: var(--trk-dim); font-size: 15px; }
.trk .scroll-hint { color: var(--trk-dim); font-size: 12.5px; margin: 8px 0 0; }

/* ---- Live badge ---- */
.trk .live-badge { display: inline-block; background: var(--trk-live); color: #fff; padding: 2px 8px; border-radius: 999px; font-family: var(--trk-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; margin-left: 8px; vertical-align: middle; animation: trk-pulse 1.6s ease-in-out infinite; }
@keyframes trk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ---- Mobile game cards ---- */
.trk .mobile-cards-container { display: none; }
.trk .game-card { background: var(--trk-elev); border: 1px solid var(--trk-border); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.trk .game-card-header { background: var(--trk-bg); padding: 13px 15px; border-bottom: 1px solid var(--trk-border); text-align: left; }
.trk .game-card-matchup { font-family: var(--trk-display); font-size: 15px; font-weight: 600; color: var(--trk-text); margin-bottom: 3px; }
.trk .game-card-date { font-family: var(--trk-mono); font-size: 12px; color: var(--trk-dim); }
.trk .team-card-section { padding: 14px 15px; border-bottom: 1px solid var(--trk-border); }
.trk .team-card-section:last-child { border-bottom: none; }
.trk .team-card-name { font-family: var(--trk-display); font-size: 14px; font-weight: 600; color: var(--trk-accent); margin-bottom: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--trk-border); }
.trk .card-data-row { margin-bottom: 11px; }
.trk .card-data-row:last-child { margin-bottom: 0; }
.trk .card-label { font-family: var(--trk-display); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--trk-dim); margin-bottom: 4px; }
.trk .card-value { font-size: 14px; color: var(--trk-text); line-height: 1.6; }
.trk .card-value.first-td, .trk .card-value.first-hr, .trk .card-value.first-goal { color: var(--trk-gold); font-weight: 600; }
.trk .card-td-list, .trk .card-hr-list, .trk .card-goal-list { list-style: none; padding: 0; margin: 0; }
.trk .card-td-list li, .trk .card-hr-list li, .trk .card-goal-list li { padding: 3px 0 3px 15px; position: relative; }
.trk .card-td-list li:before, .trk .card-hr-list li:before, .trk .card-goal-list li:before { content: "\2022"; position: absolute; left: 0; color: var(--trk-accent); }

/* ---- Prediction / stats blocks ---- */
.trk .stats-section, .trk .prediction-section, .trk .h2h-section, .trk .team-section, .trk .info-section, .trk .info-box, .trk .overall-card-section { background: var(--trk-elev); border: 1px solid var(--trk-border); border-radius: 12px; padding: 20px 22px; margin: 0 0 20px; }
.trk .info-box { border-left: 3px solid var(--trk-accent); color: var(--trk-dim); font-size: 13.5px; line-height: 1.6; }
.trk .section-header, .trk .section-title, .trk .h2h-title { font-family: var(--trk-display); font-size: 18px; font-weight: 700; color: var(--trk-text); margin: 0 0 6px; }
.trk .section-description { color: var(--trk-dim); font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.trk .games-grid, .trk .team-form-grid, .trk .teams-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.trk .team-form-card { background: var(--trk-bg); border: 1px solid var(--trk-border); border-radius: 10px; padding: 15px 16px; }
.trk .team-form-header, .trk .team-header, .trk .game-header { font-family: var(--trk-display); font-size: 15px; font-weight: 600; color: var(--trk-text); margin-bottom: 10px; }
.trk .team-form-stats, .trk .team-stats, .trk .player-stat { font-family: var(--trk-mono); font-size: 13px; color: var(--trk-dim); font-variant-numeric: tabular-nums; }
.trk .form-badge, .trk .form-stat { display: inline-block; font-family: var(--trk-mono); font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--trk-accent-dim); color: var(--trk-accent); border: 1px solid var(--trk-border); }
.trk .player-list { list-style: none; margin: 0; padding: 0; }
.trk .player-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--trk-border); }
.trk .player-item:last-child { border-bottom: none; }
.trk .game-time, .trk .h2h-date, .trk .clock-time { font-family: var(--trk-mono); font-size: 12.5px; color: var(--trk-dim); }

/* ---- Educational prose ---- */
.trk .edu-section { background: none; border: 0; border-top: 1px solid var(--trk-border); border-radius: 0; padding: 28px 0 0; margin: 40px 0; max-width: 84ch; }
.trk .edu-section h2 { font-family: var(--trk-display); font-size: 22px; font-weight: 700; color: var(--trk-text); margin: 0 0 14px; }
.trk .edu-section h3 { font-family: var(--trk-display); font-size: 16px; font-weight: 600; color: var(--trk-accent); margin: 22px 0 8px; }
.trk .edu-section p { color: var(--trk-dim); font-size: 15px; line-height: 1.7; margin: 0 0 14px; }

/* ---- Sportsbook logo strip ---- */
.trk .books-section { text-align: center; margin: 0 0 40px; }
.trk .books-section h2 { font-family: var(--trk-display); font-size: 16px; font-weight: 600; color: var(--trk-dim); margin: 0 0 16px; }
.trk .book-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.trk .book-logo-inline { height: 28px; width: auto; border-radius: 6px; opacity: .75; transition: opacity .15s ease; }
.trk .book-logo-inline:hover { opacity: 1; transform: none; }

/* ---- FAQ ---- */
/* Two markup shapes exist: the hub uses <button class="faq-question"> with
   .faq-answer.active, the trackers use a div with <h3> and .faq-item.active.
   Both are styled here so neither template has to change. */
.trk .faq-section { background: none; border: 0; border-top: 1px solid var(--trk-border); border-radius: 0; padding: 28px 0 0; margin: 40px 0 0; max-width: 84ch; }
.trk .faq-section h2 { font-family: var(--trk-display); font-size: 22px; font-weight: 700; color: var(--trk-text); text-align: left; margin: 0 0 14px; }
.trk .faq-item { background: none; border: 0; border-bottom: 1px solid var(--trk-border); border-radius: 0; margin: 0; overflow: hidden; }
.trk .faq-item:hover { border-color: var(--trk-border); border-bottom-color: var(--trk-border); }
.trk .faq-item:last-child { border-bottom: 0; }
.trk .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--trk-display); font-size: 15px; font-weight: 600; color: var(--trk-text); transition: color .15s ease; }
.trk .faq-question:hover { background: none; color: var(--trk-accent); }
.trk .faq-question h3 { font-family: var(--trk-display); font-size: 15px; font-weight: 600; color: var(--trk-text); margin: 0; padding-right: 14px; flex: 1; }
.trk .faq-question:hover h3 { color: var(--trk-accent); }
.trk .faq-question i, .trk .faq-icon { color: var(--trk-dim); font-size: 12px; flex-shrink: 0; transition: transform .25s ease; }
.trk .faq-question.active i, .trk .faq-item.active .faq-icon { transform: rotate(180deg); color: var(--trk-accent); }
.trk .faq-answer { max-height: 0; overflow: hidden; padding: 0; background: none; color: var(--trk-dim); font-size: 14.5px; line-height: 1.7; transition: max-height .25s ease, padding .25s ease; }
.trk .faq-answer p { margin: 0; color: var(--trk-dim); font-size: 14.5px; line-height: 1.7; }
.trk .faq-answer.active { max-height: 600px; padding: 0 0 18px; }
.trk .faq-item.active .faq-answer { max-height: 600px; padding: 0 0 18px; }

/* ---- Loading ---- */
.trk .loading { text-align: center; padding: 40px; color: var(--trk-accent); }
.trk .loading i { font-size: 34px; animation: trk-spin 1s linear infinite; }
@keyframes trk-spin { to { transform: rotate(360deg); } }

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .trk { padding-left: 12px; padding-right: 12px; }
  .trk .td-table-container,
  .trk .fb-table-container,
  .trk .hr-table-container,
  .trk .goal-table-container { display: none !important; }
  .trk .mobile-cards-container { display: block !important; }
  .trk .week-selector,
  .trk .date-selector,
  .trk .filter-controls { flex-direction: column; align-items: stretch; }
  .trk select, .trk input { width: 100%; min-height: 44px; font-size: 16px; }
  .trk .nav-link-tracker { width: 100%; box-sizing: border-box; }
  .trk .stats-table-container { -webkit-overflow-scrolling: touch; }
  .trk .stats-table { font-size: 13px; }
  .trk .stats-table th, .trk .stats-table td { padding: 9px 10px; }
}

/* ---- "Today" prediction pages + stats pages ---- */
/* These carry a bigger vocabulary than the trackers: prediction cards, ranked
   bars, head-to-head history and result panels. Colour still carries meaning
   (gold = the thing that happened first, red/amber/green = confidence), but
   the panels, borders and type come from the shared tokens. */
.trk .update-badge { display: inline-block; margin-top: 12px; padding: 5px 12px; border: 1px solid var(--trk-border); border-radius: 999px; background: var(--trk-elev); color: var(--trk-dim); font-family: var(--trk-mono); font-size: 12px; }
.trk .update-badge i { margin-right: 6px; }
.trk .nav-links { margin-top: 14px; }
.trk .nav-link { display: inline-flex; align-items: center; padding: 8px 14px; background: var(--trk-elev); border: 1px solid var(--trk-border); border-radius: 8px; color: var(--trk-dim); font-family: var(--trk-mono); font-size: 13px; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.trk .nav-link:hover { background: var(--trk-elev); color: var(--trk-accent); border-color: var(--trk-accent); transform: none; box-shadow: none; }
.trk .nav-link i { margin-right: 6px; }

.trk .matchup-title { font-family: var(--trk-display); font-size: 17px; font-weight: 700; color: var(--trk-text); margin: 0 0 6px; }
.trk .completed-badge { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--trk-accent-dim); border: 1px solid var(--trk-border); color: var(--trk-accent); font-family: var(--trk-mono); font-size: 10.5px; font-weight: 600; }

.trk .predictions-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.trk .team-prediction { padding: 18px 20px; border-right: 1px solid var(--trk-border); }
.trk .team-prediction:last-child { border-right: none; }
.trk .confidence-badge { padding: 2px 9px; border-radius: 999px; font-family: var(--trk-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.trk .confidence-high { background: rgba(0, 230, 118, .18); color: #4DE6A0; }
.trk .confidence-medium { background: rgba(255, 167, 38, .18); color: #FFB74D; }
.trk .confidence-low { background: rgba(239, 83, 80, .18); color: #EF9A9A; }

.trk .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; }
.trk .stat-box { background: var(--trk-bg); border: 1px solid var(--trk-border); border-radius: 10px; padding: 12px 10px; text-align: center; }
.trk .stat-label, .trk .label { font-family: var(--trk-display); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--trk-dim); margin-bottom: 5px; }
.trk .stat-value, .trk .value { font-family: var(--trk-mono); font-size: 20px; font-weight: 600; color: var(--trk-text); font-variant-numeric: tabular-nums; }

/* Ranked lists with a share bar. Scorers and hitters are the same component. */
.trk .top-scorers, .trk .top-hitters { margin-bottom: 18px; }
.trk .scorer-item, .trk .hitter-item { background: var(--trk-bg); border: 1px solid var(--trk-border); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; }
.trk .scorer-info, .trk .hitter-info { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 7px; }
.trk .scorer-name, .trk .hitter-name { font-size: 14.5px; font-weight: 600; color: var(--trk-text); }
.trk .scorer-count, .trk .hitter-count, .trk .scorer-likelihood { font-family: var(--trk-mono); font-size: 12.5px; font-weight: 600; color: var(--trk-gold); }
.trk .scorer-bar-track, .trk .hitter-bar-track, .trk .shot-bar-track { background: var(--trk-elev); border-radius: 999px; overflow: hidden; }
.trk .scorer-bar-track, .trk .hitter-bar-track { width: 100%; height: 6px; }
.trk .scorer-bar-fill, .trk .hitter-bar-fill { height: 100%; background: var(--trk-accent); border-radius: 999px; transition: width .3s ease; }
.trk .shot-bar-track { flex: 1; height: 16px; }
.trk .shot-bar-fill { height: 100%; background: var(--trk-accent); border-radius: 999px; transition: width .3s ease; }
.trk .shot-type-prediction { margin-top: 14px; padding: 14px; background: var(--trk-bg); border: 1px solid var(--trk-border); border-radius: 10px; }
.trk .shot-type-bars { display: flex; flex-direction: column; gap: 8px; }
.trk .shot-bar { display: flex; align-items: center; gap: 10px; }
.trk .shot-bar-label { width: 80px; font-size: 12.5px; color: var(--trk-dim); }
.trk .shot-bar-pct { min-width: 40px; text-align: right; font-family: var(--trk-mono); font-size: 12.5px; font-weight: 600; color: var(--trk-text); }

.trk .shot-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.trk .shot-badge { padding: 2px 7px; border-radius: 5px; font-family: var(--trk-mono); font-size: 11px; font-weight: 500; }
.trk .badge-3pt, .trk .shot-badge.three { background: rgba(171, 71, 188, .2); color: #CE93D8; }
.trk .badge-rim, .trk .shot-badge.rim { background: rgba(255, 167, 38, .2); color: #FFB74D; }
.trk .badge-ft, .trk .shot-badge.ft { background: rgba(66, 165, 245, .2); color: #64B5F6; }
.trk .shot-badge.mid { background: rgba(0, 230, 118, .2); color: #4DE6A0; }
.trk .form-badge.hot { background: rgba(0, 230, 118, .2); color: #4DE6A0; }
.trk .form-badge.cold { background: rgba(239, 83, 80, .2); color: #EF9A9A; }
.trk .form-badge.avg { background: rgba(158, 158, 158, .2); color: #BDBDBD; }
.trk .shot-type, .trk .shot-type-breakdown { color: var(--trk-dim); font-size: 12.5px; }
.trk .stats-table .shot-type-breakdown { display: flex; gap: 8px; }
.trk .stats-table .pct { color: var(--trk-accent) !important; font-weight: 600; }
.trk .stats-table th.sortable { cursor: pointer; }
.trk .stats-table th.sortable::after { content: ' \2195'; opacity: .35; }
.trk .stats-table th.sort-desc::after { content: ' \2193'; opacity: 1; }
.trk .section-header .game-count { color: var(--trk-dim); font-family: var(--trk-mono); font-size: 13px; font-weight: 400; }

/* Head to head history */
.trk .h2h-history { display: flex; flex-direction: column; gap: 8px; }
.trk .h2h-item { background: var(--trk-bg); border: 1px solid var(--trk-border); border-radius: 10px; padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.trk .h2h-result { flex: 1; }
.trk .h2h-scorer { font-weight: 600; color: var(--trk-text); }
.trk .h2h-team, .trk .h2h-team-name { color: var(--trk-accent); font-weight: 600; }
.trk .h2h-shot { font-size: 12.5px; color: var(--trk-dim); }
.trk .h2h-tip, .trk .h2h-period, .trk .h2h-inning { min-width: 100px; text-align: right; font-family: var(--trk-mono); font-size: 12.5px; color: var(--trk-gold); }
.trk .h2h-tip { color: var(--trk-dim); }
.trk .h2h-game { background: var(--trk-bg); border: 1px solid var(--trk-border); border-left: 3px solid var(--trk-gold); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.trk .h2h-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trk .h2h-scorers { color: var(--trk-dim); font-size: 13px; }

/* Settled result panel */
.trk .actual-result { padding: 18px 20px; background: var(--trk-bg); border-top: 1px solid var(--trk-accent); }
.trk .result-title { font-family: var(--trk-display); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--trk-accent); margin-bottom: 12px; }
.trk .result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.trk .result-item { background: var(--trk-elev); border: 1px solid var(--trk-border); border-radius: 10px; padding: 12px; }
.trk .result-label { font-family: var(--trk-display); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--trk-dim); margin-bottom: 5px; }
.trk .result-value { font-size: 14.5px; font-weight: 600; color: var(--trk-text); }
.trk .result-value.highlight { color: var(--trk-gold); }
.trk .all-hrs-list, .trk .all-goals-list { margin-top: 9px; }
.trk .hr-tag, .trk .goal-tag { display: inline-block; margin: 3px 4px 3px 0; padding: 3px 10px; border-radius: 999px; background: var(--trk-accent-dim); border: 1px solid var(--trk-border); color: var(--trk-accent); font-family: var(--trk-mono); font-size: 12px; font-weight: 500; }

.trk .first-goal-period, .trk .first-hr-inning { margin-top: 14px; padding: 12px; background: var(--trk-bg); border: 1px solid var(--trk-border); border-radius: 10px; text-align: center; }
.trk .first-goal-period .value, .trk .first-hr-inning .value { color: var(--trk-accent); font-size: 17px; }
.trk .form-stat .value { color: var(--trk-gold); font-size: 15px; }
.trk .team-top-scorers, .trk .team-top-hitters { color: var(--trk-dim); font-size: 13px; }
.trk .team-top-scorers .scorer, .trk .team-top-hitters .hitter { display: inline-block; margin-right: 10px; }
.trk .team-top-scorers .scorer-count, .trk .team-top-hitters .hitter-count { color: var(--trk-accent); }

.trk .no-games { text-align: center; padding: 48px 20px; background: var(--trk-elev); border: 1px solid var(--trk-border); border-radius: 12px; }
.trk .no-games i { font-size: 34px; color: var(--trk-dim); margin-bottom: 16px; }
.trk .no-games h2 { text-align: center; color: var(--trk-text); margin: 0 0 10px; }
.trk .no-games p { color: var(--trk-dim); font-size: 15px; }

@media (max-width: 768px) {
  .trk .predictions-container { grid-template-columns: 1fr; }
  .trk .team-prediction { border-right: none; border-bottom: 1px solid var(--trk-border); }
  .trk .team-prediction:last-child { border-bottom: none; }
  .trk .result-grid, .trk .h2h-teams { grid-template-columns: 1fr; }
  .trk .h2h-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .trk .h2h-tip, .trk .h2h-period, .trk .h2h-inning { min-width: auto; text-align: left; }
}