/* Item rarity ladder: cinza → verde → azul → roxo → ouro.
   Any element with a .rar-<tier> class gets --rar (main color) and --rar-glow (soft background). */

:root {
  --rar-comum: #a3adbf;
  --rar-incomum: #4ade80;
  --rar-rara: #4aa3ff;
  --rar-mitica: #b26bff;
  --rar-lendaria: #ffc53d;
}

.rar-comum { --rar: var(--rar-comum); --rar-glow: #a3adbf14; }
.rar-incomum { --rar: var(--rar-incomum); --rar-glow: #4ade8024; }
.rar-rara { --rar: var(--rar-rara); --rar-glow: #4aa3ff2e; }
.rar-mitica { --rar: var(--rar-mitica); --rar-glow: #b26bff38; }
.rar-lendaria { --rar: var(--rar-lendaria); --rar-glow: #ffc53d38; }

/* the tier name as a small colored pill */
.rar-tag {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--rar); background: var(--rar-glow); border: 1px solid color-mix(in srgb, var(--rar) 45%, transparent);
}

/* item names written in their tier color (drops, logs, lists) */
.rar-text { color: var(--rar); font-weight: 600; }

/* the top tiers shimmer, so a legendary drop is noticed */
.rar-mitica.rar-shine, .rar-lendaria.rar-shine { animation: rar-pulse 2.4s ease-in-out infinite; }
@keyframes rar-pulse {
  50% { box-shadow: 0 0 14px color-mix(in srgb, var(--rar) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .rar-shine { animation: none !important; }
}