diff --git a/src/views/Board.svelte b/src/views/Board.svelte
index 9ec0cba..ab13a3f 100644
--- a/src/views/Board.svelte
+++ b/src/views/Board.svelte
@@ -107,6 +107,14 @@
         -webkit-user-select: none;
     }
 
+    /* On touch devices the parent .board-wrap is a flex container with
+       align-items: flex-end. Adding margin-top: auto is a belt-and-suspenders
+       cross-axis push so the board hugs the dock even if a future refactor
+       drops the parent's align-items. No effect on desktop (parent is not flex). */
+    @media (pointer: coarse) {
+        .board { margin-top: auto; }
+    }
+
     .floor,
     .target,
     .wall,
diff --git a/src/views/GameView.svelte b/src/views/GameView.svelte
index 7ca764e..e1c71f9 100644
--- a/src/views/GameView.svelte
+++ b/src/views/GameView.svelte
@@ -43,7 +43,9 @@
         const minTile = 16;
         // Dock is now in-flow (flex row at bottom); margin only covers header + hud + padding.
         const isCoarse = typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches;
-        const margin = isCoarse ? 220 : 120; // header + hud (+ in-flow mobile dock) + padding
+        // 195 reflects the slimmer mobile chrome after R6+R7 (top-aligned d-pad
+        // at 48px arrows). If the dock layout changes, retune this.
+        const margin = isCoarse ? 195 : 120; // header + hud (+ in-flow mobile dock) + padding
         const maxByWidth = Math.floor((window.innerWidth - 80) / level.width);
         const maxByHeight = Math.floor((window.innerHeight - margin - 100) / level.height);
         return Math.max(minTile, Math.min(maxTile, maxByWidth, maxByHeight));
diff --git a/src/views/MobileControls.svelte b/src/views/MobileControls.svelte
index fd70371..e8aee96 100644
--- a/src/views/MobileControls.svelte
+++ b/src/views/MobileControls.svelte
@@ -108,10 +108,13 @@
     }
 
     @media (pointer: coarse) {
+        /* stretch lets each column choose its own cross-axis position so the
+           D-pad can hug the dock top (closer to board) while the action stack
+           stays bottom-anchored (closer to thumb). */
         .mobile-dock {
             display: flex;
             justify-content: space-between;
-            align-items: flex-end;
+            align-items: stretch;
             gap: 12px;
             width: 100%;
             padding:
@@ -125,17 +128,19 @@
         .dock-left {
             display: flex;
             flex-direction: column;
+            justify-content: flex-end;
             gap: 8px;
         }
 
         .dpad {
             display: grid;
-            grid-template-columns: 56px 56px 56px;
-            grid-template-rows: 56px 56px;
+            grid-template-columns: 48px 48px 48px;
+            grid-template-rows: 48px 48px;
             grid-template-areas:
                 ".    up   .   "
                 "left down right";
-            gap: 4px;
+            gap: 6px;
+            align-self: flex-start;
         }
     }