PICK SEA reversal axis: server-side roll + preview + deposited slot — TDD

- new apps/epic/utils.STACK_REVERSAL_PROBABILITY (=0.25) + stack_reversal_probability(user, room) helper; single source of truth across game phases & one-line swap point for forthcoming per-user-profile config
- sea_deck view rolls each card's `reversed` axis at fetch time using the helper, attaches to card JSON; matches the eager shuffle pattern (whole deal determined at phase start)
- room_view + sea_partial pass `stack_reversal_pct` into context for the new <p class="sea-reversal-hint">25% reversals</p> hint above the SPREAD combobox (italic, 0.7rem, 0.55 opacity)
- SeaDeal.openStage applies .stage-card--reversed + .is-reversed to stat block when card.reversed → preview lands face-reversed w. REVERSAL keywords
- _fillSlot adds .sea-card-slot--reversed → slot itself rotates 180° (bg + border + content stack flips, not just inner chars upside-down in place); .sea-pos-cross overrides to 270° to compose w. its existing 90°
- _fillSlot adds .sea-card-slot--rank-long when corner_rank.length ≥ 5 (XVIII / XXIII / XXVIII / XXXIII / XXXVIII / XLIII / XLVIII) → SCSS scaleX(0.7) + letter-spacing -0.05em squeezes horizontally w.o changing font-size

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

@@ -1053,6 +1053,28 @@ $sea-card-h: 6.5rem;
     border-color: rgba(var(--secUser), 0.6);
 }
 
+// Reversed — pre-rolled by sea_deck server-side. Rotate the whole slot
+// (background + border + content) so the rank/icon stacking order also
+// flips (rank-top + icon-bottom upright → icon-top + rank-bottom reversed),
+// not just each character upside-down in place.
+.sea-card-slot--reversed { transform: rotate(180deg); }
+
+// Cross-position adds 90° already; reversed cross combines to 270°. Higher
+// specificity than the .sea-pos-cross .sea-card-slot rule so it wins.
+.sea-pos-cross .sea-card-slot--reversed { transform: rotate(270deg); }
+
+// Long Roman numerals (≥ 5 chars: XVIII, XXIII, XXVIII, XXXIII, XXXVIII,
+// XLIII, XLVIII) — squeeze horizontally via scaleX so they fit the slot
+// without dropping font-size (height stays the same). Class added in
+// _fillSlot when card.corner_rank.length >= 5. Slot-level reversed rotation
+// already carries the rank along, so scaleX is the only inner transform
+// regardless of reversal state.
+.sea-card-slot--rank-long .fan-corner-rank {
+    display: inline-block;
+    transform: scaleX(0.7);
+    letter-spacing: -0.05em;
+}
+
 // Deposited — fully opaque by default; Cover/Cross are semi-transparent
 .sea-card-slot--visible { opacity: 1; transition: opacity 1s ease, box-shadow 0.15s ease; }
 
@@ -1188,6 +1210,16 @@ $sea-card-h: 6.5rem;
     label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
 }
 
+// Forthcoming-feature hint between SPREAD label and the combobox; rendered
+// value comes from apps.epic.utils.stack_reversal_probability via the view
+// context.
+.sea-reversal-hint {
+    font-size: 0.7rem;
+    opacity: 0.55;
+    margin: -0.1rem 0 0;
+    font-style: italic;
+}
+
 // Custom combobox replacement for native <select>. See combobox.js for the
 // expected markup; SCSS owns all visuals because the OS-native dropdown ignored
 // option background/color anyway.