:root {
    /* Design typography tokens: Space Grotesk** Grotesk* Grotes* readable quest text */
    --cream: #FFF2D7;
    --plum: #3A174A;
    --gold: #D8A33F;
    --mint: #63FFD2;
    --pink: #FFD3E6;
    --violet: #8C8BFF;
    --night: #1B102A;
    --hot: #FF4F9A;
    --pulse: .35;
    --blush: .25;
    --charge: .18;
    --scroll: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--cream);
    background: radial-gradient(circle at 50% 12%, rgba(140,139,255,.28), transparent 32rem), linear-gradient(180deg, var(--night), #12091e 44%, var(--plum));
    font-family: "Space Grotesk", sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: radial-gradient(circle, rgba(255,242,215,.28) 1px, transparent 1.5px), linear-gradient(90deg, transparent 49%, rgba(255,211,230,.04) 50%, transparent 51%);
    background-size: 54px 54px, 120px 100%;
    mix-blend-mode: screen;
    opacity: .55;
}

.cursor-glow {
    position: fixed;
    width: 18rem;
    height: 18rem;
    margin: -9rem 0 0 -9rem;
    pointer-events: none;
    z-index: 2;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,255,210,.16), rgba(255,79,154,.08) 42%, transparent 70%);
    transform: translate3d(50vw, 30vh, 0);
}

.title-screen, .chapter {
    min-height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    padding: 7rem clamp(1rem, 4vw, 5rem);
    isolation: isolate;
}

.title-screen {
    text-align: center;
    background: radial-gradient(circle at center, rgba(255,79,154,.22), transparent 24rem), radial-gradient(circle at 50% 88%, rgba(99,255,210,.18), transparent 26rem);
}

.curtain {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24vw;
    z-index: -1;
    background: repeating-linear-gradient(90deg, #2b0f3a 0 1.1rem, var(--plum) 1.1rem 2.4rem, #230b32 2.4rem 3.3rem);
    box-shadow: inset 0 0 4rem rgba(0,0,0,.55);
    animation: curtainPart 1.8s ease-out forwards;
}
.curtain-left { left: 0; transform-origin: left; }
.curtain-right { right: 0; transform-origin: right; }

.overline, .chapter-kicker, .inventory-title {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-weight: 700;
    color: var(--mint);
    font-size: .78rem;
}

.domain-mark {
    margin: .4rem 0 1rem;
    font: 700 clamp(3.4rem, 12vw, 10rem)/.86 "DynaPuff", cursive;
    color: var(--pink);
    text-shadow: 0 .12em 0 var(--hot), 0 0 calc(1.5rem + 2rem * var(--pulse)) rgba(255,79,154,.72), 0 0 4rem rgba(99,255,210,.35);
}
.domain-mark span {
    display: inline-block;
    animation: letterPop .7s cubic-bezier(.2,1.7,.35,1) both, wobble 5s ease-in-out infinite;
    animation-delay: calc(var(--i) * .055s), calc(1.1s + var(--i) * .04s);
}

.wind-key {
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1.4rem;
    border: .55rem solid var(--gold);
    border-radius: 50% 50% 18% 18%;
    position: relative;
    animation: wind 5s linear infinite;
    filter: drop-shadow(0 0 1rem rgba(216,163,63,.65));
}
.wind-key::before, .wind-key::after {
    content: "";
    position: absolute;
    width: 2.1rem;
    height: 2.1rem;
    border: .45rem solid var(--gold);
    border-radius: 50%;
    top: .9rem;
}
.wind-key::before { left: -2rem; }
.wind-key::after { right: -2rem; }
.wind-key span { position: absolute; left: 50%; top: 4.6rem; width: .55rem; height: 3rem; background: var(--gold); transform: translateX(-50%); }

.heart-battery {
    position: relative;
    width: 9.5rem;
    height: 8.5rem;
    margin: 1.3rem auto;
    clip-path: path("M76 142 C21 99 0 72 8 39 C15 10 49 0 76 28 C103 0 137 10 144 39 C152 72 131 99 76 142 Z");
    background: rgba(255,242,215,.2);
    border: .2rem solid var(--cream);
    box-shadow: inset 0 0 1rem rgba(27,16,42,.7), 0 0 calc(1rem + 4rem * var(--charge)) rgba(99,255,210,.75);
}
.battery-liquid { position: absolute; inset: auto 0 0; height: calc(18% + 72% * var(--charge)); background: linear-gradient(180deg, var(--mint), var(--hot)); transition: height .5s ease; }
.battery-face { position: absolute; inset: 0; display: grid; place-items: center; font: 700 4rem "DynaPuff"; color: var(--cream); text-shadow: 0 0 1rem var(--night); }
.title-copy { max-width: 45rem; margin: 1rem auto 2rem; font-size: clamp(1.05rem, 2vw, 1.35rem); color: rgba(255,242,215,.86); }
.portal-button, .quest-action {
    display: inline-block;
    border: .13rem solid var(--cream);
    border-radius: 999px;
    padding: .9rem 1.35rem;
    color: var(--night);
    background: linear-gradient(135deg, var(--mint), var(--pink));
    font: 700 .9rem "Space Grotesk";
    text-decoration: none;
    box-shadow: 0 .65rem 0 rgba(0,0,0,.28), 0 0 1.8rem rgba(99,255,210,.32);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.portal-button:hover, .quest-action:hover { transform: translateY(-.25rem) rotate(-1deg); box-shadow: 0 .9rem 0 rgba(0,0,0,.22), 0 0 2.5rem rgba(255,79,154,.45); }

.quest-rail, .inventory {
    position: fixed;
    z-index: 10;
    backdrop-filter: blur(16px);
    background: rgba(27,16,42,.62);
    border: 1px solid rgba(255,242,215,.22);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.25);
}
.quest-rail { left: 1rem; top: 50%; transform: translateY(-50%); border-radius: 2rem; padding: .6rem; display: grid; gap: .45rem; }
.rail-charm { display: grid; grid-template-columns: 2rem 1fr; gap: .45rem; align-items: center; min-width: 8.5rem; padding: .55rem .7rem; border-radius: 999px; color: var(--cream); text-decoration: none; font-size: .78rem; opacity: .55; }
.rail-charm span { color: var(--gold); font-weight: 700; }
.rail-charm.is-active { opacity: 1; background: rgba(255,211,230,.16); color: var(--mint); }
.inventory { right: 1rem; top: 1rem; border-radius: 1.4rem; padding: .8rem; display: grid; gap: .45rem; }
.inventory-charm { border: 1px solid rgba(255,242,215,.22); color: var(--cream); background: rgba(58,23,74,.72); border-radius: 999px; padding: .5rem .75rem; font-family: "Space Grotesk"; cursor: pointer; }
.inventory-charm.is-lit { color: var(--night); background: linear-gradient(135deg, var(--gold), var(--mint)); box-shadow: 0 0 1.4rem rgba(99,255,210,.5); }

.chapter { overflow: hidden; }
.chapter::before { content: ""; position: absolute; inset: 6vh 5vw; border: .2rem solid rgba(255,242,215,.13); border-radius: 3rem; pointer-events: none; box-shadow: inset 0 0 4rem rgba(255,211,230,.08); }
.chapter-card { width: min(42rem, calc(100vw - 3rem)); margin-left: clamp(0rem, 8vw, 8rem); justify-self: start; padding: clamp(1.4rem, 3vw, 3rem); border-radius: 2rem; background: linear-gradient(135deg, rgba(58,23,74,.9), rgba(27,16,42,.72)); border: 1px solid rgba(255,242,215,.22); box-shadow: 0 2rem 5rem rgba(0,0,0,.34); transform: translateY(calc((var(--scroll) - .5) * -1rem)); }
.chapter-card.right { justify-self: end; margin: 0 clamp(0rem, 8vw, 8rem) 0 0; }
.chapter-card.glass { background: linear-gradient(135deg, rgba(140,139,255,.26), rgba(27,16,42,.76)); }
.chapter-card.finale { justify-self: center; margin: 0; text-align: center; }
.chapter-card h2 { margin: .25rem 0 .8rem; font: 700 clamp(2.4rem, 6vw, 5.8rem)/.9 "DynaPuff"; color: var(--pink); text-shadow: .05em .08em 0 var(--hot), 0 0 2rem rgba(255,79,154,.38); }
.quest-text { font-size: clamp(1rem, 1.7vw, 1.24rem); line-height: 1.72; color: rgba(255,242,215,.9); }
blockquote { margin: 1.4rem 0; font: 650 clamp(1.25rem, 2.2vw, 2rem)/1.24 "Fraunces", serif; color: var(--cream); }

.stage-backdrop, .ribbon-vines, .gear-field, .constellation-heart, .locket-door, .robot-mask, .pixel-cupid, .moon-envelope, .wax-seal { position: absolute; z-index: -1; }
.star-circuit { width: 52vw; height: 52vw; border: 2px dashed rgba(99,255,210,.3); border-radius: 48% 52% 45% 55%; animation: wind 28s linear infinite; }
.stamp { position: absolute; color: var(--night); background: var(--gold); border-radius: .6rem; padding: .6rem 1rem; transform: rotate(-12deg); font-family: "DynaPuff"; }
.stamp-one { top: 25%; left: 22%; }
.robot-mask { right: 10vw; bottom: 12vh; width: 16rem; height: 18rem; border-radius: 46% 46% 42% 42%; background: var(--cream); box-shadow: inset 0 -2rem 0 var(--pink), 0 0 3rem rgba(255,211,230,.42); }
.robot-mask::before, .robot-mask::after { content:""; position:absolute; top: 6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--night); box-shadow: 0 0 1rem var(--mint); }
.robot-mask::before { left: 4rem; } .robot-mask::after { right: 4rem; }
.robot-mask span { position:absolute; left:50%; bottom:4.2rem; width: 5rem; height: 1.5rem; transform:translateX(-50%); border-bottom: .35rem dotted var(--hot); }
.forest { background: radial-gradient(circle at 22% 35%, rgba(99,255,210,.22), transparent 20rem); }
.ribbon-vines { inset: 0; }
.ribbon-vines i { position:absolute; width: .8rem; height: 120vh; top: -10vh; border-radius: 999px; background: linear-gradient(var(--pink), var(--hot), var(--mint)); box-shadow: 0 0 1.5rem rgba(255,79,154,.42); transform: rotate(var(--r, 12deg)); }
.ribbon-vines i:nth-child(1){ left:12%; --r:-13deg; } .ribbon-vines i:nth-child(2){ left:29%; --r:8deg; } .ribbon-vines i:nth-child(3){ right:18%; --r:14deg; } .ribbon-vines i:nth-child(4){ right:36%; --r:-8deg; }
.pixel-cupid { left: 18%; top: 22%; font-size: 7rem; color: var(--hot); text-shadow: .18rem .18rem 0 var(--cream); animation: float 4s ease-in-out infinite; }
.gearworks { background: radial-gradient(circle at 75% 45%, rgba(216,163,63,.24), transparent 22rem); }
.gear-field { inset: 0; }
.gear-field b { position:absolute; border: 1.2rem dotted var(--gold); border-radius: 50%; opacity: .48; animation: wind 18s linear infinite; }
.gear-field b:nth-child(1){ width:22rem;height:22rem;right:9%;top:18%; } .gear-field b:nth-child(2){ width:14rem;height:14rem;left:15%;bottom:10%; animation-direction:reverse;} .gear-field b:nth-child(3){ width:34rem;height:34rem;right:25%;bottom:-14%;}
.wax-seal { right: 18%; bottom: 22%; width: 8rem; height: 8rem; display:grid; place-items:center; border-radius: 44% 56% 48% 52%; background: var(--hot); color: var(--cream); font-size:3rem; box-shadow: 0 0 2rem rgba(255,79,154,.5); }
.observatory { background: radial-gradient(circle at 50% 30%, rgba(140,139,255,.36), transparent 24rem); }
.constellation-heart { left: 10%; top: 14%; width: 36rem; height: 30rem; background: linear-gradient(35deg, transparent 48%, rgba(99,255,210,.55), transparent 52%), linear-gradient(145deg, transparent 48%, rgba(255,211,230,.42), transparent 52%); clip-path: polygon(50% 18%, 70% 0, 96% 16%, 90% 48%, 50% 88%, 10% 48%, 4% 16%, 30% 0); filter: drop-shadow(0 0 1rem rgba(99,255,210,.8)); }
.constellation-heart span { position:absolute; width: .9rem; height:.9rem; border-radius:50%; background: var(--cream); box-shadow: 0 0 1rem var(--mint); }
.constellation-heart span:nth-child(1){left:48%;top:15%;}.constellation-heart span:nth-child(2){left:70%;top:8%;}.constellation-heart span:nth-child(3){left:85%;top:42%;}.constellation-heart span:nth-child(4){left:50%;top:82%;}.constellation-heart span:nth-child(5){left:13%;top:42%;}
.moon-envelope { right: 14%; top: 20%; font-size: 8rem; color: var(--cream); animation: float 5.5s ease-in-out infinite; text-shadow: 0 0 2rem var(--violet); }
.locket { background: radial-gradient(circle at 50% 45%, rgba(255,79,154,.22), transparent 26rem); }
.locket-door { width: min(58vw, 38rem); height: min(58vw, 38rem); border-radius: 50%; background: linear-gradient(135deg, var(--gold), #805b23); border: .7rem solid var(--cream); box-shadow: inset 0 0 4rem rgba(27,16,42,.55), 0 0 5rem rgba(216,163,63,.42); transform: rotateY(calc(var(--charge) * -18deg)); }
.hinge { position:absolute; left:-1.2rem; top:24%; bottom:24%; width:2rem; background: var(--plum); border-radius:999px; }
.keyhole { position:absolute; inset:0; display:grid; place-items:center; font:700 9rem "DynaPuff"; color: var(--night); }
.ending-note { position: fixed; left: 50%; bottom: 1.2rem; z-index: 20; transform: translate(-50%, 150%); padding: .85rem 1.2rem; border-radius: 999px; color: var(--night); background: var(--mint); font-weight: 700; box-shadow: 0 0 2rem rgba(99,255,210,.65); transition: transform .45s ease; }
.ending-note.is-visible { transform: translate(-50%, 0); }

@keyframes letterPop { from { opacity: 0; transform: translateY(1.4rem) scale(.2) rotate(-18deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes wobble { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(calc(-.22rem - .4rem * var(--pulse))) rotate(2deg); } }
@keyframes wind { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.2rem); } }
@keyframes curtainPart { to { transform: scaleX(.72); } }

@media (max-width: 760px) {
    .quest-rail { display: none; }
    .inventory { left: .6rem; right: .6rem; top: .6rem; grid-template-columns: repeat(5, 1fr); }
    .inventory-title { grid-column: 1 / -1; text-align: center; }
    .inventory-charm { font-size: .68rem; padding: .42rem .3rem; }
    .chapter-card, .chapter-card.right { justify-self: center; margin: 0; }
    .robot-mask, .locket-door { opacity: .34; }
}