Achievements Strip

<div class="nuda-achievements">
  <div class="nuda-achievements__avatar">TM</div>
  <div class="nuda-achievements__medals">
    <div class="nuda-achievements__medal" data-tone="gold"   title="Top contributor"><!-- star --></div>
    <div class="nuda-achievements__medal" data-tone="silver" title="100 days streak"><!-- bolt --></div>
    <div class="nuda-achievements__medal" data-tone="pink"   title="Community love"><!-- heart --></div>
    <div class="nuda-achievements__medal" data-tone="blue"   title="Mentor"><!-- user --></div>
  </div>
</div>

/* Achievements Strip
   Avatar + row of tonal medal chips.
   Customize: data-tone variants */

.nuda-achievements {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-family: system-ui, sans-serif;
}

.nuda-achievements__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #09090b;
  background: linear-gradient(135deg, #e4ff54, #62b6ff);
}

.nuda-achievements__medals { display: inline-flex; gap: 4px; }

.nuda-achievements__medal {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.nuda-achievements__medal:hover { transform: translateY(-2px) scale(1.08); }

.nuda-achievements__medal[data-tone="gold"]   { color: #09090b; background: linear-gradient(135deg, #ffb45e, #e4ff54); }
.nuda-achievements__medal[data-tone="silver"] { color: #09090b; background: linear-gradient(135deg, #d0d0d8, #a0a0a8); }
.nuda-achievements__medal[data-tone="pink"]   { color: #09090b; background: linear-gradient(135deg, #ff6dd4, #ff5e7a); }
.nuda-achievements__medal[data-tone="blue"]   { color: #09090b; background: linear-gradient(135deg, #62b6ff, #9d6dff); }

@media (prefers-reduced-motion: reduce) {
  .nuda-achievements__medal { transition: none; }
  .nuda-achievements__medal:hover { transform: none; }
}