/* ===== Zauberschleuder - Styles (eigenständiges PWA-Paket, GUI 3.13 Typ 2) =====
   Die Plattform-Basis (Farben, Container, Grundknöpfe, Theme) kommt aus den
   Paket-Kopien colors.css + jupi.css. Hier stehen nur die Spiel-Regeln.

   WELT: "Sternenwarte" (Stil-Pass 07.11.2026, AGENTS.md 3.13.6/3.13.7).
   Im Spiel schleudert das Kind nachts magische Geschosse auf Türme und befreit
   Glühwesen. Der Ort hinter der Bühne ist die Kammer, in der eine Zauberin ihre
   Würfe vorbereitet: Regal mit Zaubergläsern (links), Spitzbogenfenster mit Mond
   und Fernrohr (rechts), großer Tisch mit aufgeschlagenem Zauberbuch (unten).
   Die Leiste ist die Messing-Konsole der Warte, die Bühne eine Sternenkarte im
   Messingrahmen, Karten und Hilfe sind Pergament (bleiben in beiden Themes hell),
   HUD und Arsenal sind dunkles Geräteglas mit Messingkante.
   Dark Mode = dieselbe Warte bei Nacht (kühler, dunkler), Light = Abenddämmerung
   mit warmem Kerzenlicht. Kulisse: kulisse.svg (Generator
   .zcode/zauberschleuder-kulisse.cjs), EINE gestreckte Szene, cover/no-repeat.

   Aufbau: 1 Palette - 2 Seite/Leisten-Lage - 3 JUPI-Leiste - 4 Bühne -
   5 HUD/Arsenal - 6 Overlays/Levelkarte - 7 Hilfe - 8 Fuß - 9 Dark -
   10 Handy/Vollbild - 11 Fokus & 40 px. */

/* ---------- 1. Farben der Welt ---------- */
:root {
  --zs-nacht: #0b0920;
  --zs-nacht-2: #171232;
  --zs-nacht-3: #241b44;
  --zs-nacht-4: #2f2452;
  --zs-violett: #6c56b3;
  --zs-violett-hell: #b9a6f0;
  --zs-messing: #c9a24a;
  --zs-messing-hell: #f2d995;
  --zs-messing-tief: #8a6a24;
  --zs-papier: #f6ecd2;
  --zs-papier-2: #e7d7b2;
  --zs-papier-kante: #b49b6d;
  --zs-tinte: #33281b;
  --zs-tinte-2: #5d4c38;
  --zs-teal: #6fe6d4;
  --zs-kerze: #ffc873;
  --zs-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --zs-schatten: 0 16px 40px rgba(0, 0, 0, .55);
}

/* ---------- 2. Seite und Leisten-Lage (Regel 3.13.2a) ----------
   body = feste Szene; Container als Flex-Spalte: Kopf bündig oben, main
   wächst, Fuß am Dokumentende. body braucht overflow-x:visible, sonst wird
   es durch die Plattform-Regel zum Scroll-Container und die sticky Leiste
   scrollt mit weg (Lehre Maschinenbauer). */
body.jupi.zs_body {
  background-color: #0b0920;
  background-image:
    linear-gradient(180deg, rgba(255, 196, 130, .07) 0%, rgba(255, 176, 96, .015) 42%, rgba(255, 176, 96, .07) 100%),
    url("kulisse.svg");
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  /* Mitte statt Oberkante: Auf hohen Fenstern (1920x1080) muss der Tisch mit
     dem Zauberbuch unter der Bühne sichtbar bleiben, nicht der leere Wandstreifen. */
  background-position: center center, center center;
  background-attachment: fixed, fixed;
  color: #f3e8cf;
  overflow-x: visible;
}

body.jupi.zs_body .jupi_container {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  max-width: none;
  background: transparent;
}
body.jupi.zs_body .jupi_container > .jupi_main,
html[data-theme="dark"] body.jupi.zs_body .jupi_container > .jupi_main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: .75rem 1.1rem 1rem;
  background: transparent;
  color: #f3e8cf;
}
@media (min-width: 64rem) {
  body.jupi.zs_body .jupi_container > .jupi_main { padding: .9rem 1.4rem 1.2rem; }
}

/* Der Spielfeldbereich ist der letzte Baustein im main (Regel 3.13.4):
   kein weißer Kasten, keine Info-Box darunter. */
body.jupi.zs_body .zs_panel {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- 3. Kopfzeile: Messing-Konsole der Sternenwarte (3.13.2) ----------
   Drei Zonen: links zurück, mittig Logo + Name, rechts Sprache + Theme.
   Kein Schul-/jupi-Logo, keine zweite Titelzeile. */
body.jupi.zs_body .zs_leiste {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .8rem;
  padding: .5rem 1.1rem .55rem;
  background-color: #120e26;
  background-image:
    radial-gradient(ellipse at 50% -40%, rgba(160, 126, 240, .42) 0%, rgba(108, 86, 179, .12) 42%, transparent 70%),
    linear-gradient(180deg, #281e4b 0%, #181231 48%, #0e0a1d 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  border-bottom: 3px solid var(--zs-messing-tief);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 6px 22px rgba(0, 0, 0, .55);
}
body.jupi.zs_body .zs_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .55rem;
  min-width: 0;
  padding: .12rem .8rem .12rem .16rem;
  border: 1px solid rgba(201, 162, 75, .42);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(38, 29, 72, .7), rgba(16, 12, 32, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
body.jupi.zs_body .zs_brand img {
  display: block;
  flex: none;
  width: 38px;
  height: 38px;
  object-fit: cover;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--zs-messing);
  background: #0d0a1c;
  box-shadow: 0 0 12px rgba(255, 214, 110, .35), 0 0 0 2px #120e24;
}
body.jupi.zs_body .zs_brand h1 {
  margin: 0;
  font-family: var(--zs-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .035em;
  color: #f8edcf;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 0 16px rgba(255, 214, 110, .22);
}
body.jupi.zs_body .zs_leiste .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: .45rem;
  padding: .4rem .8rem;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--zs-messing-hell);
  background: linear-gradient(180deg, rgba(41, 31, 74, .94), rgba(17, 13, 33, .94));
  border: 1px solid rgba(201, 162, 75, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .35);
}
body.jupi.zs_body .zs_leiste .jupi_nav_back:hover {
  color: #2a1f0c;
  background: linear-gradient(180deg, #f4dfa3 0%, #cfaa58 55%, #a9832f 100%);
  border-color: #7a5a18;
  transform: none;
}
body.jupi.zs_body .zs_leiste .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .4rem;
}
body.jupi.zs_body .zs_leiste #jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
body.jupi.zs_body .zs_leiste .jupi_sprachen_select {
  max-width: 11rem;
  min-height: 40px;
  padding: .25rem .5rem;
  font-size: .82rem;
  font-weight: 700;
  color: #f3e8cf;
  background: rgba(12, 9, 24, .72);
  border: 1px solid rgba(201, 162, 75, .55);
  border-radius: .4rem;
}
body.jupi.zs_body .zs_leiste .jupi_sprachen_select option { color: #f3e8cf; background: #171232; }
body.jupi.zs_body .zs_leiste .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  padding: 0;
  background: #0c0918;
  border: 1.5px solid var(--zs-messing-tief);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}
body.jupi.zs_body .zs_leiste .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe9b4 0%, #c8a24a 55%, #8a6a24 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] body.jupi.zs_body .zs_leiste .jts_thumb {
  left: calc(100% - 36px);
  background: radial-gradient(circle at 34% 30%, #e8eef3 0%, #aab7c2 55%, #6d7a86 100%);
}
body.jupi.zs_body .zs_leiste .jts_sun { left: 9px; }
body.jupi.zs_body .zs_leiste .jts_moon { right: 9px; }

/* ---------- 4. Bühne: Sternenkarte im Messingrahmen ---------- */
body.jupi.zs_body .zs_buehne {
  position: relative;
  overflow: hidden;
  padding: 8px 8px 0;
  border-radius: 16px;
  font-size: clamp(11px, 1.35vw, 15px);
  background-color: #120e24;
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(139, 110, 220, .3) 0%, transparent 62%),
    linear-gradient(160deg, #2a2147 0%, #171232 58%, #0e0b1d 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  border: 1px solid #6f5726;
  box-shadow:
    0 0 0 2px #100c20,
    0 0 0 5px #a9832f,
    0 0 0 6px #392b13,
    0 18px 48px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .1);
}
body.jupi.zs_body .zs_spielfeld {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 9px;
  background: #070512;
  box-shadow:
    inset 0 0 0 1px rgba(242, 217, 149, .22),
    inset 0 0 70px rgba(0, 0, 0, .55);
}
#zs_canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  touch-action: none;
}

/* Hinweiszeile unter dem Spielfeld, aber IN der Bühne (bleibt im Vollbild).
   Messingleiste mit zwei feinen Goldlinien - verdeckt kein Spielfeld. */
body.jupi.zs_body .zs_hinweis {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: 40px;
  margin: 0;
  padding: .45em 1.1em;
  text-align: center;
  font-size: .92em;
  font-weight: 700;
  line-height: 1.35;
  color: #f0d58f;
  background: linear-gradient(180deg, #1c1535 0%, #0f0b1e 100%);
  border-top: 1px solid rgba(201, 162, 75, .38);
  border-radius: 0 0 9px 9px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
body.jupi.zs_body .zs_hinweis::before,
body.jupi.zs_body .zs_hinweis::after {
  content: "";
  flex: none;
  width: 1.7em;
  height: 1px;
  margin: 0 .65em;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 75, .85));
}
body.jupi.zs_body .zs_hinweis::after { transform: scaleX(-1); }

/* ---------- 5. HUD: Geräteglas mit Messingkante (Typ 2) ----------
   Levelwahl links, Sterne + Hilfe + Ton + Vollbild rechts oben;
   Arsenal links, Wind + Neustart rechts unten. Alles über dem Feld,
   damit die Bedienung im Vollbild erhalten bleibt. */
body.jupi.zs_body .zs_hud {
  position: absolute;
  left: .7em;
  right: .7em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .55em;
  pointer-events: none;
  z-index: 3;
}
body.jupi.zs_body .zs_hud > * { pointer-events: auto; }
body.jupi.zs_body .zs_hud_oben { top: .65em; }
body.jupi.zs_body .zs_hud_unten { bottom: .65em; flex-wrap: wrap; }
body.jupi.zs_body .zs_hud_gruppe { display: flex; align-items: center; gap: .45em; }

body.jupi.zs_body .zs_levelwahl,
body.jupi.zs_body .zs_iconbtn,
body.jupi.zs_body .zs_wind,
body.jupi.zs_body .zs_sterne_kopf {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: 40px;
  background-color: rgba(15, 11, 30, .9);
  background-image: linear-gradient(180deg, rgba(46, 35, 78, .92) 0%, rgba(15, 12, 30, .94) 58%, rgba(10, 8, 20, .96) 100%);
  color: #f3e7c3;
  border: 1px solid rgba(201, 162, 75, .6);
  border-radius: .5em;
  padding: .35em .7em;
  font-weight: 700;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(3px);
}
body.jupi.zs_body .zs_levelwahl { padding-left: .55em; }
body.jupi.zs_body .zs_mapicon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: var(--zs-messing-hell);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.4 7.2L22 12l-7.6 3.8L12 23l-2.4-7.2L2 12l7.6-3.8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.4 7.2L22 12l-7.6 3.8L12 23l-2.4-7.2L2 12l7.6-3.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.jupi.zs_body .zs_levelwahl select {
  min-width: 0;
  max-width: 13em;
  min-height: 32px;
  padding: .1em 1.35em .1em .1em;
  font: inherit;
  font-size: .92em;
  font-weight: 700;
  color: #f6e9c8;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e8c97a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .15em center;
  background-size: .7em auto;
  cursor: pointer;
  text-overflow: ellipsis;
}
body.jupi.zs_body .zs_levelwahl select option { color: #f3e8cf; background: #171232; }

body.jupi.zs_body .zs_iconbtn {
  justify-content: center;
  min-width: 40px;
  width: auto;
  padding: .2em .35em;
  font-size: 1.15em;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
body.jupi.zs_body .zs_iconbtn:hover {
  border-color: var(--zs-messing-hell);
  box-shadow: 0 0 14px rgba(255, 214, 110, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body.jupi.zs_body .zs_iconbtn:active { transform: translateY(1px); }

body.jupi.zs_body .zs_sterne_kopf {
  color: #ffd66e;
  font-size: 1.12em;
  letter-spacing: .12em;
  text-shadow: 0 0 10px rgba(255, 214, 110, .45);
  padding: .2em .6em;
}

body.jupi.zs_body .zs_wind {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: .94em;
}

/* Arsenal: eine Messing-Fassung je Geschoss, aktive Munition leuchtet */
body.jupi.zs_body .zs_arsenal { display: flex; flex-wrap: wrap; gap: .4em; max-width: 72%; }
body.jupi.zs_body .zs_arsenal button {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  min-height: 40px;
  padding: .28em .6em;
  font-weight: 700;
  font-size: .96em;
  color: #f3e7c3;
  background-color: rgba(15, 11, 30, .9);
  background-image: linear-gradient(180deg, rgba(48, 36, 82, .92) 0%, rgba(17, 13, 33, .94) 60%, rgba(9, 7, 18, .96) 100%);
  border: 1px solid rgba(201, 162, 75, .55);
  border-radius: .5em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .4);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
body.jupi.zs_body .zs_arsenal button:hover { transform: translateY(-1px); border-color: var(--zs-messing-hell); }
body.jupi.zs_body .zs_arsenal button[hidden] { display: none; }  /* [hidden] vs inline-flex */
body.jupi.zs_body .zs_arsenal .zs_gicon {
  width: 1.55em;
  height: 1.55em;
  vertical-align: -.2em;
  filter: drop-shadow(0 0 5px rgba(255, 214, 110, .3));
}
body.jupi.zs_body .zs_arsenal button.is_aktiv {
  border-color: #ffd66e;
  background-image: linear-gradient(180deg, rgba(76, 58, 118, .96) 0%, rgba(32, 24, 58, .96) 62%, rgba(15, 11, 30, .98) 100%);
  box-shadow:
    0 0 0 1px #ffd66e,
    0 0 16px rgba(255, 214, 110, .55),
    inset 0 0 14px rgba(255, 214, 110, .14);
}
body.jupi.zs_body .zs_arsenal button[disabled] { opacity: .35; cursor: default; transform: none; }
body.jupi.zs_body .zs_arsenal .zs_zaehler {
  background: var(--zs-messing-hell);
  color: #241a05;
  border-radius: 999px;
  font-size: .74em;
  padding: .08em .46em;
  font-weight: 800;
}

/* ---------- 6. Overlays: Sternenkarte und Ergebnis-Urkunde ----------
   Pergament bleibt in beiden Themes hell (Regel 3.13.6). Die Level-Kacheln
   sind kleine Nachtfenster, die Sterne leuchten gold. */
body.jupi.zs_body .zs_overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(20, 14, 40, .55) 0%, rgba(5, 4, 14, .88) 72%);
  backdrop-filter: blur(4px);
}
body.jupi.zs_body .zs_overlay[hidden] { display: none; }  /* CSS-Falle: flex schlägt hidden */

body.jupi.zs_body .zs_karte {
  position: relative;
  width: min(34rem, 100%);
  max-height: 92%;
  overflow: auto;
  padding: 1.15rem 1.3rem 1rem;
  text-align: center;
  color: var(--zs-tinte);
  background-color: #efe2c2;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .55) 0%, transparent 55%),
    linear-gradient(180deg, #f7eed8 0%, #e8d8b4 72%, #ddcaa2 100%);
  border: 1px solid #a98d5c;
  border-radius: 6px;
  outline: 1px solid rgba(122, 90, 24, .28);
  outline-offset: -6px;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, .58),
    inset 0 0 50px rgba(180, 150, 100, .16);
}
body.jupi.zs_body .zs_karte h3 {
  margin: .1em 0 .15em;
  font-family: var(--zs-serif);
  font-size: 1.55em;
  font-weight: 700;
  letter-spacing: .01em;
  color: #3b2b18;
}
body.jupi.zs_body .zs_karte h3::after {
  content: "";
  display: block;
  width: 4.8rem;
  height: 2px;
  margin: .45rem auto 0;
  background: linear-gradient(90deg, transparent, #c9a24a 30%, #8a6a24 70%, transparent);
}
body.jupi.zs_body .zs_karte .zs_unterzeile {
  margin: .2em 0 .9em;
  font-size: .95em;
  line-height: 1.45;
  color: var(--zs-tinte-2);
}

/* Level-Raster: 6 Spalten, Kacheln = kleine Sternkarten-Fenster */
body.jupi.zs_body .zs_level_raster {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .45em;
  margin: .85em 0 1em;
}
body.jupi.zs_body .zs_level_kachel {
  cursor: pointer;
  min-height: 44px;
  padding: .45em .2em .35em;
  font-weight: 800;
  font-size: 1.02em;
  color: #f3e7c3;
  background-color: #171232;
  background-image: linear-gradient(180deg, #2a2147 0%, #171232 62%, #0e0b1d 100%);
  border: 1px solid #8a6a24;
  border-radius: .4em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 rgba(0, 0, 0, .16);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
body.jupi.zs_body .zs_level_kachel:hover {
  border-color: #f2d995;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(255, 214, 110, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}
body.jupi.zs_body .zs_level_kachel .zs_kachel_sterne {
  display: block;
  margin-top: .2em;
  font-size: .72em;
  letter-spacing: .1em;
  color: #ffd66e;
}
/* Gesperrte Level bleiben leere Stellen der Sternkarte: helles Pergament,
   nur die Zahl und ein kleines Schloss in Tinte - nicht 29 graue Knöpfe. */
body.jupi.zs_body .zs_level_kachel[disabled] {
  cursor: default;
  color: #6f5f45;
  background-color: rgba(255, 255, 255, .34);
  background-image: none;
  border-color: rgba(110, 85, 30, .34);
  transform: none;
  box-shadow: none;
}
body.jupi.zs_body .zs_level_kachel[disabled] .zs_kachel_sterne {
  color: #8a775a;
  filter: grayscale(1);
  opacity: .8;
}

/* Knöpfe auf dem Pergament: Messing, Tinte, min. 44 px */
body.jupi.zs_body .zs_karte .jupi_btn,
html[data-theme="dark"] body.jupi.zs_body .zs_karte .jupi_btn {
  min-height: 44px;
  margin: .25em .2em;
  padding: .55rem 1.05rem;
  font-weight: 800;
  color: #2b1e0c;
  background: linear-gradient(180deg, #f6dfa4 0%, #d3ae5c 55%, #a9832f 100%);
  border: 1px solid #7a5a18;
  border-radius: .4rem;
  box-shadow: inset 0 1px 0 #fff5d4, 0 3px 0 #6b4f14, 0 6px 14px rgba(0, 0, 0, .16);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  transition: filter .12s, transform .12s;
}
body.jupi.zs_body .zs_karte .jupi_btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
body.jupi.zs_body .zs_karte .jupi_btn_alt,
html[data-theme="dark"] body.jupi.zs_body .zs_karte .jupi_btn_alt {
  color: #3d2c1a;
  background: rgba(255, 255, 255, .28);
  border: 1px solid #8a6a24;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  text-shadow: none;
}
body.jupi.zs_body .zs_karte .jupi_btn_alt:hover { background: rgba(255, 255, 255, .5); }

/* Sterne im Sieg-Overlay */
body.jupi.zs_body .zs_sieg_sterne {
  margin: .15em 0 .3em;
  font-size: 2.5em;
  letter-spacing: .12em;
  color: #b8862f;
  text-shadow: 0 1px 0 #fff6d8, 0 2px 4px rgba(0, 0, 0, .18);
}
body.jupi.zs_body .zs_sieg_sterne span { display: inline-block; }
@keyframes zs_stern_pop {
  0% { transform: scale(0) rotate(-30deg); }
  70% { transform: scale(1.35) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: no-preference) {
  body.jupi.zs_body .zs_sieg_sterne span.pop { animation: zs_stern_pop .5s ease-out backwards; }
  body.jupi.zs_body .zs_sieg_sterne span.pop:nth-child(2) { animation-delay: .18s; }
  body.jupi.zs_body .zs_sieg_sterne span.pop:nth-child(3) { animation-delay: .36s; }
}

/* ---------- 7. Hilfe: Pergamentseite des Zauberbuchs ---------- */
body.jupi.zs_body .zs_dialog {
  width: min(44rem, calc(100% - 1.5rem));
  max-height: 88dvh;
  overflow: auto;
  padding: 1.1rem 1.3rem 1rem;
  color: var(--zs-tinte);
  background-color: #f1e5c7;
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, .55) 0%, transparent 55%),
    linear-gradient(180deg, #f8efdb 0%, #e9dab8 75%, #ddcaa2 100%);
  border: 1px solid #a98d5c;
  border-radius: 8px;
  outline: 1px solid rgba(122, 90, 24, .28);
  outline-offset: -6px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .65), inset 0 0 60px rgba(180, 150, 100, .16);
}
body.jupi.zs_body .zs_dialog::backdrop {
  background: rgba(4, 3, 12, .72);
  backdrop-filter: blur(3px);
}
/* Pergament scrollt mit einem Messing-Scrollbalken, nicht mit dem weißen
   Standardbalken des Browsers. */
body.jupi.zs_body .zs_dialog,
body.jupi.zs_body .zs_karte {
  scrollbar-width: thin;
  scrollbar-color: #b49b6d #efe2c2;
}
body.jupi.zs_body .zs_dialog::-webkit-scrollbar,
body.jupi.zs_body .zs_karte::-webkit-scrollbar { width: 10px; }
body.jupi.zs_body .zs_dialog::-webkit-scrollbar-track,
body.jupi.zs_body .zs_karte::-webkit-scrollbar-track { background: #efe2c2; border-radius: 5px; }
body.jupi.zs_body .zs_dialog::-webkit-scrollbar-thumb,
body.jupi.zs_body .zs_karte::-webkit-scrollbar-thumb {
  background: #b49b6d;
  border: 2px solid #efe2c2;
  border-radius: 5px;
}
body.jupi.zs_body .zs_dialog_kopf {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(138, 106, 36, .4);
}
body.jupi.zs_body .zs_dialog_kopf img {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--zs-messing);
  background: #0d0a1c;
  box-shadow: 0 0 10px rgba(255, 214, 110, .3);
}
body.jupi.zs_body .zs_dialog_kopf h2 {
  flex: 1;
  margin: .25rem 0;
  font-family: var(--zs-serif);
  font-size: 1.28rem;
  color: #3b2b18;
}
body.jupi.zs_body .zs_dialog_kopf form { display: flex; justify-content: flex-end; margin: 0; }
body.jupi.zs_body .zs_dialog_zu {
  cursor: pointer;
  min-width: 40px;
  min-height: 40px;
  padding: .3rem .55rem;
  font-weight: 800;
  color: var(--zs-messing-hell);
  background: linear-gradient(180deg, #2b2147 0%, #171232 60%, #0e0b1d 100%);
  border: 1px solid #8a6a24;
  border-radius: .4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .18);
}
body.jupi.zs_body .zs_dialog_zu:hover {
  color: #2b1e0c;
  background: linear-gradient(180deg, #f6dfa4 0%, #d3ae5c 55%, #a9832f 100%);
}
body.jupi.zs_body .zs_dialog_inhalt h3 {
  margin: .95rem 0 .25rem;
  font-family: var(--zs-serif);
  font-size: 1.08rem;
  color: #3b2b18;
}
body.jupi.zs_body .zs_dialog_inhalt ul { margin: .2rem 0 .4rem 1.15rem; }
body.jupi.zs_body .zs_dialog_inhalt li { margin: .35rem 0; line-height: 1.5; }
body.jupi.zs_body .zs_lernsatz {
  margin: .35rem 0 .65rem;
  padding: .6rem .8rem;
  line-height: 1.55;
  color: #332616;
  background: #ead8ae;
  border-left: 4px solid #b8862f;
  border-radius: .35rem;
}
body.jupi.zs_body .zs_geschossliste { list-style: none; margin-left: 0; padding-left: 0; }
body.jupi.zs_body .zs_geschossliste li {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
}
body.jupi.zs_body .zs_texticon {
  flex: none;
  width: 1.35em;
  height: 1.35em;
  margin-top: .12em;
  vertical-align: -.22em;
}
body.jupi.zs_body .zs_dialog_fuss {
  display: flex;
  justify-content: flex-end;
  margin-top: .8rem;
}
body.jupi.zs_body .zs_dialog_fuss form { margin: 0; }
body.jupi.zs_body .zs_dialog_fuss .jupi_btn,
html[data-theme="dark"] body.jupi.zs_body .zs_dialog_fuss .jupi_btn {
  min-height: 44px;
  padding: .55rem 1.1rem;
  font-weight: 800;
  color: #2b1e0c;
  background: linear-gradient(180deg, #f6dfa4 0%, #d3ae5c 55%, #a9832f 100%);
  border: 1px solid #7a5a18;
  border-radius: .4rem;
  box-shadow: inset 0 1px 0 #fff5d4, 0 3px 0 #6b4f14;
}
body.jupi.zs_body .zs_dialog_fuss .jupi_btn:hover { filter: brightness(1.07); }

/* ---------- 8. Fuß: Messingband am Dokumentende ---------- */
body.jupi.zs_body .jupi_container > .jupi_footer,
html[data-theme="dark"] body.jupi.zs_body .jupi_container > .jupi_footer {
  flex: none;
  margin: auto 0 0;
  max-width: none;
  width: 100%;
  padding: .5rem 1rem .55rem;
  text-align: center;
  font-size: .78rem;
  line-height: 1.5;
  color: #cdbd9c;
  background: linear-gradient(180deg, #171028 0%, #0b0816 100%);
  border-top: 1px solid rgba(201, 162, 75, .4);
  border-radius: 0;
  box-shadow: 0 -8px 22px rgba(0, 0, 0, .3);
}
body.jupi.zs_body .jupi_footer p { margin: 0; }
body.jupi.zs_body .jupi_footer a { color: var(--zs-messing-hell); font-weight: 700; text-decoration: none; }
body.jupi.zs_body .jupi_footer a:hover { text-decoration: underline; }

/* ---------- 9. Dark Mode: dieselbe Warte bei Nacht ----------
   Die Plattform-Kurzform `html[data-theme="dark"] body.jupi { background: … }`
   löscht sonst cover/no-repeat/fixed - darum hier ALLE vier Werte wiederholen. */
html[data-theme="dark"] body.jupi.zs_body {
  background-color: #070510;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(96, 74, 170, .26) 0%, transparent 58%),
    linear-gradient(180deg, rgba(3, 3, 10, .2) 0%, rgba(3, 3, 10, .42) 62%, rgba(3, 3, 10, .58) 100%),
    url("kulisse.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover;
  background-position: center center, center center, center center;
  background-attachment: fixed, fixed, fixed;
  color: #e9dcc0;
}
html[data-theme="dark"] body.jupi.zs_body .zs_leiste {
  background-color: #0c0918;
  background-image:
    radial-gradient(ellipse at 50% -40%, rgba(120, 96, 200, .3) 0%, rgba(80, 62, 140, .08) 45%, transparent 70%),
    linear-gradient(180deg, #1f1839 0%, #120e26 48%, #080614 100%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  border-bottom-color: #7a5f26;
}
html[data-theme="dark"] body.jupi.zs_body .zs_buehne {
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(108, 86, 179, .22) 0%, transparent 60%),
    linear-gradient(160deg, #201936 0%, #120e26 58%, #080614 100%);
}
html[data-theme="dark"] body.jupi.zs_body .zs_karte,
html[data-theme="dark"] body.jupi.zs_body .zs_dialog {
  filter: brightness(.97);
}

/* ---------- 10. Handy, Tablet, Vollbild ---------- */
@media (max-width: 900px) {
  body.jupi.zs_body .zs_buehne { font-size: 13px; }
  body.jupi.zs_body .zs_hinweis { font-size: .9em; }
}

@media (max-width: 800px) {
  body.jupi.zs_body .zs_leiste {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem .5rem;
    padding: .45rem .6rem .5rem;
  }
  body.jupi.zs_body .zs_brand { grid-row: 1; grid-column: 1 / -1; }
  body.jupi.zs_body .zs_brand img { width: 34px; height: 34px; }
  body.jupi.zs_body .zs_brand h1 { font-size: 1.08rem; }
  body.jupi.zs_body .zs_leiste .jupi_nav_back { grid-row: 2; grid-column: 1; font-size: .83rem; }
  body.jupi.zs_body .zs_leiste .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
  body.jupi.zs_body .zs_leiste .jupi_sprachen_select { max-width: 7.5rem; }
  body.jupi.zs_body .jupi_container > .jupi_main { padding: .55rem .55rem .8rem; }
}

@media (max-width: 760px) {
  /* Die Sternkarte ist auf dem Handy ein eigenes Fenster über der Seite:
     sonst müsste das Level-Raster in der kleinen 16:9-Fläche scrollen. */
  body.jupi.zs_body .zs_overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    padding: .75rem;
  }
  body.jupi.zs_body .zs_spielfeld { overflow: visible; }
  body.jupi.zs_body .zs_karte {
    width: min(32rem, 100%);
    max-height: calc(100dvh - 1.5rem);
    padding: .95rem 1rem .9rem;
  }
  body.jupi.zs_body .zs_karte h3 { font-size: 1.38em; }
  body.jupi.zs_body .zs_level_raster { grid-template-columns: repeat(5, 1fr); gap: .4em; margin: .7em 0 .8em; }
  body.jupi.zs_body .zs_karte .jupi_btn { min-height: 44px; }
}

@media (max-width: 640px) {
  body.jupi.zs_body .zs_buehne {
    font-size: 12px;
    padding: 6px 6px 0;
    border-radius: 13px;
    box-shadow:
      0 0 0 2px #100c20,
      0 0 0 4px #a9832f,
      0 0 0 5px #392b13,
      0 12px 30px rgba(0, 0, 0, .6),
      inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  body.jupi.zs_body .zs_spielfeld { border-radius: 8px; }
  #zs_canvas { border-radius: 8px; }
  body.jupi.zs_body .zs_hud { left: .45em; right: .45em; gap: .35em; }
  body.jupi.zs_body .zs_hud_oben { top: .5em; }
  body.jupi.zs_body .zs_hud_unten { bottom: .5em; }
  body.jupi.zs_body .zs_levelwahl select { max-width: 8.5em; }
  body.jupi.zs_body .zs_wind { display: none; }
  body.jupi.zs_body .zs_arsenal { max-width: calc(100% - 3.2em); gap: .3em; }
  body.jupi.zs_body .zs_arsenal button { padding: .25em .45em; }
  body.jupi.zs_body .zs_arsenal .zs_gicon { width: 1.45em; height: 1.45em; }
  body.jupi.zs_body .zs_sterne_kopf { font-size: 1.05em; padding: .2em .45em; }
  body.jupi.zs_body .zs_hinweis { font-size: .86em; padding: .4em .6em; min-height: 36px; }
  body.jupi.zs_body .zs_hinweis::before, body.jupi.zs_body .zs_hinweis::after { width: .9em; margin: 0 .4em; }
  body.jupi.zs_body .zs_dialog { width: calc(100% - 1rem); padding: .9rem .9rem .8rem; }
}

@media (max-width: 420px) {
  body.jupi.zs_body .zs_levelwahl { padding-left: .45em; padding-right: .4em; }
  body.jupi.zs_body .zs_levelwahl select { max-width: 6.8em; }
  body.jupi.zs_body .zs_hud_gruppe { gap: .3em; }
  body.jupi.zs_body .zs_iconbtn { padding: .2em .25em; }
  body.jupi.zs_body .zs_overlay { padding: .5rem; }
  body.jupi.zs_body .zs_karte { padding: .85rem .8rem .8rem; }
  body.jupi.zs_body .zs_karte h3 { font-size: 1.28em; }
  body.jupi.zs_body .zs_level_raster { gap: .32em; }
  body.jupi.zs_body .zs_karte .jupi_btn { padding: .5rem .75rem; font-size: .92rem; }
}

@media (max-width: 360px) {
  body.jupi.zs_body .zs_leiste .jupi_nav_back { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  body.jupi.zs_body .zs_leiste .jupi_werkzeuge { grid-row: 3; grid-column: 1 / -1; justify-self: center; }
}

/* Vollbild: das Gerät zeigt die Sternenkarte ohne Seitenrahmen.
   Canvas bleibt 16:9, die Hinweiszeile sitzt direkt darunter. */
body.jupi.zs_body .zs_buehne:fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #05040f;
  box-shadow: none;
}
body.jupi.zs_body .zs_buehne:fullscreen .zs_spielfeld {
  width: min(100vw, calc((100dvh - 40px) * 16 / 9));
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 0;
}
body.jupi.zs_body .zs_buehne:fullscreen #zs_canvas { border-radius: 0; }
body.jupi.zs_body .zs_buehne:fullscreen .zs_hinweis {
  width: min(100vw, calc((100dvh - 40px) * 16 / 9));
  border-radius: 0;
}

/* ---------- 11. Fokus & Bedienziele (Regel 3.13.5) ----------
   Absichtlich am Ende, damit keine frühere Regel die Mindestgröße überstimmt. */
body.jupi.zs_body :is(button, a, select):focus-visible {
  outline: 2px solid var(--zs-messing-hell);
  outline-offset: 2px;
}
body.jupi.zs_body .zs_leiste .jupi_nav_back,
body.jupi.zs_body .zs_leiste .jupi_sprachen_select,
body.jupi.zs_body .zs_leiste .jupi_theme_switch,
body.jupi.zs_body .zs_levelwahl,
body.jupi.zs_body .zs_levelwahl select,
body.jupi.zs_body .zs_iconbtn,
body.jupi.zs_body .zs_wind,
body.jupi.zs_body .zs_sterne_kopf,
body.jupi.zs_body .zs_arsenal button,
body.jupi.zs_body .zs_level_kachel,
body.jupi.zs_body .zs_karte .jupi_btn,
body.jupi.zs_body .zs_dialog_zu,
body.jupi.zs_body .zs_dialog_fuss .jupi_btn {
  min-width: 40px;
  min-height: 40px;
}