body {
            font-family: 'Kanit', sans-serif;
        }


        .hero-bg {
            background: linear-gradient(to top, rgba(17, 24, 39, 1) 10%, rgba(17, 24, 39, 0.6)), url('https://demos.codexcoder.com/labartisan/html/nft/enftomark/assets/images/banner/bg-3.jpg') no-repeat center center;
            background-size: cover;
        }
        html.light .hero-bg {
             background: linear-gradient(to top, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0.6)), url('https://demos.codexcoder.com/labartisan/html/nft/enftomark-light/assets/images/banner/bg-4.png') no-repeat center center;
             background-size: cover;
        }
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-8px);
        }
        html.dark .card-hover:hover {
             box-shadow: 0 15px 30px rgba(0, 229, 255, 0.15);
        }
        html.light .card-hover:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        .backdrop-blur-md {
            backdrop-filter: blur(12px);
        }
        .gemini-btn {
            background: linear-gradient(45deg, #22d3ee, #0891b2);
        }
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.7);
        }
        .loader {
            border: 4px solid #f3f3f3; /* Light grey */
            border-radius: 50%;
            border-top: 4px solid #06b6d4; /* Cyan */
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Mobile menu transition */
        #mobile-menu {
            transition: transform 0.3s ease-in-out;
        }



    .modal { transition: opacity 0.3s ease; }
        .modal-content { transition: transform 0.3s ease; }
        /* Custom scrollbar */
        .custom-scrollbar::-webkit-scrollbar { width: 8px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }
        .dark .custom-scrollbar::-webkit-scrollbar-track { background: #2d3748; }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #4a5568; }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #718096; }


        /* Notification Toast Styles */
        /* CSS Animations for the Modal */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        @keyframes scaleUp {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        @keyframes scaleDown {
            from { transform: scale(1); opacity: 1; }
            to { transform: scale(0.9); opacity: 0; }
        }
        
        /* New Animation for the Icon */
        @keyframes icon-pop {
            0% { transform: scale(0.5); opacity: 0; }
            60% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        .icon-animate {
            /* Animation will start 0.2s after the modal appears */
            animation: icon-pop 0.5s ease-out 0.2s forwards;
        }

        .modal-enter {
            animation: fadeIn 0.3s ease-out forwards;
        }
        .modal-leave {
            animation: fadeOut 0.3s ease-in forwards;
        }
        .modal-content-enter {
            animation: scaleUp 0.3s ease-out forwards;
        }
        .modal-content-leave {
            animation: scaleDown 0.3s ease-in forwards;
        }   



        .game-card {
        background-color: rgba(31, 41, 55, 0.5); /* bg-gray-800 with opacity for dark mode */
        
        border-radius: 0.75rem; /* rounded-xl */
        transition: all 0.2s ease-in-out;
        /* เอฟเฟกต์เงาเรืองแสง */
        /* box-shadow: 0 0 5px rgb(50, 50, 50), 0 0 10px rgba(62, 113, 232, 0.5); */
    }
    .game-card:hover {
        transform: translateY(-1px) scale(1.01);
        box-shadow: 0 0 15px #3e7ce8ff, 0 0 25px rgba(62, 181, 232, 0.7);
    }
    /* Light mode style for game card */