/* =============================================================
   XP-BURST — Partikel-Layer + Pulse auf der XP-Pille beim Quest-Check.
   Layer ist body-level fixed (z ueber Topbar, unter Modals), Pointer-
   Events durchgereicht. Partikel sind GPU-beschleunigt via transform/
   opacity-Animation; will-change pin't sie auf die Compositor-Schicht.
   ============================================================= */
#xp-burst-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Ueber Topbar (kein z-index dort), unter Confirm/Admin-Modal (z 110+). */
  z-index: 105;
  overflow: visible;
}
.xp-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  /* Radialer Glow: heller Kern, weicher Rand. Box-shadow gibt extra
     Leucht-Aura — dadurch wirken die Partikel wie kleine Funken statt
     flacher Kreise. */
  background: radial-gradient(
    circle at 35% 35%,
    color-mix(in srgb, var(--xp-particle-color, #fbbf24) 92%, #fff),
    var(--xp-particle-color, #fbbf24) 70%,
    color-mix(in srgb, var(--xp-particle-color, #fbbf24) 50%, transparent)
  );
  box-shadow:
    0 0 6px 1px color-mix(in srgb, var(--xp-particle-color, #fbbf24) 80%, transparent),
    0 0 14px 3px color-mix(in srgb, var(--xp-particle-color, #fbbf24) 40%, transparent);
  /* GPU-Compositing erzwingen — verhindert Flicker auf iOS. */
  transform: translateZ(0);
}

/* XP-Pulse auf der Topbar-XP-Section (wird bei jeder Partikel-Ankunft
   getriggert). Sanftes Glow um die Bar herum, kurz und dezent — nicht
   ablenkend, aber spuerbar. */
.xp-pulse {
  animation: xp-pulse 380ms var(--ease) both;
}
@keyframes xp-pulse {
  0%   { filter: brightness(1)    drop-shadow(0 0 0 transparent); }
  35%  { filter: brightness(1.18) drop-shadow(0 0 8px color-mix(in srgb, var(--xp, #fbbf24) 60%, transparent)); }
  100% { filter: brightness(1)    drop-shadow(0 0 0 transparent); }
}
/* Schnellere XP-Fill-Bar-Transition waehrend des Bursts — Default ist
   700ms, das wirkt bei 9 Partikel-Inkrementen traege. Pro Tick eine
   schnelle, knackige Aenderung. */
.xp-track.is-burst .xp-fill {
  transition: width 220ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .xp-particle { display: none; }
  .xp-pulse { animation: none; }
}