/* Character selection (js/windows/character-select.js). The original screen was Flash and left no art: the portraits are
   the creator's crops of ui/role/choose.png, phones use the CO mobile kit in /ui/mobile (the engine draws the backdrop and
   each body under this layer, as in the creator), and ?ui=desktop the login panel's colours and the original role buttons. */
.cs-portrait{flex:none;aspect-ratio:175/100;background:url(/ui/role/choose.png?v=dc8441c4a1b3504f) var(--x) var(--y)/var(--size) auto no-repeat #1a1510;box-shadow:0 0 0 1px #a8894a80}
.cs-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-loading{position:absolute;left:0;right:0;top:45%;color:#e8d9ae;font-size:13px;text-align:center;text-shadow:0 1px 2px #000;visibility:hidden}
.cs-cards.pending .cs-loading{visibility:visible}
.cs-status{min-height:16px;margin:0;color:#d8cfb8;font-size:12px;line-height:1.4;text-align:center}
.cs-status.error{color:#ff8a66}
.cs-card[aria-busy="true"]:disabled{opacity:1;cursor:wait}

/* Phones and tablets */
body.mobile-ui .cs-screen{position:absolute;inset:0;display:grid;grid-template-rows:38px minmax(0,1fr) auto;gap:8px;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);color:var(--ink)}
body.mobile-ui .join-screen :is(.cs-title,.cs-name,.cs-action){font-family:var(--serif)!important}
.cs-head{display:flex;align-items:center;gap:10px;min-width:0}
body.mobile-ui .cs-back{flex:none;width:36px;height:36px;padding:0;border:0;background:none}
body.mobile-ui .cs-back img{display:block;width:36px;height:36px}
body.mobile-ui .cs-title{margin:0;color:var(--gold);font-size:18px;font-weight:600;letter-spacing:.3px;text-shadow:0 2px 4px #000;white-space:nowrap}
body.mobile-ui .cs-cards{display:flex;justify-content:center;gap:14px;min-height:0}
body.mobile-ui .cs-card{position:relative;flex:1 1 0;max-width:360px;min-width:0;display:flex;flex-direction:column;padding:0;border:0;border-radius:6px;background:none;box-shadow:inset 0 0 0 1px #e2c47c40;color:inherit;text-align:left}
body.mobile-ui .cs-card:is(:focus-visible,[aria-busy="true"]){background:radial-gradient(ellipse 46% 9% at 50% 62%,#e2c47c3d,#e2c47c00 80%);box-shadow:inset 0 0 0 2px var(--gold),0 0 14px #e2c47c66}
body.mobile-ui .cs-card:disabled:not([aria-busy="true"]){filter:brightness(.6)}
body.mobile-ui .cs-figure{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
body.mobile-ui .cs-plus{width:44px;height:44px;opacity:.85}
body.mobile-ui .cs-empty{color:var(--mute);font-size:14px;text-shadow:0 1px 2px #000}
body.mobile-ui .cs-info{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 10px;padding:12px 12px 10px;border-radius:4px;background:url(/ui/mobile/card.png?v=ea1529f9c8e23a06) 0 0/100% 100%;box-shadow:0 8px 24px #000a}
body.mobile-ui .cs-portrait{width:70px;border-radius:3px}
body.mobile-ui .cs-name{color:var(--gold);font-size:16px;font-weight:600;text-shadow:0 1px 0 #000}
body.mobile-ui .cs-meta{color:var(--mute);font-size:12.5px}
body.mobile-ui .cs-reborn{color:#f3d27a;font-size:11.5px}
body.mobile-ui .cs-action{grid-column:1/-1;display:grid;place-items:center;height:40px;background:url(/ui/mobile/btnY.png?v=be065432cc957cb3) 0 0/100% 100%;color:#3a2604;font-size:16px;font-weight:700;text-shadow:0 1px 0 #fff7}
body.mobile-ui .cs-card:active:enabled .cs-action{filter:brightness(.88)}
/* Narrow phones stack the cards. */
@media (max-width:600px),(orientation:portrait){
 body.mobile-ui .cs-cards{flex-direction:column;align-items:center}
 body.mobile-ui .cs-card{width:min(100%,440px);max-width:none}
}

/* ?ui=desktop: a login-style panel over the world; no engine scene. */
body:not(.mobile-ui) .cs-screen{width:min(560px,100%);margin:auto;padding:22px 26px;border:1px solid #9d8958;border-radius:2px;background:#182834f2;box-shadow:0 8px 32px #0009;display:flex;flex-direction:column;align-items:center;gap:14px}
body:not(.mobile-ui) .cs-title{margin:0;color:#e1c77f;font:22px/1.2 Georgia,serif}
body:not(.mobile-ui) .cs-cards{display:flex;justify-content:center;gap:18px;max-width:100%}
body:not(.mobile-ui) .cs-card{width:230px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 12px;border:1px solid #73818b;border-radius:2px;background:#0c1b26;color:#f0e4c3;font:13px Arial,sans-serif;text-align:center}
body:not(.mobile-ui) .cs-card:hover:enabled{border-color:#c1a86b}
body:not(.mobile-ui) .cs-card:focus-visible,body:not(.mobile-ui) .cs-card[aria-busy="true"]{outline:0;border-color:#f3d27a;box-shadow:inset 0 0 0 1px #f3d27a}
body:not(.mobile-ui) .cs-card:disabled:not([aria-busy="true"]){opacity:.6}
body:not(.mobile-ui) .cs-card:not(.empty) .cs-figure{display:none}
body:not(.mobile-ui) .cs-figure{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:100px;justify-content:center}
body:not(.mobile-ui) .cs-plus{width:40px;height:40px}
body:not(.mobile-ui) .cs-empty{color:#bac5cb}
body:not(.mobile-ui) .cs-info{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%}
body:not(.mobile-ui) .cs-portrait{width:175px}
body:not(.mobile-ui) .cs-text{align-items:center;max-width:100%}
body:not(.mobile-ui) .cs-name{max-width:100%;color:#f3d27a;font:16px Georgia,serif}
body:not(.mobile-ui) .cs-meta,body:not(.mobile-ui) .cs-reborn{color:#bac5cb;font-size:12px}
body:not(.mobile-ui) .cs-reborn{color:#e1c77f}
body:not(.mobile-ui) .cs-card:active:enabled .enter-button{background-image:var(--pressed)}
body:not(.mobile-ui) .cs-action:not(.art-button){padding:8px 14px;border:1px solid #c1a86b;border-radius:2px;background:#294458;color:#f4e5be;font-size:14px}
body:not(.mobile-ui) .cs-card:hover:enabled .cs-action:not(.art-button){background:#365a70}
@media (max-width:600px){
 body:not(.mobile-ui) .cs-cards{flex-direction:column}
 body:not(.mobile-ui) .cs-card{width:100%}
}