/* ==========================================================================
   DEXTER BATTLE STYLES
   ========================================================================== */

/* ==========================================================================
   SECTION 1: BATTLE ROOM LAYOUT
   ========================================================================== */

/* When viewing a battle, hide the main menu container completely */
/* The main menu is inside #room- which is a .ps-room.scrollable */
body.battle-active #room-,
body.battle-active .ps-room#room-,
body.battle-active .ps-room.scrollable:not([id^="room-battle"]):not([id="room-rooms"]) {
  display: none !important;
}

/* Also hide the main menu wrapper directly */
body.battle-active .mainmenuwrapper,
body.battle-active .leftmenu:not(.battle-log .leftmenu) {
  display: none !important;
}

/* Make battle room take full width */
.ps-room[id^="battle-"] {
  position: fixed !important;
  top: 60px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  background: var(--dx-bg-deep) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Battle wrapper layout */
.ps-room[id^="battle-"] .battle-wrapper {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100% !important;
  gap: 0 !important;
}

/* ==========================================================================
   SECTION 2: BATTLE SCENE (LEFT SIDE)
   ========================================================================== */

.ps-room[id^="battle-"] .battle {
  flex: 1 !important;
  max-width: 640px !important;
  min-width: 400px !important;
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
}

.ps-room[id^="battle-"] .innerbattle {
  flex: 1 !important;
  position: relative !important;
}

/* ==========================================================================
   SECTION 3: BATTLE LOG + CHAT (RIGHT SIDE)
   ========================================================================== */

.ps-room[id^="battle-"] .battle-log {
  flex: 1 !important;
  min-width: 300px !important;
  max-width: 500px !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--dx-bg-base) !important;
  border-left: 1px solid var(--dx-border) !important;
}

.ps-room[id^="battle-"] .battle-log .inner {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--dx-text-secondary) !important;
}

/* Log entries */
.ps-room[id^="battle-"] .battle-log .inner > div {
  margin-bottom: 6px !important;
}

.ps-room[id^="battle-"] .battle-log .inner strong {
  color: var(--dx-text) !important;
}

/* Turn headers */
.ps-room[id^="battle-"] .battle-log h2 {
  background: var(--dx-accent-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 16px 0 8px 0 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

/* Wallet connection messages */
.ps-room[id^="battle-"] .battle-log code {
  background: var(--dx-bg-elevated) !important;
  padding: 2px 6px !important;
  border-radius: 2px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: var(--dx-accent) !important;
}

/* ==========================================================================
   SECTION 4: CHAT INPUT (CRITICAL - MAKE IT VISIBLE!)
   ========================================================================== */

/* Chat container */
.ps-room[id^="battle-"] .chat-log-add {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--dx-bg-elevated) !important;
  border-top: 1px solid var(--dx-border) !important;
  padding: 12px !important;
  min-height: 80px !important;
}

/* Chatbox wrapper */
.ps-room[id^="battle-"] .chatbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Username label */
.ps-room[id^="battle-"] .chatbox label {
  color: var(--dx-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* THE CHAT INPUT TEXTAREA */
.ps-room[id^="battle-"] .chatbox textarea.textbox {
  flex: 1 !important;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  min-height: 40px !important;
  max-height: 80px !important;
  padding: 10px 14px !important;
  background: var(--dx-bg-deep) !important;
  border: 1px solid var(--dx-border-light) !important;
  border-radius: 2px !important;
  color: var(--dx-text) !important;
  font-size: 14px !important;
  font-family: inherit !important;
  resize: none !important;
  outline: none !important;
}

.ps-room[id^="battle-"] .chatbox textarea.textbox:focus {
  border-color: var(--dx-accent) !important;
  box-shadow: 0 0 0 1px var(--dx-accent) !important;
}

.ps-room[id^="battle-"] .chatbox textarea.textbox::placeholder {
  color: var(--dx-text-muted) !important;
  opacity: 0.7 !important;
}

/* ==========================================================================
   SECTION 5: USER LIST IN CHAT
   ========================================================================== */

.ps-room[id^="battle-"] .userlist {
  background: var(--dx-bg-base) !important;
  border-top: 1px solid var(--dx-border) !important;
  padding: 8px 0 !important;
}

.ps-room[id^="battle-"] .userlist li {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.ps-room[id^="battle-"] .userlist button {
  display: block !important;
  width: 100% !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: none !important;
  color: var(--dx-text-secondary) !important;
  font-size: 12px !important;
  text-align: left !important;
  cursor: pointer !important;
}

.ps-room[id^="battle-"] .userlist button:hover {
  background: var(--dx-bg-elevated) !important;
  color: var(--dx-text) !important;
}

/* ==========================================================================
   SECTION 6: BATTLE CONTROLS
   ========================================================================== */

.ps-room[id^="battle-"] .battle-controls {
  background: var(--dx-bg-base) !important;
  border-top: 1px solid var(--dx-border) !important;
  padding: 16px !important;
}

/* "What will X do?" header */
.ps-room[id^="battle-"] .battle-controls .whatdo {
  color: var(--dx-text) !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

.ps-room[id^="battle-"] .battle-controls .whatdo strong {
  color: var(--dx-accent) !important;
}

/* HP display */
.ps-room[id^="battle-"] .battle-controls .hpbar {
  background: var(--dx-bg-elevated) !important;
  padding: 4px 8px !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  color: var(--dx-text-muted) !important;
}

/* Timer button */
.ps-room[id^="battle-"] button[name="setTimer"],
.ps-room[id^="battle-"] button[name="openTimer"] {
  display: none !important;
}

/* ==========================================================================
   SECTION 7: MOVE BUTTONS
   ========================================================================== */

.ps-room[id^="battle-"] .movemenu {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.ps-room[id^="battle-"] .movemenu button {
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 2px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
  cursor: pointer !important;
  transition: transform 0.1s, filter 0.1s !important;
}

.ps-room[id^="battle-"] .movemenu button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
}

.ps-room[id^="battle-"] .movemenu button:active {
  transform: translateY(0) !important;
}

/* Move type colors (Pokémon type gradients) */
.ps-room[id^="battle-"] .movemenu button.type-Normal { background: linear-gradient(135deg, #A8A878, #8A8A5A) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Fire { background: linear-gradient(135deg, #F08030, #DD6610) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Water { background: linear-gradient(135deg, #6890F0, #4A70D0) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Electric { background: linear-gradient(135deg, #F8D030, #E5B010) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Grass { background: linear-gradient(135deg, #78C850, #5AA830) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Ice { background: linear-gradient(135deg, #98D8D8, #76B8B8) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Fighting { background: linear-gradient(135deg, #C03028, #A01008) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Poison { background: linear-gradient(135deg, #A040A0, #803080) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Ground { background: linear-gradient(135deg, #E0C068, #C0A048) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Flying { background: linear-gradient(135deg, #A890F0, #8870D0) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Psychic { background: linear-gradient(135deg, #F85888, #D83868) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Bug { background: linear-gradient(135deg, #A8B820, #889800) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Rock { background: linear-gradient(135deg, #B8A038, #988018) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Ghost { background: linear-gradient(135deg, #705898, #504078) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Dragon { background: linear-gradient(135deg, #7038F8, #5018D8) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Dark { background: linear-gradient(135deg, #705848, #504028) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Steel { background: linear-gradient(135deg, #B8B8D0, #9898B0) !important; }
.ps-room[id^="battle-"] .movemenu button.type-Fairy { background: linear-gradient(135deg, #EE99AC, #CE798C) !important; }

/* Move info (PP, type label) */
.ps-room[id^="battle-"] .movemenu button small {
  display: block !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
  margin-top: 4px !important;
}

/* ==========================================================================
   SECTION 8: SWITCH POKEMON MENU
   ========================================================================== */

.ps-room[id^="battle-"] .switchmenu {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.ps-room[id^="battle-"] .switchmenu button {
  padding: 10px 12px !important;
  background: var(--dx-bg-elevated) !important;
  border: 1px solid var(--dx-border) !important;
  border-radius: 2px !important;
  color: var(--dx-text) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.ps-room[id^="battle-"] .switchmenu button:hover:not([disabled]) {
  background: var(--dx-bg-light) !important;
  border-color: var(--dx-accent) !important;
}

.ps-room[id^="battle-"] .switchmenu button[disabled] {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ==========================================================================
   SECTION 9: STAT BARS (Pokemon names, HP)
   ========================================================================== */

.ps-room[id^="battle-"] .statbar {
  background: rgba(0, 0, 0, 0.85) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  padding-bottom: 6px !important;
  color: #fff !important;
  font-size: 12px !important;
  text-shadow: none !important;
  z-index: 100 !important;
  position: absolute !important;
  overflow: visible !important; /* Allow status badges to show outside */
}

/* Status effects (burn, poison, stat changes) - show BELOW the statbar */
.ps-room[id^="battle-"] .statbar .hpbar .status {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: calc(100% + 4px) !important; /* Position below the HP bar */
  width: max-content !important;
  max-width: 200px !important;
  z-index: 200 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  padding: 4px 6px !important;
  background: rgba(0, 0, 0, 0.9) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Ensure hpbar allows overflow */
.ps-room[id^="battle-"] .statbar .hpbar {
  overflow: visible !important;
}

.ps-room[id^="battle-"] .statbar .status span {
  display: inline-block !important;
  padding: 2px 6px !important;
  margin: 1px 2px !important;
  border-radius: 3px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Status condition badges */
.ps-room[id^="battle-"] .statbar .status span.brn {
  background: linear-gradient(135deg, #F44336, #D32F2F) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(244, 67, 54, 0.4) !important;
}

.ps-room[id^="battle-"] .statbar .status span.psn,
.ps-room[id^="battle-"] .statbar .status span.tox {
  background: linear-gradient(135deg, #9C27B0, #7B1FA2) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(156, 39, 176, 0.4) !important;
}

.ps-room[id^="battle-"] .statbar .status span.par {
  background: linear-gradient(135deg, #FFC107, #FFA000) !important;
  color: #000 !important;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.4) !important;
}

.ps-room[id^="battle-"] .statbar .status span.slp {
  background: linear-gradient(135deg, #9E9E9E, #757575) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(158, 158, 158, 0.4) !important;
}

.ps-room[id^="battle-"] .statbar .status span.frz {
  background: linear-gradient(135deg, #00BCD4, #0097A7) !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 188, 212, 0.4) !important;
}

/* Stat boost badges */
.ps-room[id^="battle-"] .statbar .status span.good {
  background: linear-gradient(135deg, #4CAF50, #388E3C) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.4) !important;
}

/* Stat drop badges */
.ps-room[id^="battle-"] .statbar .status span.bad {
  background: linear-gradient(135deg, #FF5722, #E64A19) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(255, 87, 34, 0.4) !important;
}

/* Neutral stat changes */
.ps-room[id^="battle-"] .statbar .status span.neutral {
  background: linear-gradient(135deg, #607D8B, #455A64) !important;
  color: #fff !important;
  border: none !important;
}

.ps-room[id^="battle-"] .statbar strong {
  font-weight: 600 !important;
  color: #fff !important;
}

.ps-room[id^="battle-"] .statbar .hpbar {
  background: #333 !important;
  border-radius: 2px !important;
  height: 8px !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

.ps-room[id^="battle-"] .statbar .hpbar > div {
  height: 100% !important;
  transition: width 0.3s ease !important;
}

/* HP colors */
.ps-room[id^="battle-"] .statbar .hpbar.hp-green > div { background: #4CAF50 !important; }
.ps-room[id^="battle-"] .statbar .hpbar.hp-yellow > div { background: #FFC107 !important; }
.ps-room[id^="battle-"] .statbar .hpbar.hp-red > div { background: #F44336 !important; }

/* ==========================================================================
   SECTION 10: TEAM ICONS (Pokeball display)
   ========================================================================== */

.ps-room[id^="battle-"] .trainer-pokemon {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.ps-room[id^="battle-"] .trainer-pokemon .picon {
  width: 40px !important;
  height: 30px !important;
}

/* ==========================================================================
   SECTION 11: MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  .ps-room[id^="battle-"] {
    flex-direction: column !important;
  }
  
  .ps-room[id^="battle-"] .battle-wrapper {
    flex-direction: column !important;
  }
  
  .ps-room[id^="battle-"] .battle {
    max-width: 100% !important;
    min-width: 100% !important;
    height: 50vh !important;
  }
  
  .ps-room[id^="battle-"] .battle-log {
    max-width: 100% !important;
    min-width: 100% !important;
    flex: 1 !important;
    border-left: none !important;
    border-top: 1px solid var(--dx-border) !important;
  }
  
  .ps-room[id^="battle-"] .battle-controls {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
  
  .ps-room[id^="battle-"] .movemenu {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .ps-room[id^="battle-"] .switchmenu {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Make chat more prominent on mobile */
  .ps-room[id^="battle-"] .chat-log-add {
    padding: 8px !important;
    min-height: 60px !important;
  }
  
  .ps-room[id^="battle-"] .chatbox textarea.textbox {
    min-height: 36px !important;
    font-size: 16px !important; /* Prevent zoom on iOS */
  }
  
  /* MOBILE: Larger Pokemon names and HP bars */
  .ps-room[id^="battle-"] .statbar {
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
  }
  
  .ps-room[id^="battle-"] .statbar strong {
    font-size: 15px !important;
    font-weight: 700 !important;
  }
  
  .ps-room[id^="battle-"] .statbar .hpbar {
    height: 10px !important;
    margin-top: 6px !important;
    border-radius: 3px !important;
  }
  
  .ps-room[id^="battle-"] .statbar .status span {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
}

/* ==========================================================================
   SECTION 12: BATTLE OPTIONS BUTTON
   ========================================================================== */

.ps-room[id^="battle-"] button[name="openBattleOptions"] {
  background: var(--dx-bg-elevated) !important;
  border: 1px solid var(--dx-border) !important;
  border-radius: 2px !important;
  color: var(--dx-text-secondary) !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
}

.ps-room[id^="battle-"] button[name="openBattleOptions"]:hover {
  background: var(--dx-bg-light) !important;
  color: var(--dx-text) !important;
}

/* ==========================================================================
   SECTION 13: POST-BATTLE BUTTONS (Main menu, Rematch, Replay, etc.)
   ========================================================================== */

/* Container for post-battle buttons */
.ps-room[id^="battle-"] .battle-controls p {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 8px 0 !important;
}

/* Base style for ALL buttons in battle controls */
.ps-room[id^="battle-"] .battle-controls button,
.ps-room[id^="battle-"] .battle-controls a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  background: var(--dx-bg-elevated) !important;
  border: 1px solid var(--dx-border) !important;
  border-radius: 4px !important;
  color: var(--dx-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--dx-font-display), system-ui, sans-serif !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.ps-room[id^="battle-"] .battle-controls button:hover,
.ps-room[id^="battle-"] .battle-controls a:hover {
  background: var(--dx-bg-light) !important;
  border-color: var(--dx-accent) !important;
  color: var(--dx-accent) !important;
  transform: translateY(-1px) !important;
}

.ps-room[id^="battle-"] .battle-controls button:active,
.ps-room[id^="battle-"] .battle-controls a:active {
  transform: translateY(0) !important;
}

/* Primary action buttons (Main menu, Rematch) */
.ps-room[id^="battle-"] .battle-controls button strong {
  font-weight: 700 !important;
  color: inherit !important;
}

/* Icon styling in buttons */
.ps-room[id^="battle-"] .battle-controls button i,
.ps-room[id^="battle-"] .battle-controls a i {
  font-size: 14px !important;
  opacity: 0.8 !important;
}

/* Special styling for primary buttons */
.ps-room[id^="battle-"] .battle-controls button:has(strong) {
  background: linear-gradient(135deg, var(--dx-accent), var(--dx-accent-dark, #8B5CF6)) !important;
  border: none !important;
  color: #fff !important;
}

.ps-room[id^="battle-"] .battle-controls button:has(strong):hover {
  filter: brightness(1.1) !important;
  color: #fff !important;
}

/* Download/upload replay links */
.ps-room[id^="battle-"] .battle-controls a[href*="download"],
.ps-room[id^="battle-"] .battle-controls a[href*="replay"] {
  background: var(--dx-bg-surface) !important;
}

/* Instant replay button */
.ps-room[id^="battle-"] .battle-controls button:contains("Instant"),
.ps-room[id^="battle-"] .battle-controls button[value*="instant"] {
  background: var(--dx-bg-surface) !important;
  border-color: var(--dx-border-light) !important;
}

/* ==========================================================================
   SECTION 14: REPLAY CONTROLS (Pause, Skip, etc.)
   ========================================================================== */

/* Replay control bar */
.replay-controls,
.replay-controls-2 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 12px !important;
  background: var(--dx-bg-elevated) !important;
  border-radius: 4px !important;
  margin: 8px 0 !important;
}

/* All replay control buttons */
.replay-controls button,
.replay-controls-2 button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 36px !important;
  padding: 0 12px !important;
  background: var(--dx-bg-surface) !important;
  border: 1px solid var(--dx-border) !important;
  border-radius: 4px !important;
  color: var(--dx-text) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--dx-font-display), system-ui, sans-serif !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.replay-controls button:hover,
.replay-controls-2 button:hover {
  background: var(--dx-bg-light) !important;
  border-color: var(--dx-accent) !important;
  color: var(--dx-accent) !important;
}

.replay-controls button:disabled,
.replay-controls-2 button:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Icon buttons (play, pause, skip) */
.replay-controls button i,
.replay-controls-2 button i {
  font-size: 14px !important;
}

/* Playback speed or turn indicator */
.replay-controls input,
.replay-controls-2 input {
  background: var(--dx-bg-deep) !important;
  border: 1px solid var(--dx-border) !important;
  border-radius: 4px !important;
  color: var(--dx-text) !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  width: 60px !important;
}

/* ==========================================================================
   SECTION 15: SPECTATOR CONTROLS (Switch viewpoint, etc.)
   ========================================================================== */

.battle-controls .replay-controls button,
.battle-controls .switchviewpoint {
  background: var(--dx-bg-surface) !important;
  border: 1px solid var(--dx-border) !important;
  border-radius: 4px !important;
  color: var(--dx-text-secondary) !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.battle-controls .replay-controls button:hover,
.battle-controls .switchviewpoint:hover {
  background: var(--dx-bg-elevated) !important;
  color: var(--dx-text) !important;
  border-color: var(--dx-accent) !important;
}

/* ==========================================================================
   SECTION 16: FORFEIT BUTTON (Special styling)
   ========================================================================== */

.ps-room[id^="battle-"] button[name="forfeit"],
.ps-room[id^="battle-"] .battle-controls button:contains("Forfeit") {
  background: linear-gradient(135deg, #EF4444, #DC2626) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.ps-room[id^="battle-"] button[name="forfeit"]:hover {
  filter: brightness(1.1) !important;
}

/* ==========================================================================
   SECTION 17: MOBILE BATTLE CONTROLS (Fixed layout)
   ========================================================================== */

@media (max-width: 768px) {
  /* Replay controls - horizontal scroll on mobile */
  .replay-controls,
  .replay-controls-2,
  .battle-controls p {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    margin: 4px 0 !important;
    scrollbar-width: none !important;
  }
  
  .replay-controls::-webkit-scrollbar,
  .replay-controls-2::-webkit-scrollbar,
  .battle-controls p::-webkit-scrollbar {
    display: none !important;
  }
  
  /* All buttons same size on mobile */
  .replay-controls button,
  .replay-controls-2 button,
  .battle-controls p button {
    flex-shrink: 0 !important;
    min-width: auto !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    height: auto !important;
    border-radius: 6px !important;
  }
  
  /* Hide redundant text, show icons on mobile if available */
  .battle-controls p button {
    background: rgba(255, 140, 0, 0.1) !important;
    border: 1px solid rgba(255, 140, 0, 0.3) !important;
    color: #ff8c00 !important;
  }
  
  .battle-controls p button:active {
    background: rgba(255, 140, 0, 0.2) !important;
  }
}