Game Kit fan stage + FLIP/SPIN; sig/sea/fan refactor — TDD

- fan modal: stage block w. idle-reveal/careen-out; carousel shifts left so focused card sits left-of-center; SPIN rotates whole card via Element.animate(); FLIP toggles polarity (Levity ↔ Gravity) via perspective rotateY w. mid-flip repaint; SPIN state retained across FLIP; FLIP btn hover-revealed only when focused card or btn is hovered (:has)
- mobile breakpoints: --fan-card-w / --fan-card-h / --fan-stage-shift / --fan-carousel-step lifted to CSS vars on .tarot-fan-wrap; portrait ≤ 480px @ 150×230, landscape ≤ 500h @ 150×235; corners + face text/padding scale w. card width
- shared StageCard JS module (apps/epic/stage-card.js): fromDataset, populateCard, populateKeywords, buildInfoData, renderFyi — sig/sea/fan all delegate; ~150 lines de-duplicated
- shared @mixin stat-block-shared (SCSS) lifts duplicated stat-face / stat-keywords / sig-info rules; @mixin stage-card-polarity unifies sea-stage--levity/--gravity + fan[data-polarity] coloring
- model rename: TarotCard.reversal → reversal_qualifier (migration 0014); render-time fallback to current polarity's qualifier when blank
- class unification: .sig-info-open / .sea-info-open / .fyi-open → .fyi-open (on stat block); .sig-flip-btn / .sea-spin-btn / .fan-spin-btn → .spin-btn; same for .fyi-btn / .fyi-prev / .fyi-next
- custom combobox (apps/epic/combobox.js) replaces native <select> for PICK SEA spread picker — keyboard nav, click-outside-close, aria roles; Firefox/Chrome OS-rendered <option> ignored CSS
- Jasmine: FanStageSpec.js w. idle-reveal / population / SPIN / FYI / FLIP specs; sig + sea fixtures + IT view assertions updated for renamed classes
- 748 ITs + Jasmine green

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

src/static/tests/FanStageSpec.js

@@ -0,0 +1,308 @@
+describe("FanStage", () => {
+    let testDiv, dialog, fanContent, stageBlock, stageCard;
+
+    function makeCardEl({ id, suit_icon = '', corner_rank = 'I', name_group = '',
+                          name_title = 'The Magician', arcana = 'Major Arcana',
+                          correspondence = '', keywords_upright = 'will,focus,manifestation',
+                          keywords_reversed = 'manipulation,illusion',
+                          energies = '[]', operations = '[]',
+                          levity_qualifier = '', gravity_qualifier = '',
+                          reversal_qualifier = '' } = {}) {
+        return `<div class="fan-card"
+             data-index="${id}"
+             data-suit-icon="${suit_icon}"
+             data-corner-rank="${corner_rank}"
+             data-name-group="${name_group}"
+             data-name-title="${name_title}"
+             data-arcana="${arcana}"
+             data-correspondence="${correspondence}"
+             data-keywords-upright="${keywords_upright}"
+             data-keywords-reversed="${keywords_reversed}"
+             data-energies='${energies}'
+             data-operations='${operations}'
+             data-levity-qualifier="${levity_qualifier}"
+             data-gravity-qualifier="${gravity_qualifier}"
+             data-reversal-qualifier="${reversal_qualifier}">
+            <div class="fan-card-corner fan-card-corner--tl">
+                <span class="fan-corner-rank">${corner_rank}</span>
+            </div>
+            <div class="fan-card-face">
+                <div class="fan-card-face-upright">
+                    <p class="fan-card-name-group"></p>
+                    <p class="sig-qualifier-above"></p>
+                    <h3 class="fan-card-name">${name_title}</h3>
+                    <p class="sig-qualifier-below"></p>
+                </div>
+                <p class="fan-card-arcana">${arcana}</p>
+                <div class="fan-card-face-reversal">
+                    <p class="fan-card-reversal-qualifier"></p>
+                    <p class="fan-card-reversal-name"></p>
+                </div>
+            </div>
+            <div class="fan-card-corner fan-card-corner--br">
+                <span class="fan-corner-rank">${corner_rank}</span>
+            </div>
+        </div>`;
+    }
+
+    function makeFixture() {
+        testDiv = document.createElement("div");
+        testDiv.innerHTML = `
+            <dialog id="id_tarot_fan_dialog">
+                <div class="tarot-fan-wrap">
+                    <button id="id_fan_prev" class="fan-nav fan-nav--prev">&#8249;</button>
+                    <div id="id_fan_content" class="tarot-fan"></div>
+                    <div class="fan-stage-block sig-stat-block" id="id_fan_stage_block">
+                        <button class="btn btn-reverse spin-btn" type="button">SPIN</button>
+                        <button class="btn btn-info fyi-btn" type="button">FYI</button>
+                        <div class="stat-face stat-face--upright">
+                            <p class="stat-face-label">Emanation</p>
+                            <ul class="stat-keywords" id="id_fan_stat_upright"></ul>
+                        </div>
+                        <div class="stat-face stat-face--reversed">
+                            <p class="stat-face-label">Reversal</p>
+                            <ul class="stat-keywords" id="id_fan_stat_reversed"></ul>
+                        </div>
+                        <div class="sig-info" id="id_fan_fyi_panel" style="display:none">
+                            <div class="sig-info-header">
+                                <h4 class="sig-info-title"></h4>
+                                <p class="sig-info-type"></p>
+                            </div>
+                            <p class="sig-info-effect"></p>
+                            <span class="sig-info-index"></span>
+                        </div>
+                        <button class="btn btn-nav-left fyi-prev" type="button">PRV</button>
+                        <button class="btn btn-nav-right fyi-next" type="button">NXT</button>
+                    </div>
+                    <button id="id_fan_flip" class="btn btn-reveal fan-flip-btn" type="button">FLIP</button>
+                    <button id="id_fan_next" class="fan-nav fan-nav--next">&#8250;</button>
+                </div>
+            </dialog>
+            <button class="gk-deck-card" data-deck-id="1">Earthman</button>
+        `;
+        document.body.appendChild(testDiv);
+        dialog       = testDiv.querySelector("#id_tarot_fan_dialog");
+        fanContent   = testDiv.querySelector("#id_fan_content");
+        stageBlock   = testDiv.querySelector("#id_fan_stage_block");
+
+        // Pre-render two cards into fanContent so openFan's fetch can be skipped via _testOpen
+        fanContent.innerHTML =
+            makeCardEl({ id: 0, name_title: 'The Magician', corner_rank: 'I',
+                         levity_qualifier: 'Enlightened',
+                         gravity_qualifier: 'Engraven',
+                         keywords_upright: 'will,focus',
+                         keywords_reversed: 'manipulation',
+                         energies: '[{"type":"LIBIDO","effect":"Drive."}]',
+                         operations: '[{"type":"COVER","effect":"Shield."}]' }) +
+            makeCardEl({ id: 1, name_title: 'The High Priestess', corner_rank: 'II',
+                         levity_qualifier: 'Enlightened',
+                         gravity_qualifier: 'Engraven',
+                         keywords_upright: 'intuition,subconscious',
+                         keywords_reversed: 'secrets,disconnect' });
+
+        jasmine.clock().install();
+        GameKit._testInit();
+    }
+
+    afterEach(() => {
+        jasmine.clock().uninstall();
+        if (testDiv) testDiv.remove();
+    });
+
+    // ── Stage block reveal / hide ────────────────────────────────────────── //
+
+    describe("idle reveal", () => {
+        beforeEach(() => makeFixture());
+
+        it("starts with the stage block hidden (no .is-revealed)", () => {
+            GameKit._testOpen();
+            expect(stageBlock.classList.contains("is-revealed")).toBe(false);
+        });
+
+        it("adds .is-revealed after 500ms of idle", () => {
+            GameKit._testOpen();
+            jasmine.clock().tick(500);
+            expect(stageBlock.classList.contains("is-revealed")).toBe(true);
+        });
+
+        it("does NOT reveal before 500ms have elapsed", () => {
+            GameKit._testOpen();
+            jasmine.clock().tick(400);
+            expect(stageBlock.classList.contains("is-revealed")).toBe(false);
+        });
+
+        it("re-hides immediately on navigation, even after reveal", () => {
+            GameKit._testOpen();
+            jasmine.clock().tick(500);
+            expect(stageBlock.classList.contains("is-revealed")).toBe(true);
+            GameKit._testNavigate(1);
+            expect(stageBlock.classList.contains("is-revealed")).toBe(false);
+        });
+
+        it("restarts the idle timer after navigation", () => {
+            GameKit._testOpen();
+            jasmine.clock().tick(500);
+            GameKit._testNavigate(1);
+            jasmine.clock().tick(400);
+            expect(stageBlock.classList.contains("is-revealed")).toBe(false);
+            jasmine.clock().tick(100);
+            expect(stageBlock.classList.contains("is-revealed")).toBe(true);
+        });
+    });
+
+    // ── Stat block population from focused fan-card ──────────────────────── //
+
+    describe("stat block population", () => {
+        beforeEach(() => makeFixture());
+
+        it("populates upright keywords from data-keywords-upright of focused card", () => {
+            GameKit._testOpen();
+            const list = stageBlock.querySelector("#id_fan_stat_upright");
+            const items = list.querySelectorAll("li");
+            expect(items.length).toBe(2);
+            expect(items[0].textContent).toBe("will");
+            expect(items[1].textContent).toBe("focus");
+        });
+
+        it("populates reversed keywords from data-keywords-reversed of focused card", () => {
+            GameKit._testOpen();
+            const list = stageBlock.querySelector("#id_fan_stat_reversed");
+            const items = list.querySelectorAll("li");
+            expect(items.length).toBe(1);
+            expect(items[0].textContent).toBe("manipulation");
+        });
+
+        it("re-populates from the new focused card on navigation", () => {
+            GameKit._testOpen();
+            GameKit._testNavigate(1);
+            const items = stageBlock.querySelectorAll("#id_fan_stat_upright li");
+            expect(items.length).toBe(2);
+            expect(items[0].textContent).toBe("intuition");
+            expect(items[1].textContent).toBe("subconscious");
+        });
+    });
+
+    // ── SPIN button (.btn-reverse) ──────────────────────────────────────── //
+
+    describe("SPIN", () => {
+        beforeEach(() => makeFixture());
+
+        it("toggles .is-reversed on the stat block", () => {
+            GameKit._testOpen();
+            stageBlock.querySelector(".spin-btn").click();
+            expect(stageBlock.classList.contains("is-reversed")).toBe(true);
+        });
+
+        it("toggles back when clicked twice", () => {
+            GameKit._testOpen();
+            const spin = stageBlock.querySelector(".spin-btn");
+            spin.click(); spin.click();
+            expect(stageBlock.classList.contains("is-reversed")).toBe(false);
+        });
+
+        it("resets .is-reversed when navigating to a new card", () => {
+            GameKit._testOpen();
+            stageBlock.querySelector(".spin-btn").click();
+            expect(stageBlock.classList.contains("is-reversed")).toBe(true);
+            GameKit._testNavigate(1);
+            expect(stageBlock.classList.contains("is-reversed")).toBe(false);
+        });
+    });
+
+    // ── FYI button (.btn-info) ──────────────────────────────────────────── //
+
+    describe("FYI", () => {
+        beforeEach(() => makeFixture());
+
+        it("opens the FYI panel and disables SPIN+FYI buttons", () => {
+            GameKit._testOpen();
+            stageBlock.querySelector(".fyi-btn").click();
+            const panel = stageBlock.querySelector("#id_fan_fyi_panel");
+            expect(panel.style.display).toBe("flex");
+            expect(stageBlock.querySelector(".spin-btn").classList.contains("btn-disabled")).toBe(true);
+            expect(stageBlock.querySelector(".fyi-btn").classList.contains("btn-disabled")).toBe(true);
+        });
+
+        it("populates the panel with the first energy entry from data-energies", () => {
+            GameKit._testOpen();
+            stageBlock.querySelector(".fyi-btn").click();
+            const panel = stageBlock.querySelector("#id_fan_fyi_panel");
+            expect(panel.querySelector(".sig-info-type").textContent).toBe("LIBIDO");
+            expect(panel.querySelector(".sig-info-effect").innerHTML).toBe("Drive.");
+        });
+
+        it("PRV/NXT cycle through energies + operations", () => {
+            GameKit._testOpen();
+            stageBlock.querySelector(".fyi-btn").click();
+            stageBlock.querySelector(".fyi-next").click();
+            const panel = stageBlock.querySelector("#id_fan_fyi_panel");
+            expect(panel.querySelector(".sig-info-type").textContent).toBe("COVER");
+            expect(panel.querySelector(".sig-info-effect").innerHTML).toBe("Shield.");
+        });
+    });
+
+    // ── FLIP — polarity toggle (Levity ↔ Gravity) ──────────────────────────── //
+    //
+    // FLIP swaps polarity on the focused card with a perspective rotateY animation.
+    // The repaint fires at the 250ms midpoint via setTimeout (jasmine.clock fakes
+    // it). Element.animate() is called too — but tests assert side effects (the
+    // dataset.polarity attr + the qualifier text content), not the animation.
+
+    describe("FLIP", () => {
+        beforeEach(() => makeFixture());
+
+        function flipBtn() { return testDiv.querySelector("#id_fan_flip"); }
+        function activeCard() { return testDiv.querySelector(".fan-card--active"); }
+
+        it("starts with polarity = levity (the server-rendered default)", () => {
+            GameKit._testOpen();
+            jasmine.clock().tick(250);
+            expect(activeCard().dataset.polarity).toBe("levity");
+        });
+
+        it("toggles dataset.polarity to gravity at the midpoint after click", () => {
+            GameKit._testOpen();
+            flipBtn().click();
+            jasmine.clock().tick(250);
+            expect(activeCard().dataset.polarity).toBe("gravity");
+        });
+
+        it("repaints the upright qualifier slot with the gravity qualifier", () => {
+            GameKit._testOpen();
+            flipBtn().click();
+            jasmine.clock().tick(250);
+            const card = activeCard();
+            // Major arcana places qualifier in the BELOW slot.
+            expect(card.querySelector(".sig-qualifier-below").textContent).toBe("Engraven");
+        });
+
+        it("FLIPs back to levity on a second click", () => {
+            GameKit._testOpen();
+            flipBtn().click();
+            jasmine.clock().tick(500);
+            flipBtn().click();
+            jasmine.clock().tick(250);
+            expect(activeCard().dataset.polarity).toBe("levity");
+        });
+
+        it("retains SPIN state across a FLIP (.stage-card--reversed survives)", () => {
+            GameKit._testOpen();
+            stageBlock.querySelector(".spin-btn").click();   // SPIN first
+            expect(activeCard().classList.contains("stage-card--reversed")).toBe(true);
+            flipBtn().click();
+            jasmine.clock().tick(500);
+            expect(activeCard().classList.contains("stage-card--reversed")).toBe(true);
+        });
+
+        it("ignores a second click while a flip is in flight", () => {
+            GameKit._testOpen();
+            flipBtn().click();
+            // Mid-animation second click — should be ignored
+            jasmine.clock().tick(100);
+            flipBtn().click();
+            jasmine.clock().tick(150);  // total = 250ms (one repaint window)
+            // Only one polarity swap happened (levity → gravity), not two.
+            expect(activeCard().dataset.polarity).toBe("gravity");
+        });
+    });
+});

src/static/tests/SeaDealSpec.js

@@ -7,7 +7,7 @@ describe("SeaDeal", () => {
         corner_rank: "Q", suit_icon: "fa-crown",
         name_group: "", name_title: "Queen of Crowns",
         levity_qualifier: "Elevated", gravity_qualifier: "Graven",
-        reversal: "Vacant",
+        reversal_qualifier: "Vacant",
         keywords_upright: ["nurturing", "practical", "abundance"],
         keywords_reversed: ["financial dependence", "smothering"],
         energies:    [{ type: "LIBIDO",  effect: "Energy entry." }],
@@ -72,8 +72,8 @@ describe("SeaDeal", () => {
                             </div>
                         </div>
                         <div class="sig-stat-block sea-stat-block">
-                            <button class="btn btn-reverse sea-spin-btn" type="button">SPIN</button>
-                            <button class="btn btn-info sea-fyi-btn" type="button">FYI</button>
+                            <button class="btn btn-reverse spin-btn" type="button">SPIN</button>
+                            <button class="btn btn-info fyi-btn" type="button">FYI</button>
                             <div class="stat-face stat-face--upright">
                                 <p class="stat-face-label">Emanation</p>
                                 <ul class="stat-keywords" id="id_sea_stat_upright"></ul>
@@ -90,8 +90,8 @@ describe("SeaDeal", () => {
                                 <p class="sig-info-effect"></p>
                                 <span class="sig-info-index"></span>
                             </div>
-                            <button class="btn btn-nav-left sea-fyi-prev" type="button">PRV</button>
-                            <button class="btn btn-nav-right sea-fyi-next" type="button">NXT</button>
+                            <button class="btn btn-nav-left fyi-prev" type="button">PRV</button>
+                            <button class="btn btn-nav-right fyi-next" type="button">NXT</button>
                         </div>
                     </div>
                 </div>
@@ -197,17 +197,17 @@ describe("SeaDeal", () => {
         });
 
         it("toggles is-reversed on stat block", () => {
-            testDiv.querySelector(".sea-spin-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            testDiv.querySelector(".spin-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(statBlock.classList.contains("is-reversed")).toBe(true);
         });
 
         it("toggles stage-card--reversed on stage card", () => {
-            testDiv.querySelector(".sea-spin-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            testDiv.querySelector(".spin-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(stageCard.classList.contains("stage-card--reversed")).toBe(true);
         });
 
         it("second SPIN click restores upright", () => {
-            const btn = testDiv.querySelector(".sea-spin-btn");
+            const btn = testDiv.querySelector(".spin-btn");
             btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
             btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(statBlock.classList.contains("is-reversed")).toBe(false);
@@ -223,23 +223,23 @@ describe("SeaDeal", () => {
         });
 
         it("FYI click shows the info panel", () => {
-            testDiv.querySelector(".sea-fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            testDiv.querySelector(".fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(testDiv.querySelector("#id_sea_fyi_panel").style.display).not.toBe("none");
         });
 
         it("shows first energy entry title as 'Energy'", () => {
-            testDiv.querySelector(".sea-fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            testDiv.querySelector(".fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(testDiv.querySelector(".sig-info-title").textContent).toBe("Energy");
         });
 
         it("shows first entry type", () => {
-            testDiv.querySelector(".sea-fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            testDiv.querySelector(".fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(testDiv.querySelector(".sig-info-type").textContent).toBe("LIBIDO");
         });
 
         it("NXT advances to operation entry", () => {
-            testDiv.querySelector(".sea-fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
-            testDiv.querySelector(".sea-fyi-next").dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            testDiv.querySelector(".fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
+            testDiv.querySelector(".fyi-next").dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(testDiv.querySelector(".sig-info-title").textContent).toBe("Operation");
             expect(testDiv.querySelector(".sig-info-type").textContent).toBe("COVER");
         });

src/static/tests/SigSelectSpec.js

@@ -30,8 +30,8 @@ describe("SigSelect", () => {
                             </div>
                         </div>
                         <div class="sig-stat-block">
-                            <button class="btn btn-reverse sig-flip-btn" type="button">SPIN</button>
-                            <button class="btn btn-info sig-info-btn" type="button">FYI</button>
+                            <button class="btn btn-reverse spin-btn" type="button">SPIN</button>
+                            <button class="btn btn-info fyi-btn" type="button">FYI</button>
                             <div class="stat-face stat-face--upright">
                                 <p class="stat-face-label">Emanation</p>
                                 <ul class="stat-keywords" id="id_stat_keywords_upright"></ul>
@@ -40,8 +40,8 @@ describe("SigSelect", () => {
                                 <p class="stat-face-label">Reversal</p>
                                 <ul class="stat-keywords" id="id_stat_keywords_reversed"></ul>
                             </div>
-                            <button class="btn btn-nav-left sig-info-prev" type="button">&#9664;</button>
-                            <button class="btn btn-nav-right sig-info-next" type="button">&#9654;</button>
+                            <button class="btn btn-nav-left fyi-prev" type="button">&#9664;</button>
+                            <button class="btn btn-nav-right fyi-next" type="button">&#9654;</button>
                             <div class="sig-info" id="id_sig_info">
                                 <div class="sig-info-header">
                                     <h4 class="sig-info-title"></h4>
@@ -67,7 +67,7 @@ describe("SigSelect", () => {
                              data-operations="[]"
                              data-levity-qualifier="Elevated"
                              data-gravity-qualifier="Graven"
-                             data-reversal="">
+                             data-reversal-qualifier="">
                             <div class="fan-card-corner fan-card-corner--tl">
                                 <span class="fan-corner-rank">K</span>
                             </div>
@@ -211,24 +211,24 @@ describe("SigSelect", () => {
             infoTitle  = testDiv.querySelector(".sig-info-title");
             infoType   = testDiv.querySelector(".sig-info-type");
             infoIndex  = testDiv.querySelector(".sig-info-index");
-            infoPrev   = testDiv.querySelector(".sig-info-prev");
-            infoNext   = testDiv.querySelector(".sig-info-next");
-            infoBtn    = testDiv.querySelector(".sig-info-btn");
+            infoPrev   = testDiv.querySelector(".fyi-prev");
+            infoNext   = testDiv.querySelector(".fyi-next");
+            infoBtn    = testDiv.querySelector(".fyi-btn");
         });
 
         function hover() { card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true })); }
         function openFYI() { hover(); infoBtn.dispatchEvent(new MouseEvent("click", { bubbles: true })); }
 
-        it("FYI click adds .sig-info-open to the stage", () => {
+        it("FYI click adds .fyi-open to the stat block", () => {
             openFYI();
-            expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(true);
+            expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(true);
         });
 
         it("FYI click when btn-disabled does not toggle", () => {
             openFYI();
             expect(infoBtn.classList.contains("btn-disabled")).toBe(true);
             infoBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-            expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(true);
+            expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(true);
         });
 
         it("shows placeholder when both energies and operations are empty", () => {
@@ -370,9 +370,9 @@ describe("SigSelect", () => {
 
         it("card mouseleave closes the info panel", () => {
             openFYI();
-            expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(true);
+            expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(true);
             card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
-            expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(false);
+            expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(false);
         });
 
         it("opening again resets to first entry", () => {
@@ -389,7 +389,7 @@ describe("SigSelect", () => {
 
         it("opening info panel adds .btn-disabled and swaps SPIN/FYI labels to ×", () => {
             openFYI();
-            var flipBtn = testDiv.querySelector(".sig-flip-btn");
+            var flipBtn = testDiv.querySelector(".spin-btn");
             expect(flipBtn.classList.contains("btn-disabled")).toBe(true);
             expect(infoBtn.classList.contains("btn-disabled")).toBe(true);
             expect(flipBtn.textContent).toBe("×");
@@ -397,7 +397,7 @@ describe("SigSelect", () => {
         });
 
         it("closing info panel removes .btn-disabled and restores SPIN/FYI labels", () => {
-            var flipBtn = testDiv.querySelector(".sig-flip-btn");
+            var flipBtn = testDiv.querySelector(".spin-btn");
             var origFlip = flipBtn.textContent;
             var origInfo = infoBtn.textContent;
             openFYI();
@@ -411,14 +411,14 @@ describe("SigSelect", () => {
         it("clicking the info panel closes it", () => {
             openFYI();
             infoEffect.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-            expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(false);
+            expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(false);
         });
 
         it("SPIN click when info open (btn-disabled) does nothing", () => {
             openFYI();
-            var flipBtn = testDiv.querySelector(".sig-flip-btn");
+            var flipBtn = testDiv.querySelector(".spin-btn");
             flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-            expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(true);
+            expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(true);
             expect(statBlock.classList.contains("is-reversed")).toBe(false);
         });
     });
@@ -447,14 +447,14 @@ describe("SigSelect", () => {
 
         it("SPIN click adds .is-reversed to the stat block", () => {
             card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
-            var flipBtn = statBlock.querySelector(".sig-flip-btn");
+            var flipBtn = statBlock.querySelector(".spin-btn");
             flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(statBlock.classList.contains("is-reversed")).toBe(true);
         });
 
         it("second SPIN click removes .is-reversed", () => {
             card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
-            var flipBtn = statBlock.querySelector(".sig-flip-btn");
+            var flipBtn = statBlock.querySelector(".spin-btn");
             flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
             flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(statBlock.classList.contains("is-reversed")).toBe(false);
@@ -462,7 +462,7 @@ describe("SigSelect", () => {
 
         it("hovering a new card resets .is-reversed", () => {
             card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
-            statBlock.querySelector(".sig-flip-btn").dispatchEvent(
+            statBlock.querySelector(".spin-btn").dispatchEvent(
                 new MouseEvent("click", { bubbles: true })
             );
             expect(statBlock.classList.contains("is-reversed")).toBe(true);
@@ -491,7 +491,7 @@ describe("SigSelect", () => {
         it("SPIN click adds .stage-card--reversed to the stage card", () => {
             makeFixture();
             hover();
-            statBlock.querySelector(".sig-flip-btn")
+            statBlock.querySelector(".spin-btn")
                 .dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(stageCard.classList.contains("stage-card--reversed")).toBe(true);
         });
@@ -499,7 +499,7 @@ describe("SigSelect", () => {
         it("second SPIN click removes .stage-card--reversed", () => {
             makeFixture();
             hover();
-            var flipBtn = statBlock.querySelector(".sig-flip-btn");
+            var flipBtn = statBlock.querySelector(".spin-btn");
             flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
             flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(stageCard.classList.contains("stage-card--reversed")).toBe(false);
@@ -508,7 +508,7 @@ describe("SigSelect", () => {
         it("hovering a new card resets .stage-card--reversed", () => {
             makeFixture();
             hover();
-            statBlock.querySelector(".sig-flip-btn")
+            statBlock.querySelector(".spin-btn")
                 .dispatchEvent(new MouseEvent("click", { bubbles: true }));
             expect(stageCard.classList.contains("stage-card--reversed")).toBe(true);
             card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
@@ -516,9 +516,9 @@ describe("SigSelect", () => {
             expect(stageCard.classList.contains("stage-card--reversed")).toBe(false);
         });
 
-        it("non-major with data-reversal: reversal-qualifier = suit word, reversal-name = card name", () => {
+        it("non-major with data-reversal-qualifier: reversal-qualifier = suit word, reversal-name = card name", () => {
             makeFixture();
-            card.dataset.reversal = "Nervous";
+            card.dataset.reversalQualifier = "Nervous";
             hover();
             expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("Nervous");
             expect(stageCard.querySelector(".fan-card-reversal-name").textContent)
@@ -539,9 +539,9 @@ describe("SigSelect", () => {
                 .toBe("Graven");
         });
 
-        it("non-major with data-reversal: suit qualifier on own line, upright name repeated below", () => {
+        it("non-major with data-reversal-qualifier: suit qualifier on own line, upright name repeated below", () => {
             makeFixture({ polarity: "levity", userRole: "PC" });
-            card.dataset.reversal = "Vacant";
+            card.dataset.reversalQualifier = "Vacant";
             hover();
             expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("Vacant");
             expect(stageCard.querySelector(".fan-card-reversal-name").textContent)
@@ -558,7 +558,7 @@ describe("SigSelect", () => {
             expect(stageCard.querySelector(".fan-card-reversal-name").textContent).toBe("Elevated");
         });
 
-        it("non-major without data-reversal: qualifier mirrors polarity, name repeats card title", () => {
+        it("non-major without data-reversal-qualifier: qualifier mirrors polarity, name repeats card title", () => {
             makeFixture({ polarity: "levity", userRole: "PC" });
             // fixture default: Minor Arcana, no reversal word
             hover();

src/static/tests/SpecRunner.html

@@ -23,6 +23,7 @@
     <script src="TraySpec.js"></script>
     <script src="SigSelectSpec.js"></script>
     <script src="SeaDealSpec.js"></script>
+    <script src="FanStageSpec.js"></script>
     <script src="NatusWheelSpec.js"></script>
     <script src="NoteSpec.js"></script>
     <script src="NotePageSpec.js"></script>
@@ -30,10 +31,12 @@
     <script src="/static/apps/dashboard/dashboard.js"></script>
     <script src="/static/apps/dashboard/note.js"></script>
     <script src="/static/apps/billboard/note-page.js"></script>
+    <script src="/static/apps/epic/stage-card.js"></script>
     <script src="/static/apps/epic/role-select.js"></script>
     <script src="/static/apps/epic/tray.js"></script>
     <script src="/static/apps/epic/sig-select.js"></script>
     <script src="/static/apps/epic/sea.js"></script>
+    <script src="/static/apps/gameboard/game-kit.js"></script>
     <script src="/static/apps/gameboard/d3.min.js"></script>
     <script src="/static/apps/gameboard/natus-wheel.js"></script>
     <!-- Jasmine env config (optional) -->