Sig Select countdown numeral: enlarge via a class so it doubles at every breakpoint — TDD

The 12s countdown numeral set its size with an inline style.fontSize='2em',
but .btn-primary carries `font-size: 0.625rem !important` inside its small
landscape/short-portrait down-size media query — and an !important declaration
beats an inline style. So on phones / short viewports the numeral stayed
button-sized instead of doubling.

Fix: sig-select.js now toggles a `.sig-take-sig-btn--counting` class instead of
the inline font-size (in _showCountdown / _hideCountdown / the unready path),
and a new `.sig-stage .sig-take-sig-btn.sig-take-sig-btn--counting` rule in
_card-deck.scss re-asserts `font-size: 2em !important` at (0,3,0) specificity —
strictly beating the (0,2,0) btn-primary media-query !important at all queries.
em stays parent-relative so the doubling tracks the stage font across sizes.

2 Jasmine specs (class present + no inline override on show; class cleared on
countdown_cancel) added to SigSelectSpec; SpecRunner green; SCSS compiles.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/apps/epic/static/apps/epic/sig-select.js

@@ -370,7 +370,7 @@ var SigSelect = (function () {
                     if (_countdownTimer !== null) {
                         clearInterval(_countdownTimer);
                         _countdownTimer = null;
-                        if (_takeSigBtn) _takeSigBtn.style.fontSize = '';
+                        if (_takeSigBtn) _takeSigBtn.classList.remove('sig-take-sig-btn--counting');
                     }
                     if (_takeSigBtn) _takeSigBtn.textContent = 'SAVE SIG';
                     _stopWaitNoGlow();
@@ -477,7 +477,12 @@ var SigSelect = (function () {
         _stopWaitNoGlow();
         if (_takeSigBtn) {
             _takeSigBtn.textContent = _countdownSecondsLeft;
-            _takeSigBtn.style.fontSize = '2em';
+            // Enlarge via a class, NOT inline font-size: the .btn-primary
+            // down-size media query (font-size !important on small landscape/
+            // portrait) out-!importants an inline 2em, so the numeral stayed
+            // button-sized on phones. The .sig-take-sig-btn--counting rule
+            // re-asserts the doubling with matching !important + specificity.
+            _takeSigBtn.classList.add('sig-take-sig-btn--counting');
         }
         _startCountdownGlow();
         if (_countdownTimer !== null) clearInterval(_countdownTimer);
@@ -499,7 +504,7 @@ var SigSelect = (function () {
         }
         _stopCountdownGlow();
         if (_takeSigBtn) {
-            _takeSigBtn.style.fontSize = '';
+            _takeSigBtn.classList.remove('sig-take-sig-btn--counting');
             if (_isReady) {
                 // Countdown cancelled by another gamer — restore WAIT NVM state
                 _takeSigBtn.textContent = 'WAIT NVM';

src/static/tests/SigSelectSpec.js

@@ -888,6 +888,25 @@ describe("SigSelect", () => {
             expect(takeSigBtn.textContent).toBe("8");
         });
 
+        it("enlarges the numeral via the --counting class (not a fragile inline 2em)", () => {
+            // The .btn-primary media-query font-size !important beats an inline
+            // 2em on small queries; the class lets SCSS re-assert the doubling.
+            makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
+            takeSigBtn = document.getElementById("id_take_sig_btn");
+            expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(true);
+            expect(takeSigBtn.style.fontSize).toBe("");  // no inline override
+        });
+
+        it("clears the --counting class when the countdown is cancelled", () => {
+            makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
+            takeSigBtn = document.getElementById("id_take_sig_btn");
+            expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(true);
+            window.dispatchEvent(new CustomEvent("room:countdown_cancel", {
+                detail: { polarity: "levity", seconds_remaining: 5 },
+            }));
+            expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(false);
+        });
+
         it("the restored numeral counts down each second", () => {
             makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
             takeSigBtn = document.getElementById("id_take_sig_btn");

src/static_src/scss/_card-deck.scss

@@ -665,6 +665,15 @@
 // 80% stage height × 5/8) via --sig-card-w CSS variable — libsass can't handle
 // container query units inside min().
 
+// The polarity-countdown numeral must read large at EVERY breakpoint. The
+// .btn-primary down-size media query (`font-size: 0.625rem !important` on small
+// landscape / short portrait) otherwise out-!importants the countdown's enlarge
+// and the numeral stayed button-sized on phones / short viewports. Re-assert the
+// 2em doubling with matching !important at (0,3,0) so it wins at all queries.
+.sig-stage .sig-take-sig-btn.sig-take-sig-btn--counting {
+    font-size: 2em !important;
+}
+
 .sig-stage {
     flex: 1;
     min-height: 0;

src/static_src/tests/SigSelectSpec.js

@@ -888,6 +888,25 @@ describe("SigSelect", () => {
             expect(takeSigBtn.textContent).toBe("8");
         });
 
+        it("enlarges the numeral via the --counting class (not a fragile inline 2em)", () => {
+            // The .btn-primary media-query font-size !important beats an inline
+            // 2em on small queries; the class lets SCSS re-assert the doubling.
+            makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
+            takeSigBtn = document.getElementById("id_take_sig_btn");
+            expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(true);
+            expect(takeSigBtn.style.fontSize).toBe("");  // no inline override
+        });
+
+        it("clears the --counting class when the countdown is cancelled", () => {
+            makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
+            takeSigBtn = document.getElementById("id_take_sig_btn");
+            expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(true);
+            window.dispatchEvent(new CustomEvent("room:countdown_cancel", {
+                detail: { polarity: "levity", seconds_remaining: 5 },
+            }));
+            expect(takeSigBtn.classList.contains("sig-take-sig-btn--counting")).toBe(false);
+        });
+
         it("the restored numeral counts down each second", () => {
             makeFixture({ reservations: '{"42":"PC"}', ready: true, countdownRemaining: 8 });
             takeSigBtn = document.getElementById("id_take_sig_btn");