/* Standalone streak-counter badge - a general-purpose "you're on a streak" indicator, kept separate
   from any one minigame's own CSS/JS so it can be reused by whatever triggers a streak (currently
   wired up to the collectable minigame, see public/js/operations/streakCounter.js). Fixed to the
   bottom-center of the viewport, above the chat bar. Hidden by default (display:none) - shown only
   while a streak is actually active. */
#streak-counter {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 76px;
    transform: translateX(-50%);
    z-index: 50;
    width: 105px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 9px -7px #00000066;
    font-family: Arial, sans-serif;
    pointer-events: none;
	border: 2px solid #000;
}

#streak-counter-label {
    background: #e8192e;
    color: #FFF;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 5px 0;
    text-shadow: 0 1px 1px #00000055;
}

#streak-counter-value {
    background: #FFF;
    color: #111;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    padding: 6px 0 8px;
}

/* Sized relative to #streak-counter-value's own font-size (em), so it stays proportioned - about a
   third the size of the number - if that font-size is ever tweaked. */
#streak-counter-value .streak-counter-x {
    font-size: 16px;
}

/* At 10+, the label swaps to an animated rainbow gradient - same look/approach as the frenzy
   chat announcement's rainbow background (div#chat-display-inner .special-achievement, style.css),
   just with its own copy of the keyframe so this file stays a standalone component. */
#streak-counter-label.streak-counter-rainbow {
    background: linear-gradient(
        45deg,
        #cc1717 0%,
        #f49b00 25%,
        #04a359 50%,
        #5523dd 75%,
        #bc36a1 100%
    );
    background-size: 400% 400%;
    animation: streakCounterRainbowMove 1s ease-in-out infinite alternate;
}

@keyframes streakCounterRainbowMove {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Appear: slides up from below into its resting position while fading in - quick, since this fires
   on every fresh streak. The keyframe has to restate translateX(-50%) at every step (not just the Y
   offset) since an active animation's transform fully replaces #streak-counter's own base transform
   for its duration. */
#streak-counter.streak-counter-entering {
    animation: streakCounterEnter 0.22s ease-out forwards;
}

@keyframes streakCounterEnter {
    0%   { transform: translateX(-50%) translateY(26px); opacity: 0; }
    100% { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* Disappear: fades out in place - no movement, very quick. */
#streak-counter.streak-counter-leaving {
    animation: streakCounterLeave 0.15s ease-in forwards;
}

@keyframes streakCounterLeave {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}