/* ── Sound & Animation Module ─────────────────────────────────────── */

/* 180 Flash Overlay */
.flash-180 {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
    z-index: 9999;
    pointer-events: none;
    animation: flash180 0.8s ease-out forwards;
}

@keyframes flash180 {
    0%   { opacity: 1; transform: scale(0.8); }
    50%  { opacity: 0.8; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.3); }
}

/* 180 Badge Animation */
.badge-180 {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 5rem;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 30px rgba(255,215,0,0.6), 0 4px 8px rgba(0,0,0,0.3);
    z-index: 10000;
    pointer-events: none;
    animation: badge180 1.2s ease-out forwards;
}

@keyframes badge180 {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.8) rotate(0deg); opacity: 0; }
}

/* High Finish Animation */
.flash-high-finish {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, rgba(0,200,83,0.3) 0%, transparent 70%);
    z-index: 9999;
    pointer-events: none;
    animation: flashHighFinish 0.6s ease-out forwards;
}

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

/* Match Win Celebration */
.flash-match-win {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle, rgba(196,30,42,0.3) 0%, transparent 70%);
    z-index: 9999;
    pointer-events: none;
    animation: flashMatchWin 1s ease-out forwards;
}

@keyframes flashMatchWin {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Winner Badge */
.badge-winner {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    background: var(--primary, #c41e2a);
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(196,30,42,0.4);
    z-index: 10000;
    pointer-events: none;
    animation: badgeWinner 1.5s ease-out forwards;
}

@keyframes badgeWinner {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    30%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    70%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
}

/* Leg Won Pulse */
.pulse-leg-won {
    animation: pulseLegWon 0.5s ease-out;
}

@keyframes pulseLegWon {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Score Change Highlight */
.score-highlight {
    animation: scoreHighlight 0.4s ease-out;
}

@keyframes scoreHighlight {
    0%   { background-color: rgba(255,215,0,0.3); }
    100% { background-color: transparent; }
}

/* Notification Bell Shake */
.bell-shake {
    animation: bellShake 0.5s ease-in-out;
}

@keyframes bellShake {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(15deg); }
    30%  { transform: rotate(-10deg); }
    45%  { transform: rotate(8deg); }
    60%  { transform: rotate(-5deg); }
    75%  { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}