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

body {
    font-family: 'Nunito', sans-serif;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===================== BACKGROUNDS ===================== */
.bg {
    position: fixed;
    inset: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

/* ---- DAY ---- */
.day-bg {
    background: linear-gradient(180deg, #87CEEB 0%, #c9e8f5 60%, #f0f8d8 100%);
    opacity: 1;
}

[data-theme="night"] .day-bg { opacity: 0; }

/* Sun */
.sun {
    position: absolute;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7a1 30%, #FFD700 60%, #FFA500 100%);
    box-shadow: 0 0 60px 30px rgba(255, 220, 50, 0.55),
                0 0 120px 60px rgba(255, 180, 0, 0.25);
    top: 80px; left: 50%;
    transform: translateX(-50%);
    animation: sunPulse 3s ease-in-out infinite;
}

@keyframes sunPulse {
    0%, 100% { box-shadow: 0 0 60px 30px rgba(255,220,50,.55), 0 0 120px 60px rgba(255,180,0,.25); }
    50%       { box-shadow: 0 0 80px 40px rgba(255,220,50,.75), 0 0 160px 80px rgba(255,180,0,.35); }
}

/* Clouds */
.cloud {
    position: absolute;
    background: white;
    border-radius: 50px;
    opacity: 0.9;
}
.cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.cloud1 { width: 160px; height: 50px; top: 140px; left: 10%; animation: drift 18s linear infinite; }
.cloud1::before { width: 80px; height: 80px; top: -40px; left: 20px; }
.cloud1::after  { width: 60px; height: 60px; top: -30px; left: 70px; }

.cloud2 { width: 120px; height: 40px; top: 200px; right: 12%; animation: drift 24s linear infinite reverse; }
.cloud2::before { width: 60px; height: 60px; top: -30px; left: 15px; }
.cloud2::after  { width: 50px; height: 50px; top: -25px; left: 55px; }

.cloud3 { width: 90px; height: 32px; top: 110px; right: 30%; animation: drift 20s linear infinite; }
.cloud3::before { width: 45px; height: 45px; top: -22px; left: 12px; }
.cloud3::after  { width: 35px; height: 35px; top: -18px; left: 42px; }

@keyframes drift {
    from { transform: translateX(-120px); }
    to   { transform: translateX(110vw); }
}

/* ---- NIGHT ---- */
.night-bg {
    background: linear-gradient(180deg, #0a0020 0%, #0d0535 40%, #0b1a3a 80%, #0d2244 100%);
    opacity: 0;
}

[data-theme="night"] .night-bg { opacity: 1; }

/* Moon */
.moon {
    position: absolute;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffbe6, #e8d97a 50%, #c8b44a);
    box-shadow: 0 0 40px 15px rgba(255, 240, 120, 0.35),
                0 0 80px 30px rgba(200, 180, 80, 0.15);
    top: 90px; left: 50%;
    transform: translateX(-50%);
    animation: moonGlow 4s ease-in-out infinite;
}

/* crater details */
.moon::before {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    top: 25px; left: 15px;
    box-shadow: 18px 28px 0 rgba(0,0,0,0.08), 35px 12px 0 12px rgba(0,0,0,0.06);
}

@keyframes moonGlow {
    0%, 100% { box-shadow: 0 0 40px 15px rgba(255,240,120,.35), 0 0 80px 30px rgba(200,180,80,.15); }
    50%       { box-shadow: 0 0 55px 22px rgba(255,240,120,.5),  0 0 110px 50px rgba(200,180,80,.25); }
}

/* Stars */
.stars {
    position: absolute;
    inset: 0;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle var(--dur) ease-in-out infinite var(--delay);
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.4); }
}

/* Aurora Borealis */
.aurora {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    background:
        radial-gradient(ellipse 80% 40% at 20% 0%, rgba(0,255,150,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 30% at 60% 0%, rgba(80,50,255,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 70% 35% at 85% 0%, rgba(0,200,255,0.15) 0%, transparent 70%),
        radial-gradient(ellipse 50% 25% at 45% 0%, rgba(180,0,255,0.12) 0%, transparent 60%);
    filter: blur(18px);
    animation: auroraDance 8s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes auroraDance {
    0%   { opacity: 0.6; transform: scaleX(1)   skewX(0deg); }
    33%  { opacity: 1;   transform: scaleX(1.05) skewX(2deg); }
    66%  { opacity: 0.7; transform: scaleX(0.97) skewX(-1deg); }
    100% { opacity: 0.6; transform: scaleX(1)   skewX(0deg); }
}

/* ===================== SCENE / CARD ===================== */
.scene {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.label {
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
    transition: color 0.6s;
    user-select: none;
}

[data-theme="day"] .label { color: #3a5a00; text-shadow: 0 2px 12px rgba(255,230,80,0.5); }

/* ===================== SWITCH ===================== */
.switch {
    cursor: pointer;
    display: block;
}

.switch input { display: none; }

.track {
    display: block;
    width: 110px;
    height: 54px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1a0050, #0a1a4a);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 4px rgba(255,255,255,0.1);
    position: relative;
    transition: background 0.7s;
}

[data-theme="day"] .track {
    background: linear-gradient(135deg, #74c0fc, #a9d9f7);
    box-shadow: 0 4px 24px rgba(100,180,255,0.4), inset 0 1px 4px rgba(255,255,255,0.3);
}

.thumb {
    position: absolute;
    top: 6px; left: 6px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff7a1, #FFD700 60%);
    box-shadow: 0 3px 14px rgba(255,200,0,0.6);
    transition: transform 0.55s cubic-bezier(.34,1.56,.64,1), background 0.6s, box-shadow 0.6s;
    display: flex;
    align-items: center;
    justify-content: center;
}

input:checked ~ .track .thumb {
    transform: translateX(56px);
    background: radial-gradient(circle at 35% 35%, #fffbe6, #e8d97a 60%);
    box-shadow: 0 3px 14px rgba(255,240,120,0.55);
}

.thumb-icon {
    font-size: 22px;
    line-height: 1;
    transition: transform 0.4s;
    pointer-events: none;
}