/* ==========================================================================
   OVI INVASION - Grundstil
   Mobil zuerst. Alle Touchziele mindestens 44 px. Keine Hover-Pflicht.
   ========================================================================== */

:root {
  --bg:        #101216;
  --bg-2:      #171b21;
  --bg-3:      #1f242c;
  --line:      #2c333d;
  --text:      #e6e8ec;
  --text-dim:  #99a1ad;
  --text-off:  #6b7381;

  --accent:    #8a1f2e;   /* Bordeaux */
  --accent-hi: #b5293c;
  --gold:      #c9a227;
  --ok:        #4e9a5a;
  --warn:      #c8892b;
  --bad:       #b3453f;
  --info:      #3b7fa6;

  --radius: 10px;
  --tap: 48px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

/**
 * WICHTIG: Das hidden-Attribut muss immer gewinnen.
 *
 * Ohne diese Regel hebt jede eigene display-Angabe (display:flex, display:grid)
 * das hidden-Attribut still auf - das Element bleibt sichtbar, obwohl der Code
 * es korrekt versteckt hat. Genau so blieb die Presenter-Leiste nach dem
 * Gegnerzug stehen und ueberlagerte die Bewegungsvorschau.
 *
 * Merke: Sichtbarkeit immer mit getComputedStyle pruefen, nie nur ueber
 * element.hidden - das Attribut kann stimmen, waehrend das Element steht.
 */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  overscroll-behavior: none;
}

body { overflow: hidden; }

/* Kein Textmarkieren beim Wischen ueber die Karte */
#app { height: 100%; -webkit-user-select: none; user-select: none; }

.hard-note {
  max-width: 640px;
  margin: 15vh auto;
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
}
.hard-note pre {
  background: #0b0d10; padding: 10px 12px; border-radius: 6px;
  overflow-x: auto; color: var(--gold);
}

/* ---------- Szenen ---------- */
.scene { display: none; height: 100%; position: relative; }
.scene.active { display: block; }

/* ---------- Schaltflaechen ---------- */
.btn {
  min-height: var(--tap);
  padding: 10px 16px;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s ease, border-color .12s ease;
}
.btn:active { background: #2a313b; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent-hi); font-weight: 600; }
.btn-primary:active { background: var(--accent-hi); }
.btn-ghost { background: transparent; }
.btn-danger { border-color: var(--bad); color: #f0b6b3; }
.btn-lg { min-height: 56px; font-size: 17px; width: 100%; }
/* auch die kleine Variante bleibt ein sicheres Touchziel (>= 44 px) */
.btn-sm { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.btn-block { width: 100%; margin-top: 8px; }

.round-btn {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(24,28,34,.9);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.round-btn:active { background: #2a313b; }

/* ---------- Typografie ---------- */
.title {
  font-size: clamp(30px, 8vw, 54px);
  letter-spacing: .16em;
  margin: 0 0 6px;
  color: var(--text);
  text-shadow: 0 0 22px rgba(138,31,46,.5);
}
.title.small { font-size: clamp(22px, 5vw, 32px); }
.subtitle { color: var(--text-dim); margin: 0 0 18px; font-size: 15px; }
.placeholder-hint { color: var(--text-off); font-size: 13px; margin: 0 0 20px; }
.hint { color: var(--text-dim); font-size: 13px; }

.chip {
  display: inline-block;
  padding: 5px 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}
.chip-muted { color: var(--text-dim); }
.chip-ok   { border-color: var(--ok);   color: #a9dcb2; }
.chip-warn { border-color: var(--warn); color: #f0cd94; }
.chip-bad  { border-color: var(--bad);  color: #f0b6b3; }

/* ---------- Intro / Menue ---------- */
.intro-wrap, .menu-wrap {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b));
  position: relative;
}
.intro-media {
  position: absolute; inset: 0;
  background: #0b0d10 center/cover no-repeat;
  opacity: .5;
}
.intro-media video, .intro-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.intro-overlay { position: relative; z-index: 1; max-width: 520px; width: 100%; }

/* ---------- 049 §10–§13: Introsteuerung am Rand statt in der Mitte ---------- */

/* Sobald der Film laeuft, ist die Mitte leer. */
#scene-intro.intro--laeuft .intro-mitte { display: none; }

/**
 * Die Leiste sitzt unten rechts, mit sicherem Rand, und liegt UEBER dem Film.
 * Sie ist von Anfang an da: wer das Intro schon kennt, soll nicht erst starten muessen,
 * um ueberspringen zu koennen.
 */
.intro-leiste {
  position: fixed;
  right: clamp(14px, 2.2vw, 32px);
  bottom: clamp(14px, 2.6vh, 32px);
  display: flex; align-items: center; gap: 10px;
  z-index: 40;
}

/**
 * ⚠️ DEZENT IM AUSSEHEN, NICHT IN DER TREFFERFLAECHE.
 * Halbtransparent und ohne Signalfarbe — aber 44 px hoch, damit er auf dem Tablet
 * zuverlaessig zu treffen ist. Das ist dieselbe Komfortgroesse wie ueberall sonst.
 */
.intro-rand {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(190, 225, 245, .28);
  border-radius: 6px;
  background: rgba(8, 14, 20, .46);
  color: rgba(226, 240, 248, .86);
  font-size: .92rem; letter-spacing: .04em;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.intro-rand:hover, .intro-rand:focus-visible {
  background: rgba(14, 26, 36, .78);
  border-color: rgba(190, 225, 245, .55);
  color: #eaf6ff;
}
.intro-restzeit { font-variant-numeric: tabular-nums; opacity: .8; }
.intro-buttons, .menu-buttons {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 360px; margin: 0 auto; width: 100%;
}
.menu-note { color: var(--text-off); font-size: 12px; margin-top: 20px; }

/* ---------- Listen ---------- */
.list { display: flex; flex-direction: column; gap: 8px; }
/*
 * 047 §4 — DIE ZWEITE DECKELUNG.
 * `max-width: 780px` sass hier UNTER der 620-px-Regel aus frames-v2.css und ist deshalb nie
 * aufgefallen: solange das Panel selbst auf 620 px begrenzt war, konnte eine Liste ohnehin
 * nie 780 px breit werden. Nach dem Aufheben der Panelgrenze wurde sie zur neuen Fessel —
 * gemessen: Panel 1229 px, Karten trotzdem 780 px, rechts daneben leere Kartenfläche.
 *
 * Zwei Deckelungen für dieselbe Sache an zwei Stellen: genau die Sorte verstreute Regel,
 * die man beim ersten Suchen nicht findet.
 *
 * Die Missionsliste im Lagezentrum behält ihre Grenze — sie steht in einer schmalen Säule,
 * dort wären 1200 px sinnlos.
 */
.list.wide { max-width: 100%; }
#mission-list.list.wide { max-width: 780px; }

.row {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--tap);
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  width: 100%;
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.row:disabled, .row.disabled { opacity: .5; cursor: not-allowed; }
.row.selected { border-color: var(--gold); background: #23252a; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 600; }
.row-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.row-right { text-align: right; font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.row-blocked { color: #e8a49f; font-size: 12.5px; margin-top: 3px; }

.detail-box {
  margin-top: 12px; padding: 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px;
}
.detail-box h4 { margin: 0 0 6px; font-size: 15px; }

/* ---------- Bottom Sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 82vh; overflow-y: auto;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(20px + var(--safe-b));
  animation: sheet-in .16s ease-out;
}
.sheet-panel.wide { max-width: 640px; margin: 0 auto; border-radius: 16px 16px 0 0; }
@keyframes sheet-in { from { transform: translateY(18px); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet-handle {
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--line); margin: 4px auto 12px;
}
.sheet-panel h3 { margin: 0 0 2px; font-size: 17px; }
.sheet-sub { margin: 0 0 12px; color: var(--text-dim); font-size: 13px; }
.sheet-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }

.action-btn {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; width: 100%;
  padding: 8px 14px;
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 15px; text-align: left;
  cursor: pointer; touch-action: manipulation;
}
.action-btn:active { background: #2a313b; }
.action-btn[disabled] { opacity: .55; cursor: not-allowed; }
.action-btn .ab-main { flex: 1; min-width: 0; }
.action-btn .ab-name { font-weight: 600; }
.action-btn .ab-reason { font-size: 12.5px; color: #e8a49f; margin-top: 2px; }
.action-btn .ab-detail { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.action-btn .ab-cost {
  font-size: 12px; color: var(--gold);
  border: 1px solid #4a411c; border-radius: 6px;
  padding: 3px 7px; white-space: nowrap;
}
.action-btn .ab-chance { font-size: 18px; font-weight: 700; min-width: 54px; text-align: right; }

/* ---------- Zieldatenblock ---------- */
.target-info {
  background: #1b2028; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px;
  font-size: 13px;
}
.ti-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ti-head strong { font-size: 15px; }
.ti-dist { color: var(--text-dim); font-size: 12px; }
.ti-hpbar { height: 7px; background: #2a2f37; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.ti-hpfill { height: 100%; background: var(--bad); }
.ti-line { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: var(--text-dim); }
.ti-line.good { color: #a9dcb2; }
.ti-line.bad { color: #f0cd94; }
.ti-chance {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 17px; font-weight: 700;
}
.ti-sub { font-size: 12px; font-weight: 400; color: var(--text-dim); }

/* ---------- Toast ---------- */
.toast {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(64px + var(--safe-t));
  background: rgba(20,24,30,.96);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 14px; font-size: 14px; z-index: 40;
  max-width: 90vw; text-align: center;
}
.toast.bad { border-color: var(--bad); color: #f2c3c0; }

/* ---------- Debrief ---------- */
.debrief-wrap {
  height: 100%; overflow-y: auto;
  padding: calc(24px + var(--safe-t)) 18px calc(24px + var(--safe-b));
  max-width: 720px; margin: 0 auto;
}
.debrief-section { margin-bottom: 18px; }
.debrief-section h3 { font-size: 15px; margin: 0 0 8px; color: var(--gold); }
.xp-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-dim); }

.save-tools { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }

/* ---------- Desktop-Verbesserungen ---------- */
@media (min-width: 900px) {
  .sheet-panel {
    left: auto; right: 20px; bottom: 20px;
    width: 400px; max-height: 70vh;
    border-radius: var(--radius); border: 1px solid var(--line);
  }
  .sheet-panel.wide { right: 50%; transform: translateX(50%); width: 620px; }
  .sheet-handle { display: none; }
}

/* ---------- Intro-Animatic ---------- */
.animatic { position: absolute; inset: 0; overflow: hidden; }
.animatic-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: animatic-in .9s ease forwards;
}
.animatic-img.fade-out { animation: animatic-out .9s ease forwards; }
@keyframes animatic-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes animatic-out { from { opacity: 1; } to { opacity: 0; } }

/* dezente Zoom-/Schwenkbewegung - nie hektisch */
.pan-in    { animation: animatic-in .9s ease forwards, pan-in 14s ease-out forwards; }
.pan-up    { animation: animatic-in .9s ease forwards, pan-up 14s ease-out forwards; }
.pan-right { animation: animatic-in .9s ease forwards, pan-right 14s ease-out forwards; }
@keyframes pan-in    { from { transform: scale(1.00); } to { transform: scale(1.10); } }
@keyframes pan-up    { from { transform: scale(1.06) translateY(1.5%); } to { transform: scale(1.10) translateY(-1.5%); } }
@keyframes pan-right { from { transform: scale(1.06) translateX(-1.5%); } to { transform: scale(1.10) translateX(1.5%); } }

.intro-caption {
  min-height: 3.2em;
  margin: 0 0 16px;
  font-size: 15px; line-height: 1.5;
  color: #e6dcc4;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
  opacity: 0; transition: opacity .6s ease;
}
.intro-caption.show { opacity: 1; }

/* Hauptmenue mit Bildhintergrund */
#scene-menu .menu-wrap { position: relative; }
#scene-menu .menu-wrap::before {
  content: ""; position: absolute; inset: 0;
  background: var(--menu-bg, none) center/cover no-repeat;
  opacity: .55; z-index: 0;
}
#scene-menu .menu-wrap > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .pan-in, .pan-up, .pan-right { animation: animatic-in .9s ease forwards; }
}

/* =========================================================================
   EINSATZBESPRECHUNG (Phase 2B)
   Drei Spalten am Rechner, gestapelt am Telefon. Der Bildschirm muss auf
   einem schmalen Geraet vollstaendig bedienbar bleiben - die beiden Knoepfe
   unten sind deshalb immer sichtbar und ausreichend gross.
   ========================================================================= */
.briefing-wrap {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  padding: 12px 14px calc(12px + var(--safe-b));
  gap: 10px;
}
.briefing-head { flex: 0 0 auto; }
.briefing-ort { margin: 2px 0 0; color: var(--text-dim); font-size: 14px; }

.briefing-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .briefing-body { grid-template-columns: 320px minmax(0, 1fr) 260px; }
}

.briefing-figure { margin: 0; }
.briefing-figure img {
  width: 100%; height: auto; display: block;
  border-radius: 8px; border: 1px solid var(--line);
}
.briefing-figure figcaption {
  margin-top: 6px; font-size: 13px; color: var(--text-dim); font-style: italic;
}

.briefing-block { margin-bottom: 12px; }
.briefing-block h2 {
  font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); margin: 0 0 4px;
}
.briefing-block ul { margin: 0; padding-left: 18px; }
.briefing-block li { margin-bottom: 3px; }
.briefing-done { color: var(--ok); list-style: none; margin-left: -18px; }
.briefing-note { color: var(--text-dim); list-style: none; margin-left: -18px;
                 font-style: italic; margin-top: 6px; }
.briefing-hint { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }

.briefing-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line); font-size: 13px;
}
.chip-unknown { color: var(--text-dim); border-style: dashed; font-style: italic; }

.briefing-squad h2 {
  font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); margin: 0 0 6px;
}
.briefing-crewrow {
  padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.briefing-crewpic, .briefing-gearpic {
  width: 100%; height: auto; margin-top: 10px;
  border-radius: 8px; border: 1px solid var(--line);
}

.briefing-foot {
  flex: 0 0 auto; display: flex; gap: 10px; justify-content: flex-end;
}
.briefing-foot .btn { min-width: 140px; }

/* =========================================================================
   ZWISCHENSEQUENZEN
   Liegen ueber allem. Die Bedienleiste muss IMMER erreichbar sein - sonst
   sitzt der Spieler in einem Video fest, das nicht startet.
   ========================================================================= */
.cinematic {
  position: fixed; inset: 0; z-index: 10000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
/**
 * 049 §66 — DER EINSATZFILM MUSS DEN SCHIRM FUELLEN.
 *
 * ⚠️ `width/height: auto` SKALIERT NUR HERUNTER, NIE HINAUF.
 * `start_abflug_liftoff.mp4` ist 768x576. Mit der alten Regel stand der Abflug als
 * briefmarkengrosser Kasten mitten auf schwarzem Grund — gemessen 768x576 in einem
 * 1600x900-Fenster. Der Film LIEF, er war nur winzig; genau die Sorte Fehler, die keine
 * Zaehlpruefung findet und die beim Hinsehen sofort auffaellt.
 *
 * `contain` statt `cover`, weil der Clip 4:3 ist: `cover` wuerde auf 16:9 oben und unten
 * ein Drittel wegschneiden — samt der Triebwerke, auf die es ankommt. `contain` skaliert
 * auf die volle Hoehe und laesst seitlich schwarz. Etwas weicher, aber ganz zu sehen.
 */
.cinematic-video, .cinematic-poster img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.cinematic-poster {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: var(--text-dim);
}
.cinematic-bar {
  position: absolute; right: 14px; bottom: calc(14px + var(--safe-b));
  display: flex; gap: 8px; z-index: 1;
}
.cinematic-bar .btn { min-height: 44px; }

/* Feinddaten */
.intel-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.intel-grouppic { grid-column: 1 / -1; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.intel-card { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-3); }
.intel-card.intel-unknown { border-style: dashed; opacity: .6; }
.intel-name { font-weight: 600; margin-bottom: 4px; }
/* Auftrag 019: gestörte Sensoraufnahme (Bedrohung 0) + Dossier-Porträt ab Erstkontakt */
.intel-sensor { grid-column: 1 / -1; width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--line); filter: contrast(1.06) brightness(.92) saturate(.9); }
.intel-unknown-head { grid-column: 1 / -1; font-weight: 700; letter-spacing: .04em; color: #bcd0dc; }
.intel-portrait { width: 44px; height: 44px; object-fit: contain; float: right; margin: 0 0 4px 6px; }

/* Auftrag 020 Phase B: produktionsreife Dossiers — kanonisches Masterbild als
   kompaktes Thumbnail (passt ins schmale Lage-Modul), progressive Info
   (Rolle/Statur qualitativ; exakte Werte erst nach Analyse). */
.intel-known { overflow: hidden; }                    /* Float einschliessen */
/* Auftrag 021 A2: Ganzkörper-Thumbnail OHNE Beschnitt — 4:5-Box, object-fit CONTAIN,
   an der Unterkante ausgerichtet, dunkler Bildhintergrund. KEIN cover mehr. */
.intel-known .intel-portrait {
  float: left; display: block; width: 84px; height: 105px;   /* 4:5 Hochformat */
  object-fit: contain; object-position: center bottom;
  background: #0a1018; border-radius: 5px; border: 1px solid var(--line); margin: 0 10px 3px 0;
}
.intel-role { font-size: 12px; color: #bcd0dc; margin-bottom: 3px; font-weight: 600; }
.intel-state { font-size: 10.5px; margin-top: 5px; padding: 2px 7px; border-radius: 4px; display: inline-block; }
.intel-state--lock { color: #f0cd94; background: rgba(240,205,148,.10); border: 1px solid rgba(240,205,148,.35); }
.intel-state--ok { color: #a9dcb2; background: rgba(120,200,140,.12); border: 1px solid rgba(120,200,140,.4); }
.intel-card.intel-analyzed { border-left: 3px solid #6fb98a; }
.intel-card.intel-sighted { border-left: 3px solid #c8a24b; }
/* Karte ist anklickbar/tastaturbedienbar */
.intel-card.intel-known { cursor: pointer; outline-offset: 2px; }
.intel-card.intel-known:hover { border-color: var(--kz-cyan-dim, #2f6f88); }
.intel-card.intel-known:focus-visible { outline: 2px solid #4fd6ff; }
.intel-more { clear: both; font-size: 11px; color: #7fb3c8; margin-top: 6px; }

/* Auftrag 021 A2: Scroll-Fade — signalisiert, dass weitere Dossiers folgen. */
#enemy-intel { position: relative; scrollbar-width: thin; scrollbar-color: #2f6f88 transparent; }
#enemy-intel::-webkit-scrollbar { width: 7px; }
#enemy-intel::-webkit-scrollbar-thumb { background: #2f6f88; border-radius: 4px; }

/* =========================================================================
   Auftrag 021 A3: Dossier-Detailansicht als taktisches Scanner-Overlay
   ========================================================================= */
.dscan-overlay {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: rgba(4,9,14,.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 20px;
}
.dscan-panel {
  width: min(720px, 96vw); max-height: 92vh; overflow: auto;
  background: linear-gradient(160deg, rgba(11,22,30,.98), rgba(6,13,19,.99));
  border: 1px solid var(--kz-cyan, #4fd6ff);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 14px));
  box-shadow: 0 0 0 1px rgba(79,214,255,.25), 0 18px 60px rgba(0,0,0,.6);
  color: var(--text, #dfe9f0);
}
.dscan-titlebar { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid rgba(79,214,255,.28); }
.dscan-title { font-weight: 700; letter-spacing: .08em; color: #bfe8ff; font-size: 14px; }
.dscan-close {
  font-family: inherit; cursor: pointer; font-size: 13px; color: #d6f2fb; padding: 6px 12px;
  background: linear-gradient(180deg, rgba(16,34,44,.9), rgba(9,18,26,.9));
  border: 1px solid var(--kz-cyan-dim, #2f6f88); border-radius: 0;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.dscan-close:hover { border-color: #4fd6ff; color: #fff; }
.dscan-close:focus-visible { outline: 2px solid #4fd6ff; outline-offset: 2px; }
.dscan-body { display: flex; gap: 16px; padding: 16px; }
.dscan-left { flex: 0 0 44%; min-width: 0; }
.dscan-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dscan-imgwrap {
  position: relative; width: 100%; aspect-ratio: 4 / 5; background: #0a1018;
  border: 1px solid rgba(79,214,255,.3); border-radius: 4px; overflow: hidden;
}
.dscan-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.dscan-scanline { position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, rgba(79,214,255,.7), transparent);
  animation: dscanScan 3.2s linear infinite; }
@keyframes dscanScan { 0% { top: 4%; } 50% { top: 94%; } 100% { top: 4%; } }
@media (prefers-reduced-motion: reduce) { .dscan-scanline { animation: none; opacity: .35; top: 50%; } }
.dscan-role { font-size: 13.5px; color: #bcd0dc; font-weight: 600; }
.dscan-data { display: flex; flex-direction: column; }
.dstat-row { display: flex; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.dstat-k { flex: 0 0 108px; color: var(--text-dim, #9fb2bf); }
.dstat-v { flex: 1 1 auto; color: var(--text, #e6f0f6); }
.dscan-field { font-size: 12.5px; color: #a9c6d4; line-height: 1.4; }
.dscan-band { margin-top: 4px; border-radius: 0; padding: 8px 10px; border-left: 3px solid; }
.dscan-band-head { font-size: 12px; font-weight: 700; letter-spacing: .03em; margin-bottom: 3px; }
.dscan-values { font-size: 12.5px; }
.dscan-band--ok { background: rgba(120,200,140,.10); border-left-color: #6fb98a; color: #bfe9c6; }
.dscan-band--lock { background: rgba(240,205,148,.10); border-left-color: #c8a24b; color: #f0cd94; }
@media (max-width: 560px) {
  .dscan-body { flex-direction: column; }
  .dscan-left { flex: 0 0 auto; max-width: 60%; align-self: center; }
}


/* =========================================================================
   ORTSBILDER als Hintergrund (Phase 2D)
   Die Bilder aus Bilder/ tragen die Stimmung. Darueber liegt immer ein
   dunkler Verlauf - ohne ihn ist die Schrift auf den hellen Fensterflaechen
   des El Camino nicht lesbar.
   ========================================================================= */
#scene-menu, #scene-base {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#scene-menu { background-image:
  linear-gradient(rgba(10,12,16,.72), rgba(10,12,16,.88)),
  url('../assets/ui/menu_bg.jpg'); }
#scene-base { background-image:
  linear-gradient(rgba(10,12,16,.86), rgba(10,12,16,.93)),
  url('../assets/ui/basis_hangar.jpg'); }


/* 042 §9: Stufenkennzeichen in der Werkstatt (T0/T1/T2).
   Dezent — es soll die Zeile ordnen, nicht sie dominieren. */
.stufe-marke {
  margin-left: 7px;
  padding: 1px 5px;
  border: 1px solid #2d4653;
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: .08em;
  color: #6fb6c9;
  vertical-align: middle;
}

/* ---------- 050 §28: Hinweis auf einen neuen Stand ---------- */

/**
 * ⚠️ DEZENT, ABER NICHT VERSTECKT.
 * Der Hinweis erscheint oben mittig, weil er dort weder die Kartenmitte noch die
 * Einheitenleiste unten verdeckt. Er ist KEIN Modal: das Spiel laeuft weiter, der Spieler
 * entscheidet selbst, wann er neu laedt (§28 — nie automatisch waehrend eines Einsatzes).
 */
.build-hinweis {
  position: fixed;
  top: calc(8px + var(--safe-t, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-radius: 8px;
  background: rgba(18, 22, 28, .96);
  border: 1px solid rgba(226, 178, 96, .55);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
  font-size: 13px;
  color: #e8e2d6;
  max-width: min(92vw, 560px);
}
.build-hinweis-text { font-weight: 600; }
.build-hinweis-klein {
  font-size: 11px;
  color: rgba(168, 174, 184, .8);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.build-hinweis-knopf { min-height: 32px; }
.build-hinweis-zu {
  min-height: 32px;
  min-width: 32px;
  padding: 0 8px;
  line-height: 1;
}

body:has(#scene-intro.active) .ovi-radio-fab,
body:has(#scene-intro.active) .ovi-radio-panel,
body:has(.cinematic) .ovi-radio-fab,
body:has(.cinematic) .ovi-radio-panel { display:none !important; }
.demo-guide[hidden]{display:none}
.demo-guide{position:fixed;inset:0;z-index:7000;background:#02090dcc;display:grid;place-items:center;padding:22px}
.demo-guide-card{width:min(560px,100%);padding:26px;border:1px solid #d4b46a;border-radius:12px;background:#10212b;color:#e0ebef;box-shadow:0 16px 60px #0008}
.demo-guide-card small{color:#e9c86e;letter-spacing:.1em}
.demo-guide-card h2{margin:16px 0;font-size:25px}
.demo-guide-card p{line-height:1.6;margin:0 0 24px}
.demo-guide-card .row{flex-wrap:wrap;gap:10px}
.demo-guide-card button{min-height:44px}
.cinematic-label { margin-right:auto; color:#e5ecef; font-size:14px; align-self:center; }