/* Base overrides for themes */
body[data-theme="water"] {
  --bg-deep: #001a33;
  --bg-mid: #004080;
  --panel: #003366;
  --panel-edge: #0059b3;
  --cyan: #66ccff;
  --coral: #ff6666;
  --gold: #ffcc66;
  --text: #e6f2ff;
  --text-dim: #99ccff;
}

body[data-theme="forest"] {
  --bg-deep: #0f291e;
  --bg-mid: #1f4d36;
  --panel: #1b4330;
  --panel-edge: #2d6b4d;
  --cyan: #88d4ab;
  --coral: #ff8c66;
  --gold: #ffdf66;
  --text: #f0fcf5;
  --text-dim: #b3e6cb;
}

body[data-theme="desert"] {
  --bg-deep: #2a1600;
  --bg-mid: #593100;
  --panel: #402300;
  --panel-edge: #8c4e00;
  --cyan: #ffb366;
  --coral: #ff6666;
  --gold: #ffdf66;
  --text: #fff2e6;
  --text-dim: #ffcc99;
}

body[data-theme="icicles"] {
  --bg-deep: #001326;
  --bg-mid: #003973;
  --panel: #00264d;
  --panel-edge: #004d99;
  --cyan: #b3e6ff;
  --coral: #ff6b6b;
  --gold: #ffd166;
  --text: #f2f9ff;
  --text-dim: #99d6ff;
}

/* Animations for theme particles */
#theme-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.theme-particle { position: absolute; }

/* Space stars */
.star-anim { animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Water bubbles */
.float-up { animation: floatUp linear infinite; }
@keyframes floatUp {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}

/* Forest leaves / Icicle snow */
.fall-down { animation: fallDown linear infinite; }
@keyframes fallDown {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(120vh) rotate(360deg); opacity: 0; }
}

/* Wobbling falling (leaves) */
.fall-down-wobble { animation: fallDownWobble linear infinite; }
@keyframes fallDownWobble {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  50% { transform: translateY(60vh) translateX(30px) rotate(180deg); }
  90% { opacity: 0.6; }
  100% { transform: translateY(120vh) translateX(-30px) rotate(360deg); opacity: 0; }
}

/* Desert sand/dust */
.sand-anim { animation: sandBlow linear infinite; }
@keyframes sandBlow {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateX(100vw) translateY(-20vh); opacity: 0; }
}