/* MHQ MLBB Lab v9 — mobile menu + mobile compositing/overflow repair */
@media(max-width:1100px){
  /* Compact non-obstructive mobile shell. */
  .mlbb-data-site .mlab-header{
    position:relative!important;
    top:auto!important;
    width:calc(100% - 16px)!important;
    margin:8px auto 0!important;
    z-index:100!important;
  }
  .mlbb-data-site .mlab-header-main{
    min-height:58px!important;
    height:58px!important;
    padding:4px 6px 4px 9px!important;
    gap:6px!important;
    border-radius:10px!important;
    background:#0b1827!important;
    box-shadow:0 8px 22px rgba(0,0,0,.32)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .mlbb-data-site .mlab-header-main>.mlab-brand{
    min-width:0!important;
    padding:0!important;
    gap:0!important;
  }
  .mlbb-data-site .mlab-header-main>.mlab-brand:after{display:none!important}
  .mlbb-data-site .mlab-logo-image{
    width:94px!important;
    height:48px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .mlbb-data-site .mlab-menu-toggle{
    width:80px!important;
    min-width:80px!important;
    max-width:80px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0 10px!important;
    gap:7px!important;
    border-radius:8px!important;
    background:#102238!important;
    box-shadow:none!important;
  }
  .mlbb-data-site .mlab-menu-toggle b{font-size:.69rem!important}
  .mlbb-data-site .mlab-menu-toggle svg{width:17px!important;height:17px!important}

  /* Dropdown instead of a giant page-height command panel. */
  .mlbb-data-site .mlab-mobile-menu{
    position:absolute!important;
    top:calc(100% + 6px)!important;
    left:0!important;
    right:0!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:min(68dvh,500px)!important;
    margin:0!important;
    padding:8px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    border-radius:10px!important;
    border:1px solid #315677!important;
    background:#081522!important;
    box-shadow:0 18px 38px rgba(0,0,0,.72)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .mlbb-data-site .mlab-mobile-menu-heading{
    min-height:30px!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin:0 2px 7px!important;
    padding:0 3px!important;
    color:#7fcff0!important;
    font-size:.48rem!important;
    line-height:1!important;
    letter-spacing:.12em!important;
  }
  .mlbb-data-site .mlab-mobile-menu-heading:before{
    content:'LAB'!important;
    padding:3px 5px!important;
    border:1px solid #775d1e!important;
    border-radius:3px!important;
    background:#211908!important;
    color:#ffd454!important;
    font-size:.31rem!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a{
    min-width:0!important;
    min-height:48px!important;
    display:grid!important;
    grid-template-columns:18px minmax(0,1fr) auto!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    gap:7px!important;
    padding:7px 8px!important;
    border:1px solid #1d354b!important;
    border-radius:6px!important;
    background:#0a1825!important;
    font-size:.68rem!important;
    line-height:1.15!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a svg{
    grid-row:auto!important;
    width:16px!important;
    height:16px!important;
    align-self:center!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a span{
    align-self:center!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:.68rem!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a b{
    align-self:center!important;
    font-size:.34rem!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a[aria-current=page]{
    border-color:#4385ae!important;
    background:#102b40!important;
    box-shadow:inset 2px 0 0 #ffd14a!important;
  }
  .mlbb-data-site .mlab-mobile-exits{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:5px!important;
    margin-top:6px!important;
    padding-top:6px!important;
  }
  .mlbb-data-site .mlab-mobile-exits a{
    min-height:36px!important;
    padding:6px 8px!important;
    font-size:.6rem!important;
  }

  /* Avoid fixed/backdrop-filter GPU corruption on Chromium/Brave mobile. */
  .mlbb-data-site .mlbb-back-top{
    right:12px!important;
    bottom:max(12px,env(safe-area-inset-bottom))!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    padding:0!important;
    justify-content:center!important;
    border-radius:8px!important;
    background:#10263a!important;
    box-shadow:0 7px 18px rgba(0,0,0,.55)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    will-change:auto!important;
    transform:none!important;
  }
  .mlbb-data-site .mlbb-back-top:not(.is-visible){opacity:0!important;pointer-events:none!important}
  .mlbb-data-site .mlbb-back-top.is-visible{opacity:1!important;transform:none!important}
  .mlbb-data-site .mlbb-back-top b{width:26px!important;height:26px!important;background:transparent!important}
  .mlbb-data-site .mlbb-back-top span{display:none!important}

  /* Hard containment: no profile relation/card may widen or mask the viewport. */
  .mlbb-data-site,
  .mlbb-data-site main,
  .mlbb-data-site .mlbb-wrap,
  .mlbb-data-site .mlbb-detail-content,
  .mlbb-data-site .mlbb-detail-panel,
  .mlbb-data-site .mlbb-matchup-grid,
  .mlbb-data-site .mlbb-relation-list,
  .mlbb-data-site .mlbb-profile-relation-group,
  .mlbb-data-site .mlbb-profile-relation-items{
    min-width:0!important;
    max-width:100%!important;
  }
  .mlbb-data-site{overflow-x:clip!important}
  .mlbb-data-site .mlbb-detail-panel{overflow:hidden!important}
  .mlbb-data-site .mlbb-profile-relation-items .mlbb-relation{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:38px minmax(0,1fr) 48px!important;
    overflow:hidden!important;
  }
  .mlbb-data-site .mlbb-profile-relation-items .mlbb-relation>div{min-width:0!important}
  .mlbb-data-site .mlbb-profile-relation-items .mlbb-relation b,
  .mlbb-data-site .mlbb-profile-relation-items .mlbb-relation small{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

@media(max-width:360px){
  .mlbb-data-site .mlab-mobile-menu nav{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mlbb-data-site .mlab-mobile-menu nav a{padding:6px!important;gap:5px!important}
  .mlbb-data-site .mlab-mobile-menu nav a span{font-size:.62rem!important}
}