diff --git a/src/functional_tests/test_bill_my_sign.py b/src/functional_tests/test_bill_my_sign.py
index c91ed33..d7bdb64 100644
--- a/src/functional_tests/test_bill_my_sign.py
+++ b/src/functional_tests/test_bill_my_sign.py
@@ -62,14 +62,12 @@ class MySignPickerTest(FunctionalTest):
 
     # ── Test 1 ───────────────────────────────────────────────────────────────
 
-    def test_picker_renders_card_grid_from_equipped_deck(self):
-        """GET /billboard/my-sign/ → page renders w. a card grid + the page
-        wordmark reads "Game Sign", populated by the user's equipped_deck."""
+    def test_landing_renders_dry_hex_with_scan_sign_button(self):
+        """GET /billboard/my-sign/ → the DRY table hex (1-chair) renders w.
+        a central .btn-primary reading "SCAN SIGN"; the card grid is hidden
+        until SCAN SIGN is clicked."""
         self.create_pre_authenticated_session(self.email)
         self.browser.get(self.live_server_url + "/billboard/my-sign/")
-        # Wordmark. The h2 letter-splitter (base.html) wraps each character
-        # in its own <span>, so Selenium's `.text` joins them w. newlines —
-        # strip whitespace before the substring check.
         self.wait_for(
             lambda: self.assertIn(
                 "GAMESIGN",
@@ -78,26 +76,70 @@ class MySignPickerTest(FunctionalTest):
                 ),
             )
         )
-        # Target card present in the grid. The data-card-id selector itself
-        # is the assertion — find_element raises if absent. Avoid asserting
-        # against `.fan-corner-rank .text` (CSS hides it via font-size or
-        # similar, so Selenium returns "").
+        # Landing phase markers: hex + 1 chair + SCAN SIGN btn
         self.wait_for(
             lambda: self.browser.find_element(
-                By.CSS_SELECTOR,
-                f'.my-sign-deck-grid .sig-card[data-card-id="{self.target_card.id}"]',
+                By.CSS_SELECTOR, ".my-sign-page .table-hex"
             )
         )
+        chairs = self.browser.find_elements(
+            By.CSS_SELECTOR, ".my-sign-page .table-seat"
+        )
+        self.assertEqual(len(chairs), 1, "Landing hex should render exactly 1 chair")
+        scan_btn = self.browser.find_element(By.ID, "id_scan_sign_btn")
+        self.assertIn("SCAN", scan_btn.text.upper())
+        self.assertIn("SIGN", scan_btn.text.upper())
+        # Picker grid not yet visible — landing phase only
+        grid = self.browser.find_element(By.CSS_SELECTOR, ".my-sign-deck-grid")
+        self.assertFalse(
+            grid.is_displayed(),
+            "Picker grid should be hidden on landing phase",
+        )
 
     # ── Test 2 ───────────────────────────────────────────────────────────────
 
-    def test_pick_card_then_save_persists_choice_and_shows_in_applet(self):
-        """Click card → SAVE SIGN btn enables → click → DB updated → applet
-        on /billboard/ shows the chosen card."""
+    def test_scan_sign_click_transitions_to_picker_phase(self):
+        """Click SCAN SIGN → landing hex hides; picker grid + populated stage
+        frame appear. Target card present in the grid."""
         self.create_pre_authenticated_session(self.email)
         self.browser.get(self.live_server_url + "/billboard/my-sign/")
+        scan_btn = self.wait_for(
+            lambda: self.browser.find_element(By.ID, "id_scan_sign_btn")
+        )
+        self.browser.execute_script("arguments[0].click()", scan_btn)
+        # Phase swap — picker now visible, hex now hidden
+        self.wait_for(
+            lambda: self.assertTrue(
+                self.browser.find_element(
+                    By.CSS_SELECTOR, ".my-sign-deck-grid"
+                ).is_displayed(),
+                "Picker grid should be visible after SCAN SIGN click",
+            )
+        )
+        # Hex collapses (display:none) after transition
+        self.assertFalse(
+            self.browser.find_element(
+                By.CSS_SELECTOR, ".my-sign-page .table-hex"
+            ).is_displayed(),
+            "Landing hex should hide once picker phase is active",
+        )
+        # Target card present in the grid
+        self.browser.find_element(
+            By.CSS_SELECTOR,
+            f'.my-sign-deck-grid .sig-card[data-card-id="{self.target_card.id}"]',
+        )
 
-        # Click target card
+    # ── Test 3 ───────────────────────────────────────────────────────────────
+
+    def test_click_thumbnail_shows_OK_btn_without_locking(self):
+        """In picker phase: click a thumbnail → .sig-focused class + OK btn
+        visible on it; stat block + FLIP still hidden (no lock yet); SAVE
+        SIGN still disabled."""
+        self.create_pre_authenticated_session(self.email)
+        self.browser.get(self.live_server_url + "/billboard/my-sign/")
+        self.browser.execute_script(
+            "document.getElementById('id_scan_sign_btn').click()"
+        )
         card_el = self.wait_for(
             lambda: self.browser.find_element(
                 By.CSS_SELECTOR,
@@ -105,34 +147,79 @@ class MySignPickerTest(FunctionalTest):
             )
         )
         self.browser.execute_script("arguments[0].click()", card_el)
-
-        # SAVE SIGN should be enabled now
-        save_btn = self.wait_for(
-            lambda: self.browser.find_element(By.ID, "id_save_sign_btn")
-        )
+        # .sig-focused class → OK btn visible
         self.wait_for(
-            lambda: self.assertFalse(
-                save_btn.get_attribute("disabled"),
-                "SAVE SIGN should be enabled after card click",
+            lambda: self.assertIn(
+                "sig-focused",
+                self.browser.find_element(
+                    By.CSS_SELECTOR,
+                    f'.sig-card[data-card-id="{self.target_card.id}"]',
+                ).get_attribute("class"),
             )
         )
-
-        # Hidden card_id input should match the clicked card
-        self.assertEqual(
-            str(self.target_card.id),
-            self.browser.find_element(By.ID, "id_save_sign_card_id").get_attribute("value"),
+        ok_btn = self.browser.find_element(
+            By.CSS_SELECTOR,
+            f'.sig-card[data-card-id="{self.target_card.id}"] .sig-ok-btn',
         )
+        self.assertTrue(ok_btn.is_displayed(), "OK btn should be visible on focused thumb")
+        # Stat block still hidden (no lock yet)
+        stage = self.browser.find_element(By.CSS_SELECTOR, ".my-sign-stage")
+        self.assertNotIn("sig-stage--frozen", stage.get_attribute("class"))
+        # SAVE SIGN still disabled
+        save_btn = self.browser.find_element(By.ID, "id_save_sign_btn")
+        self.assertTrue(save_btn.get_attribute("disabled"))
 
-        # Save → DB updated
+    # ── Test 4 ───────────────────────────────────────────────────────────────
+
+    def test_OK_click_locks_thumbnail_and_enables_save_sign(self):
+        """In picker phase: click thumbnail → click its OK btn → stage locks
+        (.sig-stage--frozen), NVM btn visible on the thumbnail, SAVE SIGN
+        enables. Then save persists + applet shows the card."""
+        self.create_pre_authenticated_session(self.email)
+        self.browser.get(self.live_server_url + "/billboard/my-sign/")
+        self.browser.execute_script(
+            "document.getElementById('id_scan_sign_btn').click()"
+        )
+        card_el = self.wait_for(
+            lambda: self.browser.find_element(
+                By.CSS_SELECTOR,
+                f'.my-sign-deck-grid .sig-card[data-card-id="{self.target_card.id}"]',
+            )
+        )
+        self.browser.execute_script("arguments[0].click()", card_el)
+        ok_btn = self.wait_for(
+            lambda: self.browser.find_element(
+                By.CSS_SELECTOR,
+                f'.sig-card[data-card-id="{self.target_card.id}"] .sig-ok-btn',
+            )
+        )
+        self.browser.execute_script("arguments[0].click()", ok_btn)
+        # Lock applied
+        self.wait_for(
+            lambda: self.assertIn(
+                "sig-stage--frozen",
+                self.browser.find_element(
+                    By.CSS_SELECTOR, ".my-sign-stage"
+                ).get_attribute("class"),
+            )
+        )
+        # NVM btn on the same thumbnail now visible
+        nvm_btn = self.browser.find_element(
+            By.CSS_SELECTOR,
+            f'.sig-card[data-card-id="{self.target_card.id}"] .sig-nvm-btn',
+        )
+        self.assertTrue(nvm_btn.is_displayed(), "NVM btn should be visible after OK confirm")
+        # SAVE SIGN enabled
+        save_btn = self.browser.find_element(By.ID, "id_save_sign_btn")
+        self.assertFalse(save_btn.get_attribute("disabled"))
+        # Save persists
         self.browser.execute_script("arguments[0].click()", save_btn)
         self.wait_for(
             lambda: self.gamer.refresh_from_db() or self.assertEqual(
                 self.gamer.significator_id, self.target_card.id,
             )
         )
-
-        # Navigate to /billboard/ → applet shows the saved card. Pin by
-        # data-card-id (same reasoning as test 1 re: CSS-hidden corner rank).
+        # Applet on /billboard/ shows the saved card
         self.browser.get(self.live_server_url + "/billboard/")
         self.wait_for(
             lambda: self.browser.find_element(
@@ -141,6 +228,87 @@ class MySignPickerTest(FunctionalTest):
             )
         )
 
+    # ── Test 5 ───────────────────────────────────────────────────────────────
+
+    def test_NVM_click_deselects_and_disables_save_sign(self):
+        """After OK-lock, click NVM on the thumbnail → lock clears (no
+        .sig-stage--frozen), .sig-focused removed, SAVE SIGN disables."""
+        self.create_pre_authenticated_session(self.email)
+        self.browser.get(self.live_server_url + "/billboard/my-sign/")
+        self.browser.execute_script(
+            "document.getElementById('id_scan_sign_btn').click()"
+        )
+        card_el = self.wait_for(
+            lambda: self.browser.find_element(
+                By.CSS_SELECTOR,
+                f'.my-sign-deck-grid .sig-card[data-card-id="{self.target_card.id}"]',
+            )
+        )
+        self.browser.execute_script("arguments[0].click()", card_el)
+        ok_btn = self.wait_for(
+            lambda: self.browser.find_element(
+                By.CSS_SELECTOR,
+                f'.sig-card[data-card-id="{self.target_card.id}"] .sig-ok-btn',
+            )
+        )
+        self.browser.execute_script("arguments[0].click()", ok_btn)
+        # Now NVM
+        nvm_btn = self.wait_for(
+            lambda: self.browser.find_element(
+                By.CSS_SELECTOR,
+                f'.sig-card[data-card-id="{self.target_card.id}"] .sig-nvm-btn',
+            )
+        )
+        self.browser.execute_script("arguments[0].click()", nvm_btn)
+        # Lock cleared
+        self.wait_for(
+            lambda: self.assertNotIn(
+                "sig-stage--frozen",
+                self.browser.find_element(
+                    By.CSS_SELECTOR, ".my-sign-stage"
+                ).get_attribute("class"),
+            )
+        )
+        # SAVE SIGN disables again
+        save_btn = self.browser.find_element(By.ID, "id_save_sign_btn")
+        self.assertTrue(save_btn.get_attribute("disabled"))
+        # .sig-focused removed from thumb
+        self.assertNotIn(
+            "sig-focused",
+            self.browser.find_element(
+                By.CSS_SELECTOR,
+                f'.sig-card[data-card-id="{self.target_card.id}"]',
+            ).get_attribute("class"),
+        )
+
+    # ── Test 6 ───────────────────────────────────────────────────────────────
+
+    def test_landing_previews_saved_sig_on_stage(self):
+        """If user already has a saved significator, the landing-phase stage
+        frame should preview the saved card (above/behind the hex)."""
+        # Pre-save a sig in the DB
+        self.gamer.significator = self.target_card
+        self.gamer.save(update_fields=["significator"])
+        self.create_pre_authenticated_session(self.email)
+        self.browser.get(self.live_server_url + "/billboard/my-sign/")
+        # Landing phase still shows hex w. SCAN SIGN
+        self.wait_for(
+            lambda: self.browser.find_element(By.ID, "id_scan_sign_btn")
+        )
+        # Stage card is visible w. the saved card populated (corner-rank +
+        # name pinned by data-card-id on the stage card wrapper)
+        stage_card = self.browser.find_element(
+            By.CSS_SELECTOR, ".my-sign-stage .sig-stage-card"
+        )
+        self.assertTrue(
+            stage_card.is_displayed(),
+            "Stage card should preview the saved sig on landing",
+        )
+        self.assertEqual(
+            stage_card.get_attribute("data-card-id"),
+            str(self.target_card.id),
+        )
+
     # ── Test 3 ───────────────────────────────────────────────────────────────
 
     def test_applet_renders_blank_state_when_no_sig_chosen(self):
diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss
index 6c2a1f3..e9ab5f4 100644
--- a/src/static_src/scss/_card-deck.scss
+++ b/src/static_src/scss/_card-deck.scss
@@ -616,13 +616,81 @@ html:has(.sig-backdrop) {
 }
 
 // ─── My Sign picker — sizing + state-gated reveal ────────────────────────────
-// Bigger preview card than the room (no shared overlay width budget) — clamp
-// scales w. viewport for portrait/landscape both. FLIP btn + stat block hidden
-// at rest; revealed by `.sig-stage--frozen` (added by JS on click, cleared by
-// NVM). SPIN (orientation 180°) stays in `.sig-stat-block`; FLIP toggles
-// polarity (data-polarity attr on .my-sign-page).
+// Two-phase layout: landing (DRY 1-chair hex w. SCAN SIGN center) → picker
+// (sig-card grid below an always-present stage frame). SAVE SIGN rides
+// inside .my-sign-stage to its right, sig-select-style. FLIP btn + stat
+// block hidden at rest; revealed by `.sig-stage--frozen` (added by JS on
+// OK confirm, cleared by NVM). SPIN (orientation 180°) stays in
+// `.sig-stat-block`; FLIP toggles polarity (data-polarity on .my-sign-page).
+// .my-sign-page mirrors .room-page's flex-column-fill-aperture pattern so
+// the DRY hex inside .my-sign-landing gets a non-zero #id_game_table size
+// for room.js's scaleTable() to compute against. Without flex:1 + min-height:0
+// the container chain collapses + the hex renders unscaled (200×231 inside
+// a 360×320 scene, looking elongated/portrait).
 .my-sign-page {
     --sig-card-w: clamp(140px, 36vw, 220px);
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+// Stage frame — fixed slice in picker phase, natural-sized on landing.
+// The picker min-height reserves real estate so hover-preview cards don't
+// shift adjacent layout; on landing the stage shrinks to its actual content
+// (empty or saved-sig preview) so the DRY hex below gets fair vertical
+// space. SAVE SIGN form is absolutely positioned (see below) so it stays
+// pinned when the stat block reveals on OK confirm.
+.my-sign-stage {
+    flex: 0 0 auto;
+    position: relative;
+}
+
+.my-sign-page[data-phase="picker"] .my-sign-stage {
+    min-height: calc(var(--sig-card-w, 140px) * 8 / 5 + 1.5rem);
+}
+
+// SAVE SIGN form — pinned to the bottom-right of the stage so it stays in
+// place across hover/lock states (the stat block reveal would otherwise
+// shove a flex-positioned btn around the stage row).
+#id_save_sign_form {
+    position: absolute;
+    bottom: 0.75rem;
+    right: 1rem;
+    margin: 0;
+    z-index: 6;
+}
+
+// Landing phase — DRY hex container. flex:1 + min-height:0 propagates the
+// available vertical space into .room-shell → #id_game_table → scaleTable().
+.my-sign-landing {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+
+    // SCAN SIGN btn — centered in the hex. Default .btn-primary text
+    // (0.875rem) scales tighter than the room's PICK SIGS btn font; this
+    // bumps it down a notch so the 2-line "SCAN/SIGN" label sits cleanly
+    // inside the 4rem circle without crowding the border.
+    #id_scan_sign_btn {
+        font-size: 0.75rem;
+        line-height: 1.1;
+        white-space: normal;
+    }
+}
+
+// Hide SAVE SIGN on landing — the form only makes sense once the user
+// has entered the picker. Saved-sig preview on landing is read-only.
+.my-sign-page[data-phase="landing"] #id_save_sign_form {
+    display: none;
+}
+
+// Picker phase — bg matches the table hex's interior (--duoUser) so the
+// transition from "hex face" → "card pile on felt" reads as a continuous
+// surface rather than a context swap. Landing phase keeps the body bg.
+.my-sign-page[data-phase="picker"] {
+    background: rgba(var(--duoUser), 1);
 }
 
 .my-sign-flip-btn {
@@ -637,7 +705,7 @@ html:has(.sig-backdrop) {
     display: none;
 }
 
-// FLIP btn appears only when the stage is frozen (post-click). Hover-only
+// FLIP btn appears only when the stage is frozen (post-OK confirm). Hover-only
 // previews don't reveal the polarity toggle — the user hasn't committed yet.
 .my-sign-stage.sig-stage--frozen .my-sign-flip-btn {
     display: inline-flex;
@@ -938,10 +1006,13 @@ html:has(.sig-backdrop) {
         margin-left: 4rem;
         margin-right: 3rem;
     }
-    .sig-stage {
+    .sig-overlay .sig-stage {
         min-width: 0; // allow shrinking in row layout; align-items:flex-end already set
     }
-    .sig-deck-grid {
+    // Scoped to .sig-overlay — the room sig-select modal has its own width
+    // budget. .my-sign-page gets its own breakpoints below (different col
+    // counts + thresholds tuned for the full content area).
+    .sig-overlay .sig-deck-grid {
         grid-template-columns: repeat(6, 2.5rem);
         margin: 0;
         align-self: flex-end; // sit at the bottom of the modal row
@@ -954,12 +1025,12 @@ html:has(.sig-backdrop) {
         flex-direction: column;
         align-items: stretch;
     }
-    .sig-stage {
+    .sig-overlay .sig-stage {
         min-width: auto;
         align-self: stretch;  // fill full modal width so JS sizeSigCard() gets correct stageWidth
         margin-left: 3rem;
     }
-    .sig-deck-grid {
+    .sig-overlay .sig-deck-grid {
         grid-template-columns: repeat(9, 3rem);
         align-self: center;
     }
@@ -968,7 +1039,7 @@ html:has(.sig-backdrop) {
 @media (orientation: landscape) and (min-width: 1400px) {
     // Wide landscape: 18-card single-row grid. 18×3rem + ~7rem modal margins
     // clears the viewport here even at the fluid-rem ceiling (rem=22 → ~1376px).
-    .sig-deck-grid {
+    .sig-overlay .sig-deck-grid {
         grid-template-columns: repeat(18, 3rem);
     }
 }
@@ -976,11 +1047,11 @@ html:has(.sig-backdrop) {
 @media (orientation: landscape) and (min-width: 1800px) {
     // Sig overlay: clear doubled sidebars (8rem each instead of 4rem/6rem)
     .sig-overlay { padding-left: 8rem; padding-right: 8rem; }
-    .sig-stage {
+    .sig-overlay .sig-stage {
         align-self: stretch;  // fill full modal width so JS sizeSigCard() gets correct stageWidth
         margin-left: 3rem;
     }
-    .sig-deck-grid {
+    .sig-overlay .sig-deck-grid {
         grid-template-columns: repeat(18, 5rem);
         align-self: center;
     }
@@ -990,6 +1061,46 @@ html:has(.sig-backdrop) {
     #id_room_menu { right: 2.5rem; }
 }
 
+// ─── My Sign picker grid ────────────────────────────────────────────────────
+// align-self:center horizontally centers the shrink-to-content grid in
+// .my-sign-page's flex column; overflow:visible avoids the modal's hidden
+// clip. Col counts ramp up at wider viewports — sig-select's breakpoints
+// are tuned for the modal's width budget so we use our own thresholds that
+// account for the navbar/footer sidebars (~5rem each) eating viewport width.
+// Portrait: fixed rem cols (default repeat(6, 1fr) collapses to 0 width
+// w. align-self:center because 1fr has no defined parent to fr against).
+.my-sign-deck-grid {
+    align-self: center;
+    margin: 1rem auto;
+    overflow: visible;
+    grid-template-columns: repeat(6, 3rem);
+}
+
+@media (orientation: landscape) and (min-width: 900px) {
+    // Middling landscape: 9-card row × 2 (mirrors sig-select's middling step).
+    .my-sign-deck-grid {
+        grid-template-columns: repeat(9, 3rem);
+    }
+}
+
+@media (orientation: landscape) and (min-width: 1600px) {
+    // Wide landscape: 18-card single row. Bumped from sig-select's 1400px so
+    // 18×3rem + the doubled-sidebar margins (~10rem) still clears the viewport
+    // at the fluid-rem ceiling (rem=22 → 18×3rem=1188px + 220px margins = 1408,
+    // safe with 1600px floor).
+    .my-sign-deck-grid {
+        grid-template-columns: repeat(18, 3rem);
+    }
+}
+
+@media (orientation: landscape) and (min-width: 2200px) {
+    // XL landscape: 18×5rem. Bumped from sig-select's 1800px — 18×5rem=1980px
+    // at rem=22 needs ~2200px viewport after sidebar/footer clearance.
+    .my-sign-deck-grid {
+        grid-template-columns: repeat(18, 5rem);
+    }
+}
+
 // ── DRAW SEA overlay ─────────────────────────────────────────────────────────
 // Mirrors .sky-* structure but with columns reversed:
 //   left = transparent (Celtic Cross card positions)
diff --git a/src/templates/apps/billboard/my_sign.html b/src/templates/apps/billboard/my_sign.html
index f866e05..a85b83b 100644
--- a/src/templates/apps/billboard/my_sign.html
+++ b/src/templates/apps/billboard/my_sign.html
@@ -5,236 +5,291 @@
 {% block header_text %}<span>Game</span><span>Sign</span>{% endblock header_text %}
 
 {% block content %}
-{# Solo lift of `_sig_select_overlay.html`. Same card-grid + stage-card     #}
-{# choreography as the room sig-select, minus countdown / WebSocket /      #}
-{# polarity / multi-user. FLIP btn (.spin-btn) lets the user choose the    #}
-{# card's orientation; SAVE SIG persists it on the User model.             #}
-{# "Significator" is preserved at the storage layer (User.significator) +  #}
-{# game-room context; this billboard surface re-brands to "Sign".          #}
+{# Two-phase picker. Landing renders the DRY table hex (1-chair) w. a    #}
+{# central SCAN SIGN btn; the stage frame above previews the user's      #}
+{# saved sig if any. Clicking SCAN SIGN swaps to picker phase: the hex   #}
+{# hides, the card grid appears below the stage. Selection is a two-step #}
+{# click on the thumbnail itself (matching room sig-select): click thumb #}
+{# → OK btn appears; click OK → lock (stat block + FLIP + SAVE SIGN     #}
+{# enable + NVM appears for deselect).                                   #}
+{# "Significator" is preserved at the storage layer (User.significator); #}
+{# this billboard surface re-brands to "Sign".                           #}
 <div class="my-sign-page"
+     data-phase="landing"
      data-save-url="{% url 'billboard:save_sign' %}"
      {% if current_significator %}data-current-card-id="{{ current_significator.id }}"{% endif %}
      data-current-reversed="{{ current_significator_reversed|yesno:'true,false' }}"
      data-polarity="{% if current_significator_reversed %}levity{% else %}gravity{% endif %}">
 
-        {# Stage frame always visible; stage card + stat block + FLIP btn   #}
-        {# gated by hover (preview) + click (lock). `.sig-stage--frozen` is #}
-        {# added on click + cleared by NVM. data-polarity moved to the page #}
-        {# wrapper so descendant .sig-card / .sig-stage-card both get the   #}
-        {# polarity-themed CSS rules.                                       #}
-        <div class="sig-stage my-sign-stage">
-            <div class="sig-stage-card" style="display:none">
-                <div class="fan-card-corner fan-card-corner--tl">
-                    <span class="fan-corner-rank"></span>
-                    <i class="fa-solid stage-suit-icon" style="display:none"></i>
+    {# Stage frame — always reserved at the top of the page; SAVE SIGN +  #}
+    {# NVM ride along to its right (sig-select-style). The stage card     #}
+    {# itself starts hidden + appears on hover/preview or saved-sig       #}
+    {# preview; .sig-stage--frozen is added on OK confirm + cleared by    #}
+    {# NVM. data-polarity lives on .my-sign-page so descendant .sig-card  #}
+    {# / .sig-stage-card both pick up polarity-themed CSS rules.          #}
+    <div class="sig-stage my-sign-stage">
+        <div class="sig-stage-card" style="display:none"
+             {% if current_significator %}data-card-id="{{ current_significator.id }}"{% endif %}>
+            <div class="fan-card-corner fan-card-corner--tl">
+                <span class="fan-corner-rank"></span>
+                <i class="fa-solid stage-suit-icon" style="display:none"></i>
+            </div>
+            <div class="fan-card-face">
+                <div class="fan-card-face-upright">
+                    <p class="fan-card-name-group"></p>
+                    <p class="sig-qualifier-above"></p>
+                    <p class="fan-card-name"></p>
+                    <p class="sig-qualifier-below"></p>
                 </div>
-                <div class="fan-card-face">
-                    <div class="fan-card-face-upright">
-                        <p class="fan-card-name-group"></p>
-                        <p class="sig-qualifier-above"></p>
-                        <p class="fan-card-name"></p>
-                        <p class="sig-qualifier-below"></p>
-                    </div>
-                    <p class="fan-card-arcana"></p>
-                    <div class="fan-card-face-reversal">
-                        <p class="fan-card-reversal-name"></p>
-                        <p class="fan-card-reversal-qualifier"></p>
-                    </div>
-                </div>
-                <div class="fan-card-corner fan-card-corner--br">
-                    <span class="fan-corner-rank"></span>
-                    <i class="fa-solid stage-suit-icon" style="display:none"></i>
+                <p class="fan-card-arcana"></p>
+                <div class="fan-card-face-reversal">
+                    <p class="fan-card-reversal-name"></p>
+                    <p class="fan-card-reversal-qualifier"></p>
                 </div>
             </div>
-            {# FLIP — bottom-left of the stage card. Mirrors the game-kit fan #}
-            {# carousel's btn-reveal pattern (game_kit.html#id_fan_flip). Toggles #}
-            {# polarity (data-polarity attr + persisted User.significator_reversed). #}
-            {# SPIN in the stat-block toggles orientation (180° rotation) for #}
-            {# preview only — not persisted.                                  #}
-            <button class="btn btn-reveal my-sign-flip-btn" type="button">FLIP</button>
-            <div class="sig-stat-block">
-                <button class="btn btn-reverse spin-btn" type="button">SPIN</button>
-                <button class="btn btn-info fyi-btn" type="button">FYI</button>
-                <div class="stat-face stat-face--upright">
-                    <p class="stat-face-label">Emanation</p>
-                    <ul class="stat-keywords"></ul>
-                </div>
-                <div class="stat-face stat-face--reversed">
-                    <p class="stat-face-label">Reversal</p>
-                    <ul class="stat-keywords"></ul>
-                </div>
-                {% include "apps/gameboard/_partials/_sig_fyi_panel.html" with panel_id="id_my_sign_fyi_panel" %}
+            <div class="fan-card-corner fan-card-corner--br">
+                <span class="fan-corner-rank"></span>
+                <i class="fa-solid stage-suit-icon" style="display:none"></i>
             </div>
         </div>
-
-        <div class="sig-deck-grid my-sign-deck-grid">
-            {% for card in cards %}
-                <div class="sig-card"
-                     data-card-id="{{ card.id }}"
-                     data-suit-icon="{{ card.suit_icon }}"
-                     data-corner-rank="{{ card.corner_rank }}"
-                     data-name-group="{{ card.name_group }}"
-                     data-name-title="{{ card.name_title }}"
-                     data-arcana="{{ card.get_arcana_display }}"
-                     data-correspondence="{{ card.correspondence|default:'' }}"
-                     data-keywords-upright="{{ card.keywords_upright|join:',' }}"
-                     data-keywords-reversed="{{ card.keywords_reversed|join:',' }}"
-                     data-energies="{{ card.energies_json }}"
-                     data-operations="{{ card.operations_json }}"
-                     data-levity-qualifier="{{ card.levity_qualifier }}"
-                     data-gravity-qualifier="{{ card.gravity_qualifier }}"
-                     data-reversal-qualifier="{{ card.reversal_qualifier }}"
-                     data-levity-emanation="{{ card.levity_emanation }}"
-                     data-gravity-emanation="{{ card.gravity_emanation }}"
-                     data-levity-reversal="{{ card.levity_reversal }}"
-                     data-gravity-reversal="{{ card.gravity_reversal }}"
-                     data-italic-word="{{ card.italic_word }}">
-                    <div class="fan-card-corner fan-card-corner--tl">
-                        <span class="fan-corner-rank">{{ card.corner_rank }}</span>
-                        {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
-                    </div>
-                </div>
-            {% endfor %}
+        {# FLIP — bottom-left of the stage card. Visible only after lock   #}
+        {# (.sig-stage--frozen).                                           #}
+        <button class="btn btn-reveal my-sign-flip-btn" type="button">FLIP</button>
+        <div class="sig-stat-block">
+            <button class="btn btn-reverse spin-btn" type="button">SPIN</button>
+            <button class="btn btn-info fyi-btn" type="button">FYI</button>
+            <div class="stat-face stat-face--upright">
+                <p class="stat-face-label">Emanation</p>
+                <ul class="stat-keywords"></ul>
+            </div>
+            <div class="stat-face stat-face--reversed">
+                <p class="stat-face-label">Reversal</p>
+                <ul class="stat-keywords"></ul>
+            </div>
+            {% include "apps/gameboard/_partials/_sig_fyi_panel.html" with panel_id="id_my_sign_fyi_panel" %}
         </div>
-
+        {# SAVE SIGN + NVM form lives inside the stage so the layout       #}
+        {# matches the room's sig-select: btn sits adjacent to the stat    #}
+        {# block. Disabled until a card is OK-confirmed.                   #}
         <form id="id_save_sign_form" method="POST" action="{% url 'billboard:save_sign' %}">
             {% csrf_token %}
             <input type="hidden" name="card_id" id="id_save_sign_card_id" value="{{ current_significator.id|default:'' }}">
             <input type="hidden" name="reversed" id="id_save_sign_reversed" value="{{ current_significator_reversed|yesno:'1,0' }}">
             <button type="submit" id="id_save_sign_btn" class="btn btn-primary"{% if not current_significator %} disabled{% endif %}>SAVE SIGN</button>
-            <button type="button" id="id_nvm_sign_btn" class="btn btn-cancel"{% if not current_significator %} style="display:none"{% endif %}>NVM</button>
         </form>
+    </div>
 
-        {# Picker JS — click .sig-card to pick + populate stage preview via #}
-        {# StageCard.populateCard (shared w. room sig-select + sea-select). #}
-        {# FLIP toggles `.stage-card--reversed` on the preview AND the      #}
-        {# hidden `reversed` input that gets POSTed on SAVE SIGN.           #}
-        <script src="{% static 'apps/epic/stage-card.js' %}"></script>
-        <script>
-        (function () {
-            var grid = document.querySelector('.my-sign-deck-grid');
-            if (!grid) return;
-            var pageEl      = document.querySelector('.my-sign-page');
-            var stage       = document.querySelector('.my-sign-stage');
-            var stageCard   = stage.querySelector('.sig-stage-card');
-            var statBlock   = stage.querySelector('.sig-stat-block');
-            var cardIdInput = document.getElementById('id_save_sign_card_id');
-            var saveBtn     = document.getElementById('id_save_sign_btn');
-            var nvmBtn      = document.getElementById('id_nvm_sign_btn');
-            var spinBtn     = stage.querySelector('.spin-btn');
-            var flipBtn     = stage.querySelector('.my-sign-flip-btn');
-            var fyiBtn      = stage.querySelector('.fyi-btn');
-            var fyiPanel    = stage.querySelector('.sig-info');
-            var fyiPrev     = stage.querySelector('.fyi-prev');
-            var fyiNext     = stage.querySelector('.fyi-next');
-            var revInput    = document.getElementById('id_save_sign_reversed');
-            var _currentCard   = null;
-            var _focusedCardEl = null;
-            var _locked        = false;  // true after click; cleared by NVM
-            var _fyiData       = [];
-            var _fyiIdx        = 0;
+    {# Landing phase — DRY table hex w. a single chair + central SCAN     #}
+    {# SIGN btn. Reuses the room's hex shell (.room-shell > .room-table   #}
+    {# > .room-table-scene > .table-hex-border > .table-hex >             #}
+    {# .table-center) + room.js's scaleTable() for viewport-fluid sizing. #}
+    <div class="my-sign-landing">
+        <div class="room-shell">
+            <div id="id_game_table" class="room-table">
+                <div class="room-table-scene">
+                    <div class="table-hex-border">
+                        <div class="table-hex">
+                            <div class="table-center">
+                                <button id="id_scan_sign_btn" type="button" class="btn btn-primary">SCAN<br>SIGN</button>
+                            </div>
+                        </div>
+                    </div>
+                    {# Single founder chair — solo-coded but extensible to the   #}
+                    {# 6-chair friend-invite plan in [[project-my-sea-roadmap]]. #}
+                    <div class="table-seat" data-slot="1" data-role="PC">
+                        <i class="fa-solid fa-chair"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 
-            // Default polarity = gravity (significator_reversed=False);
-            // FLIP toggles to levity (significator_reversed=True). Mirrors the
-            // user's "gravity-rightside-up by default" design from the Game
-            // Kit fan carousel.
-            function _polarity() {
-                return revInput.value === '1' ? 'levity' : 'gravity';
-            }
+    {# Picker phase — card grid, hidden until SCAN SIGN click. Each       #}
+    {# .sig-card gets .sig-card-actions w. OK + NVM buttons (CSS gates    #}
+    {# visibility via .sig-focused → OK / .sig-reserved--own → NVM).      #}
+    <div class="sig-deck-grid my-sign-deck-grid" style="display:none">
+        {% for card in cards %}
+            <div class="sig-card"
+                 data-card-id="{{ card.id }}"
+                 data-suit-icon="{{ card.suit_icon }}"
+                 data-corner-rank="{{ card.corner_rank }}"
+                 data-name-group="{{ card.name_group }}"
+                 data-name-title="{{ card.name_title }}"
+                 data-arcana="{{ card.get_arcana_display }}"
+                 data-correspondence="{{ card.correspondence|default:'' }}"
+                 data-keywords-upright="{{ card.keywords_upright|join:',' }}"
+                 data-keywords-reversed="{{ card.keywords_reversed|join:',' }}"
+                 data-energies="{{ card.energies_json }}"
+                 data-operations="{{ card.operations_json }}"
+                 data-levity-qualifier="{{ card.levity_qualifier }}"
+                 data-gravity-qualifier="{{ card.gravity_qualifier }}"
+                 data-reversal-qualifier="{{ card.reversal_qualifier }}"
+                 data-levity-emanation="{{ card.levity_emanation }}"
+                 data-gravity-emanation="{{ card.gravity_emanation }}"
+                 data-levity-reversal="{{ card.levity_reversal }}"
+                 data-gravity-reversal="{{ card.gravity_reversal }}"
+                 data-italic-word="{{ card.italic_word }}">
+                <div class="fan-card-corner fan-card-corner--tl">
+                    <span class="fan-corner-rank">{{ card.corner_rank }}</span>
+                    {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
+                </div>
+                <div class="sig-card-actions">
+                    <button class="sig-ok-btn btn btn-confirm" type="button">OK</button>
+                    <button class="sig-nvm-btn btn btn-cancel" type="button">NVM</button>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
 
-            function _populateStage(cardEl) {
-                _focusedCardEl = cardEl;
-                _currentCard = StageCard.fromDataset(cardEl);
-                StageCard.populateCard(stageCard, _currentCard, _polarity());
-                StageCard.populateKeywords(statBlock,
-                    _currentCard.keywords_upright, _currentCard.keywords_reversed);
-                _fyiData = StageCard.buildInfoData(_currentCard);
-                _fyiIdx = 0;
-                if (fyiPanel) StageCard.renderFyi(fyiPanel, _fyiData, _fyiIdx);
-                stageCard.style.display = '';
-            }
+    {# Picker JS — phase swap (landing → picker), hover preview, two-step #}
+    {# OK/NVM-on-thumbnail selection cycle, FLIP polarity animation lifted #}
+    {# from game-kit.js's _flipActive, SPIN orientation toggle. data-     #}
+    {# polarity moved to the page wrapper so descendant .sig-card +       #}
+    {# .sig-stage-card both pick up the polarity-themed CSS rules.        #}
+    <script src="{% static 'apps/epic/stage-card.js' %}"></script>
+    <script src="{% static 'apps/epic/room.js' %}"></script>
+    <script>
+    (function () {
+        var pageEl      = document.querySelector('.my-sign-page');
+        if (!pageEl) return;
+        var landing    = pageEl.querySelector('.my-sign-landing');
+        var grid       = pageEl.querySelector('.my-sign-deck-grid');
+        var stage      = pageEl.querySelector('.my-sign-stage');
+        var stageCard  = stage.querySelector('.sig-stage-card');
+        var statBlock  = stage.querySelector('.sig-stat-block');
+        var scanBtn    = document.getElementById('id_scan_sign_btn');
+        var cardIdInput= document.getElementById('id_save_sign_card_id');
+        var saveBtn    = document.getElementById('id_save_sign_btn');
+        var spinBtn    = stage.querySelector('.spin-btn');
+        var flipBtn    = stage.querySelector('.my-sign-flip-btn');
+        var fyiBtn     = stage.querySelector('.fyi-btn');
+        var fyiPanel   = stage.querySelector('.sig-info');
+        var fyiPrev    = stage.querySelector('.fyi-prev');
+        var fyiNext    = stage.querySelector('.fyi-next');
+        var revInput   = document.getElementById('id_save_sign_reversed');
+        var _currentCard = null;
+        var _focusedCardEl = null;
+        var _locked = false;
+        var _fyiData = [];
+        var _fyiIdx = 0;
 
-            function _clearStage() {
-                stageCard.style.display = 'none';
-                _focusedCardEl = null;
-                _currentCard = null;
-            }
+        function _polarity() {
+            return revInput.value === '1' ? 'levity' : 'gravity';
+        }
 
-            function _lock(cardEl) {
-                _locked = true;
-                _populateStage(cardEl);
-                grid.querySelectorAll('.sig-card.sig-focused').forEach(function (c) {
-                    if (c !== cardEl) c.classList.remove('sig-focused');
-                });
-                cardEl.classList.add('sig-focused');
-                cardIdInput.value = cardEl.dataset.cardId;
-                saveBtn.removeAttribute('disabled');
-                if (nvmBtn) nvmBtn.style.display = '';
-                stage.classList.add('sig-stage--frozen');
-                statBlock.classList.remove('fyi-open');
-            }
+        function _populateStage(cardEl) {
+            _focusedCardEl = cardEl;
+            _currentCard = StageCard.fromDataset(cardEl);
+            StageCard.populateCard(stageCard, _currentCard, _polarity());
+            StageCard.populateKeywords(statBlock,
+                _currentCard.keywords_upright, _currentCard.keywords_reversed);
+            _fyiData = StageCard.buildInfoData(_currentCard);
+            _fyiIdx = 0;
+            if (fyiPanel) StageCard.renderFyi(fyiPanel, _fyiData, _fyiIdx);
+            stageCard.style.display = '';
+            stageCard.setAttribute('data-card-id', cardEl.dataset.cardId);
+        }
 
-            function _unlock() {
-                _locked = false;
-                stage.classList.remove('sig-stage--frozen');
-                statBlock.classList.remove('fyi-open');
-                grid.querySelectorAll('.sig-card.sig-focused').forEach(function (c) {
-                    c.classList.remove('sig-focused');
-                });
-                _clearStage();
-                cardIdInput.value = '';
-                saveBtn.setAttribute('disabled', 'disabled');
-                if (nvmBtn) nvmBtn.style.display = 'none';
-            }
+        function _clearStage() {
+            stageCard.style.display = 'none';
+            stageCard.removeAttribute('data-card-id');
+            _focusedCardEl = null;
+            _currentCard = null;
+        }
 
-            // Horizontal-perspective FLIP animation lifted from
-            // apps/gameboard/static/apps/gameboard/game-kit.js `_flipActive`.
-            // 500ms Y-axis rotation; mid-animation (offset 0.5) the populator
-            // swaps polarity content so the user sees the new face from the
-            // start of the second half-rotation. Preserves the SPIN orientation
-            // (.stage-card--reversed) through the flip by including the spin
-            // rotate(180deg) in both keyframes. data-polarity moved to the page
-            // wrapper so descendant .sig-card + .sig-stage-card both pick up
-            // the polarity-themed CSS rules ([[feedback-applet-vs-page]] / port
-            // of `.sig-overlay[data-polarity]` to `.my-sign-page[data-polarity]`).
-            function _flipPolarityAnimated() {
-                if (!stageCard || stageCard.dataset.flipping) return;
-                stageCard.dataset.flipping = '1';
-                var spin = stageCard.classList.contains('stage-card--reversed')
-                    ? ' rotate(180deg)' : '';
-                var rest = 'translateX(0px) rotateY(0deg) scale(1)' + spin;
-                var mid  = 'translateX(0px) rotateY(0deg) scale(1)' + spin
-                         + ' rotateY(90deg)';
-                stageCard.animate([
-                    { transform: rest },
-                    { transform: mid, offset: 0.5 },
-                    { transform: rest },
-                ], { duration: 500, easing: 'ease' });
-                setTimeout(function () {
-                    revInput.value = revInput.value === '1' ? '0' : '1';
-                    pageEl.setAttribute('data-polarity', _polarity());
-                    if (flipBtn) flipBtn.classList.toggle(
-                        'is-reversed', revInput.value === '1');
-                    if (_currentCard && window.StageCard) {
-                        StageCard.populateCard(stageCard, _currentCard, _polarity());
-                    }
-                }, 250);
-                setTimeout(function () { delete stageCard.dataset.flipping; }, 500);
-            }
+        function _focus(cardEl) {
+            // Click 1 — adds .sig-focused (CSS reveals OK btn) + previews
+            // the card on the stage. Stage stays unlocked; another click on
+            // a different thumb just moves the focus.
+            grid.querySelectorAll('.sig-card.sig-focused').forEach(function (c) {
+                if (c !== cardEl) c.classList.remove('sig-focused');
+            });
+            cardEl.classList.add('sig-focused');
+            _populateStage(cardEl);
+        }
 
-            // Orientation toggle (preview-only) — rotates the card 180° + swaps
-            // the stat-block visible face. Not persisted; SAVE SIGN only stores
-            // the card identity + polarity (significator_reversed = polarity bit).
-            function _toggleOrientation() {
-                var on = !stageCard.classList.contains('stage-card--reversed');
-                stageCard.classList.toggle('stage-card--reversed', on);
-                statBlock.classList.toggle('is-reversed', on);
-                if (spinBtn) spinBtn.classList.toggle('is-reversed', on);
-            }
+        function _lock(cardEl) {
+            // Click 2 (OK btn) — lock state. Adds .sig-reserved--own to the
+            // thumbnail (CSS swaps OK→NVM), .sig-stage--frozen to the stage
+            // (CSS reveals stat block + FLIP), enables SAVE SIGN.
+            _locked = true;
+            _focus(cardEl);
+            cardEl.classList.add('sig-reserved--own');
+            stage.classList.add('sig-stage--frozen');
+            statBlock.classList.remove('fyi-open');
+            cardIdInput.value = cardEl.dataset.cardId;
+            saveBtn.removeAttribute('disabled');
+        }
 
-            // Hover preview — only when stage isn't locked. mouseenter shows
-            // the stage card; mouseleave hides it. Click locks the state +
-            // surfaces the stat block + FLIP btn (via .sig-stage--frozen).
+        function _unlock() {
+            // NVM btn — clears lock + focus + stage. SAVE SIGN disables.
+            _locked = false;
+            stage.classList.remove('sig-stage--frozen');
+            statBlock.classList.remove('fyi-open');
+            grid.querySelectorAll('.sig-card.sig-reserved--own').forEach(function (c) {
+                c.classList.remove('sig-reserved--own');
+            });
+            grid.querySelectorAll('.sig-card.sig-focused').forEach(function (c) {
+                c.classList.remove('sig-focused');
+            });
+            _clearStage();
+            cardIdInput.value = '';
+            saveBtn.setAttribute('disabled', 'disabled');
+        }
+
+        function _enterPickerPhase() {
+            pageEl.setAttribute('data-phase', 'picker');
+            if (landing) landing.style.display = 'none';
+            if (grid) grid.style.display = '';
+        }
+
+        // SCAN SIGN — landing → picker phase swap
+        if (scanBtn) {
+            scanBtn.addEventListener('click', function () {
+                _enterPickerPhase();
+            });
+        }
+
+        // FLIP — horizontal-perspective polarity flip animation lifted
+        // from game-kit.js's _flipActive (500ms Y-axis rotation; offset
+        // 0.5 mid-animation swap so the new face renders at the second
+        // half-rotation). Preserves SPIN orientation (.stage-card--reversed)
+        // through the flip by including its rotate(180deg) in both keyframes.
+        function _flipPolarityAnimated() {
+            if (!stageCard || stageCard.dataset.flipping) return;
+            stageCard.dataset.flipping = '1';
+            var spin = stageCard.classList.contains('stage-card--reversed')
+                ? ' rotate(180deg)' : '';
+            var rest = 'translateX(0px) rotateY(0deg) scale(1)' + spin;
+            var mid  = 'translateX(0px) rotateY(0deg) scale(1)' + spin
+                     + ' rotateY(90deg)';
+            stageCard.animate([
+                { transform: rest },
+                { transform: mid, offset: 0.5 },
+                { transform: rest },
+            ], { duration: 500, easing: 'ease' });
+            setTimeout(function () {
+                revInput.value = revInput.value === '1' ? '0' : '1';
+                pageEl.setAttribute('data-polarity', _polarity());
+                if (flipBtn) flipBtn.classList.toggle(
+                    'is-reversed', revInput.value === '1');
+                if (_currentCard && window.StageCard) {
+                    StageCard.populateCard(stageCard, _currentCard, _polarity());
+                }
+            }, 250);
+            setTimeout(function () { delete stageCard.dataset.flipping; }, 500);
+        }
+
+        // SPIN — 180° rotation + stat-block face swap (preview-only)
+        function _toggleOrientation() {
+            var on = !stageCard.classList.contains('stage-card--reversed');
+            stageCard.classList.toggle('stage-card--reversed', on);
+            statBlock.classList.toggle('is-reversed', on);
+            if (spinBtn) spinBtn.classList.toggle('is-reversed', on);
+        }
+
+        // Grid hover preview (only when nothing is locked)
+        if (grid) {
             grid.addEventListener('mouseover', function (e) {
                 if (_locked) return;
                 var cardEl = e.target.closest('.sig-card');
@@ -247,90 +302,108 @@
                 if (!cardEl) return;
                 var nextCard = e.relatedTarget && e.relatedTarget.closest
                     && e.relatedTarget.closest('.sig-card');
-                if (nextCard) return;  // moving between cards — let mouseover update
+                if (nextCard) return;
                 _clearStage();
             });
+
+            // Click delegation — OK / NVM / card body
             grid.addEventListener('click', function (e) {
-                var cardEl = e.target.closest('.sig-card');
-                if (!cardEl || !window.StageCard) return;
-                _lock(cardEl);
+                if (e.target.closest('.sig-ok-btn')) {
+                    if (_locked) return;
+                    var card = e.target.closest('.sig-card');
+                    if (card) _lock(card);
+                    return;
+                }
+                if (e.target.closest('.sig-nvm-btn')) {
+                    _unlock();
+                    return;
+                }
+                if (_locked) return;  // locked — must NVM first
+                var card = e.target.closest('.sig-card');
+                if (!card || !window.StageCard) return;
+                _focus(card);
             });
-            if (nvmBtn) {
-                nvmBtn.addEventListener('click', function () { _unlock(); });
-            }
-            if (flipBtn) {
-                flipBtn.addEventListener('click', function () {
-                    if (!_currentCard) return;  // need a selected card to flip
-                    _flipPolarityAnimated();
-                });
-            }
-            if (spinBtn) {
-                spinBtn.addEventListener('click', function () {
-                    _toggleOrientation();
-                });
-            }
-            if (fyiBtn) {
-                fyiBtn.addEventListener('click', function () {
-                    if (!_currentCard) return;  // no card selected yet
-                    statBlock.classList.toggle('fyi-open');
-                });
-            }
-            if (fyiPanel) {
-                fyiPanel.addEventListener('click', function () {
-                    statBlock.classList.remove('fyi-open');
-                });
-            }
-            if (fyiPrev) {
-                fyiPrev.addEventListener('click', function () {
-                    if (!_fyiData.length) return;
-                    _fyiIdx = (_fyiIdx - 1 + _fyiData.length) % _fyiData.length;
-                    StageCard.renderFyi(fyiPanel, _fyiData, _fyiIdx);
-                });
-            }
-            if (fyiNext) {
-                fyiNext.addEventListener('click', function () {
-                    if (!_fyiData.length) return;
-                    _fyiIdx = (_fyiIdx + 1) % _fyiData.length;
-                    StageCard.renderFyi(fyiPanel, _fyiData, _fyiIdx);
-                });
-            }
+        }
 
-            // On-load: if user has a saved sig, lock that card so the stage
-            // + stat block + FLIP btn appear w. the persisted choice from
-            // the start. Otherwise the stage stays empty until first hover.
-            var savedId = pageEl && pageEl.dataset.currentCardId;
-            if (savedId) {
-                var savedCardEl = grid.querySelector(
-                    '.sig-card[data-card-id="' + savedId + '"]');
-                if (savedCardEl) _lock(savedCardEl);
-            }
-        }());
-        </script>
-
-        {# No equipped deck + no saved sig — fire a Brief banner via the   #}
-        {# shared note.js API so positioning + NVM behavior + h2-overlay   #}
-        {# styling matches every other Brief on the site (per             #}
-        {# [[sprint-baltimorean-note-unlock-may18]] portrait h2 measurement). #}
-        {# FYI links to /gameboard/ (Game Kit equip); NVM dismisses + the  #}
-        {# picker proceeds against the Earthman [Shabby Paperboard] fallback. #}
-        <script src="{% static 'apps/dashboard/note.js' %}"></script>
-        {% if show_backup_intro_banner %}
-        <script>
-            document.addEventListener('DOMContentLoaded', function () {
-                if (!window.Brief || !Brief.showBanner) return;
-                Brief.showBanner({
-                    title: 'Default deck warning',
-                    line_text: 'Look!—no deck is equipped. Navigate to the Game Kit to equip one (FYI) or (NVM) proceed with the Earthman [Shabby Cardstock] deck.',
-                    post_url: '{% url "gameboard" %}',
-                    created_at: '',
-                    kind: 'NUDGE',
-                });
-                // Tag the banner so FTs (and any my-sign-specific styling) can
-                // distinguish this intro nudge from other Briefs on the page.
-                var banner = document.querySelector('.note-banner');
-                if (banner) banner.classList.add('my-sign-intro-banner');
+        if (flipBtn) {
+            flipBtn.addEventListener('click', function () {
+                if (!_currentCard) return;
+                _flipPolarityAnimated();
             });
-        </script>
-        {% endif %}
+        }
+        if (spinBtn) {
+            spinBtn.addEventListener('click', function () {
+                _toggleOrientation();
+            });
+        }
+        if (fyiBtn) {
+            fyiBtn.addEventListener('click', function () {
+                if (!_currentCard) return;
+                statBlock.classList.toggle('fyi-open');
+            });
+        }
+        if (fyiPanel) {
+            fyiPanel.addEventListener('click', function () {
+                statBlock.classList.remove('fyi-open');
+            });
+        }
+        if (fyiPrev) {
+            fyiPrev.addEventListener('click', function () {
+                if (!_fyiData.length) return;
+                _fyiIdx = (_fyiIdx - 1 + _fyiData.length) % _fyiData.length;
+                StageCard.renderFyi(fyiPanel, _fyiData, _fyiIdx);
+            });
+        }
+        if (fyiNext) {
+            fyiNext.addEventListener('click', function () {
+                if (!_fyiData.length) return;
+                _fyiIdx = (_fyiIdx + 1) % _fyiData.length;
+                StageCard.renderFyi(fyiPanel, _fyiData, _fyiIdx);
+            });
+        }
+
+        // On-load: if user has a saved sig, populate the stage preview so
+        // the saved card is visible above the landing hex. The picker grid
+        // stays hidden until SCAN SIGN is clicked. The saved card is NOT
+        // auto-locked — that happens on entering picker phase if desired.
+        var savedId = pageEl.dataset.currentCardId;
+        if (savedId && grid) {
+            var savedCardEl = grid.querySelector(
+                '.sig-card[data-card-id="' + savedId + '"]');
+            if (savedCardEl) {
+                _populateStage(savedCardEl);
+            }
+        }
+
+        // room.js's scaleTable() runs on DOMContentLoaded but at that
+        // moment the parent .my-sign-page hasn't flushed its flex sizing,
+        // so #id_game_table.clientWidth/Height read 0 and the hex stays
+        // unscaled (200×231 inside a 360×320 scene → narrow / elongated).
+        // Dispatch a resize on the next tick to re-trigger scaleTable
+        // once layout settles.
+        window.requestAnimationFrame(function () {
+            window.dispatchEvent(new Event('resize'));
+        });
+    }());
+    </script>
+
+    {# Brief intro banner — Default deck warning. See sprint-4a-follow.   #}
+    <script src="{% static 'apps/dashboard/note.js' %}"></script>
+    {% if show_backup_intro_banner %}
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            if (!window.Brief || !Brief.showBanner) return;
+            Brief.showBanner({
+                title: 'Default deck warning',
+                line_text: 'Look!—no deck is equipped. Navigate to the Game Kit to equip one (FYI) or (NVM) proceed with the Earthman [Shabby Cardstock] deck.',
+                post_url: '{% url "gameboard" %}',
+                created_at: '',
+                kind: 'NUDGE',
+            });
+            var banner = document.querySelector('.note-banner');
+            if (banner) banner.classList.add('my-sign-intro-banner');
+        });
+    </script>
+    {% endif %}
 </div>
 {% endblock content %}