/* ============================================================
   v99-rarity-frames.css  (claude-rarframes-2-readable)  [2026-07-03]
   CADRES DE RARETÉ ESCALADANTS — VERSION LISIBLE.
   [FIX demande user] L'ancienne version remplissait le ::before (conic-gradient
   PLEIN, z-index:-1) → il TRANSPARAISSAIT à travers les cartes semi-transparentes
   (capture : carte « Poing du Colosse » noyée de violet, texte illisible).
   NOUVEAU : les effets ne sont QUE des ANNEAUX DE BORDURE (masque padding-box/
   exclude → centre 100 % transparent), lueurs réduites → le TEXTE reste lisible.
   Escalade : Commun (rien) → Rare (liseré) → Super Rare (anneau) →
   Ultra Rare (anneau pulsant) → Monarque (anneau arc-en-ciel rotatif + 👑).
   GPU only. Piloté par [data-rr="1..5"] + fallback classes existantes.
   ============================================================ */

/* ── couleur de rareté (--rr-c) par tier ── */
[data-rr="1"],.invp-r-common,.invp-r-uncommon,.equip-slot.common,.equip-slot.uncommon,.market-item.rarity-common,.market-item.rarity-uncommon{ --rr-c:#9aa3b8; }
[data-rr="2"],.invp-r-rare,.equip-slot.rare,.market-item.rarity-rare{ --rr-c:#4ecdc4; }
[data-rr="3"],.invp-r-epic,.equip-slot.epic,.market-item.rarity-epic{ --rr-c:#00bfff; }
[data-rr="4"],.invp-r-legendary,.equip-slot.legendary,.market-item.rarity-legendary{ --rr-c:#b46bff; }
[data-rr="5"],.invp-r-mythic,.invp-r-primordial,.invp-r-monarque,.equip-slot.mythic,.equip-slot.primordial,.market-item.rarity-mythic,.market-item.rarity-primordial{ --rr-c:#ffae00; }

/* ── T2 Rare : simple liseré coloré + lueur DOUCE ── */
[data-rr="2"],.invp-r-rare,.equip-slot.rare,.market-item.rarity-rare{
  border-color:var(--rr-c) !important;
  box-shadow:0 0 7px -2px var(--rr-c) !important;
}

/* ── T3 Super Rare : liseré + lueur un peu plus marquée (PAS de remplissage) ── */
[data-rr="3"],.invp-r-epic,.equip-slot.epic,.market-item.rarity-epic{
  border-color:var(--rr-c) !important;
  box-shadow:0 0 10px -2px var(--rr-c) !important;
}

/* ── ANNEAU DE BORDURE pur (T4/T5) : gradient limité à un ring de 3px par MASQUE —
     le centre est 100 % transparent → ne recouvre JAMAIS le contenu de la carte ── */
[data-rr="4"],.invp-r-legendary,.equip-slot.legendary,.market-item.rarity-legendary,
[data-rr="5"],.invp-r-mythic,.invp-r-primordial,.invp-r-monarque,.equip-slot.mythic,.equip-slot.primordial,.market-item.rarity-mythic,.market-item.rarity-primordial{
  position:relative; z-index:0;
}
[data-rr="4"]::before,.invp-r-legendary::before,.equip-slot.legendary::before,.market-item.rarity-legendary::before,
[data-rr="5"]::before,.invp-r-mythic::before,.invp-r-primordial::before,.invp-r-monarque::before,.equip-slot.mythic::before,.equip-slot.primordial::before,.market-item.rarity-mythic::before,.market-item.rarity-primordial::before{
  content:''; position:absolute; inset:-3px; border-radius:15px; z-index:1; pointer-events:none;
  padding:3px;                                   /* épaisseur de l'anneau */
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;                /* → seule la BORDURE est peinte */
}

/* ── T4 Ultra Rare : anneau violet pulsant + lueur modérée ── */
[data-rr="4"],.invp-r-legendary,.equip-slot.legendary,.market-item.rarity-legendary{
  box-shadow:0 0 12px -2px var(--rr-c) !important;
}
[data-rr="4"]::before,.invp-r-legendary::before,.equip-slot.legendary::before,.market-item.rarity-legendary::before{
  background:conic-gradient(from 0deg,var(--rr-c),#8b5cf6,var(--rr-c),#8b5cf6,var(--rr-c));
  animation:mxRRpulse 2.4s ease-in-out infinite;
}

/* ── T5 MONARQUE : anneau arc-en-ciel ROTATIF + lueur or + sceau 👑 ── */
[data-rr="5"],.invp-r-mythic,.invp-r-primordial,.invp-r-monarque,.equip-slot.mythic,.equip-slot.primordial,.market-item.rarity-mythic,.market-item.rarity-primordial{
  border-color:#ffae00 !important;
  box-shadow:0 0 14px -2px rgba(255,174,0,.5) !important;
}
[data-rr="5"]::before,.invp-r-mythic::before,.invp-r-primordial::before,.invp-r-monarque::before,.equip-slot.mythic::before,.equip-slot.primordial::before,.market-item.rarity-mythic::before,.market-item.rarity-primordial::before{
  background:conic-gradient(from var(--rr-a,0deg),#ffae00,#ff5ad0,#7c5cff,#33e0ff,#ffae00);
  animation:mxRRspin 3.2s linear infinite;
}
[data-rr="5"]::after,.invp-r-mythic::after,.invp-r-primordial::after,.invp-r-monarque::after,
.equip-slot.mythic::after,.equip-slot.primordial::after,.market-item.rarity-mythic::after,.market-item.rarity-primordial::after{
  content:'👑'; position:absolute; top:-9px; left:-6px; z-index:2; font-size:14px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8)); pointer-events:none;
}

/* rotation du gradient conique via la custom property animable (fallback : pulse) */
@property --rr-a { syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes mxRRspin{ to{ --rr-a:360deg; } }
@keyframes mxRRpulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* Les anneaux T4/T5 restent vivants MÊME en mode fluidité (opacity/custom-prop, léger) */
body.mx-fluid [data-rr="4"]::before, body.mx-fluid .invp-r-legendary::before,
body.mx-fluid [data-rr="5"]::before, body.mx-fluid .invp-r-mythic::before,
body.mx-fluid .invp-r-primordial::before, body.mx-fluid .invp-r-monarque::before{
  animation-play-state:running !important;
}