/* ==========================================================================
   SpellTo — Tafel-Visualisierung (Gruppe → Element, Richtung & Farbe)
   Beide Schritte teilen dasselbe Raster: Schritt 1 = Gruppen, Schritt 2 = Elemente
   an derselben Richtungs-Position (zweimal die gleichen 6 Richtungen).
   ========================================================================== */
.bb-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: var(--space-3); gap: var(--space-3); }

/* Textzeile (Dual-Display: dauerhaft sichtbar) */
.bb-textbar {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); min-height: 64px;
}
.bb-text {
  flex: 1; font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--font-bold);
  color: var(--color-text); white-space: pre-wrap; word-break: break-word; min-height: 1.4em;
  text-align: center;
}
.bb-text .bb-caret { color: var(--color-primary); animation: bb-blink 1s step-start infinite; }
@keyframes bb-blink { 50% { opacity: 0; } }
.bb-textbar__actions { display: flex; gap: var(--space-1); }
/* „Mitte"-Position: Mitteilung lebt im Hub → obere Leiste zeigt nur die
   Aktionsknöpfe (kompakt, rechtsbündig), kein doppeltes Textfeld. */
.bb-textbar--actions { min-height: 0; padding: var(--space-1) var(--space-2); justify-content: flex-end; }
/* Status der Kamera-Steuerung (Toolbar-Chip): Lädt / Kein Gesicht / Fehler.
   Bereit/aktiv = ausgeblendet (läuft ja). */
.bb-track-status { font-size: var(--text-sm); font-weight: var(--font-bold); padding: 4px 12px; border-radius: var(--radius-full); white-space: nowrap; }
.bb-track-status.is-hidden, .bb-track-status:empty { display: none; }
.bb-track-status.is-loading { background: var(--color-primary-bg, #e7efff); color: var(--color-primary-dark, #1e40af); }
.bb-track-status.is-noface { background: #fef3c7; color: #92400e; }
.bb-track-status.is-error { background: #fee2e2; color: #991b1b; }
.bb-iconbtn {
  width: 48px; height: 48px; border-radius: var(--radius-md); border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary);
  background: var(--color-surface-alt);
}
.bb-iconbtn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.bb-iconbtn svg { width: 24px; height: 24px; }

/* Wortvorhersage-Leiste */
.bb-predict { display: flex; gap: var(--space-2); flex-wrap: wrap; min-height: 0; }
.bb-predict:empty { display: none; }
.bb-predict__btn {
  padding: 8px 16px; border-radius: var(--radius-full); border: 2px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-headline); font-weight: var(--font-bold); font-size: var(--text-base);
  min-height: 44px; display: inline-flex; align-items: center;   /* a11y 2.5.5: Zielgröße */
}
.bb-predict__btn:hover { border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.bb-predict__btn:active { transform: scale(0.97); }

/* Status / Breadcrumb */
.bb-status { display: flex; align-items: center; gap: var(--space-2); min-height: 26px; font-size: var(--text-sm); color: var(--color-text-muted); }
.bb-status b { color: var(--color-primary-dark); }

/* Raster */
.bb-stage { flex: 1; display: flex; min-height: 0; }
.bb-board { display: grid; gap: clamp(6px, 1.2vw, 14px); flex: 1; min-height: 0; width: 100%; }

/* Zell-Basis (Gruppe & Element) */
.bb-group, .bb-cell, .bb-center {
  position: relative; border: 2px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: var(--space-2);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  overflow: hidden; text-align: center;
}
.bb-group:hover, .bb-cell:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.bb-group:active, .bb-cell:active { transform: scale(0.98); }

.bb-pos { position: absolute; top: 6px; left: 8px; font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--font-bold); text-transform: uppercase; letter-spacing: .05em; }
/* Sichtbarer Gruppenrahmen (Feedback: „Rahmen kaum zu erkennen") + farbige
   Positions-Marke je Block. --g-col wird in tafel.js gesetzt (helle Farben
   abgedunkelt → sichtbarer Rand + lesbare weiße Schrift auf der Marke). */
.bb-group { border-width: 3px; border-color: var(--color-border-strong); padding-top: 26px; }
.bb-group.has-gcol { border-width: 5px; border-color: var(--g-col, var(--color-border-strong)); }
.bb-group.has-gcol .bb-pos {
  top: 0; left: 0; padding: 3px 10px; color: #fff;
  background: var(--g-col, var(--color-text-muted)); border-radius: 0 0 var(--radius-md) 0;
}
/* Vorschau als 3-Spalten-Raster → zwei Reihen (i0 i1 i2 / i3 i4 i5 = OL OM OR / UL UM UR),
   genau wie die Element-Anordnung in Schritt 2. */
.bb-group .bb-mini {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 5vh, 48px) clamp(8px, 2vw, 24px);
  align-content: center; align-items: center; justify-items: center;
  width: 100%; flex: 1; margin-top: 4px;
}
.bb-group .bb-mini span {
  font-family: var(--font-headline); font-size: clamp(1.1rem, min(4.6vw, 9.5vh), 3.6rem); font-weight: var(--font-bold);
  color: var(--color-text); line-height: 1; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: clip;
}
.bb-group .bb-mini span.is-fn { color: var(--color-text-muted); font-size: clamp(.7rem, min(2.2vw, 4.6vh), 1.5rem); }
/* Farbige Buchstaben-Chips (Farbkodierung je Buchstabe) */
.bb-group .bb-mini span.bb-chip { padding: 1px 7px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
/* Mehrbuchstaben-Chips (CH, SCH, X/ß …): nicht umbrechen, passende Schriftgröße */
.bb-group .bb-mini span.is-len2 { white-space: nowrap; font-size: clamp(.8rem, min(3vw, 6vh), 2.2rem); }
.bb-group .bb-mini span.is-len3 { white-space: nowrap; font-size: clamp(.62rem, min(2.3vw, 4.6vh), 1.7rem); }

/* aktive / gedimmte Gruppe (Schritt 2) */
.bb-group.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-bg), var(--shadow-md); }
.bb-group.is-dim { opacity: .3; pointer-events: none; }

/* Element-Zellen (Schritt 2, Richtungs-Encoding) */
.bb-cell .bb-char { font-family: var(--font-headline); font-weight: var(--font-bold); font-size: clamp(2rem, 7vw, 4.5rem); line-height: 1; color: var(--color-text); }
.bb-cell.is-fn { background: var(--color-surface-alt); }
.bb-cell.is-fn .bb-char { font-size: clamp(1.2rem, 4vw, 2.2rem); color: var(--color-text-secondary); }
/* Mehrbuchstaben-Felder (CH, SCH, X/ß …): kein Umbruch, kleinere Schrift */
.bb-cell .bb-char.is-len2 { white-space: nowrap; font-size: clamp(1.4rem, 4.6vw, 3rem); }
.bb-cell .bb-char.is-len3 { white-space: nowrap; font-size: clamp(1rem, 3.3vw, 2.1rem); }
.bb-cell .bb-colourname { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; text-transform: capitalize; }

/* Farb-Encoding: kräftiger Farbrahmen + Farbfläche (Redundanz zur Farbe).
   a11y (WCAG 1.4.11): Ränder nutzen die -bd-Varianten — reines Gelb/Orange wären
   als Rahmen unsichtbar (Gelb 1,1:1). Farbnamen-Text ebenfalls ≥4,5:1. */
.bb-cell[data-colour] { border-width: 5px; }
.bb-cell[data-colour="0"] { border-color: var(--bb-c0-bd); } .bb-cell[data-colour="0"] .bb-colourname { color: var(--bb-c0-bd); }
.bb-cell[data-colour="1"] { border-color: var(--bb-c1-bd); } .bb-cell[data-colour="1"] .bb-colourname { color: var(--bb-c1-bd); }
.bb-cell[data-colour="2"] { border-color: var(--bb-c2-bd); } .bb-cell[data-colour="2"] .bb-colourname { color: var(--bb-c2-bd); }
.bb-cell[data-colour="3"] { border-color: var(--bb-c3-bd); } .bb-cell[data-colour="3"] .bb-colourname { color: var(--bb-c3-bd); }
.bb-cell[data-colour="4"] { border-color: var(--bb-c4-bd); } .bb-cell[data-colour="4"] .bb-colourname { color: var(--bb-c4-bd); }
.bb-cell[data-colour="5"] { border-color: var(--bb-c5-bd); } .bb-cell[data-colour="5"] .bb-colourname { color: var(--bb-c5-bd); }

/* Mini-Buchstaben farbig (Farb-Encoding, Schritt 1 Vorschau).
   a11y: -bd-Varianten als TEXTFARBE (≥4,5:1); reines Gelb/Orange wäre auf Weiß zu hell. */
.bb-group .bb-mini span[data-colour="0"] { color: var(--bb-c0-bd); } .bb-group .bb-mini span[data-colour="1"] { color: var(--bb-c1-bd); }
.bb-group .bb-mini span[data-colour="2"] { color: var(--bb-c2-bd); } .bb-group .bb-mini span[data-colour="3"] { color: var(--bb-c3-bd); }
.bb-group .bb-mini span[data-colour="4"] { color: var(--bb-c4-bd); } .bb-group .bb-mini span[data-colour="5"] { color: var(--bb-c5-bd); }

/* Zentrale Ruhe-/Zurück-Zone (Farbtafel-Mitte) */
.bb-center { border-style: dashed; color: var(--color-text-muted); background: var(--color-surface-alt); cursor: pointer; }
.bb-center .bb-char { font-size: var(--text-base); }

/* Webcam-Mitte (Gegenüber-Modus): Live-Kamerabild füllt die Mittelzelle.
   Spiegel-Selfie (scaleX(-1)) für die vertraute Eigenansicht. */
.bb-center--cam { padding: 0; overflow: hidden; border-style: solid; background: #000; }
.bb-cam-video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; transform: scaleX(-1); }

/* Augen-ABC: Webcam als Vollbild-Hintergrund (Selfie) hinter dem halbtransparenten Board.
   Video liegt absolut im .bb-wrap (Inhaltsbereich), alle anderen Kinder darueber. */
.bb-wrap.is-cam-bg { position: relative; }
.bb-cam-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); z-index: 0; border-radius: var(--radius-lg); background: #000; }
.bb-wrap.is-cam-bg > *:not(.bb-cam-bg-video) { position: relative; z-index: 1; }
.bb-wrap.is-cam-bg .bb-group { background: rgba(255, 255, 255, 0.28); }
.bb-wrap.is-cam-bg .bb-cell { background: rgba(255, 255, 255, 0.28); }
/* Mittelfeld (Hub) liegt ueber Kopf/Augen -> stark durchsichtig, damit das Gesicht sichtbar bleibt. */
.bb-wrap.is-cam-bg .bb-hub { background: rgba(255, 255, 255, 0.22); }
.bb-wrap.is-cam-bg .bb-center { background: rgba(255, 255, 255, 0.15); }
/* Beschriftung trotz Transparenz lesbar halten (Halo). Farbige Buchstaben-Chips bleiben ohnehin deckend. */
.bb-wrap.is-cam-bg .bb-hub__text { text-shadow: 0 0 4px rgba(255,255,255,0.95), 0 1px 2px rgba(255,255,255,0.85); }
[data-contrast="dark"] .bb-wrap.is-cam-bg .bb-group,
[data-contrast="dark"] .bb-wrap.is-cam-bg .bb-cell,
[data-contrast="dark"] .bb-wrap.is-cam-bg .bb-hub { background: rgba(18, 18, 18, 0.40); }
[data-contrast="dark"] .bb-wrap.is-cam-bg .bb-hub__text { text-shadow: 0 0 4px rgba(0,0,0,0.95); }

.bb-cam-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); }
.bb-cam-fallback svg { width: 28px; height: 28px; }

/* Farb-Legende */
.bb-legend { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: center; }
.bb-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--color-text-secondary); }
/* a11y (1.4.11): kräftigerer, dunklerer Rand gibt dem farbigen Punkt eine sichtbare
   Kontur — sonst „verschwindet" der gelbe Punkt fast auf hellem Grund. */
.bb-legend__dot { width: 20px; height: 20px; border-radius: var(--radius-full); border: 2px solid rgba(0,0,0,.45); }
:root[data-theme="kontrast"] .bb-legend__dot { border-color: #ffffff; }

/* Auswahl-Flash */
.bb-flash { animation: bb-flash .4s ease; }
@keyframes bb-flash { 0% { box-shadow: 0 0 0 0 var(--color-success); } 100% { box-shadow: 0 0 0 12px rgba(22,163,74,0); } }

/* a11y (WCAG 2.3.3 / prefers-reduced-motion): Caret-Blinken, Auswahl-Flash und der
   Kopf-Fortschrittsring nicht animieren, wenn der Nutzer reduzierte Bewegung wünscht.
   Statt-Blinken bleibt das Caret dauerhaft sichtbar (Lesbarkeit erhalten). */
@media (prefers-reduced-motion: reduce) {
  .bb-caret { animation: none !important; opacity: 1 !important; }
  .bb-flash { animation: none !important; }
  .bb-head-ring { transition: none !important; }
}

/* Tastatur-Hinweis */
.bb-keyhint { font-size: var(--text-xs); color: var(--color-text-muted); }
.bb-keyhint kbd {
  font-family: var(--font-mono); background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; font-size: .85em;
}

/* ==========================================================================
   Solo-Modus „Alleine am Computer": Mitte-Hub (Text + Wortvorhersage),
   Vorschlag-Wahlfelder, Kopf-Live-Feedback. Siehe docs/SOLO-MODE-DESIGN.md.
   ========================================================================== */

/* Solo-Umschalter in der Toolbar */
.bb-solo-toggle[aria-pressed="true"] {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

/* Im Solo-Modus leben die Vorschläge im Hub → obere Leiste ausblenden */
.bb-wrap.is-solo .bb-predict { display: none; }

/* Mitte-Hub: Mitteilungsfeld + Wortvorhersage (ersetzt das Blickkontakt-Loch) */
.bb-hub {
  position: relative; border: 3px solid var(--color-primary); border-radius: var(--radius-lg);
  background: var(--color-primary-bg, var(--color-surface-alt));
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: var(--space-2); padding: var(--space-2) var(--space-3); overflow: hidden; min-height: 0;
}
.bb-hub__text {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-mono); font-weight: var(--font-bold);
  font-size: clamp(1.1rem, min(3.4vw, 6vh), 2.4rem); color: var(--color-text);
  white-space: pre-wrap; word-break: break-word; min-height: 1.3em; line-height: 1.2;
}
.bb-hub__text .bb-caret { color: var(--color-primary); animation: bb-blink 1s step-start infinite; }
.bb-hub__predict {
  display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; justify-content: center;
}
.bb-hub__predict:empty { display: none; }
.bb-hub__predict .bb-predict__btn {
  font-size: clamp(var(--text-base), 2.4vw, var(--text-xl)); padding: 10px 20px;
  border-color: var(--color-primary); color: var(--color-primary-dark);
}
.bb-hub__pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); color: var(--color-primary-dark); font-weight: var(--font-bold);
  font-size: var(--text-lg); text-align: center;
}
.bb-hub__pick svg { width: 34px; height: 34px; }
/* Center/Solo: Editier-/Sprechen-Knoepfe liegen mit im Hub (mittig, unter Text + Vorschlaegen) */
.bb-hub .bb-textbar__actions { justify-content: center; flex-wrap: wrap; }

/* Vorschlag-Wahlfelder (Schritt „predict": Wörter in den äußeren Richtungsfeldern) */
.bb-cell--word { background: var(--color-surface); border-color: var(--color-primary); }
.bb-cell--word .bb-char--word {
  font-family: var(--font-headline); font-weight: var(--font-bold);
  font-size: clamp(1rem, min(3.4vw, 6vh), 2.2rem); color: var(--color-primary-dark);
  line-height: 1.05; word-break: break-word; max-width: 100%;
}

/* Kopf-Live-Feedback: anvisiertes Feld hervorheben + Fortschrittsring */
.bb-group.is-head-target, .bb-cell.is-head-target {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-bg), var(--shadow-md);
}
.bb-head-ring {
  position: fixed; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%;
  pointer-events: none; z-index: 9998; opacity: 0; transition: opacity .12s ease;
  background: conic-gradient(var(--color-primary, #3a86ff) 0deg, rgba(0,0,0,0.14) 0deg);
  box-shadow: 0 1px 6px rgba(0,0,0,.3);
}
.bb-head-ring.is-on { opacity: .9; }

/* ==========================================================================
   Direkt-Tafeln (mode:'direct'): flaches N×M-Raster, jede Zelle = ein Schritt.
   Kompakter als die Zwei-Schritt-Zellen, große Schrift, getönte Funktions-/
   Floskel-Zellen mit lesbarer Textfarbe (inline gesetzt via textOn()).
   ========================================================================== */
.bb-cell--direct { padding: clamp(2px, 0.8vw, 8px); min-width: 0; }
.bb-cell--direct .bb-char {
  font-family: var(--font-headline); font-weight: var(--font-bold); line-height: 1.05;
  font-size: clamp(1rem, min(4.5vw, 7vh), 3rem);
  max-width: 100%; overflow: hidden; text-overflow: clip; word-break: break-word;
}
/* Funktions-/Floskel-Zellen: kleinere, ruhigere Schrift (mehr Text pro Zelle) */
.bb-cell--direct.is-fn { background: var(--color-surface-alt); }
.bb-cell--direct.is-fn .bb-char {
  font-size: clamp(.7rem, min(2.1vw, 3.4vh), 1.15rem);
  color: var(--color-text-secondary); font-weight: var(--font-bold);
}
/* Mehrbuchstaben-Felder im Direkt-Modus: kein Umbruch (überschreibt word-break), kleinere Schrift */
.bb-cell--direct .bb-char.is-len2 { white-space: nowrap; word-break: normal; font-size: clamp(.8rem, min(3vw, 4.8vh), 2rem); }
.bb-cell--direct .bb-char.is-len3 { white-space: nowrap; word-break: normal; font-size: clamp(.62rem, min(2.2vw, 3.6vh), 1.5rem); }
/* Getönte Zelle (cell.colour gesetzt): Inline-Hintergrund + Textfarbe haben
   Vorrang; eigene Surface-Tönung der is-fn-Regel hier neutralisieren. */
.bb-cell--direct[style*="background"].is-fn { background: none; }
.bb-cell--direct[style*="background"] .bb-char { color: inherit; }
/* Leere Lückenzelle: nicht klickbar, dezent */
.bb-cell--direct.is-empty { background: var(--color-surface-alt); border-style: dashed; cursor: default; box-shadow: none; }
.bb-cell--direct.is-empty:hover { border-color: var(--color-border); box-shadow: none; }

/* Kopfzeilen-Satz / Hinweis über dem Direkt-Raster (in der Statuszeile) */
.bb-direct-header { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: 1.3; }
.bb-direct-header--hint { color: var(--color-text-muted); font-style: italic; }

/* ==========================================================================
   Modus-Hinweis, Assistenz-Spiegelansicht & Responsive (Hoch-/Querformat)
   ========================================================================== */

/* Modus-Hinweis unter der Toolbar — erklärt „Alleine (Solo)" / Assistenz-Ansicht */
.bb-modehint { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; padding: 0 var(--space-1); }
.bb-modehint:empty { display: none; }

/* Assistenz-Ansicht: Board horizontal gespiegelt (Gegenübersitzen). Jede Zelle
   wird zurückgespiegelt → Buchstaben bleiben LESBAR, nur die POSITION ist
   gespiegelt (wie der Blick durch den durchsichtigen Rahmen). */
.bb-board.is-mirrored { transform: scaleX(-1); }
.bb-board.is-mirrored > * { transform: scaleX(-1); }
/* Schritt 1: auch die Mini-Buchstaben INNERHALB der Gruppen spiegeln.
   Das obige "> *" dreht jede Gruppe als Ganzes zurueck -> ihre Buchstaben
   blieben ungespiegelt (A stand links statt oben rechts). Daher hier eine
   Ebene tiefer: .bb-mini kippen (Positionen der Buchstaben spiegeln) und jeden
   Chip einzeln zurueckdrehen (Glyphen bleiben lesbar). */
.bb-board.is-mirrored .bb-mini { transform: scaleX(-1); }
.bb-board.is-mirrored .bb-mini span { transform: scaleX(-1); }
.bb-mirror-toggle[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ── Smartphone / schmale Geräte ── */
@media (max-width: 640px) {
  .bb-wrap { padding: var(--space-2); gap: var(--space-2); }
  .bb-textbar { flex-wrap: wrap; min-height: 0; padding: var(--space-2); }
  .bb-text { font-size: var(--text-xl); }
  .bb-textbar__actions { width: 100%; justify-content: center; }
  .bb-group { padding-top: 20px; }
  .bb-group .bb-pos { font-size: 10px; }
  .bb-keyhint { display: none; }              /* Tastatur-Hinweis auf Touch unnötig */
  .bb-group .bb-mini { gap: clamp(6px, 3vh, 24px) clamp(4px, 1.5vw, 14px); }
}
/* ── Flaches Querformat (Handy quer): vertikalen Platz sparen ── */
@media (orientation: landscape) and (max-height: 560px) {
  .bb-wrap { gap: var(--space-2); padding: var(--space-2); }
  .bb-modehint, .bb-keyhint { display: none; }
  .bb-textbar { min-height: 0; }
}