/* === Celebration Effects === */

/* Share button */
.share-section { text-align: center; margin: 16px 0; }
.share-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border: 2px solid var(--accent, #FF6B35);
    background: transparent; color: var(--accent, #FF6B35);
    border-radius: 12px; font-weight: 700; font-size: 1rem;
    cursor: pointer; transition: all 0.2s;
}
.share-btn:hover { background: var(--accent, #FF6B35); color: #fff; transform: scale(1.05); }
.share-icon { font-size: 1.2rem; }

/* Streak badge */
.streak-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: 20px;
    background: rgba(255, 107, 53, 0.15); border: 1px solid rgba(255, 107, 53, 0.3);
    font-weight: 700; color: #FF6B35;
}
.streak-badge.fire { background: rgba(255, 69, 0, 0.2); border-color: rgba(255, 69, 0, 0.4); }
.streak-badge.blaze {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 69, 0, 0.2));
    border-color: #FFD700; color: #FFD700;
    animation: blaze-glow 2s ease-in-out infinite;
}
.streak-flame { font-size: 1.2rem; }
.streak-count { font-size: 1.3rem; font-weight: 900; }
.streak-label { font-size: 0.75rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; }

@keyframes blaze-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

/* Streak extend toast */
.streak-toast {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #FF6B35, #E63946);
    color: #fff; padding: 12px 24px; border-radius: 16px;
    font-weight: 700; font-size: 1.1rem; z-index: 99999;
    display: flex; align-items: center; gap: 8px;
    animation: streak-toast-in 0.5s ease-out, streak-toast-out 0.5s ease-in 2.5s forwards;
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.4);
}

@keyframes streak-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.8); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes streak-toast-out {
    to { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.9); }
}

/* Grade badge pulse on S rank */
.grade-section .grade-badge { transition: transform 0.3s; }
.grade-section.s-rank .grade-badge {
    animation: s-rank-pulse 1.5s ease-in-out infinite;
}
@keyframes s-rank-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
}

/* Level up overlay enhancement */
.levelup-burst {
    position: absolute; width: 200px; height: 200px;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%);
    animation: levelup-burst 1s ease-out forwards;
}
@keyframes levelup-burst {
    from { transform: scale(0); opacity: 1; }
    to { transform: scale(3); opacity: 0; }
}