diff --git a/src/apps/epic/tests/integrated/test_views.py b/src/apps/epic/tests/integrated/test_views.py
index ae76c71..6c067db 100644
--- a/src/apps/epic/tests/integrated/test_views.py
+++ b/src/apps/epic/tests/integrated/test_views.py
@@ -4161,6 +4161,26 @@ class PickSeaUnifiedFeltTest(TestCase):
         self.assertIn("AUTO", content)
         self.assertNotIn("id_sea_lock_hand", content)
 
+    def test_ok_disabled_and_del_enabled_once_a_card_is_drawn(self):
+        """Once a card is drawn (saved_by_position), the OK btn gains .btn-disabled
+        (the spread is locked) while DEL loses it — inverse states, simultaneous
+        with the select locking (user-spec 2026-06-07). Fresh (no draw): OK is
+        enabled, DEL disabled."""
+        import lxml.html
+        # Fresh — OK enabled, DEL disabled.
+        parsed = lxml.html.fromstring(self.client.get(self.url).content)
+        self.assertNotIn("btn-disabled", parsed.cssselect("#id_sea_confirm_spread")[0].get("class", ""))
+        self.assertIn("btn-disabled", parsed.cssselect("#id_sea_del")[0].get("class", ""))
+        # One card drawn — flips.
+        card_id = TarotCard.objects.filter(deck_variant=self.earthman).first().id
+        char = Character.objects.get(seat=self.pc_seat, confirmed_at__isnull=False)
+        char.celtic_cross = {"spread": "waite-smith", "hand": [
+            {"position": "cover", "card_id": card_id, "reversed": False, "polarity": "gravity"}]}
+        char.save(update_fields=["celtic_cross"])
+        parsed = lxml.html.fromstring(self.client.get(self.url).content)
+        self.assertIn("btn-disabled", parsed.cssselect("#id_sea_confirm_spread")[0].get("class", ""))
+        self.assertNotIn("btn-disabled", parsed.cssselect("#id_sea_del")[0].get("class", ""))
+
     def test_only_two_celtic_cross_spread_options(self):
         content = self.client.get(self.url).content.decode()
         self.assertIn('data-value="waite-smith"', content)
diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss
index ac25f15..679e88b 100644
--- a/src/static_src/scss/_sky.scss
+++ b/src/static_src/scss/_sky.scss
@@ -115,11 +115,51 @@ html.sea-open .sea-page.sea-page--room {
 }
 
 // The options form blends onto the --duoUser felt (transparent, content-sized) —
-// "the modal contents on green felt", not the modal's purple --priUser card.
+// "the modal contents on green felt". The form-col + form-main are transparent
+// flex columns; each of the THREE chunks (spread/select/OK, preview, actions)
+// is its own --priUser rounded rectangle (the GAME POST .form-control look).
 .sea-page--room .sea-options-col .sea-form-col {
     background: transparent;
     width: auto;
-    min-width: 14rem;
+    min-width: 15rem;
+    max-width: 22rem;
+    padding: 0;
+    gap: 0.6rem;
+}
+.sea-page--room .sea-options-col .sea-form-main {
+    flex: 0 0 auto;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+
+// Combobox + OK on one row (OK to the RIGHT of the select).
+.sea-page--room .sea-options-col .sea-select-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .sea-select { flex: 1; min-width: 0; }
+}
+
+// The three chunks — same --priUser rectangle as the GAME POST lines/composer
+// (_base.scss .form-control): --priUser fill + a half-alpha --secUser border +
+// rounded corners + padding. Resets each chunk's own modal-era margins/padding.
+.sea-page--room .sea-options-col .sea-field,
+.sea-page--room .sea-options-col .sea-cards-col--preview,
+.sea-page--room .sea-options-col .sea-form-actions {
+    background-color: rgba(var(--priUser), 1);
+    border: 0.1rem solid rgba(var(--secUser), 0.5);
+    border-radius: 0.5rem;
+    padding: 0.6rem 0.75rem;
+    margin: 0;
+}
+.sea-page--room .sea-options-col .sea-form-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
 }
 
 // Pre-confirm: only the options show (the cross is hidden), filling the aperture
diff --git a/src/templates/apps/gameboard/_partials/_sea_overlay.html b/src/templates/apps/gameboard/_partials/_sea_overlay.html
index f409619..d8a0826 100644
--- a/src/templates/apps/gameboard/_partials/_sea_overlay.html
+++ b/src/templates/apps/gameboard/_partials/_sea_overlay.html
@@ -29,25 +29,31 @@ via epic:sea_save. `?seat` threads the CARTE-selected seat onto the action URLs.
                     {# Two Celtic Cross 6-card spreads only (user-spec 2026-06-07). #}
                     <input type="hidden" id="id_sea_spread" name="spread" autocomplete="off"
                            value="{{ sea_default_spread }}">
-                    <div class="sea-select"
-                         data-combobox
-                         data-combobox-target="id_sea_spread"
-                         role="combobox"
-                         aria-expanded="false"
-                         aria-haspopup="listbox"
-                         aria-labelledby="id_sea_spread_label"
-                         tabindex="0">
-                        <span class="sea-select-current">{% if sea_default_spread == "escape-velocity" %}Celtic Cross, Escape Velocity{% else %}Celtic Cross, Waite-Smith{% endif %}</span>
-                        <span class="sea-select-arrow" aria-hidden="true">▾</span>
-                        <ul class="sea-select-list" role="listbox">
-                            {% if user_polarity == "levity" %}
-                                <li role="option" data-value="waite-smith"     aria-selected="{% if sea_default_spread == 'escape-velocity' %}false{% else %}true{% endif %}">Celtic Cross, Waite-Smith</li>
-                                <li role="option" data-value="escape-velocity" aria-selected="{% if sea_default_spread == 'escape-velocity' %}true{% else %}false{% endif %}">Celtic Cross, Escape Velocity</li>
-                            {% else %}
-                                <li role="option" data-value="escape-velocity" aria-selected="{% if sea_default_spread == 'waite-smith' %}false{% else %}true{% endif %}">Celtic Cross, Escape Velocity</li>
-                                <li role="option" data-value="waite-smith"     aria-selected="{% if sea_default_spread == 'waite-smith' %}true{% else %}false{% endif %}">Celtic Cross, Waite-Smith</li>
-                            {% endif %}
-                        </ul>
+                    {# Combobox + OK on one row — OK confirms the spread → shunts.   #}
+                    {# OK gains .btn-disabled + × the moment the first card is drawn  #}
+                    {# (the spread is then locked, the select disables, DEL enables). #}
+                    <div class="sea-select-row">
+                        <div class="sea-select"
+                             data-combobox
+                             data-combobox-target="id_sea_spread"
+                             role="combobox"
+                             aria-expanded="false"
+                             aria-haspopup="listbox"
+                             aria-labelledby="id_sea_spread_label"
+                             tabindex="0">
+                            <span class="sea-select-current">{% if sea_default_spread == "escape-velocity" %}Celtic Cross, Escape Velocity{% else %}Celtic Cross, Waite-Smith{% endif %}</span>
+                            <span class="sea-select-arrow" aria-hidden="true">▾</span>
+                            <ul class="sea-select-list" role="listbox">
+                                {% if user_polarity == "levity" %}
+                                    <li role="option" data-value="waite-smith"     aria-selected="{% if sea_default_spread == 'escape-velocity' %}false{% else %}true{% endif %}">Celtic Cross, Waite-Smith</li>
+                                    <li role="option" data-value="escape-velocity" aria-selected="{% if sea_default_spread == 'escape-velocity' %}true{% else %}false{% endif %}">Celtic Cross, Escape Velocity</li>
+                                {% else %}
+                                    <li role="option" data-value="escape-velocity" aria-selected="{% if sea_default_spread == 'waite-smith' %}false{% else %}true{% endif %}">Celtic Cross, Escape Velocity</li>
+                                    <li role="option" data-value="waite-smith"     aria-selected="{% if sea_default_spread == 'waite-smith' %}true{% else %}false{% endif %}">Celtic Cross, Waite-Smith</li>
+                                {% endif %}
+                            </ul>
+                        </div>
+                        <button type="button" id="id_sea_confirm_spread" class="btn btn-confirm{% if saved_by_position %} btn-disabled{% endif %}">{% if saved_by_position %}&times;{% else %}OK{% endif %}</button>
                     </div>
                 </div>
 
@@ -57,9 +63,6 @@ via epic:sea_save. `?seat` threads the CARTE-selected seat onto the action URLs.
             </div>
 
             <div class="sea-form-actions">
-                {# OK confirms the spread → shunts the options down + reveals the   #}
-                {# cross (a regular .btn-confirm, NOT a big .btn-primary).          #}
-                <button type="button" id="id_sea_confirm_spread" class="btn btn-confirm">OK</button>
                 {# AUTO DRAW commits the remaining hand in one POST + animates onto  #}
                 {# the cross (confirms the spread first if not yet). DEL clears.     #}
                 <button type="button"
@@ -215,7 +218,9 @@ via epic:sea_save. `?seat` threads the CARTE-selected seat onto the action URLs.
     if (_spreadChosen) return;
     _spreadChosen = true;
     page.classList.add('sea-spread-chosen');
-    _lockSpread();
+    // NB: the combobox is NOT locked here — the spread stays changeable (scroll
+    // up) until the FIRST card is drawn, when _lockSpread() + _setHasDrawn(true)
+    // disable the select + OK together (user-spec 2026-06-07).
     _scrollToCross();
   }
   function _scrollToCross() {
@@ -234,10 +239,16 @@ via epic:sea_save. `?seat` threads the CARTE-selected seat onto the action URLs.
     }
     requestAnimationFrame(step);
   }
-  if (okBtn) okBtn.addEventListener('click', _chooseSpread);
+  if (okBtn) okBtn.addEventListener('click', function () {
+    if (okBtn.classList.contains('btn-disabled')) return;
+    _chooseSpread();
+  });
 
+  // First card drawn → DEL un-disables ("DEL") + OK disables ("×"), simultaneous
+  // with the combobox locking (`_lockSpread`). The two btns are inverse states.
   function _setHasDrawn(on) {
     if (delBtn) { delBtn.classList.toggle('btn-disabled', !on); delBtn.innerHTML = on ? 'DEL' : '×'; }
+    if (okBtn)  { okBtn.classList.toggle('btn-disabled', on);  okBtn.innerHTML  = on ? '×' : 'OK'; }
   }
   function _setComplete(on, live) {
     _locked = on;