/* Anime Wordle - Streak widget styles
 * Reuses the deep-ocean palette / sky border established by
 * shared/styles.css, shared/auth.css, shared/leaderboard.css.
 *
 * Two surfaces:
 *  - .streak-slot / .streak-badge — compact chip near the header.
 *  - .streak-win-row — animated row inside the win modal.
 */

/* ----------------------------------------------------------------- */
/* Home/header badge                                                  */
/* ----------------------------------------------------------------- */

.streak-slot {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1;
}

.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(20, 60, 100, 0.85);
    border: 1px solid rgba(91, 164, 212, 0.45);
    color: var(--text-primary, #F5F5F0);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.streak-badge:hover {
    background: rgba(20, 60, 100, 0.95);
    border-color: var(--accent-sky, #5BA4D4);
    transform: translateY(-1px);
}

.streak-badge.is-active {
    border-color: rgba(251, 191, 36, 0.65);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15), 0 4px 14px rgba(0, 0, 0, 0.25);
}

.streak-badge-icon {
    font-size: 1.05rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.45));
}

.streak-badge-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #F5F5F0);
}

.streak-badge:not(.is-active) .streak-badge-icon {
    filter: grayscale(0.6) opacity(0.85);
}

.streak-badge:not(.is-active) .streak-badge-count {
    color: rgba(245, 245, 240, 0.7);
}

/* ----------------------------------------------------------------- */
/* Win modal animated row                                             */
/* ----------------------------------------------------------------- */

.streak-win-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 14px auto 12px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(20, 60, 100, 0.65);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: var(--text-primary, #F5F5F0);
    max-width: 320px;
    width: 100%;
}

.streak-win-row[hidden] { display: none; }

.streak-win-kicker {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-close, #FBBF24);
}

.streak-win-flame {
    font-size: 2.2rem;
    line-height: 1;
    margin: 2px 0;
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.65));
}

.streak-win-count {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary, #F5F5F0);
}

.streak-win-best {
    font-size: 0.85rem;
    color: var(--text-secondary, rgba(245, 245, 240, 0.8));
}

.streak-win-row.is-animating {
    animation: streakPop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4), 0 0 24px rgba(251, 191, 36, 0.35);
}

.streak-win-row.is-animating .streak-win-count {
    animation: streakCountPulse 900ms ease-out both;
    text-shadow: 0 0 16px rgba(251, 191, 36, 0.55);
}

.streak-win-row.is-animating .streak-win-flame {
    animation: streakFlameFlicker 1100ms ease-out both;
}

@keyframes streakFlameFlicker {
    0%   { transform: scale(0.5) rotate(-8deg); opacity: 0; }
    35%  { transform: scale(1.25) rotate(6deg); opacity: 1; filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.95)); }
    65%  { transform: scale(0.95) rotate(-4deg); filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.65)); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes streakPop {
    0%   { transform: scale(0.9); opacity: 0; }
    60%  { transform: scale(1.04); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes streakCountPulse {
    0%   { transform: scale(0.6); }
    50%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* ----------------------------------------------------------------- */
/* Reduced motion                                                     */
/* ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .streak-win-row,
    .streak-win-count,
    .streak-win-flame,
    .streak-badge {
        animation: none !important;
        transition: none !important;
    }
}

/* ----------------------------------------------------------------- */
/* Responsive: keep header tidy on narrow screens.                    */
/* ----------------------------------------------------------------- */

@media (max-width: 600px) {
    .streak-slot { margin-left: 4px; }
    .streak-badge {
        padding: 5px 9px;
        font-size: 0.85rem;
    }
    .streak-win-row {
        padding: 10px 14px;
        margin: 12px auto 10px;
    }
    .streak-win-count { font-size: 1.3rem; }
}