:root {
  --black: #12071F;
  --cream: #FFE7A8;
  --pink: #FF4FA3;
  --purple: #2C145C;
  --lavender: #D8C9FF;
  --cyan: #39E7FF;
  --tomato: #FF3B2F;
  --melon: #A8FF3E;
  --title: "Bungee Shade", Impact, fantasy;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --body: "Nunito Sans", system-ui, sans-serif;
  --scribble: "Yomogi", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--black); color: var(--cream); }
body { font-family: var(--body); cursor: none; }
button { font: inherit; cursor: none; }

.crt-overlay {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .34;
  background:
    linear-gradient(rgba(255,255,255,.06) 50%, rgba(0,0,0,.16) 50%) 0 0/100% 6px,
    radial-gradient(circle at 50% 50%, transparent 45%, rgba(18,7,31,.7) 100%);
  mix-blend-mode: screen; animation: flicker 1.4s steps(2) infinite;
}

.cursor-claw { position: fixed; width: 34px; height: 34px; z-index: 120; pointer-events: none; transform: translate(-50%, -50%); }
.cursor-claw::before, .cursor-claw::after { content: ""; position: absolute; background: var(--melon); box-shadow: 0 0 12px var(--melon); }
.cursor-claw::before { width: 8px; height: 28px; left: 12px; top: 3px; transform: rotate(35deg); }
.cursor-claw::after { width: 8px; height: 22px; left: 22px; top: 9px; transform: rotate(-28deg); }

.insert-screen {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 28px;
  background: var(--black); overflow: hidden; transition: transform .7s steps(7), opacity .7s steps(7);
}
.insert-screen.started { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.screen-static { position: absolute; inset: 0; background-image: radial-gradient(var(--purple) 1px, transparent 1px), radial-gradient(var(--cyan) 1px, transparent 1px); background-size: 13px 13px, 17px 17px; opacity: .25; animation: staticJump .4s steps(2) infinite; }
.snack-slot { width: min(72vw, 560px); height: 90px; border: 10px solid var(--lavender); background: var(--purple); box-shadow: 0 0 0 8px var(--pink), 0 0 50px var(--cyan); display: flex; align-items: center; justify-content: center; gap: 20px; z-index: 1; }
.snack-slot span { width: 80px; height: 16px; background: var(--black); box-shadow: inset 0 0 10px #000; }
.tiny-label, .score, .prompt-line, .error-strip, .snack-meter { font-family: var(--pixel); font-size: clamp(9px, 1vw, 13px); letter-spacing: .04em; }
.insert-button { z-index: 1; font-family: var(--pixel); color: var(--black); background: var(--melon); border: 0; padding: 22px 30px; box-shadow: 8px 8px 0 var(--pink), -8px -8px 0 var(--cyan), 0 0 40px var(--melon); animation: snackPulse .8s steps(2) infinite; }
.hand-note, .scribble { z-index: 1; font-family: var(--scribble); color: var(--lavender); font-size: clamp(20px, 3vw, 38px); transform: rotate(-4deg); }
.scratch-set { position: absolute; width: 55vw; height: 35vh; z-index: 1; opacity: .8; }
.scratch-set i { position: absolute; width: 12px; height: 100%; background: var(--cyan); box-shadow: 0 0 25px var(--cyan); transform: rotate(18deg); animation: scratch 1.2s steps(4) infinite; }
.scratch-set i:nth-child(2){ left: 50%; animation-delay: .1s; background: var(--pink); }.scratch-set i:nth-child(3){ left: 65%; animation-delay: .22s; }

.arcade { width: 100vw; height: 100vh; overflow: hidden; background: var(--black); }
.rooms { height: 100%; width: 500vw; display: flex; transform: translateX(0); transition: transform .75s steps(9); }
.room { position: relative; min-width: 100vw; height: 100vh; overflow: hidden; padding: clamp(28px, 5vw, 80px); background: var(--black); }
.room::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(57,231,255,.08), transparent 28%, rgba(255,79,163,.12) 58%, transparent 80%); }
.room-alley { background: radial-gradient(circle at 72% 24%, #2C145C 0 12%, transparent 13%), var(--black); }
.room-den { background: linear-gradient(120deg, var(--purple), var(--black) 62%); }
.room-rooftop { background: linear-gradient(180deg, var(--purple), var(--black) 64%); }
.room-bedroom { background: repeating-linear-gradient(90deg, var(--black) 0 60px, #1d0c32 60px 90px); }
.room-secret { background: radial-gradient(circle at center, var(--purple), var(--black) 62%); display: grid; place-items: center; }

.toy-skyline { position: absolute; left: 0; right: 0; bottom: 10vh; height: 24vh; opacity: .9; background: linear-gradient(to top, var(--purple), var(--purple)) 2% 100%/9% 70% no-repeat, linear-gradient(to top, var(--pink), var(--pink)) 13% 100%/7% 46% no-repeat, linear-gradient(to top, var(--cyan), var(--cyan)) 23% 100%/11% 82% no-repeat, linear-gradient(to top, var(--melon), var(--melon)) 38% 100%/9% 54% no-repeat, linear-gradient(to top, var(--lavender), var(--lavender)) 52% 100%/13% 68% no-repeat, linear-gradient(to top, var(--tomato), var(--tomato)) 70% 100%/8% 52% no-repeat, linear-gradient(to top, var(--purple), var(--purple)) 84% 100%/12% 78% no-repeat; filter: drop-shadow(10px 10px 0 rgba(0,0,0,.45)); }
.blocks { bottom: 4vh; transform: skewY(-3deg); }
.moon { position: absolute; right: 9vw; top: 12vh; width: 120px; height: 120px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 45px var(--cream); }
.moon-bite::after { content:""; position: absolute; right: -8px; top: 20px; width: 45px; height: 45px; background: var(--black); border-radius: 50%; box-shadow: -32px 56px 0 -12px var(--black); }

.cartridge, .speech-bubble, .save-card { position: relative; z-index: 3; max-width: 720px; padding: clamp(24px, 4vw, 48px); background: var(--lavender); color: var(--black); border: 8px solid var(--black); box-shadow: 12px 12px 0 var(--pink), 20px 20px 0 rgba(0,0,0,.45); clip-path: polygon(0 8%, 7% 8%, 7% 0, 92% 0, 92% 7%, 100% 7%, 100% 92%, 94% 92%, 94% 100%, 5% 100%, 5% 92%, 0 92%); }
.hero-cart { margin: 10vh 0 0 6vw; }
.sticker-window { margin: 12vh 0 0 46vw; transform: rotate(2deg); }
.bedroom-card { margin: 10vh 0 0 8vw; background: var(--cream); box-shadow: 12px 12px 0 var(--tomato), 20px 20px 0 rgba(0,0,0,.5); }
.speech-bubble { margin: 18vh 0 0 15vw; border-radius: 34px; background: var(--cream); clip-path: none; }
.speech-bubble::after { content:""; position: absolute; left: 70px; bottom: -38px; border: 42px solid transparent; border-top-color: var(--cream); border-left-width: 10px; }
.save-card { text-align: center; background: var(--black); color: var(--cream); border-color: var(--melon); box-shadow: 0 0 0 8px var(--pink), 0 0 60px var(--cyan); }
h1, h2 { font-family: var(--title); margin: 8px 0 16px; line-height: .94; letter-spacing: .04em; }
h1 { font-size: clamp(58px, 11vw, 148px); color: var(--pink); text-shadow: 8px 8px 0 var(--cyan), 14px 14px 0 var(--black); }
h2 { font-size: clamp(38px, 7vw, 98px); color: var(--purple); text-shadow: 5px 5px 0 var(--melon); }
.save-card h2 { color: var(--melon); text-shadow: 5px 5px 0 var(--pink); }
.bite { display: inline-block; color: var(--melon); transform: rotate(20deg) translateY(-8px); }
.story { font-size: clamp(18px, 2vw, 25px); line-height: 1.3; font-weight: 900; }
.prompt-line, .error-strip { margin-top: 22px; padding: 12px; background: var(--black); color: var(--melon); box-shadow: inset 0 -6px 0 var(--purple); }
.danger, .error-strip { color: var(--tomato); }

.vending { position: absolute; left: 5vw; bottom: 18vh; width: 140px; height: 260px; background: var(--cyan); border: 8px solid var(--black); box-shadow: 10px 10px 0 var(--pink); display: grid; gap: 10px; padding: 18px; }
.vending b { background: var(--cream); border: 5px solid var(--black); animation: blinkPanel 1.2s steps(2) infinite; }
.foreground { position: absolute; left: 0; right: 0; bottom: 0; height: 14vh; z-index: 5; background: var(--black); }
.rubble i, .roof i { position: absolute; bottom: 6vh; width: 90px; height: 60px; background: var(--purple); border: 6px solid var(--black); box-shadow: 8px 8px 0 var(--pink); }
.rubble i:nth-child(1){left:10%;}.rubble i:nth-child(2){left:28%;height:90px;background:var(--cyan)}.rubble i:nth-child(3){left:70%;background:var(--melon)}.rubble i:nth-child(4){left:84%;height:110px;background:var(--tomato)}
.tail { position: absolute; width: 200px; height: 70px; border-radius: 80px 0 0 80px; background: var(--pink); right: 12vw; bottom: 25vh; border: 8px solid var(--black); animation: tailWiggle .9s steps(3) infinite; }
.tail::after { content:""; position:absolute; right:-25px; top:15px; border-left:45px solid var(--pink); border-top:18px solid transparent; border-bottom:18px solid transparent; }

.claw-machine { position: absolute; left: 8vw; top: 11vh; width: 330px; height: 560px; border: 10px solid var(--cyan); background: rgba(216,201,255,.18); box-shadow: 12px 12px 0 var(--black), 0 0 40px var(--cyan); }
.claw { position: absolute; left: 130px; top: 20px; width: 70px; height: 170px; border-left: 7px solid var(--melon); }
.claw i { position: absolute; bottom: 0; width: 8px; height: 70px; background: var(--melon); transform-origin: top; }.claw i:nth-child(1){ transform: rotate(28deg); }.claw i:nth-child(2){ left:26px; }.claw i:nth-child(3){ left:52px; transform: rotate(-28deg); }
.capsules b { position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 6px solid var(--black); background: var(--pink); bottom: 35px; animation: capsuleHop 1.1s steps(3) infinite; }.capsules b:nth-child(1){left:35px}.capsules b:nth-child(2){left:115px;background:var(--melon);animation-delay:.2s}.capsules b:nth-child(3){left:195px;background:var(--cream);animation-delay:.4s}.capsules b:nth-child(4){left:245px;bottom:105px;background:var(--cyan);animation-delay:.1s}
.eyes span, .boss-eyes span, .wink span { display: inline-block; width: 58px; height: 58px; border-radius: 50%; background: var(--melon); border: 8px solid var(--black); margin: 8px; animation: eyeBlink 2s steps(2) infinite; }
.cabinet-eyes { position: absolute; right: 12vw; top: 16vh; }
.stickers { position: absolute; left: 38vw; bottom: 16vh; display: grid; gap: 18px; transform: rotate(-7deg); }
.stickers b, .bandaids span { font-family: var(--scribble); font-size: 28px; color: var(--black); background: var(--cream); padding: 12px 24px; border: 5px solid var(--black); box-shadow: 7px 7px 0 var(--pink); }

.cassette-cloud { position: absolute; width: 210px; height: 80px; background: var(--lavender); border: 7px solid var(--black); border-radius: 24px; box-shadow: 9px 9px 0 var(--cyan); animation: cloudStep 4s steps(5) infinite; }
.cassette-cloud::before, .cassette-cloud::after { content:""; position:absolute; top:22px; width:34px; height:34px; border-radius:50%; background:var(--black); box-shadow: inset 0 0 0 10px var(--cream); }
.cassette-cloud::before{left:42px}.cassette-cloud::after{right:42px}.c1{left:12vw;top:12vh}.c2{right:16vw;top:24vh;animation-delay:1s;background:var(--cyan)}
.ramen-moon { position: absolute; right: 12vw; top: 10vh; width: 260px; height: 260px; border-radius: 50%; background: var(--cream); border: 10px solid var(--black); box-shadow: 0 0 60px var(--cream); overflow: hidden; }
.noodles { position: absolute; left: -20px; right: -20px; bottom: 50px; height: 80px; background: repeating-linear-gradient(0deg, var(--pink) 0 8px, var(--cream) 8px 17px); animation: noodleWave .8s steps(2) infinite; }
.roof i:nth-child(1){left: 8%; background: var(--cyan)}.roof i:nth-child(2){left: 54%; height: 100px; background: var(--purple)}.roof i:nth-child(3){left: 80%; background: var(--melon)}

.warning-cones { position: absolute; right: 8vw; bottom: 15vh; display: flex; gap: 20px; }.warning-cones i { width: 0; height: 0; border-left: 34px solid transparent; border-right: 34px solid transparent; border-bottom: 110px solid var(--tomato); filter: drop-shadow(8px 8px 0 var(--black)); }
.boss-screen { position: absolute; right: 12vw; top: 12vh; width: 360px; height: 300px; display: grid; place-items: center; background: var(--black); border: 10px solid var(--melon); box-shadow: 12px 12px 0 var(--tomato), 0 0 45px var(--melon); font-family: var(--pixel); color: var(--melon); }
.bandaids { position: absolute; left: 55vw; bottom: 21vh; transform: rotate(8deg); display: flex; gap: 22px; }
.save-slot { display: grid; gap: 12px; margin: 24px auto; padding: 18px; max-width: 420px; background: var(--purple); border: 5px solid var(--cyan); font-family: var(--pixel); font-size: 12px; color: var(--cream); }
.restart { border: 0; background: var(--pink); color: var(--black); font-family: var(--pixel); padding: 18px 26px; box-shadow: 7px 7px 0 var(--cyan); }
.wink { position: absolute; right: 12vw; top: 18vh; }.wink span:nth-child(2) { height: 16px; border-radius: 0; animation: wink .8s steps(2) infinite; }
.iris { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0 38%, rgba(18,7,31,.82) 39% 100%); pointer-events: none; animation: irisPulse 2s steps(5) infinite; }

.footprints { position: fixed; z-index: 95; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: clamp(10px, 2vw, 28px); }
.paw { position: relative; width: 58px; height: 44px; border: 0; border-radius: 50% 50% 46% 46%; background: var(--lavender); color: var(--black); font-family: var(--pixel); font-size: 10px; box-shadow: 5px 5px 0 var(--black); transition: transform .2s steps(2), background .2s; }
.paw::before { content:""; position:absolute; left:8px; top:-12px; width:10px; height:10px; border-radius:50%; background:inherit; box-shadow: 16px -4px 0 currentColor, 32px 0 0 currentColor; color: inherit; }
.paw.active { background: var(--melon); transform: translateY(-10px) rotate(-7deg); box-shadow: 0 0 24px var(--melon), 5px 5px 0 var(--pink); }
.snack-meter { position: fixed; z-index: 96; top: 18px; right: 18px; color: var(--melon); background: var(--black); border: 4px solid var(--cyan); padding: 12px; box-shadow: 6px 6px 0 var(--pink); }

@keyframes flicker { 0%,100%{opacity:.28} 50%{opacity:.42} }
@keyframes staticJump { to { transform: translate(7px, -9px); } }
@keyframes snackPulse { 50% { transform: scale(1.04); background: var(--cream); } }
@keyframes scratch { 50% { height: 50%; transform: rotate(23deg) translateY(40px); opacity: .4; } }
@keyframes blinkPanel { 50% { background: var(--pink); } }
@keyframes tailWiggle { 50% { transform: rotate(-8deg) translateX(25px); } }
@keyframes capsuleHop { 50% { transform: translateY(-18px); } }
@keyframes eyeBlink { 44%, 55% { transform: scaleY(.12); background: var(--pink); } }
@keyframes cloudStep { 50% { transform: translateX(46px); } }
@keyframes noodleWave { 50% { transform: translateY(10px); } }
@keyframes wink { 50% { transform: rotate(-8deg); background: var(--pink); } }
@keyframes irisPulse { 50% { background: radial-gradient(circle at center, transparent 0 48%, rgba(18,7,31,.82) 49% 100%); } }

@media (max-width: 760px) {
  .room { padding: 22px; }
  .cartridge, .speech-bubble, .save-card { max-width: 88vw; }
  .hero-cart, .sticker-window, .speech-bubble, .bedroom-card { margin: 15vh auto 0; transform: none; }
  .claw-machine, .boss-screen, .vending { opacity: .35; transform: scale(.75); transform-origin: top left; }
  .snack-meter { display: none; }
  .paw { width: 44px; height: 34px; font-size: 8px; }
}