/* Tokens, mapped onto poolean's palette. Everything below this block is the
   tracker's own stylesheet with each selector scoped; nothing in it was
   rewritten by hand, so it stays comparable against future versions.

   Scoped to .tracker rather than :root because both stylesheets define --bg and
   --text with different values, and on :root whichever loaded last would win for
   the entire page. */
.tracker {
  --bg: transparent;
  --panel-bg: var(--surface);
  --border: var(--line);
  --surface-muted: var(--track);
  --surface-muted-hover: var(--line);
  --surface-tint: var(--surface);
  /* Row hover, and it has to be OPAQUE. The tracker's own stylesheet pins the
     player column with position:sticky and a solid background, precisely so
     cells scrolling past do not show through it, and then its hover rule
     replaces that background with this token. Bridged to the dark theme's
     --blue-tint, which is rgba(...0.16), that put a see-through cell over the
     scrolling ones: hovering a row drew the player's name and whatever number
     was passing underneath in the same place. Light's --blue-tint is a solid
     #eaf1fd and was always fine; dark gets the same colour composited over the
     panel, below. */
  --surface-hover: var(--blue-tint);
  --disabled-bg: var(--track);

  /* NOT var(--text): the tracker's own token is also called --text, so that
     would be a self-reference. And not var(--ink) alone, because poolean's dark
     theme overrides --text without overriding --ink, which would leave
     near-black text on a dark panel. Set per theme instead, below. */
  --text: var(--ink);
  --muted: var(--ink2);

  /* Blue is poolean's action colour. Gold is reserved for standings and awards,
     so it appears here only as the accent. */
  --primary: var(--blue);
  --primary-dark: var(--blue-deep);
  --primary-light: var(--blue-tint);
  --accent: var(--gold-deep);   /* re-pointed for dark below */
  --accent-light: var(--gold-tint);

  --danger: var(--down);
  --danger-light: var(--down-tint);
  --success: var(--up);
  --success-light: var(--up-tint);

  /* The tracker paints two radial glows behind its body. poolean's own page
     background sits behind this panel already, so they are switched off rather
     than restyled: a second gradient over ours reads as a rendering fault. */
  --glow-1: transparent;
  --glow-2: transparent;

  --radius: var(--r-lg);
  --radius-sm: var(--r-sm);
  --shadow-sm: 0 1px 2px rgba(21, 25, 31, 0.06);
  --shadow-md: var(--shadow-card);

  --font-body: var(--ui);
  --font-display: var(--disp);
}

/* The handful of tokens whose poolean source is not itself theme-aware. Kept
   together rather than scattered, so the dark pass is one place to check. */
:root[data-theme="dark"] .tracker {
  --text: #eef1f5;
  --accent: var(--gold);
  --surface-muted-hover: #2b323b;
  /* rgba(79, 143, 245, 0.16) over #171b22, worked out rather than picked, so it
     looks the same as the tint it replaces and is opaque. See --surface-hover. */
  --surface-hover: #202e44;
}

/* Design tokens (colors, fonts, radii, shadows) live in theme.css, loaded before this
   file — everything below is layout/structure only, built entirely on var(--...) tokens
   so reskinning never requires touching this file. */
.tracker * {
  box-sizing: border-box;
}
.tracker {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 15% 0%, var(--glow-1) 0%, transparent 45%),
    radial-gradient(circle at 100% 10%, var(--glow-2) 0%, transparent 40%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tracker .app-header {
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
.tracker .header-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 18px 24px 0;
}
.tracker .header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tracker .app-header h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}
.tracker .theme-toggle-btn {
  background: var(--surface-muted);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tracker .theme-toggle-btn:hover {
  background: var(--surface-muted-hover);
}
.tracker .logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-size: 1.2rem;
  box-shadow: var(--shadow-sm);
}
.tracker .tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.tracker .tab-btn {
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--muted);
  border-radius: 8px 8px 0 0;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.tracker .tab-btn:hover {
  color: var(--text); background: var(--primary-light);
}
.tracker .tab-btn.active {
  color: var(--primary-dark);
  border-bottom-color: var(--primary);
  background: var(--primary-light);
}
.tracker main {
  max-width: 1300px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}
.tracker .tab-panel {
  display: none;
}
.tracker .tab-panel.active {
  display: block; animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from {
  opacity: 0; transform: translateY(4px);
}
  to {
  opacity: 1; transform: translateY(0);
}
}
.tracker .panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.tracker .panel h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}
.tracker .panel h4 {
  margin: 14px 0 6px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tracker .panel h4:first-of-type {
  margin-top: 0;
}
.tracker .hint {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
  margin-top: -4px;
  margin-bottom: 12px;
}
.tracker .inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tracker input, .tracker select, .tracker button {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-bg);
  color: var(--text);
}
.tracker input:focus, .tracker select:focus, .tracker button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.tracker button {
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.05s ease;
}
.tracker button:hover {
  background: var(--primary-dark);
}
.tracker button:active {
  transform: translateY(1px);
}
.tracker .secondary-btn {
  background: var(--surface-muted);
  color: var(--text);
}
.tracker .secondary-btn:hover {
  background: var(--surface-muted-hover);
}
.tracker .danger-btn {
  background: var(--danger);
}
.tracker .danger-btn:hover {
  filter: brightness(0.88);
}
.tracker .highlight-btn {
  background: var(--success);
}
.tracker .highlight-btn:hover {
  filter: brightness(0.88);
}
.tracker .lowlight-btn {
  background: var(--danger);
}
.tracker .lowlight-btn:hover {
  filter: brightness(0.88);
}
.tracker button:disabled {
  background: var(--disabled-bg) !important;
  color: var(--muted);
  cursor: not-allowed;
  filter: none;
}
.tracker .button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tracker .file-label {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}
.tracker .teams-list, .tracker .games-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tracker .team-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.tracker .team-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.tracker .team-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
}
.tracker .color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.tracker .roster-row, .tracker .player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 2px;
  border-top: 1px solid var(--surface-muted);
  font-weight: 500;
}
.tracker .roster-row:first-child, .tracker .player-row:first-of-type {
  border-top: none;
}
.tracker .add-player-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.tracker .icon-btn {
  background: none;
  color: var(--muted);
  padding: 3px 8px;
  font-weight: 500;
  font-size: 0.82rem;
  border: none;
}
.tracker .icon-btn:hover {
  color: var(--danger); background: none;
}
.tracker .game-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.tracker .game-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.tracker .game-card .matchup-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
.tracker .game-card .date-line {
  color: var(--muted);
  font-size: 0.84rem;
  margin-top: 2px;
}
.tracker .stat-entry-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.tracker .stat-entry-header h2 {
  margin: 0; flex: 1; font-family: var(--font-display);
}
.tracker .score-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 6px 14px;
  border-radius: 999px;
}
.tracker .scoreboard-panel {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  padding: 0;
  overflow: hidden;
}
.tracker .scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 5vw, 48px);
  padding: 20px 16px;
}
.tracker .scoreboard-team {
  display: flex;
  align-items: baseline;
  gap: 12px;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.tracker .scoreboard-team.leading {
  opacity: 1;
}
.tracker .scoreboard-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tracker .scoreboard-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 8vw, 3.5rem);
  line-height: 1;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.tracker .scoreboard-dash {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.tracker .box-score-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 800px) {
.tracker .box-score-columns {
  grid-template-columns: 1fr;
}
}
.tracker .team-box {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.tracker .team-box h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-light);
}
.tracker .player-stat-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface-tint);
}
.tracker .player-stat-card .name-row {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: var(--font-display);
}
.tracker .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 6px;
}
.tracker .stat-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 6px;
  text-align: center;
  background: var(--panel-bg);
}
.tracker .stat-cell .stat-label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}
.tracker .stat-cell .stat-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 3px 0;
}
.tracker .stat-cell .stat-buttons {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.tracker .stat-cell button {
  padding: 3px 7px;
  font-size: 0.75rem;
  min-width: 24px;
  border-radius: 6px;
}
.tracker .matchup-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.tracker .matchup-table th {
  text-align: left;
  padding: 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.tracker .sortable-th {
  cursor: pointer;
  user-select: none;
}
.tracker .sortable-th:hover {
  color: var(--text);
}
.tracker .sortable-th.sorted {
  color: var(--accent);
}
.tracker .matchup-table td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.tracker .matchup-table tr:hover td {
  background: var(--surface-hover);
}
/* Pins the player-name column in place while a wide stat table (Game Stats, Leaderboard)
   scrolls horizontally, so it's always clear whose row you're looking at. Needs its own solid
   background — the table itself has none, it just shows the panel behind it — or scrolled-past
   cells would show through underneath. */
.tracker .matchup-table th.sticky-col, .tracker .matchup-table td.sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel-bg);
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.15);
}
.tracker .matchup-table tr:hover td.sticky-col {
  background: var(--surface-hover);
}
.tracker .empty-state {
  color: var(--muted);
  font-style: italic;
  padding: 12px 0;
}
/* Players roster */
.tracker .roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Roster assignment per game */
.tracker .roster-assignment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 800px) {
.tracker .roster-assignment {
  grid-template-columns: 1fr;
}
}
.tracker .roster-team-col {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.tracker .roster-team-col h4 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
}
.tracker .roster-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  margin-bottom: 10px;
}
.tracker .roster-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
}
.tracker .roster-chip button {
  background: none;
  border: none;
  color: inherit;
  padding: 0 4px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.tracker .roster-chip button:hover {
  opacity: 1; background: none;
}
.tracker .roster-add-select {
  width: 100%;
}
/* Stat Entry: the video and the box score (the two things you're actually looking at and
   clicking while tagging a play) sit side by side at the top, each tall enough to hold its
   own scroll if it needs one, so neither ever has to be scrolled away to see the other.
   Everything else — video setup, roster assignment, Game Stats, Shot Log, etc. — is used far
   less often while actively tagging, so it lives below in normal document flow instead.
   Falls back to a plain stacked column on narrow screens, where holding both at a fixed
   height would just cramp everything. */
.tracker .tagging-area {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.tracker .video-pane {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.tracker .stat-pane {
  max-height: 78vh;
  overflow-y: auto;
  padding-right: 4px;
}
.tracker .stat-pane .box-score-columns {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
@media (max-width: 900px) {
.tracker .tagging-area {
  display: block;
}
.tracker .stat-pane {
  max-height: none; overflow-y: visible; margin-top: 18px;
}
}
/* Video */
.tracker #videoPlayerWrap video, .tracker #videoPlayerWrap iframe {
  width: 100%;
  max-height: 74vh;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: black;
  box-shadow: var(--shadow-md);
}
.tracker #videoPlayerWrap iframe {
  aspect-ratio: 16 / 9;
  max-height: none;
}
.tracker .table-scroll {
  overflow-x: auto;
}
/* Scoring log defender picker */
.tracker .stat-cell.expanded {
  grid-column: 1 / -1;
  text-align: left;
  background: var(--accent-light);
  border-color: var(--accent);
}
.tracker .defender-pick-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.tracker .defender-pick-list button {
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.tracker .defender-pick-list button:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
/* Without this, a picked defender/assist looks identical to an unpicked one — clicking a
   name appears to do nothing, which is exactly what makes Confirm feel unreliable. */
.tracker .defender-pick-list button.selected {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.tracker .defender-pick-list button.selected::before {
  content: "✓ ";
}
.tracker .confirm-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.tracker .confirm-btn {
  flex: 1;
  padding: 12px 16px;
  font-size: 1rem;
}
/* Highlight / lowlight reel */
.tracker .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.tracker .badge-highlight {
  background: var(--success-light);
  color: var(--success);
}
.tracker .badge-lowlight {
  background: var(--danger-light);
  color: var(--danger);
}
.tracker .badge-video {
  background: var(--accent-light);
  color: var(--accent);
}
.tracker .reel-time-input {
  width: 64px;
  padding: 5px 6px;
  font-size: 0.85rem;
}
.tracker .reel-note-input {
  width: 140px;
  padding: 5px 8px;
  font-size: 0.85rem;
}

/* The shot-location picker in the entry flow. Two-to-one, matching the viewBox,
   or a circle stops being a circle and a placed dot lands somewhere other than
   where it was tapped. Sized for a thumb rather than a mouse: this is used on a
   phone beside a paused video. */
.tracker .pv-court { display: block; width: 100%; max-width: 168px; aspect-ratio: 1 / 2; margin: 6px 0 2px; cursor: crosshair; touch-action: manipulation; }
.tracker .pv-court .pv-floor { fill: var(--track); stroke: var(--line); stroke-width: 1; }
.tracker .pv-court .pv-3pt { stroke: var(--ink3); stroke-width: 0.8; stroke-dasharray: 3 2; opacity: 0.75; }
.tracker .pv-court .pv-lab { fill: var(--ink3); font-size: 6px; font-weight: 700; }
.tracker .pv-court .pv-board, .tracker .pv-court .pv-rim { stroke: var(--ink2); stroke-width: 1.4; fill: none; }
.tracker .pv-court .pv-spot { fill: var(--gold-deep); stroke: var(--surface); stroke-width: 1; }

/* Names are the one column that must not wrap. The tables carry twenty-odd
   numeric columns and scroll sideways, so the browser shrinks the widest text
   column first, which turns "Logan W" into two lines while every number beside
   it sits on one. */
.tracker table td:first-child,
.tracker table th:first-child { white-space: nowrap; }

/* The recording picker. Recordings are content to be clicked, not an option
   inside a select, which is the whole reason the panel was reorganised. */
.tracker .rec-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}
.tracker .rec-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 13px; min-height: 44px;
  background: var(--panel-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.tracker .rec-item:hover { background: var(--surface-muted-hover); }
.tracker .rec-item.on { border-color: var(--primary); background: var(--surface-muted-hover); }
.tracker .rec-name { font-weight: 700; font-size: 14px; }
.tracker .rec-state { font-size: 11.5px; color: var(--muted); }
.tracker .rec-item.on .rec-state { color: var(--primary); font-weight: 700; }

/* Everything that is not the common path, folded away rather than deleted. */
.tracker .rec-more { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.tracker .rec-more > summary {
  cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted);
  padding: 6px 0; min-height: 32px;
}
.tracker .rec-more[open] > summary { margin-bottom: 8px; }

/* The recording playing on the Videos tab. Capped so it does not push the
   night's games off the screen: this is for finding your place, and the
   review player in Stat Entry is the one you work in. */
.tracker #videoPreview:not(:empty) { margin-top: 4px; }
.tracker #videoPreview video { width: 100%; max-height: 46vh; border-radius: 10px; background: #000; display: block; }

/* The mark control is the action on this panel, so it reads as one. */
.tracker #masterVideoStartRow { align-items: center; gap: 10px; flex-wrap: wrap; }
.tracker #setStartFromPlaybackBtn { min-height: 44px; }

/* The scoreboard, retoned. The source paints it as a full-width panel filled
   with a primary-to-accent gradient and white numerals, which on its own page is
   the one bright thing in a light layout. Bridged onto this palette that becomes
   a saturated blue-to-gold band across the top of a dark, restrained screen, and
   gold here is reserved for standings and awards. Same idea kept: the score is
   the thing you can read from across the room. Only the leader is coloured, so
   the reading is the contrast rather than the fill. */
.tracker .scoreboard-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  padding: 16px 20px;
  overflow: visible;
}
.tracker .scoreboard-team { opacity: 1; color: var(--muted); }
.tracker .scoreboard-label { color: var(--muted); }
.tracker .scoreboard-value {
  color: var(--text);
  text-shadow: none;
  /* Scores change as events are logged, and a proportional 1 makes the whole
     row shuffle sideways every time one does. */
  font-variant-numeric: tabular-nums;
}
.tracker .scoreboard-team.leading .scoreboard-label,
.tracker .scoreboard-team.leading .scoreboard-value { color: var(--primary); }
.tracker .scoreboard-dash { color: var(--muted); }

/* The hover explainer on a column heading. Appended to the body rather than the
   table, so it is not clipped by the sideways scroll container that the widest
   tables live in, which is where the abbreviations most need explaining. */
.tracker-tip {
  position: fixed;
  z-index: 1000;
  max-width: 300px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface);
  /* NOT var(--ink) on its own. The dark theme moves --surface and leaves --ink
     where it is, so the tip rendered rgb(21,25,31) on rgb(23,27,34): the text
     was there, correct, and invisible. Same trap the token bridge at the top of
     this file already documents for --text, and the same fix. */
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  /* It follows the pointer's target, so it must never become one itself. */
  pointer-events: none;
}
/* The tip is appended to the body, outside .tracker, so it cannot read the
   wrapper's own --text and needs the dark value itself. */
:root[data-theme="dark"] .tracker-tip {
  color: #eef1f5;
  border-color: #2b323b;
}
/* A heading that has an explanation says so, quietly. Without this the only way
   to find out which ones respond is to hover all twenty-five. */
.tracker th[data-explain] {
  text-decoration: underline dotted var(--ink3);
  text-underline-offset: 3px;
  /* Holding one is asking what it means, not selecting the word. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Make the hidden attribute actually hide.
   `.tracker .inline-form { display: flex }` is two classes and the browser's own
   `[hidden] { display: none }` is one attribute, so the flex rule wins and any
   row built as an inline-form ignores `hidden` entirely. The mark-game-start row
   is one of those: it is meant to appear only once a recording is loaded, and
   was showing an empty box and a live-looking button before there was anything
   to mark. !important is the right tool for exactly this, a low-specificity
   browser default that a component rule outranks by accident. */
.tracker [hidden] { display: none !important; }