Fix diagonal corner artifact by stopping arrow animation via inline style when hidden

game.js

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

style.css

@@ -480,10 +480,6 @@ html, body {
   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; }
 .npc-bubble   { font-size:14px; font-family:var(--font); color:var(--black); background:var(--yellow); border:2px solid var(--black); width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 2px; animation:bounce .7s ease-in-out infinite; }