Achievement Badge

<!-- Achievement Badge -->
<div class="nuda-ach">
  <div class="nuda-ach__medal">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8 2 L16 2 L18 6 L12 14 L6 6 Z" />
      <circle cx="12" cy="17" r="5" />
      <path d="M12 14 L12 22" opacity="0.3" />
    </svg>
  </div>
  <div class="nuda-ach__info">
    <span class="nuda-ach__title">Top performer</span>
    <span class="nuda-ach__value">×3 unlocked</span>
  </div>
</div>

/* Achievement Badge
   Medal icon with gentle sway, paired with title + count.
   Customize: --ach-color, --ach-bg */

.nuda-ach {
  --ach-color: #e4ff54;
  --ach-bg: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ach-bg);
  border: 1px solid rgba(228, 255, 84, 0.2);
  border-radius: 12px;
  animation: nuda-ach-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nuda-ach__medal {
  position: relative;
  width: 40px;
  height: 40px;
  color: var(--ach-color);
  filter: drop-shadow(0 0 8px rgba(228, 255, 84, 0.5));
  animation: nuda-ach-shine 3s ease-in-out infinite;
}

.nuda-ach__medal svg { width: 100%; height: 100%; }

.nuda-ach__info {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.nuda-ach__title {
  font: 700 0.875rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
}

.nuda-ach__value {
  font: 600 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: var(--ach-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

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

@keyframes nuda-ach-shine {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-ach,
  .nuda-ach__medal { animation: none; }
}