:root {
    --moon-ink: #15162E;
    --lavender-fog: #C9B8FF;
    --glow-moss: #9EF2C9;
    --moon-milk: #FFF8DD;
    --persimmon-spark: #FF8A5B;
    --pool-blue: #6FD8FF;
    --night-plum: #36204D;
    --display: "Bagel Fat One", system-ui, sans-serif;
    --body: "Gowun Dodum", sans-serif;
    --serif: "Noto Serif KR", serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: var(--moon-ink);
    color: var(--moon-milk);
    font-family: var(--body);
}

button { font: inherit; color: inherit; }

.moon-reserve {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 12%, rgba(201, 184, 255, .3), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(111, 216, 255, .18), transparent 28%),
        linear-gradient(135deg, #15162E 0%, #36204D 64%, #15162E 100%);
}

.entrance {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    transition: transform 1.4s cubic-bezier(.72, 0, .16, 1), opacity .9s ease;
    background:
        radial-gradient(circle at 50% 63%, rgba(255, 248, 221, .08), transparent 32%),
        linear-gradient(180deg, rgba(21, 22, 46, .98), rgba(54, 32, 77, .94));
}

.moon-reserve.entered .entrance { transform: translateY(-108%); opacity: 0; pointer-events: none; }

.entrance-stars, .firefly-field { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.star, .firefly {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--glow-moss);
    box-shadow: 0 0 14px var(--glow-moss), 0 0 24px rgba(158, 242, 201, .5);
    opacity: .8;
}

.star:nth-child(3n), .firefly:nth-child(3n) { background: var(--pool-blue); box-shadow: 0 0 16px var(--pool-blue); }
.star:nth-child(4n), .firefly:nth-child(4n) { background: var(--persimmon-spark); box-shadow: 0 0 14px var(--persimmon-spark); }

.aurora-ribbon {
    position: absolute;
    width: 80vw;
    height: 20vh;
    border-radius: 50%;
    filter: blur(18px);
    opacity: .28;
    transform: rotate(-9deg);
    background: linear-gradient(90deg, transparent, #C9B8FF, #9EF2C9, transparent);
    animation: auroraDrift 12s ease-in-out infinite alternate;
}

.ribbon-one { top: 10%; left: -13%; }
.ribbon-two { bottom: 18%; right: -18%; animation-delay: -4s; background: linear-gradient(90deg, transparent, #6FD8FF, #C9B8FF, transparent); }

.glass-gate {
    position: absolute;
    width: min(68vw, 760px);
    height: min(74vh, 690px);
    border: 2px solid rgba(201, 184, 255, .55);
    border-radius: 48% 48% 18% 18% / 54% 54% 18% 18%;
    background: linear-gradient(110deg, rgba(255, 248, 221, .09), rgba(201, 184, 255, .07) 38%, rgba(111, 216, 255, .09));
    box-shadow: inset 0 0 42px rgba(255, 248, 221, .09), 0 0 70px rgba(201, 184, 255, .24);
    backdrop-filter: blur(3px);
    transition: transform 1.1s ease, opacity 1s ease;
}

.moon-reserve.gate-opening .glass-gate { transform: scaleX(1.28) translateY(-4%) rotateX(10deg); opacity: .36; }
.gate-seam { position: absolute; top: 4%; bottom: 0; left: 50%; width: 1px; background: rgba(255, 248, 221, .5); }
.gate-moon { position: absolute; top: 12%; right: 16%; width: 72px; height: 72px; border-radius: 50%; background: var(--moon-milk); box-shadow: 0 0 34px rgba(255, 248, 221, .7); }
.gate-handle { position: absolute; top: 52%; width: 12px; height: 38px; border-radius: 18px; background: var(--glow-moss); box-shadow: 0 0 14px var(--glow-moss); }
.gate-handle.left { left: calc(50% - 34px); }
.gate-handle.right { right: calc(50% - 34px); }

.creature-word {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-size: clamp(4rem, 13vw, 12rem);
    letter-spacing: .02em;
    color: var(--moon-milk);
    text-shadow: 0 10px 0 rgba(201, 184, 255, .18), 0 0 36px rgba(158, 242, 201, .34);
    animation: creatureFloat 5.8s ease-in-out infinite;
}

.creature-word::after {
    content: "";
    position: absolute;
    left: 13%;
    right: 13%;
    bottom: -18px;
    height: 20px;
    border-radius: 50%;
    background: rgba(158, 242, 201, .24);
    filter: blur(13px);
}

.entrance-note {
    position: absolute;
    bottom: 22%;
    margin: 0;
    font-family: var(--serif);
    color: var(--lavender-fog);
    font-size: clamp(1rem, 2vw, 1.45rem);
}

.open-gate {
    position: absolute;
    bottom: 10%;
    border: 1px solid rgba(158, 242, 201, .7);
    border-radius: 999px;
    background: rgba(54, 32, 77, .58);
    color: var(--moon-milk);
    padding: .85rem 1.35rem;
    cursor: pointer;
    box-shadow: 0 0 22px rgba(158, 242, 201, .22);
    transition: transform .25s ease, background .25s ease;
}
.open-gate:hover { transform: translateY(-3px); background: rgba(158, 242, 201, .16); }

.terrarium-shell {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(7vh);
    transition: opacity 1s ease .5s, transform 1s ease .5s;
}
.moon-reserve.entered .terrarium-shell { opacity: 1; transform: translateY(0); }

.terrarium-track {
    height: 100vh;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.terrarium-track::-webkit-scrollbar { display: none; }

.habitat {
    position: relative;
    flex: 0 0 100vw;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 20% 18%, rgba(201, 184, 255, .22), transparent 26%),
        radial-gradient(circle at 78% 26%, rgba(158, 242, 201, .1), transparent 24%),
        linear-gradient(180deg, #15162E 0%, #36204D 76%, #15162E 100%);
}
.habitat::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: radial-gradient(rgba(255, 248, 221, .55) 1px, transparent 1px);
    background-size: 33px 33px;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.field-card {
    position: absolute;
    z-index: 5;
    max-width: 460px;
    padding: 1.3rem 1.45rem 1.45rem;
    color: var(--moon-ink);
    background: rgba(255, 248, 221, .9);
    border: 1px solid rgba(255, 248, 221, .7);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .26), inset 0 0 25px rgba(201, 184, 255, .26);
    clip-path: polygon(5% 0, 100% 3%, 95% 100%, 0 94%);
    transform-origin: 50% 0;
    animation: tagSwing 6s ease-in-out infinite;
}
.field-card h1, .field-card h2 {
    margin: .25rem 0 .7rem;
    font-family: var(--display);
    font-size: clamp(2.4rem, 5vw, 5.5rem);
    line-height: .82;
    color: var(--night-plum);
}
.field-card p { margin: 0; font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.55; }
.tag-kicker { color: var(--persimmon-spark); letter-spacing: .06em; text-transform: lowercase; margin-bottom: .35rem !important; }

.fork-card { left: 9vw; top: 18vh; transform: rotate(-3deg); }
.grove-card { right: 12vw; top: 15vh; transform: rotate(2deg); }
.zoo-card { left: 12vw; bottom: 17vh; transform: rotate(2.5deg); }
.pool-card { right: 9vw; top: 17vh; transform: rotate(-2deg); }
.night-card { left: 11vw; top: 16vh; transform: rotate(2deg); }

.dome {
    position: absolute;
    border: 2px solid rgba(201, 184, 255, .5);
    background: linear-gradient(125deg, rgba(255, 248, 221, .08), rgba(201, 184, 255, .06), rgba(111, 216, 255, .07));
    box-shadow: inset 0 0 44px rgba(255, 248, 221, .08), 0 0 42px rgba(201, 184, 255, .18);
    animation: domeBreath 7s ease-in-out infinite;
}
.dome-y { width: 48vw; height: 74vh; right: -6vw; bottom: -9vh; border-radius: 50% 50% 20% 20%; }
.dome-ong { width: 62vw; height: 86vh; left: -12vw; top: 8vh; border-radius: 50%; }

.horizon, .night-hill {
    position: absolute;
    left: -6vw;
    right: -6vw;
    bottom: -8vh;
    height: 34vh;
    background: var(--night-plum);
    clip-path: polygon(0 54%, 12% 38%, 25% 58%, 40% 28%, 56% 48%, 72% 30%, 88% 52%, 100% 35%, 100% 100%, 0 100%);
    box-shadow: inset 0 24px 45px rgba(158, 242, 201, .08);
}
.hill-y::after { content: ""; position: absolute; inset: 45% 0 0; background: repeating-radial-gradient(ellipse at 50% 0, transparent 0 22px, rgba(158, 242, 201, .18) 23px 25px); }

.constellation { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.constellation span { position: absolute; height: 2px; width: 0; background: linear-gradient(90deg, var(--glow-moss), transparent); transform-origin: left center; opacity: .8; transition: width 1.2s ease; }
.habitat.active .constellation span { width: 190px; }
.y-lines span:nth-child(1) { left: 56vw; top: 23vh; transform: rotate(28deg); }
.y-lines span:nth-child(2) { left: 63vw; top: 35vh; transform: rotate(-34deg); transition-delay: .2s; }
.y-lines span:nth-child(3) { left: 50vw; top: 50vh; transform: rotate(10deg); transition-delay: .38s; }

.y-bird { position: absolute; right: 18vw; bottom: 21vh; width: 210px; height: 310px; z-index: 4; }
.bird-neck { position: absolute; left: 90px; bottom: 70px; width: 34px; height: 190px; border-radius: 30px; background: var(--lavender-fog); transform: rotate(-10deg); box-shadow: inset -8px 0 rgba(54, 32, 77, .18); }
.bird-neck::before, .bird-neck::after { content: ""; position: absolute; top: -34px; width: 28px; height: 100px; border-radius: 30px; background: var(--lavender-fog); }
.bird-neck::before { left: -24px; transform: rotate(-32deg); }
.bird-neck::after { right: -25px; transform: rotate(34deg); }
.bird-head { position: absolute; left: 100px; top: 26px; width: 62px; height: 48px; border-radius: 50%; background: var(--moon-milk); }
.bird-eye { position: absolute; left: 134px; top: 42px; width: 7px; height: 7px; border-radius: 50%; background: var(--moon-ink); animation: blink 5s infinite; }
.bird-body { position: absolute; left: 54px; bottom: 28px; width: 108px; height: 78px; border-radius: 56% 44% 48% 52%; background: var(--pool-blue); }
.bird-leg { position: absolute; bottom: 0; width: 5px; height: 38px; background: var(--persimmon-spark); }
.bird-leg.one { left: 92px; } .bird-leg.two { left: 122px; }
.signpost { position: absolute; right: 7vw; bottom: 22vh; color: var(--moon-ink); background: var(--glow-moss); padding: .8rem 1.1rem; border-radius: 18px; transform: rotate(8deg); box-shadow: 0 0 22px rgba(158, 242, 201, .32); }

.lore-tag {
    position: absolute;
    z-index: 8;
    border: 1px solid rgba(255, 248, 221, .65);
    border-radius: 999px 999px 999px 8px;
    color: var(--moon-ink);
    background: var(--moon-milk);
    padding: .65rem .9rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
    animation: tagSwing 5.4s ease-in-out infinite;
}
.lore-tag:hover { background: var(--glow-moss); }
.y-lore { left: 39vw; bottom: 28vh; }
.grove-lore { left: 13vw; bottom: 25vh; }
.zoo-lore { right: 12vw; top: 28vh; }
.pool-lore { left: 16vw; top: 18vh; }
.night-lore { right: 19vw; bottom: 34vh; }

.mist { position: absolute; height: 16vh; border-radius: 50%; filter: blur(12px); background: rgba(201, 184, 255, .28); animation: mistSlide 12s linear infinite alternate; }
.mist-a { width: 42vw; left: 5vw; top: 29vh; }
.mist-b { width: 50vw; right: 1vw; top: 49vh; animation-delay: -3s; background: rgba(111, 216, 255, .18); }
.mist-c { width: 35vw; left: 34vw; bottom: 16vh; animation-delay: -6s; background: rgba(158, 242, 201, .13); }
.pressed-flower { position: absolute; width: 160px; height: 160px; opacity: .45; border-radius: 50%; border: 1px solid rgba(158, 242, 201, .65); }
.pressed-flower::before, .pressed-flower::after { content: ""; position: absolute; left: 50%; top: 50%; width: 115px; height: 22px; border-radius: 50%; background: rgba(158, 242, 201, .28); transform-origin: left center; }
.pressed-flower::before { transform: rotate(32deg); } .pressed-flower::after { transform: rotate(-36deg); }
.flower-one { left: 18vw; top: 15vh; transform: rotate(-12deg); }
.flower-two { right: 21vw; bottom: 15vh; transform: rotate(20deg) scale(.8); }
.serif-fragment, .archive-note { position: absolute; font-family: var(--serif); color: var(--lavender-fog); font-size: clamp(1.1rem, 2.2vw, 2rem); }
.serif-fragment { left: 19vw; bottom: 17vh; max-width: 360px; }
.archive-note { left: 11vw; bottom: 12vh; max-width: 420px; color: var(--moon-milk); }
.seed-pods span { position: absolute; width: 24px; height: 38px; border-radius: 50%; background: var(--glow-moss); box-shadow: 0 0 22px var(--glow-moss); animation: podBob 4s ease-in-out infinite; }
.seed-pods span:nth-child(1) { left: 42vw; top: 28vh; } .seed-pods span:nth-child(2) { left: 53vw; top: 64vh; animation-delay: -1s; } .seed-pods span:nth-child(3) { left: 70vw; top: 45vh; animation-delay: -2s; } .seed-pods span:nth-child(4) { left: 25vw; top: 55vh; animation-delay: -3s; }

.zoo-orbitarium { background: radial-gradient(circle at 58% 45%, rgba(111, 216, 255, .16), transparent 30%), linear-gradient(180deg, #15162E, #36204D 68%, #15162E); }
.orbit-ring { position: absolute; border: 2px dashed rgba(158, 242, 201, .55); border-radius: 50%; animation: rotateRing 18s linear infinite; }
.ring-one { width: 55vw; height: 55vw; right: 5vw; top: 8vh; }
.ring-two { width: 34vw; height: 34vw; right: 15vw; top: 22vh; animation-direction: reverse; border-color: rgba(201, 184, 255, .6); }
.z-serpent { position: absolute; right: 21vw; top: 31vh; width: 210px; height: 180px; display: grid; place-items: center; color: var(--persimmon-spark); font-family: var(--display); font-size: 12rem; transform: rotate(-12deg); text-shadow: 0 0 26px rgba(255, 138, 91, .38); animation: serpentFold 5s ease-in-out infinite; }
.z-serpent::before, .z-serpent::after { content: ""; position: absolute; width: 55px; height: 28px; background: var(--moon-milk); clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: .8; }
.z-serpent::before { top: 35px; left: 15px; } .z-serpent::after { right: 10px; bottom: 30px; transform: rotate(180deg); }
.zoo-placards { position: absolute; right: 10vw; bottom: 18vh; display: grid; gap: .7rem; color: var(--moon-ink); }
.zoo-placards span { background: var(--moon-milk); padding: .6rem .9rem; border-radius: 12px; transform: rotate(var(--r, -2deg)); }
.zoo-placards span:nth-child(2) { --r: 3deg; } .zoo-placards span:nth-child(3) { --r: -5deg; }

.moonpool-oo { background: radial-gradient(circle at 35% 55%, rgba(111, 216, 255, .2), transparent 25%), radial-gradient(circle at 62% 55%, rgba(111, 216, 255, .2), transparent 25%), linear-gradient(180deg, #15162E, #36204D 72%, #15162E); }
.pool { position: absolute; bottom: 18vh; width: 28vw; height: 28vw; min-width: 260px; min-height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 248, 221, .8) 0 8%, #6FD8FF 12%, rgba(111, 216, 255, .35) 44%, rgba(54, 32, 77, .45) 70%); box-shadow: inset 0 0 55px rgba(255, 248, 221, .45), 0 0 60px rgba(111, 216, 255, .4); }
.pool-left { left: 15vw; } .pool-right { left: 40vw; }
.pool span { position: absolute; inset: 15%; border: 2px solid rgba(255, 248, 221, .62); border-radius: 50%; animation: ripple 3.8s ease-out infinite; }
.moon-fish { position: absolute; z-index: 4; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--moon-milk); color: var(--pool-blue); font-family: var(--display); font-size: 5rem; box-shadow: 0 0 32px rgba(255, 248, 221, .5); animation: fishOrbit 8s ease-in-out infinite; }
.fish-one { left: 27vw; bottom: 38vh; } .fish-two { left: 51vw; bottom: 24vh; animation-delay: -4s; }

.n-night-hill { background: radial-gradient(circle at 75% 20%, rgba(255, 248, 221, .18), transparent 18%), linear-gradient(180deg, #15162E, #36204D 58%, #15162E); }
.hill-back { bottom: 4vh; height: 44vh; background: #36204D; opacity: .75; }
.hill-front { bottom: -8vh; height: 49vh; background: linear-gradient(180deg, #36204D, #15162E); clip-path: polygon(0 58%, 10% 45%, 22% 55%, 34% 36%, 46% 62%, 58% 42%, 70% 52%, 84% 32%, 100% 48%, 100% 100%, 0 100%); }
.n-rabbit { position: absolute; width: 80px; height: 58px; border-radius: 48% 52% 45% 50%; background: var(--moon-milk); box-shadow: 0 0 18px rgba(255, 248, 221, .32); animation: rabbitHop 5s ease-in-out infinite; }
.n-rabbit::before, .n-rabbit::after { content: ""; position: absolute; top: -28px; width: 18px; height: 42px; border-radius: 50%; background: var(--moon-milk); }
.n-rabbit::before { left: 20px; transform: rotate(-18deg); } .n-rabbit::after { left: 42px; transform: rotate(16deg); }
.n-rabbit span { position: absolute; right: 18px; top: 22px; width: 6px; height: 6px; border-radius: 50%; background: var(--moon-ink); animation: blink 4.5s infinite; }
.rabbit-one { right: 25vw; bottom: 20vh; } .rabbit-two { right: 16vw; bottom: 30vh; transform: scale(.72); animation-delay: -1.4s; } .rabbit-three { right: 40vw; bottom: 16vh; transform: scale(.58); animation-delay: -2.8s; }
.seal-stamp { position: absolute; right: 12vw; top: 17vh; width: 88px; height: 88px; border: 4px solid var(--persimmon-spark); color: var(--persimmon-spark); border-radius: 18px; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; transform: rotate(12deg); opacity: .88; }

.pebble-nav { position: fixed; left: 50%; bottom: 24px; z-index: 20; transform: translateX(-50%) translateY(140%); display: flex; gap: .7rem; padding: .6rem .8rem; border-radius: 999px; background: rgba(21, 22, 46, .62); border: 1px solid rgba(255, 248, 221, .18); transition: transform .8s ease .7s; }
.moon-reserve.entered .pebble-nav { transform: translateX(-50%) translateY(0); }
.pebble { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 248, 221, .18); color: var(--moon-milk); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 248, 221, .2); }
.pebble.active { background: var(--glow-moss); color: var(--moon-ink); box-shadow: 0 0 18px rgba(158, 242, 201, .6); }
.pebble span { font-size: .8rem; }

.lore-bubble { position: fixed; z-index: 45; left: 50%; top: 50%; max-width: 390px; transform: translate(-50%, -42%) scale(.86); opacity: 0; pointer-events: none; padding: 1.15rem 1.2rem; border-radius: 28px 28px 28px 6px; color: var(--moon-ink); background: var(--moon-milk); box-shadow: 0 28px 80px rgba(0, 0, 0, .36), 0 0 42px rgba(158, 242, 201, .2); transition: opacity .25s ease, transform .25s ease; }
.lore-bubble.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.lore-bubble span { display: block; line-height: 1.45; }
.lore-bubble button { margin-top: .8rem; border: 0; border-radius: 999px; padding: .45rem .7rem; background: var(--night-plum); color: var(--moon-milk); cursor: pointer; }

@keyframes creatureFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-18px) rotate(1deg); } }
@keyframes auroraDrift { from { transform: translateX(-4vw) rotate(-9deg); } to { transform: translateX(7vw) rotate(-2deg); } }
@keyframes domeBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes tagSwing { 0%, 100% { rotate: -1deg; } 50% { rotate: 1.4deg; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes mistSlide { from { transform: translateX(-5vw); } to { transform: translateX(7vw); } }
@keyframes podBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes rotateRing { to { transform: rotate(360deg); } }
@keyframes serpentFold { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-18px); } }
@keyframes ripple { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes fishOrbit { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(32px, -26px) rotate(10deg); } }
@keyframes rabbitHop { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }

@media (max-width: 760px) {
    .field-card { max-width: 82vw; }
    .fork-card, .grove-card, .zoo-card, .pool-card, .night-card { left: 8vw; right: auto; top: 12vh; bottom: auto; }
    .pool { min-width: 190px; min-height: 190px; }
    .pool-left { left: 4vw; } .pool-right { left: 40vw; }
    .y-bird { right: 7vw; transform: scale(.75); transform-origin: bottom right; }
    .z-serpent { right: 4vw; top: 47vh; }
    .pebble-nav { bottom: 12px; }
}