/* Keep the original lobby artwork and component skins; tune only mobile geometry. */
#mobileCharacterPreview,#mobileRosterHint{display:none}
body.mobile-mode #startScreen{
 grid-template-columns:minmax(0,64%) minmax(0,36%);
 grid-template-rows:56px minmax(170px,1fr) auto;
 gap:10px 0;padding:0 0 12px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;
}
body.mobile-mode #startScreen .lobby-header{grid-area:1/1/2/2;min-height:0;padding:8px 16px;gap:16px}
body.mobile-mode #startScreen #gameTitle img{width:138px;max-width:138px;height:44px}
body.mobile-mode #startScreen .reference-nav{display:none}
body.mobile-mode #startScreen .account-panel{
 grid-area:1/2/2/3;align-self:center;justify-self:end;max-width:none;width:auto;margin:0 112px 0 0;padding:5px 7px;gap:8px;flex-wrap:nowrap;
}
body.mobile-mode #startScreen .account-panel #accountName{display:none}
body.mobile-mode #startScreen .account-panel button{width:auto;min-width:0;height:34px;padding:6px 10px;font-size:11px;white-space:nowrap}
body.mobile-mode #startScreen .account-panel #accountNotice{max-width:210px;font-size:10px}
body.mobile-mode:has(#startScreen:not([hidden])) #settingsButton{top:11px;right:max(16px,env(safe-area-inset-right));width:88px;height:34px;padding:6px 10px;font-size:10px}
body.mobile-mode:has(#startScreen:not([hidden])) #settingsButton kbd{display:none}
body.mobile-mode #startScreen .roster-panel{grid-area:2/1/3/2;align-self:center;width:100%;max-height:none;padding:0 16px!important}
body.mobile-mode #startScreen .lobby-title{font-size:24px;line-height:1.1;margin:0;transform:none}
body.mobile-mode #startScreen .lobby-title em{display:inline;font-size:1.1em}
body.mobile-mode #startScreen .roster-intro{font-size:11px;line-height:1.4;margin:7px 0 12px}
body.mobile-mode #startScreen .character-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
body.mobile-mode #startScreen .character-options .character-card{height:clamp(76px,22dvh,110px);min-height:0;border-radius:12px}
body.mobile-mode #startScreen .character-card img{width:100%;height:90%;right:0;bottom:18%}
body.mobile-mode #startScreen .character-options .character-caption{padding:16px 4px 7px;min-height:0;align-items:center;text-align:center;font-size:11px;line-height:1.2}
body.mobile-mode #startScreen .character-caption small{display:none}
body.mobile-mode #startScreen .character-number{top:5px;left:5px;padding:2px 4px;font-size:9px}
body.mobile-mode #startScreen .selected-check{width:18px;height:18px;top:4px;right:4px;font-size:11px}
body.mobile-mode #startScreen #characterHint{font-size:10px;line-height:1.4;margin:10px 0 0;padding:4px 8px}
body.mobile-mode #startScreen .character-showcase{display:block;grid-area:2/2/3/3;align-self:end;justify-self:center;width:90%;padding:8px 10px;margin:0 12px 8px 0}
body.mobile-mode #startScreen .showcase-label{font-size:9px;padding:3px 8px}
body.mobile-mode #startScreen #showcaseName{font-size:25px;line-height:1.1;margin:5px 0}
body.mobile-mode #startScreen #showcaseDescription{font-size:11px;line-height:1.4;margin:5px 0 8px}
body.mobile-mode #startScreen .showcase-attributes{gap:6px}
body.mobile-mode #startScreen .showcase-attributes span{font-size:9px;padding:5px 7px}
body.mobile-mode #startScreen .lobby-footer{
 grid-area:3/1/4/3;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-self:end;align-items:center;
 margin:0 16px;padding:10px 12px;gap:18px;
}
body.mobile-mode #startScreen .lobby-match{grid-template-columns:minmax(0,1fr);gap:8px;align-items:center}
body.mobile-mode #startScreen #changeMapButton{min-height:44px;padding:7px 10px;gap:10px}
body.mobile-mode #startScreen #changeMapButton strong{font-size:13px}
body.mobile-mode #startScreen #changeMapButton small{font-size:9px;line-height:1.3;margin-top:3px}
body.mobile-mode #startScreen #changeMapButton em{font-size:9px;white-space:nowrap}
body.mobile-mode #startScreen #guestNameField{display:flex;align-items:center;gap:8px;margin:0;font-size:9px}
body.mobile-mode #startScreen #guestNameField[hidden]{display:none}
body.mobile-mode #startScreen #guestNickname{width:100%;min-width:0;height:32px;padding:6px 8px;font-size:12px}
body.mobile-mode #startScreen .lobby-launch{display:grid;gap:8px}
body.mobile-mode #startScreen .game-mode-label{margin:0;font-size:10px;gap:10px}
body.mobile-mode #startScreen #gameMode{height:32px;min-width:0;font-size:11px;padding:5px 8px}
body.mobile-mode #startScreen .mode-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
body.mobile-mode #startScreen .mode-actions button,body.mobile-mode #startScreen #startButton{height:52px;min-height:44px;padding:7px 5px;font-size:11px;line-height:1.2;gap:4px}
body.mobile-mode #startScreen .mode-actions small{font-size:9px;line-height:1.3;white-space:normal;margin:0}
body.mobile-mode #startScreen #loadingStatus{font-size:9px;line-height:1.3;margin:0;text-align:center}
@media(max-width:700px){
 body.mobile-mode #startScreen{grid-template-columns:minmax(0,65%) minmax(0,35%);grid-template-rows:56px minmax(218px,1fr) auto;gap:10px 0}
 body.mobile-mode #startScreen .character-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 body.mobile-mode #startScreen .character-options .character-card{height:66px}
 body.mobile-mode #startScreen .character-card img{width:72%;height:100%;right:0;bottom:10%}
 body.mobile-mode #startScreen .character-options .character-caption{padding:16px 4px 5px;font-size:10px}
 body.mobile-mode #startScreen .roster-intro{margin:6px 0 10px}
 body.mobile-mode #startScreen .lobby-title{font-size:21px}
 body.mobile-mode #startScreen .lobby-footer{gap:12px;margin-inline:12px;padding:10px}
 body.mobile-mode #startScreen .mode-actions{gap:6px}
 body.mobile-mode #startScreen .mode-actions button,body.mobile-mode #startScreen #startButton{font-size:10px}
 body.mobile-mode #startScreen .mode-actions small{font-size:8px}
 body.mobile-mode #startScreen #showcaseName{font-size:21px}
 body.mobile-mode #startScreen .showcase-attributes{gap:4px}
}

/* Separate portrait, caption and 3D stage instead of stacking text over athletes. */
body.mobile-mode #startScreen{grid-template-columns:minmax(0,56%) minmax(0,44%);grid-template-rows:56px minmax(240px,max-content) max-content;align-content:start;gap:12px 0;pointer-events:auto}
body.mobile-mode #startScreen .roster-panel{align-self:center;padding:6px 16px!important}
body.mobile-mode #startScreen .lobby-title{font-size:clamp(21px,3vw,27px);line-height:1.15}
body.mobile-mode #startScreen .roster-intro{display:none}
body.mobile-mode #startScreen #mobileRosterHint{display:block;margin:8px 0 14px;font:500 11px/1.4 var(--rr-font);color:#d1ebf8;text-shadow:0 1px 3px #00375b}
body.mobile-mode #startScreen .character-options{
 display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(86px,10.5vw,106px);
 gap:12px;overflow-x:auto;overflow-y:hidden;padding:6px 5px 12px;margin:-3px -4px 0;
 scroll-snap-type:x proximity;scroll-padding-inline:5px;scrollbar-width:thin;scrollbar-color:#ffda6890 #00699955;
 touch-action:pan-x pan-y;
}
body.mobile-mode #startScreen .character-options label{min-width:0;scroll-snap-align:start}
body.mobile-mode #startScreen .character-options .character-card{
 display:grid;grid-template-rows:minmax(0,1fr) 28px;height:118px;min-height:118px;padding:0;border-radius:14px;
}
body.mobile-mode #startScreen .character-options .character-card img{
 position:static;grid-row:1;width:100%;height:100%;max-height:88px;min-height:0;object-fit:contain;object-position:center;
 margin:0;padding:5px 2px 0;transform:none;
}
body.mobile-mode #startScreen .character-options .character-caption{
 position:static;grid-row:2;display:flex;justify-content:center;align-items:center;width:100%;height:28px;min-height:28px;
 margin:0;padding:4px 3px;background:linear-gradient(0deg,var(--card-bottom),color-mix(in srgb,var(--card-bottom) 75%,transparent));
 font-size:11px;line-height:1.2;text-align:center;
}
body.mobile-mode #startScreen .character-options label:hover .character-card{transform:none}
body.mobile-mode #startScreen .character-options input:checked+.character-card{transform:translateY(-2px)}
body.mobile-mode #startScreen .character-caption small{display:none}
body.mobile-mode #startScreen #characterHint{display:block;min-height:34px;margin:10px 0 0;padding:7px 10px;font-size:11px;line-height:1.4}
body.mobile-mode #startScreen .character-showcase{
 display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-self:center;align-content:start;
 width:100%;max-width:none;margin:0;padding:0 16px;gap:4px;background:none;border:0;box-shadow:none;text-align:center;
}
body.mobile-mode #startScreen #mobileCharacterPreview{display:block;width:100%;height:clamp(132px,38dvh,190px);pointer-events:none}
body.mobile-mode #startScreen .showcase-label{font-size:8px;padding:3px 7px;margin:0}
body.mobile-mode #startScreen #showcaseName{font-size:23px;line-height:1.15;margin:0;text-shadow:0 2px 4px #003358}
body.mobile-mode #startScreen #showcaseDescription{display:none}
body.mobile-mode #startScreen .showcase-attributes{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:2px 0 0}
body.mobile-mode #startScreen .showcase-attributes span{font-size:8px;line-height:1.3;padding:4px 6px}
body.mobile-mode #startScreen .lobby-footer{align-self:start;margin:0 16px;padding:10px 12px;gap:18px;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr)}
body.mobile-mode #startScreen .mode-actions button,body.mobile-mode #startScreen #startButton{min-height:52px;height:auto;padding:8px 5px}
body.mobile-mode #startScreen .game-mode-label{display:flex;justify-content:space-between;align-items:center;gap:10px}
body.mobile-mode #startScreen #gameMode{flex:1;max-width:65%}
@media(max-width:700px){
 body.mobile-mode #startScreen .lobby-footer{margin-inline:12px;padding:10px;gap:12px}
 body.mobile-mode #startScreen .character-options{grid-auto-columns:88px;gap:10px}
 body.mobile-mode #startScreen #showcaseName{font-size:21px}
 body.mobile-mode #startScreen .character-showcase{padding-inline:10px}
}

/* Fit the whole landscape lobby to the viewport: no page or roster scrolling. */
body.mobile-mode #startScreen{
 height:100dvh;max-height:100dvh;overflow:hidden;grid-template-columns:minmax(0,60%) minmax(0,40%);
 grid-template-rows:44px minmax(0,1fr) 112px;gap:6px 0;padding:0 0 max(6px,env(safe-area-inset-bottom));align-content:stretch;
}
body.mobile-mode #startScreen .lobby-header{padding:4px 12px}
body.mobile-mode #startScreen #gameTitle img{height:36px;width:120px;max-width:120px}
body.mobile-mode #startScreen .account-panel{padding:3px 6px;margin-right:104px;gap:7px}
body.mobile-mode #startScreen .account-panel button{height:32px;padding:5px 9px;font-size:10px}
body.mobile-mode:has(#startScreen:not([hidden])) #settingsButton{top:6px;right:max(12px,env(safe-area-inset-right));height:32px;width:82px}
body.mobile-mode #startScreen .roster-panel{display:grid;grid-template-rows:24px minmax(0,1fr);gap:6px;height:100%;min-height:0;align-self:stretch;padding:2px 12px!important}
body.mobile-mode #startScreen .lobby-title{font-size:21px;line-height:24px;white-space:nowrap}
body.mobile-mode #startScreen #mobileRosterHint{display:none}
body.mobile-mode #startScreen #characterSelect{display:grid;grid-template-rows:minmax(0,1fr) 28px;gap:6px;min-height:0;margin:0;padding:0}
body.mobile-mode #startScreen .character-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:7px;height:100%;min-height:0;overflow:hidden;margin:0;padding:3px;scroll-snap-type:none;touch-action:manipulation}
body.mobile-mode #startScreen .character-options label{height:100%;min-height:0;min-width:0}
body.mobile-mode #startScreen .character-options .character-card{grid-template-rows:minmax(0,1fr) 22px;width:100%;height:100%;min-height:0;max-height:none;border-radius:11px}
body.mobile-mode #startScreen .character-options .character-card img{height:100%;max-height:none;width:100%;padding:3px 0 0;min-height:0}
body.mobile-mode #startScreen .character-options .character-caption{height:22px;min-height:22px;padding:3px 1px;font-size:10px;line-height:1.1}
body.mobile-mode #startScreen .character-number{padding:1px 3px;font-size:8px;top:4px;left:3px}
body.mobile-mode #startScreen .selected-check{width:16px;height:16px;font-size:10px;top:3px;right:3px}
body.mobile-mode #startScreen #characterHint{display:flex;align-items:center;min-height:0;height:28px;margin:0;padding:3px 7px;font-size:9px;line-height:11px;border-radius:9px}
body.mobile-mode #startScreen .character-showcase{height:100%;min-height:0;align-self:stretch;grid-template-rows:minmax(0,1fr) 20px 20px;gap:3px;padding:0 12px;overflow:hidden}
body.mobile-mode #startScreen #mobileCharacterPreview{width:100%;height:100%;min-height:0;grid-row:1}
body.mobile-mode #startScreen .showcase-label{display:none}
body.mobile-mode #startScreen #showcaseName{grid-row:2;font-size:19px;line-height:20px;margin:0}
body.mobile-mode #startScreen .showcase-attributes{grid-row:3;gap:4px;margin:0;flex-wrap:nowrap;align-items:center;min-width:0}
body.mobile-mode #startScreen .showcase-attributes span{font-size:7px;line-height:10px;padding:3px 5px;white-space:nowrap}
body.mobile-mode #startScreen .lobby-footer{height:112px;min-height:0;align-self:stretch;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);margin:0 12px;padding:6px 9px;gap:12px}
body.mobile-mode #startScreen .lobby-match{gap:6px}
body.mobile-mode #startScreen #changeMapButton{min-height:44px;height:44px;padding:5px 8px}
body.mobile-mode #startScreen #guestNickname{height:32px}
body.mobile-mode #startScreen .lobby-launch{height:100%;min-height:0;grid-template-rows:28px 44px 12px;gap:5px}
body.mobile-mode #startScreen #gameMode{height:28px;font-size:10px}
body.mobile-mode #startScreen .mode-actions{gap:7px;min-height:0}
body.mobile-mode #startScreen .mode-actions button,body.mobile-mode #startScreen #startButton{height:44px;min-height:44px;padding:5px 3px;font-size:10px;gap:3px}
body.mobile-mode #startScreen .mode-actions small{font-size:8px;line-height:9px}
body.mobile-mode #startScreen #loadingStatus{font-size:8px;line-height:12px;white-space:nowrap}
@media(max-width:620px){
 body.mobile-mode #startScreen .lobby-title{font-size:18px}
 body.mobile-mode #startScreen .character-options{gap:5px}
 body.mobile-mode #startScreen .character-options .character-caption{font-size:9px}
 body.mobile-mode #startScreen .mode-actions button,body.mobile-mode #startScreen #startButton{font-size:9px}
 body.mobile-mode #startScreen .mode-actions{gap:5px}
 body.mobile-mode #startScreen #changeMapButton strong{font-size:11px}
 body.mobile-mode #startScreen #changeMapButton small{font-size:8px}
 body.mobile-mode #startScreen #guestNameField{font-size:8px;gap:5px}
}