/* schatzkarte/styles.css - Piraten-Look der Schatzkarte (Stand 24.10.2026).

   Aufbau (von aussen nach innen):
     1. Farben und Grundregeln (Holz, Gold, Pergament, Tinte)
     1b. Seitenkulisse: kachelbares Piraten-Meer hinter allem (25.10.2026)
     2. Die Piraten-Konsole: JUPI-Kopfzeile + Steuerleiste als Schnitzerei
     3. Die Tropenszene (Meer, Insel, Flagge, Truhe) hinter dem Spiel
     4. Die Schatzkarte: Pergament, Holzrahmen, Seil, Messingnaegel
     5. Sprechblase, Antwortknoepfe, Rundenende, Hilfe-Fenster
     6. Dark Mode (Abendlicht statt Tageslicht)
     7. Handy
     8. Bedienziele >= 40 x 40 px (Regel 3.13.5) - STEHT AM ENDE, sonst
        gewinnt die spaetere Grundregel aus jupi.css.

   Die .schatz_*-Regeln tragen die Optik im Paket, nicht mehr im
   Plattform-Stylesheet (Zukunftsstandard AGENTS.md 3.10). */

/* ---------- 1. Farben ---------- */
:root {
  --sk-holz-tief: #241406;
  --sk-holz: #4a2d16;
  --sk-holz-hell: #6d4526;
  --sk-holz-kante: #1b0f05;
  --sk-gold: #f2cc72;
  --sk-gold-hell: #ffe9ab;
  --sk-gold-tief: #a9781f;
  --sk-papier: #f3e0b4;
  --sk-papier-kante: #c19a5e;
  --sk-tinte: #5c3a1b;
  --sk-tinte-hell: #8a6a42;
  --sk-nacht: #0f2036;
  --sk-schrift: Georgia, "Times New Roman", "Palatino Linotype", serif;
}

/* ---------- 1b. Seitenkulisse: das Meer um die Konsole (25.10.2026) -------
   Der Seitenrand um das Spiel traegt den Stil des Spiels: offenes Meer mit
   Gravur-Wellen und einer fahlen Kompassrose (kulisse.svg, Generator
   .zcode/schatzkarte-kulisse.cjs), statt der hellen Plattform-Karte.
   Muster: Sternenfusion (gemalter Weltraum), Rechen-Raumschiff (raum.svg)
   und Raetselrakete (kachelbarer Himmel). Alle Regeln haengen an
   body.jupi.sk_body, damit sie die Grundregeln aus jupi.css in BEIDEN
   Themes schlagen (body.jupi.sk_body + die dunkle Fassung mit
   html[data-theme] davor - sonst gewinnt jupi.css dunkel). */
body.jupi.sk_body {
  min-height: 100vh;
  background-repeat: no-repeat;
  /* Kein Kacheln der Verlaeufe - nur die SVG-See kachelt; die Lichter
     (Sonnenglanz oben, Tiefe unten) liegen einmal drueber. */
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(173, 224, 237, .22) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 6%, rgba(140, 208, 224, .12) 0%, transparent 56%),
    radial-gradient(1300px 520px at 0% 106%, rgba(5, 24, 32, .40) 0%, transparent 62%),
    url("kulisse.svg") repeat,
    #164a5c;
}
/* Dunkel = Nachtfahrt: die See sinkt ins Dunkel, die Kulisse bleibt
   darunter sichtbar (durchsichtige Nacht-Schicht, Muster Raetselrakete). */
html[data-theme="dark"] body.jupi.sk_body {
  background:
    linear-gradient(rgba(4, 14, 20, .50), rgba(3, 10, 15, .58)),
    radial-gradient(1100px 560px at 50% -8%, rgba(173, 224, 237, .10) 0%, transparent 60%),
    radial-gradient(1300px 520px at 0% 106%, rgba(2, 8, 12, .45) 0%, transparent 62%),
    url("kulisse.svg") repeat,
    #0c2e3a;
}
/* Die weisse Plattform-Karte darf das Meer nicht zudecken. */
body.jupi.sk_body .jupi_container > .jupi_main { background: transparent; }
/* Der Fuss klebt unten wie auf der Plattform - die Hauptzeile (1fr) schluckt
   den Platzueberfluss, Kopfzeile bleibt oben schlank. Ausdrueckliche Zeilen,
   sonst verteilt das Grid freie Hoehe auf implizite auto-Zeilen (Muster
   Rechen-Raumschiff). */
body.jupi.sk_body .jupi_container {
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100vh;
}
@supports (height: 100dvh) {
  body.jupi.sk_body .jupi_container { min-height: 100dvh; }
}
/* Fuss direkt auf dem Meer: keine weisse Karte mehr (Grundregel aus
   jupi.css: #fafafa/--ct-color + border-top + runde Ecken - alles weg),
   Schrift in Seewasser-hell, Links im Gold der Konsole. Das Meer bleibt
   in BEIDEN Themes dunkel - darum gelten die Farben ohne Theme-Zweig. */
body.jupi.sk_body .jupi_container > .jupi_footer {
  background: transparent;
  border-top: 0;
  border-radius: 0;
}
body.jupi.sk_body .jupi_footer_text { color: #cfe6ec; }
body.jupi.sk_body .jupi_footer_text a { color: var(--sk-gold-hell); }

/* ---------- 2. Piraten-Konsole (Kopfzeile + Steuerleiste) ---------- */
/* Holz-Textur: zwei Planken-Fugen, zwei Aststellen, eine Lichtkante. */
.sk_holz {
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 214, 150, .10) 0 9%, transparent 10%),
    radial-gradient(circle at 78% 72%, rgba(0, 0, 0, .28) 0 8%, transparent 9%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 84px),
    linear-gradient(180deg, var(--sk-holz-hell) 0%, var(--sk-holz) 52%, #331f0f 100%);
}

.sk_header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .45rem 1rem .55rem;
  border-bottom: 4px solid var(--sk-holz-tief);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 226, 170, .25);
  background:
    radial-gradient(circle at 12% 40%, rgba(255, 214, 150, .12) 0 10%, transparent 11%),
    radial-gradient(circle at 84% 66%, rgba(0, 0, 0, .30) 0 9%, transparent 10%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .20) 0 2px, transparent 2px 96px),
    linear-gradient(180deg, #6d4526 0%, #4a2d16 52%, #2e1b0c 100%);
  color: #f7ecd6;
}
.sk_brand { display: flex; align-items: center; justify-self: center; gap: .55rem; min-width: 0; }
.sk_brand img {
  display: block; flex: none; width: 40px; height: 40px; object-fit: contain; aspect-ratio: 1;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
.sk_brand h1 {
  margin: 0; color: var(--sk-gold); font-family: var(--sk-schrift);
  font-size: 1.45rem; line-height: 1.15; letter-spacing: .02em;
  text-shadow: 0 2px 0 var(--sk-holz-tief), 0 0 14px rgba(242, 204, 114, .35);
}
.sk_header .jupi_nav_back {
  position: static; justify-self: start; display: inline-flex; align-items: center;
  border-radius: 999px; padding: .35rem .75rem; line-height: 1.2; font-size: .88rem;
  font-weight: 700; background: #f7ecd6; color: #4a2d16; border: 2px solid var(--sk-gold-tief);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.sk_header .jupi_nav_back:hover { background: var(--sk-gold-hell); transform: translateY(-1px); }
.sk_header .jupi_werkzeuge { position: static; justify-self: end; display: flex; align-items: center; gap: .45rem; }
.sk_header #jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: .3rem; }
.sk_header .jupi_sprachen_select {
  background: #2f1c0c; color: var(--sk-gold); border: 2px solid var(--sk-gold-tief);
  font-weight: 700; border-radius: .6rem; max-width: 11rem;
}
.sk_header .jupi_theme_switch {
  width: 74px; height: 40px; min-width: 74px; padding: 0;
  background: #2f1c0c; border: 2px solid var(--sk-gold-tief);
}
.sk_header .jupi_theme_switch:hover { background: #3d2611; }
.sk_header .jts_thumb { top: 3px; bottom: auto; left: 4px; width: 32px; height: 32px; border-radius: 50%; }
html[data-theme="dark"] .sk_header .jts_thumb { left: calc(100% - 36px); }
.sk_header .jts_sun { left: 9px; } .sk_header .jts_moon { right: 9px; }

/* Steuerleiste: Zahlen links, Steuerung rechts gebuendelt - gleiches Holz. */
.sk_leiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: .5rem .85rem; margin: 0 0 .7rem;
  border-radius: .7rem;
  border: 3px solid var(--sk-holz-kante);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 226, 170, .22);
  background:
    radial-gradient(circle at 22% 40%, rgba(255, 214, 150, .10) 0 11%, transparent 12%),
    radial-gradient(circle at 86% 60%, rgba(0, 0, 0, .28) 0 10%, transparent 11%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 84px),
    linear-gradient(180deg, var(--sk-holz-hell) 0%, var(--sk-holz) 52%, #331f0f 100%);
  color: #f7ecd6;
}
.sk_stats { display: flex; flex-wrap: wrap; gap: .45rem .9rem; align-items: stretch; }
.sk_stat {
  display: flex; flex-direction: column; justify-content: center; min-width: 4.6rem;
  padding: .2rem .55rem;
  border-radius: .45rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .16));
  border: 1px solid rgba(242, 204, 114, .28);
}
.sk_stat label {
  font-size: .66rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #e4cfa4;
}
.sk_stat span {
  font-family: var(--sk-schrift); font-size: 1.35rem; font-weight: 700;
  color: var(--sk-gold); line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.sk_helm { display: inline-flex; align-items: center; opacity: .95; }
.sk_steuerung { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sk_feld { display: inline-flex; align-items: center; gap: .4rem; }
.sk_steuerung label { font-weight: 700; font-size: .9rem; color: #f3e3c2; }
.sk_leiste .jupi_select {
  background: #2f1c0c; color: var(--sk-gold); border: 2px solid var(--sk-gold-tief);
  border-radius: .55rem; font-weight: 700; padding: .4rem .7rem; min-height: 40px;
}
.sk_leiste .jupi_select:focus { box-shadow: 0 0 0 3px rgba(242, 204, 114, .3); border-color: var(--sk-gold); }
.sk_knopf {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 2px solid var(--sk-gold-tief); border-radius: .6rem;
  background: linear-gradient(180deg, #6d4526, #3a2210);
  color: var(--sk-gold); cursor: pointer; padding: .4rem .65rem;
  font: inherit; font-size: .95rem; font-weight: 700;
  box-shadow: 0 3px 0 #20130a, inset 0 1px 0 rgba(255, 226, 170, .25);
}
.sk_knopf:hover { filter: brightness(1.12); }
.sk_knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 #20130a; }
.sk_knopf:focus-visible { outline: 3px solid var(--sk-gold); outline-offset: 2px; }
.sk_zeichen { font-size: 1.05rem; line-height: 1; }

/* ---------- 3. Tropenszene ---------- */
.schatz_stage {
  position: relative; overflow: hidden;
  border-radius: 1rem;
  border: 4px solid var(--sk-holz-kante);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  padding: .8rem 1rem 1rem;
  display: flex; flex-direction: column; align-items: stretch;
  /* Himmel als Fuellung: die Szene ist unten verankert und deckt die
     Buehne nicht immer ganz ab (im Modus "ablesen" wird die Buehne hoher,
     durch die Antwortknoepfe) - der Streifen oben ist deshalb Himmel. */
  background: linear-gradient(180deg, #2a93c8 0%, #3fb4e2 45%, #63c8ee 100%);
}
/* Die Szene ist ein fertiges Bild (Papagei, Piratenflagge, Laterne, Goldtruhe,
   Holzboden, Inseln und Meer). Sie liegt hinter der Karte und ist rein
   dekorativ - unten verankert, damit der Holzboden immer sichtbar bleibt. */
.sk_szene {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
  z-index: 0; display: block;
  object-fit: cover; object-position: center bottom;
}
.schatz_stage > *:not(.sk_szene) { position: relative; z-index: 1; }

/* Aufgabentext als dunkles Banner (steht UEBER der Karte, nie darunter). */
.schatz_task_label {
  margin: 0 0 .6rem; padding: .45rem .8rem;
  font-weight: 700; font-size: .92rem; color: #ffeec4;
  background: linear-gradient(180deg, rgba(28, 16, 6, .93), rgba(12, 8, 3, .93));
  border: 1px solid rgba(242, 204, 114, .40);
  border-radius: .5rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}

.schatz_buehne {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; min-height: 0;
}

/* ---------- 4. Die Schatzkarte ---------- */
.schatz_karte_box { flex: 1 1 auto; min-width: 0; text-align: center; display: flex; justify-content: center; }
.schatz_karte_box svg {
  display: block; margin: 0 auto;
  width: 100%; height: auto;
  /* Die Karte waechst mit dem Fenster, bleibt aber hoehenbegrenzt: im Modus
     "Koordinaten ablesen" muessen die vier Antwortknoepfe ohne Scrollen
     sichtbar bleiben (GUI 3.13.3 Typ 2 - above the fold). Die Obergrenze
     folgt dem Seitenverhaeltnis der Karte (--sk-karte-ratio, von game.js
     gesetzt), damit kein leerer Rand entsteht. */
  --sk-karte-max: min(46dvh, 500px);
  max-width: min(100%, calc(var(--sk-karte-max) * var(--sk-karte-ratio, 1.3)));
  max-height: var(--sk-karte-max);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
}
/* Die Klickfelder sind das ganze Kaestchen - so ist das Ziel auch am Handy
   so gross wie moeglich (Regel 3.13.5). */
.schatz_feld { fill: transparent; cursor: pointer; }
.schatz_feld:hover { fill: rgba(120, 70, 20, .16); }
.schatz_feld:focus-visible { fill: rgba(120, 70, 20, .22); outline: none; }

/* ---------- 5. Sprechblase, Antworten, Rundenende, Hilfe ---------- */
.schatz_bubble {
  position: relative; margin: .8rem auto 0; max-width: 40rem; min-width: min(100%, 24rem);
  display: flex; align-items: center; gap: .6rem;
  background: linear-gradient(180deg, #16273e, var(--sk-nacht));
  border: 3px solid var(--sk-gold); border-radius: 1rem;
  padding: .55rem .9rem .55rem .6rem;
  color: var(--sk-gold-hell); font-weight: 700; font-size: 1rem; text-align: left;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}
.schatz_avatar { flex: 0 0 auto; display: inline-flex; }
.schatz_avatar img { display: block; width: 46px; height: auto; }

.schatz_btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .9rem; }
.schatz_btn {
  flex: 1 1 calc(50% - .35rem); min-height: 56px; font-size: 1.35rem; font-weight: 800;
  border: 3px solid var(--sk-gold-tief); border-radius: .8rem; cursor: pointer;
  font-family: var(--sk-schrift);
  color: #2b1a06; background: linear-gradient(180deg, var(--sk-gold-hell), var(--sk-gold));
  box-shadow: 0 4px 0 var(--sk-gold-tief), 0 6px 12px rgba(0, 0, 0, .3);
  transition: transform .1s, filter .1s;
}
.schatz_btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); }
.schatz_btn:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 0 var(--sk-gold-tief); }
.schatz_btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.schatz_btn:disabled { cursor: default; opacity: .9; }
.schatz_btn_right { outline: 4px solid #2e7d32; outline-offset: 3px; }
.schatz_btn_wrong { opacity: .55; animation: artikel_shake .35s; }
.schatz_btns_row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; justify-content: center; }
.schatz_btns_row .jupi_btn, .schatz_done .jupi_btn {
  background: linear-gradient(180deg, var(--sk-gold-hell), var(--sk-gold));
  color: #2b1a06; border: 3px solid var(--sk-gold-tief); font-weight: 800;
  box-shadow: 0 4px 0 var(--sk-gold-tief); border-radius: .7rem;
}
.schatz_btns_row .jupi_btn:hover, .schatz_done .jupi_btn:hover { filter: brightness(1.06); }
.schatz_msg {
  min-height: 1.7rem; margin-top: .6rem; font-weight: 700; text-align: center;
  color: #2b1a06; text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.schatz_msg_ok { color: #1b5e20; }
.schatz_msg_err { color: #b71c1c; }

.schatz_done {
  text-align: center; border-radius: 1rem; padding: 1.6rem 1rem;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 214, 150, .18) 0 12%, transparent 13%),
    linear-gradient(180deg, var(--sk-papier), #e2c894);
  border: 4px solid var(--sk-holz-kante);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.schatz_done h3 {
  margin: .2rem 0 .5rem; font-size: 1.5rem; color: #7a4a12;
  font-family: var(--sk-schrift);
}
.schatz_truhe { margin: .2rem 0; }
.schatz_done p { margin: .3rem 0 .8rem; font-size: 1.05rem; color: var(--sk-tinte); }
.schatz_sterne { font-size: 2rem; margin-bottom: .8rem; }

.sk_dialog {
  width: min(46rem, calc(100% - 2rem)); max-height: 85dvh; overflow: auto;
  border: 4px solid var(--sk-holz-kante); border-radius: 1rem; padding: 1rem 1.2rem 1.2rem;
  background:
    radial-gradient(circle at 14% 22%, rgba(160, 110, 40, .12) 0 14%, transparent 15%),
    linear-gradient(180deg, var(--sk-papier), #e6cd98);
  color: var(--sk-tinte);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
}
.sk_dialog::backdrop { background: rgba(8, 6, 2, .68); }
.sk_dialog form { display: flex; justify-content: flex-end; }
.sk_dialog h2 { margin: .5rem 0; font-family: var(--sk-schrift); color: #6f4210; }
.sk_merksaetze { margin: .4rem 0; padding-left: 1.3rem; }
.sk_merksaetze li { margin: .7rem 0; line-height: 1.55; }
.sk_lernsatz {
  background: rgba(120, 80, 30, .16); border-left: 5px solid var(--sk-gold-tief);
  border-radius: .5rem; padding: .6rem .8rem; margin: .9rem 0 0;
  font-size: .98rem; line-height: 1.6; color: #4a3115;
}
.sk_zu { min-height: 40px; }
.sk_dialog .sk_zu {
  background: linear-gradient(180deg, var(--sk-gold-hell), var(--sk-gold));
  color: #2b1a06; border: 2px solid var(--sk-gold-tief); font-weight: 700;
}

/* ---------- 6. Dark Mode (Abendlicht) ---------- */
/* Die Kulisse dunkelt oben an body.jupi.sk_body ab (Nachtfahrt) - die alte
   Plattform-Dunkelregel (html[data-theme="dark"] body.jupi) ist damit
   entfallen. */
/* Die Szene bekommt Abendlicht: der Filter dimmt die Tropenwelt, das
   Pergament der Karte bleibt trotzdem gut lesbar. */
html[data-theme="dark"] .sk_szene { filter: brightness(.52) saturate(.85) hue-rotate(-6deg); }
html[data-theme="dark"] .sk_header {
  background:
    radial-gradient(circle at 12% 40%, rgba(255, 214, 150, .10) 0 10%, transparent 11%),
    radial-gradient(circle at 84% 66%, rgba(0, 0, 0, .40) 0 9%, transparent 10%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .30) 0 2px, transparent 2px 96px),
    linear-gradient(180deg, #3a2413 0%, #291809 52%, #180d04 100%);
}
html[data-theme="dark"] .sk_leiste {
  background:
    radial-gradient(circle at 22% 40%, rgba(255, 214, 150, .08) 0 11%, transparent 12%),
    radial-gradient(circle at 86% 60%, rgba(0, 0, 0, .40) 0 10%, transparent 11%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 84px),
    linear-gradient(180deg, #3d2614 0%, #2a1809 52%, #1a0f05 100%);
}
html[data-theme="dark"] .sk_header .jupi_nav_back { background: #2a1a0d; color: var(--sk-gold); border-color: var(--sk-gold-tief); }
html[data-theme="dark"] .sk_header .jupi_nav_back:hover { background: #3a2412; }
html[data-theme="dark"] .sk_header .jupi_sprachen_select,
html[data-theme="dark"] .sk_leiste .jupi_select { background: #1a0f05; color: var(--sk-gold); border-color: var(--sk-gold-tief); }
html[data-theme="dark"] .sk_leiste .jupi_select option { background: #1a0f05; color: var(--sk-gold); }
html[data-theme="dark"] .schatz_msg_err { color: #ff9a8f; }
html[data-theme="dark"] .schatz_msg_ok { color: #9ce49f; }
html[data-theme="dark"] .sk_dialog {
  background: linear-gradient(180deg, #2a2118, #1d1710);
  color: #f0e3c8; border-color: var(--sk-gold-tief);
}
html[data-theme="dark"] .sk_dialog h2 { color: var(--sk-gold); }
html[data-theme="dark"] .sk_lernsatz { background: rgba(242, 204, 114, .12); color: #f0e3c8; }
html[data-theme="dark"] .schatz_done {
  background: linear-gradient(180deg, #33291c, #241c12);
  border-color: var(--sk-gold-tief);
}
html[data-theme="dark"] .schatz_done h3 { color: var(--sk-gold); }
html[data-theme="dark"] .schatz_done p { color: #ecdcbb; }

/* ---------- 7. Handy ---------- */
@media (max-width: 800px) {
  .sk_header { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; padding: .4rem .5rem .5rem; }
  .sk_brand { grid-row: 1; grid-column: 1 / -1; }
  .sk_brand img { width: 36px; height: 36px; }
  .sk_brand h1 { font-size: 1.2rem; }
  .sk_header .jupi_nav_back { grid-row: 2; grid-column: 1; font-size: .85rem; }
  .sk_header .jupi_werkzeuge { grid-row: 2; grid-column: 2; }
  .sk_header .jupi_sprachen_select { max-width: 7rem; }
  .sk_leiste { gap: .45rem .7rem; padding: .45rem .6rem; }
  .sk_helm { display: none; }
}
@media (max-width: 600px) {
  .jupi_main { padding: .5rem .5rem 0; }
  .sk_stats { gap: .3rem .6rem; }
  .sk_stat { min-width: 3.7rem; padding: .15rem .4rem; }
  .sk_stat span { font-size: 1.15rem; }
  .sk_steuerung { width: 100%; margin-left: 0; }
  /* Am Handy stehen die beiden Auswahlfelder nebeneinander (Label ueber dem
     Feld) - so spart die Konsole eine Zeile fuer die Karte. */
  .sk_feld { flex: 1 1 45%; flex-direction: column; align-items: stretch; gap: .15rem; }
  .sk_feld label { font-size: .78rem; }
  .sk_feld select { flex: 1 1 auto; min-width: 0; width: 100%; }
  .sk_knopf { justify-content: center; flex: 1 1 auto; }
  .schatz_stage { padding: .5rem .5rem .7rem; }
  .schatz_task_label { font-size: .85rem; }
  .schatz_bubble { font-size: .95rem; padding: .45rem .7rem .45rem .45rem; min-width: 0; }
  .schatz_avatar img { width: 38px; height: auto; }
  /* Die Karte darf am Handy etwas kleiner sein, damit Antwortknoepfe und
     Papagei ohne Scrollen sichtbar bleiben (GUI 3.13.3 Typ 2). */
  .schatz_karte_box svg { --sk-karte-max: min(38dvh, 400px); }
}
@media (max-width: 360px) {
  .sk_header .jupi_nav_back { grid-row: 2; grid-column: 1 / -1; justify-self: center; }
  .sk_header .jupi_werkzeuge { grid-row: 3; grid-column: 1 / -1; justify-self: center; }
}

/* ---------- 8. Bedienziele: mindestens 40 x 40 px (Regel 3.13.5) ----------
   STEHT AM ENDE der Datei: eine spaetere Grundregel aus jupi.css wuerde
   sonst gewinnen (so ist es beim Rechnen-Raumschiff gemessen worden). */
.sk_header button, .sk_header a, .sk_header select,
.sk_leiste button, .sk_leiste select, .schatz_btn,
.schatz_btns_row button, .schatz_done button { min-width: 40px; min-height: 40px; }