/* A focused roster and character panel, using the existing Metin2 palette. */
#auth.character-selection{--selection-bg:#10120f;--selection-panel:#211e17;--selection-bronze:#6f5732;--selection-text:#ead9af;--selection-muted:#b7aa8d;--selection-gold:#d0a45b;inset:0;z-index:35;display:block;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 68% 42%,#44301b40,transparent 55%),var(--selection-bg);padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));color:var(--selection-text)}
#auth.character-selection.hidden{display:none}
#auth.character-selection>.auth-card{width:min(960px,100%);max-width:960px;margin:auto;padding:0;border:0;background:transparent;box-shadow:none;text-align:left}
#auth.character-selection>.auth-card>.eyebrow,#auth.character-selection>.auth-card>h1,#auth.character-selection>.auth-card>.auth-description,#auth.character-selection>.auth-card>.auth-footer{display:none}
#auth.character-selection #auth-content{width:100%}
.selection-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:2px 0 24px;border-bottom:1px solid #6f573256}
.selection-brand{font:30px/1.1 Georgia,serif;color:#ead9af;text-decoration:none;letter-spacing:-1px}
.selection-brand span{color:var(--selection-gold)}
.selection-signout{color:var(--selection-muted);background:transparent;border:1px solid transparent;box-shadow:none;font-size:13px;padding:9px 12px;min-height:44px}
.selection-signout:hover{border-color:var(--selection-bronze);background:#d0a45b0a;color:var(--selection-text)}
.selection-title{padding:30px 0 27px}
#auth.character-selection .selection-title h1{font:clamp(29px,4vw,42px)/1.15 Georgia,serif;letter-spacing:-.5px;margin:0;color:var(--selection-text);text-wrap:balance}
.selection-title p{font-size:14px;line-height:1.6;color:var(--selection-muted);margin:10px 0 0}
.selection-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,.95fr);gap:32px;align-items:stretch}
.selection-roster{min-width:0;padding-top:3px}
.selection-roster-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:13px}
.selection-roster-heading h2{font:17px/1.4 Georgia,serif;color:var(--selection-text);margin:0}
.selection-roster-heading>span{font-size:12px;color:var(--selection-muted);font-variant-numeric:tabular-nums}
.selection-slots{display:grid;gap:10px}
.selection-slot{display:flex;align-items:center;width:100%;text-align:left;gap:14px;padding:12px 15px;min-height:94px;border:1px solid #6f573270;border-radius:0;background:#211e174d;box-shadow:none;color:var(--selection-text);transition:border-color .16s,background-color .16s;touch-action:manipulation}
.selection-slot:hover{border-color:var(--selection-bronze);background:#2b2419}
.selection-slot[aria-pressed=true]{border-color:var(--selection-gold);background:#3b2c1a80;box-shadow:none}
.selection-slot:focus-visible,.selection-enter:focus-visible,.selection-signout:focus-visible,.selection-brand:focus-visible{outline:2px solid #f2d394;outline-offset:4px}
.selection-slot-portrait{width:58px;height:64px;flex:0 0 58px;display:grid;place-items:center;background:#0b0d0960;border:1px solid #6f57324d}
.selection-slot-portrait img{width:56px;height:62px;object-fit:contain}
.selection-slot-copy{min-width:0;flex:1}
.selection-slot-copy strong{font:22px/1.25 Georgia,serif;display:block;overflow-wrap:anywhere;color:var(--selection-text)}
.selection-slot-copy small{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12px;color:var(--selection-muted);margin-top:7px}
.selection-level{color:#d3b579;font-variant-numeric:tabular-nums}
.selection-slot-indicator{font-size:10px;color:var(--selection-gold);align-self:flex-start;margin-top:2px;min-width:38px;text-align:right}
.selection-slot-empty{min-height:76px;background:transparent;border-style:dashed}
.selection-slot-empty .selection-slot-portrait{height:48px;border:0;background:transparent}
.selection-slot-empty .selection-slot-copy strong{font-family:inherit;font-size:14px;color:var(--selection-muted)}
.selection-empty-symbol{font:28px Georgia,serif;color:#a08452}
.selection-preview{position:relative;border:1px solid var(--selection-bronze);background:radial-gradient(ellipse at 50% 25%,#79552c24,transparent 65%),#191911;padding:30px 28px 20px;display:flex;flex-direction:column;align-items:center;min-width:0}
.selection-preview:before{content:'';position:absolute;top:-1px;left:-1px;width:28px;height:28px;border-top:2px solid var(--selection-gold);border-left:2px solid var(--selection-gold);pointer-events:none}
.selection-preview-art{width:160px;height:170px;display:grid;place-items:center;position:relative;margin-bottom:12px}
.selection-preview-art:before{content:'';position:absolute;inset:14px 5px;border:1px solid #6f57324d;transform:rotate(45deg);pointer-events:none}
.selection-preview-art img{position:relative;width:144px;height:164px;object-fit:contain;filter:drop-shadow(0 12px 12px #0006)}
.selection-preview-art img.selection-create-art{width:108px;height:120px}
.selection-preview-copy{text-align:center;width:100%}
.selection-class{font-size:13px;color:var(--selection-gold);margin:0 0 8px}
.selection-preview-copy h2{font:clamp(26px,3vw,34px)/1.2 Georgia,serif;color:var(--selection-text);margin:0;overflow-wrap:anywhere}
.selection-subtitle{font-size:13px;color:var(--selection-muted);line-height:1.6;margin:8px 0 20px}
.selection-attributes{display:grid;grid-template-columns:repeat(4,1fr);width:100%;padding:14px 0;margin:0 0 18px;border-block:1px solid #6f57324d;gap:8px;text-align:center}
.selection-attributes dt{font-size:10px;color:var(--selection-muted);margin-bottom:5px}
.selection-attributes dd{font-size:18px;color:var(--selection-text);margin:0;font-variant-numeric:tabular-nums}
.selection-entry{margin-top:auto;width:100%;padding-top:4px;text-align:center}
.selection-enter{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;min-height:48px;border-radius:0;border-color:#b07d37;background:linear-gradient(#644019,#38200f);color:#f0d59a;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 3px #d9a4500c;touch-action:manipulation}
.selection-enter:hover{background:linear-gradient(#795023,#4c2c13);border-color:var(--selection-gold)}
.selection-enter .spinner{width:16px;height:16px;flex:0 0 16px}
.selection-entry p{font-size:11px;line-height:1.5;color:var(--selection-muted);margin:12px 0 0;overflow-wrap:anywhere}
#auth.character-selection #auth-message{font-size:12px;color:var(--selection-muted);line-height:1.6;min-height:20px;margin:18px 0 0;text-align:center}
#auth.character-selection #auth-message:empty{display:none}
@media(max-width:640px){#auth.character-selection{padding:18px 16px max(18px,env(safe-area-inset-bottom))}.selection-header{padding-bottom:16px}.selection-brand{font-size:27px}.selection-title{padding:23px 0}.selection-title p{font-size:13px}.selection-layout{grid-template-columns:1fr;gap:24px}.selection-slot{min-height:80px;padding:10px 12px;gap:12px}.selection-slot-copy strong{font-size:21px}.selection-slot-empty{min-height:66px}.selection-preview{padding:20px 20px 17px}.selection-preview-art{height:128px;width:130px;margin-bottom:8px}.selection-preview-art img{width:106px;height:122px}.selection-preview-art:before{inset:15px 12px}.selection-subtitle{margin-bottom:16px}.selection-preview-copy h2{font-size:28px}.selection-attributes{padding:12px 0;margin-bottom:14px}.selection-slot-indicator{font-size:9px}}
@media(prefers-reduced-motion:reduce){.selection-slot{transition:none}.selection-enter .spinner{animation:none}}
.selection-retry{margin-top:12px;font-size:12px;min-height:44px;width:100%}
@media(max-width:640px){.selection-slot{min-height:72px;gap:10px}.selection-slot-portrait{width:48px;height:56px;flex-basis:48px}.selection-slot-portrait img{width:46px;height:54px}.selection-slot-empty{min-height:54px}.selection-slot-empty .selection-slot-portrait{height:32px}.selection-preview{display:grid;grid-template-columns:82px minmax(0,1fr);gap:0 16px;align-items:center}.selection-preview-art{width:82px;height:96px;margin:0 0 12px}.selection-preview-art img{width:78px;height:92px}.selection-preview-art img.selection-create-art{width:72px;height:84px}.selection-preview-art:before{inset:15px 3px}.selection-preview-copy{text-align:left}.selection-preview-copy h2{font-size:26px}.selection-class{margin-bottom:6px;font-size:12px}.selection-subtitle{margin:6px 0 12px;font-size:12px}.selection-attributes,.selection-entry{grid-column:1/-1}.selection-attributes{margin-top:2px}}

/* Original animated character, rendered by the existing native browser client. */
.selection-preview-art.selection-live-model{width:100%;height:340px;touch-action:pan-y;cursor:grab;overflow:hidden;border-radius:3px;background:radial-gradient(ellipse at 50% 80%,#6f573233,transparent 65%)}
.selection-live-model:active{cursor:grabbing}.selection-live-model:before{display:none}.selection-live-model .selection-model{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:contain;filter:none;opacity:0;pointer-events:none}.selection-live-model.model-ready>img:not(.selection-model){opacity:0}.selection-live-model.model-ready .selection-model{opacity:1}
@media(max-width:640px){.selection-preview .selection-preview-art.selection-live-model{grid-column:1/-1;width:100%;height:280px;margin-bottom:14px}.selection-preview:has(.selection-live-model) .selection-preview-copy{grid-column:1/-1;text-align:center}}

.selection-preview:has(.selection-live-model){background:#191911}.selection-preview-art.selection-live-model{background:transparent}

/* Never display a provisional empty roster or a portrait in place of the model. */
.selection-roster-loading{min-height:min(60vh,520px);display:grid;place-items:center}
.selection-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#b7aa8d;font-size:13px;line-height:1.5;text-align:center}
.selection-live-model>.selection-loading{position:absolute;inset:0;z-index:1}
.selection-loading-ring{display:block;width:38px;height:38px;border:2px solid #6f57324d;border-top-color:#d0a45b;border-right-color:#d0a45b99;border-radius:50%;animation:selection-loading-spin .9s linear infinite;box-shadow:0 0 18px #d0a45b0b}
.selection-live-model.model-ready>.selection-loading{display:none}
.selection-live-model .selection-model{transition:opacity .15s ease-out}
@keyframes selection-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.selection-loading-ring{animation:none}.selection-live-model .selection-model{transition:none}}