/* Viz-inspired skins — export-safe layers (no filter/mask; minimal tiling) */

.promo-card {
  --card-accent-rgb: 51, 255, 0;
}

/* --- terminal --- */
.theme-terminal {
  --card-accent-rgb: 80, 255, 120;
}
.theme-terminal .card-bg {
  background:
    radial-gradient(ellipse 110% 75% at 50% 12%, rgba(80, 255, 120, 0.52), transparent 58%),
    radial-gradient(circle at 12% 88%, rgba(0, 200, 70, 0.28), transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(60, 255, 140, 0.18), transparent 38%),
    linear-gradient(180deg, #0e2e1a 0%, #082014 38%, #04140c 72%, #020806 100%);
}
.theme-terminal .card-bg-layer-a {
  background:
    linear-gradient(180deg, rgba(80, 255, 120, 0.14) 2px, transparent 2px),
    linear-gradient(90deg, rgba(80, 255, 120, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, transparent 5%, rgba(80, 255, 120, 0.55) 5%, rgba(80, 255, 120, 0.55) 7%, transparent 7%) 0 14% / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 5%, rgba(80, 255, 120, 0.38) 5%, rgba(80, 255, 120, 0.38) 42%, transparent 42%) 0 20% / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 5%, rgba(80, 255, 120, 0.32) 5%, rgba(80, 255, 120, 0.32) 24%, transparent 24%) 0 26% / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 5%, rgba(80, 255, 120, 0.28) 5%, rgba(80, 255, 120, 0.28) 58%, transparent 58%) 0 32% / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 5%, rgba(80, 255, 120, 0.22) 5%, rgba(80, 255, 120, 0.22) 18%, transparent 18%) 0 78% / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 5%, rgba(80, 255, 120, 0.18) 5%, rgba(80, 255, 120, 0.18) 36%, transparent 36%) 0 84% / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 46%, rgba(120, 255, 160, 0.75) 46%, rgba(120, 255, 160, 0.75) 48%, transparent 48%) 0 84% / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(80, 255, 120, 0.08) 0%, transparent 22%, transparent 100%);
  background-size: 100% 32px, 48px 100%, auto, auto, auto, auto, auto, auto, auto;
  opacity: 0.95;
}
.theme-terminal .card-bg-layer-b {
  inset: -12%;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(80, 255, 120, 0.2) 0%, transparent 52%),
    radial-gradient(circle at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(80, 255, 120, 0.06) 0%, transparent 18%, transparent 82%, rgba(0, 0, 0, 0.35) 100%);
}
.theme-terminal .card-scanlines { opacity: 0.42; }

/* --- matrix rain --- */
.theme-matrix-rain {
  --card-accent-rgb: 57, 255, 136;
}
.theme-matrix-rain .card-bg {
  background: linear-gradient(180deg, #001a0a 0%, #000 55%, #001208 100%);
}
.theme-matrix-rain .card-bg-layer-a {
  background:
    linear-gradient(180deg, rgba(57, 255, 136, 0.14) 0%, transparent 28%),
    linear-gradient(180deg, transparent 0%, rgba(57, 255, 136, 0.08) 100%),
    linear-gradient(90deg, transparent 8%, rgba(57, 255, 136, 0.1) 10%, transparent 12%),
    linear-gradient(90deg, transparent 34%, rgba(57, 255, 136, 0.08) 36%, transparent 40%),
    linear-gradient(90deg, transparent 62%, rgba(57, 255, 136, 0.12) 64%, transparent 68%),
    linear-gradient(90deg, transparent 84%, rgba(57, 255, 136, 0.07) 86%, transparent 90%);
}
.theme-matrix-rain .card-bg-layer-b {
  background:
    radial-gradient(circle at 18% 22%, rgba(57, 255, 136, 0.35) 0, transparent 42%),
    radial-gradient(circle at 72% 68%, rgba(57, 255, 136, 0.22) 0, transparent 38%),
    radial-gradient(circle at 48% 48%, rgba(120, 255, 180, 0.12) 0, transparent 55%);
}
.theme-matrix-rain .card-scanlines { opacity: 0.2; }

/* --- neon bloom --- */
.theme-neon-bloom {
  --card-accent-rgb: 255, 120, 240;
}
.theme-neon-bloom .card-bg {
  background:
    radial-gradient(circle at 15% 85%, rgba(255, 60, 180, 0.6), transparent 44%),
    radial-gradient(circle at 85% 15%, rgba(0, 220, 255, 0.5), transparent 46%),
    radial-gradient(circle at 55% 45%, rgba(140, 80, 255, 0.32), transparent 52%),
    linear-gradient(145deg, #1a0030 0%, #0a0018 50%, #12002a 100%);
}
.theme-neon-bloom .card-bg-layer-a {
  inset: -20%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 60, 180, 0.28), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(0, 220, 255, 0.22), transparent 48%);
}
.theme-neon-bloom .card-scanlines { opacity: 0.06; }

/* --- aurora --- */
.theme-aurora {
  --card-accent-rgb: 100, 240, 220;
}
.theme-aurora .card-bg {
  background: linear-gradient(160deg, #061428 0%, #0c2848 35%, #1a1848 65%, #280838 100%);
}
.theme-aurora .card-bg-layer-a {
  inset: -18%;
  background:
    radial-gradient(ellipse 90% 45% at 25% 40%, rgba(45, 220, 200, 0.42), transparent 58%),
    radial-gradient(ellipse 80% 40% at 72% 55%, rgba(220, 90, 255, 0.32), transparent 55%),
    radial-gradient(ellipse 70% 35% at 50% 30%, rgba(99, 130, 255, 0.35), transparent 52%);
  animation: aurora-shift 10s ease-in-out infinite alternate;
}
.theme-aurora .card-bg-layer-b {
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(100, 240, 220, 0.18), transparent 72%);
}
.theme-aurora .card-scanlines { opacity: 0.1; }

@keyframes aurora-shift {
  from { transform: translateX(-4%) skewY(-2deg); }
  to { transform: translateX(4%) skewY(2deg); }
}

/* --- pulsegrid --- */
.theme-pulsegrid {
  --card-accent-rgb: 0, 255, 200;
}
.theme-pulsegrid .card-bg {
  background:
    radial-gradient(circle at 50% 22%, rgba(0, 255, 200, 0.38), transparent 52%),
    radial-gradient(circle at 20% 78%, rgba(0, 180, 255, 0.2), transparent 42%),
    linear-gradient(180deg, #0c1e28 0%, #061018 55%, #030a10 100%);
}
.theme-pulsegrid .card-bg-layer-a {
  background:
    linear-gradient(rgba(0, 255, 200, 0.22) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0, 255, 200, 0.22) 2px, transparent 2px),
    linear-gradient(rgba(0, 255, 200, 0.08) 64px, transparent 64px),
    linear-gradient(90deg, rgba(0, 255, 200, 0.08) 64px, transparent 64px);
  background-size: 64px 64px, 64px 64px, 64px 64px, 64px 64px;
  opacity: 1;
}
.theme-pulsegrid .card-bg-layer-b {
  background:
    radial-gradient(circle at 28% 38%, rgba(0, 255, 200, 0.42) 0, transparent 38%),
    radial-gradient(circle at 72% 62%, rgba(0, 200, 255, 0.32) 0, transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(0, 255, 200, 0.18), transparent 62%);
}
.theme-pulsegrid .card-scanlines { opacity: 0.12; }

/* --- orbital --- */
.theme-orbital {
  --card-accent-rgb: 120, 210, 255;
}
.theme-orbital .card-bg {
  background:
    radial-gradient(ellipse 80% 55% at 50% 36%, rgba(80, 170, 255, 0.35), transparent 58%),
    radial-gradient(circle at 50% 45%, #142848 0%, #081828 50%, #020810 100%);
}
.theme-orbital .card-bg-layer-a {
  left: 50%;
  top: 40%;
  right: auto;
  bottom: auto;
  width: 94%;
  height: 40%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    transparent 52%,
    rgba(120, 210, 255, 0.55) 58%,
    rgba(120, 210, 255, 0.22) 66%,
    transparent 74%
  );
  box-shadow: 0 0 64px rgba(120, 210, 255, 0.28);
}
.theme-orbital .card-bg-layer-b {
  left: 50%;
  top: 40%;
  right: auto;
  bottom: auto;
  width: 70%;
  height: 28%;
  transform: translate(-50%, -50%) rotate(-12deg);
  border: none;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    transparent 48%,
    rgba(180, 230, 255, 0.48) 56%,
    rgba(120, 210, 255, 0.18) 64%,
    transparent 72%
  );
  box-shadow: 0 0 40px rgba(120, 210, 255, 0.2);
}
.theme-orbital .card-scanlines { opacity: 0.08; }

/* --- equalizer --- */
.theme-equalizer {
  --card-accent-rgb: 255, 200, 80;
}
.theme-equalizer .card-bg {
  background: linear-gradient(180deg, #120818 0%, #080410 40%, #000 100%);
}
.theme-equalizer .card-bg-layer-a {
  background:
    linear-gradient(180deg, transparent 42%, rgba(255, 80, 120, 0.5) 42%, rgba(255, 80, 120, 0.5) 88%, transparent 88%) 8% 0 / 6% 100% no-repeat,
    linear-gradient(180deg, transparent 35%, rgba(80, 220, 255, 0.45) 35%, rgba(80, 220, 255, 0.45) 92%, transparent 92%) 20% 0 / 5% 100% no-repeat,
    linear-gradient(180deg, transparent 48%, rgba(255, 200, 80, 0.5) 48%, rgba(255, 200, 80, 0.5) 82%, transparent 82%) 32% 0 / 7% 100% no-repeat,
    linear-gradient(180deg, transparent 30%, rgba(255, 80, 120, 0.42) 30%, rgba(255, 80, 120, 0.42) 95%, transparent 95%) 46% 0 / 5% 100% no-repeat,
    linear-gradient(180deg, transparent 40%, rgba(80, 220, 255, 0.48) 40%, rgba(80, 220, 255, 0.48) 85%, transparent 85%) 58% 0 / 6% 100% no-repeat,
    linear-gradient(180deg, transparent 52%, rgba(255, 200, 80, 0.46) 52%, rgba(255, 200, 80, 0.46) 78%, transparent 78%) 72% 0 / 5% 100% no-repeat,
    linear-gradient(180deg, transparent 38%, rgba(255, 80, 120, 0.4) 38%, rgba(255, 80, 120, 0.4) 90%, transparent 90%) 86% 0 / 6% 100% no-repeat;
  opacity: 0.8;
}
.theme-equalizer .card-bg-layer-b {
  background: linear-gradient(180deg, transparent, rgba(255, 120, 60, 0.12));
}
.theme-equalizer .card-scanlines { opacity: 0.1; }

/* --- cyber city --- */
.theme-cyber-city {
  --card-accent-rgb: 255, 160, 60;
}
.theme-cyber-city .card-bg {
  background: linear-gradient(180deg, #2a0848 0%, #180828 25%, #0a1020 55%, #020208 100%);
}
.theme-cyber-city .card-bg-layer-a {
  top: 14%;
  left: 0;
  right: 0;
  bottom: auto;
  height: 32%;
  background: linear-gradient(
    180deg,
    rgba(255, 100, 180, 0.45) 0%,
    rgba(255, 160, 60, 0.58) 50%,
    rgba(255, 220, 120, 0.2) 100%
  );
}
.theme-cyber-city .card-bg-layer-b {
  top: 18%;
  bottom: 0;
  height: auto;
  background:
    linear-gradient(180deg, #1a1038 0%, #12082a 100%) 2% 100% / 7% 48% no-repeat,
    linear-gradient(180deg, #221248 0%, #181030 100%) 10% 100% / 5% 62% no-repeat,
    linear-gradient(180deg, #2a1858 0%, #1a1038 100%) 16% 100% / 9% 72% no-repeat,
    linear-gradient(180deg, #1e1240 0%, #140c28 100%) 26% 100% / 6% 55% no-repeat,
    linear-gradient(180deg, #321a68 0%, #201040 100%) 33% 100% / 11% 82% no-repeat,
    linear-gradient(180deg, #1a1038 0%, #100820 100%) 45% 100% / 7% 58% no-repeat,
    linear-gradient(180deg, #281550 0%, #181030 100%) 53% 100% / 8% 68% no-repeat,
    linear-gradient(180deg, #1e1240 0%, #12082a 100%) 62% 100% / 6% 52% no-repeat,
    linear-gradient(180deg, #3a1e78 0%, #241448 100%) 69% 100% / 10% 78% no-repeat,
    linear-gradient(180deg, #221248 0%, #140c28 100%) 80% 100% / 7% 60% no-repeat,
    linear-gradient(180deg, #2a1858 0%, #181030 100%) 88% 100% / 9% 70% no-repeat,
    linear-gradient(180deg, #1a1038 0%, #0c0618 100%) 97% 100% / 6% 45% no-repeat,
    radial-gradient(circle at 6% 58%, rgba(255, 220, 120, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 13% 42%, rgba(255, 160, 80, 0.85) 0 2px, transparent 3px),
    radial-gradient(circle at 20% 52%, rgba(255, 200, 100, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 36%, rgba(255, 120, 200, 0.8) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 58%, rgba(255, 220, 120, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 57% 46%, rgba(255, 180, 80, 0.85) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 40%, rgba(255, 200, 100, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 77% 60%, rgba(255, 120, 200, 0.8) 0 2px, transparent 3px),
    radial-gradient(circle at 93% 48%, rgba(255, 220, 120, 0.9) 0 2px, transparent 3px),
    linear-gradient(180deg, transparent 62%, rgba(255, 120, 60, 0.18) 88%, rgba(255, 80, 140, 0.12) 100%);
  transform: none;
  transform-origin: bottom;
}
.theme-cyber-city .card-scanlines { opacity: 0.08; }

/* --- arcade --- */
.theme-arcade {
  --card-accent-rgb: 80, 255, 160;
}
.theme-arcade .card-bg {
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 80, 255, 0.32), transparent 52%),
    linear-gradient(180deg, #0a0830 0%, #000818 100%);
}
.theme-arcade .card-bg-layer-a {
  background:
    linear-gradient(rgba(80, 255, 160, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 255, 160, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.65;
}
.theme-arcade .card-bg-layer-b {
  background:
    radial-gradient(circle at 22% 28%, rgba(80, 255, 160, 0.2) 0, transparent 35%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 80, 200, 0.18), transparent 58%);
}
.theme-arcade .card-scanlines { opacity: 0.15; }

/* --- star vortex --- */
.theme-star-vortex {
  --card-accent-rgb: 200, 150, 255;
}
.theme-star-vortex .card-bg {
  background: radial-gradient(ellipse at 50% 50%, #2a1050 0%, #100820 45%, #000 80%);
}
.theme-star-vortex .card-bg-layer-a {
  inset: -22%;
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg,
      rgba(200, 150, 255, 0.32) 42deg,
      transparent 88deg,
      rgba(120, 100, 255, 0.26) 148deg,
      transparent 205deg,
      rgba(255, 120, 220, 0.22) 285deg,
      transparent 360deg
    );
  opacity: 0.85;
}
.theme-star-vortex .card-bg-layer-b {
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 22%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 72%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 62%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 58%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px);
  opacity: 0.65;
}
.theme-star-vortex .card-scanlines { opacity: 0.06; }

/* Export bake: freeze motion, enlarge art — blur applied in export.js */
.exporting .card-bg-art {
  filter: none;
  transform: scale(1.12);
}

.exporting .theme-aurora .card-bg-layer-a {
  animation: none;
}

/* cyber-city skyline is flat — no export override needed */

/* conic-gradient is unreliable in html2canvas — radial fallback for bake */
.exporting .theme-star-vortex .card-bg-layer-a {
  background:
    radial-gradient(circle at 50% 50%, rgba(200, 150, 255, 0.28) 0%, transparent 42%),
    radial-gradient(ellipse 80% 55% at 30% 40%, rgba(120, 100, 255, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 72% 58%, rgba(255, 120, 220, 0.18) 0%, transparent 52%);
}