/* Cold Start - Chat in der Lobby (assets/chat.js), oben links auf dem Tisch */

.ch-box {
  position: absolute;
  left: 16px; top: 14px;
  z-index: 3;
  /* Breite und Hoehe setzt chat.js: rechts immer GAP (30 px) Abstand zum
     Menue, Groesse an der rechten unteren Ecke ziehbar (Bastian, 2026-09-26). */
  width: 330px; height: 230px;
  min-width: 220px; min-height: 150px;
  resize: both; overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  background: linear-gradient(rgba(33, 26, 19, .9), rgba(21, 16, 11, .92));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.ch-head {
  display: flex; align-items: center; justify-content: space-between; gap: 9px;
  padding: 7px 10px 7px 12px;
  border-bottom: 1px solid var(--panel-edge);
}
.ch-head h2 { margin: 0; flex: none; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-dim); }
.ch-toggle {
  width: 24px; height: 22px; padding: 0;
  border: 1px solid var(--panel-edge); border-radius: 4px;
  background: rgba(0, 0, 0, .25); color: var(--ink-dim);
  font: 700 13px var(--font); line-height: 1; cursor: pointer;
}
.ch-toggle::before { content: '–'; }
.ch-box.is-closed .ch-toggle::before { content: '+'; }
.ch-box.is-closed { resize: none; height: auto !important; min-height: 0; }
.ch-box.is-closed .ch-body { display: none; }
.ch-box.is-closed .ch-head { border-bottom: 0; }

.ch-list {
  list-style: none; margin: 0; padding: 8px 12px;
  flex: 1; min-height: 0; overflow-y: auto;
  font-size: calc(13px * var(--ch-fs, 1)); line-height: 1.4;
}
.ch-list li { margin: 0 0 5px; word-wrap: break-word; }
.ch-list time { color: var(--ink-mute); font-size: 11px; margin-right: 6px; }
.ch-list b { color: var(--gold); font-weight: 700; margin-right: 6px; }
.ch-list li.is-me b { color: var(--you); }
.ch-list span { color: var(--ink); }
.ch-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ch-form, .ch-err { flex: none; }
/* Griff zum Ziehen - liegt ueber dem Anfasser des Browsers, faengt nichts ab */
.ch-box:not(.is-closed)::after {
  content: ''; position: absolute; right: 3px; bottom: 3px;
  width: 9px; height: 9px; pointer-events: none;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  opacity: .55;
}
.ch-box::-webkit-resizer { background: transparent; }
/* Bearbeiten und Loeschen (2026-10-18): ein kleines Menue an der Zeile,
   sichtbar beim Ueberfahren. Ersetzt die #Nummer, die Admins sahen. */
.ch-list li { position: relative; padding-right: 22px; }
.ch-list li.ch-sys { padding-right: 8px; }
/* Zeile mit Menue beim Ueberfahren leicht hinterlegen (2026-10-18) - man
   sieht, zu welcher Nachricht die drei Punkte gehoeren, und bleibt in der
   Zeile. Solange das Menue offen ist, bleibt sie hinterlegt. */
.ch-list li:has(.ch-mehr) {
  margin-left: -6px; margin-right: -6px; padding-left: 6px; padding-right: 28px;
  border-radius: 4px; transition: background .12s;
}
.ch-list li:has(.ch-mehr):hover,
.ch-list li.is-menue { background: rgba(232, 226, 213, .035); }   /* leiser (Bastian, 2026-10-18: "weniger auffaellig") */
.ch-list li.is-menue .ch-mehr { opacity: 1; color: var(--gold); }
.ch-mehr {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 4px; background: none; cursor: pointer;
  color: var(--ink-mute); font: 700 14px/1 var(--font);
  opacity: 0; transition: opacity .12s;
}
.ch-list li:hover .ch-mehr, .ch-mehr:focus-visible { opacity: 1; }
/* Nur die Punkte faerben, keine eigene Flaeche (Bastian, 18.10.2026: „der
   hintergrund ist etwas zuviel weil ja schon die zeile markiert ist").
   Die Zeile hinterlegt sich beim Ueberfahren bereits selbst (oben); ein
   zweiter Kasten darueber sagt nichts Neues und wirkt wie ein Knopf im
   Knopf. */
.ch-mehr:hover { color: var(--gold); }
@media (hover: none) { .ch-mehr { opacity: .6; } }
.ch-bearb { margin-left: 5px; color: var(--ink-mute); font-size: 10.5px; font-style: italic; }
/* Uebersetzte Zeile (2026-10-22): goldgelbe Weltkugel hinter dem Namen,
   grau = Original wird gezeigt. Klick schaltet um. */
.ch-welt {
  display: inline-block; width: 13px; height: 13px; margin: 0 5px 0 0; padding: 0;
  border: 0; background: none; color: var(--gold, #c9a227); cursor: pointer; vertical-align: -1px;
}
.ch-welt .ch-ico { width: 13px; height: 13px; color: inherit; }
.ch-welt.is-orig { color: var(--ink-mute); }
.ch-welt:hover, .ch-welt:focus-visible { filter: brightness(1.25); outline: none; }
/* Antworten (2026-10-22): Zitat ueber der Antwort, Klick springt hin. */
.ch-zitat {
  display: block; margin: 1px 0 2px; padding: 1px 8px; max-width: 100%;
  border-left: 2px solid var(--gold); color: var(--ink-mute); font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.ch-zitat b { color: var(--ink-dim, #a89f8c); font-weight: 600; margin-right: 5px; }
.ch-zitat.is-weg { cursor: default; font-style: italic; border-left-color: var(--ink-mute); }
.ch-zitat:not(.is-weg):hover { color: var(--ink); }
.ch-list li.is-blink { background: rgba(201, 162, 39, .16); transition: background .4s; }
/* "So lesen es andere": die eigene Nachricht in den anderen Sprachen */
.ch-andere { margin: 3px 0 2px; padding: 3px 8px; border-left: 2px solid var(--ink-mute); font-size: 12px; color: var(--ink-dim, #a89f8c); }
.ch-andere b { color: var(--gold); font-weight: 600; margin-right: 6px; }
.ch-andere small { margin-left: 5px; font-style: italic; color: var(--ink-mute); }
.ch-list li.is-edit { background: rgba(201, 162, 39, .1); border-radius: 4px; }
.ch-edit {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 10px; border-top: 1px solid var(--panel-edge);
  background: rgba(201, 162, 39, .08); color: var(--gold); font-size: 12px;
}
.ch-edit[hidden] { display: none; }
.ch-edit-x {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  color: var(--ink-dim); font: 12px var(--font); text-decoration: underline;
}
.ch-edit-x:hover { color: var(--ink); }
.ch-list li.ch-sys {
  white-space: pre-line;
  margin: 4px 0 6px; padding: 5px 8px;
  border-left: 2px solid var(--gold);
  background: rgba(201, 162, 39, .08);
  color: var(--ink-dim); font-size: 12px;
}
.ch-empty { color: var(--ink-mute); font-size: 12px; }

/* align-items: flex-end - die Eingabezeile waechst nach OBEN (Bastian,
   18.10.2026). Ohne das dehnte sich der Senden-Knopf mit in die Hoehe,
   statt unten neben der letzten Zeile stehen zu bleiben. */
.ch-form { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--panel-edge); }
/* Seit dem 18.10.2026 ein <textarea rows="1">, kein <input> - ein input kann
   grundsaetzlich nur eine Zeile. Die Hoehe rechnet chat.js (hoch()) aus dem
   Inhalt; hier steht nur, was eine Zeile hoch ist und was der Browser NICHT
   selbst tun soll. */
.ch-input {
  flex: 1; min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--panel-edge); border-radius: var(--radius);
  background: rgba(0, 0, 0, .3); color: var(--ink);
  font: 13px var(--font);
  /* line-height ausdruecklich: hoch() rechnet damit den Deckel von sechs
     Zeilen aus, und "normal" liefert je nach Schrift etwas anderes. */
  line-height: 1.45;
  /* Kein Anfasser unten rechts: der Kasten selbst laesst sich schon ziehen
     (.ch-box), zwei Griffe uebereinander sind einer zu viel. Und die Hoehe
     kommt ohnehin aus dem Inhalt - was von Hand gezogen waere, raeumte der
     naechste Tastendruck wieder weg. */
  resize: none;
  /* Solange es passt, kein Rollbalken. Darueber schaltet hoch() auf auto. */
  overflow-y: hidden;
  /* Ein textarea steht sonst auf der Grundlinie und haengt ein paar Pixel
     unter dem Knopf. */
  display: block;
}
.ch-input:focus { outline: none; border-color: var(--gold); }
.ch-form .btn { padding: 5px 11px; font-size: 12.5px; }
.ch-err { margin: 0 10px 8px; font-size: 12px; color: var(--foe); }


/* Mehrspieler: Einladungen und Partien oben im Chat (chat.js renderMp) */
.ch-mp { padding: 6px 10px; border-bottom: 1px solid var(--panel-edge); display: flex; flex-direction: column; gap: 6px; }
.ch-mp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: 5px; font-size: 12.5px;
  background: rgba(201, 162, 39, .09); border-left: 2px solid var(--gold); color: var(--ink);
}
.ch-mp-row.is-declined, .ch-mp-row.is-cancelled, .ch-mp-row.is-expired {
  background: rgba(0, 0, 0, .2); border-left-color: var(--ink-mute); color: var(--ink-dim);
}
.ch-mp-acts { display: flex; gap: 5px; }
.btn.ch-mini { padding: 3px 9px; font-size: 12px; margin-top: 0; }
/* Namen oeffnen den Steckbrief auf Mausberuehrung (chat.js, AUF_MS) - kein
   Link mehr, also weder Unterstrich noch Hand (Bastian, 2026-10-18). */
.ch-list b[data-acc] { cursor: default; }

/* Reiter: Lobby, laufende Partie, private Unterhaltungen (Bastian, 2026-09-29).
   Sie sitzen IN der Kopfzeile, nicht in einer eigenen Leiste darunter - die
   kostete eine ganze Zeile Hoehe. Solange es nur den Weltchat gibt, steht dort
   wie bisher "Chat"; sobald Reiter da sind, tritt die Ueberschrift zurueck.
   Markiert ist der offene Reiter nur durch einen feinen Strich unter der
   Kopfzeile und etwas hellere Schrift - kein Kasten, kein Gold. */
.ch-tabs {
  flex: 1; min-width: 0; align-self: stretch;
  display: flex; gap: 15px; margin: -7px 0;
  overflow-x: auto; scrollbar-width: none;
}
.ch-tabs::-webkit-scrollbar { display: none; }
.ch-box.has-tabs .ch-head h2 { display: none; }
/* Im Gefecht steht GANZ LINKS im Kopf, vor den Gespraechen, der Reiter
   "Protokoll" (battle.html, app.js; Bastian, 2026-10-10: "schieb den
   Reiter Protokoll bitte mal vor Lobby, direkt an den Anfang"). Er
   gehoert nicht zu den Gespraechen und sitzt deshalb nicht in .ch-tabs,
   sondern davor - sonst schoebe ihn jedes neue Gespraech weiter aus dem
   Bild. Die Reiterform teilt er mit ihnen. */
.ch-log-tab {
  flex: none;
  /* Dieselbe Hoehe wie die Reiter in der Leiste: die traegt margin: -7px 0
     und align-self: stretch, damit ihr Unterstrich an der Unterkante der
     Kopfzeile sitzt. Ohne das sass der Protokollstrich hoeher als der der
     Gespraeche (Bastian, 2026-10-10: "beim Tab Protokoll passt weder der
     Abstand zu Lobby noch die Position des Strichs unter dem Wort"). */
  align-self: stretch; margin: -7px 0;
  /* 15 px bis zum ersten Gespraech, wie zwischen zwei Gespraechen - der
     Kopf steuert davon schon 9 px bei (.ch-head gap). */
  margin-right: 6px;
}
.ch-tab {
  display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 132px;
  border: 0; background: none; cursor: pointer; padding: 7px 0 8px;
  color: var(--ink-mute); font: 600 11.5px/1 var(--font); letter-spacing: .03em;
  box-shadow: inset 0 -2px 0 transparent;
}
.ch-tab > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Freunde haengen immer am rechten Ende der Leiste. */
.ch-tab .ch-ico { width: 14px; height: 14px; color: inherit; opacity: .8; }
.ch-tab.is-on .ch-ico { opacity: 1; }
.ch-tab:hover { color: var(--ink-dim); }
.ch-tab.is-on { color: var(--ink-dim); box-shadow: inset 0 -2px 0 rgba(201, 162, 39, .6); }

/* Es kann immer nur EIN Reiter offen sein (Bastian, 2026-10-10). Solange
   das Protokoll vorne liegt, tritt der Reiter des Gespraechs zurueck -
   welches gemeint ist, merkt sich .is-on weiter, sichtbar ist es nicht.
   Das steht hier und nicht im JavaScript, weil es eine Frage der
   Darstellung ist: die Auswahl selbst aendert sich ja nicht, wenn man
   ins Protokoll blaettert und wieder zurueck. */
.ch-box.zeigt-log .ch-tabs .ch-tab.is-on {
  color: var(--ink-mute);
  box-shadow: inset 0 -2px 0 transparent;
}
/* Und das Protokoll traegt einen leiseren Strich als ein Gespraech
   (Bastian: "Protokoll soll eine etwas unauffaelligere Farbe bekommen").
   Es ist ein Blick ins Geschehene, kein Gespraech - Gold gehoert dorthin,
   wo jemand mit einem redet. */
.ch-log-tab.is-on { box-shadow: inset 0 -2px 0 rgba(164, 155, 137, .45); }
/* Ungelesenes: nur eine kleine Zahl, kein Gold */
.ch-neu {
  font-style: normal; font-weight: 700; font-size: 9px; line-height: 1;
  min-width: 13px; padding: 2px 3px; border-radius: 7px; text-align: center;
  background: rgba(164, 155, 137, .16); color: var(--ink-mute);
}
.ch-tab.is-on .ch-neu, .ch-chip.is-on .ch-neu { color: var(--ink-dim); }

/* In einem Gespraech steht statt der Zahl ein gruenes Licht (Bastian,
   2026-10-08: "es ist ein Problem mitzubekommen, wenn man neue Nachrichten
   bekommt"). Dieselbe Farbe wie der Anwesenheitspunkt in der Freundesliste
   - gruen heisst in diesem Spiel ueberall "da ist etwas". Die Lobby behaelt
   ihre Zahl: dort laeuft staendig etwas, ein Dauerleuchten saegt an sich
   selbst. */
.ch-licht {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px rgba(126, 163, 107, .16), 0 0 7px rgba(126, 163, 107, .6);
  animation: ch-puls 2.4s ease-in-out infinite;
}
@keyframes ch-puls {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}
/* Wer Bewegung abbestellt hat, bekommt den Punkt ruhig - sichtbar bleibt er. */
@media (prefers-reduced-motion: reduce) {
  .ch-licht { animation: none; }
}
.ch-zu { font-style: normal; font-size: 12px; line-height: 1; opacity: .35; padding: 0 1px; }
.ch-zu:hover { opacity: .9; }

/* Sammelreiter: die Partner darunter als Zeile */
.ch-chips {
  flex: none; display: flex; gap: 4px; padding: 5px 10px;
  border-bottom: 1px solid var(--panel-edge); overflow-x: auto; scrollbar-width: none;
}
.ch-chips::-webkit-scrollbar { display: none; }
.ch-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none; max-width: 132px;
  padding: 3px 9px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(115, 107, 92, .34); background: none;
  color: var(--ink-mute); font: 600 11px/1 var(--font);
}
.ch-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-chip:hover { color: var(--ink-dim); }
.ch-chip.is-on { color: var(--ink-dim); border-color: rgba(201, 162, 39, .38); background: rgba(201, 162, 39, .06); }

/* Reiter "Leute": Merkliste und Anwesende. Zwei Abschnitte in derselben
   Liste - ein eigenes Gefaess waere im schmalen Chatfenster verschwendet. */
/* Die Regeln der Freundesliste sind am 2026-10-02 mit ihr nach
   assets/freunde.css gezogen. */

/* Steckbrief: links das Medaillon, rechts die Handlungen */
.ch-card {
  position: fixed; z-index: 70; display: flex; gap: 10px; padding: 10px;
  min-width: 268px; max-width: 342px;
  border: 1px solid var(--gold); border-radius: 8px; background: #1f1912;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}
/* Dasselbe Fenster ohne Kopf: das Menue hinter dem Dreipunkt an der
   Freundeskarte (Bastian, 2026-10-08). Es traegt nur die Handlungen,
   darf also schmaler sein - und bekommt denselben Rand und dieselbe
   Schattierung, damit es als dasselbe Werkzeug erkennbar bleibt. */
.ch-card.ch-card-menue { min-width: 210px; max-width: 280px; padding: 7px 9px; }

.ch-card-bild { flex: none; width: 66px; }
.ch-card-bild svg { display: block; width: 100%; height: auto; }
.ch-card-akt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Handlungen: Zeichen, Beschriftung, bei Admins das Zeichen "Admin" rechts.
   Beim Ueberfahren kommt ein schmaler goldener Streifen an die linke Kante -
   deutlicher als eine blosse Flaeche, ohne laut zu werden. */
.ch-tat {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; margin: 0 -4px;
  border: 0; border-radius: 5px; background: none; color: var(--ink);
  font: 13px var(--font); text-align: left; cursor: pointer;
}
.ch-tat-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-ico { flex: none; width: 18px; height: 18px; color: var(--ink-mute); }
.ch-ico svg { display: block; width: 100%; height: 100%; }
.ch-tat::before {
  content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px;
  border-radius: 1px; background: var(--gold); opacity: 0;
}
.ch-tat:hover { background: linear-gradient(90deg, rgba(201, 162, 39, .17), rgba(201, 162, 39, .04)); color: #f2ebda; }
.ch-tat:hover::before { opacity: .85; }
.ch-tat:hover .ch-ico { color: var(--gold); }
/* Steht der Spieler schon auf der Merkliste, ist das Lesezeichen gefuellt */
.ch-tat.is-an .ch-ico { color: var(--gold); }
.ch-tat.is-an .ch-ico svg path { fill: currentColor; fill-opacity: .28; }
/* Ignorieren nimmt jemanden weg - es tritt zurueck und faerbt erst beim Ueberfahren */
.ch-tat-weg { color: var(--ink-dim); }
.ch-tat-weg::before { background: var(--foe); }
.ch-tat-weg:hover { background: linear-gradient(90deg, rgba(180, 85, 63, .2), rgba(180, 85, 63, .04)); color: #ecd9d2; }
.ch-tat-weg:hover .ch-ico { color: var(--foe); }
.ch-card-hint { margin: 0; padding: 4px 0; font-size: 12.5px; color: var(--ink-mute); }
/* Admin-Handlungen: abgesetzt und mit kleinem Zeichen - klein, aber eindeutig */
.ch-tat-adm { margin-top: 5px; border-top: 1px solid var(--panel-edge); padding-top: 9px; border-radius: 0 0 5px 5px; }
.ch-tat-adm::before { top: 9px; }
.ch-adm {
  flex: none; font-style: normal; font: 700 8.5px/1 var(--font); letter-spacing: .1em;
  text-transform: uppercase; color: #cfa63a; padding: 3px 5px; border-radius: 3px;
  border: 1px solid rgba(201, 162, 39, .45); background: rgba(201, 162, 39, .1);
}
/* Im Chatfenster selbst sitzt es unten rechts IM HINTERGRUND (Bastian,
   2026-09-29). Traeger ist ein Kasten ohne Hoehe direkt ueber dem
   Eingabefeld: so haengt das Zeichen immer an derselben Stelle, egal wie
   hoch das Fenster ist, und liegt hinter den Nachrichten statt neben ihnen. */
.ch-adm-eck { flex: none; height: 0; position: relative; z-index: 0; pointer-events: none; }
.ch-adm-eck .ch-adm {
  position: absolute; right: 10px; bottom: 5px;
  color: rgba(207, 166, 58, .45); border-color: rgba(201, 162, 39, .2);
  background: none; pointer-events: auto;
}
.ch-form { position: relative; z-index: 1; }
/* Ohne Eingabefeld (Reiter "Freunde") saesse das Zeichen sonst auf dem
   unteren Rand - der Kasten ohne Hoehe schiebt sich dann selbst nach oben. */
.ch-box.no-form .ch-adm-eck { margin-bottom: 24px; }

/* Einstellungen (settings.js > Chat) */
.ch-box.no-time .ch-list time { display: none; }
.ch-box.is-off { display: none; }
.ch-box.is-off.has-mp { display: flex; resize: none; height: auto !important; min-height: 0; }
.ch-box.is-off .ch-head, .ch-box.is-off .ch-body { display: none; }
.ch-box.is-off .ch-mp { border-bottom: 0; }

/* Kurzstatistik im Steckbrief (Bastian, 2026-09-29). Vier knappe Zeilen
   zwischen Namen und Handlungen - wer mehr will, geht ins Profil. */
/* Trennlinie nur, wenn die Zahlen auch da sind - der Block ist leer,
   solange sie nachgeladen werden. */
.ch-cs {
  font-size: 11.5px; line-height: 1.55; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.ch-cs.is-stark { color: var(--ink-dim); }
/* Steckbrief fuer Nicht-Freunde (2026-10-18) */
.ch-cs.ch-cs-hinweis { font-size: 11.5px; color: var(--ink-mute); font-style: italic; }
.ch-cs.ch-cs-ort { color: var(--you); }

/* --------------------------------------------- Steckbrief, Fassung H1
   Bastian, 2026-10-18: aus den Teilen der Freundeskarte (assets/freunde.js
   teile, freunde.css .fr-*), Fuss nach Entwurf E - zwei grosse Knoepfe und
   eine Reihe kleiner Symbole mit Hinweistafel. Feste Breite, damit das
   Fenster zwischen Fremd und Freund nicht springt. */
.ch-card.ch-sb {
  flex-direction: column; gap: 0; padding: 0;
  width: 320px; min-width: 0; max-width: calc(100vw - 16px);
  border-radius: 12px;
}
/* Rechts Platz fuer den Dreipunkt oben in der Ecke */
.ch-sb-kopf { display: flex; gap: 12px; align-items: center; padding: 14px 40px 8px 14px; }
.ch-sb .ch-card-bild { width: 64px; }
.ch-sb-wer { min-width: 0; flex: 1; }
.ch-sb-name { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
.ch-sb-name b {
  font: 700 17px var(--font); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-sb-ort {
  display: flex; align-items: center; gap: 6px; margin: 4px 0 0;
  font: 500 12px var(--font); color: var(--ink-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-sb-ort i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5c544a; }
.ch-sb-ort.is-da { color: #a9cf98; }
.ch-sb-ort.is-da i { background: #6fbf5a; }
.ch-sb-ueber { padding: 0 14px 8px; }
.ch-sb-ueber .fr-ueber { margin-top: 0; }
/* Zahl und Einheit nie getrennt (Bastian, 2026-10-18: "74 %" brach um) */
.ch-sb-hinweis { display: block; margin: 0 14px 12px; font: italic 12px var(--font); color: var(--ink-mute); }
.ch-sb-banner {
  margin: 0 14px; padding: 9px 10px; border-radius: 8px;   /* Abstand nach unten macht .ch-sb-gross */
  background: rgba(111, 143, 88, .14); border: 1px solid #56743f;
}
.ch-sb-banner p { margin: 0; font-size: 12.5px; color: var(--ink); }
.ch-sb-zwei { display: flex; gap: 6px; margin-top: 8px; }
.ch-sb-zwei .btn { flex: 1; padding: 6px 0; font-size: 12px; }
.ch-sb-gross { display: flex; gap: 8px; padding: 14px 14px 14px; }   /* mehr Luft zu Kopf und Text (2026-10-18) */
.ch-sb-knopf {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 6px; font-size: 13px; min-width: 0;
}
/* Lange Beschriftungen (en: "Challenge to battle") brechen IM Knopf um,
   statt ueber den Rand der Karte zu laufen. */
.ch-sb-knopf > span { min-width: 0; white-space: normal; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.ch-sb-knopf .ch-ico { flex: none; }
.ch-sb-knopf .ch-ico { width: 16px; height: 16px; }
.ch-sb-knopf .ch-ico svg { width: 16px; height: 16px; display: block; }

/* Steckbrief oeffnet auf Mausberuehrung und schliesst beim Verlassen sofort
   (chat.js, AUF_MS / ZU_MS) - kein Ausblenden mehr. */

/* Dreipunkt oben rechts im Steckbrief und sein Menue (2026-10-18) - ersetzt
   die Symbolreihe am Fuss. Das Menue darf ueber den Rand der Karte ragen
   (die Karte schneidet deshalb nicht mehr ab, overflow: visible). */
.ch-sb-mehr {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--ink-mute); font: 700 17px/1 var(--font);
}
.ch-sb-mehr:hover, .ch-sb-mehr.is-an { color: var(--gold); }
.ch-sb-menue {
  position: absolute; top: 40px; right: 8px; z-index: 1;
  display: flex; flex-direction: column; min-width: 210px; padding: 6px 9px;
  border: 1px solid var(--gold); border-radius: 8px; background: #1f1912;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}
.ch-sb-menue[hidden] { display: none; }

/* Schaukasten im Steckbrief: vier Abzeichen in 40 px, auch auf dem Telefon
   (freunde.css blendet .pf-kasten-fremd dort fuer die Listenzeilen aus). */

/* Derselbe Rahmen wie die Hinweistafel der Erfolge (.cs-tip in style.css):
   feiner Goldrand mit 55 % Deckkraft, Verlauf als Grund, 6 px Rundung
   (Bastian, 2026-10-18: "im Chat soll derselbe Rahmen fuer das
   Popupfenster benutzt werden wie bei den Erfolgen"). Vorher volles Gold
   und 12 px Rundung - das wirkte dicker. */
.ch-card, .ch-card.ch-sb {
  border: 1px solid rgba(201, 162, 39, .55); border-radius: 6px;
  background: linear-gradient(#241d16, #17120e);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}
.ch-sb .ch-sb-menue { border-color: rgba(201, 162, 39, .55); border-radius: 6px; background: linear-gradient(#241d16, #17120e); }

/* Zweiter Anlauf (Bastian, 2026-10-18: "immer noch zu stark, versuch mal so
   einen Rahmen wie das Chatfenster selbst"): Rahmen, Rundung, Grund und
   Schatten wie .ch-box - der Grund deckend, weil das Fenster ueber dem
   Chat liegt. */
.ch-card, .ch-card.ch-sb, .ch-sb .ch-sb-menue {
  border: 1px solid var(--panel-edge); border-radius: 8px;
  background: linear-gradient(#211a13, #15100b);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}

/* Befehle: gegliederte Hilfe und Vorschlagsliste (Bastian, 23.10.2026).
   Eine Zeile ist "/befehl ARGS" in Gold und daneben die Erklaerung; ist
   der Kasten zu schmal, rutscht die Erklaerung unter den Befehl
   (flex-wrap mit Mindestbreite) statt in schmalen Fetzen umzubrechen. */
.ch-list li.ch-hilfe { white-space: normal; padding: 6px 8px 7px; }
.ch-hilfe h4 {
  margin: 0 0 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-mute);
}
.ch-hilfe h4.ch-hilfe-abs { margin-top: 11px; }          /* die "Leerzeile" */
.ch-bf {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px;
  width: 100%; margin: 0; padding: 2px 4px;
  border: 0; border-radius: 4px; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ch-bf:hover, .ch-bf:focus-visible { background: rgba(232, 226, 213, .06); outline: none; }
/* .ch-bf davor: ".ch-list span" faerbt sonst alles in --ink */
.ch-bf .ch-bf-c {
  flex: none; white-space: nowrap; color: var(--gold);
  font: 600 11.5px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* Die Platzhalter (NAME, [TEXT]) in Stahlblau - kalt gegen das Gold des
   Befehls, damit man sofort sieht, was man selbst einsetzt (Bastian,
   23.10.2026: "die Variablen sollen eine andere Farbe bekommen"). */
.ch-bf .ch-bf-c i { font-style: italic; font-weight: 400; color: #8fb4c9; }
.ch-bf .ch-bf-d { flex: 1 1 150px; min-width: 0; color: var(--ink-dim); font-size: 11.5px; line-height: 1.4; }
.ch-hilfe-zeiten { margin: 0; padding: 0 4px; color: var(--ink-dim); font-size: 11.5px; line-height: 1.6; }
.ch-hilfe-zeiten code {
  color: var(--gold); font: 600 11px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ch-hilfe-tipp { margin: 8px 0 0; padding: 0 4px; color: var(--ink-mute); font-size: 10.5px; font-style: italic; }

.ch-vorschlag {
  position: absolute; left: 10px; right: 10px; bottom: 100%; z-index: 5;
  margin-bottom: 3px; max-height: 160px; overflow-y: auto; padding: 3px;
  border: 1px solid var(--panel-edge); border-radius: 5px;
  background: #1b150f; box-shadow: 0 -6px 18px rgba(0, 0, 0, .4);
}
.ch-vorschlag[hidden] { display: none; }
.ch-vorschlag .ch-bf { padding: 3px 6px; }
.ch-vorschlag .ch-bf.is-wahl { background: rgba(201, 162, 39, .14); }