:root {
  --moon-grape: #6B4DFF;
  --bubblegum-pink: #FF5DBE;
  --lemon-star: #FFE45C;
  --fizzy-cyan: #43E7FF;
  --melon-pop: #7CFF8B;
  --cream-soda: #FFF4D6;
  --licorice-plum: #24153F;
  --white-gloss: rgba(255, 255, 255, 0.76);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--licorice-plum);
  background:
    radial-gradient(circle at 18% 8%, rgba(67, 231, 255, 0.42) 0 10rem, transparent 20rem),
    radial-gradient(circle at 88% 18%, rgba(255, 93, 190, 0.45) 0 12rem, transparent 23rem),
    linear-gradient(180deg, #FFF4D6 0%, #fff0fb 31%, #e7fbff 62%, #FFF4D6 100%);
  font-family: "Fredoka", Inter, ui-rounded, system-ui, sans-serif;
}

.sherbet-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.continent {
  position: absolute;
  border-radius: 48% 52% 44% 56% / 58% 45% 55% 42%;
  filter: blur(14px);
  opacity: 0.64;
  box-shadow: inset 1.5rem 1.5rem 2rem rgba(255,255,255,0.55), 0 2rem 4rem rgba(36,21,63,0.12);
  animation: floaty 9s ease-in-out infinite;
}

.continent-a { width: 22rem; height: 15rem; left: -5rem; top: 20vh; background: #FF5DBE; }
.continent-b { width: 28rem; height: 18rem; right: -8rem; top: 48vh; background: #43E7FF; animation-delay: -3s; }
.continent-c { width: 19rem; height: 20rem; left: 10vw; top: 78vh; background: #7CFF8B; animation-delay: -6s; }

.sprinkles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, #FF5DBE 0 3px, transparent 4px),
    radial-gradient(circle, #FFE45C 0 2px, transparent 3px),
    radial-gradient(circle, #43E7FF 0 2px, transparent 3px);
  background-size: 9rem 12rem, 13rem 8rem, 10rem 10rem;
  background-position: 1rem 2rem, 5rem 1rem, 8rem 6rem;
  opacity: 0.32;
}

.quest-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.rope-stage {
  position: absolute;
  top: 18vh;
  left: 50%;
  width: min(28vw, 19rem);
  height: calc(100% - 10vh);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

.quest-rope { width: 100%; height: 100%; overflow: visible; }
.rope-shadow, .rope-core { fill: none; stroke-linecap: round; }
.rope-shadow { stroke: rgba(36, 21, 63, 0.22); stroke-width: 38; transform: translate(10px, 16px); }
.rope-core { stroke: url(#ropeCandy); stroke-width: 28; filter: drop-shadow(0 1rem 0 rgba(36,21,63,0.14)); }

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(18rem, 34rem) minmax(5rem, 14rem) minmax(18rem, 34rem) minmax(1rem, 1fr);
  align-items: center;
  padding: 8vh 0;
  isolation: isolate;
  filter: blur(5px) saturate(0.76);
  opacity: 0.62;
  transform: scale(0.965);
  transition: filter 700ms ease, opacity 700ms ease, transform 700ms cubic-bezier(.2,1.6,.3,1);
}

.chapter.active {
  filter: blur(0) saturate(1.15);
  opacity: 1;
  transform: scale(1);
}

.hero-chapter { min-height: 112vh; padding-top: 4vh; }
.left .story-bubble, .left .orb-note { grid-column: 2; }
.left .prop { grid-column: 4; }
.right .story-bubble, .right .orb-note { grid-column: 4; }
.right .prop { grid-column: 2; }
.finale .story-bubble { grid-column: 2 / 4; }
.finale .prop { grid-column: 4; }

.chapter-label {
  position: absolute;
  top: 12vh;
  left: calc(50% - 4.2rem);
  z-index: 5;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font: 800 clamp(1.1rem, 2.4vw, 2rem)/0.86 "Barlow Condensed", Impact, sans-serif;
  color: var(--moon-grape);
  text-shadow: 0.14rem 0.14rem 0 var(--lemon-star);
}

.puffy-card, .story-bubble {
  position: relative;
  border: 0.28rem solid var(--licorice-plum);
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.9) 0 0.9rem, transparent 4.8rem),
    linear-gradient(145deg, #FFF4D6, #ffffff 45%, #ffe5f6);
  border-radius: 2.4rem 3rem 2.6rem 3.2rem;
  box-shadow: 0 1rem 0 rgba(36,21,63,0.17), inset -0.7rem -0.8rem 1.3rem rgba(107,77,255,0.12), inset 0.8rem 0.8rem 1.4rem rgba(255,255,255,0.8);
}

.hero-ticket {
  grid-column: 2 / 5;
  justify-self: center;
  width: min(82vw, 58rem);
  min-height: 24rem;
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  transform-style: preserve-3d;
}

.ticket-notch { position: absolute; top: 42%; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--cream-soda); border: 0.28rem solid var(--licorice-plum); }
.notch-left { left: -2.5rem; }
.notch-right { right: -2.5rem; }
.jp-note, .orb-note { font-family: "Noto Sans JP", "Fredoka", sans-serif; font-weight: 700; color: var(--moon-grape); }
.hero-ticket h1 {
  margin: 0;
  font: 900 clamp(4.2rem, 15vw, 10.5rem)/0.78 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: -0.035em;
  color: var(--bubblegum-pink);
  text-shadow: 0.08em 0.08em 0 var(--lemon-star), 0.14em 0.14em 0 var(--moon-grape);
}
.hero-copy { max-width: 38rem; margin: 2rem auto 0; font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.4; }
.ticket-stamps { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 2rem; }
.ticket-stamps span {
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--melon-pop);
  border: 0.18rem solid var(--licorice-plum);
  box-shadow: 0 0.35rem 0 rgba(36,21,63,0.22);
  font-weight: 700;
}

.node {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: clamp(4.8rem, 8vw, 7rem);
  height: clamp(4.8rem, 8vw, 7rem);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 48% 52% 55% 45%;
  border: 0.28rem solid var(--licorice-plum);
  background: radial-gradient(circle at 30% 22%, #fff 0 0.7rem, transparent 2.1rem), linear-gradient(145deg, #FF5DBE, #FFE45C);
  box-shadow: 0 0.8rem 0 rgba(36,21,63,0.22), inset -0.55rem -0.55rem 0 rgba(107,77,255,0.18);
  transition: transform 550ms cubic-bezier(.2,1.8,.25,1);
}
.chapter.active .node { transform: translate(-50%, -50%) scale(1.14) rotate(-5deg); animation: nodePulse 1.8s ease-in-out infinite; }
.node span { font: 900 2rem/1 "Barlow Condensed", Impact, sans-serif; color: var(--licorice-plum); }
.node-hero { top: 74%; }

.story-bubble {
  z-index: 3;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  max-width: 32rem;
  transition: transform 450ms ease;
}
.story-bubble::after {
  content: "";
  position: absolute;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: inherit;
  border: inherit;
  bottom: -1.8rem;
  right: 3rem;
  z-index: -1;
}
.story-bubble h2 { margin: 0.5rem 0 0.8rem; font: 800 clamp(2.7rem, 6vw, 5.5rem)/0.84 "Barlow Condensed", Impact, sans-serif; color: var(--moon-grape); text-transform: uppercase; }
.story-bubble p { margin: 0; font-size: clamp(1rem, 2vw, 1.24rem); line-height: 1.45; }
.clue-token {
  display: inline-grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1.25rem;
  background: var(--fizzy-cyan);
  border: 0.18rem solid var(--licorice-plum);
  box-shadow: 0 0.35rem 0 rgba(36,21,63,0.2);
  font-size: 1.5rem;
}
.clue-button, .moon-envelope {
  margin-top: 1.35rem;
  border: 0.2rem solid var(--licorice-plum);
  border-radius: 999px;
  padding: 0.75rem 1.15rem;
  background: linear-gradient(135deg, #FFE45C, #FF5DBE);
  color: var(--licorice-plum);
  box-shadow: 0 0.45rem 0 rgba(36,21,63,0.2), inset 0 0.4rem 0 rgba(255,255,255,0.35);
  font: 700 1rem/1 "Fredoka", sans-serif;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.clue-button:hover, .moon-envelope:hover { transform: translateY(-0.18rem) scale(1.04); }
.story-bubble.unlocked { background: radial-gradient(circle at 20% 18%, #fff 0 1rem, transparent 4rem), linear-gradient(145deg, #7CFF8B, #FFF4D6 55%, #43E7FF); }
.story-bubble.unlocked .clue-button::after { content: " ✓"; }

.prop {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: clamp(15rem, 28vw, 27rem);
  height: clamp(15rem, 28vw, 27rem);
  filter: drop-shadow(1.2rem 1.5rem 0 rgba(36,21,63,0.17));
  animation: floaty 5.5s ease-in-out infinite;
}
.prop::before { content: ""; position: absolute; inset: 8%; border-radius: inherit; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,0.9) 0 1rem, transparent 4.8rem); z-index: 2; pointer-events: none; }
.prop-dumpling { border-radius: 54% 46% 50% 50% / 62% 62% 38% 38%; background: linear-gradient(145deg, #FF5DBE, #FFE45C); border: 0.28rem solid var(--licorice-plum); }
.prop-dumpling span { position: absolute; inset: 54% 18% 16%; border-radius: 0 0 8rem 8rem; background: rgba(36,21,63,0.12); }
.prop-bamboo { display: flex; gap: 0.8rem; justify-content: center; align-items: center; }
.prop-bamboo b { display: block; width: 29%; height: 85%; border-radius: 999px; background: linear-gradient(90deg, #7CFF8B, #FFF4D6 45%, #7CFF8B); border: 0.28rem solid var(--licorice-plum); box-shadow: inset -0.5rem -0.8rem 0 rgba(36,21,63,0.12); transform: rotate(8deg); }
.prop-bamboo b:nth-child(2) { height: 100%; background: linear-gradient(90deg, #43E7FF, #FFF4D6 45%, #7CFF8B); transform: rotate(-5deg); }
.prop-envelope { border-radius: 2.4rem; background: linear-gradient(145deg, #43E7FF, #6B4DFF); border: 0.28rem solid var(--licorice-plum); transform: rotate(-8deg); }
.prop-envelope span, .prop-envelope::after { position: absolute; content: ""; inset: 20% 10%; border: 0.25rem solid var(--cream-soda); border-left: 0; border-top: 0; transform: rotate(45deg); border-radius: 0.3rem; }
.prop-key { border-radius: 50%; background: radial-gradient(circle at 36% 36%, #FFF4D6 0 12%, #FFE45C 13% 31%, #24153F 32% 37%, #FFE45C 38%); border: 0.28rem solid var(--licorice-plum); }
.prop-key span { position: absolute; width: 46%; height: 18%; right: -18%; top: 42%; border-radius: 999px; background: #FFE45C; border: 0.28rem solid var(--licorice-plum); box-shadow: 2.4rem 0 0 -0.3rem #FF5DBE, 2.4rem 0 0 0 var(--licorice-plum); }
.prop-telescope { border-radius: 45% 55% 50% 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95) 0 1.2rem, transparent 4rem), linear-gradient(145deg, #6B4DFF, #43E7FF); border: 0.28rem solid var(--licorice-plum); }
.prop-telescope span { position: absolute; width: 74%; height: 34%; left: 16%; top: 36%; border-radius: 999px; border: 0.28rem solid var(--licorice-plum); background: linear-gradient(90deg, #FF5DBE, #FFF4D6, #43E7FF); transform: rotate(-15deg); }
.prop-telescope i { position: absolute; width: 38%; height: 38%; right: 3%; top: 28%; border-radius: 50%; border: 0.28rem solid var(--licorice-plum); background: radial-gradient(circle, #FFF4D6 0 25%, #43E7FF 27% 52%, #6B4DFF 55%); }

.orb-note {
  z-index: 3;
  justify-self: center;
  align-self: end;
  margin: 0;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: rgba(255, 244, 214, 0.72);
  border: 0.16rem solid var(--fizzy-cyan);
  box-shadow: 0 0.8rem 1.5rem rgba(36,21,63,0.12);
}

.crescent { position: absolute; width: 10rem; height: 10rem; border-radius: 50%; background: #FFE45C; box-shadow: inset -1rem -1rem 0 rgba(36,21,63,0.12), 0 1rem 0 rgba(36,21,63,0.12); }
.crescent::after { content: ""; position: absolute; width: 8.2rem; height: 8.2rem; border-radius: 50%; background: #FFF4D6; left: 2.6rem; top: -0.2rem; }
.crescent-hero { right: 8vw; top: 16vh; transform: rotate(-20deg); animation: floaty 6s ease-in-out infinite; }
.bubble-cluster { position: absolute; pointer-events: none; }
.bubble-cluster i { position: absolute; border-radius: 50%; border: 0.18rem solid var(--fizzy-cyan); background: rgba(255,255,255,0.32); box-shadow: inset 0.35rem 0.35rem 0 rgba(255,255,255,0.68); }
.cluster-hero { left: 8vw; top: 58vh; width: 14rem; height: 12rem; }
.cluster-final { right: 12vw; bottom: 8vh; width: 16rem; height: 13rem; }
.bubble-cluster i:nth-child(1) { width: 5rem; height: 5rem; left: 0; top: 2rem; }
.bubble-cluster i:nth-child(2) { width: 2.8rem; height: 2.8rem; left: 6rem; top: 0; }
.bubble-cluster i:nth-child(3) { width: 4rem; height: 4rem; left: 9rem; top: 6rem; }
.bubble-cluster i:nth-child(4) { width: 2.2rem; height: 2.2rem; left: 4rem; top: 9rem; }
.secret-note { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 500ms ease, opacity 500ms ease, margin-top 500ms ease; }
.secret-note.revealed { max-height: 8rem; opacity: 1; margin-top: 1rem; }
.final-bubble.opened { background: radial-gradient(circle at 20% 18%, #fff 0 1rem, transparent 4rem), linear-gradient(145deg, #FFE45C, #FFF4D6 48%, #FF5DBE); }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50% { transform: translateY(-1.2rem) rotate(calc(var(--tilt, 0deg) + 3deg)); }
}
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0.8rem 0 rgba(36,21,63,0.22), 0 0 0 0 rgba(67,231,255,0.45), inset -0.55rem -0.55rem 0 rgba(107,77,255,0.18); }
  50% { box-shadow: 0 0.8rem 0 rgba(36,21,63,0.22), 0 0 0 1.2rem rgba(67,231,255,0), inset -0.55rem -0.55rem 0 rgba(107,77,255,0.18); }
}

@media (max-width: 820px) {
  .chapter { grid-template-columns: 1rem 1fr 5.5rem 1fr 1rem; min-height: 112vh; }
  .hero-ticket, .left .story-bubble, .right .story-bubble, .finale .story-bubble { grid-column: 2 / 5; }
  .left .prop, .right .prop, .finale .prop { grid-column: 2 / 5; grid-row: 1; align-self: end; opacity: 0.54; }
  .story-bubble { margin-top: 18rem; }
  .chapter-label { left: 1rem; top: 8vh; }
  .rope-stage { left: 50%; width: 14rem; opacity: 0.74; }
  .node { left: 50%; }
  .crescent-hero { right: -2rem; }
}