/* shared/progress-ring.css — PFB.progressRing styles */

/* Wrapper — sized to avatar + ring thickness. Inline-flex so it slots in
   wherever the old avatar used to live without disturbing flex-grid layouts.
   --pfb-pr-size and --pfb-pr-thickness are set per-mount by progress-ring.js. */
.pfb-pr-wrap {
  --pfb-pr-size:      72px;
  --pfb-pr-thickness: 3px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width:  var(--pfb-pr-size);
  height: var(--pfb-pr-size);
  vertical-align: middle;
  line-height: 0;
}

/* Inner avatar (img or .*-placeholder div) inherits the wrapper size so
   the ring doesn't cover the photo. The original element keeps its own
   border-radius / object-fit styles. */
.pfb-pr-wrap > :not(.pfb-pr-svg) {
  width:  100% !important;
  height: 100% !important;
  max-width:  100%;
  max-height: 100%;
  flex-shrink: 0;
}

/* SVG overlay — inset by thickness so the stroke sits fully outside the
   avatar circle. Pointer-events none so taps pass through to the avatar. */
.pfb-pr-svg {
  position: absolute;
  top:    calc(-1 * var(--pfb-pr-thickness));
  left:   calc(-1 * var(--pfb-pr-thickness));
  width:  calc(100% + 2 * var(--pfb-pr-thickness));
  height: calc(100% + 2 * var(--pfb-pr-thickness));
  pointer-events: none;
  overflow: visible; /* allow drop-shadow glow */
}

/* stroke-width in viewBox units (100). Actual px width ≈ stroke-width ×
   (rendered-svg-px / 100). For 46px avatar + 3px ring the SVG is 52px so
   stroke-width 7 → ~3.6px; for 72px avatar + 3px SVG is 78px so 7 → ~5.5px.
   Good enough without complicated calc(); progress-ring.js can override
   stroke-width per-instance if needed. */
.pfb-pr-track {
  fill: none;
  stroke: rgba(212, 146, 10, 0.2); /* --amber @ 0.2 */
  stroke-width: 6;
}

.pfb-pr-fill {
  fill: none;
  stroke: var(--amber-hi, #F5B030);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 400ms ease-out, stroke 250ms ease-out;
  filter: drop-shadow(0 0 2px rgba(245, 176, 48, 0.55));
}

/* Tone: amber (L 1–20) — default above */
.pfb-pr-wrap[data-tone="amber"] .pfb-pr-fill {
  stroke: var(--amber-hi, #F5B030);
  filter: drop-shadow(0 0 2px rgba(245, 176, 48, 0.55));
}

/* Tone: gold (L 21–50) — brighter, stronger glow */
.pfb-pr-wrap[data-tone="gold"] .pfb-pr-fill {
  stroke: #FFD54A;
  filter: drop-shadow(0 0 3px rgba(255, 213, 74, 0.75));
}
.pfb-pr-wrap[data-tone="gold"] .pfb-pr-track {
  stroke: rgba(255, 213, 74, 0.18);
}

/* Tone: chaos (L 51+) — animated rotating gradient, soft pulse */
.pfb-pr-wrap[data-tone="chaos"] .pfb-pr-svg {
  animation: pfb-pr-rotate 8s linear infinite;
}
.pfb-pr-wrap[data-tone="chaos"] .pfb-pr-fill {
  stroke: url(#pfb-pr-chaos-grad);
  /* Fallback if gradient not defined: amber-hi */
  stroke: #FFD54A;
  filter: drop-shadow(0 0 4px rgba(245, 176, 48, 0.85));
  animation: pfb-pr-chaos-pulse 2.8s ease-in-out infinite;
}
.pfb-pr-wrap[data-tone="chaos"] .pfb-pr-track {
  stroke: rgba(255, 107, 107, 0.22);
}

@keyframes pfb-pr-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pfb-pr-chaos-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(245, 176, 48, 0.7)); }
  50%      { filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.9)); }
}

/* Reduced motion: no sweeps, no rotation, no pulse — static ring only */
@media (prefers-reduced-motion: reduce) {
  .pfb-pr-fill {
    transition: none;
  }
  .pfb-pr-wrap[data-tone="chaos"] .pfb-pr-svg,
  .pfb-pr-wrap[data-tone="chaos"] .pfb-pr-fill {
    animation: none;
  }
}

/* ── Char-select integration nudges ───────────────────────────────────────
   sel-grid-photo is 46×46 with a 1.5px border. When wrapped, the ring wraps
   the photo keeping the same visual footprint; avoid double-border clash. */
.sel-grid-item .pfb-pr-wrap > .sel-grid-photo,
.sel-grid-item .pfb-pr-wrap > .sel-grid-photo-placeholder {
  border: 0;
}

/* ── Profile-sheet mini-avatar (level badge on hero photo) ────────────── */
.profile-level-badge {
  position: absolute;
  right: 1rem;
  bottom: -1.4rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  border-radius: 999px;
  background: rgba(6, 4, 0, 0.78);
  border: 1px solid rgba(245, 176, 48, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.profile-level-badge-avatar {
  width:  44px;
  height: 44px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  background-color: rgba(255, 255, 255, 0.06);
}
.profile-level-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: var(--cream, #FFF3D0);
  padding-right: 0.2rem;
}
.profile-level-badge-num {
  font-family: 'Anton', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}
.profile-level-badge-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  opacity: 0.8;
  text-transform: uppercase;
  margin-top: 0.15rem;
}