sea_stage reversed-card open: slow auto-rotate-in + FLIP-btn corner-swap — TDD

User spec 2026-05-26 for the sea_stage modal (shared by my_sea.html today, room.html SEA SELECT later):

1. **Reversed card opens rightside-up, then slowly auto-rotates 180°.** Preserves the original text-card legibility convention (modal opens w. upright frame + dimmed upright title + highlighted upside-down reversal title) but adds a JS-driven 0.8s rotate-in (2× the SPIN transition's 0.4s) that lands the card upside-down. Stat-block still gets `.is-reversed` immediately so the REVERSAL label is highlighted from the first frame. `_populate` no longer slaps `.stage-card--reversed` on the card up front; `_showStage` schedules `_autoRotateToReversed` 400ms post-flip-in (past the 0.35s `sea-flip-in` keyframe + buffer). Auto-rotate mirrors the SPIN-click pattern — strip the flip-in keyframe class, force reflow, inline-override `transition-duration` to 0.8s, then toggle `.stage-card--reversed` so the static `transition: transform` lerps the rotation. Timers tracked on module-level handles so dismiss-mid-rotate + reopen-mid-rotate cancel cleanly w.o. stacking handlers (cleared in `_populate`, `_hideStage`, `_testInit`).

2. **FLIP btn always lands at visual bottom-left, regardless of reversal.** Previously the in-card btn rode along w. the 180° rotation, ending top-right (user-flagged as wrong: "the game_kit.html carousel already handles this perfectly—FLIP only ever appears bottom-left, regardless of reversal"). The fan-flip-btn pulls this off by being a SIBLING of `.tarot-fan-wrap` (lives outside any rotating card) — sea_stage's btn sits INSIDE `.sea-stage-card` along w. my_sign / my_sign-applet's shared DOM, so restructuring out wasn't an option. Solved via CSS counter-positioning instead: `.sea-stage-card.stage-card--reversed .sea-stage-flip-btn` re-anchors to card-local top-right + counter-rotates 180° on the btn itself, landing it at visual bottom-left w. upright label. Companion `[data-spinning]` attr (joined to the existing flip-btn-mid-flip selector chain) hides the btn during the rotation window so it never jumps visibly between corners. Set by both `_autoRotateToReversed` (0.8s window) + the SPIN click handler (0.4s window).

TDD coverage — `SeaDealSpec.js` gets a new describe block w. jasmine.clock-driven specs:
- `reversed-card open` × 6: `is-reversed` set immediately on stat-block; `.stage-card--reversed` NOT set immediately on card; `data-spinning` NOT set pre-flip-in; both set after 500ms; both cleared (well, `.stage-card--reversed` persists) after 1400ms; upright cards don't trigger auto-rotate at all
- `SPIN click hides FLIP via [data-spinning]` × 2: set on click; cleared after 500ms

Files:
- `apps/epic/static/apps/epic/sea.js` — `_populate` defers `.stage-card--reversed` + clears in-flight rotate state; `_showStage` schedules `_autoRotateToReversed` for reversed cards; SPIN handler sets `data-spinning` for the SPIN_MS window; `_hideStage` + `_testInit` clear rotate timers + spin attr; new module-level timer handles + duration constants
- `static_src/scss/_card-deck.scss` — `.sea-stage-card.stage-card--reversed .sea-stage-flip-btn` counter-positioning rule (bottom→top, left→right, transform: rotate(180deg)); `[data-spinning]` joined to the unified flip-btn mid-rotate-hide selector chain
- `static_src/tests/SeaDealSpec.js` + `static/tests/SeaDealSpec.js` — new describe blocks for the two new behaviors

Jasmine FT green. User-verified visually on `/gameboard/my-sea/` w. an upside-down reversed-card open: "Visually verified just now in my_sea.html, very nicely done".

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

@@ -1004,6 +1004,27 @@ html:has(.sig-backdrop) {
     left: 0.6rem;
 }
 
+// Reversed-card FLIP counter-positioning. The sea_stage card rotates 180°
+// via `.stage-card--reversed`; without this override the in-card FLIP btn
+// (anchored to card-local bottom-left) visually rides along to top-right
+// post-rotation. Re-anchor to card-local top-right + counter-rotate the
+// btn's own transform so it visually lands at the same bottom-left it
+// would have if the card hadn't rotated — and the label still reads
+// upright. Matches the game-kit fan precedent (`.fan-flip-btn` lives
+// OUTSIDE the rotating card on `.tarot-fan-wrap`, so it never moves)
+// without restructuring the in-card DOM that my_sign + my_sign-applet
+// also share. The `[data-spinning]` hide-during-rotate rule below means
+// 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 {
+    bottom: auto;
+    left:   auto;
+    top:    0.6rem;
+    right:  0.6rem;
+    transform: rotate(180deg);
+}
+
 // Hover-reveal on the parent card. `:has(.flip-btn:hover)` pins the btn
 // visible while the cursor is on it — without this clause, the btn (z-index
 // 25, on top of the card) steals :hover from the card the moment the cursor
@@ -1028,9 +1049,16 @@ html:has(.sig-backdrop) {
 // differ per surface because the btn-to-card DOM relationship varies (btn is
 // INSIDE the card on my_sign + applet + sea_stage; sibling under .tarot-fan-
 // wrap for the fan carousel).
+//
+// `[data-spinning]` on `.sea-stage-card` companions the SPIN-click and
+// reversed-card open auto-rotate windows in sea.js — same hide treatment as
+// FLIP-flipping, so the user never sees the btn jump between bottom-left and
+// (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,
 .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,
 .tarot-fan-wrap:has(.fan-card[data-flipping]) .fan-flip-btn {
     @extend %flip-btn-mid-flip;
 }