From 43ec71f91b70fd65e180a4e2f6a4df80dad04b27 Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 10:38:09 +0000
Subject: Touch interaction model for coarse pointers, desktop unchanged

Gated on matchMedia("(hover: none)") so mouse/trackpad behavior is
untouched:
- Nav zones + edge markers only on the current tile; tapping any other
  tile selects it first. No more accidental traverses on touch.
- Edges always visible on touch (the hover glow becomes the tap
  affordance), glow while pressed via :active. Bands modestly shrunk so
  tile centers stay grab-to-pan.
- No hover ghost preview and no dropzones on touch (they were invisible
  tap traps without hover).
- Two-finger pinch to zoom (pointer-count based, works everywhere).
- Double-tap on empty space resets zoom, mirroring desktop dblclick.
- Kill iOS tap-highlight and long-press callout.

Adds /tmp/touchtest.mjs (15 checks) covering select/traverse/pinch/
double-tap/pan; domtest 52/52, exhaust 9/9, splash 6/6, fuzz clean.
---
 public/app.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

(limited to 'public/app.css')

diff --git a/public/app.css b/public/app.css
index a2df38d..6d5e992 100644
--- a/public/app.css
+++ b/public/app.css
@@ -91,6 +91,24 @@ html, body {
   filter: drop-shadow(0 0 8px rgba(125, 211, 252, .9));
 }
 
+@media (hover: none) {
+  #stage {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+  .nav-zone-N { height: 25%; }
+  .nav-zone-S { height: 25%; }
+  .nav-zone-E { top: 26%; height: 48%; width: 25%; }
+  .nav-zone-W { top: 26%; height: 48%; width: 25%; }
+  .nav-edge {
+    opacity: 1;
+    filter: drop-shadow(0 0 6px rgba(125, 211, 252, .45));
+  }
+  .nav-zone:active .nav-edge {
+    filter: drop-shadow(0 0 12px rgba(125, 211, 252, 1));
+  }
+}
+
 #splash {
   position: fixed;
   inset: 0;
-- 
cgit v1.3.1