From ac0db6242054523a7c4ff5bb94b3b2b12a4f5496 Mon Sep 17 00:00:00 2001
From: Justin Oros <JustinOros@gmail.com>
Date: Wed, 20 May 2026 12:31:33 -0700
Subject: [PATCH] =?UTF-8?q?Fix=20diagonal=20line=20=E2=80=94=20arrow=20ani?=
 =?UTF-8?q?mation=20only=20runs=20when=20visible,=20hidden=20by=20default?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 game.js   | 15 +++++++--------
 style.css |  9 +++++++--
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/game.js b/game.js
index 7a03f2f..bf968ad 100644
--- a/game.js
+++ b/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();
diff --git a/style.css b/style.css
index d0e1aad..8af3b4e 100644
--- a/style.css
+++ b/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; }