/* تخصيصات بسيطة لتحسين المظهر مع Bootstrap */
        .gradient-bg {
            background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%);
            min-height: 100vh;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .highlight-text {
            background: linear-gradient(135deg, #ffd700 0%, #ff9800 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 800;
        }

        .quiz-tile {
            fill: #3498db;
            stroke: white;
            stroke-width: 2;
            cursor: pointer;
            transition: fill 0.3s, transform 0.3s;
        }

        .quiz-tile:hover {
            fill: #1abc9c;
            transform: scale(1.02);
        }

        .quiz-tile.selected {
            fill: #e74c3c;
            stroke-width: 3;
        }

        .quiz-tile.correct {
            fill: #2ecc71;
            stroke-width: 3;
        }

        .quiz-tile.incorrect {
            fill: #e74c3c;
            stroke-width: 3;
            opacity: 0.7;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
            display: none;
            animation: slideInRight 0.3s ease-out;
        }

        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(100%); }
            to { opacity: 1; transform: translateX(0); }
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            display: none;
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .question-image-container {
            height: 250px;
            overflow: hidden;
            border-radius: 12px;
            position: relative;
            background: #f0f0f0;
        }

        .question-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .question-image:hover {
            transform: scale(1.05);
        }

        .image-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #666;
            text-align: center;
            padding: 20px;
        }

        .image-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px;
            text-align: center;
            font-size: 14px;
        }

        .interactive-map-container {
            height: 350px;
            background: #ecf0f1;
            border-radius: 10px;
            overflow: hidden;
            border: 3px solid #bdc3c7;
            position: relative;
        }

        #quizInteractiveMap {
            width: 100%;
            height: 100%;
        }

        .hint-container {
            display: none;
            animation: slideIn 0.5s ease-out;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .feedback-message {
            display: none;
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .answer-item {
            transition: transform 0.3s;
        }

        .answer-item:hover {
            transform: translateX(5px);
        }

        .fade-in-down {
            animation: fadeInDown 0.8s ease-out;
        }

        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-30px); }
            to { opacity: 1; transform: translateY(0); }
        }