/* --- ESTILO PARA PANTALLA VERTICAL (MODULO) --- */

body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f0; 
    height: 100vh; /* Ocupar toda la altura de la pantalla */
    width: 100vw;  /* Ocupar todo el ancho */
    overflow: hidden; /* Evita que aparezcan barras de scroll si nos pasamos por 1px */
}

#letters-grid {
    /* Forzamos a que la caja de la grilla sea del tamaño exacto de la ventana */
    width: 100%;
    height: 100%;
    
    display: grid;

    /* 4 Columnas para que las letras sean GIGANTES en vertical */
    grid-template-columns: repeat(4, 1fr);
    
    /* Calculamos filas automáticas que se estiren para llenar el alto */
    grid-auto-rows: 1fr; 

    /* Espacio mínimo entre letras */
    gap: 10px; 
    
    /* Un pequeño margen interno para que no toquen el borde físico de la pantalla */
    padding: 20px; 
    box-sizing: border-box;
}

/* Las celdas ocupan todo el espacio que la grilla les asigne */
.letter-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Por seguridad */
}

/* EL CANVAS SE ADAPTA AL TAMAÑO DE LA CELDA */
.letter-cell canvas {
    /* Esto hace que el canvas crezca hasta tocar los bordes de su celda */
    width: 100% !important;
    height: 100% !important;
    
    /* Mantiene la proporción cuadrada (para no estirar la letra como un chicle) */
    /* Si quieres que se deforme para llenar TODO el hueco, borra la línea de object-fit */
    object-fit: contain; 
    
    /* CRUCIAL: Mantiene los píxeles nítidos al escalar (estética pixel art) */
    image-rendering: pixelated; 
}