From 74f63a77213dc7c1d6504801b9c5dd10308b74af Mon Sep 17 00:00:00 2001
From: Disco DeDisco <adamcraighamilton@gmail.com>
Date: Sun, 5 Apr 2026 01:23:20 -0400
Subject: [PATCH] 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 | 8 ++++----
 src/static_src/scss/_base.scss                | 1 +
 src/templates/core/base.html                  | 9 +++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/apps/epic/static/apps/epic/role-select.js b/src/apps/epic/static/apps/epic/role-select.js
index cacc56b..dff301e 100644
--- a/src/apps/epic/static/apps/epic/role-select.js
+++ b/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);
diff --git a/src/static_src/scss/_base.scss b/src/static_src/scss/_base.scss
index c49584d..e89f23b 100644
--- a/src/static_src/scss/_base.scss
+++ b/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 {
diff --git a/src/templates/core/base.html b/src/templates/core/base.html
index 2625ea1..9a489bc 100644
--- a/src/templates/core/base.html
+++ b/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)