/* === Points System === */
/* Persistent counter bar + flying-number + particle burst.                  */
/* All motion is transform/opacity only. Honors prefers-reduced-motion via   */
/* duration tokens collapsing to 1ms.                                        */

/* ── Layer scaffolding (set positioning + z so the layers actually float) ─ */
#particles-layer,
#flying-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#particles-layer { z-index: var(--z-particles); }
#flying-layer    { z-index: var(--z-flying); }

/* ── Persistent counter bar ─────────────────────────────────────────────── */
.points-counter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-counter);

  /* Dark, translucent — readable on every brand gradient */
  background: var(--surface-toolbar);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border-top: 1px solid var(--border-card);

  /* Bar is ~88px tall plus the iOS home-indicator inset. */
  padding: var(--sp-2) var(--sp-4);
  padding-bottom: calc(var(--sp-2) + var(--safe-bottom));

  display: flex;
  align-items: center;
  justify-content: center;

  /* Subtle separation glow above the bar (acts like a top stroke when the
     gradient backdrop is bright). transform-only — no animation here. */
  box-shadow:
    0 -1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 -12px 32px -16px rgba(0, 0, 0, 0.6);
}

.points-counter__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 72px;            /* bar ≈ 88px after vertical padding */
  min-width: 140px;
  padding: 0 var(--sp-5);
  isolation: isolate;
  will-change: transform;
}

/* Soft active-gradient halo behind the number — gives the counter a faint
   tie-in to whatever gradient is currently on stage, without sacrificing
   contrast on the number itself. */
.points-counter__glow {
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: var(--r-pill);
  background: radial-gradient(
    65% 100% at 50% 50%,
    color-mix(in oklab, var(--grad-active-2) 35%, transparent) 0%,
    transparent 70%
  );
  filter: blur(14px);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-smooth);
}

/* Number — Bungee, large, white. Letters stay still; only the count changes. */
.points-counter__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.5rem);
  line-height: 1;
  letter-spacing: var(--letterspace-display);
  color: var(--text-primary);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4),
               0 0 18px color-mix(in oklab, var(--grad-active-2) 60%, transparent);
  font-variant-numeric: tabular-nums;
  /* Tabular numerals stop the box width from jittering as digits change. */
}

.points-counter__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-label);
  letter-spacing: var(--letterspace-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Pulse — applied for one cycle when an award lands. Driven from JS by
   toggling .is-pulsing. Transform/opacity only. */
.points-counter__inner.is-pulsing {
  animation: points-pulse var(--dur-base) var(--ease-spring);
}

@keyframes points-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Flying +N number ───────────────────────────────────────────────────── */
.flying-number {
  position: absolute;
  /* x/y set inline; transform pre-set to centre on the anchor. */
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: var(--letterspace-display);
  color: var(--text-primary);
  /* Gradient text fill — uses whichever gradient is currently active. */
  background: linear-gradient(
    135deg,
    var(--grad-active-1) 0%,
    var(--grad-active-2) 50%,
    var(--grad-active-3) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  will-change: transform, opacity;
  white-space: nowrap;
  user-select: none;
  /* Subtle halo behind the glyph so it pops on bright gradient regions. */
  padding: 4px 10px;
}

/* ── Particle burst ─────────────────────────────────────────────────────── */
.points-particle {
  position: absolute;
  border-radius: 50%;
  /* Anchor centre on the (x,y); JS sets left/top to the burst origin. */
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.95;
  pointer-events: none;
  will-change: transform, opacity;
  box-shadow: 0 0 8px currentColor;
  animation: points-particle-fly var(--p-life, 500ms) cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes points-particle-fly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.95;
  }
  100% {
    transform:
      translate(calc(-50% + var(--p-tx, 0px)), calc(-50% + var(--p-ty, 0px)))
      scale(0);
    opacity: 0;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .points-counter__inner.is-pulsing { animation: none; }
  .points-particle { animation-duration: 1ms; }
  .flying-number { transition-duration: 1ms !important; }
}