/* Mobile layout is intentionally loaded after the desktop and feature sheets. */
@media (max-width: 900px) {
  html,body{max-width:100%;overflow-x:hidden}
  #app{width:100%;max-width:100%;padding:0 12px 24px;zoom:1!important}
  .topbar{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0}
  .brand{min-width:0;max-width:100%}
  .brand h1{font-size:clamp(18px,5vw,25px);line-height:1.25}
  .currencies{width:100%;justify-content:flex-start;gap:6px}
  .currencies span{min-width:0;padding:6px 8px}
  .resource-bar{gap:5px}
  .tabs{display:flex;flex-wrap:nowrap;gap:4px;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin}
  .tabs button{flex:0 0 auto;padding:9px 11px;white-space:nowrap}
  main,.panel,.battle-layout,.market-browse-content,.crafting-results{min-width:0;max-width:100%}
  body.tab-active-battle #app,body.tab-active-battle .panel.active{display:block}
  .battle-layout,body.tab-active-battle .battle-layout{display:grid;grid-template-columns:minmax(0,1fr)!important;min-height:0;gap:10px}
  .game-wrap{width:100%;min-height:0;overflow:visible}
  .game-canvas-box{width:100%;height:auto;max-height:none}
  .game-wrap #gameCanvas{width:100%!important;height:auto!important;aspect-ratio:16/9}
  .global-chat,.sidebar{width:100%;min-width:0;min-height:0}
  .global-chat{order:3}.sidebar{order:2}.game-wrap{order:1}
  .chat-log{height:160px;min-height:160px;max-height:160px}
  .log{height:180px;min-height:180px;max-height:180px}
  #mainHeroPanel .main-card-match{width:100%;max-width:100%!important;min-height:0!important;padding:12px!important}
  #mainHeroPanel .main-card-match .hero-card-top{display:grid;grid-template-columns:minmax(0,1fr)!important;min-height:0!important;gap:12px}
  #mainHeroPanel .main-card-match .hero-card-name{width:100%!important}
  #mainHeroPanel .main-card-match .main-stat-grid,#mainHeroPanel .main-card-match .hero-xp,#mainHeroPanel .main-card-match .main-transcend{position:static!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;max-width:100%!important}
  #mainHeroPanel .main-card-match .main-stat-grid{grid-template-columns:minmax(0,1fr)!important}
  #mainHeroPanel .main-card-match .hero-loadout-card{justify-self:center;width:min(325px,100%)!important;max-width:100%;height:470px!important}
  .mainhero-with-inventory{display:grid;grid-template-columns:minmax(0,1fr)!important;width:100%;gap:12px}
  .mainhero-inventory{width:100%;height:auto!important;min-height:0;max-height:none}
  .mainhero-inventory-list{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:auto}
  .backpack-slot{height:auto;aspect-ratio:1}
  .mission-board,.diamond-packs,.vip-card,.market-browser,.crafting-layout{grid-template-columns:minmax(0,1fr)!important}
  .market-browse-nav{position:static;max-height:230px}
  #shopGrid,#craftingGrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
  .market-actions{flex-wrap:wrap}.market-wallet-button{margin-left:0}
  .fusion-overlay,.idle-overlay{padding:10px;overflow-y:auto}
  .fusion-overlay>*,.idle-box,.account-modal,.market-modal,.payment-modal,.crafting-dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow-y:auto}
  .gunbattle-frame{height:min(70dvh,650px);min-height:430px;aspect-ratio:auto}
  .gunbattle-screen{padding:8px 0}.gunbattle-tip{font-size:11px}
}
@media (max-width: 480px) {
  #app{padding-inline:8px}
  .topbar h1{font-size:19px}.online-presence{margin-left:2px}.ranking-button{margin-left:3px}
  .mainhero-inventory-list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .backpack-art,.backpack-resource-icon{max-width:100%}
  .payment-methods,.diamond-pack-grid,.summon-pass-grid{grid-template-columns:minmax(0,1fr)}
}