/* Ministrikes mobile layer
   Loaded last on purpose: the desktop presentation remains intact while touch,
   safe-area and compact viewport rules get a predictable final cascade. */

:root{
  --mobile-safe-top:max(8px,env(safe-area-inset-top));
  --mobile-safe-right:max(10px,env(safe-area-inset-right));
  --mobile-safe-bottom:max(10px,env(safe-area-inset-bottom));
  --mobile-safe-left:max(10px,env(safe-area-inset-left));
  --mobile-stick:clamp(108px,30vh,132px);
  --mobile-action:clamp(46px,12.5vh,52px);
}

html{-webkit-text-size-adjust:100%}
button,input,select{font:inherit}
button{-webkit-tap-highlight-color:transparent}

/* Touch combat deck */
#mobileControls{
  padding:var(--mobile-safe-top) var(--mobile-safe-right) var(--mobile-safe-bottom) var(--mobile-safe-left);
  overscroll-behavior:none;
}
#mobileControls .stickZone{
  width:var(--mobile-stick);height:var(--mobile-stick);
  bottom:var(--mobile-safe-bottom);
  border:2px solid rgba(246,201,0,.5);
  background:
    radial-gradient(circle,rgba(246,201,0,.07) 0 35%,rgba(9,12,9,.57) 36% 65%,rgba(246,201,0,.2) 66% 69%,transparent 70%),
    repeating-conic-gradient(from 0deg,rgba(246,201,0,.13) 0 1deg,transparent 1deg 44deg);
  box-shadow:inset 0 0 26px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.07),0 8px 28px rgba(0,0,0,.32);
  opacity:.92;
}
#moveStick{left:var(--mobile-safe-left)}
#aimStick{right:var(--mobile-safe-right)}
#mobileControls .stickKnob{
  width:46%;height:46%;left:27%;top:27%;
  background:radial-gradient(circle at 38% 31%,#fff7b0,#f6c900 25%,#7d6500 72%);
  border:2px solid #fff09b;
  box-shadow:0 0 0 5px rgba(8,10,8,.5),0 0 20px rgba(246,201,0,.25);
}
#mobileControls .stickCaption{
  top:-19px;color:#f3e8aa;text-shadow:0 2px 4px #000;
  font:900 8px/1 "Arial Black",sans-serif;letter-spacing:1.7px;
}
#mobileControls .touchBtn{
  width:var(--mobile-action);height:var(--mobile-action);min-width:44px;min-height:44px;
  display:grid;place-items:center;padding:3px;
  border:2px solid #596057;border-radius:5px;
  color:#f2f3ed;background:linear-gradient(145deg,rgba(35,40,34,.94),rgba(11,14,11,.9));
  box-shadow:0 4px 0 rgba(3,4,3,.88),0 8px 20px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.06);
  font:1000 clamp(7px,1.8vh,9px)/1 "Arial Black",sans-serif;letter-spacing:.45px;
  text-shadow:0 1px 2px #000;
  transition:transform .08s ease,filter .08s ease,background .08s ease;
}
#mobileControls .touchBtn.active{
  transform:translateY(3px) scale(.95);filter:brightness(1.18);
  color:#11120f;background:#f6c900;border-color:#fff09b;box-shadow:0 1px 0 #5f4d00,0 4px 12px rgba(246,201,0,.28);
  text-shadow:none;
}
#fireBtn{
  right:calc(var(--mobile-safe-right) + var(--mobile-stick) + 28px)!important;
  bottom:calc(var(--mobile-safe-bottom) + 62px)!important;
  width:clamp(62px,17vh,70px)!important;height:clamp(62px,17vh,70px)!important;
  color:#11120f!important;background:linear-gradient(145deg,#fff38b,#f6c900 62%,#c99d00)!important;
  border-color:#fff5b4!important;font-size:clamp(9px,2.2vh,11px)!important;text-shadow:none!important;
  box-shadow:0 5px 0 #695500,0 10px 25px rgba(246,201,0,.26),inset 0 0 0 2px rgba(20,22,18,.18)!important;
}
#jumpBtn{
  right:calc(var(--mobile-safe-right) + var(--mobile-stick) + 34px)!important;
  bottom:var(--mobile-safe-bottom)!important;
}
#grenadeBtn{
  right:calc(var(--mobile-safe-right) + var(--mobile-stick) + 91px)!important;
  bottom:var(--mobile-safe-bottom)!important;
  border-color:#b68544!important;color:#ffcf82!important;
}
#aimBtn{
  right:calc(var(--mobile-safe-right) + var(--mobile-stick) + 105px)!important;
  bottom:calc(var(--mobile-safe-bottom) + 69px)!important;
  border-color:#63c9cf!important;color:#a9fbff!important;
}
#reloadBtn{
  right:var(--mobile-safe-right)!important;
  bottom:calc(var(--mobile-safe-bottom) + var(--mobile-stick) + 15px)!important;
}
#weaponBtn{
  right:calc(var(--mobile-safe-right) + 57px)!important;
  bottom:calc(var(--mobile-safe-bottom) + var(--mobile-stick) + 22px)!important;
}
#crouchBtn{
  left:calc(var(--mobile-safe-left) + var(--mobile-stick) + 28px)!important;
  bottom:var(--mobile-safe-bottom)!important;
  border-color:#8e72a8!important;color:#e7cffc!important;
}
#shopBtn,#pauseTouch{top:var(--mobile-safe-top)!important;width:48px!important;height:44px!important}
#pauseTouch{right:var(--mobile-safe-right)!important}
#shopBtn{right:calc(var(--mobile-safe-right) + 56px)!important}

body[data-mobile-ui="touch"] #mobileControls.playing,
body.mobile-qa #mobileControls.playing{display:block!important}
body[data-shop-open="true"] #mobileControls.playing{display:none!important}
body[data-mobile-ui="touch"].playing,body[data-mobile-ui="touch"].playing canvas{cursor:default}

/* Compact match HUD. All combat information stays clear of both thumbs. */
@media (max-width:900px), (pointer:coarse){
  #hud #healthBox{
    left:var(--mobile-safe-left);right:auto;top:auto;
    bottom:calc(var(--mobile-safe-bottom) + var(--mobile-stick) + 22px);
    width:clamp(170px,28vw,214px);padding:7px 9px;transform:none;
    border-width:2px;box-shadow:0 3px 0 #060706;
  }
  #hud #healthBox::before{top:-12px;padding:2px 7px;font-size:6px;border-width:1px}
  #hud #healthBox .lbl{font-size:8px;letter-spacing:.8px}
  #hud #ammoBox{
    right:var(--mobile-safe-right);left:auto;top:calc(var(--mobile-safe-top) + 54px);bottom:auto;
    width:clamp(156px,25vw,190px);min-width:0;padding:6px 8px;transform:none;
    grid-template-columns:1fr;border-width:2px;box-shadow:0 3px 0 #060706;
  }
  #hud #ammoBox::before{top:-12px;padding:2px 7px;font-size:6px;border-width:1px}
  #hud #ammoWeaponIcon,#hud #slots{display:none}
  #hud #ammoInfo,#hud #grenadeHud,#hud #reloadWrap{grid-column:1}
  #hud #ammoNums{font-size:clamp(21px,6vh,28px)}
  #hud #wName{font-size:8px;letter-spacing:.8px}
  #hud #minimap{left:var(--mobile-safe-left);top:var(--mobile-safe-top);width:104px;height:72px;border-width:2px}
  #hud #topBar{top:var(--mobile-safe-top);min-width:210px;max-width:42vw;padding:6px 11px;gap:8px;border-width:2px;font-size:9px}
  #hud #topBar::before{top:-10px;padding:2px 7px;border-width:1px;font-size:5px}
  #hud #killfeed{top:calc(var(--mobile-safe-top) + 116px);right:var(--mobile-safe-right);max-width:170px;gap:4px}
  #hud #killfeed .kf{min-height:26px;padding:3px 6px;font-size:8px;border-left-width:3px}
  #hud #killfeed .kf:nth-child(n+3){display:none}
  #hud #crosshair{width:20px;height:20px}
  #hud #scoreboard{min-width:min(92vw,480px);max-height:82dvh;overflow:auto}
}

/* Phone landscape gets the complete game surface; very short devices receive a
   tighter HUD without sacrificing the 44px action targets. */
@media (orientation:landscape) and (max-height:480px){
  :root{--mobile-stick:clamp(106px,31vh,128px);--mobile-action:clamp(44px,12vh,50px)}
  #hud #healthBox{bottom:calc(var(--mobile-safe-bottom) + var(--mobile-stick) + 17px)}
  #hud #ammoBox{top:calc(var(--mobile-safe-top) + 48px)}
  #hud #grenadeHud{display:none}
  #hud #killfeed{top:calc(var(--mobile-safe-top) + 102px)}
}

/* Portrait combat orientation gate */
#rotateDevice{padding:calc(var(--mobile-safe-top) + 14px) calc(var(--mobile-safe-right) + 16px) calc(var(--mobile-safe-bottom) + 14px) calc(var(--mobile-safe-left) + 16px);background:radial-gradient(circle at 50% 42%,#292d22 0,#11140f 47%,#050605 100%)}
#rotateDevice::before{content:"";position:absolute;inset:0;opacity:.18;background:linear-gradient(rgba(246,201,0,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(246,201,0,.15) 1px,transparent 1px);background-size:34px 34px}
.rotateDeviceCard{position:relative;width:min(360px,92vw);padding:30px 27px 25px;border:1px solid #596052;border-top:4px solid #f6c900;background:linear-gradient(145deg,rgba(31,36,29,.98),rgba(10,12,10,.98));box-shadow:0 12px 40px rgba(0,0,0,.55);text-align:center}
.rotateDeviceIcon{position:relative;width:96px;height:70px;display:block;margin:0 auto 21px}
.rotateDeviceIcon i{position:absolute;left:20px;top:3px;width:38px;height:64px;border:4px solid #f6c900;border-radius:7px;box-shadow:0 0 20px rgba(246,201,0,.18);animation:mobilePhoneRotate 1.9s ease-in-out infinite}
.rotateDeviceIcon i::after{content:"";position:absolute;left:50%;bottom:4px;width:7px;height:2px;transform:translateX(-50%);background:#f6c900}
.rotateDeviceIcon b{position:absolute;right:2px;top:20px;color:#f6c900;font:900 30px/1 Arial;animation:mobileRotatePulse 1.9s ease-in-out infinite}
.rotateDeviceCard small{display:block;color:#f6c900;font:900 7px/1 "Arial Black";letter-spacing:1.8px}
.rotateDeviceCard strong{display:block;margin-top:9px;color:#fff;font:1000 clamp(23px,8vw,32px)/1 "Arial Black";letter-spacing:1px}
.rotateDeviceCard>span:not(.rotateDeviceIcon){display:block;margin:14px auto 0;max-width:285px;color:#d8ddd2;font:800 11px/1.55 Arial;letter-spacing:.35px}
.rotateDeviceCard em{display:block;margin-top:15px;padding-top:13px;color:#929b8f;border-top:1px solid #3c4239;font:800 8px/1.45 Arial;font-style:normal;letter-spacing:.7px}
@keyframes mobilePhoneRotate{0%,18%,100%{transform:rotate(0)}48%,72%{transform:rotate(90deg)}}
@keyframes mobileRotatePulse{0%,100%{opacity:.3;transform:scale(.88)}45%,70%{opacity:1;transform:scale(1)}}
@media (orientation:portrait) and (max-width:900px){body.mobile-qa.playing #rotateDevice{display:flex}}

/* Mobile lobby, account and utility panels */
@media (max-width:760px){
  html,body{min-height:100%;height:100%;overscroll-behavior:none}
  #menu{align-items:flex-start;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
  #menu::-webkit-scrollbar,.lobbyNav::-webkit-scrollbar,.modeGrid::-webkit-scrollbar,#mapGrid::-webkit-scrollbar{display:none}
  #menu .lobby,#menu .lobby:has(#playPanel.on){
    width:100%;min-height:100dvh;height:auto;padding:var(--mobile-safe-top) var(--mobile-safe-right) var(--mobile-safe-bottom) var(--mobile-safe-left);
    grid-template-rows:auto auto auto auto;overflow:visible;
  }
  .lobbyTop{gap:8px;padding:8px 7px}.lobbyBrand{min-width:0}.lobbyPitch p{display:none!important}
  .lobbyAccount{width:100%;justify-content:space-between}.profileChip{min-width:0;flex:1}.currencyStack{display:none!important}
  .lobbyNav{position:sticky;top:0;z-index:20;display:flex;gap:5px;padding:7px 0;overflow-x:auto;background:rgba(8,10,8,.94);backdrop-filter:blur(12px);scroll-snap-type:x proximity}
  .lobbyNav .lobbyTab{flex:0 0 112px;min-width:112px;min-height:46px;scroll-snap-align:start}
  #playPanel.on{height:auto;min-height:0;grid-template-rows:auto auto;overflow:visible}
  .homeStage{
    min-height:340px;height:auto;padding:8px 4px 3px;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(320px,1fr);gap:0;overflow:hidden;
  }
  /* The horizontal lobby navigation already exposes every section. Removing the
     duplicated side rails leaves one clear path on phones: choose mode/map, Play. */
  .homeRail,.homeRailRight{display:none!important}
  .homeNavBtn,.homeNavBtn.lobbyTab,.homeRailRight .homeNavBtn{min-height:48px;padding:7px 7px 7px 39px;text-align:left;clip-path:none}
  .homeRailRight .homeNavBtn{padding-left:39px}.homeRailRight .homeIcon{left:4px;right:auto}
  .homeNavBtn small{display:none}.heroShowcase{grid-row:auto}
  .lobbyHeroCanvas{width:min(82vw,390px);height:310px}.heroPlate{max-width:90vw}
  .homeMatchStrip{min-height:0;height:auto;display:grid;grid-template-columns:1fr;gap:8px;padding:8px}
  .homeMatchStrip .modeGrid,.homeMatchStrip #mapGrid{height:auto;min-height:0;display:flex;gap:7px;margin-top:5px;padding:1px 1px 7px;overflow-x:auto;scroll-snap-type:x mandatory}
  .homeMatchStrip .modeBtn,.homeMatchStrip .mapBtn{flex:0 0 126px;width:126px;height:88px;min-height:88px;padding:8px;scroll-snap-align:start}
  .homeMatchStrip .mapBtn{flex-basis:154px;width:154px}.homeMatchStrip .mapMeta{display:none}
  .lobbyFooter{
    position:sticky;z-index:25;bottom:0;min-height:72px;display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:8px;
    padding:8px 0 calc(8px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#080a08 75%,rgba(8,10,8,.9));border-top:1px solid #343b33;
  }
  .partyDock,.rewardBoxes{display:none!important}.lobbyFooter #selectionSummary{min-width:0;padding-left:8px;font-size:7px}.lobbyFooter #playBtn{width:100%;min-height:54px;padding:10px}
  .lobbyPanel.on:not(#playPanel){height:auto;min-height:calc(100dvh - 190px);overflow:visible;padding:12px 8px}
  #operatorsPanel #operatorGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.operator{min-height:104px}
  #skinGrid,.settingsGrid{grid-template-columns:1fr!important}
  .settingsHero{align-items:flex-start;padding:13px}.settingsHero p,.settingsHeroStatus span:first-child{display:none}.settingsHeroStatus{flex:none}.settingsHero h2{font-size:17px}
  #settingsPanel .setting{min-height:88px;padding:12px 12px 12px 55px}
  .operatorStoreHero{grid-template-columns:1fr;padding:14px}.operatorStoreHero p,.operatorStorePolicy{display:none}.storeAccessSummary{grid-template-columns:repeat(3,1fr)}.storeAccessSummary span{min-width:0;padding:7px}.storeAccessSummary b{font-size:10px}
  .operatorStoreToolbar{align-items:flex-start;overflow-x:auto}.operatorStoreFilters{min-width:max-content}.storeFilter{min-width:66px;min-height:44px}
  .operatorStoreGrid{grid-template-columns:1fr;padding:8px}.storeOperatorCard{min-height:172px}
  .profileWorkspace,.profileLayout,.friendsWorkspace,.roomsShell{grid-template-columns:1fr!important}
  /* Online rooms need their own phone contract. The desktop rules use compact
     34-38px controls and two-column panes, which are too small and too wide for
     360px/390px touch viewports. */
  #roomsPanel{overflow-x:hidden;padding:8px 0 calc(22px + env(safe-area-inset-bottom))!important}
  #roomsPanel .roomsShell{width:100%;min-width:0;grid-template-columns:minmax(0,1fr)!important;gap:10px}
  #roomsPanel .roomPane{min-width:0;overflow:hidden;padding:10px}
  #roomsPanel .roomFlowCard{grid-template-columns:minmax(0,1fr);gap:9px;padding:12px}
  #roomsPanel .roomFlowCopy p{margin-top:5px}
  #roomsPanel .roomFlowSteps{display:none}
  #roomsPanel .roomQuickPlay{width:100%;min-height:56px}
  body:not([data-online-room="none"]) #roomsPanel #roomBrowserPane{display:none}
  #roomsPanel .roomCreateForm,
  #roomsPanel .roomSelection,
  #roomsPanel .roomLobbyActions{grid-template-columns:minmax(0,1fr)!important}
  #roomsPanel .roomCreateForm button{grid-column:auto;width:100%}
  #roomsPanel .roomCreateForm input,
  #roomsPanel .roomCreateForm select,
  #roomsPanel .roomCreateForm button,
  #roomsPanel .roomOperatorSelect,
  #roomsPanel .roomJoin,
  #roomsPanel .roomQuickPlay,
  #roomsPanel .roomCustomBlock summary,
  #roomsPanel .roomClassChoice,
  #roomsPanel #roomReadyButton,
  #roomsPanel #roomStartButton,
  #roomsPanel #roomLeaveButton{
    min-height:48px;touch-action:manipulation
  }
  #roomsPanel .roomCreateForm input,
  #roomsPanel .roomCreateForm select,
  #roomsPanel .roomOperatorSelect{height:48px;font-size:16px}
  #roomsPanel :is(input,select,button):focus-visible{outline:3px solid #fff09b;outline-offset:2px}
  #roomsPanel .roomList{max-height:min(38dvh,300px);overscroll-behavior:contain;scrollbar-gutter:stable}
  #roomsPanel .roomCard{min-width:0;grid-template-columns:minmax(0,1fr) 88px}
  #roomsPanel .roomCard>div,
  #roomsPanel .roomOperatorPreview>span:last-child,
  #roomsPanel .roomMember>span:nth-child(2),
  #roomsPanel .roomLobbyTop>div{min-width:0}
  #roomsPanel .roomCard :is(h3,p),
  #roomsPanel .roomMember :is(b,small),
  #roomsPanel .roomLobbyTop :is(h2,p){overflow-wrap:anywhere}
  #roomsPanel .roomJoin{min-width:88px;padding-inline:8px}
  #roomsPanel .roomSelection{gap:8px}
  #roomsPanel .roomClassGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  #roomsPanel .roomMembers{max-height:min(52dvh,480px);overscroll-behavior:contain;scrollbar-gutter:stable}
  #roomsPanel .roomMember{min-width:0;min-height:128px;grid-template-columns:96px minmax(0,1fr);grid-template-rows:1fr auto}
  #roomsPanel .roomLobbyActions{gap:8px}
  #roomsPanel .roomStatus{min-height:28px;font-size:8px;line-height:1.45}
  .profileAvatarGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.profileBannerGrid,.profileCosmeticGrid{grid-template-columns:1fr 1fr}
  .bpHero{grid-template-columns:1fr}.bpBody{grid-template-columns:1fr}.bpHero h2{font-size:30px}.bpTierTrack{overflow-x:auto}
  .worldChatPanel{inset:var(--mobile-safe-top) var(--mobile-safe-right) var(--mobile-safe-bottom) var(--mobile-safe-left);width:auto;height:auto}
  .commerceCard{width:min(100%,430px);max-height:calc(100dvh - 32px);overflow:auto}
  #authGate{align-items:flex-start;overflow-y:auto;padding:var(--mobile-safe-top) var(--mobile-safe-right) var(--mobile-safe-bottom) var(--mobile-safe-left)}
  .authShell{min-height:100dvh}.authCard{max-height:none}.gameAuthField input,.authPrimary,.authGoogle,.authTab{min-height:48px}
}

/* Full-screen mobile pause and armory flows */
@media (max-width:760px), (pointer:coarse) and (max-height:560px), (max-width:900px) and (max-height:560px){
  #pause{padding:0}
  .matchMenu{width:100vw;height:100dvh;max-height:none;border:0;grid-template-rows:auto minmax(0,1fr) auto}
  .matchMenuHeader{min-height:62px;padding:calc(var(--mobile-safe-top) + 5px) var(--mobile-safe-right) 8px var(--mobile-safe-left)}
  .matchMenuTitle h1{font-size:18px}.matchMenuTitle small,.matchStatus small{display:none}
  .matchMenuBody{min-height:0;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .matchMenuNav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:6px var(--mobile-safe-right) 6px var(--mobile-safe-left);overflow-x:auto;border:0;border-bottom:1px solid #343b33}
  .pauseNavBtn{min-width:0;min-height:46px;padding:5px 2px;font-size:0;color:transparent}.pauseNavBtn::before{left:50%;transform:translate(-50%,-50%)}.pauseNavDivider{display:none}
  .matchMenuContent{min-height:0;padding:12px var(--mobile-safe-right) 14px var(--mobile-safe-left);overflow:auto;overscroll-behavior:contain}
  .pausePageHead{margin-bottom:11px}.pausePageHead p{display:none}.pauseSettingsGrid,.controlsGrid,.matchOverviewGrid{grid-template-columns:1fr}
  .pauseSetting{min-height:76px}.matchMenuFooter{min-height:58px;padding:7px var(--mobile-safe-right) calc(7px + env(safe-area-inset-bottom)) var(--mobile-safe-left);justify-content:center}.matchFooterHint{display:none}.matchFooterActions{width:100%}.matchAction{flex:1;min-height:44px;padding:7px}
  #weaponShop{padding:0;place-items:stretch}.shopFrame{width:100vw;height:100dvh;max-height:none;padding:calc(var(--mobile-safe-top) + 12px) var(--mobile-safe-right) calc(var(--mobile-safe-bottom) + 8px) var(--mobile-safe-left);border:0;grid-template-rows:auto auto minmax(0,1fr) auto}.shopHead{grid-template-columns:minmax(0,1fr) auto auto}.shopTitleWrap h2{margin:0;padding:6px 12px}.shopTitleWrap p{display:none}.shopFunds{padding:5px 8px}.shopFunds b{font-size:16px}.shopTabs{flex-wrap:nowrap;padding-bottom:4px;overflow-x:auto}.shopTab{flex:0 0 auto;min-width:92px;min-height:44px}.armGrid{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr));overflow:auto}.shopFoot{padding-bottom:env(safe-area-inset-bottom)}
}

@media (max-width:390px){
  .homeStage{min-height:308px;grid-template-rows:minmax(288px,1fr)}.lobbyHeroCanvas{height:282px}
  .homeMatchStrip .modeBtn{flex-basis:116px;width:116px}.homeMatchStrip .mapBtn{flex-basis:142px;width:142px}
  .lobbyFooter{grid-template-columns:1fr 132px}.lobbyFooter #selectionSummary{font-size:6px}
  .profileAvatarGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #roomsPanel .roomPane{padding:9px 8px}
  #roomsPanel .roomCard{grid-template-columns:minmax(0,1fr) 80px;padding:8px}
  #roomsPanel .roomJoin{min-width:80px;padding-inline:5px}
  #roomsPanel .roomLobbyTop{align-items:flex-start}
  #roomsPanel .roomCode{padding-inline:7px;font-size:10px}
  #roomsPanel .roomMember{grid-template-columns:88px minmax(0,1fr)}
  #roomsPanel .roomReadyState{min-width:76px}
}

@media (max-width:620px) and (orientation:portrait){
  .armGrid{grid-template-columns:1fr}
}

@media (pointer:coarse) and (orientation:landscape) and (max-height:560px){
  #roomsPanel.lobbyPanel.on{height:auto!important;min-height:300px;max-height:none!important;overflow:auto!important;padding-bottom:calc(16px + env(safe-area-inset-bottom))!important}
  #roomsPanel .roomsShell{grid-template-columns:minmax(280px,.8fr) minmax(400px,1.2fr)!important;grid-template-areas:"browser staging"!important;align-items:start}
  #roomsPanel .roomMembers{max-height:48dvh}
}

@media (prefers-reduced-motion:reduce){
  .rotateDeviceIcon i,.rotateDeviceIcon b,#mobileControls .touchBtn{animation:none!important;transition:none!important}
}