/* === World Theme CSS Variables === */

/* World 1: Rainbow Letters — bright, colorful, fun */
.theme-rainbow {
    --bg-primary: #2d3436;
    --bg-gradient: linear-gradient(135deg, #ff6b6b 0%, #ffd32a 25%, #6ab04c 50%, #74b9ff 75%, #a29bfe 100%);
    --card-bg: rgba(255,255,255,0.15);
    --accent: #ffd32a;
    --accent-glow: rgba(249,202,36,0.4);
    --btn-correct: #6ab04c;
    --world-emoji: 🌈;
}

.theme-rainbow .screen {
    background: var(--bg-gradient);
}

.theme-rainbow .answer-btn {
    border-radius: 20px;
    border-width: 5px;
}

/* World 2: Ocean — deep blue, waves */
.theme-ocean {
    --bg-primary: #0a3d62;
    --bg-gradient: linear-gradient(135deg, #0a3d62 0%, #3c6382 50%, #60a3bc 100%);
    --card-bg: rgba(255,255,255,0.1);
    --accent: #38ada9;
    --accent-glow: rgba(56,173,169,0.4);
    --btn-correct: #38ada9;
    --world-emoji: 🌊;
}

.theme-ocean .screen {
    background: var(--bg-gradient);
}

/* Bubble effect for ocean theme */
.theme-ocean .screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(6px 6px at 50px 80px, rgba(255,255,255,0.15), transparent),
        radial-gradient(4px 4px at 150px 40px, rgba(255,255,255,0.1), transparent),
        radial-gradient(8px 8px at 300px 120px, rgba(255,255,255,0.12), transparent),
        radial-gradient(5px 5px at 450px 60px, rgba(255,255,255,0.08), transparent),
        radial-gradient(6px 6px at 600px 100px, rgba(255,255,255,0.14), transparent),
        radial-gradient(4px 4px at 750px 30px, rgba(255,255,255,0.1), transparent),
        radial-gradient(7px 7px at 900px 90px, rgba(255,255,255,0.11), transparent);
    background-size: 1000px 200px;
    animation: float 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.theme-ocean .screen > * {
    position: relative;
    z-index: 1;
}

/* World 3: Forest — green, earthy */
.theme-forest {
    --bg-primary: #1e3320;
    --bg-gradient: linear-gradient(135deg, #1e3320 0%, #2d5016 50%, #3c6e28 100%);
    --card-bg: rgba(255,255,255,0.1);
    --accent: #a3cb38;
    --accent-glow: rgba(163,203,56,0.4);
    --btn-correct: #a3cb38;
    --world-emoji: 🌲;
}

.theme-forest .screen {
    background: var(--bg-gradient);
}

.theme-forest .answer-btn {
    border-color: rgba(163,203,56,0.3);
}

/* World 4: Space — dark purple, stars */
.theme-space {
    --bg-primary: #0c0032;
    --bg-gradient: linear-gradient(135deg, #0c0032 0%, #190061 50%, #240090 100%);
    --card-bg: rgba(255,255,255,0.1);
    --accent: #00d2ff;
    --accent-glow: rgba(0,210,255,0.4);
    --btn-correct: #00d2ff;
    --world-emoji: 🚀;
}

.theme-space .screen {
    background: var(--bg-gradient);
}

.theme-space .screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 230px 80px, #fff, transparent),
        radial-gradient(2px 2px at 300px 30px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 370px 150px, #fff, transparent),
        radial-gradient(2px 2px at 450px 60px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 520px 110px, #fff, transparent),
        radial-gradient(2px 2px at 600px 40px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 680px 130px, #fff, transparent),
        radial-gradient(2px 2px at 750px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 820px 20px, #fff, transparent),
        radial-gradient(2px 2px at 900px 100px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 980px 60px, #fff, transparent);
    background-size: 1000px 200px;
    animation: twinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

.theme-space .screen > * {
    position: relative;
    z-index: 1;
}

/* World 5: Party — festive, bright */
.theme-party {
    --bg-primary: #2d3436;
    --bg-gradient: linear-gradient(135deg, #fd79a8 0%, #ffd32a 50%, #6c5ce7 100%);
    --card-bg: rgba(255,255,255,0.15);
    --accent: #fd79a8;
    --accent-glow: rgba(253,121,168,0.4);
    --btn-correct: #fd79a8;
    --world-emoji: 🎉;
}

.theme-party .screen {
    background: var(--bg-gradient);
}

/* === World Card Colors === */
.world-card-1 {
    background: linear-gradient(135deg, #ff6b6b, #ffd32a);
    box-shadow: 0 4px 0 #c44015, 0 6px 16px rgba(0,0,0,0.3);
}

.world-card-2 {
    background: linear-gradient(135deg, #0a3d62, #60a3bc);
    box-shadow: 0 4px 0 #062a45, 0 6px 16px rgba(0,0,0,0.3);
}

.world-card-3 {
    background: linear-gradient(135deg, #2d5016, #a3cb38);
    box-shadow: 0 4px 0 #1e3320, 0 6px 16px rgba(0,0,0,0.3);
}

.world-card-4 {
    background: linear-gradient(135deg, #190061, #3500d3);
    box-shadow: 0 4px 0 #0c0032, 0 6px 16px rgba(0,0,0,0.3);
}

.world-card-5 {
    background: linear-gradient(135deg, #fd79a8, #6c5ce7);
    box-shadow: 0 4px 0 #c44a7a, 0 6px 16px rgba(0,0,0,0.3);
}