/* ==========================================================================
   DIRILIŞ ONLINE - THEME: DARK IMPERIAL GLASSMORPHISM (İmparatorluk Camı)
   Inspired by Imperial Strategy UI Reference
   Scoped to: html[data-theme="glassmorphism"]
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT THEME DESIGN TOKENS (SMOKY SLATE STEEL GRAY & IMPERIAL GOLD)
   -------------------------------------------------------------------------- */
html[data-theme="glassmorphism"] {
  --dirilis-bg-dark: #101622;
  --dirilis-panel-bg: rgba(36, 48, 66, 0.72);
  --dirilis-panel-border: #c89b3c;
  --dirilis-gold-accent: #f5c542;
  --dirilis-gold-glow: rgba(245, 197, 66, 0.45);
  --dirilis-text-bright: #ffffff;
  --dirilis-text-muted: #94a3b8;
  --dirilis-wood-gradient: linear-gradient(180deg, rgba(42, 54, 72, 0.75) 0%, rgba(26, 36, 50, 0.70) 100%);
  --dirilis-gold-button: linear-gradient(180deg, #f5c542 0%, #e09f28 42%, #b46b14 80%, #8e4909 100%);
  --dirilis-blue-button: linear-gradient(180deg, #254b77 0%, #173559 50%, #0d223c 100%);
  --dirilis-red-button: linear-gradient(180deg, #b91c1c 0%, #7f1d1d 100%);
  --dirilis-green-button: linear-gradient(180deg, #16a34a 0%, #14532d 100%);

  /* Lighter Smoky Slate Frosted Glass Tokens */
  --dirilis-glass-modal-bg: transparent;
  --dirilis-glass-gradient-top: rgba(45, 55, 72, 0.55);
  --dirilis-glass-gradient-bottom: rgba(30, 41, 59, 0.50);
  --dirilis-glass-well-bg: rgba(20, 28, 42, 0.55);
  --dirilis-glass-overlay-bg: rgba(10, 16, 26, 0.35);

  --dirilis-smoky-top: rgba(42, 52, 68, 0.72);
  --dirilis-smoky-bottom: rgba(26, 34, 48, 0.65);

  /* Backward-compatibility aliases */
  --targun-bg-dark: var(--dirilis-bg-dark);
  --targun-panel-bg: var(--dirilis-panel-bg);
  --targun-panel-border: var(--dirilis-panel-border);
  --targun-gold-accent: var(--dirilis-gold-accent);
  --targun-gold-glow: var(--dirilis-gold-glow);
  --targun-text-bright: var(--dirilis-text-bright);
  --targun-text-muted: var(--dirilis-text-muted);
  --targun-wood-gradient: var(--dirilis-wood-gradient);
  --targun-gold-button: var(--dirilis-gold-button);
  --targun-blue-button: var(--dirilis-blue-button);
  --targun-red-button: var(--dirilis-red-button);
  --targun-green-button: var(--dirilis-green-button);
  --targun-glass-modal-bg: var(--dirilis-glass-modal-bg);
  --targun-glass-gradient-top: var(--dirilis-glass-gradient-top);
  --targun-glass-gradient-bottom: var(--dirilis-glass-gradient-bottom);
  --targun-glass-well-bg: var(--dirilis-glass-well-bg);
  --targun-glass-overlay-bg: var(--dirilis-glass-overlay-bg);
  --targun-smoky-top: var(--dirilis-smoky-top);
  --targun-smoky-bottom: var(--dirilis-smoky-bottom);
}

/* --------------------------------------------------------------------------
   2. MODALS & DIALOGS (SMOKY FROSTED GLASS & DUAL GOLD FILIGREE FRAME)
   -------------------------------------------------------------------------- */
/* Soften backdrop overlay dimming: background village remains clearly visible through blur */
html[data-theme="glassmorphism"] .modal-overlay,
html[data-theme="glassmorphism"] .modal-backdrop,
html[data-theme="glassmorphism"] div[class*="modal-overlay"],
html[data-theme="glassmorphism"] div[class*="modal-backdrop"],
html[data-theme="glassmorphism"] div[id$="Modal"] {
  background: rgba(10, 16, 26, 0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Modal Window Card: Lighter Smoky slate-gray semi-transparent frosted glass with filigree frame */
html[data-theme="glassmorphism"] .modal-dark-card,
html[data-theme="glassmorphism"] .modal-window,
html[data-theme="glassmorphism"] .modal-content,
html[data-theme="glassmorphism"] .custom-modal,
html[data-theme="glassmorphism"] .hud-panel,
html[data-theme="glassmorphism"] .ranking-modal-card,
html[data-theme="glassmorphism"] .send-movement-modal-card,
html[data-theme="glassmorphism"] .mobile-menu-drawer-card,
html[data-theme="glassmorphism"] div[id*="Modal"] > .modal-dark-card,
html[data-theme="glassmorphism"] div[id*="Modal"] > .modal-window,
html[data-theme="glassmorphism"] div[id$="Modal"] .modal-dark-card,
html[data-theme="glassmorphism"] div[id$="Modal"] .modal-window,
html[data-theme="glassmorphism"] div[id$="Modal"] > div:first-child:not(.modal-close-btn),
html[data-theme="glassmorphism"] .modal-overlay > div:first-child,
html[data-theme="glassmorphism"] .modal-backdrop > div:first-child {
  position: relative !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-color: transparent !important;
  background-image:
    url('../../assets/ui/theme-glassmorphism/filigree-corner-tl.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-corner-tr.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-corner-bl.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-corner-br.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-crest-bottom.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-crest-top.svg'),
    /* Lighter slate-gray gradient: rgba(45, 55, 72, 0.55) 0%, rgba(30, 41, 59, 0.50) 100% */
    linear-gradient(175deg, rgba(58, 76, 102, 0.44) 0%, rgba(36, 50, 72, 0.38) 100%) !important;
  background-position:
    top 0 left 0,
    top 0 right 0,
    bottom 0 left 0,
    bottom 0 right 0,
    bottom -1px center,
    top -1px center,
    0 0 !important;
  background-size:
    44px 44px,
    44px 44px,
    44px 44px,
    44px 44px,
    80px 24px,
    120px 28px,
    auto !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1.5px solid #d4af37 !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(245, 215, 130, 0.32), 0 25px 65px rgba(0, 0, 0, 0.50), inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 0 20px rgba(100, 130, 175, 0.12) !important;
}

/* Modal Body Transparency */
html[data-theme="glassmorphism"] .modal-window .modal-body,
html[data-theme="glassmorphism"] .modal-body {
  background: transparent !important;
}

/* Modal Headers: Centered title layout with absolute close button */
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child,
html[data-theme="glassmorphism"] .modal-window .modal-header,
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child,
html[data-theme="glassmorphism"] .modal-overlay .modal-header,
html[data-theme="glassmorphism"] .modal-backdrop .modal-header,
html[data-theme="glassmorphism"] .modal-dark-card .modal-header,
html[data-theme="glassmorphism"] div[id$="Modal"] .modal-header {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-left: 50px !important;
  padding-right: 50px !important;
  box-sizing: border-box !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  background: transparent !important;
  min-height: 44px !important;
}

/* Modal Title Imperial Cartouche Plaque (Reference Image Section 1 & 3) */
html[data-theme="glassmorphism"] .modal-dark-card #modalTitle,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child h3,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child h2,
html[data-theme="glassmorphism"] .modal-window .modal-header h3,
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child h3,
html[data-theme="glassmorphism"] #medreseResearchModal .modal-dark-card > div:first-child h3,
html[data-theme="glassmorphism"] #cephaneArmoryModal .modal-dark-card > div:first-child h3,
html[data-theme="glassmorphism"] #clanModal #clanModalHeaderTitle,
html[data-theme="glassmorphism"] #sendMovementModal #sendMovementModalTitle,
html[data-theme="glassmorphism"] #buildingDetailConstructModal #constructDetailName,
html[data-theme="glassmorphism"] .modal-dark-card .modal-header-plaque,
html[data-theme="glassmorphism"] .modal-window .modal-header-plaque {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 18px !important;
  background: linear-gradient(180deg, rgba(36, 48, 68, 0.95) 0%, rgba(18, 26, 38, 0.98) 100%) !important;
  border: 1.5px solid #d4af37 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 235, 160, 0.35), 0 2px 10px rgba(0, 0, 0, 0.7), 0 0 12px rgba(245, 197, 66, 0.25) !important;
  color: #fff9db !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 10px rgba(245, 197, 66, 0.45) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin: 0 auto !important;
  position: relative !important;
}

html[data-theme="glassmorphism"] .modal-dark-card #modalTitle::before,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child h3::before,
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child h3::before,
html[data-theme="glassmorphism"] .modal-window .modal-header h3::before {
  content: "♦" !important;
  color: #d4af37 !important;
  font-size: 9px !important;
  margin-right: 8px !important;
  text-shadow: 0 0 6px rgba(245, 197, 66, 0.6) !important;
}

html[data-theme="glassmorphism"] .modal-dark-card #modalTitle::after,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child h3::after,
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child h3::after,
html[data-theme="glassmorphism"] .modal-window .modal-header h3::after {
  content: "♦" !important;
  color: #d4af37 !important;
  font-size: 9px !important;
  margin-left: 8px !important;
  text-shadow: 0 0 6px rgba(245, 197, 66, 0.6) !important;
}

/* Clean Header Formatting: Hide redundant emoji spans in header, keep cartouche pristine */
html[data-theme="glassmorphism"] .header-title-emoji,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child > div:first-child > span:first-child:not(#marketGoldDisplayBadge),
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child > div:first-child > span:first-child,
html[data-theme="glassmorphism"] .modal-window .modal-header > div:first-child > span:first-child,
html[data-theme="glassmorphism"] #clanModal #clanModalHeaderIcon,
html[data-theme="glassmorphism"] #medreseResearchModal .modal-dark-card > div:first-child > div:first-child > div:first-child,
html[data-theme="glassmorphism"] #cephaneArmoryModal .modal-dark-card > div:first-child > div:first-child > div:first-child {
  display: none !important;
}

/* Modal Header Title Wrapper: Column layout ensures centered title & subtitle stacking */
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child > div:first-child,
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child > div:first-child,
html[data-theme="glassmorphism"] .modal-window .modal-header > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
}

/* Modal Header Subtitles: Centered neatly beneath the title cartouche */
html[data-theme="glassmorphism"] .modal-header-subtitle,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child span[style*="color:#94a3b8"],
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child span[style*="color:var(--dirilis-text-muted)"],
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child div[style*="color:#94a3b8"],
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child div[style*="color:var(--dirilis-text-muted)"],
html[data-theme="glassmorphism"] .modal-window .modal-header div[style*="color:#94a3b8"],
html[data-theme="glassmorphism"] .modal-window .modal-header div[style*="color:#cbd5e1"],
html[data-theme="glassmorphism"] #clanModal #clanModalHeaderSubtitle,
html[data-theme="glassmorphism"] .shop-header-subtitle {
  display: block !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
  margin-top: 4px !important;
  font-weight: 500 !important;
  width: 100% !important;
}

/* Modal Header Secondary Badges: Clean absolute right alignment */
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child #marketGoldDisplayBadge,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child #medreseHeaderLevelBadge,
html[data-theme="glassmorphism"] #diamondShopModal .modal-header > div:last-child > div:first-child,
html[data-theme="glassmorphism"] #diamondShopModal #shopDiamondBalanceBadge,
html[data-theme="glassmorphism"] #troopUpgradeModal .troop-upgrade-cap-badge,
html[data-theme="glassmorphism"] #troopUpgradeModal #upgBuildingCapLabel {
  position: absolute !important;
  right: 54px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  background: rgba(20, 28, 42, 0.85) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  border-radius: 9999px !important;
  padding: 3px 12px !important;
  font-size: 0.72rem !important;
  color: #f5c542 !important;
  font-weight: 700 !important;
}

/* Responsive Diamond Shop Header for Mobile (<= 768px) */
@media (max-width: 768px) {
  html[data-theme="glassmorphism"] #diamondShopModal .modal-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 48px 12px 48px !important;
    min-height: auto !important;
    position: relative !important;
  }

  html[data-theme="glassmorphism"] #diamondShopModal .modal-header .modal-close-btn {
    position: absolute !important;
    right: 10px !important;
    top: 14px !important;
    transform: none !important;
  }

  html[data-theme="glassmorphism"] #diamondShopModal .modal-header .modal-info-btn {
    position: absolute !important;
    left: 10px !important;
    top: 14px !important;
    transform: none !important;
  }

  html[data-theme="glassmorphism"] #diamondShopModal .diamond-shop-title-container,
  html[data-theme="glassmorphism"] #diamondShopModal .modal-header > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  html[data-theme="glassmorphism"] #diamondShopModal .modal-header h3 {
    max-width: 100% !important;
    font-size: 13px !important;
    padding: 4px 14px !important;
    white-space: nowrap !important;
  }

  html[data-theme="glassmorphism"] #diamondShopModal .modal-header .shop-header-subtitle {
    font-size: 11px !important;
    margin-top: 4px !important;
    text-align: center !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }

  html[data-theme="glassmorphism"] #diamondShopModal #shopDiamondBalanceBadge,
  html[data-theme="glassmorphism"] #diamondShopModal .modal-header .shop-diamond-badge,
  html[data-theme="glassmorphism"] #diamondShopModal .modal-header > div:last-child > div:first-child {
    position: static !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    margin: 8px auto 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(20, 28, 42, 0.85) !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }

  html[data-theme="glassmorphism"] #diamondShopModal .diamond-shop-badge-container,
  html[data-theme="glassmorphism"] #diamondShopModal .modal-header > div:last-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Send Movement Modal Header */
html[data-theme="glassmorphism"] #sendMovementModal .modal-dark-card > div:first-child {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
}
html[data-theme="glassmorphism"] #sendMovementModal .modal-dark-card > div:first-child > div:first-child {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-theme="glassmorphism"] #sendMovementModal #movementEtaContainer {
  margin-top: 6px !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
}
html[data-theme="glassmorphism"] #sendMovementModal #movementEtaContainer > span {
  font-size: 9.5px !important;
  padding: 2px 5px !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px !important;
}
html[data-theme="glassmorphism"] #sendMovementModal .modal-close-btn {
  top: 2px !important;
  transform: none !important;
}
html[data-theme="glassmorphism"] #sendMovementModal .modal-close-btn:hover {
  transform: none !important;
}
html[data-theme="glassmorphism"] #sendMovementModal .modal-info-btn {
  top: 4px !important;
  transform: none !important;
}
html[data-theme="glassmorphism"] #sendMovementModal .modal-info-btn:hover {
  transform: none !important;
}
html[data-theme="glassmorphism"] #btnMovementSpeedBoost {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}
html[data-theme="glassmorphism"] #btnMovementSpeedBoost span {
  font-size: inherit !important;
  font-weight: inherit !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* Header Close Button (Circular Antique Bronze/Gold Medallion with Crimson/Dark Core) */
html[data-theme="glassmorphism"] .modal-close-btn,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child > button:not(.btn):not(.modal-info-btn),
html[data-theme="glassmorphism"] .modal-window .modal-close-btn,
html[data-theme="glassmorphism"] .modal-dark-card button[style*="font-size:1.4rem"]:not(.btn):not(.modal-info-btn),
html[data-theme="glassmorphism"] .modal-dark-card button[style*="font-size: 1.4rem"]:not(.btn):not(.modal-info-btn),
html[data-theme="glassmorphism"] .modal-dark-card button[style*="font-size:1.6rem"]:not(.btn):not(.modal-info-btn),
html[data-theme="glassmorphism"] .modal-dark-card button[style*="font-size: 1.6rem"]:not(.btn):not(.modal-info-btn),
html[data-theme="glassmorphism"] #troopUpgradeModal button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn),
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn),
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn),
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn),
html[data-theme="glassmorphism"] .modal-window button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn),
html[data-theme="glassmorphism"] .ranking-modal-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn),
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child > button:not(.btn):not(.modal-info-btn) {
  position: absolute !important;
  right: 12px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #521818 0%, #220808 100%) !important;
  border: 1.5px solid #d4af37 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 230, 160, 0.6) !important;
  color: #ffe6a3 !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 20 !important;
}

html[data-theme="glassmorphism"] .modal-close-btn:hover,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child > button:not(.btn):not(.modal-info-btn):hover,
html[data-theme="glassmorphism"] .modal-window .modal-close-btn:hover,
html[data-theme="glassmorphism"] .modal-dark-card button[style*="font-size:1.4rem"]:not(.btn):not(.modal-info-btn):hover,
html[data-theme="glassmorphism"] .modal-dark-card button[style*="font-size: 1.4rem"]:not(.btn):not(.modal-info-btn):hover,
html[data-theme="glassmorphism"] #troopUpgradeModal button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn):hover,
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn):hover,
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn):hover,
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn):hover,
html[data-theme="glassmorphism"] .modal-window button[onclick*="closeModal"]:not(.btn):not(.modal-info-drawer-close):not(.modal-info-btn):hover,
html[data-theme="glassmorphism"] .ranking-modal-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn):hover,
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child > button:not(.btn):not(.modal-info-btn):hover {
  background: radial-gradient(circle at 35% 35%, #7f1d1d 0%, #3a0d0d 100%) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.8), 0 0 24px rgba(245, 197, 66, 0.4), inset 0 1px 2px #fff !important;
  transform: translateY(-50%) !important;
}

html[data-theme="glassmorphism"] .modal-close-btn:active,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child > button:not(.btn):not(.modal-info-btn):active,
html[data-theme="glassmorphism"] .modal-window .modal-close-btn:active,
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="closeModal"]:not(.btn):not(.modal-info-btn):active {
  transform: translateY(-50%) !important;
  background: radial-gradient(circle at 35% 35%, #450a0a 0%, #1a0505 100%) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(239, 68, 68, 0.5) !important;
}

/* --------------------------------------------------------------------------
   3. MOBILE RESPONSIVE OVERRIDES (NATIVE BOTTOM-SHEET ON SMARTPHONES)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  html[data-theme="glassmorphism"] .modal-dark-card,
  html[data-theme="glassmorphism"] .modal-window,
  html[data-theme="glassmorphism"] .ranking-modal-card,
  html[data-theme="glassmorphism"] .send-movement-modal-card {
    border-radius: 20px 20px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 2px solid #d4af37 !important;
    background-color: transparent !important;
    background-image:
      url('../../assets/ui/theme-glassmorphism/filigree-corner-tl.svg'),
      url('../../assets/ui/theme-glassmorphism/filigree-corner-tr.svg'),
      url('../../assets/ui/theme-glassmorphism/filigree-crest-top.svg'),
      linear-gradient(175deg, rgba(42, 52, 68, 0.78) 0%, rgba(26, 34, 48, 0.72) 100%) !important;
    background-position:
      top 0 left 0,
      top 0 right 0,
      top -1px center,
      0 0 !important;
    background-size:
      36px 36px,
      36px 36px,
      96px 22px,
      auto !important;
    background-origin: border-box !important;
  }

  /* Mobile GPU Compositing Optimization: Disable real-time backdrop-filter blur over active 60-120fps game canvas */
  html[data-theme="glassmorphism"] .hud-panel,
  html[data-theme="glassmorphism"] .top-bar,
  html[data-theme="glassmorphism"] .bottom-nav,
  html[data-theme="glassmorphism"] .events-bar,
  html[data-theme="glassmorphism"] .chat-overlay,
  html[data-theme="glassmorphism"] .village-footer-bar,
  html[data-theme="glassmorphism"] .left-sidebar,
  html[data-theme="glassmorphism"] .right-sidebar,
  html[data-theme="glassmorphism"] .top-mobile-resource-bar,
  html[data-theme="glassmorphism"] .bottom-troop-bar,
  html[data-theme="glassmorphism"] .mobile-bottom-nav,
  html[data-theme="glassmorphism"] .action-circle-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="glassmorphism"] .modal-overlay,
  html[data-theme="glassmorphism"] .modal-backdrop {
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
  }

  /* Send Movement Modal Mobile Compact Header & Single-Row Action Bar */
  html[data-theme="glassmorphism"] #sendMovementModal .modal-dark-card > div:first-child {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html[data-theme="glassmorphism"] #sendMovementModal #movementEtaContainer {
    gap: 3px !important;
    margin-top: 5px !important;
  }

  html[data-theme="glassmorphism"] #sendMovementModal #movementEtaContainer > span {
    font-size: 8.5px !important;
    padding: 1.5px 4px !important;
  }

  html[data-theme="glassmorphism"] .send-movement-footer-actions {
    display: flex !important;
    width: 100% !important;
    gap: 6px !important;
    align-items: center !important;
  }

  html[data-theme="glassmorphism"] .send-movement-footer-actions button {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 7px 6px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  html[data-theme="glassmorphism"] .send-movement-footer-actions button:first-child {
    flex: 0 0 auto !important;
    padding: 7px 10px !important;
  }
}

/* --------------------------------------------------------------------------
   4. BUTTONS (3D AMBER GOLD PRIMARY & SAPPHIRE STEEL SECONDARY)
   -------------------------------------------------------------------------- */
/* Primary Buttons (YÜKSELT, Saldır, Araştır, Onayla, vb.) */
html[data-theme="glassmorphism"] .btn-primary,
html[data-theme="glassmorphism"] #modalUpgradeConfirmBtn,
html[data-theme="glassmorphism"] .btn-construct-small,
html[data-theme="glassmorphism"] .quick-village-btn,
html[data-theme="glassmorphism"] .btn-gold-3d,
html[data-theme="glassmorphism"] .modal-overlay .btn-primary,
html[data-theme="glassmorphism"] .modal-backdrop .btn-primary,
html[data-theme="glassmorphism"] .modal-dark-card .btn-primary,
html[data-theme="glassmorphism"] .modal-window .btn-primary,
html[data-theme="glassmorphism"] .ranking-modal-card .btn-primary,
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="confirm"],
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="confirm"],
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="confirm"],
html[data-theme="glassmorphism"] .modal-window button[onclick*="confirm"],
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="Confirm"],
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="Confirm"],
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="Confirm"],
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="exchange"],
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="exchange"],
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="simulate"],
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="simulate"],
html[data-theme="glassmorphism"] .modal-window button[onclick*="simulate"],
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="Simulate"],
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="Simulate"],
html[data-theme="glassmorphism"] .modal-window button[onclick*="Simulate"],
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="Submit"],
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="Submit"],
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="Save"],
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="Save"],
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="openTrainModal"],
html[data-theme="glassmorphism"] .modal-window button[onclick*="executeCombatSimulation"] {
  background: linear-gradient(180deg, #f5c542 0%, #e09f28 42%, #b46b14 80%, #8e4909 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #ffe285 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -2px 0 rgba(0, 0, 0, 0.35) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

html[data-theme="glassmorphism"] .btn-primary:hover,
html[data-theme="glassmorphism"] #modalUpgradeConfirmBtn:hover,
html[data-theme="glassmorphism"] .btn-construct-small:hover,
html[data-theme="glassmorphism"] .quick-village-btn:hover,
html[data-theme="glassmorphism"] .btn-gold-3d:hover,
html[data-theme="glassmorphism"] .modal-overlay .btn-primary:hover,
html[data-theme="glassmorphism"] .modal-backdrop .btn-primary:hover,
html[data-theme="glassmorphism"] .modal-dark-card .btn-primary:hover,
html[data-theme="glassmorphism"] .modal-window .btn-primary:hover,
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="confirm"]:hover,
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="confirm"]:hover,
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="confirm"]:hover,
html[data-theme="glassmorphism"] .modal-window button[onclick*="confirm"]:hover,
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="exchange"]:hover,
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="exchange"]:hover,
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="simulate"]:hover,
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="simulate"]:hover,
html[data-theme="glassmorphism"] .modal-window button[onclick*="simulate"]:hover {
  background: linear-gradient(180deg, #ffd866 0%, #f0b038 42%, #ca7b18 80%, #a0530b 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(245, 197, 66, 0.55), inset 0 1px 0 #ffffff !important;
  transform: translateY(-1px) !important;
}

html[data-theme="glassmorphism"] .btn-primary:active,
html[data-theme="glassmorphism"] #modalUpgradeConfirmBtn:active,
html[data-theme="glassmorphism"] .btn-construct-small:active,
html[data-theme="glassmorphism"] .quick-village-btn:active {
  background: linear-gradient(180deg, #b46b14 0%, #8e4909 100%) !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7) !important;
  transform: translateY(1px) !important;
}

/* Secondary / Dismiss / Cancel Buttons (VAZGEÇ, Kapat, İptal) */
html[data-theme="glassmorphism"] .btn-secondary,
html[data-theme="glassmorphism"] .btn-sapphire,
html[data-theme="glassmorphism"] #modalUpgradeCancelBtn,
html[data-theme="glassmorphism"] .upgrade-modal-footer button:not(#modalUpgradeConfirmBtn):not(#modalUpgradeFastBtn),
html[data-theme="glassmorphism"] .construct-detail-footer button:not(#constructDetailConfirmBtn):not(#constructDetailFastBtn),
html[data-theme="glassmorphism"] .modal-dark-card .upgrade-modal-footer button:first-child,
html[data-theme="glassmorphism"] .modal-overlay .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones),
html[data-theme="glassmorphism"] .modal-backdrop .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones),
html[data-theme="glassmorphism"] .modal-dark-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones),
html[data-theme="glassmorphism"] .modal-window .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones),
html[data-theme="glassmorphism"] .ranking-modal-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones),
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn),
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn),
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn),
html[data-theme="glassmorphism"] .modal-window button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn),
html[data-theme="glassmorphism"] .ranking-modal-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn) {
  background: linear-gradient(180deg, #254b77 0%, #173559 50%, #0d223c 100%) !important;
  color: #e2e8f0 !important;
  border: 1.5px solid #5084bc !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.4) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

html[data-theme="glassmorphism"] .btn-secondary:hover,
html[data-theme="glassmorphism"] .btn-sapphire:hover,
html[data-theme="glassmorphism"] #modalUpgradeCancelBtn:hover,
html[data-theme="glassmorphism"] .upgrade-modal-footer button:not(#modalUpgradeConfirmBtn):not(#modalUpgradeFastBtn):hover,
html[data-theme="glassmorphism"] .construct-detail-footer button:not(#constructDetailConfirmBtn):not(#constructDetailFastBtn):hover,
html[data-theme="glassmorphism"] .modal-dark-card .upgrade-modal-footer button:first-child:hover,
html[data-theme="glassmorphism"] .modal-overlay .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover,
html[data-theme="glassmorphism"] .modal-backdrop .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover,
html[data-theme="glassmorphism"] .modal-dark-card .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover,
html[data-theme="glassmorphism"] .modal-window .btn:not(.btn-primary):not(.btn-warning):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):not(.medrese-fast-btn):not(.cephane-fast-btn):not([disabled]):not(:disabled):not(.modal-close-btn):not(.quests-tab-btn):not(#questsTabBtnDaily):not(#questsTabBtnMilestones):hover,
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover,
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover,
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover,
html[data-theme="glassmorphism"] .modal-window button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover,
html[data-theme="glassmorphism"] .ranking-modal-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):hover {
  background: linear-gradient(180deg, #2e5c92 0%, #1e4472 50%, #133054 100%) !important;
  border-color: #6da2dd !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(37, 75, 119, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="glassmorphism"] .btn-secondary:active,
html[data-theme="glassmorphism"] #modalUpgradeCancelBtn:active,
html[data-theme="glassmorphism"] .upgrade-modal-footer button:not(#modalUpgradeConfirmBtn):not(#modalUpgradeFastBtn):active,
html[data-theme="glassmorphism"] .construct-detail-footer button:not(#constructDetailConfirmBtn):not(#constructDetailFastBtn):active,
html[data-theme="glassmorphism"] .modal-overlay button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active,
html[data-theme="glassmorphism"] .modal-backdrop button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active,
html[data-theme="glassmorphism"] .modal-dark-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active,
html[data-theme="glassmorphism"] .modal-window button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active,
html[data-theme="glassmorphism"] .ranking-modal-card button[onclick*="closeModal"]:not(.modal-close-btn):not(div:first-child > button):not(#modalUpgradeFastBtn):not(#constructDetailFastBtn):active {
  background: linear-gradient(180deg, #10243e 0%, #0a1829 100%) !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7) !important;
  transform: translateY(1px) !important;
}

/* ⚡ Diamond Speedup Buttons (Gold / Amber 3D - %50 Hızlandırma) */
html[data-theme="glassmorphism"] .btn-warning,
html[data-theme="glassmorphism"] #modalUpgradeFastBtn,
html[data-theme="glassmorphism"] #constructDetailFastBtn,
html[data-theme="glassmorphism"] .medrese-fast-btn,
html[data-theme="glassmorphism"] .cephane-fast-btn {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #fbbf24 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.4) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

html[data-theme="glassmorphism"] .btn-warning:hover,
html[data-theme="glassmorphism"] #modalUpgradeFastBtn:hover,
html[data-theme="glassmorphism"] #constructDetailFastBtn:hover,
html[data-theme="glassmorphism"] .medrese-fast-btn:hover,
html[data-theme="glassmorphism"] .cephane-fast-btn:hover {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  border-color: #fde68a !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1px) !important;
}

html[data-theme="glassmorphism"] .btn-warning:active,
html[data-theme="glassmorphism"] #modalUpgradeFastBtn:active,
html[data-theme="glassmorphism"] #constructDetailFastBtn:active,
html[data-theme="glassmorphism"] .medrese-fast-btn:active,
html[data-theme="glassmorphism"] .cephane-fast-btn:active {
  background: linear-gradient(180deg, #b45309 0%, #92400e 100%) !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.7) !important;
  transform: translateY(1px) !important;
}

/* Disabled Buttons (Reference Image Section 2: BUTTON -> Disabled) */
html[data-theme="glassmorphism"] .btn:disabled,
html[data-theme="glassmorphism"] .btn[disabled],
html[data-theme="glassmorphism"] button:disabled,
html[data-theme="glassmorphism"] button[disabled] {
  background: linear-gradient(180deg, #182333 0%, #0f1622 100%) !important;
  color: #64748b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  text-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.65 !important;
  filter: grayscale(40%) !important;
}

html[data-theme="glassmorphism"] .btn:disabled:hover,
html[data-theme="glassmorphism"] .btn[disabled]:hover,
html[data-theme="glassmorphism"] button:disabled:hover,
html[data-theme="glassmorphism"] button[disabled]:hover {
  background: linear-gradient(180deg, #182333 0%, #0f1622 100%) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   5. SUNKEN INNER WELLS (RESOURCE STATS, INFO BLOCKS, TABLES, OVERRIDES)
   -------------------------------------------------------------------------- */
html[data-theme="glassmorphism"] .glass-sunken-well,
html[data-theme="glassmorphism"] .cost-res-well,
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background:rgba(255,255,255,0.0"],
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background:rgba(255, 255, 255, 0.0"],
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background: rgba(255, 255, 255, 0.0"],
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background: rgba(255,255,255,0.0"],
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background:rgba(0,0,0,0.2)"],
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background:rgba(0,0,0,0.3)"],
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background:rgba(0,0,0,0.4)"],
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background:rgba(0,0,0,0.5)"],
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background:rgba(0,0,0,0.6)"],
html[data-theme="glassmorphism"] .modal-dark-card div[style*="background:rgba(0,0,0,0.7)"],
html[data-theme="glassmorphism"] .modal-window div[style*="background:rgba(255,255,255,0.0"],
html[data-theme="glassmorphism"] .modal-window div[style*="background:rgba(0,0,0,0.3)"],
html[data-theme="glassmorphism"] .modal-window div[style*="background:rgba(0,0,0,0.4)"]:not(.quests-tab-bar),
html[data-theme="glassmorphism"] .modal-window div[style*="background:rgba(0,0,0,0.5)"]:not(.quests-tab-bar),
html[data-theme="glassmorphism"] .ranking-modal-card div[style*="background:rgba(0,0,0,0.4)"],
html[data-theme="glassmorphism"] .ranking-modal-card div[style*="background:rgba(0,0,0,0.55)"],
html[data-theme="glassmorphism"] .ranking-tab-capsule-bar,
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#120b06"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background: #120b06"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#120b06"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background: #120b06"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:#120b06"],
html[data-theme="glassmorphism"] .modal-window [style*="background:#120b06"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#120c06"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#120c06"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:#120c06"],
html[data-theme="glassmorphism"] .modal-window [style*="background:#120c06"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#181008"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background: #181008"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#181008"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:#181008"],
html[data-theme="glassmorphism"] .modal-window [style*="background:#181008"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#181009"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:#181009"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#140d08"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background: #140d08"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#140d08"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:#140d08"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#1a130e"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:#1a130e"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#1e140d"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:#1e140d"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#0b111e"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:#0b111e"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#0a0604"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:#0a0604"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#0b0f19"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#0b0f19"],
html[data-theme="glassmorphism"] .modal-window [style*="background:#0b0f19"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#1e1b4b"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#1e1b4b"],
html[data-theme="glassmorphism"] .modal-window [style*="background:#1e1b4b"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#0a0f1c"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#0b101d"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#0f172a"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#111827"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:#1e293b"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:#1e293b"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:linear-gradient(180deg, #18110b"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background: linear-gradient(180deg, #18110b"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:linear-gradient(180deg, #18110b"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:linear-gradient(180deg, #1a120b"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:linear-gradient(180deg, #1a120b"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background: radial-gradient(circle at center, #1e1b4b"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:radial-gradient(circle at center, #1e1b4b"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:radial-gradient(circle at center, #1e1b4b"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background: radial-gradient(circle at center, #1e1b4b"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(20, 13, 8"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(20,13,8"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background: rgba(20, 13, 8"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background: rgba(20,13,8"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:rgba(20, 13, 8"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:rgba(20,13,8"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:rgba(20, 13, 8"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:rgba(20,13,8"],
html[data-theme="glassmorphism"] .modal-window [style*="background:rgba(20, 13, 8"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(20, 14, 9"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:rgba(20, 14, 9"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(18, 14, 10"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:rgba(18, 14, 10"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(18, 12, 8"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:rgba(18, 12, 8"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(15, 10, 6"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:rgba(15, 10, 6"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(10, 6, 3"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:rgba(10, 6, 3"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(10,15,28"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:rgba(10,15,28"],
html[data-theme="glassmorphism"] .modal-window [style*="background:rgba(10,15,28"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:rgba(15,23,42"],
html[data-theme="glassmorphism"] .modal-window [style*="background:rgba(15,23,42"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(15,23,42"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:rgba(15,23,42"],
html[data-theme="glassmorphism"] .modal-backdrop [style*="background:rgba(30,41,59"],
html[data-theme="glassmorphism"] .modal-window [style*="background:rgba(30,41,59"],
html[data-theme="glassmorphism"] .modal-overlay [style*="background:rgba(30,41,59"],
html[data-theme="glassmorphism"] .modal-dark-card [style*="background:rgba(30,41,59"],
html[data-theme="glassmorphism"] .reports-list-side-panel,
html[data-theme="glassmorphism"] .report-detail-panel,
html[data-theme="glassmorphism"] #troopUpgradeRightPanel,
html[data-theme="glassmorphism"] #clanFeedComposerCard,
html[data-theme="glassmorphism"] #clanSetDiplomacyCard,
html[data-theme="glassmorphism"] #clanInviteCard,
html[data-theme="glassmorphism"] #clanPostAnnouncementCard,
html[data-theme="glassmorphism"] #clanApplicationsContainerCard,
html[data-theme="glassmorphism"] .shop-item-card,
html[data-theme="glassmorphism"] #movementEtaContainer,
html[data-theme="glassmorphism"] #supportContingentDetailBox,
html[data-theme="glassmorphism"] tr[style*="rgba(20, 13, 8"],
html[data-theme="glassmorphism"] tr[style*="rgba(20,13,8"] {
  background: rgba(20, 28, 42, 0.55) !important;
  background: rgba(26, 36, 52, 0.38) !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Sunken inner well token: rgba(15, 20, 30, 0.65) */
html[data-theme="glassmorphism"] .glass-sunken-well,
html[data-theme="glassmorphism"] .cost-res-well {
  background: rgba(15, 20, 30, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  border-radius: 12px !important;
}

/* Clean Icon-First Resource Display: Hide redundant Turkish text words (Odun, Taş, vb.) */
html[data-theme="glassmorphism"] .res-name-label,
html[data-theme="glassmorphism"] .cost-res-name {
  display: none !important;
}

/* Resource Tiles in Section 3 Modals */
html[data-theme="glassmorphism"] .cost-tile-icon-box {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Upgrade resource requirement cards */
html[data-theme="glassmorphism"] #modalBody div[style*="display:grid"] > div {
  background: rgba(15, 20, 32, 0.75) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6) !important;
  border-radius: 10px !important;
}

/* Insufficient Resource Alert Preservation (Red Warning Borders) */
html[data-theme="glassmorphism"] .cost-tile.insufficient .cost-tile-icon-box,
html[data-theme="glassmorphism"] #modalBody div[style*="display:grid"] > div[style*="rgba(239,68,68"],
html[data-theme="glassmorphism"] #modalBody div[style*="display:grid"] > div[style*="rgba(239, 68, 68"],
html[data-theme="glassmorphism"] #modalBody div[style*="display:grid"] > div[style*="#ef4444"] {
  background: rgba(65, 15, 15, 0.75) !important;
  border: 1.5px solid #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35), inset 0 2px 5px rgba(0, 0, 0, 0.6) !important;
}

/* Upgrade Level Badge & Construction Time Pill (Reference Image Section 3) */
html[data-theme="glassmorphism"] .upgrade-level-badge {
  background: rgba(20, 28, 42, 0.85) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-radius: 9999px !important;
  padding: 3px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

html[data-theme="glassmorphism"] .construction-time-pill {
  background: rgba(12, 18, 28, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 9999px !important;
  padding: 4px 22px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
  display: inline-flex !important;
  align-items: center !important;
  letter-spacing: 1.5px !important;
}

/* Market Resource Choice Buttons */
html[data-theme="glassmorphism"] .market-res-choice {
  background: rgba(20, 28, 42, 0.6) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  transition: all 0.18s ease !important;
}
html[data-theme="glassmorphism"] .market-res-choice:hover {
  background: rgba(30, 42, 64, 0.75) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
}
html[data-theme="glassmorphism"] .market-res-choice.active {
  background: linear-gradient(180deg, rgba(38, 56, 82, 0.95) 0%, rgba(20, 30, 48, 0.98) 100%) !important;
  border: 1.5px solid #d4af37 !important;
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.35) !important;
}

/* Dynamic Cards in Medrese, Cephane, Combat Simulator */
html[data-theme="glassmorphism"] #medreseResearchesGrid > div,
html[data-theme="glassmorphism"] #cephaneTroopsGrid > div,
html[data-theme="glassmorphism"] #combatSimulatorModal div[style*="background:rgba(239,68,68"],
html[data-theme="glassmorphism"] #combatSimulatorModal div[style*="background:rgba(59,130,246"] {
  background: rgba(20, 28, 42, 0.50) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Inputs & Form Controls */
html[data-theme="glassmorphism"] .input-field,
html[data-theme="glassmorphism"] input[type="text"],
html[data-theme="glassmorphism"] input[type="number"],
html[data-theme="glassmorphism"] input[type="password"],
html[data-theme="glassmorphism"] select {
  background: rgba(12, 18, 28, 0.85) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  color: #f8fafc !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="glassmorphism"] .input-field:focus,
html[data-theme="glassmorphism"] input:focus,
html[data-theme="glassmorphism"] select:focus {
  border-color: #f5c542 !important;
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.4), inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   6. TABLES & DATA GRIDS (REFERENCE IMAGE SECTION 1: KAYNAKLAR - TABLO)
   -------------------------------------------------------------------------- */
html[data-theme="glassmorphism"] table {
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}

html[data-theme="glassmorphism"] table th {
  background: linear-gradient(180deg, rgba(32, 44, 64, 0.85) 0%, rgba(18, 26, 40, 0.90) 100%) !important;
  color: #f5c542 !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  border-top: 1px solid rgba(212, 175, 55, 0.35) !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  padding: 6px 8px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

html[data-theme="glassmorphism"] table td {
  background: rgba(18, 26, 40, 0.65) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #e2e8f0 !important;
  font-size: 11px !important;
  padding: 6px 8px !important;
}

html[data-theme="glassmorphism"] table tr:hover td {
  background: rgba(30, 44, 68, 0.75) !important;
}

/* --------------------------------------------------------------------------
   7. SUB-TABS & CHAMFER TABS (MEDRESE, SHOP, REPORTS, RANKINGS)
   -------------------------------------------------------------------------- */
html[data-theme="glassmorphism"] .chat-chamfer-tab-btn,
html[data-theme="glassmorphism"] .ranking-tab-btn,
html[data-theme="glassmorphism"] .profile-tab-btn,
html[data-theme="glassmorphism"] .medrese-cat-btn,
html[data-theme="glassmorphism"] .support-tab-btn,
html[data-theme="glassmorphism"] .clan-noclan-tab-btn,
html[data-theme="glassmorphism"] .clan-tab-btn,
html[data-theme="glassmorphism"] .landing-auth-tab-btn {
  background: rgba(22, 32, 48, 0.65) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html[data-theme="glassmorphism"] .chat-chamfer-tab-btn:hover,
html[data-theme="glassmorphism"] .ranking-tab-btn:hover,
html[data-theme="glassmorphism"] .profile-tab-btn:hover,
html[data-theme="glassmorphism"] .medrese-cat-btn:hover,
html[data-theme="glassmorphism"] .support-tab-btn:hover,
html[data-theme="glassmorphism"] .clan-noclan-tab-btn:hover,
html[data-theme="glassmorphism"] .clan-tab-btn:hover,
html[data-theme="glassmorphism"] .landing-auth-tab-btn:hover {
  background: rgba(34, 48, 72, 0.85) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  color: #ffffff !important;
}

html[data-theme="glassmorphism"] .chat-chamfer-tab-btn.active,
html[data-theme="glassmorphism"] .ranking-tab-btn.active,
html[data-theme="glassmorphism"] .profile-tab-btn.active,
html[data-theme="glassmorphism"] .medrese-cat-btn.active,
html[data-theme="glassmorphism"] .support-tab-btn.active,
html[data-theme="glassmorphism"] .clan-noclan-tab-btn.active,
html[data-theme="glassmorphism"] .clan-tab-btn.active,
html[data-theme="glassmorphism"] .landing-auth-tab-btn.active {
  background: linear-gradient(180deg, rgba(38, 56, 82, 0.95) 0%, rgba(20, 30, 48, 0.98) 100%) !important;
  border: 1.5px solid #d4af37 !important;
  color: #fff9db !important;
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-weight: 800 !important;
}

html[data-theme="glassmorphism"] .ranking-tab-capsule-bar {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

html[data-theme="glassmorphism"] .ranking-tab-btn {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

html[data-theme="glassmorphism"] .rankings-table-wrapper {
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Quests & Milestones Modal Tab Buttons (Ek-1 & High Contrast Active Indicator) */
html[data-theme="glassmorphism"] .quests-tab-bar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  background: rgba(10, 12, 16, 0.45) !important;
  border: none !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

html[data-theme="glassmorphism"] .quests-tab-btn,
html[data-theme="glassmorphism"] #questsTabBtnDaily,
html[data-theme="glassmorphism"] #questsTabBtnWeekly,
html[data-theme="glassmorphism"] #questsTabBtnMilestones {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 36px !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 3px 4px !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  outline: none !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* Inactive Tab: Smoky slate subtle frosted glass */
html[data-theme="glassmorphism"] .quests-tab-btn:not(.active),
html[data-theme="glassmorphism"] #questsTabBtnDaily:not(.active),
html[data-theme="glassmorphism"] #questsTabBtnWeekly:not(.active),
html[data-theme="glassmorphism"] #questsTabBtnMilestones:not(.active) {
  background: rgba(18, 26, 40, 0.65) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
  transform: none !important;
}

html[data-theme="glassmorphism"] .quests-tab-btn:not(.active):hover,
html[data-theme="glassmorphism"] #questsTabBtnDaily:not(.active):hover,
html[data-theme="glassmorphism"] #questsTabBtnWeekly:not(.active):hover,
html[data-theme="glassmorphism"] #questsTabBtnMilestones:not(.active):hover {
  background: rgba(30, 44, 68, 0.85) !important;
  color: #ffffff !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  opacity: 1 !important;
}

/* Active Tab: Vivid glowing imperial gold with prominent active styling */
html[data-theme="glassmorphism"] .quests-tab-btn.active,
html[data-theme="glassmorphism"] #questsTabBtnDaily.active,
html[data-theme="glassmorphism"] #questsTabBtnWeekly.active,
html[data-theme="glassmorphism"] #questsTabBtnMilestones.active {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #fef08a !important;
  font-weight: 900 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  transform: none !important;
}

html.mobile-portrait-mode[data-theme="glassmorphism"] .quests-tab-btn,
html.mobile-portrait-mode[data-theme="glassmorphism"] #questsTabBtnDaily,
html.mobile-portrait-mode[data-theme="glassmorphism"] #questsTabBtnWeekly,
html.mobile-portrait-mode[data-theme="glassmorphism"] #questsTabBtnMilestones,
html.mobile-landscape-mode[data-theme="glassmorphism"] .quests-tab-btn,
html.mobile-landscape-mode[data-theme="glassmorphism"] #questsTabBtnDaily,
html.mobile-landscape-mode[data-theme="glassmorphism"] #questsTabBtnWeekly,
html.mobile-landscape-mode[data-theme="glassmorphism"] #questsTabBtnMilestones {
  font-size: 10px !important;
  line-height: 1.18 !important;
  padding: 4px 4px !important;
  min-height: 34px !important;
  white-space: normal !important;
}

html.mobile-portrait-mode[data-theme="glassmorphism"] .quests-tab-btn span:not(.event-badge),
html.mobile-portrait-mode[data-theme="glassmorphism"] #questsTabBtnDaily span:not(.event-badge),
html.mobile-portrait-mode[data-theme="glassmorphism"] #questsTabBtnWeekly span:not(.event-badge),
html.mobile-portrait-mode[data-theme="glassmorphism"] #questsTabBtnMilestones span:not(.event-badge),
html.mobile-landscape-mode[data-theme="glassmorphism"] .quests-tab-btn span:not(.event-badge),
html.mobile-landscape-mode[data-theme="glassmorphism"] #questsTabBtnDaily span:not(.event-badge),
html.mobile-landscape-mode[data-theme="glassmorphism"] #questsTabBtnWeekly span:not(.event-badge),
html.mobile-landscape-mode[data-theme="glassmorphism"] #questsTabBtnMilestones span:not(.event-badge) {
  font-size: 10px !important;
  line-height: 1.18 !important;
  white-space: normal !important;
}

/* --------------------------------------------------------------------------
   8. NAVIGATION & PANELS (SIDEBAR, HEADER, DOCKS)
   -------------------------------------------------------------------------- */
/* Left Navigation Sidebar - Lighter soft slate-gray frosted glass with gentle subtle gradient */
html[data-theme="glassmorphism"] .left-sidebar {
  background: linear-gradient(180deg, rgba(92, 106, 128, 0.58) 0%, rgba(76, 90, 110, 0.52) 100%) !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
  border-right: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35), inset -1px 0 0 rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="glassmorphism"] .left-sidebar.collapsed {
  border-right: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="glassmorphism"] .left-sidebar-toggle-btn {
  position: fixed !important;
  left: 110px;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(90deg, rgba(76, 90, 110, 0.92) 0%, rgba(92, 106, 128, 0.90) 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-left: none !important;
  color: #f5c542 !important;
  z-index: 95 !important;
}

html[data-theme="glassmorphism"] body.left-sidebar-is-collapsed .left-sidebar-toggle-btn,
html[data-theme="glassmorphism"] .app-layout.left-sidebar-is-collapsed .left-sidebar-toggle-btn {
  left: 0px !important;
}

html[data-theme="glassmorphism"] .left-sidebar-toggle-btn:hover {
  background: linear-gradient(90deg, rgba(44, 60, 84, 1) 0%, rgba(60, 82, 114, 0.98) 100%) !important;
  border-color: #ffd700 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(245, 197, 66, 0.4) !important;
}

html[data-theme="glassmorphism"] .avatar-xp-badge {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  margin: 6px 0 8px 0 !important;
  transition: all 0.15s ease !important;
}

html[data-theme="glassmorphism"] .avatar-xp-badge:hover {
  background: rgba(229, 184, 92, 0.08) !important;
  border-color: rgba(229, 184, 92, 0.35) !important;
}

html[data-theme="glassmorphism"] .avatar-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(229, 184, 92, 0.45) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.0rem !important;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  flex-shrink: 0 !important;
}

html[data-theme="glassmorphism"] .menu-item-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  color: #e2e8f0 !important;
}

html[data-theme="glassmorphism"] .menu-item-btn:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

html[data-theme="glassmorphism"] .menu-item-btn .item-icon-3d {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  margin-bottom: 2px !important;
  border-radius: 0 !important;
}

html[data-theme="glassmorphism"] .mobile-drawer-item .m-item-icon-3d {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  margin-bottom: 4px !important;
  border-radius: 6px !important;
}

/* Top Resource Bar - Smoky slate frosted glass */
html[data-theme="glassmorphism"] .top-mobile-resource-bar {
  background: linear-gradient(180deg, rgba(36, 48, 66, 0.75) 0%, rgba(20, 28, 42, 0.70) 100%) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="glassmorphism"] .top-village-badge {
  background: linear-gradient(135deg, rgba(30, 44, 68, 0.85) 0%, rgba(16, 26, 42, 0.9) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="glassmorphism"] .village-name-badge {
  background: rgba(24, 34, 50, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="glassmorphism"] .inline-res-item.res-diamond {
  background: rgba(8, 40, 60, 0.45) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="glassmorphism"] .inline-res-item.res-diamond:hover {
  background: rgba(14, 55, 85, 0.65) !important;
  border-color: rgba(56, 189, 248, 0.75) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="glassmorphism"] .village-queue-item {
  background: rgba(20, 28, 42, 0.82) !important;
  border: 1px solid rgba(212, 175, 55, 0.5) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Bottom Troop Bar & Cards - Lighter soft slate-gray frosted glass with gentle gradient */
html[data-theme="glassmorphism"] .bottom-troop-bar-toggle-btn {
  background: linear-gradient(180deg, rgba(92, 106, 128, 0.72) 0%, rgba(74, 88, 108, 0.65) 100%) !important;
  backdrop-filter: blur(14px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.50) !important;
  border-bottom: none !important;
  color: #f5c542 !important;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="glassmorphism"] .bottom-troop-bar-toggle-btn:hover {
  background: linear-gradient(180deg, rgba(108, 124, 148, 0.85) 0%, rgba(88, 104, 128, 0.78) 100%) !important;
  border-color: #f5c542 !important;
  color: #ffffff !important;
}

html[data-theme="glassmorphism"] .bottom-troop-bar {
  background: linear-gradient(0deg, rgba(74, 88, 108, 0.58) 0%, rgba(88, 102, 124, 0.52) 100%) !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  justify-content: safe center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  overscroll-behavior-x: contain !important;
}

html[data-theme="glassmorphism"] .bottom-troop-bar.collapsed {
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 900px) {
  html[data-theme="glassmorphism"] .bottom-troop-bar {
    justify-content: flex-start !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
  }
}

html[data-theme="glassmorphism"] .troop-card-item {
  background: linear-gradient(180deg, rgba(70, 84, 104, 0.65) 0%, rgba(54, 66, 84, 0.70) 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="glassmorphism"] .troop-card-item:hover {
  border-color: #f5c542 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 12px rgba(245, 197, 66, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Locked troops: 100% black & white */
html[data-theme="glassmorphism"] .troop-card-item.locked,
.troop-card-item.locked {
  filter: grayscale(100%) contrast(85%) !important;
  opacity: 0.50 !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  background: rgba(45, 54, 68, 0.55) !important;
}

html[data-theme="glassmorphism"] .troop-card-item.locked img,
.troop-card-item.locked img {
  filter: grayscale(100%) contrast(80%) brightness(0.9) !important;
}

html[data-theme="glassmorphism"] .troop-card-item.locked .troop-card-name,
.troop-card-item.locked .troop-card-name {
  color: #94a3b8 !important;
}

html[data-theme="glassmorphism"] .troop-card-item.locked .troop-card-portrait,
.troop-card-item.locked .troop-card-portrait {
  border-color: rgba(148, 163, 184, 0.30) !important;
  filter: grayscale(100%) !important;
}

/* Section 4 Floating Unit Card (Mini-Modal: #troopHoverTooltip / #quickTroopCard - Imperial Glass Translucent) */
html[data-theme="glassmorphism"] #troopHoverTooltip,
html[data-theme="glassmorphism"] #quickTroopCard,
html[data-theme="glassmorphism"] .troop-mini-modal {
  width: 330px !important;
  min-width: 280px !important;
  max-width: min(94vw, 360px) !important;
  box-sizing: border-box !important;
  background: linear-gradient(145deg, rgba(38, 52, 74, 0.62), rgba(20, 30, 46, 0.55)) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  overflow: visible !important;
}

html[data-theme="glassmorphism"] .troop-hover-stat-pill {
  background: rgba(16, 24, 38, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px !important;
  padding: 4px 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
html[data-theme="glassmorphism"] .troop-hover-stat-pill strong {
  color: #f1f5f9 !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  font-family: monospace !important;
}

html[data-theme="glassmorphism"] .troop-hover-cost-well {
  background: rgba(12, 18, 30, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Eliminate duplicate inner borders/backgrounds if nested inside #troopHoverTooltip */
html[data-theme="glassmorphism"] #troopHoverTooltip .troop-mini-modal,
html[data-theme="glassmorphism"] #troopHoverTooltip .troop-hover-card-inner {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Mobile & Small Screen Responsiveness for Troop Cards */
@media (max-width: 480px) {
  html[data-theme="glassmorphism"] #troopHoverTooltip,
  html[data-theme="glassmorphism"] #quickTroopCard,
  html[data-theme="glassmorphism"] .troop-mini-modal {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    min-width: 270px !important;
    padding: 9px !important;
    border-radius: 12px !important;
  }
  #troopHoverTooltip .troop-hover-portrait {
    width: 84px !important;
    min-width: 84px !important;
  }
  #troopHoverTooltip .troop-hover-name {
    font-size: 1.02rem !important;
  }
  #troopHoverTooltip .troop-hover-stat-pill {
    padding: 3px 5px !important;
  }
  #troopHoverTooltip .troop-hover-cost-well {
    gap: 8px !important;
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
  }
}

/* Chat & Right Sidebar - Lighter soft slate-gray frosted glass with gentle subtle gradient */
html[data-theme="glassmorphism"] .chat-window,
html[data-theme="glassmorphism"] .right-sidebar {
  background: linear-gradient(180deg, rgba(92, 106, 128, 0.58) 0%, rgba(76, 90, 110, 0.52) 100%) !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
  border-left: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="glassmorphism"] .right-sidebar.collapsed {
  border-left: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Gelen, Giden ve Destek Sefer İkonları - İmparatorluk Camı Sidebar Tonunda Yarı Saydam & Çerçeveli */
html[data-theme="glassmorphism"] .action-circle-btn {
  background: linear-gradient(180deg, rgba(92, 106, 128, 0.60) 0%, rgba(76, 90, 110, 0.52) 100%) !important;
  backdrop-filter: blur(16px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(118%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.48) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="glassmorphism"] .action-circle-btn span {
  color: #f8fafc !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75) !important;
}

html[data-theme="glassmorphism"] .action-circle-btn.action-btn-danger:not(.movement-active),
html[data-theme="glassmorphism"] .action-circle-btn.action-btn-warning:not(.movement-active),
html[data-theme="glassmorphism"] .action-circle-btn.action-btn-info:not(.movement-active) {
  border-color: rgba(148, 163, 184, 0.48) !important;
  color: #cbd5e1 !important;
  opacity: 0.62;
}

html[data-theme="glassmorphism"] .action-circle-btn.action-btn-danger:not(.movement-active) span,
html[data-theme="glassmorphism"] .action-circle-btn.action-btn-warning:not(.movement-active) span,
html[data-theme="glassmorphism"] .action-circle-btn.action-btn-info:not(.movement-active) span {
  color: #cbd5e1 !important;
}

html[data-theme="glassmorphism"] .action-circle-btn.action-btn-danger.movement-active {
  border-color: rgba(248, 113, 113, 0.85) !important;
  color: #fecaca !important;
  opacity: 1;
}

html[data-theme="glassmorphism"] .action-circle-btn.action-btn-danger.movement-active span {
  color: #fecaca !important;
}

html[data-theme="glassmorphism"] .action-circle-btn.action-btn-warning.movement-active {
  border-color: rgba(251, 191, 36, 0.85) !important;
  color: #fde68a !important;
  opacity: 1;
}

html[data-theme="glassmorphism"] .action-circle-btn.action-btn-warning.movement-active span {
  color: #fde68a !important;
}

html[data-theme="glassmorphism"] .action-circle-btn.action-btn-info.movement-active {
  border-color: rgba(56, 189, 248, 0.85) !important;
  color: #bae6fd !important;
  opacity: 1;
}

html[data-theme="glassmorphism"] .action-circle-btn.action-btn-info.movement-active span {
  color: #bae6fd !important;
}

html[data-theme="glassmorphism"] .action-circle-btn:hover {
  background: linear-gradient(180deg, rgba(108, 124, 148, 0.76) 0%, rgba(88, 104, 128, 0.68) 100%) !important;
  border-color: #f5c542 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 12px rgba(245, 197, 66, 0.35) !important;
}

html[data-theme="glassmorphism"] .right-sidebar-toggle-btn {
  position: fixed !important;
  right: 235px;
  top: max(50%, 380px) !important;
  transform: translateY(-50%) !important;
  background: linear-gradient(270deg, rgba(76, 90, 110, 0.92) 0%, rgba(92, 106, 128, 0.90) 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-right: none !important;
  color: #f5c542 !important;
  z-index: 95 !important;
}

html[data-theme="glassmorphism"] #chatInput {
  background: rgba(14, 22, 34, 0.85) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  color: #ffffff !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

/* Radial Village Action Menu */
html[data-theme="glassmorphism"] .radial-village-menu .radial-menu-center {
  background: radial-gradient(circle at 35% 35%, #30476e 0%, #121c2e 100%) !important;
  border: 2px solid #f5c542 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.85), 0 0 16px rgba(245, 197, 66, 0.5) !important;
}

html[data-theme="glassmorphism"] .radial-item-btn {
  background: linear-gradient(135deg, rgba(26, 40, 62, 0.85) 0%, rgba(14, 22, 36, 0.90) 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7) !important;
}

html[data-theme="glassmorphism"] .radial-item-btn:hover {
  border-color: #ffd700 !important;
  box-shadow: 0 0 16px rgba(245, 197, 66, 0.6) !important;
  transform: scale(1.1) !important;
}

/* Radial Target Nameplate (Dark Imperial Glass) */
html[data-theme="glassmorphism"] .radial-target-nameplate {
  background: linear-gradient(135deg, rgba(22, 34, 52, 0.88) 0%, rgba(13, 20, 32, 0.92) 100%) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border: 1px solid rgba(229, 184, 92, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  bottom: -50px !important;
  padding: 4px 12px !important;
}

html[data-theme="glassmorphism"] .radial-target-nameplate:hover {
  border-color: #ffd700 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 14px rgba(245, 197, 66, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="glassmorphism"] .radial-target-title {
  color: #f8fafc !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: 'Marcellus', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0.35px !important;
  text-transform: none !important;
  font-variant: normal !important;
}

html[data-theme="glassmorphism"] .radial-target-sub {
  color: #e5b85c !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: 'Marcellus', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: 0.25px !important;
  text-transform: none !important;
  font-variant: normal !important;
}

html[data-theme="glassmorphism"] #radialBtnEnterVillage {
  display: none !important;
}

html[data-theme="glassmorphism"] .village-header-right-actions {
  margin-left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

html[data-theme="glassmorphism"] .village-back-to-map-btn {
  margin-left: auto !important;
  align-self: flex-end !important;
}

/* Notification Badges - 50% Softened Neon & Glow */
html[data-theme="glassmorphism"] .event-badge {
  font-size: 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="glassmorphism"] .event-badge.report-badge {
  border-color: rgba(254, 240, 138, 0.55) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(245, 158, 11, 0.28) !important;
}

html[data-theme="glassmorphism"] .event-badge.badge-danger {
  border-color: rgba(252, 165, 165, 0.55) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(239, 68, 68, 0.3) !important;
}

html[data-theme="glassmorphism"] .event-badge.badge-warning {
  border-color: rgba(253, 230, 138, 0.55) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(245, 158, 11, 0.3) !important;
}

html[data-theme="glassmorphism"] .event-badge.badge-info {
  border-color: rgba(147, 197, 253, 0.55) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 4px rgba(59, 130, 246, 0.3) !important;
}

/* Scrollbars in Glassmorphism */
html[data-theme="glassmorphism"] * {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(229, 184, 92, 0.45) rgba(10, 16, 28, 0.35) !important;
}
html[data-theme="glassmorphism"] ::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
html[data-theme="glassmorphism"] ::-webkit-scrollbar-thumb {
  background: rgba(229, 184, 92, 0.45) !important;
  border-radius: 4px !important;
}
html[data-theme="glassmorphism"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(229, 184, 92, 0.75) !important;
}
html[data-theme="glassmorphism"] ::-webkit-scrollbar-track {
  background: rgba(10, 16, 28, 0.35) !important;
}

/* Specific styling for Player Profile Modal in Glassmorphism */
html[data-theme="glassmorphism"] #playerProfileModal .modal-dark-card {
  padding: 14px 18px !important;
  gap: 8px !important;
  max-height: 84vh !important;
}
html[data-theme="glassmorphism"] #playerProfileModal #profileUsername {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 1.05rem !important;
  color: #fff !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
html[data-theme="glassmorphism"] #playerProfileModal #profileUsername::before,
html[data-theme="glassmorphism"] #playerProfileModal #profileUsername::after {
  display: none !important;
}
html[data-theme="glassmorphism"] #playerProfileModal .profile-star-box {
  padding: 2px 8px !important;
  font-size: 0.68rem !important;
}
html[data-theme="glassmorphism"] #playerProfileModal thead {
  background: rgba(18, 26, 38, 0.95) !important;
}

/* --------------------------------------------------------------------------
   9. TYPOGRAPHY & FONT REFINEMENT (SLEEK HIGH-CONTRAST MODAL TYPOGRAPHY)
   Main Titles: 14px | Subtitles: 12px | Normal Text: 11px
   -------------------------------------------------------------------------- */
html[data-theme="glassmorphism"] .modal-overlay h1,
html[data-theme="glassmorphism"] .modal-overlay h2,
html[data-theme="glassmorphism"] .modal-overlay h3,
html[data-theme="glassmorphism"] .modal-backdrop h1,
html[data-theme="glassmorphism"] .modal-backdrop h2,
html[data-theme="glassmorphism"] .modal-backdrop h3,
html[data-theme="glassmorphism"] .modal-dark-card h1,
html[data-theme="glassmorphism"] .modal-dark-card h2,
html[data-theme="glassmorphism"] .modal-dark-card h3,
html[data-theme="glassmorphism"] .modal-window h1,
html[data-theme="glassmorphism"] .modal-window h2,
html[data-theme="glassmorphism"] .modal-window h3,
html[data-theme="glassmorphism"] .ranking-modal-card h1,
html[data-theme="glassmorphism"] .ranking-modal-card h2,
html[data-theme="glassmorphism"] .ranking-modal-card h3,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child h2,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child h3,
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child h3,
html[data-theme="glassmorphism"] .modal-header h3,
html[data-theme="glassmorphism"] #sendMovementModalTitle,
html[data-theme="glassmorphism"] #clanModalHeaderTitle,
html[data-theme="glassmorphism"] #clanProfileClanName,
html[data-theme="glassmorphism"] #profileUsername,
html[data-theme="glassmorphism"] .chat-chamfer-tab-btn,
html[data-theme="glassmorphism"] .ranking-tab-btn,
html[data-theme="glassmorphism"] .clan-tab-btn,
html[data-theme="glassmorphism"] .clan-noclan-tab-btn,
html[data-theme="glassmorphism"] .profile-tab-btn,
html[data-theme="glassmorphism"] .support-tab-btn,
html[data-theme="glassmorphism"] .medrese-cat-btn,
html[data-theme="glassmorphism"] .diamond-shop-tabs-bar .chat-chamfer-tab-btn,
html[data-theme="glassmorphism"] #diamondShopModal .chat-chamfer-tab-btn,
html[data-theme="glassmorphism"] .admin-tabs-nav button,
html[data-theme="glassmorphism"] .tab-btn {
  font-size: 14px !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.25 !important;
  color: #fff9db !important;
}

html[data-theme="glassmorphism"] .modal-overlay h4,
html[data-theme="glassmorphism"] .modal-backdrop h4,
html[data-theme="glassmorphism"] .modal-dark-card h4,
html[data-theme="glassmorphism"] .modal-window h4,
html[data-theme="glassmorphism"] .ranking-modal-card h4,
html[data-theme="glassmorphism"] .modal-overlay h5,
html[data-theme="glassmorphism"] .modal-backdrop h5,
html[data-theme="glassmorphism"] .modal-dark-card h5,
html[data-theme="glassmorphism"] .modal-window h5,
html[data-theme="glassmorphism"] .modal-header-subtitle,
html[data-theme="glassmorphism"] #empireProdSubtitle,
html[data-theme="glassmorphism"] #clanModalHeaderSubtitle,
html[data-theme="glassmorphism"] #rankingsSubtitle,
html[data-theme="glassmorphism"] #newsSubtitle,
html[data-theme="glassmorphism"] #reportsSubtitle,
html[data-theme="glassmorphism"] #farmListSubHeader,
html[data-theme="glassmorphism"] #farmSettingsTitle,
html[data-theme="glassmorphism"] #farmStaminaText,
html[data-theme="glassmorphism"] #farmListCountDisplay,
html[data-theme="glassmorphism"] .ranking-player-name,
html[data-theme="glassmorphism"] .ranking-clan-name,
html[data-theme="glassmorphism"] .ranking-clan-tag,
html[data-theme="glassmorphism"] .alliance-pill-tag,
html[data-theme="glassmorphism"] .movement-link-village,
html[data-theme="glassmorphism"] .movement-link-player,
html[data-theme="glassmorphism"] .quest-category-title,
html[data-theme="glassmorphism"] .milestone-stage-title,
html[data-theme="glassmorphism"] .troop-preview-name,
html[data-theme="glassmorphism"] .shop-status-banner-val,
html[data-theme="glassmorphism"] #shopSubTierText,
html[data-theme="glassmorphism"] #shopShieldText,
html[data-theme="glassmorphism"] #shopBuffsSummaryText,
html[data-theme="glassmorphism"] #overviewTotalVillages,
html[data-theme="glassmorphism"] #overviewTotalGrain,
html[data-theme="glassmorphism"] #overviewNetGrainProd,
html[data-theme="glassmorphism"] #overviewStarvationTimer,
html[data-theme="glassmorphism"] #clanStatTag,
html[data-theme="glassmorphism"] #clanStatPoints,
html[data-theme="glassmorphism"] #clanStatAvgPoints,
html[data-theme="glassmorphism"] #clanStatLeader,
html[data-theme="glassmorphism"] #clanStatMyRole,
html[data-theme="glassmorphism"] #shieldTimerDays,
html[data-theme="glassmorphism"] #shieldTimerHours,
html[data-theme="glassmorphism"] #shieldTimerMinutes,
html[data-theme="glassmorphism"] #shieldTimerSeconds,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child span,
html[data-theme="glassmorphism"] .modal-dark-card > div:first-child div[style*="font-size"],
html[data-theme="glassmorphism"] .ranking-modal-card > div:first-child div[style*="font-size"],
html[data-theme="glassmorphism"] .confirm-modal-card > div:first-child > div {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.35 !important;
}

html[data-theme="glassmorphism"] .modal-dark-card,
html[data-theme="glassmorphism"] .modal-window,
html[data-theme="glassmorphism"] .modal-body,
html[data-theme="glassmorphism"] .ranking-modal-card,
html[data-theme="glassmorphism"] .confirm-modal-card,
html[data-theme="glassmorphism"] .modal-overlay p,
html[data-theme="glassmorphism"] .modal-backdrop p,
html[data-theme="glassmorphism"] .modal-dark-card p,
html[data-theme="glassmorphism"] .modal-window p,
html[data-theme="glassmorphism"] .modal-overlay li,
html[data-theme="glassmorphism"] .modal-backdrop li,
html[data-theme="glassmorphism"] .modal-dark-card li,
html[data-theme="glassmorphism"] .modal-window li,
html[data-theme="glassmorphism"] .modal-overlay ul,
html[data-theme="glassmorphism"] .modal-backdrop ul,
html[data-theme="glassmorphism"] .modal-dark-card ul,
html[data-theme="glassmorphism"] .modal-window ul,
html[data-theme="glassmorphism"] .modal-dark-card label,
html[data-theme="glassmorphism"] .modal-window label,
html[data-theme="glassmorphism"] .modal-dark-card input,
html[data-theme="glassmorphism"] .modal-window input,
html[data-theme="glassmorphism"] .modal-dark-card select,
html[data-theme="glassmorphism"] .modal-window select,
html[data-theme="glassmorphism"] .modal-dark-card textarea,
html[data-theme="glassmorphism"] .modal-window textarea,
html[data-theme="glassmorphism"] .modal-dark-card .btn,
html[data-theme="glassmorphism"] .modal-window .btn,
html[data-theme="glassmorphism"] .modal-dark-card button:not(.chat-chamfer-tab-btn):not(.quests-tab-btn):not(.ranking-tab-btn):not(.clan-tab-btn):not(.profile-tab-btn):not(.support-tab-btn):not(.medrese-cat-btn):not(.tab-btn),
html[data-theme="glassmorphism"] .modal-window button:not(.chat-chamfer-tab-btn):not(.quests-tab-btn):not(.ranking-tab-btn):not(.clan-tab-btn):not(.profile-tab-btn):not(.support-tab-btn):not(.medrese-cat-btn):not(.tab-btn),
html[data-theme="glassmorphism"] .modal-overlay button:not(.chat-chamfer-tab-btn):not(.quests-tab-btn):not(.ranking-tab-btn):not(.clan-tab-btn):not(.profile-tab-btn):not(.support-tab-btn):not(.medrese-cat-btn):not(.tab-btn),
html[data-theme="glassmorphism"] .modal-backdrop button:not(.chat-chamfer-tab-btn):not(.quests-tab-btn):not(.ranking-tab-btn):not(.clan-tab-btn):not(.profile-tab-btn):not(.support-tab-btn):not(.medrese-cat-btn):not(.tab-btn),
html[data-theme="glassmorphism"] .ranking-modal-card .btn,
html[data-theme="glassmorphism"] .farm-table-btn,
html[data-theme="glassmorphism"] .farm-raid-btn,
html[data-theme="glassmorphism"] .shop-status-banner-label {
  font-size: 11px !important;
}
html[data-theme="glassmorphism"] #farmListModal .farm-raid-btn {
  padding: 5px 9px !important;
  min-height: 26px !important;
  line-height: 1.25 !important;
}
html[data-theme="glassmorphism"] #farmListModal .farm-target-row td {
  white-space: nowrap !important;
}

html[data-theme="glassmorphism"] .medrese-status-badge,
html[data-theme="glassmorphism"] .medrese-card .completed-badge,
html[data-theme="glassmorphism"] .tech-card .completed-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}

/* ==============================================================================
   SIDEBARS TYPOGRAPHY STANDARD - GLASSMORPHISM (10px STRICT LIMIT ACROSS WEB & MOBILE)
   ============================================================================== */
/* Left Sidebar Standards (10px) */
html[data-theme="glassmorphism"] .left-sidebar .menu-item-btn,
html[data-theme="glassmorphism"] .left-sidebar .menu-item-btn span:not(.item-icon):not(.event-badge) {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

html[data-theme="glassmorphism"] .left-sidebar .menu-item-btn .item-icon {
  font-size: 1rem !important;
}

html[data-theme="glassmorphism"] .left-sidebar .quick-village-btn,
html[data-theme="glassmorphism"] .left-sidebar .quick-village-btn #quickToggleLabel {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

html[data-theme="glassmorphism"] .left-sidebar .quick-village-btn #quickToggleIcon {
  font-size: 1.25rem !important;
}

html[data-theme="glassmorphism"] .avatar-xp-badge .xp-title,
html[data-theme="glassmorphism"] .right-sidebar .avatar-xp-badge .xp-title,
html[data-theme="glassmorphism"] .left-sidebar .avatar-xp-badge .xp-title {
  font-size: 10px !important;
}

html[data-theme="glassmorphism"] .avatar-xp-badge .xp-val,
html[data-theme="glassmorphism"] .right-sidebar .avatar-xp-badge .xp-val,
html[data-theme="glassmorphism"] .left-sidebar .avatar-xp-badge .xp-val {
  font-size: 10px !important;
}

html[data-theme="glassmorphism"] .avatar-xp-badge #sidebarVillageTpLabel,
html[data-theme="glassmorphism"] .avatar-xp-badge #sidebarVillageTpName,
html[data-theme="glassmorphism"] .avatar-xp-badge #sidebarVillageTpRatio,
html[data-theme="glassmorphism"] .right-sidebar .avatar-xp-badge #sidebarVillageTpLabel,
html[data-theme="glassmorphism"] .right-sidebar .avatar-xp-badge #sidebarVillageTpName,
html[data-theme="glassmorphism"] .right-sidebar .avatar-xp-badge #sidebarVillageTpRatio,
html[data-theme="glassmorphism"] .left-sidebar .avatar-xp-badge #sidebarVillageTpLabel,
html[data-theme="glassmorphism"] .left-sidebar .avatar-xp-badge #sidebarVillageTpName,
html[data-theme="glassmorphism"] .left-sidebar .avatar-xp-badge #sidebarVillageTpRatio {
  font-size: 10px !important;
}

html[data-theme="glassmorphism"] .left-sidebar .btn-sidebar-logout {
  font-size: 10px !important;
}

/* Right Sidebar Standards (10px) */
html[data-theme="glassmorphism"] .right-sidebar .panel-section-title,
html[data-theme="glassmorphism"] .right-sidebar .panel-section-title span {
  font-size: 10px !important;
}

html[data-theme="glassmorphism"] .right-sidebar .shield-table-pill,
html[data-theme="glassmorphism"] .right-sidebar .shield-table-pill span {
  font-size: 10px !important;
}

html[data-theme="glassmorphism"] .right-sidebar .resource-row,
html[data-theme="glassmorphism"] .right-sidebar .resource-row .resource-label,
html[data-theme="glassmorphism"] .right-sidebar .resource-row .resource-label span:not(.res-buff-indicator),
html[data-theme="glassmorphism"] .right-sidebar .resource-row .resource-val,
html[data-theme="glassmorphism"] .right-sidebar .resource-row .resource-val span:not(.res-buff-indicator) {
  font-size: 10px !important;
}

html[data-theme="glassmorphism"] .right-sidebar .cities-grid .city-btn {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
}

html[data-theme="glassmorphism"] .right-sidebar .cities-grid .city-btn:hover {
  background: rgba(229, 184, 92, 0.1) !important;
  border-color: rgba(229, 184, 92, 0.35) !important;
}

html[data-theme="glassmorphism"] .right-sidebar .cities-grid .city-btn.active {
  border: 1.5px solid #22c55e !important;
  background: linear-gradient(145deg, rgba(21, 128, 61, 0.35), rgba(6, 78, 59, 0.45)) !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.25) !important;
}

html[data-theme="glassmorphism"] .right-sidebar .cities-grid .city-btn,
html[data-theme="glassmorphism"] .right-sidebar .cities-grid .city-btn div,
html[data-theme="glassmorphism"] .right-sidebar .cities-grid .city-btn span,
html[data-theme="glassmorphism"] .right-sidebar .cities-grid .city-btn .city-name {
  font-size: 10px !important;
}

html[data-theme="glassmorphism"] .right-sidebar .cities-grid .city-btn .city-name {
  color: #f1f5f9 !important;
}

html[data-theme="glassmorphism"] .right-sidebar .cities-grid .city-btn.active .city-name {
  color: #ffffff !important;
}

html[data-theme="glassmorphism"] .right-sidebar .event-circle-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html[data-theme="glassmorphism"] .right-sidebar .event-circle-btn span:not(.event-badge) {
  font-size: 10px !important;
  font-weight: 500 !important;
}

html[data-theme="glassmorphism"] .right-sidebar .event-circle-btn.has-notification,
html[data-theme="glassmorphism"] #sidebarReportsBtn.has-notification,
html[data-theme="glassmorphism"] #sidebarMessagesBtn.has-notification {
  background: linear-gradient(180deg, #f97316 0%, #ea580c 100%) !important;
  border: 1.5px solid #fdba74 !important;
  border-radius: 8px !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

html[data-theme="glassmorphism"] .right-sidebar .player-subtitle,
html[data-theme="glassmorphism"] .right-sidebar .player-subtitle span,
html[data-theme="glassmorphism"] .right-sidebar #sidebarPlayerName,
html[data-theme="glassmorphism"] .right-sidebar #sidebarTribeName {
  font-size: 10px !important;
}

html[data-theme="glassmorphism"] .right-chat-tabs .chat-tab-vertical,
html[data-theme="glassmorphism"] .right-chat-tabs .chat-tab-vertical span {
  font-size: 10px !important;
  border: none !important;
}

html[data-theme="glassmorphism"] .bottom-troop-bar .troop-card-name,
html[data-theme="glassmorphism"] .bottom-troop-bar .troop-card-count-badge {
  font-size: 11px !important;
}

/* Modal spans and inline badges clamp to 14px */
html[data-theme="glassmorphism"] .modal-dark-card span[style*="font-size:1.6rem"],
html[data-theme="glassmorphism"] .modal-dark-card span[style*="font-size: 1.6rem"],
html[data-theme="glassmorphism"] .modal-dark-card span[style*="font-size:1.5rem"],
html[data-theme="glassmorphism"] .modal-dark-card span[style*="font-size: 1.5rem"],
html[data-theme="glassmorphism"] .modal-dark-card span[style*="font-size:1.4rem"],
html[data-theme="glassmorphism"] .modal-dark-card span[style*="font-size: 1.4rem"],
html[data-theme="glassmorphism"] .modal-window span[style*="font-size:1.6rem"],
html[data-theme="glassmorphism"] .modal-window span[style*="font-size: 1.6rem"],
html[data-theme="glassmorphism"] .modal-window span[style*="font-size:1.5rem"],
html[data-theme="glassmorphism"] .modal-window span[style*="font-size: 1.5rem"],
html[data-theme="glassmorphism"] .modal-window span[style*="font-size:1.4rem"],
html[data-theme="glassmorphism"] .modal-window span[style*="font-size: 1.4rem"],
html[data-theme="glassmorphism"] .modal-overlay span[style*="font-size:1.6rem"],
html[data-theme="glassmorphism"] .modal-backdrop span[style*="font-size:1.6rem"] {
  font-size: 14px !important;
}

/* ==========================================================================
   TOAST NOTIFICATIONS & CONFIRMATION MODAL (IMPERIAL GLASS THEME)
   ========================================================================== */
html[data-theme="glassmorphism"] .game-toast-box,
html[data-theme="glassmorphism"] #gameToastNotification {
  background: rgba(28, 38, 54, 0.88) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  color: #f8fafc !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 16px rgba(212, 175, 55, 0.25) !important;
  border-radius: 14px !important;
  font-size: 11px !important;
  padding: 7px 16px !important;
}

html[data-theme="glassmorphism"] #gameConfirmModal {
  background: rgba(10, 16, 26, 0.45) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html[data-theme="glassmorphism"] .confirm-modal-card {
  width: 390px !important;
  max-width: 92vw !important;
  height: auto !important;
  max-height: 85vh !important;
  margin: auto !important;
  background: linear-gradient(180deg, rgba(35, 48, 68, 0.94) 0%, rgba(20, 28, 42, 0.92) 100%) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-size: 11px !important;
}

html[data-theme="glassmorphism"] #gameConfirmTitle,
html[data-theme="glassmorphism"] .confirm-modal-card h3 {
  font-size: 13px !important;
}

html[data-theme="glassmorphism"] #gameConfirmMessage,
html[data-theme="glassmorphism"] .confirm-modal-card p,
html[data-theme="glassmorphism"] .confirm-ok-btn,
html[data-theme="glassmorphism"] .confirm-cancel-btn {
  font-size: 11px !important;
}

html[data-theme="glassmorphism"] .confirm-modal-card > div:first-child {
  padding: 10px 16px !important;
  min-height: 38px !important;
  background: linear-gradient(180deg, rgba(42, 58, 82, 0.95) 0%, rgba(28, 38, 56, 0.92) 100%) !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.4) !important;
}

html[data-theme="glassmorphism"] .confirm-modal-card > div:nth-child(2) {
  background: rgba(15, 22, 34, 0.55) !important;
  margin: 10px 14px !important;
  padding: 12px 14px !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.5) !important;
}

html[data-theme="glassmorphism"] .confirm-modal-card > div:last-child {
  padding: 10px 16px !important;
  background: rgba(16, 24, 38, 0.75) !important;
  border-top: 1.5px solid rgba(212, 175, 55, 0.25) !important;
}

html[data-theme="glassmorphism"] .confirm-ok-btn {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%) !important;
  border: 1.5px solid #fbbf24 !important;
  color: #120b04 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important;
}

html[data-theme="glassmorphism"] .confirm-cancel-btn {
  background: linear-gradient(180deg, rgba(45, 62, 88, 0.9) 0%, rgba(28, 40, 60, 0.95) 100%) !important;
  border: 1.5px solid rgba(148, 163, 184, 0.4) !important;
  color: #e2e8f0 !important;
}

/* Glassmorphism theme overrides for Production Matrix Modal (Authentic Semi-Transparent Glass & Ornate Filigree Frame) */
html[data-theme="glassmorphism"] #resourceProductionModal .modal-dark-card,
html[data-theme="glassmorphism"] #resourceProductionModal .res-prod-card {
  position: relative !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
  background-color: transparent !important;
  background-image:
    url('../../assets/ui/theme-glassmorphism/filigree-corner-tl.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-corner-tr.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-corner-bl.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-corner-br.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-crest-bottom.svg'),
    url('../../assets/ui/theme-glassmorphism/filigree-crest-top.svg'),
    linear-gradient(175deg, rgba(58, 76, 102, 0.44) 0%, rgba(36, 50, 72, 0.38) 100%) !important;
  background-position:
    top 0 left 0,
    top 0 right 0,
    bottom 0 left 0,
    bottom 0 right 0,
    bottom -1px center,
    top -1px center,
    0 0 !important;
  background-size:
    44px 44px,
    44px 44px,
    44px 44px,
    44px 44px,
    80px 24px,
    120px 28px,
    auto !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1.5px solid #d4af37 !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 1px rgba(245, 215, 130, 0.32), 0 25px 65px rgba(0, 0, 0, 0.50), inset 0 1px 1px rgba(255, 255, 255, 0.32), inset 0 0 20px rgba(100, 130, 175, 0.12) !important;
}

/* Semi-transparent sunken glass well for data grid */
html[data-theme="glassmorphism"] .res-prod-table-container {
  background: rgba(14, 22, 34, 0.55) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Sticky Header Row in Glassmorphism */
html[data-theme="glassmorphism"] .res-prod-table thead th {
  background: linear-gradient(180deg, rgba(38, 52, 74, 0.94) 0%, rgba(22, 32, 48, 0.96) 100%) !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.5) !important;
  color: #f5c542 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

/* Sticky First Column Header (Top-Left Cell) in Glassmorphism */
html[data-theme="glassmorphism"] .res-prod-table thead th.res-prod-th-city {
  background: linear-gradient(180deg, rgba(44, 60, 86, 0.97) 0%, rgba(26, 38, 56, 0.98) 100%) !important;
  border-right: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.5) !important;
}

/* Body data cells: Semi-transparent glass rows */
html[data-theme="glassmorphism"] .res-prod-table tbody td {
  background: rgba(16, 24, 38, 0.40) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Sticky First Column Body Cell (Village Name) in Glassmorphism */
html[data-theme="glassmorphism"] .res-prod-table tbody td.res-prod-col-city {
  background: rgba(20, 28, 44, 0.95) !important;
  border-right: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="glassmorphism"] .res-prod-table tbody tr:hover td {
  background: rgba(36, 52, 78, 0.65) !important;
}

html[data-theme="glassmorphism"] .res-prod-table tbody tr:hover td.res-prod-col-city {
  background: rgba(38, 54, 82, 0.98) !important;
}

html[data-theme="glassmorphism"] .res-prod-table tbody tr.res-prod-current-row td {
  background: rgba(45, 62, 92, 0.55) !important;
}

html[data-theme="glassmorphism"] .res-prod-table tbody tr.res-prod-current-row td.res-prod-col-city {
  background: rgba(42, 60, 90, 0.98) !important;
  border-left: 3px solid #f59e0b !important;
}

/* Sticky Total Footer in Glassmorphism */
html[data-theme="glassmorphism"] .res-prod-table tfoot td {
  background: linear-gradient(180deg, rgba(30, 42, 62, 0.96) 0%, rgba(18, 26, 40, 0.98) 100%) !important;
  border-top: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  color: #fff9db !important;
}

html[data-theme="glassmorphism"] .res-prod-table tfoot td.res-prod-total-city {
  background: linear-gradient(180deg, rgba(38, 54, 80, 0.98) 0%, rgba(22, 34, 52, 0.99) 100%) !important;
  border-right: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  border-top: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  color: #f5c542 !important;
}

/* Village TP Modal & Mobile Village TP Badge - Smoky slate frosted glass */
html[data-theme="glassmorphism"] .village-tp-modal-card {
  background: linear-gradient(135deg, rgba(28, 38, 54, 0.90) 0%, rgba(16, 24, 38, 0.88) 100%) !important;
  backdrop-filter: blur(16px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.55) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="glassmorphism"] .mobile-village-tp-badge {
  background: rgba(24, 34, 50, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="glassmorphism"] .village-tp-summary-banner {
  background: rgba(20, 30, 46, 0.75) !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
}

html[data-theme="glassmorphism"] .tp-matrix-card {
  background: rgba(22, 32, 48, 0.75) !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
}

html[data-theme="glassmorphism"] .tp-card-next {
  background: linear-gradient(135deg, rgba(38, 50, 72, 0.95), rgba(48, 34, 18, 0.9)) !important;
  border-color: #f59e0b !important;
}

/* Modal Info Button (Gold Badge with Yellow Glow, Top-Left Placement) */
html[data-theme="glassmorphism"] .modal-info-btn,
html[data-theme="glassmorphism"] button.modal-info-btn,
html[data-theme="glassmorphism"] .modal-dark-card button.modal-info-btn,
html[data-theme="glassmorphism"] .modal-window button.modal-info-btn,
html[data-theme="glassmorphism"] .ranking-modal-card button.modal-info-btn,
.modal-info-btn {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid #facc15 !important;
  color: #facc15 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.65), inset 0 0 5px rgba(250, 204, 21, 0.25) !important;
  z-index: 25 !important;
  flex-shrink: 0 !important;
}

html[data-theme="glassmorphism"] .modal-info-btn:hover,
html[data-theme="glassmorphism"] button.modal-info-btn:hover,
button.modal-info-btn:hover {
  background: rgba(250, 204, 21, 0.15) !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.95), inset 0 0 8px rgba(250, 204, 21, 0.4) !important;
}

html[data-theme="glassmorphism"] .modal-info-btn.is-active,
html[data-theme="glassmorphism"] .modal-info-btn.is-open,
html[data-theme="glassmorphism"] button.modal-info-btn.is-active,
html[data-theme="glassmorphism"] button.modal-info-btn.is-open,
button.modal-info-btn.is-active,
button.modal-info-btn.is-open {
  background: rgba(250, 204, 21, 0.25) !important;
  border-color: #fde047 !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(250, 204, 21, 1), inset 0 0 10px rgba(250, 204, 21, 0.5) !important;
  transform: translateY(-50%) scale(1.05) !important;
}

/* Hide Redundant Inline Tip Texts (Now Housed Inside Modal Info Drawers) */
#movementMissionHint,
html[data-theme="glassmorphism"] #movementMissionHint {
  display: none !important;
}

html[data-theme="glassmorphism"] .modal-info-drawer {
  position: absolute !important;
  top: 54px !important;
  left: 14px !important;
  max-width: 520px !important;
  width: calc(100% - 28px) !important;
  max-height: calc(100% - 68px) !important;
  overflow-y: auto !important;
  background: linear-gradient(135deg, rgba(13, 19, 33, 0.98), rgba(20, 26, 40, 0.98)) !important;
  border: 1.5px solid #eab308 !important;
  border-left: 4px solid #facc15 !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(234, 179, 8, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  animation: modalInfoSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 999999 !important;
  flex-shrink: 0 !important;
}

/* Tooltip Popover Top-Right Close Button */
.modal-info-drawer-close,
html[data-theme="glassmorphism"] .modal-info-drawer-close,
html[data-theme="glassmorphism"] .modal-info-drawer button.modal-info-drawer-close,
html[data-theme="glassmorphism"] .modal-info-drawer button[onclick*="closeModalInfo"] {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  transform: none !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #521818 0%, #220808 100%) !important;
  border: 1.5px solid #d4af37 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 230, 160, 0.5) !important;
  color: #ffe6a3 !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  z-index: 30 !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.modal-info-drawer-close:hover,
html[data-theme="glassmorphism"] .modal-info-drawer-close:hover,
html[data-theme="glassmorphism"] .modal-info-drawer button.modal-info-drawer-close:hover,
html[data-theme="glassmorphism"] .modal-info-drawer button[onclick*="closeModalInfo"]:hover {
  background: radial-gradient(circle at 35% 35%, #7f1d1d 0%, #3a0d0d 100%) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.85), inset 0 1px 2px #fff !important;
  transform: scale(1.1) !important;
}

.modal-info-drawer-close:active,
html[data-theme="glassmorphism"] .modal-info-drawer-close:active,
html[data-theme="glassmorphism"] .modal-info-drawer button.modal-info-drawer-close:active,
html[data-theme="glassmorphism"] .modal-info-drawer button[onclick*="closeModalInfo"]:active {
  transform: scale(0.95) !important;
}

/* Pinned Battle Report Detail Navigation Footer */
html[data-theme="glassmorphism"] .report-detail-panel {
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

@media (max-width: 768px) and (orientation: portrait),
       (orientation: portrait) and (max-width: 900px) {
  html[data-theme="glassmorphism"] .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel {
    display: none !important;
  }
  html[data-theme="glassmorphism"] .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel {
    display: none !important;
  }
  html[data-theme="glassmorphism"] .battle-reports-layout-grid.mobile-show-detail .report-detail-panel {
    display: flex !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

html.mobile-portrait-mode[data-theme="glassmorphism"] .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel,
html[data-device-orientation="portrait"][data-theme="glassmorphism"] .battle-reports-layout-grid:not(.mobile-show-detail) .report-detail-panel {
  display: none !important;
}
html.mobile-portrait-mode[data-theme="glassmorphism"] .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel,
html[data-device-orientation="portrait"][data-theme="glassmorphism"] .battle-reports-layout-grid.mobile-show-detail .reports-list-side-panel {
  display: none !important;
}
html.mobile-portrait-mode[data-theme="glassmorphism"] .battle-reports-layout-grid.mobile-show-detail .report-detail-panel,
html[data-device-orientation="portrait"][data-theme="glassmorphism"] .battle-reports-layout-grid.mobile-show-detail .report-detail-panel {
  display: flex !important;
  flex: 1 1 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-theme="glassmorphism"] .report-detail-scroll-area {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain !important;
  padding: 10px 14px !important;
}

html[data-theme="glassmorphism"] .report-detail-pinned-footer {
  flex-shrink: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(180deg, rgba(26, 36, 52, 0.96), rgba(16, 23, 34, 0.98)) !important;
  border-top: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  padding: 8px 14px !important;
  border-bottom-left-radius: 7px !important;
  border-bottom-right-radius: 7px !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6) !important;
  z-index: 10 !important;
}

/* Send Movement Action Bar Alignment */
html[data-theme="glassmorphism"] .send-movement-footer-actions {
  margin-left: auto !important;
  justify-content: flex-end !important;
}

/* ==========================================================================
   SEND MOVEMENT MODAL: HIGH-PRIORITY HEADER BUTTON PINNING (TOP CARTOUCHE ROW)
   ========================================================================== */
html[data-theme="glassmorphism"] #sendMovementModal .modal-close-btn,
html[data-theme="glassmorphism"] #sendMovementModal .modal-dark-card button[onclick*="sendMovementModal"],
#sendMovementModal .modal-close-btn {
  top: 6px !important;
  right: 12px !important;
  left: auto !important;
  transform: none !important;
  z-index: 30 !important;
}

html[data-theme="glassmorphism"] #sendMovementModal .modal-close-btn:hover,
#sendMovementModal .modal-close-btn:hover {
  transform: none !important;
}

html[data-theme="glassmorphism"] #sendMovementModal .modal-info-btn,
html[data-theme="glassmorphism"] #sendMovementModal button.modal-info-btn,
#sendMovementModal .modal-info-btn {
  top: 8px !important;
  left: 12px !important;
  right: auto !important;
  transform: none !important;
  z-index: 30 !important;
}

html[data-theme="glassmorphism"] #sendMovementModal .modal-info-btn:hover,
#sendMovementModal .modal-info-btn:hover {
  transform: none !important;
}

@media (max-width: 768px) {
  html[data-theme="glassmorphism"] #sendMovementModal .modal-close-btn,
  #sendMovementModal .modal-close-btn {
    top: 5px !important;
    right: 8px !important;
    transform: none !important;
  }

  html[data-theme="glassmorphism"] #sendMovementModal .modal-info-btn,
  #sendMovementModal .modal-info-btn {
    top: 7px !important;
    left: 8px !important;
    transform: none !important;
  }
}

/* ==========================================================================
   MOBILE HYBRID LANDSCAPE & PORTRAIT OVERRIDES FOR GLASSMORPHISM
   ========================================================================== */
html.mobile-portrait-mode[data-theme="glassmorphism"] .left-sidebar,
html.mobile-portrait-mode[data-theme="glassmorphism"] .right-sidebar,
html.mobile-portrait-mode[data-theme="glassmorphism"] .left-sidebar-toggle-btn,
html.mobile-portrait-mode[data-theme="glassmorphism"] .right-sidebar-toggle-btn,
html.mobile-portrait-mode[data-theme="glassmorphism"] .right-chat-tabs {
  display: none !important;
}

html.mobile-landscape-mode[data-theme="glassmorphism"] .left-sidebar-toggle-btn {
  left: 62px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

html.mobile-landscape-mode[data-theme="glassmorphism"] body.left-sidebar-is-collapsed .left-sidebar-toggle-btn,
html.mobile-landscape-mode[data-theme="glassmorphism"] .app-layout.left-sidebar-is-collapsed .left-sidebar-toggle-btn {
  left: 0px !important;
}

html.mobile-landscape-mode[data-theme="glassmorphism"] .right-sidebar-toggle-btn {
  right: 132px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

html.mobile-landscape-mode[data-theme="glassmorphism"] body.sidebar-is-collapsed .right-sidebar-toggle-btn,
html.mobile-landscape-mode[data-theme="glassmorphism"] .app-layout.sidebar-is-collapsed .right-sidebar-toggle-btn {
  right: 0px !important;
}