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)