my_sign main: extend sea_stage FLIP corner-swap fix — SPIN-click now hides + reanchors FLIP to visual bottom-left

Whack-a-mole follow-up to de9c97a (sea_stage reversed-card auto-rotate + FLIP corner-swap). User flagged 2026-05-26 PM: "Looks like the FLIP .btn-reveal in my_sign.html suffered from the change we applied to stop my_sea.html from letting FLIP rotate to top-right when the SPIN .btn-reverse is clicked (whack-a-mole). Since they have unified templates, for the most part, I bet squashing one bug caused the other (They should both be bottom-left)".

Actually my sea_stage scoping was correct — `.sea-stage-card.stage-card--reversed .sea-stage-flip-btn` only touched sea_stage. But my_sign main always had the same latent bug: SPIN rotates `.sig-stage-card` 180°, the in-card `.my-sign-flip-btn` (anchored bottom-left) rides along to visual top-right + reads upside-down. User caught the inconsistency post-fix on sea_stage + asked to extend the fix.

Changes mirror sea_stage exactly:

- `_card-deck.scss` counter-position rule extended w. a second selector — `.sig-stage-card.stage-card--reversed .my-sign-flip-btn` joins the existing `.sea-stage-card.stage-card--reversed .sea-stage-flip-btn`. Same `bottom:auto; left:auto; top:0.6rem; right:0.6rem; transform: rotate(180deg)` — visually re-anchors to bottom-left after the card flip + counter-rotates so the label reads upright.
- `_card-deck.scss` hide-during-rotate chain adds `.sig-stage-card[data-spinning] .my-sign-flip-btn` alongside the existing `.sea-stage-card[data-spinning] .sea-stage-flip-btn`.
- `templates/apps/billboard/my_sign.html`: `_toggleOrientation` now stamps `stageCard.dataset.spinning = "1"` + clears after `SIG_SPIN_MS = 400`. Same pattern as sea.js's SPIN handler.

My_sign-applet stays untouched — the applet renders the sig in its persisted polarity but never SPIN-rotates, so `.stage-card--reversed` never lands on `.my-sign-applet-card`. Comments updated to call out the carve-out.

All 25 affected tests green; Jasmine FT green.

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

src/static_src/scss/_card-deck.scss

@@ -1017,7 +1017,13 @@ html:has(.sig-backdrop) {
 // the user never sees the btn jump between the two corners; it
 // disappears mid-spin + reappears at bottom-left after the rotation
 // lands. Spec 2026-05-26.
-.sea-stage-card.stage-card--reversed .sea-stage-flip-btn {
+// Companion my_sign main fix landed 2026-05-26 PM — same in-card FLIP-btn
+// DOM contract as sea_stage, so the same .stage-card--reversed whack-a-mole
+// applies. (My_sign-applet is NOT covered — the applet renders the sig in
+// its polarity but never SPIN-rotates; no `.stage-card--reversed` ever
+// lands on `.my-sign-applet-card`.)
+.sea-stage-card.stage-card--reversed .sea-stage-flip-btn,
+.sig-stage-card.stage-card--reversed .my-sign-flip-btn {
     bottom: auto;
     left:   auto;
     top:    0.6rem;
@@ -1056,6 +1062,7 @@ html:has(.sig-backdrop) {
 // (rotated) top-right mid-rotate. Btn reappears at the post-rotation visual
 // bottom-left via the counter-positioning rule above.
 .sig-stage-card[data-flipping] .my-sign-flip-btn,
+.sig-stage-card[data-spinning] .my-sign-flip-btn,
 .my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn,
 .sea-stage-card[data-flipping] .sea-stage-flip-btn,
 .sea-stage-card[data-spinning] .sea-stage-flip-btn,
@@ -2023,7 +2030,7 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
 // FLIP btn on top still sits center).
 .sea-deck-stack--single .sea-stack-face {
     background: rgba(var(--priUser), 0.88);
-    border-color: rgba(var(--terUser), 0.65);
+    border-color: rgba(var(--secUser), 1) !important;
     box-shadow: $_sea-shadow;
     overflow: hidden;  // clip the back-img to the rounded-rect face
 }
@@ -2063,6 +2070,8 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
 .sea-deck-stack--single:active .sea-stack-face,
 .sea-deck-stack--single.sea-deck-stack--active .sea-stack-face {
     box-shadow: $_sea-shadow, 0 0 0.8rem 0.15rem rgba(var(--terUser), 0.6);
+    border-color: rgba(var(--terUser), 1) !important;
+
 }
 
 // Form action row — LOCK HAND + DEL side by side at the bottom

src/templates/apps/billboard/my_sign.html

@@ -336,12 +336,24 @@ this billboard surface re-brands to "Sign".
             setTimeout(function () { delete stageCard.dataset.flipping; }, 500);
         }
 
-        // SPIN — 180° rotation + stat-block face swap (preview-only)
+        // SPIN — 180° rotation + stat-block face swap (preview-only).
+        // `data-spinning="1"` is set for the rotation window so the SCSS
+        // hide-during-rotate rule (joined w. `[data-flipping]`) suppresses
+        // the in-card FLIP btn while the card spins — the btn would
+        // otherwise visibly jump from bottom-left to (rotated) top-right
+        // mid-rotate. Counter-positioning rule on `.sig-stage-card.stage-
+        // card--reversed .my-sign-flip-btn` re-anchors the btn to card-
+        // local top-right + counter-rotates 180° so it visually lands at
+        // bottom-left after the rotation. Mirrors sea_stage's SPIN-click
+        // pattern landed in `de9c97a`. User-spec 2026-05-26 PM.
+        var SIG_SPIN_MS = 400;
         function _toggleOrientation() {
             var on = !stageCard.classList.contains('stage-card--reversed');
+            stageCard.dataset.spinning = '1';
             stageCard.classList.toggle('stage-card--reversed', on);
             statBlock.classList.toggle('is-reversed', on);
             if (spinBtn) spinBtn.classList.toggle('is-reversed', on);
+            setTimeout(function () { delete stageCard.dataset.spinning; }, SIG_SPIN_MS);
         }
 
         // Grid hover preview (only when nothing is locked)