/* PASO 1: IMPORTAR FUENTE DE PÍXELES */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* --- Estilos Globales --- */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Press Start 2P', monospace;
    background-color: #f7f7f7;
    margin: 20px 0;
    padding: 0;
    cursor: default;
    box-sizing: border-box;
}

/* Oculta cursor */
body, #game-container {
    cursor: none;
}

/* ⭐ Título RETRO */
#main-title {
    font-size: 2em;
    color: #CC0000;
    text-align: center;
    letter-spacing: 5px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 600px;
}

/* ⭐ Contenedor del Juego (Proporción 20:9) */
#game-container {
    width: 100%;
    max-width: 600px;

    /* Mantener proporción perfecta */
    aspect-ratio: 20 / 9;

    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #F4D09C;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* Ajustar ancho en móviles */
@media (max-width: 600px) {
    #game-container {
        width: 95vw;
    }
}

/* Mosquitos */
.mosquito {
    width: 40px;
    height: 40px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('images/mosquito_volando.png');
}
.mosquito.landed { background-image: url('images/mosquito_aterrizado.png'); }
.mosquito.bitten { background-image: url('images/mosquito_picando.png'); }
.mosquito.smashed { background-image: url('images/mosquito_aplastado.png'); }

/* Paleta del jugador */
#paleta {
    width: 50px;
    height: 50px;
    background-image: url('images/paleta_retro.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 100;
    pointer-events: none;
    display: none;
}

/* ⭐ Panel de información */
#info-panel {
    width: 100%;
    max-width: 600px;
    margin-top: 20px;
    padding: 15px 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

/* Grid de stats */
#stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
}

/* Botones */
#button-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#info-panel button, #donate-button {
    padding: 10px 15px;
    border-radius: 4px;
    border: none;
    font-size: 0.7em;
    cursor: pointer;
    font-family: 'Press Start 2P', monospace;
}

#info-panel button {
    background: #CC0000;
    color: white;
}
#info-panel button:hover { background: #990000; }

#donate-button {
    background: #0070BA;
    color: white;
}
#donate-button:hover { background: #00457C; }


/* ⭐ MÓVIL VERTICAL */
@media (max-width: 600px) {
    #main-title { font-size: 1.5em; }

    #info-panel {
        flex-direction: column;
        gap: 20px;
    }

    #button-stack {
        flex-direction: row;
        justify-content: center;
    }
}


/* ⭐ MÓVIL HORIZONTAL */
/* Aquí es donde más he corregido y optimizado */
@media (orientation: landscape) and (max-height: 500px) {

    #main-title { display: none; }

    body {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100vh;
        padding: 10px;
        overflow: hidden;
    }

    #game-container {
        height: 90vh;
        width: calc(90vh * (20/9)); /* Proporción real */
        max-width: 70vw;
    }

    #info-panel {
        height: 90vh;
        max-width: 30vw;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        font-size: 0.8em;
    }

    #stats-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        text-align: center;
    }

    #button-stack {
        flex-direction: column;
    }
}