/* ========================================
   BATTLE SYSTEM V2 - TokenLordsRPG
   Clean, Modern UI
   ======================================== */

/* ========================================
   BATTLE MODE SELECTION
   ======================================== */
body:has(.battle-mode-select) {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  min-height: 100vh;
}
.battle-mode-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  padding: 2rem;
  gap: 2.5rem;
}
.battle-mode-header {
  text-align: center;
}
.battle-mode-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 16px rgba(247,160,15,0.25);
}
.battle-mode-subtitle {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
  letter-spacing: 0.02em;
}
.battle-mode-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 820px;
  width: 100%;
}
.battle-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.5rem 1.8rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(165deg, rgba(20,25,35,0.95), rgba(12,14,22,0.98));
  cursor: pointer;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: center;
}
.battle-mode-card-glow {
  position: absolute;
  top: -60%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 200%;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.battle-mode-card.single .battle-mode-card-glow {
  background: radial-gradient(ellipse, rgba(59,130,246,0.12) 0%, transparent 60%);
}
.battle-mode-card.multi .battle-mode-card-glow {
  background: radial-gradient(ellipse, rgba(239,68,68,0.12) 0%, transparent 60%);
}
.battle-mode-card:hover .battle-mode-card-glow {
  opacity: 1;
}
.battle-mode-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.battle-mode-card.single:hover {
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 12px 40px rgba(59,130,246,0.12), 0 0 0 1px rgba(59,130,246,0.1);
}
.battle-mode-card.multi:hover {
  border-color: rgba(239,68,68,0.35);
  box-shadow: 0 12px 40px rgba(239,68,68,0.12), 0 0 0 1px rgba(239,68,68,0.1);
}
.battle-mode-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 2px 12px rgba(239,68,68,0.4);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 2px 12px rgba(239,68,68,0.4); }
  50% { box-shadow: 0 2px 20px rgba(239,68,68,0.7); }
}
.battle-mode-card-icon {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.battle-mode-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.battle-mode-card-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: 0.04em;
}
.battle-mode-card.single .battle-mode-card-title {
  color: #93c5fd;
}
.battle-mode-card.multi .battle-mode-card-title {
  color: #fca5a5;
}
.battle-mode-card-desc {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin: 0;
  max-width: 300px;
}
.battle-mode-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.25rem;
}
.battle-mode-tag {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.02em;
}
.battle-mode-tag.highlight {
  color: #fbbf24;
  background: rgba(251,191,36,0.1);
  border-color: rgba(251,191,36,0.25);
}
.battle-mode-card-arrow {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.2);
  transition: all 0.3s;
  margin-top: 0.25rem;
}
.battle-mode-card:hover .battle-mode-card-arrow {
  color: rgba(255,255,255,0.6);
  transform: translateX(4px);
}
/* Mobile: stack cards vertically */
@media (max-width: 680px) {
  .battle-mode-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 400px;
  }
  .battle-mode-card {
    padding: 1.5rem 1.2rem;
  }
  .battle-mode-card-icon {
    font-size: 2.5rem;
  }
  .battle-mode-title {
    font-size: 1.2rem;
  }
}

/* ========================================
   BODY LAYOUT OVERRIDE FOR BATTLE PAGE
   Override login.css centered layout
   ======================================== */
body:has(.battle-hub),
body:has(.battle-arena),
body:has(.class-selection),
body:has(.class-selection-v2),
body:has(.cs2-wrap),
body:has(.pre-battle-overlay) {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  min-height: 100vh;
}

/* Ensure content takes full width */
.content:has(.battle-hub),
.content:has(.battle-arena),
.content:has(.class-selection),
.content:has(.class-selection-v2),
.content:has(.cs2-wrap),
.content:has(.pre-battle-overlay) {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2rem clamp(1.5rem, 5vw, 3rem);
  overflow-y: auto;
}

/* Battle hub should take full width */
.battle-hub {
  width: 100%;
}

/* ========================================
   FONT IMPORT - Orbitron for Headers
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
  --energy-color: #00d9ff;
  --health-player: #22c55e;
  --health-enemy: #ef4444;
  --elite-glow: #a855f7;
  --fire: #f97316;
  --water: #3b82f6;
  --earth: #84cc16;
  --air: #a78bfa;
  --gold: #fbbf24;
  --bronze: #cd7f32;
  --xp-color: #22d3ee;
  --surface: rgba(20, 25, 35, 0.95);
  --surface-light: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.1);
  --text: #f8fbff;
  --text-muted: rgba(255, 255, 255, 0.6);
  --primary: #3b82f6;
  --text-bright: #ffffff;
  --tl-primary: #f7a00f;
}

/* ========================================
   TOP BAR - Page Header
   ======================================== */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.top-bar-line {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.5rem 1.2rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.58);
}

.header-divider {
  opacity: 0.45;
}

.page-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: var(--tl-primary);
  letter-spacing: 0.4rem;
  text-transform: uppercase;
}

/* Ensure all interactive elements are properly clickable */
button,
.btn,
.class-card,
.skill-btn,
.adventure-level-btn {
  position: relative;
  z-index: 1;
}

/* ========================================\n   ADVENTURE PANEL - AAA+ GAME UI\n   ======================================== */\n.adventure-panel {\n  padding: 16px;\n}\n\n.adventure-panel h3 {\n  font-family: 'Orbitron', sans-serif;\n  font-size: 1rem;\n  margin: 0 0 12px 0;\n  color: var(--gold);\n  letter-spacing: 1px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* LOCKED ADVENTURE PANEL */\n.adventure-panel.adventure-locked {\n  position: relative;\n  min-height: 120px;\n}\n\n.adventure-panel.adventure-locked h3 {\n  opacity: 0.5;\n}\n\n.adventure-locked-overlay {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 1.5rem;\n  text-align: center;\n}\n\n.adventure-locked-overlay .locked-icon {\n  font-size: 2.5rem;\n  margin-bottom: 0.75rem;\n  opacity: 0.8;\n}\n\n.adventure-locked-overlay .locked-text {\n  font-family: 'Orbitron', sans-serif;\n  font-size: 1.1rem;\n  font-weight: 700;\n  color: rgba(255, 255, 255, 0.7);\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  margin-bottom: 0.5rem;\n}\n\n.adventure-locked-overlay .locked-subtext {\n  font-size: 0.85rem;\n  color: rgba(255, 255, 255, 0.5);\n}\n\n.adventure-clues {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.85rem;
}

.adventure-clues .clue-icon {
  font-size: 1.1rem;
}

.adventure-clues strong {
  color: var(--gold);
  font-family: 'Orbitron', sans-serif;
}

/* Adventure Cards Grid */
.adventure-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.adventure-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1),
              border-color 0.2s ease,
              box-shadow 0.2s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}

.adventure-card:hover:not(.locked) {
  transform: translateY(-5px);
  border-color: hsla(38, 90%, 65%, 0.5);
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.4),
    0 0 20px hsla(38, 90%, 65%, 0.25);
}

.adventure-card:active:not(.locked) {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.3),
    0 0 12px hsla(38, 90%, 65%, 0.2);
}

.adventure-card.locked {
  filter: grayscale(0.5);
  opacity: 0.8;
}

.adventure-card-image {
  position: relative;
  height: 90px;
  background-size: cover;
  background-position: center;
}

.adventure-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
}

.adventure-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  background: var(--accent, var(--gold));
  color: #000;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.adventure-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.adventure-lock-overlay .lock-icon {
  font-size: 1.5rem;
  opacity: 0.8;
}

.adventure-card-content {
  padding: 10px;
}

.adventure-card-title {
  margin: 0 0 6px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adventure-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.adventure-meta-item {
  font-size: 0.65rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

.adventure-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.adventure-cost {
  font-size: 0.7rem;
  font-weight: 600;
}

.adventure-cost.affordable {
  color: var(--gold);
}

.adventure-cost.expensive {
  color: var(--text-muted);
}

.adventure-start-btn {
  padding: 6px 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--accent, var(--gold));
  color: #000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.adventure-start-btn:hover:not(.disabled) {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--accent, var(--gold));
}

.adventure-start-btn.disabled {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Active Adventure Card */
.active-adventure-card {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--accent, var(--gold));
  box-shadow: 0 0 20px rgba(var(--accent, 251, 191, 36), 0.15);
}

.active-adventure-card .adventure-card-image {
  height: 120px;
}

.active-adventure-card .adventure-card-content {
  padding: 16px;
}

.active-adventure-card .adventure-card-title {
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--accent, var(--gold));
}

.adventure-card-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.adventure-progress-track {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
}

.adventure-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px currentColor;
}

.adventure-progress-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 36px;
  text-align: right;
}

.adventure-card-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.adventure-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}

.adventure-stat-icon {
  font-size: 1rem;
}

.adventure-stat-value {
  color: var(--text);
}

.ready-pulse {
  color: #22c55e;
  font-weight: 600;
  animation: ready-pulse 1.5s ease infinite;
}

@keyframes ready-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.adventure-claim-btn {
  width: 100%;
  padding: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: claim-glow 2s ease infinite;
}

@keyframes claim-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.7); }
}

.adventure-claim-btn:hover {
  transform: scale(1.02);
}

/* Legacy styles kept for backward compat */
.adventure-levels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adventure-levels .adventure-level-btn {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 14px 16px;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  color: var(--text);
}

.adventure-levels .adventure-level-btn:hover:not(.disabled) {
  border-color: var(--gold);
  background: rgba(251, 191, 36, 0.08);
}

.adventure-levels .adventure-level-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.adventure-levels .level-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.adventure-levels .level-cost {
  color: var(--gold);
  font-weight: 600;
  text-align: right;
}

.adventure-levels .level-duration {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.adventure-levels .level-chests {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
}

.clue-count {
  margin: 12px 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.active-adventure {
  text-align: left;
  border-radius: 12px;
  overflow: hidden;
}

.active-adventure.ready {
  animation: readyPulse 2s ease-in-out infinite;
}

@keyframes readyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.2); }
}

.active-adventure-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid;
  border-radius: 12px;
  margin-bottom: 16px;
}

.active-adventure-icon {
  font-size: 2.5rem;
  line-height: 1;
}

.active-adventure-info {
  flex: 1;
}

.active-adventure-info h4 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
}

.active-adventure-level {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.active-adventure-chests {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.active-adventure-chests .chest-count {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--gold);
}

.active-adventure-chests .chest-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.active-adventure-progress {
  margin-bottom: 16px;
}

.progress-bar-container {
  position: relative;
  height: 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.progress-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-percent {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text);
}

.progress-time {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
}

.adventure-claim-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.adventure-claim-btn.pulse {
  animation: claimPulse 1.5s ease-in-out infinite;
}

@keyframes claimPulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
  }
  50% { 
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.5);
  }
}

.adventure-claim-btn:disabled {
  background: var(--surface-light);
  color: var(--text-muted);
  cursor: not-allowed;
  animation: none;
}

/* ========================================
   LAYOUT & GRID
   ======================================== */
.hub-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}

.hub-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hub-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 900px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }
  
  .hub-left {
    order: 2;
  }
  
  .hub-right {
    order: 1;
  }
}

/* ========================================
   LOADING STATE
   ======================================== */
.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 16px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-overlay p {
  color: var(--text-muted);
  margin-top: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.hidden {
  display: none !important;
}

/* ========================================
   CLASS SELECTION V2 — VIP-style carousel
   ======================================== */

/* Admin preview banners */
.cs-admin-banner {
  background: linear-gradient(90deg, rgba(16,185,129,0.2), rgba(16,185,129,0.1));
  border: 1px solid rgba(16,185,129,0.4);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 12px;
  color: #34d399;
  font-size: 0.8rem;
  text-align: center;
}
.cs-admin-notice {
  position: relative;
  background: linear-gradient(90deg, rgba(16,185,129,0.25), rgba(16,185,129,0.12));
  border: 1px solid rgba(16,185,129,0.5);
  border-radius: 12px;
  padding: 14px 40px 14px 16px;
  margin-bottom: 16px;
  color: #6ee7b7;
  font-size: 0.85rem;
  text-align: center;
}
.cs-admin-notice-close {
  position: absolute;
  top: 8px; right: 12px;
  background: none;
  border: none;
  color: #6ee7b7;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

/* Outer wrapper */
.cs2-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px 0 32px;
  background: #05060a;
  gap: 0;
  overflow: hidden;
}

/* Header */
.cs2-header {
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  padding: 0 16px;
}
.cs2-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #F7A00F, #ffd166);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 6px;
}
.cs2-subtitle {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
  letter-spacing: 0.04em;
}

/* Stage — carousel container */
.cs2-stage {
  position: relative;
  width: 100%;
  max-width: 1100px;
  padding: 0 max(64px, 6vw) 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.cs2-stage__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 50% 40%,
    color-mix(in srgb, var(--tc) 22%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
  transition: background 0.7s ease;
  z-index: 0;
}

/* Navigation arrows */
.cs2-arrow {
  position: absolute;
  top: 40%;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(15,18,28,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent);
  color: #fff;
  font-size: 1.9rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 6;
  transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  transform: translateY(-50%);
}
.cs2-arrow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--tc) 22%, rgba(15,18,28,0.88));
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--tc) 40%, transparent);
}
.cs2-arrow:disabled { opacity: 0.22; cursor: not-allowed; }
.cs2-arrow--left  { left: 8px; }
.cs2-arrow--right { right: 8px; }

/* Row holding peeks + hero */
.cs2-stage__row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  min-height: min(640px, 72vh);
}

/* Peek tiles (partially visible side cards) */
.cs2-peek {
  position: absolute;
  top: 50%;
  height: 76%;
  width: clamp(110px, 13vw, 190px);
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--tc) 30%, rgba(255,255,255,0.05));
  background: #0a0c14;
  cursor: pointer;
  opacity: 0.5;
  filter: blur(2px) brightness(0.5) saturate(0.75);
  transform: translateY(-50%) scale(0.88);
  z-index: 0;
  transition:
    opacity 0.55s cubic-bezier(0.22,1,0.36,1),
    filter  0.55s cubic-bezier(0.22,1,0.36,1),
    transform 0.55s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.55s ease;
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.cs2-peek--left  { left:  max(8px, calc(50% - clamp(110px,13vw,190px) - clamp(130px,12vw,220px))); }
.cs2-peek--right { right: max(8px, calc(50% - clamp(110px,13vw,190px) - clamp(130px,12vw,220px))); }

.cs2-peek--from-center { animation: cs2-peek-from-center 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.cs2-peek--from-edge-l { animation: cs2-peek-from-edge-l 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.cs2-peek--from-edge-r { animation: cs2-peek-from-edge-r 0.6s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes cs2-peek-from-center {
  0%   { opacity: 0.9; transform: translateY(-50%) scale(1.0); filter: blur(0) brightness(0.9) saturate(1); }
  100% { opacity: 0.5; transform: translateY(-50%) scale(0.88); filter: blur(2px) brightness(0.5) saturate(0.75); }
}
@keyframes cs2-peek-from-edge-l {
  0%   { opacity: 0; transform: translate(-40px,-50%) scale(0.76); filter: blur(8px) brightness(0.35) saturate(0.5); }
  100% { opacity: 0.5; transform: translateY(-50%) scale(0.88); filter: blur(2px) brightness(0.5) saturate(0.75); }
}
@keyframes cs2-peek-from-edge-r {
  0%   { opacity: 0; transform: translate(40px,-50%) scale(0.76); filter: blur(8px) brightness(0.35) saturate(0.5); }
  100% { opacity: 0.5; transform: translateY(-50%) scale(0.88); filter: blur(2px) brightness(0.5) saturate(0.75); }
}
.cs2-peek:hover {
  opacity: 0.88;
  filter: blur(0.5px) brightness(0.82) saturate(0.9);
  transform: translateY(-50%) scale(0.94);
  box-shadow: 0 22px 50px color-mix(in srgb, var(--tc) 35%, transparent);
}
.cs2-peek__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.cs2-peek__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,8,13,0.08) 0%, rgba(6,8,13,0.9) 100%);
  pointer-events: none;
}
.cs2-peek__label {
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}

/* Hero card — center portrait */
.cs2-hero {
  position: relative;
  height: min(640px, 72vh);
  width: calc(min(640px, 72vh) * 0.58);
  max-width: 74vw;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 22%, #0a0c14) 0%, #0a0c14 100%);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.65),
    0 0 0 1px color-mix(in srgb, var(--tc) 22%, transparent),
    0 0 90px color-mix(in srgb, var(--tc) 14%, transparent);
  z-index: 2;
  flex-shrink: 0;
  transition: box-shadow 0.5s ease;
}
.cs2-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
  transition: transform 1s ease;
}
.cs2-hero:hover .cs2-hero__img { transform: scale(1.04); }
.cs2-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(6,8,13,0.04) 0%,
      rgba(6,8,13,0.18) 36%,
      rgba(6,8,13,0.72) 68%,
      rgba(6,8,13,0.97) 100%);
  pointer-events: none;
}

/* Animated content layer — re-mounts on class change for slide anim */
.cs2-hero__layer {
  position: absolute; inset: 0;
  z-index: 3;
  will-change: transform, opacity;
}
.cs2-layer--enter-r { animation: cs2-slide-in-r 0.48s cubic-bezier(0.22,1,0.36,1) both; }
.cs2-layer--enter-l { animation: cs2-slide-in-l 0.48s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes cs2-slide-in-r {
  0%   { opacity: 0; transform: translateX(36px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes cs2-slide-in-l {
  0%   { opacity: 0; transform: translateX(-36px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Info button (top-right corner) */
.cs2-info-btn {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(15,18,28,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.78);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  transition: background 0.2s, border-color 0.2s;
}
.cs2-info-btn:hover {
  background: color-mix(in srgb, var(--tc) 25%, rgba(15,18,28,0.88));
  border-color: color-mix(in srgb, var(--tc) 55%, transparent);
  color: #fff;
}

/* Bottom content area */
.cs2-hero__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cs2-hero__emoji {
  font-size: 1.8rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tc) 60%, transparent));
}
.cs2-hero__name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tc) 70%, #fff);
  text-shadow: 0 0 20px color-mix(in srgb, var(--tc) 50%, transparent);
  margin: 0;
  line-height: 1;
}
.cs2-hero__desc {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.4;
}

/* Stat chips */
.cs2-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cs2-stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 9px;
  background: rgba(10,12,20,0.78);
  border: 1px solid color-mix(in srgb, var(--tc) 28%, rgba(255,255,255,0.06));
  border-radius: 8px;
  backdrop-filter: blur(4px);
  gap: 1px;
}
.cs2-stat-chip__label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.cs2-stat-chip__value {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--tc) 80%, #fff);
}

/* Skill pills */
.cs2-hero__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cs2-skill-pill {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--tc) 10%, rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--tc) 32%, rgba(255,255,255,0.07));
  border-radius: 20px;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}

/* Action buttons */
.cs2-btn {
  width: 100%;
  padding: 11px 20px;
  border-radius: 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: transform 0.18s ease, box-shadow 0.2s ease, opacity 0.15s;
  margin-top: 2px;
}
.cs2-btn--select {
  background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 60%, #fff));
  color: #0a0a0a;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--tc) 45%, transparent);
}
.cs2-btn--select:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--tc) 60%, transparent);
}
.cs2-btn--confirm {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 6px 18px rgba(239,68,68,0.38);
}
.cs2-btn--confirm:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(239,68,68,0.55);
}
.cs2-btn--cancel {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
  color: rgba(255,255,255,0.65);
  box-shadow: none;
  font-size: 0.7rem;
}
.cs2-btn--cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cs2-btn:disabled { opacity: 0.42; cursor: not-allowed; }

/* Confirm overlay */
.cs2-confirm { display: flex; flex-direction: column; gap: 7px; }
.cs2-confirm__text {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  text-align: center;
}
.cs2-confirm__text strong { color: color-mix(in srgb, var(--tc) 80%, #fff); }
.cs2-confirm__text small { font-size: 0.66rem; color: rgba(255,255,255,0.42); }
.cs2-confirm__btns { display: flex; flex-direction: column; gap: 6px; }

/* Thumbnail strip */
.cs2-thumbs {
  display: flex;
  gap: 8px;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.cs2-thumb {
  position: relative;
  width: clamp(60px, 8.5vw, 90px);
  aspect-ratio: 3/5;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  border: 2px solid rgba(255,255,255,0.07);
  background: #0a0c14;
  cursor: pointer;
  opacity: 0.48;
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  filter: saturate(0.55);
}
.cs2-thumb--active {
  opacity: 1;
  border-color: color-mix(in srgb, var(--tc) 75%, transparent);
  transform: scale(1.12) translateY(-5px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--tc) 45%, transparent);
  filter: saturate(1);
}
.cs2-thumb:hover:not(.cs2-thumb--active) {
  opacity: 0.8;
  transform: scale(1.06) translateY(-2px);
  border-color: rgba(255,255,255,0.22);
  filter: saturate(0.8);
}
.cs2-thumb__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.cs2-thumb__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6,8,13,0.92) 100%);
  pointer-events: none;
}
.cs2-thumb__label {
  position: absolute; bottom: 5px; left: 0; right: 0;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,0.9);
}

/* Responsive */
@media (max-width: 640px) {
  .cs2-title { font-size: 1.4rem; }
  .cs2-stage { padding: 0 max(48px, 5vw) 12px; }
  .cs2-hero {
    height: min(540px, 66vh);
    width: calc(min(540px, 66vh) * 0.62);
    max-width: 70vw;
  }
  .cs2-hero__name { font-size: 1.25rem; }
  .cs2-arrow { width: 42px; height: 42px; font-size: 1.5rem; }
  .cs2-peek { display: none; }
  .cs2-thumb { width: clamp(46px, 13vw, 68px); }
}
@media (max-width: 400px) {
  .cs2-hero { max-width: 82vw; height: min(480px, 60vh); }
  .cs2-thumb { width: clamp(40px, 15vw, 60px); }
}

/* Admin banners */
/* ========================================
   BATTLE HUB
   ======================================== */
.battle-hub {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Stage Header */
.stage-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stage-header {
  text-align: center;
}

.stage-header h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  margin: 0 0 8px 0;
  color: var(--text);
  letter-spacing: 2px;
}

/* Compact Element Hint */
.element-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 6px 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 8px;
  margin-bottom: 12px;
}

.element-hint.hidden {
  display: none;
}

.element-hint #hint-icon {
  font-size: 1rem;
}

/* Button energy badge */
.btn-energy {
  background: rgba(0, 217, 255, 0.2);
  color: var(--energy-color);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-left: 8px;
}

/* Smooth Start Fight button — override "transition: all" from base btn-primary */
.start-fight-btn.btn-primary {
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease;
  will-change: transform;
}
.start-fight-btn.btn-primary:hover {
  transform: translateY(-2px);
}
.start-fight-btn.btn-primary:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: 0.1s;
}

.stage-energy {
  font-size: 0.85rem;
  color: var(--energy-color);
  margin: 0 0 12px 0;
  font-family: 'IBM Plex Mono', monospace;
}

/* ========================================
   BOUNTY BOARD
   ======================================== */
.bounty-board {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.bounty-board h4 {
  margin: 0 0 12px 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  color: var(--gold);
  letter-spacing: 1px;
}

.bounty-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bounty-row:last-of-type {
  border-bottom: none;
}

.bounty-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: 'Orbitron', sans-serif;
  padding: 3px 8px;
  border-radius: 4px;
  text-align: center;
}

/* Bounty label colors */
.bounty-easy .bounty-label {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.bounty-medium .bounty-label {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.bounty-hard .bounty-label {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.bounty-super .bounty-label {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.bounty-bar {
  height: 10px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.bounty-fill {
  height: 100%;
  transition: width 0.4s ease;
  border-radius: 5px;
}

.bounty-easy .bounty-fill {
  background: linear-gradient(90deg, #22c55e, #4ade80);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.bounty-medium .bounty-fill {
  background: linear-gradient(90deg, #eab308, #facc15);
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}

.bounty-hard .bounty-fill {
  background: linear-gradient(90deg, #f97316, #fb923c);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

.bounty-super .bounty-fill {
  background: linear-gradient(90deg, #ef4444, #f87171);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.bounty-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  text-align: right;
}

.bounty-row.complete .bounty-count {
  color: #22c55e;
}

.bounty-row.complete .bounty-count::after {
  content: ' ✓';
}

.bounty-hint {
  margin: 12px 0 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

.bounty-hint.stage-ready {
  color: var(--gold);
  font-weight: 600;
  font-style: normal;
}

/* Disabled button - claim rewards to continue */
.btn-disabled,
.start-fight-btn.btn-disabled {
  background: linear-gradient(135deg, #4a4a4a, #3a3a3a) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 0.8;
  font-size: 0.85rem;
}

.btn-disabled:hover,
.start-fight-btn.btn-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
  background: linear-gradient(135deg, #4a4a4a, #3a3a3a) !important;
}

/* =====================================================
   STAGE ENERGY BAR - Below Start Fight Button
   Simple Clean Design - Enhanced visibility
   ===================================================== */
.stage-energy-bar {
  --energy-color: #00d4ff;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.7), rgba(0, 40, 80, 0.5));
  border-radius: 12px;
  border: 2px solid rgba(0, 212, 255, 0.4);
  position: relative;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

.stage-energy-bar .energy-bar-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
}

.stage-energy-bar .energy-icon {
  font-size: 1.3rem;
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.6));
}

.stage-energy-bar .energy-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--energy-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stage-energy-bar .energy-count {
  margin-left: auto;
  font-size: 1rem;
  font-weight: 700;
  color: var(--energy-color);
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.stage-energy-bar .energy-bar-track {
  height: 16px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Remove the electric border - we're using simple design */
.stage-energy-bar .energy-bar-electric-border {
  display: none;
}

.stage-energy-bar .energy-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, 
    #0066cc 0%, 
    #00aaff 50%, 
    #00d4ff 100%);
  background-size: 200% 100%;
  border-radius: 7px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: energy-slow-shimmer 8s ease-in-out infinite;
}

@keyframes energy-slow-shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

/* Subtle inner glow */
.stage-energy-bar .energy-bar-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
  border-radius: 7px;
}

/* Remove the spark dot at end */
.stage-energy-bar .energy-bar-fill::after {
  display: none;
}

/* Low energy state */
.stage-energy-bar .energy-bar-fill.low-energy {
  background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
  animation: energy-slow-shimmer 4s ease-in-out infinite;
}

/* Energy Refill Button */
.energy-refill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 170, 255, 0.1));
  border: 2px solid rgba(0, 212, 255, 0.4);
  border-radius: 8px;
  color: var(--electric-color, #00d4ff);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.energy-refill-btn:hover {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(0, 170, 255, 0.2));
  transform: translateY(-2px);
  box-shadow: 
    0 0 15px rgba(0, 212, 255, 0.4),
    0 0 30px rgba(0, 212, 255, 0.2);
}

.energy-refill-btn:active {
  transform: scale(0.98);
}

/* Low Energy Glow Animation - Shows when energy < 30% */
.energy-refill-btn.low-energy {
  animation: electric-button-pulse 1s ease-in-out infinite;
  border-color: rgba(0, 212, 255, 0.8);
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(0, 170, 255, 0.2));
}

@keyframes electric-button-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0, 212, 255, 0.4),
                0 0 10px rgba(0, 212, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.8),
                0 0 30px rgba(0, 212, 255, 0.5),
                0 0 45px rgba(0, 212, 255, 0.3);
  }
}

/* Also apply to inline refill button in player panel */
.refill-energy-btn-inline.low-energy {
  animation: electric-button-pulse 1s ease-in-out infinite;
  border-color: rgba(0, 212, 255, 0.8) !important;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(0, 170, 255, 0.2)) !important;
}

/* Low energy bar visual indicator */
.energy-bar-fill.low-energy,
.energy-fill-mini.low-energy {
  animation: energy-bar-low-pulse 0.8s ease-in-out infinite;
}

@keyframes energy-bar-low-pulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.8;
    filter: brightness(1.3);
  }
}

.energy-refill-btn .refill-icon {
  font-size: 1rem;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
}

.energy-refill-btn .refill-text {
  letter-spacing: 0.5px;
}

/* Mobile energy bar */
@media (max-width: 600px) {
  .stage-energy-bar {
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
  }
  
  .stage-energy-bar .energy-bar-header {
    margin-bottom: 0.35rem;
  }
  
  .stage-energy-bar .energy-icon {
    font-size: 1rem;
  }
  
  .stage-energy-bar .energy-label {
    font-size: 0.75rem;
  }
  
  .stage-energy-bar .energy-count {
    font-size: 0.8rem;
  }
  
  .stage-energy-bar .energy-bar-track {
    height: 10px;
  }
  
  .energy-refill-btn {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
  
  .energy-refill-btn .refill-icon {
    font-size: 0.9rem;
  }
}

/* =====================================================
   KILL RANK INFO
   Shows player's rank by kills below Start Fight button
   ===================================================== */
.kill-rank-info {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.rank-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rank-current {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rank-trophy {
  font-size: 1.1rem;
}

.rank-text strong {
  color: var(--tl-primary);
  font-weight: 600;
}

.kills-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
}

.rank-target {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0.25rem;
  line-height: 1.4;
}

.rank-arrow {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.rank-target strong {
  color: #22c55e;
}

.rank-target .player-name {
  color: #60a5fa;
  font-style: italic;
}

.rank-threats {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.threat-icon {
  font-size: 1rem;
  animation: threat-pulse 2s ease-in-out infinite;
}

@keyframes threat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.threat-text {
  color: #f59e0b;
}

.threat-text strong {
  color: #ef4444;
}

/* Training Grounds specific */
.bounty-board.training-mode .bounty-row.bounty-medium,
.bounty-board.training-mode .bounty-row.bounty-hard,
.bounty-board.training-mode .bounty-row.bounty-super {
  display: none;
}

.bounty-board.training-mode h4::after {
  content: ' (Tutorial)';
  color: var(--text-muted);
  font-weight: normal;
}

/* Compact Kill Rank in Bounty Board */
.bb-kill-rank {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center;
  margin-top: 6px; padding: 4px 8px;
  background: rgba(255,215,0,0.06); border-radius: 6px;
  border: 1px solid rgba(255,215,0,0.12);
}
.bb-kr-main {
  font-size: 0.6rem; color: rgba(255,255,255,0.8); white-space: nowrap;
}
.bb-kr-main strong { color: #ffd700; }
.bb-kr-target {
  font-size: 0.55rem; color: rgba(255,255,255,0.5); white-space: nowrap;
}

.stage-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.progress-bar {
  width: 100%;
  max-width: 400px;
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #fff);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
  transition: width 0.3s ease;
}

#stage-progress-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
}

/* Strategy Warning */
.strategy-warning {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.strategy-warning.warning-good {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.2);
}

.strategy-warning.warning-bad {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

.warning-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.warning-text {
  flex: 1;
}

.warning-text strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
}

.warning-text p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.equipped-element {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.element-badge {
  background: var(--surface-light);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.element-badge.element-fire {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.3);
  color: #fdba74;
}

.element-badge.element-water {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

.element-badge.element-earth {
  background: rgba(132, 204, 22, 0.15);
  border-color: rgba(132, 204, 22, 0.3);
  color: #bef264;
}

.element-badge.element-air {
  background: rgba(167, 139, 250, 0.15);
  border-color: rgba(167, 139, 250, 0.3);
  color: #d8b4fe;
}

/* Player Panel */
.player-panel {
  padding: 20px;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.player-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Class box with level number inside */
.player-class-box {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--surface-light), var(--surface));
  border-radius: 12px;
  border: 2px solid #f7a00f;
  box-shadow: 0 4px 12px rgba(247, 160, 15, 0.3);
}

.class-level {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: #f7a00f;
  text-shadow: 0 0 10px rgba(247, 160, 15, 0.5);
}

.player-class {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-light);
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* Level Badge - Yellow circle below class icon */
.level-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7a00f, #ffd700);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(247, 160, 15, 0.4);
}

.level-badge .level-number {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  color: #1a1a2e;
}

.player-details {
  flex: 1;
}

.player-details h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  margin: 0 0 8px 0;
  letter-spacing: 1px;
}

/* Inline XP Progress Bar */
.player-xp-inline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.xp-bar-mini {
  flex: 1;
  height: 8px;
  background: var(--surface-light);
  border-radius: 4px;
  overflow: hidden;
}

.xp-fill-mini {
  height: 100%;
  background: linear-gradient(90deg, #f7a00f, #ffd700);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.xp-text-mini {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
}

/* Energy Bar - Compact inline version (directly below XP) */
.energy-inline {
  margin-top: 6px;
}

.energy-inline .energy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.energy-inline .energy-label {
  font-size: 0.7rem;
  color: var(--energy-color);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.energy-inline .energy-timer-mini {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
}

.energy-bar-mini {
  height: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}

.energy-fill-mini {
  height: 100%;
  background: linear-gradient(90deg, var(--energy-color), #00ffd5);
  box-shadow: 0 0 8px var(--energy-color);
  transition: width 0.3s ease;
}

.energy-text-mini {
  display: block;
  text-align: right;
  font-size: 0.7rem;
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
}

/* Adventure Clues Display */
.adventure-clues {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(247, 160, 15, 0.1);
  border-radius: 8px;
  margin-bottom: 12px;
}

.adventure-clues .clue-icon {
  font-size: 1.1rem;
}

.adventure-clues .clue-count {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.adventure-clues .clue-count strong {
  color: #f7a00f;
  font-weight: 600;
}

.player-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-item {
  background: var(--surface-light);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.03);
}

.stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
}

/* Secondary Stats */
.secondary-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
}

.sec-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.sec-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sec-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
}

/* Equipped Elements Breakdown */
.elements-breakdown {
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
}

.elements-title {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.element-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.elem-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.elem-icon {
  width: 18px;
  font-size: 0.9rem;
}

.elem-bar-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.elem-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.elem-bar-fill.fire { background: linear-gradient(90deg, #ff6b35, #ff4500); }
.elem-bar-fill.water { background: linear-gradient(90deg, #00b4d8, #0088ff); }
.elem-bar-fill.earth { background: linear-gradient(90deg, #cd853f, #8b5a2b); }
.elem-bar-fill.air { background: linear-gradient(90deg, #e0e0e0, #a0a0a0); }

.elem-pct {
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 30px;
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
}

.elem-row:nth-child(1) .elem-pct { color: #ff6b35; }
.elem-row:nth-child(2) .elem-pct { color: #00b4d8; }
.elem-row:nth-child(3) .elem-pct { color: #cd853f; }
.elem-row:nth-child(4) .elem-pct { color: #e0e0e0; }

/* ===== Battle3 Redesigned Player Panel ===== */

/* Hero Header */
.b3-hero-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.b3-hero-portrait {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #f7a00f;
  box-shadow: 0 4px 16px rgba(247, 160, 15, 0.3), inset 0 0 20px rgba(0,0,0,0.3);
}

.b3-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.b3-hero-level-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7a00f, #ffd700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: #1a1a2e;
  border: 2px solid rgba(0,0,0,0.5);
  box-shadow: 0 2px 8px rgba(247, 160, 15, 0.5);
}

.b3-hero-identity {
  flex: 1;
  min-width: 0;
}

.b3-hero-class {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  margin: 0 0 6px 0;
  letter-spacing: 1px;
  color: #fff;
}

.b3-hero-xp {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.b3-xp-track {
  height: 7px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}

.b3-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #f7a00f, #ffd700);
  border-radius: 4px;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px rgba(247, 160, 15, 0.4);
}

.b3-xp-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
  font-family: 'IBM Plex Mono', monospace;
}

.b3-gear-tier-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.25);
}

/* Combat Stats */
.b3-combat-stats {
  margin-bottom: 14px;
}

.b3-stats-title,
.b3-gear-title {
  font-size: 0.62rem;
  color: rgba(255, 179, 71, 0.9);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  font-weight: 600;
}

.b3-stats-grid {
  display: grid;
  /* Always 3 columns — one row. Smaller gap so even narrow phones fit. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.b3-stat-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.05);
  min-width: 0; /* let flex children shrink */
}

.b3-stat-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.b3-stat-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.b3-stat-name {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1;
}

.b3-stat-total {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.2;
}

.b3-stat-breakdown {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.35);
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1;
}

.b3-gear-bonus {
  color: #4ade80;
  margin-left: 2px;
}

/* Equipped Gear */
.b3-equipped-gear {
  margin-bottom: 14px;
  padding: 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
}

.b3-gear-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.b3-gear-slot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color 0.2s;
}

.b3-gear-slot.filled {
  border-color: rgba(255,255,255,0.1);
}

.b3-gear-slot.empty {
  opacity: 0.5;
}

.b3-gear-slot-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

.b3-gear-slot-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.b3-gear-name {
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.b3-gear-meta {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.2;
}

.b3-gear-meta.empty {
  color: rgba(255,255,255,0.25);
  font-style: italic;
}

.b3-gear-empty-label {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.3);
}

/* ═══ Equipped Skills Section ═══ */
.b3-equipped-skills {
  margin-bottom: 14px;
  padding: 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
  overflow: hidden;
}

.b3-skill-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.b3-skill-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-height: 42px;
  min-width: 0;
  justify-content: center;
  overflow: hidden;
}

.b3-skill-slot:hover {
  border-color: rgba(247,160,15,0.3);
  background: rgba(247,160,15,0.06);
}

.b3-skill-slot.empty {
  opacity: 0.45;
  border-style: dashed;
}

.b3-skill-slot-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.b3-skill-slot-name {
  font-size: 0.45rem;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.b3-skill-slot-empty {
  font-size: 0.48rem;
  color: rgba(255,255,255,0.85);
  font-style: italic;
  text-align: center;
}

/* Passive slot row */
.b3-passive-slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.b3-passive-label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(76,175,80,0.7);
  text-transform: uppercase;
  min-width: 44px;
}
.b3-skill-slot.passive {
  border-color: rgba(76,175,80,0.2);
  flex: 1;
}
.b3-skill-slot.passive:not(.empty) {
  border-color: rgba(76,175,80,0.35);
  background: rgba(76,175,80,0.06);
}
.b3-skill-slot.passive.locked {
  opacity: 0.3;
  cursor: default;
  border-style: dotted;
  border-color: rgba(255,255,255,0.1);
}
.b3-skill-slot.passive.locked:hover {
  border-color: rgba(255,255,255,0.1);
  background: rgba(0,0,0,0);
}
.b3-passive-slots {
  grid-template-columns: repeat(5, 1fr);
}
.b3-passive-tier {
  display: block;
  text-align: center;
}

.b3-skill-points-row {
  display: flex;
  justify-content: center;
}

.b3-skill-unlock-cta {
  font-size: 0.7rem;
  font-weight: 600;
  color: #F7A00F;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(247,160,15,0.08);
  border: 1px solid rgba(247,160,15,0.2);
  transition: background 0.2s;
  text-align: center;
}

.b3-skill-unlock-cta:hover {
  background: rgba(247,160,15,0.15);
}

.b3-skill-pts-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.b3-skill-pts-badge {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
}

.b3-skill-pts-badge.has-pts {
  color: #F7A00F;
}

.b3-skill-use-pts {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.25);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.2s;
}

.b3-skill-use-pts.active {
  color: #F7A00F;
  background: rgba(247,160,15,0.1);
  border-color: rgba(247,160,15,0.3);
}

.b3-skill-use-pts.active:hover {
  background: rgba(247,160,15,0.2);
}

/* Skill picker overlay */
.b3-skill-picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: b3-picker-fadein 0.2s ease;
}
@keyframes b3-picker-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.b3-skill-picker {
  background: #0c0c0c;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  padding: 0;
  max-width: 380px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: b3-picker-slidein 0.25s ease;
}
@keyframes b3-picker-slidein {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.b3-skill-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.b3-skill-picker-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.b3-skill-picker-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.b3-skill-picker-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.b3-skill-picker-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  overflow-y: auto;
  flex: 1;
}

.b3-skill-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.b3-skill-picker-item:hover:not(.disabled) {
  background: rgba(255,255,255,0.05);
}

.b3-skill-picker-item.selected {
  background: rgba(247,160,15,0.08);
  border-color: rgba(247,160,15,0.3);
}

.b3-skill-picker-item.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.b3-skill-picker-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.b3-skill-picker-item.selected .b3-skill-picker-icon {
  background: rgba(247,160,15,0.12);
}

.b3-skill-picker-name {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e8e8e8;
}

.b3-skill-picker-lv {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.75);
  font-family: 'IBM Plex Mono', monospace;
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

.b3-skill-picker-lock {
  font-size: 0.65rem;
  opacity: 0.5;
}

.b3-skill-picker-check {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(247,160,15,0.2);
  color: #F7A00F;
  font-size: 0.65rem;
  font-weight: 700;
}

.b3-skill-picker-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
}

.b3-skill-picker-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
}

.b3-skill-picker-save {
  padding: 9px 22px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.2);
  cursor: not-allowed;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.b3-skill-picker-save.active {
  background: #F7A00F;
  border-color: #F7A00F;
  color: #000;
  cursor: pointer;
}

.b3-skill-picker-save.active:hover {
  background: #ffb733;
  border-color: #ffb733;
}

.b3-skill-change-link:hover {
  text-decoration: underline;
}

/* ═══ Daily Quests Expander ═══ */
.dq-expander {
  margin-bottom: 12px;
}
.dq-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #ccc;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.dq-toggle:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
}
.dq-toggle.has-claimable {
  border-color: rgba(76,175,80,0.4);
  background: rgba(76,175,80,0.06);
}
.dq-toggle-icon { font-size: 1rem; }
.dq-toggle-text { flex: 1; text-align: left; }
.dq-badge {
  background: #4caf50;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: dq-pulse 1.5s ease infinite;
}
@keyframes dq-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.dq-arrow {
  font-size: 0.75rem;
  transition: transform 0.2s;
  color: #666;
}
.dq-arrow.open { transform: rotate(180deg); }
.dq-content {
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dq-quest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.dq-quest-row.claimable { background: rgba(76,175,80,0.08); border: 1px solid rgba(76,175,80,0.2); }
.dq-quest-row.completed { opacity: 0.5; }
.dq-quest-info {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: #bbb;
}
.dq-quest-icon { font-size: 0.9rem; }
.dq-quest-name { font-weight: 600; color: #ddd; }
.dq-quest-sub { font-size: 0.7rem; color: #888; }
.dq-quest-status { display: flex; align-items: center; }
.dq-progress { font-size: 0.75rem; color: #888; }
.dq-done { font-size: 0.85rem; }
.dq-milestone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 28px;
  font-size: 0.75rem;
  color: #999;
}
.dq-milestone.completed { opacity: 0.4; }
.dq-milestone.claimable { color: #4caf50; }
.dq-ms-icon { font-size: 0.8rem; }
.dq-ms-target { flex: 1; }
.dq-ms-reward { color: #f7a00f; font-weight: 600; }
.dq-claim-btn {
  padding: 3px 10px;
  background: linear-gradient(135deg, #4caf50, #388e3c);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
}
.dq-claim-btn:hover { filter: brightness(1.15); }
.dq-claim-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* SlotCard-based gear grid for PlayerPanel */
.b3-gear-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  row-gap: 16px; /* extra room for the floating LVL tier badge */
  padding-top: 6px;
}
.b3-gear-grid-cards .gc {
  min-width: 0;
  font-size: 0.7rem;
  /* Layout durability bar in flow (4th row) instead of absolute overlay,
     so it sits BELOW stats — matching inventory's vertical order. */
  grid-template-rows: auto 1fr auto auto;
  padding-bottom: 4px !important;
  aspect-ratio: auto; /* let card grow vertically as needed */
  margin-top: 10px;
}
.b3-gear-grid-cards .gc .gc-dura {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 4px 4px 2px !important;
  z-index: auto;
}
.b3-gear-grid-cards .gc-stats {
  padding: 4px 3px;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
}
.b3-gear-grid-cards .gc-stats[data-count="2"] .gc-stat,
.b3-gear-grid-cards .gc-stats[data-count="3"] .gc-stat {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}
.b3-gear-grid-cards .gc-stat {
  gap: 1px;
  min-width: 0;
}
.b3-gear-grid-cards .gc-stat-icon {
  font-size: 0.55rem;
  flex-shrink: 0;
}
.b3-gear-grid-cards .gc-stat-val {
  font-size: 0.55rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.b3-gear-grid-cards .gc-stats[data-count="3"] .gc-stat-icon,
.b3-gear-grid-cards .gc-stats[data-count="3"] .gc-stat-val {
  font-size: 0.5rem;
}
.b3-gear-grid-cards .gc-tier {
  top: -8px;
}
.b3-gear-grid-cards .gc-tier .gc-tier-num {
  font-size: 0.5rem;
  padding: 1px 5px;
}
.b3-gear-grid-cards .gc-header {
  padding: 2px 4px 0;
}
.b3-gear-grid-cards .gc-stars .star {
  font-size: 0.5rem;
}
/* Durability label compacts to one line, never overflows the card. */
.b3-gear-grid-cards .gc-dura .dura-label {
  font-size: 8px;
  letter-spacing: 0.04em;
  gap: 3px;
  min-width: 0;
  margin-top: 2px;
}
.b3-gear-grid-cards .gc-dura .dura-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.b3-gear-grid-cards .gc-dura .dura-label-pct {
  flex-shrink: 0;
}
.b3-gear-grid-cards .gc-dura .dura-track {
  height: 5px;
}

/* ===== End Battle3 Redesigned Player Panel ===== */

/* XP Bar */
.xp-container {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 12px;
}

.xp-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--xp-color), #06b6d4);
  transition: width 0.5s ease;
}

.xp-text {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
}

/* Energy Bar - Inline version (inside player panel) */
.energy-container-inline {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.energy-container-inline .energy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

.energy-container-inline .energy-header span:first-child {
  color: var(--energy-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
}

.energy-container-inline #energy-timer {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: 'IBM Plex Mono', monospace;
}

.energy-container-inline .energy-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.energy-container-inline .energy-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--energy-color), #00ffd5);
  box-shadow: 0 0 12px var(--energy-color);
  transition: width 0.3s ease;
}

.energy-container-inline .energy-text {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
}

/* Energy Bar */
.energy-container {
  padding: 16px;
}

.energy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.85rem;
}

.energy-header span:first-child {
  color: var(--energy-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
}

#energy-timer {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: 'IBM Plex Mono', monospace;
}

.energy-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.energy-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--energy-color), #00ffd5);
  box-shadow: 0 0 12px var(--energy-color);
  transition: width 0.3s ease;
}

.energy-text {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
}

/* Skills Preview */
.skills-preview {
  padding: 16px 0 0 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.stage-card .skills-preview {
  padding: 0;
  margin-top: 20px;
  padding-top: 20px;
}

/* Skills Preview Inline (in player panel) */
.skills-preview-inline {
  padding: 16px 0 0 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.skills-preview-inline h4 {
  margin: 0 0 12px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.skills-preview h4 {
  margin: 0 0 12px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.skills-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 8px;
}

.skill-preview-item {
  background: var(--surface-light);
  padding: 10px 6px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.05);
}

.skill-preview-item .skill-icon {
  font-size: 1.25rem;
  display: block;
  margin-bottom: 4px;
}

.skill-preview-item .skill-name {
  color: var(--text-muted);
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Skill Locking & Info */
.skill-preview-item.locked {
  opacity: 0.5;
  filter: grayscale(100%);
  cursor: not-allowed;
  border-style: dashed;
}

/* =====================================================
   CLASS PASSIVES SECTION
   ===================================================== */
.passives-preview-inline {
  padding: 16px 0 0 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.passives-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 10px;
}

.passives-header h4 {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.passives-summary {
  font-size: 0.7rem;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.expand-icon {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.passive-bonuses-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.passive-bonus {
  font-size: 0.65rem;
  padding: 3px 6px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 4px;
  color: #4ade80;
}

.next-passive-unlock {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.next-passive-label {
  color: #9ca3af;
}

.next-passive-name {
  color: #fbbf24;
  font-weight: 600;
}

.next-passive-level {
  color: #6b7280;
  margin-left: 4px;
}

.passives-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}

.passive-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.passive-item.unlocked {
  border-color: rgba(74, 222, 128, 0.2);
}

.passive-item.locked {
  opacity: 0.5;
  border-style: dashed;
}

.passive-item.mythic {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(139, 92, 246, 0.05));
  border-color: rgba(168, 85, 247, 0.3);
}

.passive-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.passive-info {
  flex: 1;
  min-width: 0;
}

.passive-name {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.passive-desc {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.passive-unlock-req {
  display: block;
  font-size: 0.65rem;
  color: #fbbf24;
  font-style: italic;
  margin-top: 4px;
}

/* ============================================
   ENHANCED PASSIVE SKILL DISPLAY
   ============================================ */

/* Info button in header */
.passives-info-btn {
  cursor: pointer;
  font-size: 0.75rem;
  opacity: 0.6;
  transition: opacity 0.2s;
  margin-left: 4px;
}

.passives-info-btn:hover {
  opacity: 1;
}

/* How Passives Work tooltip */
.passives-info-tooltip {
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  font-size: 0.7rem;
  animation: fadeInUp 0.2s ease-out;
}

.info-tooltip-header {
  font-weight: 600;
  color: #c084fc;
  margin-bottom: 8px;
  font-size: 0.75rem;
}

.info-tooltip-list {
  margin: 0;
  padding: 0 0 0 16px;
  color: var(--text-muted);
  line-height: 1.6;
}

.info-tooltip-list li {
  margin-bottom: 4px;
}

.info-tooltip-list strong {
  color: var(--text-primary);
}

.info-tooltip-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.type-badge {
  font-size: 0.6rem;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.type-badge.stat-bonus {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.type-badge.conditional {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.type-badge.proc {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.3);
}

.type-badge.mythic {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

/* Level badge on passive items */
.passive-level-badge {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.passive-item.unlocked .passive-level-badge {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
}

.passive-item.locked .passive-level-badge {
  background: rgba(100, 100, 100, 0.2);
}

.passive-item.mythic .passive-level-badge {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  border-color: rgba(168, 85, 247, 0.4);
}

.passive-level-badge .level-num {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
}

.passive-item.unlocked .passive-level-badge .level-num {
  color: #4ade80;
}

.passive-item.mythic .passive-level-badge .level-num {
  color: #c084fc;
}

/* Passive name row with type badge */
.passive-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.passive-type-badge {
  font-size: 0.55rem;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Effect details styling */
.passive-effect-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.effect-detail-line {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.passive-item.unlocked .effect-detail-line {
  color: rgba(255, 255, 255, 0.85);
}

.passive-item.locked .effect-detail-line {
  color: rgba(255, 255, 255, 0.5);
}

.passive-item.mythic .effect-detail-line {
  color: rgba(192, 132, 252, 0.9);
}

/* Update passive item layout for new structure */
.passive-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s;
}

.passive-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.passive-item.unlocked {
  border-color: rgba(74, 222, 128, 0.2);
  background: rgba(74, 222, 128, 0.03);
}

.passive-item.locked {
  opacity: 0.7;
  border-style: dashed;
}

.passive-item.mythic {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(236, 72, 153, 0.05));
  border-color: rgba(168, 85, 247, 0.3);
  border-width: 2px;
}

.passive-item.mythic.unlocked {
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

/* Expanded passives list */
.passives-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 350px;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: 8px;
}

.passives-list::-webkit-scrollbar {
  width: 4px;
}

.passives-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.passives-list::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.3);
  border-radius: 4px;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
   PASSIVE SKILLS BUTTON & POPUP
   ===================================================== */

/* Check Passive Skills Button */
.passive-skills-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 16px;
  background: #111;
  border: 1px solid rgba(249, 115, 22, 0.4);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.passive-skills-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.2), transparent);
  transition: left 0.5s ease;
}

.passive-skills-btn:hover::before {
  left: 100%;
}

.passive-skills-btn:hover {
  background: #1a1a1a;
  border-color: rgba(249, 115, 22, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.passive-skills-btn .btn-icon {
  font-size: 1.2rem;
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

.passive-skills-btn .btn-text {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fdba74;
  text-align: left;
}

.passive-skills-btn .btn-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  background: rgba(74, 222, 128, 0.2);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 20px;
  color: #4ade80;
}

/* Passive Skills Popup Overlay */
.passive-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
  padding: 20px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Popup Container */
.passive-popup {
  width: 100%;
  max-width: 800px;
  height: 90vh;
  background: #0a0a0a;
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  animation: popupSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 
    0 0 60px rgba(0, 0, 0, 0.8),
    0 0 120px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(30px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Popup Header */
.passive-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(249, 115, 22, 0.2);
  background: linear-gradient(180deg, rgba(249, 115, 22, 0.1), transparent);
}

.passive-popup-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fdba74;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
}

.popup-close-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #9ca3af;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: rotate(90deg);
}

/* Popup Content */
.passive-popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
  scrollbar-width: thin;
  scrollbar-color: rgba(249, 115, 22, 0.3) transparent;
}

.passive-popup-content::-webkit-scrollbar {
  width: 8px;
}

.passive-popup-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.passive-popup-content::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.3);
  border-radius: 4px;
}

.passive-popup-content::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 115, 22, 0.5);
}

/* Progress Summary */
.skill-tree-progress {
  margin-bottom: 32px;
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.progress-bar-container {
  height: 12px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ea580c, #f97316, #fdba74);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.popup-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
  transform: rotate(90deg);
}

/* Popup Content */
.passive-popup-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(249, 115, 22, 0.3) transparent;
}

.passive-popup-content::-webkit-scrollbar {
  width: 6px;
}

.passive-popup-content::-webkit-scrollbar-track {
  background: transparent;
}

.passive-popup-content::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.3);
  border-radius: 3px;
}

/* Progress Summary */
.skill-tree-progress {
  margin-bottom: 20px;
}

.progress-bar-container {
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa, #c084fc);
  border-radius: 4px;
  transition: width 0.5s ease;
  position: relative;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-text {
  font-size: 0.8rem;
  color: #9ca3af;
  text-align: center;
  display: block;
}

/* Active Bonuses Summary */
.active-bonuses-summary {
  background: rgba(249, 115, 22, 0.05);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.active-bonuses-summary h3 {
  margin: 0 0 12px 0;
  font-size: 0.85rem;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bonuses-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bonus-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 20px;
  color: #4ade80;
}

.bonus-tag.empty {
  background: rgba(156, 163, 175, 0.1);
  border-color: rgba(156, 163, 175, 0.3);
  color: #9ca3af;
  font-style: italic;
}

/* Skill Tree Container */
.skill-tree-container {
  margin-bottom: 20px;
}

.skill-tree-container h3 {
  margin: 0 0 16px 0;
  font-size: 0.85rem;
  color: #c084fc;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Skill Tree - Vertical Layout */
.skill-tree {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 20px;
}

.skill-tree-node-wrapper {
  position: relative;
}

/* Connection line between nodes */
.skill-tree-line {
  position: absolute;
  left: 15px;
  top: -16px;
  width: 3px;
  height: 16px;
  background: rgba(156, 163, 175, 0.3);
  border-radius: 2px;
}

.skill-tree-line.active {
  background: linear-gradient(180deg, #8b5cf6, #a78bfa);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

/* Skill Tree Node */
.skill-tree-node {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
  position: relative;
}

.skill-tree-node.unlocked {
  background: rgba(74, 222, 128, 0.05);
  border-color: rgba(74, 222, 128, 0.3);
}

.skill-tree-node.locked {
  opacity: 0.6;
  border-style: dashed;
}

.skill-tree-node.next-unlock {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.4);
  animation: nextGlow 2s ease-in-out infinite;
}

@keyframes nextGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(251, 191, 36, 0.2); }
  50% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); }
}

.skill-tree-node.mythic {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(139, 92, 246, 0.08));
  border-color: rgba(168, 85, 247, 0.5);
}

.skill-tree-node.mythic.unlocked {
  animation: mythicGlow 3s ease-in-out infinite;
}

@keyframes mythicGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); }
  50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.6), 0 0 50px rgba(139, 92, 246, 0.3); }
}

/* Level marker */
.node-level-marker {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: #16162a;
  border: 2px solid rgba(156, 163, 175, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-tree-node.unlocked .node-level-marker {
  border-color: #4ade80;
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(34, 197, 94, 0.1));
}

.skill-tree-node.next-unlock .node-level-marker {
  border-color: #fbbf24;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));
}

.skill-tree-node.mythic .node-level-marker {
  border-color: #a855f7;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.1));
}

.level-text {
  font-size: 0.55rem;
  font-weight: 700;
  color: #9ca3af;
}

.skill-tree-node.unlocked .level-text {
  color: #4ade80;
}

.skill-tree-node.mythic .level-text {
  color: #c084fc;
}

/* Icon container */
.node-icon-container {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  position: relative;
  flex-shrink: 0;
}

.node-icon {
  font-size: 1.5rem;
}

.unlocked-check {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #22c55e, #4ade80);
  border-radius: 50%;
  font-size: 0.65rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
}

.next-indicator {
  position: absolute;
  top: -6px;
  right: -10px;
  font-size: 0.5rem;
  font-weight: 700;
  padding: 2px 6px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 4px;
  color: #1a1a2e;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Node info */
.node-info {
  flex: 1;
  min-width: 0;
}

.node-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.node-type-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid;
  margin-bottom: 6px;
}

.node-effects {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.effect-line {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Next Unlock Banner */
.next-unlock-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  animation: bannerPulse 3s ease-in-out infinite;
}

@keyframes bannerPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.1); }
  50% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.2); }
}

.banner-icon {
  font-size: 1.5rem;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.banner-text {
  flex: 1;
  font-size: 0.85rem;
  color: #fbbf24;
}

.banner-text strong {
  color: #fcd34d;
}

.levels-away {
  margin-left: 6px;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Element Advantage Guide */
.element-advantage-guide {
  padding: 16px 0 0 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.element-advantage-guide h4 {
  margin: 0 0 12px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.advantage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.advantage-item {
  font-size: 0.75rem;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 4px;
}

.advantage-item .bonus {
  margin-left: auto;
  color: #4ade80;
  font-weight: 600;
  font-size: 0.7rem;
}

/* Element Cycle Display */
.advantage-cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  font-size: 0.85rem;
}

.advantage-cycle span {
  white-space: nowrap;
}

.advantage-cycle .cycle-arrow {
  color: #4ade80;
  font-weight: bold;
  font-size: 0.75rem;
}

.advantage-tip {
  margin: 12px 0 0 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.advantage-tip strong {
  color: #4ade80;
}

/* Class Matchup Matrix */
.class-matchup-guide {
  margin-top: 12px;
}

.class-matchup-matrix {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  max-width: 280px;
  margin: 0 auto;
}

.class-matchup-row {
  display: grid;
  grid-template-columns: 28px repeat(5, 1fr);
  gap: 2px;
  align-items: center;
}

.class-matchup-row.class-matchup-header {
  margin-bottom: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.class-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  font-size: 0.75rem;
  border-radius: 4px;
}

.class-cell.header-empty {
  background: transparent;
}

.class-cell.header-icon {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}

.class-cell.row-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  background: transparent;
}

.class-cell.neutral {
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.02);
}

.class-cell.advantage {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  font-weight: 600;
}

.class-cell.disadvantage {
  color: #f87171;
  background: rgba(248, 113, 113, 0.1);
  font-weight: 600;
}

.skill-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  margin-left: auto;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.skill-info-btn:hover {
  opacity: 1;
}

.skill-btn.locked {
  opacity: 0.4;
  filter: grayscale(100%);
  cursor: not-allowed;
  background: #1a1a1a;
  border-color: #333;
}

.skill-info-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  opacity: 0.6;
  z-index: 2;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Skill Modal Overlay - Full Screen Centered */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay .modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  max-width: 450px;
  width: 100%;
  text-align: center;
  position: relative;
}

.modal-overlay .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.modal-overlay .modal-header h2 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  color: var(--gold);
}

.modal-overlay .close-modal-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: color 0.2s;
}

.modal-overlay .close-modal-btn:hover {
  color: var(--text);
}

.modal-overlay .modal-body {
  color: var(--text);
}

/* Skill Modal */
.skill-modal-content {
  max-width: 400px;
}

.skill-modal-icon {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 1rem;
}

.skill-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
  background: rgba(0,0,0,0.2);
  padding: 1rem;
  border-radius: 8px;
}

.skill-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.skill-stat .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.skill-stat .value {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--gold);
}

.skill-effects-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.skill-effect-tag {
  background: rgba(255,255,255,0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  color: var(--text-bright);
}

.cooldown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.8);
  border-radius: inherit;
  z-index: 1;
}

/* ========================================
   BATTLE ARENA - CLEAN COMPACT UI
   ======================================== */

.battle-arena {
  position: relative;
  height: calc(100vh - 120px);
  max-height: 700px;
}

.arena-container {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  background: linear-gradient(180deg, #0c0a08 0%, #080604 100%);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
}

/* Background Effects */
.arena-bg-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.arena-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
}

.arena-fog {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 70%, rgba(251, 191, 36, 0.03) 0%, transparent 50%);
  animation: fogDrift 15s ease-in-out infinite;
}

@keyframes fogDrift {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.arena-particles { display: none; }

.effect-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

/* ========================================
   HEADER - Turn Info
   ======================================== */

.battle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.9), transparent);
  border-bottom: 1px solid rgba(251, 191, 36, 0.08);
  position: relative;
  z-index: 10;
}

.turn-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(20, 16, 10, 0.8);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 8px;
  padding: 6px 14px;
  min-width: 55px;
}

.turn-label {
  font-size: 0.5rem;
  color: rgba(251, 191, 36, 0.7);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

.turn-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  color: #fbbf24;
  font-weight: 700;
}

.turn-indicator {
  display: flex;
  align-items: center;
  padding: 8px 20px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(249, 115, 22, 0.08));
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.turn-indicator-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.2), transparent);
  animation: indicatorSweep 2s linear infinite;
}

@keyframes indicatorSweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.turn-indicator span {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  color: #fde68a;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}

.turn-indicator.enemy-turn {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(185, 28, 28, 0.1));
  border-color: rgba(239, 68, 68, 0.35);
}

.turn-indicator.enemy-turn span { color: #fca5a5; }

.battle-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.battle-timer {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 10, 0.8);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  font-size: 1rem;
}

/* ========================================
   MAIN - Monster + Combat Log
   ======================================== */

.battle-main {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 12px;
  padding: 12px 16px;
  min-height: 0;
  overflow: hidden;
}

/* Monster Section */
.monster-section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 10px;
}

/* Intent Badge */
.intent-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(185, 28, 28, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 16px;
  margin-bottom: 8px;
}

.intent-badge .intent-icon {
  font-size: 0.9rem;
  animation: intentBounce 1s ease-in-out infinite;
}

@keyframes intentBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.intent-badge .intent-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  color: #fca5a5;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* Monster Card - Horizontal Layout */
.monster-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  position: relative;
  height: 100%;
}

.monster-card.elite .monster-glow {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.4) 0%, transparent 70%);
  animation: eliteGlow 2s ease-in-out infinite;
}

@keyframes eliteGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Large Monster Image - BIGGER */
.monster-image-wrap {
  position: relative;
  width: 320px;
  height: 320px;
  flex-shrink: 0;
}

/* Tags Overlay on Monster Image - Top Left */
.monster-tags-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.monster-tags-overlay .tag-difficulty,
.monster-tags-overlay .tag-element {
  padding: 4px 10px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.monster-tags-overlay .tag-element {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 1.2rem;
  padding: 4px 8px;
}

.monster-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
  filter: blur(15px);
  z-index: 0;
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

.monster-image {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  background: linear-gradient(145deg, #1a1510, #0f0c08);
  border: 2px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 8px 30px rgba(0, 0, 0, 0.6);
  z-index: 1;
  overflow: hidden;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.monster-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Monster Info Panel - Right Side */
.monster-info-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(251, 191, 36, 0.15);
  border-radius: 10px;
}

/* Monster Hit Animation */
.monster-card.hit .monster-image {
  animation: monsterHit 0.4s ease-out;
}

@keyframes monsterHit {
  0% { transform: scale(1); filter: brightness(1); }
  20% { transform: scale(1.05) rotate(-2deg); filter: brightness(2); }
  40% { transform: scale(0.95) translateX(-10px); }
  60% { transform: scale(1.02) translateX(5px); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Monster Attack Animation */
.monster-card.attacking .monster-image {
  animation: monsterAttack 0.5s ease-out;
}

@keyframes monsterAttack {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(1.08) translateY(-15px); }
  60% { transform: scale(1.15) translateY(30px); filter: brightness(1.3); }
  100% { transform: scale(1) translateY(0); }
}

/* Monster Info - Inside Panel */
.monster-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.monster-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
  text-align: center;
}

/* Circular HP Bar */
.circular-hp-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 10px auto;
}

.circular-hp-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circular-hp-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 8;
}

.circular-hp-fill {
  fill: none;
  stroke: url(#hpGradient);
  stroke: #ef4444;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
}

.circular-hp-fill.healthy {
  stroke: #22c55e;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5));
}

.circular-hp-fill.warning {
  stroke: #fbbf24;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

.circular-hp-fill.critical {
  stroke: #ef4444;
  filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5));
  animation: criticalPulse 1s ease-in-out infinite;
}

@keyframes criticalPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5)); }
  50% { filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.8)); }
}

.circular-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.circular-hp-text .hp-current {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.85rem, 1.4rem, 1.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.circular-hp-text .hp-divider {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 2px 0;
}

.circular-hp-text .hp-max {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
}

.monster-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag-difficulty {
  padding: 4px 12px;
  border-radius: 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tag-difficulty.easy,
.tag-difficulty[style*="rgb(74, 222, 128)"] { 
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

.tag-difficulty.medium,
.tag-difficulty[style*="rgb(251, 191, 36)"] { 
  background: rgba(251, 191, 36, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
}

.tag-difficulty.hard,
.tag-difficulty[style*="rgb(248, 113, 113)"] { 
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.tag-difficulty.super,
.tag-difficulty[style*="rgb(192, 132, 252)"] { 
  background: rgba(249, 115, 22, 0.25) !important;
  color: #fb923c !important;
  border: 1px solid rgba(249, 115, 22, 0.5) !important;
}

.tag-element {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(20, 16, 10, 0.8);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 50%;
}

/* Monster HP */
.monster-hp {
  width: 180px;
  text-align: center;
}

.hp-bar-bg {
  height: 14px;
  background: linear-gradient(180deg, #1a1510, #0a0806);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #f97316, #eab308);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
  border-radius: 7px;
  transition: width 0.4s ease;
}

.hp-text {
  display: block;
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Combat Log Section */
.combat-log-section {
  display: flex;
  flex-direction: column;
  background: rgba(15, 12, 8, 0.6);
  border: 1px solid rgba(251, 191, 36, 0.1);
  border-radius: 10px;
  overflow: hidden;
  min-height: 0;
}

.log-header {
  padding: 8px 12px;
  background: rgba(251, 191, 36, 0.08);
  border-bottom: 1px solid rgba(251, 191, 36, 0.08);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  color: rgba(251, 191, 36, 0.7);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.log-body {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  min-height: 0;
}

.log-body::-webkit-scrollbar { width: 3px; }
.log-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
.log-body::-webkit-scrollbar-thumb { background: rgba(251, 191, 36, 0.2); border-radius: 2px; }

.log-entry {
  padding: 5px 8px;
  margin-bottom: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.log-player { color: #86efac; border-left-color: rgba(34, 197, 94, 0.5); }
.log-enemy { color: #fca5a5; border-left-color: rgba(239, 68, 68, 0.5); }

/* ========================================
   FOOTER - Player Status + Actions
   ======================================== */

.battle-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: linear-gradient(180deg, transparent, rgba(15, 12, 8, 0.95));
  border-top: 1px solid rgba(251, 191, 36, 0.1);
  position: relative;
  z-index: 10;
}

/* Player Section */
.player-section {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 200px;
}

.player-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.1));
  border: 2px solid rgba(34, 197, 94, 0.35);
  border-radius: 8px;
  flex-shrink: 0;
}

.player-hp-wrap {
  flex: 1;
}

.player-hp-bar {
  height: 22px;
  background: linear-gradient(180deg, #1a1510, #0a0806);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.player-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #22c55e, #4ade80);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
  border-radius: 7px;
  transition: width 0.4s ease;
}

.player-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95%;
}

.player-stats {
  display: flex;
  gap: 12px;
  margin-top: 4px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
}

.combat-stat {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Actions Section */
.actions-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}

.skill-buttons {
  display: flex;
  gap: 6px;
}

.skill-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(145deg, #1a1510, #0f0c08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
}

.skill-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.2);
}

.skill-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.skill-btn .skill-icon {
  font-size: 1.7rem;
  margin-bottom: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-btn .skill-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.1;
}

.skill-btn .cooldown-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

/* Skill Type Accents */
.skill-btn.attack { border-bottom: 2px solid rgba(249, 115, 22, 0.6); }
.skill-btn.defend { border-bottom: 2px solid rgba(59, 130, 246, 0.6); }
.skill-btn.charge { border-bottom: 2px solid rgba(251, 191, 36, 0.6); }
.skill-btn.special { border-bottom: 2px solid rgba(249, 115, 22, 0.6); }

/* Flee Button */
.flee-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 60px;
  background: linear-gradient(145deg, #201510, #150c08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fca5a5;
  font-size: 0.45rem;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.flee-btn span:first-child {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

.flee-btn:hover {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

/* ========================================
   RESPONSIVE - Battle Arena
   ======================================== */

@media (max-width: 900px) {
  .battle-main {
    grid-template-columns: 1fr;
  }
  
  .combat-log-section {
    display: none;
  }
  
  .monster-image-wrap {
    width: 140px;
    height: 140px;
  }
  
  .monster-image {
    font-size: 3.5rem;
  }
}

@media (max-width: 600px) {
  .battle-footer {
    flex-direction: column;
    gap: 10px;
  }
  
  .player-section {
    width: 100%;
    min-width: unset;
  }
  
  .actions-section {
    width: 100%;
    justify-content: center;
  }
  
  .skill-btn {
    width: 52px;
    height: 52px;
  }
  
  .skill-btn .skill-icon {
    font-size: 1.2rem;
  }
  
  .flee-btn {
    width: 44px;
    height: 52px;
  }
  
  .monster-image-wrap {
    width: 120px;
    height: 120px;
  }
}

.fct-crit {
  font-size: 3rem;
  color: #f97316;
  text-shadow:
    0 0 15px rgba(249, 115, 22, 0.9),
    0 0 40px rgba(249, 115, 22, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.9);
  animation: fctCrit 1.2s ease-out forwards;
}

.fct-heal {
  font-size: 2rem;
  color: #4ade80;
  text-shadow:
    0 0 10px rgba(74, 222, 128, 0.8),
    0 0 30px rgba(74, 222, 128, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.9);
}

.fct-block {
  font-size: 1.6rem;
  color: #60a5fa;
  font-style: italic;
  text-shadow:
    0 0 10px rgba(96, 165, 250, 0.8),
    0 0 30px rgba(96, 165, 250, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.9);
}

@keyframes fctFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-30px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

@keyframes fctCrit {
  0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(-5deg); }
  20% { transform: translateY(-20px) scale(1.3) rotate(3deg); }
  50% { opacity: 1; transform: translateY(-40px) scale(1.1) rotate(-2deg); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.9) rotate(0deg); }
}

/* Effect Animations */
.effect-slash {
  position: absolute;
  width: 150px;
  height: 40px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), transparent);
  border-radius: 50%;
  transform-origin: left center;
  opacity: 0;
  mix-blend-mode: screen;
}

.effect-slash.active {
  animation: slashAnim 0.35s ease-out;
}

@keyframes slashAnim {
  0% { opacity: 1; transform: scale(0.5) rotate(-20deg); }
  100% { opacity: 0; transform: scale(1.5) rotate(15deg); }
}

.effect-impact {
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 60%);
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
}

.effect-impact.active {
  animation: impactAnim 0.4s ease-out;
}

@keyframes impactAnim {
  0% { opacity: 1; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(1.8); }
}

/* ========================================
   RESPONSIVE DESIGN - Battle Arena
   ======================================== */

@media (max-width: 1200px) {
  .battle-stage {
    grid-template-columns: 1fr 160px;
    gap: 10px;
  }

  .combat-feed-container {
    max-height: 200px;
  }

  .monster-portrait {
    width: 180px;
    height: 180px;
  }

  .portrait-inner {
    width: 165px;
    height: 165px;
  }

  .enemy-avatar {
    font-size: 4.5rem;
  }

  .monster-vitals {
    width: 200px;
  }
}

@media (max-width: 1024px) {
  .battle-stage {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .combat-feed-container {
    max-height: 100px;
  }
}


@media (max-width: 480px) {
  .battle-top-hud {
    padding: 6px 10px;
  }

  .turn-badge {
    padding: 4px 8px;
    min-width: 50px;
  }

  .turn-value {
    font-size: 1rem;
  }

  .turn-indicator {
    padding: 5px 12px;
  }

  .turn-indicator span {
    font-size: 0.6rem;
  }

  .battle-timer {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }

  .monster-portrait {
    width: 140px;
    height: 140px;
  }

  .portrait-inner {
    width: 125px;
    height: 125px;
  }

  .enemy-avatar {
    font-size: 3.5rem;
  }

  .monster-name {
    font-size: 1rem;
  }

  .tag-difficulty {
    padding: 3px 10px;
    font-size: 0.55rem;
  }

  .tag-element {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .monster-vitals {
    width: 160px;
  }

  .vital-bar {
    height: 14px;
  }

  .skill-btn {
    width: 50px;
    height: 50px;
  }

  .skill-btn .skill-icon {
    font-size: 1.2rem;
  }

  .skill-btn .skill-name {
    font-size: 0.4rem;
  }

  .flee-button {
    width: 44px;
    height: 50px;
  }

  .player-hp-bar {
    height: 20px;
  }

  .hp-text-overlay {
    font-size: 0.7rem;
  }
}

/* ========================================
   HEALTH BARS - General styles
   ======================================== */

/* Health Bars */
.health-bar {
  height: 14px;
  background: linear-gradient(to right, #111827, #020617);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
  box-shadow: 
    inset 0 0 8px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.5);
  position: relative;
}

.health-fill {
  height: 100%;
  transition: width 0.3s ease-out;
  border-radius: 999px;
}

.enemy-health .health-fill {
  background: linear-gradient(90deg, #dc2626, #f97316, #facc15);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

.player-health .health-fill {
  background: linear-gradient(90deg, #16a34a, #22c55e, #4ade80);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.health-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: 'IBM Plex Mono', monospace;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ========================================
   EFFECT LAYER - Slash/Impact animations
   ======================================== */

/* Effect Layer for slash/impact effects */
.effect-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}

.effect-slash {
  position: absolute;
  width: 150px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(248, 250, 252, 0.95), rgba(248, 250, 252, 0));
  transform-origin: left center;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.effect-slash.active {
  animation: slashAnim 0.3s ease-out;
}

@keyframes slashAnim {
  0% { opacity: 1; transform: scale(0.6) rotate(-18deg); }
  100% { opacity: 0; transform: scale(1.5) rotate(10deg); }
}

.effect-impact {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(248, 250, 252, 0.95), rgba(248, 250, 252, 0) 65%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.effect-impact.active {
  animation: impactAnim 0.4s ease-out;
}

@keyframes impactAnim {
  0% { opacity: 1; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Floating Combat Text - Enhanced */
.fct {
  position: absolute;
  font-weight: 900;
  font-size: 1.6rem;
  text-shadow: 
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 12px currentColor;
  pointer-events: none;
  animation: fct-float 1s ease-out forwards;
  z-index: 200;
  font-family: 'Orbitron', sans-serif;
}

.fct-damage { 
  color: #facc15; 
  text-shadow: 
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 15px rgba(250, 204, 21, 0.9);
}

.fct-crit { 
  font-size: 2.5rem; 
  color: #f97316; 
  animation: fct-crit 1.2s ease-out forwards;
  text-shadow: 
    0 0 8px rgba(0, 0, 0, 0.95),
    0 0 20px rgba(249, 115, 22, 0.95);
}

.fct-heal { 
  color: #4ade80;
  text-shadow: 
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 15px rgba(74, 222, 128, 0.9);
}

.fct-block { 
  color: #60a5fa; 
  font-style: italic;
  text-shadow: 
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 15px rgba(96, 165, 250, 0.9);
}

.fct-status {
  color: #c084fc;
  font-style: italic;
  font-size: 1.4rem;
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 15px rgba(192, 132, 252, 0.9);
}

.fct-xp { 
  color: #4ade80;
  font-size: 1.2rem;
  text-shadow: 
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 15px rgba(74, 222, 128, 0.9);
  animation: fct-xp 1.5s ease-out forwards;
}

@keyframes fct-float {
  0% { opacity: 1; transform: translate(-10px, 0); }
  100% { opacity: 0; transform: translate(0, -50px); }
}

@keyframes fct-crit {
  0% { opacity: 1; transform: translate(-10px, 0) scale(0.5); }
  20% { transform: translate(-5px, -15px) scale(1.4); }
  100% { opacity: 0; transform: translate(0, -50px) scale(0.9); }
}

@keyframes fct-xp {
  0% { opacity: 1; transform: translate(-10px, 10px) scale(0.8); }
  20% { transform: translate(-5px, 0) scale(1.1); }
  60% { opacity: 1; transform: translate(0, -30px) scale(1); }
  100% { opacity: 0; transform: translate(0, -60px) scale(0.9); }
}

/* Player Area */
.player-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 550px;
  margin: 0 auto;
  width: 100%;
  transform-style: preserve-3d;
  z-index: 2;
}

.player-battle-card {
  background: 
    radial-gradient(circle at 20% 0, rgba(190, 242, 100, 0.15), transparent 50%),
    linear-gradient(145deg, #0a1a0a, #050a05);
  border: 2px solid rgba(34, 197, 94, 0.4);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.7),
    0 0 25px rgba(22, 163, 74, 0.2),
    inset 0 0 15px rgba(0, 0, 0, 0.4);
  transform: translateZ(20px);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Hit animation for player */
.player-battle-card.hit {
  animation: hitFlash 0.25s ease-out;
}

/* Guard animation */
@keyframes guardPulse {
  0% { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(22, 163, 74, 0.2); }
  100% { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 40px rgba(34, 197, 94, 0.5); }
}

.player-battle-card.guard {
  animation: guardPulse 0.3s ease-out;
}

/* Player attacking lunge */
@keyframes playerLunge {
  0% { transform: translateZ(20px) translateY(0); }
  50% { transform: translateZ(20px) translateY(-25px) scale(1.03); }
  100% { transform: translateZ(20px) translateY(0); }
}

.player-battle-card.attacking {
  animation: playerLunge 0.28s ease-out;
}

.player-combat-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  justify-content: center;
}

.combat-stat {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
}

.combat-stat i {
  color: var(--primary);
}

.combat-stat span {
  color: var(--text-bright);
  font-weight: 600;
}

/* Skill Bar */
.skill-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.skill-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text);
  position: relative;
  overflow: hidden;
  height: 80px;
}

.skill-btn:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: var(--gold);
  background: rgba(251, 191, 36, 0.1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.skill-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(0,0,0,0.2);
}

.skill-btn.attack { border-bottom: 3px solid rgba(239, 68, 68, 0.6); }
.skill-btn.defend { border-bottom: 3px solid rgba(59, 130, 246, 0.6); }
.skill-btn.charge { border-bottom: 3px solid rgba(251, 191, 36, 0.6); }
.skill-btn.special { border-bottom: 3px solid rgba(168, 85, 247, 0.6); }

.skill-btn .skill-icon {
  font-size: 1.6rem;
  margin-bottom: 4px;
}

.skill-btn .skill-name {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.skill-btn .skill-meta {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.skill-btn .cooldown-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
}

/* Flee Button */
.flee-btn {
  padding: 12px 24px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: center;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.flee-btn:hover {
  border-color: var(--health-enemy);
  color: var(--health-enemy);
  background: rgba(239, 68, 68, 0.05);
}

/* Turn Indicator */
.turn-indicator {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 18px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.7);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #e5e7eb;
  z-index: 5;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.turn-indicator.enemy-turn {
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
}

/* Turn Counter */
.turn-counter {
  position: absolute;
  top: 12px;
  right: 16px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 5px 14px;
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  font-family: 'IBM Plex Mono', monospace;
  z-index: 5;
}

/* ========================================
   DEATH OVERLAY
   ======================================== */
.death-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.death-content {
  max-width: 400px;
}

.death-icon {
  font-size: 5rem;
  margin-bottom: 20px;
  animation: pulse-skull 2s ease-in-out infinite;
}

@keyframes pulse-skull {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
}

.death-content h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  color: #ef4444;
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.death-content > p {
  color: var(--text-muted);
  margin-bottom: 32px;
}

.death-timer {
  font-size: 3.5rem;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text);
  margin-bottom: 32px;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.death-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.death-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.death-links .btn {
  padding: 12px 24px;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.death-links .btn:hover {
  background: var(--surface);
  border-color: var(--gold);
}

/* Revive Options */
.revive-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.revive-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.btn-revive {
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 250px;
}

.btn-revive.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-revive.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-revive.btn-primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: none;
  color: white;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-revive.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-revive:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.revive-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

#free-revives-remaining {
  font-size: 0.85em;
  opacity: 0.9;
}

/* ========================================
   POST-BATTLE MODAL
   ======================================== */
.post-battle-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.post-battle-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  max-width: 380px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Mobile optimization for post-battle modal */
@media (max-width: 480px) {
  .post-battle-overlay {
    padding: 10px;
    align-items: flex-start;
    padding-top: 40px;
  }
  
  .post-battle-modal {
    padding: 16px;
    max-width: 100%;
    max-height: calc(100vh - 60px);
    border-radius: 16px;
  }
  
  .victory-content h2,
  .defeat-content h2 {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }
  
  .chest {
    font-size: 2.2rem;
  }
  
  .chest-animation {
    margin-bottom: 10px;
  }
  
  .rewards-reveal {
    gap: 6px;
    margin-bottom: 12px;
  }
  
  .reward-item {
    padding: 6px 10px;
  }
  
  .reward-icon {
    font-size: 0.95rem;
  }
  
  .reward-value {
    font-size: 0.8rem;
  }
  
  .level-up-notice,
  .stage-unlock-notice {
    padding: 8px;
    font-size: 0.7rem;
    margin-bottom: 10px;
  }
  
  .clue-search-section {
    padding: 12px;
  }
  
  .clue-search-header h3 {
    font-size: 0.9rem;
  }
  
  .clue-search-info {
    font-size: 0.75rem;
  }
  
  .clue-search-chance {
    font-size: 0.75rem;
  }
  
  .clue-search-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .clue-search-buttons .btn {
    width: 100%;
    padding: 12px;
    font-size: 0.85rem;
  }
  
  .clue-slot-machine {
    transform: scale(0.85);
    transform-origin: center top;
    margin: -10px 0;
  }
  
  .slot-machine-header .slot-title {
    font-size: 0.9rem;
  }
  
  .slot-machine-header .slot-subtitle {
    font-size: 0.7rem;
  }
  
  .death-penalty {
    padding: 12px 16px;
  }
  
  .penalty-icon {
    font-size: 1.4rem;
  }
  
  .penalty-text {
    font-size: 1.1rem;
  }
  
  .near-miss {
    padding: 14px;
    margin: 16px 0;
  }
  
  .near-miss-text {
    font-size: 1.2rem;
  }
  
  .post-battle-modal .btn {
    padding: 14px;
    font-size: 1rem;
  }
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  max-width: 380px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Victory */
.victory-content h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: 16px;
  letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

.chest-animation {
  margin-bottom: 16px;
}

.chest {
  font-size: 3rem;
  animation: chest-bounce 0.5s ease-out;
}

@keyframes chest-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.rewards-reveal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface-light);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}

.reward-icon {
  font-size: 1.1rem;
}

.reward-value {
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
}

.level-up-notice,
.stage-unlock-notice {
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
}

.level-up-notice {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(6, 182, 212, 0.15));
  border: 1px solid rgba(34, 211, 238, 0.3);
  color: var(--xp-color);
}

.level-up-notice .level-up-energy {
  color: #22d3ee;
  font-size: 0.95rem;
  margin-top: 6px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
  animation: energy-bonus-pop 0.5s ease-out;
}

@keyframes energy-bonus-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.stage-unlock-notice {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(124, 58, 237, 0.15));
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: var(--elite-glow);
}

/* Battle3 Spin Reward */
.b3-spin-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.12));
  border: 1px solid rgba(251, 191, 36, 0.3);
}

.b3-spin-icon {
  font-size: 1.5rem;
}

.b3-spin-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.b3-spin-hint {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.45);
}

/* Defeat */
.defeat-content h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.5rem;
  color: #ef4444;
  margin-bottom: 24px;
  letter-spacing: 2px;
}

.death-penalty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(185, 28, 28, 0.15));
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 12px;
  margin: 16px auto;
  max-width: 280px;
}

.penalty-icon {
  font-size: 1.8rem;
  animation: pulse 1.5s ease-in-out infinite;
}

.penalty-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ef4444;
  text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.near-miss {
  padding: 20px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 12px;
  margin: 24px 0;
}

.near-miss-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
  margin-bottom: 8px;
  font-family: 'Orbitron', sans-serif;
}

.death-cooldown-msg {
  color: var(--text-muted);
  margin: 24px 0;
  font-size: 1.1rem;
}

/* XP from battle (shown on defeat) */
.xp-from-battle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.15));
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 10px;
  margin: 16px auto;
  max-width: 320px;
}

.xp-from-battle .xp-icon {
  font-size: 1.4rem;
}

.xp-from-battle .xp-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

/* ========================================
   XP BREAKDOWN DISPLAY - Modern Detailed View
   ======================================== */
.xp-breakdown-container {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(6, 182, 212, 0.05));
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Total XP Header */
.xp-breakdown-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.xp-total-icon {
  font-size: 1.6rem;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
}

.xp-total-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--xp-color);
  text-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
}

/* Detailed Breakdown */
.xp-breakdown-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.xp-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  font-size: 0.85rem;
}

.xp-breakdown-row.xp-bonus-row {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), transparent);
  border-left: 2px solid rgba(251, 191, 36, 0.4);
}

.xp-breakdown-row.xp-combined-row {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.1), transparent);
  border-left: 2px solid rgba(168, 85, 247, 0.4);
  margin-top: 4px;
}

.xp-breakdown-row.xp-subtotal-row {
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  margin-top: 6px;
  font-weight: 600;
}

.xp-row-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.xp-row-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
}

.xp-badge-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

.xp-row-value {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--text);
}

.xp-row-value.xp-multiplier {
  color: var(--gold);
  font-weight: 700;
}

.xp-row-value.xp-combined-value {
  color: var(--elite-glow);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

/* Bronze Row */
.xp-breakdown-bronze {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.08));
  border: 1px solid rgba(205, 127, 50, 0.3);
  border-radius: 8px;
}

.bronze-icon {
  font-size: 1.3rem;
}

.bronze-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bronze);
  text-shadow: 0 0 8px rgba(205, 127, 50, 0.4);
}

/* Mobile Optimization for XP Breakdown */
@media (max-width: 480px) {
  .xp-breakdown-container {
    padding: 12px;
    margin-bottom: 12px;
  }
  
  .xp-breakdown-total {
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  
  .xp-total-icon {
    font-size: 1.3rem;
  }
  
  .xp-total-value {
    font-size: 1.3rem;
  }
  
  .xp-breakdown-details {
    gap: 4px;
  }
  
  .xp-breakdown-row {
    padding: 5px 8px;
    font-size: 0.78rem;
  }
  
  .xp-row-icon {
    font-size: 0.9rem;
    width: 18px;
  }
  
  .xp-badge-img {
    width: 18px;
    height: 18px;
  }
  
  .xp-breakdown-bronze {
    padding: 8px;
  }
  
  .bronze-icon {
    font-size: 1.1rem;
  }
  
  .bronze-value {
    font-size: 0.95rem;
  }
}

/* Buttons */
.modal .btn {
  width: 100%;
  padding: 18px;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.modal .btn-primary {
  background: linear-gradient(135deg, var(--health-player), #16a34a);
  color: white;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.modal .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.5);
}

.modal .btn-secondary {
  background: var(--surface-light);
  color: var(--text);
  border: 1px solid var(--border);
}

.modal .btn-secondary:hover {
  background: var(--surface);
  border-color: var(--text-muted);
}

/* ========================================
   CLASS INFO MODAL
   ======================================== */
.class-info-content {
  max-width: 550px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.modal-close:hover {
  color: var(--text);
}

.class-info-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.class-info-icon {
  font-size: 3.5rem;
}

.class-info-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.8rem;
  color: var(--gold);
  letter-spacing: 2px;
  margin: 0;
}

.class-info-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.class-info-section h4 {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 10px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.class-info-section p {
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  font-size: 0.95rem;
}

.class-info-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.class-info-stats .stat-box {
  background: var(--surface-light);
  padding: 12px 8px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.05);
}

.class-info-stats .stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.class-info-stats .stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
}

.class-info-skills {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skill-info-item {
  background: var(--surface-light);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.skill-info-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.skill-info-details {
  flex: 1;
}

.skill-info-details strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: var(--text);
}

.skill-info-details span {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ========================================
   CLASS INFO PASSIVES PREVIEW
   ======================================== */
.passives-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-style: italic;
}

.passives-loading,
.passives-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.class-info-passives {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.passive-preview-item {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
  border: 1px solid rgba(147, 51, 234, 0.2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: all 0.2s ease;
}

.passive-preview-item:hover {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
  border-color: rgba(147, 51, 234, 0.35);
}

.passive-preview-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.passive-preview-details {
  flex: 1;
  min-width: 0;
}

.passive-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}

.passive-preview-header strong {
  font-size: 0.9rem;
  color: var(--text);
}

.passive-preview-level {
  background: rgba(147, 51, 234, 0.3);
  color: #c4b5fd;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.passive-preview-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
  display: block;
}

.passives-more {
  text-align: center;
  padding: 10px;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 8px;
  border: 1px dashed rgba(251, 191, 36, 0.3);
}

/* ========================================
   FLEE BUTTON GLOW (Near Death)
   ======================================== */
.flee-btn.danger-glow {
  animation: flee-pulse 1s ease-in-out infinite;
  border-color: var(--health-enemy);
  color: var(--health-enemy);
  background: rgba(239, 68, 68, 0.1);
}

@keyframes flee-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.4), 0 0 15px rgba(239, 68, 68, 0.2);
  }
  50% {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6), 0 0 30px rgba(239, 68, 68, 0.4);
  }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.screen-shake {
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

/* ========================================
   CLUE SEARCH SECTION
   ======================================== */
.clue-search-section {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 179, 71, 0.3);
  text-align: center;
}

.clue-search-header h3 {
  color: var(--accent);
  margin-bottom: 4px;
  font-size: 0.95rem;
}

.clue-search-info {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-bottom: 4px;
}

.clue-search-chance {
  color: var(--text);
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.clue-search-chance span {
  color: #22c55e;
  font-weight: 700;
  font-size: 0.95rem;
}

.clue-search-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.clue-search-buttons .btn {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.clue-search-buttons .energy-cost {
  opacity: 0.7;
  font-size: 0.7rem;
}

/* ========================================
   CLUE SLOT MACHINE - 3D DESIGN
   ======================================== */
.clue-slot-machine {
  margin-top: 16px;
  perspective: 1000px;
}

.slot-machine-container {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
  border-radius: 16px;
  padding: 16px;
  border: 3px solid #3d3d5c;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.8),
    inset 0 2px 0 rgba(255, 255, 255, 0.1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}

.slot-machine-header {
  text-align: center;
  margin-bottom: 12px;
}

.slot-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 4px;
}

.slot-subtitle {
  font-size: 0.7rem;
  color: #8892b0;
  letter-spacing: 0.1em;
}

.slot-cabinet {
  background: linear-gradient(145deg, #2d2d44, #1a1a2e);
  border-radius: 12px;
  padding: 12px;
  border: 2px solid #4a4a6a;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
}

.slot-frame {
  position: relative;
  background: #000;
  border-radius: 8px;
  padding: 4px;
  border: 3px solid #5a5a7a;
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.9),
    0 4px 12px rgba(0, 0, 0, 0.5);
}

.slot-window {
  position: relative;
  height: 80px;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(180deg, 
    rgba(0, 0, 0, 0.8) 0%, 
    rgba(20, 20, 40, 0.4) 20%, 
    rgba(40, 40, 80, 0.2) 50%, 
    rgba(20, 20, 40, 0.4) 80%, 
    rgba(0, 0, 0, 0.8) 100%
  );
}

.slot-reels {
  display: flex;
  height: 100%;
  gap: 4px;
  padding: 0 4px;
}

.reel {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, 
    #1a1a2e 0%, 
    #2a2a4e 20%, 
    #3a3a6e 50%, 
    #2a2a4e 80%, 
    #1a1a2e 100%
  );
  border-radius: 4px;
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.8),
    inset 2px 0 4px rgba(255, 255, 255, 0.05),
    inset -2px 0 4px rgba(255, 255, 255, 0.05);
}

.reel::before,
.reel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 25px;
  z-index: 5;
  pointer-events: none;
}

.reel::before {
  top: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent);
}

.reel::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9), transparent);
}

.reel-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.symbol {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
}

@keyframes reelSpin {
  0% { transform: translateY(0); }
  100% { transform: translateY(-640px); }
}

.reel-strip.spinning {
  animation: reelSpin 0.12s linear infinite;
}

.slot-payline {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 215, 0, 0.8) 20%, 
    rgba(255, 215, 0, 1) 50%, 
    rgba(255, 215, 0, 0.8) 80%, 
    transparent
  );
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
  z-index: 10;
}

.slot-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    transparent 50%
  );
  pointer-events: none;
  border-radius: 6px;
}

.slot-result-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 20;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.slot-result-overlay.active {
  opacity: 1;
}

.slot-result-overlay .result-badge {
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 800;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  animation: badgePop 0.4s ease-out;
}

@keyframes badgePop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.result-badge.jackpot {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #1a1a2e;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 4px 20px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.result-badge.success {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.6), 0 4px 15px rgba(0, 0, 0, 0.4);
}

.result-badge.fail {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  color: #e5e7eb;
  box-shadow: 0 0 15px rgba(107, 114, 128, 0.5), 0 4px 15px rgba(0, 0, 0, 0.4);
}

.slot-result-text {
  text-align: center;
  margin-top: 12px;
  min-height: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.slot-result-text.success {
  color: #22c55e;
}

.slot-result-text.jackpot {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.slot-result-text.fail {
  color: #9ca3af;
}

/* Win glow effects */
.slot-machine-container.glow-success {
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(34, 197, 94, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.slot-machine-container.glow-jackpot {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.8),
    0 0 50px rgba(255, 215, 0, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.1);
  animation: jackpotGlow 0.5s ease-in-out 3;
}

@keyframes jackpotGlow {
  0%, 100% { 
    box-shadow: 
      0 10px 40px rgba(0, 0, 0, 0.8),
      0 0 50px rgba(255, 215, 0, 0.5);
  }
  50% { 
    box-shadow: 
      0 10px 40px rgba(0, 0, 0, 0.8),
      0 0 80px rgba(255, 215, 0, 0.8);
  }
}

/* ========================================
   VICTORY CONFETTI
   ======================================== */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1001;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -20px;
  opacity: 0;
  will-change: transform, opacity;
  animation: confettiFall 3s ease-out forwards;
}

.confetti.square {
  border-radius: 2px;
}

.confetti.circle {
  border-radius: 50%;
}

.confetti.ribbon {
  width: 4px;
  height: 16px;
  border-radius: 2px;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    /* Animate via transform — keeps work on the compositor instead of
       triggering a full layout recalc every frame for 40-80 elements. */
    transform: translate3d(var(--drift, 50px), 100vh, 0) rotate(var(--rotation, 720deg));
  }
}

/* ========================================
   QUEST CIRCLES SECTION
   ======================================== */
.quest-circles-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.quest-circles-section h4 {
  margin: 0 0 16px 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.quest-circles-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.quest-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quest-circle:hover {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  transform: translateY(-2px);
}

.quest-circle.completed {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
}

.quest-circle.claimable {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.5);
  animation: questPulse 2s ease-in-out infinite;
}

@keyframes questPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
  50% { box-shadow: 0 0 15px 3px rgba(251, 191, 36, 0.3); }
}

.quest-ring-container {
  position: relative;
  width: 60px;
  height: 60px;
}

.quest-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.quest-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 6;
}

.quest-ring-fill {
  fill: none;
  stroke: var(--gold);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
  transition: stroke-dashoffset 0.5s ease;
}

.quest-circle.completed .quest-ring-fill {
  stroke: #22c55e;
  stroke-dashoffset: 0;
}

.quest-ring-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
}

.quest-label {
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  letter-spacing: 0.5px;
}

.quest-status {
  margin-top: 4px;
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
}

.quest-circle.claimable .quest-status {
  color: var(--gold);
  font-weight: 600;
}

.quest-circle.completed .quest-status {
  color: #22c55e;
}

/* Quest Modal */
.quest-modal-content {
  max-width: 400px;
  margin: auto;
  text-align: left;
}

.quest-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quest-modal-icon {
  font-size: 2rem;
}

.quest-modal-header h2 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.2rem;
  color: var(--text);
}

.quest-modal-description {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.quest-modal-rewards {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.quest-reward-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.quest-reward-item:last-child {
  border-bottom: none;
}

.quest-reward-item.completed {
  opacity: 0.5;
}

.quest-reward-item.completed .quest-reward-text::after {
  content: ' ✓';
  color: #22c55e;
}

.quest-reward-item.claimable {
  background: rgba(251, 191, 36, 0.1);
  border-radius: 6px;
  padding: 8px 10px;
  margin: -8px -10px;
}

.quest-reward-icon {
  font-size: 1.2rem;
}

.quest-reward-text {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text);
}

.quest-reward-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
}

.quest-reward-locked {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.quest-reward-locked .lock-icon {
  font-size: 0.9rem;
  opacity: 0.6;
}

.quest-modal-progress {
  margin-top: 16px;
}

.quest-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #f59e0b);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.quest-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
}

.quest-modal-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.quest-claim-btn {
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--gold), #f59e0b);
  border: none;
  border-radius: 8px;
  color: #000;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quest-claim-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.quest-claim-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Quest Modal – responsive adjustments for smaller screens */
@media (max-width: 480px) {
  /* IMPORTANT: Do NOT use shorthand 'padding' here — it would override the
     padding-top set by mobile-global.css that prevents content from hiding
     behind the close button and safe-area inset. */
  .quest-modal-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 14px !important;
    /* padding-top is managed by mobile-global.css */
  }

  .quest-modal-header {
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .quest-modal-header h2 {
    font-size: 1rem;
    padding-right: 3rem; /* keep clear of close button */
  }

  .quest-modal-icon {
    font-size: 1.5rem;
  }

  .quest-modal-description {
    font-size: 0.82rem;
    margin-bottom: 12px;
    line-height: 1.4;
  }

  .quest-modal-rewards {
    padding: 10px;
    margin-bottom: 10px;
  }

  .quest-reward-item.claimable {
    margin: 2px -6px;
    padding: 6px 6px;
  }

  .quest-modal-actions {
    margin-top: 12px;
  }

  .quest-claim-btn {
    width: 100%;
    padding: 12px 20px;
  }
}

/* ========================================
   QUICK VICTORY TOAST
   Non-intrusive reward notification
   ======================================== */
.quick-victory-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  z-index: 10000;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(16, 185, 129, 0.95));
  border-radius: 12px;
  padding: 12px 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(34, 197, 94, 0.3);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.quick-victory-toast.show {
  transform: translateX(-50%) translateY(0);
}

.quick-victory-toast .toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-victory-toast .toast-icon {
  font-size: 1.5rem;
}

.quick-victory-toast .toast-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* ========================================
   MOBILE RESPONSIVE FIXES
   ======================================== */

/* Hide sidebar logo and toggle on mobile - cleaner layout */

/* Mobile portrait - stack buttons vertically */
@media (max-width: 480px) {
  .skill-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100%;
  }
  
  .skill-btn {
    width: 100% !important;
    height: 48px !important;
    min-width: unset !important;
    font-size: 0.7rem !important;
    padding: 6px !important;
  }
  
  .skill-btn-icon {
    font-size: 1.1rem !important;
  }
  
  .battle-footer {
    padding: 0.75rem !important;
    gap: 8px !important;
  }
  
  .actions-section {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .flee-btn {
    width: 100% !important;
    padding: 10px !important;
  }
  
  /* Ensure mob and HP visible */
  .battle-arena {
    min-height: auto !important;
    padding: 0.5rem !important;
  }
  
  #arena-container {
    min-height: 180px !important;
    max-height: 35vh !important;
  }
  
  .enemy-health-bar {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Compact header */
  .top-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }
  
  .top-bar-line {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.8rem !important;
    justify-content: center;
  }
}

/* Mobile landscape - ensure visibility */
@media (max-height: 500px) and (orientation: landscape) {
  .battle-main {
    grid-template-rows: auto 1fr auto !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
  }
  
  #arena-container {
    min-height: 120px !important;
    max-height: 30vh !important;
  }
  
  .skill-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  
  .skill-btn {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0;
  }
  
  .battle-footer {
    padding: 0.5rem !important;
  }
  
  .combat-log-section {
    display: none !important;
  }
}

/* Ensure modal is scrollable on mobile */
.modal {
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.modal-content {
  max-height: 85vh !important;
  overflow-y: auto !important;
}

/* Fix notification z-index */
.notification-panel,
.notification-overlay {
  z-index: 9999 !important;
}

/* ========================================
   COMBO BADGE
   ======================================== */
.combo-badge {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  padding: 8px 20px;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #000;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  z-index: 150;
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.5);
}

.combo-badge.active {
  opacity: 1;
  transform: translateX(-50%) scale(var(--combo-scale, 1));
  animation: comboPulse 0.5s ease-in-out infinite;
}

.combo-badge.break {
  animation: comboBreak 0.5s ease-out;
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

@keyframes comboPulse {
  0%, 100% { 
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.5);
  }
  50% { 
    box-shadow: 0 4px 30px rgba(249, 115, 22, 0.8);
  }
}

@keyframes comboBreak {
  0% { 
    transform: translateX(-50%) scale(1.2);
    opacity: 1;
  }
  100% { 
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
  }
}

/* ========================================
   DEATH PARTICLES
   ======================================== */
.death-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: deathParticle 0.6s ease-out forwards;
  z-index: 200;
}

@keyframes deathParticle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 50px), var(--dy, -50px)) scale(0.2);
  }
}

/* ========================================
   SOUND TOGGLE BUTTON
   ======================================== */
.sound-toggle,
.sound-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(20, 16, 10, 0.8);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  color: var(--text);
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 50;
}

.sound-toggle:hover,
.sound-toggle-btn:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
}

.sound-toggle-btn.muted {
  opacity: 0.6;
  border-color: rgba(255, 100, 100, 0.3);
}

/* ========================================
   PASSIVES TOGGLE BUTTON
   ======================================== */
.passives-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(20, 16, 10, 0.8);
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  color: var(--text);
  position: absolute;
  top: 8px;
  left: 52px;
  z-index: 50;
}

.passives-toggle-btn:hover {
  background: rgba(147, 51, 234, 0.2);
  border-color: rgba(147, 51, 234, 0.5);
  transform: scale(1.05);
}

.passives-toggle-btn:active {
  transform: scale(0.95);
}

/* ========================================
   COMBO BADGE
   ======================================== */
.combo-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, var(--gold) 0%, #f59e0b 100%);
  border-radius: 12px;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: comboPulse 0.5s ease-out, comboFloat 2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
  z-index: 50;
}

.combo-badge.super {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  box-shadow: 0 0 25px rgba(249, 115, 22, 0.6);
}

.combo-badge.mega {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.7);
  animation: comboPulse 0.5s ease-out, comboFloat 2s ease-in-out infinite, megaGlow 1s ease-in-out infinite;
}

.combo-count {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1a0f00;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
  line-height: 1;
}

.combo-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: #1a0f00;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes comboPulse {
  0% { transform: scale(1.3); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes comboFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes megaGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(236, 72, 153, 0.7); }
  50% { box-shadow: 0 0 45px rgba(139, 92, 246, 0.9); }
}

/* ========================================
   ENHANCED SHAKE WITH INTENSITY
   ======================================== */
.arena-container.shake {
  animation: arenaShake calc(0.26s * var(--shake-intensity, 1)) ease-out;
}

@keyframes arenaShake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(calc(-5px * var(--shake-intensity, 1))); }
  20% { transform: translateX(calc(5px * var(--shake-intensity, 1))); }
  30% { transform: translateX(calc(-4px * var(--shake-intensity, 1))); }
  40% { transform: translateX(calc(4px * var(--shake-intensity, 1))); }
  50% { transform: translateX(calc(-3px * var(--shake-intensity, 1))); }
  60% { transform: translateX(calc(3px * var(--shake-intensity, 1))); }
  70% { transform: translateX(calc(-2px * var(--shake-intensity, 1))); }
  80% { transform: translateX(calc(2px * var(--shake-intensity, 1))); }
  90% { transform: translateX(calc(-1px * var(--shake-intensity, 1))); }
}

/* ========================================
   MOBILE BATTLE IMPROVEMENTS
   ======================================== */

@media (max-width: 480px) {
  /* Extra small screens */
  .monster-image-wrap {
    width: 140px !important;
    height: 140px !important;
  }
  
  .monster-card {
    gap: 8px !important;
  }
  
  .circular-hp-container {
    width: 65px !important;
    height: 65px !important;
  }
  
  .intent-badge {
    padding: 3px 8px !important;
    font-size: 0.55rem !important;
  }
  
  .monster-name {
    font-size: 0.9rem !important;
  }
  
  /* 2x2 skill grid on very small screens */
  .skill-buttons {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .skill-btn {
    height: 56px !important;
  }
  
  .skill-btn .skill-name {
    display: block !important;
    font-size: 0.5rem !important;
  }
}

/* ========================================
   ENERGY REFILL MODAL
   ======================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}

.energy-refill-modal {
  width: 90%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(135deg, rgba(26, 15, 0, 0.98) 0%, rgba(20, 12, 0, 0.98) 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 16px;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.energy-refill-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.energy-refill-modal .modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--gold);
}

.energy-refill-modal .modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.energy-refill-modal .modal-close-btn:hover {
  background: rgba(255, 100, 100, 0.1);
  color: #ff6b6b;
}

.energy-refill-modal .modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.energy-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.energy-status > div {
  background: rgba(0, 0, 0, 0.3);
  padding: 12px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.energy-status .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.energy-status .value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.energy-balance .value {
  color: var(--gold);
}

.refill-selector label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.preset-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.preset-btn {
  flex: 1;
  padding: 10px 8px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.preset-btn:hover {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.4);
}

.preset-btn.active {
  background: var(--gold);
  color: #1a0f00;
  border-color: var(--gold);
}

.custom-amount {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.energy-slider {
  width: 100%;
  height: 8px;
  appearance: none;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  outline: none;
}

.energy-slider::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--gold) 0%, #f59e0b 100%);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
}

.energy-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--gold) 0%, #f59e0b 100%);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4);
}

.amount-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

.amount-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

.amount-label {
  font-size: 1rem;
  color: var(--text-muted);
}

.cost-summary {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 12px;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.cost-row + .cost-row {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cost-row.total {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
}

.cost-row.total .affordable {
  color: #4ade80;
}

.cost-row.total .expensive {
  color: #ff6b6b;
}

.cost-row.result {
  color: var(--text);
}

.new-energy {
  color: var(--gold);
  font-weight: 600;
}

.overflow-badge {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: #064e3b;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  font-weight: 700;
}

.refill-error {
  background: rgba(255, 100, 100, 0.1);
  border: 1px solid rgba(255, 100, 100, 0.3);
  color: #ff6b6b;
  padding: 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  text-align: center;
}

.modal-actions {
  display: flex;
  gap: 12px;
}

.modal-actions button {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s;
}

.cancel-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.cancel-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.refill-btn {
  background: linear-gradient(135deg, var(--gold) 0%, #f59e0b 100%);
  border: none;
  color: #1a0f00;
}

.refill-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.4);
}

.refill-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.energy-refill-modal .modal-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(251, 191, 36, 0.1);
}

.refill-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* Energy Refill Button in Player Panel */
.refill-energy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
  width: 100%;
}

.refill-energy-btn:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(245, 158, 11, 0.3) 100%);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.refill-energy-btn .btn-icon {
  font-size: 1rem;
}

.low-energy-pulse {
  animation: lowEnergyPulse 2s ease-in-out infinite;
}

@keyframes lowEnergyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  50% { box-shadow: 0 0 15px 3px rgba(251, 191, 36, 0.4); }
}

/* Mobile responsive */
@media (max-width: 480px) {
  .energy-refill-modal {
    width: 95%;
    max-height: 85vh;
  }
  
  .preset-buttons {
    flex-wrap: wrap;
  }
  
  .preset-btn {
    min-width: calc(33% - 6px);
  }
  
  .amount-value {
    font-size: 1.75rem;
  }
}

/* ========================================
   ENHANCED MOBILE BATTLE OPTIMIZATIONS
   Touch-friendly, readable, fast UX
   ======================================== */


@media (max-width: 480px) {
  /* Full-width skill bar on small screens */
  .battle-footer {
    padding: 10px !important;
  }
  
  .skill-buttons {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  .skill-btn {
    width: 100% !important;
    height: 56px !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }
  
  .skill-btn .skill-icon {
    font-size: 1.5rem !important;
  }
  
  .skill-btn .skill-name {
    font-size: 0.55rem !important;
    margin-top: 2px;
  }
  
  /* Compact monster card */
  .monster-card {
    gap: 10px !important;
  }
  
  .monster-image-wrap {
    width: 100px !important;
    height: 100px !important;
  }
  
  .monster-name {
    font-size: 1rem !important;
  }
  
  /* Player HP bar prominent */
  .player-hp-bar {
    height: 28px !important;
    border-radius: 8px !important;
  }
  
  .player-hp-text {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }
}

/* ========================================
   PRE-BATTLE SCREEN - Modern Design
   ======================================== */

.pre-battle-screen {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 20, 0.95);
  backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: pbFadeIn 0.25s ease-out;
  overflow: hidden; /* No scrollbar on overlay itself */
}

@keyframes pbFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.pre-battle-card {
  background: linear-gradient(180deg, rgba(26, 28, 33, 0.98) 0%, rgba(15, 17, 20, 0.99) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.5rem;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 
    0 0 0 1px rgba(247, 160, 15, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Header */
.pb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pb-back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;

/* Hint modal (popup) */
.pb2-hint-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pb2-hint-modal {
  width: min(520px, 100%);
  max-height: 80vh;
  background: #0b0f14;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
  overflow: hidden;
}

.pb2-hint-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.pb2-hint-modal-title {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.pb2-hint-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.pb2-hint-modal-body {
  padding: 12px;
  overflow: auto;
  max-height: calc(80vh - 54px);
  -webkit-overflow-scrolling: touch;
}

/* Repair confirmation modal */
.pb2-repair-modal {
  width: min(460px, 100%);
  border-color: rgba(255,255,255,0.14);
  background: #0b0f14;
  box-shadow: 0 18px 50px rgba(0,0,0,0.6);
}

.pb2-repair-modal-title {
  color: rgba(255,255,255,0.96);
}

.pb2-repair-modal-body {
  padding: 14px 16px;
  line-height: 1.4;
  display: grid;
  gap: 12px;
}

.pb2-repair-meta {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 10px 12px;
}

.pb2-repair-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pb2-repair-meta-row + .pb2-repair-meta-row {
  margin-top: 7px;
}

.pb2-repair-meta-label {
  color: rgba(255,255,255,0.76);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pb2-repair-slot-name {
  text-transform: capitalize;
  color: #fff;
  font-size: 0.96rem;
}

.pb2-repair-durability {
  font-size: 0.95rem;
}

.pb2-repair-durability.is-broken {
  color: #ff7f7f;
}

.pb2-repair-durability.is-worn {
  color: #ffc96b;
}

.pb2-repair-meta-subtext {
  margin-top: 8px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.64);
}

.pb2-repair-cost-card {
  padding: 11px 12px;
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
}

.pb2-repair-cost-title {
  font-weight: 800;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em;
}

.pb2-repair-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pb2-repair-cost-label {
  color: rgba(255,255,255,0.88);
}

.pb2-repair-cost-value {
  color: #fff;
  font-size: 1.02rem;
}

.pb2-repair-cost-note {
  margin-top: 8px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
}

.pb2-repair-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pb2-repair-btn {
  min-width: 124px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.pb2-repair-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

.pb2-repair-btn-cancel {
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.05);
  color: #fff;
}

.pb2-repair-btn-confirm {
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

.pb2-repair-btn:not(:disabled):hover {
  transform: translateY(-1px);
}

.pb2-repair-btn-confirm:not(:disabled):hover {
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.45);
}

/* Final authority for pb3 popup layering + style */
.pre-battle-screen.pb3 .pb2-hint-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(5, 7, 13, 0.82) !important;
  z-index: 20000 !important;
}

.pre-battle-screen.pb3 .pb2-hint-modal {
  position: relative !important;
  width: min(520px, calc(100vw - 28px)) !important;
  max-height: min(82vh, 760px) !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #191722 0%, #0e1118 100%) !important;
  border: 1px solid rgba(247, 160, 15, 0.34) !important;
  border-radius: 14px !important;
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.66),
    0 0 0 1px rgba(247, 160, 15, 0.2),
    0 0 32px rgba(247, 160, 15, 0.16) !important;
  overflow: hidden !important;
}

.pre-battle-screen.pb3 .pb2-hint-modal-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
  border-bottom: 1px solid rgba(247, 160, 15, 0.24) !important;
}

.pre-battle-screen.pb3 .pb2-hint-modal-title,
.pre-battle-screen.pb3 .pb2-repair-modal-title {
  color: #ffd789 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.pre-battle-screen.pb3 .pb2-hint-modal-close {
  border: 1px solid rgba(247, 160, 15, 0.28) !important;
  background: rgba(247, 160, 15, 0.1) !important;
  color: #ffe4b8 !important;
}

.pre-battle-screen.pb3 .pb2-repair-modal {
  width: min(460px, calc(100vw - 28px)) !important;
}

.pre-battle-screen.pb3 .pb2-repair-meta,
.pre-battle-screen.pb3 .pb2-repair-cost-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(247, 160, 15, 0.24) !important;
}

.pre-battle-screen.pb3 .pb2-repair-cost-title {
  color: #ffcf7e !important;
}

.pre-battle-screen.pb3 .pb2-repair-btn-cancel {
  border: 1px solid rgba(255,255,255,0.24) !important;
  background: rgba(255,255,255,0.06) !important;
}

.pre-battle-screen.pb3 .pb2-repair-btn-confirm {
  border: 1px solid rgba(255, 231, 168, 0.35) !important;
  background: linear-gradient(135deg, #f7a00f, #db7d00) !important;
  color: #1a1305 !important;
  box-shadow: 0 7px 20px rgba(219, 125, 0, 0.42) !important;
}

.pre-battle-screen.pb3 .pb2-repair-btn-confirm:not(:disabled):hover {
  box-shadow: 0 9px 24px rgba(219, 125, 0, 0.52) !important;
}

@media (max-width: 768px) {
  .pb2-repair-modal {
    width: 100%;
    max-width: 360px;
    border-radius: 12px;
  }

  .pb2-repair-modal-body {
    padding: 12px;
    gap: 10px;
  }

  .pb2-repair-meta,
  .pb2-repair-cost-card {
    padding: 10px;
  }

  .pb2-repair-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .pb2-repair-btn {
    min-width: 0;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    font-size: 0.86rem;
  }
}

@media (max-width: 420px) {
  .pb2-repair-modal {
    max-width: 100%;
  }

  .pb2-repair-modal-title {
    font-size: 0.95rem;
  }

  .pb2-repair-meta-label {
    font-size: 0.72rem;
  }

  .pb2-repair-slot-name,
  .pb2-repair-durability,
  .pb2-repair-cost-value {
    font-size: 0.88rem;
  }

  .pb2-repair-actions {
    grid-template-columns: 1fr;
  }
}
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pb-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.pb-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tl-primary, #f7a00f);
  margin: 0;
  letter-spacing: 1px;
}

.pb-spacer {
  width: 36px;
}

/* Element Matchup */
.pb-element-matchup {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.pb-element-matchup.effect-advantage {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
  border-color: rgba(34, 197, 94, 0.3);
}

.pb-element-matchup.effect-disadvantage {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-color: rgba(239, 68, 68, 0.3);
}

.pb-element-matchup.effect-neutral {
  background: linear-gradient(135deg, rgba(156, 163, 175, 0.1) 0%, rgba(156, 163, 175, 0.03) 100%);
  border-color: rgba(156, 163, 175, 0.2);
}

.pb-matchup-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.pb-element-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.pb-elem-icon {
  font-size: 1.75rem;
}

.pb-elem-name {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.6);
}

.pb-vs {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  padding: 0.25rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.pb-matchup-result {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.effect-advantage .pb-matchup-result {
  color: #4ade80;
}

.effect-disadvantage .pb-matchup-result {
  color: #f87171;
}

.pb-result-icon {
  font-size: 1rem;
}

.pb-element-tip {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.pb-element-tip strong {
  color: var(--tl-primary, #f7a00f);
}

/* Stats Grid */
.pb-stats-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.pb-stats-panel {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 1rem;
}

.pb-player {
  border-color: rgba(0, 217, 255, 0.2);
}

.pb-enemy {
  border-color: rgba(239, 68, 68, 0.2);
}

.pb-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pb-panel-icon {
  font-size: 1.25rem;
}

.pb-panel-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}

.pb-enemy-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pb-enemy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pb-diff-badge,
.pb-elite-badge,
.pb-tier-badge {
  font-size: 0.55rem;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.pb-diff-badge {
  color: #000;
}

.pb-elite-badge {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.pb-tier-badge {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.pb-stats-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pb-stat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
}

.pb-stat-row.reverse {
  flex-direction: row-reverse;
}

.pb-stat-icon {
  font-size: 0.9rem;
  width: 20px;
  text-align: center;
}

.pb-stat-label {
  flex: 1;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pb-stat-row.reverse .pb-stat-label {
  text-align: right;
}

.pb-stat-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 40px;
}

.pb-stat-value.win {
  color: #4ade80;
}

.pb-stat-value.lose {
  color: #f87171;
}

.pb-stat-row.reverse .pb-stat-value {
  text-align: left;
}

/* VS Arrows */
.pb-vs-arrows {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 2.5rem;
}

.pb-arrow {
  width: 20px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 4px;
}

.pb-arrow.win {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
}

.pb-arrow.lose {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
}

/* Equipment Section */
.pb-equipment-section {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.pb-equipment-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  text-align: center;
}

.pb-equipment-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.pb-equip-slot {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--slot-bg, rgba(75, 85, 99, 0.3));
  border: 2px solid var(--slot-border, #4b5563);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pb-equip-slot.equipped {
  box-shadow: 0 0 8px var(--slot-border, #4b5563);
}

.pb-equip-slot.empty {
  opacity: 0.5;
}

.pb-equip-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

.pb-equip-slot.empty .pb-equip-img {
  opacity: 0.4;
  filter: grayscale(100%);
}

.pb-equip-tier {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--slot-border, #4b5563);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1;
}

.pb-equip-element {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.pb-equip-empty {
  position: absolute;
  bottom: 2px;
  font-size: 0.6rem;
  color: #6b7280;
}

/* Element colors for slots */
.pb-equip-slot[data-element="fire"] {
  --slot-border: #f97316;
  --slot-bg: rgba(249, 115, 22, 0.2);
}

.pb-equip-slot[data-element="water"] {
  --slot-border: #3b82f6;
  --slot-bg: rgba(59, 130, 246, 0.2);
}

.pb-equip-slot[data-element="earth"] {
  --slot-border: #84cc16;
  --slot-bg: rgba(132, 204, 22, 0.2);
}

.pb-equip-slot[data-element="air"] {
  --slot-border: #a78bfa;
  --slot-bg: rgba(167, 139, 250, 0.2);
}

/* Equipment Actions Row */
.pb-equipment-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.pb-equipment-actions .pb-btn {
  flex: 0 1 auto;
  padding: 0.5rem 1rem;
}

/* Action Buttons */
.pb-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 100px;
}

.pb-equip-btn {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.pb-equip-btn:hover {
  background: rgba(249, 115, 22, 0.25);
  transform: translateY(-1px);
}

.pb-auto-equip-btn {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  position: relative;
}

.pb-auto-equip-btn:hover:not(.disabled) {
  background: rgba(168, 85, 247, 0.25);
  transform: translateY(-1px);
}

.pb-auto-equip-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pb-auto-uses {
  font-size: 0.65rem;
  opacity: 0.8;
  background: rgba(0,0,0,0.3);
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 4px;
}

.pb-fight-btn {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.pb-fight-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .pre-battle-card {
    padding: 1rem;
    border-radius: 12px;
    max-height: 95vh;
  }
  
  .pb-title {
    font-size: 0.95rem;
  }
  
  .pb-equipment-row {
    gap: 0.35rem;
  }
  
  .pb-equip-slot {
    width: 42px;
    height: 42px;
  }
  
  .pb-equip-img {
    width: 28px;
    height: 28px;
  }
  
  .pb-stats-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .pb-vs-arrows {
    display: none;
  }
  
  .pb-stat-row.reverse {
    flex-direction: row;
  }
  
  .pb-stat-row.reverse .pb-stat-label {
    text-align: left;
  }
  
  .pb-matchup-row {
    gap: 0.75rem;
  }
  
  .pb-elem-icon {
    font-size: 1.5rem;
  }
  
  .pb-actions {
    flex-direction: column;
  }
  
  .pb-btn {
    padding: 0.875rem;
    flex: none;
    width: 100%;
  }
}

/* End of Pre-Battle Screen */


/* ========================================
   PRE-BATTLE SCREEN V2 - Interactive Equipment
   ======================================== */

.pre-battle-screen.pb2 {
  padding: 0.25rem;
}

.pb2-card {
  max-width: 700px;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 98vh;
}

/* Header */
.pb2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pb2-back-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pb2-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.pb2-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tl-primary, #f7a00f);
  margin: 0;
}

.pb2-spacer {
  width: 32px;
}

/* Element Tip Banner */
.pb2-element-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(247, 160, 15, 0.12) 0%, rgba(247, 160, 15, 0.05) 100%);
  border: 1px solid rgba(247, 160, 15, 0.25);
}

.pb2-element-banner.pb2-tip-banner {
  background: linear-gradient(90deg, rgba(247, 160, 15, 0.15) 0%, rgba(247, 160, 15, 0.05) 100%);
  border-color: rgba(247, 160, 15, 0.3);
}

/* Element Hint Section - Shows below actions after reveal */
.pb2-element-hint-section {
  margin: 0.5rem 0 0 0;
  display: flex;
  justify-content: center;
  max-height: 200px;
  overflow-y: auto;
}

/* Custom scrollbar for element hint section */
.pb2-element-hint-section::-webkit-scrollbar {
  width: 6px;
}

.pb2-element-hint-section::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.pb2-element-hint-section::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.pb2-element-hint-section::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Old reveal button - no longer used but keeping for reference */
.pb2-reveal-hint-btn {
  display: none;
}

/* Hint button in action bar - grey style */
.pb2-btn.pb2-hint-btn {
  background: linear-gradient(135deg, rgba(100, 100, 110, 0.3) 0%, rgba(70, 70, 80, 0.25) 100%);
  border: 1px solid rgba(150, 150, 160, 0.4);
  color: #b0b0b8;
}

.pb2-btn.pb2-hint-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(120, 120, 130, 0.4) 0%, rgba(90, 90, 100, 0.35) 100%);
  border-color: rgba(180, 180, 190, 0.5);
  box-shadow: 0 4px 12px rgba(100, 100, 110, 0.3);
}

.pb2-btn.pb2-hint-btn.disabled,
.pb2-btn.pb2-hint-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pb2-hint-icon {
  font-size: 1.1rem;
}

.pb2-hint-label {
  flex: 1;
}

.pb2-hint-cost {
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  font-size: 0.7rem;
  color: #fbbf24;
}

/* Element Matchup Tooltip */
.pb2-element-matchup-tooltip {
  width: 100%;
  max-width: 400px;
  background: linear-gradient(180deg, rgba(30, 32, 45, 0.98) 0%, rgba(20, 22, 30, 0.99) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 1rem;
  animation: pb2FadeIn 0.3s ease-out;
}

.pb2-matchup-header {
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pb2-matchup-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pb2-matchup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.pb2-matchup-row.boost {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.pb2-matchup-row.penalty {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.pb2-matchup-row.neutral {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pb2-matchup-element {
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
}

.pb2-matchup-effect {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
}

.pb2-matchup-row.boost .pb2-matchup-effect {
  color: #4ade80;
}

.pb2-matchup-row.penalty .pb2-matchup-effect {
  color: #f87171;
}

.pb2-matchup-row.neutral .pb2-matchup-effect {
  color: rgba(255, 255, 255, 0.6);
}

.pb2-tip-text {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.pb2-tip-text strong {
  color: var(--tl-primary, #f7a00f);
}

.pb2-element-banner.effect-advantage {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
  border-color: rgba(34, 197, 94, 0.3);
}

.pb2-element-banner.effect-disadvantage {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-color: rgba(239, 68, 68, 0.3);
}

.pb2-matchup-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pb2-elem {
  font-size: 1.25rem;
}

.pb2-vs-small {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

.pb2-matchup-text {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}

.effect-advantage .pb2-matchup-text {
  color: #4ade80;
}

.effect-disadvantage .pb2-matchup-text {
  color: #f87171;
}

/* Arena */
.pb2-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: start;
}

/* Combatant Sides */
.pb2-combatant {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pb2-combatant-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

.pb2-player-side .pb2-combatant-header {
  border-left: 3px solid #00d9ff;
}

.pb2-enemy-side .pb2-combatant-header {
  border-left: 3px solid #ef4444;
}

.pb2-avatar {
  font-size: 1.25rem;
}

.pb2-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}

.pb2-enemy-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pb2-enemy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

.pb2-badge {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: capitalize;
  font-weight: 600;
  color: #fff;
  background: rgba(100, 100, 100, 0.5);
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Element badge colors */
.pb2-badge.element-badge[data-element="fire"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.7), rgba(220, 38, 38, 0.5));
  border: 1px solid #f87171;
}
.pb2-badge.element-badge[data-element="water"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(37, 99, 235, 0.5));
  border: 1px solid #60a5fa;
}
.pb2-badge.element-badge[data-element="earth"] {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.7), rgba(120, 53, 15, 0.5));
  border: 1px solid #a16207;
}
.pb2-badge.element-badge[data-element="air"] {
  background: linear-gradient(135deg, rgba(156, 163, 175, 0.7), rgba(107, 114, 128, 0.5));
  border: 1px solid #9ca3af;
}

/* Class badge colors */
.pb2-badge.class-badge[data-class="warrior"] {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.7), rgba(185, 28, 28, 0.5));
  border: 1px solid #f87171;
}
.pb2-badge.class-badge[data-class="rogue"] {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.7), rgba(91, 33, 182, 0.5));
  border: 1px solid #a78bfa;
}
.pb2-badge.class-badge[data-class="mage"] {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.7), rgba(29, 78, 216, 0.5));
  border: 1px solid #60a5fa;
}
.pb2-badge.class-badge[data-class="archer"] {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.7), rgba(21, 128, 61, 0.5));
  border: 1px solid #4ade80;
}
.pb2-badge.class-badge[data-class="healer"] {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.7), rgba(202, 138, 4, 0.5));
  border: 1px solid #fcd34d;
}

.pb2-badge.elite {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.5), rgba(139, 92, 246, 0.4));
  color: #e9d5ff;
  border: 1px solid #a78bfa;
}

/* =====================================================
   ENEMY IMAGE CONTAINER - Preview Screen
   ===================================================== */
.pb2-enemy-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  flex: 1;
}

/* ENLARGED mob image container */
.pb2-enemy-image-container.enlarged {
  padding: 0.5rem;
  gap: 0;
}

.pb2-enemy-image-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(139, 69, 19, 0.2));
  border: 3px solid rgba(239, 68, 68, 0.4);
  box-shadow: 
    0 0 30px rgba(239, 68, 68, 0.2),
    inset 0 0 30px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ENLARGED mob image - fill the enemy side */
.pb2-enemy-image-wrap.enlarged {
  width: 100%;
  max-width: 220px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 16px;
  border-width: 4px;
  overflow: visible;
}

.pb2-enemy-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.pb2-enemy-image-wrap.enlarged .pb2-enemy-image {
  border-radius: 14px;
}

.pb2-enemy-fallback {
  font-size: 4rem;
  animation: pulse-glow 2s ease-in-out infinite;
}

.pb2-enemy-image-wrap.enlarged .pb2-enemy-fallback {
  font-size: 6rem;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.pb2-enemy-element-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(40, 40, 50, 0.9));
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.pb2-enemy-image-wrap.enlarged .pb2-enemy-element-badge {
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  bottom: -8px;
  right: -8px;
}

/* Level badge - BELOW image (legacy) */
.pb2-enemy-level-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(139, 69, 19, 0.4));
  border: 2px solid rgba(239, 68, 68, 0.5);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.2);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Level badge - ON TOP of image */
.pb2-enemy-level-badge-top {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  padding: 0.3rem 0.8rem;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(139, 69, 19, 0.85));
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 10;
  white-space: nowrap;
}

/* Stats overlay on image */
.pb2-enemy-stats-overlay {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 10;
}

/* When stats are outside image-wrap (new structure), position relative to container */
.pb2-enemy-image-container > .pb2-enemy-stats-overlay {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.pb2-stat-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  background: rgba(20, 20, 30, 0.95);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pb2-stat-chip.win {
  background: rgba(239, 68, 68, 0.9);
  border-color: rgba(239, 68, 68, 0.8);
  color: #fff;
}

.pb2-stat-chip.lose {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.3);
  color: #4ade80;
}

/* =====================================================
   MOB PASSIVES SECTION
   ===================================================== */
.pb2-mob-passives {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
}

.pb2-mob-passives-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(239, 68, 68, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pb2-passive-count {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
}

.pb2-mob-passives-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
}

.pb2-mob-passives-list::-webkit-scrollbar {
  width: 3px;
}

.pb2-mob-passives-list::-webkit-scrollbar-thumb {
  background: rgba(239, 68, 68, 0.3);
  border-radius: 3px;
}

.pb2-mob-passive-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.pb2-passive-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.pb2-passive-info {
  flex: 1;
  min-width: 0;
}

.pb2-passive-name {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #f87171;
  margin-bottom: 2px;
}

.pb2-passive-desc {
  display: block;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.3;
}

.pb2-mob-passives-hint {
  font-size: 0.7rem;
  color: rgba(251, 191, 36, 0.9);
  text-align: center;
  padding: 8px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 6px;
}

/* =====================================================
   DESKTOP: Mob stats below picture instead of overlay
   ===================================================== */
@media (min-width: 900px) {
  /* Reorganize enemy image container for column layout */
  .pb2-enemy-image-container.enlarged {
    flex-direction: column;
    position: relative;
  }
  
  /* Stats below the image on desktop */
  .pb2-enemy-image-container > .pb2-enemy-stats-overlay {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 12px;
    justify-content: center;
  }
  
  /* Make stat chips slightly larger on desktop */
  .pb2-enemy-image-container > .pb2-enemy-stats-overlay .pb2-stat-chip {
    padding: 6px 12px;
    font-size: 0.8rem;
    gap: 5px;
  }
}

/* Equipment Column - 2x3 grid for card-like slots */
.pb2-equipment-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  padding-top: 10px; /* Space for tier badges */
}

/* =====================================================
   SLOT CARD - Identical to GearCard styling
   ===================================================== */
.pb2-slot {
  --slot-bg: #4b5563;
  --slot-border: #6b7280;
  --slot-text: #9ca3af;
  --slot-glow: rgba(107, 114, 128, 0.4);
  
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0;
  
  width: 100%;
  aspect-ratio: 0.88;
  padding: 0;
  overflow: visible;
  
  background: linear-gradient(
    180deg, 
    color-mix(in srgb, var(--slot-bg) 25%, rgba(20, 22, 30, 0.98)) 0%, 
    rgba(12, 14, 20, 0.99) 100%
  );
  border: 2px solid var(--slot-border);
  border-radius: 10px;
  
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Smoother easing */
  opacity: 0;
  transform: translateY(15px) scale(0.85);
}

.pb2-slot.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pb2-slot.enemy-slot {
  cursor: default;
  transform: translateY(15px) scale(0.85);
}

.pb2-slot.enemy-slot.revealed {
  transform: translateY(0) scale(1);
}

.pb2-slot.equipped {
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 20px var(--slot-glow);
}

.pb2-slot:not(.enemy-slot):hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 24px var(--slot-glow),
    0 0 40px color-mix(in srgb, var(--slot-glow) 50%, transparent);
}

.pb2-slot.selected {
  border-color: var(--tl-primary, #f7a00f);
  box-shadow: 
    0 0 0 2px rgba(247, 160, 15, 0.3),
    0 4px 20px rgba(247, 160, 15, 0.3);
}

.pb2-slot.has-upgrade {
  animation: pb2PulseGlow 2s ease-in-out infinite;
}

@keyframes pb2PulseGlow {
  0%, 100% { box-shadow: 0 0 8px var(--slot-glow); }
  50% { box-shadow: 0 0 16px var(--tl-primary, #f7a00f), 0 0 28px rgba(247, 160, 15, 0.4); }
}

/* ─────────────────────────────────────────────────────
   Tier Badge - Floats above slot (identical to GearCard)
   ───────────────────────────────────────────────────── */
.pb2-slot-tier-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  
  background: linear-gradient(135deg, var(--slot-border) 0%, var(--slot-bg) 100%);
  border: 1px solid color-mix(in srgb, var(--slot-border) 80%, white 20%);
  border-radius: 4px;
  
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 12px var(--slot-glow);
}

.pb2-tier-num {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: #000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  letter-spacing: 0.03em;
}

/* ─────────────────────────────────────────────────────
   Element Overlay - Shows on hover (like GearCard)
   ───────────────────────────────────────────────────── */
.pb2-slot-element-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.pb2-slot:hover .pb2-slot-element-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* ─────────────────────────────────────────────────────
   Header Zone - Stars (like GearCard)
   ───────────────────────────────────────────────────── */
.pb2-slot-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 4px 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pb2-slot-stars {
  display: flex;
  gap: 1px;
}

.pb2-slot-stars .star {
  font-size: 0.7rem;
  line-height: 1;
  transition: all 0.15s ease;
}

.pb2-slot-stars .star.lit {
  color: var(--slot-text);
  text-shadow: 
    0 0 6px var(--slot-glow),
    0 0 12px var(--slot-glow),
    0 1px 3px rgba(0, 0, 0, 0.5);
  filter: drop-shadow(0 0 3px var(--slot-border));
}

.pb2-slot-stars .star.dim {
  color: rgba(255, 255, 255, 0.15);
}

/* ─────────────────────────────────────────────────────
   Visual Zone - Item image with element coloring
   ───────────────────────────────────────────────────── */
.pb2-slot-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  
  background: radial-gradient(
    ellipse 80% 70% at center 50%,
    var(--slot-glow) 0%,
    transparent 65%
  );
}

.pb2-slot-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pb2-slot-img {
  max-width: 85%;
  max-height: 42px;
  object-fit: contain;
  opacity: 0.75;
  
  filter: 
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6))
    drop-shadow(0 6px 16px var(--slot-glow));
  
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}

.pb2-slot:hover .pb2-slot-img {
  opacity: 1;
  transform: scale(1.05) translateY(-1px);
}

/* ─────────────────────────────────────────────────────
   Element-based color effects (identical to GearCard)
   ───────────────────────────────────────────────────── */
/* Fire - Red tint */
.pb2-slot[data-element="fire"] .pb2-slot-img {
  filter: 
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6))
    sepia(0.5) saturate(2) hue-rotate(-20deg) brightness(1.05);
}

.pb2-slot[data-element="fire"]:hover .pb2-slot-img {
  filter: 
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7))
    sepia(0.5) saturate(2.2) hue-rotate(-20deg) brightness(1.15);
}

/* Water - Blue tint */
.pb2-slot[data-element="water"] .pb2-slot-img {
  filter: 
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6))
    drop-shadow(0 6px 16px rgba(66, 165, 245, 0.4))
    sepia(0.2) saturate(1.3) hue-rotate(180deg);
}

.pb2-slot[data-element="water"]:hover .pb2-slot-img {
  filter: 
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7))
    drop-shadow(0 10px 24px rgba(66, 165, 245, 0.5))
    sepia(0.2) saturate(1.4) hue-rotate(180deg) brightness(1.1);
}

/* Earth - White/bright */
.pb2-slot[data-element="earth"] .pb2-slot-img {
  filter: 
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6))
    drop-shadow(0 6px 16px rgba(200, 200, 220, 0.4))
    brightness(1.15) contrast(0.95) saturate(0.7);
}

.pb2-slot[data-element="earth"]:hover .pb2-slot-img {
  filter: 
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7))
    drop-shadow(0 10px 24px rgba(200, 200, 220, 0.5))
    brightness(1.25) contrast(0.95) saturate(0.7);
}

/* Air - Greyscale/silver */
.pb2-slot[data-element="air"] .pb2-slot-img {
  filter: 
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6))
    grayscale(0.8) brightness(1.15) contrast(1.05);
}

.pb2-slot[data-element="air"]:hover .pb2-slot-img {
  filter: 
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7))
    grayscale(0.7) brightness(1.25) contrast(1.1);
}

/* ─────────────────────────────────────────────────────
   Footer Zone - Element icon
   ───────────────────────────────────────────────────── */
.pb2-slot-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  min-height: 20px;
}

.pb2-slot-element {
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.9;
}

/* Pre-battle slot stats — ATK/HP/DEF row inside the slot footer.
   Auto-shrinks via flex + container queries when multiple stats share
   the same line. */
.pb2-slot-footer {
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}
.pb2-slot-stats {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.pb2-slot-stats[data-count="1"] { gap: 2px; }
.pb2-slot-stats[data-count="2"] .pb2-slot-stat,
.pb2-slot-stats[data-count="3"] .pb2-slot-stat { flex: 1 1 0; min-width: 0; justify-content: center; }
.pb2-slot-stat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.pb2-slot-stat-icon {
  font-size: 0.7rem;
  line-height: 1;
  flex-shrink: 0;
}
.pb2-slot-stat-val {
  font-size: 0.65rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pb2-slot-stats[data-count="3"] .pb2-slot-stat-val,
.pb2-slot-stats[data-count="3"] .pb2-slot-stat-icon { font-size: 0.55rem; }

/* ─────────────────────────────────────────────────────
   Tier Theme Specifics (identical to GearCard)
   ───────────────────────────────────────────────────── */
.pb2-slot[data-tier-theme="grey"] {
  background: linear-gradient(180deg, rgba(45, 50, 60, 0.95) 0%, rgba(20, 22, 28, 0.99) 100%);
}

.pb2-slot[data-tier-theme="bronze"] {
  background: linear-gradient(180deg, rgba(50, 38, 28, 0.95) 0%, rgba(25, 18, 12, 0.99) 100%);
}
.pb2-slot[data-tier-theme="bronze"] .pb2-tier-num { color: #1a1a1a; }

.pb2-slot[data-tier-theme="silver"] {
  background: linear-gradient(180deg, rgba(55, 55, 65, 0.95) 0%, rgba(28, 28, 35, 0.99) 100%);
}
.pb2-slot[data-tier-theme="silver"] .pb2-tier-num { color: #1a1a1a; }

.pb2-slot[data-tier-theme="gold"] {
  background: linear-gradient(180deg, rgba(55, 48, 25, 0.95) 0%, rgba(30, 25, 12, 0.99) 100%);
}
.pb2-slot[data-tier-theme="gold"] .pb2-tier-num { color: #1a1a1a; }

.pb2-slot[data-tier-theme="diamond"] {
  background: linear-gradient(180deg, rgba(35, 55, 65, 0.95) 0%, rgba(18, 28, 35, 0.99) 100%);
}
.pb2-slot[data-tier-theme="diamond"] .pb2-tier-num { color: #0a2a3a; }

.pb2-slot[data-tier-theme="ruby"] {
  background: linear-gradient(180deg, rgba(55, 25, 35, 0.95) 0%, rgba(30, 12, 18, 0.99) 100%);
}
.pb2-slot[data-tier-theme="ruby"] .pb2-tier-num { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.pb2-slot[data-tier-theme="emerald"] {
  background: linear-gradient(180deg, rgba(25, 50, 38, 0.95) 0%, rgba(12, 28, 20, 0.99) 100%);
}
.pb2-slot[data-tier-theme="emerald"] .pb2-tier-num { color: #0a2a1a; }

/* ─────────────────────────────────────────────────────
   Empty Slot Styling
   ───────────────────────────────────────────────────── */
.pb2-slot.empty {
  border-style: dashed;
  opacity: 0.7;
  background: rgba(30, 32, 40, 0.6);
}

.pb2-slot.empty .pb2-slot-header,
.pb2-slot.empty .pb2-slot-visual,
.pb2-slot.empty .pb2-slot-footer {
  display: none;
}

.pb2-slot-empty-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pb2-slot-label {
  font-size: 1rem;
  opacity: 0.5;
}

.pb2-slot-plus {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.3);
  font-weight: bold;
}

/* Tier Change Indicator */
.pb2-tier-change {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  animation: pb2FadeInUp 0.3s ease-out;
}

.pb2-tier-change.up {
  background: rgba(34, 197, 94, 0.9);
  color: #fff;
}

.pb2-tier-change.down {
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
}

@keyframes pb2FadeInUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ─────────────────────────────────────────────────────
   Boost Animation - Element tier change reveal
   ───────────────────────────────────────────────────── */
.pb2-boost-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 6px;
  
  animation: pb2BoostPop 1.2s ease-out forwards;
  pointer-events: none;
}

.pb2-boost-indicator.up {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(22, 163, 74, 0.95) 100%);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 
    0 0 20px rgba(34, 197, 94, 0.6),
    0 0 40px rgba(34, 197, 94, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

.pb2-boost-indicator.down {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 
    0 0 20px rgba(239, 68, 68, 0.6),
    0 0 40px rgba(239, 68, 68, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes pb2BoostPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  30% {
    transform: translate(-50%, -50%) scale(0.95);
  }
  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* Permanent tier ribbon showing element matchup */
.pb2-tier-ribbon {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 25;
  
  font-family: 'Orbitron', 'Segoe UI', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  
  pointer-events: none;
}

.pb2-tier-ribbon.bonus {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(22, 163, 74, 0.95) 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.5);
}

.pb2-tier-ribbon.penalty {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95) 0%, rgba(220, 38, 38, 0.95) 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
}

.pb2-tier-ribbon.neutral {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.9) 0%, rgba(75, 85, 99, 0.9) 100%);
  color: #e5e7eb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 6px rgba(75, 85, 99, 0.4);
}

/* Slot boost state animations */
.pb2-slot.boost-up {
  animation: pb2SlotBoostUp 0.5s ease-out;
}

.pb2-slot.boost-down {
  animation: pb2SlotBoostDown 0.5s ease-out;
}

.pb2-slot.boost-neutral {
  animation: pb2SlotBoostNeutral 0.3s ease-out;
}

@keyframes pb2SlotBoostUp {
  0% {
    box-shadow: 0 0 0 rgba(34, 197, 94, 0);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(34, 197, 94, 0.8),
      0 0 60px rgba(34, 197, 94, 0.5),
      inset 0 0 20px rgba(34, 197, 94, 0.2);
  }
  100% {
    box-shadow: 
      0 0 15px rgba(34, 197, 94, 0.4),
      0 0 30px rgba(34, 197, 94, 0.2);
  }
}

@keyframes pb2SlotBoostDown {
  0% {
    box-shadow: 0 0 0 rgba(239, 68, 68, 0);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(239, 68, 68, 0.8),
      0 0 60px rgba(239, 68, 68, 0.5),
      inset 0 0 20px rgba(239, 68, 68, 0.2);
  }
  100% {
    box-shadow: 
      0 0 15px rgba(239, 68, 68, 0.4),
      0 0 30px rgba(239, 68, 68, 0.2);
  }
}

@keyframes pb2SlotBoostNeutral {
  0% {
    box-shadow: 0 0 0 rgba(156, 163, 175, 0);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(156, 163, 175, 0.5),
      inset 0 0 10px rgba(156, 163, 175, 0.1);
  }
  100% {
    box-shadow: var(--slot-glow);
  }
}

/* Equip Result Animation */
.pb2-equip-result {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  animation: pb2ResultPop 0.4s ease-out;
  z-index: 10;
}

.pb2-equip-result.up {
  text-shadow: 0 0 8px #22c55e;
}

.pb2-equip-result.down {
  text-shadow: 0 0 8px #ef4444;
}

.pb2-equip-result.same {
  text-shadow: 0 0 8px #9ca3af;
}

@keyframes pb2ResultPop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* Slot States */
.pb2-slot.equipping {
  opacity: 0.5;
  pointer-events: none;
}

.pb2-slot.upgraded {
  animation: pb2ShakeUp 0.5s ease-out;
}

.pb2-slot.downgraded {
  animation: pb2ShakeDown 0.5s ease-out;
}

.pb2-slot.same {
  animation: pb2ShakeSame 0.3s ease-out;
}

@keyframes pb2ShakeUp {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px) rotate(-1deg); }
  40% { transform: translateX(3px) rotate(1deg); }
  60% { transform: translateX(-2px) rotate(-0.5deg); }
  80% { transform: translateX(2px) rotate(0.5deg); }
}

@keyframes pb2ShakeDown {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px) rotate(-1deg); }
  40% { transform: translateX(3px) rotate(1deg); }
  60% { transform: translateX(-2px) rotate(-0.5deg); }
  80% { transform: translateX(2px) rotate(0.5deg); }
}

@keyframes pb2ShakeSame {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Center VS */
.pb2-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
}

.pb2-vs-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Stats Row */
.pb2-stats-row {
  display: flex;
  gap: 0.25rem;
  padding: 0.35rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.pb2-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.65rem;
  padding: 0.2rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
}

.pb2-stat span:first-child {
  font-size: 0.75rem;
}

.pb2-stat span:last-child {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
}

.pb2-stat.win {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.1);
}

.pb2-stat.lose {
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}

/* Rewards Preview */
.pb2-rewards-preview {
  width: 100%;
  background: linear-gradient(135deg, rgba(10, 8, 22, 0.97), rgba(18, 14, 38, 0.95));
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 8px;
  padding: 6px 10px 4px;
  margin-top: 4px;
  text-align: center;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.pb2-rewards-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.pb2-rewards-header-icon {
  font-size: 0.75rem;
}

.pb2-rewards-section {
  margin-bottom: 3px;
}

.pb2-rewards-section-label {
  font-size: 0.55rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}

.pb2-rewards-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
  margin: 4px 0;
}

.pb2-rewards-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.pb2-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.pb2-reward-icon {
  font-size: 0.7rem;
}

.pb2-reward-value {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
}

.pb2-reward-label {
  font-size: 0.55rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pb2-reward-badge.xp {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.25);
  color: #4ade80;
}

.pb2-reward-badge.bronze {
  background: rgba(205, 127, 50, 0.1);
  border: 1px solid rgba(205, 127, 50, 0.25);
  color: #daa06d;
}

.pb2-rewards-chest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.pb2-chest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 3px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

.pb2-chest-card-icon {
  font-size: 0.8rem;
}

.pb2-chest-card-range {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
}

.pb2-chest-card-label {
  font-size: 0.48rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.65;
}

.pb2-chest-card.tlrpg {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(247, 160, 15, 0.08));
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: #ffd700;
}

.pb2-chest-card.bronze {
  background: rgba(205, 127, 50, 0.08);
  border: 1px solid rgba(205, 127, 50, 0.18);
  color: #daa06d;
}

.pb2-chest-card.resource {
  background: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}

.pb2-chest-card.armory {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}

.pb2-rewards-locked {
  font-size: 0.6rem;
  color: #9ca3af;
  padding: 3px 6px;
  background: rgba(156, 163, 175, 0.06);
  border: 1px solid rgba(156, 163, 175, 0.12);
  border-radius: 5px;
}

.pb2-rewards-tips {
  font-size: 0.55rem;
  color: rgba(156, 163, 175, 0.8);
  line-height: 1.3;
  margin-top: 3px;
}

.pb2-rewards-tips a {
  color: #60a5fa;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.pb2-rewards-tips a:hover {
  color: #93c5fd;
}

/* Drawer */
.pb2-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: pb2FadeIn 0.2s ease-out;
}

@keyframes pb2FadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pb2-drawer {
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(25, 28, 35, 0.99) 0%, rgba(15, 17, 22, 1) 100%);
  border-top: 3px solid var(--tl-primary, #f7a00f);
  border-radius: 24px 24px 0 0;
  padding: 1.5rem 1.5rem 2.5rem;
  overflow-y: auto;
  animation: pb2SlideUp 0.3s ease-out;
  
  /* Themed scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(247, 160, 15, 0.5) rgba(0, 0, 0, 0.2);
}

/* Webkit scrollbar styling for drawer */
.pb2-drawer::-webkit-scrollbar {
  width: 8px;
}

.pb2-drawer::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.pb2-drawer::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tl-primary, #f7a00f) 0%, rgba(247, 160, 15, 0.6) 100%);
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.pb2-drawer::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffb733 0%, var(--tl-primary, #f7a00f) 100%);
}

@keyframes pb2SlideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.pb2-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pb2-drawer-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tl-primary, #f7a00f);
}

.pb2-drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pb2-drawer-close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

/* Section Labels */
.pb2-drawer-section-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.75rem;
  margin-top: 0.5rem;
}

/* Currently Equipped Section */
.pb2-drawer-current {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.pb2-drawer-current .pb2-drawer-section-label {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.pb2-drawer-current-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  margin-bottom: 0.5rem;
}

.pb2-drawer-current-item .gc {
  width: 120px;
  min-width: 120px;
  flex-shrink: 0;
  margin-top: 14px; /* Space for tier badge */
}

.pb2-current-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pb2-current-tier {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}

.pb2-current-element {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  width: fit-content;
}

.pb2-current-element.boost {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

.pb2-current-element.penalty {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.pb2-unequip-btn {
  padding: 0.5rem 1rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #f87171;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
}

.pb2-unequip-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
}

/* Drawer Grid - 3 columns for larger drawer, comfortable spacing */
.pb2-drawer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 16px 8px 24px;
}

.pb2-drawer-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.85rem;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

/* GearCard wrapper in drawer */
.pb2-drawer-card-wrap {
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 12px;
  padding: 0;
  padding-bottom: 16px; /* Space for element badge below */
}

/* GearCard in drawer - ensure proper sizing and spacing */
.pb2-drawer-card-wrap .gc {
  width: 100%;
  margin-top: 14px; /* Space for tier badge above */
}

.pb2-drawer-card-wrap:hover {
  transform: translateY(-4px);
}

.pb2-drawer-card-wrap:hover .gc {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.pb2-drawer-card-wrap.equipping { opacity: .5; pointer-events: none; }

/* Element badge on drawer card - shows +2, -2, or +0 */
.pb2-card-element-badge {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pb2-card-element-badge.up {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border-color: rgba(34, 197, 94, 0.4);
}

.pb2-card-element-badge.down {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border-color: rgba(239, 68, 68, 0.4);
}

.pb2-card-element-badge.neutral {
  background: linear-gradient(135deg, #4b5563, #374151);
  color: rgba(255, 255, 255, 0.85);
}

/* Legacy styles for backwards compat */
.pb2-card-element-boost {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 6px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2px;
}

.pb2-card-element-boost.up {
  background: rgba(34, 197, 94, 0.95);
  color: #fff;
}

.pb2-card-element-boost.down {
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
}

/* Comparison badge */
.pb2-card-compare {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 8px;
  z-index: 10;
  white-space: nowrap;
}

.pb2-card-compare.better {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.pb2-card-compare.worse {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.pb2-card-compare.same {
  background: rgba(107, 114, 128, 0.8);
  color: #fff;
}

/* Best item badge */
.pb2-card-best-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ffd700, #f7a00f);
  color: #000;
  padding: 3px 10px;
  border-radius: 8px;
  z-index: 11;
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.5);
  white-space: nowrap;
}

/* Tip */
.pb2-tip {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.5rem;
  background: rgba(247, 160, 15, 0.1);
  border: 1px solid rgba(247, 160, 15, 0.2);
  border-radius: 8px;
}

.pb2-tip strong {
  color: var(--tl-primary, #f7a00f);
}

/* Actions */
.pb2-actions {
  display: flex;
  gap: 0.5rem;
}

.pb2-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pb2-auto-btn {
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(100, 100, 110, 0.3) 0%, rgba(70, 70, 80, 0.25) 100%);
  color: #b0b0b8;
  border: 1px solid rgba(150, 150, 160, 0.4);
}

.pb2-auto-btn:hover:not(.disabled):not(:disabled) {
  background: linear-gradient(135deg, rgba(120, 120, 130, 0.4) 0%, rgba(90, 90, 100, 0.35) 100%);
  border-color: rgba(180, 180, 190, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(100, 100, 110, 0.3);
}

.pb2-auto-btn.disabled,
.pb2-auto-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pb2-fight-btn {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.pb2-fight-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
}

/* ── Victory Chest Rewards Card ─────────────────── */
.cr-card {
  margin-top: 0.6rem;
  position: relative;
}

.cr-card-inner {
  background: #0a0a0f;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 0.55rem 0.65rem 0.5rem;
}

.cr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.cr-header-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #f5f5f5;
}

.cr-readmore-btn {
  background: none;
  border: none;
  color: #64748b;
  font-size: 0.6rem;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  transition: color 0.2s;
}

.cr-readmore-btn:hover {
  color: #94a3b8;
}

/* ── Reward rows ── */
.cr-items {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cr-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  transition: background 0.2s;
}

.cr-item:hover {
  background: rgba(255,255,255,0.04);
}

.cr-item-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.cr-icon-bronze { background: rgba(205,127,50,0.12); }
.cr-icon-res    { background: rgba(74,222,128,0.10); }
.cr-icon-arm    { background: rgba(99,102,241,0.12); }
.cr-icon-tlrpg  { background: rgba(249,115,22,0.12); padding: 0.15rem; }

.cr-tlrpg-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

.cr-item-body {
  flex: 1;
  min-width: 0;
}

.cr-item-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: #d1d5db;
  line-height: 1.1;
}

.cr-item-range {
  font-size: 0.6rem;
  color: #6b7280;
}

.cr-item-range-eur {
  color: #fb923c;
}

.cr-item-lock {
  font-size: 0.55rem;
  color: #ef4444;
  opacity: 0.8;
}

.cr-item-refill {
  font-size: 0.55rem;
  color: #f59e0b;
  opacity: 0.85;
}

/* Locked row */
.cr-item-locked {
  opacity: 0.35;
}

/* Jackpot glow for TLRPG */
.cr-item-jackpot {
  background: linear-gradient(90deg, rgba(249,115,22,0.05), rgba(251,146,60,0.03));
  border: 1px solid rgba(249,115,22,0.1);
}

/* Upgrade hint */
.cr-upgrade-hint {
  margin-top: 0.35rem;
  font-size: 0.5rem;
  color: #4b5563;
  text-align: center;
  line-height: 1.3;
}

/* ── Drop Rates Popup ── */
.cr-popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.cr-popup {
  background: #0c0c14;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  width: 100%;
  max-width: 340px;
  max-height: 80vh;
  overflow-y: auto;
}

.cr-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8rem;
  font-weight: 700;
  color: #f5f5f5;
}

.cr-popup-close {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.3rem;
  line-height: 1;
}

.cr-popup-close:hover { color: #fff; }

.cr-popup-body {
  padding: 0.6rem 0.8rem 0.8rem;
}

.cr-popup-section {
  margin-bottom: 0.7rem;
}

.cr-popup-section:last-of-type {
  margin-bottom: 0.5rem;
}

.cr-popup-title {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b7280;
  margin-bottom: 0.3rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.cr-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2rem 0;
  font-size: 0.65rem;
  color: #9ca3af;
}

.cr-popup-rare {
  color: #fb923c;
  font-weight: 600;
}

.cr-popup-legendary {
  color: #f59e0b;
  font-weight: 700;
}

.cr-popup-note {
  font-size: 0.55rem;
  color: #4b5563;
  line-height: 1.4;
  margin-top: 0.3rem;
}

/* Tablet Responsive - 2 column drawer */

/* Mobile Responsive */
@media (max-width: 480px) {
  .pb2-card {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  
  .pb2-title {
    font-size: 0.9rem;
  }
  
  .pb2-arena {
    grid-template-columns: 1fr 30px 1fr;
    gap: 0.25rem;
  }
  
  .pb2-slot {
    height: 42px;
  }
  
  .pb2-slot-img {
    width: 26px;
    height: 26px;
  }
  
  .pb2-slot-label {
    font-size: 0.75rem;
    left: 4px;
  }
  
  .pb2-slot-tier {
    font-size: 0.5rem;
    padding: 1px 3px;
  }
  
  .pb2-slot-element {
    font-size: 0.6rem;
  }
  
  .pb2-center {
    padding-top: 50px;
  }
  
  .pb2-vs-badge {
    font-size: 0.6rem;
    padding: 0.2rem 0.35rem;
  }
  
  .pb2-stats-row {
    gap: 0.15rem;
    padding: 0.25rem;
  }
  
  .pb2-stat {
    font-size: 0.6rem;
    padding: 0.15rem;
  }
  
  .pb2-stat span:first-child {
    font-size: 0.65rem;
  }
  
  .pb2-drawer {
    max-height: 70vh;
    padding: 1rem;
  }
  
  .pb2-drawer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .pb2-drawer-item-img {
    width: 30px;
    height: 30px;
  }
  
  .pb2-actions {
    flex-direction: column;
  }
  
  .pb2-btn {
    width: 100%;
    padding: 0.875rem;
  }
  
  .pb2-auto-btn {
    flex: none;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .pb2-arena {
    grid-template-columns: 1fr 24px 1fr;
  }
  
  .pb2-slot {
    height: 38px;
  }
  
  .pb2-slot-img {
    width: 22px;
    height: 22px;
  }
  
  .pb2-slot-label {
    display: none;
  }
  
  .pb2-combatant-header {
    padding: 0.3rem 0.4rem;
  }
  
  .pb2-avatar {
    font-size: 1rem;
  }
  
  .pb2-name {
    font-size: 0.65rem;
  }
  
  .pb2-drawer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* End of Pre-Battle Screen V2 */

/* ========================================
   INLINE ENERGY REFILL BUTTON
   Always visible next to energy bar
   ======================================== */

.refill-energy-btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(245, 158, 11, 0.2) 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 6px;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
  white-space: nowrap;
}

.refill-energy-btn-inline:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.4) 0%, rgba(245, 158, 11, 0.35) 100%);
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.refill-energy-btn-inline .btn-icon {
  font-size: 0.85rem;
}

.refill-energy-btn-inline .btn-text {
  display: inline;
}

@media (max-width: 480px) {
  .refill-energy-btn-inline .btn-text {
    display: none;
  }
  
  .refill-energy-btn-inline {
    padding: 4px 8px;
  }
}

/* ========================================
   ENERGY PACKAGES MODAL
   New package-based refill system
   ======================================== */

/* Old .energy-packages-modal styles replaced by .epkg-* classes */

/* ========================================
   ENERGY SHOP — Modernized (gold + electric blue)
   ======================================== */

.modal-overlay:has(.epkg-modal) { backdrop-filter: blur(8px); }

.epkg-modal {
  width: min(95vw, 540px);
  max-height: 92vh;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(ellipse at top, rgba(96,165,250,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom, rgba(247,160,15,0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(14,16,22,0.985) 0%, rgba(8,10,14,0.985) 100%);
  border: 1px solid rgba(247,160,15,0.22);
  border-radius: 18px;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 40px rgba(247,160,15,0.08);
  position: relative;
  animation: epkgModalIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes epkgModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.epkg-modal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(247,160,15,0.5) 50%, transparent 100%) top/100% 1px no-repeat;
  border-radius: 18px;
}
.epkg-modal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 20px, rgba(255,255,255,0.012) 20px 22px);
}
.epkg-modal > * { position: relative; z-index: 1; }

/* Header */
.epkg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid rgba(247,160,15,0.14);
  background:
    linear-gradient(180deg, rgba(247,160,15,0.07) 0%, transparent 100%);
}
.epkg-header h2 {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffe066 0%, #f7a00f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(247,160,15,0.4);
  display: flex; align-items: center; gap: 0.55rem;
}
.epkg-header h2::before {
  content: '⚡';
  -webkit-text-fill-color: initial; color: #60a5fa;
  font-size: 1.15rem; filter: drop-shadow(0 0 10px rgba(96,165,250,0.7));
  text-shadow: none;
}

.epkg-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}
.epkg-close:hover {
  background: rgba(247,160,15,0.14);
  border-color: rgba(247,160,15,0.5);
  color: #ffe066;
  transform: rotate(90deg);
}

/* Body */
.epkg-body {
  padding: 1.3rem 1.4rem;
  max-height: calc(92vh - 70px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(247,160,15,0.3) transparent;
}
.epkg-body::-webkit-scrollbar { width: 6px; }
.epkg-body::-webkit-scrollbar-thumb { background: rgba(247,160,15,0.3); border-radius: 3px; }

/* Loading & Error */
.epkg-loading, .epkg-error {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.85rem;
  padding: 3.5rem 1rem;
  color: rgba(255,255,255,0.55);
}
.epkg-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(96,165,250,0.15);
  border-top-color: #60a5fa;
  border-right-color: #ffe066;
  border-radius: 50%;
  animation: epkgSpin 0.9s linear infinite;
  box-shadow: 0 0 16px rgba(96,165,250,0.3);
}
@keyframes epkgSpin { to { transform: rotate(360deg); } }
.epkg-error {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: #fca5a5;
  font-size: 0.85rem;
}

/* Status Bar — stat chips */
.epkg-status {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}
.epkg-stat {
  flex: 1;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  background:
    linear-gradient(180deg, rgba(20,16,8,0.55) 0%, rgba(10,8,4,0.55) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.epkg-stat:first-child { border-color: rgba(96,165,250,0.22); }
.epkg-stat:last-child  { border-color: rgba(247,160,15,0.22); }
.epkg-stat::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  box-shadow: inset 0 0 16px rgba(0,0,0,0.45);
  pointer-events: none;
}
.epkg-stat-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px currentColor);
}
.epkg-stat:first-child .epkg-stat-icon { color: #60a5fa; }
.epkg-stat:last-child  .epkg-stat-icon { color: #ffe066; }
.epkg-stat-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: #f5f5f5;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quick Presets — gamified tiles */
.epkg-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}
.epkg-preset-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  padding: 0.55rem 0.3rem;
  background:
    linear-gradient(180deg, rgba(20,28,46,0.55) 0%, rgba(10,14,22,0.55) 100%);
  border: 1px solid rgba(96,165,250,0.18);
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  overflow: visible;
}
.epkg-preset-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events: none;
}
.epkg-preset-btn:hover {
  border-color: rgba(96,165,250,0.55);
  background: linear-gradient(180deg, rgba(37,99,235,0.18) 0%, rgba(15,23,42,0.65) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37,99,235,0.25);
}
.epkg-preset-btn.active {
  border-color: rgba(96,165,250,0.85);
  background: linear-gradient(180deg, rgba(37,99,235,0.35) 0%, rgba(15,23,42,0.7) 100%);
  box-shadow:
    0 0 18px rgba(96,165,250,0.45),
    inset 0 0 0 1px rgba(147,197,253,0.4),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.epkg-preset-energy {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #dbeafe;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(96,165,250,0.5);
}
.epkg-preset-btn.active .epkg-preset-energy {
  color: #fff;
  text-shadow: 0 0 12px rgba(147,197,253,0.8);
}
.epkg-preset-discount {
  position: absolute;
  top: -7px; right: -5px;
  padding: 2px 5px;
  background: linear-gradient(135deg, #f7a00f 0%, #ff6b00 100%);
  border-radius: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.48rem;
  font-weight: 900;
  color: #1a0e00;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(247,160,15,0.5);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}

/* Slider Section */
.epkg-slider-section { margin-bottom: 1.1rem; }
.epkg-slider-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.6rem;
}
.epkg-slider-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
}
.epkg-slider-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.25rem; font-weight: 900;
  color: #dbeafe;
  text-shadow: 0 0 14px rgba(96,165,250,0.55);
  letter-spacing: 0.02em;
}
.epkg-slider {
  width: 100%; height: 8px;
  -webkit-appearance: none; appearance: none;
  background:
    linear-gradient(90deg, #1e3a8a 0%, #2563eb 50%, #60a5fa 100%);
  border-radius: 999px;
  outline: none; cursor: pointer;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.7),
    0 0 14px rgba(96,165,250,0.25);
  border: 1px solid rgba(255,255,255,0.05);
}
.epkg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe066 0%, #f7a00f 60%, #d18a1a 100%);
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow:
    0 0 14px rgba(247,160,15,0.7),
    0 3px 8px rgba(0,0,0,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.epkg-slider::-webkit-slider-thumb:hover {
  transform: scale(1.18);
  box-shadow:
    0 0 22px rgba(255,224,102,0.9),
    0 4px 14px rgba(0,0,0,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.2);
}
.epkg-slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe066 0%, #f7a00f 60%, #d18a1a 100%);
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 0 14px rgba(247,160,15,0.7), 0 3px 8px rgba(0,0,0,0.5);
  cursor: pointer;
}
.epkg-slider-range {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em;
}

/* Price Summary — hero card */
.epkg-summary {
  padding: 1.05rem 1.15rem;
  background:
    radial-gradient(circle at 0% 50%, rgba(96,165,250,0.12), transparent 65%),
    radial-gradient(circle at 100% 50%, rgba(247,160,15,0.12), transparent 65%),
    linear-gradient(180deg, rgba(14,18,28,0.75) 0%, rgba(8,10,14,0.75) 100%);
  border: 1px solid rgba(247,160,15,0.22);
  border-radius: 12px;
  margin-bottom: 1.05rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 16px rgba(0,0,0,0.4);
}
.epkg-summary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(247,160,15,0.4) 50%, transparent 100%) top/100% 1px no-repeat;
}
.epkg-summary-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
  gap: 0.75rem;
}
.epkg-summary-energy {
  display: flex; align-items: baseline; gap: 6px;
  flex-wrap: wrap;
}
.epkg-summary-amount {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  background: linear-gradient(180deg, #dbeafe 0%, #60a5fa 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px rgba(96,165,250,0.4);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
.epkg-summary-unit {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(147,197,253,0.7);
  text-transform: uppercase;
}
.epkg-summary-pricing { text-align: right; }
.epkg-summary-tlrpg {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.35rem; font-weight: 800;
  background: linear-gradient(180deg, #ffe066 0%, #f7a00f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(247,160,15,0.4);
  letter-spacing: 0.02em;
}
.epkg-summary-details {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.epkg-summary-per {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.03em;
}
.epkg-summary-save {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(74,222,128,0.35);
  border-radius: 999px;
  text-shadow: 0 0 8px rgba(74,222,128,0.5);
  animation: epkgSaveBlink 2.6s ease-in-out infinite;
}
@keyframes epkgSaveBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  50% { box-shadow: 0 0 14px rgba(74,222,128,0.45); }
}

/* Success */
.epkg-success {
  display: flex; align-items: center; justify-content: center;
  padding: 0.85rem;
  background: linear-gradient(180deg, rgba(34,197,94,0.15), rgba(34,197,94,0.06));
  border: 1px solid rgba(74,222,128,0.45);
  border-radius: 10px;
  margin-bottom: 0.85rem;
  color: #86efac;
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(74,222,128,0.6);
  animation: epkgFadeIn 0.32s ease, epkgSuccessPulse 1.4s ease-in-out;
}
@keyframes epkgFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes epkgSuccessPulse {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  60% { box-shadow: 0 0 0 16px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* Main Buy Button */
.epkg-buy-main {
  width: 100%;
  padding: 1.05rem 1rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 12px;
  margin-bottom: 0.9rem;
  text-align: center;
  display: block;
  position: relative;
  overflow: hidden;
}
.epkg-buy-btn {
  background:
    linear-gradient(180deg, #f7a00f 0%, #c97a14 100%);
  border: 1px solid rgba(255,224,102,0.55);
  color: #1a0e00;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 6px 18px rgba(247,160,15,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 6px rgba(0,0,0,0.25);
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.epkg-buy-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.epkg-buy-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 10px 28px rgba(247,160,15,0.55),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 6px rgba(0,0,0,0.25),
    0 0 30px rgba(255,224,102,0.4);
}
.epkg-buy-btn:hover:not(:disabled)::before { transform: translateX(100%); }
.epkg-buy-btn:active:not(:disabled) { transform: translateY(0); }
.epkg-buy-btn:disabled {
  opacity: 0.55; cursor: not-allowed;
  filter: grayscale(0.4);
}
.epkg-btn-loading {
  display: inline-block;
  animation: epkgBtnPulse 0.9s ease-in-out infinite;
}
@keyframes epkgBtnPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Get TLRPG Button (insufficient funds) */
.epkg-get-tlrpg-btn {
  background:
    linear-gradient(180deg, rgba(37,99,235,0.25), rgba(30,58,138,0.18));
  border: 1px solid rgba(96,165,250,0.45);
  color: #dbeafe;
  font-size: 0.8rem;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 12px rgba(0,0,0,0.4);
}
.epkg-get-tlrpg-btn:hover {
  background: linear-gradient(180deg, rgba(37,99,235,0.4), rgba(30,58,138,0.28));
  border-color: rgba(147,197,253,0.75);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 18px rgba(37,99,235,0.4);
  transform: translateY(-1px);
}

/* Brackets info */
.epkg-brackets-info { margin-bottom: 0.85rem; }
.epkg-brackets-title {
  display: block;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.epkg-brackets-list {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.epkg-bracket {
  padding: 4px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.epkg-bracket.active {
  border-color: rgba(96,165,250,0.5);
  background: rgba(37,99,235,0.16);
  color: #dbeafe;
  box-shadow: 0 0 10px rgba(96,165,250,0.25);
}

/* Note */
.epkg-note {
  padding: 0.7rem 1rem;
  background:
    linear-gradient(180deg, rgba(96,165,250,0.08), rgba(96,165,250,0.03));
  border: 1px solid rgba(96,165,250,0.22);
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(191,219,254,0.85);
  text-align: center;
  letter-spacing: 0.02em;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .epkg-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 88vh;
    margin-top: auto;
  }
  .epkg-header { padding: 0.95rem 1.1rem; }
  .epkg-header h2 { font-size: 0.95rem; }
  .epkg-body { padding: 1.1rem; }
  .epkg-status { flex-direction: column; gap: 0.5rem; }
  .epkg-presets { grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
  .epkg-summary-amount { font-size: 2rem; }
  .epkg-summary-tlrpg { font-size: 1.15rem; }
  .epkg-buy-main { padding: 0.95rem 0.85rem; font-size: 0.82rem; }
}

/* ========================================
   ENHANCED MOBILE BATTLE HUB
   Optimized layout for small screens
   ======================================== */


@media (max-width: 480px) {
  /* Extra compact mode for small phones */
  .player-panel {
    padding: 0.75rem !important;
  }
  
  .player-class-box {
    width: 40px !important;
    height: 40px !important;
  }
  
  .class-level {
    font-size: 1rem !important;
  }
  
  .player-details h3 {
    font-size: 0.9rem !important;
  }
  
  .player-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.25rem !important;
  }
  
  .stat-item {
    padding: 0.25rem !important;
  }
  
  .stat-label {
    font-size: 0.5rem !important;
  }
  
  .stat-value {
    font-size: 0.75rem !important;
  }
  
  /* XP bar compact */
  .player-xp-inline {
    gap: 0.25rem !important;
  }
  
  .xp-text-mini {
    font-size: 0.55rem !important;
  }
  
  /* Energy bar compact */
  .energy-row {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }
  
  .energy-label {
    font-size: 0.65rem !important;
  }
  
  .energy-timer-mini {
    font-size: 0.55rem !important;
  }
  
  .energy-text-mini {
    font-size: 0.6rem !important;
  }
  
  /* Elements - horizontal scroll on very small screens */
  .element-bars {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 0.5rem !important;
    padding-bottom: 0.25rem !important;
  }
  
  .elem-row {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 50px !important;
  }
  
  .elem-bar-track {
    width: 100% !important;
    height: 4px !important;
  }
  
  /* Skills - horizontal scroll */
  .skills-row {
    display: flex !important;
    overflow-x: auto !important;
    gap: 0.5rem !important;
    padding-bottom: 0.25rem !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .skill-preview-item {
    flex: 0 0 auto !important;
    min-width: 60px !important;
  }
}

/* Mobile pre-battle styles moved to end of file for proper cascade */
  
  /* Hint modal */
  .pb2-hint-modal {
    max-width: 95vw !important;
    margin: auto !important;
  }
}

/* ========================================
   MOBILE BATTLE ARENA FIXES
   Better mob visibility and combat logs
   ======================================== */

@media (max-width: 600px) {
  .battle-arena {
    height: auto !important;
    min-height: calc(100vh - 100px) !important;
    max-height: none !important;
    padding: 0.5rem !important;
  }
  
  .arena-container {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    padding: 0.5rem !important;
  }
  
  /* Header compact */
  .battle-header {
    padding: 0.5rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .turn-badge {
    padding: 4px 8px !important;
    min-width: 40px !important;
  }
  
  .turn-label {
    font-size: 0.4rem !important;
  }
  
  .turn-value {
    font-size: 0.9rem !important;
  }
  
  .turn-indicator {
    padding: 4px 10px !important;
  }
  
  .turn-indicator span {
    font-size: 0.55rem !important;
  }
  
  /* Sound toggle smaller */
  .sound-toggle-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
  }
  
  /* MAIN BATTLE AREA - Stack vertically */
  .battle-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 0.5rem !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  
  /* MONSTER SECTION - Prominent */
  .monster-section {
    flex: 0 0 auto !important;
  }
  
  .monster-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem !important;
    background: rgba(20, 16, 10, 0.9) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    border-radius: 12px !important;
  }
  
  /* Monster image - visible and clear */
  .monster-image-wrap {
    flex: 0 0 auto !important;
    width: 80px !important;
    height: 80px !important;
    position: relative !important;
  }
  
  .monster-image {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  .monster-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  .monster-image:not(:has(img)) {
    font-size: 2.5rem !important;
  }
  
  /* Monster tags overlay */
  .monster-tags-overlay {
    position: absolute !important;
    bottom: -4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 5 !important;
  }
  
  .tag-difficulty,
  .tag-element {
    font-size: 0.5rem !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
  }
  
  /* Monster info panel */
  .monster-info-panel {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    min-width: 0 !important;
  }
  
  .intent-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.6rem !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    width: fit-content !important;
  }
  
  .monster-name {
    font-size: 0.85rem !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Circular HP - use linear bar on mobile for clarity */
  .circular-hp-container {
    display: none !important;
  }
  
  .monster-hp.hidden {
    display: block !important;
  }
  
  .monster-hp {
    width: 100% !important;
  }
  
  .hp-bar-bg {
    height: 10px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 5px !important;
    overflow: hidden !important;
  }
  
  .hp-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
    border-radius: 5px !important;
    transition: width 0.3s ease !important;
  }
  
  .hp-text {
    font-size: 0.65rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 2px !important;
    display: block !important;
  }
  
  /* COMBAT LOG - Scrollable with max height */
  .combat-log-section {
    flex: 1 1 auto !important;
    min-height: 80px !important;
    max-height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(10, 10, 10, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  .log-header {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.6rem !important;
    background: rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
  }
  
  .log-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }
  
  .log-entry {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.35rem !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }
  
  /* FOOTER - Player and Skills */
  .battle-footer {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.5rem !important;
    background: rgba(10, 10, 10, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
  }
  
  /* Player section compact */
  .player-section {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.35rem !important;
  }
  
  .player-avatar {
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
  }
  
  .player-hp-wrap {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .player-hp-bar {
    height: 14px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .player-hp-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
    border-radius: 7px !important;
  }
  
  .player-hp-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 0.55rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  }
  
  /* Actions section */
  .actions-section {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  
  /* Skill buttons - horizontal scroll */
  .skill-buttons {
    display: flex !important;
    gap: 0.35rem !important;
    overflow-x: auto !important;
    flex: 1 !important;
    padding: 0.25rem 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .skill-btn {
    flex: 0 0 auto !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0.25rem !important;
    border-radius: 8px !important;
    background: rgba(20, 16, 10, 0.9) !important;
    border: 1px solid rgba(251, 191, 36, 0.2) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
  
  .skill-icon {
    font-size: 1rem !important;
  }
  
  .skill-name {
    font-size: 0.4rem !important;
    max-width: 44px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  .cooldown-overlay {
    font-size: 0.8rem !important;
  }
  
  /* Flee button */
  .flee-btn {
    flex: 0 0 auto !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 0.25rem !important;
    border-radius: 8px !important;
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    font-size: 0.7rem !important;
    touch-action: manipulation !important;
  }
  
  .flee-btn span:first-child {
    font-size: 1rem !important;
  }
  
  .flee-btn span:last-child {
    font-size: 0.4rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .monster-image-wrap {
    width: 60px !important;
    height: 60px !important;
  }
  
  .skill-btn,
  .flee-btn {
    width: 44px !important;
    height: 44px !important;
  }
  
  .skill-icon {
    font-size: 0.9rem !important;
  }
  
  .skill-name {
    display: none !important;
  }
  
  .combat-log-section {
    max-height: 80px !important;
  }
}

/* ========================================
   MOBILE BATTLE ARENA - FINAL OVERRIDE
   This section must be last to override all conflicting rules
   ======================================== */
@media (max-width: 600px) {
  /* Full viewport battle arena */
  .battle-arena {
    height: auto !important;
    min-height: calc(100vh - 80px) !important;
    max-height: none !important;
    padding: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Arena container - flex column layout */
  .arena-container,
  #arena-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: calc(100vh - 100px) !important;
    max-height: none !important;
    padding: 0.5rem !important;
    grid-template-rows: unset !important;
  }
  
  /* BATTLE HEADER - Very compact */
  .battle-header {
    flex: 0 0 auto !important;
    padding: 0.4rem 0.5rem !important;
    gap: 0.4rem !important;
    min-height: unset !important;
  }
  
  .turn-badge {
    padding: 3px 8px !important;
    min-width: 36px !important;
  }
  
  .turn-label {
    font-size: 0.35rem !important;
  }
  
  .turn-value {
    font-size: 0.8rem !important;
  }
  
  .turn-indicator {
    padding: 3px 8px !important;
    font-size: 0.55rem !important;
  }
  
  .sound-toggle-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.75rem !important;
  }
  
  .combo-badge {
    padding: 4px 12px !important;
    font-size: 0.65rem !important;
  }
  
  /* BATTLE MAIN - Monster and combat log */
  .battle-main {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.4rem !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    grid-template-rows: unset !important;
  }
  
  /* MONSTER SECTION - Horizontal layout, takes up space */
  .monster-section {
    flex: 0 0 auto !important;
  }
  
  .monster-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.6rem !important;
    background: rgba(20, 16, 10, 0.95) !important;
    border: 1px solid rgba(251, 191, 36, 0.25) !important;
    border-radius: 10px !important;
  }
  
  /* Monster image - clear and visible */
  .monster-image-wrap {
    flex: 0 0 auto !important;
    width: 70px !important;
    height: 70px !important;
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  .monster-image {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
  }
  
  .monster-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  .monster-image:not(:has(img)) {
    font-size: 2rem !important;
  }
  
  /* Monster tags - bottom of image */
  .monster-tags-overlay {
    position: absolute !important;
    bottom: 2px !important;
    left: 2px !important;
    right: 2px !important;
    display: flex !important;
    gap: 3px !important;
    justify-content: center !important;
    z-index: 5 !important;
  }
  
  .tag-difficulty,
  .tag-element {
    font-size: 0.45rem !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  
  /* Monster info - takes remaining space */
  .monster-info-panel {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    min-width: 0 !important;
  }
  
  .intent-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.55rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    width: fit-content !important;
    background: rgba(0, 0, 0, 0.4) !important;
  }
  
  .intent-icon {
    font-size: 0.7rem !important;
  }
  
  .intent-text {
    font-size: 0.5rem !important;
  }
  
  .monster-name {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #fbbf24 !important;
  }
  
  /* Use linear HP bar on mobile for clarity */
  .circular-hp-container {
    display: none !important;
  }
  
  .monster-hp.hidden {
    display: block !important;
  }
  
  .monster-hp {
    width: 100% !important;
  }
  
  .hp-bar-bg {
    height: 12px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  
  .hp-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
    border-radius: 6px !important;
  }
  
  .hp-text {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 3px !important;
    display: block !important;
    text-align: center !important;
  }
  
  /* COMBAT LOG - Compact scrollable */
  .combat-log-section {
    flex: 1 1 auto !important;
    min-height: 60px !important;
    max-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(10, 10, 10, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  .log-header {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.55rem !important;
    background: rgba(0, 0, 0, 0.4) !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
  
  .log-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0.25rem 0.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .log-entry {
    font-size: 0.55rem !important;
    padding: 0.15rem 0.25rem !important;
    border-radius: 3px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    line-height: 1.3 !important;
  }
  
  /* BATTLE FOOTER - Player HP and Skills */
  .battle-footer {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    padding: 0.5rem !important;
    background: rgba(10, 10, 10, 0.98) !important;
    border-top: 1px solid rgba(251, 191, 36, 0.15) !important;
    border-radius: 10px 10px 0 0 !important;
  }
  
  /* Player section - horizontal */
  .player-section {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.3rem !important;
  }
  
  .player-avatar {
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
  }
  
  .player-hp-wrap {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .player-hp-bar {
    height: 16px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
  }
  
  .player-hp-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
    border-radius: 7px !important;
    transition: width 0.2s ease !important;
  }
  
  .player-hp-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  }
  
  /* ACTIONS - Skills in horizontal row */
  .actions-section {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.35rem !important;
    align-items: stretch !important;
  }
  
  /* Skill buttons - horizontal scroll row */
  .skill-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
    overflow-x: auto !important;
    flex: 1 !important;
    padding: 0.15rem !important;
    -webkit-overflow-scrolling: touch !important;
    grid-template-columns: unset !important;
    scrollbar-width: none !important;
  }
  
  .skill-buttons::-webkit-scrollbar {
    display: none !important;
  }
  
  .skill-btn {
    flex: 0 0 auto !important;
    width: 56px !important;
    height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0.25rem !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(30, 26, 20, 0.98), rgba(20, 16, 10, 0.98)) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    min-width: unset !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
  }
  
  .skill-btn:active {
    transform: scale(0.92) !important;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15)) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  }
  
  .skill-btn.on-cooldown {
    opacity: 0.4 !important;
    filter: grayscale(0.5) !important;
  }
  
  .skill-icon,
  .skill-btn-icon {
    font-size: 1.15rem !important;
    line-height: 1 !important;
  }
  
  .skill-name {
    font-size: 0.5rem !important;
    max-width: 52px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }
  
  .cooldown-overlay {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  }
  
  /* Flee button - at end */
  .flee-btn {
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0.25rem !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.2)) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    transition: transform 0.1s ease !important;
  }
  
  .flee-btn:active {
    transform: scale(0.92) !important;
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.4), rgba(185, 28, 28, 0.35)) !important;
  }
  
  .flee-btn span:first-child {
    font-size: 1.15rem !important;
  }
  
  .flee-btn span:last-child {
    font-size: 0.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    color: #fca5a5 !important;
  }
}

/* ========================================
   MOBILE OPTIMIZED - 480px and below
   2025 Touch-First Design
   ======================================== */
@media (max-width: 480px) {
  /* Override any grid layouts for skills */
  .skill-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
  }
  
  .skill-btn {
    width: 52px !important;
    height: 48px !important;
  }
  
  .flee-btn {
    width: 48px !important;
    height: 48px !important;
  }
  
  .monster-image-wrap {
    width: 65px !important;
    height: 65px !important;
  }
  
  /* Combat log more compact */
  .combat-log-section {
    min-height: 50px !important;
    max-height: 70px !important;
  }
  
  .log-entry {
    font-size: 0.5rem !important;
    padding: 0.12rem 0.25rem !important;
  }
}

/* ========================================
   VERY SMALL SCREENS - 360px
   Ultra-compact but usable
   ======================================== */
@media (max-width: 360px) {
  .skill-btn {
    width: 46px !important;
    height: 44px !important;
  }
  
  .flee-btn {
    width: 44px !important;
    height: 44px !important;
  }
  
  .skill-icon,
  .skill-btn-icon {
    font-size: 1rem !important;
  }
  
  .skill-name {
    font-size: 0.4rem !important;
  }
  
  .monster-image-wrap {
    width: 55px !important;
    height: 55px !important;
  }
  
  .combat-log-section {
    max-height: 60px !important;
  }
}

/* ========================================
   PRE-BATTLE SCREEN MOBILE OPTIMIZATION
   Clean equipment slots with visible elements
   ======================================== */
@media (max-width: 600px) {
  .pre-battle-screen.pb2 {
    padding: 0.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  
  .pb2-card {
    padding: 0.5rem !important;
    gap: 0.4rem !important;
    max-width: 100% !important;
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Header ultra-compact */
  .pb2-header {
    padding: 0.25rem 0 !important;
    flex-shrink: 0 !important;
  }
  
  .pb2-back-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
  }
  
  .pb2-title {
    font-size: 0.8rem !important;
    letter-spacing: 1px !important;
  }
  
  /* Arena - 3 column grid */
  .pb2-arena {
    display: grid !important;
    grid-template-columns: 1fr 24px 1fr !important;
    gap: 0.2rem !important;
    min-height: auto !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
  }
  
  /* Combatant columns */
  .pb2-combatant {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    overflow: visible !important;
  }
  
  .pb2-combatant-header {
    padding: 0.2rem 0.3rem !important;
    gap: 0.25rem !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
  }
  
  .pb2-avatar {
    font-size: 0.85rem !important;
  }
  
  .pb2-name {
    font-size: 0.6rem !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Enemy badges compact */
  .pb2-enemy-badges {
    display: flex !important;
    gap: 3px !important;
  }
  
  .pb2-badge {
    font-size: 0.4rem !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
  }
  
  /* Equipment grid - 2x2 for 4 slots */
  .pb2-equipment-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }
  
  /* EQUIPMENT SLOTS - Clean modern design */
  .pb2-slot {
    height: 58px !important;
    min-width: 0 !important;
    position: relative !important;
    border-radius: 8px !important;
    background: linear-gradient(145deg, rgba(25, 22, 18, 0.95), rgba(15, 12, 8, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
  }
  
  .pb2-slot.equipped {
    border-color: rgba(251, 191, 36, 0.4) !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.15) !important;
  }
  
  /* Item image */
  .pb2-slot-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
  }
  
  .pb2-slot-img-wrap {
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }
  
  .pb2-slot-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  
  /* Tier badge - top right corner */
  .pb2-slot-tier-badge {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    font-size: 0.5rem !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    z-index: 10 !important;
    line-height: 1 !important;
  }
  
  /* Element overlay - bottom left, ALWAYS visible */
  .pb2-slot-element,
  .pb2-slot-element-overlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.75rem !important;
    position: absolute !important;
    bottom: 3px !important;
    left: 3px !important;
    background: rgba(0, 0, 0, 0.75) !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    z-index: 10 !important;
    line-height: 1 !important;
  }
  
  /* Tier ribbon - hide on mobile for cleaner look */
  .pb2-tier-ribbon {
    display: none !important;
  }
  
  /* Boost indicator - top left */
  .pb2-boost-indicator {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    font-size: 0.55rem !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    z-index: 11 !important;
    line-height: 1 !important;
  }
  
  .pb2-boost-indicator.up {
    background: rgba(34, 197, 94, 0.9) !important;
    color: #fff !important;
  }
  
  .pb2-boost-indicator.down {
    background: rgba(239, 68, 68, 0.9) !important;
    color: #fff !important;
  }
  
  /* Stars - hide on mobile */
  .pb2-slot-stars {
    display: none !important;
  }
  
  /* Slot footer - hide, we use overlays instead */
  .pb2-slot-footer {
    display: none !important;
  }
  
  /* Empty slot */
  .pb2-slot.empty {
    border-style: dashed !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }
  
  .pb2-slot-empty-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }
  
  .pb2-slot-label {
    font-size: 0.45rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.4) !important;
  }
  
  .pb2-slot-plus {
    font-size: 1rem !important;
    color: rgba(255, 255, 255, 0.25) !important;
  }
  
  /* VS badge - centered */
  .pb2-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
  
  .pb2-vs-badge {
    font-size: 0.55rem !important;
    padding: 0.15rem 0.3rem !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15)) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
  }
  
  /* Stats row - compact */
  .pb2-stats-row {
    display: flex !important;
    gap: 3px !important;
    padding: 0.15rem !important;
    flex-wrap: nowrap !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    margin-top: auto !important;
  }
  
  .pb2-stat {
    font-size: 0.5rem !important;
    padding: 0.15rem 0.2rem !important;
    flex: 1 !important;
    text-align: center !important;
    border-radius: 3px !important;
  }
  
  .pb2-stat.win {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
  }
  
  .pb2-stat.lose {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
  }
  
  /* ACTION BUTTONS - Full width, prominent */
  .pb2-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    padding: 0.4rem 0 0 !important;
    flex-shrink: 0 !important;
  }
  
  .pb2-btn {
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.6rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    transition: transform 0.1s ease !important;
  }
  
  .pb2-btn:active {
    transform: scale(0.98) !important;
  }
  
  /* Auto Best button */
  .pb2-auto-btn {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.25), rgba(126, 34, 206, 0.2)) !important;
    border: 1px solid rgba(147, 51, 234, 0.4) !important;
    color: #c4b5fd !important;
  }
  
  .pb2-auto-btn.disabled {
    opacity: 0.4 !important;
  }
  
  /* Hint button */
  .pb2-hint-btn {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15)) !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
    color: #fde68a !important;
  }
  
  .pb2-hint-cost {
    font-size: 0.7rem !important;
    opacity: 0.8 !important;
  }
  
  /* Fight button - most prominent */
  .pb2-fight-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border: none !important;
    color: #fff !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
  }
  
  .pb2-fight-btn:active {
    filter: brightness(1.1) !important;
  }
  
  /* Drawer - fullscreen on mobile */
  .pb2-drawer-backdrop {
    padding: 0.5rem !important;
    align-items: flex-end !important;
  }
  
  .pb2-drawer {
    max-width: 100% !important;
    max-height: 75vh !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 0.75rem !important;
  }
  
  .pb2-drawer-header {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .pb2-drawer-title {
    font-size: 0.85rem !important;
  }
  
  .pb2-drawer-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.2rem !important;
  }
  
  .pb2-drawer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  /* Hint modal */
  .pb2-hint-modal-backdrop {
    padding: 1rem !important;
  }
  
  .pb2-hint-modal {
    max-width: 95vw !important;
    padding: 1rem !important;
    border-radius: 12px !important;
  }
  
  .pb2-hint-modal-title {
    font-size: 0.9rem !important;
  }
  
  .pb2-matchup-row {
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }
  
  /* Enemy Image Container - Mobile */
  .pb2-enemy-image-container {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }
  
  .pb2-enemy-image-wrap {
    width: 100px !important;
    height: 100px !important;
  }
  
  .pb2-enemy-image {
    width: 100% !important;
    height: 100% !important;
  }
  
  .pb2-enemy-fallback {
    font-size: 2.5rem !important;
  }
  
  .pb2-enemy-element-badge {
    width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
  }
  
  .pb2-enemy-level-badge {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.75rem !important;
  }
}

/* ========================================
   TABLET BATTLE OPTIMIZATION (600-900px)
   Enhanced monster visibility with balanced layout
   ======================================== */
@media (min-width: 601px) and (max-width: 900px) {
  /* Battle Arena - Larger monster with semi-overlay UI */
  .battle-arena {
    min-height: calc(100vh - 80px) !important;
    padding: 0.75rem !important;
  }
  
  .arena-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0.5rem !important;
  }
  
  /* Battle header - compact */
  .battle-header {
    flex: 0 0 auto !important;
    padding: 0.5rem 0.75rem !important;
    gap: 0.75rem !important;
  }
  
  .turn-badge {
    padding: 6px 12px !important;
  }
  
  .turn-value {
    font-size: 1.1rem !important;
  }
  
  /* Battle main - monster takes most space */
  .battle-main {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    position: relative !important;
    min-height: 0 !important;
  }
  
  /* Monster section - dominant display */
  .monster-section {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
  }
  
  .monster-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 1rem !important;
    background: rgba(20, 16, 10, 0.9) !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
    border-radius: 16px !important;
  }
  
  .monster-image-wrap {
    width: 180px !important;
    height: 180px !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
  }
  
  .monster-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  
  .monster-image:not(:has(img)) {
    font-size: 5rem !important;
  }
  
  .monster-tags-overlay {
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    gap: 6px !important;
  }
  
  .tag-difficulty,
  .tag-element {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
  }
  
  .monster-info-panel {
    width: 100% !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }
  
  .monster-name {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
  }
  
  .intent-badge {
    justify-content: center !important;
    margin: 0 auto !important;
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
  }
  
  /* HP bar styles */
  .circular-hp-container {
    display: none !important;
  }
  
  .monster-hp.hidden {
    display: block !important;
  }
  
  .monster-hp {
    width: 100% !important;
  }
  
  .hp-bar-bg {
    height: 16px !important;
    border-radius: 8px !important;
  }
  
  .hp-text {
    font-size: 0.8rem !important;
    margin-top: 4px !important;
    text-align: center !important;
  }
  
  /* Combat log - side panel style */
  .combat-log-section {
    flex: 0 0 auto !important;
    max-height: 100px !important;
    background: rgba(10, 10, 10, 0.9) !important;
    border-radius: 10px !important;
  }
  
  .log-header {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.7rem !important;
  }
  
  .log-entry {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
  }
  
  /* Battle footer - compact row */
  .battle-footer {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem !important;
    background: rgba(10, 10, 10, 0.95) !important;
    border-radius: 12px !important;
  }
  
  .player-section {
    flex: 0 0 auto !important;
    min-width: 140px !important;
    max-width: 180px !important;
    gap: 0.5rem !important;
  }
  
  .player-hp-bar {
    height: 20px !important;
    border-radius: 10px !important;
  }
  
  .player-hp-text {
    font-size: 0.7rem !important;
  }
  
  .actions-section {
    flex: 1 !important;
    display: flex !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  
  .skill-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    overflow-x: auto !important;
    flex: 1 !important;
  }
  
  .skill-btn {
    width: 60px !important;
    height: 56px !important;
    border-radius: 12px !important;
  }
  
  .skill-icon {
    font-size: 1.3rem !important;
  }
  
  .skill-name {
    font-size: 0.55rem !important;
  }
  
  .flee-btn {
    width: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
  }
  
  /* ===== PRE-BATTLE TABLET ===== */
  .pre-battle-screen.pb2 {
    padding: 0.75rem !important;
  }
  
  .pb2-card {
    padding: 1rem !important;
    gap: 0.75rem !important;
  }
  
  .pb2-arena {
    grid-template-columns: 1fr 40px 1fr !important;
    gap: 0.5rem !important;
  }
  
  .pb2-combatant-header {
    padding: 0.4rem 0.5rem !important;
  }
  
  .pb2-name {
    font-size: 0.85rem !important;
    max-width: none !important;
  }
  
  .pb2-badge {
    font-size: 0.6rem !important;
    padding: 3px 8px !important;
  }
  
  /* Equipment slots */
  .pb2-equipment-col {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  
  .pb2-slot {
    height: 70px !important;
    border-radius: 10px !important;
  }
  
  .pb2-slot-img-wrap {
    width: 36px !important;
    height: 36px !important;
  }
  
  .pb2-slot-tier-badge {
    font-size: 0.6rem !important;
    padding: 3px 6px !important;
  }
  
  .pb2-slot-element,
  .pb2-slot-element-overlay {
    font-size: 0.85rem !important;
    padding: 3px 6px !important;
  }
  
  /* Enemy image - larger */
  .pb2-enemy-image-wrap {
    width: 160px !important;
    height: 160px !important;
  }
  
  .pb2-enemy-image-wrap.enlarged {
    width: 200px !important;
    height: 200px !important;
  }
  
  .pb2-enemy-fallback {
    font-size: 4rem !important;
  }
  
  .pb2-enemy-element-badge {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.2rem !important;
  }
  
  /* VS badge */
  .pb2-vs-badge {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.6rem !important;
  }
  
  /* Stats row */
  .pb2-stats-row {
    gap: 6px !important;
    padding: 0.3rem !important;
  }
  
  .pb2-stat {
    font-size: 0.65rem !important;
    padding: 0.25rem 0.35rem !important;
  }
  
  /* Action buttons */
  .pb2-actions {
    flex-direction: row !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0 !important;
  }
  
  .pb2-btn {
    flex: 1 !important;
    min-height: 48px !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
  }
  
  .pb2-fight-btn {
    flex: 1.3 !important;
    min-height: 52px !important;
    font-size: 0.95rem !important;
  }
}

/* ========================================
   MOBILE BATTLE ARENA - OPTIMIZED 2025
   Clean layout with visible skills
   ======================================== */
@media (max-width: 600px) {
  /* Full viewport battle arena */
  .battle-arena {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #0a0a0a !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100 !important;
  }
  
  .arena-container,
  #arena-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .arena-bg-effects {
    display: none !important;
  }
  
  /* ===== HEADER - Compact top bar ===== */
  .battle-header {
    position: relative !important;
    z-index: 50 !important;
    padding: 0.4rem 0.5rem !important;
    background: rgba(0, 0, 0, 0.9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(251, 191, 36, 0.2) !important;
  }
  
  .sound-toggle-btn,
  .passives-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
  }
  
  .turn-badge {
    padding: 4px 10px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
    border-radius: 12px !important;
  }
  
  .turn-label {
    font-size: 0.45rem !important;
  }
  
  .turn-value {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
  }
  
  .turn-indicator {
    padding: 4px 10px !important;
    font-size: 0.6rem !important;
    background: rgba(34, 197, 94, 0.3) !important;
    border: 1px solid rgba(34, 197, 94, 0.5) !important;
    border-radius: 12px !important;
    color: #86efac !important;
  }
  
  .combo-badge {
    padding: 4px 10px !important;
    font-size: 0.65rem !important;
    border-radius: 12px !important;
  }
  
  /* ===== MAIN BATTLE AREA - Monster display ===== */
  .battle-main {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  
  .monster-section {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .monster-card {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  
  .monster-image-wrap {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .monster-image {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: radial-gradient(ellipse at center, rgba(20, 18, 15, 0.9) 0%, rgba(10, 8, 5, 0.98) 100%) !important;
  }
  
  .monster-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  
  .monster-tags-overlay {
    position: absolute !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 6px !important;
    z-index: 10 !important;
  }
  
  .tag-difficulty {
    font-size: 0.55rem !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
  }
  
  .tag-element {
    font-size: 0.9rem !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.6) !important;
  }
  
  /* Monster info panel - above footer */
  .monster-info-panel {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    padding: 0.5rem !important;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    align-items: center !important;
  }
  
  .intent-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 0.6rem !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    background: rgba(251, 191, 36, 0.2) !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
  }
  
  .intent-icon {
    font-size: 0.75rem !important;
  }
  
  .intent-text {
    font-size: 0.55rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    color: #fde68a !important;
  }
  
  .monster-name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #fbbf24 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
  }
  
  .circular-hp-container {
    display: none !important;
  }
  
  .monster-hp.hidden {
    display: flex !important;
  }
  
  .monster-hp {
    width: 100% !important;
    max-width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  
  .hp-bar-bg {
    height: 14px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
  }
  
  .hp-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%) !important;
    border-radius: 6px !important;
    transition: width 0.3s ease !important;
  }
  
  .hp-text {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-align: center !important;
  }
  
  /* ===== COMBAT LOG - Collapsible above footer ===== */
  .combat-log-section {
    position: relative !important;
    z-index: 25 !important;
    max-height: 36px !important;
    min-height: 36px !important;
    overflow: hidden !important;
    background: rgba(15, 15, 15, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: max-height 0.3s ease, min-height 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    flex-shrink: 0 !important;
  }
  
  .combat-log-section.expanded {
    max-height: 140px !important;
    min-height: 140px !important;
  }
  
  .log-header {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.7) !important;
  }
  
  .log-header::after {
    content: '▼' !important;
    font-size: 0.45rem !important;
    opacity: 0.6 !important;
    transition: transform 0.3s ease !important;
  }
  
  .combat-log-section.expanded .log-header::after {
    transform: rotate(180deg) !important;
  }
  
  .log-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0.3rem 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
  }
  
  .log-entry {
    font-size: 0.55rem !important;
    padding: 0.25rem 0.4rem !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
  
  .log-entry.log-player {
    background: rgba(34, 197, 94, 0.15) !important;
    border-left: 2px solid #22c55e !important;
  }
  
  .log-entry.log-enemy {
    background: rgba(239, 68, 68, 0.15) !important;
    border-left: 2px solid #ef4444 !important;
  }
  
  /* ===== FOOTER - Player HP + Skills ===== */
  .battle-footer {
    position: relative !important;
    z-index: 40 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.4rem !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.4rem) !important;
    background: rgba(10, 10, 10, 0.98) !important;
    border-top: 1px solid rgba(251, 191, 36, 0.25) !important;
    flex-shrink: 0 !important;
  }
  
  .player-section {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    flex: 0 0 auto !important;
    min-width: 80px !important;
    max-width: 100px !important;
  }
  
  .player-avatar {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
  }
  
  .player-hp-wrap {
    flex: 1 !important;
    min-width: 0 !important;
  }
  
  .player-hp-bar {
    height: 18px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
  }
  
  .player-hp-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%) !important;
    border-radius: 8px !important;
    transition: width 0.2s ease !important;
  }
  
  .player-hp-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 0.5rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  }
  
  /* Skills section */
  .actions-section {
    display: flex !important;
    flex: 1 !important;
    gap: 0.25rem !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  
  .skill-buttons {
    display: flex !important;
    gap: 0.25rem !important;
    overflow-x: auto !important;
    flex: 1 !important;
    padding: 2px !important;
    scrollbar-width: none !important;
  }
  
  .skill-buttons::-webkit-scrollbar {
    display: none !important;
  }
  
  .skill-btn {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 2px !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(35, 30, 22, 0.98), rgba(25, 20, 15, 0.98)) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
  
  .skill-btn:active {
    transform: scale(0.92) !important;
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.2)) !important;
    border-color: rgba(251, 191, 36, 0.6) !important;
  }
  
  .skill-btn.on-cooldown {
    opacity: 0.4 !important;
    filter: grayscale(0.5) !important;
  }
  
  .skill-icon,
  .skill-btn-icon {
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }
  
  .skill-name {
    font-size: 0.35rem !important;
    max-width: 40px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1 !important;
  }
  
  .cooldown-overlay {
    position: absolute !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #fbbf24 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
  }
  
  .flee-btn {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px !important;
    padding: 2px !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.25)) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }
  
  .flee-btn:active {
    transform: scale(0.92) !important;
  }
  
  .flee-btn span:first-child {
    font-size: 1rem !important;
  }
  
  .flee-btn span:last-child {
    font-size: 0.35rem !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #fca5a5 !important;
  }
}

/* ===== BATTLE 480px refinements ===== */
@media (max-width: 480px) {
  .skill-btn {
    width: 40px !important;
    height: 40px !important;
  }
  
  .flee-btn {
    width: 36px !important;
    height: 40px !important;
  }
  
  .skill-icon,
  .skill-btn-icon {
    font-size: 1rem !important;
  }
  
  .player-section {
    min-width: 70px !important;
    max-width: 85px !important;
  }
  
  .player-hp-bar {
    height: 16px !important;
  }
}

/* ===== BATTLE 360px ultra-compact ===== */
@media (max-width: 360px) {
  .skill-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  
  .flee-btn {
    width: 32px !important;
    height: 36px !important;
  }
  
  .skill-name,
  .flee-btn span:last-child {
    display: none !important;
  }
  
  .player-section {
    min-width: 60px !important;
    max-width: 75px !important;
  }
  
  .monster-name {
    font-size: 1rem !important;
  }
}

/* ========================================
   MOBILE PRE-BATTLE - OPTIMIZED 2025
   Clean layout with all elements visible
   ======================================== */
@media (max-width: 600px) {
  .pre-battle-screen.pb2 {
    padding: 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    position: relative !important;
    background: #0a0a0a !important;
  }
  
  .pb2-card {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(15, 12, 8, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
  }
  
  .pb2-header {
    position: relative !important;
    padding: 0.5rem !important;
    background: transparent !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .pb2-back-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
  }
  
  .pb2-title {
    font-size: 0.9rem !important;
    letter-spacing: 1px !important;
  }
  
  .pb2-arena {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 0.5rem !important;
    padding: 0.25rem !important;
  }
  
  .pb2-center {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.15rem 0 !important;
    order: 2 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
  
  .pb2-vs-badge {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.2)) !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
    font-weight: 700 !important;
  }
  
  /* ===== PLAYER SECTION ===== */
  .pb2-combatant.pb2-player-side {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    padding: 0.4rem !important;
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
    border-radius: 10px !important;
  }
  
  .pb2-player-side .pb2-combatant-header {
    position: relative !important;
    padding: 0.2rem !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
  }
  
  .pb2-player-side .pb2-avatar {
    font-size: 1.1rem !important;
  }
  
  .pb2-player-side .pb2-name {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #86efac !important;
  }
  
  /* Equipment grid - 3 columns */
  .pb2-equipment-col {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }
  
  .pb2-slot {
    height: 56px !important;
    min-width: 0 !important;
    position: relative !important;
    border-radius: 8px !important;
    background: linear-gradient(145deg, rgba(25, 22, 18, 0.95), rgba(15, 12, 8, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  
  .pb2-slot:active {
    transform: scale(0.95) !important;
    border-color: rgba(251, 191, 36, 0.6) !important;
  }
  
  .pb2-slot.equipped {
    border-color: rgba(251, 191, 36, 0.4) !important;
    box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.1) !important;
  }
  
  .pb2-slot-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
  }
  
  .pb2-slot-img-wrap {
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }
  
  .pb2-slot-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  
  .pb2-slot-tier-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    font-size: 0.45rem !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    z-index: 5 !important;
  }
  
  .pb2-slot-element,
  .pb2-slot-element-overlay {
    display: flex !important;
    font-size: 0.65rem !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 2px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    padding: 1px 2px !important;
    border-radius: 3px !important;
    z-index: 5 !important;
  }
  
  .pb2-tier-ribbon,
  .pb2-slot-stars,
  .pb2-slot-footer {
    display: none !important;
  }
  
  .pb2-slot.empty {
    border-style: dashed !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
  }
  
  .pb2-slot-label {
    font-size: 0.4rem !important;
  }
  
  .pb2-slot-plus {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.3) !important;
  }
  
  .pb2-boost-indicator {
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    font-size: 0.45rem !important;
    padding: 1px 3px !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    z-index: 6 !important;
  }
  
  .pb2-boost-indicator.up {
    background: rgba(34, 197, 94, 0.9) !important;
    color: #fff !important;
  }
  
  .pb2-boost-indicator.down {
    background: rgba(239, 68, 68, 0.9) !important;
    color: #fff !important;
  }
  
  /* Stats row */
  .pb2-stats-row {
    display: flex !important;
    gap: 4px !important;
    padding: 0.2rem !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
  }
  
  .pb2-stat {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.3rem !important;
    flex: 1 !important;
    text-align: center !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
  }
  
  .pb2-stat.win {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
  }
  
  .pb2-stat.lose {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
  }
  
  /* ===== ENEMY SECTION ===== */
  .pb2-combatant.pb2-enemy-side {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
    padding: 0.4rem !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    border-radius: 10px !important;
  }
  
  .pb2-enemy-side .pb2-combatant-header {
    position: relative !important;
    padding: 0.2rem !important;
    background: transparent !important;
    text-align: center !important;
  }
  
  .pb2-enemy-side .pb2-enemy-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.25rem !important;
  }
  
  .pb2-enemy-side .pb2-name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
    word-break: break-word !important;
  }
  
  .pb2-enemy-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  
  .pb2-enemy-side .pb2-badge {
    font-size: 0.5rem !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
  
  /* Enemy image - larger and centered */
  .pb2-enemy-image-container {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0.4rem !important;
  }
  
  .pb2-enemy-image-wrap {
    width: 180px !important;
    height: 180px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: radial-gradient(ellipse at center, rgba(30, 25, 20, 0.9) 0%, rgba(10, 8, 5, 0.98) 100%) !important;
    border: 2px solid rgba(251, 191, 36, 0.3) !important;
  }
  
  .pb2-enemy-image-wrap.enlarged {
    width: 200px !important;
    height: 200px !important;
  }
  
  .pb2-enemy-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  
  .pb2-enemy-fallback {
    font-size: 5rem !important;
  }
  
  .pb2-enemy-level-badge-top {
    position: absolute !important;
    top: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 0.6rem !important;
    padding: 0.2rem 0.5rem !important;
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(251, 191, 36, 0.5) !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    color: #fbbf24 !important;
    z-index: 10 !important;
  }
  
  .pb2-enemy-element-badge {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    z-index: 10 !important;
  }
  
  .pb2-enemy-stats-overlay {
    display: flex !important;
    gap: 6px !important;
    margin-top: 0.4rem !important;
    position: relative !important;
  }
  
  .pb2-stat-chip {
    padding: 0.25rem 0.5rem !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  
  .pb2-stat-chip.win {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
  }
  
  .pb2-stat-chip.lose {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
  }
  
  .pb2-enemy-image-container::before,
  .pb2-enemy-image-container::after {
    display: none !important;
  }
  
  .pb2-mob-passives {
    display: none !important;
  }
  
  /* ===== ACTIONS ===== */
  .pb2-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.35rem !important;
    padding: 0.4rem !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.4rem) !important;
    background: rgba(10, 10, 10, 0.95) !important;
    border-top: 1px solid rgba(251, 191, 36, 0.15) !important;
    margin-top: auto !important;
  }
  
  .pb2-btn {
    flex: 1 !important;
    min-height: 44px !important;
    padding: 0.35rem 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  
  .pb2-btn:active {
    transform: scale(0.95) !important;
  }
  
  .pb2-auto-btn {
    background: linear-gradient(145deg, rgba(147, 51, 234, 0.3), rgba(126, 34, 206, 0.25)) !important;
    border: 1px solid rgba(147, 51, 234, 0.5) !important;
    color: #c4b5fd !important;
  }
  
  .pb2-hint-btn {
    background: linear-gradient(145deg, rgba(100, 100, 110, 0.3), rgba(70, 70, 80, 0.25)) !important;
    border: 1px solid rgba(150, 150, 160, 0.4) !important;
    color: #b0b0b8 !important;
  }
  
  .pb2-hint-cost {
    font-size: 0.5rem !important;
    opacity: 0.8 !important;
  }
  
  .pb2-fight-btn {
    flex: 1.3 !important;
    background: linear-gradient(145deg, #22c55e, #16a34a) !important;
    border: none !important;
    color: #fff !important;
    min-height: 48px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
  }
  
  /* Drawer */
  .pb2-drawer-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  
  .pb2-drawer {
    max-width: 100% !important;
    max-height: 75vh !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 0.75rem !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem) !important;
    background: rgba(15, 12, 8, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .pb2-drawer-header {
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .pb2-drawer-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
  }
  
  .pb2-drawer-close {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.1rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
  }
  
  .pb2-drawer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
}

/* ===== PRE-BATTLE 480px ===== */
@media (max-width: 480px) {
  .pb2-enemy-image-wrap,
  .pb2-enemy-image-wrap.enlarged {
    width: 160px !important;
    height: 160px !important;
  }
  
  .pb2-enemy-fallback {
    font-size: 4rem !important;
  }
  
  .pb2-slot {
    height: 52px !important;
  }
  
  .pb2-slot-img-wrap {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ===== PRE-BATTLE 360px ===== */
@media (max-width: 360px) {
  .pb2-enemy-side .pb2-name {
    font-size: 0.9rem !important;
  }
  
  .pb2-enemy-image-wrap,
  .pb2-enemy-image-wrap.enlarged {
    width: 140px !important;
    height: 140px !important;
  }
  
  .pb2-slot {
    height: 48px !important;
  }
  
  .pb2-slot-img-wrap {
    width: 24px !important;
    height: 24px !important;
  }
  
  .pb2-btn {
    min-height: 40px !important;
    font-size: 0.6rem !important;
  }
  
  .pb2-fight-btn {
    min-height: 44px !important;
  }
}

/* ========================================
   PASSIVE SKILLS MODAL
   ======================================== */

.passive-skills-modal {
  z-index: 1100;
}

.passive-skills-content {
  max-width: 520px;
  text-align: left;
  padding: 0;
  overflow: hidden;
}

.passive-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 3px solid;
  background: rgba(0, 0, 0, 0.3);
}

.passive-class-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.passive-header-info h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  margin: 0 0 0.25rem;
  color: var(--text-bright);
}

.passive-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mythic-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.passive-loading,
.passive-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 1rem;
  color: var(--text-muted);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Bonuses Summary */
.passive-bonuses-summary {
  padding: 1rem 1.5rem;
  background: rgba(59, 130, 246, 0.05);
  border-bottom: 1px solid var(--border);
}

.passive-bonuses-summary h4 {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bonus-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bonus-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  font-size: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.bonus-icon {
  font-size: 0.9rem;
}

.bonus-value {
  color: #4ade80;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
}

/* Next Unlock Banner */
.next-unlock-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.1), transparent);
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.next-label {
  color: var(--text-muted);
}

.next-name {
  font-weight: 600;
  color: var(--xp-color);
}

.next-level {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-left: auto;
}

/* Passives List */
.passives-list {
  max-height: 350px;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.passive-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  transition: background 0.2s;
}

.passive-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.passive-item.locked {
  opacity: 0.5;
}

.passive-item.mythic {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), transparent);
  border-left: 3px solid #f59e0b;
}

.passive-item.mythic.unlocked {
  opacity: 1;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.15), transparent);
}

.passive-level-badge {
  min-width: 45px;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-align: center;
  color: white;
  text-transform: uppercase;
}

.passive-icon-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.passive-icon {
  font-size: 1.5rem;
}

.passive-icon.locked-icon {
  filter: grayscale(100%);
  opacity: 0.5;
}

.mythic-star {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.8rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.passive-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.passive-name {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mythic-label {
  font-size: 0.6rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-weight: 700;
}

.passive-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.passive-desc.locked-desc {
  font-style: italic;
  color: rgba(255, 255, 255, 0.35);
}

/* Unlock Timeline */
.unlock-timeline {
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.2);
}

.unlock-timeline h4 {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.timeline-bar {
  position: relative;
  height: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  overflow: visible;
}

.timeline-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 15px;
  transition: width 0.5s ease;
  opacity: 0.5;
}

.timeline-node {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #374151;
  border: 2px solid #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  z-index: 1;
}

.timeline-node.unlocked {
  background: var(--primary);
  border-color: var(--primary);
}

.timeline-node.mythic-node {
  width: 30px;
  height: 30px;
  border-width: 3px;
}

.timeline-node.mythic-node.unlocked {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
}

.node-level {
  font-size: 0.55rem;
  font-weight: 700;
  color: white;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  .passive-skills-content {
    max-width: 100%;
    margin: 0 10px;
  }
  
  .passive-modal-header {
    padding: 1rem;
  }
  
  .passive-class-icon {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }
  
  .passive-header-info h2 {
    font-size: 1.1rem;
  }
  
  .passives-list {
    max-height: 280px;
  }
  
  .passive-item {
    padding: 0.6rem 1rem;
  }
  
  .passive-level-badge {
    min-width: 38px;
    font-size: 0.6rem;
  }
  
  .bonus-grid {
    gap: 0.35rem;
  }
  
  .bonus-item {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
  }
}

/* ========================================
   PASSIVES BUTTON IN BATTLE ARENA
   ======================================== */
   
.passives-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 8px;
  color: #c4b5fd;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.passives-btn:hover {
  background: rgba(124, 58, 237, 0.3);
  border-color: rgba(124, 58, 237, 0.6);
}

.passives-btn .count {
  background: rgba(255, 255, 255, 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.7rem;
}

/* Enemy Class Badge */
.enemy-class-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.enemy-class-badge .class-icon {
  font-size: 0.85rem;
}

.enemy-class-badge .passive-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.65rem;
}


/* ========================================
   MOBILE BOTTOM BAR SAFE AREA
   Ensure battle content never goes behind bottom bars
   ======================================== */

@media (max-width: 1024px) {
  /* Battle containers need proper layout, not extra padding that shows as black */
  .battle-arena-container,
  .battle-arena {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding-bottom: 0 !important;
    background: transparent !important;
  }
  
  /* Battle main takes remaining space above footer */
  .battle-main {
    flex: 1 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow-y: auto !important;
    /* Space for fixed footer + bottom bars */
    padding-bottom: calc(130px + 52px + 44px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* Battle footer - fixed at bottom above the mobile status bars */
  .battle-footer {
    position: fixed !important;
    bottom: calc(52px + 44px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: linear-gradient(180deg, rgba(15, 12, 8, 0.98), rgba(10, 8, 5, 1)) !important;
    border-top: 1px solid rgba(251, 191, 36, 0.2) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* Player HP section - compact horizontal layout */
  .battle-footer .player-section {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  .battle-footer .player-avatar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  .battle-footer .player-hp-wrap {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  
  .battle-footer .player-hp-bar {
    height: 36px !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid rgba(34, 197, 94, 0.4) !important;
    overflow: hidden !important;
    position: relative !important;
  }
  
  .battle-footer .player-hp-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #16a34a, #22c55e) !important;
    border-radius: 8px !important;
  }
  
  .battle-footer .player-hp-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  }
  
  /* Actions section - horizontal layout */
  .battle-footer .actions-section {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
  }
  
  /* Skill buttons - horizontal scrollable row */
  .battle-footer .skill-buttons {
    display: flex !important;
    gap: 5px !important;
    flex: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 2px 0 !important;
  }
  
  .battle-footer .skill-buttons::-webkit-scrollbar {
    display: none !important;
  }
  
  .battle-footer .skill-btn {
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 4px !important;
    border-radius: 8px !important;
    background: linear-gradient(145deg, rgba(26, 21, 16, 0.95), rgba(15, 12, 8, 0.95)) !important;
    border: 1px solid rgba(251, 191, 36, 0.25) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  
  .battle-footer .skill-btn:active:not(:disabled) {
    transform: scale(0.95) !important;
    background: rgba(251, 191, 36, 0.1) !important;
  }
  
  .battle-footer .skill-icon {
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }
  
  .battle-footer .skill-name {
    font-size: 0.4rem !important;
    max-width: 46px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    opacity: 0.8 !important;
  }
  
  .battle-footer .cooldown-overlay {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
  }
  
  /* Flee/Run button */
  .battle-footer .flee-btn {
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 4px !important;
    border-radius: 8px !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  
  .battle-footer .flee-btn span:first-child {
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }
  
  .battle-footer .flee-btn span:last-child {
    font-size: 0.4rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 0.9 !important;
    color: #ef4444 !important;
  }
  
  /* Pre-battle screen - add bottom padding */
  .pre-battle-screen,
  .pre-battle-content {
    padding-bottom: calc(52px + 44px + env(safe-area-inset-bottom, 0px) + 20px) !important;
  }
  
  /* Energy packages modal positioning */
  .energy-packages-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-height: 80vh !important;
    z-index: 1001 !important;
  }
  
  /* Hide player stats row on mobile to save space */
  .battle-footer .player-stats {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   Battle3 Post-Battle Inline Screen
   ═══════════════════════════════════════════════════ */

.b3-post-battle-screen {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: b3PostFadeIn 0.5s ease;
}

@keyframes b3PostFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.b3-post-inner {
  width: 100%;
  max-width: 480px;
  background: rgba(15, 15, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.b3-post-header {
  padding: 20px 24px 12px;
  text-align: center;
}

.b3-post-header.victory h2 {
  font-size: 1.6rem;
  color: #ffd700;
  margin: 0;
  text-shadow: 0 2px 12px rgba(255, 215, 0, 0.4);
}

.b3-post-header.defeat h2 {
  font-size: 1.6rem;
  color: #f44336;
  margin: 0;
  text-shadow: 0 2px 12px rgba(244, 67, 54, 0.4);
}

.b3-post-subtitle {
  color: #aaa;
  font-size: 0.85rem;
  margin: 4px 0 0;
}

.b3-post-body {
  padding: 12px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ── Spin Wheel ── */
.b3-wheel-container {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
}

.b3-wheel-pointer {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.6rem;
  color: #ffd700;
  z-index: 10;
  filter: drop-shadow(0 2px 8px rgba(255, 215, 0, 0.6));
}

.b3-wheel {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 4px solid rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.15), inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.b3-wheel-segment {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 0;
  right: 0;
  transform-origin: 0% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.b3-wheel-segment-label {
  position: absolute;
  top: 30%;
  left: 10%;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

/* ── Spin Result ── */
.b3-spin-result {
  text-align: center;
  animation: b3PostFadeIn 0.5s ease;
}

.b3-spin-result.golden .b3-spin-result-badge {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.b3-spin-result-badge {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.b3-golden-tag {
  font-size: 0.75rem;
  color: #ffd700;
  font-weight: 700;
}

.b3-spin-result-category {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f0f2f8;
}

/* ── Rewards Breakdown ── */
.b3-rewards-breakdown {
  width: 100%;
}

.b3-reward-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(255, 193, 7, 0.08);
  border-radius: 10px;
  border: 1px solid rgba(255, 193, 7, 0.15);
}

.b3-reward-total-icon {
  font-size: 1.3rem;
}

.b3-reward-total-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffd700;
}

.b3-reward-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.b3-reward-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  color: #ccc;
  background: rgba(255, 255, 255, 0.03);
}

.b3-reward-row.bonus {
  background: rgba(76, 175, 80, 0.06);
  border-left: 3px solid rgba(76, 175, 80, 0.3);
}

.b3-reward-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.b3-mult {
  color: #4caf50;
  font-weight: 700;
}

.b3-badge-img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.b3-reward-bronze {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: rgba(184, 134, 11, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(184, 134, 11, 0.2);
  font-weight: 700;
  color: #daa520;
  font-size: 1rem;
}

.b3-rewards-simple {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.b3-reward-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  color: #f0f2f8;
}

/* ── Spin Summary on Rewards Page ── */
.b3-spin-summary {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.b3-spin-summary.golden {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 165, 0, 0.05));
  border-color: rgba(255, 215, 0, 0.25);
}

.b3-spin-summary-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.b3-spin-summary-value {
  font-size: 1rem;
  font-weight: 700;
  color: #f0f2f8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.b3-golden-tag-sm {
  font-size: 0.7rem;
  color: #ffd700;
  font-weight: 700;
}

.b3-loot-detail {
  font-size: 0.8rem;
  margin-top: 6px;
  font-weight: 700;
  text-transform: uppercase;
}

.b3-loot-detail.rarity-uncommon { color: #4caf50; }
.b3-loot-detail.rarity-rare { color: #2196f3; }
.b3-loot-detail.rarity-epic { color: #9c27b0; }
.b3-loot-detail.rarity-legendary { color: #ffd700; }

/* ── Level Up / Stage Unlock ── */
.b3-level-up {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.08));
  border: 1px solid rgba(76, 175, 80, 0.25);
  border-radius: 10px;
  color: #81c784;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
}

.b3-level-energy {
  font-size: 0.8rem;
  color: #64b5f6;
  margin-top: 4px;
}

.b3-stage-unlock {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.08));
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 10px;
  color: #ffca28;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
}

/* ── Defeat ── */
.b3-defeat-penalty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(244, 67, 54, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(244, 67, 54, 0.2);
  color: #f44336;
  font-weight: 700;
  font-size: 1rem;
}

.b3-penalty-icon {
  font-size: 1.2rem;
}

.b3-defeat-xp {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 193, 7, 0.08);
  border-radius: 8px;
  color: #ffc107;
  font-size: 0.85rem;
}

.b3-near-miss {
  text-align: center;
  padding: 10px;
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.2);
  border-radius: 8px;
}

.b3-near-miss-label {
  color: #ff9800;
  font-weight: 800;
  font-size: 1.1rem;
}

.b3-near-miss p {
  color: #aaa;
  font-size: 0.85rem;
  margin: 4px 0 0;
}

/* ── Continue Button ── */
.b3-post-btn {
  width: 100%;
  max-width: 300px;
  padding: 12px 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #F9B642, #e6a435);
  color: #000;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
  margin-top: 8px;
  /* Mobile: kill 300ms tap delay + grey iOS overlay so close feels instant */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Promote to its own layer so the press animation never repaints the
     reward list behind it. */
  will-change: transform;
}

.b3-post-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(249, 182, 66, 0.3);
}

.b3-post-btn:active {
  /* Stronger active state — primary touch feedback on mobile (no hover). */
  transform: translateY(1px) scale(0.98);
  background: linear-gradient(135deg, #e6a435, #d18a1f);
  box-shadow: none;
}

.b3-post-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ── Battle3 SpinWheel wrapper ── */
.b3-spinwheel-wrap {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

/* Hide "Spin Again" + spin counter inside post-battle only (always 1 spin) */
.b3-post-body .b3-spinwheel-wrap .wbs-spin-again {
  display: none !important;
}
.b3-post-body .b3-spinwheel-wrap .wbs-spin-counter {
  display: none !important;
}

.b3-post-btn-next {
  animation: b3PostFadeIn 0.4s ease;
}

/* Rewards-step structure hooks (used by PostBattleScreen.tsx) */
.b3-post-actions-top {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 24px 8px;
}

.b3-post-body-scroll {
  width: 100%;
}

/* Mobile: compact rewards, remove dead top/bottom space, no scrolling needed */
@media (max-width: 768px) {
  .b3-post-battle-screen.b3-post-battle-rewards {
    min-height: calc(100dvh - 64px);
    align-items: stretch;
    justify-content: flex-start;
    padding: 6px 8px;
  }

  .b3-post-battle-screen.b3-post-battle-rewards .b3-post-inner {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
  }

  .b3-post-battle-screen.b3-post-battle-rewards .b3-post-header {
    padding: 8px 12px 4px;
  }

  .b3-post-battle-screen.b3-post-battle-rewards .b3-post-header.victory h2,
  .b3-post-battle-screen.b3-post-battle-rewards .b3-post-header.defeat h2 {
    font-size: 1.08rem;
  }

  .b3-post-battle-screen.b3-post-battle-rewards .b3-post-actions-top {
    padding: 2px 10px 4px;
  }

  .b3-post-battle-screen.b3-post-battle-rewards .b3-post-body-rewards {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 4px 10px 8px;
    gap: 4px;
  }

  .b3-post-battle-screen.b3-post-battle-rewards .b3-rewards-breakdown { gap: 4px; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-total { padding: 6px 8px; margin-bottom: 6px; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-total-icon { font-size: 1rem; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-total-value { font-size: 0.95rem; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-rows { gap: 4px; margin-bottom: 6px; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-row { padding: 4px 8px; font-size: 0.7rem; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-badge-img { width: 14px; height: 14px; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-bronze { padding: 6px 8px; font-size: 0.78rem; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-chest-section { margin-top: 4px !important; padding: 6px 8px !important; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-chest-section > div:first-child { font-size: 0.58rem !important; margin-bottom: 2px !important; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-chest-section .b3-reward-row { font-size: 0.68rem !important; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-level-up,
  .b3-post-battle-screen.b3-post-battle-rewards .b3-stage-unlock { padding: 6px 8px; font-size: 0.76rem; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-post-btn {
    margin-top: 0;
    max-width: 100%;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 0.9rem;
  }
}

@media (max-width: 430px) {
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-row.bonus,
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-row-hits {
    display: none;
  }

  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-row { font-size: 0.66rem; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-total-value { font-size: 0.86rem; }
  .b3-post-battle-screen.b3-post-battle-rewards .b3-reward-bronze,
  .b3-post-battle-screen.b3-post-battle-rewards .b3-level-up,
  .b3-post-battle-screen.b3-post-battle-rewards .b3-stage-unlock { font-size: 0.7rem; }
}

/* ════════════════════════════════════════════════════════════════════
   PLAYER PANEL — Game-feel upgrade.
   Goals: hero portrait reads as a framed champion card, XP bar feels
   alive, combat-stat cards look like HUD tiles instead of flat boxes.
   ════════════════════════════════════════════════════════════════════ */

/* Hero portrait — engraved gold frame with corner notches and a
   slow shimmer sweep across the picture. Replaces the plain border. */
.b3-hero-portrait {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) padding-box,
    linear-gradient(135deg, #ffd86b 0%, #f7a00f 35%, #5a3a08 55%, #f7a00f 75%, #ffd86b 100%) border-box;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.6),
    0 8px 22px rgba(247, 160, 15, 0.28),
    inset 0 0 24px rgba(0,0,0,0.55);
  overflow: hidden;
}
/* Corner notches — tiny "jewel rivets" on each frame corner. */
.b3-hero-portrait::before,
.b3-hero-portrait::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ffd86b 45%, #5a3a08 100%);
  box-shadow: 0 0 4px rgba(255, 216, 107, 0.9);
  z-index: 3;
  pointer-events: none;
}
.b3-hero-portrait::before { top: 3px;    left: 3px; }
.b3-hero-portrait::after  { bottom: 3px; right: 3px; }

/* Slow diagonal shimmer sweeping across the portrait every ~6s. */
.b3-hero-img {
  position: relative;
  z-index: 1;
  filter: contrast(1.05) saturate(1.08);
}
.b3-hero-portrait > .b3-hero-shimmer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 240, 200, 0.18) 48%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 240, 200, 0.18) 52%,
    transparent 65%);
  background-size: 220% 220%;
  background-position: 120% 120%;
  animation: b3HeroShimmer 6.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes b3HeroShimmer {
  0%, 70%, 100% { background-position: 120% 120%; opacity: 0; }
  80%           { background-position: -20% -20%; opacity: 1; }
  90%           { background-position: -40% -40%; opacity: 0; }
}

/* Level badge — give it depth + a rotating gold "halo" ring. */
.b3-hero-level-badge {
  width: 30px;
  height: 30px;
  background:
    radial-gradient(circle at 30% 25%, #fff7cf 0%, #ffd700 38%, #f7a00f 75%, #8a5208 100%);
  box-shadow:
    0 2px 8px rgba(247,160,15,0.6),
    inset 0 1px 2px rgba(255,255,255,0.7),
    inset 0 -2px 3px rgba(90, 58, 8, 0.55),
    0 0 0 2px rgba(0,0,0,0.55);
  text-shadow: 0 1px 0 rgba(255, 240, 180, 0.8);
}
.b3-hero-level-badge::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 215, 0, 0.55);
  animation: b3HeroHaloSpin 8s linear infinite;
  pointer-events: none;
}
@keyframes b3HeroHaloSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Class name — slight depth + accent underline that grows with focus. */
.b3-hero-class {
  position: relative;
  text-transform: capitalize;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 0 12px rgba(247, 160, 15, 0.25);
  padding-bottom: 4px;
}
.b3-hero-class::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 36px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f7a00f, transparent);
}

/* XP bar — animated gradient sheen, glowing tip, percentage chip. */
.b3-xp-track {
  position: relative;
  height: 9px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.25)),
    rgba(255,255,255,0.04);
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  overflow: hidden;
}
.b3-xp-fill {
  position: relative;
  background:
    linear-gradient(90deg, #f7a00f 0%, #ffd700 55%, #fff4b5 100%);
  box-shadow:
    0 0 10px rgba(247, 160, 15, 0.55),
    inset 0 1px 0 rgba(255,255,255,0.45);
}
/* Sweeping shine across the filled portion */
.b3-xp-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.55) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: b3XpShine 2.6s linear infinite;
  border-radius: inherit;
}
@keyframes b3XpShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
.b3-xp-label {
  font-size: 0.7rem;
  color: rgba(255, 220, 150, 0.78);
  letter-spacing: 0.04em;
}

/* COMBAT STATS title — section header with rune divider */
.b3-stats-title,
.b3-gear-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: #ffb347;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55);
}
.b3-stats-title::before,
.b3-gear-title::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 6px rgba(255, 179, 71, 0.7);
  flex-shrink: 0;
}
.b3-stats-title::after,
.b3-gear-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 179, 71, 0.4), transparent);
}

/* Stat cards — angled HUD tile, accent rail per stat type. */
.b3-stat-card {
  position: relative;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, rgba(20, 24, 36, 0.85), rgba(8, 10, 18, 0.9));
  border: 1px solid rgba(120, 134, 168, 0.18);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 3px 8px rgba(0,0,0,0.4);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.b3-stat-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 179, 71, 0.35);
}
.b3-stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
/* Color-coded rails: HP red, ATK orange, DEF blue */
.b3-stat-card:nth-child(1)::before { background: linear-gradient(180deg, #ff5a5a, #b22020); box-shadow: 0 0 8px rgba(255,90,90,0.5); }
.b3-stat-card:nth-child(2)::before { background: linear-gradient(180deg, #ffb347, #d97706); box-shadow: 0 0 8px rgba(255,179,71,0.5); }
.b3-stat-card:nth-child(3)::before { background: linear-gradient(180deg, #6bb6ff, #2563eb); box-shadow: 0 0 8px rgba(107,182,255,0.5); }

.b3-stat-icon {
  font-size: 1.25rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.b3-stat-name {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.12em;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 700;
}
.b3-stat-total {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  font-family: 'Orbitron', 'IBM Plex Mono', monospace;
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
}
.b3-gear-bonus {
  color: #4ade80;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.4);
}

/* Equipped Gear panel — parchment-dark inset, frame on slots. */
.b3-equipped-gear {
  background:
    linear-gradient(180deg, rgba(14, 18, 28, 0.55), rgba(6, 9, 16, 0.65));
  border: 1px solid rgba(120, 134, 168, 0.15);
  border-radius: 12px;
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 8px rgba(0,0,0,0.35);
}
.b3-gear-slot.filled {
  background: linear-gradient(180deg, rgba(20, 24, 36, 0.7), rgba(10, 12, 20, 0.75));
  border-color: rgba(255, 179, 71, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.b3-gear-slot.filled:hover {
  border-color: rgba(255, 179, 71, 0.5);
  transform: translateY(-1px);
}

/* Equipped Skills panel — match the gear panel framing */
.b3-equipped-skills {
  background:
    linear-gradient(180deg, rgba(14, 18, 28, 0.55), rgba(6, 9, 16, 0.65));
  border: 1px solid rgba(120, 134, 168, 0.15);
  border-radius: 12px;
  padding: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 2px 8px rgba(0,0,0,0.35);
}

/* ── Combat stats: 3-up compact layout ────────────────────────────
   The cards live in a single row across all viewports. Typography
   scales with viewport via clamp(); icons shrink first so digits
   stay readable. */
.b3-stat-card {
  padding: 6px 8px;
  gap: 6px;
  border-radius: 9px;
}
.b3-stat-card::before {
  width: 2px; /* thinner accent rail to save horizontal space */
}
.b3-stat-icon {
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
}
.b3-stat-name {
  font-size: clamp(0.5rem, 1.6vw, 0.6rem);
  letter-spacing: 0.08em;
}
.b3-stat-total {
  font-size: clamp(0.85rem, 3vw, 1.05rem);
  line-height: 1.1;
  /* Allow long numbers (e.g. 12,345) to scale down rather than wrap */
  white-space: nowrap;
}
.b3-stat-breakdown {
  font-size: clamp(0.48rem, 1.5vw, 0.58rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tighter still on very narrow phones (≤360px). */
@media (max-width: 360px) {
  .b3-stats-grid { gap: 4px; }
  .b3-stat-card { padding: 5px 6px; gap: 4px; }
  .b3-stat-icon { font-size: 0.8rem; }
}
/* Comfortable on tablets/desktop — give the row a bit more breathing room
   without breaking the single-row layout. */
@media (min-width: 768px) {
  .b3-stats-grid { gap: 8px; }
  .b3-stat-card { padding: 8px 10px; gap: 8px; }
  .b3-stat-total { font-size: 1.05rem; }
  .b3-stat-icon { font-size: 1.05rem; }
}

/* ── Combat stat cards: tight 3-up layout, values always fit ────────
   Strategy: float the icon as a translucent backdrop in the right of
   the card, give the text column the entire width, drop nowrap on
   the breakdown so "+334" never gets ellipsized. */
.b3-stat-card {
  position: relative;
  display: block !important;        /* override the old flex layout */
  padding: 7px 9px 8px 12px;
  min-width: 0;
  overflow: hidden;
}
.b3-stat-card::after {
  /* faint icon as backdrop, doesn't steal text space */
  content: attr(data-icon);
  position: absolute;
  right: 6px; bottom: -4px;
  font-size: 2.2rem;
  opacity: 0.12;
  filter: grayscale(0.2);
  pointer-events: none;
  line-height: 1;
}
/* Hide the inline icon span — backdrop replaces it */
.b3-stat-card .b3-stat-icon { display: none; }
.b3-stat-card .b3-stat-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  min-width: 0;
}
.b3-stat-name {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
}
.b3-stat-total {
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  line-height: 1;
  white-space: nowrap;
}
.b3-stat-breakdown {
  font-size: 0.58rem;
  white-space: normal;              /* allow wrap so +334 always shows */
  overflow: visible;
  text-overflow: clip;
  line-height: 1.15;
  display: flex;
  flex-wrap: wrap;
  gap: 0 3px;
}
.b3-gear-bonus { white-space: nowrap; }

@media (min-width: 768px) {
  .b3-stat-card { padding: 9px 10px 10px 14px; }
  .b3-stat-card::after { font-size: 2.6rem; right: 8px; }
  .b3-stat-total { font-size: 1.2rem; }
  .b3-stat-name { font-size: 0.6rem; }
  .b3-stat-breakdown { font-size: 0.62rem; }
}
@media (max-width: 360px) {
  .b3-stat-card { padding: 6px 7px 7px 10px; }
  .b3-stat-card::after { font-size: 1.8rem; }
  .b3-stat-total { font-size: 0.95rem; }
  .b3-stat-breakdown { font-size: 0.52rem; }
}


/* ─── Pre-battle slot durability bar + FIX button ───────────────────── */
.pb2-slot-dura {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  z-index: 4;
}
.pb2-slot-dura-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  overflow: hidden;
}
.pb2-slot-dura-fill {
  position: absolute;
  inset: 0;
  height: 100%;
  background: linear-gradient(180deg, #ffd86b 0%, #d99e2b 100%);
  transition: width .2s ease;
}
.pb2-slot-dura.dura-good .pb2-slot-dura-fill { background: linear-gradient(180deg, #8be58e 0%, #2e8b3a 100%); }
.pb2-slot-dura.dura-worn .pb2-slot-dura-fill { background: linear-gradient(180deg, #ffd86b 0%, #d99e2b 100%); }
.pb2-slot-dura.dura-damaged .pb2-slot-dura-fill { background: linear-gradient(180deg, #ffae5a 0%, #c66a17 100%); }
.pb2-slot-dura.dura-critical .pb2-slot-dura-fill { background: linear-gradient(180deg, #ff6b6b 0%, #b81818 100%); }
.pb2-slot-dura.dura-broken .pb2-slot-dura-fill { background: repeating-linear-gradient(45deg, #1a1a1a 0 4px, #444 4px 8px); }
.pb2-slot-dura-segments {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pb2-slot-dura-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.55);
  transform: translateX(-0.5px);
}
.pb2-slot-dura-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  pointer-events: auto;
}
.pb2-slot-dura-pct {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  letter-spacing: 0.04em;
}
.pb2-slot-dura.dura-broken .pb2-slot-dura-pct { color: #ff8080; }
.pb2-slot-fix-btn {
  pointer-events: auto;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  color: #1a0a00;
  background: linear-gradient(180deg, #ffd86b, #d99e2b);
  border: 1px solid #fff7c2;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(255, 216, 107, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pb2-slot-fix-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(255, 216, 107, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.pb2-slot-fix-btn:disabled { opacity: 0.5; cursor: wait; }

/* ════════════════════════════════════════════════════════════════
   Pre-battle redesign — Power Score ring, Win %, matchup summary,
   and per-slot ribbon refresh. Truthful + addicting.
   ════════════════════════════════════════════════════════════════ */

/* Center column gets a flex stack so ring + chip + summary line up */
.pb2-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  padding-top: 28px;
  min-width: 132px;
}

/* Power Score ring */
.pb2-power-ring {
  position: relative;
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.18));
  transition: filter 240ms ease;
}
.pb2-power-ring.is-winning {
  filter: drop-shadow(0 0 18px rgba(250, 204, 21, 0.55));
  animation: pb2PowerPulse 2.4s ease-in-out infinite;
}
.pb2-power-ring.is-losing {
  filter: drop-shadow(0 0 12px rgba(248, 113, 113, 0.32));
}
@keyframes pb2PowerPulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.45)); }
  50%      { filter: drop-shadow(0 0 24px rgba(250, 204, 21, 0.75)); }
}
.pb2-power-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pb2-power-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 8;
}
.pb2-power-ring-fill {
  fill: none;
  stroke: url(#pb2PowerGrad);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms cubic-bezier(.2,.8,.2,1);
}
.pb2-power-ring.is-losing .pb2-power-ring-fill {
  stroke: #f87171;
}
.pb2-power-ring-mob-tick {
  fill: #fff;
  stroke: rgba(0,0,0,0.6);
  stroke-width: 1.5;
}
.pb2-power-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
}
.pb2-power-ring-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}
.pb2-power-ring-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #fde68a;
  line-height: 1;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.6);
}
.pb2-power-ring.is-losing .pb2-power-ring-num { color: #fca5a5; text-shadow: 0 0 12px rgba(248,113,113,0.4); }
.pb2-power-ring-vs {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.5px;
}
.pb2-power-ring-vs strong { color: #f87171; font-weight: 700; }

/* Win % chip below ring */
.pb2-win-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  font-family: 'Orbitron', sans-serif;
  line-height: 1.05;
  min-width: 76px;
  transition: all 200ms ease;
}
.pb2-win-chip.win-hi { border-color: rgba(74, 222, 128, 0.45); background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.06)); box-shadow: 0 0 12px rgba(74,222,128,0.25); }
.pb2-win-chip.win-mid { border-color: rgba(251, 191, 36, 0.45); background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(251,191,36,0.06)); }
.pb2-win-chip.win-lo  { border-color: rgba(248, 113, 113, 0.45); background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(248,113,113,0.06)); box-shadow: 0 0 12px rgba(248,113,113,0.2); }
.pb2-win-chip-pct { font-size: 1rem; font-weight: 800; color: #fff; }
.pb2-win-chip.win-hi .pb2-win-chip-pct  { color: #86efac; }
.pb2-win-chip.win-mid .pb2-win-chip-pct { color: #fcd34d; }
.pb2-win-chip.win-lo  .pb2-win-chip-pct { color: #fca5a5; }
.pb2-win-chip-label { font-size: 0.5rem; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* Slot matchup summary pills */
.pb2-matchup-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 130px;
}
.pb2-mm-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1;
}
.pb2-mm-pill.adv { color: #86efac; border-color: rgba(74,222,128,0.4); background: rgba(34,197,94,0.12); }
.pb2-mm-pill.neu { color: #cbd5e1; border-color: rgba(148,163,184,0.3); background: rgba(148,163,184,0.08); }
.pb2-mm-pill.dis { color: #fca5a5; border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.12); }
.pb2-mm-pill.emp { color: #fbbf24; border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.1); }

/* Improved per-slot ribbon (replaces the bare +2 / -2 / +0 chip) */
.pb2-tier-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: auto;
}
.pb2-tier-ribbon-arrow { font-size: 0.7rem; line-height: 1; }
.pb2-tier-ribbon.bonus {
  color: #052e16;
  background: linear-gradient(135deg, #86efac, #4ade80);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.55), inset 0 1px 0 rgba(255,255,255,0.4);
}
.pb2-tier-ribbon.penalty {
  color: #fff;
  background: linear-gradient(135deg, #f87171, #dc2626);
  box-shadow: 0 0 10px rgba(248, 113, 113, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
.pb2-tier-ribbon.neutral {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Mobile: shrink the ring so it doesn't crowd the layout */
@media (max-width: 640px) {
  .pb2-center { padding-top: 18px; min-width: 100px; gap: 0.4rem; }
  .pb2-power-ring { width: 92px; height: 92px; }
  .pb2-power-ring-num { font-size: 1.3rem; }
  .pb2-power-ring-label { font-size: 0.45rem; letter-spacing: 1px; }
  .pb2-power-ring-vs { font-size: 0.5rem; }
  .pb2-win-chip { padding: 3px 8px; min-width: 60px; }
  .pb2-win-chip-pct { font-size: 0.8rem; }
  .pb2-win-chip-label { font-size: 0.42rem; letter-spacing: 0.8px; }
  .pb2-mm-pill { font-size: 0.5rem; padding: 1px 4px; }
  .pb2-tier-ribbon { font-size: 0.48rem; padding: 1px 4px; }
}

/* ════════════════════════════════════════════════════════════════
   PRE-BATTLE LAYOUT v5 — CLEAN REDESIGN FROM SCRATCH
   Goals:
     • Always fits in the visible content area (under top bar,
       right of sidebar). NEVER scrolls. NEVER overlaps chrome.
     • Single design system using CSS variables + clamp().
     • Same visual language for the inner gear cards (kept .pb2-slot).
     • Three logical zones: HEADER · ARENA (3 cols) · REWARDS · ACTIONS.
     • Aggressive uniform scale-down on tight screens.
   Selectors are scoped to `.pre-battle-screen.pb3` so they win
   over the legacy v2 cascade unconditionally.
   ════════════════════════════════════════════════════════════════ */

:root {
  --pb3-top-bar: 56px;
  --pb3-sidebar: 230px;
  --pb3-pad: 10px;
  --pb3-gap: 8px;
  --pb3-radius: 10px;
  --pb3-bg: linear-gradient(160deg, rgba(15,18,30,0.96), rgba(8,10,18,0.96));
  --pb3-edge: rgba(255,255,255,0.08);
}

/* ── Root: pinned to the visible content rectangle ── */
.pre-battle-screen.pb3 {
  position: fixed;
  top: var(--pb3-top-bar);
  left: var(--pb3-sidebar);
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--pb3-pad);
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  z-index: 1000;
  font-size: clamp(11px, 0.92vw, 14px); /* ALL inner em scales from this */
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
}
body.sidebar-collapsed .pre-battle-screen.pb3 { left: 0; }
body:not(.has-sidebar)        .pre-battle-screen.pb3 { left: 0; }
body:not(.has-top-status-bar) .pre-battle-screen.pb3 { top: 0; }

/* ── Card: grid container that fills the available rect ── */
.pre-battle-screen.pb3 .pb3-card {
  width: 100%;
  max-width: 1280px;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  padding: calc(var(--pb3-pad) * 0.8) var(--pb3-pad);
  background: var(--pb3-bg);
  border: 1px solid var(--pb3-edge);
  border-radius: var(--pb3-radius);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  display: grid;
  grid-template-rows: auto 1fr auto auto; /* header / arena / rewards-strip / actions */
  gap: var(--pb3-gap);
  overflow: hidden;
  box-sizing: border-box;
}

/* ── Header bar ── */
.pre-battle-screen.pb3 .pb2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 6px;
  margin: 0;
  border-bottom: 1px solid var(--pb3-edge);
  min-height: 0;
}
.pre-battle-screen.pb3 .pb2-back-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  font-size: 1em;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--pb3-edge);
  color: #fff;
}
.pre-battle-screen.pb3 .pb2-back-btn:hover { background: rgba(255,255,255,0.12); }
.pre-battle-screen.pb3 .pb2-title {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}
.pre-battle-screen.pb3 .pb2-spacer { width: 28px; }

/* ── Arena: 3 columns ── */
.pre-battle-screen.pb3 .pb2-arena {
  display: grid !important;
  grid-template-columns: 1fr clamp(110px, 12vw, 170px) 1fr;
  gap: var(--pb3-gap);
  align-items: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.pre-battle-screen.pb3 .pb2-arena > * {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Combatant columns (player & enemy share base styles) ── */
.pre-battle-screen.pb3 .pb2-combatant {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--pb3-edge);
  border-radius: var(--pb3-radius);
  padding: 6px;
  gap: 6px;
  min-height: 0;
}
.pre-battle-screen.pb3 .pb2-combatant-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  min-height: 0;
}
.pre-battle-screen.pb3 .pb2-name {
  font-size: 0.95em;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pre-battle-screen.pb3 .pb2-avatar { font-size: 1.15em; }

/* Stat pills under player */
.pre-battle-screen.pb3 .pb2-stats-row {
  display: flex;
  gap: 4px;
  padding: 0;
  background: transparent;
  flex: 0 0 auto;
}
.pre-battle-screen.pb3 .pb2-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  font-size: 0.8em;
  font-weight: 700;
  color: #fff;
  min-width: 0;
}
.pre-battle-screen.pb3 .pb2-stat.win  { background: rgba(34,197,94,0.18); color: #86efac; }
.pre-battle-screen.pb3 .pb2-stat.lose { background: rgba(239,68,68,0.16); color: #fca5a5; }
.pre-battle-screen.pb3 .pb2-stat span:first-child { font-size: 0.95em; }

/* ── Equipment grid (3 rows × 2 cols) — keeps existing .pb2-slot styling ── */
.pre-battle-screen.pb3 .pb2-equipment-col {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;        /* equal-height rows */
  gap: 5px;
  padding: 0;
  overflow: hidden;
}
.pre-battle-screen.pb3 .pb2-slot {
  aspect-ratio: auto !important;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4px 4px 6px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  font-size: 0.78em;
}
.pre-battle-screen.pb3 .pb2-slot-tier-badge {
  font-size: 0.65em !important;
  padding: 1px 6px !important;
  top: -7px !important;
}
.pre-battle-screen.pb3 .pb2-slot-stars {
  font-size: 0.6em;
  gap: 1px;
  padding: 2px 0 0;
}
.pre-battle-screen.pb3 .pb2-slot-visual { min-height: 0; flex: 1 1 auto; }
.pre-battle-screen.pb3 .pb2-slot-img-wrap { padding: 2px; min-height: 0; }
.pre-battle-screen.pb3 .pb2-slot-img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pre-battle-screen.pb3 .pb2-slot-element { font-size: 0.85em; }
.pre-battle-screen.pb3 .pb2-slot-footer { padding: 2px 0 0; min-height: 0; }
.pre-battle-screen.pb3 .pb2-tier-ribbon {
  font-size: 0.55em !important;
  padding: 1px 4px !important;
  gap: 2px;
}
.pre-battle-screen.pb3 .pb2-tier-ribbon-arrow { font-size: 0.7em; }
.pre-battle-screen.pb3 .pb2-slot-element-overlay { font-size: 1em; }

/* Slot durability bar — slimmer */
.pre-battle-screen.pb3 .pb2-slot-dura { padding: 1px 2px; }
.pre-battle-screen.pb3 .pb2-slot-dura-track { height: 4px; }
.pre-battle-screen.pb3 .pb2-slot-fix-btn { font-size: 0.7em; padding: 2px 5px; }

/* ── Center column: power dial + win + matchup pills ── */
.pre-battle-screen.pb3 .pb2-center {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 2px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--pb3-edge);
  border-radius: var(--pb3-radius);
  flex: 0 0 auto;
}
.pre-battle-screen.pb3 .pb2-power-ring {
  width: clamp(80px, 10vw, 120px);
  height: clamp(80px, 10vw, 120px);
  margin: 0;
}
.pre-battle-screen.pb3 .pb2-power-ring-num {
  font-size: 1.55em;
  font-weight: 800;
  line-height: 1;
}
.pre-battle-screen.pb3 .pb2-power-ring-label {
  font-size: 0.5em;
  letter-spacing: 1px;
}
.pre-battle-screen.pb3 .pb2-power-ring-vs { font-size: 0.55em; opacity: 0.85; }

.pre-battle-screen.pb3 .pb2-win-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 700;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--pb3-edge);
  min-width: 64px;
}
.pre-battle-screen.pb3 .pb2-win-chip.win-hi  { background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.4); }
.pre-battle-screen.pb3 .pb2-win-chip.win-mid { background: rgba(250,204,21,0.16); border-color: rgba(250,204,21,0.4); }
.pre-battle-screen.pb3 .pb2-win-chip.win-lo  { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.4); }
.pre-battle-screen.pb3 .pb2-win-chip-pct { font-size: 1em; }
.pre-battle-screen.pb3 .pb2-win-chip-label { font-size: 0.5em; letter-spacing: 0.8px; opacity: 0.8; }

.pre-battle-screen.pb3 .pb2-matchup-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  max-width: 100%;
  padding: 0 2px;
}
.pre-battle-screen.pb3 .pb2-mm-pill {
  font-size: 0.55em;
  padding: 1px 5px;
  border-radius: 6px;
  font-weight: 700;
}

/* ── Enemy column (image fills available space) ── */
.pre-battle-screen.pb3 .pb2-enemy-side .pb2-enemy-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.pre-battle-screen.pb3 .pb2-enemy-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.pre-battle-screen.pb3 .pb2-badge {
  font-size: 0.6em;
  padding: 1px 5px;
  border-radius: 5px;
}

.pre-battle-screen.pb3 .pb2-enemy-image-container,
.pre-battle-screen.pb3 .pb2-enemy-image-container.enlarged {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  width: 100%;
}
.pre-battle-screen.pb3 .pb2-enemy-image-wrap,
.pre-battle-screen.pb3 .pb2-enemy-image-wrap.enlarged {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.04), transparent 70%);
  border-radius: 8px;
}
.pre-battle-screen.pb3 .pb2-enemy-image {
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}
.pre-battle-screen.pb3 .pb2-enemy-fallback { font-size: 4em; }
.pre-battle-screen.pb3 .pb2-enemy-level-badge-top {
  font-size: 0.6em !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
}
.pre-battle-screen.pb3 .pb2-enemy-element-badge {
  width: 24px !important; height: 24px !important;
  font-size: 0.95em !important;
}

.pre-battle-screen.pb3 .pb2-enemy-stats-overlay {
  flex: 0 0 auto;
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
  position: static;
}
.pre-battle-screen.pb3 .pb2-stat-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  font-size: 0.8em;
  font-weight: 700;
  color: #fff;
}
.pre-battle-screen.pb3 .pb2-stat-chip.win  { background: rgba(34,197,94,0.18); color: #86efac; }
.pre-battle-screen.pb3 .pb2-stat-chip.lose { background: rgba(239,68,68,0.16); color: #fca5a5; }

/* Hide passives — too noisy in this layout */
.pre-battle-screen.pb3 .pb2-mob-passives,
.pre-battle-screen.pb3 .pb2-mob-passives-mobile { display: none; }

/* ── Rewards strip (horizontal, below arena, hidden if too short) ── */
.pre-battle-screen.pb3 .pb3-rewards-strip {
  flex: 0 0 auto;
  min-height: 0;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-col {
  display: block;
  width: 100%;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-preview {
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: auto 1fr 2fr auto;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--pb3-edge);
  border-radius: 8px;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78em;
  font-weight: 700;
  color: #fde68a;
  padding: 0;
  border: none;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-divider { display: none; }
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section-label {
  font-size: 0.55em;
  letter-spacing: 0.5px;
  opacity: 0.7;
  text-transform: uppercase;
  margin: 0;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  font-size: 0.7em;
  font-weight: 700;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-badge.xp { background: rgba(168,85,247,0.18); color: #d8b4fe; }
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-badge.bronze { background: rgba(205,127,50,0.18); color: #fbbf77; }
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-icon { font-size: 0.85em; }
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-value { font-size: 0.95em; }
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-label { font-size: 0.7em; opacity: 0.8; }

.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-chest-grid {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--pb3-edge);
  font-size: 0.7em;
  font-weight: 700;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card-icon { font-size: 0.85em; }
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card-icon img {
  width: 14px !important; height: 14px !important;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card-range { font-size: 0.95em; }
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card-label { font-size: 0.65em; opacity: 0.75; }
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-locked {
  font-size: 0.7em;
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-tips {
  font-size: 0.6em;
  opacity: 0.7;
  text-align: right;
  white-space: nowrap;
  padding: 0;
}

/* ── Action buttons ── */
.pre-battle-screen.pb3 .pb2-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0;
}
.pre-battle-screen.pb3 .pb2-btn {
  flex: 1 1 0;
  padding: 8px 14px;
  font-size: 0.95em;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid var(--pb3-edge);
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s, transform 0.1s;
}
.pre-battle-screen.pb3 .pb2-btn:hover { background: rgba(255,255,255,0.12); }
.pre-battle-screen.pb3 .pb2-btn:active { transform: scale(0.98); }
.pre-battle-screen.pb3 .pb2-hint-btn {
  flex: 0 0 auto;
  background: rgba(168,85,247,0.18);
  border-color: rgba(168,85,247,0.4);
  color: #e9d5ff;
}
.pre-battle-screen.pb3 .pb2-fight-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #f59e0b;
  color: #1a1208;
  font-size: 1.05em;
}
.pre-battle-screen.pb3 .pb2-fight-btn:hover {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.pre-battle-screen.pb3 .pb2-fight-btn:disabled {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  cursor: not-allowed;
}
.pre-battle-screen.pb3 .pb2-hint-cost {
  font-size: 0.75em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,0.25);
}

/* ── Adaptive: hide rewards strip on short heights ── */
@media (max-height: 720px) {
  .pre-battle-screen.pb3 .pb3-rewards-strip { display: none; }
}
@media (max-height: 620px) {
  .pre-battle-screen.pb3 { padding: 6px; }
  .pre-battle-screen.pb3 .pb3-card { padding: 6px 8px; gap: 6px; }
}

/* ── Adaptive: tablet ── */
@media (max-width: 980px) {
  .pre-battle-screen.pb3 { left: 0; }
  .pre-battle-screen.pb3 .pb2-arena {
    grid-template-columns: 1fr clamp(90px, 14vw, 130px) 1fr;
  }
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-preview {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-tips { text-align: left; white-space: normal; }
}

/* ── Adaptive: mobile — layout handled by v5.2 block below ── */

/* ════════════════════════════════════════════════════════════════
   PRE-BATTLE v5.1 — patches on top of v5
   • Bigger top-bar offset so the popup never hides under the LEVEL bar.
   • Element icon moves to top-LEFT inside each gear card.
   • Drawer (item-picker popup) hides the per-card stats/durability
     so users see a clean grid of cards.
   • Enemy LVL / gear-tier badges live ABOVE the image (always visible).
   • Animated stat numbers (flash green/red on change).
   • Rewards strip: orange treasure-chest theme + soft pulse.
   ════════════════════════════════════════════════════════════════ */

.pre-battle-screen.pb3 {
  /* The top status bar is 56px and the level/XP progress sits inside it.
     Use a generous offset so NOTHING in the popup ever touches it,
     even when the resource sub-bar is open. */
  top: 96px !important;
  /* tighter horizontal feel */
  padding: 8px 12px;
}
body.has-resource-subbar-open .pre-battle-screen.pb3 {
  top: 134px !important; /* 56 (bar) + 38 (subbar) + 40 breathing room */
}
@media (max-height: 760px) {
  .pre-battle-screen.pb3 { top: 78px !important; }
  body.has-resource-subbar-open .pre-battle-screen.pb3 { top: 116px !important; }
}
@media (max-height: 600px) {
  .pre-battle-screen.pb3 { top: 64px !important; }
  body.has-resource-subbar-open .pre-battle-screen.pb3 { top: 100px !important; }
}

/* Element icon on each gear card → TOP-LEFT (was bottom). */
.pre-battle-screen.pb3 .pb2-slot { position: relative; }
.pre-battle-screen.pb3 .pb2-slot-element-overlay {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  right: auto !important;
  bottom: auto !important;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95em !important;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  z-index: 5;
  opacity: 1 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.pre-battle-screen.pb3 .pb2-slot-footer {
  /* No element here anymore — collapse footer height. */
  padding: 0 !important;
  min-height: 0;
  height: 0;
}

/* ── Drawer item picker: no in-card stats / durability — keep it clean ── */
.pb2-drawer-grid .gc-stats,
.pb2-drawer-grid .gc-dura,
.pb2-drawer-grid .gc-broken-badge { display: none !important; }
.pb2-drawer-current .gc-stats,
.pb2-drawer-current .gc-dura { display: none !important; }

/* ── Enemy badges above image (never hidden) ── */
.pre-battle-screen.pb3 .pb3-enemy-top-badges {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  flex: 0 0 auto;
  padding: 2px 0 4px;
}
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  font-size: 0.7em;
  font-weight: 700;
  border-radius: 5px;
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #fde68a;
  border: 1px solid rgba(253, 230, 138, 0.4);
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge.gear-tier {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
/* Hide the legacy floating badge if rendered anywhere */
.pre-battle-screen.pb3 .pb2-enemy-image-wrap > div[style*="position: absolute"][style*="top: -12px"] { display: none !important; }

/* ── Animated stat numbers ── */
.pb3-anim-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s, text-shadow 0.25s, transform 0.18s;
}
.pb3-anim-num.flash-up {
  color: #4ade80 !important;
  text-shadow: 0 0 12px rgba(74, 222, 128, 0.65);
  transform: translateY(-2px);
}
.pb3-anim-num.flash-down {
  color: #f87171 !important;
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.65);
  transform: translateY(2px);
}

/* ── Rewards strip: ORANGE treasure-chest theme ── */
@keyframes pb3-reward-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.0), 0 4px 18px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18), 0 4px 24px rgba(245, 158, 11, 0.35); }
}
@keyframes pb3-reward-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-preview {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg,
      rgba(245, 158, 11, 0.16) 0%,
      rgba(180, 83, 9, 0.18) 50%,
      rgba(245, 158, 11, 0.16) 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 10px;
  animation: pb3-reward-pulse 2.6s ease-in-out infinite;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 220, 130, 0.18) 48%,
    rgba(255, 220, 130, 0.30) 50%,
    rgba(255, 220, 130, 0.18) 52%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: pb3-reward-shimmer 4.5s linear infinite;
  pointer-events: none;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-header {
  color: #fde68a;
  text-shadow: 0 0 8px rgba(253, 230, 138, 0.4);
  font-weight: 800;
  letter-spacing: 0.5px;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-header-icon {
  font-size: 1.1em;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7));
  animation: pb3-trophy-bounce 2s ease-in-out infinite;
}
@keyframes pb3-trophy-bounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-2px) rotate(2deg); }
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(180, 83, 9, 0.4));
  color: #fff;
  border: 1px solid rgba(255, 220, 130, 0.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-badge.xp {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(126, 34, 206, 0.45));
  color: #fff;
  border-color: rgba(216, 180, 254, 0.5);
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(120, 53, 15, 0.28));
  border: 1px solid rgba(255, 220, 130, 0.4);
  color: #fff7e6;
  position: relative;
  transition: transform 0.18s, box-shadow 0.18s;
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45);
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card.tlrpg {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(20, 83, 45, 0.35));
  border-color: rgba(134, 239, 172, 0.5);
}
.pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card-icon {
  filter: drop-shadow(0 0 4px rgba(255, 220, 130, 0.6));
}

/* ── Tighter compact tweaks for shorter top reach ── */
.pre-battle-screen.pb3 .pb3-card { padding: 6px 8px; gap: 6px; }
.pre-battle-screen.pb3 .pb2-arena { gap: 6px; }

/* If still too tall on short screens, reveal-side scroll only the rewards */
@media (max-height: 700px) {
  .pre-battle-screen.pb3 .pb3-rewards-strip { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   PRE-BATTLE v5.2 — element-inside, mob badges row, mobile polish
   ════════════════════════════════════════════════════════════════ */

/* (1) Hide is handled by removing the JSX — no CSS needed for hint */

/* (2) Element icon: KEEP it inside the card on hover too. */
.pre-battle-screen.pb3 .pb2-slot { overflow: hidden; }
.pre-battle-screen.pb3 .pb2-slot-element-overlay {
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0.85em !important;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  z-index: 6;
  opacity: 1 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
  pointer-events: none;
}
.pre-battle-screen.pb3 .pb2-slot:hover .pb2-slot-element-overlay {
  transform: none !important;
  opacity: 1 !important;
}

/* (3) Mob badges row — full mob meta inline next to LVL/T */
.pre-battle-screen.pb3 .pb3-enemy-top-badges {
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 4px 6px;
  justify-content: center;
}
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge { font-size: 0.65em; padding: 2px 7px; }
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge.element[data-element="fire"]  { color: #fca5a5; border-color: rgba(239,68,68,0.45); background: linear-gradient(135deg, rgba(127,29,29,0.55), rgba(60,10,10,0.7)); }
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge.element[data-element="water"] { color: #93c5fd; border-color: rgba(59,130,246,0.45); background: linear-gradient(135deg, rgba(30,58,138,0.55), rgba(15,30,80,0.7)); }
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge.element[data-element="earth"] { color: #fde68a; border-color: rgba(180,83,9,0.55);  background: linear-gradient(135deg, rgba(120,53,15,0.55), rgba(60,30,5,0.7)); }
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge.element[data-element="air"]   { color: #c4b5fd; border-color: rgba(139,92,246,0.45); background: linear-gradient(135deg, rgba(76,29,149,0.55), rgba(40,20,80,0.7)); }
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge.mclass     { background: linear-gradient(135deg, #4338ca, #312e81); color: #e0e7ff; border-color: rgba(199,210,254,0.4); }
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge.difficulty { font-weight: 800; text-transform: uppercase; }
.pre-battle-screen.pb3 .pb3-enemy-lvl-badge.elite      { background: linear-gradient(135deg, #ca8a04, #713f12); color: #fef3c7; border-color: rgba(254,243,199,0.45); }

/* Hide the legacy badges row inside enemy info (we moved them up) */
.pre-battle-screen.pb3 .pb2-enemy-info .pb2-enemy-badges { display: none !important; }

/* (4) MOBILE OPTIMIZATION
   ──────────────────────────────────────────────────────────
   Layout logic:
     • Tablet (≤768px): full-screen overlay, sidebar hidden.
     • Phone (≤640px): 2-col top row [enemy | center stats] +
       full-width player equipment row below. Enemy image is
       compact (≤140px) so nothing needs scrolling on typical
       phones. Equipment is 3 cols × 2 rows instead of 2 × 3
       (same 6 slots, significantly shorter total height).
       Rewards strip shows only guaranteed XP/Bronze (one line).
     • Very small (≤380px): slight further compression.
   ──────────────────────────────────────────────────────────
*/
/* ── Pre-battle mobile chrome fixes ──────────────────────────────────────
   1. th-mobile-bottom (z-index 210, position:fixed bottom:0) is NOT hidden
      by the b4-root rule during pre-battle (b4-root only exists in the arena).
      Hide it here so it doesn't cover the Fight button.
   2. Safe-area padding on the fight-buttons row for iPhone notch/home bar.
   3. Correct top offset: header is 56px (≤768) / 44px (≤480), not 60px.
   ─────────────────────────────────────────────────────────────────────── */
body:has(.pre-battle-screen.pb3) .th-mobile-bottom { display: none !important; }

@media (max-width: 768px) {
  .pre-battle-screen.pb3 {
    top: 56px !important;   /* matches .th-header { height: 56px } */
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3px;
    padding-bottom: max(3px, env(safe-area-inset-bottom, 3px));
    font-size: clamp(11px, 3.5vw, 14px);
  }
  body.has-resource-subbar-open .pre-battle-screen.pb3 { top: 92px !important; }
  /* Give the fight-button row a safe-area inset so it's never hidden under
     the iPhone home indicator */
  .pre-battle-screen.pb3 .pb2-actions {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}
@media (max-width: 480px) {
  /* Header shrinks to 44px on small phones */
  .pre-battle-screen.pb3 { top: 44px !important; }
  body.has-resource-subbar-open .pre-battle-screen.pb3 { top: 80px !important; }
}

@media (max-width: 640px) {
  .pre-battle-screen.pb3 .pb3-card {
    padding: 4px;
    gap: 4px;
    /* header / arena / rewards / actions — arena fills remaining space */
    grid-template-rows: auto 1fr auto auto;
  }

  /* Header tighter */
  .pre-battle-screen.pb3 .pb2-header { padding-bottom: 4px; }
  .pre-battle-screen.pb3 .pb2-title  { font-size: 1em; }

  /* ── Arena: 2-col grid — [enemy | center] over [player player] ── */
  .pre-battle-screen.pb3 .pb2-arena {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "enemy center"
      "player player";
    gap: 4px;
    align-items: stretch;
    /* Overflow only if content truly overflows; avoids dead blank space */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  .pre-battle-screen.pb3 .pb2-enemy-side  { grid-area: enemy;  overflow: hidden; }
  .pre-battle-screen.pb3 .pb2-center      { grid-area: center; overflow: hidden; }
  .pre-battle-screen.pb3 .pb2-player-side { grid-area: player; overflow: visible; }

  /* ── Enemy column: compact image ── */
  .pre-battle-screen.pb3 .pb2-enemy-side .pb2-combatant-header {
    padding: 3px 6px;
  }
  .pre-battle-screen.pb3 .pb2-enemy-image-wrap.enlarged,
  .pre-battle-screen.pb3 .pb2-enemy-image-wrap {
    flex: 0 0 auto;
    height: 120px;
    max-height: 140px;
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
  }
  .pre-battle-screen.pb3 .pb2-enemy-image { max-height: 100%; border-radius: 8px; }
  /* Badges above image: wrap tightly */
  .pre-battle-screen.pb3 .pb3-enemy-top-badges {
    gap: 3px;
    padding: 2px 0 4px;
  }
  .pre-battle-screen.pb3 .pb3-enemy-lvl-badge { font-size: 0.58em; padding: 1px 5px; }
  /* Enemy stats overlay: below image, single row */
  .pre-battle-screen.pb3 .pb2-enemy-stats-overlay {
    gap: 3px;
    flex-wrap: nowrap;
    justify-content: center;
    margin-top: 4px;
  }
  .pre-battle-screen.pb3 .pb2-stat-chip { padding: 3px 5px; font-size: 0.68em; gap: 2px; }

  /* ── Center column: vertical — power dial + win% + matchup pills ── */
  .pre-battle-screen.pb3 .pb2-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 4px;
    height: 100%;
    box-sizing: border-box;
  }
  .pre-battle-screen.pb3 .pb2-power-ring { width: 82px !important; height: 82px !important; }
  .pre-battle-screen.pb3 .pb2-power-ring-num { font-size: 1.15em; }
  .pre-battle-screen.pb3 .pb2-win-chip { padding: 3px 8px; min-width: 56px; }
  .pre-battle-screen.pb3 .pb2-win-chip-pct { font-size: 0.85em; }
  .pre-battle-screen.pb3 .pb2-matchup-summary { gap: 3px; }
  .pre-battle-screen.pb3 .pb2-mm-pill { font-size: 0.52em; padding: 2px 5px; }

  /* ── Player column: 3-col equipment (6 slots = 2 rows) ── */
  .pre-battle-screen.pb3 .pb2-player-side .pb2-combatant-header {
    padding: 3px 6px;
  }
  .pre-battle-screen.pb3 .pb2-equipment-col {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(82px, 1fr);
    gap: 6px;
  }
  .pre-battle-screen.pb3 .pb2-slot {
    min-height: 82px;
    padding: 5px 5px 7px;
    font-size: 0.78em;
  }
  /* Slot element badge smaller */
  .pre-battle-screen.pb3 .pb2-slot-element-overlay {
    width: 15px !important;
    height: 15px !important;
    font-size: 0.68em !important;
  }
  /* Player stat pills below equipment */
  .pre-battle-screen.pb3 .pb2-stat { padding: 4px 6px; font-size: 0.74em; gap: 3px; }

  /* ── Rewards strip: compact single-line (guaranteed only) ── */
  .pre-battle-screen.pb3 .pb3-rewards-strip { display: block; }
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-preview {
    grid-template-columns: auto 1fr;
    gap: 6px;
    padding: 5px 8px;
    align-items: center;
  }
  /* Hide chest grid, divider, and tips on phones — keep only guaranteed badges */
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-divider,
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-tips,
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section:last-of-type { display: none; }
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0;
  }
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section-label { display: none; }
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-row { flex-wrap: nowrap; gap: 4px; }
  .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-badge { font-size: 0.65em; padding: 3px 6px; }

  /* ── Action: full-width fight button ── */
  .pre-battle-screen.pb3 .pb2-actions { padding: 0; gap: 6px; }
  .pre-battle-screen.pb3 .pb2-fight-btn {
    flex: 1 1 100%;
    padding: 11px 14px;
    font-size: 1.05em;
    border-radius: 10px;
  }
}

/* ── Very small phones (≤380px) ── */
@media (max-width: 380px) {
  .pre-battle-screen.pb3 .pb2-arena {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }
  .pre-battle-screen.pb3 .pb2-power-ring { width: 72px !important; height: 72px !important; }
  .pre-battle-screen.pb3 .pb2-power-ring-num { font-size: 1em; }
  .pre-battle-screen.pb3 .pb2-equipment-col { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .pre-battle-screen.pb3 .pb2-slot { font-size: 0.62em; }
  .pre-battle-screen.pb3 .pb3-enemy-lvl-badge { font-size: 0.55em; padding: 1px 4px; }
  .pre-battle-screen.pb3 .pb2-enemy-image-wrap.enlarged,
  .pre-battle-screen.pb3 .pb2-enemy-image-wrap { height: 100px; max-height: 120px; }
}

/* Re-enable rewards strip on mobile even on short-height screens
   (layout uses grid rows, not vh-fit, so scroll is the safety net) */
@media (max-width: 640px) and (max-height: 700px) {
  .pre-battle-screen.pb3 .pb3-rewards-strip { display: block; }
}
/* Hide rewards on extremely short screens (landscape phones) */
@media (max-width: 640px) and (max-height: 480px) {
  .pre-battle-screen.pb3 .pb3-rewards-strip { display: none; }
}

/* ── Non-mobile pre-battle layout ────────────────────────────────────
   `position: fixed` is VIEWPORT-relative here because battle4.css sets
   `animation: none` on `.th-page-fade`, removing the transform that would
   otherwise create a containing block.

   Sidebar widths (from TestHeader.tsx responsive CSS):
     ≥ 900px  → .th-sidebar = 200px  (full sidebar)
     769–900px → .th-sidebar = 52px   (auto-collapsed at max-width:900px)
     ≤ 768px  → mobile slide-out (hidden, left: 0)

   Battle header height: 40px (set by battle4.css)
   ─────────────────────────────────────────────────────────────────── */

/* Tablet: 769–900px — sidebar auto-collapsed to 52px */
@media (min-width: 769px) {
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 {
    position: fixed !important;
    top: 40px !important;
    left: 52px !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 6px 8px !important;
    align-items: stretch !important;
    justify-content: center !important;
    background: #0a0c10 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Card: fill the entire fixed area, no max-width centering gap */
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-card {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    grid-template-rows: auto 1fr auto auto !important;
    gap: 6px !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-arena {
    grid-template-columns: 1fr clamp(140px, 13vw, 190px) 1fr !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-player-side,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-enemy-side {
    overflow: visible !important;
    min-height: 0 !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-combatant {
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Equipment: 2 cols × 3 rows; show ALL 6 slots without scroll */
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-equipment-col {
    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: 6px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-slot {
    min-height: 0 !important;
    padding: 5px 5px 6px !important;
    font-size: 0.78em !important;
    overflow: hidden !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-slot-visual {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-slot-img {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-slot-dura {
    left: 4px !important;
    right: 4px !important;
    bottom: 4px !important;
  }

  /* ── Victory rewards strip: COMPACT single horizontal line ── */
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip {
    flex: 0 0 auto !important;
  }
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-preview {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 10px !important;
    min-height: 0 !important;
  }
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-header {
    flex: 0 0 auto !important;
    font-size: 0.72em !important;
    white-space: nowrap !important;
  }
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section {
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-row,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-chest-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-badge,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-chest-card {
    padding: 3px 7px !important;
    font-size: 0.7em !important;
    white-space: nowrap !important;
  }
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section-label {
    font-size: 0.55em !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-tips {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    font-size: 0.62em !important;
  }

  .pre-battle-screen.pb3 .pb2-hint-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    z-index: 30000 !important;
    background:
      radial-gradient(ellipse at center, rgba(247,160,15,0.08), rgba(5,7,13,0.86) 60%),
      rgba(5, 7, 13, 0.86) !important;
  }

  .pre-battle-screen.pb3 .pb2-hint-modal {
    width: min(540px, calc(100vw - 40px)) !important;
    max-height: min(86vh, 760px) !important;
    margin: 0 !important;
    background: linear-gradient(180deg, #1c1826 0%, #0f1219 100%) !important;
    border: 1px solid rgba(247,160,15,0.42) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow:
      0 26px 70px rgba(0,0,0,0.72),
      0 0 0 1px rgba(247,160,15,0.22),
      0 0 44px rgba(247,160,15,0.22) !important;
  }

  .pre-battle-screen.pb3 .pb2-hint-modal-header {
    padding: 14px 16px 12px !important;
    background: linear-gradient(180deg, rgba(247,160,15,0.18), rgba(247,160,15,0.06)) !important;
    border-bottom: 1px solid rgba(247,160,15,0.26) !important;
  }

  .pre-battle-screen.pb3 .pb2-hint-modal-title,
  .pre-battle-screen.pb3 .pb2-repair-modal-title {
    color: #ffd789 !important;
    font-size: 1.02rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  }

  .pre-battle-screen.pb3 .pb2-hint-modal-close {
    border: 1px solid rgba(247,160,15,0.38) !important;
    background: rgba(247,160,15,0.14) !important;
    color: #ffe7bf !important;
  }

  .pre-battle-screen.pb3 .pb2-hint-modal-body {
    padding: 14px 16px !important;
  }

  .pre-battle-screen.pb3 .pb2-repair-modal {
    width: min(470px, calc(100vw - 40px)) !important;
  }

  .pre-battle-screen.pb3 .pb2-repair-meta,
  .pre-battle-screen.pb3 .pb2-repair-cost-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
    border: 1px solid rgba(247,160,15,0.28) !important;
  }

  .pre-battle-screen.pb3 .pb2-repair-cost-title {
    color: #ffcf7e !important;
  }

  .pre-battle-screen.pb3 .pb2-repair-btn-cancel {
    border: 1px solid rgba(255,255,255,0.28) !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
  }

  .pre-battle-screen.pb3 .pb2-repair-btn-confirm {
    border: 1px solid rgba(255,231,168,0.38) !important;
    background: linear-gradient(135deg, #f7a00f, #db7d00) !important;
    color: #1f1403 !important;
    box-shadow: 0 9px 24px rgba(219,125,0,0.42) !important;
  }
}

/* Desktop: ≥900px — full sidebar 200px */
@media (min-width: 900px) {
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 {
    left: 200px !important;
  }
  /* User-toggled collapsed sidebar */
  body.sidebar-collapsed:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 {
    left: 52px !important;
  }
  body:not(.has-sidebar):has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 {
    left: 0 !important;
  }
}

/* =====================================================
   STAGE MOB PREVIEW CARDS (Battle4 Hub)
   ===================================================== */
.stage-mob-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.smc-banner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top right, rgba(239, 68, 68, 0.10), transparent 60%),
    linear-gradient(135deg, rgba(15, 15, 25, 0.85), rgba(30, 20, 40, 0.75));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.smc-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.smc-banner-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.smc-banner-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px currentColor;
}

.smc-elem-icon {
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px currentColor);
}

.smc-banner-counter {
  position: relative;
}

.smc-banner-bonus {
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 5px;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
  text-shadow: none;
}

.smc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 720px) {
  .smc-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
  .smc-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
}

.smc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 20, 30, 0.8), rgba(10, 10, 18, 0.92));
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}
.smc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.05), transparent 60%);
  pointer-events: none;
}
.smc-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(255, 255, 255, 0.08);
}

.smc-card.smc-elite {
  background: linear-gradient(180deg, rgba(45, 30, 60, 0.85), rgba(15, 10, 25, 0.95));
}
.smc-card.smc-elite::before {
  background: radial-gradient(ellipse at top, rgba(255, 215, 0, 0.12), transparent 60%);
}

.smc-card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(40, 40, 50, 0.6), rgba(20, 20, 30, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
}

.smc-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.smc-card-fallback {
  font-size: 2.4rem;
  opacity: 0.6;
}

.smc-card-element-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.smc-card-elite-crown {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 1rem;
  filter: drop-shadow(0 0 4px gold);
  animation: smc-crown-bounce 2s ease-in-out infinite;
}
@keyframes smc-crown-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.smc-card-body {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.smc-card-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.smc-card-diff {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 6px currentColor;
}

/* =====================================================
   RECENT DROPS — BLACKISH IN-STAGE STYLING
   ===================================================== */
.stage-card .b3-recent-drops-inline {
  background: linear-gradient(180deg, rgba(8, 8, 14, 0.92), rgba(2, 2, 6, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage-card .b3-recent-drops-inline .wbs-live-feed-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.stage-card .b3-recent-drops-inline .wbs-live-feed-header h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.stage-card .b3-recent-drops-inline .wbs-live-feed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.stage-card .b3-recent-drops-inline .wbs-live-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
}
.stage-card .b3-recent-drops-inline .wbs-live-item.wbs-live-new {
  background: rgba(255, 215, 0, 0.06);
  border-color: rgba(255, 215, 0, 0.18);
}
.stage-card .b3-recent-drops-inline .wbs-live-empty {
  text-align: center;
  padding: 14px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
}
.stage-card .b3-recent-drops-inline .wbs-live-player {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-card .b3-recent-drops-inline .wbs-live-tier {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}
.stage-card .b3-recent-drops-inline .wbs-live-time {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.65rem;
}

/* Start-fight-prizes button accent */
.start-fight-btn.btn-prizes {
  background: linear-gradient(135deg, #f97316, #facc15) !important;
  color: #1a0e00 !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 20px rgba(250, 204, 21, 0.35), 0 0 12px rgba(249, 115, 22, 0.4);
}
.start-fight-btn.btn-prizes:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* =====================================================
   STAGE MOB CARDS — HORIZONTAL STACKED STRIP
   ===================================================== */
.stage-mob-cards-horizontal .smc-strip-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 14px 4px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}
.stage-mob-cards-horizontal .smc-strip-wrap::-webkit-scrollbar { height: 6px; }
.stage-mob-cards-horizontal .smc-strip-wrap::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}

.stage-mob-cards-horizontal .smc-strip {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0 8px;
  min-width: max-content;
}

.stage-mob-cards-horizontal .smc-tile {
  flex: 0 0 auto;
  position: relative;
  width: 130px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 10px;
  margin-left: -22px; /* overlap to "stack into each other" */
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,20,30,0.92), rgba(8,8,16,0.96));
  border: 2px solid var(--diff-color, #666);
  box-shadow:
    0 8px 22px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 18px color-mix(in srgb, var(--diff-color, #666) 25%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0s;
  cursor: default;
  isolation: isolate;
}
.stage-mob-cards-horizontal .smc-tile:first-child { margin-left: 0; }

.stage-mob-cards-horizontal .smc-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--diff-color, #666) 22%, transparent) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.stage-mob-cards-horizontal .smc-tile:hover {
  transform: translateY(-6px) scale(1.06);
  z-index: 99 !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 28px color-mix(in srgb, var(--diff-color, #666) 55%, transparent);
}

.stage-mob-cards-horizontal .smc-tile.smc-elite {
  border-color: gold;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,215,0,0.25) inset,
    0 0 22px rgba(255,215,0,0.3);
}

.stage-mob-cards-horizontal .smc-tile-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(40,40,50,0.6), rgba(15,15,22,0.95));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.stage-mob-cards-horizontal .smc-tile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.stage-mob-cards-horizontal .smc-tile:hover .smc-tile-image {
  transform: scale(1.08);
}
.stage-mob-cards-horizontal .smc-tile-fallback {
  font-size: 2.4rem;
  opacity: 0.6;
}
.stage-mob-cards-horizontal .smc-tile-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--diff-color, #666) 35%, transparent) 100%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.stage-mob-cards-horizontal .smc-tile-element-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.85);
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.stage-mob-cards-horizontal .smc-tile-elite-crown {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 1rem;
  filter: drop-shadow(0 0 4px gold);
  z-index: 2;
  animation: smc-crown-bounce 2s ease-in-out infinite;
}

.stage-mob-cards-horizontal .smc-tile-body {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}
.stage-mob-cards-horizontal .smc-tile-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.stage-mob-cards-horizontal .smc-tile-diff {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 6px currentColor;
}

@media (max-width: 480px) {
  .stage-mob-cards-horizontal .smc-tile { width: 110px; margin-left: -18px; padding: 6px 6px 8px; }
  .stage-mob-cards-horizontal .smc-tile-name { font-size: 0.62rem; }
  .stage-mob-cards-horizontal .smc-tile-diff { font-size: 0.55rem; }
}

/* Override the original grid layout so stacked horizontal style takes over */
.stage-mob-cards-horizontal .smc-grid { display: none; }

/* =====================================================
   RECENT DROPS — EXACT REWARD AMOUNT FORMATTING
   ===================================================== */
.stage-card .b3-recent-drops-inline .wbs-live-reward-detail {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.stage-card .b3-recent-drops-inline .wbs-live-reward-detail .wbs-live-reward-num {
  color: #fbbf24;
  font-size: 0.78rem;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
  margin-right: 4px;
}
.stage-card .b3-recent-drops-inline .wbs-live-reward-detail.tlrpg .wbs-live-reward-num {
  color: #a78bfa;
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
}
.stage-card .b3-recent-drops-inline .wbs-live-item {
  grid-template-columns: 1fr auto auto auto;
}

/* =====================================================
   START FIGHT BUTTON WRAP — centered above bounty board
   ===================================================== */
.start-fight-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0 14px;
}
.start-fight-wrap .start-fight-btn {
  max-width: 560px;
  width: 100%;
  text-align: center;
}

/* =====================================================
   STAGE MOB CARDS — center the strip + new element panel
   ===================================================== */
.stage-mob-cards-horizontal .smc-strip-wrap {
  display: flex;
  justify-content: center;
}
.stage-mob-cards-horizontal .smc-strip {
  margin: 0 auto;
}

.smc-element-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  margin: 6px auto 4px;
  max-width: 720px;
  padding: 10px 14px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top, rgba(247, 160, 15, 0.08), transparent 65%),
    linear-gradient(145deg, rgba(12, 14, 20, 0.97), rgba(8, 10, 14, 0.99));
  border: 1px solid rgba(247, 160, 15, 0.22);
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}
.smc-element-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 8px;
  min-width: 0;
}
.smc-element-cell__label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 160, 15, 0.85);
  text-shadow: 0 0 6px rgba(247, 160, 15, 0.25);
  white-space: nowrap;
}
.smc-element-cell__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  border: 1px solid currentColor;
  text-shadow: 0 0 10px currentColor;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 0 14px color-mix(in srgb, currentColor 30%, transparent);
}
.smc-element-cell__icon {
  font-size: 1rem;
  filter: drop-shadow(0 0 6px currentColor);
}
.smc-element-cell__bonus {
  margin-left: 4px;
  padding: 2px 7px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 5px;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.45);
  text-shadow: none;
}
.smc-element-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 4px;
}
.smc-element-divider::before,
.smc-element-divider::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 38%;
  background: linear-gradient(to bottom, transparent, rgba(247, 160, 15, 0.35), transparent);
  transform: translateX(-50%);
}
.smc-element-divider::before { top: 0; }
.smc-element-divider::after { bottom: 0; }
.smc-element-divider__icon {
  font-size: 0.95rem;
  filter: drop-shadow(0 0 6px rgba(247, 160, 15, 0.5));
  opacity: 0.85;
}
@media (max-width: 480px) {
  .smc-element-panel {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 10px;
  }
  .smc-element-divider { display: none; }
  .smc-element-cell__value { font-size: 0.78rem; }
}

/* =====================================================
   COMPACT RECENT DROPS — for DailyQuestsBar TLRPG split panel
   ===================================================== */
.b3-recent-drops-inline--compact {
  width: 100%;
  margin: 0;
  padding: 6px 4px 4px;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.b3-recent-drops-inline--compact .wbs-live-feed-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
}
.b3-recent-drops-inline--compact .wbs-live-feed-header h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: #f7a00f;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.b3-recent-drops-inline--compact .wbs-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
  animation: dq-rd-pulse 1.4s ease-in-out infinite;
}
@keyframes dq-rd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.b3-recent-drops-inline--compact .wbs-live-feed-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 168px;
  overflow-y: auto;
  padding-right: 2px;
}
.b3-recent-drops-inline--compact .wbs-live-feed-list::-webkit-scrollbar { width: 4px; }
.b3-recent-drops-inline--compact .wbs-live-feed-list::-webkit-scrollbar-thumb {
  background: rgba(247, 160, 15, 0.35);
  border-radius: 2px;
}
.b3-recent-drops-inline--compact .wbs-live-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.55rem;
}
.b3-recent-drops-inline--compact .wbs-live-item.wbs-live-new {
  border-color: rgba(247, 160, 15, 0.35);
  background: rgba(247, 160, 15, 0.08);
}
.b3-recent-drops-inline--compact .wbs-live-player {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.b3-recent-drops-inline--compact .wbs-live-reward-detail {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}
.b3-recent-drops-inline--compact .wbs-live-reward-num {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 0.6rem;
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
}
.b3-recent-drops-inline--compact .wbs-live-reward-detail.tlrpg .wbs-live-reward-num {
  color: #a78bfa;
  text-shadow: 0 0 6px rgba(167, 139, 250, 0.5);
}
.b3-recent-drops-inline--compact .wbs-live-reward-label {
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}
.b3-recent-drops-inline--compact .wbs-live-tier,
.b3-recent-drops-inline--compact .wbs-live-time {
  display: none;
}
.b3-recent-drops-inline--compact .wbs-live-empty {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  padding: 12px 4px;
}

/* =====================================================
   STAGE HEADER — themed, blackish gradient with chip + name
   ===================================================== */
.stage-header.stage-header--themed {
  position: relative;
  text-align: center;
  padding: 14px 16px 12px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top, rgba(247, 160, 15, 0.10), transparent 65%),
    linear-gradient(160deg, rgba(8, 9, 14, 0.98), rgba(14, 16, 24, 0.96) 55%, rgba(8, 9, 14, 0.98));
  border: 1px solid rgba(247, 160, 15, 0.22);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.stage-header.stage-header--themed::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(247, 160, 15, 0.65), transparent);
  pointer-events: none;
}
.stage-header.stage-header--themed::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(247, 160, 15, 0.35), transparent);
  pointer-events: none;
}
.stage-header__deco {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 8% 50%, rgba(247, 160, 15, 0.05) 0, transparent 28%),
    radial-gradient(circle at 92% 50%, rgba(167, 139, 250, 0.05) 0, transparent 28%);
  pointer-events: none;
}
.stage-header.stage-header--themed .stage-header__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.stage-header__chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffd166;
  background: linear-gradient(135deg, rgba(247, 160, 15, 0.22), rgba(247, 160, 15, 0.06));
  border: 1px solid rgba(247, 160, 15, 0.55);
  border-radius: 999px;
  box-shadow:
    0 0 14px rgba(247, 160, 15, 0.25),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  text-shadow: 0 0 8px rgba(247, 160, 15, 0.4);
}
.stage-header__name {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(180deg, #ffe9a8 0%, #f7a00f 60%, #c87800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(247, 160, 15, 0.35));
}

/* =====================================================
   REWARD PREVIEW — below Start Fight button
   ===================================================== */
.sc-reward-preview {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at top, rgba(247, 160, 15, 0.06), transparent 60%),
    linear-gradient(145deg, rgba(10, 12, 18, 0.98), rgba(6, 8, 12, 0.99));
  border: 1px solid rgba(247, 160, 15, 0.18);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  margin: -4px 0 0;
}
.sc-rp-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.sc-rp-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f7a00f;
  text-shadow: 0 0 8px rgba(247, 160, 15, 0.3);
}
.sc-rp-header-icon { font-size: 0.85rem; filter: drop-shadow(0 0 4px currentColor); }
.sc-rp-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(to bottom, transparent, rgba(247, 160, 15, 0.35), transparent);
}
.sc-rp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sc-rp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sc-rp-badge-icon { font-size: 0.95rem; }
.sc-rp-badge-value {
  font-weight: 800;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
  font-size: 0.6rem;
}
.sc-rp-badge-label {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}
.sc-rp-badge--xp { border-color: rgba(168, 85, 247, 0.35); }
.sc-rp-badge--xp .sc-rp-badge-icon { color: #c084fc; filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.5)); }
.sc-rp-badge--bronze { border-color: rgba(251, 191, 36, 0.35); }
.sc-rp-badge--bronze .sc-rp-badge-icon { filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5)); }
.sc-rp-chest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 6px;
}
.sc-rp-chest-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20, 22, 30, 0.85), rgba(8, 10, 16, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.sc-rp-chest-icon {
  font-size: 1.05rem;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sc-rp-chest-icon img { width: 18px; height: 18px; border-radius: 50%; }
.sc-rp-chest-range {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 0.62rem;
  color: #ffd166;
  letter-spacing: 0.02em;
}
.sc-rp-chest-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.sc-rp-chest-card--tlrpg { border-color: rgba(167, 139, 250, 0.4); }
.sc-rp-chest-card--tlrpg .sc-rp-chest-range { color: #c4b5fd; }
.sc-rp-chest-card--bronze { border-color: rgba(251, 191, 36, 0.3); }
.sc-rp-chest-card--resource { border-color: rgba(120, 113, 108, 0.4); }
.sc-rp-chest-card--armory { border-color: rgba(239, 68, 68, 0.35); }
.sc-rp-chest-loading {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.35);
  padding: 10px;
  text-align: center;
}
@media (max-width: 560px) {
  .sc-reward-preview { grid-template-columns: 1fr; }
  .sc-rp-divider { width: auto; height: 1px; background: linear-gradient(to right, transparent, rgba(247, 160, 15, 0.35), transparent); }
}

/* =====================================================
   BOUNTY BOARD — sub text + embedded mobs section
   ===================================================== */
.bounty-board h4 .bounty-board-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-left: 6px;
}
.bb-mobs-embed {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(247, 160, 15, 0.15);
}
.bb-mobs-embed .stage-mob-cards { gap: 10px; }
.bb-mobs-embed .smc-strip-wrap { padding: 6px 4px 12px; }
.bb-mobs-embed .smc-element-panel {
  margin-top: 0;
  margin-bottom: 8px;
}

/* =====================================================
   COMPACT ELEMENT PANEL — smaller, cooler
   ===================================================== */
.smc-element-panel--compact {
  padding: 6px 10px;
  max-width: 540px;
  gap: 6px;
  border-radius: 10px;
}
.smc-element-panel--compact .smc-element-cell { padding: 2px 4px; gap: 3px; }
.smc-element-panel--compact .smc-element-cell__label { font-size: 0.5rem; letter-spacing: 0.1em; }
.smc-element-panel--compact .smc-element-cell__value {
  padding: 3px 9px;
  font-size: 0.7rem;
  gap: 4px;
}
.smc-element-panel--compact .smc-element-cell__icon { font-size: 0.85rem; }
.smc-element-panel--compact .smc-element-cell__bonus {
  padding: 1px 5px;
  font-size: 0.5rem;
  margin-left: 3px;
}
.smc-element-panel--compact .smc-element-divider__icon { font-size: 0.78rem; }

/* =====================================================
   ELEMENT BEATS CHAIN — replaces "→" arrows
   ===================================================== */
.smc-beats-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  margin: 8px auto 0;
  max-width: 580px;
  padding: 6px 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.smc-beats-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.smc-beats-elem {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid currentColor;
  text-shadow: 0 0 6px currentColor;
  box-shadow: 0 0 8px color-mix(in srgb, currentColor 22%, transparent);
}
.smc-beats-elem--loop { opacity: 0.55; filter: saturate(0.85); }
.smc-beats-icon { font-size: 0.78rem; filter: drop-shadow(0 0 4px currentColor); }
.smc-beats-word {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  position: relative;
  padding: 0 2px;
}
.smc-beats-word::before,
.smc-beats-word::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 1px;
  background: rgba(247, 160, 15, 0.4);
  margin: 0 3px;
}

/* =====================================================
   REWARD PREVIEW — chest card color overrides
   (TLRPG gold, Bronze bronze, Armory grey like Resources)
   ===================================================== */
.sc-rp-chest-card.sc-rp-chest-card--tlrpg {
  border-color: rgba(255, 215, 0, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 215, 0, 0.12), rgba(255, 215, 0, 0.03)),
    linear-gradient(180deg, rgba(20, 22, 30, 0.85), rgba(8, 10, 16, 0.95));
  box-shadow:
    0 0 14px rgba(255, 215, 0, 0.18),
    inset 0 1px 0 rgba(255, 224, 102, 0.18);
}
.sc-rp-chest-card.sc-rp-chest-card--tlrpg .sc-rp-chest-range {
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.sc-rp-chest-card.sc-rp-chest-card--bronze {
  border-color: rgba(205, 127, 50, 0.45);
  background:
    linear-gradient(180deg, rgba(205, 127, 50, 0.10), rgba(205, 127, 50, 0.02)),
    linear-gradient(180deg, rgba(20, 22, 30, 0.85), rgba(8, 10, 16, 0.95));
  box-shadow:
    0 0 12px rgba(205, 127, 50, 0.18),
    inset 0 1px 0 rgba(224, 176, 122, 0.15);
}
.sc-rp-chest-card.sc-rp-chest-card--bronze .sc-rp-chest-range {
  color: #e0b07a;
  text-shadow: 0 0 6px rgba(205, 127, 50, 0.4);
}

.sc-rp-chest-card.sc-rp-chest-card--armory {
  border-color: rgba(120, 113, 108, 0.4);
  background: linear-gradient(180deg, rgba(20, 22, 30, 0.85), rgba(8, 10, 16, 0.95));
  box-shadow: none;
}
.sc-rp-chest-card.sc-rp-chest-card--armory .sc-rp-chest-range {
  color: #cbd5e1;
  text-shadow: none;
}

/* ── LoadoutPanel: "Unlock more & upgrade" CTA (links to /battle3/skills) ── */
.lp-skills-upgrade-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(247,160,15,0.12), rgba(247,160,15,0.04));
  border: 1px solid rgba(247,160,15,0.35);
  color: #ffd740;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(247,160,15,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all 0.18s ease;
}
.lp-skills-upgrade-btn:hover {
  background: linear-gradient(145deg, rgba(247,160,15,0.22), rgba(247,160,15,0.08));
  border-color: rgba(247,160,15,0.6);
  color: #fff3b0;
  box-shadow: 0 0 20px rgba(247,160,15,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.lp-skills-upgrade-btn__icon { font-size: 1rem; line-height: 1; }
.lp-skills-upgrade-btn__arrow {
  font-size: 1rem;
  transition: transform 0.18s ease;
}
.lp-skills-upgrade-btn:hover .lp-skills-upgrade-btn__arrow {
  transform: translateX(3px);
}

/* ════════════════════════════════════════════════════════════════════
   Combat Stats — growth hints (under attribute grid in LoadoutPanel)
   ════════════════════════════════════════════════════════════════════ */
.combat-stats-hints {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,179,71,0.06), rgba(255,179,71,0.02));
  border: 1px solid rgba(255,179,71,0.18);
}
.combat-stats-hints li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.62rem;
  line-height: 1.3;
  color: rgba(255,255,255,0.78);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.combat-stats-hints__icon {
  font-size: 0.78rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,179,71,0.35));
}

/* ════════════════════════════════════════════════════════════════════
   Equipped Skills — V2 (inventory page) — gamified, addictive feel
   Scoped under .b3-equipped-skills--v2 so battle pages stay untouched.
   ════════════════════════════════════════════════════════════════════ */
.b3-equipped-skills--v2 {
  position: relative;
  padding: 12px 12px 10px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(247,160,15,0.08), transparent 60%),
    linear-gradient(180deg, rgba(14,18,28,0.7), rgba(6,9,16,0.78));
  border: 1px solid rgba(247,160,15,0.22);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 14px rgba(0,0,0,0.45);
  overflow: hidden;
}
.b3-equipped-skills--v2::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(247,160,15,0.35), transparent 30%, transparent 70%, rgba(76,175,80,0.25));
  opacity: 0.35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
}

/* Section header */
.b3-equipped-skills--v2 .b3-skills-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.b3-equipped-skills--v2 .b3-skills-header--passive { margin-top: 14px; }
.b3-equipped-skills--v2 .b3-skills-header__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff3b0;
  background: linear-gradient(90deg, #ffd86b, #ff8a3d);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(247,160,15,0.25);
}
.b3-equipped-skills--v2 .b3-skills-header--passive .b3-skills-header__title {
  background: linear-gradient(90deg, #b3ff8e, #4caf50);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 18px rgba(76,175,80,0.25);
}
.b3-equipped-skills--v2 .b3-skills-header__icon {
  font-size: 0.95rem;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 0 4px rgba(247,160,15,0.5));
}
.b3-equipped-skills--v2 .b3-skills-header--passive .b3-skills-header__icon {
  filter: drop-shadow(0 0 4px rgba(76,175,80,0.5));
}
.b3-equipped-skills--v2 .b3-skills-header__count {
  -webkit-text-fill-color: initial;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.b3-equipped-skills--v2 .b3-skills-header__action {
  appearance: none;
  border: 1px solid rgba(247,160,15,0.4);
  background: linear-gradient(180deg, rgba(247,160,15,0.18), rgba(247,160,15,0.06));
  color: #ffd86b;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.b3-equipped-skills--v2 .b3-skills-header__action:hover {
  background: linear-gradient(180deg, rgba(247,160,15,0.32), rgba(247,160,15,0.12));
  box-shadow: 0 0 12px rgba(247,160,15,0.35);
  transform: translateY(-1px);
}
.b3-equipped-skills--v2 .b3-skills-header__action--passive {
  border-color: rgba(76,175,80,0.45);
  color: #c9ffb3;
  background: linear-gradient(180deg, rgba(76,175,80,0.18), rgba(76,175,80,0.06));
}
.b3-equipped-skills--v2 .b3-skills-header__action--passive:hover {
  background: linear-gradient(180deg, rgba(76,175,80,0.32), rgba(76,175,80,0.12));
  box-shadow: 0 0 12px rgba(76,175,80,0.35);
}

/* Loadout meter */
.b3-equipped-skills--v2 .b3-skills-meter {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  margin-bottom: 8px;
}
.b3-equipped-skills--v2 .b3-skills-meter__fill {
  height: 100%;
  background: linear-gradient(90deg, #ffb347, #ff5e3a);
  box-shadow: 0 0 10px rgba(255,140,40,0.6);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 1.4, 0.5, 1);
  position: relative;
}
.b3-equipped-skills--v2 .b3-skills-meter__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  animation: b3-meter-shine 2.4s linear infinite;
}
.b3-equipped-skills--v2 .b3-skills-meter--passive .b3-skills-meter__fill {
  background: linear-gradient(90deg, #8ee48a, #2e8b57);
  box-shadow: 0 0 10px rgba(76,175,80,0.55);
}
@keyframes b3-meter-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Slot grid */
.b3-equipped-skills--v2 .b3-skill-slots {
  gap: 6px;
}

/* Slot card base */
.b3-equipped-skills--v2 .b3-skill-slot {
  position: relative;
  padding: 8px 4px 6px;
  min-height: 64px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.25));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  isolation: isolate;
}
.b3-equipped-skills--v2 .b3-skill-slot.filled:hover {
  transform: translateY(-2px) scale(1.03);
}
.b3-equipped-skills--v2 .b3-skill-slot.empty {
  border-style: dashed;
  border-color: rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18));
  opacity: 0.85;
}
.b3-equipped-skills--v2 .b3-skill-slot.empty:hover {
  border-color: rgba(247,160,15,0.45);
  background: linear-gradient(180deg, rgba(247,160,15,0.06), rgba(0,0,0,0.18));
  opacity: 1;
}
.b3-equipped-skills--v2 .b3-skill-slot.passive.empty:hover {
  border-color: rgba(76,175,80,0.45);
  background: linear-gradient(180deg, rgba(76,175,80,0.06), rgba(0,0,0,0.18));
}

.b3-equipped-skills--v2 .b3-skill-slot__plus {
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(255,255,255,0.4);
  font-weight: 700;
}
.b3-equipped-skills--v2 .b3-skill-slot.empty:hover .b3-skill-slot__plus {
  color: #ffd86b;
  transform: scale(1.15);
  transition: transform 0.18s ease, color 0.18s ease;
}
.b3-equipped-skills--v2 .b3-skill-slot.passive.empty:hover .b3-skill-slot__plus {
  color: #b3ff8e;
}
.b3-equipped-skills--v2 .b3-skill-slot-empty {
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.b3-equipped-skills--v2 .b3-skill-slot-icon {
  font-size: 1.2rem;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
  transition: transform 0.2s ease;
}
.b3-equipped-skills--v2 .b3-skill-slot.filled:hover .b3-skill-slot-icon {
  transform: scale(1.12) rotate(-4deg);
}
.b3-equipped-skills--v2 .b3-skill-slot-name {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.b3-equipped-skills--v2 .b3-skill-slot-desc {
  font-size: 0.46rem !important;
  color: rgba(255,255,255,0.55) !important;
  line-height: 1.15 !important;
  text-align: center;
  padding: 0 2px;
}

/* Level pill (top-right) */
.b3-equipped-skills--v2 .b3-skill-slot__lv {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.46rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  color: #ffd86b;
  text-shadow: 0 0 4px rgba(247,160,15,0.6);
  z-index: 2;
}
.b3-equipped-skills--v2 .b3-passive-tier {
  font-size: 0.5rem !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 1px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Shimmer overlay for filled slots */
.b3-equipped-skills--v2 .b3-skill-slot__shimmer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: 200% 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
}
.b3-equipped-skills--v2 .b3-skill-slot.filled:hover .b3-skill-slot__shimmer {
  opacity: 1;
  animation: b3-slot-shimmer 1.1s ease forwards;
}
@keyframes b3-slot-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}

/* Tier coloring — Action skills */
.b3-equipped-skills--v2 .b3-skill-slot.tier-0 { border-color: rgba(180,180,180,0.35); }
.b3-equipped-skills--v2 .b3-skill-slot.tier-1 {
  border-color: rgba(120,200,120,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 10px rgba(120,200,120,0.2);
}
.b3-equipped-skills--v2 .b3-skill-slot.tier-2 {
  border-color: rgba(80,160,255,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 12px rgba(80,160,255,0.28);
}
.b3-equipped-skills--v2 .b3-skill-slot.tier-3 {
  border-color: rgba(180,110,255,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 14px rgba(180,110,255,0.32);
}
.b3-equipped-skills--v2 .b3-skill-slot.tier-4 {
  border-color: rgba(255,170,50,0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 16px rgba(255,170,50,0.4);
}
.b3-equipped-skills--v2 .b3-skill-slot.tier-5 {
  border-color: rgba(255,80,80,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 18px rgba(255,80,80,0.45);
  animation: b3-slot-pulse 2.6s ease-in-out infinite;
}
@keyframes b3-slot-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 14px rgba(255,80,80,0.35); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 22px rgba(255,80,80,0.6); }
}

/* Tier coloring — Passives (Dirt → Legendary, idx 0..8) */
.b3-equipped-skills--v2 .b3-skill-slot.passive.ptier-0 { border-color: rgba(140,120,100,0.45); }
.b3-equipped-skills--v2 .b3-skill-slot.passive.ptier-1 {
  border-color: rgba(205,127,50,0.6);
  box-shadow: 0 0 10px rgba(205,127,50,0.25);
}
.b3-equipped-skills--v2 .b3-skill-slot.passive.ptier-2 {
  border-color: rgba(180,140,80,0.65);
  box-shadow: 0 0 12px rgba(180,140,80,0.3);
}
.b3-equipped-skills--v2 .b3-skill-slot.passive.ptier-3 {
  border-color: rgba(200,210,220,0.7);
  box-shadow: 0 0 12px rgba(200,210,220,0.3);
}
.b3-equipped-skills--v2 .b3-skill-slot.passive.ptier-4 {
  border-color: rgba(255,200,60,0.7);
  box-shadow: 0 0 14px rgba(255,200,60,0.35);
}
.b3-equipped-skills--v2 .b3-skill-slot.passive.ptier-5 {
  border-color: rgba(160,230,255,0.75);
  box-shadow: 0 0 16px rgba(160,230,255,0.4);
}
.b3-equipped-skills--v2 .b3-skill-slot.passive.ptier-6 {
  border-color: rgba(255,90,120,0.75);
  box-shadow: 0 0 16px rgba(255,90,120,0.45);
}
.b3-equipped-skills--v2 .b3-skill-slot.passive.ptier-7 {
  border-color: rgba(80,230,140,0.8);
  box-shadow: 0 0 18px rgba(80,230,140,0.45);
}
.b3-equipped-skills--v2 .b3-skill-slot.passive.ptier-8 {
  border-color: rgba(255,140,255,0.85);
  box-shadow: 0 0 22px rgba(255,140,255,0.55);
  animation: b3-slot-pulse-legend 3s ease-in-out infinite;
}
@keyframes b3-slot-pulse-legend {
  0%, 100% { box-shadow: 0 0 16px rgba(255,140,255,0.4); }
  50%      { box-shadow: 0 0 28px rgba(255,140,255,0.75); }
}

/* Locked passive */
.b3-equipped-skills--v2 .b3-skill-slot.passive.locked {
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.02) 0 6px,
    rgba(0,0,0,0.18) 6px 12px
  );
  border-color: rgba(255,255,255,0.08);
  opacity: 0.55;
}
.b3-equipped-skills--v2 .b3-skill-slot__lock {
  font-size: 0.95rem;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
  opacity: 0.85;
}

/* Points row */
.b3-equipped-skills--v2 .b3-skill-points-row {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.b3-equipped-skills--v2 .b3-skill-pts-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.18s ease;
}
.b3-equipped-skills--v2 .b3-skill-pts-info.has-pts {
  background: linear-gradient(90deg, rgba(247,160,15,0.18), rgba(255,90,40,0.18));
  border-color: rgba(247,160,15,0.55);
  box-shadow: 0 0 14px rgba(247,160,15,0.35);
  animation: b3-pts-pulse 2.2s ease-in-out infinite;
}
.b3-equipped-skills--v2 .b3-skill-pts-info:hover { transform: translateY(-1px); }
.b3-equipped-skills--v2 .b3-skill-pts-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7);
}
.b3-equipped-skills--v2 .b3-skill-pts-badge.has-pts {
  color: #fff3b0;
  text-shadow: 0 0 8px rgba(247,160,15,0.7);
}
.b3-equipped-skills--v2 .b3-skill-use-pts {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.b3-equipped-skills--v2 .b3-skill-use-pts.active {
  color: #ffd86b;
  text-shadow: 0 0 6px rgba(247,160,15,0.6);
}
@keyframes b3-pts-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(247,160,15,0.25); }
  50%      { box-shadow: 0 0 20px rgba(247,160,15,0.55); }
}

/* CTA when no skills unlocked */
.b3-equipped-skills--v2 .b3-skill-unlock-cta {
  width: 100%;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(247,160,15,0.2), rgba(255,90,40,0.18));
  border-color: rgba(247,160,15,0.5);
  box-shadow: 0 0 14px rgba(247,160,15,0.3);
  animation: b3-pts-pulse 2.6s ease-in-out infinite;
}

/* =====================================================
   REWARDS YOU CAN WIN — v2 (Battle4 hub) + odds popup
   ===================================================== */
.sc-reward-preview.sc-rp-v2 {
  display: block;
  padding: 12px 14px 14px;
}
.sc-rp-v2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sc-rp-v2-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f7a00f;
  text-shadow: 0 0 8px rgba(247, 160, 15, 0.3);
}
.sc-rp-v2-title .sc-rp-header-icon { font-size: 1rem; }
.sc-rp-odds-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f7a00f;
  background: linear-gradient(135deg, rgba(247,160,15,0.12), rgba(247,160,15,0.04));
  border: 1px solid rgba(247,160,15,0.45);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.sc-rp-odds-btn:hover {
  background: linear-gradient(135deg, rgba(247,160,15,0.22), rgba(247,160,15,0.08));
  box-shadow: 0 0 12px rgba(247,160,15,0.35);
  transform: translateY(-1px);
}
.sc-rp-odds-btn:active { transform: translateY(0); }

.sc-rp-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}
.sc-rp-chest-card--guaranteed {
  border-color: rgba(168, 85, 247, 0.45) !important;
  background: linear-gradient(180deg, rgba(50, 30, 80, 0.55), rgba(20, 12, 35, 0.95)) !important;
}
.sc-rp-chest-card--guaranteed .sc-rp-chest-icon {
  color: #c084fc;
  filter: drop-shadow(0 0 6px rgba(192,132,252,0.55));
}
.sc-rp-chest-card--guaranteed .sc-rp-chest-range { color: #e9d5ff; }
.sc-rp-chest-card--guaranteed .sc-rp-chest-label {
  color: #c084fc;
  font-weight: 800;
}

@media (max-width: 560px) {
  .sc-rp-v2-head { flex-wrap: wrap; }
  .sc-rp-v2-title { font-size: 0.7rem; }
  .sc-rp-odds-btn { font-size: 0.58rem; padding: 5px 10px; }
}

/* ── Chest Spins "View Odds" button ── */
.b3-co-odds-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0 14px;
}
.b3-co-odds-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd166;
  background: linear-gradient(135deg, rgba(247,160,15,0.16), rgba(247,160,15,0.05));
  border: 1px solid rgba(247,160,15,0.5);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.b3-co-odds-btn:hover {
  background: linear-gradient(135deg, rgba(247,160,15,0.28), rgba(247,160,15,0.1));
  box-shadow: 0 0 16px rgba(247,160,15,0.45);
  transform: translateY(-1px);
}
.b3-co-odds-btn:active { transform: translateY(0); }

/* ── Rewards/Odds Popup (modal) ── */
.rop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(2, 4, 8, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: rop-fade 160ms ease-out;
}
@keyframes rop-fade { from { opacity: 0; } to { opacity: 1; } }
.rop-modal {
  position: relative;
  width: min(880px, 100%);
  max-height: 90vh;
  background:
    radial-gradient(ellipse at top, rgba(247, 160, 15, 0.08), transparent 60%),
    linear-gradient(145deg, rgba(10, 12, 18, 0.99), rgba(6, 8, 12, 1));
  border: 1px solid rgba(247, 160, 15, 0.32);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.7), 0 0 24px rgba(247,160,15,0.18);
  overflow: hidden;
  animation: rop-scale 180ms cubic-bezier(.2,.9,.3,1.2);
}
@keyframes rop-scale { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rop-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: #f7a00f;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(247,160,15,0.4);
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, transform 120ms ease;
}
.rop-close:hover { background: rgba(247,160,15,0.22); transform: rotate(90deg); }
.rop-body {
  max-height: 90vh;
  overflow-y: auto;
  padding: 18px 18px 22px;
  -webkit-overflow-scrolling: touch;
}
.rop-content { padding: 0; }
.rop-content .b3-rewards-overview {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

@media (max-width: 560px) {
  .rop-backdrop { padding: 0; }
  .rop-modal { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .rop-body { max-height: 100vh; padding: 14px 12px 22px; }
}

/* =====================================================
   STAGE CARD — Rewards You Can Win (matches Chest Spins style)
   ===================================================== */
.sc-rewards-overview {
  margin-top: 6px;
}
.sc-rewards-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.sc-rewards-title-flex {
  flex: 1 1 auto;
  margin: 0 !important;
}
.sc-rewards-odds-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.sc-rewards-grid {
  /* Slightly smaller minmax so the 5th (TLRPG) card fits */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* "Guaranteed" purple variant for XP+Bronze card */
.b3-reward-card.guaranteed {
  border-color: rgba(168, 85, 247, 0.45);
  background:
    radial-gradient(ellipse at top, rgba(168,85,247,0.18), transparent 60%),
    linear-gradient(180deg, rgba(40, 22, 70, 0.6), rgba(18, 10, 35, 0.95));
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 0 14px rgba(168,85,247,0.08);
}
.b3-reward-card.guaranteed .b3-rc-icon {
  color: #c084fc;
  filter: drop-shadow(0 0 8px rgba(192,132,252,0.55));
}
.b3-reward-card.guaranteed .b3-rc-icon .b3-rc-emoji { font-size: 1.6rem; }
.b3-reward-card.guaranteed .b3-rc-name { color: #e9d5ff; }
.b3-reward-card.guaranteed .b3-rc-chance {
  color: #c084fc;
  border-color: rgba(168,85,247,0.45);
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(168,85,247,0.06));
}

@media (max-width: 560px) {
  .sc-rewards-head { flex-wrap: wrap; }
  .sc-rewards-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* =====================================================
   STAGE CARD rewards section — match Chest Spins dark style,
   force single horizontal line, green Guaranteed, text link
   ===================================================== */
.sc-rewards-overview {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(20,16,12,0.55), rgba(10,7,5,0.55)) !important;
  border: 1px solid rgba(247,160,15,0.12) !important;
  border-radius: 10px;
  padding: 12px !important;
}
.sc-rewards-overview .b3-rewards-title {
  font-family: 'Cinzel', 'Orbitron', serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #fbbf24;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-shadow: 0 0 10px rgba(247,160,15,0.30);
}

/* Force all 5 cards on a single row, no wrapping */
.sc-rewards-overview .b3-rewards-grid {
  flex-wrap: nowrap;
  max-width: none;
  gap: 6px;
}
.sc-rewards-overview .b3-rewards-grid > .b3-reward-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

/* Head row: title centered, "Check odds" as clickable text on the right */
.sc-rewards-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.sc-rewards-title-flex { margin: 0 !important; flex: 0 1 auto; }
.sc-rewards-odds-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(247,160,15,0.78) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.sc-rewards-odds-btn:hover {
  color: #fbbf24 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
}
.sc-rewards-odds-btn:active { transform: translateY(-50%) !important; }

/* Green "Guaranteed" XP+Bronze card */
.sc-rewards-overview .b3-reward-card.guaranteed {
  border-color: rgba(34, 197, 94, 0.45);
  background:
    radial-gradient(ellipse at top, rgba(34,197,94,0.18), transparent 60%),
    linear-gradient(180deg, rgba(14, 40, 22, 0.85), rgba(8, 22, 14, 0.92)) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), inset 0 0 14px rgba(34,197,94,0.10);
}
.sc-rewards-overview .b3-reward-card.guaranteed .b3-rc-icon {
  color: #4ade80;
  filter: drop-shadow(0 0 8px rgba(74,222,128,0.55));
}
.sc-rewards-overview .b3-reward-card.guaranteed .b3-rc-icon .b3-rc-emoji {
  font-size: 1.4rem;
}
.sc-rewards-overview .b3-reward-card.guaranteed .b3-rc-name { color: #bbf7d0; }
.sc-rewards-overview .b3-reward-card.guaranteed .b3-rc-chance {
  color: #4ade80;
}

/* Mobile: keep single line but allow horizontal scroll if absolutely needed */
@media (max-width: 560px) {
  .sc-rewards-overview .b3-rewards-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sc-rewards-overview .b3-rewards-grid::-webkit-scrollbar { display: none; }
  .sc-rewards-overview .b3-rewards-grid > .b3-reward-card {
    flex: 0 0 110px;
  }
  .sc-rewards-head { justify-content: flex-start; }
  .sc-rewards-odds-btn { position: static; transform: none; right: auto; top: auto; margin-left: auto; }
  .sc-rewards-odds-btn:hover { transform: none !important; }
}

/* Keep "Rewards You Can Win" title on one line */
.sc-rewards-overview .b3-rewards-title {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.sc-rewards-overview .b3-rewards-title .b3-rule {
  flex: 1 1 20px;
  min-width: 20px;
}
@media (max-width: 560px) {
  .sc-rewards-overview .b3-rewards-title { font-size: 12px; gap: 6px; }
  .sc-rewards-overview .b3-rewards-title .b3-rule { flex-basis: 12px; min-width: 12px; }
}

/* =====================================================
   FINAL HOTFIX — Battle4 Preview Mobile (staging)
   Keep this block at file end so it wins all earlier pb3 rules.
   ===================================================== */
@media (max-width: 640px) {
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 4px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    align-items: flex-start !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-card {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(100vh - 56px) !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow: visible !important;
    padding: 6px !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-arena {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    gap: 6px !important;
    height: auto !important;
    overflow: visible !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-enemy-side,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-center,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-player-side,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-combatant {
    height: auto !important;
    overflow: visible !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-center {
    order: 2;
    display: grid !important;
    grid-template-columns: 92px 1fr !important;
    grid-template-areas:
      "ring meta"
      "ring summary" !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 4px 8px !important;
    padding: 6px 8px !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-center .pb2-power-ring {
    grid-area: ring;
    width: 92px !important;
    height: 92px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-center .pb2-win-chip {
    grid-area: meta;
    align-items: flex-start !important;
    text-align: left !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 4px 8px !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-center .pb2-matchup-summary {
    grid-area: summary;
    justify-content: flex-start !important;
    max-width: 100% !important;
    gap: 3px !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-enemy-side { order: 1; }
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-player-side { order: 3; }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-enemy-stats-overlay,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-enemy-image-container > .pb2-enemy-stats-overlay {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-enemy-image-wrap,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-enemy-image-wrap.enlarged {
    width: 100% !important;
    height: 140px !important;
    max-height: 140px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-enemy-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-equipment-col {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(84px, auto) !important;
    gap: 6px !important;
    height: auto !important;
    overflow: visible !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-slot {
    min-height: 84px !important;
    height: auto !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip {
    display: block !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-preview {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 8px !important;
    min-height: 0 !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-header {
    margin: 0 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-reward-badge {
    display: inline-flex !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-divider,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section:nth-of-type(2),
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-tips,
  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb3-rewards-strip .pb2-rewards-section-label {
    display: none !important;
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    margin-top: auto;
    background: linear-gradient(180deg, rgba(8,10,18,0), rgba(8,10,18,0.96) 30%);
    padding-top: 6px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }

  body:has(.pre-battle-screen.pb3) .pre-battle-screen.pb3 .pb2-actions .pb2-fight-btn {
    min-height: 44px;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .lp-skills-upgrade-btn {
    display: block !important;
    width: 100%;
    text-align: center !important;
    box-sizing: border-box;
  }
  .lp-skills-upgrade-btn__icon,
  .lp-skills-upgrade-btn__text,
  .lp-skills-upgrade-btn__arrow {
    display: inline;
    vertical-align: middle;
  }
}