/*
 * 046 §5/§6/§18 — Einweisungsangebot, Aufgabenkarte und Hinweisfenster.
 *
 * ⚠️ DIESE OBERFLÄCHEN LIEGEN AUSSERHALB VON `#scene-base` — SIE BRINGEN IHRE FARBEN SELBST MIT.
 * In 045 fiel dreimal auf, dass Knöpfe mit der Klasse `kz-btn` ausserhalb der Basis-Szene auf
 * Chromes Standardgrau zurückfallen, weil die Regeln unter `#scene-base .kz-btn` hängen.
 * Deshalb tragen die Elemente hier eigene Klassen (`ewa-btn`, `ewk-*`, `hhw-*`) mit
 * vollständiger Gestaltung — und nicht `kz-btn` in der Hoffnung, dass es schon passt.
 */

/* ==========================================================================
 * §5 — Das Angebot beim ersten Kampagnenstart
 * ========================================================================== */

.ewa {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vh, 40px);
  background: rgba(4, 8, 12, .86);
}
.ewa[hidden] { display: none; }

.ewa-karte {
  width: min(560px, 100%);
  display: flex; flex-direction: column; gap: clamp(10px, 2vh, 18px);
  padding: clamp(20px, 3vh, 30px);
  color: #cfe3f2;
  background: linear-gradient(180deg, rgba(18, 32, 44, .99), rgba(10, 18, 26, .99));
  border: 1px solid #7fd0ff;
  /* Dieselbe abgeschrägte Ecke wie die übrigen Terminalflächen — gemeinsame Formensprache. */
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.ewa-marke { font-size: .74rem; letter-spacing: .26em; color: #6fb4d8; }
.ewa-kopf h2 {
  margin: .25em 0 0;
  font-size: clamp(1.3rem, 3vh, 1.75rem);
  letter-spacing: .08em; color: #eaf6ff;
}
.ewa-text { margin: 0; font-size: 1rem; line-height: 1.55; color: #cfe0ea; }

.ewa-fuss { display: flex; gap: 12px; flex-wrap: wrap; }

.ewa-btn {
  flex: 1 1 auto; min-width: 200px; min-height: 48px;
  padding: .6em 1.2em;
  font: inherit; font-weight: 500; letter-spacing: .06em;
  color: #cfe3f2;
  background: linear-gradient(180deg, rgba(16, 34, 44, .92), rgba(9, 18, 26, .92));
  border: 1px solid rgba(111, 180, 216, .42);
  border-radius: 0; cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
}
.ewa-btn:hover { background: linear-gradient(180deg, rgba(26, 50, 64, .96), rgba(14, 28, 38, .96)); border-color: rgba(150, 210, 240, .65); }
.ewa-btn:focus-visible { outline: 2px solid #b6e6ff; outline-offset: 2px; }

/* Die Einweisung ist die Empfehlung — „ohne" bleibt gleichwertig erreichbar, nur ruhiger. */
.ewa-btn--haupt {
  color: #eaf6ff; font-weight: 600; border-color: #7fd0ff;
  background: linear-gradient(180deg, rgba(32, 68, 92, .96), rgba(14, 30, 44, .96));
}
.ewa-btn--haupt:hover { background: linear-gradient(180deg, rgba(46, 96, 126, .98), rgba(20, 42, 60, .98)); border-color: #b6e6ff; }

.ewa-fussnote { margin: 0; font-size: .84rem; line-height: 1.45; color: #93aec0; }

/* ==========================================================================
 * §6 — Die Aufgabenkarte
 * ========================================================================== */

/*
 * ⚠️ LINKS UNTEN, NICHT RECHTS.
 * Der erste Anlauf setzte die Karte rechts unten — und sie legte sich damit genau über das
 * Modul „Aktueller Einsatz", also über den Inhalt, zu dem die Einweisung hinführen will
 * (im Bild nachgesehen: Briefingtext und Start-Leiste verdeckt).
 *
 * Links unten liegt der untere Rand der Lagekarte. Dort steht während der Vorbereitung nichts,
 * was der Spieler gerade braucht — die Karte selbst bleibt darüber vollständig sichtbar.
 *
 * `max-height` plus eigener Scroll: die Liste darf wachsen (sechs Schritte mit Erklärung),
 * aber nie unter die Stationsleiste rutschen.
 */
.ewk {
  position: fixed;
  left: clamp(10px, 1.6vw, 22px);
  /*
   * ⚠️ HOCH GENUG, UM DAS BASISSTATUS-BAND FREI ZU LASSEN.
   * Mit 84–108 px sass die Karte genau auf dem Statusband und verdeckte dessen linke
   * Kacheln („Einsätze“, „Bau läuft“) — im Bild nachgesehen. Das Band ist rund 110 px hoch,
   * die Stationsleiste rund 70; darueber beginnt der freie Bereich.
   */
  /*
   * Der Mindestabstand ist nachgerechnet, nicht gerundet: bei 768 px Hoehe beginnt das
   * Statusband bei y 564, die eingeklappte Karte ist 46 px hoch. 196 px liessen sie 8 px
   * hineinragen — 215 px halten sie frei. Bei groesseren Hoehen greift ohnehin 24vh.
   */
  bottom: clamp(215px, 24vh, 240px);
  z-index: 118;
  width: min(330px, 42vw);
  max-height: min(62vh, 520px);
  overflow-y: auto;
  color: #cfe3f2;
  background: linear-gradient(180deg, rgba(16, 30, 41, .97), rgba(9, 17, 25, .97));
  border: 1px solid rgba(127, 208, 255, .5);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.ewk[hidden] { display: none; }

.ewk-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  min-height: 44px;                        /* mit dem Finger treffbar */
  cursor: pointer;
  background: rgba(32, 68, 92, .55);
  border-bottom: 1px solid rgba(127, 208, 255, .28);
}
.ewk--zu .ewk-kopf { border-bottom: none; }

/**
 * 049 §31/§34 — eingeklappt ist die Karte ein Chip, kein Balken.
 *
 * Vorher behielt sie auch zugeklappt ihre volle Breite (min(330px, 42vw)) und lag als
 * langer Riegel im Bild. Jetzt schrumpft sie auf ihren Inhalt — auf dem Tablet ist das
 * der Unterschied zwischen „stoert" und „faellt nicht auf".
 */
.ewk--zu {
  width: auto;
  max-width: min(300px, 60vw);
}
.ewk--zu .ewk-kopf { gap: 8px; padding-inline: 12px; }
.ewk-zeichen { font-size: .95rem; color: #9fd8f5; line-height: 1; }
.ewk--zu .ewk-titel { letter-spacing: .06em; text-transform: none; }
.ewk-kopf:focus-visible { outline: 2px solid #b6e6ff; outline-offset: -2px; }
.ewk-titel { font-size: .78rem; letter-spacing: .14em; color: #9fd8f5; }
.ewk-zaehler { font-size: .82rem; font-weight: 600; color: #eaf6ff; }

.ewk-liste { margin: 0; padding: 8px 12px 12px; list-style: none; }

.ewk-zeile {
  display: grid; grid-template-columns: 18px 1fr; gap: 4px 8px;
  padding: 5px 0;
  font-size: .92rem; line-height: 1.35;
  color: #9dbacd;
}
.ewk-marke { color: #6fb4d8; text-align: center; }
.ewk-text { align-self: center; }

.ewk-zeile--fertig { color: #7fae8c; }
.ewk-zeile--fertig .ewk-marke { color: #7fae8c; }

/* Der anstehende Schritt ist der einzige, der sich erklärt. */
.ewk-zeile--dran { color: #eaf6ff; }
.ewk-zeile--dran .ewk-marke { color: #ffc46b; }
.ewk-erklaerung {
  grid-column: 2; margin: 4px 0 6px;
  font-size: .86rem; line-height: 1.45; color: #a9c6d4;
}
.ewk-sprung {
  grid-column: 2; justify-self: start;
  min-height: 40px; min-width: 130px; padding: .4em 1em;
  font: inherit; font-size: .86rem; letter-spacing: .05em;
  color: #eaf6ff;
  background: rgba(32, 68, 92, .92);
  border: 1px solid rgba(127, 208, 255, .5);
  border-radius: 0; cursor: pointer;
}
.ewk-sprung:hover { background: rgba(46, 96, 126, .96); border-color: #b6e6ff; }
.ewk-sprung:focus-visible { outline: 2px solid #b6e6ff; outline-offset: 2px; }
.ewk-sprung--haupt { border-color: #7fd0ff; font-weight: 600; margin-top: 4px; }

@media (max-width: 900px) {
  .ewk { width: min(300px, 60vw); bottom: clamp(76px, 10vh, 96px); max-height: 54vh; }
}

/* ==========================================================================
 * §18 — Das Hinweisfenster (immer nur eines)
 * ========================================================================== */

.hhw {
  position: fixed; inset: 0; z-index: 145;
  display: flex; align-items: flex-end; justify-content: center;
  padding: clamp(14px, 3vh, 32px);
  /*
   * ⚠️ KEIN SPERRENDER HINTERGRUND.
   * Ein Tipp ist kein Modal. Er darf den Blick auf das lenken, worum es geht — aber nicht
   * verhindern, dass der Spieler dabei auf den Schirm schaut, den der Tipp erklärt.
   * `pointer-events: none` auf der Fläche, `auto` auf der Karte.
   */
  pointer-events: none;
  background: none;
  /*
   * ⚠️ DIE KARTE DARF DIE STATIONSLEISTE NICHT VERDECKEN — GEMESSEN, NICHT GERATEN.
   * Vorher lag sie darauf: bei 1600×900 waren 5 von 11 Stationsknöpfen nicht mehr
   * anklickbar, bei 1024×768 sogar 7 von 11 (gemessen mit `elementFromPoint` auf der
   * Mitte jedes Knopfes, nicht mit Rechteck-Überlappung). Der Stationstest scheiterte
   * genau daran: „hhw-karte … intercepts pointer events".
   *
   * `--stn-hoehe` setzt `strategy-shell.js` aus der ECHTEN Leistenhöhe (sie ändert sich,
   * weil die Leiste bei schmalen Fenstern umbricht). Der Rückfallwert 96px greift nur,
   * bevor die erste Messung da ist.
   */
  padding-bottom: calc(var(--stn-hoehe, 96px) + clamp(14px, 3vh, 32px));
}
.hhw[hidden] { display: none; }

.hhw-karte {
  pointer-events: auto;
  width: min(580px, 100%);
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
  color: #cfe3f2;
  background: linear-gradient(180deg, rgba(18, 32, 44, .98), rgba(10, 18, 26, .98));
  border: 1px solid #7fd0ff;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .55);
}

.hhw-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hhw-marke { font-size: .7rem; letter-spacing: .24em; color: #ffc46b; }
.hhw-kopf h3 { margin: 0; font-size: 1.05rem; letter-spacing: .04em; color: #eaf6ff; }
.hhw-text { margin: 0; font-size: .95rem; line-height: 1.5; color: #cfe0ea; }

.hhw-fuss { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.hhw-btn {
  min-height: 44px; min-width: 130px; padding: .45em 1.1em;
  font: inherit; letter-spacing: .05em;
  color: #cfe3f2;
  background: linear-gradient(180deg, rgba(16, 34, 44, .92), rgba(9, 18, 26, .92));
  border: 1px solid rgba(111, 180, 216, .4);
  border-radius: 0; cursor: pointer;
}
.hhw-btn:hover { background: linear-gradient(180deg, rgba(26, 50, 64, .96), rgba(14, 28, 38, .96)); border-color: rgba(150, 210, 240, .65); }
.hhw-btn:focus-visible { outline: 2px solid #b6e6ff; outline-offset: 2px; }
.hhw-btn--haupt { color: #eaf6ff; font-weight: 600; border-color: #7fd0ff; background: linear-gradient(180deg, rgba(32, 68, 92, .96), rgba(14, 30, 44, .96)); }
.hhw-btn--leise { color: #8ea6b6; min-width: 110px; }

@media (max-width: 700px) {
  .hhw-fuss { justify-content: stretch; }
  .hhw-btn { flex: 1 1 auto; }
}

/* ==========================================================================
 * 046 §24 — Der geborgene Gegenstand im Debriefing.
 * Bewusst als Reihe mit grossem Bild links: der Fund soll wiedererkennbar sein, wenn er
 * später auf der Forschungskarte auftaucht (§26).
 * ========================================================================== */

.debrief-fund .fund-reihe {
  display: flex; gap: 14px; align-items: flex-start;
}
.debrief-fund .fund-bild {
  flex: 0 0 auto;
  width: 128px; height: 128px;
  object-fit: cover;
  border: 1px solid rgba(127, 208, 255, .45);
  background: rgba(8, 16, 24, .8);
}
.debrief-fund .fund-text { flex: 1 1 auto; min-width: 0; }
.debrief-fund .fund-name {
  display: block; margin-bottom: 4px;
  font-size: 1.05rem; letter-spacing: .04em; color: #eaf6ff;
}
.debrief-fund .fund-kurz { margin: 0 0 6px; line-height: 1.5; color: #cfe0ea; }

@media (max-width: 700px) {
  .debrief-fund .fund-reihe { flex-direction: column; }
  .debrief-fund .fund-bild { width: 100%; height: 160px; }
}

/* ==========================================================================
 * 047 §25 — Rückfrage vor dem versehentlichen Missionsende
 *
 * Eigene Klassen, eigene Farben — wie bei `.ewa`/`.hhw` und aus demselben Grund: die
 * `kz-btn`-Regeln leben unter `#scene-base`, dieses Fenster hängt am `body`. Es würde dort
 * sonst als graue Systemschaltfläche erscheinen.
 * ========================================================================== */

.bzw {
  position: fixed; inset: 0; z-index: 160;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vh, 40px);
  background: rgba(4, 8, 12, .82);
}

.bzw-karte {
  width: min(560px, 100%);
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px;
  color: #cfe3f2;
  background: linear-gradient(180deg, rgba(20, 30, 40, .99), rgba(10, 16, 24, .99));
  border: 1px solid #ffc46b;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}

.bzw-marke { font-size: .72rem; letter-spacing: .24em; color: #ffc46b; }
.bzw-karte h3 { margin: 0; font-size: 1.15rem; letter-spacing: .04em; color: #eaf6ff; }
.bzw-text { margin: 0; font-size: .98rem; line-height: 1.5; color: #cfe0ea; }

.bzw-fuss { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

.bzw-btn {
  /* 44 px Zielgrösse — dieses Fenster erscheint mitten im Gefecht, auch auf dem Tablet. */
  min-height: 48px; min-width: 170px; padding: .5em 1.2em;
  font: inherit; letter-spacing: .04em;
  color: #cfe3f2;
  background: linear-gradient(180deg, rgba(16, 34, 44, .92), rgba(9, 18, 26, .92));
  border: 1px solid rgba(111, 180, 216, .45);
  border-radius: 0; cursor: pointer;
}
.bzw-btn:hover { border-color: rgba(150, 210, 240, .7); }
.bzw-btn:focus-visible { outline: 2px solid #b6e6ff; outline-offset: 2px; }
.bzw-btn--haupt {
  color: #1a1206; font-weight: 600;
  background: linear-gradient(180deg, #ffd88f, #e8a944);
  border-color: #ffc46b;
}