:root {
  --engine-navy: #090D24;
  --violet-shadow: #17123A;
  --controller-blue: #486BFF;
  --mana-mint: #43F4B7;
  --dialogue-pink: #FF4FD8;
  --cartridge-cream: #F6F0D8;
  --quest-gold: #FFD166;
  --boss-red: #FF335F;
  --font-title: "Bungee", Impact, Haettenschweiler, "Arial Black", sans-serif;
  --font-body: "Nunito Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-pixel: "Pixelify Sans", "Space Grotesk", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cartridge-cream);
  background: var(--engine-navy);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: crosshair;
}

button { font: inherit; color: inherit; }

.shader-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .18;
  background:
    repeating-linear-gradient(0deg, rgba(246, 240, 216, .08) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 20% 10%, rgba(255, 79, 216, .18), transparent 22rem),
    radial-gradient(circle at 80% 80%, rgba(67, 244, 183, .12), transparent 24rem);
  mix-blend-mode: screen;
}

.level-stream { position: relative; background: linear-gradient(180deg, var(--engine-navy), #10163d 42%, var(--violet-shadow)); }

.game-viewport {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(1.2rem, 4vw, 4rem);
  border-bottom: 4px solid rgba(246, 240, 216, .12);
}

.game-viewport::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(246, 240, 216, .06) 48% 49%, transparent 49% 100%),
    radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(67, 244, 183, .2), transparent 22rem);
  transform: translate3d(calc(var(--rail, 0) * -20px), calc(var(--rail, 0) * 12px), 0) rotate(-3deg);
  z-index: -3;
}

.safe-frame {
  position: absolute;
  inset: 1.2rem;
  border: 2px solid rgba(246, 240, 216, .28);
  pointer-events: none;
  z-index: 8;
  clip-path: polygon(0 0, 12% 0, 12% 4px, 4px 4px, 4px 12%, 0 12%, 0 88%, 4px 88%, 4px calc(100% - 4px), 12% calc(100% - 4px), 12% 100%, 0 100%, 0 0, 100% 0, 100% 12%, calc(100% - 4px) 12%, calc(100% - 4px) 4px, 88% 4px, 88% 0, 100% 0, 100% 100%, 88% 100%, 88% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 88%, 100% 88%);
}

.pixel-label, .debug-label {
  font-family: var(--font-pixel);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
}

.debug-label {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  color: rgba(67, 244, 183, .78);
  border: 2px solid rgba(67, 244, 183, .35);
  background: rgba(9, 13, 36, .62);
  padding: .45rem .65rem;
  box-shadow: 0 0 22px rgba(67, 244, 183, .12);
}

.title-viewport { background: radial-gradient(circle at 50% 35%, rgba(72, 107, 255, .44), transparent 34rem), linear-gradient(160deg, #090D24, #17123A 55%, #1e1854); }
.room-layer { position: absolute; inset: 0; pointer-events: none; }
.room-back { background: linear-gradient(180deg, rgba(72, 107, 255, .16), transparent 65%); }
.moon-window { position: absolute; right: 12%; top: 13%; width: 12rem; height: 8rem; border: 4px solid var(--cartridge-cream); border-radius: 1.2rem; background: linear-gradient(145deg, #0d1438, #26398f); box-shadow: 0 0 50px rgba(72, 107, 255, .45); }
.window-star { position: absolute; width: .45rem; height: .45rem; background: var(--quest-gold); box-shadow: 0 0 18px var(--quest-gold); clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%); animation: twinkle 1.6s steps(2, end) infinite; }
.s1 { right: 18%; top: 18%; } .s2 { right: 14%; top: 25%; animation-delay: .5s; } .s3 { right: 22%; top: 30%; animation-delay: .9s; }
.desk-lamp { position: absolute; left: 18%; top: 36%; width: 7rem; height: 16rem; border-left: 10px solid var(--quest-gold); transform: skewX(-16deg); filter: drop-shadow(0 0 28px rgba(255, 209, 102, .45)); }
.desk-lamp::before { content: ""; position: absolute; left: -3rem; top: -2.2rem; width: 7rem; height: 4rem; background: var(--quest-gold); border: 4px solid var(--engine-navy); clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.monitor-glow { position: absolute; left: 34%; top: 48%; width: 17rem; height: 10rem; border: 5px solid var(--controller-blue); border-radius: 1rem; background: linear-gradient(135deg, rgba(67, 244, 183, .45), rgba(255, 79, 216, .16)); box-shadow: 0 0 70px rgba(67, 244, 183, .35); }
.cable-vine { position: absolute; left: 50%; top: 60%; width: 28rem; height: 10rem; border-bottom: 6px solid var(--dialogue-pink); border-radius: 50%; transform: rotate(-7deg); }
.object-label { position: absolute; font-family: var(--font-pixel); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--mana-mint); background: rgba(9, 13, 36, .72); border: 2px solid rgba(67, 244, 183, .55); padding: .35rem .5rem; box-shadow: 0 0 18px rgba(67, 244, 183, .22); }
.monitor-label { left: 42%; top: 44%; transform: rotate(-3deg); }
.low-poly { position: absolute; filter: drop-shadow(0 18px 0 rgba(0, 0, 0, .26)); }
.desk-poly { left: 20%; bottom: 8%; width: 60%; height: 18%; background: linear-gradient(135deg, #2a2166, #486BFF); clip-path: polygon(8% 0, 100% 20%, 90% 100%, 0 78%); }
.chair-poly { right: 17%; bottom: 17%; width: 11rem; height: 13rem; background: linear-gradient(135deg, #FF4FD8, #FF335F); clip-path: polygon(20% 0, 80% 8%, 100% 72%, 54% 100%, 0 65%); }
.plant-poly { left: 10%; bottom: 16%; width: 10rem; height: 13rem; background: linear-gradient(145deg, #43F4B7, #178d73); clip-path: polygon(50% 0, 62% 36%, 100% 18%, 70% 60%, 90% 100%, 50% 76%, 8% 100%, 30% 58%, 0 20%, 38% 36%); }

.title-stack { position: relative; z-index: 5; display: grid; gap: 1.5rem; justify-items: center; transform: translateY(-2vh); }
.cartridge-logo { position: relative; width: min(82vw, 760px); min-height: 18rem; padding: 4.6rem 2rem 2.5rem; display: grid; place-items: center; background: linear-gradient(180deg, var(--cartridge-cream), #f0dca9); color: var(--engine-navy); border: 5px solid var(--engine-navy); border-radius: 2.2rem 2.2rem 1rem 1rem; box-shadow: 0 22px 0 #050817, 0 0 80px rgba(255, 79, 216, .38), inset 0 -18px 0 rgba(9, 13, 36, .11); animation: spriteBob 2.2s steps(4, end) infinite; }
.cartridge-logo::before, .cartridge-logo::after { content: ""; position: absolute; background: var(--violet-shadow); border: 4px solid var(--engine-navy); }
.cartridge-logo::before { inset: 1.2rem 2rem auto; height: 2rem; border-radius: .9rem; }
.cartridge-logo::after { width: 44%; height: 1rem; bottom: 1rem; border-radius: 1rem; opacity: .75; }
.cart-tabs { position: absolute; top: -1rem; display: flex; gap: .7rem; }
.cart-tabs span { width: 3.2rem; height: 2rem; background: var(--quest-gold); border: 4px solid var(--engine-navy); border-radius: .5rem .5rem 0 0; }
h1, h2 { font-family: var(--font-title); margin: 0; line-height: .9; text-transform: lowercase; letter-spacing: .02em; }
h1 { font-size: clamp(4rem, 14vw, 10.5rem); text-shadow: 5px 5px 0 var(--dialogue-pink), 10px 10px 0 var(--controller-blue); }
h2 { font-size: clamp(2.5rem, 8vw, 6rem); color: var(--quest-gold); text-shadow: 4px 4px 0 var(--engine-navy); }
.press-start, .menu-button, .menu-choices button { border: 4px solid var(--cartridge-cream); background: linear-gradient(135deg, var(--dialogue-pink), var(--boss-red)); padding: .9rem 1.4rem; border-radius: 999px; font-family: var(--font-pixel); text-transform: uppercase; letter-spacing: .12em; box-shadow: 0 8px 0 var(--engine-navy), 0 0 34px rgba(255, 79, 216, .45); transition: transform .18s ease, box-shadow .18s ease; }
.press-start:hover, .menu-button:hover, .menu-choices button:hover { transform: translateY(4px) scale(1.04); box-shadow: 0 4px 0 var(--engine-navy), 0 0 42px rgba(67, 244, 183, .5); }

.particle-field span { position: absolute; width: .55rem; height: .55rem; background: var(--mana-mint); border-radius: 50%; box-shadow: 0 0 18px var(--mana-mint); animation: floatParticle var(--d, 6s) linear infinite; left: var(--x); top: var(--y); }
.loading-overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(9, 13, 36, .92); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.loading-overlay.active { opacity: 1; pointer-events: auto; }
.loading-card { width: min(88vw, 460px); padding: 1.4rem; border: 4px solid var(--cartridge-cream); background: var(--violet-shadow); box-shadow: 0 0 70px rgba(72, 107, 255, .45); }
.compile-bar { height: 1.2rem; background: #050817; border: 2px solid var(--cartridge-cream); overflow: hidden; }
.compile-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mana-mint), var(--quest-gold), var(--dialogue-pink)); transition: width .28s steps(5, end); }

.boot-meadow { background: radial-gradient(circle at 70% 18%, rgba(67, 244, 183, .3), transparent 22rem), linear-gradient(160deg, #0b1638, #17123A 55%, #10234a); }
.tile-grid { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(246,240,216,.13) 2px, transparent 2px), linear-gradient(90deg, rgba(246,240,216,.13) 2px, transparent 2px); background-size: 72px 72px; transform: rotate(-4deg) scale(1.1); }
.meadow-island { position: absolute; border: 4px solid var(--engine-navy); background: linear-gradient(135deg, var(--mana-mint), #1b846e); box-shadow: 0 18px 0 rgba(0,0,0,.22), inset 0 0 0 8px rgba(246,240,216,.12); clip-path: polygon(12% 6%, 82% 0, 100% 46%, 80% 92%, 25% 100%, 0 62%); }
.island-one { width: 27rem; height: 13rem; left: 5%; bottom: 13%; }
.island-two { width: 18rem; height: 10rem; right: 9%; top: 16%; transform: rotate(15deg); }
.quest-map, .drawer-shell, .save-plaque { width: min(86vw, 820px); border: 4px solid var(--cartridge-cream); background: rgba(23, 18, 58, .86); padding: clamp(1rem, 3vw, 2rem); box-shadow: 12px 12px 0 rgba(9,13,36,.7), 0 0 50px rgba(72,107,255,.28); backdrop-filter: blur(6px); }
.panel-header { display: flex; justify-content: space-between; gap: 1rem; color: var(--mana-mint); border-bottom: 3px dashed rgba(246,240,216,.28); padding-bottom: .7rem; margin-bottom: 1.2rem; }
.quest-map p, .save-plaque p { font-size: clamp(1.05rem, 2vw, 1.35rem); max-width: 55ch; }
.quest-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.quest-note { display: grid; gap: .35rem; padding: 1rem; color: var(--engine-navy); border: 4px solid var(--engine-navy); box-shadow: 7px 7px 0 rgba(0,0,0,.34); transform: rotate(var(--r, -2deg)); }
.quest-note strong { font-family: var(--font-pixel); text-transform: uppercase; }
.quest-note.gold, .sticky-one { background: var(--quest-gold); }
.quest-note.mint, .sticky-two { background: var(--mana-mint); --r: 2deg; }
.quest-note.pink { background: var(--dialogue-pink); --r: 3deg; }
.editor-gizmo { position: absolute; width: 8rem; height: 8rem; border: 2px dashed rgba(246,240,216,.5); }
.meadow-gizmo { right: 22%; bottom: 22%; } .desk-gizmo { right: 11%; top: 22%; }
.path-guide { position: absolute; width: 42vw; height: 20vh; border: 3px dashed rgba(255, 79, 216, .5); border-top: 0; border-left: 0; border-radius: 0 0 55% 0; transform: rotate(-12deg); pointer-events: none; }
.meadow-path { left: 21%; bottom: 23%; }
.arrow-x, .arrow-y { position: absolute; background: var(--boss-red); box-shadow: 0 0 18px currentColor; }
.arrow-x { width: 7rem; height: .45rem; left: 50%; top: 50%; color: var(--boss-red); }
.arrow-y { width: .45rem; height: 7rem; left: 50%; top: -10%; background: var(--mana-mint); color: var(--mana-mint); }
.gizmo-dot { position: absolute; left: calc(50% - .5rem); top: calc(50% - .5rem); width: 1rem; height: 1rem; background: var(--quest-gold); border-radius: 50%; }

.desk-hub { background: radial-gradient(circle at 24% 24%, rgba(255,209,102,.22), transparent 20rem), linear-gradient(150deg, #131033, #29206e); }
.desk-surface { position: absolute; left: -8%; right: -8%; bottom: -4%; height: 42%; background: linear-gradient(135deg, #342a83, #151039); border-top: 8px solid var(--cartridge-cream); transform: skewY(-4deg); box-shadow: 0 -28px 70px rgba(9,13,36,.55); }
.sticky-wall { position: absolute; left: 7%; top: 17%; display: grid; gap: 1.5rem; width: min(26rem, 40vw); }
.dialogue-box { position: relative; border: 4px solid var(--cartridge-cream); background: linear-gradient(180deg, rgba(246,240,216,.96), #ead79e); color: var(--engine-navy); padding: 1.3rem; box-shadow: 9px 9px 0 var(--engine-navy), 0 0 40px rgba(255,79,216,.34); }
.dialogue-box::after { content: ""; position: absolute; left: 2rem; bottom: -1.2rem; border: 1.2rem solid transparent; border-top-color: var(--cartridge-cream); border-left: 0; }
.desk-dialogue { width: min(58vw, 660px); margin-left: 20vw; }
.speaker { display: inline-block; font-family: var(--font-pixel); text-transform: uppercase; color: var(--boss-red); margin-bottom: .4rem; }
.type-line { min-height: 3.4rem; font-size: clamp(1.15rem, 2.2vw, 1.55rem); margin: 0; }
.shader-console { position: absolute; right: 8%; bottom: 13%; width: 19rem; border: 3px solid var(--mana-mint); background: rgba(9,13,36,.78); padding: 1rem; }
.shader-console span { display: block; height: .75rem; width: var(--w); margin: .55rem 0; background: linear-gradient(90deg, var(--controller-blue), var(--mana-mint)); box-shadow: 0 0 14px rgba(67,244,183,.4); }

.inventory-drawer { background: linear-gradient(160deg, #0a0d25, #211955 50%, #3b1c5e); }
.drawer-shell { transform: rotate(-1deg); }
.inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.inventory-slot { min-height: 10rem; display: grid; place-items: center; gap: .5rem; background: #0c1130; border: 4px solid var(--controller-blue); box-shadow: inset 0 0 0 4px rgba(246,240,216,.08), 0 7px 0 rgba(0,0,0,.35); transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .18s ease; }
.inventory-slot:hover, .inventory-slot.active { transform: translateY(-8px) rotate(2deg); border-color: var(--quest-gold); }
.inventory-slot em { font-family: var(--font-pixel); font-style: normal; text-transform: uppercase; color: var(--cartridge-cream); }
.slot-icon, .save-crystal { width: 4rem; height: 4rem; display: block; background: var(--mana-mint); filter: drop-shadow(0 0 18px currentColor); color: var(--mana-mint); }
.moon { border-radius: 50%; box-shadow: inset -1.2rem .2rem 0 var(--quest-gold); background: var(--cartridge-cream); }
.key { clip-path: polygon(0 38%, 45% 38%, 45% 20%, 70% 20%, 70% 38%, 100% 38%, 100% 62%, 70% 62%, 70% 80%, 45% 80%, 45% 62%, 0 62%); background: var(--quest-gold); }
.ribbon { clip-path: polygon(0 0, 100% 0, 84% 100%, 50% 72%, 16% 100%); background: var(--dialogue-pink); }
.arrow { clip-path: polygon(0 35%, 62% 35%, 62% 10%, 100% 50%, 62% 90%, 62% 65%, 0 65%); background: var(--boss-red); }
.cart { border-radius: .8rem; background: var(--cartridge-cream); border: 4px solid var(--quest-gold); }
.save-crystal { clip-path: polygon(50% 0, 88% 25%, 74% 86%, 50% 100%, 26% 86%, 12% 25%); animation: crystalSpin 3.4s linear infinite; }
.item-readout { margin-top: 1rem; min-height: 3rem; border: 3px dashed rgba(246,240,216,.4); padding: .8rem; font-family: var(--font-pixel); color: var(--mana-mint); text-transform: uppercase; }
.acquired-ribbon { position: absolute; right: clamp(1rem, 6vw, 5rem); top: clamp(1rem, 12vh, 7rem); padding: .65rem 1rem; background: var(--dialogue-pink); color: var(--cartridge-cream); border: 4px solid var(--engine-navy); box-shadow: 7px 7px 0 rgba(0,0,0,.38), 0 0 24px rgba(255,79,216,.36); font-family: var(--font-pixel); text-transform: uppercase; letter-spacing: .12em; transform: rotate(8deg) scale(.6); opacity: 0; transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .22s ease; }
.acquired-ribbon.active { transform: rotate(8deg) scale(1); opacity: 1; }
.pickup-burst { position: absolute; width: 1rem; height: 1rem; pointer-events: none; opacity: 0; }
.pickup-burst.active { opacity: 1; animation: burst .45s ease-out; box-shadow: 0 -42px 0 var(--quest-gold), 36px -20px 0 var(--dialogue-pink), 36px 24px 0 var(--mana-mint), 0 42px 0 var(--controller-blue), -36px 22px 0 var(--boss-red), -36px -20px 0 var(--cartridge-cream); }

.dialogue-balcony { background: radial-gradient(circle at 65% 34%, rgba(255,79,216,.25), transparent 24rem), linear-gradient(155deg, #090D24, #1d1649 60%, #0f2b55); }
.balcony-rail { position: absolute; bottom: 18%; left: 8%; right: 8%; height: 2rem; background: var(--cartridge-cream); border: 4px solid var(--engine-navy); box-shadow: 0 18px 0 rgba(0,0,0,.34); }
.balcony-rail::before { content: ""; position: absolute; inset: 2.3rem 2rem auto; height: 8rem; background: repeating-linear-gradient(90deg, var(--cartridge-cream) 0 1rem, transparent 1rem 4rem); opacity: .8; }
.character-silhouette { position: absolute; left: 18%; bottom: 25%; width: 9rem; height: 17rem; background: linear-gradient(180deg, var(--dialogue-pink), var(--violet-shadow)); border: 4px solid var(--engine-navy); clip-path: polygon(31% 0, 68% 0, 82% 20%, 72% 46%, 100% 100%, 0 100%, 28% 46%, 18% 20%); filter: drop-shadow(0 0 35px rgba(255,79,216,.42)); }
.balcony-dialogue { width: min(66vw, 760px); margin-left: 14vw; }
.menu-choices { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.menu-choices button { background: linear-gradient(135deg, var(--controller-blue), var(--violet-shadow)); border-color: var(--engine-navy); box-shadow: 0 6px 0 rgba(9,13,36,.65); }
.minimap { position: absolute; right: 7%; top: 14%; width: 12rem; height: 12rem; border: 4px solid var(--mana-mint); background: rgba(9,13,36,.7); box-shadow: 0 0 32px rgba(67,244,183,.24); }
.minimap span { position: absolute; width: 2.4rem; height: 1.5rem; background: var(--quest-gold); border-radius: 50%; }
.minimap span:nth-child(1) { left: 18%; top: 20%; } .minimap span:nth-child(2) { right: 15%; top: 32%; background: var(--dialogue-pink); } .minimap span:nth-child(3) { left: 42%; bottom: 24%; background: var(--mana-mint); } .minimap span:nth-child(4) { right: 25%; bottom: 12%; background: var(--controller-blue); }
.exclamation { position: absolute; left: 24%; top: 18%; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--boss-red); color: var(--cartridge-cream); border: 4px solid var(--engine-navy); font: 3rem/1 var(--font-title); animation: spriteBob 1.2s steps(2, end) infinite; }

.save-portal { background: radial-gradient(circle at 50% 50%, rgba(255,79,216,.35), transparent 23rem), radial-gradient(circle at 50% 50%, rgba(67,244,183,.2), transparent 32rem), #090D24; }
.portal-ring { position: absolute; width: min(64vw, 34rem); aspect-ratio: 1; border: 8px solid var(--dialogue-pink); border-radius: 50%; box-shadow: 0 0 34px var(--dialogue-pink), inset 0 0 42px rgba(67,244,183,.3); animation: ringPulse 3s ease-in-out infinite; }
.portal-ring span { position: absolute; inset: var(--i, 10%); border: 3px dashed var(--mana-mint); border-radius: 50%; animation: rotateRing 8s linear infinite; }
.portal-ring span:nth-child(1) { --i: 10%; } .portal-ring span:nth-child(2) { --i: 22%; animation-direction: reverse; border-color: var(--quest-gold); } .portal-ring span:nth-child(3) { --i: 34%; border-color: var(--controller-blue); }
.save-plaque { position: relative; z-index: 2; text-align: center; max-width: 620px; background: rgba(23,18,58,.72); }
.save-plaque p { margin-inline: auto; }
.portal-crystal { position: absolute; right: 18%; bottom: 18%; width: 6rem; height: 6rem; }

.cx-companion { position: fixed; left: 50%; top: 50%; width: 2.4rem; height: 2.4rem; z-index: 45; pointer-events: none; transform: translate3d(-50%, -50%, 0); filter: drop-shadow(0 0 18px var(--mana-mint)); }
.cx-core { position: absolute; inset: 0; background: var(--mana-mint); clip-path: polygon(0 0, 100% 48%, 58% 61%, 44% 100%, 28% 60%, 0 70%); animation: cursorBlink .8s steps(2, end) infinite; }
.cx-trail { position: absolute; right: 65%; top: 55%; width: 3rem; height: .5rem; background: linear-gradient(90deg, transparent, var(--dialogue-pink)); transform: rotate(28deg); }
.panel-pop { opacity: 0; transform: translateY(30px) scale(.94); transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
.level-scene.in-view .panel-pop, .panel-pop.in-view { opacity: 1; transform: translateY(0) scale(1); }
.iris-wipe { position: fixed; inset: 0; z-index: 35; pointer-events: none; background: var(--engine-navy); clip-path: circle(0 at 50% 50%); transition: clip-path .55s ease; }
.iris-wipe.active { clip-path: circle(78% at 50% 50%); }

@keyframes spriteBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes twinkle { 50% { opacity: .35; transform: scale(.75); } }
@keyframes floatParticle { from { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-42vh) scale(.2); opacity: 0; } }
@keyframes crystalSpin { to { transform: rotateY(360deg) rotateZ(8deg); } }
@keyframes burst { from { transform: scale(.2); } to { transform: scale(1.8); opacity: 0; } }
@keyframes ringPulse { 50% { transform: scale(1.06); box-shadow: 0 0 70px var(--dialogue-pink), inset 0 0 80px rgba(67,244,183,.35); } }
@keyframes rotateRing { to { transform: rotate(360deg); } }
@keyframes cursorBlink { 50% { background: var(--quest-gold); } }

@media (max-width: 760px) {
  .quest-row, .inventory-grid { grid-template-columns: 1fr; }
  .desk-dialogue, .balcony-dialogue { width: min(88vw, 620px); margin-left: 0; }
  .sticky-wall, .shader-console, .minimap { display: none; }
  .cartridge-logo { min-height: 14rem; }
  .moon-window { width: 8rem; height: 6rem; }
}