From f1a60f973f90cccbeef5a7100af028e5196a2e84 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Tue, 28 Apr 2026 22:33:06 +0700
Subject: [PATCH] fix(mobile): tighten board-to-dock spacing on touch devices

Short puzzles (e.g. Microban 1) showed ~300px of invisible dead space
between the board and the on-screen D-pad because <Board> is fixed-pixel
and rendered top-left inside a flex-grown wrapper. Anchor .board-wrap
contents to flex-end on coarse pointers so the gap collapses against
the dock instead of below the board. Also drop the redundant 24px #app
bottom padding (the dock already pads safe-area-inset-bottom) and
tighten the .game flex gap from 16px to 10px on coarse pointers.

All changes gated behind @media (pointer: coarse). Desktop layout is
untouched.
---
 src/app.css               |  6 ++++++
 src/views/GameView.svelte | 16 ++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index c407639..9fd5374 100644
--- a/src/app.css
+++ b/src/app.css
@@ -66,6 +66,12 @@ body {
     padding: 24px;
 }
 
+/* Touch devices: drop bottom padding (mobile dock owns its own
+   safe-area inset) and slim lateral padding so the board has more room. */
+@media (pointer: coarse) {
+    #app { padding: 12px 12px 0; }
+}
+
 button {
     font-family: inherit;
     touch-action: manipulation;
diff --git a/src/views/GameView.svelte b/src/views/GameView.svelte
index 053c1e9..7ca764e 100644
--- a/src/views/GameView.svelte
+++ b/src/views/GameView.svelte
@@ -245,10 +245,22 @@
         max-width: calc(100vw - 48px);
     }
 
-    /* On touch devices, hide the duplicated header action buttons —
-       MobileControls now occupies its own row at the bottom of the flex column. */
+    /* On touch devices: hide duplicated header action buttons (MobileControls
+       owns its own row at the bottom), tighten the column rhythm, and anchor
+       the puzzle to the bottom of .board-wrap so dead space accumulates above
+       the board (hidden behind HUD) instead of below it (between board and
+       dock). Closes the perceived "D-pad too far" gap on short puzzles. */
     @media (pointer: coarse) {
         .desktop-actions { display: none; }
+
+        .game { gap: 10px; }
+
+        .board-wrap {
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            max-width: calc(100vw - 24px);
+        }
     }
 
     .error {