Complete the overworld foundation

Port forced movement (turn delays, bumps, ice, currents, pits), dynamic
return warps, elevators, Surf, Cut, Strength and cycling rules, working
map blocks with changeblock/changemapblocks, and the remaining NPC
movement types and movement commands.

Add tileset animation from the ROM's command tables, grass sprite
priority and special map palettes; room decorations with ownership, the
bedroom PC and save migration; and Key Items access to the Bicycle.

Fourteen original-engine traces compare positions, facing, actors, event
flags and scripted poses. Tile animation matches original VRAM for four
tilesets, and LoadMapPals matches 192 palette cases. skyfall_top now
keeps the $60 sprite offset its step function leaves behind.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/ui/shell.ts

@@ -35,6 +35,8 @@ export function renderShell(root: HTMLElement) {
                 <div id="battle-player" class="battle-player"><canvas id="battle-player-pic" width="48" height="48" role="img"></canvas><div class="battle-hud"><div><strong id="battle-player-name"></strong><span id="battle-player-level"></span></div><div class="hp-row"><span>HP</span><span class="hp-bar"><i id="battle-player-hp"></i></span></div><div class="battle-numbers"><span id="battle-player-status" class="battle-status"></span><span id="battle-player-hp-text"></span></div></div></div>
                 <div class="battle-box"><p id="battle-text" aria-live="polite"></p><div id="battle-menu" class="battle-menu"></div></div>
               </div>
+              <div id="town-map-view" class="town-map-view" hidden aria-label="Town Map"><canvas id="town-map-canvas" width="160" height="144" role="img" aria-label="Town Map"></canvas><button id="town-map-close">Close map</button></div>
+              <div id="field-menu" class="field-menu" hidden aria-label="Pack"><p>KEY ITEMS</p><div id="field-items"></div></div>
               <div id="mart" class="mart" hidden aria-label="Poké Mart">
                 <p id="mart-money" class="mart-money"></p>
                 <div class="mart-box"><p id="mart-prompt" aria-live="polite"></p><div id="mart-menu" class="mart-menu"></div></div>

src/ui/styles.css

@@ -341,6 +341,13 @@ dialog h2 {
   gap: 6px;
   margin-top: 6px;
 }
+.dialogue-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 9.5em;
+  overflow-y: auto;
+}
 .dialogue-choice input {
   flex: 1 1 12ch;
   min-width: 0;
@@ -1024,3 +1031,47 @@ dialog dd {
     scroll-behavior: auto !important;
   }
 }
+
+.field-menu {
+  position: absolute;
+  inset: 1rem 1rem auto auto;
+  z-index: 6;
+  max-height: calc(100% - 2rem);
+  overflow: auto;
+  min-width: 10rem;
+  padding: 1rem;
+  border: 2px solid #27332a;
+  border-radius: 0.4rem;
+  background: #f8f4df;
+  color: #27332a;
+}
+.field-menu[hidden] {
+  display: none;
+}
+.field-menu p {
+  margin: 0 0 0.5rem;
+}
+#field-items {
+  display: grid;
+  gap: 0.3rem;
+}
+
+.town-map-view {
+  position: absolute;
+  inset: 0;
+  z-index: 7;
+  background: #f8f4df;
+  display: grid;
+  place-items: center;
+  padding: 0.5rem;
+}
+.town-map-view[hidden] {
+  display: none;
+}
+#town-map-canvas {
+  width: auto;
+  height: calc(100% - 3rem);
+  max-width: 100%;
+  image-rendering: pixelated;
+  object-fit: contain;
+}