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);