/* ============================================
   MOBILE BATTLE CSS - Complete Layout Fix
   Targets: Battle Arena + Pre-Battle Screen
   ============================================ */

@media screen and (max-width: 768px) {
  
  /* ==========================================
     BATTLE ARENA - Full Screen Takeover
     Structure: battle-arena > arena-container > [header, main, footer]
     ========================================== */
  
  .battle-arena {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #0a0c10 !important;
    z-index: 9999 !important;
    overflow: hidden !important;
  }

  .battle-arena .arena-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  /* Hide desktop decorations */
  .battle-arena .arena-bg-effects,
  .battle-arena .arena-vignette,
  .battle-arena .arena-particles,
  .battle-arena .arena-fog {
    display: none !important;
  }

  /* ==========================================
     HEADER - Fixed height, no flex grow
     ========================================== */
  
  .battle-arena .battle-header {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: rgba(0,0,0,0.9) !important;
    min-height: 44px !important;
    position: relative !important;
    z-index: 10 !important;
  }

  .battle-arena .sound-toggle-btn,
  .battle-arena .passives-toggle-btn {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
  }

  .battle-arena .turn-badge {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(247,160,15,0.15) !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(247,160,15,0.3) !important;
  }

  .battle-arena .turn-label {
    font-size: 0.5rem !important;
    color: #f7a00f !important;
  }

  .battle-arena .turn-value {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  .battle-arena .turn-indicator {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border-radius: 12px !important;
    text-transform: uppercase !important;
  }

  .battle-arena .combo-badge {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    padding: 3px 8px !important;
    border-radius: 10px !important;
    font-size: 0.7rem !important;
  }

  /* ==========================================
     MAIN CONTENT - Monster fills the space
     ========================================== */
  
  .battle-arena .battle-main {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    /* CRITICAL: Remove grid, use flex column */
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    position: relative !important;
  }

  /* MONSTER SECTION - Fill the entire main area */
  .battle-arena .monster-section {
    flex: 1 1 auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    padding: 0 !important;
    position: relative !important;
  }

  /* MONSTER CARD - Full width/height background */
  .battle-arena .monster-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* MONSTER IMAGE - Full background */
  .battle-arena .monster-image-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,0.4) !important;
    border: none !important;
    z-index: 1 !important;
  }

  .battle-arena .monster-image {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 4rem !important;
  }

  .battle-arena .monster-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0.6 !important;
  }

  /* Dark gradient overlay for readability */
  .battle-arena .monster-image::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.2) 0%,
      rgba(0,0,0,0.4) 50%,
      rgba(0,0,0,0.85) 100%
    ) !important;
    pointer-events: none !important;
  }

  /* Tags - Top left corner, above image */
  .battle-arena .monster-tags-overlay {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 10 !important;
    transform: none !important;
  }

  .battle-arena .tag-difficulty {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    white-space: nowrap !important;
  }

  .battle-arena .tag-element {
    width: 26px !important;
    height: 26px !important;
    background: rgba(0,0,0,0.7) !important;
    border-radius: 50% !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
  }

  /* MONSTER INFO - Positioned at bottom over the image */
  .battle-arena .monster-info-panel {
    position: relative !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 12px 16px 16px !important;
    background: transparent !important;
  }

  .battle-arena .intent-badge {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(239,68,68,0.3) !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(239,68,68,0.4) !important;
    backdrop-filter: blur(4px) !important;
  }

  .battle-arena .intent-icon {
    font-size: 0.9rem !important;
  }

  .battle-arena .intent-text {
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    color: #fca5a5 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .battle-arena .monster-name {
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
    text-align: center !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
  }

  /* HP - Show linear, hide circular */
  .battle-arena .circular-hp-container {
    display: none !important;
  }

  /* ENEMY HP BAR - Must be visible on mobile */
  .battle-arena .monster-hp,
  .battle-arena .monster-hp.hidden,
  .battle-arena .monster-info-panel .monster-hp,
  .battle-arena .monster-info-panel .monster-hp.hidden,
  .battle-arena .monster-card .monster-hp,
  .battle-arena .monster-card .monster-hp.hidden {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 280px !important;
    position: relative !important;
    margin-top: 8px !important;
  }

  .battle-arena .hp-bar-bg {
    position: relative !important;
    width: 100% !important;
    height: 30px !important;
    background: rgba(0,0,0,0.8) !important;
    border-radius: 10px !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
  }

  .battle-arena .hp-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
    border-radius: 9px !important;
    box-shadow: 0 0 10px rgba(239,68,68,0.4) !important;
  }

  .battle-arena .hp-text {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,1) !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }

  /* Mobile combat log - collapsible at top-left, compact */
  .battle-arena .combat-log-section {
    position: absolute !important;
    top: 50px !important;
    left: 8px !important;
    right: auto !important;
    width: 110px !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(10, 12, 16, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    max-height: 28px !important;
    transition: max-height 0.3s ease, width 0.3s ease !important;
  }

  .battle-arena .combat-log-section.expanded {
    max-height: 200px !important;
    width: 200px !important;
  }

  .battle-arena .combat-log-section .log-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 8px !important;
    background: rgba(247, 160, 15, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 0.55rem !important;
    font-weight: 600 !important;
    color: #f7a00f !important;
    cursor: pointer !important;
    min-height: 28px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  .battle-arena .combat-log-section .log-header::after {
    content: ' ▼' !important;
    margin-left: 4px !important;
    font-size: 0.4rem !important;
    transition: transform 0.3s ease !important;
  }

  .battle-arena .combat-log-section.expanded .log-header::after {
    transform: rotate(180deg) !important;
  }

  .battle-arena .combat-log-section .log-body {
    flex: 1 !important;
    padding: 8px !important;
    overflow-y: auto !important;
    font-size: 0.65rem !important;
    max-height: 140px !important;
  }

  .battle-arena .combat-log-section .log-entry {
    padding: 4px 8px !important;
    margin-bottom: 4px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
    border-left: 2px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 0.6rem !important;
    line-height: 1.3 !important;
  }

  .battle-arena .combat-log-section .log-player {
    color: #86efac !important;
    border-left-color: rgba(34, 197, 94, 0.5) !important;
  }

  .battle-arena .combat-log-section .log-enemy {
    color: #fca5a5 !important;
    border-left-color: rgba(239, 68, 68, 0.5) !important;
  }

  /* ==========================================
     FOOTER - Fixed at bottom with HP + Skills
     ========================================== */
  
  .battle-arena .battle-footer {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    padding-bottom: max(65px, calc(env(safe-area-inset-bottom) + 55px)) !important;
    background: linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.95) 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 100 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Player HP Row - Full width, no icon */
  .battle-arena .player-section {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 36px !important;
    padding: 0 !important;
  }

  /* HIDE the sword icon completely */
  .battle-arena .player-section .player-avatar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  .battle-arena .player-hp-wrap {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .battle-arena .player-hp-bar {
    position: relative !important;
    width: 100% !important;
    height: 36px !important;
    background: rgba(0,0,0,0.8) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2) !important;
  }

  .battle-arena .player-hp-fill {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
    border-radius: 6px !important;
    z-index: 1 !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.4) !important;
  }

  .battle-arena .player-hp-text {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,1) !important;
    z-index: 3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    line-height: 36px !important;
  }

  /* Actions Row */
  .battle-arena .actions-section {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .battle-arena .skill-buttons {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .battle-arena .skill-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    height: 54px !important;
    background: linear-gradient(180deg, rgba(50,55,70,0.95) 0%, rgba(30,35,45,0.95) 100%) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 10px !important;
    padding: 4px 2px !important;
    position: relative !important;
  }

  .battle-arena .skill-btn .skill-icon {
    font-size: 1.3rem !important;
    line-height: 1 !important;
  }

  .battle-arena .skill-btn .skill-name {
    font-size: 0.35rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.7) !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .battle-arena .skill-btn.on-cooldown {
    opacity: 0.5 !important;
  }

  .battle-arena .cooldown-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.8) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .battle-arena .flee-btn {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    background: linear-gradient(180deg, rgba(239,68,68,0.25) 0%, rgba(185,28,28,0.25) 100%) !important;
    border: 1px solid rgba(239,68,68,0.4) !important;
    border-radius: 10px !important;
    color: #f87171 !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
  }

  .battle-arena .flee-btn span:last-child {
    font-size: 0.35rem !important;
    font-weight: 700 !important;
  }

  /* Effect layer */
  .battle-arena .effect-layer {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 50 !important;
  }

  /* FCT */
  .battle-arena .fct {
    font-size: 1.1rem !important;
  }

  .battle-arena .fct-crit {
    font-size: 1.5rem !important;
  }
}


/* ==========================================
   PRE-BATTLE SCREEN - MOBILE OPTIMIZED
   Full screen, maximum space utilization
   ========================================== */

@media screen and (max-width: 768px) {
  .pre-battle-screen,
  .pre-battle-screen.pb2 {
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #0a0c0f !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    /* Account for app header/footer */
    padding-top: 50px !important;
    padding-bottom: 55px !important;
  }

  /* Boost screen (pb2 alone, not pb3): no top padding needed — no app header visible */
  .pre-battle-screen.pb2:not(.pb3) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* When boost screen is active: th-content fills remaining space below header */
  body.boost-screen-active .th-content {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative !important;
  }
  /* Use absolute positioning relative to th-content (below header, above footer) */
  body.boost-screen-active .pre-battle-screen.pb2 {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #0a0c0f !important;
    z-index: 9999 !important;
  }
  /* b3b-panel fills the absolute container, compresses to fit */
  body.boost-screen-active .b3b-panel {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 10px 8px !important;
    min-height: 0 !important;
    max-height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.boost-screen-active .b3b-topbar {
    padding-bottom: 6px !important;
    flex-shrink: 0 !important;
  }
  body.boost-screen-active .b3b-topbar-title {
    font-size: 0.9rem !important;
  }
  body.boost-screen-active .b3b-cards {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  body.boost-screen-active .b3b-card {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    text-align: left !important;
  }
  body.boost-screen-active .b3b-card-img {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }
  body.boost-screen-active .b3b-card-body {
    flex: 1 !important;
    min-width: 0 !important;
  }
  body.boost-screen-active .b3b-card-name {
    font-size: 0.78rem !important;
  }
  body.boost-screen-active .b3b-card-desc {
    font-size: 0.6rem !important;
  }
  body.boost-screen-active .b3b-card-badge {
    font-size: 0.55rem !important;
    padding: 1px 5px !important;
  }
  body.boost-screen-active .b3b-spin-zone {
    padding: 6px 8px !important;
    margin-top: 4px !important;
  }
  body.boost-screen-active .b3b-spin-empty {
    letter-spacing: 2px !important;
    font-size: 0.85rem !important;
  }
  body.boost-screen-active .b3b-roll-btn {
    padding: 8px 14px !important;
    font-size: 0.78rem !important;
  }
  body.boost-screen-active .b3b-dice-picks {
    gap: 6px !important;
    margin-top: 4px !important;
  }
  body.boost-screen-active .b3b-dp {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
  }
  body.boost-screen-active .b3b-bottom {
    flex-shrink: 0 !important;
    padding-top: 8px !important;
    gap: 6px !important;
  }
  body.boost-screen-active .b3b-fight-btn {
    padding: 12px !important;
    font-size: 0.88rem !important;
    min-height: 44px !important;
  }
  body.boost-screen-active .b3b-switch {
    position: absolute !important;
    top: auto !important;
    bottom: 10px !important;
    right: 10px !important;
    left: auto !important;
    transform: none !important;
  }

  .pre-battle-screen .pre-battle-card,
  .pre-battle-screen .pb2-card {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* HEADER - Battle Preview title */
  .pre-battle-screen .pb2-header {
    display: flex !important;
    align-items: center !important;
    padding: 6px 10px !important;
    background: rgba(20, 22, 28, 0.95) !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }

  .pre-battle-screen .pb2-back-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.2rem !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .pre-battle-screen .pb2-title {
    flex: 1 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #f7a00f !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .pre-battle-screen .pb2-spacer {
    width: 32px !important;
  }

  /* ARENA - Main content */
  .pre-battle-screen .pb2-arena {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 6px !important;
    gap: 6px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 8px !important; /* Reduced - buttons handle their own spacing */
  }

  /* ===== PLAYER SECTION ===== */
  .pre-battle-screen .pb2-player-side {
    width: 100% !important;
    background: rgba(20, 22, 28, 0.9) !important;
    border-radius: 10px !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-areas:
      "header stats"
      "equipment equipment" !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important; /* Compact rows */
    gap: 6px !important;
    flex: 0 0 auto !important; /* Don't expand */
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Player header: Avatar + Name */
  .pre-battle-screen .pb2-player-side .pb2-combatant-header {
    grid-area: header !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .pre-battle-screen .pb2-avatar {
    font-size: 1.1rem !important;
  }

  .pre-battle-screen .pb2-name {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  /* Player stats - SAME ROW as header, pushed to right */
  .pre-battle-screen .pb2-player-side .pb2-stats-row {
    grid-area: stats !important;
    display: flex !important;
    gap: 5px !important;
    justify-content: flex-end !important;
    align-self: center !important;
  }

  .pre-battle-screen .pb2-stat {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 3px 5px !important;
    border-radius: 4px !important;
    background: rgba(0,0,0,0.5) !important;
  }

  .pre-battle-screen .pb2-stat.win { color: #4ade80 !important; }
  .pre-battle-screen .pb2-stat.lose { color: #f87171 !important; }

  /* ===== EQUIPMENT GRID ===== */
  .pre-battle-screen .pb2-equipment-col {
    grid-area: equipment !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 340px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    margin: 8px auto !important;
    padding: 4px 0 !important;
  }

  .pre-battle-screen .pb2-slot {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: linear-gradient(145deg, rgba(40, 44, 55, 0.95), rgba(25, 28, 35, 0.95)) !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  .pre-battle-screen .pb2-slot:active {
    transform: scale(0.97) !important;
  }

  .pre-battle-screen .pb2-slot.equipped {
    border-color: var(--slot-border, rgba(247,160,15,0.7)) !important;
    box-shadow: 0 0 10px var(--slot-border, rgba(247,160,15,0.4)), inset 0 0 12px rgba(0,0,0,0.3) !important;
  }

  /* Tier badge - Centered above slot like inventory/GearCard */
  .pre-battle-screen .pb2-slot-tier-badge {
    position: absolute !important;
    top: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, var(--slot-border, #f7a00f) 0%, var(--slot-bg, #8b5a00) 100%) !important;
    color: #000 !important;
    z-index: 25 !important;
    border: 1px solid color-mix(in srgb, var(--slot-border, #f7a00f) 80%, white 20%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 8px var(--slot-glow, rgba(247,160,15,0.4)) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important;
    min-width: 32px !important;
    white-space: nowrap !important;
  }

  /* Tier ribbon (the +0, -2 etc) - top right */
  .pre-battle-screen .pb2-tier-ribbon {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    font-size: 0.55rem !important;
    font-weight: 800 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    z-index: 5 !important;
    display: flex !important;
  }

  /* Star header - hide on mobile */
  .pre-battle-screen .pb2-slot-header {
    display: none !important;
  }

  /* Item image */
  .pre-battle-screen .pb2-slot-visual {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .pre-battle-screen .pb2-slot-img-wrap {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .pre-battle-screen .pb2-slot-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)) !important;
  }

  /* Element icon on slot */
  .pre-battle-screen .pb2-slot-footer {
    position: absolute !important;
    bottom: 2px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 4 !important;
  }

  .pre-battle-screen .pb2-slot-element {
    font-size: 0.85rem !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7)) !important;
  }

  /* Empty slot styling */
  .pre-battle-screen .pb2-slot-empty-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.4 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .pre-battle-screen .pb2-slot-label {
    font-size: 0.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
    color: rgba(255,255,255,0.7) !important;
  }

  .pre-battle-screen .pb2-slot-plus {
    font-size: 1.5rem !important;
    opacity: 0.5 !important;
    color: rgba(255,255,255,0.5) !important;
  }

  /* ===== HIDE VS BADGE ===== */
  .pre-battle-screen .pb2-center {
    display: none !important;
  }

  /* ===== ENEMY SECTION ===== */
  .pre-battle-screen .pb2-enemy-side {
    width: 100% !important;
    background: rgba(20, 22, 28, 0.9) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important; /* Fill remaining space */
    min-height: 180px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Enemy header - Name + badges on left, stats on right */
  .pre-battle-screen .pb2-enemy-side .pb2-combatant-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    position: relative !important;
    z-index: 10 !important;
    background: rgba(20, 22, 28, 0.98) !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }

  /* Enemy info - Name and Badges stacked */
  .pre-battle-screen .pb2-enemy-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    flex: 1 !important;
  }

  .pre-battle-screen .pb2-enemy-info .pb2-name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.2 !important;
  }

  /* Badges row - element, class, difficulty */
  .pre-battle-screen .pb2-enemy-badges {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .pre-battle-screen .pb2-badge {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    background: rgba(60, 65, 80, 0.9) !important;
    color: #fff !important;
    font-weight: 600 !important;
  }

  .pre-battle-screen .pb2-badge.element-badge {
    background: rgba(59, 130, 246, 0.3) !important;
  }

  .pre-battle-screen .pb2-badge.class-badge {
    background: rgba(168, 85, 247, 0.3) !important;
  }

  /* Enemy image container - FULL WIDTH below header */
  .pre-battle-screen .pb2-enemy-image-container,
  .pre-battle-screen .pb2-enemy-image-container.enlarged {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, rgba(15, 18, 25, 1), rgba(8, 10, 14, 1)) !important;
    padding: 4px 0 !important;
  }

  .pre-battle-screen .pb2-enemy-image-wrap,
  .pre-battle-screen .pb2-enemy-image-wrap.enlarged {
    position: relative !important;
    width: 92% !important;
    max-width: 320px !important;
    aspect-ratio: 1 / 1 !important;
    background: linear-gradient(180deg, rgba(25, 30, 40, 0.95), rgba(15, 18, 25, 0.98)) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 2px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,0,0,0.4) !important;
  }

  .pre-battle-screen .pb2-enemy-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .pre-battle-screen .pb2-enemy-fallback {
    font-size: 5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
  }

  /* Level badge - TOP LEFT inside image area - inventory style */
  .pre-battle-screen .pb2-enemy-level-badge-top {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    transform: none !important;
    background: linear-gradient(135deg, #f7a00f 0%, #d4850a 100%) !important;
    color: #000 !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,200,100,0.6) !important;
    z-index: 20 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 12px rgba(247,160,15,0.3) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3) !important;
  }

  /* Element badge - TOP RIGHT of image */
  .pre-battle-screen .pb2-enemy-element-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 1.8rem !important;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.9)) !important;
    z-index: 15 !important;
    background: rgba(0,0,0,0.5) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Stats overlay - Bottom of image container, centered */
  .pre-battle-screen .pb2-enemy-stats-overlay {
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 20 !important;
  }

  .pre-battle-screen .pb2-stat-chip {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    background: rgba(0,0,0,0.85) !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(4px) !important;
  }

  .pre-battle-screen .pb2-stat-chip.win { 
    color: #4ade80 !important; 
    border-color: rgba(74, 222, 128, 0.3) !important;
  }
  .pre-battle-screen .pb2-stat-chip.lose { 
    color: #f87171 !important; 
    border-color: rgba(248, 113, 113, 0.3) !important;
  }

  /* Hide passives completely */
  .pre-battle-screen .pb2-mob-passives,
  .pre-battle-screen .pb2-mob-passives * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* ===== REWARDS PREVIEW (mobile) ===== */
  .pre-battle-screen .pb2-rewards-preview {
    padding: 10px 12px 8px !important;
    margin-top: 8px !important;
  }

  .pre-battle-screen .pb2-rewards-header {
    font-size: 0.72rem !important;
    margin-bottom: 8px !important;
  }

  .pre-battle-screen .pb2-reward-badge {
    font-size: 0.68rem !important;
    padding: 4px 8px !important;
  }

  .pre-battle-screen .pb2-reward-value {
    font-size: 0.72rem !important;
  }

  .pre-battle-screen .pb2-reward-label {
    font-size: 0.58rem !important;
  }

  .pre-battle-screen .pb2-rewards-chest-grid {
    gap: 4px !important;
  }

  .pre-battle-screen .pb2-chest-card {
    padding: 6px 4px !important;
  }

  .pre-battle-screen .pb2-chest-card-icon {
    font-size: 0.85rem !important;
  }

  .pre-battle-screen .pb2-chest-card-range {
    font-size: 0.6rem !important;
  }

  .pre-battle-screen .pb2-chest-card-label {
    font-size: 0.52rem !important;
  }

  .pre-battle-screen .pb2-rewards-locked {
    font-size: 0.65rem !important;
  }

  .pre-battle-screen .pb2-rewards-tips {
    font-size: 0.58rem !important;
  }

  /* ===== DRAWER (for item selection) ===== */
  .pre-battle-screen .pb2-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.85) !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  .pre-battle-screen .pb2-drawer {
    width: 100% !important;
    max-height: 70vh !important;
    background: #1a1c24 !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 14px !important;
    overflow-y: auto !important;
  }

  .pre-battle-screen .pb2-drawer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }

  .pre-battle-screen .pb2-drawer-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  .pre-battle-screen .pb2-drawer-close {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .pre-battle-screen .pb2-drawer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* ===== ACTION BUTTONS - COMPACT ===== */
  .pre-battle-screen .pb2-actions {
    display: flex !important;
    gap: 6px !important;
    padding: 10px 8px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    margin-bottom: 50px !important; /* Space for bottom nav */
    background: rgba(20, 22, 28, 0.98) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .pre-battle-screen .pb2-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 10px 8px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
  }

  .pre-battle-screen .pb2-btn:active {
    transform: scale(0.97) !important;
  }

  .pre-battle-screen .pb2-auto-btn {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
    flex: 0.8 !important;
  }

  .pre-battle-screen .pb2-hint-btn {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    color: #fff !important;
    flex: 0.8 !important;
  }

  .pre-battle-screen .pb2-hint-cost {
    font-size: 0.55rem !important;
    opacity: 0.9 !important;
  }

  .pre-battle-screen .pb2-fight-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
    flex: 1.4 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 3px 12px rgba(34, 197, 94, 0.4) !important;
  }

  .pre-battle-screen .pb2-btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
  }

  /* ===== HINT MODAL ===== */
  .pre-battle-screen .pb2-hint-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.9) !important;
    z-index: 10001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
  }

  .pre-battle-screen .pb2-hint-modal {
    width: 100% !important;
    max-width: 320px !important;
    background: #1a1c24 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    overflow: hidden !important;
  }

  .pre-battle-screen .pb2-hint-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    background: rgba(0,0,0,0.3) !important;
  }

  .pre-battle-screen .pb2-hint-modal-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
  }

  .pre-battle-screen .pb2-hint-modal-close {
    width: 28px !important;
    height: 28px !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .pre-battle-screen .pb2-hint-modal-body {
    padding: 14px !important;
  }

  .pre-battle-screen .pb2-repair-modal {
    width: 100% !important;
    max-width: 320px !important;
    background: linear-gradient(180deg, #191722 0%, #0e1118 100%) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(247,160,15,0.32) !important;
    overflow: hidden !important;
    box-shadow: 0 18px 46px rgba(0,0,0,0.62), 0 0 0 1px rgba(247,160,15,0.18), 0 0 20px rgba(247,160,15,0.14) !important;
  }

  .pre-battle-screen .pb2-repair-modal-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #ffd789 !important;
  }

  .pre-battle-screen .pb2-repair-modal-body {
    padding: 14px !important;
    display: grid !important;
    gap: 10px !important;
  }

  .pre-battle-screen .pb2-repair-meta,
  .pre-battle-screen .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.22) !important;
    border-radius: 10px !important;
    padding: 10px !important;
  }

  .pre-battle-screen .pb2-repair-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .pre-battle-screen .pb2-repair-meta-row + .pb2-repair-meta-row {
    margin-top: 6px !important;
  }

  .pre-battle-screen .pb2-repair-meta-label {
    color: rgba(255,255,255,0.75) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
  }

  .pre-battle-screen .pb2-repair-slot-name,
  .pre-battle-screen .pb2-repair-cost-value {
    color: #fff !important;
    font-size: 0.88rem !important;
  }

  .pre-battle-screen .pb2-repair-durability.is-broken {
    color: #ff7d7d !important;
  }

  .pre-battle-screen .pb2-repair-durability.is-worn {
    color: #ffcf7f !important;
  }

  .pre-battle-screen .pb2-repair-meta-subtext,
  .pre-battle-screen .pb2-repair-cost-note {
    font-size: 0.7rem !important;
    color: rgba(255,255,255,0.6) !important;
  }

  .pre-battle-screen .pb2-repair-cost-title {
    color: #ffcf7e !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
  }

  .pre-battle-screen .pb2-repair-cost-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  .pre-battle-screen .pb2-repair-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .pre-battle-screen .pb2-repair-btn {
    width: 100% !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 8px 10px !important;
  }

  .pre-battle-screen .pb2-repair-btn-cancel {
    border: 1px solid rgba(255,255,255,0.22) !important;
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
  }

  .pre-battle-screen .pb2-repair-btn-confirm {
    border: 1px solid rgba(255,231,168,0.35) !important;
    background: linear-gradient(135deg, #f7a00f, #db7d00) !important;
    color: #1a1305 !important;
  }

  .pre-battle-screen .pb2-matchup-header {
    text-align: center !important;
    margin-bottom: 12px !important;
    font-size: 0.85rem !important;
    color: rgba(255,255,255,0.8) !important;
  }

  .pre-battle-screen .pb2-matchup-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .pre-battle-screen .pb2-matchup-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.05) !important;
  }

  .pre-battle-screen .pb2-matchup-row.boost {
    background: rgba(34,197,94,0.2) !important;
    border: 1px solid rgba(34,197,94,0.3) !important;
  }

  .pre-battle-screen .pb2-matchup-row.penalty {
    background: rgba(239,68,68,0.2) !important;
    border: 1px solid rgba(239,68,68,0.3) !important;
  }

  .pre-battle-screen .pb2-matchup-element {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
  }

  .pre-battle-screen .pb2-matchup-effect {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
  }

  .pre-battle-screen .pb2-matchup-row.boost .pb2-matchup-effect { color: #4ade80 !important; }
  .pre-battle-screen .pb2-matchup-row.penalty .pb2-matchup-effect { color: #f87171 !important; }

  /* Reset any conflicting styles */
  .pre-battle-screen .pb2-combatant {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
  }

  /* Badges display */
  .pre-battle-screen .pb2-enemy-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  .pre-battle-screen .pb2-badge {
    font-size: 0.65rem !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.1) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }

  .pre-battle-screen .pb2-badge.elite {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #000 !important;
  }
}


/* ==========================================
   SMALLER SCREENS - 480px
   ========================================== */

@media screen and (max-width: 480px) {
  .battle-arena .monster-card {
    max-width: 300px !important;
    min-height: 180px !important;
  }

  .battle-arena .monster-name {
    font-size: 1.1rem !important;
  }

  .battle-arena .skill-btn {
    height: 50px !important;
  }

  .battle-arena .flee-btn {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
  }

  /* Pre-battle - slightly smaller on 480px */
  .pre-battle-screen .pb2-enemy-side {
    min-height: 140px !important;
    height: auto !important;
  }

  .pre-battle-screen .pb2-stat {
    font-size: 0.6rem !important;
    padding: 2px 4px !important;
  }

  .pre-battle-screen .pb2-stat-chip {
    font-size: 0.6rem !important;
    padding: 2px 4px !important;
  }
}


/* ==========================================
   SMALLEST SCREENS - 360px
   ========================================== */

@media screen and (max-width: 360px) {
  .battle-arena .monster-name {
    font-size: 1rem !important;
  }

  .battle-arena .skill-buttons {
    gap: 4px !important;
  }

  .battle-arena .skill-btn {
    height: 46px !important;
    padding: 2px !important;
  }

  .battle-arena .skill-btn .skill-icon {
    font-size: 1.1rem !important;
  }

  .battle-arena .skill-btn .skill-name {
    display: none !important;
  }

  .battle-arena .flee-btn {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
  }

  .battle-arena .battle-footer {
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .battle-arena .player-hp-bar {
    height: 22px !important;
  }

  .battle-arena .player-hp-text {
    font-size: 0.6rem !important;
  }

  /* Pre-battle on smallest screens */
  .pre-battle-screen .pb2-enemy-side {
    min-height: 120px !important;
    height: auto !important;
  }

  .pre-battle-screen .pb2-equipment-col {
    gap: 4px !important;
  }

  .pre-battle-screen .pb2-slot {
    border-width: 2px !important;
  }

  .pre-battle-screen .pb2-stat {
    font-size: 0.55rem !important;
    padding: 2px 3px !important;
  }

  .pre-battle-screen .pb2-stat-chip {
    font-size: 0.55rem !important;
    padding: 2px 3px !important;
  }

  .pre-battle-screen .pb2-btn {
    padding: 10px 6px !important;
    font-size: 0.75rem !important;
  }
}


/* ==========================================
   PORTRAIT MODE - Ensure enemy HP visible
   iPhone 16 Pro Max and similar tall phones
   ========================================== */

@media screen and (orientation: portrait) and (max-width: 480px) {
  /* In-battle: ensure monster HP bar is visible above footer */
  .battle-arena .monster-info-panel {
    padding-bottom: 8px !important;
  }
  
  .battle-arena .monster-hp,
  .battle-arena .monster-hp.hidden {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 90% !important;
    margin: 4px auto !important;
  }

  /* Pre-battle: ensure enemy stats overlay is visible */
  .pre-battle-screen .pb2-enemy-side {
    overflow: visible !important;
    min-height: 160px !important;
  }

  .pre-battle-screen .pb2-enemy-image-container,
  .pre-battle-screen .pb2-enemy-image-container.enlarged {
    overflow: visible !important;
    min-height: 140px !important;
  }

  .pre-battle-screen .pb2-enemy-stats-overlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 25 !important;
  }

  /* Ensure the arena is scrollable in portrait */
  .pre-battle-screen .pb2-arena {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE PERF OVERRIDES — battle-wide
   Players reported "phone overheats during battles". Profiling on real
   devices showed the dominant costs are:

     1. backdrop-filter:blur on header/footer/chips — every frame the GPU
        re-blurs the WebGL scene underneath. Costs ~3-5 ms per element on
        mid-tier Android. Multiple stacked = frame drops.
     2. Continuous infinite CSS animations on idle UI (shimmers, pulses,
        glows, sparkles, bounces). Each one keeps a composite layer dirty
        forever, even when nothing is changing meaningfully.
     3. drop-shadow / box-shadow blurs on small icons (drop-shadow with
        10-20px radius is repainted every frame on animated parents).
     4. CSS conic-gradients + radial-gradients animated at 60 fps.

   Strategy on touch devices:
     - Drop ALL backdrop-filter (replace with opaque backgrounds).
     - Disable the most expensive infinite animations (shimmers, sparkles).
     - Slow remaining "look-alive" animations (pulses, glows) by 2-3x.
     - Halve drop-shadow radii where they appear on continuously-painted
       elements.

   Visual impact: minor. Battery / heat improvement: large.
   ═════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {

  /* ── 1. Drop backdrop-filters everywhere in the battle UI ───────────── */
  .battle-arena *,
  .b3-arena *,
  .b3-post-battle-screen *,
  .b4-root *,
  .b4-post-overlay *,
  .b4c-root *,
  .pre-battle-screen *,
  .b3-chest-opener *,
  .wbs-root * {
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  /* ── 2. Kill purely decorative infinite animations ──────────────────── */
  /* Shimmers and sparkles — visible only when actively reading them, but
     run forever and dirty their composite layer every frame. */
  .b4-root [class*="shimmer"],
  .b3-arena [class*="shimmer"],
  .b3-post-battle-screen [class*="shimmer"],
  .battle-arena [class*="shimmer"],
  .pre-battle-screen [class*="shimmer"],
  .b3-chest-opener [class*="shimmer"],
  .wbs-root [class*="shimmer"],
  .b4-root [class*="sparkle"],
  .b3-arena [class*="sparkle"],
  .b3-post-battle-screen [class*="sparkle"],
  .pre-battle-screen [class*="sparkle"] {
    animation: none !important;
  }
  /* Background panel shimmers (e.g. .b3-rewards-overview shimmer overlay) */
  .b3-arena .b3-rewards-overview::before,
  .b3-post-battle-screen .b3-rewards-overview::before {
    animation: none !important;
    display: none !important;
  }

  /* ── 3. Slow remaining "look-alive" infinite pulses to ~2x ─────────── */
  /* These visually still pulse, just at half the cost. They were the
     biggest contributors to idle GPU heat after the WebGL scene itself. */
  .b4-pill,
  .b4-pill.enraged,
  .b4-passive-icon,
  .b4-charge-ball,
  .b3-rc-chance,
  .b3-rewards-title,
  .b3-spinwheel-wrap [class*="pulse"],
  .b4-root [class*="pulse"]:not(.b4-player-hp-fill),
  .pb2-difficulty.elite,
  .b4c-result.is-mythic [class*="rainbow"] {
    animation-duration: 4s !important;
  }
  /* Low-HP critical pulse stays fast — players need that warning. */

  /* ── 4. Halve heavy drop-shadow blurs on continuously-painted elems ── */
  .b4-pill,
  .b4-passive-icon,
  .b4-charge-ball,
  .b4-die3d,
  .pb2-stat-chip,
  .b3-stat-chip,
  .wbs-streak,
  .b3-rewards-title {
    filter: none !important;
  }

  /* ── 5. Kill rainbow gradient animations on idle reward cards ────── */
  /* The animated background-position rainbow shimmer on jackpot/mythic
     cards re-rasterizes the gradient every frame. Static gold reads fine. */
  .b3-spin-result.tier-7 [class*="rainbow"],
  .b4c-cell.is-rainbow,
  .b4c-cell.is-rainbow::after,
  .b3-rc-name [class*="rainbow"] {
    animation: none !important;
  }

  /* ── 6. Disable continuous box-shadow glow loops on chips/badges ──── */
  /* box-shadow animations cause the entire element's composite layer to
     repaint — surprisingly costly for a soft glow that nobody is watching. */
  .b4-stat-chip,
  .b3-stat-chip,
  .b4-pill.enraged,
  .pb2-badge.elite,
  .b3-near-miss [class*="pulse"] {
    animation: none !important;
  }

  /* ── 7. Drop expensive conic-gradient + animated rotation backgrounds */
  /* The arena bg "stars" / "rays" are nice but invisible behind the WebGL
     scene most of the time. Freeze them. */
  .b4-stage-bg,
  .b3-arena-bg-effects,
  .battle-arena .arena-bg-effects {
    animation: none !important;
  }

  /* ── 8. Reduce blur radii in remaining filter:blur uses (used during
     transitions only — keep the effect but make it cheaper). */
  .b4-stage-bg { filter: blur(2px) !important; }
}

/* Even more aggressive on truly small / low-end screens */
@media (max-width: 480px) {
  /* Disable arena background entirely — the WebGL scene + dim overlay
     read clearly without it. */
  .b4-stage-bg,
  .b3-arena-bg-effects { display: none !important; }
}

/* Respect reduced-motion preference everywhere in battle */
@media (prefers-reduced-motion: reduce) {
  .battle-arena *,
  .b3-arena *,
  .b3-post-battle-screen *,
  .b4-root *,
  .b4c-root *,
  .pre-battle-screen *,
  .wbs-root * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
  }
}