:root {
  /* Design typography tokens: Bungee Shade, Nunito Sans, IBM Plex Mono** for coordinates */
  --night-iris: #17123B;
  --ink-plum: #090716;
  --cloud: #F8F4EA;
  --petal: #FF5C8A;
  --leaf: #8CFF6A;
  --cyan: #33D7FF;
  --pollen: #FFD166;
  --lavender: #C7B6FF;
  --display: "Bungee Shade", Impact, fantasy;
  --conversation: "Nunito Sans", Inter, system-ui, sans-serif;
  --hud: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.quest-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(51, 215, 255, .18), transparent 18%),
    radial-gradient(circle at 22% 18%, rgba(255, 92, 138, .22), transparent 26%),
    radial-gradient(circle at 78% 20%, rgba(140, 255, 106, .12), transparent 24%),
    radial-gradient(ellipse at center, #17123B 0%, #17123B 36%, #090716 100%);
}

.dream-field,
.hud-shell,
.floating-layer,
.chapter {
  position: absolute;
  inset: 0;
}

.dream-field { z-index: 0; }
.chapter { z-index: 3; opacity: 0; pointer-events: none; transform: scale(1.08); filter: blur(18px); transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2,.8,.1,1), filter 900ms ease; }
.chapter.active { opacity: 1; pointer-events: auto; transform: scale(1); filter: blur(0); }
.hud-shell { z-index: 8; pointer-events: none; }
.floating-layer { z-index: 5; pointer-events: none; }

.iris {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  opacity: .75;
  animation: irisPulse 10s ease-in-out infinite;
}

.iris-one { width: 66vmin; height: 66vmin; left: 14vw; top: 10vh; background: radial-gradient(circle, rgba(199, 182, 255, .24), transparent 67%); }
.iris-two { width: 76vmin; height: 76vmin; right: -10vw; bottom: -8vh; background: radial-gradient(circle, rgba(51, 215, 255, .18), transparent 64%); animation-delay: -4s; }

.horizon {
  position: absolute;
  left: -10vw;
  width: 120vw;
  border-radius: 50% 50% 0 0;
  filter: blur(1px);
}
.horizon-back { height: 34vh; bottom: 8vh; background: linear-gradient(180deg, transparent, rgba(199, 182, 255, .14), rgba(23, 18, 59, .62)); transform: rotate(-2deg); }
.horizon-front { height: 28vh; bottom: -6vh; background: linear-gradient(180deg, transparent, rgba(140, 255, 106, .12), rgba(9, 7, 22, .92)); transform: rotate(1.5deg); }

.giant-grass {
  position: absolute;
  width: 3vmin;
  height: 86vh;
  bottom: -20vh;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(180deg, rgba(140, 255, 106, .02), rgba(140, 255, 106, .34), rgba(9, 7, 22, .05));
  filter: blur(.4px) drop-shadow(0 0 20px rgba(140, 255, 106, .22));
  transform-origin: bottom;
}
.grass-a { left: 8vw; transform: rotate(18deg); }
.grass-b { right: 16vw; transform: rotate(-22deg) scaleY(1.2); }
.grass-c { left: 55vw; transform: rotate(8deg) scaleY(.85); opacity: .65; }

.distant-gate {
  position: absolute;
  width: 10vw;
  height: 18vh;
  border: 1px solid rgba(51, 215, 255, .35);
  border-bottom: 0;
  border-radius: 48% 48% 0 0;
  box-shadow: 0 0 34px rgba(51, 215, 255, .2), inset 0 0 40px rgba(255, 92, 138, .12);
  opacity: .45;
}
.gate-left { left: 15vw; top: 44vh; transform: rotate(-8deg) scale(.72); }
.gate-right { right: 10vw; top: 32vh; transform: rotate(7deg) scale(.5); }

.dew-drop {
  position: absolute;
  border-radius: 58% 42% 54% 46%;
  background: radial-gradient(circle at 35% 20%, rgba(248, 244, 234, .7), transparent 12%), radial-gradient(circle, rgba(51, 215, 255, .22), rgba(199, 182, 255, .06) 60%, transparent 70%);
  border: 1px solid rgba(248, 244, 234, .18);
  box-shadow: inset 0 0 35px rgba(51, 215, 255, .18), 0 0 45px rgba(199, 182, 255, .16);
  display: grid;
  place-items: center;
  font-family: var(--hud);
  font-size: .68rem;
  color: rgba(248, 244, 234, .72);
  animation: floatSlow 9s ease-in-out infinite;
}
.dew-one { width: 15vmin; height: 18vmin; left: 68vw; top: 16vh; }
.dew-two { width: 11vmin; height: 13vmin; left: 20vw; bottom: 20vh; animation-delay: -3s; }

.corner {
  position: absolute;
  width: 22vw;
  min-width: 210px;
  height: 84px;
  font-family: var(--hud);
  font-size: .72rem;
  color: rgba(248, 244, 234, .72);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.corner span { position: absolute; }
.corner i { position: absolute; inset: 22px; border-color: rgba(51, 215, 255, .45); border-style: solid; filter: drop-shadow(0 0 8px rgba(51, 215, 255, .5)); }
.corner-tl { left: 18px; top: 16px; } .corner-tl i { border-width: 1px 0 0 1px; } .corner-tl span { left: 22px; top: 10px; }
.corner-tr { right: 18px; top: 16px; } .corner-tr i { border-width: 1px 1px 0 0; } .corner-tr span { right: 22px; top: 10px; }
.corner-bl { left: 18px; bottom: 16px; } .corner-bl i { border-width: 0 0 1px 1px; } .corner-bl span { left: 22px; bottom: 10px; }
.corner-br { right: 18px; bottom: 16px; } .corner-br i { border-width: 0 1px 1px 0; } .corner-br span { right: 22px; bottom: 10px; }

.locator {
  position: absolute;
  width: 18vmin;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 209, 102, .75), transparent);
  transform-origin: center;
  opacity: .62;
}
.locator::before,
.locator::after { content: ""; position: absolute; top: -4px; width: 8px; height: 8px; border: 1px solid var(--pollen); transform: rotate(45deg); }
.locator::before { left: 14%; } .locator::after { right: 14%; }
.locator-a { left: 11vw; top: 28vh; transform: rotate(-31deg); }
.locator-b { right: 17vw; top: 62vh; transform: rotate(22deg); }
.locator-c { left: 46vw; bottom: 14vh; transform: rotate(-9deg); }

.glyph-ring {
  position: absolute;
  right: 5vw;
  top: 50%;
  width: 142px;
  height: 142px;
  border: 1px dashed rgba(199, 182, 255, .52);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  animation: ringRotate 22s linear infinite;
}
.glyph-ring::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(140, 255, 106, .28); border-radius: 50%; box-shadow: 0 0 25px rgba(140, 255, 106, .14); }
.glyph { position: absolute; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(248, 244, 234, .22); background: rgba(9, 7, 22, .5); font-family: var(--hud); color: var(--cloud); box-shadow: 0 0 18px rgba(51, 215, 255, .18); animation: ringCounter 22s linear infinite; }
.glyph:nth-child(1) { left: 52px; top: -19px; } .glyph:nth-child(2) { right: -15px; bottom: 22px; } .glyph:nth-child(3) { left: -16px; bottom: 22px; }
.glyph.active { color: var(--ink-plum); background: var(--leaf); box-shadow: 0 0 22px rgba(140, 255, 106, .68); }
.ring-label { position: absolute; inset: 0; display: grid; place-items: center; font: .62rem var(--hud); color: rgba(248, 244, 234, .56); text-transform: uppercase; letter-spacing: .12em; animation: ringCounter 22s linear infinite; }

.letter-cloud span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--display);
  font-size: clamp(2.2rem, 8vw, 8.4rem);
  color: var(--cloud);
  text-shadow: 0 0 12px rgba(51, 215, 255, .8), 0 0 32px rgba(255, 92, 138, .45);
  transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(calc(.45 + var(--z)));
  animation: letterGather 2200ms cubic-bezier(.2,.85,.12,1) forwards, kineticBreath 3.2s ease-in-out infinite;
  animation-delay: var(--d), calc(2300ms + var(--d));
}

.central-reticle {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(54vmin, 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 25px rgba(51, 215, 255, .35));
}
.reticle-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(248, 244, 234, .22); }
.reticle-ring::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px dotted rgba(255, 92, 138, .48); mask: conic-gradient(from 0deg, #000 0 12deg, transparent 12deg 28deg, #000 28deg 40deg, transparent 40deg 60deg); }
.outer { inset: 0; border-color: rgba(51, 215, 255, .5); animation: spin 24s linear infinite; }
.middle { inset: 13%; border-color: rgba(140, 255, 106, .36); animation: spin 17s linear reverse infinite; }
.inner { inset: 31%; border-color: rgba(255, 209, 102, .45); animation: pulseRing 2600ms ease-in-out infinite; }
.central-reticle h1 { margin: 0; font-family: var(--display); font-size: clamp(2.2rem, 7vw, 6.7rem); color: var(--cloud); letter-spacing: .015em; text-shadow: 0 0 10px rgba(248, 244, 234, .9), 0 0 34px rgba(51, 215, 255, .75), 0 0 56px rgba(255, 92, 138, .35); animation: wordBreath 5s ease-in-out infinite; }
.reticle-code { position: absolute; bottom: 16%; margin: 0; font: .72rem var(--hud); letter-spacing: .17em; color: rgba(248, 244, 234, .68); }

.cloud-bubble {
  position: absolute;
  max-width: 380px;
  padding: 22px 28px;
  border-radius: 44px 54px 42px 16px;
  background: rgba(248, 244, 234, .1);
  border: 1px solid rgba(248, 244, 234, .28);
  box-shadow: 0 0 32px rgba(199, 182, 255, .22), inset 0 0 35px rgba(51, 215, 255, .06);
  backdrop-filter: blur(12px);
}
.opening-bubble { left: 9vw; top: 18vh; animation: floatSlow 8s ease-in-out infinite; }
.bubble-tag, .chapter-title span, .prompt-fragment small { display: block; font-family: var(--hud); text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; color: var(--leaf); margin-bottom: 10px; }
.cloud-bubble p { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.35; }

.petal-waypoint,
.gate-action {
  position: absolute;
  border: 1px solid rgba(255, 92, 138, .6);
  color: var(--cloud);
  background: radial-gradient(circle at 30% 20%, rgba(255, 209, 102, .32), rgba(255, 92, 138, .17) 42%, rgba(9, 7, 22, .36));
  box-shadow: 0 0 22px rgba(255, 92, 138, .48), 0 0 55px rgba(51, 215, 255, .2);
  font-family: var(--hud);
  text-transform: uppercase;
  letter-spacing: .14em;
  transition: transform 400ms ease, filter 400ms ease, box-shadow 400ms ease;
}
.petal-waypoint { right: 19vw; bottom: 18vh; width: 190px; height: 72px; border-radius: 70% 30% 68% 32%; animation: petalPulse 2600ms ease-in-out infinite; }
.petal-waypoint:hover, .gate-action:hover, .prompt-fragment:hover { transform: scale(1.08) rotate(-2deg); filter: brightness(1.25); box-shadow: 0 0 34px rgba(255, 92, 138, .7), 0 0 80px rgba(51, 215, 255, .32); }

.chapter-title { position: absolute; left: 8vw; top: 12vh; }
.chapter-title h2 { margin: 0; max-width: 680px; font-family: var(--display); font-size: clamp(2.3rem, 7vw, 7rem); line-height: .95; color: var(--cloud); text-shadow: 0 0 18px rgba(51, 215, 255, .55), 0 0 40px rgba(140, 255, 106, .18); animation: wordBreath 6s ease-in-out infinite; }

.orbital-grid {
  position: absolute;
  inset: 10vh 10vw;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 35%, rgba(51, 215, 255, .08) 36%, transparent 37% 54%, rgba(199, 182, 255, .08) 55%, transparent 56%);
  animation: gridDrift 16s ease-in-out infinite;
}
.prompt-fragment {
  position: absolute;
  width: 245px;
  min-height: 130px;
  padding: 18px;
  border: 1px solid rgba(199, 182, 255, .3);
  background: rgba(9, 7, 22, .36);
  border-radius: 36px 18px 42px 24px;
  text-align: left;
  backdrop-filter: blur(10px);
  transition: transform 400ms ease, box-shadow 400ms ease, border-color 400ms ease;
}
.prompt-fragment strong { display: block; font-size: 1.2rem; color: var(--cloud); margin-bottom: 8px; }
.prompt-fragment em { display: block; font-style: normal; color: rgba(248, 244, 234, .7); line-height: 1.25; }
.fragment-rain { left: 16%; top: 32%; border-color: rgba(51, 215, 255, .42); }
.fragment-map { right: 19%; top: 16%; border-color: rgba(140, 255, 106, .36); }
.fragment-glitch { right: 9%; bottom: 21%; border-color: rgba(255, 92, 138, .45); }
.fragment-inventory { left: 31%; bottom: 9%; border-color: rgba(255, 209, 102, .38); }

.spring-compass {
  position: absolute;
  left: 7vw;
  bottom: 11vh;
  width: 190px;
  height: 190px;
  display: grid;
  place-items: center;
}
.compass-ring { position: absolute; inset: 0; border: 1px solid rgba(140, 255, 106, .38); border-radius: 50%; box-shadow: inset 0 0 32px rgba(140, 255, 106, .1), 0 0 20px rgba(140, 255, 106, .18); }
.sprout-needle { position: absolute; width: 12px; height: 78px; bottom: 50%; border-radius: 99px 99px 6px 6px; background: linear-gradient(var(--leaf), var(--cyan)); transform-origin: bottom; transform: rotate(38deg); filter: drop-shadow(0 0 14px rgba(140, 255, 106, .65)); animation: needleSeek 5s ease-in-out infinite; }
.sprout-needle::before, .sprout-needle::after { content: ""; position: absolute; top: 7px; width: 24px; height: 14px; border-radius: 100% 0; background: rgba(140, 255, 106, .9); }
.sprout-needle::before { left: -22px; transform: rotate(-24deg); } .sprout-needle::after { right: -22px; transform: scaleX(-1) rotate(-24deg); }
.spring-compass span { position: absolute; bottom: -26px; font: .68rem var(--hud); color: rgba(248, 244, 234, .58); text-transform: uppercase; letter-spacing: .12em; }

.inventory-strip { position: absolute; right: 9vw; bottom: 7vh; display: flex; gap: 9px; flex-wrap: wrap; max-width: 44vw; justify-content: flex-end; }
.inventory-strip button { padding: 9px 12px; border: 1px solid rgba(255, 209, 102, .24); border-radius: 999px; background: rgba(255, 209, 102, .08); font: .72rem var(--hud); color: rgba(248, 244, 234, .74); text-transform: uppercase; letter-spacing: .08em; transition: color 250ms ease, border-color 250ms ease, box-shadow 250ms ease; }
.inventory-strip button:hover { color: var(--pollen); border-color: rgba(255, 209, 102, .75); box-shadow: 0 0 18px rgba(255, 209, 102, .28); }

.keyhole-lens {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(48vmin, 480px);
  height: min(64vmin, 610px);
  transform: translate(-50%, -50%);
  border-radius: 48% 48% 24% 24% / 38% 38% 18% 18%;
  border: 2px solid rgba(255, 209, 102, .55);
  background: radial-gradient(circle at 50% 33%, rgba(255, 209, 102, .18), rgba(51, 215, 255, .1) 34%, rgba(9, 7, 22, .5) 70%);
  box-shadow: 0 0 42px rgba(255, 209, 102, .33), inset 0 0 80px rgba(51, 215, 255, .13);
  overflow: hidden;
}
.keyhole-lens::after { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(248, 244, 234, .22); border-radius: inherit; animation: spin 20s linear infinite; }
.lens-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.84) rotate(3deg); transition: opacity 650ms ease, transform 650ms ease; }
.lens-scene.active { opacity: 1; transform: scale(1) rotate(0); }
.lens-scene p { position: absolute; bottom: 13%; width: 74%; margin: 0; text-align: center; font: 600 1.05rem var(--conversation); color: var(--cloud); text-shadow: 0 0 12px rgba(9, 7, 22, .9); }
.flower-compass { width: 145px; height: 145px; border-radius: 50%; background: radial-gradient(circle, var(--pollen) 0 10%, var(--petal) 11% 24%, transparent 25%), conic-gradient(from 0deg, var(--petal), var(--cyan), var(--leaf), var(--petal)); filter: drop-shadow(0 0 32px rgba(255, 92, 138, .55)); mask: radial-gradient(circle, #000 0 62%, transparent 63%); }
.dialogue-cloud { width: 210px; height: 118px; border-radius: 58px 62px 50px 16px; background: rgba(248, 244, 234, .8); box-shadow: 0 0 45px rgba(199, 182, 255, .6); position: relative; }
.dialogue-cloud::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 4rem var(--conversation); color: var(--night-iris); }
.sunrise-lantern { width: 128px; height: 190px; border-radius: 50px 50px 24px 24px; border: 1px solid rgba(255, 209, 102, .8); background: radial-gradient(circle at 50% 65%, var(--pollen) 0 18%, var(--petal) 19% 24%, transparent 25%), linear-gradient(180deg, rgba(51, 215, 255, .28), rgba(255, 209, 102, .18)); box-shadow: 0 0 50px rgba(255, 209, 102, .55), inset 0 0 35px rgba(255, 209, 102, .22); }
.gate-action { left: 50%; bottom: 9vh; transform: translateX(-50%); padding: 18px 28px; border-radius: 999px; }
.gate-action:hover { transform: translateX(-50%) scale(1.07); }
.farewell-line { position: absolute; right: 8vw; top: 24vh; max-width: 320px; font-size: 1.2rem; line-height: 1.35; color: rgba(248, 244, 234, .76); opacity: .76; }
.farewell-line.dimmed { color: rgba(248, 244, 234, .42); text-shadow: 0 0 24px rgba(255, 209, 102, .35); }

.petal, .lantern, .seed { position: absolute; transition: transform 260ms ease-out; }
.petal { width: 44px; height: 78px; border-radius: 86% 14% 74% 26%; background: radial-gradient(circle at 35% 20%, rgba(248, 244, 234, .7), transparent 12%), linear-gradient(145deg, var(--petal), rgba(255, 92, 138, .28)); box-shadow: 0 0 18px rgba(255, 92, 138, .5); animation: tokenDrift 7s ease-in-out infinite; }
.petal::after { content: attr(data-coord); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-34deg); font: .48rem var(--hud); color: rgba(248, 244, 234, .72); }
.petal-a { left: 9vw; top: 58vh; } .petal-b { left: 62vw; top: 10vh; animation-delay: -2s; } .petal-c { right: 18vw; top: 42vh; animation-delay: -4s; } .petal-d { left: 42vw; bottom: 10vh; animation-delay: -1s; }
.lantern { width: 38px; height: 58px; border-radius: 45% 45% 28% 28%; border: 1px solid rgba(255, 209, 102, .6); background: radial-gradient(circle, rgba(255, 209, 102, .95), rgba(255, 92, 138, .2) 52%, transparent 70%); box-shadow: 0 0 26px rgba(255, 209, 102, .56); animation: floatSlow 6.5s ease-in-out infinite; }
.lantern-a { left: 28vw; top: 14vh; } .lantern-b { right: 28vw; bottom: 22vh; animation-delay: -3s; }
.seed { width: 28px; height: 54px; border-radius: 50%; border: 1px solid rgba(140, 255, 106, .5); background: linear-gradient(180deg, rgba(140, 255, 106, .24), rgba(51, 215, 255, .08)); box-shadow: 0 0 20px rgba(140, 255, 106, .25); animation: seedSpin 10s linear infinite; }
.seed-a { left: 78vw; top: 26vh; } .seed-b { left: 14vw; top: 38vh; animation-delay: -5s; }

.focus-vortex { position: absolute; z-index: 20; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(248, 244, 234, .8), rgba(51, 215, 255, .38) 18%, rgba(255, 92, 138, .22) 34%, transparent 62%); transform: translate(-50%, -50%); opacity: 0; filter: blur(2px); }
.focus-vortex.bloom { animation: vortexBloom 900ms cubic-bezier(.2,.7,.1,1); }
.scene-caption { position: absolute; z-index: 12; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(199, 182, 255, .25); background: rgba(9, 7, 22, .42); font: .72rem var(--hud); color: rgba(248, 244, 234, .66); letter-spacing: .09em; text-transform: uppercase; pointer-events: none; }
.pollen { position: absolute; z-index: 22; width: 7px; height: 7px; border-radius: 50%; background: var(--pollen); box-shadow: 0 0 12px rgba(255, 209, 102, .9); pointer-events: none; animation: pollenFly 850ms ease-out forwards; }

body.scene-shift .chapter.active { filter: blur(10px); transform: scale(1.16); }
body.gate-open .hud-shell { opacity: .35; transition: opacity 1.4s ease; }
body.gate-open .keyhole-lens { box-shadow: 0 0 85px rgba(255, 209, 102, .48), inset 0 0 120px rgba(248, 244, 234, .16); }

@keyframes letterGather { 0% { opacity: 0; transform: translate(var(--x), var(--y)) translateZ(0) rotate(var(--r)) scale(calc(.45 + var(--z))); filter: blur(8px); } 70% { opacity: 1; filter: blur(0); } 100% { opacity: .08; transform: translate(-50%, -50%) rotate(0) scale(.35); } }
@keyframes kineticBreath { 0%,100% { letter-spacing: 0; } 50% { letter-spacing: .08em; } }
@keyframes wordBreath { 0%,100% { letter-spacing: .01em; transform: rotate(-.4deg) scale(1); } 50% { letter-spacing: .055em; transform: rotate(.5deg) scale(1.025); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0%,100% { transform: scale(.92); opacity: .45; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes petalPulse { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes floatSlow { 0%,100% { transform: translate3d(0,0,0) rotate(-2deg); } 50% { transform: translate3d(0,-18px,0) rotate(3deg); } }
@keyframes tokenDrift { 0%,100% { translate: 0 0; rotate: -10deg; } 50% { translate: 14px -28px; rotate: 22deg; } }
@keyframes seedSpin { to { transform: rotate(360deg); } }
@keyframes irisPulse { 0%,100% { transform: scale(.94); opacity: .55; } 50% { transform: scale(1.08); opacity: .82; } }
@keyframes gridDrift { 0%,100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.03); } }
@keyframes needleSeek { 0%,100% { transform: rotate(30deg); } 50% { transform: rotate(48deg); } }
@keyframes ringRotate { to { transform: translateY(-50%) rotate(360deg); } }
@keyframes ringCounter { to { transform: rotate(-360deg); } }
@keyframes vortexBloom { 0% { width: 0; height: 0; opacity: 0; } 30% { opacity: 1; } 100% { width: 190vmax; height: 190vmax; opacity: 0; } }
@keyframes pollenFly { to { transform: translate(var(--px), var(--py)) scale(.2); opacity: 0; } }

@media (max-width: 800px) {
  .glyph-ring { right: 18px; width: 104px; height: 104px; }
  .glyph:nth-child(1) { left: 33px; } .glyph:nth-child(2) { right: -18px; bottom: 13px; } .glyph:nth-child(3) { left: -18px; bottom: 13px; }
  .corner { min-width: 150px; font-size: .58rem; }
  .opening-bubble { left: 6vw; top: 10vh; max-width: 300px; }
  .central-reticle { width: 82vmin; }
  .reticle-code { bottom: 10%; font-size: .58rem; }
  .petal-waypoint { right: 8vw; bottom: 13vh; }
  .orbital-grid { inset: 14vh 4vw 8vh; }
  .prompt-fragment { width: 188px; min-height: 112px; padding: 13px; }
  .fragment-rain { left: 3%; top: 30%; } .fragment-map { right: 5%; top: 17%; } .fragment-glitch { right: 0; bottom: 25%; } .fragment-inventory { left: 14%; bottom: 8%; }
  .inventory-strip { right: 4vw; max-width: 92vw; bottom: 3vh; }
  .spring-compass { left: 2vw; bottom: 18vh; transform: scale(.72); }
  .farewell-line { right: 6vw; top: 16vh; max-width: 260px; }
}