:root{
    --screen-width: 256px;
    --screen-height: 152px;

    --screen-move-set-width: var(--screen-width);
    --screen-move-set-height: 124px;

    --screen-scale: 2;
}

@font-face {
    font-family: 'Pokefont';
    src: url('../assets/sprites/ui/fonts/neo-power.ttf') format('truetype');
}

body{
    display: flex;              
    justify-content: center;

    image-rendering: pixelated; /* Para que los sprites se vean bien*/
    image-rendering: crisp-edges; 

    font-family: 'Pokefont', sans-serif;
}

.console{
    /*Flex box para colocar las pantallas*/
    display: flex;
    justify-content: center;
    align-items: center;

    margin: calc(7rem * var(--screen-scale));
    flex-direction: column;

    /*Aumenta de tamaño la consola*/
    transform: scale(var(--screen-scale));
}



/*
Contenedores de los canvas, deben de tener a altura y la anchura
de los canvas que los contiene
*/
.game-container{    
    width: var(--screen-width);
    height: var(--screen-height);
}

.game-move-set-container{    
    width: var(--screen-move-set-width);
    height: var(--screen-move-set-height);
}

.moves{
    display: grid;
    grid-template-columns: 50% 50%;  
    grid-template-rows: 50% 50%;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 199;
}

.move-set-canvas{
    height: var(--screen-move-set-height);
}

canvas{
    position: absolute; /* Para superponer los canvases */

    width: var(--screen-width);
    height: var(--screen-height);
}

/*Orden en el index de los canvas para ver que canvas se superpone
encima del otro*/
.background-canvas{
    z-index: -5;
}

.game-canvas,.allay-canvas, .enemy-canvas{
    z-index: 0;
}

.move-set-text-canvas{
    height: var(--screen-move-set-height);
}
/**
Botones
*/
.button-container {
    display: flex;
    gap: 10px; /* Espacio entre los botones */
    padding: 0.5rem;
}

/* Establece el tamaño y aspecto de los botones */
.sprite-button {

    background-size: 100% 100%; /* Asegura que la imagen cubra todo el contenedor */
    background-position: center;
    cursor: pointer;
}

/* Define las imágenes de fondo para cada botón */
#button1 {
    background-image: url('/assets/web/buttons/exit.png');
    width: 40px;
    height: 16px;
}

#button2 {
    background-image: url('/assets/web/buttons/conf.png');
    width: 19px;
    height: 16px;
}

.musicButtonOn {
  background-image: url('/assets/web/buttons/music_on.png');

  width: 25px;
  height: 16px;
}

.musicButtonOff {
    background-image: url('/assets/web/buttons/music_off.png');
  
    width: 25px;
    height: 16px;
}