/* =====================================================================
   v103-premium-consistency.css  (claude-v103-1)
   Passe COMPLÈTE "tous les menus / tous les boutons" : dark + moderne +
   détaillé + cohérent. Chargée EN DERNIER (après v102-dark-premium.css).
   - Corrige 2 régressions de v102 (onglets de rang actifs invisibles,
     CTA "Se soigner" assombri).
   - Tout est INLINE dans le jeu -> !important + spécificité pour gagner.
   - 100% STATIQUE (box-shadow/border/gradient ; hover/press = transitions).
     Aucune animation -> compatible mode fluidité, rien à exempter.
   - Ne touche PAS les éléments déjà premium (.defi-luxe-btn, .mx-aui-mode,
     .psp-res-chip, .mxsl-*, #profile-distribute-btn, invp-btn-*).
   ===================================================================== */

/* =====================================================================
   0) FIX RÉGRESSIONS v102 — restaurer les états sémantiques que
   .nav-btn/.mode-btn/.buy-btn{...!important} avaient écrasés.
   ===================================================================== */
/* Onglets de RANG ACTIFS (Quêtes / Entraînement) : le JS pose un dégradé
   inline (contient "gradient") -> re-forcer un actif OR/AMBRE premium et
   VISIBLE (spécificité > .nav-btn, même importance). */
#quest-rank-buttons button[style*="gradient"],
#quest-rank-progress button[style*="gradient"],
[id^="train-tab-"][style*="gradient"],
#mx-train-cats button[style*="gradient"] {
  background: linear-gradient(150deg, rgba(255,196,74,0.95), rgba(198,110,20,0.96)) !important;
  color: #1c1004 !important;
  border: 1px solid rgba(255,220,140,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 15px rgba(255,190,70,0.45), 0 4px 12px rgba(0,0,0,0.5) !important;
  text-shadow: none !important;
}
/* CTA "Se soigner" (rose) : v102 .mode-btn l'avait rendu sombre -> restaurer. */
#heal-screen button[onclick*="fullHealWithDialogue"] {
  background: linear-gradient(150deg, #ff6b9d, #c4456a) !important;
  color: #2a0713 !important;
}

/* =====================================================================
   1) SURFACE DARK PREMIUM — recette structure (boutons/cartes plats).
   Dégradé profond + liseré haut lumineux + bord fin + ombre + hover lift.
   ===================================================================== */

/* --- 1a. Bouton ACCUEIL / retour + onglets INACTIFS (nav-btn sans dégradé
   inline). Plus dark, moderne, détaillé. --- */
.nav-btn:not([style*="gradient"]):not([style*="rgb("]) {
  background: linear-gradient(165deg, rgba(24,16,34,0.94), rgba(10,7,17,0.96)) !important;
  border: 1px solid rgba(255,215,140,0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 3px 12px rgba(0,0,0,0.5) !important;
  border-radius: 12px !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
.nav-btn:not([style*="gradient"]):not([style*="rgb("]):hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,215,140,0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 7px 18px rgba(0,0,0,0.6), 0 0 14px rgba(255,190,70,0.16) !important;
}
.nav-btn:not([style*="gradient"]):active { transform: translateY(0) scale(.985) !important; }

/* --- 1b. Boutons/cartes de structure plats énumérés par l'audit --- */
#welcome-screen button[onclick*="showScreen('inventory')"],
#welcome-screen button[onclick*="showSettingsModal"],
#home-market-accordion > button,
#home-multi-accordion > button,
#market-sub button, #multi-sub button,
#profile-title, #mx-titles-entry-btn, #mx-ach-entry-btn,
#stat-points-section button[onclick*="confirmResetStats"],
#dungeon-mode-banner,
#mx-citadel header button:last-of-type,
#mx-citadel button[onclick*="showScreen('dungeons')"],
#pvp2-menu-modal button[onclick*="remove()"],
#pvp2-menu-modal button[onclick*="MX_pvp2_showHistory"],
#pvp2-menu-modal label[for="pvp2-nostats"],
#coopb-nostats-label, #coopb-menu label,
#saga-grid button[onclick*="showSagaLootInfo"],
#inventory-grid .invp-card button[aria-label="Infos"],
#friends-content button[onclick*="_currentTab="],
#chat-content button[onclick*="switchChannel"],
#chat-content button[onclick*="_currentChannel"],
#friends-content button[onclick*="openPrivateChat"],
#chat-content button[onclick*="openPrivateChat"] {
  background: linear-gradient(160deg, rgba(22,15,32,0.92), rgba(9,6,16,0.95)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.5) !important;
  border-radius: 11px !important;
  color: #ece3f2 !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease !important;
}
#welcome-screen button[onclick*="showScreen('inventory')"]:hover,
#welcome-screen button[onclick*="showSettingsModal"]:hover,
#home-market-accordion > button:hover,
#home-multi-accordion > button:hover,
#market-sub button:hover, #multi-sub button:hover,
#profile-title:hover, #mx-titles-entry-btn:hover, #mx-ach-entry-btn:hover,
#dungeon-mode-banner:hover,
#friends-content button[onclick*="_currentTab="]:hover,
#chat-content button[onclick*="switchChannel"]:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,205,120,0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 20px rgba(0,0,0,0.6), 0 0 14px rgba(255,190,70,0.15) !important;
}
/* accents sémantiques conservés en liseré (pas en aplat) */
#stat-points-section button[onclick*="confirmResetStats"] { border-color: rgba(255,90,90,0.4) !important; color:#ffb0b0 !important; }
#profile-title, #mx-titles-entry-btn, #mx-ach-entry-btn { border-color: rgba(255,205,110,0.34) !important; color:#ffe6b0 !important; }

/* =====================================================================
   2) BOUTONS FERMER (✕) — unifiés : rond dark, halo rouge au survol.
   ===================================================================== */
#settings-modal button[onclick*="remove()"],
#pvp2-menu-modal button[onclick*="remove()"],
#coopb-menu button[onclick*="remove()"],
#mx-mailbox-modal .mb-close,
#gift-modal button[onclick*="remove"],
#mx-citadel header button:last-of-type,
.mx-modal-close, .modal-close {
  background: radial-gradient(circle at 50% 38%, rgba(44,22,28,0.94), rgba(14,8,12,0.96)) !important;
  border: 1px solid rgba(255,110,110,0.30) !important;
  color: #ff9d9d !important;
  border-radius: 50% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 10px rgba(0,0,0,0.55) !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}
#settings-modal button[onclick*="remove()"]:hover,
#pvp2-menu-modal button[onclick*="remove()"]:hover,
#coopb-menu button[onclick*="remove()"]:hover,
#mx-mailbox-modal .mb-close:hover,
.mx-modal-close:hover, .modal-close:hover {
  transform: scale(1.08) !important;
  background: radial-gradient(circle at 50% 38%, rgba(200,50,60,0.92), rgba(60,14,20,0.95)) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(255,70,80,0.5), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* =====================================================================
   3) CTA ACCENT (dégradés inline) — GARDER la couleur, AJOUTER le relief
   premium (liseré interne + ombre + bord + arrondi + hover/press).
   ===================================================================== */
.screen button[style*="linear-gradient"]:not(.nav-btn):not(.defi-luxe-btn):not(.mxsl-cta):not(#profile-distribute-btn):not([id^="train-tab-"]),
#glad-modal button[style*="linear-gradient"],
#mx-mailbox-modal .mb-accept, #mx-mailbox-modal .mb-decline,
#gift-modal button[style*="linear-gradient"],
#mx-guild-tabbody button[onclick*="MX_go_contribute"],
#mx-go-boosts button[onclick*="MX_go_upgradeBoost"],
#mx-go-shop button[onclick*="MX_go_buyShopItem"],
#dungeon-energy-bar button[onclick*="rechargerEnergieDonjon"],
#healer-potions-shop button[onclick^="buyPotionFromHealer"],
#market-screen button[onclick^="buyEquipDailyItem"],
.hdv2-tool-btn,
#mx-saga-diff button[data-lv],
#mx-globalchat-send, #chat-input + button,
#friend-search-results button[onclick*="sendRequest"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -2px 7px rgba(0,0,0,0.28), 0 6px 18px rgba(0,0,0,0.45) !important;
  border: 1px solid rgba(0,0,0,0.22) !important;
  border-radius: 11px !important;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
}
.screen button[style*="linear-gradient"]:not(.nav-btn):not(.defi-luxe-btn):hover,
.hdv2-tool-btn:hover, .mb-accept:hover, .mb-decline:hover,
#mx-globalchat-send:hover, #mx-saga-diff button[data-lv]:hover,
#mx-guild-tabbody button[onclick*="MX_go_contribute"]:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) saturate(1.05) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 9px 22px rgba(0,0,0,0.5) !important;
}
.screen button[style*="linear-gradient"]:not(.nav-btn):active,
.hdv2-tool-btn:active, .mb-accept:active, .mb-decline:active { transform: translateY(0) scale(.97) !important; }
/* refuser (mailbox/decline) reste rouge mais premium */
#mx-mailbox-modal .mb-decline { border-color: rgba(255,90,90,0.4) !important; }

/* =====================================================================
   4) CARTES DE MENU — dégradé dark + bord accent conservé + relief + lift.
   (saga, chapitre, quête, potion, palier, marché guilde, palier pass,
    ami, conversation, carte de mode marché/gemmes/coffre.)
   ===================================================================== */
#saga-grid > div,
#mx-citadel button[onclick*="MX_startChapter"], #mx-citadel button[onclick*="MX_showPackGate"],
#quest-list > div,
#healer-potions-shop > div,
#training-tiers > div,
#mx-go-shop [style*="grid-template-columns"] > div,
#mx-go-boosts > div[style*="border-radius"],
#battlepass-content div[onclick^="claimBattlePassReward"],
#friends-content [onclick*="MX_friend"], #friends-content > div > div[style*="border"],
#market-screen .grid-3 > div,
div[onclick^="buyGemItem"],
#joker-screen [onclick*="showChestPopup"], #joker-chests > div {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 20px rgba(0,0,0,0.5) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
#saga-grid > div:hover,
#mx-citadel button[onclick*="MX_startChapter"]:hover,
#quest-list > div:hover,
#training-tiers > div:hover,
#battlepass-content div[onclick^="claimBattlePassReward"]:hover,
#market-screen .grid-3 > div:hover,
div[onclick^="buyGemItem"]:hover,
#joker-chests > div:hover {
  transform: translateY(-3px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 30px rgba(0,0,0,0.6), 0 0 18px rgba(255,190,70,0.14) !important;
  filter: brightness(1.04) !important;
}

/* =====================================================================
   5) POPUP COMPTEUR (sélection du nombre de répétitions) — dark-fantasy.
   ===================================================================== */
#counter-section { background: radial-gradient(ellipse at 50% 40%, rgba(8,6,18,0.86), rgba(2,2,7,0.92)) !important; }
.counter-modal-card {
  background: linear-gradient(150deg, rgba(26,18,40,0.98), rgba(10,7,20,0.99)) !important;
  border: 1px solid rgba(255,205,110,0.42) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 50px rgba(255,180,60,0.18), 0 20px 60px rgba(0,0,0,0.7) !important;
}
.counter-btn {
  background: linear-gradient(150deg, #ffdf7a, #f0a52a) !important;
  color: #1c1002 !important;
  border: 1px solid rgba(120,70,0,0.5) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -3px 8px rgba(120,70,0,0.4), 0 8px 24px rgba(255,180,40,0.35) !important;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
}
.counter-btn:hover { transform: translateY(-2px) !important; filter: brightness(1.06) !important; box-shadow: inset 0 2px 0 rgba(255,255,255,0.55), 0 12px 30px rgba(255,180,40,0.5) !important; }
.counter-btn:active { transform: translateY(0) scale(.95) !important; }

/* =====================================================================
   6) POPUP CHOIX DU MODE (#mx-modes-popup) — cartes de mode premium.
   ===================================================================== */
#mx-modes-popup .card {
  background: linear-gradient(150deg, #171126, #07050f) !important;
  border: 1px solid rgba(255,205,110,0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 64px rgba(0,0,0,0.75), 0 0 40px rgba(120,80,220,0.14) !important;
}
#mx-modes-popup .mode-item {
  background: linear-gradient(155deg, rgba(30,20,48,0.9), rgba(12,8,22,0.95)) !important;
  border: 1px solid rgba(140,110,220,0.32) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.5) !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
  cursor: pointer;
}
#mx-modes-popup .mode-item:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,205,110,0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 26px rgba(0,0,0,0.6), 0 0 18px rgba(255,190,70,0.2) !important;
}
#mx-modes-popup .mode-item .name { color: #ffe08a !important; text-shadow: 0 0 10px rgba(255,200,90,0.3) !important; }

/* =====================================================================
   7) INPUTS (recherche/chat) — dark premium + focus doré.
   ===================================================================== */
#friend-search-input, #chat-input, .mx-input, #settings-modal input[type="text"] {
  background: linear-gradient(160deg, rgba(16,11,24,0.9), rgba(8,5,14,0.94)) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 11px !important;
  color: #f0e8f6 !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
#friend-search-input:focus, #chat-input:focus, .mx-input:focus {
  outline: none !important;
  border-color: rgba(255,205,110,0.55) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.45), 0 0 0 2px rgba(255,190,70,0.25), 0 0 14px rgba(255,190,70,0.2) !important;
}

/* =====================================================================
   8) FAB flottants — relief premium cohérent (garde leur couleur/icône).
   ===================================================================== */
#mx-mute-fab, #fitness-fab-btn, #mx-event-fab, #mx-dq-fab,
#mx-friends-icon, #mx-globalchat-icon, #mx-mailbox-icon {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 16px rgba(0,0,0,0.6), 0 0 16px rgba(255,180,60,0.12) !important;
  border: 1px solid rgba(255,215,140,0.22) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
#mx-mute-fab:hover, #fitness-fab-btn:hover, #mx-event-fab:hover, #mx-dq-fab:hover,
#mx-friends-icon:hover, #mx-globalchat-icon:hover, #mx-mailbox-icon:hover {
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.65), 0 0 20px rgba(255,190,70,0.28) !important;
}

/* =====================================================================
   9) SLOTS D'ÉQUIPEMENT VIDES + tuiles info — un cran plus premium.
   ===================================================================== */
#inventory-grid .invp-slot-empty {
  background: linear-gradient(160deg, rgba(14,10,22,0.7), rgba(7,5,13,0.75)) !important;
  border: 1px dashed rgba(255,205,120,0.18) !important;
  box-shadow: inset 0 0 16px rgba(0,0,0,0.4) !important;
}
#pvp2-menu-modal > div > div[style*="grid-template-columns:repeat(2,1fr)"] > div {
  background: linear-gradient(160deg, rgba(20,14,30,0.7), rgba(9,6,16,0.8)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 3px 10px rgba(0,0,0,0.45) !important;
}