/* Character Studio: controls occupy real layout space, never the character's face. */
#custCard{width:min(1160px,96vw);max-width:1160px;background:linear-gradient(145deg,#111d2b,#10121d 70%);border:1px solid #345568;border-radius:20px;padding:20px;max-height:94dvh;scroll-padding:16px;color:#e7edf5}
#custWrap{gap:24px}#custPrev,#custPrev.hasPortrait{--pw:300px;--ph:370px;flex:0 0 300px;position:sticky;top:0;background:#111a28;display:flex;flex-direction:column;border-radius:16px;padding:10px;box-sizing:border-box}
#custVisuals{display:block;width:100%}#custPrev #custStage,#custPrev.hasPortrait #custStage{width:100%;max-width:none;height:var(--ph);flex:none;border-color:#3b536a;box-sizing:border-box}
#custPrev .ccSide{width:100%;margin-top:8px}
#custPrev .ccFrame,#custPrev.hasPortrait .ccFrame{position:static;inset:auto;width:100%;display:flex;gap:8px}
#custPrev .ccFr{min-height:44px;font-size:12px;border-radius:10px;letter-spacing:.04em;background:#1b2d3d;border-color:#426071;color:#dce8ef}
#custPrev .ccFr.on{background:#163c3d;color:#a1f9e3;border-color:#5dd9c4}
#custPrev #custPrevL{display:block;font-size:11px;color:#a9bbc9;max-height:46px;overflow:hidden}
#custPrev #ccTabs,#custPrev.hasPortrait #ccTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#custPrev .ccTab,#custPrev.hasPortrait .ccTab{min-height:44px;padding:8px 4px;font-size:11px;text-align:center;letter-spacing:.05em;border-color:#344758;background:#182434}
#custPrev .ccTab.on{background:#174039;border-color:#5ed9c7}
#custPowerPose{display:none}#custSpin{font-size:9px;bottom:8px;color:#d6e9ec}
#castChoiceLayout{display:flex;flex-direction:column;gap:16px}#castListPane,#castHint{width:100%;box-sizing:border-box}#castHint{position:static;order:1}
.castSearchTools{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px;margin:8px 0 12px}.castSearchTools label{grid-column:1/-1;color:#8ce7d7;font-size:11px;letter-spacing:.12em;font-weight:800}
.castSearchTools input,.castSearchTools select{width:100%;box-sizing:border-box;min-width:0;min-height:46px;background:#0c1522;border:1px solid #466071;color:#f0f6fb;border-radius:10px;padding:10px;font-size:14px}
#castTabs{gap:7px;padding-bottom:6px}#castTabs .castTab{min-height:44px;flex-shrink:0;border-radius:9px;padding:8px 10px;background:#1a2b3a;color:#bed0db;border-color:#3a5364;font-size:11px}#castTabs .castTab.on{background:#15443f;color:#a7ffe6;border-color:#58ccbd}
#castResults{font-size:12px;color:#9fb5c6;margin:8px 0}
#castRow{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:520px;padding:3px 4px 10px;scroll-padding:8px}
#castRow .sopt{min-width:0;position:relative;background:linear-gradient(145deg,#20354a,#121e2e);border:1px solid #38546c;border-radius:13px;padding:12px 6px;line-height:1.4;font-size:11px;letter-spacing:.02em;transition:border-color .15s,background .15s}
#castRow .sopt.on{border-color:#79f3d9;background:linear-gradient(135deg,#1c514c,#152a3b);box-shadow:0 0 0 1px #79f3d9}
#castRow .sthumb{width:82px;height:124px;max-width:100%;margin:auto}#castRow .castVisualPair{justify-content:center}
#castRow .featuredCharacter,#castRow .toolitEx{display:block;font-size:9px;letter-spacing:.08em;color:#90efd6;margin:5px 0}#castRow .pr{font-size:10px;color:#d5dded;margin-top:6px}
#custOpts .hopt{min-height:44px;font-size:12px}#custOpts .crow>.lbl{font-size:11px}.castDetail{border-radius:12px;border-color:#3b5266;background:#131f2e}.castDetail h4{font-size:20px}
#custDone{min-height:48px}#custCard button:focus-visible,#custCard input:focus-visible,#custCard select:focus-visible,#powerPreviewDialog :focus-visible{outline:3px solid #8df9e4;outline-offset:2px}
#creatorCodePanel{display:grid;grid-template-columns:minmax(210px,1fr) minmax(300px,1.2fr);align-items:center;gap:9px 14px;margin:10px 0 16px;padding:12px 14px;border:1px solid #80693f;border-radius:12px;background:linear-gradient(120deg,#241f18,#152732);box-sizing:border-box}
#creatorCodePanel b{display:block;color:#ffdda0;font-size:12px;letter-spacing:.08em}#creatorCodePanel small{display:block;margin-top:4px;color:#b9cad4;font-size:11px;line-height:1.4}.creatorCodeControls{display:grid;grid-template-columns:minmax(130px,1fr) auto;gap:8px}.creatorCodeControls input{width:100%;min-height:46px;box-sizing:border-box;border:1px solid #61788a;border-radius:9px;background:#0b1520;color:#fff4dc;padding:10px 12px;font:800 17px/1 monospace;letter-spacing:.16em}.creatorCodeControls button{min-height:46px;border:1px solid #70d7c5;border-radius:9px;background:#17443d;color:#bdfff0;padding:9px 13px;font:800 11px/1.2 sans-serif;letter-spacing:.04em;cursor:pointer}#creatorCodeStatus{grid-column:1/-1;margin:0;color:#abc0cc;font-size:11px;line-height:1.4}#creatorCodeStatus[data-state=success]{color:#9ff4c2}#creatorCodeStatus[data-state=error],#creatorCodeStatus[data-state=locked],#creatorCodeStatus[data-state=claimed]{color:#ffba9f}#creatorCodeStatus[data-state=checking]{color:#ffe09d}
#powerPreviewDialog{width:min(1040px,96vw);max-width:96vw;height:min(900px,94dvh);max-height:94dvh;padding:0;border-radius:18px;background:#101b29;border-color:#527789;overflow:auto;scroll-padding:12px}
#powerPreviewClose{min-height:44px;margin:8px 12px 0 auto;padding:8px 15px;font-size:12px}
.worldPreviewHeader{padding:8px 16px 12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.7fr);gap:8px}.worldPreviewHeader small,.worldPreviewHeader h2{grid-column:1/-1;margin:0}.worldPreviewHeader small{font-size:9px}.worldPreviewHeader h2{font-size:23px;padding:2px 0 6px}
.worldPreviewHeader select,.worldPreviewHeader input{width:100%;min-width:0;min-height:44px;box-sizing:border-box;font-size:14px;background:#192b3a;color:#f1f6fb;border:1px solid #4a6678;border-radius:8px;padding:9px}#worldPreviewSearch{grid-column:1/-1}
#worldPreviewViewbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;background:#152637;border-block:1px solid #344e63}
#worldPreviewViewbar button{min-height:44px;padding:9px 14px;border-radius:9px;background:#20374a;border:1px solid #56788b;color:#f0f6ff;font-size:12px;font-weight:700;cursor:pointer}#worldPreviewViewbar button[aria-pressed=true]{background:#185048;border-color:#85efdc;color:#c5fff1}
#worldPreviewPose{font-size:11px;color:#a8e9db;margin-left:auto}#worldPreviewStage #custPowerPose{display:none}#worldPreviewStage #custStage{height:clamp(250px,40dvh,410px);min-height:0}
.worldPreviewDetails{padding:16px}.worldPreviewDetails button{min-height:44px}.worldPreviewDetails p{font-size:14px}.worldPreviewDetails small{color:#a8bbc9}
@media(max-width:760px){
 #creatorCodePanel{grid-template-columns:1fr;padding:11px;margin:8px 0 12px}.creatorCodeControls{grid-template-columns:1fr}.creatorCodeControls input{font-size:16px}.creatorCodeControls button{width:100%}
 #custCard{padding:12px;width:96vw;border-radius:15px;max-height:96dvh}#custWrap{display:flex;flex-direction:column;gap:16px}
 #custPrev,#custPrev.hasPortrait{position:static;--ph:270px;flex:0 0 auto;width:100%;display:flex;padding:8px;top:auto}
 #custPrev #custStage,#custPrev.hasPortrait #custStage{height:clamp(220px,34dvh,310px);max-width:none;width:100%}
 #custPrev #ccTabs,#custPrev.hasPortrait #ccTabs{grid-template-columns:repeat(3,minmax(0,1fr))}#custOpts{width:100%}
 .castSearchTools{grid-template-columns:minmax(0,1fr)}.castSearchTools input,.castSearchTools select{font-size:16px}
 #castRow{grid-template-columns:repeat(2,minmax(0,1fr));max-height:520px}#castRow .sthumb{height:128px;width:90px}
 #castHint{order:1}#worldPreviewPose{flex-basis:100%;margin-left:0;font-size:10px;min-height:13px}
 #powerPreviewDialog{width:96vw;max-height:96dvh;height:96dvh}.worldPreviewHeader{padding:6px 12px 10px;grid-template-columns:1fr}.worldPreviewHeader input,.worldPreviewHeader select{font-size:16px}#worldPreviewLocation{display:none}
 #worldPreviewStage #custStage{height:clamp(240px,38dvh,350px)}#worldPreviewViewbar{padding:8px 12px}#worldPreviewViewbar button{flex:1}
}
@media(min-width:761px) and (max-width:1050px){#custPrev,#custPrev.hasPortrait{flex-basis:260px}#castRow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:540px) and (min-width:600px){
 #custWrap{flex-direction:row}#custPrev,#custPrev.hasPortrait{flex:0 0 240px;position:static}#custPrev #custStage,#custPrev.hasPortrait #custStage{height:210px}
 #powerPreviewDialog[open]{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;gap:0}#powerPreviewClose{grid-column:2;grid-row:1;z-index:2;justify-self:end}
 .worldPreviewHeader{grid-column:1;grid-row:1;padding:10px 12px} .worldPreviewHeader small,#worldPreviewSearch{display:none}.worldPreviewHeader h2{font-size:17px}.worldPreviewHeader #worldPreviewCharacter{min-height:40px}
 #worldPreviewViewbar{grid-column:1;grid-row:2;padding:4px 10px}#worldPreviewPose{display:none}#worldPreviewStage{grid-column:1;grid-row:3}#worldPreviewStage #custStage{height:220px}
 .worldPreviewDetails{grid-column:2;grid-row:1/4;padding-top:60px}
}
@media(prefers-reduced-motion:reduce){#custCard *,#powerPreviewDialog *{animation:none!important;transition:none!important}}

/* Readable ability summaries and persistent completion action. */
#custCard .castDetail .cdRole,#custCard .castKit>div,#custCard .castFoot{font-size:13px;line-height:1.5}
#custCard .castKit b{font-size:11px;line-height:1.5;margin-bottom:5px}#custCard .castMeta span,#custCard .cdBadge{font-size:10px;padding:6px 8px}
#custDone{position:sticky;bottom:0;z-index:4;background:#153c3b;border-color:#63d9c8;color:#b6fff1;box-shadow:0 -8px 20px #10121d}
#custCard .castDetail{padding:14px}#custCard .castDetail h4{font-size:21px}

#worldPreviewCharacter{grid-column:1/-1}.worldPreviewSetting{display:grid;gap:7px;font-size:12px;color:#b5cbd9;margin:14px 0}.worldPreviewDetails #worldPreviewLocation{display:block;width:100%;min-height:44px;background:#192b3a;color:#f0f6fb;border:1px solid #4a6678;border-radius:8px;padding:9px;font-size:16px}

/* Keep the selected character, complete poster and ability package together before the directory. */
#custWrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:start;gap:16px}
#custPrev,#custPrev.hasPortrait{position:static;width:100%;min-width:0;flex:none;--ph:330px}
#custOpts{grid-column:1/-1;min-width:0;width:100%}
#custVisuals{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:stretch}
#custPrev.hasPortrait #custVisuals{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
#custPrev #custStage,#custPrev.hasPortrait #custStage{height:330px;width:100%;max-width:none;min-width:0}
#custPrev #custPortrait,#custPrev.hasPortrait #custPortrait{display:block;width:100%;max-width:none;min-width:0}
#custPrev #custPortrait[hidden],#worldPreviewPortrait[hidden]{display:none}
#custPortrait button,#worldPreviewPortrait button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:100%;height:100%;min-height:44px;padding:8px;border:1px solid #756047;border-radius:12px;background:#0b1420;color:#f5d99e;cursor:zoom-in}
#custPortrait img,#worldPreviewPortrait img{display:block;width:100%;height:286px;max-width:100%;object-fit:contain;filter:none}
#custPortrait span,#worldPreviewPortrait span{font:800 10px/1.4 sans-serif;letter-spacing:.05em}
#castHint{grid-column:2;grid-row:1;order:0;position:static;min-width:0;min-height:0;width:100%;margin:0}
#castHint .castFoot{margin-bottom:0}#castHint .powerPreviewButton{margin-top:10px}
#castRow{grid-template-columns:repeat(5,minmax(0,1fr));max-height:500px}
#castRow .castVisualPair{flex-direction:column;gap:7px;align-items:center}
#castRow .castVisualPair canvas{flex:none}
#castRow .characterPortrait{display:block;width:100%;height:110px;max-width:100%;object-fit:contain;border-radius:6px;background:#0b1420}
#custCard[data-section=face] #castHint,#custCard[data-section=hair] #castHint,#custCard[data-section=body] #castHint,#custCard[data-section=drip] #castHint,#custCard[data-section=exclusive] #castHint{display:none}
#custCard[data-section=face] #custOpts,#custCard[data-section=hair] #custOpts,#custCard[data-section=body] #custOpts,#custCard[data-section=drip] #custOpts,#custCard[data-section=exclusive] #custOpts{grid-column:2;grid-row:1}
#powerPreviewDialog[open]{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;align-content:start;height:auto;max-height:94dvh}
#powerPreviewClose{grid-column:1/-1;grid-row:1;justify-self:end;z-index:2}
#powerPreviewDialog .worldPreviewHeader{grid-column:1/-1;grid-row:2;padding:4px 16px 12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#powerPreviewDialog .worldPreviewHeader small,#powerPreviewDialog .worldPreviewHeader h2{grid-column:1/-1}
#powerPreviewDialog #worldPreviewSearch,#powerPreviewDialog #worldPreviewCharacter{grid-column:auto;display:block}
#powerPreviewViewbar{grid-column:1/-1;grid-row:3}
#worldPreviewVisuals{grid-column:1;grid-row:4;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;padding:16px;min-width:0}
#worldPreviewVisuals.hasPortrait{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
#worldPreviewStage{grid-column:auto;grid-row:auto;min-width:0}
#worldPreviewStage #custStage{height:330px;min-height:0;width:100%;border-radius:12px}
#powerPreviewDialog .worldPreviewDetails{grid-column:2;grid-row:4;padding:16px;min-width:0}
#worldPreviewPortrait{min-width:0}#worldPreviewPortrait img{height:286px}
@media(max-width:1050px){#castRow{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){
 #custWrap{grid-template-columns:minmax(0,1fr);gap:12px}
 #custPrev,#custPrev.hasPortrait{--ph:230px;padding:8px}
 #custPrev #custStage,#custPrev.hasPortrait #custStage{height:230px}
 #custPortrait img,#worldPreviewPortrait img{height:188px}
 #castHint{grid-column:1;grid-row:auto}
 #custOpts,#custCard[data-section] #custOpts{grid-column:1;grid-row:auto}
 #custPrev #ccTabs,#custPrev.hasPortrait #ccTabs{grid-template-columns:repeat(3,minmax(0,1fr))}
 #castRow{grid-template-columns:repeat(2,minmax(0,1fr));max-height:480px}
 #powerPreviewDialog[open]{display:block;width:96vw;height:auto;max-height:96dvh}
 #powerPreviewDialog .worldPreviewHeader{grid-template-columns:minmax(0,1fr);padding:4px 12px 10px}
 #worldPreviewVisuals{padding:12px;gap:8px}
 #worldPreviewStage #custStage{height:230px;min-height:0}
 #powerPreviewDialog .worldPreviewDetails{padding:0 12px 16px}
}
@media(min-width:600px) and (max-height:540px){
 #custWrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#castHint{grid-column:2;grid-row:1}#custOpts{grid-column:1/-1}
 #powerPreviewDialog[open]{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr}
 #powerPreviewDialog .worldPreviewHeader{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #powerPreviewDialog .worldPreviewHeader small{display:none}#powerPreviewDialog .worldPreviewHeader h2{font-size:18px}
 #worldPreviewViewbar{grid-column:1/-1;grid-row:3}#worldPreviewVisuals{grid-column:1;grid-row:4}
 #powerPreviewDialog .worldPreviewDetails{grid-column:2;grid-row:4;padding:12px}
}