/* ================================================================
   FOOSBALL THEME SYSTEM
   Each theme overrides CSS custom properties.
   Add new themes as [data-theme="name"] { ... }
   ================================================================ */

/* ----------------------------------------------------------------
   DEFAULT — "Light" theme
   Same fonts, same accent palette, same effects as Dark (cyberpunk).
   Only surfaces (backgrounds/borders) swap to light, plus the three
   colors that are unreadable on white (cyan, yellow, mint-green) are
   darkened to their nearest legible shade; everything else is reused
   byte-for-byte from the dark theme.
   ---------------------------------------------------------------- */
:root,
[data-theme="default"] {
  color-scheme: light;

  /* Layout */
  --app-bg:        #f7f4fb;
  --navbar-bg:     #ffffff;
  --card-bg:       #ffffff;
  --card-border:   1px solid #ff2d78;
  --card-radius:   0px;
  --card-shadow:   0 0 10px rgba(255,45,120,0.2), inset 0 0 20px rgba(0,0,0,0.04);
  --card-hover-shadow: 0 0 25px rgba(255,45,120,0.5), 0 0 70px rgba(255,45,120,0.15), inset 0 0 20px rgba(0,0,0,0.04);
  --border-color:  #e6d9f2;

  /* Typography — identical to dark mode */
  --body-font:     'Share Tech Mono', 'Courier New', monospace;
  --display-font:  'Orbitron', sans-serif;
  --mono-font:     'Share Tech Mono', 'Courier New', monospace;
  --text-primary:  #1a0b2e;
  --text-muted:    #9d4edd;

  /* Neon palette (cyberpunk-specific, used below) — cyan/yellow darkened for white-bg legibility */
  --neon-cyan:    #0e7490;
  --neon-magenta: #ff2d78;
  --neon-yellow:  #a16207;
  --neon-orange:  #ff6b35;
  --neon-purple:  #bd00ff;

  /* Accent colors */
  --accent-primary:  #0e7490;
  --accent-secondary:#ff2d78;
  --success-color:   #047857;
  --danger-color:    #ff2d78;
  --warning-color:   #a16207;

  /* Player card specific */
  --elo-color:        #a16207;
  --elo-font:         'Orbitron', sans-serif;
  --name-color:       #0e7490;
  --name-font:        'Orbitron', sans-serif;
  --rank-badge-bg:    #ff2d78;
  --rank-badge-color: #000;
  --rank1-border:     #a16207;
  --rank1-shadow:     rgba(161,98,7,0.4);
  --rank2-border:     #0e7490;
  --rank2-shadow:     rgba(14,116,144,0.35);
  --rank3-border:     #ff6b35;
  --rank3-shadow:     rgba(255,107,53,0.4);
  --rank1-badge-bg:   #ffe000;
  --rank1-badge-fg:   #000;
  --rank2-badge-bg:   #00fff5;
  --rank2-badge-fg:   #000;
  --rank3-badge-bg:   #ff6b35;
  --rank3-badge-fg:   #000;

  /* Win rate bar */
  --track-bg:        #ede3f7;
  --winrate-fill:    linear-gradient(90deg, #0e7490, #ff2d78);
  --winrate-glow:    0 0 8px rgba(14,116,144,0.4);

  /* Stat chips */
  --chip-bg:         #ffffff;
  --chip-border:     #e6d9f2;

  /* H2H */
  --h2h-win-bg:      rgba(4,120,87,0.1);
  --h2h-loss-bg:     rgba(255,45,120,0.12);
  --h2h-draw-bg:     rgba(189,0,255,0.06);
  --h2h-self-bg:     rgba(0,0,0,0.03);

  /* Form inputs */
  --input-bg:           #ffffff;
  --input-border:       #e6d9f2;
  --input-focus-border: #0e7490;
  --input-focus-shadow: 0 0 0 2px rgba(14,116,144,0.2), 0 0 15px rgba(14,116,144,0.1);

  /* Submit button */
  --submit-bg:      #ff2d78;
  --submit-border:  #ff2d78;
  --submit-color:   #fff;
  --submit-hover-bg:#ff5294;
  --submit-shadow:  0 0 15px rgba(255,45,120,0.4);
  --submit-font:    'Orbitron', sans-serif;

  /* VS divider */
  --vs-color:       #ff2d78;
  --vs-font:        'Orbitron', sans-serif;
  --vs-glow:        0 0 12px rgba(255,45,120,0.35);

  /* Section title */
  --section-title-color: #ff2d78;
  --section-title-font:  'Orbitron', sans-serif;
  --section-title-glow:  0 0 12px rgba(255,45,120,0.3);

  /* Bottom nav */
  --bottom-nav-bg:       #ffffff;
  --bottom-nav-border:   #e6d9f2;
  --bottom-nav-active:   #0e7490;
  --bottom-nav-inactive: #9d4edd;

  /* Champion banner */
  --champion-border:     #a16207;
  --champion-color:      #a16207;
  --champion-crown:      #a16207;

  /* Season pills */
  --season-pill-bg:      #ffffff;
  --season-pill-active-bg:    #ff2d78;
  --season-pill-active-color: #fff;

  /* Quick stat cards */
  --quick-stat-bg:       #ffffff;
  --quick-stat-border:   #e6d9f2;
  --quick-stat-value-color: #0e7490;

  /* Match list items */
  --match-item-bg:       #ffffff;
  --match-item-border:   #e6d9f2;

  /* Chart */
  --chart-grid:          #e6d9f2;
  --chart-text:          #9d4edd;

  /* Player list */
  --player-list-item-bg: #ffffff;
  --player-list-hover:   #f7f0fc;

  /* Record tile tones */
  --tone-elo:         #a16207;
  --tone-streak:      #ff6b35;
  --tone-performance: #047857;
  --tone-highlight:   #ff2d78;
  --tone-clutch:      #bd00ff;
  --tone-rivalry:     #0e7490;
  --tone-legacy:      #5b6b8c;
  --rc-texture:       rgba(26,11,46,0.022);   /* record-plaque scanline, barely there on white */

  /* Bootstrap variable overrides */
  --bs-body-bg:             #f7f4fb;
  --bs-body-color:          #1a0b2e;
  --bs-body-font-family:    'Share Tech Mono', 'Courier New', monospace;
  --bs-primary-rgb:         14,116,144;
  --bs-secondary-rgb:       255,45,120;
  --bs-success-rgb:         4,120,87;
  --bs-danger-rgb:          255,45,120;
  --bs-card-bg:             #ffffff;
  --bs-border-color:        #e6d9f2;
  --bs-secondary-bg:        #ffffff;
  --bs-tertiary-bg:         #f7f4fb;
  --bs-dropdown-bg:         #ffffff;
  --bs-dropdown-border-color: #e6d9f2;
  --bs-dropdown-link-color:   #1a0b2e;
  --bs-dropdown-link-hover-bg: rgba(255,45,120,0.06);
  --bs-modal-bg:            #ffffff;
  --bs-navbar-active-color: #a16207;
}

/* ----------------------------------------------------------------
   DARK MODE (Cyberpunk)
   ---------------------------------------------------------------- */
[data-theme="cyberpunk"] {
  color-scheme: dark;

  /* Layout */
  --app-bg:        #080010;
  --navbar-bg:     #04000a;
  --card-bg:       #0d0120;
  --card-border:   1px solid #ff2d78;
  --card-radius:   0px;
  --card-shadow:   0 0 10px rgba(255,45,120,0.25), inset 0 0 20px rgba(0,0,0,0.7);
  --card-hover-shadow: 0 0 25px rgba(255,45,120,0.6), 0 0 70px rgba(255,45,120,0.2), inset 0 0 20px rgba(0,0,0,0.7);
  --border-color:  #380050;

  /* Typography */
  --body-font:     'Share Tech Mono', 'Courier New', monospace;
  --display-font:  'Orbitron', sans-serif;
  --mono-font:     'Share Tech Mono', 'Courier New', monospace;
  --text-primary:  #e8d5ff;
  --text-muted:    #9d4edd;

  /* Neon palette (cyberpunk-specific, used below) */
  --neon-cyan:    #00fff5;
  --neon-magenta: #ff2d78;
  --neon-yellow:  #ffe000;
  --neon-orange:  #ff6b35;
  --neon-purple:  #bd00ff;

  /* Accent colors */
  --accent-primary:  #00fff5;
  --accent-secondary:#ff2d78;
  --success-color:   #00ff88;
  --danger-color:    #ff2d78;
  --warning-color:   #ffe000;

  /* Player card specific */
  --elo-color:        #ffe000;
  --elo-font:         'Orbitron', sans-serif;
  --name-color:       #00fff5;
  --name-font:        'Orbitron', sans-serif;
  --rank-badge-bg:    #ff2d78;
  --rank-badge-color: #000;
  --rank1-border:     #ffe000;
  --rank1-shadow:     rgba(255,224,0,0.5);
  --rank2-border:     #00fff5;
  --rank2-shadow:     rgba(0,255,245,0.4);
  --rank3-border:     #ff6b35;
  --rank3-shadow:     rgba(255,107,53,0.4);
  --rank1-badge-bg:   #ffe000;
  --rank1-badge-fg:   #000;
  --rank2-badge-bg:   #00fff5;
  --rank2-badge-fg:   #000;
  --rank3-badge-bg:   #ff6b35;
  --rank3-badge-fg:   #000;

  /* Win rate bar */
  --track-bg:        #1a0035;
  --winrate-fill:    linear-gradient(90deg, #00fff5, #ff2d78);
  --winrate-glow:    0 0 8px rgba(0,255,245,0.5);

  /* Stat chips */
  --chip-bg:         #0d0120;
  --chip-border:     #380050;

  /* H2H */
  --h2h-win-bg:      rgba(0,255,136,0.12);
  --h2h-loss-bg:     rgba(255,45,120,0.15);
  --h2h-draw-bg:     rgba(189,0,255,0.08);
  --h2h-self-bg:     rgba(255,255,255,0.03);

  /* Form inputs */
  --input-bg:           #0d0120;
  --input-border:       #380050;
  --input-focus-border: #00fff5;
  --input-focus-shadow: 0 0 0 2px rgba(0,255,245,0.25), 0 0 15px rgba(0,255,245,0.1);

  /* Submit button */
  --submit-bg:      #ff2d78;
  --submit-border:  #ff2d78;
  --submit-color:   #fff;
  --submit-hover-bg:#ff5294;
  --submit-shadow:  0 0 15px rgba(255,45,120,0.5);
  --submit-font:    'Orbitron', sans-serif;

  /* VS divider */
  --vs-color:       #ff2d78;
  --vs-font:        'Orbitron', sans-serif;
  --vs-glow:        0 0 12px rgba(255,45,120,0.7);

  /* Section title */
  --section-title-color: #ff2d78;
  --section-title-font:  'Orbitron', sans-serif;
  --section-title-glow:  0 0 12px rgba(255,45,120,0.5);

  /* Bottom nav */
  --bottom-nav-bg:       #04000a;
  --bottom-nav-border:   #380050;
  --bottom-nav-active:   #00fff5;
  --bottom-nav-inactive: #9d4edd;

  /* Champion banner */
  --champion-border:     #ffe000;
  --champion-color:      #ffe000;
  --champion-crown:      #ffe000;

  /* Season pills */
  --season-pill-bg:      #0d0120;
  --season-pill-active-bg:    #ff2d78;
  --season-pill-active-color: #fff;

  /* Quick stat cards */
  --quick-stat-bg:       #0d0120;
  --quick-stat-border:   #380050;
  --quick-stat-value-color: #00fff5;

  /* Match list items */
  --match-item-bg:       #0d0120;
  --match-item-border:   #380050;

  /* Chart */
  --chart-grid:          #380050;
  --chart-text:          #9d4edd;

  /* Player list */
  --player-list-item-bg: #0d0120;
  --player-list-hover:   #160230;

  /* Record tile tones */
  --tone-elo:         #ffe000;
  --tone-streak:      #ff6b35;
  --tone-performance: #00ff88;
  --tone-highlight:   #ff2d78;
  --tone-clutch:      #bd00ff;
  --tone-rivalry:     #00fff5;
  --tone-legacy:      #b8c6e8;
  --rc-texture:       rgba(0,0,0,0.06);

  /* Bootstrap variable overrides */
  --bs-body-bg:             #080010;
  --bs-body-color:          #e8d5ff;
  --bs-body-font-family:    'Share Tech Mono', 'Courier New', monospace;
  --bs-primary-rgb:         0,255,245;
  --bs-secondary-rgb:       255,45,120;
  --bs-success-rgb:         0,255,136;
  --bs-danger-rgb:          255,45,120;
  --bs-card-bg:             #0d0120;
  --bs-border-color:        #380050;
  --bs-secondary-bg:        #0d0120;
  --bs-tertiary-bg:         #09010f;
  --bs-dropdown-bg:         #0d0120;
  --bs-dropdown-border-color: #380050;
  --bs-dropdown-link-color:   #e8d5ff;
  --bs-dropdown-link-hover-bg: rgba(255,45,120,0.12);
  --bs-modal-bg:            #0d0120;
  --bs-navbar-active-color: #ffe000;
}

/* Cyberpunk — clipped card corners + scanline overlay (shared with light) */
[data-theme="cyberpunk"] .player-card,
[data-theme="default"] .player-card {
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
[data-theme="cyberpunk"] .player-card::after,
[data-theme="default"] .player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 0;
}
[data-theme="cyberpunk"] .player-card > *,
[data-theme="default"] .player-card > * { position: relative; z-index: 1; }

/* Rank-specific card glow */
[data-theme="cyberpunk"] .player-card[data-rank="1"] {
  border-color: var(--rank1-border);
  box-shadow: 0 0 18px var(--rank1-shadow), 0 0 60px rgba(255,224,0,0.12), inset 0 0 20px rgba(0,0,0,0.7);
}
[data-theme="cyberpunk"] .player-card[data-rank="2"] {
  border-color: var(--rank2-border);
  box-shadow: 0 0 14px var(--rank2-shadow), inset 0 0 20px rgba(0,0,0,0.7);
}
[data-theme="cyberpunk"] .player-card[data-rank="3"] {
  border-color: var(--rank3-border);
  box-shadow: 0 0 14px var(--rank3-shadow), inset 0 0 20px rgba(0,0,0,0.7);
}
[data-theme="default"] .player-card[data-rank="1"] {
  border-color: var(--rank1-border);
  box-shadow: 0 0 18px var(--rank1-shadow), 0 0 60px rgba(161,98,7,0.1), inset 0 0 20px rgba(0,0,0,0.04);
}
[data-theme="default"] .player-card[data-rank="2"] {
  border-color: var(--rank2-border);
  box-shadow: 0 0 14px var(--rank2-shadow), inset 0 0 20px rgba(0,0,0,0.04);
}
[data-theme="default"] .player-card[data-rank="3"] {
  border-color: var(--rank3-border);
  box-shadow: 0 0 14px var(--rank3-shadow), inset 0 0 20px rgba(0,0,0,0.04);
}

/* Cyberpunk navbar (brand wordmark styled in base.css .app-brand, variable-driven) */
[data-theme="cyberpunk"] .nav-link { color: #00fff5 !important; opacity: 0.8; }
[data-theme="cyberpunk"] .nav-link:hover { opacity: 1; color: #00fff5 !important; }
[data-theme="cyberpunk"] .nav-link.active {
  color: #ffe000 !important;
  opacity: 1;
  text-shadow: 0 0 8px rgba(255,224,0,0.4);
}

/* Light navbar — same palette */
[data-theme="default"] .nav-link { color: #0e7490 !important; opacity: 0.8; }
[data-theme="default"] .nav-link:hover { opacity: 1; color: #0e7490 !important; }
[data-theme="default"] .nav-link.active {
  color: #a16207 !important;
  opacity: 1;
  text-shadow: 0 0 8px rgba(161,98,7,0.25);
}

/* Cyberpunk Bootstrap component overrides */
[data-theme="cyberpunk"] .card {
  background: var(--card-bg);
  border-color: #380050;
}
[data-theme="cyberpunk"] .card-header {
  background: rgba(255,45,120,0.07);
  border-bottom-color: #380050;
  color: #ff2d78;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-theme="cyberpunk"] .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: #380050;
  --bs-table-color: #e8d5ff;
  --bs-table-hover-bg: rgba(255,45,120,0.05);
  --bs-table-striped-bg: rgba(255,255,255,0.02);
}
[data-theme="cyberpunk"] thead.table-light th {
  background: rgba(255,45,120,0.08) !important;
  color: #ff2d78 !important;
  border-color: #380050 !important;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="cyberpunk"] .modal-content,
[data-theme="default"] .modal-content {
  border-color: #ff2d78;
  box-shadow: 0 0 30px rgba(255,45,120,0.3);
}
[data-theme="cyberpunk"] .modal-header {
  border-bottom-color: #380050;
  color: #ff2d78;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="cyberpunk"] .modal-footer { border-top-color: #380050; }
[data-theme="cyberpunk"] .btn-close { filter: invert(1); }

/* Light Bootstrap component overrides — same palette, light border */
[data-theme="default"] .card {
  background: var(--card-bg);
  border-color: #e6d9f2;
}
[data-theme="default"] .card-header {
  background: rgba(255,45,120,0.05);
  border-bottom-color: #e6d9f2;
  color: #ff2d78;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-theme="default"] .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: #e6d9f2;
  --bs-table-color: #1a0b2e;
  --bs-table-hover-bg: rgba(255,45,120,0.04);
  --bs-table-striped-bg: rgba(0,0,0,0.015);
}
[data-theme="default"] thead.table-light th {
  background: rgba(255,45,120,0.06) !important;
  color: #ff2d78 !important;
  border-color: #e6d9f2 !important;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="default"] .modal-header {
  border-bottom-color: #e6d9f2;
  color: #ff2d78;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
[data-theme="default"] .modal-footer { border-top-color: #e6d9f2; }

/* Cyberpunk H2H cell text colors */
[data-theme="cyberpunk"] .h2h-win  { color: #00ff88 !important; }
[data-theme="cyberpunk"] .h2h-loss,
[data-theme="default"] .h2h-loss { color: #ff2d78 !important; }
[data-theme="default"] .h2h-win  { color: #047857 !important; }

/* Cyberpunk theme switcher button */
[data-theme="cyberpunk"] #themeBtn {
  border-color: #380050;
  color: #9d4edd;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="cyberpunk"] #themeBtn:hover,
[data-theme="default"] #themeBtn:hover { border-color: #ff2d78; color: #ff2d78; }

[data-theme="default"] #themeBtn {
  border-color: #e6d9f2;
  color: #9d4edd;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Cyberpunk alert */
[data-theme="cyberpunk"] .alert-warning {
  background: rgba(255,224,0,0.08);
  border-color: #ffe000;
  color: #ffe000;
}
[data-theme="default"] .alert-warning {
  background: rgba(161,98,7,0.08);
  border-color: #a16207;
  color: #a16207;
}

/* ----------------------------------------------------------------
   Cyberpunk — Match Entry page
   ---------------------------------------------------------------- */

/* P1 = cyan, P2 = magenta (shared geometry) */
[data-theme="cyberpunk"] .match-player-card,
[data-theme="default"] .match-player-card {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
/* Scanline overlay on match cards */
[data-theme="cyberpunk"] .match-player-card::after,
[data-theme="default"] .match-player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent 0px, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 0;
}
[data-theme="cyberpunk"] .match-player-card > *,
[data-theme="default"] .match-player-card > * { position: relative; z-index: 1; }

[data-theme="cyberpunk"] .match-player-card--p1 {
  border-color: #00fff5;
  box-shadow: 0 0 14px rgba(0,255,245,0.28), inset 0 0 20px rgba(0,0,0,0.65);
}
[data-theme="cyberpunk"] .match-player-card--p2 {
  border-color: #ff2d78;
  box-shadow: 0 0 14px rgba(255,45,120,0.28), inset 0 0 20px rgba(0,0,0,0.65);
}
[data-theme="cyberpunk"] .match-player-card--p1:hover {
  box-shadow: 0 0 28px rgba(0,255,245,0.55), inset 0 0 20px rgba(0,0,0,0.65);
}
[data-theme="cyberpunk"] .match-player-card--p2:hover {
  box-shadow: 0 0 28px rgba(255,45,120,0.55), inset 0 0 20px rgba(0,0,0,0.65);
}
[data-theme="default"] .match-player-card--p1 {
  border-color: #0e7490;
  box-shadow: 0 0 14px rgba(14,116,144,0.28), inset 0 0 20px rgba(0,0,0,0.03);
}
[data-theme="default"] .match-player-card--p2 {
  border-color: #ff2d78;
  box-shadow: 0 0 14px rgba(255,45,120,0.28), inset 0 0 20px rgba(0,0,0,0.03);
}
[data-theme="default"] .match-player-card--p1:hover {
  box-shadow: 0 0 28px rgba(14,116,144,0.5), inset 0 0 20px rgba(0,0,0,0.03);
}
[data-theme="default"] .match-player-card--p2:hover {
  box-shadow: 0 0 28px rgba(255,45,120,0.55), inset 0 0 20px rgba(0,0,0,0.03);
}

/* Per-player badge colours */
[data-theme="cyberpunk"] .match-player-card--p1 .mpc-badge {
  color: #00fff5; opacity: 0.9;
  font-family: 'Orbitron', sans-serif; letter-spacing: 0.15em;
}
[data-theme="cyberpunk"] .match-player-card--p2 .mpc-badge,
[data-theme="default"] .match-player-card--p2 .mpc-badge {
  color: #ff2d78; opacity: 0.9;
  font-family: 'Orbitron', sans-serif; letter-spacing: 0.15em;
}
[data-theme="default"] .match-player-card--p1 .mpc-badge {
  color: #0e7490; opacity: 0.9;
  font-family: 'Orbitron', sans-serif; letter-spacing: 0.15em;
}

/* Player name per-colour */
[data-theme="cyberpunk"] .mpc-name,
[data-theme="default"] .mpc-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}
[data-theme="cyberpunk"] .match-player-card--p1 .mpc-name {
  color: #00fff5;
  text-shadow: 0 0 8px rgba(0,255,245,0.55);
}
[data-theme="cyberpunk"] .match-player-card--p2 .mpc-name,
[data-theme="default"] .match-player-card--p2 .mpc-name {
  color: #ff2d78;
  text-shadow: 0 0 8px rgba(255,45,120,0.55);
}
[data-theme="default"] .match-player-card--p1 .mpc-name {
  color: #0e7490;
  text-shadow: 0 0 8px rgba(14,116,144,0.4);
}

/* Score input per-colour */
[data-theme="cyberpunk"] .match-player-card--p1 .score-input {
  color: #00fff5;
  border-color: rgba(0,255,245,0.25);
  text-shadow: 0 0 12px rgba(0,255,245,0.45);
}
[data-theme="cyberpunk"] .match-player-card--p2 .score-input,
[data-theme="default"] .match-player-card--p2 .score-input {
  color: #ff2d78;
  border-color: rgba(255,45,120,0.25);
  text-shadow: 0 0 12px rgba(255,45,120,0.45);
}
[data-theme="default"] .match-player-card--p1 .score-input {
  color: #0e7490;
  border-color: rgba(14,116,144,0.3);
  text-shadow: 0 0 12px rgba(14,116,144,0.3);
}
[data-theme="cyberpunk"] .match-player-card--p1 .score-input:focus {
  border-color: #00fff5;
  box-shadow: 0 0 0 2px rgba(0,255,245,0.2), 0 0 18px rgba(0,255,245,0.18);
}
[data-theme="cyberpunk"] .match-player-card--p2 .score-input:focus,
[data-theme="default"] .match-player-card--p2 .score-input:focus {
  border-color: #ff2d78;
  box-shadow: 0 0 0 2px rgba(255,45,120,0.2), 0 0 18px rgba(255,45,120,0.18);
}
[data-theme="default"] .match-player-card--p1 .score-input:focus {
  border-color: #0e7490;
  box-shadow: 0 0 0 2px rgba(14,116,144,0.2), 0 0 18px rgba(14,116,144,0.15);
}

/* Stepper buttons per-colour */
[data-theme="cyberpunk"] .score-btn,
[data-theme="default"] .score-btn { font-family: 'Orbitron', sans-serif; }
[data-theme="cyberpunk"] .match-player-card--p1 .score-btn:hover {
  border-color: #00fff5; color: #00fff5;
  box-shadow: 0 0 10px rgba(0,255,245,0.45);
}
[data-theme="cyberpunk"] .match-player-card--p2 .score-btn:hover,
[data-theme="default"] .match-player-card--p2 .score-btn:hover {
  border-color: #ff2d78; color: #ff2d78;
  box-shadow: 0 0 10px rgba(255,45,120,0.45);
}
[data-theme="default"] .match-player-card--p1 .score-btn:hover {
  border-color: #0e7490; color: #0e7490;
  box-shadow: 0 0 10px rgba(14,116,144,0.35);
}

/* H2H VS panel */
[data-theme="cyberpunk"] .hvp-vs,
[data-theme="default"] .hvp-vs {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.12em;
}
[data-theme="cyberpunk"] .hvp-w,
[data-theme="cyberpunk"] .hvp-l,
[data-theme="default"] .hvp-w,
[data-theme="default"] .hvp-l {
  font-family: 'Orbitron', sans-serif;
}
[data-theme="cyberpunk"] .hvp-title,
[data-theme="default"] .hvp-title { font-family: 'Orbitron', sans-serif; }
[data-theme="cyberpunk"] .hvp-goals,
[data-theme="default"] .hvp-goals { font-family: 'Share Tech Mono', monospace; }

/* Submit match button */
[data-theme="cyberpunk"] .btn-submit-match,
[data-theme="default"] .btn-submit-match {
  letter-spacing: 0.15em;
  box-shadow: 0 0 18px rgba(255,45,120,0.5);
}
[data-theme="cyberpunk"] .btn-submit-match:hover,
[data-theme="default"] .btn-submit-match:hover {
  box-shadow: 0 0 30px rgba(255,45,120,0.75);
}

/* Cyberpunk — bottom nav */
[data-theme="cyberpunk"] .bottom-nav {
  border-top-color: #380050;
  box-shadow: 0 -2px 20px rgba(255,45,120,0.15);
}
[data-theme="default"] .bottom-nav {
  border-top-color: #e6d9f2;
  box-shadow: 0 -2px 20px rgba(255,45,120,0.1);
}
[data-theme="cyberpunk"] .bottom-nav-tab.active {
  text-shadow: 0 0 10px rgba(0,255,245,0.6);
}
[data-theme="default"] .bottom-nav-tab.active {
  text-shadow: 0 0 10px rgba(14,116,144,0.35);
}
[data-theme="cyberpunk"] .bottom-nav-tab span,
[data-theme="cyberpunk"] .bottom-nav-tab i,
[data-theme="default"] .bottom-nav-tab span,
[data-theme="default"] .bottom-nav-tab i {
  font-family: 'Orbitron', sans-serif;
}

/* Cyberpunk — season pills */
[data-theme="cyberpunk"] .season-pill,
[data-theme="default"] .season-pill {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.06em;
}
[data-theme="cyberpunk"] .season-pill.active,
[data-theme="default"] .season-pill.active {
  box-shadow: 0 0 12px rgba(255,45,120,0.5);
}

/* Cyberpunk — champion banner */
[data-theme="cyberpunk"] .champion-banner {
  box-shadow: 0 0 20px rgba(255,224,0,0.25), inset 0 0 30px rgba(0,0,0,0.6);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
[data-theme="default"] .champion-banner {
  box-shadow: 0 0 20px rgba(161,98,7,0.2), inset 0 0 30px rgba(0,0,0,0.03);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
[data-theme="cyberpunk"] .champion-name {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 12px rgba(255,224,0,0.5);
}
[data-theme="default"] .champion-name {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 12px rgba(161,98,7,0.3);
}

/* Cyberpunk — quick stat cards */
[data-theme="cyberpunk"] .quick-stat-card {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: 0 0 8px rgba(0,255,245,0.15);
}
[data-theme="default"] .quick-stat-card {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  box-shadow: 0 0 8px rgba(14,116,144,0.15);
}
[data-theme="cyberpunk"] .quick-stat-value {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 8px rgba(0,255,245,0.4);
}
[data-theme="default"] .quick-stat-value {
  font-family: 'Orbitron', sans-serif;
  text-shadow: 0 0 8px rgba(14,116,144,0.3);
}
[data-theme="cyberpunk"] .quick-stat-label,
[data-theme="default"] .quick-stat-label {
  font-family: 'Orbitron', sans-serif;
}

/* Record plaques are fully variable-driven (modules/records.css) — both themes
   share the geometry, and only the glow strength differs. Light mode sits on
   white, so the same neon bloom that reads as "lit" on black reads as "smudged"
   here and is dialled back. */
[data-theme="default"] .record-card:hover,
[data-theme="default"] .record-card:focus-within {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--record-tone) 55%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--record-tone) 8%, transparent),
    0 8px 22px rgba(26, 11, 46, 0.1);
}
/* Every plaque is a wide banner now, covering a lot of white, so the tone
   wash behind it is halved in light mode — at dark-mode strength it stops
   reading as a tint and starts reading as a coloured block. */
[data-theme="default"] .record-card {
  background:
    radial-gradient(55% 170% at 84% 45%, color-mix(in srgb, var(--record-tone) 11%, transparent), transparent 72%),
    repeating-linear-gradient(0deg, transparent 0 3px, var(--rc-texture) 3px 4px),
    linear-gradient(120deg, color-mix(in srgb, var(--record-tone) 6%, var(--card-bg)), var(--card-bg) 58%);
}
[data-theme="default"] .record-value {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--record-tone) 78%, #fff) 0%,
    var(--record-tone) 45%,
    color-mix(in srgb, var(--record-tone) 72%, #000) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}

/* Cyberpunk — leaderboard */
[data-theme="cyberpunk"] .lb-name,
[data-theme="default"] .lb-name {
  font-family: 'Orbitron', sans-serif;
}
[data-theme="cyberpunk"] .lb-rank,
[data-theme="default"] .lb-rank {
  font-family: 'Orbitron', sans-serif;
}

/* Cyberpunk — player list */
[data-theme="cyberpunk"] .player-list-item,
[data-theme="default"] .player-list-item {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* ----------------------------------------------------------------
   FUTURE THEME SLOT — just add [data-theme="retro"] { ... } etc.
   ---------------------------------------------------------------- */