/* ══════════════════════════════════════════════════════════════
   Wortraster-Modul — Styles (Standalone, public/word-grid/).

   VERTRAG:
   - Scoping: alle Regeln hängen an der Root-Klasse `.wg-root`, die
     createWordGrid() auf den Container setzt. Kein Bezug auf App-Klassen
     (body.game-mode, html.light-theme) oder App-IDs.
   - Theme: `.wg-root` trägt die Dark-Defaults als --wg-*-Variablen;
     `.wg-root.wg-light` (von setTheme() getoggelt) überschreibt sie mit
     den Light-Werten. Ein Host-Projekt kann BEIDE überstimmen, indem es
     die --wg-*-Variablen mit höherer Spezifität auf den Container mappt
     (die App macht das per `#word-grid { --wg-text: var(--text); … }`).
     Variablen-Schnittstelle: --wg-text, --wg-bg, --wg-surface,
     --wg-accent (nur als FLÄCHEN-Farbe — nie als Textfarbe verwenden),
     --wg-found-bg-multi, --wg-found-bg-all, --wg-found-text,
     --wg-font (Zell-Schrift; von der fontFamily-Option gesetzt).
   - Sizing des Containers als Flex-Kind (flex/min-height/max-height)
     liefert der HOST — das Modul definiert nur das Innenlayout und misst
     parent.clientHeight (siehe word-grid.js-Vertrag).
   - Scroll-Verhalten: `.wg-scrollable` setzt touch-action: pan-y +
     overscroll-behavior-x: none NUR auf dem eigenen Scroll-Container —
     kompatibel mit Hosts, die seitenweite Touch-Gesten sperren (die App
     hebt so ihr game-mode-globales touch-action: none genau hier auf).
   ══════════════════════════════════════════════════════════════ */

.wg-root {
  /* Dark-Defaults (Werte = App-Theme „Walnuss" zum Zeitpunkt der
     Extraktion). Der Host überschreibt sie per höher-spezifischem
     Selektor auf dem Container. */
  --wg-text:           #ECE7DA;
  --wg-bg:             #242019;
  --wg-surface:        #2F2B25;
  --wg-accent:         #C4642F;
  --wg-found-bg-multi: #4A4438;
  --wg-found-bg-all:   #0F0D0A;
  --wg-found-text:     #F2EBDA;
  font-family: var(--wg-font, inherit);
}
.wg-root.wg-light {
  --wg-text:           #060503;
  --wg-bg:             #E1E0DC;
  --wg-surface:        #ECEBE7;
  --wg-accent:         #B55A2E;
  --wg-found-bg-multi: #555049;
  --wg-found-bg-all:   #28241E;
  --wg-found-text:     #F2EBDA;
}

.wg-root[hidden] { display: none; }

/* Innenlayout des Grids. flex-wrap statt CSS-Grid: feste Pixelbreite pro
   Zelle (per JS gesetzt), gap=0 (jede Subpixel-Breite würde sonst Firefox
   Android über den Rand drücken — bestätigt). Cells fließen links-nach-
   rechts, brechen am Zeilenende um. overflow:hidden gehört dem Modul —
   der Shrink-Loop in relayout() misst dagegen (scrollHeight>clientHeight). */
.wg-root {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* Scroll-Modus für sehr lange Wortlisten — Zellen behalten ihre lesbare
   Größe, statt sie zu schrumpfen schaltet der Packer hier overflow-y: auto
   ein. touch-action: pan-y hebt ein host-globales touch-action: none für
   genau diesen Scroll-Container auf, damit auf Mobile vertikal gescrollt
   werden kann; horizontal-overscroll bleibt blockiert (matched die
   CLAUDE.md-Regel der App zu inneren Scroll-Containern). */
.wg-root.wg-scrollable {
  overflow-y: auto;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Scroll-Fade-Hinweise: oben/unten am Grid wird der Inhalt sanft
   ausgeblendet, sobald in dieser Richtung weiterer (unsichtbarer)
   Inhalt existiert. JS toggelt die Klassen on/off pro Scroll-Position
   (siehe _updateScrollFades in word-grid.js). mask-image arbeitet auf
   visueller Ebene — kein Layout-Einfluss, kein Interaktions-Block.
   --wg-fade-h = Höhe des Verlaufs (ein Cell ≈ 18 px wirkt natürlich);
   _scrollCellIntoView liest den Wert via getComputedStyle (Fallback 24px). */
.wg-root.wg-scrollable {
  --wg-fade-h: 22px;
}
.wg-root.wg-scrollable.wg-fade-top {
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--wg-fade-h), #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--wg-fade-h), #000 100%);
  /* Zusätzlich zur Mask: ein dezenter dunkler Schatten am Rand →
     Inhalt scheint nicht nur durchsichtig zu werden, sondern unter
     eine Kante zu rutschen. inset box-shadow malt am visiblen Rand
     der Scroll-Box und bewegt sich nicht mit dem Inhalt. */
  box-shadow: inset 0 14px 16px -10px rgba(0, 0, 0, 0.55);
}
.wg-root.wg-scrollable.wg-fade-bottom {
  mask-image: linear-gradient(to top, transparent 0, #000 var(--wg-fade-h), #000 100%);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 var(--wg-fade-h), #000 100%);
  box-shadow: inset 0 -14px 16px -10px rgba(0, 0, 0, 0.55);
}
.wg-root.wg-scrollable.wg-fade-top.wg-fade-bottom {
  mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--wg-fade-h),
    #000 calc(100% - var(--wg-fade-h)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 var(--wg-fade-h),
    #000 calc(100% - var(--wg-fade-h)), transparent 100%);
  box-shadow:
    inset 0 14px 16px -10px rgba(0, 0, 0, 0.55),
    inset 0 -14px 16px -10px rgba(0, 0, 0, 0.55);
}
.wg-root.wg-nowrap {
  /* Design/Typewriter: links ausrichten statt zentrieren, damit alle Zellen
     über die Zeilen hinweg in einem klaren Raster fluchten. Beim Zentrieren
     verschob jede Zeile um ihren restlichen Leerraum / 2 → Buchstaben
     stehen pro Zeile unterschiedlich weit links. flex-start klebt die
     Wörter alle an der linken Kante der Region.

     Zwischen-Wort-Lücke: `column-gap` in Zellbreite (--wg-cell-w, von JS
     auf die aktuelle Zellgröße gesetzt). Flexbox wendet column-gap nur
     ZWISCHEN Items derselben Zeile an — am Zeilenende entsteht also keine
     Lücke, und die letzte Rasterspalte bleibt nutzbar. Genau das ist der
     Unterschied zur früheren unsichtbaren .wg-spacer-Zelle: die saß im
     .wg-word-Wrapper und machte das letzte Wort einer Zeile eine Zellbreite
     breiter, als der Greedy-Packer in relayout() gerechnet hatte. */
  justify-content: flex-start;
  column-gap: var(--wg-cell-w, 18px);
}
.wg-root .wg-word {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.wg-root .wg-cell {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  /* Kein CSS-uppercase — die Zell-Buchstaben kommen bereits großgeschrieben
     (upperWord) aus dem JS; CSS-uppercase würde ein Lösungs-`ß` als `SS`
     rendern (zwei Zeichen in einer Ein-Buchstaben-Zelle). */
  color: transparent;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  /* box-sizing + flex-shrink:0 garantieren, dass Zellen ihre per JS gesetzte
     Pixelbreite behalten und nicht durch Padding/Border oder Flex-Shrink
     überlaufen oder fließen. */
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
  line-height: 1;
  /* Raster: Border wird nicht entfernt, sondern nur transparent geschaltet —
     so bleibt die Zellbreite unter `box-sizing:border-box` einheitlich.
     Design/Typewriter: Zellrand transparent statt solid — sonst entstand
     ein 1-px-Streifen ohne Hintergrund-Grain um jedes Innen-Kästchen.
     transparent lässt die Host-Textur durchscheinen → optisch fließt das
     Papier um die Kästchen herum. */
  border-top:    1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left:   0;
  border-right:  1px solid transparent;
  /* Zell-Hintergrund im Grundzustand. Dark bewusst ein fester Wert (etwas
     kühler als --wg-surface); Light-Override unten nimmt --wg-surface. */
  --wg-cell-bg: #27272a;
  /* Design/Typewriter: Zelle selbst ist transparent (Host-Textur scheint im
     1-2 px Außenrand durch); das eigentliche Buchstaben-Fach wird per
     ::before-Pseudo gezeichnet — leicht eingerückt, mit dunklem Rand.
     Layout-Größe bleibt identisch (Pseudo ist absolut positioniert,
     beeinflusst die Zellbreite nicht). */
  background: transparent;
  position: relative;
  isolation: isolate;
}
.wg-root .wg-cell::before {
  content: '';
  position: absolute;
  /* inset: 0 → das Innen-Kästchen füllt die volle Padding-Box, nur die
     1-px-Zellborder bleibt als Außenrand. */
  inset: 0;
  background: var(--wg-cell-bg);
  border: 1px solid var(--wg-text);
  box-sizing: border-box;
  z-index: -1;
  pointer-events: none;
}
/* Sobald eine Zelle als gefunden markiert ist (egal in welchem Found-State),
   verschwindet die dunkle Rahmenlinie des Innen-Kästchens — Border-Color
   wird auf den eigenen Hintergrund gesetzt, damit der gefärbte Block
   visuell als gefüllte Fläche statt als umrahmtes Fach erscheint.
   Box-sizing bleibt border-box, also keine Layoutverschiebung. */
.wg-root .wg-cell.revealed::before,
.wg-root .wg-cell.partial-found::before,
.wg-root .wg-cell.all-found::before,
.wg-root .wg-cell.hinted::before {
  border-color: var(--wg-cell-bg);
}
.wg-root.wg-light .wg-cell {
  --wg-cell-bg: var(--wg-surface);
}
/* Design/Typewriter: keine vertikale Markierungs-Linie am linken Rand der
   ersten Zelle eines Worts. Die Wort-Grenzen ergeben sich aus der
   column-gap-Lücke zwischen den Wörtern. */
.wg-root .wg-cell.wg-first {
  box-shadow: none;
}
/* Design/Typewriter: in der „single finder"-Zelle ist der Hintergrund die
   voll gesättigte Spielerfarbe (siehe _paintCell/setCellFinders in JS) —
   Buchstaben darüber durchgehend in Weiß, das liefert genug Kontrast auf
   jeder Spielerfarbe und passt zum Setzkasten-Look. Beide Themes verwenden
   denselben Weiß-Wert. */
.wg-root .wg-cell.revealed {
  color: #fff;
}
/* Hidden-Modi: Partial-Found = ein oder mehrere (aber nicht alle) Spieler
   haben das Wort. Single-Finder geht über --wg-cell-bg → Word-Edge-Fade
   greift. Multi-Finder (.multi-finder) bekommt einen neutralen Ton — bewusst
   etwas dunkler als die all-found-Zellen, damit beide Zustände unterscheidbar
   bleiben (bei all-found sind außerdem die Buchstaben für alle sichtbar).
   Buchstabe bleibt verborgen außer .mine-finder. */
.wg-root .wg-cell.partial-found {
  color: transparent;
}
.wg-root .wg-cell.partial-found.mine-finder {
  color: #fff;
  text-shadow: none;
  font-weight: 800;
}
.wg-root .wg-cell.partial-found.multi-finder {
  --wg-cell-bg: var(--wg-found-bg-multi);
  --wg-cell-bg-fade: rgba(161,161,170,0);  /* transparente Variante von --wg-found-bg-multi für Gradient-Fades */
  color: transparent;
}
.wg-root .wg-cell.partial-found.multi-finder.mine-finder {
  color: var(--wg-found-text);
  text-shadow: none;
  font-weight: 800;
}
/* Alle Spieler haben das Wort gefunden → helle Zelle, kontrastierender Text.
   Reines Weiß war auf dunklem Theme zu kontraststark; --wg-found-bg-all
   hebt die Zelle weiterhin klar vom Standard-Hintergrund ab, ohne zu
   blenden. */
.wg-root .wg-cell.all-found {
  --wg-cell-bg: var(--wg-found-bg-all);
  --wg-cell-bg-fade: rgba(212,212,216,0);  /* transparente Variante von --wg-found-bg-all für Gradient-Fades */
  color: var(--wg-found-text);
  font-weight: 800;
}
/* Tipp-Buchstabe: helles Cream-Kästchen mit schwarzer Schrift — bewusst
   theme-unabhängig, damit Tipps in beiden Themes sofort als „aufgedeckter
   Buchstabe, aber noch ungelöst" lesbar sind. --wg-cell-bg wird gesetzt,
   damit das ::before-Pseudo des Zell-Renders ihn übernimmt (Cell selbst
   bleibt transparent). Border-color auf cell-bg ist bereits durch die
   `.hinted::before`-Regel weiter oben gehandhabt. `hinted-pop` triggert
   die Erst-Erscheinen-Animation. */
.wg-root .wg-cell.hinted {
  --wg-cell-bg: #F2EBDA;
  color: #28241E;
  font-weight: 800;
}
.wg-root .wg-cell.hinted-pop {
  animation: wg-hint-pop 0.6s ease-out;
}
@keyframes wg-hint-pop {
  /* --wg-accent hier nur als FLÄCHE (background) — Text darauf schwarz
     (Accent-als-Textfarbe ist per Host-Regel tabu). */
  0%   { transform: scale(0.4); background-color: var(--wg-accent); color: #000; }
  35%  { transform: scale(1.25); background-color: var(--wg-accent); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
/* Eigene Wörter: dezent kräftigere Schrift statt Outline (Outlines um jede
   Buchstabenzelle wären visuell zu laut). */
.wg-root .wg-cell.mine {
  font-weight: 800;
}

/* Gefundene Zellen sind klickbar (onCellTap → z.B. Finder-Popover des Hosts). */
.wg-root .wg-cell.revealed,
.wg-root .wg-cell.partial-found,
.wg-root .wg-cell.all-found {
  cursor: pointer;
}