/* The supplied scene stays intact; controls sit inside its painted vault frame. */
#character-select,html.game-ui-ready body #character-select:modal{box-sizing:border-box;width:960px!important;max-width:960px!important;height:640px!important;max-height:640px!important;padding:0;border:0;border-radius:0;overflow:hidden;background:#080d18 url("assets/ui/char-select-screen.png?build=458249d7bacee4e6") center/100% 100% no-repeat;color:#eee0dc;box-shadow:none;transform:translate(-50%,-50%) scale(var(--game-ui-scale,1))}
#character-select::backdrop{background:#030710ee}
#character-select *{box-sizing:border-box}
#character-select .character-select-layout{display:contents}
#character-select .character-roster-panel{position:absolute;left:74%;top:14%;width:19.5%;height:64%;display:flex;flex-direction:column;gap:4px;padding:0}
#character-select .character-roster-panel>h2{font-size:19px;color:#e8cadf;text-align:center;margin:0 0 3px}
#character-select .character-roster{display:grid;gap:4px;padding:2px;overflow:hidden;flex:none}
#character-select .character-slot{display:flex;flex-direction:column;text-align:left;gap:2px;min-width:0;min-height:36px;padding:4px 7px;border:1px solid #82618c80;border-radius:3px;background:#100e1cc9;color:#e7d9e9;box-shadow:none}
#character-select .character-slot[aria-pressed=true]{border-color:#d9a0ed;background:linear-gradient(110deg,#704977aa,#201b34cc);box-shadow:inset 3px 0 #dca5ef,0 0 12px #ac63c026}
#character-select .character-slot strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#character-select .character-slot span{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:#c6bdcc}
#character-select .character-pages{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0;flex:none}
#character-select .character-pages[hidden],#character-select [hidden]{display:none}
#character-select .character-pages button{font-size:10px;padding:3px;min-height:24px;flex:1}
#character-select .character-pages span{font-size:10px;white-space:nowrap}
#character-select .character-create{margin:0;margin-top:auto;flex:none}
#character-select .character-create label{display:block;font-size:11px;color:#d5bacf;margin-bottom:3px}
#character-select .character-create>div{display:grid;gap:4px}
#character-select input{width:100%;min-width:0;min-height:28px;padding:5px;font-family:inherit;font-size:12px;background:#070c16df;border:1px solid #725973;color:#f8e8f5;border-radius:3px}
#character-select button{cursor:pointer;color:#ecddec;background:linear-gradient(#33223c,#191322);border:1px solid #886689;border-radius:3px;min-height:28px;font-size:11px;padding:4px}
#character-select button:disabled{opacity:.4;cursor:default}
#character-select button:hover:not(:disabled){border-color:#efb8f7;filter:brightness(1.12)}
#character-select :focus-visible{outline:2px solid #f6ccff;outline-offset:2px}
#character-select .character-play{width:100%;min-height:30px;margin:0;flex:none;background:linear-gradient(#765081,#402c50);border-color:#d2a0d5;color:#fff1ee;font-weight:bold;letter-spacing:.6px}
#character-select [role=status]{position:absolute;left:10%;bottom:6%;width:54%;text-align:center;text-shadow:0 2px 4px #000;margin:0;color:#f3d1e5;font-size:10px;line-height:1.3;flex:none;min-height:0}
#character-select [role=status]:empty{display:none}
#character-select .character-stage{position:absolute;left:31%;top:42%;width:32%;height:43%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0;border:0;background:none;text-align:center;gap:0;text-shadow:0 2px 5px #000,0 0 15px #000}
#character-select .character-preview{width:320px;max-width:100%;height:190px;object-fit:contain;flex:none;filter:drop-shadow(0 8px 8px #0009)}

#character-select select{width:100%;min-height:28px;background:#100e1c;color:#eee0dc;border:1px solid #886689;font:inherit;font-size:12px}#character-mode-help{font-size:10px;line-height:1.25;color:#c6bdcc}#character-select .character-roster-panel{top:12%;height:76%}

/* Three illustrated difficulty choices retain native button keyboard controls. */
#character-select .difficulty-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#character-select .difficulty-buttons button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 1px 5px;min-width:0;background:#100e1ce8;border:1px solid #685371;transition:border-color .12s,box-shadow .12s,background .12s}
#character-select .difficulty-sprite{display:block;width:48px;height:48px;max-width:100%;background-image:url('assets/ui/difficulty-sprites.png?build=a815663d66ef2aa4');background-size:300% 100%;background-repeat:no-repeat;filter:saturate(.7) brightness(.8)}
#character-select .difficulty-easy{background-position:0% 50%}
#character-select .difficulty-normal{background-position:50% 50%}
#character-select .difficulty-hard{background-position:100% 50%}
#character-select .difficulty-buttons button[aria-pressed=true]{border:2px solid #f3c4ee;padding:2px 0 4px;background:linear-gradient(#684568,#2c203b);box-shadow:inset 0 0 12px #eda5ee40,0 0 8px #eda5ee55;color:#fff4d6}
#character-select .difficulty-buttons button[aria-pressed=true] .difficulty-sprite{filter:drop-shadow(0 0 3px #f0b1dc88)}
#character-mode-help{min-height:50px}

/* The two existing bodies are selectable without changing a saved character. */
#character-select .character-stage{left:24%;top:15%;width:43%;height:73%;justify-content:flex-start;gap:3px}
#character-select .character-preview{width:320px;height:220px}
#character-select .character-preview-label{font-size:16px;color:#fff1df;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#character-select .character-body-choices{width:100%;border:0;padding:0;margin:0}
#character-select .character-body-choices legend{width:100%;font-size:13px;color:#eee0dc;margin-bottom:5px}
#character-select .character-body-choices>div{display:flex;justify-content:center;gap:12px}
#character-select .character-body-choices button{width:132px;display:flex;flex-direction:column;align-items:center;background:#100e1cdd;min-height:152px;border:2px solid #725973}
#character-select .character-body-choices img{width:108px;height:112px;flex:none;object-fit:contain;image-rendering:auto}
#character-select .character-body-choices strong{font-size:14px}
#character-select .character-body-choices span{font-size:11px;color:#d5bacf}
#character-select .character-body-choices button[aria-pressed=true]{border-color:#efc5ee;background:#49304bdd;box-shadow:0 0 12px #e8a9ed33}
#character-select .character-body-choices small{display:block;font-size:10px;line-height:1.35;color:#eadce8;margin:8px auto 0;max-width:280px}

/* Creation is a separate menu, entered only through Create character. */
#character-select .character-new{margin-top:auto;min-height:32px}
#character-select .character-back{min-height:30px;margin-top:8px}
#character-select:not(.creating-character) .character-stage{top:31%;height:50%;justify-content:center}
#character-select .character-create{margin-top:auto}

/* One detailed portrait automatically wears the selected character's gear. */
#character-select .character-stage{top:13%;height:76%;gap:5px}
#character-select:not(.creating-character) .character-stage{top:21%;height:63%;justify-content:flex-start}
#character-select .character-preview-label{flex:none}
#character-select .character-preview-media{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
#character-select .character-portrait{width:100%;height:100%;min-height:0;aspect-ratio:2/3;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 6px 5px #0009)}
#character-select .character-body-choices{flex:none}
#character-select [hidden]{display:none!important}

#character-select .character-delete{min-height:28px;margin-top:6px;color:#edb3ad;font-size:12px}
#character-delete-confirm{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 24px);box-sizing:border-box;padding:22px;border:2px solid #b7a28a;background:#10151f;color:#eae0d2;border-radius:6px;font:16px Georgia,serif}
#character-delete-confirm::backdrop{background:#000b}#character-delete-confirm h2{font-size:22px;margin:0 0 12px}#character-delete-confirm label{display:block;margin:18px 0 8px}#character-delete-confirm input{box-sizing:border-box;width:100%;padding:10px;font-size:18px}#character-delete-confirm>div{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}#character-delete-confirm .delete-confirm{color:#ffb6b6}#character-delete-confirm button:disabled{opacity:.4}

/* Cosmetic controls occupy the left alcove; both registered body layouts stay intact. */
#character-select .character-appearance{position:absolute;left:7%;top:16%;width:21%;height:71%;margin:0;padding:10px 14px;display:flex;flex-direction:column;gap:7px;background:#100e1ce8;border:1px solid #82618c;border-radius:5px;text-align:left}
#character-select .character-appearance legend{padding:0 6px;color:#f5dcf1;font-size:15px}
#character-select .character-face-preview{display:block;width:120px;height:120px;flex:none;align-self:center;background:radial-gradient(ellipse,#483645,#15111d);border:1px solid #856688;border-radius:4px}
#character-select .character-appearance label{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:6px;font-size:12px;color:#e2cedd}
#character-select .character-appearance select{font-size:12px;min-height:32px;padding:3px}
#character-select .character-appearance button{margin-top:auto;min-height:30px}
#character-select .character-appearance-tabs{display:flex;gap:6px}
#character-select .character-appearance-tabs button{flex:1;margin:0;min-height:30px;font-size:12px}
#character-select .character-appearance-tabs button[aria-pressed=true]{background:#654b6c;border-color:#d9a5ce;color:#fff}
#character-select .character-appearance-group{display:flex;flex-direction:column;gap:7px}
#character-select .character-appearance-group[hidden]{display:none}
#character-select.creating-character .character-stage{left:30%;width:38%}
#character-select.creating-character .character-body-choices button{min-height:62px;width:100px}
#character-select.creating-character .character-body-choices img{display:none}
#character-select.creating-character .character-body-choices small{margin-top:4px}

/* The shared sprite is registered to the near path in the intact camp painting. */
#character-select .character-scene-actor{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:auto}
#character-select.creating-character .character-scene-actor{display:none}
#character-select:not(.creating-character) .character-preview-media{display:none}
#character-select:not(.creating-character) .character-stage{left:27.5%;top:38%;width:35%;height:54%;pointer-events:none;justify-content:space-between}
#character-select:not(.creating-character) .character-stage .character-play{pointer-events:auto;max-width:260px;margin:auto auto 0}
#character-select:not(.creating-character) .character-preview-label{font-size:15px;text-shadow:0 2px 4px #000,0 0 12px #000}
html.game-ui-ready body #character-select:not(.creating-character):modal{position:fixed!important;inset:auto!important;left:50%!important;top:50%!important;margin:0!important;transform:translate(-50%,-50%) scale(var(--selection-scene-scale,1))!important}
@media(max-width:650px) and (orientation:portrait){
 html.game-ui-ready body #character-select:not(.creating-character):modal{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;transform:translate(-50%,-50%)!important;background-size:100% calc(100vw * 2 / 3);background-position:center top;background-color:#0d111b}
 #character-select:not(.creating-character) .character-scene-actor{height:calc(100vw * 2 / 3)}
 #character-select:not(.creating-character) .character-stage{left:0;top:calc(100vw * .22);width:92%;height:0}
 #character-select:not(.creating-character) .character-preview-label{font-size:12px}
 #character-select:not(.creating-character) .character-roster-panel{left:12px;top:calc(100vw * 2 / 3 + 12px);width:calc(100% - 24px);height:calc(100dvh - 100vw * 2 / 3 - 24px)}
 #character-select:not(.creating-character) .character-roster{flex:1;overflow:auto;align-content:start}
 #character-select:not(.creating-character) .character-slot{min-height:53px;padding:6px 10px}
 #character-select:not(.creating-character) .character-slot span{font-size:11px}
 #character-select:not(.creating-character) .character-roster-panel>.character-new,#character-select:not(.creating-character) .character-roster-panel>.character-play,#character-select:not(.creating-character) .character-roster-panel>.character-delete{min-height:42px;font-size:14px;margin-top:5px}
}
/* The frame-palette layer owns the actual scene image, including on phones. */
@media(max-width:650px) and (orientation:portrait){
 body #character-select:not(.creating-character)::before{inset:0 0 auto;height:calc(100vw * 2 / 3);background-size:100% 100%;background-position:center top}
}