/* ══════════════════════════════════════════════════════════════
   Hex-Eingabe-Modul — Stylesheet.

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

.hx-root {
  /* Tastenkörper */
  --hx-key:            #ECEBE7;
  --hx-key-hover:      #DAD8D2;
  /* Pflichtbuchstabe in der Mitte — in beiden Themes ein Terrakotta-Ton,
     deshalb trägt sein Label immer helle Schrift. */
  --hx-center:         #C7502A;
  --hx-center-hover:   #A93F1F;
  --hx-center-label:   #FBF3E3;
  /* Eingeben-Taste hebt sich als einzige farblich ab. */
  --hx-submit:         #5B4B8A;
  --hx-submit-hover:   #473A6D;
  --hx-submit-icon:    #fff;
  /* Countdown-Ring (letzte Sekunden). */
  --hx-countdown:      #C7502A;
  --hx-text:           #241F1C;
}

/* ── Rad ────────────────────────────────────────────────────────────── */

.hx-root .hex-region,
.hx-root {
  position: relative;
}

/* Der Container hält den quadratischen Frame unten-mittig: das Rad soll am
   unteren Rand kleben, damit der Daumen es erreicht. */
.hx-root {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.hx-root .hex-frame { flex: 0 0 auto; display: flex; }

.hex-svg {
  width: 100%; max-width: 320px; cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Verhindert die 300-ms-Doppeltipp-Zoom-Verzögerung. */
  touch-action: manipulation;
  /* Eigener GPU-Layer, damit Neuzeichnungen nicht den Rest der Seite mitziehen. */
  will-change: transform;
  transform: translateZ(0);
}

/* KRITISCH: Pointer-Events auf SVG-Ebene aus, auf den Tasten-Gruppen wieder
   an. Ohne das schluckt die rechteckige SVG-Bounding-Box Taps, die in den
   leeren Ecken eigentlich die Eck-Tasten treffen sollten. Wer hier
   interaktive Elemente ergänzt, muss ihnen selbst `pointer-events: auto`
   geben. */
.hex-svg { pointer-events: none; }
.hex-svg .hex-group,
.hex-svg .hex-corner-svg { pointer-events: auto; }

.hex-outer  { fill: var(--hx-key); stroke: none; }
.hex-center { fill: var(--hx-center); stroke: none; }
.hex-label  { font-weight: 800; fill: var(--hx-text); pointer-events: none; }
.hex-label-center { fill: var(--hx-center-label); }
.hex-group  { cursor: pointer; }

/* Mischen: die Außen-Labels blenden aus, werden neu gesetzt, blenden ein.
   Die Dauer muss zu SHUFFLE_FADE_MS in hex-input.js passen. */
.hex-label-outer { transition: opacity 0.18s ease; }
.hex-svg.hex-fading .hex-label-outer { opacity: 0; }

/* Hover/Pressed laufen über JS-Klassen statt CSS-:hover — das vermeidet
   einen Repaint-Blitz in Chrome und verhält sich auf Touch berechenbar
   (dort gibt es kein echtes Hover). */
.hex-group.hovered .hex-outer  { fill: var(--hx-key-hover); }
.hex-group.hovered .hex-center { fill: var(--hx-center-hover); }
.hex-group.pressed .hex-outer,
.hex-group.pressed .hex-center { opacity: 0.75; }

/* ── Eck-Tasten ─────────────────────────────────────────────────────── */

.hex-corner-svg { cursor: pointer; }
.hex-corner-sector { fill: var(--hx-key); stroke: none; transition: fill 0.12s; }
.hex-corner-svg.hovered .hex-corner-sector { fill: var(--hx-key-hover); }
.hex-corner-svg.pressed { opacity: 0.75; }
.hex-corner-submit .hex-corner-sector { fill: var(--hx-submit); }
.hex-corner-submit.hovered .hex-corner-sector { fill: var(--hx-submit-hover); }
.hex-corner-icon { font-size: 22px; font-weight: 800; fill: var(--hx-text); pointer-events: none; }
/* ⏎ und ⟳ wirken bei gleicher Punktgröße kleiner als der breite ⌫-Glyph —
   die zehn Prozent gleichen das optisch aus. */
.hex-corner-submit .hex-corner-icon,
.hex-corner-shuffle .hex-corner-icon { font-size: 24px; }
.hex-corner-submit .hex-corner-icon { fill: var(--hx-submit-icon); }

#hex-logo { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }

/* ── Anzeige des getippten Worts ────────────────────────────────────── */

.hx-display {
  font-size: 2rem; font-weight: 800; letter-spacing: 4px; min-height: 52px;
  text-align: center; color: var(--hx-text);
  position: relative;
  /* KEIN text-transform: uppercase — der Inhalt kommt bereits
     großgeschrieben (ß-erhaltend) aus dem Modul. CSS würde `ß` wieder zu
     `SS` machen und damit das getippte Eszett kaputt rendern. */
}
.hx-display .word-display-inner {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  padding: var(--hx-display-pad, 4px 14px);
  border-radius: 10px;
  background: var(--hx-display-bg, rgba(0, 0, 0, 0.55));
  backdrop-filter: var(--hx-display-blur, blur(10px));
  -webkit-backdrop-filter: var(--hx-display-blur, blur(10px));
  color: var(--hx-display-fg, #fff);
}
/* Abgeschickt, Antwort steht aus: ausgegraut stehen lassen statt sofort zu
   verschwinden — bei zäher Verbindung sieht man so, dass das Wort unterwegs
   ist. Opacity statt Farbwechsel, damit es in jedem Theme als „inaktiv"
   liest. Weitertippen ersetzt es sofort; die Eingabe ist nie blockiert. */
.hx-display .word-display-inner.wd-pending { opacity: 0.45; }

.word-cursor {
  display: inline-block; width: 3px; height: 1.6rem;
  background: var(--hx-cursor, currentColor);
  vertical-align: middle; margin-left: 2px;
  animation: hx-blink 1s step-end infinite;
}
@keyframes hx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Abgelehnt: kurzes Rütteln. */
.hx-display.shake { animation: hx-shake 0.3s; }
@keyframes hx-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}