From 0dc949ab3eece9f04d7ecd9519486db33034de96 Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 06:31:44 +0000
Subject: pathways: spatial movement, bigger tiles, cleaner exits

- movement lands on the photo already occupying the cell ahead instead
  of skipping over it to place a new one; new photos only fill genuinely
  empty cells, and already-placed path targets still jump to their tile
- tiles 360px desktop / 200px mobile
- fix hover exits being clipped half-off by the tile's overflow:hidden
  (clip now lives on the img only); restyle as white circle buttons with
  SVG chevrons and pill path labels
---
 public/app.css | 34 +++++++++++++++++-----------------
 1 file changed, 17 insertions(+), 17 deletions(-)

(limited to 'public/app.css')

diff --git a/public/app.css b/public/app.css
index ddd472d..44b7c7f 100644
--- a/public/app.css
+++ b/public/app.css
@@ -37,13 +37,12 @@ html, body {
 .tile {
   position: absolute;
   border-radius: 6px;
-  overflow: hidden;
   background: var(--tile);
   box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
   cursor: pointer;
   transition: box-shadow .2s;
 }
-.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.tile img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; }
 .tile.lock { animation: lock .5s cubic-bezier(.22, 1, .36, 1); }
 
 @keyframes lock {
@@ -67,20 +66,20 @@ html, body {
 .nav-btn {
   position: absolute;
   pointer-events: auto;
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, .25);
-  background: rgba(14, 15, 19, .85);
-  color: var(--ink);
-  font-size: 15px;
-  line-height: 1;
+  border: none;
+  background: rgba(255, 255, 255, .95);
+  color: #17181d;
   cursor: pointer;
   display: grid;
   place-items: center;
-  transition: transform .12s, border-color .12s;
+  box-shadow: 0 2px 14px rgba(0, 0, 0, .5);
+  transition: transform .12s, background .12s, box-shadow .12s;
 }
-.nav-btn:hover { border-color: var(--ring); transform: scale(1.12); }
+.nav-btn svg { width: 22px; height: 22px; display: block; }
+.nav-btn:hover { transform: scale(1.15); background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .55); }
 .nav-btn[data-dir="N"] { top: 0; left: 50%; translate: -50% -50%; }
 .nav-btn[data-dir="E"] { top: 50%; right: 0; translate: 50% -50%; }
 .nav-btn[data-dir="S"] { bottom: 0; left: 50%; translate: -50% 50%; }
@@ -91,13 +90,14 @@ html, body {
   left: 50%;
   translate: -50%;
   white-space: nowrap;
-  font-size: 11px;
-  letter-spacing: .04em;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: .02em;
   color: var(--ink);
-  background: rgba(14, 15, 19, .92);
-  border: 1px solid rgba(255, 255, 255, .18);
-  border-radius: 4px;
-  padding: 2px 7px;
+  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;
-- 
cgit v1.3.1