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

@@ -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;

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 {