rearranged Role select cards for final presentation ordering; unified Role select tooltip appearance; bottom row of Role select tooltips now appears below bottom row, not layered atop top row; clicking out of one Role select card tooltip and onto another Role select card specifically opens the next tooltip (former behavior made user click once to exit old tooltip, once more to open new one)

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

@@ -18,11 +18,11 @@ var RoleSelect = (function () {
     var _postTrayDelay = 3000;
 
     var ROLES = [
-        { code: "PC", name: "Player",     element: "Fire"  },
-        { code: "BC", name: "Builder",    element: "Stone" },
         { code: "SC", name: "Shepherd",   element: "Air"   },
-        { code: "AC", name: "Alchemist",  element: "Water" },
+        { code: "PC", name: "Player",     element: "Fire"  },
         { code: "NC", name: "Narrator",   element: "Time"  },
+        { code: "AC", name: "Alchemist",  element: "Water" },
+        { code: "BC", name: "Builder",    element: "Stone" },
         { code: "EC", name: "Economist",  element: "Space" },
     ];
 
@@ -177,7 +177,7 @@ var RoleSelect = (function () {
                 card.classList.add("guard-active");
                 window.showGuard(
                     card,
-                    "Start round 1 as<br>" + role.name + " (" + role.code + ") …?",
+                    "Start round 1<br>as " + role.name + " (" + role.code + ") …?",
                     function () {                       // confirm
                         card.classList.remove("guard-active");
                         selectRole(role.code);

src/static_src/scss/_base.scss

@@ -451,6 +451,7 @@ body {
         font-size: 0.85rem;
         color: rgba(var(--secUser), 0.9);
         text-align: center;
+        white-space: nowrap;
     }
 
     .guard-actions {

src/templates/core/base.html

@@ -84,7 +84,8 @@
                 var rawLeft = rect.left + rect.width / 2;
                 var cleft = Math.max(pw / 2 + 8, Math.min(rawLeft, window.innerWidth - pw / 2 - 8));
                 portal.style.left = Math.round(cleft) + 'px';
-                if (rect.top > 120) {
+                var cardCenterY = rect.top + rect.height / 2;
+                if (cardCenterY < window.innerHeight / 2) {
                     portal.style.top = Math.round(rect.top) + 'px';
                     portal.style.transform = 'translate(-50%, calc(-100% - 0.5rem))';
                 } else {
@@ -123,7 +124,11 @@
                 document.addEventListener('click', function (e) {
                     if (!portal.classList.contains('active')) return;
                     if (portal.contains(e.target)) return;
-                    e.stopPropagation();
+                    // If clicking a card, let the event through so the card's
+                    // own handler immediately opens the guard on the new target.
+                    // For any other outside click, stop propagation to prevent
+                    // the backdrop from also closing the fan.
+                    if (!e.target.closest('.card')) e.stopPropagation();
                     dismiss();
                 }, true);
                 // Intercept [data-confirm] buttons (capture phase, before form submits)