/* raetselrakete/styles.css - Styles fuer Raetselrakete (jupi) */

/* ══ 0. Themen-Welt: Raketen-Weltraum ═══════════════════════════════════
   Der Seitenrand um das Spiel traegt den Stil des Spiels: ein Sternen-
   himmel mit Startplatz-Gluehen, statt der gruenen Plattform-Karte.
   Vorbild sind Neumark 1400, Schatzkarte und Numbergeddon - alle stylen
   ihre Leiste UND den Seitenrand in der Welt des Spiels. Alle Regeln sind
   an body.jupi.rr_body gekettet: das schlaegt die html[data-theme]-Regeln
   aus jupi.css in BEIDEN Themes. Die Farben kommen aus dem Logo (logo.svg):
   Nachtblau #0b1426/#14304a, Treibstoff-Gold #FDD835, Lichtblau #4fc3f7. */

/* Kachelbarer Sternenhimmel (generiert durch .zcode/raetselrakete-himmel.cjs)
   plus weiche Lichter: blauer Hoehenglanz oben, goldener Startplatz-Schein
   unten. Kein Kacheln des Verlaufs - der waere sonst unter dem Seitenrumpf
   ein zweites Mal sichtbar (Streifen unter dem Fuss). */
body.jupi.rr_body {
  color: #e3f2fd;
  min-height: 100vh;
  background-repeat: no-repeat;
  background:
    radial-gradient(1100px 560px at 8% -10%, rgba(79, 195, 247, 0.20) 0%, transparent 58%),
    radial-gradient(900px 480px at 96% -4%, rgba(79, 195, 247, 0.12) 0%, transparent 56%),
    radial-gradient(1400px 520px at 50% 112%, rgba(253, 216, 53, 0.10) 0%, transparent 60%),
    url("himmel.svg") repeat,
    #101d33;
}
/* Dunkler Modus: der Himmel sinkt in die tiefe Nacht. Weil der Sternen-
   himmel eine deckende Flaeche ist, liegt darueber eine durchsichtige
   Nacht-Schicht, die Sterne und Nebel wirklich abdunkelt. */
html[data-theme="dark"] body.jupi.rr_body {
  background:
    linear-gradient(rgba(4, 9, 18, 0.52), rgba(4, 9, 18, 0.52)),
    radial-gradient(1100px 560px at 8% -10%, rgba(79, 195, 247, 0.14) 0%, transparent 58%),
    radial-gradient(900px 480px at 96% -4%, rgba(79, 195, 247, 0.08) 0%, transparent 56%),
    radial-gradient(1400px 520px at 50% 112%, rgba(253, 216, 53, 0.07) 0%, transparent 60%),
    url("himmel.svg") repeat,
    #070f1d;
}
/* Die weisse Plattform-Karte darf den Seitenrand nicht mehr zudecken. */
body.jupi.rr_body .jupi_container > .jupi_main { background: transparent; }
/* Die Plattform-Rasterzeilen dehnen sich sonst auf die ganze Fensterhoehe -
   auf dem Handy entsteht ein leeres Band UEBER der Kopfzeile (Muster
   Numbergeddon: align-content start). Der Unterschied zum Arcade-Spiel:
   bei diesem kleinen Lernspiel soll der Fuss unten KLEBEN wie auf der
   Plattform - darum waechst stattdessen die Hauptzeile (1fr), die den
   Platzueberfluss schluckt. Kopfzeile bleibt oben schlank, Fuss unten.
   Zusatz zum Theme: die Plattform-CSS reserviert 3rem UNTER dem Container
   (min-height: calc(100vh - 3rem)) - auf der hellen Plattform unsichtbar,
   hier liegt darunter Sternenhimmel. Der Weltraum-Rahmen fuellt die ganze
   Fensterhoehe, damit der Fuss wirklich am Boden endet. */
body.jupi.rr_body .jupi_container {
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.jupi.rr_body .jupi_container { min-height: 100dvh; }
}

/* ---------- 3-Zonen JUPI-Leiste als Raketen-Konsole (Typ 2, 3.13.2) ----------
   Links "Alle Spiele", mittig Logo + Titel, rechts Sprache + Dark-Pill.
   Die Aufteilung bleibt die Plattform-Vorgabe, die Optik ist die des Spiels:
   eine Konsole aus Nachtblau mit Gold-Kante (Startrampe) und Sternenlicht. */
body.jupi.rr_body .rr_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.6rem;
  color: #e3f2fd;
  background:
    radial-gradient(560px 130px at 50% -40%, rgba(253, 216, 53, 0.14) 0%, transparent 70%),
    linear-gradient(135deg, #0b1426 0%, #14304a 55%, #1c3a5e 100%);
  border: 1px solid rgba(79, 195, 247, 0.30);
  border-bottom: 2px solid #FDD835;
  border-radius: 1rem;
  box-shadow: 0 6px 24px rgba(4, 9, 18, 0.55), inset 0 1px 0 rgba(224, 242, 254, 0.14);
}
html[data-theme="dark"] body.jupi.rr_body .rr_header {
  background:
    radial-gradient(560px 130px at 50% -40%, rgba(253, 216, 53, 0.10) 0%, transparent 70%),
    linear-gradient(135deg, #060d1a 0%, #0e2036 55%, #14304a 100%);
}

/* Zurueck-Pille: Lichtblau-Knopf mit Sternenschein statt weisser Pille. */
body.jupi.rr_body .rr_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;            /* Bedienziel 3.13.5 */
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  line-height: 1.2;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  color: #e3f2fd;
  background: rgba(79, 195, 247, 0.14);
  border: 1px solid rgba(79, 195, 247, 0.45);
  box-shadow: 0 0 14px rgba(79, 195, 247, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: background 0.16s, color 0.16s, transform 0.16s;
}
body.jupi.rr_body .rr_header .jupi_nav_back:hover {
  background: rgba(79, 195, 247, 0.28);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Marke: Logo mit Gold-Ring (Rakete), Titel mit Sternen-Glanz. */
body.jupi.rr_body .rr_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 0.55rem;
  min-width: 0;
}
body.jupi.rr_body .rr_brand img {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(253, 216, 53, 0.55), 0 0 14px rgba(253, 216, 53, 0.30);
}
body.jupi.rr_body .rr_brand h1 {
  margin: 0;
  color: #ffffff;
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(79, 195, 247, 0.50), 0 0 34px rgba(253, 216, 53, 0.25);
}

body.jupi.rr_body .rr_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
/* Sprachwahl als Lichtblau-Pille (nicht mehr weiss auf Gruen). */
body.jupi.rr_body .rr_header .jupi_sprachen_select {
  min-height: 40px;
  color: #e3f2fd;
  background: rgba(79, 195, 247, 0.12);
  border: 1px solid rgba(79, 195, 247, 0.45);
  font-weight: 700;
}
body.jupi.rr_body .rr_header .jupi_sprachen_select:hover { background: rgba(79, 195, 247, 0.26); }
body.jupi.rr_body .rr_header .jupi_sprachen_select option,
body.jupi.rr_body .rr_header .jupi_sprachen_select optgroup {
  color: #0b1426;
  background: #ffffff;
}
/* Dark-Mode-Pill: ebenfalls Lichtblau statt Plattform-Orange. */
body.jupi.rr_body .rr_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  min-height: 40px;
  padding: 0;
  background: rgba(79, 195, 247, 0.14);
  border-color: rgba(79, 195, 247, 0.45);
}
body.jupi.rr_body .rr_header .jupi_theme_switch:hover { background: rgba(79, 195, 247, 0.26); }
body.jupi.rr_body .rr_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
html[data-theme="dark"] body.jupi.rr_body .rr_header .jts_thumb { left: calc(100% - 36px); }
body.jupi.rr_body .rr_header .jts_sun { left: 9px; }
body.jupi.rr_body .rr_header .jts_moon { right: 9px; }

/* Fuss: schmale Nachtblau-Zeile mit Gold-Kante - die Startrampe endet hier. */
body.jupi.rr_body .jupi_container > .jupi_footer {
  color: #9fc2dd;
  background: rgba(11, 20, 38, 0.85);
  border-top: 2px solid rgba(253, 216, 53, 0.55);
  box-shadow: 0 -6px 24px rgba(4, 9, 18, 0.35);
}
body.jupi.rr_body .jupi_container > .jupi_footer a {
  color: #4fc3f7;
  font-weight: 700;
}

/* ---------- Steuerleiste (oben rechts im Spielbereich, Regel 3.13.3) ----------
   Dunkle Glaskonsole im Weltraum-Look: Sie grenzt direkt an das immer
   dunkle Spielfeld, darum bleibt sie in BEIDEN Themes nachtblau - der
   Theme-Schalter hellt nur den Seitenhimmel auf, nicht die Konsole. */
.rr_controls {
  background: rgba(11, 20, 38, 0.78);
  border: 1px solid rgba(79, 195, 247, 0.32);
  border-top: 2px solid rgba(253, 216, 53, 0.45);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(4, 9, 18, 0.35), inset 0 1px 0 rgba(224, 242, 254, 0.10);
  padding: 0.75rem 1rem;
  margin-bottom: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
  color: #cfe1f5;
}
.rr_topicwrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.rr_topicwrap label {
  font-weight: 700;
  color: #9fc2dd;
  font-size: 0.88rem;
}
.rr_topicwrap select {
  min-height: 40px;
  padding: 0.35rem 0.6rem;
  border-radius: 0.6rem;
  border: 1.5px solid rgba(79, 195, 247, 0.45);
  background: #12253d;
  color: #e3f2fd;
  font-size: 0.92rem;
  font-weight: 700;
}
.rr_topicwrap select:focus {
  outline: none;
  border-color: #4fc3f7;
  box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.22);
}
.rr_topicwrap select option,
.rr_topicwrap select optgroup {
  color: #0b1426;
  background: #ffffff;
}
.rr_stat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #9fc2dd;
}
.rr_stat span {
  font-size: 1.15rem;
  font-weight: 800;
  color: #FDD835;
  text-shadow: 0 0 10px rgba(253, 216, 53, 0.40);
}
.rr_buttons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Die Plattform-Knoepfe (.jupi_btn jupi_btn_alt) werden hier zu
   Treibstoff-Pillen: Gold-Strich, Lichtblau-Schein, dunkle Fuellung. */
body.jupi.rr_body .rr_controls .jupi_btn.jupi_btn_alt {
  background: rgba(79, 195, 247, 0.14);
  border: 1px solid rgba(79, 195, 247, 0.45);
  color: #e3f2fd;
  box-shadow: 0 0 12px rgba(79, 195, 247, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
body.jupi.rr_body .rr_controls .jupi_btn.jupi_btn_alt:hover {
  background: rgba(79, 195, 247, 0.28);
  color: #ffffff;
}
#rr_new {
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  font-weight: 700;
  border-radius: 0.6rem;
}
#rr_hilfe_btn, #rr_ton_knopf {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border-radius: 0.6rem;
}

/* ---------- Haupt-Spielfeld (rr_stage) ---------- */
.rr_stage {
  position: relative;
  overflow: hidden;
  background: radial-gradient(800px 400px at 50% 0%, #1a2a4a 0%, #0b1426 60%), linear-gradient(180deg, #08101f, #10203a);
  border-radius: 1.1rem;
  padding: 1.2rem 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
  color: #e3f2fd;
  border: 1px solid #1b2f4d;
  border-top: 2px solid rgba(253, 216, 53, 0.45);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
@media (min-width: 48rem) {
  .rr_stage { padding: 1.4rem 1.5rem 1.6rem; }
}

/* Treibstoff-Sterne */
.rr_stars {
  display: flex;
  gap: 0.4rem;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  line-height: 1;
}
.rr_star {
  color: #2c3e5c;
  transition: color 0.2s, transform 0.2s;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}
.rr_star.on {
  color: var(--yellow600-color);
  text-shadow: 0 0 14px rgba(253,216,53,0.55);
}

/* Rakete */
.rr_rocketwrap {
  position: relative;
  height: 96px;
  width: 72px;
}
@media (min-width: 48rem) {
  .rr_rocketwrap { height: 120px; width: 90px; }
}
#rr_rocket {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: transform 1.2s ease-in, opacity 1.2s ease-in;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}
.rr_rocketwrap.launch #rr_rocket {
  transform: translateY(-420px);
  opacity: 0;
}
.rr_rocketwrap.crash #rr_rocket {
  transform: rotate(32deg) scale(0.9);
}

/* Wort-Slots */
.rr_word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  font-family: "JetBrains Mono", Consolas, monospace;
}
.rr_slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.75rem, 7vw, 2.3rem);
  height: clamp(2.3rem, 9vw, 2.9rem);
  background: #1c2c47;
  border: 1.5px solid #2c3e5c;
  border-radius: 0.5rem;
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  font-weight: 800;
  color: #cfe1f5;
  transition: all 0.2s;
}
.rr_slot.good {
  border-color: var(--green400-color);
  background: #14304a;
  color: #b2ffb8;
  text-shadow: 0 0 8px rgba(76,175,80,0.4);
}

/* Feedback-Meldung */
.rr_msg {
  min-height: 1.5rem;
  font-size: 0.98rem;
  font-weight: 600;
  text-align: center;
  color: #cfe1f5;
  padding: 0 0.5rem;
}

/* Bildschirm-Tastatur */
.rr_keys {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}
.rr_keyrow {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: center;
}
.rr_key {
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.2rem;
  background: #23344f;
  border: 1.5px solid #34506f;
  border-radius: 0.5rem;
  color: #e3f2fd;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.14s;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rr_key:hover:not(:disabled) {
  background: #2f4568;
  border-color: #4b6a94;
}
.rr_key:active:not(:disabled) {
  transform: scale(0.94);
}
.rr_key:focus-visible {
  outline: 3px solid var(--link-color);
  outline-offset: 2px;
}
.rr_key.good {
  background: var(--green600-color);
  border-color: var(--green400-color);
  color: #ffffff;
  cursor: default;
}
.rr_key.bad {
  background: #5c1f1f;
  border-color: #8b3a3a;
  color: #ffb3b3;
  cursor: default;
  opacity: 0.65;
}

/* Rundenabschluss-Overlay im Spielfeld */
.rr_overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,16,31,0.92);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  color: #ffffff;
  padding: 1.5rem;
  z-index: 20;
}
.rr_overlay.hidden {
  display: none;
}
.rr_overlay h3 {
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  margin: 0;
  color: #ffffff;
}
.rr_overlay_text {
  max-width: 32rem;
  margin: 0;
  color: #cfe1f5;
  font-size: 1rem;
  line-height: 1.4;
}
#rr_btn {
  margin-top: 0.5rem;
  min-height: 44px;
  font-size: 1.05rem;
  padding: 0.5rem 1.2rem;
}

/* ---------- ❓-Hilfe-Modal (Regel 3.13.4) ---------- */
.rr_modal_backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.rr_modal_backdrop[hidden] {
  display: none;
}
.rr_modal {
  background: var(--ct-color);
  border-radius: 1.1rem;
  border: 1px solid var(--bd-color);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
  max-width: 36rem;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rr_pop 0.2s ease-out;
}
@keyframes rr_pop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.rr_modal_kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--bd-color);
}
.rr_modal_kopf h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--blk-color);
}
.rr_modal_x {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--grey600-color);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}
.rr_modal_x:hover {
  background: var(--grey100-color);
  color: var(--blk-color);
}
.rr_modal_body {
  padding: 1.15rem 1.25rem;
  overflow-y: auto;
  color: var(--blk-color);
  line-height: 1.5;
}
.rr_modal_body h3 {
  margin: 0.8rem 0 0.4rem;
  font-size: 1.05rem;
  color: var(--green600-color);
}
.rr_modal_body h3:first-child {
  margin-top: 0;
}
.rr_modal_body ul {
  margin: 0.3rem 0 0.8rem;
  padding-left: 1.3rem;
}
.rr_modal_body li {
  margin: 0.35rem 0;
}
.rr_lernziel {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: var(--grey50-color);
  border-left: 4px solid var(--green600-color);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.rr_modal_fuss {
  display: flex;
  justify-content: flex-end;
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--bd-color);
  background: var(--grey50-color);
}

/* Mobile Optimierungen (Handy 390 px) */
@media (max-width: 390px) {
  .rr_controls {
    padding: 0.6rem 0.75rem;
  }
  .rr_key {
    min-width: 2.35rem;
    min-height: 2.35rem;
    font-size: 0.9rem;
  }
  .rr_keyrow {
    gap: 0.2rem;
  }
}

/* Handy: die Sprachwahl darf nicht alles Platz nehmen, sonst bricht der
   Zurueck-Knopf um ("Alle / Spiele"). Muster Schatzkarte/Numbergeddon. */
@media (max-width: 600px) {
  body.jupi.rr_body .rr_header .jupi_nav_back { white-space: nowrap; }
  body.jupi.rr_body .rr_header .jupi_sprachen_select { max-width: 8rem; }
}

/* Sehr schmale Leisten: drei Zonen passen nicht mehr nebeneinander,
   die Kopfzeile bricht um (Marke in die obere Zeile). */
@media (max-width: 430px) {
  body.jupi.rr_body .rr_header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
    padding: 0.45rem 0.5rem;
  }
  body.jupi.rr_body .rr_brand { grid-row: 1; grid-column: 1 / -1; }
  body.jupi.rr_body .rr_brand img { width: 36px; height: 36px; }
  body.jupi.rr_body .rr_brand h1 { font-size: 1.1rem; }
  body.jupi.rr_body .rr_header .jupi_nav_back { grid-row: 2; grid-column: 1; font-size: 0.85rem; }
  body.jupi.rr_body .rr_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
}

/* Dark Mode: Die Themen-Flaechen (Leiste, Steuerleiste, Fuss, Spielfeld)
   sind bewusst in BEIDEN Themes dunkel - ein Startplatz liegt im Weltraum.
   Der Dark-Schalter hellt nur den Seitenhimmel ab. Nur die Plattform-
   Flaechen (Hilfe-Modal) folgen weiterhin dem Theme. */
html[data-theme="dark"] .rr_modal {
  background: var(--ct-color);
  border-color: var(--bd-color);
}
html[data-theme="dark"] .rr_modal_fuss {
  background: var(--alt-div-color);
}
html[data-theme="dark"] .rr_lernziel {
  background: var(--alt-div-color);
}