/* ============================================================
   v99-button-polish.css  (claude-btnpolish-1)  [2026-06-22]
   ------------------------------------------------------------
   Demande user : « améliore tous les SVG/boutons, guilde, etc. —
   plus fluides, plus propres, plus beaux, dans TOUS les onglets ».
   Couche de POLISH GLOBALE, ADDITIVE et SÛRE :
   - n'écrase PAS les couleurs/dégradés inline existants (transition/:hover/:active
     ne sont jamais en inline → s'appliquent partout sans conflit).
   - transitions GPU (transform/filter) courtes = fluide ; press tactile.
   - SVG plus nets. Coins/anneaux de focus propres.
   - respecte prefers-reduced-motion ET le mode fluidité (transform/filter only).
   Chargée EN DERNIER.
   ============================================================ */

/* ---------- 1) TRANSITIONS + FEEDBACK universels sur les boutons ---------- */
button,
.nav-btn, .mode-btn, .buy-btn, .action-btn, .tab-btn, .btn, .btn-3d,
.btn-gold, .btn-purple, .btn-orange,
[role="button"], .mx-btn, .pill, .lang-btn {
  transition: transform .15s cubic-bezier(.2,.8,.3,1),
              filter .15s ease,
              box-shadow .18s ease,
              border-color .18s ease,
              background-color .18s ease !important;
  -webkit-tap-highlight-color: transparent;
  /* [PERF 2026-06-23] will-change PERMANENT retiré : appliqué à ~209 boutons,
     il créait autant de couches GPU permanentes (le "will-change budget" que
     Firefox warne — même leçon que css/v98-polish.css). Les transitions
     transform/filter sont composées par le GPU sans cet indice. Zéro perte
     visuelle/fonctionnelle, ~209 couches en moins → fluidité globale. */
}

/* survol : léger soulèvement + éclat (compositor-only → fluide) */
button:hover:not(:disabled):not([disabled]),
.nav-btn:hover, .mode-btn:hover, .buy-btn:hover, .action-btn:hover,
.tab-btn:hover, .btn:hover, [role="button"]:hover, .mx-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.09) saturate(1.05);
}

/* appui : enfoncement net (sensation tactile propre) */
button:active:not(:disabled):not([disabled]),
.nav-btn:active, .mode-btn:active, .buy-btn:active, .action-btn:active,
.tab-btn:active, .btn:active, [role="button"]:active, .mx-btn:active {
  transform: translateY(0) scale(.96);
  filter: brightness(1.02);
}

/* boutons désactivés : aucun effet (propre) */
button:disabled, button[disabled], .btn:disabled, .mx-btn:disabled {
  filter: grayscale(.35) opacity(.6) !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* focus clavier : anneau discret au lieu de l'outline navigateur moche */
button:focus-visible, .nav-btn:focus-visible, [role="button"]:focus-visible, .btn:focus-visible {
  outline: 2px solid rgba(255,215,128,.55) !important;
  outline-offset: 2px !important;
}
/* pas d'outline au clic souris */
button:focus:not(:focus-visible) { outline: none !important; }

/* ---------- 2) SVG plus nets / vivants dans les boutons ---------- */
button svg, .nav-btn svg, [role="button"] svg, .mx-btn svg, .action-btn svg {
  transition: transform .15s cubic-bezier(.2,.8,.3,1), filter .15s ease;
  shape-rendering: geometricPrecision;
  vector-effect: non-scaling-stroke;
}
button:hover svg, .nav-btn:hover svg, [role="button"]:hover svg, .mx-btn:hover svg {
  transform: scale(1.08);
}

/* icônes images dans les boutons : rendu plus propre + petit pop au survol */
button img.mx-ex-icon, .exercise-btn img, .pvp2-ex-btn img, .coopb-ex img,
button > img[alt], .mx-set-action img {
  transition: transform .15s ease, filter .15s ease;
  image-rendering: auto;
}
.exercise-btn:hover img, .pvp2-ex-btn:hover img, .coopb-ex:hover img { transform: scale(1.06); }

/* ---------- 3) (retiré : pas de border-radius global — risquerait de carrer
   des boutons ronds stylés par classe. Les radius existants sont conservés.) ---------- */

/* ---------- 4) BARRES D'ONGLETS (nav, market, guild, etc.) ---------- */
/* onglet actif/hover plus lisibles, transition douce */
.tab-btn, .mx-tab, [class*="-tab"]:not([class*="-table"]) {
  transition: background-color .18s ease, color .18s ease, transform .15s ease, box-shadow .18s ease !important;
}

/* ---------- 5) GUILDE : onglets + lignes + boutons plus propres ---------- */
#guild-screen .mx-guild-tabs button,
#guild-screen .mx-guild-tabs .mx-gtab,
#guild-screen [class*="tab"] button {
  transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
  border-radius: 11px !important;
}
#guild-screen .mx-guild-tabs button:hover,
#guild-screen [class*="tab"] button:hover { transform: translateY(-1px); filter: brightness(1.1); }

/* lignes de membres / cartes de guilde : léger lift au survol */
#guild-screen [class*="member"], #guild-screen [class*="mx-gp-"], #guild-screen .mx-guild-card,
#guild-screen [data-mx-avatar-uid] {
  transition: transform .15s ease, box-shadow .18s ease, background-color .18s ease;
}
#guild-screen [class*="member"]:hover { transform: translateX(2px); }

/* boutons d'action de guilde (contribuer, booster, acheter, inviter…) */
#guild-screen button:hover:not(:disabled) { box-shadow: 0 5px 16px rgba(0,0,0,.35); }

/* ---------- 6) CARTES CLIQUABLES (boutique, packs, modes) — survol fluide ---------- */
.equip-slot, .gem-pack, .mode-card, .mx-aui-mode, .mx-mode-card,
#market-screen .grid-3 > div[onclick], #gemshop-screen [onclick] {
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease !important;
}
.equip-slot:hover, .gem-pack:hover, .mode-card:hover, .mx-aui-mode:hover,
#market-screen .grid-3 > div[onclick]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}

/* ---------- 7) Boutons de fermeture ✕ : pas de soulèvement (restent en place) ---------- */
button[onclick*="remove()"]:hover, .mx-close:hover, [class*="close"]:hover {
  transform: scale(1.12) !important;
}

/* ---------- 8) Respect du mode réduit / fluidité ---------- */
@media (prefers-reduced-motion: reduce) {
  button, .nav-btn, .btn, [role="button"], button svg { transition: none !important; }
  button:hover, .nav-btn:hover, .btn:hover, [role="button"]:hover { transform: none !important; }
}