/* ============================================================
   [INV-PROFILE 2026-06-12] (claude-invprof-1)
   Refonte visuelle AAA dark fantasy des écrans :
   - #inventory-screen  (cartes d'items par rareté, slots équipés, grille)
   - #profile-screen    (panneau héro, badge niveau, tuiles stats, barres)

   PRINCIPE : zéro changement de markup côté renderers.
   Les classes invp-* / pf-* sont posées par js/v99-inventory-profile.js
   (MutationObserver idempotent, n'ajoute QUE des classes + 1 badge).
   Les renderers écrivent des styles INLINE → beaucoup de !important
   ici sont VOLONTAIRES (sinon l'inline gagne).
   Aucune animation infinie (compatible MODE FLUIDITÉ).
   ============================================================ */

/* ─────────────────────────────────────────────
   PALETTE RARETÉ (variables posées par classe)
   appliquée aux cartes du sac ET aux slots équipés
   ───────────────────────────────────────────── */
.invp-r-common    { --rar:#9aa3b8; --rarSoft:rgba(154,163,184,0.13); --rarGlow:rgba(154,163,184,0.18); }
.invp-r-uncommon  { --rar:#4ecdc4; --rarSoft:rgba(78,205,196,0.13);  --rarGlow:rgba(78,205,196,0.26);  }
.invp-r-rare      { --rar:#4aa8ff; --rarSoft:rgba(74,168,255,0.14);  --rarGlow:rgba(74,168,255,0.30);  }
.invp-r-epic      { --rar:#c97cff; --rarSoft:rgba(201,124,255,0.15); --rarGlow:rgba(201,124,255,0.34); }
.invp-r-legendary { --rar:#ffd700; --rarSoft:rgba(255,215,0,0.14);   --rarGlow:rgba(255,215,0,0.38);   }
.invp-r-mythic    { --rar:#ff5ad0; --rarSoft:rgba(255,90,208,0.15);  --rarGlow:rgba(255,90,208,0.40);  }

/* ─────────────────────────────────────────────
   INVENTAIRE — grille responsive
   ───────────────────────────────────────────── */
/* [PERF/POLISH 2026-06-30] base 120px (au lieu de 150) → 3 colonnes nettes dès ~390px ;
   le palier 375px couvre iPhone 6/7/8/XR (avant : rupture serrée à 361-374px). */
#inventory-grid.grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 10px !important;
}
@media (max-width: 375px) {
  #inventory-grid.grid-3 { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important; gap: 8px !important; }
}

/* ─────────────────────────────────────────────
   INVENTAIRE — cartes d'items du sac
   (div générés par renderInventory, styles inline)
   ───────────────────────────────────────────── */
#inventory-grid .invp-card {
  display: flex;
  flex-direction: column;
  padding: 13px 11px 11px !important;
  border: 1px solid var(--rar) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(130% 70% at 50% 0%, var(--rarSoft) 0%, transparent 58%),
    linear-gradient(168deg, #141a2e 0%, #0b0e1a 55%, #07090f 100%) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),
    0 0 14px var(--rarGlow),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
/* filet lumineux haut, couleur de rareté */
#inventory-grid .invp-card::before {
  content: '';
  position: absolute;
  left: 10%; right: 10%; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rar), transparent);
  opacity: 0.85;
  pointer-events: none;
}
@media (hover: hover) {
  #inventory-grid .invp-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 16px 30px rgba(0,0,0,0.55),
      0 0 22px var(--rarGlow),
      inset 0 1px 0 rgba(255,255,255,0.07) !important;
  }
}
/* le légendaire (et mythique) respire un peu plus fort */
#inventory-grid .invp-card.invp-r-legendary,
#inventory-grid .invp-card.invp-r-mythic {
  box-shadow:
    0 10px 24px rgba(0,0,0,0.45),
    0 0 20px var(--rarGlow),
    0 0 46px var(--rarSoft),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Zone icône : socle radial subtil + image entière (contain) */
#inventory-grid .invp-card .invp-ico {
  min-height: 112px;
  margin-bottom: 10px !important;
  border-radius: 10px;
  background: radial-gradient(62% 62% at 50% 48%, var(--rarSoft), transparent 72%);
}
/* cadre généré par getItemIconHTML : raccordé à la rareté de la carte */
#inventory-grid .invp-card .invp-ico > div {
  border-color: var(--rar) !important;
  border-radius: 12px !important;
  background: radial-gradient(85% 85% at 50% 32%, rgba(255,255,255,0.05), rgba(5,7,14,0.72)) !important;
  box-shadow: 0 0 12px var(--rarGlow), inset 0 0 16px rgba(0,0,0,0.55) !important;
}
/* image de l'item : entière, jamais croppée (on exclut les PNG de cadre) */
#inventory-grid .invp-ico img:not([src*="cadre_tier"]):not([src*="cradre_tier"]) {
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}

/* Nom de l'item */
#inventory-grid .invp-card .invp-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1em !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #f1ecdf !important;
  margin-bottom: 6px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Pilule de rareté */
#inventory-grid .invp-card .invp-rlabel {
  display: inline-block;
  padding: 2px 10px;
  margin-bottom: 6px !important;
  border-radius: 999px;
  border: 1px solid var(--rar);
  background: var(--rarSoft);
  color: var(--rar) !important;
  font-size: 0.62em !important;
  letter-spacing: 0.14em !important;
}

/* Ligne slot */
#inventory-grid .invp-card .invp-slotline {
  font-size: 0.66em !important;
  color: #8b93a8 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 5px !important;
}

/* Ligne bonus DGT/PV */
#inventory-grid .invp-card .invp-stats {
  font-size: 0.8em !important;
  font-weight: 600;
  color: #7fe3da !important;
}

/* Pilule niveau requis (verte ok / rouge si verrouillé — couleur texte inline conservée) */
#inventory-grid .invp-card .invp-lvl {
  display: inline-block;
  padding: 2px 10px;
  margin-top: 7px !important;
  border-radius: 999px;
  font-size: 0.66em !important;
  letter-spacing: 0.06em;
  background: rgba(122,219,138,0.10);
  border: 1px solid rgba(122,219,138,0.35);
}
#inventory-grid .invp-card.invp-locked .invp-lvl {
  background: rgba(255,128,144,0.10);
  border-color: rgba(255,128,144,0.42);
}
/* carte verrouillée : image légèrement éteinte */
#inventory-grid .invp-card.invp-locked .invp-ico { opacity: 0.78; }

/* Boutons ÉQUIPER / VENDRE : empilés, pleine largeur, alignés en bas */
#inventory-grid .invp-card .invp-btns {
  flex-direction: column !important;
  gap: 7px !important;
  margin-top: auto !important;
  padding-top: 11px;
}
#inventory-grid .invp-card .invp-btns button {
  width: 100%;
  border-radius: 10px !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78em !important;
  padding: 10px 8px !important;
}
#inventory-grid .invp-card .invp-btn-equip {
  background: linear-gradient(135deg, #5fe0d2, #2fa89b) !important;
  color: #04231e !important;
  box-shadow: 0 3px 12px rgba(78,205,196,0.25);
}
#inventory-grid .invp-card .invp-btn-equip.invp-btn-locked {
  background: linear-gradient(135deg, #3a3f52, #262a38) !important;
  color: #ffaeb8 !important;
  box-shadow: none;
}
#inventory-grid .invp-card .invp-btn-sell {
  background: linear-gradient(135deg, rgba(255,107,107,0.13), rgba(160,40,50,0.22)) !important;
  border: 1px solid rgba(255,107,107,0.45) !important;
  color: #ff9d9d !important;
}
#inventory-grid .invp-card .invp-btns button:active { transform: scale(0.97); }

/* ─────────────────────────────────────────────
   INVENTAIRE — section "Équipements Équipés" + slots
   ───────────────────────────────────────────── */
.invp-eq-section > h3,
.invp-separator h3 {
  font-family: 'Cinzel', serif !important;
  font-size: 0.95em !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255,215,0,0.22);
}
.invp-separator { border-top: 1px solid rgba(129,236,255,0.14) !important; }
.invp-separator h3 { text-shadow: 0 0 14px rgba(78,205,196,0.25); }

.invp-eq-grid { gap: 10px !important; }

#inventory-grid .invp-slot {
  border-radius: 12px !important;
  border-width: 1px !important;
  padding: 11px 8px !important;
}
#inventory-grid .invp-slot:not(.invp-slot-empty) {
  border-color: var(--rar) !important;
  background:
    radial-gradient(120% 65% at 50% 0%, var(--rarSoft) 0%, transparent 60%),
    linear-gradient(165deg, #12162a, #0a0c16) !important;
  box-shadow: 0 0 10px var(--rarGlow), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
#inventory-grid .invp-slot-empty {
  border: 1px dashed rgba(255,255,255,0.10) !important;
  background: rgba(15,17,28,0.55) !important;
  box-shadow: none !important;
}
#inventory-grid .invp-slot > div:first-child {
  font-size: 0.62em !important;
  color: #8b93a8 !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 5px !important;
}
#inventory-grid .invp-slot .invp-btn-remove {
  background: rgba(255,107,107,0.12) !important;
  border: 1px solid rgba(255,107,107,0.4) !important;
  color: #ff9d9d !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Message inventaire vide */
#inventory-grid .invp-empty {
  border: 1px dashed rgba(255,255,255,0.12) !important;
  border-radius: 14px;
  background: rgba(14,16,26,0.5);
  color: #7a8093 !important;
}

/* ─────────────────────────────────────────────
   INVENTAIRE — bandeau de stats (Bonus Dgt / PV / Or)
   ───────────────────────────────────────────── */
#inventory-screen .player-stats { gap: 10px; }
#inventory-screen .player-stats .stat-card {
  padding: 12px 10px;
  border-radius: 14px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.03), transparent 55%),
    linear-gradient(160deg, #12152a, #0a0c16);
  border: 1px solid rgba(255,255,255,0.07);
}
#inv-damage-bonus { color: #ffb454 !important; text-shadow: 0 0 12px rgba(255,180,84,0.35) !important; }
#inv-hp-bonus     { color: #ff8a8a !important; text-shadow: 0 0 12px rgba(255,138,138,0.35) !important; }
#inv-gold         { color: #ffd700 !important; text-shadow: 0 0 12px rgba(255,215,0,0.35) !important; }

/* Nav en pilules (inventaire + profil) */
#inventory-screen .nav-buttons .nav-btn,
#profile-screen .nav-buttons .nav-btn { border-radius: 999px !important; }

/* ─────────────────────────────────────────────
   PROFIL — panneau héro (avatar + nom + niveau)
   ───────────────────────────────────────────── */
#profile-screen .pf-hero {
  padding: 18px 16px;
  border-radius: 16px;
  background:
    radial-gradient(95% 130% at 10% 0%, rgba(129,236,255,0.10), transparent 55%),
    radial-gradient(70% 110% at 95% 100%, rgba(201,124,255,0.07), transparent 60%),
    linear-gradient(160deg, #10142a 0%, #0a0c16 70%);
  border: 1px solid rgba(129,236,255,0.18);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
#profile-avatar-frame {
  border-radius: 14px !important;
  border-width: 2px !important;
  box-shadow:
    0 0 0 1px rgba(129,236,255,0.22),
    0 0 24px rgba(129,236,255,0.30),
    0 8px 22px rgba(0,0,0,0.5);
}
#profile-avatar-display { border-radius: 10px !important; }
#profile-avatar-outer   { border-radius: 18px !important; }

#profile-name {
  font-family: 'Cinzel', serif !important;
  font-weight: 900 !important;
  font-size: 1.5em !important;
  letter-spacing: 0.03em !important;
  background: linear-gradient(180deg, #dffaff, #81ecff 55%, #3a93b8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
  filter: drop-shadow(0 0 10px rgba(129,236,255,0.22));
}

/* Badge niveau OR (élément injecté par v99-inventory-profile.js) */
#pf-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 14px 3px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe289, #d4a017 60%, #8a6510);
  color: #241a04;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(255,215,0,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* ════════════════════════════════════════════
   [2026-06-13] Pill RANG animé "style DANGEREUX" à côté du niveau.
   --rc = couleur du rang (posée en JS). Glow rouge danger pulsant.
   GPU-only (transform/opacity/box-shadow) → exempt mode fluidité.
   ════════════════════════════════════════════ */
#pf-rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  margin-left: 8px;
  padding: 4px 13px 3px;
  border-radius: 999px;
  --rc: #9aa3b8;
  background: linear-gradient(135deg, rgba(20,4,6,0.96), rgba(40,6,10,0.92));
  border: 1.5px solid var(--rc);
  color: var(--rc);
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 0.72em;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  text-shadow: 0 0 6px var(--rc), 0 0 2px rgba(255,40,40,0.6);
  box-shadow: 0 0 10px -1px var(--rc), 0 0 18px -4px rgba(255,30,30,0.55), inset 0 0 8px -3px var(--rc);
  animation: pfRankDanger 1.7s ease-in-out infinite;
}
#pf-rank-badge .pf-rk-ico { font-size: 1.05em; filter: drop-shadow(0 0 4px var(--rc)); }
#pf-rank-badge .pf-rk-txt { position: relative; z-index: 1; }
@keyframes pfRankDanger {
  0%, 100% { box-shadow: 0 0 9px -2px var(--rc), 0 0 14px -5px rgba(255,30,30,0.45), inset 0 0 7px -3px var(--rc); transform: translateZ(0) scale(1); }
  50%      { box-shadow: 0 0 16px 0 var(--rc), 0 0 26px -3px rgba(255,30,30,0.8), inset 0 0 11px -2px var(--rc); transform: translateZ(0) scale(1.045); }
}
/* Monarque = le plus intense : or + danger rouge + reflet qui balaie */
#pf-rank-badge.is-monarque {
  --rc: #ffd700;
  border-color: #ff3b1f;
  color: #ffe9a8;
  background: linear-gradient(135deg, rgba(34,4,2,0.97), rgba(60,10,2,0.94));
  text-shadow: 0 0 8px #ffd700, 0 0 4px #ff3b1f;
  animation: pfRankMonarch 1.35s ease-in-out infinite;
  overflow: hidden;
}
#pf-rank-badge.is-monarque::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,230,140,0.55) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: pfRankShine 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pfRankMonarch {
  0%, 100% { box-shadow: 0 0 14px -1px #ffd700, 0 0 22px -4px #ff3b1f, inset 0 0 10px -3px #ffd700; transform: translateZ(0) scale(1); }
  50%      { box-shadow: 0 0 24px 1px #ffd700, 0 0 38px -2px #ff3b1f, inset 0 0 15px -2px #ffae00; transform: translateZ(0) scale(1.06); }
}
@keyframes pfRankShine {
  0% { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%); }
}
/* [PERF 2026-06-15] En mode fluidité : on COUPE les pulses de box-shadow (pfRankDanger/pfRankMonarch
   = repaint chaque frame, pas GPU). Le badge reste coloré/stylé mais statique. On garde UNIQUEMENT
   le reflet doré Monarque (pfRankShine = transform, GPU, gratuit). */
body.mx-fluid #pf-rank-badge.is-monarque::after { animation: pfRankShine 2.4s ease-in-out infinite !important; }

/* Titre custom : pilule (display inline conservé — géré par le jeu) */
#profile-title {
  border-radius: 999px !important;
  border: 1px solid rgba(201,124,255,0.4) !important;
  border-left: 3px solid #c97cff !important;
  padding: 3px 12px !important;
}

/* ─────────────────────────────────────────────
   PROFIL — barres XP / Or
   ───────────────────────────────────────────── */
#profile-screen .pf-bar {
  height: 10px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #0b0e1a !important;
  border: 1px solid rgba(255,255,255,0.06);
}
#profile-screen .pf-bar > div { border-radius: 999px !important; }

/* ─────────────────────────────────────────────
   PROFIL — titres de sections (petites capitales espacées)
   ───────────────────────────────────────────── */
#profile-stats-section h3,
#profile-screen .pf-panel h3 {
  font-family: 'Cinzel', serif !important;
  font-style: normal !important;
  font-size: 1.02em !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
}
#profile-stats-section h3 em,
#profile-screen .pf-panel h3 em { font-style: normal !important; }

/* ─────────────────────────────────────────────
   PROFIL — grille + tuiles de stats
   ───────────────────────────────────────────── */
#profile-screen .pf-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 10px !important;
}
#profile-screen .stat-card-2026 {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,0.03), transparent 50%),
    linear-gradient(150deg, rgba(22,26,44,0.92), rgba(10,12,20,0.96)) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
}
#profile-screen .stat-card-2026::before {
  width: 3px;
  opacity: 0.65;
  box-shadow: 0 0 10px currentColor;
}
@media (hover: hover) {
  #profile-screen .stat-card-2026:hover {
    border-color: rgba(255,255,255,0.14) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  }
}

/* Bloc points de stats */
#stat-points-section {
  border-radius: 16px !important;
  border: 1px solid rgba(255,215,0,0.25) !important;
  box-shadow: 0 0 30px rgba(255,215,0,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Panneaux Familier / Progression : arrondi + respiration */
#profile-screen .pf-panel { border-radius: 16px !important; }

/* ─────────────────────────────────────────────
   Mobile
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  #profile-screen .pf-hero { padding: 14px 12px; gap: 12px !important; }
  #profile-avatar-frame { width: 92px !important; height: 92px !important; }
  #profile-name { font-size: 1.2em !important; }
  #profile-screen .pf-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}