/* ============================================================
   SCORETIME — Nord Theme
   ============================================================ */

:root {
  /* Nord — Polar Night */
  --bg:           #2e3440;
  --bg-darker:    #242933;
  --bg-lighter:   #3b4252;
  --selection:    #434c5e;
  --border:       #434c5e;

  /* Nord — Snow Storm */
  --fg:           #eceff4;
  --fg-dim:       #d8dee9;
  --comment:      #4c566a;

  /* Nord — Frost */
  --frost-1:      #8fbcbb;
  --frost-2:      #88c0d0;
  --frost-3:      #81a1c1;
  --frost-4:      #5e81ac;

  /* Nord — Aurora */
  --red:          #bf616a;
  --orange:       #d08770;
  --yellow:       #ebcb8b;
  --green:        #a3be8c;
  --purple:       #b48ead;

  /* Aliases for readability */
  --accent:       var(--frost-2);   /* primary accent — used for logo, active tab */
  --cyan:         var(--frost-1);
  --blue:         var(--frost-3);

  --radius:       4px;
  --font:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ─── Themes ─────────────────────────────────────────────── */
/* Nord is the default (:root above). Each data-theme block overrides all colour vars. */

:root[data-theme="nord"] {
  /* already defined in :root — explicit alias so JS toggle is consistent */
}

:root[data-theme="atelier-forest"] {
  --bg:           #1b1918;
  --bg-darker:    #130f0e;
  --bg-lighter:   #2c2421;
  --selection:    #4b4543;
  --border:       #4b4543;
  --fg:           #e6e2e0;
  --fg-dim:       #a8a19f;
  --comment:      #68615e;
  --frost-1:      #00ad9c;
  --frost-2:      #6aafe6;
  --frost-3:      #407ee7;
  --frost-4:      #2a4087;
  --accent:       #6aafe6;
  --cyan:         #00ad9c;
  --blue:         #407ee7;
  --red:          #f22c40;
  --orange:       #df5320;
  --yellow:       #d5911a;
  --green:        #5ab738;
  --purple:       #6666ea;
}

:root[data-theme="solarized-dark"] {
  --bg:           #073642;
  --bg-darker:    #002b36;
  --bg-lighter:   #0d3b49;
  --selection:    #103c48;
  --border:       #244952;
  --fg:           #93a1a1;
  --fg-dim:       #839496;
  --comment:      #586e75;
  --frost-1:      #2aa198;
  --frost-2:      #268bd2;
  --frost-3:      #6c71c4;
  --frost-4:      #4d5e97;
  --accent:       #268bd2;
  --cyan:         #2aa198;
  --blue:         #6c71c4;
  --red:          #dc322f;
  --orange:       #cb4b16;
  --yellow:       #b58900;
  --green:        #859900;
  --purple:       #d33682;
}

:root[data-theme="dracula"] {
  --bg:           #282a36;
  --bg-darker:    #1e1f29;
  --bg-lighter:   #44475a;
  --selection:    #44475a;
  --border:       #44475a;
  --fg:           #f8f8f2;
  --fg-dim:       #d8d8d2;
  --comment:      #6272a4;
  --frost-1:      #8be9fd;
  --frost-2:      #bd93f9;
  --frost-3:      #ff79c6;
  --frost-4:      #6272a4;
  --accent:       #bd93f9;
  --cyan:         #8be9fd;
  --blue:         #ff79c6;
  --red:          #ff5555;
  --orange:       #ffb86c;
  --yellow:       #f1fa8c;
  --green:        #50fa7b;
  --purple:       #bd93f9;
}

:root[data-theme="gruvbox"] {
  --bg:           #282828;
  --bg-darker:    #1d2021;
  --bg-lighter:   #3c3836;
  --selection:    #504945;
  --border:       #504945;
  --fg:           #ebdbb2;
  --fg-dim:       #d5c4a1;
  --comment:      #7c6f64;
  --frost-1:      #8ec07c;
  --frost-2:      #fabd2f;
  --frost-3:      #83a598;
  --frost-4:      #458588;
  --accent:       #fabd2f;
  --cyan:         #8ec07c;
  --blue:         #83a598;
  --red:          #fb4934;
  --orange:       #fe8019;
  --yellow:       #fabd2f;
  --green:        #b8bb26;
  --purple:       #d3869b;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--bg-darker);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 48px;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top left,  rgba(136,192,208,.05) 0%, transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(94,129,172,.04) 0%, transparent 55%),
    var(--bg-darker);
}

/* ─── Terminal window wrapper ────────────────────────────── */
.terminal-wrapper {
  width: 100%;
  max-width: 960px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 24px 80px rgba(0,0,0,.55);
}

/* ─── Terminal title bar ─────────────────────────────────── */
.terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-lighter);
  border-bottom: 1px solid var(--border);
  user-select: none;
}

.terminal-dots { display: flex; gap: 6px; }

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.dot-red    { background: #bf616a; }
.dot-yellow { background: #ebcb8b; }
.dot-green  { background: #a3be8c; }

.terminal-title {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--comment);
  letter-spacing: .04em;
}

.terminal-spacer { width: 54px; }

/* ─── Terminal body ──────────────────────────────────────── */
.terminal-body {
  background: var(--bg);
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ─── ASCII Logo ─────────────────────────────────────────── */
.logo-section {
  text-align: center;
  padding: 8px 0 4px;
}

.ascii-logo {
  display: inline-block;
  font-size: clamp(5px, 1.1vw, 11px);
  line-height: 1.15;
  letter-spacing: 0;
  white-space: pre;
  text-align: left;
  color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(136,192,208,.25));
}

.tagline {
  margin-top: 10px;
  font-size: 13px;
  color: var(--comment);
  letter-spacing: .12em;
}

.comment-slash { color: var(--blue); opacity: .6; }
.tagline-text  { color: var(--comment); }

/* ─── Shell prompt line ──────────────────────────────────── */
.prompt-line {
  font-size: 13px;
  color: var(--fg);
  padding: 4px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt-user   { color: var(--green);  font-weight: 600; }
.prompt-at     { color: var(--fg-dim); }
.prompt-host   { color: var(--frost-3); font-weight: 600; }
.prompt-colon  { color: var(--fg-dim); }
.prompt-path   { color: var(--accent); }
.prompt-dollar { color: var(--purple); }
.prompt-cmd    { color: var(--fg-dim); }

.cursor {
  display: inline-block;
  color: var(--accent);
  animation: blink 1.1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── Sport tabs ─────────────────────────────────────────── */
.sport-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tab-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
}

.tab-favs {
  color: var(--yellow);
  border-color: rgba(235,203,139,.3);
}

.tab-favs:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  background: rgba(235,203,139,.08);
}

.tab-favs.active {
  border-color: var(--yellow);
  color: var(--bg-darker);
  background: var(--yellow);
}

.tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--comment);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  padding: 4px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s ease;
}

.tab:hover {
  border-color: var(--frost-3);
  color: var(--fg-dim);
  background: rgba(129,161,193,.08);
}

.tab.active {
  border-color: var(--accent);
  color: var(--bg-darker);
  background: var(--accent);
}

/* ─── Output section ─────────────────────────────────────── */
.output-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--comment);
}

/* Syntax-highlight the const line */
.kw  { color: var(--blue);   }
.op  { color: var(--fg-dim); opacity: .6; }
.fn  { color: var(--frost-1); }
.str { color: var(--yellow); }

.refresh-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font);
  font-size: 16px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refresh-btn:hover {
  border-color: var(--accent);
  background: rgba(136,192,208,.08);
  transform: rotate(180deg);
}

/* ─── Games grid ─────────────────────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ─── Game card ──────────────────────────────────────────── */
.game-card {
  background: var(--bg-darker);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  position: relative;
  transition: border-color .2s, box-shadow .2s;
  overflow: hidden;
}

.game-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.game-card.state-live::before   { background: var(--red);    }
.game-card.state-final::before  { background: var(--frost-4); }
.game-card.state-pre::before    { background: var(--border);  }

.game-card:hover {
  border-color: var(--selection);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* Card top row: status badge + period/time */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 11px;
}

.badge {
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}

.badge-live  { background: var(--red);    color: var(--fg); }
.badge-final { background: var(--frost-4); color: var(--fg); }
.badge-pre   { background: var(--selection); color: var(--fg-dim); }

.badge-live-pulse {
  animation: pulse-red 1.8s ease-in-out infinite;
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(191,97,106,.5); }
  50%       { box-shadow: 0 0 0 5px rgba(191,97,106,0); }
}

.game-period {
  color: var(--orange);
  font-size: 11px;
}

/* Teams block */
.teams {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.team-abbr {
  color: var(--frost-3);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
}

.team-name {
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.team-score {
  color: var(--fg-dim);
  font-weight: 700;
  font-size: 18px;
  text-align: right;
  min-width: 36px;
}

/* Winning team highlight */
.team-row.winning .team-abbr  { color: var(--accent);  }
.team-row.winning .team-name  { color: var(--fg);       font-weight: 600; }
.team-row.winning .team-score { color: var(--green);    }

/* Divider between teams */
.team-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}

/* Card bottom: network/venue */
.card-bottom {
  margin-top: 10px;
  font-size: 10px;
  color: var(--comment);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-start-time { color: var(--accent); }

/* ─── Loading / Error / Empty states ─────────────────────── */
.loading-state,
.error-state,
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--comment);
  font-size: 13px;
}

.error-state { color: var(--red); }

.spinner {
  display: inline-block;
  animation: spin-frames 0.8s steps(8) infinite;
  font-size: 18px;
}

@keyframes spin-frames {
  0%   { content: '⠋'; }
  12%  { content: '⠙'; }
  25%  { content: '⠹'; }
  37%  { content: '⠸'; }
  50%  { content: '⠼'; }
  62%  { content: '⠴'; }
  75%  { content: '⠦'; }
  87%  { content: '⠧'; }
}

.dots {
  display: inline-block;
  animation: dots 1.2s steps(4) infinite;
  letter-spacing: .1em;
}

/* ─── Output footer ──────────────────────────────────────── */
.output-footer {
  font-size: 11px;
  color: var(--comment);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ─── Legend ─────────────────────────────────────────────── */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--comment);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-sep  { opacity: .35; }
.score-win-sample { color: var(--green); font-weight: 700; }

/* ─── No games state ─────────────────────────────────────── */
.no-games-box {
  grid-column: 1 / -1;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 32px;
  text-align: center;
  color: var(--comment);
  font-size: 13px;
}

.no-games-box .no-games-icon { font-size: 28px; margin-bottom: 10px; color: var(--frost-3); }
.no-games-box .no-games-msg  { color: var(--fg-dim); margin-bottom: 6px; }

/* ─── Favourite button ───────────────────────────────────── */
.fav-btn {
  background: transparent;
  border: none;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: var(--comment);
  opacity: 0.35;
  transition: color .15s, opacity .15s;
  font-family: var(--font);
}

.fav-btn:hover {
  color: var(--yellow);
  opacity: 1;
}

.fav-btn.active {
  color: var(--yellow);
  opacity: 1;
}

/* Legend star sample */
.fav-btn-sample { color: var(--yellow); }

/* ─── Favs dashboard: sport group labels ─────────────────── */
.sport-group-label {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--frost-3);
  padding: 6px 0 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.sport-group-label:first-child { padding-top: 0; }

/* ─── No favourites empty state ──────────────────────────── */
.no-favs-box {
  grid-column: 1 / -1;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.no-favs-box .no-favs-icon { font-size: 26px; color: var(--yellow); opacity: .5; }
.no-favs-box .no-favs-title { color: var(--fg-dim); font-size: 13px; }
.no-favs-box .no-favs-hint  { color: var(--comment); font-size: 12px; line-height: 1.7; }
.no-favs-box .no-favs-hint strong { color: var(--yellow); font-weight: 400; }

/* ─── League standings ───────────────────────────────────── */
.standings-section {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.standings-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--comment);
  text-align: center;
}

.standings-tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px;
}

.lt-group-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--frost-3);
  padding: 4px 10px 2px;
}

.league-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: var(--bg-darker);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.league-table thead tr { background: var(--bg-lighter); }

.league-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--comment);
  border-bottom: 1px solid var(--border);
}

.lt-stat           { text-align: right !important; }
.lt-team-hd        { text-align: left; }

.lt-row {
  border-bottom: 1px solid rgba(67,76,94,.4);
  transition: background .1s;
}
.lt-row:last-child { border-bottom: none; }
.lt-row:hover      { background: rgba(67,76,94,.2); }
.lt-leader         { background: rgba(136,192,208,.04); }
.lt-leader .lt-pos { color: var(--yellow); }

.league-table td { padding: 6px 10px; color: var(--fg-dim); }

.lt-pos {
  width: 26px;
  color: var(--comment);
  font-size: 10px;
  font-weight: 700;
}

.lt-abbr {
  color: var(--frost-3);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .05em;
  display: inline-block;
  min-width: 34px;
  margin-right: 6px;
}

.lt-name { color: var(--fg-dim); font-size: 11px; }
.lt-stat  { color: var(--fg-dim); font-size: 11px; font-variant-numeric: tabular-nums; }

.lt-fav   { width: 28px; text-align: center; padding: 0 4px; }
.lt-fav .fav-btn { font-size: 13px; }

/* ─── F1 race results card ───────────────────────────────── */
.f1-race-card {
  grid-column: 1 / -1;
  background: var(--bg-darker);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.f1-race-card::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--red);
}

.f1-race-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.f1-round-badge {
  background: var(--red);
  color: var(--fg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.f1-race-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.f1-race-name    { color: var(--fg);      font-weight: 600; font-size: 14px; }
.f1-circuit      { color: var(--comment); font-size: 11px;  }
.f1-race-date    { color: var(--cyan);    font-size: 11px; white-space: nowrap; }

.f1-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.f1-results-table thead tr { background: var(--bg-lighter); }

.f1-results-table th {
  padding: 7px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--comment);
  border-bottom: 1px solid var(--border);
}

.f1-results-table th:last-child,
.f1-results-table td:last-child { text-align: right; }

.f1-row {
  border-bottom: 1px solid rgba(67,76,94,.4);
  transition: background .1s;
}
.f1-row:last-child { border-bottom: none; }
.f1-row:hover      { background: rgba(67,76,94,.25); }

.f1-results-table td { padding: 7px 12px; color: var(--fg-dim); }

.f1-pos  { color: var(--comment); font-size: 11px; font-weight: 600; width: 36px; }

.f1-p1 .f1-pos    { color: var(--yellow); }
.f1-p3 .f1-pos    { color: var(--orange); }

.f1-code {
  color: var(--frost-3);
  font-weight: 700;
  letter-spacing: .06em;
}

.f1-p1 .f1-code   { color: var(--accent); }
.f1-p1 .f1-driver { color: var(--fg); font-weight: 600; }
.f1-p1 .f1-time   { color: var(--green); }

.f1-team { color: var(--comment); font-size: 11px; }
.f1-time { font-variant-numeric: tabular-nums; }
.f1-pts  { color: var(--purple); font-weight: 600; }
.f1-fl   { color: var(--purple); font-size: 11px; }

/* F1 card top-border colour variants */
.f1-card--upcoming::before { background: var(--green);   }
.f1-card--drivers::before  { background: var(--purple);  }
.f1-card--ctors::before    { background: var(--frost-3); }

/* F1 round badge colour variants */
.f1-badge-next    { background: var(--green);   }
.f1-badge-drivers { background: var(--purple);  }
.f1-badge-ctors   { background: var(--frost-3); }

/* Countdown pill next to upcoming race */
.f1-countdown {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  background: rgba(163,190,140,.12);
  border: 1px solid rgba(163,190,140,.25);
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ─── PGA Tour ─────────────────────────────────────────────── */
.pga-card {
  grid-column: 1 / -1;
  background: var(--bg-darker);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  padding: 16px 18px;
  position: relative;
}

.pga-card::before {
  content: '';
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--green);
}

.pga-card--next::before { background: var(--green); }

.pga-card-pill {
  display: inline-block;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  background: rgba(163,190,140,.12);
  border: 1px solid rgba(163,190,140,.25);
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.pga-card-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--comment);
  margin-bottom: 6px;
}

.pga-card-title {
  color: var(--fg);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 8px;
}

.pga-card-meta {
  font-size: 12px;
  color: var(--fg-dim);
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.pga-meta-label {
  color: var(--comment);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  flex-shrink: 0;
  align-self: center;
}

.pga-section {
  grid-column: 1 / -1;
}

.pga-round-detail {
  font-size: 11px;
  color: var(--comment);
  letter-spacing: .05em;
  padding: 4px 0 6px;
  text-align: center;
}

.pga-lb-wrap {
  overflow-x: auto;
}

.pga-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pga-lb-table thead tr { background: var(--bg-lighter); }

.pga-lb-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--comment);
  border-bottom: 1px solid var(--border);
}

.pga-player-hd { min-width: 130px; }
.pga-ctry-hd   { width: 42px; }
.pga-rnd-hd    { width: 38px; text-align: right !important; }
.pga-score-hd  { width: 54px; text-align: right !important; }

.pga-lb-row {
  border-bottom: 1px solid rgba(67,76,94,.4);
  transition: background .1s;
}
.pga-lb-row:last-child { border-bottom: none; }
.pga-lb-row:hover      { background: rgba(67,76,94,.25); }

.pga-lb-table td { padding: 7px 10px; color: var(--fg-dim); }

.pga-pos    { color: var(--comment); font-size: 11px; font-weight: 600; width: 36px; }
.pga-player { color: var(--fg); }
.pga-ctry   { color: var(--comment); font-size: 11px; }
.pga-rnd    { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-dim); }
.pga-thru   { text-align: right; color: var(--comment); font-size: 11px; width: 36px; }
.pga-thru-hd { width: 36px; text-align: right !important; }
.pga-score  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.pga-major-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--yellow);
  background: rgba(235,203,139,.12);
  border: 1px solid rgba(235,203,139,.3);
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
}

.pga-score--under { color: var(--red);    }
.pga-score--even  { color: var(--fg);     }
.pga-score--over  { color: var(--comment);}

.pga-leader .pga-pos    { color: var(--yellow); }
.pga-leader .pga-player { color: var(--fg); font-weight: 600; }
.pga-leader .pga-score  { color: var(--green); }

/* Session schedule grid inside upcoming race card */
.f1-sessions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.f1-session {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.f1-session:last-child { border-right: none; }

.f1-sess-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--comment);
}

.f1-sess-time {
  font-size: 11px;
  color: var(--fg-dim);
}

.f1-session-race .f1-sess-name { color: var(--green); }
.f1-session-race .f1-sess-time { color: var(--fg); font-weight: 600; }

/* Championship tables — side by side */
.f1-champ-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* Cards inside the champ grid must NOT span the outer games-grid */
.f1-champ-grid .f1-race-card { grid-column: auto; }

/* Championship table extras */
.f1-col-r { text-align: right !important; }
.f1-wins  { color: var(--cyan); font-weight: 600; }

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-darker); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--selection); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  body { padding: 0; }

  .terminal-wrapper {
    border-radius: 0;
    box-shadow: none;
  }

  .terminal-body { padding: 16px; gap: 14px; }

  .ascii-logo { font-size: clamp(4px, 2.2vw, 8px); }

  .games-grid { grid-template-columns: 1fr; }

  .prompt-line {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ─── Clickable game card indicator ─────────────────────────── */
.has-boxscore {
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.has-boxscore:hover {
  border-color: var(--frost-3);
  box-shadow: 0 0 0 1px var(--frost-3);
}

/* ─── Box Score Modal ────────────────────────────────────────── */
.bs-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bs-modal.open { display: flex; }

.bs-panel {
  position: relative;
  background: var(--bg-darker);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.bs-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--comment);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  z-index: 1;
}
.bs-close:hover { color: var(--fg); }

.bs-content {
  overflow-y: auto;
  padding: 18px 16px 16px;
  flex: 1;
}

/* Header */
.bs-header {
  text-align: center;
  margin-bottom: 14px;
}
.bs-matchup {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bs-team-score {
  font-size: 13px;
  color: var(--fg-dim);
  font-weight: 600;
}
.bs-score-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
}
.bs-score-sep {
  font-size: 18px;
  color: var(--comment);
}
.bs-status {
  font-size: 11px;
  color: var(--comment);
  margin-top: 4px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Linescore */
.bs-linescore {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.bs-linescore thead th {
  background: var(--bg-darker);
  color: var(--comment);
  padding: 5px 10px;
  text-align: center;
  font-weight: 600;
  letter-spacing: .05em;
}
.bs-linescore tbody td {
  padding: 5px 10px;
  text-align: center;
  color: var(--fg-dim);
  border-top: 1px solid var(--border);
}
.bs-ls-team {
  text-align: left !important;
  color: var(--frost-3) !important;
  font-weight: 700;
}
.bs-ls-total {
  font-weight: 700;
  color: var(--fg) !important;
}

/* Team sections */
.bs-teams {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bs-team-section {}
.bs-team-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--frost-3);
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

/* Player table */
.bs-table-wrap { overflow-x: auto; }
.bs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
}
.bs-table thead th {
  color: var(--comment);
  font-weight: 600;
  letter-spacing: .05em;
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.bs-player-pos-hd,
.bs-player-name-hd { text-align: left !important; }

.bs-player-row td {
  padding: 5px 8px;
  color: var(--fg-dim);
  text-align: right;
  border-bottom: 1px solid rgba(67,76,94,.25);
}
.bs-player-row:last-child td { border-bottom: none; }
.bs-player-row:hover td { background: rgba(67,76,94,.15); }

.bs-player-pos {
  text-align: left !important;
  color: var(--comment);
  font-size: 10px;
  width: 28px;
}
.bs-player-name {
  text-align: left !important;
  color: var(--fg);
  font-weight: 500;
  min-width: 120px;
}
.bs-jersey {
  color: var(--comment);
  font-size: 10px;
  margin-left: 5px;
}

/* Bench separator */
.bs-bench-sep td {
  color: var(--comment);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 4px 8px;
  background: var(--bg-darker);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.bs-dnp { opacity: .45; }
.bs-dnp-label {
  text-align: left !important;
  color: var(--comment);
  font-size: 10px;
}

/* Loading / error */
.bs-loading {
  text-align: center;
  padding: 40px 20px;
  color: var(--comment);
  font-size: 13px;
}
.bs-error { color: var(--red); }

/* ─── Theme Switcher Bar ─────────────────────────────────── */
.theme-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px 16px 36px;
  font-family: var(--font, monospace);
  flex-wrap: wrap;
}

.theme-label {
  font-size: 11px;
  letter-spacing: .08em;
  color: #3e3e3e;
  user-select: none;
}

.theme-btns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}

.theme-btn {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* extra bottom padding to make room for the 3-px swatch strip */
  padding: 4px 11px 7px;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid #383838;
  background: transparent;
  color: #555;
  transition: color .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}

/* three-colour swatch strip at the bottom of each button */
.theme-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--s1) 33.33%,
    var(--s2) 33.33% 66.66%,
    var(--s3) 66.66%
  );
  opacity: 0;
  transition: opacity .15s;
}

.theme-btn:hover {
  color: #aaa;
  border-color: #666;
}

.theme-btn:hover::after,
.theme-btn.active::after {
  opacity: 1;
}

.theme-btn.active {
  color: #ccc;
  border-color: #888;
}