/* public/css/rgb-top1.css
 *
 * Top-1 leaderboard visual prestige.
 *
 * Restricted scope — applies ONLY to elements with .rank-1. Everyone
 * else renders normally. The effect: name text becomes a moving
 * rainbow gradient (background-clip: text), plus a soft pulsing crown
 * marker beside it.
 *
 * To use:
 *   <div class="leader-row rank-1">
 *     <div class="rank-1-name">Alice</div>
 *   </div>
 *
 * Or for compact rows (the dashboard widget), just give the inline
 * <p>/<span> wrapping the name the class `rank-1-name`.
 */

@keyframes rgbTop1Shift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes rgbTop1Glow {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-1px); }
}

/* The name itself — gradient text + subtle text shadow for legibility
   on dark backgrounds. Important: `background-clip: text` only renders
   the gradient where the glyphs are, so we still need a transparent
   foreground color. We KEEP the underlying text color as a graceful
   fallback for browsers that don't paint the clip. */
html .rank-1-name {
  background-image: linear-gradient(
    90deg,
    #ef4444 0%,
    #f59e0b 14%,
    #facc15 28%,
    #22c55e 42%,
    #06b6d4 56%,
    #3b82f6 70%,
    #a855f7 84%,
    #ec4899 92%,
    #ef4444 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: rgbTop1Shift 4s linear infinite;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* A faint dark "halo" via text-shadow improves contrast on the
     transparent fill. Drawn behind the gradient text. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

/* Tiny crown marker shown by JS for top-1 rows. Uses the same palette
   so the row reads as one prestige unit.

   IMPORTANT: this rule must reset the gradient-text inheritance that
   .rank-1-name applies. When .rank-1-crown sits INSIDE .rank-1-name —
   which is how the rating page renders it — the parent's
   background-clip: text + -webkit-text-fill-color: transparent paints
   ALL child glyphs invisibly, including the emoji. Selection then
   shows the bounding box, which is why the bug looked like "crown
   only visible while text is selected".

   The trio of -webkit-text-fill-color: initial + color: initial +
   background-clip: initial undoes the inheritance. */
html .rank-1-crown,
html .rank-1-name .rank-1-crown {
  display: inline-block;
  vertical-align: -0.05em;
  margin-right: 0.35em;
  font-size: 1.05em;
  /* Reset gradient-text inheritance so the emoji renders with its own
     opaque glyph fill, not the transparent fill of a .rank-1-name
     ancestor. */
  -webkit-text-fill-color: initial;
  color: initial;
  background: none;
  background-clip: initial;
  -webkit-background-clip: initial;
  /* Belt-and-suspenders against any transparent inheritance. */
  opacity: 1;
  /* Make the crown its own painting context so the parent's
     background-clip can't reach into it. */
  isolation: isolate;
  animation: rgbTop1Glow 2.2s ease-in-out infinite;
  /* A subtle gold glow makes the crown legible on any background and
     hints at the prestige tier. */
  filter: drop-shadow(0 0 5px rgba(255, 196, 0, 0.65));
}

/* When the top-1 chip itself wraps a row, give it a subtle outer glow.
   Optional. Pages that use a plain row can just style .rank-1-name. */
html .leader-row.rank-1 {
  position: relative;
}
html .leader-row.rank-1::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(245, 158, 11, 0.22),
    rgba(168, 85, 247, 0.22),
    rgba(245, 158, 11, 0.22));
  background-size: 200% auto;
  animation: rgbTop1Shift 6s linear infinite;
  z-index: -1;
  filter: blur(8px);
  opacity: 0.7;
}

/* Respect the OS "reduce motion" toggle. */
@media (prefers-reduced-motion: reduce) {
  html .rank-1-name, html .rank-1-crown, html .leader-row.rank-1::before {
    animation: none;
  }
}