From d5e4fc53f0a4e527870861695748436b43aedbc8 Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Sun, 7 Jun 2026 18:24:32 -0400
Subject: [PATCH] =?UTF-8?q?CAST=20SKY=20cascade:=20felt=20eases=20out=20?=
 =?UTF-8?q?=E2=86=92=20glow=20=E2=86=92=20DRAW=20SEA=20eases=20in;=20burge?=
 =?UTF-8?q?r=20handoff;=20reload-into-open=20=E2=80=94=20TDD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Post-save choreography + the polish asks from this session.

- Post-save cascade (_sky_overlay.html): after SAVE the gamer lingers on the
  wheel ~3s, then the felt eases OUT (fade, .sky-page--cascade-out) to reveal the
  table-hex; the burger fires its --priTk glow + #id_sky_btn goes active (both
  ride the cascade now, not the save instant); 3s later the DRAW SEA btn eases IN
  and the sea overlay is injected so it's live with NO reload.
- Hex phase-stack (room.html + _room.scss): CAST SKY + DRAW SEA share one grid
  cell (.hex-phase-stack) so they cross-fade in place (.hex-phase-btn--out); the
  server seeds --out on the inactive one, the cascade swaps them. A confirmed
  reload lands DRAW SEA visible / CAST SKY out, same as the cascade end.
- Seamless sea injection: _injectSeaOverlay fetches sea_partial (the URL already
  existed, unused) + re-creates its <script>s so the overlay's own init (openSea
  + SeaDeal.reinit) runs — DRAW SEA opens with no reload. (Bridge until Sea Select
  is itself hollowed into a felt.)
- Burger → Sky-btn handoff (burger-btn.js + _burger.scss): _pulseGlow generalized;
  once saved, the next burger-OPEN pulses #id_sky_btn --priTk ("now click me to
  reopen"). Jasmine specs added (BurgerSpec).
- #id_text_btn disabled while the felt is up (openSky/closeSky) — its swipe
  machine would otherwise half-load the scroll-locked reelhouse.
- Reload-into-open (sig-select.js + _sky_overlay.html): the SIG_SELECT→SKY_SELECT
  CAST SKY click crosses a server-render boundary (felt/phase-stack/sea-inject
  only exist in SKY_SELECT), so it still reloads — but drops a sessionStorage
  flag first so the felt OPENS on arrival. Kills the old click→reload→click-again
  double-take (the "first click reloads" report). DRAW SEA can inject in-place
  (stays within SKY_SELECT); CAST SKY can't, so this is the seamless equivalent.

Tests: BurgerSpec handoff specs + full Jasmine green; 32 render ITs + 930
epic+gameboard green. Cascade timing live-verified by the user.

[[feedback-scss-import-order-specificity]]

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/apps/epic/static/apps/epic/burger-btn.js  |  21 +++-
 src/apps/epic/static/apps/epic/sig-select.js  |  16 ++-
 src/static/tests/BurgerSpec.js                |  47 +++++++
 src/static_src/scss/_burger.scss              |   6 +-
 src/static_src/scss/_room.scss                |  23 ++++
 src/static_src/scss/_sky.scss                 |   9 ++
 src/static_src/tests/BurgerSpec.js            |  47 +++++++
 .../gameboard/_partials/_sky_overlay.html     | 115 ++++++++++++++++--
 src/templates/apps/gameboard/room.html        |  23 +++-
 9 files changed, 280 insertions(+), 27 deletions(-)

diff --git a/src/apps/epic/static/apps/epic/burger-btn.js b/src/apps/epic/static/apps/epic/burger-btn.js
index 9eb3092..1bc16ae 100644
--- a/src/apps/epic/static/apps/epic/burger-btn.js
+++ b/src/apps/epic/static/apps/epic/burger-btn.js
@@ -46,6 +46,11 @@
             btn.classList.add('active');
             btn.setAttribute('aria-expanded', 'true');
             fan.setAttribute('aria-hidden', 'false');
+            // Handoff: once the sky is saved (#id_sky_btn .active = the burger has
+            // already pulsed its --priTk cue), opening the fan pulses the Sky
+            // sub-btn the same way — "now click me to reopen your sky".
+            var skyBtn = document.getElementById('id_sky_btn');
+            if (skyBtn && skyBtn.classList.contains('active')) _pulseGlow(skyBtn);
         }
 
         function _close() {
@@ -298,19 +303,23 @@
     // The pulse fires here on load when the server flagged a saved sky
     // (#id_burger_btn[data-sky-glow]); the sky overlay also calls pulseSkyGlow()
     // at the SAVE moment (no reload) so the cue plays the instant you save.
-    function pulseSkyGlow() {
-        var btn = document.getElementById('id_burger_btn');
-        if (!btn) return;
-        var pulses = 3, onMs = 220, offMs = 160;   // thrice; rhymes w. flash-inactive
+    // Thrice --priTk pulse (.sky-saved-glow) on a target btn — same cadence as
+    // .flash-inactive. The burger gets it the moment the sky is saved; the Sky
+    // sub-btn gets it on the NEXT burger-open (the cue hands off burger → sub-btn
+    // so the user is led from "look at the burger" to "click the Sky btn").
+    function _pulseGlow(el) {
+        if (!el) return;
+        var pulses = 3, onMs = 220, offMs = 160;
         (function pulse(n) {
             if (n <= 0) return;
-            btn.classList.add('sky-saved-glow');
+            el.classList.add('sky-saved-glow');
             setTimeout(function () {
-                btn.classList.remove('sky-saved-glow');
+                el.classList.remove('sky-saved-glow');
                 setTimeout(function () { pulse(n - 1); }, offMs);
             }, onMs);
         }(pulses));
     }
+    function pulseSkyGlow() { _pulseGlow(document.getElementById('id_burger_btn')); }
     window.pulseSkyGlow = pulseSkyGlow;
 
     function bindSkyBtn() {
diff --git a/src/apps/epic/static/apps/epic/sig-select.js b/src/apps/epic/static/apps/epic/sig-select.js
index 0a05886..7d1202b 100644
--- a/src/apps/epic/static/apps/epic/sig-select.js
+++ b/src/apps/epic/static/apps/epic/sig-select.js
@@ -29,9 +29,19 @@ var SigSelect = (function () {
     var _reservedFloats  = {};   // key: role → portal <i> element (thumbs-up, frozen)
     var _cursorPortal = null;
 
-    // CAST SKY click → page reload. Reassignable via setReload for tests so
-    // they can spy without actually reloading the Jasmine runner.
-    var _reload = function () { window.location.reload(); };
+    // CAST SKY click crosses the SIG_SELECT → SKY_SELECT server-render boundary
+    // (the felt + phase-stack + sea-inject only exist once table_status is
+    // SKY_SELECT), so it reloads — but drops a sessionStorage flag first so the
+    // felt OPENS on arrival. That kills the old click→reload→click-again double-
+    // take: one click now yields the sky form (the _sky_overlay.html init reads
+    // the flag + clears it). sessionStorage (not a URL param) so the open survives
+    // the reload reliably regardless of redirect/query timing. DRAW SEA can inject
+    // in-place because it stays WITHIN the SKY_SELECT page; CAST SKY can't, so this
+    // is the closest seamless equivalent. Reassignable via setReload for tests.
+    var _reload = function () {
+        try { sessionStorage.setItem('sky-autoopen', '1'); } catch (e) {}
+        window.location.reload();
+    };
 
     function getCsrf() {
         var m = document.cookie.match(/csrftoken=([^;]+)/);
diff --git a/src/static/tests/BurgerSpec.js b/src/static/tests/BurgerSpec.js
index 7497d7f..d9ba801 100644
--- a/src/static/tests/BurgerSpec.js
+++ b/src/static/tests/BurgerSpec.js
@@ -340,6 +340,53 @@ describe("sky sub-btn reopen + sky-saved glow", () => {
     });
 });
 
+// Burger → Sky-btn pulse handoff (CAST SKY cascade, 2026-06-07). Once the sky
+// is saved the burger pulses --priTk; the cue then HANDS OFF to the Sky sub-btn,
+// which pulses the same way on the next burger-OPEN ("now click me to reopen").
+describe("burger → sky-btn pulse handoff", () => {
+    let burgerBtn, fan, skyBtn, ac;
+
+    beforeEach(() => {
+        jasmine.clock().install();
+        burgerBtn = document.createElement("button");
+        burgerBtn.id = "id_burger_btn";
+        document.body.appendChild(burgerBtn);
+        fan = document.createElement("div");
+        fan.id = "id_burger_fan";
+        document.body.appendChild(fan);
+        skyBtn = document.createElement("button");
+        skyBtn.id = "id_sky_btn";
+        skyBtn.className = "burger-fan-btn";
+        document.body.appendChild(skyBtn);
+        ac = bindBurger();
+    });
+
+    afterEach(() => {
+        if (ac) ac.abort();
+        jasmine.clock().uninstall();
+        [burgerBtn, fan, skyBtn].forEach((el) => el && el.remove());
+    });
+
+    it("pulses the Sky sub-btn on burger-open once the sky is saved (.active)", () => {
+        skyBtn.classList.add("active");
+        burgerBtn.click();   // open the fan
+        expect(skyBtn.classList.contains("sky-saved-glow")).toBe(true);
+    });
+
+    it("does NOT pulse the Sky sub-btn on open before the sky is saved", () => {
+        burgerBtn.click();
+        expect(skyBtn.classList.contains("sky-saved-glow")).toBe(false);
+    });
+
+    it("does not pulse on burger-CLOSE", () => {
+        skyBtn.classList.add("active");
+        burgerBtn.click();              // open → pulses
+        jasmine.clock().tick(2000);     // let the 3-pulse cycle finish
+        burgerBtn.click();              // close
+        expect(skyBtn.classList.contains("sky-saved-glow")).toBe(false);
+    });
+});
+
 // Voice persistence across my_sea reloads — bindVoiceBtn remembers the active
 // room in sessionStorage + silently re-joins it on the next page if voice is
 // still available (2026-05-29).
diff --git a/src/static_src/scss/_burger.scss b/src/static_src/scss/_burger.scss
index bdee991..fee9250 100644
--- a/src/static_src/scss/_burger.scss
+++ b/src/static_src/scss/_burger.scss
@@ -196,8 +196,10 @@
 // btn.js toggles .sky-saved-glow three times (finite), in rhyme with the
 // 2-pulse --priRd .flash-inactive + the voice pulse above. The Sky sub-btn's
 // own .active state (real cloud icon, opacity 1) is handled by the generic
-// .burger-fan-btn.active rules.
-#id_burger_btn.sky-saved-glow {
+// .burger-fan-btn.active rules. Shared by the burger (save-moment cue) AND the
+// Sky sub-btn (the handoff cue on the next burger-open).
+#id_burger_btn.sky-saved-glow,
+#id_sky_btn.sky-saved-glow {
     color: rgba(var(--priTk), 1);
     border-color: rgba(var(--priTk), 1);
     box-shadow:
diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss
index 91ffffe..57c9a9c 100644
--- a/src/static_src/scss/_room.scss
+++ b/src/static_src/scss/_room.scss
@@ -980,6 +980,29 @@ html .room-gate-page.room-gate-page .position-strip .gate-slot { pointer-events:
     justify-content: center;
 }
 
+// Hex phase-button stack — CAST SKY + DRAW SEA share ONE grid cell so they can
+// cross-fade IN PLACE during the post-save cascade (the sky-overlay JS toggles
+// .hex-phase-btn--out). The grid sizes to the larger btn; .table-center centers
+// it. Only the SKY_SELECT phase renders both; other phases use a lone button.
+.hex-phase-stack {
+    display: grid;
+    justify-items: center;
+    align-items: center;
+}
+
+.hex-phase-stack > .hex-phase-btn {
+    grid-area: 1 / 1;   // stack both buttons in the same cell
+    transition: opacity 0.45s ease, transform 0.45s ease;
+}
+
+// Eased-out state — invisible + inert, but still in layout so the partner btn
+// can cross-fade in (display:none can't transition).
+.hex-phase-btn--out {
+    opacity: 0;
+    transform: scale(0.7);
+    pointer-events: none;
+}
+
 // "Gravity settling . . ." / "Levity appraising . . ." shown after a polarity
 // group confirms their sigs while the other group is still selecting.
 // Pulsing opacity signals active waiting without being jarring.
diff --git a/src/static_src/scss/_sky.scss b/src/static_src/scss/_sky.scss
index 1fe0bf4..e12c5bb 100644
--- a/src/static_src/scss/_sky.scss
+++ b/src/static_src/scss/_sky.scss
@@ -57,6 +57,15 @@ html.sky-open .position-strip {
     visibility: hidden;
 }
 
+// Post-save cascade ease-out — the felt fades to transparent over ~0.5s (the JS
+// _FELT_FADE timer) BEFORE sky-open is removed, so the table-hex is revealed with
+// a soft dissolve instead of a hard snap. Visibility is still on (sky-open) for
+// the duration of the fade; the JS removes sky-open once the opacity lands at 0.
+.sky-page.sky-page--cascade-out {
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
 // ── Backdrop ──────────────────────────────────────────────────────────────────
 
 .sky-backdrop {
diff --git a/src/static_src/tests/BurgerSpec.js b/src/static_src/tests/BurgerSpec.js
index 7497d7f..d9ba801 100644
--- a/src/static_src/tests/BurgerSpec.js
+++ b/src/static_src/tests/BurgerSpec.js
@@ -340,6 +340,53 @@ describe("sky sub-btn reopen + sky-saved glow", () => {
     });
 });
 
+// Burger → Sky-btn pulse handoff (CAST SKY cascade, 2026-06-07). Once the sky
+// is saved the burger pulses --priTk; the cue then HANDS OFF to the Sky sub-btn,
+// which pulses the same way on the next burger-OPEN ("now click me to reopen").
+describe("burger → sky-btn pulse handoff", () => {
+    let burgerBtn, fan, skyBtn, ac;
+
+    beforeEach(() => {
+        jasmine.clock().install();
+        burgerBtn = document.createElement("button");
+        burgerBtn.id = "id_burger_btn";
+        document.body.appendChild(burgerBtn);
+        fan = document.createElement("div");
+        fan.id = "id_burger_fan";
+        document.body.appendChild(fan);
+        skyBtn = document.createElement("button");
+        skyBtn.id = "id_sky_btn";
+        skyBtn.className = "burger-fan-btn";
+        document.body.appendChild(skyBtn);
+        ac = bindBurger();
+    });
+
+    afterEach(() => {
+        if (ac) ac.abort();
+        jasmine.clock().uninstall();
+        [burgerBtn, fan, skyBtn].forEach((el) => el && el.remove());
+    });
+
+    it("pulses the Sky sub-btn on burger-open once the sky is saved (.active)", () => {
+        skyBtn.classList.add("active");
+        burgerBtn.click();   // open the fan
+        expect(skyBtn.classList.contains("sky-saved-glow")).toBe(true);
+    });
+
+    it("does NOT pulse the Sky sub-btn on open before the sky is saved", () => {
+        burgerBtn.click();
+        expect(skyBtn.classList.contains("sky-saved-glow")).toBe(false);
+    });
+
+    it("does not pulse on burger-CLOSE", () => {
+        skyBtn.classList.add("active");
+        burgerBtn.click();              // open → pulses
+        jasmine.clock().tick(2000);     // let the 3-pulse cycle finish
+        burgerBtn.click();              // close
+        expect(skyBtn.classList.contains("sky-saved-glow")).toBe(false);
+    });
+});
+
 // Voice persistence across my_sea reloads — bindVoiceBtn remembers the active
 // room in sessionStorage + silently re-joins it on the next page if voice is
 // still available (2026-05-29).
diff --git a/src/templates/apps/gameboard/_partials/_sky_overlay.html b/src/templates/apps/gameboard/_partials/_sky_overlay.html
index bce3623..e6bf4a5 100644
--- a/src/templates/apps/gameboard/_partials/_sky_overlay.html
+++ b/src/templates/apps/gameboard/_partials/_sky_overlay.html
@@ -166,8 +166,26 @@
 
   // ── Open / Close ──────────────────────────────────────────────────────────
 
+  // While the felt is up the burger Text sub-btn must be inert: its swipe
+  // machine (room-views.js) would otherwise drive DOWN into the reelhouse — but
+  // the aperture is scroll-locked, so the page half-loads a carousel view it
+  // can't actually reach (confusing UX). We toggle #id_text_btn OFF on open and
+  // restore its server-set baseline on close.
+  let _textBtnWasActive = false;
+  function _disableTextBtn() {
+    const tb = document.getElementById('id_text_btn');
+    if (!tb) return;
+    _textBtnWasActive = tb.classList.contains('active');
+    tb.classList.remove('active');
+  }
+  function _restoreTextBtn() {
+    const tb = document.getElementById('id_text_btn');
+    if (tb && _textBtnWasActive) tb.classList.add('active');
+  }
+
   function openSky() {
     document.documentElement.classList.add('sky-open');
+    _disableTextBtn();
     // Re-sync the room gear to the sky NVM pane (room-views.js owns the gear
     // pane-swap; sky-open toggles outside any scroll/view event it watches).
     if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
@@ -181,6 +199,7 @@
 
   function closeSky() {
     document.documentElement.classList.remove('sky-open');
+    _restoreTextBtn();
     hideSuggestions();
     if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
   }
@@ -424,21 +443,86 @@
       SkyWheel.draw(svgEl, _lastChartData);
     }
     _ensureDelBtn();
-    // The sky now lives in the burger fan: light its Sky sub-btn so it's a live
-    // reopen affordance immediately (server also renders it active after any
-    // reload). No-op if the burger isn't on this surface.
-    const skyBtn = document.getElementById('id_sky_btn');
-    if (skyBtn) skyBtn.classList.add('active');
     if (!wasSaved) {
       // First reveal: pin to the form section so the wheel slides in from above
-      // (the form "shunts down") rather than hard-cutting into place.
+      // (the form "shunts down"), then begin the post-save cascade. #id_sky_btn
+      // activation + the burger glow ride the cascade (not the save instant) so
+      // they land WITH the table-hex reveal — see _cascadeFeltOut.
       const formCol = overlay.querySelector('.sky-form-col');
       if (formCol) overlay.scrollTop = formCol.offsetTop;
-      // Cue the burger thrice (--priTk) — "your sky lives here now". One-shot
-      // per save; the burger-btn.js load pulse covers the post-reload hex.
-      if (window.pulseSkyGlow) window.pulseSkyGlow();
+      _scrollApertureToTop();
+      _startSaveCascade();
+    } else {
+      // Re-assert (WS re-fire / reopen-from-saved): keep the reopen affordance
+      // live; no cascade (the table-hex already advanced on the first save).
+      const skyBtn = document.getElementById('id_sky_btn');
+      if (skyBtn) skyBtn.classList.add('active');
+      _scrollApertureToTop();
     }
-    _scrollApertureToTop();
+  }
+
+  // ── Post-save cascade ───────────────────────────────────────────────────────
+  // After SAVE the gamer lingers on the freshly-drawn wheel ~3s; THEN the felt
+  // eases OUT to reveal the table-hex, the burger glow fires (your sky now lives
+  // in the burger fan), and 3s later the DRAW SEA btn eases IN — with the sea
+  // overlay injected so it's live with no reload. Each beat is its own timer.
+  const _CASCADE_LINGER = 3000, _FELT_FADE = 500, _SEA_DELAY = 3000;
+
+  function _startSaveCascade() {
+    setTimeout(_cascadeFeltOut, _CASCADE_LINGER);
+  }
+
+  function _cascadeFeltOut() {
+    overlay.classList.add('sky-page--cascade-out');   // CSS fades the felt out
+    setTimeout(() => {
+      document.documentElement.classList.remove('sky-open');
+      overlay.classList.remove('sky-page--cascade-out');
+      _restoreTextBtn();
+      if (window.RoomViews && window.RoomViews.syncGear) window.RoomViews.syncGear();
+      // CAST SKY is stale → ease it out; light the burger reopen affordance +
+      // fire the glow, all concurrent with the table-hex reveal.
+      const skyPhaseBtn = document.getElementById('id_pick_sky_btn');
+      if (skyPhaseBtn) skyPhaseBtn.classList.add('hex-phase-btn--out');
+      const skyBtn = document.getElementById('id_sky_btn');
+      if (skyBtn) skyBtn.classList.add('active');
+      if (window.pulseSkyGlow) window.pulseSkyGlow();
+      setTimeout(_cascadeDrawSeaIn, _SEA_DELAY);
+    }, _FELT_FADE);
+  }
+
+  function _cascadeDrawSeaIn() {
+    const seaPhaseBtn = document.getElementById('id_pick_sea_btn');
+    if (seaPhaseBtn) seaPhaseBtn.classList.remove('hex-phase-btn--out');   // eases in
+    _injectSeaOverlay();
+  }
+
+  // Fetch + inject the DRAW SEA overlay so it's live without a reload. The sea
+  // partial carries its own inline <script> (openSea binding on #id_pick_sea_btn
+  // + SeaDeal.reinit) — innerHTML won't execute it, so each <script> is re-
+  // created. Idempotent + best-effort (a gear NVM / refresh recovers via the
+  // server-rendered confirmed overlay).
+  function _injectSeaOverlay() {
+    const url = overlay.dataset.seaPartialUrl;
+    const container = document.getElementById('id_sea_inject');
+    if (!url || !container || container.dataset.injected) return;
+    fetch(url, { credentials: 'same-origin' })
+      .then((r) => { if (!r.ok) throw new Error(r.status); return r.text(); })
+      .then((html) => {
+        container.dataset.injected = '1';
+        const tpl = document.createElement('template');
+        tpl.innerHTML = html;
+        Array.prototype.slice.call(tpl.content.childNodes).forEach((node) => {
+          if (node.nodeName === 'SCRIPT') {
+            const s = document.createElement('script');
+            if (node.src) s.src = node.src;
+            else s.textContent = node.textContent;
+            container.appendChild(s);
+          } else {
+            container.appendChild(node);
+          }
+        });
+      })
+      .catch(() => { /* transient — server render recovers on next load */ });
   }
 
   // Ease the felt's scroll back to the wheel page (top) after a save —
@@ -566,6 +650,17 @@
     });
   }
 
+  // Reload-into-open: the SIG_SELECT → SKY_SELECT transition (sig-select.js's
+  // CAST SKY click) drops a sessionStorage flag then reloads here, so the felt
+  // OPENS on arrival — one click yields the form instead of the old click→reload
+  // →click-again. Read once + clear so a later manual refresh doesn't re-open.
+  try {
+    if (sessionStorage.getItem('sky-autoopen') === '1') {
+      sessionStorage.removeItem('sky-autoopen');
+      openSky();
+    }
+  } catch (_) { /* sessionStorage unavailable — non-fatal */ }
+
   // ── STUB: lock the form once character creation completes ───────────────────
   // Character creation ends after DRAW SEA → the Voronoi map (roadmap step 21),
   // which isn't built yet. When it lands the server will flag the finished state
diff --git a/src/templates/apps/gameboard/room.html b/src/templates/apps/gameboard/room.html
index c57da66..f2fa759 100644
--- a/src/templates/apps/gameboard/room.html
+++ b/src/templates/apps/gameboard/room.html
@@ -83,11 +83,15 @@
                                             onclick="window.location.href='{% url 'epic:room_gate' room.id %}{% if current_slot %}?seat={{ current_slot }}{% endif %}'">GATE<br>VIEW</button>
                                 {% else %}
                                     {% if room.table_status == "SKY_SELECT" %}
-                                        {% if sky_confirmed %}
-                                            <button id="id_pick_sea_btn" class="btn btn-primary">DRAW<br>SEA</button>
-                                        {% else %}
-                                            <button id="id_pick_sky_btn" class="btn btn-primary">CAST<br>SKY</button>
-                                        {% endif %}
+                                        {# Both phase btns render so the post-save cascade can      #}
+                                        {# cross-fade CAST SKY → DRAW SEA in place (no reload). The  #}
+                                        {# server sets --out on the inactive one; sky-select.js's    #}
+                                        {# cascade swaps them. On a confirmed reload the server lands #}
+                                        {# DRAW SEA visible + CAST SKY out, same as the cascade end.  #}
+                                        <div class="hex-phase-stack">
+                                            <button id="id_pick_sky_btn" class="btn btn-primary hex-phase-btn{% if sky_confirmed %} hex-phase-btn--out{% endif %}">CAST<br>SKY</button>
+                                            <button id="id_pick_sea_btn" class="btn btn-primary hex-phase-btn{% if not sky_confirmed %} hex-phase-btn--out{% endif %}">DRAW<br>SEA</button>
+                                        </div>
                                     {% elif room.table_status == "SIG_SELECT" %}
                                         <button id="id_pick_sky_btn" class="btn btn-primary" style="display:none">CAST<br>SKY</button>
                                         {% if polarity_done %}
@@ -169,10 +173,17 @@
             <div id="id_sky_tooltip_2" class="tt" style="display:none;"></div>
         {% endif %}
 
-        {# Sea (Pick Sea) overlay — Celtic Cross spread entry #}
+        {# Sea (Pick Sea) overlay — Celtic Cross spread entry. Server-rendered    #}
+        {# once the sky is confirmed (the reload/refresh path).                    #}
         {% if room.table_status == "SKY_SELECT" and sky_confirmed and viewer_cost_current %}
             {% include "apps/gameboard/_partials/_sea_overlay.html" %}
         {% endif %}
+        {# No-reload path: the post-save cascade fetches sea_partial + injects the #}
+        {# DRAW SEA overlay HERE (executing its inline init) so DRAW SEA is live   #}
+        {# without a reload. Empty until the cascade's _injectSeaOverlay runs.      #}
+        {% if room.table_status == "SKY_SELECT" and not sky_confirmed and viewer_cost_current %}
+            <div id="id_sea_inject"></div>
+        {% endif %}
 
         {# Gamer-needed stub — a seat lapsed past its renewal grace and was   #}
         {# auto-BYE'd, so the table no longer fills all six. Minimal stub      #}