/* Estilos Base */
body, html {
    margin: 0; padding: 0; width: 100%; height: 100%;
    background-color: #000; color: #8b0000;
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden; cursor: none !important;
}

#ui-juego {
    position: fixed; top: 0; width: 100%; z-index: 5000;
    display: flex; justify-content: space-around; align-items: center;
    pointer-events: none; text-shadow: 2px 2px 5px #000;
}

#juego-contenedor { width: 100vw; height: 100vh; position: relative; }
.nivel { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.nivel.activo { display: block; }

.seguro {
    position: absolute; background-image: url('assets/camino.jpg');
    background-size: cover; box-shadow: inset 0 0 15px #000;
}

.inicio, .meta {
    width: 100px; height: 100px; line-height: 100px; text-align: center;
    color: white; font-weight: bold; z-index: 100;
}
.inicio { background-color: rgba(0, 255, 0, 0.4); border: 2px solid lime; }
.meta { background-color: rgba(255, 215, 0, 0.4); border: 2px solid gold; }

/* LINTERNA */
#capa-oscuridad {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle 150px at center, transparent 10%, rgba(0,0,0,0.98) 100%);
    z-index: 2000; pointer-events: none; display: none;
}

/* TRAMPAS */
.trampa { position: absolute; width: 40px; height: 40px; background-color: #ff0000; border-radius: 50%; box-shadow: 0 0 20px #f00; z-index: 150; }
.t-movil-1 { top: 10%; left: 10%; animation: moverX 3s infinite alternate ease-in-out; }
.t-movil-2 { top: 50%; left: 50%; animation: moverY 2s infinite alternate ease-in-out; }
.t-movil-3 { top: 20%; left: 20%; animation: girar 4s infinite linear; }
.t-final { width: 60px; height: 60px; top: 40%; left: 20%; animation: latir 1s infinite alternate; }

@keyframes moverX { from { left: 20%; } to { left: 80%; } }
@keyframes moverY { from { top: 20%; } to { top: 80%; } }
@keyframes girar { from { transform: rotate(0deg) translateX(100px) rotate(0deg); } to { transform: rotate(360deg) translateX(100px) rotate(-360deg); } }
@keyframes latir { from { transform: scale(1); } to { transform: scale(1.5); } }

/* Pantallas y Botones */
#pantalla-inicio, #pantalla-muerte {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10000; background: black; display: flex;
    flex-direction: column; justify-content: center; align-items: center;
}
#pantalla-muerte { display: none; }
#pantalla-muerte img { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 10001; }

.botones-muerte { 
    position: relative; z-index: 10005; /* Más alto que la imagen */
    display: flex; gap: 20px; margin-top: 300px; /* Para que bajen un poco */
}

#cursor-personalizado {
    position: fixed; width: 40px; height: 40px;
    background-image: url('assets/cursor.png'); background-size: contain;
    background-repeat: no-repeat; pointer-events: none; z-index: 11000;
    display: none; transform: translate(-10%, -10%);
}

button { 
    padding: 15px 30px; font-size: 18px; background: #8b0000; color: white; 
    border: 2px solid white; cursor: pointer; position: relative;
}
button:hover { background: red; }

/* NIVELES 1-10 */
#nivel-1 .n1-t1 { width: 100px; height: 80%; bottom: 10%; left: 10%; }
#nivel-1 .n1-t2 { width: 80%; height: 70px; top: 15%; left: 10%; }
#nivel-1 .inicio { bottom: 10%; left: 10%; } #nivel-1 .meta { top: 15%; right: 10%; }
#nivel-2 .n2-t1 { width: 70px; height: 85%; top: 10%; left: 10%; }
#nivel-2 .n2-t2 { width: 80%; height: 70px; bottom: 10%; left: 10%; }
#nivel-2 .n2-t3 { width: 70px; height: 75%; bottom: 10%; right: 15%; }
#nivel-2 .inicio { top: 10%; left: 10%; } #nivel-2 .meta { top: 20%; right: 15%; }
#nivel-3 .n3-t1 { width: 40%; height: 70px; top: 10%; left: 10%; }
#nivel-3 .n3-t2 { width: 70px; height: 50%; top: 10%; left: 45%; }
#nivel-3 .n3-t3 { width: 40%; height: 70px; top: 55%; left: 45%; }
#nivel-3 .inicio { top: 10%; left: 10%; } #nivel-3 .meta { top: 55%; right: 15%; }
#nivel-4 .n4-t1 { width: 90%; height: 70px; top: 45%; left: 5%; }
#nivel-4 .inicio { top: 45%; left: 5%; } #nivel-4 .meta { top: 45%; right: 5%; }
#nivel-5 .n5-t1 { width: 90%; height: 70px; top: 5%; left: 5%; }
#nivel-5 .n5-t2 { width: 70px; height: 85%; top: 5%; right: 5%; }
#nivel-5 .n5-t3 { width: 80%; height: 70px; bottom: 15%; right: 5%; }
#nivel-5 .inicio { top: 5%; left: 5%; } #nivel-5 .meta { bottom: 15%; left: 15%; }
#nivel-6 .n6-t1 { width: 30%; height: 70px; bottom: 10%; left: 10%; }
#nivel-6 .n6-t2 { width: 70px; height: 50%; bottom: 10%; left: 35%; }
#nivel-6 .n6-t3 { width: 40%; height: 70px; top: 45%; left: 35%; }
#nivel-6 .n6-t4 { width: 70px; height: 40%; top: 10%; left: 70%; }
#nivel-6 .inicio { bottom: 10%; left: 10%; } #nivel-6 .meta { top: 10%; left: 68%; }
#nivel-7 .n7-t1 { width: 50%; height: 70px; top: 10%; left: 10%; }
#nivel-7 .n7-t2 { width: 70px; height: 60%; top: 10%; left: 55%; }
#nivel-7 .n7-t3 { width: 35%; height: 70px; bottom: 35%; left: 55%; }
#nivel-7 .inicio { top: 10%; left: 10%; } #nivel-7 .meta { bottom: 35%; right: 10%; }
#nivel-8 .n8-t1 { width: 70px; height: 80%; top: 10%; right: 10%; }
#nivel-8 .n8-t2 { width: 70%; height: 70px; bottom: 15%; right: 10%; }
#nivel-8 .n8-t3 { width: 70px; height: 50%; bottom: 15%; left: 20%; }
#nivel-8 .inicio { top: 10%; right: 10%; } #nivel-8 .meta { top: 35%; left: 20%; }
#nivel-9 .n9-t1 { width: 50px; height: 90%; top: 5%; left: 5%; }
#nivel-9 .n9-t2 { width: 90%; height: 50px; bottom: 10%; left: 5%; }
#nivel-9 .n9-t3 { width: 50px; height: 80%; bottom: 10%; right: 10%; }
#nivel-9 .inicio { top: 5%; left: 5%; } #nivel-9 .meta { top: 15%; right: 10%; }
#nivel-10 .n10-t1 { width: 80%; height: 50px; top: 10%; left: 10%; }
#nivel-10 .n10-t2 { width: 50px; height: 80%; top: 10%; right: 15%; }
#nivel-10 .n10-t3 { width: 70%; height: 50px; bottom: 15%; right: 15%; }
#nivel-10 .n10-t4 { width: 50px; height: 50%; bottom: 15%; left: 20%; }
#nivel-10 .inicio { top: 10%; left: 10%; } #nivel-10 .meta { top: 40%; left: 20%; }