/* Sistema visual global de títulos */
/* Presets principales */

/* Base visual común */
.title-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-weight:800;
  line-height:1;
  padding:.125rem .5rem;
  border-radius:.5rem;
  white-space:nowrap;
  font-size:14px;
  color:#ddd; /* color predeterminado cuando no existe preset */
}

/* Estado sin título: mantiene el texto simple y sin adornos. */
.title-badge[data-title-key=""],
.title-badge:not([data-title-key]){
  color:#cfd3e3;
  -webkit-text-fill-color:initial;
}
.title-badge[data-title-key=""]::before,
.title-badge[data-title-key=""]::after{ content:none; }

/* Presets por clave de título */
/* Owner */
.title-badge[data-title-key="owner"]{
  --c1:#8b5cf6; /* color principal */
  --c2:#4c1d95; /* color secundario */
  color:transparent;
  background-image:linear-gradient(90deg,var(--c1),var(--c2),var(--c1));
  background-size:200% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(139,92,246,.35);
  animation:ownerPulse 3.5s linear infinite;
}
.title-badge[data-title-key="owner"]::before{
  content:"👑";
  display:inline-block;
  font-size:.95em;
  transform:translateY(-.5px);
  animation:crownFloat 2s ease-in-out infinite;
  color:#d6a3ff; -webkit-text-fill-color:#d6a3ff;
  filter:drop-shadow(0 0 3px #b380ff);
}

/* Basado */
.title-badge[data-title-key="basado"]{
  color:transparent;
  background-image:linear-gradient(90deg,#ffb347,#ffcc33,#ffb347);
  background-size:200% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 8px rgba(255,186,59,.35);
  animation:basadoShine 3s linear infinite;
}
.title-badge[data-title-key="basado"]::after{
  content:"" !important;
  display:inline-block !important;
  width:1.08em;
  height:1.08em;
  flex:0 0 auto;
  margin-left:.08rem;
  vertical-align:-.12em;
  background:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='36' r='30' fill='%23FFD23F'/%3E%3Cpath d='M12 36c2.3 15.7 12.5 26 24 26s21.7-10.3 24-26c-4.5 9-13.2 14.5-24 14.5S16.5 45 12 36z' fill='%23F4A62A' opacity='.55'/%3E%3Cpath d='M21 27h15v8c0 4.2-3.3 7.5-7.5 7.5S21 39.2 21 35v-8zm15 0h15v8c0 4.2-3.3 7.5-7.5 7.5S36 39.2 36 35v-8z' fill='%23111627'/%3E%3Cpath d='M34 31h4' stroke='%23111627' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M22 27l-7-4M50 27l7-4' stroke='%23111627' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M25 50c5.5 4.3 16.5 4.3 22 0' fill='none' stroke='%23734A18' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M24 30h9M39 30h9' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.25'/%3E%3C/svg%3E") !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:initial !important;
  color:initial !important;
  text-shadow:none !important;
  filter:drop-shadow(0 0 4px rgba(255,210,63,.55));
  animation:emojiBob 2.2s ease-in-out infinite !important;
}

/* VIP */
.title-badge[data-title-key="vip"]{
  color: transparent;
  background-image:
    linear-gradient(90deg,#ff4fd8,#8b5cf6,#38bdf8,#a855f7,#ff4fd8);
  background-size: 240% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 10px rgba(168,85,247,.35),
    0 0 18px rgba(56,189,248,.22),
    0 0 24px rgba(255,79,216,.18);
  animation: vipRgbFlow 3.2s linear infinite, vipGlow 2.2s ease-in-out infinite;
}
.title-badge[data-title-key="vip"]::before{
  content:" 💎";
  display:inline-block;
  margin-right:.15rem;
  color:#e9d5ff;
  -webkit-text-fill-color:#e9d5ff;
  filter:drop-shadow(0 0 4px rgba(216,180,254,.9));
  animation: emojiBob 2.2s ease-in-out infinite;
}
.title-badge[data-title-style="vip-rgb"]{
  animation-duration: 3s !important;
}

/* Títulos del Abismo */
/* Lord of Abyss: gradiente morado con emblema animado. */
.title-badge[data-title-key="lord-of-abyss"]{
  color:transparent;
  /* Capas de aura y gradiente principal. */
  background-image:
    conic-gradient(from 0deg at 50% 50%, #7c3aed33, #a78bfa33, #4c1d9533, #7c3aed33),
    linear-gradient(90deg,#c084fc,#7c3aed,#4c1d95,#c084fc);
  background-size: 200% 200%, 260% 100%;
  background-position: 50% 50%, 0% 50%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 10px rgba(167,139,250,.35),
    0 0 18px rgba(124,58,237,.25);
  animation:
    abyssAureaSpin 6s linear infinite,
    abyssSpectral 2.6s linear infinite,
    abyssGlow 2.4s ease-in-out infinite;
}
.title-badge[data-title-key="lord-of-abyss"]::after{
  /* Emblema del Abismo. */
  content:" 🌀";
  display:inline-block;
  transform-origin:center;
  animation:emojiBob 2.2s ease-in-out infinite, spinSoft 8s linear infinite;
  /* Mantiene el color del emblema independiente del texto. */
  color:#d5c7ff; -webkit-text-fill-color:#d5c7ff;
  filter:drop-shadow(0 0 4px #b79cff);
}

/* Abyss Challenger: variante roja con emblema de combate. */
.title-badge[data-title-key="abyss-challenger"]{
  color:transparent;
  background-image:linear-gradient(90deg,#f87171,#b91c1c,#ef4444,#f87171);
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(239,68,68,.28);
  animation:abyssFlow 3s linear infinite, abyssGlowRed 2.2s ease-in-out infinite;
}
.title-badge[data-title-key="abyss-challenger"]::before{
  /* Emblema de combate. */
  content:"⚔️";
  display:inline-block;
  margin-right:.1rem;
  transform-origin:60% 60%;
  animation:swordSwing 1.8s ease-in-out infinite;
  color:#ffd2d2; -webkit-text-fill-color:#ffd2d2;
  filter:drop-shadow(0 0 3px #ff9aa2);
}

/* Abyss Master: variante azul con emblema de cristal. */
.title-badge[data-title-key="abyss-master"]{
  color:transparent;
  background-image:linear-gradient(90deg,#60a5fa,#2563eb,#1d4ed8,#60a5fa);
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(59,130,246,.28);
  animation:abyssFlow 3.1s linear infinite, abyssGlowBlue 2.4s ease-in-out infinite;
}
.title-badge[data-title-key="abyss-master"]::after{
  /* Emblema de cristal. */
  content:" 💠";
  display:inline-block;
  animation:emojiBob 2.2s ease-in-out infinite, twinkle 1.8s ease-in-out infinite;
  color:#cfe4ff; -webkit-text-fill-color:#cfe4ff;
  filter:drop-shadow(0 0 3px #9cc7ff);
}

/* Variantes Top del Abismo. */
.title-badge[data-title-key="top-4-of-abyss"]{
  color:transparent;
  background-image:linear-gradient(90deg,#fbbf24,#f59e0b,#fbbf24);
  background-size:200% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(251,191,36,.25);
  animation:abyssFlow 3.2s linear infinite;
}
.title-badge[data-title-key="top-5-of-abyss"]{
  color:transparent;
  background-image:linear-gradient(90deg,#a3e635,#16a34a,#a3e635);
  background-size:200% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(163,230,53,.25);
  animation:abyssFlow 3.2s linear infinite;
}

/* Presets por estilo visual */
/* Se aplican únicamente cuando la clave del título es compatible. */
.title-badge[data-title-key="owner"][data-title-style="anim-fire"]{
  color:transparent !important;
  background-image:conic-gradient(from 0deg,#9b5cf6,#f0a,#ff6b6b,#ffcc33,#9b5cf6);
  background-size:200% 200%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:fireSpin 6s linear infinite;
}
.title-badge[data-title-key="basado"][data-title-style="anim-basado"]{
  color:transparent !important;
  background-image:linear-gradient(90deg,#ffb347,#ffcc33,#ffb347);
  background-size:200% 100%;
  background-position:0% 50%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:basadoShine 3s linear infinite;
}

/* Variante visual compartida para estilos del Abismo. */
.title-badge[data-title-style="anim-abyss"]{
  animation-duration:2.8s !important;
}

/* Animaciones de títulos */
@keyframes ownerPulse{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes basadoShine{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes fireSpin{   0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes crownFloat{ 0%,100%{transform:translateY(-.5px)} 50%{transform:translateY(-3px)} }
@keyframes emojiBob{   0%,100%{transform:translateY(0)} 50%{transform:translateY(-1px)} }

@keyframes abyssFlow{  0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes abyssSpectral{ 0%{background-position:0% 50%} 100%{background-position:260% 50%} }
@keyframes abyssAureaSpin{ 0%{background-position:50% 50%} 100%{background-position:150% 150%} }
@keyframes abyssGlow{  0%,100%{text-shadow:0 0 10px rgba(167,139,250,.35),0 0 18px rgba(124,58,237,.25)} 50%{text-shadow:0 0 12px rgba(199,174,255,.55),0 0 26px rgba(124,58,237,.45)} }
@keyframes abyssGlowRed{ 0%,100%{text-shadow:0 0 10px rgba(239,68,68,.25)} 50%{text-shadow:0 0 18px rgba(239,68,68,.45)} }
@keyframes abyssGlowBlue{0%,100%{text-shadow:0 0 10px rgba(59,130,246,.25)} 50%{text-shadow:0 0 18px rgba(59,130,246,.45)} }

@keyframes swordSwing{ 0%,100%{transform:rotate(-8deg) translateY(-.5px)} 50%{transform:rotate(6deg) translateY(-2px)} }
@keyframes twinkle{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-1px) scale(1.06)} }
@keyframes spinSoft{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes vipRgbFlow{ 0%{background-position:0% 50%} 100%{background-position:240% 50%} }
@keyframes vipGlow{ 0%,100%{text-shadow:0 0 10px rgba(168,85,247,.35),0 0 18px rgba(56,189,248,.22),0 0 24px rgba(255,79,216,.18)} 50%{text-shadow:0 0 14px rgba(216,180,254,.62),0 0 26px rgba(56,189,248,.36),0 0 30px rgba(255,79,216,.3)} }

/* Respeta la preferencia del sistema para reducir movimiento. */
@media (prefers-reduced-motion:reduce){
  .title-badge[data-title-key="owner"],
  .title-badge[data-title-key="basado"],
  .title-badge[data-title-key="vip"],
  .title-badge[data-title-key="lord-of-abyss"],
  .title-badge[data-title-key="abyss-challenger"],
  .title-badge[data-title-key="abyss-master"],
  .title-badge[data-title-key="top-4-of-abyss"],
  .title-badge[data-title-key="top-5-of-abyss"],
  .title-badge[data-title-key="owner"][data-title-style="anim-fire"],
  .title-badge[data-title-key="basado"][data-title-style="anim-basado"]{
    animation:none;
  }
  .title-badge[data-title-key="owner"]::before,
  .title-badge[data-title-key="basado"]::after,
  .title-badge[data-title-key="vip"]::before,
  .title-badge[data-title-key="lord-of-abyss"]::after,
  .title-badge[data-title-key="abyss-challenger"]::before,
  .title-badge[data-title-key="abyss-master"]::after{
    animation:none;
  }
}
/* Títulos competitivos automáticos: THE BEST <personaje>.
   Se muestran por posición en Ranking Characters y toman color según el elemento. */

/* Estilos THE BEST por elemento. */

.title-badge[data-title-style^="best-"]{
  /* Variante de texto limpio para listados. */
  --best1: rgba(235,235,235,.98);
  --best2: rgba(180,180,180,.92);

  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;

  /* Quita el contenedor visual del badge. */
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  position: relative;
  overflow: visible;

  /* Gradiente de texto con desplazamiento suave. */
  color: transparent;
  background-image: linear-gradient(90deg, var(--best1), var(--best2), var(--best1));
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 0 10px rgba(255,255,255,.14);
  animation: pv_bestTextFlow 3.2s linear infinite;
}

/* Panel oscuro con aura suave. */
.title-badge[data-title-style^="best-"]::before{ content:none !important; display:none !important; }

/* Brillo animado del panel. */
.title-badge[data-title-style^="best-"]::after{ content:none !important; display:none !important; }

@keyframes pv_bestShine{
  0%   { transform: rotate(18deg) translateX(-140%); opacity:.0; }
  12%  { opacity:.65; }
  50%  { opacity:.95; }
  100% { transform: rotate(18deg) translateX(190%); opacity:.0; }
}
@keyframes pv_bestAura{
  0%,100% { transform: translateY(0) scale(1); opacity:.88; }
  50%     { transform: translateY(-1px) scale(1.02); opacity:1; }
}

/* Colores por elemento. */

.title-badge[data-title-style="best-pyro"]{
  --best1: rgba(255, 92, 76, .98);
  --best2: rgba(255, 210, 150, .96);
  --panel1: rgba(100, 16, 16, .55);
  --panel2: rgba(0, 0, 0, .18);
  box-shadow:
    0 0 0 1px rgba(255,120,90,.16) inset,
    0 0 22px rgba(255, 72, 72, .14),
    0 12px 28px rgba(0,0,0,.40);
}
.title-badge[data-title-style="best-hydro"]{
  --best1: rgba(86, 198, 255, .98);
  --best2: rgba(190, 245, 255, .96);
  --panel1: rgba(10, 40, 80, .55);
  --panel2: rgba(0, 0, 0, .18);
  box-shadow:
    0 0 0 1px rgba(110,210,255,.16) inset,
    0 0 22px rgba(80, 160, 255, .14),
    0 12px 28px rgba(0,0,0,.40);
}
.title-badge[data-title-style="best-anemo"]{
  --best1: rgba(96, 255, 214, .98);
  --best2: rgba(220, 255, 244, .96);
  --panel1: rgba(8, 60, 52, .55);
  --panel2: rgba(0, 0, 0, .18);
  box-shadow:
    0 0 0 1px rgba(120,255,228,.16) inset,
    0 0 22px rgba(72, 255, 214, .12),
    0 12px 28px rgba(0,0,0,.40);
}
.title-badge[data-title-style="best-electro"]{
  --best1: rgba(208, 140, 255, .98);
  --best2: rgba(255, 220, 255, .96);
  --panel1: rgba(54, 10, 70, .55);
  --panel2: rgba(0, 0, 0, .18);
  box-shadow:
    0 0 0 1px rgba(220,160,255,.16) inset,
    0 0 22px rgba(198, 110, 255, .12),
    0 12px 28px rgba(0,0,0,.40);
}
.title-badge[data-title-style="best-dendro"]{
  --best1: rgba(120, 255, 102, .98);
  --best2: rgba(232, 255, 206, .96);
  --panel1: rgba(26, 64, 16, .55);
  --panel2: rgba(0, 0, 0, .18);
  box-shadow:
    0 0 0 1px rgba(140,255,124,.16) inset,
    0 0 22px rgba(120, 255, 102, .12),
    0 12px 28px rgba(0,0,0,.40);
}
.title-badge[data-title-style="best-cryo"]{
  --best1: rgba(146, 225, 255, .98);
  --best2: rgba(240, 252, 255, .96);
  --panel1: rgba(10, 56, 78, .55);
  --panel2: rgba(0, 0, 0, .18);
  box-shadow:
    0 0 0 1px rgba(170,238,255,.16) inset,
    0 0 22px rgba(146, 225, 255, .12),
    0 12px 28px rgba(0,0,0,.40);
}
.title-badge[data-title-style="best-geo"]{
  --best1: rgba(255, 214, 124, .98);
  --best2: rgba(255, 246, 206, .96);
  --panel1: rgba(74, 42, 6, .55);
  --panel2: rgba(0, 0, 0, .18);
  box-shadow:
    0 0 0 1px rgba(255,220,130,.14) inset,
    0 0 22px rgba(255, 205, 90, .12),
    0 12px 28px rgba(0,0,0,.40);
}
.title-badge[data-title-style="best-none"]{
  --best1: rgba(235,235,235,.98);
  --best2: rgba(190,190,190,.92);
  --panel1: rgba(40,40,40,.55);
  --panel2: rgba(0,0,0,.18);
}

/* Formato compacto para listas. */
.title-badge.title-xs{
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 999px;
}


/* Estilo THE BEST para perfil y administración. */

/* Se activa con titleStyle = best-<elemento>. */
.title-badge[data-title-style^="best-"],
/* Compatibilidad con claves de título basadas en the-best-*. */
.title-badge[data-title-key^="the-best-"]{
  --best1:#e5e7eb;
  --best2:#9ca3af;
  color:transparent;
  background-image:
    linear-gradient(90deg,var(--best1),var(--best2),var(--best1)),
    radial-gradient(120px 60px at 50% 50%, rgba(255,255,255,.20), transparent 60%);
  background-size:220% 100%, 220% 220%;
  background-position:0% 50%, 50% 50%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 14px rgba(255,255,255,.10), 0 0 26px rgba(0,0,0,.55);
  letter-spacing:.02em;
  animation:pvBestShine 3.2s linear infinite;
}

/* Aura de fondo del título. */
.title-badge[data-title-style^="best-"]::before,
.title-badge[data-title-key^="the-best-"]::before{
  content:"";
  position:absolute;
  inset:-6px -8px;
  border-radius:12px;
  background:
    radial-gradient(120px 40px at 30% 30%, rgba(255,255,255,.16), transparent 65%),
    radial-gradient(160px 60px at 70% 60%, rgba(255,255,255,.10), transparent 70%);
  filter:blur(10px);
  opacity:.55;
  z-index:-1;
  animation:pvBestAura 2.8s ease-in-out infinite;
}

/* Destello del texto THE BEST. */
.title-badge[data-title-style^="best-"]::after,
.title-badge[data-title-key^="the-best-"]::after{
  content:" ✦";
  color:rgba(255,255,255,.85);
  -webkit-text-fill-color:rgba(255,255,255,.85);
  text-shadow:0 0 10px rgba(255,255,255,.22);
  animation:pvBestSpark 1.9s ease-in-out infinite;
}

/* Variables de color por elemento. */
.title-badge[data-title-style="best-pyro"]{   --best1:#ff5a4f; --best2:#ffcc33; }
.title-badge[data-title-style="best-hydro"]{  --best1:#4ab3ff; --best2:#7fe5ff; }
.title-badge[data-title-style="best-anemo"]{  --best1:#4ff0c8; --best2:#d8fff4; }
.title-badge[data-title-style="best-electro"]{--best1:#b57bff; --best2:#ffd1ff; }
.title-badge[data-title-style="best-dendro"]{ --best1:#7dff5a; --best2:#eaffc8; }
.title-badge[data-title-style="best-cryo"]{   --best1:#7fe5ff; --best2:#e7fbff; }
.title-badge[data-title-style="best-geo"]{    --best1:#ffcf63; --best2:#fff0b5; }
.title-badge[data-title-style="best-none"]{   --best1:#e5e7eb; --best2:#9ca3af; }

/* Animaciones del bloque THE BEST. */
@keyframes pvBestShine{
  0%{background-position:0% 50%, 50% 50%}
  100%{background-position:220% 50%, 50% 50%}
}
@keyframes pvBestAura{
  0%,100%{transform:translateY(0); opacity:.55}
  50%{transform:translateY(-2px); opacity:.75}
}
@keyframes pvBestSpark{
  0%,100%{transform:translateY(0) scale(1); opacity:.9}
  50%{transform:translateY(-1px) scale(1.06); opacity:1}
}

/* THE ONE: corona nítida renderizada con SVG. */
@keyframes theOneShimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes theOneHalo{
  0%,100%{ opacity:.18; transform:scale(1); }
  50%{ opacity:.30; transform:scale(1.02); }
}
@keyframes theOneCrownFloat{
  0%,100%{ transform:translateY(-.5px); }
  50%{ transform:translateY(-3px); }
}

.title-badge[data-title-key="the-one"],
.title-badge[data-title-style="the-one"],
.title-badge[data-title-key="the-rat"],
.title-badge[data-title-style="the-rat"]{
  gap:.12rem;
  --g1:#fff7c8;
  --g2:#ffd24a;
  --g3:#ffb400;
  --g4:#fff7c8;

  color:transparent;
  background-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g2),var(--g4));
  background-size:320% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;

  text-shadow:
    0 0 10px rgba(255,215,0,.16),
    0 0 22px rgba(255,215,0,.10);

  letter-spacing:.08em;
  font-weight:1000;
  animation:theOneShimmer 2.6s linear infinite;
}

.title-badge[data-title-key="the-one"]::before,
.title-badge[data-title-style="the-one"]::before,
.title-badge[data-title-key="the-rat"]::before,
.title-badge[data-title-style="the-rat"]::before{
  content:"";
  width:1.45em;
  height:1.45em;
  display:inline-block;
  margin-right:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff7c8%22/%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22%23ffd24a%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b77a00%22/%3E%0A%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Cpath%20d%3D%22M8%2026l10%2010%2014-18%2014%2018%2010-10-6%2030H14L8%2026z%22%20fill%3D%22url%28%23g%29%22/%3E%0A%3Cpath%20d%3D%22M14%2052h36%22%20stroke%3D%22%23fff2b6%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22/%3E%0A%3Ccircle%20cx%3D%2218%22%20cy%3D%2230%22%20r%3D%223%22%20fill%3D%22%23fff2b6%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22%23fff2b6%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2230%22%20r%3D%223%22%20fill%3D%22%23fff2b6%22/%3E%0A%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:none;
  transform:translateY(-1px);
  animation:theOneCrownFloat 2.2s ease-in-out infinite;
}

.title-badge[data-title-key="the-one"]::after,
.title-badge[data-title-style="the-one"]::after,
.title-badge[data-title-key="the-rat"]::after,
.title-badge[data-title-style="the-rat"]::after{
  content:"";
  position:absolute;
  inset:-3px -7px;
  border-radius:.65rem;
  pointer-events:none;
  background:
    conic-gradient(from 0deg,
      rgba(255,215,0,.40),
      rgba(255,255,255,.16),
      rgba(255,215,0,.40));
  filter:blur(8px);
  opacity:.22;
  animation:theOneHalo 2.6s ease-in-out infinite;
}


/* Títulos del ranking de ratas. */
.title-badge[data-title-key="lord-of-rats"]{
  color:transparent;
  background-image:
    conic-gradient(from 0deg at 50% 50%, #7c3aed33, #a78bfa33, #4c1d9533, #7c3aed33),
    linear-gradient(90deg,#c084fc,#7c3aed,#4c1d95,#c084fc);
  background-size: 200% 200%, 260% 100%;
  background-position: 50% 50%, 0% 50%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(167,139,250,.35),0 0 18px rgba(124,58,237,.25);
  animation: abyssAureaSpin 6s linear infinite, abyssSpectral 2.6s linear infinite, abyssGlow 2.4s ease-in-out infinite;
}
.title-badge[data-title-key="lord-of-rats"]::after{
  content:" 🐀";
  display:inline-block;
  animation:emojiBob 2.2s ease-in-out infinite, spinSoft 8s linear infinite;
  color:#efe7ff; -webkit-text-fill-color:#efe7ff;
  filter:drop-shadow(0 0 4px #b79cff);
}
.title-badge[data-title-key="prime-rat"]{
  color:transparent;
  background-image:linear-gradient(90deg,#f87171,#b91c1c,#ef4444,#f87171);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(239,68,68,.28);
  animation:abyssFlow 3s linear infinite, abyssGlowRed 2.2s ease-in-out infinite;
}
.title-badge[data-title-key="prime-rat"]::before{
  content:"🐀";
  display:inline-block; margin-right:.1rem;
  animation:swordSwing 1.8s ease-in-out infinite;
  color:#ffd2d2; -webkit-text-fill-color:#ffd2d2;
}
.title-badge[data-title-key="master-rat"]{
  color:transparent;
  background-image:linear-gradient(90deg,#60a5fa,#2563eb,#1d4ed8,#60a5fa);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(59,130,246,.28);
  animation:abyssFlow 3.1s linear infinite, abyssGlowBlue 2.4s ease-in-out infinite;
}
.title-badge[data-title-key="master-rat"]::after{
  content:" 🐀";
  display:inline-block;
  animation:emojiBob 2.2s ease-in-out infinite, twinkle 1.8s ease-in-out infinite;
  color:#cfe4ff; -webkit-text-fill-color:#cfe4ff;
}
.title-badge[data-title-key="abyss-fighter"]{
  color:transparent;
  background-image:linear-gradient(90deg,#ffb15a,#ff7a00,#ffb15a);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(255,145,0,.28);
  animation:abyssFlow 3.2s linear infinite;
}
.title-badge[data-title-key="abyss-fighter"]::after{
  content:" 🔶";
  display:inline-block;
  animation:emojiBob 2.2s ease-in-out infinite, twinkle 1.8s ease-in-out infinite;
  color:#ffd3a1; -webkit-text-fill-color:#ffd3a1;
  filter:drop-shadow(0 0 4px rgba(255,146,43,.35));
}
.title-badge[data-title-key="abyss-duelist"]{
  color:transparent;
  background-image:linear-gradient(90deg,#a3e635,#16a34a,#a3e635);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(163,230,53,.25);
  animation:abyssFlow 3.2s linear infinite;
}
.title-badge[data-title-key="abyss-duelist"]::after{
  content:" 🟢";
  display:inline-block;
  animation:emojiBob 2.2s ease-in-out infinite, twinkle 1.8s ease-in-out infinite;
  color:#d9ffb3; -webkit-text-fill-color:#d9ffb3;
  filter:drop-shadow(0 0 4px rgba(126,230,53,.32));
}




/* Títulos especiales y personalizados. */
/*
  Guía de mantenimiento:
  - El texto visible se cambia en titles.json.
  - Mantén el mismo style para conservar animaciones y colores.
  - Cambia key y label solo cuando necesites renombrar el título.
*/
.title-badge[data-title-style="custom-1"], .title-badge[data-title-key="custom-1"],
.title-badge[data-title-style="custom-3"], .title-badge[data-title-key="custom-3"]{
  color:transparent;
  background-image:linear-gradient(90deg,#ffffff,#fff7d6,#f4e7ff,#d8b4fe,#ffffff,#fff2b3,#ffffff);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 16px rgba(255,255,255,.42),0 0 36px rgba(216,180,254,.30);
  animation:theOneShimmer 2.35s linear infinite, abyssGlow 2.15s ease-in-out infinite;
}
.title-badge[data-title-style="custom-1"]::after, .title-badge[data-title-key="custom-1"]::after,
.title-badge[data-title-style="custom-3"]::after, .title-badge[data-title-key="custom-3"]::after{
  content:" ⭐";
  display:inline-block;
  color:#fff7d6; -webkit-text-fill-color:#fff7d6;
  filter:drop-shadow(0 0 8px rgba(255,244,163,.55));
  animation:emojiBob 2s ease-in-out infinite, spinSoft 7s linear infinite;
}
.title-badge[data-title-style="custom-2"], .title-badge[data-title-key="custom-2"],
.title-badge[data-title-style="custom-4"], .title-badge[data-title-key="custom-4"]{
  color:transparent;
  background-image:linear-gradient(90deg,#f5e9ff,#a855f7,#4c1d95,#a855f7,#f5e9ff);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 14px rgba(168,85,247,.42),0 0 32px rgba(76,29,149,.30);
  animation:abyssFlow 2.4s linear infinite, abyssSpectral 2.4s linear infinite, abyssGlow 2.8s ease-in-out infinite;
}
.title-badge[data-title-style="custom-2"]::after, .title-badge[data-title-key="custom-2"]::after,
.title-badge[data-title-style="custom-4"]::after, .title-badge[data-title-key="custom-4"]::after{
  content:" ⭐";
  display:inline-block;
  color:#f5d0fe; -webkit-text-fill-color:#f5d0fe;
  filter:drop-shadow(0 0 9px rgba(216,180,254,.56));
  animation:emojiBob 2s ease-in-out infinite, spinSoft 7s linear infinite;
}
.title-badge[data-title-style="honorable"], .title-badge[data-title-key="honorable"]{
  color:transparent;
  background-image:linear-gradient(90deg,#fff7c2,#ffb347,#ff6a00,#ff3d00,#ffd166,#fff7c2);
  background-size:280% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(255,140,0,.35),0 0 26px rgba(255,72,0,.28);
  animation:theOneShimmer 2.2s linear infinite, abyssGlowRed 2.1s ease-in-out infinite;
}
.title-badge[data-title-style="honorable"]::after, .title-badge[data-title-key="honorable"]::after{
  content:" 🔥";
  display:inline-block;
  color:#ffe3b0; -webkit-text-fill-color:#ffe3b0;
  filter:drop-shadow(0 0 10px rgba(255,102,0,.55));
  animation:emojiBob 1.8s ease-in-out infinite, twinkle 1.1s ease-in-out infinite;
}
.title-badge[data-title-style="fighter-rat"], .title-badge[data-title-key="fighter-rat"]{
  color:transparent;
  background-image:linear-gradient(90deg,#ffb15a,#ff7a00,#ffb15a);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(255,145,0,.28);
  animation:abyssFlow 3.2s linear infinite;
}
.title-badge[data-title-style="fighter-rat"]::after, .title-badge[data-title-key="fighter-rat"]::after{
  content:" 🔶";
  display:inline-block;
  animation:emojiBob 2.2s ease-in-out infinite, twinkle 1.8s ease-in-out infinite;
  color:#ffd3a1; -webkit-text-fill-color:#ffd3a1;
  filter:drop-shadow(0 0 4px rgba(255,146,43,.35));
}
.title-badge[data-title-style="duelist-rat"], .title-badge[data-title-key="duelist-rat"]{
  color:transparent;
  background-image:linear-gradient(90deg,#a3e635,#16a34a,#a3e635);
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(163,230,53,.25);
  animation:abyssFlow 3.2s linear infinite;
}
.title-badge[data-title-style="duelist-rat"]::after, .title-badge[data-title-key="duelist-rat"]::after{
  content:" 🟢";
  display:inline-block;
  animation:emojiBob 2.2s ease-in-out infinite, twinkle 1.8s ease-in-out infinite;
  color:#d9ffb3; -webkit-text-fill-color:#d9ffb3;
  filter:drop-shadow(0 0 4px rgba(126,230,53,.32));
}

/* Títulos de la nueva era */
.title-badge[data-title-key="champion"]{
  color:transparent;
  background-image:
    linear-gradient(90deg,
      #fff8c9 0%,
      #ffe66d 14%,
      #ffd700 28%,
      #facc15 42%,
      #ffb703 52%,
      #ffd700 64%,
      #fff0a3 80%,
      #fbbf24 92%,
      #fff8c9 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:.075em;
  font-weight:1000;
  text-shadow:
    0 0 8px rgba(255,226,92,.42),
    0 0 18px rgba(250,204,21,.38),
    0 1px 0 rgba(161,98,7,.34);
  filter:drop-shadow(0 0 7px rgba(255,215,64,.34));
  animation:theOneShimmer 3.2s linear infinite, championGoldPulse 2.6s ease-in-out infinite;
}
.title-badge[data-title-key="champion"]::after{
  content:" 🏆";
  display:inline-block;
  animation:emojiBob 2.15s ease-in-out infinite, twinkle 1.85s ease-in-out infinite;
  color:#ffd56a;
  -webkit-text-fill-color:#ffd56a;
  filter:drop-shadow(0 0 4px rgba(255,224,92,.60)) drop-shadow(0 0 9px rgba(250,204,21,.34));
}
@keyframes championGoldPulse{
  0%,100%{text-shadow:0 0 9px rgba(255,229,112,.46),0 0 19px rgba(250,204,21,.34),0 1px 0 rgba(161,98,7,.30);}
  50%{text-shadow:0 0 13px rgba(255,245,180,.66),0 0 27px rgba(255,215,64,.48),0 1px 0 rgba(217,119,6,.28);}
}
.title-badge[data-title-key="mvp"], .title-badge[data-title-style="mvp"]{
  gap:.12rem;--g1:#fff7c8;--g2:#ffd24a;--g3:#ffb400;--g4:#fff7c8;
  color:transparent;background-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g2),var(--g4));background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 10px rgba(255,215,0,.16),0 0 22px rgba(255,215,0,.10);letter-spacing:.08em;font-weight:1000;animation:theOneShimmer 2.6s linear infinite;
}
.title-badge[data-title-key="mvp"]::before,.title-badge[data-title-style="mvp"]::before{content:"👑";display:inline-block;color:#fff2b6;-webkit-text-fill-color:#fff2b6;filter:drop-shadow(0 0 4px rgba(255,215,0,.35));animation:theOneCrownFloat 2.2s ease-in-out infinite;}
.title-badge[data-title-key="mvp"]::after,.title-badge[data-title-style="mvp"]::after{content:"";position:absolute;inset:-3px -7px;border-radius:.65rem;pointer-events:none;background:conic-gradient(from 0deg, rgba(255,215,0,.40), rgba(255,255,255,.16), rgba(255,215,0,.40));filter:blur(8px);opacity:.22;animation:theOneHalo 2.6s ease-in-out infinite;}
.title-badge[data-title-key="finalista"]{color:transparent;background-image:linear-gradient(90deg,#60a5fa,#2563eb,#1d4ed8,#60a5fa);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 12px rgba(59,130,246,.28);animation:abyssFlow 3.1s linear infinite, abyssGlowBlue 2.4s ease-in-out infinite;}
.title-badge[data-title-key="finalista"]::after{content:" 🔥";display:inline-block;animation:emojiBob 2.2s ease-in-out infinite, twinkle 1.8s ease-in-out infinite;color:#ffd8b0;-webkit-text-fill-color:#ffd8b0;}
.title-badge[data-title-key="speedrunner"]{color:transparent;background-image:linear-gradient(90deg,#a3e635,#16a34a,#a3e635);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 10px rgba(163,230,53,.25);animation:abyssFlow 3.2s linear infinite;}
.title-badge[data-title-key="speedrunner"]::after{content:" 🍃";display:inline-block;animation:emojiBob 2.2s ease-in-out infinite;color:#d8ffb0;-webkit-text-fill-color:#d8ffb0;}
.title-badge[data-title-key="ex-campeon"]{color:transparent;background-image:linear-gradient(90deg,#f87171,#b91c1c,#ef4444,#f87171);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 12px rgba(239,68,68,.28);animation:abyssFlow 3s linear infinite, abyssGlowRed 2.2s ease-in-out infinite;}
.title-badge[data-title-key="ex-campeon"]::before{content:"⚔️";display:inline-block;margin-right:.16rem;animation:swordSwing 1.8s ease-in-out infinite;color:#ffe58a;-webkit-text-fill-color:initial;filter:drop-shadow(0 0 5px rgba(255,229,138,.45));}
.title-badge[data-title-key="2nd-champion"]{color:transparent;background-image:linear-gradient(90deg,#60a5fa,#2563eb,#1d4ed8,#60a5fa);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 12px rgba(59,130,246,.28);animation:abyssFlow 3.1s linear infinite, abyssGlowBlue 2.4s ease-in-out infinite;}
.title-badge[data-title-key="2nd-champion"]::after{content:" 💎";display:inline-block;animation:emojiBob 2.2s ease-in-out infinite, twinkle 1.8s ease-in-out infinite;color:#cfe4ff;-webkit-text-fill-color:#cfe4ff;}


/* Recompensas visuales del ranking de ratas. */
.rk-rewards .title-badge[data-title-key="fighter-rat"],
.rk-rewards .title-badge[data-title-key="duelist-rat"]{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}


/* THE ONE: control de aura lateral. */
.title-badge[data-title-key="the-one"]::after,
.title-badge[data-title-style="the-one"]::after,
.title-badge[data-title-key="the-rat"]::after,
.title-badge[data-title-style="the-rat"]::after{
  content:none !important;
  display:none !important;
  background:none !important;
  filter:none !important;
  opacity:0 !important;
  animation:none !important;
  box-shadow:none !important;
}


/* MVP: control de aura dorada. */
.title-badge[data-title-key="mvp"]::before,
.title-badge[data-title-style="mvp"]::before{
  content:"" !important;
  width:1.45em;
  height:1.45em;
  display:inline-block;
  margin-right:.02rem;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2264%22%20height%3D%2264%22%20viewBox%3D%220%200%2064%2064%22%3E%0A%3Cdefs%3E%0A%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%0A%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff7c8%22/%3E%3Cstop%20offset%3D%220.45%22%20stop-color%3D%22%23ffd24a%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b77a00%22/%3E%0A%3C/linearGradient%3E%0A%3C/defs%3E%0A%3Cpath%20d%3D%22M8%2026l10%2010%2014-18%2014%2018%2010-10-6%2030H14L8%2026z%22%20fill%3D%22url%28%23g%29%22/%3E%0A%3Cpath%20d%3D%22M14%2052h36%22%20stroke%3D%22%23fff2b6%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22/%3E%0A%3Ccircle%20cx%3D%2218%22%20cy%3D%2230%22%20r%3D%223%22%20fill%3D%22%23fff2b6%22/%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2224%22%20r%3D%223%22%20fill%3D%22%23fff2b6%22/%3E%3Ccircle%20cx%3D%2246%22%20cy%3D%2230%22%20r%3D%223%22%20fill%3D%22%23fff2b6%22/%3E%0A%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  filter:none !important;
  transform:translateY(-1px);
  animation:theOneCrownFloat 2.2s ease-in-out infinite;
  color:initial !important;
  -webkit-text-fill-color:initial !important;
}
.title-badge[data-title-key="mvp"]::after,
.title-badge[data-title-style="mvp"]::after{
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:0 !important;
  animation:none !important;
}

/* Basado: título sin emblema duplicado. */
.title-badge[data-title-key="basado"]::after{content:none!important;display:none!important;}


/* Basado: emblema SVG independiente del gradiente de texto. */
.title-badge[data-title-key="basado"]{ gap:.4rem; }
.title-badge[data-title-key="basado"]::before{ content:none !important; display:none !important; }
.title-badge[data-title-key="basado"]::after{
  content:"" !important;
  display:inline-block !important;
  width:1.08em !important;
  height:1.08em !important;
  flex:0 0 auto !important;
  margin-left:.08rem !important;
  vertical-align:-.12em !important;
  background:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='36' r='30' fill='%23FFD23F'/%3E%3Cpath d='M12 36c2.3 15.7 12.5 26 24 26s21.7-10.3 24-26c-4.5 9-13.2 14.5-24 14.5S16.5 45 12 36z' fill='%23F4A62A' opacity='.55'/%3E%3Cpath d='M21 27h15v8c0 4.2-3.3 7.5-7.5 7.5S21 39.2 21 35v-8zm15 0h15v8c0 4.2-3.3 7.5-7.5 7.5S36 39.2 36 35v-8z' fill='%23111627'/%3E%3Cpath d='M34 31h4' stroke='%23111627' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M22 27l-7-4M50 27l7-4' stroke='%23111627' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M25 50c5.5 4.3 16.5 4.3 22 0' fill='none' stroke='%23734A18' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M24 30h9M39 30h9' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.25'/%3E%3C/svg%3E") !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:initial !important;
  color:initial !important;
  text-shadow:none !important;
  filter:drop-shadow(0 0 4px rgba(255,210,63,.55)) !important;
  animation:emojiBob 2.2s ease-in-out infinite !important;
}

/* Basado: emblema principal. */
.title-badge[data-title-key="basado"]::after{
  content:"😎" !important;
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  flex:0 0 auto !important;
  margin-left:.08rem !important;
  background:none !important;
  background-image:none !important;
  background-size:auto !important;
  background-position:initial !important;
  background-repeat:no-repeat !important;
  -webkit-background-clip:initial !important;
          background-clip:initial !important;
  color:initial !important;
  -webkit-text-fill-color:initial !important;
  text-shadow:0 0 8px rgba(255,210,63,.45) !important;
  filter:drop-shadow(0 0 4px rgba(255,210,63,.45)) !important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
  font-size:1.04em !important;
  line-height:1 !important;
  transform:translateY(-.02em) !important;
  animation:emojiBob 2.2s ease-in-out infinite !important;
}

/* Basado: sistema de emblema animado. */
.title-badge[data-title-key="basado"]::after,
.title-badge[data-title-style="anim-basado"]::after{
  content:"😎" !important;
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  margin-left:.12rem !important;
  background:none !important;
  -webkit-background-clip:initial !important;
          background-clip:initial !important;
  -webkit-text-fill-color:initial !important;
  color:initial !important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
  line-height:1 !important;
  filter:drop-shadow(0 0 5px rgba(255,210,63,.55)) !important;
  animation:emojiBob 1.8s ease-in-out infinite !important;
}

/* Títulos globales VIP y Basado: estilos compartidos para todas las páginas. */
.title-badge[data-title-key="vip"],
.title-badge[data-title-style="vip-rgb"]{
  display:inline-flex !important;
  align-items:center !important;
  gap:.28rem !important;
  animation:vipRgbFlow 6.5s linear infinite, vipGlow 4.8s ease-in-out infinite !important;
}
.title-badge[data-title-key="vip"]::before,
.title-badge[data-title-style="vip-rgb"]::before,
.title-badge.vip::before{
  content:"💎" !important;
  display:inline-block !important;
  position:relative !important;
  width:auto !important;
  height:auto !important;
  margin:0 .04rem 0 0 !important;
  padding:0 !important;
  line-height:1 !important;
  vertical-align:middle !important;
  color:#e9d5ff !important;
  -webkit-text-fill-color:#e9d5ff !important;
  text-shadow:none !important;
  background:none !important;
  -webkit-background-clip:initial !important;
          background-clip:initial !important;
  transform-origin:center bottom !important;
  animation:pvTitleBasadoBounceV4 3.8s ease-in-out infinite !important;
  will-change:top;
}
.title-badge[data-title-key="basado"],
.title-badge[data-title-style="anim-basado"],
.title-badge.basado,
.title-badge.anim-basado{
  display:inline-flex !important;
  align-items:center !important;
  gap:.34rem !important;
}
.title-badge[data-title-key="basado"]::after,
.title-badge[data-title-style="anim-basado"]::after,
.title-badge.basado::after,
.title-badge.anim-basado::after{
  content:"😎" !important;
  display:inline-block !important;
  position:relative !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  min-height:0 !important;
  margin-left:.08rem !important;
  padding:0 !important;
  line-height:1 !important;
  vertical-align:middle !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:initial !important;
          background-clip:initial !important;
  color:initial !important;
  -webkit-text-fill-color:initial !important;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif !important;
  text-shadow:0 0 8px rgba(255,210,63,.44) !important;
  transform-origin:center bottom !important;
  animation:pvTitleBasadoBounceV4 3.8s ease-in-out infinite !important;
  will-change:top;
}
@keyframes pvTitleVipDiamondFloatV4{
  0%,100%{
    top:-.03em;
    filter:drop-shadow(0 0 4px rgba(216,180,254,.58));
  }
  50%{
    top:-.12em;
    filter:drop-shadow(0 0 7px rgba(216,180,254,.78));
  }
}
@keyframes pvTitleBasadoBounceV4{
  0%,100%{ top:0; }
  42%{ top:-.18em; }
  62%{ top:-.08em; }
}


/* THE ONE y THE RAT: aura detrás del texto sin afectar emblemas. */
.title-badge[data-title-key="the-one"],
.title-badge[data-title-style="the-one"],
.title-badge[data-title-key="the-rat"],
.title-badge[data-title-style="the-rat"]{
  isolation:isolate;
  text-shadow:
    0 0 8px rgba(255,247,200,.26),
    0 0 16px rgba(255,210,74,.34),
    0 0 30px rgba(255,180,0,.22),
    0 1px 0 rgba(120,70,0,.36) !important;
  filter:drop-shadow(0 0 5px rgba(255,215,0,.24));
}
.title-badge[data-title-key="the-one"]::after,
.title-badge[data-title-style="the-one"]::after,
.title-badge[data-title-key="the-rat"]::after,
.title-badge[data-title-style="the-rat"]::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:-.30em -.55em !important;
  border-radius:.72rem !important;
  pointer-events:none !important;
  opacity:.44 !important;
  background:
    radial-gradient(circle at 18% 50%, rgba(255,247,200,.44), transparent 34%),
    radial-gradient(circle at 82% 50%, rgba(255,194,42,.30), transparent 38%),
    linear-gradient(90deg, rgba(255,215,0,.16), rgba(255,255,255,.10), rgba(255,180,0,.16)) !important;
  filter:blur(8px) !important;
  box-shadow:
    0 0 16px rgba(255,215,0,.18),
    inset 0 0 12px rgba(255,255,255,.10) !important;
  animation:theOneHalo 2.6s ease-in-out infinite !important;
}

/* Ajuste visual de corona para THE ONE y THE RAT. */
@keyframes theOneCrownFloatV63{
  0%,100%{ transform:translateY(-1.6px); }
  50%{ transform:translateY(-3.4px); }
}
.title-badge[data-title-key="the-one"]::before,
.title-badge[data-title-style="the-one"]::before,
.title-badge[data-title-key="the-rat"]::before,
.title-badge[data-title-style="the-rat"]::before{
  position:relative;
  top:-.025em;
  vertical-align:middle;
  animation:theOneCrownFloatV63 2.2s ease-in-out infinite !important;
}

/* SpeedRunner: estilo del título y compatibilidad con títulos Lord. */
.title-badge[data-title-key="speedrunner"]{
  font-weight:1000;
  letter-spacing:.075em;
  text-rendering:geometricPrecision;
  background-image:linear-gradient(90deg,#dcff8b,#a3e635,#22c55e,#84cc16,#dcff8b);
  background-size:280% 100%;
  text-shadow:
    0 0 10px rgba(190,242,100,.42),
    0 0 22px rgba(34,197,94,.34),
    0 0 34px rgba(21,128,61,.22),
    0 1px 0 rgba(20,83,45,.36);
  filter:drop-shadow(0 0 7px rgba(132,204,22,.25));
  animation:abyssFlow 2.55s linear infinite, speedRunnerGlow 2.25s ease-in-out infinite;
}
.title-badge[data-title-key="speedrunner"]::after{
  position:relative;
  top:-.025em;
  margin-left:.08rem;
  font-size:1.03em;
  line-height:1;
  animation:speedRunnerLeaf 1.65s ease-in-out infinite, twinkle 1.45s ease-in-out infinite;
  color:#ddff9b;
  -webkit-text-fill-color:#ddff9b;
  filter:drop-shadow(0 0 6px rgba(190,242,100,.65)) drop-shadow(0 0 12px rgba(34,197,94,.34));
}

@keyframes speedRunnerGlow{
  0%,100%{text-shadow:0 0 10px rgba(190,242,100,.42),0 0 22px rgba(34,197,94,.34),0 0 34px rgba(21,128,61,.20),0 1px 0 rgba(20,83,45,.34);}
  50%{text-shadow:0 0 14px rgba(236,255,181,.58),0 0 30px rgba(74,222,128,.46),0 0 44px rgba(22,163,74,.30),0 1px 0 rgba(20,83,45,.28);}
}
@keyframes speedRunnerLeaf{
  0%,100%{transform:translateY(0) rotate(-6deg) scale(1);}
  35%{transform:translateY(-3px) rotate(7deg) scale(1.08);}
  70%{transform:translateY(1px) rotate(-10deg) scale(.98);}
}

/* Títulos Lord: acabado visual sin aura adicional. */
.title-badge[data-title-key="lord-of-abyss"],
.title-badge[data-title-key="lord-of-rats"]{
  font-weight:1000;
  letter-spacing:.07em;
  text-rendering:geometricPrecision;
  text-transform:uppercase;
}

.title-badge[data-title-key="lord-of-abyss"]::after{
  content:"🌀";
  margin-left:.015rem;
  position:relative;
  top:-.015em;
  line-height:1;
  vertical-align:middle;
}

.title-badge[data-title-key="lord-of-rats"]::after{
  content:"🐭";
  display:inline-block;
  margin-left:.015rem;
  position:relative;
  top:-.015em;
  line-height:1;
  vertical-align:middle;
  animation:lordRatHopV68 1.85s ease-in-out infinite;
  color:#efe7ff;
  -webkit-text-fill-color:#efe7ff;
  filter:drop-shadow(0 0 4px #b79cff);
}

.title-badge[data-title-key="master-rat"]::after{
  content:" 🐁";
}

@keyframes lordRatHopV68{
  0%,100%{ transform:translateY(0) scale(1); }
  42%{ transform:translateY(-2.5px) scale(1.04); }
  62%{ transform:translateY(-1px) scale(1.01); }
}

/* Bucles RGB suaves para títulos especiales. */
.title-badge[data-title-key="lord-of-abyss"],
.title-badge[data-title-key="lord-of-rats"]{
  background-image:linear-gradient(90deg,
    #c084fc 0%,
    #a78bfa 18%,
    #7c3aed 36%,
    #4c1d95 54%,
    #7c3aed 72%,
    #a78bfa 88%,
    #c084fc 100%) !important;
  background-size:220% 100% !important;
  background-position:0% 50%;
  background-repeat:repeat;
  animation:pvLordRgbNoCutV70 5.8s ease-in-out infinite alternate, abyssGlow 2.4s ease-in-out infinite !important;
}

.title-badge[data-title-style="custom-1"], .title-badge[data-title-key="custom-1"],
.title-badge[data-title-style="custom-3"], .title-badge[data-title-key="custom-3"]{
  background-image:linear-gradient(90deg,
    #ffffff 0%,
    #fff7d6 15%,
    #f4e7ff 31%,
    #d8b4fe 47%,
    #ffffff 63%,
    #fff2b3 80%,
    #ffffff 100%) !important;
  background-size:240% 100% !important;
  background-position:0% 50%;
  background-repeat:repeat;
  animation:pvCustomRgbNoCutV70 5.6s ease-in-out infinite alternate, abyssGlow 2.15s ease-in-out infinite !important;
}

.title-badge[data-title-style="custom-2"], .title-badge[data-title-key="custom-2"],
.title-badge[data-title-style="custom-4"], .title-badge[data-title-key="custom-4"]{
  background-image:linear-gradient(90deg,
    #f5e9ff 0%,
    #d8b4fe 18%,
    #a855f7 36%,
    #4c1d95 54%,
    #a855f7 72%,
    #d8b4fe 88%,
    #f5e9ff 100%) !important;
  background-size:240% 100% !important;
  background-position:0% 50%;
  background-repeat:repeat;
  animation:pvCustomRgbNoCutV70 5.8s ease-in-out infinite alternate, abyssGlow 2.8s ease-in-out infinite !important;
}

@keyframes pvLordRgbNoCutV70{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}
@keyframes pvCustomRgbNoCutV70{
  0%{ background-position:0% 50%; }
  100%{ background-position:100% 50%; }
}

/* Títulos Ex-Speedrunner y Ex-MVP. */
.title-badge[data-title-key="ex-speedrunner"],
.title-badge[data-title-style="ex-speedrunner"]{
  color:transparent;
  font-weight:800;
  letter-spacing:.04em;
  text-rendering:geometricPrecision;
  background-image:linear-gradient(90deg,#dcff8b,#a3e635,#22c55e,#84cc16,#dcff8b);
  background-size:280% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:
    0 0 10px rgba(190,242,100,.42),
    0 0 22px rgba(34,197,94,.34),
    0 0 34px rgba(21,128,61,.22),
    0 1px 0 rgba(20,83,45,.30);
  filter:drop-shadow(0 0 7px rgba(132,204,22,.22));
  animation:abyssFlow 2.55s linear infinite, speedRunnerGlow 2.25s ease-in-out infinite;
}
.title-badge[data-title-key="ex-speedrunner"]::after,
.title-badge[data-title-style="ex-speedrunner"]::after{
  content:" 🍃";
  display:inline-block;
  position:relative;
  top:-.025em;
  margin-left:.08rem;
  font-size:1.03em;
  line-height:1;
  animation:speedRunnerLeaf 1.65s ease-in-out infinite, twinkle 1.45s ease-in-out infinite;
  color:#ddff9b;
  -webkit-text-fill-color:#ddff9b;
  filter:drop-shadow(0 0 6px rgba(190,242,100,.65)) drop-shadow(0 0 12px rgba(34,197,94,.34));
}

.title-badge[data-title-key="ex-mvp"],
.title-badge[data-title-style="ex-mvp"]{
  gap:.12rem;
  --g1:#fff7c8;
  --g2:#ffd24a;
  --g3:#ffb400;
  --g4:#fff7c8;
  color:transparent;
  background-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g2),var(--g4));
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 10px rgba(255,215,0,.16),0 0 22px rgba(255,215,0,.10);
  letter-spacing:.055em;
  font-weight:800;
  animation:theOneShimmer 2.6s linear infinite;
}
.title-badge[data-title-key="ex-mvp"]::before,
.title-badge[data-title-style="ex-mvp"]::before{
  content:"👑";
  display:inline-block;
  color:#fff2b6;
  -webkit-text-fill-color:#fff2b6;
  filter:drop-shadow(0 0 4px rgba(255,215,0,.35));
  animation:theOneCrownFloat 2.2s ease-in-out infinite;
}
.title-badge[data-title-key="ex-mvp"]::after,
.title-badge[data-title-style="ex-mvp"]::after{
  content:"";
  position:absolute;
  inset:-3px -7px;
  border-radius:.65rem;
  pointer-events:none;
  background:conic-gradient(from 0deg, rgba(255,215,0,.40), rgba(255,255,255,.16), rgba(255,215,0,.40));
  filter:blur(8px);
  opacity:.22;
  animation:theOneHalo 2.6s ease-in-out infinite;
}