diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte
index 05463e2..70c4f4e 100644
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -1075,7 +1075,7 @@
   }
   .board-zone { display: flex; align-items: flex-start; justify-content: center; min-width: 0; }
   .board-zone :global(svg.board) {
-    max-height: calc(100vh - 21.5rem);
+    max-height: calc(100dvh - 21.5rem);
     width: auto;
     max-width: 100%;
   }
@@ -1207,8 +1207,20 @@
   }
 
   @media (max-width: 900px) {
-    .game { grid-template-columns: 1fr; }
-    .paper-rail { order: 2; }
-    .chronicle { max-height: 22vh; }
+    /* One-column phone flow: board, then your controls and hand, THEN the
+       paperwork — cards must never hide below the chronicle. */
+    .game { display: contents; }
+    .board-zone { order: 1; }
+    .table-edge { order: 2; margin-top: 0.6rem; }
+    .paper-rail { order: 3; margin-top: 0.9rem; }
+    .board-zone :global(svg.board) {
+      max-height: 56dvh;
+    }
+    .chronicle { max-height: 30dvh; flex: initial; }
+    .masthead { gap: 0.45rem; padding-top: 0.5rem; }
+    .mast-title { font-size: 1.05rem; white-space: nowrap; }
+    .mast-sub { display: none; }
+    .mast-leave { font-size: 0.72rem; }
+    .hand { min-height: auto; }
   }
 </style>