/* Rechentrainer (Issue #150): bewusst eigenstaendige Retro-Arcade-Optik statt
   des Oak-Aquarellstils -- ausdruecklich von Stephi autorisierte Ausnahme
   (Issue-Kommentar "Ergaenzte Erkenntnisse", Abschnitt 5 "Visuelle Richtung:
   bewusst Retro-Arcade": "soll die Gestaltung nicht unnoetig stark in den
   normalen Oak-Aquarellstil gezogen werden"). Eigene Tokens, ausschliesslich
   innerhalb von .rechentrainer-view gueltig -- ueberschreibt keine globalen
   tokens.css-Werte (siehe dortiger Hinweis "Keine neue Farbe erfunden").
   Die Erwachsenen-Auswertung (.rechentrainer-adult-report) bleibt bewusst
   im normalen Oak-Papierstil, da sie Teil der bestehenden "Erwachsene"-Seite
   ist, kein eigener Spielbildschirm. */

.rechentrainer-view {
  --arcade-bg: #0B0C10;
  --arcade-panel: #1D2029;
  --arcade-line: #2B2F3A;
  --arcade-ink: #F3EBDD;
  --arcade-ink-secondary: #9AA0AE;
  --arcade-accent: #49B9C7;
  --arcade-warn: #D95A9B;

  height: 100%;
  overflow-y: auto;
  background: var(--arcade-bg);
  color: var(--arcade-ink);
  font-family: "Courier New", monospace;
  padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 20px) 20px;
}

.rechentrainer-view h2 {
  font-family: "Courier New", monospace;
  color: var(--arcade-ink);
  letter-spacing: 1px;
}

.rechentrainer-intro,
.rechentrainer-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 480px;
}

.rechentrainer-note {
  color: var(--arcade-ink-secondary);
  line-height: 1.5;
}

.rechentrainer-mixed-button,
.rechentrainer-start-button {
  min-height: 48px;
  padding: 10px 18px;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-weight: bold;
}

.rechentrainer-mixed-button {
  border: 1px solid var(--arcade-line);
  background: var(--arcade-panel);
  color: var(--arcade-ink);
}

.rechentrainer-start-button {
  border: 1px solid var(--arcade-accent);
  background: var(--arcade-accent);
  color: #0B0C10;
}

.rechentrainer-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

/* HUD liegt bewusst ausserhalb des Canvas (eigenes DOM-Element), damit
   Aufgabe und Fortschritt als echter, gut lesbarer Text erscheinen statt
   in den Canvas gezeichnet zu werden. */
.rechentrainer-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  width: 100%;
  max-width: 560px;
  background: var(--arcade-panel);
  border: 1px solid var(--arcade-line);
  border-radius: 8px;
}

.rechentrainer-hud-prompt {
  font-size: 22px;
  font-weight: bold;
}

.rechentrainer-hud-stats {
  text-align: right;
  font-size: 13px;
  color: var(--arcade-ink-secondary);
  line-height: 1.5;
}

/* Das Labyrinth ist ein kleines, vollstaendig zusammenhaengendes Gitter
   (mazeGraph.js) und passt komplett auf den Bildschirm -- kein Scroll/keine
   Kamera mehr noetig (anders als die vorherige, sehr breite Fassung). */
.rechentrainer-canvas-frame {
  border: 1px solid var(--arcade-line);
  border-radius: 8px;
  overflow: hidden;
}

.rechentrainer-canvas {
  display: block;
  image-rendering: pixelated;
  touch-action: none;
}

.rechentrainer-hint {
  color: var(--arcade-ink-secondary);
  font-size: 13px;
}

/* Schmalere App-Navigation nur waehrend tatsaechlich gespielt wird
   (Stephi-Feedback: "Menü an der Seite darf weniger sein") -- der Body-Klasse
   ist an rechentrainerView.js gebunden (nur waehrend renderGameScreen()
   gemountet ist) und betrifft absichtlich nicht die Navigation in anderen
   Bereichen oder auf der Start-/Zusammenfassungsseite. Aendert
   ausschliesslich Breite/Groesse, keine neuen Farben oder Struktur der
   bestehenden App-Shell (docs/art/DAILY_MAGIC_UI_SYSTEM.md). */
body.rechentrainer-game-active .app-nav {
  width: 56px;
  padding-left: calc(var(--safe-left) + 4px);
  padding-right: 4px;
}

body.rechentrainer-game-active .app-nav-button {
  padding: 8px 2px;
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
}

/* Moduswahl innerhalb von "Lernwege" (Rechnen/Deutsch, siehe
   src/app/lernwegeView.js) -- die einzelnen Uebungen behalten ihre jeweils
   eigene Optik (Retro-Arcade, Papierstil, ...), der Rahmen selbst ist
   bewusst neutral. Kartenwahl-Anzeige und Zurueck-Button leben seit Issue
   #188 in styles/lernwegeCards.css (eigene Wald-/Pergament-Tokens). */
.lernwege-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0B0C10;
}

/* Deutsch-Endungsuebung: eigenes Bild-HUD statt Text-Prompt (Stephi,
   2026-08-17: "Das Wort wird per Bild dargestellt") -- Layout sonst
   identisch zum Rechentrainer-HUD. */
.german-endings-hud {
  align-items: center;
}

.german-endings-icon-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.german-endings-icon-canvas {
  display: block;
  image-rendering: pixelated;
  background: var(--arcade-bg);
  border: 1px solid var(--arcade-line);
  border-radius: 6px;
}

.german-endings-speak-button {
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  border: 1px solid var(--arcade-line);
  background: var(--arcade-panel);
  color: var(--arcade-ink);
}

/* Erwachsenen-Auswertung: bewusst im normalen Papierstil der bestehenden
   "Erwachsene"-Seite, keine Retro-Farben (siehe Dateikopf). */
.rechentrainer-adult-report {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-shadow);
}

.rechentrainer-adult-report h3 {
  margin-bottom: 4px;
}

.rechentrainer-adult-report h4 {
  margin-bottom: 4px;
  color: var(--ink-primary);
}

.rechentrainer-adult-report ul {
  margin: 0 0 8px;
  padding-left: 20px;
  color: var(--ink-secondary);
}

.rechentrainer-report-focus {
  color: var(--ink-secondary);
  font-style: italic;
}

/* Kategorieauswahl Höhenklettern (#48): eigenes Fieldset innerhalb der
   sonst ueberschriftenbasierten .rechentrainer-adult-report-Struktur, daher
   ein eigener Rahmen-Reset statt Vererbung von h3/h4/ul oben. */
.climb-category-selection {
  margin: 12px 0;
  padding: 8px 12px;
  border: 1px solid var(--paper-shadow);
  border-radius: 4px;
}

.climb-category-selection legend {
  padding: 0 4px;
  font-weight: bold;
  color: var(--ink-primary);
}

.climb-category-selection label {
  display: block;
  margin: 4px 0;
  color: var(--ink-secondary);
}

/* Fokus-Feineinstellungen je Kategorie (#49): Zehnerübergang bei + und -,
   Reihenauswahl beim kleinen 1x1, plus die rundenweite Etappen-Einstellung
   am Ende des Fieldsets. Absichtlich als eingerueckter Unterblock direkt bei
   der jeweiligen Kategorie -- nicht als eigener, weit entfernter Bereich
   (siehe Stephi-Feedback zum Zeitraum bei #20: "Ich weiß nicht wo weiter
   unten gemeint ist"). */
.climb-category-row {
  margin: 4px 0 14px;
}

.climb-category-row > label {
  font-weight: 600;
}

.climb-tens-crossing-selection,
.climb-reihen-selection {
  margin: 4px 0 0 24px;
  font-size: 14px;
}

.climb-tens-crossing-selection label,
.climb-reihen-selection label {
  display: inline-block;
  margin: 2px 12px 2px 0;
  font-weight: normal;
}

.climb-tier-focus-mode {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--paper-shadow);
  font-size: 14px;
}

.climb-tier-focus-mode label {
  display: inline-block;
  margin: 2px 12px 2px 0;
  font-weight: normal;
}