/* ============================================================
   v98-polish.css  — Couche de polish graphique global
   ------------------------------------------------------------
   Additive et non-destructive : raffine les éléments COMMUNS à
   tous les écrans (accueil, combat, boutique/HDV, donjons) sans
   toucher au JS. Chargée en DERNIER pour surcharger proprement.
   Palette : cyan #81ecff · violet #c97cff · or #ffd700 · rouge #ff6b6b
   ============================================================ */

/* ---- Rendu typographique global plus net ---- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- Scrollbars fines et cohérentes ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(129,236,255,0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(129,236,255,0.45), rgba(201,124,255,0.45));
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(129,236,255,0.7), rgba(201,124,255,0.7)); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Boutons de navigation : léger dégradé + reflet ---- */
.nav-btn, .mode-btn, .buy-btn {
  background: linear-gradient(160deg, rgba(26,16,38,0.82), rgba(12,8,20,0.82)) !important;
  position: relative;
  overflow: hidden;
}
/* reflet diagonal qui balaye au survol */
.nav-btn::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.nav-btn:hover::after { left: 130%; }

/* ---- Titres de section : un peu plus présents ---- */
.section-luxe-title {
  letter-spacing: 0.01em;
}
.section-luxe-header {
  position: relative;
}

/* ---- Cartes de stats : bord lumineux subtil au survol ---- */
.stat-card-2026, .stat-card {
  transition: transform 0.25s cubic-bezier(0.23,1,0.32,1), box-shadow 0.25s, border-color 0.25s !important;
}
.stat-card-2026:hover, .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.45), 0 0 18px rgba(129,236,255,0.12) !important;
}

/* ---- Cartes du marché / HDV : hover plus net ---- */
#hdv2-screen .hdv2-card, .market-card, .mx-shop-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
#hdv2-screen .hdv2-card:hover, .market-card:hover, .mx-shop-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 22px rgba(255,215,74,0.12) !important;
}

/* ---- Zones de la carte du monde (accueil) : profondeur ---- */
.map-zone-wrap .map-tip {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  border-radius: 12px;
}

/* ---- Barres de progression : reflet brillant ---- */
.psp-xp-bar-fill, #profile-xp-bar {
  position: relative;
  overflow: hidden;
}
.psp-xp-bar-fill::after, #profile-xp-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: mxBarSheen 2.6s ease-in-out infinite;
}
@keyframes mxBarSheen { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

/* ---- Boutons d'action génériques : transition douce ---- */
.action-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.action-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.action-btn:active { transform: scale(0.97); }

/* ---- Modales : ombre portée plus douce et profonde ---- */
[id$="-modal"] > div, .mx-set-card, .result-card {
  box-shadow: 0 24px 70px rgba(0,0,0,0.6) !important;
}

/* [PERF] will-change permanent RETIRÉ : appliqué à trop d'éléments, il
   saturait le budget mémoire GPU de Firefox (warning "will-change budget").
   Les transitions suffisent ; will-change seulement au survol si besoin. */

/* ============================================================
   V2 — COMBAT / ARÈNE
   ============================================================ */

/* Boutons d'exercice : relief, dégradé subtil, feedback de clic net */
#exercise-buttons .exercise-btn {
  border-radius: 14px !important;
  background: linear-gradient(160deg, rgba(30,20,44,0.92), rgba(14,9,22,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: transform 0.14s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
#exercise-buttons .exercise-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: rgba(129,236,255,0.4) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 18px rgba(129,236,255,0.18) !important;
}
#exercise-buttons .exercise-btn:active:not(:disabled) { transform: scale(0.95) !important; }

/* Monstre : flottement doux + ombre portée au sol */
.monster-sprite, #monster-sprite, #combat-monster-avatar {
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.55));
  animation: mxMonsterFloat 3.4s ease-in-out infinite;
}
@keyframes mxMonsterFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Barres de vie : transition fluide quand les PV changent */
#combat-monster-hp-bar, #combat-player-hp-bar, #monster-health-bar, .hp-bar-fill {
  transition: width 0.4s cubic-bezier(0.23,1,0.32,1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

/* Arène : vignette douce (inset box-shadow → jamais par-dessus le contenu,
   aucun risque de z-index avec les FX de combat) */
.battle-arena {
  box-shadow: inset 0 0 120px 40px rgba(0,0,0,0.32);
  border-radius: 16px;
}

/* ============================================================
   V2 — ACCUEIL : panneau de stats joueur plus premium
   ============================================================ */
.player-stats-panel {
  box-shadow: 0 10px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.psp-res-chip {
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.psp-res-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
}

/* ============================================================
   V2 — BOUTIQUE / HDV : onglets actifs plus lisibles
   ============================================================ */
.hdv2-tab.active, .mx-set-tab.active, .gem-tab.active {
  box-shadow: 0 0 16px rgba(129,236,255,0.18), inset 0 0 0 1px rgba(129,236,255,0.4) !important;
}

/* ============================================================
   V3 — ERGONOMIE GLOBALE (tactile + accessibilité)
   Additif, non destructif. Améliore le ressenti sur TOUS les écrans.
   ============================================================ */

/* 1) Tap rapide : supprime le délai de 300 ms + le double-tap zoom + le flash bleu */
button, a, [onclick], .nav-btn, .mode-btn, .action-btn, .buy-btn,
.exercise-btn, .hdv2-tab, .mx-set-tab, input[type="button"], input[type="submit"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* 2) Pas de sélection de texte accidentelle en tapant vite sur l'UI */
button, .nav-btn, .mode-btn, .action-btn, .buy-btn, .exercise-btn,
.hdv2-tab, .mx-set-tab, .section-luxe-title, .coopb-ex {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}

/* 3) Champs de saisie : >=16px → empêche le ZOOM AUTO iOS au focus */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select, textarea {
  font-size: max(16px, 1em);
}

/* 4) Scroll fluide à inertie sur mobile + ancrage de scroll stable */
.screen, [id$="-modal"], [id$="-screen"], .mx-scroll, #hdv2-screen,
#coopb-screen, #profile-screen {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
html { scroll-behavior: smooth; }

/* 5) Retour de clic UNIVERSEL : tout bouton "s'enfonce" légèrement */
button:active:not(:disabled), .nav-btn:active, .mode-btn:active,
.action-btn:active, .buy-btn:active, [onclick]:active {
  transform: scale(0.97);
  transition: transform 0.06s ease;
}

/* 6) État désactivé COHÉRENT partout (sans !important → le JS peut surcharger) */
button:disabled, .disabled, [aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* 7) Cibles tactiles confortables pour les boutons principaux (>=44px recommandé) */
.nav-btn, .mode-btn, .action-btn, .exercise-btn, .buy-btn, .defi-luxe-btn {
  min-height: 44px;
}

/* 8) Accessibilité clavier : focus visible discret mais net */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, [onclick]:focus-visible {
  outline: 2px solid rgba(129,236,255,0.7);
  outline-offset: 2px;
}
/* mais pas d'anneau disgracieux au clic souris */
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* 9) Noms/textes longs : pas de débordement qui casse la mise en page */
.coopb-name, .friend-name, .mx-name, .player-name, .section-luxe-title {
  overflow-wrap: anywhere; word-break: break-word;
}

/* 10) Respiration sur encoches/barres système (téléphones modernes) */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* 11) Curseur pointer cohérent sur tout ce qui est cliquable */
[onclick], .nav-btn, .mode-btn, .action-btn, .buy-btn, .hdv2-tab, .mx-set-tab { cursor: pointer; }

/* 12) Images cassées : évite l'icône "image brisée" laide → transparent propre */
img { -webkit-user-drag: none; }

/* ---- Respecte la préférence "réduire les animations" ---- */
@media (prefers-reduced-motion: reduce) {
  .nav-btn::after, .psp-xp-bar-fill::after, #profile-xp-bar::after,
  .monster-sprite, #monster-sprite, #combat-monster-avatar { animation: none !important; }
  html { scroll-behavior: auto; }
}