/* Mobile landscape waiting room: roster left, controls and persistent chat right.
   Keep the original DOM and handlers so orientation/game transitions need no reparenting. */
@media (orientation:landscape) and (min-width:560px){
html.mobile-layout body.mobile-room-active:not(.game-active) .shell{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
html.mobile-layout body.mobile-room-active:not(.game-active) #room{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);grid-template-rows:44px 46px minmax(0,1fr) 36px;gap:8px;align-items:stretch}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow,
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title,
html.mobile-layout body.mobile-room-active:not(.game-active) #waiting:not([hidden]),
html.mobile-layout body.mobile-room-active:not(.game-active) #room>#room-spectator-panel:not([hidden]){display:contents!important}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title>div:first-child{grid-column:1;grid-row:1;min-width:0;align-self:center;padding:0 10px}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title h2{margin:2px 0 0;font-size:16px;line-height:1.2}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .eyebrow{margin:0;font-size:8px;letter-spacing:.14em}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions{grid-column:2;grid-row:1;display:flex;min-width:0;gap:6px;margin:0;align-items:stretch;justify-content:flex-end}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.panel.grow>.section-title .room-actions>button:is(#open-room-settings,#open-tetris-keys-room,#leave):not([hidden]){position:static!important;display:block;flex:1;min-width:0;min-height:0;height:100%;padding:5px 6px;border-radius:11px;font-size:11px;white-space:nowrap}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants{grid-column:1;grid-row:2/4;min-width:0;min-height:0;margin:0;padding:8px;gap:6px;border:1px solid #414555;border-radius:16px;background:linear-gradient(150deg,#21232b,#14161b);overflow:hidden}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants h3{flex:0 0 30px;min-height:30px;margin:0;padding:0 4px;font-size:13px}
html.mobile-layout body.mobile-room-active:not(.game-active) #waiting-onboarding{min-height:30px;padding:4px 8px;font-size:10px;border-radius:8px}
html.mobile-layout body.mobile-room-active:not(.game-active) #onboarding-room-nudge{display:none!important}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(52px,1fr);align-content:stretch;gap:6px;min-width:0;min-height:0;margin:0;padding:1px;overflow:auto;scroll-padding:4px;overscroll-behavior:contain}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players .player{display:flex;position:relative;flex-direction:row;justify-content:flex-start;align-items:center;min-width:0;width:100%;height:auto;min-height:52px;gap:8px;padding:8px;border:1px solid #3c4d67;border-radius:11px;background:#25272f;text-align:left;overflow:hidden}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players .player-empty{border-style:dashed;border-color:#3f4251;background:#14161b;color:#8295b1}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players .player-empty>span{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;margin:0;border:1px solid #3f4251;border-radius:9px;font-size:22px;line-height:1}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players .player-empty>small{font-size:11px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players .player-avatar-slot{display:grid!important;flex:0 0 34px;width:34px;height:34px;margin:0;overflow:hidden}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players .player-label{min-width:0;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players .room-host-player{border-color:#8172c7;padding-left:8px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players .room-host-player .player-label{padding-top:10px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players .player-host-badge{top:3px;right:6px;left:auto;transform:none;padding:1px 5px;font-size:8px;line-height:1.2}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants .record-crowns{max-width:48px;gap:3px;margin-left:0}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants .record-crown{width:20px;height:20px;font-size:12px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants #players.sky-team-players{display:flex;flex-direction:column;gap:6px;align-content:initial}
html.mobile-layout body.mobile-room-active:not(.game-active) .sky-team-row{flex:0 0 auto;padding:6px}
html.mobile-layout body.mobile-room-active:not(.game-active) .sky-team-row>b{margin-bottom:5px;font-size:10px}
html.mobile-layout body.mobile-room-active:not(.game-active) .sky-team-slots{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-room-actions{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:6px;min-height:0;margin:0}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-room-actions #ready-start,
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-room-actions #open-room-slot{height:100%;min-height:0;margin:0;padding:6px;border-radius:11px;font-size:12px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-room-actions #ready-start{border-color:#9d92ef;background:linear-gradient(135deg,#7963eb,#5843bc);box-shadow:0 4px 16px #7863e326;font-weight:800}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-room-actions #open-room-slot{gap:5px;box-shadow:none}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-room-actions #open-room-slot>span:first-child{font-size:20px}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>#room-spectator-panel>.room-spectator-toggle{grid-column:2;grid-row:4;width:100%;height:100%;min-height:0;margin:0;padding:4px 10px;border-radius:10px;font-size:11px;box-shadow:none}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>#room-spectator-panel>section{grid-column:1;grid-row:4;display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;min-height:0;margin:0;padding:0 8px;border:0;background:#14161b;border-radius:10px;overflow:hidden}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>#room-spectator-panel>section>header{display:flex;flex:0 0 auto;align-items:center;gap:5px;min-height:0;margin:0}
html.mobile-layout body.mobile-room-active:not(.game-active) #room-spectator-panel header small{display:none}
html.mobile-layout body.mobile-room-active:not(.game-active) #room-spectator-panel header b{font-size:10px;white-space:nowrap}
html.mobile-layout body.mobile-room-active:not(.game-active) #room-spectator-panel header>span{padding:2px 5px;font-size:9px}
html.mobile-layout body.mobile-room-active:not(.game-active) #waiting-spectators{display:flex;min-width:0;gap:5px;overflow:auto;scrollbar-width:thin}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-spectator{flex:0 0 auto;padding:3px 6px;border-radius:7px;gap:4px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-spectator>span,
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-spectator small{display:none}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-spectator b{max-width:80px;font-size:10px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-spectators-empty{margin:0;font-size:9px;white-space:nowrap}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.room-sidebar{grid-column:2;grid-row:3;min-width:0}
html.mobile-layout body.mobile-room-active:not(.game-active) #room-chat{font-size:11px;line-height:1.5;padding:8px;border-radius:10px;overflow-wrap:anywhere}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.room-sidebar .send{gap:5px;margin-top:7px}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.room-sidebar .send input{width:0;flex:1;min-height:36px;height:36px;margin:0;padding:5px 8px}
html.mobile-layout body.mobile-room-active:not(.game-active) #room>.room-sidebar .send button{min-width:46px;min-height:36px;height:36px;padding:5px 8px;font-size:11px}
html.mobile-layout body.mobile-room-active:not(.game-active) #mobile-game-chat-toggle{display:none!important}
html.mobile-layout body.mobile-room-active:not(.game-active):not(.mobile-game-chat-open) #room>.room-sidebar{position:relative;inset:auto;z-index:auto;display:block;width:100%;height:100%;min-height:0;max-height:none;margin:0;padding:0;visibility:visible;opacity:1;transform:none;transition:none;border:1px solid #414555;border-radius:14px;background:#1b1d23;box-shadow:none}
html.mobile-layout body.mobile-room-active:not(.game-active):not(.mobile-game-chat-open) #room>.room-sidebar .room-chat-panel{height:100%;min-height:0;padding:9px;border-radius:inherit;overflow:hidden;background:transparent}
html.mobile-layout body.mobile-room-active:not(.game-active):not(.mobile-game-chat-open) #room>.room-sidebar .room-chat-panel h3{flex:0 0 auto;min-height:0;margin:0 0 6px;padding:0;font-size:12px}
html.mobile-layout body.mobile-room-active:not(.game-active):not(.mobile-game-chat-open) #room-chat{flex:1 1 0;min-height:0;height:auto;max-height:none}
}

@media (orientation:landscape) and (min-width:560px) and (max-height:300px){
html.mobile-layout body.mobile-room-active:not(.game-active) #room{grid-template-rows:40px 44px minmax(0,1fr) 32px;gap:6px}
html.mobile-layout body.mobile-room-active:not(.game-active):not(.mobile-game-chat-open) #room>.room-sidebar .room-chat-panel{padding:7px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants{padding:6px;gap:4px}
html.mobile-layout body.mobile-room-active:not(.game-active) .waiting-participants h3{flex-basis:28px;min-height:28px}
}

@media (orientation:landscape) and (min-width:560px){
html.mobile-layout body.mobile-room-active:not(.game-active).mobile-game-chat-open #room>#room-mobile-sidebar{z-index:130}
}

@media (orientation:landscape) and (min-width:560px){
html.mobile-layout body.mobile-room-active:not(.game-active) #room.has-ai-practice:not(#_)>.panel.grow>.section-title>div:first-child{align-self:start}
html.mobile-layout body.mobile-room-active:not(.game-active) #room-ai-practice{grid-column:1;grid-row:1;align-self:end;min-width:0;margin:0;padding:0 10px;font-size:9px;line-height:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media (orientation:landscape) and (min-width:560px){
html.mobile-layout body.mobile-room-active:not(.game-active) #room:where(.has-sky-lobby-tools):not(#_)>.panel.grow>.section-title>div:first-child{align-self:start}
html.mobile-layout body.mobile-room-active:not(.game-active) #sky-lobby-tools{grid-column:1;grid-row:1;align-self:end;display:block;min-width:0;margin:0;padding:0 10px;border:0;border-radius:0;background:transparent}
html.mobile-layout body.mobile-room-active:not(.game-active) #sky-lobby-tools p{margin:0;font-size:9px;line-height:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.mobile-layout body.mobile-room-active:not(.game-active) #sky-lobby-tools p>span:first-child,
html.mobile-layout body.mobile-room-active:not(.game-active) #sky-lobby-tools br,
html.mobile-layout body.mobile-room-active:not(.game-active) #sky-lobby-tools button{display:none}
}

/* The public footer lives below the fixed mobile shell. Exclude it from this
   immersive waiting view so focus restoration cannot scroll the body offscreen. */
@media (orientation:landscape) and (min-width:560px){
html.mobile-layout body.mobile-room-active:not(.game-active)>.public-site-footer{display:none}
}