My Sea form col + SPREAD dropdown w. 3-card/6-card section dividers — Sprint 5 iter 3 of My Sea roadmap — TDD

Picker phase form col: SPREAD combobox w. 6 spread options under 2 horizontal section dividers ("3-card spreads" / "6-card spreads"), reversal-% caption, GRAVITY + LEVITY deck swatches, LOCK HAND + DEL btns. Default = Situation, Action, Outcome (a 3-card spread). Selecting a 6-card spread (Celtic Cross Waite-Smith or Escape Velocity) swaps `.my-sea-cross[data-spread-shape]` from `three-card` to `six-card` — revealing the crown / lay / cross cells that the default 3-card variants hide.

Naming correction (user-locked): the spread itself is a "three-card spread" not a "three-card cross" — "cross" stays scoped to the Celtic Cross variants (6-card spreads). CSS class `.my-sea-cross` carries grid-container semantics regardless of which spread shape is active; the spread-vs-cross distinction lives at the spread-name layer only.

- **View** (gameboard/views.py): `my_sea` adds `default_spread = "situation-action-outcome"` + `reversals_pct = 25` context keys.
- **Template** (my_sea.html): renders all 7 cross cells (crown/leave/core+cover+cross/loom/lay) unconditionally + adds `data-spread-shape="three-card"` to `.my-sea-cross`. Form col DRY-reuses gameroom `_sea_overlay.html`'s `.sea-form-col` shape — `.sea-form-main` w. `.sea-field` (SPREAD label + reversal hint + custom combobox) + `.sea-stacks` (GRAVITY + LEVITY swatches) + `.sea-form-actions` (LOCK HAND + DEL). 6 options + 2 dividers in the combobox `<ul>`; dividers are `role="presentation"` so `combobox.js` skips them naturally. Inline IIFE listens for the hidden `<input id="id_sea_spread">`'s `change` event + sets `.my-sea-cross`'s `data-spread-shape` based on whether the value is in `['waite-smith', 'escape-velocity']`. No new combobox.js wiring — the existing module's `change`-bubbling contract feeds straight in.
- **SCSS** (_gameboard.scss):
  - `.my-sea-cross[data-spread-shape="three-card"]` — single-row `"leave core loom"` grid + `display: none` on crown/lay/cross.
  - `.my-sea-cross[data-spread-shape="six-card"]` — inherits the gameroom `.sea-cross`'s 3×3 grid + reveals all cells.
  - `.sea-select-divider` — section header style mirrors `.kit-bag-label`'s small-uppercase-underlined-letter-spaced --quaUser/0.75 treatment but HORIZONTAL (kit-bag uses `writing-mode: vertical-rl`; dropdown menus are flat). `pointer-events: none` belt-and-braces against accidental click/hover.
  - `.my-sea-form-col` — width-constrains the form col so the picker's cross + form sit side-by-side.

**Iter-2 contract updated** (cells in DOM, hidden via CSS for 3-card default):

- FT `test_picker_does_not_render_forsaken_positions` → renamed to `test_picker_hides_six_card_only_positions_by_default` — asserts the 3 cells are in the DOM but `is_displayed() == False` so iter-3's spread switch can reveal them via CSS without re-rendering.
- IT `test_picker_does_not_render_forsaken_positions` → renamed to `test_picker_renders_six_card_only_positions_for_spread_switch` — assertContains the classes (server now renders them unconditionally).

**Tests**:

- 4 FTs in new `MySeaSpreadFormTest`: combobox renders 6 options + 2 dividers w. correct labels, default is Situation/Action/Outcome (hidden input value + visible current-label span + cross's data-spread-shape), picking Celtic Cross flips data-spread-shape to six-card + reveals crown/lay/cross, form col carries DECKS swatches + LOCK HAND + DEL + reversal-% caption. Combobox `<li>` options are inside `aria-expanded='false'` listbox → use `get_attribute("textContent")` not `.text` (which returns "" for Selenium-hidden elements).
- 7 ITs in new `MySeaSpreadFormTemplateTest`: default_spread + reversals_pct context keys, all 6 options + both labels render, 2 dividers render w. expected text, default option carries aria-selected="true", cross's initial data-spread-shape="three-card", form col DECKS + buttons + reversal hint render.

Tests: 32/32 FT green across test_bill_my_sign + test_game_my_sea; 1048/1048 IT/UT green in 52s.

Card-draw mechanics (clicking a deck swatch deposits a card into the next empty slot; LOCK HAND commits the draw) defer to iter 4 — this iter ships the spread-selection + layout-shape switch UI; the buttons are stubs (LOCK HAND starts disabled, DEL is a placeholder).

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>

src/apps/gameboard/tests/integrated/test_views.py

@@ -618,13 +618,17 @@ class MySeaPickerPhaseTemplateTest(TestCase):
         self.assertContains(response, "sea-pos-leave")
         self.assertContains(response, "sea-pos-loom")
 
-    def test_picker_does_not_render_forsaken_positions(self):
-        # Crown / lay / cross are gameroom-only — user-locked spec drops
-        # them from the solo three-card spread.
+    def test_picker_renders_six_card_only_positions_for_spread_switch(self):
+        # Crown / lay / cross sit in the DOM unconditionally so iter 3's
+        # SPREAD dropdown can reveal them via CSS attribute swap (data-
+        # spread-shape="six-card") without re-rendering. Default 3-card
+        # spread hides them via `.my-sea-cross[data-spread-shape=
+        # "three-card"]` rules in _gameboard.scss — FT pins the hidden
+        # state visually.
         response = self.client.get(reverse("my_sea"))
-        self.assertNotContains(response, "sea-pos-crown")
-        self.assertNotContains(response, "sea-pos-lay")
-        self.assertNotContains(response, "sea-pos-cross")
+        self.assertContains(response, "sea-pos-crown")
+        self.assertContains(response, "sea-pos-lay")
+        self.assertContains(response, "sea-pos-cross")
 
     def test_picker_not_rendered_when_user_has_no_sig(self):
         # 4b gate wins; picker has no business rendering without a sig.
@@ -632,3 +636,75 @@ class MySeaPickerPhaseTemplateTest(TestCase):
         self.user.save(update_fields=["significator"])
         response = self.client.get(reverse("my_sea"))
         self.assertNotContains(response, "my-sea-picker")
+
+
+class MySeaSpreadFormTemplateTest(TestCase):
+    """Sprint 5 iter 3 — form col + SPREAD dropdown structure + default-
+    spread context + cross's `data-spread-shape` attribute. Iter 3 spec
+    locks `Situation, Action, Outcome` as the default spread (a 3-card
+    variant); the 6 spreads sit under 2 section dividers (3-card / 6-
+    card)."""
+
+    SPREAD_OPTIONS = [
+        ("past-present-future", "Past, Present, Future"),
+        ("situation-action-outcome", "Situation, Action, Outcome"),
+        ("mind-body-spirit", "Mind, Body, Spirit"),
+        ("desire-obstacle-solution", "Desire, Obstacle, Solution"),
+        ("waite-smith", "Celtic Cross, Waite-Smith"),
+        ("escape-velocity", "Celtic Cross, Escape Velocity"),
+    ]
+
+    def setUp(self):
+        from apps.epic.models import personal_sig_cards
+        self.user = User.objects.create(email="spread@test.io")
+        self.client.force_login(self.user)
+        self.target = personal_sig_cards(self.user)[0]
+        self.user.significator = self.target
+        self.user.save(update_fields=["significator"])
+
+    def test_context_default_spread_is_situation_action_outcome(self):
+        response = self.client.get(reverse("my_sea"))
+        self.assertEqual(
+            response.context["default_spread"], "situation-action-outcome",
+        )
+
+    def test_context_reversals_pct_defaults_to_25(self):
+        response = self.client.get(reverse("my_sea"))
+        self.assertEqual(response.context["reversals_pct"], 25)
+
+    def test_template_renders_all_six_spread_options(self):
+        response = self.client.get(reverse("my_sea"))
+        html = response.content.decode()
+        for value, label in self.SPREAD_OPTIONS:
+            with self.subTest(spread=value):
+                self.assertIn(f'data-value="{value}"', html)
+                self.assertIn(label, html)
+
+    def test_template_renders_three_card_and_six_card_section_dividers(self):
+        response = self.client.get(reverse("my_sea"))
+        html = response.content.decode()
+        self.assertEqual(html.count("sea-select-divider"), 2)
+        self.assertIn("3-card spreads", html)
+        self.assertIn("6-card spreads", html)
+
+    def test_template_marks_situation_action_outcome_aria_selected(self):
+        response = self.client.get(reverse("my_sea"))
+        html = response.content.decode()
+        # The default option carries aria-selected="true"; the others false.
+        self.assertIn(
+            'data-value="situation-action-outcome" aria-selected="true"', html,
+        )
+
+    def test_cross_carries_initial_three_card_spread_shape(self):
+        response = self.client.get(reverse("my_sea"))
+        self.assertContains(response, 'data-spread-shape="three-card"')
+
+    def test_form_col_renders_decks_lock_hand_del_and_reversal_hint(self):
+        response = self.client.get(reverse("my_sea"))
+        html = response.content.decode()
+        self.assertIn("sea-deck-stack--gravity", html)
+        self.assertIn("sea-deck-stack--levity", html)
+        self.assertIn('id="id_sea_lock_hand"', html)
+        self.assertIn('id="id_sea_del"', html)
+        self.assertIn("sea-reversal-hint", html)
+        self.assertIn("25% reversals", html)

src/apps/gameboard/views.py

@@ -193,6 +193,11 @@ def my_sea(request):
         # `.suit_icon` resolve at render time.
         "significator": request.user.significator,
         "significator_reversed": request.user.significator_reversed,
+        # Sprint 5 iter 3 — SPREAD dropdown defaults to Situation/Action/
+        # Outcome (a 3-card spread) per user-locked spec; `reversals_pct`
+        # is a placeholder UI value pending the per-user setting.
+        "default_spread": "situation-action-outcome",
+        "reversals_pct": 25,
         "page_class": "page-gameboard page-my-sea",
     })
 

src/functional_tests/test_game_my_sea.py

@@ -399,15 +399,191 @@ class MySeaPickerPhaseTest(FunctionalTest):
 
     # ── Test 3 ───────────────────────────────────────────────────────────────
 
-    def test_picker_does_not_render_forsaken_positions(self):
-        """Crown / lay / cross from the gameroom's 6-position Celtic
-        Cross are forsaken in the solo three-card spread (user-locked
-        spec). None of these classes should appear in the picker DOM."""
+    def test_picker_hides_six_card_only_positions_by_default(self):
+        """Crown / lay / cross are 6-card-spread-only positions; they
+        sit in the picker DOM (so iter 3's spread switch can reveal
+        them without re-rendering) but stay `display:none` while the
+        default 3-card spread (`data-spread-shape="three-card"`) is
+        active. Iter 3's SPREAD dropdown switches `data-spread-shape`
+        on change to reveal these positions for Celtic Cross variants."""
         picker = self._enter_picker_phase()
-        for forsaken in (".sea-pos-crown", ".sea-pos-lay", ".sea-pos-cross"):
-            with self.subTest(position=forsaken):
+        for hidden_pos in (".sea-pos-crown", ".sea-pos-lay", ".sea-pos-cross"):
+            with self.subTest(position=hidden_pos):
+                elements = picker.find_elements(By.CSS_SELECTOR, hidden_pos)
                 self.assertEqual(
-                    len(picker.find_elements(By.CSS_SELECTOR, forsaken)),
-                    0,
-                    f"forsaken position {forsaken} should not render in my-sea picker",
+                    len(elements), 1,
+                    f"{hidden_pos} should render in DOM (gets shown on 6-card spread switch)",
                 )
+                self.assertFalse(
+                    elements[0].is_displayed(),
+                    f"{hidden_pos} should be hidden in default 3-card spread",
+                )
+
+
+class MySeaSpreadFormTest(FunctionalTest):
+    """Sprint 5 iter 3 — form col on the picker phase: SPREAD dropdown
+    (custom combobox w. 6 options + 2 horizontal section dividers for
+    "3-card spreads" / "6-card spreads"), reversal-rate caption, two
+    DECKS swatches (GRAVITY + LEVITY), LOCK HAND + DEL btns. Selecting
+    a 6-card spread (Celtic Cross variants) swaps `.my-sea-cross[data-
+    spread-shape]` from `three-card` to `six-card`, revealing the
+    crown / lay / cross positions hidden by default.
+
+    Card-draw mechanics — clicking a deck swatch to deposit a card into
+    the next empty slot — defers to iter 4."""
+
+    def setUp(self):
+        super().setUp()
+        _seed_earthman_sig_pile()
+        _seed_gameboard_applets()
+        self.email = "spread@test.io"
+        self.gamer = User.objects.create(email=self.email)
+        self.target_card = _assign_sig(self.gamer)
+
+    def _enter_picker_phase(self):
+        self.create_pre_authenticated_session(self.email)
+        self.browser.get(self.live_server_url + "/gameboard/my-sea/")
+        btn = self.wait_for(
+            lambda: self.browser.find_element(By.CSS_SELECTOR, "#id_draw_sea_btn")
+        )
+        btn.click()
+        return self.wait_for(
+            lambda: self.browser.find_element(
+                By.CSS_SELECTOR, ".my-sea-page[data-phase='picker']"
+            )
+        )
+
+    # ── Test 1 ───────────────────────────────────────────────────────────────
+
+    def test_spread_dropdown_renders_six_options_and_two_dividers(self):
+        """SPREAD combobox has 4 three-card options + 2 six-card
+        options + 2 horizontal section dividers labelled "3-card
+        spreads" / "6-card spreads". Dividers are `role=presentation`
+        + `.sea-select-divider` so combobox.js skips them.
+
+        The dropdown is closed (`aria-expanded='false'`) on initial
+        render so the <li>s aren't displayed; use textContent rather
+        than `.text` (which returns "" for hidden elements)."""
+        picker = self._enter_picker_phase()
+        options = picker.find_elements(
+            By.CSS_SELECTOR, ".sea-select-list [role='option']"
+        )
+        self.assertEqual(len(options), 6)
+        option_labels = [
+            o.get_attribute("textContent").strip() for o in options
+        ]
+        # Three-card variants — labels per [[project-my-sea-roadmap]]
+        # iter 3 spec lock.
+        self.assertIn("Past, Present, Future", option_labels)
+        self.assertIn("Situation, Action, Outcome", option_labels)
+        self.assertIn("Mind, Body, Spirit", option_labels)
+        self.assertIn("Desire, Obstacle, Solution", option_labels)
+        # Six-card variants
+        self.assertIn("Celtic Cross, Waite-Smith", option_labels)
+        self.assertIn("Celtic Cross, Escape Velocity", option_labels)
+        # Two horizontal dividers
+        dividers = picker.find_elements(By.CSS_SELECTOR, ".sea-select-divider")
+        self.assertEqual(len(dividers), 2)
+        divider_text = "|".join(
+            d.get_attribute("textContent").upper().strip() for d in dividers
+        )
+        self.assertIn("3-CARD SPREADS", divider_text)
+        self.assertIn("6-CARD SPREADS", divider_text)
+
+    # ── Test 2 ───────────────────────────────────────────────────────────────
+
+    def test_default_spread_is_situation_action_outcome(self):
+        """Per the spec, `Situation, Action, Outcome` is the default
+        spread on landing — selected in the combobox + reflected in
+        the hidden `<input id="id_sea_spread">` initial value. The
+        combobox's `.sea-select-current` `<span>` carries the visible
+        label (rendered even when the dropdown is closed)."""
+        picker = self._enter_picker_phase()
+        hidden = picker.find_element(By.CSS_SELECTOR, "#id_sea_spread")
+        self.assertEqual(
+            hidden.get_attribute("value"), "situation-action-outcome",
+        )
+        # Selected <li> is inside the closed dropdown — its `.text` is
+        # "" per Selenium's hidden-text convention; use textContent.
+        selected = picker.find_element(
+            By.CSS_SELECTOR, ".sea-select-list [role='option'][aria-selected='true']"
+        )
+        self.assertEqual(
+            selected.get_attribute("textContent").strip(),
+            "Situation, Action, Outcome",
+        )
+        # The visible current-label span is always rendered.
+        current = picker.find_element(By.CSS_SELECTOR, ".sea-select-current")
+        self.assertEqual(current.text.strip(), "Situation, Action, Outcome")
+        # And the cross is in three-card shape mode by default.
+        cross = picker.find_element(By.CSS_SELECTOR, ".my-sea-cross")
+        self.assertEqual(cross.get_attribute("data-spread-shape"), "three-card")
+
+    # ── Test 3 ───────────────────────────────────────────────────────────────
+
+    def test_picking_celtic_cross_reveals_six_card_positions(self):
+        """Clicking a 6-card spread option swaps `data-spread-shape`
+        to `six-card` on `.my-sea-cross` — crown / lay / cross become
+        visible. Three-card variants flip back to `three-card`."""
+        picker = self._enter_picker_phase()
+        cross = picker.find_element(By.CSS_SELECTOR, ".my-sea-cross")
+        # Open the combobox + click Celtic Cross Waite-Smith
+        combo = picker.find_element(By.CSS_SELECTOR, "[data-combobox]")
+        combo.click()
+        waite_smith = picker.find_element(
+            By.CSS_SELECTOR,
+            ".sea-select-list [role='option'][data-value='waite-smith']",
+        )
+        waite_smith.click()
+        self.wait_for(
+            lambda: self.assertEqual(
+                cross.get_attribute("data-spread-shape"), "six-card"
+            )
+        )
+        for pos in (".sea-pos-crown", ".sea-pos-lay", ".sea-pos-cross"):
+            with self.subTest(position=pos):
+                self.assertTrue(
+                    picker.find_element(By.CSS_SELECTOR, pos).is_displayed(),
+                    f"{pos} should be visible when 6-card spread selected",
+                )
+        # Switch back to a three-card spread → hidden again.
+        combo.click()
+        mbs = picker.find_element(
+            By.CSS_SELECTOR,
+            ".sea-select-list [role='option'][data-value='mind-body-spirit']",
+        )
+        mbs.click()
+        self.wait_for(
+            lambda: self.assertEqual(
+                cross.get_attribute("data-spread-shape"), "three-card"
+            )
+        )
+
+    # ── Test 4 ───────────────────────────────────────────────────────────────
+
+    def test_form_col_renders_decks_lock_hand_del_and_reversal_pct(self):
+        """Form col carries the DECKS swatches (GRAVITY + LEVITY), the
+        LOCK HAND `.btn-primary`, the DEL `.btn-danger`, and the
+        reversal-percentage caption (default 25%)."""
+        picker = self._enter_picker_phase()
+        # DECKS — two stacks
+        stacks = picker.find_elements(By.CSS_SELECTOR, ".sea-deck-stack")
+        self.assertEqual(len(stacks), 2)
+        names = "|".join(
+            s.find_element(By.CSS_SELECTOR, ".sea-stack-name").text.upper()
+            for s in stacks
+        )
+        self.assertIn("GRAVITY", names)
+        self.assertIn("LEVITY", names)
+        # LOCK HAND + DEL
+        lock = picker.find_element(By.CSS_SELECTOR, "#id_sea_lock_hand")
+        self.assertIn("LOCK", lock.text.upper())
+        self.assertIn("HAND", lock.text.upper())
+        self.assertIn("btn-primary", lock.get_attribute("class"))
+        delbtn = picker.find_element(By.CSS_SELECTOR, "#id_sea_del")
+        self.assertIn("DEL", delbtn.text.upper())
+        self.assertIn("btn-danger", delbtn.get_attribute("class"))
+        # Reversal % caption — default 25
+        hint = picker.find_element(By.CSS_SELECTOR, ".sea-reversal-hint")
+        self.assertIn("25", hint.text)
+        self.assertIn("reversal", hint.text.lower())

src/static_src/scss/_gameboard.scss

@@ -282,13 +282,53 @@ body.page-gameboard {
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 1rem;
 }
 
-// Three-cell horizontal row (leave | core | loom) — strips the crown
-// + lay rows from `.sea-cross`'s 3×3 grid template, leaving only the
-// middle row. Cover stays nested inside `.sea-pos-core` (absolutely
-// positioned overlay handled by _card-deck.scss line 1310-1331).
-.my-sea-cross {
-    grid-template-areas: "leave core loom";
+// .my-sea-cross renders all 6 surrounding positions (crown/lay/cross
+// PLUS leave/loom/cover) so the SPREAD dropdown can toggle 3-card vs
+// 6-card layout via a single data-attribute swap (no DOM mutation).
+// Default `three-card` hides the 3 forsaken positions via `display:
+// none`; `six-card` (Celtic Cross variants) renders all 7 cells.
+// Cover always shows (it's part of both shapes — overlaid on sig).
+.my-sea-cross[data-spread-shape="three-card"] {
+    grid-template-areas:
+        "leave core loom";
     grid-template-rows: auto;
+
+    .sea-pos-crown,
+    .sea-pos-lay,
+    .sea-pos-cross { display: none; }
+}
+
+.my-sea-cross[data-spread-shape="six-card"] {
+    // Inherits `.sea-cross`'s 3×3 template from _card-deck.scss line 1189-
+    // 1200; nothing to override layout-wise. All cells visible.
+}
+
+// Section dividers inside the SPREAD combobox — labels "3-card spreads"
+// / "6-card spreads" separating the option groups. Styled to echo the
+// `.kit-bag-label` treatment (small uppercase underlined letter-spaced
+// --quaUser) but horizontal rather than vertical (kit-bag uses writing-
+// mode: vertical-rl; this is a flat dropdown).
+.sea-select-list .sea-select-divider {
+    font-size: 0.55rem;
+    text-transform: uppercase;
+    text-decoration: underline;
+    letter-spacing: 0.12em;
+    color: rgba(var(--quaUser), 0.75);
+    padding: 0.4rem 0.6rem 0.2rem;
+    pointer-events: none;     // not selectable; combobox.js skips it
+                              // (no role=option), but belt-and-braces
+                              // against accidental hover/click styles.
+    list-style: none;
+}
+
+// Form col on my-sea — same DRY treatment as the gameroom sea-overlay
+// `.sea-form-col` (handled in _card-deck.scss) but sits next to the
+// picker's cross on a `--duoUser` page. Just constrain the width so it
+// doesn't fight the cross for horizontal space.
+.my-sea-form-col {
+    flex: 0 0 16rem;
+    max-width: 16rem;
 }

src/templates/apps/gameboard/my_sea.html

@@ -66,16 +66,19 @@
                 </div>
             </div>
 
-            {# Picker phase — three-card cross w. sig pinned in core +    #}
-            {# cover (overlaid on sig) + leave (left) + loom (right).     #}
-            {# Crown / lay / cross from the gameroom's 6-position spread  #}
-            {# are forsaken in the solo flow per user-locked spec. Hidden #}
-            {# until FREE DRAW click swaps data-phase to `picker` (see   #}
-            {# inline JS below); form col (spread dropdown / decks /     #}
-            {# LOCK HAND / DEL) lands in iter 3.                          #}
+            {# Picker phase — flexible spread layout. Sig pins .sea-pos- #}
+            {# core; the 6 surrounding positions (crown/leave/loom/lay/  #}
+            {# cover/cross) all render unconditionally so the SPREAD     #}
+            {# dropdown can swap `.my-sea-cross[data-spread-shape]`     #}
+            {# between `three-card` (default — hides crown/lay/cross via #}
+            {# SCSS) + `six-card` (Celtic Cross variants — shows all).   #}
+            {# Hidden until FREE DRAW click swaps data-phase to `picker`. #}
             <div class="my-sea-picker" style="display:none">
                 <div class="sea-cards-col">
-                    <div class="sea-cross my-sea-cross">
+                    <div class="sea-cross my-sea-cross" data-spread-shape="three-card">
+                        <div class="sea-crucifix-cell sea-pos-crown">
+                            <div class="sea-card-slot sea-card-slot--empty"></div>
+                        </div>
                         <div class="sea-crucifix-cell sea-pos-leave">
                             <div class="sea-card-slot sea-card-slot--empty"></div>
                         </div>
@@ -88,14 +91,102 @@
                             <div class="sea-pos-cover">
                                 <div class="sea-card-slot sea-card-slot--empty"></div>
                             </div>
+                            <div class="sea-pos-cross">
+                                <div class="sea-card-slot sea-card-slot--empty sea-card-slot--crossing"></div>
+                            </div>
                         </div>
                         <div class="sea-crucifix-cell sea-pos-loom">
                             <div class="sea-card-slot sea-card-slot--empty"></div>
                         </div>
+                        <div class="sea-crucifix-cell sea-pos-lay">
+                            <div class="sea-card-slot sea-card-slot--empty"></div>
                         </div>
                     </div>
                 </div>
 
+                {# Form col — SPREAD combobox + DECKS swatches + LOCK    #}
+                {# HAND / DEL. DRY w. gameroom `_sea_overlay.html`'s     #}
+                {# `.sea-form-col` shape; my-sea-specific differences:   #}
+                {# (a) 6 spread options under 2 section dividers,        #}
+                {# (b) default = situation-action-outcome (3-card),     #}
+                {# (c) no `.sea-modal-header` (the gateway IS the page). #}
+                <div class="sea-form-col my-sea-form-col">
+                    <div class="sea-form-main">
+                        <div class="sea-field">
+                            <label for="id_sea_spread" id="id_sea_spread_label">Spread</label>
+                            <p class="sea-reversal-hint">{{ reversals_pct|default:25 }}% reversals</p>
+                            <input type="hidden" id="id_sea_spread" name="spread"
+                                   value="{{ 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">Situation, Action, Outcome</span>
+                                <span class="sea-select-arrow" aria-hidden="true">▾</span>
+                                <ul class="sea-select-list" role="listbox">
+                                    <li role="presentation" class="sea-select-divider">3-card spreads</li>
+                                    <li role="option" data-value="past-present-future"      aria-selected="false">Past, Present, Future</li>
+                                    <li role="option" data-value="situation-action-outcome" aria-selected="true">Situation, Action, Outcome</li>
+                                    <li role="option" data-value="mind-body-spirit"         aria-selected="false">Mind, Body, Spirit</li>
+                                    <li role="option" data-value="desire-obstacle-solution" aria-selected="false">Desire, Obstacle, Solution</li>
+                                    <li role="presentation" class="sea-select-divider">6-card spreads</li>
+                                    <li role="option" data-value="waite-smith"     aria-selected="false">Celtic Cross, Waite-Smith</li>
+                                    <li role="option" data-value="escape-velocity" aria-selected="false">Celtic Cross, Escape Velocity</li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <div class="sea-stacks">
+                            <span class="sea-stacks-label">DECKS</span>
+                            <div class="sea-deck-stack sea-deck-stack--gravity">
+                                <div class="sea-stack-face">
+                                    <button class="btn btn-reveal sea-stack-ok" type="button">FLIP</button>
+                                </div>
+                                <span class="sea-stack-name">Gravity</span>
+                            </div>
+                            <div class="sea-deck-stack sea-deck-stack--levity">
+                                <div class="sea-stack-face">
+                                    <button class="btn btn-reveal sea-stack-ok" type="button">FLIP</button>
+                                </div>
+                                <span class="sea-stack-name">Levity</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="sea-form-actions">
+                        <button type="button" id="id_sea_lock_hand" class="btn btn-primary" disabled>
+                            LOCK HAND
+                        </button>
+                        <button type="button" id="id_sea_del" class="btn btn-danger">
+                            DEL
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <script src="{% static 'apps/epic/combobox.js' %}"></script>
+            <script>
+            (function () {
+                // Spread → cross-shape mapping. Celtic Cross variants
+                // (Waite-Smith / Escape Velocity) get the 6-card shape;
+                // every other spread is 3-card (cover/leave/loom only).
+                var SIX_CARD_SPREADS = ['waite-smith', 'escape-velocity'];
+                var hidden = document.getElementById('id_sea_spread');
+                var cross  = document.querySelector('.my-sea-cross');
+                if (!hidden || !cross) return;
+                function sync() {
+                    var shape = SIX_CARD_SPREADS.indexOf(hidden.value) >= 0
+                        ? 'six-card' : 'three-card';
+                    cross.setAttribute('data-spread-shape', shape);
+                }
+                hidden.addEventListener('change', sync);
+                sync();
+            }());
+            </script>
+
             <script src="{% static 'apps/epic/room.js' %}"></script>
             <script>
             (function () {