/**
 * BINGO — Lehrer-Werkzeug: Aufgabe an der Tafel + druckbare 3×3-Bingo-Felder.
 *
 * Klassen-Präfix `bg-`. Zwei getrennte Welten in dieser Datei:
 *   1. die BILDSCHIRM-Ansicht (`.bg-stage` …) — nur die Aufgabe + die Knöpfe.
 *   2. die PAPIER-Seiten (`.bg-page`/`.bg-card`/`.bg-cell`) — sie stehen NIE
 *      sichtbar auf der Seite, sondern werden beim PDF-Export off-screen im
 *      Klon-Container von `window.PdfExport` gerendert (Klasse `bg-export`).
 *      Deshalb haben sie feste Pixelmaße (A4 quer bei 96 dpi = 1123 × 794).
 */

/* ====================================================================== *
 *  1. Bildschirm — die Tafel-Ansicht
 * ====================================================================== */

.bg-stage {
    min-height: var(--stage-height);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 16px 40px;
}


/* ---- Einrichtung: erst hier wird das Bingo gebaut ----------------------- */
.bg-setup {
    width: min(720px, 100%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 26px 24px 30px;
    border: 1px solid #e4ebf1;
    border-radius: 16px;
    background: #fff;
}
.bg-setup[hidden] { display: none; }

.bg-setup-title {
    margin: 0;
    font-family: var(--ui-font, sans-serif);
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 800;
    color: #2c3e50;
}

.bg-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.bg-field-lbl {
    font-family: var(--ui-font, sans-serif);
    font-weight: 800;
    font-size: clamp(15px, 2vw, 18px);
    color: #2c3e50;
}
.bg-field-hint {
    margin: 0;
    color: #7a8794;
    font-family: var(--ui-font, sans-serif);
    font-size: clamp(12px, 1.6vw, 14px);
}

.bg-opts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Auswahl-Knöpfe: BLAU = nicht gewählt, GRÜN = gewählt. */
.bg-opt {
    font-family: var(--ui-font, sans-serif);
    font-weight: 800;
    font-size: clamp(14px, 1.9vw, 17px);
    border: none;
    border-radius: 12px;
    padding: 11px 20px;
    cursor: pointer;
    color: #fff;
    background: var(--blue-main, #2980b9);
    box-shadow: 0 4px 0 #1c5f88;
    transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}
.bg-opt.is-on { background: #16a085; box-shadow: 0 4px 0 #0e6b59; }
/* Rechenzeichen (+ / −): groß und quadratisch, in der Zahlenschrift. */
.bg-opt-sign {
    font-family: var(--math-font, sans-serif);
    font-size: clamp(22px, 3vw, 28px);
    line-height: 1;
    min-width: 64px;
    padding: 12px 18px;
}
.bg-opt:active { transform: translateY(4px); box-shadow: none; }
.bg-opt:disabled { opacity: 0.4; cursor: default; }

/* ---- Die fertige Tafel-Ansicht ----------------------------------------- */
.bg-play {
    flex: 1 1 auto;          /* füllt die Bühne → der Knopf kommt ganz nach unten */
    align-self: stretch;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.bg-play[hidden] { display: none; }

/* Die MITTE gehört der Aufgabe und dem Haupt-Knopf — sonst nichts.
   🔴 Zwei Reihen: die Aufgabe steht mittig im freien Platz (1fr), der
   Haupt-Knopf sitzt UNTEN am Rand des Fensters. */
.bg-center {
    flex: 1 1 auto;
    width: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    align-items: center;
    gap: 20px;
}

.bg-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Die Aufgabe — der große Star der Seite. Ergebnis steht bewusst NICHT da:
   das rechnen die Kinder und kreuzen es auf ihrem Bogen an. */
.bg-task {
    margin: 0;
    /* 🔴 Feste Spalten: Zahl | Zeichen | Zahl. Die Zahlen sind gleich breit
       (3 Ziffern reichen bis 100) und tabellarisch gesetzt, damit das
       Rechenzeichen beim Wuerfeln exakt an seiner Stelle stehen bleibt. */
    display: inline-grid;
    grid-template-columns: 3ch auto 3ch;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
    /* Vor dem ersten Wuerfeln ist sie leer - die Hoehe bleibt trotzdem stehen,
       damit der Wuerfel-Knopf nicht springt. */
    min-height: 1.05em;
    font-family: var(--math-font, sans-serif);
    font-size: clamp(72px, 17vw, 240px);
    font-weight: 700;
    line-height: 1.05;
    color: #2c3e50;
    letter-spacing: 0.02em;
}

.bg-drawn {
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: center;
    font-family: var(--ui-font, sans-serif);
    font-size: clamp(14px, 1.9vw, 17px);
    color: #5b6b67;
}
.bg-drawn-val { font-family: var(--math-font, sans-serif); font-weight: 700; }

/* Während die Zahlen durchlaufen: etwas blasser, damit klar ist „steht noch
   nicht fest". Die Schrift-Maße bleiben gleich — sonst zappelt das Layout. */
.bg-task-n  { text-align: center; }
.bg-task-op { padding: 0 0.28em; text-align: center; }

.bg-task.bg-rolling { color: #7f8c8d; }

/* ---- Knöpfe -------------------------------------------------------------
   Optik wie in den anderen Werkzeugen (`.ge-btn` der Gruppen-Einteilung).
   🔴 Die Hover-Vergrößerung steht NICHT hier, sondern global im Block
   „GLOBALE HOVER-VERGRÖSSERUNG" in `global/ui/ui.css` (eine Quelle). */
.bg-btn {
    font-family: var(--ui-font, sans-serif);
    font-weight: 800;
    font-size: clamp(15px, 2vw, 18px);
    border: none;
    border-radius: 12px;
    padding: 12px 22px;
    cursor: pointer;
    color: #2c3e50;
    background: #e3eae8;
    box-shadow: 0 4px 0 #c3cecb;
    transition: transform 0.08s, box-shadow 0.08s;
}
.bg-btn:active { transform: translateY(4px); box-shadow: none; }
.bg-btn:disabled { opacity: 0.55; cursor: default; }

/* Der Aufgaben-Knopf ist der Haupt-Knopf der Seite → größer. */
/* Nur das Würfel-Emoji, dafür richtig groß — der Knopf ist von weitem
   erkennbar und braucht keinen Text mehr (die Beschriftung steht in
   `aria-label`/`title`, siehe `showCount()`). */
.bg-btn-draw {
    font-size: clamp(44px, 7vw, 84px);
    line-height: 1;
    padding: 18px 46px;
    border-radius: 22px;
    color: #fff;
    background: #16a085;
    box-shadow: 0 5px 0 #0e6b59;
}
.bg-btn-draw:active { transform: translateY(5px); }

/* Der "Erstellen"-Knopf teilt sich die gruene Optik, bleibt aber klein -
   gross ist nur der Wuerfel-Knopf auf der Tafel. */
.bg-btn-create {
    font-size: clamp(18px, 2.6vw, 24px);
    line-height: 1.2;
    padding: 16px 34px;
    border-radius: 14px;
}

.bg-btn-primary {
    min-width: 15em;   /* Textwechsel "PDF wird erstellt" aendert die Breite nicht */
    color: #fff;
    background: var(--blue-main, #2980b9);
    box-shadow: 0 4px 0 #1c5f88;
}
.bg-btn-quiet { font-size: clamp(13px, 1.7vw, 15px); padding: 10px 16px; }

/* Die Neben-Knöpfe stehen RECHTS untereinander (ab Tablet-Breite); auf schmalen
   Schirmen fallen sie wieder unter die Aufgabe, sonst wird die Mitte erdrückt. */
.bg-out {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

@media (min-width: 900px) {
    .bg-out {
        position: absolute;
        top: 0;
        right: 0;
        /* 🔴 FESTE Breite: sonst wachsen die Knoepfe mit, sobald die Liste
           aufklappt oder ein Knopf-Text laenger wird (PDF wird erstellt). */
        width: clamp(240px, 22vw, 300px);
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
    }
    .bg-out .bg-btn { width: 100%; text-align: center; }
    /* Der Zähler steht als erste Zeile ÜBER den Knöpfen. */
    .bg-out .bg-drawn { justify-content: flex-end; }
    /* Die Liste ist so breit wie die Knopf-Spalte - nie breiter. */
    .bg-out .bg-list { width: 100%; max-width: 100%; }

    /* Klappt die obere Leiste ein (Vollbild-Automatik oder Pfeil oben-mittig,
       `html.header-collapsed`), rückt die rechte Spalte — Zähler „Gezogen",
       Knopf und das aufgeklappte Fenster „Gezogene Aufgaben" — MIT nach oben,
       genau wie die freistehenden Seiten-Knöpfe links (.side-btn, ui.css).
       Der Body behält global sein padding-top, deshalb hier per transform um
       die Leistenhöhe verschieben. Gleiche Dauer/Kurve wie Leiste und
       Seiten-Knöpfe (.25s ease), damit alles zusammen wandert. */
    .bg-out { transition: transform .25s ease; }
    html.header-collapsed .bg-out {
        transform: translateY(calc(-1 * var(--header-height)));
        /* 🔴 Oben liegt der unsichtbare Hover-Streifen `#fs-header-hotzone`
           (fix, volle Breite, Höhe = Leistenhöhe, z-index 999), der die Leiste
           wieder ausfährt. Ohne diese Zeile deckt er die hochgerückte Spalte ab
           und frisst die Klicks auf ihrem oberen Teil („Gezogene Aufgaben" war
           nur unten klickbar). Gleiche Lösung wie bei den Seiten-Knöpfen links
           (.side-btn, ui.css): eingeklappt ÜBER den Streifen heben. */
        z-index: 1001;
    }
}

.bg-count-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ui-font, sans-serif);
    font-weight: 800;
    font-size: clamp(15px, 2vw, 18px);
    color: #2c3e50;
}

.bg-count {
    width: 84px;
    padding: 10px 12px;
    border: 2px solid #c3cecb;
    border-radius: 12px;
    background: #fff;
    font-family: var(--math-font, sans-serif);
    font-size: clamp(17px, 2.2vw, 21px);
    font-weight: 800;
    color: #2c3e50;
    text-align: center;
}
.bg-count:focus { outline: none; border-color: #16a085; }

/* ---- Liste der gezogenen Aufgaben (Lösungshilfe) ------------------------ */
.bg-list {
    /* Steht direkt UNTER dem Knopf „Gezogene Aufgaben" in der rechten Spalte,
       darum keine feste Breite mehr, sondern die Spaltenbreite (max. 320 px).
       Wird die Liste lang, scrollt sie in sich statt die Seite zu strecken. */
    width: 100%;
    max-width: 320px;
    max-height: 46vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid #e4ebf1;
    border-radius: 12px;
    background: #fff;
    font-family: var(--ui-font, sans-serif);
    color: #2c3e50;
}
.bg-list[hidden] { display: none; }

.bg-list-title { margin: 0 0 10px; font-size: clamp(17px, 2.2vw, 20px); }
/* EINE Spalte, untereinander. Die Nummern „1." „2." … stehen exakt bündig:
   eigener Zähler mit fester Breite statt der Zahlen des Browsers. */
.bg-list-items {
    list-style: none;
    counter-reset: bg-nr;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.bg-list-item {
    counter-increment: bg-nr;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--math-font, sans-serif);
    font-size: clamp(16px, 2vw, 19px);
    font-weight: 700;
}
.bg-list-item::before {
    content: counter(bg-nr) ".";
    flex: 0 0 2.4em;
    text-align: right;
    color: #7a8794;
    font-weight: 700;
}
/* Das Ergebnis in Rot — beim Prüfen sofort zu sehen. */
.bg-list-res { color: #e74c3c; }
.bg-list-empty {
    margin: 0;
    padding: 14px;
    border: 2px dashed #d7e2ea;
    border-radius: 10px;
    text-align: center;
    color: #7a8794;
}

/* ====================================================================== *
 *  2. Papier — die A4-Seiten (quer), nur im PDF-Export sichtbar
 * ====================================================================== */

.bg-page {
    width: 1123px;   /* A4 quer bei 96 dpi — muss zu PAGE_W/PAGE_H in bingo.js passen */
    height: 794px;
    box-sizing: border-box;
    padding: 38px;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
}

.bg-card {
    box-sizing: border-box;
    border: 3px solid #2c3e50;
    border-radius: 14px;
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bg-card-title {
    margin: 0;
    text-align: center;
    font-family: var(--ui-font, sans-serif);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 6px;
    color: #2c3e50;
    text-transform: uppercase;
}

/* Das Raster richtet sich nach der gewählten Feldgröße (`--bg-n` setzt
   `buildPages()` je Karte: 3, 4 oder 5). */
.bg-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--bg-n, 3), 1fr);
    grid-template-rows: repeat(var(--bg-n, 3), 1fr);
    gap: 6px;
}

.bg-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #2c3e50;
    border-radius: 10px;
    font-family: var(--math-font, sans-serif);
    font-size: 46px;
    font-weight: 700;
    color: #2c3e50;
}
/* Mehr Zellen → kleinere Zahlen, damit das Feld gleich groß bleibt. */
.bg-card[style*="--bg-n: 4"] .bg-cell { font-size: 34px; border-radius: 8px; }
.bg-card[style*="--bg-n: 5"] .bg-cell { font-size: 26px; border-radius: 8px; border-width: 2px; }

/* ---- Hinweis: Felder teilen sich ihre Zahlen ---------------------------- */
/* Erscheint nur, wenn der Zahlenraum nicht genug verschiedene Auswahlen für
   die gewünschte Anzahl Felder hergibt (z. B. 3×3 aus 0–10 = 55 Stück). */
.bg-dup-hint {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #f2d9a8;
    border-radius: 10px;
    background: #fff8e8;
    color: #8a6d3b;
    font-family: var(--ui-font, sans-serif);
    font-size: clamp(12px, 1.6vw, 14px);
    line-height: 1.35;
}
.bg-dup-hint[hidden] { display: none; }

/* ---- Volle Felder (alle ihre Zahlen wurden gezogen) --------------------- */
/* Stehen OBEN in der Lösungshilfe — beim Klick auf „Gezogene Aufgaben" sieht
   die Lehrkraft sofort, welcher Bogen durch ist. */
.bg-full {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #bfe6cf;
    border-radius: 10px;
    background: #f2fbf5;
}
.bg-full[hidden] { display: none; }

.bg-full-title {
    margin: 0 0 8px;
    font-family: var(--ui-font, sans-serif);
    font-size: clamp(14px, 1.9vw, 16px);
    font-weight: 800;
    color: #1e8449;
}
.bg-full-card { margin-bottom: 10px; }
.bg-full-card:last-child { margin-bottom: 0; }

.bg-full-nr {
    display: block;
    margin-bottom: 4px;
    font-family: var(--ui-font, sans-serif);
    font-size: clamp(12px, 1.6vw, 14px);
    font-weight: 700;
    color: #2c3e50;
}
.bg-full-grid {
    display: grid;
    grid-template-columns: repeat(var(--bg-n, 3), 1fr);
    gap: 3px;
}
.bg-full-cell {
    padding: 3px 0;
    border: 1px solid #bfe6cf;
    border-radius: 6px;
    background: #fff;
    text-align: center;
    font-family: var(--math-font, sans-serif);
    font-size: clamp(11px, 1.5vw, 14px);
    font-weight: 700;
    color: #2c3e50;
}