Streak Flame

<!-- Streak Flame -->
<div class="nuda-streak">
  <div class="nuda-streak__flame">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 2 C 14 6, 18 8, 18 13 A 6 6 0 0 1 6 13 C 6 10, 8 9, 9 7 C 10 9, 11 9, 12 8 C 12 6, 12 4, 12 2 Z" />
    </svg>
  </div>
  <div class="nuda-streak__info">
    <span class="nuda-streak__value">47</span>
    <span class="nuda-streak__label">day streak</span>
  </div>
</div>

/* Streak Flame
   Flickering flame icon paired with a day-streak counter.
   Customize: --streak-color, --streak-bg */

.nuda-streak {
  --streak-color: #e4ff54;
  --streak-bg: rgba(228, 255, 84, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--streak-bg);
  border: 1px solid rgba(228, 255, 84, 0.15);
  border-radius: 12px;
}

.nuda-streak__flame {
  width: 36px;
  height: 36px;
  color: var(--streak-color);
  animation: nuda-streak-flicker 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(228, 255, 84, 0.5));
}

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

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

.nuda-streak__value {
  font: 800 1.5rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
}

.nuda-streak__label {
  font: 500 0.625rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

@keyframes nuda-streak-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}

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