:root {
  --midnight: #15112B;
  --grape: #6B4CFF;
  --ghost: #F5F2FF;
  --lime: #B8FF5C;
  --pink: #FF4FA3;
  --moon: #FFE66D;
  --blue: #263B73;
  --cream: #FFF3C7;
  --pixel-title: "Press Start 2P", "Pixelify Sans", "Courier New", monospace;
  --pixel-copy: "Pixelify Sans", "Courier New", monospace;
  --goo: "Cherry Bomb One", "Trebuchet MS", cursive;
  --read: "Nunito Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--midnight);
  color: var(--ghost);
  font-family: var(--pixel-copy);
  overflow-x: hidden;
  cursor: none;
}
button { font: inherit; cursor: none; }
.scanlines, .dead-pixels { position: fixed; inset: 0; pointer-events: none; z-index: 90; }
.scanlines { opacity: .25; background: repeating-linear-gradient(0deg, rgba(245,242,255,.05) 0 1px, transparent 2px 5px); mix-blend-mode: screen; animation: scan 5s steps(6) infinite; }
.dead-pixels { opacity: .5; background-image: radial-gradient(circle, var(--lime) 0 1px, transparent 2px), radial-gradient(circle, var(--pink) 0 1px, transparent 2px), radial-gradient(circle, var(--moon) 0 1px, transparent 2px); background-size: 173px 139px, 211px 157px, 127px 191px; }

.boot-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #263B73 0 18%, #15112B 55%); transition: transform 1s steps(8), opacity .8s ease; }
.boot-gate.booted { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.gate-shell { width: min(760px, 86vw); min-height: 72vh; position: relative; display: grid; place-items: center; border: 8px solid var(--blue); border-radius: 34px; background: linear-gradient(135deg, rgba(107,76,255,.62), rgba(21,17,43,.92)), repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,.04) 19px 24px); box-shadow: inset 0 0 0 8px rgba(245,242,255,.08), 0 0 70px rgba(107,76,255,.55); }
.gate-label { position: absolute; top: 24px; left: 28px; padding: 10px 14px; color: var(--cream); background: var(--pink); box-shadow: 6px 6px 0 var(--blue); transform: rotate(-2deg); text-transform: uppercase; font-size: .78rem; }
.gg-eyes { border: 0; display: flex; gap: 32px; background: transparent; color: var(--lime); font: 900 clamp(5rem, 16vw, 10rem)/1 var(--pixel-title); text-shadow: 0 0 20px var(--lime), 0 0 50px var(--lime); animation: blink 3s steps(1) infinite; }
.booting .gg-eyes { animation: bootBlink .55s steps(2) 3; }
.boot-title { position: absolute; bottom: 25%; opacity: 0; font: 900 clamp(1.6rem, 5vw, 4rem)/1 var(--pixel-title); letter-spacing: -.08em; color: var(--ghost); text-shadow: 4px 4px 0 var(--blue); }
.booting .boot-title { opacity: 1; animation: glitch .5s steps(2) 4; }
.boot-title b { color: var(--lime); letter-spacing: -.14em; }
.boot-title em { display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin: 0 .08em; background: var(--moon); box-shadow: 0 0 20px var(--moon); transform: translateY(-180px); }
.booting .boot-title em { animation: coinDrop .8s steps(8) forwards; }
.boot-title strong { color: var(--pink); font-style: normal; }
.boot-load { position: absolute; bottom: 15%; color: var(--cream); background: var(--blue); padding: 14px 18px; box-shadow: 5px 5px 0 var(--midnight); }
.contact-pins { position: absolute; bottom: 18px; display: flex; gap: 10px; }.contact-pins i { width: 44px; height: 16px; background: var(--moon); box-shadow: inset 0 -4px 0 rgba(38,59,115,.45); }

.screen-nav { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 70; display: grid; gap: 10px; }
.screen-nav button { color: var(--cream); background: var(--blue); border: 3px solid var(--ghost); padding: 9px 10px; box-shadow: 4px 4px 0 var(--midnight); text-transform: uppercase; font-size: .68rem; transition: transform .2s steps(2), background .2s; }
.screen-nav button.active { background: var(--pink); color: var(--midnight); transform: translateX(8px); }
.inventory { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 75; display: flex; gap: 8px; padding: 8px; background: rgba(21,17,43,.82); border: 4px solid var(--blue); box-shadow: 0 0 0 4px rgba(245,242,255,.08), 0 0 30px rgba(107,76,255,.35); }
.slot { width: 54px; height: 44px; display: grid; place-items: center; color: rgba(245,242,255,.32); border: 3px solid var(--blue); background: rgba(38,59,115,.55); font-weight: 900; }
.slot.collected { color: var(--midnight); background: var(--moon); box-shadow: 0 0 20px var(--moon); animation: pop .35s steps(3); }
.slot[data-token="sticker"].collected { background: var(--cream); }.slot[data-token="battery"].collected { background: var(--lime); }.slot[data-token="button"].collected { background: var(--pink); }.slot[data-token="star"].collected { background: var(--grape); color: var(--ghost); }

.ghost-cursor { position: fixed; left: 0; top: 0; width: 34px; height: 42px; z-index: 120; pointer-events: none; background: var(--ghost); border-radius: 18px 18px 8px 8px; box-shadow: 0 0 18px var(--ghost); image-rendering: pixelated; transform: translate3d(-100px,-100px,0); }
.ghost-cursor::before { content: ""; position: absolute; left: 8px; top: 15px; width: 5px; height: 5px; background: var(--midnight); box-shadow: 14px 0 0 var(--midnight); }
.ghost-cursor::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 10px; height: 10px; background: var(--ghost); box-shadow: 12px 0 0 var(--ghost), 24px 0 0 var(--ghost); }
.ghost-cursor span { position: absolute; inset: 6px; border: 3px solid var(--grape); border-radius: 14px; opacity: .55; }

.cartridge-crawl { width: 500vw; min-height: 100vh; display: flex; transform: translateX(calc(var(--screen, 0) * -100vw)); transition: transform .7s steps(8); }
.game-screen { width: 100vw; min-height: 100vh; flex: 0 0 100vw; position: relative; overflow: hidden; isolation: isolate; padding: 8vh 8vw 12vh; background: var(--midnight); }
.tilemap { position: absolute; inset: 0; z-index: -2; background-size: 56px 56px, 14px 14px; image-rendering: pixelated; }
.tilemap::after { content: ""; position: absolute; inset: 8vh 6vw; border: 8px solid var(--blue); box-shadow: inset 0 0 0 8px rgba(245,242,255,.08), 14px 14px 0 rgba(0,0,0,.22); border-radius: 18px; }
.moon-map { background-image: radial-gradient(circle at 74% 20%, var(--moon) 0 70px, transparent 72px), linear-gradient(45deg, rgba(107,76,255,.25) 25%, transparent 25% 75%, rgba(107,76,255,.25) 75%), linear-gradient(45deg, transparent 25%, rgba(38,59,115,.55) 25% 75%, transparent 75%); background-color: var(--midnight); }
.sticker-map { background: repeating-linear-gradient(-12deg, rgba(255,243,199,.18) 0 14px, transparent 15px 40px), radial-gradient(circle at 72% 72%, rgba(184,255,92,.2), transparent 34%), var(--blue); }
.hall-map { background: radial-gradient(circle at 32% 44%, rgba(184,255,92,.22), transparent 18%), radial-gradient(circle at 68% 44%, rgba(184,255,92,.22), transparent 18%), repeating-linear-gradient(90deg, rgba(245,242,255,.05) 0 9px, transparent 10px 30px), var(--midnight); }
.pillow-map { background: repeating-linear-gradient(0deg, rgba(255,79,163,.18) 0 24px, transparent 25px 48px), radial-gradient(circle at 48% 58%, rgba(255,230,109,.2), transparent 30%), var(--grape); }
.shrine-map { background: radial-gradient(circle at 50% 35%, rgba(255,230,109,.25), transparent 26%), repeating-conic-gradient(from 45deg, rgba(184,255,92,.16) 0 25%, transparent 0 50%) 0 0/54px 54px, var(--midnight); }

.wordmark { position: absolute; left: 12vw; top: 14vh; font: 900 clamp(3rem, 11vw, 10rem)/.9 var(--pixel-title); text-shadow: 7px 7px 0 var(--blue), 0 0 34px rgba(245,242,255,.35); letter-spacing: -.12em; }
.wordmark b { color: var(--lime); text-shadow: 0 0 24px var(--lime), 8px 8px 0 var(--blue); }.wordmark em { color: var(--pink); font-style: normal; }.coin-dot { color: var(--moon); font-style: normal; display: inline-block; animation: spinCoin 1.1s steps(6) infinite; }
.moon-coin { position: absolute; right: 22vw; top: 28vh; width: 86px; height: 86px; display: grid; place-items: center; color: var(--midnight); background: var(--moon); border-radius: 50%; box-shadow: inset -10px -10px 0 rgba(38,59,115,.22), 0 0 35px var(--moon); font-size: 0; animation: bounceCoin 1.2s steps(5) infinite; }
.moon-coin::before { content: ""; width: 24px; height: 24px; background: var(--cream); box-shadow: 22px 18px 0 rgba(38,59,115,.35), -14px 30px 0 rgba(38,59,115,.25); }
.speech { position: absolute; max-width: 470px; padding: 22px 24px; color: var(--midnight); background: var(--cream); border: 5px solid var(--midnight); box-shadow: 8px 8px 0 var(--blue), 0 0 0 4px var(--ghost); line-height: 1.45; font-size: clamp(.9rem, 1.5vw, 1.2rem); }
.speech::after { content: ""; position: absolute; left: 38px; bottom: -25px; width: 30px; height: 30px; background: var(--cream); border-right: 5px solid var(--midnight); border-bottom: 5px solid var(--midnight); transform: rotate(45deg); }
.bubble-one { left: 12vw; bottom: 21vh; }.forest-bubble { left: 45vw; bottom: 24vh; }.hall-bubble { right: 12vw; bottom: 18vh; }.boss-bubble { left: 10vw; top: 22vh; }.shrine-bubble { right: 10vw; top: 23vh; }
.pixel-button { position: absolute; z-index: 5; border: 4px solid var(--midnight); color: var(--midnight); background: var(--lime); padding: 14px 18px; box-shadow: 6px 6px 0 var(--blue); text-transform: uppercase; transition: transform .18s steps(2), box-shadow .18s steps(2); }
.pixel-button:hover, .pixel-button.pressed { transform: translate(4px,4px); box-shadow: 2px 2px 0 var(--blue); background: var(--moon); animation: shake .25s steps(2); }
.collect-button { right: 18vw; bottom: 25vh; }.forest-token { right: 12vw; top: 20vh; background: var(--cream); }.battery-token { left: 11vw; bottom: 23vh; background: var(--lime); }.button-token { left: 27vw; bottom: 23vh; background: var(--pink); }.comfort-button { right: 18vw; bottom: 18vh; background: var(--cream); }.save-button { left: 16vw; bottom: 18vh; background: var(--moon); }
.platform { position: absolute; height: 28px; background: var(--grape); border: 4px solid var(--blue); box-shadow: 0 8px 0 rgba(0,0,0,.24); }.p1 { width: 210px; left: 8vw; top: 47vh; }.p2 { width: 140px; left: 45vw; top: 62vh; }.p3 { width: 260px; right: 10vw; bottom: 13vh; }
.pause-card, .menu-window, .end-caption { position: absolute; color: var(--ghost); background: rgba(21,17,43,.82); border: 4px solid var(--blue); box-shadow: 7px 7px 0 rgba(0,0,0,.25); padding: 16px; font-family: var(--read); }.pause-card { right: 11vw; top: 12vh; }.menu-window { left: 13vw; top: 17vh; }.end-caption { left: 50%; bottom: 9vh; transform: translateX(-50%); color: var(--lime); }

.sticker-sheet { position: absolute; left: 12vw; top: 14vh; width: 360px; height: 430px; background: var(--cream); border: 6px solid var(--midnight); box-shadow: 12px 12px 0 var(--pink); transform: rotate(-5deg); transition: transform .7s steps(7); }
.sticker-sheet.peeled { transform: rotate(-12deg) translate(-40px,-26px); }.peel-corner { position: absolute; right: -14px; top: -14px; background: var(--moon); border: 4px solid var(--midnight); padding: 12px; box-shadow: 5px 5px 0 var(--blue); }
.sticker { position: absolute; display: grid; place-items: center; color: var(--midnight); font-family: var(--goo); border: 4px solid var(--midnight); box-shadow: 4px 4px 0 rgba(0,0,0,.18); }.mushroom { left: 30px; top: 58px; width: 120px; height: 90px; background: var(--pink); border-radius: 50% 50% 20% 20%; }.star { right: 45px; top: 68px; width: 96px; height: 96px; background: var(--lime); clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%); }.ghostie { left: 60px; bottom: 78px; width: 115px; height: 135px; background: var(--ghost); border-radius: 50% 50% 18px 18px; }.crack { right: 34px; bottom: 80px; width: 110px; height: 70px; background: var(--grape); color: var(--ghost); transform: rotate(11deg); }
.level-title { position: absolute; top: 11vh; right: 9vw; max-width: 580px; text-align: right; }.level-title small { color: var(--moon); background: var(--blue); padding: 9px 12px; }.level-title h2 { margin: 18px 0 0; color: var(--ghost); font: 900 clamp(2rem, 6vw, 5.8rem)/.95 var(--pixel-title); text-shadow: 6px 6px 0 var(--blue), 0 0 24px rgba(184,255,92,.22); }

.portal-pair { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: min(12vw, 140px); }.gg-button { width: clamp(150px, 19vw, 250px); height: clamp(150px, 19vw, 250px); border-radius: 50%; border: 10px solid var(--blue); background: radial-gradient(circle at 38% 32%, var(--ghost), var(--lime) 42%, var(--grape) 43% 70%, var(--midnight) 72%); color: var(--midnight); font: 900 clamp(5rem, 11vw, 9rem)/1 var(--pixel-title); box-shadow: 0 0 35px rgba(184,255,92,.55), inset 0 -18px 0 rgba(21,17,43,.3); animation: portal 1.4s steps(4) infinite; }.gg-button.active { background: var(--pink); animation: shake .22s steps(2) 2; }.speaker-grille { position: absolute; left: 13vw; top: 18vh; display: grid; gap: 12px; }.speaker-grille i { width: 210px; height: 14px; background: var(--blue); box-shadow: 4px 4px 0 rgba(0,0,0,.3); }
.boss { position: absolute; left: 50%; top: 50%; width: min(44vw, 520px); height: min(42vw, 470px); transform: translate(-50%,-42%); background: var(--cream); border: 8px solid var(--midnight); border-radius: 34% 44% 26% 30%; box-shadow: 14px 14px 0 var(--blue), inset -28px -24px 0 rgba(255,79,163,.24); display: grid; place-items: center; transition: transform .5s steps(5), background .5s; }.boss.friend { transform: translate(-50%,-42%) scale(1.05) rotate(-2deg); background: var(--ghost); }.boss-eyes { display: flex; gap: 80px; }.boss-eyes i { width: 74px; height: 74px; border-radius: 50%; background: var(--lime); border: 8px solid var(--blue); box-shadow: 0 0 26px var(--lime); }.boss span { position: absolute; bottom: 22%; color: var(--pink); font: 900 clamp(2rem,5vw,5rem)/1 var(--goo); }.blanket { position: absolute; border: 5px solid var(--midnight); background: var(--pink); box-shadow: 8px 8px 0 var(--blue); }.b1 { width: 300px; height: 100px; left: 12vw; bottom: 14vh; transform: rotate(8deg); }.b2 { width: 260px; height: 130px; right: 11vw; top: 14vh; transform: rotate(-10deg); background: var(--moon); }.b3 { width: 220px; height: 95px; right: 9vw; bottom: 30vh; background: var(--lime); }
.save-battery { position: absolute; left: 15vw; top: 20vh; width: 250px; height: 140px; display: grid; place-items: center; color: var(--midnight); background: var(--lime); border: 8px solid var(--blue); box-shadow: 10px 10px 0 var(--midnight), 0 0 35px rgba(184,255,92,.4); font: 900 2rem var(--pixel-title); }.save-battery::after { content: ""; position: absolute; right: -30px; top: 44px; width: 22px; height: 52px; background: var(--blue); }.save-battery i { position: absolute; inset: 18px; border: 4px dashed var(--blue); }
.tiny-ghost { position: absolute; left: 47vw; top: 42vh; width: 120px; height: 145px; background: var(--ghost); border-radius: 55% 55% 16px 16px; box-shadow: 0 0 35px var(--ghost); animation: ghostFloat 1.5s steps(5) infinite; }.tiny-ghost::before { content: ""; position: absolute; left: 31px; top: 50px; width: 12px; height: 12px; background: var(--midnight); box-shadow: 45px 0 0 var(--midnight); }.tiny-ghost span { position: absolute; left: 18px; top: 18px; width: 84px; height: 45px; border: 7px solid var(--grape); border-radius: 50%; }
.type.done::after { content: "▌"; color: var(--pink); animation: blinkCursor .8s steps(1) infinite; }

@keyframes scan { to { transform: translateY(12px); } } @keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.12); } } @keyframes bootBlink { 50% { transform: scaleY(.08); } } @keyframes coinDrop { to { transform: translateY(0) rotate(360deg); } } @keyframes glitch { 50% { transform: translate(4px,-2px); filter: hue-rotate(80deg); } } @keyframes spinCoin { 50% { transform: scaleX(.18); } } @keyframes bounceCoin { 50% { transform: translateY(-24px); } } @keyframes pop { 50% { transform: scale(1.22) rotate(-8deg); } } @keyframes shake { 25% { transform: translate(7px,1px); } 75% { transform: translate(1px,7px); } } @keyframes portal { 50% { filter: hue-rotate(35deg); transform: scale(1.03); } } @keyframes ghostFloat { 50% { transform: translateY(-18px) scale(1.04); } } @keyframes blinkCursor { 50% { opacity: 0; } }

@media (max-width: 800px) {
  body { cursor: auto; }.ghost-cursor { display: none; }.screen-nav { left: 8px; transform: none; top: 8px; grid-template-columns: repeat(5, auto); }.screen-nav button { font-size: .52rem; padding: 7px 5px; }.inventory { bottom: 8px; }.slot { width: 42px; height: 36px; }.game-screen { padding: 12vh 7vw 16vh; }.wordmark { left: 8vw; top: 18vh; }.speech { max-width: 78vw; left: 10vw !important; right: auto !important; bottom: 24vh; top: auto; }.level-title { left: 8vw; right: 8vw; text-align: left; }.level-title h2 { font-size: clamp(1.8rem, 11vw, 4rem); }.sticker-sheet { width: 300px; height: 350px; left: 9vw; top: 29vh; transform: scale(.75) rotate(-5deg); }.portal-pair { gap: 22px; }.gg-button { width: 132px; height: 132px; font-size: 4rem; }.boss { width: 78vw; height: 54vh; }.boss-eyes { gap: 42px; }.moon-coin { right: 12vw; top: 42vh; }.pause-card, .menu-window { display: none; }
}