/* GameZone — Fenster und Hinweiszeile im Design der Startseite („Nachtmarkt“), seit 27.10.2026
 *
 * WAS: Aussehen der Fenster, die includes/header.php, includes/footer.php und includes/bug-report.php auf JEDE Seite setzen:
 *      Bug-Report (#bugModal), Auto-Logout-Warnung (#globalLogoutOverlay), „Abgemeldet“ (#loggedOutOverlay),
 *      „Spiel beenden?“ (#leaveGameModal) — und die Zeile „Bitte beachten“ (Tool-Hinweis, details.gz-hinweis) über dem Fuß.
 * WO: eingebunden von includes/header.php (eine Stelle für alle Seitentypen: Tools, Spiele, Startseite, PHP-Seiten).
 * WARUM eigene Datei: Tools und Spiele laden kein main-vhc.css; die Fenster müssen überall gleich aussehen, ohne von
 *      dessen Regeln abzuhängen. Darum eigene Klassen (gz-*) — main-vhc.css kennt sie nicht, es gibt keine Kollision.
 * SICHTBARKEIT: hidden-Attribut im Markup; die Skripte blenden über style.display ('flex'/'none') bzw. hidden ein und aus —
 *      beides wirkt, weil .gz-fenster[hidden] nur ohne Inline-Wert greift.
 * ZWILLING: Farben/Formen aus start/css/start.css (Abschnitt 1) und _rahmen/rahmen.css — dort geändert, hier nachziehen.
 *      Schrift Exo 2 lädt _rahmen/seite.css bzw. die Startseite; ohne sie greift system-ui.
 * Regeln nur über die eigenen Klassen, keine Element-Selektoren für die Seite (coding-web Regel 13). */

.gz-fenster, .gz-hinweis {
  --gzf-text: #f4f1ff; --gzf-leise: #a8a2c8; --gzf-ganzleise: #8a85ad; --gzf-linie: rgba(255, 255, 255, 0.09);
  --gzf-linie2: rgba(255, 255, 255, 0.16); --gzf-pink: #ff3d8b; --gzf-orange: #ff9f43; --gzf-cyan: #33e1ff;
  --gzf-lese: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Fenster ── */
.gz-fenster { position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(7, 6, 15, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font: 400 16px/1.5 var(--gzf-lese); color: var(--gzf-text); text-align: left;
  /* Spiele sperren Auswahl und Gesten auf body (games/<ordner>/css/spiel.css) — im Fenster muss man tippen können */
  user-select: text; -webkit-user-select: text; touch-action: auto; }
.gz-fenster[hidden] { display: none; }
.gz-fenster *, .gz-fenster *::before, .gz-fenster *::after { box-sizing: border-box; }
.gz-fenster-box { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 24px 22px;
  border-radius: 22px; border: 1px solid var(--gzf-linie2); background: rgba(22, 19, 43, 0.97);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85); }
.gz-fenster-titel { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding-right: 36px;
  font: 800 21px/1.25 var(--gzf-lese); letter-spacing: 0.01em; text-transform: none; color: var(--gzf-text); }
.gz-fenster-titel img { width: 52px; height: auto; flex: none; margin: -6px 0 -6px -4px; }   /* Käfer im Bug-Report (Seitenverhältnis bleibt) */
.gz-fenster-text { margin: 0 0 10px; color: var(--gzf-leise); font-size: 15px; }
.gz-fenster-text strong { color: var(--gzf-text); }
.gz-fenster-leise { color: var(--gzf-ganzleise); font-size: 13.5px; }
.gz-fenster-knoepfe { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.gz-fenster-zu { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 0; border-radius: 999px;
  border: 1px solid var(--gzf-linie2); background: rgba(255, 255, 255, 0.05); color: var(--gzf-leise);
  font: 400 22px/1 var(--gzf-lese); cursor: pointer; }
.gz-fenster-zu:hover { background: rgba(255, 255, 255, 0.1); color: var(--gzf-text); }

/* Knöpfe: Pille mit Verlauf wie „Jetzt spielen“ auf der Startseite; leise = Glas */
.gz-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--gzf-orange), var(--gzf-pink)); color: #170a12; font: 800 15px/1 var(--gzf-lese); letter-spacing: 0.02em;
  text-transform: none; cursor: pointer; box-shadow: 0 12px 32px -10px rgba(255, 61, 139, 0.7); transition: transform .18s, box-shadow .18s; }
.gz-knopf:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -10px rgba(255, 61, 139, 0.85); }
.gz-knopf:disabled { opacity: 0.45; box-shadow: none; transform: none; cursor: default; }
.gz-knopf-leise { background: rgba(255, 255, 255, 0.06); color: var(--gzf-text); border: 1px solid var(--gzf-linie2); box-shadow: none; }
.gz-knopf-leise:hover { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.gz-fenster :focus-visible { outline: 2px solid var(--gzf-cyan); outline-offset: 3px; }

/* Eingabefelder */
.gz-feld { display: block; width: 100%; margin: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--gzf-linie2);
  background: rgba(255, 255, 255, 0.06); color: var(--gzf-text); font: 400 15px/1.45 var(--gzf-lese); box-shadow: none; }
.gz-feld::placeholder { color: var(--gzf-ganzleise); }
.gz-feld:focus { outline: none; border-color: rgba(255, 61, 139, 0.75); box-shadow: 0 0 0 4px rgba(255, 61, 139, 0.16); }
textarea.gz-feld { min-height: 130px; resize: vertical; }

/* Bug-Report: Zeichenzähler, Rechenaufgabe, Status (Klassen setzt includes/bug-report.js) */
.gz-bug-zahl { margin: 6px 2px 14px; text-align: right; font-size: 12.5px; color: var(--gzf-ganzleise); }
.gz-bug-zahl.warn { color: var(--gzf-orange); }
.gz-bug-zahl.ok { color: #6ee7a8; }
.gz-bug .gz-feld.ok { border-color: rgba(110, 231, 168, 0.55); }
.gz-bug-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gz-bug-captcha { display: flex; align-items: center; gap: 10px; color: var(--gzf-leise); }
.gz-bug-captcha canvas { display: block; width: 120px; height: 32px; border-radius: 10px; flex: none; }
.gz-bug-captcha .gz-feld { width: 84px; padding: 9px 12px; text-align: center; }
.gz-bug .gz-fenster-knoepfe { margin-top: 16px; }
.gz-bug-status { min-height: 1.4em; margin-top: 10px; font-size: 14px; color: var(--gzf-leise); }
.gz-bug-status.ok { color: #6ee7a8; }
.gz-bug-status.fehler { color: #ff8fb5; }

@media (max-width: 760px) {
  .gz-fenster { align-items: flex-end; padding: 10px; }
  .gz-fenster-box { max-height: calc(100vh - 20px); padding: 22px 18px 18px; border-radius: 20px; }
  .gz-fenster-knoepfe { justify-content: stretch; }
  .gz-fenster-knoepfe .gz-knopf { flex: 1 1 auto; }
}

/* ── Hinweiszeile über dem Fuß (Tool-Seiten) — wie „Tool-Hinweis“ im Fuß der Startseite (start.css .fuss-hinweis) ── */
/* Farben: Tokens der Tool-Werkstatt (tools/_werk/werk.css --leise/--text, folgen hell/dunkel), sonst die dunklen Werte */
.gz-hinweis { max-width: 1240px; margin: 40px auto 0; padding: 0 32px; font: 400 13.5px/1.6 var(--gzf-lese); color: var(--leise, var(--gzf-ganzleise)); }
.gz-hinweis summary { cursor: pointer; width: max-content; max-width: 100%; color: var(--leise, var(--gzf-leise)); font-weight: 600; }
.gz-hinweis summary:hover { color: var(--text, var(--gzf-text)); }
.gz-hinweis p { margin: 8px 0 0; max-width: 760px; }
@media (max-width: 760px) { .gz-hinweis { padding: 0 16px; margin-top: 28px; } }