/* Latest requested fixes: 4-up mobile inventory, editable battle lobby, friend invite modal, FFA VS chain. */

/* ---------- Mobile inventory: four cards per row ---------- */
@media(max-width:760px){
  #page-inventory #inventory{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  #page-inventory #inventory .inv,
  #page-inventory #inventory .invPackV10{
    min-width:0!important;
    width:auto!important;
    padding:3px!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }
  #page-inventory #inventory .inv img,
  #page-inventory #inventory .invPackV10 img{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    border-radius:5px!important;
  }
  #page-inventory #inventory .inv b,
  #page-inventory #inventory .invPackV10 b{
    display:block!important;
    font-size:7px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    margin-top:3px!important;
  }
  #page-inventory #inventory .inv span,
  #page-inventory #inventory .invPackV10 span,
  #page-inventory #inventory .rarityLine{
    font-size:6.5px!important;
    line-height:1.15!important;
  }
  #page-inventory #inventory .inv .btn,
  #page-inventory #inventory .invPackV10 .btn,
  #page-inventory #inventory .sellOne,
  #page-inventory #inventory button{
    min-height:24px!important;
    padding:3px 2px!important;
    font-size:6.5px!important;
    border-radius:6px!important;
    white-space:normal!important;
  }
  #page-inventory #inventory .packActionsV10{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:3px!important;
  }
  /* In sale mode, finger dragging should select instead of scrolling the card grid. */
  #page-inventory.pbSellModeV1396 #inventory [data-inv-index]{
    touch-action:none!important;
    user-select:none!important;
    -webkit-user-select:none!important;
  }
}
@media(max-width:370px){
  #page-inventory #inventory{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important}
}

/* ---------- Editable lobby facts ---------- */
.pbLatestEditableFact select,.pbLatestEditableFact input{
  width:100%!important;
  min-width:0!important;
  min-height:30px!important;
  border:1px solid #3a465f!important;
  background:#0c1320!important;
  color:#fff!important;
  border-radius:8px!important;
  padding:0 8px!important;
  font-size:11px!important;
  font-weight:900!important;
  box-sizing:border-box!important;
}
.pbLatestEditableFact input[type="number"]{appearance:textfield}
.pbLatestEditableFact input[type="number"]::-webkit-outer-spin-button,
.pbLatestEditableFact input[type="number"]::-webkit-inner-spin-button{appearance:none;margin:0}
.pbLatestEditableFact .pbLatestHint{display:block;color:#f2cf42;font-size:8px;font-weight:900;margin-top:4px}

/* ---------- Dedicated battle-friend invite popup ---------- */
#pbBattleInviteModalLatest{
  position:fixed;inset:0;z-index:2400;display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(4,7,13,.76);backdrop-filter:blur(12px)
}
#pbBattleInviteModalLatest.open{display:flex}
.pbBattleInviteCardLatest{
  width:min(620px,100%);max-height:min(82vh,760px);overflow:hidden;
  display:grid;grid-template-rows:auto 1fr;border:1px solid #354159;border-radius:20px;
  background:linear-gradient(180deg,#111827,#0b111b);box-shadow:0 28px 80px rgba(0,0,0,.5)
}
.pbBattleInviteHeadLatest{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid #283349}
.pbBattleInviteHeadLatest h3{margin:0;color:#fff;font-size:19px}
.pbBattleInviteHeadLatest p{margin:4px 0 0;color:#8f9bb0;font-size:10px}
.pbBattleInviteHeadLatest button{width:38px;height:38px;border:1px solid #354159;border-radius:11px;background:#151d2d;color:#fff;font-size:18px;cursor:pointer}
.pbBattleInviteBodyLatest{overflow:auto;padding:13px;display:grid;gap:12px}
.pbBattleInviteSectionLatest>h4{margin:0 0 7px;color:#aab5c8;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.pbBattleInviteListLatest{display:grid;gap:7px}
.pbBattleInviteRowLatest{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #2c374c;border-radius:12px;background:#101725;padding:9px 10px}
.pbBattleInviteWhoLatest{min-width:0}.pbBattleInviteWhoLatest b{display:block;color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pbBattleInviteWhoLatest small{display:block;color:#8996ac;font-size:9px;margin-top:3px}
.pbBattleInviteStatusLatest{display:inline-flex;align-items:center;gap:5px}.pbBattleInviteStatusLatest i{width:7px;height:7px;border-radius:50%;display:inline-block;background:#5d6678}.pbBattleInviteStatusLatest.online i{background:#48d68b;box-shadow:0 0 8px rgba(72,214,139,.45)}
.pbBattleInviteRowLatest button{flex:0 0 auto;min-width:92px;min-height:34px;border:1px solid #4b5a78;border-radius:9px;background:#171f30;color:#fff;font-weight:1000;font-size:10px;cursor:pointer}.pbBattleInviteRowLatest button:hover:not(:disabled){border-color:#f2cf42}.pbBattleInviteRowLatest button:disabled{opacity:.52;cursor:not-allowed}
.pbBattleInviteEmptyLatest{padding:14px;text-align:center;color:#7f8ba1;border:1px dashed #303b50;border-radius:11px;font-size:10px}

/* ---------- FFA VS chain ---------- */
#pbLatestVs{position:fixed;inset:0;z-index:2600;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(4,7,13,.42);backdrop-filter:blur(15px)}
#pbLatestVs.show{display:flex}
.pbLatestVsStage{width:min(1320px,calc(100vw - 24px));min-height:330px;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:linear-gradient(135deg,rgba(16,23,37,.97),rgba(7,11,19,.97));box-shadow:0 28px 90px rgba(0,0,0,.5);padding:30px 24px;display:flex;align-items:center;justify-content:center;gap:11px;overflow:hidden;position:relative}
.pbLatestVsStage:before{content:"";position:absolute;inset:-25%;background:linear-gradient(115deg,transparent 36%,rgba(255,65,80,.11) 44%,transparent 51%,rgba(70,109,255,.11) 60%,transparent 67%);animation:pbLatestSlash 2.8s ease both;pointer-events:none}
@keyframes pbLatestSlash{from{transform:translateX(-26%)}to{transform:translateX(26%)}}
.pbLatestVsChain{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:9px;width:100%}
.pbLatestVsFighter{width:150px;min-width:0;border:1px solid #37445d;background:#151d2d;border-radius:17px;padding:12px 9px;text-align:center;opacity:0;transform:translateY(22px) scale(.82);box-shadow:0 16px 28px rgba(0,0,0,.25)}
.pbLatestVsFighter.go{animation:pbLatestFighterIn .34s cubic-bezier(.2,.95,.2,1) forwards}
@keyframes pbLatestFighterIn{to{opacity:1;transform:none}}
.pbLatestVsAvatar{width:76px;height:76px;margin:0 auto 8px;border:1px solid #40506b;border-radius:17px;background:#0c1320;display:grid;place-items:center;overflow:hidden;font-size:32px;font-weight:1000}.pbLatestVsAvatar img{width:100%;height:100%;object-fit:cover}
.pbLatestVsFighter b{display:block;color:#fff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pbLatestVsFighter small{display:block;color:#9ba6ba;font-size:8px;font-weight:900;margin-top:3px;letter-spacing:.05em}
.pbLatestVsSep{width:78px;height:78px;object-fit:contain;opacity:0;transform:scale(.35) rotate(-8deg);filter:drop-shadow(0 12px 18px rgba(0,0,0,.35));flex:0 0 auto}.pbLatestVsSep.go{animation:pbLatestVsPop .28s cubic-bezier(.2,1.25,.2,1) forwards}@keyframes pbLatestVsPop{to{opacity:1;transform:scale(1) rotate(0)}}
.pbLatestOpen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.55);z-index:5;opacity:0;color:#fff;font-size:66px;font-weight:1000;letter-spacing:.16em;text-shadow:0 0 20px rgba(255,212,70,.35)}.pbLatestOpen.go{animation:pbLatestOpenIn .38s ease forwards}@keyframes pbLatestOpenIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.pbLatestTeamWrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 145px 1fr;align-items:center;gap:15px;width:100%}.pbLatestTeam{display:flex;justify-content:center;gap:10px}.pbLatestTeam.blue .pbLatestVsFighter{border-color:#3e72c7;background:linear-gradient(180deg,#15213a,#111827)}.pbLatestTeam.red .pbLatestVsFighter{border-color:#b94c5b;background:linear-gradient(180deg,#311923,#17131c)}

@media(max-width:760px){
  .pbLatestVsStage{min-height:260px;padding:22px 7px;border-radius:18px;gap:4px}
  .pbLatestVsChain{gap:3px}
  .pbLatestVsFighter{width:58px;padding:7px 3px;border-radius:11px}
  .pbLatestVsAvatar{width:42px;height:42px;border-radius:10px;font-size:20px;margin-bottom:5px}
  .pbLatestVsFighter b{font-size:8px}.pbLatestVsFighter small{font-size:6px}
  .pbLatestVsSep{width:29px;height:29px}
  .pbLatestOpen{font-size:34px}
  .pbLatestTeamWrap{grid-template-columns:1fr 56px 1fr;gap:4px}
  .pbLatestTeam{gap:4px}.pbLatestTeam .pbLatestVsFighter{width:70px}
  .pbBattleInviteCardLatest{max-height:88vh}
  .pbBattleInviteRowLatest{padding:8px}.pbBattleInviteRowLatest button{min-width:78px}
}


/* V13.37 — stable custom battle dropdowns. Native <select> popups were being
   destroyed by room polling; these menus are part of the game UI instead. */
#page-battle #pbLobbyStable46{overflow:visible!important}
#page-battle #pbLobbyStable46 .pb46Facts{overflow:visible!important}
#page-battle #pbLobbyStable46 .pbLatestEditableFact{position:relative!important;overflow:visible!important}
.pbBattleDropdownV1337{position:relative;width:100%;z-index:20}
.pbBattleDropdownV1337.open{z-index:500}
.pbBattleDropdownBtnV1337{
  width:100%;min-height:34px;border:1px solid #3a465f;border-radius:8px;
  background:#0c1320;color:#fff;padding:0 10px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;font-size:11px;font-weight:900;cursor:pointer;
  box-sizing:border-box;text-align:left
}
.pbBattleDropdownBtnV1337:hover,.pbBattleDropdownV1337.open .pbBattleDropdownBtnV1337{border-color:#6c50f4;box-shadow:0 0 0 2px rgba(108,80,244,.12)}
.pbBattleDropdownBtnV1337 i{font-style:normal;color:#a8b4c9;font-size:14px;line-height:1;transition:transform .14s ease}
.pbBattleDropdownV1337.open .pbBattleDropdownBtnV1337 i{transform:rotate(180deg)}
.pbBattleDropdownMenuV1337{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);padding:5px;
  border:1px solid #3b4760;border-radius:10px;background:#0a101b;
  box-shadow:0 18px 45px rgba(0,0,0,.48);max-height:260px;overflow:auto;z-index:9999
}
.pbBattleDropdownV1337.open .pbBattleDropdownMenuV1337{display:grid;gap:3px}
.pbBattleDropdownMenuV1337 button{
  min-height:34px;width:100%;border:0;border-radius:7px;background:transparent;color:#e8edf7;
  padding:7px 9px;text-align:left;font-size:11px;font-weight:800;cursor:pointer
}
.pbBattleDropdownMenuV1337 button:hover{background:#182237;color:#fff}
.pbBattleDropdownMenuV1337 button.active{background:#5c3fe0;color:#fff}

/* V13.38 — instant custom dropdown interaction. */
.pbBattleDropdownBtnV1337,.pbBattleDropdownMenuV1337 button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}