/* satz-dungeon/styles.css
   ============================================================================
   Das Aussehen von Satz-Dungeon.

   Aufbau (AGENTS.md 3.13):
   - GEWÖLBE-THEMA (25.10.2026): Die JUPI-Leiste ist die Konsole des Kerkers
     (behauener Stein, Fackelschein, Messingbeschlag, goldene Serifenschrift),
     der Seitenhintergrund die gemauerte Gewölbewand dahinter. Dasselbe Muster
     wie Neumark 1400 (Holz/Pergament) und Schatzkarte (Piraten-Konsole): die
     Plattform-Leiste bleibt vollständig (3.13.2), trägt aber die Optik des
     Spiels. Beides folgt dem Theme - hell = Fackelgang, dunkel = tiefes
     Gewölbe bei Nacht.
   - Drei-Zonen-Kopfzeile: links "Alle Spiele", mittig Logo + Name + Stufe,
     rechts Sprachwahl und Dark-Mode-Pille (74 x 40 px)
   - Startmenü als Titelbildschirm auf der Bühne (Typ 1/4)
   - Kartenfarben: Blau Subjekt, Grün Verb, Braun Ergänzung, Violett Ziel,
     Rot Verstärkung, Grau Grammatik
   - Alle Bedienziele mindestens 40 px hoch, Schriften groß genug für Schüler
   - KEINE Infoleiste unter dem Spiel (Goldene Negativ-Regel 3.13.4)
   ========================================================================== */

/* ------------------------------------------------------------ Grunddinge */
.sd_main {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 1rem;
}

/* ============================================================================
   1. GEWÖLBE-THEMA: Farben, Schrift, Textur
   ----------------------------------------------------------------------------
   Alle Werte des Themas stehen als --sd-* hier. Die Bildfläche (Canvas) malt
   ihre Steine selbst (js/grafik.js); diese Werte sind die Fortsetzung davon
   in der Oberfläche: blaugrauer Stein, warmes Fackellicht, Messing, Gold.
   ========================================================================== */
:root {
  --sd-serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, "Times New Roman", serif;
  --sd-gold: #ffd678;
  --sd-messing: #c9983a;
  --sd-messing-hell: #e8c670;
  --sd-messing-tief: #6b4c15;
  /* Stein des Gewölbes - hell = Fackelgang */
  --sd-stein-1: #4e5568;
  --sd-stein-2: #3a4052;
  --sd-stein-3: #2b3040;
  --sd-stein-4: #1d212d;
  --sd-grund: #171a23;
  --sd-fackel: rgba(255, 168, 74, .24);
  --sd-arkan: rgba(148, 112, 232, .16);
  /* DIE STEINMAUER: kachelbares Bild, 480 x 480 px, sechs Reihen
     unregelmäßiger Quader mit Fugen, Sprüngen und Moos (Generator
     .zcode/satz-dungeon-kulisse.cjs). An der Kachelnaht laufen die Fugen
     nahtlos weiter - die Mauer ist eine echte Wand, kein Raster. */
  --sd-wand: url("img/wand.svg");
  /* Schleier über der Mauer: hell = nur ein Hauch Tiefe,
     dunkel = tiefes Gewölbe bei Nacht (violetter Schleier). */
  --sd-wand-schleier: rgba(16, 12, 28, .14);
  /* Getönte Schattenlage der Leiste: halb durchsichtig, liegt ÜBER der
     Mauer - dadurch wird die Konsole zum dunkleren Streifen derselben Wand. */
  --sd-leiste-tint:
    linear-gradient(180deg, rgba(78, 85, 104, .38) 0%, rgba(23, 26, 35, .62) 100%);
  /* Feines Stein-Korn gegen die flachen Farbflächen (data-URI, kein Bild) */
  --sd-korn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0.80  0 0 0 0 0.84  0 0 0 0 0.95  0 0 0 0.09 0'/></filter><rect width='200' height='200' filter='url(%23k)'/></svg>");
  /* Das Bild der JUPI-Leiste als EIN Wert (Mauer, Tönung, Fackelschein).
     Es steht nur einmal da und wird unten zweimal benutzt: einmal normal,
     einmal für den Dunkelmodus - dort ist die Plattform-Regel
     `html[data-theme="dark"] .jupi_header` spezifischer als `.sd_header`
     und würde sonst ihren eigenen Verlauf darübermalen. Die Farben darin
     (--sd-leiste-tint, --sd-fackel) liefert das Theme. */
  --sd-leiste-bild:
    var(--sd-korn),
    radial-gradient(36% 130% at 6% 0%, var(--sd-fackel), transparent 70%),
    radial-gradient(36% 130% at 94% 0%, var(--sd-fackel), transparent 70%),
    var(--sd-leiste-tint),
    var(--sd-wand);
  --sd-leiste-groessen: auto, auto, auto, auto, 480px 480px;
  --sd-leiste-lagen: 0 0, 0 0, 0 0, 0 0, 0 0;
  --sd-leiste-wdh: repeat, no-repeat, no-repeat, no-repeat, repeat;
}
/* dunkel = tiefes Gewölbe bei Nacht: kühler, violetter, weniger Fackellicht */
html[data-theme="dark"] {
  --sd-stein-1: #3b3552;
  --sd-stein-2: #2c2740;
  --sd-stein-3: #201b30;
  --sd-stein-4: #161221;
  --sd-grund: #0e0c16;
  --sd-fackel: rgba(255, 150, 70, .26);
  --sd-arkan: rgba(158, 118, 250, .30);
  --sd-wand-schleier: rgba(10, 7, 22, .58);
  --sd-leiste-tint:
    linear-gradient(180deg, rgba(59, 53, 82, .42) 0%, rgba(14, 12, 22, .68) 100%);
}

/* ============================================================================
   2. DIE STEINMAUER HINTER DER SEITE
   ----------------------------------------------------------------------------
   body.jupi::before liegt fest im Fenster (position:fixed) hinter allen
   Inhalten: die kachelbare Steinmauer (img/wand.svg), zwei Fackeln oben,
   arkanes Leuchten aus der Tiefe und ein Schleier, der die Wand nachts
   violett abdunkelt. Die Wand steht still, die Seite scrollt darüber -
   wie eine echte Wand. html traegt die Grundfarbe, damit der negative
   z-index sauber greift.
   ========================================================================== */
html { background-color: var(--sd-grund); }
body.jupi,
html[data-theme="dark"] body.jupi {
  background: transparent;
  color: #ece6f6;
}
body.jupi::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Stein-Korn */
    var(--sd-korn),
    /* zwei Fackeln oben links und rechts */
    radial-gradient(46% 40% at 4% 0%, var(--sd-fackel), transparent 72%),
    radial-gradient(46% 40% at 96% 0%, var(--sd-fackel), transparent 72%),
    /* arkanes Leuchten aus der Tiefe */
    radial-gradient(70% 55% at 50% 108%, var(--sd-arkan), transparent 72%),
    /* Grundlicht: oben heller, nach unten dunkler */
    radial-gradient(120% 90% at 50% -10%, rgba(255, 226, 180, .12), transparent 60%),
    /* die Randaen verlaufen in die Dunkelheit des Verlies */
    radial-gradient(88% 72% at 50% 46%, transparent 42%, rgba(0, 0, 0, .34) 100%),
    /* Nachtschleier (dunkel = tiefes Gewölbe) */
    linear-gradient(var(--sd-wand-schleier), var(--sd-wand-schleier)),
    /* nach unten geht es tiefer in den Kerker */
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .42) 100%),
    /* DIE MAUER (kachelbar, 480 x 480 px) */
    var(--sd-wand),
    var(--sd-grund);
  background-size: auto, auto, auto, auto, auto, auto, auto, auto, 480px 480px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
                     no-repeat, no-repeat, repeat;
}
/* Die Spielseite ist durchsichtig - die Wand scheint zwischen den Panels durch.
   (.jupi_main hatte in der Plattform-CSS eine deckende Fläche.) */
.jupi_container,
.jupi_container > .jupi_main,
html[data-theme="dark"] .jupi_container > .jupi_main {
  background: transparent;
}
/* Die Plattform-CSS streckt die vier Container-Zeilen (align-content:
   normal = stretch). Auf dem Startbildschirm ist .jupi_main kurz, also
   entstand über der Leiste eine leere 114-px-Zeile und die Leiste wurde
   auseinandergezogen - gemessen bei 390 px. Die Zeilen richten sich nach
   ihrem Inhalt; die Hauptzeile nimmt den Rest, damit der Fuß unten sitzt. */
.jupi_container {
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
}

/* ============================================================================
   3. DIE JUPI-LEISTE: KONSOLE IM GEWÖLBE
   ----------------------------------------------------------------------------
   Behauene Steinblöcke (Fugen als Verläufe), Fackelschein von oben, unten ein
   Messingbalken mit zwei Nieten. Der Titel steht in goldener Serifenschrift
   wie eine eingemeißelte Inschrift; die Werkzeuge sitzen in dunklen
   Steinmulden mit Messingrand.
   ========================================================================== */
/* Der Aufbau der Leiste bleibt bei `.sd_header` (eine Klasse): nur so können
   die Handy-Abfragen weiter unten sie überschreiben. Das Bild der Leiste
   steht in der eigenen Regel direkt darunter. */
.sd_header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  /* Ohne das streckt die Plattform-CSS die beiden Leistenzeilen, sobald der
     Kopfzeilen-Bereich höher wird als ihr Inhalt (align-content: stretch ist
     der Standard) - Marke, Werkzeuge und Messingbalken rutschen dann
     auseinander. Die Zeilen sollen sich nach ihrem Inhalt richten. */
  align-content: center;
  gap: 0.8rem;
  padding: 0.55rem 1rem 0.7rem;
  color: #f4ead6;
  border-bottom: 3px solid #100d08;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 170, .22),
    inset 0 -18px 26px -16px rgba(0, 0, 0, .8),
    0 6px 22px rgba(0, 0, 0, .5);
}
/* Bild der Leiste - im Dunkelmodus noch einmal mit derselben Spezifität wie
   die Plattform-Regel, damit der Gewölbe-Verlauf auch bei Nacht gewinnt. */
.sd_header,
html[data-theme="dark"] .sd_header {
  background-image: var(--sd-leiste-bild);
  background-size: var(--sd-leiste-groessen);
  background-position: var(--sd-leiste-lagen);
  background-repeat: var(--sd-leiste-wdh);
}
/* Messingbalken am unteren Rand */
.sd_header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .45) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, var(--sd-messing-hell) 0%, var(--sd-messing) 48%,
                    var(--sd-messing-tief) 100%);
}
/* zwei Nieten auf dem Balken */
.sd_header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  pointer-events: none;
  background:
    radial-gradient(circle at 14px 50%, #ffeab4 0 1.4px, #8a6318 1.4px 2.6px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 14px) 50%, #ffeab4 0 1.4px, #8a6318 1.4px 2.6px, transparent 2.6px);
}
.sd_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 0.6rem;
  min-width: 0;
}
.sd_brand img {
  border-radius: 12px;
  box-shadow: 0 0 0 2px rgba(201, 152, 58, .5), 0 3px 9px rgba(0, 0, 0, .55);
}
/* Eingemeißelte Inschrift: goldene Serifenschrift mit dunkler Kante */
.sd_brand h1 {
  margin: 0;
  color: #f6dfa6;
  font-family: var(--sd-serif);
  font-variant: small-caps;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .07em;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 2px 0 #0d1018, 0 0 16px rgba(255, 190, 100, .35);
}
/* Stufen-Marke (A1/A2) als Steintäfelchen mit Goldschrift */
.sd_marke {
  background: linear-gradient(180deg, #2f3547, #191d28);
  color: var(--sd-gold);
  border: 2px solid var(--sd-messing-tief);
  border-radius: 9px;
  padding: 0.1rem 0.55rem;
  font-family: var(--sd-serif);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: .1em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, .25), 0 2px 6px rgba(0, 0, 0, .5);
}
/* "Alle Spiele" als Messingplatte */
.sd_header .jupi_nav_back,
html[data-theme="dark"] .sd_header .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  border: 2px solid #4a3410;
  background: linear-gradient(180deg, #e0bb68 0%, var(--sd-messing) 55%, #9a6f1e 100%);
  color: #241804;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .55);
  box-shadow: inset 0 1px 0 rgba(255, 244, 208, .7), 0 2px 6px rgba(0, 0, 0, .5);
}
.sd_header .jupi_nav_back:hover,
html[data-theme="dark"] .sd_header .jupi_nav_back:hover {
  background: linear-gradient(180deg, #f0d089 0%, var(--sd-messing-hell) 55%, #b5842a 100%);
  transform: translateY(-1px);
}
/* rechte Werkzeug-Gruppe: Steinmulden mit Messingrand */
.sd_header .jupi_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sd_header #jupi_sprachen_wahl { display: inline-flex; align-items: center; gap: 0.3rem; }
/* Nur EIN Selektor für die Sprachwahl (kein Dark-Zwilling): die Breite steht
   hier, und die schmalen Fenster (unten) müssen sie überschreiben können -
   ein `html[data-theme="dark"] .sd_header ...` wäre stärker und würde die
   Handy-Breite aushebeln. jupi.css hat für dieses Feld keine Dark-Regel. */
.sd_header .jupi_sprachen_select {
  font-family: inherit;
  background: rgba(9, 11, 18, .62);
  color: #f4e7cc;
  border: 2px solid var(--sd-messing-tief);
  border-radius: 9px;
  max-width: 13rem;
  min-height: 40px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}
.sd_header .jupi_sprachen_select:hover { background: rgba(18, 22, 33, .85); }
.sd_header .jupi_sprachen_select option { background: #1b1f2b; color: #f4e7cc; }
.sd_header .jupi_theme_switch,
html[data-theme="dark"] .sd_header .jupi_theme_switch {
  width: 74px;
  height: 40px;
  min-width: 74px;
  min-height: 40px;
  padding: 0;
  background: rgba(9, 11, 18, .62);
  border: 2px solid var(--sd-messing-tief);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}
.sd_header .jupi_theme_switch:hover,
html[data-theme="dark"] .sd_header .jupi_theme_switch:hover {
  background: rgba(18, 22, 33, .85);
}
.sd_header .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fdf3d8, #d9b26a);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .sd_header .jts_thumb {
  left: calc(100% - 36px);
}
.sd_header .jts_sun { left: 9px; }
.sd_header .jts_moon { right: 9px; }

/* ---------------------------------------------------------------- Bühne */
.sd_buehne {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sd_hud {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  background: linear-gradient(180deg, #1d2738, #141c2a);
  border: 2px solid #354764;
  border-radius: 12px;
  color: #e8eef7;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .sd_hud {
  background: linear-gradient(180deg, #182030, #101723);
  border-color: #2f405b;
}
.sd_hud_gruppe {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.sd_hud_mitte { justify-content: center; }
.sd_hud_rechts { justify-content: flex-end; }

.sd_held_status, #sd_held_gruppe, .sd_held_gruppe { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.sd_held_status_zeile {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  background: rgba(8, 12, 22, .45);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  padding: 0.18rem 0.4rem;
}
.sd_held_status_zeile.sd_gefallen { opacity: .45; }
.sd_held_status_balken {
  display: inline-block;
  width: 54px;
  height: 8px;
  background: #3a1d24;
  border-radius: 4px;
  overflow: hidden;
}
.sd_held_status_balken > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c93b3b, #e25a4a);
}
.sd_held_status_hp { font-variant-numeric: tabular-nums; }
.sd_held_status_schild { color: #8fb8e8; font-weight: 700; }
.sd_held_status_status { color: #ffd97a; font-weight: 700; }

/* Blauer Mana-/Aktions-Orb wie im Referenzbild */
.sd_aktionen {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: radial-gradient(circle at 35% 30%, #3b8ee2, #1b4f8c 70%, #123561 100%);
  border: 2px solid #82c4ff;
  box-shadow: 0 0 12px rgba(65, 155, 255, .45), inset 0 2px 4px rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: 0.2rem 0.85rem;
  color: #fff;
}
.sd_aktionen_zahl { font-size: 1.35rem; font-weight: 900; color: #ffffff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.sd_aktionen_text { font-size: 0.82rem; font-weight: 700; color: #dbeeff; }
.sd_runde {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  font-weight: 800;
}
.sd_zaehler { font-size: 0.85rem; opacity: .92; }
.sd_zaehler strong { color: #ffd678; margin-left: 0.2rem; }
.sd_hud_knopf {
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.sd_hud_knopf:hover { background: rgba(255, 255, 255, .18); }

.sd_spielfeld {
  position: relative;
  border: 3px solid #354764;
  border-radius: 14px;
  overflow: hidden;
  background: #141c2b;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .42);
}
#sd_canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Im Kampf ist der Canvas (1120x630) unbeschnitten zu hoch - auf breiten
   Fenstern wäre die halbe Seite Bühne. Deshalb zeigt die Bühne einen Streifen
   von den Köpfen bis zum Boden: die unteren 480 der 630 Canvas-Zeilen
   (1120 : 480 = 2,333). `object-position: center bottom` ist der wichtige
   Teil: der Ausschnitt endet IMMER am Boden, oben fällt nur die Gewölbewand
   weg. Vorher stand hier `center 62%` mit einer festen Höhe von 410 px -
   dadurch wanderte der Ausschnitt mit der Fensterbreite nach oben und schnitt
   unten Lebensbalken und Namen ab (gemessen bei 1280/1366/1600/1920:
   95-120 px weg).
   Die Höhe hängt an der BREITE des Bühne-Rahmens, und der Rahmen ist
   höchstens so breit wie 38 vh erlauben - dadurch passt der Kampf auf einen
   Bildschirm, ohne dass die Karten unter den Bildrand rutschen.
   Am Handy (< 560 px) bleibt der ganze Canvas sichtbar. */
@media (min-width: 560px) {
  .sd_buehne:has(#sd_spielbereich:not([hidden])) #sd_canvas {
    aspect-ratio: 1120 / 480;      /* 1120 : 480 */
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center bottom;
  }
  /* Der Rahmen schrumpft auf die Canvas-Breite (sonst bliebe links und rechts
     ein leerer Streifen stehen) und wird mittig gesetzt. */
  .sd_buehne:has(#sd_spielbereich:not([hidden])) .sd_spielfeld {
    max-width: min(100%, calc(min(34vh, 440px) * 2.3334));
    margin-inline: auto;
  }
}

/* ------------------------------------------------------------- Overlays */
.sd_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(12, 10, 20, .82);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.sd_overlay[hidden] { display: none !important; }

/* Startmenü */
.sd_start_karte {
  width: min(880px, 100%);
  background: linear-gradient(180deg, #2a2340, #1c1730);
  border: 2px solid #564878;
  border-radius: 16px;
  padding: 1.1rem 1.3rem;
  color: #f2ecdd;
}
html[data-theme="dark"] .sd_start_karte {
  background: linear-gradient(180deg, #221c33, #161226);
}
.sd_start_titel {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.sd_start_titel h2 {
  margin: 0;
  font-size: 1.8rem;
  color: #ffd678;
}
.sd_start_unter { margin: 0.2rem 0 0; opacity: .9; }

.sd_wahl_block { margin-bottom: 0.8rem; }
.sd_wahl_block h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
  color: #cdbde8;
}
.sd_wahl_reihe { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sd_wahl_knopf {
  flex: 1 1 220px;
  min-height: 56px;
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  border: 2px solid #564878;
  background: rgba(255, 255, 255, .06);
  color: #f2ecdd;
  cursor: pointer;
}
.sd_wahl_knopf.sd_aktiv {
  border-color: #ffd678;
  background: rgba(255, 214, 120, .14);
}
.sd_wahl_gross { display: block; font-size: 1.2rem; font-weight: 800; color: #ffd678; }
.sd_wahl_klein { display: block; font-size: 0.88rem; opacity: .9; }

/* Heldenraster */
.sd_helden_raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem;
}
.sd_held_karte {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.1rem 0.6rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
  min-height: 92px;
  border-radius: 12px;
  border: 2px solid #564878;
  background: rgba(255, 255, 255, .05);
  color: #f2ecdd;
  cursor: pointer;
}
.sd_held_karte:hover { background: rgba(255, 255, 255, .12); }
.sd_held_karte.sd_gewaehlt {
  border-color: #7bd88a;
  background: rgba(123, 216, 138, .16);
}
.sd_held_bild { grid-row: 1 / span 3; display: flex; justify-content: center; }
.sd_held_name { font-weight: 800; font-size: 1.02rem; }
.sd_held_rolle { font-size: 0.8rem; color: #cdbde8; }
.sd_held_hp { font-size: 0.8rem; color: #ffd678; }
.sd_held_geschlecht {
  grid-column: 2;
  font-size: 0.72rem;
  min-height: 24px;
  padding: 0 0.3rem;
  border-radius: 6px;
  border: 1px solid #6a5b90;
  background: rgba(0, 0, 0, .25);
  color: #cdbde8;
  cursor: pointer;
}
.sd_held_staerke {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  opacity: .85;
}
/* Startknöpfe */
.sd_start_knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.sd_knopf {
  min-height: 44px;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 2px solid #6a5b90;
  background: rgba(255, 255, 255, .08);
  color: #f2ecdd;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.sd_knopf:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.sd_knopf:disabled { opacity: .45; cursor: not-allowed; }
.sd_knopf_haupt {
  border-color: #ffd678;
  background: rgba(255, 214, 120, .18);
  color: #ffe3a8;
  font-size: 1.05rem;
}
.sd_knopf_haupt.sd_knopf_bereit {
  background: linear-gradient(180deg, #4caf50, #2e7d32);
  border-color: #a5e6a5;
  color: #fff;
}
.sd_knopf_weg { border-color: #b0574f; color: #ffbdb6; }

/* ------------------------------------------------------------- Dungeonkarte */
.sd_spielfeld:has(#sd_karte_bildschirm:not([hidden])) {
  min-height: 690px;
}
.sd_karte_bildschirm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem 0.75rem;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 190, 95, .12), transparent 55%),
    linear-gradient(180deg, #1b2436 0%, #121826 100%);
}
.sd_karte_kopf { text-align: center; color: #f2ecdd; }
.sd_karte_kopf h2 { margin: 0; font-size: 1.3rem; color: #ffd678; letter-spacing: .02em; }
.sd_karte_hinweis { margin: 0.1rem 0 0; font-size: 0.88rem; opacity: .88; }
.sd_karte_buehne {
  position: relative;
  flex: 1;
  width: min(880px, 100%);
  min-height: 520px;
  border: 2px solid #3c5070;
  border-radius: 14px;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .38);
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 200, 100, .14), transparent 48%),
    radial-gradient(circle at 50% 94%, rgba(90, 165, 255, .10), transparent 45%),
    linear-gradient(180deg, #232d42 0%, #182030 52%, #131a28 100%);
  overflow: hidden;
}

/* SVG-Netz für die verzweigten Dungeon-Wege */
.sd_karte_svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.sd_karte_etagenlinie {
  stroke: rgba(145, 170, 210, 0.09);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
}
.sd_weg_pfad {
  fill: none;
  stroke: rgba(165, 185, 220, 0.34);
  stroke-width: 3;
  stroke-dasharray: 9 7;
  stroke-linecap: round;
}
.sd_weg_pfad.sd_weg_offen {
  stroke: #ffd678;
  stroke-width: 4.2;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 5px rgba(255, 214, 120, .55));
}
.sd_weg_pfad.sd_weg_besucht {
  stroke: #7bd88a;
  stroke-width: 3.8;
  stroke-dasharray: none;
  opacity: 0.75;
}

.sd_karte_etage_nr {
  position: absolute;
  left: 0.55rem;
  transform: translateY(50%);
  font-size: 0.74rem;
  font-weight: 800;
  color: rgba(175, 195, 225, 0.48);
  pointer-events: none;
  z-index: 2;
  font-variant-numeric: tabular-nums;
}

/* Kompakte Slay-the-Spire-Knoten-Medaillons (überlappen auf 10 Etagen nie) */
.sd_knoten {
  position: absolute;
  transform: translate(-50%, 50%);
  min-width: 88px;
  min-height: 38px;
  height: 38px;
  padding: 0.15rem 0.6rem 0.15rem 0.4rem;
  border-radius: 999px;
  border: 2px solid #45597a;
  background: linear-gradient(180deg, #253248, #192233);
  color: #d6e1f2;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: not-allowed;
  opacity: 0.68;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.sd_knoten_symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sd_knoten_symbol canvas,
.sd_knoten_symbol .sd_symbol_png {
  max-height: 24px;
  max-width: 26px;
  width: auto;
  height: auto;
}
.sd_knoten.sd_knoten_offen {
  opacity: 1;
  cursor: pointer;
  border-color: #ffd678;
  background: linear-gradient(180deg, #324461, #223047);
  color: #fff8e6;
  box-shadow: 0 0 0 3px rgba(255, 214, 120, .32), 0 5px 14px rgba(0, 0, 0, .55);
}
.sd_knoten.sd_knoten_offen:hover {
  transform: translate(-50%, 50%) scale(1.07);
  background: linear-gradient(180deg, #3d5376, #2a3b57);
  box-shadow: 0 0 0 4px rgba(255, 214, 120, .48), 0 6px 16px rgba(0, 0, 0, .6);
}
.sd_knoten.sd_knoten_besucht {
  opacity: 0.48;
  border-color: #7bd88a;
}
.sd_knoten_label {
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: .01em;
}
.sd_knoten_elite {
  border-color: #de6358;
  background: linear-gradient(180deg, #3b232a, #28171c);
}
.sd_knoten_rast {
  border-color: #69c97b;
  background: linear-gradient(180deg, #1f382c, #16281f);
}
.sd_knoten_ereignis {
  border-color: #a98fe3;
  background: linear-gradient(180deg, #2d2645, #1f1a30);
}
.sd_knoten_boss {
  border-color: #ffd678;
  background: linear-gradient(180deg, #422938, #2b1924);
  min-width: 112px;
  min-height: 46px;
  height: 46px;
  padding: 0.2rem 0.8rem 0.2rem 0.55rem;
}
.sd_knoten_boss .sd_knoten_symbol canvas,
.sd_knoten_boss .sd_knoten_symbol .sd_symbol_png {
  max-height: 32px;
  max-width: 34px;
}
.sd_reihe_knoepfe { display: flex; gap: 0.5rem; }

/* -------------------------------------------------------- Spielbereich */
.sd_spielbereich {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Satzleiste im Slay-the-Spire-Stil direkt unter der Kampfbühne */
.sd_satzleiste_rahmen {
  border: 2px solid #354764;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(58, 92, 140, .28), transparent 70%),
    linear-gradient(180deg, #1b2536 0%, #121926 100%);
  padding: 0.45rem 0.75rem 0.55rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html[data-theme="dark"] .sd_satzleiste_rahmen {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(58, 92, 140, .24), transparent 70%),
    linear-gradient(180deg, #161f2e 0%, #0e1420 100%);
}
.sd_satzleiste_kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}
.sd_satzleiste_titel {
  color: #ffd678;
  font-weight: 800;
  font-size: 0.96rem;
  min-width: 6.5rem;
}
.sd_satz_hinweis {
  font-size: 0.9rem;
  color: #cfc4e4;
  text-align: right;
  min-height: 1.2em;
}
.sd_satz_hinweis.sd_fehler { color: #ff9b8f; font-weight: 700; }
.sd_satz_hinweis.sd_gut { color: #a8e88a; font-weight: 700; }

/* Drei-Spalten-Deckleiste wie im Referenzbild: Links 3/3-Orb | Mitte Kartenfächer | Rechts Zug-Knöpfe */
.sd_sts_leiste {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}
.sd_sts_orb {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #7fd0ff 0%, #2f82db 38%, #164684 74%, #0d2a52 100%);
  border: 3px solid #9be0ff;
  box-shadow:
    0 0 0 3px #1e324d,
    0 0 18px rgba(68, 165, 255, .62),
    inset 0 3px 6px rgba(255, 255, 255, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  user-select: none;
  flex-shrink: 0;
}
.sd_sts_orb_zahl {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .75);
  font-variant-numeric: tabular-nums;
}

.sd_satzleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 138px;
  padding: 0.5rem 0.6rem;
  border-radius: 12px;
  border: 2px dashed #384d6e;
  background: rgba(8, 12, 22, .52);
}
.sd_satzleiste.sd_zonAktiv {
  border-color: #ffd678;
  background: rgba(255, 214, 120, .10);
}
.sd_satz_platzhalter { color: #8d9ab5; font-style: italic; font-size: 0.92rem; }

/* Gefächerte Karten in der Satzleiste (Slay-the-Spire-Fächer) */
.sd_chip.sd_satz_karte {
  margin: 0 -3px;
  cursor: grab;
  transform-origin: bottom center;
  transform: translateY(var(--sd-bogen, 0px)) rotate(var(--sd-winkel, 0deg));
  transition: transform 0.14s ease, box-shadow 0.14s ease;
  z-index: 1;
}
.sd_chip.sd_satz_karte:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.05);
  z-index: 6;
}
.sd_chip.sd_zieht { opacity: .5; }
.sd_chip_x {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 24px;
  min-height: 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.sd_chip_x:hover { background: rgba(212, 84, 74, .85); }

.sd_satz_knoepfe {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  align-items: stretch;
  min-width: 164px;
}

/* Kartenreihen */
.sd_auswahl_zeile {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sd_auswahl_gruppe {
  flex: 1 1 260px;
  border: 2px solid #32435f;
  border-radius: 12px;
  padding: 0.35rem 0.5rem;
  background: rgba(16, 23, 36, .75);
}
.sd_auswahl_label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9fb3d1;
  margin-bottom: 0.25rem;
}
.sd_karten_reihe {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-height: 112px;
}
.sd_hand_zeile {
  border: 2px solid #32435f;
  border-radius: 12px;
  padding: 0.4rem 0.55rem;
  background: rgba(16, 23, 36, .75);
}
.sd_hand {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-height: 138px;
  align-items: flex-start;
}
.sd_zug_knopf_zeile { display: flex; justify-content: flex-end; }
.sd_knopf_zug {
  min-height: 48px;
  padding: 0.5rem 1.35rem;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  background: linear-gradient(180deg, #33465e, #223044);
  border: 2px solid #6b84a6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px rgba(0,0,0,.35);
  color: #eef4fc;
}
.sd_knopf_zug:hover:not(:disabled) {
  background: linear-gradient(180deg, #3f5673, #2b3c54);
  border-color: #8fb0dc;
}

/* ------------------------------------------------------------- Karten (Referenz-Look)
   ALLE Karten sind gleich: Auswahlkacheln (Helden/Ziele/Grammatik),
   Handkarten und die Chips in der Satzleiste. Gleiche Groesse (88 x 84),
   gleicher Aufbau: Kosten-Plakette oben links, Symbol oben rechts, Wort in
   der Mitte, Wirkung (nur Hand), Rollen-Fussband unten. */
.sd_karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.1rem;
  width: 84px;
  height: 92px;
  min-height: 0;
  padding: 1.75rem 0.2rem 0.8rem;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .28), 0 4px 10px rgba(0, 0, 0, .38);
  color: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.sd_karte:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), 0 8px 16px rgba(0, 0, 0, .48);
}
.sd_karte_hand { width: 84px; height: 92px; min-height: 0; padding-top: 1.75rem; }

/* Kleine runde Aktionskosten-Plakette oben links wie im Referenzbild */
.sd_karte_kosten {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4b9be8, #1d538f);
  border: 1.5px solid rgba(255, 255, 255, .75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.sd_karte_wort {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 0;
  padding: 0 0.15rem;
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto;
}
.sd_karte_hand .sd_karte_wort {
  font-size: 0.8rem;
  padding: 0 0.2rem;
}
/* Das Symbol sitzt bei ALLEN Karten in der oberen rechten Ecke - so bleibt
   die Karte gleich hoch, egal ob das Wort ein oder drei Zeilen braucht. */
.sd_karte_bild {
  position: absolute;
  top: 4px;
  right: 27px;          /* links neben dem Ablage-Knopf der Handkarten */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
}
.sd_symbol_canvas { image-rendering: pixelated; }
.sd_symbol_png {
  height: 17px;
  width: auto;
  max-width: 17px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.sd_held_bild .sd_symbol_png {
  height: 62px;
  max-width: 62px;
}

/* Fußband unten auf der Karte für die grammatische Rolle ("Subjekt", "Verb", "Ziel (Akkusativ)") */
.sd_karte_rolle {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .28);
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: 0.12rem 0.2rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .94);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd_karte_wirkung {
  font-size: 0.64rem;
  opacity: .9;
  background: rgba(0, 0, 0, .2);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}
.sd_karte_stufe { position: absolute; top: 3px; left: 23px; color: #ffe08a; font-size: 0.78rem; }
.sd_karte_weg {
  position: absolute;
  top: 2px;
  right: 2px;
  left: auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: rgba(0, 0, 0, .38);
  color: #fff;
  font-size: 0.74rem;
  cursor: pointer;
  display: none;
}
.sd_hand .sd_karte_weg { display: inline-flex; align-items: center; justify-content: center; }

/* Kräftige Kartenfarben mit hellem Innenrahmen passend zum Referenzbild */
.sd_farbe_subjekt {
  background: linear-gradient(180deg, #3b80be 0%, #2a6399 100%);
  border-color: #6cb4f0;
}
.sd_farbe_verb {
  background: linear-gradient(180deg, #358a55 0%, #256b3f 100%);
  border-color: #66c989;
}
.sd_farbe_ergaenzung {
  background: linear-gradient(180deg, #8b6638 0%, #6d4e29 100%);
  border-color: #c79a63;
}
.sd_farbe_ziel {
  background: linear-gradient(180deg, #69499c 0%, #4f357a 100%);
  border-color: #9e7cd4;
}
.sd_farbe_red {
  background: linear-gradient(180deg, #a6423a 0%, #823029 100%);
  border-color: #de766d;
}
.sd_farbe_grammatik {
  background: linear-gradient(180deg, #3c4858 0%, #2b3542 100%);
  border-color: #73849b;
}

/* ------------------------------------------------------------- Dialoge */
.sd_dialog {
  border: 2px solid #564878;
  border-radius: 16px;
  background: linear-gradient(180deg, #2a2340, #1c1730);
  color: #f2ecdd;
  padding: 0;
  max-width: min(720px, 94vw);
  width: 100%;
}
html[data-theme="dark"] .sd_dialog { background: linear-gradient(180deg, #221c33, #161226); }
.sd_dialog::backdrop { background: rgba(8, 6, 14, .72); }
.sd_dialog_breit { max-width: min(980px, 96vw); }
.sd_dialog_innen { padding: 0.9rem 1.1rem 1rem; }
.sd_dialog_kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.sd_dialog_kopf h2 { margin: 0; font-size: 1.25rem; color: #ffd678; }
.sd_dialog_zu {
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid #6a5b90;
  background: rgba(255, 255, 255, .08);
  color: #f2ecdd;
  font-size: 1rem;
  cursor: pointer;
}
.sd_dialog_text { line-height: 1.55; font-size: 1rem; }
.sd_dialog_text p { margin: 0 0 0.6rem; }
.sd_dialog_fuss { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; }
.sd_dialog_wahl { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.sd_dialog_wahl .sd_knopf { border-radius: 12px; text-align: left; }
.sd_dialog_hinweis { font-size: 0.85rem; opacity: .8; }
.sd_lernsatz {
  background: rgba(255, 214, 120, .12);
  border-left: 4px solid #ffd678;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
}
.sd_merksatz_liste { margin: 0; padding-left: 1.2rem; }
.sd_merksatz_liste li { margin-bottom: 0.4rem; }

.sd_einst_zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.35rem 0;
  min-height: 44px;
}
.sd_einst_zeile input[type="checkbox"] { width: 26px; height: 26px; }

.sd_belohnung_raster {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.sd_belohnung_relikt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.8rem;
  border-radius: 10px;
  background: rgba(255, 214, 120, .12);
  border: 1px solid rgba(255, 214, 120, .4);
}
.sd_deck_raster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
}
.sd_aufwert_raster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
  max-height: 40vh;
  overflow-y: auto;
}
.sd_relikt_zeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  width: 100%;
}
.sd_stat_raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.sd_stat {
  background: rgba(255, 255, 255, .06);
  border-radius: 10px;
  padding: 0.5rem;
  text-align: center;
}
.sd_stat strong { display: block; font-size: 1.4rem; color: #ffd678; }
.sd_stat span { font-size: 0.8rem; }

/* -------------------------------------------------------- Kurzmeldung */
.sd_meldungen {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 90;
  pointer-events: none;
  width: min(560px, 92vw);
}
.sd_kurzmeldung {
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  background: rgba(20, 16, 31, .95);
  border: 2px solid #564878;
  color: #f2ecdd;
  font-size: 0.95rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.sd_meldung_fehler { border-color: #d4544a; color: #ffd9d4; }
.sd_meldung_sieg { border-color: #7bd88a; color: #d9ffd9; }

/* ------------------------------------------------------------- Fuß */
/* Steintafel am Ende der Gewölbewand - gleiche Familie wie die Leiste.
   (.jupi_footer brachte aus der Plattform-CSS eine deckende helle Fläche mit.) */
.sd_footer,
.jupi_container > .jupi_footer,
html[data-theme="dark"] .sd_footer,
html[data-theme="dark"] .jupi_container > .jupi_footer {
  margin-top: 1rem;
  background: linear-gradient(180deg, rgba(26, 22, 36, .94), rgba(13, 11, 20, .97));
  border-top: 3px solid var(--sd-messing-tief);
  box-shadow: inset 0 1px 0 rgba(255, 226, 170, .18), 0 -6px 18px rgba(0, 0, 0, .4);
  color: #c3b8d8;
}
.sd_footer .jupi_footer_text { color: #c3b8d8; }
.sd_footer .jupi_footer_text a { color: var(--sd-gold); }

/* ============================================================================
   KAMPF-LAYOUT am Desktop (ab 900 px): alles auf EINEN Blick, ohne Scrollen
   ----------------------------------------------------------------------------
   Problem (26.10.2026): Im Kampf lagen die Karten weit unterhalb des
   Fensters - bei 1280x900 endete die Hand bei y = 1521 (Fenster 900). Man
   musste scrollen, um zu spielen. Ursache: die Bühne brauchte 430-524 px
   (Canvas 1120x630, Ausschnitt 14:5) und die drei Auswahlgruppen brachen
   auf drei Zeilen um (521 px zusammen).

   Lösung: zwei Spalten.
     links  = Bühne + Satzleiste ("Dein Satz")
     rechts = die drei Kartengruppen (Helden, Ziele, Grammatik)
     unten  = die Hand (Deine Karten) über die volle Breite

   Die Bühne wird dabei kleiner (höchstens 38 vh), zeigt aber weiterhin
   denselben Ausschnitt unten verankert - Füße, Lebensbalken und Namen
   bleiben sichtbar (AGENTS.md "Bühne: Ausschnitt und Blickrichtung").
   ============================================================================ */
@media (min-width: 900px) {
  .sd_buehne:has(#sd_spielbereich:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    grid-template-areas:
      "hud    hud"
      "buehne satz"
      "gruppen gruppen"
      "hand   hand";
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
  }
  .sd_buehne:has(#sd_spielbereich:not([hidden])) .sd_hud { grid-area: hud; }
  .sd_buehne:has(#sd_spielbereich:not([hidden])) .sd_spielfeld { grid-area: buehne; }
  /* Die Karte selbst ist ein Grid-Item; ihre Kinder (Satzleiste, Gruppen,
     Hand) tragen die Grid-Bereiche. */
  .sd_buehne:has(#sd_spielbereich:not([hidden])) .sd_spielbereich { display: contents; }
  .sd_buehne:has(#sd_spielbereich:not([hidden])) .sd_satzleiste_rahmen { grid-area: satz; }
  .sd_buehne:has(#sd_spielbereich:not([hidden])) .sd_auswahl_zeile { grid-area: gruppen; }
  .sd_buehne:has(#sd_spielbereich:not([hidden])) .sd_hand_zeile { grid-area: hand; }

  /* Die drei Gruppen stehen nebeneinander ueber die volle Breite: so
     bekommen die 22 Karten (4 + 8 + 10) nur zwei Reihen Hoehe. */
  .sd_auswahl_zeile { flex-direction: row; flex-wrap: nowrap; gap: 0.5rem; align-items: flex-start; }
  .sd_auswahl_gruppe { flex: 1 1 0; min-width: 0; padding: 0.25rem 0.22rem; }
  .sd_auswahl_gruppe:last-child { flex: 1.25 1 0; }
  .sd_auswahl_label { font-size: 0.7rem; margin-bottom: 0.15rem; }


  /* Die Auswahlkacheln sind dieselben Karten wie in der Hand - nur die
     Reihen bekommen kein festes Hoehen und die Kacheln schrumpfen nicht. */
  .sd_auswahl_zeile .sd_karte { flex: 0 0 auto; }
  .sd_auswahl_zeile .sd_karte_wort { overflow-wrap: break-word; }
  .sd_auswahl_zeile .sd_karten_reihe { min-height: 0; gap: 0.25rem; align-items: flex-start; }
  .sd_hand { min-height: 0; }

  .sd_satzleiste { min-height: 96px; padding: 0.35rem 0.5rem; }
  .sd_chip.sd_satz_karte { width: 88px; min-height: 96px; padding: 0.28rem 0.22rem 1.05rem; }
  .sd_sts_orb { width: 54px; height: 54px; }
  .sd_sts_orb_zahl { font-size: 1.2rem; }
  .sd_satz_knoepfe { min-width: 150px; gap: 0.3rem; }
  .sd_satz_knoepfe .sd_knopf { min-height: 40px; padding: 0.35rem 0.8rem; }

  /* Im Kampf sitzt alles dichter, damit nichts gescrollt werden muss. */
  .jupi_main.sd_main:has(#sd_spielbereich:not([hidden])) { padding-top: 1rem; }
  .sd_buehne:has(#sd_spielbereich:not([hidden])) .sd_hud { padding: 0.22rem 0.7rem; }
  .sd_buehne:has(#sd_spielbereich:not([hidden])) .sd_held_status_zeile { padding: 0.1rem 0.35rem; }
}

/* ------------------------------------------------------------- Handy */
@media (max-width: 820px) {
  .sd_header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "marke marke" "links rechts";
    row-gap: 0.45rem;
    padding: 0.5rem 0.6rem 0.65rem;
  }
  .sd_brand { grid-area: marke; justify-self: center; }
  .sd_header .jupi_nav_back {
    grid-area: links;
    font-size: 0.84rem;
    padding: 0.35rem 0.7rem;
  }
  .sd_header .jupi_werkzeuge { grid-area: rechts; justify-self: end; gap: 0.4rem; }
  .sd_brand h1 { font-size: 1.15rem; letter-spacing: 0.04em; }
  /* Am Handy ist die Bühne nur so hoch wie die Canvas (bei 390 px rund 210 px).
     Der Startbildschirm liegt aber als Overlay darüber und wurde dadurch
     abgeschnitten (die Heldenkarten endeten an der Bühnenkante). Solange das
     Startmenü offen ist, bekommt die Bühne darum Platz für die Karten - im
     Kampf bleibt sie wieder bei der Canvas-Höhe. */
  .sd_spielfeld:has(#sd_start:not([hidden])) { min-height: min(660px, calc(100vh - 8rem)); }
  /* Das Overlay richtet seinen Inhalt am Handy oben aus: bei zentrierter
     Ausrichtung schneidet eine zu hohe Karte oben UND unten ab (das erste
     Heldenfeld begann mitten im Text). */
  .sd_overlay { align-items: flex-start; }
  .sd_hud { grid-template-columns: 1fr; }
  .sd_hud_mitte, .sd_hud_rechts { justify-content: center; }
  .sd_sts_leiste {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
  }
  .sd_sts_orb {
    width: 52px;
    height: 52px;
  }
  .sd_sts_orb_zahl { font-size: 1.15rem; }
  .sd_satzleiste { min-height: 106px; padding: 0.35rem; }
  .sd_satz_knoepfe {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
  }
  .sd_chip.sd_satz_karte { width: 92px; min-height: 102px; margin: 0 -2px; }
  .sd_knoten {
    min-width: 68px;
    min-height: 34px;
    height: 34px;
    padding: 0.1rem 0.45rem 0.1rem 0.3rem;
    gap: 0.2rem;
  }
  .sd_knoten_label { font-size: 0.68rem; }
  .sd_knoten_symbol canvas,
  .sd_knoten_symbol .sd_symbol_png { max-height: 18px; max-width: 20px; }
  .sd_karte { width: 86px; min-height: 84px; padding: 1.5rem 0.22rem 0.85rem; }
  .sd_karte_hand { width: 84px; height: 92px; min-height: 0; padding-top: 1.75rem; }
  .sd_symbol_png { height: 28px; max-width: 44px; }
  .sd_karten_reihe, .sd_hand { min-height: 0; }
  .sd_satz_hinweis { text-align: left; font-size: 0.85rem; }
}

/* Schmale Handys (<= 560 px): In der zweiten Kopfzeilen-Zeile müssen
   "Alle Spiele", Sprachwahl und Theme-Schalter nebeneinander Platz haben.
   Das 🌐-Zeichen fällt weg (die Auswahl zeigt weiter den Sprachnamen),
   die Sprachwahl wird schmaler - so bleibt die Zeile einzeilig. */
@media (max-width: 560px) {
  .sd_header .jupi_sprachen_icon { display: none; }
  .sd_header .jupi_sprachen_select {
    max-width: 8rem;
    font-size: 0.78rem;
    padding: 0.2rem 0.45rem;
    min-height: 40px;
  }
  .sd_brand { gap: 0.45rem; }
  .sd_brand h1 { font-size: 1.05rem; }
}

/* Achtung: [hidden] muss immer greifen (AGENTS.md 3.13, Fall vom 11.10.) */
[hidden] { display: none !important; }