.join-screen.role-active { padding:0; overflow:hidden; background:none; }
.role-screen { position:absolute; inset:0; overflow:hidden; }
.role-stage { position:absolute; left:0; top:0; width:1024px; height:768px; transform-origin:0 0; }
.role-stage > * { position:absolute; margin:0; }
.role-stage:not([data-step="choose"]) [data-step="choose"],.role-stage:not([data-step="create"]) [data-step="create"] { display:none; }
.role-portraits { inset:0; pointer-events:none; }
.role-portraits > .role-hit { position:absolute; }
.role-hit { padding:0; border:0; background:none; pointer-events:auto; }
/* No original selection art exists for these regions (the original client animated them in Flash). */
.role-hit[aria-pressed="true"],.role-hit[aria-checked="true"] { box-shadow:inset 0 0 0 2px #f3d27a; }
.role-hit:hover:not([aria-pressed="true"],[aria-checked="true"]) { box-shadow:inset 0 0 0 1px #f3d27a80; }
.role-loading { position:absolute; left:0; right:0; bottom:18px; color:#e8d9ae; font-size:13px; text-align:center; text-shadow:0 1px 2px #000; pointer-events:none; visibility:hidden; }
.role-stage.pending .role-loading { visibility:visible; }
.role-name { padding:0 6px; border:0; background:none; color:#fff9e8; font:15px Arial,sans-serif; text-align:center; }
.role-text { padding:10px 22px; overflow:auto; color:#f0e4c3; font:13px/1.5 Arial,sans-serif; white-space:pre-line; text-shadow:0 1px 1px #000; }
.role-text strong { color:#f3d27a; font-weight:400; }
.role-text .role-error { color:#ff8a66; }