/* ── SCHRIFT: lokal in schrift/ statt von Google Fonts ── Beim Laden von Google-Servern ginge die IP-Adresse
   jedes Besuchers an Google (in Deutschland als Datenschutzverstoß gewertet). Share Tech Mono steht unter der
   SIL Open Font License, die das Selbsthosten erlaubt - Lizenztext liegt als schrift/OFL.txt daneben. */
@font-face {
  font-family: 'Share Tech Mono';
  src: url('schrift/share-tech-mono.woff2') format('woff2'),
       url('schrift/share-tech-mono.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── SEITENAUFBAU: das Spiel füllt genau den sichtbaren Bildschirm, die Seite selbst scrollt nie ──
   Spalte von oben nach unten: Statuszeile, Protokoll (nimmt den ganzen Rest und scrollt selbst),
   Eingabebox, Sprechleiste. --app-hoehe setzt arena-game.js aus window.visualViewport (schrumpft,
   wenn die Bildschirmtastatur aufgeht); ohne JS gilt 100dvh (dynamische Bildschirmhöhe). */
html, body { height: var(--app-hoehe, 100dvh); overflow: hidden; }
body {
  background: #010a03;
  color: #00cc44;
  font-family: 'Share Tech Mono', monospace;
  font-size: 17px;
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 16px 8px 16px;
  box-sizing: border-box;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
}
body > .status, #interaktion, .talk-leiste { flex: 0 0 auto; }
/* Eingabebox nie höher als gut die Hälfte - sonst bliebe bei großer Tastatur kein Protokoll übrig. */
#interaktion { max-height: 55%; overflow-y: auto; margin-bottom: 8px; }
.hidden { display:none; }
.panel {
  border: 1px solid #00cc44;
  padding: 12px;
  margin-bottom: 16px;
}
.status {
  border: 1px solid #00cc44;
  padding: 8px 12px;
  margin-bottom: 20px;
}
/* Obere Statuszeile: kompakt, Werte links, [ optionen ] rechts. */
body > .status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 12px;
  margin-bottom: 10px;
}
.optionen-knopf { margin: 0; padding: 0 8px; }
textarea {
  width: 100%;
  background: #010a03;
  color: #00cc44;
  border: 1px solid #00cc44;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1em;
  padding: 8px;
  box-sizing: border-box;
  resize: vertical;
}
button {
  background: #010a03;
  color: #00cc44;
  border: 1px solid #00cc44;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1em;
  padding: 6px 14px;
  cursor: pointer;
  margin-top: 8px;
  margin-right: 8px;
}
button:hover { background: #00cc44; color: #010a03; }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:hover { background: #010a03; color: #00cc44; }
.damage { color: #ff3300; }
.promptbox {
  background: #010a03;
  border: 1px dashed #00cc44;
  padding: 10px;
  white-space: pre-wrap;
  margin-top: 10px;
  user-select: all;
}
.label { opacity: 0.75; }
input[type="text"] {
  background: #010a03;
  color: #00cc44;
  border: 1px solid #00cc44;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1em;
  padding: 5px 8px;
}

/* Protokoll: nimmt die ganze Höhe zwischen Statuszeile und Eingabe und scrollt als einziges Element.
   min-height: 0 ist nötig, damit es in der Flex-Spalte überhaupt kleiner als sein Inhalt werden darf. */
#kampfLog {
  flex: 1 1 auto;
  min-height: 3em;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 8px;
}

/* Getippte Eingabe (.eingabe-fallback: Textfeld + Senden-Knopf) ist seit der öffentlichen
   Testversion auf ALLEN Geräten sichtbar - Text ist der Standardweg, Sprache der Zusatz. Auf dem
   Handy funktioniert darüber auch die Diktierfunktion der Handy-Tastatur. Der Klassenname bleibt
   aus Kompatibilitätsgründen, obwohl es kein "Fallback" mehr ist. */

.kampflog-eintrag { margin: 6px 0; padding-bottom: 6px; border-bottom: 1px dashed rgba(0,204,68,0.25); }
.kampflog-narration { opacity: 0.9; font-style: italic; }
.kampflog-spieler { opacity: 0.95; }
.kampflog-schaden { color: #ff3300; }
.kampflog-sieg { color: #00cc44; font-weight: bold; }
.kampflog-gameover, .kampflog-fehler { color: #ff3300; }
.kampflog-krit { color: #ff3300; font-style: italic; }
.kampflog-waffenwechsel { opacity: 0.85; font-style: italic; }
.kampflog-loot { opacity: 0.85; font-style: italic; }
/* Tipps im richtigen Moment (zeigeTippEinmal in arena-game.js): gelb wie die [experimentell]-Hinweise, mit Randlinie. */
.kampflog-tipp { color: #ffcc00; border-left: 2px solid #ffcc00; padding-left: 8px; }
#lootBereich button { display: block; text-align: left; margin-bottom: 4px; }

/* ── EINZIGE zweite (kleinere) Schriftgröße im ganzen Stylesheet - ausschließlich für
   nachrangige/technische Meta-Infos, alles andere oben nutzt konsequent 1em (= body-Größe). ── */
.kampflog-bewertung, .kampflog-wurf, .kampflog-zeit, .kampflog-technik, .erklaerung,
table, th, td {
  font-size: 0.75em;
}
.kampflog-bewertung, .kampflog-wurf { opacity: 0.7; }
.kampflog-zeit { opacity: 0.55; }
.kampflog-technik { opacity: 0.6; }

/* Sprechleiste: letzter Block der Spalte (nicht mehr fixiert - sie nimmt ihren Platz im Layout ein). */
.talk-leiste {
  background: #010a03;
  border-top: 1px solid #00cc44;
  padding: 8px 0 0 0;
  text-align: center;
}
.talk-leiste .status {
  border: none;
  margin: 0 0 8px 0;
  padding: 0;
  opacity: 0.85;
  min-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
}
.talk-button {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-size: 1em;
  padding: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  touch-action: none; /* verhindert Scroll/Zoom-Gesten, während der Knopf gehalten wird */
  user-select: none;  /* verhindert Text-Markierung bei längerem Halten */
}
.talk-button.aufnahme-aktiv {
  background: #00cc44;
  color: #010a03;
  animation: talk-puls 1s ease-in-out infinite;
}
@keyframes talk-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Smartphone: body-Grundgröße nochmal größer (typischer Betrachtungsabstand) - die beiden
   Größenstufen (1em/0.75em) bleiben dieselben, nur die absolute Basis wächst mit. */
@media (max-width: 600px) {
  body { font-size: 20px; padding: 8px 12px 6px 12px; }
  .talk-button { width: 180px; height: 180px; }
}

/* ── OHNE SPRECHTASTE ── IO.init() setzt ohne-spracheingabe auf <html>, wenn der Browser keine
   Web Speech API hat (z.B. Firefox); arena-game.js setzt ohne-sprechtaste, wenn die Taste per
   Schalter aus ist (Standard auf Touch-Geräten). In beiden Fällen entfällt die Sprechen-Leiste
   samt unterem Freiraum, gespielt wird über die Texteingabe. */
/* Debug-Infos aus (Standard für Tester): technische Statuszeilen und Antwortzeiten ausblenden. */
html.ohne-debug .kampflog-technik,
html.ohne-debug .kampflog-zeit,
html.ohne-debug .nur-debug { display: none; }

html.ohne-spracheingabe .talk-leiste,
html.ohne-sprechtaste .talk-leiste { display: none; }

/* ── TOUCH-GERÄTE: Tastatur offen ── Die fixe Sprechen-Leiste würde auf dem Handy mit der
   eingeblendeten Tastatur nach oben wandern und das Textfeld verdecken. Solange ein Textfeld der
   Interaktionsbox den Fokus hat, wird sie deshalb ausgeblendet - wer tippt, spricht gerade nicht.
   Nur bei grobem Zeiger (Finger), damit am Desktop der Knopf neben dem Textfeld sichtbar bleibt. */
@media (pointer: coarse) {
  body:has(#interaktion textarea:focus) .talk-leiste { display: none; }
}

/* ── OPTIONEN-OVERLAY ── abgedunkelter Hintergrund über dem ganzen Spiel, darin ein Fenster mit den
   Schaltern untereinander. Geöffnet/geschlossen über zeigeOptionen() in arena-game.js. */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 10, 3, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.overlay.hidden { display: none; }
.overlay-fenster {
  background: #010a03;
  width: 32em;
  max-width: 90%;
  max-height: 90%;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.overlay-fenster button { margin: 10px 0 2px 0; text-align: left; }
.erklaerung { margin: 0 0 4px 0; opacity: 0.7; line-height: 1.4; }
button.hidden + .erklaerung { display: none; }
.experimentell { color: #ffcc00; }
.rechtliches { margin: 14px 0 0 0; }
/* Datenschutz-Overlay: liegt über dem Optionen-Overlay, breiteres Fenster, Text scrollt im Fenster. */
.overlay-oben { z-index: 30; }
.text-fenster { width: 44em; }
.rechtstext { line-height: 1.5; }
.rechtstext h2, .rechtstext h3 { font-size: 1em; font-weight: normal; margin: 1em 0 0.3em 0; text-decoration: underline; }
.rechtstext h2 { margin-top: 0; }
.rechtstext p { margin: 0 0 0.6em 0; }
.rechtstext strong { font-weight: normal; color: #ffcc00; }
.rechtstext a { color: #00cc44; }
.rechtliches a { color: #00cc44; margin-right: 12px; text-decoration: none; }
.rechtliches a:hover, .rechtliches a:focus { text-decoration: underline; }