body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.background-container {
    background-image: url('./assets/background.png'); /* Tu imagen original */
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Este contenedor ayuda a centrar las áreas de clic sobre el dibujo */
.hitbox-container {
    position: relative;
    /* Aumentamos el ancho total para que se desplacen hacia los lados */
    width: 460px; 
    height: 100px;
    /* Ajustamos la altura para que bajen justo sobre los botones verdes/azules */
    margin-top: 255px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hitbox {
    /* Hacemos los botones más grandes para que cubran todo el borde pixelado */
    width: 195px;  
    height: 90px;  
    
     
    opacity: 0; /* Mantén esto hasta que veas que encajan perfecto */
    border: none;
    cursor: pointer;
    border-radius: 20px; /* Bordes más redondeados para seguir el dibujo */
}

/* Estilo para cuando ya lo tengas alineado */
.hitbox.final {
    opacity: 0;
}