/* MPU Test-Modus — vollständige Übernahme des Viewports */
body.test-mode {
  background: #111;
  color: #e0e0e0;
  overflow: hidden;
}


body.test-mode nav,
body.test-mode .container {
  display: none !important;
}

#test-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}

/* Fixationskreuz (sichtbar während ISI in M1, M2, DT) */
.fixation-cross {
  font-size: 60px;
  color: #444;
  user-select: none;
  line-height: 1;
}

/* ── M1 — Reaktion: grauer Kreis ───────────────────────────────────────── */
.stimulus-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #808080;
}

/* ── M2 — Wahlreaktion: farbige Quadrate ────────────────────────────────── */
.stimulus-square {
  width: 200px;
  height: 200px;
}

/* ── M3 — VIG (Vigilanztest) ─────────────────────────────────────────────
   Non-Target: einfacher grauer Kreis
   Target:     gleiche Größe, aber mit sichtbarem hellerem Rand (subtil) */
.vig-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #6b7280;
}

.vig-circle-target {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #6b7280;
  border: 8px solid #9ca3af;
  box-sizing: border-box;
}

/* ── M4 — COG (Konzentrationstest): SVG-Figurenpaar ─────────────────────── */
.cog-pair {
  display: flex;
  gap: 80px;
  align-items: center;
}

.cog-item {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cog-item svg {
  width: 100px;
  height: 100px;
}

/* ── M5 — DT (Determinationstest): 10-Kreis-Grid + Peripherie-Rechtecke ─ */
#dt-grid { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.dt-row { display: flex; gap: 18px; }
.dt-slot {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #3a3a3a;
  transition: background 0.05s;
}
.dt-periph {
  position: fixed;
  bottom: 40px;
  width: 38px;
  height: 96px;
  background: #3a3a3a;
  border-radius: 6px;
  transition: background 0.05s;
}
#dt-periph-left  { left:  48px; }
#dt-periph-right { right: 48px; }
.dt-periph.active { background: #e5e5e5; }

/* ── BRT — Belastungs-Reaktionstest ─────────────────────────────────────── */
#brt-screen {
  position: fixed;
  inset: 0;
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

#brt-stim {
  width: 160px;
  height: 160px;
}

.brt-stim-blau   { background: #3b82f6; }
.brt-stim-orange { background: #f97316; }

.brt-label {
  color: #aaa;
  font-size: 1.3rem;
  text-align: center;
  user-select: none;
}

.brt-phase { color: #6b7280; font-size: 1rem; }
.brt-ok    { color: #4ade80; font-size: 2.5rem; }
.brt-err   { color: #f87171; font-size: 2.5rem; }

#brt-keys {
  position: absolute;
  bottom: 40px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 80px;
  pointer-events: none;
}

.brt-key {
  width: 72px; height: 72px;
  border: 3px solid #444;
  border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #555; font-size: 0.75rem;
  user-select: none;
  transition: border-color 0.06s, background 0.06s, color 0.06s;
}

.brt-key-blau.brt-key-active   { border-color: #3b82f6; background: #1a3352; color: #93c5fd; }
.brt-key-orange.brt-key-active { border-color: #f97316; background: #3d1a06; color: #fdba74; }

/* ── VOK — Visueller Orientierungs- & Konzentrationstest ──────────────── */
#vok-screen {
  position: fixed;
  inset: 0;
  background: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

#vok-timer {
  position: fixed;
  top: 16px;
  right: 24px;
  font-size: 1.2rem;
  color: #555;
  font-family: monospace;
}

#vok-pair {
  display: flex;
  gap: 80px;
  align-items: center;
}

.vok-symbol {
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vok-symbol svg { width: 100px; height: 100px; }

#vok-hint { color: #555; font-size: 0.85rem; text-align: center; }

/* Fortschritts-Anzeige oben rechts (während Test) */
#progress-indicator {
  position: fixed;
  top: 16px;
  right: 24px;
  font-size: 0.85rem;
  color: #555;
  font-family: monospace;
}

/* Training-Feedback: kurzes ✓ / ✗ nach Reiz */
.trial-feedback {
  font-size: 80px;
  user-select: none;
}
.trial-feedback.correct  { color: #4ade80; }
.trial-feedback.wrong    { color: #f87171; }