Score Ring

<!-- Score Ring -->
<div class="nuda-score" role="img" aria-label="Score 92 out of 100">
  <svg viewBox="0 0 80 80">
    <circle cx="40" cy="40" r="34" fill="none"
            stroke="rgba(255,255,255,.06)" stroke-width="6" />
    <circle class="nuda-score__arc" cx="40" cy="40" r="34" fill="none"
            stroke="#e4ff54" stroke-width="6" stroke-linecap="round" />
  </svg>
  <span class="nuda-score__value">92</span>
  <span class="nuda-score__label">Score</span>
</div>

/* Score Ring
   Circular progress ring with score number popping in.
   For different score: 213 ≈ 2π × 34. Offset = 213 × (1 - score/100).
   Customize: --score-color, --score-track, --score-target. */

.nuda-score {
  --score-color: #e4ff54;
  --score-track: rgba(255, 255, 255, 0.06);
  --score-target: 17; /* 213 × (1 - 92/100) */
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-score svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 8px rgba(228, 255, 84, 0.25));
}

.nuda-score__arc {
  stroke-dasharray: 213;
  stroke-dashoffset: 213;
  animation: nuda-score-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nuda-score__value {
  position: relative;
  font: 800 1.6rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  animation: nuda-score-pop 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

.nuda-score__label {
  position: absolute;
  bottom: 14px;
  font: 600 0.55rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes nuda-score-fill { to { stroke-dashoffset: var(--score-target); } }

@keyframes nuda-score-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-score__arc   { stroke-dashoffset: var(--score-target); animation: none; }
  .nuda-score__value { animation: none; }
}