/* =====================================================================
   Thème "ESPACE / GALAXIE" — LUVUMBU LAND
   Tout est scopé sous  body.theme-espace  pour ne toucher qu'à ce thème.
   Restyle la fenêtre du monde, le sol, les collines (→ planètes),
   les nuages (→ nébuleuses) et les tuyaux/blocs (→ téléporteurs/énergie).
   ===================================================================== */

/* Fond global plus sombre pour l'immersion */
body.theme-espace { background: #04020d; }

/* ---- Fenêtre du monde : champ d'étoiles + nébuleuse ---- */
body.theme-espace .world {
    background:
        radial-gradient(2px 2px at 18% 24%, #ffffff, transparent),
        radial-gradient(2px 2px at 68% 16%, #cfe6ff, transparent),
        radial-gradient(1.5px 1.5px at 42% 62%, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 86% 48%, #ffd6f5, transparent),
        radial-gradient(2px 2px at 30% 80%, #d9ffff, transparent),
        radial-gradient(1.5px 1.5px at 78% 72%, #ffffff, transparent),
        radial-gradient(circle at 78% 24%, rgba(124, 77, 255, .35), transparent 42%),
        radial-gradient(circle at 12% 86%, rgba(43, 209, 255, .18), transparent 48%),
        linear-gradient(var(--sky1), var(--sky2));
    background-size:
        200px 200px, 260px 260px, 170px 170px, 230px 230px, 150px 150px, 290px 290px,
        100% 100%, 100% 100%, 100% 100%;
    background-repeat: repeat;
}

/* Grosse planète anneautée en haut à droite (fixe, ne défile pas) */
body.theme-espace .world::before {
    content: '';
    position: absolute;
    top: 22px; right: 40px;
    width: 86px; height: 86px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ffd9a0, #e07a3c 55%, #8a3d18);
    box-shadow: 0 0 26px rgba(255, 160, 90, .45), inset -10px -10px 0 rgba(0, 0, 0, .25);
    z-index: 0; pointer-events: none;
}
body.theme-espace .world::after {
    content: '';
    position: absolute;
    top: 50px; right: 6px;
    width: 154px; height: 40px;
    border: 4px solid rgba(255, 210, 160, .55);
    border-radius: 50%;
    transform: rotate(-22deg);
    z-index: 0; pointer-events: none;
    animation: espRing 46s linear infinite;   /* l'anneau tourne lentement */
}

/* ---- MINI-MOUVEMENTS de l'univers ESPACE ---- */
/* scintillement global des étoiles */
@keyframes espTwinkle { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }
body.theme-espace .world { animation: espTwinkle 4.2s ease-in-out infinite; }
/* la planète "respire" (halo pulsé) */
@keyframes espPlanet {
    0%,100% { box-shadow: 0 0 26px rgba(255,160,90,.45), inset -10px -10px 0 rgba(0,0,0,.25); }
    50%     { box-shadow: 0 0 42px rgba(255,185,115,.75), inset -10px -10px 0 rgba(0,0,0,.25); }
}
body.theme-espace .world::before { animation: espPlanet 5s ease-in-out infinite; }
/* rotation de l'anneau (en conservant son inclinaison) */
@keyframes espRing { from { transform: rotate(-22deg); } to { transform: rotate(338deg); } }
/* nébuleuses (nuages) qui pulsent doucement */
@keyframes espNeb { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
body.theme-espace .cloud { animation: lvDrift 9s ease-in-out infinite alternate, espNeb 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  body.theme-espace .world,
  body.theme-espace .world::before,
  body.theme-espace .world::after,
  body.theme-espace .cloud{ animation:none !important; } }

/* ---- Sol = plateforme métallique rivetée + liseré néon ---- */
body.theme-espace .ground {
    background:
        radial-gradient(circle, rgba(124, 92, 255, .35) 1.5px, transparent 2px) 6px 6px/24px 24px,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 30px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .32) 0 2px, transparent 2px 26px),
        linear-gradient(#46406a, #211d38);
    border-top: 5px solid #7c5cff;
    box-shadow: inset 0 5px 0 rgba(124, 92, 255, .35);
}

/* ---- "Collines" → planètes/lunes lumineuses ---- */
body.theme-espace .hill {
    width: 120px; height: 120px;
    border-radius: 50% !important;
    border: 4px solid #2a1a55;
    background: radial-gradient(circle at 34% 30%, #b9a3ff, #6a4db8 58%, #38256e);
    box-shadow: 0 0 26px rgba(124, 77, 255, .5), inset -14px -14px 0 rgba(0, 0, 0, .22);
    opacity: .9;
}

/* ---- "Nuages" → nébuleuses / amas lumineux violets ---- */
body.theme-espace .cloud {
    background: rgba(124, 77, 255, .55);
    box-shadow: 0 0 20px 5px rgba(124, 77, 255, .45);
}
body.theme-espace .cloud::before,
body.theme-espace .cloud::after {
    background: rgba(168, 130, 255, .65);
}

/* ---- Tuyaux → téléporteurs cyan lumineux ---- */
body.theme-espace .pipe,
body.theme-espace .pipe .lip {
    background: linear-gradient(#2bd1ff, #1577c0);
    border-color: #0a3a66;
    box-shadow: inset -6px 0 0 #0e4f8a, 0 0 16px rgba(43, 209, 255, .55);
}

/* ---- Bloc "?" → bloc d'énergie violet ---- */
body.theme-espace .block.q {
    background: #7c4dff;
    box-shadow: inset -4px -4px 0 #4a2db8;
    color: #ffe27a;
}
body.theme-espace .block.brick {
    background: #2c2750;
    box-shadow: inset -4px -4px 0 #15122e;
}

/* ---- Drapeau de fin → balise lumineuse ---- */
body.theme-espace .flag .cloth { background: #2bd1ff; border-color: #0a3a66; }
body.theme-espace .flag .ball  { background: #ffe27a; box-shadow: 0 0 12px rgba(255, 226, 122, .8); }
body.theme-espace .flag .pole  { background: #8a93b5; }