/* Shared character-select and creation treatment: charcoal, brass, large pixel portraits. */
#title-screen .client-lobby{max-width:1050px}
#title-screen .client-topline{background:#141819ed;border-color:#6b6348;color:#c3b58b}
#title-screen .title-layout{background:#111516f5;border-color:#6b6348;padding:24px;border-radius:4px;box-shadow:0 12px 45px #0006}
#title-screen #resume-box{grid-template-columns:1fr 1fr;gap:26px;padding:0;border:0;background:none}
#title-screen #resume-box .roster-preview-panel{padding:0 26px 0 0;border-right:1px solid #716a513f}
#title-screen #resume-box .roster-preview-stage{background:radial-gradient(ellipse at 50% 85%,#30423422,transparent 55%),#070a0b;border:1px solid #655f4b66;border-radius:4px;min-height:280px}
#title-screen #resume-box .roster-preview-stage canvas{width:215px;height:258px;image-rendering:pixelated}
#title-screen #resume-box .roster-preview-panel h2{font:500 21px Cinzel,serif;color:#e3d8bb;margin:17px 0 6px}
#title-screen #resume-box #resume-description{font:13px Karla,sans-serif;color:#b4aa8e}
#title-screen #resume-box .roster-local{font:10px Karla,sans-serif;color:#7e8b7d;margin:7px 0 16px}
.lobby-kicker{font:9px Karla,sans-serif;letter-spacing:.17em;color:#96896b}
#title-screen #resume-box .roster-heading{align-items:center;margin:0 0 15px;gap:12px}
#title-screen #resume-box .roster-heading h2{font:500 20px Cinzel,serif;color:#d4c49c;margin:4px 0 0}
#title-screen #resume-box #roster-count{font:10px Karla,sans-serif;color:#8b937e;margin-left:7px}
.roster-sort-label{display:grid;gap:4px;font:9px Karla,sans-serif;color:#8e9987}
#roster-sort{max-width:145px;min-height:33px;background:#1c2220;color:#c6c9b4;border:1px solid #5c6046;border-radius:3px;padding:6px 8px;font:11px Karla,sans-serif}
#title-screen #resume-box #roster-list{padding:4px;gap:3px;min-height:285px;max-height:350px;background:#080c0d;border:1px solid #655f4b66;border-radius:4px}
#title-screen #resume-box .roster-entry{background:#111618;border:1px solid #333c354d;border-left:3px solid transparent;box-shadow:none;border-radius:2px;min-height:64px;padding:8px 10px;gap:12px}
#title-screen #resume-box .roster-entry.selected{background:linear-gradient(90deg,#5e5135,#3b3527);border-color:#8f7c4a;border-left-color:#e0c16d;box-shadow:inset 0 0 0 1px #b19b5322}
#title-screen #resume-box .roster-entry:hover{background:#30372b;border-color:#8d8056}
#title-screen #resume-box .roster-entry canvas{width:35px;height:43px}
#title-screen #resume-box .roster-entry strong{font:500 14px Karla,sans-serif;color:#e4dfcd}
#title-screen #resume-box .roster-entry small{font:11px Karla,sans-serif;color:#9aaa84;margin-top:4px}
#title-screen #resume-box .roster-entry[data-class=arcanist] small{color:#b59bc9}
#title-screen #resume-box .roster-entry[data-class=guardian] small{color:#b2b7ca}
#title-screen #resume-box .roster-entry .roster-level{display:grid;gap:3px;text-align:right;min-width:40px}
#title-screen #resume-box .roster-level small{font:8px Karla,sans-serif;letter-spacing:.08em;color:#9a947b;margin:0}
#title-screen #resume-box .roster-level strong{font:16px Cinzel,serif;color:#d7bd72}
#title-screen #resume-box .roster-main-actions{margin-top:auto;padding-top:17px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
#title-screen #resume-box .roster-main-actions button{font:12px Karla,sans-serif;padding:13px 10px;border:1px solid #8a794a;border-image:none;border-radius:3px;background:#332f23;color:#d2c7a4;box-shadow:inset 0 1px #c5b88411}
#title-screen #resume-box .roster-main-actions #continue{background:linear-gradient(#ae9759,#806b3e);color:#fcf2ca;border-color:#c0a368}
#title-screen #resume-box .roster-small-actions{justify-content:center;gap:7px;margin-top:12px}
#title-screen #resume-box .roster-small-actions button{font:10px Karla,sans-serif;padding:7px 9px;border:1px solid #5a5c4544;border-image:none;border-radius:2px;background:#20251f;color:#b7b99d}
#title-screen #resume-box #roster-delete{color:#db9d8c;border-color:#80513a55;background:#44251f}
#title-screen #character-maker.character-workshop{display:grid;grid-template-columns:minmax(160px,.8fr) minmax(0,1.8fr);gap:26px;width:100%;max-width:none}
.creator-preview-panel{text-align:center;border-right:1px solid #716a513f;padding-right:26px;min-width:0}
.creator-display{display:grid;place-items:center;min-height:300px;margin:13px 0 16px;border:1px solid #655f4b66;border-radius:4px;background:radial-gradient(ellipse at 50% 85%,#3e4c2625,transparent 55%),#070a0b}
#title-screen .creator-display .creator-preview{display:block;float:none;width:190px;height:238px;max-width:95%;margin:0;border:0;background:none;image-rendering:pixelated}
#title-screen #creator-title{font:500 22px Cinzel,serif;color:#decfa8;margin:0 0 8px}
#creator-role{font:12px Karla,sans-serif;color:#a79c80;margin:0 0 15px}.creator-preview-note{font:10px Karla,sans-serif;color:#7f927b}
.creator-editor{min-width:0}
#title-screen .creator-editor .choose-label h2{font:500 19px Cinzel,serif;color:#dfc992}
#title-screen .creator-editor #creator-back{font:11px Karla,sans-serif;padding:6px 0;margin:0 0 13px;border:0;border-image:none;background:none;color:#9eab92;box-shadow:none}
#title-screen .creator-editor .class-card{background:#171e1b;border-color:#5a5f44;border-radius:3px;padding:9px 4px 13px}
#title-screen .creator-editor .class-card.selected{border-color:#c3aa67;background:linear-gradient(#394133,#292e22);box-shadow:inset 0 0 0 1px #bda05644}
#title-screen .creator-editor .class-card canvas{width:65px;height:76px}
#title-screen .creator-editor .class-name{font:500 14px Cinzel,serif}
#title-screen .creator-editor .class-card small{font:8px Karla,sans-serif}
#title-screen .creator-editor #class-description{font:12px/1.5 Karla,sans-serif;margin:12px 0 16px;color:#9eab94;min-height:34px}
#title-screen .creator-editor .appearance-fields{background:#171e1a;border:1px solid #5a5f44;border-radius:3px;padding:13px;gap:10px}
#title-screen .creator-editor .appearance-fields legend{font:500 15px Cinzel,serif}
#title-screen .creator-editor .appearance-fields label{font:11px Karla,sans-serif}
#title-screen .creator-editor .appearance-fields select{font:12px Karla,sans-serif;min-height:34px;padding:7px 8px;border-color:#596044;border-radius:2px}
#title-screen .creator-editor .name-label{font:10px Karla,sans-serif;margin:15px 0 7px}
#title-screen .creator-editor .begin-row{gap:10px;flex-direction:row}
#title-screen .creator-editor .begin-row input{width:44%;font:13px Karla,sans-serif;min-height:40px;border-radius:3px}
#title-screen .creator-editor .begin-row .gold{font:700 12px Karla,sans-serif;padding:11px 16px;min-height:40px;background:linear-gradient(#c0a66b,#998049);border-color:#c6ae78;color:#111a12}
#title-screen .client-header .quiet{border-image:none;border:1px solid #746e4b55;background:#20271d;color:#c4c9af;border-radius:3px;box-shadow:none}
@media(orientation:landscape) and (max-height:600px){#title-screen .title-layout{padding:16px}#title-screen #resume-box{gap:20px}#title-screen #resume-box .roster-preview-panel{padding:0 20px 0 0}#title-screen #resume-box .roster-preview-stage{min-height:190px}#title-screen #resume-box .roster-preview-stage canvas{width:160px;height:192px}#title-screen #resume-box .roster-preview-panel h2{font-size:18px;margin:10px 0 5px}#title-screen #resume-box .roster-local{margin-bottom:9px}#title-screen #resume-box #roster-list{min-height:195px;max-height:220px}#title-screen #resume-box .roster-heading h2{font-size:18px}#title-screen #resume-box .roster-entry{min-height:53px;padding:5px 10px}#title-screen #resume-box .roster-entry canvas{width:30px;height:36px}#title-screen #resume-box .roster-main-actions{padding-top:12px}#title-screen #resume-box .roster-main-actions button{padding:10px}#title-screen #character-maker.character-workshop{grid-template-columns:minmax(155px,.8fr) minmax(0,1.8fr);gap:20px}.creator-preview-panel{padding-right:20px}.creator-display{min-height:240px;margin-top:10px}#title-screen .creator-display .creator-preview{width:160px;height:200px}#title-screen .creator-editor .class-card canvas{width:47px;height:55px}#title-screen .creator-editor .class-card{padding:4px 3px 8px}#title-screen .creator-editor .class-name{font-size:12px}#title-screen .creator-editor .appearance-fields{gap:8px;padding:10px}#title-screen .creator-editor .appearance-fields select{min-height:29px;padding:5px 7px}#title-screen .creator-editor #class-description{font-size:11px!important;margin:8px 0 10px!important;min-height:28px}#title-screen .creator-editor #creator-back{margin:0 0 8px}#title-screen .creator-editor .name-label{margin-top:10px}#title-screen .creator-editor .begin-row input,#title-screen .creator-editor .begin-row .gold{min-height:35px;padding:8px 12px}}
/* Directional dressing-room preview, rendered once at native integer sprite scale. */
#title-screen .creator-display,#title-screen #resume-box .roster-preview-stage{padding:0;overflow:hidden;aspect-ratio:4/5;min-height:0;max-width:270px;margin:12px auto;border:1px solid #626d5266;background:#0a1111;box-shadow:inset 0 0 25px #0004,0 8px 20px #0003}
#title-screen .creator-display .creator-preview,#title-screen #resume-box .roster-preview-stage canvas{display:block;width:100%;height:auto;max-width:none;margin:0;float:none;image-rendering:pixelated;object-fit:contain}
.preview-view-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:270px;margin:10px auto 17px}
#title-screen .preview-view-controls button{font:10px Karla,sans-serif;line-height:1.3;padding:7px 2px;border:1px solid #535f49;border-image:none;border-radius:3px;background:#18231c;color:#a9b89e;box-shadow:none;text-shadow:none;cursor:pointer}
#title-screen .preview-view-controls button[aria-pressed=true]{background:#574d30;border-color:#baa469;color:#f3dfaa}
#title-screen .preview-view-controls button:hover{border-color:#c1ac70;color:#f0e5c6}
@media(orientation:landscape) and (max-height:600px){#title-screen .creator-display,#title-screen #resume-box .roster-preview-stage{max-width:220px;min-height:0;margin-top:9px;margin-bottom:8px}.preview-view-controls{margin:7px auto 12px;max-width:220px}#title-screen .preview-view-controls button{font-size:9px;padding:6px 2px}}
/* Short landscape screens use a compact layout, not whole-page shrinking. */
@media(orientation:landscape) and (min-width:600px) and (max-height:600px){
#title-screen .client-header{height:46px;width:calc(100% - 32px)}#title-screen .client-logo{max-height:41px;width:112px}
#title-screen .client-lobby{width:calc(100% - 32px);max-width:1160px;margin-top:5px;padding-bottom:0;height:calc(var(--client-height,100dvh) - 56px);display:flex;flex-direction:column}
#title-screen .client-topline{flex:none;padding:4px 10px;min-height:30px}#title-screen .client-topline .quiet{font-size:10px;padding:4px}
#title-screen .title-layout{flex:1;min-height:0;padding:9px 12px;overflow:hidden}#title-screen .title-copy{height:100%;display:flex;flex-direction:column}
#title-screen #character-maker.character-workshop{flex:1;min-height:0;grid-template-columns:minmax(150px,.65fr) minmax(0,1.9fr);gap:17px}
#title-screen .creator-preview-panel{min-height:0;padding-right:17px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
#title-screen .creator-display{flex:1;min-height:0;max-height:none;width:100%;aspect-ratio:auto;margin:5px 0}
#title-screen .creator-display .creator-preview{width:100%;height:100%;object-fit:contain}
#title-screen .creator-preview-panel>.lobby-kicker{font-size:8px}#title-screen #creator-title,#title-screen #creator-role,#title-screen .creator-preview-note{display:none}
#title-screen .preview-view-controls{flex:none;width:100%;margin:4px 0 0;gap:3px}#title-screen .preview-view-controls button{padding:5px 2px;font-size:10px}
#title-screen .creator-editor{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding-right:2px}
#title-screen .creator-editor #creator-back{font-size:9px;margin:0 0 4px;padding:2px 0}#title-screen .creator-editor .choose-label{display:none}
#title-screen .creator-editor .class-grid{gap:7px}#title-screen .creator-editor .class-card{display:grid;grid-template-columns:36px 1fr;grid-template-rows:1fr 1fr;column-gap:5px;padding:5px 8px;align-items:center;text-align:left;min-height:51px}
#title-screen .creator-editor .class-card canvas{grid-row:1/3;width:34px;height:40px}#title-screen .creator-editor .class-name{font-size:13px;align-self:end}#title-screen .creator-editor .class-card small{font-size:8px;margin:2px 0 0;align-self:start}
#title-screen .creator-editor #class-description{display:none}
#title-screen .creator-editor .appearance-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 8px;padding:6px 9px;margin:5px 0 0}
#title-screen .creator-editor .appearance-fields legend{font-size:12px}#title-screen .creator-editor .appearance-fields label{font-size:9px;gap:3px}#title-screen .creator-editor .appearance-fields select{min-height:30px;padding:5px;font-size:12px}
#title-screen .creator-editor .name-label{margin:5px 0 3px;font-size:8px}#title-screen .creator-editor .begin-row{margin:0;gap:8px}#title-screen .creator-editor .begin-row input,#title-screen .creator-editor .begin-row .gold{min-height:32px;padding:7px 10px;font-size:12px}
#title-screen #save-note{flex:none;margin:4px 0 0;font-size:8px;line-height:1.2}#title-screen #title-import{flex:none;font-size:9px;padding:3px 0}
#title-screen #resume-box{flex:1;min-height:0;grid-template-columns:.8fr 1.2fr;gap:18px}#title-screen #resume-box .roster-preview-panel{display:flex;flex-direction:column;min-height:0;padding-right:18px}
#title-screen #resume-box .roster-preview-stage{min-height:0;flex:1;max-height:none;margin:0;width:100%;aspect-ratio:auto}#title-screen #resume-box .roster-preview-stage canvas{height:100%;width:100%;object-fit:contain}
#title-screen #resume-box .roster-preview-panel h2{margin:4px 0;font-size:16px}#title-screen #resume-box #resume-description{font-size:10px;margin:2px 0}#title-screen #resume-box .roster-local{display:none}
#title-screen #resume-box .roster-small-actions{margin:5px 0 0}#title-screen #resume-box .roster-small-actions button{font-size:9px;padding:5px}
#title-screen #resume-box .roster-heading{margin-bottom:7px}#title-screen #resume-box .roster-heading h2{font-size:17px}#title-screen #resume-box .roster-heading .lobby-kicker{display:none}
#title-screen #resume-box #roster-list{flex:1;min-height:0;max-height:none}#title-screen #resume-box .roster-entry{min-height:45px;padding:4px 9px}
#title-screen #resume-box .roster-main-actions{flex:none;margin:0;padding-top:7px}#title-screen #resume-box .roster-main-actions button{padding:9px}
}
@media(orientation:landscape) and (min-width:600px) and (max-height:600px){
#title-screen #character-maker.character-workshop{position:relative}
#title-screen .creator-editor #creator-back{position:absolute;top:-36px;left:0;z-index:2;margin:0;padding:5px 0;font-size:11px}
#title-screen:has(#creator-back:not([hidden])) .client-topline>span{visibility:hidden}
#title-screen .creator-editor .appearance-fields legend,#title-screen .creator-editor .name-label{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#title-screen .creator-editor .begin-row{margin-top:7px}
}