/* ============================================================= */
/* ====== SOLAR KNIGHT - WORLD SKY / HORIZON / GROUNDING ======= */
/* Low-poly N64 motif: hard shading steps, banded skies, chunky  */
/* silhouettes, distance fog. Loaded last so it can extend the   */
/* existing phase rules without removing any of them.            */
/* ============================================================= */

/* ---------- 1. BANDED SKIES (hard stepped gradients) ---------- */
/* --game-bg drives both #game-area and .battle-background.      */

.day {
    --game-bg: linear-gradient(180deg,
        #1F6FB2 0 13%, #3E8FCB 13% 27%, #63AEDD 27% 41%,
        #8CC8EB 41% 55%, #B4DDF3 55% 68%, #DCEFF6 68% 80%, #F6E2B8 80% 100%);
    --sky-fog: rgba(238, 245, 252, .46);
    --sky-fog-soft: rgba(238, 245, 252, .16);
    --sky-vig: rgba(20, 45, 80, .24);
    --range-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='200' viewBox='0 0 900 200' preserveAspectRatio='none'%3E%3Cpath fill='%237FA9CE' d='M0,200 L0,118 60,66 112,108 170,50 232,104 300,42 370,100 432,58 500,110 562,48 632,104 700,62 772,110 832,70 900,114 900,200Z'/%3E%3Cpath fill='%23567FAD' d='M0,200 L0,148 70,102 142,144 212,92 282,140 352,98 422,146 492,100 562,148 640,106 712,150 782,108 852,150 900,124 900,200Z'/%3E%3Cpath fill='%23325C87' d='M0,200 L0,176 82,148 162,180 250,146 340,182 430,150 520,184 610,148 700,182 790,154 872,184 900,168 900,200Z'/%3E%3C/svg%3E");
}

.night {
    --game-bg: linear-gradient(180deg,
        #04030C 0 13%, #0A0A22 13% 27%, #12143E 27% 41%,
        #1B1E58 41% 55%, #262A6B 55% 68%, #33357A 68% 80%, #474580 80% 100%);
    --sky-fog: rgba(120, 132, 196, .34);
    --sky-fog-soft: rgba(120, 132, 196, .12);
    --sky-vig: rgba(0, 0, 12, .50);
    --range-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='200' viewBox='0 0 900 200' preserveAspectRatio='none'%3E%3Cpath fill='%232E3169' d='M0,200 L0,118 60,66 112,108 170,50 232,104 300,42 370,100 432,58 500,110 562,48 632,104 700,62 772,110 832,70 900,114 900,200Z'/%3E%3Cpath fill='%231E2048' d='M0,200 L0,148 70,102 142,144 212,92 282,140 352,98 422,146 492,100 562,148 640,106 712,150 782,108 852,150 900,124 900,200Z'/%3E%3Cpath fill='%2312132C' d='M0,200 L0,176 82,148 162,180 250,146 340,182 430,150 520,184 610,148 700,182 790,154 872,184 900,168 900,200Z'/%3E%3C/svg%3E");
}

/* Madness: hues that do not belong together, jagged ridgeline. */
.madness {
    --sky-fog: rgba(255, 148, 74, .34);
    --sky-fog-soft: rgba(255, 148, 74, .12);
    --sky-vig: rgba(48, 0, 16, .30);
    --range-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='200' viewBox='0 0 900 200' preserveAspectRatio='none'%3E%3Cpath fill='%238A2E52' d='M0,200 L0,124 48,52 96,116 140,34 196,110 244,26 306,118 352,44 414,112 470,30 528,120 584,48 646,114 700,36 762,118 818,56 872,112 900,74 900,200Z'/%3E%3Cpath fill='%236B1B33' d='M0,200 L0,152 62,88 118,150 176,84 240,146 296,78 358,152 420,90 484,148 546,82 606,152 668,92 732,150 794,86 856,150 900,116 900,200Z'/%3E%3Cpath fill='%23430E1D' d='M0,200 L0,180 76,140 150,184 232,138 316,186 400,142 484,188 566,140 650,186 734,146 818,188 900,158 900,200Z'/%3E%3C/svg%3E");
}

.madness-day-1 {
    --game-bg: linear-gradient(180deg,
        #5A1B3A 0 13%, #8E2A2F 13% 27%, #C1471C 27% 41%,
        #E07816 41% 55%, #E0A81C 55% 68%, #96A81E 68% 80%, #C2318C 80% 100%);
}
.madness-day-2 {
    --game-bg: linear-gradient(180deg,
        #3D0B2A 0 13%, #7A1526 13% 27%, #B22B12 27% 41%,
        #D9560F 41% 55%, #E08A14 55% 68%, #7F9E12 68% 80%, #B8207F 80% 100%);
}
.madness-day-3 {
    --game-bg: linear-gradient(180deg,
        #160414 0 13%, #3E0A1E 13% 27%, #6E1114 27% 41%,
        #9C1E0B 41% 55%, #B84A0C 55% 68%, #4E6A10 68% 80%, #7B0F5C 80% 100%);
}

/* .madness-day-N pins a flat background with !important; the id
   selector below out-ranks it so the banded sky survives. */
.madness #game-area,
#game-area.madness { background: var(--game-bg) !important; }

/* ---------- 2. CELESTIAL BODIES (chunky, stepped glow) ---------- */
/* Placed left-of-centre: #luck-moon lives at top/right 240px and
   is never covered or reached by these (pointer-events: none).    */

.day #game-area::before,
#game-area.day::before {
    top: 48px; left: 62px; right: auto;
    width: 152px; height: 152px;
    border-radius: 0;
    clip-path: polygon(50% 0%, 62.2% 20.4%, 85.4% 14.6%, 79.6% 37.8%, 100% 50%,
        79.6% 62.2%, 85.4% 85.4%, 62.2% 79.6%, 50% 100%, 37.8% 79.6%,
        14.6% 85.4%, 20.4% 62.2%, 0% 50%, 20.4% 37.8%, 14.6% 14.6%, 37.8% 20.4%);
    background: radial-gradient(circle at 50% 50%,
        #FFFFFF 0 12%, #FFF3B0 12% 17%, #FFD34A 17% 22%,
        rgba(255, 198, 60, .34) 22% 29%, rgba(255, 178, 40, .18) 29% 38%,
        rgba(255, 160, 30, .09) 38% 50%);
    pointer-events: none;
}

.night #game-area::before,
#game-area.night::before {
    content: '';
    position: absolute;
    top: 50px; left: 70px; right: auto;
    width: 152px; height: 152px;
    z-index: 1;
    pointer-events: none;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: radial-gradient(circle at 42% 38%,
        #FFFFFF 0 17%, #E6EAFF 17% 23%, #C4CCF0 23% 28%, #9AA4D6 28% 33%,
        rgba(190, 205, 255, .22) 33% 42%, rgba(160, 180, 255, .12) 42% 52%,
        rgba(130, 155, 240, .06) 52% 64%);
}

.madness #game-area::before,
#game-area.madness::before {
    content: '';
    position: absolute;
    top: 42px; left: 58px; right: auto;
    width: 176px; height: 176px;
    z-index: 1;
    pointer-events: none;
    clip-path: polygon(50% 0%, 58% 24%, 84% 8%, 74% 34%, 100% 42%, 76% 54%,
        94% 78%, 64% 72%, 58% 100%, 44% 74%, 18% 90%, 26% 62%, 0% 52%, 28% 40%, 12% 14%, 42% 26%);
    background: radial-gradient(circle at 46% 46%,
        #FFF0C0 0 11%, #FF8A2B 11% 16%, #C62828 16% 21%, #6A0F3C 21% 26%,
        rgba(255, 110, 40, .26) 26% 34%, rgba(190, 20, 90, .14) 34% 44%,
        rgba(120, 10, 70, .06) 44% 55%);
    animation: madness-sun-wrong 7s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes madness-sun-wrong {
    0%   { transform: rotate(-4deg) scale(1); }
    100% { transform: rotate(5deg) scale(1.06); }
}

/* ---------- 3. LOW-POLY HORIZON BANDS + DISTANCE FOG ---------- */
/* #container is the world viewport (top 80px, 400px tall).
   ::before = three receding ridgelines behind the planet rim.
   ::after  = fog band pinned to the rim line + soft world vignette. */

#container::before {
    content: '';
    position: absolute;
    left: 0; top: 96px;
    width: 100%; height: 120px;
    z-index: 2;
    pointer-events: none;
    background: var(--range-svg) center bottom / 100% 100% no-repeat;
    opacity: .9;
}

#container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            transparent 0 36%,
            var(--sky-fog-soft) 45%,
            var(--sky-fog) 52%,
            var(--sky-fog) 55%,
            var(--sky-fog-soft) 62%,
            transparent 72%),
        radial-gradient(122% 86% at 50% 40%, transparent 54%, var(--sky-vig) 100%);
}

/* ---------- 4. DECORATIONS: hard two-tone facet split ---------- */
/* One id-scoped rule out-ranks every existing per-phase colour
   rule, so each silhouette gets a lit side and a shade side.     */

#events-wrapper .decoration[data-type]::before {
    background: linear-gradient(104deg,
        var(--dl, #9BB0C4) 0 47%, var(--ds, #3E4C5C) 47% 100%);
}
/* House keeps a doorway notch in the middle of the two-tone wall. */
#events-wrapper .decoration[data-type="house"]::before {
    background: linear-gradient(90deg,
        var(--dl) 0 38%, rgba(18, 9, 4, .72) 38% 55%, var(--ds) 55% 100%);
}

/* -- day palette (sunlit, saturated) -- */
.day .decoration[data-type="pine"]     { --dl: #4FB06A; --ds: #14532B; }
.day .decoration[data-type="palm"]     { --dl: #57C77A; --ds: #1B6236; }
.day .decoration[data-type="boulder"]  { --dl: #C9C4B4; --ds: #6E6A5E; }
.day .decoration[data-type="spire"]    { --dl: #E8E4D6; --ds: #8A8676; }
.day .decoration[data-type="mushroom"] { --dl: #FF8A5B; --ds: #A63416; }
.day .decoration[data-type="crystal"]  { --dl: #9FE3F5; --ds: #2F6FA8; }
.day .decoration[data-type="cactus"]   { --dl: #59A94B; --ds: #1F5E22; }
.day .decoration[data-type="flower"]   { --dl: #FF7BA6; --ds: #A62C5C; }
.day .decoration[data-type="temple"]   { --dl: #F2E3C2; --ds: #A08356; }
.day .decoration[data-type="house"]    { --dl: #D9B47A; --ds: #7A5230; }
.day .decoration[data-type="pond"]     { --dl: #66C6E8; --ds: #1E6C99; }
.day .decoration[data-type="oasis"]    { --dl: #66C6E8; --ds: #1E6C99; }

/* -- night palette (moonlit, cool, desaturated) -- */
.night .decoration[data-type="pine"]    { --dl: #2C6B4A; --ds: #06210F; }
.night .decoration[data-type="boulder"] { --dl: #7C8397; --ds: #333A4C; }
.night .decoration[data-type="spire"]   { --dl: #98A0B8; --ds: #414962; }
.night .decoration[data-type="crystal"] { --dl: #C0A8F0; --ds: #4B2E8C; }
.night .decoration[data-type="temple"]  { --dl: #A99878; --ds: #4B4030; }
.night .decoration[data-type="volcano"] { --dl: #4A4550; --ds: #17131C; }
.night .decoration[data-type="campfire"]{ --dl: #8B5A34; --ds: #3A2113; }
.night .decoration[data-type="cave"]    { --dl: #6B5240; --ds: #241A12; }
.night .decoration[data-type="stones"]  { --dl: #8A90A4; --ds: #3A3F52; }
.night .decoration[data-type="ruins"]   { --dl: #8A90A4; --ds: #3A3F52; }

/* -- madness palette (corrupted; only 5 types ever spawn here) -- */
.madness .decoration[data-type]          { --dl: #E07A3E; --ds: #4A1409; }
.madness .decoration[data-type="crystal"]{ --dl: #FF6FA8; --ds: #6B0F3C; }
.madness .decoration[data-type="volcano"]{ --dl: #FF9A3C; --ds: #4A1206; }
.madness .decoration[data-type="cave"]   { --dl: #B5482A; --ds: #35090A; }
.madness .decoration[data-type="ruins"]  { --dl: #E0713C; --ds: #55160E; }
.madness .decoration[data-type="stones"] { --dl: #D96A3A; --ds: #4B1409; }

/* ---------- 5. DECORATION TYPES THAT HAD NO SHAPE AT ALL ---------- */
/* cactus / flower / house / pond / ruins / oasis were spawned by
   generateDecorations() but rendered as empty 56px boxes.        */

.decoration[data-type="cactus"] { width: 46px; height: 66px; }
.decoration[data-type="cactus"]::before {
    content: ''; position: absolute; inset: 0;
    clip-path: polygon(41% 100%, 41% 30%, 22% 30%, 22% 52%, 12% 52%, 12% 22%, 41% 22%,
        41% 0%, 59% 0%, 59% 38%, 86% 38%, 86% 66%, 76% 66%, 76% 48%, 59% 48%, 59% 100%);
}

.decoration[data-type="flower"] { width: 28px; height: 34px; }
.decoration[data-type="flower"]::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 56%;
    clip-path: polygon(50% 0%, 68% 18%, 100% 24%, 80% 50%, 88% 84%, 50% 68%,
        12% 84%, 20% 50%, 0% 24%, 32% 18%);
}
.decoration[data-type="flower"]::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 12%; height: 54%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #4E9A3D 0 50%, #245A1D 50% 100%);
}

.decoration[data-type="house"] { width: 62px; height: 58px; }
.decoration[data-type="house"]::before {
    content: ''; position: absolute; bottom: 0; left: 8%; width: 84%; height: 56%;
}
.decoration[data-type="house"]::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 48%;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(104deg, #C0562F 0 47%, #6E2A14 47% 100%);
}

.decoration[data-type="pond"] { width: 76px; height: 34px; }
.decoration[data-type="pond"]::before {
    content: ''; position: absolute; inset: 0;
    clip-path: polygon(18% 0%, 72% 4%, 100% 40%, 84% 92%, 34% 100%, 4% 62%);
}
.decoration[data-type="pond"]::after {
    content: ''; position: absolute; left: 20%; top: 22%; width: 34%; height: 26%;
    background: rgba(255, 255, 255, .34);
    clip-path: polygon(0% 40%, 60% 0%, 100% 46%, 44% 100%);
}

.decoration[data-type="ruins"] { width: 84px; height: 64px; }
.decoration[data-type="ruins"]::before {
    content: ''; position: absolute; inset: 0;
    clip-path: polygon(4% 100%, 4% 34%, 16% 26%, 18% 100%, 30% 100%, 30% 52%, 42% 46%,
        44% 100%, 56% 100%, 54% 14%, 68% 6%, 70% 100%, 82% 100%, 84% 60%, 96% 54%, 98% 100%);
}
.decoration[data-type="ruins"]::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 18%;
    background: rgba(0, 0, 0, .28);
    clip-path: polygon(0% 44%, 100% 22%, 100% 100%, 0% 100%);
}

.decoration[data-type="oasis"] { width: 86px; height: 72px; }
.decoration[data-type="oasis"]::before {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 34%;
    clip-path: polygon(14% 8%, 74% 0%, 100% 42%, 82% 96%, 28% 100%, 0% 56%);
}
.decoration[data-type="oasis"]::after {
    content: ''; position: absolute; top: 0; left: 42%; width: 54%; height: 72%;
    clip-path: polygon(50% 0%, 88% 14%, 100% 40%, 72% 30%, 60% 34%, 58% 100%,
        46% 100%, 44% 32%, 30% 28%, 0% 42%, 12% 14%);
    background: linear-gradient(104deg, #3E8E52 0 47%, #17512A 47% 100%);
}
.night .decoration[data-type="oasis"]::after,
.night .decoration[data-type="flower"]::after {
    background: linear-gradient(104deg, #24603A 0 47%, #0A2A17 47% 100%);
}

/* ---------- 6. BATTLE STAGE GROUNDING ---------- */
/* ::after (z 3) = stepped ground plane painted over .battle-floor,
   still beneath the enemy (z 4) and player (z 6).
   ::before (z 7) = vignette over the whole fight.                */

.battle-stage::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 46%;
    z-index: 3;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg,
            rgba(0, 0, 0, .10) 0 46px, rgba(255, 255, 255, .04) 46px 92px),
        linear-gradient(180deg,
            var(--gp-1, rgba(0, 0, 0, .34)) 0 12%,
            var(--gp-2, rgba(0, 0, 0, .20)) 12% 30%,
            var(--gp-3, rgba(0, 0, 0, .09)) 30% 58%,
            var(--gp-4, rgba(0, 0, 0, .26)) 58% 100%);
    border-top: 4px solid var(--gp-line, rgba(0, 0, 0, .35));
}
.day .battle-stage::after {
    --gp-1: rgba(255, 236, 190, .30); --gp-2: rgba(214, 178, 116, .26);
    --gp-3: rgba(120, 88, 44, .16);   --gp-4: rgba(48, 30, 12, .34);
    --gp-line: rgba(255, 243, 205, .45);
}
.night .battle-stage::after {
    --gp-1: rgba(120, 132, 200, .26); --gp-2: rgba(58, 64, 120, .28);
    --gp-3: rgba(16, 18, 44, .22);    --gp-4: rgba(4, 4, 18, .46);
    --gp-line: rgba(150, 165, 230, .35);
}
.madness .battle-stage::after {
    --gp-1: rgba(255, 168, 80, .28);  --gp-2: rgba(190, 60, 28, .30);
    --gp-3: rgba(96, 16, 30, .24);    --gp-4: rgba(30, 2, 12, .48);
    --gp-line: rgba(255, 140, 60, .40);
}

.battle-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background: radial-gradient(118% 92% at 50% 44%,
        transparent 44%, var(--vig-mid, rgba(0, 0, 0, .16)) 76%, var(--vig-edge, rgba(0, 0, 0, .42)) 100%);
}
.day .battle-stage::before  { --vig-mid: rgba(24, 46, 74, .14); --vig-edge: rgba(12, 28, 52, .40); }
.night .battle-stage::before{ --vig-mid: rgba(0, 0, 16, .26);   --vig-edge: rgba(0, 0, 8, .62); }
.madness .battle-stage::before { --vig-mid: rgba(60, 0, 20, .22); --vig-edge: rgba(28, 0, 10, .58); }

/* ---------- 7. BOSS PRESENCE (CSS only, one-shot) ---------- */
/* .boss-battle is added to .battle-enemy in game-combat.js.
   Both treatments live on pseudo-elements nothing else touches,
   so the existing hit/attack/shake animations stay intact.      */

.battle-enemy.boss-battle::before {
    display: block;
    content: '';
    position: absolute;
    left: 50%; bottom: -14%;
    width: 190%; height: 190%;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 62%,
        rgba(255, 90, 40, .26) 0 22%, rgba(255, 60, 30, .16) 22% 34%,
        rgba(180, 20, 40, .09) 34% 46%, transparent 46%);
    animation: boss-aura-in .9s cubic-bezier(.2, .9, .3, 1) both;
    will-change: transform, opacity;
}
@keyframes boss-aura-in {
    0%   { opacity: 0; transform: translateX(-50%) scale(.35); }
    60%  { opacity: 1; transform: translateX(-50%) scale(1.12); }
    100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.battle-stage:has(.battle-enemy.boss-battle)::before {
    background:
        radial-gradient(118% 92% at 50% 44%,
            transparent 40%, rgba(120, 8, 12, .30) 74%, rgba(70, 0, 6, .66) 100%),
        linear-gradient(180deg, rgba(255, 70, 40, .22) 0 3%, transparent 12%),
        linear-gradient(0deg, rgba(255, 70, 40, .22) 0 3%, transparent 12%),
        linear-gradient(90deg, rgba(255, 70, 40, .20) 0 2%, transparent 10%),
        linear-gradient(270deg, rgba(255, 70, 40, .20) 0 2%, transparent 10%);
    animation: boss-edge-in 1.3s ease-out both;
    will-change: transform, opacity;
}
/* Flashes twice on entrance, then settles to a faint boss-red rim so
   the phase palette still owns the fight. */
@keyframes boss-edge-in {
    0%   { opacity: 0; transform: scale(1.06); }
    18%  { opacity: 1; }
    46%  { opacity: .34; }
    64%  { opacity: .82; }
    100% { opacity: .34; transform: scale(1); }
}

/* ---------- 8. MOBILE / iOS RESTRAINT ---------- */
/* Reduce fill-rate cost: drop the world vignette + fog to a thin
   band, freeze the madness sun, skip the boss edge animation.    */

.ios #container::after,
.ios .battle-stage::before {
    background-image: none;
}
.ios #container::after {
    background: linear-gradient(180deg, transparent 0 44%,
        var(--sky-fog-soft) 52%, transparent 64%);
}
#game-area.ios.madness::before,
.ios.madness #game-area::before,
.ios .battle-stage:has(.battle-enemy.boss-battle)::before,
.ios .battle-enemy.boss-battle::before {
    animation: none !important;
}
.ios .battle-stage::after {
    background-image: linear-gradient(180deg,
        var(--gp-1) 0 12%, var(--gp-2) 12% 30%, var(--gp-3) 30% 58%, var(--gp-4) 58% 100%);
}

@media (max-width: 768px) {
    #container::before { opacity: .78; }
    .madness #game-area::before,
    #game-area.madness::before { animation: none; }
}