Mobile pass: hand above the paperwork, dvh sizing, tight masthead

At phone width the layout now flows board -> actions -> your hand ->
turn slip -> score sheet -> chronicle, instead of burying the cards
beneath the paperwork below the fold. The board caps at 56dvh (dvh
throughout, for iOS's shifting address bar), the chronicle stops
hogging height, and the masthead holds one line. The hand is a
thumb-swipeable card row; pinch-zoom stays enabled for reading fine
card text.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

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>