/* --- CONFIGURACIÓN GLOBAL Y FONDO A PANTALLA COMPLETA --- */
body {
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    margin: 0;
    padding: 0;
    color: white;
    background-color: #000;
    
    /* Centrado flexible */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    
    /* Evita tirones raros en móviles al hacer scroll */
    overflow: hidden; 
    touch-action: manipulation; 
}

/* --- TEXTOS Y BOTONES (HUD) --- */
.header {
    /* IMPORTANTE: Quitamos absolute y usamos relative para que respete el espacio */
    position: relative;
    z-index: 10;
    
    background-color: rgba(0,0,0,0.8);
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8);
    
    /* Adaptable al ancho */
    width: 90%;
    max-width: 600px;
    margin-bottom: 15px; /* Da un poco de aire antes de que empiece la granja */
}

h1 {
    font-size: 1.5rem; /* Tamaño base un poco más pequeño */
    margin: 0 0 10px 0;
    text-shadow: 2px 2px 0px rgba(0,0,0,1);
}

.score { color: #4caf50; font-weight: bold; }
.lives { color: #ff5252; font-weight: bold; }
.time { color: #ffb300; font-weight: bold; }

button {
    font-size: 1rem;
    padding: 10px 20px;
    cursor: pointer;
    background-color: #bf360c; 
    color: white;
    border: 2px solid #560027;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.2s;
}
button:hover {
    background-color: #d84315;
    transform: scale(1.05);
}

/* --- ÁREA DEL JUEGO RESPONSIVA --- */
#game-area {
    position: relative;
    
    background-image: url('texturas/fondo.png');
    /* 100% 100% OBLIGA a la imagen a estirarse exactamente a la forma del div */
    background-size: 100% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    
    /* Mantenemos siempre la proporción de un monitor normal (16:9) */
    aspect-ratio: 16 / 9; 
    
    /* LA MAGIA DEL RESPONSIVE:
       1. Intenta ocupar el 95% del ancho del móvil... */
    width: 95vw; 
    
    /* 2. ...PERO nunca superará el 65% del alto de la pantalla (dejando hueco al header) */
    max-height: 65vh; 
    
    /* 3. Ajusta el ancho máximo matemáticamente si choca con el tope de altura */
    max-width: calc(65vh * (16 / 9)); 
}

/* --- ADAPTACIÓN ESPECIAL PARA MÓVILES (Media Queries) --- */
/* Cuando la pantalla sea menor de 600px de ancho (móviles verticales) */
/* --- ADAPTACIÓN ESPECIAL PARA MÓVILES (Media Queries) --- */
/* --- ADAPTACIÓN ESPECIAL PARA MÓVILES (Media Queries) --- */
@media (max-width: 600px) {
    /* 1. Ajustes del HUD del juego */
    .header {
        padding: 5px 10px;
        margin-bottom: 5px;
        width: 95%;
    }
    h1 { font-size: 1.1rem; margin: 0 0 5px 0; }
    button { font-size: 0.9rem; padding: 8px 15px; }
    
    /* 2. Ajustes de la Pantalla de Inicio */
    #start-screen {
        background-position: center top; 
    }
    #main-jugar-btn {
        font-size: 1.8rem;
        padding: 12px 35px;
        border-width: 3px;
        margin-top: 40vh; 
        box-shadow: 0 6px 0px #b71c1c, 0 10px 15px rgba(0,0,0,0.5);
    }
    #main-jugar-btn:active {
        transform: translateY(3px);
        box-shadow: 0 3px 0px #b71c1c, 0 5px 10px rgba(0,0,0,0.5);
    }
    
    /* 3. NUEVO: Ajustes Totales del Game Over y Ranking */
    #game-over-screen {
        padding: 15px;
        box-sizing: border-box; /* Evita que el padding sume ancho extra */
    }
    
    #game-over-screen h2 {
        font-size: 2rem; /* Título más pequeño para evitar que se rompa en 2 líneas */
        margin-bottom: 10px;
        text-align: center;
    }
    
    #game-over-screen p {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    /* El input y el botón de guardar se apilan uno encima del otro */
    #save-score-container {
        flex-direction: column; 
        width: 100%;
        max-width: 280px;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    #player-name {
        width: 100%; /* Ocupa todo el espacio de su contenedor */
        box-sizing: border-box;
        font-size: 1.1rem;
        padding: 12px;
    }
    
    /* La tabla de ranking se adapta a la pantalla */
    .ranking-container {
        width: 100%;
        max-width: 320px;
        padding: 15px;
        margin: 10px 0 20px 0;
    }
    
    .ranking-container h3 {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    
    #ranking-list {
        font-size: 1rem; /* Letra un poco más pequeña */
        padding-left: 25px;
    }
    
    #ranking-list li {
        margin-bottom: 5px;
    }
    
    /* Los botones finales se hacen anchos para los "dedos gordos" */
    #save-score-container button,
    #game-over-screen > button {
        width: 100%;
        max-width: 280px;
        font-size: 1.2rem;
        padding: 15px;
    }
}

/* Opcional para móviles muy bajitos en horizontal (landscape) */
@media (max-height: 500px) and (orientation: landscape) {
    #game-over-screen {
        /* Permite hacer scroll si la pantalla es muy bajita */
        overflow-y: auto; 
        justify-content: flex-start;
        padding-top: 20px;
    }
}
/* --- EL AGUJERO DEL ZOMBIE: EL CONTENEDOR INVISIBLE --- */
.hole {
    position: absolute; /* Posicionamiento exacto sobre la imagen */
    width: 10%;          /* Ancho relativo para cubrir el agujero de la imagen */
    height: 18%;         /* Altura relativa */
    
    /* Eliminamos todos los efectos de código antiguos */
    border-radius: 50%;
    background: transparent;
    border: none;
    
    /* Importante para ocultar el zombi que emerge */
    overflow: hidden; 
    
    /* Sombra exterior para dar un poco de relieve, opcional */
   /* box-shadow: inset 0 -4px 6px rgba(0,0,0,0.4); */
}

/* --- POSICIONAMIENTO PRECISO DE CADA AGUJERO (9 Unidades) --- */
/* Estos porcentajes se han calculado para coincidir con los agujeros de tu imagen.
   El espaciado se ensancha en las filas inferiores debido a la perspectiva. */

/* Fila Superior (distante) */
#hole-1 { top: 36%; left: 31%; }
#hole-2 { top: 36%; left: 45%; }
#hole-3 { top: 36%; left: 59%; }

/* Fila Central (media) */
#hole-4 { top: 50%; left: 28%; }
#hole-5 { top: 50%; left: 45%; }
#hole-6 { top: 50%; left: 62%; }

/* Fila Inferior (cercana) */
#hole-7 { top: 66%; left: 25%; }
#hole-8 { top: 66%; left: 45%; }
#hole-9 { top: 66%; left: 65%; }

/* --- EL ZOMBIE 3D --- */
/* --- EL ZOMBIE 3D --- */
.mole {
    width: 100%;
    height: 130%; 
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(110%); 
    transition: transform 0.2s ease-out; 
    cursor: crosshair;
    background-color: transparent;
    --poster-color: transparent;
    
    /* NUEVO PARA MÓVILES: */
    touch-action: none; /* Evita que el navegador intente hacer scroll si deslizas el dedo sobre el zombi */
    -webkit-tap-highlight-color: transparent; /* Elimina el cuadro azul/gris que parpadea al tocar en móviles */
    user-select: none; /* Evita que el móvil intente "seleccionar" el modelo 3D como si fuera texto */
}

/* Al añadir la clase 'up' al agujero, el zombi sale de ese punto específico */
.hole.up .mole {
    /* Ajusta este valor (10% - 20%) para que el zombi salga de dentro del agujero de la imagen */
    transform: translateY(15%); 
}
/* --- TEMPORIZADOR --- */
.time {
    color: #ffb300; /* Color amarillo/naranja para el tiempo */
}

/* --- PANTALLA DE GAME OVER --- */
#game-over-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo muy oscuro */
    z-index: 100; /* Asegura que cubra absolutamente todo */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Clase para ocultar elementos fácilmente */
.hidden {
    display: none !important;
}

#game-over-screen h2 {
    font-size: 4rem;
    color: #ff5252; /* Rojo sangre */
    text-shadow: 4px 4px 0px #000;
    margin-bottom: 10px;
}

#game-over-screen p {
    font-size: 2rem;
    color: white;
    margin-bottom: 30px;
}

#game-over-screen button {
    font-size: 1.5rem;
    padding: 15px 40px;
}
/* --- VIDAS --- */
.lives {
    color: #ff5252; /* Rojo para que se note el peligro */
}
/* --- NUEVA CLASE PARA OCULTAR ELEMENTOS --- */
.hidden {
    display: none !important;
}

/* --- ESTILOS DE LA PANTALLA DE INICIO --- */
/* --- ESTILOS DE LA PANTALLA DE INICIO --- */
#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('texturas/start.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated; 
    
    display: flex;
    flex-direction: column; /* Añadimos esto para poder empujar el botón fácilmente */
    justify-content: center;
    align-items: center; 
    z-index: 200; 
}

/* El botón gigante de "Jugar" */
#main-jugar-btn {
    font-size: 3rem;
    padding: 20px 60px;
    background-color: #ffb300; /* Amarillo/naranja llamativo */
    color: #333;
    border: 5px solid #ffa000;
    border-radius: 15px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 0px #b71c1c, 0 15px 25px rgba(0,0,0,0.5); /* Sombra 3D y drop shadow */
    transition: all 0.1s;
}

#main-jugar-btn:hover {
    background-color: #ffc107;
    transform: translateY(-5px); /* Pequeño salto al pasar el ratón */
}

#main-jugar-btn:active {
    transform: translateY(5px); /* Efecto de pulsar */
    box-shadow: 0 5px 0px #b71c1c, 0 5px 15px rgba(0,0,0,0.5);
}

/* --- ESTILOS DE LA TABLA DE CLASIFICACIÓN (RANKING) --- */
.ranking-container {
    background-color: rgba(0, 0, 0, 0.7);
    border: 3px solid #ffb300;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0 30px 0;
    width: 90%;
    max-width: 400px;
}

.ranking-container h3 {
    color: #ffb300;
    font-size: 1.8rem;
    margin-top: 0;
    text-transform: uppercase;
    border-bottom: 2px solid #ffb300;
    padding-bottom: 10px;
}

#ranking-list {
    text-align: left;
    font-size: 1.4rem;
    padding-left: 20px;
}

#ranking-list li {
    color: white;
    margin-bottom: 8px;
    list-style-type: decimal; /* Muestra 1, 2, 3... */
}

/* Estilo para resaltar tu posición si entras en el ranking */
#ranking-list li.current-score {
    color: #4caf50; /* Verde brillante */
    font-weight: bold;
}
/* --- ESTILOS PARA GUARDAR EL NOMBRE --- */
#save-score-container {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

#player-name {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.2rem;
    padding: 10px;
    border: 2px solid #ffb300;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
    width: 180px;
    outline: none;
}

#player-name::placeholder {
    color: #888;
}

#player-name:focus {
    border-color: #ffc107;
    box-shadow: 0 0 10px #ffb300;
}

#save-score-container button {
    margin: 0; /* Quitamos márgenes extra para que quede alineado con el input */
    padding: 10px 20px;
}