/* Full viewport stage; keep the original actors and controls at readable sizes. */
@media(orientation:landscape){
 .desktop-client #welcome:is([data-mode=select],[data-mode=create]){position:fixed;inset:0;box-sizing:border-box;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;mask-image:none;overflow:hidden;background-color:#0b0302;background-size:100% 100%}
 .desktop-client #welcome #character-select{box-sizing:border-box;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:3px;width:min(1100px,100%);height:100%;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
 .desktop-client #welcome #character-select[hidden]{display:none}
 .desktop-client #welcome #character-slots{min-height:0;margin:0;align-items:center}
 .desktop-client #welcome #selection-error{margin:0}
 .desktop-client #welcome #character-select .selection-actions{margin:0;justify-content:center}
 .desktop-client #welcome[data-mode=create] #create-form{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(840px,calc(100% - 24px));height:min(360px,calc(100dvh - 24px))}
}
/* Original cloth folds shrink towards the outer edges as the center opens. */
.desktop-client #welcome .selection-curtains{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;isolation:isolate;background:#110703}
.desktop-client #welcome .selection-curtains.opening{background:transparent}
.selection-curtain{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(90deg,#0009,transparent 12%,#a1532225 28%,#0006 43%,#9c522521 62%,#0007 86%,transparent),url('/assets/ui/creation-room.png');background-size:100% 100%,650% 240%;background-position:center,25% 55%;box-shadow:inset 0 16px 22px #0b050bbb,0 4px 20px #000c;will-change:transform;border-bottom:3px solid #8d602bb3}
.selection-curtain-left{left:0;border-right:2px solid #a16d32;background-position:center,25% 55%;transform-origin:top left}
.selection-curtain-right{right:0;border-left:2px solid #a16d32;background-position:center,75% 55%;transform-origin:top right}
.selection-curtains.opening .selection-curtain-left{animation:selection-curtain-left 1.8s cubic-bezier(.42,0,.25,1) both}
.selection-curtains.opening .selection-curtain-right{animation:selection-curtain-right 1.8s cubic-bezier(.42,0,.25,1) both}
@keyframes selection-curtain-left{0%,12%{transform:translateX(0) scaleX(1)}82%{transform:translateX(-12%) scaleX(.24);opacity:1}100%{transform:translateX(-18%) scaleX(.18);opacity:0}}
@keyframes selection-curtain-right{0%,12%{transform:translateX(0) scaleX(1)}82%{transform:translateX(12%) scaleX(.24);opacity:1}100%{transform:translateX(18%) scaleX(.18);opacity:0}}
@media(prefers-reduced-motion:reduce){.selection-curtains{display:none}}
