/* Estilos específicos para el juego de Tetris */

/* El canvas donde se dibuja el juego */
#tetris-board {
    background-color: #111; /* Un fondo oscuro para el tablero */
    border: 4px solid #FFF;
    display: block;
    margin: 20px auto;
}

/* Contenedor de la puntuación */
.score-container {
    font-size: 1.5rem;
    color: #FFFF00; /* Amarillo, como en los arcades */
    margin-top: 10px;
}

#game-over-msg-tetris {
    font-size: 2rem;
    color: #FF0000;
    margin-top: 20px;
    /* (Se mostrará vía JavaScript) */
}
/* --- ESTILOS RESPONSIVOS PARA TETRIS --- */

/* Hacemos el canvas de Tetris flexible */
#tetris-board {
    width: 100%; /* Que ocupe todo el ancho de su contenedor */
    max-width: 200px; /* Pero que no crezca más de 200px */
    height: auto;     /* Mantiene la proporción alto/ancho */
}

/* En pantallas muy chicas, ajustamos el texto */
@media (max-width: 680px) {
    .score-container {
        font-size: 1.2rem;
    }
}