/**
 * Enhanced Theme System for Christina's Board Game App
 * Contains all 8 theme variants with immersive visual elements
 * Retro, Space, Modern, Fantasy × Light/Dark
 */

/* =================================================================
   RETRO DARK (Default)
   8-bit gaming aesthetic with pixel art patterns
   ================================================================= */
:root.theme-retro-dark,
body.theme-retro-dark {
  --color-bg: #1F2937;
  --color-bg-secondary: #2c3e50;
  --color-text: #F9FAFB;
  --color-accent: #3B82F6;
  --color-highlight: #F59E0B;
  --color-highlight-hover: #D97706;
  --color-success: #27ae60;
  --color-danger: #e74c3c;
  --font-main: 'Press Start 2P', 'Courier New', monospace;
  --radius: 4px;
  --shadow: 4px 4px 0 rgba(0,0,0,0.25);
}

body.theme-retro-dark {
  background-color: #1F2937;
  background-image:
    /* Pixel grid pattern */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 4px,
      rgba(59, 130, 246, 0.03) 4px,
      rgba(59, 130, 246, 0.03) 8px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 4px,
      rgba(59, 130, 246, 0.03) 4px,
      rgba(59, 130, 246, 0.03) 8px
    ),
    /* Diagonal stripes for texture */
    repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 2px,
      transparent 2px,
      transparent 4px
    );
  position: relative;
}

/* Retro scanline effect */
body.theme-retro-dark::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    transparent 1px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 3px
  );
  pointer-events: none;
  z-index: 999;
  opacity: 0.5;
}

/* Pixel art corner decorations */
.theme-retro-dark .main-container::before,
.theme-retro-dark .main-container::after {
  content: '';
  position: fixed;
  width: 80px;
  height: 80px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect fill="%23F59E0B" x="0" y="0" width="4" height="4"/><rect fill="%233B82F6" x="4" y="0" width="4" height="4"/><rect fill="%23F59E0B" x="0" y="4" width="4" height="4"/><rect fill="%2327ae60" x="8" y="0" width="4" height="4"/><rect fill="%233B82F6" x="8" y="4" width="4" height="4"/><rect fill="%23F59E0B" x="4" y="8" width="4" height="4"/><rect fill="%2327ae60" x="0" y="8" width="4" height="4"/></svg>');
  opacity: 0.3;
  pointer-events: none;
}

.theme-retro-dark .main-container::before {
  top: 80px;
  left: 20px;
}

.theme-retro-dark .main-container::after {
  bottom: 20px;
  right: 20px;
  transform: rotate(180deg);
}

/* =================================================================
   RETRO LIGHT
   8-bit gaming aesthetic with light background
   ================================================================= */
:root.theme-retro-light,
body.theme-retro-light {
  --color-bg: #F3F4F6;
  --color-bg-secondary: #E5E7EB;
  --color-text: #111827;
  --color-accent: #2563EB;
  --color-highlight: #F59E0B;
  --color-highlight-hover: #D97706;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --font-main: 'Press Start 2P', 'Courier New', monospace;
  --radius: 4px;
  --shadow: 4px 4px 0 rgba(0,0,0,0.15);
}

body.theme-retro-light {
  background-color: #F3F4F6;
  background-image:
    /* Pixel grid */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 4px,
      rgba(37, 99, 235, 0.05) 4px,
      rgba(37, 99, 235, 0.05) 8px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 4px,
      rgba(37, 99, 235, 0.05) 4px,
      rgba(37, 99, 235, 0.05) 8px
    ),
    /* Arcade cabinet pattern */
    radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
}

/* Pixel art decorations for light theme */
.theme-retro-light .main-container::before,
.theme-retro-light .main-container::after {
  content: '';
  position: fixed;
  width: 80px;
  height: 80px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect fill="%232563EB" x="0" y="0" width="4" height="4"/><rect fill="%23F59E0B" x="4" y="0" width="4" height="4"/><rect fill="%2310b981" x="8" y="0" width="4" height="4"/><rect fill="%232563EB" x="0" y="4" width="4" height="4"/><rect fill="%2310b981" x="4" y="4" width="4" height="4"/><rect fill="%23F59E0B" x="8" y="4" width="4" height="4"/><rect fill="%23F59E0B" x="0" y="8" width="4" height="4"/><rect fill="%232563EB" x="4" y="8" width="4" height="4"/></svg>');
  opacity: 0.2;
  pointer-events: none;
}

.theme-retro-light .main-container::before {
  top: 80px;
  right: 20px;
}

.theme-retro-light .main-container::after {
  bottom: 20px;
  left: 20px;
  transform: rotate(180deg);
}

/* =================================================================
   SPACE DARK
   Sci-fi futuristic with cosmic backgrounds and stars
   ================================================================= */
:root.theme-space-dark,
body.theme-space-dark {
  --color-bg: #0a0e27;
  --color-bg-secondary: #1a1f3a;
  --color-text: #e0e7ff;
  --color-accent: #6366f1;
  --color-highlight: #22d3ee;
  --color-highlight-hover: #06b6d4;
  --color-success: #34d399;
  --color-danger: #f43f5e;
  --color-glow: #8b5cf6;
  --color-star: #fbbf24;
  --font-main: 'Orbitron', 'Exo 2', -apple-system, sans-serif;
  --radius: 8px;
  --shadow: 0 0 20px var(--color-glow);
}

body.theme-space-dark {
  background:
    /* Stars - small */
    radial-gradient(1px 1px at 20% 30%, white, transparent),
    radial-gradient(1px 1px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    radial-gradient(1px 1px at 90% 60%, white, transparent),
    radial-gradient(1px 1px at 33% 80%, white, transparent),
    radial-gradient(1px 1px at 75% 40%, white, transparent),
    radial-gradient(1px 1px at 15% 90%, white, transparent),
    /* Stars - medium */
    radial-gradient(2px 2px at 40% 20%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 70% 85%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 10% 60%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 88% 45%, rgba(255, 255, 255, 0.8), transparent),
    /* Nebula effects */
    radial-gradient(ellipse at 30% 70%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(34, 211, 238, 0.08) 0%, transparent 60%),
    /* Base gradient */
    linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
  background-size:
    200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%,
    300% 300%, 300% 300%, 300% 300%, 300% 300%,
    100% 100%, 100% 100%, 100% 100%,
    100% 100%;
  animation: twinkle 3s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0%, 100% {
    background-position:
      0% 0%, 100% 100%, 50% 50%, 80% 20%, 90% 60%, 30% 80%, 70% 40%, 10% 90%,
      40% 20%, 70% 85%, 10% 60%, 88% 45%,
      30% 70%, 70% 30%, 50% 50%,
      0% 0%;
  }
  50% {
    background-position:
      100% 100%, 0% 0%, 60% 40%, 70% 30%, 80% 70%, 40% 70%, 80% 30%, 20% 80%,
      50% 30%, 60% 75%, 20% 50%, 78% 55%,
      35% 65%, 65% 35%, 55% 45%,
      0% 0%;
  }
}

/* Futuristic grid overlay */
body.theme-space-dark::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 49px,
      rgba(99, 102, 241, 0.1) 49px,
      rgba(99, 102, 241, 0.1) 50px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 49px,
      rgba(99, 102, 241, 0.1) 49px,
      rgba(99, 102, 241, 0.1) 50px
    );
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* Cosmic corner decorations */
.theme-space-dark .main-container::after {
  content: '';
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="none" stroke="%236366f1" stroke-width="1" opacity="0.3"/><circle cx="50" cy="50" r="20" fill="none" stroke="%2322d3ee" stroke-width="1" opacity="0.4"/><circle cx="50" cy="50" r="10" fill="none" stroke="%238b5cf6" stroke-width="1" opacity="0.5"/><path d="M50 20 L50 80 M20 50 L80 50" stroke="%2322d3ee" stroke-width="0.5" opacity="0.3"/></svg>');
  opacity: 0.6;
  pointer-events: none;
  animation: rotate 20s linear infinite;
  z-index: 1;
}

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

/* =================================================================
   SPACE LIGHT
   Sci-fi with light sky background and planetary elements
   ================================================================= */
:root.theme-space-light,
body.theme-space-light {
  --color-bg: #dbeafe;
  --color-bg-secondary: #bfdbfe;
  --color-text: #1e3a8a;
  --color-accent: #4f46e5;
  --color-highlight: #0ea5e9;
  --color-highlight-hover: #0284c7;
  --color-success: #10b981;
  --color-danger: #dc2626;
  --color-glow: #a78bfa;
  --color-star: #f59e0b;
  --font-main: 'Orbitron', 'Exo 2', -apple-system, sans-serif;
  --radius: 8px;
  --shadow: 0 4px 6px rgba(0,0,0,0.1);
}

body.theme-space-light {
  background:
    /* Planets/celestial bodies */
    radial-gradient(circle at 85% 15%, rgba(245, 158, 11, 0.2) 0%, transparent 10%),
    radial-gradient(circle at 15% 85%, rgba(79, 70, 229, 0.15) 0%, transparent 12%),
    radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.1) 0%, transparent 8%),
    /* Atmospheric glow */
    radial-gradient(ellipse at 50% 100%, rgba(191, 219, 254, 0.5) 0%, transparent 50%),
    /* Base gradient - sky */
    linear-gradient(180deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%);
}

/* Constellation lines */
body.theme-space-light::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><line x1="20" y1="30" x2="60" y2="50" stroke="%234f46e5" stroke-width="0.5" opacity="0.2"/><line x1="60" y1="50" x2="80" y2="20" stroke="%234f46e5" stroke-width="0.5" opacity="0.2"/><line x1="80" y1="20" x2="120" y2="40" stroke="%234f46e5" stroke-width="0.5" opacity="0.2"/><circle cx="20" cy="30" r="2" fill="%23f59e0b" opacity="0.6"/><circle cx="60" cy="50" r="2" fill="%23f59e0b" opacity="0.6"/><circle cx="80" cy="20" r="2" fill="%23f59e0b" opacity="0.6"/><circle cx="120" cy="40" r="2" fill="%23f59e0b" opacity="0.6"/><line x1="140" y1="160" x2="160" y2="140" stroke="%234f46e5" stroke-width="0.5" opacity="0.2"/><line x1="160" y1="140" x2="180" y2="160" stroke="%234f46e5" stroke-width="0.5" opacity="0.2"/><circle cx="140" cy="160" r="2" fill="%23f59e0b" opacity="0.6"/><circle cx="160" cy="140" r="2" fill="%23f59e0b" opacity="0.6"/><circle cx="180" cy="160" r="2" fill="%23f59e0b" opacity="0.6"/></svg>');
  background-size: 300px 300px;
  pointer-events: none;
  opacity: 0.4;
  z-index: 1;
}

.theme-space-dark .btn,
.theme-space-dark .nav-item a,
.theme-space-light .btn,
.theme-space-light .nav-item a {
  border-radius: var(--radius);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
  transition: all 0.3s ease;
}

.theme-space-dark .btn:hover,
.theme-space-dark .nav-item a:hover,
.theme-space-light .btn:hover,
.theme-space-light .nav-item a:hover {
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
  transform: scale(1.05);
}

/* =================================================================
   MODERN DARK
   Clean minimalist with geometric patterns
   ================================================================= */
:root.theme-modern-dark,
body.theme-modern-dark {
  --color-bg: #18181b;
  --color-bg-secondary: #27272a;
  --color-text: #fafafa;
  --color-accent: #3b82f6;
  --color-highlight: #8b5cf6;
  --color-highlight-hover: #7c3aed;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-border: #3f3f46;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 6px;
  --shadow: 0 4px 6px rgba(0,0,0,0.1);
}

body.theme-modern-dark {
  background-color: #18181b;
  background-image:
    /* Geometric shapes */
    linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.02) 30%, rgba(59, 130, 246, 0.02) 70%, transparent 70%),
    linear-gradient(-45deg, transparent 30%, rgba(139, 92, 246, 0.02) 30%, rgba(139, 92, 246, 0.02) 70%, transparent 70%),
    /* Abstract circles */
    radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 30%),
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 30%),
    /* Subtle grid */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 99px,
      rgba(63, 63, 70, 0.3) 99px,
      rgba(63, 63, 70, 0.3) 100px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 99px,
      rgba(63, 63, 70, 0.3) 99px,
      rgba(63, 63, 70, 0.3) 100px
    );
  background-size: 200px 200px, 200px 200px, 100% 100%, 100% 100%, 100px 100px, 100px 100px;
}

/* Floating geometric decorations */
.theme-modern-dark .main-container::before {
  content: '';
  position: fixed;
  top: 100px;
  left: 50px;
  width: 150px;
  height: 150px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="20" y="20" width="30" height="30" fill="none" stroke="%233b82f6" stroke-width="1" opacity="0.2"/><circle cx="70" cy="70" r="15" fill="none" stroke="%238b5cf6" stroke-width="1" opacity="0.2"/><polygon points="50,10 60,30 40,30" fill="none" stroke="%2322c55e" stroke-width="1" opacity="0.2"/></svg>');
  opacity: 0.5;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

.theme-modern-dark .main-container::after {
  content: '';
  position: fixed;
  bottom: 50px;
  right: 80px;
  width: 120px;
  height: 120px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,20 80,80 20,80" fill="none" stroke="%233b82f6" stroke-width="1" opacity="0.2"/><rect x="35" y="40" width="30" height="30" fill="none" stroke="%238b5cf6" stroke-width="1" opacity="0.2" transform="rotate(45 50 55)"/></svg>');
  opacity: 0.5;
  pointer-events: none;
  animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* =================================================================
   MODERN LIGHT
   Clean minimalist with subtle patterns
   ================================================================= */
:root.theme-modern-light,
body.theme-modern-light {
  --color-bg: #ffffff;
  --color-bg-secondary: #f4f4f5;
  --color-text: #18181b;
  --color-accent: #2563eb;
  --color-highlight: #7c3aed;
  --color-highlight-hover: #6d28d9;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-border: #e4e4e7;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.theme-modern-light {
  background-color: #ffffff;
  background-image:
    /* Geometric gradient shapes */
    linear-gradient(135deg, transparent 40%, rgba(37, 99, 235, 0.03) 40%, rgba(37, 99, 235, 0.03) 60%, transparent 60%),
    linear-gradient(-135deg, transparent 40%, rgba(124, 58, 237, 0.03) 40%, rgba(124, 58, 237, 0.03) 60%, transparent 60%),
    /* Circular gradients */
    radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.05) 0%, transparent 25%),
    radial-gradient(circle at 90% 90%, rgba(124, 58, 237, 0.05) 0%, transparent 25%),
    /* Subtle dots pattern */
    radial-gradient(circle, rgba(228, 228, 231, 0.5) 1px, transparent 1px);
  background-size: 300px 300px, 300px 300px, 100% 100%, 100% 100%, 20px 20px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* Minimal geometric accents */
.theme-modern-light .main-container::before {
  content: '';
  position: fixed;
  top: 120px;
  right: 60px;
  width: 100px;
  height: 100px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="30" fill="none" stroke="%232563eb" stroke-width="0.5" opacity="0.3"/><rect x="35" y="35" width="30" height="30" fill="none" stroke="%237c3aed" stroke-width="0.5" opacity="0.3"/></svg>');
  opacity: 0.4;
  pointer-events: none;
  animation: float 7s ease-in-out infinite;
}

.theme-modern-dark .btn,
.theme-modern-dark .nav-item a,
.theme-modern-light .btn,
.theme-modern-light .nav-item a {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}

.theme-modern-dark .btn:hover,
.theme-modern-dark .nav-item a:hover,
.theme-modern-light .btn:hover,
.theme-modern-light .nav-item a:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* =================================================================
   FANTASY DARK
   Medieval magical with parchment texture and mystical elements
   ================================================================= */
:root.theme-fantasy-dark,
body.theme-fantasy-dark {
  --color-bg: #1c1410;
  --color-bg-secondary: #2d1f1a;
  --color-text: #f5deb3;
  --color-accent: #9333ea;
  --color-highlight: #d97706;
  --color-highlight-hover: #b45309;
  --color-success: #84cc16;
  --color-danger: #dc2626;
  --color-magic: #c084fc;
  --color-metal: #78716c;
  --font-main: 'Cinzel', 'Lora', Georgia, serif;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Lora', serif;
  --color-bg-deep: #1a1a2e;
  --color-bg-parchment: #f5e8c7;
  --color-text-light: #fde8a6;
  --color-text-dark: #4a2e19;
  --color-accent-gold: #ffd700;
  --color-accent-gold-darker: #e6c200;
  --color-border: #8c7853;
  --radius: 4px;
  --shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.3);
}

body.theme-fantasy-dark {
  background-color: #1c1410;
  background-image:
    /* Parchment/leather texture */
    repeating-linear-gradient(
      90deg,
      rgba(45, 31, 26, 0.3) 0px,
      transparent 1px,
      transparent 2px,
      rgba(45, 31, 26, 0.3) 3px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(45, 31, 26, 0.2) 0px,
      transparent 1px,
      transparent 2px,
      rgba(45, 31, 26, 0.2) 3px
    ),
    /* Magical glow spots */
    radial-gradient(ellipse at 20% 30%, rgba(147, 51, 234, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(217, 119, 6, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(192, 132, 252, 0.05) 0%, transparent 50%),
    /* Aged paper effect */
    linear-gradient(135deg, #1c1410 0%, #2d1f1a 50%, #1c1410 100%);
}

/* Ornate corner decorations - medieval borders */
body.theme-fantasy-dark::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M10,10 Q15,10 15,15 L15,35 Q15,40 10,40" fill="none" stroke="%23d97706" stroke-width="1" opacity="0.3"/><path d="M190,10 Q185,10 185,15 L185,35 Q185,40 190,40" fill="none" stroke="%23d97706" stroke-width="1" opacity="0.3"/><path d="M10,190 Q15,190 15,185 L15,165 Q15,160 10,160" fill="none" stroke="%23d97706" stroke-width="1" opacity="0.3"/><path d="M190,190 Q185,190 185,185 L185,165 Q185,160 190,160" fill="none" stroke="%23d97706" stroke-width="1" opacity="0.3"/><circle cx="15" cy="15" r="3" fill="%239333ea" opacity="0.4"/><circle cx="185" cy="15" r="3" fill="%239333ea" opacity="0.4"/><circle cx="15" cy="185" r="3" fill="%239333ea" opacity="0.4"/><circle cx="185" cy="185" r="3" fill="%239333ea" opacity="0.4"/></svg>');
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

/* Magical particle effect */
.theme-fantasy-dark .main-container::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="30" r="1" fill="%23c084fc" opacity="0.6"><animate attributeName="opacity" values="0.3;0.8;0.3" dur="3s" repeatCount="indefinite"/></circle><circle cx="60" cy="20" r="1.5" fill="%23d97706" opacity="0.6"><animate attributeName="opacity" values="0.4;0.9;0.4" dur="4s" repeatCount="indefinite"/></circle><circle cx="80" cy="60" r="1" fill="%239333ea" opacity="0.6"><animate attributeName="opacity" values="0.3;0.7;0.3" dur="3.5s" repeatCount="indefinite"/></circle><circle cx="40" cy="70" r="1.5" fill="%23c084fc" opacity="0.6"><animate attributeName="opacity" values="0.5;1;0.5" dur="2.5s" repeatCount="indefinite"/></circle><circle cx="70" cy="45" r="1" fill="%23d97706" opacity="0.6"><animate attributeName="opacity" values="0.4;0.8;0.4" dur="3.2s" repeatCount="indefinite"/></circle></svg>');
  opacity: 0.5;
  pointer-events: none;
  animation: float 10s ease-in-out infinite;
}

/* Dragon/wizard silhouette decoration */
.theme-fantasy-dark .main-container::after {
  content: '';
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 120px;
  height: 120px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,20 L55,30 L50,40 L45,30 Z" fill="none" stroke="%239333ea" stroke-width="1" opacity="0.3"/><circle cx="50" cy="50" r="20" fill="none" stroke="%23d97706" stroke-width="1" opacity="0.3"/><path d="M30,50 L50,30 L70,50 L50,70 Z" fill="none" stroke="%23c084fc" stroke-width="1" opacity="0.3"/><path d="M50,50 L50,20 M50,50 L70,50 M50,50 L50,80 M50,50 L30,50" stroke="%23d97706" stroke-width="0.5" opacity="0.2"/></svg>');
  opacity: 0.4;
  pointer-events: none;
  animation: rotate 30s linear infinite;
}

/* =================================================================
   FANTASY LIGHT
   Medieval magical with light parchment
   ================================================================= */
:root.theme-fantasy-light,
body.theme-fantasy-light {
  --color-bg: #fef3c7;
  --color-bg-secondary: #fde68a;
  --color-text: #451a03;
  --color-accent: #7c3aed;
  --color-highlight: #f59e0b;
  --color-highlight-hover: #d97706;
  --color-success: #65a30d;
  --color-danger: #b91c1c;
  --color-magic: #a78bfa;
  --color-metal: #57534e;
  --font-main: 'Cinzel', 'Lora', Georgia, serif;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Lora', serif;
  --color-bg-deep: #1a1a2e;
  --color-bg-parchment: #f5e8c7;
  --color-text-light: #fde8a6;
  --color-text-dark: #4a2e19;
  --color-accent-gold: #ffd700;
  --color-accent-gold-darker: #e6c200;
  --color-border: #8c7853;
  --radius: 4px;
  --shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.theme-fantasy-light {
  background-color: #fef3c7;
  background-image:
    /* Parchment texture */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(253, 230, 138, 0.3) 1px,
      transparent 2px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      rgba(253, 230, 138, 0.3) 1px,
      transparent 2px
    ),
    /* Age spots/stains */
    radial-gradient(circle at 15% 20%, rgba(180, 83, 9, 0.05) 0%, transparent 15%),
    radial-gradient(circle at 85% 80%, rgba(180, 83, 9, 0.05) 0%, transparent 12%),
    radial-gradient(circle at 40% 60%, rgba(180, 83, 9, 0.03) 0%, transparent 10%),
    /* Magical shimmer */
    radial-gradient(ellipse at 60% 40%, rgba(124, 58, 237, 0.05) 0%, transparent 40%),
    /* Base parchment color */
    linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fef3c7 100%);
  background-size: 3px 3px, 3px 3px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* Illuminated manuscript style borders */
body.theme-fantasy-light::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M10,10 L30,10 L30,15 Q25,15 25,20 L25,30 L20,30 Q15,30 15,25 L15,15 Q15,10 10,10" fill="none" stroke="%23f59e0b" stroke-width="1.5" opacity="0.4"/><path d="M190,10 L170,10 L170,15 Q175,15 175,20 L175,30 L180,30 Q185,30 185,25 L185,15 Q185,10 190,10" fill="none" stroke="%23f59e0b" stroke-width="1.5" opacity="0.4"/><path d="M10,190 L30,190 L30,185 Q25,185 25,180 L25,170 L20,170 Q15,170 15,175 L15,185 Q15,190 10,190" fill="none" stroke="%23f59e0b" stroke-width="1.5" opacity="0.4"/><path d="M190,190 L170,190 L170,185 Q175,185 175,180 L175,170 L180,170 Q185,170 185,175 L185,185 Q185,190 190,190" fill="none" stroke="%23f59e0b" stroke-width="1.5" opacity="0.4"/><circle cx="20" cy="20" r="4" fill="%237c3aed" opacity="0.3"/><circle cx="180" cy="20" r="4" fill="%237c3aed" opacity="0.3"/><circle cx="20" cy="180" r="4" fill="%237c3aed" opacity="0.3"/><circle cx="180" cy="180" r="4" fill="%237c3aed" opacity="0.3"/><path d="M15,15 L25,15 M15,20 L25,20" stroke="%23d97706" stroke-width="0.5" opacity="0.3"/><path d="M175,15 L185,15 M175,20 L185,20" stroke="%23d97706" stroke-width="0.5" opacity="0.3"/><path d="M15,180 L25,180 M15,185 L25,185" stroke="%23d97706" stroke-width="0.5" opacity="0.3"/><path d="M175,180 L185,180 M175,185 L185,185" stroke="%23d97706" stroke-width="0.5" opacity="0.3"/></svg>');
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.5;
  z-index: 1;
}

/* Decorative scroll pattern */
.theme-fantasy-light .main-container::before {
  content: '';
  position: fixed;
  top: 100px;
  left: 30px;
  width: 100px;
  height: 150px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 75"><path d="M10,10 Q15,15 10,20 T10,30 T10,40 T10,50 T10,60" fill="none" stroke="%23f59e0b" stroke-width="1" opacity="0.3"/><path d="M40,15 Q35,20 40,25 T40,35 T40,45 T40,55 T40,65" fill="none" stroke="%237c3aed" stroke-width="1" opacity="0.3"/><circle cx="10" cy="10" r="2" fill="%23a78bfa" opacity="0.4"/><circle cx="40" cy="15" r="2" fill="%23f59e0b" opacity="0.4"/><circle cx="10" cy="60" r="2" fill="%23f59e0b" opacity="0.4"/><circle cx="40" cy="65" r="2" fill="%23a78bfa" opacity="0.4"/></svg>');
  opacity: 0.4;
  pointer-events: none;
}

/* Castle/wizard tower silhouette */
.theme-fantasy-light .main-container::after {
  content: '';
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 100px;
  height: 120px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120"><rect x="40" y="60" width="20" height="50" fill="none" stroke="%23451a03" stroke-width="1" opacity="0.15"/><polygon points="35,60 50,45 65,60" fill="none" stroke="%23451a03" stroke-width="1" opacity="0.15"/><rect x="30" y="80" width="10" height="30" fill="none" stroke="%23451a03" stroke-width="0.5" opacity="0.1"/><rect x="60" y="80" width="10" height="30" fill="none" stroke="%23451a03" stroke-width="0.5" opacity="0.1"/><circle cx="50" cy="65" r="3" fill="%237c3aed" opacity="0.2"/><path d="M45,50 L50,40 L55,50" fill="none" stroke="%23f59e0b" stroke-width="0.5" opacity="0.2"/></svg>');
  opacity: 0.5;
  pointer-events: none;
}

/* Enhanced Navigation Styles for Fantasy Themes */
.theme-fantasy-dark header,
.theme-fantasy-light header {
  border-bottom: 2px solid var(--color-border);
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.theme-fantasy-dark .menu-toggle span,
.theme-fantasy-light .menu-toggle span {
  background-color: var(--color-accent-gold);
  box-shadow: 0 0 5px var(--color-accent-gold);
}

.theme-fantasy-dark .nav-item a,
.theme-fantasy-light .nav-item a {
  border: 2px solid var(--color-border);
  font-family: var(--font-heading);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* Gold shimmer effect on nav items using ::after instead of ::before to avoid conflicts */
.theme-fantasy-dark .nav-item a::after,
.theme-fantasy-light .nav-item a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.theme-fantasy-dark .nav-item a:hover::after,
.theme-fantasy-light .nav-item a:hover::after {
  left: 100%;
}

.theme-fantasy-dark .nav-item a:hover,
.theme-fantasy-light .nav-item a:hover {
  background-color: rgba(255, 215, 0, 0.1);
  color: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
  transform: translateY(-2px);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 4px 10px rgba(255, 215, 0, 0.2);
}

.theme-fantasy-dark .nav-divider,
.theme-fantasy-light .nav-divider {
  background-color: rgba(140, 120, 83, 0.5);
  height: 2px;
  border-radius: 1px;
}

/* Enhanced auth buttons for fantasy theme */
.theme-fantasy-dark .nav-item.auth a,
.theme-fantasy-light .nav-item.auth a {
  border-color: var(--color-accent-gold);
}

.theme-fantasy-dark .nav-item.auth a:hover,
.theme-fantasy-light .nav-item.auth a:hover {
  border-color: #fff;
  color: #fff;
}

/* Mobile styles for fantasy theme */
@media (max-width: 768px) {
  .theme-fantasy-dark nav,
  .theme-fantasy-light nav {
    border-right: 2px solid var(--color-border);
    box-shadow: 5px 0 15px rgba(0,0,0,0.6);
  }

  .theme-fantasy-dark .nav-section,
  .theme-fantasy-light .nav-section {
    border-bottom-color: var(--color-border);
  }

  .theme-fantasy-dark .nav-item a,
  .theme-fantasy-light .nav-item a {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(140, 120, 83, 0.3);
    box-shadow: none;
  }

  .theme-fantasy-dark .nav-item a:hover,
  .theme-fantasy-light .nav-item a:hover {
    background-color: rgba(255, 215, 0, 0.1);
  }

  .theme-fantasy-dark .nav-section::before,
  .theme-fantasy-light .nav-section::before {
    color: var(--color-accent-gold);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    letter-spacing: 1.5px;
  }

  .theme-fantasy-dark .overlay,
  .theme-fantasy-light .overlay {
    background-color: rgba(10, 5, 20, 0.8);
    backdrop-filter: blur(3px);
  }
}

/* Parchment-style content cards for fantasy themes */
.theme-fantasy-dark .demo-notice,
.theme-fantasy-dark .feature-card,
.theme-fantasy-light .demo-notice,
.theme-fantasy-light .feature-card {
  background-color: var(--color-bg-parchment);
  color: var(--color-text-dark);
  border: 3px solid var(--color-border);
  border-radius: 5px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
  font-size: 0.9rem;
  line-height: 1.7;
}

.theme-fantasy-dark .demo-notice h2,
.theme-fantasy-dark .feature-card h3,
.theme-fantasy-light .demo-notice h2,
.theme-fantasy-light .feature-card h3 {
  color: #8B4513;
  border-bottom: 2px solid rgba(140, 120, 83, 0.5);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.theme-fantasy-dark .feature-card p,
.theme-fantasy-dark .feature-card ul,
.theme-fantasy-light .feature-card p,
.theme-fantasy-light .feature-card ul {
  font-size: 0.8rem;
  color: var(--color-text-dark);
}

/* Typography enhancements */
.theme-fantasy-dark h1,
.theme-fantasy-dark h2,
.theme-fantasy-dark h3,
.theme-fantasy-dark h4,
.theme-fantasy-dark h5,
.theme-fantasy-dark h6,
.theme-fantasy-light h1,
.theme-fantasy-light h2,
.theme-fantasy-light h3,
.theme-fantasy-light h4,
.theme-fantasy-light h5,
.theme-fantasy-light h6 {
  font-family: var(--font-heading);
  color: var(--color-accent-gold);
  font-weight: 700;
}

.theme-fantasy-dark .btn,
.theme-fantasy-dark .nav-item a,
.theme-fantasy-light .btn,
.theme-fantasy-light .nav-item a {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
}

.theme-fantasy-dark .btn::before,
.theme-fantasy-dark .nav-item a::before,
.theme-fantasy-light .btn::before,
.theme-fantasy-light .nav-item a::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px solid var(--color-magic);
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-fantasy-dark .btn:hover::before,
.theme-fantasy-dark .nav-item a:hover::before,
.theme-fantasy-light .btn:hover::before,
.theme-fantasy-light .nav-item a:hover::before {
  opacity: 0.5;
}

/* =================================================================
   GLOBAL THEME STYLES
   Apply to all themes
   ================================================================= */

/* Font loading for non-retro themes */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@400;600;700&family=Cinzel:wght@400;600;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* Ensure theme classes work on body */
body[class*="theme-"] {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
  position: relative;
}

/* Header theming */
[class*="theme-"] .top-header {
  background-color: var(--color-bg);
  border-bottom-color: var(--color-accent);
  position: relative;
  z-index: 10;
}

/* Navigation theming */
[class*="theme-"] .main-nav {
  background-color: var(--color-accent);
  position: relative;
  z-index: 10;
}

[class*="theme-"] .nav-item a {
  background-color: var(--color-highlight);
  color: var(--color-bg);
}

[class*="theme-"] .nav-item a:hover {
  background-color: var(--color-highlight-hover);
}

[class*="theme-"] .nav-item.auth a {
  background-color: var(--color-success);
}

/* Footer theming */
[class*="theme-"] .site-footer {
  background-color: var(--color-accent);
  position: relative;
  z-index: 10;
}

/* Mobile menu overlay */
[class*="theme-"] .overlay {
  background-color: rgba(0,0,0,0.7);
}

/* Main container positioning for decorative elements */
[class*="theme-"] .main-container {
  position: relative;
  z-index: 2;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  [class*="theme-"] *,
  [class*="theme-"] *::before,
  [class*="theme-"] *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Disable animations on mobile for better performance */
@media (max-width: 768px) {
  body.theme-space-dark {
    animation: none;
  }

  .theme-retro-dark .main-container::before,
  .theme-retro-dark .main-container::after,
  .theme-retro-light .main-container::before,
  .theme-retro-light .main-container::after,
  .theme-space-dark .main-container::after,
  .theme-modern-dark .main-container::before,
  .theme-modern-dark .main-container::after,
  .theme-modern-light .main-container::before,
  .theme-fantasy-dark .main-container::before,
  .theme-fantasy-dark .main-container::after,
  .theme-fantasy-light .main-container::before,
  .theme-fantasy-light .main-container::after {
    display: none;
  }
}