pathways: replace floating edge chevrons with full-edge glow segments on the tile

the arrows in the gap were pointless - that is exactly where the ghost
photo preview appears, so they only collided with it. now the current tile
shows a thin glowing segment running corner-to-corner along each free edge,
drawn ON the tile just inside the border: subtle at rest, bright on hover,
fades out while its preview ghost is showing. occupied directions get no
segment. the ghost still renders in the gap, so nothing overlaps it.

3 files changed, 21 insertions, 33 deletions

diff --git a/public/app.css b/public/app.css
index 3a8f684..d5f12dc 100644
--- a/public/app.css
+++ b/public/app.css
@@ -70,32 +70,27 @@ html, body {
   position: absolute;
   pointer-events: auto;
 }
-.nav-zone-N { top: -44px; left: 0; width: 100%; height: calc(30% + 44px); }
-.nav-zone-S { bottom: -44px; left: 0; width: 100%; height: calc(30% + 44px); }
-.nav-zone-E { top: 30%; right: -44px; width: calc(30% + 44px); height: 40%; }
-.nav-zone-W { top: 30%; left: -44px; width: calc(30% + 44px); height: 40%; }
+.nav-zone-N { top: 0; left: 0; width: 100%; height: 30%; }
+.nav-zone-S { bottom: 0; left: 0; width: 100%; height: 30%; }
+.nav-zone-E { top: 30%; right: 0; width: 30%; height: 40%; }
+.nav-zone-W { top: 30%; left: 0; width: 30%; height: 40%; }
 
-.nav-chev {
+.nav-edge {
   position: absolute;
-  width: 44px;
-  height: 44px;
-  color: rgba(255, 255, 255, .85);
-  opacity: .3;
-  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65));
+  background: linear-gradient(rgba(255, 255, 255, .9), rgba(125, 211, 252, .55));
+  opacity: .35;
   pointer-events: none;
-  transition: opacity .15s, filter .15s, color .15s;
+  transition: opacity .15s, filter .15s;
 }
-.nav-chev svg { width: 100%; height: 100%; display: block; }
-.nav-zone-N .nav-chev { top: 0; left: 50%; translate: -50% -100%; }
-.nav-zone-E .nav-chev { top: 50%; right: 0; translate: 100% -50%; }
-.nav-zone-S .nav-chev { bottom: 0; left: 50%; translate: -50% 100%; }
-.nav-zone-W .nav-chev { top: 50%; left: 0; translate: -100% -50%; }
-.nav-zone:hover .nav-chev {
-  opacity: 1;
-  color: #fff;
-  filter: drop-shadow(0 0 9px rgba(125, 211, 252, .6));
+.nav-zone-N .nav-edge { top: 4px; left: 6px; right: 6px; height: 3px; border-radius: 2px; }
+.nav-zone-S .nav-edge { bottom: 4px; left: 6px; right: 6px; height: 3px; border-radius: 2px; }
+.nav-zone-E .nav-edge { right: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; }
+.nav-zone-W .nav-edge { left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; }
+.nav-zone:hover .nav-edge {
+  opacity: .95;
+  filter: drop-shadow(0 0 7px rgba(125, 211, 252, .8));
 }
-.nav-zone.preview .nav-chev {
+.nav-zone.preview .nav-edge {
   opacity: 0;
 }
 
diff --git a/public/app.js b/public/app.js
index 35d9898..5034348 100644
--- a/public/app.js
+++ b/public/app.js
@@ -12,12 +12,6 @@ const MIN_ZOOM = 0.05
 const MAX_ZOOM = 5
 const EPS = 0.5
 const MAX_ZONE_TILES = 24
-const ARROW_SVG = {
-  N: '<svg viewBox="0 0 24 24" fill="none"><path d="M5 15l7-8 7 8" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-  E: '<svg viewBox="0 0 24 24" fill="none"><path d="M9 5l8 7-8 7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-  S: '<svg viewBox="0 0 24 24" fill="none"><path d="M5 9l7 8 7-8" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-  W: '<svg viewBox="0 0 24 24" fill="none"><path d="M15 5l-8 7 8 7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-}
 
 let U = 300
 const tiles = new Map()
@@ -222,10 +216,9 @@ function renderNav(id) {
     zone.addEventListener("pointerdown", (e) => e.stopPropagation())
     zone.addEventListener("click", (e) => { e.stopPropagation(); traverseFrom(id, ex.dir) })
     if (!adjacentTile(id, ex.dir) && isCurrent) {
-      const chev = document.createElement("div")
-      chev.className = "nav-chev"
-      chev.innerHTML = ARROW_SVG[ex.dir]
-      zone.appendChild(chev)
+      const edge = document.createElement("div")
+      edge.className = `nav-edge nav-edge-${ex.dir}`
+      zone.appendChild(edge)
     }
     nav.appendChild(zone)
   }
diff --git a/public/index.html b/public/index.html
index 9c685fd..fb9bbb6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="dark">
   <title>pathways</title>
-  <link rel="stylesheet" href="/app.css?v=17">
+  <link rel="stylesheet" href="/app.css?v=18">
 </head>
 <body>
   <main id="stage">
@@ -16,6 +16,6 @@
     <p>four paths, one per direction. walk them.</p>
     <button id="start">start</button>
   </div>
-  <script src="/app.js?v=17"></script>
+  <script src="/app.js?v=18"></script>
 </body>
 </html>