:root {
  /* DESIGN typography tokens: Bungee Shade, Space Grotesk** for concise clue text, Kiwi Maru */
  --stage-ink: #1B1636;
  --bubblegum: #FF4FA3;
  --lemon: #FFE14D;
  --pool: #29D6E8;
  --melon: #FF7A59;
  --cream: #FFF4D6;
  --grape: #5E3B9E;
  --display: "Bungee Shade", "Cooper Black", "Arial Black", fantasy;
  --body: "Space Grotesk", "Trebuchet MS", system-ui, sans-serif;
  --soft: "Kiwi Maru", "Hiragino Maru Gothic ProN", "Yu Gothic", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--stage-ink); }

body {
  margin: 0;
  color: var(--cream);
  font-family: var(--body);
  background: var(--stage-ink);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; cursor: pointer; }

.stage-grain,
.stage-grain::before,
.stage-grain::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

.stage-grain {
  opacity: .24;
  background:
    radial-gradient(circle at 10% 15%, var(--lemon) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 20%, var(--pool) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 70%, var(--bubblegum) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 84%, var(--melon) 0 2px, transparent 3px);
  background-size: 110px 90px, 130px 120px, 95px 105px, 150px 100px;
  mix-blend-mode: screen;
}

.stage-grain::before {
  content: "";
  opacity: .18;
  background-image: linear-gradient(45deg, transparent 45%, var(--cream) 46% 48%, transparent 49% 100%);
  background-size: 38px 38px;
}

.cursor-ghost {
  position: fixed;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  z-index: 35;
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: .55;
  transition: width .2s, height .2s;
}

.ghost-left { border: 3px solid var(--bubblegum); box-shadow: 6px 6px 0 var(--stage-ink); }
.ghost-right { border: 3px solid var(--pool); box-shadow: -6px -6px 0 var(--stage-ink); }

.center-seam {
  position: fixed;
  left: 50%;
  top: 0;
  width: 92px;
  height: 100vh;
  transform: translateX(-50%);
  z-index: 25;
  pointer-events: auto;
}

.seam-path {
  position: absolute;
  inset: -5vh 31px;
  background: var(--stage-ink);
  clip-path: polygon(44% 0, 68% 8%, 43% 17%, 61% 26%, 36% 38%, 64% 49%, 40% 61%, 58% 73%, 33% 86%, 55% 100%, 0 100%, 0 0);
  filter: drop-shadow(9px 0 0 var(--lemon)) drop-shadow(-9px 0 0 var(--pool));
  animation: seamWobble 5s ease-in-out infinite alternate;
}

.zipper-teeth {
  position: absolute;
  left: 50%;
  top: 0;
  width: 44px;
  height: 100%;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, transparent 0 18px, var(--cream) 18px 25px, transparent 25px 43px);
  clip-path: polygon(45% 0, 62% 8%, 45% 18%, 63% 27%, 42% 39%, 60% 50%, 41% 62%, 59% 74%, 40% 87%, 55% 100%, 20% 100%, 22% 0);
  opacity: .7;
}

.sister-token {
  position: absolute;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  transition: top .8s cubic-bezier(.22,1.4,.35,1), transform .8s cubic-bezier(.22,1.4,.35,1);
  filter: drop-shadow(5px 5px 0 rgba(0,0,0,.45));
}

.elder-token { top: 11vh; margin-left: -24px; background: var(--bubblegum); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.younger-token { top: 18vh; margin-left: 24px; background: var(--pool); border-radius: 50%; }
.sister-token span { position: absolute; inset: 8px; background: var(--stage-ink); border-radius: inherit; }
.elder-token span { clip-path: polygon(50% 35%, 67% 100%, 28% 100%); }

.room {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 10px solid var(--stage-ink);
}

.room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 50% 50%, rgba(255,244,214,.08), transparent 42%);
}

.room-half { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.elder-side { left: 0; background: linear-gradient(140deg, var(--stage-ink), var(--grape)); }
.younger-side { right: 0; background: linear-gradient(220deg, var(--grape), var(--stage-ink)); }

.room-door { background: var(--stage-ink); }
.curtain { position: absolute; top: 0; bottom: 0; width: 52%; z-index: 1; background-size: 70px 100%; animation: curtainBreathe 4s ease-in-out infinite alternate; }
.curtain-left { left: 0; background-image: repeating-linear-gradient(90deg, #24194a 0 26px, #3a2776 26px 42px, #170f2e 42px 70px); transform-origin: left center; }
.curtain-right { right: 0; background-image: repeating-linear-gradient(90deg, #170f2e 0 26px, #3a2776 26px 42px, #24194a 42px 70px); transform-origin: right center; animation-delay: .4s; }

.wordmark-wrap {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
  width: min(920px, 92vw);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 14vw, 12rem);
  letter-spacing: .02em;
  line-height: .78;
  color: var(--lemon);
  text-transform: lowercase;
  text-shadow: 8px 8px 0 var(--bubblegum), -8px -8px 0 var(--pool), 15px 18px 0 var(--stage-ink);
  clip-path: inset(0 50% 0 50%);
  animation: paintWord 1.6s .5s cubic-bezier(.21,.87,.25,1) forwards;
}

.wordmark i { font-style: normal; color: var(--cream); }
.subtitle { margin: 2rem auto 0; width: fit-content; padding: .7rem 1rem; color: var(--stage-ink); background: var(--cream); transform: rotate(-2deg); box-shadow: 8px 8px 0 var(--melon); font-weight: 800; }

.poster-letter { position: absolute; z-index: 2; top: 7vh; font: 900 clamp(11rem, 27vw, 28rem)/.8 var(--display); opacity: .18; color: var(--cream); }
.poster-left { left: -2vw; transform: rotate(-9deg); }
.poster-right { right: -2vw; transform: rotate(8deg); }

.knocker { position: absolute; top: 25vh; z-index: 6; width: 154px; height: 154px; border: 0; background: transparent; animation: knockTap 1.8s ease-in-out infinite; }
.moon-knocker { left: 19vw; color: var(--pool); }
.sun-knocker { right: 19vw; color: var(--lemon); animation-delay: .55s; }
.knocker .plate { position: absolute; inset: 30px; border-radius: 50%; background: var(--cream); border: 10px solid currentColor; box-shadow: 10px 12px 0 var(--stage-ink); }
.knocker .ring { position: absolute; inset: 0; border: 16px solid currentColor; border-radius: 50%; transform-origin: 50% 20%; box-shadow: inset 0 0 0 12px var(--stage-ink); }
.moon-knocker .ring { clip-path: circle(48% at 62% 50%); }
.sun-knocker .ring { clip-path: polygon(50% 0, 60% 28%, 90% 18%, 72% 48%, 100% 60%, 68% 66%, 75% 100%, 50% 78%, 25% 100%, 32% 66%, 0 60%, 28% 48%, 10% 18%, 40% 28%); }
.knocker.hit .ring { animation: knockTap .38s ease-in-out 2; }

.sister-label { position: absolute; z-index: 7; bottom: 20vh; padding: .7rem 1rem; max-width: 260px; background: var(--cream); color: var(--stage-ink); font-weight: 900; box-shadow: 8px 8px 0 var(--stage-ink); }
.tilt-left { left: 10vw; transform: rotate(5deg); border-left: 12px solid var(--bubblegum); }
.tilt-right { right: 8vw; transform: rotate(-7deg); border-right: 12px solid var(--pool); }

.paint-stroke { position: absolute; z-index: 4; top: 47%; height: 34px; width: 42vw; opacity: .8; }
.stroke-pink { right: 50%; background: repeating-linear-gradient(90deg, var(--bubblegum) 0 26px, var(--lemon) 26px 42px); transform: rotate(-2deg); }
.stroke-blue { left: 50%; background: repeating-linear-gradient(90deg, var(--pool) 0 26px, var(--cream) 26px 42px); transform: rotate(2deg); }
.prop { position: absolute; z-index: 8; font: 900 5rem var(--display); color: var(--melon); text-shadow: 5px 5px 0 var(--cream); }
.arrow-one { left: 7vw; bottom: 8vh; transform: rotate(-18deg); }
.arrow-two { right: 8vw; top: 10vh; transform: rotate(12deg); }

.room-map { background: linear-gradient(90deg, var(--cream) 0 49.6%, var(--stage-ink) 49.6% 50.4%, var(--lemon) 50.4%); color: var(--stage-ink); }
.room-title { position: absolute; top: 5vh; font: 900 clamp(4rem, 12vw, 12rem)/.85 var(--display); opacity: .9; }
.title-left { left: -2vw; color: var(--bubblegum); text-shadow: 8px 8px 0 var(--stage-ink); }
.title-right { right: -2vw; color: var(--pool); text-shadow: -8px 8px 0 var(--stage-ink); }
.map-board { position: absolute; top: 34vh; width: min(390px, 34vw); padding: 2rem; background: var(--cream); border: 8px solid var(--stage-ink); box-shadow: 16px 16px 0 var(--melon); }
.elder-map { left: 8vw; transform: rotate(-4deg); }
.younger-map { right: 8vw; transform: rotate(5deg); box-shadow: -16px 16px 0 var(--pool); }
.map-board h2, .note-card h2, .labyrinth-panel h2 { margin: 0 0 1rem; font: 900 clamp(1.9rem, 4vw, 4rem)/.9 var(--display); }
.map-board p, .note-card p, .labyrinth-panel p { font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.prop-button { border: 6px solid var(--stage-ink); background: var(--lemon); color: var(--stage-ink); padding: .75rem 1rem; font-weight: 1000; text-transform: uppercase; box-shadow: 7px 7px 0 var(--bubblegum); transform: rotate(-2deg); transition: transform .22s, box-shadow .22s, background .22s; }
.prop-button:hover, .prop-button.active { transform: rotate(2deg) translate(-2px,-2px); box-shadow: 11px 11px 0 var(--pool); background: var(--melon); }
.quest-trails { position: absolute; inset: 6vh 0; z-index: 2; pointer-events: none; }
.trail { fill: none; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 34 22; animation: trailRun 3s linear infinite; }
.trail-pink { stroke: var(--bubblegum); filter: drop-shadow(6px 6px 0 var(--stage-ink)); }
.trail-blue { stroke: var(--pool); filter: drop-shadow(-6px 6px 0 var(--stage-ink)); animation-direction: reverse; }
.speech-ribbon { position: absolute; z-index: 8; top: 71vh; padding: .9rem 1.4rem; background: var(--stage-ink); color: var(--cream); font-family: var(--soft); font-weight: 900; border-radius: 999px; box-shadow: 8px 8px 0 var(--lemon); transform-origin: center; animation: elasticRibbon 2.5s ease-in-out infinite; }
.ribbon-left { left: 14vw; }
.ribbon-right { right: 11vw; animation-delay: .7s; }
.checker-trapdoor { position: absolute; left: 50%; bottom: 7vh; width: 220px; height: 130px; transform: translateX(-50%) rotate(7deg); background: conic-gradient(var(--stage-ink) 25%, var(--cream) 0 50%, var(--stage-ink) 0 75%, var(--cream) 0) 0 0/44px 44px; border: 8px solid var(--melon); box-shadow: 12px 12px 0 var(--stage-ink); }

.room-keys { background: var(--grape); }
.room-keys::before { background: radial-gradient(circle at 10% 20%, var(--bubblegum) 0 12%, transparent 13%), radial-gradient(circle at 90% 70%, var(--pool) 0 14%, transparent 15%), var(--grape); }
.giant-crop { position: absolute; font: 900 clamp(8rem, 22vw, 20rem)/.8 var(--display); color: transparent; -webkit-text-stroke: 5px var(--cream); opacity: .35; }
.crop-left { left: -3vw; top: 4vh; transform: rotate(-8deg); }
.crop-right { right: -10vw; bottom: 1vh; transform: rotate(6deg); }
.key-parade { position: absolute; left: 50%; top: 42%; width: min(900px, 88vw); height: 220px; transform: translate(-50%, -50%); }
.key { position: absolute; width: 220px; height: 72px; animation: keyMarch 5s ease-in-out infinite; }
.key span { position: absolute; left: 0; top: 0; width: 72px; height: 72px; border-radius: 50%; border: 16px solid currentColor; background: var(--cream); }
.key i { position: absolute; left: 65px; top: 25px; width: 125px; height: 22px; background: currentColor; box-shadow: 0 14px 0 var(--stage-ink); }
.key b { position: absolute; right: 0; top: 47px; width: 42px; height: 42px; background: currentColor; clip-path: polygon(0 0, 100% 0, 100% 45%, 66% 45%, 66% 100%, 35% 100%, 35% 45%, 0 45%); }
.key-pink { color: var(--bubblegum); left: 1%; top: 20px; transform: rotate(8deg); }
.key-yellow { color: var(--lemon); left: 27%; top: 118px; animation-delay: .5s; transform: rotate(-10deg); }
.key-blue { color: var(--pool); left: 51%; top: 10px; animation-delay: 1s; transform: rotate(13deg); }
.key-melon { color: var(--melon); left: 69%; top: 130px; animation-delay: 1.5s; transform: rotate(-4deg); }
.note-card { position: absolute; padding: 1.6rem; width: min(360px, 34vw); color: var(--stage-ink); background: var(--cream); border: 8px solid var(--stage-ink); }
.elder-note { left: 8vw; bottom: 12vh; box-shadow: 15px 15px 0 var(--bubblegum); transform: rotate(3deg); }
.younger-note { right: 7vw; top: 13vh; box-shadow: -15px 15px 0 var(--pool); transform: rotate(-5deg); }
.kiwi { font-family: var(--soft); }
.ladder { position: absolute; top: 12vh; width: 75px; height: 68vh; background: repeating-linear-gradient(to bottom, transparent 0 38px, var(--cream) 38px 49px, transparent 49px 80px), linear-gradient(90deg, var(--lemon) 0 12px, transparent 12px 63px, var(--lemon) 63px 75px); filter: drop-shadow(9px 9px 0 var(--stage-ink)); }
.ladder-left { left: 3vw; transform: rotate(-12deg); }
.ladder-right { right: 4vw; transform: rotate(10deg); }

.room-labyrinth { background: var(--cream); color: var(--stage-ink); }
.labyrinth-panel { position: absolute; left: 6vw; top: 9vh; z-index: 5; width: min(440px, 38vw); padding: 1.5rem; background: var(--lemon); border: 8px solid var(--stage-ink); box-shadow: 14px 14px 0 var(--bubblegum); transform: rotate(-3deg); }
.pattern-maze { position: absolute; right: 6vw; top: 11vh; width: min(660px, 48vw); height: 76vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px; transform: rotate(2deg); }
.maze-cell { border: 8px solid var(--stage-ink); box-shadow: 8px 8px 0 var(--stage-ink); transition: transform .5s, border-radius .5s, filter .5s; }
.maze-cell.pink { background: var(--bubblegum); clip-path: polygon(0 0, 100% 14%, 86% 100%, 7% 82%); }
.maze-cell.blue { background: var(--pool); border-radius: 50%; }
.maze-cell.yellow { background: var(--lemon); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.maze-cell.cream { background: var(--cream); background-image: radial-gradient(var(--melon) 0 5px, transparent 6px); background-size: 26px 26px; }
.maze-cell.checker { background: conic-gradient(var(--stage-ink) 25%, var(--cream) 0 50%, var(--stage-ink) 0 75%, var(--cream) 0) 0 0/38px 38px; }
.maze-cell.stripe { background: repeating-linear-gradient(135deg, var(--bubblegum) 0 18px, var(--lemon) 18px 36px, var(--pool) 36px 54px); }
.maze-cell.melon { background: var(--melon); border-radius: 36px 0 36px 0; }
.maze-cell.grape { background: var(--grape); background-image: radial-gradient(var(--cream) 0 5px, transparent 6px); background-size: 32px 32px; }
.pattern-maze.scramble .maze-cell:nth-child(odd) { transform: translateY(18px) rotate(9deg); filter: hue-rotate(70deg); }
.pattern-maze.scramble .maze-cell:nth-child(even) { transform: translateY(-18px) rotate(-7deg); border-radius: 50%; }
.bubble { position: absolute; padding: 1rem 1.3rem; border: 6px solid var(--stage-ink); background: var(--cream); font-weight: 1000; border-radius: 50% 40% 55% 45%; box-shadow: 9px 9px 0 var(--melon); }
.bubble-a { left: 15vw; bottom: 18vh; color: var(--bubblegum); transform: rotate(9deg); }
.bubble-b { left: 38vw; bottom: 8vh; color: var(--pool); transform: rotate(-11deg); }
.paper-doll { position: absolute; bottom: 16vh; width: 88px; height: 150px; background: var(--stage-ink); clip-path: polygon(50% 0, 70% 20%, 100% 20%, 76% 42%, 88% 100%, 55% 82%, 50% 58%, 45% 82%, 12% 100%, 24% 42%, 0 20%, 30% 20%); }
.doll-left { left: 5vw; filter: drop-shadow(8px 8px 0 var(--bubblegum)); }
.doll-right { right: 4vw; filter: drop-shadow(-8px 8px 0 var(--pool)); transform: scaleX(-1); }

.room-crown { background: radial-gradient(circle at center, var(--grape), var(--stage-ink) 65%); }
.final-title { position: absolute; left: 50%; top: 7vh; transform: translateX(-50%); width: 100%; text-align: center; font: 900 clamp(3.2rem, 10vw, 10rem)/.85 var(--display); color: var(--lemon); text-shadow: 8px 8px 0 var(--bubblegum), -8px 14px 0 var(--pool); }
.shared-emblem { position: absolute; left: 50%; top: 49%; width: 340px; height: 340px; transform: translate(-50%, -50%); filter: drop-shadow(18px 22px 0 rgba(0,0,0,.45)); animation: emblemPulse 3s ease-in-out infinite; }
.emblem-triangle { position: absolute; inset: 42px 104px 36px 0; background: var(--bubblegum); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.emblem-circle { position: absolute; inset: 52px 0 42px 100px; background: var(--pool); border-radius: 50%; mix-blend-mode: screen; }
.crown-top { position: absolute; left: 69px; top: 0; width: 204px; height: 92px; background: var(--lemon); clip-path: polygon(0 100%, 0 36%, 27% 65%, 50% 0, 73% 65%, 100% 36%, 100% 100%); border-bottom: 12px solid var(--stage-ink); }
.final-copy { position: absolute; padding: .8rem 1.1rem; background: var(--cream); color: var(--stage-ink); border: 6px solid var(--stage-ink); font-weight: 1000; box-shadow: 8px 8px 0 var(--melon); }
.elder-final { left: 15vw; top: 42vh; transform: rotate(-8deg); }
.middle-final { left: 50%; bottom: 10vh; transform: translateX(-50%) rotate(2deg); }
.younger-final { right: 14vw; top: 50vh; transform: rotate(7deg); }
.open-doors { position: absolute; right: 8vw; bottom: 10vh; z-index: 5; }
.confetti-field { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, var(--lemon) 0 5px, transparent 6px), radial-gradient(circle at 75% 32%, var(--bubblegum) 0 6px, transparent 7px), radial-gradient(circle at 55% 76%, var(--pool) 0 5px, transparent 6px), radial-gradient(circle at 30% 82%, var(--melon) 0 7px, transparent 8px); background-size: 85px 95px, 115px 120px, 95px 80px, 140px 130px; opacity: .25; animation: confettiDrift 8s linear infinite; }

.room-dots { position: fixed; z-index: 38; right: 18px; top: 50%; display: grid; gap: 12px; transform: translateY(-50%); }
.dot { width: 36px; height: 36px; border: 4px solid var(--stage-ink); border-radius: 50%; background: var(--cream); color: var(--stage-ink); box-shadow: 5px 5px 0 var(--bubblegum); font-weight: 1000; transition: transform .2s, background .2s; }
.dot.active { background: var(--lemon); transform: translateX(-7px) rotate(12deg); box-shadow: 5px 5px 0 var(--pool); }
.dot span { display: block; transform: translateY(-1px); }

.inverted { filter: hue-rotate(145deg) saturate(1.35); }
.zip-open .seam-path { filter: drop-shadow(18px 0 0 var(--lemon)) drop-shadow(-18px 0 0 var(--pool)); }
.swap .elder-map { transform: translateX(42vw) rotate(7deg); }
.swap .younger-map { transform: translateX(-42vw) rotate(-7deg); }
.swap .key { animation-duration: 1.7s; }
.joined .shared-emblem { animation-duration: 1s; }

@keyframes paintWord { to { clip-path: inset(0 0 0 0); } }
@keyframes curtainBreathe { to { transform: scaleX(.92); filter: brightness(1.15); } }
@keyframes knockTap { 0%, 68%, 100% { transform: rotate(0) translateY(0); } 8% { transform: rotate(-8deg) translateY(10px); } 16% { transform: rotate(7deg) translateY(-3px); } }
@keyframes seamWobble { 0% { clip-path: polygon(44% 0, 68% 8%, 43% 17%, 61% 26%, 36% 38%, 64% 49%, 40% 61%, 58% 73%, 33% 86%, 55% 100%, 0 100%, 0 0); } 100% { clip-path: polygon(56% 0, 34% 9%, 57% 17%, 39% 27%, 62% 39%, 37% 50%, 60% 62%, 38% 75%, 63% 87%, 45% 100%, 0 100%, 0 0); } }
@keyframes trailRun { to { stroke-dashoffset: -112; } }
@keyframes elasticRibbon { 0%, 100% { transform: scaleX(1) rotate(-2deg); } 50% { transform: scaleX(1.18) rotate(3deg); } }
@keyframes keyMarch { 0%, 100% { translate: 0 0; } 50% { translate: 30px -24px; } }
@keyframes emblemPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0); } 50% { transform: translate(-50%, -50%) scale(1.08) rotate(4deg); } }
@keyframes confettiDrift { to { background-position: 80px 100px, -120px 90px, 70px -80px, -90px -100px; } }

@media (max-width: 760px) {
  .center-seam { width: 62px; }
  .knocker { width: 108px; height: 108px; top: 22vh; }
  .moon-knocker { left: 8vw; }
  .sun-knocker { right: 8vw; }
  .subtitle { font-size: .85rem; }
  .map-board, .note-card, .labyrinth-panel { width: 78vw; left: 8vw; right: auto; }
  .elder-map { top: 23vh; }
  .younger-map { top: 55vh; }
  .pattern-maze { width: 86vw; height: 52vh; right: 7vw; top: 39vh; }
  .key-parade { transform: translate(-50%, -50%) scale(.65); }
  .shared-emblem { transform: translate(-50%, -50%) scale(.75); }
  .final-copy { display: none; }
}