/* ═══════════════════════════════════════════════════════════════════
   themes.css — Giftly theme CSS variable overrides + particle styles
   Each body class maps to a complete --var set.
   Particle element styles and keyframes live at the bottom.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Theme: Dazzle ─────────────────────────────────────────────────── */
body.theme-dazzle {
  --bg: #0a0a1a;
  --bg2: #0d0d22;
  --bg3: #111128;
  --surface: #131325;
  --surface-border: rgba(255,255,255,0.14);
  --card-bg: rgba(18, 10, 40, 0.90);
  --text: #f0e6ff;
  --muted: #b8a8d8;
  --border: rgba(200, 150, 255, 0.16);
  --gold: #ffd700;
  --blue: #a855f7;
  --blue2: #d8aaff;
  --accent: #ffd700;
  background:
    radial-gradient(ellipse at 30% 20%, #200a4a 0%, #0a0a1a 55%),
    radial-gradient(ellipse at 75% 80%, #0f0030 0%, #0a0a1a 45%) fixed;
}

/* Dazzle gem-light shimmer */
body.theme-dazzle::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 15% 40%, rgba(200,100,255,0.10) 0%, transparent 30%),
    radial-gradient(ellipse at 85% 55%, rgba(255,210,0,0.07)   0%, transparent 28%),
    radial-gradient(ellipse at 50% 15%, rgba(168,85,247,0.08)  0%, transparent 35%),
    radial-gradient(ellipse at 70% 90%, rgba(255,180,50,0.06)  0%, transparent 25%);
  animation: dazzle-shimmer 5s ease-in-out infinite;
}

@keyframes dazzle-shimmer {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.03); }
}

/* ── Theme: Rainbow ────────────────────────────────────────────────── */
body.theme-rainbow {
  --bg: #fff9fe;
  --bg2: #fff0fd;
  --bg3: #ffe8fc;
  --surface: #ffffff;
  --surface-border: #e8d0f0;
  --card-bg: rgba(255, 255, 255, 0.95);
  --text: #1a1a2e;
  --muted: #5a4a6a;
  --border: rgba(200, 80, 220, 0.18);
  --gold: #ff6b6b;
  --blue: #4ecdc4;
  --accent: #a855f7;
  background: linear-gradient(135deg, #fff9fe 0%, #fce4ff 50%, #e8f4ff 100%) fixed;
}

/* ── Theme: Nature ─────────────────────────────────────────────────── */
body.theme-nature {
  --bg: #0a1c0a;
  --bg2: #0f2410;
  --bg3: #142e14;
  --surface: #162e16;
  --surface-border: rgba(100,200,100,0.18);
  --card-bg: rgba(8, 22, 8, 0.92);
  --text: #c8ecd0;
  --muted: #80c890;
  --border: rgba(80, 180, 80, 0.18);
  --gold: #7ecb7e;
  --blue: #52b788;
  --blue2: #8cd88c;
  --accent: #52d68a;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(20,60,20,0.8) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 20%, rgba(30,80,10,0.5) 0%, transparent 45%),
    #0a1c0a fixed;
}

/* Light rays through the canopy */
body.theme-nature::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      108deg,
      transparent 0%,
      transparent 9%,
      rgba(120,220,80,0.028) 10%,
      transparent 11%
    );
  animation: nature-rays 12s ease-in-out infinite;
}

@keyframes nature-rays {
  0%,100% { opacity: 0.8; transform: scaleX(1); }
  50%      { opacity: 1;   transform: scaleX(1.04); }
}

/* ── Theme: Sunset ─────────────────────────────────────────────────── */
body.theme-sunset {
  --bg: #1a0a00;
  --bg2: #200d00;
  --bg3: #2a1000;
  --surface: rgba(30, 8, 0, 0.97);
  --surface-border: rgba(255,120,30,0.25);
  /* Previously 7% white — invisible over the bright orange gradient end.
     Changed to a solid dark amber-black so card text is always readable. */
  --card-bg: rgba(32, 12, 0, 0.92);
  --text: #ffe8cc;
  --muted: #cc8855;
  --border: rgba(255,150,50,0.2);
  --gold: #ff9500;
  --blue: #ff4500;
  --blue2: #ffaa44;
  --accent: #ffd700;
  background: linear-gradient(180deg, #0d0510 0%, #3d0c02 30%, #7a1a00 55%, #c44b00 75%, #ff6b00 90%, #ff9500 100%) fixed;
}

/* Home sections — solid surface over the bright orange/red gradient */
body.theme-sunset .home-section {
  background: rgba(32, 10, 0, 0.90);
  border-color: rgba(255, 120, 30, 0.25);
}

/* ── Theme: Sakura ──────────────────────────────────────────────────── */
body.theme-sakura {
  --bg: #fdf0f3;
  --bg2: #fce4e9;
  --bg3: #fbd8e0;
  --surface: #fff8f9;
  --surface-border: rgba(255,120,150,0.28);
  --card-bg: rgba(255, 248, 250, 0.94);
  --text: #3d0e1c;
  --muted: #8c3548;
  --border: rgba(255, 120, 150, 0.22);
  --gold: #ff8fab;
  --blue: #ff6b9d;
  --accent: #e8507a;
  background:
    radial-gradient(ellipse at 60% 0%, rgba(255,190,210,0.55) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(255,160,190,0.35) 0%, transparent 45%),
    #fdf0f3 fixed;
}

/* Soft bokeh bloom overlay */
body.theme-sakura::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,140,170,0.12) 0%, transparent 22%),
    radial-gradient(circle at 80% 15%, rgba(255,160,190,0.10) 0%, transparent 18%),
    radial-gradient(circle at 50% 70%, rgba(255,120,150,0.08) 0%, transparent 25%);
  animation: sakura-bloom 7s ease-in-out infinite;
}

@keyframes sakura-bloom {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ── Theme: Mystic ──────────────────────────────────────────────────── */
body.theme-mystic {
  --bg: #08001a;
  --bg2: #0d001f;
  --bg3: #120025;
  --surface: #13002a;
  --surface-border: rgba(168,85,247,0.28);
  --card-bg: rgba(18, 0, 44, 0.92);
  --text: #ecd8ff;
  --muted: #b890e0;
  --border: rgba(168,85,247,0.24);
  --gold: #c084fc;
  --blue: #818cf8;
  --blue2: #c084fc;
  --accent: #a855f7;
  background:
    radial-gradient(ellipse at 40% 25%, #220050 0%, #08001a 55%),
    radial-gradient(ellipse at 65% 75%, #10003a 0%, #08001a 45%) fixed;
}

/* Arcane nebula glow */
body.theme-mystic::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(168,85,247,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 70%, rgba(192,132,252,0.07) 0%, transparent 30%),
    radial-gradient(ellipse at 80% 20%, rgba(129,140,248,0.06) 0%, transparent 28%);
  animation: mystic-nebula 6s ease-in-out infinite;
}

@keyframes mystic-nebula {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ── Theme: Ocean ───────────────────────────────────────────────────── */
body.theme-ocean {
  --bg: #001a2e;
  --bg2: #002244;
  --bg3: #002a50;
  --surface: rgba(0, 18, 48, 0.97);
  --surface-border: rgba(0,210,255,0.22);
  /* Previously 9% opacity — invisible over the bright teal gradient end.
     Changed to a solid dark navy so card text is always readable. */
  --card-bg: rgba(0, 22, 60, 0.92);
  --text: #e0f8ff;
  --muted: #55bbcc;
  --border: rgba(0,210,255,0.25);
  --gold: #00ffcc;
  --blue: #00d4ff;
  --blue2: #00d4ff;
  --accent: #00ff88;
  background: linear-gradient(180deg, #001a2e 0%, #003366 40%, #006699 70%, #00aacc 90%, #00ccaa 100%) fixed;
}

/* Home sections need a solid surface too — otherwise group/pet names
   float invisibly over the bright teal gradient bottom */
body.theme-ocean .home-section {
  background: rgba(0, 20, 55, 0.88);
  border-color: rgba(0, 210, 255, 0.18);
}

/* ── Theme: Matrix ──────────────────────────────────────────────────── */
body.theme-matrix {
  --bg: #000300;
  --bg2: #001000;
  --bg3: #001800;
  --surface: #001200;
  --surface-border: rgba(0,255,65,0.22);
  --card-bg: rgba(0, 18, 4, 0.92);
  --text: #a0ffb8;
  --muted: #00bb28;
  --border: rgba(0,255,65,0.18);
  --gold: #39ff14;
  --blue: #00cc33;
  --blue2: #39ff14;
  --accent: #00ff41;
  background: #000300;
}

/* ── Theme: Synthwave ──────────────────────────────────────────────── */
body.theme-synthwave {
  --bg: #0d0015;
  --bg2: #110020;
  --bg3: #160028;
  --surface: #150022;
  --surface-border: rgba(255,0,255,0.28);
  --card-bg: rgba(22, 0, 40, 0.90);
  --text: #f0c8ff;
  --muted: #cc66ee;
  --border: rgba(255,0,255,0.28);
  --gold: #ffe600;
  --blue: #00ffff;
  --blue2: #00ffff;
  --accent: #ff006e;
  background: #0d0015;
}

/* Perspective grid floor — the signature synthwave element */
body.theme-synthwave::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55vh;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(255,0,255,0.06) 100%),
    repeating-linear-gradient(
      to right,
      rgba(255,0,255,0.25) 0px, transparent 1px,
      transparent calc(10% - 1px), rgba(255,0,255,0.25) 10%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,0,255,0.2) 0px, transparent 1px,
      transparent calc(12% - 1px), rgba(255,0,255,0.2) 12%
    );
  transform: perspective(400px) rotateX(60deg);
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 0;
  animation: synth-grid-scroll 4s linear infinite;
}

@keyframes synth-grid-scroll {
  0%   { background-position: 0 0,   0 0,   0 0%; }
  100% { background-position: 0 0,   0 0,   0 100%; }
}

/* Horizon glow line */
body.theme-synthwave::after {
  content: '';
  position: fixed;
  bottom: 55vh;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #ff00ff, #00ffff, #ff00ff, transparent);
  box-shadow: 0 0 24px 6px #ff00ff80, 0 0 60px 20px #ff006e40;
  pointer-events: none;
  z-index: 1;
  animation: synth-horizon-pulse 2.4s ease-in-out infinite;
}

@keyframes synth-horizon-pulse {
  0%, 100% { opacity: 0.7; box-shadow: 0 0 24px 6px #ff00ff80, 0 0 60px 20px #ff006e40; }
  50%       { opacity: 1;   box-shadow: 0 0 40px 12px #ff00ffcc, 0 0 90px 30px #00ffff60; }
}

/* Sun — big retro half-circle above the horizon */
body.theme-synthwave .synth-sun {
  position: fixed;
  bottom: calc(55vh - 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 80px;
  border-radius: 80px 80px 0 0;
  background: linear-gradient(180deg, #ffe600 0%, #ff9500 40%, #ff006e 100%);
  box-shadow: 0 0 40px 10px #ff006e80, 0 0 100px 30px #ff950050;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Horizontal stripes across the sun */
body.theme-synthwave .synth-sun::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 10px,
    rgba(0,0,0,0.35) 10px,
    rgba(0,0,0,0.35) 14px
  );
}

/* Card chromatic aberration glow */
body.theme-synthwave .gift-card,
body.theme-synthwave .card,
body.theme-synthwave [class*="card"] {
  box-shadow:
    -2px 0 0 rgba(255,0,255,0.4),
     2px 0 0 rgba(0,255,255,0.4),
    0 0 30px rgba(255,0,255,0.15),
    0 0 60px rgba(0,255,255,0.08);
  border-color: rgba(255,0,255,0.3) !important;
}

/* Text glow throughout */
body.theme-synthwave h1,
body.theme-synthwave h2,
body.theme-synthwave h3,
body.theme-synthwave .card-name {
  text-shadow: 0 0 10px #ff00ff, 0 0 30px #ff006e80;
}

/* ── Theme: Retro ──────────────────────────────────────────────────── */
body.theme-retro {
  --bg: #0a0000;
  --bg2: #110011;
  --bg3: #180018;
  --surface: #140010;
  --surface-border: rgba(255,0,255,0.25);
  --card-bg: rgba(24, 0, 20, 0.92);
  --text: #ffaaff;
  --muted: #cc77cc;
  --border: rgba(255, 0, 255, 0.22);
  --gold: #ffff00;
  --blue: #00ffff;
  --blue2: #00ffff;
  --accent: #ff00ff;
  background: #0a0000;
}

/* ── Theme: Universe ───────────────────────────────────────────────── */
body.theme-universe {
  --bg: #020208;
  --bg2: #04040f;
  --bg3: #06060e;
  --surface: #080818;
  --surface-border: rgba(180,200,255,0.12);
  --card-bg: rgba(4, 6, 22, 0.90);
  --text: #e0e8ff;
  --muted: #9aacdd;
  --border: rgba(180, 200, 255, 0.10);
  --gold: #ffd700;
  --blue: #4488ff;
  --blue2: #7aacff;
  --accent: #a0c0ff;
  background:
    radial-gradient(ellipse at 22% 18%, rgba(40,40,160,0.4) 0%, transparent 40%),
    radial-gradient(ellipse at 78% 72%, rgba(60,20,120,0.3) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 45%, rgba(20,10,80,0.5) 0%, transparent 50%),
    #020208 fixed;
}

/* Galaxy nebula clouds */
body.theme-universe::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 30% at 25% 30%, rgba(70,60,200,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 25% at 75% 65%, rgba(130,50,180,0.06) 0%, transparent 55%),
    radial-gradient(ellipse 35% 20% at 55% 15%, rgba(30,80,220,0.07) 0%, transparent 50%);
  animation: universe-drift 10s ease-in-out infinite;
}

@keyframes universe-drift {
  0%,100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* ════════════════════════════════════════════════════════════════════
   PARTICLE ELEMENT STYLES
   All particles share: position:fixed, pointer-events:none, z-index:3
   (matching .snowflake z-index so they all sit on the same layer)
   ════════════════════════════════════════════════════════════════════ */

/* ── Sparkle (Dazzle theme) ──────────────────────────────────────── */
.sparkle-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  animation: sparkle-anim linear infinite;
  transform-origin: center;
  user-select: none;
  /* colour, size, position, duration, delay set inline by theme-engine.js */
}

@keyframes sparkle-anim {
  0%   { opacity: 0;    transform: scale(0.4) rotate(0deg); }
  20%  { opacity: 1;    transform: scale(1.2) rotate(45deg); }
  50%  { opacity: 0.85; transform: scale(1)   rotate(90deg); }
  80%  { opacity: 1;    transform: scale(1.1) rotate(135deg); }
  100% { opacity: 0;    transform: scale(0.4) rotate(180deg); }
}

/* ── Confetti (Rainbow theme) ────────────────────────────────────── */
/* .te-confetti distinguishes theme-engine confetti from the burst     */
/* confetti in app.js (which is body-appended and self-removes)        */
.confetti-particle.te-confetti {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  top: -20px;
  border-radius: 2px;
  animation: confetti-fall linear infinite;
  /* width, height, background, duration, delay set inline */
}

/* Confetti with lateral drift — pieces scatter naturally as they fall */
@keyframes confetti-fall {
  0%   { opacity: 1;   transform: translateY(-20px)  translateX(0)                                   rotate(0deg); }
  12%  { opacity: 1;   transform: translateY(10vh)   translateX(calc(var(--te-drift-x,0px)*0.2))     rotate(var(--te-rotate, 30deg)); }
  30%  {               transform: translateY(28vh)   translateX(var(--te-drift-x, 0px))              rotate(calc(var(--te-rotate,30deg)*1.8)); }
  50%  {               transform: translateY(48vh)   translateX(calc(var(--te-drift-x,0px)*-0.35))   rotate(calc(var(--te-rotate,30deg)*2.8)); }
  70%  {               transform: translateY(70vh)   translateX(var(--te-drift-x, 0px))              rotate(calc(var(--te-rotate,30deg)*3.8)); }
  88%  { opacity: 0.7; transform: translateY(92vh)   translateX(calc(var(--te-drift-x,0px)*0.6))     rotate(calc(var(--te-rotate,30deg)*4.5)); }
  100% { opacity: 0;   transform: translateY(112vh)  translateX(0)                                   rotate(calc(var(--te-rotate,30deg)*5)); }
}

/* ── Leaves (Nature theme) ───────────────────────────────────────── */
.leaf-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  top: -5vh;
  animation: leaf-sway ease-in-out infinite;
  user-select: none;
  /* colour, size, position, duration, delay, --te-sway, animation-name set inline */
}

/* Gentle S-curve sway — the standard drift */
@keyframes leaf-sway {
  0%   { opacity: 0;   transform: translateY(-5vh)   translateX(0)                              rotate(0deg); }
  6%   { opacity: 0.9; }
  22%  {               transform: translateY(18vh)   translateX(var(--te-sway, 35px))            rotate(-22deg); }
  38%  {               transform: translateY(34vh)   translateX(calc(var(--te-sway,35px)*0.25))  rotate(12deg); }
  55%  { opacity: 0.9; transform: translateY(52vh)   translateX(var(--te-sway, 35px))            rotate(-18deg); }
  72%  {               transform: translateY(70vh)   translateX(calc(var(--te-sway,35px)*-0.9))  rotate(20deg); }
  88%  { opacity: 0.4; }
  100% { opacity: 0;   transform: translateY(114vh)  translateX(calc(var(--te-sway,35px)*0.4))   rotate(30deg); }
}

/* Aggressive tumbling spin — used by 1 in 3 leaves */
@keyframes leaf-tumble {
  0%   { opacity: 0;   transform: translateY(-5vh)   translateX(0)                              rotate(0deg)   scale(0.85); }
  7%   { opacity: 0.9; }
  20%  {               transform: translateY(16vh)   translateX(var(--te-sway, 45px))            rotate(-90deg) scale(1.1); }
  40%  {               transform: translateY(36vh)   translateX(0)                              rotate(-200deg) scale(0.9); }
  60%  { opacity: 0.8; transform: translateY(56vh)   translateX(calc(var(--te-sway,45px)*-1.1))  rotate(-300deg) scale(1.05); }
  80%  {               transform: translateY(76vh)   translateX(var(--te-sway, 45px))            rotate(-380deg) scale(0.95); }
  92%  { opacity: 0.2; }
  100% { opacity: 0;   transform: translateY(116vh)  translateX(0)                              rotate(-450deg) scale(0.85); }
}

/* ── Retro glitch chars (Retro theme) ───────────────────────────── */
.retro-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  top: 110vh;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  user-select: none;
  text-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
  animation: retro-drift linear infinite;
}

@keyframes retro-drift {
  0%   {
    opacity: 0;
    transform: translateY(0px) skewX(0deg);
  }
  5%   {
    opacity: 0.9;
  }
  /* glitch blip 1 */
  22%  {
    opacity: 0.9;
    transform: translateY(-24vh) skewX(0deg);
  }
  23%  {
    opacity: 0.3;
    transform: translateY(-24vh) skewX(var(--retro-skew, -5deg)) translateX(3px);
  }
  24%  {
    opacity: 0.9;
    transform: translateY(-24.5vh) skewX(0deg);
  }
  /* glitch blip 2 */
  55%  {
    opacity: 0.85;
    transform: translateY(-57vh) skewX(0deg);
  }
  56%  {
    opacity: 0.2;
    transform: translateY(-57vh) skewX(calc(var(--retro-skew, -5deg) * -1)) translateX(-2px);
  }
  57%  {
    opacity: 0.85;
    transform: translateY(-57.5vh) skewX(0deg);
  }
  /* fade out near top */
  85%  {
    opacity: 0.7;
    transform: translateY(-90vh) skewX(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-115vh) skewX(0deg);
  }
}

/* CRT scanline overlay on the retro body */
body.theme-retro::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.18) 3px,
    rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 2;
  animation: crt-flicker 0.12s steps(1) infinite;
}

@keyframes crt-flicker {
  0%   { opacity: 1; }
  48%  { opacity: 1; }
  49%  { opacity: 0.92; }
  50%  { opacity: 1; }
  97%  { opacity: 1; }
  98%  { opacity: 0.88; }
  99%  { opacity: 1; }
}

/* Phosphor glow — scoped to text elements only (not images / SVGs / icons) */
body.theme-retro h1,
body.theme-retro h2,
body.theme-retro h3,
body.theme-retro h4,
body.theme-retro p,
body.theme-retro span,
body.theme-retro div,
body.theme-retro a,
body.theme-retro button,
body.theme-retro label,
body.theme-retro li,
body.theme-retro td { text-shadow: 0 0 4px currentColor; }

/* ── Synthwave particles ───────────────────────────────────────── */
.synth-particle {
  position: fixed;
  pointer-events: none;
  z-index: 4;
  top: -5vh;
  user-select: none;
  animation: synth-fall linear infinite;
}

@keyframes synth-fall {
  0%   { opacity: 0;   transform: translateY(-5vh)   translateX(0)                       rotate(0deg)   scale(0.6); }
  8%   { opacity: 1; }
  40%  {               transform: translateY(38vh)   translateX(var(--synth-drift,0px))  rotate(120deg) scale(1.1); }
  60%  { opacity: 1; }
  80%  {               transform: translateY(75vh)   translateX(calc(var(--synth-drift,0px)*-0.5)) rotate(260deg) scale(0.9); }
  92%  { opacity: 0.4; }
  100% { opacity: 0;   transform: translateY(108vh)  translateX(var(--synth-drift,0px))  rotate(360deg) scale(0.7); }
}

/* ── Embers (Sunset theme) ──────────────────────────────────────── */
.ember-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  bottom: -10px;
  user-select: none;
  animation: ember-rise ease-in-out infinite;
}

@keyframes ember-rise {
  0%   { opacity: 0;    transform: translateY(0)      translateX(0); }
  10%  { opacity: 1; }
  50%  { opacity: 0.85; transform: translateY(-45vh)  translateX(var(--ember-drift, 0px)); }
  90%  { opacity: 0.3; }
  100% { opacity: 0;    transform: translateY(-100vh) translateX(calc(var(--ember-drift, 0px) * 1.4)); }
}

/* ── Petals (Sakura theme) ───────────────────────────────────────── */
.petal-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  top: -8vh;
  user-select: none;
  animation: petal-fall ease-in-out infinite;
  /* animation-name overridden inline for petal-float variant */
}

/* Standard descent — sway, spin, drift */
@keyframes petal-fall {
  0%   { opacity: 0;   transform: translateY(-5vh)  translateX(0)                                     rotate(0deg)   scale(0.7); }
  6%   { opacity: 0;   transform: translateY(-12vh) translateX(4px)                                   rotate(-8deg)  scale(0.8); } /* tiny upward catch at start */
  11%  { opacity: 0.9; transform: translateY(-2vh)  translateX(-6px)                                  rotate(14deg)  scale(1); }
  28%  {               transform: translateY(20vh)  translateX(var(--petal-sway, 50px))               rotate(calc(var(--petal-spin,200deg)*0.25)) scale(1.05); }
  45%  {               transform: translateY(38vh)  translateX(calc(var(--petal-sway,50px)*0.3))      rotate(calc(var(--petal-spin,200deg)*0.42)) scale(0.9); }
  60%  {               transform: translateY(55vh)  translateX(0)                                     rotate(calc(var(--petal-spin,200deg)*0.55)) scale(1.1); }
  76%  {               transform: translateY(72vh)  translateX(calc(var(--petal-sway,50px)*-0.85))    rotate(calc(var(--petal-spin,200deg)*0.78)) scale(0.95); }
  90%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translateY(113vh) translateX(calc(var(--petal-sway,50px)*0.35))     rotate(var(--petal-spin,200deg)) scale(0.8); }
}

/* Floating variant — caught by wind, briefly rises before final descent (1 in 4 petals) */
@keyframes petal-float {
  0%   { opacity: 0;   transform: translateY(0)     translateX(0)                                     rotate(0deg); }
  8%   { opacity: 0.85; }
  18%  {               transform: translateY(6vh)   translateX(var(--petal-sway, 60px))               rotate(55deg); }
  32%  {               transform: translateY(-2vh)  translateX(calc(var(--petal-sway,60px)*0.4))      rotate(110deg); } /* floats back up */
  48%  {               transform: translateY(18vh)  translateX(calc(var(--petal-sway,60px)*-0.8))     rotate(175deg); }
  64%  {               transform: translateY(42vh)  translateX(var(--petal-sway, 60px))               rotate(255deg); }
  80%  { opacity: 0.5; transform: translateY(68vh)  translateX(calc(var(--petal-sway,60px)*-0.5))     rotate(320deg); }
  100% { opacity: 0;   transform: translateY(114vh) translateX(0)                                     rotate(420deg); }
}

/* ── Runes (Mystic theme) ────────────────────────────────────────── */
.rune-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  user-select: none;
  animation: rune-drift ease-in-out infinite;
}

@keyframes rune-drift {
  0%   { opacity: 0;    transform: translateY(0)                                                 rotate(0deg)   scale(0.7); }
  12%  { opacity: 1; }
  25%  { opacity: 0.9;  transform: translateY(calc(var(--rune-drift-y,25px) * 0.25)) translateX(calc(var(--rune-orbit,15px) * -1)) rotate(90deg)  scale(1.1); }
  50%  { opacity: 0.7;  transform: translateY(calc(var(--rune-drift-y,25px) * 0.5))  translateX(var(--rune-orbit,15px))              rotate(180deg) scale(0.95); }
  75%  { opacity: 0.9;  transform: translateY(calc(var(--rune-drift-y,25px) * 0.75)) translateX(calc(var(--rune-orbit,15px) * -0.5)) rotate(270deg) scale(1.05); }
  88%  { opacity: 0.4; }
  100% { opacity: 0;    transform: translateY(var(--rune-drift-y,25px))                                                           rotate(360deg) scale(0.7); }
}

/* ── Bioluminescence (Ocean theme) ──────────────────────────────── */
.biolume-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  user-select: none;
  animation: bio-float ease-in-out infinite;
}

@keyframes bio-float {
  0%   { opacity: 0;    transform: translate(0, 0)                                               scale(0.6); }
  12%  { opacity: 0.9;  transform: translate(0, 0)                                               scale(1.1); }
  30%  { opacity: 0.6;  transform: translate(var(--bio-x,10px), var(--bio-y,-20px))              scale(0.8); }
  50%  { opacity: 1;    transform: translate(calc(var(--bio-x,10px)*-0.5), calc(var(--bio-y,-20px)*0.4)) scale(1.2); }
  70%  { opacity: 0.5;  transform: translate(var(--bio-x,10px), calc(var(--bio-y,-20px)*0.6))   scale(0.9); }
  85%  { opacity: 0.8;  transform: translate(0, var(--bio-y,-20px))                              scale(1.0); }
  100% { opacity: 0;    transform: translate(0, 0)                                               scale(0.6); }
}

/* ── Matrix digits (Matrix theme) ───────────────────────────────── */
.matrix-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  top: -5vh;
  user-select: none;
  animation: matrix-fall linear infinite;
}

@keyframes matrix-fall {
  0%   { opacity: 0; transform: translateY(-5vh); }
  5%   { opacity: 1; }
  90%  { opacity: 1; transform: translateY(100vh); }
  100% { opacity: 0; transform: translateY(108vh); }
}

/* Matrix phosphor glow — text and headings only, not images or icons */
body.theme-matrix h1,
body.theme-matrix h2,
body.theme-matrix h3,
body.theme-matrix p,
body.theme-matrix span,
body.theme-matrix a,
body.theme-matrix button,
body.theme-matrix label { text-shadow: 0 0 4px #00ff4180; }

body.theme-matrix::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,255,65,0.03) 3px, rgba(0,255,65,0.03) 4px
  );
  pointer-events: none;
  z-index: 2;
}

/* ── Theme: Moon ────────────────────────────────────────────────── */
body.theme-moon {
  --bg: #0a0e1a;
  --bg2: #0f1628;
  --bg3: #192035;
  --bg4: #1e2840;
  --surface: #131a2e;
  --surface-border: rgba(160,174,218,0.2);
  --card-bg: rgba(20, 28, 58, 0.92);
  --text: #e8eaf0;
  --muted: #8892b0;
  --border: rgba(160, 174, 218, 0.18);
  --gold: #c8b4e8;
  --blue: #7b93d4;
  --blue2: #9ab8e8;
  --accent: #a8b8e8;
  --accent2: #8898d4;
  --accent-light: rgba(168,184,232,0.12);
  background: #0a0e1a;
}

/* Subtle moonlit ambient glow */
body.theme-moon::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 75% 12%, rgba(140,160,220,.12) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 85%, rgba(100,120,200,.07) 0%, transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(60,80,160,.04) 0%, transparent 60%);
}

/* Full moon disc — top-right corner */
body.theme-moon::after {
  content: '';
  position: fixed;
  top: 40px;
  right: 60px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #f0f2ff 0%, #d4d8f0 35%, #b8c0e8 65%, #8898c8 100%);
  box-shadow:
    0 0 30px 10px rgba(184,200,240,.35),
    0 0 80px 30px rgba(140,160,220,.18),
    0 0 4px 2px rgba(240,242,255,.6);
  pointer-events: none;
  z-index: 1;
  animation: moon-glow 6s ease-in-out infinite;
}

@keyframes moon-glow {
  0%,100% { box-shadow: 0 0 30px 10px rgba(184,200,240,.35), 0 0 80px 30px rgba(140,160,220,.18), 0 0 4px 2px rgba(240,242,255,.6); }
  50%      { box-shadow: 0 0 44px 16px rgba(184,200,240,.5),  0 0 110px 40px rgba(140,160,220,.26), 0 0 6px 3px rgba(240,242,255,.8); }
}

/* Sidebar + topbar moonlit tint */
body.theme-moon .sidebar {
  background: linear-gradient(180deg, #0d1220 0%, #0f1528 100%);
}

body.theme-moon .topbar {
  background: linear-gradient(135deg, #0d1220 0%, #111930 50%, #0f1628 100%);
  border-image: linear-gradient(90deg, #3a4a80, #7b93d4, #a8b8e8, #7b93d4, #3a4a80) 1;
}

body.theme-moon .topbar h1 {
  color: #c8d0f0;
}

/* Cards */
body.theme-moon .card,
body.theme-moon .gift-item,
body.theme-moon .person-item {
  background: var(--card-bg);
  border-color: var(--border);
}

/* Moonlit person name */
body.theme-moon .person-name-text { color: #d0d8f0; }

/* ── Moon particles ──────────────────────────────────────────────── */
.moon-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  top: -8vh;
  user-select: none;
  animation: moon-fall ease-in-out infinite;
  opacity: 0;
}

@keyframes moon-fall {
  0%   { opacity: 0;    transform: translateY(-8vh)   translateX(0)                         scale(0.7); }
  8%   { opacity: 0.75; }
  25%  {                transform: translateY(20vh)   translateX(var(--moon-sway,30px))      scale(1.0); }
  50%  { opacity: 0.65; transform: translateY(48vh)   translateX(0)                         scale(0.95); }
  75%  {                transform: translateY(74vh)   translateX(calc(var(--moon-sway,30px)*-0.7)) scale(1.05); }
  92%  { opacity: 0.3; }
  100% { opacity: 0;    transform: translateY(110vh)  translateX(var(--moon-sway,30px))      scale(0.8); }
}

/* ── Stars (Universe theme) ──────────────────────────────────────── */
.star-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  animation: star-twinkle ease-in-out infinite;
  user-select: none;
  /* colour, size, left/top, duration, delay set inline */
}

@keyframes star-twinkle {
  0%   { opacity: 0.15; transform: scale(0.6); }
  30%  { opacity: 1;    transform: scale(1.1); }
  60%  { opacity: 0.4;  transform: scale(0.8); }
  100% { opacity: 0.15; transform: scale(0.6); }
}

/* ── Theme: Rain ───────────────────────────────────────────────── */
body.theme-rain {
  --bg: #0d1b2a;
  --bg2: #112233;
  --bg3: #1a2e40;
  --bg4: #1e3448;
  --surface: #0d1b2a;
  --surface-border: rgba(100,150,200,0.2);
  --card-bg: rgba(18, 36, 56, 0.92);
  --text: #cdd8e8;
  --muted: #7a96b0;
  --border: rgba(100, 150, 200, 0.2);
  --gold: #5ba8d4;
  --blue: #4a9cc8;
  --blue2: #6ab8e8;
  --accent: #6ab8e8;
  --accent2: #5aaad8;
  --accent-light: rgba(106, 184, 232, 0.12);
  --red: #5ba8d4;
  --purple: #7ab8d8;
  --teal: #4ab8c8;
  background: #0d1b2a;
}

/* Rain ambient glow — cool steel blue */
body.theme-rain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(74, 156, 200, .10) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 0%, rgba(90, 170, 216, .08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(30, 52, 72, .6) 0%, transparent 50%);
}

/* Sidebar */
body.theme-rain .sidebar {
  background: linear-gradient(180deg, #0d1b2a 0%, #112233 100%);
  border-right: 1px solid rgba(100, 150, 200, 0.18);
}

/* Topbar */
body.theme-rain .topbar {
  background: linear-gradient(135deg, #0d1b2a 0%, #112233 60%, #0a1520 100%);
  border-image: linear-gradient(90deg, #2a5a80, #4a9cc8, #6ab8e8, #4a9cc8, #2a5a80) 1;
  box-shadow: 0 2px 20px rgba(30, 80, 120, .2);
}

body.theme-rain .topbar h1 {
  color: #8cc8e8;
  text-shadow: 0 0 18px rgba(74, 156, 200, .4), 0 0 40px rgba(74, 156, 200, .15);
}

/* Cards */
body.theme-rain .card,
body.theme-rain .gift-item,
body.theme-rain .person-item {
  background: var(--card-bg);
  border-color: var(--border);
}

body.theme-rain .person-item.active {
  border-color: #4a9cc8;
  box-shadow: 0 2px 12px rgba(74, 156, 200, .3);
}

/* Person name */
body.theme-rain .person-name-text { color: #b8d0e8; }

/* Pills */
body.theme-rain .pill-people {
  background: linear-gradient(135deg, rgba(74,156,200,.15), rgba(74,156,200,.08));
  border-color: rgba(74,156,200,.3);
  color: #7ec0e0;
}
body.theme-rain .pill-gifts {
  background: linear-gradient(135deg, rgba(106,184,232,.15), rgba(106,184,232,.08));
  border-color: rgba(106,184,232,.3);
  color: #90cce8;
}
body.theme-rain .pill-bought {
  background: linear-gradient(135deg, rgba(90,170,216,.15), rgba(90,170,216,.08));
  border-color: rgba(90,170,216,.3);
  color: #80bcd8;
}

/* ── Rain particles ─────────────────────────────────────────────── */
.rain-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  top: -30px;
  width: 2px;
  border-radius: 1px;
  user-select: none;
  animation: rain-fall linear infinite;
  transform-origin: top center;
}

@keyframes rain-fall {
  0%   { opacity: 0;    transform: translateY(-30px); }
  4%   { opacity: 1; }
  90%  { opacity: var(--rain-opacity, 0.65); }
  100% { opacity: 0;    transform: translateY(115vh); }
}

/* ═══════════════════════════════════════════════════════════════════
   ── Theme: Boxing ──────────────────────────────────────────────── */
body.theme-boxing {
  --bg: #0a0a0a;
  --bg2: #111111;
  --bg3: #1a1a1a;
  --bg4: #222222;
  --surface: #111111;
  --surface-border: rgba(204,0,0,0.35);
  --card-bg: rgba(26, 26, 26, 0.96);
  --text: #ffffff;
  --muted: #aaaaaa;
  --border: rgba(204, 0, 0, 0.35);
  --gold: #f5c518;
  --blue: #cc0000;
  --blue2: #f5c518;
  --accent: #f5c518;
  --accent2: #cc0000;
  --accent-light: rgba(245, 197, 24, 0.12);
  --red: #cc0000;
  --purple: #cc0000;
  --teal: #f5c518;
  background: #0a0a0a;
}

/* Subtle ring-canvas radial glow */
body.theme-boxing::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(204,0,0,.14) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(204,0,0,.06) 0%, transparent 40%);
}

/* Topbar — deep black with gold title + red underline */
body.theme-boxing .topbar {
  background: #0a0a0a;
  border-bottom: 3px solid #cc0000;
  box-shadow: 0 3px 20px rgba(204,0,0,.35);
}

body.theme-boxing .topbar h1 {
  color: #f5c518;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(245,197,24,.4), 0 0 40px rgba(245,197,24,.15);
}

/* Sidebar */
body.theme-boxing .sidebar {
  background: linear-gradient(180deg, #0a0a0a 0%, #111111 100%);
  border-right: 2px solid rgba(204,0,0,.4);
}

/* Cards — charcoal with red left accent */
body.theme-boxing .card,
body.theme-boxing .gift-item,
body.theme-boxing .person-item {
  background: var(--card-bg);
  border-color: rgba(204,0,0,.3);
  border-left: 3px solid #cc0000 !important;
}

body.theme-boxing .person-item.active {
  border-color: #cc0000;
  border-left-color: #f5c518 !important;
  box-shadow: 0 2px 14px rgba(204,0,0,.35);
}

/* Headings — bold & punchy */
body.theme-boxing h1,
body.theme-boxing h2,
body.theme-boxing h3,
body.theme-boxing .card-name {
  font-weight: 800;
  color: #ffffff;
}

/* Buttons — red fill, gold border on hover */
body.theme-boxing .btn-primary {
  background: linear-gradient(135deg, #aa0000, #cc0000);
  border-color: #cc0000;
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
}

body.theme-boxing .btn-primary:hover {
  background: linear-gradient(135deg, #cc0000, #e60000);
  border-color: #f5c518;
  box-shadow: 0 0 14px rgba(204,0,0,.5), 0 0 28px rgba(245,197,24,.2);
}

body.theme-boxing .btn {
  border-radius: 6px;
}

/* Person name */
body.theme-boxing .person-name-text { color: #f5c518; font-weight: 700; }

/* Focus ring — gold */
body.theme-boxing :focus-visible {
  outline-color: #f5c518;
}

/* Pills */
body.theme-boxing .pill-people {
  background: linear-gradient(135deg, rgba(245,197,24,.15), rgba(245,197,24,.07));
  border-color: rgba(245,197,24,.4);
  color: #f5c518;
}
body.theme-boxing .pill-gifts {
  background: linear-gradient(135deg, rgba(204,0,0,.15), rgba(204,0,0,.07));
  border-color: rgba(204,0,0,.4);
  color: #ff4444;
}
body.theme-boxing .pill-bought {
  background: linear-gradient(135deg, rgba(245,197,24,.12), rgba(245,197,24,.06));
  border-color: rgba(245,197,24,.3);
  color: #f5c518;
}

/* ── Boxing glove particles ──────────────────────────────────────── */
.boxing-glove-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  top: -8vh;
  user-select: none;
  animation: boxing-fall linear infinite;
  opacity: 0;
  line-height: 1;
}

@keyframes boxing-fall {
  0%   { opacity: 0;    transform: translateY(-8vh)  rotate(0deg)   scale(0.8); }
  6%   { opacity: var(--box-opacity, 0.45); }
  30%  {                transform: translateY(28vh)  rotate(calc(var(--box-wobble, 15deg) * -1)) scale(1.05); }
  55%  {                transform: translateY(54vh)  rotate(var(--box-wobble, 15deg))             scale(0.95); }
  80%  {                transform: translateY(80vh)  rotate(calc(var(--box-wobble, 15deg) * -0.6)) scale(1.0); }
  94%  { opacity: var(--box-opacity, 0.45); }
  100% { opacity: 0;    transform: translateY(112vh) rotate(var(--box-wobble, 15deg))             scale(0.85); }
}

/* ═══════════════════════════════════════════════════════════════════
   ── Theme: Star Wars ───────────────────────────────────────────── */
body.theme-starwars {
  --bg: #0a0a0f;
  --bg2: #0d1020;
  --bg3: #111628;
  --bg4: #161c34;
  --surface: #0d1020;
  --surface-border: rgba(255,232,31,0.15);
  --card-bg: rgba(10, 12, 30, 0.92);
  --text: #e8e4d0;
  --muted: #b0a870;
  --border: rgba(255, 232, 31, 0.18);
  --gold: #FFE81F;
  --gold2: #e6c800;
  --blue: #4db8ff;
  --blue2: #0088cc;
  --green: #39ff14;
  --accent: #FFE81F;
  --accent2: #e6c800;
  --accent-light: rgba(255, 232, 31, 0.12);
  --red: #ff3030;
  --purple: #c084fc;
  --silver: #aab8c8;
  --teal: #4db8ff;
  --mint: #39ff14;
  --ocean: #0088cc;
  background: radial-gradient(ellipse at 20% 20%, #050520 0%, #0a0a0f 55%),
              radial-gradient(ellipse at 80% 80%, #06060f 0%, #0a0a0f 40%) fixed;
}

/* Ambient glow — deep space with subtle nebula light */
body.theme-starwars::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(255,232,31,.06), transparent 25%),
    radial-gradient(ellipse at 85% 70%, rgba(77,184,255,.05), transparent 25%),
    radial-gradient(ellipse at 50% 50%, rgba(10,8,30,.9), transparent 60%);
}

/* Top bar — title crawl yellow gradient */
body.theme-starwars .topbar {
  background: linear-gradient(135deg, #050510 0%, #0a0a1a 60%, #06060f 100%);
  border-image: linear-gradient(90deg, #FFE81F, #ff3030, #FFE81F, #4db8ff, #FFE81F) 1;
  box-shadow: 0 2px 24px rgba(255,232,31,.1);
}

body.theme-starwars .topbar h1 {
  color: #FFE81F;
  text-shadow: 0 0 18px rgba(255,232,31,.5), 0 0 40px rgba(255,232,31,.2);
  font-family: 'Courier New', 'Lucida Console', monospace;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Sidebar — dark nav panel */
body.theme-starwars .sidebar {
  background: linear-gradient(180deg, #060610 0%, #0a0a18 100%);
  border-right: 1px solid rgba(255,232,31,.12);
}

body.theme-starwars .sidebar-section h3 {
  color: #FFE81F;
  opacity: 0.7;
}

/* Person name text */
body.theme-starwars .person-name-text { color: #e8e4d0; }

/* Cards */
body.theme-starwars .card,
body.theme-starwars .gift-item,
body.theme-starwars .person-item {
  background: var(--card-bg);
  border-color: var(--border);
}

body.theme-starwars .person-item.active {
  border-color: #FFE81F;
  box-shadow: 0 2px 14px rgba(255,232,31,.25);
}

/* Buttons — lightsaber blue primary, yellow accent */
body.theme-starwars .btn-primary {
  background: linear-gradient(135deg, #1a5c99, #0088cc);
  border-color: #4db8ff;
  box-shadow: 0 0 10px rgba(77,184,255,.3);
}

body.theme-starwars .btn-primary:hover {
  background: linear-gradient(135deg, #226bb0, #0099dd);
  box-shadow: 0 0 18px rgba(77,184,255,.5);
}

/* Focus ring uses Force yellow */
body.theme-starwars :focus-visible {
  outline-color: #FFE81F;
}

/* Pills */
body.theme-starwars .pill-people {
  background: linear-gradient(135deg, rgba(255,232,31,.12), rgba(255,232,31,.07));
  border-color: rgba(255,232,31,.3);
  color: #FFE81F;
}
body.theme-starwars .pill-gifts {
  background: linear-gradient(135deg, rgba(77,184,255,.12), rgba(77,184,255,.07));
  border-color: rgba(77,184,255,.3);
  color: #4db8ff;
}
body.theme-starwars .pill-bought {
  background: linear-gradient(135deg, rgba(57,255,20,.1), rgba(57,255,20,.06));
  border-color: rgba(57,255,20,.25);
  color: #39ff14;
}

/* ── Hyperspace particle — streaking stars ───────────────────────── */
.hyperspace-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  top: -5vh;
  user-select: none;
  animation: hyperspace-fall linear infinite;
  opacity: 0;
  font-family: 'Courier New', monospace;
}

/* Hyperspace: drift distributes naturally across the whole fall */
@keyframes hyperspace-fall {
  0%   { opacity: 0;    transform: translateY(-5vh)  translateX(0)                           scaleY(0.8);  }
  6%   { opacity: 1; }
  25%  {               transform: translateY(25vh)  translateX(calc(var(--hs-drift,0px)*0.3)) scaleY(1.0); }
  50%  { opacity: 0.8;  transform: translateY(52vh)  translateX(calc(var(--hs-drift,0px)*0.6)) scaleY(1.15); }
  75%  {               transform: translateY(78vh)  translateX(calc(var(--hs-drift,0px)*0.85)) scaleY(1.3); }
  90%  { opacity: 0.4; }
  100% { opacity: 0;    transform: translateY(112vh) translateX(var(--hs-drift, 0px))          scaleY(1.5); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Theme: Labrador
   Warm golden yellows, chocolate browns, cream/ivory tones, amber accents
   ═══════════════════════════════════════════════════════════════════════════ */
body.theme-labrador {
  --bg: #2a1200;
  --bg2: #3d1c05;
  --bg3: #5c2e0a;
  --bg4: #7a3b10;
  --surface: #3d1c05;
  --surface-border: rgba(212,160,23,0.22);
  --card-bg: rgba(61,28,5,0.93);
  --text: #f5edd6;
  --muted: #c4a472;
  --border: rgba(212,160,23,0.2);
  --gold: #f0a830;
  --blue: #d4781a;
  --blue2: #f0c060;
  --accent: #e8920a;
  --accent2: #c8860a;
  --accent-light: rgba(240,168,48,0.13);
  background: #2a1200;
}

/* Warm hearthside ambient glow */
body.theme-labrador::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(232,146,10,.14) 0%, transparent 42%),
    radial-gradient(ellipse at 85% 78%, rgba(200,134,10,.10) 0%, transparent 38%),
    radial-gradient(ellipse at 50% 50%, rgba(160,80,5,.06) 0%, transparent 60%);
}

/* Paw print watermark — bottom-right corner */
body.theme-labrador::after {
  content: '🐾';
  position: fixed;
  bottom: 28px;
  right: 36px;
  font-size: 5rem;
  opacity: 0.07;
  pointer-events: none;
  z-index: 1;
  animation: labrador-breathe 5s ease-in-out infinite;
}

@keyframes labrador-breathe {
  0%,100% { opacity: 0.07; transform: scale(1); }
  50%      { opacity: 0.11; transform: scale(1.06); }
}

/* Sidebar */
body.theme-labrador .sidebar {
  background: linear-gradient(180deg, #2a1200 0%, #331602 100%);
  border-right: 1px solid rgba(212,160,23,.18);
}

/* Topbar */
body.theme-labrador .topbar {
  background: linear-gradient(135deg, #2a1200 0%, #3d1c05 60%, #4a2108 100%);
  border-image: linear-gradient(90deg, #7a3b10, #c8860a, #f0a830, #c8860a, #7a3b10) 1;
  box-shadow: 0 2px 20px rgba(200,134,10,.2);
}

body.theme-labrador .topbar h1 {
  color: #f5c875;
  text-shadow: 0 0 18px rgba(240,168,48,.45), 0 0 40px rgba(200,134,10,.18);
}

/* Cards */
body.theme-labrador .card,
body.theme-labrador .gift-item,
body.theme-labrador .person-item {
  background: var(--card-bg);
  border-color: var(--border);
}

body.theme-labrador .person-item.active {
  border-color: #e8920a;
  box-shadow: 0 2px 14px rgba(232,146,10,.3);
}

/* Person name */
body.theme-labrador .person-name-text { color: #f5edd6; font-weight: 600; }

/* Buttons */
body.theme-labrador .btn-primary {
  background: linear-gradient(135deg, #c8680a, #e8920a);
  border-color: #f0a830;
  box-shadow: 0 0 10px rgba(232,146,10,.3);
}

body.theme-labrador .btn-primary:hover {
  background: linear-gradient(135deg, #d9780b, #f0a020);
  box-shadow: 0 0 18px rgba(232,146,10,.5);
}

/* Focus ring */
body.theme-labrador :focus-visible {
  outline-color: #f0a830;
}

/* Stats pills */
body.theme-labrador .pill-people {
  background: linear-gradient(135deg, rgba(240,168,48,.15), rgba(240,168,48,.08));
  border-color: rgba(240,168,48,.35);
  color: #f0a830;
}
body.theme-labrador .pill-gifts {
  background: linear-gradient(135deg, rgba(200,134,10,.15), rgba(200,134,10,.08));
  border-color: rgba(200,134,10,.32);
  color: #d4a030;
}
body.theme-labrador .pill-bought {
  background: linear-gradient(135deg, rgba(245,210,140,.12), rgba(245,210,140,.06));
  border-color: rgba(245,210,140,.28);
  color: #e8d090;
}

/* ── Labrador paw particle ─────────────────────────────────────────────────── */
.labrador-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  user-select: none;
  animation: labrador-fall linear infinite;
  opacity: 0;
}

@keyframes labrador-fall {
  0%   { opacity: 0;   transform: translateY(-20px) rotate(0deg); }
  6%   { opacity: 1; }
  50%  { opacity: 0.85; }
  90%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translateY(110vh) rotate(var(--lb-rot, 20deg)); }
}

/* ═══════════════════════════════════════════════════════════════════
   ── Theme: World Cup ────────────────────────────────────────────── */
body.theme-worldcup {
  --bg: #0a1a0f;
  --bg2: #0d2214;
  --bg3: #112e1a;
  --bg4: #163a20;
  --surface: #0f2718;
  --surface-border: rgba(255,215,0,0.2);
  --card-bg: rgba(18, 38, 24, 0.88);
  --text: #e8f5ec;
  --muted: #6aaa80;
  --border: rgba(255, 215, 0, 0.2);
  --gold: #FFD700;
  --blue: #003DA5;
  --blue2: #68cc80;
  --accent: #FFD700;
  --accent2: #C8102E;
  --accent-light: rgba(255,215,0,0.12);
  --red: #C8102E;
  --purple: #003DA5;
  --teal: #1a8c3f;
  background: #0a1a0f;
}

/* Pitch atmosphere — deep green glow from below, gold shimmer top */
body.theme-worldcup::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(26,107,47,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 0%,   rgba(255,215,0,.06) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 0%,   rgba(255,215,0,.05) 0%, transparent 40%);
}

/* Subtle pitch grass stripes overlay */
body.theme-worldcup::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(26,107,47,.06) 0px,
    rgba(26,107,47,.06) 40px,
    rgba(13,61,26,.04) 40px,
    rgba(13,61,26,.04) 80px
  );
}

/* Sidebar */
body.theme-worldcup .sidebar {
  background: linear-gradient(180deg, #0a1a0f 0%, #0d2214 100%);
  border-right: 1px solid rgba(255,215,0,.18);
}

/* Topbar */
body.theme-worldcup .topbar {
  background: linear-gradient(135deg, #0a1a0f 0%, #112e1a 60%, #0a1a0f 100%);
  border-image: linear-gradient(90deg, #0d3d1a, #FFD700, #ffffff, #C8102E, #ffffff, #FFD700, #0d3d1a) 1;
  box-shadow: 0 2px 24px rgba(255,215,0,.12);
}

body.theme-worldcup .topbar h1 {
  color: #FFD700;
  text-shadow: 0 0 18px rgba(255,215,0,.5), 0 0 40px rgba(255,215,0,.2);
}

/* Cards */
body.theme-worldcup .card,
body.theme-worldcup .gift-item,
body.theme-worldcup .person-item {
  background: var(--card-bg);
  border-color: var(--border);
}

/* Home sections — slightly elevated from page bg so they read as surfaces not pitch */
body.theme-worldcup .home-section {
  background: rgba(28, 52, 34, 0.92);
  border-color: rgba(255, 215, 0, 0.14);
}

body.theme-worldcup .person-item.active {
  border-color: #FFD700;
  box-shadow: 0 2px 14px rgba(255,215,0,.25);
}

/* Person name */
body.theme-worldcup .person-name-text { color: #b8e8c8; }

/* Pills */
body.theme-worldcup .pill-people {
  background: linear-gradient(135deg, rgba(26,107,47,.2), rgba(26,107,47,.1));
  border-color: rgba(26,140,63,.35);
  color: #6acc88;
}
body.theme-worldcup .pill-gifts {
  background: linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,215,0,.08));
  border-color: rgba(255,215,0,.3);
  color: #FFD700;
}
body.theme-worldcup .pill-bought {
  background: linear-gradient(135deg, rgba(200,16,46,.15), rgba(200,16,46,.08));
  border-color: rgba(200,16,46,.3);
  color: #e8607a;
}

/* ── World Cup particles ─────────────────────────────────────────── */
.worldcup-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  user-select: none;
  animation: worldcup-fall linear infinite;
  opacity: 0;
}

@keyframes worldcup-fall {
  0%   { opacity: 0;   transform: translateY(-24px) rotate(0deg); }
  5%   { opacity: 1; }
  50%  { opacity: 0.8; }
  92%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translateY(112vh) rotate(var(--wc-rot, 30deg)); }
}

/* ═══════════════════════════════════════════════════════════════════
   ── THEME-SPECIFIC UI: sidebar/topbar/pills/buttons for dark themes
   These themes don't need ::before/::after magic but DO need their
   accent colours applied to topbar title, pills & buttons.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dazzle ──────────────────────────────────────────────────────── */
body.theme-dazzle .topbar {
  background: linear-gradient(135deg, #0a0a1a 0%, #110a28 60%, #0a0a1a 100%);
  border-image: linear-gradient(90deg, #a855f7, #ffd700, #a855f7) 1;
  box-shadow: 0 2px 24px rgba(168,85,247,.15);
}
body.theme-dazzle .topbar h1 {
  color: #ffd700;
  text-shadow: 0 0 18px rgba(255,215,0,.45), 0 0 40px rgba(168,85,247,.2);
}
body.theme-dazzle .sidebar {
  background: linear-gradient(180deg, #0a0a1a 0%, #0d0d22 100%);
  border-right: 1px solid rgba(168,85,247,.18);
}
body.theme-dazzle .person-name-text { color: #f0e6ff; font-weight: 600; }
body.theme-dazzle .btn-primary {
  background: linear-gradient(135deg, #7c2db8, #a855f7);
  border-color: #c084fc;
  box-shadow: 0 0 10px rgba(168,85,247,.3);
}
body.theme-dazzle .btn-primary:hover { box-shadow: 0 0 18px rgba(168,85,247,.5); }
body.theme-dazzle :focus-visible { outline-color: #ffd700; }
body.theme-dazzle .pill-people {
  background: linear-gradient(135deg,rgba(168,85,247,.14),rgba(168,85,247,.07));
  border-color: rgba(168,85,247,.32); color: #c084fc;
}
body.theme-dazzle .pill-gifts {
  background: linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,215,0,.06));
  border-color: rgba(255,215,0,.3); color: #ffd700;
}
body.theme-dazzle .pill-bought {
  background: linear-gradient(135deg,rgba(216,170,255,.12),rgba(216,170,255,.06));
  border-color: rgba(216,170,255,.28); color: #d8aaff;
}

/* ── Nature ─────────────────────────────────────────────────────── */
body.theme-nature .topbar {
  background: linear-gradient(135deg, #0a1c0a 0%, #142e14 60%, #0a1c0a 100%);
  border-image: linear-gradient(90deg, #2d6a4f, #52b788, #7ecb7e, #52b788, #2d6a4f) 1;
  box-shadow: 0 2px 20px rgba(82,183,136,.12);
}
body.theme-nature .topbar h1 {
  color: #7ecb7e;
  text-shadow: 0 0 18px rgba(126,203,126,.4), 0 0 40px rgba(82,183,136,.15);
}
body.theme-nature .sidebar {
  background: linear-gradient(180deg, #0a1c0a 0%, #0f2410 100%);
  border-right: 1px solid rgba(80,180,80,.16);
}
body.theme-nature .person-name-text { color: #c8ecd0; font-weight: 600; }
body.theme-nature .btn-primary {
  background: linear-gradient(135deg, #1e5c38, #2d7a50);
  border-color: #52b788;
  box-shadow: 0 0 10px rgba(82,183,136,.28);
}
body.theme-nature .btn-primary:hover { box-shadow: 0 0 18px rgba(82,183,136,.45); }
body.theme-nature :focus-visible { outline-color: #7ecb7e; }
body.theme-nature .pill-people {
  background: linear-gradient(135deg,rgba(82,183,136,.15),rgba(82,183,136,.08));
  border-color: rgba(82,183,136,.3); color: #52b788;
}
body.theme-nature .pill-gifts {
  background: linear-gradient(135deg,rgba(126,203,126,.14),rgba(126,203,126,.07));
  border-color: rgba(126,203,126,.28); color: #7ecb7e;
}
body.theme-nature .pill-bought {
  background: linear-gradient(135deg,rgba(140,216,140,.12),rgba(140,216,140,.06));
  border-color: rgba(140,216,140,.26); color: #8cd88c;
}

/* ── Sunset ─────────────────────────────────────────────────────── */
body.theme-sunset .topbar {
  background: linear-gradient(135deg, #1a0a00 0%, #3d0c02 60%, #1a0a00 100%);
  border-image: linear-gradient(90deg, #c44b00, #ff6b00, #ff9500, #ffd700, #ff9500, #ff6b00, #c44b00) 1;
  box-shadow: 0 2px 24px rgba(255,107,0,.18);
}
body.theme-sunset .topbar h1 {
  color: #ff9500;
  text-shadow: 0 0 18px rgba(255,149,0,.5), 0 0 40px rgba(255,107,0,.2);
}
body.theme-sunset .sidebar {
  background: linear-gradient(180deg, #1a0a00 0%, #200d00 100%);
  border-right: 1px solid rgba(255,120,30,.16);
}
body.theme-sunset .person-name-text { color: #ffe8cc; font-weight: 600; }
body.theme-sunset .btn-primary {
  background: linear-gradient(135deg, #aa3800, #cc5500);
  border-color: #ff6b00;
  box-shadow: 0 0 10px rgba(255,107,0,.3);
}
body.theme-sunset .btn-primary:hover { box-shadow: 0 0 18px rgba(255,107,0,.5); }
body.theme-sunset :focus-visible { outline-color: #ff9500; }
body.theme-sunset .pill-people {
  background: linear-gradient(135deg,rgba(255,107,0,.14),rgba(255,107,0,.07));
  border-color: rgba(255,107,0,.3); color: #ff6b00;
}
body.theme-sunset .pill-gifts {
  background: linear-gradient(135deg,rgba(255,149,0,.14),rgba(255,149,0,.07));
  border-color: rgba(255,149,0,.28); color: #ff9500;
}
body.theme-sunset .pill-bought {
  background: linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,215,0,.06));
  border-color: rgba(255,215,0,.26); color: #ffd700;
}

/* ── Sakura (light theme) ────────────────────────────────────────── */
body.theme-sakura .topbar {
  background: linear-gradient(135deg, #fff0f4 0%, #ffe4ea 60%, #fff0f4 100%);
  border-image: linear-gradient(90deg, #ff8fab, #e8507a, #ff8fab) 1;
  box-shadow: 0 2px 20px rgba(232,80,122,.12);
}
body.theme-sakura .topbar h1 {
  color: #c83058;
  text-shadow: 0 0 18px rgba(200,48,88,.2);
}
body.theme-sakura .sidebar {
  background: linear-gradient(180deg, #fff0f4 0%, #fce4ea 100%);
  border-right: 1px solid rgba(255,120,150,.2);
}
body.theme-sakura .person-name-text { color: #3d0e1c; font-weight: 600; }
body.theme-sakura .btn-primary {
  background: linear-gradient(135deg, #c83058, #e8507a);
  border-color: #ff8fab;
  box-shadow: 0 0 10px rgba(232,80,122,.2);
}
body.theme-sakura .btn-primary:hover { box-shadow: 0 0 18px rgba(232,80,122,.35); }
body.theme-sakura :focus-visible { outline-color: #e8507a; }
body.theme-sakura .pill-people {
  background: linear-gradient(135deg,rgba(232,80,122,.12),rgba(232,80,122,.06));
  border-color: rgba(232,80,122,.28); color: #c83058;
}
body.theme-sakura .pill-gifts {
  background: linear-gradient(135deg,rgba(255,143,171,.12),rgba(255,143,171,.06));
  border-color: rgba(255,143,171,.26); color: #d04a70;
}
body.theme-sakura .pill-bought {
  background: linear-gradient(135deg,rgba(255,107,157,.10),rgba(255,107,157,.05));
  border-color: rgba(255,107,157,.22); color: #c03060;
}

/* ── Mystic ──────────────────────────────────────────────────────── */
body.theme-mystic .topbar {
  background: linear-gradient(135deg, #08001a 0%, #140030 60%, #08001a 100%);
  border-image: linear-gradient(90deg, #6d28d9, #a855f7, #c084fc, #a855f7, #6d28d9) 1;
  box-shadow: 0 2px 24px rgba(168,85,247,.15);
}
body.theme-mystic .topbar h1 {
  color: #c084fc;
  text-shadow: 0 0 18px rgba(192,132,252,.45), 0 0 40px rgba(168,85,247,.2);
}
body.theme-mystic .sidebar {
  background: linear-gradient(180deg, #08001a 0%, #0d001f 100%);
  border-right: 1px solid rgba(168,85,247,.18);
}
body.theme-mystic .person-name-text { color: #ecd8ff; font-weight: 600; }
body.theme-mystic .btn-primary {
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168,85,247,.3);
}
body.theme-mystic .btn-primary:hover { box-shadow: 0 0 18px rgba(168,85,247,.5); }
body.theme-mystic :focus-visible { outline-color: #c084fc; }
body.theme-mystic .pill-people {
  background: linear-gradient(135deg,rgba(168,85,247,.14),rgba(168,85,247,.07));
  border-color: rgba(168,85,247,.3); color: #a855f7;
}
body.theme-mystic .pill-gifts {
  background: linear-gradient(135deg,rgba(129,140,248,.13),rgba(129,140,248,.06));
  border-color: rgba(129,140,248,.28); color: #818cf8;
}
body.theme-mystic .pill-bought {
  background: linear-gradient(135deg,rgba(192,132,252,.12),rgba(192,132,252,.06));
  border-color: rgba(192,132,252,.26); color: #c084fc;
}

/* ── Ocean ───────────────────────────────────────────────────────── */
body.theme-ocean .topbar {
  background: linear-gradient(135deg, #001a2e 0%, #003366 60%, #001a2e 100%);
  border-image: linear-gradient(90deg, #00aacc, #00d4ff, #00ffcc, #00d4ff, #00aacc) 1;
  box-shadow: 0 2px 24px rgba(0,210,255,.12);
}
body.theme-ocean .topbar h1 {
  color: #00d4ff;
  text-shadow: 0 0 18px rgba(0,212,255,.5), 0 0 40px rgba(0,255,204,.2);
}
body.theme-ocean .sidebar {
  background: linear-gradient(180deg, #001a2e 0%, #002244 100%);
  border-right: 1px solid rgba(0,210,255,.16);
}
body.theme-ocean .person-name-text { color: #e0f8ff; font-weight: 600; }
body.theme-ocean .btn-primary {
  background: linear-gradient(135deg, #005580, #0077b3);
  border-color: #00aacc;
  box-shadow: 0 0 10px rgba(0,210,255,.28);
}
body.theme-ocean .btn-primary:hover { box-shadow: 0 0 18px rgba(0,210,255,.45); }
body.theme-ocean :focus-visible { outline-color: #00d4ff; }
body.theme-ocean .pill-people {
  background: linear-gradient(135deg,rgba(0,212,255,.14),rgba(0,212,255,.07));
  border-color: rgba(0,212,255,.3); color: #00d4ff;
}
body.theme-ocean .pill-gifts {
  background: linear-gradient(135deg,rgba(0,255,204,.12),rgba(0,255,204,.06));
  border-color: rgba(0,255,204,.26); color: #00ffcc;
}
body.theme-ocean .pill-bought {
  background: linear-gradient(135deg,rgba(0,255,136,.10),rgba(0,255,136,.05));
  border-color: rgba(0,255,136,.22); color: #00ff88;
}

/* ── Matrix ──────────────────────────────────────────────────────── */
body.theme-matrix .topbar {
  background: #000300;
  border-image: linear-gradient(90deg, #00ff41, #39ff14, #00ff41) 1;
  box-shadow: 0 2px 20px rgba(0,255,65,.12);
}
body.theme-matrix .topbar h1 {
  color: #39ff14;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  text-shadow: 0 0 18px rgba(57,255,20,.55), 0 0 40px rgba(0,255,65,.2);
}
body.theme-matrix .sidebar {
  background: linear-gradient(180deg, #000300 0%, #001000 100%);
  border-right: 1px solid rgba(0,255,65,.14);
}
body.theme-matrix .person-name-text { color: #a0ffb8; font-family: 'Courier New', monospace; }
body.theme-matrix .btn-primary {
  background: linear-gradient(135deg, #005800, #008000);
  border-color: #00ff41;
  box-shadow: 0 0 10px rgba(0,255,65,.28);
  font-family: 'Courier New', monospace;
}
body.theme-matrix .btn-primary:hover { box-shadow: 0 0 18px rgba(0,255,65,.48); }
body.theme-matrix :focus-visible { outline-color: #39ff14; }
body.theme-matrix .pill-people {
  background: linear-gradient(135deg,rgba(0,255,65,.14),rgba(0,255,65,.07));
  border-color: rgba(0,255,65,.3); color: #00ff41;
}
body.theme-matrix .pill-gifts {
  background: linear-gradient(135deg,rgba(57,255,20,.12),rgba(57,255,20,.06));
  border-color: rgba(57,255,20,.28); color: #39ff14;
}
body.theme-matrix .pill-bought {
  background: linear-gradient(135deg,rgba(0,204,51,.10),rgba(0,204,51,.05));
  border-color: rgba(0,204,51,.22); color: #00cc33;
}

/* ── Synthwave ───────────────────────────────────────────────────── */
body.theme-synthwave .topbar {
  background: linear-gradient(135deg, #0d0015 0%, #1e0035 60%, #0d0015 100%);
  border-image: linear-gradient(90deg, #ff00ff, #00ffff, #ff006e, #00ffff, #ff00ff) 1;
  box-shadow: 0 2px 28px rgba(255,0,255,.15);
  position: relative;
  z-index: 2;
}
body.theme-synthwave .topbar h1 {
  color: #ff00ff;
  text-shadow: 0 0 18px rgba(255,0,255,.7), 0 0 40px rgba(0,255,255,.3);
  letter-spacing: 2px;
}
body.theme-synthwave .sidebar {
  background: linear-gradient(180deg, #0d0015 0%, #110020 100%);
  border-right: 1px solid rgba(255,0,255,.18);
  position: relative;
  z-index: 2;
}
body.theme-synthwave .person-name-text { color: #f0c8ff; font-weight: 600; }
body.theme-synthwave .btn-primary {
  background: linear-gradient(135deg, #660033, #cc006e);
  border-color: #ff006e;
  box-shadow: 0 0 10px rgba(255,0,110,.3);
}
body.theme-synthwave .btn-primary:hover { box-shadow: 0 0 18px rgba(255,0,255,.5); }
body.theme-synthwave :focus-visible { outline-color: #ff00ff; }
body.theme-synthwave .pill-people {
  background: linear-gradient(135deg,rgba(255,0,255,.12),rgba(255,0,255,.06));
  border-color: rgba(255,0,255,.28); color: #ff00ff;
}
body.theme-synthwave .pill-gifts {
  background: linear-gradient(135deg,rgba(0,255,255,.12),rgba(0,255,255,.06));
  border-color: rgba(0,255,255,.26); color: #00ffff;
}
body.theme-synthwave .pill-bought {
  background: linear-gradient(135deg,rgba(255,230,0,.10),rgba(255,230,0,.05));
  border-color: rgba(255,230,0,.22); color: #ffe600;
}

/* ── Retro ───────────────────────────────────────────────────────── */
body.theme-retro .topbar {
  background: #0a0000;
  border-image: linear-gradient(90deg, #ff00ff, #ffff00, #00ffff, #ffff00, #ff00ff) 1;
  box-shadow: 0 2px 20px rgba(255,0,255,.15);
  position: relative;
  z-index: 2;
}
body.theme-retro .topbar h1 {
  color: #ffff00;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  text-shadow: 0 0 18px rgba(255,255,0,.6), 0 0 40px rgba(255,0,255,.3);
}
body.theme-retro .sidebar {
  background: linear-gradient(180deg, #0a0000 0%, #110011 100%);
  border-right: 1px solid rgba(255,0,255,.16);
  position: relative;
  z-index: 2;
}
body.theme-retro .person-name-text { color: #ffaaff; font-family: 'Courier New', monospace; }
body.theme-retro .btn-primary {
  background: linear-gradient(135deg, #660066, #990099);
  border-color: #ff00ff;
  box-shadow: 0 0 10px rgba(255,0,255,.28);
  font-family: 'Courier New', monospace;
}
body.theme-retro .btn-primary:hover { box-shadow: 0 0 18px rgba(255,0,255,.5); }
body.theme-retro :focus-visible { outline-color: #ff00ff; }
body.theme-retro .pill-people {
  background: linear-gradient(135deg,rgba(255,0,255,.12),rgba(255,0,255,.06));
  border-color: rgba(255,0,255,.28); color: #ff00ff;
}
body.theme-retro .pill-gifts {
  background: linear-gradient(135deg,rgba(255,255,0,.12),rgba(255,255,0,.06));
  border-color: rgba(255,255,0,.26); color: #ffff00;
}
body.theme-retro .pill-bought {
  background: linear-gradient(135deg,rgba(0,255,255,.10),rgba(0,255,255,.05));
  border-color: rgba(0,255,255,.22); color: #00ffff;
}

/* ── Universe ────────────────────────────────────────────────────── */
body.theme-universe .topbar {
  background: linear-gradient(135deg, #020208 0%, #080830 60%, #020208 100%);
  border-image: linear-gradient(90deg, #4488ff, #a0c0ff, #ffd700, #a0c0ff, #4488ff) 1;
  box-shadow: 0 2px 24px rgba(68,136,255,.10);
}
body.theme-universe .topbar h1 {
  color: #a0c0ff;
  text-shadow: 0 0 18px rgba(160,192,255,.4), 0 0 40px rgba(68,136,255,.18);
}
body.theme-universe .sidebar {
  background: linear-gradient(180deg, #020208 0%, #04040f 100%);
  border-right: 1px solid rgba(160,192,255,.12);
}
body.theme-universe .person-name-text { color: #e0e8ff; font-weight: 600; }
body.theme-universe .btn-primary {
  background: linear-gradient(135deg, #1a3380, #2244aa);
  border-color: #4488ff;
  box-shadow: 0 0 10px rgba(68,136,255,.28);
}
body.theme-universe .btn-primary:hover { box-shadow: 0 0 18px rgba(68,136,255,.45); }
body.theme-universe :focus-visible { outline-color: #a0c0ff; }
body.theme-universe .pill-people {
  background: linear-gradient(135deg,rgba(68,136,255,.14),rgba(68,136,255,.07));
  border-color: rgba(68,136,255,.3); color: #4488ff;
}
body.theme-universe .pill-gifts {
  background: linear-gradient(135deg,rgba(160,192,255,.13),rgba(160,192,255,.06));
  border-color: rgba(160,192,255,.28); color: #a0c0ff;
}
body.theme-universe .pill-bought {
  background: linear-gradient(135deg,rgba(255,215,0,.10),rgba(255,215,0,.05));
  border-color: rgba(255,215,0,.22); color: #ffd700;
}

/* ── person-item.active highlight for all 9 newly-styled themes ──── */
body.theme-dazzle .person-item.active    { border-color: #ffd700;  box-shadow: 0 2px 14px rgba(255,215,0,.28); }
body.theme-nature .person-item.active    { border-color: #52b788;  box-shadow: 0 2px 14px rgba(82,183,136,.28); }
body.theme-sunset .person-item.active    { border-color: #ff9500;  box-shadow: 0 2px 14px rgba(255,149,0,.28); }
body.theme-sakura .person-item.active    { border-color: #e8507a;  box-shadow: 0 2px 14px rgba(232,80,122,.2); }
body.theme-mystic .person-item.active    { border-color: #a855f7;  box-shadow: 0 2px 14px rgba(168,85,247,.3); }
body.theme-ocean .person-item.active     { border-color: #00d4ff;  box-shadow: 0 2px 14px rgba(0,212,255,.28); }
body.theme-matrix .person-item.active    { border-color: #39ff14;  box-shadow: 0 2px 14px rgba(57,255,20,.3); }
body.theme-synthwave .person-item.active { border-color: #ff00ff;  box-shadow: 0 2px 14px rgba(255,0,255,.3); }
body.theme-retro .person-item.active     { border-color: #ff00ff;  box-shadow: 0 2px 14px rgba(255,0,255,.28); }
body.theme-universe .person-item.active  { border-color: #4488ff;  box-shadow: 0 2px 14px rgba(68,136,255,.28); }

/* ── Rainbow (light theme — bright accent sidebar/topbar/pills) ─── */
body.theme-rainbow .topbar {
  background: linear-gradient(135deg, #fff9fe 0%, #fff0fd 60%, #fff9fe 100%);
  border-image: linear-gradient(90deg, #a855f7, #ff6b6b, #4ecdc4, #ff6b6b, #a855f7) 1;
  box-shadow: 0 2px 16px rgba(168,85,247,.12);
}
body.theme-rainbow .topbar h1 {
  background: linear-gradient(135deg, #a855f7, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(168,85,247,.25));
}
body.theme-rainbow .sidebar {
  background: linear-gradient(180deg, #fff9fe 0%, #fff0fd 100%);
  border-right: 1px solid rgba(168,85,247,.18);
}
body.theme-rainbow .person-name-text { color: #1a1a2e; font-weight: 600; }
body.theme-rainbow .person-item.active {
  border-color: #a855f7;
  box-shadow: 0 2px 14px rgba(168,85,247,.2);
}
body.theme-rainbow .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: #c084fc;
  box-shadow: 0 0 10px rgba(168,85,247,.25);
}
body.theme-rainbow .btn-primary:hover { box-shadow: 0 0 18px rgba(168,85,247,.4); }
body.theme-rainbow :focus-visible { outline-color: #a855f7; }
body.theme-rainbow .pill-people {
  background: linear-gradient(135deg,rgba(168,85,247,.12),rgba(168,85,247,.06));
  border-color: rgba(168,85,247,.3); color: #7c3aed;
}
body.theme-rainbow .pill-gifts {
  background: linear-gradient(135deg,rgba(255,107,107,.12),rgba(255,107,107,.06));
  border-color: rgba(255,107,107,.28); color: #e05555;
}
body.theme-rainbow .pill-bought {
  background: linear-gradient(135deg,rgba(78,205,196,.12),rgba(78,205,196,.06));
  border-color: rgba(78,205,196,.28); color: #2ba8a0;
}

/* ═══════════════════════════════════════════════════════════════════
   ── Theme: Aurora (Northern Lights) ─────────────────────────────── */
body.theme-aurora {
  --bg: #000a0f;
  --bg2: #001018;
  --bg3: #001a24;
  --surface: #001220;
  --surface-border: rgba(0,255,159,0.18);
  --card-bg: rgba(0, 12, 26, 0.92);
  --text: #d0fff0;
  --muted: #50b898;
  --border: rgba(0,255,159,0.15);
  --gold: #00ff9f;
  --blue: #00d4e8;
  --blue2: #88ffcc;
  --accent: #b260ff;
  background:
    radial-gradient(ellipse at 30% 0%,  rgba(0,255,159,0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 15%, rgba(178,96,255,0.12) 0%, transparent 38%),
    radial-gradient(ellipse at 50% 8%,  rgba(0,212,232,0.10) 0%, transparent 35%),
    linear-gradient(180deg, #000a0f 0%, #001525 40%, #002030 100%) fixed;
}

/* Animated borealis curtain effect in the sky */
body.theme-aurora::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 100% 40% at 20% 0%, rgba(0,255,159,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 80%  30% at 70% 0%, rgba(178,96,255,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60%  25% at 45% 0%, rgba(0,212,232,0.12) 0%, transparent 50%);
  animation: aurora-curtain 6s ease-in-out infinite;
}

@keyframes aurora-curtain {
  0%,100% { opacity: 0.8; transform: scaleX(1)    translateX(0); }
  33%      { opacity: 1;   transform: scaleX(1.06) translateX(1%); }
  66%      { opacity: 0.7; transform: scaleX(0.96) translateX(-1%); }
}

/* Sidebar + topbar */
body.theme-aurora .sidebar {
  background: linear-gradient(180deg, #000a0f 0%, #001018 100%);
  border-right: 1px solid rgba(0,255,159,.14);
}
body.theme-aurora .topbar {
  background: linear-gradient(135deg, #000a0f 0%, #001525 60%, #000a0f 100%);
  border-image: linear-gradient(90deg, #00ff9f, #00d4e8, #b260ff, #ff60a0, #00ff9f) 1;
  box-shadow: 0 2px 24px rgba(0,255,159,.12);
}
body.theme-aurora .topbar h1 {
  color: #00ff9f;
  text-shadow: 0 0 18px rgba(0,255,159,.55), 0 0 40px rgba(0,255,159,.2);
}
body.theme-aurora .person-name-text { color: #b0ffd8; }
body.theme-aurora .card,
body.theme-aurora .gift-item,
body.theme-aurora .person-item {
  background: var(--card-bg);
  border-color: var(--border);
}
body.theme-aurora .person-item.active {
  border-color: #00ff9f;
  box-shadow: 0 2px 14px rgba(0,255,159,.3);
}
body.theme-aurora .btn-primary {
  background: linear-gradient(135deg, #006a40, #00b870);
  border-color: #00ff9f;
  box-shadow: 0 0 10px rgba(0,255,159,.3);
}
body.theme-aurora :focus-visible { outline-color: #00ff9f; }
body.theme-aurora .pill-people {
  background: linear-gradient(135deg, rgba(0,255,159,.14), rgba(0,255,159,.08));
  border-color: rgba(0,255,159,.3); color: #00ff9f;
}
body.theme-aurora .pill-gifts {
  background: linear-gradient(135deg, rgba(0,212,232,.14), rgba(0,212,232,.08));
  border-color: rgba(0,212,232,.3); color: #00d4e8;
}
body.theme-aurora .pill-bought {
  background: linear-gradient(135deg, rgba(178,96,255,.12), rgba(178,96,255,.08));
  border-color: rgba(178,96,255,.28); color: #c088ff;
}

/* ── Aurora glowing orb particles ──────────────────────────────────── */
.aurora-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  border-radius: 50%;
  user-select: none;
  animation: aurora-float ease-in-out infinite;
}

@keyframes aurora-float {
  0%   { opacity: 0;    transform: translateY(0)      translateX(0)                        scale(0.7); }
  6%   { opacity: 0.9; }
  28%  { opacity: 0.7;  transform: translateY(-22vh)  translateX(var(--au-sway, 60px))     scale(1.15); }
  52%  { opacity: 0.85; transform: translateY(-50vh)  translateX(0)                        scale(0.88); }
  76%  { opacity: 0.5;  transform: translateY(-76vh)  translateX(calc(var(--au-sway,60px)*-0.65)) scale(1.08); }
  94%  { opacity: 0; }
  100% { opacity: 0;    transform: translateY(-106vh) translateX(var(--au-sway, 60px))     scale(0.8); }
}

/* ═══════════════════════════════════════════════════════════════════
   ── Theme: Lofi Chill ────────────────────────────────────────────── */
body.theme-lofi {
  --bg: #1a1008;
  --bg2: #221508;
  --bg3: #2e1e0a;
  --surface: #261505;
  --surface-border: rgba(245,166,35,0.2);
  --card-bg: rgba(28, 16, 4, 0.92);
  --text: #f5e6c8;
  --muted: #c4945a;
  --border: rgba(200, 130, 40, 0.2);
  --gold: #f5a623;
  --blue: #d4781a;
  --blue2: #f0c060;
  --accent: #e8920a;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(200,120,20,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 80%, rgba(120,60,10,0.22) 0%, transparent 40%),
    #1a1008 fixed;
}

/* Warm lamplight bloom */
body.theme-lofi::before {
  content: '';
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,180,60,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: lofi-lamp 4s ease-in-out infinite;
}

@keyframes lofi-lamp {
  0%,100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.1); }
}

body.theme-lofi .sidebar {
  background: linear-gradient(180deg, #1a1008 0%, #221508 100%);
  border-right: 1px solid rgba(200,130,40,.16);
}
body.theme-lofi .topbar {
  background: linear-gradient(135deg, #1a1008 0%, #2e1e0a 60%, #1a1008 100%);
  border-image: linear-gradient(90deg, #7a3b10, #f5a623, #f0c060, #f5a623, #7a3b10) 1;
  box-shadow: 0 2px 20px rgba(200,130,40,.18);
}
body.theme-lofi .topbar h1 {
  color: #f5c875;
  text-shadow: 0 0 18px rgba(240,168,48,.4), 0 0 40px rgba(200,134,10,.16);
}
body.theme-lofi .person-name-text { color: #f5e6c8; font-weight: 600; }
body.theme-lofi .card,
body.theme-lofi .gift-item,
body.theme-lofi .person-item {
  background: var(--card-bg);
  border-color: var(--border);
}
body.theme-lofi .person-item.active {
  border-color: #f5a623;
  box-shadow: 0 2px 14px rgba(245,166,35,.28);
}
body.theme-lofi .btn-primary {
  background: linear-gradient(135deg, #b85a08, #d97a10);
  border-color: #f5a623;
  box-shadow: 0 0 10px rgba(245,166,35,.28);
}
body.theme-lofi :focus-visible { outline-color: #f5a623; }
body.theme-lofi .pill-people {
  background: linear-gradient(135deg, rgba(245,166,35,.15), rgba(245,166,35,.08));
  border-color: rgba(245,166,35,.32); color: #f5a623;
}
body.theme-lofi .pill-gifts {
  background: linear-gradient(135deg, rgba(212,120,26,.15), rgba(212,120,26,.08));
  border-color: rgba(212,120,26,.3); color: #d4781a;
}
body.theme-lofi .pill-bought {
  background: linear-gradient(135deg, rgba(240,192,96,.12), rgba(240,192,96,.06));
  border-color: rgba(240,192,96,.26); color: #e8b840;
}

/* ── Lofi rising note particles ─────────────────────────────────────── */
.lofi-particle {
  position: fixed;
  pointer-events: none;
  z-index: 3;
  bottom: -5vh;
  user-select: none;
  animation: lofi-rise ease-out infinite;
}

@keyframes lofi-rise {
  0%   { opacity: 0;    transform: translateY(0)       translateX(0)                          rotate(0deg); }
  6%   { opacity: 0.85; }
  30%  { opacity: 0.75; transform: translateY(-28vh)   translateX(var(--lofi-drift, 0px))     rotate(8deg); }
  55%  { opacity: 0.5;  transform: translateY(-55vh)   translateX(calc(var(--lofi-drift,0px)*-0.6)) rotate(-6deg); }
  80%  { opacity: 0.2;  transform: translateY(-80vh)   translateX(var(--lofi-drift, 0px))     rotate(12deg); }
  100% { opacity: 0;    transform: translateY(-108vh)  translateX(calc(var(--lofi-drift,0px)*1.4)) rotate(18deg); }
}