.bx-streak {
    --bx-streak-fg: var(--ws-streak-idle);
    --bx-streak-bg: var(--ws-streak-idle-soft);
    --bx-streak-flicker: 0s;
    --bx-streak-icon: 14px;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 3px 9px 3px 7px;
    border: 1px solid color-mix(in srgb, var(--bx-streak-fg) 26%, transparent);
    border-radius: var(--ws-radius-full, 999px);
    background: var(--bx-streak-bg);
    color: var(--bx-streak-fg);
    font: 800 12px/1 var(--ws-font-sans, Inter, sans-serif);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bx-streak[hidden] { display: none !important; }

.bx-streak--bare {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
     
    font-size: inherit;
    font-weight: inherit;
    --bx-streak-icon: 15px;
}

.bx-streak--bare .bx-streak__value { color: var(--ws-fg); }

.bx-streak--stack {
    flex-direction: column;
    gap: 2px;
    --bx-streak-icon: 16px;
}

.bx-streak--stack .bx-streak__value {
    font-family: var(--ws-font-heading, Manrope, sans-serif);
    font-weight: 700;
}

.bx-streak__flame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--bx-streak-icon);
    height: var(--bx-streak-icon);
    transform-origin: 50% 85%;
    animation: bx-streak-flicker var(--bx-streak-flicker) ease-in-out infinite;
}

.bx-streak__flame svg {
    display: block;
    width: var(--bx-streak-icon);
    height: var(--bx-streak-icon);
    stroke-width: 2.2;
}

.bx-streak[data-streak-tier="none"] .bx-streak__flame {
    opacity: 0.65;
}

.bx-streak[data-streak-tier="spark"] {
    --bx-streak-fg: var(--ws-streak-spark);
    --bx-streak-bg: var(--ws-streak-spark-soft);
    --bx-streak-flicker: 3.6s;
}

.bx-streak[data-streak-tier="warm"] {
    --bx-streak-fg: var(--ws-streak-warm);
    --bx-streak-bg: var(--ws-streak-warm-soft);
    --bx-streak-flicker: 3s;
}

.bx-streak[data-streak-tier="hot"] {
    --bx-streak-fg: var(--ws-streak-hot);
    --bx-streak-bg: var(--ws-streak-hot-soft);
    --bx-streak-flicker: 2.4s;
}

.bx-streak[data-streak-tier="blaze"] {
    --bx-streak-fg: var(--ws-streak-blaze);
    --bx-streak-bg: var(--ws-streak-blaze-soft);
    --bx-streak-flicker: 1.9s;
}

.bx-streak[data-streak-tier="legend"] {
    --bx-streak-fg: var(--ws-streak-legend);
    --bx-streak-bg: var(--ws-streak-legend-soft);
    --bx-streak-flicker: 1.5s;
    border-color: color-mix(in srgb, var(--bx-streak-fg) 42%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bx-streak-fg) 12%, transparent);
    overflow: hidden;
}

.bx-streak--bare[data-streak-tier="legend"] {
    box-shadow: none;
    overflow: visible;
}

.bx-streak[data-streak-tier="legend"]:not(.bx-streak--bare)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 38%,
        color-mix(in srgb, var(--bx-streak-fg) 22%, transparent) 50%,
        transparent 62%
    );
    transform: translateX(-100%);
    animation: bx-streak-sheen 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bx-streak-flicker {
    0%, 100% { transform: scale(1);    opacity: 1;    }
    45%      { transform: scale(1.14); opacity: 0.86; }
    70%      { transform: scale(0.97); opacity: 1;    }
}

@keyframes bx-streak-sheen {
    0%, 55% { transform: translateX(-100%); }
    100%    { transform: translateX(100%);  }
}

@media (prefers-reduced-motion: reduce) {
    .bx-streak__flame,
    .bx-streak[data-streak-tier="legend"]::after {
        animation: none;
    }

    .bx-streak[data-streak-tier="legend"]::after { opacity: 0; }
}