/* Final UI hotfix: mobile inventory + battle duplicate summary + visible room code. */

/* During/after battle there must be one product/set summary only: the stable lobby block. */
#battleBriefV131038{
  display:none!important;
  visibility:hidden!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
}

/* Make the room code visually unmistakable. */
#pbLobbyStable46 .pb46CodeRow{
  align-items:center!important;
  flex-wrap:nowrap!important;
}
#pbLobbyStable46 .pb46CodeRow b{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:100%!important;
  padding:7px 10px!important;
  border-radius:9px!important;
  border:1px solid #745ee8!important;
  background:linear-gradient(180deg,rgba(116,94,232,.24),rgba(78,59,171,.16))!important;
  color:#ffe052!important;
  font-size:13px!important;
  font-weight:1000!important;
  letter-spacing:.12em!important;
  text-shadow:0 1px 0 rgba(0,0,0,.25)!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#pbLobbyStable46 .pb46CodeRow button{
  flex:0 0 auto!important;
}

/* Mobile inventory: deliberately vertical controls; no compressed selects or horizontal overflow. */
@media(max-width:620px){
  #page-inventory{
    width:100%!important;
    max-width:100%!important;
    padding-left:12px!important;
    padding-right:12px!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  #page-inventory .sectionhead{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
  }
  #page-inventory .sectionhead>div{
    width:100%!important;
    min-width:0!important;
  }
  #page-inventory #sellAll{
    width:100%!important;
    min-height:44px!important;
    margin:0!important;
  }
  #page-inventory .stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  #page-inventory .stat{
    width:auto!important;
    min-width:0!important;
    padding:12px!important;
  }

  #page-inventory .inventoryToolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 10px!important;
    padding:10px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }
  #page-inventory .inventoryToolbar>#invSearch,
  #page-inventory .inventoryToolbar>#invSort,
  #page-inventory .inventoryToolbar>#invRarity,
  #page-inventory .inventoryToolbar>#invGradeFilterV115{
    grid-column:1/-1!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    margin:0!important;
    box-sizing:border-box!important;
    font-size:14px!important;
  }
  #page-inventory .inventoryToolbar select{
    padding-left:13px!important;
    padding-right:38px!important;
    text-overflow:ellipsis!important;
  }

  /* Legacy selection/lock row: stack instead of scrolling sideways. */
  #page-inventory .sellSelectedBar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    align-items:stretch!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 10px!important;
    overflow:visible!important;
  }
  #page-inventory #sellSelected{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    margin:0!important;
    white-space:normal!important;
  }
  #page-inventory #invLockMassV132{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    scrollbar-width:none!important;
  }
  #page-inventory #invLockMassV132 .btn,
  #page-inventory #invLockMassV132 #inventorySellModeV1396{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    margin:0!important;
    padding:9px 10px!important;
    font-size:11px!important;
    line-height:1.2!important;
    white-space:normal!important;
    text-align:center!important;
  }

  /* New sale-mode bar also stacks cleanly. */
  #page-inventory #inventorySellBarV1396{
    display:none!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin:0 0 10px!important;
    padding:10px!important;
    overflow:visible!important;
  }
  #page-inventory.pbSellModeV1396 #inventorySellBarV1396{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  #page-inventory #inventorySellBarV1396 .sellSummaryV1396{
    width:100%!important;
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }
  #page-inventory #inventorySellBarV1396 .sellBtnsV1396{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px!important;
    width:100%!important;
    min-width:0!important;
  }
  #page-inventory #inventorySellBarV1396 .sellBtnsV1396 .btn{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    white-space:normal!important;
  }

  #page-inventory .inventoryActionsV10{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 10px!important;
  }
  #page-inventory .inventoryActionsV10 .btn{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    white-space:normal!important;
  }
  #page-inventory #inventory{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
}

@media(max-width:370px){
  #page-inventory #inventory{
    grid-template-columns:minmax(0,1fr)!important;
  }
}