/* Cosméticos de la cartera (oct-2026): rarezas, títulos y nombres especiales.
   Global (lo carga base.html): se usa en /cartera y junto al nombre del DT en
   rankings y fichas. Los nombres especiales están copiados de la tienda de
   pagina-mms (shopItems.js + public/js/cosmetics.js): mismos colores y las
   mismas animaciones (cos-shift → gdt-nm-mover, cos-nameglow → gdt-nm-brillo).

   Uso:  <span class="gdt-nm nm-fuego">Nombre</span>
         <span class="dt-tit r-epico">Zorro viejo</span>
         <span class="gdt-rar r-epico">Épico</span>                          */

/* ── Rarezas (etiqueta) ───────────────────────────────────── */
.gdt-rar { --rar: #9ca3af; display: inline-flex; align-items: center; gap: 4px; font-size: .64rem; font-weight: 800;
           letter-spacing: .07em; text-transform: uppercase; color: var(--rar); white-space: nowrap; }
.gdt-rar::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rar); box-shadow: 0 0 6px var(--rar); }
.r-comun      { --rar: #9ca3af; }
.r-raro       { --rar: #60a5fa; }
.r-epico      { --rar: #a855f7; }
.r-legendario { --rar: #f59e0b; }
.r-mitico     { --rar: #ec4899; }

/* ── Títulos por rareza (el .dt-tit base está en base.html) ── */
/* Entre 10 y 13 px sea cual sea el nombre (rankings chicos, perfil en Bebas
   gigante) y siempre con la letra normal, sin las mayúsculas del título. */
.dt-tit { font-size: clamp(10px, .68em, 13px); font-family: 'DM Sans', system-ui, sans-serif;
          text-transform: none; font-style: normal; }
.nr-menu-id b { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 0; white-space: normal; }
.nr-menu-id b .dt-tit { margin-left: 0; }
.nr-menu-id b .gdt-nm { margin-right: .4em; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: inherit; }
.nr-menu-id b .gdt-nm:not([class*="nm-"]) { color: inherit; }   /* el style="color" del pase gana igual */
.dt-tit.r-comun { color: #e5e7eb; border-color: rgba(229,231,235,.28); background: rgba(229,231,235,.07); }
.dt-tit.r-raro { color: #93c5fd; border-color: rgba(96,165,250,.5); background: rgba(96,165,250,.12); }
.dt-tit.r-epico { color: #e9d5ff; border-color: rgba(168,85,247,.6);
                  background: linear-gradient(100deg, rgba(168,85,247,.28), rgba(236,72,153,.16)); }
.dt-tit.r-legendario { position: relative; overflow: hidden; color: #2a1a00; border-color: #fbbf24;
                       background: linear-gradient(100deg, #fde68a, #f59e0b 55%, #fbbf24);
                       box-shadow: 0 0 10px rgba(245,158,11,.35); }
.dt-tit.r-legendario::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
                              background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
                              animation: gdt-tit-brillo 3.2s ease-in-out infinite; }
@keyframes gdt-tit-brillo { 0%, 55% { left: -60%; } 100% { left: 130%; } }

/* ── Nombres especiales ───────────────────────────────────── */
.gdt-nm[class*="nm-"] { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
                        color: transparent; background-size: 300% 100%; }
.gdt-nm.nm-brasa, .gdt-nm.nm-neon { -webkit-text-fill-color: currentColor; background: none; }   /* color liso con halo */
@keyframes gdt-nm-mover { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes gdt-nm-brillo {
  0%, 100% { filter: drop-shadow(0 0 1px var(--nm-halo)) drop-shadow(0 0 3px var(--nm-halo)); }
  50%      { filter: drop-shadow(0 0 4px var(--nm-halo)) drop-shadow(0 0 9px var(--nm-halo)); }
}
.gdt-nm.nm-dorado    { background-image: linear-gradient(90deg, #fff1a8, #FFD700, #b8860b, #FFD700); animation: gdt-nm-mover 4s ease infinite; }
.gdt-nm.nm-brasa     { color: #ff5a5a; --nm-halo: #ff5a5a; animation: gdt-nm-brillo 1.9s ease-in-out infinite; }
.gdt-nm.nm-hielo     { background-image: linear-gradient(90deg, #e0f2fe, #7dd3fc, #0ea5e9, #e0f2fe); animation: gdt-nm-mover 4s ease infinite; }
.gdt-nm.nm-fuego     { background-image: linear-gradient(90deg, #fde047, #f97316, #dc2626, #f97316); animation: gdt-nm-mover 4s ease infinite; }
.gdt-nm.nm-atardecer { background-image: linear-gradient(90deg, #fb7185, #f59e0b, #a855f7, #fb7185); animation: gdt-nm-mover 4s ease infinite; }
.gdt-nm.nm-cromado   { background-image: linear-gradient(90deg, #ffffff, #9ca3af, #e5e7eb, #6b7280, #ffffff); animation: gdt-nm-mover 4s ease infinite; }
.gdt-nm.nm-galaxia   { background-image: linear-gradient(90deg, #8b5cf6, #ec4899, #3b82f6, #8b5cf6); animation: gdt-nm-mover 4s ease infinite; }
.gdt-nm.nm-neon      { color: #67e8f9; --nm-halo: #22d3ee; animation: gdt-nm-brillo 1.9s ease-in-out infinite; }
.gdt-nm.nm-arcoiris  { background-image: linear-gradient(90deg, #ff0040, #ff8c00, #ffe600, #22c55e, #00c8ff, #a855f7, #ff0040);
                       animation: gdt-nm-mover 4s ease infinite; }
.gdt-nm.nm-abismal   { background-image: linear-gradient(90deg, #e9d5ff, #a855f7, #6b21a8, #a855f7); --nm-halo: #c084fc;
                       animation: gdt-nm-mover 4s ease infinite, gdt-nm-brillo 1.9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .gdt-nm[class*="nm-"], .dt-tit.r-legendario::after { animation: none !important; }
}