pathways: chevrons float fully off the tile and only for the current tile; hover zone covers them; ghost hide is debounced

- chevrons sit entirely in the gap outside the tile (never half-on the photo)
  and are drawn only for the current tile, killing the mosaic clutter
- nav zones extend 44px outward so the whole chevron is inside the hit area;
  previously the chevron straddled the edge and its outer half was outside the
  zone, so mousing across it flipped the ghost on/off (the flicker)
- ghost hide is debounced 80ms and cancelled on the next hover target, so
  crossing the gap between a zone and its dropzone no longer blinks the ghost
- setCurrent re-renders navs so chevrons track the current tile

1 files changed, 12 insertions, 12 deletions

diff --git a/public/app.css b/public/app.css
index 24ea492..3a8f684 100644
--- a/public/app.css
+++ b/public/app.css
@@ -70,26 +70,26 @@ html, body {
   position: absolute;
   pointer-events: auto;
 }
-.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-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-chev {
   position: absolute;
-  width: 56px;
-  height: 56px;
-  color: rgba(255, 255, 255, .9);
-  opacity: .42;
+  width: 44px;
+  height: 44px;
+  color: rgba(255, 255, 255, .85);
+  opacity: .3;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65));
   pointer-events: none;
   transition: opacity .15s, filter .15s, color .15s;
 }
 .nav-chev svg { width: 100%; height: 100%; display: block; }
-.nav-zone-N .nav-chev { top: 0; left: 50%; translate: -50% -50%; }
-.nav-zone-E .nav-chev { top: 50%; right: 0; translate: 50% -50%; }
-.nav-zone-S .nav-chev { bottom: 0; left: 50%; translate: -50% 50%; }
-.nav-zone-W .nav-chev { top: 50%; left: 0; translate: -50% -50%; }
+.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;