/* Selection is a character showcase; controls share a compact, aligned grid. */
body.selection{overflow:hidden;background-color:#22291c}
body.selection .select-shell{height:100dvh;min-height:0;max-width:1700px;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:200px minmax(0,1fr) 248px;grid-template-rows:44px minmax(0,1fr);grid-template-areas:'head head head' 'list hero controls';gap:14px;align-items:stretch;background:linear-gradient(90deg,#11110948,transparent 40%,#11110930)}
body.selection .select-head{grid-area:head;display:flex;align-items:center;justify-content:space-between;gap:12px}
body.selection .select-head small{font-size:9px;letter-spacing:.12em}
body.selection .select-head h1{font-size:23px;margin:0;line-height:1.15}
body.selection .select-head>button{min-height:40px;padding:6px 14px;font-size:12px}
body.selection .character-list{grid-area:list;align-self:stretch;min-height:0;max-height:none;margin:0;padding:12px;display:flex;flex-direction:column;gap:10px;border-radius:9px;background:linear-gradient(#1c1c14d9,#11150ec9)}
body.selection .character-list h2{font-size:15px;line-height:1.25;text-align:left;margin:0;font-weight:600;color:#dfc789}
body.selection .list-scroll{display:block;flex:1;min-height:0;max-height:none;overflow:auto;scrollbar-width:thin;scrollbar-color:#aa8b4d #171a11;padding:1px}
body.selection .character-row{display:flex;flex-direction:column;justify-content:center;gap:3px;width:100%;min-width:0;min-height:52px;padding:8px 10px;margin:0 0 7px;border-radius:6px;text-align:left;background:#12180f99}
body.selection .character-row strong{font-size:14px;line-height:1.2}
body.selection .character-row span{font-size:10px;line-height:1.3;color:#caba98}
body.selection .character-row.active{background:linear-gradient(100deg,#69421bcc,#271e10cc);border-color:#e5c57a}
body.selection #newChar{width:100%;min-height:44px;font-size:12px;padding:8px}
body.selection .character-stage{grid-area:hero;position:relative;isolation:isolate;display:block;min-width:0;min-height:0;height:auto;overflow:visible;text-align:center}
body.selection .stage-title{position:absolute;z-index:2;top:8px;left:0;right:0;display:block;pointer-events:none;line-height:1.25}
body.selection .stage-title span{font-size:12px;letter-spacing:.08em;color:#e9dfbc}
body.selection .stage-title h2{font-size:26px;line-height:1.2;margin:4px 0;color:#ffe2a1;font-weight:600}
body.selection .sprite-viewport{position:absolute;inset:62px -10px 34px;display:block;z-index:1;pointer-events:none}
body.selection .character-stage canvas{display:block;position:static;width:100%;height:100%;max-width:none;margin:0;object-fit:contain;aspect-ratio:auto!important;filter:drop-shadow(0 7px 4px #0006)}
body.selection .pedestal{position:absolute;z-index:0;left:50%;top:75%;bottom:auto;width:190px;height:23px;transform:translate(-50%,-50%);border:1px solid #b8a86d65;border-radius:50%;background:radial-gradient(ellipse,#a39a5c44,#28392366 65%,transparent 73%);box-shadow:none;pointer-events:none}
body.selection .stage-caption{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:max-content;max-width:100%;margin:0;padding:5px 10px;font-size:11px;line-height:1.4;border-radius:4px;background:#10160dc4;color:#e8dbad}
body.selection .character-controls{grid-area:controls;align-self:center;min-width:0;padding:14px;display:block;border-radius:9px;background:linear-gradient(#1d1d15df,#11150ed9)}
body.selection .character-controls h2{font-size:18px;line-height:1.25;margin:0 0 12px;text-align:left;font-weight:600}
body.selection .selected-summary h2{margin:0 0 5px;font-size:18px}
body.selection .selected-summary p{margin:0;color:#c9bb99;font-size:12px;line-height:1.4}
body.selection .selection-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:15px}
body.selection .selection-actions button{width:100%;min-height:44px;margin:0!important;padding:9px;font-size:13px;font-weight:600}
body.selection .selection-actions .danger{background:#20140d80;color:#c8a994;border-color:#70533a;font-weight:400}
body.selection .factions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 8px;max-width:none}
body.selection .factions button{min-width:0;min-height:44px;margin:0;padding:6px 2px;font-size:12px;line-height:1.2;justify-content:center}
body.selection .genders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 12px;max-width:none}
body.selection .genders button{min-height:44px;padding:6px;font-size:12px}
body.selection #createForm{max-width:none;margin:0}
body.selection #createForm label{font-size:11px;margin:0 0 5px}
body.selection #charName{min-width:0;min-height:44px;font-size:16px;padding:9px 10px}
body.selection #createForm .gold{min-height:44px;font-size:13px;margin-top:8px;padding:9px}
body.selection #createError{font-size:11px;margin:6px 0 0}
body.selection #createError:empty{display:none}
body.selection dialog{font-size:14px}
@media(max-width:1000px) and (min-height:551px){
 body.selection .select-shell{grid-template-columns:170px minmax(0,1fr);grid-template-rows:42px minmax(0,1fr) auto;grid-template-areas:'head head' 'list hero' 'controls controls';gap:10px}
 body.selection .character-controls{align-self:stretch;padding:12px}
 body.selection .selected-summary{display:flex;align-items:center;justify-content:space-between;gap:12px}
 body.selection .selected-summary h2{margin:0;font-size:16px}
 body.selection .selection-actions{grid-template-columns:1fr 1fr;margin-top:10px}
 body.selection .character-controls>h2{display:none}
 body.selection .factions{margin-bottom:6px}
 body.selection .genders{margin-bottom:6px}
 body.selection #createForm{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:start}
 body.selection #createForm label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 body.selection #createForm .gold{margin:0;height:44px}
 body.selection #createError{grid-column:1/-1}
}
@media(max-width:600px) and (orientation:portrait){
 body.selection .select-shell{padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));grid-template-columns:minmax(0,1fr);grid-template-rows:36px 86px minmax(0,1fr) auto;grid-template-areas:'head' 'list' 'hero' 'controls';gap:8px}
 body.selection .select-head small{display:none}
 body.selection .select-head h1{font-size:20px}
 body.selection .select-head>button{font-size:11px;min-height:36px;padding:5px 12px}
 body.selection .character-list{display:grid;grid-template-columns:1fr 114px;grid-template-rows:20px 44px;gap:4px 8px;padding:8px 10px}
 body.selection .character-list h2{font-size:11px;align-self:center}
 body.selection #newChar{grid-column:2;grid-row:1;min-height:20px;height:20px;font-size:10px;padding:1px 6px;background:none;box-shadow:none;border-color:#81683d}
 body.selection .list-scroll{grid-column:1/-1;grid-row:2;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:0;min-height:44px;scrollbar-width:none}
 body.selection .character-row{width:130px;min-width:130px;max-width:130px;height:44px;min-height:44px;margin:0;padding:5px 8px;gap:2px}
 body.selection .character-row strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.selection .character-row span{font-size:9px;white-space:nowrap}
 body.selection .stage-title{top:0}
 body.selection .stage-title span{font-size:10px}
 body.selection .stage-title h2{font-size:21px;margin:3px 0}
 body.selection .sprite-viewport{inset:40px -10px 26px}
 body.selection .stage-caption{font-size:10px;padding:3px 8px;max-width:100%;white-space:nowrap}
 body.selection .character-controls{padding:10px}
 body.selection .selected-summary{gap:8px}
 body.selection .selected-summary h2{font-size:15px}
 body.selection .selected-summary p{font-size:10px}
 body.selection .selection-actions{gap:8px;margin-top:8px}
 body.selection .selection-actions button{font-size:12px}
 body.selection .character-controls>h2{display:none}
 body.selection .factions button,body.selection .genders button{font-size:11px}
}
@media(max-height:550px) and (orientation:landscape){
 body.selection .select-shell{grid-template-columns:150px minmax(0,1fr) 208px;grid-template-rows:34px minmax(0,1fr);grid-template-areas:'head head head' 'list hero controls';gap:8px;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
 body.selection .select-head small{display:none}
 body.selection .select-head h1{font-size:19px}
 body.selection .select-head>button{min-height:32px;font-size:11px;padding:3px 10px}
 body.selection .character-list{padding:8px;gap:8px}
 body.selection .character-list h2{font-size:12px}
 body.selection .character-row{min-height:44px;padding:5px 7px}
 body.selection .character-row strong{font-size:12px}
 body.selection .character-row span{font-size:9px}
 body.selection .stage-title{top:0;display:block}
 body.selection .stage-title span{font-size:10px}
 body.selection .stage-title h2{font-size:19px;margin:2px 0}
 body.selection .sprite-viewport{inset:39px -12px 24px}
 body.selection .stage-caption{font-size:9px;padding:3px 6px;white-space:nowrap}
 body.selection .character-controls{padding:10px;align-self:center}
 body.selection .character-controls>h2{display:none}
 body.selection .selected-summary h2{font-size:16px}
 body.selection .selected-summary p{font-size:11px}
 body.selection .selection-actions{gap:6px;margin-top:10px}
 body.selection .factions button,body.selection .genders button{font-size:10px}
 body.selection .genders{margin-bottom:6px}
 body.selection #createForm label{display:none}
}
body.selection .character-list{align-self:start;max-height:100%;height:auto}body.selection .list-scroll{max-height:390px}@media(max-width:600px) and (orientation:portrait){body.selection .select-shell{grid-template-rows:44px 62px minmax(0,1fr) auto}body.selection .select-head>button{min-height:44px}body.selection .character-list{align-self:stretch;height:62px;padding:8px;grid-template-columns:minmax(0,1fr) 106px;grid-template-rows:44px;gap:8px}body.selection .character-list h2{display:none}body.selection .list-scroll{grid-column:1;grid-row:1;max-height:44px}body.selection #newChar{grid-column:2;grid-row:1;min-height:44px;height:44px;font-size:11px;padding:6px;background:linear-gradient(#705323,#382811)}body.selection .character-controls{padding:10px}body.selection .selected-summary h2{font-size:14px}}@media(max-height:550px) and (orientation:landscape){body.selection .character-list{align-self:stretch;height:100%;min-height:0}body.selection .list-scroll{max-height:none}}
body.selection .stage-caption{bottom:auto}body.selection .pedestal{border-color:#c1a76d80;background:radial-gradient(ellipse,#a6a66b5c,#21301f88 68%,transparent 75%)}
body.selection .select-head>button{min-height:44px}@media(max-height:550px) and (orientation:landscape){body.selection .select-shell{grid-template-rows:44px minmax(0,1fr)}}

/* User-approved arrangement: list above, three fields and three actions below. */
body.selection{background-image:none;background-color:#19291d}
body.selection .selection-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(#76561928,#19251112),url(assets/ui/selection-background.png);background-repeat:no-repeat}
body.selection .select-shell{position:relative;z-index:1;background:none}
body.selection .select-head,body.selection .character-list,body.selection .character-controls{position:relative;z-index:3}
body.selection .character-stage{z-index:1;overflow:visible}
body.selection .sprite-viewport{inset:0;overflow:visible}
body.selection .character-stage canvas{position:absolute;max-width:none;object-fit:fill;margin:0;filter:drop-shadow(0 6px 3px #0006)}
body.selection .stage-title{z-index:2;pointer-events:none}
body.selection .stage-caption{display:none}
body.selection .pedestal{display:none}
body.selection .select-shell[data-mode=select]{grid-template-columns:minmax(0,1fr);grid-template-rows:44px 94px minmax(0,1fr) auto;grid-template-areas:'head' 'list' 'hero' 'controls';gap:8px}
body.selection .select-shell[data-mode=select] .character-list{display:grid;grid-template-columns:minmax(0,1fr) 128px;grid-template-rows:28px 44px;gap:4px 8px;height:94px;min-height:0;max-height:none;align-self:stretch;padding:8px 10px}
body.selection .select-shell[data-mode=select] .character-list h2{display:block;grid-row:1;grid-column:1;margin:0;align-self:center;font-size:12px;line-height:1.2}
body.selection .select-shell[data-mode=select] #newChar{grid-row:1;grid-column:2;width:100%;height:28px;min-height:28px;padding:3px 6px;font-size:11px;background:#291f0e99}
body.selection .select-shell[data-mode=select] .list-scroll{grid-row:2;grid-column:1/-1;display:flex;gap:6px;min-height:44px;max-height:44px;padding:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
body.selection .select-shell[data-mode=select] .character-row{width:140px;min-width:140px;max-width:140px;height:44px;min-height:44px;padding:5px 9px;margin:0;gap:2px}
body.selection .select-shell[data-mode=select] .character-row strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.selection .select-shell[data-mode=select] .character-row span{font-size:9px;white-space:nowrap}
body.selection .select-shell[data-mode=select] .character-controls{align-self:stretch;padding:10px 12px}
body.selection .selected-summary{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.5fr) minmax(0,1fr);gap:10px;align-items:start}
body.selection .selected-summary>div{display:flex;flex-direction:column;gap:3px;min-width:0}
body.selection .selected-summary>div:nth-child(2){text-align:center}
body.selection .selected-summary>div:last-child{text-align:right}
body.selection .selected-summary span{font-size:10px;line-height:1.2;color:#b9a77c}
body.selection .selected-summary strong{font-size:14px;line-height:1.2;color:#f3dfac;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.selection .selection-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:9px}
body.selection .selection-actions button{width:100%;min-width:0;height:44px;min-height:44px;padding:6px;font-size:12px}
body.selection #newCharBottom{background:linear-gradient(#42351d,#211d13);border-color:#927742;color:#e4d3a4}
@media(max-width:600px) and (orientation:portrait){
 body.selection .select-shell[data-mode=select]{grid-template-rows:44px 94px minmax(0,1fr) auto}
 body.selection .selected-summary{gap:6px}
 body.selection .selected-summary strong{font-size:13px}
 body.selection .selection-actions{gap:6px}
 body.selection .selection-actions button{font-size:11px}
}
@media(max-height:550px) and (orientation:landscape){
 body.selection .select-shell[data-mode=select]{grid-template-columns:150px minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) auto;grid-template-areas:'head head' 'list hero' 'controls controls'}
 body.selection .select-shell[data-mode=select] .character-list{display:flex;flex-direction:column;gap:7px;height:100%;padding:8px}
 body.selection .select-shell[data-mode=select] .character-list h2{font-size:11px}
 body.selection .select-shell[data-mode=select] .list-scroll{display:block;flex:1;min-height:0;max-height:none;overflow:auto}
 body.selection .select-shell[data-mode=select] .character-row{width:100%;min-width:0;max-width:none;margin:0 0 5px}
 body.selection .select-shell[data-mode=select] #newChar{height:44px;min-height:44px}
 body.selection .select-shell[data-mode=select] .character-controls{padding:7px 10px}
 body.selection .selected-summary span{font-size:9px}
 body.selection .selected-summary strong{font-size:11px}
 body.selection .selection-actions{margin-top:6px}
}

/* Creation has its own focused scene; the saved-character list belongs to selection. */
body.selection .select-account-actions{display:flex;gap:8px;align-items:center}
body.selection .select-account-actions button{min-height:44px;padding:6px 12px;font-size:12px}
body.selection .select-shell[data-mode=create]{grid-template-columns:minmax(0,1fr) 248px;grid-template-rows:44px minmax(0,1fr);grid-template-areas:'head head' 'hero controls'}
body.selection .select-shell[data-mode=create] .character-list{display:none}
body.selection .genders{position:absolute;left:12px;bottom:calc(100% + 6px);display:flex;gap:24px;align-items:center;margin:0;padding:0;max-width:none;z-index:4}
body.selection .genders label{display:flex;gap:7px;align-items:center;min-height:44px;margin:0;padding:0;color:#f1dfb5;font-size:14px;text-shadow:0 1px 3px #000;cursor:pointer}
body.selection .genders input[type=radio]{appearance:auto;accent-color:#d5ad57;width:18px;height:18px;min-height:18px;padding:0;margin:0;box-shadow:none;border:0;cursor:pointer}
@media(max-width:1000px) and (min-height:551px){
 body.selection .select-shell[data-mode=create]{grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) auto;grid-template-areas:'head' 'hero' 'controls'}
}
@media(max-width:600px) and (orientation:portrait){
 body.selection .select-shell[data-mode=create]{grid-template-columns:minmax(0,1fr);grid-template-rows:44px minmax(0,1fr) auto;grid-template-areas:'head' 'hero' 'controls'}
 body.selection .select-account-actions{gap:6px}
 body.selection .select-account-actions button{font-size:11px;padding:5px 9px}
 body.selection .genders{left:10px;gap:22px;bottom:calc(100% + 4px)}
 body.selection .genders label{font-size:13px}
}
@media(max-height:550px) and (orientation:landscape){
 body.selection .select-shell[data-mode=create]{grid-template-columns:minmax(0,1fr) 208px;grid-template-rows:44px minmax(0,1fr);grid-template-areas:'head head' 'hero controls'}
 body.selection .genders{gap:18px}
 body.selection .genders label{font-size:12px}
}
/* Keep the enlarged SPR presentation inside the page viewport. */body.selection .select-shell{overflow:hidden;overflow:clip}

/* Render original selection pixels once; avoid smoothing an enlarged intermediate canvas. */
body.selection #characterPreview{image-rendering:pixelated;filter:drop-shadow(0 2px 1px #0005)}