/* ═══════════════════════════════════════════════════════════════════════
   BATTLE PREVIEW v7 — clean rewrite from scratch
   ═══════════════════════════════════════════════════════════════════════
   Why a new file
   --------------
   Earlier versions tried to override the legacy .pre-battle-screen.pb3
   cascade (defined across battle.css and battle-mobile.css). That fight
   is unwinnable — too many conflicting rules.

   Strategy
   --------
   • The component now has an EXTRA wrapper class `bp7-root` (added to
     `<div class="pre-battle-screen pb2 pb3 bp7-root">`).
   • EVERY rule below is scoped through `.bp7-root` and uses higher
     specificity (`.bp7-root.bp7-root` doubled selector trick).
   • This guarantees we win the cascade regardless of what battle.css /
     battle-mobile.css say, with NO !important spam beyond what's needed
     for layout properties.
   • Loaded LAST in index.html (via finalize-bundle.js).

   Layout
   ------
   • Fixed positioning anchored to the visible content rectangle:
       top  = --top-bar-height (56px)
       left = --sidebar-width  (230px on desktop, 0 on mobile/collapsed)
   • Card fills 100% of that rectangle — no centering, no max-width cap.
   • Mobile-first single column → tablet stays single column with bigger
     fonts → desktop becomes 3-column arena.
   • Strict min-height:0 on every flex/grid descendant so children can
     shrink below their content size (default min-height: auto = no shrink).
   • Rewards strip auto-hidden on short viewports (<700px tall).
   • NO vertical scrolling — content always fits.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   KILL SWITCH — neutralize legacy battle-mobile.css / battle.css rules
   that use !important on .pre-battle-screen descendants. We must use
   !important on layout properties to win against ~990 legacy !important
   declarations. revert-layer + unset where possible.
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root,
.bp7-root *,
.bp7-root *::before,
.bp7-root *::after {
  /* allow our cascade to take over by neutralizing legacy positioning */
  box-sizing: border-box !important;
}

/* ─── Local design tokens ───────────────────────────────────────────── */
:root {
  --bp7-bg:        radial-gradient(ellipse at top, #161823 0%, #0c0e16 60%, #06070c 100%);
  --bp7-panel:     rgba(255, 255, 255, 0.035);
  --bp7-panel-2:   rgba(255, 255, 255, 0.06);
  --bp7-edge:      rgba(255, 255, 255, 0.09);
  --bp7-edge-hi:   rgba(255, 255, 255, 0.18);
  --bp7-text:      #e9ecf5;
  --bp7-text-dim:  rgba(233, 236, 245, 0.65);
  --bp7-accent:    #f7a00f;
  --bp7-accent-2:  #fbbf24;
  --bp7-good:      #22c55e;
  --bp7-good-soft: rgba(34, 197, 94, 0.18);
  --bp7-bad:       #ef4444;
  --bp7-bad-soft:  rgba(239, 68, 68, 0.18);
  --bp7-radius:    12px;
  --bp7-radius-sm: 8px;
}

/* ─── Debug badge (HIDDEN — remove after design verified) ─────────── */
.bp7-root::before { display: none !important; content: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ROOT — pin to the content rectangle, NEVER overlap sidebar/top-bar
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root.bp7-root {
  position: fixed !important;
  top: var(--top-bar-height, 56px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bp7-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 40 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
  font-size: 14px !important;
  color: var(--bp7-text) !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
}

/* Desktop sidebar reserves left strip → push preview right */
@media (min-width: 1025px) {
  body.has-sidebar .bp7-root.bp7-root         { left: var(--sidebar-width, 230px) !important; }
  body.sidebar-collapsed .bp7-root.bp7-root   { left: var(--sidebar-collapsed-width, 60px) !important; }
  body:not(.has-sidebar) .bp7-root.bp7-root   { left: 0 !important; }
}
/* No top bar variant */
body:not(.has-top-status-bar) .bp7-root.bp7-root { top: 0 !important; }

/* If we're inside Battle4's hub mode (.b4-root in DOM), TestHeader hides
   sidebar/top bar → fill the entire viewport. */
body:has(.b4-root) .bp7-root.bp7-root {
  top: 0 !important;
  left: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD — fills the root, flex column with 3 zones
     1. header  (auto)
     2. arena   (1fr — gets all remaining height)
     3. actions (auto)
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root .bp7-card.bp7-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  padding-top: max(8px, env(safe-area-inset-top, 0)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0)) !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

/* ─── HEADER ────────────────────────────────────────────────────────── */
.bp7-root .pb2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  flex: 0 0 auto;
  min-height: 0;
}
.bp7-root .pb2-back-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 9px;
  font-size: 1rem;
  background: var(--bp7-panel-2);
  border: 1px solid var(--bp7-edge);
  color: var(--bp7-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: background 0.15s;
}
.bp7-root .pb2-back-btn:hover  { background: var(--bp7-edge-hi); }
.bp7-root .pb2-back-btn:active { transform: scale(0.96); }
.bp7-root .pb2-title {
  flex: 1 1 auto;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bp7-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bp7-root .pb2-spacer { width: 34px; flex: 0 0 34px; }

/* ═══════════════════════════════════════════════════════════════════════
   ARENA — mobile single column, desktop 3-column
   Order on mobile: enemy (top) → player gear (middle, fills) → center pills
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root .pb2-arena {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
  grid-template-areas:
    "enemy"
    "player"
    "center" !important;
  gap: 6px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  background: transparent !important;
  border: none !important;
}
.bp7-root .pb2-player-side { grid-area: player; }
.bp7-root .pb2-enemy-side  { grid-area: enemy; }
.bp7-root .pb2-center      { grid-area: center; }
.bp7-root .pb2-arena > * {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMBATANT PANELS (player + enemy share base)
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root .pb2-combatant {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 8px !important;
  margin: 0 !important;
  background: var(--bp7-panel) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: var(--bp7-radius) !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}
.bp7-root .pb2-combatant-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  flex: 0 0 auto;
  min-height: 0;
}
.bp7-root .pb2-name {
  flex: 1 1 auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--bp7-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bp7-root .pb2-avatar { font-size: 1rem; flex: 0 0 auto; }

/* ─── Player stat pills row ─────────────────────────────────────────── */
.bp7-root .pb2-stats-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  inset: auto !important;
}
.bp7-root .pb2-stat {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 6px;
  border-radius: 7px;
  background: var(--bp7-panel-2);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--bp7-text);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid var(--bp7-edge);
}
.bp7-root .pb2-stat.win  { background: var(--bp7-good-soft); color: #86efac; border-color: rgba(34, 197, 94, 0.3); }
.bp7-root .pb2-stat.lose { background: var(--bp7-bad-soft);  color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }

/* ═══════════════════════════════════════════════════════════════════════
   GEAR GRID — 2 cols × 3 rows on mobile (was 3×2 before, too cramped)
   Slots are 1fr × 1fr → shrink with viewport, image scales to fit.
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root .pb2-equipment-col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
.bp7-root .pb2-slot {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 4px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  background: var(--bp7-panel-2) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: var(--bp7-radius-sm) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color 0.15s, transform 0.1s !important;
  inset: auto !important;
  transform: none !important;
}
.bp7-root .pb2-slot:hover  { border-color: var(--bp7-edge-hi); }
.bp7-root .pb2-slot:active { transform: scale(0.97); }
.bp7-root .pb2-slot-tier-badge {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 3;
  line-height: 1;
  white-space: nowrap;
  font-weight: 700;
}
.bp7-root .pb2-slot-stars {
  font-size: 0.5rem;
  gap: 1px;
  padding: 0;
  line-height: 1;
  display: flex;
  justify-content: center;
}
.bp7-root .pb2-slot-header {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
}
.bp7-root .pb2-slot-visual {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bp7-root .pb2-slot-img-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bp7-root .pb2-slot-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bp7-root .pb2-slot-footer { display: none; }
.bp7-root .pb2-tier-ribbon {
  font-size: 0.5rem;
  padding: 1px 3px;
  gap: 1px;
}
.bp7-root .pb2-slot-element-overlay {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--bp7-edge);
  border-radius: 50%;
  z-index: 5;
  margin: 0;
}
/* Compact durability bar */
.bp7-root .pb2-slot-dura {
  flex: 0 0 auto;
  padding: 1px 0 0;
  min-height: 0;
}
.bp7-root .pb2-slot-dura-track { height: 3px; background: rgba(0,0,0,0.4); border-radius: 2px; overflow: hidden; }
.bp7-root .pb2-slot-dura-fill  { height: 100%; background: var(--bp7-good); transition: width 0.2s; }
.bp7-root .pb2-slot-dura-row   { display: none; }
.bp7-root .pb2-slot-broken-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: rgba(127, 29, 29, 0.85);
  z-index: 4;
  font-size: 0.65rem;
}
.bp7-root .pb2-slot-fix-btn {
  font-size: 0.6rem;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--bp7-bad);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.bp7-root .pb2-slot-empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.65rem;
  color: var(--bp7-text-dim);
}
.bp7-root .pb2-slot-label { font-size: 0.55rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.5px; }
.bp7-root .pb2-slot-plus  { font-size: 1.2rem; opacity: 0.4; }

/* ═══════════════════════════════════════════════════════════════════════
   ENEMY PANEL
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root .pb2-enemy-side .pb2-enemy-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.bp7-root .pb2-enemy-image-container,
.bp7-root .pb2-enemy-image-container.enlarged {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  inset: auto !important;
  transform: none !important;
}
.bp7-root .pb3-enemy-top-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  padding: 0;
  width: 100%;
  flex: 0 0 auto;
}
.bp7-root .pb3-enemy-lvl-badge {
  font-size: 0.58rem;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.1;
  background: var(--bp7-panel-2);
  border: 1px solid var(--bp7-edge);
  color: var(--bp7-text);
}
.bp7-root .pb2-enemy-image-wrap,
.bp7-root .pb2-enemy-image-wrap.enlarged {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05), transparent 70%) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: var(--bp7-radius-sm) !important;
  box-sizing: border-box !important;
  inset: auto !important;
  transform: none !important;
}
.bp7-root .pb2-enemy-image {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  flex: 0 1 auto !important;
}
.bp7-root .pb2-enemy-fallback { font-size: 3rem; }
.bp7-root .pb2-enemy-element-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  font-size: 1.05rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
/* Enemy stats: chips on a row, NEVER stacked vertically */
.bp7-root .pb2-enemy-stats-overlay {
  position: relative !important;
  inset: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  writing-mode: horizontal-tb !important;
}
.bp7-root .pb2-stat-chip {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  flex-direction: row !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 5px 6px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  background: var(--bp7-panel-2) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--bp7-text) !important;
  line-height: 1 !important;
  border: 1px solid var(--bp7-edge) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}
.bp7-root .pb2-stat-chip.win  { background: var(--bp7-good-soft); color: #86efac; border-color: rgba(34, 197, 94, 0.3); }
.bp7-root .pb2-stat-chip.lose { background: var(--bp7-bad-soft);  color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }

/* Hide noisy passives in compact preview */
.bp7-root .pb2-mob-passives,
.bp7-root .pb2-mob-passives-mobile { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   CENTER STRIP — power dial + win % + matchup pills
   Mobile: horizontal row (compact). Desktop: vertical column.
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root .pb2-center {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  background: var(--bp7-panel) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: var(--bp7-radius) !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}
.bp7-root .pb2-power-ring {
  width: 60px;
  height: 60px;
  margin: 0;
  flex: 0 0 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp7-root .pb2-power-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.bp7-root .pb2-power-ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 8; }
.bp7-root .pb2-power-ring-fill  { fill: none; stroke: url(#pb2PowerGrad); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease; }
.bp7-root .pb2-power-ring-mob-tick { fill: var(--bp7-bad); }
.bp7-root .pb2-power-ring-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.bp7-root .pb2-power-ring-num   { font-size: 0.95rem; line-height: 1; font-weight: 800; color: var(--bp7-accent-2); }
.bp7-root .pb2-power-ring-label { font-size: 0.42rem; letter-spacing: 0.5px; opacity: 0.75; text-transform: uppercase; }
.bp7-root .pb2-power-ring-vs    { font-size: 0.45rem; opacity: 0.85; }
.bp7-root .pb2-win-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 8px;
  font-weight: 700;
  background: var(--bp7-panel-2);
  border: 1px solid var(--bp7-edge);
  flex: 0 0 auto;
  min-width: 56px;
}
.bp7-root .pb2-win-chip-pct   { font-size: 0.95rem; line-height: 1; }
.bp7-root .pb2-win-chip-label { font-size: 0.5rem; letter-spacing: 0.5px; opacity: 0.8; text-transform: uppercase; }
.bp7-root .pb2-win-chip.win-hi  { background: var(--bp7-good-soft); color: #86efac; border-color: rgba(34, 197, 94, 0.3); }
.bp7-root .pb2-win-chip.win-mid { background: rgba(251, 191, 36, 0.14); color: #fde68a; border-color: rgba(251, 191, 36, 0.3); }
.bp7-root .pb2-win-chip.win-lo  { background: var(--bp7-bad-soft); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }
/* Matchup pills — guaranteed horizontal */
.bp7-root .pb2-matchup-summary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 3px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
.bp7-root .pb2-mm-pill {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  width: auto !important;
  height: auto !important;
  align-items: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
  font-size: 0.6rem !important;
  padding: 2px 6px !important;
  margin: 0 !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  background: var(--bp7-panel-2) !important;
  border: 1px solid var(--bp7-edge) !important;
  color: var(--bp7-text) !important;
  word-break: keep-all !important;
}
.bp7-root .pb2-mm-pill.adv { background: var(--bp7-good-soft); color: #86efac; border-color: rgba(34, 197, 94, 0.3); }
.bp7-root .pb2-mm-pill.dis { background: var(--bp7-bad-soft);  color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }
.bp7-root .pb2-mm-pill.emp { background: rgba(255, 255, 255, 0.04); color: var(--bp7-text-dim); }

/* ═══════════════════════════════════════════════════════════════════════
   REWARDS — hidden by default. Shown only on viewports tall enough (≥720px).
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root .pb3-rewards-strip { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   ACTIONS BAR
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root .pb2-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  inset: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  box-sizing: border-box !important;
}
.bp7-root .pb2-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 800;
  border-radius: 10px;
  border: 1px solid var(--bp7-edge-hi);
  background: var(--bp7-panel-2);
  color: var(--bp7-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  transition: background 0.15s, transform 0.1s;
}
.bp7-root .pb2-btn:hover  { background: var(--bp7-edge-hi); }
.bp7-root .pb2-btn:active { transform: scale(0.98); }
.bp7-root .pb2-fight-btn {
  flex: 2 1 0 !important;
  background: linear-gradient(135deg, var(--bp7-accent) 0%, #d97706 100%) !important;
  border-color: var(--bp7-accent) !important;
  color: #1a1208 !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.bp7-root .pb2-fight-btn:hover {
  background: linear-gradient(135deg, var(--bp7-accent-2) 0%, var(--bp7-accent) 100%);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45);
}
.bp7-root .pb2-fight-btn:disabled {
  background: var(--bp7-panel-2);
  color: var(--bp7-text-dim);
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLET ≥640px — bigger paddings, slightly larger center
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .bp7-root .bp7-card { padding: 12px; gap: 8px; }
  .bp7-root .pb2-arena { gap: 8px; }
  .bp7-root .pb2-power-ring { width: 70px; height: 70px; flex-basis: 70px; }
  .bp7-root .pb2-power-ring-num { font-size: 1.1rem; }
  .bp7-root .pb2-title { font-size: 1rem; }
  .bp7-root .pb2-stat,
  .bp7-root .pb2-stat-chip { font-size: 0.85rem; padding: 6px 8px; }
  .bp7-root .pb2-name { font-size: 0.95rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP ≥1024px — three-column arena
   Player gear (left) | Center pills (mid) | Enemy (right)
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .bp7-root .bp7-card.bp7-card {
    max-width: none !important;
    margin: 0 !important;
    padding: 14px !important;
    gap: 10px !important;
  }
  .bp7-root .pb2-arena {
    grid-template-columns: 1fr clamp(150px, 16vw, 220px) 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "player center enemy" !important;
    gap: 12px !important;
  }
  .bp7-root .pb2-equipment-col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  }
  .bp7-root .pb2-center {
    flex-direction: column !important;
    height: 100% !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .bp7-root .pb2-power-ring { width: 110px !important; height: 110px !important; flex-basis: 110px !important; }
  .bp7-root .pb2-power-ring-num   { font-size: 1.5rem !important; }
  .bp7-root .pb2-power-ring-label { font-size: 0.55rem !important; letter-spacing: 1px !important; }
  .bp7-root .pb2-power-ring-vs    { font-size: 0.55rem !important; }
  .bp7-root .pb2-win-chip-pct     { font-size: 1.2rem !important; }
  .bp7-root .pb2-win-chip-label   { font-size: 0.55rem !important; }
  .bp7-root .pb2-matchup-summary { justify-content: center !important; }
  .bp7-root .pb2-stat,
  .bp7-root .pb2-stat-chip { font-size: 0.85rem !important; padding: 6px 10px !important; }
  .bp7-root .pb2-name  { font-size: 1rem !important; }
  .bp7-root .pb2-title { font-size: 1.05rem !important; }
  .bp7-root .pb2-slot  { font-size: 0.78rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ULTRA-WIDE ≥1600px
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .bp7-root .pb2-power-ring { width: 130px; height: 130px; flex-basis: 130px; }
  .bp7-root .pb2-power-ring-num { font-size: 1.7rem; }
  .bp7-root .pb2-arena { grid-template-columns: 1fr clamp(180px, 14vw, 260px) 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHORT viewports — already hide rewards. TALL viewports — show ribbon.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-height: 720px) {
  .bp7-root .pb3-rewards-strip {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
  }
  .bp7-root .pb3-rewards-strip .pb2-rewards-col { display: block; width: 100%; }
  .bp7-root .pb3-rewards-strip .pb2-rewards-preview {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 6px 8px;
    background: var(--bp7-panel);
    border: 1px solid var(--bp7-edge);
    border-radius: var(--bp7-radius-sm);
    box-sizing: border-box;
  }
  .bp7-root .pb3-rewards-strip .pb2-rewards-header {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fde68a;
    padding: 0;
    border: none;
    flex: 0 0 auto;
  }
  .bp7-root .pb3-rewards-strip .pb2-rewards-divider { display: none; }
  .bp7-root .pb3-rewards-strip .pb2-rewards-section {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0;
  }
  .bp7-root .pb3-rewards-strip .pb2-rewards-section-label { display: none; }
  .bp7-root .pb3-rewards-strip .pb2-rewards-row {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
  }
  .bp7-root .pb3-rewards-strip .pb2-reward-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 5px;
    background: var(--bp7-panel-2);
    border: 1px solid var(--bp7-edge);
    font-size: 0.66rem;
    font-weight: 700;
  }
  .bp7-root .pb3-rewards-strip .pb2-rewards-chest-grid {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .bp7-root .pb3-rewards-strip .pb2-chest-card {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 5px;
    background: var(--bp7-panel-2);
    border: 1px solid var(--bp7-edge);
    font-size: 0.65rem;
    font-weight: 700;
  }
  .bp7-root .pb3-rewards-strip .pb2-rewards-locked,
  .bp7-root .pb3-rewards-strip .pb2-rewards-tips { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ITEM-PICKER DRAWER — bottom sheet on mobile, modal on tablet+
   ═══════════════════════════════════════════════════════════════════════ */
.bp7-root .pb2-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 10010;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  animation: bp7-fade 0.18s ease;
}
.bp7-root .pb2-drawer {
  width: 100%;
  max-width: 100%;
  max-height: 78vh;
  background: linear-gradient(180deg, #1a1c24 0%, #14161e 100%);
  border: 1px solid var(--bp7-edge-hi);
  border-radius: 16px 16px 0 0;
  padding: 12px;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
  animation: bp7-slide 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
  box-sizing: border-box;
}
.bp7-root .pb2-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bp7-edge);
}
.bp7-root .pb2-drawer-title { font-size: 0.95rem; font-weight: 700; color: var(--bp7-text); }
.bp7-root .pb2-drawer-close {
  width: 30px;
  height: 30px;
  background: var(--bp7-panel-2);
  border: none;
  border-radius: 50%;
  color: var(--bp7-text);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bp7-root .pb2-drawer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bp7-root .pb2-drawer-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bp7-text-dim);
  margin: 8px 0 4px;
  font-weight: 700;
}
.bp7-root .pb2-drawer-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: var(--bp7-text-dim);
  font-size: 0.85rem;
}
.bp7-root .pb2-drawer-card-wrap {
  position: relative;
  cursor: pointer;
  transition: transform 0.12s;
}
.bp7-root .pb2-drawer-card-wrap:hover  { transform: translateY(-2px); }
.bp7-root .pb2-drawer-card-wrap:active { transform: scale(0.97); }
.bp7-root .pb2-current-equipped {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: var(--bp7-panel);
  border: 1px solid var(--bp7-edge);
  border-radius: var(--bp7-radius-sm);
  margin-bottom: 8px;
}
.bp7-root .pb2-current-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  font-size: 0.75rem;
}
.bp7-root .pb2-unequip-btn {
  margin-top: auto;
  padding: 6px 10px;
  background: var(--bp7-bad);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
}

@media (min-width: 640px) {
  .bp7-root .pb2-drawer-backdrop { align-items: center; padding: 20px; }
  .bp7-root .pb2-drawer { max-width: 620px; max-height: 82vh; border-radius: 14px; }
  .bp7-root .pb2-drawer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bp7-root .pb2-drawer { max-width: 760px; }
  .bp7-root .pb2-drawer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@keyframes bp7-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bp7-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Hint / repair modals (rendered via portal at body level) */
.pb2-hint-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pb2-hint-modal {
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #191722, #0e1118);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
}
.pb2-hint-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pb2-hint-modal-title { font-size: 1rem; font-weight: 700; color: #fff; }
.pb2-hint-modal-close {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   ▼▼▼ FINAL OVERRIDES — MAXIMUM SPECIFICITY ▼▼▼
   Uses `html body .bp7-root` (specificity 0,1,2) prefix to beat any
   legacy rule including `@media .pre-battle-screen.pb2.pb3 ... !important`
   (specificity 0,3,0). Selectors here win every cascade battle.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Root: ALWAYS fixed under topbar, NEVER overlap sidebar ──────── */
html body .pre-battle-screen.bp7-root,
html body .pre-battle-screen.bp7-root.pb2,
html body .pre-battle-screen.bp7-root.pb2.pb3 {
  position: fixed !important;
  inset: var(--top-bar-height, 56px) 0 0 0 !important;
  top: var(--top-bar-height, 56px) !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--bp7-bg) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  z-index: 40 !important;
  transform: none !important;
  filter: none !important;
}
@media (min-width: 1025px) {
  html body.has-sidebar .pre-battle-screen.bp7-root,
  html body.has-sidebar .pre-battle-screen.bp7-root.pb2,
  html body.has-sidebar .pre-battle-screen.bp7-root.pb2.pb3 {
    left: var(--sidebar-width, 230px) !important;
  }
  html body.sidebar-collapsed .pre-battle-screen.bp7-root,
  html body.sidebar-collapsed .pre-battle-screen.bp7-root.pb2,
  html body.sidebar-collapsed .pre-battle-screen.bp7-root.pb2.pb3 {
    left: var(--sidebar-collapsed-width, 60px) !important;
  }
}

/* ─── Card: fills root completely, NO max-width, NO border, NO padding pad ── */
html body .bp7-root .pre-battle-card,
html body .bp7-root .pb2-card,
html body .bp7-root .pb3-card,
html body .bp7-root .bp7-card {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

/* ─── Equipment grid: ALWAYS 2 cols × 3 rows (kill the 3×2 from media) ── */
html body .bp7-root .pb2-equipment-col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 5px !important;
  padding: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ─── Slot: square-ish, no fixed height (let grid decide) ─────────── */
html body .bp7-root .pb2-slot {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 18px 4px 4px !important;  /* leave room for tier badge */
  margin: 0 !important;
  position: relative !important;
  overflow: visible !important; /* allow tier badge floats */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  background: var(--bp7-panel-2) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: var(--bp7-radius-sm) !important;
  font-size: 0.7rem !important;
  cursor: pointer !important;
  inset: auto !important;
  transform: none !important;
}
html body .bp7-root .pb2-slot-header {
  flex: 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .bp7-root .pb2-slot-visual {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
html body .bp7-root .pb2-slot-img-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
html body .bp7-root .pb2-slot-img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
html body .bp7-root .pb2-slot-footer { display: none !important; }
/* Tier badge: small inline at top, NOT floating outside */
html body .bp7-root .pb2-slot-tier-badge {
  position: absolute !important;
  top: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: var(--bp7-text) !important;
  margin: 0 !important;
}
html body .bp7-root .pb2-tier-ribbon {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  z-index: 4 !important;
  font-size: 0.5rem !important;
  padding: 1px 3px !important;
  border-radius: 3px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
html body .bp7-root .pb2-slot-element-overlay {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.65rem !important;
  background: rgba(0, 0, 0, 0.65) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: 50%!important;
  z-index: 5 !important;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ─── Arena: stack on mobile, 3-col on desktop ────────────────────── */
html body .bp7-root .pb2-arena {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
  grid-template-areas: "enemy" "player" "center" !important;
  gap: 6px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}
html body .bp7-root .pb2-arena .pb2-player-side { grid-area: player !important; }
html body .bp7-root .pb2-arena .pb2-enemy-side  { grid-area: enemy  !important; }
html body .bp7-root .pb2-arena .pb2-center      { grid-area: center !important; }

@media (min-width: 1024px) {
  html body .bp7-root .pb2-arena {
    grid-template-columns: 1fr clamp(140px, 14vw, 200px) 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "player center enemy" !important;
    gap: 12px !important;
  }
}

/* ─── Combatant panels ─────────────────────────────────────────────── */
html body .bp7-root .pb2-combatant {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 6px !important;
  margin: 0 !important;
  background: var(--bp7-panel) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: var(--bp7-radius) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}
html body .bp7-root .pb2-combatant-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}

/* ─── Center column — properly spaced, no overlap ───────────────────── */
html body .bp7-root .pb2-center {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  background: var(--bp7-panel) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: var(--bp7-radius) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}
html body .bp7-root .pb2-center > * {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}
html body .bp7-root .pb2-power-ring {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .bp7-root .pb2-win-chip {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  background: var(--bp7-panel-2) !important;
  border: 1px solid var(--bp7-edge) !important;
  min-width: 50px !important;
  width: auto !important;
  height: auto !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
}
html body .bp7-root .pb2-matchup-summary {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 3px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}
html body .bp7-root .pb2-mm-pill {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  width: auto !important;
  height: auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
  font-size: 0.6rem !important;
  padding: 2px 5px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}

/* ─── Stats rows ALWAYS horizontal ──────────────────────────────────── */
html body .bp7-root .pb2-stats-row,
html body .bp7-root .pb2-enemy-stats-overlay {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  box-sizing: border-box !important;
}
html body .bp7-root .pb2-stat,
html body .bp7-root .pb2-stat-chip {
  display: inline-flex !important;
  flex: 1 1 0 !important;
  flex-direction: row !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 5px 6px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background: var(--bp7-panel-2) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--bp7-text) !important;
  line-height: 1 !important;
  border: 1px solid var(--bp7-edge) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

/* ─── Enemy image area: contain portrait, never overflow ──────────── */
html body .bp7-root .pb2-enemy-image-container,
html body .bp7-root .pb2-enemy-image-container.enlarged {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}
html body .bp7-root .pb3-enemy-top-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  flex: 0 0 auto !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}
html body .bp7-root .pb3-enemy-lvl-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 0.6rem !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  background: var(--bp7-panel-2) !important;
  border: 1px solid var(--bp7-edge) !important;
  color: var(--bp7-text) !important;
  margin: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
}
html body .bp7-root .pb2-enemy-image-wrap,
html body .bp7-root .pb2-enemy-image-wrap.enlarged {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05), transparent 70%) !important;
  border: 1px solid var(--bp7-edge) !important;
  border-radius: var(--bp7-radius-sm) !important;
  box-sizing: border-box !important;
  inset: auto !important;
  transform: none !important;
}
html body .bp7-root .pb2-enemy-image {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  flex: 0 1 auto !important;
}
html body .bp7-root .pb2-mob-passives,
html body .bp7-root .pb2-mob-passives-mobile { display: none !important; }

/* ─── Header & Actions ────────────────────────────────────────────── */
html body .bp7-root .pb2-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}
html body .bp7-root .pb2-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  inset: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}
html body .bp7-root .pb2-fight-btn {
  flex: 1 1 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--bp7-accent) 0%, #d97706 100%) !important;
  border: 1px solid var(--bp7-accent) !important;
  color: #1a1208 !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important;
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* ─── Hide rewards strip on short viewports to keep fight button visible ── */
@media (max-height: 720px) {
  html body .bp7-root .pb3-rewards-strip { display: none !important; }
}

/* ─── Tablet/Desktop sizing ───────────────────────────────────────── */
@media (min-width: 640px) {
  html body .bp7-root .pb2-power-ring { width: 80px !important; height: 80px !important; flex-basis: 80px !important; }
  html body .bp7-root .pb2-power-ring-num { font-size: 1.2rem !important; }
}
@media (min-width: 1024px) {
  html body .bp7-root .pb2-center {
    flex-direction: column !important;
    height: 100% !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  html body .bp7-root .pb2-power-ring { width: 120px !important; height: 120px !important; flex-basis: 120px !important; }
  html body .bp7-root .pb2-power-ring-num { font-size: 1.6rem !important; }
  html body .bp7-root .pb2-matchup-summary { justify-content: center !important; }
  html body .bp7-root .pb2-stat,
  html body .bp7-root .pb2-stat-chip { font-size: 0.85rem !important; padding: 6px 10px !important; }
}