/* Cold Start - Dialog "Multiplayer" (assets/multi.js).

   Er benutzt dieselben Bausteine wie "Neues Spiel" (.ng-fac, .ng-deck,
   .ng-bar aus newgame.css), ist aber bewusst ANDERS angeordnet (Bastian,
   2026-09-29: "ein wenig besser unterscheidbar zum Singleplayerdialog"):

   - Kopf: nicht der sprechende General, sondern die Paarung - links du,
     rechts dein Gegner mit Anwesenheitspunkt. So sieht man auch, wen man
     aus dem Chat heraus gefordert hat.
   - Die linke Spalte ist seit 31.10.2026 DIESELBE wie im Einzelspieler
     (Seite, Kompanie, Startaufstellung - newgame.js linkeSpalte, Klassen
     aus newgame.css), rechts die Gegnersuche. Bis dahin waren die Spalten
     vertauscht und Seite und Kompanie hatten hier eigene Kacheln. */

.mp-card { width: min(960px, 96vw); max-width: 960px; }

/* ------------------------------------------------------ Turnierkarte

   Links neben und HINTER dem Fenster (Bastian, 2026-10-03), wie ein zweiter
   Bogen, der auf dem Tisch darunter hervorschaut. Der Bund traegt beide; das
   Fenster selbst bleibt dadurch genau so breit wie vorher und steht weiter
   in der Mitte - was heraussteht, ist nur die Karte dahinter. */
.mp-bund { position: relative; display: flex; align-items: stretch; }
/* Das Fenster liegt oben - sonst laege die Karte davor und verdeckte die
   linke Spalte. */
.mp-bund > .mp-card { position: relative; z-index: 1; }
.mp-turnier {
  position: absolute; z-index: 0;
  right: 100%; top: 26px; bottom: 26px;
  /* Ragt unter das Fenster: 72 px breit, 26 davon liegen darunter. */
  width: 72px; margin-right: -26px;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 0;
  border: 1px solid var(--gold); border-right: 0;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(#1c160f, #120d09);
  box-shadow: -10px 0 22px rgba(0, 0, 0, .45);
}
/* Senkrecht von unten nach oben zu lesen, wie der Ruecken eines Aktendeckels.
   vertical-rl laeuft von oben nach unten; die halbe Drehung dreht ihn um. */
.mp-turnier-text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; gap: 10px;
  max-height: 100%; overflow: hidden;
}
.mp-turnier-text b {
  font: 700 11px var(--font); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.mp-turnier-text small {
  font: 500 12px var(--font); color: var(--ink-mute); white-space: nowrap;
}

/* Schmale Schirme: die Karte haette links keinen Platz mehr und schoebe das
   Fenster aus der Mitte. Dann lieber ganz weg - sie traegt heute ohnehin nur
   die Auskunft, dass nichts ansteht. */
@media (max-width: 1120px) {
  .mp-turnier { display: none; }
}

/* ------------------------------------------------------------- Kopf */
.mp-kopf {
  display: flex; align-items: stretch; gap: 16px;
  margin: 16px 0 4px; padding: 12px 14px;
  border: 1px solid var(--panel-edge); border-radius: var(--radius);
  background: linear-gradient(rgba(255, 255, 255, .025), rgba(0, 0, 0, .25));
}
.mp-seite { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; position: relative; }
.mp-med { flex: none; width: 46px; }
.mp-med svg { display: block; width: 100%; height: auto; }
.mp-seite-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mp-seite-t b {
  font: 700 15px var(--font); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-seite-t small { font-size: 11.5px; color: var(--ink-mute); }
.mp-ich .mp-seite-t b { color: var(--you); }
.mp-gegen .mp-seite-t b { color: var(--gold); }

/* Das Wort in der Mitte, mit feinen Strichen nach beiden Seiten. */
.mp-gegen-wort {
  flex: none; align-self: center; position: relative;
  font: 700 9.5px/1 var(--font); letter-spacing: .2em; text-transform: uppercase;
  color: #6f6757; padding: 0 2px;
}
.mp-gegen-wort::before, .mp-gegen-wort::after {
  content: ''; position: absolute; left: 50%; width: 1px; height: 14px;
  background: linear-gradient(var(--panel-edge), rgba(61, 51, 34, 0));
}
.mp-gegen-wort::before { bottom: 100%; margin-bottom: 5px; transform: scaleY(-1); }
.mp-gegen-wort::after { top: 100%; margin-top: 5px; }

/* Noch kein Gegner: ein leeres Feld, das nicht nach Fehler aussieht. */
.mp-leer { opacity: .75; }
.mp-platz {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px dashed #4a4031; border-radius: 50%;
  font: 700 20px var(--font); color: #5d5442;
}
.mp-leer .mp-seite-t b { color: var(--ink-dim); font-weight: 600; }
.mp-leer .mp-seite-t small { line-height: 1.4; }

.mp-ab {
  flex: none; margin-left: auto; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--panel-edge); border-radius: 5px; background: none;
  color: var(--ink-mute); font: 400 15px/1 var(--font); cursor: pointer;
}
.mp-ab:hover { color: var(--ink); border-color: var(--ink-mute); }

/* Anwesenheit: derselbe Punkt wie in der Liste, hier im Text. */
.mp-seite .mp-punkt { display: inline-block; margin-right: 5px; vertical-align: 1px; }
.mp-seite.is-da .mp-punkt { background: var(--you); opacity: 1; box-shadow: 0 0 5px rgba(126, 163, 107, .8); }
.mp-seite.is-sucht .mp-punkt { background: var(--gold); opacity: 1; box-shadow: 0 0 5px rgba(201, 162, 39, .7); }
.mp-seite.is-weg .mp-med { opacity: .55; }

/* ---------------------------------------------------------- Spalten */
.mp-spalten {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: 26px; align-items: start; margin-top: 4px;
}
.mp-gegner, .mp-auf { min-width: 0; }
.mp-gegner > h3:first-child, .mp-auf > h3:first-child { margin-top: 16px; }

/* ---------------------------------------------------------- Gegner */
.mp-suche {
  width: 100%; padding: 7px 10px; margin: 0 0 10px;
  border: 1px solid var(--panel-edge); border-radius: 5px;
  background: #0f0c09; color: var(--ink); font: 13px var(--font);
}
.mp-suche:focus { outline: none; border-color: var(--gold); }

/* Eigene Bildlaufflaeche, damit das Fenster nicht mitwaechst. */
.mp-liste {
  min-height: 210px; max-height: 420px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #4a4031 transparent;
  padding-right: 4px;
}
.mp-liste::-webkit-scrollbar { width: 8px; }
.mp-liste::-webkit-scrollbar-thumb { background: #4a4031; border-radius: 4px; }
.mp-h {
  margin: 14px 0 5px; font: 700 9.5px/1 var(--font); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.mp-h:first-child { margin-top: 0; }

/* Jede Zeile ist eine Karte mit eigenem Grund und Rand (Bastian,
   2026-10-10: "ich möchte, dass die einzelnen Spieler hier einen Rahmen
   bekommen, gerne so wie bei Freunden"). Dieselben Farben und derselbe
   Radius wie .fr-row in freunde.css - die beiden Listen zeigen dieselbe
   Sache und sollen dieselbe Sprache sprechen. Kleiner ist sie trotzdem:
   hier stehen nur Bild, Name und Ort, keine Statistik. */
.mp-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 7px 11px; margin: 0 0 6px; cursor: pointer; text-align: left;
  border: 1px solid #2d241a; border-radius: 10px;
  background: linear-gradient(160deg, #1d1711, #15110c);
  transition: border-color .13s, background .13s;
}
.mp-row:hover { border-color: #3d3022; background: linear-gradient(160deg, #221b14, #17120d); }
.mp-row.is-on { border-color: var(--gold); background: rgba(201, 162, 39, .12); }
/* Wer nicht da ist, steht blasser - wie in der Freundesliste. */
.mp-row:not(.is-da) { background: linear-gradient(160deg, #191410, #141009); }
/* Bild, Name und die Zeile darunter stehen GENAU so wie in der schmalen
   Zeile der Freundesliste (.fr-row.ist-klein in freunde.css): 44 px Bild,
   15 px Name, 11,5 px darunter, 3 px dazwischen. Bastian, 2026-10-10:
   "vom Satz des Profilbildes, Name und Zeile darunter sollen sich diese
   beiden Stellen gleich verhalten". Vorher war es hier enger (36/13,5/11
   und 1 px) und dort weiter - beides sah daneben falsch aus.

   Dass die Zahlen hier noch einmal stehen und nicht von dort geholt
   werden, ist Absicht: die beiden Dateien gehoeren zu zwei Fenstern. Der
   Pruefstand sh/mp/pruefmp.js misst dafuer beide Zeilen und vergleicht
   sie - laufen sie auseinander, wird er rot. */
.mp-bild { flex: none; width: 44px; height: 44px; }
/* Hoehe fest und das Zeichen darauf gestreckt, wie .fr-bild: mit
   `height: auto` kam das Medaillon je nach Zeichnung ein paar Pixel
   niedriger heraus, und die Zeile war dann flacher als die gleich
   gebaute in der Freundesliste. */
.mp-bild svg { display: block; width: 100%; height: 100%; }
.mp-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* Der Schaukasten steht zwischen Namen und Anwesenheitspunkt (2026-10-09).
   Er flieht als Erstes, wenn die Spalte eng wird: Name und Stand sind die
   Auskunft, die Abzeichen sind die Zugabe. */
.mp-row .pf-kasten-fremd { margin: 0 8px 0 4px; }
.mp-row:not(.is-da) .pf-kasten-fremd { opacity: .55; }
@media (max-width: 760px) { .mp-row .pf-kasten-fremd { display: none; } }
.mp-wer b { color: var(--ink); font-size: 15px; font-weight: 700; }
.mp-wer small { color: var(--ink-mute); font: 500 11.5px var(--font); }
.mp-row.is-on .mp-wer b { color: var(--gold); }
.mp-punkt {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-mute); opacity: .4;
}
.mp-row.is-da .mp-punkt { background: var(--you); opacity: 1; box-shadow: 0 0 5px rgba(126, 163, 107, .8); }
.mp-row:not(.is-da) .mp-bild { opacity: .6; }
.mp-note { color: var(--ink-mute); font-size: 12.5px; line-height: 1.55; margin: 6px 0 0; }

/* ---------------------------------------------------------- Fuss */
.mp-actions { align-items: center; }
.mp-stand { margin-right: auto; font-size: 12.5px; color: var(--ink-dim); }
.mp-stand b { color: var(--gold); }
.mp-stand.is-warten { color: var(--gold); }
.mp-fehler { margin-right: auto; font-size: 12.5px; color: var(--foe); }

/* Schmales Fenster: erst die Aufstellung, dann die Suche darunter -
   die Reihenfolge im Quelltext. */
@media (max-width: 860px) {
  .mp-spalten { grid-template-columns: minmax(0, 1fr); }
  .mp-kopf { flex-wrap: wrap; }
}