html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #000;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    transition: background 2s ease;
}

body::before {
    content: '';
    position: fixed;
    inset: -25%;
    z-index: 1;
    pointer-events: none;
    opacity: var(--cloud-opacity, 0.65);
    animation: cloud-drift 150s linear infinite alternate;
    filter: blur(55px);
    background:
            radial-gradient(ellipse 1200px 700px at 10% 15%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.45) 25%, rgba(255,255,255,0.15) 45%, transparent 70%),
            radial-gradient(ellipse 1400px 800px at 75% 10%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 25%, rgba(255,255,255,0.12) 45%, transparent 70%),
            radial-gradient(ellipse 1600px 900px at 35% 55%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.28) 30%, rgba(255,255,255,0.10) 50%, transparent 75%),
            radial-gradient(ellipse 1300px 750px at 90% 70%, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.22) 30%, rgba(255,255,255,0.08) 50%, transparent 75%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: var(--star-opacity, 0);
    transition: opacity 2s ease;
    background:
            radial-gradient(circle at 3% 7%, rgba(255,255,255,0.95) 0 1px, transparent 2px),
            radial-gradient(circle at 8% 18%, rgba(255,255,255,0.85) 0 1px, transparent 2px),
            radial-gradient(circle at 14% 4%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 19% 12%, rgba(255,255,255,0.80) 0 1px, transparent 2px),
            radial-gradient(circle at 24% 9%, rgba(255,255,255,1.00) 0 1px, transparent 2px),
            radial-gradient(circle at 29% 16%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
            radial-gradient(circle at 34% 6%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 39% 19%, rgba(255,255,255,0.85) 0 1px, transparent 2px),
            radial-gradient(circle at 44% 8%, rgba(255,255,255,0.95) 0 1px, transparent 2px),
            radial-gradient(circle at 49% 14%, rgba(255,255,255,0.80) 0 1px, transparent 2px),
            radial-gradient(circle at 54% 5%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 59% 17%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
            radial-gradient(circle at 64% 7%, rgba(255,255,255,1.00) 0 1px, transparent 2px),
            radial-gradient(circle at 69% 13%, rgba(255,255,255,0.85) 0 1px, transparent 2px),
            radial-gradient(circle at 74% 4%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 79% 18%, rgba(255,255,255,0.80) 0 1px, transparent 2px),
            radial-gradient(circle at 84% 9%, rgba(255,255,255,0.95) 0 1px, transparent 2px),
            radial-gradient(circle at 89% 15%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
            radial-gradient(circle at 94% 6%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 6% 31%, rgba(255,255,255,0.85) 0 1px, transparent 2px),
            radial-gradient(circle at 18% 42%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
            radial-gradient(circle at 27% 28%, rgba(255,255,255,0.95) 0 1px, transparent 2px),
            radial-gradient(circle at 36% 39%, rgba(255,255,255,0.80) 0 1px, transparent 2px),
            radial-gradient(circle at 47% 33%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 58% 45%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
            radial-gradient(circle at 67% 30%, rgba(255,255,255,1.00) 0 1px, transparent 2px),
            radial-gradient(circle at 76% 41%, rgba(255,255,255,0.85) 0 1px, transparent 2px),
            radial-gradient(circle at 86% 35%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 95% 43%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
            radial-gradient(circle at 9% 58%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 21% 69%, rgba(255,255,255,1.00) 0 1px, transparent 2px),
            radial-gradient(circle at 33% 76%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
            radial-gradient(circle at 44% 61%, rgba(255,255,255,0.85) 0 1px, transparent 2px),
            radial-gradient(circle at 56% 73%, rgba(255,255,255,0.95) 0 1px, transparent 2px),
            radial-gradient(circle at 68% 64%, rgba(255,255,255,0.80) 0 1px, transparent 2px),
            radial-gradient(circle at 79% 78%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 91% 70%, rgba(255,255,255,1.00) 0 1px, transparent 2px),
            radial-gradient(circle at 5% 88%, rgba(255,255,255,0.80) 0 1px, transparent 2px),
            radial-gradient(circle at 17% 93%, rgba(255,255,255,0.95) 0 1px, transparent 2px),
            radial-gradient(circle at 38% 90%, rgba(255,255,255,0.75) 0 1px, transparent 2px),
            radial-gradient(circle at 61% 95%, rgba(255,255,255,0.85) 0 1px, transparent 2px),
            radial-gradient(circle at 83% 91%, rgba(255,255,255,0.90) 0 1px, transparent 2px),
            radial-gradient(circle at 96% 96%, rgba(255,255,255,1.00) 0 1px, transparent 2px);
}

.moon {
    position: fixed;
    top: 8%;
    right: 9%;
    z-index: 3;
    width: clamp(64px, 8vw, 120px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 2s ease;    pointer-events: none;
    background: #12192c;
    box-shadow:
            0 0 24px rgba(255, 255, 220, 0.22),
            0 0 70px rgba(255, 255, 220, 0.15);
    transition: opacity 2s ease;
}

.moon::before,
.moon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.moon::before {
    background: #f8f5df;
}

.moon::after {
    background: #12192c;
}

.moon--new::after {
    inset: 0;
}

.moon--waxing-crescent::after {
    left: -28%;
    width: 100%;
}

.moon--first-quarter::after {
    left: 0;
    width: 50%;
}

.moon--waxing-gibbous::after {
    left: -48%;
    width: 78%;
}

.moon--full::after {
    display: none;
}

.moon--waning-gibbous::after {
    right: -48%;
    left: auto;
    width: 78%;
}

.moon--last-quarter::after {
    right: 0;
    left: auto;
    width: 50%;
}

.moon--waning-crescent::after {
    right: -28%;
    left: auto;
    width: 100%;
}

.debug-panel {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px);
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

@keyframes cloud-drift {
    from {
        transform: translateX(-5%) translateY(-1%);
    }

    to {
        transform: translateX(5%) translateY(1%);
    }
}