) überstimmen — bei
mehrwortigen Werten („gibt mindestens 1 Pangramm") würde die zweite Zeile
sonst innerhalb des Buttons mittig statt linksbündig zum Fließtext sitzen. */
text-align: inherit;
transition: background 0.12s;
}
/* `:hover` nur auf Geräten, die echtes Hover unterstützen — sonst klebt die
graue Markierung nach einem Tap auf dem Button (Popup-Anker), bis der
Spieler woanders hin tippt. `:focus-visible` bleibt unbeschränkt aktiv,
damit Tastatur-Navigation weiterhin sichtbar ist. */
@media (hover: hover) {
.prose-val:hover { background: var(--surface2); outline: none; }
}
.prose-val:focus-visible { background: var(--surface2); outline: none; }
/* Eine halbtransparente helle Box PRO Einstellung (nicht pro Wort): der
Hintergrund sitzt auf der Gruppe .prose-val-box, die alle Wort-Chunks einer
editierbaren Einstellung umschließt. Ihr Inline-Hintergrund deckt auch die
Leerzeichen zwischen den Chunks ab → durchgehende Box. Die Fläche kommt aus
--prose-val-bg, weil die beiden Themes hier auseinandergehen: auf Walnuss
genügt eine halbdeckende Stufe --surface, auf Papier hebt die sich kaum ab
und braucht ein Fast-Weiß. Kleiner box-shadow-Spread (1px) statt Padding
gibt etwas Luft, ohne das Monospace-Raster zu verschieben, und hält
benachbarte Textzeilen frei (keine vertikale Überlappung).
box-decoration-break:clone rundet jede Zeile, wenn eine Einstellung umbricht. */
.prose-val-box {
display: inline;
background: var(--prose-val-bg);
box-shadow: 0 0 0 1px var(--prose-val-bg);
border-radius: 5px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background 0.12s, box-shadow 0.12s;
}
@media (hover: hover) {
.prose-val-box:hover { background: var(--surface2); box-shadow: 0 0 0 1px var(--surface2); }
}
/* Innerhalb der Gruppe tragen die einzelnen Wort-Buttons keinen eigenen
Hintergrund mehr — die Box liefert ihn (sonst entstünde wieder ein Kästchen
pro Wort). Tastatur-Fokus (:focus-visible) bleibt absichtlich am Button. */
.prose-val-box .prose-val,
.prose-val-box .prose-val:hover { background: none; }
/* Nicht editierbare Werte (Raumcode, Spielernamen, Nicht-Host-Ansicht):
gleiche Optik, aber kein Hover-Affordance. */
.prose-val--readonly { cursor: default; }
/* Im aktuellen Modus wirkungsloses Fragment (z.B. keep-Klausel im Wörterdieb-
Modus): durchgestrichen + gedämpft. Der innere Wert-Button erbt line-through
nicht automatisch → explizit setzen. */
.prose-struck { text-decoration: line-through; opacity: 0.6; cursor: help; }
.prose-struck .prose-val { text-decoration: line-through; cursor: help; }
/* ── Onboarding-Hinweis beim allerersten Raum ────────────────────────────────
Abgedunkelter Hintergrund + Hinweiskarte unten mittig. Das Fett-Beispiel im
Text trägt die normale .prose-val-Optik (Wiedererkennung); die echten
Fettwerte im Fließtext pulsieren kurz (prose-val-pulse). */
.onboard-backdrop {
position: fixed; inset: 0; z-index: 9998;
background: rgba(0, 0, 0, 0.28);
animation: fadeIn 0.2s;
}
.onboard-hint {
position: fixed; z-index: 9999;
/* Nicht markierbar: ein Tipp auf die Box blättert zum nächsten Satz, ein
etwas längerer Druck würde sonst Text markieren (und auf Mobilgeräten die
Auswahl-Leiste aufziehen) statt weiterzublättern. Gilt für alle
Einführungsboxen — siehe .tutorial-pop. */
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
left: 50%; bottom: calc(24px + var(--safe-bottom));
transform: translateX(-50%);
width: min(440px, 92vw);
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 14px;
padding: 16px 18px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
font-size: 0.95rem; line-height: 1.45; text-align: center;
animation: fadeIn 0.2s;
}
/* Gestaffelt einblendende Sätze im Onboarding-Hinweis. */
/* Sätze linksbündig (wie .tutorial-pop-body und der Willkommenstext) — die
Karte selbst bleibt zentriert, der „Verstanden!"-Button darunter ebenfalls. */
.onboard-hint .onboard-line { margin: 0 0 9px; opacity: 0; transition: opacity 0.6s ease; text-align: left; }
.onboard-hint .onboard-line:last-child { margin-bottom: 0; }
.onboard-hint .onboard-line.show { opacity: 1; }
/* „Verstanden!"-Button — erscheint erst mit dem letzten Satz; vorher nicht
klickbar (pointer-events: none), damit der unsichtbare Bereich nicht schließt. */
.onboard-hint .onboard-ok {
display: block; margin: 12px auto 0;
opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.onboard-hint .onboard-ok.show { opacity: 1; pointer-events: auto; }
/* Auswahl-Knöpfe im Onboarding-Hinweis (z.B. „allein oder mit Mitspieler?").
Untereinander statt nebeneinander: die Beschriftungen sind ganze Sätze und
müssen umbrechen dürfen (siehe CLAUDE.md, kein Querscrollen). Erscheinen wie
der „Verstanden!"-Button erst mit dem letzten Satz. */
.onboard-hint .onboard-choices {
display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0;
opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.onboard-hint .onboard-choices.show { opacity: 1; pointer-events: auto; }
.onboard-hint .onboard-choices .btn {
white-space: normal; text-align: center; line-height: 1.25;
}
/* Dauerhinweis während des Tutorial-Halts: ein Mitspieler bekommt gerade die
Bedienelemente erklärt, das Spielfeld steht. Bewusst ohne Backdrop — es ist
eine Zustandsanzeige, kein Dialog (Einreichungen lehnt der Server bis zur
Freigabe ohnehin ab). Oben, damit es die Eingabe unten nicht verdeckt. */
.tutorial-wait {
position: fixed; z-index: 9998;
left: 50%; top: calc(8px + var(--safe-top));
transform: translateX(-50%);
max-width: 92vw;
padding: 7px 14px;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 999px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
font-size: 0.85rem; text-align: center;
user-select: none; -webkit-user-select: none;
animation: fadeIn 0.2s;
}
/* Raumcode blinkt, während der Hinweis darauf zeigt: sanftes Ein-/Ausblenden
des Texts (Opacity, kein Glow) — layout-neutral. Endlos; JS entfernt die
Klasse. */
@keyframes roomcode-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
.roomcode-blink { animation: roomcode-blink 1.1s ease-in-out infinite; }
/* Gleiches Blinken für Spieler-Kacheln in der Lobby (siehe
blinkLobbyPlayersBriefly): der Hinweis „… hat noch nicht zugestimmt" zeigt
damit auch, WESSEN Kachel gemeint ist. Eigene Klasse statt .roomcode-blink,
weil der Name sonst lügt; die Keyframes teilen sie sich. */
.lobby-blink { animation: roomcode-blink 1.1s ease-in-out infinite; }
/* Puls der tippbaren Fettwerte: ebenfalls sanftes Ein-/Ausblenden (Opacity),
layout-neutral (kein transform/scale, damit inline-Werte nicht umbrechen).
Endlich (3 Zyklen ≈ 2,7 s). */
@keyframes prose-val-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.prose-val-pulse { animation: prose-val-pulse 0.9s ease-in-out 3; }
@media (hover: hover) {
.prose-val--readonly:hover { background: none; }
}
/* ── Tutorial: In-Game-Element-Tour ──────────────────────────────────────────
Transparenter, klick-schluckender Backdrop (kein Abdunkeln, damit das
erklärte Element klar sichtbar bleibt) + frei positioniertes Erklär-Popup
daneben. Das aktuelle Element blinkt (layout-neutral, nur Opacity). Muster
analog zu .roomcode-blink / .onboard-*. */
.tutorial-backdrop {
position: fixed; inset: 0; z-index: 9998;
background: transparent;
animation: fadeIn 0.2s;
/* blockiert Eingaben während der Tour (Spiel ist serverseitig angehalten) */
touch-action: none;
}
.tutorial-pop {
position: fixed; z-index: 9999;
/* Nicht markierbar — gleiche Begründung wie bei .onboard-hint: die Box ist
eine Blätter-Fläche, keine Textquelle. */
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
width: min(320px, 88vw);
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 14px;
padding: 14px 16px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
font-size: 0.95rem; line-height: 1.45; text-align: center;
animation: fadeIn 0.2s;
}
.tutorial-pop-title { font-weight: 700; margin-bottom: 6px; }
/* Erklärtext linksbündig (die Karte selbst zentriert Titel und Button): die
Absätze laufen über mehrere Zeilen, und Fließtext liest sich an einer festen
Kante besser — wie der Willkommenstext auf der Startseite. */
.tutorial-pop-body { margin-bottom: 12px; text-align: left; }
/* Body als Absätze (Array-Body je Satz ein ): dezenter Abstand, letzter ohne. */
.tutorial-pop-body p { margin: 0 0 8px; }
.tutorial-pop-body p:last-child { margin-bottom: 0; }
/* Gestaffeltes Einblenden der Absätze (wie beim Start-Intro): opacity 0 → 1,
Layout bleibt reserviert, daher springt die Popup-Position nicht. Fade-Dauer
identisch zu den beiden anderen Einführungen (.intro-show, .onboard-line) —
der Takt selbst kommt aus INTRO_PAUSE_MS in main.js. */
.tutorial-pop-body p.tut-line { opacity: 0; transition: opacity 0.6s ease; }
.tutorial-pop-body p.tut-line.show { opacity: 1; }
/* „Weiter"-Button erscheint erst mit dem letzten Absatz; vorher unsichtbar und
nicht klickbar, Layout aber reserviert (kein Höhensprung). */
.tutorial-pop-ok { transition: opacity 0.4s ease; }
.tutorial-pop-ok.tut-hidden { opacity: 0; pointer-events: none; }
.tutorial-pop-ok { display: block; margin: 0 auto; }
/* „hier"-Link im Eingabefeld-Schritt der Tour: als Inline-Link im Erklärtext
(öffnet die Sprachregeln). UA-Button-Defaults neutralisieren, nur die
Unterstreichung markiert die Klickbarkeit. Unterstreichung (Stroke), nicht
Textfarbe — --accent bleibt reine Kontur/Fläche (siehe CLAUDE.md). */
.tut-rules-link {
font: inherit; color: inherit;
background: none; border: none; padding: 0; margin: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (hover: hover) {
.tut-rules-link:hover { text-decoration-color: var(--accent); }
}
.tut-rules-link:focus-visible { outline: none; text-decoration-color: var(--accent); }
/* Blinken des gerade erklärten Elements — endlos, JS entfernt die Klasse beim
Weiterschalten. Nur Opacity → layout-neutral, kein Reflow der Spielfläche. */
@keyframes tutorial-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.tutorial-blink { animation: tutorial-blink 1.0s ease-in-out infinite; }
/* Settings ohne echte Auswahl (nur ein Wert übrig nach Frontend-Options-
Filter): keine fette Box, keine Click-Affordance — der Wert liest sich wie
eine normale Aussage im Fließtext. Der span-Wrapper bleibt nur deshalb, damit
der Punctuation-Glue-Regex (renderSettingsProse) trailing-Satzzeichen
weiter einfangen kann. */
.prose-val--plain {
font-weight: inherit;
display: inline;
}
/* Einzige spielbare Sprache: kein editierbarer Wert, aber unterstrichen und
anklickbar (öffnet die Sprachregeln). Als gerendert, daher die
UA-Button-Defaults (Fläche, Padding, Zentrierung) neutralisieren, damit der
Text nahtlos im Fließtext sitzt — nur die Unterstreichung + der Zeiger
heben ihn hervor. */
button.prose-lang-rules {
font: inherit; color: inherit;
background: none; border: none; padding: 0; margin: 0;
text-align: inherit; white-space: normal;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
@media (hover: hover) {
button.prose-lang-rules:hover { text-decoration-color: var(--accent); }
}
button.prose-lang-rules:focus-visible { outline: none; text-decoration-color: var(--accent); }
/* Trailing-Punctuation, die per renderSettingsProse() vom Fließtext
in den Wert-Button verschoben wird, damit das Satzzeichen nie eine
neue Zeile beginnt. Im fett gesetzten Button auf normale Schrift-
stärke zurückdrehen — sonst wäre auch der Punkt fett. */
.prose-val .prose-punct { font-weight: 400; }
/* Setting-Flash: blinkt für Mitspieler die vom Host frisch geänderten
Werte, bis sie „Einverstanden" klicken. Wird in main.js (valBtn) per
`.prose-val--flash` an alle Chunks (Wörter) eines geänderten Keys
verteilt; ein Setting kann aus mehreren Chunks bestehen — sie blinken
synchron, weil sie dieselbe Animation mit derselben Dauer haben. */
.prose-val--flash {
animation: prose-val-flash 1.2s ease-in-out infinite;
}
@keyframes prose-val-flash {
0%, 100% { background: transparent; }
50% { background: var(--accent); }
}
/* Zustimmungs-Zeile (nur Nicht-Host) — lebt in der fixen Bottom-Bar
(#lobby-bar) zwischen Spielerliste und Buttons. Der vertikale Abstand
kommt aus dem `gap: 10px` der Bar; der border-top trennt die Zeile
sichtbar von der Spielerliste darüber. */
#lobby-consent {
display: flex;
align-items: center;
gap: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
#lobby-consent-text {
font-size: 0.95rem;
font-weight: 700;
color: var(--muted);
}
/* Bestätigtes „Ich bin dabei!" — Grün als Erfolgs-Signalfarbe, nicht `--accent`:
die Akzentfarbe darf im Hell-Theme nicht als Vordergrund-Text auftauchen
(Gold auf Creme = unlesbar; siehe CLAUDE.md). */
#lobby-consent-text.is-agreed { color: var(--green); }
/* ✓ neben einem Mitspieler, der den Einstellungen zugestimmt hat. Grün
konsistent zum „Ich bin dabei!"-Text — beide signalisieren denselben
Zustand „hat zugestimmt". In der Revanche-Lobby markiert dasselbe ✓ die
Teilnehmer, die die Revanche angenommen haben. */
.player-agreed {
color: var(--green);
font-weight: 800;
font-size: 0.9rem;
margin-left: 2px;
}
/* ── Revanche ───────────────────────────────────────────────── */
/* Plakette im Lobby-Header: kennzeichnet eine Revanche-Lobby (Einstellungen
gesperrt, Teilnehmer des Vorspiels gelistet). Akzentfarbe nur als Rahmen —
Text bleibt var(--text); --accent ist nie Textfarbe (siehe CLAUDE.md). */
.lobby-rematch-badge {
display: inline-flex;
align-items: center;
gap: 4px;
border: 1.5px solid var(--accent);
border-radius: 6px;
padding: 2px 10px;
font-weight: 800;
font-size: 0.9rem;
color: var(--text);
white-space: nowrap;
}
/* Revanche-Lobby: Teilnehmer, die nicht (mehr) teilnehmen können — Revanche
abgelehnt, anderes Spiel begonnen oder Einladungsfrist abgelaufen. */
.player-item.player-declined .pname {
text-decoration: line-through;
color: var(--muted);
}
.player-declined-x {
color: var(--red);
font-weight: 800;
font-size: 0.9rem;
margin-left: 2px;
}
/* Teilnehmer, die noch nicht auf die Einladung geantwortet haben. */
.player-item.player-pending { opacity: 0.65; }
/* ── Einstellungs-Auswahl-Popup ─────────────────────────────── */
.settings-popup-backdrop {
position: fixed; inset: 0;
z-index: 1100;
background: transparent;
}
/* Mobil: abdunkeln + leicht weichzeichnen (wie .modal-backdrop). */
.settings-popup-backdrop.mobile {
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
}
.settings-popup-backdrop.hidden { display: none; }
.settings-popup {
position: fixed;
z-index: 1101;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
padding: 6px;
width: min(320px, 92vw);
max-height: 70dvh;
overflow-y: auto;
/* Vertikales Scrollen erlaubt, horizontales Wischen geblockt — analog
.modal-body (siehe CLAUDE.md, Pull-to-refresh / scroll lock). */
touch-action: pan-y;
overscroll-behavior-x: none;
animation: fadeIn 0.12s;
}
.settings-popup.hidden { display: none; }
/* Mobil mittig statt am Element verankert. */
.settings-popup.mobile {
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%);
width: min(360px, 92vw);
max-height: 80dvh;
}
.settings-popup-opt {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
border-radius: var(--radius);
padding: 9px 11px;
cursor: pointer;
color: var(--text);
font: inherit;
transition: background 0.12s;
}
.settings-popup-opt:hover,
.settings-popup-opt:focus-visible { background: var(--surface2); outline: none; }
.settings-popup-opt.is-selected {
background: var(--surface2);
box-shadow: inset 3px 0 0 var(--accent);
}
.settings-popup-opt-label {
display: block;
font-weight: 700;
font-size: 0.92rem;
}
.settings-popup-opt-desc {
display: block;
margin-top: 3px;
font-size: 0.78rem;
line-height: 1.4;
color: var(--muted);
}
/* Allgemeiner Info-Kopf über den Optionen (z.B. Grundwertung im Spielmodus-
Popup) — durch eine Trennlinie von der Optionsliste abgesetzt. */
.settings-popup-intro {
padding: 7px 11px 9px;
margin-bottom: 4px;
border-bottom: 1px solid var(--border);
font-size: 0.78rem;
line-height: 1.4;
color: var(--muted);
/* '\n' im Intro-Text (z.B. Pangramm-Hinweis) erzeugt einen Zeilenumbruch;
normale einzeilige Intros sind unbeeinflusst. */
white-space: pre-line;
}
/* Sprachauswahl: zweigeteiltes Popup — oben die Sprachen, darunter die
Wortregeln der gewählten Sprache bzw. die beiden Spielart-Prinzipien,
getrennt durch eine waagerechte Linie.
Das Popup selbst scrollt dabei NICHT (overflow: hidden überschreibt die
Basisregel), stattdessen scrollt allein der Regel-Bereich: die Auswahl
bleibt immer sichtbar. Die Höhe kommt weiter aus max-height der Basisregel
(70dvh bzw. 80dvh mobil); min-height: 0 erlaubt dem Flex-Kind zu
schrumpfen, sonst würde es seinen Inhalt herausdrücken. */
.settings-popup.is-split {
display: flex; flex-direction: column;
overflow: hidden;
/* Etwas breiter als die reine Optionsliste — darunter steht Fließtext. */
width: min(420px, 92vw);
}
.settings-popup.is-split .settings-popup-opts { flex: 0 0 auto; }
.settings-popup.is-split .settings-popup-rules {
flex: 1 1 auto; min-height: 0;
display: flex; flex-direction: column;
margin-top: 6px; padding-top: 8px;
border-top: 1px solid var(--border);
}
/* Spielart-Popup: die beiden Prinzipien untereinander. Erster Absatz ohne
oberen Abstand, damit er direkt unter der Trennlinie sitzt. */
.settings-popup-principle { margin: 8px 0 0; }
.settings-popup-principle:first-child { margin-top: 0; }
.settings-popup-rules-body {
flex: 1 1 auto; min-height: 0;
overflow-y: auto;
padding: 0 11px 4px;
font-size: 0.82rem; line-height: 1.45;
color: var(--text);
/* Wie .modal-body: vertikal scrollen ja, seitliches Wischen nein
(siehe CLAUDE.md, Pull-to-refresh / scroll lock). */
touch-action: pan-y;
overscroll-behavior-x: none;
}
/* Dev: Texteingabe für feste Buchstaben. */
.settings-popup-form { padding: 6px; display: flex; flex-direction: column; gap: 10px; }
.settings-popup-form input {
width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text);
padding: 7px 9px;
font: inherit;
/* Kein CSS-uppercase — das würde ein getipptes `ß` als `SS` rendern. Die
Großschreibung macht JS live per upperWord (ß-erhaltend), siehe
openFixedLettersPopup. */
letter-spacing: 2px;
outline: none;
}
.settings-popup-form input.invalid { border-color: var(--err, #c44); }
.settings-popup-form-row { display: flex; justify-content: space-between; gap: 8px; }
/* ── Solution word list (gameover) ──────────────────────────── */
.solution-section { margin-top: 20px; }
.solution-section .panel-title { margin-bottom: 8px; }
/* Section-Divider: dünne Linie von Card-Rand zu Card-Rand (negative
seitliche Margin gleicht das 20px-Padding von #gameover-content aus).
Optisches Pendant zur Linie OBERHALB des Auflösung-Titels. */
.section-divider {
border: 0;
border-top: 1px solid var(--border);
margin: 16px -20px 0;
}
.solution-grid {
display: flex; flex-wrap: wrap; gap: 5px;
padding-right: 4px;
}
/* Verfügbare Buchstaben oberhalb der Wortliste — Optik wie die
In-Game-Buchstabentasten (.hex-center / .hex-outer in style.css):
var(--surface) als Fläche, kein Rand, gleicher Drop-Shadow wie
der #key-raised-Filter im Hex-SVG. Pflichtbuchstabe übernimmt im
Light-Theme die Akzentfarbe (analog .light-theme .hex-center). */
.sol-letter {
display: inline-flex; align-items: center; justify-content: center;
width: 2.2rem; height: 2.2rem; border-radius: 6px;
font-size: 1.1rem; font-weight: 800;
background: var(--surface); color: var(--text);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.55);
}
.light-theme .sol-letter.sol-letter-center {
background: var(--accent); color: #fff;
}
.sol-word {
padding: 4px 10px; border-radius: 20px; font-size: 0.82rem; font-weight: 600;
letter-spacing: 0.5px; cursor: default; border: 1.5px solid transparent;
}
/* Fallback wenn kein colorMap vorhanden (Solo-Spiel ohne Farben).
Textfarbe bleibt regulär — Spielerinformation steckt allein in
Background/Border (siehe inline-Style aus renderSolutionGrid). */
.sol-word.found { background: rgba(34,197,94,0.18); }
.sol-word.found.mine { background: rgba(34,197,94,0.42); border-color: var(--green); }
.sol-word.pangram { font-weight: 900; letter-spacing: 0.15em; }
.sol-word.pangram.missed { opacity: 1; }
/* Nicht gefundene Wörter: klar grau */
.sol-word.missed { background: rgba(255,255,255,0.05); color: var(--muted); border-color: transparent; }
.sol-word[title] { cursor: pointer; }
/* ── Sinn-Suche: Auflösung als Tabelle ───────────────────────────
Ein Wort je Zeile in der Reihenfolge, in der es beim betrachtenden
Spieler erschien; rechts die Wisch-Zählung (leer bei 0). Die
Ungelösten unterscheiden sich danach, ob der Spieler sie überhaupt
zu sehen bekam: gesehen → nur Rahmen, nie gesehen → gar nichts. */
/* Volle Breite, damit die Linie unter der Überschrift bis zum rechten Rand
läuft. Die Wortspalte bleibt trotzdem inhaltsbreit (width:1% = schrumpfe auf
den Inhalt), sodass der Rest an die Wisch-Spalte geht und die Trennlinie
dicht an den Wörtern steht. */
.solution-grid > .sol-table { flex: 1 1 100%; }
.sol-table { border-collapse: collapse; width: 100%; }
.sol-table td { padding: 2px 0; vertical-align: middle; }
.sol-table--skips th.sol-word-cell,
.sol-table--skips td.sol-word-cell { width: 1%; white-space: nowrap; }
/* In der Pillen-Wolke ist .sol-word ein Flex-Kind; in der Tabelle steht es
inline und bräuchte sonst Platz für seine senkrechte Polsterung. */
.sol-table .sol-word { display: inline-block; }
.sol-table .sol-skips { padding-left: 10px; text-align: left; }
/* Umbruch erlaubt: bei vielen Spielern passen die Zahlen sonst nicht in die
Spalte, und die Tabelle würde die Karte seitlich aufschieben (CLAUDE.md:
lieber umbrechen als waagerecht scrollen). Die einzelne Zahl bleibt
zusammen — umbrochen wird nur ZWISCHEN den Spielern. */
.sol-table td.sol-skips {
white-space: normal; font-size: 0.78rem; font-weight: 600; color: var(--muted);
}
/* Je Spieler ein PLATZ fester Breite, in seiner Spielerfarbe (Inline-Style aus
huntSolutionTableHTML) — der eigene ganz links. Die feste Breite ist der
ganze Trick: dadurch stehen die Zahlen eines Spielers in allen Zeilen
untereinander, auch wenn er ein Wort ausgelassen hat (dann ist sein Platz
leer). Echte Tabellenspalten wären dafür der schwerere Weg — ihre Zahl
hinge an der Spielerzahl. */
.sol-table .sol-skip {
display: inline-block; white-space: nowrap; font-weight: 700;
min-width: 2.6em; margin-right: 6px;
}
.sol-table .sol-skip:last-child { margin-right: 0; }
/* Überschriften: zurückhaltend, mit EINER Linie darunter. */
.sol-table th {
padding: 0 0 4px; text-align: left; vertical-align: bottom;
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
color: var(--muted); border-bottom: 1px solid var(--border);
}
/* Und EINE Linie zwischen den beiden Spalten (nur wenn es zwei gibt) —
außen bleibt die Tabelle randlos. */
.sol-table--skips th.sol-word-cell,
.sol-table--skips td.sol-word-cell { padding-right: 10px; border-right: 1px solid var(--border); }
.sol-word.missed.hunt-seen { background: none; border-color: var(--muted); }
.sol-word.missed.hunt-unseen { background: none; border-color: transparent; }
/* ── Compact inline settings ─────────────────────────────────── */
.settings-compact {
display: flex; flex-direction: column; gap: 0;
margin-bottom: 14px;
}
.settings-compact-cell {
display: flex; align-items: center; justify-content: space-between;
padding: 5px 2px; gap: 8px;
}
.settings-compact-cell label {
font-size: 0.78rem; color: var(--muted); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
}
.settings-compact-cell select,
.settings-compact-cell input[type=number],
.settings-compact-cell input[type=text] {
width: 54px; background: var(--bg); border: 1px solid var(--border);
border-radius: 5px; color: var(--text); padding: 3px 6px; font-size: 0.88rem;
outline: none; text-align: right; -moz-appearance: textfield;
}
.settings-compact-cell select { width: auto; text-align: left; }
.settings-compact-cell input[type=text] { width: 110px; text-align: left; letter-spacing: 1px; }
.settings-compact-cell input[type=text].invalid { border-color: var(--err, #c44); }
.settings-compact-cell select:focus,
.settings-compact-cell input[type=number]:focus,
.settings-compact-cell input[type=text]:focus { border-color: var(--accent); }
.settings-compact-cell select:disabled,
.settings-compact-cell input[type=number]:disabled,
.settings-compact-cell input[type=text]:disabled {
color: var(--muted); opacity: 1; -webkit-text-fill-color: var(--muted);
}
/* Dev-only Settings-Zeilen: ohne body.dev-mode komplett ausblenden. */
.settings-compact-cell--dev-only { display: none; }
body.dev-mode .settings-compact-cell--dev-only { display: flex; }
/* Gruppierte Sub-Einstellungen (z.B. Tipps): umrahmter Block mit Überschrift,
visuelles Ausgrauen wenn die ganze Gruppe aus ist (`is-off`) oder nur die
Sub-Controls (`is-partial`). Disabled-Inputs werden vom Browser bereits
visuell zurückgenommen — die Klassen geben dem ganzen Block zusätzliche
Trauerränder. */
.settings-group {
margin: 6px 0;
padding: 6px 10px 4px;
border: 1px solid var(--border);
border-radius: 8px;
transition: opacity 0.2s, border-color 0.2s;
}
.settings-group-head {
font-size: 0.72rem; font-weight: 700; color: var(--muted);
letter-spacing: 0.5px; text-transform: uppercase;
padding: 2px 0 4px;
}
.settings-group-disabled-msg {
font-size: 0.78rem; line-height: 1.35; color: var(--muted);
padding: 6px 8px; margin-bottom: 4px;
background: var(--bg); border: 1px dashed var(--border); border-radius: 6px;
}
.settings-group-disabled-msg.flash {
animation: hint-msg-flash 0.6s ease-out;
}
@keyframes hint-msg-flash {
0% { background: rgba(181,90,46,0.35); border-color: var(--accent, #b55a2e); }
100% { background: var(--bg); border-color: var(--border); }
}
.settings-group.is-off { opacity: 0.55; cursor: pointer; }
.settings-group.is-off .settings-group-body { pointer-events: none; }
.settings-group.is-partial .settings-group-body .settings-compact-cell:not(:first-child) {
opacity: 0.55;
}
/* Toggle-Zeilen innerhalb der Settings-Gruppe — Schriftbild identisch zu den
Dropdown-Zellen (uppercase, gemuted, 0.78rem). `white-space: normal` erlaubt
längeren Labels (z.B. mit Klammer-Zusatz) den Umbruch. */
.settings-compact-cell--toggle label {
font-size: 0.78rem; color: var(--muted); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.4px;
white-space: normal;
}
/* Kleine ℹ-Schaltfläche neben Dropdowns mit Erklärung dahinter. */
.info-btn {
flex-shrink: 0;
width: 22px; height: 22px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--border); border-radius: 50%;
color: var(--muted); font-size: 0.78rem; cursor: pointer;
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.info-btn:hover { border-color: var(--accent); color: var(--accent-text); }
.info-btn[aria-expanded="true"] {
background: var(--accent); border-color: var(--accent); color: #fff;
}
/* ── Player-words popup (in game) ────────────────────────────── */
#player-words-popup {
position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px 18px;
z-index: 6000; min-width: 220px; max-width: 340px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
display: none; animation: fadeIn 0.18s;
}
#player-words-popup.visible { display: block; }
.pw-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px; gap: 8px;
}
.pw-title { font-size: 0.9rem; font-weight: 700; }
.pw-words {
display: flex; flex-wrap: wrap; gap: 5px;
max-height: 180px; overflow-y: auto;
}
.pw-word {
padding: 3px 9px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
background: rgba(255,255,255,0.08); color: var(--text); letter-spacing: 0.5px;
}
.pw-subtitle {
font-size: 0.78rem; color: var(--muted);
margin: -4px 0 10px;
letter-spacing: 0.2px;
}
.pw-subtitle .pw-total { color: var(--text); font-weight: 700; }
.pw-subtitle .pw-bonus-pos { color: #fbbf24; font-weight: 600; }
.pw-word.pw-hidden {
display: inline-flex; gap: 3px; align-items: center;
padding: 4px 8px; background: rgba(255,255,255,0.05);
}
.pw-word.pw-hidden .pw-box {
display: inline-block; width: 0.55rem; height: 0.85rem;
border: 1px solid var(--muted); border-radius: 2px;
background: rgba(255,255,255,0.04);
}
/* ── Resign popup (timer click) ────────────────────────────────
Vertikal/horizontal mittig auf dem Screen — gleiche Position wie
die zentralen Steal/Lost-Toast-Boxen, damit „Nachricht in der Mitte"
überall einheitlich wirkt. */
#resign-popup {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
background: var(--surface); border: 1px solid var(--text);
border-radius: var(--radius); padding: 18px 24px;
z-index: 6000; min-width: 240px; text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
display: none; animation: fadeIn 0.18s;
}
#resign-popup.visible { display: block; }
#resign-popup p { font-size: 0.88rem; color: var(--muted); margin-bottom: 12px; }
#resign-popup .resign-note { font-size: 0.78rem; opacity: 0.85; }
.resign-btns { display: flex; gap: 8px; justify-content: center; }
.timer-display { cursor: pointer; }
.timer-display:hover { opacity: 0.8; }
/* ── Wiktionary-Popup (Spielende, Wort-Klick) ────────────────── */
#wikt-overlay {
position: fixed; inset: 0; z-index: 7000;
background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center;
animation: fadeIn 0.15s;
/* Safe-Area: zentriertes #wikt-card im Cutout-freien Bereich halten. */
padding:
var(--safe-top)
var(--safe-right)
var(--safe-bottom)
var(--safe-left);
}
#wikt-overlay.hidden { display: none; }
#wikt-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 20px 22px;
width: min(480px, 92vw); max-height: 80dvh;
display: flex; flex-direction: column;
box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
#wikt-card-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
margin-bottom: 14px;
}
/* Knöpfe rechts in der Kopfzeile. `margin-left: auto` schiebt sie samt
Schließen ans Ende, das Wort bleibt links — mit space-between allein stünden
sie sonst zu dritt auseinandergezogen. */
#wikt-head-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
#wikt-head-actions:empty { display: none; }
/* Die Knöpfe rechts stehen bewusst NICHT auf der Grundlinie des Worts: ein
Knopf mit Symbol statt Text hat keine eigene Grundlinie, sie wird aus der
Unterkante des Symbols gefälscht — dadurch säße der Daumen höher als das
Schließen. Beide deshalb mittig ausrichten, dann sitzen sie gleich hoch. */
#wikt-head-actions, #btn-close-wikt { align-self: center; }
/* Und gleich GROSS: dieselbe Polsterung (aus .btn-sm) und eine feste
Zeilenhöhe, die für Text wie Symbol dieselbe Kastenhöhe ergibt. */
#wikt-card-head .btn-sm { line-height: 1.2; }
/* Daumen runter in der Kopfzeile (Sinn-Suche-Auflösung): gleiche Geste wie an
den Bedeutungen, deshalb dasselbe Symbol und dieselbe Farbe im gesetzten
Zustand. Kein Akzent als Textfarbe (Theme-Regel). Das Symbol misst 1.2em —
genau die Zeilenhöhe des ✕ daneben, also derselbe Inhaltskasten. */
.wikt-head-thumb { display: inline-flex; align-items: center; }
.wikt-head-thumb .dh-thumb { display: block; width: 1.2em; height: 1.2em; fill: currentColor; }
.wikt-head-thumb.is-on { color: var(--red); }
#wikt-word {
font-size: 1.4rem; font-weight: 800; letter-spacing: -0.3px;
}
#wikt-card-body { overflow-y: auto; flex: 1; }
/* ── Definitions-Tipp-Leiste (Feature definitionsHint) ───────────────────────
Im Fluss zwischen Titelzeile und Punkteanzeige (erstes Kind der .game-left).
Nimmt Höhe vom Grid-Bereich (flex:0 0 auto), max 1/3; der Body scrollt. */
#defhint-overlay {
flex: 0 0 auto;
width: 100%;
margin-bottom: 4px;
}
#defhint-overlay.hidden { display: none; }
#defhint-card {
position: relative;
width: 100%; max-height: 33vh;
display: flex; flex-direction: column;
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
padding: 8px 12px 10px;
animation: fadeIn 0.15s;
}
/* Fund des Worts: Hintergrund zweimal kurz grün, dann verschwindet die Leiste
(JS entfernt sie nach animationend). Nur Hintergrund, kein Rand. */
@keyframes defhint-found-blink {
0% { background: var(--surface); }
20% { background: var(--green); }
40% { background: var(--surface); }
60% { background: var(--green); }
80% { background: var(--surface); }
100% { background: var(--surface); }
}
#defhint-card.defhint-found { animation: defhint-found-blink 0.9s ease; }
/* Kein Titel mehr — nur ein kleiner Schließen-Button oben rechts, aus dem
Textfluss genommen; der Body reserviert rechts Platz dafür. */
#btn-close-defhint {
position: absolute; top: 4px; right: 6px; z-index: 1;
padding: 2px 6px; line-height: 1;
}
#defhint-body {
overflow-y: auto; flex: 1;
padding-right: 24px; /* Platz für den ✕ oben rechts */
/* Scroll-Lock-Regel (siehe CLAUDE.md): vertikal ja, seitliches Wischen nein. */
touch-action: pan-y; overscroll-behavior-x: none;
font-size: 0.86rem; line-height: 1.4; color: var(--text);
}
/* Eine Bedeutung pro Block, KEIN Aufzählungspunkt/-nummer; mehrere durch eine
dünne Linie getrennt. */
.defhint-sense { margin: 0; }
.defhint-sep {
border: 0; border-top: 1px solid var(--border);
margin: 6px 0;
}
.defhint-note { color: var(--muted); font-style: italic; margin: 2px 0; }
.defhint-license { color: var(--muted); font-size: 0.72rem; margin: 6px 0 0; }
/* ── Definitionsjagd (Feature senseSnatch) ────────────────────────────────
Tritt an die Stelle des Wörter-Gitters: drei gleich hohe Slots zwischen
Punkteanzeige und Eingabe. Die Slot-HÖHE ist fix (1fr je Slot im Grid) —
längere Bedeutungen scrollen im Slot, statt die Nachbarn zu stauchen. So
springt beim Nachrücken eines Wortes nichts im Layout. */
.defhunt-slots {
display: none;
/* Schriftgröße der Bedeutungen — per Zoom-Geste umschaltbar (JS setzt die
Variable auf DEFHUNT_FONT_SIZES[stufe]). Zentral hier, damit die Geste
immer ALLE Kästchen gleichzeitig trifft: ein Wert, drei Slots. */
--dh-font: 0.86rem;
}
body.game-mode .defhunt-slots:not([hidden]) {
display: flex;
flex-direction: column;
width: 100%;
flex: 1 1 0;
min-height: 0;
/* Anker für die Quellenzeile (siehe .dh-license) — sie soll direkt an der
Unterkante des letzten Kästchens hängen, nicht am Ende der Spielfläche. */
position: relative;
}
/* Während zwei Finger zoomen, darf der Browser die Bewegung nicht als
senkrechtes Scrollen beanspruchen — sonst bricht er unsere Pointer-Ereignisse
mit pointercancel ab. Nur für die Dauer der Geste (JS setzt/entfernt die
Klasse), damit das Scrollen im Slot sonst unverändert funktioniert. */
.dh-grid.dh-pinching, .dh-grid.dh-pinching .dh-slot, .dh-grid.dh-pinching .dh-body {
touch-action: none;
}
/* Column-Flex statt CSS-Grid: die naheliegende Grid-Variante bräuchte die
Slot-Anzahl als Custom-Property in der Zeilen-Wiederholung, und das ist
fragil. `flex: 1 1 0` auf den Slots leistet dasselbe — alle Slots gleich
hoch, unabhängig vom Inhalt. */
.dh-grid {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
gap: 4px;
padding: 0 6px;
/* Ein weggewischter Slot fährt nach rechts aus dem Bild — hier wird er
abgeschnitten, statt über den Rand der Spielfläche zu wandern. */
overflow: hidden;
}
.dh-slot {
position: relative;
flex: 1 1 0;
min-height: 0;
overflow: hidden;
display: flex;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
/* Wisch-Geste (Feature „Bedeutung wegwischen"): senkrecht scrollt der Slot
wie gehabt, waagerecht beansprucht der Browser nichts — genau deshalb
erreichen uns die pointermove-Ereignisse (siehe CLAUDE.md, Scroll-Sperre). */
touch-action: pan-y;
transition: transform 0.22s ease, opacity 0.22s ease;
}
/* Während der Finger zieht, folgt der Slot ohne Nachlauf. */
.dh-slot.dh-dragging { transition: none; }
/* Raus in Wischrichtung: `--dh-skip-dir` ist +1 (rechts) oder -1 (links) und
wird beim Wischen von skipDefHuntSlot gesetzt. Links und rechts sind
dieselbe Handlung — die Richtung lebt nur in dieser Animation. Ohne die
Variable (etwa wenn der Wisch nicht von der Geste kam) gilt rechts. */
.dh-slot.dh-skip-out { transform: translateX(calc(var(--dh-skip-dir, 1) * 115%)); opacity: 0; }
/* … und der Nachrücker kommt von der GEGENSEITE herein. Die Klasse setzt nur
den Startzustand (ohne Übergang); ihr Entfernen fährt ihn dann an. */
.dh-slot.dh-skip-in { transform: translateX(calc(var(--dh-skip-dir, 1) * -25%)); opacity: 0; transition: none; }
/* Fund: der RAHMEN leuchtet einmal grün auf, danach tauscht JS den Inhalt aus.
Bewusst nicht der Hintergrund und bewusst nur einmal — der Text bleibt so
durchgehend lesbar, und die fliegende Punktzahl (.score-pop) ist ohnehin das
auffällige Signal. Zweimaliges Hintergrund-Blinken übertönte sie.
Der Ring liegt INSET. Nach außen (`0 0 0 8px`) schnitt ihn `overflow: hidden`
auf .dh-grid ab — dem obersten Kasten fehlte die obere Kante, dem untersten
die untere. Das Klipping ist dort nötig (ein weggewischter Kasten soll nicht
über den Rand der Spielfläche wandern), also muss der Ring nach innen.
Die Dicke steckt weiterhin im Schatten, nicht in border-width: eine geänderte
Rahmenbreite verschöbe das Layout im Kasten und ließe den Text zucken. */
/* Fund-Blitz am Kastenrahmen. Die Farbe steckt in `--dh-found`: beim EIGENEN
Fund bleibt es beim Grün (Erfolg), schnappt ein Mitspieler das Wort weg,
setzt onDefHuntResolved dort dessen Spielerfarbe — so ist ohne Lesen zu
sehen, wer zugegriffen hat. */
@keyframes defhunt-found-flash {
0% { border-color: var(--border); box-shadow: none; }
25% { border-color: var(--dh-found, var(--green));
box-shadow: inset 0 0 0 8px var(--dh-found, var(--green)); }
100% { border-color: var(--border); box-shadow: none; }
}
.dh-slot.dh-found { animation: defhunt-found-flash 0.9s ease; }
/* Eine Bedeutung ist nachgerückt, während der Spieler selbst gescrollt hatte:
dann wird NICHT gesprungen (das riss ihm die gelesene Zeile weg), sondern der
Kasten blinkt zweimal sanft. --surface2 ist der „eine Stufe daneben"-Ton
beider Themes (im hellen ein weiches Grau), also kein Farbsignal — Grün und
Rot sind hier bereits mit Fund und Wisch-Abzug belegt. */
@keyframes defhunt-new-sense-pulse {
0%, 100% { background: var(--surface); }
50% { background: var(--surface2); }
}
.dh-slot.dh-new-sense { animation: defhunt-new-sense-pulse 0.65s ease 2; }
/* Es steht noch Inhalt außerhalb des sichtbaren Bereichs — unten, oben oder
beides (JS setzt die Klassen, siehe updateDefHuntOverflow). Je Richtung zwei
Signale:
(a) die äußersten ~1,5 Zeilen laufen sanft aus — ein angeschnittenes Wort
sagt „hier geht es weiter" deutlicher als eine harte Kante;
(b) ein Pfeil in der jeweiligen Ecke rechts.
Die Maske liegt auf .dh-body, die Pfeile bewusst NICHT: sie säßen sonst
mitten im ausgeblendeten Bereich und verschwänden gerade dann, wenn sie
gebraucht werden.
Eine Maske für beide Richtungen, gesteuert über zwei Custom Properties: mit
vier Einzelregeln (keine/oben/unten/beide) liefe man Gefahr, eine Kombination
zu vergessen. 2.1em = 1,5 Zeilen bei line-height 1.4; `em` bezieht sich hier
auf --dh-font, die Maske wandert also mit der Zoom-Stufe mit. Die Regel greift
nur, wenn wirklich etwas auszublenden ist — ohne Klasse bleibt .dh-body ganz
ohne Maske. */
.dh-slot.dh-more-below .dh-body,
.dh-slot.dh-more-above .dh-body {
--dh-fade-top: 0em;
--dh-fade-bottom: 0em;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0, #000 var(--dh-fade-top),
#000 calc(100% - var(--dh-fade-bottom)), transparent 100%);
mask-image: linear-gradient(to bottom,
transparent 0, #000 var(--dh-fade-top),
#000 calc(100% - var(--dh-fade-bottom)), transparent 100%);
}
.dh-slot.dh-more-below .dh-body { --dh-fade-bottom: 2.1em; }
.dh-slot.dh-more-above .dh-body { --dh-fade-top: 2.1em; }
.dh-slot.dh-more-below::after,
.dh-slot.dh-more-above::before {
position: absolute; left: 7px;
color: var(--muted);
font-size: 0.95rem; line-height: 1;
pointer-events: none;
}
/* LINKS, nicht rechts: rechts unten sitzt jetzt die Bewertungszeile der
letzten Bedeutung (.dh-rate), und der Pfeil läge sonst darüber. */
.dh-slot.dh-more-below::after { content: '▾'; bottom: 1px; }
.dh-slot.dh-more-above::before { content: '▴'; top: 1px; }
.dh-body {
/* Positionierungs-Anker: nur so misst `offsetTop` einer .dh-sense relativ zum
scrollenden Kasten — genau der Wert, den das Auto-Scrollen zur neu
nachgerückten Bedeutung als scrollTop braucht. */
position: relative;
flex: 1 1 auto;
min-width: 0;
overflow-y: auto;
padding: 6px 10px;
/* Scroll-Lock-Regel (siehe CLAUDE.md): vertikal ja, seitliches Wischen nein. */
touch-action: pan-y; overscroll-behavior-x: none;
font-size: var(--dh-font); line-height: 1.4; color: var(--text);
}
/* Bedeutungen wie im Definitions-Tipp: ein Block je Bedeutung, ohne
Aufzählungszeichen, getrennt durch eine dünne Linie. */
.dh-sense { margin: 0; }
.dh-sep { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
/* Bewertung EINER Bedeutung: eigene, rechtsbündige Zeile unter dem Text statt
seitlich daneben. So kann sie mit keinem noch so langen Text kollidieren und
die Knöpfe bleiben antippbar; sie kostet dafür etwas Höhe.
Dieselbe Zeile dient im Wiktionary-Popup der Auflösung (dort in einem ). */
.dh-rate {
display: flex; justify-content: flex-end; align-items: center;
gap: 2px; margin-top: 1px;
}
.dh-rate-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 26px; padding: 0;
border: 0; border-radius: 6px; background: none;
cursor: pointer; color: var(--muted);
-webkit-tap-highlight-color: transparent;
/* Kein 300-ms-Doppeltipp-Verzug (siehe CLAUDE.md „Input responsiveness"). */
touch-action: manipulation;
}
/* Ist bewertet, bleibt nur der gewählte Daumen stehen — `display: inline-flex`
oben würde das eingebaute [hidden] sonst überstimmen. */
.dh-rate-btn[hidden] { display: none; }
.dh-rate-btn:hover { color: var(--text); }
.dh-rate-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* `fill: currentColor` macht die Farbe zur Sache des Themes — deshalb eine
gezeichnete Hand statt eines Emojis, das seine Farben mitbrächte. */
.dh-rate-btn .dh-thumb { display: block; width: 15px; height: 15px; fill: currentColor; }
.dh-rate-up.is-on { color: var(--green-soft); }
.dh-rate-down.is-on { color: var(--red); }
.dh-note { color: var(--muted); font-style: italic; margin: 2px 0; }
/* Vorrat erschöpft, während die Runde weiterläuft: ein einzelner Kasten statt
mehrerer leerer. Ruhig gehalten — das ist eine Auskunft, keine Niederlage. */
.dh-slot--done .dh-body {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; text-align: center;
}
.dh-done-title { margin: 0; font-weight: 600; }
/* Auflösung eines verlorenen Worts: kurz mittig im Kasten (Dauer steht in
DEFHUNT_REVEAL_MS). Bewusst ruhig (kein Akzent-Hintergrund, kein
Blinken) — es ist eine Auskunft, keine Belohnung. `--accent-text` statt
`--accent`, siehe CLAUDE.md: Akzent als Textfarbe wäre im hellen Thema
nicht lesbar. */
.dh-reveal {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; height: 100%; min-height: 3em; text-align: center;
}
.dh-reveal-label { margin: 0; color: var(--muted); font-size: 0.85em; }
/* Der Name des Wegschnappers steht fett und in SEINER Farbe (inline gesetzt),
der Rest des Satzes bleibt zurückhaltend. */
.dh-reveal-taker { font-weight: 700; }
.dh-reveal-word {
margin: 0; font-weight: 700; font-size: 1.35em; color: var(--accent-text);
/* Lange Komposita sprengen den Kasten sonst waagerecht (siehe CLAUDE.md:
lieber umbrechen als seitwärts scrollen). */
overflow-wrap: anywhere;
}
/* Quellenangabe (Lizenz-Pflicht): rechtsbündig direkt UNTER dem letzten
Kästchen — auf der Papierfläche, aber bündig an dessen Unterkante.
`top: 100%` am .defhunt-slots-Anker statt `bottom: 0`: aus dem Fluss heraus
an die Unterkante der Kästchen gehängt. Mit `bottom: 0` an der ganzen
Spielfläche säße sie eine Zeile tiefer, mit `bottom: 0` an den Kästchen
dagegen INNEN im letzten Kasten — beides schon dagewesen.
Sie verbraucht keine eigene Höhe (sie ragt in die Zeile der Wort-Eingabe,
die meistens leer ist) und darf vom getippten Wort überdeckt werden
(.word-display-wrap trägt z-index 3): die Eingabe ist für den Moment
wichtiger, die Angabe steht danach wieder da.
pointer-events: die Fläche bleibt durchlässig, damit sie keinen unsichtbaren
Streifen über der Eingabezeile bildet — nur die Links selbst fangen Tippen
ab. Anklickbar müssen sie bleiben: sie sind die geforderte Attribution. */
.dh-license {
position: absolute; right: 0; top: 100%;
color: var(--muted); font-size: 0.72rem;
margin: 0; padding: 0 6px; text-align: right;
pointer-events: none;
}
.dh-license a { pointer-events: auto; }
.dh-license:empty { display: none; }
.wikt-entry { margin-bottom: 14px; }
.wikt-entry:last-child { margin-bottom: 0; }
.wikt-subentry + .wikt-subentry {
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.wikt-entry-title {
font-size: 1rem; font-weight: 700; color: var(--text);
margin: 0 0 8px;
}
.wikt-pos {
display: inline-block; font-size: 0.72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.6px;
color: var(--accent-text); background: rgba(181,90,46,0.12);
border-radius: 4px; padding: 2px 7px; margin-bottom: 7px;
}
/* Bedeutungen wie in der Sinn-Suche (.dh-sense/.dh-sep): ein Block je
Bedeutung, KEIN Aufzählungszeichen, getrennt durch eine dünne Linie. Der
Punkt davor war doppelt gemoppelt — die Linie trennt schon, und mit Punkt
sah dasselbe Wort im Popup anders aus als im Spiel. Abstände wie dort
(6px), damit der Wechsel zwischen beiden Ansichten nicht auffällt. */
.wikt-glosses { list-style: none; padding: 0; margin: 0; }
.wikt-glosses li {
font-size: 0.88rem; color: var(--muted); line-height: 1.5;
padding: 6px 0; border-bottom: 1px solid var(--border);
}
.wikt-glosses li:first-child { padding-top: 0; }
.wikt-glosses li:last-child { padding-bottom: 0; border-bottom: none; }
.wikt-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.wikt-cat {
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3px;
padding: 2px 8px; border-radius: 20px;
background: rgba(255,255,255,0.07); color: var(--muted);
border: 1px solid var(--border);
}
/* Ladezustand des Wiktionary-Popups. Nach 3 s ergänzt showWiktPopup eine
animierte Sanduhr (zähe Verbindung; die Fetches timeouten erst später). */
.wikt-loading { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 20px 0; }
.wikt-hourglass {
display: block;
font-size: 1.7rem;
margin-bottom: 6px;
animation: wikt-hourglass-turn 2.4s ease-in-out infinite;
}
/* Drehen–Pause–Drehen–Pause; 360° am Zyklusende = nahtloser Loop. */
@keyframes wikt-hourglass-turn {
0% { transform: rotate(0deg); }
25% { transform: rotate(180deg); }
50% { transform: rotate(180deg); }
75% { transform: rotate(360deg); }
100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.wikt-hourglass { animation: none; }
}
.wikt-empty { color: var(--muted); font-size: 0.88rem; text-align: center; padding: 16px 0; }
.wikt-ext-link {
font-size: 0.72rem; color: var(--muted); text-decoration: none;
border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px;
margin-left: auto;
}
.wikt-ext-link:hover { color: var(--text); border-color: var(--text); }
/* Inline-Link im „Wort existiert, aber ausgeschlossen"-Hinweis (Vorschlag-
Flow): öffnet das Sprachregeln-Popup. Textfarbe = --text (Theme-Regel:
--accent nie als Schriftfarbe), Unterstreichung signalisiert Klickbarkeit. */
.wikt-rules-link {
color: var(--text); text-decoration: underline; cursor: pointer;
font-weight: 700;
}
.wikt-rules-link:hover { text-decoration: none; }
/* Sprachregeln-Popup muss ÜBER dem Wiktionary-Popup (#wikt-overlay z-index
7000) liegen, wenn es aus diesem heraus geöffnet wird (Inline-Regel-Link),
und ebenso über der In-Game-Element-Tour (.tutorial-backdrop/-pop z-index
9998/9999), aus deren Eingabefeld-Schritt ein „hier"-Link die Regeln öffnet.
Schließen des Regel-Popups führt zurück auf die darunterliegende Ebene. */
#modal-lang-rules { z-index: 10000; }
/* Inline-„Warum?"-Link in den Wortregeln — als Link, nicht als Button gestylt. */
.rules-why-link {
background: none; border: none; padding: 0; margin: 0;
font: inherit; color: var(--text); text-decoration: underline;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rules-why-link:hover { opacity: 0.75; }
/* Gestapelte Buttons (Vorschlagen/Schließen, Beanstandungs-Gründe) im
Hinweis-Popup. */
.dev-actions--stack { flex-direction: column; align-items: stretch; }
/* Popup-Aktions-Buttons tragen lange Labels (das Wort im Vorschlag-Label, die
Beanstandungs-Gründe) und würden mit dem `.btn`-Default `white-space: nowrap`
breiter als das Popup → horizontales Scrollen. Generelle Regel (CLAUDE.md
„Kein horizontales Scrollen"): Labels brechen stattdessen um. `text-align:
center` zentriert die mehrzeiligen Textzeilen (justify-content zentriert nur
die einzelne Flex-Zeilenbox). */
.dev-actions .btn { white-space: normal; text-align: center; line-height: 1.25; }
/* Verborgene Bedeutung — nur in der Dev-/Whitelist-Ansicht sichtbar.
Text bleibt voll lesbar (Operator inspiziert ihn); markiert per linkem
Akzent-Rand + vorangestelltem Badge. --accent nur als Rand/Border, nie als
Textfarbe (Theme-Regel). */
.wikt-glosses li.wikt-gloss-filtered {
border-left: 3px solid var(--accent);
padding-left: 8px;
}
.wikt-glosses li.wikt-gloss-filtered .wikt-gloss-flag {
display: inline-block; margin-right: 6px; vertical-align: baseline;
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.4px;
text-transform: uppercase; white-space: nowrap;
padding: 1px 6px; border-radius: 10px;
border: 1px solid var(--accent); color: var(--text);
}
/* Kürzungshinweis in der Spieler-Ansicht (CC BY-SA: Änderung kenntlich). */
.wikt-filtered-note {
margin-top: 10px; font-size: 0.7rem; color: var(--muted);
font-style: italic; line-height: 1.4;
}
/* Kleingedrucktes am Ende des Eintrags. OHNE Trennlinie darüber: sie schnitt
den Nachweis von dem ab, was er belegt, und in einem Popup, das ohnehin nur
aus wenigen Blöcken besteht, war sie eine Linie zu viel. Der Abstand und die
kleinere, gedämpfte Schrift setzen die Zeile deutlich genug ab. */
.wikt-license {
margin-top: 14px;
font-size: 0.68rem; color: var(--muted); line-height: 1.4;
}
.wikt-license a { color: inherit; }
/* Bild + Bildnachweis der Bilder-Runde als eigener Block, abgeschlossen durch
eine Trennlinie: darüber steht, woher die ABBILDUNG kommt, darunter fängt das
Wort an (Einstufung, Bedeutungen). Die Linie gehört deshalb unter den Block
und nicht über ihn — oben schnitte sie das Bild von seinem Nachweis ab. */
.wikt-image-block {
margin-bottom: 12px;
padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
/* Bild aus dem Wiktionary (Krebsworträtsel-Bilderrunde). Die Höhe ist in `em`
der umgebenden Schrift gedeckelt, damit das Bild einer Schriftgrößen-Änderung
folgt und in der Eingabe-Karte nie die Tastatur wegdrückt. `max-width: 100%`
plus `height: auto` hält das Seitenverhältnis und verhindert waagerechtes
Überlaufen — ein Querbalken in einem Dialog wäre ein Fehler, keine Option. */
.wikt-image { margin: 0; }
.wikt-image img {
display: block; margin: 0 auto;
max-width: 100%; max-height: 16em; height: auto; width: auto;
border-radius: 8px;
}
/* Der Nachweis der DATEI — eigene Pflicht neben dem Wiktionary-Nachweis für den
Text, deshalb steht er unmittelbar am Bild und nicht unten bei der Quelle.
Rechtsbündig, damit er als Bildunterschrift gelesen wird und nicht als
Fließtext. */
.wikt-image-credit {
margin-top: 4px; text-align: right;
font-size: 0.62rem; color: var(--muted); line-height: 1.35;
}
.wikt-image-credit a { color: inherit; }
/* Die Einstufung steht UNTER der Quellenangabe und bekommt ihre eigene
Trennlinie: sonst klebte sie am Lizenztext, als gehörte sie dazu. Sie ist
aber die Frage NACH der Bedeutung („wie selten ist das?"), kein Kleingedrucktes. */
/* Der (i) neben der Einstufung: klein, rund, zurückhaltend — er erklärt eine
Nebenfrage und darf den gerahmten Wert daneben nicht überstrahlen. */
.wikt-rank-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.35em;
height: 1.35em;
margin-left: 4px;
padding: 0;
border: 1px solid var(--border);
border-radius: 50%;
background: none;
color: var(--muted);
font: 600 0.78em/1 system-ui, sans-serif;
cursor: pointer;
vertical-align: middle;
}
.wikt-rank-info:hover { border-color: var(--accent); color: var(--text); }
/* Eine Erklärung, die AUS dem Wiktionary-Popup heraus geöffnet wird, muss
darüber liegen: `.modal-backdrop` steht auf 1000, das Popup auf 7000 — ohne
eigene Ebene öffnete sie sich dahinter und wäre unsichtbar. Wie die
Grund-Auswahl: über 7000, aber unter den Sprachregeln (8000). */
.modal-backdrop.modal-over-wikt { z-index: 7500; }
.wikt-license + .wikt-rank-line {
margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
/* Die Zoomknöpfe liegen ÜBER dem Brett. Ihr Container spannt dabei mehr
Fläche auf als die beiden Knöpfe selbst (Abstand dazwischen, Ausrichtung) —
und schluckte damit Berührungen, die dem Brett oder den Knöpfen darunter
galten, in fingerkuppenbreitem Umkreis. Nur die Knöpfe selbst nehmen
Zeiger an; dasselbe Muster wie beim Hex-SVG (siehe CLAUDE.md). */
.crab-zoom { pointer-events: none; }
.crab-zoom-btn { pointer-events: auto; }
/* Dev-Controls (Rang + Kategorisieren/Sperren) ganz unten, klar abgesetzt — die
Linie schützt hier vor dem versehentlichen Griff zu einer Kuratierung. */
.wikt-dev-controls {
margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--border);
}
/* Am Spielende steht an derselben Stelle ein einzelner, dezenter Knopf
(„… beanstanden" / „… vorschlagen"). Ohne die Linie: sie machte aus einem
Knopf einen eigenen Abschnitt und gewichtete ihn schwerer, als er gemeint
ist. Der Abstand bleibt. */
.wikt-dev-controls--plain {
padding-top: 0; border-top: 0;
}
/* Beanstandungs-Auswahl als eigenes Popup (Sinn-Suche: der Auslöser ist der
Daumen in der Kopfzeile, unten gibt es keinen Kasten zum Aufklappen).
Über dem Wiktionary-Popup (7000), aber unter den Sprachregeln (8000) — die
öffnet der „Regeln"-Link aus dieser Auswahl heraus. Linksbündig statt
`.modal-card`-mittig: das ist Fließtext plus eine Liste von Gründen. */
#report-popup { z-index: 7600; }
#report-popup .modal-card { padding: 18px; text-align: left; max-width: 420px; }
#report-popup .dev-actions { margin-top: 0; }
/* Quellen-&-Lizenzen-Modal: Links nicht einfärben (kein UA-Blau), nur
unterstreichen — sie erben die Textfarbe der Umgebung. */
#modal-credits a { color: inherit; text-decoration: underline; }
.wikt-warning {
margin: 6px 0 4px; padding: 8px 11px;
background: rgba(220,150,40,0.12); border: 1px solid rgba(220,150,40,0.45);
border-radius: 7px;
font-size: 0.86rem; line-height: 1.4; color: var(--text);
}
.wikt-rank-info {
margin: 4px 0 8px; padding: 6px 10px;
background: var(--surface2); border-radius: 6px;
font-size: 0.82rem; color: var(--muted); font-weight: 600;
}
/* Einstufung des Wortes auf der ERSTEN Popup-Seite (Spieler-Ansicht, über den
Bedeutungen). Gerahmt ist NUR der Wert, nicht die Beschriftung davor: der
Rahmen ist der Knopf (er öffnet die Beanstandung), also umfasst er genau das
Klickbare. Der Wert trägt die Textfarbe (Prominenz über Fettung; --accent
wäre als Textfarbe im Hell-Theme unlesbar, siehe CLAUDE.md „Theme colors"). */
.wikt-rank-line {
margin: 0 0 10px;
font-size: 0.82rem; color: var(--muted); font-weight: 600;
}
.wikt-rank-val {
font: inherit; font-weight: 700; color: var(--text);
padding: 4px 9px; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface);
cursor: pointer;
}
.wikt-rank-val:hover { border-color: var(--accent); }
/* Quellen-Link — steht nur noch dort, wo es unten keine Lizenzzeile gibt
(kein Wiktionary-Eintrag gefunden). Über Bedeutungen wäre er deren Dopplung.
`.wikt-ext-link` hat für die alte Flex-Zeile ein `margin-left: auto`; im
Absatz hier ist es wirkungslos, der Link steht links. */
.wikt-source-line { margin: 8px 0 0; }
.wikt-en-fallback-bar {
display: flex; align-items: center; gap: 8px;
margin: 0 0 10px;
font-size: 0.76rem; color: var(--muted);
}
.wikt-info-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
background: transparent; color: var(--muted);
border: 1px solid var(--border); border-radius: 50%;
font-size: 0.72rem; font-weight: 700; font-style: italic;
cursor: pointer; padding: 0; line-height: 1;
}
.wikt-info-btn:hover { color: var(--text); border-color: var(--text); }
.wikt-en-fallback-info {
margin: 0 0 10px; padding: 8px 11px;
background: rgba(80,140,220,0.10); border: 1px solid rgba(80,140,220,0.35);
border-radius: 7px;
font-size: 0.82rem; line-height: 1.45; color: var(--text);
}
.wikt-en-fallback-info.hidden { display: none; }
/* Dev-Modus: Buttons zum Sperren/Whitelisten von Wörtern */
.dev-actions {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 10px;
}
.dev-btn {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(220,80,60,0.12); color: var(--text);
border: 1px solid rgba(220,80,60,0.4); border-radius: 6px;
padding: 5px 11px; font-size: 0.82rem; font-weight: 600;
cursor: pointer;
}
.dev-btn:hover { background: rgba(220,80,60,0.22); }
.dev-btn.dev-btn-ok { background: rgba(60,160,90,0.12); border-color: rgba(60,160,90,0.5); }
.dev-btn.dev-btn-ok:hover { background: rgba(60,160,90,0.22); }
/* Wrapper als Positionsanker: Prompt liegt absolut über dem Wort, schiebt nichts. */
.word-display-wrap {
position: relative;
width: 100%;
}
/* Wrapper für Wörter-Grid + überlagerte Tipp-Zeile.
Im Grid-Modus liegt die Tipp-Zeile absolut zentriert über dem Grid (sie
beansprucht KEINE eigene Layout-Zeile, ihr Buchstaben-Cursor blinkt direkt
im Grid). Außerhalb des Grid-Modus hat das Wörter-Grid display:none und die
Tipp-Zeile sitzt in normalem Fluss als kompakter Block. */
.word-grid-area {
position: relative;
width: 100%;
flex: 0 0 auto;
min-height: 0;
}
/* Im Grid-Modus halbiert dieses Wrapping-Element die .game-left-Höhe fest:
obere Hälfte = Score-Tabelle + Grid + überlagerter Cursor; untere Hälfte =
Hex-Buttons + Hex-Controls. Das Hex-SVG bekommt dadurch garantiert
(50% − Controls-Höhe). Inhalt als column flex, damit die Score-Tabelle
oben sitzt und das Grid den Rest füllt. */
body.game-mode .word-grid-area {
/* flex: 1 1 auto — der Grid-Bereich frisst den gesamten freien
Vertikalplatz oberhalb der Eingabe. Vorher (0 0 50%) klebte er
starr an der Bildschirmmitte, sodass auf Portrait-Phones bis zu
~30 px Leerraum zwischen Grid-Unterkante und Hex-Frame-Oberkante
übrig blieben (Hex-Region war 50% hoch, das quadratische SVG aber
nur so groß wie die Region-Breite). Mit `flex: 1 1 auto` zieht sich
das Grid bis direkt an die Hex-Region heran; die Hex-Region wird
dafür unten auf Inhaltsgröße geschrumpft (flex: 0 0 auto). */
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
body.game-mode .hex-region {
/* Region schrumpft auf SVG-Inhaltsgröße — kein Leerraum mehr über
dem Hex-Frame, weil die Region selbst exakt so hoch wird wie das
quadratische SVG. JS sizet das SVG (HexSvg.relayout) im Grid-Modus
auf min(game-left-W, game-left-H * 0.5, 500), damit die zirkuläre
Abhängigkeit zur eigenen Region-Höhe wegfällt. */
flex: 0 0 auto;
}
/* ── In-Game Score-Tabelle (kompakt, 2 Spalten) ─────────────── */
.grid-score-table {
display: none;
width: 100%;
flex: 0 0 auto;
}
body.game-mode .grid-score-table {
display: grid;
/* Zwei Spalten — bei ungerader Spielerzahl wandert der letzte Eintrag in
Spalte 1, Spalte 2 bleibt leer. */
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px 6px 6px;
font-size: 0.85rem;
line-height: 1.25;
}
.grid-score-table .gst-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 3px 8px;
border: 1px solid var(--score-color, var(--border));
border-radius: 4px;
background: var(--score-bg, rgba(255,255,255,0.04));
min-width: 0;
}
.grid-score-table .gst-box.me {
border-width: 2px;
padding: 2px 7px; /* gleicht Border-Verbreiterung aus → Box bleibt gleich groß */
}
.grid-score-table .gst-name {
color: var(--score-color, var(--text));
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1 1 auto;
}
.grid-score-table .gst-box.me .gst-name {
font-weight: 800;
}
.grid-score-table .gst-score {
color: var(--score-color, var(--text));
font-weight: 700;
font-variant-numeric: tabular-nums;
flex: 0 0 auto;
}
body.game-mode .word-grid-area .word-display-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Klicks fallen durch zur Wörter-Grid-Zelle darunter (die ohnehin nicht
interaktiv ist) — wichtiger ist, dass die Tipp-Zeile keinen Hex-Button
blockiert. */
pointer-events: none;
width: 100%;
z-index: 2;
}
body.game-mode .word-grid-area .word-display {
pointer-events: none;
}
/* Definitionsjagd: es gibt kein Wörter-Gitter, über dem die Tipp-Zeile
schweben könnte — absolut zentriert läge sie mitten im mittleren
Bedeutungs-Slot. Sie sitzt deshalb unten, direkt über dem Eingabe-Bereich.
Im Fluss reserviert sie GENAU EINE Zeile; das eigentliche Wort ist darin
absolut an der Unterkante verankert und wächst nach OBEN über die
Bedeutungen. So ändert ein langes getipptes Wort die Größe des
Definitionsbereichs nicht — es überdeckt ihn kurzzeitig. */
body.game-mode.defhunt-mode .word-grid-area .word-display-wrap {
position: relative;
/* top/left aus der Regel darüber MÜSSEN mit zurückgesetzt werden: bei
position:relative wirken sie als Verschiebung gegenüber der Flussposition
und schöben die Zeile um ein halbes Elternteil nach rechts unten (mitten
ins Hex-Rad). transform:none allein reicht dafür nicht. */
top: auto;
left: auto;
transform: none;
flex: 0 0 auto;
/* Eine Zeile in der Schriftgröße von .word-display (clamp weiter oben). */
height: clamp(0.95rem, 4.2vh, 2rem);
margin-top: 4px;
overflow: visible;
z-index: 3;
}
body.game-mode.defhunt-mode .word-grid-area .word-display {
position: absolute;
left: 0;
right: 0;
bottom: 0;
/* KEIN eigener Hintergrund: die Zeile ist die meiste Zeit leer, und ein
Untergrund läge dann als grauer Kasten auf der Quellenzeile der
Bedeutungen (real aufgetreten). Nur Text auf freier Fläche. */
background: none;
/* Mehrzeilig statt seitlich überlaufen — waagerechtes Scrollen ist überall
unerwünscht (siehe CLAUDE.md). */
white-space: normal;
overflow-wrap: anywhere;
}
/* ── Countdown Overlay ───────────────────────────────────────── */
#countdown-overlay {
/* `inset: 0` würde gegen die Layout-Viewport-Höhe gespannt (auf Firefox
Klar inkl. unsichtbarem Bereich hinter der Bottom-Toolbar) und die
vertikale Mitte säße unter der Bildschirmkante. Stattdessen explizit
mit --vh-basierter Höhe spannen — siehe head-script. */
position: fixed; top: 0; left: 0; right: 0;
height: var(--vh, 100dvh);
z-index: 9000;
/* Design/Typewriter: Papier-Hintergrund wie auf body — sonst stand
der Countdown auf einer flachen Surface-Farbe. */
background-color: var(--bg);
background-image: var(--paper);
background-repeat: repeat;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
pointer-events: none; opacity: 0;
transition: opacity 0.35s;
}
#countdown-overlay.visible { opacity: 1; pointer-events: all; }
#countdown-number {
/* Basisgröße × --cd-scale (JS setzt den Faktor pro Ziffer: 5 klein …
1 groß — siehe styleCountdownDigit). Farbe kommt ebenfalls per JS
(Button-Grün → Krabben-Orange); der --violet-Wert hier ist nur
Fallback vor dem ersten Tick. */
--cd-base: clamp(6rem, 22vw, 18rem);
font-size: calc(var(--cd-base) * var(--cd-scale, 1));
font-weight: 900;
color: var(--violet);
line-height: 1;
font-variant-numeric: tabular-nums;
/* Box-Höhe FIX = größte Ziffer (max --cd-scale = 1.38), Ziffer darin
zentriert. So bleibt der Hinweistext darunter von Anfang an auf seiner
(tiefen) Position und verrückt nicht, während die Zahlen wachsen. */
height: calc(var(--cd-base) * 1.38);
display: flex; align-items: center; justify-content: center;
animation: cdpop 0.7s ease-out forwards;
}
#countdown-number.go { color: var(--green); font-size: clamp(3rem, 14vw, 10rem); }
@keyframes cdpop {
0% { transform: scale(1.6); opacity: 0; }
45% { transform: scale(1.0); opacity: 1; }
100% { transform: scale(0.93); opacity: 1; }
}
/* Schluss-Bild des Countdowns: das Logo ersetzt das frühere „LOS!". Wird per
.show eingeblendet (Fade + Scale-Overshoot + Entschärfen des Blurs). */
#countdown-logo {
display: none;
width: min(74vw, 460px);
max-width: 92%;
height: auto;
}
#countdown-logo.show {
display: block;
animation: cdlogo 0.9s cubic-bezier(0.18, 0.7, 0.2, 1) forwards;
}
@keyframes cdlogo {
0% { opacity: 0; transform: scale(0.6); filter: blur(12px); }
55% { opacity: 1; transform: scale(1.05); filter: blur(0); }
100% { opacity: 1; transform: scale(1); }
}
#countdown-hint {
margin-top: 28px; font-size: 1.1rem; color: var(--muted); letter-spacing: 1px;
}
/* ── Fullscreen game mode ────────────────────────────────────── */
body.game-mode {
/* Firefox Klar / Android: 100svh und 100dvh werden gegen die LAYOUT-
Viewport-Höhe berechnet, die auch den Bereich HINTER der unteren
Toolbar einschließt → bottom-anchored Inhalt (Hex-Eingabe) landet
unter dem sichtbaren Rand und der Pre-Game-Countdown kippt nach
unten. Wir nutzen daher die per JS gesetzte --vh (= visualViewport
.height, der einzig zuverlässige Wert für die wirklich sichtbare
Pixelhöhe) und fallen auf 100dvh zurück, falls JS noch nicht lief.
Gleichzeitig override-en wir base-body min-height (100dvh) auf den
gleichen Wert — sonst würde der min-height-Wert die Höhe wieder
über die sichtbare Fläche heben. */
height: var(--vh, 100dvh);
min-height: var(--vh, 100dvh);
overflow: hidden; padding: 0; justify-content: flex-start;
overscroll-behavior: none;
}
body.game-mode #screen-game.active {
height: var(--vh, 100dvh); max-width: 100%; padding: 0; overflow: hidden;
align-items: stretch;
margin-top: 0; margin-bottom: 0; /* auto-margin-Zentrierung im game-mode deaktivieren */
/* Browser-Default-Gesten (Scroll/Pinch/Swipe-Nav) im Spielbildschirm
komplett unterdrücken. Scoped auf #screen-game — Overlays/Popups sind
body-level Geschwister und bleiben scrollbar. Taps feuern weiter über
pointerdown. */
touch-action: none;
}
body.game-mode .game-wrapper {
/* padding-bottom: 7px schafft die kleine Lücke zwischen Eingabe-Bereich
(SVG-Unterkante) und unterer Bildschirmkante — passend zur seitlichen
~7 px Lücke, die die SVG-ViewBox-Innenmarge zwischen Tasten und Bild-
schirmrand erzeugt. Seitlich und oben weiterhin 0, damit das Hex-SVG
seine bestehende Breite behält.
Safe-Area (Cutout/Home-Indicator): seit viewport-fit=cover im
Meta-Tag zeichnet die Seite edge-to-edge; wir sparen den vom Gerät
beanspruchten Rand selbst aus, indem wir env(safe-area-inset-*) auf
die Paddings addieren. Auf Geräten ohne Cutout sind alle Insets 0px
→ identisch zum alten `padding: 0 0 7px 0`. box-sizing:border-box
(global) + height:var(--vh) heißt: das Padding schiebt den Inhalt
nach innen, ohne die Gesamthöhe zu verändern.
TOP ist hier bewusst 0 (nicht inset-top): das Top-Band der Notch wird
NICHT vom Wrapper-Padding ausgespart, sondern vom Spiel-Header selbst
gefüllt (min-height = inset-top unter html.has-top-inset) — dort
flankieren Logo links und Uhr+☰ rechts die mittige Notch. Würden wir
hier zusätzlich inset-top aufschlagen, käme das Band doppelt. */
height: var(--vh, 100dvh); max-width: 100%; gap: 0;
padding:
0
var(--safe-right)
calc(7px + var(--safe-bottom))
var(--safe-left);
}
/* Im In-Game-Modus enge Vertikal-Spacings, damit der Hex-Bereich (und
damit die Buchstaben-Tasten) mehr Höhe bekommt — Ziel: jede Taste
mindestens fingerkuppen-groß. game-left-gap = 0, damit das Wörter-
Grid bündig an den Eingabe-Bereich (hex-region) anschließt; die
einzelnen Sub-Regionen setzen ihre Innen-Padding/Margin selbst. */
body.game-mode .game-left {
gap: 0;
}
body.game-mode .game-body {
flex: 1; min-height: 0; overflow: hidden;
/* Cross-axis: alle direkten Kinder (.game-left) sollen auf die volle Game-
Body-Höhe gestreckt werden — sonst kollabieren Prozent-flex-basis-Werte
auf den Kindern (z.B. .word-grid-area: flex 0 0 50%) auf 0, weil die
Höhe des Eltern-flex-Items nicht definit ist. Das war die Ursache dafür,
dass die hex-controls auf Vivaldi/Desktop nicht sichtbar waren: game-left
war nur so hoch wie sein Content, und absolute Controls saßen mitten im
Layout statt am unteren Rand. */
align-items: stretch;
}
body.game-mode .game-left {
flex: 1; min-width: 0; min-height: 0;
/* height:100% defensiv für Browser, die align-items:stretch nicht für
flex-Items mit indefiniter Cross-Axis-Höhe respektieren. */
height: 100%;
align-self: stretch;
justify-content: flex-start; align-items: center;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
body.game-mode .game-left .hex-svg {
/* Konkrete Pixelgröße kommt von JS (sizeHexSvg() in index.html). CSS hier
stellt nur sicher, dass die SVG sich nie automatisch auf 100% aufbläht
(das hatte sie auf breiten Viewports unter Chromium/Vivaldi über den
flex-Slot hinausgeschoben → bottom-controls verdeckt). flex:0 0 auto
deaktiviert auto-grow; max-width/max-height fangen den Fall ab, dass JS
noch nicht gelaufen ist. */
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
flex: 0 0 auto;
min-height: 0;
min-width: 0;
margin-top: auto;
}
body.game-mode .game-left .hex-svg {
margin-top: 0;
}
body.game-mode .game-left > .score-chips {
flex-shrink: 0;
}
/* Word-Display schrumpft als erstes wenn der Platz knapp wird — die SVG-Buchstaben
werden erst als letzte Reserve kleiner. min-height:0 erlaubt den Kollaps,
die clamp()-Schriftgröße passt sich an die Viewport-Höhe an. */
body.game-mode .word-display {
min-height: 0;
font-size: clamp(0.95rem, 4.2vh, 2rem);
letter-spacing: 3px;
flex-shrink: 1;
}
body.game-mode .word-display .word-cursor {
height: 1em;
}
body.game-mode .game-right { display: none !important; }
/* ── In-Game-Wörter-Grid (steal) ─────────────────────────────── */
/* Eine Tabelle leerer „Tasten", je eine pro Lösungswort. Zellen werden
in der Spielerfarbe enthüllt, sobald jemand das Wort findet. */
#word-grid[hidden] { display: none; }
body.game-mode #score-chips { display: none !important; }
/* Top-Bar im Spiel: nur Raumcode, Modus-Badge und Timer — der
X/Y-Fortschritt ist redundant, weil das Grid den Stand visuell zeigt. */
body.game-mode #game-progress { display: none !important; }
body.game-mode .game-left #word-grid {
width: 100%;
/* Innerhalb der .word-grid-area (column-flex) füllen wir den Rest unterhalb
der Score-Tabelle. flex:1 1 0 + min-height:0 erlaubt Schrumpfen, max-
height:100% verhindert dass das Grid die Score-Tabelle aus der area
drückt, falls JS-Berechnung knapp übersteht. */
height: auto;
max-height: 100%;
flex: 1 1 0;
min-height: 0;
/* 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. */
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
/* `hidden` muss auch IM SPIEL gewinnen. Die Regel darüber ist spezifischer als
das globale `#word-grid[hidden] { display: none }` und setzt `display: flex`
— ein per `hidden` ausgeblendetes Gitter liefe damit weiter als leere
`flex: 1 1 0`-Box mit und nähme die halbe Fläche der .word-grid-area ein.
Aufgefallen ist das in der Definitionsjagd, wo es gar kein Gitter gibt und
die Bedeutungs-Slots deshalb nur die Hälfte des Platzes bekamen. */
body.game-mode .game-left #word-grid[hidden] { display: none; }
/* No-Wrap-Variante: Wörter werden in flex-nowrap-Wrapper gepackt, der ganze
Wrapper umbricht beim Zeilenwechsel — so können mehrere Wörter eine Zeile
teilen, aber kein Wort wird mitten gespalten. Die JS-Berechnung wählt die
Zellgröße so, dass das längste Wort horizontal in die Breite passt und alle
per Greedy-Packing prognostizierten Zeilen vertikal in die Region passen. */
/* 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 das game-mode-globale touch-action: none
für genau diesen Scroll-Container auf, damit auf Mobile vertikal
gescrollt werden kann; horizontal-overscroll bleibt blockiert (matched
CLAUDE.md-Regel zu inneren Scroll-Containern). */
body.game-mode .game-left #word-grid.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 main.js). mask-image arbeitet auf
visueller Ebene — kein Layout-Einfluss, kein Interaktions-Block.
--fade-h = Höhe des Verlaufs (ein Cell ≈ 18 px wirkt natürlich). */
body.game-mode .game-left #word-grid.wg-scrollable {
--fade-h: 22px;
}
body.game-mode .game-left #word-grid.wg-scrollable.wg-fade-top {
mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-h), #000 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--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);
}
body.game-mode .game-left #word-grid.wg-scrollable.wg-fade-bottom {
mask-image: linear-gradient(to top, transparent 0, #000 var(--fade-h), #000 100%);
-webkit-mask-image: linear-gradient(to top, transparent 0, #000 var(--fade-h), #000 100%);
box-shadow: inset 0 -14px 16px -10px rgba(0, 0, 0, 0.55);
}
body.game-mode .game-left #word-grid.wg-scrollable.wg-fade-top.wg-fade-bottom {
mask-image: linear-gradient(to bottom,
transparent 0, #000 var(--fade-h),
#000 calc(100% - var(--fade-h)), transparent 100%);
-webkit-mask-image: linear-gradient(to bottom,
transparent 0, #000 var(--fade-h),
#000 calc(100% - var(--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);
}
body.game-mode .game-left #word-grid.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 wird per echter
im DOM gezeichnet (siehe relayout/_build in index.html). Das ist
pixel-genau eine Zellbreite groß und bleibt am Zeilenende durch
ihre Position INNERHALB des vorigen .wg-word automatisch unsichtbar
hängen. column-gap wird daher nicht mehr benötigt. */
justify-content: flex-start;
}
/* Unsichtbarer Spacer zwischen Wörtern — gleiche Größe wie eine .wg-cell,
wird in JS gesetzt. Kein Hintergrund, kein Inner-Kästchen. */
.word-grid .wg-spacer {
/* Sizing rein über --wg-cell-w (in JS auf #word-grid gesetzt; CSS-Var
erbt zum Spacer). Kein JS-Sizing-Loop nötig — eine fehlende
Inline-Width war der Grund warum der Spacer vorher 0×0 blieb. */
flex: 0 0 var(--wg-cell-w, 18px);
width: var(--wg-cell-w, 18px);
height: var(--wg-cell-w, 18px);
box-sizing: border-box;
background: transparent;
pointer-events: none;
/* Keine ::before-Pseudo, kein Rahmen — reine Leerfläche; die Papier-
Textur vom Body scheint einfach durch. */
}
.word-grid .wg-word {
display: flex;
flex-wrap: nowrap;
flex: 0 0 auto;
}
.word-grid .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: waagerechte 1 px Linien (Zeilen-Trennung) + senkrechte 1 px
Linien INNERHALB eines Worts (Buchstaben zählen). An Wort-Grenzen
wird die rechte Border per Klasse transparent geschaltet, damit dort
der Fade-Effekt sauber alleinsteht (Wort sichtbar als Block). Border
wird nicht entfernt, sondern nur transparent — so bleibt die Zell-
breite unter `box-sizing:border-box` einheitlich. */
/* >>> Farben des Wörter-Grids — anpassen, wenn der Look nicht passt:
Separator-Linien (Border) = var(--bg)
Zell-Hintergrund (--cell-bg) = #27272a (= var(--surface))
Light-Theme-Override unten setzt --cell-bg ebenfalls auf var(--surface). */
/* Design/Typewriter: Zellrand transparent statt solid var(--bg) — sonst
entstand ein 1-px-Streifen ohne Papier-Grain um jedes Innen-Kästchen.
transparent lässt die Body-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;
--cell-bg: #27272a;
/* Design/Typewriter: Zelle selbst ist transparent (Papier 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;
}
.word-grid .wg-cell::before {
content: '';
position: absolute;
/* inset: 0 → das Innen-Kästchen füllt die volle Padding-Box, nur die
1-px-Zellborder (var(--bg)) bleibt als Papier-Außenrand. Vorher 1px
ließ einen 2-px-Rand entstehen, der dem Nutzer zu klein wirkte. */
inset: 0;
background: var(--cell-bg);
border: 1px solid var(--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. */
.word-grid .wg-cell.revealed::before,
.word-grid .wg-cell.partial-found::before,
.word-grid .wg-cell.all-found::before,
.word-grid .wg-cell.hinted::before {
border-color: var(--cell-bg);
}
.light-theme .word-grid .wg-cell {
--cell-bg: var(--surface);
}
/* Design/Typewriter: keine vertikale Markierungs-Linie mehr am linken
Rand der ersten Zelle eines Worts. Die Wort-Grenzen ergeben sich aus
der unsichtbaren .wg-spacer-Zelle zwischen den Wörtern. Die alte Linie
war im hellen Theme eine schwarze Strich-Linie und brach den
Raster-Look. */
.word-grid .wg-cell.wg-first {
box-shadow: none;
}
/* Wort-Ende: keine senkrechte Trennlinie zum nächsten Wort (die Akzent-Linie
am Anfang des Folge-Worts grenzt ab). Border bleibt 1 px breit, Farbe
transparent → Zellbreite unverändert. */
/*.word-grid .wg-cell.wg-last {*/
/* border-right-color: transparent;*/
/*}*/
/* 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 der Mockups. Beide
Themes verwenden denselben Weiß-Wert. */
.word-grid .wg-cell.revealed,
.light-theme .word-grid .wg-cell.revealed {
color: #fff;
}
.light-theme .word-grid .wg-cell.partial-found.mine-finder {
color: #fff;
text-shadow: none;
}
/* Hidden-Modi: Partial-Found = ein oder mehrere (aber nicht alle) Spieler
haben das Wort. Single-Finder geht über --cell-bg → Word-Edge-Fade greift.
Multi-Finder (.multi-finder) bekommt einen neutralen Hellgrau-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. */
.word-grid .wg-cell.partial-found {
color: transparent;
}
.word-grid .wg-cell.partial-found.mine-finder {
color: #fff;
font-weight: 800;
}
.word-grid .wg-cell.partial-found.multi-finder {
--cell-bg: var(--grid-found-bg-multi);
--cell-bg-fade: rgba(161,161,170,0); /* transparente Variante von --grid-found-bg-multi für Gradient-Fades */
color: transparent;
}
.word-grid .wg-cell.partial-found.multi-finder.mine-finder {
color: var(--grid-found-text);
text-shadow: none;
font-weight: 800;
}
/* Alle Spieler haben das Wort gefunden → hellgraue Zelle, dunkler Text.
Reines Weiß war auf dunklem Theme zu kontraststark; --grid-found-bg-all
hebt die Zelle weiterhin klar vom Standard-Hintergrund ab, ohne zu
blenden. Token-Werte siehe theme-dark.css / theme-light.css. */
.word-grid .wg-cell.all-found {
--cell-bg: var(--grid-found-bg-all);
--cell-bg-fade: rgba(212,212,216,0); /* transparente Variante von --grid-found-bg-all für Gradient-Fades */
color: var(--grid-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. --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 { border-color: var(--cell-bg) }`-Regel weiter oben
gehandhabt. `hinted-pop` triggert die Erst-Erscheinen-Animation. */
.word-grid .wg-cell.hinted {
--cell-bg: #F2EBDA;
color: #28241E;
font-weight: 800;
}
.word-grid .wg-cell.hinted-pop {
animation: hint-pop 0.6s ease-out;
}
@keyframes hint-pop {
/* Text auf der Akzent-Fläche → schwarz (cream-Variante mit dem hellen
Gelb-Gold hatte zu wenig Kontrast). */
0% { transform: scale(0.4); background-color: var(--accent); color: #000; }
35% { transform: scale(1.25); background-color: var(--accent); }
60% { transform: scale(0.95); }
100% { transform: scale(1); }
}
/* Design/Typewriter: KEIN sichtbarer Trenner mehr zwischen Wörtern —
Wortgrenzen werden visuell durch die einzeln gerahmten Innen-Kästchen
der Zellen (siehe .wg-cell::before) markiert. Vorher gesetztes
`border-right: 18px` auf .wg-word addierte pro Wort eine Zellbreite
horizontalen Layoutraums, von dem der JS-Packer nichts wusste → er
pickte einen Side-Wert, der im Render die letzte Zeile unter den
verfügbaren Bereich schob. */
/* Eigene Wörter: dezent dickere Hintergrund-Sättigung statt Outline (Outlines
um jede Buchstabenzelle wären visuell zu laut). */
.word-grid .wg-cell.mine {
font-weight: 800;
}
/* Wörter-Grid-Cursor: gefundene Zellen sind klickbar (öffnet Finder-Popover). */
.word-grid .wg-cell.revealed,
.word-grid .wg-cell.partial-found,
.word-grid .wg-cell.all-found {
cursor: pointer;
}
/* ── Finder-Chip-Popover (Klick auf gefundene Zelle im Wörter-Grid) ──────
Kleines fixed-positioniertes Floater-Element, das direkt an der angeklick-
ten Zelle ankert. Zeigt einen oder mehrere Spieler-Chips (Spielerfarbe) und
den Punktwert des Worts, sofern dem Client bekannt. */
.wf-popover {
position: fixed;
z-index: 6000;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 6px 10px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
display: flex;
gap: 8px;
align-items: center;
max-width: min(90vw, 360px);
flex-wrap: wrap;
font-size: 0.85rem;
}
.wf-popover.hidden { display: none; }
.wf-pop-word {
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.02em;
color: var(--text);
white-space: nowrap;
}
.wf-pop-word:empty { display: none; }
.wf-pop-finders {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.wf-pop-finder-chip {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: var(--chip-bg, rgba(255,255,255,0.1));
color: var(--chip-color, var(--text));
font-weight: 600;
font-size: 0.85rem;
line-height: 1.2;
white-space: nowrap;
}
.wf-pop-points {
font-weight: 700;
color: var(--accent-text);
white-space: nowrap;
}
.wf-pop-points:empty { display: none; }
/* ── Info-Drawer (slide-up popup) ────────────────────────────── */
#info-popup, #words-popup, #gameover-player-popup {
position: fixed; inset: 0; z-index: 5000;
background: rgba(0,0,0,0.65);
display: flex; align-items: flex-end; justify-content: center;
backdrop-filter: blur(4px);
opacity: 0; pointer-events: none;
transition: opacity 0.25s;
}
#info-popup.visible, #words-popup.visible, #gameover-player-popup.visible { opacity: 1; pointer-events: all; }
.info-drawer {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius) var(--radius) 0 0;
/* Bottom-Sheet: bündig an der Unterkante, Inhalt aber über dem Home-
Indicator (env(safe-area-inset-bottom) aufs untere Padding addiert). */
padding: 20px 20px calc(20px + var(--safe-bottom));
width: 100%; max-width: 520px;
max-height: 82dvh; overflow-y: auto;
transform: translateY(100%); transition: transform 0.3s ease;
display: flex; flex-direction: column; gap: 10px;
}
#info-popup.visible .info-drawer, #words-popup.visible .info-drawer,
#gameover-player-popup.visible .info-drawer { transform: translateY(0); }
.info-drawer-head {
display: flex; align-items: center; justify-content: space-between;
}
.info-drawer-head h3 { font-size: 1rem; font-weight: 700; }
/* ── Client log (dev-mode only UI) ──────────────────────────── */
.log-toggle-row { display: none; }
body.dev-mode .log-toggle-row { display: block; }
/* Dev-only: Whitelist-Button (in der Top-Bar) + zugehöriges Eingabe-Modal */
#btn-dev-add-whitelist { display: none !important; }
body.dev-mode #btn-dev-add-whitelist { display: inline-flex !important; }
#dev-add-whitelist-input {
width: 100%;
padding: 10px 12px;
font-size: 1rem;
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
font-family: inherit;
text-align: center;
letter-spacing: 0.04em;
}
#dev-add-whitelist-input:focus {
outline: none;
border-color: var(--accent);
}
/* Dev-only: Endbildschirm-Sektion „Abgelehnte Versuche" (rejected-section) */
.rejected-section { margin-top: 22px; }
.rejected-section .panel-title { margin-bottom: 8px; }
.rejected-add-row {
display: flex; gap: 6px; margin-bottom: 10px; align-items: center;
}
.rejected-add-row input {
flex: 1; min-width: 0;
padding: 6px 10px; font-size: 0.9rem;
background: var(--bg); color: var(--text);
border: 1px solid var(--border); border-radius: 8px;
font-family: inherit;
}
.rejected-add-row input:focus { outline: none; border-color: var(--accent); }
.rejected-filters {
display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.rejected-filter-chip {
padding: 3px 10px; border-radius: 12px;
font-size: 0.78rem; font-weight: 600;
background: var(--surface2); color: var(--text);
border: 1.5px solid transparent; cursor: pointer;
}
.rejected-filter-chip.active {
border-color: var(--accent); color: var(--accent-text);
}
/* Wörter-Pills im rejected-grid: optisch wie sol-word.missed, aber klickbar */
#rejected-grid .sol-word.rejected {
background: rgba(248,113,113,0.14);
color: var(--text);
border-color: rgba(248,113,113,0.35);
cursor: pointer;
}
/* Dev-Bar am UNTEREN Rand (historisch oben, daher die Namen top-bar/
has-top-bar): unten kollidiert sie weder mit dem Notch/Cutout noch mit
dem Safe-Area-Layout der Screens — oben hätte sie z.B. beim Notch-Lineal
die Messkante verdeckt. Home-Indicator-Inset wird aufaddiert. */
#top-bar {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
display: none; align-items: center; justify-content: flex-end;
gap: 10px; padding: 8px 14px;
height: calc(50px + var(--safe-bottom));
padding-bottom: calc(8px + var(--safe-bottom));
box-sizing: border-box;
background: var(--bg);
border-top: 1px solid var(--border);
}
#top-bar.show { display: flex; }
/* Bar reserviert ihren eigenen Platz unten — Inhalte enden oberhalb. */
body.has-top-bar { padding-bottom: calc(50px + var(--safe-bottom)); }
.top-bar-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 4.8px 8.4px; border-radius: 22px;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); cursor: pointer;
font-size: 0.78rem; font-weight: 600;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
font-family: inherit;
}
.top-bar-btn:hover { background: var(--surface2); }
#log-fab { display: none; }
#log-fab .log-fab-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--green);
}
#log-fab.has-warn .log-fab-dot { background: var(--accent); }
#log-fab.has-error .log-fab-dot { background: var(--red); }
#log-fab .log-fab-count {
font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700;
}
#modal-log .modal-card {
max-width: 760px; width: 96%; max-height: 90dvh;
display: flex; flex-direction: column; padding: 16px;
text-align: left;
}
#modal-log .log-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
#modal-log .log-head h2 { font-size: 1rem; font-weight: 700; margin: 0; }
#modal-log .log-toolbar {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
margin-bottom: 8px;
}
#modal-log .log-toolbar select,
#modal-log .log-toolbar input[type=text] {
background: var(--bg); color: var(--text);
border: 1px solid var(--border); border-radius: 6px;
padding: 5px 8px; font-size: 0.82rem; min-width: 0;
font-family: inherit;
}
#modal-log .log-toolbar input[type=text] { flex: 1; min-width: 120px; }
#modal-log .log-toolbar .log-count {
font-size: 0.72rem; color: var(--muted);
margin-left: auto; white-space: nowrap;
}
#log-list {
flex: 1; overflow-y: auto; padding-right: 2px;
display: flex; flex-direction: column; gap: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.74rem;
}
.log-entry {
border-left: 3px solid var(--surface2);
padding: 4px 8px; background: var(--bg);
border-radius: 4px;
cursor: pointer;
display: flex; gap: 6px;
}
.log-entry.log-debug { border-left-color: var(--muted); opacity: 0.85; }
.log-entry.log-info { border-left-color: var(--blue); }
.log-entry.log-warn { border-left-color: var(--accent); background: rgba(181,90,46,0.08); }
.log-entry.log-error { border-left-color: var(--red); background: rgba(239,68,68,0.10); }
.log-entry.selected { box-shadow: inset 0 0 0 1px var(--accent); }
.log-select { flex: 0 0 auto; margin: 3px 0 0; cursor: pointer; }
.log-content { flex: 1; min-width: 0; }
.log-meta {
display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
font-size: 0.68rem; color: var(--muted);
}
.log-meta .log-level { text-transform: uppercase; font-weight: 700; }
.log-meta .log-cat { color: var(--text); opacity: 0.85; }
.log-msg {
color: var(--text); margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.log-entry.expanded .log-msg {
white-space: pre-wrap; word-break: break-word; overflow: visible;
}
.log-data {
display: none;
font-size: 0.7rem; color: var(--muted); margin-top: 2px;
white-space: pre-wrap; word-break: break-word;
max-height: 240px; overflow: auto;
}
.log-entry.expanded .log-data { display: block; }
.log-empty { color: var(--muted); text-align: center; padding: 24px; }
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
/* ACHTUNG: dieser Block steht NACH der Basis-body-Regel und überschreibt
deren Padding auf Telefonen komplett — ein nacktes `padding: 12px` hat
hier monatelang den gesamten Safe-Area-Schutz ausgehebelt (Raumcode
unterm Punch-Hole im Fullscreen). Der schmalere 12px-Rand bleibt, aber
jede Seite respektiert weiterhin die Insets (var(--safe-*)). */
body {
padding:
max(12px, var(--safe-top))
max(12px, var(--safe-right))
max(12px, var(--safe-bottom))
max(12px, var(--safe-left));
}
.game-body { flex-direction: column; }
.game-left { min-width: unset; width: 100%; }
.settings-grid { grid-template-columns: 1fr; }
.stats-row { flex-direction: column; }
/* Ensure cards never overflow on small screens */
.card { padding: 16px; }
/* Buttons can wrap on narrow phones */
.stats-row { gap: 8px; }
}
/* ── Statistik-Bildschirm ─────────────────────────────── */
/* Aufbau wie die Lobby: borderlose, transparente Card über die volle Höhe,
sticky Kopfzeile (kleines Logo links, Titel mittig) und sticky Bottom-Bar
mit dem Zurück-Button; dazwischen scrollt der Inhalt. */
#stats-card {
max-width: 540px; width: 100%;
flex: 1 1 auto; min-height: 0;
max-height: calc(100dvh - max(16px, var(--safe-top)) - max(16px, var(--safe-bottom)));
overflow-y: auto;
display: flex; flex-direction: column;
padding: 0; border: 0; background: transparent;
}
body.has-top-bar #stats-card { max-height: calc(100dvh - max(16px, var(--safe-top)) - 50px - var(--safe-bottom)); }
/* Card über die volle Höhe strecken (Header oben, Bar unten verankert),
statt sie wie sonst vertikal zu zentrieren. */
#screen-statistics.active {
margin-top: 0; margin-bottom: 0;
flex: 1 1 auto; min-height: 0; justify-content: flex-start;
}
#stats-header {
position: sticky; top: 0; z-index: 5;
display: flex; align-items: center;
padding: 8px 16px 6px;
background-color: var(--bg);
background-image: var(--paper);
background-repeat: repeat;
border-radius: 14px 14px 0 0;
}
/* Kleines Marken-Logo in der oberen rechten Ecke. */
#stats-logo {
height: 30px; width: auto; flex-shrink: 0;
margin-left: 10px; /* Abstand zu den Werkzeug-Buttons links davon */
pointer-events: none; /* rechtsbündig in die obere rechte Ecke */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
/* Titel oben links; nimmt den freien Platz ein und schiebt Werkzeug-Buttons +
Logo nach rechts. */
#stats-header #stats-title {
flex: 1 1 auto; margin: 0; min-width: 0;
display: flex; align-items: center; justify-content: flex-start;
font-size: 1.1rem; font-weight: 800; line-height: 1.1;
pointer-events: none;
}
/* Nur die eigentliche Titel-Beschriftung ist klickbar (öffnet das Info-Popup),
nicht die ganze Header-Breite. Liegt unter den Buttons (z-index:1), daher
fangen Filter/Kalender ihre Klicks weiterhin selbst ab. */
#stats-header #stats-title .stats-title-text {
pointer-events: auto; cursor: pointer;
/* Neben dem Titel stehen jetzt Umschalter und Logo — auf schmalen Geräten
wird der Titel gekürzt, statt über sie hinauszulaufen. */
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Filter- und Kalender-Umschalter ganz rechts in der Bottom-Bar. Der
Filter-Knopf steht links neben dem Kalender-Knopf; margin-left:auto schiebt
das Paar an den rechten Rand. (In der Detailansicht blendet JS den Filter
aus und gibt dem Kalender das auto-Margin.) */
#btn-stats-filter {
margin-left: auto;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
}
#btn-stats-filter .filter-icon { display: block; }
#btn-stats-calendar {
margin-left: 6px;
font-size: 1rem; line-height: 1;
}
#btn-stats-filter.active,
#btn-stats-calendar.active { border-color: var(--accent); background: var(--surface2); }
/* Aktiver Filter: Trichter gefüllt (Fill, kein Text — Theme-konform). */
#btn-stats-filter.active .filter-icon { fill: var(--accent); stroke: var(--accent); }
/* Dauerhaftes Info-Icon unten rechts in der Bilanz-Leiste. */
/* Info-Knopf rechts in der Bilanz-Leiste: gleiche Höhe wie der Zurück-Button —
identische Box wie .btn (0.95rem Schrift, 6px vertikale Polsterung; hier 5px
+ 1px Rahmen = 6px) ergibt dieselbe Höhe; aspect-ratio hält ihn kreisrund,
align-items:center der Leiste zentriert beide vertikal. */
/* Bottom-Bar: Zurück, ☰, Zahnrad links — Filter/Kalender rechts (s.o.).
In der Detailansicht sind Zahnrad und Filter ausgeblendet. */
#btn-stats-data { margin-left: 8px; }
#btn-stats-info {
font-size: 0.95rem; padding: 5px;
width: auto; height: auto; aspect-ratio: 1 / 1;
}
/* Dezenter Link-Button im Datensicherungs-Menü („Wie funktioniert das?"). */
.btn.btn-link {
background: none; border: none; padding: 2px;
color: var(--text); font-weight: 500; text-decoration: underline;
}
.btn.btn-link:hover { color: var(--text); opacity: 0.8; }
/* Import-Dialog: Herkunfts-Kopfzeile der geladenen Datei. */
.stats-import-meta {
font-size: 0.82rem; color: var(--muted);
margin: 0 0 12px; padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
/* ── Bilanz: Erstnutzer-Hinweis oben (einmalig) ───────────────────────────── */
.stats-info-banner {
display: flex; align-items: center; gap: 10px; justify-content: space-between;
width: 100%; text-align: left;
margin: 0 0 12px; padding: 10px 12px;
background: var(--surface2);
border: 1px solid var(--border);
border-left: 3px solid var(--accent); /* Akzent als Border — Theme-konform */
border-radius: 10px;
color: var(--text); font-size: 0.88rem; line-height: 1.35;
cursor: pointer;
transition: border-color 0.12s, background 0.12s;
}
.stats-info-banner:hover { border-color: var(--accent); }
.stats-info-banner-icon {
flex-shrink: 0;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent); border-radius: 50%;
color: #fff; font-weight: 700; font-size: 0.8rem;
}
/* ── Bilanz: Filter-/Lösch-Popup ──────────────────────────────────────────── */
.stats-filter-card {
max-width: 460px; text-align: left;
display: flex; flex-direction: column;
max-height: min(80vh, 640px); padding: 24px;
}
.stats-filter-intro {
color: var(--muted); font-size: 0.85rem; line-height: 1.45;
margin: 0 0 14px;
}
/* Scrollender Listenbereich; Trichter-Layout-Regeln (touch-action) wie .modal-body. */
.stats-filter-list-wrap {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
border: 1px solid var(--border); border-radius: 10px;
touch-action: pan-y; overscroll-behavior-x: none;
}
.stats-filter-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.stats-filter-table th, .stats-filter-table td {
padding: 8px 10px; text-align: left; vertical-align: middle;
}
.stats-filter-table thead th {
position: sticky; top: 0; z-index: 1;
background: var(--surface2); color: var(--muted);
font-weight: 600; font-size: 0.74rem; text-transform: uppercase;
letter-spacing: 0.02em;
border-bottom: 1px solid var(--border);
}
.stats-filter-table tbody tr { border-bottom: 1px solid var(--border); }
.stats-filter-table tbody tr:last-child { border-bottom: 0; }
.stats-filter-table .sf-name { font-weight: 600; width: 100%; }
.stats-filter-table .sf-date { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.3; }
.stats-filter-table .sf-date .sf-games { font-size: 0.78rem; opacity: 0.85; }
/* Checkbox-Spalte ganz links, schmal, zentriert. */
.stats-filter-table .sf-check { width: 1%; text-align: center; padding-right: 4px; }
.stats-filter-table thead th.sf-check .filter-icon { display: inline-block; vertical-align: middle; }
.stats-filter-table .sf-check input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.stats-filter-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 0.85rem; }
/* Fixe (immer sichtbare) Fußzeile mit Lösch-Auslöser. */
.stats-filter-footer {
flex-shrink: 0; margin-top: 14px;
border-top: 1px solid var(--border); padding-top: 14px;
}
.stats-filter-delete-bar { display: flex; gap: 10px; justify-content: space-between; align-items: stretch; }
.sf-danger { color: var(--red); border-color: var(--red); }
/* Lösch-Auslöser darf mehrzeilig umbrechen (langer Text auf schmalen Geräten). */
#btn-stats-filter-delete { white-space: normal; line-height: 1.25; text-align: center; }
.stats-filter-warn {
color: var(--red); font-size: 0.82rem; line-height: 1.4; margin: 0 0 10px;
}
.stats-filter-select {
width: 100%; margin-bottom: 12px; padding: 8px 10px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--surface); color: var(--text); font-size: 0.9rem;
}
/* Eigener Lösch-Dialog: linksbündig (Warnung + Auswahl lesen sich so besser). */
.stats-delete-card { text-align: left; }
.stats-delete-card .modal-title { margin-bottom: 12px; }
.stats-filter-delete-actions { display: flex; gap: 10px; justify-content: flex-end; }
.sf-danger-btn { background: var(--red); border-color: var(--red); }
#stats-content { padding: 12px 16px; flex: 1; }
#stats-bar {
position: sticky; bottom: 0; z-index: 10;
background-color: var(--bg);
background-image: var(--paper);
background-repeat: repeat;
border-radius: 0 0 14px 14px;
padding: 12px 16px;
display: flex; flex-shrink: 0; align-items: center;
}
/* Auswahl über den Kennzahlen: Spieltyp + Sprache nebeneinander, je mit einer
kleinen Beschriftung darüber (der Vorgabewert „alle …" sagt allein nicht,
worauf sich das Feld bezieht, sobald ein konkreter Wert gewählt ist).
Bewusst `stats-scope-*` und NICHT `stats-filter-*`: letzteres gehört zum
Ausblenden von Gegnern (Popup + Lösch-Dialog, eigenes `.stats-filter-select`). */
#stats-scope {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 4px 2px 8px;
}
.stats-scope-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stats-scope-label {
font-size: 0.7rem; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stats-scope-select {
width: 100%; min-width: 0;
font-family: inherit; font-size: 0.9rem; color: var(--text);
background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; padding: 6px 8px; cursor: pointer;
}
.stats-scope-select:focus { outline: none; border-color: var(--accent); }
/* ── Ergebnisse: Umschalter „Rangliste" ↔ „Wissen" ──────────────────────────
Sieht aus wie ein Auswahlfeld — dieselbe Fläche, derselbe Rahmen, derselbe
Pfeil wie .stats-scope-select darunter —, klappt aber nichts auf, sondern
schaltet beim Klick sofort um. Bei GENAU ZWEI Seiten wäre eine Liste ein
Umweg: man tippte zweimal für das, was ohnehin das einzige andere ist. Der
Wert sagt, wo man steht; der Pfeil, dass es noch etwas gibt.
Neben dem Titel ist wenig Platz: der Knopf schrumpft nicht (flex: 0 0 auto),
der Titel daneben wird gekürzt. */
.stats-view-pick {
flex: 0 0 auto;
margin-left: 8px;
display: inline-flex; align-items: center; gap: 5px;
font-family: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 5px 8px;
cursor: pointer; white-space: nowrap;
}
.stats-view-pick:hover { border-color: var(--accent); }
.stats-view-pick:focus-visible { outline: none; border-color: var(--accent); }
.stats-view-caret { color: var(--muted); font-size: 0.8em; }
/* ── Wissen: Auswahlfelder ─────────────────────────────────────────────────
Anders als #stats-scope: die Beschriftung steht LINKS neben ihrem Feld, die
Felder sind kleiner (dieselbe Größe wie der „Wissen/Rangliste"-Umschalter
oben — .stats-view-pick: 0.85rem, 5px 8px) und die Zeile bricht bei Bedarf
um. Die Feldzahl wechselt ohnehin (das Sprachfeld erscheint nur bei mehreren
Spielsprachen) — ein Flex-Umbruch braucht dafür keine Spaltenrechnung. */
#stats-knowledge-scope {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
padding: 4px 2px 8px;
}
#stats-knowledge-scope .stats-scope-field {
flex-direction: row; align-items: center; gap: 6px;
flex: 0 1 auto;
}
#stats-knowledge-scope .stats-scope-select {
width: auto;
font-size: 0.85rem;
padding: 5px 8px;
}
/* Kopfzeile der Wissens-Seite: dieselbe Summe wie die Wurzel des Baums. */
#stats-knowledge-total {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
padding: 8px 4px 10px;
border-bottom: 1px solid var(--border);
margin-bottom: 6px;
}
.know-total-label { font-weight: 800; }
/* Der Themenbaum der Wissens-Seite nutzt die Klassen der Lobby-Themenwahl
(.topic-tree/.topic-row/.topic-name) — es IST derselbe Baum, nur ohne
Ankreuzfelder und immer offen. Ein Oberthema schaltet nichts, also kein
Zeigefinger; die BLATT-Zeilen öffnen das Wörter-Popup und bekommen ihn
zurück (.topic-row--drill, weiter unten). */
#stats-knowledge-tree .topic-row { cursor: default; }
#stats-knowledge-tree .topic-row:hover { background: none; }
/* Passt der Chip nicht mehr neben einen langen Namen, rutscht er in die
zweite Zeile — und muss dort trotzdem RECHTS stehen, wie in jeder anderen
Zeile. Der wachsende Name schiebt ihn nur in der ERSTEN Flex-Zeile an den
Rand; der auto-Rand tut es in jeder (dasselbe Mittel wie .topic-nums in
der Lobby-Themenwahl). */
#stats-knowledge-tree .topic-know,
#gameover-knowledge-tree .topic-know { margin-left: auto; }
/* Die Einrückung je Ebene — knapper als die 26px der Lobby-Themenwahl: hier
stehen rechts drei Zahlenspalten, und jede gesparte Breite kommt dem Namen
zugute. Steht VOR den padding-left:0-Regeln der Wurzeln (gleiche
Spezifität — die Reihenfolge entscheidet). */
#stats-knowledge-tree .topic-tree,
#gameover-knowledge-tree .topic-tree { padding-left: 18px; }
/* Die oberste Ebene steht am Rand — eingerückt wird erst ab dem Unterthema.
Lange Themennamen kürzen statt umzubrechen: die Kennzahlen rechts sollen in
jeder Zeile an derselben Stelle stehen. */
#stats-knowledge-tree > .topic-tree { padding-left: 0; }
#stats-knowledge-tree .topic-name {
cursor: default;
/* Kleiner als sonst: hier steht der Name neben drei Zahlenspalten, und die
Zeile soll auf einem Handy nicht am Namen scheitern. Die Lobby-Themenwahl
behält ihre Größe — dort ist der Name die Schaltfläche. */
font-size: 0.82rem;
display: block; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Schmaler Rand: #stats-content polstert für die Rangliste mit 16 px, hier
holen wir zwölf davon zurück. Der Baum braucht die Breite — links rückt jede
Ebene ein, rechts stehen die Zahlenspalten. */
#stats-knowledge { margin-left: -12px; margin-right: -12px; }
/* Halber vertikaler Abstand gegenüber der Lobby-Themenwahl (6px): hier wird
nichts angetippt außer den Blatt-Zeilen, und der Baum soll mehr Themen auf
einen Schirm bekommen. */
#stats-knowledge .topic-row {
padding: 3px 2px;
}
/* Die Kennzahlen neben einem Thema: gelöst-Anteil, gesehen-Anteil, Vorrat.
Nebeninformation wie die Wortzahl daneben — sie darf den Namen nicht
überstrahlen. Klein gesetzt, damit auch drei Werte plus Name in eine
Handy-Zeile passen. */
.topic-know {
flex: 0 0 auto;
display: inline-flex; align-items: baseline; gap: 6px;
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
color: var(--muted);
white-space: nowrap;
}
/* Zahl und Zeichen sind zwei Kästen — der Abstand kommt aus dem Zwischenraum,
nicht aus einem Rand: welcher von beiden vorne steht, wechselt (der Vorrat
trägt sein „/" voran), und ein einseitiger Rand säße dann falsch. */
.topic-know .know-solved,
.topic-know .know-seen,
.topic-know .know-pool { display: inline-flex; align-items: baseline; gap: 0.25em; }
.topic-know .know-solved { color: var(--text); font-weight: 700; }
.topic-know .know-pool { opacity: 0.8; }
/* Feste Zahlenbreiten — der Grund, warum Zeichen und Zahl getrennte Kästen
sind. `tabular-nums` allein macht nur die Ziffern gleich breit; dass „7%",
„35%" und „100%" auf DERSELBEN Kante enden, kommt erst aus der reservierten
Breite plus rechtsbündigem Satz. Sonst wanderte in jeder Zeile alles um eine
Stelle, und die Spalte wäre keine.
Drei Ziffern für jeden Anteil (100 % ist das Maximum), fünf für den Vorrat.
`ch` ist bei tabular-nums exakt eine Ziffernbreite; das Prozentzeichen kommt
als knapper Zuschlag dazu. */
.topic-know .know-num {
display: inline-block;
min-width: 3.9ch; /* 3 Ziffern + „%" */
text-align: right;
}
.topic-know .know-num--pool { min-width: 5ch; }
/* ── Der Runden-Baum im Spielergebnis ─────────────────────────────────────
Dieselben Klassen wie die Wissens-Seite — es IST derselbe Baum, nur auf die
Themen dieser Runde verkürzt. Hier schaltet allerdings nichts: kein Zeiger,
kein Hover. Und die oberste Ebene steht am Rand, weil links kein Platz
verschenkt werden muss. */
#gameover-knowledge { margin-top: 20px; } /* derselbe Abstand wie .solution-section */
/* Statt eines Baums: die eine Zeile, warum es nichts zu zeigen gibt. Sie ist
Auskunft, kein Fehler — also gemutet wie jede Nebeninformation. */
.gameover-knowledge-none { margin: 0; color: var(--muted); font-size: 0.85rem; }
#gameover-knowledge-tree > .topic-tree { padding-left: 0; }
#gameover-knowledge-tree .topic-row { cursor: default; padding-left: 2px; padding-right: 2px; }
#gameover-knowledge-tree .topic-row:hover { background: none; }
/* Blatt-Zeilen öffnen die Wörter dieses Themas — auf der Wissens-Seite wie im
Spielergebnis. Der Zeigefinger und die leichte Aufhellung sind das einzige
Signal: ein Pfeil o. ä. bekäme in einer Zeile, die schon Name und drei
Zahlenspalten trägt, keinen Platz mehr. Muss NACH den `cursor: default`-Regeln
beider Bäume stehen — gleiche Spezifität, also entscheidet die Reihenfolge. */
#stats-knowledge-tree .topic-row--drill,
#gameover-knowledge-tree .topic-row--drill { cursor: pointer; }
#stats-knowledge-tree .topic-row--drill:hover,
#gameover-knowledge-tree .topic-row--drill:hover { background: var(--bg); }
.topic-row--drill:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* ── Das Wörter-Popup einer Blatt-Zeile ─────────────────────────────────────
Eine Liste, keine mittige Meldung: die Karte kippt darum auf linksbündig und
bekommt ein knapperes Polster (die Zahl steht in `twBoxScale` in main.js —
der Maßstab der Kästchen wird daraus gerechnet, nicht gemessen). Die Höhe ist
gedeckelt, gescrollt wird im Body: eine Karte, die über den Schirm
hinauswächst, nähme dem Schließen-Knopf den Platz. */
.modal-card--words {
text-align: left; padding: 20px 18px 18px;
max-height: 82vh; display: flex; flex-direction: column;
}
.modal-card--words .modal-title { text-align: left; margin-bottom: 2px; }
/* Unter welchen Filtern die Liste steht. Im Spielergebnis gibt es keine
Auswahlfelder, dort ist diese Zeile die einzige Auskunft darüber. */
.tw-scope {
color: var(--muted); font-size: 0.74rem; margin: 0 0 10px;
padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
/* Der Kopf steht ÜBER dem Scrollbereich (eine eigene Tabelle, siehe
twHeadTableHTML in main.js): die Zeilen verschwinden beim Scrollen an seiner
Unterkante, und die Linie dort macht die Kante sichtbar. Ohne Zeilen bleibt
der Kopf weg — dann soll auch die Linie nicht alleine dastehen.
`flex: none` ist Pflicht: die Karte ist eine höhen-gedeckelte Flex-Spalte,
und das `overflow: hidden` unten nimmt dem Kopf seine automatische
Mindesthöhe — ohne den Riegel wird er GENAU DANN auf null gestaucht, wenn
die Liste scrollen muss, also immer dann, wenn man ihn braucht. */
.tw-head { flex: none; border-bottom: 1px solid var(--border); }
.tw-head:empty { display: none; }
.tw-body { flex: 1 1 auto; overflow-y: auto; margin-bottom: 14px; min-height: 0; }
/* Eine klassische Scrollleiste (Desktop) macht den Körper schmaler als den
Kopf, und die Spaltenkanten der beiden Tabellen laufen auseinander. Die
Rinne wird deshalb in BEIDEN Containern fest reserviert — der Kopf ist über
`overflow: hidden` ebenfalls ein Scroll-Container, sonst griffe die Regel
dort nicht. Bei Overlay-Scrollleisten (mobil) reserviert `stable` nichts,
dann sind die beiden ohnehin gleich breit. */
.tw-head { overflow: hidden; }
.tw-head, .tw-body { scrollbar-gutter: stable; }
.tw-empty { margin: 0; }
/* Eine echte Tabelle: drei Spalten mit Kopf, sortierbar. `fixed` legt die
Breiten fest, bevor der Inhalt sie auseinanderzieht — ein langes Wort
(„Schmalnasenaffe") schöbe die Zahlenspalten sonst aus der Karte. Kopf- und
Zeilen-Tabelle teilen sich die Spaltenbreiten über die Klassen unten; nur so
stehen die Spalten der beiden Tabellen untereinander. */
.tw-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tw-th { text-align: left; padding: 0 0 6px; font-weight: 600; }
/* Die Spaltenbreiten in rem, NICHT in em: Kopf und Zeilen sind zwei Tabellen
mit verschiedenen Schriftgrößen am `` bzw. ` ` — dieselbe em-Breite
ergäbe zwei verschiedene Pixelbreiten, und die Titel stünden nicht mehr
bündig über ihren Zahlen. */
.tw-th--streak, .tw-streak { text-align: right; width: 3.8rem; }
.tw-th--pct, .tw-pct { text-align: right; width: 4.5rem; }
.tw-sort {
background: none; border: 0; padding: 2px 0; margin: 0; cursor: pointer;
font: inherit; font-size: 0.72rem; font-weight: 700; color: var(--muted);
letter-spacing: 0.02em; text-transform: uppercase;
display: inline-flex; align-items: baseline; gap: 0.3em;
}
.tw-sort--on { color: var(--text); }
.tw-sort:hover { color: var(--text); }
.tw-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Das Dreieck existiert nur an der aktiven Spalte (twHeadHTML rendert sonst
keins) und reserviert KEINEN Platz: die Titel der Zahlenspalten stehen
bündig über ihren Zahlen, und dass der aktive Titel dafür ein Stück nach
links rückt, ist der gewollte Preis. */
.tw-arrow { display: inline-block; font-size: 0.85em; }
.tw-row td { padding: 0; vertical-align: baseline; }
/* Die GANZE Zeile führt in den Eintrag des Worts (Delegation in
openTopicWordsPopup) — das Wort zu treffen ist auf dem Telefon zu viel
verlangt. Die Fläche sagt es beim Überfahren: Hintergrund auf dem
färbt beide eines Worts zugleich. */
.tw-row { cursor: pointer; }
.tw-row:hover { background: var(--bg); }
.tw-row:hover .tw-word-btn { text-decoration: underline; }
.tw-word {
padding-top: 7px; font-weight: 600; color: var(--text); font-size: 0.92rem;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Das Wort führt in seinen Eintrag — dasselbe Popup wie am Spielende. Ein
Knopf, der aussieht wie der Text: die Zeile soll eine Liste bleiben, kein
Knopfbrett. Er füllt die Spalte, damit der Griff auf dem Telefon trifft. */
.tw-word-btn {
background: none; border: 0; padding: 0; margin: 0; font: inherit;
color: inherit; cursor: pointer; width: 100%; text-align: left;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tw-word-btn:hover { text-decoration: underline; }
.tw-word-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Der Streak: wie viele Lösungen seit dem letzten Fehlschlag. Eine
Nebenauskunft zur Prozentzahl daneben, deshalb gedämpft und nicht fett. */
.tw-streak {
padding-top: 7px;
font-size: 0.82rem; color: var(--muted);
}
/* Derselbe gelöst-Anteil wie im Baum und dieselbe Zifferbreite — sonst tanzen
die Prozente von Zeile zu Zeile. Das ✔ steht hier nicht mehr daneben: die
Spalte sagt einmal im Kopf, was sie zählt. */
.tw-pct {
padding-top: 7px; text-align: right;
font-weight: 700; font-size: 0.82rem; color: var(--text);
}
.tw-streak .tw-num,
.tw-pct .tw-num { display: inline-block; font-variant-numeric: tabular-nums; }
/* Die Trennlinie sitzt unter der Kästchenreihe, also am Ende EINES Worts —
und nicht zwischen dessen beiden Zeilen. */
.tw-boxes-cell { padding: 5px 0 7px; border-bottom: 1px solid var(--border); }
.tw-row:last-child .tw-boxes-cell { border-bottom: 0; }
/* Die Versuche: dieselben Kästchen wie in der Bilanz gegen andere Spieler
(.outcome-box), neuester links und nach hinten kleiner. Die Kantenlängen
setzt JS je Kästchen — hier steht nur, dass die Reihe nicht umbricht und
unten bündig sitzt, damit die schrumpfende Kette auf einer Linie läuft. */
.tw-boxes { display: flex; align-items: flex-end; flex-wrap: nowrap; }
#gameover-knowledge-tree .topic-name {
cursor: default; font-size: 0.82rem;
display: block; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ein Vorzeichen und eine Nachkommastelle mehr als auf der Wissens-Seite. */
.topic-know--diff .know-num { min-width: 5.6ch; }
/* Das Richtungs-Dreieck VOR der Zahl. Eigener Kasten mit fester Breite, aus
demselben Grund, aus dem Zahl und Zeichen getrennt sind: nur so stehen die
Ziffern untereinander. Die Breite bleibt auch reserviert, wenn nichts drin
steht — sonst rückte eine Zeile ohne Richtung um ein Zeichen aus.
Schriftart und -gewicht stehen AUSDRÜCKLICH hier, obwohl beides schon von
oben käme: das Häkchen-Feld ist fett (`.know-solved`), das Augen-Feld nicht,
und JetBrains Mono bringt das Dreieck nicht in jedem Schnitt mit — die beiden
landeten so in verschiedenen Rückfall-Schriften und standen sichtbar
verschieden groß nebeneinander. Feste rem-Größe aus demselben Grund: `em`
erbte die Größe der Zelle.
Gefärbt wird das DREIECK, nicht die Zahl: es ist das Zeichen für die
Richtung, die Zahl bleibt die Tinte der Zeile. Grün kommt als --green-soft,
nicht als --green: auf einer Fläche von wenigen Pixeln wirkt das dunkle
Tinten-Grün des Hell-Themes schwarz (siehe theme-light.css, genau dafür gibt
es die weichere Stufe). */
.topic-know--diff .know-trend {
display: inline-block; width: 1em;
font-family: system-ui, 'Segoe UI Symbol', sans-serif;
font-size: 0.62rem; font-weight: 400; line-height: 1; text-align: center;
}
.topic-know--diff .know-trend.pos { color: var(--green-soft); }
.topic-know--diff .know-trend.neg { color: var(--red); }
/* Meldung auf der Gegnerseite, wenn die Auswahl dort kein Spiel übrig lässt.
Steht in #stats-detail-summary (das fett/größer ist) — hier wieder normal. */
.stats-detail-none {
font-weight: 400; font-size: 0.92rem; color: var(--muted);
text-align: center; padding: 20px 8px;
}
/* Kennzahlen-Leiste der aktuellen Auswahl über der Gegnerliste: drei Werte
nebeneinander (Wert oben, Beschriftung darunter), getrennt durch einen
dezenten Trennstrich zur Liste hin. */
#stats-overall {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px 8px;
padding: 4px 2px 14px;
margin-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.ov-tile { text-align: center; min-width: 0; }
.ov-val {
font-weight: 800; font-size: 1.15rem; line-height: 1.1;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ov-val.pos { color: #15803d; }
.ov-val.neg { color: var(--red); }
.ov-val.zero { color: var(--text); }
/* Kompakte, eingefärbte Punktedifferenz (Σ ±N) in den Bilanz-Zeilen und der
Detail-Zusammenfassung — gleiche Farben wie .ov-val / .hist-diff. */
.stat-diff { font-variant-numeric: tabular-nums; font-weight: 700; }
.stat-diff.pos { color: #15803d; }
.stat-diff.neg { color: var(--red); }
.stat-diff.zero { color: var(--muted); }
/* Prozentzahl eingefärbt: > 50 % grün, < 50 % rot, 50 % neutral. Fett. */
.stat-pct { font-variant-numeric: tabular-nums; font-weight: 700; }
.stat-pct.pos { color: #15803d; }
.stat-pct.neg { color: var(--red); }
.stat-pct.zero { color: var(--muted); }
.ov-label {
margin-top: 2px; font-size: 0.7rem; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opp-row {
display: grid;
grid-template-columns: 1.5em 1fr;
grid-template-areas:
"rank head"
"rank boxes";
align-items: center; column-gap: 10px; row-gap: 6px;
/* Linker Akzentbalken: auf allen Zeilen transparent reserviert, damit die
Rang-Spalte und die waagerechten Trennlinien überall am selben x starten
— die „self"-Zeile färbt ihn nur ein, ohne den Inhalt zu verschieben. */
border-left: 3px solid transparent;
padding: 10px 4px 10px 2px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.12s;
}
.opp-row:last-child { border-bottom: 0; }
.opp-row .opp-rank {
grid-area: rank; align-self: start; /* bündig nach oben — auf Höhe des Namens */
font-weight: 700; font-size: 1.05rem; color: var(--muted);
font-variant-numeric: tabular-nums; text-align: left; line-height: 1.25;
}
.opp-row .opp-head {
grid-area: head; display: flex; align-items: flex-start; gap: 8px; min-width: 0;
}
/* Name auf max. 3 Zeilen: Hauptname per -webkit-line-clamp begrenzt (letzte
sichtbare Zeile endet automatisch mit …). Folgt ein Spitzname, darf der
Hauptname nur 2 Zeilen belegen, damit der (immer sichtbare) Spitzname als
3. Zeile passt. */
.opp-row .opp-name {
font-weight: 600; min-width: 0; flex: 1 1 auto; line-height: 1.25;
}
/* Name-Klassen ungescopt — auch auf der Detailseite (#stats-detail-name). */
.opp-name-main {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
overflow: hidden; overflow-wrap: anywhere;
}
.opp-name:has(.opp-name-sub) .opp-name-main,
#stats-detail-name:has(.opp-name-sub) .opp-name-main { -webkit-line-clamp: 2; }
.opp-name-sub {
display: block; font-weight: 400; color: var(--muted); font-size: 0.85em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Detailseiten-Name darf (wie auf der Hauptseite) mehrzeilig umbrechen. */
#stats-detail-name { min-width: 0; line-height: 1.25; }
.opp-row .opp-meta { color: var(--muted); font-size: 0.86rem; white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; }
/* Eigene Zeile: kein Klick, hellgrau hinterlegt (wie der Zurück-Button),
keine Kästchen. Die Hinterlegung ragt per negativem Rand etwas über die
Tabellenbreite hinaus (in das Padding von #stats-content); das zusätzliche
Innenpadding hält den Inhalt mit den übrigen Zeilen bündig. */
.opp-row.opp-self {
cursor: default;
background: var(--surface);
margin-left: -10px; margin-right: -10px;
padding-left: 12px; padding-right: 14px;
border-radius: 8px;
}
.opp-row.opp-self .opp-name { font-weight: 800; }
.opp-row.opp-self .opp-rank { color: var(--text); }
.opp-row .opp-self-tag {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.4px;
text-transform: uppercase; color: var(--text);
border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px;
}
/* Ergebnis-Kästchen (übernehmen den Setzkasten-Look des Wörter-Grids). Jede
volle Zeile füllt die ganze Breite; von oben nach unten werden die Kästchen
kleiner. Größe (--outcome-box-size) und Zeilen-Abstand (gap) setzt JS pro
Zeile passend zueinander; die Zeilen sind mittig ausgerichtet. */
.opp-boxes { grid-area: boxes; display: flex; flex-direction: column; gap: 2px; }
.opp-box-row { display: flex; gap: 3px; align-items: center; }
.outcome-box {
width: var(--outcome-box-size, 16px); height: var(--outcome-box-size, 16px);
flex: 0 0 auto; border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.18);
background: var(--sb-n);
}
/* „Mehr Spiele"-Indikator am Ende der letzten Zeile: drei kleine schwarze
Punkte (Breite/Höhe und Punktgröße setzt JS passend zur Zeile). */
.outcome-more {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; gap: 2px;
}
.outcome-more i { flex: 0 0 auto; border-radius: 50%; background: var(--text); }
.outcome-box.o-r3 { background: var(--sb-r3); }
.outcome-box.o-r2 { background: var(--sb-r2); }
.outcome-box.o-r1 { background: var(--sb-r1); }
.outcome-box.o-n { background: var(--sb-n); }
.outcome-box.o-g1 { background: var(--sb-g1); }
.outcome-box.o-g2 { background: var(--sb-g2); }
.outcome-box.o-g3 { background: var(--sb-g3); }
/* Divergierende Rot→Grau→Grün-Palette (7 Stufen). Zentral hier definiert,
damit der gesamte Verlauf an einer Stelle abstimmbar ist; lesbar auf
beiden Themes (Creme bzw. Walnuss). */
:root {
--sb-r3: #b02a23; --sb-r2: #d05a4e; --sb-r1: #e89a90;
--sb-n: #9aa0a6;
--sb-g1: #8fc98a; --sb-g2: #4f9e57; --sb-g3: #2f7d34;
}
/* ── Kalenderblätter (letzte 3 Monate) ──────────────────────────────────────
Monatsnamen-Kopfzeile einmal oben; sie nutzt dasselbe 2-Spalten-Raster wie
.opp-row (Rang-Spalte + Inhalt) und den gleichen linken Ursprung (3px Balken
+ 2px Padding), damit die drei Monatslabels über den Monatsspalten der
Gegnerzeilen fluchten. */
.opp-cal-head {
display: grid; grid-template-columns: 1.5em 1fr; column-gap: 10px;
border-left: 3px solid transparent;
padding: 2px 4px 6px 2px;
}
.cal-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cal-months span {
text-align: center; font-size: 0.72rem; color: var(--muted);
text-transform: capitalize;
}
/* Drei Monatsblätter nebeneinander (im boxes-Bereich der Zeile). */
.opp-cal { grid-area: boxes; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-cell {
aspect-ratio: 1 / 1; border-radius: 2px;
background: var(--sb-n);
border: 0;
}
.cal-cell.cal-pad { background: transparent; border: 0; } /* Vorlauf-Leerzellen (vor Monatsbeginn) → unsichtbar */
.cal-cell.cal-empty { background: rgba(128, 128, 128, 0.18); border: 0; } /* kein Spiel → blasses Quadrat */
.cal-cell.o-r3 { background: var(--sb-r3); }
.cal-cell.o-r2 { background: var(--sb-r2); }
.cal-cell.o-r1 { background: var(--sb-r1); }
.cal-cell.o-n { background: var(--sb-n); }
.cal-cell.o-g1 { background: var(--sb-g1); }
.cal-cell.o-g2 { background: var(--sb-g2); }
.cal-cell.o-g3 { background: var(--sb-g3); }
/* Aktueller Tag hervorgehoben — Ring, auch auf leeren Zellen sichtbar. */
.cal-cell.cal-today { outline: 2px solid var(--text); outline-offset: -2px; }
/* ── Detail-Kalender: vertikal gestapelte Monatsblätter eines Spielers ──────
Eigenständiges Blatt pro Monat (neuestes oben), zentriert und in der Breite
begrenzt, damit die Tageszellen nicht zu groß werden. */
.cal-sheet { max-width: 300px; margin: 0 auto 22px; }
.cal-sheet-label {
text-align: center; font-size: 0.9rem; font-weight: 600;
color: var(--text); text-transform: capitalize; margin-bottom: 6px;
}
.cal-dow {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px;
}
.cal-dow span { text-align: center; font-size: 0.66rem; color: var(--muted); }
/* Detail-Kalender: Tageszelle mit Tagesdifferenz auf dem Farbband. Das Band
(statBoxBand-Klasse) trägt die Tendenz als Fläche; die Zahl darüber ist nach
Vorzeichen eingefärbt (grün/rot/grau, wie .stat-diff) und bekommt einen
hellen Heiligenschein-Schatten, damit sie auch auf dunklen Bändern lesbar
bleibt. Spiel-Tage sind anklickbar (→ Tages-Popup). */
.cal-cell.cal-num {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
border-radius: 3px; padding: 1px; line-height: 1.05;
font-variant-numeric: tabular-nums; cursor: pointer; user-select: none;
}
/* Ein einziger, in der Zelle zentrierter weißer Heiligenschein hinter beiden
Zahlen (statt eines Schattens je Zeichen) — verbessert die Lesbarkeit auf
dem Farbband. Nur auf Spiel-Tagen (cal-empty hat keinen Text). */
.cal-cell.cal-num:not(.cal-empty)::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: radial-gradient(circle at center,
rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.8) 30%,
rgba(255, 255, 255, 0) 65%);
}
.cal-cell.cal-num .cal-pct,
.cal-cell.cal-num .cal-diff {
position: relative; z-index: 1; /* über dem Heiligenschein */
font-size: 0.56rem; font-weight: 700;
}
/* Trennlinie zwischen Prozent (oben) und Differenz (unten): mittig, schwarz,
nur halbe Zellenbreite. */
.cal-cell.cal-num .cal-pct,
.cal-cell.cal-num .cal-diff { width: 100%; text-align: center; }
.cal-cell.cal-num .cal-diff {
margin-top: 1px; padding-top: 1px;
border-top: 0.5px solid #000;
width: 50%;
}
.cal-cell.cal-num .pos { color: #15803d; }
.cal-cell.cal-num .neg { color: var(--red); }
.cal-cell.cal-num .zero { color: var(--muted); }
.cal-cell.cal-num.cal-empty { cursor: default; }
.cal-cell.cal-num[data-day]:hover { filter: brightness(1.05); }
/* Vier Spalten: schmale Typ-Marke (W/S), Datum, Ergebnis, Diff. Die gleich
breiten 1fr-Spalten um das Ergebnis halten es in der Mitte des RESTLICHEN
Platzes — bei jeder Zeile gleich, unabhängig von der Diff-Breite, sodass die
Doppelpunkte aller Zeilen fluchten. Die Typ-Spalte hat feste Breite, damit
dieses Gleichgewicht von ihr unberührt bleibt. */
.hist-row, .hist-head {
display: grid; grid-template-columns: 2.2em 1fr auto 1fr;
gap: 8px; align-items: center;
}
/* Kein horizontales Padding: erste Spalte beginnt bündig mit dem linken Ende
der Trennlinie, letzte Spalte schließt bündig mit dem rechten Ende ab. */
.hist-row {
padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem;
line-height: 1.2;
}
.hist-row:last-child { border-bottom: none; }
/* Typ-Marke: ein Buchstabe (W = Wort-Fang, S = Sinn-Suche), zurückhaltend wie
das Datum daneben. Der volle Name steht im title der Zelle. */
.hist-row .hist-kind {
color: var(--muted); font-size: 0.8rem; font-weight: 700;
text-align: center; white-space: nowrap;
}
.hist-row .hist-date {
color: var(--muted); font-size: 0.78rem; opacity: 0.85;
white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Ergebnis um den Doppelpunkt zentriert: „meine"/„ihre" Punkte in gleich
breiten Spalten (--score-side, in JS aus der größten Punktzahl gesetzt), der
Doppelpunkt als auto-Spur dazwischen liegt damit exakt mittig — und weil die
ganze Box in der (symmetrisch zentrierten) Zeilenmitte sitzt, fluchten die
Doppelpunkte aller Zeilen untereinander. */
.hist-row .hist-score {
display: grid;
grid-template-columns: var(--score-side, 3ch) auto var(--score-side, 3ch);
align-items: baseline; justify-self: center;
column-gap: 4px; font-variant-numeric: tabular-nums;
font-size: 0.8rem; /* kleiner, damit das Datum daneben komplett passt */
}
.hist-row .hist-mine { text-align: right; }
.hist-row .hist-their { text-align: left; }
.hist-row .hist-colon { font-weight: 600; }
.hist-row .hist-diff { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hist-row .hist-diff.pos { color: #15803d; }
.hist-row .hist-diff.neg { color: var(--red); }
.hist-row .hist-diff.zero { color: var(--muted); }
/* Prozent feste Breite + rechtsbündig, damit die davorstehende Punkte-
differenz bei allen Zeilen an derselben (rechtsbündigen) x-Position endet.
Farbe wird von der (nach Sieg/Niederlage eingefärbten) Diff-Zelle geerbt. */
.hist-row .hist-pct {
font-size: 0.78rem; font-weight: 700;
display: inline-block; width: 3.4em; text-align: right;
}
.hist-head {
padding: 4px 0; font-size: 0.74rem; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
font-weight: 700; /* Spaltenüberschriften fett */
}
.hist-head .hist-num { text-align: right; }
/* Spaltentitel „Typ" über den W/S-Marken — mittig wie sie. Das Kürzen greift
nur als Notbremse (2.2em reichen für „TYP" in dieser Schriftgröße). */
.hist-head .hist-kind { text-align: center; overflow: hidden; }
/* „Punkte"-Titel über dem (um den Doppelpunkt) zentrierten Ergebnis. */
.hist-head .hist-points { text-align: center; }
/* Anzahl Spiele direkt über der Summenzeile (gleiche, etwas größere Schrift). */
/* Detail-Zusammenfassung als Kachelreihe wie die Gesamtbilanz-Leiste. */
#stats-detail-summary .ov-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 8px;
}
#stats-detail-summary .stats-summary-hint {
margin-top: 8px; text-align: center; font-size: 0.8rem;
font-weight: 400; color: var(--muted);
}
/* ════════════════════════════════════════════════════════════════════
Design/Typewriter — Paper visibility (overrides at end of file)
Papier-Textur (von ) soll auf jeder nicht-Button-Fläche sichtbar
sein. Statt die Textur auf jedes Element zu mappen, machen wir die
Surface-Flächen TRANSPARENT, sodass die Body-Textur durchscheint.
Definition der Flächen geschieht dann allein durch Border.
Diese Regel muss AM ENDE der Datei stehen, damit sie spätere
`background: var(--surface)` Shorthand-Regeln überschreibt (sonst
würde der gleich-spezifische Selektor weiter unten gewinnen).
Buttons (.btn-*, .hex-corner) bleiben absichtlich opak — das sind
die Knöpfe auf dem Papier. ════════════════════════════════════════ */
.card,
.panel, .panel-soft,
.score-chip,
.final-item, .final-card,
input[type="text"], input[type="number"], input[type="search"],
textarea, select {
background-color: transparent;
background-image: none;
}
/* Modale Dialoge (z.B. Offline-Angebot, Was-ist-neu) bleiben OPAK —
sie schweben über einem dunkel gedimmten Backdrop, und mit
transparenter Karte würde der dunkle Backdrop durchscheinen und der
Dialog wirkt im Light-Theme schwarz. background: var(--surface) aus
der Basis-Regel gilt damit weiter. */
/* Toasts sind Nachrichten-Boxen — sie sollen NICHT transparent sein,
sondern als opake Felder über dem Spiel/Papier liegen. .toast aus
der „Papier-sichtbar"-Whitelist oben entfernt; die typenspezifischen
Backgrounds (toast-err: --gold, toast-info: --surface2, …) gelten
damit wieder. */
/* ════════════════════════════════════════════════════════════════════
Design/Typewriter — Brutalist sharp corners (overrides at end)
Schaltet ALLE hardcodierten border-radius-Werte auf 0 (Karten, Buttons,
Inputs, Modals, Toasts, Chips, Bars). Elemente, die echte Kreise sein
sollen (Avatare, Indicator-Dots, FAB-Punkte etc.), werden danach
explizit auf 50% zurückgesetzt — wer nicht in der Whitelist steht,
wird zum Rechteck.
Steht am ENDE der Datei, damit die universelle Regel über alle
spezifischeren `border-radius: …px`-Deklarationen weiter oben gewinnt.
════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
border-radius: 0 !important;
}
/* Echte Kreise — nicht antasten. */
.log-fab-dot,
.player-pip,
.profile-pic,
.avatar,
.avatar-circle,
.profile-circle,
.player-circle,
[class*="-circle"] {
border-radius: 50% !important;
}
/* ════════════════════════════════════════════════════════════════════
Design/Typewriter — In-Game upper region (header + score chips)
Übernimmt den Setzkasten-Look aus mockups/game-typewriter-mono.html:
eine flache horizontale Header-Leiste mit Segment-Trennlinien (Raum
| Mode | Progress | Timer), darunter eine ebenso flache Reihe von
Score-Chips mit 3-px-Top-Stripe in Spielerfarbe.
Alle Overrides scoped auf body.game-mode, damit Lobby & Startscreen
davon unberührt bleiben. !important nur dort, wo die alten Inline-
Styles in index.html (display:none, font-size, padding, …) im Weg
stehen — andernfalls würde der Server-Restart verlangt, um die
Inline-Attribute aus dem templated HTML zu räumen.
════════════════════════════════════════════════════════════════════ */
body.game-mode .game-header {
background: transparent;
border: 0;
border-bottom: 1px solid var(--text);
padding: 0;
gap: 0;
min-height: 38px;
align-items: stretch;
overflow: visible;
}
/* Header-Segmente vertikal zentrieren. */
body.game-mode .game-header > * {
display: flex;
align-items: center;
flex-shrink: 0;
}
/* Mode-Badge + Fortschritt sind ausgeblendet (Stash), bleiben aber im DOM,
weil JS sie weiter befüllt (kein Null-Zugriff). */
body.game-mode .game-header .gh-stash { display: none; }
body.game-mode .game-header #game-logo {
padding: 0 8px 0 4px;
height: 30px;
align-self: center; /* vertikal mittig statt am oberen Rand */
/* Logo sitzt jetzt am linken Header-Rand (der ☰ ist nach rechts neben die
Uhr gewandert), daher kein 42px-Freiraum mehr nötig. */
margin-left: 4px;
}
/* In-Game-☰: in den Header-Fluss verschoben (war position:fixed). Sitzt als
letztes Flex-Element rechts neben der Uhr, in der oberen rechten Ecke. */
body.game-mode .game-header #app-menu-btn {
position: static;
display: flex;
width: 22px; height: 22px;
/* rechts 8px = etwas mehr Abstand zum Rand; links 10px Abstand zur Uhr. */
margin: 0 8px 0 10px;
align-self: center;
}
body.game-mode .game-header #game-mode-badge {
padding: 0 12px !important;
background: var(--text) !important;
color: var(--bg) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase;
border-left: 1px solid var(--text);
/* Bei knappem Header-Raum darf die Mode-Badge zusammenschrumpfen
(alle anderen Header-Segmente haben flex-shrink: 0). overflow
hidden auf dem Badge selbst, die ellipsis-Logik sitzt am inneren
.game-mode-badge-text-Span (Flex-Container respektieren ellipsis
auf direkten Text-Nodes nicht zuverlässig in allen Browsern). */
flex-shrink: 1;
min-width: 0;
overflow: hidden;
}
body.game-mode .game-header #game-mode-badge .game-mode-badge-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
display: block;
}
/* Mode-Badge bleibt versteckt, solange JS noch nichts gesetzt hat */
body.game-mode .game-header #game-mode-badge:empty {
display: none !important;
}
/* Dasselbe für die Uhr: ohne Zeitlimit schreibt onGameStarted eine leere
Zeichenkette hinein (es gibt ja nichts herunterzuzählen). Ohne diese Regel
bliebe die goldene Fläche mit ihrer min-width von 76px als leerer Block
stehen — was wie ein Fehler aussieht und auch als solcher gemeldet wurde. */
body.game-mode .game-header .timer-display:empty {
display: none !important;
}
body.game-mode .game-header .spacer {
flex: 1 1 auto;
min-width: 4px;
/* Spacer selbst trägt keine Trennlinie — das nächste Segment hat
border-left, und die spacers sind reine Layout-Lücken. */
}
body.game-mode .game-header #game-progress {
padding: 0 12px !important;
font-size: 12px !important;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--text) !important;
text-transform: uppercase;
border-left: 1px solid var(--text);
}
body.game-mode .game-header .timer-display {
padding: 0 12px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.05em;
/* Warme Marken-Fläche (--gold = Terrakotta in beiden Themes). Heller
(weißer) Text liegt sauber auf dem dunklen Terrakotta. */
background: var(--gold);
color: #fff;
min-width: 76px;
justify-content: center;
/* Box füllt die volle Header-Höhe (kein vertikales Padding, kein
Außenabstand oben/unten). align-self:stretch überschreibt das
align-items:center des Headers im Notch-Modus. */
align-self: stretch;
}
body.game-mode .game-header .timer-display.urgent {
/* Rote Pulsanimation aus dem alten Stil passt nicht zum Block-Look —
wir lassen den Timer einfach in pulsierender Opazität, Farben
bleiben Akzent. */
animation: pulse 1s infinite;
}
/* ── In-Game-Header bei Top-Notch ────────────────────────────────────
html.has-top-inset wird per JS gesetzt, sobald env(safe-area-inset-top)
> 0 ist (echte Notch / Dynamic Island / Punch-Hole im Hochformat bzw.
Fullscreen/Standalone). Der Header bleibt EINE Zeile — er füllt nun aber
das Notch-Band (min-height = inset-top), sodass Logo (links) und Uhr+☰
(rechts) vertikal mittig NEBEN dem mittigen Cutout sitzen. Ohne Notch ist
inset-top 0px → min-height 0 → exakt die normale Header-Höhe. */
html.has-top-inset body.game-mode .game-header {
/* max(): nie unter die normale Header-Höhe (38px) fallen, auch wenn der
Inset kleiner ist (kurze Android-Punch-Hole-Bänder). */
min-height: max(38px, var(--safe-top));
align-items: center;
/* nowrap, damit zu enge Inhalte ÜBERLAUFEN statt umzubrechen — nur so
erkennt JS (scrollWidth > clientWidth) ein echtes Platzproblem. */
flex-wrap: nowrap;
}
/* Optionale Uhr nur ausblenden, wenn die Zeile WIRKLICH überläuft (Logo +
Uhr + ☰ passen nicht nebeneinander) — JS setzt html.drop-clock, siehe
updateNotch in index.html. Auf normalen Telefonen passt alles → die Uhr
bleibt links neben dem ☰. Logo + ☰ bleiben immer. */
html.drop-clock body.game-mode .game-header .timer-display {
display: none;
}
/* ── Grid-Score-Table — typewriter-mono Match ──────────────────────
Horizontale Reihe von Spalten, Tinten-Trennlinien dazwischen,
3-px-Top-Stripe in Spielerfarbe (--score-color, vom JS gesetzt).
Die große In-Lobby-Score-Chip-Liste ist im Spiel via
`body.game-mode #score-chips { display: none }` ausgeblendet. */
body.game-mode .grid-score-table {
display: flex !important; /* override des CSS-Grid-Default */
flex-direction: row;
flex-wrap: nowrap;
gap: 0;
padding: 0;
margin: 0 0 4px;
border: 1px solid var(--text);
background: transparent;
font-size: 0.85rem;
line-height: 1.25;
grid-template-columns: none;
}
body.game-mode .grid-score-table .gst-box {
flex: 1 1 0;
min-width: 0;
padding: 6px 8px 5px;
background: transparent;
border: 0;
border-left: 1px solid var(--text);
border-radius: 0 !important;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 2px;
position: relative;
overflow: hidden;
}
body.game-mode .grid-score-table .gst-box:first-child {
border-left: 0;
}
body.game-mode .grid-score-table .gst-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--score-color, var(--text));
}
body.game-mode .grid-score-table .gst-box.me {
/* me-Markierung kam vorher per dickerem Rahmen — der 3-px-Stripe
in der Akzent-Spielerfarbe übernimmt das jetzt. Padding zurück
auf Default, damit die Höhe gleich zu den anderen Boxen bleibt. */
padding: 6px 8px 5px;
}
body.game-mode .grid-score-table .gst-name {
color: var(--text);
font-size: 11px;
letter-spacing: 0.12em;
font-weight: 700;
text-transform: uppercase;
flex: 0 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.game-mode .grid-score-table .gst-box.me .gst-name {
color: var(--text);
}
body.game-mode .grid-score-table .gst-score {
font-size: 18px;
font-weight: 700;
line-height: 1;
color: var(--text);
letter-spacing: -0.01em;
margin-top: 2px;
}
/* Light-Theme: die Chip-Reihen (Score-Chips außerhalb des Grid-Modus,
Grid-Score-Table im Grid-Modus) standen mit transparentem Hintergrund
direkt auf der Papier-Textur — der gewollte mono-Block-Look wird so
visuell vom Papier-Maserung-Muster aufgeweicht. In Light-Theme: solide
Papier-lose Cremefläche als Hintergrund auf dem Außen-Container; die
inneren Chip-Boxen bleiben transparent und zeigen diesen Untergrund
durch — Tinten-Trennlinien bleiben somit über der ganzen Reihe
sichtbar. Dark-Theme unverändert (dort gibt es keine Papier-Textur). */
.light-theme body.game-mode .grid-score-table {
background: var(--surface);
}
/* ════════════════════════════════════════════════════════════════════
Portrait-Lock auf Mobile
Auf einem Handy-Querformat-Display passt das Spielmodell (Hex unten,
Wörter-Grid oben, ergonomische Buchstaben-Tasten) schlicht nicht —
die Buttons werden fingerkuppen-zu-klein, der Header rutscht über
die System-UI. Wir blockieren Querformat unterhalb einer Handy-
typischen Höhe (max-height: 500px) durch ein Vollbild-Overlay mit
Bitte-drehen-Hinweis. Tablets bleiben unberührt (höhere Viewports
gelten als ausreichend Platz); Desktop ebenfalls — dort schließt
`pointer: coarse` das Overlay aus, denn ein flach gezogenes Browser-
fenster ist unter 500px hoch und hat trotzdem keinen Drehsensor: der
Hinweis wäre eine Sackgasse. Der Hinweis-Text steht im HTML
(#portrait-lock), damit i18n ihn übersetzen kann. */
#portrait-lock {
display: none;
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
#portrait-lock {
display: flex;
position: fixed; inset: 0; z-index: 99999;
background-color: var(--bg);
background-image: var(--paper);
background-repeat: repeat;
color: var(--text);
align-items: center; justify-content: center;
text-align: center;
/* Querformat → eine Top-Notch wandert an die Seite; Text per
max(24px, seitliche Insets) aus dem Cutout halten. */
padding:
max(24px, var(--safe-top))
max(24px, var(--safe-right))
max(24px, var(--safe-bottom))
max(24px, var(--safe-left));
font-size: 1.1rem; font-weight: 700;
letter-spacing: 0.04em;
}
}
/* ── Marken-Logo (WordCrab) ────────────────────────────────────────────
Start-Bildschirm: großes, zentriertes Wortmarken-Logo anstelle des
früheren H1-Texts, in der oberen Hälfte der Card.
Statistik: kleines Logo oben mittig zentriert (#top-logo).
Lobby: Logo links in der Kopfzeile (#lobby-logo). Spielende: Logo zwischen
den Buttons (#gameover-logo). Im Spiel: Logo links im Header / SW-Ecke. */
.brand-title {
margin: 2px 0 20px;
text-align: center;
line-height: 0;
}
.brand-logo {
display: block;
width: auto;
max-width: min(300px, 72%);
height: auto;
margin: 0 auto;
}
#top-logo {
display: none; /* per Screen via :has() eingeblendet */
position: fixed;
/* +safe-area-inset-top: das Logo sitzt oben mittig — genau dort, wo eine
Top-Notch liegt. Ohne Notch ist der Inset 0 → unverändert 10px. */
top: calc(10px + var(--safe-top));
left: 50%;
transform: translateX(-50%); /* horizontal zentriert */
height: 33px;
width: auto;
z-index: 40;
pointer-events: none; /* rein dekorativ, fängt nie einen Tap ab */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
@media (min-width: 700px) {
#top-logo { top: calc(14px + var(--safe-top)); height: 42px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
CrabsWords — Spielbrett-Bereich und Brücke zum Modul.
Das Brett liegt an derselben Stelle wie das Wörter-Gitter und bekommt
denselben Platz. Wie GROSS der ist, rechnet die App aus und sagt es dem
Modul (crossword-grid misst bewusst nicht selbst nach) — hier steht nur,
welchen Bereich es füllen darf.
═══════════════════════════════════════════════════════════════════════════ */
.crab-region {
position: relative;
width: 100%;
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* `display: flex` oben schlägt sonst das eingebaute `[hidden] {display:none}`.
Dieselbe Falle wie beim Wörter-Gitter (siehe `#word-grid[hidden]`) und beim
`.crab-entry`: außerhalb des Krebsworträtsels lief die ausgeblendete Region
als leere `flex: 1 1 auto`-Box weiter, nahm dem Wort-Fang-Gitter die halbe
Fläche (kleinere Kästchen) und legte obendrein ihre Zoomknöpfe über die
Spielfläche — Knöpfe ohne Brett darunter. */
.crab-region[hidden] { display: none; }
/* Im Krebsworträtsel gibt es kein Wörter-Gitter — an seiner Stelle steht das
Brett. Dieselbe Umschaltung wie bei der Sinn-Suche. */
body.game-mode.crab-mode .word-grid { display: none; }
/* Brücke zum Brett-Modul (public/crossword-grid/): das Modul kennt keine
App-Variablen, es liest nur eigene --cw-*-Tokens mit Rückfallwerten. Hier
werden sie mit den Theme-Farben belegt. Wer eine Farbe ändern will, ändert
sie HIER.
--cw-found bleibt ungesetzt: die Farbe eines gefundenen Wortes ist die des
Finders und kommt je Wort aus der colorMap, nicht aus dem Theme. */
.crab-region {
--cw-cell-bg: var(--hex-key);
--cw-cell-border: var(--border);
--cw-text: var(--text);
/* --cw-selected/-inner bleiben ABSICHTLICH ungesetzt: wie das gerade
bearbeitete Wort markiert wird, gehört dem Brett-Modul und nicht dem Theme
(siehe dessen README). Eine App-Farbe hier stand schon einmal zu nah an den
Spielerfarben — auf einem Feld, das ein Mitspieler gefunden hatte, war der
Rahmen nicht mehr auszumachen. */
--cw-found-default: var(--violet);
--cw-found-text: #FBF3E3;
--cw-multi: var(--muted);
/* Von allen gefunden. `--text` ist die dunkelste Farbe des Themas und damit
im hellen wie im dunklen Theme die richtige Antwort auf „erledigt". */
--cw-all: var(--text);
}
/* Im dunklen Theme trägt die Tastatur cremefarbene Schrift — das Grau der
Rücktaste muss entsprechend dunkel sein. */
:root:not(.light-theme) .crab-entry-keyboard {
--kb-action: #57504A;
--kb-action-hover: #6B635C;
}
/* ── CrabsWords: Themenwahl ────────────────────────────────────────────────
Aufklappbare Baum-Tabelle mit Ankreuzfeldern. Sie kann lang werden (55
Themen), also scrollt sie — und zwar SIE, nicht die Seite. `touch-action:
pan-y` ist Pflicht: ohne sie deutet Firefox Android eine leicht schräge
Wischbewegung in einem überlagernden Scrollbereich als Zurück-Geste. */
.topic-card {
display: flex;
flex-direction: column;
max-height: min(80vh, 560px);
width: min(92vw, 420px);
}
.topic-title { margin: 0 0 8px; }
.topic-body {
flex: 1 1 auto;
overflow-y: auto;
touch-action: pan-y;
overscroll-behavior-x: none;
}
/* Deutliche Einrückung je Stufe: die Zugehörigkeit ist die einzige Information,
die der Baum über die Liste hinaus trägt — sie muss man auf einen Blick
sehen, nicht suchen. */
.topic-tree { list-style: none; margin: 0; padding: 0 0 0 26px; }
.topic-body > .topic-tree { padding-left: 0; }
/* Die Themenwahl setzt kleiner als der übrige Bildschirm: 55 Themen mit
Einrückung, Zahlen und Wissens-Anteilen sind viel Zeile, und je mehr davon
nebeneinander passt, desto weniger bricht um. In `rem`, nicht `em` — der Baum
steckt in sich selbst, und relative Größen schrumpften mit jeder Ebene. */
.topic-body .topic-tree { font-size: 0.88rem; }
/* Die Mindestbreite, an der der Umbruch hängt (siehe .topic-row): darunter
schrumpft der Name nicht weiter, also müssen die Zahlen weichen. */
.topic-body .topic-name { min-width: 8em; }
/* Zugeklappt: die Unterthemen sind da, aber nicht im Weg. */
.topic-tree > li > .topic-tree { display: none; }
.topic-tree > li.is-open > .topic-tree { display: block; }
.topic-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 4px;
border-radius: 6px;
/* Passt der Name nicht neben die Zahlen, rutschen DIE ZAHLEN in die zweite
Zeile — der Name behält die erste. Deshalb bekommt er unten eine
Mindestbreite: ohne sie schrumpfte er stattdessen, sein Text bräche um, und
die Zahlen blieben neben einem zweizeiligen Namen stehen. */
flex-wrap: wrap;
}
/* Die Zahlen als EIN Kasten (Wissen + Wortzahl): sie brechen gemeinsam um und
stehen dann rechts, wo sie auch in der ersten Zeile stünden. */
.topic-nums {
flex: 0 0 auto;
margin-left: auto;
display: inline-flex;
align-items: baseline;
gap: 8px;
}
.topic-row:hover { background: var(--surface); }
/* Die ganze Zeile schaltet — auch Polsterung, Lücken und die Zahl rechts.
Der Zeiger sagt das an jeder Stelle, sonst sähe die Zahl nach Beschriftung
aus und der Rand nach nichts. */
.topic-row { cursor: pointer; }
.topic-count { cursor: inherit; }
.topic-box { accent-color: var(--accent); flex: 0 0 auto; }
/* Der Name ist ein Knopf: bei einem Oberthema klappt er auf und zu, bei einem
Blatt schaltet er die Wahl. Er sieht trotzdem wie Text aus — ein
Knopf-Rahmen mitten in einer Liste wäre nur Lärm. */
.topic-name {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 6px;
background: none;
border: 0;
padding: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.topic-twisty {
flex: 0 0 auto;
width: 0.9em;
color: var(--muted);
transition: transform 120ms ease;
}
.topic-twisty::before { content: '▸'; }
.is-open > .topic-row .topic-twisty { transform: rotate(90deg); }
/* Teilweise gewählt — EINZELNE Unterthemen, nicht der ganze Ast. Das kennt ein
Ankreuzfeld nicht von sich aus: es bekommt darum ein Häkchen UND einen
grauen Grund, statt der vollen Akzentfarbe. „Hier drin steckt etwas, aber
nicht alles." */
.topic-row--partial .topic-box { accent-color: var(--muted); }
/* Die Zahl ist Nebeninformation — sie darf den Namen nicht überstrahlen. */
/* Die Wortzahl schließt die Zeile ab. Vier Ziffern sind reserviert (das größte
Thema hat gut 1 900 Wörter, die Wurzel darüber mehr) und rechtsbündig
gesetzt: nur so enden „7", „48" und „1981" auf derselben Kante und die Spalte
ist eine. `ch` ist bei tabular-nums genau eine Ziffernbreite — dasselbe
Verfahren wie bei den Wissens-Zahlen (.know-num). */
.topic-count {
flex: 0 0 auto;
color: var(--muted);
font-variant-numeric: tabular-nums;
font-size: 0.9em;
min-width: 4ch;
text-align: right;
}
/* Vom Oberthema mitgemeint: sichtbar dabei, aber nicht einzeln abwählbar —
„Natur ohne Vögel" gibt es im Datenmodell nicht. */
/* Mitgemeint über ein Oberthema: zurückgenommen dargestellt, damit man sieht,
woher die Wahl kommt — aber BEDIENBAR. Ein Abhaken löst das Oberthema in
seine übrigen Kinder auf; deshalb kein `cursor: default`, das versprach
„hier geht nichts". */
.topic-row--implied { opacity: 0.55; }
.topic-actions { display: flex; justify-content: flex-end; padding-top: 10px; }
/* ── CrabsWords: die Eingabe ───────────────────────────────────────────────
Eigene Ebene ÜBER dem Brett. Sie verkleinert es NICHT — sonst liefe der
ResizeObserver des Bretts an, es rechnete eine neue Feldgröße, und das
Rätsel spränge beim Öffnen auf einen anderen Zoom. Deshalb `position:
absolute` im Spielbereich statt eines Flex-Kindes, das Platz beansprucht. */
/* `display: flex` unten schlägt sonst das eingebaute `[hidden] {display:none}`
(gleiche Spezifität, spätere Regel) — die Eingabe stünde IMMER da und
reservierte unten Platz, auch wenn gar keine Tastatur gebraucht wird. */
.crab-entry[hidden] { display: none; }
.crab-entry {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 40;
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px;
max-height: 100%;
background: var(--bg);
background-image: var(--paper);
border-top: 1px solid var(--border);
border-radius: 12px 12px 0 0;
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
/* Die Eingabe führt ihre Zeiger selbst — kein Durchreichen ans Brett. */
touch-action: none;
}
/* Die Bedeutungen sehen aus wie die Slots der Sinn-Suche und sitzen wie sie
OBEN: grauer Kasten mit Rahmen, der den Löwenanteil der Ebene bekommt. Vom
Rätsel bleibt darüber zu sehen, was danach noch übrig ist — die Aufgabe zu
lesen ist wichtiger, als das Brett im Blick zu behalten.
Sie können lang sein; dann scrollen SIE, nicht die Ebene. */
/* Träger des Hinweises und der Wisch-Vorführung darüber. Geblättert wird mit
dem Finger über dem Hinweis selbst — vorher lagen dafür zwei Pfeil-Streifen
an seinen Rändern, die ihm Breite und Bild nahmen. Der Träger erbt das
Wachstum des Hinweises, damit die Vorführung dessen ganze Fläche hat. */
.crab-clue {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
}
/* ── Vorführung der Wisch-Geste ───────────────────────────────────────────────
Eine Fingerkuppe zieht über den Hinweis, in die Richtung, in die auch
wirklich geblättert wird (--back: zurück). Sie erscheint erst nach einer
Weile ohne Eingabe (CRAB_HINT_IDLE_MS) — wer tippt, weiß, was er tut.
Sie liegt über dem Hinweis und nimmt KEINE Zeiger an: sie ist eine Auskunft,
kein Bedienelement — ein Tipp darauf soll den Hinweis darunter treffen. */
.crab-swipe-hint {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 10px;
pointer-events: none;
z-index: 3;
}
.crab-swipe-hint[hidden] { display: none; }
/* Weiße Fläche, schwarze Kontur — beides steckt im Bild und ist BEWUSST nicht
an das Thema gebunden: die Hand liegt über einem beliebigen Foto, und dort
hilft kein Themenwert, sondern der Kontrast in der Zeichnung selbst.
Das Seitenverhältnis 83:150 ist das der Datei; wer sie neu erzeugt
(scripts/make-swipe-hand.js), prüft es hier nach. */
.crab-swipe-hint-hand {
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 50px;
margin: -25px 0 0 -14px;
background: url('../swipe-hand.png') center / contain no-repeat;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
opacity: 0;
animation: crab-swipe-hint 5s ease-in-out infinite;
}
/* Der Schweif liegt HINTER der Hand und zeigt damit, woher sie kommt — also
auf der Seite, von der weg gewischt wird. Er trägt dieselbe Zeichnung wie
die Hand: weiße Fläche, dunkle Kontur (hier als Schlagschatten-Ring). */
.crab-swipe-hint-hand::after {
content: '';
position: absolute;
top: 62%;
left: 100%;
margin-left: 8px;
width: 30px;
height: 4px;
border-radius: 2px;
background: #FBF3E3;
box-shadow: 0 0 0 1px rgba(20, 16, 14, 0.85);
opacity: 0.8;
}
/* Nach links = vorwärts (siehe onCommit in main.js). Rückwärts ist dieselbe
Vorführung, gespiegelt — Hand UND Schweif zusammen. Über `animation-
direction: reverse` ginge es auch, aber dann käme die eingebaute Pause
zuerst und die erste Vorführung ließe Sekunden auf sich warten. */
.crab-swipe-hint--back { transform: scaleX(-1); }
/* Eine Runde = eine Wischbewegung (1,4 s) und danach Pause, zusammen 5 s: so
oft wiederholt sich die Vorführung, solange niemand tippt. Die Pause steckt
IN den Keyframes und die Wiederholung in `infinite` — ein JS-Timer daneben
wäre eine zweite Uhr, die mit dieser hier auseinanderlaufen kann. Der Takt
steht deshalb NUR hier. */
@keyframes crab-swipe-hint {
0% { transform: translateX(74px) scale(0.85); opacity: 0; }
5% { transform: translateX(56px) scale(1); opacity: 0.95; }
22% { transform: translateX(-56px) scale(1); opacity: 0.95; }
28% { transform: translateX(-74px) scale(0.85); opacity: 0; }
100% { transform: translateX(-74px) scale(0.85); opacity: 0; }
}
/* Ohne Bewegung bleibt die Hand stehen, statt zu verschwinden: sie mit
`animation: none` unsichtbar zu machen (opacity 0 im ersten Keyframe) nähme
genau denen die Auskunft, die sie am ehesten brauchen. Der Schweif zeigt
weiterhin die Richtung an. */
@media (prefers-reduced-motion: reduce) {
.crab-swipe-hint-hand { animation: none; opacity: 0.95; }
}
/* Der Platz für das Bild, bevor es da ist. `aspect-ratio` ist genau dafür
gedacht: der Kasten bekommt eine Höhe aus seiner Breite, ohne dass jemand
die Zahl kennen muss. 2:1 ist eine Schätzung ins Mittel — sobald der Abruf
die echten Maße liefert, stehen sie als width/height am