From 6261bf6fcd96a9c4380f2361a79afdae840d0aaa Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 10:14:08 +0000
Subject: 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.
---
 public/app.css | 41 ++++++++++++++++++-----------------------
 1 file changed, 18 insertions(+), 23 deletions(-)

(limited to 'public/app.css')

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;
-}
-.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.preview .nav-chev {
+  transition: opacity .15s, filter .15s;
+}
+.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-edge {
   opacity: 0;
 }
 
-- 
cgit v1.3.1