/* Real-time balance update animations */
.balance-update-highlight {
    animation: balance-pulse 2s ease-in-out;
    color: #28a745 !important; /* Green for positive updates */
    font-weight: bold !important;
}

@keyframes balance-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
        text-shadow: 0 0 15px rgba(40, 167, 69, 0.6);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Balance negative update highlight */
.balance-update-highlight.negative {
    color: #dc3545 !important; /* Red for negative updates */
}

@keyframes balance-pulse-negative {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
        text-shadow: 0 0 15px rgba(220, 53, 69, 0.6);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Smooth transitions for balance updates */
.balance-item .value {
    transition: all 0.3s ease-in-out;
}

.deposit-block #balance {
    transition: all 0.3s ease-in-out;
}

/* NEW: Immediate balance update animations for crash game */
.balance-update-immediate {
    animation: immediateBalanceUpdate 0.8s ease-out;
    color: #ff6b6b !important;
    font-weight: bold !important;
}

@keyframes immediateBalanceUpdate {
    0% {
        transform: scale(1);
        color: #ff6b6b;
    }
    30% {
        transform: scale(1.1);
        color: #ff4757;
    }
    100% {
        transform: scale(1);
        color: #ff6b6b;
    }
}

/* Balance deducted style */
.balance-deducted {
    border-radius: 4px !important;
    color: #ff6b6b !important;
    animation: balanceDeducted 1s ease-out;
}

@keyframes balanceDeducted {
    0% {
        transform: scale(1);
        background: rgba(255, 107, 107, 0.3);
    }
    50% {
        transform: scale(0.95);
        background: rgba(255, 107, 107, 0.2);
    }
    100% {
        transform: scale(1);
        background: rgba(255, 107, 107, 0.15);
    }
}

/* Balance restored style (when bet fails) */
.balance-restored {
    border-radius: 4px !important;
    color: #ffc107 !important;
    animation: balanceRestored 1s ease-out;
}

@keyframes balanceRestored {
    0% {
        transform: scale(1);
        background: rgba(255, 193, 7, 0.3);
    }
    50% {
        transform: scale(1.05);
        background: rgba(255, 193, 7, 0.2);
    }
    100% {
        transform: scale(1);
        background: rgba(255, 193, 7, 0.15);
    }
}

/* Socket balance update confirmation */
.balance-socket-update {
    border-radius: 4px !important;
    color: #2ed573 !important;
    animation: balanceSocketUpdate 1.5s ease-out;
}

@keyframes balanceSocketUpdate {
    0% {
        transform: scale(1);
        background: rgba(46, 213, 115, 0.3);
        box-shadow: 0 0 10px rgba(46, 213, 115, 0.4);
    }
    50% {
        transform: scale(1.02);
        background: rgba(46, 213, 115, 0.2);
        box-shadow: 0 0 15px rgba(46, 213, 115, 0.6);
    }
    100% {
        transform: scale(1);
        background: rgba(46, 213, 115, 0.15);
        box-shadow: 0 0 5px rgba(46, 213, 115, 0.2);
    }
}

/* Betting button highlights */
.bet-placed-highlight {
    background: rgba(46, 213, 115, 0.2) !important;
    border: 2px solid rgba(46, 213, 115, 0.5) !important;
    animation: betPlacedPulse 2s ease-in-out infinite;
}

@keyframes betPlacedPulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(46, 213, 115, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(46, 213, 115, 0.6);
    }
}

/* Near cashout pulsing effect */
.near-cashout {
    animation: nearCashoutPulse 1s ease-in-out infinite;
}

@keyframes nearCashoutPulse {
    0%, 100% {
        border-color: rgba(255, 193, 7, 0.5);
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
    }
    50% {
        border-color: rgba(255, 193, 7, 0.8);
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
    }
}

/* Timer pulsing effect */
@keyframes timerPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}