/*
 * waves-loader.css — stijl voor de p5.waves tekst-loader
 *
 * Pas per loader aan via CSS-variabelen (inline of in een eigen klasse):
 *   --wl-size   totale afmeting (default 100px)
 *   --wl-scale  tekengrootte t.o.v. de cel, zoals SCALE in de originele sketch (default 1.6)
 *   --wl-color  tekenkleur (default zwart)
 *   --wl-bg     achtergrond (default rgb(245,245,245), zoals background(245))
 *
 * --wl-grid wordt door waves-loader.js gezet op basis van data-grid.
 */
.waves-loader {
    --wl-size: 100px;
    --wl-grid: 4;
    --wl-scale: 1.6;
    --wl-color: rgb(0, 0, 0);
    --wl-bg: rgb(245, 245, 245);

    display: grid;
    /* minmax(0, 1fr): grote glyphs mogen de rijen niet groter duwen dan 1fr */
    grid-template-columns: repeat(var(--wl-grid), minmax(0, 1fr));
    grid-template-rows: repeat(var(--wl-grid), minmax(0, 1fr));
    width: var(--wl-size);
    height: var(--wl-size);
    padding: calc(var(--wl-size) * 0.1);   /* MARGIN uit de originele sketch */
    box-sizing: border-box;
    background: var(--wl-bg);
    color: var(--wl-color);
    font-family: "Courier New", monospace;
    overflow: hidden;
    user-select: none;
}

.waves-loader span {
    display: flex;
    align-items: center;
    justify-content: center;
    /* celgrootte = (size − 2×margin) / grid; teken mag groter zijn dan de cel */
    font-size: calc(var(--wl-size) * 0.8 / var(--wl-grid) * var(--wl-scale));
    line-height: 1;
}