/* --- CONTENEUR PRINCIPAL DE L'APPLICATION --- */
#app-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- STRUCTURE DU JEU --- */
#game-wrapper {
    display: flex;
    flex-direction: column;
    /* Le ratio est celui du jeu (450x790) + la barre UI (450x220) -> 450x1010 */
    aspect-ratio: 450 / 1010;
    /* On s'assure que le wrapper ne dépasse jamais le viewport pour conserver le ratio */
    max-width: 100vw;
    max-height: 100dvh;
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    background-color: #000;
}

#game-container {
    flex-grow: 1;
    position: relative;
    width: 100%;
    /* Le ratio est maintenu par le canvas lui-même */
}

#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#ui-container {
    width: 100%;
    /* Hauteur proportionnelle: 220px sur une hauteur totale de 1010px */
    height: 21.78%;
    background-color: #2c3e50;
    border-top: 4px solid #1a252f;
    position: relative;
    flex-shrink: 0; /* Empêche le conteneur de rétrécir */
}