* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita las barras de desplazamiento */
    background: black; /* Fondo negro para el cuerpo */
    display: flex;
    justify-content: center;
    align-items: center;
}

#game-container {
    display: flex !important; /* Asegura que flexbox se aplique */
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important; /* Ocupar todo el ancho del viewport */
    height: 100vh !important; /* Ocupar toda la altura del viewport */
    position: absolute; /* Para fullscreenTarget */
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Evitar barras de scroll en el contenedor */
}

/* Ocultar elementos no deseados dentro del contenedor del juego que no sean el canvas */
/* Esto puede ser útil si Phaser genera elementos DOM adicionales que no quieres ver */
#game-container > *:not(canvas) {
    display: none !important;
}

canvas {
    margin: auto !important; /* Centrar el canvas */
    max-width: 100vw !important; /* Asegurar que no exceda el ancho de la ventana */
    max-height: 100vh !important; /* Asegurar que no exceda la altura de la ventana */
    object-fit: contain !important; /* Escalar manteniendo la relación de aspecto */
}