/* Profession selection stays usable with a touch keyboard and in landscape. */
body[data-screen=character] .lobby-layout{grid-template-columns:minmax(180px,1fr) minmax(660px,820px);max-width:1560px;gap:3vw}
.character-body{grid-template-columns:32% 1fr;gap:26px}.character-stage{min-width:0;min-height:320px;justify-content:center}.character-details{min-width:0}
.hero-art{background-size:400% 200%;background-position:0 0;width:100%;max-width:290px;transform-origin:50% 90%;animation:hero-idle 2.4s ease-in-out infinite}
.hero-art[data-pose=walk]{animation:hero-walk .44s ease-in-out infinite}.hero-art[data-pose=attack]{animation:hero-cast .65s ease-out infinite}
@keyframes hero-idle{50%{transform:translateY(-3px) scaleY(1.015)}}
@keyframes hero-walk{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes hero-cast{0%,100%{transform:translateX(0)}30%{transform:translateX(5px) rotate(-2deg)}}
.pedestal{top:70%;box-shadow:0 8px 30px #cbb66817;animation:pedestal-glow 3s ease-in-out infinite}
@keyframes pedestal-glow{50%{opacity:.45;transform:scaleX(.88)}}
.pose-controls{display:flex;gap:5px;margin-top:16px;flex-wrap:wrap;justify-content:center}.pose-controls button{padding:7px 9px;font-size:10px;background:#0e292680}.pose-controls button[aria-pressed=true]{border-color:#ddbd7c;color:#f7d998}
#profession-options{display:block;margin:0 0 12px;padding:0}#profession-options legend{font-size:12px;color:#e5d6af;width:100%;display:flex;justify-content:space-between;gap:10px}#profession-options legend small{font-size:9px;color:#9eb396}
.class-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.class-option{position:relative;cursor:pointer;display:flex;min-height:65px;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid #7e9c6747;border-radius:6px;background:#17322b;transition:border-color .18s,background .18s,transform .18s;overflow:hidden}
.class-option b{font-size:21px;font-weight:400;color:#d4b57c}.class-option span{font-size:10px;white-space:nowrap}.class-option input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.class-option:has(:checked){border-color:#e6c581;background:linear-gradient(135deg,#74613860,#254333);box-shadow:inset 0 0 18px #d7ba7110}.class-option:has(:checked) b{color:#f6dc9f;animation:sigil-glow 2.5s ease-in-out infinite}.class-option:hover{transform:translateY(-2px);border-color:#c5b077}.class-option:has(:focus-visible){outline:2px solid #f5da98;outline-offset:2px}.class-option:has(:disabled){opacity:.55;cursor:wait}
.class-summary{border-left:2px solid #c0a76d;padding:5px 11px;margin:10px 0 18px;background:#97ab720a;min-height:57px}.class-summary strong{font-size:13px;color:#ead3a0}.class-summary p{font-size:10px;color:#abbf9d;line-height:1.7;margin:5px 0 0}
#character-form{display:grid;grid-template-columns:1fr auto;column-gap:20px}#character-form>label,#hero-name,#name-hint{grid-column:1}#gender-options{grid-column:2;grid-row:1/4;margin:0;align-self:center;gap:12px}#gender-options legend{font-size:11px}#create-character{grid-column:1/3;margin-top:18px}#change-class{margin:12px 0 5px}#existing-name{margin:10px 0}#existing-character .small{margin:10px 0 14px}
.screen:not([hidden]){animation:screen-enter .38s cubic-bezier(.2,.8,.2,1) both}.story{animation:story-enter .9s ease-out both}.lobby-card{animation:screen-enter .65s .08s both}.server{transition:transform .18s,background .18s,border-color .18s}.server:hover{transform:translateX(4px)}button{transition:filter .18s,background .18s,box-shadow .18s}button:active{filter:brightness(.9)}.primary{background-size:180% 100%;animation:button-light 5s ease-in-out infinite}.scenery{animation:scenic-drift 32s ease-in-out infinite alternate;transform:scale(1.025)}
@keyframes screen-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes story-enter{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}@keyframes scenic-drift{to{transform:scale(1.06) translateX(-.6%)}}@keyframes button-light{50%{background-position:100% 0;box-shadow:0 0 22px #d7b45c22}}@keyframes sigil-glow{50%{text-shadow:0 0 13px #ead89788}}
.motion-off *, .motion-off *:before,.motion-off *:after{animation-play-state:paused!important;transition:none!important}
@media(max-width:1150px){body[data-screen=character] .story{display:none}body[data-screen=character] .lobby-layout{display:block;max-width:900px}.character-stage{min-height:270px}}
@media(orientation:landscape) and (max-height:600px){body[data-screen=character] .lobby-layout{max-width:950px;min-height:0;padding:0 3vw 6px}.character-body{grid-template-columns:26% 1fr;gap:20px}.character-stage{min-height:200px}.hero-art{max-width:205px}.lobby-card{padding:14px 22px}.steps{margin-bottom:10px}.character-heading{margin-bottom:4px}.character-heading h2{font-size:17px;margin-bottom:5px}.class-options{gap:5px}.class-option{min-height:42px;flex-direction:row;gap:5px}.class-option b{font-size:16px}.class-option span{font-size:9px}#profession-options{margin-bottom:5px}#profession-options legend{font-size:10px;margin-bottom:6px}#profession-options legend small{font-size:8px}.class-summary{min-height:0;margin:5px 0 9px;padding:3px 8px}.class-summary strong{font-size:10px}.class-summary p{font-size:8px;margin:2px 0}#character-form{grid-template-columns:1fr auto;gap:0 18px}#gender-options{grid-column:2;grid-row:1/4;margin:0}#gender-options legend{font-size:9px;margin-bottom:6px}#character-form label{font-size:9px}#hero-name{padding:7px;margin:3px 0}#name-hint{font-size:7px}#create-character{margin-top:8px;padding:8px}.pose-controls{margin-top:8px;gap:3px}.pose-controls button{font-size:8px;padding:6px}.class-badge{font-size:8px}#existing-name{font-size:18px;margin:4px 0}#existing-character .muted{margin:3px 0}#existing-character .small{margin:4px 0 8px;font-size:8px}#change-class{margin:4px 0}.lobby-status{margin-top:5px}}
@media(orientation:landscape) and (max-height:430px){.lobby-header{min-height:36px;padding:4px 3vw}body[data-screen=character] .lobby-card{padding:10px 18px}body[data-screen=character] .steps{margin-bottom:7px}.character-stage{min-height:190px}.hero-art{max-width:180px}.class-option{min-height:32px}.class-summary{margin:4px 0 6px}.class-summary p{font-size:8px}#hero-name{padding:5px}#create-character{padding:7px;margin-top:5px}.pose-controls button{padding:5px}.lobby-footer{font-size:6px;padding:2px 3vw}.text-button{font-size:9px;padding:4px 0}.pedestal{top:67%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.scenery{transform:none}.ember{opacity:.3}}

@media(orientation:landscape) and (min-height:601px) and (max-height:800px){body[data-screen=character] .lobby-header{padding-top:15px;padding-bottom:15px}body[data-screen=character] .lobby-layout{min-height:0;padding-top:12px;padding-bottom:18px}body[data-screen=character] .lobby-card{padding:25px}body[data-screen=character] .steps{margin-bottom:22px}body[data-screen=character] .story{padding-bottom:20px}}