:root {
  --pf-black: #050605;
  --pf-green: #39ff14;
  --pf-red: #ff173d;
  --pf-gold: #f5b84b;
}

/* ── Base container ──────────────────────────────────────────────────────── */
.pf-avatar-frame {
  --size: 96px;
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  padding: 3px;
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  flex-shrink: 0;
}

/* padding: 3px + border: 3px → total offset per side = 6px → 2×6 = 12px */
.pf-avatar-frame > img {
  width: calc(var(--size) - 12px);
  height: calc(var(--size) - 12px);
  min-width: 0;
  min-height: 0;
  border-radius: inherit;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
  border: 3px solid var(--pf-black);
  background: var(--pf-black);
}

.pf-avatar-frame::before,
.pf-avatar-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

/* ── Common / Standard ───────────────────────────────────────────────────── */
/* Static — clean green gradient ring, no pulse */
.pf-frame-common {
  background: linear-gradient(135deg, #0d1a0d, var(--pf-green), #0d1a0d);
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.25);
}

/* ── Rare / Veteran ──────────────────────────────────────────────────────── */
/* Dark base — spinning ::before sweeps provide all the green */
.pf-frame-rare {
  background: #0a1a0a;
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.38);
}

.pf-frame-rare::before {
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(57, 255, 20, 0.8) 80deg,
    transparent 160deg,
    transparent 180deg,
    rgba(57, 255, 20, 0.8) 260deg,
    transparent 360deg);
  filter: blur(3px);
  animation: pf-spin 3s linear infinite;
}

/* ── Elite ───────────────────────────────────────────────────────────────── */
/* Red & green co-rotate as one: ::before + ::after share identical gradient
   and identical speed so they move in perfect lockstep */
.pf-frame-elite {
  background: var(--pf-black);
  box-shadow:
    0 0 18px rgba(57, 255, 20, 0.40),
    0 0 28px rgba(255, 23, 61, 0.25);
}

.pf-frame-elite::before {
  background: conic-gradient(from 0deg,
    var(--pf-green) 0deg 60deg,
    var(--pf-red)   60deg 120deg,
    var(--pf-green) 120deg 180deg,
    var(--pf-red)   180deg 240deg,
    var(--pf-green) 240deg 300deg,
    var(--pf-red)   300deg 360deg);
  filter: blur(2px);
  animation: pf-spin 2.2s linear infinite;
}

.pf-frame-elite::after {
  background: conic-gradient(from 0deg,
    var(--pf-green) 0deg 60deg,
    var(--pf-red)   60deg 120deg,
    var(--pf-green) 120deg 180deg,
    var(--pf-red)   180deg 240deg,
    var(--pf-green) 240deg 300deg,
    var(--pf-red)   300deg 360deg);
  filter: blur(8px);
  opacity: 0.55;
  animation: pf-spin 2.2s linear infinite;
}

/* ── Legend — Infernal Forge ─────────────────────────────────────────────── */
/* Molten gold/orange base with twin white-hot spark sweeps */
.pf-frame-legend {
  background: conic-gradient(from 0deg,
    #7a3200  0deg,
    #f5b84b  45deg,
    #ff5500  90deg,
    #8b3a00  135deg,
    #7a3200  180deg,
    #f5b84b  225deg,
    #ff5500  270deg,
    #8b3a00  315deg,
    #7a3200  360deg);
  box-shadow:
    0 0 16px rgba(255, 90, 0, 0.70),
    0 0 36px rgba(245, 184, 75, 0.40),
    0 0 55px rgba(200, 40, 0, 0.20);
}

.pf-frame-legend::before {
  inset: -4px;
  background: conic-gradient(from 0deg,
    transparent              0deg,
    rgba(255, 230, 80, 0.90) 32deg,
    rgba(255, 120, 0, 0.65)  65deg,
    transparent              105deg,
    transparent              180deg,
    rgba(255, 230, 80, 0.90) 212deg,
    rgba(255, 120, 0, 0.65)  245deg,
    transparent              285deg,
    transparent              360deg);
  filter: blur(5px);
  animation: pf-spin 2s linear infinite;
}

/* ── Founder — The Architect ─────────────────────────────────────────────── */
/* Void black base, white-hot peaks, neon green + scorched amber.
   The colors go to maximum — no pastels, no soft tones. */
.pf-frame-founder {
  background: conic-gradient(from 0deg,
    #600000  0deg,
    #39ff14  35deg,
    #cc00ff  72deg,
    #ffffff  100deg,
    #cc00ff  128deg,
    #600000  165deg,
    #600000  180deg,
    #39ff14  215deg,
    #cc00ff  252deg,
    #ffffff  280deg,
    #cc00ff  308deg,
    #600000  345deg,
    #600000  360deg);
  animation: pf-founder-glow 2.5s ease-in-out infinite;
}

/* Two neon green comets orbiting clockwise */
.pf-frame-founder::before {
  background: conic-gradient(from 0deg,
    transparent              0deg,
    rgba(57, 255, 20, 0.06)  40deg,
    rgba(57, 255, 20, 0.75)  82deg,
    rgba(57, 255, 20, 1.0)   100deg,
    rgba(255, 255, 255, 0.6) 108deg,
    rgba(57, 255, 20, 0.2)   125deg,
    transparent              155deg,
    transparent              180deg,
    rgba(57, 255, 20, 0.06)  220deg,
    rgba(57, 255, 20, 0.75)  262deg,
    rgba(57, 255, 20, 1.0)   280deg,
    rgba(255, 255, 255, 0.6) 288deg,
    rgba(57, 255, 20, 0.2)   305deg,
    transparent              335deg,
    transparent              360deg);
  filter: blur(1.5px);
  animation: pf-spin 2.8s linear infinite;
}

/* Two scorched-amber comets counter-orbiting */
.pf-frame-founder::after {
  inset: -1px;
  background: conic-gradient(from 90deg,
    transparent               0deg,
    rgba(200, 0, 255, 0.06)   40deg,
    rgba(200, 0, 255, 0.75)   82deg,
    rgba(200, 0, 255, 1.0)    100deg,
    rgba(255, 255, 255, 0.7)  108deg,
    rgba(200, 0, 255, 0.2)    125deg,
    transparent               155deg,
    transparent               180deg,
    rgba(200, 0, 255, 0.06)   220deg,
    rgba(200, 0, 255, 0.75)   262deg,
    rgba(200, 0, 255, 1.0)    280deg,
    rgba(255, 255, 255, 0.7)  288deg,
    rgba(200, 0, 255, 0.2)    305deg,
    transparent               335deg,
    transparent               360deg);
  filter: blur(1.5px);
  animation: pf-spin-reverse 4.2s linear infinite;
}

/* ── Oblivion — second founder frame ────────────────────────────────────── */
/* Pure darkness. Blood red that seeps rather than shines.
   Two shadow sweeps, slow and inevitable. */
.pf-frame-oblivion {
  background: conic-gradient(from 0deg,
    #000000  0deg,
    #0f0000  40deg,
    #2d0000  80deg,
    #0f0000  120deg,
    #000000  160deg,
    #0f0000  200deg,
    #2d0000  240deg,
    #0f0000  280deg,
    #000000  320deg,
    #0f0000  360deg);
  animation: pf-void-pulse 4s ease-in-out infinite;
}

/* Single blood-red comet — slow, lone, inevitable */
.pf-frame-oblivion::before {
  background: conic-gradient(from 0deg,
    transparent            0deg,
    rgba(60,  0,  0, 0.15) 50deg,
    rgba(150, 0,  0, 0.70) 85deg,
    rgba(220, 0,  0, 1.00) 100deg,
    rgba(255, 20, 0, 0.85) 108deg,
    rgba(140, 0,  0, 0.25) 132deg,
    transparent            168deg,
    transparent            360deg);
  filter: blur(2px);
  animation: pf-spin 7s linear infinite;
}

/* Counter-shadow — darker, wider, stalking the opposite direction */
.pf-frame-oblivion::after {
  inset: -2px;
  background: conic-gradient(from 180deg,
    transparent            0deg,
    rgba(30,  0,  0, 0.12) 55deg,
    rgba(100, 0,  0, 0.55) 88deg,
    rgba(185, 0,  0, 0.90) 101deg,
    rgba(100, 0,  0, 0.20) 122deg,
    transparent            162deg,
    transparent            360deg);
  filter: blur(3px);
  animation: pf-spin-reverse 11s linear infinite;
}

/* ── Size modifiers ──────────────────────────────────────────────────────── */
.pf-avatar-sm { --size: 48px; padding: 2px; }
.pf-avatar-md { --size: 72px; padding: 3px; }
.pf-avatar-lg { --size: 96px; }
.pf-avatar-xl { --size: 128px; padding: 4px; }

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes pf-spin {
  to { transform: rotate(360deg); }
}

@keyframes pf-spin-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes pf-void-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(140, 0, 0, 0.22),
      0 0  6px rgba(90,  0, 0, 0.50),
      0 0 18px rgba(50,  0, 0, 0.38),
      0 0 38px rgba(20,  0, 0, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(220, 0, 0, 0.70),
      0 0 14px rgba(160, 0, 0, 0.90),
      0 0 32px rgba(90,  0, 0, 0.55),
      0 0 60px rgba(50,  0, 0, 0.32);
  }
}

@keyframes pf-founder-glow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(57, 255, 20, 0.6),
      0 0 10px rgba(57, 255, 20, 0.5),
      0 0 24px rgba(200, 0, 255, 0.45),
      0 0 48px rgba(57, 255, 20, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.95),
      0 0 18px rgba(57, 255, 20, 0.9),
      0 0 40px rgba(200, 0, 255, 0.75),
      0 0 75px rgba(57, 255, 20, 0.4),
      0 0 100px rgba(200, 0, 255, 0.15);
  }
}

/* ── Initials fallback ───────────────────────────────────────────────────── */
.pf-avatar-frame > .pf-initials {
  width: calc(var(--size) - 12px);
  height: calc(var(--size) - 12px);
  min-width: 0;
  min-height: 0;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #111911, #0a160a);
  font-size: calc(var(--size) * 0.32);
  font-weight: 800;
  color: var(--pf-green);
  position: relative;
  z-index: 2;
  border: 3px solid var(--pf-black);
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.02em;
  user-select: none;
}

/* ── Accessibility ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pf-avatar-frame,
  .pf-avatar-frame::before,
  .pf-avatar-frame::after {
    animation: none !important;
  }
}