/* Visual Touch Feedback Styles */
.touch-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    transform: scale(0);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    animation: ripplePulse 0.5s ease-out;
}

@keyframes ripplePulse {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(2);
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

.score-updating {
    animation: scoreFlash 0.4s ease-out;
}

@keyframes scoreFlash {
    0% {
        transform: scale(1);
        background: rgba(0, 0, 0, 0.8);
    }
    50% {
        transform: scale(1.3);
        background: rgba(255, 165, 0, 0.9);
        box-shadow: 0 0 30px rgba(255, 165, 0, 0.8);
    }
    100% {
        transform: scale(1);
        background: rgba(0, 0, 0, 0.8);
        box-shadow: none;
    }
}

.court-flash-point {
    animation: pointFlash 0.4s ease-out;
}

@keyframes pointFlash {
    0% { background-color: #00AA00; }
    50% { 
        background-color: #00FF00 !important;
        box-shadow: inset 0 0 50px rgba(0, 255, 0, 0.8);
    }
    100% { background-color: #00AA00; }
}

/* Removed confusing sideout flash - only show clear point scoring */

/* Enhanced touch feedback for immediate response */
.left-side:active, .right-side:active {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: scale(0.98);
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.6);
}