/* ==========================================================================
   VERITAS / CHAT OVERLAY — MULTI-THEME ENGINE & DESIGN SYSTEM TOKENS
   Themes: F1 Telemetry (Default) | Cyber HUD | Minimal Glass | Retro Arcade
   ========================================================================== */

/* === GOOGLE FONTS PREFETCH & IMPORT === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&family=Titillium+Web:wght@300;400;600;700;900&family=VT323&display=swap');

/* ==========================================================================
   1. BASE DYNAMIC CSS VARIABLES & FALLBACKS
   ========================================================================== */
:root {
  --theme-primary: var(--f1-red, #d80d0d);
  --theme-accent: var(--f1-green, #00d2be);
  --theme-bg: var(--bg-dark, #0f1014);
  --theme-panel: var(--bg-panel, #1a1a2e);
  --theme-font: "Titillium Web", sans-serif;
  --theme-border-radius: 0px;
  --theme-glow: none;
}

/* ==========================================================================
   2. THEME DEFINITIONS
   ========================================================================== */

/* ─── THEME 1: F1 TELEMETRY RACING (DEFAULT / CANONICAL) ─── */
:root[data-theme="f1"],
body.theme-f1 {
  --theme-primary: #d80d0d;
  --theme-accent: #00d2be;
  --theme-bg: #0f1014;
  --theme-panel: #1a1a2e;
  --theme-font: "Titillium Web", sans-serif;
  --theme-border-radius: 0px;
  --theme-glow: none;

  --f1-red: #d80d0d;
  --f1-green: #00d2be;
  --f1-yellow: #ffd700;
  --bg-dark: #0f1014;
  --bg-panel: #1a1a2e;
  --bg-overlay: rgba(21, 21, 30, 0.85);
  --text-bright: #ffffff;
  --text-dim: rgba(255, 255, 255, 0.7);
  --xp-primary: #d80d0d;
  --xp-accent: #8A29A4;
}

/* ─── THEME 2: CYBERPUNK HUD (CYBER) ─── */
:root[data-theme="cyber"],
body.theme-cyber {
  --theme-primary: #fcee0a;
  --theme-accent: #00f6ff;
  --theme-bg: #090a10;
  --theme-panel: #12131f;
  --theme-font: "Orbitron", "JetBrains Mono", sans-serif;
  --theme-border-radius: 2px;
  --theme-glow: 0 0 12px rgba(0, 246, 255, 0.45);

  --f1-red: #fcee0a;
  --f1-red-rgb: 252, 238, 10;
  --f1-green: #00f6ff;
  --f1-green-rgb: 0, 246, 255;
  --f1-yellow: #fcee0a;
  --f1-yellow-rgb: 252, 238, 10;
  --f1-blue: #00f6ff;
  --f1-purple: #ff0055;
  --bg-dark: #090a10;
  --bg-panel: #12131f;
  --bg-overlay: rgba(9, 10, 16, 0.92);
  --bg-solid: rgba(9, 10, 16, 0.98);
  --text-bright: #fcee0a;
  --text-dim: #94a3b8;
  --xp-primary: #fcee0a;
  --xp-accent: #00f6ff;
  --font-f1turbo: "Orbitron", sans-serif;
  --font-orbitron: "Orbitron", sans-serif;
  --font-rajdhani: "Orbitron", sans-serif;
}

body.theme-cyber .container {
  border: 1px solid rgba(0, 246, 255, 0.35);
  box-shadow: 0 0 20px rgba(0, 246, 255, 0.15), inset 0 0 15px rgba(252, 238, 10, 0.05);
  background: linear-gradient(135deg, rgba(9, 10, 16, 0.95) 0%, rgba(18, 19, 31, 0.9) 100%);
  position: relative;
}

body.theme-cyber .container::before {
  content: "HUD_SYS_V2.0";
  position: absolute;
  top: -9px;
  right: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  color: #00f6ff;
  background: #090a10;
  padding: 0 6px;
  letter-spacing: 1px;
  border: 1px solid rgba(0, 246, 255, 0.4);
}

body.theme-cyber .status-bar {
  border-bottom: 1px solid rgba(0, 246, 255, 0.25);
  background: rgba(0, 246, 255, 0.04);
}

body.theme-cyber .status-code {
  color: #00f6ff;
  text-shadow: 0 0 8px rgba(0, 246, 255, 0.6);
}

body.theme-cyber .user-identity__name {
  color: #fcee0a !important;
  text-shadow: 0 0 10px rgba(252, 238, 10, 0.5);
  font-family: "Orbitron", sans-serif !important;
}

body.theme-cyber .xp-bar__fill {
  background: linear-gradient(90deg, #fcee0a 0%, #00f6ff 100%) !important;
  box-shadow: 0 0 10px rgba(0, 246, 255, 0.7);
}

/* ─── THEME 3: MINIMAL GLASSMORPHISM (MINIMAL) ─── */
:root[data-theme="minimal"],
body.theme-minimal {
  --theme-primary: #38bdf8;
  --theme-accent: #818cf8;
  --theme-bg: rgba(15, 17, 23, 0.72);
  --theme-panel: rgba(30, 35, 48, 0.55);
  --theme-font: "Inter", sans-serif;
  --theme-border-radius: 12px;
  --theme-glow: 0 8px 32px rgba(0, 0, 0, 0.4);

  --f1-red: #38bdf8;
  --f1-red-rgb: 56, 189, 248;
  --f1-green: #34d399;
  --f1-green-rgb: 52, 211, 153;
  --f1-yellow: #fbbf24;
  --f1-yellow-rgb: 251, 191, 36;
  --f1-blue: #38bdf8;
  --f1-purple: #818cf8;
  --bg-dark: rgba(15, 17, 23, 0.72);
  --bg-panel: rgba(30, 35, 48, 0.55);
  --bg-overlay: rgba(15, 17, 23, 0.75);
  --bg-solid: #0f1117;
  --text-bright: #f8fafc;
  --text-dim: #94a3b8;
  --xp-primary: #38bdf8;
  --xp-accent: #818cf8;
  --font-f1turbo: "Inter", sans-serif;
  --font-orbitron: "Inter", sans-serif;
  --font-rajdhani: "Inter", sans-serif;
}

body.theme-minimal .container {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  background: rgba(15, 17, 23, 0.72);
}

body.theme-minimal .status-bar {
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

body.theme-minimal .user-identity__name {
  color: #f8fafc !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-shadow: none !important;
}

body.theme-minimal .xp-bar__track {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

body.theme-minimal .xp-bar__fill {
  border-radius: 6px;
  background: linear-gradient(90deg, #38bdf8 0%, #818cf8 100%) !important;
}

/* ─── THEME 4: RETRO ARCADE 80s/90s (RETRO / ARCADE) ─── */
:root[data-theme="retro"],
:root[data-theme="arcade"],
body.theme-retro,
body.theme-arcade {
  --theme-primary: #ff007f;
  --theme-accent: #39ff14;
  --theme-bg: #0d0221;
  --theme-panel: #1d0938;
  --theme-font: "Share Tech Mono", monospace;
  --theme-border-radius: 0px;
  --theme-glow: 0 0 10px rgba(255, 0, 127, 0.5);

  --f1-red: #ff007f;
  --f1-red-rgb: 255, 0, 127;
  --f1-green: #39ff14;
  --f1-green-rgb: 57, 255, 20;
  --f1-yellow: #ffe600;
  --f1-yellow-rgb: 255, 230, 0;
  --f1-blue: #00e5ff;
  --f1-purple: #9d00ff;
  --bg-dark: #0d0221;
  --bg-panel: #1d0938;
  --bg-overlay: rgba(13, 2, 33, 0.94);
  --bg-solid: #0d0221;
  --text-bright: #00e5ff;
  --text-dim: #ffb3ff;
  --xp-primary: #ff007f;
  --xp-accent: #39ff14;
  --font-f1turbo: "Share Tech Mono", monospace;
  --font-orbitron: "Share Tech Mono", monospace;
  --font-rajdhani: "Share Tech Mono", monospace;
}

body.theme-retro .container,
body.theme-arcade .container {
  border: 2px dashed #ff007f;
  box-shadow: 0 0 15px rgba(255, 0, 127, 0.35), inset 0 0 20px rgba(13, 2, 33, 0.8);
  background: #0d0221;
  position: relative;
}

body.theme-retro .container::after,
body.theme-arcade .container::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 10;
}

body.theme-retro .user-identity__name,
body.theme-arcade .user-identity__name {
  color: #00e5ff !important;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.7), 2px 2px #ff007f;
  font-family: "Share Tech Mono", monospace !important;
}

body.theme-retro .xp-bar__fill,
body.theme-arcade .xp-bar__fill {
  background: linear-gradient(90deg, #ff007f 0%, #39ff14 100%) !important;
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
}

/* ==========================================================================
   3. MODULAR COMPONENT VISIBILITY TOGGLES
   ========================================================================== */

/* Barra de Estado / LEDs */
body.hide-statusbar .status-bar,
:root[data-hide-statusbar="true"] .status-bar {
  display: none !important;
}

/* Badges de Twitch */
body.hide-badges .user-identity__badges,
:root[data-hide-badges="true"] .user-identity__badges {
  display: none !important;
}

/* Barra de XP y Nivel */
body.hide-xp .xp-display,
body.hide-xp #xp-section,
:root[data-hide-xp="true"] .xp-display,
:root[data-hide-xp="true"] #xp-section {
  display: none !important;
}

/* Banner de Aviso Fijado (Pinned Announcement) */
body.hide-pinned #pinned-announcement,
:root[data-hide-pinned="true"] #pinned-announcement {
  display: none !important;
}

/* Notificaciones de Logros */
body.hide-achievements #achievements-container,
body.hide-achievements .achievement-card,
:root[data-hide-achievements="true"] #achievements-container,
:root[data-hide-achievements="true"] .achievement-card {
  display: none !important;
}

/* Boost de Carrera / Live Race Mode */
body.hide-race-mode #race-mode-badge,
:root[data-hide-race-mode="true"] #race-mode-badge {
  display: none !important;
}