/* =========================================================
   Portal Battlepass - compact popup system (loads LAST)
   All body-mounted overlays: small, styled, consistent
   ========================================================= */

/* ---------- Shared overlay shell ---------- */
body > .bp-overlay,
#battlepass-app .bp-overlay,
body > .bp-cardview-overlay,
#battlepass-app .bp-cardview-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12050 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* Hidden = truly gone */
body > .bp-overlay[hidden],
#battlepass-app .bp-overlay[hidden],
body > .bp-cardview-overlay[hidden],
#battlepass-app .bp-cardview-overlay[hidden],
body > .bp-overlay:not(.is-open)[hidden],
body > .cbg-root:not(.is-open),
body > [data-bp="card-battle-root"]:not(.is-open) {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Open state - dim backdrop, centered content */
body > .bp-overlay.is-open,
#battlepass-app .bp-overlay.is-open,
body > .bp-cardview-overlay.is-open,
#battlepass-app .bp-cardview-overlay.is-open,
body > .bp-overlay[data-bp="collectible-overlay"].is-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
}

/* ---------- Compact modal card (store / trade / edit / rewards) ---------- */
body > .bp-overlay.is-open > .bp-modal,
body > .bp-overlay.is-open .bp-store-modal,
body > .bp-overlay.is-open .bp-trade-modal,
body > .bp-overlay.is-open .bp-reward-full-modal,
body > .bp-overlay.is-open .bp-pt-full-modal,
body > .bp-overlay.is-open .bp-claim-reel-modal,
#battlepass-app .bp-overlay .bp-modal,
#battlepass-app .bp-claim-reel-modal {
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: 360px !important;
  max-height: min(78dvh, 620px) !important;
  margin: auto !important;
  padding: 14px 14px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: #141820 !important;
  color: #e8ecf2 !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

/* Trade modal slightly wider is fine but still compact */
body > .bp-overlay.is-open .bp-trade-modal {
  width: min(380px, calc(100vw - 32px)) !important;
  max-width: 380px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

body > .bp-overlay.is-open .bp-trade-modal-scroll {
  padding: 12px 14px !important;
  max-height: min(52dvh, 420px) !important;
  overflow: auto !important;
}

body > .bp-overlay.is-open .bp-trade-modal-head {
  padding: 12px 14px 10px !important;
}
body > .bp-overlay.is-open .bp-trade-modal-head h3 {
  font-size: 16px !important;
  margin: 0 !important;
}
body > .bp-overlay.is-open .bp-trade-modal-actions {
  padding: 10px 14px 12px !important;
  gap: 8px !important;
}

/* Store body compact */
body > .bp-overlay.is-open .bp-store-head h3,
body > .bp-overlay.is-open .bp-modal > h3 {
  font-size: 16px !important;
  margin: 0 0 10px !important;
}
body > .bp-overlay.is-open .bp-store-body {
  max-height: min(50dvh, 380px) !important;
  overflow: auto !important;
}
body > .bp-overlay.is-open .bp-store-row {
  padding: 8px !important;
  gap: 8px !important;
  border-radius: 12px !important;
}
body > .bp-overlay.is-open .bp-btn-primary,
body > .bp-overlay.is-open .bp-btn-secondary,
body > .bp-overlay.is-open .bp-btn,
body > .bp-overlay.is-open .bp-trade-btn {
  padding: 9px 12px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

/* Claim reel compact - works when open via :not([hidden]) OR .is-open, body-mounted too */
#battlepass-app .bp-claim-reel-overlay:not([hidden]),
#battlepass-app .bp-claim-reel-overlay.is-open,
body > .bp-claim-reel-overlay:not([hidden]),
body > .bp-claim-reel-overlay.is-open,
body > .bp-overlay[data-bp="claim-reel-overlay"]:not([hidden]),
body > .bp-overlay[data-bp="claim-reel-overlay"].is-open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.82) !important;
  z-index: 13050 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  padding: 16px !important;
}
#battlepass-app .bp-claim-reel-modal,
body > .bp-overlay .bp-claim-reel-modal {
  width: min(340px, calc(100vw - 28px)) !important;
  max-width: 340px !important;
  padding: 14px 12px 12px !important;
}
#battlepass-app .bp-claim-reel-window {
  max-width: 100% !important;
}
#battlepass-app .bp-claim-reel-card {
  width: 72px !important;
  height: auto !important;
}

/* Full reward tracks - not full browser width */
body > .bp-overlay.is-open .bp-reward-full-modal,
body > .bp-overlay.is-open .bp-pt-full-modal {
  width: min(400px, calc(100vw - 28px)) !important;
  max-width: 400px !important;
  max-height: min(80dvh, 640px) !important;
  padding: 0 !important;
}
body > .bp-overlay.is-open .bp-reward-full-body,
body > .bp-overlay.is-open .bp-pt-full-body {
  max-height: min(62dvh, 500px) !important;
  overflow: auto !important;
  padding: 10px 12px 14px !important;
}
body > .bp-overlay.is-open .bp-pt-sheet-head {
  padding: 12px 14px 10px !important;
}
body > .bp-overlay.is-open .bp-pt-sheet-head h3 {
  font-size: 15px !important;
  margin: 0 !important;
}

/* LB overlay */
body > .bp-overlay.is-open[data-bp="lb-overlay"] .bp-modal,
body > .bp-lb-overlay.is-open .bp-modal {
  width: min(380px, calc(100vw - 28px)) !important;
  max-width: 380px !important;
}

/* =========================================================
   CARD VIEWER - compact, card-only, no fat modal box
   ========================================================= */
body > .bp-cardview-overlay.is-open,
body > .bp-overlay[data-bp="collectible-overlay"].is-open,
#battlepass-app .bp-cardview-overlay.is-open {
  z-index: 12070 !important;
  padding: 12px !important;
  background: rgba(0, 0, 0, 0.76) !important;
}

.bp-cardview-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  z-index: 0 !important;
}

body > .bp-cardview-overlay .bp-cardview,
body > .bp-overlay[data-bp="collectible-overlay"] .bp-cardview,
#battlepass-app .bp-cardview {
  position: relative !important;
  z-index: 1 !important;
  width: min(300px, calc(100vw - 28px)) !important;
  max-width: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 2px 8px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Kill any inherited modal chrome on card viewer */
body > .bp-overlay[data-bp="collectible-overlay"] .bp-modal,
body > .bp-overlay[data-bp="collectible-overlay"] .bp-collectible-modal,
body > .bp-overlay[data-bp="collectible-overlay"] .bp-card-sheet,
body > .bp-cardview-overlay .bp-modal {
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

.bp-cardview-x {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  z-index: 6 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(0,0,0,0.6) !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.bp-cardview-name {
  margin: 0 !important;
  padding: 0 32px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-align: center !important;
  color: #f3f5f8 !important;
  line-height: 1.25 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7) !important;
}
.bp-cardview-meta {
  margin: -4px 0 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  opacity: 0.7 !important;
  text-align: center !important;
  color: #c9d0db !important;
}

.bp-cardview-copies {
  display: flex !important;
  gap: 6px !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  padding: 2px 0 4px !important;
}
.bp-cardview-copies[hidden] { display: none !important; }
.bp-copy-card {
  flex: 0 0 auto !important;
  width: 52px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}
.bp-copy-card-art {
  position: relative !important;
  display: block !important;
  width: 52px !important;
  aspect-ratio: 3 / 4.2 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,0.14) !important;
  background: transparent !important;
}
.bp-copy-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.bp-copy-card.is-selected .bp-copy-card-art {
  border-color: #7dffc0 !important;
  box-shadow: 0 0 0 1px rgba(61,214,140,0.4) !important;
}
.bp-copy-pwr {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  text-align: center !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  color: #ffe28a !important;
  padding: 2px !important;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.92)) !important;
}
.bp-copy-best {
  position: absolute !important;
  top: 3px !important; left: 3px !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  padding: 1px 4px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.8) !important;
  color: #ffe28a !important;
}

/* THE CARD - full PNG curves (no 14px plate crop) */
.bp-cardview-stage {
  width: min(230px, 72vw) !important;
  max-width: 230px !important;
  margin: 2px 0 !important;
}
.bp-cardview-card {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 320 / 480 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5)) !important;
}
.bp-cardview-card.rarity-yellow,
.bp-cardview-card.rarity-blue,
.bp-cardview-card.rarity-green,
.bp-cardview-card.rarity-orange,
.bp-cardview-card.rarity-purple {
  box-shadow: none !important;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5)) !important;
}

.bp-cardview-face {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bp-cardview-face-empty {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  background: #12151c !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

/* Info button */
.bp-card-info-btn {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 6 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  background: rgba(0,0,0,0.55) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4) !important;
  padding: 0 !important;
}
.bp-card-info-btn.is-on {
  border-color: #7dffc0 !important;
  background: rgba(8, 28, 22, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(61,214,140,0.25), 0 0 14px rgba(61,214,140,0.35) !important;
}
.bp-card-info-ico {
  font-size: 14px !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  color: #7dffc0 !important;
  text-shadow: 0 0 8px rgba(61,214,140,0.75) !important;
  line-height: 1 !important;
}

/* Neon overlay on card */
.bp-neon-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(20,255,170,0.14), transparent 55%),
    rgba(2, 8, 12, 0.74) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  animation: bp-neon-in 0.18s ease !important;
}
.bp-neon-overlay[hidden] { display: none !important; }
@keyframes bp-neon-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.bp-neon-inner {
  width: min(100%, 150px) !important;
  padding: 10px 10px 9px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(61, 214, 140, 0.55) !important;
  background: linear-gradient(160deg, rgba(8,28,22,0.94), rgba(4,10,14,0.96)) !important;
  box-shadow:
    0 0 0 1px rgba(125,255,192,0.1) inset,
    0 0 18px rgba(61,214,140,0.28),
    0 8px 18px rgba(0,0,0,0.45) !important;
  text-align: center !important;
}
.bp-neon-power { display: flex !important; flex-direction: column !important; gap: 1px !important; margin-bottom: 8px !important; }
.bp-neon-power span {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  color: rgba(125,255,192,0.75) !important;
}
.bp-neon-power b {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #7dffc0 !important;
  text-shadow: 0 0 14px rgba(61,214,140,0.75) !important;
  line-height: 1 !important;
}
.bp-neon-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.bp-neon-grid div {
  padding: 6px 4px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(61,214,140,0.22) !important;
  background: rgba(0,0,0,0.28) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.bp-neon-grid em {
  font-style: normal !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: rgba(125,255,192,0.65) !important;
}
.bp-neon-grid b {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #eafff4 !important;
}
.bp-neon-foot {
  margin-top: 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(232,255,244,0.7) !important;
}

.bp-cardview-lock-chip {
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  z-index: 6 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 4px 7px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.7) !important;
  border: 1px solid rgba(255,226,138,0.4) !important;
  color: #ffe28a !important;
}

.bp-cardview-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center !important;
  width: 100% !important;
}
.bp-cardview-btn {
  appearance: none !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  line-height: 1.2 !important;
}
.bp-cardview-btn:disabled { opacity: 0.35 !important; cursor: not-allowed !important; }
.bp-cardview-btn[data-bp="collectible-lock"],
.bp-cardview-btn.is-locked {
  border-color: rgba(255,226,138,0.35) !important;
  color: #ffe28a !important;
}
.bp-cardview-btn-danger {
  border-color: rgba(255,100,110,0.35) !important;
  color: #ffb0b6 !important;
}
.bp-cardview-hint {
  margin: 0 !important;
  font-size: 10px !important;
  opacity: 0.55 !important;
  text-align: center !important;
  max-width: 240px !important;
  line-height: 1.35 !important;
  color: #cfd5df !important;
}
.bp-cardview-msg {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ff8e8e !important;
  text-align: center !important;
}

/* =========================================================
   BATTLE ARENA - not oversized on mobile
   ========================================================= */
body > .cbg-root.is-open,
body > [data-bp="card-battle-root"].is-open {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 13000 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body > .cbg-root.is-open .cbg-shell,
body > [data-bp="card-battle-root"].is-open .cbg-shell {
  width: min(100vw, 520px) !important;
  max-width: 520px !important;
  max-height: 100dvh !important;
  padding: 10px 10px 12px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
body > .cbg-root.is-open .cbg-title {
  font-size: 17px !important;
}
body > .cbg-root.is-open .cbg-pool-card,
body > .cbg-root.is-open .cbg-slot {
  border-radius: 10px !important;
}
body > .cbg-root.is-open .cbg-btn {
  padding: 11px 12px !important;
  font-size: 13px !important;
  border-radius: 12px !important;
}

/* Mobile tighten */
@media (max-width: 420px) {
  body > .bp-overlay.is-open,
  body > .bp-cardview-overlay.is-open {
    padding: 10px !important;
  }
  body > .bp-overlay.is-open > .bp-modal,
  body > .bp-overlay.is-open .bp-store-modal,
  body > .bp-overlay.is-open .bp-trade-modal {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(82dvh, 640px) !important;
    border-radius: 14px !important;
  }
  .bp-cardview-stage {
    width: min(180px, 56vw) !important;
    max-width: 180px !important;
  }
  .bp-cardview-name { font-size: 14px !important; }
  .bp-neon-power b { font-size: 22px !important; }
  body > .cbg-root.is-open .cbg-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 8px !important;
  }
}