My Sign picker: hover-preview, click-lock, NVM-unlock + polarity SCSS port + bigger stage — Sprint 4a-cont iteration 2

User-driven polish on iteration 1: separate hover-preview from click-lock semantics (room sig-select pattern), add NVM to unlock, port the room's `.sig-overlay[data-polarity]` polarity-themed CSS to also target `.my-sign-page[data-polarity]`, bump the stage card width so it occupies a bigger slice of the viewport ; **state machine** (inline JS in my_sign.html): three discrete states — (a) idle: stage frame visible but empty (stage card hidden via display:none, stat block hidden via `.sig-stage--frozen` absence, FLIP btn hidden via CSS); (b) hover: hovered .sig-card populates the stage card (preview); mouseleave clears it; mouseover-mouseout sequence guards against transient gaps when moving between adjacent thumbnails (relatedTarget closest('.sig-card') check); (c) locked: click on any grid card freezes the stage — populates content, adds `.sig-stage--frozen` to .sig-stage (which surfaces .sig-stat-block + .my-sign-flip-btn via CSS), enables SAVE SIGN, reveals NVM. Subsequent hovers ignored while locked. NVM click reverts to idle (clears content, hides stat-block + FLIP, disables SAVE, hides NVM) ; **new template** elements: NVM `<button id="id_nvm_sign_btn" class="btn btn-cancel">` next to SAVE SIGN in the form, hidden by default (style="display:none") + revealed on lock. Stage card re-acquires `style="display:none"` (hidden on load, JS-shown on hover/lock). `sig-stage--frozen` class no longer initial — JS-added on click ; **polarity SCSS port** (_card-deck.scss L820-905): extended `.sig-overlay[data-polarity="levity"]` + `[data-polarity="gravity"]` selector lists to include `.my-sign-page[data-polarity="levity"]` + `[gravity"]`. Rules inside (e.g. `.sig-card { background: rgba(--secUser) }`, `.sig-stage-card .fan-card-name { color: --quiUser }`, stat-face-label colour flips, text-shadow polarity variants) automatically apply on the my-sign page since `data-polarity` lives on the page wrapper (descendants .sig-card + .sig-stage-card both inherit). Moved `data-polarity` from `.my-sign-stage` to `.my-sign-page` in the template + JS so descendant scoping works (was a stage-scoped attr in iteration 1, which couldn't reach the sibling .sig-deck-grid) ; **bigger stage** (_card-deck.scss): `.my-sign-page { --sig-card-w: clamp(140px, 36vw, 220px); }` — scales w. viewport, 140px floor for portrait, 220px ceiling for landscape, ~36vw in between. Stage card + stat block both width-driven by this var so they scale together. The clamp() ceiling matches the room sig-select's typical sized card on a mid-laptop ; **FLIP btn visibility** (_card-deck.scss): `.my-sign-flip-btn { display: none }` at rest; `.my-sign-stage.sig-stage--frozen .my-sign-flip-btn { display: inline-flex }` on lock. The btn's position (absolute, bottom-left of card) was already added in iteration 1 ; **on-load lock-restore**: if `User.significator` is set, the picker auto-locks that card via `_lock(savedCardEl)` so the user sees their persisted choice in the locked-state UI (stat block + FLIP visible) instead of an idle empty frame. Polarity initial value (data-polarity on .my-sign-page) reflects `current_significator_reversed` — False=gravity (default), True=levity ; **regression**: 7 FTs in test_bill_my_sign green in 57s. Visual verify deferred to user — picker should now show: idle empty stage + grid below; hover thumbnail → stage card preview; click → preview persists + stat block + FLIP appear; NVM → back to idle; FLIP click → horizontal-perspective Y-axis rotation w. polarity content swap mid-animation. Polarity-themed colour styles (levity inverted palette / gravity stark contrast / per-polarity text-shadows) now apply on my-sign matching the room sig-select look

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

@@ -615,11 +615,16 @@ html:has(.sig-backdrop) {
     }
 }
 
-// ─── My Sign picker — FLIP btn (polarity toggle) ──────────────────────────────
-// Bottom-left corner of the stage card, mirroring game_kit.html's
-// `.fan-flip-btn` placement convention (per [[sprint-my-sign-picker-may18h]]).
-// SPIN (orientation 180° rotation) stays in `.sig-stat-block` — the FLIP btn
-// here toggles polarity (data-polarity attr + persisted significator_reversed).
+// ─── 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).
+.my-sign-page {
+    --sig-card-w: clamp(140px, 36vw, 220px);
+}
+
 .my-sign-flip-btn {
     position: absolute;
     z-index: 25;
@@ -629,6 +634,13 @@ html:has(.sig-backdrop) {
     // flex-start, anchored to the stage's left padding).
     left: calc(1.5rem + 0.4rem);
     margin: 0;
+    display: none;
+}
+
+// FLIP btn appears only when the stage is frozen (post-click). 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;
 }
 
 // ─── Mini card grid ───────────────────────────────────────────────────────────
@@ -818,7 +830,12 @@ html:has(.sig-backdrop) {
 // Levity (Leavened): --secUser bg / --priUser text — inverted, lighter feel.
 // Both mini-cards and the stage preview card follow the same rule.
 
-.sig-overlay[data-polarity="levity"] {
+// `.my-sign-page[data-polarity]` parallels `.sig-overlay[data-polarity]` —
+// same polarity-themed colour rules apply to the standalone Game Sign picker.
+// data-polarity lives on the page wrapper (not on .my-sign-stage) so descendant
+// `.sig-card` (in the grid, sibling to the stage) inherits the rules.
+.sig-overlay[data-polarity="levity"],
+.my-sign-page[data-polarity="levity"] {
     // Mini card: inverted palette. game-kit sets explicit colours on .fan-card-name
     // and .fan-card-corner that out-specifc the parent color, so re-target them here.
     .sig-card {
@@ -871,7 +888,8 @@ html:has(.sig-backdrop) {
     .sig-info-effect .card-ref { color: rgba(var(--quiUser), 1); }
     // Cursor colours live in .sig-cursor-float[data-role] rules (portal elements)
 }
-.sig-overlay[data-polarity="gravity"] {
+.sig-overlay[data-polarity="gravity"],
+.my-sign-page[data-polarity="gravity"] {
     // Stat block: invert priUser/secUser so gravity gets the same stark contrast as leavened cards
     .sig-stat-block {
         background: rgba(var(--secUser), 0.75);