/* Selection composition and shared phone constraints. */
#lobby:has(.setupPage){background:linear-gradient(110deg,#292632f5,#382b31ed),url('../围坐场景校正源图.png') center/cover}
#lobby .setupPage{max-width:1120px;width:100%;box-sizing:border-box;min-height:calc(100dvh - 150px);display:flex;flex-direction:column;justify-content:center;margin:auto;padding:24px 0}
#lobby .setupPage>h1{font-size:clamp(30px,4vw,48px);background:none;border:0;box-shadow:none;text-shadow:none;transform:none;padding:0;margin:0 0 12px;color:#fff0cf;line-height:1.3}#lobby .setupPage>h1::before,#lobby .setupPage>h1::after{content:none}#lobby .setupPage>p{font-size:15px;color:#cdbda1;margin:0 0 30px;line-height:1.7}
.setupPage .pickGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 26px}#lobby .setupPage .pickGrid button{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:240px;padding:24px 20px;background:#fff1cf;border:2px solid #b69b6c;border-radius:16px;box-shadow:0 5px 0 #1b1823;text-align:left;gap:12px;margin:0;box-sizing:border-box}#lobby .setupPage .pickGrid button.selected{background:#ffe099;border:2px solid #ff8b52;box-shadow:0 0 0 3px #f5bb492b,0 5px 0 #1b1823}.pickMark{position:absolute;right:14px;top:14px;font-size:11px;color:#8a7457;background:#e8d7b5;padding:4px 8px;border-radius:6px}.selected .pickMark{background:#d85a36;color:#fff8e6}.pickIcon{width:50px;height:50px;display:grid;place-items:center;color:#93612e;margin-bottom:2px}.pickIcon svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.pickIcon img{width:64px;height:64px;object-fit:contain}.pickName{font-size:23px;color:#3f2d31;line-height:1.4}.pickDescription{font-size:14px;font-weight:400;line-height:1.8;color:#765b42;flex:1}.pickOwner{font-size:11px;color:#a18560;font-weight:400}.selectionFooter{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid #6b5748;padding-top:22px}.selectionSummary{display:flex;flex-direction:column;gap:8px;min-width:0}.selectionSummary small{font-size:12px;color:#c1aa87}.selectionSummary strong{font-size:19px;line-height:1.5;color:#ffe2a5}#lobby .selectionFooter button{margin:0;padding:16px 32px;font-size:18px;flex-shrink:0;border-radius:10px}
@media(max-width:850px){.setupPage .pickGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.setupPage .pickGrid button{min-height:220px}}
@media(max-width:620px){
html,body{max-width:100%;overflow-x:hidden}
#lobby{padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important;scroll-padding-top:85px}
#pageBack{top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));min-width:76px;min-height:44px}
#lobby .setupPage{min-height:0;justify-content:flex-start;padding:8px 0 calc(150px + env(safe-area-inset-bottom));max-width:100%}#lobby .setupPage>h1{font-size:30px}#lobby .setupPage>p{font-size:13px;margin-bottom:22px}.setupPage .pickGrid{gap:12px;margin:0}#lobby .setupPage .pickGrid button{min-height:224px;padding:18px 14px;gap:10px}.pickName{font-size:20px}.pickDescription{font-size:13px;line-height:1.7}.pickMark{font-size:10px;top:10px;right:10px}.pickIcon{width:44px;height:44px}.pickIcon svg{width:34px;height:34px}.selectionFooter{position:fixed;bottom:0;left:0;right:0;padding:16px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#322a33f5;border-top:1px solid #8e7251;z-index:4;gap:12px;box-sizing:border-box}.selectionSummary{flex:1}.selectionSummary strong{font-size:14px;line-height:1.6;overflow-wrap:anywhere}.selectionSummary small{font-size:11px}#lobby .selectionFooter button{font-size:15px;padding:14px 18px;min-height:48px}
#lobby .coverBox{padding-bottom:env(safe-area-inset-bottom)}#lobby .coverBox .frontActions{grid-template-columns:1fr;gap:14px}#lobby .coverBox .frontActions button{min-height:72px;font-size:19px}.coverBox small{overflow-wrap:anywhere}
#lobby .collectionPage{padding-bottom:calc(24px + env(safe-area-inset-bottom))}.collectionPage .actorGrid button{min-height:44px}.collectionPage .actorGrid h2{overflow-wrap:anywhere}
.deskToolbar input{box-sizing:border-box;max-width:100%}.deskToolbar button,.deskActions button{min-height:44px}.deskSeat{min-width:44px}.tableHallCenter{max-width:100%;box-sizing:border-box}
.modal{padding:16px!important;box-sizing:border-box}.modal>.box{box-sizing:border-box;width:min(100%,540px)!important;max-width:100%!important;max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}.modal button{min-height:44px}.modal input,.modal select{font-size:16px!important;min-width:0;max-width:100%;box-sizing:border-box}
#lesson{box-sizing:border-box;min-width:0}#lesson button{min-height:44px}.tutorialProgress{scrollbar-width:thin}#skillList{min-width:0}#skillList .skill{overflow-wrap:anywhere}#boardWrap{max-width:100%;box-sizing:border-box}
}
@media(max-width:360px){#lobby .selectionFooter button{padding:13px 12px;font-size:14px}.pickName{font-size:18px}#lobby .setupPage .pickGrid button{padding:18px 12px}}
/* Back belongs to the page flow, never to an overlay layer. */
#pageNavigation{position:static;display:flex;align-items:center;width:100%;grid-column:1/-1;box-sizing:border-box;margin:0 0 20px;padding:0;z-index:auto}
#pageNavigation #pageBack{position:static!important;inset:auto!important;z-index:auto!important;margin:0;transform:none;flex:none}
body.hasPageBack #lobby:not(:has(.coverBox)){padding-top:24px!important}
body.hasPageBack:has(#lobby[hidden])>header{padding-top:12px!important}
body.trainingMode main{padding-top:8px!important}
@media(max-width:620px){body.hasPageBack #lobby:not(:has(.coverBox)){padding-top:max(16px,env(safe-area-inset-top))!important}#pageNavigation{margin-bottom:16px}}