/* MHQ MLBB Lab Draft Picker v8 — stable viewport sheet + single-scroll mobile UX */
.mlbb-data-site .mlbb-picker,
.mlbb-data-site .mlbb-picker *{box-sizing:border-box}
.mlbb-data-site .mlbb-picker-hero,
.mlbb-data-site [data-add-side],
.mlbb-data-site .mlbb-team-lanes>span.is-missing{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.mlbb-data-site .mlbb-picker-hero>*{pointer-events:none!important}
.mlbb-data-site .mlbb-picker-hero:before,
.mlbb-data-site .mlbb-picker-hero:after{pointer-events:none!important}

/* Desktop/tablet: cleaner centered workspace. */
.mlbb-data-site .mlbb-picker{
  width:min(980px,calc(100% - 32px))!important;
  max-width:980px!important;
  max-height:min(88dvh,820px)!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:16px!important;
}
.mlbb-data-site .mlbb-picker-card{
  width:100%!important;
  min-width:0!important;
  height:min(88dvh,820px)!important;
  max-height:min(88dvh,820px)!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
  overflow:hidden!important;
}
.mlbb-data-site .mlbb-picker-head,
.mlbb-data-site .mlbb-picker-toolbar{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
}
.mlbb-data-site .mlbb-picker-grid{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.mlbb-data-site .mlbb-picker-group,
.mlbb-data-site .mlbb-picker-group-grid{min-width:0!important;max-width:100%!important}
.mlbb-data-site .mlbb-picker-hero{cursor:pointer!important;user-select:none!important}

@media(max-width:820px){
  html.mlbb-picker-open,
  html.mlbb-picker-open body{overflow:hidden!important;overscroll-behavior:none!important}

  /* A contained sheet, not a 100vw document-sized dialog. */
  .mlbb-data-site .mlbb-picker{
    position:fixed!important;
    inset:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom)) 8px!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid #2b4964!important;
    border-radius:16px!important;
    background:#07111c!important;
    box-shadow:0 24px 70px rgba(0,0,0,.62)!important;
  }
  .mlbb-data-site .mlbb-picker::backdrop{
    background:rgba(2,6,11,.78)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
  }
  .mlbb-data-site .mlbb-picker-card{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    min-width:0!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    overflow:hidden!important;
    border-radius:inherit!important;
    background:#07111c!important;
  }

  .mlbb-data-site .mlbb-picker-head{
    min-width:0!important;
    padding:12px 13px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    border-bottom:1px solid #1f3549!important;
    background:linear-gradient(180deg,#0c1d2d,#091724)!important;
    z-index:3!important;
  }
  .mlbb-data-site .mlbb-picker-head .mlbb-kicker{
    margin:0 0 4px!important;
    font-size:.45rem!important;
  }
  .mlbb-data-site .mlbb-picker-head h2{
    margin:0!important;
    font-size:clamp(1.75rem,8vw,2.35rem)!important;
    line-height:.95!important;
  }
  .mlbb-data-site .mlbb-picker-head>button{
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    border-radius:9px!important;
    background:#0e2031!important;
    border:1px solid #29445c!important;
  }

  .mlbb-data-site .mlbb-picker-toolbar{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:8px!important;
    border-bottom:1px solid #1f3549!important;
    background:#081522!important;
    z-index:2!important;
  }
  .mlbb-data-site .mlbb-picker-search,
  .mlbb-data-site .mlbb-picker-search input{min-width:0!important;max-width:100%!important}
  .mlbb-data-site .mlbb-picker-search input{
    width:100%!important;
    height:48px!important;
    padding:0 13px!important;
    border-radius:9px!important;
    font-size:1rem!important;
    background:#06111b!important;
    border:1px solid #315777!important;
    box-shadow:none!important;
  }
  .mlbb-data-site .mlbb-picker-search input:focus{
    border-color:#55cfff!important;
    box-shadow:0 0 0 2px rgba(55,190,244,.14)!important;
  }

  .mlbb-data-site .mlbb-picker-lanes{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:4px!important;
    overflow:visible!important;
  }
  .mlbb-data-site .mlbb-picker-lanes button{
    min-width:0!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    padding:2px!important;
    border-radius:8px!important;
    font-size:.39rem!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  .mlbb-data-site .mlbb-picker-lanes button.is-needed:after{display:none!important}

  /* This is the ONLY scrolling surface in the sheet. */
  .mlbb-data-site .mlbb-picker-grid{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:8px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:auto!important;
  }
  .mlbb-data-site .mlbb-picker-group{
    width:100%!important;
    min-width:0!important;
    margin:0 0 10px!important;
    border:1px solid #20364a!important;
    border-radius:10px!important;
    overflow:hidden!important;
    background:#091521!important;
  }
  .mlbb-data-site .mlbb-picker-group-head{
    min-width:0!important;
    padding:9px 10px!important;
    background:#0c1a28!important;
  }
  .mlbb-data-site .mlbb-picker-group-grid,
  .mlbb-data-site .mlbb-picker-group-grid.single{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    padding:7px!important;
  }
  .mlbb-data-site .mlbb-picker-hero{
    width:100%!important;
    min-width:0!important;
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
    padding:7px!important;
    border:1px solid #263d52!important;
    border-radius:8px!important;
    background:#08141f!important;
    overflow:hidden!important;
  }
  .mlbb-data-site .mlbb-picker-hero:active{
    transform:scale(.985)!important;
    background:#102438!important;
    border-color:#4c83aa!important;
  }
  .mlbb-data-site .mlbb-picker-hero img{
    width:48px!important;
    height:56px!important;
    object-fit:cover!important;
    border-radius:7px!important;
  }
  .mlbb-data-site .mlbb-picker-hero span{min-width:0!important;overflow:hidden!important}
  .mlbb-data-site .mlbb-picker-hero b{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:.62rem!important;
  }
  .mlbb-data-site .mlbb-picker-hero small{
    display:block!important;
    min-width:0!important;
    margin-top:2px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:.38rem!important;
  }
  .mlbb-data-site .mlbb-picker-primary-lane{font-size:.34rem!important}
  .mlbb-data-site .mlbb-picker-hero i{font-size:.32rem!important}
}

@media(max-width:390px){
  .mlbb-data-site .mlbb-picker{inset:max(5px,env(safe-area-inset-top)) 5px max(5px,env(safe-area-inset-bottom)) 5px!important}
  .mlbb-data-site .mlbb-picker-lanes{gap:3px!important}
  .mlbb-data-site .mlbb-picker-lanes button{font-size:.35rem!important}
  .mlbb-data-site .mlbb-picker-group-grid,
  .mlbb-data-site .mlbb-picker-group-grid.single{gap:5px!important;padding:6px!important}
  .mlbb-data-site .mlbb-picker-hero{grid-template-columns:44px minmax(0,1fr)!important;min-height:68px!important;padding:6px!important;gap:7px!important}
  .mlbb-data-site .mlbb-picker-hero img{width:44px!important;height:52px!important}
}

@media(prefers-reduced-motion:reduce){
  .mlbb-data-site .mlbb-picker-hero:active{transform:none!important}
}