diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss
index 087041a..22f8a49 100644
--- a/src/static_src/scss/_gameboard.scss
+++ b/src/static_src/scss/_gameboard.scss
@@ -489,6 +489,36 @@ body.page-gameboard {
     flex: 0 0 16rem;
     max-width: 16rem;
 
+    // Portrait — split the form into two columns. LEFT carries the
+    // SPREAD field (label + reversal hint + combobox) above the action
+    // btns (AUTO DRAW / GATE VIEW + DEL); RIGHT carries the DECKS
+    // section (label + GRAVITY/LEVITY stacks) spanning both rows.
+    // Without this rearrange, on a phone-portrait viewport the stacked
+    // form col runs off the bottom of the viewport — DECKS lives above
+    // the action btns + everything below the fold (user-spec
+    // 2026-05-21). `.sea-form-main` uses `display: contents` so its
+    // `.sea-field` + `.sea-stacks` children act as direct grid items of
+    // `.my-sea-form-col` despite the intermediate wrapper in the DOM.
+    @media (orientation: portrait) {
+        flex: 0 0 auto;
+        max-width: none;
+        width: 100%;
+
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas:
+            "field   stacks"
+            "actions stacks";
+        column-gap: 1rem;
+        row-gap: 0.5rem;
+        align-items: start;
+
+        .sea-form-main    { display: contents; }
+        .sea-field        { grid-area: field;   margin-bottom: 0; }
+        .sea-stacks       { grid-area: stacks;  margin: 0; justify-content: center; }
+        .sea-form-actions { grid-area: actions; align-self: end; padding-top: 0; }
+    }
+
     // Portal the SPREAD dropdown out of `.sea-form-main`'s overflow
     // clip — by default the gameroom's `.sea-form-main { overflow-y:
     // auto }` (from _card-deck.scss:1424) keeps the modal contents