/**
 * components.power-cards-themes.css
 * Multiple theme variations for power cards
 * Themes apply globally to: Power Cards panel, Settings tab, Scenarios tab, and Card Detail modal
 */

/* ==============================================
   STANDARD THEME (Default)
   Based on attached image - Classic KoT style
   ============================================== */

:root,
body[data-power-card-theme="standard"] {
  /* Card Background */
  --pct-card-bg: linear-gradient(135deg, #2d3436 0%, #1b1f20 78%);
  --pct-card-border: 2px solid #222;
  --pct-card-shadow: 2px 2px 0 #000, 0 0 0 1px #222 inset;
  --pct-card-radius: 6px;
  
  /* Header */
  --pct-header-bg: linear-gradient(135deg, #3b4245, #23272a);
  --pct-header-border: 2px solid #000;
  --pct-header-shadow: 2px 2px 0 #000, 0 0 0 2px #222 inset;
  --pct-header-radius: 4px;
  
  /* Colors */
  --pct-accent: #ffcf33;
  --pct-text: #ececec;
  --pct-text-secondary: #b0b0b0;
  --pct-cost-bg: #111;
  --pct-cost-text: #ffcf33;
  
  /* Card Type Colors */
  --pct-keep-color: #4caf50;
  --pct-discard-color: #ff9f43;
  
  /* Effects */
  --pct-glow-overlay: radial-gradient(circle at 30% 22%, rgba(255,255,255,0.12), rgba(255,255,255,0) 65%);
  --pct-shine-overlay: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0));
  
  /* Typography */
  --pct-font-heading: 'Bangers', cursive;
  --pct-font-body: 'Comic Neue', cursive;
}

/* Standard theme with light mode */
body[data-power-card-theme="standard"][data-theme="light"] {
  --pct-card-bg: linear-gradient(135deg, #e8eaed 0%, #f5f7fa 78%);
  --pct-card-border: 2px solid #ccc;
  --pct-card-shadow: 2px 2px 0 rgba(0,0,0,0.2), 0 0 0 1px #ddd inset;
  
  --pct-header-bg: linear-gradient(135deg, #d1d4d8, #c2c5c9);
  --pct-header-border: 2px solid #999;
  --pct-header-shadow: 2px 2px 0 rgba(0,0,0,0.2), 0 0 0 2px #bbb inset;
  
  --pct-accent: #ff9500;
  --pct-text: #1a1a1a;
  --pct-text-secondary: #4a4a4a;
  --pct-cost-bg: #fff;
  --pct-cost-text: #ff9500;
  
  --pct-glow-overlay: radial-gradient(circle at 30% 22%, rgba(0,0,0,0.08), rgba(0,0,0,0) 65%);
  --pct-shine-overlay: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
}

/* ==============================================
   MINIMAL THEME - Clean and modern
   ============================================== */

body[data-power-card-theme="minimal"] {
  --pct-card-bg: #2a2a2a;
  --pct-card-border: 1px solid #444;
  --pct-card-shadow: 0 2px 8px rgba(0,0,0,0.3);
  --pct-card-radius: 8px;
  
  --pct-header-bg: #333;
  --pct-header-border: none;
  --pct-header-shadow: none;
  --pct-header-radius: 6px;
  
  --pct-accent: #8ab4f8;
  --pct-text: #e0e0e0;
  --pct-text-secondary: #999;
  --pct-cost-bg: #1a1a1a;
  --pct-cost-text: #8ab4f8;
  
  --pct-keep-color: #5cb85c;
  --pct-discard-color: #f0ad4e;
  
  --pct-glow-overlay: none;
  --pct-shine-overlay: none;
  
  --pct-font-heading: 'Inter', -apple-system, sans-serif;
  --pct-font-body: 'Inter', -apple-system, sans-serif;
}

body[data-power-card-theme="minimal"][data-theme="light"] {
  --pct-card-bg: #f8f9fa;
  --pct-card-border: 1px solid #dee2e6;
  --pct-card-shadow: 0 1px 4px rgba(0,0,0,0.1);
  
  --pct-header-bg: #e9ecef;
  
  --pct-accent: #0066cc;
  --pct-text: #212529;
  --pct-text-secondary: #6c757d;
  --pct-cost-bg: #fff;
  --pct-cost-text: #0066cc;
}

/* ==============================================
   VIBRANT THEME - Bold and energetic
   ============================================== */

body[data-power-card-theme="vibrant"] {
  --pct-card-bg: linear-gradient(135deg, #434343 0%, #000000 100%);
  --pct-card-border: 3px solid #ffcf33;
  --pct-card-shadow: 0 0 20px rgba(255,207,51,0.3), 3px 3px 0 #000, 0 0 0 1px #ffcf33 inset;
  --pct-card-radius: 10px;
  
  --pct-header-bg: linear-gradient(135deg, #ffcf33, #ffaa00);
  --pct-header-border: 3px solid #000;
  --pct-header-shadow: 3px 3px 0 #000, inset 0 2px 0 rgba(255,255,255,0.3);
  --pct-header-radius: 6px;
  
  --pct-accent: #ffcf33;
  --pct-text: #fff;
  --pct-text-secondary: #ffcf33;
  --pct-cost-bg: #000;
  --pct-cost-text: #ffcf33;
  
  --pct-keep-color: #00ff88;
  --pct-discard-color: #ff6b35;
  
  --pct-glow-overlay: radial-gradient(circle at 30% 22%, rgba(255,207,51,0.2), rgba(255,207,51,0) 65%);
  --pct-shine-overlay: linear-gradient(180deg, rgba(255,207,51,0.2), rgba(255,207,51,0));
  
  --pct-font-heading: 'Bangers', cursive;
  --pct-font-body: 'Comic Neue', cursive;
}

body[data-power-card-theme="vibrant"][data-theme="light"] {
  --pct-card-bg: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
  --pct-card-border: 3px solid #ff6b00;
  --pct-card-shadow: 0 0 20px rgba(255,107,0,0.3), 3px 3px 0 rgba(0,0,0,0.2), 0 0 0 1px #ff6b00 inset;
  
  --pct-header-bg: linear-gradient(135deg, #ff8c00, #ff6b00);
  
  --pct-accent: #ff6b00;
  --pct-text: #000;
  --pct-text-secondary: #ff6b00;
  --pct-cost-bg: #fff;
  --pct-cost-text: #ff6b00;
  
  --pct-glow-overlay: radial-gradient(circle at 30% 22%, rgba(255,107,0,0.15), rgba(255,107,0,0) 65%);
  --pct-shine-overlay: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0));
}

/* ==============================================
   LEGACY THEMES (Mystical & Tech)
   Kept for backwards compatibility
   ============================================== */

/* MYSTICAL THEME - Ancient scrolls with magical elements */
.cmp-power-cards-panel[data-theme="mystical"] {
  --pc-card-bg: linear-gradient(135deg, #2d1810 0%, #1a0f08 78%);
  --pc-card-border: 2px solid #8b4513;
  --pc-card-shadow: 2px 2px 0 #654321, 0 0 0 1px #8b4513 inset, 0 0 12px rgba(255, 215, 0, 0.3);
  --pc-card-radius: 12px;
  --pc-card-accent: #ffd700;
  --pc-card-text: #f4e4bc;
  --pc-cost-bg: #4a2c17;
  --pc-rare: #9370db;
  --pc-epic: #ff69b4;
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card {
  position: relative;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.1), transparent 50%),
    linear-gradient(135deg, #2d1810 0%, #1a0f08 78%);
  border: 2px solid #8b4513;
  box-shadow: 
    2px 2px 0 #654321,
    0 0 0 1px #8b4513 inset,
    0 0 15px rgba(255, 215, 0, 0.2);
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card:before {
  background: 
    radial-gradient(circle at 30% 22%, rgba(255, 215, 0, 0.15), transparent 65%),
    linear-gradient(45deg, transparent 40%, rgba(255, 215, 0, 0.05) 50%, transparent 60%);
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card:after {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.1), transparent);
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card__header {
  background: linear-gradient(135deg, #4a2c17, #2d1810);
  border: 2px solid #8b4513;
  box-shadow: 2px 2px 0 #654321, 0 0 0 2px #8b4513 inset;
  font-family: 'Creepster', cursive;
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card__name {
  text-shadow: 
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0 0 10px rgba(255, 215, 0, 0.5);
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card__cost {
  background: #4a2c17;
  border: 1px solid #8b4513;
  box-shadow: 2px 2px 0 #654321, inset 0 0 8px rgba(255, 215, 0, 0.2);
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card:hover {
  box-shadow: 
    5px 5px 0 #654321,
    0 0 0 2px #8b4513 inset,
    0 10px 24px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.4);
}

/* TECH THEME - Futuristic holographic interface */
.cmp-power-cards-panel[data-theme="tech"] {
  --pc-card-bg: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 78%);
  --pc-card-border: 2px solid #00ffff;
  --pc-card-shadow: 2px 2px 0 #008b8b, 0 0 0 1px #00ffff inset, 0 0 15px rgba(0, 255, 255, 0.3);
  --pc-card-radius: 4px;
  --pc-card-accent: #00ffff;
  --pc-card-text: #e0e0e0;
  --pc-cost-bg: #001a1a;
  --pc-rare: #ff6600;
  --pc-epic: #ff0080;
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card {
  background: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 255, 0.03) 2px,
      rgba(0, 255, 255, 0.03) 4px
    ),
    linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 78%);
  border: 2px solid #00ffff;
  box-shadow: 
    2px 2px 0 #008b8b,
    0 0 0 1px #00ffff inset,
    0 0 20px rgba(0, 255, 255, 0.2);
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card:before {
  background: 
    radial-gradient(circle at 30% 22%, rgba(0, 255, 255, 0.1), transparent 65%),
    linear-gradient(45deg, transparent 48%, rgba(0, 255, 255, 0.05) 50%, transparent 52%);
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card:after {
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.1), transparent);
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card__header {
  background: linear-gradient(135deg, #001a1a, #000a0a);
  border: 2px solid #00ffff;
  box-shadow: 2px 2px 0 #008b8b, 0 0 0 2px #00ffff inset;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card__name {
  text-shadow: 
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 10px rgba(0, 255, 255, 0.8);
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card__cost {
  background: #001a1a;
  border: 1px solid #00ffff;
  box-shadow: 2px 2px 0 #008b8b, inset 0 0 8px rgba(0, 255, 255, 0.2);
  font-family: 'Courier New', monospace;
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card__body {
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card:hover {
  box-shadow: 
    5px 5px 0 #008b8b,
    0 0 0 2px #00ffff inset,
    0 10px 24px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(0, 255, 255, 0.5);
  animation: techPulse 2s ease-in-out infinite;
}

@keyframes techPulse {
  0%, 100% { 
    box-shadow: 
      5px 5px 0 #008b8b,
      0 0 0 2px #00ffff inset,
      0 10px 24px rgba(0, 0, 0, 0.5),
      0 0 25px rgba(0, 255, 255, 0.5);
  }
  50% { 
    box-shadow: 
      5px 5px 0 #008b8b,
      0 0 0 2px #00ffff inset,
      0 10px 24px rgba(0, 0, 0, 0.5),
      0 0 35px rgba(0, 255, 255, 0.7);
  }
}

/* Theme-specific rarity colors */
.cmp-power-cards-panel[data-theme="mystical"] .pc-card[data-rarity="rare"] {
  --pc-card-accent: #9370db;
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card[data-rarity="epic"] {
  --pc-card-accent: #ff69b4;
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card[data-rarity="rare"] .pc-card__header {
  background: linear-gradient(135deg, #4b0082, #2f0054);
}

.cmp-power-cards-panel[data-theme="mystical"] .pc-card[data-rarity="epic"] .pc-card__header {
  background: linear-gradient(135deg, #8b0044, #4d0026);
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card[data-rarity="rare"] {
  --pc-card-accent: #ff6600;
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card[data-rarity="epic"] {
  --pc-card-accent: #ff0080;
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card[data-rarity="rare"] .pc-card__header {
  background: linear-gradient(135deg, #331a00, #1a0d00);
  border-color: #ff6600;
  box-shadow: 2px 2px 0 #cc5200, 0 0 0 2px #ff6600 inset;
}

.cmp-power-cards-panel[data-theme="tech"] .pc-card[data-rarity="epic"] .pc-card__header {
  background: linear-gradient(135deg, #330019, #1a000d);
  border-color: #ff0080;
  box-shadow: 2px 2px 0 #cc0066, 0 0 0 2px #ff0080 inset;
}

/* Title styling for different themes */
.cmp-power-cards-panel[data-theme="mystical"] .mp-title {
  font-family: 'Creepster', cursive;
  text-shadow: 
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0 0 15px rgba(255, 215, 0, 0.6);
}

.cmp-power-cards-panel[data-theme="tech"] .mp-title {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  text-shadow: 
    -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000,
    0 0 15px rgba(0, 255, 255, 0.8);
  letter-spacing: 2px;
}