/* Desktop space goes to readable copy and the roster, with independent scrolling. */
@media (min-width:1024px) and (min-height:600px){
  body:not(.touch) #lobbyShell{width:min(1600px,100%);}
  body:not(.touch) #lobby:has(#roomPane:not([hidden])) #lobbyShell{height:100%;}
  body:not(.touch) #lobby:has(#roomPane:not([hidden])) .menuSoundtrack{display:none;}
  body:not(.touch) #heroDetail{width:clamp(310px,28vw,430px);padding:16px;gap:12px;}
  body:not(.touch) #heroDetail>*{flex-shrink:0;}
  body:not(.touch) #heroDetail :is(.masteryPanel,.masterySkin){order:1;}
  body:not(.touch) #pickWrap{gap:18px;min-height:220px;}
  body:not(.touch) #heroGrid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px;}
  body:not(.touch) .hcard{padding:12px 6px;gap:7px;}
  body:not(.touch) .hcard .heroPortrait{width:64px;height:64px;}
  body:not(.touch) .hcard .nm{font-size:14px;}
  body:not(.touch) .hcard .rl{font-size:11px;white-space:normal;line-height:1.4;text-align:center;}
  body:not(.touch) .hdName{font-size:20px;}
  body:not(.touch) :is(.hdTitle,.hdTag,.hdBadge,.hdStat,.hdAb .am){font-size:12px;}
  body:not(.touch) .hdStat b{width:68px;}
  body:not(.touch) .hdStat .v{width:40px;}
  body:not(.touch) .hdAb{gap:10px;padding-top:10px;}
  body:not(.touch) .hdAb .an{font-size:14px;}
  body:not(.touch) .hdAb .ad{font:15px/1.5 Arial,sans-serif;display:block;overflow:visible;color:#c8c2d8;}
  body:not(.touch) .hdAb .k{width:22px;height:22px;line-height:22px;font-size:12px;}
  body:not(.touch) :is(#heroSearch,.chip,#heroCount){font-size:12px;}
  body:not(.touch) :is(#heroSearch,.chip){padding:10px;}
  body:not(.touch) #roleRow{flex-wrap:wrap;}
  body:not(.touch) :is(.pcard .who,.pcard .rdy,.shareHint,.shareLine .lbl){font-size:11px;letter-spacing:.5px;}
  body:not(.touch) :is(.pcard .pick,.shareUrl){font-size:12px;}
  body:not(.touch) :is(#lobby p.sub,.pcSub,.queueState,.warTitle + .warTeams + p){font:15px/1.5 Arial,sans-serif;}
  body:not(.touch) :is(.accountLabel,#accountState,.privacyLink){font-size:11px;}
  body:not(.touch) .btn{font-size:13px;min-height:42px;}
  body:not(.touch) #heroMeta{font-size:12px;}
  body:not(.touch) #heroPanel{width:clamp(290px,28vw,390px);}
  body:not(.touch) #heroPanel .vitalHeading{font-size:15px;}
  body:not(.touch) :is(#scoreLine,.trow){font-size:12px;}
  body:not(.touch) .trow .tw{width:30px;font-size:11px;}
  body:not(.touch) #abilities{gap:10px;}
  body:not(.touch) .slot{width:60px;height:60px;}
  body:not(.touch) .slot :is(.k,.n,.rank,.chg){font-size:12px;background:#080c16d9;padding:1px 2px;}
  body:not(.touch) :is(#shopHint,.item .desc,#fragmentGuide){font:15px/1.5 Arial,sans-serif;}
  body:not(.touch) #objectiveHint{max-width:40vw;}
  body:not(.touch) .autoToggle{font-size:11px;}
  body:not(.touch) #tip{width:360px;font:15px/1.5 Arial,sans-serif;}
  body:not(.touch) #tip .tname{font-size:16px;}
  body:not(.touch) #tip .tmeta{font-size:12px;}
  body:not(.touch) #tutBox{top:150px;width:min(540px,calc(100vw - 640px));max-height:calc(100dvh - 250px);overflow:auto;}
  body:not(.touch) #tutText{font-size:16px;}
  body:not(.touch) #tutProgress{font-size:13px;}
  body:not(.touch) #tutTitle{font-size:15px;}
  body:not(.touch) #evolutionPanel{font-size:13px;}
  body:not(.touch) #evolutionPanel :is(.evolutionHint,.evolutionSkill){font-size:11px;}
  body:not(.touch) #evolutionPanel .evolutionOptions b{font-size:14px;}
  body:not(.touch) #evolutionPanel .evolutionOptions small{font-size:15px;}
}
@media (min-width:1024px) and (max-width:1200px) and (min-height:600px){
  body:not(.touch) #itemsPanel .itemSlot{width:44px;height:44px;}
}