/* ==========================================================================
   ❄️ FOX RUNNER - THÈME HIVER (WINTER)
   Montagnes, lune, ciel étoilé et tempête de neige animée !
   ========================================================================== */

.theme-winter {
    /* Bordure glacée pour encadrer le jeu */
    border-color: #74b9ff !important;
    background-color: #0b1021;
    
    /* LA MAGIE DU FOND : 
       Couches 1 à 3 : Les flocons de neige (Gros, Moyens, Petits)
       Couche 4 : Le paysage complet encodé en SVG directement dans le CSS 
    */
    background-image:
        /* 1. Gros flocons (Premier plan) */
        radial-gradient(circle, #ffffff 2px, transparent 2.5px),
        /* 2. Flocons moyens (Plan intermédiaire) */
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 1.5px, transparent 2px),
        /* 3. Petits flocons (Arrière-plan) */
        radial-gradient(circle, rgba(255, 255, 255, 0.4) 1px, transparent 1.5px),
        
        /* 4. Le paysage de montagnes, lune et ciel */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%230B1021'/%3E%3Cstop offset='100%25' stop-color='%231B2745'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='400' fill='url(%23sky)'/%3E%3Ccircle cx='700' cy='80' r='35' fill='%23FEF08A'/%3E%3Ccircle cx='685' cy='70' r='30' fill='url(%23sky)'/%3E%3Cg fill='%23FFF'%3E%3Ccircle cx='50' cy='50' r='1.5'/%3E%3Ccircle cx='150' cy='120' r='1'/%3E%3Ccircle cx='300' cy='60' r='2' opacity='0.8'/%3E%3Ccircle cx='450' cy='150' r='1'/%3E%3Ccircle cx='550' cy='40' r='1.5'/%3E%3Ccircle cx='80' cy='180' r='2' opacity='0.5'/%3E%3C/g%3E%3Cpolygon points='0,350 150,150 300,350' fill='%231E293B'/%3E%3Cpolygon points='200,350 450,100 700,350' fill='%231E293B'/%3E%3Cpolygon points='550,350 750,180 900,350' fill='%231E293B'/%3E%3Cpolygon points='-50,350 100,200 250,350' fill='%23334155'/%3E%3Cpolygon points='150,350 350,170 550,350' fill='%23334155'/%3E%3Cpolygon points='400,350 600,220 800,350' fill='%23334155'/%3E%3Cpolygon points='100,200 80,225 100,235 120,225' fill='%23E2E8F0'/%3E%3Cpolygon points='350,170 315,210 335,220 350,210 365,220 385,210' fill='%23E2E8F0'/%3E%3Cpolygon points='600,220 575,250 600,260 625,250' fill='%23E2E8F0'/%3E%3Crect x='0' y='350' width='800' height='50' fill='%23F8FAFC'/%3E%3Crect x='0' y='350' width='800' height='4' fill='%23CBD5E1'/%3E%3C/svg%3E");

    /* Taille de chaque couche (très important pour que l'animation boucle parfaitement) */
    background-size:
        100px 100px, /* Neige 1 */
        150px 150px, /* Neige 2 */
        200px 200px, /* Neige 3 */
        cover;       /* Paysage */

    /* Position de départ */
    background-position: 
        0 0, 
        0 0, 
        0 0, 
        center bottom;

    /* On lance l'animation infinie de la neige ! */
    animation: winterSnowFall 10s linear infinite;
}

/* --- Animation fluide de la neige qui tombe --- */
@keyframes winterSnowFall {
    0% {
        background-position: 
            0px 0px, 
            0px 0px, 
            0px 0px, 
            center bottom;
    }
    100% {
        /* On décale proportionnellement pour un looping parfait sans à-coups */
        background-position: 
            100px 200px, /* Les gros tombent vite en diagonale */
            150px 300px, /* Les moyens tombent un peu plus lentement */
            200px 400px, /* Les petits tombent doucement au fond */
            center bottom;
    }
}

/* --- Styles du texte spécifiques à l'Hiver --- */
.theme-winter .hud-score {
    color: #81ecec; /* Un bleu cyan façon glace */
    text-shadow: 2px 2px 0px #0984e3, -1px -1px 0px #0984e3, 1px 1px 0px #000;
}

.theme-winter .hud-record {
    color: #dfe6e9; /* Gris très clair */
}

.theme-winter #game-over-screen h2 {
    color: #74b9ff;
    text-shadow: 0 0 15px rgba(116, 185, 255, 0.6);
}