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

/* World 1: Number Blocks — bright primary colors, blocky */
.theme-numberblocks {
    --bg-primary: #2d3436;
    --bg-gradient: linear-gradient(135deg, #ee5a24 0%, #f6e58d 50%, #6ab04c 100%);
    --card-bg: rgba(255,255,255,0.15);
    --accent: #f9ca24;
    --accent-glow: rgba(249,202,36,0.4);
    --btn-correct: #6ab04c;
    --world-emoji: 🔢;
}

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

.theme-numberblocks .answer-btn {
    border-radius: 12px;
    border-width: 5px;
}

/* World 2: Space / Buzz Lightyear — 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);
}

/* Stars background for space theme */
.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 3: Ninjago — black/red/gold */
.theme-ninjago {
    --bg-primary: #1a1a1a;
    --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d1f1f 50%, #3d0000 100%);
    --card-bg: rgba(255,50,50,0.1);
    --accent: #ffd32a;
    --accent-glow: rgba(255,211,42,0.4);
    --btn-correct: #ffd32a;
    --world-emoji: ⚔️;
}

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

.theme-ninjago .answer-btn {
    border-color: rgba(255,211,42,0.3);
}

/* World 4: Teenieping — pastel pink/lavender */
.theme-teenieping {
    --bg-primary: #ffeef8;
    --bg-gradient: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 50%, #ffecd2 100%);
    --card-bg: rgba(255,255,255,0.4);
    --accent: #fd79a8;
    --accent-glow: rgba(253,121,168,0.4);
    --btn-correct: #fd79a8;
    --world-emoji: 🧚;
}

.theme-teenieping .screen {
    background: var(--bg-gradient);
    color: #2d3436;
}

.theme-teenieping .answer-btn {
    color: #2d3436;
    border-color: rgba(253,121,168,0.3);
    text-shadow: none;
}

.theme-teenieping h2,
.theme-teenieping .question-prompt {
    color: #6c5ce7;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

/* World 5: Hello Carbot — bold blue/red/silver */
.theme-carbot {
    --bg-primary: #0a1628;
    --bg-gradient: linear-gradient(135deg, #0a1628 0%, #1e3a5f 50%, #2c3e50 100%);
    --card-bg: rgba(52,152,219,0.15);
    --accent: #e74c3c;
    --accent-glow: rgba(231,76,60,0.4);
    --btn-correct: #3498db;
    --world-emoji: 🤖;
}

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

.theme-carbot .answer-btn {
    border-color: rgba(52,152,219,0.4);
}

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

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

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

.world-card-4 {
    background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
    box-shadow: 0 4px 0 #d4a0c8, 0 6px 16px rgba(0,0,0,0.2);
    color: #2d3436;
}

.world-card-5 {
    background: linear-gradient(135deg, #1e3a5f, #e74c3c);
    box-shadow: 0 4px 0 #152a45, 0 6px 16px rgba(0,0,0,0.3);
}