body {
        font-family: 'Poppins', sans-serif;
        background-color: #111827;
        color: #e5e7eb;
        min-height: 100vh;
        overflow-x: hidden;
    }
    
    .room {
        background-size: cover;
        background-position: center;
        position: relative;
        height: 70vh;
        transition: all 0.5s ease-in-out;
    }
    
    .hotspot {
        position: absolute;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    
    .hotspot:hover {
        transform: scale(1.1);
    }
    
    .pulse {
        animation: pulse 1.5s infinite;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        }
        
        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        }
        
        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        }
    }
    
    .fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .shake {
        animation: shake 0.5s;
    }
    
    @keyframes shake {
        0% { transform: translateX(0); }
        25% { transform: translateX(-10px); }
        50% { transform: translateX(10px); }
        75% { transform: translateX(-10px); }
        100% { transform: translateX(0); }
    }
    
    .modal {
        backdrop-filter: blur(5px);
    }
    
    .timer {
        font-family: monospace;
        font-size: 1.5rem;
        color: #ef4444;
    }
    
    .btn {
        transition: all 0.3s ease;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .btn:active {
        transform: translateY(0);
    }
    
    .inventory-item {
        transition: all 0.3s ease;
    }
    
    .inventory-item:hover {
        transform: translateY(-5px);
    }
    
    .health-bar {
        transition: width 0.5s ease;
    }
    
    .game-over-overlay {
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
    }
</style>

    <!-- Game Area -->
    <div id="room" class="room rounded-xl overflow-hidden shadow-2xl border border-gray-800 fade-in">
        <!-- Room content will be dynamically inserted here -->
    </div>
    
    <!-- Inventory -->
    <div class="mt-4 p-4 bg-gray-800 rounded-xl border border-gray-700">
        <div class="flex justify-between items-center mb-2">
            <h2 class="text-xl font-semibold">Inventory</h2>
            <div>
                <span class="text-sm text-gray-400">Clues Found:</span>
                <span id="clues-counter" class="ml-1 font-bold">0/6</span>
            </div>
        </div>
        <div id="inventory" class="flex flex-wrap gap-3">
            <div class="text-gray-500 italic">Your inventory is empty. Find items to help you escape!</div>
        </div>
    </div>
    
    <!-- Game Log -->
    <div class="mt-4 p-4 bg-gray-800 rounded-xl border border-gray-700 h-32 overflow-y-auto">
        <h2 class="text-xl font-semibold mb-2">Game Log</h2>
        <div id="game-log" class="text-sm text-gray-300">
            <p>Welcome to the Solidarity Escape Room! You've been locked in a community center after hours. Find clues about volunteering and solidarity to escape before time runs out!</p>
        </div>
    </div>
</div>

<!-- Question Modal -->
<div id="question-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden modal">
    <div class="absolute inset-0 bg-black bg-opacity-70"></div>
    <div class="bg-gray-900 p-6 rounded-xl max-w-md w-full mx-4 z-10 border border-gray-700 shadow-2xl">
        <h3 id="question-title" class="text-xl font-bold mb-4 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500">Question</h3>
        <p id="question-text" class="mb-6 text-gray-300"></p>
        <div id="question-options" class="space-y-3 mb-6">
            <!-- Options will be inserted here -->
        </div>
        <div class="flex justify-end">
            <button id="close-question" class="btn bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg">Close</button>
        </div>
    </div>
</div>

<!-- Game Over Modal -->
<div id="game-over-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden">
    <div class="absolute inset-0 game-over-overlay"></div>
    <div class="bg-gray-900 p-8 rounded-xl max-w-md w-full mx-4 z-10 border border-red-800 shadow-2xl text-center">
        <div class="text-6xl mb-4">💀</div>
        <h3 class="text-3xl font-bold mb-2 text-red-500">Game Over</h3>
        <p id="game-over-reason" class="mb-6 text-gray-300"></p>
        <button onclick="restartGame()" class="btn bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-bold">Try Again</button>
    </div>
</div>

<!-- Victory Modal -->
<div id="victory-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden">
    <div class="absolute inset-0 bg-black bg-opacity-70 backdrop-blur-sm"></div>
    <div class="bg-gradient-to-br from-purple-900 to-indigo-900 p-8 rounded-xl max-w-md w-full mx-4 z-10 border border-purple-500 shadow-2xl text-center">
        <div class="text-6xl mb-4">🎉</div>
        <h3 class="text-3xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-purple-400">Victory!</h3>
        <p class="mb-6 text-gray-300">You've successfully escaped by using your knowledge of solidarity and volunteering!</p>
        <p id="victory-stats" class="mb-6 text-sm text-gray-400"></p>
        <button onclick="restartGame()" class="btn bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white px-6 py-3 rounded-lg font-bold">Play Again</button>
    </div>
</div>

<script>
    // Game state
    const gameState = {
        currentRoom: 'lobby',
        health: 100,
        timeRemaining: 15 * 60, // 15 minutes in seconds
        inventory: [],
        cluesFound: 0,
        totalClues: 6,
        timerInterval: null,
        roomsVisited: new Set(['lobby']),
        wrongAnswers: 0
    };
    
    // Room definitions
    const rooms = {
        lobby: {
            background: createSVGBackground('lobby'),
            hotspots: [
                {
                    id: 'notice-board',
                    type: 'clue',
                    x: 20,
                    y: 40,
                    icon: '📋',
                    title: 'Community Notice Board',
                    description: 'A board filled with volunteer opportunities and community events.',
                    question: {
                        text: 'What is the primary benefit of community volunteering?',
                        options: [
                            { text: 'Getting paid for your time', correct: false },
                            { text: 'Building stronger community bonds', correct: true },
                            { text: 'Becoming famous in your neighborhood', correct: false },
                            { text: 'Avoiding taxes', correct: false }
                        ],
                        item: 'Community Calendar',
                        itemDescription: 'A calendar showing upcoming volunteer events'
                    }
                },
                {
                    id: 'door-to-office',
                    type: 'door',
                    x: 80,
                    y: 50,
                    icon: '🚪',
                    title: 'Office Door',
                    leadsTo: 'office'
                },
                {
                    id: 'donation-box',
                    type: 'clue',
                    x: 60,
                    y: 70,
                    icon: '📦',
                    title: 'Donation Box',
                    description: 'A box for collecting donations for the local food bank.',
                    question: {
                        text: 'Which of these items is MOST needed by food banks?',
                        options: [
                            { text: 'Expired canned goods', correct: false },
                            { text: 'Used clothing', correct: false },
                            { text: 'Non-perishable protein sources', correct: true },
                            { text: 'Holiday decorations', correct: false }
                        ],
                        item: 'Food Bank Pamphlet',
                        itemDescription: 'Information about local food insecurity'
                    }
                }
            ]
        },
        office: {
            background: createSVGBackground('office'),
            hotspots: [
                {
                    id: 'computer',
                    type: 'clue',
                    x: 50,
                    y: 40,
                    icon: '💻',
                    title: 'Computer',
                    description: 'A computer with a spreadsheet of volunteer hours open.',
                    question: {
                        text: 'What is a key principle of effective volunteering?',
                        options: [
                            { text: 'Only helping when it benefits you directly', correct: false },
                            { text: 'Consistent commitment to the cause', correct: true },
                            { text: 'Posting about it on social media', correct: false },
                            { text: 'Volunteering only during holidays', correct: false }
                        ],
                        item: 'Volunteer Database Password',
                        itemDescription: 'Access to volunteer records'
                    }
                },
                {
                    id: 'filing-cabinet',
                    type: 'clue',
                    x: 20,
                    y: 60,
                    icon: '🗄️',
                    title: 'Filing Cabinet',
                    description: 'A cabinet containing files on various community projects.',
                    question: {
                        text: 'Which approach best demonstrates solidarity?',
                        options: [
                            { text: 'Donating old items you don\'t want anymore', correct: false },
                            { text: 'Working alongside affected communities to address their needs', correct: true },
                            { text: 'Telling others what they should do to help', correct: false },
                            { text: 'Focusing only on issues that affect you personally', correct: false }
                        ],
                        item: 'Community Project Files',
                        itemDescription: 'Details of successful solidarity initiatives'
                    }
                },
                {
                    id: 'door-to-lobby',
                    type: 'door',
                    x: 80,
                    y: 50,
                    icon: '🚪',
                    title: 'Door to Lobby',
                    leadsTo: 'lobby'
                },
                {
                    id: 'door-to-storage',
                    type: 'door',
                    x: 50,
                    y: 80,
                    icon: '🚪',
                    title: 'Door to Storage Room',
                    leadsTo: 'storage'
                }
            ]
        },
        storage: {
            background: createSVGBackground('storage'),
            hotspots: [
                {
                    id: 'emergency-kit',
                    type: 'clue',
                    x: 30,
                    y: 40,
                    icon: '🧰',
                    title: 'Emergency Kit',
                    description: 'A kit prepared for community emergencies.',
                    question: {
                        text: 'During a natural disaster, what is the most important form of community support?',
                        options: [
                            { text: 'Posting thoughts and prayers online', correct: false },
                            { text: 'Coordinated response with clear communication', correct: true },
                            { text: 'Individual households fending for themselves', correct: false },
                            { text: 'Waiting for outside help to arrive', correct: false }
                        ],
                        item: 'Emergency Response Plan',
                        itemDescription: 'Community disaster preparedness guidelines'
                    }
                },
                {
                    id: 'volunteer-vests',
                    type: 'clue',
                    x: 70,
                    y: 60,
                    icon: '👕',
                    title: 'Volunteer Vests',
                    description: 'High-visibility vests worn by community volunteers.',
                    question: {
                        text: 'What is the most sustainable approach to community service?',
                        options: [
                            { text: 'One-time large donations from wealthy individuals', correct: false },
                            { text: 'Regular engagement and building lasting systems', correct: true },
                            { text: 'Annual charity events during holidays', correct: false },
                            { text: 'Government programs without community involvement', correct: false }
                        ],
                        item: 'Volunteer Training Manual',
                        itemDescription: 'Guidelines for effective community service'
                    }
                },
                {
                    id: 'door-to-office',
                    type: 'door',
                    x: 50,
                    y: 20,
                    icon: '🚪',
                    title: 'Door to Office',
                    leadsTo: 'office'
                },
                {
                    id: 'exit-door',
                    type: 'exit',
                    x: 90,
                    y: 50,
                    icon: '🚪',
                    title: 'Exit Door',
                    description: 'The way out of the building. It seems to be locked with a special mechanism.'
                }
            ]
        }
    };
    
    // Initialize game
    function initGame() {
        renderRoom(gameState.currentRoom);
        startTimer();
        addToLog('The doors have locked behind you. Find clues about solidarity and volunteering to escape!');
    }
    
    // Create SVG background for rooms
    function createSVGBackground(roomType) {
        let svg = '';
        
        switch(roomType) {
            case 'lobby':
                svg = `<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
                    <!-- Walls -->
                    <rect x="0" y="0" width="1000" height="600" fill="#34495e" />
                    
                    <!-- Floor -->
                    <rect x="50" y="400" width="900" height="200" fill="#2c3e50" />
                    <line x1="50" y1="400" x2="950" y2="400" stroke="#95a5a6" stroke-width="2" />
                    
                    <!-- Ceiling -->
                    <rect x="50" y="0" width="900" height="100" fill="#2c3e50" />
                    
                    <!-- Left Wall -->
                    <rect x="50" y="100" width="100" height="300" fill="#7f8c8d" />
                    
                    <!-- Right Wall -->
                    <rect x="850" y="100" width="100" height="300" fill="#7f8c8d" />
                    
                    <!-- Notice Board -->
                    <rect x="150" y="150" width="200" height="150" fill="#e74c3c" />
                    <rect x="160" y="160" width="180" height="130" fill="#ecf0f1" />
                    <circle cx="170" cy="170" r="5" fill="#e74c3c" />
                    <circle cx="170" cy="190" r="5" fill="#e74c3c" />
                    <circle cx="170" cy="210" r="5" fill="#e74c3c" />
                    <line x1="190" y1="170" x2="330" y2="170" stroke="#7f8c8d" stroke-width="2" />
                    <line x1="190" y1="190" x2="330" y2="190" stroke="#7f8c8d" stroke-width="2" />
                    <line x1="190" y1="210" x2="330" y2="210" stroke="#7f8c8d" stroke-width="2" />
                    <line x1="190" y1="230" x2="330" y2="230" stroke="#7f8c8d" stroke-width="2" />
                    <line x1="190" y1="250" x2="330" y2="250" stroke="#7f8c8d" stroke-width="2" />
                    <line x1="190" y1="270" x2="330" y2="270" stroke="#7f8c8d" stroke-width="2" />
                    
                    <!-- Door to Office -->
                    <rect x="800" y="200" width="100" height="200" fill="#8e44ad" />
                    <circle cx="820" cy="300" r="10" fill="#f1c40f" />
                    
                    <!-- Donation Box -->
                    <rect x="500" y="400" width="150" height="100" fill="#d35400" />
                    <rect x="510" y="410" width="130" height="80" fill="#e67e22" />
                    <rect x="550" y="380" width="50" height="20" fill="#d35400" />
                    
                    <!-- Windows -->
                    <rect x="400" y="150" width="80" height="120" fill="#3498db" />
                    <line x1="440" y1="150" x2="440" y2="270" stroke="#ecf0f1" stroke-width="2" />
                    <line x1="400" y1="210" x2="480" y2="210" stroke="#ecf0f1" stroke-width="2" />
                    
                    <rect x="600" y="150" width="80" height="120" fill="#3498db" />
                    <line x1="640" y1="150" x2="640" y2="270" stroke="#ecf0f1" stroke-width="2" />
                    <line x1="600" y1="210" x2="680" y2="210" stroke="#ecf0f1" stroke-width="2" />
                    
                    <!-- Reception Desk -->
                    <rect x="300" y="350" width="200" height="50" fill="#d35400" />
                    <rect x="310" y="360" width="180" height="30" fill="#e67e22" />
                    
                    <!-- Plants -->
                    <rect x="150" y="350" width="50" height="50" fill="#27ae60" />
                    <path d="M175 350 C160 330 190 330 175 350" fill="#2ecc71" />
                    <path d="M175 350 C160 320 190 320 175 350" fill="#2ecc71" />
                    <path d="M175 350 C160 310 190 310 175 350" fill="#2ecc71" />
                    
                    <rect x="700" y="350" width="50" height="50" fill="#27ae60" />
                    <path d="M725 350 C710 330 740 330 725 350" fill="#2ecc71" />
                    <path d="M725 350 C710 320 740 320 725 350" fill="#2ecc71" />
                    <path d="M725 350 C710 310 740 310 725 350" fill="#2ecc71" />
                </svg>`;
                break;
                
            case 'office':
                svg = `<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
                    <!-- Walls -->
                    <rect x="0" y="0" width="1000" height="600" fill="#2c3e50" />
                    
                    <!-- Floor -->
                    <rect x="50" y="400" width="900" height="200" fill="#34495e" />
                    <line x1="50" y1="400" x2="950" y2="400" stroke="#7f8c8d" stroke-width="2" />
                    
                    <!-- Ceiling -->
                    <rect x="50" y="0" width="900" height="100" fill="#34495e" />
                    
                    <!-- Left Wall -->
                    <rect x="50" y="100" width="100" height="300" fill="#95a5a6" />
                    
                    <!-- Right Wall -->
                    <rect x="850" y="100" width="100" height="300" fill="#95a5a6" />
                    
                    <!-- Desk with Computer -->
                    <rect x="400" y="250" width="300" height="100" fill="#d35400" />
                    <rect x="450" y="200" width="200" height="50" fill="#7f8c8d" />
                    <rect x="500" y="150" width="100" height="50" fill="#ecf0f1" />
                    <rect x="525" y="140" width="50" height="10" fill="#7f8c8d" />
                    <rect x="510" y="160" width="80" height="30" fill="#3498db" />
                    
                    <!-- Office Chair -->
                    <rect x="525" y="300" width="50" height="20" fill="#2c3e50" />
                    <rect x="540" y="320" width="20" height="30" fill="#2c3e50" />
                    <circle cx="550" cy="350" r="10" fill="#7f8c8d" />
                    
                    <!-- Filing Cabinet -->
                    <rect x="150" y="200" width="100" height="200" fill="#95a5a6" />
                    <rect x="160" y="210" width="80" height="40" fill="#7f8c8d" />
                    <rect x="160" y="260" width="80" height="40" fill="#7f8c8d" />
                    <rect x="160" y="310" width="80" height="40" fill="#7f8c8d" />
                    <circle cx="230" cy="230" r="5" fill="#ecf0f1" />
                    <circle cx="230" cy="280" r="5" fill="#ecf0f1" />
                    <circle cx="230" cy="330" r="5" fill="#ecf0f1" />
                    
                    <!-- Door to Lobby -->
                    <rect x="800" y="200" width="100" height="200" fill="#8e44ad" />
                    <circle cx="820" cy="300" r="10" fill="#f1c40f" />
                    
                    <!-- Door to Storage -->
                    <rect x="450" y="400" width="100" height="100" fill="#16a085" />
                    <circle cx="470" cy="450" r="10" fill="#f1c40f" />
                    
                    <!-- Bookshelf -->
                    <rect x="650" y="200" width="100" height="200" fill="#d35400" />
                    <rect x="660" y="210" width="80" height="30" fill="#e67e22" />
                    <rect x="660" y="250" width="80" height="30" fill="#e67e22" />
                    <rect x="660" y="290" width="80" height="30" fill="#e67e22" />
                    <rect x="660" y="330" width="80" height="30" fill="#e67e22" />
                    <rect x="660" y="370" width="80" height="30" fill="#e67e22" />
                    
                    <!-- Window -->
                    <rect x="200" y="100" width="150" height="80" fill="#3498db" />
                    <line x1="275" y1="100" x2="275" y2="180" stroke="#ecf0f1" stroke-width="2" />
                    <line x1="200" y1="140" x2="350" y2="140" stroke="#ecf0f1" stroke-width="2" />
                </svg>`;
                break;
                
            case 'storage':
                svg = `<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
                    <!-- Walls -->
                    <rect x="0" y="0" width="1000" height="600" fill="#2c3e50" />
                    
                    <!-- Floor -->
                    <rect x="50" y="400" width="900" height="200" fill="#34495e" />
                    
                    <!-- Ceiling -->
                    <rect x="50" y="0" width="900" height="100" fill="#34495e" />
                    
                    <!-- Left Wall -->
                    <rect x="50" y="100" width="100" height="300" fill="#7f8c8d" />
                    
                    <!-- Right Wall -->
                    <rect x="850" y="100" width="100" height="300" fill="#7f8c8d" />
                    
                    <!-- Door to Office -->
                    <rect x="450" y="100" width="100" height="100" fill="#16a085" />
                    <circle cx="470" cy="150" r="10" fill="#f1c40f" />
                    
                    <!-- Exit Door -->
                    <rect x="850" y="200" width="100" height="200" fill="#c0392b" />
                    <rect x="860" y="210" width="80" height="180" fill="#e74c3c" />
                    <text x="900" y="300" font-family="Arial" font-size="24" fill="white" text-anchor="middle">EXIT</text>
                    <circle cx="870" cy="300" r="10" fill="#f1c40f" />
                    
                    <!-- Storage Shelves -->
                    <rect x="150" y="150" width="200" height="200" fill="#95a5a6" />
                    <rect x="160" y="160" width="180" height="40" fill="#7f8c8d" />
                    <rect x="160" y="210" width="180" height="40" fill="#7f8c8d" />
                    <rect x="160" y="260" width="180" height="40" fill="#7f8c8d" />
                    <rect x="160" y="310" width="180" height="40" fill="#7f8c8d" />
                    
                    <!-- Emergency Kit -->
                    <rect x="200" y="170" width="100" height="20" fill="#e74c3c" />
                    <rect x="240" y="165" width="20" height="30" fill="#ecf0f1" />
                    <text x="250" y="185" font-family="Arial" font-size="12" fill="white" text-anchor="middle">KIT</text>
                    
                    <!-- Volunteer Vests -->
                    <rect x="650" y="250" width="150" height="100" fill="#f39c12" />
                    <rect x="660" y="260" width="130" height="80" fill="#f1c40f" />
                    <path d="M725 260 L725 340" stroke="#e67e22" stroke-width="5" />
                    <path d="M695 260 L695 340" stroke="#e67e22" stroke-width="5" />
                    <path d="M660 300 L790 300" stroke="#e67e22" stroke-width="5" />
                    
                    <!-- Boxes -->
                    <rect x="400" y="300" width="80" height="80" fill="#d35400" />
                    <rect x="410" y="310" width="60" height="60" fill="#e67e22" />
                    <line x1="410" y1="340" x2="470" y2="340" stroke="#d35400" stroke-width="2" />
                    
                    <rect x="500" y="320" width="60" height="60" fill="#d35400" />
                    <rect x="510" y="330" width="40" height="40" fill="#e67e22" />
                    <line x1="510" y1="350" x2="550" y2="350" stroke="#d35400" stroke-width="2" />
                    
                    <rect x="580" y="340" width="40" height="40" fill="#d35400" />
                    <rect x="585" y="345" width="30" height="30" fill="#e67e22" />
                    <line x1="585" y1="360" x2="615" y2="360" stroke="#d35400" stroke-width="2" />
                    
                    <!-- Light Fixture -->
                    <rect x="450" y="100" width="100" height="10" fill="#95a5a6" />
                    <rect x="490" y="110" width="20" height="20" fill="#f1c40f" />
                    <ellipse cx="500" cy="150" rx="100" ry="30" fill="#f1c40f" opacity="0.2" />
                </svg>`;
                break;
        }
        
        return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
    }
    
    // Render a room
    function renderRoom(roomId) {
        const room = rooms[roomId];
        const roomElement = document.getElementById('room');
        
        // Set room background
        roomElement.style.backgroundImage = `url('${room.background}')`;
        
        // Clear existing hotspots
        roomElement.innerHTML = '';
        
        // Add hotspots
        room.hotspots.forEach(hotspot => {
            const hotspotElement = document.createElement('div');
            hotspotElement.className = 'hotspot p-3 rounded-full bg-white bg-opacity-20 shadow-lg flex items-center justify-center';
            hotspotElement.style.left = `${hotspot.x}%`;
            hotspotElement.style.top = `${hotspot.y}%`;
            
            // Add pulse effect to clues not yet found
            if (hotspot.type === 'clue' && !gameState.inventory.some(item => item.id === hotspot.id)) {
                hotspotElement.classList.add('pulse');
            }
            
            // Add exit lock if not enough clues
            if (hotspot.type === 'exit' && gameState.cluesFound < gameState.totalClues) {
                hotspotElement.classList.add('bg-red-500', 'bg-opacity-30');
            } else if (hotspot.type === 'exit' && gameState.cluesFound >= gameState.totalClues) {
                hotspotElement.classList.add('bg-green-500', 'bg-opacity-30', 'pulse');
            }
            
            // Add icon
            hotspotElement.innerHTML = `<span class="text-2xl">${hotspot.icon}</span>`;
            
            // Add tooltip
            hotspotElement.title = hotspot.title;
            
            // Add click handler
            hotspotElement.addEventListener('click', () => handleHotspotClick(hotspot));
            
            roomElement.appendChild(hotspotElement);
        });
        
        // Add room to visited rooms
        gameState.roomsVisited.add(roomId);
        
        // Log room change
        addToLog(`You are now in the ${roomId.charAt(0).toUpperCase() + roomId.slice(1)}.`);
    }
    
    // Handle hotspot click
    function handleHotspotClick(hotspot) {
        switch(hotspot.type) {
            case 'clue':
                // Check if already in inventory
                if (gameState.inventory.some(item => item.id === hotspot.id)) {
                    addToLog(`You've already examined the ${hotspot.title}.`);
                    return;
                }
                
                // Show question
                showQuestion(hotspot);
                break;
                
            case 'door':
                // Change room
                gameState.currentRoom = hotspot.leadsTo;
                renderRoom(hotspot.leadsTo);
                break;
                
            case 'exit':
                // Check if player has found all clues
                if (gameState.cluesFound >= gameState.totalClues) {
                    victory();
                } else {
                    addToLog(`The exit door is locked. You need to find ${gameState.totalClues - gameState.cluesFound} more clues to unlock it.`);
                    document.getElementById('room').classList.add('shake');
                    setTimeout(() => {
                        document.getElementById('room').classList.remove('shake');
                    }, 500);
                }
                break;
        }
    }
    
    // Show question modal
    function showQuestion(hotspot) {
        const modal = document.getElementById('question-modal');
        const titleElement = document.getElementById('question-title');
        const questionElement = document.getElementById('question-text');
        const optionsElement = document.getElementById('question-options');
        
        titleElement.textContent = hotspot.title;
        questionElement.textContent = hotspot.question.text;
        
        // Clear previous options
        optionsElement.innerHTML = '';
        
        // Add options
        hotspot.question.options.forEach((option, index) => {
            const button = document.createElement('button');
            button.className = 'btn w-full text-left p-3 rounded-lg bg-gray-800 hover:bg-gray-700 border border-gray-700';
            button.textContent = option.text;
            
            button.addEventListener('click', () => {
                if (option.correct) {
                    // Correct answer
                    addItemToInventory(hotspot.id, hotspot.question.item, hotspot.question.itemDescription);
                    addToLog(`Correct! You found a ${hotspot.question.item}.`);
                    modal.classList.add('hidden');
                } else {
                    // Wrong answer
                    decreaseHealth(20);
                    gameState.wrongAnswers++;
                    addToLog(`Wrong answer! You lost some health.`);
                    
                    if (gameState.health <= 0) {
                        gameOver('You ran out of health by answering too many questions incorrectly.');
                    } else {
                        modal.classList.add('hidden');
                    }
                }
            });
            
            optionsElement.appendChild(button);
        });
        
        // Show modal
        modal.classList.remove('hidden');
        
        // Close button
        document.getElementById('close-question').addEventListener('click', () => {
            modal.classList.add('hidden');
        });
    }
    
    // Add item to inventory
    function addItemToInventory(id, name, description) {
        // Add to game state
        gameState.inventory.push({ id, name, description });
        gameState.cluesFound++;
        
        // Update inventory UI
        updateInventory();
        
        // Update clues counter
        document.getElementById('clues-counter').textContent = `${gameState.cluesFound}/${gameState.totalClues}`;
        
        // Re-render room to update hotspots
        renderRoom(gameState.currentRoom);
    }
    
    // Update inventory UI
    function updateInventory() {
        const inventoryElement = document.getElementById('inventory');
        
        // Clear inventory
        inventoryElement.innerHTML = '';
        
        if (gameState.inventory.length === 0) {
            inventoryElement.innerHTML = '<div class="text-gray-500 italic">Your inventory is empty. Find items to help you escape!</div>';
            return;
        }
        
        // Add items
        gameState.inventory.forEach(item => {
            const itemElement = document.createElement('div');
            itemElement.className = 'inventory-item p-3 bg-gray-700 rounded-lg border border-gray-600 w-32 text-center';
            itemElement.innerHTML = `
                <div class="text-2xl mb-1">📄</div>
                <div class="text-sm font-semibold">${item.name}</div>
            `;
            itemElement.title = item.description;
            
            inventoryElement.appendChild(itemElement);
        });
    }
    
    // Add message to game log
    function addToLog(message) {
        const logElement = document.getElementById('game-log');
        const messageElement = document.createElement('p');
        messageElement.className = 'mb-1';
        messageElement.textContent = message;
        
        logElement.appendChild(messageElement);
        
        // Scroll to bottom
        logElement.scrollTop = logElement.scrollHeight;
    }
    
    // Start timer
    function startTimer() {
        gameState.timerInterval = setInterval(() => {
            gameState.timeRemaining--;
            
            // Update timer display
            const minutes = Math.floor(gameState.timeRemaining / 60);
            const seconds = gameState.timeRemaining % 60;
            document.getElementById('timer').textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            // Check if time's up
            if (gameState.timeRemaining <= 0) {
                gameOver('You ran out of time!');
            }
            
            // Warning when time is running low
            if (gameState.timeRemaining === 60) {
                addToLog('Warning: Only 1 minute remaining!');
                document.getElementById('timer').classList.add('shake');
                setTimeout(() => {
                    document.getElementById('timer').classList.remove('shake');
                }, 1000);
            }
        }, 1000);
    }
    
    // Decrease health
    function decreaseHealth(amount) {
        gameState.health -= amount;
        
        // Update health bar
        document.getElementById('health-bar').style.width = `${Math.max(0, gameState.health)}%`;
        
        // Add shake effect
        document.getElementById('health-bar').parentElement.classList.add('shake');
        setTimeout(() => {
            document.getElementById('health-bar').parentElement.classList.remove('shake');
        }, 500);
    }
    
    // Game over
    function gameOver(reason) {
        // Stop timer
        clearInterval(gameState.timerInterval);
        
        // Show game over modal
        document.getElementById('game-over-reason').textContent = reason;
        document.getElementById('game-over-modal').classList.remove('hidden');
        
        // Log
        addToLog(`Game Over: ${reason}`);
    }
    
    // Victory
    function victory() {
        // Stop timer
        clearInterval(gameState.timerInterval);
        
        // Calculate score
        const timeBonus = Math.floor(gameState.timeRemaining / 10);
        const healthBonus = Math.floor(gameState.health / 10);
        const totalScore = timeBonus + healthBonus;
        
        // Show victory stats
        document.getElementById('victory-stats').innerHTML = `
            <strong>Final Stats:</strong><br>
            Time Remaining: ${Math.floor(gameState.timeRemaining / 60)}m ${gameState.timeRemaining % 60}s<br>
            Health Remaining: ${gameState.health}%<br>
            Rooms Explored: ${gameState.roomsVisited.size}/3<br>
            Wrong Answers: ${gameState.wrongAnswers}<br>
            Score: ${totalScore} points
        `;
        
        // Show victory modal
        document.getElementById('victory-modal').classList.remove('hidden');
        
        // Log
        addToLog('Congratulations! You escaped the room by using your knowledge of solidarity and volunteering!');
    }
    
    // Restart game
    function restartGame() {
        // Reset game state
        gameState.currentRoom = 'lobby';
        gameState.health = 100;
        gameState.timeRemaining = 15 * 60;
        gameState.inventory = [];
        gameState.cluesFound = 0;
        gameState.roomsVisited = new Set(['lobby']);
        gameState.wrongAnswers = 0;
        
        // Clear intervals
        clearInterval(gameState.timerInterval);
        
        // Hide modals
        document.getElementById('game-over-modal').classList.add('hidden');
        document.getElementById('victory-modal').classList.add('hidden');
        
        // Reset UI
        document.getElementById('health-bar').style.width = '100%';
        document.getElementById('game-log').innerHTML = '<p>Welcome to the Solidarity Escape Room! You\'ve been locked in a community center after hours. Find clues about volunteering and solidarity to escape before time runs out!</p>';
        document.getElementById('clues-counter').textContent = '0/6';
        
        // Reset inventory
        updateInventory();
        
        // Start game
        initGame();
    }
    
    // Initialize the game when page loads
    window.onload = initGame;
</script>