/* PokéBattle V13.31/V13.33 — Exchange QoL. */

#page-exchange .exchangeOfferV135{min-height:0!important}

/* Three true full-width columns. The first nine cards (3x3) form the default
   viewport; card 10+ stays inside this panel and is reached by internal scroll. */
#page-exchange .exchangeOfferGridV135{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  gap:10px!important;
  width:100%!important;
  height:1040px!important;
  min-height:1040px!important;
  max-height:1040px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  align-content:start!important;
  justify-content:stretch!important;
  padding:2px 9px 2px 2px!important;
  box-sizing:border-box!important;
  overscroll-behavior-y:auto!important;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}
#page-exchange .exchangeOfferGridV135 .exchangeOfferCardV135{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
#page-exchange .exchangeOfferGridV135>.exchangeEmptyV135{
  grid-column:1/-1!important;
  width:100%!important;
  min-height:1010px!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
}
#page-exchange .exchangeOfferGridV135::-webkit-scrollbar{width:9px}
#page-exchange .exchangeOfferGridV135::-webkit-scrollbar-track{background:#0b1019;border-radius:999px}
#page-exchange .exchangeOfferGridV135::-webkit-scrollbar-thumb{background:#354057;border-radius:999px;border:2px solid #0b1019}

#page-exchange .exchangeQuickTopV138{grid-template-columns:1fr auto auto auto auto!important}
#page-exchange #exchangeAuto70V135.exchangeAuto70TopV1331{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:42px!important;padding:0 16px!important;white-space:nowrap!important;
  box-shadow:0 7px 20px rgba(255,195,49,.12)
}
#page-exchange #exchangeAuto70V135.exchangeAuto70TopV1331:not(:disabled){
  border-color:#e0b628!important;background:linear-gradient(180deg,#f1c532,#c99e1f)!important;color:#161000!important
}

/* Native select: short, useful list; no live DOM rewriting while it is open. */
#page-exchange #exchangeRarityV185{min-width:200px;cursor:pointer}
#page-exchange #exchangeRarityV185 option{cursor:pointer}

@media(max-width:1200px){
  #page-exchange .exchangeOfferGridV135{height:900px!important;min-height:900px!important;max-height:900px!important}
  #page-exchange .exchangeOfferGridV135>.exchangeEmptyV135{min-height:870px!important}
}
@media(max-width:820px){
  #page-exchange .exchangeQuickTopV138{grid-template-columns:1fr 1fr!important}
  #page-exchange .exchangeQuickTopV138 .meta{grid-column:1/-1!important}
  #page-exchange .exchangeQuickTopV138 .btn{width:100%!important}
  #page-exchange .exchangeOfferGridV135{height:650px!important;min-height:650px!important;max-height:650px!important;gap:7px!important}
  #page-exchange .exchangeOfferGridV135>.exchangeEmptyV135{min-height:620px!important}
}
@media(max-width:430px){
  #page-exchange .exchangeOfferGridV135{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    height:520px!important;min-height:520px!important;max-height:520px!important;
    gap:6px!important;padding-right:5px!important
  }
  #page-exchange .exchangeOfferGridV135>.exchangeEmptyV135{min-height:490px!important}
  #page-exchange .exchangeQuickTopV138{grid-template-columns:1fr!important}
}

/* V13.36 — an EMPTY offer is display-only: it must never trap mouse-wheel or
   touch scrolling. The moment a card appears, the normal internal viewport
   becomes interactive again automatically. */
#page-exchange .exchangeOfferGridV135:not(:has(.exchangeOfferCardV135)){
  overflow-y:hidden!important;
  overflow-x:hidden!important;
  overscroll-behavior:auto!important;
  pointer-events:none!important;
  touch-action:auto!important;
}
#page-exchange .exchangeOfferGridV135:not(:has(.exchangeOfferCardV135))::-webkit-scrollbar{display:none!important}


/* V13.37 — more compact exchange offers. Keep the panel full-width, but cards
   are intentionally smaller and the 3x3 area no longer dominates the page. */
#page-exchange .exchangeOfferGridV135{
  grid-template-columns:repeat(3,minmax(0,155px))!important;
  justify-content:start!important;
  height:720px!important;min-height:720px!important;max-height:720px!important;
  gap:9px!important;padding:4px 8px 4px 2px!important
}
#page-exchange .exchangeOfferGridV135 .exchangeOfferCardV135{max-width:155px!important;padding:4px!important}
#page-exchange .exchangeOfferGridV135 .exchangeOfferCardV135 img{width:100%!important;max-height:214px!important;object-fit:cover!important}
#page-exchange .exchangeOfferGridV135>.exchangeEmptyV135{min-height:690px!important}
@media(max-width:1200px){
  #page-exchange .exchangeOfferGridV135{grid-template-columns:repeat(3,minmax(0,135px))!important;height:640px!important;min-height:640px!important;max-height:640px!important}
  #page-exchange .exchangeOfferGridV135 .exchangeOfferCardV135{max-width:135px!important}
  #page-exchange .exchangeOfferGridV135 .exchangeOfferCardV135 img{max-height:186px!important}
  #page-exchange .exchangeOfferGridV135>.exchangeEmptyV135{min-height:610px!important}
}
@media(max-width:820px){
  #page-exchange .exchangeOfferGridV135{grid-template-columns:repeat(3,minmax(0,1fr))!important;height:500px!important;min-height:500px!important;max-height:500px!important}
  #page-exchange .exchangeOfferGridV135 .exchangeOfferCardV135{max-width:none!important}
  #page-exchange .exchangeOfferGridV135 .exchangeOfferCardV135 img{max-height:none!important}
  #page-exchange .exchangeOfferGridV135>.exchangeEmptyV135{min-height:470px!important}
}