/* Custom styles for the quiz game */
        body {
            font-family: 'Inter', sans-serif;
        }
        .quiz-container {
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            transform: scale(0.95);
            opacity: 0;
        }
        .quiz-container.active {
            transform: scale(1);
            opacity: 1;
        }
        .option-btn, .category-btn, #welcome-btn {
            transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .option-btn:hover:not(.disabled), .category-btn:hover, #welcome-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.08);
        }
        .correct {
            background-color: #22c55e !important; /* Green-500 */
            color: white !important;
            border-color: #16a34a !important;
        }
        .incorrect {
            background-color: #ef4444 !important; /* Red-500 */
            color: white !important;
            border-color: #dc2626 !important;
        }
        .disabled {
            pointer-events: none;
            opacity: 0.6;
        }
        #timer-bar-inner {
            transition: width 1s linear;
        }
        #progress-bar-inner {
            transition: width 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out forwards;
        }