/* V371 — responsive/mobile baseline. Keep the desktop layout intact while preventing overflow. */
html,body{max-width:100%;overflow-x:hidden}
body{zoom:1!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}
img,video,canvas,svg{max-width:100%}
#app,.page,.content,.main,.homeWrap,.charactersPage,.costumeGroupsWrap{min-width:0;max-width:100%}
.charPanel,.homeBox,.builderHero,.costumeGroup,.tierPage,.tierBoard{max-width:100%;min-width:0}
.styleGrid,.charactersGrid,.rosterGrid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:100%}
.charTop{display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:18px}
.charTop>*,.skillRow>*,.costumeGroup>*{min-width:0}
.skillRow{display:grid;grid-template-columns:minmax(130px,180px) minmax(0,1fr);gap:14px}
.dataTable{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.costumeGroupRow,.costumeGallery,.costumeGrid{overflow-x:auto!important;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.costumeCard,.costumeTile{scroll-snap-align:start}
.mhurHubPanel{width:min(900px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
#drawer{max-width:min(88vw,320px);overflow-y:auto;-webkit-overflow-scrolling:touch}
button,.navItem,.back{touch-action:manipulation}
@media(max-width:760px){
  body{font-size:15px}
  header,.topbar,#topbar{height:58px!important;min-height:58px!important}
  #app{padding:72px 10px 84px!important}
  .title{font-size:clamp(28px,8vw,42px)!important;line-height:1.05}
  .charTop{grid-template-columns:1fr}
  .charPortrait,.charTop>div:first-child{width:min(76vw,300px);margin-inline:auto}
  .skillRow{grid-template-columns:1fr}
  .skillRow img{width:min(100%,360px);margin-inline:auto}
  .styleGrid,.charactersGrid,.rosterGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .styleCard,.characterCard,.card{min-width:0}
  .styleCard h2,.characterCard h2{font-size:16px;overflow-wrap:anywhere}
  .costumeGroup{padding:8px}
  .costumeGallery,.costumeGroupRow,.costumeGrid{display:flex!important;gap:10px!important;padding-bottom:10px}
  .costumeCard,.costumeTile{flex:0 0 min(74vw,260px)!important;width:min(74vw,260px)!important}
  .tierHeader,.tierToolbar{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .tierRow{min-height:108px!important}
  .tierLabel{width:58px!important;min-width:58px!important;font-size:28px!important}
  .mhurLeaderboardRow{grid-template-columns:44px minmax(0,1fr);gap:8px}
  .mhurLeaderboardScore{grid-column:2;text-align:left!important}
  .mhurHubPanel{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:16px}
}
@media(max-width:430px){
  .styleGrid,.charactersGrid,.rosterGrid{grid-template-columns:1fr 1fr}
  .badges{display:flex;flex-wrap:wrap;gap:4px}
  .roleBadge,.sideBadge{font-size:11px!important}
}