feat(iter-9): mobile/touch pass — close out and retire the improvement plan

evolution_log.md

@@ -4,6 +4,32 @@ Each entry records one autonomous improvement iteration.
 
 ---
 
+## Iteration 9 — 2026-06-12
+
+### [Mobile & Touch Pass — closes the improvement plan]
+
+The last open item in IMPROVEMENT_PLAN.md (§4.4, deeper mobile/touch pass) is done, and the
+plan file itself is retired — every other item was either shipped (pillars 1–3, 5, most of 4)
+or explicitly deprioritized in its status section (3.4 build-time results, 4.1 value diff).
+
+- **Proper viewport**: `layout.tsx` now exports Next's `viewport` object — device-width,
+  `viewportFit: 'cover'` (the fixed terminal layout extends under notches), and the brand
+  `themeColor` so mobile browser chrome matches the header.
+- **Touch targets**: a `@media (pointer: coarse)` layer in `globals.css` grows icon buttons
+  (level navigator open/close, back, toast dismiss) to ≥40px via a shared `.lcb-icon-btn`
+  class, gives the SQL snippet pills finger-sized padding, and widens the level-progress-map
+  tiles from 9×14 to 15×20. `touch-action: manipulation` on all buttons removes the
+  double-tap-zoom delay on rapid Run/Submit taps.
+- **Editor on touch**: Monaco gets a 16px font on coarse pointers (anything smaller makes iOS
+  zoom the page when the hidden textarea focuses) plus word wrap for narrow screens; the
+  ⌘↵ / ⇧⌘↵ keyboard-shortcut hints on Run/Submit are hidden where there is no keyboard.
+- **Dynamic-viewport units**: the stacked mobile panels (`75vh`) and the level-up modal
+  (`90vh`) now use `dvh`, so the iOS/Android collapsing URL bar no longer hides the bottom
+  of the editor or the modal's Continue button.
+- **Status bar**: the harbour status row wraps instead of overflowing at very narrow widths.
+
+---
+
 ## Iteration 8 — 2026-06-12
 
 ### [Game Design Tweaks]

src/app/globals.css

@@ -30,8 +30,12 @@ html, body {
   background: var(--lcb-black);
   color: var(--lcb-white);
   font-family: var(--font-ibm-plex-mono), 'Courier New', monospace;
+  -webkit-text-size-adjust: 100%;
 }
 
+/* Kill the double-tap-to-zoom delay on rapid Run/Submit taps. */
+button { touch-action: manipulation; }
+
 /* ── Panel base ───────────────────────────────────────────────────────────── */
 .lcb-panel {
   background: var(--lcb-panel);
@@ -136,6 +140,28 @@ input:focus-visible {
   z-index: 60;
 }
 
+/* ── Level progress map tiles ────────────────────────────────────────────── */
+.lcb-map-strip { height: 22px; }
+.lcb-map-dot   { width: 9px; height: 14px; }
+
+/* ── Touch devices ───────────────────────────────────────────────────────────
+   On coarse pointers the desktop-dense controls need real tap targets:
+   icon buttons grow to ≥40px, snippet pills get finger-sized padding, the
+   progress-map tiles widen, and keyboard-shortcut hints disappear. */
+@media (pointer: coarse) {
+  .lcb-icon-btn {
+    min-width: 40px;
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .lcb-snippet   { padding: 8px 12px; min-height: 38px; }
+  .lcb-kbd-hint  { display: none; }
+  .lcb-map-strip { height: 30px; }
+  .lcb-map-dot   { width: 15px; height: 20px; }
+}
+
 /* ── Reduced motion ───────────────────────────────────────────────────────── */
 @media (prefers-reduced-motion: reduce) {
   .animate-gold-pulse { animation: none; }

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { Playfair_Display, IBM_Plex_Mono } from "next/font/google";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
@@ -18,6 +18,15 @@ const ibmPlexMono = IBM_Plex_Mono({
   display: "swap",
 });
 
+// viewportFit: 'cover' lets the fixed terminal layout extend under notches;
+// the brand theme colour keeps iOS/Android chrome matching the header.
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+  themeColor: "#08090d",
+};
+
 export const metadata: Metadata = {
   title: "Lion City Bank — SQL Analytics Terminal",
   description: