:root {
            --primary-color: #EF4444; /* Red 500 */
            --secondary-color: #FBBF24; /* Amber 400 */
            --dark-bg: #111827; /* Gray 900 */
        }
        
        /* --- Dynamic Background --- */
        @keyframes subtle-pan {
            0% { background-position: 0% 0%; }
            100% { background-position: 100% 100%; }
        }
        body {
            font-family: 'Roboto', sans-serif;
            /* Enhanced background gradient with subtle animation */
            background: linear-gradient(135deg, #0f172a 0%, #1f2937 50%, #0f172a 100%);
            background-size: 200% 200%;
            animation: subtle-pan 20s ease infinite alternate;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-y: auto; /* Allow scrolling on smaller devices */
        }
        
        /* --- CASINO MARQUEE LIGHT ANIMATION --- */
        @keyframes marquee-lights {
            0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px var(--secondary-color); }
            50% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px var(--primary-color); }
            100% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px var(--secondary-color); }
        }

        .light-animation {
            animation: marquee-lights 1.5s ease-in-out infinite alternate;
        }

        /* --- Initial Loading Hook Effect --- */
        @keyframes slide-in-up {
            0% { transform: translateY(50px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        #game-section {
            animation: slide-in-up 0.8s ease-out both;
            animation-delay: 0.2s; /* Start after a slight delay */
        }
        
        /* New styling for the main card to make it pop */
        #main-card {
             box-shadow: 0 0 40px rgba(255, 200, 0, 0.2); /* Soft Yellow Glow */
             border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* The Wrapper: This stays static and provides the context for the pointer */
        #wheel-wrapper {
            position: relative;
            width: 320px;
            height: 320px;
            margin: 0 auto;
            border-radius: 50%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(255, 255, 255, 0.3);
        }
        /* The Canvas: This is the ONLY element that spins */
        #wheel-canvas {
            border-radius: 50%;
            transition: transform 6s cubic-bezier(0.25, 0.1, 0, 1); /* Slower, dramatic spin */
        }
        /* The Center Overlay: Contains the KUPA POKER text and stays fixed over the spinning canvas */
        #center-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px; 
            height: 80px; 
            border-radius: 50%;
            background-color: #1F2937;
            border: 4px solid #FBBF24;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 5; 
            color: #FFFFFF;
            font-family: 'Roboto', sans-serif;
            font-weight: 900;
            font-size: 14px; 
        }
        #center-overlay span {
            line-height: 1.1; 
        }

        /* --- POINTER CSS --- */
        #pointer {
            position: absolute;
            top: -15px; 
            left: 50%;
            transform: translateX(-50%); 
            width: 0;
            height: 0;
            
            /* Pointer shape: Triangle pointing down */
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 25px solid var(--primary-color);
            
            z-index: 10;
            filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5));
        }

        /* Animation for the pointer to simulate clicking/ticking while spinning */
        @keyframes pointerTick {
            0%, 100% { transform: translateX(-50%) rotate(0deg); }
            50% { transform: translateX(-50%) rotate(3deg); }
        }

        .ticking {
            animation: pointerTick 0.15s ease-in-out infinite;
        }
        /* -------------------------------------- */

        .spin-button {
            background-image: linear-gradient(to right, #FFD700 0%, #FFB800 51%, #FFD700 100%); /* Gold Gradient */
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
            color: #333;
            font-weight: 900;
            background-size: 200% auto;
        }
        .spin-button:hover:not(:disabled) {
            background-position: right center;
            box-shadow: 0 10px 15px -3px rgba(255, 190, 0, 0.5); /* Enhanced hover shadow */
        }
        .message-box {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
            transition: opacity 0.3s;
            padding: 20px; /* Added padding for mobile safety */
        }
        
        /* --- EFFECTS CSS (Jackpot Glow) --- */
        #jackpot-light-area {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        .jackpot-glow {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: jackpot-pulse 1.5s infinite alternate;
            background: radial-gradient(circle at center, rgba(255, 215, 0, 0.5) 0%, rgba(255, 165, 0, 0) 70%);
        }
        
        @keyframes jackpot-pulse {
            0% {
                transform: scale(0.5);
                opacity: 0.5;
                box-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 30px #FF8C00;
            }
            100% {
                transform: scale(1.1);
                opacity: 1;
                box-shadow: 0 0 40px #FFD700, 0 0 60px #FF8C00, 0 0 80px #FF4500;
            }
        }
        
        /* Jackpot Message Styling - UPDATED */
        #jackpot-message {
            position: relative;
            z-index: 100;     
            font-size: 2.5rem;   
            font-weight: 900;     
            color: #FFD700; /* Ensuring text is bright yellow/gold */
            text-shadow:     
                0 0 5px #fff,      
                0 0 10px #FFD700,     
                0 0 20px #FF8C00,     
                0 0 30px #FF4500;     
            animation: text-pulse 1.5s infinite alternate;
            text-align: center; 
        }
        @keyframes text-pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1.05);
                opacity: 1;
            }
        }

        /* Countdown Timer Styling */
        #countdown-timer {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            border-radius: 8px;
            background-color: #374151; 
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        }

        /* --- NEW TOAST NOTIFICATION CSS (Top Left -> Bottom Right) --- */
        #winner-toast {
            position: fixed;
            /* New Position: Bottom Right */
            bottom: 20px; 
            right: 20px; 
            left: auto; /* Reset left position */
            top: auto; /* Reset top position */

            /* Initial state: Hidden fully below and to the right, and 0 opacity */
            /* UPDATED: Using translate3d(x, y, 0) for GPU acceleration to fix mobile flickering */
            transform: translate3d(120%, 120%, 0); 
            opacity: 0; /* STARTING OPACITY */
            z-index: 80;
            background-color: #16A34A; /* Emerald 600 - Winning color */
            color: #fff;
            padding: 10px 15px; /* Made smaller */
            border-radius: 8px; /* Slightly less rounded */
            font-weight: 600; 
            
            /* Ensure content stays on one line */
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
            min-width: 220px; 
            max-width: 320px; 
            
            /* Added opacity transition to the existing transform transition */
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease-in-out; 
        }

        .toast-show {
            /* Slide to the resting position (bottom: 20px, right: 20px) */
            /* UPDATED: Using translate3d(0, 0, 0) for GPU acceleration */
            transform: translate3d(0, 0, 0) !important; 
            opacity: 1 !important; /* FADE IN */
        }