/* ═══════════════════════════════════════════════════════════
   I · ORACLE — улучшенный прод: золото, стекло, карта справа
   ═══════════════════════════════════════════════════════════ */

body[data-skin="oracle"] {
  --bg-base: #080412;
  --bg-pos: 78% 42%;
  --bg-pos-mobile: 84% 32%;
  --bg-scale: 1.08;
  --bg-filter: brightness(1.12) saturate(1.08);
  --bg-veil:
    linear-gradient(
      102deg,
      rgba(8, 4, 18, 0.88) 0%,
      rgba(12, 6, 28, 0.72) 32%,
      rgba(18, 8, 36, 0.38) 52%,
      rgba(10, 5, 22, 0.12) 72%,
      transparent 100%
    ),
    radial-gradient(ellipse 55% 45% at 82% 48%, rgba(124, 58, 237, 0.14), transparent 65%);
  --bg-glow: radial-gradient(circle at 80% 45%, rgba(212, 175, 55, 0.14), transparent 42%);
  --ambient: radial-gradient(circle at 75% 50%, rgba(196, 181, 253, 0.06), transparent 40%);
  --grain: 0.07;

  --text: #e8e4f0;
  --text-bright: #f8f5fc;
  --text-muted: rgba(232, 228, 240, 0.72);
  --text-faint: rgba(196, 181, 253, 0.45);
  --selection: rgba(212, 175, 55, 0.35);

  --accent: #d4af37;
  --accent-secondary: #c4b5fd;
  --accent-soft: rgba(196, 181, 253, 0.65);
  --border: rgba(196, 181, 253, 0.14);
  --border-strong: rgba(196, 181, 253, 0.32);
  --frame-color: rgba(212, 175, 55, 0.55);
  --sigil-glow: 0 0 24px rgba(212, 175, 55, 0.35);
  --icon-glow: 0 0 12px rgba(212, 175, 55, 0.25);
  --steps-num: rgba(212, 175, 55, 0.32);

  --header-bg: rgba(10, 6, 22, 0.78);
  --header-border: rgba(196, 181, 253, 0.12);
  --nav-hover: rgba(196, 181, 253, 0.08);
  --mobile-bg: rgba(8, 4, 18, 0.96);
  --btn-ghost-bg: rgba(15, 10, 30, 0.45);

  --btn-gold-text: #1a0f2e;
  --btn-gold-bg: linear-gradient(135deg, #f0d878 0%, #d4af37 45%, #a88428 100%);
  --btn-gold-border: rgba(255, 220, 120, 0.45);
  --btn-gold-shadow: 0 8px 32px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --btn-gold-shadow-hover: 0 14px 40px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --btn-outline-bg: rgba(12, 8, 24, 0.35);
  --btn-outline-hover: rgba(196, 181, 253, 0.08);

  --card-radius: 20px;
  --card-bg: linear-gradient(145deg, rgba(22, 12, 42, 0.72), rgba(12, 8, 26, 0.55));
  --card-border: 1px solid rgba(196, 181, 253, 0.18);
  --card-border-hover: rgba(212, 175, 55, 0.35);
  --card-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --card-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(124, 58, 237, 0.12);
  --card-blur: blur(18px) saturate(130%);
  --card-shine: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 50%);
  --card-shine-opacity: 1;
  --card-top-line: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
  --card-top-opacity: 0.7;
  --card-sigil-opacity: 0.08;
  --card-featured-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35), 0 16px 48px rgba(212, 175, 55, 0.15);

  --picker-bg: rgba(8, 4, 18, 0.92);
  --picker-border: 1px solid rgba(212, 175, 55, 0.22);
  --picker-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --picker-tab-hover: rgba(212, 175, 55, 0.06);
  --picker-tab-active: rgba(212, 175, 55, 0.12);
  --picker-tab-active-border: rgba(212, 175, 55, 0.35);
}


/* ═══════════════════════════════════════════════════════════
   II · EMBER — храм свечей, янтарь, тёплое притяжение
   ═══════════════════════════════════════════════════════════ */

body[data-skin="ember"] {
  --bg-base: #0c0606;
  --bg-pos: 76% 40%;
  --bg-pos-mobile: 80% 30%;
  --bg-scale: 1.1;
  --bg-filter: brightness(1.15) saturate(1.15) sepia(0.12);
  --bg-veil:
    linear-gradient(
      100deg,
      rgba(12, 4, 4, 0.9) 0%,
      rgba(28, 10, 8, 0.65) 35%,
      rgba(40, 16, 10, 0.28) 55%,
      rgba(20, 8, 6, 0.08) 75%,
      transparent 100%
    ),
    radial-gradient(ellipse 50% 40% at 80% 50%, rgba(232, 140, 60, 0.18), transparent 60%);
  --bg-glow: radial-gradient(circle at 78% 44%, rgba(255, 180, 80, 0.2), transparent 38%);
  --ambient:
    radial-gradient(circle at 15% 80%, rgba(180, 60, 30, 0.12), transparent 35%),
    radial-gradient(circle at 85% 30%, rgba(255, 160, 60, 0.1), transparent 30%);
  --grain: 0.1;

  --text: #f5ebe0;
  --text-bright: #fff8f0;
  --text-muted: rgba(245, 235, 224, 0.7);
  --text-faint: rgba(232, 180, 120, 0.45);
  --selection: rgba(232, 140, 60, 0.4);

  --accent: #e8a050;
  --accent-secondary: #ffcc80;
  --accent-soft: rgba(232, 180, 120, 0.65);
  --border: rgba(232, 140, 60, 0.16);
  --border-strong: rgba(232, 160, 80, 0.38);
  --frame-color: rgba(232, 160, 80, 0.6);
  --sigil-glow: 0 0 28px rgba(255, 160, 60, 0.45);
  --icon-glow: 0 0 16px rgba(255, 140, 40, 0.35);
  --steps-num: rgba(232, 140, 60, 0.28);
  --logo-glow: 0 0 12px rgba(255, 160, 60, 0.4);

  --header-bg: rgba(12, 4, 4, 0.82);
  --header-border: rgba(232, 140, 60, 0.15);
  --nav-hover: rgba(232, 140, 60, 0.1);
  --mobile-bg: rgba(12, 4, 4, 0.97);
  --btn-ghost-bg: rgba(40, 16, 10, 0.5);

  --btn-gold-text: #1a0800;
  --btn-gold-bg: linear-gradient(135deg, #ffd080 0%, #e89040 40%, #c06020 100%);
  --btn-gold-border: rgba(255, 200, 120, 0.5);
  --btn-gold-shadow: 0 8px 36px rgba(232, 120, 40, 0.45), 0 0 20px rgba(255, 140, 40, 0.2);
  --btn-gold-shadow-hover: 0 16px 48px rgba(232, 100, 30, 0.55), 0 0 40px rgba(255, 160, 60, 0.35);
  --btn-outline-bg: rgba(40, 16, 10, 0.4);
  --btn-outline-hover: rgba(232, 140, 60, 0.12);

  --card-radius: 18px;
  --card-bg: linear-gradient(160deg, rgba(40, 16, 12, 0.78), rgba(20, 8, 6, 0.65));
  --card-border: 1px solid rgba(232, 140, 60, 0.2);
  --card-border-hover: rgba(255, 180, 80, 0.45);
  --card-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(232, 100, 40, 0.04);
  --card-shadow-hover: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(232, 120, 40, 0.18);
  --card-blur: blur(14px);
  --card-shine: radial-gradient(ellipse at 20% 0%, rgba(255,200,120,0.12), transparent 55%);
  --card-shine-opacity: 1;
  --card-top-line: linear-gradient(90deg, transparent, rgba(255,180,80,0.55), transparent);
  --card-sigil-opacity: 0.1;
  --card-featured-shadow: 0 0 0 1px rgba(255, 180, 80, 0.4), 0 0 40px rgba(232, 120, 40, 0.2);

  --picker-bg: rgba(20, 8, 6, 0.94);
  --picker-border: 1px solid rgba(232, 140, 60, 0.25);
  --picker-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  --picker-tab-hover: rgba(232, 140, 60, 0.08);
  --picker-tab-active: rgba(232, 140, 60, 0.15);
  --picker-tab-active-border: rgba(255, 180, 80, 0.4);
}

body[data-skin="ember"] .btn--gold {
  animation: ember-pulse 3s ease-in-out infinite;
}

@keyframes ember-pulse {
  0%, 100% { box-shadow: 0 8px 36px rgba(232, 120, 40, 0.45), 0 0 20px rgba(255, 140, 40, 0.2); }
  50% { box-shadow: 0 8px 36px rgba(232, 120, 40, 0.55), 0 0 32px rgba(255, 160, 60, 0.35); }
}

body[data-skin="ember"] .glass-card::after {
  box-shadow: 0 0 12px rgba(255, 160, 60, 0.25);
}


/* ═══════════════════════════════════════════════════════════
   III · VEIL — лунный серебро, туман, холодная тайна
   ═══════════════════════════════════════════════════════════ */

body[data-skin="veil"] {
  --bg-base: #060810;
  --bg-pos: 72% 40%;
  --bg-pos-mobile: 46% 44%;
  --bg-scale: 1.08;
  --bg-scale-mobile: 1.14;
  --bg-scale-tall: 1.26;
  --bg-filter: brightness(1.1) saturate(0.95) hue-rotate(-8deg);
  --bg-veil:
    radial-gradient(
      ellipse 70% 55% at 50% 42%,
      rgba(6, 8, 16, 0.4) 0%,
      rgba(8, 12, 22, 0.14) 52%,
      transparent 82%
    ),
    linear-gradient(
      to right,
      rgba(6, 8, 16, 0.12) 0%,
      rgba(6, 8, 16, 0.04) 30%,
      transparent 52%
    ),
    radial-gradient(ellipse 42% 48% at 86% 44%, rgba(160, 190, 230, 0.14), transparent 62%);
  --bg-veil-mobile:
    radial-gradient(
      ellipse 120% 85% at 50% 40%,
      rgba(6, 8, 16, 0.38) 0%,
      rgba(6, 8, 16, 0.12) 48%,
      transparent 78%
    ),
    linear-gradient(
      to right,
      rgba(6, 8, 16, 0.1) 0%,
      transparent 45%
    ),
    radial-gradient(ellipse 50% 45% at 48% 42%, rgba(160, 190, 230, 0.1), transparent 68%);
  --bg-glow: radial-gradient(circle at 50% 42%, rgba(180, 210, 255, 0.08), transparent 48%),
             radial-gradient(circle at 84% 42%, rgba(180, 210, 255, 0.1), transparent 42%);
  --ambient: radial-gradient(circle at 70% 60%, rgba(140, 170, 220, 0.08), transparent 45%);
  --grain: 0.08;
  --fog-a: rgba(140, 170, 220, 0.22);
  --fog-b: rgba(100, 130, 200, 0.18);
  --fog-c: rgba(180, 200, 240, 0.12);
  --fog-opacity: 0.38;

  --hero-lead: rgba(236, 242, 255, 0.95);
  --hero-eyebrow: rgba(220, 232, 255, 0.9);
  --hero-text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 2px 20px rgba(0, 0, 0, 0.65),
    0 0 1px rgba(0, 0, 0, 0.85);
  --hero-title-shadow:
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 4px 36px rgba(0, 0, 0, 0.7),
    0 0 56px rgba(6, 10, 20, 0.55);

  --text: #dce4f0;
  --text-bright: #f0f4fc;
  --text-muted: rgba(210, 220, 240, 0.82);
  --text-faint: rgba(160, 180, 210, 0.42);
  --selection: rgba(160, 190, 230, 0.35);

  --accent: #a8c0e8;
  --accent-secondary: #d0e0ff;
  --accent-soft: rgba(168, 192, 232, 0.6);
  --border: rgba(168, 192, 232, 0.14);
  --border-strong: rgba(200, 220, 255, 0.3);
  --frame-color: rgba(168, 192, 232, 0.5);
  --sigil-glow: 0 0 28px rgba(168, 192, 232, 0.4);
  --icon-glow: 0 0 14px rgba(200, 220, 255, 0.3);
  --steps-num: rgba(168, 192, 232, 0.25);

  --header-bg: rgba(6, 8, 16, 0.8);
  --header-border: rgba(168, 192, 232, 0.12);
  --nav-hover: rgba(168, 192, 232, 0.08);
  --mobile-bg: rgba(6, 8, 16, 0.97);
  --mobile-bg-solid: #060810;
  --direction-icon-bg: rgba(168, 192, 232, 0.1);
  --direction-icon-border: rgba(168, 192, 232, 0.22);
  --direction-icon-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --btn-ghost-bg: rgba(16, 22, 40, 0.45);

  --btn-gold-text: #060a14;
  --btn-gold-bg: linear-gradient(135deg, #f0f4ff 0%, #b8cce8 45%, #88a8d0 100%);
  --btn-gold-border: rgba(220, 235, 255, 0.45);
  --btn-gold-shadow: 0 8px 32px rgba(120, 152, 200, 0.35), 0 0 24px rgba(168, 192, 232, 0.2);
  --btn-gold-shadow-hover: 0 14px 44px rgba(120, 152, 200, 0.5), 0 0 40px rgba(200, 220, 255, 0.25);
  --btn-outline-bg: rgba(16, 22, 40, 0.35);
  --btn-outline-hover: rgba(168, 192, 232, 0.1);

  --channel-bg: linear-gradient(155deg, rgba(24, 32, 56, 0.85), rgba(14, 20, 38, 0.75));
  --channel-bg-hover: linear-gradient(155deg, rgba(32, 42, 72, 0.92), rgba(18, 26, 48, 0.85));
  --channel-border: rgba(200, 220, 255, 0.28);
  --channel-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --channel-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(168, 192, 232, 0.12);
  --daily-card-glow: rgba(168, 192, 232, 0.2);
  --daily-slide-bg:
    radial-gradient(ellipse 90% 70% at 18% 50%, rgba(168, 192, 232, 0.14), transparent 58%),
    radial-gradient(ellipse 60% 50% at 88% 40%, rgba(100, 130, 200, 0.08), transparent 55%),
    linear-gradient(180deg, #04060e 0%, #080c18 45%, #04060e 100%);
  --daily-slide-glow: rgba(168, 192, 232, 0.28);
  --daily-slide-panel-bg: rgba(12, 18, 34, 0.55);

  --card-radius: 22px;
  --card-bg: linear-gradient(155deg, rgba(16, 22, 42, 0.75), rgba(10, 14, 28, 0.6));
  --card-border: 1px solid rgba(168, 192, 232, 0.16);
  --card-border-hover: rgba(200, 220, 255, 0.38);
  --card-shadow: 0 12px 44px rgba(0, 0, 0, 0.38), inset 0 0 30px rgba(168, 192, 232, 0.03);
  --card-shadow-hover: 0 20px 52px rgba(0, 0, 0, 0.48), 0 0 35px rgba(168, 192, 232, 0.12);
  --card-blur: blur(22px) saturate(120%);
  --card-shine: linear-gradient(180deg, rgba(220,235,255,0.07), transparent 40%);
  --card-shine-opacity: 1;
  --card-top-line: linear-gradient(90deg, transparent, rgba(200,220,255,0.45), transparent);
  --card-sigil-opacity: 0.09;
  --card-featured-shadow: 0 0 0 1px rgba(200, 220, 255, 0.35), 0 0 35px rgba(168, 192, 232, 0.15);

  --picker-bg: rgba(6, 8, 16, 0.93);
  --picker-border: 1px solid rgba(168, 192, 232, 0.2);
  --picker-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --picker-tab-hover: rgba(168, 192, 232, 0.07);
  --picker-tab-active: rgba(168, 192, 232, 0.12);
  --picker-tab-active-border: rgba(200, 220, 255, 0.32);
}

body[data-skin="veil"] .hero__title em {
  color: #d0e0ff;
  text-shadow: 0 0 20px rgba(168, 192, 232, 0.35);
}

body[data-skin="veil"] .daily-slide__title em {
  color: #d0e0ff;
  text-shadow: 0 0 20px rgba(168, 192, 232, 0.35);
}

body[data-skin="veil"] .glass-card {
  border-style: solid;
  border-width: 1px;
  border-image: none;
}


/* ═══════════════════════════════════════════════════════════
   IV · ARCANE — гримуар, руны, тёмная магия, золотые линии
   ═══════════════════════════════════════════════════════════ */

body[data-skin="arcane"] {
  --bg-base: #050308;
  --bg-pos: 77% 44%;
  --bg-pos-mobile: 82% 34%;
  --bg-scale: 1.09;
  --bg-filter: brightness(1.05) saturate(0.9) contrast(1.05);
  --bg-veil:
    linear-gradient(
      104deg,
      rgba(5, 3, 8, 0.94) 0%,
      rgba(10, 6, 16, 0.78) 30%,
      rgba(16, 10, 24, 0.42) 50%,
      rgba(8, 5, 12, 0.15) 70%,
      transparent 100%
    ),
    radial-gradient(ellipse 48% 42% at 81% 48%, rgba(80, 40, 120, 0.12), transparent 58%);
  --bg-glow: radial-gradient(circle at 79% 46%, rgba(180, 140, 60, 0.1), transparent 40%);
  --ambient: none;
  --grain: 0.14;

  --text: #e8e0d8;
  --text-bright: #f5f0e8;
  --text-muted: rgba(232, 224, 216, 0.62);
  --text-faint: rgba(180, 160, 140, 0.4);
  --selection: rgba(180, 140, 60, 0.35);

  --accent: #b8942e;
  --accent-secondary: #e8d5a0;
  --accent-soft: rgba(180, 140, 60, 0.55);
  --border: rgba(180, 140, 60, 0.14);
  --border-strong: rgba(180, 140, 60, 0.32);
  --frame-color: rgba(180, 140, 60, 0.65);
  --sigil-glow: none;
  --icon-glow: none;
  --steps-num: rgba(180, 140, 60, 0.22);
  --nav-radius: 0;
  --btn-radius: 0;
  --card-radius: 4px;
  --grid-gap: 1px;

  --header-bg: rgba(5, 3, 8, 0.94);
  --header-border: rgba(180, 140, 60, 0.18);
  --nav-hover: rgba(180, 140, 60, 0.06);
  --mobile-bg: rgba(5, 3, 8, 0.98);
  --btn-ghost-bg: transparent;

  --btn-gold-text: #0a0608;
  --btn-gold-bg: linear-gradient(180deg, #e8d5a0, #b8942e, #806020);
  --btn-gold-border: rgba(232, 213, 160, 0.45);
  --btn-gold-shadow: 0 6px 24px rgba(180, 140, 60, 0.3);
  --btn-gold-shadow-hover: 0 10px 36px rgba(180, 140, 60, 0.45);
  --btn-outline-bg: transparent;
  --btn-outline-hover: rgba(180, 140, 60, 0.08);

  --card-bg: rgba(10, 6, 14, 0.88);
  --card-border: 1px solid rgba(180, 140, 60, 0.2);
  --card-border-hover: rgba(232, 213, 160, 0.45);
  --card-shadow: none;
  --card-shadow-hover: 0 0 30px rgba(180, 140, 60, 0.08);
  --card-blur: none;
  --card-shine: none;
  --card-shine-opacity: 0;
  --card-top-line: linear-gradient(90deg, transparent, rgba(180,140,60,0.6), transparent);
  --card-top-opacity: 1;
  --card-sigil-opacity: 0.12;
  --card-featured-shadow: inset 0 0 50px rgba(180, 140, 60, 0.05), 0 0 0 1px rgba(180, 140, 60, 0.45);

  --picker-bg: rgba(10, 6, 14, 0.96);
  --picker-border: 1px solid rgba(180, 140, 60, 0.22);
  --picker-radius: 0;
  --picker-tab-radius: 0;
  --picker-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  --picker-tab-hover: rgba(180, 140, 60, 0.06);
  --picker-tab-active: rgba(180, 140, 60, 0.1);
  --picker-tab-active-border: rgba(180, 140, 60, 0.35);
}

body[data-skin="arcane"] .directions__grid,
body[data-skin="arcane"] .pricing__grid,
body[data-skin="arcane"] .steps__list {
  background: rgba(180, 140, 60, 0.12);
  gap: 1px;
}

body[data-skin="arcane"] .section__title,
body[data-skin="arcane"] .directions__name {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body[data-skin="arcane"] .hero-cine__corner {
  width: 40px;
  height: 40px;
}

body[data-skin="arcane"] .glass-card {
  box-shadow: inset 0 -1px 0 rgba(180, 140, 60, 0.12);
}


/* ═══════════════════════════════════════════════════════════
   V · LUMEN — портал света, максимальный зов, shimmer-кнопки
   ═══════════════════════════════════════════════════════════ */

body[data-skin="lumen"] {
  --bg-base: #0a0618;
  --bg-pos: 79% 40%;
  --bg-pos-mobile: 86% 30%;
  --bg-scale: 1.1;
  --bg-filter: brightness(1.18) saturate(1.2);
  --bg-veil:
    linear-gradient(
      100deg,
      rgba(10, 6, 24, 0.85) 0%,
      rgba(16, 8, 36, 0.58) 32%,
      rgba(24, 12, 48, 0.22) 52%,
      rgba(12, 6, 28, 0.06) 72%,
      transparent 100%
    ),
    radial-gradient(ellipse 60% 50% at 83% 46%, rgba(160, 80, 255, 0.2), transparent 58%);
  --bg-glow:
    radial-gradient(circle at 81% 44%, rgba(255, 200, 100, 0.15), transparent 35%),
    radial-gradient(circle at 75% 55%, rgba(180, 100, 255, 0.12), transparent 40%);
  --ambient:
    radial-gradient(circle at 20% 30%, rgba(120, 60, 255, 0.08), transparent 35%),
    radial-gradient(circle at 88% 50%, rgba(255, 180, 80, 0.1), transparent 38%);
  --grain: 0.05;

  --text: #f0ecff;
  --text-bright: #fff;
  --text-muted: rgba(220, 210, 255, 0.72);
  --text-faint: rgba(180, 160, 220, 0.45);
  --selection: rgba(160, 80, 255, 0.4);

  --accent: #e8c050;
  --accent-secondary: #c4a0ff;
  --accent-soft: rgba(196, 160, 255, 0.65);
  --border: rgba(196, 160, 255, 0.16);
  --border-strong: rgba(232, 192, 80, 0.35);
  --frame-color: rgba(232, 192, 80, 0.55);
  --sigil-glow: 0 0 32px rgba(232, 192, 80, 0.5), 0 0 64px rgba(160, 80, 255, 0.25);
  --icon-glow: 0 0 18px rgba(232, 192, 80, 0.4);
  --steps-num: rgba(196, 160, 255, 0.35);

  --header-bg: rgba(10, 6, 24, 0.75);
  --header-border: rgba(196, 160, 255, 0.15);
  --nav-hover: rgba(160, 80, 255, 0.12);
  --mobile-bg: rgba(10, 6, 24, 0.96);
  --btn-ghost-bg: rgba(160, 80, 255, 0.08);

  --btn-gold-text: #1a0a28;
  --btn-gold-bg: linear-gradient(135deg, #ffe080 0%, #e8c050 35%, #c080ff 70%, #9060e0 100%);
  --btn-gold-border: rgba(255, 240, 180, 0.5);
  --btn-gold-shadow: 0 8px 40px rgba(232, 192, 80, 0.4), 0 0 30px rgba(160, 80, 255, 0.25);
  --btn-gold-shadow-hover: 0 16px 56px rgba(232, 192, 80, 0.55), 0 0 50px rgba(160, 80, 255, 0.4);
  --btn-outline-bg: rgba(160, 80, 255, 0.08);
  --btn-outline-hover: rgba(160, 80, 255, 0.16);

  --card-radius: 18px;
  --card-bg: linear-gradient(145deg, rgba(24, 12, 48, 0.78), rgba(14, 8, 32, 0.65));
  --card-border: 1px solid rgba(196, 160, 255, 0.2);
  --card-border-hover: rgba(232, 192, 80, 0.45);
  --card-shadow: 0 12px 44px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --card-shadow-hover: 0 22px 56px rgba(0, 0, 0, 0.5), 0 0 40px rgba(160, 80, 255, 0.15);
  --card-blur: blur(16px);
  --card-shine: linear-gradient(135deg, rgba(255,224,128,0.1), rgba(160,80,255,0.06), transparent 60%);
  --card-shine-opacity: 1;
  --card-top-line: linear-gradient(90deg, rgba(160,80,255,0.3), rgba(255,224,128,0.6), rgba(160,80,255,0.3));
  --card-sigil-opacity: 0.1;
  --card-featured-shadow: 0 0 0 1px rgba(232, 192, 80, 0.4), 0 0 45px rgba(160, 80, 255, 0.2);

  --picker-bg: rgba(14, 8, 32, 0.92);
  --picker-border: 1px solid rgba(196, 160, 255, 0.22);
  --picker-shadow: 0 0 40px rgba(160, 80, 255, 0.15);
  --picker-tab-hover: rgba(160, 80, 255, 0.1);
  --picker-tab-active: rgba(160, 80, 255, 0.18);
  --picker-tab-active-border: rgba(232, 192, 80, 0.35);
}

body[data-skin="lumen"] .btn--gold {
  background-size: 200% 200%;
  animation: lumen-gradient 5s ease infinite;
}

@keyframes lumen-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

body[data-skin="lumen"] .hero-cine__title em {
  background: linear-gradient(90deg, #ffe080, #c4a0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body[data-skin="lumen"] .glass-card {
  position: relative;
}

body[data-skin="lumen"] .glass-card:hover {
  animation: lumen-card-glow 2s ease infinite alternate;
}

@keyframes lumen-card-glow {
  from { box-shadow: 0 12px 44px rgba(0,0,0,0.4), 0 0 20px rgba(160,80,255,0.1); }
  to { box-shadow: 0 22px 56px rgba(0,0,0,0.5), 0 0 35px rgba(232,192,80,0.15); }
}

body[data-skin="lumen"] .cta-final__shell {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(160, 80, 255, 0.12), transparent 55%),
    var(--card-bg);
}

body[data-skin="lumen"] .cta-final__shell {
  background: linear-gradient(
    118deg,
    rgba(8, 12, 24, 0.97) 0%,
    rgba(20, 14, 36, 0.92) 42%,
    rgba(6, 10, 22, 0.98) 100%
  );
}


/* Skin switch transition */
body.skin-switching,
body.skin-switching * {
  transition-duration: 0.45s !important;
}