/* Sektor C3 · Terminal, monochrom
 *
 * Referenz: concept/prototyp/terminal.html, Variante B.
 *
 * Grundregel: Die Oberfläche ist Weiß und Grau auf Schwarz. Farbe trägt
 * Bedeutung und steht nur dort, wo sie etwas sagt:
 *
 *   --akzent  Grün      aktiv, positiv, bedienbar (Energie, Auswahl, Knöpfe)
 *   --warn    Bernstein Achtung (Energie verfällt, Gebäude beschädigt)
 *   --krit    Rot       kritisch (Fehler, Angriff, Unterdeckung)
 *
 * Großbuchstaben kommen aus CSS (text-transform), im HTML steht normaler
 * Text. Fließtext bleibt in normaler Schreibung, weil er sonst schwer lesbar
 * wird.
 */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-400.4e0581ae831b.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-700.f3651b6798df.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323-400.9cb03ff10174.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --grund:   #0a0a0a;
  --flaeche: #111111;
  --linie:   #303030;
  --text:    #d4d4d4;
  --dim:     #8a8a8a;
  --hell:    #ffffff;

  --akzent:  #57e08a;
  --warn:    #f2a93b;
  --krit:    #ff5a4a;

  --schein:  rgba(255, 255, 255, .05);
  --scan:    .12;

  --mono:  "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;
  --retro: "VT323", "JetBrains Mono", ui-monospace, Consolas, monospace;

  --breite: 1160px;
}

/* --- Grundlage -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--grund); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--grund);
  color: var(--text);
  font: 14px/1.55 var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Scanlines und Vignette liegen über allem, fangen aber keine Klicks. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1000;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent 2px, rgba(0, 0, 0, var(--scan)) 3px);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 999;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

h1, h2, h3, p { margin: 0; font-size: inherit; font-weight: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--hell); text-decoration: underline dotted; text-underline-offset: 3px; }
a:hover { color: var(--akzent); }

:focus-visible { outline: 1px dashed var(--hell); outline-offset: 2px; }

kbd { font: inherit; font-size: 11px; color: var(--dim); }

.dim   { color: var(--dim); }
.hell  { color: var(--hell); }
.ok    { color: var(--akzent); }
.warn  { color: var(--warn); }
.krit  { color: var(--krit); }

.etikett {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Nur für Screenreader, unsichtbar auf dem Bildschirm. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Hinweis beim Überfahren, im Stil eines Terminalfensters statt des
 * Browser-Tooltips. Das Element braucht data-tipp="Text". */
[data-tipp] { position: relative; }
[data-tipp]::after {
  content: attr(data-tipp);
  position: absolute; top: calc(100% + 6px); left: 50%;
  z-index: 40;
  padding: 3px 8px;
  background: var(--grund);
  border: 1px solid var(--text);
  box-shadow: 0 0 0 3px var(--grund);
  color: var(--hell);
  font-size: 11px; line-height: 1.4; letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -2px);
  transition: opacity .12s, transform .12s;
}
[data-tipp]:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: .15s;
}

.systemzeile { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }

/* --- Schreibmaschine -------------------------------------------------- */

.tippt::after {
  content: "▌";
  color: var(--hell);
  animation: blinken 1s steps(1) infinite;
}
@keyframes blinken { 50% { opacity: 0; } }

/* --- Startsequenz ----------------------------------------------------- */

.boot {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column; align-items: center;
  padding: 14vh 16px 16px;
  background: var(--grund);
  cursor: default;
  transition: opacity .45s;
}
.boot.aus { opacity: 0; pointer-events: none; }
.boot__text { width: min(480px, 100%); min-height: 13em; white-space: pre; overflow: hidden; }
.boot__text p { min-height: 1.55em; }
.boot__text p:first-child { font-family: var(--retro); font-size: 34px; line-height: 1.1; color: var(--hell); margin-bottom: .3em; }
.boot__text p:nth-child(2) { color: var(--dim); margin-bottom: .8em; }
.boot__text p:nth-child(7) { color: var(--akzent); margin-top: .8em; letter-spacing: .12em; }
.boot__hinweis { margin-top: 2.5em; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); transition: color .3s; }
.boot.bereit .boot__hinweis { color: var(--hell); }
.boot.bereit .boot__hinweis::after { content: " ▌"; animation: blinken 1.2s steps(1) infinite; }

/* --- Kopfleiste ------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}
.kopf.ohne-uebergang * { transition: none !important; }

.kopf__leiste,
.kopf__teile {
  max-width: var(--breite);
  margin: 0 auto;
  padding-inline: 16px;
}
.kopf__leiste {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 10px 6px;
}
.kopf__verwaltung { display: flex; align-items: center; gap: 16px; }
.kopf__verwaltung form { margin: 0; }

/* Drei Teile: Energie, Lager, Charakter */
.kopf__teile {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: 12px;
  padding-block: 8px 12px;
}
.kopfteil {
  position: relative;
  display: grid; align-content: start; gap: 4px;
  min-width: 0;
  padding: 14px 12px 10px;
  border: 1px solid var(--linie);
  color: inherit;
  text-decoration: none;
}
.kopfteil > .etikett {
  position: absolute; top: -.7em; left: 8px;
  padding: 0 6px;
  background: var(--grund);
  line-height: 1.3;
}
a.kopfteil:hover, a.kopfteil:focus-visible { border-color: var(--text); outline: none; }
a.kopfteil:hover > .etikett { color: var(--hell); }

.ressourcen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 14px;
  font-size: 12px;
}
.ressource { display: flex; justify-content: space-between; gap: 6px; white-space: nowrap; }
.ressource__kuerzel { color: var(--dim); letter-spacing: .06em; }
.ressource__menge { color: var(--hell); }
.ressource--leer .ressource__menge { color: var(--dim); }

.charakter__name { color: var(--hell); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.charakter__wert { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.charakter__status { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.status { color: var(--warn); }

.marke {
  font-family: var(--retro);
  font-size: 26px; line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hell);
  text-decoration: none;
}
.marke::after { content: "_"; animation: blinken 1.2s steps(1) infinite; }
.marke:hover { color: var(--hell); }

.energie {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) auto auto;
  align-items: center;
  gap: 4px 12px;
  margin-top: 6px;
}
.energie__zahl {
  font-family: var(--retro);
  font-size: 32px; line-height: .9;
  min-width: 2ch; text-align: right;
  color: var(--hell);
  transition: color .4s;
}
.energie__zahl.neu { color: var(--akzent); }
.energie__hinweis {
  font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
}
.energie__hinweis.warn { color: var(--warn); }

.knopf-plus {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--akzent);
  color: var(--akzent);
  font-size: 20px; line-height: 1;
  text-decoration: none;
}
.knopf-plus:hover, .knopf-plus:focus-visible { background: var(--akzent); color: var(--grund); outline: none; }

.knopf-leise {
  background: none; border: 0; padding: 0;
  color: var(--dim);
  font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.knopf-leise:hover { color: var(--hell); }
.knopf-leise--krit:hover { color: var(--krit); }

/* --- Balken ----------------------------------------------------------- */

.balken {
  position: relative;
  height: 14px;
  border: 1px solid var(--linie);
  background: var(--grund);
}
.balken::after {
  /* Segmente wie bei einer Blockzeichen-Anzeige */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--grund) 6px 8px);
}
.balken__fuell, .balken__ueber {
  position: absolute; top: 0; bottom: 0; left: 0;
  transition: width .5s ease-out, left .5s ease-out;
}
.balken__fuell { background: var(--akzent); }
.balken__ueber { background: var(--warn); }
.balken__marke {
  position: absolute; top: -5px; bottom: -5px;
  width: 2px; margin-left: -1px;
  background: var(--hell);
  z-index: 2;
  transition: left .5s ease-out;
}
.balken__marke::before {
  content: attr(data-wert);
  position: absolute; bottom: calc(100% + 1px); left: 50%;
  transform: translateX(-50%);
  font-size: 10px; line-height: 1;
  color: var(--dim);
}

.minibalken { position: relative; display: block; height: 8px; border: 1px solid var(--linie); }
.minibalken::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 4px, var(--grund) 4px 6px); }
.minibalken > i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--akzent); }

/* --- Meldungen -------------------------------------------------------- */

.meldungen {
  max-width: var(--breite);
  margin: 16px auto 0;
  padding-inline: 16px;
  display: grid; gap: 6px;
}
.meldungen:empty { display: none; }
.meldung {
  padding: 8px 12px;
  border-left: 2px solid var(--dim);
  background: var(--schein);
  font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase;
}
.meldung--success { border-color: var(--akzent); }
.meldung--warning { border-color: var(--warn); color: var(--warn); }
.meldung--error   { border-color: var(--krit); color: var(--krit); }

/* Über offenen Fenstern muss eine Meldung sichtbar bleiben. */
body:has(#modal:not(:empty)) .meldungen:not(:empty) {
  position: fixed; left: 0; right: 0; bottom: 16px; z-index: 60;
}

/* --- Basis ------------------------------------------------------------ */

.basis {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 32px 16px 48px;
  display: grid;
  gap: 28px;
}

.panel {
  position: relative;
  min-width: 0;
  padding: 20px 16px 16px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.panel::before {
  content: attr(data-titel);
  position: absolute; top: -.75em; left: 12px;
  padding: 0 8px;
  background: var(--grund);
  font-size: 12px; line-height: 1.5; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hell);
}

.basis__szene { min-height: 240px; }

.log { list-style: none; margin: 0; padding: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.log li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--linie);
}
.log li:last-child { border-bottom: 0; }
.log li.log--wert { grid-template-columns: 7.5em minmax(0, 1fr) auto; }
.log li.storniert .log__text { color: var(--dim); text-decoration: line-through; }
.log__zeit { color: var(--dim); }
/* Hauptprotokoll: Tageszeile, darunter Uhrzeit · wer · was. */
.log--haupt li { grid-template-columns: 3.4em 8ch minmax(0, 1fr); }
.log--haupt li.log__tag {
  display: block;
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--linie);
  color: var(--hell); font-size: 11px; letter-spacing: .16em;
}
.log--haupt li.log__tag:first-child { padding-top: 0; }
.fenster .log--haupt li { grid-template-columns: 3.4em 14ch minmax(0, 1fr); }
.panel__fuss { margin-top: 10px; text-align: right; }
.log__wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hell); }
.log__text { min-width: 0; overflow-wrap: anywhere; }
.log__wert { color: var(--akzent); text-align: right; }
.log li.storniert .log__wert { color: var(--dim); }

@media (min-width: 920px) {
  .basis { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

/* --- Fenster ---------------------------------------------------------- */

.modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .72);
  overflow-y: auto;
}
.modal:empty { display: none; }

.fenster {
  width: min(720px, 100%);
  background: var(--flaeche);
  border: 1px solid var(--text);
  box-shadow: 0 0 0 4px var(--grund), 0 0 0 5px var(--linie), 0 0 60px var(--schein);
}
.modal > .fenster { max-height: calc(100vh - 32px); overflow: auto; }
.fenster--breit { width: min(920px, 100%); }

/* terminal.js setzt .oeffnet, bevor das Fenster eingefügt wird. */
.modal.oeffnet > .fenster { animation: einschalten .2s ease-out; transform-origin: center; }
@keyframes einschalten {
  0%   { transform: scale(.7, .01); filter: brightness(3); }
  55%  { transform: scale(1, .02);  filter: brightness(2); }
  100% { transform: scale(1, 1);    filter: brightness(1); }
}

.fenster__leiste {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 30px;
  padding: 3px 4px 3px 12px;
  background: var(--text);
  color: var(--grund);
}
.fenster__titel {
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fenster__schliessen {
  padding: 2px 8px;
  color: var(--grund);
  font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.fenster__schliessen:hover, .fenster__schliessen:focus-visible { background: var(--grund); color: var(--hell); outline: none; }

.fenster__inhalt { display: grid; gap: 20px; padding: 18px 20px 22px; }
.fenster__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.abschnitt { display: grid; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--linie); }

@media (max-width: 600px) {
  .modal { padding: 0; place-items: stretch; }
  .fenster, .fenster--breit { width: 100%; border: 0; box-shadow: none; }
  .modal > .fenster { max-height: none; min-height: 100%; }
  .fenster__inhalt { padding: 16px; }
}

/* --- Formulare -------------------------------------------------------- */

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

.formular { display: grid; gap: 20px; }
.feld { display: grid; gap: 6px; }
.feld__label {
  font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hell);
}
.feld__hinweis { font-size: 12px; color: var(--dim); }
.feld__hinweis ul { margin: 4px 0 0; padding-left: 1.2em; }

.wahl { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.wahl label { cursor: pointer; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wahl input + span::before { content: "[ ] "; color: var(--dim); }
.wahl input:checked + span { color: var(--hell); }
.wahl input:checked + span::before { content: "[■] "; color: var(--akzent); }
.wahl input:focus-visible + span { outline: 1px dashed var(--hell); outline-offset: 2px; }
.wahl label:hover span { color: var(--hell); }

.eingabe { display: flex; align-items: baseline; gap: 10px; }
.eingabe input {
  flex: 0 1 auto;
  width: 100%; max-width: 28ch;
  padding: 2px 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--linie);
  border-radius: 0;
  color: var(--hell);
  font-size: 18px; line-height: 1.3;
  caret-color: var(--hell);
  outline: none;
}
.eingabe input:focus { border-bottom-color: var(--text); }
.sportform .eingabe input { max-width: 7ch; font-size: 22px; }

.zeile-punkte { display: flex; align-items: baseline; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.zeile-punkte .punkte { flex: 1; min-width: 20px; border-bottom: 1px dotted var(--dim); transform: translateY(-.3em); }
.zeile-punkte > :last-child { color: var(--hell); }
/* Farbige Werte behalten ihre Farbe. */
.zeile-punkte > .ok:last-child { color: var(--akzent); }
.zeile-punkte > .warn:last-child { color: var(--warn); }
.zeile-punkte > .krit:last-child { color: var(--krit); }

.fehler { color: var(--krit); font-size: 13px; }
.fehler ul { margin: 0; padding-left: 1.2em; }

.knopf {
  justify-self: start;
  display: inline-block;
  padding: 8px 18px;
  background: transparent;
  border: 1px solid var(--akzent);
  color: var(--akzent);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover, .knopf:focus-visible { background: var(--akzent); color: var(--grund); outline: none; }
.knopf:hover .dim, .knopf:focus-visible .dim { color: var(--grund); }
.htmx-request .knopf, .knopf.htmx-request { opacity: .5; cursor: wait; }

/* --- Quittung --------------------------------------------------------- */

.quittung {
  padding: 10px 14px;
  border-left: 2px solid var(--akzent);
  background: var(--schein);
  font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase;
  cursor: default;
}
.quittung p { min-height: 1.55em; white-space: pre-wrap; }
.quittung p:first-of-type { color: var(--hell); letter-spacing: .12em; }

.verarbeitung { display: grid; gap: 6px; margin-bottom: 6px; font-size: 12px; letter-spacing: .14em; color: var(--dim); }
.verarbeitung .minibalken > i { transition: width var(--dauer, .5s) linear; }

/* --- Warnung ---------------------------------------------------------- */

.klein { font-size: 12px; }

.warnung {
  padding: 8px 12px;
  border-left: 2px solid var(--warn);
  background: rgba(242, 169, 59, .07);
  color: var(--warn);
  font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase;
}
.warnung::before { content: "▲ "; }

/* Dasselbe in Grün: ein Hinweis, der nichts Schlimmes ankündigt. Nicht in
   Grossbuchstaben — hier stehen ganze Sätze mit Zahlen darin. */
.hinweis {
  padding: 8px 12px;
  border-left: 2px solid var(--akzent);
  background: rgba(87, 224, 138, .06);
  color: var(--text);
  font-size: 12px; letter-spacing: .04em; line-height: 1.5;
}
.hinweis::before { content: "› "; color: var(--akzent); }

/* --- Gebäudekacheln --------------------------------------------------- */

.gebaeude { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.kachel {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px 12px;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.kachel:hover, .kachel:focus-visible {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text) inset, 0 0 18px var(--schein);
  color: inherit; outline: none;
}
.kachel__kopf { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.kachel__name { color: var(--hell); }
.kachel__zeile { display: block; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.kachel .minibalken { margin: 3px 0 2px; }
.kachel__projekt {
  display: grid; gap: 0;
  margin-top: 6px; padding: 5px 8px 6px;
  border-left: 2px solid var(--akzent);
  background: var(--schein);
}
.kachel__projekt-text {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hell);
}
.kachel__projekt-text::before { content: "▸"; color: var(--akzent); margin-right: -2px; }
.kachel__projekt-text > span:first-child { margin-right: auto; }
/* Prozentzahl nie umbrechen: "12" und "%" gehören zusammen. */
.kachel__projekt-text > span:last-child { white-space: nowrap; }
.kachel__vorrat { display: grid; margin-top: 4px; }
.kachel__vorrat-text { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.kachel--beschaedigt { border-color: rgba(242, 169, 59, .45); }
.kachel--beschaedigt .ascii { color: var(--warn); }

.ascii {
  display: block;
  white-space: pre;
  font-size: 12px; line-height: 1.15; letter-spacing: 0;
  margin: 10px 0 8px;
  min-height: 9.2em;
  overflow: hidden;
}
.ascii .offen { color: var(--dim); opacity: .75; }

.fenster__streifen {
  display: flex; justify-content: center;
  padding: 6px 16px;
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
  overflow-x: auto;
}
.fenster__streifen .ascii { min-height: 0; margin: 8px 0; }
.fenster__streifen--eingebettet { border: 1px dashed var(--linie); margin: 8px 0; }

/* --- Upgrades und Bauprojekte ----------------------------------------- */

.upgrades { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.upgrade { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px dashed var(--linie); }
.upgrade:last-child { border-bottom: 0; padding-bottom: 0; }
.upgrade__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; font-size: 13px; }
.upgrade__zustand { margin-left: auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.upgrade--fertig .upgrade__kopf .hell { color: var(--text); }

.projekt { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--linie); background: var(--grund); }

/* Beitragen links, Abbrechen rechts in einer Zeile. */
.projekt__aktionen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.abbrechen { margin: 0; }
.projekt form { margin: 0; }

.fortschritt { display: grid; grid-template-columns: minmax(80px, 9em) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 12px; }
.fortschritt > .etikett { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fortschritt > :last-child { color: var(--hell); min-width: 7ch; text-align: right; }
.minibalken--gross { height: 12px; }
.minibalken > i { transition: width .5s ease-out; }

.beitrag { display: grid; gap: 8px; }

/* Laufendes Projekt mit Namen: Kopfzeile im Kasten, klar getrennt von fertigen Upgrades darüber. */
.projekt__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  margin: -2px 0 2px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--linie);
  font-size: 12px;
}
.projekt__titel { color: var(--hell); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.projekt__titel::before { content: "▸ "; color: var(--akzent); }
.projekt__status { margin-left: auto; color: var(--hell); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.upgrades + .projekt, .liste + .projekt { margin-top: 6px; }

/* --- Zahleneingaben: Schnellwahl und Segmente -------------------------- */

.zahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.schnellwahl { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
p.schnellwahl { display: flex; }
.schnell {
  padding: 0; background: none; border: 0;
  color: var(--dim); font: inherit; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
}
.schnell::before { content: "["; }
.schnell::after { content: "]"; }
.schnell:hover, .schnell:focus-visible { color: var(--akzent); outline: none; }

.segmente { display: inline-flex; align-items: center; gap: 3px; padding: 2px 0; outline: none; }
.segmente:focus-visible { outline: 1px dashed var(--hell); outline-offset: 3px; }
.segment {
  width: 18px; height: 20px; padding: 0;
  background: transparent; border: 1px solid var(--linie);
  cursor: pointer;
}
.segment:hover { border-color: var(--text); }
.segment--an { background: var(--akzent); border-color: var(--akzent); }
.segment--gesperrt, .segment--gesperrt:hover { border-style: dashed; border-color: var(--linie); opacity: .45; cursor: not-allowed; }
.segmente__wert { min-width: 2ch; margin-left: 8px; color: var(--hell); font-family: var(--retro); font-size: 26px; line-height: 1; }
/* Brunnen: ein Licht je Förderung, die heute noch frei ist. */
.lichter { display: flex; align-items: center; gap: 6px; }
.lichter > .etikett { margin-right: 6px; }
.licht { width: 14px; height: 14px; border: 1px solid var(--linie); background: transparent; }
.foerdern { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.licht--an { border-color: var(--akzent); background: var(--akzent); box-shadow: 0 0 8px rgba(87, 224, 138, .55); }
.beitrag__felder { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.beitrag__feld { display: grid; gap: 2px; font-size: 12px; }
.beitrag__feld .eingabe input,
.eingabe--klein input { max-width: 6ch; font-size: 16px; }
.eingabe--klein { display: inline-flex; gap: 6px; }

.knopf--klein { padding: 5px 12px; font-size: 12px; }

.knopf--krit { border-color: var(--krit); color: var(--krit); }
.knopf--krit:hover, .knopf--krit:focus-visible { background: var(--krit); color: var(--grund); }

/* Sichtbar, aber nicht bedienbar, z.B. bei erreichtem Baulimit. */
.knopf--aus, .knopf--aus:hover {
  border-color: var(--linie); color: var(--dim); background: transparent; cursor: not-allowed;
}

.verweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.verweis {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 10px;
  border-left: 2px solid var(--akzent);
  background: var(--schein);
  color: var(--hell);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
}
.verweis::after { content: "→"; color: var(--akzent); }
.verweis > span:first-child::before { content: "▸ "; color: var(--akzent); }
.verweis > span:nth-child(2) { margin-left: auto; }
.verweis:hover { color: var(--hell); background: rgba(87, 224, 138, .08); }

/* --- Rückfrage -------------------------------------------------------- */

.rueckfrage {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .6);
}
.fenster--klein { width: min(440px, 100%); animation: einschalten .2s ease-out; }
.rueckfrage .fenster__leiste { background: var(--krit); }
.rueckfrage--ok .fenster__leiste { background: var(--akzent); }
.rueckfrage__knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 24px; }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste__zeile { display: grid; grid-template-columns: minmax(0, 1fr) 9em; align-items: center; gap: 12px; min-height: 30px; }
.liste__zeile--leer .zeile-punkte > :last-child { color: var(--dim); }
.liste__aktion { text-align: right; }
.liste__aktion form { margin: 0; }

.umlagern { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 12px; margin: 0; }
.abschnitt--erster { border-top: 0; padding-top: 0; }

/* --- Kennzahlen und Tabellen ------------------------------------------ */

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.kennzahl { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--linie); background: var(--grund); }
.kennzahl__wert { font-family: var(--retro); font-size: 34px; line-height: 1; color: var(--hell); }

.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabelle th {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--linie);
  font-weight: 400; letter-spacing: .12em;
  text-align: left; text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.tabelle td { padding: 6px 10px 6px 0; border-bottom: 1px dashed var(--linie); vertical-align: baseline; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle .rechts { text-align: right; }
.tabelle form { margin: 0; }
.tabelle tr.storniert td { color: var(--dim); }
.tabelle tr.storniert td:nth-child(3) { text-decoration: line-through; }

/* --- Sektorraster ---------------------------------------------------- */

.lage { display: grid; gap: 4px; }
.lage__stand { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.lage__meldung { min-height: 1.55em; }


.raster { position: relative; display: grid; gap: 4px; }
.raster__zeile { display: grid; grid-template-columns: 1.4em repeat(5, minmax(0, 1fr)); gap: 4px; }
.raster__radar { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.achse { display: grid; place-items: center; font-size: 11px; letter-spacing: .1em; color: var(--dim); }

.sektor {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: 84px;
  padding: 4px 6px;
  border: 1px solid var(--linie);
  color: var(--text);
  font-size: 11px; line-height: 1.2; letter-spacing: .04em;
  text-decoration: none;
  overflow: hidden;
  animation: aufbau .35s steps(3) backwards;
}
@keyframes aufbau { 0% { opacity: 0; } 60% { opacity: .5; } 100% { opacity: 1; } }
.raster__zeile:nth-child(3) .sektor { animation-delay: .04s; }
.raster__zeile:nth-child(4) .sektor { animation-delay: .08s; }
.raster__zeile:nth-child(5) .sektor { animation-delay: .12s; }
.raster__zeile:nth-child(6) .sektor { animation-delay: .16s; }
.raster__zeile:nth-child(7) .sektor { animation-delay: .20s; }

.sektor__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 2px; }
.sektor__k { color: var(--dim); }
.sektor__spanne { color: var(--hell); white-space: nowrap; }
.sektor__fuss { grid-row: 3; display: grid; gap: 1px; min-width: 0; }
.sektor__ort { color: var(--hell); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sektor__ort-kurz { display: none; }
.sektor__tag { color: var(--warn); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.sektor__tag--ok { color: var(--akzent); }

/* Basis: hell hinterlegt, nicht anklickbar */
.sektor--basis { background: var(--text); border-color: var(--text); }
.sektor--basis .sektor__k, .sektor--basis .sektor__ort { color: var(--grund); }
/* Unerkundet und nicht erreichbar: grau, keine Interaktion */
.sektor--unbekannt .sektor__spanne { color: var(--linie); }
.sektor--unbekannt .sektor__ort { color: var(--dim); }
/* Erreichbar: heller gestrichelter Rahmen */
.sektor--erreichbar { border-style: dashed; border-color: var(--dim); }
.sektor--blockiert { border-style: dashed; border-color: var(--linie); }
.sektor--blockiert .sektor__k, .sektor--blockiert .sektor__spanne { color: var(--dim); }
/* Betretene Sektoren eine Spur heller hinterlegt, damit die erfasste Fläche auffällt.
   Durchscheinend, damit Radar und Punktwolke darunter sichtbar bleiben. */
.sektor--erkundet { border-color: #555; background: rgba(255, 255, 255, .06); }
.sektor--frei .sektor__spanne { color: var(--akzent); }
a.sektor:hover, a.sektor:focus-visible { border-color: var(--hell); color: var(--text); outline: none; }

/* Lagebewertung, nur mit Radarstation */
.stufe-tragbar .sektor__spanne { color: var(--akzent); }
.stufe-riskant .sektor__spanne { color: var(--warn); }
.stufe-ueberlegen .sektor__spanne { color: var(--krit); }
.stufe-ueberlegen { border-color: rgba(255, 90, 74, .45); }

/* Auswahl: Zielklammern, damit Grün für "tragbar" frei bleibt */
/* Die Klammern sitzen außen an den Ecken, im Abstand zwischen den Sektoren. */
.sektor--gewaehlt { border-color: var(--hell); overflow: visible; z-index: 2; }
.sektor--gewaehlt::before, .sektor--gewaehlt::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border: 2px solid var(--hell);
  animation: blinken 1s steps(1) infinite;
}
.sektor--gewaehlt::before { top: -4px; left: -4px; border-right: 0; border-bottom: 0; }
.sektor--gewaehlt::after { bottom: -4px; right: -4px; border-left: 0; border-top: 0; }

.raster__legende { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* --- Expedition ------------------------------------------------------- */

.aktionen { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.aktion { display: grid; gap: 4px; justify-items: start; margin: 0; }

.log--bericht li { grid-template-columns: 7.5em minmax(0, 1fr); }
.log--bericht li + li .log__zeit:empty { visibility: hidden; }

.wahl--spalte { flex-direction: column; gap: 6px; }
.wahl label.wahl--aus { cursor: default; color: var(--dim); }
.wahl label.wahl--aus input + span::before { content: "[–] "; }

.knopf--gross { padding: 12px 24px; font-size: 15px; }

/* Lagefelder: Kästen mit Etikett im Rahmen, wie die Kopfleiste. */
.lagefelder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; margin-top: 6px; }
.lagefeld {
  position: relative;
  display: grid; align-content: start; gap: 2px;
  min-width: 0;
  padding: 12px 10px 8px;
  border: 1px solid var(--linie);
  background: transparent;
  color: inherit; font: inherit; text-align: left;
}
.lagefeld > .etikett {
  position: absolute; top: -.7em; left: 6px;
  padding: 0 5px;
  background: var(--flaeche);
  line-height: 1.3;
}
.lagefeld__wert { font-family: var(--retro); font-size: 28px; line-height: 1; color: var(--hell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lagefeld__einheit { font-size: 18px; color: var(--dim); }
.lagefeld__zeile { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lagefeld--knopf { cursor: pointer; }
.lagefeld--knopf:hover, .lagefeld--knopf:focus-visible { border-color: var(--text); outline: none; }
.lagefeld--knopf:hover > .etikett { color: var(--hell); }
/* Lasche am unteren Rand: ▾ zum Aufklappen, ▴ zum Zuklappen. */
.lagefeld__lasche {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 50%);
  padding: 2px 12px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--akzent);
  font-size: 13px; line-height: 1;
}
.lagefeld__lasche::before { content: "▼"; }
.lagefeld--knopf { padding-bottom: 14px; }
.lagefeld--knopf:hover .lagefeld__lasche, .lagefeld--knopf[aria-expanded="true"] .lagefeld__lasche { border-color: var(--text); }
.lagefeld--knopf[aria-expanded="true"] { border-color: var(--text); }
.lagefeld--knopf[aria-expanded="true"] .lagefeld__lasche::before { content: "▲"; }
.lagefeld--knopf:hover .lagefeld__lasche { color: var(--hell); }
.lagefeld--energie { padding-right: 44px; }
[data-energie-zahl] { transition: color .4s; }
[data-energie-zahl].neu { color: var(--akzent); }
.lagefeld__plus { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; font-size: 18px; }

.rucksack-inhalt { margin-top: -8px; padding: 10px 12px; border: 1px dashed var(--linie); }

/* Kategorie als kleiner Kasten neben dem Namen. */
.tag {
  display: inline-block;
  padding: 0 4px;
  border: 1px solid var(--linie);
  color: var(--dim);
  font-size: 9px; line-height: 1.5; letter-spacing: .1em;
  font-family: var(--mono);
  text-transform: uppercase;
  vertical-align: 1px;
}
.tag--warn { border-color: rgba(242, 169, 59, .6); color: var(--warn); }
.tag--ok { border-color: rgba(87, 224, 138, .5); color: var(--akzent); }
.lagefeld__wert .tag { vertical-align: 5px; }

/* Stimmungstext: Fließtext, nicht in Großbuchstaben. */
.stimmung { text-transform: none; letter-spacing: 0; font-size: 13px; line-height: 1.5; color: var(--text); margin-bottom: 4px; }
.ausgang .stimmung { color: var(--hell); margin: 2px 0 4px; }

/* Einsatzprotokoll: Zeit · was getan wurde · Angaben */
.log--einsatz li { grid-template-columns: 7.5em 11em minmax(0, 1fr); padding: 2px 0; border-bottom: 0; }
.log--einsatz li.log--neu:not(:first-child) { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--linie); }
.log--einsatz .log__aktion { color: var(--hell); }

/* Entscheidungen untereinander, Kosten daneben. */
/* Ein gemeinsames Raster, damit alle Knöpfe gleich breit sind. */
.entscheidungen { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 10px 16px; }
.entscheidung { display: contents; }
.entscheidung .knopf { justify-self: stretch; text-align: left; white-space: nowrap; }
.entscheidung__kosten { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.entscheidung__zahl { font-family: var(--retro); font-size: 28px; line-height: 1; letter-spacing: 0; color: var(--hell); vertical-align: -3px; margin-right: 2px; }
.entscheidung--aus .entscheidung__zahl { color: var(--dim); }
.entscheidung__grund { display: block; letter-spacing: .04em; }

/* Letzte Meldung einer Expedition: was die letzte Aktion ergeben hat.
   Eigener Name, damit sie den Meldungsstreifen (.meldung) nicht umfärbt. */
.einsatzmeldung {
  display: grid; gap: 2px;
  padding: 10px 14px;
  border-left: 2px solid var(--hell);
  background: var(--schein);
  font-size: 13px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--hell);
  cursor: default;
}
.einsatzmeldung__kopf { font-size: 11px; letter-spacing: .12em; color: var(--dim); }
.einsatzmeldung__zeile { min-height: 1.55em; white-space: pre-wrap; }
.einsatzmeldung[data-meldung] { animation: aufleuchten .6s ease-out; }
@keyframes aufleuchten { 0% { background: rgba(255, 255, 255, .22); } 100% { background: var(--schein); } }

/* Kampfausgang: unübersehbar. */
.ausgang {
  display: grid; gap: 4px; justify-items: center;
  padding: 14px 16px 16px;
  border: 1px solid; text-align: center;
  text-transform: uppercase; letter-spacing: .08em;
}
.ausgang--sieg { border-color: var(--akzent); background: rgba(87, 224, 138, .08); color: var(--akzent); }
.ausgang--abbruch { border-color: var(--warn); background: rgba(242, 169, 59, .08); color: var(--warn); }
.rueckkehr .ausgang__titel { font-size: 60px; }
.zerlegt { display: grid; gap: 6px; margin-top: 4px; padding: 12px 14px; border: 1px solid var(--akzent); background: rgba(87, 224, 138, .05); }
.zerlegt__summe { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); }
.ausgang--niederlage { border-color: var(--krit); background: rgba(255, 90, 74, .09); color: var(--krit); }
.ausgang__titel { font-family: var(--retro); font-size: 52px; line-height: .9; letter-spacing: .12em; }
.ausgang__zahlen { font-size: 13px; color: var(--hell); }
.ausgang__zeilen { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 12px; color: var(--text); }
.ausgang--neu { animation: ausgang .9s steps(6) both; }
@keyframes ausgang {
  0% { opacity: 0; } 20% { opacity: 1; filter: brightness(2.2); } 40% { opacity: .35; }
  60% { opacity: 1; filter: brightness(1.6); } 100% { opacity: 1; filter: none; }
}

/* Kampf: eigene Kampfkraft gegen die geschätzte Gruppe. */
.duell { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; margin-top: 6px; }
.duell__seite {
  position: relative;
  display: grid; align-content: start; justify-items: center; gap: 2px;
  padding: 14px 10px 10px;
  border: 1px solid;
  text-align: center;
}
.duell__seite > .etikett { position: absolute; top: -.7em; left: 6px; padding: 0 5px; background: var(--flaeche); line-height: 1.3; }
.duell__seite--eigen { border-color: var(--akzent); background: rgba(87, 224, 138, .06); }
.duell__seite--eigen > .etikett, .duell__seite--eigen .duell__wert { color: var(--akzent); }
.duell__seite--gegner { border-color: var(--krit); background: rgba(255, 90, 74, .07); }
.duell__seite--gegner > .etikett, .duell__seite--gegner .duell__wert { color: var(--krit); }
.duell__wert { font-family: var(--retro); font-size: 48px; line-height: .95; white-space: nowrap; }
.duell__zeile { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.duell__gegen { align-self: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.vergleich { display: grid; gap: 3px; }
.vergleich__spur { position: relative; height: 12px; border: 1px solid var(--linie); background: var(--grund); }
.vergleich__spur::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 6px, var(--grund) 6px 8px); }
.vergleich__band, .vergleich__verletzung, .vergleich__kraft { position: absolute; top: 0; bottom: 0; }
.vergleich__band { background: var(--krit); }
.vergleich__verletzung { background: var(--warn); }
.kampf__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.einschaetzung { margin-top: 6px; text-align: center; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.vergleich__kraft { left: 0; background: var(--akzent); transition: width .25s ease-out; }
.vergleich__achse { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

/* Funde und Rucksack: zwei Spalten, Pfeile schieben dazwischen. */
.packen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.packen__spalte { display: grid; align-content: start; min-width: 0; padding: 0 10px 4px; border: 1px solid var(--linie); }
.packen__spalte--rucksack { border-color: var(--text); }
.packen__kopf { padding: 8px 0 6px; border-bottom: 1px solid var(--linie); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hell); }
.packen__zeile {
  display: grid; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px dashed var(--linie);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.packen__spalte--funde .packen__zeile { grid-template-columns: minmax(0, 1fr) auto auto; }
.packen__spalte--rucksack .packen__zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
.packen__zeile:last-of-type { border-bottom: 0; }
/* Ein Gegenstand zweizeilig, wie im Privaten Lager: Name, darunter Tag und Gewicht. */
.gegenstand { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.gegenstand__info { font-size: 10px; letter-spacing: .06em; color: var(--dim); }
.gegenstand__info .tag { margin-right: 4px; }
.liste__zeile--leer .gegenstand { color: var(--dim); }
/* Zweizeilige Posten brauchen eine klare Trennung, sonst hängt der Tag am Nachbarn. */
.liste--gegenstaende { gap: 0; }
.liste--gegenstaende > li { padding: 9px 0; border-bottom: 1px dashed var(--linie); }
.liste--gegenstaende > li:first-child { padding-top: 2px; }
.liste--gegenstaende > li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Zweizeilig: oben der Name, darunter Kategorie und Gewicht je Stück. */
.packen__name { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; color: var(--hell); }
.packen__info { font-size: 10px; letter-spacing: .06em; color: var(--dim); }
.packen__info .tag { margin-right: 4px; }
.packen__zahl { min-width: 2ch; color: var(--hell); font-size: 16px; text-align: right; }
.packen__menge { display: flex; align-items: baseline; gap: 6px; }
.packen__menge .eingabe--klein input { width: 3.5ch; max-width: 3.5ch; text-align: right; }
/* Feste Breite, damit der Zähler beim Erscheinen nichts verschiebt. */
.packen__delta { min-width: 3ch; font-size: 12px; letter-spacing: 0; }
/* Leer: bleibt stehen, damit nichts springt, tritt aber zurück. */
.packen__zeile--leer .packen__name, .packen__zeile--leer .packen__zahl, .packen__zeile--leer input { color: var(--dim); opacity: .55; }
.packen__pfeile { gap: 2px; }
.pfeil--rein::before { content: ">"; }
.pfeil--rein-alle::before { content: "»"; }
.pfeil--raus::before { content: "<"; }
.pfeil--raus-alle::before { content: "«"; }
.packen__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pfeil {
  min-width: 26px; height: 26px; padding: 0;
  background: transparent; border: 1px solid var(--linie);
  color: var(--akzent); font: inherit; font-size: 14px; line-height: 1;
  cursor: pointer;
}
.pfeil:hover, .pfeil:focus-visible { border-color: var(--akzent); background: var(--akzent); color: var(--grund); outline: none; }
.pfeil:disabled { color: var(--linie); border-color: var(--linie); background: transparent; cursor: default; }
.packlast { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.packlast--ueber { color: var(--krit); }
.packlast--ueber .minibalken > i { background: var(--krit); }
.knopf[disabled], .knopf[disabled]:hover { border-color: var(--linie); color: var(--dim); background: transparent; cursor: not-allowed; }

.klappe > summary { cursor: pointer; list-style: none; }
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary::before { content: "▸ "; color: var(--akzent); }
.klappe[open] > summary::before { content: "▾ "; }
.klappe[open] > summary { margin-bottom: 8px; }

.kopf__hinweis { max-width: var(--breite); margin: 0 auto; padding: 0 16px 12px; }

.auswahl {
  max-width: 22ch;
  padding: 2px 4px;
  background: var(--grund);
  border: 0; border-bottom: 1px solid var(--linie);
  color: var(--hell);
  font-size: 12px;
}
.auswahl:focus { border-bottom-color: var(--text); outline: none; }

.liste__zeile--breit { grid-template-columns: minmax(0, 1fr) auto; }
.zerlegen { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.liste__aktion { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }

/* --- Zugang ----------------------------------------------------------- */

.zugang {
  width: min(460px, 100%);
  margin: 0 auto;
  padding: 12vh 16px 48px;
  display: grid;
  gap: 12px;
}
.zugang__marke { font-family: var(--retro); font-size: 44px; line-height: 1; color: var(--hell); text-transform: uppercase; }
.zugang__marke::after { content: "_"; animation: blinken 1.2s steps(1) infinite; }
.zugang__unterzeile { margin-bottom: 20px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.zugang__fuss { margin-top: 16px; font-size: 12px; color: var(--dim); text-align: center; }

/* --- Schmale Bildschirme ---------------------------------------------- */

@media (max-width: 720px) {
  /* Die Kopfleiste ist mobil zu hoch, um beim Scrollen stehen zu bleiben. */
  .kopf { position: static; }
  .kopf__teile { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 10px; }
  .kopfteil--energie { grid-column: 1 / -1; }
  .log li, .log li.log--wert { grid-template-columns: 6.5em minmax(0, 1fr); }
  .log li.log--wert .log__wert { grid-column: 2; text-align: left; }
  .log--haupt li { grid-template-columns: 3.4em 10ch minmax(0, 1fr); }
  .log--einsatz li { grid-template-columns: 6.5em minmax(0, 1fr); }
  .log--einsatz .log__aktion, .log--einsatz .log__text { grid-column: 2; }
  .log--einsatz .log__aktion:empty { display: none; }
  .lagefelder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 440px) {
  .kopf__teile { grid-template-columns: minmax(0, 1fr); }
  /* Lager als eine Zeile, die zum Rand hin ausblendet; ein Tipp öffnet das Private Lager. */
  .ressourcen {
    display: flex; flex-wrap: nowrap; gap: 14px; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    mask-image: linear-gradient(90deg, #000 80%, transparent);
  }
  .ressource { flex: none; }
  .segment { width: 15px; height: 22px; }
  .raster__zeile { grid-template-columns: 1.2em repeat(5, minmax(0, 1fr)); gap: 3px; }
  .sektor { min-height: 66px; padding: 3px 4px; font-size: 10px; }
  .sektor__ort-lang { display: none; }
  .sektor__ort-kurz { display: inline; }
  .liste__zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .fortschritt { grid-template-columns: minmax(0, 1fr) auto; }
  .fortschritt > .minibalken { grid-column: 1 / -1; grid-row: 2; }
  .lagefelder { gap: 14px 6px; }
  .lagefeld { padding: 12px 8px 6px; }
  .lagefeld--knopf { padding-bottom: 14px; }
  .lagefeld--energie { padding-right: 44px; }
  .entscheidungen { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .entscheidung .knopf { padding-inline: 12px; white-space: normal; }
  .entscheidung__kosten { text-align: right; }
  .lagefeld__wert { font-size: 24px; }
  .lagefeld__einheit { font-size: 14px; }
  .lagefeld__zeile { font-size: 10px; letter-spacing: .02em; }
  .duell { gap: 6px; }
  .duell__wert { font-size: 38px; }
  .ausgang__titel { font-size: 42px; }
  /* Untereinander: Funde oben, Rucksack unten, Pfeile zeigen nach unten und oben. */
  .packen { grid-template-columns: minmax(0, 1fr); }
  .pfeil { min-width: 32px; height: 30px; font-size: 16px; letter-spacing: -.15em; }
  .pfeil--rein::before { content: "↓"; }
  .pfeil--rein-alle::before { content: "↓↓"; }
  .pfeil--raus::before { content: "↑"; }
  .pfeil--raus-alle::before { content: "↑↑"; }
}

/* --- Lage: Lagebericht und nächster Angriff --------------------------- */

.basislage { display: grid; gap: 18px; }
.basislage__kopf { margin-bottom: .7em; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.basislage__text { display: grid; gap: .45em; max-width: 70ch; min-height: 4.8em; }
.basislage__text p { min-height: 1.55em; }
.basislage__fuss { margin-top: 14px; }
.basislage__angriff { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px dashed var(--linie); }
.basislage__termin { font-family: var(--retro); font-size: 30px; line-height: 1; color: var(--hell); letter-spacing: .04em; }
.basislage__rest { margin-bottom: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.basislage__anteile { margin-top: -4px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.basislage__einschaetzung { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.basislage__einschaetzung.krit::before { content: "▲ "; }
.balken__band {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, var(--krit) 0 2px, transparent 2px 5px);
}
.skala { display: flex; justify-content: space-between; margin-top: 2px; font-size: 10px; color: var(--dim); }

@media (min-width: 720px) {
  .basislage { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  .basislage__angriff { padding: 0 0 0 26px; border-top: 0; border-left: 1px dashed var(--linie); }
}
@media (min-width: 920px) {
  .basislage { grid-column: 1 / -1; }
}

/* --- Angriffsbericht ---------------------------------------------------- */

.angriffsbericht--niederlage { border-color: var(--krit); }
.angriffsbericht--niederlage > .fenster__leiste { background: var(--krit); }

.nacht { display: grid; gap: 8px; }
.nacht__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.nacht__liste li { display: grid; grid-template-columns: 5ch minmax(0, 1fr); gap: 14px; }
.nacht__zeit { color: var(--dim); }
.nacht__text { min-height: 1.55em; }
.nacht__liste li:last-child .nacht__text { color: var(--hell); }

.bericht__ausgang { padding: 18px 16px 20px; }
.bericht__ausgang .ausgang__titel { font-size: 72px; }

.gegenueber { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px 18px; }
.gegenueber__seite { display: grid; gap: 2px; }
.gegenueber__seite--verteidigung { justify-items: end; text-align: right; }
.gegenueber__zahl { font-family: var(--retro); font-size: 64px; line-height: .9; }
.gegenueber__seite--welle .gegenueber__zahl { color: var(--krit); }
.gegenueber__seite--verteidigung .gegenueber__zahl { color: var(--akzent); }
.gegenueber__gegen { padding-bottom: 8px; font-family: var(--retro); font-size: 36px; line-height: 1; color: var(--dim); }
.gegenueber__balken { grid-column: 1 / -1; display: grid; gap: 6px; }
.gegenueber__balken .balken__fuell { transition: width .9s ease-out; }
.balken--welle .balken__fuell { background: var(--krit); }
.gegenueber__anteile { grid-column: 1 / -1; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

.bilanz { display: grid; gap: 10px; padding: 14px 16px 16px; border: 1px solid var(--akzent); background: var(--grund); }
.bilanz--verlust { border-color: var(--warn); }
.bilanz > p:not(.feld__label) { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.tabelle tr.tabelle__eigene td { color: var(--hell); background: var(--schein); }
.tabelle .tabelle__abstand { padding-left: 24px; }

/* Abspielen (terminal.js): Teile nehmen ihren Platz schon ein, das Fenster springt nicht. */
.angriffsbericht [data-bericht-teil].verdeckt { visibility: hidden; }
.angriffsbericht [data-bericht-teil].erscheint { animation: erscheinen .4s steps(4) both; }
@keyframes erscheinen { 0% { opacity: 0; filter: brightness(2); } 100% { opacity: 1; filter: none; } }
.angriffsbericht--niederlage.alarm { animation: alarm .9s steps(2) 2; }
@keyframes alarm { 50% { box-shadow: 0 0 0 4px var(--grund), 0 0 0 5px var(--krit), 0 0 80px rgba(255, 90, 74, .35); } }

@media (max-width: 440px) {
  .bericht__ausgang .ausgang__titel, .rueckkehr .ausgang__titel { font-size: 46px; }
  .gegenueber__zahl { font-size: 44px; }
  .gegenueber__gegen { font-size: 26px; }
  .nacht__liste { font-size: 12px; }
  .nacht__liste li { gap: 10px; }
}


/* --- Charakterfenster: Reiter ----------------------------------------- */

.reiter { display: flex; flex-wrap: wrap; gap: 2px; margin: 18px 0 0; border-bottom: 1px solid var(--linie); }
.reiter__blatt {
  padding: 8px 16px; margin-bottom: -1px;
  border: 1px solid var(--linie); border-bottom-color: transparent;
  background: var(--grund); color: var(--dim); text-decoration: none;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.reiter__blatt:hover { color: var(--text); }
.reiter__blatt--aktiv { background: var(--flaeche); border-bottom-color: var(--flaeche); color: var(--hell); }
.reiter__punkt {
  display: inline-block; min-width: 15px; padding: 0 4px; margin-left: 5px;
  background: var(--akzent); color: var(--grund);
  font-size: 10px; text-align: center; vertical-align: 1px;
}

/* --- Ausrüstung am Körper --------------------------------------------- */

/* Drei Spalten: Waffen links und rechts, der Körper in der Mitte. Die
   gestrichelte Silhouette liegt hinter den Kacheln und erklärt das Raster,
   ohne selbst etwas zu bedeuten. */
.koerper {
  position: relative;
  display: grid; gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    ".      kopf        ruecken"
    "waffe1 oberkoerper waffe2"
    ".      beine       ."
    ".      schuhe      .";
  margin: 10px 0 20px;
}
.koerper__rumpf {
  position: absolute; left: calc(33.333% + 3px); right: calc(33.333% + 3px); top: -6px; bottom: -6px;
  border: 1px dashed var(--linie); border-radius: 46% 46% 14% 14% / 9% 9% 5% 5%;
  pointer-events: none;
}
.slot--kopf { grid-area: kopf; }
.slot--ruecken { grid-area: ruecken; }
.slot--waffe1 { grid-area: waffe1; }
.slot--oberkoerper { grid-area: oberkoerper; }
.slot--waffe2 { grid-area: waffe2; }
.slot--beine { grid-area: beine; }
.slot--schuhe { grid-area: schuhe; }

.spezialslots { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 4px; }

.slot {
  position: relative; z-index: 1;
  display: grid; gap: 2px; align-content: start;
  min-height: 60px; padding: 9px 10px;
  border: 1px solid var(--linie); background: var(--grund);
  color: var(--text); text-decoration: none;
}
.slot:hover, .slot:focus-visible { border-color: #5a5a5a; }
.slot--belegt { border-color: #4a4a4a; }
.slot--offen { border-color: var(--akzent); }
.slot__name { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.slot__inhalt { font-size: 13px; color: var(--hell); }
.slot__wert { font-size: 11px; color: var(--akzent); }
.auswahl-slot { border-left: 2px solid var(--akzent); padding-left: 12px; }

/* --- Berufswahl --------------------------------------------------------- */

/* Vier Karten im Quadrat, mobil untereinander. Jede Karte ist ein Formular:
   ein Klick, ein Beruf. */
.berufe { display: grid; gap: 14px; margin: 14px 0 4px; }
@media (min-width: 640px) { .berufe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.beruf {
  display: grid; align-content: start; gap: 8px;
  padding: 14px 16px 16px;
  border: 1px solid var(--linie); background: var(--grund);
}
.beruf:hover, .beruf:focus-within { border-color: #5a5a5a; }
.beruf__name { margin: 0; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--hell); }
.beruf__text { margin: 0; font-size: 12px; line-height: 1.5; color: var(--dim); }
.beruf__bonus { margin: 0; font-size: 12px; color: var(--akzent); }
.beruf__liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; }
.beruf__liste li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; font-size: 13px; }
.beruf__knopf { margin-top: 6px; justify-self: start; }

/* --- Fertigkeitsbaum --------------------------------------------------- */

/* Ein Kreis aus vier Zweigen. Die Positionen rechnet `character.anzeige` aus
   Zweig, Ring und Position — hier steht nur, wie es aussieht. Der Kreis steht
   um ein Achtel gedreht: So laufen die Grenzen zwischen den Zweigen senkrecht
   und waagerecht, und jeder Zweig hat eine freie Ecke für seinen Namen.
   Unterhalb von 860px wird es zu eng für Kacheln auf einer Kreisbahn, dort
   tritt die Liste an seine Stelle. */
.baum { display: none; }
.baumliste { display: block; }

@media (min-width: 860px) {
  .baum { position: relative; display: block; width: 700px; height: 700px; margin: 18px auto 24px; }
  .baumliste { display: none; }
}

/* Die vier Viertel als Felder: zwei davon eine Spur heller, wie ein
   Schachbrett. Zusammen mit dem gestrichelten Kreuz sieht man auf einen
   Blick, wo ein Zweig aufhört. */
.baum__feld { position: absolute; width: 50%; height: 50%; }
.baum__feld--oben-links  { top: 0; left: 0; background: rgba(255, 255, 255, .022); }
.baum__feld--unten-rechts { bottom: 0; right: 0; background: rgba(255, 255, 255, .022); }
.baum__feld--oben-rechts { top: 0; right: 0; }
.baum__feld--unten-links { bottom: 0; left: 0; }

.baum__linien { position: absolute; inset: 0; width: 100%; height: 100%; }
.baum__linie { stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; }
.baum__linie--aktiv { stroke: var(--akzent); opacity: .55; }
.baum__trenner {
  stroke: #3a3a3a; stroke-width: 1; stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}

.baum__ecke {
  position: absolute; max-width: 40%;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.baum__ecke--oben-links   { top: 2px; left: 4px; }
.baum__ecke--oben-rechts  { top: 2px; right: 4px; }
.baum__ecke--unten-links  { bottom: 2px; left: 4px; }
.baum__ecke--unten-rechts { bottom: 2px; right: 4px; }
.baum__zweigpunkte { color: var(--hell); }

.baum__knoten { position: absolute; transform: translate(-50%, -50%); margin: 0; }
.baum__knoten:hover, .baum__knoten:focus-within { z-index: 6; }
.knoten {
  display: grid; gap: 1px; width: 104px; min-height: 40px; padding: 6px 5px;
  align-content: center; position: relative;
  border: 1px solid var(--linie); background: var(--grund);
  color: var(--dim); font: inherit; text-align: center;
}
.knoten__name { font-size: 11px; line-height: 1.2; color: var(--text); }
.knoten__wirkung { font-size: 10px; line-height: 1.2; letter-spacing: .02em; white-space: nowrap; }
.knoten--gewaehlt { border-color: var(--akzent); background: rgba(87, 224, 138, .08); }
.knoten--gewaehlt .knoten__name { color: var(--hell); }
.knoten--waehlbar { border-color: #6a6a6a; cursor: pointer; }
.knoten--waehlbar .knoten__name { color: var(--hell); }
.knoten--waehlbar:hover, .knoten--waehlbar:focus-visible { border-color: var(--akzent); }
/* Gesperrt wird über die Farben abgedunkelt, nicht über die Deckkraft:
   Sonst verblasst die Sprechblase darin mit. */
.knoten--gesperrt { border-color: #242424; }
.knoten--gesperrt .knoten__name { color: #6e6e6e; }
.knoten--gesperrt .knoten__wirkung { color: #555; }

/* Die Sprechblase. Sie steckt im Knoten und erscheint ohne Verzögerung —
   deshalb kein `title`, das der Browser erst nach einer Sekunde zeigt. */
.knoten__tipp {
  position: absolute; z-index: 7; width: 236px;
  display: grid; gap: 5px; padding: 9px 11px;
  border: 1px solid var(--text); background: var(--grund);
  box-shadow: 0 0 0 1px var(--grund), 0 6px 18px rgba(0, 0, 0, .65);
  text-align: left; white-space: normal; letter-spacing: normal;
  visibility: hidden; opacity: 0;
}
.knoten:hover > .knoten__tipp,
.knoten:focus-visible > .knoten__tipp,
.knoten:focus-within > .knoten__tipp { visibility: visible; opacity: 1; }
.tipp__titel { font-size: 13px; line-height: 1.2; color: var(--hell); font-weight: normal; }
.tipp__text { font-size: 12px; line-height: 1.45; color: var(--text); }
.tipp__fuss { font-size: 11px; line-height: 1.3; }
.tipp--unten  { top: calc(100% + 9px); }
.tipp--oben   { bottom: calc(100% + 9px); }
.tipp--mitte  { left: 50%; transform: translateX(-50%); }
.tipp--links  { left: -2px; }
.tipp--rechts { right: -2px; }

@media (max-width: 440px) {
  .koerper { gap: 5px; }
  .slot { min-height: 54px; padding: 7px 7px; }
  .slot__inhalt { font-size: 12px; }
}

/* --- Bewegung reduzieren ---------------------------------------------- */

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