/* ==========================================================================
   KELLERZENTRALE (017CD2) — Strategieebene als räumliche Sci-Fi-Basis.
   Ersetzt die Website-Anmutung: Umgebungs-Hintergründe pro Station,
   halbtransparente kantige HUD-Rahmen, Stationsleiste statt Sidebar.
   Nur unter #scene-base gescoped. Lädt NACH strategy.css.
   ========================================================================== */

#scene-base.shell {
  --kz-cyan: #4fd6ff;
  --kz-cyan-dim: #1c6f88;
  --kz-amber: #ffb020;
  --kz-red: #ff5169;
  --kz-glass: rgba(9, 19, 27, 0.60);
  --kz-glass-2: rgba(6, 13, 20, 0.72);
  position: relative;
  overflow: hidden;
  background: #05090d;
}

/* ---------- Umgebungs-Hintergrund (pro Station) ---------- */
#scene-base .station-env {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-color: #0a141c;   /* Fallback, falls Asset fehlt */
  transition: opacity 300ms ease, filter 300ms ease;
  will-change: opacity;
}
/* Lesbarkeits-/Stimmungs-Auflage: Vignette + leichte Abdunklung + feiner Cyan-Hauch */
#scene-base .station-env::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(3,7,11,.55) 100%),
    linear-gradient(180deg, rgba(4,9,14,.42), rgba(4,9,14,.62));
  pointer-events: none;
}
#scene-base.switching .station-env { opacity: 0.15; filter: blur(1px); }
#scene-base.switching .stage { opacity: 0; }

/* dezente Umgebungs-FX (Schwebstaub/Flimmern) */
#scene-base .env-fx {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(180,230,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(180,230,255,.35), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(180,230,255,.4), transparent);
  animation: kzDust 26s linear infinite;
}
@keyframes kzDust { from { transform: translateY(0); } to { transform: translateY(-40px); } }

/* ---------- Kommandoleiste oben (Statuswerte als Instrumente) ---------- */
#scene-base .cmd-strip {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: calc(6px + var(--safe-t)) 16px 6px;
  background: linear-gradient(180deg, rgba(6,14,20,.92), rgba(6,12,18,.72));
  border-bottom: 1px solid var(--kz-cyan-dim);
  box-shadow: 0 1px 0 rgba(79,214,255,.18), 0 8px 22px rgba(0,0,0,.5);
}
#scene-base .cmd-id {
  font-weight: 700; letter-spacing: .18em; font-size: 12.5px; text-transform: uppercase;
  color: var(--kz-cyan); white-space: nowrap; text-shadow: 0 0 12px rgba(79,214,255,.35);
}
#scene-base .cmd-readouts { display: flex; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
/* Bestands-Chips zu eingelassenen Instrumenten umformen (überschreibt strategy.css) */
#scene-base .cmd-readouts .chip,
#scene-base .ss-res .chip {
  background: linear-gradient(180deg, rgba(10,22,30,.9), rgba(6,14,20,.9));
  border: 1px solid var(--kz-cyan-dim); border-radius: 0;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  color: #d6f2fb; padding: 4px 12px; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap;
  box-shadow: inset 0 0 8px rgba(0,0,0,.5);
}
#scene-base .cmd-readouts .chip-warn { border-color: var(--kz-amber); color: var(--kz-amber); }
#scene-base .cmd-readouts .chip-bad { border-color: var(--kz-red); color: var(--kz-red); }
#scene-base .cmd-actions { display: flex; align-items: center; gap: 8px; }
#scene-base .cmd-day .chip { border-color: var(--kz-cyan); color: var(--kz-cyan); }

/* ---------- Bühne (Inhaltsbereich, Panels schweben über der Umgebung) ---------- */
#scene-base .stage {
  position: relative; z-index: 2; flex: 1 1 0; min-height: 0;
  padding: 16px; overflow: hidden; transition: opacity 300ms ease;
}
#scene-base .stage .tabpanel { display: none; height: 100%; }
#scene-base .stage .tabpanel.active { display: block; animation: kzPanelIn 320ms ease both; }
@keyframes kzPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Panels scrollen intern, nie die Seite */
/* ⚠️ `min-height: 0` auf der ganzen Flex-Kette. Ohne das weigert sich ein Flex-Element,
   kleiner zu werden als sein Inhalt — der Scrollbereich wächst dann über die Stationsleiste
   hinaus, statt zu scrollen, und die letzte Zeile liegt unerreichbar darunter. */
#scene-base .stage, #scene-base .stage .tabpanel, #scene-base .stage .tabpanel .hud { min-height: 0; }
#scene-base .stage .panelscroll { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }

/* ---------- HUD-Rahmen (kantig, halbtransparent, Cyan-Kante) ---------- */
#scene-base .hud {
  position: relative; padding: 14px 16px;
  --cut: 14px;
  background: linear-gradient(160deg, var(--kz-glass), var(--kz-glass-2));
  clip-path: polygon(0 var(--cut), var(--cut) 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - var(--cut)));
  backdrop-filter: blur(3px) saturate(1.06); -webkit-backdrop-filter: blur(3px) saturate(1.06);
  isolation: isolate;
}
/* Cyan-Kante entlang der Silhouette (Untergrund-Pseudo) */
#scene-base .hud::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: inherit;
  background: linear-gradient(135deg, var(--kz-cyan) 0 2px, transparent 2px),
              linear-gradient(315deg, var(--kz-cyan-dim) 0 2px, transparent 2px),
              var(--kz-cyan-dim);
  /* die 1.5px-Kante entsteht durch den leicht kleineren Body darüber */
}
#scene-base .hud::after {
  content: ''; position: absolute; inset: 1.5px; z-index: -1;
  clip-path: polygon(0 calc(var(--cut) - 1px), calc(var(--cut) - 1px) 0, calc(100% - 19px) 0, 100% 19px, 100% 100%, 19px 100%, 0 calc(100% - var(--cut) + 1px));
  background: linear-gradient(160deg, var(--kz-glass), var(--kz-glass-2));
}
#scene-base .hud > * { position: relative; z-index: 1; }
/* Ecken-/Kanten-Dekor im Referenz-Stil: Schraffur-Block oben links + Akzentlinie */
#scene-base .hud > .hud-deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#scene-base .hud > .hud-deco::before {   /* Schraffur-Block oben links */
  content: ''; position: absolute; left: 16px; top: 4px; width: 34px; height: 7px;
  background-image: repeating-linear-gradient(45deg, var(--kz-cyan) 0 2px, transparent 2px 5px);
  opacity: .9;
}
#scene-base .hud > .hud-deco::after {    /* helle Akzentlinie oben rechts */
  content: ''; position: absolute; right: 26px; top: 3px; width: 90px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--kz-cyan)); box-shadow: 0 0 8px var(--kz-cyan);
}
#scene-base .hud.hud--warn::before { background: var(--kz-amber); }
#scene-base .hud.hud--danger::before { background: var(--kz-red); }
#scene-base .hud-title {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--kz-cyan);
  margin: 0 0 8px; display: flex; align-items: center; gap: 8px;
}
#scene-base .hud-title::before { content: '▸'; color: var(--kz-cyan); }

/* ---------- Stationsleiste unten (statt Sidebar) ---------- */
#scene-base .station-bar {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; gap: 6px; align-items: stretch;
  padding: 8px 12px calc(8px + var(--safe-b));
  background: linear-gradient(0deg, rgba(5,11,17,.95), rgba(6,13,20,.7));
  border-top: 1px solid var(--kz-cyan-dim);
  overflow-x: auto; overflow-y: hidden;
}
#scene-base .stn {
  flex: 1 1 0; min-width: 78px; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, rgba(12,24,32,.75), rgba(7,15,22,.8));
  border: 1px solid #16323f; border-bottom: 2px solid transparent;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  color: #8fb2c2; cursor: pointer; font-family: inherit; letter-spacing: .04em;
  touch-action: manipulation; white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
#scene-base .stn .stn-ic { font-size: 18px; line-height: 1; color: var(--kz-cyan-dim); }
#scene-base .stn .stn-tx { font-size: 11px; text-transform: uppercase; }
#scene-base .stn:hover { color: #d6f2fb; border-color: var(--kz-cyan-dim); background: linear-gradient(180deg, rgba(16,34,44,.85), rgba(9,18,26,.85)); }
#scene-base .stn.active {
  color: #eaf9ff; border-color: var(--kz-cyan); border-bottom-color: var(--kz-cyan);
  background: linear-gradient(180deg, rgba(30,84,104,.6), rgba(10,26,34,.7));
  box-shadow: 0 -2px 14px rgba(79,214,255,.28), inset 0 0 0 1px rgba(79,214,255,.15);
}
#scene-base .stn.active .stn-ic { color: var(--kz-cyan); text-shadow: 0 0 10px var(--kz-cyan); }
#scene-base .stn--action { flex: 0 0 auto; min-width: 84px; }

/* ---------- Lage: Layout siehe css/lage.css ----------
   045 §13: Hier standen vier Regeln, von denen KEINE EINZIGE noch etwas traf — nachgezählt in
   index.html und js/ (je 0 Treffer):
     • `.stage[data-active="lagezentrum"] .stage-inner` — `.stage-inner` existiert im HTML
       überhaupt nicht; diese Regel war schon vor 045 wirkungslos.
     • `.lz-layout`   — durch `.lage-layout` ersetzt (css/lage.css).
     • `.lz-main` / `.lz-side` — Reste eines früheren Aufbaus, ebenfalls seit Längerem ungenutzt.
   Warum entfernt statt stehen gelassen: eine Grid-Regel mit `1.15fr .85fr` liest sich wie das
   geltende Lagelayout. Wer später die Spaltenbreiten ändern will, würde hier schrauben, nichts
   bewirken und die Ursache woanders suchen. Die übrigen `.lz-*`-Regeln (Status, Bedrohung,
   Einsatz) BLEIBEN — die Module tragen ihre Klassen weiter. */

/* Übersicht-Karten -> eingelassene Instrumente (überschreibt strategy.css-Rundungen) */
#scene-base .lz-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
#scene-base .lz-card, #scene-base .opt-card, #scene-base .inv-item, #scene-base .arch-row, #scene-base .detail-box, #scene-base .power-box {
  border-radius: 0 !important;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: linear-gradient(180deg, rgba(11,23,31,.82), rgba(7,15,22,.86)) !important;
  border: 1px solid var(--kz-cyan-dim) !important;
}
#scene-base .lz-card h4, #scene-base .opt-card h3 { color: var(--kz-cyan); }
#scene-base .lz-card .big { color: #eaf9ff; text-shadow: 0 0 10px rgba(79,214,255,.25); }
#scene-base .lz-note {
  border-left: 3px solid var(--kz-cyan-dim); background: rgba(79,214,255,.06); border-radius: 0;
  color: #a9c6d4; font-size: 12.5px; padding: 6px 10px;
}

/* Fußaktionen (Tag vorrücken etc.) als Terminal-Buttons */
#scene-base .kz-btn {
  background: linear-gradient(180deg, rgba(16,34,44,.9), rgba(9,18,26,.9));
  border: 1px solid var(--kz-cyan-dim); color: #d6f2fb; border-radius: 0;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  padding: 8px 14px; font-family: inherit; cursor: pointer; letter-spacing: .04em; white-space: nowrap;
}
#scene-base .kz-btn:hover { border-color: var(--kz-cyan); color: #fff; }
#scene-base .kz-btn--primary { border-color: var(--kz-cyan); color: #eaf9ff; box-shadow: 0 0 14px rgba(79,214,255,.25); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #scene-base .lz-layout { grid-template-columns: 1fr; }
  #scene-base .lz-side { max-height: none; }
}
/* 026A Phase A: Ressourcenleiste bleibt EINE Zeile (horizontal scrollbar) statt in die Höhe zu wachsen —
   kein Wert wird abgeschnitten, der Kopf bleibt kompakt (spart vertikalen Platz auf Tablets). */
@media (pointer: coarse), (max-width: 1100px) {
  #scene-base .cmd-readouts { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #scene-base .cmd-readouts::-webkit-scrollbar { height: 4px; }
  #scene-base .cmd-readouts::-webkit-scrollbar-thumb { background: var(--kz-cyan-dim); }
  #scene-base .cmd-readouts .chip { flex: 0 0 auto; }
}
/* Schmal (Tablet-Hochformat/Handy): Stationsleiste bricht sauber auf 2 Reihen um — ALLE 11 Stationen
   bleiben vollständig sichtbar (keine abgeschnittenen Wörter, kein verstecktes Scrollen). */
@media (max-width: 820px) {
  #scene-base .station-bar { flex-wrap: wrap; overflow-x: visible; gap: 5px; }
  #scene-base .stn { flex: 1 1 auto; min-width: 84px; min-height: 46px; }
  #scene-base .stn .stn-tx { font-size: 10px; }
  #scene-base .stn--action { min-width: 84px; }
  #scene-base .cmd-id { font-size: 11px; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  #scene-base .env-fx { animation: none; opacity: .3; }
  #scene-base .stage .tabpanel.active { animation: none; }
  #scene-base .station-env, #scene-base .stage { transition: none; }
}

/* ---------------------------------------------------------------- Systemstart (036 Phase 6)
 * Der Hochlauf der Bunkerzentrale beim ERSTEN Spielstart. Bewusst IM Lagezentrum und nicht
 * als Overlay davor: eine Meldung, die den Bildschirm blockiert, ist ein Tutorial-Popup —
 * genau das, was der Auftrag ausschliesst. Diese hier steht in der Anlage und geht dann weg.
 */
#scene-base .systemstart {
  grid-column: 1 / -1;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(11,23,31,.92), rgba(7,15,22,.94));
  border: 1px solid var(--kz-cyan-dim);
  border-left: 3px solid var(--kz-cyan);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
#scene-base .systemstart[hidden] { display: none; }
#scene-base .systemstart-kopf {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kz-cyan); margin-bottom: 8px;
}
#scene-base .systemstart-zeile {
  display: flex; gap: 12px; align-items: baseline;
  font-size: 12.5px; line-height: 1.7; color: #a9c6d4;
}
#scene-base .systemstart-marke {
  flex: 0 0 132px; color: #6f97a8; letter-spacing: .1em; font-size: 11px; text-transform: uppercase;
}
#scene-base .systemstart-text { color: #d6f2fb; }
/* Was noch offen ist, bekommt Bernstein — dieselbe Farbe wie „Beförderung verfügbar". */
#scene-base .systemstart-zeile--offen .systemstart-text { color: #d9a441; }
#scene-base .systemstart-schritt {
  margin: 10px 0 10px; padding: 6px 10px;
  border-left: 3px solid var(--kz-cyan-dim); background: rgba(79,214,255,.06);
  color: #a9c6d4; font-size: 12.5px;
}
/* Auf schmalen Geräten bricht die Marke über den Text — nichts wird abgeschnitten. */
@media (max-width: 820px) {
  #scene-base .systemstart-zeile { flex-direction: column; gap: 0; line-height: 1.45; margin-bottom: 6px; }
  #scene-base .systemstart-marke { flex: none; }
}

/* ---------------------------------------------------------------- 036 Phase 5: Bedienbarkeit
 *
 * (a) FUNKKNOPF ÜBER DIE STATIONSLEISTE HEBEN (Codex F004).
 *     `--ovi-fab-bottom` wird von `setzeFunkAbstand()` aus der GEMESSENEN Leistenhöhe gesetzt.
 *     Der Wert hier ist nur der Rückfall, falls das Skript nicht läuft.
 */
:root { --ovi-fab-bottom: 14px; }

/* (b) LANGE STATIONSNAMEN BEI 1024 PX (Codex F003).
 *     „Lagezentrum" wurde bei 1024×768 abgeschnitten: elf Knöpfe zu je 78 px Mindestbreite
 *     passen zwar nebeneinander, aber der Text im Knopf nicht mehr in den Knopf. Gemessen mit
 *     `scrollWidth > clientWidth` — nicht daran, ob irgendwo ein „…" auftaucht.
 *     Lösung: zwischen 821 und 1200 px etwas kleinere Schrift und engerer Buchstabenabstand.
 *     KEIN Umbruch der Leiste, KEIN Weglassen von Stationen. */
@media (min-width: 821px) and (max-width: 1200px) {
  #scene-base .stn { min-width: 70px; padding-inline: 2px; }
  #scene-base .stn .stn-tx { font-size: 9.5px; letter-spacing: 0; }
  #scene-base .stn .stn-ic { font-size: 16px; }
}

/* (c) KEIN HOVER AUF TOUCHGERÄTEN.
 *     Nach einem Tap blieb der :hover-Zustand stehen — auf einem Tablet sieht dann dauerhaft
 *     ein Knopf „angefasst" aus, den niemand mehr anfasst. Der Zustand gilt nur noch dort,
 *     wo es wirklich ein Zeigegerät gibt. Die Regeln selbst bleiben unverändert. */
@media (hover: none), (pointer: coarse) {
  #scene-base .stn:hover {
    color: #8fb2c2; border-color: #16323f;
    background: linear-gradient(180deg, rgba(12,24,32,.75), rgba(7,15,22,.8));
  }
  #scene-base .stn.active:hover {
    color: #eaf9ff; border-color: var(--kz-cyan);
    background: linear-gradient(180deg, rgba(30,84,104,.6), rgba(10,26,34,.7));
  }
  #scene-base .kz-btn:hover { border-color: var(--kz-cyan-dim); color: #d6f2fb; }
}

/* ================================================================= 037 Playtest-Befund E
 * DIE KOPFLEISTE SPRANG BEI JEDEM TAGWECHSEL.
 *
 * `#day-report` trägt den wechselnden Tagesertrag („+45 € · +6 Baustoffe · +2
 * Forschungsdaten"). Der Text ist mal länger, mal kürzer — und weil alles in einem
 * Flex-Fluss lag, verschoben sich dadurch Tag-Anzeige, Knöpfe und Hauptmenü mit. Bei
 * jedem Klick auf „Tag vorrücken" rutschte die halbe Leiste.
 *
 * Lösung: feste Flächen. Der Ertragstext bekommt seine eigene Breite und bricht darin um,
 * statt seine Nachbarn zu schieben. Nichts anderes bewegt sich mehr.
 */
#scene-base .cmd-strip { flex-wrap: nowrap; }
#scene-base .cmd-readouts { flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
#scene-base .cmd-readouts .chip { flex: 0 0 auto; }
#scene-base .cmd-day { flex: 0 0 auto; }
#scene-base .cmd-actions { flex: 0 0 auto; }
#scene-base .cmd-actions > #btn-next-day,
#scene-base .cmd-actions > #btn-base-menu { flex: 0 0 auto; white-space: nowrap; }
/* DIE eigentliche Korrektur: eigene, feste Fläche für die wechselnde Meldung. */
/* ⚠️ NACHBESSERUNG 2026-08-13. Die erste Fassung gab dem Feld 190 px Breite UND 34 px
 * Höhe mit `overflow: hidden`. Das Springen war weg — dafür war der Text abgeschnitten:
 * „jetzt kann man oben nicht mehr lesen was alles da steht" (Charly). Eine Meldung, die
 * man nicht lesen kann, ist so wertlos wie eine, die davonläuft.
 *
 * Richtig ist: die Breite kommt aus dem ÜBRIGEN Platz der Leiste, nicht aus dem Text —
 * damit ist sie von Tag zu Tag gleich, egal wie lang die Meldung wird. Die Höhe reicht für
 * drei Zeilen; wird es länger, scrollt es IM Feld, statt Inhalt zu verschlucken. Und die
 * Leiste bekommt eine Mindesthöhe, damit auch die Zeilenzahl niemanden verschiebt. */
#scene-base .cmd-strip { min-height: 58px; align-items: center; }
#scene-base #day-report {
  /* ⚠️ `flex: 1 1 auto` war noch nicht stabil: solange die Meldung leer ist, ist auch das
   * Feld schmal — beim ersten Tagwechsel sprangen die Knöpfe daneben um 30 px. Gemessen,
   * nicht vermutet. Eine feste, bildschirmabhängige Breite hängt gar nicht erst am Inhalt. */
  flex: 0 0 clamp(150px, 20vw, 280px);
  width: clamp(150px, 20vw, 280px);
  font-size: 11px; line-height: 1.35;
  color: #8fb2c2;
  white-space: normal;
  /* ⚠️ FESTE Höhe, nicht `max-height`. Mit einem Maximum ist das Feld bei kurzen Meldungen
   * zwei Zeilen hoch und bei einer mit Zwischenfall drei — die Leiste wuchs dann um 1 px mit
   * (gemessen: 56 → 58). Genau dieses Zappeln sollte weg. Drei Zeilen sind immer reserviert. */
  height: 46px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ================================================================= 037 Playtest-Befund C
 * PANELTITEL SCHNITT IN DEN RAHMEN.
 *
 * „FORSCHUNG" sass so weit oben, dass der gezeichnete Panelrahmen mitten durch die
 * Schrift lief. Die Rahmen (frames-v2.css) zeichnen ihre Zierleiste in den oberen ~10 px
 * des Panels — der Titel begann aber bei 0. Betrifft alle Paneltypen gleichermassen,
 * deshalb hier zentral und nicht je Panel einzeln.
 */
#scene-base .hud > .hud-title,
#scene-base .tabpanel .hud-title {
  margin-top: 6px;
  padding-top: 4px;
  padding-left: 2px;
  position: relative;
  z-index: 2;                     /* über der Zierleiste, nicht darunter */
}

/* ================================================================= 037 Playtest-Befund D
 * LEERZUSTÄNDE. Ein leerer Bildschirm sieht aus wie ein Fehler — auch wenn er fachlich
 * völlig richtig ist. Diese Kästen erklären, warum nichts da ist und wodurch sich der
 * Bereich füllt. Bewusst Terminal-Meldung, kein Website-Leerzustand.
 */
#scene-base .leerzustand {
  margin: 8px 0 14px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(11,23,31,.7), rgba(7,15,22,.75));
  border: 1px dashed #24414f;
  border-left: 3px solid var(--kz-cyan-dim);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
#scene-base .leerzustand-marke {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--kz-cyan-dim); margin-bottom: 6px;
}
#scene-base .leerzustand-text {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: #8fb2c2; max-width: 62ch;
}

/* 037: Der Beförderungshinweis ist jetzt ein KNOPF (siehe soldier-identity.js) und muss
 * auch wie einer aussehen und sich anfassen lassen. Amber, weil er etwas verlangt. */
.karriere-befoerderung--knopf {
  display: block; width: 100%;
  margin-top: 8px; padding: 7px 12px;
  background: linear-gradient(180deg, rgba(217,164,65,.16), rgba(217,164,65,.06));
  border: 1px solid #d9a441; color: #f0cd94;
  font-family: inherit; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  touch-action: manipulation;      /* Tablet: sofort auslösen, kein Doppeltipp-Zoom */
  min-height: 40px;                /* Tablet: sichere Trefferfläche */
}
@media (hover: hover) and (pointer: fine) {
  .karriere-befoerderung--knopf:hover { background: rgba(217,164,65,.26); color: #ffe6b0; }
}

/* ================================================================= 037 Playtest-Befund B
 * BAUVORSCHAU AUF DEM RASTER (Ghost-Footprint).
 *
 * Die gruen/rot eingefaerbten Zellen markierten nur den ANKERPUNKT. Ein 3×2-Raum sah dort
 * aus wie ein 1×1-Raum. Der Ghost zeigt die echte Flaeche — in derselben Prozentgeometrie
 * wie die fertigen Raeume, damit Vorschau und Ergebnis nicht auseinanderlaufen koennen.
 */
#scene-base .bg-ghost {
  position: absolute;
  z-index: 6;                      /* ueber Zellen UND Raeumen */
  pointer-events: none;            /* darf keinen Klick abfangen */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center;
  border: 2px dashed;
  box-sizing: border-box;
  transition: left .06s linear, top .06s linear, width .06s linear, height .06s linear;
}
#scene-base .bg-ghost.ok {
  border-color: #6fe3b0;
  background: repeating-linear-gradient(45deg,
    rgba(111,227,176,.22) 0 6px, rgba(111,227,176,.10) 6px 12px);
  box-shadow: inset 0 0 0 1px rgba(111,227,176,.5), 0 0 18px rgba(111,227,176,.25);
}
#scene-base .bg-ghost.bad {
  border-color: #e08b7f;
  background: repeating-linear-gradient(45deg,
    rgba(224,139,127,.22) 0 6px, rgba(224,139,127,.08) 6px 12px);
  box-shadow: inset 0 0 0 1px rgba(224,139,127,.5);
}
#scene-base .bg-ghost-name {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #eaf9ff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#scene-base .bg-ghost-size {
  font-size: 10.5px; letter-spacing: .06em; color: #d6f2fb;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
#scene-base .bg-ghost-txt {
  font-size: 10px; letter-spacing: .04em; padding: 1px 6px;
  background: rgba(5,11,17,.72);
}
#scene-base .bg-ghost.ok .bg-ghost-txt { color: #a9f0cd; }
#scene-base .bg-ghost.bad .bg-ghost-txt { color: #f0b6b3; }
/* Sehr kleine Ghosts (1×1 auf schmalem Schirm): nur die Groesse zeigen, sonst quillt es. */
@media (max-width: 1100px) {
  #scene-base .bg-ghost-name { font-size: 10px; }
  #scene-base .bg-ghost-txt { display: none; }
}