/**
 * @file theme.css
 * @description The Master Design System & Single Source of Truth (SSOT) for colors, gradients, typography, glow effects, and player attribute tokens.
 * @dependencies Google Fonts (Outfit, Rajdhani)
 */

:root {
  /* ==========================================================================
     1. SAFE AREA VIEWPORT INSETS (Mobile Notch & Home Bar)
     ========================================================================== */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* ==========================================================================
     2. CORE BACKGROUND & OBSIDIAN SURFACES (Dark Mode Hierarchy)
     ========================================================================== */
  --bg-app: #050b14;
  --bg-app-rgb: 5, 11, 20;
  --bg-dark: #070b14;
  --bg-surface-primary: rgba(11, 19, 43, 0.95);
  --bg-surface-card: rgba(15, 23, 42, 0.78);
  --bg-surface-card-hover: rgba(30, 41, 59, 0.88);
  --bg-surface-elevated: rgba(20, 32, 60, 0.85);
  --bg-surface-glass: rgba(15, 23, 42, 0.65);
  --bg-surface-glass-strong: rgba(6, 13, 29, 0.88);

  /* Blur & Glassmorphism Defaults */
  --backdrop-blur-sm: blur(8px);
  --backdrop-blur-md: blur(14px);
  --backdrop-blur-lg: blur(20px);

  /* ==========================================================================
     3. BORDERS & NEON EDGES
     ========================================================================== */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.16);
  --border-highlight: rgba(255, 255, 255, 0.32);
  --border-glow: rgba(255, 255, 255, 0.09);
  --border-focus: #00f2fe;
  --border-gold-subtle: rgba(250, 204, 21, 0.35);
  --border-gold-bright: rgba(250, 204, 21, 0.75);
  --border-cyan-subtle: rgba(0, 242, 254, 0.35);
  --border-cyan-bright: rgba(0, 242, 254, 0.75);

  /* ==========================================================================
     4. ACCENT PALETTE — GOLD & AMBER (Tournament, Tickets & Glory)
     ========================================================================== */
  --gold-300: #fef08a;
  --gold-400: #facc15;
  --gold-500: #eab308;
  --gold-600: #ca8a04;
  --gold-700: #a16207;
  --gold-800: #78350f;
  
  --gold-glow-subtle: rgba(250, 204, 21, 0.25);
  --gold-glow-medium: rgba(250, 204, 21, 0.55);
  --gold-glow-intense: 0 0 35px rgba(250, 204, 21, 0.65), 0 0 70px rgba(234, 179, 8, 0.35);

  --gold-gradient-primary: linear-gradient(180deg, #fef08a 0%, #facc15 30%, #eab308 65%, #ca8a04 100%);
  --gold-metallic-text: linear-gradient(180deg, #FFFFFF 0%, #FFF3B0 25%, #FBBF24 55%, #D97706 100%);
  --gold-btn-gradient: linear-gradient(180deg, #FFF59D 0%, #FBBF24 25%, #F59E0B 60%, #D97706 100%);

  /* ==========================================================================
     5. ACCENT PALETTE — ELECTRIC CYAN & NEON BLUE (Esports, Radar & Player 2)
     ========================================================================== */
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-neon: #00f2fe;
  --cyan-deep: #0891b2;
  
  --cyan-glow-subtle: rgba(0, 242, 254, 0.25);
  --cyan-glow-medium: rgba(0, 242, 254, 0.55);
  --cyan-glow-intense: 0 0 35px rgba(0, 242, 254, 0.65), 0 0 70px rgba(34, 211, 238, 0.35);

  --cyan-gradient-primary: linear-gradient(180deg, #a5f3fc 0%, #22d3ee 40%, #06b6d4 100%);

  /* ==========================================================================
     6. STATUS COLORS — SUCCESS, DANGER & WARNING
     ========================================================================== */
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-glow: 0 0 32px rgba(16, 185, 129, 0.6);
  --emerald-gradient: linear-gradient(180deg, #6ee7b7 0%, #10b981 50%, #059669 100%);

  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;
  --rose-glow: 0 0 32px rgba(244, 63, 94, 0.6);
  --rose-gradient: linear-gradient(180deg, #fda4af 0%, #f43f5e 50%, #be123c 100%);

  --amber-400: #fbbf24;
  --amber-500: #f59e0b;

  /* Backward Compatibility Aliases */
  --neon-cyan: var(--cyan-neon);
  --neon-blue: #38bdf8;
  --neon-green: var(--emerald-500);
  --neon-red: var(--rose-500);
  --neon-gold: var(--gold-400);
  --accent-gold: #ffd200;
  --accent-green: var(--emerald-500);
  --p1-color: #ff3366;
  --p1-glow: rgba(255, 51, 102, 0.4);
  --p2-color: #00d2ff;
  --p2-glow: rgba(0, 210, 255, 0.4);

  /* ==========================================================================
     7. PLAYER ATTRIBUTES & STATS TOKENS (Ranges: 30-100, Base: 50)
     ========================================================================== */
  /* Overall Rating (OVR) */
  --stat-ovr-color: #facc15;
  --stat-ovr-bg: linear-gradient(135deg, rgba(250, 204, 21, 0.22) 0%, rgba(15, 23, 42, 0.95) 100%);
  --stat-ovr-glow: 0 0 25px rgba(250, 204, 21, 0.6);
  --stat-ovr-border: rgba(250, 204, 21, 0.65);

  /* 🧠 Common Player (Trivia / Club Knowledge) */
  --stat-common-color: #a855f7;
  --stat-common-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.22) 0%, rgba(15, 23, 42, 0.95) 100%);
  --stat-common-glow: 0 0 22px rgba(168, 85, 247, 0.55);
  --stat-common-border: rgba(168, 85, 247, 0.65);

  /* ⚡ Speed Linking (Reflex / Quick Pairing) */
  --stat-linking-color: #00f2fe;
  --stat-linking-bg: linear-gradient(135deg, rgba(0, 242, 254, 0.22) 0%, rgba(15, 23, 42, 0.95) 100%);
  --stat-linking-glow: 0 0 22px rgba(0, 242, 254, 0.55);
  --stat-linking-border: rgba(0, 242, 254, 0.65);

  /* 🎯 Sorting Duel (Agility / Split Decision) */
  --stat-sorting-color: #f97316;
  --stat-sorting-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.22) 0%, rgba(15, 23, 42, 0.95) 100%);
  --stat-sorting-glow: 0 0 22px rgba(249, 115, 22, 0.55);
  --stat-sorting-border: rgba(249, 115, 22, 0.65);

  /* 📊 Ranking Mode (Tactical Ordering / Logic) */
  --stat-ranking-color: #10b981;
  --stat-ranking-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(15, 23, 42, 0.95) 100%);
  --stat-ranking-glow: 0 0 22px rgba(16, 185, 129, 0.55);
  --stat-ranking-border: rgba(16, 185, 129, 0.65);

  /* ==========================================================================
     8. TYPOGRAPHY & TEXT CONTRAST
     ========================================================================== */
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Rajdhani', 'Outfit', -apple-system, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-main: #f8fafc;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --text-obsidian: #060d1d; /* High contrast text on bright gold */

  /* ==========================================================================
     9. SHADOWS, ELEVATION & 3D BUTTON PRESS TOKENS
     ========================================================================== */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 242, 254, 0.05);
  --shadow-glow: 0 0 25px rgba(0, 242, 254, 0.25);

  /* 3D Master Action Button Shadows */
  --gold-btn-shadow: 0 7px 0 var(--gold-800), 0 14px 28px rgba(0, 0, 0, 0.6), 0 0 45px rgba(245, 158, 11, 0.55), inset 0 2px 1px rgba(255, 255, 255, 0.85);
  --gold-btn-shadow-hover: 0 9px 0 var(--gold-800), 0 18px 36px rgba(0, 0, 0, 0.65), 0 0 55px rgba(245, 158, 11, 0.75), inset 0 2px 1px rgba(255, 255, 255, 0.95);
  --gold-btn-shadow-active: 0 2px 0 var(--gold-800), 0 6px 15px rgba(0, 0, 0, 0.6), 0 0 25px rgba(245, 158, 11, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.3);

  --cyan-btn-shadow: 0 6px 0 #0e7490, 0 12px 24px rgba(0, 0, 0, 0.55), 0 0 35px rgba(0, 242, 254, 0.45), inset 0 2px 1px rgba(255, 255, 255, 0.8);
  --cyan-btn-shadow-hover: 0 8px 0 #0e7490, 0 16px 32px rgba(0, 0, 0, 0.6), 0 0 45px rgba(0, 242, 254, 0.65), inset 0 2px 1px rgba(255, 255, 255, 0.9);
  --cyan-btn-shadow-active: 0 2px 0 #0e7490, 0 5px 12px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 242, 254, 0.35), inset 0 1px 1px rgba(0, 0, 0, 0.3);

  /* ==========================================================================
     10. CORNER RADIUS TOKENS
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ==========================================================================
     11. ANIMATION & TIMING TOKENS
     ========================================================================== */
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   12. REUSABLE THEME UTILITY CLASSES (Applied Everywhere)
   ========================================================================== */

/* Glass Card Surfaces */
.theme-surface-glass {
  background: var(--bg-surface-glass);
  backdrop-filter: var(--backdrop-blur-md);
  -webkit-backdrop-filter: var(--backdrop-blur-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.theme-surface-glass-strong {
  background: var(--bg-surface-glass-strong);
  backdrop-filter: var(--backdrop-blur-lg);
  -webkit-backdrop-filter: var(--backdrop-blur-lg);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
}

/* Neon Text Highlights */
.theme-text-gold {
  color: var(--gold-400);
  text-shadow: 0 0 16px var(--gold-glow-medium);
}

.theme-text-cyan {
  color: var(--cyan-neon);
  text-shadow: 0 0 16px var(--cyan-glow-medium);
}

.theme-text-emerald {
  color: var(--emerald-400);
  text-shadow: 0 0 16px var(--emerald-glow);
}

.theme-text-gold-metallic {
  background: var(--gold-metallic-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Master Action Button Preset: Luminous Golden Parallelogram */
.theme-btn-gold-master {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--gold-gradient-primary);
  color: var(--text-obsidian);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--gold-btn-shadow);
  cursor: pointer;
  transform: skewX(-4deg);
  transition: var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
}

.theme-btn-gold-master > * {
  transform: skewX(4deg);
}

.theme-btn-gold-master:hover {
  box-shadow: var(--gold-btn-shadow-hover);
  transform: skewX(-4deg) translateY(-2px);
  filter: brightness(1.05);
}

.theme-btn-gold-master:active {
  box-shadow: var(--gold-btn-shadow-active);
  transform: skewX(-4deg) translateY(3px);
  filter: brightness(0.95);
}

/* Secondary Action Button Preset: Cyan Cyber Button */
.theme-btn-cyan-master {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--cyan-gradient-primary);
  color: var(--text-obsidian);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--cyan-btn-shadow);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
}

.theme-btn-cyan-master:hover {
  box-shadow: var(--cyan-btn-shadow-hover);
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.theme-btn-cyan-master:active {
  box-shadow: var(--cyan-btn-shadow-active);
  transform: translateY(2px);
  filter: brightness(0.92);
}

/* Player Attribute Stat Pill (30-100 Rating Badge) */
.theme-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  background: var(--bg-surface-glass-strong);
  border: 1px solid var(--border-subtle);
}

.theme-stat-pill.is-ovr {
  background: var(--stat-ovr-bg);
  border-color: var(--stat-ovr-border);
  color: var(--stat-ovr-color);
  box-shadow: var(--stat-ovr-glow);
}

.theme-stat-pill.is-common {
  background: var(--stat-common-bg);
  border-color: var(--stat-common-border);
  color: var(--stat-common-color);
  box-shadow: var(--stat-common-glow);
}

.theme-stat-pill.is-linking {
  background: var(--stat-linking-bg);
  border-color: var(--stat-linking-border);
  color: var(--stat-linking-color);
  box-shadow: var(--stat-linking-glow);
}

.theme-stat-pill.is-sorting {
  background: var(--stat-sorting-bg);
  border-color: var(--stat-sorting-border);
  color: var(--stat-sorting-color);
  box-shadow: var(--stat-sorting-glow);
}

.theme-stat-pill.is-ranking {
  background: var(--stat-ranking-bg);
  border-color: var(--stat-ranking-border);
  color: var(--stat-ranking-color);
  box-shadow: var(--stat-ranking-glow);
}