/* Cold Start - Dialog "Neues Spiel" in der Lobby (assets/newgame.js).

   Aufgehuebscht am 2026-09-29 (Bastian): der Mittelteil sah zu technisch aus.
   Die Fraktion traegt jetzt ihr Zeichen und ihre Doktrin, die Kompanie eine
   Punkteleiste statt eines Bruchs, und der Gegner ist vom Fussnotentext zur
   eigentlichen Wahl geworden - sechs Generaele in drei Schwierigkeitsbaendern. */

/* 1120 statt 880 seit dem 2026-10-07: die Kartenvorschau bekommt eine
   eigene dritte Spalte (Bastian: "die Karte sollte natuerlich recht gross
   sein"). Ohne die Breite waere der Dialog stattdessen rund 230 px hoeher
   geworden - und Hoehe ist auf einem Notebook das knappere Gut. */
.ng-card {
  width: min(1120px, 95vw); max-width: 1120px; text-align: left;
  /* Sicherheitsnetz: .overlay-card hat overflow: hidden, und .overlay rollt
     nicht. Ein Fenster, das hoeher ist als der Schirm, waere also nicht nur
     unschoen, sondern ABGESCHNITTEN - der Knopf "Gefecht starten" laege
     unerreichbar darunter. Seit die Karte dazugekommen ist, kann das auf
     einem flachen Schirm passieren. Waagerecht bleibt es bei hidden: das
     Sechseckraster oben ragt mit negativem Rand hinaus. */
  max-height: 92vh;
  /* Bis 29.10.2026 stand hier danach noch "overflow: hidden" - das hob die
     Zeile oben wieder auf, und auf einem Tablet quer (rund 720 px hoch) lag
     "Gefecht starten" unerreichbar unter dem Rand (Bastian: "hier fehlt der
     Button"). Jetzt: waagerecht abgeschnitten, senkrecht rollbar. */
  position: relative; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain;
}
/* Zwei Spalten statt einer langen Liste (Bastian, 2026-09-29): links die
   eigene Seite und die Kompanie, rechts der Gegner. Das spart rund 300 px
   Hoehe und kostet 260 px Breite - auf einem Schirm ist Breite reichlicher
   vorhanden als Hoehe. */
/* DREI Spalten (2026-10-07): eigene Seite, Gegner, Karte. Die beiden linken
   sind fest - sie tragen Listen, die von sich aus nicht breiter werden -,
   die Karte nimmt den Rest und damit rund 40 % des Fensters.

   Im Mehrspieler (ist-zwei) gibt es weder Gegner noch Karte: dort bleibt es
   bei einer Spalte, und die Karte waere ohnehin die Sache des Servers. */
.ng-spalten {
  display: grid; grid-template-columns: 300px 300px minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.ng-spalten.ist-zwei { grid-template-columns: minmax(0, 1fr); }
.ng-links, .ng-mitte, .ng-rechts { min-width: 0; }
.ng-links > h3:first-child, .ng-mitte > h3:first-child,
.ng-rechts > h3:first-child { margin-top: 16px; }
/* Das Sechseckraster kommt jetzt fuer alle groesseren Fenster aus style.css
   (.overlay-card::before) - hier steht es nicht mehr doppelt. */
.ng-card h3 {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 9px;
  font: 700 11px/1 var(--font); letter-spacing: 2.6px; text-transform: uppercase; color: #8a7d63;
}
.ng-card h3::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, #3d3322, rgba(61, 51, 34, 0));
}

/* --------------------------------------------------- Der eigene General
   Er spricht oben zur gewaehlten Kompanie. Vorrat: assets/general.js. */
.ng-general { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.ng-bild { flex: none; width: 52px; }
.ng-bild svg { display: block; width: 100%; height: auto; }
.ng-wort { flex: 1; min-width: 0; }
.ng-rede {
  margin: 0 !important; padding-left: 14px; position: relative;
  font: italic 400 14px/1.5 var(--font) !important; color: #b3a992 !important;
}
.ng-rede b { font-weight: 600; color: #c8bda2; }
.ng-rede::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px;
  background: linear-gradient(var(--gold), rgba(201, 162, 39, 0));
}
.ng-wer {
  display: block; margin: 6px 0 0 14px;
  font: 700 10px var(--font); letter-spacing: 2.2px; text-transform: uppercase; color: #5d5442;
}

/* ------------------------------------------------------------ Seite
   Das Zeichen ist dieselbe geometrische Marke wie auf dem Brett
   (assets/marker.js) - bewusst kein echtes Hoheitszeichen. */
.ng-factions { display: flex; gap: 10px; }
.ng-fac {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 12px; border: 1px solid var(--panel-edge); border-radius: var(--radius);
  background: linear-gradient(rgba(255, 255, 255, .03), rgba(0, 0, 0, .25));
  color: var(--ink-dim); cursor: pointer;
}
.ng-fac b { font: 700 15px var(--font); letter-spacing: .04em; }
.ng-fac small {
  font: 700 9.5px var(--font); letter-spacing: 1.8px; text-transform: uppercase; color: #6f6757;
}
/* Die Flagge traegt ihre eigene Farbe; ungewaehlt tritt sie zurueck. */
.ng-fac .cs-emblem { opacity: .55; transition: opacity .12s; }
.ng-fac:hover .cs-emblem { opacity: .8; }
.ng-fac.is-on .cs-emblem { opacity: 1; }
.ng-fac:hover { border-color: var(--ink-mute); }
.ng-fac.is-on {
  border-color: var(--gold); color: var(--gold);
  background: linear-gradient(rgba(201, 162, 39, .14), rgba(201, 162, 39, .05));
}
.ng-fac.is-on small { color: #9a8a5e; }

/* ------------------------------------------------------- Kompanie */
.ng-decks { display: flex; flex-direction: column; gap: 7px; }
.ng-deck {
  display: flex; align-items: center; gap: 13px; text-align: left;
  padding: 10px 13px; border: 1px solid var(--panel-edge); border-radius: var(--radius);
  background: rgba(0, 0, 0, .2); color: var(--ink); font: 600 14px var(--font); cursor: pointer;
}
/* Plakette wie das Nachschubfeld oben links auf der Karte */
.ng-deck > b {
  flex: none; width: 30px; height: 34px; display: grid; place-items: center; border-radius: 4px;
  background: linear-gradient(#5d6541, #414827); border: 1px solid #7c855b;
  font: 800 15px/1 var(--font); color: #e9e4d2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ng-deck-t { flex: 1; min-width: 0; }
.ng-deck-n { display: block; }
.ng-deck i { font-style: normal; font-size: 11px; color: var(--gold); margin-left: 8px; }
.ng-deck small { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--ink-mute); }
/* Punkte als Leiste statt als Bruch - wie in "Deck ansehen" */
.ng-bar {
  display: block; height: 5px; margin-top: 6px; border-radius: 3px;
  background: #241f16; overflow: hidden; max-width: 320px;
}
.ng-bar i {
  display: block; height: 100%; margin: 0; border-radius: 3px;
  background: linear-gradient(90deg, #8d7420, var(--gold));
}
.ng-deck:disabled { opacity: .45; cursor: default; }
.ng-deck.ist-leer > b { background: linear-gradient(#3a3a33, #2a2a25); border-color: #4a4a40; }
.ng-deck.ist-leer .ng-bar { display: none; }
.ng-deck.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .1); }

/* --------------------------------------------------------- Gegner
   Je Band ein ausgeloster General. Sein Satz steht direkt unter seinem Bild,
   nicht als Block am Ende (Bastian, 2026-09-29). */
.ng-gegner { display: flex; flex-direction: column; gap: 7px; }
.ng-grad {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px 9px 10px; border: 1px solid var(--panel-edge);
  border-radius: var(--radius); background: rgba(0, 0, 0, .18); cursor: pointer;
}
.ng-grad:hover { border-color: var(--ink-mute); }
.ng-grad.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .1); }
.ng-zeile { display: flex; align-items: center; gap: 11px; }
.ng-kopf {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #3a3628; object-fit: cover;
  filter: grayscale(.6) brightness(.78); transition: filter .12s, border-color .12s;
}
.ng-grad:hover .ng-kopf { filter: grayscale(.25) brightness(.92); }
.ng-grad.is-on .ng-kopf { filter: none; border-color: var(--gold); }
.ng-wer2 { flex: 1; min-width: 0; }
.ng-grad-t { display: block; font: 700 12.5px var(--font); letter-spacing: .05em; }
.ng-grad-t.ist-leicht { color: #7ea36b; }
.ng-grad-t.ist-mittel { color: var(--gold); }
.ng-grad-t.ist-schwer { color: var(--foe); }
.ng-grad small {
  display: block; margin-top: 2px;
  font: 400 11.5px var(--font); color: var(--ink-mute); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ng-stufe {
  flex: none; padding: 2px 8px; border-radius: 9px;
  font: 700 10.5px var(--font); letter-spacing: .5px;
  border: 1px solid rgba(201, 162, 39, .3); background: rgba(201, 162, 39, .1); color: var(--gold);
}
.ng-stufe.ist-leicht { border-color: rgba(126, 163, 107, .35); background: rgba(126, 163, 107, .12); color: #7ea36b; }
.ng-stufe.ist-schwer { border-color: rgba(180, 85, 63, .35); background: rgba(180, 85, 63, .12); color: var(--foe); }
/* Der Satz haengt am Bild, nicht am Fenster */
.ng-grad .ng-rede {
  display: block; margin: 9px 0 1px 55px !important; padding-left: 12px;
  font: italic 400 13px/1.45 var(--font) !important; color: #b3a992 !important;
}
.ng-grad .ng-rede::before { background: linear-gradient(var(--foe), rgba(180, 85, 63, 0)); }

/* Wer beginnt (2026-10-26): drei Knoepfe nebeneinander unter dem Gegner,
   darunter Luft bis zum naechsten Block */
.ng-starter { display: flex; gap: 6px; margin-bottom: 20px; }
.ng-st {
  flex: 1; padding: 8px 6px; border: 1px solid var(--panel-edge);
  border-radius: var(--radius); background: rgba(0, 0, 0, .18); cursor: pointer;
  font: 700 12.5px var(--font); letter-spacing: .04em; color: var(--ink-mute);
}
.ng-st:hover { border-color: var(--ink-mute); color: var(--ink); }
.ng-st.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .1); color: var(--gold); }

/* ---------------------------------------------------------- Karte

   Oben das grosse Brett, darunter Name, Satz und die drei Miniaturen. Die
   Bretter sind ISOMETRISCH gerendert, also liegende Rauten im Verhaeltnis
   3:2 - deshalb ein breiter Kasten und keine hohe Spalte. */
/* Gedeckelt auf die echte Bildbreite. In der dritten Spalte fuellt das Bild
   sie ohnehin aus; faellt das Raster unter 1060 px auf zwei Spalten, laeuft
   die Kartenspalte ueber die volle Breite - ohne Deckel waere das Brett dort
   700 px hoch und der Dialog doppelt so lang wie der Schirm. Hochskaliert
   wuerde es ausserdem unscharf. */
.ng-map-gross {
  display: block; max-width: 560px;
  border: 1px solid var(--panel-edge); border-radius: var(--radius);
  background: #2a2018; overflow: hidden;
}
.ng-map-gross img { display: block; width: 100%; height: auto; }
.ng-map-kopf { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 2px; }
.ng-map-kopf b { font: 700 15px var(--font); color: var(--gold); }
/* Die Groesse ist eine Angabe, kein Schmuck - still und einzeilig. */
.ng-map-kopf span {
  font: 500 11px var(--font); color: var(--ink-mute);
  letter-spacing: .04em; white-space: nowrap;
}
.ng-card .ng-map-satz {
  margin: 0 0 12px !important;
  font: 400 12.5px/1.45 var(--font) !important; color: var(--ink-mute) !important;
}

/* Die Auswahl: drei Miniaturen nebeneinander. Dasselbe Bild wie oben, nur
   kleiner - ein eigener Satz Dateien waere derselbe Inhalt zweimal. */
.ng-maps { display: flex; gap: 8px; max-width: 560px; }
.ng-map {
  flex: 1 1 0; min-width: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--panel-edge); border-radius: var(--radius);
  background: #2a2018; cursor: pointer; text-align: left;
}
.ng-map:hover { border-color: var(--ink-mute); }
.ng-map.is-on { border-color: var(--gold); }
.ng-map img { display: block; width: 100%; height: auto; filter: brightness(.72); }
.ng-map:hover img { filter: brightness(.88); }
.ng-map.is-on img { filter: none; }
/* Name und Groesse untereinander, nicht in einer Zeile: "Die Engstelle ·
   3 x 8" bricht in einer 100 px breiten Kachel mitten im Namen um. */
.ng-map small {
  display: block; padding: 5px 7px 6px;
  font: 500 10.5px var(--font); color: var(--ink-mute); letter-spacing: .03em;
}
.ng-map small b {
  display: block; margin-bottom: 1px;
  font: 600 11.5px var(--font); color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ng-map.is-on small b { color: var(--gold); }
.ng-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
/* Der Knopf bleibt sichtbar, auch wenn das Fenster rollt (29.10.2026):
   klebt unten, mit einem Verlauf darueber, damit Inhalt dahinter nicht
   durchscheint. Die Raender gleichen das Polster der Karte aus. */
.ng-card .ng-actions {
  position: sticky; bottom: -28px; z-index: 2;
  margin: 18px -34px -28px; padding: 14px 34px 22px;
  background: linear-gradient(rgba(21, 16, 11, 0), #15100b 40%);
}
/* In der Reihe steht auch ein Verweis als Knopf (Weg zum Kartendeck) - der
   braucht die Ausrichtung, die ein <button> von sich aus hat. */
.ng-actions .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Niemand hat eine spielbereite Kompanie: dann ist das Fenster nur der
   Hinweis und der Weg dorthin, wo man etwas aendern kann (Bastian, 2026-10-02). */
.ng-card.ng-leer { width: min(470px, 92vw); max-width: 470px; }
.ng-card.ng-leer .hinweis { margin-top: 4px; }

/* Unter 1060 px wird aus drei Spalten zwei: die Karte rutscht unter die
   beiden Listen und laeuft ueber die volle Breite - dort ist sie ohnehin am
   besten aufgehoben. */
@media (max-width: 900px) {
  .ng-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; }
  .ng-spalten > .ng-rechts { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .ng-spalten, .ng-spalten.ist-zwei { grid-template-columns: 1fr; gap: 0; }
  .ng-spalten > .ng-rechts { grid-column: auto; }
}

/* Startaufstellung (2026-10-17): die sechs Startkarten der Kompanie,
   ein Klick waehlt einen Platz, darunter stehen die Einheiten zum Tauschen. */
.ng-card h3 small { font-weight: 400; letter-spacing: .4px; text-transform: none; color: var(--ink-mute); margin-left: 6px; }
.ng-start { display: flex; flex-wrap: wrap; gap: 6px; }
.ng-start-k, .ng-start-neu {
  padding: 6px 10px; border: 1px solid var(--panel-edge); border-radius: var(--radius);
  background: rgba(0, 0, 0, .2); color: var(--ink); font: 600 12.5px var(--font); cursor: pointer;
}
.ng-start-k.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .1); }
.ng-start-wahl {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding: 8px;
  border: 1px dashed var(--panel-edge); border-radius: var(--radius);
}
.ng-start-neu { font-weight: 500; }
.ng-start-neu small { color: var(--ink-mute); margin-left: 3px; }

/* Startaufstellung wie in der Kartensammlung (deck.css .dk-platz, Bastian,
   2026-10-18): sechs Plaetze 3 x 2 mit Nummer, Miniatur und Namen. Ein Klick
   waehlt den Platz (Goldrand), darunter stehen die Einheiten zum Tauschen -
   mit kleiner Miniatur vor dem Namen. */
.ng-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ng-start-k {
  position: relative; aspect-ratio: 5 / 4; padding: 0; overflow: hidden; border-radius: 9px;
  border: 1px solid var(--panel-edge);
  background: radial-gradient(ellipse at 50% 92%, rgba(201,162,39,.1), transparent 70%), #100d09;
  cursor: pointer;
}
.ng-start-k:hover { border-color: #6b5a36; }
.ng-start-k.is-on { border-color: var(--gold); background: radial-gradient(ellipse at 50% 92%, rgba(201,162,39,.22), transparent 70%), #17120b; }
.ng-start-k img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 78%; }
.ng-start-nr { position: absolute; top: 3px; left: 6px; z-index: 1; font: 700 10px var(--font); color: var(--ink-mute); }
.ng-start-n {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 7px 4px 3px; text-align: center;
  font: 600 10.5px var(--font); color: var(--ink-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(transparent, rgba(16,13,9,.92) 55%);
}
.ng-start-neu { display: inline-flex; align-items: center; gap: 6px; }
.ng-start-mini { display: block; width: 34px; height: 26px; flex: none; overflow: hidden; }
.ng-start-mini img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 78%; }

/* Nur Anzeige: kein Zeiger, kein Hover-Rand (2026-10-18) */
.ng-start-k, .ng-start-k:hover { cursor: default; border-color: var(--panel-edge); }