#character-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:12px 0}button.character-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:116px;padding:6px 3px;border:1px solid #94825c66;background:#142b28b3;color:#e7ddc6;border-radius:12px;font:inherit;font-size:11px;cursor:pointer}.character-slot[aria-pressed=true]{border-color:#e5c27e;background:#69562e99;box-shadow:0 0 0 1px #e5c27e}.character-slot strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.character-slot small{font-size:9px;white-space:nowrap;color:#c0cbbb}.slot-portrait{width:56px;height:56px;background-size:400% 200%;background-repeat:no-repeat;image-rendering:pixelated}#progression-hint{font-size:12px;color:#e0c890;border-left:2px solid #b49455;padding:5px 10px;margin:8px 0}.character-slot:focus-visible{outline:3px solid #f7cc6f;outline-offset:2px}body[data-screen=character] .story{display:none}body[data-screen=character] .lobby-layout{grid-template-columns:minmax(0,860px);justify-content:center}body[data-screen=character] .lobby-card{width:100%;max-width:860px}#profession-options[hidden]{display:none!important}@media(orientation:landscape) and (max-height:600px){#character-slots{gap:5px;margin:4px 0}button.character-slot{min-height:65px;font-size:10px;padding:3px}.slot-portrait{height:32px;width:32px}.character-slot small{font-size:8px}#progression-hint{font-size:10px;margin:3px 0;padding:2px 7px}.character-heading h2{font-size:22px}body[data-screen=character] .lobby-card{padding:10px 18px}.mobile-viewport.keyboard-open #character-slots,.mobile-viewport.keyboard-open #progression-hint{display:none}}
@media(orientation:landscape) and (min-height:601px) and (max-height:800px){body[data-screen=character] .lobby-card{padding:18px 24px}body[data-screen=character] .steps{margin-bottom:8px}.character-heading h2{font-size:24px;margin:4px 0}.character-heading .eyebrow{margin:0}button.character-slot{min-height:82px}.slot-portrait{width:40px;height:40px}.character-stage{min-height:230px}.hero-art{max-width:220px}.class-summary{min-height:0;margin:5px 0 9px}#progression-hint{margin:5px 0}.lobby-status{margin-top:3px}#character-slots{margin:7px 0}}
@media(orientation:landscape) and (max-height:600px){
 .mobile-viewport body[data-screen=character] .lobby-layout{transform:translateX(-50%)!important;height:calc(var(--visible-height,100dvh) - 46px)!important;padding:0 10px 4px!important;max-width:100%}
 body[data-screen=character] .lobby-card{height:100%;display:flex;flex-direction:column;min-height:0;padding:8px 14px}
 body[data-screen=character] .steps{display:none}
 #character-screen:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
 .character-heading{flex-shrink:0}.character-heading h2{font-size:18px;margin:1px 0}.character-heading .eyebrow{font-size:8px;margin:0}
 #character-slots{flex-shrink:0}button.character-slot{min-height:54px}.slot-portrait{width:24px;height:24px}
 #progression-hint{flex-shrink:0;font-size:10px;line-height:1.3}
 .character-body{flex:1;min-height:0;grid-template-columns:24% 1fr!important;gap:12px!important}
 .character-stage{min-height:0!important;overflow:hidden}.hero-art{width:120px;max-width:100%;flex-shrink:1}.character-stage .class-badge,.pose-controls{display:none}
 .character-details{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding-right:6px}
 .character-details .primary,#open-wardrobe{min-height:44px;font-size:12px}#character-form{touch-action:pan-y}#existing-name{font-size:16px}
 #back-servers{flex-shrink:0;align-self:flex-start;min-height:24px;padding:3px 0}.lobby-status{margin:2px 0;font-size:10px;min-height:0}.lobby-status:empty{display:none}
 body[data-screen=character] #switch-account{display:none}
 .mobile-viewport.keyboard-open .character-details{overflow-y:auto}.mobile-viewport.keyboard-open .character-body{display:block}
}