/* ===========================================================================
   Bergfried — gemeinsames Interface für Server-Seiten und Spiel-HUD.
   Wird unter /static/ui.css ausgeliefert.

   Schriften liegen selbst im Projekt (OFL-lizenziert), kein CDN: das Spiel
   soll auch auf einem VPS ohne Fremdabhängigkeiten laufen und bei allen
   Mitspielern gleich aussehen.
   =========================================================================== */

@font-face {
  font-family: "Unifraktur";
  src: url("/static/fonts/unifraktur-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Garamond Bergfried";
  src: url("/static/fonts/ebgaramond-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Stein und Eisen — die Grundmasse der Oberfläche */
  --stone-900: #121417;
  --stone-800: #181b1f;
  --stone-700: #22262b;
  --stone-600: #2c3138;
  --iron: #3b414a;
  --iron-light: #565d67;

  /* Messing — der einzige Zierton, sparsam */
  --brass: #a8813d;
  --brass-light: #cca75e;
  --brass-dark: #6d5426;

  /* Pergament für Urkunden und Chronik */
  --parchment: #d7c7a3;
  --parchment-dark: #bfad86;
  --ink: #2b2419;
  --ink-soft: #5b4e3b;

  /* Schrift auf dunklem Grund: warmes Grau, nie kaltes Weiß */
  --text: #d2ccbf;
  --text-dim: #928b7d;

  --moss: #7a9166;
  --fire: #c2662e;
  --fire-light: #e08a4b;
  --blood: #8f3d2c;

  --font-display: "Unifraktur", "Old English Text MT", "UnifrakturMaguntia", serif;
  --font-body: "Garamond Bergfried", "Palatino Linotype", Palatino, Georgia, serif;

  /* Schwert als Standardzeiger, Spitze oben links (Hotspot 5 5) */
  --cursor-sword: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg transform='rotate(-45 15 15)'%3E%3Cpath d='M15 1.5 L18 7 L18 19 L12 19 L12 7 Z' fill='%23c9ced5' stroke='%2312151a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M15 3.5 L16.6 7.6 L16.6 18 L15 18 Z' fill='%23f0f3f6' opacity='.75'/%3E%3Crect x='6.5' y='18.6' width='17' height='3.4' rx='1' fill='%23a8813d' stroke='%2312151a' stroke-width='1.3'/%3E%3Crect x='13' y='22' width='4' height='4.6' fill='%234a3a29' stroke='%2312151a' stroke-width='1.2'/%3E%3Ccircle cx='15' cy='27.2' r='2.1' fill='%23a8813d' stroke='%2312151a' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E")
    5 5, auto;

  /* Schwert mit Glut an der Klinge — für alles Anklickbare */
  --cursor-sword-hot: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg transform='rotate(-45 15 15)'%3E%3Cellipse cx='15' cy='11' rx='6.5' ry='11' fill='%23e08a4b' opacity='.28'/%3E%3Cpath d='M15 1.5 L18 7 L18 19 L12 19 L12 7 Z' fill='%23ded3c2' stroke='%2312151a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M15 3.5 L16.6 7.6 L16.6 18 L15 18 Z' fill='%23ffd9a8' opacity='.9'/%3E%3Crect x='6.5' y='18.6' width='17' height='3.4' rx='1' fill='%23cca75e' stroke='%2312151a' stroke-width='1.3'/%3E%3Crect x='13' y='22' width='4' height='4.6' fill='%234a3a29' stroke='%2312151a' stroke-width='1.2'/%3E%3Ccircle cx='15' cy='27.2' r='2.1' fill='%23cca75e' stroke='%2312151a' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E")
    5 5, pointer;

  /* Panzerhandschuh mit zeigendem Finger — für Dörfer und Gebäude, also für
     das, was man ANSIEHT statt anklickt wie einen Knopf. Um 45° gekippt wie
     das Schwert, Finger nach links oben, Hotspot auf der Spitze (3 8). Das
     Armzeug läuft aus dem Bild: sonst stünde die Hand auf einem Sockel und
     läse sich wie eine Maschine. */
  --cursor-gauntlet: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg transform='translate(2.2 -1.2) rotate(-45 15 15)'%3E%3Cpath d='M7.5 21.6 L22.5 21.6 L24 30.5 L8.5 30.5 Z' fill='%235f656d' stroke='%2312151a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M7.7 22.5 L22.8 22.5' stroke='%23a8813d' stroke-width='1.5'/%3E%3Cpath d='M8.7 26.6 L23.5 26.6' stroke='%2312151a' stroke-width='0.9' opacity='.7'/%3E%3Cpath d='M6.6 19.6 L6.6 14.6 L11.4 14.6 Q13.4 11.5 15.4 14.4 Q17.3 11.8 19.2 14.6 Q21.1 12.8 22.4 15.8 L22.4 19.6 Q22.4 22.1 19.6 22.1 L9.4 22.1 Q6.6 22.1 6.6 19.6 Z' fill='%239aa1a9' stroke='%2312151a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M15.4 15.4 L15.4 21.8 M19.2 15.8 L19.2 21.8' stroke='%2312151a' stroke-width='0.85' opacity='.5'/%3E%3Cpath d='M6.9 15.4 Q3.4 15 2.9 17.6 Q2.5 20.2 5.6 20.8 L7.6 21 L7.6 15.6 Z' fill='%237d838b' stroke='%2312151a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M6.4 14.2 L11.2 14.2 L11.2 8.2 L6.4 8.2 Z' fill='%23b9bfc7' stroke='%2312151a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M6.5 8.6 L11.1 8.6 L10.9 4.2 Q10.6 1.9 8.7 1.9 Q6.8 1.9 6.6 4.3 Z' fill='%23c9ced5' stroke='%2312151a' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M7.5 3.4 L7.5 13.6' stroke='%23eef1f4' stroke-width='1.1' opacity='.65'/%3E%3Ccircle cx='20.5' cy='19.3' r='0.95' fill='%23cca75e' stroke='%2312151a' stroke-width='0.6'/%3E%3Ccircle cx='13' cy='19.3' r='0.95' fill='%23cca75e' stroke='%2312151a' stroke-width='0.6'/%3E%3C/g%3E%3C/svg%3E")
    3 8, pointer;

  /* Federkiel für Eingabefelder, Hotspot an der Spitze (4 26) */
  --cursor-quill: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M5 26 L9 22 L8 25 Z' fill='%2312151a'/%3E%3Cpath d='M8 23 L23 5 C25 3 27 4 26 6 L12 24 Z' fill='%23e2dccb' stroke='%2312151a' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M11 21 L23 7' stroke='%23a99f88' stroke-width='1'/%3E%3C/svg%3E")
    5 26, text;

  /* Steinmetzhammer für den Bau-Modus, Hotspot am Kopf (6 6) */
  --cursor-hammer: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect x='3' y='3' width='13' height='7' rx='1' transform='rotate(-20 9.5 6.5)' fill='%236e747c' stroke='%2312151a' stroke-width='1.3'/%3E%3Crect x='4' y='4' width='11' height='2' rx='1' transform='rotate(-20 9.5 5)' fill='%238e949c' opacity='.8'/%3E%3Cpath d='M11 10 L25 25' stroke='%234a3a29' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M11 10 L25 25' stroke='%23705a41' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")
    6 6, crosshair;

  --cursor-fackel: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg transform='rotate(20 15 15)'%3E%3Cpath d='M13.5 12 L16.5 12 L18 28 L12 28 Z' fill='%234a3a29' stroke='%2312151a' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='M13.6 13.5 L16.4 13.5' stroke='%23705a41' stroke-width='1'/%3E%3Crect x='12.6' y='10' width='4.8' height='3' rx='0.8' fill='%236e5537' stroke='%2312151a' stroke-width='1.1'/%3E%3Cpath d='M15 1 Q18.6 4 17.6 7.4 Q17 9.6 15 10 Q13 9.6 12.4 7.4 Q11.4 4 15 1 Z' fill='%23e08a4b' stroke='%2312151a' stroke-width='1.1'/%3E%3Cpath d='M15 3.4 Q16.8 5.4 16 7.6 Q15.6 8.8 15 9 Q14.4 8.8 14 7.6 Q13.2 5.4 15 3.4 Z' fill='%23ffd9a8'/%3E%3C/g%3E%3C/svg%3E")
    15 4, crosshair;

  /* Fackel für den Abriss — die Flamme zeigt auf das Ziel (Hotspot 15 4) */
  --cursor-crowbar: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cg transform='rotate(-25 15 15)'%3E%3Crect x='13' y='7' width='4' height='19' rx='1' fill='%236e747c' stroke='%2312151a' stroke-width='1.3'/%3E%3Cpath d='M11 4 Q9 1.5 12.5 0.8 Q18 -0.3 18.5 5 Q18.5 8.5 14 8.3 Q11 8.1 11 4 Z' fill='%238f3d2c' stroke='%2312151a' stroke-width='1.2'/%3E%3Crect x='12.5' y='22' width='5' height='6' rx='1' fill='%234a3a29' stroke='%2312151a' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E")
    12 4, crosshair;

  /* Die greifende Hand fürs Schieben von Karte und Bildausschnitt.
     Ab Werk ABSICHTLICH der Systemzeiger: "grab" und "grabbing" sind die
     einzigen Zeiger, die jedes Betriebssystem im eigenen Stil zeigt, und ein
     gezeichneter Ersatz wäre hier schlechter als das Original. Die
     Icon-Werkstatt (/dev/icons) kann die Variable trotzdem auf eine gewürfelte
     Ritterhand umbiegen — dann gilt sie überall, wo geschoben wird. */
  --cursor-hand: grab;
  --cursor-hand-zu: grabbing;
}

/* --- Grundgerüst ---------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  /* Grundmaß der ganzen Oberfläche. Von 17 auf 19 angehoben: Bei 17 px waren
     die kleinen Beschriftungen (0,7 rem = 12 px) auf einem großen Bildschirm
     kaum zu entziffern. Alles in rem wächst mit — deshalb steht die Änderung
     hier und nicht an hundert Einzelstellen. */
  font-size: 19px;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--stone-900);
  /* rauer Steingrund: zwei weiche Lichtquellen, dazu ein Korn-Overlay */
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(122, 145, 102, 0.06), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(168, 129, 61, 0.05), transparent 60%);
  background-attachment: fixed;
  cursor: var(--cursor-sword);
}

/* Feines Korn über allem — nimmt den digitalen Flachheitseindruck */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- Typografie ----------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: inherit;
  font-weight: 400;
  color: var(--brass-light);
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0 0 0.6rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

h1 {
  font-size: 2.5rem;
  line-height: 1.15;
}
h2 {
  font-size: 1.6rem;
  margin-top: 2rem;
  color: var(--brass);
}
h3 {
  font-size: 1.2rem;
}

p {
  line-height: 1.65;
  margin: 0 0 0.9rem;
  max-width: 68ch;
}

a {
  color: var(--brass-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 129, 61, 0.35);
  cursor: var(--cursor-sword-hot);
}
a:hover {
  color: #e3c88a;
  border-bottom-color: var(--brass-light);
}

code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--iron);
  border-radius: 2px;
  padding: 0.1em 0.35em;
  color: var(--parchment-dark);
  word-break: break-all;
}

.muted {
  color: var(--text-dim);
  font-size: 0.92rem;
}

.error {
  color: var(--fire-light);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Zierleiste mit Raute in der Mitte */
.rule {
  border: 0;
  height: 1px;
  margin: 1.6rem 0;
  background: linear-gradient(90deg, transparent, var(--iron) 15%, var(--iron) 85%, transparent);
  position: relative;
  overflow: visible;
}
.rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: var(--brass-dark);
  border: 1px solid var(--brass);
  transform: rotate(45deg);
}

/* --- Rahmen und Tafeln ---------------------------------------------------- */

.container {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}
.container.wide {
  max-width: 1140px;
}

.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 140px), var(--stone-700);
  border: 1px solid var(--iron);
  border-radius: 2px;
  padding: 1.9rem 2.1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 60px rgba(0, 0, 0, 0.35),
    0 14px 40px rgba(0, 0, 0, 0.55);
}

/* vier Nieten in den Ecken der Tafel */
.panel::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--iron-light) 0 1.4px, rgba(0, 0, 0, 0.5) 1.9px, transparent 2.4px);
  background-size: 7px 7px;
  background-repeat: no-repeat;
  background-position:
    0 0,
    100% 0,
    0 100%,
    100% 100%;
}

/* Pergament-Einleger für Urkunden, Chronik, Listen */
.parchment {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 70%),
    linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  color: var(--ink);
  border: 1px solid #8d7d5c;
  border-radius: 2px;
  padding: 1.1rem 1.3rem;
  box-shadow:
    inset 0 0 30px rgba(120, 96, 55, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.4);
}
.parchment .muted {
  color: var(--ink-soft);
}
.parchment a {
  color: #6a4c1e;
  border-bottom-color: rgba(106, 76, 30, 0.4);
}

/* --- Kopfzeile der Seiten ------------------------------------------------- */

.crest {
  text-align: center;
  margin-bottom: 1.8rem;
}
.crest .sigil {
  display: block;
  margin: 0 auto 0.4rem;
}
.crest h1 {
  font-size: 3.1rem;
  margin: 0;
}
.crest .motto {
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
}

nav.wegweiser {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--iron);
  font-size: 0.9rem;
}
nav.wegweiser a {
  border-bottom: none;
}
nav.wegweiser form {
  display: inline;
  margin-left: auto;
}

/* --- Bedienelemente ------------------------------------------------------- */

form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 340px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

input[type="text"],
input[type="password"] {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: #14171a;
  border: 1px solid var(--iron);
  border-radius: 2px;
  padding: 0.55rem 0.7rem;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.55);
  cursor: var(--cursor-quill);
}
input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(168, 129, 61, 0.22);
}
input::placeholder {
  color: #6e685d;
}

button,
.btn {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #f2e8d4;
  background: linear-gradient(180deg, #3b424a, #262b31);
  border: 1px solid var(--brass-dark);
  border-radius: 2px;
  padding: 0.5rem 1.15rem;
  width: fit-content;
  cursor: var(--cursor-sword-hot);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4),
    0 2px 3px rgba(0, 0, 0, 0.4);
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
}
button:hover,
.btn:hover {
  border-color: var(--brass);
  background: linear-gradient(180deg, #464e58, #2c3239);
}
button:active,
.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55);
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--brass-light);
  outline-offset: 2px;
}

button.gefahr {
  border-color: var(--blood);
  background: linear-gradient(180deg, #52302a, #331d19);
  color: #f0d5c8;
}
button.gefahr:hover {
  border-color: #b8543c;
  background: linear-gradient(180deg, #63392f, #3d211b);
}

button.schlicht {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--text-dim);
  padding: 0;
  font-weight: 400;
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: rgba(146, 139, 125, 0.4);
}
button.schlicht:hover {
  color: var(--brass-light);
  background: none;
}

/* --- Tabellen als Register ------------------------------------------------ */

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 0.8rem;
  font-size: 0.95rem;
}
th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--brass-dark);
  white-space: nowrap;
}
td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(59, 65, 74, 0.7);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
tbody tr:last-child td {
  border-bottom: none;
}
tbody tr:hover td {
  background: rgba(168, 129, 61, 0.06);
}

.parchment th {
  color: #6a4c1e;
  border-bottom-color: rgba(106, 76, 30, 0.45);
}
.parchment td {
  border-bottom-color: rgba(106, 76, 30, 0.2);
}
.parchment tbody tr:hover td {
  background: rgba(106, 76, 30, 0.07);
}

.tabelle-scroll {
  overflow-x: auto;
}

/* Verstorbene Bewohner in der Liste */
tr.tot td {
  opacity: 0.5;
  text-decoration: line-through;
}

/* ===========================================================================
   Spiel-HUD (PixiJS-Ansicht)
   =========================================================================== */

body.spiel {
  overflow: hidden;
  height: 100vh;
  /* Soll sich wie ein Spiel anfassen, nicht wie eine Webseite: kein
     Markieren beim Ziehen über die Karte, keine Lupe/Auswahl auf dem HUD,
     kein Bild-Wegziehen. Eingabefelder bleiben ausgenommen (weiter unten). */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
body.spiel img {
  -webkit-user-drag: none;
  user-select: none;
}
/* Wo doch getippt wird, muss Markieren weiter gehen */
body.spiel input,
body.spiel textarea {
  user-select: text;
  -webkit-user-select: text;
}
body.spiel::before {
  opacity: 0.18;
}

#game {
  position: absolute;
  inset: 0;
  cursor: var(--cursor-sword);
  /* Der Browser darf Wischen und Aufziehen nicht selbst auswerten — beides
     gehört der Burgansicht (schieben und zoomen, siehe main.ts). Sonst
     scrollt am Handy die Seite, statt dass sich die Karte bewegt. */
  touch-action: none;
}
/* Zeiger steht über einem Gebäude (main.ts setzt die Klasse aus demselben
   Treffertest, den auch der Klick benutzt). Steht VOR bauen/abreissen: dort
   soll das Werkzeug in der Hand bleiben, auch über einem Haus. */
#game.zeigen {
  cursor: var(--cursor-gauntlet);
}
#game.bauen {
  cursor: var(--cursor-hammer);
}
#game.abreissen {
  cursor: var(--cursor-fackel);
}
#game canvas {
  display: block;
}

.hud {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
.hud > * {
  pointer-events: auto;
}

/* Kopfband: Eisenleiste mit Messingkante */
#topbar {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  /* Mehr Luft als früher: Das Kopfband trägt jetzt die doppelt großen
     Vorratsembleme, und die brauchen Raum über und unter sich, sonst kleben
     sie an Rand und Bildkante. */
  padding: 0.65rem 1.1rem;
  background: linear-gradient(180deg, rgba(34, 38, 43, 0.96), rgba(18, 20, 23, 0.96));
  border-bottom: 1px solid var(--brass-dark);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
#topbar .title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--brass-light);
  line-height: 1.1;
}
#topbar .season {
  font-size: 0.95rem;
  color: var(--moss);
  letter-spacing: 0.04em;
}
#topbar .links {
  margin-left: auto;
  display: flex;
  gap: 1.05rem;
  align-items: center;
  font-size: 0.98rem;
}
/* --- Die Knöpfe des Kopfbands -----------------------------------------------
   Landkarte, Chronik und Einstellungen tun dasselbe: eine andere Ansicht
   öffnen. Sie tragen deshalb EINE gemeinsame Form statt drei ähnlicher —
   vorher waren zwei davon Links mit Wegzeichen und einer ein Knopf ohne, und
   sie standen nur zufällig ungefähr gleich da.

   Die Wegzeichen sind weg, weil sie bei 12 Pixeln nichts beitrugen: Karte,
   Buch und Rad waren kaum auseinanderzuhalten, und das ausgeschriebene Wort
   daneben sagte ohnehin alles.

   Ein <a> und ein <button> sehen von Haus aus verschieden aus (Schrift,
   Polsterung, Zeilenhöhe). Deshalb wird hier ALLES gesetzt, was sie
   unterscheidet — sonst fällt die Gleichheit beim nächsten Browser wieder
   auseinander. */
#topbar .links .kopfknopf {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.12rem 0.25rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(168, 129, 61, 0.35);
  border-radius: 0;
  color: var(--brass-light);
  font: inherit;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
  cursor: var(--cursor-sword-hot);
  /* Auch das Aufleuchten muss gleich sein: Der <button> erbte 0,12 s von der
     allgemeinen Knopfregel, die beiden <a> schalteten hart um. Nebeneinander
     fällt das auf. */
  transition: border-color 0.12s, color 0.12s;
}
#topbar .links .kopfknopf:hover,
#topbar .links .kopfknopf.offen {
  border-bottom-color: var(--brass);
  color: #e8d5a8;
}

.spielername {
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0.1rem 0.2rem;
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.1;
  color: var(--brass-light);
  cursor: pointer;
  white-space: nowrap;
}
.spielername:hover {
  border-bottom-color: var(--brass);
  color: #e8d5a8;
}
/* Noch kein Profil geladen: sichtbar, aber ohne Versprechen. */
.spielername.leer {
  color: var(--text-dim);
  cursor: default;
  pointer-events: none;
}

/* --- Das Einstellungsmenü ---------------------------------------------------
   Vorher ein Speichenrad als Symbol. Es war weder als Knopf noch als
   Einstellungen zu erkennen — ein Bild, das man erklären muss, erklärt nichts.
   Jetzt das Wort, in derselben Form wie Landkarte und Chronik daneben. */
.einstellmenue { position: relative; display: flex; align-items: center; }
/* Die eigene Form des Einstellknopfs ist entfallen — er trägt jetzt
   .kopfknopf wie Landkarte und Chronik. Übrig bleibt nur, was NUR ihn
   betrifft: dass er ein aufklappbares Menü hat. */

#optionsmenue {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 60;
  width: 15rem;
  padding: 0.4rem;
  background: linear-gradient(180deg, rgba(28, 31, 36, 0.985), rgba(18, 20, 23, 0.985));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7);
}
#optionsmenue[hidden] { display: none; }

/* JEDE Zeile hat denselben Aufbau: Symbolspalte, Beschriftung, Rest. Vorher
   waren es drei verschiedene Formen — ein Link, ein Knopf und eine zentrierte
   Überschrift über einem freischwebenden Regler —, und deshalb stand nichts
   untereinander. Ein Raster mit fester erster Spalte richtet alle Symbole auf
   dieselbe Kante aus, egal wie breit die Beschriftung ist. */
/* Über die ID adressiert, nicht über die Klasse: "#topbar .linkbtn" weiter
   unten ist ein ID-Selektor und schlug jede Klassenregel — der Tonknopf behielt
   dadurch Polsterung und Unterstrich aus dem Kopfband und stand acht Pixel
   weiter links als die übrigen Zeilen. */
#optionsmenue > a,
#optionsmenue > button.linkbtn,
#optionsmenue > label.optionszeile {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  align-items: center;
  gap: 0 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.5rem;
  background: none;
  border: none;
  border-radius: 2px;
  color: var(--brass-light);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
#optionsmenue > a:hover,
#optionsmenue > button.linkbtn:hover {
  background: rgba(168, 129, 61, 0.16);
  color: #e8d5a8;
}
/* Die Symbole haben im Kopfband eine eigene Größe — hier wird sie noch einmal
   festgesetzt, damit die Spalte wirklich überall gleich breit ist. */
#optionsmenue .navicon {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Die Musikzeile. Der Regler bekommt eine eigene Zeile UNTER der Beschriftung,
   aber in derselben Spalte — so bleibt die Symbolkante gewahrt und der Regler
   hat die volle Breite, die er zum Treffen braucht. */
#optionsmenue > label.optionszeile {
  color: var(--text-dim);
  cursor: default;
}
#optionsmenue > label.optionszeile:hover { background: none; }
#optionsmenue input.musikregler {
  /* Im Kopfband ist der Regler 4rem breit; hier hat er eine eigene Zeile und
     soll sie ausfüllen — sonst ist er kaum zu treffen. */
  width: 100%;
}
#optionsmenue > label.optionszeile input {
  grid-column: 2;
  width: 100%;
  margin-top: 0.3rem;
  cursor: pointer;
}

/* Trennstrich vor dem Abmelden: Was die Sitzung beendet, gehört nicht in eine
   Reihe mit dem Lautstärkeregler. */
.optionstrenner {
  height: 0;
  margin: 0.35rem 0.5rem;
  border: none;
  border-top: 1px solid var(--iron);
}

#topbar .linkbtn {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(168, 129, 61, 0.35);
  color: var(--brass-light);
  font: inherit;
  font-size: 0.9rem;
  padding: 0;
  cursor: var(--cursor-sword-hot);
}
#topbar .linkbtn:hover,
#topbar .linkbtn.stumm {
  color: #e3c88a;
  border-bottom-color: var(--brass-light);
}
#topbar .linkbtn.stumm {
  opacity: 0.55;
}
/* Musikregler: der Browser-Standard bringt ein blaugraues Bedienelement mit,
   das im Messing-Kopfband wie ein Fremdkörper wirkt — deshalb Schiene und
   Griff komplett selbst gezeichnet. Die ::-webkit-/::-moz-Paare sind nötig,
   weil sich beide Engines hier nicht auf eine Schreibweise geeinigt haben. */
#topbar .musikregler {
  width: 4rem;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  cursor: var(--cursor-sword-hot);
}
#topbar .musikregler::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: var(--brass-dark);
}
#topbar .musikregler::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: var(--brass-dark);
}
#topbar .musikregler::-moz-range-progress {
  height: 2px;
  border-radius: 1px;
  background: var(--brass-light);
}
#topbar .musikregler::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-radius: 50%;
  border: none;
  background: var(--brass-light);
}
#topbar .musikregler::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--brass-light);
}
#topbar .musikregler:hover::-webkit-slider-thumb {
  background: #e3c88a;
}
#topbar .musikregler:hover::-moz-range-thumb {
  background: #e3c88a;
}

/* Die Vorratsleiste sitzt unten rechts, ÜBER der Bauleiste.
   Rechtsbündig und von unten nach oben umbrechend: Die Reihe wächst damit
   nach oben in den leeren Himmel statt in die Bauleiste hinein, und die
   Stimmung bleibt am selben Fleck, egal wie viele Waren man führt. */
#vorratsleiste {
  /* Rechter Teil der Fußleiste — kein eigenes schwebendes Feld mehr. Dort ist
     der Platz, den die Bauwerkzeuge nicht brauchen, und Vorrat und Baukosten
     stehen endlich nebeneinander statt übereinander. */
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
  flex: 0 1 auto;
}
#resources {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
}
.res {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  /* Die Zahl wächst mit dem Emblem mit — ein 32-Pixel-Zeichen neben einer
     0,92-rem-Ziffer sähe aus, als hinge die Zahl daran statt dazuzugehören. */
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--iron);
  border-radius: 2px;
  padding: 0.1rem 0.35rem;
}
/* Wohnraum ist keine Ware: eigene Einfassung, damit er sich vom Lager
   abhebt. Voll = messing, überbelegt = Warnfarbe (jemand schläft draußen). */
.res.wohnraum {
  border-color: var(--brass-dark);
  background: rgba(109, 84, 38, 0.22);
}
/* Einfluss ist ebenfalls keine Ware — er liegt in keinem Speicher und wird
   nicht gehandelt. Messing statt Eisen, und eine Lücke davor, damit er sich
   vom Lagerbestand absetzt statt als weiterer Sack Getreide gelesen zu werden. */
.res.res-einfluss {
  margin-left: 0.55rem;
  border-color: var(--brass);
  background: rgba(168, 129, 61, 0.18);
  color: var(--brass-light);
}
/* Militärstärke — wie der Einfluss keine Ware, aber ein anderer Stoff:
   Abschreckung statt Ansehen. Deshalb Eisenton statt Messing, ohne zusätzliche
   Lücke: Einfluss und Militär bilden am Ende der Leiste ein Paar, das sich
   gemeinsam vom Lagerbestand absetzt. */
.res.res-militaer {
  border-color: #6b7889;
  background: rgba(107, 120, 137, 0.2);
  color: #b9c0c8;
}
.res.wohnraum.voll {
  border-color: var(--brass);
  color: var(--brass-light);
}
.res.wohnraum.knapp {
  border-color: var(--blood);
  background: rgba(143, 61, 44, 0.28);
  color: #f0c9bd;
}

/* Die Vorratsembleme in doppelter Größe.
   32 statt 16 Pixel ist ABSICHTLICH genau das Doppelte und keine krumme Zahl
   dazwischen: Die Icons sind 16er-Pixelraster, und nur bei ganzzahliger
   Verdopplung wird aus jedem Pixel ein sauberes 2x2-Quadrat. Bei 24 oder 28
   Pixeln fielen Kanten auf halbe Bildpunkte und das Emblem wirkte unscharf —
   trotz image-rendering: pixelated. */
.res .resicon {
  width: 32px;
  height: 32px;
  flex: none;
  image-rendering: pixelated;
}

/* Bauleiste: Steintafeln mit Messingrand */
#buildbar {
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1rem;
  background: linear-gradient(0deg, rgba(34, 38, 43, 0.96), rgba(18, 20, 23, 0.94));
  border-top: 1px solid var(--brass-dark);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.6);
  /* KEIN overflow-x mehr auf der ganzen Leiste: Sonst würden die Vorräte
     rechts mitscrollen, sobald die Werkzeuge breiter werden als der Schirm.
     Das Rollen übernimmt der Werkzeugkasten für sich. */
}
/* Links die Bauwerkzeuge. Sie dürfen wachsen und notfalls rollen — die
   Vorräte daneben bleiben stehen. */
#bauwerkzeuge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow-x: auto;
}
.buildbtn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.25;
  text-align: left;
  /* Dieselbe Höhe wie ein Vorratskästchen am anderen Ende der Fußleiste:
     32 Pixel Emblem plus Polsterung und Rahmen. Die Erklärungen, die früher
     als zweite Zeile im Knopf standen, hängen jetzt am Zeiger (title in
     ui.ts) — in einer Fußleiste zählt Ruhe, und wer die Taste sucht, hält
     ohnehin kurz an. */
  min-height: calc(32px + 0.2rem + 2px);
  padding: 0.1rem 0.7rem;
  color: var(--text);
  background: linear-gradient(180deg, #333941, #22262b);
  border: 1px solid var(--iron);
  border-radius: 2px;
  white-space: nowrap;
  cursor: var(--cursor-sword-hot);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.12s, background 0.12s;
}

/* Handgezeichnete 16px-Pixel-Icons (scripts/build-building-icons.js) —
   Werkzeug oder Erzeugnis statt winzigem Gebäude, das ist bei dieser Größe
   deutlich schneller lesbar. */
.buildicon {
  width: 16px;
  height: 16px;
  flex: none;
  image-rendering: pixelated;
}
.buildbtn.locked .buildicon {
  filter: grayscale(1);
}
/* Im Pergamentzettel der Bauvorhaben läuft das Icon in der Textzeile mit */
.queueitem .buildicon {
  vertical-align: -3px;
  margin-right: 0.35rem;
}

/* Kopfzeilen-Wege: gezeichnete Strichsymbole statt Pixelart — das hier ist
   Bedienoberfläche, kein Gegenstand aus der Spielwelt (wie das Turmsignet).
   Alle vier Symbole teilen sich eine Strichstärke und einen Zeichenstil; die
   Linien liegen im Entwurf auf halben Koordinaten (2.5, 5.5 …), damit sie bei
   dieser Größe auf ganze Gerätepixel fallen statt zu verwischen. */
.navicon {
  /* 12 statt 10 Pixel: Das Kopfband ist insgesamt gewachsen, und bei 10 Pixeln
     sahen die Wegzeichen daneben aus wie Streichhölzer. Weiterhin ein glatter
     Teiler der 16er-Zeichenfläche (0,75), damit die Striche nicht verwischen —
     siehe die Strichstärke unten. */
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-right: 0.32rem;
  flex: none;
  /* Voll deckend in Messing — gedimmt wirkten sie grau statt golden. */
  color: var(--brass-light);
}
.navicon path {
  fill: none;
  stroke: currentColor;
  /* 12px Anzeige aus 16er-Zeichenfläche = Faktor 0.75; 1.34 × 0.75 = genau
     1 Gerätepixel. Sub-Pixel-Striche waren der Grund für den Grauschleier. */
  stroke-width: 1.34;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#topbar .links a:hover .navicon,
#topbar .linkbtn:hover .navicon {
  color: #e3c88a;
}

/* Der Ton-Knopf tauscht beim Umschalten nur seine Beschriftung aus (siehe
   ui.ts), das Symbol bleibt stehen. Bei "Ton aus" verschwindet die Schallwelle
   — der Zustand ist damit auch ohne Lesen der Beschriftung erkennbar. */
#soundtoggle {
  display: inline-flex;
  align-items: center;
}
#soundtoggle.stumm .tonwelle {
  display: none;
}
/* Ausgewähltes Werkzeug: Icon leicht anheben, damit die Wahl auch ohne
   Farbunterschied im Augenwinkel erkennbar bleibt */
.buildbtn.selected .buildicon {
  filter: brightness(1.15) drop-shadow(0 0 4px rgba(204, 167, 94, 0.6));
}
.buildbtn:hover {
  border-color: var(--brass);
}
.buildbtn.selected {
  background: linear-gradient(180deg, #6d5426, #4a3819);
  border-color: var(--brass-light);
  color: #f7ecd6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 10px rgba(168, 129, 61, 0.35);
}
.buildbtn.locked {
  opacity: 0.4;
  cursor: var(--cursor-sword);
}

/* ===========================================================================
   Baumodus: seitliches Gebäudemenü (Baumodus-Dokument, Teil 2)
   =========================================================================== */

#baumenu {
  top: 3.6rem;
  bottom: 4.2rem;
  left: 0.7rem;
  width: 21rem;
  overflow-y: auto;
  padding: 0.6rem;
  background: linear-gradient(180deg, rgba(28, 31, 36, 0.97), rgba(18, 20, 23, 0.97));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
}
#baumenu .kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
#baumenu .titel {
  font-family: inherit;
  font-size: 1.3rem;
  color: var(--brass-light);
}
#baumenu .fertig {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.25rem 0.8rem;
  color: #f7ecd6;
  background: linear-gradient(180deg, #6d5426, #4a3819);
  border: 1px solid var(--brass-light);
  border-radius: 2px;
  cursor: var(--cursor-sword-hot);
}
#baumenu .kategorie {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0.7rem 0 0.25rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--iron);
}
#baumenu .kategorie.kat-rohstoffe { border-left-color: #5d8a4f; }
#baumenu .kategorie.kat-verarbeitung { border-left-color: #b0793e; }
#baumenu .kategorie.kat-sozial { border-left-color: #4f7a9e; }
#baumenu .kategorie.kat-verteidigung { border-left-color: #8a8f96; }

.baueintrag {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  margin-bottom: 0.3rem;
  padding: 0.4rem 0.5rem;
  font-family: var(--font-body);
  color: var(--text);
  background: linear-gradient(180deg, #2c3138, #22262b);
  border: 1px solid var(--iron);
  border-left-width: 3px;
  border-radius: 2px;
  cursor: var(--cursor-sword-hot);
  transition: border-color 0.12s, background 0.12s;
}
.baueintrag.kat-rohstoffe { border-left-color: #5d8a4f; }
.baueintrag.kat-verarbeitung { border-left-color: #b0793e; }
.baueintrag.kat-sozial { border-left-color: #4f7a9e; }
.baueintrag.kat-verteidigung { border-left-color: #8a8f96; }
.baueintrag:hover { border-color: var(--brass); }
.baueintrag.aktiv {
  background: linear-gradient(180deg, #6d5426, #4a3819);
  border-color: var(--brass-light);
  color: #f7ecd6;
}
.baueintrag.locked { opacity: 0.4; cursor: var(--cursor-sword); }
.baueintrag .buildicon { width: 28px; height: 28px; flex: none; image-rendering: pixelated; margin-top: 2px; }
.baueintrag .text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.baueintrag .name { font-size: 0.98rem; }
.baueintrag .flavor { font-size: 0.8rem; font-style: italic; color: var(--text-dim); }
.baueintrag.aktiv .flavor { color: #e2cfa8; }
.baueintrag .mechanik { font-size: 0.78rem; color: var(--text-dim); }
.baueintrag.aktiv .mechanik { color: #e2cfa8; }
.baueintrag .fuss { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.15rem; }
/* Auch in den Baukosten die doppelte Größe — dieselbe Überlegung wie im
   Kopfband: Woraus etwas gebaut wird, ist die wichtigste Zeile des Eintrags.
   32 Pixel statt 12, weil zwischen 16 und 32 kein Maß liegt, das die
   16er-Pixelraster scharf hält (24 fiele auf halbe Bildpunkte). */
.baueintrag .fuss .res { font-size: 0.92rem; padding: 0 0.35rem; }
.baueintrag .fuss .resicon { width: 32px; height: 32px; }
.baueintrag .bauzeit { font-size: 0.75rem; color: var(--text-dim); margin-left: auto; }

/* Besuch einer fremden Burg: statt Werkzeugen steht dort, wo man ist */
.besuchsleiste {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.05rem;
  padding: 0.2rem 0.9rem 0.2rem 0.2rem;
  margin-right: 0.6rem;
  border-right: 1px solid var(--iron);
}
.besuchsleiste .ort {
  font-family: inherit;
  font-size: 1.15rem;
  color: var(--brass-light);
  line-height: 1.2;
}
.besuchsleiste .wer {
  font-size: 0.86rem;
  color: var(--text);
}
.besuchsleiste .hinweis {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--text-dim);
}

/* "Bauen"-Einstieg unten in der Leiste */
.bauenbtn { border-color: var(--brass-dark); }
.bauenbtn.selected {
  background: linear-gradient(180deg, #6d5426, #4a3819);
  border-color: var(--brass-light);
  color: #f7ecd6;
}

/* Abrisstool: eigene Warnfarbe statt Bau-Messing, damit es sich klar von
   den Bau-Knöpfen abhebt — hier wird zerstört, nicht errichtet. */
/* Bewusst kleiner als die Bau-Knöpfe: Abreißen ist die seltene Ausnahme,
   es soll erreichbar sein, aber nicht mit dem Bauen um Aufmerksamkeit
   konkurrieren. Nur das Symbol plus Kurzwort, ohne Erklärzeile. */
.abrissbtn {
  border-color: var(--blood);
  margin-right: 0.6rem;
  font-size: 0.78rem;
  padding: 0.2rem 0.45rem;
  gap: 0.28rem;
}
.abrissbtn .buildicon {
  width: 16px;
  height: 16px;
}
.abrissbtn small {
  display: none;
}
.abrissbtn.selected {
  background: linear-gradient(180deg, #7a2e20, #4a1810);
  border-color: var(--blood);
  color: #ffe3d8;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 10px rgba(143, 61, 44, 0.45);
}
.buildbtn small {
  display: block;
  font-size: 0.82rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.buildbtn.selected small {
  color: #e2cfa8;
}

/* Bauvorhaben rechts als kleine Pergamentzettel */
#queue {
  top: calc(3.6rem + var(--bedrohungen-hoehe, 0rem));
  right: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 260px;
}

/* Ausbau-Tafel: steht über den Bauvorhaben, damit die Stufe des Bergfrieds
   nicht zwischen den Baustellen untergeht. */
/* Ausgang aus dem Baumodus — dieselbe Ecke, die früher die Ausbau-Tafel
   belegte. Messing statt Eisen: Er beendet einen Modus, das ist keine
   beiläufige Navigation. */
#baumodusaus {
  top: calc(3.6rem + var(--bedrohungen-hoehe, 0rem));
  right: 0.7rem;
  /* Der Knopf trägt selbst die Klasse .hud, und die setzt pointer-events auf
     none — die Regel darunter (.hud > *) schaltet nur die KINDER wieder
     scharf. Anklickbar war dadurch allein das kleine Kreuz-Icon, nicht die
     Fläche und nicht die Schrift daneben. Hier steht der Knopf selbst, also
     muss er es selbst zurücknehmen. */
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  /* Einzeilig: "Baumenü verlassen" umbrechen zu lassen macht aus dem Schild
     einen Klotz, und die Zeile darunter rutscht in die Bauvorhaben. */
  white-space: nowrap;
  gap: 0.55rem;
  /* Bewusst größer als die übrigen HUD-Schilder: Dies ist der einzige Knopf,
     den man SUCHT, während man ihn braucht — man will aus dem Baumodus heraus
     und schaut dabei aufs Gelände, nicht auf die Leiste. Er darf deshalb ins
     Auge fallen. Die Höhe reicht auch für den Daumen auf einem Tablet. */
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--brass-light);
  background: rgba(18, 20, 23, 0.92);
  border: 2px solid var(--brass-dark);
  border-radius: 2px;
  cursor: pointer;
}
#baumodusaus:hover {
  background: rgba(40, 34, 22, 0.95);
  border-color: var(--brass);
}
#baumodusaus .navicon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
/* Die Bauvorhaben rücken unter das Schild — sie teilen sich dieselbe Ecke.
   Ohne diese Zeile lägen beide bei 3,6rem übereinander; mit dem größeren
   Schild fiele das sofort auf. Dieselbe Mechanik wie bei der Ausbau-Tafel. */
#baumodusaus:not([style*="none"]) ~ #queue {
  top: calc(6.9rem + var(--bedrohungen-hoehe, 0rem));
}

#ausbau {
  top: calc(3.6rem + var(--bedrohungen-hoehe, 0rem));
  right: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 260px;
  margin-bottom: 0.5rem;
}
#ausbau:not([style*="none"]) ~ #queue {
  top: calc(9.5rem + var(--bedrohungen-hoehe, 0rem));
}
.ausbauitem {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: rgba(18, 20, 23, 0.94);
  border: 1px solid var(--brass-dark);
  border-radius: 2px;
  padding: 0.5rem 0.6rem;
}
.ausbauitem .kopf {
  font-size: 0.86rem;
  color: var(--brass-light);
}
.ausbauitem button {
  margin-top: 0.15rem;
  background: linear-gradient(180deg, #6d5426, #43341a);
  border: 1px solid var(--brass);
  color: #f7ecd6;
  border-radius: 2px;
  padding: 0.3rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  cursor: var(--cursor-sword-hot);
}
.ausbauitem button:hover:not(:disabled) {
  border-color: var(--brass-light);
  box-shadow: 0 0 10px rgba(168, 129, 61, 0.35);
}
.ausbauitem button:disabled {
  background: var(--stone-700);
  border-color: var(--iron);
  color: var(--text-dim);
  cursor: var(--cursor-sword);
}
.queueitem {
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dark));
  color: var(--ink);
  border: 1px solid #8d7d5c;
  border-radius: 2px;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}
.queueitem .bar {
  height: 4px;
  background: rgba(60, 48, 28, 0.35);
  border-radius: 2px;
  margin-top: 0.3rem;
  overflow: hidden;
}
.queueitem .bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--brass-dark), var(--brass));
}

#toast {
  top: 3.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #43241a, #2a1610);
  border: 1px solid var(--fire);
  color: #f0d3bd;
  padding: 0.5rem 1rem;
  border-radius: 2px;
  font-size: 0.92rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s;
}
#toast.show {
  opacity: 1;
}

#hint {
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-dim);
  font-size: 0.85rem;
  background: rgba(18, 20, 23, 0.8);
  border: 1px solid var(--iron);
  padding: 0.25rem 0.8rem;
  border-radius: 2px;
}
/* Im Baumodus steht die Bauleiste unten in der Mitte — genau dort, wo der
   Hinweisbalken saß. Er legte sich damit über die Ikonenreihe: Wer auf eine
   verdeckte Ikone klickte, traf zwar durch (pointer-events: none), schaltete
   aber sein eigenes Werkzeug wieder ab — als hätte man den Hinweis
   weggeklickt. Also über die Leiste damit. Die Höhe misst ui.ts und schreibt
   sie in --baumenu-hoehe, weil die Leiste mit der Infokarte wächst. */
body.baumodus #hint {
  bottom: calc(var(--baumenu-hoehe, 12rem) + 1.4rem);
}

/* Entwickler-Panel — bewusst grell abgesetzt (Feuer statt Messing), damit
   nie unklar ist, dass Testwerkzeuge und nicht echte Spielmechanik am Werk sind */
#devpanel {
  top: 3.6rem;
  left: 0.7rem;
  transition: left 0.18s;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(18, 20, 23, 0.94);
  border: 1px solid var(--fire);
  border-radius: 2px;
  padding: 0.6rem 0.7rem;
  min-width: 190px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  /* Gedeckelt und scrollbar. Die Werkstatt wächst mit jedem neuen Werkzeug;
     zuletzt war sie 1266 px hoch und damit höher als das Fenster — sie deckte
     die halbe Karte ab, und da ihre Zeilen Klicks annehmen, ging jeder Klick
     darauf ins Leere statt aufs Spielfeld. Ein Testpanel darf das Spiel nie
     unbedienbar machen. */
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#devpanel .kopf {
  font-size: 0.80rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fire-light);
  font-weight: 600;
}
/* Abstand vor jeder Gruppe außer der ersten */
#devpanel .kopf ~ .kopf {
  margin-top: 0.5rem;
  border-top: 1px solid rgba(194, 102, 46, 0.3);
  padding-top: 0.5rem;
}
/* Nachrichtlich, nicht bedienbar — etwa das eingestellte Zeittempo, das in
   config/world.json steht und hier nur erklärt, warum die Welt so rennt. */
#devpanel .hinweis {
  margin: 0;
  font-size: 0.80rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--text-dim);
}
#devpanel .reihe {
  display: flex;
  gap: 0.3rem;
}
#devpanel .reihe button {
  flex: 1;
}
#devpanel button.klein {
  font-size: 0.82rem;
  padding: 0.22rem 0.4rem;
}
/* Zoomgrenzen-Regler: Beschriftung mit Wert links, Schieber rechts daneben */
#devpanel .zoomzeile {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  white-space: nowrap;
}
#devpanel .zoomzeile strong {
  color: var(--brass-light);
  font-weight: 600;
  min-width: 1.7rem;
}
#devpanel .zoomzeile input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--brass);
}
/* Aktuell eingestellte Tages-/Jahreszeit hervorheben */
#devpanel button.aktiv {
  border-color: var(--fire-light);
  background: linear-gradient(180deg, #6b4527, #4a2f1b);
  color: #ffd9b0;
}
#devpanel button {
  font-size: 0.8rem;
  padding: 0.3rem 0.55rem;
  border-color: var(--fire);
  background: linear-gradient(180deg, #3d2c22, #2a1d16);
}
#devpanel button:hover {
  border-color: var(--fire-light);
}
/* Sprite-Editor-Link: wie ein .klein-Knopf, aber ein <a> statt <button> */
#devpanel a.klein {
  display: block;
  text-align: center;
  font-size: 0.82rem;
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--fire);
  border-radius: 2px;
  color: var(--text);
  background: linear-gradient(180deg, #3d2c22, #2a1d16);
  cursor: var(--cursor-sword-hot);
}
#devpanel a.klein:hover {
  border-color: var(--fire-light);
}
/* Im Baumodus belegt das Gebäudemenü die linke Spalte (21rem breit ab 0.7rem) */
/* KEIN Ausweichen mehr im Baumodus.
   Diese Regel stammt aus der Zeit, als das Baumenü eine linke Spalte war —
   die Werkstatt rückte daneben. Seit das Menü als Leiste unten sitzt, schob
   der Versatz die Werkstatt mitten ins Bild (x≈380), und weil ihre Zeilen
   Klicks annehmen, verschluckte ein unsichtbarer 400-px-Streifen jeden Klick
   auf die Karte: Man konnte kein Gebäude mehr setzen. Sie bleibt jetzt links
   stehen, wo sie hingehört. */
body.baumodus #devpanel {
  left: 0.7rem;
}

.dev-abzeichen {
  /* nüchternes Werkstatt-Schild: bewusst Grundschrift, keine Fraktur —
     das Badge erbt sonst die gotische Titelschrift der Topbar.
     Zugleich Schalter für das Werkstatt-Panel (siehe ui.ts). */
  font-family: "Garamond Bergfried", Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fire-light);
  background: rgba(194, 102, 46, 0.12);
  border: 1px solid var(--fire);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  vertical-align: 0.22em;
  cursor: var(--cursor-sword-hot);
  transition: opacity 0.12s, background 0.12s, border-color 0.12s;
}
.dev-abzeichen:hover {
  background: rgba(194, 102, 46, 0.28);
  border-color: var(--fire-light);
}
/* Werkstatt ausgeblendet: Schild tritt zurück, bleibt aber anklickbar */
.dev-abzeichen.zu {
  color: var(--text-dim);
  background: transparent;
  border-color: var(--iron);
  opacity: 0.65;
}
.dev-abzeichen.zu:hover {
  color: var(--fire-light);
  border-color: var(--fire);
  opacity: 1;
}

/* ===========================================================================
   Startbildschirm — die Burg als lebendiger Hintergrund

   Alle Bewegung steckt in CSS: das Bild driftet langsam (Ken-Burns), am Tor
   flackert Feuerschein, Nebel zieht in zwei Ebenen unterschiedlich schnell
   und gelegentlich kreuzen Krähen das Bild. Nachgeladen wird nur opener.jpg;
   die Bewegung schaltet sich über die reduced-motion-Regel weiter unten
   vollständig ab.
   =========================================================================== */

body.mit-hero {
  background-color: #08090b;
}

.hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Die Bühne: hält das Seitenverhältnis des Bildes und legt sich wie
   `object-fit: contain` in den Viewport — HÖCHSTENS so groß wie das Fenster,
   das Bild bleibt also vollständig sichtbar. Je nach Fensterform bleibt oben
   und unten oder links und rechts ein dunkler Saum; das ist der Preis dafür,
   dass nichts abgeschnitten wird.

   Bild, Lichter und Rauch liegen GEMEINSAM darin, und nur deshalb sitzt ein
   Licht auch bei jeder Fensterform auf seinem Fenster. Läge das Bild als
   background-size und die Lichter daneben im Viewport, liefen beide bei
   jedem Seitenverhältnis auseinander. */
.hero__buehne {
  --ar: calc(var(--opener-b, 2560) / var(--opener-h, 1396));
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, calc(100vh * var(--ar)));
  height: min(100%, calc(100vw / var(--ar)));
  /* Zentrierung über die EIGENSTÄNDIGE translate-Eigenschaft. Historisch war
     das nötig, weil hier eine Drift-Animation transform belegte; sie ist
     entfallen, aber die Trennung bleibt richtig — wer hier je wieder etwas
     animiert, tritt der Zentrierung nicht auf die Füße. */
  translate: -50% -50%;
  /* KEINE Bewegung mehr. Früher schwenkte hier eine Ken-Burns-Drift über das
     Bild; die setzt aber zwingend voraus, dass man in einen größeren
     Ausschnitt hineinfahren kann — und genau diesen Spielraum gibt es nicht
     mehr, seit das Bild vollständig sichtbar sein soll. Das Leben kommt
     stattdessen von Lichtern, Rauch, Nebel und Krähen. */
}

.hero__bild {
  position: absolute;
  inset: 0;
  /* Die URL kommt als Variable von der Seite (server/src/opener.ts) und trägt
     eine Version — ein ausgetauschtes Startbild erscheint dadurch sofort und
     nicht erst, wenn der Browser-Cache abgelaufen ist. */
  background-image: var(--opener-bild, url("/static/opener/opener.jpg"));
  background-size: 100% 100%;
  /* KEIN Filter. Das Bild ist eine gemalte Winternacht und bringt seine
     Stimmung selbst mit — jedes Abdunkeln nahm ihm nur Zeichnung. Lesbar
     bleibt die Anmeldetafel durch ihren eigenen Grund, nicht dadurch, dass
     die Burg dahinter gedämpft wird. */
}

/* Auf schmalen Fenstern reicht die kleine Fassung — ein 2560er Bild auf ein
   Handydisplay zu laden ist verschenkte Ladezeit. */
@media (max-width: 900px) {
  .hero__bild {
    background-image: var(--opener-bild-klein, url("/static/opener/opener-klein.jpg"));
  }
}

/* --- Lichter: von Hand gesetzte Anker (/admin/startbild) ------------------
   Jedes Licht ist ein weicher Fleck im Mischmodus „screen": Es legt Helligkeit
   auf das Bild, statt es zu übermalen — so bleibt das gemalte Fenster darunter
   sichtbar und bekommt nur seinen Schein dazu. */
.hero__lichter {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}
.hero__licht {
  position: absolute;
  display: block;
  /* Maß am Bild, nicht am Viewport: Ein Licht muss beim Zoomen mit seinem
     Fenster mitwachsen, sonst rutscht der Schein von der Öffnung. Die Maße
     sind bewusst klein — ein Lichtpunkt soll ein FENSTER andeuten, keinen
     Scheinwerfer; das Leben kommt aus dem Flackern, nicht aus der Fläche. */
  width: calc(var(--kraft, 1) * 2.3%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: hero-glimmen var(--takt, 5s) ease-in-out infinite;
}
/* Fenster: Talglicht hinter Butzenscheiben. Zittert leicht — eine Kerze
   steht nie still, aber sie tanzt auch nicht wie eine Fackel. */
.hero__licht--fenster {
  background: radial-gradient(circle, rgba(232, 190, 106, 0.58), rgba(196, 146, 68, 0.18) 40%, transparent 68%);
}
/* Fackel: unruhiger und oranger, das lebendigste der Lichter */
.hero__licht--fackel {
  width: calc(var(--kraft, 1) * 3.3%);
  background: radial-gradient(circle, rgba(238, 152, 74, 0.64), rgba(200, 104, 44, 0.22) 40%, transparent 70%);
  animation-name: hero-flackern-punkt;
}
/* Esse: das größte, tiefste Glühen — Schmiedefeuer, fast rot */
.hero__licht--esse {
  width: calc(var(--kraft, 1) * 5.5%);
  background: radial-gradient(circle, rgba(240, 130, 58, 0.68), rgba(186, 74, 30, 0.26) 38%, transparent 70%);
  animation-name: hero-flackern-punkt;
}

/* Viele ungleich verteilte Stufen statt einer Sinuswelle: Ein regelmäßiges
   Auf und Ab liest sich als Pulsieren, erst der unregelmäßige Takt wirkt wie
   eine Flamme. Die Prozentwerte sind bewusst keine runden Zahlen. */
@keyframes hero-glimmen {
  0%,
  100% {
    opacity: 0.62;
  }
  17% {
    opacity: 1;
  }
  31% {
    opacity: 0.74;
  }
  44% {
    opacity: 0.95;
  }
  58% {
    opacity: 0.58;
  }
  69% {
    opacity: 0.9;
  }
  83% {
    opacity: 0.7;
  }
}
/* Fackel und Esse: dasselbe Prinzip, nur heftiger — mit Größensprüngen, als
   würde die Flamme im Zug stehen. */
@keyframes hero-flackern-punkt {
  0%,
  100% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(0.9);
  }
  13% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.16);
  }
  26% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.97);
  }
  39% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.1);
  }
  51% {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(0.88);
  }
  64% {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(1.07);
  }
  78% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.94);
  }
  91% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

/* Wahlspruch: sitzt IM Bild, direkt unter dem gemalten Titel „Burgherr" —
   deshalb steckt er in der Bühne und nicht im Textfluss. Nur so bleibt der
   Abstand zum Titel bei jeder Fensterform gleich; im Textfluss würde er beim
   Zuschnitt des Bildes davonwandern. Die 17,5 % sind der Fuß der gemalten
   Schrift, die Schriftgröße wächst mit dem Fenster mit. */
.hero__motto {
  position: absolute;
  top: 17.5%;
  left: 50%;
  /* Die halbe Sperrung wieder aufaddieren: Sie hängt als Leerraum HINTER dem
     letzten Buchstaben, wodurch die Schrift im Kasten links säße und die
     Zeile sichtbar neben dem gemalten Titel stünde. */
  translate: calc(-50% + 0.15em) 0;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(1rem, 2.1vw, 1.9rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #cbb794;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 26px rgba(0, 0, 0, 0.7);
}

/* Rauch-Leinwand: rechnet grob und wird hier hochskaliert — „pixelated" ist
   der ganze Trick, ohne die Regel wäre der Rauch weichgezeichneter Brei. */
.hero__rauch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0.85;
}

/* Das frühere .hero__glut — ein einzelner, fest einprogrammierter Feuerschein
   am Tor — ist entfallen: Seine Lage war auf das alte Bild eingemessen und
   passte nach dem Bildwechsel nirgends mehr hin. An seine Stelle treten die
   frei gesetzten Lichtanker oben (/admin/startbild). */

/* Nebelbänke und Krähen sind entfallen. Beide lagen ÜBER dem Bild und im
   Viewport statt in der Bühne — seit das Bild vollständig und unbewegt
   gezeigt wird, zogen sie als einzige Fremdkörper darüber hinweg, auch über
   den dunklen Saum. Was das Bild belebt, sitzt jetzt ausschließlich IM Bild:
   die gesetzten Lichter und die Rauchfahnen. */

/* Schleier: nur noch ein Hauch an den äußersten Rändern, damit das Bild nicht
   hart gegen den Fensterrand stößt. Früher lag hier ein kräftiger Verlauf,
   der die halbe Burg schluckte — die Anmeldetafel trägt ihre Lesbarkeit
   selbst, dafür muss das Bild nicht büßen. */
.hero__schleier {
  position: absolute;
  inset: 0;
  background: radial-gradient(135% 100% at 50% 45%, transparent 62%, rgba(8, 9, 11, 0.34) 100%);
}

/* --- Inhalt über der Burgansicht ----------------------------------------- */

/* Die Anmeldetafel bleibt bewusst klein: Sie ist nur ein Namensschild am Tor,
   die Burg dahinter ist die Hauptsache. Rund die halbe Fläche der früheren
   Tafel — schmaler UND knapper gepolstert, denn nur beides zusammen macht
   wirklich Platz frei. */
body.mit-hero .container {
  min-height: 100vh;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2.5rem;
}
/* Nicht jede Seite vor dem Burgbild ist ein Anmeldeformular: Die Werkstatt-
   Einfahrt (/start) stellt zwei Wege nebeneinander und erstickt in 360 px.
   Die Regel muss hier stehen, damit sie die Zeile darüber schlägt — sonst
   gewönne die spezifischere Hero-Regel gegen .container.wide. */
body.mit-hero .container.wide {
  max-width: 700px;
}

body.mit-hero .panel {
  padding: 1.1rem 1.2rem;
}
body.mit-hero label {
  font-size: 0.78rem;
  gap: 0.2rem;
}
body.mit-hero input[type="text"],
body.mit-hero input[type="password"] {
  font-size: 0.88rem;
  padding: 0.36rem 0.5rem;
}
body.mit-hero form {
  gap: 0.7rem;
}
body.mit-hero .crest .sigil {
  width: 68px;
  height: 68px;
  filter: drop-shadow(0 0 14px rgba(168, 129, 61, 0.55));
}
body.mit-hero .crest h1 {
  font-size: clamp(3.4rem, 12vw, 5.4rem);
  color: #e6cd94;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.8),
    0 0 38px rgba(168, 129, 61, 0.5);
  animation: hero-titelglut 9s ease-in-out infinite;
}
body.mit-hero .crest .motto {
  color: #a2977f;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

@keyframes hero-titelglut {
  0%,
  100% {
    text-shadow:
      0 2px 0 rgba(0, 0, 0, 0.8),
      0 0 30px rgba(168, 129, 61, 0.38);
  }
  50% {
    text-shadow:
      0 2px 0 rgba(0, 0, 0, 0.8),
      0 0 48px rgba(204, 167, 94, 0.6);
  }
}

/* Tafel wird durchscheinend — die Burg soll dahinter sichtbar bleiben */
body.mit-hero .panel {
  background: linear-gradient(180deg, rgba(48, 54, 62, 0.88), rgba(16, 18, 21, 0.92));
  backdrop-filter: blur(4px);
  border-color: rgba(109, 84, 38, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 70px rgba(0, 0, 0, 0.45),
    0 20px 60px rgba(0, 0, 0, 0.7);
}

/* Auf dem Startbildschirm ist der Knopf die Hauptsache: volle Breite,
   Messing statt Eisen, damit klar ist, wo es hineingeht. */
body.mit-hero form {
  max-width: none;
}
body.mit-hero form button[type="submit"] {
  width: 100%;
  padding: 0.45rem 0.8rem;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #6d5426, #43341a);
  border-color: var(--brass);
  color: #f7ecd6;
}
body.mit-hero form button[type="submit"]:hover {
  background: linear-gradient(180deg, #866633, #55411f);
  border-color: var(--brass-light);
  box-shadow: 0 0 18px rgba(168, 129, 61, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 16px;
  }
  .container {
    padding: 1.8rem 0.9rem 3rem;
  }
  .panel {
    padding: 1.3rem 1.1rem;
  }
  .crest h1 {
    font-size: 2.3rem;
  }
  #topbar {
    gap: 0.7rem;
    font-size: 0.9rem;
  }
  #topbar .title {
    font-size: 1.2rem;
  }
  /* Auf dem Handy zurück auf die einfache Größe. Elf doppelt große Embleme
     nebeneinander sind auf 400 Pixeln Breite vier Zeilen Kopfband — dann sieht
     man von der Burg nichts mehr. Wieder GENAU 16 Pixel, nicht irgendetwas
     dazwischen: Nur ganze Vielfache halten das Pixelraster scharf. */
  .res .resicon {
    width: 16px;
    height: 16px;
  }
  .res {
    font-size: 0.92rem;
    gap: 0.3rem;
  }
  .baueintrag .fuss .resicon,
  #baumenu .bau-info__text .resicon {
    width: 16px;
    height: 16px;
  }
}

/* ===========================================================================
   Dev-Sprite-Editor (server/src/spriteEditor.ts, server/public/sprite-editor.js)
   =========================================================================== */

.txt-klein {
  font-size: 0.8rem;
}
.se-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.2rem;
  align-items: start;
}
.se-seite label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.se-seite select {
  width: 100%;
  margin-top: 0.3rem;
  background: var(--stone-800);
  color: var(--text);
  border: 1px solid var(--iron);
  border-radius: 2px;
  padding: 0.4rem;
  font-family: var(--font-body);
}
.se-gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}
.se-gruppe button {
  text-align: left;
  background: var(--stone-800);
  border: 1px solid var(--iron);
  color: var(--text);
  padding: 0.4rem 0.6rem;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.se-gruppe button:hover:not(:disabled) {
  border-color: var(--brass);
}
.se-gruppe button.aktiv {
  background: linear-gradient(180deg, #6d5426, #43341a);
  border-color: var(--brass-light);
  color: #f7ecd6;
}
.se-gruppe button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.se-pinsel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.se-pinsel select {
  width: auto;
}
.se-anker-liste {
  border-top: 1px solid var(--iron);
  padding-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.se-ankerzeile {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.se-ankerzeile button {
  margin-left: auto;
  background: none;
  border: 1px solid var(--iron);
  color: var(--text-dim);
  border-radius: 2px;
  cursor: pointer;
  padding: 0 0.4rem;
}
.se-ankerzeile button:hover {
  border-color: var(--blood);
  color: var(--fire-light);
}
.se-punkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #14171a;
  flex: none;
}
.se-zoom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.se-zoom button {
  width: 2rem;
  height: 2rem;
  background: var(--stone-800);
  border: 1px solid var(--iron);
  color: var(--text);
  border-radius: 2px;
  cursor: pointer;
  font-size: 1.1rem;
}
/* Zeichenfläche: soll wirklich zum Arbeiten taugen. Die Höhe richtet sich
   nach dem Fenster, nicht nach einem festen Wert — beim Schattenmalen will
   man das ganze Sprite samt Randzone sehen. */
.se-canvaswrap {
  overflow: auto;
  border: 1px solid var(--iron);
  background: #1a1c20;
  height: calc(100vh - 22rem);
  min-height: 460px;
  max-width: 100%;
}
/* margin:auto statt Flex-Zentrierung: bei einer Zeichenfläche, die größer
   ist als das Fenster, wäre mit align-items:center die obere linke Ecke
   nicht mehr scrollbar. Die Bühne trägt das margin, nicht mehr das Canvas —
   sie ist der gemeinsame Bezugsrahmen für Bild, Rauch und Lichter. */
.se-buehne {
  position: relative;
  width: max-content;
  margin: auto;
}
.se-canvaswrap canvas {
  display: block;
  image-rendering: pixelated;
  cursor: crosshair;
  touch-action: none;
}
/* Rauch und Lichter liegen ÜBER dem Bild, fangen aber keine Klicks ab —
   sonst ließe sich unter einer Fackel kein Pixel mehr radieren. */
.se-buehne .se-rauch,
.se-buehne .se-lichter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.se-buehne .se-rauch {
  image-rendering: pixelated;
}
/* Mit der mittleren Maustaste wird der Ausschnitt geschoben (sprite-editor.js).
   Während des Ziehens die geschlossene Hand zeigen — und das Fadenkreuz des
   Canvas darunter überstimmen, sonst wechselte der Zeiger je nachdem, ob man
   gerade über dem Bild oder daneben ist. */
.se-canvaswrap.schiebt,
.se-canvaswrap.schiebt canvas {
  cursor: var(--cursor-hand-zu, grabbing);
}
.se-aktionen {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}
#se-status.se-ok {
  color: #9ccf8a;
}
#se-status.se-fehler {
  color: var(--fire-light);
}

@media (max-width: 800px) {
  .se-layout {
    grid-template-columns: 1fr;
  }
}

/* --- Editor-Übersicht: Karten aller Sprites ------------------------------- */

.se-uebersicht-kopf {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.se-hilfe {
  border: 1px solid var(--iron);
  border-radius: 2px;
  background: var(--stone-800);
  padding: 0.5rem 0.8rem;
  margin-bottom: 1.1rem;
}
.se-hilfe summary {
  cursor: var(--cursor-sword-hot);
  color: var(--brass-light);
  font-size: 0.9rem;
}
.se-hilfe dl {
  margin: 0.7rem 0 0.4rem;
}
.se-hilfe dt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
  font-weight: 600;
  margin-top: 0.55rem;
}
.se-hilfe dd {
  margin: 0.15rem 0 0;
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.5;
  max-width: 70ch;
}
.se-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.7rem;
}
.se-karte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 0.6rem 0.6rem;
  background: var(--stone-800);
  border: 1px solid var(--iron);
  border-radius: 2px;
  cursor: var(--cursor-sword-hot);
  font-family: var(--font-body);
  color: var(--text);
  text-align: center;
}
.se-karte:hover {
  border-color: var(--brass);
}
.se-karte.se-stand-fertig {
  border-color: rgba(122, 145, 102, 0.6);
}
.se-karte.se-stand-platzhalter {
  border-color: var(--fire);
  border-style: dashed;
}
.se-filterleiste {
  margin-left: auto;
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.se-filterleiste label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0;
}
.se-filterleiste select {
  background: var(--stone-800);
  color: var(--text);
  border: 1px solid var(--iron);
  border-radius: 2px;
  padding: 0.25rem 0.4rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
}
/* Zerstörende Aktionen abgesetzt und in Warnfarbe */
.se-gefahr {
  border-top: 1px solid var(--iron);
  padding-top: 0.7rem;
  margin-top: 0.7rem;
}
.se-gefahr button {
  border-color: var(--blood);
  color: #e9b9ac;
}
.se-gefahr button:hover {
  background: linear-gradient(180deg, #5a241a, #3a150f);
  border-color: var(--fire-light);
}
.se-status-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 0.06rem 0.35rem;
  border-radius: 2px;
  border: 1px solid var(--brass-dark);
  color: var(--brass-light);
  background: rgba(0, 0, 0, 0.35);
}
.se-karte.se-fertig .se-status-badge {
  border-color: rgba(122, 145, 102, 0.7);
  color: #a9c795;
}
.se-karte-bild {
  height: 92px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.se-karte-bild img {
  max-height: 92px;
  max-width: 130px;
  image-rendering: pixelated;
}
.se-karte-name {
  font-size: 0.92rem;
}
.se-karte-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}
.se-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-dim);
  border: 1px solid var(--iron);
  border-radius: 2px;
  padding: 0.02rem 0.3rem;
}
.se-badge-leer {
  border-style: dashed;
  opacity: 0.75;
}

/* Wehrbau: Wer ist Stilvorlage, wer erbt, wo fehlt sie? Ein Satz Mauerteile
   sieht nur dann nach EINER Mauer aus, wenn alle vom selben Pfosten abgeleitet
   wurden — deshalb steht diese Beziehung an jedem Teil. */
.wb-badge-meister {
  border-color: var(--brass);
  color: var(--brass-light);
}
.wb-badge-erbt {
  border-color: #4f7a4f;
  color: #9ccf8a;
}
.wb-badge-fehlt {
  border-color: #8a4a2a;
  color: #d99a72;
}
/* Der Pfosten hebt sich auch als Kachel ab — man soll ihn suchen können. */
.wb-teil.wb-meister {
  border-left: 3px solid var(--brass);
}
.se-abschnitt {
  margin: 1.4rem 0 0.6rem;
}

/* Woher die Licht-/Rauchpunkte kommen: eigene oder vom Grundtyp geerbte */
.se-ankerherkunft {
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.5rem;
  border-left: 2px solid var(--brass-dark);
  background: rgba(168, 129, 61, 0.07);
}
.se-ankerherkunft button {
  background: none;
  border: none;
  border-bottom: 1px solid var(--brass-dark);
  color: var(--brass-light);
  padding: 0;
  cursor: var(--cursor-sword-hot);
  font-family: var(--font-body);
}
.se-ankerherkunft button:hover {
  color: #e3c88a;
}

/* --- Bildprompt: der Text, mit dem Nano Banana das Sprite erzeugt ---------- */
.se-prompt {
  margin: 0.8rem 0 0.4rem;
  border: 1px solid var(--iron);
  border-radius: 2px;
  background: var(--stone-800);
  padding: 0.5rem 0.7rem;
}
.se-prompt > summary {
  cursor: var(--cursor-sword-hot);
  color: var(--brass-light);
  font-size: 0.9rem;
}
.se-prompt[open] > summary {
  margin-bottom: 0.5rem;
}
.se-prompt textarea {
  width: 100%;
  resize: vertical;
  background: var(--stone-900);
  border: 1px solid var(--iron);
  border-radius: 2px;
  color: var(--text);
  padding: 0.5rem 0.6rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}
.se-prompt textarea:disabled {
  opacity: 0.5;
}
.se-prompt-fuss {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
.se-prompt-fuss button {
  background: var(--stone-800);
  border: 1px solid var(--iron);
  color: var(--text-dim);
  border-radius: 2px;
  padding: 0.22rem 0.5rem;
  cursor: var(--cursor-sword-hot);
  font-family: var(--font-body);
}
.se-prompt-fuss button:hover {
  border-color: var(--brass);
  color: var(--text);
}
/* Abweichung vom Standard sichtbar machen — sonst würfelt man versehentlich
   mit einem Text, den man vor zwanzig Minuten angefasst hat. */
.se-prompt-abweichung {
  color: var(--fire-light);
}
.se-prompt.se-prompt-leer textarea,
.se-prompt.se-prompt-leer .se-prompt-fuss {
  display: none;
}

/* --- Gebäudefamilie: Zeile je Sicht-Variante, Spalte je Ausbaustufe -------- */
.se-matrix {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.8rem;
}
.se-matrix-zeile {
  display: grid;
  /* Beschriftungsspalte, dann eine gleich breite Spalte je Stufe. Feste
     Spaltenbreite statt 1fr: sonst zöge eine breite Seite die Zellen auf
     halbe Bildschirmbreite auseinander, für ein 56px-Sprite. */
  grid-template-columns: 8.5rem repeat(var(--stufen, 2), minmax(0, 15rem));
  justify-content: start;
  gap: 0.5rem;
  align-items: stretch;
}
.se-matrix-rand,
.se-matrix-kopf {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}
.se-matrix-kopf {
  justify-content: center;
  color: var(--brass-light);
  border-bottom: 1px solid var(--iron);
  padding-bottom: 0.3rem;
}
.se-matrix-kopf small {
  color: var(--text-dim);
  margin-left: 0.35rem;
}
.se-zelle {
  position: relative;
  /* Buttons dehnen sich als Grid-Element nicht von selbst auf die Spalte */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 1.4rem 0.5rem 0.5rem;
  background: var(--stone-800);
  border: 1px solid var(--iron);
  border-radius: 2px;
  cursor: var(--cursor-sword-hot);
  font-family: var(--font-body);
  color: var(--text);
  text-align: center;
}
.se-zelle:hover {
  border-color: var(--brass);
}
.se-zelle.se-stand-fertig {
  border-color: rgba(122, 145, 102, 0.6);
}
.se-zelle.se-stand-platzhalter {
  border-color: var(--fire);
  border-style: dashed;
}
/* Kein Sprite an dieser Stelle — als Lücke sichtbar, aber nicht anklickbar */
.se-zelle-leer {
  border-style: dashed;
  opacity: 0.4;
  cursor: default;
  min-height: 7rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}
.se-zelle-bild {
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.se-zelle-bild img {
  max-height: 110px;
  max-width: 100%;
  image-rendering: pixelated;
}
.se-zelle-name {
  font-size: 0.82rem;
}

/* --- Bearbeiten-Kopfzeile -------------------------------------------------- */

.se-editor-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}
.se-editor-kopf button {
  background: var(--stone-800);
  border: 1px solid var(--iron);
  color: var(--text);
  border-radius: 2px;
  padding: 0.3rem 0.6rem;
  cursor: var(--cursor-sword-hot);
  font-family: var(--font-body);
}
.se-editor-kopf button:hover {
  border-color: var(--brass);
}
.se-fertig-schalter {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-dim);
  cursor: var(--cursor-sword-hot);
}
.se-gruppe button .se-punkt {
  margin-right: 0.15rem;
}

/* Schatten-Werkzeuge im Sprite-Editor */
.se-schattenleiste {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.6rem 0 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--iron);
}
.se-schattenleiste label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin: 0;
  cursor: var(--cursor-sword-hot);
}
.se-schattenleiste button {
  background: var(--stone-800);
  border: 1px solid var(--iron);
  color: var(--text-dim);
  border-radius: 2px;
  padding: 0.25rem 0.4rem;
  cursor: var(--cursor-sword-hot);
  font-family: var(--font-body);
}
.se-schattenleiste button:hover {
  border-color: var(--brass);
  color: var(--text);
}
/* Regler für Richtung und Länge des Schlagschattens */
.se-schattenleiste .se-regler {
  gap: 0.5rem;
  color: var(--text-dim);
}
.se-schattenleiste .se-regler input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--brass);
}
.se-schattenleiste .se-regler output {
  min-width: 3.2rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.se-schattenleiste p {
  margin: 0.1rem 0 0.2rem;
}

/* Umschalter zwischen den Sammlungen (Gebäude / Burgen) */
.se-sammlungen {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.se-sammlungen button {
  background: var(--stone-800);
  border: 1px solid var(--iron);
  color: var(--text-dim);
  border-radius: 2px;
  padding: 0.4rem 0.9rem;
  cursor: var(--cursor-sword-hot);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.se-sammlungen button:hover {
  border-color: var(--brass);
}
.se-sammlungen button.aktiv {
  background: linear-gradient(180deg, #6d5426, #43341a);
  border-color: var(--brass-light);
  color: #f7ecd6;
}

/* ===========================================================================
   Gebäudetafel — öffnet sich beim Anklicken eines Gebäudes in der Burgansicht.
   Sitzt links unter dem Kopfband, wo im Baumodus das Baumenü steht: beides
   ist nie gleichzeitig sichtbar, und der Blick sucht Gebäudeauskünfte an
   derselben Stelle wie Bauauskünfte.
   =========================================================================== */
/* --- Die Bewohnertafel ------------------------------------------------------
   Rechts, nicht links: Die Gebäudetafel sitzt links, und beide gleichzeitig
   offen zu haben wäre zwar möglich, aber verwirrend — deshalb schließt in
   main.ts die eine, wenn die andere aufgeht. Die Seite trennt sie trotzdem
   sichtbar, damit man beim Klicken merkt, dass es zwei verschiedene Dinge sind:
   links das Haus, rechts der Mensch. */
#bewohnerpanel {
  top: 3.6rem;
  right: 0.7rem;
  width: 18.5rem;
  max-height: calc(100vh - 8.5rem);
  overflow-y: auto;
  pointer-events: auto;
  padding: 0.55rem 0.7rem 0.7rem;
  background: linear-gradient(180deg, rgba(28, 31, 36, 0.97), rgba(18, 20, 23, 0.97));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
  font-size: 0.86rem;
}
.bp-kopf {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
/* Dieselbe Figur wie auf dem Hof, nur größer — hier soll man das Gesicht
   wiedererkennen, das man eben angeklickt hat. Nearest-Neighbor, sonst
   verwaschen die Pixel zu Brei. */
.bp-figur {
  width: 34px;
  image-rendering: pixelated;
  flex: none;
}
.bp-titel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.bp-titel strong {
  font-family: inherit;
  font-size: 1.15rem;
  color: var(--brass-light);
  line-height: 1.2;
}
.bp-unter {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.bp-zu {
  flex: none;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.bp-zu:hover { color: var(--brass-light); }

.bp-stimmung {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0.55rem 0 0;
  padding: 0.3rem 0.5rem;
  border-left: 3px solid var(--iron);
  background: rgba(0, 0, 0, 0.3);
}
.bp-wort { font-family: inherit; font-size: 1rem; }
.bp-wert { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--text-dim); }
.bp-stimmung.gut { border-left-color: #7fa663; }
.bp-stimmung.gut .bp-wort { color: #a9c795; }
.bp-stimmung.mittel { border-left-color: #8a7f5e; }
.bp-stimmung.schlecht { border-left-color: #b07a4a; }
.bp-stimmung.schlecht .bp-wort { color: #d3a273; }
.bp-stimmung.elend { border-left-color: #a34b3c; }
.bp-stimmung.elend .bp-wort { color: #d08a7a; }

/* Der Gedanke. Kursiv und eingerückt: Es ist wörtliche Rede, keine Auskunft
   der Oberfläche — das muss man auf einen Blick auseinanderhalten können. */
.bp-gedanke { margin: 0.7rem 0 0; }
.bp-was {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.bp-gedanke blockquote {
  margin: 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--brass-dark);
  font-style: italic;
  color: var(--text);
}
.bp-gedanke blockquote p {
  margin: 0 0 0.4rem;
  line-height: 1.45;
}
.bp-gedanke blockquote p:last-child { margin-bottom: 0; }

.bp-abschnitt {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--iron);
}
.bp-abschnitt h4 {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.bp-zeile,
.bp-posten {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.12rem 0;
}
.bp-zeile > span:first-child,
.bp-posten > span:first-child { color: var(--text-dim); }
.bp-posten > span:last-child { font-variant-numeric: tabular-nums; }
.bp-posten .gut { color: #a9c795; }
.bp-posten .schlecht,
.bp-zeile .schlecht { color: #d08a7a; }
.bp-hinweis { margin: 0; font-size: 0.8rem; color: var(--text-dim); }
.bp-abziehen {
  width: 100%;
  margin-top: 0.7rem;
}

#gebaeudepanel {
  top: 3.6rem;
  left: 0.7rem;
  width: 19rem;
  max-height: calc(100vh - 8.5rem);
  overflow-y: auto;
  pointer-events: auto;
  padding: 0.55rem 0.7rem 0.7rem;
  background: linear-gradient(180deg, rgba(28, 31, 36, 0.97), rgba(18, 20, 23, 0.97));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
  font-size: 0.86rem;
}
.gp-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.gp-titel {
  font-family: inherit;
  font-size: 1.25rem;
  color: var(--brass-light);
  line-height: 1.2;
}
.gp-titel small {
  font-family: var(--font-body);
  font-size: 0.80rem;
  color: var(--text-dim);
}
.gp-zu {
  flex: none;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: var(--cursor-sword-hot);
}
.gp-zu:hover { color: var(--brass-light); }
.gp-flavor {
  margin: 0.15rem 0 0.5rem;
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Statuszeile: die eine Aussage, für die man die Tafel aufmacht. */
.gp-status {
  padding: 0.28rem 0.5rem;
  border-left: 3px solid var(--iron);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1px;
  margin-bottom: 0.45rem;
}
.gp-status.gp-laeuft { border-left-color: #5d8a4f; color: #a8c79a; }
.gp-status.gp-stoerung { border-left-color: #9a6a3c; color: #d8ab7c; }
.gp-status.gp-bau { border-left-color: var(--brass); color: var(--brass-light); }

/* Mängel: hart = Stillstand, weich = bremst nur. Der Unterschied wird über
   die Farbe getragen, nicht über Ausrufezeichen. */
.gp-maengel {
  list-style: none;
  margin: 0 0 0.55rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
.gp-maengel li {
  position: relative;
  padding-left: 0.85rem;
  line-height: 1.35;
  font-size: 0.82rem;
}
.gp-maengel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.gp-maengel li.hart { color: #d8ab7c; }
.gp-maengel li.hart::before { background: #9a6a3c; }
.gp-maengel li.weich { color: var(--text-dim); }
.gp-maengel li.weich::before { background: var(--iron-light); }

.gp-abschnitt {
  border-top: 1px solid rgba(109, 84, 38, 0.4);
  padding-top: 0.42rem;
  margin-top: 0.42rem;
}
.gp-abschnitt h4 {
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.gp-zaehler {
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  font-weight: 400;
}
.gp-zeile {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.08rem 0;
}
.gp-zeile.gp-plus span:last-child { color: #a8c79a; }
.gp-zeile.gp-minus span:last-child { color: #d8ab7c; }
.gp-zeile.gp-nichts { color: var(--text-dim); }
.gp-hinweis {
  margin: 0.25rem 0 0;
  color: var(--text-dim);
  font-size: 0.79rem;
  line-height: 1.35;
}

.gp-leute {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.gp-leute li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.gp-name { flex: 1 1 auto; }
.gp-koennen {
  flex: none;
  color: var(--brass);
  letter-spacing: 0.1em;
  font-size: 0.78rem;
}
.gp-ab {
  flex: none;
  background: none;
  border: 1px solid var(--iron);
  color: var(--text-dim);
  border-radius: 2px;
  padding: 0.05rem 0.35rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: var(--cursor-sword-hot);
}
.gp-ab:hover:not(:disabled) { border-color: #9a6a3c; color: #d8ab7c; }
.gp-ab:disabled { opacity: 0.5; cursor: var(--cursor-sword); }

.gp-zuweisen {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.gp-auswahl {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--stone-700);
  border: 1px solid var(--iron);
  color: var(--text);
  border-radius: 2px;
  padding: 0.22rem 0.3rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
}
.gp-btn {
  flex: none;
  background: linear-gradient(180deg, #6d5426, #43341a);
  border: 1px solid var(--brass);
  color: #f7ecd6;
  border-radius: 2px;
  padding: 0.22rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: var(--cursor-sword-hot);
}
.gp-btn:hover:not(:disabled) {
  border-color: var(--brass-light);
  box-shadow: 0 0 10px rgba(168, 129, 61, 0.35);
}
.gp-btn:disabled {
  background: var(--stone-700);
  border-color: var(--iron);
  color: var(--text-dim);
  cursor: var(--cursor-sword);
}
.gp-aktionen {
  border-top: 1px solid rgba(109, 84, 38, 0.4);
  padding-top: 0.45rem;
  margin-top: 0.45rem;
}

/* Der Sprite-Editor braucht mehr Fläche als die übrigen Seiten. */
body:has(.spriteeditor) .container.wide {
  max-width: min(1800px, 96vw);
}
/* Ausbau-Knopf in der Gebäudetafel: über die volle Breite, damit er als
   Abschluss des Abschnitts liest und nicht als Beiwerk. */
.gp-btn.gp-breit {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.32rem 0.6rem;
}

/* ===========================================================================
   Die Blende (server/public/blende.js)

   Burg, Landkarte und Chronik sind drei eigene Seiten. Der Wechsel war deshalb
   ein harter Schnitt mit einem Blitzen des Browsers dazwischen; der Baumodus
   schaltete ebenso unvermittelt von der Schrägsicht auf das Planbrett um.
   Dieses Tuch liegt über allem und macht aus dem Schnitt eine Blende.

   Die Farbe ist die des Ladeschirms — was zwischen den Ansichten liegt, soll
   überall dasselbe Dunkel sein. Ohne Korn: Bei 220 Millisekunden sieht man es
   nicht, und ein Bild zu laden, das niemand sieht, kostet nur Zeit.
   =========================================================================== */

.blende {
  position: fixed;
  inset: 0;
  /* Über allem, auch über Ereignistafel (1300) und Ladeschirm (200). Ein
     Übergang, den ein Fenster durchbricht, ist keiner. */
  z-index: 2000;
  background: #14171a;
  opacity: 0;
  /* Im Ruhezustand für Klicks durchlässig — sonst läge ein unsichtbares Tuch
     über dem Spielfeld und schluckte jeden Mausklick. */
  pointer-events: none;
  /* Der Übergang steht HIER und nicht nur in `.zu`. Beim Aufblenden wird die
     Klasse ja entfernt — und maßgeblich ist immer der Zustand NACH der
     Änderung. Stünde er nur in `.zu`, gäbe es kein Aufblenden, sondern einen
     harten Sprung zurück. Diese Regel gilt also für den Weg ins Bild hinein,
     die in `.zu` für den Weg hinaus. */
  transition: opacity 0.28s ease-out;
  /* Das AUFblenden läuft ohne JavaScript. Käme es aus dem Skript, bliebe die
     Seite bei jedem Ladefehler für immer schwarz. */
  animation: blende-auf 0.34s ease-out;
}
/* Bewusst OHNE animation-fill-mode: Eine nachwirkende Animation schlägt jede
   spätere Deklaration und machte `.zu` wirkungslos. Der Endwert der Animation
   ist ohnehin derselbe wie der Ruhewert darüber. */
@keyframes blende-auf {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Die Notleine. In einem Fenster, das sich als verborgen meldet — ein Tab im
   Hintergrund —, laufen Animationen nicht an: Das Tuch stünde dort auf voller
   Deckung still. blende.js setzt diese Klasse kurz nach dem Laden; ohne
   Animation fällt die Deckung auf den Ruhewert 0 zurück. In einem sichtbaren
   Fenster ist die Blende zu diesem Zeitpunkt längst durchgelaufen, dort ändert
   die Klasse nichts. */
.blende.auf { animation: none; }

.blende.zu {
  opacity: 1;
  /* Beim Abblenden Klicks abfangen: Ein zweiter Klick auf denselben Weg würde
     sonst einen zweiten Wechsel auslösen. */
  pointer-events: auto;
  transition: opacity 0.22s ease-in;
}

/* Wer Bewegung abbestellt hat, bekommt keine. blende.js überspringt das Tuch
   dann ganz — ein ohne Übergang schwarz werdendes Bild wäre genau das
   Blitzen, das hier verhindert werden soll. */
@media (prefers-reduced-motion: reduce) {
  .blende { animation: none; }
  .blende.zu { transition: none; }
}

/* ===========================================================================
   Ladeschirm der Burgansicht (client/index.html + client/src/ladeschirm.ts)

   Warum es ihn gibt: Der Boden des Burglands wird als EIN Pixelbild mit
   6144×3072 gebacken — 18,9 Millionen Pixel, jedes durch Rauschen, Uferprüfung
   und Relief. Das dauert spürbar, und ohne Rückmeldung sieht man in dieser
   Zeit ein schwarzes Fenster.

   Alles hier ist Pixelwerk: harte Kanten, keine Verläufe, keine runden Ecken.
   Der Schirm soll aussehen wie das Spiel dahinter, nicht wie ein Webformular.
   =========================================================================== */

#ladeschirm {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14171a;
  /* dasselbe Korn wie der Rest der Oberfläche — der Schirm gehört dazu */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity: 1;
  transition: opacity 0.45s ease-out;
}
#ladeschirm.fertig {
  opacity: 0;
  pointer-events: none;
}

#ladeschirm .lade-innen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* --- Wappen: ein Turm, Pixel für Pixel aus Kastenschatten gesetzt.
   Ein 11×13-Raster bei 6 px Kantenlänge. Drei Elemente übereinander:
   Mauerwerk, Fensterschlitz, Tor — so lässt sich jede Lage in ihrer eigenen
   Farbe setzen, ohne dafür ein Bild laden zu müssen. */
#ladeschirm .lade-wappen {
  position: relative;
  width: 66px;
  height: 78px;
  image-rendering: pixelated;
  animation: wappenAtem 3.4s ease-in-out infinite;
}
#ladeschirm .lade-wappen span {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
}
/* Mauerwerk: Zinnenkranz oben, darunter der Schaft.
   Jede Koordinate ist ein 6-px-Schritt (x*6 y*6). */
#ladeschirm .lade-wappen .stein {
  box-shadow:
    /* Zinnen */
    12px 0 0 #6d7078, 24px 0 0 #6d7078, 36px 0 0 #6d7078, 48px 0 0 #6d7078,
    /* Wehrgang */
    12px 6px 0 #5c5f66, 18px 6px 0 #6d7078, 24px 6px 0 #6d7078, 30px 6px 0 #6d7078,
    36px 6px 0 #6d7078, 42px 6px 0 #6d7078, 48px 6px 0 #5c5f66,
    /* Kragsteine */
    6px 12px 0 #4a4d54, 12px 12px 0 #6d7078, 18px 12px 0 #7a7d85, 24px 12px 0 #7a7d85,
    30px 12px 0 #7a7d85, 36px 12px 0 #7a7d85, 42px 12px 0 #6d7078, 48px 12px 0 #4a4d54,
    /* Schaft */
    12px 18px 0 #5c5f66, 18px 18px 0 #6d7078, 24px 18px 0 #6d7078, 30px 18px 0 #6d7078,
    36px 18px 0 #6d7078, 42px 18px 0 #5c5f66,
    12px 24px 0 #5c5f66, 18px 24px 0 #6d7078, 24px 24px 0 #6d7078, 30px 24px 0 #6d7078,
    36px 24px 0 #6d7078, 42px 24px 0 #5c5f66,
    12px 30px 0 #52555c, 18px 30px 0 #62656c, 24px 30px 0 #62656c, 30px 30px 0 #62656c,
    36px 30px 0 #62656c, 42px 30px 0 #52555c,
    12px 36px 0 #52555c, 18px 36px 0 #62656c, 24px 36px 0 #62656c, 30px 36px 0 #62656c,
    36px 36px 0 #62656c, 42px 36px 0 #52555c,
    12px 42px 0 #4a4d54, 18px 42px 0 #5c5f66, 24px 42px 0 #5c5f66, 30px 42px 0 #5c5f66,
    36px 42px 0 #5c5f66, 42px 42px 0 #4a4d54,
    12px 48px 0 #4a4d54, 18px 48px 0 #5c5f66, 24px 48px 0 #5c5f66, 30px 48px 0 #5c5f66,
    36px 48px 0 #5c5f66, 42px 48px 0 #4a4d54,
    12px 54px 0 #42454b, 18px 54px 0 #52555c, 24px 54px 0 #52555c, 30px 54px 0 #52555c,
    36px 54px 0 #52555c, 42px 54px 0 #42454b,
    /* Sockel, etwas breiter */
    6px 60px 0 #3a3d43, 12px 60px 0 #4a4d54, 18px 60px 0 #4a4d54, 24px 60px 0 #4a4d54,
    30px 60px 0 #4a4d54, 36px 60px 0 #4a4d54, 42px 60px 0 #4a4d54, 48px 60px 0 #3a3d43;
  background: transparent;
}
/* Fensterschlitz: glimmt warm — das einzige Licht im Bild */
#ladeschirm .lade-wappen .fenster {
  box-shadow:
    24px 24px 0 #d8a34a,
    30px 24px 0 #b8863a,
    24px 30px 0 #a87632;
  animation: fensterGlimmen 2.6s ease-in-out infinite;
}
/* Tor: dunkle Öffnung mit Rundbogen */
#ladeschirm .lade-wappen .tor {
  box-shadow:
    24px 42px 0 #1b1d21,
    30px 42px 0 #1b1d21,
    24px 48px 0 #17191c,
    30px 48px 0 #17191c,
    24px 54px 0 #17191c,
    30px 54px 0 #17191c;
}

@keyframes wappenAtem {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes fensterGlimmen {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  #ladeschirm .lade-wappen,
  #ladeschirm .lade-wappen .fenster {
    animation: none;
  }
}

#ladeschirm .lade-titel {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--brass-light, #cca75e);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}
#ladeschirm .lade-text {
  margin: 0;
  max-width: 30ch;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-dim, #928b7d);
}

/* --- Fortschrittsbalken: ein gemauerter Kasten, der sich füllt.
   Kein Verlauf, keine runde Kappe — harte Kanten wie alles andere. */
#ladeschirm .lade-balken {
  position: relative;
  width: 220px;
  height: 10px;
  padding: 2px;
  background: #0e1013;
  border: 2px solid #4a4d54;
  box-shadow: inset 0 0 0 1px #23262b;
}
#ladeschirm .lade-balken span {
  display: block;
  height: 100%;
  /* Volle Breite, gestaucht per scaleX — NICHT width animiert. Eine
     width-Animation liefe im Hauptthread und stünde still, sobald dort das
     Bodenbild gerechnet wird (genau das ließ den Balken auf halbem Weg
     hängen). transform übernimmt der Compositor und läuft weiter. */
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0.06);
  background: var(--brass, #a8813d);
  /* Dem Browser vorab sagen, dass hier transformiert wird — sonst entscheidet
     er womöglich erst mitten in der Rechnung, eine eigene Ebene anzulegen,
     und genau dann ist er dafür zu beschäftigt. */
  will-change: transform;
  /* Die Dauer setzt ladeschirm.ts je Schritt; stark abbremsend, damit die
     lange Fahrt während des Backens vorne zügig wirkt und hinten geduldig. */
  transition: transform 0.5s cubic-bezier(0.12, 0.72, 0.2, 1);
}
/* Die Fugen liegen ÜBER der Füllung und gehören zum Kasten, nicht zum
   Balken: Am gestauchten Balken würde das Muster mitgestaucht und wäre bei
   6 % Füllung nur noch Rauschen. So bleiben sie überall gleich breit, und
   die Füllung wandert dahinter durch. */
#ladeschirm .lade-balken::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 8px, #0e1013 8px 10px);
}

/* ===========================================================================
   Startbild-Editor (/admin/startbild)

   Lichter und Rauchfahnen über das Burgbild setzen. Die Vorschau benutzt
   bewusst DIESELBEN Klassen wie der echte Startbildschirm (.hero__licht,
   .hero__rauch) — nur so kann sie nicht lügen. Dazu kommen die Marken:
   greifbare Punkte, die es nur hier gibt, damit man auch ein schwaches
   Licht mit der Maus fassen kann.
   =========================================================================== */

.startbild-editor .sb-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.startbild-editor .sb-werkzeuge {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.startbild-editor .sb-werkzeuge button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.startbild-editor .sb-werkzeuge button.aktiv {
  border-color: var(--brass);
  background: linear-gradient(180deg, #4a3a1c, #2a2113);
  color: #f2e3c4;
}
.startbild-editor .sb-regler {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--text-dim);
}
.startbild-editor .sb-regler input {
  width: 130px;
}
.startbild-editor .sb-knoepfe {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}
.startbild-editor .sb-haupt {
  border-color: var(--brass);
  background: linear-gradient(180deg, #6d5426, #43341a);
  color: #f7ecd6;
}
.startbild-editor .sb-meldung {
  flex-basis: 100%;
  margin: 0;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.startbild-editor .sb-meldung.fehler {
  color: var(--fire-light);
}

/* Die Bühne hält das Seitenverhältnis des Bildes — dadurch stimmen die
   Anteilskoordinaten hier und auf dem Startbildschirm überein. */
.startbild-editor .sb-buehne {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--iron);
  border-radius: 2px;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}
.startbild-editor .sb-bild {
  position: absolute;
  inset: 0;
  background-image: var(--opener-bild, url("/static/opener/opener.jpg"));
  background-size: 100% 100%;
  /* Ungefiltert wie der Startbildschirm — sonst setzt man die Lichter gegen
     einen Bildeindruck, den es später gar nicht gibt. */
}

.startbild-editor .sb-marken {
  position: absolute;
  inset: 0;
}
.startbild-editor .sb-marke {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -7px 0 0 -7px;
  border: 2px solid #e8be6a;
  border-radius: 50%;
  background: rgba(10, 12, 15, 0.45);
  cursor: var(--cursor-hand, grab);
}
.startbild-editor .sb-marke.gewaehlt {
  background: rgba(232, 190, 106, 0.5);
  box-shadow: 0 0 0 2px rgba(10, 12, 15, 0.7);
}

/* --- Sprite-Editor: Größe anpassen ---------------------------------------
   Die Maße eines Sprites sind seine Größe im Spiel (buildingSprites.ts rechnet
   textur.width × skala) — deshalb steht dieses Feld gleichberechtigt neben den
   Werkzeugen und nicht in einem Untermenü. */
.se-groesse {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.6rem 0 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--iron);
}
.se-groesse .se-kopf {
  font-size: 0.80rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.se-groesse-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.se-groesse-knoepfe button {
  background: var(--stone-800);
  border: 1px solid var(--iron);
  color: var(--text-dim);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  cursor: var(--cursor-sword-hot);
}
.se-groesse-knoepfe button:hover {
  border-color: var(--brass);
  color: var(--text);
}
#se-groesse-anwenden {
  border-color: var(--brass);
  color: var(--parchment);
}
.se-groesse-feld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.82rem;
  margin: 0;
}
.se-groesse-feld input[type="number"] {
  width: 5.5rem;
  background: var(--stone-900, #14171b);
  border: 1px solid var(--iron);
  color: var(--text);
  border-radius: 2px;
  padding: 0.2rem 0.35rem;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
.se-groesse-feld.se-seitenverhaeltnis {
  justify-content: flex-start;
  cursor: var(--cursor-sword-hot);
}
/* Abweichung von der gespeicherten Größe deutlich machen — sonst klickt man
   sich durch und wundert sich später, warum im Hof etwas anderes steht. */
#se-groesse-stand.se-warn {
  color: var(--brass-light, #cca75e);
}

/* --- Stimmung der Bewohner --------------------------------------------------
   Der Balken hat seine Null in der MITTE: Die Moral läuft von -100 bis +100,
   und 0 heißt Gleichgültigkeit, nicht "am Boden". Ein von links gefüllter
   Balken würde das Gegenteil behaupten.
   Die Farbe ist die eigentliche Nachricht — die Zahl liest man erst danach. */

/* Maße und Schriftgrad EXAKT wie ein Vorratskästchen (.res): Die Stimmung
   steht in derselben Reihe, und ein Knopf, der einen Hauch kleiner ist als
   seine Nachbarn, sieht nach Versehen aus. */
.moralknopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 1.1rem;
  color: var(--text);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--iron);
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  /* Dieselbe Höhe wie ein Kästchen mit 32-Pixel-Emblem — sonst stünde die
     Stimmung in der Reihe eine Idee tiefer als die Vorräte. */
  min-height: calc(32px + 0.2rem + 2px);
  cursor: var(--cursor-sword-hot);
}
.moralknopf:hover { border-color: var(--iron-light); }
.moralknopf[hidden] { display: none; }

/* Der Kopf links: ein 3×3-Pixelgesicht aus Kastenschatten. Kein Bild, das
   geladen werden müsste, und es bleibt in der Pixeloptik des Spiels. Der Mund
   wandert mit der Stimmung — bei guter Laune hoch, bei schlechter herunter. */
.moralkopf {
  width: 3px;
  height: 3px;
  margin: 0 5px 0 1px;
  background: transparent;
  box-shadow:
    -4px -4px 0 0 currentColor,  /* linkes Auge */
     2px -4px 0 0 currentColor,  /* rechtes Auge */
    -4px  2px 0 0 currentColor,  /* Mundwinkel links */
     2px  2px 0 0 currentColor;  /* Mundwinkel rechts */
  color: var(--text-dim);
}
.moralknopf.gut     .moralkopf { color: var(--moss); box-shadow: -4px -4px 0 0 currentColor, 2px -4px 0 0 currentColor, -4px 3px 0 0 currentColor, -1px 4px 0 0 currentColor, 2px 3px 0 0 currentColor; }
.moralknopf.mittel  .moralkopf { color: var(--text-dim); }
.moralknopf.schlecht .moralkopf { color: var(--fire); box-shadow: -4px -4px 0 0 currentColor, 2px -4px 0 0 currentColor, -4px 4px 0 0 currentColor, -1px 3px 0 0 currentColor, 2px 4px 0 0 currentColor; }
.moralknopf.elend   .moralkopf { color: var(--blood); box-shadow: -4px -4px 0 0 currentColor, 2px -4px 0 0 currentColor, -4px 4px 0 0 currentColor, -1px 2px 0 0 currentColor, 2px 4px 0 0 currentColor; }

.moralbalken {
  position: relative;
  width: 68px;
  height: 7px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--iron);
  overflow: hidden;
}
/* Die Mittellinie ist die Null — sie muss immer sichtbar bleiben, auch wenn
   die Füllung darüber liegt. */
.moralbalken::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--iron-light);
  z-index: 2;
}
.moralbalken i {
  position: absolute;
  top: 0;
  bottom: 0;
  display: block;
}
.moralbalken i.plus  { background: var(--moss); }
.moralbalken i.minus { background: var(--blood); }
.moralknopf.schlecht .moralbalken i.minus { background: var(--fire); }

/* Die Zielmarke: wohin die Stimmung wandert. Ohne sie sähe man nach dem Bau
   eines Brunnens minutenlang keine Reaktion und hielte die Sache für kaputt. */
.moralbalken b {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 2px;
  margin-left: -1px;
  background: var(--brass-light);
  z-index: 3;
}

.moralwert {
  font-variant-numeric: tabular-nums;
  min-width: 2.4em;
  text-align: right;
  color: var(--text-dim);
}
.moralknopf.gut .moralwert      { color: var(--moss); }
.moralknopf.schlecht .moralwert { color: var(--fire-light); }
.moralknopf.elend .moralwert    { color: #f0c9bd; }

/* --- Die Aufschlüsselung ---------------------------------------------------
   Was hier steht, muss sich zur Zahl im Balken addieren. Der Spieler soll
   nachrechnen können, warum seine Leute murren — sonst ist die Anzeige eine
   Behauptung. */
/* Klappt nach OBEN auf, seit die Leiste unten sitzt — nach unten wäre nur
   noch die Bauleiste und danach der Bildrand. */
#moraltafel {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  min-width: 300px;
  max-width: 360px;
  background: var(--stone-800);
  border: 1px solid var(--iron);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  padding: 0.7rem 0.85rem;
  z-index: 40;
}
#moraltafel[hidden] { display: none; }
#moraltafel h4 {
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: normal;
  color: var(--brass-light);
  letter-spacing: 0.04em;
}
ul.moralposten {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
}
ul.moralposten li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.2rem 0;
  border-bottom: 1px solid rgba(59, 65, 74, 0.45);
  font-size: 0.88rem;
}
ul.moralposten li:last-child { border-bottom: 0; }
ul.moralposten .wen {
  font-size: 0.78rem;
  color: var(--text-dim);
}
ul.moralposten b {
  font-variant-numeric: tabular-nums;
  min-width: 2.6em;
  text-align: right;
  font-weight: normal;
}
ul.moralposten li.drueckt b { color: var(--fire-light); }
ul.moralposten li.hebt b    { color: var(--moss); }
ul.moralposten li.leer      { color: var(--text-dim); }

.moralsumme {
  margin: 0 0 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--iron);
  font-size: 0.86rem;
  color: var(--text-dim);
}
.moralsumme b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.moralhinweis {
  margin: 0;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--parchment-dark);
}

/* === Wehrbau: Mauern, Tore, Türme im Sprite-Editor ========================
   Zwei Spalten: links der Prüfstand (Nachbarschaft schalten, Kachel ansehen),
   rechts die Teileliste zum Austauschen gegen eigene Bilder. */
.wb-raum {
  display: grid;
  grid-template-columns: minmax(20rem, 26rem) 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .wb-raum { grid-template-columns: 1fr; }
}

.wb-pruefstand {
  position: sticky;
  top: 1rem;
  padding: 0.9rem 1rem;
}
.wb-oben {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Nachbarschaftskarte: 3x3, die Mitte ist die eigene Kachel. Die Anordnung
   folgt der BILDSCHIRMlage der Nachbarn, nicht der Gitterlogik — man klickt
   dorthin, wo der Nachbar im Spiel zu sehen ist. */
.wb-rasterzeile {
  display: flex;
  gap: 3px;
  margin-bottom: 3px;
}
.wb-zelle {
  width: 2.6rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--iron, #4a4f57);
  background: #1a1c20;
  color: #7c848f;
  border-radius: 2px;
  cursor: var(--cursor-sword-hot), pointer;
}
.wb-zelle.an {
  background: var(--brass-dark, #6b5424);
  border-color: var(--brass-light, #cca75e);
  color: #f0e2c0;
}
.wb-zelle.wb-mitte {
  border-style: dashed;
  color: var(--brass-light, #cca75e);
  cursor: default;
}

.wb-buehne {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: 0.4rem;
  border: 1px solid var(--iron, #4a4f57);
  background: #23262b;
  /* Schachbrett, damit Transparenz am Rand sichtbar bleibt */
  background-image:
    linear-gradient(45deg, #1c1f23 25%, transparent 25%, transparent 75%, #1c1f23 75%),
    linear-gradient(45deg, #1c1f23 25%, transparent 25%, transparent 75%, #1c1f23 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  overflow: auto;
}
.wb-buehne canvas {
  image-rendering: pixelated;
  display: block;
}
.wb-befund {
  margin: 0.6rem 0 0.4rem;
  color: var(--parchment, #d7c7a3);
}

.wb-regler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.5rem;
}
.wb-regler label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #9aa4ae;
}
.wb-vorlagen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.wb-vorlagen button {
  font-size: 0.80rem;
  padding: 0.2rem 0.5rem;
}

.wb-gruppenkopf {
  margin: 1.1rem 0 0.5rem;
  color: var(--brass-light, #cca75e);
  font-size: 0.9rem;
}
.wb-gruppenkopf:first-child { margin-top: 0; }
.wb-teile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.6rem;
}
.wb-teil {
  display: flex;
  gap: 0.6rem;
  padding: 0.5rem;
  border: 1px solid var(--iron, #4a4f57);
  border-radius: 3px;
  background: #1e2126;
}
/* Ersetzte Teile heben sich ab — man sieht auf einen Blick, was schon
   eigenes Werk ist und was noch das gezeichnete Original. */
.wb-teil.eigen {
  border-color: rgba(204, 167, 94, 0.5);
  background: #23231d;
}
.wb-teil-bild {
  flex: 0 0 auto;
  width: 4.5rem;
  display: grid;
  place-items: center;
  background: #16181b;
  border-radius: 2px;
  overflow: hidden;
}
.wb-teil-bild img,
.wb-teil-bild canvas {
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
  display: block;
}
.wb-teil-text { min-width: 0; }
.wb-teil-text strong {
  display: block;
  font-size: 0.82rem;
  color: var(--parchment, #d7c7a3);
}
.wb-teil-text p { margin: 0.3rem 0 0.45rem; }
.wb-teil-knoepfe {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.wb-hochladen {
  font-size: 0.80rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--iron, #4a4f57);
  border-radius: 2px;
  color: var(--parchment, #d7c7a3);
  cursor: var(--cursor-sword-hot), pointer;
}
.wb-hochladen:hover { background: var(--stone-600, #2c3138); }

/* Rahmen für Knopf + Tafel: die Tafel klappt unter dem Knopf auf, nicht am
   linken Rand des Kopfbalkens. */
.moralfeld {
  position: relative;
  display: inline-flex;
}

/* Der Notausgang des Wehrbau-Reiters: verwirft alle eigenen Bilder. Warnfarbe,
   weil er wirklich etwas wegwirft — aber nichts Unwiederbringliches, die
   gezeichneten Fassungen stehen im Code. */
.wb-notausgang {
  margin-left: auto;
  font-size: 0.82rem;
  padding: 0.25rem 0.6rem;
  color: #d8b48a;
  border: 1px solid rgba(190, 120, 70, 0.55);
  background: rgba(70, 40, 26, 0.5);
}
.wb-notausgang:hover {
  background: rgba(102, 55, 32, 0.7);
  color: #f2d9bd;
}

/* Der Würfel-Knopf am Wehrbau-Teil: hebt sich messingfarben ab, weil er als
   einziger Geld kostet (Nanobanana-Aufruf). */
.wb-wuerfeln {
  font-size: 0.80rem;
  padding: 0.2rem 0.5rem;
  color: var(--brass-light, #cca75e);
  border: 1px solid rgba(204, 167, 94, 0.45);
  background: rgba(60, 48, 22, 0.5);
}
.wb-wuerfeln:hover:not(:disabled) {
  background: rgba(92, 73, 33, 0.7);
  color: #f0e2c0;
}
.wb-wuerfeln:disabled {
  opacity: 0.6;
  cursor: default;
}
.wb-teil-knoepfe {
  flex-wrap: wrap;
  row-gap: 0.3rem;
}

/* --- Abgaben: die Steuerwahl in der Moraltafel -----------------------------
   Sie steht dort, weil sie in dieselbe Rechnung gehört: der Satz taucht oben
   als Moralposten auf, und darunter stellt man ihn um. Jede Stufe zeigt
   Ertrag UND Preis — ein Regler, der nur die Einnahme nennt, wäre eine Falle. */
.steuerwahl {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--iron);
}
.steuerwahl h4 {
  margin: 0 0 0.2rem;
}
.steuerstufen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.steuerstufe {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.5rem;
  background: var(--stone-800);
  border: 1px solid var(--iron);
  border-radius: 2px;
  color: var(--text-dim);
  font-family: var(--font-body);
  text-align: left;
  cursor: var(--cursor-sword-hot);
}
.steuerstufe:hover:not(:disabled) {
  border-color: var(--brass);
}
.steuerstufe.aktiv {
  border-color: var(--brass);
  background: rgba(168, 129, 61, 0.18);
}
.steuerstufe:disabled {
  opacity: 0.5;
}
.steuerstufe .stufe-name {
  color: var(--text);
  font-size: 0.9rem;
}
.steuerstufe.aktiv .stufe-name {
  color: var(--brass-light);
}
.steuerstufe .stufe-ertrag,
.steuerstufe .stufe-moral {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.steuerstufe .stufe-moral.hebt {
  color: var(--moos-hell, #a9c795);
}
.steuerstufe .stufe-moral.drueckt {
  color: var(--fire-light);
}

/* ===========================================================================
   Sanduhr im Kopfband — Countdown bis zum nächsten Serverschritt.
   Die Welt bewegt sich in Sprüngen; ohne diese Anzeige liest sich das
   Dazwischen wie ein hängendes Spiel.
   =========================================================================== */
.tickuhr {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.15rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.tickuhr-glas {
  width: 15px;
  height: 15px;
  flex: none;
}
.tickuhr-rahmen {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tickuhr-sand {
  fill: var(--brass-light);
}
/* Der rieselnde Faden in der Enge — nur angedeutet, sonst wirkt er wie ein Strich */
.tickuhr-faden {
  stroke: var(--brass-light);
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.55;
}
.tickuhr-zeit {
  min-width: 2.1em;
  text-align: right;
}
/* Letzte Sekunde: gleich springt die Welt */
.tickuhr.faellig .tickuhr-sand { fill: var(--fire-light, #ffd9b0); }
.tickuhr.faellig .tickuhr-zeit { color: var(--brass-light); }

/* --- Wer hier wohnt: Bewohner mit Gesicht ----------------------------------
   Dieselbe Figur wie auf dem Hof (client/src/figurWahl.ts), damit man die
   Person draußen wiedererkennt. Pixelgenau skaliert — die Sprites sind mit
   doppelter Weltgröße gebacken und würden sonst weichgezeichnet. */
.gp-bewohnerliste {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.gp-bewohner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.22rem 0.35rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--iron);
  border-radius: 2px;
}
/* Der Entlassen-Knopf in der Garnisonsliste. Winzig und unauffällig, aber
   vorhanden: Einen Söldner zu entlassen ist eine gewöhnliche Verwaltungssache,
   kein Drama — und ein eigener Abschnitt dafür wäre mehr Apparat als Nutzen. */
.gp-mini {
  flex: none;
  padding: 0 0.3rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.gp-mini:hover { color: #d08a7a; }
.gp-mini:disabled { opacity: 0.4; cursor: default; }
.gp-hinweis.warnung { color: #d3a273; }
.gp-figur {
  flex: none;
  width: 16px;
  height: auto;
  image-rendering: pixelated;
  /* Auf den Boden stellen statt mittig schweben lassen */
  align-self: flex-end;
}
.gp-bewohner .gp-name {
  flex: 1 1 auto;
  font-size: 0.88rem;
}
.gp-bewohner .gp-beruf {
  flex: none;
  font-size: 0.76rem;
  color: var(--text-dim);
}
.gp-bewohner .gp-stimmung {
  flex: none;
  min-width: 2.2rem;
  text-align: right;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}
.gp-bewohner .gp-stimmung.gut {
  color: var(--moos-hell, #a9c795);
}
.gp-bewohner .gp-stimmung.schlecht {
  color: var(--fire-light);
}

/* --- Bildmodell: die Kostenstufe für neue Assets ---------------------------
   Steht ÜBER den Erzeugen-Knöpfen, nicht in einer Einstellungsseite: Wer
   gleich würfeln will, soll im selben Blick sehen, was der Wurf kostet. Die
   Reihenfolge ist teuer → günstig, die Pfeile machen sie lesbar. */
.se-modellwahl {
  margin: 0.9rem 0 0.4rem;
  padding: 0.55rem 0.7rem;
  background: var(--stone-800);
  border: 1px solid var(--iron);
  border-radius: 2px;
}
.se-modell-kopf {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.85rem;
  color: var(--brass-light);
}
.se-modellstufen {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.se-modellpfeil {
  align-self: center;
  color: var(--text-dim);
  opacity: 0.6;
}
.se-modellstufe {
  flex: 1 1 0;
  min-width: 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  background: var(--stone-900);
  border: 1px solid var(--iron);
  border-radius: 2px;
  color: var(--text-dim);
  font-family: var(--font-body);
  text-align: left;
  cursor: var(--cursor-sword-hot);
}
.se-modellstufe:hover:not(:disabled) {
  border-color: var(--brass);
}
.se-modellstufe.aktiv {
  border-color: var(--brass);
  background: rgba(168, 129, 61, 0.18);
}
.se-modellstufe:disabled {
  opacity: 0.5;
}
.se-modellstufe .stufe-name {
  color: var(--text);
  font-size: 0.88rem;
}
.se-modellstufe.aktiv .stufe-name {
  color: var(--brass-light);
}
.se-modellstufe .stufe-kosten {
  font-size: 0.82rem;
}
/* Die teuerste Stufe soll man sehen, bevor man sie wählt */
.se-modellstufe:first-child .stufe-kosten {
  color: var(--fire-light);
}

/* --- Startseite: die Wahl zwischen Spielen und Verwalten -------------------
   Zwei gleichwertige Wege nebeneinander statt eines Hauptknopfs mit einem
   Kleingedruckten daneben. Wer testet, wechselt ständig zwischen beidem. */
/* Die Werkstatt-Einfahrt hält sich knapp: Sie steht vor dem Burgbild, und wer
   sie zum dritten Mal sieht, will nicht wieder sieben Absätze lesen. Die
   Begründungen sind deshalb in Merkzettel gewandert, die beim Überfahren
   rechts neben der Tafel aufgehen — der Text bleibt vollständig erhalten,
   er drängt sich nur nicht mehr auf. */
.start-wege {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.7rem;
  margin-top: 0.9rem;
}
.start-weg {
  padding: 0.7rem 0.8rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--iron);
  border-radius: 2px;
}
.start-weg h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  color: var(--brass-light);
}
.start-weg form {
  margin-top: 0.45rem;
}
.start-weg p {
  margin: 0.2rem 0;
  font-size: 0.85rem;
}

/* Das Fragezeichen ist der einzige Hinweis, dass es mehr zu lesen gibt —
   ein Merkzettel, den niemand findet, ist keiner. */
.start-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border: 1px solid var(--brass-dark);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--brass);
  cursor: help;
}
.start-weg:hover .start-info {
  border-color: var(--brass);
  color: var(--brass-light);
}

/* Beide Merkzettel hängen am Kasten der WEGE, nicht am einzelnen Weg: So
   gehen sie immer rechts NEBEN der Tafel auf statt über dem Nachbarweg, und
   beide sitzen an derselben Stelle — es ist ohnehin nie mehr als einer zu
   sehen. */
.start-tip {
  position: absolute;
  left: calc(100% + 0.8rem);
  top: 0;
  width: 15rem;
  padding: 0.7rem 0.8rem;
  background: linear-gradient(180deg, #2c3138, #1e2227);
  border: 1px solid var(--brass-dark);
  border-radius: 2px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-dim);
  opacity: 0;
  /* Kein visibility:hidden — der Text soll für Vorleseprogramme lesbar
     bleiben, auch wenn er gerade nicht zu sehen ist. */
  pointer-events: none;
  transition: opacity 0.12s ease-out;
  z-index: 6;
}
.start-tip p {
  margin: 0 0 0.5rem;
  font-size: inherit;
}
.start-tip p:last-child {
  margin-bottom: 0;
}
.start-weg:hover .start-tip,
.start-weg:focus-within .start-tip {
  opacity: 1;
}

/* Zu schmal für einen Merkzettel daneben: dann klappt er unter dem Weg auf.
   Die Schwelle ist gerechnet, nicht geraten: Die Tafel ist 700 px breit und
   mittig, rechts daneben braucht der Zettel 255 px plus Abstand — unter rund
   1156 px Fensterbreite ragt er sonst aus dem Bild. 1200 lässt Luft. */
@media (max-width: 1200px) {
  .start-tip {
    left: 0;
    top: calc(100% + 0.4rem);
    width: 100%;
  }
}

/* --- Verwaltungsbereich ---------------------------------------------------- */
.adm-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.adm-zahl {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--iron);
  border-radius: 2px;
}
.adm-zahl .wert {
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--brass-light);
  font-variant-numeric: tabular-nums;
}
.adm-zahl .text {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* Befunde: die Farbe sagt, ob man hinsehen muss */
.adm-liste {
  list-style: none;
  margin: 0.4rem 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.adm-liste li {
  padding: 0.45rem 0.7rem;
  border-left: 3px solid var(--iron);
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.9rem;
  line-height: 1.45;
}
.adm-liste li.gut {
  border-left-color: rgba(122, 145, 102, 0.8);
}
.adm-liste li.warnung {
  border-left-color: var(--fire);
}
.adm-liste strong {
  color: var(--text);
}

.adm-knoepfe {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.adm-knoepfe form {
  margin: 0;
}

/* Rückmeldung nach einer Verwaltungshandlung. Grün und über der Überschrift,
   also dort, wo der Blick nach dem Seitenwechsel ohnehin landet — eine
   Meldung weiter unten hätte dasselbe Problem wie gar keine. */
.adm-meldung {
  margin: 0 0 1rem;
  padding: 0.7rem 1rem;
  background: rgba(60, 90, 45, 0.28);
  border: 1px solid #4d7a3c;
  border-left: 4px solid #6ac46a;
  border-radius: 2px;
  color: #cbe6b8;
  line-height: 1.5;
}

/* Zurücksetzen einer einzelnen Burg (Tabelle "Burgplätze").
   Zurückhaltend gehalten — der Knopf steht in siebzig Zeilen untereinander
   und darf nicht wie ein Aufruf wirken. Rot wird er erst beim Berühren:
   dann ist die Hand schon dort, und die Warnung kommt zur rechten Zeit. */
.burg-zurueck {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--iron);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.burg-zurueck:hover {
  color: #d4695a;
  border-color: #8a4a3c;
  background: rgba(90, 45, 40, 0.25);
}

/* Die Testburg — der große Eingang ganz oben in der Verwaltung.
   Bewusst breiter und lauter als alles andere auf der Seite: Sie ist das
   Werkzeug, das man am häufigsten braucht, und stand vorher als kleine Tafel
   im dritten Abschnitt, wo man sie kennen musste, um sie zu finden. */
.testburg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.1rem;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(180deg, rgba(46, 38, 22, 0.85), rgba(22, 24, 27, 0.92));
  border: 1px solid var(--brass-dark);
  border-left: 4px solid var(--brass);
  border-radius: 3px;
}
.testburg .tb-text { flex: 1 1 22rem; }
.testburg h2 {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  color: var(--brass-light);
  letter-spacing: 0.01em;
}
.testburg p { margin: 0 0 0.4rem; line-height: 1.5; max-width: 46rem; }
.testburg .tb-stand { margin: 0; color: var(--text-dim); font-size: 0.86rem; }
.testburg .tb-tat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
/* Der Knopf selbst: groß genug, dass man ihn nicht sucht. */
.tb-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #14171a;
  background: linear-gradient(180deg, var(--brass-light), var(--brass));
  border: 1px solid var(--brass-light);
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}
.tb-knopf:hover {
  background: linear-gradient(180deg, #f0d79a, var(--brass-light));
  color: #14171a;
}
/* Turm mit Zinnen, rein aus Rahmen gezeichnet — passt zum Wappen im Spiel. */
.tb-wappen {
  width: 14px;
  height: 16px;
  background:
    linear-gradient(#14171a, #14171a) 0 0 / 4px 5px no-repeat,
    linear-gradient(#14171a, #14171a) 10px 0 / 4px 5px no-repeat,
    linear-gradient(#14171a, #14171a) 0 5px / 14px 11px no-repeat;
  opacity: 0.85;
}
.tb-neu {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.3rem 0.7rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--iron);
  border-radius: 2px;
  cursor: pointer;
}
.tb-neu:hover { color: #d4695a; border-color: #8a4a3c; }

/* Werkzeugkacheln — jede sagt, wozu sie gut ist. Ein Raster aus nackten
   Links wäre schneller gebaut und beim zehnten Werkzeug unbrauchbar. */
.adm-werkzeuge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.7rem;
}
.adm-werkzeug {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.8rem 0.9rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--iron);
  border-radius: 2px;
  border-bottom: 1px solid var(--iron);
  text-decoration: none;
}
.adm-werkzeug:hover {
  border-color: var(--brass);
}
.adm-werkzeug strong {
  color: var(--brass-light);
}
.adm-werkzeug .muted {
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Zahlenspalten rechtsbündig — sonst liest sich keine Tabelle */
.panel table td.zahl,
.panel table th.zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.panel table .gut {
  color: #a9c795;
}

/* --- Klangwerkstatt ---------------------------------------------------------
   Eine Liste, kein Mischpult. Jede Zeile ist EIN Klang: Name links, Datei und
   Lautstärke in der Mitte, Anschlagen rechts. Die Spaltenbreiten sind fest,
   damit die Regler untereinander stehen und man Lautstärken über die ganze
   Liste hinweg vergleichen kann — genau darum geht es beim Abstimmen. */
.kw-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.kw-kopfknoepfe {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
#kw-speichern.geaendert {
  border-color: var(--brass);
  color: var(--brass-light);
}
.kw-meldung {
  font-size: 0.85rem;
  color: var(--muted);
}
.kw-meldung.ok { color: #a9c795; }
.kw-meldung.fehler { color: #d08a7a; }

.kw-zaehler {
  font-size: 0.78rem;
  font-weight: normal;
  margin-left: 0.6rem;
}

.kw-liste {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--iron);
  border: 1px solid var(--iron);
}
.kw-zeile {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) 12rem 11rem auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.45rem 0.7rem;
  background: rgba(0, 0, 0, 0.25);
}
/* Belegte Stellen leicht hervorheben — leere sind Lücken, keine Fehler, und
   sollen als solche lesbar bleiben statt zu alarmieren. */
.kw-zeile.stumm { opacity: 0.62; }
.kw-name {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.kw-name strong { color: var(--brass-light); }
.kw-wann {
  font-size: 0.80rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.kw-hinweis {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}
.kw-zeile select { width: 100%; }
.kw-regler {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kw-regler input[type="range"] { flex: 1; min-width: 0; }
.kw-regler output {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--muted);
  min-width: 3.1rem;
  text-align: right;
}
.kw-hoeren { white-space: nowrap; }

/* Der Stopp-Knopf ist im Ruhezustand grau und unscheinbar — er soll erst
   auffallen, wenn wirklich etwas läuft und abzubrechen ist. */
#kw-stopp.aktiv {
  border-color: var(--brass);
  color: var(--brass-light);
}
#kw-stopp:disabled { opacity: 0.45; }

/* „alle anhören" gehört zur Überschrift der Gruppe, nicht in die Liste:
   Es hört die Gruppe als Ganzes ab, nicht eine ihrer Zeilen. */
.kw-durchhoeren {
  float: right;
  font-size: 0.78rem;
  padding: 0.2rem 0.7rem;
}

/* Ablage für neue Klänge. Gestrichelter Rand als Einladung zum Ziehen — dass
   auch ein Knopf danebensteht, ist Absicht: Ziehen und Ablegen ist nicht auf
   jedem Gerät bequem. */
.kw-ablage {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px dashed var(--iron);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.18);
}
.kw-ablage.bereit {
  border-color: var(--brass);
  background: rgba(138, 122, 85, 0.12);
}
#kw-upload-stand { margin: 0.6rem 0 0; }

@media (max-width: 780px) {
  .kw-zeile {
    grid-template-columns: 1fr auto;
    row-gap: 0.5rem;
  }
  .kw-name { grid-column: 1 / -1; }
}

/* --- Cunrat, der Schreiber ---------------------------------------------------
   Der Lehrgang der ersten Stunde. Sitzt oben rechts UNTER dem Kopfband: dort
   ist Platz, man sucht Rat oben, und unten liegt die Bauleiste, auf die er
   zeigt. Bewusst schmal — er soll begleiten, nicht die Burg verdecken. */
.schreiber {
  position: fixed;
  top: 7.2rem;
  right: 1rem;
  width: min(22rem, 34vw);
  z-index: 40;
  /* Pergament: heller als das übrige HUD, damit er als BLATT gelesen wird und
     nicht als weitere Tafel des Spiels. */
  background: linear-gradient(180deg, #e8dfc8, #d9cfb4);
  color: #2c2418;
  border: 1px solid #8a7a55;
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  padding: 0.7rem 0.85rem 0.8rem;
  font-size: 0.9rem;
}
/* Eingeklappt bleibt nur das Siegel stehen. */
.schreiber.zu {
  width: auto;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.sb-siegel {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid #8a7a55;
  background: radial-gradient(circle at 35% 30%, #b1503f, #7d3325);
  color: #f0e2c8;
  /* Ein Fragezeichen statt der Schreibfeder. Die Feder war hübsch, sagte aber
     "hier wird geschrieben" — geklickt wird sie jedoch, wenn man etwas WISSEN
     will. Größer und fetter als die Feder, weil ein einzelnes Satzzeichen auf
     einem Siegel sonst untergeht. */
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
  cursor: var(--cursor-sword-hot);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.sb-siegel:hover { border-color: var(--brass-light); }

.sb-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(90, 74, 44, 0.35);
  padding-bottom: 0.35rem;
  margin-bottom: 0.5rem;
}
.sb-wer {
  font-family: inherit;
  font-size: 1.15rem;
  color: #5a4526;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.sb-wer small {
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7b6a4a;
}
.sb-zaehler {
  margin-left: auto;
  font-size: 0.80rem;
  color: #7b6a4a;
  font-variant-numeric: tabular-nums;
}
.sb-zu {
  background: none;
  border: none;
  color: #7b6a4a;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.2rem;
  cursor: var(--cursor-sword-hot);
}
.sb-zu:hover { color: #2c2418; }

.sb-titel {
  margin: 0 0 0.35rem;
  font-family: inherit;
  font-size: 1.05rem;
  color: #4a3a1e;
}
.sb-text { margin: 0 0 0.5rem; line-height: 1.45; }
/* Der Handgriff, den man wirklich tun soll — abgesetzt vom Fließtext, weil
   man in der Eile nur diese eine Zeile sucht. */
.sb-hinweis {
  margin: 0 0 0.6rem;
  padding: 0.35rem 0.5rem;
  background: rgba(90, 74, 44, 0.14);
  border-left: 2px solid #8a7a55;
  font-size: 0.82rem;
  color: #4a3a1e;
}
.sb-warten {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.8rem;
  font-style: italic;
  color: #6b5a3a;
}
/* Der pulsende Punkt sagt: Es liegt jetzt an dir, nicht an mir. */
.sb-punkt {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #8a5a2b;
  animation: sb-puls 1.8s ease-in-out infinite;
}
@keyframes sb-puls {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-punkt { animation: none; opacity: 0.8; }
}

.sb-weiter {
  width: 100%;
  background: linear-gradient(180deg, #6d5426, #4a3819);
  border: 1px solid #8a7a55;
  color: #f7ecd6;
  font: inherit;
  padding: 0.35rem 0.7rem;
  border-radius: 2px;
  cursor: var(--cursor-sword-hot);
}
.sb-weiter:hover { border-color: var(--brass-light); }
/* Für Schritte, die auf den Spielzustand warten: kein Knopf treibt voran,
   aber wer nicht weiterkommt (oder nicht mehr will), soll nicht feststecken. */
.sb-ueberspringen {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  background: none;
  border: 1px dashed #8a7a55;
  color: #6b5a3a;
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  cursor: var(--cursor-sword-hot);
}
.sb-ueberspringen:hover { border-color: var(--brass-light); color: #2c2418; }
.sb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.sb-zurueck {
  background: none;
  border: none;
  color: #7b6a4a;
  font-size: 0.80rem;
  text-decoration: underline;
  padding: 0;
  cursor: var(--cursor-sword-hot);
}
.sb-zurueck:hover { color: #2c2418; }
.sb-abbruch {
  display: block;
  margin: 0 0 0 auto;
  background: none;
  border: none;
  color: #7b6a4a;
  font-size: 0.80rem;
  text-decoration: underline;
  padding: 0;
  cursor: var(--cursor-sword-hot);
}
.sb-abbruch:hover { color: #2c2418; }

@media (max-width: 780px) {
  .schreiber {
    top: auto;
    bottom: 6.5rem;
    right: 0.5rem;
    left: 0.5rem;
    width: auto;
  }
}

/* --- Werttafeln: Einfluss und Militärstärke ----------------------------------
   Beide Zahlen sind keine Waren, sondern Rechenergebnisse aus vielen Quellen.
   Die Tafeln zeigen die Rechnung — sonst bleibt die Zahl eine Behauptung. */
.res-knopf {
  font: inherit;
  font-size: 1.1rem;
  cursor: var(--cursor-sword-hot);
}
.res-knopf:hover { border-color: var(--brass-light); }

#einflusstafel,
#militaertafel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 13, 0.72);
  padding: 2rem 1rem;
}
#einflusstafel[hidden],
#militaertafel[hidden] { display: none; }
.wt-tafel {
  width: min(680px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(38, 42, 48, 0.99), rgba(22, 25, 29, 0.99));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
  padding: 1.1rem 1.3rem 1.4rem;
}
.wt-kopf {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--iron);
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
}
.wt-titel { font-size: 1.4rem; color: var(--brass-light); }
.wt-wert {
  margin-left: auto;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--brass-light);
}
.wt-zu {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 0.3rem;
  cursor: var(--cursor-sword-hot);
}
.wt-zu:hover { color: var(--brass-light); }
.wt-text { margin: 0 0 0.9rem; line-height: 1.5; }
.wt-h {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
  color: var(--brass);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.wt-proTag {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--text-dim);
}
.wt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wt-liste li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0.6rem;
  background: rgba(0, 0, 0, 0.25);
}
.wt-sache {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
}
.wt-sache small { color: var(--text-dim); font-size: 0.8rem; line-height: 1.3; }
.wt-menge,
.wt-punkte {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wt-menge { color: var(--text-dim); min-width: 2.5rem; text-align: right; }
.wt-punkte { color: var(--moss); min-width: 3.5rem; text-align: right; }
.wt-summe {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--iron);
  color: var(--brass-light);
}
.wt-fuss { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--text-dim); }
.wt-schlicht li { background: none; padding-left: 0; }

/* Die Rüstkammer: EINE Rüstung für die ganze Mannschaft, nicht je Mann. */
.wt-ruestkammer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.7rem;
  background: rgba(109, 84, 38, 0.16);
  border: 1px solid var(--brass-dark);
  border-radius: 2px;
}
.wt-ruestkammer > div { display: flex; flex-direction: column; gap: 0.1rem; }
.wt-ruestkammer small { color: var(--text-dim); font-size: 0.82rem; }
.wt-btn {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font: inherit;
  font-size: 0.88rem;
  padding: 0.3rem 0.8rem;
  white-space: nowrap;
}
.wt-btn small { font-size: 0.78rem; opacity: 0.8; }
.wt-fertig { margin-left: auto; color: var(--text-dim); font-size: 0.85rem; }

.wt-maenner li { gap: 0.6rem; }
.wt-figur { image-rendering: pixelated; flex: none; }
.wt-ruestung {
  font-size: 0.85rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.wt-ruestung.hat { color: #b9c0c8; }

@media (max-width: 780px) {
  .wt-liste li { flex-wrap: wrap; }
  .wt-btn { margin-left: 0; }
}

/* --- Handelstafel des Markts ------------------------------------------------
   Liegt über der Burg wie die Ereignistafel: Beim Handeln vergleicht man
   Preise und rechnet, dafür ist die HUD-Ecke zu eng. Die Tafel nimmt Klicks
   an, damit man nicht versehentlich daneben baut. */
#handelstafel {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(8, 10, 13, 0.72);
  padding: 2rem 1rem;
}
#handelstafel[hidden] { display: none; }
.ht-tafel {
  width: min(860px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(38, 42, 48, 0.99), rgba(22, 25, 29, 0.99));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
  padding: 1.1rem 1.3rem 1.4rem;
}
.ht-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--iron);
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
}
.ht-titel {
  font-family: inherit;
  font-size: 1.6rem;
  color: var(--brass-light);
}
.ht-silber {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.1rem;
  color: var(--brass-light);
}
.ht-zu {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 0.3rem;
  cursor: var(--cursor-sword-hot);
}
.ht-zu:hover { color: var(--brass-light); }

/* Die Partner als Reiter. Wer mit mehreren handelt, springt zwischen ihnen
   hin und her, um Preise zu vergleichen — das ist der eigentliche Spielzug. */
.ht-partner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}
.ht-partnerknopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  padding: 0.4rem 0.8rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--iron);
  border-radius: 2px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: var(--cursor-sword-hot);
}
.ht-partnerknopf span { font-size: 0.75rem; color: var(--text-dim); }
.ht-partnerknopf em {
  font-size: 0.80rem;
  font-style: normal;
  color: var(--moss);
}
.ht-partnerknopf.aktiv {
  border-color: var(--brass);
  background: rgba(109, 84, 38, 0.28);
}
.ht-ort { margin: 0 0 0.7rem; font-size: 0.92rem; }
.ht-leer { color: var(--text-dim); margin: 1rem 0; }

.ht-preise {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.ht-preise th {
  text-align: left;
  font-size: 0.80rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: normal;
  padding: 0 0.5rem 0.35rem;
}
.ht-preise td {
  padding: 0.3rem 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}
/* Das Erzeugnis des Ortes: der ganze Grund, diesen Partner zu wählen. */
.ht-preise tr.schwerpunkt {
  background: rgba(109, 84, 38, 0.16);
}
.ht-ware {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.ht-marke {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brass);
}
.ht-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ht-verkauf { color: #a9c795; }
.ht-kauf { color: #d8a67e; }
.ht-menge {
  width: 4.5rem;
  padding: 0.15rem 0.35rem;
  font: inherit;
  font-size: 0.85rem;
}
.ht-tat {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
}
.ht-tat button {
  font-size: 0.78rem;
  padding: 0.2rem 0.6rem;
}
.ht-fuss { font-size: 0.8rem; margin: 0.7rem 0 0; }

.ht-neu { margin-top: 1.1rem; border-top: 1px solid var(--iron); padding-top: 0.8rem; }
.ht-neu summary { cursor: var(--cursor-sword-hot); color: var(--brass-light); }
.ht-neu-text { font-size: 0.82rem; margin: 0.5rem 0 0.7rem; }
.ht-angebote {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ht-angebote li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0.6rem;
  background: rgba(0, 0, 0, 0.25);
}
.ht-angebote li > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ht-angebote li span { font-size: 0.76rem; }
.ht-angebote li em { font-size: 0.82rem; font-style: normal; color: var(--moss); }
.ht-angebote li button { margin-left: auto; white-space: nowrap; }
.ht-angebote li.gesperrt { opacity: 0.55; }
.ht-grund { color: #d08a7a; }

@media (max-width: 780px) {
  .ht-preise { font-size: 0.82rem; }
  .ht-preise th:nth-child(2), .ht-preise td:nth-child(2) { display: none; }
  .ht-tat { flex-direction: column; }
}

/* --- Icon-Werkstatt ---------------------------------------------------------
   Wie die Klangwerkstatt eine Liste, keine Galerie: Jede Zeile ist EIN Zeichen
   mit seinem Stand im Spiel, dem letzten Wurf daneben und den Knöpfen rechts.
   Die Bilder stehen in ECHTER Größe — ein Icon lässt sich nur beurteilen, wenn
   es so groß ist wie später in der Leiste. */
.iw-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.iw-kopfknoepfe {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.iw-meldung {
  font-size: 0.85rem;
  color: var(--muted);
}
.iw-meldung.ok { color: #a9c795; }
.iw-meldung.fehler { color: #d08a7a; }
.iw-zaehler {
  font-size: 0.78rem;
  font-weight: normal;
  margin-left: 0.6rem;
}

.iw-liste {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--iron);
  border: 1px solid var(--iron);
}
.iw-zeile {
  display: grid;
  grid-template-columns: minmax(11rem, 1fr) 8.5rem auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0.7rem;
  background: rgba(0, 0, 0, 0.25);
}
.iw-zeile.eigen { background: rgba(138, 122, 85, 0.1); }
.iw-name {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.iw-name strong { color: var(--brass-light); }
.iw-ziel {
  font-size: 0.80rem;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}
.iw-marke {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}

.iw-bilder {
  display: flex;
  gap: 0.6rem;
}
.iw-bilder figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
/* Karo-Grund: Bei freigestellten Zeichen ist sonst nicht zu sehen, wo das Bild
   aufhört und wo ein dunkler Fleck im Motiv sitzt. */
.iw-bild,
.iw-leer {
  display: block;
  min-width: 18px;
  min-height: 18px;
  image-rendering: pixelated;
  background-color: #23272c;
  background-image: linear-gradient(45deg, #2c3138 25%, transparent 25%, transparent 75%, #2c3138 75%),
    linear-gradient(45deg, #2c3138 25%, transparent 25%, transparent 75%, #2c3138 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  border: 1px solid var(--iron);
}
.iw-bild.fehlt { visibility: hidden; }
.iw-bilder figcaption {
  font-size: 0.78rem;
  color: var(--muted);
}
.iw-leer {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.iw-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}
.iw-knoepfe button {
  font-size: 0.78rem;
  padding: 0.25rem 0.7rem;
}
.iw-promptfeld {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.iw-promptfeld textarea {
  width: 100%;
  font-size: 0.8rem;
}
.iw-promptknoepfe {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.78rem;
}

@media (max-width: 780px) {
  .iw-zeile {
    grid-template-columns: 1fr auto;
    row-gap: 0.5rem;
  }
  .iw-name { grid-column: 1 / -1; }
  .iw-knoepfe { justify-content: flex-start; }
}

/* --- Das offene Dilemma -----------------------------------------------------
   Liegt über der ganzen Burg und nimmt Klicks an. Kein Schließknopf: Ein
   Dilemma, das man wegklicken kann, ist keins — man würde es wegklicken und
   nie wieder ansehen. Wer nicht entscheiden will, lässt die Frist verstreichen. */
#ereignis {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 11, 13, 0.72);
}
#ereignis[hidden] { display: none; }

.ereignis-tafel {
  width: min(30rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.4rem 1.5rem 1.2rem;
  background: var(--stone-800);
  border: 1px solid var(--brass-dark);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.ereignis-tafel h2 {
  margin: 0 0 0.7rem;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: normal;
  color: var(--brass-light);
  line-height: 1.15;
}

/* Der Satz aus der Welt heraus — auf Pergament, damit er sich vom Apparat
   drumherum absetzt. Er ist das, was der Spieler wirklich liest. */
.ereignis-szene {
  margin: 0 0 1.1rem;
  padding: 0.7rem 0.85rem;
  background: rgba(215, 199, 163, 0.08);
  border-left: 2px solid var(--brass-dark);
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--parchment);
}

.ereignis-wahlen {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ereignis-wahl {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--iron);
  border-radius: 2px;
  cursor: var(--cursor-sword-hot);
}
.ereignis-wahl:hover:not(:disabled) {
  background: rgba(109, 84, 38, 0.22);
  border-color: var(--brass);
}
.ereignis-wahl b {
  display: block;
  color: var(--kopf, #e8e4d6);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.ereignis-wahl span {
  display: block;
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.ereignis-wahl:disabled {
  opacity: 0.45;
  cursor: default;
}
.ereignis-wahl .unmoeglich {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-style: normal;
  color: var(--blood);
}

/* Die Frist. Zurückhaltend gesetzt — sie soll drohen, nicht schreien. */
.ereignis-frist {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ===========================================================================
   Das Buch der Burg (/wiki) — Tutorial und Nachschlagewerk.
   Aufgebaut aus denselben Tafeln wie die übrigen Server-Seiten; eigen ist nur
   der Bildkopf und die Gebäudegalerie.
   =========================================================================== */

/* Bildkopf: das Startbild als Bühne, der Titel darauf. Die Verläufe holen
   den Text aus dem Bild heraus, ohne es zuzukleistern. */
.wiki-kopf {
  position: relative;
  margin-bottom: 1.6rem;
  border: 1px solid var(--brass-dark);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}
.wiki-kopf__bild {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  object-position: center 62%;
  filter: saturate(0.85) brightness(0.72);
}
.wiki-kopf__text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 1.6rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(10, 12, 15, 0.82) 55%);
}
.wiki-kopf__text h1 {
  margin: 0.1rem 0 0.3rem;
  font-family: var(--font-display);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--brass-light);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.wiki-kopf__text .wiki-lead {
  margin: 0;
  max-width: 46rem;
}

.wiki-lead {
  color: var(--text-dim);
  font-style: italic;
  line-height: 1.5;
}

/* Inhaltsverzeichnis: zweispaltig, kompakt — es soll überflogen werden. */
.wiki-inhalt {
  padding: 1.1rem 1.4rem;
  margin-bottom: 1.6rem;
}
.wiki-inhalt ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: kapitel;
  columns: 2;
  column-gap: 2rem;
}
.wiki-inhalt li {
  counter-increment: kapitel;
  break-inside: avoid;
  padding: 0.16rem 0;
}
.wiki-inhalt li::before {
  content: counter(kapitel) ".";
  color: var(--brass);
  margin-right: 0.45rem;
  font-variant-numeric: tabular-nums;
}

.container.wide > section.panel {
  margin-bottom: 1.4rem;
}
.container.wide > section.panel h2 {
  margin-top: 0;
  font-family: inherit;
  font-size: 1.65rem;
  color: var(--brass-light);
}
.container.wide > section.panel h3 {
  margin: 1.6rem 0 0.3rem;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Erste Schritte: nummerierte Marschtafel */
.wiki-schritte {
  counter-reset: schritt;
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}
.wiki-schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 0.4rem 0 0.4rem 2.6rem;
  border-top: 1px solid rgba(109, 84, 38, 0.25);
  line-height: 1.5;
}
.wiki-schritte li:first-child { border-top: none; }
.wiki-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--brass-dark);
  border-radius: 50%;
  color: var(--brass-light);
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.3);
}

/* Gebäudegalerie: Bild links, Daten rechts. */
.wiki-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 0.8rem;
  margin-top: 0.7rem;
}
.wiki-bau {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.8rem 0.9rem;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid var(--iron);
  border-left: 3px solid var(--brass-dark);
  border-radius: 2px;
}
.wiki-bau__bild {
  flex: none;
  width: 76px;
  min-height: 68px;
  display: grid;
  place-items: end center;
}
/* Die Sprites sind Pixelbilder — nur so bleiben sie beim Skalieren scharf. */
.wiki-sprite {
  image-rendering: pixelated;
  max-width: 76px;
  max-height: 84px;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}
.wiki-sprite--icon {
  max-width: 46px;
  max-height: 46px;
}
.wiki-sprite--fehlt {
  display: block;
  width: 46px;
  height: 46px;
  border: 1px dashed var(--iron-light);
  border-radius: 2px;
}
.wiki-bau__text { min-width: 0; }
.wiki-bau h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--brass-light);
}
.wiki-flavor {
  margin: 0.15rem 0 0.4rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.35;
}
.wiki-bau dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.6rem;
  margin: 0;
  font-size: 0.83rem;
}
.wiki-bau dt {
  color: var(--text-dim);
  white-space: nowrap;
}
.wiki-bau dd { margin: 0; }

.wiki-plus { color: #a8c79a; }
.wiki-minus { color: #d8ab7c; }

.wiki-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 0.7rem 0;
  font-size: 0.88rem;
}
.wiki-tabelle th {
  text-align: left;
  font-size: 0.80rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--brass-dark);
  padding: 0.3rem 0.6rem 0.3rem 0;
}
.wiki-tabelle td {
  padding: 0.28rem 0.6rem 0.28rem 0;
  border-bottom: 1px solid rgba(109, 84, 38, 0.18);
  vertical-align: top;
}

kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--iron-light);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: var(--stone-800);
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--brass-light);
}

.wiki-zurueck {
  text-align: center;
  margin-top: 2rem;
}

@media (max-width: 640px) {
  .wiki-inhalt ol { columns: 1; }
  .wiki-kopf__bild { height: 160px; }
  .wiki-kopf__text h1 { font-size: 1.7rem; }
}

/* Bildvignette über der Ereignistafel. Breitformat, harte Pixelkanten —
   sie ist im selben Stil gemalt wie das Spiel darunter. */
.ereignis-bild {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  image-rendering: pixelated;
  border: 1px solid var(--brass-dark);
  border-radius: 2px;
  margin-bottom: 0.9rem;
  filter: saturate(0.92);
}
.ereignis-bild[hidden] { display: none; }

/* Auswahlfeld der Werkstatt (Ereignisliste) */
#devpanel .dev-auswahl {
  width: 100%;
  background: var(--stone-700);
  border: 1px solid var(--iron);
  color: var(--text);
  border-radius: 2px;
  padding: 0.24rem 0.3rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
}

/* ===========================================================================
   Bauleiste (Baumodus) — Neufassung: Gebäudebilder unten, Reiter darüber,
   Infokarte nur fürs gewählte Werkzeug. Überschreibt die alte Seitenspalte.
   =========================================================================== */
#baumenu {
  top: auto;
  bottom: 0.75rem;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: auto;
  max-width: min(96vw, 66rem);
  overflow: visible;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
/* Im Baumodus weicht die alte Bauen/Abriss-Leiste der Bauleiste — die
   Vorräte rechts daneben bleiben aber stehen. Wer baut, muss sehen, wovon:
   ein Balken, der ausgerechnet im Baumodus verschwindet, verdeckt genau die
   Zahlen, die für die Entscheidung zählen. #baumenu reserviert dafür schon
   Platz (bottom: 4.2rem). */
body.baumodus #bauwerkzeuge { display: none; }

#baumenu .bau-kopf {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.6rem;
  background: linear-gradient(180deg, rgba(28, 31, 36, 0.97), rgba(18, 20, 23, 0.97));
  border: 1px solid var(--brass-dark);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}
#baumenu .bau-titel {
  font-family: inherit;
  font-size: 1.15rem;
  color: var(--brass-light);
  padding: 0 0.2rem;
}
#baumenu .bau-tabs { display: flex; gap: 0.25rem; flex: 1 1 auto; }
#baumenu .bau-tab {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--iron);
  border-bottom-width: 3px;
  color: var(--text-dim);
  border-radius: 2px;
  padding: 0.22rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: var(--cursor-sword-hot);
}
#baumenu .bau-tab.kat-rohstoffe { border-bottom-color: #5d8a4f; }
#baumenu .bau-tab.kat-verarbeitung { border-bottom-color: #b0793e; }
#baumenu .bau-tab.kat-sozial { border-bottom-color: #4f7a9e; }
#baumenu .bau-tab.kat-verteidigung { border-bottom-color: #8a8f96; }
#baumenu .bau-tab.aktiv {
  background: linear-gradient(180deg, #3a3f47, #2c3138);
  color: var(--brass-light);
  border-color: var(--brass-dark);
}
#baumenu .planhinweis-kurz {
  font-size: 0.80rem;
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap;
  cursor: help;
}
#baumenu .planhinweis-kurz.wartend { color: #d8ab7c; font-style: normal; }
#baumenu .fertig {
  background: linear-gradient(180deg, #6d5426, #43341a);
  border: 1px solid var(--brass);
  color: #f7ecd6;
  border-radius: 2px;
  padding: 0.22rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: var(--cursor-sword-hot);
}

/* Die Leiste selbst: Bild oben, Name darunter — man erkennt das Haus. */
#baumenu .bau-leiste {
  display: flex;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem 0.45rem;
  background: linear-gradient(180deg, rgba(18, 20, 23, 0.97), rgba(12, 14, 17, 0.97));
  border: 1px solid var(--brass-dark);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
  overflow-x: auto;
}
#baumenu .bau-ikone {
  position: relative;
  flex: none;
  width: 4.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.2rem 0.28rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--iron);
  border-radius: 2px;
  cursor: var(--cursor-sword-hot);
  transition: transform 0.08s ease-out, border-color 0.08s;
}
#baumenu .bau-ikone:hover:not(.locked) {
  transform: translateY(-3px);
  border-color: var(--brass);
}
#baumenu .bau-ikone.aktiv {
  border-color: var(--brass-light);
  background: linear-gradient(180deg, rgba(168, 129, 61, 0.22), rgba(168, 129, 61, 0.08));
  box-shadow: 0 0 12px rgba(168, 129, 61, 0.35);
}
/* Cunrats Fingerzeig: der Knopf, den der aktuelle Lehrgangsschritt meint
   (schreiber.ts → ui.ts setzeBauziel). Pulsiert, statt nur stillzustehen —
   ein feststehender Rahmen geht in einer Leiste mit zwanzig Knöpfen unter. */
#baumenu .bau-ikone.sb-ziel {
  border-color: var(--brass-light);
  animation: sb-ziel-puls 1.6s ease-in-out infinite;
}
@keyframes sb-ziel-puls {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(204, 167, 94, 0.45); }
  50% { box-shadow: 0 0 16px 4px rgba(204, 167, 94, 0.9); }
}
@media (prefers-reduced-motion: reduce) {
  #baumenu .bau-ikone.sb-ziel { animation: none; box-shadow: 0 0 12px 3px rgba(204, 167, 94, 0.7); }
}
#baumenu .bau-ikone__bild {
  height: 44px;
  display: grid;
  place-items: end center;
}
#baumenu .bau-ikone__bild img {
  max-width: 56px;
  max-height: 44px;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
#baumenu .bau-ikone__name {
  font-size: 0.78rem;
  line-height: 1.1;
  color: var(--text-dim);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#baumenu .bau-ikone.aktiv .bau-ikone__name { color: var(--brass-light); }
#baumenu .bau-ikone.locked {
  opacity: 0.45;
  filter: grayscale(0.7);
  cursor: var(--cursor-sword);
}
/* Vorratstafel des Bauplans, oben links. Zeigt, wovon diese Burgstätte lebt:
   Wald und Fisch wachsen nach, Fels und Erz nicht. Der Unterschied ist die
   wichtigste Information darauf — deshalb das Nachwuchszeichen. */
#kartenvorrat {
  top: 3.6rem;
  left: 0.7rem;
  width: 232px;
  padding: 0.55rem 0.7rem 0.5rem;
  background: rgba(18, 20, 23, 0.94);
  border: 1px solid var(--iron);
  border-left: 2px solid var(--brass-dark);
  border-radius: 2px;
}
.kv-kopf { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.45rem; }
.kv-titel { font-size: 0.8rem; color: var(--brass-light); letter-spacing: 0.02em; }
.kv-merkmale { font-size: 0.80rem; color: var(--text-dim); font-style: italic; }
.kv-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.28rem; }
.kv-zeile {
  display: grid;
  grid-template-columns: 16px 1fr 46px auto;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text);
}
.kv-icon { width: 16px; height: 16px; image-rendering: pixelated; }
.kv-name { white-space: nowrap; }
.kv-nachwuchs { font-style: normal; color: #6ac46a; margin-left: 0.15rem; font-size: 0.8em; }
.kv-balken {
  height: 5px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--iron);
  border-radius: 1px;
  overflow: hidden;
}
.kv-balken i { display: block; height: 100%; background: var(--brass); }
.kv-zahl { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.kv-zahl b { font-weight: 400; color: var(--text-dim); }
/* Knapp: der Vorrat geht zur Neige. Leer: hier gibt es davon nichts (mehr). */
.kv-zeile.knapp .kv-balken i { background: #d0913a; }
.kv-zeile.knapp .kv-zahl { color: #d8ab7c; }
.kv-zeile.leer { opacity: 0.55; }
.kv-zeile.leer .kv-balken i { background: #8a4a3c; }
.kv-zeile.leer .kv-zahl { color: #d4695a; }
.kv-fuss { margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--text-dim); line-height: 1.3; }

/* Rückfrage nach einem gezogenen Zug. Sitzt über der Bauleiste, mittig —
   dort, wo der Blick nach dem Loslassen ohnehin hängt. Nimmt Klicks an
   (anders als die übrigen HUD-Schichten), sonst ginge der Knopf ins Leere. */
#zugfrage {
  bottom: calc(var(--baumenu-hoehe, 12rem) + 3.6rem);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: rgba(18, 20, 23, 0.96);
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}
#zugfrage[hidden] { display: none; }
.zugfrage-text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
  text-align: center;
}
.zugfrage-knoepfe { display: flex; gap: 0.5rem; }
#zugfrage button {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.9rem;
  border-radius: 2px;
  cursor: pointer;
  background: rgba(30, 34, 38, 0.9);
  color: var(--text);
  border: 1px solid var(--iron);
}
#zugfrage .zug-ja {
  color: #9ae86a;
  border-color: #4d7a3c;
}
#zugfrage .zug-ja:hover { background: rgba(60, 90, 45, 0.5); }
#zugfrage .zug-nein { color: #d4695a; }
#zugfrage .zug-nein:hover { background: rgba(90, 45, 40, 0.5); }

/* Der Trampelpfad steht in jedem Reiter — abgesetzt durch einen Trenner und
   einen leichten Messingschimmer, damit er nicht wie ein Gebäude des gerade
   offenen Reiters gelesen wird. */
#baumenu .bau-ikone.dauerhaft {
  border-color: var(--brass-dark);
  background: rgba(168, 129, 61, 0.08);
}
#baumenu .bau-trenner {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin: 0.15rem 0.3rem;
  background: var(--iron);
}
/* Rohstoffe reichen (noch) nicht: Bild ergraut, wählbar bleibt die Ikone —
   geplant wird kostenlos, bezahlt erst beim Bestätigen. Nur das BILD wird
   entsättigt, nicht der ganze Knopf: der Name muss lesbar bleiben. */
#baumenu .bau-ikone.zu-teuer .bau-ikone__bild {
  filter: grayscale(0.85) brightness(0.72);
}
#baumenu .bau-ikone.zu-teuer .bau-ikone__name {
  color: var(--text-dim);
}
/* Schloss als gezeichnetes Symbol statt Emoji — bleibt im Pixelstil */
#baumenu .bau-ikone__schloss {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 10px;
  height: 8px;
  background: var(--iron-light);
  border-radius: 1px;
}
#baumenu .bau-ikone__schloss::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 6px;
  height: 5px;
  border: 1.6px solid var(--iron-light);
  border-bottom: none;
  border-radius: 3px 3px 0 0;
}

/* Infokarte: schwebt über der Leiste, nur wenn etwas gewählt ist. Bewusst
   klein — auf einem Notebook-Bildschirm frisst jedes zusätzliche Pixel hier
   Platz, den die Karte selbst bräuchte. Die Kosten stehen an der Kachel
   (Ikone grau/rot, Tooltip nennt den Fehlbestand), hier steht nur noch, WAS
   es ist und WIE LANGE es dauert. */
#baumenu .bau-info {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
  padding: 0.35rem 0.55rem;
  background: linear-gradient(180deg, rgba(28, 31, 36, 0.97), rgba(18, 20, 23, 0.97));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
}
#baumenu .bau-info__bild {
  flex: none;
  max-width: 40px;
  max-height: 40px;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}
#baumenu .bau-info__text h4 {
  margin: 0;
  font-size: 0.88rem;
  color: var(--brass-light);
  display: inline;
}
#baumenu .bau-info__text .mechanik {
  margin: 0.1rem 0 0;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--text-dim);
  /* Höchstens zwei Zeilen — der Rest der Beschreibung bleibt im Wiki,
     nicht in einem Fenster, das man beim Bauen ständig vor sich hat. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#baumenu .bau-info__text .fuss {
  margin: 0.05rem 0 0;
  font-size: 0.74rem;
  color: var(--text-dim);
}
#baumenu .bau-info__text .bauzeit { color: var(--text-dim); }

/* --- Bedrohungen: die Tafel oben rechts ------------------------------------
   Wolfsrudel und Räuberlager mit Frist. Blutrand statt Messing: Das hier ist
   keine Verwaltung, das ist Gefahr — sie muss sich von jedem anderen Zettel
   der Ecke unterscheiden, ohne dass man liest. Die Nachbarn darunter rutschen
   über --bedrohungen-hoehe nach unten (gesetzt in ui.ts nach dem Messen). */
#bedrohungen {
  top: 3.6rem;
  right: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 264px;
}
.bedrohung {
  background: rgba(24, 16, 16, 0.92);
  border: 1px solid #6e2a22;
  border-left: 3px solid #8f3a2c;
  border-radius: 2px;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
}
.bedrohung .kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  color: #d8a08a;
}
.bedrohung .staerke {
  font-size: 0.8rem;
  color: #b98;
  white-space: nowrap;
}
.bedrohung .zeile {
  margin-top: 0.15rem;
}
.bedrohung .zeile.muted {
  color: #9a8f83;
  font-size: 0.78rem;
}
.bedrohung .lauf {
  color: #e0b060;
  font-variant-numeric: tabular-nums;
}
.bedrohung .entsenden {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.bedrohung .entsenden input {
  width: 3.2rem;
  font: inherit;
  color: inherit;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid #5a4a3a;
  border-radius: 2px;
  padding: 0.15rem 0.3rem;
}
.bedrohung .entsenden button {
  flex: 1;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  color: #e8c9a0;
  background: #4a2620;
  border: 1px solid #8f3a2c;
  border-radius: 2px;
  padding: 0.2rem 0.5rem;
}
.bedrohung .entsenden button:hover:not(:disabled) {
  background: #5d2f26;
}
.bedrohung .entsenden button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --- Die Standestafel --------------------------------------------------------
   Wer der Spieler ist, was er getan hat und was ihm zum nächsten Rang fehlt.
   Liegt über der Burg wie die Ereignistafel und nicht in der Ecke: Man liest
   sie einmal, fasst einen Vorsatz und geht zurück ans Werk. */
#spielerpanel {
  position: fixed;
  inset: 0;
  z-index: 880;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 11, 13, 0.72);
  pointer-events: auto;
}
#spielerpanel[hidden] { display: none; }
.sp-tafel {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.2rem 1.4rem 1.4rem;
  background: linear-gradient(180deg, rgba(30, 33, 38, 0.99), rgba(18, 20, 23, 0.99));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.75);
}
.sp-zu {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.sp-zu:hover { color: var(--brass-light); }

.sp-kopf { display: flex; gap: 1rem; align-items: flex-start; }
/* Das Bildnis. Platzhalter mit der Initiale auf einem Wappenschild — leer
   wäre schlimmer als vorläufig, und ein Schild sagt zugleich, was später
   dort steht. */
.sp-bildnis {
  flex: none;
  width: 5.5rem;
  height: 6.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: linear-gradient(180deg, rgba(74, 63, 82, 0.5), rgba(40, 34, 46, 0.6));
  border: 1px solid var(--brass-dark);
  /* Schildform: oben gerade, unten in eine Spitze zulaufend. */
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}
.sp-initiale {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--brass-light);
}
.sp-platzhalter { font-size: 0.6rem; letter-spacing: 0.05em; color: var(--text-dim); }

.sp-namen { min-width: 0; flex: 1; }
.sp-titel {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.sp-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--brass-light);
}
.sp-rangtext { margin: 0.35rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--text-dim); }

.sp-taten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
}
.sp-taten > div { display: flex; flex-direction: column; gap: 0.1rem; }
.sp-wert { font-size: 1rem; color: var(--text); }
.sp-marke { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }

/* Die Leiter als Kette. Erreichtes in Messing, der aktuelle Rang gefüllt,
   das Künftige blass — auf einen Blick, wo man steht und wie weit es ist. */
.sp-leiter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.sp-stufe {
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  border: 1px solid var(--iron);
  border-radius: 2px;
  color: var(--text-dim);
}
.sp-stufe.erreicht { border-color: var(--brass-dark); color: var(--brass); }
.sp-stufe.jetzt {
  border-color: var(--brass);
  background: rgba(168, 129, 61, 0.22);
  color: #e8d5a8;
  font-weight: bold;
}

.sp-aufstieg { margin-top: 1.1rem; }
.sp-aufstieg h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--brass-light);
}
.sp-anteil { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-dim); }

.sp-bedingungen { margin: 0.7rem 0 0; padding: 0; list-style: none; }
.sp-bedingung {
  display: grid;
  grid-template-columns: 1.2rem 1fr auto;
  align-items: center;
  gap: 0.4rem 0.5rem;
  padding: 0.28rem 0;
}
.sp-haken { color: var(--text-dim); text-align: center; }
.sp-bedingung.erfuellt .sp-haken { color: #a9c795; }
.sp-bedingung.erfuellt .sp-was,
.sp-bedingung.erfuellt .sp-zahl { color: var(--text-dim); }
.sp-zahl { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
/* Der Balken läuft über die volle Breite unter der Zeile — so vergleicht man
   auf einen Blick, welche Aufgabe am weitesten und welche am wenigsten weit
   ist, ohne die Zahlen im Kopf ins Verhältnis setzen zu müssen. */
.sp-balken {
  grid-column: 2 / -1;
  height: 3px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  overflow: hidden;
}
.sp-balken i { display: block; height: 100%; background: var(--brass); }
.sp-bedingung.erfuellt .sp-balken i { background: #7fa663; }
.sp-bereit { margin: 0.7rem 0 0; color: #a9c795; }
.sp-hinweis { margin: 0; color: var(--text-dim); }

/* --- Die Botenstube ----------------------------------------------------------
   Ein Fenster, das Burgansicht und Landkarte teilen (server/public/chat.js).
   Frei verschiebbar und in der Größe zu ziehen — deshalb bekommt es hier nur
   Aussehen und Innenaufbau; wo es steht und wie groß es ist, schreibt das
   Skript als Inline-Stil, weil es aus localStorage kommt und den Seitenwechsel
   überleben muss. */
.chatfenster {
  position: fixed;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(36, 40, 46, 0.97), rgba(20, 23, 27, 0.97));
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
  font-size: 0.9rem;
  overflow: hidden;
}
.chatfenster[hidden] { display: none; }

.ct-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid var(--iron);
  /* Die Titelleiste IST der Griff — deshalb der Greifzeiger und kein
     Textmarkieren beim Ziehen. */
  cursor: var(--cursor-hand, grab);
  user-select: none;
}
.ct-titel { color: var(--brass-light); }
.ct-summe {
  margin-left: auto;
  min-width: 1.3rem;
  padding: 0 0.3rem;
  text-align: center;
  font-size: 0.78rem;
  background: var(--blood);
  color: #f0c9bd;
  border-radius: 999px;
}
.ct-summe[hidden] { display: none; }
.ct-klapp {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: var(--cursor-sword-hot);
}
.ct-summe:not([hidden]) + .ct-klapp { margin-left: 0.4rem; }
.ct-klapp:hover { color: var(--brass-light); }

.ct-koerper {
  display: flex;
  flex-direction: column;
  /* Füllt, was die Titelleiste übrig lässt. Die Höhe steht am Fenster —
     hier stünde sie in einem Flex-Item und würde weggeschrumpft. */
  flex: 1;
  min-height: 0;
  /* Eingeklappt fährt der Körper auf null — das Fenster schrumpft dann auf
     seine Titelleiste, bleibt aber an derselben Stelle stehen. */
  transition: height 0.15s ease;
}
.chatfenster.zu .ct-koerper { display: none; }

.ct-faeden {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--iron);
  overflow-x: auto;
}
.ct-faden {
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--iron);
  border-radius: 2px;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.82rem;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
  cursor: var(--cursor-sword-hot);
}
.ct-faden.aktiv {
  border-color: var(--brass);
  background: rgba(109, 84, 38, 0.28);
  color: var(--text);
}
.ct-punkt {
  margin-left: 0.3rem;
  padding: 0 0.25rem;
  font-size: 0.72rem;
  background: var(--blood);
  color: #f0c9bd;
  border-radius: 999px;
}
.ct-neu {
  font: inherit;
  font-size: 0.8rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-dim);
  border: 1px solid var(--iron);
  max-width: 8rem;
}

.ct-verlauf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.4rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ct-zeile {
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
}
.ct-zeit { color: var(--text-dim); font-size: 0.78rem; margin-right: 0.35rem; }
.ct-von { color: var(--brass-light); margin-right: 0.35rem; }
.ct-von::after { content: ":"; }
/* Eigene Worte etwas zurückgenommen — man erkennt die eigene Stimme ohnehin,
   und die der anderen sind das, was man sucht. */
.ct-zeile.selbst .ct-von { color: var(--moss); }
.ct-zeile.privat { background: rgba(109, 84, 38, 0.12); border-left: 2px solid var(--brass-dark); padding-left: 0.35rem; }
.ct-leer { color: var(--text-dim); font-style: italic; margin: auto; }

.ct-eingabe {
  display: flex;
  gap: 0.3rem;
  padding: 0.4rem;
  border-top: 1px solid var(--iron);
}
.ct-eingabe input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.88rem;
  padding: 0.25rem 0.45rem;
}
.ct-eingabe button { font-size: 0.85rem; padding: 0.25rem 0.7rem; }
.ct-fehler {
  margin: 0;
  padding: 0 0.55rem 0.4rem;
  font-size: 0.8rem;
  color: #d08a7a;
}
.ct-fehler[hidden] { display: none; }

/* Die Ecke zum Ziehen. Kein eigenes Bild — zwei Striche genügen, und sie
   liegen dort, wo man sie erwartet. */
.ct-griffecke {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 50%, var(--iron-light, #6a6864) 50%, var(--iron-light, #6a6864) 60%, transparent 60%),
    linear-gradient(135deg, transparent 70%, var(--iron-light, #6a6864) 70%, var(--iron-light, #6a6864) 80%, transparent 80%);
}
.chatfenster.zu .ct-griffecke { display: none; }