/* ============================================================
   FOOTYSTATS DESIGN SYSTEM — ds.css
   Aesthetic: Dark terminal broadcast × magazine editorial
   Fonts: Barlow Condensed (display) · DM Mono (stats) · Barlow (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=Barlow:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Tokens ── */
:root {
  /* Surface */
  --bg:        #0c0d0f;
  --bg-1:      #111316;
  --bg-2:      #181a1e;
  --bg-3:      #1f2228;
  --line:      rgba(255,255,255,0.07);
  --line-med:  rgba(255,255,255,0.12);

  /* Text */
  --ink:       #f0ede8;
  --ink-2:     rgba(240,237,232,0.65);
  --ink-3:     rgba(240,237,232,0.38);
  --ink-4:     rgba(240,237,232,0.22);

  /* Accent — teal contrast, used sparingly */
  --volt:      #43c7b7;
  --volt-dim:  rgba(67,199,183,0.18);

  /* Red — live indicator */
  --live-red:  #ff3b3b;
  --live-dim:  rgba(255,59,59,0.16);

  /* Team colour placeholders (overridden per-team via JS) */
  --team-primary:   #1a1a2e;
  --team-accent:    #4a90d9;

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  /* Typography */
  --font-display: 'Barlow Condensed', 'Impact', sans-serif;
  --font-body:    'Barlow', 'Helvetica Neue', sans-serif;
  --font-mono:    'DM Mono', 'Menlo', monospace;

  /* Radius */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  /* Transition */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Light mode override ── */
[data-theme="light"] {
  --bg:        #f5f3ef;
  --bg-1:      #eeece8;
  --bg-2:      #e5e2dc;
  --bg-3:      #d9d5ce;
  --line:      rgba(0,0,0,0.07);
  --line-med:  rgba(0,0,0,0.13);
  --ink:       #0f1014;
  --ink-2:     rgba(15,16,20,0.62);
  --ink-3:     rgba(15,16,20,0.38);
  --ink-4:     rgba(15,16,20,0.18);
  --volt:      #087d78;
  --volt-dim:  rgba(8,125,120,0.14);
  --live-red:  #d42b2b;
  --live-dim:  rgba(212,43,43,0.1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Topbar ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s5);
  height: 52px;
  background: rgba(12,13,15,0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

[data-theme="light"] .topbar {
  background: rgba(245,243,239,0.96);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

.brand-wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}

.brand-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--volt);
  flex-shrink: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--s3);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--ink);
  background: var(--line);
}

.nav-link.is-active {
  color: var(--volt);
  background: var(--volt-dim);
}

.nav-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--live-red);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-med);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.theme-toggle:hover { color: var(--ink); }

/* ── Page layout ── */
.page { min-height: 100vh; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--s5);
}

.container-wide {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--s5);
}

/* ── Hero / page header ── */
.page-hero {
  padding: var(--s6) 0 var(--s5);
  border-bottom: 1px solid var(--line);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--volt);
  margin-bottom: var(--s2);
}

.hero-kicker-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--volt);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--s3);
}

.hero-sub {
  font-size: 0.95rem;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0;
}

/* ── Section structure ── */
.section {
  padding: var(--s6) 0;
  border-bottom: 1px solid var(--line);
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.section-sub {
  font-size: 0.8rem;
  color: var(--ink-3);
  margin: 0;
}

.section-link {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-med);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}

.section-link:hover {
  color: var(--volt);
  border-color: var(--volt);
}

/* ── Panel / Card ── */
.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
}

.panel-padded { padding: var(--s5); }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  gap: var(--s3);
}

.panel-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

/* ── Stat leaderboard row ── */
.lb-table {
  width: 100%;
  border-collapse: collapse;
}

.lb-table th {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-weight: 400;
}

.lb-table th.r { text-align: right; }

.lb-row {
  position: relative;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
  cursor: default;
}

.lb-row:hover { background: var(--bg-2); }

.lb-row td {
  padding: 0.55rem var(--s3);
  vertical-align: middle;
}

/* Giant ghost rank number behind row */
.lb-rank-cell {
  width: 3rem;
  position: relative;
}

.lb-rank {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.lb-rank-ghost {
  position: absolute;
  right: -0.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1;
  color: var(--ink-4);
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.04em;
}

.lb-player-cell {
  position: relative;
  z-index: 1;
}

.lb-player-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--ink);
  text-decoration: none;
}

.lb-player-name:hover { color: var(--volt); }

.lb-team-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  border: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
}

.lb-stat-value {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

.lb-stat-avg {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

/* Team-colour left bar on rows */
.lb-row-team {
  border-left: 3px solid var(--team-accent, rgba(255,255,255,0.2));
  background: linear-gradient(90deg, rgba(var(--team-rgb,255,255,255),0.06) 0%, transparent 40%);
}

/* ── Match / scoreboard card ── */
.match-card {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  background: var(--bg-1);
  border: 1px solid var(--line);
  overflow: hidden;
}

.match-team {
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.match-team.away { text-align: right; align-items: flex-end; }

.match-team-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
}

.match-team-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.match-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-width: 8rem;
  text-align: center;
}

.match-score {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.match-vs {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.match-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.match-status-pill.live {
  background: var(--live-dim);
  color: var(--live-red);
  border: 1px solid var(--live-red);
}

.match-status-pill.upcoming {
  background: var(--volt-dim);
  color: var(--volt);
  border: 1px solid rgba(232,255,71,0.3);
}

.match-status-pill.final {
  background: var(--bg-3);
  color: var(--ink-3);
  border: 1px solid var(--line-med);
}

/* ── Chip / filter button ── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
  white-space: nowrap;
}

.chip:hover { color: var(--ink); border-color: var(--line-med); }

.chip.is-active {
  color: var(--volt);
  background: var(--volt-dim);
  border-color: rgba(232,255,71,0.3);
}

/* ── Input / search ── */
.input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-med);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color 0.15s;
}

.input::placeholder { color: var(--ink-3); }
.input:focus { border-color: var(--volt); }

.select {
  background: var(--bg-2);
  border: 1px solid var(--line-med);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  outline: none;
  cursor: pointer;
  appearance: none;
}

/* ── Button ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--line-med);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
  white-space: nowrap;
}

.btn:hover { color: var(--ink); border-color: var(--line-med); background: var(--bg-3); }

.btn-primary {
  background: var(--volt);
  border-color: var(--volt);
  color: #0c0d0f;
}

.btn-primary:hover { background: #d4e93f; border-color: #d4e93f; color: #0c0d0f; }

/* ── Live badge ── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--live-red);
  text-transform: uppercase;
}

.live-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--live-red);
  animation: pulse-dot 1.4s ease-in-out infinite;
}

/* ── Kicker label ── */
.kicker {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.kicker-accent {
  color: var(--volt);
}

/* ── Divider ── */
.divider {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 0;
}

/* ── Loading spinner ── */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--line-med);
  border-top-color: var(--volt);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Alphabet browser ── */
.alpha-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.alpha-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.alpha-btn:hover { color: var(--ink); border-color: var(--line-med); }

.alpha-btn.is-active {
  background: var(--volt);
  border-color: var(--volt);
  color: #0c0d0f;
}

.alpha-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ── Team grid card ── */
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s var(--ease);
  text-decoration: none;
}

.team-card:hover {
  border-color: var(--line-med);
  transform: translateY(-2px);
}

.team-card-swatch {
  height: 5px;
  width: 100%;
}

.team-card-body {
  padding: var(--s3) var(--s4);
}

.team-card-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 4px;
}

.team-card-meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}

/* ── Stat summary grid ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1px;
  background: var(--line);
}

.stat-cell {
  background: var(--bg-1);
  padding: var(--s4);
}

.stat-cell-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-cell-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8,9,11,0.88);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s6) var(--s4);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

.modal-shell {
  width: 100%;
  max-width: 860px;
  background: var(--bg-1);
  border: 1px solid var(--line-med);
  position: relative;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  gap: var(--s3);
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  cursor: pointer;
  font-size: 1.1rem;
  transition: color 0.14s, background 0.14s;
  flex-shrink: 0;
}

.modal-close:hover { color: var(--ink); background: var(--bg-3); }

.modal-body { padding: var(--s5); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .topbar { padding: 0 var(--s4); }
  .container, .container-wide { padding: 0 var(--s4); }
  .nav { display: none; }
  .match-card {
    grid-template-columns: 1fr;
  }
  .match-centre {
    border: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
}

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

/* ── Tab row ── */
.tab-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.tab-btn {
  padding: var(--s3) var(--s4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
  white-space: nowrap;
}

.tab-btn:hover { color: var(--ink); }

.tab-btn.is-active {
  color: var(--volt);
  border-bottom-color: var(--volt);
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}

.page-btn:hover { color: var(--ink); background: var(--bg-3); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.page-btn.is-active { background: var(--volt); border-color: var(--volt); color: #0c0d0f; }

/* ── Overflow scroll wrapper ── */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-3) transparent;
}

/* ── Games table ── */
.games-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.games-table th {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-weight: 400;
}

.games-table th:first-child,
.games-table th:nth-child(2) { text-align: left; }

.games-table td {
  padding: 0.45rem var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}

.games-table td:first-child,
.games-table td:nth-child(2) {
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink);
}

.games-table tbody tr:hover { background: var(--bg-2); }

.games-table .cell-highlight {
  color: var(--ink);
  font-weight: 500;
}

/* ── Trophy stat card ── */
.trophy-card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  overflow: hidden;
}

.trophy-card-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

/* ── Utilities ── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.gap-5 { gap: var(--s5); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.w-full { width: 100%; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.mt-1 { margin-top: var(--s1); }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mb-2 { margin-bottom: var(--s2); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }
.ml-auto { margin-left: auto; }
.p-4 { padding: var(--s4); }
.p-5 { padding: var(--s5); }

/* ── Row tint helper for JS injection ── */
[data-team-row] {
  --team-rgb: 255,255,255;
  --team-accent: rgba(255,255,255,0.25);
  border-left: 3px solid var(--team-accent);
  background: linear-gradient(90deg, rgba(var(--team-rgb),0.07) 0%, transparent 35%);
}

/* ============================================================
   COMPATIBILITY SHIM — Maps existing class names from the old
   theme.css to the new design language, so existing JS-rendered
   HTML lights up with the new visual system without code changes.

   Each block is documented: WHICH JS file emits it, WHAT element
   it targets, WHY the new style is applied.
   ============================================================ */

/* ── App body / shell ─────────────────────────────────────────
   Your existing index.html and other pages set <body class="app-body">
   and contain <div class="app-shell">. */
.app-body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  margin: 0;
}

.app-shell { min-height: 100vh; }

.app-main {
  padding: 0;
}

/* ── Topbar ──────────────────────────────────────────────────
   <header class="app-topbar"> in every *.html page header. */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s5);
  height: 52px;
  background: rgba(12,13,15,0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

[data-theme="light"] .app-topbar {
  background: rgba(245,243,239,0.96);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* The bars mark — three vertical bars left of "FootyStats" */
.app-brand-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.app-brand-bars span {
  display: inline-block;
  width: 3px;
  background: var(--volt);
  border-radius: 1px;
}

.app-brand-bars span:nth-child(1) { height: 50%; }
.app-brand-bars span:nth-child(2) { height: 80%; }
.app-brand-bars span:nth-child(3) { height: 100%; }

/* ── Nav ─────────────────────────────────────────────────────
   <nav class="app-nav"> with <a class="app-nav-link"> children.
   The active link gets `data-active="true"` set by chrome.js. */
.app-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--s3);
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.app-nav-link:hover {
  color: var(--ink);
  background: var(--line);
}

.app-nav-link[aria-current="page"],
.app-nav-link[data-active="true"],
.app-nav-link.is-active {
  color: var(--volt);
  background: var(--volt-dim);
}

.app-nav-link i,
.app-nav-link svg {
  width: 14px;
  height: 14px;
}

/* ── Hero (existing class .app-hero, used on Home) ────────────
   Re-skin to a flat editorial banner instead of a gradient block. */
.app-hero {
  padding: var(--s7) var(--s5) var(--s6);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  text-align: left;
}

.app-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--s3);
}

.app-hero .home-hero-lead {
  font-size: 0.95rem;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 auto;
}

.home-hero-copy-glass {
  background: transparent;
  border: none;
  padding: 0;
  text-align: center;
}

/* Hero player search — inline within the hero */
#hero-player-search,
#player-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-med);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color 0.15s;
}

#hero-player-search::placeholder,
#player-search::placeholder { color: var(--ink-3); }

#hero-player-search:focus,
#player-search:focus { border-color: var(--volt); }

/* Hero results dropdown */
#hero-player-results,
.hero-player-results {
  background: var(--bg-1);
  border: 1px solid var(--line-med);
  color: var(--ink);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}

#hero-player-results a,
#hero-player-results .result-row {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: var(--s3) var(--s4);
  display: block;
}

#hero-player-results a:hover {
  background: var(--bg-2);
}

/* ── Home launch grid (Match Centre + Insights cards) ──────── */
.home-main-grid {
  padding: var(--s6) var(--s5);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  max-width: 1280px;
  margin: 0 auto;
}

.home-left-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.home-launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s4);
}

.home-launch-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, transform 0.15s var(--ease);
  min-height: 180px;
}

.home-launch-card:hover {
  border-color: var(--line-med);
  transform: translateY(-2px);
}

.home-launch-card.is-live {
  border-color: rgba(255,59,59,0.3);
}

.home-launch-card.is-live:hover {
  border-color: var(--live-red);
}

.home-launch-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--volt);
  margin-bottom: var(--s2);
}

.home-launch-card.is-live .home-launch-kicker {
  color: var(--live-red);
}

.home-launch-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  line-height: 1;
}

.home-launch-live-meta,
#home-launch-insight-meta {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.45;
}

.home-launch-insight-stat {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 600;
  margin: var(--s2) 0;
}

.home-launch-inline-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--volt);
  text-decoration: none;
  border-bottom: 1px solid var(--volt-dim);
  padding-bottom: 1px;
  align-self: flex-start;
}

.home-launch-inline-link:hover { border-bottom-color: var(--volt); }

/* ── Home panels ─────────────────────────────────────────────
   <section class="bg-white rounded-xl p-5 home-panel ..."> in
   index.html. Tailwind utility classes get neutralised; .home-panel
   styling takes over. */
.home-panel {
  background: var(--bg-1) !important;
  border: 1px solid var(--line);
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--ink);
  overflow: hidden;
}

/* The h2 inside each panel — re-skin from gray-900 to panel header */
.home-panel > h2,
.home-panel > .home-panel-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}

.home-panel > h2 svg,
.home-panel > h2 i {
  color: var(--volt);
  width: 14px;
  height: 14px;
}

/* Body padding for panel content (after the heading) */
.home-panel > *:not(h2):not(.home-panel-title):not(.home-panel-header) {
  padding: var(--s4) var(--s5);
}

.home-panel > *:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

/* ── Generic Tailwind class overrides on background/text colors
   used in your existing HTML so they read against dark mode ──
   These DO NOT prevent Tailwind from working; they just give
   pre-existing color utility classes the new visual identity. */
.app-body .bg-white { background: var(--bg-1) !important; }
.app-body .bg-gray-50 { background: var(--bg) !important; }
.app-body .bg-gray-100 { background: var(--bg-2) !important; }
.app-body .bg-slate-50 { background: var(--bg-1) !important; }
.app-body .bg-slate-100 { background: var(--bg-2) !important; }
.app-body .text-gray-900 { color: var(--ink) !important; }
.app-body .text-gray-800 { color: var(--ink) !important; }
.app-body .text-gray-700 { color: var(--ink-2) !important; }
.app-body .text-gray-600 { color: var(--ink-2) !important; }
.app-body .text-gray-500 { color: var(--ink-3) !important; }
.app-body .text-slate-900 { color: var(--ink) !important; }
.app-body .text-slate-700 { color: var(--ink-2) !important; }
.app-body .text-slate-500 { color: var(--ink-3) !important; }
.app-body .border-slate-200 { border-color: var(--line) !important; }
.app-body .border-gray-200 { border-color: var(--line) !important; }
.app-body .border-zinc-200 { border-color: var(--line) !important; }
.app-body .text-zinc-200,
.app-body .text-zinc-300 { color: var(--ink-2) !important; }
.app-body .text-zinc-400,
.app-body .text-zinc-500 { color: var(--ink-3) !important; }
.app-body .shadow-lg,
.app-body .shadow-xl { box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important; }

/* Inputs that use the white-bg utility class */
.app-body .bg-white\/95,
.app-body input.bg-white {
  background: var(--bg-2) !important;
  color: var(--ink) !important;
}

/* ── Panels with rounded-xl get sharp corners (editorial look) ── */
.app-body .rounded-xl,
.app-body .rounded-lg,
.app-body .rounded-md {
  border-radius: 0 !important;
}

.app-body .rounded-full {
  border-radius: var(--r-pill) !important;
}

/* ── Player team pill (existing class .home-team-pill) ──
   home.js sets inline style for background/border/color from
   team colours. We just normalise typography. */
.home-team-pill,
.team-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.6;
  border: 1px solid;
  white-space: nowrap;
}

/* Player names inside cards (existing class .home-team-player-link).
   home.js sets color via inline style from team accent. */
.home-team-player-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: opacity 0.14s;
}

.home-team-player-link:hover { opacity: 0.78; }

/* Insight team mention (home.js wraps team mentions in spans) */
.home-insight-team {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ── Players page ─────────────────────────────────────────────
   Existing IDs: #alphabet-container, #players-grid, #player-details,
   #games-list, #player-summary, #player-name */

#alphabet-container {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}

#alphabet-container button,
.alphabet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

#alphabet-container button:hover { color: var(--ink); border-color: var(--line-med); }

#alphabet-container button.is-active,
#alphabet-container button[data-active="true"],
#alphabet-container button.active {
  background: var(--volt);
  border-color: var(--volt);
  color: #0c0d0f;
}

#alphabet-container button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

#players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  margin: 0;
  padding: 0;
}

#players-grid .player-card,
#players-grid > * {
  background: var(--bg-1);
  padding: var(--s3) var(--s4);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.12s;
}

#players-grid .player-card:hover { background: var(--bg-2); }

/* Player-detail header */
#player-details {
  background: var(--bg-1);
  border: 1px solid var(--line);
  margin: var(--s5);
}

#player-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--ink);
  margin: 0;
}

#player-header-stints {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s2);
}

/* Player summary card grid (existing structure) */
#player-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1px;
  background: var(--line);
  margin: var(--s4) 0;
}

#player-summary > * {
  background: var(--bg-1);
  padding: var(--s4);
}

#player-summary .stat-value,
#player-summary .summary-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

#player-summary .stat-label,
#player-summary .summary-stat-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* Games table — existing IDs #games-list, .games-list */
#games-list,
.games-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

#games-list th,
.games-list th {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-weight: 400;
  background: var(--bg-2);
}

#games-list th:first-child,
#games-list th:nth-child(2) { text-align: left; }

#games-list td,
.games-list td {
  padding: 0.45rem var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}

#games-list td:first-child,
#games-list td:nth-child(2) {
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink);
}

#games-list tbody tr:hover { background: var(--bg-2); }

/* ── Live Centre ─────────────────────────────────────────────
   Existing IDs: #live-centre-fixtures-view, #live-centre-matches-list,
   #live-centre-detail-content, #live-detail-scoreboard, etc. */

#live-centre-matches-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  padding: var(--s4) 0;
}

.live-fixture-card,
[data-live-fixture] {
  background: var(--bg-1);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  cursor: pointer;
  transition: border-color 0.15s;
}

.live-fixture-card:hover,
[data-live-fixture]:hover {
  border-color: var(--line-med);
}

#live-detail-scoreboard {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: var(--s5);
  margin-bottom: var(--s5);
}

#live-detail-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

#live-detail-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--s2);
}

#live-detail-status .status-pill,
#live-detail-status [data-status] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Live tables (home / away) */
#live-detail-home-table,
#live-detail-away-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

#live-detail-home-table th,
#live-detail-away-table th {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}

#live-detail-home-table td,
#live-detail-away-table td {
  padding: 0.4rem var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}

/* ── Years / Seasons page ─────────────────────────────────────
   Existing IDs: #year-select, #year-decade-bar, #season-overview-grid,
   #season-ladder, #season-leaders, #round-bar, #matches-list */

#year-decade-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

#year-decade-bar button,
.decade-btn {
  padding: var(--s2) var(--s3);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
}

#year-decade-bar button:hover { color: var(--ink); border-color: var(--line-med); }

#year-decade-bar button.is-active,
#year-decade-bar button.active,
#year-decade-bar button[data-active="true"] {
  color: var(--volt);
  background: var(--volt-dim);
  border-color: rgba(232,255,71,0.3);
}

#season-title,
.season-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: var(--s5) var(--s5) var(--s4);
}

#season-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  margin: 0 var(--s5);
  border: 1px solid var(--line);
}

#season-overview-grid > * {
  background: var(--bg-1);
  padding: var(--s5);
}

#season-ladder {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

#season-ladder th {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

#season-ladder th:first-child,
#season-ladder th:nth-child(2) { text-align: left; }

#season-ladder td {
  padding: 0.5rem var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-2);
}

#season-ladder td:nth-child(2) {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

#season-ladder tbody tr:hover { background: var(--bg-2); }

/* Ladder team-coloured left bar — JS injects style with --team-rgb */
#season-ladder tbody tr[data-team] {
  border-left: 3px solid var(--team-accent, transparent);
}

#round-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#round-bar button,
.round-btn {
  padding: 6px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
}

#round-bar button:hover { color: var(--ink); border-color: var(--line-med); }

#round-bar button.is-active,
#round-bar button.active,
#round-bar button[data-active="true"] {
  color: var(--volt);
  background: var(--volt-dim);
  border-color: rgba(232,255,71,0.3);
}

#matches-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
}

#matches-list .match-row,
#matches-list > * {
  background: var(--bg-1);
  border: 1px solid var(--line);
  padding: var(--s4);
  cursor: pointer;
  transition: border-color 0.15s;
}

#matches-list > *:hover { border-color: var(--line-med); }

/* ── Teams (Clubs) page ──────────────────────────────────────
   Existing IDs: #teams-grid, #teams-list-section, #team-details,
   #team-name, #team-summary, #top-performers */

#teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s3);
  padding: var(--s5);
}

#teams-grid .team-card,
#teams-grid > a {
  background: var(--bg-1);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s var(--ease);
  overflow: hidden;
}

#teams-grid > a:hover {
  border-color: var(--line-med);
  transform: translateY(-2px);
}

#team-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 0.95;
  margin: var(--s5) var(--s5) var(--s3);
}

#team-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1px;
  background: var(--line);
  margin: 0 var(--s5);
  border: 1px solid var(--line);
}

#team-summary > * {
  background: var(--bg-1);
  padding: var(--s4);
}

/* ── Trophy Room ─────────────────────────────────────────────
   Existing IDs: #category-tabs, #category-title, #stats-grid,
   #stat-modal, #modal-top-10, #trophy-stat-search */

#category-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  padding: 0 var(--s5);
}

#category-tabs button {
  padding: var(--s3) var(--s4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.14s, border-color 0.14s;
  white-space: nowrap;
}

#category-tabs button:hover { color: var(--ink); }

#category-tabs button.is-active,
#category-tabs button.active,
#category-tabs button[data-active="true"] {
  color: var(--volt);
  border-bottom-color: var(--volt);
}

#category-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: var(--s5) var(--s5) var(--s4);
}

#stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s3);
  padding: 0 var(--s5) var(--s6);
}

#stats-grid .trophy-card,
#stats-grid > * {
  background: var(--bg-1);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.14s;
}

#stats-grid > *:hover { border-color: var(--line-med); }

#trophy-stat-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-med);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color 0.15s;
}

#trophy-stat-search:focus { border-color: var(--volt); }

#trophy-stat-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* Trophy view toggle (#trophy-view-all-time, #trophy-view-per-game) */
#trophy-view-all-time,
#trophy-view-per-game {
  padding: 6px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-med);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.14s, background 0.14s, border-color 0.14s;
}

#trophy-view-all-time.is-active,
#trophy-view-per-game.is-active,
#trophy-view-all-time.active,
#trophy-view-per-game.active {
  color: var(--volt);
  background: var(--volt-dim);
  border-color: rgba(232,255,71,0.3);
}

/* Trophy stat modal */
#stat-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8,9,11,0.88);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s6) var(--s4);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}

#stat-modal .modal-shell,
#stat-modal > div {
  width: 100%;
  max-width: 860px;
  background: var(--bg-1);
  border: 1px solid var(--line-med);
  position: relative;
}

#modal-stat-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

#modal-top-10 {
  padding: var(--s5);
}

/* ── Loading shells / spinners (existing class .trophy-loading-shell) ── */
.trophy-loading-shell,
.loading-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s7);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trophy-spinner,
.loading-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--line-med);
  border-top-color: var(--volt);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Theme toggle button (we add it to the topbar in new HTML) ── */
.app-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--bg-2);
  border: 1px solid var(--line-med);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.app-theme-toggle svg {
  width: 18px;
  height: 18px;
}

.app-theme-toggle:hover { color: var(--ink); }

/* ── Player name link (used in tables) ── */
a.player-link {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.14s;
}

a.player-link:hover { color: var(--volt); }

/* ── Generic <a> resets so colours don't fight us ── */
.app-body a { color: inherit; }
.app-body a:hover { color: var(--ink); }
.app-body a.styled-link { color: var(--volt); }
.app-body a.styled-link:hover { color: var(--ink); }

/* ── Hero player results (search dropdown items rendered by home.js) ── */
.hero-player-result-row {
  padding: var(--s3) var(--s4);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s3);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}

.hero-player-result-row:hover { background: var(--bg-2); }

.hero-player-result-row:last-child { border-bottom: none; }

/* ── Print styles (basic) ── */
@media print {
  .app-topbar, .nav, #alphabet-container, #category-tabs { display: none; }
  body { background: white; color: black; }
}