diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss
index 22f8a49..fd5c2e1 100644
--- a/src/static_src/scss/_gameboard.scss
+++ b/src/static_src/scss/_gameboard.scss
@@ -489,36 +489,6 @@ 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
@@ -531,6 +501,45 @@ body.page-gameboard {
         overflow: visible;
     }
 
+    // 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
+    // the form col despite the intermediate wrapper in the DOM.
+    //
+    // Selector chains `.sea-form-col.my-sea-form-col` to win against
+    // `_card-deck.scss`'s base `.sea-form-col { display: flex; flex-
+    // direction: column }` (same 1-class specificity; card-deck loads
+    // AFTER gameboard in `core.scss`, so source order would otherwise
+    // overrule my-sea's grid). Chained 2-class selector pulls
+    // specificity ahead regardless of source order.
+    @media (orientation: portrait) {
+        &.sea-form-col {
+            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; }
+        }
+    }
+
     // Bump the dropdown z-index well above the picker's stacking ints
     // (cover z:3, cross z:4, modal stage z:9999 only opens on draw
     // anyway). 1000 sits above any in-page layer the user might be