/* Marco de rango + efecto de ganador del mes, alrededor de la foto.
   ------------------------------------------------------------------
   Dos capas sobre la MISMA foto (Guille, 11/08/2026):
     capa 1, el marco = tu rango  -> el aro dibujado que le toca (data-tier),
             más la chapa con el animal del rango y la división.
     capa 2, el efecto = podio del mes -> data-place="1|2|3", va ENCIMA sin tapar
             el marco, porque el dorado se pone POR FUERA del aro.

   Los siete aros son dibujos hechos para PBC (static/img/ranks/*.webp): bronce,
   plata, oro, platino, esmeralda, diamante y maestro, cada uno con más herraje
   que el anterior. Gran Maestro lleva el de Maestro con una luz que respira.

   Reglas que no se pueden romper:
   * La corona necesita hueco por encima de la foto. Ese hueco se reserva SIEMPRE
     (.pbc-flair tiene padding aunque no haya corona), así ni se corta en las
     listas apretadas ni la lista pega un salto el día que alguien gana. La chapa
     de abajo reserva el suyo igual.
   * Solo el 1º se mueve. El 2º y el 3º brillan quietos.
   * Con "reducir movimiento" activado no se mueve NADA: el dorado se queda fijo.

   Nombres de clase: nada de "avatar" ni "image" (regla global de
   mobile-responsive.css, que infla cualquier cosa que se llame así en el móvil). */

:root {
  /* El dorado del podio, uno solo para aro, halo, corona y nombre. */
  --flair-gold: #e6b422;
  --flair-gold-lit: #fff3c4;
  --flair-gold-soft: rgba(230, 180, 34, .55);
}

/* ── El escudo (perfil, fichas, listas de clases e intercambios) ───────────── */
.pbc-flair {
  --flair-size: 2.5rem;
  --flair-color: #a97142;
  --flair-light: #d8a06a;
  --flair-dark: #5d3d22;
  position: relative;
  display: inline-block;
  /* EL HUECO DE LA CORONA (arriba) Y EL DE LA CHAPA (abajo). Siempre, haya o no:
     así la fila mide lo mismo antes y después de ganar. */
  padding: calc(var(--flair-size) * .34) 0 calc(var(--flair-size) * .3);
  line-height: 0;
  overflow: visible;
  vertical-align: middle;
}

/* El círculo de la foto. Va por encima de todo el herraje. */
.pbc-flair-photo {
  position: relative;
  display: block;
  width: var(--flair-size);
  height: var(--flair-size);
  border-radius: 50%;
  overflow: hidden;              /* la FOTO sí se recorta en redondo */
  background: #02A9CA;
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--flair-size) * .42);
  line-height: var(--flair-size);
  text-align: center;
  z-index: 3;
}

.pbc-flair-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* ── Capa 1: el marco del rango ───────────────────────────────────────────── */
/* Los siete aros son DIBUJOS (static/img/ranks/*.webp), uno por rango, hechos
   para PBC el 11/08/2026. Van de fondo en una capa detrás de la foto, nunca como
   <img>: así no hay una etiqueta más por cada cara de una lista, el navegador se
   los guarda como cualquier imagen y el hueco del centro queda libre para la foto.

   La cuenta que lo ata todo: en el dibujo, el agujero del centro mide DOS TERCIOS
   del ancho. Por eso el marco se pinta a 1,5 veces el tamaño de la foto y su
   agujero cae justo encima de ella, en todos los tamaños y en los siete rangos
   (están recortados con el agujero centrado a propósito). */
.pbc-flair::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--flair-size) * .34 + var(--flair-size) / 2);
  width: calc(var(--flair-size) * 1.5);
  height: calc(var(--flair-size) * 1.5);
  margin-left: calc(var(--flair-size) * -.75);
  margin-top: calc(var(--flair-size) * -.75);
  background: var(--flair-img) center / contain no-repeat;
  z-index: 2;
  pointer-events: none;
}

/* Qué dibujo lleva cada rango. Se guarda en una variable y no directamente en el
   fondo para poder usar la MISMA lista en el marco grande y en el pequeño del
   chat: si estuviera escrita dos veces, el día que se cambie un aro se cambiaría
   en un sitio y no en el otro. */
[data-tier="bronce"]    { --flair-img: url("../img/ranks/bronce.a9f3441ecf96.webp"); }
[data-tier="plata"]     { --flair-img: url("../img/ranks/plata.33182e070e85.webp"); }
[data-tier="oro"]       { --flair-img: url("../img/ranks/oro.d74b82aca3bb.webp"); }
[data-tier="platino"]   { --flair-img: url("../img/ranks/platino.ac7263357a1c.webp"); }
[data-tier="esmeralda"] { --flair-img: url("../img/ranks/esmeralda.adc318b8e780.webp"); }
[data-tier="diamante"]  { --flair-img: url("../img/ranks/diamante.2386f4bcbbf1.webp"); }
[data-tier="maestro"]   { --flair-img: url("../img/ranks/maestro.0cff4bc773a0.webp"); }

/* Sombra corta bajo la foto: despega el conjunto del fondo. */
.pbc-flair[data-tier]:not([data-tier=""]) .pbc-flair-photo {
  box-shadow: 0 calc(var(--flair-size) * .03) calc(var(--flair-size) * .07)
              rgba(11, 20, 26, .3);
}

/* Gran Maestro lleva el aro de Maestro y encima su propia luz, que respira. Es lo
   único del marco que se mueve solo, y son cien personas como mucho. */
.pbc-flair[data-gm="1"]::before {
  filter: drop-shadow(0 0 calc(var(--flair-size) * .09) var(--flair-light));
  animation: pbcFlairBreathe 4.5s ease-in-out infinite;
}

/* Sin rango (o con el marco quitado desde el perfil) no hay marco ni chapa: queda
   el círculo de siempre. Escrito así, y no quitando elementos, para que el
   interruptor del perfil encienda y apague cambiando UN atributo. */
.pbc-flair[data-tier=""]::before,
.pbc-flair:not([data-tier])::before { display: none; }

.pbc-flair[data-tier=""] .pbc-flair-plate,
.pbc-flair:not([data-tier]) .pbc-flair-plate { display: none; }

/* ── La chapa de abajo: el animal del rango y la división ──────────────────── */
/* Es el "símbolo" del escudo: el animal grande, con contorno oscuro y la
   división en su pastilla al lado. A lo Duolingo: formas gordas y línea negra,
   nada de filigrana fina que se pierda en el móvil. */
.pbc-flair-plate {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--flair-size) * .05);
  padding: calc(var(--flair-size) * .025) calc(var(--flair-size) * .09);
  background: linear-gradient(180deg, var(--flair-light), var(--flair-color));
  border: calc(var(--flair-size) * .022) solid var(--flair-dark);
  border-radius: 999px;
  box-shadow: 0 calc(var(--flair-size) * .02) 0 rgba(11, 20, 26, .25);
  color: #fff;
  font-size: calc(var(--flair-size) * .17);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
}

.pbc-flair-plate .m {
  font-size: calc(var(--flair-size) * .26);
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(11, 20, 26, .45));
}

/* La división, en su propia pastilla oscura: se lee de un vistazo aunque el
   rango sea de color claro. */
.pbc-flair-plate .d {
  background: var(--flair-dark);
  border-radius: 999px;
  padding: calc(var(--flair-size) * .02) calc(var(--flair-size) * .06);
  font-size: calc(var(--flair-size) * .15);
  letter-spacing: .04em;
}

/* ── Capa 2: el podio del mes ─────────────────────────────────────────────── */
/* Las tres piezas están DIBUJADAS aquí mismo (SVG incrustado en el CSS, sin un
   solo fichero que descargar), a partir de los bocetos de Guille del 11/08/2026:

     1º  tres tramos de aro dorado GIRANDO + halo que late + corona encima
     2º  y 3º: aro dorado fino, continuo y QUIETO

   Todo va POR FUERA del marco del rango, nunca encima: un diamante que gana el
   mes sigue viéndose diamante, solo que encendido. */

/* El aro partido del campeón: tres tramos con las puntas redondas. Gira entero,
   así que el brillo pasa por delante de la foto sin taparla. */
.pbc-flair[data-place="1"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--flair-size) * .34 + var(--flair-size) / 2);
  width: calc(var(--flair-size) * 1.78);
  height: calc(var(--flair-size) * 1.78);
  margin-left: calc(var(--flair-size) * -.89);
  margin-top: calc(var(--flair-size) * -.89);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244.0%22%20fill%3D%22none%22%20stroke%3D%22%238a5a12%22%20stroke-width%3D%228.4%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2258%2034%2046%2034%2040%2034%22%20transform%3D%22rotate(-90%2050%2050)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244.0%22%20fill%3D%22none%22%20stroke%3D%22%23e8b53a%22%20stroke-width%3D%226.2%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2258%2034%2046%2034%2040%2034%22%20transform%3D%22rotate(-90%2050%2050)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244.0%22%20fill%3D%22none%22%20stroke%3D%22%23fff0b8%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2258%2034%2046%2034%2040%2034%22%20transform%3D%22rotate(-90%2050%2050)%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  animation: pbcFlairSpin 4.5s linear infinite;
  z-index: 1;
  pointer-events: none;
}

/* El halo, por detrás de todo y latiendo. Es luz, no un aro: sin borde duro. */
.pbc-flair-halo {
  position: absolute;
  left: 50%;
  top: calc(var(--flair-size) * .34 + var(--flair-size) / 2);
  width: calc(var(--flair-size) * 2.25);
  height: calc(var(--flair-size) * 2.25);
  margin-left: calc(var(--flair-size) * -1.125);
  margin-top: calc(var(--flair-size) * -1.125);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255, 226, 140, .95) 0%,
      rgba(240, 186, 60, .55) 34%,
      rgba(230, 180, 34, .18) 52%,
      rgba(230, 180, 34, 0) 70%);
  animation: pbcFlairHalo 2.6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* El 2º y el 3º: aro fino, entero y quieto. Se distingue del campeón de un
   vistazo justo por eso, porque no se mueve ni se parte. */
.pbc-flair[data-place="2"]::after,
.pbc-flair[data-place="3"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--flair-size) * .34 + var(--flair-size) / 2);
  width: calc(var(--flair-size) * 1.74);
  height: calc(var(--flair-size) * 1.74);
  margin-left: calc(var(--flair-size) * -.87);
  margin-top: calc(var(--flair-size) * -.87);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20fill%3D%22none%22%20stroke%3D%22%238a5a12%22%20stroke-width%3D%227%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20fill%3D%22none%22%20stroke%3D%22%23e8b53a%22%20stroke-width%3D%225%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20fill%3D%22none%22%20stroke%3D%22%23fff0b8%22%20stroke-width%3D%221.2%22%20opacity%3D%22.9%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241.6%22%20fill%3D%22none%22%20stroke%3D%22%231f5fa8%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* El tercero, un punto más apagado que el segundo: mismo aro, menos luz. */
.pbc-flair[data-place="3"]::after { opacity: .82; }

.pbc-flair[data-place="2"] .pbc-flair-photo,
.pbc-flair[data-place="3"] .pbc-flair-photo {
  box-shadow: 0 0 calc(var(--flair-size) * .16) calc(var(--flair-size) * .02)
              var(--flair-gold-soft);
}

/* La corona del campeón, dentro del hueco que el CSS reserva siempre arriba. */
.pbc-flair-crown {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--flair-size) * .42);
  height: calc(var(--flair-size) * .39);
  margin-left: calc(var(--flair-size) * -.21);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2060%22%3E%3Cpath%20d%3D%22M6%2046%20L6%2022%20L22%2034%20L32%2012%20L42%2034%20L58%2022%20L58%2046%20Z%22%20fill%3D%22%23e8b53a%22%20stroke%3D%22%238a5a12%22%20stroke-width%3D%223.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M32%2014%20L40%2033%20L32%2038%20L24%2033%20Z%22%20fill%3D%22%23fff0b8%22%20opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2246%22%20width%3D%2256%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22%231f5fa8%22%20stroke%3D%22%238a5a12%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  font-size: 0;                    /* el emoji de respaldo no se ve si hay dibujo */
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(11, 20, 26, .35));
  animation: pbcFlairCrown 2.8s ease-in-out infinite;
}

/* La chapa del campeón también se vuelve de oro: el escudo entero dice "este
   ganó el mes", no solo el aro. */
.pbc-flair[data-place="1"] .pbc-flair-plate {
  background: linear-gradient(180deg, var(--flair-gold-lit), var(--flair-gold));
  border-color: #fff8dc;
  color: #4a3708;
  text-shadow: none;
}

/* ── El nombre dorado del 1º (en el chat y donde haga falta) ───────────────── */
.pbc-name-gold {
  background: linear-gradient(100deg, #b8860b 0%, var(--flair-gold) 25%,
                              var(--flair-gold-lit) 45%, var(--flair-gold) 65%,
                              #b8860b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  animation: pbcFlairName 3.6s linear infinite;
}

/* ── El marco pequeño del chat ────────────────────────────────────────────── */
/* El circulito de la burbuja (.cc-ava) ya existía y lleva overflow:hidden, así
   que el aro NO puede ir dentro: va en su propia capa colgada de la burbuja,
   centrada sobre él y con la misma cuenta de siempre (el aro mide 1,5 veces la
   foto porque su agujero es dos tercios del dibujo). */
/* El circulito del chat, con marco: se le quita el aro de color que llevaba,
   porque ahora lo rodea el dibujo del rango. */
.cc-ava.pbc-fl {
  box-shadow: 0 1px 2px rgba(11, 20, 26, .28);
}

.cc-ava.pbc-fl[data-place="2"],
.cc-ava.pbc-fl[data-place="3"] {
  box-shadow: 0 0 7px 1px var(--flair-gold-soft);
}

.pbc-fl-ring {
  position: absolute;
  left: -3.05rem;
  top: -.5rem;
  width: 3.07rem;
  height: 3.07rem;
  background: var(--flair-img) center / contain no-repeat;
  pointer-events: none;
  z-index: 2;
}

.pbc-fl-ring[data-gm="1"] {
  filter: drop-shadow(0 0 .18rem var(--flair-light));
  animation: pbcFlairBreathe 4.5s ease-in-out infinite;
}

/* La chapita del animal, pegada debajo del circulito. Sin división: a ese tamaño
   el romano no se lee y el animal sí. */
.pbc-fl-seal {
  position: absolute;
  left: -2.55rem;
  top: 1.5rem;
  width: 2.05rem;
  text-align: center;
  font-size: .72rem;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(11, 20, 26, .4));
}

.pbc-fl-fx {
  /* La capa del podio en el chat: se centra en el circulito y el aro, el halo y
     la corona salen de aquí hacia fuera. Mismas piezas que en el escudo grande,
     solo que a tamaño de burbuja. */
  position: absolute;
  left: -2.55rem;
  top: 0;
  width: 2.05rem;
  height: 2.05rem;
  pointer-events: none;
  z-index: 1;
}

.pbc-fl-fx::before,
.pbc-fl-fx::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pbc-fl-fx::after {                       /* los tres tramos, girando */
  width: 3.65rem;
  height: 3.65rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244.0%22%20fill%3D%22none%22%20stroke%3D%22%238a5a12%22%20stroke-width%3D%228.4%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2258%2034%2046%2034%2040%2034%22%20transform%3D%22rotate(-90%2050%2050)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244.0%22%20fill%3D%22none%22%20stroke%3D%22%23e8b53a%22%20stroke-width%3D%226.2%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2258%2034%2046%2034%2040%2034%22%20transform%3D%22rotate(-90%2050%2050)%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244.0%22%20fill%3D%22none%22%20stroke%3D%22%23fff0b8%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2258%2034%2046%2034%2040%2034%22%20transform%3D%22rotate(-90%2050%2050)%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  animation: pbcFlairSpin 4.5s linear infinite;
}

.pbc-fl-fx::before {                      /* el halo, latiendo */
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255, 226, 140, .95) 0%,
      rgba(240, 186, 60, .5) 34%,
      rgba(230, 180, 34, .16) 52%,
      rgba(230, 180, 34, 0) 70%);
  animation: pbcFlairHalo 2.6s ease-in-out infinite;
}

/* El 2º y el 3º en el chat: el aro fino y quieto, sin capa que gire. */
.pbc-fl-ring[data-place="2"]::after,
.pbc-fl-ring[data-place="3"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.55rem;
  height: 3.55rem;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20fill%3D%22none%22%20stroke%3D%22%238a5a12%22%20stroke-width%3D%227%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20fill%3D%22none%22%20stroke%3D%22%23e8b53a%22%20stroke-width%3D%225%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20fill%3D%22none%22%20stroke%3D%22%23fff0b8%22%20stroke-width%3D%221.2%22%20opacity%3D%22.9%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241.6%22%20fill%3D%22none%22%20stroke%3D%22%231f5fa8%22%20stroke-width%3D%221.6%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.pbc-fl-ring[data-place="3"]::after { opacity: .82; }

/* La corona de la burbuja: cuelga de la propia burbuja (que es position:relative
   y no recorta), justo encima del circulito. */
.cchat-msg.pbc-fl-crowned {
  /* El hueco de la corona en la lista apretada del chat: sin esto, la corona se
     comería la burbuja de arriba. */
  margin-top: 1rem;
}

.pbc-fl-crown-chat {
  position: absolute;
  left: -2.2rem;
  top: -.95rem;
  width: 1.35rem;
  height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2060%22%3E%3Cpath%20d%3D%22M6%2046%20L6%2022%20L22%2034%20L32%2012%20L42%2034%20L58%2022%20L58%2046%20Z%22%20fill%3D%22%23e8b53a%22%20stroke%3D%22%238a5a12%22%20stroke-width%3D%223.4%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M32%2014%20L40%2033%20L32%2038%20L24%2033%20Z%22%20fill%3D%22%23fff0b8%22%20opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%2246%22%20width%3D%2256%22%20height%3D%2210%22%20rx%3D%223%22%20fill%3D%22%231f5fa8%22%20stroke%3D%22%238a5a12%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  font-size: 0;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 1px 2px rgba(11, 20, 26, .35));
  animation: pbcFlairCrown 2.8s ease-in-out infinite;
}

/* ── Movimiento ───────────────────────────────────────────────────────────── */
@keyframes pbcFlairSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pbcFlairBreathe {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

@keyframes pbcFlairHalo {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9; }
}

@keyframes pbcFlairName {
  to { background-position: -250% 0; }
}

/* La corona respira un poco, sin dar saltos: es lo que la hace ver "viva" al lado
   de una foto quieta. Solo sube y baja, porque ya va colocada con márgenes: si
   además llevara un desplazamiento lateral, se saldría de su sitio. */
@keyframes pbcFlairCrown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9%); }
}

/* Quien pide menos movimiento NO ve nada moverse: ni giro, ni latido, ni corona
   flotando, ni nombre animado. El escudo y el dorado se quedan puestos y fijos,
   que es lo que dice quién ganó. */
@media (prefers-reduced-motion: reduce) {
  .pbc-flair[data-place="1"]::after,
  .pbc-flair[data-gm="1"]::before,
  .pbc-flair-halo,
  .pbc-flair-crown,
  .pbc-fl-crown-chat,
  .pbc-fl-fx::after,
  .pbc-fl-fx::before,
  .pbc-name-gold {
    animation: none !important;
  }
  .pbc-flair-crown,
  .pbc-fl-crown-chat { transform: none; }
  .pbc-flair-halo,
  .pbc-fl-fx::before { opacity: .6; }
  .pbc-name-gold {
    background: none;
    -webkit-text-fill-color: #b8860b;
    color: #b8860b;
  }
}