/* Theme palettes. The theme id is set on <html data-theme="...">, so these override the
 * :root defaults in app.css (which ARE the fairy-garden theme). Variable names keep the
 * original meaning: --pink = primary, --lavender = secondary, --mint = "correct" green,
 * --gold = highlight. */

/* ------------------------------------------------------------ fairy-garden (defaults) */
html[data-theme="fairy-garden"] { /* uses app.css :root values unchanged */ }

/* ------------------------------------------------------------ mermaid-ocean */
html[data-theme="mermaid-ocean"] {
  --pink: #5ccfe6; --pink-deep: #1f9dbd; --pink-soft: #e0f7fb;
  --lavender: #b8a4f0; --lavender-deep: #8466d8; --lavender-soft: #eee8ff;
  --mint: #7eddc2; --mint-deep: #3fbf9a; --mint-soft: #e4faf3;
  --gold: #ffd76a; --gold-deep: #f0a929;
  --text: #1f3b57; --muted: #56758f;
  --shadow: 0 10px 28px rgba(31, 157, 189, 0.18);
  --font-display: "Chalkboard SE", "Marker Felt", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  --bg:
    radial-gradient(ellipse at 15% 0%, #dcfcff 0%, transparent 50%),
    radial-gradient(ellipse at 90% 12%, #ece4ff 0%, transparent 45%),
    radial-gradient(ellipse at 50% 108%, #fff0d2 0%, transparent 38%),
    linear-gradient(180deg, #e8fbff 0%, #d2f4f8 45%, #c2eff1 80%, #fbeed4 100%);
  --title-grad: linear-gradient(120deg, #1f9dbd, #8466d8, #ff7fa8);
  --title-sparkle-color: #1f9dbd;
  --card-bg: linear-gradient(180deg, #ffffff 0%, #effcff 100%);
  --card-border: rgba(92, 207, 230, 0.4);
  --card-stripe: linear-gradient(90deg, #5ccfe6, #b8a4f0, #ff9ec5, #7eddc2);
  --btn-grad: linear-gradient(180deg, #86e3f4 0%, #1f9dbd 100%);
  --btn-edge: #167c96; --btn-glow: rgba(31, 157, 189, 0.35);
  --lav-top: #d6caff; --lav-edge: #6a4fc0;
  --ghost-bottom: #f0fbff;
  --key-bg: linear-gradient(180deg, #ffffff 0%, #e9fbff 100%);
  --key-border: #bfe9f2; --key-edge: #98d3e0;
  --soft-border: #cdeef5;
  --picked-bg: linear-gradient(135deg, #e0f7fb, #eee8ff);
  --slot-border: #c5e8f0; --slot-empty: #a8d8e4;
  --spell-border: #a9dcea;
  --letter-bg: linear-gradient(180deg, #fff 0%, #e0f7fb 100%);
  --banner-grad: linear-gradient(135deg, #1f9dbd, #8466d8);
  --banner-perfect-grad: linear-gradient(135deg, #1f9dbd, #7eddc2, #8466d8, #ff7fa8);
  --grade-grad: linear-gradient(120deg, #1f9dbd, #8466d8, #ff7fa8);
  --streak-grad: linear-gradient(120deg, #1f9dbd, #ffb347, #8466d8);
  --perfect-burst-bg:
    radial-gradient(circle at 20% 30%, rgba(92, 207, 230, 0.35), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(184, 164, 240, 0.3), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(126, 221, 194, 0.3), transparent 45%);
}
html[data-theme="mermaid-ocean"] .sparkle-field span {
  animation: oceanDrift 9s linear infinite;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}
@keyframes oceanDrift {
  0% { transform: translate(0, 18vh) scale(0.8); opacity: 0; }
  12% { opacity: 0.6; }
  50% { transform: translate(12px, -4vh) scale(1); }
  88% { opacity: 0.55; }
  100% { transform: translate(-8px, -26vh) scale(1.1); opacity: 0; }
}

/* ------------------------------------------------------------ unicorn-rainbow */
html[data-theme="unicorn-rainbow"] {
  --pink: #ff7ab8; --pink-deep: #e8488f; --pink-soft: #ffe3f1;
  --lavender: #b79cff; --lavender-deep: #8b5cf6; --lavender-soft: #f1eaff;
  --mint: #7ee0b5; --mint-deep: #3cc690; --mint-soft: #e4faf1;
  --gold: #ffd84d; --gold-deep: #f5a524;
  --text: #45265a; --muted: #7f5f93;
  --shadow: 0 10px 28px rgba(232, 72, 143, 0.16);
  --font-display: "Avenir Next Rounded", "Arial Rounded MT Bold", "Nunito", "Segoe UI", system-ui, sans-serif;
  --bg:
    radial-gradient(ellipse 30% 12% at 18% 14%, rgba(255, 255, 255, 0.95) 0%, transparent 100%),
    radial-gradient(ellipse 26% 10% at 84% 34%, rgba(255, 255, 255, 0.9) 0%, transparent 100%),
    radial-gradient(ellipse 30% 11% at 30% 78%, rgba(255, 255, 255, 0.85) 0%, transparent 100%),
    linear-gradient(180deg, #ffe2ee 0%, #fff0dc 20%, #fffbd6 38%, #e3fbe8 56%, #e1f1ff 74%, #efe4ff 100%);
  --title-grad: linear-gradient(90deg, #ff5e8e, #ff9f43, #f0b400, #33c483, #3aa0ff, #9b6bff);
  --title-sparkle-color: #e8488f;
  --card-bg: linear-gradient(180deg, #ffffff 0%, #fff6fb 100%);
  --card-border: rgba(183, 156, 255, 0.35);
  --card-stripe: linear-gradient(90deg, #ff6b8b, #ffa94d, #ffe066, #8ce99a, #74c0fc, #b197fc);
  --btn-grad: linear-gradient(180deg, #ffa6d0 0%, #e8488f 100%);
  --btn-edge: #c2306f; --btn-glow: rgba(232, 72, 143, 0.35);
  --lav-top: #d8c8ff; --lav-edge: #6d3fe0;
  --ghost-bottom: #fff4fb;
  --key-bg: linear-gradient(180deg, #ffffff 0%, #fff1f8 100%);
  --key-border: #f5cfe4; --key-edge: #e6b0cf;
  --soft-border: #f3d7ea;
  --picked-bg: linear-gradient(135deg, #ffe6f3, #efe6ff);
  --slot-border: #ecd0f0; --slot-empty: #e9c6e0;
  --spell-border: #e3c5f2;
  --letter-bg: linear-gradient(180deg, #fff 0%, #ffe6f3 100%);
  --banner-grad: linear-gradient(135deg, #ff5e8e, #ff9f43 45%, #9b6bff);
  --banner-perfect-grad: linear-gradient(90deg, #ff5e8e, #ff9f43, #f0b400, #33c483, #3aa0ff, #9b6bff, #ff5e8e);
  --grade-grad: linear-gradient(90deg, #ff5e8e, #ff9f43, #33c483, #3aa0ff, #9b6bff);
  --streak-grad: linear-gradient(90deg, #ff5e8e, #f0b400, #3aa0ff, #9b6bff);
  --perfect-burst-bg:
    radial-gradient(circle at 20% 30%, rgba(255, 122, 184, 0.3), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(116, 192, 252, 0.3), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255, 224, 102, 0.32), transparent 45%);
}
html[data-theme="unicorn-rainbow"] .sparkle-field span { animation: unicornFloat 5s ease-in-out infinite; }
@keyframes unicornFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); opacity: 0.35; }
  50% { transform: translateY(-14px) rotate(8deg) scale(1.15); opacity: 0.8; }
}

/* ------------------------------------------------------------ starry-princess */
html[data-theme="starry-princess"] {
  --pink: #ff9ad5; --pink-deep: #d9468f; --pink-soft: #ffe6f4;
  --lavender: #b69cff; --lavender-deep: #7c4dff; --lavender-soft: #efe8ff;
  --mint: #7eddc2; --mint-deep: #2fbf96; --mint-soft: #e4faf3;
  --gold: #ffd76a; --gold-deep: #e8a317;
  --text: #2a1f4d; --muted: #6b5a92;
  --shadow: 0 12px 30px rgba(8, 4, 30, 0.45);
  --font-display: "Noteworthy", "Chalkboard SE", "Segoe Print", "Segoe UI", system-ui, sans-serif;
  --on-bg-muted: #e6ddff;
  --title-sparkle-color: #ffd76a;
  --bg:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 44%, #fff8d6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 34% 62%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 58% 84%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 90%, #fff 50%, transparent 51%),
    radial-gradient(ellipse at 85% 6%, rgba(255, 215, 106, 0.28) 0%, transparent 32%),
    radial-gradient(ellipse at 10% 100%, rgba(255, 154, 213, 0.25) 0%, transparent 45%),
    linear-gradient(180deg, #140f3a 0%, #2d1b69 55%, #51308f 100%);
  --title-grad: linear-gradient(120deg, #ffe08a, #ffb3e6, #c9b8ff);
  --card-bg: linear-gradient(180deg, #fdfbff 0%, #f1ebff 100%);
  --card-border: rgba(255, 215, 106, 0.6);
  --card-stripe: linear-gradient(90deg, #ffd76a, #ff9ad5, #b69cff, #7ec8ff);
  --btn-grad: linear-gradient(180deg, #c3adff 0%, #7c4dff 100%);
  --btn-edge: #5a2fd0; --btn-glow: rgba(124, 77, 255, 0.4);
  --lav-top: #d9ccff; --lav-edge: #5a2fd0;
  --ghost-bottom: #f4efff;
  --key-bg: linear-gradient(180deg, #ffffff 0%, #f3edff 100%);
  --key-border: #dccfff; --key-edge: #bba7f0;
  --soft-border: #ddd0ff;
  --picked-bg: linear-gradient(135deg, #fff3cf, #efe8ff);
  --slot-border: #d6c8ff; --slot-empty: #c9b8f5;
  --spell-border: #cbb8ff;
  --letter-bg: linear-gradient(180deg, #fff 0%, #f1eaff 100%);
  --banner-grad: linear-gradient(135deg, #7c4dff, #d9468f);
  --banner-perfect-grad: linear-gradient(135deg, #e8a317, #ff9ad5, #7c4dff, #7ec8ff);
  --grade-grad: linear-gradient(120deg, #e8a317, #d9468f, #7c4dff);
  --streak-grad: linear-gradient(120deg, #d9468f, #e8a317, #7c4dff);
  --perfect-burst-bg:
    radial-gradient(circle at 20% 30%, rgba(255, 215, 106, 0.3), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(182, 156, 255, 0.35), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255, 154, 213, 0.3), transparent 45%);
  color-scheme: light;
}
html[data-theme="starry-princess"] body { color: var(--text); }
html[data-theme="starry-princess"] .sparkle-field span {
  color: #fff8d6;
  animation: starTwinkle 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 240, 180, 0.9));
}
@keyframes starTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.25) rotate(20deg); }
}


/* ------------------------------------------------------------ dino-adventure */
html[data-theme="dino-adventure"] {
  --pink: #8bc34a; --pink-deep: #558b2f; --pink-soft: #f1f8e9;
  --lavender: #ff8a65; --lavender-deep: #e64a19; --lavender-soft: #fbe9e7;
  --mint: #aed581; --mint-deep: #7cb342; --mint-soft: #f1f8e9;
  --gold: #ffd54f; --gold-deep: #ffa000;
  --text: #3e2723; --muted: #6d4c41;
  --shadow: 0 10px 28px rgba(85, 139, 47, 0.22);
  --font-display: "Chalkboard SE", "Marker Felt", "Comic Sans MS", "Segoe UI", system-ui, sans-serif;
  --bg:
    radial-gradient(ellipse at 12% 0%, #e8f5d8 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, #ffe0b2 0%, transparent 45%),
    radial-gradient(ellipse at 50% 110%, #ffccbc 0%, transparent 40%),
    linear-gradient(180deg, #f1f8e9 0%, #dcedc8 40%, #fff3e0 75%, #ffccbc 100%);
  --title-grad: linear-gradient(120deg, #558b2f, #e64a19, #ffa000);
  --title-sparkle-color: #558b2f;
  --card-bg: linear-gradient(180deg, #ffffff 0%, #f1f8e9 100%);
  --card-border: rgba(139, 195, 74, 0.45);
  --card-stripe: linear-gradient(90deg, #8bc34a, #ff8a65, #ffd54f, #66bb6a);
  --btn-grad: linear-gradient(180deg, #aed581 0%, #558b2f 100%);
  --btn-edge: #33691e; --btn-glow: rgba(85, 139, 47, 0.4);
  --lav-top: #ffab91; --lav-edge: #d84315;
  --ghost-bottom: #f1f8e9;
  --key-bg: linear-gradient(180deg, #ffffff 0%, #f1f8e9 100%);
  --key-border: #c5e1a5; --key-edge: #9ccc65;
  --soft-border: #dcedc8;
  --picked-bg: linear-gradient(135deg, #f1f8e9, #ffe0b2);
  --slot-border: #c5e1a5; --slot-empty: #aed581;
  --spell-border: #aed581;
  --letter-bg: linear-gradient(180deg, #fff 0%, #f1f8e9 100%);
  --banner-grad: linear-gradient(135deg, #558b2f, #e64a19);
  --banner-perfect-grad: linear-gradient(135deg, #558b2f, #ff8a65, #ffd54f, #7cb342);
  --grade-grad: linear-gradient(120deg, #558b2f, #e64a19, #ffa000);
  --streak-grad: linear-gradient(120deg, #558b2f, #ff8a65, #ffa000);
  --perfect-burst-bg:
    radial-gradient(circle at 20% 30%, rgba(139, 195, 74, 0.35), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255, 138, 101, 0.3), transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(255, 213, 79, 0.3), transparent 45%);
}
html[data-theme="dino-adventure"] .sparkle-field span {
  animation: dinoSway 8s ease-in-out infinite;
}
@keyframes dinoSway {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(12px) rotate(4deg); }
}