/* ====== THEME VARIABLES ====== */
.theme-space {
  --bg: #0a0a2e; --bg2: #141450; --card: rgba(30,30,80,0.85); --card-hover: rgba(50,50,120,0.9);
  --text: #e8e8ff; --text-dim: #8888cc; --accent: #7c4dff; --accent2: #ff6090;
  --primary: #5c6bc0; --primary-hover: #7986cb; --success: #66bb6a; --danger: #ef5350;
  --border: rgba(124,77,255,0.3); --shadow: rgba(0,0,0,0.4);
}
.theme-ocean {
  --bg: #042f4a; --bg2: #064273; --card: rgba(10,60,100,0.85); --card-hover: rgba(20,80,130,0.9);
  --text: #e0f7fa; --text-dim: #80cbc4; --accent: #00bcd4; --accent2: #ff8a65;
  --primary: #0097a7; --primary-hover: #00acc1; --success: #66bb6a; --danger: #ef5350;
  --border: rgba(0,188,212,0.3); --shadow: rgba(0,0,0,0.4);
}
.theme-jungle {
  --bg: #1a2e0a; --bg2: #2d4a0f; --card: rgba(30,60,15,0.85); --card-hover: rgba(50,80,25,0.9);
  --text: #e8f5e9; --text-dim: #a5d6a7; --accent: #66bb6a; --accent2: #ffb74d;
  --primary: #43a047; --primary-hover: #4caf50; --success: #66bb6a; --danger: #ef5350;
  --border: rgba(102,187,106,0.3); --shadow: rgba(0,0,0,0.4);
}
.theme-castle {
  --bg: #2a0a2e; --bg2: #3d1042; --card: rgba(60,20,70,0.85); --card-hover: rgba(80,30,90,0.9);
  --text: #fce4ec; --text-dim: #ce93d8; --accent: #e040fb; --accent2: #ffd54f;
  --primary: #ab47bc; --primary-hover: #ba68c8; --success: #66bb6a; --danger: #ef5350;
  --border: rgba(224,64,251,0.3); --shadow: rgba(0,0,0,0.4);
}

/* ====== BACKGROUND EFFECTS ====== */
.bg-effects { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle 2s ease-in-out infinite alternate; }
@keyframes twinkle { from{opacity:.2;transform:scale(.8)} to{opacity:1;transform:scale(1.2)} }
.bubble { position: absolute; bottom: -20px; width: 15px; height: 15px; background: rgba(255,255,255,0.15); border-radius: 50%; animation: rise 6s ease-in infinite; }
@keyframes rise { to{transform:translateY(-110vh) rotate(360deg);opacity:0} }
.leaf { position: absolute; font-size: 1.5rem; animation: sway 4s ease-in-out infinite alternate; }
@keyframes sway { from{transform:translateX(-10px) rotate(-5deg)} to{transform:translateX(10px) rotate(5deg)} }
.sparkle { position: absolute; font-size: 1.2rem; animation: sparkAnim 3s ease-in-out infinite; }
@keyframes sparkAnim { 0%,100%{opacity:.2;transform:scale(.5)} 50%{opacity:1;transform:scale(1.2)} }