/* Kids Quest Premium Theme Stylesheet - Isolated & Optimized */

/* Dynamic Premium Theme Variables */
:root {
    --theme-bg: #f0fdf4;
    --theme-bg-pattern: radial-gradient(#dcfce7 2px, transparent 2px);
    --theme-bg-size: 24px 24px;
    --theme-header-bg: linear-gradient(135deg, #fef08a 0%, #fbcfe8 50%, #cffafe 100%);
    --theme-header-border: #f59e0b;
    --theme-footer-bg: linear-gradient(135deg, #cffafe 0%, #fbcfe8 50%, #fef08a 100%);
    --theme-footer-border: #f59e0b;
    
    --theme-card-bg: #ffffff;
    --theme-card-border: #fde047;
    --theme-card-shadow: rgba(253, 224, 71, 0.4);
    
    --theme-btn-bg: linear-gradient(to bottom, #22c55e, #16a34a);
    --theme-btn-border: #15803d;
    --theme-btn-shadow: #14532d;
    --theme-btn-text: #ffffff;
}

/* 1. Dino Jungle Theme (Default) */
.theme-default_theme {
    --theme-bg: #f0fdf4;
    --theme-bg-pattern: radial-gradient(#dcfce7 2px, transparent 2px);
    --theme-bg-size: 24px 24px;
    --theme-header-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    --theme-header-border: #16a34a;
    --theme-footer-bg: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    --theme-footer-border: #16a34a;
    --theme-card-bg: #ffffff;
    --theme-card-border: #86efac;
    --theme-card-shadow: rgba(34, 197, 94, 0.2);
    --theme-btn-bg: linear-gradient(to bottom, #4ade80, #22c55e);
    --theme-btn-border: #16a34a;
    --theme-btn-shadow: #14532d;
    --theme-btn-text: #ffffff;
}

/* 2. Princess Palace Theme */
.theme-princess_palace, .theme-princess_crown {
    --theme-bg: #fff1f2;
    --theme-bg-pattern: radial-gradient(#fecdd3 2px, transparent 2px);
    --theme-bg-size: 32px 32px;
    --theme-header-bg: linear-gradient(135deg, #fdf2f8 0%, #fbcfe8 100%);
    --theme-header-border: #db2777;
    --theme-footer-bg: linear-gradient(135deg, #fbcfe8 0%, #fdf2f8 100%);
    --theme-footer-border: #db2777;
    --theme-card-bg: #ffffff;
    --theme-card-border: #f472b6;
    --theme-card-shadow: rgba(219, 39, 119, 0.2);
    --theme-btn-bg: linear-gradient(to bottom, #ec4899, #db2777);
    --theme-btn-border: #be185d;
    --theme-btn-shadow: #831843;
    --theme-btn-text: #ffffff;
}

/* 3. Starry Space Theme */
.theme-space_cadet, .theme-alien_frame {
    --theme-bg: #090d16;
    --theme-bg-pattern: radial-gradient(#1e293b 1px, transparent 1px), radial-gradient(#22d3ee 1.5px, transparent 1.5px);
    --theme-bg-size: 40px 40px;
    --theme-header-bg: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    --theme-header-border: #06b6d4;
    --theme-footer-bg: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    --theme-footer-border: #06b6d4;
    --theme-card-bg: rgba(15, 23, 42, 0.85);
    --theme-card-border: #0891b2;
    --theme-card-shadow: rgba(6, 182, 212, 0.4);
    --theme-btn-bg: linear-gradient(to bottom, #06b6d4, #0891b2);
    --theme-btn-border: #0369a1;
    --theme-btn-shadow: #0c4a6e;
    --theme-btn-text: #ffffff;
}

/* 4. Candy Wonderland Theme */
.theme-candy_wonderland {
    --theme-bg: #faf5ff;
    --theme-bg-pattern: radial-gradient(#f3e8ff 3px, transparent 3px);
    --theme-bg-size: 20px 20px;
    --theme-header-bg: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    --theme-header-border: #d946ef;
    --theme-footer-bg: linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%);
    --theme-footer-border: #d946ef;
    --theme-card-bg: #ffffff;
    --theme-card-border: #e879f9;
    --theme-card-shadow: rgba(217, 70, 239, 0.2);
    --theme-btn-bg: linear-gradient(to bottom, #d946ef, #c084fc);
    --theme-btn-border: #a21caf;
    --theme-btn-shadow: #701a75;
    --theme-btn-text: #ffffff;
}

/* 5. Golden Spark Theme */
.theme-golden_spark, .theme-gold_frame {
    --theme-bg: #fefce8;
    --theme-bg-pattern: radial-gradient(#fef08a 2.5px, transparent 2.5px);
    --theme-bg-size: 28px 28px;
    --theme-header-bg: linear-gradient(135deg, #fefce8 0%, #fef08a 100%);
    --theme-header-border: #f59e0b;
    --theme-footer-bg: linear-gradient(135deg, #fef08a 0%, #fefce8 100%);
    --theme-footer-border: #f59e0b;
    --theme-card-bg: #ffffff;
    --theme-card-border: #fbbf24;
    --theme-card-shadow: rgba(245, 158, 11, 0.2);
    --theme-btn-bg: linear-gradient(to bottom, #f59e0b, #d97706);
    --theme-btn-border: #b45309;
    --theme-btn-shadow: #78350f;
    --theme-btn-text: #ffffff;
}

/* 6. Unicorn Dream Theme */
.theme-unicorn_dream {
    --theme-bg: #fdf4ff;
    --theme-bg-pattern: radial-gradient(#fae8ff 2px, transparent 2px), radial-gradient(#f5d0fe 3px, transparent 3px);
    --theme-bg-size: 30px 30px;
    --theme-header-bg: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    --theme-header-border: #c084fc;
    --theme-footer-bg: linear-gradient(135deg, #fae8ff 0%, #fdf4ff 100%);
    --theme-footer-border: #c084fc;
    --theme-card-bg: #ffffff;
    --theme-card-border: #d8b4fe;
    --theme-card-shadow: rgba(192, 132, 252, 0.2);
    --theme-btn-bg: linear-gradient(to bottom, #a855f7, #8b5cf6);
    --theme-btn-border: #7e22ce;
    --theme-btn-shadow: #581c87;
    --theme-btn-text: #ffffff;
}

/* 7. Rainbow Magic Theme */
.theme-rainbow_magic {
    --theme-bg: #f8fafc;
    --theme-bg-pattern: linear-gradient(45deg, #ffe4e6 25%, transparent 25%), linear-gradient(-45deg, #ffe4e6 25%, transparent 25%);
    --theme-bg-size: 40px 40px;
    --theme-header-bg: linear-gradient(to right, #f87171, #fb923c, #fbbf24, #34d399, #60a5fa, #818cf8, #c084fc);
    --theme-header-border: #e2e8f0;
    --theme-footer-bg: linear-gradient(to right, #f87171, #fb923c, #fbbf24, #34d399, #60a5fa, #818cf8, #c084fc);
    --theme-footer-border: #e2e8f0;
    --theme-card-bg: #ffffff;
    --theme-card-border: #fb7185;
    --theme-card-shadow: rgba(244, 63, 94, 0.2);
    --theme-btn-bg: linear-gradient(to right, #fb923c, #fbbf24, #34d399);
    --theme-btn-border: #d97706;
    --theme-btn-shadow: #78350f;
    --theme-btn-text: #ffffff;
}

/* 8. Ocean Adventure Theme */
.theme-ocean_adventure {
    --theme-bg: #ecfeff;
    --theme-bg-pattern: radial-gradient(#cffafe 3px, transparent 3px);
    --theme-bg-size: 24px 24px;
    --theme-header-bg: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    --theme-header-border: #0284c7;
    --theme-footer-bg: linear-gradient(135deg, #cffafe 0%, #ecfeff 100%);
    --theme-footer-border: #0284c7;
    --theme-card-bg: #ffffff;
    --theme-card-border: #38bdf8;
    --theme-card-shadow: rgba(14, 165, 233, 0.2);
    --theme-btn-bg: linear-gradient(to bottom, #0ea5e9, #0284c7);
    --theme-btn-border: #0369a1;
    --theme-btn-shadow: #0c4a6e;
    --theme-btn-text: #ffffff;
}

/* 9. Galaxy Explorer Theme */
.theme-galaxy_explorer {
    --theme-bg: #090514;
    --theme-bg-pattern: radial-gradient(#2e1065 1.5px, transparent 1.5px);
    --theme-bg-size: 36px 36px;
    --theme-header-bg: linear-gradient(135deg, #180026 0%, #3b0764 100%);
    --theme-header-border: #d8b4fe;
    --theme-footer-bg: linear-gradient(135deg, #3b0764 0%, #180026 100%);
    --theme-footer-border: #d8b4fe;
    --theme-card-bg: rgba(24, 0, 38, 0.85);
    --theme-card-border: #c084fc;
    --theme-card-shadow: rgba(168, 85, 247, 0.4);
    --theme-btn-bg: linear-gradient(to bottom, #8b5cf6, #7c3aed);
    --theme-btn-border: #6d28d9;
    --theme-btn-shadow: #4c1d95;
    --theme-btn-text: #ffffff;
}

/* 10. Art World Theme */
.theme-art_world {
    --theme-bg: #fffbeb;
    --theme-bg-pattern: radial-gradient(#fef3c7 4px, transparent 4px);
    --theme-bg-size: 32px 32px;
    --theme-header-bg: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    --theme-header-border: #3b82f6;
    --theme-footer-bg: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    --theme-footer-border: #3b82f6;
    --theme-card-bg: #ffffff;
    --theme-card-border: #60a5fa;
    --theme-card-shadow: rgba(59, 130, 246, 0.2);
    --theme-btn-bg: linear-gradient(to bottom, #3b82f6, #1d4ed8);
    --theme-btn-border: #1e40af;
    --theme-btn-shadow: #172554;
    --theme-btn-text: #ffffff;
}

/* Dark Theme Specific High-contrast Adjustments */
.theme-space_cadet .text-slate-500,
.theme-galaxy_explorer .text-slate-500 {
    color: #cbd5e1 !important;
}
.theme-space_cadet .text-purple-900,
.theme-galaxy_explorer .text-purple-900 {
    color: #cbd5e1 !important;
}
.theme-space_cadet .text-purple-950,
.theme-galaxy_explorer .text-purple-950 {
    color: #f8fafc !important;
}
.theme-space_cadet .text-slate-800,
.theme-galaxy_explorer .text-slate-800 {
    color: #f1f5f9 !important;
}
.theme-space_cadet .bg-white,
.theme-galaxy_explorer .bg-white {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-color: var(--theme-card-border) !important;
}
.theme-space_cadet .bg-slate-50,
.theme-galaxy_explorer .bg-slate-50 {
    background-color: rgba(30, 41, 59, 0.5) !important;
    border-color: rgba(255,255,255,0.05) !important;
}

/* Core Elements styling linked directly to CSS Variables */
body {
    font-family: 'Fredoka', sans-serif;
    background-color: var(--theme-bg) !important;
    background-image: var(--theme-bg-pattern) !important;
    background-size: var(--theme-bg-size) !important;
    transition: background-color 0.5s ease, background-image 0.5s ease;
}

header {
    background: var(--theme-header-bg) !important;
    border-color: var(--theme-header-border) !important;
    transition: all 0.5s ease;
}

footer {
    background: var(--theme-footer-bg) !important;
    border-color: var(--theme-footer-border) !important;
    transition: all 0.5s ease;
}

.bubble-card {
    background: var(--theme-card-bg) !important;
    border-color: var(--theme-card-border) !important;
    box-shadow: 0 8px 0 0 var(--theme-card-shadow) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bubble-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 0 0 var(--theme-card-shadow) !important;
}

.bubble-btn {
    background: var(--theme-btn-bg) !important;
    border-color: var(--theme-btn-border) !important;
    color: var(--theme-btn-text) !important;
    box-shadow: 0 6px 0 0 var(--theme-btn-shadow) !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bubble-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 0 var(--theme-btn-shadow) !important;
}

.bubble-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 0 var(--theme-btn-shadow) !important;
}

/* Float Particles Keyframes */
@keyframes particleUp {
    0% {
        transform: translateY(110vh) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-20vh) rotate(360deg) scale(1.2);
        opacity: 0;
    }
}

.theme-particle {
    position: fixed;
    bottom: -50px;
    font-size: 1.5rem;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    animation: particleUp linear infinite;
}

/* Playful Mascot Float */
@keyframes mascotFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(3deg); }
}
.mascot-float {
    animation: mascotFloat 4s ease-in-out infinite;
}