pathways: native-aspect free-form mosaic, no teleports (walk to next unplaced), arrows on every photo, arrows inside tiles, drop path text

1 files changed, 8 insertions, 50 deletions

diff --git a/public/app.css b/public/app.css
index cdb2226..cf44f2a 100644
--- a/public/app.css
+++ b/public/app.css
@@ -71,8 +71,8 @@ html, body {
 
 .nav-btn {
   position: absolute;
-  width: 46px;
-  height: 46px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .28);
   background: rgba(255, 255, 255, .1);
@@ -81,14 +81,14 @@ html, body {
   display: grid;
   place-items: center;
   box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
-  opacity: .16;
+  opacity: .18;
   transition: opacity .15s, background .15s, color .15s, box-shadow .15s;
 }
-.nav-btn svg { width: 20px; height: 20px; display: block; }
-.nav-zone-N .nav-btn { top: 0; left: 50%; translate: -50% -50%; }
-.nav-zone-E .nav-btn { top: 50%; right: 0; translate: 50% -50%; }
-.nav-zone-S .nav-btn { bottom: 0; left: 50%; translate: -50% 50%; }
-.nav-zone-W .nav-btn { top: 50%; left: 0; translate: -50% -50%; }
+.nav-btn svg { width: 18px; height: 18px; display: block; }
+.nav-zone-N .nav-btn { top: 10px; left: 50%; translate: -50% 0; }
+.nav-zone-E .nav-btn { top: 50%; right: 10px; translate: 0 -50%; }
+.nav-zone-S .nav-btn { bottom: 10px; left: 50%; translate: -50% 0; }
+.nav-zone-W .nav-btn { top: 50%; left: 10px; translate: 0 -50%; }
 .nav-zone:hover .nav-btn {
   opacity: 1;
   background: rgba(255, 255, 255, .22);
@@ -97,47 +97,6 @@ html, body {
   box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
 }
 
-.nav-label {
-  position: absolute;
-  left: 50%;
-  translate: -50%;
-  white-space: nowrap;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: .02em;
-  color: var(--ink);
-  background: rgba(18, 19, 24, .92);
-  border: 1px solid rgba(255, 255, 255, .14);
-  border-radius: 999px;
-  padding: 3px 10px;
-  opacity: 0;
-  transition: opacity .12s;
-  pointer-events: none;
-}
-.nav-btn[data-dir="N"] .nav-label { bottom: calc(100% + 8px); }
-.nav-btn[data-dir="S"] .nav-label { top: calc(100% + 8px); }
-.nav-btn[data-dir="E"] .nav-label { top: 50%; left: calc(100% + 10px); translate: 0 -50%; }
-.nav-btn[data-dir="W"] .nav-label { top: 50%; right: calc(100% + 10px); translate: 0 -50%; }
-.nav-btn:hover .nav-label { opacity: 1; }
-
-#flash {
-  position: fixed;
-  top: 18px;
-  left: 50%;
-  translate: -50%;
-  font-size: 14px;
-  letter-spacing: .06em;
-  color: var(--ink);
-  background: rgba(14, 15, 19, .88);
-  border: 1px solid rgba(255, 255, 255, .22);
-  border-radius: 6px;
-  padding: 6px 14px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity .25s;
-}
-#flash.show { opacity: 1; }
-
 #splash {
   position: fixed;
   inset: 0;
@@ -171,5 +130,4 @@ html, body {
 @media (prefers-reduced-motion: reduce) {
   #world { transition: none; }
   .tile.lock { animation: none; }
-  #flash { transition: none; }
 }