/* woerterattacke/styles.css
   GUI „Arcade-Automat“ (Muster cb_leiste von Stadt-Baumeister
   und nm_leiste von Neumark 1400): das Spiel hat eine EIGENE JUPI-Leiste in
   Spieloptik und eigene Menüs, die zum Space-Shooter passen. Das Spiel ist
   GRUNDSÄTZLICH IMMER DUNKEL mit Violett-Tönen (Wunsch der Lehrperson,
   24.10.2026) - kein Theme-Wechsel, data-theme steht statisch auf "dark".
   Namensraum durchgehend .wa_*, Farbvariablen aus colors.css + eigene --wa-*.
   Layout-Basis bleibt jupi.css (container, footer, schalter); hier nur die
   Leiste, die Halle und die Fenster. */

/* Die Farbpalette der Spielwelt hängt am body: Leiste, Menüs, HUD und Fuß
   teilen sie, und Vererbung läuft nur abwärts (main ≠ Fuß-Geschwister). */
body.wa_body {
  --wa-violett: #b388ff;
  --wa-cyan: #3ee6ff;
  --wa-gelb: #ffd166;
  --wa-gruen: #7CFFB2;
  --wa-rot: #ff6b6b;
  --wa-tiefe: #0b0620;
  --wa-kasten: rgba(20, 12, 48, 0.82);
  --wa-kante: rgba(179, 136, 255, 0.45);
  --wa-text: #e9e2ff;
  --wa-text-leise: #b6a8e0;
  /* Höhe der eigenen Leiste: Leiste UND Container brauchen sie. */
  --wa-leiste-h: 3.3rem;
}

.wa_main {
  display: block;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0.6rem 0.9rem 0;
}

.wa_spielbereich { display: block; }

/* ========================================================================
   1) EIGENE JUPI-LEISTE in Arcade-Optik (Muster cb_leiste)
   Drei Zonen: zurück · Marke · Sprache + Dark Mode. Die Leiste ist der
   obere Abschluss des Arcade-Kabinetts: dunkel mit Neon-Kante, in beiden
   Themes gleich, weil die Spielwelt ebenfalls immer dunkel ist.
   ======================================================================== */
.wa_leiste {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--wa-leiste-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  padding: 0 max(.6rem, env(safe-area-inset-right)) 0 max(.6rem, env(safe-area-inset-left));
  box-sizing: border-box;
  background: linear-gradient(180deg, #1b1140 0%, #0d0722 100%);
  border-bottom: 1px solid rgba(179, 136, 255, .4);
  box-shadow: 0 3px 16px rgba(70, 25, 160, .5);
}
/* Die leuchtende Neon-Kante unter dem Kabinettkopf. */
.wa_leiste::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent,
    rgba(179, 136, 255, .9) 18%, rgba(62, 230, 255, .95) 50%,
    rgba(179, 136, 255, .9) 82%, transparent);
  pointer-events: none;
}

/* Zone links: Zurück-Chip (Muster cb_zurueck, Bedienziel ≥ 40 px) */
.wa_zurueck {
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; min-height: 2.6rem;
  border-radius: .5rem;
  border: 1px solid rgba(62, 230, 255, .5);
  background: rgba(62, 230, 255, .1);
  color: var(--wa-cyan);
  font-size: 1.15rem; font-weight: 800; line-height: 1;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.wa_zurueck:hover {
  background: rgba(62, 230, 255, .26);
  box-shadow: 0 0 12px rgba(62, 230, 255, .45);
}
.wa_zurueck:focus-visible { outline: 3px solid var(--wa-gelb); outline-offset: 2px; }

/* Zone Mitte: Marke (Paket-Logo + Spielname im Neonrahmen) */
.wa_marke {
  display: flex; align-items: center; gap: .55rem;
  min-width: 0;
}
.wa_marke img { width: 32px; height: 32px; flex-shrink: 0; }
.wa_marke h1 {
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: .09em;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 0 12px rgba(179, 136, 255, .8), 0 0 26px rgba(62, 230, 255, .35);
}

/* Zone rechts: Sprachwahl (ID bleibt jupi_*).
   Die Schalter von jupi.css sind halbtransparent und stehen auf der dunklen
   Leiste gut - hier nur die Farben auf Neon abstimmen. */
.wa_leiste .jupi_werkzeuge {
  justify-self: end;
  display: flex; align-items: center; gap: .45rem; flex-shrink: 0;
}
.wa_leiste .jupi_sprachen_select {
  max-width: 13rem;
  background: rgba(11, 6, 32, .75);
  border-color: rgba(179, 136, 255, .55);
  color: #efe9ff;
}
.wa_leiste .jupi_sprachen_select:hover { background: rgba(45, 24, 100, .85); }
.wa_leiste .jupi_sprachen_select option { color: #212121; background: #fff; }

/* Die feste Leiste braucht Platz: der Seiteninhalt rückt darunter. */
.wa_container {
  padding-top: calc(var(--wa-leiste-h) + .6rem);
  box-sizing: border-box;
}

/* Großansicht: nur das Spiel - Leiste und Fuß treten ab (Muster cb_fs). */
body.wa_grossansicht .wa_leiste { display: none; }
body.wa_grossansicht { --wa-leiste-h: 0rem; }

/* ── Arcade-Halle: der Seitenhintergrund ──────────────────────────────────
   jupi.css färbt body und die Container-Kinder im Dunkelmodus MATERIAL-GRAU
   (html[data-theme="dark"] body.jupi → #121212, .jupi_container > .jupi_* →
   #1E1E1E, Spezifität 0,2,x). Diese Regeln werden hier MIT DEM GLEICHEN
   Muster (html[data-theme]-Präfix, eine Klasse mehr) auf Violett umgeändert.
   Das Spiel ist immer dunkel - es gibt keine helle Fassung. */
html[data-theme="dark"] body.jupi.wa_body {
  background: var(--wa-tiefe);
}
html[data-theme="dark"] .wa_container > .jupi_main { background: transparent; }
body.wa_body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #0e0827;
  background-image:
    radial-gradient(ellipse 85% 46% at 50% -7rem, rgba(120, 50, 220, .48), transparent 64%),
    radial-gradient(ellipse 74% 52% at 50% 48%, rgba(96, 40, 190, .20), transparent 66%),
    radial-gradient(ellipse 60% 44% at 8% 54%, rgba(120, 60, 220, .22), transparent 62%),
    radial-gradient(ellipse 70% 50% at 94% 110%, rgba(110, 50, 210, .30), transparent 62%),
    radial-gradient(ellipse 46% 34% at 72% 24%, rgba(62, 230, 255, .07), transparent 60%),
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, .55), transparent 55%),
    radial-gradient(1px 1px at 30% 44%, rgba(255, 255, 255, .35), transparent 55%),
    radial-gradient(1.4px 1.4px at 47% 12%, rgba(255, 255, 255, .4), transparent 55%),
    radial-gradient(1px 1px at 62% 66%, rgba(255, 255, 255, .3), transparent 55%),
    radial-gradient(1.3px 1.3px at 78% 34%, rgba(255, 255, 255, .5), transparent 55%),
    radial-gradient(1px 1px at 90% 78%, rgba(255, 255, 255, .35), transparent 55%),
    radial-gradient(1.1px 1.1px at 8% 84%, rgba(255, 255, 255, .4), transparent 55%),
    radial-gradient(1px 1px at 22% 60%, rgba(255, 255, 255, .25), transparent 55%),
    radial-gradient(1.2px 1.2px at 55% 90%, rgba(255, 255, 255, .3), transparent 55%),
    radial-gradient(1px 1px at 40% 30%, rgba(255, 255, 255, .3), transparent 55%);
}

/* Arcade-Scrollbars (WebKit) + schlanke Laufschiene (Firefox). */
body.wa_body { scrollbar-color: rgba(120, 60, 220, .55) transparent; scrollbar-width: thin; }
body.wa_body ::-webkit-scrollbar { width: 10px; height: 10px; }
body.wa_body ::-webkit-scrollbar-track { background: transparent; }
body.wa_body ::-webkit-scrollbar-thumb {
  background: rgba(120, 60, 220, .5);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.wa_body ::-webkit-scrollbar-thumb:hover { background: rgba(150, 90, 255, .7); background-clip: padding-box; }

/* ── HUD: die Score-Tafel des Automaten ────────────────────────────────── */
.wa_hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .5rem .75rem;
  margin-bottom: .45rem;
  background: linear-gradient(180deg, rgba(26, 16, 64, .95), rgba(13, 7, 34, .95));
  border: 1px solid var(--wa-kante);
  border-radius: .6rem;
  box-shadow: inset 0 0 24px rgba(60, 20, 130, .35), 0 2px 10px rgba(0, 0, 0, .45);
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  position: relative;
}
.wa_hud::before {
  /* dünne Neon-Linie oben, wie die Beleuchtung der Anzeigetafel */
  content: "";
  position: absolute;
  top: 0; left: .8rem; right: .8rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(62, 230, 255, .8), transparent);
}
.wa_hud_gruppe { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
.wa_held { display: flex; flex-direction: column; line-height: 1.15; min-width: 3.2rem; }
.wa_held_label {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wa-cyan);
  opacity: .85;
}
.wa_held_wert {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--wa-text);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px rgba(179, 136, 255, .5);
}
#wa_combo { color: var(--wa-text-leise); }
#wa_combo[data-aktiv="ja"] { color: var(--wa-gelb); text-shadow: 0 0 10px rgba(255, 209, 102, .6); }
.wa_leben_herz { color: #ff6b9d; letter-spacing: .06em; }
.wa_schild_balken { color: var(--wa-gruen); letter-spacing: .1em; }

/* Laufende Power-ups */
.wa_power {
  display: inline-block;
  min-width: 2.6rem;
  padding: .15rem .35rem;
  margin: 0 .2rem;
  border-radius: .3rem;
  background: rgba(255, 209, 102, .18);
  border: 1px solid rgba(255, 209, 102, .55);
  color: var(--wa-gelb);
  font-size: .72rem;
  text-align: center;
}

/* Aussprache-Knopf im HUD - bewusst als Aktion, nicht als Dauerzustand */
.wa_hud_knopf {
  align-self: center;
  min-width: 2.8rem;
  min-height: 2.8rem;
  border-radius: .5rem;
  border: 1px solid rgba(62, 230, 255, .5);
  background: rgba(62, 230, 255, .12);
  color: var(--wa-cyan);
  font-size: 1.1rem;
  cursor: pointer;
}
.wa_hud_knopf:hover { background: rgba(62, 230, 255, .28); }
.wa_hud_knopf:focus-visible { outline: 3px solid var(--wa-gelb); outline-offset: 2px; }
.wa_hud_knopf[hidden] { display: none; }
.wa_gross_knopf { padding: .35rem .65rem; font-size: .85rem; }
.wa_gross_knopf[aria-pressed="true"] { background: rgba(62, 230, 255, .3); }

/* Großansicht nutzt das Fenster statt der normalen 64vh-Begrenzung.
   Aufgabe, Status und Touch-Tasten bleiben dabei vollständig im Bild. */
body.wa_grossansicht { overflow: hidden; }
body.wa_grossansicht .wa_spielbereich {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: .5rem;
  box-sizing: border-box;
  overflow: auto;
  background: var(--wa-tiefe);
}
body.wa_grossansicht .wa_buehne {
  max-width: calc(var(--wa-gross-hoehe, 70vh) * 1.5);
}

/* ── Aufgaben-Leiste (die "Angreifer-Anzeige") ─────────────────────────── */
/* Aufgaben-Leiste (die "Angreifer-Anzeige") - im Titelbildschirm gibt es
   noch keine Aufgabe, dann bleibt die Leiste weg statt eines Platzhalters. */
.wa_prompt_leiste {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .5rem .8rem .6rem;
  margin-bottom: .45rem;
  border-radius: .6rem;
  border: 1px solid var(--wa-kante);
  background: linear-gradient(180deg, rgba(26, 16, 64, .95), rgba(13, 7, 34, .95));
  overflow: hidden;
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
}
/* Farbe der Leiste verrät, in welcher Sprache das Zielwort steht. */
.wa_prompt_leiste[data-ziel="en"] { border-color: rgba(62, 230, 255, .6); }
.wa_prompt_leiste[data-ziel="de"] { border-color: rgba(255, 179, 0, .6); }
.wa_prompt_haupt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .3rem .8rem;
  text-align: center;
}
.wa_prompt_art {
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wa-violett);
  border: 1px solid rgba(179, 136, 255, .45);
  border-radius: .25rem;
  padding: .1rem .3rem;
  background: rgba(179, 136, 255, .1);
}
.wa_prompt_wort {
  font-size: clamp(1.25rem, 3.4vw, 1.9rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(179, 136, 255, .7);
}
.wa_prompt_richtung {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .1rem .35rem;
  border-radius: .25rem;
}
.wa_prompt_richtung[data-sprache="en"] { color: var(--wa-cyan); border: 1px solid rgba(62, 230, 255, .5); }
.wa_prompt_richtung[data-sprache="de"] { color: var(--wa-gelb); border: 1px solid rgba(255, 179, 0, .5); }
/* Fortschrittsbalken der Welle */
.wa_prompt_fortschritt {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
  --anteil: 0%;
}
.wa_prompt_fortschritt::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--anteil);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--wa-violett), var(--wa-cyan));
  transition: width .25s ease;
}

/* Im Titelbildschirm ist noch keine Aufgabe gestellt - die Leiste bleibt weg,
   statt einen leeren Platzhalter zu zeigen. */
body:not(.wa_im_spiel) .wa_prompt_leiste { display: none; }

/* ── Bühne ──────────────────────────────────────────────────────────────── */
.wa_buehne {
  position: relative;
  /* Deckel gegen zu hohe Buehnen: das Spielfeld muss INCLUDING Schiff und
     Schilden in den Bildschirm passen, sonst ist der untere Spielfeldteil
     unsichtbar. 64vh ist die Buehnenhoehe, mal 1.5 ergibt die Breite. */
  width: 100%;
  max-width: calc(64vh * 1.5);
  margin-inline: auto;
  border-radius: .7rem;
  overflow: hidden;
  border: 2px solid rgba(179, 136, 255, .55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6),
    0 0 22px rgba(120, 60, 220, .45),
    0 14px 40px rgba(30, 10, 70, .55);
  background: #05030f;
  touch-action: none;
}
#wa_canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  image-rendering: pixelated;
  cursor: crosshair;
}
/* Röhrenbildschirm-Gefühl: dunkle Vignette an den Rändern des Bildschirms.
   Liegt ÜBER der Zeichnung, aber UNTER Startmenü (4) und Overlay (5) und
   fängt keine Zeiger-Ereignisse. */
.wa_buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(ellipse at 50% 42%, transparent 56%, rgba(2, 0, 10, .38) 100%);
}

/* Kurzmeldung (z. B. "Welle geschafft!") */
.wa_meldung {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translateX(-50%);
  padding: .45rem .9rem;
  border-radius: .4rem;
  background: rgba(6, 4, 20, .9);
  border: 1px solid var(--wa-kante);
  color: var(--wa-gelb);
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  white-space: nowrap;
}
.wa_meldung.wa_sichtbar { opacity: 1; }

/* ── Startmenü als Titelbildschirm (Typ 4) ──────────────────────────────── */
/* Der Titelbildschirm ist der Bildschirm des Automaten: Das Demo-Formation
   bleibt sichtbar dahinter, darüber liegen Scanlinien und die Menükarte. */
.wa_startmenue {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: auto;
  background: radial-gradient(ellipse at 50% 24%, rgba(24, 12, 60, .6), rgba(5, 3, 15, .92));
  z-index: 4;
}
/* Scanlinien wie auf einem alten Röhrenbildschirm (nur Deko). */
.wa_startmenue::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
body.wa_im_spiel .wa_startmenue { display: none; }
.wa_start_karte {
  position: relative;
  width: min(44rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 1rem 1.2rem 1.2rem;
  border-radius: .8rem;
  background: linear-gradient(180deg, rgba(16, 9, 44, .96), rgba(9, 5, 26, .97));
  border: 1px solid rgba(179, 136, 255, .5);
  box-shadow:
    0 0 0 1px rgba(62, 230, 255, .18),
    0 0 34px rgba(120, 60, 220, .4),
    inset 0 0 60px rgba(60, 20, 120, .25);
  color: var(--wa-text);
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0;
}
/* Ab zwei Spalten Platz: Niveau über die volle Breite, Thema und Modus
   stehen nebeneinander wie zwei Münzeinheiten des Automaten. */
@media (min-width: 640px) {
  .wa_start_karte { grid-template-columns: 1fr 1fr; column-gap: 1.1rem; }
  .wa_start_titel, .wa_block_niveau, .wa_start_knoepfe, .wa_lernziel { grid-column: 1 / -1; }
}

.wa_start_titel { margin-bottom: .6rem; }
/* Lauflicht über dem Titel: die drei Lichter blinken im Wechsel. */
.wa_start_punkt {
  color: var(--wa-gruen);
  letter-spacing: .2em;
  font-size: .8rem;
  animation: wa_lauflicht 1.6s steps(1) infinite;
}
@keyframes wa_lauflicht {
  0%, 100% { color: var(--wa-gruen); text-shadow: 0 0 10px rgba(124, 255, 178, .8); }
  50%      { color: var(--wa-cyan);  text-shadow: 0 0 10px rgba(62, 230, 255, .8); }
}
.wa_start_titel h2 {
  margin: .1rem 0 .15rem;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  font-weight: 900;
  letter-spacing: .07em;
  color: #fff;
  text-shadow:
    0 0 8px rgba(62, 230, 255, .65),
    0 0 22px rgba(179, 136, 255, .55),
    0 2px 0 rgba(90, 40, 180, .8);
}
.wa_start_unter { margin: 0; font-size: .82rem; color: var(--wa-text-leise); }

.wa_wahl_block { margin: .75rem 0; text-align: left; }
.wa_wahl_block h3 {
  margin: 0 0 .35rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wa-violett);
}
.wa_wahl_reihe { display: flex; flex-wrap: wrap; gap: .4rem; }
.wa_wahl_knopf {
  flex: 1 1 9rem;
  min-height: 3.6rem;                     /* gut tippbar (Regel 3.13.5) */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  padding: .45rem .6rem;
  border-radius: .5rem;
  border: 1px solid rgba(179, 136, 255, .45);
  background: rgba(11, 6, 32, .6);
  color: var(--wa-text);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform .12s, border-color .12s, background .12s, box-shadow .12s;
}
.wa_wahl_knopf:hover {
  transform: translateY(-2px);
  border-color: rgba(62, 230, 255, .7);
  box-shadow: 0 0 12px rgba(62, 230, 255, .25);
}
.wa_wahl_knopf.wa_aktiv {
  background: rgba(62, 230, 255, .16);
  border-color: var(--wa-cyan);
  box-shadow: 0 0 0 1px var(--wa-cyan), 0 0 18px rgba(62, 230, 255, .35);
}
.wa_wahl_knopf:focus-visible { outline: 3px solid var(--wa-gelb); outline-offset: 2px; }
.wa_wahl_gross { font-size: 1.05rem; font-weight: 800; color: #fff; }
.wa_wahl_klein { font-size: .68rem; color: var(--wa-text-leise); }
.wa_wahl_best { font-size: .62rem; color: var(--wa-gelb); }

.wa_thema_label { display: block; font-size: .7rem; color: var(--wa-text-leise); margin-bottom: .2rem; }
.wa_thema_auswahl {
  width: 100%;
  min-height: 2.8rem;
  padding: .4rem .6rem;
  border-radius: .45rem;
  border: 1px solid rgba(179, 136, 255, .5);
  background: rgba(6, 4, 20, .9);
  color: var(--wa-text);
  font-family: inherit;
  font-size: .9rem;
}
.wa_thema_auswahl option { background: #120a2e; color: #fff; }

.wa_start_knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin: .9rem 0 .6rem;
}
.wa_start_knoepfe .jupi_btn { min-height: 2.9rem; font-family: inherit; }
/* Der Start-Knopf ist der rote Einsatzknopf des Automaten: groß, grün und
   mit sanftem Puls, damit man ihn sofort findet (ohne reduced motion). */
.wa_start_knopf {
  background: #2e7d32;
  border: 1px solid rgba(124, 255, 178, .7);
  color: #fff;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(124, 255, 178, .3), inset 0 -3px 0 rgba(0, 0, 0, .35);
  animation: wa_einsatz 2.2s ease-in-out infinite;
}
.wa_start_knopf:hover {
  background: #388e3c;
  box-shadow: 0 0 24px rgba(124, 255, 178, .55), inset 0 -3px 0 rgba(0, 0, 0, .35);
}
/* Im Dunkelmodus färbt jupi.css .jupi_btn bernstein (html[data-theme]-Regel,
   Spezifität 0,2,1) - der Einsatzknopf bleibt in BEIDEN Themes grün. */
html[data-theme="dark"] .wa_start_knopf {
  background: #2e7d32;
  color: #fff;
}
html[data-theme="dark"] .wa_start_knopf:hover {
  background: #388e3c;
  color: #fff;
}
@keyframes wa_einsatz {
  0%, 100% { box-shadow: 0 0 12px rgba(124, 255, 178, .25), inset 0 -3px 0 rgba(0, 0, 0, .35); }
  50%      { box-shadow: 0 0 26px rgba(124, 255, 178, .55), inset 0 -3px 0 rgba(0, 0, 0, .35); }
}
.wa_lernziel {
  margin: .5rem 0 0;
  padding: .55rem .7rem;
  border-radius: .45rem;
  background: rgba(179, 136, 255, .12);
  border: 1px dashed rgba(179, 136, 255, .45);
  font-size: .76rem;
  line-height: 1.5;
  color: var(--wa-text);
  text-align: left;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Die Auswahlfelder hinter den Schaltflächen: für das Formular,
   nicht für die Augen. */
.wa_versteckte_wahl {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ── Pause- und Ergebnisbildschirm ──────────────────────────────────────── */
.wa_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: radial-gradient(ellipse at 50% 30%, rgba(24, 12, 60, .78), rgba(5, 3, 15, .94));
  z-index: 5;
}
.wa_overlay[hidden] { display: none; }        /* ohne [hidden]-Guard gewinnt sonst das display:flex */
.wa_overlay_karte {
  width: min(38rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 1rem 1.2rem;
  border-radius: .8rem;
  background: linear-gradient(180deg, rgba(16, 9, 44, .97), rgba(9, 5, 26, .97));
  border: 1px solid rgba(179, 136, 255, .55);
  box-shadow: 0 0 30px rgba(120, 60, 220, .4);
  color: var(--wa-text);
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  text-align: center;
}
.wa_overlay_karte h2 {
  margin: 0 0 .4rem; font-size: 1.5rem; color: #fff;
  text-shadow: 0 0 14px rgba(62, 230, 255, .55);
}
.wa_overlay_karte p { margin: .25rem 0; font-size: .9rem; }
.wa_overlay_zusatz { color: var(--wa-gelb); font-size: .78rem !important; }
.wa_overlay_knoepfe {
  display: flex; flex-wrap: wrap; gap: .45rem;
  justify-content: center; margin-top: .8rem;
}
.wa_overlay_knoepfe .jupi_btn { min-height: 2.8rem; font-family: inherit; }

/* Gelernte Wörter aus der Partie (Rückblick, keine Unterbrechung im Spiel) */
.wa_woerter_liste {
  list-style: none;
  margin: .6rem 0 0;
  padding: .5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .2rem .5rem;
  max-height: 9rem;
  overflow: auto;
  border-radius: .45rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(179, 136, 255, .25);
  font-size: .74rem;
}
.wa_woerter_liste[hidden] { display: none; }
.wa_woerter_liste li { text-align: left; color: var(--wa-text); }
.wa_woerter_liste li b { color: var(--wa-cyan); font-weight: 700; }

/* ── Bildschirmtasten ───────────────────────────────────────────────────── */
/* Sie stehen UNTER dem Spielfeld, nicht darauf: ueber der Buehne verdeckten
   sie genau das Schiff und die Schilde, also genau das, was man treffen will. */
.wa_touch {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .7rem;
  background: linear-gradient(180deg, rgba(13, 7, 34, .96), rgba(6, 3, 18, .96));
  border-top: 1px solid rgba(179, 136, 255, .4);
}
.wa_touch_knopf {
  min-width: 3.6rem;
  min-height: 3.6rem;                     /* deutlich über 40 px */
  border-radius: 50%;
  border: 2px solid rgba(62, 230, 255, .55);
  background: rgba(11, 6, 32, .8);
  color: var(--wa-cyan);
  font-size: 1.3rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  box-shadow: 0 0 10px rgba(62, 230, 255, .2);
}
.wa_touch_knopf.wa_gedrueckt { background: rgba(62, 230, 255, .3); transform: scale(.95); }
.wa_touch_feuer {
  border-color: rgba(124, 255, 178, .6);
  color: var(--wa-gruen);
  min-width: 4.4rem;
  min-height: 4.4rem;
  box-shadow: 0 0 10px rgba(124, 255, 178, .25);
}

/* ── Fenster (native <dialog>) im Kabinettrahmen ────────────────────────── */
.wa_dialog {
  border: 1px solid rgba(179, 136, 255, .55);
  border-radius: .8rem;
  background: linear-gradient(180deg, #150c3a 0%, #0d0722 100%);
  color: var(--wa-text);
  padding: 0;
  max-width: 44rem;
  width: calc(100% - 1.6rem);
  box-shadow: 0 0 34px rgba(120, 60, 220, .45), 0 20px 60px rgba(0, 0, 0, .6);
}
.wa_dialog::backdrop { background: rgba(3, 2, 10, .78); }
.wa_dialog_innen { display: flex; flex-direction: column; max-height: min(80vh, 44rem); }
.wa_dialog_kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid rgba(179, 136, 255, .35);
  background: rgba(62, 230, 255, .06);
}
.wa_dialog_kopf h2 {
  margin: 0; font-size: 1.15rem; color: #fff;
  text-shadow: 0 0 10px rgba(179, 136, 255, .5);
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
}
.wa_dialog_zu {
  min-width: 2.5rem; min-height: 2.5rem;
  border-radius: .4rem; border: 1px solid rgba(179, 136, 255, .4);
  background: rgba(255, 255, 255, .05); color: var(--wa-text);
  font-size: 1rem; cursor: pointer;
}
.wa_dialog_zu:hover { background: rgba(255, 255, 255, .12); }
.wa_dialog_text {
  padding: .8rem 1rem;
  overflow: auto;
  font-size: .9rem;
  line-height: 1.6;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ct-color);
}
html[data-theme="dark"] .wa_dialog_text { color: var(--grey50-color); }
.wa_dialog_text h3 { margin: .9rem 0 .3rem; color: var(--wa-violett); font-size: .95rem; }
.wa_dialog_text ul { margin: .3rem 0; padding-left: 1.2rem; }
.wa_dialog_text li { margin: .2rem 0; }
.wa_power_liste li { margin: .25rem 0; }
.wa_dialog_fuss {
  padding: .7rem 1rem; border-top: 1px solid rgba(179, 136, 255, .35);
  display: flex; justify-content: flex-end;
}
.wa_dialog_fuss .jupi_btn { min-height: 2.7rem; }

/* Optionen */
.wa_option_block {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .5rem 0;
  border-bottom: 1px solid rgba(179, 136, 255, .18);
}
.wa_option_label { font-weight: 700; }
.wa_icon_knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.6rem; padding: .3rem .8rem;
  border-radius: .45rem; border: 1px solid rgba(62, 230, 255, .45);
  background: rgba(255, 255, 255, .05); color: var(--ct-color);
  font-family: system-ui, sans-serif; font-size: .85rem; cursor: pointer;
}
html[data-theme="dark"] .wa_icon_knopf { color: var(--grey50-color); }
.wa_icon_knopf[aria-pressed="true"] { background: rgba(124, 255, 178, .18); border-color: var(--wa-gruen); }
.wa_option_hinweis { font-size: .78rem; color: var(--wa-text-leise); }
.wa_best_zeile { font-size: .85rem; }

/* ── Fuß: der Unterteller des Kabinetts ───────────────────────────────────
   jupi.css färbt den Fuß im Dunkelmodus GRAU (html[data-theme="dark"]
   .jupi_footer → #1A1A1A und .jupi_container > .jupi_footer → #1E1E1E,
   je 0,2,1). Gegenan mit demselben Präfix und einer Klasse mehr: klar
   violetter Verlauf statt Grau. */
html[data-theme="dark"] .wa_footer.jupi_footer {
  margin-top: .8rem;
  background: linear-gradient(180deg, #1d1045 0%, #0d0722 100%);
  border-top: 2px solid rgba(179, 136, 255, .45);
  border-radius: 1.2rem 1.2rem 0 0;
  box-shadow: 0 -2px 22px rgba(90, 35, 190, .35);
  color: #cfc6ee;
}
html[data-theme="dark"] .wa_footer .jupi_footer_text p { color: #cfc6ee; }
html[data-theme="dark"] .wa_footer .jupi_footer_text a { color: var(--wa-cyan); }
html[data-theme="dark"] .wa_footer .jupi_footer_text a:hover { color: #8ff0ff; }

/* ── Anpassung an kleine Fenster ────────────────────────────────────────── */
@media (max-width: 900px) {
  .wa_touch { display: flex; }
  /* Auf Handy/Tablet braucht die Tastenleiste darunter Platz - deshalb
     etwas kleinere Buehne, damit alles ohne Scrollen bedienbar bleibt. */
  .wa_buehne { max-width: calc(52vh * 1.5); }
}
@media (max-width: 720px) {
  .wa_main { padding: .4rem .5rem 0; }
  .wa_held { min-width: 2.8rem; }
  .wa_held_wert { font-size: .95rem; }
  .wa_marke h1 { font-size: 1rem; }
  .wa_leiste .jupi_sprachen_select { max-width: 10.5rem; }
  .wa_start_karte { padding: .8rem .8rem 1rem; }
  .wa_wahl_knopf { flex: 1 1 7rem; }
  .wa_overlay_karte h2 { font-size: 1.2rem; }
}
@media (max-width: 600px) {
  /* Auf schmalen Handys zeigt die Marke nur das Logo - Platz für die
     Sprachwahl, das Wort "Wörter-Attacke" steht im Titelbildschirm. */
  .wa_marke h1 { display: none; }
}
@media (max-width: 460px) {
  .wa_wahl_reihe { flex-direction: row; }
  .wa_wahl_knopf { flex: 1 1 calc(50% - .4rem); min-width: 0; }
  .wa_prompt_wort { font-size: 1.3rem; }
  .wa_woerter_liste { grid-template-columns: 1fr 1fr; }
  .wa_zurueck { min-width: 2.4rem; }
}

/* ── Barrierefreiheit ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wa_prompt_fortschritt::before,
  .wa_meldung,
  .wa_wahl_knopf { transition: none; }
  .wa_wahl_knopf:hover { transform: none; }
  .wa_start_punkt,
  .wa_start_knopf { animation: none; }
  .wa_start_knopf {
    box-shadow: 0 0 16px rgba(124, 255, 178, .3), inset 0 -3px 0 rgba(0, 0, 0, .35);
  }
}
/* Screenreader: der Titelbildschirm-Kasten bleibt auch ohne Farbe lesbar. */
.wa_start_karte, .wa_overlay_karte { border-left: 4px solid var(--wa-cyan); }

/* DaZ-Aufgaben sind Sätze: Text darf umbrechen und wird nie abgeschnitten. */
.wa_prompt_haupt { flex-wrap: wrap; }
.wa_prompt_wort { font-size: clamp(1rem,2vw,1.45rem); line-height: 1.35;
  overflow-wrap: anywhere; flex: 1 1 22rem; min-width: 0; }
@media(max-width:600px) { .wa_prompt_wort { flex-basis: 100%; order: 2; } }

/* Zwei Sprachfassungen teilen eine flexible Spalte über dem Spielfeld. */
.wa_prompt_fragen { flex: 1 1 22rem; min-width: 0; display: grid; gap: .3rem; }
.wa_prompt_fragen .wa_prompt_wort { display: block; order: 0; }
.wa_prompt_uebersetzung { font-size: clamp(.95rem,1.8vw,1.2rem); line-height: 1.4;
  overflow-wrap: anywhere; color: var(--wa-text); }
.wa_prompt_uebersetzung[hidden] { display: none; }
@media(max-width:600px) { .wa_prompt_fragen { flex-basis: 100%; order: 2; } }