body {
            font-family: 'Inter', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
            overflow-x: hidden;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
        }

        /* Animations */
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes breathe {
            0%, 100% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.4); }
        }

        .animate-hero {
            animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .animate-breathe {
            animation: breathe 3s infinite ease-in-out;
        }

        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .dark .glass {
            background: rgba(15, 23, 42, 0.8); /* Dark Blue glass */
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        #game-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 100;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        
        .dark #game-overlay {
            background: rgba(15, 23, 42, 0.95); /* Dark Blue overlay */
        }

        #game-canvas-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: inherit;
            position: relative;
        }

        canvas {
            max-width: 95vw;
            max-height: 60vh;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
            touch-action: none;
            border: 1px solid rgba(0,0,0,0.1);
        }
        
        .dark canvas {
            background: #0f172a; /* Match Dark Blue bg */
            border: 1px solid rgba(255,255,255,0.1);
        }

        /* Countdown */
        #countdown-overlay {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 8rem;
            font-weight: 900;
            color: #3b82f6;
            text-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
            z-index: 20;
            pointer-events: none;
        }

        .category-btn.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }

        /* Virtual Controls Area */
        #virtual-controls {
            margin-top: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 80px;
            width: 100%;
            max-width: 400px;
            position: relative;
        }

        /* D-Pad Base */
        #mobile-dpad {
            display: none;
            gap: 8px;
        }
        
        /* Grid Layout (Snake, 2048) */
        #mobile-dpad.grid-layout {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        /* Vertical Layout (Pong) */
        #mobile-dpad.vertical-layout {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        /* Horizontal Split Layout (Breakout) */
        #mobile-dpad.split-layout {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            padding: 0 40px;
        }
        
        .dpad-btn {
            width: 65px;
            height: 65px;
            background: rgba(0,0,0,0.05);
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            color: #111;
            cursor: pointer;
            border: 1px solid rgba(0,0,0,0.1);
            transition: background 0.1s;
        }
        .dark .dpad-btn {
            background: rgba(255,255,255,0.1);
            color: white;
            border: 1px solid rgba(255,255,255,0.05);
        }
        .dpad-btn:active, .dpad-btn.pressed { background: rgba(59, 130, 246, 0.5) !important; border-color: #3b82f6 !important; color: white !important; }

        /* Action Button */
        #action-btn {
            display: none;
            width: 200px;
            height: 70px;
            background: rgba(0,0,0,0.05);
            border-radius: 16px;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            border: 1px solid rgba(0,0,0,0.1);
            color: #111;
        }
        .dark #action-btn {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.1);
            color: white;
        }
        #action-btn.visible { display: flex; }
        #action-btn:active { background: #3b82f6 !important; transform: scale(0.98); color: white !important; }

        /* Mines Toggle */
        #mines-toggle {
            display: none;
            padding: 12px 24px;
            background: #e5e7eb;
            border-radius: 12px;
            border: 1px solid #d1d5db;
            color: #111;
            font-weight: bold;
        }
        .dark #mines-toggle {
            background: #333;
            border: 1px solid #555;
            color: white;
        }
        #mines-toggle.visible { display: block; }
        #mines-toggle.active { background: #ef4444 !important; border-color: #ef4444 !important; color: white !important; }

        #start-msg {
            background: rgba(255,255,255,0.9);
            color: #111;
            border: 1px solid rgba(0,0,0,0.1);
        }
        .dark #start-msg {
            background: rgba(15, 23, 42, 0.9);
            color: white;
            border: 1px solid rgba(59, 130, 246, 0.4);
        }
        .text-sub { color: #666; }
        .dark .text-sub { color: #999; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-thumb { background: #3b82f6; border-radius: 10px; }