/* rechenraumschiff/styles.css - Cockpit-GUI des Rechen-Raumschiffs.
   ------------------------------------------------------------------
   Aufbau der Seite (Stand 25.10.2026, Umbau nach der Referenz):

     1. Kulisse   - body.rsm_body: Weltraum (raum.svg) hinter allem.
     2. Leiste    - .rsm_header: JUPI-Leiste IM SPIELSTIL (Navy, Goldkante,
                    Zurueck-Pille, Logo mittig, Sprache + Theme rechts).
     3. Konsole   - .rsm_konsole: EINE dunkle Karte mit
                    a) .rsm_setup     Tempo links, Zahlenraum/Hilfe/Ton rechts
                    b) .rsm_hud       4 Instrumente + Aufgabe und Zeit-Leiste
                    c) .rsm_canvaswrap 16:9-Spielfeld
                    d) .rsm_inputrow  Antwort + Abschuss
     4. Fusszeile - .rsm_footer: schmale Cockpit-Leiste mit zwei Amber-Lampen.

   WICHTIG (Merksatz aus der AGENTS.md): .rsm_konsole/.rsm_hud/.rsm_inputrow
   sind SELBSTTRAEGEND - alles, was das Layout traegt, steht hier. Die frueher
   gemeinsamen Regeln der Plattform-CSS haben beim Ordner-Wechsel gefehlt.

   Farben: Die Spielwelt bleibt in BEIDEN Themes dunkel (Navy + Gold + Cyan).
   Der Theme-Schalter hellt nur den Weltraum hinter dem Cockpit etwas auf -
   so bleibt das Auge beim Spiel, ohne dass der Schalter wirkungslos wirkt.
   ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --rsm-gold: #ffc24f;
  --rsm-gold-hell: #ffe0a0;
  --rsm-gold-tief: #e0911c;
  --rsm-cyan: #4fd0ff;
  --rsm-gruen: #7dfba1;
  --rsm-tinte: #e8f2ff;
  --rsm-gedaempft: #9db4cf;
  --rsm-kante: #24456e;
  --rsm-panel: #101d33;
  --rsm-panel-2: #0b1626;
  --rsm-feld: #0a1728;
}

/* ---------- 1. Kulisse: Weltraum hinter dem Cockpit ---------- */
/* Der Selector traegt html[data-theme], weil jupi.css den body-Hintergrund
   auch im Dark Mode setzt (html[data-theme="dark"] body.jupi) - hier gewinnt
   die Spielkulisse in BEIDEN Themes. */
html[data-theme] body.jupi.rsm_body {
  background: #050b16 url("raum.svg") center / cover no-repeat fixed;
  color: var(--rsm-tinte);
  min-height: 100dvh;
}

/* Etwas Licht hinter dem Cockpit, damit die Konsole nicht auf dem Sternen-
   bild "klebt" (rein dekorativ, nimmt keine Klicks an).
   Der Dark-Schalter soll sichtbar etwas tun, ohne die Spielwelt hell zu
   machen: im HELLEN Modus liegt ein blaeulicher Lichtschleier ueber dem
   Weltraum, im dunklen bleibt er tief. Konsole und Leiste bleiben beide
   dunkel - das Auge soll beim Spiel bleiben. */
html[data-theme] body.jupi.rsm_body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 30rem at 50% 12%, rgba(40, 110, 190, .18), transparent 70%),
    linear-gradient(180deg, rgba(3, 7, 14, .35), rgba(3, 7, 14, .05) 30%, rgba(3, 7, 14, .45));
}
html[data-theme="light"] body.jupi.rsm_body::before {
  background:
    radial-gradient(70rem 34rem at 50% 8%, rgba(96, 168, 235, .38), transparent 72%),
    radial-gradient(40rem 24rem at 84% 78%, rgba(58, 132, 200, .2), transparent 70%),
    linear-gradient(180deg, rgba(120, 170, 225, .16), rgba(90, 140, 200, .04) 32%, rgba(6, 14, 26, .38));
}

/* Die Seite fuellt das Fenster, damit die Cockpit-Fusszeile unten sitzt und
   der Weltraum nicht als leerer Streifen unter der Seite steht.
   WICHTIG: grid-template-rows muss die vier Zeilen ausdruecklich setzen.
   Sonst gelten die drei Zeilen unter der ersten als IMPLIZITE auto-Zeilen, und
   bei freier Hoehe verteilt das Grid den Rest gleichmaessig auf sie - die
   Leiste rutschte dadurch um ~40 px nach unten (im Test "Leiste oben" sichtbar). */
.jupi_container {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  grid-template-rows: 0 auto 1fr auto;
}

/* ---------- 2. JUPI-Leiste im Spielstil ---------- */
html[data-theme] body.jupi.rsm_body .rsm_header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  padding: .48rem clamp(.6rem, 1.8vw, 1.4rem);
  background: linear-gradient(180deg, #16294a 0%, #0d1c33 62%, #0a1728 100%);
  border: 0;
  box-shadow:
    0 12px 28px rgba(2, 6, 16, .6),
    inset 0 1px 0 rgba(130, 200, 255, .25),
    inset 0 -14px 24px rgba(3, 9, 20, .35);
  color: var(--rsm-tinte);
}
/* Goldene Zierkante an der Unterseite - das Erkennungszeichen der Leiste. */
html[data-theme] body.jupi.rsm_body .rsm_header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255, 194, 79, 0) 0%, #f2b13c 10%, var(--rsm-gold-hell) 50%,
    #f2b13c 90%, rgba(255, 194, 79, 0) 100%);
  box-shadow: 0 0 14px rgba(255, 180, 70, .6);
}

.rsm_kopf_seite {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}
.rsm_kopf_links { justify-content: space-between; }
.rsm_kopf_rechts { justify-content: space-between; }

/* Amber-Lichtleisten neben dem Logo (Cockpit-Detail aus der Referenz) */
.rsm_vent {
  flex: 0 1 auto;
  width: clamp(14px, 5vw, 62px);
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 170, 50, .15), #ffbe55);
  box-shadow: 0 0 10px rgba(255, 175, 60, .75), inset 0 1px 0 rgba(255, 235, 190, .8);
  opacity: .95;
}
.rsm_kopf_rechts .rsm_vent {
  background: linear-gradient(270deg, rgba(255, 170, 50, .15), #ffbe55);
}

html[data-theme] body.jupi.rsm_body .rsm_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .45rem .95rem;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
  color: #ffd47a;
  background: linear-gradient(180deg, rgba(255, 186, 70, .14), rgba(255, 160, 40, .06));
  border: 1.5px solid rgba(255, 196, 100, .8);
  border-radius: 999px;
  box-shadow: inset 0 0 12px rgba(255, 170, 60, .18), 0 2px 10px rgba(0, 0, 0, .35);
  transition: background .15s, border-color .15s, transform .15s;
  white-space: nowrap;
}
html[data-theme] body.jupi.rsm_body .rsm_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, rgba(255, 186, 70, .26), rgba(255, 160, 40, .12));
  border-color: var(--rsm-gold-hell);
  transform: translateY(-1px);
}

.rsm_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .6rem;
  min-width: 0;
}
.rsm_brand img {
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(255, 120, 80, .45));
}
.rsm_brand h1 {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.38rem);
  line-height: 1.15;
  letter-spacing: .015em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
  white-space: nowrap;
}

html[data-theme] body.jupi.rsm_body .rsm_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
}
html[data-theme] body.jupi.rsm_body .rsm_header #jupi_sprachen_wahl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  padding-right: 1rem;
}
/* Der Pfeil der Sprachauswahl wird mit CSS gezeichnet, nicht als data:-Bild -
   im isolierten PWA-Betrieb zaehlt jede data:-Anfrage als "Pfad aus dem
   Paket heraus" (Pruefung "C: kein Pfad fuehrt aus dem Paket heraus"). */
html[data-theme] body.jupi.rsm_body .rsm_header #jupi_sprachen_wahl::after {
  content: "";
  position: absolute;
  right: .55rem;
  top: 50%;
  width: .42rem;
  height: .42rem;
  margin-top: -.32rem;
  border-right: 2px solid #ffd06a;
  border-bottom: 2px solid #ffd06a;
  transform: rotate(45deg);
  pointer-events: none;
}
html[data-theme] body.jupi.rsm_body .rsm_header .jupi_sprachen_icon {
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(120, 200, 255, .6));
}
html[data-theme] body.jupi.rsm_body .rsm_header .jupi_sprachen_select {
  min-height: 42px;
  padding: .35rem 2rem .35rem .85rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  color: #dcebfd;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: #0d1c31;
  border: 1.5px solid rgba(255, 196, 100, .55);
  border-radius: 999px;
  max-width: 15rem;
}
html[data-theme] body.jupi.rsm_body .rsm_header .jupi_sprachen_select:hover {
  border-color: rgba(255, 210, 140, .9);
}
html[data-theme] body.jupi.rsm_body .rsm_header .jupi_sprachen_select option {
  color: #10203a;
  background: #fff;
}
html[data-theme] body.jupi.rsm_body .rsm_header .jupi_theme_switch {
  position: relative;
  width: 74px;
  height: 42px;
  min-width: 74px;
  padding: 0;
  background: linear-gradient(180deg, #16294a, #0b1a2e);
  border: 1.5px solid rgba(255, 196, 100, .6);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(150, 210, 255, .18);
}
html[data-theme] body.jupi.rsm_body .rsm_header .jupi_theme_switch:hover {
  border-color: rgba(255, 210, 140, .95);
}
.rsm_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d8e6f7 70%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .rsm_header .jts_thumb { left: calc(100% - 38px); }
.rsm_header .jts_sun { left: 10px; }
.rsm_header .jts_moon { right: 10px; }
html[data-theme] body.jupi.rsm_body .rsm_header .jts_icon {
  font-size: .82rem;
  z-index: 3;
}

/* ---------- 3. Hauptflaeche ---------- */
/* WICHTIG: jupi.css malt .jupi_main und die Fusszeile weiss aus (--ct-color).
   Ohne diese Zeile bleiben links/rechts und unter der Konsole helle Streifen
   stehen - der Weltraum soll dort durchscheinen. */
html[data-theme] body.jupi.rsm_body .jupi_main.rsm_main {
  background: transparent;
  padding: .55rem clamp(.4rem, 1.6vw, 1.1rem) 0;
  max-width: 100rem;
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

.rsm_konsole {
  position: relative;
  max-width: 96rem;
  margin: 0 auto;
  padding: .7rem clamp(.55rem, 1.2vw, 1rem) .85rem;
  border-radius: 1rem;
  /* WICHTIG: #101d33 muss im Verlauf bleiben - der Spieltest prueft, dass die
     Konsole in Light UND Dark dunkel ist (rgb(16, 29, 51)). */
  background:
    radial-gradient(120% 55% at 50% -10%, rgba(64, 132, 204, .2), transparent 70%),
    linear-gradient(180deg, #101d33 0%, #0b1626 100%);
  border: 1px solid var(--rsm-kante);
  box-shadow:
    0 18px 44px rgba(2, 7, 18, .62),
    inset 0 1px 0 rgba(130, 200, 255, .16);
}

/* Eck-Klammern wie auf einer Instrumententafel */
.rsm_konsole::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: .78rem;
  pointer-events: none;
  opacity: .5;
  background:
    linear-gradient(90deg, var(--rsm-cyan), transparent) left top / 22px 2px no-repeat,
    linear-gradient(180deg, var(--rsm-cyan), transparent) left top / 2px 22px no-repeat,
    linear-gradient(270deg, var(--rsm-cyan), transparent) right top / 22px 2px no-repeat,
    linear-gradient(180deg, var(--rsm-cyan), transparent) right top / 2px 22px no-repeat,
    linear-gradient(90deg, var(--rsm-cyan), transparent) left bottom / 22px 2px no-repeat,
    linear-gradient(0deg, var(--rsm-cyan), transparent) left bottom / 2px 22px no-repeat,
    linear-gradient(270deg, var(--rsm-cyan), transparent) right bottom / 22px 2px no-repeat,
    linear-gradient(0deg, var(--rsm-cyan), transparent) right bottom / 2px 22px no-repeat;
}

/* --- a) Einstellungen: Tempo links, Rest rechts --- */
.rsm_setup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem .9rem;
  margin: 0 0 .5rem;
  padding: 0 0 .45rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(78, 140, 205, .22);
  border-radius: 0;
  box-shadow: none;
}
.rsm_feld {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.rsm_feld_tempo { order: -1; margin-inline-end: auto; }
.rsm_feld label,
.rsm_feld > label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rsm-gedaempft);
}
/* Auswahlfeld: der Pfeil wird mit CSS gezeichnet (zwei Rautenkanten).
   WICHTIG: kein data:-Bild als Hintergrund - im isolierten PWA-Betrieb
   zaehlt jede data:-Anfrage als "Pfad aus dem Paket heraus". */
.rsm_selectwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.rsm_selectwrap::after {
  content: "";
  position: absolute;
  right: .7rem;
  width: .46rem;
  height: .46rem;
  border-right: 2px solid #ffd06a;
  border-bottom: 2px solid #ffd06a;
  transform: rotate(45deg) translateY(-2px);
  pointer-events: none;
}
.rsm_select {
  min-height: 40px;
  max-width: 19rem;
  padding: .3rem 2rem .3rem .7rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--rsm-tinte);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: #0d1d33;
  border: 1.5px solid #2f5580;
  border-radius: .6rem;
}
.rsm_select:hover { border-color: #4677ac; }
.rsm_select:focus-visible {
  outline: 2px solid var(--rsm-cyan);
  outline-offset: 2px;
}
.rsm_select option { color: #10203a; background: #fff; }

/* Tempo-Regler: goldener Balken, runder Griff */
#rsm_tempo_regler {
  -webkit-appearance: none;
  appearance: none;
  width: 9rem;
  height: 26px;
  background: transparent;
  accent-color: var(--rsm-gold);
  cursor: pointer;
}
#rsm_tempo_regler::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(90, 150, 210, .35);
  background: linear-gradient(90deg, var(--rsm-gold) 0 var(--rsm-tempo, 50%), #1b3150 var(--rsm-tempo, 50%) 100%);
}
#rsm_tempo_regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe6b4, var(--rsm-gold) 62%, var(--rsm-gold-tief));
  border: 1px solid #8a5a10;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
#rsm_tempo_regler::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: #1b3150;
  border: 1px solid rgba(90, 150, 210, .35);
}
#rsm_tempo_regler::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--rsm-gold);
}
#rsm_tempo_regler::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rsm-gold);
  border: 1px solid #8a5a10;
}
.rsm_tempo_anzeige {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: .8rem;
  font-weight: 700;
  color: #cfe1f5;
  min-width: 9rem;
}

/* Hilfe- und Ton-Knopf: dunkle Instrumententasten */
.rak_hilfe,
.rsm_ton {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  color: #d9e8fa;
  background: linear-gradient(180deg, #16263f, #0d1b2f);
  border: 1.5px solid #2b456d;
  border-radius: .65rem;
  box-shadow: inset 0 1px 0 rgba(140, 200, 255, .17);
  transition: background .12s, border-color .12s, transform .12s;
}
.rak_hilfe:hover,
.rsm_ton:hover { background: linear-gradient(180deg, #1d3252, #12233b); border-color: #3d6698; }
.rak_hilfe:active,
.rsm_ton:active { transform: scale(.94); }

/* --- b) Instrumente + Aufgabe/Zeit --- */
.rsm_hud {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0 0 .55rem;
  padding: 0;
  border: 0;
  color: var(--rsm-tinte);
}
.rsm_instrumente {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  align-items: stretch;
}
.rsm_hud_box {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .45rem .7rem;
  text-align: left;
  background: linear-gradient(180deg, rgba(58, 100, 152, .42), rgba(16, 32, 54, .62));
  border: 1px solid rgba(88, 150, 215, .34);
  border-radius: .8rem;
  box-shadow: inset 0 1px 0 rgba(160, 215, 255, .18), 0 4px 12px rgba(0, 0, 0, .28);
}
.rsm_ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}
.rsm_ico svg { width: 100%; height: 100%; display: block; }
.rsm_box_punkte .rsm_ico { color: #9fd8ff; }
.rsm_box_schilde .rsm_ico { color: #8ec9ff; }
.rsm_box_level .rsm_ico { color: var(--rsm-gold); }
.rsm_box_erledigt .rsm_ico { color: #67d8f7; }

.rsm_box_text {
  display: flex;
  flex-direction: column;
  gap: .02rem;
  min-width: 0;
}
.rsm_hud_box label {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #9bb4d1;
  line-height: 1.05;
  white-space: nowrap;
  overflow-wrap: anywhere;
}
.rsm_hud_box .rsm_wert {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#rsm_score { color: var(--rsm-gruen); }
#rsm_level { color: #ffd06a; }
#rsm_solved { color: #e6f2ff; }
#rsm_lives {
  display: inline-flex;
  align-items: center;
  gap: .16rem;
  color: #a9d6ff;
}
/* Schilde als gezeichnete Symbole statt Emoji: sehen auf jeder Tafel gleich
   aus und ein verlorenes Schild bleibt als Umriss sichtbar. */
.rsm_schild { display: inline-flex; }
.rsm_schild svg {
  display: block;
  width: .98em;
  height: .98em;
  fill: rgba(120, 190, 255, .2);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.rsm_schild.aus { opacity: .32; }
.rsm_schild.aus svg { stroke-dasharray: 3 2.6; fill: none; }

/* Punkte/Level reagieren sichtbar (game.js setzt .pop / .verlust) */
@keyframes rsm_pop { 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
#rsm_score.pop { animation: rsm_pop .45s ease-out; display: inline-block; }
@keyframes rsm_leuchten { 0%{box-shadow:0 0 0 0 rgba(255,213,79,.55)} 100%{box-shadow:0 0 0 .5rem rgba(255,213,79,0)} }
#rsm_level.pop { animation: rsm_leuchten .7s ease-out; border-radius: .3rem; }
@keyframes rsm_verlust { 0%{background:rgba(229,57,53,.55)} 100%{background:transparent} }
#rsm_lives.verlust { animation: rsm_verlust .75s ease-out; border-radius: .3rem; }

.rsm_mitte {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: nowrap;
}
/* Die Aufgabe steht gross im Cockpit - das ist das, worum es beim Spiel geht.
   Dieselbe Aufgabe steht noch einmal auf dem Asteroiden im Canvas. */
.rsm_question {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: clamp(1.3rem, 2.3vw, 1.95rem);
  font-weight: 800;
  letter-spacing: .02em;
  color: #ffcd55;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(255, 170, 40, .3);
}
.rsm_timewrap {
  flex: 1 1 auto;
  min-width: 8rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.rsm_timewrap label {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rsm-gedaempft);
}
.rsm_timebar {
  height: .72rem;
  background: var(--rsm-feld);
  border: 1px solid rgba(80, 140, 200, .42);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}
.rsm_timefill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #5fe08a, #a6f07c);
  box-shadow: 0 0 12px rgba(120, 240, 150, .55);
  transition: width .1s linear;
}
.rsm_timefill.danger {
  background: linear-gradient(90deg, #ff5252, #ff9d5c);
  box-shadow: 0 0 12px rgba(255, 80, 80, .6);
}

/* --- c) Spielfeld: Monitor-Bucht + 16:9-Bild --- *
   Die Bucht (.rsm_canvaswrap) spannt die ganze Konsole und wirkt wie ein
   Bildschirm im Pult; das Bild (.rsm_bild) haengt an der Hoehen-Grenze
   (Maxhoehe*16:9) und sitzt mittig. Die alte Regel (width:100% + max-height
   am Canvas) zerriss auf breiten Fenstern das Verhaeltnis und stauchte das
   Bild um ~40 % - darum diese Trennung. */
.rsm_canvaswrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .42rem;
  margin: 0 auto;
  border-radius: .95rem;
  overflow: hidden;
  border: 1px solid #1b3a5f;
  /* Seitenflaechen der Bucht: feine Techniklinien statt schwarzer Leere -
     das 16:9-Bild kann die volle Konsolenbreite nicht fuellen, die Reste
     sollen wie Pult-Paneele wirken. */
  background:
    linear-gradient(90deg, rgba(255, 190, 80, .07), transparent 14%, transparent 86%, rgba(255, 190, 80, .07)),
    repeating-linear-gradient(90deg, rgba(96, 156, 216, .07) 0 1px, transparent 1px 26px),
    radial-gradient(120% 90% at 50% 50%, rgba(22, 48, 80, .55), rgba(4, 9, 15, .96) 72%),
    #050b14;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(120, 190, 255, .12);
}
/* Eck-Klammern auf dem Schirmrahmen */
.rsm_canvaswrap::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: .75rem;
  pointer-events: none;
  opacity: .45;
  background:
    linear-gradient(90deg, var(--rsm-gold), transparent) left top / 18px 2px no-repeat,
    linear-gradient(180deg, var(--rsm-gold), transparent) left top / 2px 18px no-repeat,
    linear-gradient(270deg, var(--rsm-gold), transparent) right top / 18px 2px no-repeat,
    linear-gradient(180deg, var(--rsm-gold), transparent) right top / 2px 18px no-repeat,
    linear-gradient(90deg, var(--rsm-gold), transparent) left bottom / 18px 2px no-repeat,
    linear-gradient(0deg, var(--rsm-gold), transparent) left bottom / 2px 18px no-repeat,
    linear-gradient(270deg, var(--rsm-gold), transparent) right bottom / 18px 2px no-repeat,
    linear-gradient(0deg, var(--rsm-gold), transparent) right bottom / 2px 18px no-repeat;
}
.rsm_bild {
  position: relative;
  width: min(100%, calc(max(90px, 100dvh - 398px) * 1.77777778));
  border-radius: .55rem;
  overflow: hidden;
  border: 1px solid #35618f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .65), 0 0 0 1px rgba(90, 170, 255, .1), 0 0 26px rgba(60, 140, 220, .16);
  background: #08101f;
}
#rsm_canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 540;
  background: #08101f;
}

/* --- Start- und Game-Over-Overlay --- *
   Nur Start-Knopf und Bestwert; der Schleier ist absichtlich duenn, damit das
   Weltraum-Bild durchscheint - der Start soll nach Spielfeld aussehen, nicht
   nach schwarzer Flaeche (Referenz zeigt das laufende Feld). */
.rsm_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  text-align: center;
  color: #fff;
  background: radial-gradient(ellipse at 50% 45%, rgba(8, 22, 40, .3), rgba(4, 10, 20, .62));
  backdrop-filter: blur(1px);
}
.rsm_overlay.hidden { display: none; }
.rsm_overlay h3,
.rsm_overlay_text { display: none; }
.rsm_overlay.gameover .rsm_overlay_text {
  display: block;
  max-width: 30rem;
  margin: 0;
  color: #cfe1f5;
  font-size: .9rem;
}
.rsm_overlay h3 { font-size: clamp(1.2rem, 3.2vw, 1.6rem); margin: 0; }
.rsm_best_zeile {
  margin: 0;
  min-height: 1.1em;
  font-size: .8rem;
  font-weight: 700;
  color: #ffd06a;
}
#rsm_btn {
  min-height: 48px;
  padding: .6rem 2rem;
  font-size: 1.08rem;
  font-weight: 900;
  color: #2a1a00;
  background: linear-gradient(180deg, #ffe08a, var(--rsm-gold) 45%, var(--rsm-gold-tief));
  border: 1.5px solid #b97b12;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(240, 160, 20, .38), inset 0 1px 0 rgba(255, 255, 255, .65);
  cursor: pointer;
}
#rsm_btn:hover { filter: brightness(1.06); }
#rsm_btn:active { transform: translateY(1px); }

/* --- d) Antwortzeile: die Hauptaktion --- */
.rsm_inputrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .6rem;
}
.rsm_inputrow > label {
  font-size: .95rem;
  font-weight: 800;
  color: #d5e6f8;
}
#rsm_input {
  width: 9rem;
  min-height: 48px;
  padding: .4rem .6rem;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 1.45rem;
  text-align: center;
  color: #fff;
  background: var(--rsm-feld);
  border: 1.5px solid #2b4d78;
  border-radius: .8rem;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
  transition: border-color .12s, box-shadow .12s;
}
#rsm_input::placeholder { color: #6f8bab; font-size: 1rem; }
#rsm_input:focus {
  outline: none;
  border-color: #66d98f;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5), 0 0 0 3px rgba(102, 187, 106, .24);
}
#rsm_input:disabled { opacity: .5; }
@keyframes rsm_shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
#rsm_input.rsm_fehler {
  border-color: #e53935;
  box-shadow: 0 0 0 3px rgba(229, 57, 53, .28);
  animation: rsm_shake .28s;
}
#rsm_input.rsm_ok {
  border-color: #66d98f;
  box-shadow: 0 0 0 3px rgba(102, 187, 106, .32);
}

.rak_abschuss {
  min-height: 48px;
  padding: .5rem 1.25rem;
  font-size: 1rem;
  font-weight: 900;
  color: #2a1a00;
  cursor: pointer;
  background: linear-gradient(180deg, #ffe08a, var(--rsm-gold) 45%, var(--rsm-gold-tief));
  border: 1.5px solid #b97b12;
  border-radius: 999px;
  box-shadow: 0 7px 18px rgba(240, 160, 20, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: filter .12s, transform .12s, opacity .12s;
  white-space: nowrap;
}
.rak_abschuss:hover:not(:disabled) { filter: brightness(1.07); }
.rak_abschuss:active:not(:disabled) { transform: translateY(1px); }
.rak_abschuss:disabled {
  /* Vor dem Start bleibt der Knopf goldig erkennbar - nur gedaempft und ohne
     Leuchten. Graustufen liessen ihn auf dem dunklen Panel schmutzig wirken. */
  opacity: .62;
  cursor: default;
  box-shadow: none;
}

/* Tastatur-Hinweis als kleine Taste */
.rsm_enterhint {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .18rem .5rem;
  font-size: .74rem;
  font-weight: 700;
  color: #a8bed8;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(150, 190, 230, .3);
  border-radius: .4rem;
}
.rsm_minus_knopf {
  min-height: 48px;
  padding: .4rem .75rem;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  color: #d9e8fa;
  cursor: pointer;
  background: #16263f;
  border: 1.5px solid #2b456d;
  border-radius: .7rem;
}
.rsm_minus_knopf:active { transform: scale(.94); }
.rsm_minus_knopf[hidden] { display: none; }

/* ---------- 4. Fusszeile: schmale Cockpit-Leiste ---------- */
html[data-theme] body.jupi.rsm_body .rsm_footer {
  position: relative;
  max-width: 96rem;
  width: calc(100% - 2 * clamp(.5rem, 1.6vw, 1.1rem));
  margin: .45rem auto .45rem;
  padding: .5rem 1rem .55rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(17, 34, 57, .94), rgba(7, 16, 28, .97));
  border: 1px solid #1f3d61;
  border-radius: .75rem;
  box-shadow: inset 0 1px 0 rgba(130, 200, 255, .14);
  color: var(--rsm-gedaempft);
  font-size: .78rem;
}
html[data-theme] body.jupi.rsm_body .rsm_footer p { margin: 0; }
html[data-theme] body.jupi.rsm_body .rsm_footer a {
  color: #ffd06a;
  font-weight: 700;
  text-decoration: none;
}
html[data-theme] body.jupi.rsm_body .rsm_footer a:hover { text-decoration: underline; }
/* Zwei Amber-Lampen wie auf der Konsole in der Referenz */
html[data-theme] body.jupi.rsm_body .rsm_footer::before,
html[data-theme] body.jupi.rsm_body .rsm_footer::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(26px, 6vw, 74px);
  height: 5px;
  margin-top: -2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 170, 50, .1), #ffbe55);
  box-shadow: 0 0 10px rgba(255, 175, 60, .7);
}
html[data-theme] body.jupi.rsm_body .rsm_footer::before { left: 1rem; }
html[data-theme] body.jupi.rsm_body .rsm_footer::after {
  right: 1rem;
  background: linear-gradient(270deg, rgba(255, 170, 50, .1), #ffbe55);
}

/* ---------- Hilfe-Dialog (bleibt lesbar, passt zum Cockpit) ---------- */
.rak_dialog {
  width: min(46rem, calc(100% - 2rem));
  max-height: 85dvh;
  overflow: auto;
  padding: 1rem 1.2rem 1.2rem;
  color: #e8f2ff;
  background: linear-gradient(180deg, #13253f, #0a1728);
  border: 1px solid rgba(255, 196, 100, .5);
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
.rak_dialog::backdrop { background: rgba(2, 7, 14, .72); }
.rak_dialog form { display: flex; justify-content: flex-end; }
.rak_dialog h2 { margin: .5rem 0 .6rem; color: #ffd47a; font-size: 1.15rem; }
.rak_dialog .jupi_btn {
  min-height: 40px;
  padding: .4rem 1rem;
  color: #2a1a00;
  font-weight: 800;
  background: linear-gradient(180deg, #ffe08a, var(--rsm-gold) 45%, var(--rsm-gold-tief));
  border: 1.5px solid #b97b12;
  border-radius: 999px;
  cursor: pointer;
}
.rak_dialog .jupi_btn:hover { filter: brightness(1.06); }
.rak_merksaetze { padding-left: 1.2rem; }
.rak_merksaetze li { margin: .6rem 0; }
.rak_dialog strong { color: #ffe6b4; }

/* Merkwissen-Aufklapper: dunkle Karte statt Plattform-Panel */
.rsm_merkwissen {
  margin: .9rem 0 0;
  padding: .6rem .9rem;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(150, 190, 230, .35);
  border-radius: .8rem;
}
.rsm_merkwissen summary { cursor: pointer; font-weight: 700; color: #ffd47a; }
.rsm_merkwissen ul { margin: .5rem 0 .2rem; padding-left: 1.2rem; }
.rsm_merkwissen li { margin: .2rem 0; }

/* [hidden] muss auch hier gewinnen (bekannte Falle bei display:flex) */
[hidden] { display: none !important; }
/* Antipp-Flaechen: mindestens 40 px (Tablet/Handy) */
button, select, .jupi_nav_back, input[type="range"] { min-width: 40px; min-height: 40px; }

/* ---------- Handy und Tablet ---------- */
@media (max-width: 900px) {
  .rsm_vent { display: none; }
}

@media (max-width: 800px) {
  /* Leiste in zwei Zeilen: Logo/Name oben, Zurueck + Werkzeuge darunter */
  html[data-theme] body.jupi.rsm_body .rsm_header {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .4rem;
    padding: .45rem .55rem .55rem;
  }
  .rsm_brand { grid-row: 1; grid-column: 1 / -1; justify-self: center; }
  .rsm_brand img { width: 36px; height: 36px; }
  .rsm_brand h1 { font-size: 1.08rem; }
  html[data-theme] body.jupi.rsm_body .rsm_header .rsm_kopf_links { grid-row: 2; grid-column: 1; }
  html[data-theme] body.jupi.rsm_body .rsm_header .rsm_kopf_rechts { grid-row: 2; grid-column: 2; }
  html[data-theme] body.jupi.rsm_body .rsm_header .jupi_sprachen_select { max-width: 7.5rem; }
}

@media (max-width: 36rem) {
  .rsm_konsole { padding: .55rem .5rem .6rem; border-radius: .85rem; }
  .rsm_konsole::before { inset: 4px; }
  .rsm_setup { gap: .35rem .6rem; }
  .rsm_feld { gap: .35rem; width: 100%; justify-content: flex-end; }
  .rsm_feld_tempo { justify-content: flex-start; }
  #rsm_tempo_regler { width: 6.5rem; }
  .rsm_tempo_anzeige { min-width: 0; font-size: .74rem; }
  .rsm_select { flex: 1; max-width: none; min-width: 0; }
  .rsm_selectwrap { flex: 1; min-width: 0; }
  .rsm_instrumente { gap: .3rem; }
  .rsm_hud_box { gap: .3rem; padding: .35rem .3rem; border-radius: .6rem; }
  .rsm_ico { width: 17px; height: 17px; }
  .rsm_hud_box label { font-size: .5rem; letter-spacing: .02em; white-space: normal; }
  .rsm_hud_box .rsm_wert { font-size: 1rem; }
  .rak_hilfe, .rsm_ton { width: 40px; height: 40px; font-size: .95rem; }
  /* Aufgabe ueber die Zeit-Leiste, beides volle Breite. WICHTIG: .rsm_timewrap
     braucht hier ein neues flex - im Desktop-Layout ist es ein Kind neben der
     Aufgabe (flex:1) und wuerde als Spalte 12rem HOEHE fressen. */
  .rsm_mitte { flex-direction: column; align-items: stretch; gap: .35rem; }
  .rsm_question { font-size: 1.25rem; text-align: center; white-space: normal; }
  .rsm_timewrap { flex: 0 0 auto; min-width: 0; }
  .rsm_bild {
    width: min(100%, calc(max(90px, min(32dvh, calc(100dvh - 480px))) * 1.77777778));
  }
  .rsm_canvaswrap { padding: .3rem; border-radius: .75rem; }
  .rsm_overlay { gap: .35rem; padding: .6rem; }
  .rsm_inputrow { gap: .4rem; }
  .rsm_inputrow > label { font-size: .85rem; }
  #rsm_input { width: 6.2rem; font-size: 1.2rem; }
  .rsm_enterhint { display: none; }
  .rsm_best_zeile { font-size: .74rem; }
  html[data-theme] body.jupi.rsm_body .rsm_footer { font-size: .72rem; }
  html[data-theme] body.jupi.rsm_body .rsm_footer::before,
  html[data-theme] body.jupi.rsm_body .rsm_footer::after { width: 22px; }
}

@media (max-width: 360px) {
  /* Drei Zeilen: Logo, Zurueck, Werkzeuge - jede fuer sich zentriert.
     Bewusst kompakt: die Pruefung erlaubt hoechstens 150 px, und mit
     grossen Systemschriften ist der Platz schnell weg. */
  html[data-theme] body.jupi.rsm_body .rsm_header {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .28rem;
    padding: .34rem .45rem .42rem;
  }
  html[data-theme] body.jupi.rsm_body .rsm_header .rsm_kopf_links {
    grid-row: 2; grid-column: 1; justify-self: center;
  }
  html[data-theme] body.jupi.rsm_body .rsm_header .rsm_kopf_rechts {
    grid-row: 3; grid-column: 1; justify-self: center;
  }
  .rsm_brand img { width: 32px; height: 32px; }
  .rsm_brand h1 { font-size: .98rem; }
  .rsm_header .jupi_nav_back { min-height: 40px; padding: .35rem .8rem; font-size: .84rem; }
  .rsm_konsole { border-radius: .7rem; }
  .rsm_hud_box label { font-size: .46rem; }
  /* 320 px: Symbole kosten mehr Platz, als die Kachel hat - dann tragen
     Beschriftung und Zahl die Kachel allein, und die Schilde werden kleiner. */
  .rsm_ico { display: none; }
  .rsm_hud_box { justify-content: center; padding: .32rem .2rem; }
  .rsm_schild svg { width: .82em; height: .82em; }
}

/* ---------- Sehr breite Fenster: Cockpit-Pfeiler links und rechts ----------
   Ab 100rem ist neben der Konsole Platz. Dann bekommt die Seite die zwei
   Seitenwaende aus der Referenz (Stahl, Cyan-Kante, drei Amber-Lampen) und
   Leiste/Konsole/Fusszeile ruecken dazwischen. Auf Laptops und Tablets bleibt
   die volle Breite erhalten - dort waeren die Pfeiler nur eng. */
@media (min-width: 100rem) {
  html[data-theme] body.jupi.rsm_body { --rsm-pfeiler: 54px; }
  html[data-theme] body.jupi.rsm_body .jupi_container { padding-inline: 56px; }
  /* Die Leiste bleibt VOLL Breit (sie liegt oben auf den Waenden, der Titel
     bleibt in der Fenstermitte) - nur Konsole und Fusszeile ruecken zwischen
     die Pfeiler. */
  html[data-theme] body.jupi.rsm_body .rsm_header {
    margin-inline: -56px;
    padding-inline: calc(56px + clamp(.6rem, 1.8vw, 1.4rem));
  }
  html[data-theme] body.jupi.rsm_body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      /* Amber-Lampen in der linken Wand */
      linear-gradient(90deg, #ffbe55, #ffbe55) 16px 22% / 20px 5px no-repeat,
      linear-gradient(90deg, #ffbe55, #ffbe55) 16px 50% / 26px 5px no-repeat,
      linear-gradient(90deg, #ffbe55, #ffbe55) 16px 78% / 20px 5px no-repeat,
      /* Amber-Lampen in der rechten Wand */
      linear-gradient(270deg, #ffbe55, #ffbe55) calc(100% - 16px) 22% / 20px 5px no-repeat,
      linear-gradient(270deg, #ffbe55, #ffbe55) calc(100% - 16px) 50% / 26px 5px no-repeat,
      linear-gradient(270deg, #ffbe55, #ffbe55) calc(100% - 16px) 78% / 20px 5px no-repeat,
      /* Fensterschlitz: dunkles Glas mit Rand, laesst die Wand nicht flach wirken */
      linear-gradient(180deg, #0b1d33, #050e1a) 20px 32% / 18px 160px no-repeat,
      linear-gradient(180deg, #0b1d33, #050e1a) calc(100% - 38px) 44% / 18px 190px no-repeat,
      /* Fugen der Wandplatten */
      repeating-linear-gradient(180deg, rgba(0, 0, 0, .45) 0 1px, transparent 1px 118px),
      /* linke Wand: Stahl mit Bevel und Cyan-Innenkante */
      linear-gradient(90deg, #22344f 0%, #17273e 14%, #0e1a2c 52%, #0b1524 78%, #2d5c8a 95%, #4fd0ff 100%) left top / 54px 100% no-repeat,
      /* rechte Wand gespiegelt */
      linear-gradient(270deg, #22344f 0%, #17273e 14%, #0e1a2c 52%, #0b1524 78%, #2d5c8a 95%, #4fd0ff 100%) right top / 54px 100% no-repeat;
  }
}

/* ---------- Wer keine Bewegung moechte, bekommt keine ---------- */
@media (prefers-reduced-motion: reduce) {
  #rsm_score.pop, #rsm_level.pop, #rsm_lives.verlust { animation: none; }
  #rsm_input.rsm_fehler { animation: none; }
  .rsm_timefill { transition: none; }
  .rsm_header .jupi_nav_back, .rak_abschuss, .rsm_ton, .rak_hilfe { transition: none; }
}