/* All selectors/keyframes are namespaced. Theme values inherit from the host. */
.streak-flame {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  flex-shrink: 0;
  color: var(--header-text, var(--text, #1f2a37));
  font-family: var(--font-sans, system-ui, sans-serif);
  line-height: 1;
  isolation: isolate;
}
.streak-flame__svg { display: block; flex: none; overflow: visible; }
.streak-flame--20 .streak-flame__svg { width: 20px; height: 20px; }
.streak-flame--28 .streak-flame__svg { width: 28px; height: 28px; }
.streak-flame--40 .streak-flame__svg { width: 40px; height: 40px; }
.streak-flame__count { font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
.streak-flame--40 .streak-flame__count { font-size: 18px; }
.streak-flame--badge { gap: 0; align-items: flex-end; padding-bottom: 3px; }
.streak-flame--badge .streak-flame__count {
  position: relative;
  margin-left: -7px;
  margin-bottom: -3px;
  padding: 3px 4px;
  min-width: 19px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 6px;
  border: 1px solid var(--border, #ddd8cb);
  background: var(--header-bg, var(--surface, #fffdf8));
  font-size: 12px;
}
.streak-flame__outer-low { stop-color: #dc441e; }
.streak-flame__outer-high { stop-color: #ffad31; }
.streak-flame__inner-low { stop-color: #ffb82f; }
.streak-flame__inner-high { stop-color: #fff1a3; }
.streak-flame__ribbon { fill: #f66b24; }
.streak-flame__core { fill: #fff8ce; }
.streak-flame__body { transform-origin: 50% 90%; }
.streak-flame__heart { transform-origin: 52% 87%; }
.streak-flame--yanik .streak-flame__body { animation: sf-sway 2.8s ease-in-out infinite; }
.streak-flame--yanik .streak-flame__heart { animation: sf-heart 1.9s ease-in-out infinite; }
.streak-flame--sonuk .streak-flame__outer-low { stop-color: #6f7976; }
.streak-flame--sonuk .streak-flame__outer-high { stop-color: #a7b0a8; }
.streak-flame--sonuk .streak-flame__inner-low { stop-color: #aab3ac; }
.streak-flame--sonuk .streak-flame__inner-high { stop-color: #dce0d8; }
.streak-flame--sonuk .streak-flame__ribbon { fill: #89958e; }
.streak-flame__smoke { color: var(--text-dim, #718078); opacity: .6; }
.streak-flame--harli .streak-flame__outer-low { stop-color: #e04b13; }
.streak-flame--harli .streak-flame__outer-high { stop-color: #ffc247; }
.streak-flame--harli .streak-flame__inner-high { stop-color: #fff7ce; }
.streak-flame--harli .streak-flame__body { animation: sf-blaze 1.7s ease-in-out infinite; }
.streak-flame--harli .streak-flame__heart { animation: sf-heart 1.3s ease-in-out -.4s infinite; }
.streak-flame__halo { transform-origin: 50% 58%; animation: sf-glow 2.6s ease-in-out infinite; }
.streak-flame__sparks { color: #e9a12c; }
.streak-flame__spark { animation: sf-spark 2.6s ease-out infinite; }
.streak-flame__spark--b { animation-delay: -.9s; }
.streak-flame__spark--c { animation-delay: -1.7s; }
@keyframes sf-sway {
  0%, 100% { transform: rotate(-2deg) scale(.98, 1); }
  40% { transform: rotate(2deg) scale(1.02, .97); }
  70% { transform: rotate(-.6deg) scale(.99, 1.025); }
}
@keyframes sf-heart {
  0%, 100% { transform: scale(.96, 1); opacity: .9; }
  50% { transform: scale(1.035, .94); opacity: 1; }
}
@keyframes sf-blaze {
  0%, 100% { transform: rotate(-2.5deg) scale(.98, 1); }
  35% { transform: rotate(2.5deg) scale(1.025, .96); }
  70% { transform: rotate(-1deg) scale(.98, 1.035); }
}
@keyframes sf-glow {
  0%, 100% { transform: scale(.9); opacity: .6; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes sf-spark {
  0% { transform: translate(0, 5px) scale(.8); opacity: 0; }
  25% { opacity: .95; }
  75% { opacity: .6; }
  100% { transform: translate(2px, -7px) scale(.55); opacity: 0; }
}
/* Also available as an explicit preference on the component or an ancestor. */
[data-flame-motion="off"] .streak-flame *, .streak-flame[data-flame-motion="off"] * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .streak-flame * { animation: none !important; }
}
@media (forced-colors: active) {
  .streak-flame__body path { fill: CanvasText; stroke: Canvas; stroke-width: 1.5; }
  .streak-flame__halo { display: none; }
  .streak-flame__sparks, .streak-flame__smoke { color: CanvasText; }
}