/* ══════════════════════════════════════════════════════════════
   Tastatur-Modul — Stylesheet.

   Repo-fähig: KEINE App-Variablen, KEINE App-Selektoren (kein
   `body.game-mode`, kein `html.light-theme`). Alles Farbige läuft über
   `--kb-*`-Tokens mit Defaults; die App setzt sie je Theme (Bridge in
   style.css). Alles Layoutige beschränkt sich auf die eigenen Elemente —
   wo die Tastatur im Bildschirm sitzt, entscheidet die App; wie groß sie
   werden darf, sagt sie dem Modul über setSize().
   ══════════════════════════════════════════════════════════════ */

.kb-root {
  /* Tastenkörper */
  --kb-key:            #ECEBE7;
  --kb-key-hover:      #DAD8D2;
  --kb-key-text:       #241F1C;
  /* Rücktaste — dezent abgesetzt, damit sie sich blind finden lässt. */
  --kb-action:         #D8D5CE;
  --kb-action-hover:   #C6C2BA;
  /* Eingabe hebt sich als einzige farblich ab (wie im Hex-Rad). */
  --kb-enter:          #5B4B8A;
  --kb-enter-hover:    #473A6D;
  --kb-enter-text:     #fff;
  /* Aufleuchten bei physischem Tastendruck. */
  --kb-flash:          #EBC014;
  --kb-flash-text:     #241F1C;

  --kb-radius:         8px;
  --kb-shadow:         0 2px 0 rgba(0, 0, 0, 0.28);

  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 0;
}

/* Die Maße kommen aus dem Modul (fitLayout im Kern) und stehen als
   Custom Properties am Board. So rechnet CSS nur noch die Tastenbreiten aus,
   und die Zahlen bleiben an EINER Stelle. */
.kb-board {
  --kb-key-w: 0px;
  --kb-key-h: 0px;
  --kb-gap:   0px;
  --kb-font:  0px;

  display: flex;
  flex-direction: column;
  gap: var(--kb-gap);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Kein Platz da (setSize noch nicht aufgerufen, Feld auf 0): gar nichts
   zeigen, statt eine Tastatur aus 0-px-Tasten zu malen. */
.kb-board.kb-empty { display: none; }

/* Alle Reihen beginnen am selben linken Rand — sie orientieren sich an der
   obersten. Mittig gesetzt säße eine kürzere Reihe (englisch ASDFGHJKL, neun
   statt zehn Buchstaben) zwischen den Spalten der Reihe darüber; das liest
   sich als Versatz, nicht als Absicht. */
/* Alle Reihen beginnen am selben linken Rand — sie orientieren sich an der
   obersten. Mittig gesetzt säße eine kürzere Reihe (englisch ASDFGHJKL, neun
   statt zehn Buchstaben) zwischen den Spalten der Reihe darüber; das liest
   sich als Versatz, nicht als Absicht.

   `width: 100%` bindet die Reihe an die BRETTBREITE, die das Modul selbst
   ausgerechnet hat. Ohne die Bindung wächst eine Reihe an ihrem Inhalt, und
   die Rundung der Tastenbreiten (auf zwei Nachkommastellen, je Taste) kann sie
   dann über den Rand schieben — sichtbar, sobald sich die Belegung ändert und
   die Tasten breiter werden. */
/* Füller: nimmt Platz, zeigt nichts, fängt nichts ab. Er ist der Grund, warum
   eine kurze Reihe rechtsbündig stehen kann, ohne die Breitenrechnung zu
   umgehen — die misst die Tastatur an der breitesten Reihe. */
/* Doppelte Klasse, damit die Regel unabhängig von der Reihenfolge gewinnt:
   `.kb-key` steht weiter unten und setzte Fläche und Schatten sonst wieder —
   der Füller sah dann aus wie eine Taste, die nichts tut. */
.kb-key.kb-key-spacer {
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

.kb-row {
  display: flex;
  gap: var(--kb-gap);
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

/* Eine Taste behält ihre gerechnete Breite — sie darf nicht schrumpfen, wenn
   die Summe durch Rundung ein halbes Pixel über die Reihe hinausragt. Sonst
   verzöge sich genau das Raster, um das es hier geht. */
.kb-key {
  flex-shrink: 0;
  /* Breite in Tastenbreiten: eine 1.5er-Taste ersetzt anderthalb Tasten UND
     die halbe Lücke dazwischen — nur so bleiben alle Reihen gleich breit. */
  width: calc(var(--kb-span, 1) * var(--kb-key-w) + (var(--kb-span, 1) - 1) * var(--kb-gap));
  height: var(--kb-key-h);
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--kb-radius);
  background: var(--kb-key);
  color: var(--kb-key-text);
  box-shadow: var(--kb-shadow);
  font-family: inherit;
  font-size: var(--kb-font);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  /* Verhindert die 300-ms-Doppeltipp-Zoom-Verzögerung — und dass ein leicht
     wischender Tastendruck als Scrollen/Navigationsgeste umgedeutet wird. */
  touch-action: manipulation;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* Hover/Pressed laufen über JS-Klassen statt CSS-:hover — das verhält sich auf
   Touch berechenbar (dort gibt es kein echtes Hover, und ein hängengebliebener
   :hover-Zustand nach dem Tippen sähe aus wie eine klemmende Taste). */
.kb-key.hovered { background: var(--kb-key-hover); }
.kb-key.pressed {
  background: var(--kb-key-hover);
  transform: translateY(1px);
  box-shadow: none;
}

.kb-key-backspace          { background: var(--kb-action); }
.kb-key-backspace.hovered,
.kb-key-backspace.pressed  { background: var(--kb-action-hover); }

.kb-key-enter          { background: var(--kb-enter); color: var(--kb-enter-text); }
.kb-key-enter.hovered,
.kb-key-enter.pressed  { background: var(--kb-enter-hover); }

/* ⌫ und ⏎ wirken bei gleicher Punktgröße kleiner als ein Buchstabe. */
.kb-key-backspace, .kb-key-enter { font-size: calc(var(--kb-font) * 1.1); }

/* ── Kopplung an die physische Tastatur ─────────────────────────────────
   Wer am Rechner tippt, sieht hier dieselbe Taste kurz aufleuchten. Ohne das
   bliebe offen, ob der Druck angekommen ist — und ob die Sprache diese Taste
   überhaupt hat. Die Dauer steckt in FLASH_MS (keyboard.js); die Transition
   hier ist bewusst kürzer, damit das Aufleuchten sofort da ist und erst das
   Abklingen weich läuft. */
.kb-key.kb-flash {
  background: var(--kb-flash);
  color: var(--kb-flash-text);
  transition: background-color 0.02s ease, color 0.02s ease;
}
.kb-key-enter.kb-flash { color: var(--kb-flash-text); }

@media (prefers-reduced-motion: reduce) {
  .kb-key { transition: none; }
  .kb-key.pressed { transform: none; }
}