@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,700;1,9..144,300&display=swap');

/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── Tokens ─────────────────────────────────────── */
:root {
    --text: #fff;
    --text-dim: rgba(255,255,255,0.62);
    --glass: rgba(10,10,20,0.28);
    --glass-border: rgba(255,255,255,0.14);
    --accent: #ffc850;
    --font-display: 'Fraunces', serif;
    --font-body: 'DM Sans', sans-serif;
    --ease: cubic-bezier(.22,.68,0,1.2);
}

/* ─── Body ───────────────────────────────────────── */
body {
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--text);
    overflow-x: hidden;
}

/* Sky background replaced by landscape-bg */

/* ─── Top Bar ────────────────────────────────────── */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; gap: 1.2rem;
    padding: 0.9rem 2.2rem;
    background: rgba(0,0,0,0.15);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
}

.brand {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent);
    flex-shrink: 0;
}

.search-wrap {
    flex: 1; max-width: 320px;
    display: flex; align-items: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 0.38rem 0.55rem 0.38rem 1rem;
    transition: background 0.2s;
}
.search-wrap:focus-within { background: rgba(255,255,255,0.22); }

#city {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text); font-family: var(--font-body); font-size: 0.9rem;
}
#city::placeholder { color: rgba(255,255,255,0.5); }
body[data-weather='snow'] #city { color: #0b1e33; }
body[data-weather='snow'] #city::placeholder { color: rgba(10,30,60,0.45); }

#searchBtn {
    background: var(--accent); border: none; cursor: pointer;
    color: #1a0a00; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s var(--ease), opacity 0.15s;
}
#searchBtn:hover { transform: scale(1.1); opacity: 0.9; }

.unit-toggle {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 500; flex-shrink: 0;
}
.unit { cursor: pointer; opacity: 0.45; transition: opacity 0.2s; }
.unit.active { opacity: 1; font-weight: 600; }
.sep { opacity: 0.3; }

/* ─── Stage ──────────────────────────────────────── */
.stage {
    position: relative; z-index: 10;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 7rem 3rem 10rem;
    gap: 2rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.stage.visible { opacity: 1; }

/* Left column */
.stage-left { display: flex; flex-direction: column; gap: 0.55rem; }

.location-row {
    font-size: 0.82rem; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--text-dim);
    display: flex; align-items: center; gap: 0.5rem;
}
.location-row svg { opacity: 0.6; }

.datetime {
    font-size: 1rem; font-weight: 400; color: var(--text-dim);
    margin-bottom: 0.3rem;
}

.temp-hero {
    font-family: var(--font-display);
    font-size: clamp(5rem, 14vw, 9rem);
    font-weight: 200; line-height: 1;
    display: flex; align-items: flex-start; gap: 0.15em;
    animation: slideUp 0.6s var(--ease) both;
}
.temp-hero .val { display: block; }
.temp-hero .deg { font-size: 0.4em; margin-top: 0.25em; opacity: 0.75; font-weight: 300; }

.weather-icon-main { width: 72px; height: 72px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }

.feels-desc {
    font-size: 1rem; color: var(--text-dim);
    display: flex; flex-direction: column; gap: 0.2rem;
}
.feels-desc .condition-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.12);
    border: 1px solid var(--glass-border);
    border-radius: 999px; padding: 0.3rem 0.9rem;
    font-size: 0.85rem; width: fit-content; margin-top: 0.3rem;
}

.sun-row {
    display: flex; gap: 1.5rem; margin-top: 0.8rem;
    font-size: 0.8rem; color: var(--text-dim);
}
.sun-item { display: flex; align-items: center; gap: 0.4rem; }
.sun-icon { font-size: 1rem; }

/* Right column */
.stage-right { display: flex; flex-direction: column; gap: 1rem; }

.details-panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(18px);
    padding: 1.3rem 1.5rem;
}
.details-panel h4 {
    font-size: 0.7rem; letter-spacing: 0.15em; font-weight: 600;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.9rem;
}
.details-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1.5rem;
}
.detail-item { display: flex; flex-direction: column; gap: 0.1rem; }
.detail-label { font-size: 0.75rem; color: var(--text-dim); }
.detail-val { font-size: 1.05rem; font-weight: 600; }

.hourly-panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    backdrop-filter: blur(18px);
    padding: 1.3rem 1.5rem;
    overflow: hidden;
}
.hourly-panel h4 {
    font-size: 0.7rem; letter-spacing: 0.15em; font-weight: 600;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem;
}
.hourly-row {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.3rem;
}
.hour-block {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    font-size: 0.75rem;
}
.hour-block .hour-time { color: var(--text-dim); font-size: 0.7rem; }
.hour-block img { width: 28px; height: 28px; }
.hour-block .hour-temp { font-weight: 600; font-size: 0.82rem; }

/* ─── Forecast Strip ─────────────────────────────── */
.forecast-strip {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: rgba(5,10,20,0.6);
    backdrop-filter: blur(22px);
    border-top: 1px solid var(--glass-border);
    padding: 0.9rem 3rem;
    display: none;
    overflow-x: auto;
}
.forecast-strip.visible { display: flex; gap: 0; }
.forecast-strip::-webkit-scrollbar { display: none; }

.forecast-day {
    flex: 1; min-width: 100px;
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.5rem 0.3rem;
    border-right: 1px solid rgba(255,255,255,0.07);
    animation: fadeIn 0.4s ease both;
}
.forecast-day:last-child { border-right: none; }
.forecast-day .fc-day { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.forecast-day .fc-date { font-size: 0.65rem; color: var(--text-dim); }
.forecast-day img { width: 36px; height: 36px; }
.forecast-day .fc-temps {
    display: flex; gap: 0.5rem; font-size: 0.8rem;
}
.fc-max { font-weight: 600; }
.fc-min { color: var(--text-dim); }
.forecast-day .fc-desc { font-size: 0.65rem; color: var(--text-dim); text-align: center; }

/* ─── Landing ────────────────────────────────────── */
.landing {
    position: fixed; inset: 0; z-index: 20;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1rem;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.landing.hidden { opacity: 0; pointer-events: none; }
.landing-icon { animation: float 3s ease-in-out infinite; }
.landing-hint {
    font-size: 1rem; color: rgba(255,255,255,0.55); font-weight: 400;
    letter-spacing: 0.05em;
}

/* ─── Keyframes ──────────────────────────────────── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 820px) {
    .stage {
        grid-template-columns: 1fr;
        padding: 5.5rem 1.5rem 9rem;
        align-items: flex-start;
    }
    .topbar { padding: 0.8rem 1.2rem; }
    .forecast-strip { padding: 0.8rem 1rem; }
    .hourly-row { grid-template-columns: repeat(4, 1fr); }
    .forecast-day { min-width: 80px; }
}
/* ═══════════════════════════════════════════════════
   RAIN SCENE — cloud + rain + splash animation
   Visible only on rain / drizzle / thunderstorm
═══════════════════════════════════════════════════ */

/* Container: fixed, full viewport, pointer-events off so it
   never blocks clicks, sits between sky and content */
.rain-scene {
    position: fixed;
    inset: 0;
    z-index: 5;               /* above sky-bg (0), below topbar (100) */
    pointer-events: none;
    display: none;            /* hidden by default */
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 40px 60px;
    padding: 60px 40px 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Activate when body has a rain/drizzle/thunderstorm data-weather */
body[data-weather='rain']         .rain-scene,
body[data-weather='drizzle']      .rain-scene,
body[data-weather='thunderstorm'] .rain-scene {
    display: flex;
    opacity: 1;
}

/* ── Wrapper (one cloud unit) ── */
.wrapper {
    height: 200px;
    flex-shrink: 0;
}

/* ── Cloud ── */
.cloud {
    overflow: hidden;
    padding: 5px;
    height: 50px;
}
.cloud_left {
    position: relative;
    float: left;
    background-color: #1e2d3d;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.6),
                0 0 18px rgba(80,120,180,0.18);
}
.cloud_right {
    position: relative;
    float: left;
    background-color: #182530;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    top: 15px;
    left: -30px;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.6);
}

/* ── Thunderstorm: darker, purple-tinted clouds ── */
body[data-weather='thunderstorm'] .cloud_left  { background-color: #160f22; }
body[data-weather='thunderstorm'] .cloud_right { background-color: #110c1c; }
body[data-weather='thunderstorm'] .cloud_left  {
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.8),
                0 0 22px rgba(120,60,220,0.25);
}

/* ── Raindrops ── */
.rain {
    width: 180px;
    height: 140px;
}
.drop {
    position: relative;
    float: left;
    width: 2px;
    margin: 10px;
    left: 20px;
    background: linear-gradient(to bottom, rgba(130,175,210,0.9), rgba(100,145,185,0.5));
    border-radius: 2px;
    box-shadow: 1px 0.5px 1px 0.5px rgba(0,0,0,0.5);
    animation: rain_401 0.8s infinite ease-out;
}
.drop:nth-child(1) { height: 15px; top:  5px; animation-delay: -1.0s; }
.drop:nth-child(2) { height: 20px;            animation-delay: -1.4s; }
.drop:nth-child(3) { height: 15px; top:  5px; animation-delay: -1.6s; }
.drop:nth-child(4) { height: 10px; top: 10px; animation-delay: -1.2s; }
.drop:nth-child(5) { height:  5px; top: 15px; animation-delay: -1.6s; }

/* Heavier rain for thunderstorm */
body[data-weather='thunderstorm'] .drop {
    background: linear-gradient(to bottom, rgba(160,190,230,0.95), rgba(120,155,200,0.5));
    animation-duration: 0.55s;
}

@keyframes rain_401 {
    0%   { opacity: 1;   transform: translate(0, 0); }
    100% { opacity: 0.2; transform: translate(0, 100px); }
}

/* ── Splash hits ── */
.surface {
    position: relative;
    width: 180px;
    height: 140px;
    top: -140px;
}
.hit {
    position: absolute;
    width: 3px;
    height: 1px;
    margin: 10px;
    bottom: -5px;
    border: 1px solid rgba(100,150,200,0.7);
    border-radius: 50%;
    animation: hit_401 0.8s infinite ease;
}
.hit:nth-child(1) { left:  19px; animation-delay: -0.3s; }
.hit:nth-child(2) { left:  41px; animation-delay: -0.7s; }
.hit:nth-child(3) { left:  63px; animation-delay: -0.9s; }
.hit:nth-child(4) { left:  85px; animation-delay: -0.5s; }
.hit:nth-child(5) { left: 107px; animation-delay: -0.9s; }

body[data-weather='thunderstorm'] .hit {
    border-color: rgba(140,170,220,0.75);
    animation-duration: 0.55s;
}

@keyframes hit_401 {
    0%   { opacity: 0.75; transform: scale(1);   }
    100% { opacity: 0;    transform: scale(2.5); }
}

/* ── Lightning flash for thunderstorm ── */
body[data-weather='thunderstorm'] .sky-base::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(200,180,255,0.18);
    animation: lightning 4s infinite;
    pointer-events: none;
}
@keyframes lightning {
    0%, 89%, 91%, 93%, 100% { opacity: 0; }
    90%, 92%                { opacity: 1; }
}

/* ═══════════════════════════════════════════════════
   CLOUD SCENE — fluffy drifting clouds for cloudy weather
═══════════════════════════════════════════════════ */

.cloud-scene {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    display: none;
    opacity: 0;
    transition: opacity 1s ease;
}

body[data-weather='clouds'] .cloud-scene {
    display: block;
    opacity: 1;
}

/* Base fluffy cloud shape */
.fluffy-cloud {
    position: absolute;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25));
}

/* Cloud body — the wide flat base rectangle */
.fc-body {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 46px;
    background: rgba(170, 185, 205, 0.72);
    border-radius: 30px;
}

/* Bumps — the puffy top circles */
.fc-bump {
    position: absolute;
    background: rgba(185, 198, 215, 0.75);
    border-radius: 50%;
}
.fc-bump1 { width: 64px; height: 64px; bottom: 28px; left: 18px; background: rgba(190, 203, 220, 0.78); }
.fc-bump2 { width: 80px; height: 80px; bottom: 30px; left: 52px; background: rgba(195, 207, 224, 0.80); }
.fc-bump3 { width: 56px; height: 56px; bottom: 25px; left: 112px; background: rgba(185, 198, 215, 0.73); }

/* ── Individual cloud sizes, positions, speeds ── */

/* Large slow cloud — top left drifting right */
.fc-1 {
    width: 200px; height: 100px;
    top: 8%; left: -220px;
    transform: scale(1.3);
    animation: drift 38s linear infinite;
    animation-delay: 0s;
    opacity: 0.85;
}

/* Medium cloud — middle height */
.fc-2 {
    width: 180px; height: 90px;
    top: 18%; left: -200px;
    transform: scale(1.0);
    animation: drift 28s linear infinite;
    animation-delay: -10s;
    opacity: 0.75;
}

/* Small fast cloud */
.fc-3 {
    width: 160px; height: 80px;
    top: 6%; left: -180px;
    transform: scale(0.75);
    animation: drift 22s linear infinite;
    animation-delay: -6s;
    opacity: 0.65;
}

/* Large cloud — lower position */
.fc-4 {
    width: 200px; height: 100px;
    top: 28%; left: -220px;
    transform: scale(1.15);
    animation: drift 34s linear infinite;
    animation-delay: -18s;
    opacity: 0.80;
}

/* Tiny wisp */
.fc-5 {
    width: 140px; height: 70px;
    top: 14%; left: -160px;
    transform: scale(0.6);
    animation: drift 19s linear infinite;
    animation-delay: -3s;
    opacity: 0.55;
}

/* Extra cloud staggered far behind */
.fc-6 {
    width: 200px; height: 100px;
    top: 22%; left: -220px;
    transform: scale(1.1);
    animation: drift 42s linear infinite;
    animation-delay: -26s;
    opacity: 0.70;
}

/* Clouds slightly darker / more opaque for overcast */
body[data-weather='clouds'] .fluffy-cloud .fc-body,
body[data-weather='clouds'] .fluffy-cloud .fc-bump {
    background: rgba(155, 170, 190, 0.72);
}

@keyframes drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 260px)); }
}

/* Make scale + drift work together via wrapper trick */
.fc-1 { animation: drift-1 38s linear infinite 0s; }
.fc-2 { animation: drift-2 28s linear infinite -10s; }
.fc-3 { animation: drift-3 22s linear infinite -6s; }
.fc-4 { animation: drift-4 34s linear infinite -18s; }
.fc-5 { animation: drift-5 19s linear infinite -3s; }
.fc-6 { animation: drift-6 42s linear infinite -26s; }

@keyframes drift-1 {
    from { left: -260px; }
    to   { left: calc(100vw + 20px); }
}
@keyframes drift-2 {
    from { left: -240px; }
    to   { left: calc(100vw + 20px); }
}
@keyframes drift-3 {
    from { left: -200px; }
    to   { left: calc(100vw + 20px); }
}
@keyframes drift-4 {
    from { left: -260px; }
    to   { left: calc(100vw + 20px); }
}
@keyframes drift-5 {
    from { left: -180px; }
    to   { left: calc(100vw + 20px); }
}
@keyframes drift-6 {
    from { left: -260px; }
    to   { left: calc(100vw + 20px); }
}

/* ═══════════════════════════════════════════════════
   LANDSCAPE BACKGROUND — illustrated scene (day + night)
   Replaces old flat CSS gradient sky
═══════════════════════════════════════════════════ */

.landscape-bg {
    position: fixed; inset: 0; z-index: 0;
    overflow: hidden;
    transition: background 1.4s ease;
}

.landscape-bg * { position: absolute; transition: all 1.2s ease; }

/* ── Sky gradient ── */
.ls-sky {
    inset: 0;
    /* Default: warm sunset */
    background: linear-gradient(0deg, rgba(175,210,230,1) 0%, rgba(65,131,170,1) 55%, rgba(240,140,80,1) 100%);
}

/* ── Sun (day) ── */
.ls-sun {
    width: 70px; height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe87a 0%, #ffcc00 60%, rgba(255,200,0,0) 100%);
    box-shadow: 0 0 40px 18px rgba(255,210,60,0.45), 0 0 80px 40px rgba(255,180,30,0.18);
    top: 14%; right: 18%;
    opacity: 1;
}

/* ── Moon (night) ── */
.ls-moon {
    display: flex; align-items: center; justify-content: center;
    width: 55px; height: 55px; border-radius: 50%;
    top: 12%; left: 22%;
    filter: drop-shadow(0 0 12px white);
    opacity: 0; /* hidden by default, shown at night */
}
.ls-shine-1 {
    width: 134%; height: 134%; border-radius: 50%;
    background: #b6ebe7; opacity: 0.3;
}
.ls-shine-2 {
    display: flex; align-items: center; justify-content: center;
    width: 118%; height: 118%; border-radius: 50%;
    background: #b6e8eb;
}
.ls-real-moon {
    width: 100%; height: 100%; border-radius: 50%;
    background: white; overflow: hidden;
}
.ls-moon-shape {
    width: 100%; height: 100%; border-radius: 50%;
    top: -25%; right: -25%;
    background: #b6e8eb;
}

/* ── Back hills ── */
.ls-hill { border-radius: 50%; }

.ls-hill-1 {
    right: -8%; bottom: 32%;
    width: 38%; height: 10%;
    background: #4bcacc;
}
.ls-hill-2 {
    right: -12%; bottom: 22%;
    width: 42%; height: 18%;
    background: #3f85a8;
}

/* ── Ocean ── */
.ls-ocean {
    bottom: 0; width: 100%; height: 28%;
    overflow: hidden;
    background: linear-gradient(0deg, rgba(140,232,225,1) 0%, rgba(141,233,221,1) 100%);
}

.ls-reflection {
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
}
.ls-reflection:nth-child(1) { width: 9%; height: 8px; clip-path: polygon(0% 0%, 100% 0%, 50% 30%); top: 8%; left: 38%; }
.ls-reflection:nth-child(2) { width: 16%; height: 12px; clip-path: polygon(0% 0%, 100% 0%, 60% 30%, 40% 30%); top: 28%; left: 42%; }
.ls-reflection:nth-child(3) { width: 12%; height: 3px; top: 55%; right: 20%; border-radius: 999px; }

.ls-shadow-hill {
    border-radius: 50%;
    opacity: 0.9;
}
.ls-sh-1 { right: -8%; top: -25%; width: 38%; height: 55%; background: #88d8d7; }
.ls-sh-2 { right: -12%; top: -65%; width: 42%; height: 80%; background: #73c8cf; }

/* ── Front hills ── */
.ls-hill-3 {
    left: -30%; bottom: -8%;
    width: 80%; height: 38%;
    background: #47567f; z-index: 3;
}
.ls-hill-4 {
    right: -30%; bottom: -10%;
    width: 80%; height: 42%;
    background: #4a4973; z-index: 3;
}

/* ── Trees ── */
.ls-tree { z-index: 4; }
.ls-tree svg { width: 100%; height: 100%; }

.ls-tree-1 { bottom: 20%; left: 2%; width: 52px; height: 72px; }
.ls-tree-1 svg path { fill: #47567f; }

.ls-tree-2 { bottom: 13%; left: 24%; width: 48px; height: 66px; }
.ls-tree-2 svg path { fill: #47567f; }

.ls-tree-3 { bottom: 11%; right: 1%; width: 62px; height: 78px; }
.ls-tree-3 svg path { fill: #4a4973; }

/* ── Bottom fade ── */
.ls-filter {
    bottom: 0; left: 0; right: 0; height: 35%;
    background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 100%);
    z-index: 5;
}

/* ════════════════════════════════════════════════════
   WEATHER THEMES — day variants
════════════════════════════════════════════════════ */

/* Clear / sunny day */
body[data-weather='clear'] .ls-sky {
    background: linear-gradient(0deg, #aee8f8 0%, #4db8e8 45%, #1a8fd1 100%);
}
body[data-weather='clear'] .ls-ocean {
    background: linear-gradient(0deg, #74d8f0 0%, #5cc8e8 100%);
}

/* Cloudy */
body[data-weather='clouds'] .ls-sky {
    background: linear-gradient(0deg, #c8d8e0 0%, #8aa8bc 45%, #6888a0 100%);
}
body[data-weather='clouds'] .ls-sun {
    opacity: 0.35;
    box-shadow: 0 0 20px 8px rgba(255,210,60,0.2);
}
body[data-weather='clouds'] .ls-ocean {
    background: linear-gradient(0deg, #a0c0cc 0%, #88aab8 100%);
}
body[data-weather='clouds'] .ls-hill-1 { background: #6898aa; }
body[data-weather='clouds'] .ls-hill-2 { background: #4a6880; }
body[data-weather='clouds'] .ls-hill-3 { background: #3a4860; }
body[data-weather='clouds'] .ls-hill-4 { background: #363558; }
body[data-weather='clouds'] .ls-tree-1 svg path,
body[data-weather='clouds'] .ls-tree-2 svg path { fill: #3a4860; }
body[data-weather='clouds'] .ls-tree-3 svg path { fill: #363558; }

/* Rain / drizzle */
body[data-weather='rain'] .ls-sky,
body[data-weather='drizzle'] .ls-sky {
    background: linear-gradient(0deg, #3a5068 0%, #243a52 50%, #182838 100%);
}
body[data-weather='rain'] .ls-sun,
body[data-weather='drizzle'] .ls-sun { opacity: 0; }
body[data-weather='rain'] .ls-ocean,
body[data-weather='drizzle'] .ls-ocean {
    background: linear-gradient(0deg, #2a4058 0%, #223048 100%);
}
body[data-weather='rain'] .ls-hill-1,
body[data-weather='drizzle'] .ls-hill-1 { background: #2a4a60; }
body[data-weather='rain'] .ls-hill-2,
body[data-weather='drizzle'] .ls-hill-2 { background: #1e3448; }
body[data-weather='rain'] .ls-hill-3,
body[data-weather='drizzle'] .ls-hill-3 { background: #1e2e44; }
body[data-weather='rain'] .ls-hill-4,
body[data-weather='drizzle'] .ls-hill-4 { background: #1c2840; }
body[data-weather='rain'] .ls-moon,
body[data-weather='drizzle'] .ls-moon { opacity: 0.6; }

/* Thunderstorm */
body[data-weather='thunderstorm'] .ls-sky {
    background: linear-gradient(0deg, #14101e 0%, #0e0c1a 50%, #0a0812 100%);
}
body[data-weather='thunderstorm'] .ls-sun { opacity: 0; }
body[data-weather='thunderstorm'] .ls-moon { opacity: 0.5; top: 10%; left: 18%; }
body[data-weather='thunderstorm'] .ls-ocean {
    background: linear-gradient(0deg, #161020 0%, #100c18 100%);
}
body[data-weather='thunderstorm'] .ls-hill-3 { background: #120e1e; }
body[data-weather='thunderstorm'] .ls-hill-4 { background: #100c1a; }

/* Snow */
body[data-weather='snow'] .ls-sky {
    background: linear-gradient(0deg, #ddeeff 0%, #b8d8f0 45%, #90b8e0 100%);
}
body[data-weather='snow'] .ls-ocean {
    background: linear-gradient(0deg, #c0ddf0 0%, #a8ccec 100%);
}
body[data-weather='snow'] .ls-hill-3 { background: #8899bb; }
body[data-weather='snow'] .ls-hill-4 { background: #7888aa; }
body[data-weather='snow'] .ls-tree-1 svg path,
body[data-weather='snow'] .ls-tree-2 svg path { fill: #6677aa; }
body[data-weather='snow'] .ls-tree-3 svg path { fill: #5566aa; }

/* Mist / Fog / Haze */
body[data-weather='mist'] .ls-sky,
body[data-weather='fog'] .ls-sky,
body[data-weather='haze'] .ls-sky {
    background: linear-gradient(0deg, #b8c8cc 0%, #8898a0 50%, #607080 100%);
}
body[data-weather='mist'] .ls-sun,
body[data-weather='fog'] .ls-sun,
body[data-weather='haze'] .ls-sun { opacity: 0.4; box-shadow: 0 0 30px 20px rgba(255,220,150,0.25); }

/* ════════════════════════════════════════════════════
   NIGHT MODE — toggled via body.is-night (set by JS)
   Night = moon visible, sun hidden, darker palette
════════════════════════════════════════════════════ */
body.is-night .ls-sun { opacity: 0 !important; }
body.is-night .ls-moon { opacity: 1 !important; }

body.is-night .ls-sky {
    background: linear-gradient(0deg, rgba(80,120,160,1) 0%, rgba(30,50,90,1) 50%, rgba(10,18,40,1) 100%);
}
body.is-night .ls-ocean {
    background: linear-gradient(0deg, rgba(40,70,110,1) 0%, rgba(28,52,90,1) 100%);
}
body.is-night .ls-hill-1 { background: #2a4060; }
body.is-night .ls-hill-2 { background: #1e3050; }
body.is-night .ls-hill-3 { background: #1a2840; }
body.is-night .ls-hill-4 { background: #181e38; }
body.is-night .ls-tree-1 svg path,
body.is-night .ls-tree-2 svg path { fill: #1a2840; }
body.is-night .ls-tree-3 svg path { fill: #181e38; }
body.is-night .ls-filter {
    background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, transparent 100%);
}

/* Stars (night only) */
body.is-night .ls-sky::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 25% 8%,  rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 40% 20%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 55% 6%,  rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 70% 18%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 82% 10%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 90% 25%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 15% 35%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 48% 12%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 33% 28%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,0.7), transparent);
    pointer-events: none;
}