/**
 * Free Prog Rock (FPR) - Custom Styles & Advanced Theming Engine
 * Includes: 6 Color Palettes, 6 Typographies, Turntable Tone-arm, Holo-cards & Mobile Touch Optimizations
 */

:root {
  /* Preset 1: Cyber Solana (Default) */
  --color-primary: #9945FF;
  --color-primary-rgb: 153, 69, 255;
  --color-primary-glow: rgba(153, 69, 255, 0.45);
  --color-secondary: #14F195;
  --color-secondary-rgb: 20, 241, 149;
  --color-secondary-glow: rgba(20, 241, 149, 0.35);
  --color-accent: #00F0FF;
  --color-bg-base: #0a0b10;
  --color-bg-surface: #12141e;
  --color-bg-card: rgba(22, 26, 39, 0.8);
  --color-border: rgba(153, 69, 255, 0.25);
  --color-border-hover: rgba(20, 241, 149, 0.6);
  --color-text-main: #f8fafc;
  --color-text-muted: #94a3b8;
  --card-radius: 1rem;
  --font-heading: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;
  --glow-blur: 24px;
}

/* Preset 2: Crimson Rock & Neon */
[data-theme="crimson-rock"] {
  --color-primary: #FA366C;
  --color-primary-rgb: 250, 54, 108;
  --color-primary-glow: rgba(250, 54, 108, 0.5);
  --color-secondary: #FF2A54;
  --color-secondary-rgb: 255, 42, 84;
  --color-secondary-glow: rgba(255, 42, 84, 0.4);
  --color-accent: #FF8BA7;
  --color-bg-base: #0b0b0e;
  --color-bg-surface: #15151b;
  --color-bg-card: rgba(26, 26, 35, 0.85);
  --color-border: rgba(250, 54, 108, 0.3);
  --color-border-hover: rgba(250, 54, 108, 0.7);
  --color-text-main: #ffffff;
  --color-text-muted: #a1a1aa;
}

/* Preset 3: Vintage Gold & Vinyl */
[data-theme="vintage-gold"] {
  --color-primary: #F59E0B;
  --color-primary-rgb: 245, 158, 11;
  --color-primary-glow: rgba(245, 158, 11, 0.45);
  --color-secondary: #D97706;
  --color-secondary-rgb: 217, 119, 6;
  --color-secondary-glow: rgba(217, 119, 6, 0.35);
  --color-accent: #FDE68A;
  --color-bg-base: #0e0c08;
  --color-bg-surface: #1a1711;
  --color-bg-card: rgba(33, 29, 21, 0.85);
  --color-border: rgba(245, 158, 11, 0.3);
  --color-border-hover: rgba(245, 158, 11, 0.7);
  --color-text-main: #fffbeb;
  --color-text-muted: #a8a29e;
}

/* Preset 4: Electric Blue Matrix */
[data-theme="electric-blue"] {
  --color-primary: #00D2FF;
  --color-primary-rgb: 0, 210, 255;
  --color-primary-glow: rgba(0, 210, 255, 0.5);
  --color-secondary: #3B82F6;
  --color-secondary-rgb: 59, 130, 246;
  --color-secondary-glow: rgba(59, 130, 246, 0.4);
  --color-accent: #67E8F9;
  --color-bg-base: #030712;
  --color-bg-surface: #0c142b;
  --color-bg-card: rgba(16, 25, 48, 0.85);
  --color-border: rgba(0, 210, 255, 0.3);
  --color-border-hover: rgba(0, 210, 255, 0.7);
  --color-text-main: #f0fdf4;
  --color-text-muted: #94a3b8;
}

/* Preset 5: Emerald Synthwave */
[data-theme="emerald-synth"] {
  --color-primary: #10B981;
  --color-primary-rgb: 16, 185, 129;
  --color-primary-glow: rgba(16, 185, 129, 0.5);
  --color-secondary: #06B6D4;
  --color-secondary-rgb: 6, 182, 212;
  --color-secondary-glow: rgba(6, 182, 212, 0.4);
  --color-accent: #A7F3D0;
  --color-bg-base: #04100c;
  --color-bg-surface: #0a1f18;
  --color-bg-card: rgba(13, 36, 28, 0.85);
  --color-border: rgba(16, 185, 129, 0.3);
  --color-border-hover: rgba(16, 185, 129, 0.75);
  --color-text-main: #ecfdf5;
  --color-text-muted: #99f6e4;
}

/* Preset 6: Psychedelic Purple & Astral */
[data-theme="psychedelic-purple"] {
  --color-primary: #C084FC;
  --color-primary-rgb: 192, 132, 252;
  --color-primary-glow: rgba(192, 132, 252, 0.5);
  --color-secondary: #F43F5E;
  --color-secondary-rgb: 244, 63, 94;
  --color-secondary-glow: rgba(244, 63, 94, 0.4);
  --color-accent: #FB7185;
  --color-bg-base: #0f0717;
  --color-bg-surface: #1e0f2e;
  --color-bg-card: rgba(35, 18, 54, 0.85);
  --color-border: rgba(192, 132, 252, 0.3);
  --color-border-hover: rgba(244, 63, 94, 0.7);
  --color-text-main: #faf5ff;
  --color-text-muted: #e9d5ff;
}

/* Global Reset & Base */
body {
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  font-family: var(--font-body);
  overflow-x: hidden;
  transition: background-color 0.35s ease, color 0.35s ease;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading);
}

/* Dynamic CSS Utility Classes */
.bg-theme-base { background-color: var(--color-bg-base); }
.bg-theme-surface { background-color: var(--color-bg-surface); }
.bg-theme-card {
  background-color: var(--color-bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.text-theme-primary { color: var(--color-primary); }
.text-theme-secondary { color: var(--color-secondary); }
.text-theme-accent { color: var(--color-accent); }
.text-theme-muted { color: var(--color-text-muted); }

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

.glow-primary {
  box-shadow: 0 0 var(--glow-blur) var(--color-primary-glow);
}
.glow-primary-hover:hover {
  box-shadow: 0 0 calc(var(--glow-blur) * 1.5) var(--color-primary-glow);
}
.glow-secondary {
  box-shadow: 0 0 var(--glow-blur) var(--color-secondary-glow);
}

.btn-primary-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #ffffff;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--color-primary-glow);
}

.btn-outline-theme {
  border: 1px solid var(--color-primary);
  color: var(--color-text-main);
  transition: all 0.3s ease;
}
.btn-outline-theme:hover {
  background-color: rgba(var(--color-primary-rgb), 0.18);
  border-color: var(--color-secondary);
  box-shadow: 0 0 18px var(--color-primary-glow);
}

/* Pulse Live Badge */
.badge-live-pulse {
  animation: livePulse 1.8s infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Floating Coin 3D Animations */
.coin-3d-wrap {
  perspective: 1000px;
}
.coin-3d {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
  animation: coinFloat 5s ease-in-out infinite;
}
.coin-3d:hover {
  transform: rotateY(22deg) rotateX(12deg) scale(1.04);
}
@keyframes coinFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1.5deg); }
}

/* Turntable & Vinyl Tone-arm */
.turntable-box {
  background: radial-gradient(circle at center, #1b1c24 0%, #0c0d12 100%);
  border: 2px solid rgba(255, 255, 255, 0.12);
  position: relative;
}
.turntable-arm {
  position: absolute;
  top: 15px;
  right: 25px;
  width: 14px;
  height: 110px;
  transform-origin: top center;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
}
.turntable-arm.playing {
  transform: rotate(26deg);
}
.turntable-arm.paused {
  transform: rotate(0deg);
}

/* Vinyl Spin */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-slow {
  animation: spinSlow 12s linear infinite;
}
.spin-paused {
  animation-play-state: paused;
}

/* Soundwave Equalizer Bars */
.soundwave-bar {
  animation: soundwave 1.2s ease-in-out infinite alternate;
}
.soundwave-bar:nth-child(2) { animation-delay: 0.15s; }
.soundwave-bar:nth-child(3) { animation-delay: 0.3s; }
.soundwave-bar:nth-child(4) { animation-delay: 0.45s; }
.soundwave-bar:nth-child(5) { animation-delay: 0.2s; }
.soundwave-bar:nth-child(6) { animation-delay: 0.35s; }
@keyframes soundwave {
  0% { height: 4px; }
  100% { height: 28px; }
}

/* Glass Card */
.glass-panel {
  background: rgba(18, 22, 35, 0.75);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  transition: all 0.3s ease;
}
.glass-panel:hover {
  border-color: var(--color-border-hover);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
}

/* Holographic Tilt Shimmer Card */
.holo-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.holo-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
}
.holo-card:hover::before {
  opacity: 1;
}

/* Marquee News Ticker */
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-content {
  display: inline-block;
  animation: marqueeScroll 35s linear infinite;
}
.marquee-content:hover {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Gradient Text */
.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Background Particle Canvas Layer */
#bg-particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  opacity: 0.65;
  transition: opacity 0.4s ease;
}

/* Mobile & Touch Optimizations */
@media (max-width: 640px) {
  .btn-primary-gradient, .btn-outline-theme {
    min-height: 44px;
  }
  #radio-bottom-bar {
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }
}

/* ==========================================================================
   ARQUETIPO DISRUPTIVO 1: BRUTALIST CYBER-ROCK (Industrial, Fanzine, Hard-Edge)
   ========================================================================== */
[data-design-mode="brutalist"] {
  --card-radius: 0px !important;
  --glow-blur: 0px !important;
}

[data-design-mode="brutalist"] body {
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}

[data-design-mode="brutalist"] .glass-panel {
  background: #0f1015 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 2px solid var(--color-primary) !important;
  box-shadow: 6px 6px 0px var(--color-secondary) !important;
  border-radius: 0px !important;
  transform: none !important;
}

[data-design-mode="brutalist"] .glass-panel:hover {
  box-shadow: 8px 8px 0px var(--color-secondary) !important;
  transform: translate(-2px, -2px) !important;
}

[data-design-mode="brutalist"] .btn-primary-gradient {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border-radius: 0px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 4px 4px 0px var(--color-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 900 !important;
}

[data-design-mode="brutalist"] .btn-primary-gradient:hover {
  box-shadow: 2px 2px 0px var(--color-secondary) !important;
  transform: translate(2px, 2px) !important;
}

[data-design-mode="brutalist"] .btn-outline-theme {
  border-radius: 0px !important;
  border: 2px solid var(--color-primary) !important;
  background: #181920 !important;
  box-shadow: 4px 4px 0px #000000 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

[data-design-mode="brutalist"] .btn-outline-theme:hover {
  box-shadow: 2px 2px 0px #000000 !important;
  transform: translate(2px, 2px) !important;
}

[data-design-mode="brutalist"] .turntable-box {
  border-radius: 0px !important;
  border: 3px solid var(--color-primary) !important;
  box-shadow: 8px 8px 0px var(--color-secondary) !important;
  background: #14151c !important;
}

[data-design-mode="brutalist"] .turntable-box::before {
  content: '[ FLIGHT_CASE // RACK_UNIT ]';
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: monospace;
  font-size: 10px;
  font-weight: bold;
  color: var(--color-primary);
}

[data-design-mode="brutalist"] .marquee-wrapper {
  background: var(--color-primary) !important;
  color: #000000 !important;
  border-bottom: 2px solid #ffffff !important;
  font-weight: 900 !important;
}

[data-design-mode="brutalist"] .marquee-wrapper span {
  color: #000000 !important;
}

/* ==========================================================================
   ARQUETIPO DISRUPTIVO 2: COSMIC SCI-FI / RETRO SYNTH-PROG (Scanlines & Prism)
   ========================================================================== */
[data-design-mode="retro-scifi"] {
  --glow-blur: 38px !important;
  --card-radius: 1.25rem !important;
}

[data-design-mode="retro-scifi"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 38, 0) 50%, rgba(0, 0, 0, 0.4) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  z-index: 99;
  opacity: 0.65;
}

[data-design-mode="retro-scifi"] .glass-panel {
  background: rgba(14, 11, 31, 0.88) !important;
  border: 1px solid transparent !important;
  background-image: linear-gradient(rgba(14, 11, 31, 0.88), rgba(14, 11, 31, 0.88)), linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent)) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 0 28px rgba(var(--color-primary-rgb), 0.35), inset 0 0 16px rgba(var(--color-secondary-rgb), 0.12) !important;
}

[data-design-mode="retro-scifi"] .glass-panel:hover {
  box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.55), inset 0 0 22px rgba(var(--color-accent), 0.25) !important;
}

[data-design-mode="retro-scifi"] .btn-primary-gradient {
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  border-radius: 0px !important;
  box-shadow: 0 0 25px var(--color-primary-glow) !important;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[data-design-mode="retro-scifi"] .btn-outline-theme {
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
  border-radius: 0px !important;
  background: rgba(var(--color-primary-rgb), 0.15) !important;
}

[data-design-mode="retro-scifi"] .turntable-box {
  background: radial-gradient(circle at center, #261645 0%, #0c071d 100%) !important;
  border: 2px solid var(--color-primary) !important;
  box-shadow: 0 0 35px var(--color-primary-glow) !important;
}

/* ==========================================================================
   ARQUETIPO DISRUPTIVO 3: AUDIOPHILE MINIMAL LOUNGE (Swiss Editorial, High-Fi)
   ========================================================================== */
[data-design-mode="minimal-editorial"] {
  --glow-blur: 0px !important;
  --card-radius: 0.5rem !important;
  --color-border: rgba(255, 255, 255, 0.07) !important;
  --color-border-hover: rgba(255, 255, 255, 0.22) !important;
}

[data-design-mode="minimal-editorial"] body {
  background-color: #0a0b0d !important;
  background-image: none !important;
}

[data-design-mode="minimal-editorial"] #bg-particle-canvas {
  display: none !important;
}

[data-design-mode="minimal-editorial"] .glass-panel {
  background: #121317 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  border-radius: 0.5rem !important;
}

[data-design-mode="minimal-editorial"] .glass-panel:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9) !important;
}

[data-design-mode="minimal-editorial"] .btn-primary-gradient {
  background: #f8fafc !important;
  color: #090a0f !important;
  box-shadow: none !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  border: none !important;
}

[data-design-mode="minimal-editorial"] .btn-primary-gradient:hover {
  background: #e2e8f0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15) !important;
}

[data-design-mode="minimal-editorial"] .btn-outline-theme {
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-design-mode="minimal-editorial"] .btn-outline-theme:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-design-mode="minimal-editorial"] .text-gradient {
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
}

[data-design-mode="minimal-editorial"] .turntable-box {
  background: #111216 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
}