/* Custom Styles for BounceBox Simulator */
.control-btn {
    @apply flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-all duration-200 hover:border-blue-500 hover:text-blue-600;
}

.control-btn.active {
    @apply border-blue-500 bg-blue-50 text-blue-600;
}

.btn-primary {
    @apply flex items-center justify-center p-3 bg-blue-600 text-white rounded-lg font-medium transition-all duration-200 hover:bg-blue-700 transform hover:scale-105;
}

.btn-secondary {
    @apply flex items-center justify-center p-3 bg-gray-200 text-gray-700 rounded-lg font-medium transition-all duration-200 hover:bg-gray-300 transform hover:scale-105;
}

.slider {
    background: linear-gradient(to right, #3b82f6 0%, #3b82f6 50%, #e5e7eb 50%, #e5e7eb 100%);
}

.slider::-webkit-slider-thumb {
    @apply appearance-none h-5 w-5 bg-white border-2 border-blue-600 rounded-full cursor-pointer shadow-lg;
}

.slider::-moz-range-thumb {
    @apply h-5 w-5 bg-white border-2 border-blue-600 rounded-full cursor-pointer shadow-lg;
}

/* Canvas styling */
#simulationCanvas {
    cursor: crosshair;
}

/* Animation for bounce counter */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0,-8px,0);
    }
    70% {
        transform: translate3d(0,-4px,0);
    }
    90% {
        transform: translate3d(0,-2px,0);
    }
}

.bounce-animation {
    animation: bounce 0.6s ease-in-out;
}