/* =============================================================================
   TIERS.CSS : texte en dégradé pour ce qui est rare, et pour PA / PM / PO.
   Partagé par le Suivi (index.html) et le Book (src/main.js).

   Deux familles :
   - .st-ap / .st-mp / .st-po : le code couleur des stats. Dégradé VERTICAL,
     posé sur des lignes entières (li) : un dégradé horizontal s'étalerait sur
     toute la largeur et la ligne courte n'en montrerait qu'un bout.
   - .rz-t + .rz-t-<palier> : les noms d'objets, de raretés et de reliques.
     Toujours sur un <span> inline-block, pour que le dégradé et le reflet
     suivent la largeur du texte.

   Le contour passe par filter: drop-shadow, pas par text-shadow : avec un
   texte transparent (background-clip: text), text-shadow se verrait à travers
   et salirait le dégradé.
   ========================================================================== */

/* ── PA / PM / PO ──────────────────────────────────────────────────────────── */
.st-ap, .st-mp, .st-po {
  font-weight: 600;
  background-image: var(--st-g);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* color reste en secours (copier-coller, navigateurs anciens) */
.st-ap { color: #5aaefc !important; --st-g: linear-gradient(180deg, #b9e0ff 0%, #6cb8ff 45%, #3d8ef0 100%); }
.st-mp { color: #5fd38a !important; --st-g: linear-gradient(180deg, #c4f7c9 0%, #6fe08f 45%, #2fb465 100%); }
.st-po { color: #3fd0c9 !important; --st-g: linear-gradient(180deg, #c2fbf5 0%, #4fe0d6 45%, #17a9a8 100%); }
html[data-theme="light"] .st-ap { color: #1d6fd1 !important; --st-g: linear-gradient(180deg, #3b8cf0 0%, #1d6fd1 50%, #12489a 100%); }
html[data-theme="light"] .st-mp { color: #15803d !important; --st-g: linear-gradient(180deg, #22a454 0%, #15803d 50%, #0c5a2a 100%); }
html[data-theme="light"] .st-po { color: #0e7f79 !important; --st-g: linear-gradient(180deg, #14a59d 0%, #0e7f79 50%, #075652 100%); }

/* ── Paliers de rareté ─────────────────────────────────────────────────────── */
.rz-t {
  display: inline-block;
  font-weight: 700; /* comme les noms d'objets */
  background-image: var(--t-reflet, none), var(--t-g);
  background-size: 250% 100%, var(--t-taille, 100% 100%);
  background-position: 120% 0, 0 0;
  background-repeat: no-repeat, repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: var(--t-contour);
  --t-contour: drop-shadow(0 1px 0 rgba(0, 0, 0, .85)) drop-shadow(0 0 1px rgba(0, 0, 0, .7));
}
html[data-theme="light"] .rz-t {
  --t-contour: drop-shadow(0 1px 0 rgba(0, 0, 0, .28)) drop-shadow(0 0 .5px rgba(0, 0, 0, .35));
}

/* Le reflet qui traverse le texte, pour Légendaire et au-dessus */
.rz-t-legendaire, .rz-t-prestige, .rz-t-mythique {
  --t-reflet: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%);
  animation: rz-reflet 3.2s ease-in-out infinite;
}
@keyframes rz-reflet {
  0%, 35% { background-position: 120% 0, 0 0; }
  80%, 100% { background-position: -20% 0, 0 0; }
}

.rz-t-peu-commun { --t-g: linear-gradient(180deg, #dcffc2 0%, #8ee46a 45%, #3f9f2e 100%); }
.rz-t-rare       { --t-g: linear-gradient(180deg, #d8efff 0%, #73b8ff 45%, #2d6fd6 100%); }
.rz-t-epique     { --t-g: linear-gradient(180deg, #fbd9ff 0%, #d08bff 40%, #8a3fd6 100%); }
.rz-t-legendaire { --t-g: linear-gradient(180deg, #fffbe0 0%, #ffe066 30%, #ffb21e 62%, #c9700e 100%); }

/* Prestige : rose et or */
.rz-t-prestige {
  --t-g: linear-gradient(180deg, #ffe3f6 0%, #ff7fd6 38%, #e8388f 70%, #ffb347 100%);
}

/* Mythique (Primordial, Ascension) : arc-en-ciel qui défile */
.rz-t-mythique {
  --t-g: linear-gradient(90deg, #ff6ad5, #ffd36a, #6affc1, #6ad5ff, #b36aff, #ff6ad5);
  --t-taille: 300% 100%;
  /* reflet et défilement en une seule animation : deux animations se
     disputeraient background-position */
  animation: rz-mythique 6s linear infinite;
}
@keyframes rz-mythique {
  0%   { background-position: 120% 0, 0% 0; }
  20%  { background-position: -20% 0, 60% 0; }
  100% { background-position: -20% 0, 300% 0; }
}

/* Corrompu : comme le Mythique, un dégradé qui défile, mais en noir et
   blanc veiné de rouge. Le gris le plus sombre reste clair (#5e5e5e) : un
   vrai noir disparaissait sur les fonds sombres, et un contour blanc pour le
   rattraper bavait en petite taille. */
.rz-t-corrompu {
  --t-g: linear-gradient(90deg, #ffffff, #b8b8b8, #5e5e5e, #ff3b3b, #5e5e5e, #b8b8b8, #ffffff);
  --t-taille: 300% 100%;
  --t-reflet: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%);
  --t-contour: drop-shadow(0 1px 0 rgba(0, 0, 0, .9)) drop-shadow(0 0 3px rgba(220, 38, 38, .55));
  animation: rz-mythique 6s linear infinite;
}
html[data-theme="light"] .rz-t-corrompu {
  --t-g: linear-gradient(90deg, #111111, #4a4a4a, #8a8a8a, #c81e1e, #8a8a8a, #4a4a4a, #111111);
  --t-contour: drop-shadow(0 0 2px rgba(220, 38, 38, .35));
}

/* Thème clair : les mêmes teintes, assombries pour rester lisibles sur blanc */
html[data-theme="light"] .rz-t-peu-commun { --t-g: linear-gradient(180deg, #5cc24a 0%, #2f8a22 55%, #1d5c15 100%); }
html[data-theme="light"] .rz-t-rare       { --t-g: linear-gradient(180deg, #4a9af5 0%, #1f5fc4 55%, #143f8a 100%); }
html[data-theme="light"] .rz-t-epique     { --t-g: linear-gradient(180deg, #c06cf0 0%, #8a3fd6 55%, #5a2096 100%); }
html[data-theme="light"] .rz-t-legendaire { --t-g: linear-gradient(180deg, #f5b82a 0%, #d98a0c 55%, #9a5a06 100%); }
html[data-theme="light"] .rz-t-prestige   { --t-g: linear-gradient(180deg, #f052b8 0%, #c81e74 60%, #d9861a 100%); }
html[data-theme="light"] .rz-t-mythique   { --t-g: linear-gradient(90deg, #e0309f, #d99a0c, #12a873, #1a8fd0, #7d33e0, #e0309f); }

/* ── Cadres d'icônes : les mêmes paliers que les noms ─────────────────────────
   Un anneau dessiné sur ::before (découpé par un masque), pas une bordure :
   la refonte force border, box-shadow et background des cadres d'icônes du
   Suivi en !important. Les paliers hauts tournent (--rz-ang). */
@property --rz-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.rz-cadre { position: relative; --cadre-in: -3px; }
.item-slot-frame.rz-cadre { --cadre-in: 0px; }
.rz-cadre::before {
  content: "";
  position: absolute;
  inset: var(--cadre-in);
  z-index: 1;
  border-radius: 8px;
  padding: 2px;
  background: var(--cadre-g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 4px var(--cadre-lueur));
  pointer-events: none;
}
.rz-cadre-peu-commun { --cadre-g: linear-gradient(160deg, #a8ef8a, #3f9f2e); --cadre-lueur: rgba(93, 184, 80, .55); }
.rz-cadre-rare       { --cadre-g: linear-gradient(160deg, #a9d8ff, #2d6fd6); --cadre-lueur: rgba(62, 138, 212, .6); }
.rz-cadre-epique     { --cadre-g: linear-gradient(160deg, #eab8ff, #8a3fd6); --cadre-lueur: rgba(154, 76, 201, .65); }
.rz-cadre-legendaire { --cadre-g: conic-gradient(from var(--rz-ang), #c9700e, #ffe066, #fffbe0, #ffb21e, #c9700e); --cadre-lueur: rgba(230, 167, 46, .75); }
.rz-cadre-prestige   { --cadre-g: conic-gradient(from var(--rz-ang), #e8388f, #ffb347, #ffe3f6, #ff7fd6, #e8388f); --cadre-lueur: rgba(232, 56, 143, .7); }
.rz-cadre-mythique   { --cadre-g: conic-gradient(from var(--rz-ang), #ff6ad5, #ffd36a, #6affc1, #6ad5ff, #b36aff, #ff6ad5); --cadre-lueur: rgba(255, 106, 213, .75); }
.rz-cadre-corrompu   { --cadre-g: conic-gradient(from var(--rz-ang), #ffffff, #0a0a0a, #ffffff, #0a0a0a, #ffffff); --cadre-lueur: rgba(255, 255, 255, .45); }
.rz-cadre-legendaire::before, .rz-cadre-prestige::before,
.rz-cadre-mythique::before, .rz-cadre-corrompu::before { animation: rz-tour 4s linear infinite; }
.rz-cadre-mythique::before { animation-duration: 3s; }
@keyframes rz-tour { to { --rz-ang: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .rz-t, .rz-cadre::before { animation: none !important; }
}