/* ==========================================================================
   MeawNarok MMORPG - Fantasy Game Windows Design System (CSS Magic Edition)
   Pure CSS - Zero Extra Image Assets Required
   ========================================================================== */

/* ==========================================================================
   1. Universal Master Fantasy Window Framing
   ========================================================================== */
#inventory-window.inven-dialog,
#equipment-window.equip-dialog,
#stats-window.stats-dialog,
#storage-window.storage-dialog,
#kafra-dialog.kafra-npc-window,
#upgrade-npc-dialog.kafra-npc-window,
#general-npc-dialog.kafra-npc-window,
#shop-dialog,
#auto-combat-modal.auto-combat-dialog,
#leaderboard-modal.leaderboard-dialog,
#inspect-player-window.inspect-player-dialog,
#dye-studio-modal.dye-studio-modal,
#channel-switch-modal.channel-switch-dialog,
#arena-board-modal.arena-board-dialog {
  position: absolute;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(30, 46, 74, 0.98) 0%, rgba(15, 23, 42, 0.97) 55%, rgba(9, 13, 24, 0.99) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.65);
  border-radius: 14px;
  box-shadow: 
    0 22px 65px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(10, 15, 26, 0.9),
    inset 0 0 0 1px rgba(254, 240, 138, 0.25),
    inset 0 0 35px rgba(0, 0, 0, 0.7),
    0 0 25px rgba(245, 158, 11, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Medieval Gold Edge Bevel on Top of Every Master Window */
#inventory-window.inven-dialog::before,
#equipment-window.equip-dialog::before,
#stats-window.stats-dialog::before,
#storage-window.storage-dialog::before,
#kafra-dialog.kafra-npc-window::before,
#upgrade-npc-dialog.kafra-npc-window::before,
#general-npc-dialog.kafra-npc-window::before,
#shop-dialog::before,
#auto-combat-modal.auto-combat-dialog::before,
#leaderboard-modal.leaderboard-dialog::before,
#inspect-player-window.inspect-player-dialog::before,
#channel-switch-modal.channel-switch-dialog::before,
#arena-board-modal.arena-board-dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(245, 158, 11, 0.5) 15%, 
    rgba(254, 240, 138, 0.95) 50%, 
    rgba(245, 158, 11, 0.5) 85%, 
    transparent 100%
  );
  z-index: 10;
  pointer-events: none;
}

/* ==========================================================================
   2. Universal Window Header & Actions (Engraved Metallic Bar)
   ========================================================================== */
.ro-window .window-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.45);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.ro-window .window-header:active {
  cursor: grabbing;
}

.ro-window .window-header span:not(.btn-text):not(.btn-icon):not(.lb-cache-badge) {
  font-family: var(--font-hud, 'Outfit', 'Chakra Petch', sans-serif);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #fef08a;
  text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(245, 158, 11, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Universal Ruby Jewel Close Button */
.ro-window .btn-close {
  width: 26px;
  height: 26px;
  background: radial-gradient(circle at 35% 35%, #ef4444 0%, #991b1b 100%);
  border: 1.5px solid rgba(254, 202, 202, 0.6);
  border-radius: 7px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ro-window .btn-close:hover {
  background: radial-gradient(circle at 35% 35%, #f87171 0%, #dc2626 100%);
  border-color: #ffffff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: scale(1.08);
}

.ro-window .btn-close:active {
  transform: scale(0.92);
}

/* ==========================================================================
   3. Inventory Window (I) Special Polish
   ========================================================================== */
#inventory-window .btn-sort-inven {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fef08a;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.5);
  transition: all 0.18s ease;
  cursor: pointer;
}

#inventory-window .btn-sort-inven:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-color: #fef08a;
  color: #0f172a;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

#inventory-window .inven-category-tabs,
#storage-window .storage-category-tabs {
  display: flex;
  gap: 6px;
  background: rgba(8, 12, 22, 0.82);
  padding: 5px;
  border-radius: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.04);
}

#inventory-window .inven-tab-btn,
#storage-window .storage-tab-btn {
  flex: 1;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

#inventory-window .inven-tab-btn:hover,
#storage-window .storage-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

#inventory-window .inven-tab-btn.active,
#storage-window .storage-tab-btn.active {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.35) 0%, rgba(180, 83, 9, 0.25) 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.85);
  color: #fffbeb;
  box-shadow: 
    0 0 12px rgba(245, 158, 11, 0.35), 
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 10px rgba(245, 158, 11, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

#inventory-window .inven-grid,
#inventory-window .inven-grid-expanded,
#storage-window .storage-grid {
  background: rgba(7, 10, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 10px 8px;
  box-shadow: 
    inset 0 4px 16px rgba(0, 0, 0, 0.85), 
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.04);
  margin-bottom: 12px;
}

#inventory-window .inven-item-cell,
#storage-window .storage-grid .inven-item-cell {
  position: relative;
  width: 54px;
  height: 54px;
  background: radial-gradient(circle at center, rgba(30, 41, 62, 0.6) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.11);
  border-top-color: rgba(255, 255, 255, 0.22);
  border-left-color: rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    inset 0 2px 6px rgba(0, 0, 0, 0.75), 
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.04);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

#inventory-window .inven-item-cell:hover,
#storage-window .storage-grid .inven-item-cell:hover {
  border-color: #fcd34d;
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.32) 0%, rgba(20, 30, 52, 0.95) 100%);
  box-shadow: 
    0 0 15px rgba(245, 158, 11, 0.45), 
    inset 0 0 10px rgba(245, 158, 11, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px) scale(1.04);
  z-index: 5;
}

#inventory-window .inven-item-cell.is-equipped {
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.25) 0%, rgba(26, 36, 60, 0.95) 100%) !important;
  border-color: rgba(245, 158, 11, 0.9) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4), inset 0 0 12px rgba(245, 158, 11, 0.35) !important;
}

#inventory-window .inven-item-cell.empty-slot,
#storage-window .storage-grid .inven-item-cell.empty-slot {
  background: rgba(8, 11, 19, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-top-color: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8);
  cursor: default;
  transform: none !important;
}

/* ==========================================================================
   4. Equipment Window (E) - 3D Paperdoll & Sockets
   ========================================================================== */
#equipment-window.equip-dialog {
  width: 590px;
}

/* Equipment Header Right Action Container */
.equip-dialog .header-right-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Glowing Gold Glassmorphism Combat Power Badge */
.equip-header-cp-badge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(15, 23, 42, 0.88) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  border-radius: 20px;
  padding: 3px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 12px rgba(245, 158, 11, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  transition: all 0.3s ease;
  user-select: none;
}

.equip-header-cp-badge:hover {
  border-color: #fbbf24;
  box-shadow: 0 2px 14px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.equip-header-cp-badge .equip-cp-icon {
  font-size: 13.5px;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
}

.equip-header-cp-badge .equip-cp-label {
  font-size: 11.5px;
  color: #cbd5e1;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.equip-header-cp-badge .equip-cp-val {
  color: #fbbf24;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-hud, 'Outfit', 'Chakra Petch', sans-serif);
  letter-spacing: 0.4px;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
  min-width: 32px;
  text-align: right;
}

.equip-header-cp-badge .equip-cp-unit {
  color: #f59e0b;
  font-size: 11.5px;
  font-weight: 800;
  opacity: 0.9;
}

/* Floating Delta Pill (e.g. +160 ▲ or -160 ▼) */
.equip-cp-delta-pill {
  position: absolute;
  top: -12px;
  right: -8px;
  font-size: 11.5px;
  font-weight: 800;
  font-family: var(--font-hud, 'Outfit', 'Chakra Petch', sans-serif);
  padding: 1.5px 7px;
  border-radius: 10px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  animation: cpDeltaFloat 3.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.equip-cp-delta-pill.gain {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
  border: 1px solid #6ee7b7;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 8px rgba(110, 231, 183, 0.8);
}

.equip-cp-delta-pill.loss {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(185, 28, 28, 0.95));
  border: 1px solid #fca5a5;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 8px rgba(248, 113, 113, 0.8);
}

@keyframes cpDeltaFloat {
  0% {
    transform: translateY(6px) scale(0.85);
    opacity: 0;
  }
  15% {
    transform: translateY(-2px) scale(1.1);
    opacity: 1;
  }
  25% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  80% {
    transform: translateY(-2px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-14px) scale(0.9);
    opacity: 0;
  }
}

/* Badge Pulse Animations on Change */
.equip-header-cp-badge.pulse-gain {
  animation: cpBadgePulseGain 0.8s ease-out;
}

.equip-header-cp-badge.pulse-loss {
  animation: cpBadgePulseLoss 0.8s ease-out;
}

@keyframes cpBadgePulseGain {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    border-color: #4ade80;
  }
  50% {
    box-shadow: 0 0 18px 4px rgba(74, 222, 128, 0.5);
    border-color: #86efac;
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-color: rgba(245, 158, 11, 0.5);
    transform: scale(1);
  }
}

@keyframes cpBadgePulseLoss {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    border-color: #ef4444;
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(239, 68, 68, 0.45);
    border-color: #fca5a5;
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    border-color: rgba(245, 158, 11, 0.5);
    transform: scale(1);
  }
}

.equip-dialog .paperdoll-container {
  background: rgba(7, 10, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 10px;
  box-shadow: inset 0 4px 18px rgba(0, 0, 0, 0.85);
}

/* Redesigned 3D Equipment Sockets */
.equip-dialog .equip-slot-item {
  background: linear-gradient(135deg, rgba(24, 33, 50, 0.85) 0%, rgba(12, 17, 28, 0.95) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.2);
  border-left-color: rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  padding: 6px 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.equip-dialog .equip-slot-item:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(56, 189, 248, 0.35);
}

.equip-dialog .equip-slot-item.empty {
  background: rgba(10, 14, 24, 0.55);
  border: 1.5px dashed rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.equip-dialog .equip-slot-item.empty:hover {
  border-color: rgba(56, 189, 248, 0.65);
  background: rgba(56, 189, 248, 0.08);
}

/* Sunken Velvet Slot Icon Box */
.equip-dialog .slot-icon-socket {
  background: radial-gradient(circle at center, rgba(30, 41, 62, 0.6) 0%, rgba(10, 15, 26, 0.95) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.22);
  border-left-color: rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Center Character Stage & Pedestal */
.equip-dialog .paperdoll-avatar-frame {
  background: radial-gradient(circle at center, rgba(30, 46, 74, 0.4) 0%, rgba(10, 15, 26, 0.9) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 12px;
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.8), 
    0 0 20px rgba(245, 158, 11, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.equip-dialog .paperdoll-char-canvas,
.inspect-player-dialog .paperdoll-char-canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.2s ease;
}

.equip-dialog .paperdoll-char-canvas:hover,
.inspect-player-dialog .paperdoll-char-canvas:hover {
  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.45)) brightness(1.06);
}

.equip-dialog .paperdoll-name {
  color: #fef08a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 158, 11, 0.4);
}

/* Bottom Stats Summary Bar */
.equip-dialog .equip-stats-summary {
  background: linear-gradient(180deg, rgba(20, 27, 42, 0.9) 0%, rgba(10, 14, 24, 0.98) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 8px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.equip-dialog .eq-stat-pill {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: all 0.18s ease;
}

.equip-dialog .eq-stat-pill:hover {
  border-color: #f59e0b;
  transform: translateY(-1px);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* ==========================================================================
   5. Status / Stats Window (C) - Attributes & Character Card
   ========================================================================== */
#stats-window.stats-dialog {
  width: 400px;
}

/* Profile Avatar Frame */
.stats-dialog .avatar-frame {
  border: 2px solid rgba(245, 158, 11, 0.65);
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.2) 0%, rgba(15, 23, 42, 0.95) 100%);
  box-shadow: 
    0 4px 14px rgba(0, 0, 0, 0.7), 
    inset 0 0 12px rgba(0, 0, 0, 0.7), 
    0 0 15px rgba(245, 158, 11, 0.3);
}

/* Attributes Grid (STR, AGI, VIT, INT, DEX, LUK) */
.stats-dialog .attr-item {
  background: linear-gradient(135deg, rgba(24, 32, 50, 0.75) 0%, rgba(13, 18, 30, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top-color: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 6px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: all 0.15s ease;
}

.stats-dialog .attr-item:hover {
  background: linear-gradient(135deg, rgba(32, 44, 70, 0.85) 0%, rgba(18, 26, 44, 0.95) 100%);
  border-color: rgba(245, 158, 11, 0.45);
}

/* Sapphire Crystal Attribute Plus Button */
.stats-dialog .btn-attr-up {
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border: 1.5px solid rgba(191, 219, 254, 0.8);
  border-radius: 6px;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-weight: 900;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-dialog .btn-attr-up:hover:not(:disabled) {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  border-color: #ffffff;
  transform: scale(1.12);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.stats-dialog .btn-attr-up:disabled {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.22) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.45;
}

/* Derived Combat Stats Panel */
.stats-dialog .derived-row {
  background: rgba(10, 15, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
  border-radius: 7px;
  padding: 6px 10px;
}

/* PvP Summary Honor Banner */
.stats-dialog .pvp-stats-summary {
  background: linear-gradient(180deg, rgba(30, 24, 44, 0.9) 0%, rgba(14, 12, 22, 0.98) 100%);
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(168, 85, 247, 0.12), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   6. Kafra Storage Window (Bank & Vault)
   ========================================================================== */
#storage-window .storage-zeny-bank {
  background: linear-gradient(180deg, rgba(24, 30, 48, 0.9) 0%, rgba(13, 17, 28, 0.98) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  border-radius: 10px;
  box-shadow: inset 0 0 12px rgba(245, 158, 11, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#storage-window .btn-bank-deposit {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border: 1px solid #34d399;
  color: #ffffff;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}

#storage-window .btn-bank-withdraw {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid #fde047;
  color: #0f172a;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

/* ==========================================================================
   7. Hall of Fame / Leaderboard Modal (B)
   ========================================================================== */
#leaderboard-modal.leaderboard-dialog {
  border-color: rgba(245, 158, 11, 0.75);
  box-shadow: 
    0 24px 70px rgba(0, 0, 0, 0.95), 
    0 0 35px rgba(245, 158, 11, 0.25),
    inset 0 0 0 1px rgba(254, 240, 138, 0.3);
}

#leaderboard-modal .leaderboard-nav-tabs {
  background: rgba(8, 12, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 5px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

#leaderboard-modal .lb-tab-btn.active {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.35) 0%, rgba(180, 83, 9, 0.25) 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.85);
  color: #fef08a;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   8. Auto Combat Settings Modal
   ========================================================================== */
#auto-combat-modal.auto-combat-dialog {
  border-color: rgba(34, 197, 94, 0.65);
  box-shadow: 
    0 22px 65px rgba(0, 0, 0, 0.92),
    0 0 30px rgba(34, 197, 94, 0.2),
    inset 0 0 0 1px rgba(134, 239, 172, 0.25);
}

#auto-combat-modal.auto-combat-dialog::before {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(34, 197, 94, 0.5) 15%, 
    rgba(134, 239, 172, 0.95) 50%, 
    rgba(34, 197, 94, 0.5) 85%, 
    transparent 100%
  );
}

/* ==========================================================================
   9. Player Vending / Market Bazaar Windows (vending-buyer-dialog)
   ========================================================================== */
#vending-buyer-modal.vending-buyer-dialog {
  border-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow: 
    0 22px 65px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(10, 15, 26, 0.9),
    inset 0 0 0 1px rgba(254, 240, 138, 0.25),
    inset 0 0 35px rgba(0, 0, 0, 0.7),
    0 0 25px rgba(245, 158, 11, 0.2) !important;
}

#vending-buyer-modal.vending-buyer-dialog .vending-header {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.38) !important;
}

#vending-buyer-modal.vending-buyer-dialog .vending-header span {
  color: #fef08a !important;
  text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(245, 158, 11, 0.45) !important;
}

/* Merchant Seller Bar (Guild License / Market Stall Placard) */
.vending-buyer-dialog .vending-seller-bar {
  background: linear-gradient(180deg, rgba(28, 36, 56, 0.85) 0%, rgba(14, 20, 32, 0.95) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 8px rgba(0, 0, 0, 0.45) !important;
}

.vending-buyer-dialog .vending-seller-name {
  color: #fef08a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.vending-buyer-dialog .vending-seller-meta {
  color: #94a3b8 !important;
  font-size: 11px !important;
}

.vending-buyer-dialog .vending-zeny-val {
  color: #34d399 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.4) !important;
}

/* Items List Header */
.vending-buyer-dialog .vending-items-list-header {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
  padding: 0 8px 4px 8px !important;
  letter-spacing: 0.3px !important;
}

/* Item Container & Scrollbar Tray */
.vending-buyer-dialog .vending-buyer-items-container {
  background: rgba(7, 10, 18, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 11px !important;
  padding: 8px 6px !important;
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.8) !important;
  flex: 1 !important;
  min-height: 220px !important;
}

/* Item Card (Normal State) */
.vending-buyer-dialog .vending-buyer-card {
  background: linear-gradient(135deg, rgba(22, 30, 48, 0.8) 0%, rgba(12, 17, 28, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 2px !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vending-buyer-dialog .vending-buyer-card:hover {
  background: linear-gradient(135deg, rgba(32, 44, 70, 0.9) 0%, rgba(18, 26, 44, 0.98) 100%) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  transform: translateX(2px) !important;
}

/* Item Card (Selected Active State) */
.vending-buyer-dialog .vending-buyer-card.selected {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(28, 38, 62, 0.95) 100%) !important;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 
    0 0 14px rgba(245, 158, 11, 0.4), 
    inset 0 0 10px rgba(245, 158, 11, 0.15) !important;
  transform: translateX(3px) !important;
}

/* Card Icon Box (3D Sunken Well) */
.vending-buyer-dialog .vending-buyer-card-icon {
  width: 36px !important;
  height: 36px !important;
  background: radial-gradient(circle at center, rgba(30, 41, 62, 0.7) 0%, rgba(10, 15, 26, 0.95) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8) !important;
}

/* Card Name & Price */
.vending-buyer-dialog .vending-buyer-card-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
}

.vending-buyer-dialog .vending-buyer-card-price {
  font-family: var(--font-hud, 'Outfit', monospace) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
}

.vending-buyer-dialog .vending-z-unit {
  font-size: 11px !important;
  color: #f59e0b !important;
  font-weight: 700 !important;
}

/* Bottom Checkout Action Panel (Compact & Polished) */
.vending-buyer-dialog .vending-buy-action-panel {
  background: linear-gradient(180deg, rgba(20, 27, 44, 0.92) 0%, rgba(10, 14, 24, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  gap: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.vending-buyer-dialog .vending-buy-item-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fef08a !important;
}

/* Inspect Pill Button */
.vending-buyer-dialog .vending-btn-inspect-pill {
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid #38bdf8 !important;
  color: #38bdf8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.18s ease !important;
  cursor: pointer !important;
}

.vending-buyer-dialog .vending-btn-inspect-pill:hover {
  background: #38bdf8 !important;
  color: #0f172a !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
  transform: translateY(-1px) !important;
}

/* Qty Controls */
.vending-buyer-dialog .vending-qty-btn {
  width: 26px !important;
  height: 26px !important;
  background: linear-gradient(180deg, rgba(40, 50, 75, 0.9) 0%, rgba(20, 28, 44, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.vending-buyer-dialog .vending-qty-btn:hover {
  background: #3b82f6 !important;
  border-color: #93c5fd !important;
  color: #ffffff !important;
}

.vending-buyer-dialog .vending-qty-btn-max {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  border: 1px solid #fef08a !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  border-radius: 5px !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.vending-buyer-dialog .vending-qty-btn-max:hover {
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7) !important;
  transform: translateY(-1px) !important;
}

.vending-buyer-dialog .vending-buyer-qty-input {
  background: rgba(10, 14, 24, 0.9) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 5px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  width: 48px !important;
  height: 26px !important;
  text-align: center !important;
}

/* Buy Action Button */
.vending-buyer-dialog .btn-vending-buy {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
  border: 1.5px solid #6ee7b7 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vending-buyer-dialog .btn-vending-buy:hover:not(.insufficient-zeny) {
  background: linear-gradient(180deg, #34d399 0%, #059669 100%) !important;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

.vending-buyer-dialog .btn-vending-buy.insufficient-zeny {
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%) !important;
  border: 1.5px solid #fca5a5 !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
}

/* ==========================================================================
   10. Minimap & Radar Info Panel (Top Right HUD)
   ========================================================================== */
#minimap-panel {
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(28, 42, 68, 0.96) 0%, rgba(15, 23, 42, 0.96) 65%, rgba(9, 13, 24, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.55) !important;
  border-radius: 14px !important;
  box-shadow: 
    0 16px 45px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(10, 15, 26, 0.9),
    inset 0 0 0 1px rgba(254, 240, 138, 0.22),
    inset 0 0 25px rgba(0, 0, 0, 0.65),
    0 0 20px rgba(245, 158, 11, 0.15) !important;
  padding: 10px 12px !important;
}

#minimap-panel .minimap-header {
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  padding-bottom: 7px !important;
  gap: 10px !important;
}

#minimap-panel .map-title-box {
  max-width: 200px !important;
}

#minimap-panel .map-title {
  color: #fef08a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(245, 158, 11, 0.35) !important;
}

/* Quick Tool Buttons */
#minimap-panel .ro-channel-badge-btn {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.2) 100%) !important;
  border: 1px solid rgba(52, 211, 153, 0.65) !important;
  color: #6ee7b7 !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.25) !important;
  transition: all 0.18s ease !important;
}

#minimap-panel .ro-channel-badge-btn:hover {
  background: rgba(16, 185, 129, 0.4) !important;
  border-color: #a7f3d0 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-1px) !important;
}

#minimap-panel .ro-icon-btn {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 7px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#minimap-panel .ro-icon-btn:hover {
  border-color: #f59e0b !important;
  color: #ffffff !important;
  transform: translateY(-1px) scale(1.05) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5) !important;
}

/* Minimap Canvas Viewport (Nautical Brass Radar Frame) */
#minimap-panel .minimap-wrapper {
  border: 1.5px solid rgba(245, 158, 11, 0.55) !important;
  border-radius: 10px !important;
  box-shadow: 
    inset 0 0 16px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(245, 158, 11, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

#minimap-panel .minimap-compass-n {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  border: 1px solid #fef08a !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 8.5px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6) !important;
  padding: 1px 4px !important;
}

/* Dashboard on the right */
#minimap-panel .minimap-dashboard {
  width: 165px !important;
  gap: 6px !important;
}

/* Card General Styling */
#minimap-panel .minimap-card {
  background: linear-gradient(135deg, rgba(24, 33, 52, 0.8) 0%, rgba(13, 18, 30, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 5px rgba(0, 0, 0, 0.35) !important;
}

/* Coordinates Card */
#minimap-panel .coord-card {
  border-color: rgba(245, 158, 11, 0.35) !important;
  padding: 6px 10px !important;
}

#minimap-panel .coord-card .card-val {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 8px rgba(245, 158, 11, 0.35) !important;
}

/* Information Stack (Full width rows - No Broken Words!) */
.minimap-info-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-card-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 8px !important;
}

.stat-row-left {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.stat-card-row .card-val {
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* Network & FPS Bar */
#minimap-panel .perf-card {
  background: rgba(10, 14, 24, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
}

#minimap-panel .perf-text {
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

/* Minimap Fullscreen Tactical Action Button (HUD Tile) */
#minimap-panel .minimap-fullscreen-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 1 !important;
  min-width: 34px !important;
  max-width: 44px !important;
  padding: 8px 3px !important;
  background: linear-gradient(180deg, rgba(28, 42, 68, 0.85) 0%, rgba(13, 18, 30, 0.95) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  border-top-color: rgba(254, 240, 138, 0.5) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: #fef08a !important;
}

#minimap-panel .minimap-fullscreen-btn:hover {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.25) 0%, rgba(18, 27, 44, 0.98) 100%) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.55), inset 0 0 8px rgba(251, 191, 36, 0.2) !important;
  transform: translateY(-1px) scale(1.03) !important;
}

#minimap-panel .minimap-fullscreen-btn:active {
  transform: translateY(1px) scale(0.98) !important;
}

#minimap-panel .minimap-fullscreen-btn.is-fullscreen {
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.3) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-color: #38bdf8 !important;
  border-top-color: #7dd3fc !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45), inset 0 0 8px rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
}

#minimap-panel .minimap-fullscreen-btn.is-fullscreen:hover {
  border-color: #7dd3fc !important;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.65) !important;
}

#minimap-panel .fs-icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  color: inherit !important;
  transition: transform 0.2s ease !important;
}

#minimap-panel .minimap-fullscreen-btn:hover .fs-icon-wrap {
  transform: scale(1.15) !important;
}

#minimap-panel .fs-label-vertical {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
  font-family: var(--font-hud, 'Outfit', 'Chakra Petch', sans-serif) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.1 !important;
  color: #94a3b8 !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

#minimap-panel .minimap-fullscreen-btn:hover .fs-label-vertical {
  color: #fef08a !important;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.6) !important;
}

#minimap-panel .minimap-fullscreen-btn.is-fullscreen .fs-label-vertical {
  color: #38bdf8 !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.5) !important;
}

#minimap-panel .fs-indicator {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(148, 163, 184, 0.4) !important;
  box-shadow: 0 0 3px rgba(148, 163, 184, 0.3) !important;
  transition: all 0.2s ease !important;
}

#minimap-panel .minimap-fullscreen-btn:hover .fs-indicator {
  background: #f59e0b !important;
  box-shadow: 0 0 8px #f59e0b !important;
}

#minimap-panel .minimap-fullscreen-btn.is-fullscreen .fs-indicator {
  background: #22c55e !important;
  box-shadow: 0 0 8px #22c55e !important;
  animation: pulse-dot 2s infinite !important;
}

/* Minimap Tactical Drag Handle (Beside Fullscreen Button) */
#minimap-panel .minimap-content {
  gap: 8px !important;
}

#minimap-panel .minimap-drag-handle {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 15px !important;
  min-width: 15px !important;
  padding: 6px 0 !important;
  background: linear-gradient(180deg, rgba(20, 30, 48, 0.75) 0%, rgba(10, 15, 26, 0.9) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  cursor: grab !important;
  user-select: none !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#minimap-panel .minimap-drag-handle:hover {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.22) 0%, rgba(14, 116, 144, 0.4) 100%) !important;
  border-color: rgba(56, 189, 248, 0.55) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
  transform: translateY(-1px) scale(1.02) !important;
}

#minimap-panel .minimap-drag-handle:active,
#minimap-panel.is-dragging-minimap .minimap-drag-handle {
  cursor: grabbing !important;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.3) 0%, rgba(180, 83, 9, 0.45) 100%) !important;
  border-color: rgba(245, 158, 11, 0.7) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45) !important;
}

#minimap-panel .minimap-drag-handle .drag-grip-ridges {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  pointer-events: none !important;
}

#minimap-panel .minimap-drag-handle .grip-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(148, 163, 184, 0.55) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.2s ease !important;
}

#minimap-panel .minimap-drag-handle:hover .grip-dot {
  background: #38bdf8 !important;
  box-shadow: 0 0 6px #38bdf8 !important;
}

#minimap-panel .minimap-drag-handle:active .grip-dot,
#minimap-panel.is-dragging-minimap .grip-dot {
  background: #fbbf24 !important;
  box-shadow: 0 0 6px #fbbf24 !important;
}

#minimap-panel.is-dragging-minimap,
#minimap-panel.is-dragging-minimap * {
  cursor: grabbing !important;
}

/* ==========================================================================
   11. Server Channel Switcher Modal (channel-switch-dialog)
   ========================================================================== */
#channel-switch-modal.channel-switch-dialog {
  width: 520px !important;
  max-width: 95vw !important;
  position: absolute !important;
  top: calc(50% - 210px);
  left: calc(50% - 260px);
  transform: none;
  z-index: 100050 !important;
}

#channel-switch-modal .channel-switch-header {
  padding: 10px 16px !important;
  cursor: grab !important;
}

#channel-switch-modal .channel-switch-header:active {
  cursor: grabbing !important;
}

#channel-switch-modal .modal-title {
  color: #fef08a !important;
  font-family: var(--font-hud, 'Outfit', 'Chakra Petch', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(245, 158, 11, 0.45) !important;
}

#channel-switch-modal .channel-modal-info p {
  margin: 0 0 14px 0 !important;
  font-size: 12.5px !important;
  color: #cbd5e1 !important;
  line-height: 1.55 !important;
}

/* Channel Cards List */
#channel-switch-modal .channel-cards-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

#channel-switch-modal .channel-cards-list::-webkit-scrollbar {
  width: 6px;
}
#channel-switch-modal .channel-cards-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
  border-radius: 4px;
}
#channel-switch-modal .channel-cards-list::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.4);
  border-radius: 4px;
}
#channel-switch-modal .channel-cards-list::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.7);
}

.channel-expansion-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(59, 130, 246, 0.25) 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.5) !important;
  color: #c084fc !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  margin-left: 6px !important;
  letter-spacing: 0.2px !important;
  vertical-align: middle !important;
}

/* Individual Channel Card */
#channel-switch-modal .channel-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: linear-gradient(135deg, rgba(24, 33, 52, 0.85) 0%, rgba(12, 17, 28, 0.95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-top-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: 11px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

#channel-switch-modal .channel-card:hover {
  background: linear-gradient(135deg, rgba(32, 44, 70, 0.9) 0%, rgba(18, 26, 44, 0.98) 100%) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Active / Connected Channel Card */
#channel-switch-modal .channel-card.current {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(26, 38, 62, 0.95) 100%) !important;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 
    0 0 18px rgba(245, 158, 11, 0.35), 
    inset 0 0 12px rgba(245, 158, 11, 0.15) !important;
}

/* 3D Sunken Icon Socket */
#channel-switch-modal .channel-icon {
  width: 44px !important;
  height: 44px !important;
  background: radial-gradient(circle at center, rgba(30, 42, 65, 0.8) 0%, rgba(10, 15, 26, 0.95) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  font-size: 24px !important;
}

#channel-switch-modal .channel-title-group h4 {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 2px !important;
}

.channel-current-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  color: #0f172a !important;
  padding: 1.5px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}

#channel-switch-modal .channel-title-group p {
  color: #94a3b8 !important;
  font-size: 11.5px !important;
}

/* Status Pill */
#channel-switch-modal .channel-status-pill.smooth {
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(52, 211, 153, 0.6) !important;
  color: #6ee7b7 !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
}

/* Action Buttons */
#channel-switch-modal .btn-channel-action.current {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.6) !important;
  color: #6ee7b7 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border-radius: 7px !important;
  padding: 6px 12px !important;
}

#channel-switch-modal .btn-channel-action.switch {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  border-radius: 7px !important;
  padding: 6px 14px !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.18s ease !important;
}

#channel-switch-modal .btn-channel-action.switch:hover {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Footer & Secondary Close Button */
#channel-switch-modal .channel-modal-footer {
  margin-top: 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 12px !important;
}

.channel-btn-close-footer {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
  color: #fef08a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 16px !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 5px rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.channel-btn-close-footer:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  border-color: #fef08a !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.6) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   11. Fantasy RO Gateway Portal & Authentication Screen (#auth-screen, .auth-box)
   ========================================================================== */
#auth-screen {
  background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.4) 0%, rgba(3, 7, 18, 0.85) 100%) !important;
}

.auth-box {
  position: relative !important;
  width: 90% !important;
  max-width: 440px !important;
  padding: 26px 28px !important;
  border-radius: 16px !important;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(26, 38, 62, 0.98) 0%, rgba(13, 19, 33, 0.97) 55%, rgba(7, 10, 18, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.7) !important;
  box-shadow: 
    0 26px 80px rgba(0, 0, 0, 0.96),
    0 0 0 1px rgba(10, 15, 26, 0.95),
    inset 0 0 0 1px rgba(254, 240, 138, 0.28),
    inset 0 0 45px rgba(0, 0, 0, 0.75),
    0 0 35px rgba(245, 158, 11, 0.2) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  overflow: hidden !important;
  animation: fadeInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Golden Medieval Rim Bevel on Top of Login Portal */
.auth-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(245, 158, 11, 0.5) 15%, 
    rgba(254, 240, 138, 0.98) 50%, 
    rgba(245, 158, 11, 0.5) 85%, 
    transparent 100%
  ) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  border-radius: 16px 16px 0 0 !important;
}

/* Header & Title Area */
.ro-logo-title {
  text-align: center !important;
  margin-bottom: 14px !important;
  position: relative !important;
}

.ro-logo-title .logo-subtitle {
  font-family: var(--font-thai, 'Kanit', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #fde047 !important;
  letter-spacing: 3.5px !important;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.8), 0 2px 4px rgba(0, 0, 0, 0.95) !important;
  margin-bottom: 2px !important;
  text-transform: uppercase !important;
}

.ro-logo-title h1 {
  font-family: var(--font-hud, 'Chakra Petch', sans-serif) !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  letter-spacing: 2.5px !important;
  color: #ffffff !important;
  text-shadow: 
    0 0 20px rgba(245, 158, 11, 0.85), 
    0 0 35px rgba(217, 119, 6, 0.5), 
    0 2px 6px rgba(0, 0, 0, 0.95) !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

.ro-logo-title .logo-edition {
  font-family: var(--font-hud, 'Outfit', sans-serif) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  letter-spacing: 2.8px !important;
  margin-top: 4px !important;
  opacity: 0.9 !important;
}

/* Ornamental Divider Line below Title */
.ro-logo-title::after {
  content: '' !important;
  display: block !important;
  width: 65% !important;
  height: 1px !important;
  margin: 12px auto 4px !important;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.65), transparent) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4) !important;
}

/* Mode Switch Tabs */
.auth-tabs {
  display: flex !important;
  gap: 6px !important;
  background: rgba(10, 15, 26, 0.65) !important;
  padding: 4px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55) !important;
  margin: 12px 0 16px !important;
}

.auth-tab {
  flex: 1 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #94a3b8 !important;
  font-family: var(--font-hud) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: center !important;
}

.auth-tab:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f1f5f9 !important;
}

.auth-tab.active {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.65) !important;
  color: #fef08a !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 158, 11, 0.35) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15), 
    0 2px 8px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(245, 158, 11, 0.2) !important;
}

/* Form Groups & 3D Sunken Input Wells */
.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.form-group label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #e2e8f0 !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

.form-group input {
  background: rgba(9, 13, 24, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  color: #fef08a !important;
  font-size: 13.5px !important;
  font-family: var(--font-hud), sans-serif !important;
  letter-spacing: 0.4px !important;
  outline: none !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  caret-color: #f59e0b !important;
}

.form-group input::placeholder {
  color: #64748b !important;
  font-family: var(--font-main), sans-serif !important;
  font-size: 12.5px !important;
}

.form-group input:focus {
  border-color: rgba(245, 158, 11, 0.85) !important;
  background: rgba(9, 13, 24, 0.95) !important;
  box-shadow: 
    inset 0 2px 6px rgba(0, 0, 0, 0.9), 
    0 0 14px rgba(245, 158, 11, 0.45), 
    0 0 0 1px rgba(245, 158, 11, 0.3) !important;
}

/* CRITICAL: Overriding Browser Autofill light-blue/white background */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover, 
.form-group input:-webkit-autofill:focus, 
.form-group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #090d18 inset !important;
  box-shadow: 0 0 0 1000px #090d18 inset !important;
  -webkit-text-fill-color: #fef08a !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
  caret-color: #f59e0b !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Password Toggle Eye Button */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrapper input {
  width: 100%;
  padding-right: 42px !important;
}

.btn-toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(30, 41, 59, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  color: #cbd5e1 !important;
  padding: 3px 6px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-toggle-password:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  border-color: #f59e0b !important;
  color: #fef08a !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4) !important;
}

.btn-toggle-password.visible {
  background: rgba(245, 158, 11, 0.3) !important;
  border-color: rgba(245, 158, 11, 0.8) !important;
  color: #fef08a !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important;
}

/* Primary Action Buttons (3D Metallic RO Style) */
.btn-auth-submit {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 70%, #b45309 100%) !important;
  border: 1.5px solid #fde047 !important;
  border-radius: 9px !important;
  color: #0f172a !important;
  font-family: var(--font-hud) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 11px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  box-shadow: 
    0 4px 14px rgba(217, 119, 6, 0.55), 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-top: 4px !important;
}

.btn-auth-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 6px 22px rgba(245, 158, 11, 0.75), 
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  filter: brightness(1.08) !important;
}

.btn-auth-submit:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.5) !important;
}

.btn-auth-submit.btn-reg {
  background: linear-gradient(180deg, #10b981 0%, #059669 70%, #047857 100%) !important;
  border: 1.5px solid #6ee7b7 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  box-shadow: 
    0 4px 14px rgba(16, 185, 129, 0.5), 
    inset 0 1px 0 rgba(255, 255, 255, 0.35), 
    inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
}

.btn-auth-submit.btn-reg:hover {
  box-shadow: 
    0 6px 22px rgba(16, 185, 129, 0.75), 
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  filter: brightness(1.08) !important;
}

/* Sleek Google Sign-In Button (Obsidian Glass Theme) */
.btn-google-auth {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  color: #f1f5f9 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 9px !important;
  padding: 10px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  font-family: var(--font-hud), sans-serif !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-top: 14px !important;
}

.btn-google-auth:hover {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.22) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-color: rgba(66, 133, 244, 0.75) !important;
  box-shadow: 0 0 16px rgba(66, 133, 244, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* Divider */
.auth-footer-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 14px 0 12px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.auth-footer-divider::before, 
.auth-footer-divider::after {
  content: '' !important;
  flex: 1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.auth-footer-divider span {
  padding: 0 12px !important;
}

/* Adventurer Quick Pass - Guest Play Button (No more ugly dashed lines) */
.btn-guest-play {
  width: 100% !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 9px !important;
  color: #e0f2fe !important;
  font-family: var(--font-hud) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 10px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.btn-guest-play:hover {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.25) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.btn-guest-play:active {
  transform: translateY(1px) !important;
}

/* Server Status Capsule (Perfect Center Alignment) */
.auth-server-status {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 14px auto 0 !important;
  padding: 5px 16px !important;
  width: fit-content !important;
  max-width: 100% !important;
  background: rgba(10, 15, 26, 0.75) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.4px !important;
  text-align: center !important;
}

.auth-server-status #auth-status-text {
  color: #cbd5e1 !important;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

.status-indicator {
  position: relative !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

.status-indicator.online {
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981, 0 0 16px rgba(16, 185, 129, 0.8) !important;
  animation: statusPulse 1.8s infinite ease-in-out !important;
}

/* Client Version Display at Bottom of Auth Box */
.auth-client-version {
  display: block !important;
  text-align: center !important;
  margin-top: 10px !important;
  font-family: var(--font-hud, 'Outfit', 'Chakra Petch', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  letter-spacing: 0.6px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  user-select: none !important;
  opacity: 0.85 !important;
  transition: opacity 0.2s ease, color 0.2s ease !important;
}

.auth-client-version:hover {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* ==========================================================================
   12. Epic Character Selection Screen & Character Slots (#char-select-screen, .char-slots-box)
   ========================================================================== */
#char-select-screen {
  position: fixed;
  inset: 0;
  z-index: 1000 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.5) 0%, rgba(3, 7, 18, 0.92) 100%) !important;
  padding: 10px !important;
}

#char-select-screen.hidden {
  display: none !important;
}

/* Master Character Selection Stage Container (Aspect Ratio: 841 / 468) */
.char-slots-box {
  position: relative !important;
  width: min(940px, 96vw) !important;
  aspect-ratio: 841 / 468 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: fadeInDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.char-slots-box::before {
  display: none !important;
}

/* 3D Fantasy Ornate Frame Overlay (Pixel-Perfect PNG Over Stage) */
.char-frame-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  pointer-events: none !important;
  z-index: 10 !important;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.85)) !important;
}

/* Header Interactive Layer (Above Frame) */
.char-select-header {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 20 !important;
  pointer-events: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* User Account Capsule in Frame (Top Left) */
.user-account-badge {
  position: absolute !important;
  left: 7.4% !important;
  top: 9.4% !important;
  width: 21.4% !important;
  height: 6.2% !important;
  z-index: 21 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 26px 0 24px !important;
  font-size: 13px !important;
}

.user-account-badge strong {
  color: #fef08a !important;
  font-family: var(--font-hud), 'Chakra Petch', sans-serif !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  max-width: 95px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Channel Switcher Pill in Frame (Top Right: calibrated) */
.char-select-channel-pill {
  position: absolute !important;
  left: 69.7% !important;
  top: 9.3% !important;
  width: 12.7% !important;
  height: 6.2% !important;
  z-index: 21 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 0 8px 0 22px !important;
  box-shadow: none !important;
  color: #f0fdf4 !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.char-select-channel-pill:hover {
  background: rgba(56, 189, 248, 0.18) !important;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.6) !important;
  transform: translateY(-1px) !important;
}

.channel-pill-arrow {
  font-size: 10px !important;
  color: #93c5fd !important;
}

/* Logout Button (Top Far Right: calibrated) */
.btn-logout {
  position: absolute !important;
  left: 82.2% !important;
  top: 9.5% !important;
  width: 11.2% !important;
  height: 6.2% !important;
  z-index: 21 !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-logout:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.7) !important;
  transform: translateY(-1px) !important;
}

.btn-logout:active {
  transform: translateY(1px) !important;
}

/* Character Slots Grid Container */
.char-slots-grid {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Character Slot Card (Slot Columns 1, 2, 3) */
.char-slot-card, .char-slot-empty {
  position: absolute !important;
  top: 17% !important;
  height: 77.5% !important;
  width: 28.5% !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: none !important;
}

.char-slot-card:hover, .char-slot-empty:hover {
  transform: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.char-slot-card:nth-child(1), .char-slot-empty:nth-child(1) {
  left: 4.8% !important;
}

.char-slot-card:nth-child(2), .char-slot-empty:nth-child(2) {
  left: 35.7% !important;
}

.char-slot-card:nth-child(3), .char-slot-empty:nth-child(3) {
  left: 66.6% !important;
}

/* Stage Window (Top of Slot) */
.char-slot-stage {
  position: absolute !important;
  top: 0.5% !important;
  left: 3% !important;
  width: 94% !important;
  height: 48.5% !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 18px 18px 0 0 !important;
  margin: 0 !important;
  z-index: 1 !important;
}

.char-slot-stage::before {
  display: none !important;
}

/* Background Scene Image */
.char-slot-bg-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  transition: transform 0.4s ease, filter 0.4s ease !important;
}

.char-slot-card:hover .char-slot-bg-img {
  transform: scale(1.04) !important;
}

/* Character Live Animation Canvas */
.char-slot-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Job Crest Emblem (Top Right of Stage) */
.char-slot-job-icon {
  position: absolute !important;
  top: 7px !important;
  right: 8px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1.5px solid rgba(254, 240, 138, 0.85) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.85), inset 0 0 6px rgba(245, 158, 11, 0.5) !important;
  background: rgba(10, 15, 26, 0.9) !important;
  z-index: 12 !important;
}

.char-slot-job-icon canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Character Name (On Wood Plaque) */
.char-slot-name {
  position: absolute !important;
  top: 49.3% !important;
  left: 15.4% !important;
  width: 70.0% !important;
  height: 8.5% !important;
  z-index: 15 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-hud), 'Chakra Petch', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.8px !important;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.95), 
    0 0 10px rgba(254, 240, 138, 0.6) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}

/* Job & Gender Badges (Inside Capsule Outlines) */
.char-slot-badges {
  position: absolute !important;
  top: 57.2% !important;
  left: 7.1% !important;
  width: 83.5% !important;
  height: 6.8% !important;
  z-index: 15 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  pointer-events: none !important;
}

/* Slot 1 Job & Gender Badges */
.char-slot-card:nth-child(1) .char-slot-badges {
  top: 57.2% !important;
  left: 12.0% !important;
  width: 79.3% !important;
  height: 6.8% !important;
}

/* Slot 2 Job & Gender Badges */
.char-slot-card:nth-child(2) .char-slot-badges {
  top: 57.2% !important;
  left: 7.1% !important;
  width: 83.5% !important;
  height: 6.8% !important;
}

/* Slot 3 Job & Gender Badges */
.char-slot-card:nth-child(3) .char-slot-badges {
  top: 57.2% !important;
  left: 4.9% !important;
  width: 82.4% !important;
  height: 6.8% !important;
}

.char-slot-job-badge, .char-slot-gender-badge {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-hud), sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  border-radius: 12px !important;
  height: 100% !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.job-badge-archer { color: #86efac !important; text-shadow: 0 0 6px rgba(34, 197, 94, 0.8) !important; }
.job-badge-thief { color: #f472b6 !important; text-shadow: 0 0 6px rgba(236, 72, 153, 0.8) !important; }
.job-badge-swordsman { color: #93c5fd !important; text-shadow: 0 0 6px rgba(59, 130, 246, 0.8) !important; }
.job-badge-mage { color: #d8b4fe !important; text-shadow: 0 0 6px rgba(168, 85, 247, 0.8) !important; }
.job-badge-novice { color: #fef08a !important; text-shadow: 0 0 6px rgba(245, 158, 11, 0.8) !important; }
.job-badge-fate-weaver, .job-badge-fate_weaver { color: #e9d5ff !important; text-shadow: 0 0 8px rgba(192, 132, 252, 0.9) !important; }

.char-slot-gender-badge.gender-male {
  color: #7dd3fc !important;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.8) !important;
}

.char-slot-gender-badge.gender-female {
  color: #f9a8d4 !important;
  text-shadow: 0 0 6px rgba(244, 114, 182, 0.8) !important;
}

/* Stat Rows on Parchment */
.char-slot-stats {
  position: absolute !important;
  top: 65% !important;
  left: 8.5% !important;
  width: 83% !important;
  height: 19% !important;
  z-index: 15 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 6px !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.char-stat-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border: none !important;
  padding: 0 !important;
  font-size: 11px !important;
}

.char-stat-row .stat-spacer {
  flex: 1 !important;
}

.char-stat-row .stat-val-lv {
  color: #1e293b !important;
  font-weight: 800 !important;
  font-family: var(--font-hud), sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.2px !important;
}

.char-stat-row .stat-val-map {
  color: #0369a1 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

.char-stat-row .stat-val-zeny {
  color: #047857 !important;
  font-weight: 800 !important;
  font-family: var(--font-hud), sans-serif !important;
  font-size: 11px !important;
}

/* Interactive Action Buttons Hitboxes (Pixel-Perfect Alignment with selectcharactor.png) */
.char-slot-actions {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 15 !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* Play Game Button Hitbox (Default / Slot 2 calibrated) */
.btn-play-slot {
  position: absolute !important;
  top: 84.5% !important;
  left: 4.9% !important;
  width: 69.3% !important;
  height: 11.2% !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Play Game Button Hitbox (Slot 1 calibrated precision) */
.char-slot-card:nth-child(1) .btn-play-slot {
  top: 84.5% !important;
  left: 6.4% !important;
  width: 69.3% !important;
  height: 11.2% !important;
}

/* Play Game Button Hitbox (Slot 2 calibrated precision) */
.char-slot-card:nth-child(2) .btn-play-slot {
  top: 84.5% !important;
  left: 4.9% !important;
  width: 69.3% !important;
  height: 11.2% !important;
}

/* Play Game Button Hitbox (Slot 3 calibrated precision) */
.char-slot-card:nth-child(3) .btn-play-slot {
  top: 84.3% !important;
  left: 2.7% !important;
  width: 69.3% !important;
  height: 11.2% !important;
}

.btn-play-slot:hover {
  background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.35) 0%, rgba(254, 240, 138, 0.25) 50%, rgba(245, 158, 11, 0.15) 85%) !important;
  border-color: rgba(254, 240, 138, 0.75) !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.75), inset 0 0 10px rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: brightness(1.16) contrast(1.08) !important;
  -webkit-backdrop-filter: brightness(1.16) contrast(1.08) !important;
}

.btn-play-slot:active {
  background: rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(245, 158, 11, 0.85) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: brightness(0.9) !important;
  -webkit-backdrop-filter: brightness(0.9) !important;
}

/* Delete Character Button Hitbox (Default / Slot 2 calibrated) */
.btn-del-slot {
  position: absolute !important;
  top: 84.5% !important;
  left: 76.6% !important;
  width: 19.5% !important;
  height: 11.2% !important;
  pointer-events: auto !important;
  background: transparent !important;
  border: 1.5px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Delete Character Button Hitbox (Slot 1 calibrated precision) */
.char-slot-card:nth-child(1) .btn-del-slot {
  top: 84.5% !important;
  left: 78.8% !important;
  width: 17.3% !important;
  height: 11.2% !important;
}

/* Delete Character Button Hitbox (Slot 2 calibrated precision) */
.char-slot-card:nth-child(2) .btn-del-slot {
  top: 84.5% !important;
  left: 76.6% !important;
  width: 19.5% !important;
  height: 11.2% !important;
}

/* Delete Character Button Hitbox (Slot 3 calibrated precision) */
.char-slot-card:nth-child(3) .btn-del-slot {
  top: 84.5% !important;
  left: 74.0% !important;
  width: 18.7% !important;
  height: 11.2% !important;
}

.btn-del-slot:hover {
  background: radial-gradient(ellipse at 50% 45%, rgba(248, 113, 113, 0.38) 0%, rgba(220, 38, 38, 0.22) 55%, transparent 85%) !important;
  border-color: rgba(252, 165, 165, 0.75) !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.75), inset 0 0 8px rgba(254, 202, 202, 0.45) !important;
  backdrop-filter: brightness(1.15) !important;
  -webkit-backdrop-filter: brightness(1.15) !important;
}

.btn-del-slot:active {
  background: rgba(153, 27, 27, 0.38) !important;
  border-color: rgba(239, 68, 68, 0.85) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: brightness(0.88) !important;
  -webkit-backdrop-filter: brightness(0.88) !important;
}

/* Empty Slot Card Styling */
.char-slot-empty {
  cursor: pointer !important;
}

.empty-stage {
  filter: brightness(0.6) saturate(0.8) !important;
  transition: filter 0.3s ease !important;
}

.char-slot-empty:hover .empty-stage {
  filter: brightness(0.85) saturate(1.1) !important;
}

.empty-rune-circle {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(254, 240, 138, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  color: #fef08a !important;
  background: rgba(15, 23, 42, 0.6) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6), inset 0 0 10px rgba(245, 158, 11, 0.3) !important;
  animation: pulseEmptyRune 1.8s infinite ease-in-out !important;
  z-index: 3 !important;
}

@keyframes pulseEmptyRune {
  0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 14px rgba(245, 158, 11, 0.5); }
  50% { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 24px rgba(254, 240, 138, 0.85); }
}

.empty-name {
  color: #fde68a !important;
  font-size: 13.5px !important;
}

.empty-badges,
.char-slot-empty .char-slot-badges {
  display: none !important;
}

.stat-val-dash {
  color: #64748b !important;
  font-weight: 700 !important;
}

/* Empty Slot Card Action Button (calibrated: Fully Opaque to cleanly mask underlying artwork) */
.btn-create-slot-action {
  position: absolute !important;
  top: 84.5% !important;
  left: 4.9% !important;
  width: 91.2% !important;
  height: 11.2% !important;
  pointer-events: auto !important;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 55%, #b45309 100%) !important;
  border: 1.5px solid #fef08a !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-family: var(--font-hud), sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  text-shadow: 0 1px 0 rgba(254, 240, 138, 0.5) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Empty Slot 1 Create Action Button */
.char-slot-empty:nth-child(1) .btn-create-slot-action {
  top: 84.5% !important;
  left: 6.4% !important;
  width: 89.7% !important;
  height: 11.2% !important;
}

/* Empty Slot 2 Create Action Button */
.char-slot-empty:nth-child(2) .btn-create-slot-action {
  top: 84.5% !important;
  left: 4.9% !important;
  width: 91.2% !important;
  height: 11.2% !important;
}

/* Empty Slot 3 Create Action Button */
.char-slot-empty:nth-child(3) .btn-create-slot-action {
  top: 84.3% !important;
  left: 2.7% !important;
  width: 90.0% !important;
  height: 11.2% !important;
}

.char-slot-empty:hover .btn-create-slot-action,
.btn-create-slot-action:hover {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%) !important;
  color: #0f172a !important;
  border-color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.8), 0 0 20px rgba(254, 240, 138, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
}

.btn-create-slot-action:active {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%) !important;
  transform: translateY(1px) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

/* Guest Warning Banner below frame */
.guest-warning-banner {
  position: absolute !important;
  top: 102% !important;
  left: 6% !important;
  right: 6% !important;
  z-index: 25 !important;
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7) !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
}

/* ==========================================================================
   13. Cinematic Character Creation Studio Modal (#char-create-modal, .char-create-box)
   ========================================================================== */
.char-create-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.9) 0%, rgba(3, 7, 18, 0.97) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100080 !important;
}

.char-create-box {
  width: 95% !important;
  max-width: 960px !important;
  max-height: 92vh !important;
  padding: 20px 26px !important;
  border-radius: 18px !important;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(26, 38, 62, 0.98) 0%, rgba(13, 19, 33, 0.97) 55%, rgba(7, 10, 18, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.7) !important;
  box-shadow: 
    0 28px 85px rgba(0, 0, 0, 0.96),
    0 0 0 1px rgba(10, 15, 26, 0.95),
    inset 0 0 0 1px rgba(254, 240, 138, 0.28),
    inset 0 0 45px rgba(0, 0, 0, 0.75),
    0 0 35px rgba(245, 158, 11, 0.2) !important;
  position: relative !important;
  overflow-y: auto !important;
  animation: fadeInDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Golden Medieval Top Rim */
.char-create-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(245, 158, 11, 0.5) 15%, 
    rgba(254, 240, 138, 0.98) 50%, 
    rgba(245, 158, 11, 0.5) 85%, 
    transparent 100%
  ) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  border-radius: 18px 18px 0 0 !important;
}

/* Header */
.char-create-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 12px !important;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  margin-bottom: 16px !important;
}

.char-create-header span {
  font-family: var(--font-hud), 'Chakra Petch', sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #fef08a !important;
  letter-spacing: 1.2px !important;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Ruby Jewel Close Buttons */
#btn-close-char-create,
#btn-close-del-modal {
  width: 28px !important;
  height: 28px !important;
  background: radial-gradient(circle at 35% 35%, #ef4444 0%, #991b1b 100%) !important;
  border: 1.5px solid rgba(254, 202, 202, 0.6) !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#btn-close-char-create:hover,
#btn-close-del-modal:hover {
  background: radial-gradient(circle at 35% 35%, #f87171 0%, #b91c1c 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  transform: scale(1.06) !important;
}

/* Delete Character Confirmation Modal */
.delete-char-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.9) 0%, rgba(3, 7, 18, 0.97) 100%) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100100 !important;
}

.delete-char-box {
  width: 90% !important;
  max-width: 460px !important;
  padding: 20px 24px !important;
  border-radius: 16px !important;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(45, 20, 20, 0.98) 0%, rgba(20, 10, 15, 0.97) 55%, rgba(10, 5, 8, 0.99) 100%) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 35px rgba(239, 68, 68, 0.25) !important;
}

/* 3D Metallic Gold Bevel - Confirm Character Creation Button */
#btn-confirm-create-char.btn-create-confirm,
.btn-create-confirm {
  width: 100% !important;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 70%, #b45309 100%) !important;
  border: 1.5px solid #fde047 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-family: var(--font-hud), 'Chakra Petch', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  padding: 13px 20px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  box-shadow: 
    0 4px 16px rgba(217, 119, 6, 0.55), 
    inset 0 1px 0 rgba(255, 255, 255, 0.45), 
    inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin-top: 8px !important;
  display: block !important;
  text-align: center !important;
}

#btn-confirm-create-char.btn-create-confirm:hover,
.btn-create-confirm:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 6px 24px rgba(245, 158, 11, 0.75), 
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  filter: brightness(1.08) !important;
}

#btn-confirm-create-char.btn-create-confirm:active,
.btn-create-confirm:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.5) !important;
}

/* ==========================================================================
   Gender Selector & Character Badges (Male / Female Customization)
   ========================================================================== */
.gender-section-header {
  font-family: var(--font-hud), 'Outfit', 'Chakra Petch', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #fde047 !important;
  letter-spacing: 0.6px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(245, 158, 11, 0.4) !important;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.gender-cards-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.gender-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  user-select: none !important;
}

.gender-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(254, 240, 138, 0.5) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 158, 11, 0.3) !important;
}

.gender-card .gender-icon {
  font-size: 26px !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) !important;
  transition: transform 0.2s ease !important;
}

.gender-card:hover .gender-icon {
  transform: scale(1.15) !important;
}

.gender-card .gender-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.gender-card .gender-title {
  font-family: var(--font-hud), 'Outfit', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  letter-spacing: 0.5px !important;
}

.gender-card .gender-desc {
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: 1px !important;
}

.gender-card .gender-check {
  font-size: 13px !important;
  color: #10b981 !important;
  font-weight: 900 !important;
  opacity: 0 !important;
  transform: scale(0.6) !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Male Active */
.gender-card[data-gender="male"].active {
  border-color: #38bdf8 !important;
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.45) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4), inset 0 0 12px rgba(56, 189, 248, 0.25) !important;
}

.gender-card[data-gender="male"].active .gender-title {
  color: #7dd3fc !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
}

.gender-card[data-gender="male"].active .gender-check {
  opacity: 1 !important;
  color: #38bdf8 !important;
  transform: scale(1) !important;
}

/* Female Active */
.gender-card[data-gender="female"].active {
  border-color: #f472b6 !important;
  background: linear-gradient(135deg, rgba(190, 24, 93, 0.45) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  box-shadow: 0 0 20px rgba(244, 114, 182, 0.4), inset 0 0 12px rgba(244, 114, 182, 0.25) !important;
}

.gender-card[data-gender="female"].active .gender-title {
  color: #fbcfe8 !important;
  text-shadow: 0 0 10px rgba(244, 114, 182, 0.6) !important;
}

.gender-card[data-gender="female"].active .gender-check {
  opacity: 1 !important;
  color: #f472b6 !important;
  transform: scale(1) !important;
}

/* Character Slot Gender Badge */
.char-slot-gender-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  margin-left: 6px !important;
  letter-spacing: 0.3px !important;
  vertical-align: middle !important;
}

.char-slot-gender-badge.gender-male {
  background: rgba(14, 165, 233, 0.2) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
}

.char-slot-gender-badge.gender-female {
  background: rgba(236, 72, 153, 0.2) !important;
  color: #fbcfe8 !important;
  border: 1px solid rgba(244, 114, 182, 0.5) !important;
}

/* Character Creation Girl Live Canvas */
#char-create-girl-canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.8)) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 5 !important;
}

/* ==========================================================================
   14. Master Fantasy Universal Confirmation Modal (#ro-custom-confirm-modal)
   ========================================================================== */
.ro-confirm-dialog-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.78) 0%, rgba(3, 7, 18, 0.92) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  font-family: var(--font-hud), 'Outfit', sans-serif !important;
  user-select: none !important;
  animation: fadeIn 0.2s ease-out !important;
}

.ro-confirm-box {
  width: 90% !important;
  max-width: 410px !important;
  padding: 24px 26px !important;
  border-radius: 18px !important;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(26, 38, 62, 0.98) 0%, rgba(13, 19, 33, 0.97) 55%, rgba(7, 10, 18, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.7) !important;
  box-shadow: 
    0 24px 70px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(10, 15, 26, 0.95),
    inset 0 0 0 1px rgba(254, 240, 138, 0.25),
    inset 0 0 35px rgba(0, 0, 0, 0.75),
    0 0 30px rgba(245, 158, 11, 0.25) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  animation: modalPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Golden Medieval Top Rim */
.ro-confirm-box::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(245, 158, 11, 0.5) 15%, 
    rgba(254, 240, 138, 0.98) 50%, 
    rgba(245, 158, 11, 0.5) 85%, 
    transparent 100%
  ) !important;
  z-index: 10 !important;
  pointer-events: none !important;
  border-radius: 18px 18px 0 0 !important;
}

/* Danger Variant (Red Ruby Frame) */
.ro-confirm-box.danger {
  border-color: rgba(239, 68, 68, 0.75) !important;
  box-shadow: 
    0 24px 70px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(10, 15, 26, 0.95),
    inset 0 0 0 1px rgba(254, 202, 202, 0.25),
    inset 0 0 35px rgba(0, 0, 0, 0.75),
    0 0 35px rgba(239, 68, 68, 0.3) !important;
}

.ro-confirm-box.danger::before {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(239, 68, 68, 0.5) 15%, 
    rgba(254, 202, 202, 0.95) 50%, 
    rgba(239, 68, 68, 0.5) 85%, 
    transparent 100%
  ) !important;
}

/* Icon Medallion */
.ro-confirm-icon-badge {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 12px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35) !important;
}

.ro-confirm-box.danger .ro-confirm-icon-badge {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.25) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border-color: rgba(239, 68, 68, 0.7) !important;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.4) !important;
}

.ro-confirm-icon-badge.has-item-sprite {
  width: 68px !important;
  height: 68px !important;
  border-radius: 18px !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 2px solid rgba(251, 191, 36, 0.8) !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.45), inset 0 0 12px rgba(251, 191, 36, 0.2) !important;
  animation: confirmItemPulse 1.8s ease-in-out infinite alternate;
}

@keyframes confirmItemPulse {
  0% { transform: scale(1.0); box-shadow: 0 0 16px rgba(251, 191, 36, 0.4); }
  100% { transform: scale(1.05); box-shadow: 0 0 26px rgba(251, 191, 36, 0.65); }
}

.ro-confirm-icon-badge.has-item-sprite span {
  font-size: 34px !important;
  line-height: 1 !important;
  display: block !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}

.ro-confirm-icon-badge canvas,
.ro-confirm-icon-badge img {
  width: 48px !important;
  height: 48px !important;
  margin: auto !important;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85));
  display: block;
}

/* Title */
.ro-confirm-title {
  font-family: var(--font-hud), 'Chakra Petch', sans-serif !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  color: #fef08a !important;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.6), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
  margin-bottom: 10px !important;
}

.ro-confirm-box.danger .ro-confirm-title {
  color: #fecaca !important;
  text-shadow: 0 0 14px rgba(239, 68, 68, 0.7), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Message Text Box (3D Sunken Well) */
.ro-confirm-message {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #cbd5e1 !important;
  line-height: 1.6 !important;
  background: rgba(9, 13, 24, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 18px !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6) !important;
}

/* Actions Row */
.ro-confirm-actions {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
}

/* 3D Metallic Confirm Button (Gold) */
.btn-ro-confirm-ok {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 70%, #b45309 100%) !important;
  border: 1.5px solid #fde047 !important;
  border-radius: 9px !important;
  color: #0f172a !important;
  font-family: var(--font-hud) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 10px 22px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  box-shadow: 
    0 4px 14px rgba(217, 119, 6, 0.55), 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-ro-confirm-ok:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  filter: brightness(1.08) !important;
}

.btn-ro-confirm-ok:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.5) !important;
}

/* 3D Crimson Ruby Confirm Button (Danger) */
.btn-ro-confirm-ok.danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 70%, #991b1b 100%) !important;
  border: 1.5px solid #fca5a5 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
  box-shadow: 
    0 4px 14px rgba(239, 68, 68, 0.55), 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
}

.btn-ro-confirm-ok.danger:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  filter: brightness(1.08) !important;
}

.btn-ro-confirm-ok.danger:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5) !important;
}

/* Refined Obsidian Glass Cancel Button */
.btn-ro-confirm-cancel {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 9px !important;
  color: #f1f5f9 !important;
  font-family: var(--font-hud) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  padding: 10px 20px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-ro-confirm-cancel:hover {
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.btn-ro-confirm-cancel:active {
  transform: translateY(1px) !important;
}

@keyframes modalPop {
  0% {
    opacity: 0;
    transform: scale(0.85) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ==========================================================================
   15. Master Fantasy Player Vending Setup & Dialogs (#vending-setup-modal, .vending-dialog)
   ========================================================================== */
.vending-dialog {
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(26, 38, 62, 0.98) 0%, rgba(13, 19, 33, 0.97) 55%, rgba(7, 10, 18, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.7) !important;
  border-radius: 14px !important;
  box-shadow: 
    0 24px 70px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(10, 15, 26, 0.95),
    inset 0 0 0 1px rgba(254, 240, 138, 0.25),
    inset 0 0 35px rgba(0, 0, 0, 0.75),
    0 0 25px rgba(245, 158, 11, 0.2) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  overflow: hidden !important;
}

/* Golden Medieval Top Rim */
.vending-dialog::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(245, 158, 11, 0.5) 15%, 
    rgba(254, 240, 138, 0.95) 50%, 
    rgba(245, 158, 11, 0.5) 85%, 
    transparent 100%
  ) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Universal Header Bar (Override brown background) */
.vending-header {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 8px rgba(0, 0, 0, 0.45) !important;
  padding: 9px 14px !important;
}

.vending-header span:not(.btn-text):not(.btn-icon) {
  font-family: var(--font-hud), 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fef08a !important;
  text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(245, 158, 11, 0.45) !important;
}

/* Ruby Close Button */
.vending-header .btn-close {
  width: 26px !important;
  height: 26px !important;
  background: radial-gradient(circle at 35% 35%, #ef4444 0%, #991b1b 100%) !important;
  border: 1.5px solid rgba(254, 202, 202, 0.6) !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vending-header .btn-close:hover {
  background: radial-gradient(circle at 35% 35%, #f87171 0%, #b91c1c 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  transform: scale(1.06) !important;
}

/* Shop Title Input Row (3D Sunken Well) */
.vending-title-row {
  background: rgba(9, 13, 24, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9px !important;
  padding: 8px 12px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

.vending-label {
  color: #fef08a !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
}

.vending-title-input {
  background: rgba(10, 15, 26, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 6px !important;
  color: #fef08a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 7px 12px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7) !important;
  transition: all 0.2s ease !important;
}

.vending-title-input:focus {
  border-color: #f59e0b !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(245, 158, 11, 0.45) !important;
}

/* Dual Sub-Panels */
.vending-sub-panel {
  background: rgba(9, 13, 24, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  padding: 10px 12px !important;
}

.vending-panel-header {
  border-bottom: 1px solid rgba(245, 158, 11, 0.25) !important;
  padding-bottom: 7px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.vending-panel-header span:first-child {
  color: #e2e8f0 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.vending-badge-count {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.35)) !important;
  border: 1px solid rgba(245, 158, 11, 0.6) !important;
  color: #fef08a !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
}

.vending-badge-hint {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #7dd3fc !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
}

/* Master 3D Sunken Velvet Item Cells (Inventory Picker) */
.vending-inven-item-cell {
  width: 44px !important;
  height: 44px !important;
  background: radial-gradient(circle at 50% 30%, rgba(20, 29, 48, 0.95) 0%, rgba(9, 13, 24, 0.98) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 
    inset 0 2px 5px rgba(0, 0, 0, 0.85), 
    0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vending-inven-item-cell:hover {
  border-color: #fde047 !important;
  box-shadow: 
    0 0 12px rgba(245, 158, 11, 0.5), 
    inset 0 2px 5px rgba(0, 0, 0, 0.7) !important;
  transform: scale(1.06) !important;
  background: radial-gradient(circle at 50% 30%, rgba(30, 46, 74, 0.95) 0%, rgba(13, 19, 33, 0.98) 100%) !important;
}

.vending-inven-item-qty {
  background: rgba(10, 15, 26, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px !important;
  padding: 1px 4px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #fef08a !important;
  bottom: 2px !important;
  right: 2px !important;
}

/* Selling Slot Cards (Left Panel) */
.vending-sell-slot-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.vending-slot-price-input {
  background: rgba(9, 13, 24, 0.85) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  border-radius: 5px !important;
  color: #fef08a !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* Footer Action Buttons */
.vending-footer {
  border-top: 1px solid rgba(245, 158, 11, 0.2) !important;
  padding-top: 12px !important;
}

.vending-footer-hint {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* 3D Metallic Gold Start Button */
.btn-vending-start {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 70%, #b45309 100%) !important;
  border: 1.5px solid #fde047 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  font-family: var(--font-hud) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  padding: 9px 18px !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  box-shadow: 
    0 3px 10px rgba(217, 119, 6, 0.5), 
    inset 0 1px 0 rgba(255, 255, 255, 0.4), 
    inset 0 -2px 0 rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-vending-start:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 18px rgba(245, 158, 11, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  filter: brightness(1.08) !important;
}

.btn-vending-start:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.5) !important;
}

/* Refined Obsidian Glass Cancel Button */
.btn-vending-cancel {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  font-family: var(--font-hud) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  padding: 9px 16px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-vending-cancel:hover {
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

.btn-vending-cancel:active {
  transform: translateY(1px) !important;
}











/* ==========================================================================
   Ranked Shadow Arena Board Dialog System
   ========================================================================== */

.arena-board-dialog {
  width: 880px;
  max-width: 96vw;
  max-height: 90vh;
  position: absolute;
  top: calc(50% - 330px);
  left: calc(50% - 440px);
  z-index: 1008;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  font-family: var(--font-hud, 'Outfit', 'Chakra Petch', sans-serif);
}

.arena-board-header {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.55);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: grab;
}

.arena-board-header:active {
  cursor: grabbing;
}

.arena-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arena-header-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

.arena-header-text-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arena-title-main {
  font-size: 15px;
  font-weight: 800;
  color: #fffbeb;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(245, 158, 11, 0.4);
  letter-spacing: 0.3px;
}

.arena-season-pill {
  font-size: 11px;
  font-weight: 700;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 999px;
  padding: 2px 10px;
}

.arena-btn-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #cbd5e1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.18s ease;
}

.arena-btn-close:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #f87171;
  color: #fff;
  transform: scale(1.08);
}

.arena-board-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  max-height: calc(90vh - 54px);
}

/* --- Hero Banner (Player Status) --- */
.arena-hero-banner {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.arena-hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
}

.arena-hero-avatar-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
}

.arena-hero-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, #334155 0%, #0f172a 100%);
  border: 2px solid #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
}

.arena-hero-avatar canvas,
.arena-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.arena-hero-tier-icon {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 16px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.arena-hero-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arena-hero-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arena-hero-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.2px;
}

.arena-hero-job-pill {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 6px;
  padding: 1px 7px;
}

.arena-hero-stats-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: #cbd5e1;
}

.arena-cp-badge strong {
  color: #fbbf24;
  font-weight: 800;
}

.arena-record-badge strong {
  color: #4ade80;
}

.arena-hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

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

.arena-tier-title {
  font-size: 13px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.arena-rp-badge {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.arena-rp-badge .rp-val {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.5);
  font-family: var(--font-hud, monospace);
}

.arena-rp-badge .rp-unit {
  font-size: 12px;
  font-weight: 800;
  color: #f59e0b;
}

.arena-hero-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arena-capsule {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(10, 15, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  padding: 6px 12px;
}

.arena-capsule .capsule-icon {
  font-size: 20px;
}

.arena-capsule .capsule-value {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.arena-capsule .capsule-sub {
  font-size: 10px;
  color: #94a3b8;
}

/* --- Toolbar --- */
.arena-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px;
}

.arena-toolbar-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #94a3b8;
}

.arena-toolbar-hint .hint-icon {
  font-size: 14px;
}

.arena-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.arena-tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}

.arena-tool-btn:hover {
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
  border-color: rgba(245, 158, 11, 0.6);
  color: #fff;
  transform: translateY(-1px);
}

.arena-tool-btn .btn-tool-timer {
  font-size: 10px;
  color: #f59e0b;
}

.arena-btn-refresh-cost {
  background: linear-gradient(180deg, rgba(30, 58, 95, 0.85) 0%, rgba(15, 28, 50, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.arena-btn-refresh-cost:hover {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.35) 0%, rgba(30, 58, 95, 0.95) 100%);
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}

.arena-btn-refresh-cost.refreshing {
  opacity: 0.65;
  pointer-events: none;
}

.arena-btn-refresh-cost.refreshing .btn-refresh-text {
  display: inline-block;
  animation: arenaRotateRefresh 0.8s linear infinite;
}

@keyframes arenaRotateRefresh {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.arena-refresh-price-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  color: #fbbf24;
  font-weight: 800;
  margin-left: 3px;
  letter-spacing: 0.2px;
}

.arena-refresh-price-tag .price-coin-icon {
  font-size: 10.5px;
}

.arena-log-pip {
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Opponents Grid --- */
.arena-opponents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 820px) {
  .arena-opponents-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.arena-opponent-card {
  position: relative;
  border-radius: 14px;
  padding: 13px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
  user-select: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.arena-opponent-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  transition: all 0.22s ease;
}

.arena-opponent-card.is-defeated {
  opacity: 0.72;
  filter: grayscale(0.55);
  border-color: rgba(16, 185, 129, 0.45) !important;
}
.arena-opponent-card.is-defeated:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* --- Card Tier Themes by Difficulty --- */
.arena-opponent-card.card-easy,
.arena-opponent-card.diff-easy {
  background: radial-gradient(ellipse at 50% 0%, rgba(16, 185, 129, 0.18) 0%, rgba(15, 23, 42, 0.95) 55%, rgba(6, 12, 22, 0.98) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.38);
}
.arena-opponent-card.card-easy::before,
.arena-opponent-card.diff-easy::before {
  background: linear-gradient(90deg, transparent, #10b981, transparent);
}
.arena-opponent-card.card-easy:hover,
.arena-opponent-card.diff-easy:hover {
  transform: translateY(-5px);
  border-color: #34d399;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.8), 0 0 24px rgba(16, 185, 129, 0.38);
}
.arena-opponent-card.card-easy .arena-card-diff-tag,
.arena-opponent-card.diff-easy .arena-card-diff-tag {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.45);
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
.arena-opponent-card.card-easy .card-avatar-wrap,
.arena-opponent-card.diff-easy .card-avatar-wrap {
  border-color: #10b981;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.35);
}

.arena-opponent-card.card-normal,
.arena-opponent-card.diff-normal {
  background: radial-gradient(ellipse at 50% 0%, rgba(14, 165, 233, 0.18) 0%, rgba(15, 23, 42, 0.95) 55%, rgba(6, 12, 22, 0.98) 100%);
  border: 1.5px solid rgba(14, 165, 233, 0.4);
}
.arena-opponent-card.card-normal::before,
.arena-opponent-card.diff-normal::before {
  background: linear-gradient(90deg, transparent, #0ea5e9, transparent);
}
.arena-opponent-card.card-normal:hover,
.arena-opponent-card.diff-normal:hover {
  transform: translateY(-5px);
  border-color: #38bdf8;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.8), 0 0 24px rgba(14, 165, 233, 0.38);
}
.arena-opponent-card.card-normal .arena-card-diff-tag,
.arena-opponent-card.diff-normal .arena-card-diff-tag {
  background: rgba(14, 165, 233, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.45);
  text-shadow: 0 0 8px rgba(14, 165, 233, 0.4);
}
.arena-opponent-card.card-normal .card-avatar-wrap,
.arena-opponent-card.diff-normal .card-avatar-wrap {
  border-color: #0ea5e9;
  box-shadow: 0 0 14px rgba(14, 165, 233, 0.35);
}

.arena-opponent-card.card-hard,
.arena-opponent-card.diff-hard {
  background: radial-gradient(ellipse at 50% 0%, rgba(245, 158, 11, 0.2) 0%, rgba(15, 23, 42, 0.95) 55%, rgba(6, 12, 22, 0.98) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.45);
}
.arena-opponent-card.card-hard::before,
.arena-opponent-card.diff-hard::before {
  background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}
.arena-opponent-card.card-hard:hover,
.arena-opponent-card.diff-hard:hover {
  transform: translateY(-5px);
  border-color: #fbbf24;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.8), 0 0 28px rgba(245, 158, 11, 0.45);
}
.arena-opponent-card.card-hard .arena-card-diff-tag,
.arena-opponent-card.diff-hard .arena-card-diff-tag {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.5);
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.arena-opponent-card.card-hard .card-avatar-wrap,
.arena-opponent-card.diff-hard .card-avatar-wrap {
  border-color: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
}

.arena-opponent-card.card-extreme,
.arena-opponent-card.diff-extreme {
  background: radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, 0.22) 0%, rgba(225, 29, 72, 0.15) 35%, rgba(15, 23, 42, 0.96) 65%, rgba(6, 12, 22, 0.99) 100%);
  border: 1.5px solid rgba(236, 72, 153, 0.55);
}
.arena-opponent-card.card-extreme::before,
.arena-opponent-card.diff-extreme::before {
  background: linear-gradient(90deg, #a855f7, #ec4899, #f43f5e);
}
.arena-opponent-card.card-extreme:hover,
.arena-opponent-card.diff-extreme:hover {
  transform: translateY(-6px);
  border-color: #f472b6;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.85), 0 0 32px rgba(236, 72, 153, 0.55);
}
.arena-opponent-card.card-extreme .arena-card-diff-tag,
.arena-opponent-card.diff-extreme .arena-card-diff-tag {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(225, 29, 72, 0.28) 100%);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.6);
  text-shadow: 0 0 10px rgba(236, 72, 153, 0.6);
}
.arena-opponent-card.card-extreme .card-avatar-wrap,
.arena-opponent-card.diff-extreme .card-avatar-wrap {
  border-color: #ec4899;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.55), inset 0 0 8px rgba(168, 85, 247, 0.35);
}

/* --- Card Inner Structure --- */
.card-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 6px;
}

.arena-card-diff-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.arena-card-tier-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  background: rgba(10, 15, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-avatar-wrap {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3px auto 1px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.arena-opponent-card:hover .card-avatar-wrap {
  transform: scale(1.06);
}

.card-avatar-inner {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, #1e293b 0%, #090d16 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-avatar-img,
.card-avatar-canvas,
.card-avatar-inner canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.card-avatar-emoji {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.card-avatar-lvl {
  position: absolute;
  bottom: -3px;
  right: -3px;
  background: #0f172a;
  border: 1.5px solid #38bdf8;
  color: #38bdf8;
  font-size: 10.5px;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  z-index: 3;
  white-space: nowrap;
}

.card-identity-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  text-align: center;
}

.card-opp-name {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85);
  letter-spacing: 0.2px;
}

.card-opp-title {
  font-size: 10px;
  color: #fcd34d;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.card-opp-job-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.card-opp-job-pill .job-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #38bdf8;
}

.card-cp-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.65) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 5px 8px;
  box-sizing: border-box;
}

.card-cp-box .cp-icon {
  font-size: 15px;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
}

.card-cp-box .cp-text-wrap {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.card-cp-box .cp-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
}

.card-cp-box .cp-number {
  font-size: 15px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.4);
}

.card-cp-box .cp-number small {
  font-size: 10px;
  color: #fcd34d;
  font-weight: 700;
}

.card-winrate-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-sizing: border-box;
}

.winrate-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 700;
}

.winrate-pct-val {
  color: #e2e8f0;
  font-weight: 800;
}

.winrate-pct-val small {
  color: #64748b;
  font-size: 9.5px;
}

.winrate-bar-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

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

.winrate-bar-fill.fill-easy { background: linear-gradient(90deg, #10b981, #34d399); }
.winrate-bar-fill.fill-normal { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.winrate-bar-fill.fill-hard { background: linear-gradient(90deg, #d97706, #fbbf24); }
.winrate-bar-fill.fill-extreme { background: linear-gradient(90deg, #9333ea, #f43f5e); }

.card-quote-box {
  width: 100%;
  min-height: 46px;
  background: rgba(10, 15, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 6px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}

.card-quote-box .quote-text {
  font-size: 10.5px;
  line-height: 1.4;
  color: #cbd5e1;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.card-rewards-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  flex-wrap: nowrap;
}

.reward-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

.reward-tag.gain {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.reward-tag.loss {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.reward-tag.coins {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.card-action-box {
  width: 100%;
  margin-top: 2px;
}

.btn-arena-fight {
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-arena-fight::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}

.btn-arena-fight:hover::after {
  left: 140%;
}

.btn-arena-fight:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.btn-arena-fight:active {
  transform: translateY(1px);
}

.btn-fight-easy {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-color: #6ee7b7;
  color: #ecfdf5;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-fight-easy:hover {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}

.btn-fight-normal {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
  border-color: #7dd3fc;
  color: #f0f9ff;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-fight-normal:hover {
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6);
}

.btn-fight-hard {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  border-color: #fde047;
  color: #fffbeb;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-fight-hard:hover {
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
}

.btn-fight-extreme {
  background: linear-gradient(135deg, #b91c1c 0%, #e11d48 50%, #7e22ce 100%);
  border-color: #f472b6;
  color: #fff;
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: extremeButtonPulse 2.5s infinite;
}
.btn-fight-extreme:hover {
  box-shadow: 0 6px 24px rgba(225, 29, 72, 0.7);
}

@keyframes extremeButtonPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(225, 29, 72, 0.5); }
  50% { box-shadow: 0 4px 24px rgba(236, 72, 153, 0.75), 0 0 12px rgba(126, 34, 206, 0.5); }
}

.fight-ticket-badge {
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  padding: 1px 6px;
  color: #fef08a;
}

/* --- Defense Drawer (Slide-over history) --- */
.arena-defense-drawer {
  background: rgba(15, 23, 42, 0.98);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  animation: fadeIn 0.2s ease;
}

.defense-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
}

.drawer-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.btn-drawer-close {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
}

.defense-drawer-body {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.defense-log-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.defense-log-card.won {
  border-color: rgba(16, 185, 129, 0.4);
}

.defense-log-card.lost {
  border-color: rgba(239, 68, 68, 0.4);
}

.defense-log-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.defense-log-outcome {
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
}

.defense-log-card.won .defense-log-outcome {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.defense-log-card.lost .defense-log-outcome {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.defense-log-rp {
  font-weight: 800;
}

.defense-log-time {
  font-size: 10px;
  color: #94a3b8;
}

.btn-defense-revenge {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-defense-revenge:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #fff;
}

/* --- Arena Footer --- */
.arena-board-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: #94a3b8;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.arena-footer-rules {
  display: flex;
  align-items: center;
  gap: 6px;
}

.arena-footer-rules .rule-tag {
  color: #f59e0b;
  font-weight: 800;
}

.arena-footer-season {
  color: #38bdf8;
  font-weight: 700;
  white-space: nowrap;
}

/* Highlight top bar arena button */
.service-bar-btn.highlight-arena-btn {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.22) 0%, rgba(180, 83, 9, 0.15) 100%) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
}

.service-bar-btn.highlight-arena-btn:hover {
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45) !important;
  transform: translateY(-2px) scale(1.05) !important;
}


/* ==========================================================================
   26. Ranked Shadow Arena Match Dual HUD & Settlement (.arena-match-hud, .arena-countdown-banner, .arena-settlement-dialog)
   ========================================================================== */

/* Top Dual Health Bar HUD (AAA Esports Arena Style) */
.arena-match-hud {
  position: fixed !important;
  top: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99990 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 94% !important;
  max-width: 880px !important;
  padding: 10px 18px !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.98) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
  border-top: 2px solid rgba(251, 191, 36, 0.85) !important;
  border-radius: 18px !important;
  box-shadow: 
    0 16px 45px rgba(0, 0, 0, 0.92), 
    0 0 30px rgba(245, 158, 11, 0.18), 
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  pointer-events: none !important;
  user-select: none !important;
  animation: slideDownIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Cyber-Gold Top Crest Light Beam */
.arena-match-hud::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 8% !important;
  right: 8% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent 0%, #38bdf8 25%, #fbbf24 50%, #f43f5e 75%, transparent 100%) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.8) !important;
  pointer-events: none !important;
}

/* Post-Match Smooth Slide-Up Fade Out (Disappear after 5s) */
.arena-match-hud.hud-fade-out {
  opacity: 0 !important;
  transform: translate(-50%, -28px) scale(0.96) !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

.arena-hud-side {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
}

.arena-hud-player {
  flex-direction: row !important;
}

.arena-hud-enemy {
  flex-direction: row !important;
  justify-content: flex-end !important;
}

.arena-hud-avatar-box {
  position: relative !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.arena-hud-player .arena-hud-avatar-box {
  background: radial-gradient(circle, #1e3a8a 0%, #0f172a 100%) !important;
  border: 2px solid #38bdf8 !important;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5), inset 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

.arena-hud-enemy .arena-hud-avatar-box {
  background: radial-gradient(circle, #881337 0%, #0f172a 100%) !important;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5), inset 0 0 10px rgba(239, 68, 68, 0.3) !important;
}

.arena-hud-avatar {
  font-size: 24px !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.arena-hud-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

.arena-hud-avatar.enemy-avatar {
  filter: drop-shadow(0 0 6px rgba(244, 63, 94, 0.6)) !important;
}

.arena-corner-tag {
  position: absolute !important;
  bottom: -3px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  padding: 1.5px 7px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  white-space: nowrap !important;
}

.arena-corner-tag.tag-blue {
  background: linear-gradient(135deg, #1d4ed8 0%, #38bdf8 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.8) !important;
}

.arena-corner-tag.tag-red {
  background: linear-gradient(135deg, #b91c1c 0%, #f43f5e 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.8) !important;
}

.arena-hud-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
}

.arena-hud-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.arena-hud-name-row.enemy-row {
  justify-content: flex-end !important;
}

.arena-hud-name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

.arena-hud-name.enemy-name {
  color: #fef08a !important;
  text-shadow: 0 0 10px rgba(254, 240, 138, 0.4), 0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Styled Job & Level Badges */
.arena-hud-job-pill {
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  letter-spacing: 0.4px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(4px) !important;
}

.arena-hud-player .arena-hud-job-pill {
  background: rgba(56, 189, 248, 0.16) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #7dd3fc !important;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25) !important;
}

.arena-hud-enemy .arena-hud-job-pill {
  background: rgba(239, 68, 68, 0.16) !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.25) !important;
}

/* Beveled Metallic HP Bar Track */
.arena-hp-bar-track {
  position: relative !important;
  width: 100% !important;
  height: 20px !important;
  background: rgba(3, 7, 18, 0.96) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  overflow: hidden !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.arena-hp-bar-fill {
  height: 100% !important;
  border-radius: 9px !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.arena-hp-bar-fill.player-fill {
  background: linear-gradient(90deg, #059669 0%, #10b981 40%, #34d399 75%, #a7f3d0 100%) !important;
  box-shadow: 0 0 14px rgba(52, 211, 153, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.arena-hp-bar-fill.enemy-fill {
  background: linear-gradient(90deg, #991b1b 0%, #dc2626 40%, #ef4444 75%, #fca5a5 100%) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  margin-left: auto !important;
}

/* Animated Radiant Energy Shimmer Sweep across HP Bars */
.arena-hp-bar-fill::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%) !important;
  transform: skewX(-25deg) !important;
  animation: arenaHpSweep 3.2s infinite ease-in-out !important;
}

@keyframes arenaHpSweep {
  0%, 40% { left: -80%; }
  80%, 100% { left: 160%; }
}

.arena-hp-bar-text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 4px #000, 0 0 8px #000 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* Center VS & Digital Clock Capsule */
.arena-hud-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
  min-width: 96px !important;
}

.arena-hud-vs-badge {
  font-family: 'Outfit', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  letter-spacing: 1.5px !important;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.8), 0 2px 4px #000 !important;
}

.arena-hud-timer-badge {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.98) 100%) !important;
  padding: 2px 12px !important;
  border-radius: 20px !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.arena-hud-timer-badge .timer-sec {
  font-size: 21px !important;
  font-weight: 900 !important;
  color: #38bdf8 !important;
  font-family: 'Outfit', 'Chakra Petch', monospace !important;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.8) !important;
  letter-spacing: 1px !important;
}

.arena-hud-timer-badge .timer-unit {
  font-size: 11px !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

.arena-hud-mode-pill {
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fde047 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 1.5px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 1.2px !important;
  text-shadow: 0 0 6px rgba(245, 158, 11, 0.5) !important;
}

@media (max-width: 680px) {
  .arena-match-hud {
    top: 8px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    width: 98% !important;
  }
  .arena-hud-avatar-box {
    width: 40px !important;
    height: 40px !important;
  }
  .arena-hud-avatar {
    font-size: 19px !important;
  }
  .arena-hud-name {
    font-size: 12px !important;
  }
  .arena-hud-job-pill {
    font-size: 9.5px !important;
    padding: 1px 5px !important;
  }
  .arena-hp-bar-track {
    height: 16px !important;
  }
  .arena-hp-bar-text {
    font-size: 9.5px !important;
  }
  .arena-hud-timer-badge .timer-sec {
    font-size: 16px !important;
  }
}

/* 3-2-1 FIGHT Countdown Banner */
.arena-countdown-banner {
  position: fixed !important;
  top: 38% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 99995 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  user-select: none !important;
}

.countdown-sub-text {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #f59e0b !important;
  letter-spacing: 3px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(245, 158, 11, 0.7) !important;
  margin-bottom: -10px !important;
}

.countdown-main-num {
  font-size: 96px !important;
  font-weight: 900 !important;
  font-family: var(--font-hud), sans-serif !important;
  color: #ffffff !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 0 35px rgba(254, 240, 138, 0.9) !important;
  animation: countdownPop 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}

.countdown-main-num.pulse-fight {
  font-size: 84px !important;
  color: #fde047 !important;
  text-shadow: 0 0 30px #f59e0b, 0 0 60px #ef4444, 0 6px 20px rgba(0,0,0,0.95) !important;
}

.countdown-main-num.pulse-ko-win {
  font-size: 108px !important;
  color: #fde047 !important;
  text-shadow: 
    0 0 25px #f59e0b, 
    0 0 50px #ef4444, 
    0 0 85px rgba(254, 240, 138, 0.95), 
    0 8px 25px rgba(0, 0, 0, 0.98) !important;
  letter-spacing: 4px !important;
  animation: koImpactPop 1.9s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.countdown-main-num.pulse-ko-loss {
  font-size: 108px !important;
  color: #f87171 !important;
  text-shadow: 
    0 0 25px #dc2626, 
    0 0 50px #7f1d1d, 
    0 0 85px rgba(248, 113, 113, 0.9), 
    0 8px 25px rgba(0, 0, 0, 0.98) !important;
  letter-spacing: 4px !important;
  animation: koImpactPop 1.9s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.countdown-main-num.pulse-timeover {
  font-size: 78px !important;
  color: #38bdf8 !important;
  text-shadow: 
    0 0 25px #0284c7, 
    0 0 50px #0369a1, 
    0 0 85px rgba(56, 189, 248, 0.95), 
    0 8px 25px rgba(0, 0, 0, 0.98) !important;
  letter-spacing: 3px !important;
  animation: koImpactPop 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.countdown-main-num.pulse-decision-win {
  font-size: 78px !important;
  color: #fde047 !important;
  text-shadow: 
    0 0 25px #f59e0b, 
    0 0 50px #d97706, 
    0 0 85px rgba(254, 240, 138, 0.95), 
    0 8px 25px rgba(0, 0, 0, 0.98) !important;
  letter-spacing: 3px !important;
  animation: koImpactPop 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.timer-warning-pulse {
  animation: timerPulse 0.8s infinite alternate !important;
}

@keyframes timerPulse {
  0% { transform: scale(1); opacity: 1; text-shadow: 0 0 6px rgba(239, 68, 68, 0.6); }
  100% { transform: scale(1.15); opacity: 0.85; text-shadow: 0 0 16px rgba(239, 68, 68, 1); }
}

@keyframes countdownPop {
  0% { transform: scale(0.3); opacity: 0; }
  45% { transform: scale(1.15); opacity: 1; }
  75% { transform: scale(0.98); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}

@keyframes koImpactPop {
  0% { transform: scale(2.4); opacity: 0; filter: blur(10px); }
  18% { transform: scale(0.92); opacity: 1; filter: blur(0); }
  35% { transform: scale(1.05); opacity: 1; }
  78% { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(1.12); opacity: 0; filter: blur(4px); }
}

/* Arena Settlement Dialog Modal - Positioned to the right side so it never blocks the duelists in center screen */
.arena-settlement-dialog {
  position: fixed !important;
  top: 50% !important;
  right: 48px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 100000 !important;
  width: 92% !important;
  max-width: 500px !important;
  max-height: 94vh !important;
  overflow-y: auto !important;
  background: radial-gradient(circle at 50% 0%, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%) !important;
  backdrop-filter: blur(12px) !important;
  border: 2px solid #f59e0b !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.96), 0 0 40px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(254, 240, 138, 0.4) !important;
  padding: 14px 24px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  animation: settlementFadeSlideIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  user-select: none !important;
}

@keyframes settlementFadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(50px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    filter: blur(0);
  }
}

/* Responsive adjustment for tablet/mobile or compact viewports */
@media (max-width: 860px) {
  .arena-settlement-dialog {
    right: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 94% !important;
    animation: modalPopIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }
}

/* ✖ Settlement Modal Close Button */
.settlement-btn-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  width: 26px !important;
  height: 26px !important;
  background: radial-gradient(circle at 35% 35%, #ef4444 0%, #991b1b 100%) !important;
  border: 1.5px solid rgba(254, 202, 202, 0.7) !important;
  border-radius: 7px !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 100 !important;
}

.settlement-btn-close:hover {
  background: radial-gradient(circle at 35% 35%, #f87171 0%, #dc2626 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.1) !important;
}

.settlement-btn-close:active {
  transform: scale(0.92) !important;
}

.settlement-drag-header {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 2px 10px 8px !important;
  margin-bottom: 6px !important;
  cursor: grab !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.18) !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  transition: all 0.15s ease !important;
}

.settlement-drag-header:hover {
  color: #fde047 !important;
  border-bottom-color: rgba(245, 158, 11, 0.4) !important;
}

.settlement-drag-header:active {
  cursor: grabbing !important;
}

.settlement-drag-grip {
  font-size: 15px !important;
  color: #f59e0b !important;
  opacity: 0.85 !important;
  letter-spacing: 2px !important;
}

.settlement-drag-title {
  text-transform: uppercase !important;
  font-family: var(--font-hud), sans-serif !important;
}

.settlement-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
}

.settlement-crest-wrap {
  position: relative !important;
  margin-bottom: 8px !important;
}

.settlement-crest-icon {
  font-size: 58px !important;
  position: relative !important;
  z-index: 2 !important;
}

.settlement-crest-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  filter: blur(20px) !important;
  z-index: 1 !important;
}

.settlement-crest-glow.glow-victory {
  background: rgba(245, 158, 11, 0.6) !important;
}

.settlement-crest-glow.glow-defeat {
  background: rgba(239, 68, 68, 0.6) !important;
}

.settlement-crest-glow.glow-draw {
  background: rgba(56, 189, 248, 0.6) !important;
}

.settlement-title {
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  margin: 0 0 4px 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
}

.settlement-subtitle {
  font-size: 13.5px !important;
  color: #94a3b8 !important;
  margin-bottom: 12px !important;
}

/* --- Live Rank Movement Banner in Settlement --- */
.settlement-rank-movement-card {
  width: 100% !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 0 12px rgba(245, 158, 11, 0.12) !important;
  animation: rankBadgeDropIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes rankBadgeDropIn {
  0% { opacity: 0; transform: translateY(-8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.rank-movement-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.rank-movement-main .rank-tag-icon {
  font-size: 17px !important;
}

.rank-movement-main .rank-tag-label {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

.rank-movement-main .rank-tag-number {
  font-size: 19px !important;
  color: #fbbf24 !important;
  font-weight: 900 !important;
  font-family: var(--font-hud), sans-serif !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5) !important;
}

.rank-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px !important;
}

.rank-badge-pill.rank-up {
  background: rgba(16, 185, 129, 0.22) !important;
  border: 1px solid rgba(16, 185, 129, 0.6) !important;
  color: #34d399 !important;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
  animation: rankPillPulse 1.8s infinite ease-in-out !important;
}

.rank-badge-pill.rank-down {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.6) !important;
  color: #f87171 !important;
}

.rank-badge-pill.rank-same {
  background: rgba(148, 163, 184, 0.18) !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
  color: #cbd5e1 !important;
}

@keyframes rankPillPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.rank-movement-sub {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

.rank-movement-sub strong {
  color: #f8fafc !important;
}

.settlement-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

.settlement-stat-box {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.25s ease !important;
}

.settlement-stat-box.is-counting {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.3), inset 0 0 10px rgba(245, 158, 11, 0.15) !important;
  background: rgba(30, 41, 59, 0.85) !important;
}

.settlement-stat-box .stat-label {
  font-size: 11px !important;
  color: #94a3b8 !important;
}

.settlement-stat-box .stat-value {
  font-size: 15.5px !important;
  color: #f8fafc !important;
  font-weight: 800 !important;
  font-family: var(--font-hud), sans-serif !important;
  display: inline-block !important;
  transition: color 0.2s ease !important;
}

.settlement-rewards-card {
  width: 100% !important;
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-bottom: 20px !important;
}

.rewards-card-header {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #f59e0b !important;
  margin-bottom: 8px !important;
  text-align: left !important;
}

.rewards-row {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
}

.rewards-row.rewards-row-bonus {
  margin-top: 10px !important;
}

.reward-pill-large {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
}

.reward-pill-large.is-counting {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.35) !important;
  background: rgba(30, 41, 59, 0.9) !important;
}

.reward-pill-large.pill-reward-finish {
  animation: rewardPillPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes rewardPillPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 0 24px rgba(245, 158, 11, 0.5); }
  100% { transform: scale(1); }
}

.number-pop-finish {
  animation: numberPopPunch 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes numberPopPunch {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); text-shadow: 0 0 14px rgba(254, 240, 138, 0.85); }
  100% { transform: scale(1); }
}

.coin-spin-anim {
  display: inline-block !important;
  animation: coinSpin3D 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes coinSpin3D {
  0% { transform: scale(1) rotateY(0deg); }
  50% { transform: scale(1.3) rotateY(180deg); filter: drop-shadow(0 0 8px #f59e0b); }
  100% { transform: scale(1) rotateY(360deg); }
}

.trophy-gleam {
  animation: trophyGleamPop 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

@keyframes trophyGleamPop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.8)); }
  100% { transform: scale(1); opacity: 1; }
}

.reward-pill-large .reward-icon {
  font-size: 26px !important;
  flex-shrink: 0 !important;
}

.reward-pill-large .reward-text {
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

.reward-label-row {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
}

.reward-pill-large .reward-label {
  font-size: 11px !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.reward-delta-badge {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 1px 7px !important;
  border-radius: 999px !important;
  opacity: 0;
  transform: scale(0.8);
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.reward-delta-badge.show {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.reward-delta-badge.plus {
  background: rgba(16, 185, 129, 0.22) !important;
  border: 1px solid rgba(16, 185, 129, 0.55) !important;
  color: #34d399 !important;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.35) !important;
}

.reward-delta-badge.minus {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid rgba(239, 68, 68, 0.55) !important;
  color: #f87171 !important;
}

.reward-delta-badge.coin {
  background: rgba(245, 158, 11, 0.22) !important;
  border: 1px solid rgba(245, 158, 11, 0.55) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35) !important;
}

.reward-delta-badge.ticket {
  background: rgba(244, 114, 182, 0.22) !important;
  border: 1px solid rgba(244, 114, 182, 0.6) !important;
  color: #f472b6 !important;
  box-shadow: 0 0 8px rgba(244, 114, 182, 0.35) !important;
}

.reward-value-row {
  width: 100% !important;
}

.reward-pill-large .reward-val {
  font-size: 18px !important;
  font-weight: 900 !important;
  font-family: var(--font-hud), sans-serif !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
}

.reward-sub-detail {
  font-size: 10.5px !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  transition: color 0.3s ease !important;
}

.reward-sub-detail.active {
  color: #94a3b8 !important;
}

.reward-sub-detail .val-prev {
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

.reward-sub-detail .val-new {
  color: #38bdf8 !important;
  font-weight: 800 !important;
}

.reward-pill-large.coin-pill .reward-sub-detail .val-new {
  color: #fbbf24 !important;
}

.reward-pill-large.slot-ticket-pill {
  width: 100% !important;
  border-color: rgba(244, 114, 182, 0.45) !important;
  background: radial-gradient(circle at 50% 0%, rgba(244, 114, 182, 0.14) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  padding: 9px 14px !important;
}

.reward-pill-large.slot-ticket-pill.is-counting {
  border-color: rgba(244, 114, 182, 0.85) !important;
  box-shadow: 0 0 18px rgba(244, 114, 182, 0.45) !important;
  background: rgba(30, 41, 59, 0.95) !important;
}

.reward-pill-large.slot-ticket-pill .reward-icon {
  font-size: 26px !important;
  filter: drop-shadow(0 0 8px rgba(244, 114, 182, 0.75));
}

.reward-pill-large.slot-ticket-pill .reward-val {
  color: #f472b6 !important;
  text-shadow: 0 0 10px rgba(244, 114, 182, 0.55) !important;
}

.reward-pill-large.slot-ticket-pill .reward-sub-detail {
  color: #fbcfe8 !important;
  font-size: 9.5px !important;
}

.settlement-actions {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
}

.btn-settlement {
  flex: 1 !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: var(--font-hud), sans-serif !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-settlement.primary {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  border: 1.5px solid #fde047 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important;
}

.btn-settlement.primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.65) !important;
}

.btn-settlement.secondary {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  color: #cbd5e1 !important;
}

.btn-settlement.secondary:hover {
  background: rgba(51, 65, 85, 0.9) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

@media (max-width: 480px) {
  .arena-settlement-dialog {
    padding: 16px 12px !important;
  }
  .settlement-title {
    font-size: 26px !important;
  }
  .rewards-row.rewards-row-primary {
    gap: 8px !important;
  }
  .reward-pill-large {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .reward-pill-large .reward-icon {
    font-size: 22px !important;
  }
  .reward-pill-large .reward-val {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   🎫 Arena Ticket Depleted In-Game Modal Alert
   ========================================================================== */
.arena-ticket-alert-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 440px !important;
  max-width: 92vw !important;
  background: radial-gradient(ellipse at 50% 0%, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 55%, rgba(2, 6, 23, 0.99) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.75) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 24px 70px rgba(0, 0, 0, 0.9),
    0 0 35px rgba(245, 158, 11, 0.25),
    inset 0 1px 0 rgba(254, 240, 138, 0.35) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 99999 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.arena-alert-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.3) !important;
  padding: 10px 16px !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  font-family: var(--font-hud), sans-serif !important;
}

.arena-alert-title-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.arena-alert-icon {
  font-size: 16px !important;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5)) !important;
}

.arena-alert-body {
  padding: 24px 22px 20px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.arena-alert-badge-wrap {
  margin-bottom: 14px !important;
}

.arena-alert-ticket-icon-glow {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(15, 23, 42, 0.6) 80%) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.35), inset 0 0 12px rgba(245, 158, 11, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.arena-alert-ticket-icon-glow .main-ico {
  font-size: 34px !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)) !important;
}

.arena-alert-ticket-icon-glow .warn-pill {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  font-size: 18px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
}

.arena-alert-title {
  margin: 0 0 8px 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  font-family: var(--font-hud), sans-serif !important;
  color: #fbbf24 !important;
  text-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
  letter-spacing: 0.3px !important;
}

.arena-alert-desc {
  margin: 0 0 18px 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #cbd5e1 !important;
  font-family: var(--font-hud), sans-serif !important;
}

.arena-alert-desc strong {
  color: #fde047 !important;
}

.arena-alert-status-card {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 20px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.alert-stat-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
}

.alert-stat-col .stat-lbl {
  font-size: 11px !important;
  color: #94a3b8 !important;
  font-family: var(--font-hud), sans-serif !important;
}

.alert-stat-col .stat-val {
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: var(--font-hud), sans-serif !important;
}

.alert-stat-col .stat-val.tickets-empty {
  color: #ef4444 !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4) !important;
}

.alert-stat-col .stat-val.timer {
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
}

.alert-stat-divider {
  width: 1px !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.arena-alert-actions {
  width: 100% !important;
}

.btn-arena-alert-ok {
  width: 100% !important;
  padding: 12px 20px !important;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
  border: 1.5px solid #fde047 !important;
  border-radius: 10px !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: var(--font-hud), sans-serif !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.45) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-arena-alert-ok:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.65) !important;
  filter: brightness(1.06) !important;
}

.btn-arena-alert-ok:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}

/* 💬 Settlement Opponent Post-Match Quote Card */
.settlement-bot-quote-wrap {
  width: 100% !important;
  background: rgba(15, 23, 42, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left: 4px solid #f59e0b !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  animation: quoteFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

.settlement-bot-quote-wrap.is-victory {
  border-left-color: #f59e0b !important;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.12) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
}

.settlement-bot-quote-wrap.is-defeat {
  border-left-color: #ef4444 !important;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
}

.settlement-bot-quote-wrap.is-draw {
  border-left-color: #38bdf8 !important;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
}

.settlement-bot-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(30, 41, 59, 0.9) !important;
  border: 2px solid rgba(245, 158, 11, 0.6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.settlement-bot-quote-wrap.is-defeat .settlement-bot-avatar {
  border-color: rgba(239, 68, 68, 0.6) !important;
}

.settlement-bot-quote-wrap.is-draw .settlement-bot-avatar {
  border-color: rgba(56, 189, 248, 0.6) !important;
}

.settlement-bot-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.settlement-bot-quote-body {
  flex: 1 !important;
  min-width: 0 !important;
}

.settlement-bot-quote-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 3px !important;
}

.settlement-bot-quote-name {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fde047 !important;
  font-family: var(--font-hud), sans-serif !important;
}

.settlement-bot-quote-wrap.is-defeat .settlement-bot-quote-name {
  color: #fca5a5 !important;
}

.settlement-bot-quote-wrap.is-draw .settlement-bot-quote-name {
  color: #bae6fd !important;
}

.settlement-bot-quote-tag {
  font-size: 10px !important;
  color: #94a3b8 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 1px 7px !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px !important;
}

.settlement-bot-quote-text {
  font-size: 13.5px !important;
  color: #f1f5f9 !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

@keyframes quoteFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ==========================================================================
   Shadow Arena Ranked Leaderboard Modal Styles (Season 1)
   ========================================================================== */

#arena-leaderboard-modal.arena-lb-dialog {
  width: 920px;
  max-width: 96vw;
  max-height: 92vh;
  position: absolute;
  top: calc(50% - 350px);
  left: calc(50% - 460px);
  z-index: 1010;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  font-family: var(--font-hud, 'Outfit', 'Chakra Petch', sans-serif);
  background: radial-gradient(circle at 50% 0%, #151c2e 0%, #0a0e17 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.5);
  border-radius: 14px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.8), 0 0 35px rgba(245, 158, 11, 0.18);
}

.arena-lb-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  background: transparent;
}

/* 1. Top 3 Podium Cards */
.arena-lb-podium-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding: 10px 0 6px 0;
}

.arena-podium-card {
  flex: 1;
  max-width: 250px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arena-podium-card:hover {
  transform: translateY(-3px);
}

/* Rank 1 (Champion) */
.arena-podium-card.podium-rank-1 {
  max-width: 280px;
  padding: 18px 14px;
  background: radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.15) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.35);
  order: 2;
}

/* Rank 2 (Silver) */
.arena-podium-card.podium-rank-2 {
  border: 1.5px solid #94a3b8;
  box-shadow: 0 0 18px rgba(148, 163, 184, 0.2);
  order: 1;
}

/* Rank 3 (Bronze) */
.arena-podium-card.podium-rank-3 {
  border: 1.5px solid #d97706;
  box-shadow: 0 0 18px rgba(217, 119, 6, 0.2);
  order: 3;
}

.podium-badge-rank {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.podium-badge-rank.gold-badge {
  background: linear-gradient(90deg, #b45309 0%, #f59e0b 50%, #d97706 100%);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.5);
}

.podium-avatar-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 4px 0;
}

.arena-podium-card.podium-rank-1 .podium-avatar-wrap {
  width: 76px;
  height: 76px;
}

.podium-avatar-box {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  overflow: hidden;
}

.podium-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.podium-avatar-box.gold-glow {
  border: 2.5px solid #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.6);
  font-size: 38px;
}

.podium-avatar-box.silver-glow {
  border: 2px solid #cbd5e1;
  box-shadow: 0 0 12px rgba(203, 213, 225, 0.4);
}

.podium-avatar-box.bronze-glow {
  border: 2px solid #f97316;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
}

.podium-tier-mini {
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 16px;
  background: #0f172a;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.podium-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.podium-name.gold-name {
  font-size: 15px;
  color: #fef08a;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.podium-job-pill {
  font-size: 11px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 8px;
  border-radius: 10px;
}

.podium-job-pill.gold-job {
  color: #fde047;
  background: rgba(245, 158, 11, 0.12);
}

.podium-rp-badge {
  font-size: 14px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.3px;
}

.podium-rp-badge.gold-rp {
  font-size: 16px;
  color: #fbbf24;
}

.podium-cp-text {
  font-size: 11px;
  color: #cbd5e1;
}

.podium-cp-text.gold-cp {
  color: #fef08a;
  font-weight: 600;
}

/* 2. Filter Tabs */
.arena-lb-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.arena-lb-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.arena-tab-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.arena-tab-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.arena-tab-pill.active {
  background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%);
  border-color: #60a5fa;
  color: #fff;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

.btn-arena-lb-refresh {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-arena-lb-refresh:hover {
  background: rgba(245, 158, 11, 0.25);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

/* 3. Ladder Table */
.arena-lb-table-container {
  max-height: 280px;
  overflow-y: auto;
  border-radius: 8px;
  background: rgba(10, 15, 26, 0.6);
  padding: 2px 4px;
}

.arena-lb-table-container::-webkit-scrollbar {
  width: 6px;
}

.arena-lb-table-container::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.35);
  border-radius: 3px;
}

.arena-lb-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: 12.5px;
}

.arena-lb-table thead th {
  position: sticky;
  top: 0;
  background: #0f172a;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
}

.arena-lb-table tbody tr {
  background: rgba(255, 255, 255, 0.025);
  transition: background 0.15s ease, transform 0.15s ease;
}

.arena-lb-table tbody tr:hover {
  background: rgba(245, 158, 11, 0.08);
}

.arena-lb-table tbody tr.is-me-row {
  background: rgba(37, 99, 235, 0.2) !important;
  border: 1px solid #3b82f6 !important;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

.arena-lb-table td {
  padding: 8px 10px;
  color: #e2e8f0;
  vertical-align: middle;
}

.td-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
}

.td-rank-1 { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); }
.td-rank-2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #0f172a; }
.td-rank-3 { background: linear-gradient(135deg, #f97316, #c2410c); color: #fff; }
.td-rank-other { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }

.td-player-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.td-player-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.td-player-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.td-player-meta {
  display: flex;
  flex-direction: column;
}

.td-player-name {
  font-weight: 700;
  color: #f8fafc;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-player-job {
  font-size: 10.5px;
  color: #94a3b8;
}

.arena-tier-pill-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.text-rp-cell {
  font-weight: 800;
  color: #38bdf8;
  font-size: 13px;
}

.text-cp-cell {
  font-weight: 700;
  color: #fef08a;
  font-size: 12.5px;
}

.text-winrate-cell {
  font-size: 11.5px;
  color: #cbd5e1;
}

/* 4. Sticky My Rank Bar */
.arena-lb-myrank-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.45) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.5px solid rgba(59, 130, 246, 0.4);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.myrank-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.myrank-badge {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
  letter-spacing: 0.5px;
}

.myrank-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.myrank-name {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.myrank-tier-pill {
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
}

.myrank-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.myrank-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.myrank-stat-item .stat-lbl {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
}

.myrank-stat-item .stat-val {
  font-size: 13.5px;
  font-weight: 800;
}

.myrank-stat-item .stat-val.text-rp { color: #38bdf8; }
.myrank-stat-item .stat-val.text-cp { color: #fef08a; }
.myrank-stat-item .stat-val.text-winrate { color: #34d399; }


/* Defense History Empty State & Badges */
.defense-log-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 35px 20px;
  gap: 8px;
}

.defense-log-empty-state .empty-icon {
  font-size: 34px;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
}

.defense-log-empty-state .empty-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #f1f5f9;
}

.defense-log-empty-state .empty-desc {
  font-size: 12px;
  color: #94a3b8;
  max-width: 320px;
  line-height: 1.45;
}

.defense-revenged-badge {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: rgba(255, 255, 255, 0.06);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   🏰 Dola Online - Crystal Clash & Lane Defense Styling
   ========================================================================== */

/* Top Service Bar Highlight for Defense Button */
.service-bar-btn.highlight-defense-btn {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(59, 130, 246, 0.35) 100%);
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 0 16px rgba(14, 165, 233, 0.35);
}

.service-bar-btn.highlight-defense-btn:hover {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.45) 0%, rgba(59, 130, 246, 0.55) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.6);
  transform: translateY(-2px) scale(1.04);
}

/* 1. Crystal Defense Lobby Modal */
#crystal-defense-modal.defense-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 620px;
  background: radial-gradient(ellipse at 50% 0%, rgba(24, 38, 66, 0.98) 0%, rgba(13, 19, 36, 0.98) 60%, rgba(8, 12, 22, 0.99) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.65);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.92), 0 0 30px rgba(14, 165, 233, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  overflow: hidden;
}

#crystal-defense-modal.ro-modal-hidden,
#crystal-defense-modal.hidden {
  display: none !important;
}

.defense-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
}

.defense-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.defense-title-icon {
  font-size: 22px;
}

.defense-title-text {
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.5px;
}

.defense-modal-body {
  padding: 18px 20px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.defense-overview-banner {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}

.defense-banner-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #38bdf8;
  background: rgba(14, 165, 233, 0.15);
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}

.defense-overview-banner h3 {
  margin: 4px 0 6px 0;
  font-size: 16px;
  font-weight: 700;
  color: #fef08a;
}

.defense-overview-banner p {
  margin: 0;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.45;
}

.defense-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.defense-rule-card {
  display: flex;
  gap: 12px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  align-items: center;
}

.defense-rule-card .rule-icon {
  font-size: 24px;
}

.defense-rule-card .rule-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.defense-rule-card .rule-content strong {
  font-size: 13px;
  color: #f1f5f9;
}

.defense-rule-card .rule-content span {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
}

.defense-stats-row {
  display: flex;
  justify-content: space-around;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}

.defense-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.defense-stat-item .stat-label {
  font-size: 11px;
  color: #94a3b8;
}

.defense-stat-item .stat-val {
  font-size: 16px;
  font-weight: 800;
  color: #38bdf8;
}

.defense-actions-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}

.btn-defense-leaderboard {
  flex: 1;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fffbeb;
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
  border: 1.5px solid #fde68a;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.45);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-defense-leaderboard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(217, 119, 6, 0.65);
  border-color: #ffffff;
}

.btn-defense-start {
  flex: 1.2;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 50%, #4f46e5 100%);
  border: 1.5px solid #60a5fa;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-defense-start:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.65);
  border-color: #93c5fd;
}

.btn-defense-start:disabled,
.btn-defense-start.disabled {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.85;
}

/* 🎟️ Daily Entry Quota Banner */
.defense-daily-quota-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.4);
  border-radius: 10px;
  padding: 10px 16px;
  margin-top: 10px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.defense-daily-quota-banner.exhausted {
  border-color: rgba(239, 68, 68, 0.55);
  background: linear-gradient(135deg, rgba(69, 10, 10, 0.4) 0%, rgba(15, 23, 42, 0.98) 100%);
}

.defense-daily-quota-banner .quota-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.defense-daily-quota-banner .quota-icon {
  font-size: 26px;
  filter: drop-shadow(0 2px 6px rgba(56, 189, 248, 0.4));
}

.defense-daily-quota-banner.exhausted .quota-icon {
  filter: drop-shadow(0 2px 6px rgba(239, 68, 68, 0.4));
}

.defense-daily-quota-banner .quota-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.defense-daily-quota-banner .quota-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 6px;
}

.defense-daily-quota-banner .quota-sub {
  font-size: 11px;
  color: #94a3b8;
}

.defense-daily-quota-banner .quota-counter {
  font-size: 16px;
  font-weight: 800;
  color: #38bdf8;
  padding: 5px 14px;
  background: rgba(14, 165, 233, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.defense-daily-quota-banner.exhausted .quota-counter {
  color: #f87171;
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.35);
}

/* 2. In-Match Top HUD Bar */
.crystal-defense-hud {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  pointer-events: auto;
  user-select: none;
}

.defense-hud-content {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(15, 23, 42, 0.92);
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  border-radius: 30px;
  padding: 8px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(14, 165, 233, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.defense-hud-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 140px;
}

.defense-team-badge {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
}

.defense-hp-bar-wrap {
  position: relative;
  width: 140px;
  height: 14px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.defense-hp-bar {
  height: 100%;
  transition: width 0.25s ease-out;
}

.defense-hp-bar.fill-ally {
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
}

.defense-hp-bar.fill-enemy {
  background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.defense-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9.5px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.defense-towers-status {
  display: flex;
  gap: 6px;
  font-size: 13px;
}

.tower-dot {
  transition: opacity 0.2s ease;
}

.defense-hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 10px;
}

.defense-hud-title {
  font-size: 11px;
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: 0.8px;
}

.defense-hud-wave {
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
}

.defense-surrender-btn {
  font-size: 10.5px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  margin-top: 2px;
  transition: all 0.15s;
}

.defense-surrender-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #ffffff;
}

/* 3. Settlement Modal */
#crystal-defense-settlement-modal.defense-settlement-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 480px;
  background: radial-gradient(ellipse at 50% 0%, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.65);
  border-radius: 14px;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.95), 0 0 35px rgba(245, 158, 11, 0.3);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 10000;
  overflow: hidden;
}

#crystal-defense-settlement-modal.ro-modal-hidden,
#crystal-defense-settlement-modal.hidden {
  display: none !important;
}

.defense-settle-banner {
  text-align: center;
  padding: 24px 20px 16px 20px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.15) 0%, transparent 100%);
}

.defense-settle-banner h2 {
  margin: 0 0 6px 0;
  font-size: 22px;
  font-weight: 800;
  color: #fef08a;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.defense-settle-banner p {
  margin: 0;
  font-size: 13.5px;
  color: #cbd5e1;
}

.defense-settle-body {
  padding: 16px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settle-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: rgba(15, 23, 42, 0.6);
  border-radius: 8px;
  font-size: 13px;
}

.settle-label {
  color: #94a3b8;
}

.settle-reward-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.reward-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
}

.reward-box .reward-icon {
  font-size: 24px;
}

.reward-box .reward-info {
  display: flex;
  flex-direction: column;
}

.reward-box .reward-title {
  font-size: 11px;
  color: #94a3b8;
}

.reward-box .reward-amt {
  font-size: 15px;
  font-weight: 800;
  color: #fef08a;
}

.defense-settle-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.btn-settle {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-settle.primary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0f172a;
  border: 1.5px solid #fde047;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.btn-settle.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.55);
}

.btn-settle.secondary {
  background: rgba(30, 41, 59, 0.8);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.15);
}


.btn-settle-lb {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.85) 0%, rgba(245, 158, 11, 0.85) 100%) !important;
  color: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
}
.btn-settle-lb:hover {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
}

.btn-settle.secondary:hover {
  background: rgba(51, 65, 85, 0.9);
  color: #ffffff;
}

/* =========================================================================
   💀 Crystal Defense Respawn Countdown Banner
   ========================================================================= */
.defense-respawn-banner {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  pointer-events: none;
  user-select: none;
  animation: defenseRespawnSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.defense-respawn-banner.hidden {
  display: none !important;
}

@keyframes defenseRespawnSlideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.defense-respawn-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 380px;
  padding: 12px 20px 10px 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(69, 10, 10, 0.95) 0%, rgba(26, 12, 16, 0.97) 100%);
  border: 1.5px solid rgba(239, 68, 68, 0.7);
  border-radius: 12px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.88), 0 0 25px rgba(239, 68, 68, 0.35);
  backdrop-filter: blur(8px);
}

.defense-respawn-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.defense-respawn-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8));
  animation: defenseRespawnPulse 1.2s infinite ease-in-out;
}

@keyframes defenseRespawnPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.8));
  }
  50% {
    transform: scale(1.15);
    filter: drop-shadow(0 0 16px rgba(239, 68, 68, 1));
  }
}

.defense-respawn-body {
  display: flex;
  flex-direction: column;
}

.defense-respawn-title {
  font-size: 14px;
  font-weight: 800;
  color: #fca5a5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.5px;
}

.defense-respawn-desc {
  font-size: 12.5px;
  color: #e2e8f0;
  margin-top: 2px;
}

.defense-respawn-seconds {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #fde047;
  text-shadow: 0 0 10px rgba(250, 204, 21, 0.75);
  min-width: 22px;
  text-align: center;
}

.defense-respawn-bar-wrap {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2px;
}

.defense-respawn-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 60%, #10b981 100%);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
  transition: width 0.15s linear;
}

/* =========================================================================
   🌻 PvZ-Style Action Tower Defense Build Dock & HUD Elements
   ========================================================================= */
.defense-wave-mobs-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 8px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #fca5a5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.defense-build-bar {
  position: fixed;
  bottom: 82px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  pointer-events: auto;
  user-select: none;
  animation: defenseDockSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.defense-build-bar.hidden {
  display: none !important;
}

@keyframes defenseDockSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 25px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.defense-build-dock {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 32, 58, 0.96) 0%, rgba(10, 16, 32, 0.98) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  border-radius: 14px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(14, 165, 233, 0.22);
  backdrop-filter: blur(10px);
  height: 60px;
  box-sizing: border-box;
  max-width: 98vw;
}

.defense-gold-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.5) 0%, rgba(15, 23, 42, 0.92) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(251, 191, 36, 0.15), 0 2px 6px rgba(0, 0, 0, 0.4);
  height: 48px;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
}

.defense-gold-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(180, 83, 9, 0.45));
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 8px;
  font-size: 20px;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.8));
  animation: defenseGoldPulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

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

.defense-gold-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
}

.defense-gold-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}

.defense-gold-val {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.defense-gold-rate {
  font-size: 12px;
  font-weight: 700;
  color: #34d399;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
  margin-left: 2px;
  white-space: nowrap;
}

.defense-dock-divider {
  width: 1.5px;
  height: 34px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.defense-cards-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.defense-turret-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 7px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.96) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  height: 48px;
  min-width: 122px;
  box-sizing: border-box;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 🎨 Elemental Themed Accents */
#btn-build-arrow {
  border-color: rgba(245, 158, 11, 0.38);
}
#btn-build-arrow .turret-card-icon {
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.35), rgba(120, 53, 15, 0.55));
  border-color: rgba(245, 158, 11, 0.4);
}

#btn-build-frost {
  border-color: rgba(56, 189, 248, 0.38);
}
#btn-build-frost .turret-card-icon {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.35), rgba(12, 74, 110, 0.55));
  border-color: rgba(56, 189, 248, 0.4);
}

#btn-build-cannon {
  border-color: rgba(239, 68, 68, 0.38);
}
#btn-build-cannon .turret-card-icon {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.35), rgba(127, 29, 29, 0.55));
  border-color: rgba(239, 68, 68, 0.4);
}

#btn-build-barricade {
  border-color: rgba(148, 163, 184, 0.38);
}
#btn-build-barricade .turret-card-icon {
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.35), rgba(30, 41, 59, 0.55));
  border-color: rgba(148, 163, 184, 0.4);
}

.turret-card-cooldown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.2s ease;
  border-radius: 9px;
}

.turret-card-cooldown-overlay.hidden {
  display: none !important;
}

.turret-card-progress-track {
  width: 82%;
  height: 5px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 4px;
  overflow: hidden;
}

.turret-card-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.9);
  transition: width 0.08s linear;
}

.turret-card-cooldown-text {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.5px;
}

.defense-turret-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.8);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.35);
  background: linear-gradient(180deg, rgba(51, 65, 85, 0.95) 0%, rgba(30, 41, 59, 0.98) 100%);
}

.defense-turret-card:active {
  transform: translateY(0) scale(0.96);
}

.defense-turret-card.selected {
  border-color: #fbbf24 !important;
  background: linear-gradient(180deg, rgba(69, 40, 10, 0.95) 0%, rgba(35, 20, 5, 0.98) 100%) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.75), inset 0 0 8px rgba(251, 191, 36, 0.4) !important;
  transform: translateY(-3px);
  animation: turretCardPulse 1.4s infinite ease-in-out;
}

@keyframes turretCardPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(245, 158, 11, 0.7); }
  50% { box-shadow: 0 0 24px rgba(245, 158, 11, 1); }
}

.defense-turret-card.disabled {
  opacity: 0.45;
  filter: grayscale(85%);
  cursor: not-allowed;
  pointer-events: none;
}

.turret-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.turret-card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 32px; /* Leaves clear space for quota badge on top-right */
}

.defense-army-upgrade-card .turret-card-info {
  padding-right: 0;
}

.turret-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.turret-card-cost {
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: #fde047;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.5);
  line-height: 1.15;
  white-space: nowrap;
}

.defense-next-wave-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1.5px solid #6ee7b7;
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  transition: all 0.18s;
  white-space: nowrap;
}

.defense-next-wave-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.65);
  background: linear-gradient(135deg, #34d399 0%, #059669 100%);
}

.defense-next-wave-btn:active {
  transform: translateY(0) scale(0.97);
}

.defense-next-wave-btn:disabled,
.defense-next-wave-btn.disabled {
  opacity: 0.45;
  filter: grayscale(80%);
  cursor: not-allowed;
  pointer-events: none;
}

.next-wave-icon {
  font-size: 16px;
  animation: nextWaveJitter 1.5s infinite ease-in-out;
}

@keyframes nextWaveJitter {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* 🛡️ Ally Army Upgrade Card */
.defense-turret-card.defense-army-upgrade-card {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(6, 78, 59, 0.85) 0%, rgba(15, 23, 42, 0.95) 100%);
  min-width: 125px;
  max-width: 165px;
}

.defense-turret-card.defense-army-upgrade-card:hover {
  border-color: #34d399;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(4, 120, 87, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
}

.defense-turret-card.defense-army-upgrade-card .turret-card-cost {
  color: #a7f3d0;
  text-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}

.defense-turret-card.defense-army-upgrade-card.maxed {
  border-color: rgba(251, 191, 36, 0.6) !important;
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
}

.defense-turret-card.defense-army-upgrade-card.maxed .turret-card-cost {
  color: #fde047;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.6);
}

/* 🏹 Floating Tower Inspect & 3-Tier Upgrade Card */
.defense-tower-inspect-card {
  position: fixed;
  bottom: 156px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1085;
  pointer-events: auto;
  user-select: none;
  animation: towerInspectSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.defense-tower-inspect-card.hidden {
  display: none !important;
}

@keyframes towerInspectSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 15px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

.tower-inspect-dock {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 380px;
  max-width: 440px;
  padding: 12px 18px 14px 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(24, 38, 66, 0.98) 0%, rgba(13, 19, 36, 0.99) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.65);
  border-radius: 14px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9), 0 0 25px rgba(14, 165, 233, 0.3);
  backdrop-filter: blur(12px);
}

.tower-inspect-header {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.tower-inspect-icon {
  font-size: 32px;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.7));
  flex-shrink: 0;
}

.tower-inspect-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.tower-inspect-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tower-inspect-name {
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.3px;
}

.tower-inspect-level {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.tower-inspect-desc {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.3;
}

.tower-inspect-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 800;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.tower-inspect-close-btn:hover {
  background: rgba(239, 68, 68, 0.8);
  border-color: #ef4444;
  color: #ffffff;
  transform: scale(1.08);
}

.tower-inspect-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
}

.tower-stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.tower-stat-item .stat-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.tower-stat-item .stat-label {
  color: #94a3b8;
  font-weight: 600;
}

.tower-stat-item .stat-val {
  margin-left: auto;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: #f1f5f9;
}

.tower-stat-item .stat-val.highlight-atk {
  color: #f87171;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.tower-inspect-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-tower-upgrade {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1.5px solid #38bdf8;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-tower-upgrade:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.6);
  border-color: #7dd3fc;
}

.btn-tower-upgrade:active {
  transform: translateY(0) scale(0.98);
}

.btn-tower-upgrade.disabled {
  opacity: 0.45;
  filter: grayscale(80%);
  cursor: not-allowed;
  pointer-events: none;
}

.btn-tower-upgrade.maxed {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.9) 0%, rgba(69, 26, 3, 0.95) 100%) !important;
  border-color: rgba(251, 191, 36, 0.7) !important;
  box-shadow: none !important;
  cursor: default !important;
  transform: none !important;
}

.btn-tower-upgrade .upgrade-btn-icon {
  font-size: 16px;
}

.btn-tower-upgrade .upgrade-btn-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.btn-tower-upgrade .upgrade-btn-title {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.btn-tower-upgrade .upgrade-btn-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fde047;
  text-shadow: 0 0 6px rgba(250, 204, 21, 0.5);
}

.btn-tower-repair {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-tower-repair:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.6);
}

.btn-tower-repair.disabled {
  opacity: 0.45;
  filter: grayscale(80%);
  cursor: not-allowed;
  pointer-events: none;
}

.btn-tower-repair.hidden {
  display: none !important;
}

.btn-tower-dismantle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
  border: 1.5px solid #ef4444;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.45);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-tower-dismantle:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.6);
  border-color: #f87171;
}

.btn-tower-dismantle:active {
  transform: translateY(0) scale(0.98);
}

.btn-tower-dismantle.hidden {
  display: none !important;
}

.btn-tower-dismantle .dismantle-btn-icon {
  font-size: 16px;
}

.btn-tower-dismantle .dismantle-btn-content {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.btn-tower-dismantle .dismantle-btn-title {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  color: #fecaca;
}

.btn-tower-dismantle .dismantle-btn-meta {
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #fca5a5;
}

/* =========================================================================
   🛡️ Crystal Defense Mission Directive Intro Overlay
   ========================================================================= */
.defense-mission-intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(15, 23, 42, 0.78) 0%, rgba(3, 7, 18, 0.94) 100%);
  backdrop-filter: blur(8px);
  animation: defenseMissionFadeIn 0.35s ease-out;
  pointer-events: auto;
  user-select: none;
}

.defense-mission-intro.hidden {
  display: none !important;
}

@keyframes defenseMissionFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.defense-mission-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 580px;
  width: 90%;
  padding: 28px 32px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 2px solid rgba(56, 189, 248, 0.65);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(56, 189, 248, 0.35);
  text-align: center;
}

.defense-mission-glow {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 120px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.5) 0%, rgba(56, 189, 248, 0) 70%);
  filter: blur(20px);
  pointer-events: none;
}

.defense-mission-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.defense-mission-crest {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.8));
  animation: defenseCrestPulse 2s infinite ease-in-out;
}

@keyframes defenseCrestPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.8)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 24px rgba(56, 189, 248, 1)); }
}

.defense-mission-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #38bdf8;
  text-transform: uppercase;
}

.defense-mission-main-text {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.4;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.defense-mission-main-text .highlight-warn {
  color: #fbbf24;
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.6);
}

.defense-mission-tips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  font-size: 12.5px;
  color: #cbd5e1;
  text-align: left;
}

.defense-mission-tips .tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.defense-mission-tips .tip-item strong {
  color: #38bdf8;
}

.defense-mission-countdown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  color: #94a3b8;
  margin-top: 4px;
}

.defense-mission-countdown-row .countdown-number {
  font-size: 28px;
  font-weight: 900;
  color: #f59e0b;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.8);
  min-width: 28px;
  display: inline-block;
}

.defense-mission-ack-btn {
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  border: 1.5px solid #38bdf8;
  border-radius: 12px;
  color: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5);
  transition: all 0.2s ease;
}

.defense-mission-ack-btn:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(56, 189, 248, 0.7);
}

/* ==========================================================================
   Crystal Defense - Right Side Large Wave Widget
   ========================================================================== */
.defense-wave-widget {
  position: fixed;
  top: 242px;
  right: 18px;
  z-index: 1090;
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.defense-wave-widget.hidden {
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  pointer-events: none;
}

.defense-wave-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 175px;
  width: 100%;
  padding: 10px 18px 12px 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.65);
  border-radius: 14px;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.75),
    0 0 20px rgba(245, 158, 11, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}

/* Exit to Capital Button (under right-side wave card) */
.defense-exit-town-btn {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.94) 0%, rgba(15, 23, 42, 0.98) 100%);
  border: 1.5px solid rgba(244, 63, 94, 0.65);
  border-radius: 11px;
  color: #fecdd3;
  font-family: 'Outfit', var(--font-thai), sans-serif;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

.defense-exit-town-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.35) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-color: #f43f5e;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(225, 29, 72, 0.45), 0 0 14px rgba(244, 63, 94, 0.4);
}

.defense-exit-town-btn:active {
  transform: translateY(1px) scale(0.98);
}

.defense-exit-town-btn .exit-btn-icon {
  font-size: 15px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.defense-exit-town-btn .exit-btn-text {
  letter-spacing: 0.5px;
}

.defense-wave-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.defense-wave-badge-tag {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #f59e0b;
  text-transform: uppercase;
}

.defense-wave-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse-dot 1.8s infinite;
}

.defense-wave-numbers {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1;
  margin: 4px 0 6px 0;
}

.defense-wave-curr {
  font-size: 42px;
  font-weight: 900;
  color: #fbbf24;
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 35%, #f59e0b 75%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.7));
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.defense-wave-separator {
  font-size: 24px;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.65);
  margin: 0 6px;
}

.defense-wave-max {
  font-size: 24px;
  font-weight: 800;
  color: #94a3b8;
}

.defense-wave-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(15, 23, 42, 0.8);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.defense-wave-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
  border-radius: 4px;
  transition: width 0.4s ease;
}

.defense-wave-subtext {
  font-size: 11px;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 0.3px;
}

@keyframes wave-pop {
  0% {
    transform: scale(1.38);
    filter: drop-shadow(0 0 16px #f59e0b);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.7));
  }
}

.wave-num-pop {
  animation: wave-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Stone Barricade Quota Limit (Max 6) Badge
   ========================================================================== */
.turret-card-quota-badge {
  position: absolute;
  top: 5px;
  right: 6px;
  z-index: 5;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.5);
  border-radius: 5px;
  padding: 1px 5px;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #7dd3fc;
  letter-spacing: 0.3px;
  line-height: 1.2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.turret-card-quota-badge.quota-full {
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.95), rgba(69, 10, 10, 0.98));
  border-color: #ef4444;
  color: #fecaca;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.65);
}

.defense-turret-card.quota-maxed {
  border-color: rgba(239, 68, 68, 0.6) !important;
  opacity: 0.82;
}

.defense-turret-card.quota-maxed:hover {
  border-color: #ef4444 !important;
  cursor: not-allowed;
}

/* Ensure toast notification is positioned safely below top HUD bar */
.game-floating-toast {
  top: 110px !important;
}

/* =========================================================================
   🎯 Floating Tactical Camera Return Button (Crystal Defense)
   ========================================================================= */
.defense-snap-hero-btn {
  position: fixed;
  bottom: 175px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1250;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.94) 0%, rgba(2, 132, 199, 0.98) 100%);
  border: 2px solid #7dd3fc;
  border-radius: 999px;
  color: #ffffff;
  font-family: 'Outfit', var(--font-thai), sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.55), 0 0 16px rgba(56, 189, 248, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: snapHeroPulse 2.2s infinite ease-in-out, snapHeroPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.defense-snap-hero-btn:hover {
  transform: translateX(-50%) translateY(-3px) scale(1.05);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.98) 0%, rgba(2, 132, 199, 1) 100%);
  border-color: #bae6fd;
  box-shadow: 0 12px 32px rgba(2, 132, 199, 0.7), 0 0 24px rgba(56, 189, 248, 0.9);
}

.defense-snap-hero-btn:active {
  transform: translateX(-50%) translateY(0) scale(0.96);
}

.defense-snap-hero-btn.hidden {
  display: none !important;
}

.defense-snap-hero-btn .snap-hero-icon {
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.defense-snap-hero-btn .snap-hero-label {
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.defense-snap-hero-btn .snap-hero-hint {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fef08a;
  letter-spacing: 1px;
}

@keyframes snapHeroPopIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.85);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes snapHeroPulse {
  0%, 100% {
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.55), 0 0 16px rgba(56, 189, 248, 0.65);
  }
  50% {
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.75), 0 0 26px rgba(56, 189, 248, 0.95);
  }
}

/* =========================================================================
   📱 Responsive Build Bar & Dock (Locked Height & Horizontal Scroll Safety)
   ========================================================================= */
@media (max-width: 860px) {
  .defense-build-bar {
    bottom: 74px;
    max-width: 98vw;
  }
  .defense-build-dock {
    height: 52px;
    padding: 4px 8px;
    gap: 6px;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }
  .defense-build-dock::-webkit-scrollbar {
    display: none;
  }
  .defense-gold-display {
    height: 40px;
    padding: 3px 8px;
    gap: 6px;
  }
  .defense-gold-val {
    font-size: 15px;
  }
  .defense-turret-card {
    height: 42px;
    min-width: 104px;
    padding: 3px 6px;
    gap: 6px;
  }
  .turret-card-name {
    font-size: 11px;
  }
  .turret-card-cost {
    font-size: 10.5px;
  }
  .turret-card-icon {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }
  .turret-card-info {
    padding-right: 26px;
  }
  .turret-card-quota-badge {
    top: 3px;
    right: 4px;
    font-size: 8.5px;
    padding: 0.5px 4px;
  }
}







/* =========================================================================
   🏆 Crystal Defense Leaderboard & Speedrun Modal
   ========================================================================= */
#crystal-defense-leaderboard-modal.defense-lb-modal {
  width: 940px;
  max-width: 96vw;
  max-height: 92vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  font-family: var(--font-hud, 'Outfit', 'Chakra Petch', sans-serif);
  background: radial-gradient(ellipse at 50% 0%, rgba(20, 35, 65, 0.98) 0%, rgba(10, 16, 30, 0.98) 60%, rgba(6, 10, 20, 0.99) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.88), 0 0 35px rgba(56, 189, 248, 0.2);
}

.defense-lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(15, 23, 42, 0.9);
  border-bottom: 1.5px solid rgba(56, 189, 248, 0.3);
}

.defense-lb-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.defense-lb-icon {
  font-size: 26px;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

.defense-lb-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.defense-lb-title-main {
  font-size: 16px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: 0.3px;
}

.defense-lb-subtitle {
  font-size: 11px;
  color: #94a3b8;
}

.defense-lb-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  background: transparent;
  flex: 1;
}

/* 1. Top 3 Podium Cards */
.defense-lb-podium-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding: 6px 0 2px 0;
}

.defense-podium-card {
  flex: 1;
  max-width: 250px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.defense-podium-card:hover {
  transform: translateY(-3px);
}

.defense-podium-card.podium-rank-1 {
  background: radial-gradient(circle at 50% 0%, rgba(45, 34, 10, 0.85) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.65);
  box-shadow: 0 0 22px rgba(245, 158, 11, 0.25);
  order: 2;
  padding-bottom: 16px;
}

.defense-podium-card.podium-rank-2 {
  order: 1;
  border: 1.5px solid rgba(203, 213, 225, 0.45);
}

.defense-podium-card.podium-rank-3 {
  order: 3;
  border: 1.5px solid rgba(217, 119, 6, 0.4);
}

.defense-podium-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #e2e8f0;
}

.defense-podium-badge.gold-badge {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.defense-podium-avatar-wrap {
  position: relative;
  width: 62px;
  height: 62px;
  margin: 6px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.defense-podium-card.podium-rank-1 .defense-podium-avatar-wrap {
  width: 76px;
  height: 76px;
  margin: 6px auto;
}

.defense-podium-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at center, #1e293b 0%, #0b1120 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.defense-podium-card.podium-rank-1 .defense-podium-avatar {
  font-size: 34px;
}

.defense-podium-avatar canvas,
.defense-podium-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.defense-podium-avatar.gold-glow {
  border: 2.5px solid #fbbf24;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.65), inset 0 0 8px rgba(254, 240, 138, 0.35);
}

.defense-podium-avatar.silver-glow {
  border: 2.5px solid #cbd5e1;
  box-shadow: 0 0 14px rgba(203, 213, 225, 0.55), inset 0 0 8px rgba(255, 255, 255, 0.25);
}

.defense-podium-avatar.bronze-glow {
  border: 2.5px solid #f97316;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.55), inset 0 0 8px rgba(251, 146, 60, 0.25);
}

.defense-podium-name {
  font-size: 13px;
  font-weight: 800;
  color: #f1f5f9;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.defense-podium-name.gold-name {
  color: #fef08a;
  text-shadow: 0 0 8px rgba(253, 224, 71, 0.4);
}

.defense-podium-job {
  font-size: 11px;
  color: #94a3b8;
}

.defense-podium-wave {
  font-size: 13px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
}

.defense-podium-wave.gold-wave {
  color: #fde047;
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.5);
}

.defense-podium-time {
  font-size: 11px;
  font-weight: 700;
  color: #a7f3d0;
}

/* 2. Filter Bar */
.defense-lb-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.defense-lb-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.defense-tab-pill {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.7);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.15s ease;
}

.defense-tab-pill:hover {
  background: rgba(30, 41, 59, 0.9);
  color: #f1f5f9;
}

.defense-tab-pill.active {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff;
  border-color: #60a5fa;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

.btn-defense-lb-refresh {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-defense-lb-refresh:hover {
  background: rgba(51, 65, 85, 0.95);
  color: #ffffff;
}

/* 3. Table Container */
.defense-lb-table-container {
  max-height: 280px;
  overflow-y: auto;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 16, 28, 0.6);
}

.defense-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.defense-lb-table th {
  position: sticky;
  top: 0;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(4px);
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 2;
}

.defense-lb-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  vertical-align: middle;
}

.defense-lb-table tr:hover td {
  background: rgba(30, 41, 59, 0.45);
}

.defense-lb-table tr.my-row td {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(56, 189, 248, 0.3);
}

.defense-lb-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-weight: 800;
  font-size: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}

.defense-lb-rank.rank-1 {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.defense-lb-rank.rank-2 {
  background: linear-gradient(135deg, #e2e8f0, #94a3b8);
  color: #0f172a;
  box-shadow: 0 0 8px rgba(203, 213, 225, 0.4);
}

.defense-lb-rank.rank-3 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 0 8px rgba(217, 119, 6, 0.4);
}

.defense-wave-tag {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.defense-wave-tag.cleared {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.3));
  color: #6ee7b7;
  border-color: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.defense-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.defense-status-badge.victory {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.defense-status-badge.defeat {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.defense-speedrun-time {
  font-family: monospace;
  font-size: 13px;
  font-weight: 700;
  color: #34d399;
}

.defense-table-player-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.defense-table-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #1e293b 0%, #0b1120 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  box-sizing: border-box;
}

.defense-table-avatar canvas,
.defense-table-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.defense-table-player-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 4. Sticky Personal Best Footer Bar */
.defense-lb-myrank-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
}

.defense-myrank-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.defense-myrank-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #1e293b 0%, #0b1120 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  overflow: hidden;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
  flex-shrink: 0;
  box-sizing: border-box;
}

.defense-myrank-avatar canvas,
.defense-myrank-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.defense-myrank-badge {
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
}

.defense-myrank-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.defense-myrank-name {
  font-size: 13px;
  font-weight: 800;
  color: #f1f5f9;
}

.defense-myrank-wave-pill {
  font-size: 11px;
  color: #38bdf8;
}

.defense-myrank-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.defense-myrank-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.defense-myrank-stat .stat-lbl {
  font-size: 10px;
  color: #94a3b8;
}

.defense-myrank-stat .stat-val {
  font-size: 14px;
  font-weight: 800;
  color: #f1f5f9;
}

.defense-myrank-stat .stat-val.text-time {
  color: #34d399;
  font-family: monospace;
}

.defense-myrank-stat .stat-val.text-kills {
  color: #f87171;
}

@media (max-width: 768px) {
  #crystal-defense-leaderboard-modal.defense-lb-modal {
    width: 98vw;
    max-height: 96vh;
  }
  .defense-lb-podium-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .defense-podium-card.podium-rank-1 {
    order: 1;
  }
  .defense-podium-card.podium-rank-2 {
    order: 2;
  }
  .defense-podium-card.podium-rank-3 {
    order: 3;
  }
  .defense-lb-myrank-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .defense-myrank-right {
    width: 100%;
    justify-content: space-between;
  }
}


/* =========================================================================
   🎬 Crystal Defense Cinematic Victory / Defeat Splash Overlay
   ========================================================================= */
.defense-cinematic-splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.4s ease;
}

.defense-cinematic-splash-overlay.hidden {
  display: none !important;
}

.defense-splash-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.75) 0%, rgba(2, 6, 23, 0.94) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: splashBackdropFadeIn 0.35s ease-out forwards;
}

.defense-splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: splashContentSlam 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.defense-splash-flare {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(35px);
  opacity: 0.7;
}

.splash-victory .defense-splash-flare {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.85) 0%, rgba(245, 158, 11, 0.45) 45%, transparent 70%);
  animation: flarePulseGold 2s infinite ease-in-out;
}

.splash-defeat .defense-splash-flare {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.85) 0%, rgba(185, 28, 28, 0.45) 45%, transparent 70%);
  animation: flarePulseRed 2s infinite ease-in-out;
}

.defense-splash-icon {
  font-size: 76px;
  filter: drop-shadow(0 0 25px rgba(251, 191, 36, 0.85));
  margin-bottom: 4px;
}

.splash-defeat .defense-splash-icon {
  filter: drop-shadow(0 0 25px rgba(239, 68, 68, 0.85));
}

.defense-splash-title {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 72px;
  font-weight: 950;
  letter-spacing: 4px;
  line-height: 1;
  text-transform: uppercase;
}

.splash-victory .defense-splash-title {
  background: linear-gradient(180deg, #ffffff 0%, #fef08a 40%, #f59e0b 80%, #b45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 35px rgba(245, 158, 11, 0.9)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.9));
}

.splash-defeat .defense-splash-title {
  background: linear-gradient(180deg, #ffffff 0%, #fca5a5 40%, #ef4444 80%, #7f1d1d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 35px rgba(239, 68, 68, 0.9)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.9));
}

.defense-splash-sub {
  margin: 12px 0 0 0;
  font-size: 16.5px;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

@keyframes splashContentSlam {
  0% {
    opacity: 0;
    transform: scale(2.5);
    filter: blur(14px);
  }
  60% {
    opacity: 1;
    transform: scale(0.95);
    filter: blur(0);
  }
  80% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

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

@keyframes flarePulseGold {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.95; }
}

@keyframes flarePulseRed {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.95; }
}

/* =========================================================================
   🎖️ Performance Rank Stamp & Live Server Record Callout
   ========================================================================= */
.defense-settle-card {
  position: relative;
  overflow: hidden;
}

.defense-settle-rank-stamp {
  position: absolute;
  top: 14px;
  right: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  z-index: 10;
  pointer-events: none;
  animation: stampImpact 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.rank-stamp-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 32px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  border: 2.5px solid #fff;
  transition: all 0.3s;
}

.rank-stamp-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.rank-s .rank-stamp-circle {
  background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
  color: #ffffff;
  border-color: #fef08a;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.5);
}
.rank-s .rank-stamp-label { color: #fde047; border-color: rgba(250, 204, 21, 0.5); }

.rank-a .rank-stamp-circle {
  background: linear-gradient(135deg, #c084fc 0%, #7e22ce 100%);
  color: #ffffff;
  border-color: #f3e8ff;
  box-shadow: 0 0 25px rgba(192, 132, 252, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.5);
}
.rank-a .rank-stamp-label { color: #e9d5ff; border-color: rgba(192, 132, 252, 0.5); }

.rank-b .rank-stamp-circle {
  background: linear-gradient(135deg, #38bdf8 0%, #0369a1 100%);
  color: #ffffff;
  border-color: #e0f2fe;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.5);
}
.rank-b .rank-stamp-label { color: #bae6fd; border-color: rgba(56, 189, 248, 0.5); }

.rank-c .rank-stamp-circle {
  background: linear-gradient(135deg, #34d399 0%, #047857 100%);
  color: #ffffff;
  border-color: #d1fae5;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.7);
}
.rank-c .rank-stamp-label { color: #a7f3d0; border-color: rgba(52, 211, 153, 0.5); }

.rank-d .rank-stamp-circle {
  background: linear-gradient(135deg, #94a3b8 0%, #475569 100%);
  color: #ffffff;
  border-color: #f1f5f9;
  box-shadow: 0 0 15px rgba(148, 163, 184, 0.5);
}
.rank-d .rank-stamp-label { color: #cbd5e1; border-color: rgba(148, 163, 184, 0.5); }

@keyframes stampImpact {
  0% {
    opacity: 0;
    transform: scale(3.5) rotate(-25deg);
    filter: blur(6px);
  }
  65% {
    opacity: 1;
    transform: scale(0.92) rotate(4deg);
    filter: blur(0);
  }
  85% {
    transform: scale(1.05) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.defense-settle-record-callout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.25) 50%, rgba(245, 158, 11, 0.15) 100%);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 8px;
  padding: 6px 14px;
  margin: 0 20px 12px 20px;
  color: #fef08a;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  animation: recordCalloutGlow 2.5s infinite ease-in-out;
}

@keyframes recordCalloutGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); border-color: rgba(251, 191, 36, 0.45); }
  50% { box-shadow: 0 0 18px rgba(245, 158, 11, 0.65); border-color: rgba(253, 224, 71, 0.85); }
}

#crystal-defense-settlement-modal.defense-settlement-dialog {
  animation: settleModalPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes settleModalPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}