/* ==========================================================================
   Weltkarten-Rätsel - "Kartensaal" (Atlas-GUI, 08.11.2026)
   Ein Lesesaal für alte Atlanten: dunkelgrünes Leder, Messing, Pergament
   und eine aufgeschlagene Karte. Die Bühne ist ein Kartenblatt im
   Atlasdeckel, die Frage eine Titelkartusche, das HUD eine Instrumentenleiste.

   Abgrenzung zum Karten-Puzzle (laenderpuzzle/, "Atlas der Entdecker"):
   dort ein Kartografen-Schreibtisch aus Nussbaum und rotem Leder - hier der
   ruhige Lesesaal in Petrolgrün mit Globus, Kartenregal und Messingkompass.
   Die Tätigkeit ist Kartenlesen/Topografie, deshalb steht die Karte im Buch
   im Mittelpunkt und nicht eine Werkbank.

   Aufbau:
     1. Farben und Grundregeln
     2. Seite, Kulisse und Leisten-Lage (3.13.2a)
     3. Kopfzeile: Messing auf Leder (3.13.2)
     4. Spieltisch und Instrumentenleiste (HUD)
     5. Titelkartusche (Frage)
     6. Atlasblatt (Karte, Gitternetz, Kompass, Zoom)
     7. Meldungszeile
     8. Dialoge als Pergamentseiten, Startmenü als Atlasdeckel
     9. Fuß am Dokumentende
    10. Dark Mode: derselbe Saal bei Nacht (Papiere bleiben hell)
    11. Responsive
    12. Fokus, 40-px-Ziele, reduzierte Bewegung
   ========================================================================== */

/* ---------- 1. Farben und Grundregeln ---------- */
:root {
  --wk-gruen-tief: #071b17;
  --wk-gruen: #0d2b24;
  --wk-gruen-mittel: #123a30;
  --wk-gruen-hell: #1b4c40;
  --wk-messing: #c8a45a;
  --wk-messing-hell: #efd79b;
  --wk-messing-tief: #7d6128;
  --wk-papier: #f3e6c8;
  --wk-papier-hell: #fbf4e0;
  --wk-papier-kante: #b08a4a;
  --wk-tinte: #1d3a30;
  --wk-tinte-hell: #5f4a2a;
  --wk-see: #b2cec9;
  --wk-land: #ead9b0;
  --wk-rot: #8a2f22;
  --wk-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --wk-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* ---------- 2. Seite, Kulisse und Leisten-Lage (3.13.2a) ---------- */
html {
  background: var(--wk-gruen-tief);
}

/* EINE gestreckte Szene (3.13.7 Weg A): Kartensaal mit Kartenregal,
   Globus und Atlanten. Kein Kachelmuster, kein Text im Bild. */
body.jupi.wk_body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  color: #efe2c4;
  background-color: var(--wk-gruen-tief);
  background-image: url("assets/kulisse.svg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: var(--wk-sans);
}

/* Der Plattform-Container wird zur Flex-Spalte: Kopf ganz oben, Fuß ganz
   unten, das Spiel darf in der Mitte wachsen. */
body.jupi.wk_body .jupi_container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: none;
  margin: 0;
  background: transparent;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "bypass" "header" "main" "footer";
}

body.jupi.wk_body .jupi_container > .jupi_main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: .9rem .9rem 1rem;
  background: transparent;
  border-radius: 0;
  box-sizing: border-box;
}

body.jupi.wk_body .bypass a {
  color: var(--wk-messing-hell);
}

/* ---------- 3. Kopfzeile: Messing auf Leder (3.13.2) ---------- */
.wk_header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  padding: .45rem .9rem .5rem;
  color: #f3e7c7;
  background-color: var(--wk-gruen);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .22)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 72px),
    linear-gradient(180deg, #1b4c40 0%, #123a30 50%, #0a241e 100%);
  border-bottom: 3px solid var(--wk-messing);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 236, 190, .18);
  box-sizing: border-box;
}

.wk_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .55rem;
  min-width: 0;
}

.wk_brand img,
.wk_brand_icon {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: contain;
  aspect-ratio: 1;
  box-shadow: 0 0 0 2px #0a241e, 0 0 0 3px rgba(200, 164, 90, .8), 0 3px 8px rgba(0, 0, 0, .45);
}

.wk_brand h1 {
  margin: 0;
  color: #f8edcf;
  font-family: var(--wk-serif);
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .025em;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}

.wk_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 40px;
  padding: .4rem .8rem;
  border: 1px solid #8f7440;
  border-radius: .35rem;
  color: var(--wk-tinte);
  background: linear-gradient(180deg, #fbf4e0, #e8d6b0);
  box-shadow: inset 0 1px 0 #fffaf0, 0 2px 0 #6b5222;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-sizing: border-box;
  transition: background .12s, transform .08s;
}
.wk_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #fff8e8, #f0dcae);
  transform: translateY(-1px);
}

.wk_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.wk_header #jupi_sprachen_wahl,
.wk_header .jupi_sprachen_wahl {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.wk_header .jupi_sprachen_icon {
  font-size: .95rem;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .45));
}
.wk_header .jupi_sprachen_select {
  min-height: 40px;
  max-width: 14rem;
  padding: .3rem .55rem;
  border: 1px solid rgba(200, 164, 90, .65);
  border-radius: .35rem;
  color: #f3e7c7;
  background: rgba(6, 22, 18, .58);
  font-size: .82rem;
  font-weight: 600;
  box-sizing: border-box;
  cursor: pointer;
}
.wk_header .jupi_sprachen_select:hover {
  background: rgba(10, 34, 28, .8);
}
.wk_header .jupi_sprachen_select option {
  color: var(--wk-tinte);
  background: #f6ead0;
}
.wk_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  padding: 0;
  border: 1.5px solid #8f7440;
  background: linear-gradient(180deg, #0a241e, #123a30);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
  box-sizing: border-box;
}
.wk_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f6e4b0 0%, #c8a45a 55%, #8a6a24 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .wk_header .jts_thumb {
  left: calc(100% - 36px);
  background: radial-gradient(circle at 34% 30%, #e8eef3 0%, #aab7c2 55%, #6d7a86 100%);
}
.wk_header .jts_sun { left: 9px; }
.wk_header .jts_moon { right: 9px; }

/* ---------- 4. Spieltisch und Instrumentenleiste ---------- */
#welt-board {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .8rem;
  background-color: #0b2721;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 225, 160, .08), transparent 55%),
    repeating-linear-gradient(35deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #10352c 0%, #0a241e 58%, #081f1a 100%);
  border: 1px solid rgba(200, 164, 90, .36);
  border-radius: 1.1rem;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 236, 190, .12),
    inset 0 0 60px rgba(0, 0, 0, .25);
  box-sizing: border-box;
}

.board-hud {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  padding: .4rem .5rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(0, 0, 0, .18)), var(--wk-gruen);
  border: 1px solid rgba(200, 164, 90, .38);
  border-radius: .5rem;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .1), 0 2px 8px rgba(0, 0, 0, .3);
  box-sizing: border-box;
}

.hud-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42px;
  min-width: 0;
  padding: .2rem .55rem;
  background: linear-gradient(180deg, #f8efd9, #e6d3aa);
  border: 1px solid #8f7440;
  border-radius: .3rem;
  box-shadow: inset 0 1px 0 #fffaf0, 0 2px 0 #6b5222;
  box-sizing: border-box;
}
.hud-stat label {
  display: block;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7a5a24;
}
.hud-stat span {
  color: #17362c;
  font-family: var(--wk-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.hud-stat.money span {
  color: var(--wk-rot);
}
.hud-stat select {
  min-height: 40px;
  margin-top: .1rem;
  padding: .15rem .3rem;
  border: 1px solid #b08a4a;
  border-radius: .25rem;
  color: var(--wk-tinte);
  background: var(--wk-papier-hell);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  box-sizing: border-box;
  cursor: pointer;
}

.hud-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin-left: auto;
}
.hud-btns button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  padding: .3rem .65rem;
  border: 1px solid #8f7440;
  border-radius: .35rem;
  color: #f3e7c7;
  background: linear-gradient(180deg, #164237, #0d2b24);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .18), 0 2px 0 #061713;
  font: inherit;
  font-size: .85rem;
  font-weight: 800;
  line-height: 1.3;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .12s, transform .08s, box-shadow .08s;
}
.hud-btns button:hover {
  background: linear-gradient(180deg, #1d5142, #123a30);
  transform: translateY(-1px);
}
.hud-btns button:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4);
}
.hud-btns #welt-btn-again {
  padding-inline: .8rem;
  border-color: #7d6128;
  color: #1a2f27;
  background: linear-gradient(180deg, #f0d79b, #c8a45a 55%, #a9853f);
  box-shadow: inset 0 1px 0 #fff3cf, 0 2px 0 #6b5222;
}
.hud-btns #welt-btn-again:hover {
  background: linear-gradient(180deg, #f7e5b7, #d6b36a 55%, #b08f48);
}

/* ---------- 5. Titelkartusche (Frage) ---------- */
.welt-question-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .55rem .95rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, #fbf3df, #ecdcba);
  border: 1px solid var(--wk-papier-kante);
  border-radius: .35rem;
  box-shadow: 0 3px 0 rgba(90, 64, 24, .25), inset 0 0 0 1px rgba(255, 255, 255, .35);
  box-sizing: border-box;
}
.welt-question-bar::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(143, 116, 64, .55);
  border-radius: 2px;
  pointer-events: none;
}
.wk_kartusche_rose {
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .4));
}
.wk_kartusche_rose svg {
  display: block;
  width: 100%;
  height: 100%;
}
.welt-question-text {
  min-width: 0;
}
.welt-question {
  margin: 0;
  color: #17362c;
  font-family: var(--wk-serif);
  font-size: clamp(1.12rem, 2.1vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
}
.welt-question-sub {
  margin: .2rem 0 0;
  color: var(--wk-tinte-hell);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- 6. Atlasblatt (Karte) ---------- */
.welt-map {
  position: relative;
  /* Auf flachen Fenstern wird das Kartenblatt so breit gekappt, dass HUD,
     Frage, Karte und Meldung zusammen ohne Scrollen sichtbar bleiben.
     Auf hohen Fenstern und am Handy bleibt es bei 100 %. */
  width: min(100%, max(280px, calc((100vh - 378px) * 1.965 + 58px)));
  width: min(100%, max(280px, calc((100dvh - 378px) * 1.965 + 58px)));
  margin-inline: auto;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 42%),
    var(--wk-papier);
  border: 10px solid var(--wk-gruen);
  border-left-width: 20px;
  border-radius: 4px 16px 16px 4px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .5),
    0 0 0 1px var(--wk-messing-tief),
    inset 0 0 0 1px rgba(255, 255, 255, .3);
  box-sizing: border-box;
}
.welt-map::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(143, 116, 64, .6);
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
}
.welt-map::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 1px;
  background: radial-gradient(120% 100% at 50% 45%, rgba(255, 250, 235, 0) 55%, rgba(80, 60, 20, .14) 100%);
  pointer-events: none;
  z-index: 3;
}
#welt-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--wk-see);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(143, 116, 64, .75);
  cursor: grab;
  touch-action: none;
}
#welt-svg.is-dragging {
  cursor: grabbing;
}
.welt-sea {
  fill: url(#wk-see-hell);
}
.welt-gitter line {
  stroke: #4d7a74;
  stroke-width: 1;
  opacity: .18;
}
.welt-gitter .welt-aequator {
  stroke: #7d6128;
  stroke-dasharray: 6 5;
  opacity: .32;
}
.welt-country {
  fill: var(--wk-land);
  stroke: #8f7440;
  stroke-width: .7;
  stroke-linejoin: round;
  fill-rule: evenodd;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .12s, stroke .12s;
}
.welt-country:hover {
  fill: #f4d494;
  stroke: #7a5a24;
}
/* Nicht spielbares Territorium (z. B. Westsahara): eigene neutrale Fläche,
   gestrichelte Grenze, kein Quiz-Ziel. */
.welt-territory {
  fill: #dfcda4;
  stroke: #8f7440;
  stroke-width: 1.1;
  stroke-dasharray: 4 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: help;
  transition: fill .12s;
}
.welt-territory:hover {
  fill: #d6c196;
}
.welt-dot {
  fill: #8a3a2a;
  stroke: #f8efd9;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .12s;
}
.welt-dot:hover {
  fill: var(--wk-messing);
}
.welt-hit {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  pointer-events: all;
}
.welt-hit:hover {
  stroke: #7d6128;
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.welt-hit.is-right,
.welt-hit.is-wrong {
  fill: transparent;
  stroke: none;
}
.welt-country.is-right,
.welt-dot.is-right {
  fill: #6f9e5d;
  stroke: #2e5a2a;
}
.welt-country.is-wrong,
.welt-dot.is-wrong {
  fill: #c0513f;
  stroke: #7a2418;
}

/* Kartenschmuck im Atlasstil */
.wk-rose-ring {
  fill: none;
  stroke: #8f7440;
  stroke-width: 1;
  opacity: .5;
}
.wk-rose-strahlen line {
  stroke: #8f7440;
  stroke-width: .8;
  opacity: .35;
}
.wk-rose-stern {
  fill: rgba(200, 164, 90, .18);
  stroke: #8f7440;
  stroke-width: 1.2;
}
.wk-rose-hell {
  fill: rgba(200, 164, 90, .4);
  stroke: none;
}
.wk-rose-lilie {
  fill: rgba(158, 58, 44, .6);
  stroke: #7a2418;
  stroke-width: .7;
}
.wk-rose-nabe {
  fill: var(--wk-papier);
  stroke: #8f7440;
  stroke-width: 1.1;
}

/* Zoom: Messingknöpfe am Kartenrand */
.welt-zoom {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.welt-zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #8f7440;
  border-radius: 50%;
  color: #f3e7c7;
  background: radial-gradient(circle at 35% 30%, #245a4a, #0d2b24 72%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), 0 3px 8px rgba(0, 0, 0, .45);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .12s, color .12s, transform .08s;
}
.welt-zoom button:hover {
  color: #1a2f27;
  background: radial-gradient(circle at 35% 30%, #f4dfa8, #c8a45a 72%);
  transform: scale(1.05);
}
.welt-zoom button:active {
  transform: translateY(1px);
}

/* Messing-Ecken auf dem Passepartout */
.wk_karten_ecken {
  position: absolute;
  inset: 6px;
  z-index: 6;
  pointer-events: none;
}
.wk_karten_ecken i {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 0 solid var(--wk-messing);
  opacity: .7;
}
.wk_karten_ecken i:nth-child(1) {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-left-width: 2px;
}
.wk_karten_ecken i:nth-child(2) {
  top: 0;
  right: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}
.wk_karten_ecken i:nth-child(3) {
  bottom: 0;
  left: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}
.wk_karten_ecken i:nth-child(4) {
  right: 0;
  bottom: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

/* Tooltip für Kleinstaaten */
.welt-tip {
  position: absolute;
  z-index: 9;
  padding: .2rem .6rem;
  border: 1px solid #8f7440;
  border-radius: .3rem;
  color: #f8efd9;
  background: #0d2b24;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity .1s;
}
.welt-tip.is-visible {
  opacity: 1;
}

/* ---------- 7. Meldungszeile ---------- */
.welt-toast {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 38px;
  padding: .45rem .75rem;
  border: 1px solid rgba(200, 164, 90, .35);
  border-left: 3px solid var(--wk-messing);
  border-radius: .3rem;
  color: #efe2c4;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .14)), var(--wk-gruen);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .08);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
  box-sizing: border-box;
}
.welt-toast::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--wk-messing);
  transform: rotate(45deg);
}

/* ---------- 8. Dialoge und Startmenü ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(20, 60, 50, .35), transparent 70%),
    rgba(4, 14, 11, .78);
  box-sizing: border-box;
}
.modal[hidden] {
  display: none !important;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  padding: 1.3rem 1.5rem 1.2rem;
  overflow-y: auto;
  color: var(--wk-tinte);
  background: linear-gradient(180deg, #fbf3df, #edddbb);
  border: 1px solid var(--wk-papier-kante);
  border-radius: 4px;
  box-shadow:
    0 0 0 7px var(--wk-gruen),
    0 0 0 8px var(--wk-messing),
    0 30px 70px rgba(0, 0, 0, .65);
  scrollbar-color: #8f7440 #e8d7b2;
  box-sizing: border-box;
}
.modal-card.wide {
  max-width: 680px;
}
.modal-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(143, 116, 64, .45);
  border-radius: 2px;
  pointer-events: none;
}
.modal-card h2 {
  margin: 0 0 .55rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(143, 116, 64, .5);
  color: #17362c;
  font-family: var(--wk-serif);
  font-size: 1.5rem;
  line-height: 1.2;
}
/* Im Hilfe- und Info-Fenster sitzt oben rechts der runde Schließen-Knopf -
   die Überschrift bekommt dort Luft, damit nichts unter dem Knopf liegt. */
.modal-card.wide h2 {
  padding-right: 3rem;
}
.modal-card h3 {
  margin: .9rem 0 .25rem;
  color: #2f5a42;
  font-family: var(--wk-serif);
  font-size: 1.02rem;
}
.modal-card p {
  margin: .45rem 0;
  color: #2b3f34;
  line-height: 1.55;
}
.modal-card .hint {
  margin: .6rem 0;
  padding: .45rem .65rem;
  border-left: 3px solid var(--wk-papier-kante);
  border-radius: .2rem;
  color: var(--wk-tinte-hell);
  background: rgba(201, 164, 90, .16);
  font-size: .9rem;
  line-height: 1.45;
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .9rem;
}
.modal-close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid #7d6128;
  border-radius: 50%;
  color: #17362c;
  background: radial-gradient(circle at 35% 30%, #f2dfae, #c8a45a 60%, #a9853f);
  box-shadow: inset 0 1px 0 #fff3cf, 0 2px 4px rgba(0, 0, 0, .3);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
}
.modal-close:hover {
  background: radial-gradient(circle at 35% 30%, #fff0c8, #e0bd72 60%, #b8944a);
}
.help-body ol {
  margin: .5rem 0;
  padding-left: 1.4rem;
}
.help-body li {
  margin-bottom: .5rem;
  color: #2b3f34;
  line-height: 1.5;
}
.help-body li::marker {
  color: #8f7440;
  font-weight: 700;
}
.wk_modal_close_btn {
  min-width: 120px;
  min-height: 44px;
  margin-left: auto;
  padding: .4rem 1rem;
  border: 1px solid #8f7440;
  border-radius: .35rem;
  color: #f3e7c7;
  background: linear-gradient(180deg, #164237, #0d2b24);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .18), 0 2px 0 #061713;
  font: inherit;
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
  box-sizing: border-box;
}
.wk_modal_close_btn:hover {
  background: linear-gradient(180deg, #1d5142, #123a30);
}

/* Startmenü: der Deckel des Atlas (dunkles Leder mit Goldprägung) */
.menu-card {
  max-width: 500px;
  color: #f3e7c7;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 225, 163, .16), transparent 55%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #184b3f 0%, #0d2b24 58%, #081f1a 100%);
  border: 2px solid var(--wk-messing);
  box-shadow:
    0 0 0 7px #081f1a,
    0 0 0 9px var(--wk-messing),
    0 30px 70px rgba(0, 0, 0, .7);
}
.menu-card::before {
  border-color: rgba(239, 215, 155, .35);
}
.wk_cover_zeichen {
  width: 58px;
  height: 58px;
  margin: .05rem auto .55rem;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}
.wk_cover_zeichen svg {
  display: block;
  width: 100%;
  height: 100%;
}
.menu-card h2 {
  border-bottom-color: rgba(200, 164, 90, .55);
  color: #f4dca3;
  font-size: 1.72rem;
  letter-spacing: .025em;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}
.menu-card p {
  color: #e7dbc0;
  text-align: center;
  font-size: .92rem;
}
.wk_menu_field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: .8rem 0;
}
.wk_menu_field label {
  color: #d8c08a;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wk_menu_field select {
  min-height: 42px;
  padding: .4rem .6rem;
  border: 1px solid var(--wk-messing);
  border-radius: .3rem;
  color: var(--wk-tinte);
  background: #f7edd8;
  box-shadow: inset 0 1px 0 #fffaf0;
  font: inherit;
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}
.menu-primary-action {
  margin: .8rem 0 .7rem;
}
.wk_menu_start_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: .5rem 1rem;
  border: 1px solid #7d6128;
  border-radius: .35rem;
  color: #1a2f27;
  background: linear-gradient(180deg, #f0d79b, #c8a45a 55%, #a9853f);
  box-shadow: inset 0 1px 0 #fff3cf, 0 3px 0 #6b5222, 0 6px 18px rgba(0, 0, 0, .35);
  font: inherit;
  font-size: 1.08rem;
  font-weight: 800;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .12s, transform .08s;
}
.wk_menu_start_btn:hover {
  background: linear-gradient(180deg, #f7e5b7, #d6b36a 55%, #b08f48);
  transform: translateY(-1px);
}
.wk_menu_btn_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin: .5rem 0;
}
.wk_menu_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .4rem .55rem;
  border: 1px solid rgba(200, 164, 90, .55);
  border-radius: .35rem;
  color: #f3e7c7;
  background: linear-gradient(180deg, #164237, #0d2b24);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .12s, border-color .12s;
}
.wk_menu_btn:hover {
  border-color: var(--wk-messing);
  background: linear-gradient(180deg, #1e5142, #123a30);
}
.wk_btn_ico {
  font-size: 1rem;
  line-height: 1;
}
.wk_menu_stats {
  margin: .7rem 0 .35rem;
  padding: .4rem .6rem;
  border-top: 1px solid rgba(200, 164, 90, .35);
  border-bottom: 1px solid rgba(200, 164, 90, .35);
  color: #d8c9a8;
  background: rgba(4, 16, 12, .35);
  font-size: .9rem;
  text-align: center;
}
.wk_menu_stats strong {
  color: #f4dca3;
  font-family: var(--wk-serif);
  font-size: 1.05rem;
}
.menu-card .hint {
  border-left-color: rgba(200, 164, 90, .6);
  color: #cbbf9f;
  background: rgba(201, 164, 90, .1);
  font-size: .83rem;
  text-align: left;
}

/* ---------- 9. Fuß am Dokumentende ---------- */
body.jupi.wk_body .jupi_footer {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: .8rem 1rem;
  border: 0;
  border-top: 1px solid rgba(200, 164, 90, .3);
  border-radius: 0;
  color: #cbbf9f;
  background: rgba(5, 18, 14, .55);
}
body.jupi.wk_body .jupi_footer_text {
  color: #cbbf9f;
  font-size: .78rem;
  line-height: 1.55;
}
body.jupi.wk_body .jupi_footer_text a {
  color: var(--wk-messing-hell);
  font-weight: 700;
  text-decoration: none;
}
body.jupi.wk_body .jupi_footer_text a:hover {
  text-decoration: underline;
}

/* ---------- 10. Dark Mode: derselbe Saal bei Nacht ---------- */
html[data-theme="dark"] body.jupi.wk_body {
  background-color: #04120f;
  background-image:
    radial-gradient(60% 45% at 50% -4%, rgba(255, 198, 120, .16), rgba(255, 198, 120, 0) 62%),
    linear-gradient(rgba(3, 11, 9, .74), rgba(3, 11, 9, .88)),
    url("assets/kulisse.svg");
  background-position: center top, center top, center top;
  background-size: cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed;
}
html[data-theme="dark"] .wk_header {
  background-image:
    linear-gradient(180deg, rgba(255, 225, 170, .06), rgba(0, 0, 0, .18) 46%, rgba(0, 0, 0, .38)),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 72px),
    linear-gradient(180deg, #123a30 0%, #0a241e 52%, #061713 100%);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 236, 190, .1);
}
html[data-theme="dark"] #welt-board {
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 225, 160, .05), transparent 55%),
    repeating-linear-gradient(35deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #0a241e 0%, #071d18 58%, #051713 100%);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 236, 190, .08);
}
html[data-theme="dark"] .hud-stat {
  background: linear-gradient(180deg, #efe2c2, #dcc79b);
}
html[data-theme="dark"] .welt-sea {
  fill: url(#wk-see-dunkel);
}
html[data-theme="dark"] .welt-country {
  fill: #e3d1a7;
}
html[data-theme="dark"] .welt-country:hover {
  fill: #f0cd8e;
}
html[data-theme="dark"] .welt-territory {
  fill: #d9c69c;
}
html[data-theme="dark"] .welt-territory:hover {
  fill: #e5c98d;
}
html[data-theme="dark"] .welt-map {
  border-color: #071d18;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .65),
    0 0 0 1px var(--wk-messing-tief),
    inset 0 0 0 1px rgba(255, 255, 255, .24);
}
html[data-theme="dark"] .modal-card {
  background: linear-gradient(180deg, #f4ead1, #e7d6b0);
}
html[data-theme="dark"] .menu-card {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255, 225, 163, .13), transparent 55%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .09) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #123a30 0%, #09251f 58%, #061713 100%);
}
html[data-theme="dark"] .hud-btns button {
  background: linear-gradient(180deg, #123a30, #08211b);
}
html[data-theme="dark"] .hud-btns #welt-btn-again {
  background: linear-gradient(180deg, #f0d79b, #c8a45a 55%, #a9853f);
}
/* In der Nacht bleiben Zurück-Etikett und Schalter dasselbe Material -
   die Plattform-Regeln für .jupi_btn/.jupi_nav_back/.jupi_theme_switch
   würden sonst Orange und Grau darüberlegen. */
html[data-theme="dark"] .wk_header .jupi_nav_back {
  border-color: #8f7440;
  color: var(--wk-tinte);
  background: linear-gradient(180deg, #fbf4e0, #e8d6b0);
  box-shadow: inset 0 1px 0 #fffaf0, 0 2px 0 #6b5222;
}
html[data-theme="dark"] .wk_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #fff8e8, #f0dcae);
}
html[data-theme="dark"] .wk_header .jupi_theme_switch {
  border-color: #8f7440;
  background: linear-gradient(180deg, #0a241e, #123a30);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .menu-card .wk_menu_start_btn {
  border-color: #7d6128;
  color: #1a2f27;
  background: linear-gradient(180deg, #f0d79b, #c8a45a 55%, #a9853f);
  box-shadow: inset 0 1px 0 #fff3cf, 0 3px 0 #6b5222, 0 6px 18px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .menu-card .wk_menu_start_btn:hover {
  background: linear-gradient(180deg, #f7e5b7, #d6b36a 55%, #b08f48);
}
html[data-theme="dark"] .menu-card .wk_menu_btn {
  border-color: rgba(200, 164, 90, .55);
  color: #f3e7c7;
  background: linear-gradient(180deg, #164237, #0d2b24);
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .12);
}
html[data-theme="dark"] .menu-card .wk_menu_btn:hover {
  border-color: var(--wk-messing);
  background: linear-gradient(180deg, #1e5142, #123a30);
}
html[data-theme="dark"] .wk_modal_close_btn {
  border-color: #8f7440;
  color: #f3e7c7;
  background: linear-gradient(180deg, #164237, #0d2b24);
}
html[data-theme="dark"] .wk_modal_close_btn:hover {
  background: linear-gradient(180deg, #1d5142, #123a30);
}
html[data-theme="dark"] .welt-zoom button {
  background: radial-gradient(circle at 35% 30%, #1d5142, #08211b 72%);
}
html[data-theme="dark"] .welt-zoom button:hover {
  background: radial-gradient(circle at 35% 30%, #f4dfa8, #c8a45a 72%);
}
html[data-theme="dark"] body.jupi.wk_body .jupi_footer {
  background: rgba(3, 11, 9, .7);
}
html[data-theme="dark"] body.jupi.wk_body .jupi_footer_text {
  color: #b9ac8c;
}

/* ---------- 11. Responsive ---------- */
@media (max-width: 1060px) {
  .wk_header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem .8rem;
    padding: .45rem .75rem .5rem;
  }
  .wk_brand {
    grid-row: 1;
    grid-column: 1 / -1;
  }
  .wk_header .jupi_nav_back {
    grid-row: 2;
    grid-column: 1;
  }
  .wk_header .jupi_werkzeuge {
    grid-row: 2;
    grid-column: 2;
  }
  .wk_header .jupi_sprachen_select {
    max-width: 12rem;
  }
  /* Bei zweizeiliger Leiste ist der Kopf höher - das Kartenblatt bekommt
     ein paar Pixel weniger, damit die Meldung noch ins Fenster passt. */
  .welt-map {
    width: min(100%, max(280px, calc((100vh - 391px) * 1.965 + 58px)));
    width: min(100%, max(280px, calc((100dvh - 391px) * 1.965 + 58px)));
  }
}

@media (max-width: 760px) {
  body.jupi.wk_body .jupi_container > .jupi_main {
    padding: .7rem .65rem .9rem;
  }
  #welt-board {
    gap: .5rem;
    padding: .6rem;
    border-radius: .9rem;
  }
  .wk_brand img,
  .wk_brand_icon {
    width: 36px;
    height: 36px;
  }
  .wk_brand h1 {
    font-size: 1.12rem;
  }
  .hud-stat:first-child {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
  }
  .hud-stat:first-child select {
    flex: 1 1 auto;
    margin-top: 0;
  }
  .hud-stat:not(:first-child) {
    flex: 1 1 calc(33% - .35rem);
  }
  .hud-btns {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .welt-question-bar {
    gap: .6rem;
    padding: .5rem .75rem;
  }
  .wk_kartusche_rose {
    width: 36px;
    height: 36px;
  }
  .welt-question {
    font-size: 1.1rem;
  }
  .welt-question-sub {
    font-size: .84rem;
  }
  .welt-map {
    padding: 10px;
    border-width: 8px;
    border-left-width: 14px;
  }
  .welt-map::after {
    inset: 10px;
  }
  .welt-zoom {
    top: .8rem;
    right: .8rem;
  }
  .welt-zoom button {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
  }
  .welt-toast {
    min-height: 36px;
    padding: .4rem .6rem;
    font-size: .82rem;
  }
  .modal-card {
    padding: 1.1rem 1.1rem 1rem;
  }
  .modal-card h2 {
    font-size: 1.32rem;
  }
}

@media (max-width: 430px) {
  .wk_header {
    gap: .35rem .5rem;
    padding: .4rem .55rem .45rem;
  }
  .wk_brand h1 {
    font-size: 1.02rem;
  }
  .wk_header .jupi_nav_back {
    padding: .35rem .6rem;
    font-size: .8rem;
  }
  .wk_header .jupi_sprachen_select {
    max-width: 7.6rem;
    font-size: .76rem;
  }
  .hud-btns button {
    min-width: 42px;
    padding-inline: .5rem;
  }
  .welt-question-bar {
    align-items: flex-start;
  }
  .wk_kartusche_rose {
    width: 30px;
    height: 30px;
    margin-top: .1rem;
  }
  .welt-question {
    font-size: 1.02rem;
  }
  .welt-question-sub {
    font-size: .8rem;
  }
  .welt-map {
    padding: 8px;
    border-width: 7px;
    border-left-width: 12px;
    border-radius: 3px 12px 12px 3px;
  }
  .welt-map::after {
    inset: 8px;
  }
  .welt-map::before {
    inset: 3px;
  }
  .wk_karten_ecken {
    inset: 4px;
  }
  .welt-zoom {
    top: .55rem;
    right: .55rem;
    gap: .3rem;
  }
  .welt-zoom button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 1.15rem;
  }
  .welt-tip {
    font-size: .76rem;
  }
  .modal {
    padding: .6rem;
  }
  .menu-card h2 {
    font-size: 1.42rem;
  }
  .wk_cover_zeichen {
    width: 46px;
    height: 46px;
    margin-bottom: .35rem;
  }
  .menu-card p {
    font-size: .85rem;
  }
}

@media (max-width: 360px) {
  .wk_menu_btn_grid {
    grid-template-columns: 1fr;
  }
  .wk_header .jupi_nav_back {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: center;
  }
  .wk_header .jupi_werkzeuge {
    grid-row: 3;
    grid-column: 1 / -1;
    justify-content: center;
  }
  .hud-stat:not(:first-child) {
    flex: 1 1 calc(50% - .35rem);
  }
}

/* ---------- 12. Fokus, Ziele, reduzierte Bewegung ---------- */
.wk_body :focus-visible {
  outline: 3px solid var(--wk-messing-hell);
  outline-offset: 2px;
}
.modal-card :focus-visible,
.welt-question-bar :focus-visible,
.hud-stat :focus-visible {
  outline-color: var(--wk-messing-tief);
}
.wk_header .jupi_nav_back:focus-visible,
.wk_header .jupi_theme_switch:focus-visible,
.wk_header .jupi_sprachen_select:focus-visible {
  outline-color: #f0d79b;
}

@media (prefers-reduced-motion: reduce) {
  .wk_body *,
  .wk_body *::before,
  .wk_body *::after {
    transition: none !important;
    animation: none !important;
  }
}