/* ════════════════════════════════════════════════════════════════════
   Pupito — cosméticos de la tienda (public/js/cosmetics.js)
   Ilustraciones del avatar (avatares gratis, iconos premium, marcos), marcos CSS,
   brillos y fuentes del nombre, títulos.
   Una clase por artículo: .cx-<id> (p. ej. .cx-frame-oro, .cx-glow-fuego).
   Se carga después de brutal.css / retro.css. Animaciones baratas (transform,
   opacity, background-position) y apagadas con prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── Avatar: tamaño xl ───────────────────────────── */

.avatar.xl {
  width: 96px;
  height: 96px;
  font-size: 3rem;
}

:root[data-style='brutal'] .avatar.xl {
  border-width: 3px;
}

:root[data-style='retro'] .avatar.xl {
  box-shadow: 0 0 0 4px var(--px-line), inset 0 -4px 0 rgba(0, 0, 0, 0.3), inset 0 4px 0 rgba(255, 255, 255, 0.25);
}

/* ───────────────────────────── Avatar con cosméticos ─────────────────────────────
   --u = 1 % del ancho del avatar (unidades de contenedor): aros y adornos escalan
   igual en sm, md, lg, xl y en los tamaños que fija cada pantalla.
   --cx-bw = grosor del contorno de tinta propio del tema (el aro empieza fuera). */

.avatar.cx-av {
  /* Contenedor de consultas (cqw) y bloque contenedor de .cx-ring / .cx-deco sin cambiar
     su `position` (algunas pantallas lo posicionan en absoluto). */
  container-type: size;
  contain: layout;
  --u: 1cqw;
  --cx-ink: #14111f;
  --cx-bw: 2px;
}

@supports not (width: 1cqw) {
  .avatar.cx-av {
    --u: 0.019em;
  }
}

:root[data-style='brutal'] .avatar.cx-av {
  --cx-ink: #111;
}

:root[data-style='brutal'] .avatar.xl.cx-av {
  --cx-bw: 3px;
}

:root[data-style='retro'] .avatar.cx-av {
  --cx-ink: var(--px-line);
  --cx-bw: 3px;
}

:root[data-style='retro'] .avatar.xl.cx-av {
  --cx-bw: 4px;
}

/* ── Ilustraciones (public/js/art.js) ──
   La caja .avatar es el disco (fondo = color del jugador, contorno del tema). .cx-stage cubre el
   disco con su contorno (--cx-in: grosor del borde que el tema dibuja por dentro de la caja) y en
   él se colocan, por porcentajes, los lienzos de tools/build_art.py:
   - busto: lienzo estándar, disco = 0.70 de su ancho y centrado al 0.60 de su alto → el lienzo
     mide 1/0.70 del disco y sobresale (1/0.70 − 1)/2 por los lados, 0.60/0.70 − 0.5 por arriba;
     las orejas y crestas quedan por encima del disco.
   - aro: lienzo cuadrado de 1.7 diámetros centrado en el disco (sobresale 35 % por cada lado).
   Nada recorta: .avatar y sus contenedores dejan ver lo que sobresale. */
.avatar.cx-pic,
.avatar.cx-art-frame {
  --cx-in: 0px;
}

:root[data-style='brutal'] .avatar:is(.cx-pic, .cx-art-frame) {
  --cx-in: 2px;
}

:root[data-style='brutal'] .avatar.xl:is(.cx-pic, .cx-art-frame) {
  --cx-in: 3px;
}

.avatar > .cx-stage {
  position: absolute;
  inset: calc(-1 * var(--cx-in, 0px));
  pointer-events: none;
}

.cx-stage > .cx-bust {
  position: absolute;
  left: -21.4286%;
  top: -35.7143%;
  width: 142.8571%;
  height: 142.8571%;
}

.cx-stage > .cx-ring-art {
  position: absolute;
  inset: -35%;
}

.cx-stage img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  /* Ilustraciones suavizadas también en retro (que pixela las imágenes del cuerpo). */
  image-rendering: auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* Legendarios: tira de 4 fotogramas (160 ms cada uno). */
.cx-stage > .cx-anim {
  overflow: hidden;
}

.cx-stage > .cx-anim > img {
  width: 400%;
  animation: cx-sprite 0.64s steps(4) infinite;
}

/* El aro ilustrado es redondo: también en retro (donde el disco es cuadrado). */
:root[data-style='retro'] .avatar.cx-art-frame {
  border-radius: 50%;
}

/* El aro ilustrado sobresale un 20–30 % por cada lado: en los tamaños de fichas y listas (sm,
   md y las cajas de los juegos) el avatar se encoge un poco para que sobresalga lo mismo que los
   marcos CSS y quepa en sus contenedores sin cambiar el diseño (`scale` no mueve nada). */
.avatar.cx-art-frame:not(.lg, .xl) {
  scale: 0.86;
}

/* Aro (bandas de color con box-shadow, sigue la forma del avatar) y adorno SVG. */
.avatar > .cx-ring {
  position: absolute;
  inset: calc(-1 * var(--cx-bw));
  border-radius: inherit;
  pointer-events: none;
}

.avatar > .cx-deco {
  position: absolute;
  inset: -25%;
  pointer-events: none;
}

.cx-deco > .cx-deco-art {
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  color: var(--cx-ink);
}

.avatar.cx-framed {
  --fi: max(1px, calc(var(--u) * 2.6));
  --fb: max(2px, calc(var(--u) * 7.5));
  --r1: var(--fb);
  --r2: calc(var(--fb) + var(--fi));
}

/* Animaciones de los adornos SVG: cada pieza gira/escala sobre su propio centro. */
.cx-deco-art [class*='cxa-'] {
  transform-box: fill-box;
  transform-origin: center;
}

.cx-deco-art .cxa-twinkle {
  animation: cx-twinkle 2.4s ease-in-out infinite;
}

.cx-deco-art .cxa-twinkle-soft {
  animation: cx-twinkle-soft 2.8s ease-in-out infinite;
}

.cx-deco-art .cxa-lick {
  transform-origin: 50% 100%;
  animation: cx-lick 1.1s ease-in-out infinite;
}

/* Retraso propio de cada pieza (después de los atajos `animation`, que lo reinician). */
.cx-deco-art [class*='cxa-'] {
  animation-delay: var(--d, 0s);
}

/* ───────────────────────────── Marcos ───────────────────────────── */

/* Plata: aro pulido con brillo estático. */
.cx-frame-plata > .cx-ring {
  box-shadow:
    0 0 0 calc(var(--fb) * 0.3) #f7f9fc,
    0 0 0 calc(var(--fb) * 0.72) #c7cdd8,
    0 0 0 var(--r1) #959eae,
    0 0 0 var(--r2) var(--cx-ink);
}

/* Pixel: borde escalonado de 8 bits (biselado claro arriba / oscuro abajo). Sólo el dibujado con CSS:
   con su ilustración (.cx-art-frame) el aro es redondo y el avatar no puede quedar cuadrado detrás. */
.avatar.cx-frame-pixel:not(.cx-art-frame),
.avatar.cx-frame-pixel:not(.cx-art-frame) > .cx-ring {
  border-radius: 0;
}

.cx-frame-pixel:not(.cx-art-frame) > .cx-ring {
  --k: max(2px, calc(var(--u) * 7));
  --nk: calc(-1 * var(--k));
  box-shadow:
    0 var(--nk) 0 0 #7ff5c0,
    var(--nk) 0 0 0 #7ff5c0,
    0 var(--k) 0 0 #14a56c,
    var(--k) 0 0 0 #14a56c,
    var(--nk) var(--nk) 0 0 var(--cx-ink),
    var(--k) var(--nk) 0 0 var(--cx-ink),
    var(--nk) var(--k) 0 0 var(--cx-ink),
    var(--k) var(--k) 0 0 var(--cx-ink),
    0 calc(var(--nk) * 2) 0 0 var(--cx-ink),
    0 calc(var(--k) * 2) 0 0 var(--cx-ink),
    calc(var(--nk) * 2) 0 0 0 var(--cx-ink),
    calc(var(--k) * 2) 0 0 0 var(--cx-ink);
}

.cx-frame-pixel:not(.cx-art-frame) > .cx-ring::after {
  content: '';
  position: absolute;
  top: calc(var(--k) * -0.62);
  left: 18%;
  width: max(2px, calc(var(--u) * 9));
  height: max(1px, calc(var(--k) * 0.36));
  background: #fff;
  box-shadow: calc(var(--u) * 12) 0 0 #fff;
}

/* Hielo: aro escarchado con cristales. */
.cx-frame-hielo > .cx-ring {
  box-shadow:
    0 0 0 calc(var(--fb) * 0.34) #f2fcff,
    0 0 0 calc(var(--fb) * 0.7) #a9e8ff,
    0 0 0 var(--r1) #5bc6f2,
    0 0 0 var(--r2) var(--cx-ink),
    0 0 calc(var(--u) * 10) calc(var(--u) * 1) rgba(125, 211, 252, 0.55);
}

/* Oro: aro macizo con destellos. */
.cx-frame-oro > .cx-ring {
  box-shadow:
    0 0 0 calc(var(--fb) * 0.28) #c88a00,
    0 0 0 calc(var(--fb) * 0.56) #fff0a6,
    0 0 0 var(--r1) #ffc21a,
    0 0 0 var(--r2) var(--cx-ink);
}

/* Neón: tubo de luz con halo que late. */
.cx-frame-neon > .cx-ring {
  box-shadow:
    0 0 0 calc(var(--fb) * 0.3) #ff2fb9,
    0 0 0 calc(var(--fb) * 0.68) #ffe0f6,
    0 0 0 var(--r1) #ff2fb9,
    0 0 0 var(--r2) var(--cx-ink);
}

.cx-frame-neon > .cx-ring::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--r2));
  border-radius: inherit;
  box-shadow:
    0 0 calc(var(--u) * 9) calc(var(--u) * 2) rgba(255, 47, 185, 0.85),
    0 0 calc(var(--u) * 22) calc(var(--u) * 4) rgba(255, 47, 185, 0.4);
  animation: cx-pulse 1.5s ease-in-out infinite alternate;
}

/* Fuego: aro al rojo con llamas que suben. */
.cx-frame-fuego > .cx-ring {
  box-shadow:
    0 0 0 calc(var(--fb) * 0.45) #ffd23f,
    0 0 0 var(--r1) #ff4d1f,
    0 0 0 var(--r2) var(--cx-ink),
    0 0 calc(var(--u) * 14) calc(var(--u) * 2) rgba(255, 90, 31, 0.5);
}

/* Arcoíris y galaxia (y los exclusivos caramelo y cristal): banda con máscara de anillo sobre un
   disco de tinta (el arcoíris gira; en retro, por pasos). */
.cx-frame-arcoiris > .cx-ring,
.cx-frame-galaxia > .cx-ring,
.cx-frame-caramelo > .cx-ring,
.cx-frame-cristal > .cx-ring {
  box-shadow: 0 0 0 var(--r2) var(--cx-ink);
}

.cx-frame-arcoiris > .cx-ring::before,
.cx-frame-galaxia > .cx-ring::before,
.cx-frame-caramelo > .cx-ring::before,
.cx-frame-cristal > .cx-ring::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--fb));
  border-radius: inherit;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--fb) - 0.5px), #000 calc(100% - var(--fb)));
  mask: radial-gradient(closest-side, transparent calc(100% - var(--fb) - 0.5px), #000 calc(100% - var(--fb)));
}

.cx-frame-arcoiris > .cx-ring::before {
  background: conic-gradient(#ff4d6d, #ff9a3c, #ffe14d, #4ade80, #38bdf8, #818cf8, #e879f9, #ff4d6d);
  animation: cx-spin 3.2s linear infinite;
}

/* Galaxia: banda de nebulosa con estrellas y adornos en órbita. */
.cx-frame-galaxia > .cx-ring::before {
  background:
    radial-gradient(circle, #fff 0 0.6px, transparent 1.1px) 0 0 / 9px 9px,
    radial-gradient(circle, #ffe9a8 0 0.5px, transparent 1px) 4px 5px / 13px 11px,
    conic-gradient(#21125a, #5b21b6, #c026d3, #2b1a6e, #1d4ed8, #21125a);
}

.cx-frame-galaxia > .cx-ring {
  box-shadow:
    0 0 0 var(--r2) var(--cx-ink),
    0 0 calc(var(--u) * 12) calc(var(--u) * 2) rgba(139, 92, 246, 0.45);
}

.cx-frame-galaxia > .cx-deco {
  animation: cx-spin 14s linear infinite;
}

/* Laurel dorado: aro fino bajo la corona de hojas. */
.cx-frame-laurel > .cx-ring {
  box-shadow:
    0 0 0 calc(var(--fb) * 0.5) #ffcf3a,
    0 0 0 calc(var(--fb) * 0.5 + var(--fi)) var(--cx-ink),
    0 0 calc(var(--u) * 12) calc(var(--u) * 1) rgba(255, 207, 58, 0.45);
}

/* Exclusivos de los sobres (tienen ilustración: esto es el respaldo si la imagen no carga).
   Caramelo: rayas rojas y blancas; cristal: facetas violetas y rosas con brillo; dragón: oro
   macizo con un resplandor carmesí. */
.cx-frame-caramelo > .cx-ring::before {
  background: repeating-conic-gradient(#e11d48 0 15deg, #fff7f8 15deg 30deg);
}

.cx-frame-cristal > .cx-ring::before {
  background: repeating-conic-gradient(#f5f3ff 0 18deg, #a78bfa 18deg 36deg, #f0abfc 36deg 54deg, #7c3aed 54deg 72deg, #5eead4 72deg 80deg);
}

.cx-frame-cristal > .cx-ring {
  box-shadow:
    0 0 0 var(--r2) var(--cx-ink),
    0 0 calc(var(--u) * 10) calc(var(--u) * 1) rgba(167, 139, 250, 0.55);
}

.cx-frame-dragon > .cx-ring {
  box-shadow:
    0 0 0 calc(var(--fb) * 0.3) #b45309,
    0 0 0 calc(var(--fb) * 0.62) #ffe08a,
    0 0 0 var(--r1) #f59e0b,
    0 0 0 var(--r2) var(--cx-ink),
    0 0 calc(var(--u) * 12) calc(var(--u) * 2) rgba(220, 38, 38, 0.5);
}

/* Retro: aros cuadrados, colores planos y movimiento por pasos. */
:root[data-style='retro'] .cx-frame-arcoiris > .cx-ring::before,
:root[data-style='retro'] .cx-frame-galaxia > .cx-ring::before,
:root[data-style='retro'] .cx-frame-caramelo > .cx-ring::before,
:root[data-style='retro'] .cx-frame-cristal > .cx-ring::before {
  padding: var(--fb);
  -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);
}

:root[data-style='retro'] .cx-frame-arcoiris > .cx-ring::before {
  background: conic-gradient(from var(--cx-a, 0deg), #ff4d6d 0 12.5%, #ff9a3c 0 25%, #ffe14d 0 37.5%, #4ade80 0 50%, #38bdf8 0 62.5%, #818cf8 0 75%, #e879f9 0 87.5%, #ff6fb5 0);
  animation: cx-hue 2.4s steps(8) infinite;
}

:root[data-style='retro'] .cx-frame-galaxia > .cx-deco,
:root[data-style='retro'] .cx-frame-galaxia > .cx-deco .cxa-twinkle-soft {
  animation-timing-function: steps(24);
}

:root[data-style='retro'] .cx-frame-neon > .cx-ring::before {
  animation-timing-function: steps(3);
}

@property --cx-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Adornos con versión redonda (brutal) y cuadrada (retro). */
.cx-deco-art .cx-square,
:root[data-style='retro'] .cx-deco-art .cx-round {
  display: none;
}

:root[data-style='retro'] .cx-deco-art .cx-square {
  display: inline;
}

:root[data-style='retro'] .cx-deco-art .cxa-lick {
  animation-timing-function: steps(3);
}

:root[data-style='retro'] .cx-deco-art .cx-glint-tr {
  transform: translate(9px, -9px);
}

:root[data-style='retro'] .cx-deco-art .cx-glint-bl {
  transform: translate(-9px, 9px);
}

/* En los tamaños pequeños, los adornos más cargados se quedan quietos. */
.avatar.sm .cx-deco .cxa-lick {
  animation: none;
}

/* ───────────────────────────── Nombre ─────────────────────────────
   span.pname-x > span.cx-n (+ span.cx-title). Sin cosméticos se ve igual que el
   texto de siempre; con brillo, el nombre tiene un margen invisible para el halo. */

.pname-x {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

.pname-x > .cx-n {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bandera del país (§10, public/js/flags.js): justo después del nombre, del alto de la letra, con
   las esquinas redondeadas y un borde fino. En .pname-x, el nombre (con elipsis) y la bandera van
   en la misma fila y el título debajo, ocupando las dos columnas. */
.pflag {
  display: inline-block;
  flex: none;
  width: 1.24em;
  height: 0.93em;
  margin-left: 0.32em;
  vertical-align: -0.1em;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.38);
  background: rgba(17, 17, 17, 0.08);
  user-select: none;
}

:root[data-theme='dark'] .pflag,
.cx-on-dark .pflag {
  box-shadow: 0 0 0 1px rgba(244, 239, 227, 0.45);
  background: rgba(244, 239, 227, 0.1);
}

/* En los nombres grandes (perfil, ficha de la cuenta) la bandera no crece tanto como la letra. */
.pp-name .pflag,
.acct-hero-name .pflag {
  width: 0.99em;
  height: 0.74em;
  vertical-align: 0;
}

.pname-x.cx-has-flag {
  display: inline-grid;
  grid-template-columns: minmax(0, max-content) auto;
  align-items: center;
  justify-content: start;
}

.pname-x.cx-has-flag > .pflag {
  grid-column: 2;
  grid-row: 1;
}

.pname-x.cx-has-flag > .cx-title {
  grid-column: 1 / -1;
}

.pname-x.cx-has-glow > .cx-n {
  position: relative;
  padding: 0.2em 0.26em;
  margin: -0.2em -0.26em;
  color: var(--cx-fg);
  text-shadow: var(--cx-sh, none);
}

/* Paleta del brillo según el fondo: clara por defecto, oscura en modo oscuro y sobre
   superficies oscuras (ficha retro de la barra). .cx-on-dark / .cx-on-light fuerzan una. */
.pname-x {
  --cx-fg: var(--cx-lfg);
  --cx-sh: var(--cx-lsh);
  --cx-bg: var(--cx-lbg);
  --cx-gl: var(--cx-lgl);
}

:root[data-theme='dark'] .pname-x,
:root[data-style='retro'] .profile-chip .pname-x,
.cx-on-dark .pname-x {
  --cx-fg: var(--cx-dfg);
  --cx-sh: var(--cx-dsh);
  --cx-bg: var(--cx-dbg);
  --cx-gl: var(--cx-dgl);
}

:root[data-style='brutal'] .profile-chip:hover .pname-x,
:root .cx-on-light .pname-x {
  --cx-fg: var(--cx-lfg);
  --cx-sh: var(--cx-lsh);
  --cx-bg: var(--cx-lbg);
  --cx-gl: var(--cx-lgl);
}

/* Neón rosa / cian: núcleo claro y halo de tubo (en claro, color intenso y halo suave). */
.pname-x.cx-glow-neon-rosa {
  --cx-lfg: #e0157d;
  --cx-lsh: 0 0 0.3em rgba(255, 47, 160, 0.5);
  --cx-dfg: #ffd8ef;
  --cx-dsh: 0 0 0.05em #fff, 0 0 0.2em #ff4fb4, 0 0 0.5em #ff2d95, 0 0 0.9em rgba(255, 45, 149, 0.6);
}

.pname-x.cx-glow-neon-cian {
  --cx-lfg: #0682a6;
  --cx-lsh: 0 0 0.3em rgba(34, 211, 238, 0.65);
  --cx-dfg: #dcfdff;
  --cx-dsh: 0 0 0.05em #fff, 0 0 0.2em #3be4ff, 0 0 0.5em #0fc5ec, 0 0 0.9em rgba(15, 197, 236, 0.55);
}

/* Sombra: humo oscuro alrededor (en oscuro, letras claras sobre sombra negra). */
.pname-x.cx-glow-sombra {
  --cx-lfg: #221b38;
  --cx-lsh: 0.06em 0.08em 0 rgba(34, 27, 56, 0.22), 0 0 0.3em rgba(34, 27, 56, 0.55), 0 0 0.6em rgba(34, 27, 56, 0.3);
  --cx-dfg: #d4cdee;
  --cx-dsh: 0.06em 0.08em 0 #000, 0 0 0.25em #000, 0 0 0.55em rgba(76, 29, 149, 0.9), 0 0 1em rgba(0, 0, 0, 0.9);
}

/* Tóxico: verde radiactivo. */
.pname-x.cx-glow-toxico {
  --cx-lfg: #3a9600;
  --cx-lsh: 0 0 0.25em rgba(132, 255, 0, 0.75), 0 0.05em 0 rgba(30, 80, 0, 0.25);
  --cx-dfg: #c8ff4d;
  --cx-dsh: 0 0 0.08em #a3ff12, 0 0 0.35em #5cff1a, 0 0 0.8em rgba(57, 255, 20, 0.55);
}

/* Pulso: el halo late (capa propia, sólo cambia la opacidad). */
.pname-x.cx-glow-pulso {
  --cx-lfg: #8a1fd6;
  --cx-lgl: 0 0 0.25em rgba(168, 85, 247, 0.95), 0 0 0.65em rgba(168, 85, 247, 0.6);
  --cx-dfg: #f3e6ff;
  --cx-dgl: 0 0 0.15em #c084fc, 0 0 0.45em #a855f7, 0 0 0.9em rgba(217, 70, 239, 0.85);
}

/* Hielo, oro, fuego, arcoíris y galaxia: letras rellenas con un degradado; el halo va
   en una copia del texto por detrás (::before), para no tapar el degradado. */
.pname-x.cx-glow-hielo {
  --cx-lbg: linear-gradient(180deg, #0b4f7c 0%, #0a6fae 44%, #3fb4ec 53%, #0b74b5 62%, #075a90 100%);
  --cx-lgl: 0 0 0.28em rgba(56, 189, 248, 0.75);
  --cx-dbg: linear-gradient(180deg, #ffffff 0%, #d6f3ff 46%, #8ddcff 54%, #ecfaff 100%);
  --cx-dgl: 0 0 0.25em rgba(125, 211, 252, 0.85), 0 0 0.6em rgba(56, 189, 248, 0.55);
}

.pname-x.cx-glow-oro {
  --cx-lbg: linear-gradient(105deg, #8a5600 0%, #b77f0c 32%, #e9c25a 44%, #fff4c2 50%, #e9c25a 56%, #b77f0c 68%, #8a5600 100%);
  --cx-lgl: 0 0.04em 0 rgba(110, 66, 0, 0.25), 0 0 0.3em rgba(245, 179, 1, 0.35);
  --cx-dbg: linear-gradient(105deg, #e39b00 0%, #ffcc33 32%, #ffeb99 44%, #ffffff 50%, #ffeb99 56%, #ffcc33 68%, #e39b00 100%);
  --cx-dgl: 0 0 0.3em rgba(255, 194, 26, 0.55), 0 0 0.7em rgba(255, 160, 0, 0.25);
}

.pname-x.cx-glow-fuego {
  --cx-lbg: repeating-linear-gradient(0deg, #b8160b 0, #e8460c 0.42em, #f59e0b 0.8em, #e8460c 1.18em, #b8160b 1.6em);
  --cx-lgl: 0 0 0.25em rgba(234, 88, 12, 0.5);
  --cx-dbg: repeating-linear-gradient(0deg, #ff3b1f 0, #ff8a00 0.42em, #ffe066 0.8em, #ff8a00 1.18em, #ff3b1f 1.6em);
  --cx-dgl: 0 0 0.25em rgba(255, 90, 0, 0.8), 0 -0.08em 0.6em rgba(255, 60, 0, 0.55);
}

.pname-x.cx-glow-arcoiris {
  --cx-lbg: repeating-linear-gradient(90deg, #e11d48 0, #ea580c 1em, #ca8a04 2em, #16a34a 3em, #0284c7 4em, #7c3aed 5em, #db2777 6em, #e11d48 7em);
  --cx-lgl: 0 0.04em 0 rgba(0, 0, 0, 0.12);
  --cx-dbg: repeating-linear-gradient(90deg, #ff5d7a 0, #ff9a3c 1em, #ffe14d 2em, #4ade80 3em, #38bdf8 4em, #a78bfa 5em, #f472b6 6em, #ff5d7a 7em);
  --cx-dgl: 0 0 0.3em rgba(255, 255, 255, 0.28);
}

.pname-x.cx-glow-galaxia {
  --cx-lbg:
    radial-gradient(circle, #fff 0 0.045em, transparent 0.07em) 0 0 / 0.9em 0.8em,
    radial-gradient(circle, #ffe9a8 0 0.035em, transparent 0.06em) 0.4em 0.35em / 1.3em 1.1em,
    linear-gradient(100deg, #2e1065 0%, #6d28d9 28%, #be185d 50%, #1d4ed8 74%, #2e1065 100%) 0 0 / 300% 100%;
  --cx-lgl: 0 0 0.25em rgba(109, 40, 217, 0.4);
  --cx-dbg:
    radial-gradient(circle, #fff 0 0.045em, transparent 0.07em) 0 0 / 0.9em 0.8em,
    radial-gradient(circle, #fff6c9 0 0.035em, transparent 0.06em) 0.4em 0.35em / 1.3em 1.1em,
    linear-gradient(100deg, #a78bfa 0%, #d8b4fe 26%, #f9a8d4 50%, #93c5fd 74%, #a78bfa 100%) 0 0 / 300% 100%;
  --cx-dgl: 0 0 0.3em rgba(167, 139, 250, 0.75), 0 0 0.8em rgba(244, 114, 182, 0.4);
}

/* Lava (exclusivo de los sobres): letras de magma con burbujas que suben despacio. En claro, rojos
   oscuros y naranjas para que se lean sobre el fondo; en oscuro, al rojo vivo con resplandor. */
.pname-x.cx-glow-lava {
  --cx-lbg:
    radial-gradient(circle, #ffc53d 0 0.06em, transparent 0.09em) 0 0 / 0.8em 0.9em,
    radial-gradient(circle, #ff9f1a 0 0.045em, transparent 0.075em) 0.35em 0.45em / 1.1em 1.2em,
    linear-gradient(180deg, #6e1002 0%, #a8230a 30%, #d63e0c 58%, #e8700f 80%, #8f1904 100%);
  --cx-lgl: 0 0.05em 0 rgba(90, 14, 0, 0.28), 0 0 0.28em rgba(214, 62, 12, 0.45);
  --cx-dbg:
    radial-gradient(circle, #fff3b0 0 0.06em, transparent 0.09em) 0 0 / 0.8em 0.9em,
    radial-gradient(circle, #ffe066 0 0.045em, transparent 0.075em) 0.35em 0.45em / 1.1em 1.2em,
    linear-gradient(180deg, #ff4d12 0%, #ff8a00 36%, #ffc53d 60%, #ff7a00 82%, #e3340c 100%);
  --cx-dgl: 0 0 0.25em rgba(255, 90, 0, 0.85), 0 0.06em 0.6em rgba(200, 30, 0, 0.6);
}

/* Aurora (exclusivo de los sobres): cortinas de luz polar que se mecen (franjas verticales sobre un
   degradado verde, turquesa, azul y violeta que va y viene). En claro, tonos hondos que se leen
   sobre el fondo; en oscuro, luminosos con halo. */
.pname-x.cx-glow-aurora {
  --cx-lbg:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 0.05em, transparent 0.05em 0.2em, rgba(255, 255, 255, 0.16) 0.2em 0.24em, transparent 0.24em 0.5em),
    linear-gradient(100deg, #047857 0%, #0f766e 18%, #1d4ed8 38%, #6d28d9 56%, #a21caf 72%, #0f766e 88%, #047857 100%) 0 0 / 300% 100%;
  --cx-lgl: 0 0 0.3em rgba(13, 148, 136, 0.4);
  --cx-dbg:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 0.05em, transparent 0.05em 0.2em, rgba(255, 255, 255, 0.22) 0.2em 0.24em, transparent 0.24em 0.5em),
    linear-gradient(100deg, #6ee7b7 0%, #5eead4 18%, #7dd3fc 38%, #c4b5fd 56%, #f0abfc 72%, #5eead4 88%, #6ee7b7 100%) 0 0 / 300% 100%;
  --cx-dgl: 0 0 0.3em rgba(52, 211, 153, 0.7), 0 0 0.8em rgba(167, 139, 250, 0.5);
}

.pname-x:is(.cx-glow-hielo, .cx-glow-oro, .cx-glow-fuego, .cx-glow-arcoiris, .cx-glow-galaxia, .cx-glow-pulso, .cx-glow-lava, .cx-glow-aurora) {
  isolation: isolate;
}

.pname-x:is(.cx-glow-hielo, .cx-glow-oro, .cx-glow-fuego, .cx-glow-arcoiris, .cx-glow-galaxia, .cx-glow-lava, .cx-glow-aurora) > .cx-n {
  background: var(--cx-bg);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.pname-x:is(.cx-glow-hielo, .cx-glow-oro, .cx-glow-fuego, .cx-glow-arcoiris, .cx-glow-galaxia, .cx-glow-pulso, .cx-glow-lava, .cx-glow-aurora) > .cx-n::before {
  content: attr(data-text);
  content: attr(data-text) / '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--cx-gl);
  pointer-events: none;
  user-select: none;
}

.pname-x.cx-glow-oro > .cx-n {
  background-size: 260% 100%;
  animation: cx-sheen 3.8s ease-in-out infinite;
}

.pname-x.cx-glow-fuego > .cx-n {
  animation: cx-fire-text 1.5s linear infinite;
}

.pname-x.cx-glow-arcoiris > .cx-n {
  animation: cx-rainbow-text 3s linear infinite;
}

.pname-x.cx-glow-galaxia > .cx-n {
  animation: cx-galaxy-text 9s ease-in-out infinite alternate;
}

.pname-x.cx-glow-pulso > .cx-n::before {
  animation: cx-pulse 1.4s ease-in-out infinite alternate;
}

.pname-x.cx-glow-lava > .cx-n {
  animation: cx-lava-text 3.2s linear infinite;
}

.pname-x.cx-glow-aurora > .cx-n {
  animation: cx-aurora-text 7s ease-in-out infinite alternate;
}

.pname-x.cx-glow-aurora > .cx-n::before {
  animation: cx-breathe 3.5s ease-in-out infinite alternate;
}

/* Retro: brillos con una sombra dura de un píxel y animaciones por pasos. */
:root[data-style='retro'] .pname-x.cx-has-glow:not(.cx-glow-sombra) > .cx-n {
  text-shadow: var(--cx-sh, none), 0.07em 0.07em 0 var(--px-drop);
}

:root[data-style='retro'] .pname-x:is(.cx-glow-hielo, .cx-glow-oro, .cx-glow-fuego, .cx-glow-arcoiris, .cx-glow-galaxia, .cx-glow-lava, .cx-glow-aurora) > .cx-n {
  text-shadow: none;
}

:root[data-style='retro'] .pname-x:is(.cx-glow-fuego, .cx-glow-arcoiris, .cx-glow-lava, .cx-glow-aurora) > .cx-n {
  animation-timing-function: steps(8);
}

:root[data-style='retro'] .pname-x.cx-glow-pulso > .cx-n::before {
  animation-timing-function: steps(3);
}

/* ───────────────────────────── Fuentes ─────────────────────────────
   Tamaños ajustados para que todas quepan en la misma línea (nunca más de 1em). */

.pname-x.cx-has-font > .cx-n {
  font-weight: 400;
  text-transform: none;
}

.pname-x.cx-font-rotulador > .cx-n {
  font-family: 'Permanent Marker', 'Space Grotesk', cursive;
  letter-spacing: 0.02em;
}

.pname-x.cx-font-cartel > .cx-n {
  font-family: 'Bungee', 'Archivo Black', sans-serif;
  font-size: 0.86em;
  letter-spacing: 0.01em;
}

.pname-x.cx-font-pixel > .cx-n {
  font-family: 'Silkscreen', monospace;
  font-size: 0.86em;
}

.pname-x.cx-font-manuscrita > .cx-n {
  font-family: 'Pacifico', cursive;
  font-size: 0.94em;
  letter-spacing: 0.01em;
}

.pname-x.cx-font-futurista > .cx-n {
  /* Audiowide en lugar de Orbitron: la ñ de Orbitron parece un acento grave. */
  font-family: 'Audiowide', 'Space Grotesk', sans-serif;
  font-size: 0.9em;
  letter-spacing: 0.03em;
}

.pname-x.cx-font-gotica > .cx-n {
  font-family: 'UnifrakturMaguntia', 'Times New Roman', serif;
  letter-spacing: 0.01em;
}

.pname-x.cx-font-terror > .cx-n {
  font-family: 'Creepster', 'Space Grotesk', cursive;
  letter-spacing: 0.05em;
}

.pname-x.cx-font-neon > .cx-n {
  font-family: 'Monoton', 'Bungee', sans-serif;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  /* Monoton dibuja con trazos finos: un contorno del mismo color la hace legible en pequeño. */
  -webkit-text-stroke: 0.012em currentColor;
}

.pname-x.cx-font-elegante > .cx-n {
  font-family: 'Cinzel Decorative', 'Times New Roman', serif;
  font-weight: 700;
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

/* La ficha retro usa un texto diminuto pensado para Silkscreen en mayúsculas: las fuentes de la
   tienda se agrandan un poco ahí para que se lean (el nombre sigue con su tope de ancho y elipsis). */
:root[data-style='retro'] .profile-chip .pname-x.cx-has-font {
  font-size: 1.25em;
}

/* ───────────────────────────── Títulos ───────────────────────────── */

.cx-title {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: max(0.6rem, 0.62em);
  line-height: 1.35;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cx-t);
  --cx-t: var(--cx-tl);
  --cx-tb: var(--cx-tlb);
}

:root[data-style='brutal'] .cx-title {
  font-weight: 400;
}

.pname-x.cx-has-title > .cx-title {
  margin-top: 1px;
}

:root[data-theme='dark'] .cx-title,
:root[data-style='retro'] .profile-chip .cx-title,
.cx-on-dark .cx-title {
  --cx-t: var(--cx-td);
  --cx-tb: var(--cx-tdb);
}

:root[data-style='brutal'] .profile-chip:hover .cx-title,
:root .cx-on-light .cx-title {
  --cx-t: var(--cx-tl);
  --cx-tb: var(--cx-tlb);
}

.cx-title.cx-r-comun {
  --cx-tl: #636a75;
  --cx-td: #a7adb8;
}

.cx-title.cx-r-raro {
  --cx-tl: #2563eb;
  --cx-td: #79acff;
}

.cx-title.cx-r-epico {
  --cx-tl: #9333ea;
  --cx-td: #cf9bff;
  text-shadow: 0 0 0.5em rgba(168, 85, 247, 0.35);
}

.cx-title.cx-r-legendario {
  /* En claro el brillo no llega a crema: si no, las letras que pasa desaparecerían sobre el fondo. */
  --cx-tlb: linear-gradient(100deg, #8f5500 0%, #b97c00 38%, #e7b021 50%, #b97c00 62%, #8f5500 100%);
  --cx-tdb: linear-gradient(100deg, #f0a500 0%, #ffd23f 38%, #fffbe6 50%, #ffd23f 62%, #f0a500 100%);
  background: var(--cx-tb) 0 0 / 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: cx-sheen 4.6s ease-in-out infinite;
}

.cx-title.cx-r-legendario::before {
  content: '✦ ';
  content: '✦ ' / '';
}

/* Títulos exclusivos de los sobres: el color de su rareza recorrido por un brillo y su propio adorno
   delante (trébol, diamante, corona). */
.cx-title:is(.cx-title-afortunado, .cx-title-coleccionista, .cx-title-elegido) {
  background: var(--cx-tb) 0 0 / 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: cx-sheen 4.6s ease-in-out infinite;
}

.cx-title.cx-title-afortunado {
  --cx-tlb: linear-gradient(100deg, #1e4fc2 0%, #2563eb 38%, #0d9488 50%, #2563eb 62%, #1e4fc2 100%);
  --cx-tdb: linear-gradient(100deg, #79acff 0%, #9cc3ff 38%, #a7f3d0 50%, #9cc3ff 62%, #79acff 100%);
}

.cx-title.cx-title-afortunado::before {
  content: '♣ ';
  content: '♣ ' / '';
}

.cx-title.cx-title-coleccionista {
  --cx-tlb: linear-gradient(100deg, #7e22ce 0%, #9333ea 38%, #db2777 50%, #9333ea 62%, #7e22ce 100%);
  --cx-tdb: linear-gradient(100deg, #c084fc 0%, #d8b4fe 38%, #fbcfe8 50%, #d8b4fe 62%, #c084fc 100%);
}

.cx-title.cx-title-coleccionista::before {
  content: '◆ ';
  content: '◆ ' / '';
}

/* El Elegido: oro con un reflejo rosado (en claro, sin llegar a crema, como los legendarios). */
.cx-title.cx-title-elegido {
  --cx-tlb: linear-gradient(100deg, #8f5500 0%, #b97c00 34%, #c2410c 46%, #e7a21b 54%, #b97c00 66%, #8f5500 100%);
  --cx-tdb: linear-gradient(100deg, #f0a500 0%, #ffd23f 34%, #ffb4a2 46%, #fffbe6 54%, #ffd23f 66%, #f0a500 100%);
}

.cx-title.cx-title-elegido::before {
  content: '♛ ';
  content: '♛ ' / '';
}

/* ───────────────────────────── Ficha (avatar + nombre) y vista previa ───────────────────────────── */

.cx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.cx-badge.cx-badge-lg,
.cx-badge.cx-badge-xl {
  gap: 0.9em;
}

.cx-preview {
  --cx-rc: var(--accent);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 156px;
  padding: 14px 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--cx-rc) 26%, transparent), transparent),
    radial-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1.6px) 0 0 / 14px 14px,
    var(--surface-2);
}

.cx-preview > .pname-x {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.cx-preview.cx-pv-title > .pname-x > .cx-title {
  font-size: 0.78rem;
}

:root[data-style='brutal'] .cx-preview {
  border: 2px solid var(--px-line);
}

:root[data-style='brutal'] .cx-preview > .pname-x {
  font-family: var(--font-display);
  font-weight: 400;
}

:root[data-style='retro'] .cx-preview {
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--cx-rc) 30%, transparent), transparent),
    linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 2px, transparent 2px) 0 0 / 16px 16px,
    linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 2px, transparent 2px) 0 0 / 16px 16px,
    var(--surface-2);
  box-shadow: inset 0 0 0 3px var(--px-line);
}

:root[data-style='retro'] .cx-preview > .pname-x {
  font-family: var(--font-display);
  font-size: 1.15rem;
}

:root[data-style='retro'] .cx-preview.cx-pv-title > .pname-x > .cx-title {
  font-size: 0.66rem;
  letter-spacing: 0.03em;
}

/* ───────────────────────────── En las vistas de los juegos ─────────────────────────────
   public/js/player-look.js: con icono o marco, el avatar rellena la caja de avatar propia del
   juego (.cx-host), que conserva su tamaño, fondo y contorno. El nombre con brillo o fuente
   (.cx-name-host) se recorta solo (.cx-n), así la caja del juego no corta el halo (y puede
   seguir encogiendo dentro de su fila: min-width 0). */

:root .avatar.cx-fill {
  width: 100%;
  height: 100%;
  font-size: inherit;
  border: 0;
  border-radius: inherit;
  background: none;
  box-shadow: none;
}

/* Sin borde propio: el lienzo de las ilustraciones es la caja del juego tal cual. */
:root[data-style] .avatar.cx-fill:is(.cx-pic, .cx-art-frame) {
  --cx-in: 0px;
}

/* El marco pixel es cuadrado también ahí (manda sobre la forma propia de cada juego). */
.cx-host:has(> .cx-frame-pixel:not(.cx-art-frame)) {
  border-radius: 0 !important;
}

/* El aro ilustrado es redondo: la caja del juego también (si no, sus esquinas y su contorno asoman
   por fuera del aro: las cajas cuadradas de retro, la de Memoria multijugador). */
.cx-host:has(> .cx-art-frame) {
  border-radius: 50% !important;
}

/* Avatares diminutos (historiales, listas): las ilustraciones animadas, quietas. */
.cx-mini .cx-anim > img {
  animation: none;
}

.cx-name-host {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* ───────────────────────────── Animaciones ───────────────────────────── */

@keyframes cx-twinkle {
  0%,
  100% {
    transform: scale(0.35) rotate(0deg);
    opacity: 0.35;
  }
  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }
}

@keyframes cx-twinkle-soft {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes cx-lick {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.92, 1.14);
  }
  50% {
    transform: scale(1.05, 0.9);
  }
  75% {
    transform: scale(0.96, 1.08);
  }
}

@keyframes cx-sprite {
  to {
    transform: translateX(-100%);
  }
}

@keyframes cx-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes cx-hue {
  to {
    --cx-a: 360deg;
  }
}

@keyframes cx-pulse {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}

@keyframes cx-sheen {
  0% {
    background-position: 100% 0;
  }
  62%,
  100% {
    background-position: 0% 0;
  }
}

@keyframes cx-fire-text {
  to {
    background-position: 0 -1.6em;
  }
}

@keyframes cx-rainbow-text {
  to {
    background-position: 7em 0;
  }
}

@keyframes cx-galaxy-text {
  to {
    background-position: 0.9em -0.8em, -1.3em 1.1em, 100% 0;
  }
}

/* Burbujas que suben (un alto de cada capa: el ciclo empalma sin salto). */
@keyframes cx-lava-text {
  to {
    background-position: 0 -0.9em, 0.35em -0.75em, 0 0;
  }
}

/* Cortinas que se desplazan (dos franjas) sobre el degradado que va y viene. */
@keyframes cx-aurora-text {
  from {
    background-position: 0 0, 0% 0;
  }
  to {
    background-position: 1em 0, 100% 0;
  }
}

@keyframes cx-breathe {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-anim > img,
  .cx-deco,
  .cx-deco *,
  .cx-ring::before,
  .pname-x > .cx-n,
  .pname-x > .cx-n::before,
  .cx-title {
    animation: none !important;
  }
}

/* Marco solo (vista previa en la tienda y los sobres): sin disco, sin borde y sin avatar dentro. */
.avatar.cx-bare,
:root[data-style] .avatar.cx-bare {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: transparent;
}