/*
 * TITELBILDSCHIRM (Restliste Punkt 7, ersetzt die 033-Fassung).
 *
 * Der erste Bildschirm zeigte einen Farbverlauf und eine Knopfliste. Sauber, aber austauschbar —
 * er sagte nichts darüber, wo dieses Spiel spielt. Jetzt steht der Spieler im Bunker unter dem
 * Gasthof, und die Bedienung ist eine Konsole an dessen Wand.
 *
 * ⚠️ DER SCHRIFTZUG IST TEXT (siehe title-screen.js), das Bild liefert nur den Raum.
 *
 * ⚠️ LESBARKEIT SCHLÄGT STIMMUNG.
 * Über einem fotografischen Hintergrund ist Text schnell unlesbar. Deshalb liegen ZWEI Schichten
 * dazwischen: ein dunkler Verlauf über dem ganzen Bild und ein eigener, kräftig abgedunkelter
 * Grund hinter dem Bedienfeld. Verlassen wird sich nicht auf die Bildhelligkeit — die kann sich
 * mit jedem neuen Rendern ändern.
 *
 * Tablet: alle Ziele bleiben mindestens 52 px hoch.
 */

.titel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vh, 34px);
  padding: clamp(18px, 3.5vh, 48px) clamp(16px, 5vw, 72px);
  overflow-y: auto;
  background: #05080b;
  color: #cfe0e6;
  text-align: center;
}

/* ---------------------------------------------------------------- Hintergrund */
.titel-grund {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 42%;
  /* Leicht entsättigt und minimal weichgezeichnet: der Raum soll wirken, nicht ablenken. */
  filter: saturate(.82) brightness(.62) blur(1.5px);
  transform: scale(1.03);          /* fängt den Rand ab, den der Weichzeichner aufhellt */
  z-index: 0;
}

/* Verlauf + feine Zeilenstruktur — die Andeutung eines Röhrenschirms, kein Effekt. */
.titel-schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 85% at 50% 38%, rgba(5,8,11,.28) 0%, rgba(5,8,11,.78) 62%, #05080b 100%);
}

.titel > .titel-kopf,
.titel > .titel-feld { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- Schriftzug */
.titel-kopf { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.titel-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.titel-logo-zeile {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.6vw, 22px);
  line-height: 1;
}

/* „OVI" trägt das Gewicht — kurz, warm, der Ort. */
.titel-logo-ovi {
  font-size: clamp(40px, 7.4vw, 88px);
  font-weight: 700;
  letter-spacing: .06em;
  color: #d9a441;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 34px rgba(217,164,65,.22);
}

/* „INVASION" ist das, was hereinkommt: kühl, gesperrt, hohl. */
.titel-logo-inv {
  font-size: clamp(30px, 5.6vw, 66px);
  font-weight: 300;
  letter-spacing: .3em;
  /* Das letzte Sperrzeichen schiebt den Text sonst optisch nach links. */
  margin-right: -.3em;
  color: #dcecf1;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 30px rgba(95,179,201,.28);
}

.titel-logo-strich {
  width: clamp(160px, 26vw, 380px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #5fb3c9 22%, #5fb3c9 78%, transparent);
  opacity: .55;
}

.titel-unter {
  margin: 0;
  font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #93aab5;
}

.titel-marke {
  margin: 0;
  padding: 2px 12px;
  font-size: clamp(9px, .95vw, 11px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #0d141a;
  background: #d9a441;
  border-radius: 1px;
}

/* ---------------------------------------------------------------- Konsole */
.titel-feld {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(12,20,26,.93) 0%, rgba(8,13,18,.96) 100%);
  border: 1px solid #2c4250;
  border-radius: 2px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(95,179,201,.06);
}

.titel-feld-band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #22333f;
  background: rgba(95,179,201,.05);
}
.titel-feld-kennung {
  font-size: clamp(8px, .85vw, 10px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #6d8794;
}
/* Betriebsanzeige. Ruhig — nichts auf diesem Bildschirm blinkt. */
.titel-feld-punkt {
  margin-left: auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: #6fb6c9;
  box-shadow: 0 0 8px rgba(111,182,201,.7);
}

.titel-feld-fuss {
  padding: 9px 14px;
  border-top: 1px solid #22333f;
  font-size: clamp(9px, .95vw, 11px);
  color: #5f7885;
  text-align: left;
}

/* ---------------------------------------------------------------- Auswahl */
.titel-auswahl {
  display: flex;
  flex-direction: column;
  padding: 6px;
  gap: 2px;
}

.titel-knopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 52px;                 /* Tablet-Ziel, nicht unterschreiten */
  padding: 9px 14px;
  text-align: left;
  font: inherit;
  color: #c3d6de;
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid #24333d;
  border-radius: 1px;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
@media (hover: hover) {
  .titel-knopf:hover { background: rgba(95,179,201,.07); border-left-color: #4b8fa3; color: #e8f1f4; }
}
.titel-knopf:focus-visible { outline: 2px solid #5fb3c9; outline-offset: -2px; }

.titel-knopf-text { font-size: clamp(14px, 1.5vw, 17px); letter-spacing: .04em; }
.titel-knopf-unter { font-size: clamp(10px, 1vw, 12px); color: #6d8794; }

/* Der eine Knopf, den ein neuer Spieler zuerst finden soll. */
.titel-knopf--haupt {
  background: linear-gradient(90deg, rgba(217,164,65,.14) 0%, rgba(217,164,65,.03) 100%);
  border-left-color: #d9a441;
}
.titel-knopf--haupt .titel-knopf-text { color: #f0d9a8; font-weight: 600; }
@media (hover: hover) {
  .titel-knopf--haupt:hover { background: rgba(217,164,65,.2); border-left-color: #f0d9a8; }
}

/* Die einzige Handlung hier, die etwas zerstört — abgesetzt und gedämpft rot. */
.titel-knopf--warnung { margin-top: 8px; border-top: 1px solid #22333f; border-left-color: #6b3330; }
.titel-knopf--warnung .titel-knopf-text { color: #d79b96; }
@media (hover: hover) {
  .titel-knopf--warnung:hover { background: rgba(180,80,72,.1); border-left-color: #b45048; }
}

.titel-knopf--dev { border-left-color: #4a5a2c; }
.titel-knopf--dev .titel-knopf-text { color: #9fb37a; font-size: .85em; }

.titel-knopf--zurueck { margin-top: 10px; border-left-color: #4b8fa3; }

/* ---------------------------------------------------------------- Rückfrage */
.titel-ruecksicher {
  margin: 8px 6px 2px;
  padding: 12px;
  background: rgba(120,48,42,.14);
  border: 1px solid #6b3330;
  border-radius: 2px;
  text-align: left;
}
.titel-ruecktext { margin: 0 0 10px; font-size: clamp(11px, 1.1vw, 13px); color: #e2c9c6; }
.titel-rueckreihe { display: flex; gap: 8px; flex-wrap: wrap; }
.titel-rueckreihe .titel-knopf { flex: 1 1 auto; min-width: 150px; align-items: center; }

/* ---------------------------------------------------------------- Unterseiten */
.titel-seite { padding: 14px 16px 6px; text-align: left; }
.titel-seite-titel {
  margin: 0 0 10px;
  font-size: clamp(15px, 1.7vw, 19px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d9a441;
}
.titel-seite-text {
  margin: 0 0 9px;
  font-size: clamp(11px, 1.15vw, 13.5px);
  line-height: 1.55;
  color: #b3c6ce;
}

/* ---------------------------------------------------------------- Enge Schirme */
@media (max-height: 620px) {
  .titel { justify-content: flex-start; }
  .titel-logo-ovi { font-size: clamp(30px, 5.4vw, 52px); }
  .titel-logo-inv { font-size: clamp(22px, 4vw, 40px); }
  .titel-knopf { min-height: 48px; }
}


/*
 * 045 §4 — DAS ALTMENUE WAR NIE AUSGEBLENDET, NUR UEBERDECKT.
 *
 * `index.html` beschreibt `.menu-altbedienung` als „ausserhalb der Sicht". Dafuer gab es
 * jedoch keine einzige Regel — der Block lag bei y=0 und war lediglich vom Titelbild
 * verdeckt. Solange das Titelbild den ganzen Schirm fuellt, faellt das nicht auf; sobald es
 * kleiner wird, kuerzer laedt oder ein Fehler es gar nicht erst zeichnet, steht ein
 * Entwicklermenue mitten im Hauptmenue.
 *
 * Die Knoepfe muessen im Baum BLEIBEN (app.js haengt seine Verdrahtung daran, der
 * Titelbildschirm loest sie per `.click()` aus). Deshalb kein `display: none`, sondern die
 * uebliche Ausblendung fuer Dinge, die es geben muss, aber niemand sehen soll.
 */
.menu-altbedienung {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;   /* kein versehentlicher Klick, falls doch etwas durchscheint */
}

/* ==========================================================================
 * 047 §3 — DAS HAUPTMENÜ ALS SPIELMENÜ
 *
 * ⚠️ WAS BEANSTANDET WURDE, UND ZU RECHT.
 * Der Schirm hatte eine gute Kulisse, aber darüber lag ein Textschriftzug und eine
 * Zeilenliste — optisch ein Einstellungsdialog. Der Auftrag verlangt, dass die Seite
 * erkennbar zu Intro, Trailer und Kellerzentrale gehört.
 *
 * Drei Eingriffe, mehr nicht:
 *   1. das ECHTE Logo statt des Schriftzugs (title-screen.js),
 *   2. eine Rangfolge in der Liste — „Neues Spiel" ist der Einstieg, nicht ein Eintrag
 *      unter sechs gleich aussehenden,
 *   3. dieselbe Kantenform wie die HUD-Rahmen im Spiel, damit die Seite zur Kellerzentrale
 *      gehört statt neben ihr zu stehen.
 *
 * Kein Effektfeuerwerk: die Kulisse trägt die Stimmung schon, sie braucht keinen Wettbewerb.
 * ========================================================================== */

.titel-logo-bild {
  display: block;
  width: min(760px, 72vw);
  max-height: 34vh;
  height: auto;
  object-fit: contain;
  /*
   * Der grüne Schein des Logos ist kräftig. Ein leichter Schlagschatten setzt ihn vor die
   * Kulisse, ohne ihn zu verstärken — auf hellen Stellen des Hintergrunds verlöre er sonst
   * seine Kante.
   */
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .75));
}

/* Die Zeile trägt jetzt ein Bild statt zwei Textstücke. */
.titel-logo-zeile { display: flex; justify-content: center; align-items: center; }

/*
 * Der Trennstrich unter dem Schriftzug war für zwei Textstücke gedacht. Unter einem Logo mit
 * eigenem Unterschwung wirkt er wie ein zweiter Rahmen — er entfällt, wenn das Bild da ist.
 */
.titel-logo:has(.titel-logo-bild) .titel-logo-strich { display: none; }

.titel-unter {
  letter-spacing: .32em;
  font-size: clamp(.72rem, 1vw, .86rem);
  color: #9fb8c6;
}

/* ---------------------------------------------------------------- Menüfeld */

/*
 * Dieselbe abgeschrägte Ecke wie die HUD-Rahmen der Kellerzentrale (`--cut: 14px` in
 * kellerzentrale.css). Damit sieht das Menü aus wie ein Gerät in derselben Anlage.
 */
.titel-feld {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 14px);
  border-color: rgba(127, 208, 255, .34);
  background: linear-gradient(180deg, rgba(12, 22, 31, .93), rgba(7, 13, 19, .95));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}

.titel-feld-kennung { letter-spacing: .22em; color: #7fd0ff; }

/* ---------------------------------------------------------------- Knöpfe */

.titel-knopf {
  min-height: 58px;                 /* war 52 — 58 trifft sich mit dem Finger besser */
  padding: 11px 18px;
  border-left: 3px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.titel-knopf:hover { background: rgba(79, 214, 255, .07); border-left-color: rgba(127, 208, 255, .5); }
.titel-knopf:focus-visible { outline: 2px solid #b6e6ff; outline-offset: -2px; }

.titel-knopf-text { font-size: clamp(1rem, 1.25vw, 1.18rem); letter-spacing: .04em; }

/*
 * ⚠️ DER EINSTIEG SIEHT AUS WIE DER EINSTIEG.
 * Vorher hatten alle sechs Einträge dieselbe Höhe, dieselbe Schrift und denselben Ton — man
 * musste lesen, um den Anfang zu finden. „Neues Spiel" (bzw. „Fortsetzen", wenn es einen
 * Spielstand gibt) ist jetzt höher, heller und trägt links eine kräftige Kante.
 */
.titel-knopf--haupt {
  min-height: 74px;
  border-left-color: #ffc46b;
  background: linear-gradient(90deg, rgba(255, 196, 107, .14), rgba(255, 196, 107, .03) 60%);
}
.titel-knopf--haupt .titel-knopf-text {
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffe0ad;
}
.titel-knopf--haupt:hover {
  background: linear-gradient(90deg, rgba(255, 196, 107, .24), rgba(255, 196, 107, .06) 60%);
  border-left-color: #ffd88f;
}

/* Zurücksetzen bleibt zurückhaltend — es löscht Spielstände. */
.titel-knopf--warnung { border-left-color: rgba(200, 90, 90, .55); }
.titel-knopf--warnung:hover { background: rgba(200, 90, 90, .1); }

@media (max-width: 820px) {
  .titel-logo-bild { width: min(560px, 86vw); max-height: 26vh; }
  .titel-knopf--haupt { min-height: 64px; }
}

/* ---------- 050 §26: Buildmarke auf dem Titelbildschirm ---------- */

/**
 * Unten links, klein, gedaempft. Sie soll auffindbar sein, wenn man sie sucht, und
 * uebersehbar, wenn man spielt — deshalb kein Kasten, kein Rahmen, keine Farbe.
 * `pointer-events: none`, damit sie nie einen Klick abfaengt.
 */
.titel-buildmarke {
  position: absolute;
  left: 14px;
  bottom: calc(10px + var(--safe-b, 0px));
  z-index: 3;
  font-size: 11px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: rgba(180, 186, 196, .34);
  pointer-events: none;
  user-select: text;
}