/* =====================================================================
   Thème "OCÉAN / ABYSSE" — LUVUMBU LAND
   Tout est scopé sous  body.theme-ocean  pour ne toucher qu'à ce thème.
   Restyle la fenêtre du monde (eau + rayons + bulles), le sol (sable/récif),
   les collines (→ coraux), les nuages (→ bancs de lumière),
   les tuyaux/blocs (→ conduits sous-marins / coffres) et le drapeau (→ bouée).
   ===================================================================== */

/* Fond global bleu profond pour l'immersion */
body.theme-ocean { background: #02101f; }

/* ---- Fenêtre du monde : dégradé d'eau + rayons de soleil + bulles ---- */
body.theme-ocean .world {
    background:
        radial-gradient(3px 3px at 22% 80%, rgba(255,255,255,.55), transparent),
        radial-gradient(2px 2px at 58% 65%, rgba(210,245,255,.5), transparent),
        radial-gradient(2.5px 2.5px at 78% 88%, rgba(255,255,255,.45), transparent),
        radial-gradient(2px 2px at 38% 50%, rgba(190,235,255,.4), transparent),
        radial-gradient(3px 3px at 88% 40%, rgba(255,255,255,.35), transparent),
        linear-gradient(115deg, rgba(120,210,255,.12) 0 8px, transparent 8px 70px),
        linear-gradient(var(--sky1), var(--sky2));
    background-size:
        260px 260px, 200px 200px, 320px 320px, 170px 170px, 290px 290px,
        100% 100%, 100% 100%;
    background-repeat: repeat;
}

/* Grand rayon de lumière oblique en haut à gauche (ondule doucement) */
body.theme-ocean .world::before {
    content: '';
    position: absolute;
    top: -40px; left: 10%;
    width: 120px; height: 130%;
    background: linear-gradient(180deg, rgba(180,235,255,.28), transparent 70%);
    transform: rotate(14deg);
    filter: blur(6px);
    z-index: 0; pointer-events: none;
    animation: ocnRay1 7s ease-in-out infinite;
}
/* Second rayon plus fin à droite (ondule en contretemps) */
body.theme-ocean .world::after {
    content: '';
    position: absolute;
    top: -40px; right: 22%;
    width: 70px; height: 130%;
    background: linear-gradient(180deg, rgba(150,225,255,.22), transparent 65%);
    transform: rotate(-10deg);
    filter: blur(5px);
    z-index: 0; pointer-events: none;
    animation: ocnRay2 9s ease-in-out infinite;
}

/* ---- MINI-MOUVEMENTS de l'univers OCÉAN ---- */
/* rayons de soleil qui balaient l'eau */
@keyframes ocnRay1 { 0%,100% { transform: translateX(-14px) rotate(15deg); opacity:.85; }
                     50%     { transform: translateX(14px)  rotate(11deg); opacity:1; } }
@keyframes ocnRay2 { 0%,100% { transform: translateX(12px)  rotate(-12deg); opacity:.8; }
                     50%     { transform: translateX(-12px) rotate(-7deg); opacity:1; } }
/* l'eau chatoie (caustiques) */
@keyframes ocnShimmer { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
body.theme-ocean .world { animation: ocnShimmer 5s ease-in-out infinite; }
/* méduses / bancs lumineux (nuages) qui flottent et palpitent */
@keyframes ocnJelly { 0%,100% { opacity:.85; } 50% { opacity:1; } }
body.theme-ocean .cloud { animation: lvDrift 10s ease-in-out infinite alternate, ocnJelly 4.5s ease-in-out infinite; }

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

/* ---- Sol = sable récifal ondulé + liseré turquoise ---- */
body.theme-ocean .ground {
    background:
        radial-gradient(circle, rgba(255,255,255,.10) 1.5px, transparent 2px) 8px 8px/26px 26px,
        repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 34px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px),
        linear-gradient(#4a6b58, #20342c);
    border-top: 5px solid #2fd4c4;
    box-shadow: inset 0 5px 0 rgba(47, 212, 196, .35);
}

/* ---- "Collines" → massifs coralliens arrondis ---- */
body.theme-ocean .hill {
    border-radius: 46% 54% 60% 40% / 60% 50% 50% 40% !important;
    border: 4px solid #0e4f47;
    background: radial-gradient(circle at 36% 28%, #57e0c8, #1f8a7a 55%, #0d4f47);
    box-shadow: 0 0 22px rgba(47, 212, 196, .45), inset -12px -12px 0 rgba(0, 0, 0, .18);
    opacity: .92;
}

/* ---- "Nuages" → bancs lumineux / méduses diffuses ---- */
body.theme-ocean .cloud {
    background: rgba(120, 210, 255, .45);
    box-shadow: 0 0 22px 6px rgba(120, 210, 255, .35);
}
body.theme-ocean .cloud::before,
body.theme-ocean .cloud::after {
    background: rgba(170, 230, 255, .55);
}

/* ---- Tuyaux → conduits sous-marins turquoise lumineux ---- */
body.theme-ocean .pipe,
body.theme-ocean .pipe .lip {
    background: linear-gradient(#23c3b6, #0c6f86);
    border-color: #063a44;
    box-shadow: inset -6px 0 0 #0a5566, 0 0 16px rgba(47, 212, 196, .5);
}

/* ---- Bloc "?" → coffre au trésor / bloc nacré ---- */
body.theme-ocean .block.q {
    background: #1f9bd4;
    box-shadow: inset -4px -4px 0 #0d5e8a;
    color: #ffe27a;
}
body.theme-ocean .block.brick {
    background: #284d4a;
    box-shadow: inset -4px -4px 0 #13302e;
}

/* ---- Drapeau de fin → bouée de surface lumineuse ---- */
body.theme-ocean .flag .cloth { background: #ffae3b; border-color: #a85a00; }
body.theme-ocean .flag .ball  { background: #2fd4c4; box-shadow: 0 0 12px rgba(47, 212, 196, .8); }
body.theme-ocean .flag .pole  { background: #8fb6c4; }