/* EVA-Blackbox -- Farben und Formensprache wie die uebrigen
   Jg6-Tools (vgl. shared/css/practiceGame.css und overview.css). */

:root {
  --eva-primary: #4a6cf7;
  --eva-primary-dark: #3a5be0;
  --eva-ink: #2f3542;
  --eva-bg: #eef2f7;
  --eva-right: #2ecc71;
  --eva-wrong: #ff4a4a;
  --eva-gold: #ffd24a;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--eva-bg);
  color: #333;
}

.eva-screen {
  display: none;
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 24px 60px 24px;
}

.eva-screen.eva-active {
  display: block;
}

/* ---------- Zweispaltige Arbeitsflaeche in der Box-Ansicht ----------
   Links die Maschine mit Knoepfen und Multiple Choice, rechts das
   Protokoll. So bleibt die Frage "Was macht diese Box?" immer direkt
   unter der Grafik, egal wie viele Zeilen das Protokoll schon hat. */

#boxScreen {
  max-width: 1120px;
}

.eva-arbeitsflaeche {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 28px;
  align-items: start;
}

/* Die Spalte bleibt reserviert, auch solange das Protokoll noch
   leer ist -- sonst springt die Maschine beim ersten Ergebnis. */
.eva-neben {
  min-width: 0;
}

.eva-hidden {
  display: none !important;
}

.eva-title {
  margin: 0 0 10px 0;
  font-size: 2rem;
  color: var(--eva-ink);
  text-align: center;
}

.eva-subtitle {
  margin: 0 auto 26px auto;
  max-width: 640px;
  text-align: center;
  line-height: 1.55;
  color: #555;
}

/* ---------- Auswahl der Boxen ---------- */

.eva-boxgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 16px;
}

.eva-boxcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: var(--eva-ink);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.eva-boxcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.eva-boxcard__letter {
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--eva-gold);
  line-height: 1;
}

.eva-boxcard__type {
  font-size: 0.9rem;
  color: #dfe4ec;
}

/* Schwierigkeitsstufe. Bewusst als Wort und nicht nur farbig --
   die Karte muss auch ohne Farbwahrnehmung lesbar bleiben. */
.eva-boxcard__stufe {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.eva-boxcard--stufe1 .eva-boxcard__stufe { color: #7ee2a8; }
.eva-boxcard--stufe2 .eva-boxcard__stufe { color: #ffd24a; }
.eva-boxcard--stufe3 .eva-boxcard__stufe { color: #ff9a8b; }

/* ---------- Die Maschine ---------- */

.eva-head {
  margin-bottom: 10px;
}

.eva-machine {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 10px 0 6px 0;
}

.eva-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eva-slot__label {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--eva-ink);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.eva-input,
.eva-out {
  width: 180px;
  height: 62px;
  border-radius: 10px;
  font-size: 1.5rem;
  text-align: center;
}

.eva-input {
  border: 2px solid #c7d0e0;
  background: #fff;
  color: var(--eva-ink);
  padding: 0 10px;
}

.eva-input:focus {
  outline: none;
  border-color: var(--eva-primary);
}

.eva-out {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #c7d0e0;
  background: #fff;
  color: #b0b8c6;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.eva-out.eva-out--filled {
  border-style: solid;
  border-color: var(--eva-right);
  color: var(--eva-ink);
  animation: evaPop 0.35s ease-out;
}

@keyframes evaPop {
  0%   { transform: scale(0.85); opacity: 0.4; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}

.eva-arrow {
  font-size: 2rem;
  color: var(--eva-primary);
  padding-bottom: 14px;
}

.eva-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 150px;
  height: 62px;
  border-radius: 10px;
  background: var(--eva-ink);
}

.eva-box__mark {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--eva-gold);
  line-height: 1;
}

.eva-box__label {
  font-size: 0.72rem;
  color: #aeb6c4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.eva-hint {
  min-height: 1.4em;
  text-align: center;
  color: var(--eva-wrong);
  font-size: 0.95rem;
}

/* ---------- Knoepfe ---------- */

.eva-btn-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 6px 0;
}

.eva-btn {
  padding: 12px 22px;
  border: none;
  border-radius: 8px;
  background: var(--eva-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.eva-btn:hover {
  background: var(--eva-primary-dark);
  transform: translateY(-2px);
}

.eva-btn--secondary {
  background: #99a1b3;
}

.eva-btn--secondary:hover {
  background: #808a9e;
}

/* ---------- Karten (Protokoll, Multiple Choice) ---------- */

.eva-card {
  margin: 24px auto 0 auto;
  max-width: 620px;
  padding: 20px 24px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.eva-card--schmal {
  margin: 0;
  max-width: none;
  padding: 14px 16px;
  position: sticky;
  top: 16px;
}

.eva-card--schmal .eva-card__title {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

/* Viele Versuche sollen die Karte nicht wachsen lassen, sondern
   in ihr scrollen. Der Fokus liegt auf dem Werkzeug, nicht auf
   der Liste. */
.eva-tabellenbox {
  max-height: 300px;
  overflow-y: auto;
}

.eva-card--schmal .eva-table th,
.eva-card--schmal .eva-table td {
  padding: 5px 6px;
}

.eva-card--schmal .eva-table th {
  font-size: 0.7rem;
  position: sticky;
  top: 0;
  background: #fff;
}

.eva-card--schmal .eva-table td {
  font-size: 0.95rem;
}

.eva-card__title {
  margin: 0 0 14px 0;
  font-size: 1.1rem;
  color: var(--eva-ink);
}

.eva-table {
  width: 100%;
  border-collapse: collapse;
}

.eva-table th,
.eva-table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid #e4e9f0;
  overflow-wrap: anywhere;
}

.eva-table th {
  font-size: 0.85rem;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.eva-table td {
  font-size: 1.1rem;
  color: var(--eva-ink);
}

.eva-mc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eva-mc-option {
  padding: 12px 16px;
  border: 2px solid #dfe4ec;
  border-radius: 8px;
  background: #fff;
  color: var(--eva-ink);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.eva-mc-option:hover:enabled {
  border-color: var(--eva-primary);
  background: #f4f7ff;
}

.eva-mc-option:disabled {
  cursor: default;
}

.eva-mc-option--right {
  border-color: var(--eva-right);
  background: #eafaf0;
}

.eva-mc-option--wrong {
  border-color: var(--eva-wrong);
  background: #fdeeee;
}

.eva-feedback {
  margin-top: 14px;
  font-weight: bold;
  line-height: 1.5;
}

.eva-feedback--right { color: #1f9d55; }
.eva-feedback--wrong { color: #d63a3a; }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 900px) {
  .eva-arbeitsflaeche {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .eva-card--schmal {
    position: static;
    max-width: 620px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .eva-machine {
    flex-direction: column;
    align-items: center;
  }
  .eva-arrow {
    transform: rotate(90deg);
    padding: 0;
  }
}

/* ---------- Kugelreise Eingabe -> Box -> Ausgabe ---------- */
/* Zwei Farben mit Absicht: was hineingeht, ist nicht dasselbe wie
   das, was herauskommt. Die Box verwandelt es. */

.eva-kugel {
  position: fixed;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;   /* auf den Mittelpunkt setzen */
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  transition-property: left, top;
  transition-timing-function: ease-in-out;
}

.eva-kugel--ein {
  background: var(--eva-primary);
  box-shadow: 0 0 0 4px rgba(74, 108, 247, 0.22);
}

.eva-kugel--aus {
  background: var(--eva-right);
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.22);
}

@keyframes evaWackel {
  0%, 100% { transform: translateX(0)    rotate(0deg); }
  25%      { transform: translateX(-3px) rotate(-2deg); }
  75%      { transform: translateX(3px)  rotate(2deg); }
}

.eva-box--aktiv {
  animation: evaWackel 90ms ease-in-out 2;
}

/* Wer Animationen abgeschaltet hat, bekommt das Ergebnis sofort --
   das JS ueberspringt die Kugelreise ohnehin. */
@media (prefers-reduced-motion: reduce) {
  .eva-out.eva-out--filled { animation: none; }
  .eva-box--aktiv { animation: none; }
}