/**{
padding: 0;
margin:0;
}*/

.game-container {
    width: 920px;
    height: 280px;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 3%;
    position: relative;
    background: url(../img/game/fondo1.png) no-repeat center center / cover; /* Asegura un fondo inicial */
    overflow: hidden;
    border:4px solid #37bcf9;
    border-radius: 5px;

    /* --- Propiedad para la transición suave del fondo --- */
    transition: background-image 1s ease-in-out;
}

/* --- ESTILOS DEL BOTÓN DE ACCIÓN (INICIAR/SALTAR) --- */

#gameActionButton {
    position: absolute;
    /* Posicionamiento del botón INICIAR (estado inicial) en la parte inferior centrada */
    top: auto;
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal */
    
    z-index: 20; /* Debe estar por encima de game-message (z-index: 10) */
    
    /* Estilos del botón INICIAR (grande y verde) */
    padding: 18px 40px;
    font-size: 24px;
    font-family: Verdana, sans-serif;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease-in-out;
    font-weight: bold;
    text-transform: uppercase;
}

#gameActionButton:hover {
    filter: brightness(1.1);
}

#gameActionButton:active {
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    /* Ajustado para solo moverlo en X y escalar */
    transform: translateX(-50%) scale(0.98); 
}

/* Estilos para el modo de juego (botón SALTAR) */
#gameActionButton.running-mode {
    /* Reposicionamiento para la esquina inferior DERECHA */
    top: auto;
    bottom: 10px; 
    left: auto; /* Desactivamos 'left' para usar 'right' */
    right: 10px; /* NUEVA POSICIÓN: 10px desde la derecha */
    transform: none; /* Deshace el centrado inicial */
    
    /* Estilos del botón SALTAR (pequeño y azul) */
    padding: 10px 15px;
    font-size: 16px;
    width: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#gameActionButton.running-mode:active {
    transform: scale(0.98);
}
/* --- FIN ESTILOS DEL BOTÓN DE ACCIÓN --- */


/* Las clases mediodia, tarde, noche se añadirán por JS */
.mediodia {
    background: url(../img/game/fondo2.png) no-repeat center center / cover;
}

.tarde {
    background: url(../img/game/fondo3.png) no-repeat center center / cover;
}

.noche {
    background: url(../img/game/fondo1.png) no-repeat center center / cover; /* Vuelve al fondo original o a otro de noche */
}

.skate{
    width: 84px;
    height: 84px;
    position: absolute;
    bottom: 22px;
    left: 42px;
    z-index: 2;
    background: url(../img/game/skate.png) repeat-x 0px 0px;
    background-size: 336px 84px;
    background-position-x:0px;
}

.skate-patinando{
    animation: animarSkate 0.25s steps(2) infinite;
}

.skate-chocado{
    background-position-x: -252px;
}

.suelo{
    width: 200%;
    height: 42px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../img/game/suelo_marte.png) repeat-x 0px 0px;
    background-size: 50% 42px;
}

.score{
    width: 100px;
    height: 30px;
    position: absolute;
    top: 5px;
    right: 15px;
    z-index: 10;
    color: #D48872;
    font-family: Vernada;
    font-size: 30px;
    font-weight: bold;
    text-align: right;
}

/* --- ESTILOS PARA LOS OBSTÁCULOS Y NAVES --- */

.alien{
    width: 46px; /* Ancho del alien individual */
    height: 96px; /* Alto del alien individual */
    position:absolute;
    bottom: 16px; /* Posición desde el suelo para el alien */
    /* left se establecerá por JS */
    z-index: 1;
    background: url(../img/game/alien.png) no-repeat;
    background-size: 100% 100%; /* Para asegurar que la imagen cubra el div */
}

.aliens{
    width: 98px; /* Ancho del grupo de aliens */
    height: 66px; /* Alto del grupo de aliens */
    position:absolute; /* Asegura que se pueda posicionar con bottom */
    bottom: 16px; /* Posición desde el suelo para el grupo de aliens */
    /* left se establecerá por JS */
    z-index: 1;
    background: url(../img/game/aliens.png) no-repeat;
    background-size: 100% 100%; /* Para asegurar que la imagen cubra el div */
}

.nave{
    width: 92px; /* Ancho de la nave */
    height: 26px; /* Alto de la nave */
    position: absolute;
    /* bottom y left se establecerán por JS para posicionarla en el cielo */
    z-index: 0;
    background: url(../img/game/nave.png) no-repeat;
    background-size: 100% 100%; /* Para asegurar que la imagen cubra el div */
}
/* --- FIN ESTILOS OBSTÁCULOS Y NAVES --- */


.game-over{
    display: none;
    position: absolute;
    width: 100%;
    text-align: center;
    color: #7e928b;
    font-size: 30px;
    font-family: Verdana;
    font-weight: 700;
}

.game-message{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-family: Verdana;
    color: #ffffff;
    z-index: 10;
    text-align: center;
    /* Para que no interfiera con el botón al inicio */
    padding-top: 50px; 
}


@keyframes animarSkate{
    from{
        background-position-x: -84px;
    }
    to{
        background-position-x:-252px;
    }
}

/* Estilos para el contenedor principal de toda la página */
.site-container {
    display: flex; /* Permite una distribución flexible de los elementos hijos */
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente */
    width: 100%;
    margin-bottom: 20px; /* Espacio entre el contenedor principal y el inferior */
}

/* Estilos para pantallas grandes (escritorio/laptop) */
.bottom-ad {
    text-align: center; /* Centra el contenedor completo */
    margin-top: 20px;
}

.bottom-ad a {
    /* Define un ancho fijo para las imágenes en escritorio si lo deseas */
    display: inline-block; /* Permite controlar el margen y tamaño de los enlaces */
    width: 250px; /* Ejemplo de ancho para cada imagen en escritorio */
    margin: 0 10px; /* Espacio entre las imágenes */
}

.bottom-ad img {
    width: 100%; /* La imagen ocupará el 100% de su contenedor (el enlace) */
    height: auto;
    display: block;
}