.streak-digits-rolling { display: inline-flex !important; align-items: center; vertical-align: middle; line-height: 1.12; font-variant-numeric: tabular-nums; }
.streak-digit { display: inline-grid; position: relative; width: .65em; height: 1.15em; overflow: hidden; text-align: center; }
.streak-digit-old, .streak-digit-new { grid-area: 1 / 1; display: block; transform-origin: 50% 50%; backface-visibility: hidden; }
.streak-digit:not(.is-still) .streak-digit-old { animation: streak-digit-out 620ms cubic-bezier(.4,0,.2,1) var(--digit-delay) both; }
.streak-digit:not(.is-still) .streak-digit-new { animation: streak-digit-in 760ms cubic-bezier(.2,.85,.25,1.12) var(--digit-delay) both; }
.streak-digit.is-still .streak-digit-old { visibility: hidden; }
.streak-moment { position: fixed; z-index: 85; left: 50%; top: clamp(84px, 20vh, 170px); width: min(290px, calc(100vw - 36px)); transform: translateX(-50%); pointer-events: none; }
.streak-moment-card { position: relative; display: flex; align-items: center; flex-direction: column; padding: 20px 20px 16px; border-radius: 25px; border: 1px solid #f1c779; background: #fffaf0; color: #74451c; box-shadow: 0 16px 60px -12px #59320b47, 0 3px 0 #f4dca9; transform: translateY(15px) scale(.86); opacity: 0; }
.streak-moment.is-visible .streak-moment-card { animation: streak-moment-enter 480ms cubic-bezier(.16,1.25,.3,1) both; }
.streak-moment.is-leaving .streak-moment-card { animation: streak-moment-exit 240ms ease-in both; }
.streak-moment-label { font: 750 12px/1.4 "Hanken Grotesk", sans-serif; letter-spacing: .055em; color: #a47738; }
.streak-moment-hero { display: flex; justify-content: center; align-items: center; gap: 9px; margin: 10px 0 8px; }
.streak-moment-hero > img { width: 74px; height: 84px; transform-origin: 50% 85%; animation: streak-moment-flame 850ms ease both; }
.streak-moment-number { display: flex; align-items: center; gap: 7px; }
.streak-moment-number b { font: 800 70px/1.15 "Bricolage Grotesque", sans-serif; letter-spacing: -.055em; color: #e88422; font-variant-numeric: tabular-nums; }
.streak-moment-plus { align-self: flex-start; margin-top: 10px; border: 1px solid #ffce6b; border-radius: 9px; padding: 3px 6px; color: #c7731c; background: #fff0c9; font: 800 14px/1.1 "Hanken Grotesk", sans-serif; animation: streak-moment-badge 650ms cubic-bezier(.2,1.5,.3,1) 160ms both; }
.streak-moment-caption { font: 700 15px/1.4 "Hanken Grotesk", sans-serif; text-align: center; }
.streak-moment-loot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 13px; padding-top: 11px; border-top: 1px solid #f0e0c2; font: 650 12px/1.4 "Hanken Grotesk", sans-serif; color: #55788a; }
.streak-moment-loot > span { display: flex; align-items: center; gap: 5px; }
.streak-moment-loot img { width: 21px; height: 23px; }
.streak-moment-spark { position: absolute; color: #edb749; font-size: 19px; animation: streak-moment-spark 950ms ease 120ms both; }
.spark-a { top: 55px; left: 15px; }
.spark-b { top: 23px; right: 13px; font-size: 14px; animation-delay: 270ms; }
.spark-c { top: 116px; right: 11px; font-size: 12px; animation-delay: 350ms; }
.streak-moment.is-milestone .streak-moment-card { border-color: #e8ad3c; box-shadow: 0 16px 60px -12px #b77b1b55, 0 3px 0 #efc969; }
:root[data-theme="dark"] .streak-moment-card { background: #30281c; border-color: #79582b; color: #f7d298; box-shadow: 0 16px 60px -12px #000a, 0 3px 0 #624522; }
:root[data-theme="dark"] .streak-moment-label { color: #d5b782; }
:root[data-theme="dark"] .streak-moment-loot { border-color: #59452c; color: #bbd9e6; }
:root[data-theme="dark"] .streak-moment-plus { background: #4e361c; border-color: #845c2e; color: #ffc56a; }
@keyframes streak-digit-out { to { transform: translateY(-110%) rotateX(30deg); opacity: 0; } }
@keyframes streak-digit-in { from { transform: translateY(110%) rotateX(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes streak-moment-enter { to { opacity: 1; transform: none; } }
@keyframes streak-moment-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px) scale(.96); } }
@keyframes streak-moment-flame { 0% { transform: scale(.8) rotate(-7deg); } 45% { transform: scale(1.1) rotate(4deg); } 70% { transform: scale(.98) rotate(-2deg); } 100% { transform: none; } }
@keyframes streak-moment-badge { from { opacity: 0; transform: translateY(10px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes streak-moment-spark { 0% { opacity: 0; transform: scale(.3) rotate(-30deg); } 35% { opacity: 1; transform: scale(1.1) rotate(0); } 100% { opacity: 0; transform: translateY(-14px) scale(.6) rotate(30deg); } }
@media (prefers-reduced-motion: reduce) {
  .streak-moment *, .streak-digits-rolling * { animation: none !important; }
  .streak-moment-card { opacity: 1; transform: none; }
  .streak-moment-spark { display: none; }
}