/* Premium CSS styling, modern gradients, and animations for Color Prediction Game */

/* Root and Base Configurations */
:root {
    --color-bg-dark: #0a0a0a;
    --color-panel-dark: #121212;
    --color-border: rgba(38, 38, 38, 0.7);
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-dark);
}

.font-mono {
    font-family: var(--font-mono);
}

/* Glassmorphism Panel effects */
.bg-neutral-850 {
    background-color: #171717;
}

/* Bet chip selection active styling */
.active-chip {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: #f59e0b !important;
    color: #f59e0b !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}

/* Smooth custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scrollbar styling for a native app feel */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #262626;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #404040;
}

/* Custom visual pulse effect for active game timers */
.pulse-amber {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    animation: pulseAmberKey 2s infinite;
}

@keyframes pulseAmberKey {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* Betting result indicators with gradients */
.bg-gradient-green-violet {
    background: linear-gradient(135deg, #10b981 50%, #8b5cf6 50%);
}

.bg-gradient-red-violet {
    background: linear-gradient(135deg, #ef4444 50%, #8b5cf6 50%);
}

/* Tactile feedback for mobile interactions */
button:active {
    transform: scale(0.97);
    filter: brightness(0.9);
}

/* Safe Area Inset Support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    main {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }
    footer {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(3.5rem + env(safe-area-inset-bottom));
    }
}