btn-primary label renames + stage-card polarity color refinements — two interleaved threads from one session, committing together since both touch sig + sea stage cards ; LABEL RENAMES: PICK SIGS → SCAN SIGS (room.html #id_pick_sigs_btn), PICK SKY → CAST SKY (room.html #id_pick_sky_btn × 2), PICK SEA → DRAW SEA (room.html #id_pick_sea_btn), TAKE SIG → SAVE SIG (sig-select.js _takeSigBtn.textContent × 2 callsites + section comment) — Element IDs (id_pick_sky_btn etc.), URL names (epic:pick_sigs, epic:pick_sky), and Python state enums (TableStatus.PICK_SKY, PICK_SEA, SIG_SELECT) intentionally retained as stable identifiers; the renamed text is purely the .btn-primary user-facing label ; FT + IT mentions of the old labels swept in test_game_room_select_{sig,sky,sea,role}.py, test_billboard.py, setup_sea_session.py mgmt cmd, apps/epic/{views,utils,models,tasks,tests/integrated/test_views}.py, SigSelectSpec.js, sky_overlay/sea_overlay/dashboard/sky.html, _card-deck.scss, _sky.scss — all docstring/comment references updated for cascade-grep cleanliness ; STAGE-CARD COLOR + CLASS REFINEMENTS (earlier in session): sig-stage card text colour split per polarity — gravity gets --terUser on .fan-card-name + .fan-card-reversal-{name,qualifier} + .sig-qualifier-{above,below}, levity gets --quiUser on the same five slots; all selectors prefixed w. .sig-stage-card to match the 0,4,0 specificity of the default .sig-stage .sig-stage-card .fan-card-face .sig-qualifier-* rule (without the prefix the polarity overrides lose the cascade — .sig-qualifier-below was visibly stuck on the default --quiUser) ; .stat-face-label gets polarity-inverse colours — gravity stat-block bg is --secUser (opposite of card's --priUser) so the label takes --quiUser to stay legible; levity is the symmetric flip (label = --terUser on --priUser stat-block bg) ; levity card title/qualifier drop-shadow swapped from rgba(0,0,0,…) → rgba(255,255,255,…) — dark drop reads as harsh smudge against the inverted-frame levity --secUser bg; applied to both sig-overlay[data-polarity="levity"] stage card AND sea-stage--levity via $_sea-title-shadow-levity (former shared $_sea-title-shadow split into per-polarity {levity,gravity} variants) ; reversal-face class/content alignment so each .fan-card-reversal-* class always carries its semantic content — DOM order per arcana type controls visual layout after the 180° SPIN (DOM-second appears visually on top): Major → title in .fan-card-reversal-name @ DOM-second (visually top after spin), qualifier in .fan-card-reversal-qualifier @ DOM-first; Non-major → title in .fan-card-reversal-name @ DOM-first (visually bottom after spin), qualifier in .fan-card-reversal-qualifier @ DOM-second (preserves the original "qualifier word reads first after spin" layout for Middle/Minor arcana — e.g. "Relieving / Eight of Crowns" not "Eight of Crowns / Relieving") ; _tarot_fan.html renders per-arcana DOM order directly (Django template branches handle both layouts); sig + sea overlays render a fixed two-<p> skeleton (one DOM order) so stage-card.js's populator dynamically rewrites the two <p>s' className per arcana — Major/override branch flips DOM-second to .fan-card-reversal-name + content, DOM-first to .fan-card-reversal-qualifier; non-major branch keeps DOM-first as .fan-card-reversal-name + title, DOM-second as .fan-card-reversal-qualifier + reversalQualifier-or-polarity-fallback ; SigSelectSpec.js + SeaDealSpec.js fixtures + Major reversed-face assertion updated for the new semantic — TDD

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

@@ -827,16 +827,28 @@ html:has(.sig-backdrop) {
         .fan-card-name      { color: rgba(var(--quiUser), 1); }
         .fan-card-arcana    { color: rgba(var(--priUser), 1); }
     }
-    // Polarity qualifier: same colour as the card title in this context
-    .sig-qualifier-above,
-    .sig-qualifier-below { color: rgba(var(--quiUser), 1); }
-    // Upright + reversal title glow — levity
+    // Polarity title + qualifier text: --quiUser for levity (paired w. gravity's --terUser).
+    // All five selectors prefixed w. .sig-stage-card to match (or beat) the 0,4,0 specificity
+    // of the default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule —
+    // without the prefix the polarity color loses the cascade on .sig-qualifier-*.
+    .sig-stage-card .fan-card-name,
+    .sig-stage-card .fan-card-reversal-name,
+    .sig-stage-card .fan-card-reversal-qualifier,
+    .sig-stage-card .sig-qualifier-above,
+    .sig-stage-card .sig-qualifier-below { color: rgba(var(--quiUser), 1); }
+    // Stat-face label: levity stat-block bg is --priUser (opposite of levity card's
+    // --secUser bg), so the label takes the gravity-card text color (--terUser) to
+    // stay legible against the dark stat-block.
+    .sig-stat-block .stat-face-label { color: rgba(var(--terUser), 1); }
+    // Upright + reversal title glow — levity. Drop-shadow is WHITE here (was 0,0,0
+     // at 0.55) because the inverted-frame levity card uses a light --secUser bg,
+     // so a dark drop shadow reads as harsh smudge under the --quiUser title text.
     .sig-stage-card .fan-card-name,
     .sig-stage-card .sig-qualifier-above,
     .sig-stage-card .sig-qualifier-below,
     .sig-stage-card .fan-card-reversal-name,
     .sig-stage-card .fan-card-reversal-qualifier {
-        text-shadow: 0 1px 1px rgba(0,0,0,0.55), 0 0 0.55rem rgba(var(--ninUser), 0.7);
+        text-shadow: 0 1px 1px rgba(255,255,255,0.55), 0 0 0.55rem rgba(var(--ninUser), 0.7);
     }
     // card-ref spans inside the caution tooltip — must match the base rule's
     // .sig-stat-block .sig-info-effect .card-ref specificity (0,3,0) to win.
@@ -853,9 +865,18 @@ html:has(.sig-backdrop) {
     // Caution tooltip: --tooltip-bg is black so priUser text (dark) would be invisible —
     // override to secUser (light) so body text reads against the dark backdrop.
     .sig-info { color: rgba(var(--secUser), 1); }
-    // Polarity qualifier: terUser for gravity (quiUser is levity's equivalent)
-    .sig-qualifier-above,
-    .sig-qualifier-below { color: rgba(var(--terUser), 1); }
+    // Polarity title + qualifier text: --terUser for gravity (paired w. levity's --quiUser).
+    // All five selectors prefixed w. .sig-stage-card to meet the 0,4,0 specificity of the
+    // default `.sig-stage .sig-stage-card .fan-card-face .sig-qualifier-*` rule.
+    .sig-stage-card .fan-card-name,
+    .sig-stage-card .fan-card-reversal-name,
+    .sig-stage-card .fan-card-reversal-qualifier,
+    .sig-stage-card .sig-qualifier-above,
+    .sig-stage-card .sig-qualifier-below { color: rgba(var(--terUser), 1); }
+    // Stat-face label: gravity stat-block bg is --secUser (opposite of gravity card's
+    // --priUser bg), so the label takes the levity-card text color (--quiUser) to
+    // stay legible against the lighter stat-block.
+    .sig-stat-block .stat-face-label { color: rgba(var(--quiUser), 1); }
     // Upright + reversal title glow — gravity
     .sig-stage-card .fan-card-name,
     .sig-stage-card .sig-qualifier-above,
@@ -935,7 +956,7 @@ html:has(.sig-backdrop) {
     #id_room_menu { right: 2.5rem; }
 }
 
-// ── PICK SEA overlay ─────────────────────────────────────────────────────────
+// ── DRAW SEA overlay ─────────────────────────────────────────────────────────
 // Mirrors .sky-* structure but with columns reversed:
 //   left = transparent (Celtic Cross card positions)
 //   right = rgba(--priUser) opaque (spread select)
@@ -1548,14 +1569,17 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
     100% { transform: perspective(600px) rotateY(0deg)   scale(1);    opacity: 1; }
 }
 
-// Sea stage card title — polarity-specific colour + shared glow
-$_sea-title-shadow: 1px 1px 0 rgba(0,0,0,1), 0 0 0.25rem rgba(var(--ninUser), 0.25);
+// Sea stage card title — polarity-specific colour + glow. Drop shadow polarity-split:
+// levity card has a light --secUser bg so a dark drop reads as smudge under the
+// --quiUser title; gravity card is dark --priUser bg so the dark drop reads clean.
+$_sea-title-shadow-levity:  1px 1px 0 rgba(255,255,255,1), 0 0 0.25rem rgba(var(--ninUser), 0.25);
+$_sea-title-shadow-gravity: 1px 1px 0 rgba(0,0,0,1),       0 0 0.25rem rgba(var(--ninUser), 0.25);
 $_sea-title-els: '.fan-card-name, .sig-qualifier-above, .sig-qualifier-below, .fan-card-reversal-name, .fan-card-reversal-qualifier';
 
 .sea-stage--levity .sea-stage-card {
     @include stage-card-polarity(
         $titles-color: rgba(var(--quiUser), 1),
-        $text-shadow:  $_sea-title-shadow,
+        $text-shadow:  $_sea-title-shadow-levity,
         $invert-frame: true,
     );
     color: rgba(var(--priUser), 1);
@@ -1565,7 +1589,7 @@ $_sea-title-els: '.fan-card-name, .sig-qualifier-above, .sig-qualifier-below, .f
 .sea-stage--gravity .sea-stage-card {
     @include stage-card-polarity(
         $titles-color: rgba(var(--terUser), 1),
-        $text-shadow:  $_sea-title-shadow,
+        $text-shadow:  $_sea-title-shadow-gravity,
     );
 }
 

src/static_src/scss/_sky.scss

@@ -1,6 +1,6 @@
 // ─── Sky (Pick Sky) overlay ────────────────────────────────────────────────
 // Gaussian backdrop + centred modal, matching the gate/sig overlay pattern.
-// Open state: html.sky-open (added by JS on PICK SKY click).
+// Open state: html.sky-open (added by JS on CAST SKY click).
 //
 // Layout: header / two-column body (form | wheel) / footer
 // Collapses to stacked single-column below 600 px.
@@ -956,7 +956,7 @@ body[class*="-light"] #id_sky_tooltip_2 {
 }
 
 // DEL btn pinned at the wheel center — appears wherever a wheel is shown
-// (Dashsky form#id_sky_delete_form, PICK SKY overlay #id_sky_delete_btn,
+// (Dashsky form#id_sky_delete_form, CAST SKY overlay #id_sky_delete_btn,
 // My Sky applet #id_applet_sky_delete_btn). Anchored to .sky-wheel-col /
 // the applet section (both position:relative) so the btn sits over the SVG's
 // geometric center regardless of the surrounding layout.
@@ -1021,7 +1021,7 @@ body[class*="-light"] #id_sky_tooltip_2 {
     overflow-y: visible;
 }
 
-// The (max-width:600px) block (written for the in-room PICK SKY modal where
+// The (max-width:600px) block (written for the in-room CAST SKY modal where
 // form-col is flex-row) sets align-self:flex-end on the btn — that's "right"
 // once we flip to flex-column. Reset.
 .sky-page .sky-form-col > #id_sky_confirm {

src/static_src/tests/SigSelectSpec.js

@@ -548,14 +548,14 @@ describe("SigSelect", () => {
                 .toBe(card.dataset.nameTitle);
         });
 
-        it("major arcana reversed face: title, in qualifier slot (first after spin); qualifier in name slot (second)", () => {
+        it("major arcana reversed face: title in name slot (visually top after spin); qualifier in qualifier slot (visually bottom)", () => {
             makeFixture({ polarity: "levity", userRole: "PC" });
             card.dataset.arcana = "Major Arcana";
             card.dataset.nameTitle = "The Schizo";
             hover();
-            // DOM-second element appears first after card spins — so title goes in qualifier slot
-            expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("The Schizo,");
-            expect(stageCard.querySelector(".fan-card-reversal-name").textContent).toBe("Elevated");
+            // Class matches semantic content: title → .fan-card-reversal-name, qualifier → .fan-card-reversal-qualifier
+            expect(stageCard.querySelector(".fan-card-reversal-name").textContent).toBe("The Schizo,");
+            expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("Elevated");
         });
 
         it("non-major without data-reversal-qualifier: qualifier mirrors polarity, name repeats card title", () => {
@@ -812,7 +812,7 @@ describe("SigSelect", () => {
 
     // ── polarity_room_done → tray sequence ─────────────────────────────────── //
     //
-    // After all 3 gamers in the user's polarity confirm TAKE SIG and the
+    // After all 3 gamers in the user's polarity confirm SAVE SIG and the
     // 12s countdown expires, the server fires room:polarity_room_done. The
     // sig-select handler should: (1) play the tray sequence — Tray.placeSig
     // with the user's selected stage card; (2) on Tray.placeSig's completion
@@ -876,7 +876,7 @@ describe("SigSelect", () => {
         it("does NOT add the waiting msg when pick_sky_btn is already revealed", () => {
             // pick_sky_available may fire DURING the tray sequence (other
             // polarity finishes first). When the tray callback then hangs +
-            // dismisses, _settle must check whether PICK SKY is up and skip
+            // dismisses, _settle must check whether CAST SKY is up and skip
             // the "Levity appraising…" / "Gravity settling…" message so it
             // doesn't co-exist w. the btn.
             const btn = document.createElement("button");