/* =====================================================================
   Bingo karta – jedna strana A4.
   Stejné CSS používá náhled v editoru (zmenšený přes transform) i PDF
   (services/bingo/pdf.js), proto jsou rozměry v mm a písmo v pt.
   Písma mají jen řez 400 (public/fonts) – tučné řezy se nesmí používat,
   jinak by se náhled a PDF lišily.
   ===================================================================== */
.bingo-sheet {
    --bingo-accent: #1D6B6E;
    --bingo-text: #173836;
    --bingo-title-font: 'Cinzel';
    --bingo-text-font: 'Open Sans';
    position: relative;
    box-sizing: border-box;
    width: 210mm;
    height: 297mm;
    overflow: hidden;
    background-color: #FFFFFF;
    background-size: cover;
    background-position: center;
    color: var(--bingo-text);
    font-weight: 400;
    letter-spacing: normal;
    text-align: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.bingo-sheet *,
.bingo-sheet *::before,
.bingo-sheet *::after { box-sizing: border-box; }

/* Nadpis a podnadpis: plocha pod ozdobným okrajem šablon (cca 30 mm). Svislý posun
   nadpisu, podnadpisu a mřížky nastavuje editor (--bingo-*-offset). */
.bingo-head {
    position: absolute;
    top: 33mm;
    left: 20mm;
    right: 20mm;
    height: 38mm;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.5mm;
}
.bingo-title,
.bingo-subtitle {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
.bingo-title { position: relative; top: var(--bingo-title-offset, 0mm); height: 25mm; }
.bingo-subtitle { position: relative; top: var(--bingo-subtitle-offset, 0mm); height: 10mm; align-items: flex-start; }
.bingo-title-text,
.bingo-subtitle-text {
    display: block;
    width: 100%;
    line-height: 1.15;
    font-weight: 400;
    hyphens: manual;
}
.bingo-title-text { color: var(--bingo-title-color, var(--bingo-text)); font-family: var(--bingo-title-font), serif; font-size: 30pt; }
.bingo-subtitle-text { color: var(--bingo-subtitle-color, var(--bingo-text)); font-family: var(--bingo-subtitle-font, var(--bingo-text-font)), sans-serif; font-size: 14pt; }

/* Záhlaví nad mřížkou: písmeno nad každým sloupcem (B I N G O), nebo jeden nápis (.is-word). */
.bingo-letters {
    position: absolute;
    top: calc(76mm + var(--bingo-grid-offset, 0mm));
    left: 20mm;
    width: 170mm;
    height: 14mm;
    display: grid;
    grid-template-columns: repeat(var(--bingo-size), 1fr);
    align-items: end;
    color: var(--bingo-header-color, var(--bingo-accent));
    font-family: var(--bingo-header-font, var(--bingo-title-font)), serif;
    font-size: 28pt;
    line-height: 1;
}
.bingo-letters.is-word { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.bingo-header-text { display: block; width: 100%; letter-spacing: 0.08em; white-space: nowrap; }

/* Mřížka: barevné linky jsou mezery mezi bílými políčky. */
.bingo-grid {
    position: absolute;
    top: calc(92mm + var(--bingo-grid-offset, 0mm));
    left: 20mm;
    width: 170mm;
    height: 170mm;
    display: grid;
    grid-template-columns: repeat(var(--bingo-size), minmax(0, 1fr));
    grid-template-rows: repeat(var(--bingo-size), minmax(0, 1fr));
    gap: 0.6mm;
    padding: 0.9mm;
    border-radius: 2.5mm;
    background: var(--bingo-accent);
}
.bingo-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 2.4mm;
    overflow: hidden;
    background: #FFFFFF;
}
.bingo-cell.is-tl { border-top-left-radius: 1.8mm; }
.bingo-cell.is-tr { border-top-right-radius: 1.8mm; }
.bingo-cell.is-bl { border-bottom-left-radius: 1.8mm; }
.bingo-cell.is-br { border-bottom-right-radius: 1.8mm; }
.bingo-cell-text {
    display: block;
    width: 100%;
    font-family: var(--bingo-text-font), sans-serif;
    font-size: 13pt;
    line-height: 1.2;
    hyphens: manual;
    overflow-wrap: normal;
}

/* Volné políčko uprostřed */
.bingo-cell.is-free {
    gap: 1.5mm;
    background: var(--bingo-accent);
    color: #FFFFFF;
}
.bingo-free-icon { display: block; flex: none; height: 9mm; }
.bingo-free-svg { display: block; width: 9mm; height: 9mm; fill: currentColor; }
.bingo-free-text {
    display: block;
    width: 100%;
    font-family: var(--bingo-text-font), sans-serif;
    font-size: 12pt;
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: normal;
}