/* Scoped menu layout: no scale/zoom, no clipped controls, no document scrolling. */
#startScreen{inset:0;transform:none;width:100%;height:100dvh;max-height:100dvh;overflow:hidden;display:grid;grid-template-columns:minmax(300px,46%) minmax(0,1fr);grid-template-rows:68px minmax(0,1fr) 144px;padding:0;gap:0}
#startScreen>*{min-width:0;min-height:0}
#startScreen .lobby-header{grid-area:1/1/2/3;padding:8px 24px;min-height:0;gap:28px}
#startScreen #gameTitle{margin:0}#startScreen #gameTitle img{width:168px;height:50px;max-width:168px}
#startScreen .lobby-tab{display:none}
#startScreen .account-panel{position:relative;grid-area:1/2/2/3;align-self:center;justify-self:end;top:auto;right:auto;margin:0 152px 0 0;padding:0;width:auto;max-width:none;height:auto;flex-wrap:nowrap;gap:8px;z-index:14}
#startScreen .account-panel #accountNotice{position:absolute;top:100%;right:0;max-width:280px;font-size:10px;line-height:12px}
body:has(#startScreen:not([hidden])) .settings-button{top:18px;right:24px;width:112px;height:32px;padding:0 10px;font-size:11px;display:flex;align-items:center;justify-content:center;gap:8px}
#startScreen .roster-panel{grid-area:2/1/3/2;align-self:center;justify-self:center;width:min(100%,550px);max-height:100%;padding:12px 24px!important}
#startScreen .court-badge{margin:0 0 8px;font-size:10px}
#startScreen .lobby-title{font-size:clamp(28px,3vw,44px);line-height:1.05;margin:0}
#startScreen .roster-intro{font-size:13px;line-height:1.35;margin:10px 0 12px}
#startScreen .character-options{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
#startScreen .character-options .character-card{height:clamp(80px,calc((100dvh - 390px)/2),185px)}
#startScreen .character-card img{height:clamp(100px,calc((100dvh - 350px)/2),195px);width:clamp(100px,calc((100dvh - 350px)/2),195px);right:0}
#startScreen .character-options .character-caption{padding:22px 10px 8px;gap:2px;font-size:15px}
#startScreen .character-caption small{font-size:11px;line-height:1.2}
#startScreen #characterHint{font-size:12px;line-height:1.35;margin:10px 0 0}
#startScreen .character-showcase{display:block;grid-area:2/2/3/3;width:min(95%,450px);max-width:none;margin:0 0 12px;padding:12px;align-self:end}
#startScreen #showcaseName{font-size:clamp(28px,3vw,46px)}#startScreen #showcaseDescription{font-size:13px;line-height:1.35;margin:8px 0}
#startScreen .lobby-footer{grid-area:3/1/4/3;display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.4fr);padding:12px 24px;gap:24px;margin:0;align-items:center}
#startScreen .lobby-match{display:grid;grid-template-columns:1fr;gap:5px;min-width:0}
#startScreen .lobby-match>span{display:none}
#startScreen #changeMapButton{margin:0;width:100%;min-width:0;justify-content:space-between;padding:8px 12px}
#startScreen #changeMapButton strong{font-size:14px}#startScreen #changeMapButton small{font-size:10px;line-height:1.25;margin-top:3px}
#startScreen #guestNameField{display:flex;align-items:center;gap:8px;min-width:0;font-size:10px;margin:0}
#startScreen #guestNickname{flex:1;min-width:0;width:100%;height:30px;padding:5px 8px;font-size:13px}
#startScreen .lobby-launch{width:100%;min-width:0}#startScreen .mode-actions{grid-template-columns:1fr 1fr;gap:10px}
#startScreen .mode-actions button,#startScreen #startButton{width:100%;height:64px;min-height:0;padding:10px 12px;margin:0;font-size:13px;gap:5px;line-height:1.2}
#startScreen .mode-actions small{font-size:11px;line-height:1.3;white-space:normal}
#startScreen #loadingStatus{display:block;font-size:11px;line-height:1.3;margin:7px 0 0;text-align:right}
@media(max-width:1000px){#startScreen .account-panel #accountName{max-width:100px}#startScreen{grid-template-columns:48% 52%}#startScreen .roster-panel{padding-inline:18px!important}#startScreen .lobby-header{padding-inline:18px}}
@media(max-height:720px){#startScreen{grid-template-rows:60px minmax(0,1fr) 128px}#startScreen .court-badge{display:none}#startScreen .lobby-title{font-size:28px}#startScreen .lobby-title br{display:none}#startScreen .roster-intro{margin:7px 0 9px;font-size:12px}#startScreen .roster-panel{padding-block:8px!important}#startScreen .character-options .character-card{height:clamp(70px,calc((100dvh - 320px)/2),140px)}#startScreen .character-card img{height:125px;width:125px}#startScreen #characterHint{margin-top:7px}#startScreen .lobby-footer{padding-block:8px}body:has(#startScreen:not([hidden])) .settings-button{top:14px}#startScreen .character-showcase{margin-bottom:4px}#startScreen .showcase-label{font-size:9px}#startScreen #showcaseName{font-size:28px}#startScreen #showcaseDescription{font-size:12px}}
@media(max-width:760px){#startScreen{grid-template-columns:1fr;grid-template-rows:56px 38px minmax(0,1fr) 150px;background:linear-gradient(120deg,#0d172beb,#142339c9)}#startScreen .lobby-header{grid-area:1/1/2/2;padding:4px 16px}#startScreen #gameTitle img{width:145px;height:46px}#startScreen .account-panel{grid-area:2/1/3/2;justify-self:stretch;justify-content:flex-start;margin:0;padding:0 16px;gap:8px}#startScreen .account-panel #accountName{margin-right:auto}#startScreen .account-panel button{height:30px}#startScreen .account-panel #accountNotice{top:4px;left:120px;right:auto;max-width:130px;font-size:9px}#startScreen .roster-panel{grid-area:3/1/4/2;width:min(100%,600px);padding:8px 16px!important}#startScreen .character-showcase{display:none}#startScreen .lobby-title{font-size:26px}#startScreen .lobby-title br{display:none}#startScreen .court-badge{display:none}#startScreen .roster-intro{font-size:12px;margin:6px 0 8px}#startScreen .character-options .character-card{height:clamp(72px,calc((100dvh - 365px)/2),185px)}#startScreen .character-card img{height:135px;width:135px}#startScreen .lobby-footer{grid-area:4/1/5/2;grid-template-columns:1fr;padding:8px 16px;gap:8px}#startScreen .lobby-match{grid-template-columns:1fr 1fr;gap:10px;align-items:center}#startScreen #guestNameField{display:grid;gap:3px}#startScreen #guestNickname{height:30px}#startScreen #changeMapButton{padding:6px 8px;gap:8px}#startScreen #changeMapButton em{font-size:10px}#startScreen #changeMapButton small{font-size:9px}#startScreen .mode-actions button,#startScreen #startButton{height:48px;padding:6px 9px;font-size:12px;gap:3px}#startScreen .mode-actions small{font-size:10px}#startScreen #loadingStatus{margin-top:4px;text-align:center;font-size:10px}body:has(#startScreen:not([hidden])) .settings-button{top:12px;right:16px;height:30px}#startScreen #characterHint{font-size:11px;line-height:1.3;margin-top:6px}}
@media(max-height:500px) and (min-width:600px){#startScreen{grid-template-columns:54% 46%;grid-template-rows:52px minmax(0,1fr) 104px}#startScreen .lobby-header{grid-area:1/1/2/3}#startScreen .account-panel{grid-area:1/2/2/3;margin-right:126px;padding:0;gap:5px}#startScreen .account-panel #accountName{display:none}#startScreen .account-panel button{padding:0 8px;font-size:11px}#startScreen .roster-panel{grid-area:2/1/3/2;padding:6px 16px!important}#startScreen .lobby-title{font-size:23px}#startScreen .roster-intro{font-size:11px;margin:4px 0 6px}#startScreen .character-options{gap:6px}#startScreen .character-options .character-card{height:64px}#startScreen .character-options .character-caption{font-size:13px;padding:14px 7px 5px}#startScreen .character-caption small{font-size:10px}#startScreen .character-card img{height:87px;width:87px}#startScreen #characterHint{font-size:11px;margin-top:5px}#startScreen .character-showcase{display:block;grid-area:2/2/3/3}#startScreen .showcase-label{display:none}#startScreen #showcaseName{font-size:26px}#startScreen #showcaseDescription{font-size:11px}#startScreen .showcase-attributes span{font-size:9px;padding:4px}#startScreen .lobby-footer{grid-area:3/1/4/3;grid-template-columns:1fr 1.2fr;padding:6px 16px;gap:14px}#startScreen .lobby-match{grid-template-columns:1fr;gap:4px}#startScreen #guestNameField{display:flex}#startScreen #changeMapButton{padding:5px 8px}#startScreen #guestNickname{height:25px}#startScreen .mode-actions button,#startScreen #startButton{height:51px;padding:6px 8px;font-size:11px}#startScreen .mode-actions small{font-size:10px}body:has(#startScreen:not([hidden])) .settings-button{top:10px;right:16px;width:100px}}
/* Map chooser reflows into compact rows on short/narrow screens. */
#mapDialog{width:min(1160px,96vw);max-height:96dvh;padding:22px;overflow:hidden}#mapStyleGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.map-card-copy{padding:12px;gap:7px}.map-card-copy strong{font-size:18px}.map-card-copy>span{font-size:12px;min-height:96px}#mapStyleGrid canvas{height:135px}.map-dialog-top h2{font-size:28px}.map-dialog-top p{margin-bottom:16px}.map-dialog-bottom{margin-top:16px}
@media(max-height:720px),(max-width:900px){#mapDialog{padding:16px}#mapStyleGrid{grid-template-columns:1fr;gap:6px}.map-style-card{display:flex;align-items:center;min-height:0}#mapStyleGrid canvas{width:62px;height:62px;flex:0 0 62px}.map-card-copy{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:4px 12px;padding:8px 32px 8px 10px;width:100%}.map-card-copy small,.map-card-copy b{display:none}.map-card-copy strong{font-size:15px}.map-card-copy>span{min-height:0;font-size:11px;line-height:1.3}.map-card-number{display:none}.map-style-card input{right:8px;top:calc(50% - 9px);margin:0}.map-dialog-top h2{font-size:23px;margin:5px 0}.map-dialog-top p{font-size:12px;margin-bottom:10px}.map-dialog-bottom{gap:8px;margin-top:10px}.map-dialog-bottom button{padding:11px;font-size:10px}#mapPreviewNote{font-size:10px;margin:8px 0 0}}
@media(max-width:480px){#mapDialog{padding:12px}.map-dialog-top h2{font-size:21px}.map-dialog-top p{font-size:11px}#mapStyleGrid canvas{width:43px;height:64px;flex-basis:43px}.map-card-copy{grid-template-columns:1fr;gap:3px;padding:6px 29px 6px 8px}.map-card-copy strong{font-size:14px}.map-card-copy>span{font-size:10px}.map-dialog-bottom{display:grid;grid-template-columns:1fr 1fr}.map-dialog-bottom label{grid-column:1/-1}.map-dialog-bottom input{padding:8px;margin-top:4px}}
@media(max-height:500px) and (min-width:600px){#mapStyleGrid{grid-template-columns:repeat(5,minmax(0,1fr))}.map-style-card{display:block}#mapStyleGrid canvas{display:none}.map-card-copy{display:flex;flex-direction:column;align-items:start;padding:24px 8px 8px;gap:5px}.map-card-copy>span{font-size:10px;line-height:1.25}.map-style-card input{top:6px;right:6px}.map-card-copy strong{font-size:13px}.map-dialog-top p{margin-bottom:7px}.map-dialog-bottom input{padding:8px}.map-dialog-top h2{font-size:21px}}
@media(max-width:480px){#startScreen{grid-template-rows:56px 38px minmax(0,1fr) 166px}#startScreen .character-options .character-card{height:clamp(68px,calc((100dvh - 405px)/2),185px)}#startScreen #changeMapButton small{font-size:8px}#mapDialog .map-dialog-top h2{font-size:18px;line-height:1.1;margin:4px 0}#mapDialog .map-dialog-top p{font-size:10px;line-height:1.2;margin:4px 0 8px}#mapStyleGrid canvas{height:42px;width:42px;flex-basis:42px}#mapStyleGrid .map-card-copy>span{display:none}#mapStyleGrid .map-card-copy{padding-block:6px}#mapDialog .map-dialog-bottom{margin-top:8px}#mapPreviewNote{font-size:9px;line-height:1.2}#mapDialog .map-dialog-bottom button{padding:8px;font-size:9px}}