/* Bingo (E114) — ruhig und flach: Haarlinien, ein Akzent, Zahlen tragen den Inhalt. */
.hero-kacheln { display: flex; gap: 8px; justify-content: center; font-size: 26px; font-weight: 800; }
.hero-kacheln span { min-width: 60px; height: 60px; padding: 0 6px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 2px solid var(--accent); color: var(--text); font-variant-numeric: tabular-nums; }

/* Gezogene Zahl: bleibt oben stehen, auch beim Scrollen über mehrere Karten */
.bg-kopf {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px;
    padding: 8px 12px; margin: 0 0 8px; background: var(--bg); border-bottom: 1px solid var(--panel-border);
}
.bg-ball {
    flex: none; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
    border: 3px solid var(--accent); font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.bg-seite { min-width: 0; display: grid; gap: 6px; }
.bg-letzte { display: flex; gap: 6px; flex-wrap: wrap; }
.bg-letzte span {
    min-width: 30px; height: 30px; padding: 0 4px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--panel-border); color: var(--muted); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bg-info { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.bg-alle { margin: 0 0 8px; }
.bg-alle summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 0; }
.bg-uebersicht { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 6px; }
.bg-uebersicht span { text-align: center; padding: 3px 0; border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); opacity: .5; }
.bg-uebersicht span.da { opacity: 1; color: var(--text); border: 1px solid var(--accent); }

.bg-stufen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 0 0 8px; font-size: 13px; }
.bg-stufen span { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--panel-border); color: var(--muted); }
.bg-stufen span.fertig { border-color: var(--accent); color: var(--text); }

.bg-karten { display: grid; gap: 10px; width: min(100%, 560px); margin-inline: auto; }   /* volle Breite: Zellen ≥ 36 px bei 390 px */
.bg-karte {
    display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; padding: 5px;
    border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-border);
    user-select: none; -webkit-user-select: none;
}
.bg-zelle {
    min-height: 40px; padding: 0; display: grid; place-items: center; border-radius: 6px; font: inherit;
    font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text);
    background: rgba(255, 255, 255, .06); border: 1px solid transparent;
}
.bg-zelle.leer { background: transparent; border: 1px dashed var(--panel-border); }
button.bg-zelle { cursor: pointer; }
/* gezogen, aber noch nicht gestrichen: Rand als Hinweis; gestrichen: gefüllt */
.bg-zelle.da { border-color: var(--accent); }
.bg-zelle.weg { background: var(--accent); color: #fff; border-color: var(--accent); }
.bg-karte.fremd { opacity: .85; }

.bg-ruf { margin-top: 12px; text-align: center; }
.bg-rufe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bg-rufe .btn { min-height: 48px; font-size: 17px; }
.bg-sperre { margin: 6px 0 0; min-height: 1.4em; }

.bg-tabelle { display: grid; gap: 6px; margin: 12px 0; text-align: left; }
.bg-zeile { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--panel); }
.bg-zeile span:last-child { color: var(--muted); font-size: 12.5px; }

@media (max-width: 440px) {
    .bg-ball { width: 72px; height: 72px; font-size: 34px; }
    .bg-karte { gap: 2px; padding: 4px; }
    .bg-zelle { font-size: 14px; }
}

/* Am Rechner nicht über die ganze Breite ziehen */
#view-game > .bg-kopf, #view-game > .bg-alle, #view-game > .bg-stufen, #view-game > .bg-karten, #view-game > .bg-ruf { max-width: 640px; margin-left: auto; margin-right: auto; }