:root {
  --tile: 18px;
  --night: #17111F;
  --violet: #2B1B4A;
  --cyan: #36F7E2;
  --coin: #FFE66D;
  --heart: #FF4F7B;
  --green: #55D86A;
  --orange: #F28A30;
  --parchment: #F6E7B1;
  --frame: 180ms;
  --pixel-title: "Press Start 2P", "Pixel Operator", "Courier New", monospace;
  --pixel: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --debug: "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--night); color: var(--parchment); overflow-y: hidden; }

body { font-family: var(--pixel); image-rendering: pixelated; }

button { font: inherit; color: inherit; }

.crt-overlay {
  pointer-events: none; position: fixed; inset: 0; z-index: 30; opacity: .36;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px), radial-gradient(circle at 50% 45%, transparent 0 42%, rgba(23,17,31,.55) 85%);
  mix-blend-mode: screen;
}

.boot-screen {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; gap: 18px; align-content: center;
  background: var(--night); transition: transform 900ms steps(7), opacity 900ms steps(7); overflow: hidden;
}

.boot-screen::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(54,247,226,.05) 12px 14px); animation: scan 1s steps(5) infinite; }
.boot-screen.loaded { transform: translateY(-105%); opacity: 0; }
.boot-copy, .press-start { font-family: var(--debug); color: var(--cyan); font-size: 24px; letter-spacing: 2px; z-index: 1; }
.boot-title { font-family: var(--pixel-title); color: var(--coin); font-size: clamp(32px, 7vw, 80px); text-shadow: 6px 6px 0 var(--heart), -6px -6px 0 var(--violet); animation: blink 700ms steps(2) infinite; z-index: 1; }

.cartridge { width: 230px; height: 260px; background: var(--violet); border: 6px solid var(--parchment); box-shadow: 10px 10px 0 #000, inset -10px -10px 0 rgba(0,0,0,.25); position: relative; z-index: 1; animation: cartDrop 1600ms steps(7) both; }
.cart-label { margin: 34px auto 0; width: 150px; height: 90px; background: var(--parchment); border: 5px solid var(--night); color: var(--night); display: grid; place-items: center; font-family: var(--pixel-title); font-size: 13px; transform: rotate(-2deg); }
.cart-notch { position: absolute; left: 32px; right: 32px; bottom: 56px; height: 36px; border: 5px solid var(--night); background: #201430; }
.cart-pins { position: absolute; left: 24px; right: 24px; bottom: 10px; display: flex; gap: 8px; }
.cart-pins i { height: 28px; flex: 1; background: var(--coin); border: 3px solid var(--night); }

.hud { position: fixed; top: 14px; left: 14px; right: 14px; height: 58px; z-index: 25; display: grid; grid-template-columns: 150px 1fr 190px; align-items: center; gap: 14px; padding: 8px 12px; background: rgba(23,17,31,.9); border: 4px solid var(--cyan); box-shadow: 6px 6px 0 #000; }
.hud-title, .room { font-family: var(--pixel-title); font-size: 11px; color: var(--coin); }
.mini-map { height: 28px; border: 3px solid var(--parchment); background: var(--violet); display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.room { display: grid; place-items: center; border-right: 2px solid var(--night); color: var(--green); opacity: .55; }
.room.active { opacity: 1; color: var(--coin); background: rgba(54,247,226,.12); }
.player-dot { position: absolute; top: -7px; left: 0; width: 14px; height: 14px; background: var(--heart); border: 3px solid var(--parchment); box-shadow: 0 0 0 3px var(--night); transition: left 120ms steps(2); animation: dotBlink 500ms steps(2) infinite; }
.debug-readout { font-family: var(--debug); color: var(--cyan); font-size: 22px; text-align: right; }

.world-strip { display: flex; width: 480vw; height: 100vh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-color: var(--cyan) var(--violet); }
.scene { min-width: 120vw; height: 100vh; position: relative; scroll-snap-align: start; overflow: hidden; background-color: var(--night); background-image: linear-gradient(180deg, #17111F 0%, #2B1B4A 62%, #17111F 62%); }
.scene::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(246,231,177,.04) 25%, transparent 25%, transparent 75%, rgba(246,231,177,.04) 75%), linear-gradient(45deg, rgba(246,231,177,.04) 25%, transparent 25%, transparent 75%, rgba(246,231,177,.04) 75%); background-position: 0 0, 9px 9px; background-size: 18px 18px; opacity: .35; }
.scene-label { position: absolute; top: 92px; left: 38px; z-index: 3; font-family: var(--pixel-title); font-size: 16px; color: var(--coin); text-shadow: 4px 4px 0 #000; }
.sky-layer { position: absolute; inset: 120px 0 auto 0; height: 100px; color: var(--cyan); font-family: var(--debug); font-size: 40px; opacity: .8; }
.sky-layer span { position: absolute; padding: 4px 12px; border: 3px solid var(--cyan); background: rgba(43,27,74,.7); box-shadow: 5px 5px 0 #000; animation: cloudStep 5s steps(8) infinite; }
.sky-layer span:nth-child(1) { left: 14%; top: 10px; } .sky-layer span:nth-child(2) { left: 45%; top: 50px; animation-delay: -2s; } .sky-layer span:nth-child(3) { left: 75%; top: 20px; animation-delay: -3s; }
.moon { position: absolute; right: 16%; top: 118px; width: 72px; height: 72px; background: var(--parchment); box-shadow: 10px 0 0 var(--coin), 0 0 0 6px var(--night), 0 0 0 12px var(--violet); clip-path: polygon(0 0, 86% 0, 86% 14%, 100% 14%, 100% 86%, 86% 86%, 86% 100%, 0 100%); }
.tile-loader { position: absolute; left: 7%; bottom: 118px; display: flex; gap: 4px; z-index: 4; }
.tile-loader i { width: 28px; height: 28px; background: var(--green); border: 4px solid var(--night); animation: tileLoad 1.4s steps(1) infinite; } .tile-loader i:nth-child(odd) { animation-delay: .2s; background: var(--coin); }

.letter-landscape { position: absolute; left: 18%; right: 22%; bottom: 155px; height: 330px; display: flex; align-items: end; justify-content: center; gap: 28px; z-index: 4; transition: transform 500ms steps(5); }
.b-tower, .v-valley, .ruin-b { font-family: var(--pixel-title); font-size: clamp(120px, 16vw, 230px); line-height: .8; text-shadow: 10px 10px 0 #000; position: relative; }
.b-tower { color: var(--cyan); background: var(--violet); border: 6px solid var(--cyan); padding: 30px 10px 0; box-shadow: inset 20px 0 0 rgba(23,17,31,.55), 12px 12px 0 #000; }
.b-tower::before, .b-tower::after { content: ""; position: absolute; right: 18px; width: 24px; height: 24px; background: var(--coin); border: 4px solid var(--night); }
.b-tower::before { top: 48px; } .b-tower::after { top: 136px; }
.right-b { transform: scaleX(-1); }
.v-valley { color: var(--orange); transform: translateY(36px); filter: drop-shadow(10px 10px 0 #000); }
.speech, .fork-help { position: absolute; z-index: 7; background: var(--parchment); color: var(--night); border: 4px solid var(--night); box-shadow: 7px 7px 0 var(--heart); padding: 14px; font-size: 20px; }
.sign { left: 9%; bottom: 245px; transition: transform 200ms steps(2), background 200ms steps(2); }
.sign:hover, .sign.revealed { transform: rotate(3deg) translateY(-6px); background: var(--coin); }
.coin { position: absolute; z-index: 8; width: 34px; height: 42px; border: 4px solid var(--night); background: var(--coin); color: var(--orange); box-shadow: 5px 5px 0 #000; border-radius: 0; animation: coinSpin 800ms steps(4) infinite; cursor: pointer; }
.coin.hop { animation: coinHop 450ms steps(5), coinSpin 800ms steps(4) infinite; }
.coin-one { left: 50%; bottom: 330px; } .coin-two { left: 58%; bottom: 385px; } .coin-three { left: 74%; bottom: 450px; } .coin-four { left: 62%; bottom: 375px; }
.bug-slime { position: absolute; left: 33%; bottom: 122px; z-index: 9; width: 88px; height: 60px; background: var(--green); border: 5px solid var(--night); border-radius: 20px 20px 4px 4px; box-shadow: 8px 8px 0 #000; animation: slimeWalk 1.2s steps(4) infinite; }
.bug-slime span { position: absolute; left: 25px; top: -19px; width: 40px; height: 20px; background: var(--orange); border: 4px solid var(--night); }
.bug-slime::before, .bug-slime::after { content: ""; position: absolute; top: 18px; width: 10px; height: 10px; background: var(--night); } .bug-slime::before { left: 23px; } .bug-slime::after { right: 23px; }
.bug-slime b { position: absolute; left: 20px; bottom: -38px; padding: 5px 8px; background: var(--parchment); color: var(--night); border: 3px solid var(--night); font-family: var(--debug); font-size: 20px; }
.flag { position: absolute; left: 72%; bottom: 132px; z-index: 5; font-family: var(--pixel-title); font-size: 10px; color: var(--night); background: var(--heart); border: 4px solid var(--night); padding: 12px 20px; box-shadow: -8px 8px 0 #000; }
.flag::before { content: ""; position: absolute; left: -14px; top: 0; width: 8px; height: 110px; background: var(--parchment); border: 3px solid var(--night); }
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 118px; z-index: 4; border-top: 6px solid var(--night); background-size: 36px 36px; }
.grass-ground { background-color: var(--green); background-image: linear-gradient(90deg, rgba(23,17,31,.28) 50%, transparent 50%), linear-gradient(0deg, var(--violet) 0 16px, transparent 16px); }

.v-fork { background-image: linear-gradient(180deg, #17111F 0%, #2B1B4A 42%, #F28A30 42%, #17111F 79%); }
.fork-help { left: 37%; top: 150px; box-shadow: 7px 7px 0 var(--cyan); }
.v-canyon { position: absolute; left: 31%; bottom: 115px; width: 520px; height: 520px; z-index: 6; border: 0; background: var(--orange); clip-path: polygon(0 0, 42% 0, 50% 54%, 58% 0, 100% 0, 62% 100%, 38% 100%); cursor: pointer; box-shadow: none; transition: filter 220ms steps(2); }
.v-canyon::before { content: ""; position: absolute; inset: 22px 34px 0; background: var(--night); clip-path: polygon(0 0, 37% 0, 50% 58%, 63% 0, 100% 0, 58% 100%, 42% 100%); }
.v-canyon.glow, .v-canyon:active { filter: drop-shadow(0 0 18px var(--cyan)) drop-shadow(0 0 0 var(--coin)); }
.route { position: absolute; z-index: 2; top: 140px; font-family: var(--pixel-title); font-size: 13px; color: var(--coin); text-shadow: 4px 4px 0 #000; } .route-left { left: 74px; transform: rotate(-24deg); } .route-right { right: 54px; transform: rotate(24deg); }
.ladder { position: absolute; left: 20%; bottom: 118px; width: 62px; height: 280px; z-index: 5; background: repeating-linear-gradient(0deg, var(--parchment) 0 10px, transparent 10px 30px), linear-gradient(90deg, var(--parchment) 0 8px, transparent 8px 54px, var(--parchment) 54px); border: 4px solid var(--night); }
.key { position: absolute; z-index: 7; padding: 10px 18px; background: var(--coin); color: var(--night); border: 4px solid var(--night); box-shadow: 6px 6px 0 #000; font-family: var(--pixel-title); font-size: 12px; } .key-build { left: 16%; bottom: 430px; } .key-branch { right: 20%; bottom: 290px; }
.secret-alcove { position: absolute; right: 7%; bottom: 190px; z-index: 5; padding: 18px; background: var(--violet); border: 4px dashed var(--cyan); color: var(--cyan); font-family: var(--debug); font-size: 26px; opacity: .2; transform: translateX(80px); transition: opacity 250ms steps(3), transform 250ms steps(3); }
.secret-alcove.visible { opacity: 1; transform: translateX(0); }
.secret-manifest { position: absolute; right: 6%; top: 278px; z-index: 4; width: 420px; padding: 14px; background: rgba(23,17,31,.82); border: 4px solid var(--heart); color: var(--parchment); box-shadow: 7px 7px 0 #000; font-family: var(--debug); font-size: 20px; line-height: 1; }
.canyon-ground { background-color: var(--orange); background-image: linear-gradient(45deg, rgba(23,17,31,.35) 25%, transparent 25% 50%, rgba(23,17,31,.35) 50% 75%, transparent 75%); }

.mirror-ruins { background-image: linear-gradient(180deg, #17111F 0%, #2B1B4A 54%, #17111F 54%); }
.ruin-b { position: absolute; bottom: 155px; z-index: 4; color: var(--violet); -webkit-text-stroke: 5px var(--cyan); text-shadow: 12px 12px 0 #000; opacity: .95; }
.b-left { left: 12%; } .b-right { right: 18%; transform: scaleX(-1); }
.bridge { position: absolute; left: 31%; bottom: 285px; z-index: 6; display: flex; gap: 8px; transform: rotate(-3deg); }
.bridge span { width: 72px; height: 54px; display: grid; place-items: center; background: var(--parchment); color: var(--violet); border: 5px solid var(--night); box-shadow: 7px 7px 0 #000; font-family: var(--pixel-title); }
.save-crystal { position: absolute; left: 50%; bottom: 150px; z-index: 7; width: 82px; height: 120px; background: var(--cyan); clip-path: polygon(50% 0, 100% 28%, 76% 100%, 24% 100%, 0 28%); box-shadow: 0 0 0 6px var(--night); animation: crystalPulse 900ms steps(4) infinite; }
.inventory-panel { position: absolute; right: 8%; top: 155px; z-index: 7; width: 330px; padding: 20px; background: var(--parchment); color: var(--night); border: 5px solid var(--night); box-shadow: 10px 10px 0 var(--heart); font-family: var(--pixel); font-size: 19px; }
.inventory-panel h2 { margin: 0 0 12px; font-family: var(--pixel-title); font-size: 14px; color: var(--violet); }
.builder { left: 18%; }
.ruins-ground { background-color: var(--violet); background-image: linear-gradient(90deg, var(--night) 0 8px, transparent 8px 36px), linear-gradient(0deg, rgba(246,231,177,.24) 0 8px, transparent 8px 36px); }

.boss-door { background-image: linear-gradient(180deg, #17111F 0%, #2B1B4A 44%, #17111F 44%); }
.lava { position: absolute; left: 0; right: 0; bottom: 118px; height: 54px; background: var(--heart); color: var(--coin); border-top: 5px solid var(--night); border-bottom: 5px solid var(--night); font-family: var(--debug); font-size: 28px; white-space: nowrap; overflow: hidden; animation: lavaMove 1s steps(6) infinite; }
.deploy-door { position: absolute; left: 16%; bottom: 170px; z-index: 8; width: 390px; height: 460px; background: var(--violet); border: 8px solid var(--parchment); box-shadow: 14px 14px 0 #000, inset 0 -28px 0 rgba(0,0,0,.28); display: grid; grid-template-rows: 70px 1fr 80px; place-items: center; transition: transform 450ms steps(5); }
.deploy-door.open { transform: translateY(-18px); }
.door-top, .door-lock { font-family: var(--pixel-title); color: var(--coin); font-size: 15px; }
.door-domain { display: flex; gap: 10px; font-family: var(--pixel-title); font-size: 76px; color: var(--cyan); text-shadow: 8px 8px 0 #000; }
.deploy-door.open .door-domain span:nth-child(2) { color: var(--orange); transform: translateY(20px); }
.final-save { position: absolute; right: 11%; bottom: 168px; z-index: 7; width: 420px; height: 390px; border: 6px solid var(--cyan); background: rgba(23,17,31,.85); box-shadow: 10px 10px 0 #000; display: grid; place-items: center; align-content: center; gap: 24px; }
.save-moon { width: 90px; height: 90px; background: var(--parchment); clip-path: polygon(0 0, 82% 0, 82% 18%, 100% 18%, 100% 82%, 82% 82%, 82% 100%, 0 100%); box-shadow: 0 0 0 8px var(--violet); }
.tiny-cart { width: 160px; height: 120px; background: var(--violet); border: 5px solid var(--parchment); padding: 25px 18px; box-shadow: 8px 8px 0 #000; }
.tiny-label { height: 54px; background: var(--parchment); color: var(--night); display: grid; place-items: center; border: 4px solid var(--night); font-family: var(--pixel-title); font-size: 12px; }
.final-save p { margin: 0 24px; font-family: var(--debug); color: var(--cyan); font-size: 28px; text-align: center; }
.boss-ground { background-color: var(--night); background-image: linear-gradient(90deg, var(--parchment) 0 30px, var(--coin) 30px 42px, var(--night) 42px 62px); }

.sprite { position: fixed; left: 26vw; bottom: 126px; z-index: 20; width: 42px; height: 54px; background: var(--cyan); border: 5px solid var(--night); box-shadow: 7px 7px 0 #000; transition: transform 100ms steps(2); animation: spriteIdle 550ms steps(2) infinite; }
.sprite::before, .sprite::after { content: ""; position: absolute; top: 15px; width: 8px; height: 8px; background: var(--night); } .sprite::before { left: 9px; } .sprite::after { right: 9px; }
.sprite span { position: absolute; left: 6px; right: 6px; bottom: -12px; height: 10px; background: var(--heart); border: 3px solid var(--night); }
body.shake .world-strip { animation: shake 220ms steps(3); }

@keyframes scan { to { transform: translateX(14px); } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes cartDrop { 0% { transform: translateY(-120vh); } 68% { transform: translateY(0); } 82% { transform: translateY(-22px); } 100% { transform: translateY(0); } }
@keyframes dotBlink { 50% { background: var(--coin); } }
@keyframes cloudStep { 50% { transform: translateX(22px); } }
@keyframes tileLoad { 0%, 25% { opacity: .2; transform: translateY(12px); } 26%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes coinSpin { 0% { transform: scaleX(1); } 50% { transform: scaleX(.35); } }
@keyframes coinHop { 45% { translate: 0 -38px; } }
@keyframes slimeWalk { 50% { transform: translateX(14px) scaleY(.9); } }
@keyframes crystalPulse { 50% { filter: brightness(1.8); transform: translateY(-6px); } }
@keyframes lavaMove { to { text-indent: -120px; } }
@keyframes spriteIdle { 50% { transform: translateY(-5px); } }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }

@media (max-width: 850px) {
  html, body { overflow-y: auto; }
  .world-strip { height: auto; min-height: 100vh; }
  .scene { min-width: 155vw; }
  .hud { grid-template-columns: 90px 1fr; height: 70px; }
  .debug-readout { display: none; }
  .hud-title, .room { font-size: 8px; }
  .letter-landscape { left: 8%; right: 8%; gap: 10px; }
  .b-tower, .v-valley, .ruin-b { font-size: 105px; }
  .v-canyon { left: 18%; width: 360px; height: 430px; }
  .inventory-panel, .final-save { width: 280px; right: 5%; }
}