:root {
  --cartridge-night: #17142A;
  --save-purple: #5B3FD6;
  --dialogue-cream: #F7E7B4;
  --slime-green: #62D66E;
  --cabbage-red: #E84B4B;
  --coin-gold: #FFD166;
  --river-cyan: #50CDE8;
  --shadow-ink: #0A0813;
  --pixel: 4px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--shadow-ink); color: var(--dialogue-cream); }

body { font-family: "Nunito Sans", sans-serif; }

button { font: inherit; color: inherit; }

.game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 12%, rgba(91,63,214,.42), transparent 26%),
    linear-gradient(#17142A 0%, #0A0813 88%);
}

.scanlines, .scanlines::after {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
}

.scanlines { background: repeating-linear-gradient(0deg, rgba(247,231,180,.045) 0 2px, transparent 2px 6px); mix-blend-mode: screen; }
.scanlines::after { content: ""; box-shadow: inset 0 0 140px 32px var(--shadow-ink); }

.moon {
  position: fixed;
  top: 9vh;
  right: 12vw;
  width: 104px;
  height: 104px;
  z-index: 1;
  background: radial-gradient(circle at 35% 35%, #F7E7B4, #FFD166 62%, transparent 64%);
  filter: drop-shadow(0 0 24px rgba(255,209,102,.55));
  clip-path: polygon(0 0,100% 0,100% 18%,82% 18%,82% 36%,100% 36%,100% 100%,0 100%,0 72%,18% 72%,18% 54%,0 54%);
}

.stars { position: fixed; inset: 0; z-index: 0; background-image: radial-gradient(var(--dialogue-cream) 1px, transparent 1px); background-size: 38px 38px; opacity: .35; animation: starDrift 12s steps(12) infinite; }

.hud { position: fixed; top: 18px; left: 18px; right: 18px; z-index: 25; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-chip, .pixel-button, .scene-nav button, .close-log { font-family: "VT323", monospace; letter-spacing: 1px; }
.hud-chip { padding: 10px 14px; background: var(--shadow-ink); border: 4px solid var(--dialogue-cream); box-shadow: 6px 6px 0 var(--save-purple); color: var(--coin-gold); font-size: 24px; }

.pixel-button, .scene-nav button, .close-log {
  border: 4px solid var(--shadow-ink);
  background: var(--dialogue-cream);
  color: var(--shadow-ink);
  padding: 10px 14px;
  box-shadow: 6px 6px 0 var(--save-purple);
  cursor: pointer;
  transition: transform .16s steps(2), box-shadow .16s steps(2), background .16s;
}
.pixel-button:hover, .scene-nav button:hover, .scene-nav button.on { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--river-cyan); background: var(--coin-gold); }

.minimap { width: 74px; height: 54px; border: 4px solid var(--dialogue-cream); background: linear-gradient(90deg, rgba(80,205,232,.2) 25%, transparent 25% 50%, rgba(98,214,110,.18) 50% 75%, transparent 75%); background-size: 16px 16px; display: grid; place-items: center; box-shadow: 6px 6px 0 var(--shadow-ink); }
.minimap span { font-family: "Press Start 2P"; color: var(--slime-green); animation: blink 1s steps(2) infinite; }

.world { position: relative; z-index: 2; height: 100vh; display: flex; width: 600vw; transform: translateX(0); transition: transform 1s steps(16); }
.scene { position: relative; width: 100vw; height: 100vh; flex: 0 0 100vw; overflow: hidden; padding: 16vh 7vw 15vh; border-left: 4px solid rgba(247,231,180,.12); }
.scene::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; background: linear-gradient(transparent, rgba(10,8,19,.75)), repeating-linear-gradient(90deg, rgba(98,214,110,.55) 0 48px, rgba(80,205,232,.22) 48px 96px), repeating-linear-gradient(0deg, transparent 0 44px, rgba(10,8,19,.4) 44px 48px); image-rendering: pixelated; }
.scene::after { content: attr(data-scene); position: absolute; bottom: 22px; left: 30px; font-family: "Press Start 2P"; font-size: 12px; color: var(--coin-gold); text-shadow: 3px 3px 0 var(--shadow-ink); }

.mountains { position: absolute; left: 0; right: 0; bottom: 34vh; height: 28vh; opacity: .8; background: linear-gradient(135deg, transparent 0 20%, rgba(91,63,214,.9) 20% 38%, transparent 38%) 0 0/260px 100%, linear-gradient(225deg, transparent 0 25%, rgba(80,205,232,.3) 25% 42%, transparent 42%) 70px 32px/300px 100%; animation: layerBob 7s steps(5) infinite; }
.mountains.cyan { filter: hue-rotate(70deg); opacity: .55; }

.grass.foreground { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: repeating-linear-gradient(90deg, var(--slime-green) 0 22px, #45a858 22px 44px), repeating-linear-gradient(0deg, transparent 0 18px, rgba(10,8,19,.35) 18px 22px); border-top: 6px solid var(--shadow-ink); }

.roofline { position: absolute; right: 11vw; bottom: 41vh; display: flex; gap: 18px; }
.roofline span { width: 120px; height: 84px; background: var(--cabbage-red); border: 6px solid var(--shadow-ink); clip-path: polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%); box-shadow: inset 0 -26px 0 rgba(10,8,19,.45); }

.title-plate, .speech, .quest-scroll, .save-file, .dialogue-box, .reply-menu, .log-paper {
  position: relative;
  background: var(--dialogue-cream);
  color: var(--shadow-ink);
  border: 6px solid var(--shadow-ink);
  box-shadow: 10px 10px 0 var(--save-purple), inset 0 0 0 4px rgba(91,63,214,.12);
}
.title-plate { width: min(760px, 68vw); padding: 34px; z-index: 3; margin-top: 4vh; }
.chapter, .scene-label { margin: 0 0 16px; font-family: "VT323"; font-size: 25px; color: var(--save-purple); letter-spacing: 1px; }
h1, h2 { font-family: "Press Start 2P"; line-height: 1.32; margin: 0; }
h1 { font-size: clamp(38px, 7vw, 88px); color: var(--cartridge-night); text-shadow: 5px 5px 0 var(--coin-gold); }
h2 { font-size: clamp(18px, 2.4vw, 31px); }
.manual-line, .epigraph { font-family: "Fraunces", serif; font-size: clamp(19px, 2vw, 28px); margin: 22px 0 0; }

.sign, .inn-sign { font-family: "VT323"; font-size: 28px; position: absolute; background: var(--coin-gold); color: var(--shadow-ink); border: 5px solid var(--shadow-ink); padding: 8px 16px; box-shadow: 6px 6px 0 var(--cabbage-red); }
.sign { right: 20vw; top: 24vh; transform: rotate(2deg); }
.changing-sign.flip { animation: signFlip .7s steps(6); }

.hero-ghost { position: absolute; left: 2vw; bottom: 32vh; font-family: "Press Start 2P"; font-size: 12px; color: rgba(247,231,180,.6); animation: exitHero 4s steps(12) forwards; }
.quest-marker { position: absolute; left: 54vw; bottom: 52vh; z-index: 5; font-family: "Press Start 2P"; font-size: 48px; color: var(--slime-green); text-shadow: 4px 4px 0 var(--shadow-ink); animation: bob 1.1s steps(3) infinite; }

.npc { position: absolute; z-index: 6; width: 54px; height: 82px; bottom: 26vh; left: 47vw; background: var(--slime-green); border: 6px solid var(--shadow-ink); box-shadow: inset 0 -24px 0 var(--save-purple), 8px 0 0 rgba(10,8,19,.28); animation: idle 1.2s steps(2) infinite; }
.npc::before { content: ""; position: absolute; left: 11px; top: -28px; width: 32px; height: 32px; background: var(--dialogue-cream); border: 6px solid var(--shadow-ink); }
.npc::after { content: ""; position: absolute; left: -12px; bottom: -16px; width: 24px; height: 16px; background: var(--shadow-ink); box-shadow: 52px 0 0 var(--shadow-ink); animation: walkFeet .5s steps(2) infinite; }
.face { position: absolute; left: 20px; top: -15px; width: 6px; height: 6px; background: var(--shadow-ink); box-shadow: 15px 0 0 var(--shadow-ink); animation: blinkFace 3s steps(2) infinite; }
.broom { left: 51vw; }
.bucket { left: 25vw; background: var(--river-cyan); }
.apron { left: 17vw; background: var(--coin-gold); }
.lantern { left: 72vw; background: var(--cabbage-red); }
.clerk { left: 62vw; background: var(--river-cyan); }
.crownless { left: 46vw; background: var(--dialogue-cream); box-shadow: inset 0 -24px 0 var(--cabbage-red), 0 0 24px var(--coin-gold); }

.dialogue-box { position: absolute; left: 13vw; bottom: 12vh; z-index: 9; width: min(780px, 74vw); min-height: 104px; padding: 22px 28px; font-family: "VT323"; font-size: clamp(28px, 3vw, 42px); }
.cursor { color: var(--cabbage-red); animation: blink .65s steps(2) infinite; }

.well-prop { position: absolute; left: 43vw; bottom: 29vh; width: 140px; height: 92px; border: 8px solid var(--shadow-ink); background: repeating-linear-gradient(90deg, #5B3FD6 0 18px, #50CDE8 18px 36px); border-radius: 0 0 42px 42px; box-shadow: 0 -76px 0 -34px var(--dialogue-cream); }
.speech { width: min(560px, 44vw); padding: 26px; z-index: 5; }
.nailed { margin-left: 48vw; margin-top: 6vh; transform: rotate(-1deg); }
.talk-bubble { position: absolute; left: 29vw; bottom: 50vh; z-index: 8; font-family: "Press Start 2P"; background: var(--slime-green); color: var(--shadow-ink); border: 5px solid var(--shadow-ink); padding: 14px; box-shadow: 6px 6px 0 var(--shadow-ink); cursor: pointer; animation: bob 1s steps(3) infinite; }
.reply-menu { position: absolute; left: 53vw; bottom: 16vh; z-index: 8; width: 420px; padding: 16px; font-family: "VT323"; font-size: 27px; transform: translateY(140%); transition: transform .5s steps(6); }
.reply-menu.open { transform: translateY(0); }
.menu-row.selected { color: var(--save-purple); }
.water-tiles { position: absolute; bottom: 10vh; left: 0; width: 100%; height: 90px; background: repeating-linear-gradient(90deg, var(--river-cyan) 0 38px, rgba(80,205,232,.45) 38px 76px); opacity: .35; animation: waterMove 2s steps(4) infinite; }

.pantry-shelves { position: absolute; right: 6vw; top: 18vh; width: 390px; height: 300px; border: 8px solid var(--shadow-ink); background: repeating-linear-gradient(0deg, #8a4f39 0 38px, #5b2b2a 38px 48px); box-shadow: 10px 10px 0 var(--cabbage-red); }
.quest-scroll { width: min(590px, 45vw); padding: 28px; transform: rotate(1deg); }
.inventory { position: absolute; left: 42vw; bottom: 21vh; z-index: 8; display: flex; gap: 14px; }
.slot { width: 82px; height: 82px; font-size: 34px; background: var(--shadow-ink); border: 5px solid var(--dialogue-cream); box-shadow: inset 0 0 0 4px var(--save-purple), 6px 6px 0 var(--shadow-ink); cursor: pointer; transition: transform .16s steps(2); }
.slot:hover, .slot.equipped { transform: translateY(-12px); background: var(--coin-gold); }
.tooltip { position: absolute; left: 45vw; bottom: 35vh; z-index: 9; font-family: "VT323"; font-size: 26px; background: var(--dialogue-cream); color: var(--shadow-ink); border: 4px solid var(--shadow-ink); padding: 8px 12px; opacity: 0; transition: opacity .2s; }
.tooltip.show { opacity: 1; }
.crates { position: absolute; right: 28vw; bottom: 25vh; width: 130px; height: 90px; background: var(--cabbage-red); border: 6px solid var(--shadow-ink); box-shadow: 54px 18px 0 -6px var(--cabbage-red), 54px 18px 0 0 var(--shadow-ink); }
.chicken { position: absolute; bottom: 25vh; left: 57vw; z-index: 10; color: var(--dialogue-cream); font-size: 30px; animation: chickenWalk 9s steps(14) infinite; }

.route-map { position: absolute; inset: 20vh 5vw auto; height: 50vh; z-index: 2; }
.route { fill: none; stroke-width: 10; stroke-linecap: square; stroke-linejoin: miter; }
.route.shadow { stroke: var(--shadow-ink); stroke-width: 18; opacity: .7; }
.route.live { stroke: var(--river-cyan); stroke-dasharray: 1200; stroke-dashoffset: 1200; filter: drop-shadow(0 0 12px var(--river-cyan)); }
.route.live.draw { animation: drawRoute 2.6s steps(18) forwards; }
.tree { position: absolute; bottom: 28vh; width: 92px; height: 150px; background: var(--slime-green); border: 6px solid var(--shadow-ink); clip-path: polygon(50% 0, 92% 42%, 72% 42%, 100% 78%, 62% 78%, 62% 100%, 38% 100%, 38% 78%, 0 78%, 28% 42%, 8% 42%); }
.t1 { left: 18vw; } .t2 { left: 38vw; bottom: 34vh; } .t3 { left: 58vw; }
.forest-note { margin-left: 7vw; margin-top: 4vh; }
.reroute { position: absolute; right: 12vw; bottom: 18vh; z-index: 8; }

.inn-building { position: absolute; left: 12vw; bottom: 31vh; width: 420px; height: 310px; background: #3a285f; border: 8px solid var(--shadow-ink); box-shadow: inset 0 -68px 0 rgba(10,8,19,.45), 12px 12px 0 var(--cabbage-red); }
.inn-building::before { content: ""; position: absolute; inset: -80px -30px auto; height: 100px; background: var(--cabbage-red); border: 8px solid var(--shadow-ink); clip-path: polygon(50% 0,100% 100%,0 100%); }
.inn-sign { left: 92px; top: 42px; }
.rewrite { left: 42vw; bottom: 42vh; width: min(590px, 46vw); }
#rewriteButton { position: absolute; left: 50vw; bottom: 24vh; z-index: 10; }
.epigraph { position: absolute; left: 9vw; bottom: 17vh; max-width: 480px; color: var(--coin-gold); text-shadow: 3px 3px 0 var(--shadow-ink); }

.save-crystal { position: absolute; left: 40vw; top: 18vh; width: 180px; height: 260px; background: linear-gradient(135deg, var(--river-cyan), var(--save-purple)); border: 8px solid var(--shadow-ink); clip-path: polygon(50% 0, 100% 28%, 84% 78%, 50% 100%, 16% 78%, 0 28%); filter: drop-shadow(0 0 36px var(--river-cyan)); animation: crystalPulse 1.8s steps(4) infinite; }
.save-file { margin-left: 52vw; margin-top: 9vh; width: min(560px, 42vw); padding: 30px; z-index: 8; }
.save { margin-top: 22px; background: var(--slime-green); }
.badge-orbit { position: absolute; left: calc(40vw - 70px); top: calc(18vh + 78px); width: 320px; height: 320px; z-index: 7; animation: orbit 10s linear infinite; }
.badge-orbit span { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; background: var(--dialogue-cream); border: 5px solid var(--shadow-ink); color: var(--shadow-ink); font-size: 25px; box-shadow: 0 0 12px var(--coin-gold); }
.badge-orbit span:nth-child(1) { left: 50%; top: 0; } .badge-orbit span:nth-child(2) { right: 0; top: 40%; } .badge-orbit span:nth-child(3) { left: 50%; bottom: 0; } .badge-orbit span:nth-child(4) { left: 0; top: 40%; } .badge-orbit span:nth-child(5) { left: 42%; top: 42%; background: var(--slime-green); }
.save-flash { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; background: var(--dialogue-cream); color: var(--shadow-ink); font-family: "Press Start 2P"; font-size: clamp(18px, 3vw, 42px); opacity: 0; pointer-events: none; transition: opacity .25s steps(2); }
.save-flash.on { opacity: .95; }

.scene-nav { position: fixed; z-index: 24; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 10px; }
.scene-nav button { padding: 8px 12px; font-size: 21px; box-shadow: 4px 4px 0 var(--shadow-ink); }

.quest-log { position: fixed; inset: 0; z-index: 33; display: grid; place-items: center; background: rgba(10,8,19,.72); transform: translateY(-110%); transition: transform .55s steps(7); }
.quest-log.open { transform: translateY(0); }
.log-paper { width: min(620px, 86vw); padding: 34px; }
.log-paper h2 { color: var(--save-purple); }
.log-paper ol { font-family: "VT323"; font-size: 30px; line-height: 1.1; }
.close-log { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; padding: 0; font-size: 30px; background: var(--cabbage-red); }

@keyframes starDrift { to { background-position: 38px 38px; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-12px); } }
@keyframes idle { 50% { transform: translateY(3px) scaleX(-1); } }
@keyframes walkFeet { 50% { box-shadow: 40px 0 0 var(--shadow-ink); } }
@keyframes blinkFace { 84%, 90% { height: 2px; } }
@keyframes exitHero { to { transform: translateX(-25vw); opacity: 0; } }
@keyframes layerBob { 50% { transform: translateX(-16px); } }
@keyframes waterMove { to { background-position: 76px 0; } }
@keyframes chickenWalk { to { transform: translateX(-48vw); } }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }
@keyframes signFlip { 50% { transform: rotate(-3deg) scaleY(.2); } }
@keyframes crystalPulse { 50% { filter: drop-shadow(0 0 56px var(--coin-gold)); transform: translateY(-8px); } }
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
  .hud-chip { display: none; }
  .scene { padding-left: 5vw; padding-right: 5vw; }
  .title-plate, .speech, .quest-scroll, .save-file { width: 88vw; margin-left: 0; }
  .scene-nav { flex-wrap: wrap; width: 94vw; justify-content: center; bottom: 10px; }
  .scene-nav button { font-size: 18px; padding: 5px 7px; }
  .npc { left: 42vw; }
  .inventory { left: 6vw; gap: 8px; }
  .slot { width: 62px; height: 62px; font-size: 26px; }
  .reply-menu, .rewrite { left: 5vw; width: 88vw; }
  .save-file { margin-top: 38vh; }
}