ensured .fa-ban next to empty seat changes to .fa-circle-check at the same time that .fa-chair glows & the pos circle fades out (i.e., when the gamer 'sits') not during or after the role card deposits itself in the tray; minor styling fixes for title h2, incl. text-shadow attr values when selected palette ends in *-light & opacity increases

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

@@ -58,9 +58,13 @@ var RoleSelect = (function () {
             stack.dataset.starterRoles = current ? current + "," + roleCode : roleCode;
         }
 
-        // Mark seat as actively being claimed (glow state)
+        // Mark seat as actively being claimed (glow state) and swap ban → check immediately
         var activePos = document.querySelector('.table-seat[data-role="' + roleCode + '"]');
-        if (activePos) activePos.classList.add('active');
+        if (activePos) {
+            activePos.classList.add('active');
+            var ban = activePos.querySelector('.fa-ban');
+            if (ban) { ban.classList.remove('fa-ban'); ban.classList.add('fa-circle-check'); }
+        }
 
         // Immediately fade out the gate-slot circle for the current turn's slot
         var activeSlot = stack ? stack.dataset.activeSlot : null;
@@ -104,8 +108,6 @@ var RoleSelect = (function () {
                             if (seatedPos) {
                                 seatedPos.classList.remove('active');
                                 seatedPos.classList.add('role-confirmed');
-                                var ban = seatedPos.querySelector('.fa-ban');
-                                if (ban) { ban.classList.remove('fa-ban'); ban.classList.add('fa-circle-check'); }
                             }
                             // Hold _animationPending through the post-tray pause so any
                             // turn_changed WS event that arrives now is still deferred.

src/static_src/scss/_base.scss

@@ -147,19 +147,19 @@ body {
                 
                 h2 {
                     font-size: 3rem;
-                    color: rgba(var(--secUser), 0.6);
+                    color: rgba(var(--secUser), 0.75);
                     margin-bottom: 1rem;
                     text-align: justify;
                     text-align-last: justify;
                     text-justify: inter-character;
                     text-transform: uppercase;
                     text-shadow:
-                        1px 1px 0 rgba(255, 255, 255, 0.125),       // highlight (up-left)
+                        // 1px 1px 0 rgba(255, 255, 255, 0.125),       // highlight (up-left)
-                        -0.125rem -0.125rem 0 rgba(0, 0, 0, 0.8)    // shadow (down-right)
+                        var(--title-shadow-offset) var(--title-shadow-offset) 0 rgba(0, 0, 0, 0.8)    // shadow (down-right)
                     ;
 
                     span {
-                        color: rgba(var(--quaUser), 0.6);
+                        color: rgba(var(--quaUser), 0.75);
                     }
                 }
             }

src/static_src/scss/rootvars.scss

@@ -221,6 +221,7 @@
 
     /* Component tokens */
     --tooltip-bg: 0, 0, 0;
+    --title-shadow-offset: -0.125rem;
 
     /* Inferno Palette (4 per) */
     // mist (Elpis's Lethe)
@@ -430,6 +431,7 @@
 /* Light palette overrides */
 body[class*="-light"] {
     --tooltip-bg: 255, 255, 255;
+    --title-shadow-offset: 0.125rem;
 }
 
 /* Palette Classes */