Fix diagonal line — arrow animation only runs when visible, hidden by default

game.js

@@ -447,13 +447,12 @@ class Game {
   _updateDirArrow(nearNPC) {
     const arrow = document.getElementById('map-dir-arrow');
     if (!arrow) return;
-    if (nearNPC) { arrow.style.display = 'none'; return; }
-    const world = document.getElementById('map-inner');
-    const viewH = world ? world.parentElement.offsetHeight : 300;
-    arrow.textContent   = '▶';
-    arrow.style.display = 'block';
-    arrow.style.removeProperty('left');
-    arrow.style.bottom  = (viewH * 0.28) + 'px';
+    if (nearNPC) { arrow.classList.remove('visible'); return; }
+    const world = document.getElementById('map-world');
+    const viewH = (world && world.offsetHeight) ? world.offsetHeight : 300;
+    arrow.textContent  = '▶';
+    arrow.style.bottom = (viewH * 0.28) + 'px';
+    arrow.classList.add('visible');
   }
 
   _nearNPC() {
@@ -477,7 +476,7 @@ class Game {
       return;
     }
     const arrow = document.getElementById('map-dir-arrow');
-    if (arrow) arrow.style.display = 'none';
+    if (arrow) arrow.classList.remove('visible');
     const bub = document.getElementById('player-bubble');
     if (bub) bub.classList.remove('visible');
     SFX.encounter();

style.css

@@ -475,9 +475,14 @@ html, body {
   text-shadow: 0 0 6px rgba(248,192,48,.8), 2px 2px 0 rgba(0,0,0,.5);
   pointer-events: none;
   z-index: 50;
-  animation: arrowPulse .7s ease-in-out infinite;
   filter: drop-shadow(0 0 4px rgba(248,192,48,.6));
-  right: 12px;   /* pinned to right edge of map viewport */
+  right: 12px;
+  display: none;
+  bottom: -9999px;
+}
+.map-dir-arrow.visible {
+  display: block;
+  animation: arrowPulse .7s ease-in-out infinite;
 }
 /* NPC lives inside .map-inner, positioned in world-px via JS */
 .map-npc-wrap { position:absolute; text-align:center; z-index: 30; }