<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ruta Segura: Misión Residuos</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes pulse-slow {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        .animate-pulse-slow {
            animation: pulse-slow 2s infinite;
        }
    </style>
</head>
<body class="bg-slate-900 text-white min-h-screen flex flex-col justify-between font-sans selection:bg-emerald-500 selection:text-white">

    <!-- Header / Navbar -->
    <header class="bg-slate-800/80 backdrop-blur border-b border-slate-700 p-4 sticky top-0 z-50">
        <div class="max-w-4xl mx-auto flex justify-between items-center">
            <div class="flex items-center gap-3">
                <div class="bg-emerald-500 text-slate-900 p-2 rounded-lg font-black text-xl">
                    <i class="fa-solid fa-truck-pickup"></i>
                </div>
                <div>
                    <h1 class="font-bold text-lg leading-tight text-emerald-400">Ruta Segura</h1>
                    <p class="text-xs text-slate-400">Misión Residuos & SST</p>
                </div>
            </div>
            
            <div id="stats-container" class="hidden flex items-center gap-6 bg-slate-900/60 px-4 py-2 rounded-xl border border-slate-700">
                <div class="flex items-center gap-2">
                    <i class="fa-solid fa-heart text-rose-500"></i>
                    <span id="lives" class="font-bold text-lg">3</span>
                </div>
                <div class="flex items-center gap-2">
                    <i class="fa-solid fa-star text-amber-400"></i>
                    <span id="score" class="font-bold text-lg text-amber-400">0</span>
                </div>
                <div class="text-xs bg-slate-800 px-2.5 py-1 rounded-md border border-slate-600 text-slate-300">
                    Nivel <span id="current-level" class="font-bold text-emerald-400">1</span>/3
                </div>
            </div>
        </div>
    </header>

    <!-- Main Game Canvas Area -->
    <main class="flex-1 flex items-center justify-center p-4">
        <div class="max-w-4xl w-full bg-slate-800 rounded-2xl border border-slate-700 shadow-2xl overflow-hidden min-h-[500px] flex flex-col justify-center relative">
            
            <!-- SCREEN: START / MENU -->
            <div id="screen-start" class="p-8 text-center flex flex-col items-center gap-6">
                <div class="w-20 h-20 bg-emerald-500/10 text-emerald-400 rounded-full flex items-center justify-center text-4xl border border-emerald-500/30 animate-pulse-slow">
                    <i class="fa-solid fa-shield-halved"></i>
                </div>
                <div class="max-w-md">
                    <h2 class="text-3xl font-extrabold text-white mb-2">Reto de Seguridad Operacional</h2>
                    <p class="text-slate-400 text-sm">
                        Aprende y pon a prueba tus habilidades sobre conducción defensiva, el porte correcto de EPP y la prevención de accidentes con residuos peligrosos.
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-2xl text-left my-2">
                    <div class="bg-slate-900/50 p-4 rounded-xl border border-slate-700">
                        <i class="fa-solid fa-hard-hat text-emerald-400 text-xl mb-2"></i>
                        <h3 class="font-semibold text-sm">1. Uso de EPP</h3>
                        <p class="text-xs text-slate-400 mt-1">Selecciona el equipo correcto antes de salir a la ruta.</p>
                    </div>
                    <div class="bg-slate-900/50 p-4 rounded-xl border border-slate-700">
                        <i class="fa-solid fa-truck-fast text-amber-400 text-xl mb-2"></i>
                        <h3 class="font-semibold text-sm">2. Conducción Segura</h3>
                        <p class="text-xs text-slate-400 mt-1">Toma decisiones al volante y evita puntos ciegos.</p>
                    </div>
                    <div class="bg-slate-900/50 p-4 rounded-xl border border-slate-700">
                        <i class="fa-solid fa-box-tissue text-rose-400 text-xl mb-2"></i>
                        <h3 class="font-semibold text-sm">3. Riesgo Ciudadano</h3>
                        <p class="text-xs text-slate-400 mt-1">Detecta bolsas mal cerradas y cortopunzantes.</p>
                    </div>
                </div>

                <button onclick="startGame()" class="bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold px-8 py-3.5 rounded-xl transition duration-200 shadow-lg shadow-emerald-500/20 text-lg flex items-center gap-2">
                    <i class="fa-solid fa-play"></i> Iniciar Reto
                </button>
            </div>

            <!-- SCREEN: LEVEL 1 (EPP) -->
            <div id="screen-level-1" class="hidden p-6 md:p-8">
                <div class="mb-6">
                    <span class="text-xs font-semibold uppercase tracking-wider text-emerald-400 bg-emerald-500/10 px-3 py-1 rounded-full border border-emerald-500/20">Nivel 1: Equipamiento de Protección</span>
                    <h2 class="text-2xl font-bold mt-2">Viste al Operario con el EPP Adecuado</h2>
                    <p class="text-slate-400 text-sm">Selecciona únicamente los elementos obligatorios de seguridad para iniciar la recolección.</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
                    <!-- Operario Silhouette/Status -->
                    <div class="bg-slate-900/80 p-6 rounded-xl border border-slate-700 flex flex-col items-center text-center">
                        <div class="relative w-32 h-48 bg-slate-800 rounded-lg flex flex-col items-center justify-between p-3 border border-dashed border-slate-600 mb-4">
                            <i id="slot-head" class="fa-solid fa-user-ninja text-3xl text-slate-600"></i>
                            <i id="slot-body" class="fa-solid fa-shirt text-4xl text-slate-600"></i>
                            <i id="slot-hands" class="fa-solid fa-hands text-3xl text-slate-600"></i>
                            <i id="slot-feet" class="fa-solid fa-shoe-prints text-3xl text-slate-600"></i>
                        </div>
                        <p id="epp-status" class="text-xs text-amber-400 font-medium">Equipamiento incompleto (0/4)</p>
                    </div>

                    <!-- EPP Selector Grid -->
                    <div class="grid grid-cols-2 gap-3" id="epp-options">
                        <!-- Options generated dynamically -->
                    </div>
                </div>

                <div class="mt-8 flex justify-end">
                    <button id="btn-next-l1" onclick="validateL1()" class="bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold px-6 py-2.5 rounded-xl transition duration-200 flex items-center gap-2">
                        Continuar a Ruta <i class="fa-solid fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            <!-- SCREEN: LEVEL 2 (Conducción Segura) -->
            <div id="screen-level-2" class="hidden p-6 md:p-8">
                <div class="mb-4">
                    <span class="text-xs font-semibold uppercase tracking-wider text-amber-400 bg-amber-500/10 px-3 py-1 rounded-full border border-amber-500/20">Nivel 2: Conducción Defensiva</span>
                    <h2 class="text-2xl font-bold mt-1">Simulador de Decisiones al Volante</h2>
                    <p class="text-slate-400 text-sm">Responde rápido ante la situación de riesgo en la vía.</p>
                </div>

                <div class="bg-slate-900 rounded-xl p-6 border border-slate-700 mb-6">
                    <div class="flex items-center gap-3 mb-4 text-amber-400">
                        <i class="fa-solid fa-triangle-exclamation text-2xl"></i>
                        <h3 id="l2-scenario-title" class="font-bold text-lg text-white">Situación en Progreso...</h3>
                    </div>
                    <p id="l2-scenario-desc" class="text-slate-300 mb-6 text-sm leading-relaxed">
                        Cargando escenario de ruta...
                    </p>

                    <div id="l2-options" class="flex flex-col gap-3">
                        <!-- Options dynamically inserted -->
                    </div>
                </div>
            </div>

            <!-- SCREEN: LEVEL 3 (Identificación de Riesgos) -->
            <div id="screen-level-3" class="hidden p-6 md:p-8">
                <div class="mb-4">
                    <span class="text-xs font-semibold uppercase tracking-wider text-rose-400 bg-rose-500/10 px-3 py-1 rounded-full border border-rose-500/20">Nivel 3: Inspección de Residuos</span>
                    <h2 class="text-2xl font-bold mt-1">Identifica el Riesgo en el Punto de Acopio</h2>
                    <p class="text-slate-400 text-sm">Observa la condición de la bolsa de basura y toma la decisión correcta.</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center mb-6">
                    <div class="bg-slate-900 p-8 rounded-xl border border-slate-700 flex flex-col items-center justify-center min-h-[220px] text-center">
                        <div id="l3-bag-icon" class="text-6xl text-slate-500 mb-3">
                            <i class="fa-solid fa-dumpster font-black"></i>
                        </div>
                        <h3 id="l3-bag-title" class="font-bold text-white mb-1">Bolsa sospechosa</h3>
                        <p id="l3-bag-desc" class="text-xs text-slate-400">Cargando detalles...</p>
                    </div>

                    <div id="l3-options" class="flex flex-col gap-3">
                        <!-- Options dynamically inserted -->
                    </div>
                </div>
            </div>

            <!-- SCREEN: FEEDBACK MODAL / INTERMEDIATE -->
            <div id="screen-feedback" class="hidden p-8 text-center flex flex-col items-center justify-center gap-4">
                <div id="fb-icon" class="text-5xl"></div>
                <h3 id="fb-title" class="text-2xl font-bold"></h3>
                <p id="fb-message" class="text-slate-300 text-sm max-w-md leading-relaxed"></p>
                <button id="fb-btn" onclick="nextStep()" class="mt-4 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold px-6 py-2.5 rounded-xl transition duration-200">
                    Siguiente
                </button>
            </div>

            <!-- SCREEN: GAME OVER / RESULTS -->
            <div id="screen-results" class="hidden p-8 text-center flex flex-col items-center justify-center gap-6">
                <div id="res-icon" class="text-6xl text-amber-400">
                    <i class="fa-solid fa-trophy"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-extrabold mb-1">¡Reto Completado!</h2>
                    <p id="res-subtitle" class="text-slate-400 text-sm">Resumen de tu desempeño en seguridad operacional</p>
                </div>

                <div class="bg-slate-900/80 p-6 rounded-xl border border-slate-700 w-full max-w-sm flex justify-around">
                    <div>
                        <p class="text-xs text-slate-500 uppercase font-semibold">Puntaje Final</p>
                        <p id="res-score" class="text-3xl font-black text-amber-400">0</p>
                    </div>
                    <div class="border-r border-slate-800"></div>
                    <div>
                        <p class="text-xs text-slate-500 uppercase font-semibold">Vidas Restantes</p>
                        <p id="res-lives" class="text-3xl font-black text-rose-500">0</p>
                    </div>
                </div>

                <p id="res-eval" class="text-sm text-slate-300 max-w-md italic"></p>

                <button onclick="resetGame()" class="bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-bold px-8 py-3 rounded-xl transition duration-200 flex items-center gap-2">
                    <i class="fa-solid fa-rotate-right"></i> Jugar de Nuevo
                </button>
            </div>

        </div>
    </main>

    <!-- Footer -->
    <footer class="p-4 text-center text-xs text-slate-500 border-t border-slate-800">
        Gestión del Riesgo & Salud en el Trabajo | Recolección de Residuos
    </footer>

    <!-- Game Logic JavaScript -->
    <script>
        // Game State
        let gameState = {
            lives: 3,
            score: 0,
            currentLevel: 1,
            l1Equipped: {
                head: false, // Gafas/Tapabocas
                body: false, // Chaleco reflectivo
                hands: false, // Guantes anticorte
                feet: false  // Botas con puntera
            },
            l2Index: 0,
            l3Index: 0
        };

        // Level 1 Data (EPP Items)
        const eppItems = [
            { id: 'hands', name: 'Guantes Anticorte', icon: 'fa-hand-back-fist', correct: true, desc: 'Protege contra punciones y vidrio' },
            { id: 'casual_shoes', name: 'Tenis Deportivos', icon: 'fa-shoe-prints', correct: false, desc: 'No protegen el pie ni tienen agarre' },
            { id: 'feet', name: 'Botas con Puntera', icon: 'fa-boot', correct: true, desc: 'Suela antideslizante y protección mecánica' },
            { id: 'body', name: 'Chaleco Reflectivo', icon: 'fa-vest', correct: true, desc: 'Visibilidad alta en vías públicas' },
            { id: 'cap', name: 'Gorra Común', icon: 'fa-hat-wizard', correct: false, desc: 'Sin protección de bioseguridad' },
            { id: 'head', name: 'Gafas y Tapabocas', icon: 'fa-head-side-mask', correct: true, desc: 'Protección contra fluidos e impactos' }
        ];

        // Level 2 Data (Conducción Segura)
        const l2Scenarios = [
            {
                title: "Detención para Recolección en Vía Principal",
                desc: "Vas manejando el camión compactador y los operarios deben bajarse a recoger un punto de acopio en una vía transitada. ¿Qué medida defensiva aplicas?",
                options: [
                    { text: "Detenerte rápidamente en el carril central para agilizar la recolección.", correct: false, feedback: "¡Error! Detenerse sin señalizar en carriles centrales genera alto riesgo de colisión trasera." },
                    { text: "Orillarte en zona segura, encender luces intermitentes y verificar espejos para mitigar puntos ciegos.", correct: true, feedback: "¡Excelente! La visibilidad y señalización temprana protegen a tus compañeros en la parte posterior." },
                    { text: "Pitar continuamente para que los demás carros abran paso rápido.", correct: false, feedback: "¡Incorrecto! El pito no sustituye el uso de luces ni mitiga los puntos ciegos." }
                ]
            },
            {
                title: "Giro a la Derecha con Puntos Ciegos",
                desc: "Debes ingresar a una calle estrecha. Un ciclista viene por tu costado derecho en una zona de baja visibilidad del camión.",
                options: [
                    { text: "Girar rápido antes de que el ciclista se acerque más.", correct: false, feedback: "¡Peligro! Los camiones de basura tienen amplios puntos ciegos; podías arrollar al ciclista." },
                    { text: "Disminuir la velocidad, verificar espejos gran angulares y esperar que el ciclista despeje el área.", correct: true, feedback: "¡Correcto! Paciencia y verificación constante de puntos ciegos previenen atropellamientos." },
                    { text: "Realizar el giro confiando en que el ciclista frenará.", correct: false, feedback: "¡Incorrecto! La conducción defensiva asume que los demás usuarios de la vía pueden no verte." }
                ]
            }
        ];

        // Level 3 Data (Riesgo en Bolsas / Ciudadanos)
        const l3Scenarios = [
            {
                title: "Bolsa con Vidrios Rotos Expuestos",
                desc: "Observas una bolsa plástica transparente donde se transparentan bordes afilados de un espejo roto sin ningún tipo de empaque primario.",
                icon: "fa-wine-bottle",
                options: [
                    { text: "Levantar la bolsa rápidamente y arrojarla al compactador.", correct: false, feedback: "¡Accidente! Al levantarla, el vidrio rasga la bolsa y causa un corte severo en la pierna del operario." },
                    { text: "Usar guantes anticorte, manipularla con precaución desde la zona superior no expuesta o solicitar reempaque rígido.", correct: true, feedback: "¡Correcto! Los elementos cortopunzantes sin envolver en cartón/caja son la causa #1 de cortes." },
                    { text: "Pisotear la bolsa para reducir el volumen del vidrio.", correct: false, feedback: "¡Muy peligroso! Jamás se deben compactar bolsas con los pies o manos." }
                ]
            },
            {
                title: "Bolsa Sobrecargada y Abierta",
                desc: "Una bolsa negra supera el 80% de su capacidad y no tiene nudo de agarre. Los residuos están a punto de derramarse.",
                icon: "fa-box-open",
                options: [
                    { text: "Cargarla abrazándola contra el pecho para que no se caiga nada.", correct: false, feedback: "¡Error de ERGONOMÍA y Bioseguridad! Pegarse la bolsa al cuerpo puede clavar agujas u objetos ocultos." },
                    { text: "Asegurar el agarre inferior o re-amarrar de forma segura manteniendo distancia del cuerpo.", correct: true, feedback: "¡Muy bien! Agarrar bolsas sobrecargadas sin amarre causa sobreesfuerzo lumbar y derrames de fluidos contaminantes." }
                ]
            }
        ];

        // Functions
        function startGame() {
            gameState.lives = 3;
            gameState.score = 0;
            gameState.currentLevel = 1;
            gameState.l2Index = 0;
            gameState.l3Index = 0;
            gameState.l1Equipped = { head: false, body: false, hands: false, feet: false };

            document.getElementById('screen-start').classList.add('hidden');
            document.getElementById('stats-container').classList.remove('hidden');
            updateUI();
            loadLevel1();
        }

        function updateUI() {
            document.getElementById('lives').textContent = gameState.lives;
            document.getElementById('score').textContent = gameState.score;
            document.getElementById('current-level').textContent = gameState.currentLevel;
        }

        // LEVEL 1 LOGIC
        function loadLevel1() {
            document.getElementById('screen-level-1').classList.remove('hidden');
            const optionsContainer = document.getElementById('epp-options');
            optionsContainer.innerHTML = '';

            eppItems.forEach((item, index) => {
                const card = document.createElement('div');
                card.className = `p-3 rounded-xl border border-slate-700 bg-slate-900 cursor-pointer hover:border-emerald-500 transition flex items-center gap-3 select-none`;
                card.id = `epp-card-${index}`;
                card.innerHTML = `
                    <div class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center text-emerald-400 text-lg">
                        <i class="fa-solid ${item.icon}"></i>
                    </div>
                    <div>
                        <h4 class="font-bold text-xs text-white">${item.name}</h4>
                        <p class="text-[10px] text-slate-400">${item.desc}</p>
                    </div>
                `;
                card.onclick = () => toggleEPP(item, card);
                optionsContainer.appendChild(card);
            });
        }

        function toggleEPP(item, cardEl) {
            if (item.correct) {
                gameState.l1Equipped[item.id] = !gameState.l1Equipped[item.id];
                if (gameState.l1Equipped[item.id]) {
                    cardEl.classList.add('border-emerald-500', 'bg-emerald-500/10');
                } else {
                    cardEl.classList.remove('border-emerald-500', 'bg-emerald-500/10');
                }
            } else {
                // Incorrect item clicked
                gameState.lives--;
                updateUI();
                showFeedback(false, "¡Elemento Incorrecto!", `${item.name} no forma parte del EPP reglamentario para recolección de basura.`, () => {
                    if (gameState.lives <= 0) endGame();
                });
                return;
            }

            // Update UI slots
            const equippedCount = Object.values(gameState.l1Equipped).filter(Boolean).length;
            document.getElementById('epp-status').textContent = `Equipamiento: (${equippedCount}/4)`;
            
            if (gameState.l1Equipped.head) document.getElementById('slot-head').className = "fa-solid fa-head-side-mask text-3xl text-emerald-400";
            if (gameState.l1Equipped.body) document.getElementById('slot-body').className = "fa-solid fa-vest text-4xl text-emerald-400";
            if (gameState.l1Equipped.hands) document.getElementById('slot-hands').className = "fa-solid fa-hand-back-fist text-3xl text-emerald-400";
            if (gameState.l1Equipped.feet) document.getElementById('slot-feet').className = "fa-solid fa-boot text-3xl text-emerald-400";
        }

        function validateL1() {
            const equippedCount = Object.values(gameState.l1Equipped).filter(Boolean).length;
            if (equippedCount === 4) {
                gameState.score += 30;
                updateUI();
                showFeedback(true, "¡Operario Equipado!", "Cuentas con guantes anticorte, botas de seguridad, chaleco reflectivo y protección facial. ¡Sube al camión!", () => {
                    document.getElementById('screen-level-1').classList.add('hidden');
                    gameState.currentLevel = 2;
                    updateUI();
                    loadLevel2();
                });
            } else {
                showFeedback(false, "Equipamiento Incompleto", "Aún te faltan elementos de protección vitales para prevenir accidentes.", null);
            }
        }

        // LEVEL 2 LOGIC
        function loadLevel2() {
            document.getElementById('screen-level-2').classList.remove('hidden');
            const scenario = l2Scenarios[gameState.l2Index];

            document.getElementById('l2-scenario-title').textContent = scenario.title;
            document.getElementById('l2-scenario-desc').textContent = scenario.desc;

            const optsContainer = document.getElementById('l2-options');
            optsContainer.innerHTML = '';

            scenario.options.forEach((opt) => {
                const btn = document.createElement('button');
                btn.className = "w-full text-left p-4 rounded-xl border border-slate-700 bg-slate-800 hover:bg-slate-700/80 transition text-sm font-medium leading-snug";
                btn.textContent = opt.text;
                btn.onclick = () => handleL2Answer(opt);
                optsContainer.appendChild(btn);
            });
        }

        function handleL2Answer(option) {
            if (option.correct) {
                gameState.score += 35;
                updateUI();
                showFeedback(true, "¡Excelente Decisión!", option.feedback, () => {
                    gameState.l2Index++;
                    if (gameState.l2Index < l2Scenarios.length) {
                        loadLevel2();
                    } else {
                        document.getElementById('screen-level-2').classList.add('hidden');
                        gameState.currentLevel = 3;
                        updateUI();
                        loadLevel3();
                    }
                });
            } else {
                gameState.lives--;
                updateUI();
                showFeedback(false, "Maniobra Riesgosa", option.feedback, () => {
                    if (gameState.lives <= 0) endGame();
                });
            }
        }

        // LEVEL 3 LOGIC
        function loadLevel3() {
            document.getElementById('screen-level-3').classList.remove('hidden');
            const scenario = l3Scenarios[gameState.l3Index];

            document.getElementById('l3-bag-title').textContent = scenario.title;
            document.getElementById('l3-bag-desc').textContent = scenario.desc;
            document.getElementById('l3-bag-icon').innerHTML = `<i class="fa-solid ${scenario.icon}"></i>`;

            const optsContainer = document.getElementById('l3-options');
            optsContainer.innerHTML = '';

            scenario.options.forEach((opt) => {
                const btn = document.createElement('button');
                btn.className = "w-full text-left p-4 rounded-xl border border-slate-700 bg-slate-800 hover:bg-slate-700/80 transition text-sm font-medium leading-snug";
                btn.textContent = opt.text;
                btn.onclick = () => handleL3Answer(opt);
                optsContainer.appendChild(btn);
            });
        }

        function handleL3Answer(option) {
            if (option.correct) {
                gameState.score += 35;
                updateUI();
                showFeedback(true, "¡Riesgo Mitigado!", option.feedback, () => {
                    gameState.l3Index++;
                    if (gameState.l3Index < l3Scenarios.length) {
                        loadLevel3();
                    } else {
                        document.getElementById('screen-level-3').classList.add('hidden');
                        endGame();
                    }
                });
            } else {
                gameState.lives--;
                updateUI();
                showFeedback(false, "¡Accidente Operacional!", option.feedback, () => {
                    if (gameState.lives <= 0) endGame();
                });
            }
        }

        // FEEDBACK MODAL
        function showFeedback(isSuccess, title, message, callback) {
            const fbScreen = document.getElementById('screen-feedback');
            document.getElementById('screen-level-1').classList.add('hidden');
            document.getElementById('screen-level-2').classList.add('hidden');
            document.getElementById('screen-level-3').classList.add('hidden');

            fbScreen.classList.remove('hidden');

            const iconEl = document.getElementById('fb-icon');
            if (isSuccess) {
                iconEl.className = "text-5xl text-emerald-400 fa-solid fa-circle-check";
            } else {
                iconEl.className = "text-5xl text-rose-500 fa-solid fa-triangle-exclamation";
            }

            document.getElementById('fb-title').textContent = title;
            document.getElementById('fb-message').textContent = message;

            const btn = document.getElementById('fb-btn');
            btn.onclick = () => {
                fbScreen.classList.add('hidden');
                if (callback) callback();
                else {
                    // Restore level view if failed
                    if (gameState.currentLevel === 1) document.getElementById('screen-level-1').classList.remove('hidden');
                    if (gameState.currentLevel === 2) document.getElementById('screen-level-2').classList.remove('hidden');
                    if (gameState.currentLevel === 3) document.getElementById('screen-level-3').classList.remove('hidden');
                }
            };
        }

        // END GAME / RESULTS
        function endGame() {
            document.getElementById('screen-level-1').classList.add('hidden');
            document.getElementById('screen-level-2').classList.add('hidden');
            document.getElementById('screen-level-3').classList.add('hidden');
            document.getElementById('screen-feedback').classList.add('hidden');

            const resScreen = document.getElementById('screen-results');
            resScreen.classList.remove('hidden');

            document.getElementById('res-score').textContent = gameState.score;
            document.getElementById('res-lives').textContent = gameState.lives;

            const evalText = document.getElementById('res-eval');
            if (gameState.lives > 0 && gameState.score >= 100) {
                evalText.textContent = "¡Felicitaciones! Demostraste un nivel superior en la gestión de riesgos operacionales, protección de personal y prevención ciudadana.";
            } else if (gameState.lives > 0) {
                evalText.textContent = "Completaste la ruta, pero recuerdas reforzar las medidas defensivas y la inspección previa de materiales cortopunzantes.";
            } else {
                evalText.textContent = "Has agotado tus vidas debido a accidentes en ruta. Recuerda que en la vida real la seguridad y el uso de EPP no son opcionales.";
            }
        }

        function resetGame() {
            document.getElementById('screen-results').classList.add('hidden');
            document.getElementById('screen-start').classList.remove('hidden');
            document.getElementById('stats-container').classList.add('hidden');
        }
    </script>
</body>
</html>
```eof

### ¿Qué incluye este juego interactivo?
1. **Nivel 1 (EPP Obligatorio):** Permite vestir al operario seleccionando elementos clave (guantes anticorte, botas con puntera, chaleco reflectivo y protección facial) penalizando el uso de ropa casual.
2. **Nivel 2 (Conducción Defensiva):** Presenta dilemas al volante de un camión compactador para controlar velocidad, orillarse correctamente y manejar puntos ciegos.
3. **Nivel 3 (Prevención de Riesgos e Inspección):** Muestra situaciones reales con residuos mal dispuestos por ciudadanos (vidrios sueltos, bolsas sobrecargadas o sin nudo) para tomar medidas operacionales seguras.