/* Theme backdrop container - replaces the flat body-gradient background. */
#themeBackdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#themeBackdropCanvas {
  position: absolute;
  inset: 0;
}
.theme-layer {
  position: absolute;
  pointer-events: none;
}

/* Neon (Tron) */
.theme-neon-glow {
  inset: 0;
  background: radial-gradient(ellipse at 50% 32%, rgba(0, 229, 255, 0.4) 0%, rgba(0, 0, 0, 0) 62%);
}

/* Aurora - port of iOS AuroraBackdrop: deep night gradient + soft blurred
   swaying color curtains (screen-blended so overlaps glow). */
.theme-aurora-base {
  inset: 0;
  background: linear-gradient(to bottom, #02030f 0%, #08122a 50%, #02040c 100%);
}
.theme-aurora-ribbon-wrap {
  top: -25vh; height: 150vh;
  transform-origin: center center;
  mix-blend-mode: screen;
  overflow: visible;
}
.theme-aurora-ribbon {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--rc) 42%, var(--rc) 62%, transparent 100%);
  opacity: 0.56;
  filter: blur(30px);
}

/* Volcano - port of iOS VolcanoBackdrop: dark basalt base, pulsing bottom
   magma glow, and a hot lava band along the bottom edge. The cone, rivers,
   crater glow, spits and embers are canvas-drawn (see volcano.js). */
.theme-volcano-base {
  inset: 0;
  background: linear-gradient(to bottom, #0b0406 0%, #1c0806 55%, #3a0e07 100%);
}
.theme-volcano-glow {
  left: 50%; bottom: -40vh; width: 170vmax; height: 170vmax;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,31,0.42) 0%, transparent 55%);
}
.theme-volcano-lava {
  left: 0; right: 0; bottom: 0; height: 13vh;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,122,31,0.55) 55%, rgba(255,210,74,0.85) 100%);
  filter: blur(9px);
}

/* Space - port of iOS SpaceBackdrop: deep gradient + Milky-Way band + drifting
   nebula clouds (planets/stars are canvas, see space.js). */
.theme-space-base {
  inset: 0;
  background: linear-gradient(to bottom, #05030f 0%, #0a0620 50%, #030109 100%);
}
.theme-space-milkyway {
  left: 50%; top: 50%; width: 150vw; height: 34vh;
  transform: translate(-50%, -50%) rotate(24deg);
  border-radius: 999px;
  background: linear-gradient(to right, transparent 0%, rgba(106,76,255,0.22) 30%, rgba(200,140,255,0.30) 42%, rgba(240,230,255,0.35) 50%, rgba(92,200,255,0.24) 62%, transparent 100%);
  filter: blur(34px);
  mix-blend-mode: screen;
}
.theme-space-nebula {
  width: 62vw; height: 62vh; border-radius: 50%;
  filter: blur(30px); opacity: 0.9; mix-blend-mode: screen;
}
.theme-space-nebula-1 { left: 5%; top: 10%; background: radial-gradient(circle, rgba(122,60,255,0.85), transparent 70%); }
.theme-space-nebula-2 { right: 5%; top: 30%; background: radial-gradient(circle, rgba(210,75,255,0.7), transparent 70%); }
.theme-space-galaxy {
  left: 55%; top: 84%; width: 46vw; height: 46vw; max-width: 460px; max-height: 460px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,208,255,0.32) 0%, transparent 62%);
  filter: blur(30px);
  mix-blend-mode: screen;
}

/* Prism (legendary) - port of iOS PrismBackdrop: a spinning rainbow spectrum
   wheel, counter-rotating god-rays, drifting jewel blobs, dispersion beams,
   and a pulsing refractive core, all soft/blurred and screen-blended so they
   read as luminous dispersed light. Sparkles/glints are canvas (prism.js). */
.theme-prism-base {
  inset: 0;
  background: linear-gradient(to bottom, #160a34 0%, #2a165e 50%, #0a0620 100%);
}
.theme-prism-wheel, .theme-prism-rays {
  left: 50%; top: 42%; width: 170vmax; height: 170vmax;
  transform-origin: center center;
  mix-blend-mode: screen;
  margin-left: -85vmax; margin-top: -85vmax;
}
.theme-prism-wheel {
  border-radius: 50%;
  background: conic-gradient(#ff5c8a, #ffb15c, #ffe97a, #5cffb0, #5ce0ff, #6c8cff, #c88cff, #ff5cc0, #ff5c8a);
  filter: blur(72px);
  opacity: 0.52;
}
.theme-prism-rays {
  width: 190vmax; height: 190vmax; margin-left: -95vmax; margin-top: -95vmax;
  background: repeating-conic-gradient(rgba(255,255,255,0.10) 0deg 11.25deg, transparent 11.25deg 22.5deg);
  filter: blur(10px);
}
.theme-prism-blobs, .theme-prism-beams { inset: 0; }
.theme-prism-blob {
  position: absolute;
  width: 95vw; height: 72vh;
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.theme-prism-beam {
  position: absolute; top: 50%;
  width: 15vw; height: 150vh;
  border-radius: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,92,138,0.16), rgba(255,224,122,0.15), rgba(92,255,208,0.15), rgba(92,140,255,0.15), rgba(200,140,255,0.14), transparent);
  filter: blur(14px);
  mix-blend-mode: screen;
}
.theme-prism-core {
  left: 50%; top: 42%; width: 84vmin; height: 84vmin;
  margin-left: -42vmin; margin-top: -42vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.24) 0%, rgba(217,200,255,0.12) 40%, transparent 70%);
  mix-blend-mode: screen;
}