/*
 * 044 §17/§37 — SCHWIERIGKEITSAUSWAHL.
 *
 * Optik der übrigen Kellerterminal-Oberfläche: dunkler Grund, kühles Blau, dünne Rahmen,
 * Versalien für Kennungen. Bewusst KEINE Standard-Formularoptik — die Auswahl ist ein
 * Terminalschirm, kein Webformular.
 *
 * ⚠️ TABLET (1024×768) IST DER ENGERE FALL, NICHT DER AUSNAHMEFALL.
 * Die Karten stehen deshalb in einem Raster, das ab 900 px Breite untereinander umbricht,
 * und die Berührungsziele sind ganzflächig — nicht nur ein kleiner Punkt am Rand.
 */

.diff-screen {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vh, 26px);
  padding: clamp(16px, 3vh, 40px);
  /**
   * 049 §21/§22 — DIE AUSWAHL STEHT JETZT IN EINEM RAUM.
   *
   * ⚠️ NICHTS NEU ERZEUGT. §22 beschreibt „duestere Kellerzentrale / taktischer
   * Operationsraum, Oberpfaelzer Widerstandsbasis, subtile Karten-/Monitorbeleuchtung,
   * blau-graue Dunkelpalette, keine Menschen, kein Text". Genau dieses Bild liegt seit
   * Langem im Projekt: `assets/base/stations/lagezentrum.webp`, die Kulisse der
   * Lagestation. Eine ComfyUI-Runde haette dasselbe Motiv ein zweites Mal erzeugt.
   *
   * ⚠️ DREI LAGEN, UND DIE REIHENFOLGE IST DER GANZE TRICK.
   * Das Bild ist in der MITTE am hellsten (Kartenschirm und Konsole, gemessen: mittlere
   * Helligkeit 70 bei einer Streuung von 49) — genau dort, wo die beiden Karten stehen.
   * §22 verlangt aber „Mitte ruhig und dunkel". Deshalb liegt ueber dem Bild ein
   * elliptischer Schleier, der zur Mitte hin dicht und zu den Raendern hin durchlaessig
   * ist. Die Details bleiben da, wo sie erlaubt sind: aussen und im oberen Drittel.
   */
  background:
    radial-gradient(58% 46% at 50% 52%, rgba(5, 9, 14, 0.94) 0%, rgba(5, 9, 14, 0.86) 55%, rgba(5, 9, 14, 0.42) 100%),
    linear-gradient(rgba(9, 16, 24, 0.55), rgba(5, 9, 14, 0.82)),
    url("../assets/base/stations/lagezentrum.webp") center/cover no-repeat,
    #05090d;
  overflow-y: auto;
  overflow-x: hidden;                 /* §37: niemals waagerecht scrollen */
}
.diff-screen[hidden] { display: none; }

.diff-kopf { text-align: center; max-width: 62ch; }
.diff-tag {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: #6fb4d8;
  opacity: 0.9;
}
.diff-kopf h2 {
  margin: 0.25em 0 0.15em;
  font-size: clamp(1.5rem, 3.4vh, 2.3rem);
  letter-spacing: 0.06em;
  color: #dff0fb;
}
.diff-hinweis {
  margin: 0;
  font-size: 0.92rem;
  color: #8aa8bd;
}

.diff-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: clamp(12px, 2vw, 26px);
  width: min(1080px, 100%);
}
@media (max-width: 900px) {
  .diff-karten { grid-template-columns: 1fr; }
}

.diff-card {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  text-align: left;
  padding: clamp(14px, 2.2vh, 24px);
  min-height: 96px;                   /* großzügiges Berührungsziel */
  border: 1px solid rgba(111, 180, 216, 0.32);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 34, 48, 0.9), rgba(10, 18, 26, 0.9));
  color: #cfe3f2;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.diff-card:hover { border-color: rgba(150, 210, 240, 0.6); }
.diff-card:focus-visible { outline: 2px solid #7fd0ff; outline-offset: 2px; }

/* Die Auswahl muss ohne Farbsehen erkennbar sein: Rahmen, Grund UND Marke ändern sich. */
.diff-card--aktiv {
  border-color: #7fd0ff;
  background: linear-gradient(180deg, rgba(30, 62, 84, 0.95), rgba(14, 28, 40, 0.95));
  box-shadow: inset 0 0 0 1px rgba(127, 208, 255, 0.25);
}

.diff-marke { font-size: 1.1rem; color: #7fd0ff; line-height: 1; }
.diff-name {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vh, 1.5rem);
  letter-spacing: 0.12em;
  color: #eaf6ff;
}
.diff-unter {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #86c8a0;
}
.diff-text { margin: 0.2em 0 0; font-size: 0.95rem; line-height: 1.45; color: #b6cddd; }

.diff-punkte {
  margin: 0.3em 0 0;
  padding-left: 1.15em;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #9dbacd;
}
.diff-punkte li { margin: 0.12em 0; }

.diff-fuss {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
/*
 * 045 §5 — DIE FUSSKNÖPFE WAREN UNGESTALTET.
 *
 * Sie tragen `kz-btn`, wie überall im Spiel. Die Regeln dafür stehen aber unter
 * `#scene-base .kz-btn` (kellerzentrale.css), und dieser Schirm liegt AUSSERHALB von
 * `#scene-base`. Ergebnis: Chromes graue Standardknöpfe in einem petrol-cyanen Terminal.
 *
 * Gemessen: Hintergrund `rgb(107,107,107)`, Kontrast 5.33 — und beide Knöpfe exakt gleich,
 * obwohl einer nur zurückgeht und der andere die Kampagne startet. Die Gewichtung fehlte
 * vollständig. Das ist der zweite Bildschirm, den ein neuer Spieler überhaupt sieht.
 *
 * Dieselbe Ursache wie beim Zeitvorlauf-Fenster (siehe css/startkarte.css) — wer künftig
 * eine Oberfläche ausserhalb von `#scene-base` baut, muss ihre Knöpfe mitgestalten.
 */
.diff-fuss .kz-btn {
  min-width: 150px;
  min-height: 44px;
  padding: .55em 1.4em;
  font: inherit;
  font-weight: 500;
  letter-spacing: .08em;
  color: #cfe3f2;
  background: linear-gradient(180deg, rgba(16, 34, 44, .92), rgba(9, 18, 26, .92));
  border: 1px solid rgba(111, 180, 216, .38);
  border-radius: 0;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
}
.diff-fuss .kz-btn:hover {
  background: linear-gradient(180deg, rgba(26, 50, 64, .96), rgba(14, 28, 38, .96));
  border-color: rgba(150, 210, 240, .6);
}
.diff-fuss .kz-btn:focus-visible { outline: 2px solid #b6e6ff; outline-offset: 2px; }

/* „Kampagne starten“ ist die Handlung des Schirms — „Zurück“ bleibt ruhig. */
.diff-fuss .kz-btn--primary {
  color: #eaf6ff;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(32, 68, 92, .96), rgba(14, 30, 44, .96));
  border-color: #7fd0ff;
}
.diff-fuss .kz-btn--primary:hover {
  background: linear-gradient(180deg, rgba(46, 96, 126, .98), rgba(20, 42, 60, .98));
  border-color: #b6e6ff;
}