:root {
            --gold-primary: #D4AF37;
            --gold-light: #F7E7CE;
            --gold-dark: #AA8C2C;
            --black-bg: #050505;
            --glass: rgba(20, 20, 20, 0.9);
            --glass-border: rgba(212, 175, 55, 0.3);
            --green-win: #2ecc71;
            --red-lose: #e74c3c;
        }

        * { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }

        body {
            margin: 0;
            background-color: var(--black-bg);
            background-image: radial-gradient(circle at 20% 50%, #1a1a1a 0%, #000 100%);
            color: #e0e0e0;
            font-family: 'Poppins', sans-serif;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* --- SCREENS (Splash & Menu) --- */
        .full-screen {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0; /* Ensures full coverage */
            background: #000; z-index: 2000;
            display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            transition: opacity 0.5s;
        }

        /* Splash Animation */
        .splash-logo {
            font-family: 'Cinzel', serif;
            font-size: 3rem;
            color: var(--gold-primary);
            text-align: center;
            padding: 0 20px;
            text-shadow: 0 0 20px rgba(212,175,55,0.5);
            animation: pulseLogo 2s infinite;
        }
        @keyframes pulseLogo {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.1); opacity: 1; text-shadow: 0 0 40px var(--gold-primary); }
            100% { transform: scale(1); opacity: 0.8; }
        }

        /* --- MENU STYLES --- */
        .menu-content {
            text-align: center;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: fadeIn 1s ease-out;
            z-index: 10;
        }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

        .game-icon-box {
            width: 200px; height: 200px;
            margin-bottom: 50px;
            border-radius: 30px;
            overflow: hidden;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(212, 175, 55, 0.3);
            box-shadow: 0 0 60px rgba(0,0,0,0.8);
            display: flex; justify-content: center; align-items: center;
            position: relative;
        }
        
        .game-icon-box::before {
            content: ''; position: absolute; inset: 0; border-radius: 30px; padding: 2px;
            background: linear-gradient(135deg, transparent, var(--gold-primary), transparent);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude;
        }

        .game-icon-box img { width: 100%; height: 100%; object-fit: cover; }
        .game-icon-placeholder { font-size: 5rem; color: #444; text-shadow: 0 0 20px #000; }

        .menu-btn {
            width: 280px; padding: 18px; margin-bottom: 20px;
            font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: bold;
            border-radius: 50px; cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            text-transform: uppercase; letter-spacing: 2px;
            position: relative; overflow: hidden;
        }

        .btn-play {
            background: var(--gold-primary); color: #050505; border: none;
            box-shadow: 0 0 30px rgba(212,175,55,0.3);
        }
        .btn-play:hover { transform: scale(1.05); box-shadow: 0 0 50px rgba(212,175,55,0.6); background: #fff; }
        
        .btn-rules {
            background: transparent; border: 1px solid rgba(212,175,55,0.5); color: var(--gold-primary);
        }
        .btn-rules:hover { background: rgba(212,175,55,0.1); border-color: var(--gold-primary); transform: translateY(-2px); }

        .menu-bg-fx {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000 80%);
            z-index: 1;
        }
        .particles {
            position: absolute; top:0; left:0; width:100%; height:100%;
            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23D4AF37' fill-opacity='0.05'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
        }

        /* --- MAIN LAYOUT --- */
        /* Initially hidden, shown via class .active */
        #mainGame {
            display: none; 
            /* Desktop Layout: 3 Columns */
            grid-template-columns: 300px 1fr 400px;
            grid-template-rows: 70px 1fr 60px;
            height: 100%;
            width: 100%;
            max-width: 1800px;
            margin: 0 auto;
        }

        /* Desktop: Grid Display when Active */
        #mainGame.active {
            display: grid;
        }

        /* --- Header --- */
        header {
            grid-column: 1 / -1;
            display: flex; justify-content: space-between; align-items: center;
            padding: 0 2rem;
            background: rgba(0, 0, 0, 0.9);
            border-bottom: 1px solid var(--glass-border);
            z-index: 10;
        }

        .logo {
            font-family: 'Cinzel', serif; font-size: 1.8rem; color: var(--gold-primary);
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        }

        .wallet-box {
            background: linear-gradient(135deg, #222, #000);
            border: 1px solid var(--gold-dark);
            padding: 8px 20px;
            border-radius: 50px;
            font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--gold-primary);
            display: flex; align-items: center; gap: 10px;
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
            cursor: pointer; transition: 0.2s;
        }
        .wallet-box:hover { transform: scale(1.05); }

        /* --- Left Side: History --- */
        .sidebar-left {
            background: var(--glass);
            border-right: 1px solid #222;
            padding: 20px;
            display: flex; flex-direction: column;
            overflow: hidden;
            backdrop-filter: blur(15px);
        }

        .history-header {
            font-family: 'Cinzel', serif; color: var(--gold-light);
            border-bottom: 1px solid var(--gold-dark);
            padding-bottom: 10px; margin-bottom: 15px;
            display: flex; justify-content: space-between; align-items: center;
        }

        .history-list {
            flex: 1; overflow-y: auto;
            display: flex; flex-direction: column; gap: 10px;
            padding-right: 5px;
        }
        .history-list::-webkit-scrollbar { width: 4px; }
        .history-list::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

        .log-item {
            background: rgba(255, 255, 255, 0.05);
            border-left: 3px solid #555;
            padding: 10px; border-radius: 0 4px 4px 0;
            font-size: 0.85rem;
            display: flex; align-items: center; gap: 10px;
            animation: fadeIn 0.3s ease-in;
        }
        .log-item.win { border-left-color: var(--green-win); background: rgba(46, 204, 113, 0.1); }
        .log-item.lose { border-left-color: var(--red-lose); background: rgba(231, 76, 60, 0.1); }
        .log-item.info { border-left-color: var(--gold-primary); }
        .log-time { font-size: 0.7rem; color: #666; margin-left: auto; }

        /* --- Center: Game Area --- */
        .game-area {
            position: relative;
            display: flex; justify-content: center; align-items: center;
            background: radial-gradient(circle at center, #1a1a1a 0%, #000 70%);
            overflow: hidden;
        }

        .wheel-wrapper {
            position: relative;
            width: 80%; max-width: 550px; aspect-ratio: 1;
            border-radius: 50%; padding: 10px;
            box-shadow: 0 0 50px rgba(0,0,0,0.8);
        }

        canvas#wheelCanvas { width: 100%; height: 100%; border-radius: 50%; transition: transform 0s; }

        .wheel-pointer {
            position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
            width: 40px; height: 50px; z-index: 5;
            filter: drop-shadow(0 4px 4px rgba(0,0,0,0.8));
        }
        .wheel-pointer::after {
            content: ''; position: absolute; top: 0; left: 10px;
            width: 20px; height: 30px;
            background: linear-gradient(to bottom, #fff, var(--gold-primary));
            clip-path: polygon(100% 0, 0 0, 50% 100%);
        }

        .center-nut {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 15%; height: 15%;
            background: radial-gradient(circle, var(--gold-light), var(--gold-dark));
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(0,0,0,1);
            z-index: 3;
            display:flex; justify-content:center; align-items:center;
            font-size: 2rem;
        }

        /* --- Right Side: Controls --- */
        .sidebar-right {
            background: var(--glass);
            border-left: 1px solid #222;
            padding: 20px;
            display: flex; flex-direction: column; gap: 15px;
            overflow-y: auto;
            backdrop-filter: blur(15px);
        }

        .panel-section {
            background: rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 8px;
            padding: 15px;
        }

        .panel-header {
            font-family: 'Cinzel', serif; color: var(--gold-light);
            margin-bottom: 10px; font-size: 0.9rem;
            text-transform: uppercase; letter-spacing: 1px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.2);
            padding-bottom: 5px;
            display: flex; justify-content: space-between;
        }

        /* Game UI Components */
        .number-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
        .num-btn {
            aspect-ratio: 1; background: #222; border: 1px solid #444; color: #fff;
            border-radius: 6px; font-weight: bold; font-size: 1.1rem;
            cursor: pointer; transition: 0.2s;
        }
        .num-btn:hover { border-color: #888; }
        .num-btn.selected {
            background: var(--gold-primary); color: #000;
            border-color: var(--gold-light);
            box-shadow: 0 0 10px var(--gold-primary); transform: scale(1.1);
        }

        .risk-options { display: flex; flex-direction: column; gap: 8px; }
        .risk-btn {
            background: transparent; border: 1px solid #444; padding: 10px;
            color: #888; text-align: left; border-radius: 4px;
            cursor: pointer; display: flex; justify-content: space-between;
        }
        .risk-btn small { display: block; font-size: 0.7rem; }
        .risk-btn.active {
            border-color: var(--gold-primary); background: rgba(212,175,55,0.05); color: #fff;
        }
        .multiplier-tag { color: var(--gold-primary); font-weight: bold; }

        .bet-chips { display: flex; justify-content: space-between; margin-top: 10px; }
        .chip {
            width: 50px; height: 50px; border-radius: 50%;
            border: 2px dashed #555; background: #111; color: #fff;
            font-size: 0.8rem; display: flex; justify-content: center; align-items: center; cursor: pointer;
        }
        .chip.active {
            border-style: solid; border-color: var(--gold-primary); background: #222;
            transform: translateY(-3px); box-shadow: 0 5px 10px rgba(0,0,0,0.5);
        }

        .spin-btn {
            width: 100%; padding: 20px;
            background: linear-gradient(to bottom, var(--gold-primary), var(--gold-dark));
            border: none; font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.5rem;
            cursor: pointer; border-radius: 4px; margin-top: 10px;
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); transition: 0.2s;
        }
        .spin-btn:disabled { filter: grayscale(1); cursor: not-allowed; }
        .spin-btn:active { transform: scale(0.98); }

        .ad-banner {
            width: 100%; height: 100px; background: #111; border: 1px solid #333;
            display: flex; justify-content: center; align-items: center;
            color: #444; font-size: 0.8rem; margin-top: auto;
            text-align: center; overflow: hidden; position: relative;
        }

        /* Footer */
        footer {
            grid-column: 1 / -1; background: #000;
            display: flex; justify-content: center; align-items: center; gap: 20px;
            font-size: 0.8rem; color: #666; border-top: 1px solid #222; padding: 0 20px;
        }

        .toggle-control { display: none; }
        .modern-toggle {
            display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
            background: rgba(255,255,255,0.05); border: 1px solid #333; border-radius: 30px;
            cursor: pointer; transition: all 0.3s; font-size: 0.85rem; color: #888;
        }
        .toggle-control:checked + .modern-toggle {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.2));
            border-color: var(--gold-primary); color: var(--gold-primary);
            box-shadow: 0 0 12px rgba(212, 175, 55, 0.15);
        }

        /* --- MOBILE RESPONSIVE FIX (1024px and below) --- */
        @media (max-width: 1024px) {
            body {
                overflow-y: auto; /* Enable page scrolling */
                height: auto;
            }

            /* Fix Splash Screen Font Size on Mobile */
            .splash-logo {
                font-size: 2rem;
            }

            /* Force Flex Column Layout on Mobile */
            #mainGame.active {
                display: flex !important;
                flex-direction: column;
                height: auto;
                min-height: 100vh;
            }

            /* ORDERING: 1. Header, 2. Wheel, 3. Controls, 4. History, 5. Footer */
            
            header {
                order: 0;
                position: sticky; top: 0; z-index: 1000;
                flex: 0 0 60px; width: 100%; background: rgba(0,0,0,0.95);
            }

            .game-area {
                order: 1;
                flex: 0 0 auto;
                padding: 40px 0; width: 100%; min-height: 350px;
            }

            .wheel-wrapper {
                width: 280px; height: 280px;
                max-width: 80vw; max-height: 80vw;
            }

            /* Controls below wheel */
            .sidebar-right {
                order: 2;
                flex: 0 0 auto; width: 100%;
                border-left: none; border-top: 1px solid rgba(255,255,255,0.1);
                padding: 20px;
                height: auto; /* Allow full height content */
                background: #0a0a0a;
            }

            /* History below controls */
            .sidebar-left {
                order: 3;
                flex: 0 0 auto; width: 100%;
                border-right: none; border-top: 1px solid rgba(255,255,255,0.1);
                height: 350px; /* Fixed height for scrollable log */
                padding: 20px;
                background: #050505;
            }

            footer {
                order: 4;
                flex: 0 0 60px; width: 100%;
                z-index: 100;
            }
        }

        /* Modals */
        .modal-overlay {
            position: fixed; top:0; left:0; right:0; bottom:0;
            background: rgba(0,0,0,0.95);
            z-index: 3000;
            display: none; justify-content: center; align-items: center;
        }
        .modal-content {
            background: #111; border: 2px solid var(--gold-primary);
            padding: 20px; text-align: center; max-width: 90%; width: 450px;
            box-shadow: 0 0 50px rgba(212, 175, 55, 0.2); position: relative;
        }
        .ad-banner-large {
            width: 100%; height: 250px; background: #fff; color: #000;
            border: 1px solid #333; margin: 15px 0;
            display: flex; justify-content: center; align-items: center;
            font-weight: bold; font-size: 2rem;
        }
        .ad-timer { font-size: 3rem; color: #fff; margin: 10px 0; font-family: 'Cinzel'; }
        .rules-list {
            text-align: left; color: #ccc; margin: 20px 0; padding-left: 20px;
            font-size: 0.9rem; line-height: 1.6;
        }