:root {
  --moon-cream: #FFF7D9;
  --clover-green: #6FBF73;
  --burrow-umber: #5A3B25;
  --carrot-lantern: #F28C38;
  --berry-dusk: #5C4B8A;
  --pond-blue: #8FD6D8;
  --mushroom-rose: #D96C8C;
  --ink-root: #261E19;
  --pollen-gold: #F6D36B;
  --fraunces: Georgia, "Times New Roman", serif;
  --nunito: "Trebuchet MS", Verdana, sans-serif;
  --amatic: "Comic Sans MS", "Bradley Hand", cursive;
  --cormorant: Garamond, Georgia, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink-root);
  font-family: var(--nunito);
  background:
    radial-gradient(circle at 50% -10%, rgba(143, 214, 216, .55), transparent 38rem),
    linear-gradient(180deg, #261E19 0%, #5C4B8A 16%, #FFF7D9 44%, #8FD6D8 73%, #5A3B25 100%);
}

button, a { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(38,30,25,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(255,247,217,.8) 0 1px, transparent 1.8px),
    linear-gradient(90deg, rgba(90,59,37,.18), rgba(255,247,217,.14), rgba(92,75,138,.14));
  background-size: 19px 23px, 31px 29px, 100% 100%;
  mix-blend-mode: multiply;
}

.paint-bloom {
  position: fixed;
  width: 42vmax;
  height: 42vmax;
  border-radius: 44% 56% 62% 38% / 51% 44% 56% 49%;
  filter: blur(18px);
  opacity: .22;
  pointer-events: none;
  z-index: 1;
  animation: floatBloom 18s ease-in-out infinite alternate;
}

.bloom-one { left: -12vmax; top: 18vh; background: var(--mushroom-rose); }
.bloom-two { right: -13vmax; top: 55vh; background: var(--pond-blue); animation-delay: -6s; }

.field-nav {
  position: fixed;
  right: 1.2rem;
  top: 1rem;
  z-index: 30;
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 23rem;
}

.nav-charm {
  color: var(--ink-root);
  text-decoration: none;
  background: rgba(255,247,217,.82);
  border: 1px solid rgba(90,59,37,.32);
  border-radius: 999px 999px 999px 32px;
  padding: .55rem .82rem;
  box-shadow: 0 7px 0 rgba(90,59,37,.12), 0 15px 30px rgba(38,30,25,.15);
  font-family: var(--amatic);
  font-size: 1.08rem;
  transform: rotate(var(--tilt, -2deg));
}
.nav-charm:nth-child(2) { --tilt: 3deg; }
.nav-charm:nth-child(3) { --tilt: -5deg; }
.nav-charm:nth-child(4) { --tilt: 2deg; }
.carrot-tag { background: color-mix(in srgb, var(--carrot-lantern) 36%, var(--moon-cream)); }

.trail-progress {
  position: fixed;
  left: 1.35rem;
  top: 18vh;
  width: .36rem;
  height: 64vh;
  border-radius: 999px;
  z-index: 30;
  background: linear-gradient(var(--moon-cream), var(--pollen-gold), var(--pond-blue));
  box-shadow: 0 0 0 4px rgba(255,247,217,.2), inset 0 0 10px rgba(38,30,25,.2);
}

.traveler {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2.3rem;
  height: 2.3rem;
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 45% 45%;
  background: var(--moon-cream);
  border: 2px solid var(--burrow-umber);
  box-shadow: 0 8px 18px rgba(38,30,25,.25);
}
.traveler::before, .traveler::after {
  content: "";
  position: absolute;
  top: -1.15rem;
  width: .62rem;
  height: 1.55rem;
  border-radius: 60% 60% 42% 42%;
  background: var(--moon-cream);
  border: 2px solid var(--burrow-umber);
  z-index: -1;
}
.traveler::before { left: .32rem; transform: rotate(-10deg); }
.traveler::after { right: .32rem; transform: rotate(13deg); }
.traveler span {
  position: absolute;
  width: .24rem;
  height: .24rem;
  border-radius: 50%;
  background: var(--ink-root);
  left: 50%;
  bottom: .5rem;
  transform: translateX(-50%);
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(5rem, 8vw, 7rem) clamp(1.25rem, 6vw, 6rem);
}

.scene::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -3;
  opacity: var(--bloom-opacity, .7);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,247,217,.58), transparent 22rem),
    radial-gradient(circle at 76% 35%, rgba(246,211,107,.26), transparent 18rem),
    radial-gradient(circle at 45% 82%, rgba(111,191,115,.25), transparent 20rem);
  filter: blur(2px);
  transform: scale(1.02);
}

.burrow-scene {
  display: grid;
  place-items: center;
  color: var(--moon-cream);
  background:
    radial-gradient(circle at 50% 78%, #5A3B25 0 5rem, transparent 5.2rem),
    radial-gradient(circle at 48% 88%, #261E19 0 31vw, #5A3B25 31.5vw 47vw, transparent 47.5vw),
    linear-gradient(180deg, #261E19, #3e2d44 55%, #5A3B25);
}

.burrow-mask {
  position: absolute;
  left: 50%;
  bottom: -23vmin;
  width: var(--mask-size, 44vmin);
  height: var(--mask-size, 44vmin);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 47%, rgba(38,30,25,.45) 49%, #261E19 65%);
  box-shadow: 0 0 0 120vmax rgba(38,30,25,.84), inset 0 0 4rem rgba(0,0,0,.9);
  z-index: 5;
  transition: width .8s ease, height .8s ease, opacity .8s ease;
}
.burrow-scene.awake .burrow-mask { --mask-size: 118vmax; opacity: .22; }

.burrow-rings span {
  position: absolute;
  left: 50%;
  bottom: -13rem;
  width: calc(34vmin + var(--i, 0) * 8vmin);
  height: calc(34vmin + var(--i, 0) * 8vmin);
  border: 1.2rem solid rgba(90,59,37,.72);
  border-radius: 50%;
  transform: translateX(-50%);
  filter: blur(.5px);
}
.burrow-rings span:nth-child(1) { --i: 1; }
.burrow-rings span:nth-child(2) { --i: 2; border-color: rgba(246,211,107,.18); }
.burrow-rings span:nth-child(3) { --i: 3; border-color: rgba(255,247,217,.13); }

.opening-title {
  position: relative;
  z-index: 7;
  text-align: center;
  max-width: 58rem;
  transform: translateY(2rem);
  animation: titleWake 2.5s ease both;
}

h1, h2 {
  margin: 0;
  font-family: var(--fraunces);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .92;
}
h1 {
  font-size: clamp(4.5rem, 17vw, 14rem);
  text-shadow: 0 .08em 0 rgba(90,59,37,.72), 0 0 40px rgba(246,211,107,.34);
}
h2 { font-size: clamp(2.7rem, 8vw, 7.2rem); color: var(--berry-dusk); }

p { font-size: clamp(1rem, 1.45vw, 1.26rem); line-height: 1.7; }
.scribble, .chapter-mark, .map-scrap, .receipt-stamp { font-family: var(--amatic); }
.scribble { font-size: clamp(1.35rem, 3vw, 2.3rem); color: var(--pollen-gold); }
.moon-line, blockquote { font-family: var(--cormorant); font-size: clamp(1.35rem, 2.7vw, 2.2rem); font-style: italic; }

.hidden-ears { position: absolute; bottom: 19vh; left: 18%; width: 4rem; height: 7rem; opacity: .62; animation: twitch 4s infinite; }
.hidden-ears i { position: absolute; bottom: 0; width: 1.45rem; height: 6rem; background: var(--moon-cream); border-radius: 60% 60% 40% 40%; transform-origin: bottom; }
.hidden-ears i:first-child { transform: rotate(-13deg); left: .8rem; }
.hidden-ears i:last-child { transform: rotate(16deg); right: .6rem; }

.sparkles span {
  position: absolute;
  width: .48rem;
  height: .48rem;
  background: var(--pollen-gold);
  border-radius: 50%;
  box-shadow: 0 0 14px var(--pollen-gold);
  animation: sparkle 2.8s ease-in-out infinite;
  z-index: 8;
}

.grass::before, .grass::after, .fern-curtain::before, .fern-curtain::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: 16rem;
  background: repeating-linear-gradient(82deg, transparent 0 19px, rgba(111,191,115,.58) 20px 24px, transparent 25px 43px);
  clip-path: polygon(0 100%, 2% 28%, 5% 100%, 8% 38%, 11% 100%, 14% 18%, 17% 100%, 21% 42%, 24% 100%, 27% 24%, 30% 100%, 33% 35%, 36% 100%, 40% 27%, 44% 100%, 48% 36%, 52% 100%, 55% 25%, 59% 100%, 63% 41%, 67% 100%, 70% 23%, 74% 100%, 78% 33%, 82% 100%, 86% 24%, 90% 100%, 94% 34%, 100% 100%);
  transform-origin: bottom;
  animation: grassSway 5s ease-in-out infinite alternate;
}
.grass::after { height: 11rem; opacity: .55; animation-delay: -2s; }
.foreground::before { height: 23rem; background: repeating-linear-gradient(84deg, transparent 0 24px, rgba(38,30,25,.72) 26px 31px, transparent 32px 57px); }

.root-door { background: linear-gradient(180deg, #5A3B25, #FFF7D9 58%, #6FBF73); }
.clover-field { background: radial-gradient(circle at 18% 21%, rgba(255,247,217,.92), transparent 22rem), linear-gradient(135deg, #FFF7D9, #bfe6a8 42%, #6FBF73); }
.lantern-causeway { background: linear-gradient(180deg, #5C4B8A, #724a74 35%, #5A3B25 100%); color: var(--moon-cream); }
.mushroom-bridge { background: radial-gradient(circle at 80% 10%, rgba(217,108,140,.38), transparent 24rem), linear-gradient(180deg, #FFF7D9, #8FD6D8 65%, #5A3B25); }
.moon-pond { background: radial-gradient(circle at 72% 15%, #FFF7D9 0 4rem, rgba(255,247,217,.28) 4.2rem 9rem, transparent 9.5rem), linear-gradient(180deg, #261E19, #5C4B8A 42%, #8FD6D8); color: var(--moon-cream); }
.warren { background: radial-gradient(circle at 50% 78%, rgba(246,211,107,.35), transparent 23rem), linear-gradient(180deg, #5C4B8A, #261E19 58%, #5A3B25); color: var(--moon-cream); }

.vellum {
  position: relative;
  z-index: 4;
  max-width: 44rem;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  background: rgba(255,247,217,.83);
  color: var(--ink-root);
  border: 1px solid rgba(90,59,37,.28);
  border-radius: 3rem 1.3rem 3.5rem 1.7rem;
  box-shadow: 0 24px 80px rgba(38,30,25,.22), inset 0 0 36px rgba(246,211,107,.2);
  backdrop-filter: blur(4px);
}
.vellum::after {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 2px dashed rgba(90,59,37,.22);
  border-radius: inherit;
  pointer-events: none;
}
.leaf-plaque { margin-left: auto; margin-top: 8vh; clip-path: ellipse(64% 48% at 50% 50%); padding: 4.6rem 5rem; }
.seed-packet { margin: 8vh auto 0 7vw; transform: rotate(-2deg); }
.ribbon-banner { margin: 4vh 6vw 0 auto; border-radius: 1.2rem; transform: rotate(1deg); }
.toll-receipt { margin: 8vh auto 0 8vw; max-width: 38rem; transform: rotate(2deg); }
.pond-label { margin: 5vh auto 0; text-align: center; background: rgba(143,214,216,.74); }
.wish-scroll { margin: 9vh auto 0; text-align: center; }
.chapter-mark { color: var(--carrot-lantern); font-size: 1.45rem; letter-spacing: .04em; }

.drift-in { opacity: .55; transform: translateY(35px) rotate(var(--r, 0deg)); transition: opacity .9s ease, transform .9s ease; }
.drift-in.in-view { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }

.root-arch {
  position: absolute;
  left: 8%; top: 10%;
  width: min(42vw, 33rem); height: 72vh;
  border-radius: 60% 60% 9% 9%;
  border: 2.2rem solid rgba(90,59,37,.86);
  border-bottom: 0;
  box-shadow: inset 0 0 4rem rgba(38,30,25,.8), 0 2rem 3rem rgba(38,30,25,.24);
}
.door-glow { position: absolute; inset: 18% 14% 0; border-radius: 55% 55% 8% 8%; background: radial-gradient(circle at 50% 75%, rgba(246,211,107,.82), rgba(242,140,56,.18) 45%, rgba(38,30,25,.88)); }
.root { position: absolute; width: .8rem; background: var(--burrow-umber); border-radius: 999px; transform-origin: top; }
.r1 { height: 55%; left: 5%; top: 10%; transform: rotate(24deg); }
.r2 { height: 62%; right: 12%; top: 2%; transform: rotate(-26deg); }
.r3 { height: 40%; left: 45%; top: -4%; transform: rotate(5deg); }
.r4 { height: 35%; right: -4%; top: 28%; transform: rotate(-48deg); }
.r5 { height: 48%; left: -2%; top: 31%; transform: rotate(42deg); }

.ink-button {
  border: 0;
  color: var(--moon-cream);
  background: var(--ink-root);
  padding: .8rem 1.25rem;
  border-radius: 999px 999px 999px 14px;
  box-shadow: 0 8px 0 rgba(90,59,37,.35);
  cursor: pointer;
  transition: transform .2s ease, background .3s ease;
}
.ink-button:hover, .ink-button.lit { transform: translateY(-3px) rotate(-1deg); background: var(--berry-dusk); }

.seed-beads span { position: absolute; width: .9rem; height: .9rem; border-radius: 50%; background: var(--pollen-gold); left: var(--x); top: var(--y); box-shadow: 0 0 18px rgba(246,211,107,.8); }
.seed-beads span:nth-child(1) { --x: 18%; --y: 18%; }
.seed-beads span:nth-child(2) { --x: 24%; --y: 34%; }
.seed-beads span:nth-child(3) { --x: 12%; --y: 55%; }
.seed-beads span:nth-child(4) { --x: 37%; --y: 22%; }

.paw-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .7; }
.trail-line { fill: none; stroke: rgba(90,59,37,.32); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 18 38; filter: url(#soft); }

.pressed-clovers { position: absolute; inset: 0; }
.clover {
  position: absolute;
  left: var(--x, 64%); top: var(--y, 20%);
  width: 9rem; height: 9rem;
  border: 0; background: transparent; cursor: pointer;
  animation: cloverDrift 7s ease-in-out infinite;
}
.clover.small { --x: 75%; --y: 56%; transform: scale(.72); }
.clover.wide { --x: 42%; --y: 58%; transform: scale(1.15) rotate(18deg); }
.clover i { position: absolute; width: 48%; height: 48%; background: rgba(111,191,115,.78); border-radius: 70% 30% 70% 30%; box-shadow: inset -9px -9px 18px rgba(38,30,25,.08); }
.clover i:nth-child(1) { left: 2%; top: 2%; }
.clover i:nth-child(2) { right: 2%; top: 2%; transform: rotate(90deg); }
.clover i:nth-child(3) { left: 2%; bottom: 2%; transform: rotate(-90deg); }
.clover i:nth-child(4) { right: 2%; bottom: 2%; transform: rotate(180deg); }
.clover:hover { animation-play-state: paused; }
.clover:hover i { background: var(--pollen-gold); }
.compass { --x: 58%; --y: 18%; }
.riddle-reveal { font-family: var(--amatic); font-size: 1.7rem; color: var(--berry-dusk); }

.pawprints::before { content: ""; position: absolute; inset: 12% 8%; background-image: radial-gradient(ellipse, rgba(90,59,37,.55) 0 8px, transparent 9px), radial-gradient(circle, rgba(90,59,37,.45) 0 4px, transparent 5px); background-size: 110px 92px; transform: rotate(-28deg); opacity: .55; }
.print { position: absolute; width: 1.25rem; height: 1.65rem; border-radius: 50% 50% 45% 45%; background: rgba(90,59,37,.42); transform: rotate(-25deg) scale(.6); opacity: 0; animation: printAppear .8s ease forwards; }
.print::before, .print::after { content: ""; position: absolute; top: -.48rem; width: .42rem; height: .42rem; border-radius: 50%; background: rgba(90,59,37,.42); }
.print::before { left: .08rem; }
.print::after { right: .08rem; }
.dandelion { position: absolute; right: 9%; top: 18%; width: 7rem; height: 7rem; border-radius: 50%; cursor: grab; }
.dandelion::before { content: ""; position: absolute; left: 50%; top: 50%; width: .35rem; height: 45vh; background: rgba(90,59,37,.35); transform: translateX(-50%); }
.dandelion span, .dandelion span::before, .dandelion span::after { position: absolute; content: ""; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255,247,217,.95) 0 3px, transparent 4px 15px); }
.dandelion span::before { transform: rotate(35deg); }
.dandelion span::after { transform: rotate(70deg); }
.side-note { position: absolute; right: 7%; top: 35%; max-width: 16rem; padding: 1rem; background: var(--moon-cream); border-radius: 1rem; font-family: var(--amatic); font-size: 1.5rem; color: var(--berry-dusk); transform: translateX(150%) rotate(8deg); transition: transform .55s ease; box-shadow: 0 13px 30px rgba(38,30,25,.18); }
.side-note.open { transform: translateX(0) rotate(3deg); }

.lantern-row { position: absolute; left: 8%; bottom: 16%; width: 82%; display: flex; justify-content: space-around; align-items: flex-end; }
.carrot-lantern { position: relative; width: 6rem; height: 13rem; border: 0; background: transparent; cursor: pointer; transform-origin: top; animation: lanternSwing 4s ease-in-out infinite; }
.carrot-lantern:nth-child(2) { animation-delay: -.7s; margin-bottom: 7rem; }
.carrot-lantern:nth-child(3) { animation-delay: -1.4s; margin-bottom: 2rem; }
.carrot-lantern:nth-child(4) { animation-delay: -2.1s; margin-bottom: 9rem; }
.carrot-lantern::before { content: ""; position: absolute; top: -6rem; left: 50%; width: 2px; height: 7rem; background: rgba(255,247,217,.35); }
.carrot-lantern span { position: absolute; inset: 3rem .75rem 0; background: var(--carrot-lantern); clip-path: polygon(50% 100%, 3% 0, 97% 0); border-radius: 45% 45% 60% 60%; box-shadow: inset 0 0 0 999px rgba(38,30,25,.0); transition: box-shadow .4s ease, filter .4s ease; }
.carrot-lantern span::before { content: ""; position: absolute; left: 30%; top: 22%; width: 40%; height: 26%; border-radius: 50%; background: rgba(255,247,217,.38); }
.carrot-lantern.lit span { filter: drop-shadow(0 0 28px var(--pollen-gold)); box-shadow: inset 0 -3rem 4rem rgba(246,211,107,.65); }
.map-scrap { position: absolute; left: 14%; top: 18%; background: rgba(255,247,217,.9); color: var(--ink-root); padding: .7rem 1.1rem; border-radius: 1rem 2rem 1rem 2rem; font-size: 1.55rem; transform: rotate(-7deg); }
.fern-curtain { position: absolute; inset: 0 auto 0 0; width: 12rem; pointer-events: none; }
.fern-curtain.right { left: auto; right: 0; transform: scaleX(-1); }
.fern-curtain::before { height: 100%; clip-path: polygon(0 0, 35% 6%, 12% 14%, 48% 22%, 16% 32%, 52% 41%, 18% 50%, 55% 61%, 20% 70%, 48% 83%, 0 100%); background: rgba(111,191,115,.42); }

.bridge-planks { position: absolute; left: 13%; right: 11%; bottom: 15%; height: 9rem; transform: rotate(-4deg); display: flex; gap: .7rem; justify-content: center; }
.bridge-planks span { flex: 1; max-width: 9rem; background: rgba(90,59,37,.7); border-radius: .9rem; box-shadow: inset 0 0 20px rgba(38,30,25,.25), 0 12px 22px rgba(38,30,25,.16); transform: rotate(var(--p, 0deg)); }
.bridge-planks span:nth-child(odd) { --p: 5deg; }
.bridge-planks span:nth-child(even) { --p: -4deg; }
.mushrooms { position: absolute; inset: 0; }
.mushroom { position: absolute; left: var(--x); bottom: var(--b); width: 10rem; height: 11rem; border: 0; background: transparent; cursor: pointer; animation: bob 3s ease-in-out infinite; }
.mushroom.toll { --x: 66%; --b: 18%; }
.mushroom.tall { --x: 78%; --b: 11%; transform: scale(1.25); }
.mushroom.tiny { --x: 56%; --b: 9%; transform: scale(.65); }
.mushroom::before { content: ""; position: absolute; left: 14%; top: 0; width: 72%; height: 45%; background: var(--mushroom-rose); border-radius: 60% 60% 20% 20%; box-shadow: inset -18px -14px 0 rgba(92,75,138,.13); }
.mushroom b { position: absolute; left: 35%; top: 36%; width: 30%; height: 60%; background: var(--moon-cream); border-radius: 35% 35% 14% 14%; }
.receipt-stamp { display: inline-block; padding: .35rem .8rem; border: 3px solid var(--mushroom-rose); color: var(--mushroom-rose); border-radius: .4rem; transform: rotate(-8deg); font-size: 1.5rem; }
.receipt-stamp.stamped { color: var(--clover-green); border-color: var(--clover-green); }
.snail-mail { position: absolute; left: 40%; bottom: 23%; width: 8rem; height: 3rem; border-radius: 999px 999px 20px 20px; background: rgba(90,59,37,.62); }
.snail-mail::before { content: ""; position: absolute; right: -.8rem; top: -.9rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--moon-cream); box-shadow: inset 0 0 0 .38rem var(--pollen-gold); }
.snail-mail span { position: absolute; left: 1.5rem; top: -1.2rem; width: 4rem; height: 2.6rem; border-radius: .3rem; background: var(--moon-cream); transform: rotate(-8deg); }

.moon { position: absolute; right: 15%; top: 10%; width: 9rem; height: 9rem; border-radius: 50%; background: var(--moon-cream); box-shadow: 0 0 70px rgba(255,247,217,.68); }
.pond { position: absolute; left: 8%; right: 8%; bottom: -5rem; height: 46vh; border-radius: 50% 50% 0 0 / 35% 35% 0 0; background: radial-gradient(ellipse at 50% 35%, rgba(255,247,217,.62), transparent 28%), linear-gradient(180deg, rgba(143,214,216,.8), rgba(92,75,138,.6)); box-shadow: inset 0 20px 80px rgba(255,247,217,.18); overflow: hidden; }
.ripple { position: absolute; left: 50%; top: 45%; width: 12rem; height: 3rem; border: 2px solid rgba(255,247,217,.38); border-radius: 50%; transform: translate(-50%,-50%); animation: ripple 4s linear infinite; }
.ripple:nth-child(2) { animation-delay: -1.3s; }
.ripple:nth-child(3) { animation-delay: -2.6s; }
.dew-word { position: absolute; left: var(--x); top: var(--y); width: 4.4rem; height: 4.4rem; border: 0; border-radius: 50%; color: var(--berry-dusk); background: radial-gradient(circle at 30% 22%, #FFF7D9, rgba(143,214,216,.92) 48%, rgba(255,247,217,.28)); box-shadow: 0 0 20px rgba(255,247,217,.55); cursor: pointer; transition: transform .25s ease; }
.dew-word:hover { transform: scale(1.45); }
.paw-constellation span { position: absolute; width: .8rem; height: .8rem; border-radius: 50%; background: var(--moon-cream); box-shadow: 0 0 15px var(--moon-cream); left: var(--x); top: var(--y); }
.paw-constellation span:nth-child(1) { --x: 14%; --y: 20%; }
.paw-constellation span:nth-child(2) { --x: 18%; --y: 15%; }
.paw-constellation span:nth-child(3) { --x: 22%; --y: 19%; }
.paw-constellation span:nth-child(4) { --x: 19%; --y: 25%; }
.paw-constellation span:nth-child(5) { --x: 16%; --y: 27%; }

.thistle-gate { position: absolute; left: 10%; right: 10%; top: 10%; height: 22rem; border-top: 1rem dotted rgba(217,108,140,.75); }
.thistle-gate span { position: absolute; top: 0; width: 3rem; height: 20rem; background: linear-gradient(var(--mushroom-rose), var(--clover-green)); border-radius: 50% 50% 0 0; }
.thistle-gate span:first-child { left: 0; }
.thistle-gate span:last-child { right: 0; }
.wish-burrows { position: absolute; left: 8%; right: 8%; bottom: 8%; display: flex; justify-content: space-around; align-items: end; }
.wish-burrows span { width: 9rem; height: 5rem; border-radius: 50% 50% 0 0; background: radial-gradient(ellipse at 50% 100%, #261E19 0 48%, rgba(246,211,107,.44) 50% 55%, #5A3B25 57%); box-shadow: 0 -9px 22px rgba(246,211,107,.12); }
.wish-burrows span:nth-child(even) { transform: translateY(-3rem) scale(.82); }
.acorn-bells i { position: absolute; top: 20%; left: var(--x); width: 2rem; height: 2.4rem; background: var(--pollen-gold); border-radius: 50% 50% 45% 45%; transform-origin: top; animation: bell 2.7s ease-in-out infinite; }
.acorn-bells i:nth-child(1) { --x: 27%; }
.acorn-bells i:nth-child(2) { --x: 50%; animation-delay: -.7s; }
.acorn-bells i:nth-child(3) { --x: 72%; animation-delay: -1.4s; }
.wish-result { font-family: var(--amatic); color: var(--pollen-gold); font-size: 1.8rem; }
.ending { position: absolute; bottom: 1.3rem; left: 0; right: 0; text-align: center; font-family: var(--amatic); color: rgba(255,247,217,.75); font-size: 1.4rem; }

@keyframes floatBloom { to { transform: translate(6vw, -5vh) rotate(28deg) scale(1.08); } }
@keyframes titleWake { from { opacity: 0; filter: blur(10px); transform: translateY(4rem) scale(.94); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes twitch { 0%, 83%, 100% { transform: rotate(0); } 86% { transform: rotate(-8deg); } 90% { transform: rotate(6deg); } }
@keyframes sparkle { 0%, 100% { transform: scale(.35); opacity: .15; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes grassSway { to { transform: skewX(-5deg) translateX(-2%); } }
@keyframes printAppear { to { opacity: .9; transform: rotate(-25deg) scale(1); } }
@keyframes cloverDrift { 50% { transform: rotate(14deg) translateY(-.8rem); } }
@keyframes lanternSwing { 50% { transform: rotate(5deg); } }
@keyframes bob { 50% { translate: 0 -1rem; } }
@keyframes ripple { from { transform: translate(-50%,-50%) scale(.35); opacity: .75; } to { transform: translate(-50%,-50%) scale(3.8); opacity: 0; } }
@keyframes bell { 50% { transform: rotate(12deg); } }

@media (max-width: 760px) {
  .field-nav { left: .8rem; right: .8rem; top: .65rem; justify-content: center; }
  .trail-progress { display: none; }
  .scene { padding: 5rem 1rem; }
  .leaf-plaque { clip-path: none; padding: 2rem; margin-top: 16rem; }
  .root-arch { width: 75vw; left: 8vw; height: 48vh; }
  .vellum { max-width: 100%; }
  .lantern-row { left: 0; width: 100%; transform: scale(.72); }
  .clover { width: 6rem; height: 6rem; }
  .pond { left: -20%; right: -20%; }
}