html {
    height: 100%;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #1a0f2e;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /* Configuración principal del layout */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Usa vh para asegurar que ocupe toda la altura de la pantalla */
}

/* Encabezado y Pie de Página */
.game-header, .game-footer {
    width: 100%;
    text-align: center;
    background-color: #1a0f2e;
    padding: 20px 0;
    flex-shrink: 0; /* Evita que el header y footer se encojan */
    box-sizing: border-box;
}

.game-title-text {
    font-size: 3em;
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.game-footer {
    border-top: 1px solid #440088;
}

/* Contenedor Principal (donde va el juego y los anuncios) */
.game-layout {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* Centra verticalmente en desktop */
    flex-grow: 1; /* <-- CLAVE: Hace que esta sección crezca para ocupar el espacio sobrante */
    padding: 20px; /* Añade un poco de aire alrededor */
    box-sizing: border-box;
}

/* Contenedor del Juego (Wrapper del Iframe) */
.game-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
    /* max-width: 1058px;  Define el ancho máximo del contenedor */
    /* No es necesario definir height aquí, deja que el iframe lo determine */
}

/* Iframe del Juego */
#gameFrame {
    width: 100%;
    max-width: 1038px; /* Mueve el max-width aquí */
    height: 100%;
    max-height: 629px;
    aspect-ratio: 1024 / 576; /* Esto calculará la altura automáticamente */
    border: 2px solid #00ffff;
    background-color: #000;
    
    overflow: hidden;
}

/* Banners de Anuncios */
.ad-banner {
    width: 160px;
    height: 600px;
    background-color: #000;
    border: 1px solid #6600ff;
    margin: 0 15px;
    flex-shrink: 0; /* Evita que los anuncios se encojan */
    display: flex; /* Asegura que los banners se muestren por defecto */
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 0.9em;
    text-align: center;
    box-sizing: border-box;
}

/* Mensaje para dispositivos móviles - OCULTO POR DEFECTO */
.mobile-only-message {
    display: none; /* Oculto por defecto en escritorio */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    max-width: 90%;
    margin: 20px auto;
    background-color: #2a1f3e; /* Un tono un poco más claro que el fondo */
    border: 2px solid #00ffff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.mobile-only-message .message-text {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #e0e0e0;
}

.mobile-only-message .playstore-button {
    display: inline-block;
    margin-top: 10px;
}

.mobile-only-message .playstore-badge {
    max-width: 200px; /* Ajusta el tamaño de la insignia */
    height: auto;
}

/* Estilos para la sección de compartir */
.share-section {
    width: 100%;
    text-align: center;
    padding: 20px;
    margin-top: 20px; /* Espacio arriba */
    box-sizing: border-box;
}

.share-button {
    background-color: #6600ff; /* Color neón morado */
    color: #fff;
    border: 2px solid #00ffff; /* Borde neón cian */
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5); /* Sombra neón */
    margin-left: 150px;
}

.share-button:hover {
    background-color: #00ffff; /* Cambia a cian al pasar el ratón */
    color: #1a0f2e; /* Texto oscuro */
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

.copy-confirm {
    margin-left: 15px;
    color: #00ff00; /* Color de confirmación verde neón */
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Sección de donaciones */
.donation-section {
    width: 100%;
    text-align: center;
    padding: 20px;
    margin-top: 20px; /* Espacio arriba */
    box-sizing: border-box;
    border-top: 1px solid #440088; /* Separador similar al footer */
    background-color: #1a0f2e; /* Color de fondo similar al header/footer */
}

.donation-text {
    font-size: 1.2em;
    color: #00ffff; /* Color neón cian para el texto */
    margin-bottom: 15px;
    text-shadow: 0 0 8px #00ffff; /* Pequeña sombra neón */
}

.donation-section form {
    display: inline-block; /* Para centrar el formulario si es necesario */
    margin: 0 auto;
    margin-left:-125px;
}

/* Puedes añadir más estilos si quieres customizar el botón de PayPal si usas una imagen propia o un estilo diferente */
/* Por ejemplo, si el botón de PayPal es una imagen y quieres que tenga un borde neón: */
.donation-section form input[type="image"] {
    border: 2px solid #6600ff; /* Borde neón morado */
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 0 10px rgba(102, 0, 255, 0.5);
}

.donation-section form input[type="image"]:hover {
    box-shadow: 0 0 20px rgba(102, 0, 255, 0.8);
}

/* ---- Media Queries para Responsividad ---- */

/* Oculta los banners laterales en pantallas más pequeñas que 1400px */
@media (max-width: 1400px) {
    .ad-banner {
        display: none;
    }
}

/* Para tablets y móviles (breakpoint 1024px) */
@media (max-width: 1024px) {
    .game-layout {
        flex-direction: column; /* Apila los elementos */
        align-items: center; /* Centra los elementos apilados */
        padding: 15px;
    }

    /* Oculta el juego de escritorio y muestra el mensaje móvil */
    .desktop-only {
        display: none; /* Oculta el iframe del juego en móviles */
    }

    .mobile-only-message {
        display: flex; /* Muestra el mensaje móvil */
    }

    .game-container-wrapper {
        margin: 0; /* Quita márgenes horizontales */
        width: 100%; /* El juego ocupa todo el ancho disponible */
        max-width: none; /* Elimina el límite de ancho para adaptarse */
    }

    /* El iframe del juego ya no se mostrará, así que estas reglas son menos críticas,
       pero se mantienen para consistencia si se cambiara la lógica. */
    #gameFrame {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    /* Ajustes para el botón de compartir en móvil */
    .share-section {
        margin-top: 30px; /* Más espacio en móvil para separar del mensaje */
        padding: 10px;
    }
    .share-button {
        padding: 10px 20px;
        margin-left: -10px; /* Ajusta el margen para centrar mejor en móviles */
        font-size: 1em;
    }
    .copy-confirm {
        display: block; /* En móvil, el mensaje puede ir debajo */
        margin-top: 10px;
        margin-left: 0;
    }
}

/* Ajustes finos para móviles pequeños */
@media (max-width: 600px) {
    .game-header {
        padding: 10px 0;
    }

    .game-title-text {
        font-size: 2em;
    }

    .mobile-only-message {
        padding: 15px;
    }
    .mobile-only-message .message-text {
        font-size: 1em;
    }
    .mobile-only-message .playstore-badge {
        max-width: 150px;
    }
    .donation-text {
        font-size: 1em; /* Reduce el tamaño del texto en móviles pequeños */
    }
}