/* Cold Start - Lobby (index.html, login.html)
 *
 * ENTRUEMPELT 2026-10-13. Hier stand bis dahin zuerst der alte "Graukasten":
 * ein Hobbyraum aus SVG-Flaechen (Waende, Lampe, Tuer, Regal, Kisten) mit
 * seinen Klickflaechen. Dazu die alte Kopfzeile mit Abzeichen und
 * Kontokasten. Beides ist seit dem 25.09.2026 ersetzt - "der Hobbyraum
 * entfaellt" (dossier.js) - und das zugehoerige assets/lobby.js gibt es
 * nicht mehr. Die 140 Zeilen haben seitdem nur noch mitgeladen.
 *
 * Was hier steht, ist die Lobby als Akte auf dem Gefechtstisch.
 */

.lobby-page { background: #14110d; }

/* ==========================================================================
   Lobby als Akte auf dem Gefechtstisch (index.html, ab 2026-09-25)

   Der Hintergrund ist dasselbe Tischbild wie im Gefecht, leergeraeumt, mit
   der Akte "Operation Cold Start" in der Mitte (tools/table/render_lobby.py).
   Das Register liegt als echtes Menue darueber - getippt, dunkle Tinte auf
   Papier, keine Knoepfe. Wo es genau liegt, rechnet assets/dossier.js aus
   dem Bildausschnitt aus; hier steht nur, wie es aussieht.
   ========================================================================== */

.akte-page { background: #14110d; }

.akte-main {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Der Tisch, GANZ.
   ------------------------------------------------------------------------
   Bastian, 2026-10-08: "in dieser Aufloesung funktioniert der Hintergrund im
   Gefecht sehr gut, aber in der Lobby nicht". Der Unterschied lag nie am
   Bild, sondern am RAND. Im Gefecht umfasst die viewBox nur das Brett, das
   Bild hat also nach allen Seiten Reserve; wird der Schirm breiter, wandert
   diese Reserve ins Bild. In der Lobby war das Bild genau so gross wie die
   sichtbare Flaeche - mit `cover` fielen bei 2,4:1 ganze 34 % der Hoehe weg.

   Die erste Antwort darauf war eine Notloesung: ab 2:1 `contain`, und links
   und rechts der auf 1000 % gedehnte Bildrand als Fuellung. Das brachte
   drei Sonderfaelle mit sich, die zusammen stimmen mussten - die Grenze
   `min-aspect-ratio: 2/1` hier UND in dossier.js, dazu zwei
   Pseudo-Elemente mit eigenem Stapelkontext. Eine davon war schon einmal
   auseinandergelaufen.

   SEIT 2026-10-13 ist das Bild selbst breiter (1824 x 760 = 2,4:1, siehe
   LOBBY_FRAME in tools/table/render_lobby.py). Bastian: "Rechnen wir das
   Bild viel breiter?" - ja, und damit ist `cover` wieder fuer jede
   Fenstergroesse richtig: bis 2,4:1 ist echter Tisch da, darueber hinaus
   beschneidet es die Hoehe wie eh und je, aber erst ab einem Format, das
   kaum vorkommt. Gedehnte Maserung braucht es nirgends mehr.

   Was dadurch WEGGEFALLEN ist: .akte-main::before/::after (die Fuellung),
   die `isolation`, der @media-Block und die doppelte Grenze in dossier.js.
   Vier gekoppelte Stellen zu einer - das ist der eigentliche Gewinn. */
.akte-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* Sanfter Abfall zu den Raendern - sonst konkurriert die helle Tischplatte
   mit der Kopfzeile. */
.akte-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(12, 8, 4, .40), rgba(12, 8, 4, 0) 18%),
    radial-gradient(130% 90% at 50% 48%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .34) 100%);
}

/* Das Menue steht mittig auf der Akte, aber in der normalen Oberflaeche des
   Spiels: dieselbe Tafel und dieselben Knoepfe wie in den Einblendungen
   (Bastian, 2026-09-25 - getippt auf dem Papier war zu verspielt). */
.akte-menu {
  position: absolute;
  left: 50%;
  /* Senkrecht mittig (Bastian, 2026-09-25). Die Tafel legt sich damit ueber
     den Kopf der Mappe - das ist gewollt, die Mappe ist nur Deko.
     Weiter oben (25 %) probiert und verworfen (2026-09-27). */
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(292px, 62vw);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: linear-gradient(rgba(33, 26, 19, .93), rgba(21, 16, 11, .95));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

/* Hauptmenue: die Knoepfe duerfen groesser sein als im Gefecht, hier steht
   sonst nichts. .btn-block setzt bereits Breite und Abstand. */
/* Sechs Eintraege: etwas kompakter als zuerst, sonst verdeckt die Tafel den
   Kopf der Mappe. .btn-block setzt bereits Breite und Abstand. */
.akte-menu .btn {
  font-size: 14px;
  padding: 10px 14px;
  letter-spacing: .3px;
}


/* Niedrigere Fenster: sechs Eintraege plus Kopfzeile werden sonst eng.
   Die senkrechte Mitte bleibt, nur die Tafel selbst wird kompakter. */
@media (max-height: 860px) {
  .akte-menu { padding: 14px; gap: 1px; }
  .akte-menu .btn { padding: 8px 12px; font-size: 13.5px; }
}

/* Ebene fuer die ausgelosten Miniaturen. Liegt deckungsgleich ueber dem
   Hintergrundbild (gleicher Bildausschnitt, slice = cover) und faengt keine
   Klicks ab. */
.akte-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   Anmeldung (login.html)

   Steht auf demselben Tisch wie die Lobby und benutzt dieselbe Tafel wie das
   Hauptmenue - nur mit Eingabefeldern darin.
   ========================================================================== */

.auth-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 86vw);
  padding: 22px 22px 18px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: linear-gradient(rgba(33, 26, 19, .95), rgba(21, 16, 11, .97));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}

.auth-hidden { display: none; }

/* Beschriftung ueber dem Feld, nicht daneben: bei einer schmalen Tafel
   bleibt so alles in einer Spalte und nichts rutscht. */
.field { display: block; margin-bottom: 12px; }
.field > span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--ink-dim);
  letter-spacing: .3px;
}

.field input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--panel-edge);
  border-radius: 5px;
  background: rgba(0, 0, 0, .35);
  color: var(--ink);
  font: 14px/1.3 var(--font);
}
.field input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(0, 0, 0, .5);
}
/* Erst nach einer Eingabe bemaengeln, nicht schon beim Anzeigen:
   :invalid allein faerbt jedes leere Pflichtfeld sofort rot. */
.field input:user-invalid { border-color: var(--foe-d); }

.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  font-style: normal;
  color: var(--ink-mute);
}

/* Meldezeile: nimmt auch leer keinen Platz weg, damit die Tafel beim
   Einblenden nicht springt. */
.auth-msg {
  min-height: 2.6em;
  margin: 2px 0 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-dim);
}
.auth-msg.is-bad  { color: #e0a08c; }
.auth-msg.is-good { color: #a8c98f; }

.auth-alt {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* Knopf, der wie ein Verweis aussieht - es ist einer im Sinn der Bedienung,
   aber kein Ziel, also darf es kein <a> sein. */
.linky {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linky:hover { color: var(--ink); }

/* Ohne Knoepfe in der Kopfzeile (Meldungen/Abmelden entfernt, Bastian
   2026-09-25) bliebe sie niedriger als im Gefecht - Hoehe festhalten. */
/* Die Mindesthoehe steht seit dem 2026-10-03 in style.css: die Kopfzeile ist
   auf beiden Seiten dieselbe, also gilt sie auch auf beiden. */

/* Schriftzug senkrecht genau mittig (Bastian, 2026-09-25). In der Lobby
   steht kein Seitentitel daneben, die Grundlinien-Ausrichtung aus
   style.css braucht es hier nicht. */
.lobby-page .brand,
.lobby-page .brand-text { align-self: stretch; align-items: center; }

/* Kartendeck steht oben im Menue und traegt ein Kartensymbol - der
   wichtigste Weg vor jedem Gefecht (Bastian, 2026-09-25). */
.akte-menu .mi-deck { display: flex; align-items: center; justify-content: center; gap: 9px; }
/* Das Zeichen selbst steht seit dem 2026-10-03 in style.css - es haengt
   jetzt auch im Burgermenue des Gefechts, und das laedt lobby.css nicht. */

/* Multiplayer: wie viele Spieler gerade angemeldet sind, schlicht in
   Klammern - "(1)", "(20)", "(2k)" (Bastian, 2026-09-25; dossier.js). */
.mi-online { font-weight: 400; color: var(--ink-mute); }
.mi-online[hidden] { display: none; }

/* ------------------------------------------ Lagemeldung (assets/lage.js)

   Einklinker oben in der Mitte, haengt aus der Kopfzeile wie die Lageleiste
   im Gefecht (Bastian, 2026-09-27). Laufendes Gefecht mit "Zurueck zum
   Spiel", Einladungen und Mehrspieler-Partien - nicht mehr im Chat. */
.lage {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  min-width: 460px; max-width: min(640px, 60vw);
  padding: 10px 50px 16px;
  z-index: 2;
}
.lage[hidden] { display: none; }
.lage-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55));
}
.lage-fill { fill: #1c150d; }
.lage-edge { fill: none; stroke: var(--gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lage-rows { position: relative; display: flex; flex-direction: column; gap: 6px; }
.lage-rows > div { display: flex; flex-direction: column; gap: 6px; }
.lage-rows > div:empty { display: none; }
.lage .ch-mp-row {
  background: none !important; border-left: 0; padding: 0;
  font-size: 13px; flex-wrap: nowrap;
}
.lage .ch-mp-row > span:first-child { min-width: 0; }
.lage .ch-mp-row.is-declined, .lage .ch-mp-row.is-cancelled, .lage .ch-mp-row.is-expired { color: var(--ink-mute); background: none; }
.lage .ch-mp-row + .ch-mp-row, #lage-solo:not(:empty) + #lage-mp:not(:empty) { border-top: 1px solid var(--panel-edge); padding-top: 6px; }
.lage .btn.ch-mini { white-space: nowrap; }
.lage-err { position: relative; margin: 0; font-size: 12px; color: var(--foe); }
/* Ueberschrift je Gruppe - zugleich die Hoehe, mit der die Platte aus der
   Kopfzeile heraushaengt */
#lage-solo::before, #lage-mp::before {
  display: block; margin-bottom: 1px;
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold); opacity: .8; font-weight: 600;
}
/* Die Beschriftung steht im Markup, nicht hier (17.10.2026): CSS kennt
   keinen Katalog, und ein content: 'Laufendes Gefecht' bleibt deutsch,
   auch wenn ringsum alles englisch ist. attr() holt sie aus data-label,
   das assets/lage.js setzt. */
#lage-solo::before, #lage-mp::before { content: attr(data-label); }
.lage-rows > div { gap: 4px; }

/* Das Spielerfenster (.pl-*) und der Gold-Menuepunkt (.mi-gold) standen
   hier bis zum 13.10.2026. Beide sind ohne Oberflaeche: die Datei
   assets/players.js, auf die der alte Kommentar verwies, gibt es nicht,
   und mi-gold kommt in keiner Seite und keinem Skript vor. */