:root {
  --bg: #0f1420;
  --bg-panel: #161d2e;
  --bg-panel-alt: #1c2540;
  --border: #2a3450;
  --text: #e7ebf5;
  --text-dim: #9aa4bd;
  --accent: #5b8cff;
  --accent-2: #35d0a3;
  --danger: #ff6b6b;
  --warning: #ffb454;
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}
.sidebar-brand {
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-nav a {
  padding: 10px 20px;
  color: var(--text-dim);
  border-left: 3px solid transparent;
}
.sidebar-nav a:hover { color: var(--text); text-decoration: none; background: var(--bg-panel-alt); }
.sidebar-nav a.active { color: var(--text); border-left-color: var(--accent); background: var(--bg-panel-alt); }
.lang-switcher { padding: 12px 20px 0; }
.lang-switcher select {
  width: 100%;
  padding: 7px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
}
.lang-switcher-standalone { position: fixed; top: 16px; right: 16px; }
.lang-switcher-standalone select {
  padding: 7px 9px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text);
  font-size: 0.85rem;
}
.sidebar-logout { padding: 20px; border-top: 1px solid var(--border); margin-top: 12px; }
.sidebar-logout button {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px;
  border-radius: var(--radius);
  cursor: pointer;
}
.sidebar-logout button:hover { color: var(--text); border-color: var(--accent); }

.content { flex: 1; padding: 28px 32px; max-width: 1200px; }

h1 { font-size: 1.5rem; margin: 0 0 20px; }
h2 { font-size: 1.15rem; margin: 28px 0 12px; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 8px; }
.kpi-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.kpi-card .label { color: var(--text-dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-card .value { font-size: 1.6rem; font-weight: 700; margin-top: 6px; }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
}

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--text-dim); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
th a { color: var(--text-dim); }
tr:hover td { background: rgba(255,255,255,0.02); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-upcoming { background: rgba(91,140,255,0.15); color: var(--accent); }
.badge-active { background: rgba(53,208,163,0.15); color: var(--accent-2); }
.badge-completed { background: rgba(154,164,189,0.15); color: var(--text-dim); }
.badge-warleader { background: rgba(91,140,255,0.15); color: var(--accent); }
.badge-engineer { background: rgba(53,208,163,0.15); color: var(--accent-2); }
.badge-unmapped { background: rgba(255,180,84,0.15); color: var(--warning); font-weight: 700; cursor: help; }

/* Members-Uebersicht: sortierbare Spaltenkoepfe (Beruf/Kills, siehe views/members/index.ejs) */
th.sort-active a { color: var(--accent); }
.sort-arrow { font-size: 0.68rem; margin-left: 3px; opacity: 0.85; }

/* Manuelle Beruf-Uebersteuerung (Members-Uebersicht) - kompaktes Select neben dem Beruf-Badge,
   siehe members.profession_override in migrate.js */
.profession-override-select {
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 0.72rem;
  max-width: 92px;
}

/* Engineer<->War-Leader "Win-Win"-Zuordnung */
.pairing-select {
  width: 100%; max-width: 220px; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem;
}
.pairing-status { font-size: 0.82rem; }
.pairing-status.linked { color: var(--accent-2); }
.pairing-status.unlinked { color: var(--text-dim); }

.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--bg-panel-alt);
  border-left: 3px solid var(--border);
  font-size: 0.88rem;
}
.alert-item.sev-danger { border-left-color: var(--danger); }
.alert-item.sev-warning { border-left-color: var(--warning); }
.alert-item .alert-icon-chip {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(154,164,189,0.14);
  color: var(--text-dim);
  margin-top: 1px;
}
.alert-item.sev-danger .alert-icon-chip { background: rgba(255,107,107,0.14); color: var(--danger); }
.alert-item.sev-warning .alert-icon-chip { background: rgba(255,180,84,0.14); color: var(--warning); }
.alert-item .alert-text { padding-top: 3px; }
.alert-item .who { font-weight: 600; }

/* --- Icon-Statkarten, Panel-Header mit Icon+"Alle anzeigen", Highlight-Karte (Dashboard v2) --- */
.icon { display: inline-block; vertical-align: -4px; }
.btn .icon { vertical-align: -3px; margin-right: 5px; }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 8px; }
.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 17px;
}
.stat-icon-chip {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(91,140,255,0.14);
  color: var(--accent);
}
.stat-icon-chip.positive { background: rgba(53,208,163,0.14); color: var(--accent-2); }
.stat-body .stat-label { color: var(--text-dim); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.stat-body .stat-value { font-size: 1.45rem; font-weight: 700; margin-top: 2px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-body .stat-sub { font-size: 0.74rem; color: var(--text-dim); margin-top: 2px; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-head .panel-title { display: flex; align-items: center; gap: 9px; font-size: 1.02rem; font-weight: 700; }
.panel-head .panel-title .icon { color: var(--accent); }
.panel-head .panel-note { font-size: 0.78rem; color: var(--text-dim); font-weight: 400; }
.panel-head .view-all { display: inline-flex; align-items: center; gap: 1px; font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; }
.panel-head .view-all:hover { color: var(--accent); text-decoration: none; }
.panel-head .view-all .icon { width: 15px; height: 15px; vertical-align: -3px; }

.highlight-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,180,84,0.14), rgba(255,180,84,0.02));
  border: 1px solid rgba(255,180,84,0.35);
  margin-bottom: 14px;
}
.highlight-card .highlight-icon-chip {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,180,84,0.18);
  color: var(--warning);
}
.highlight-card .highlight-eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.highlight-card .highlight-name { font-weight: 700; font-size: 1.03rem; margin-top: 1px; }
.highlight-card .highlight-stats { margin-left: auto; display: flex; gap: 18px; }
.highlight-card .highlight-stats .stat { text-align: right; }
.highlight-card .highlight-stats .n { font-weight: 700; font-variant-numeric: tabular-nums; display: block; }
.highlight-card .highlight-stats .l { font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; }

.rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--bg-panel-alt);
  color: var(--text-dim);
}
.rank-pill.rank-1 { background: rgba(255,180,84,0.18); color: var(--warning); }

/* --- Allianz-Banner (Header, siehe partials/app-header.ejs + settings/branding.ejs) ---
   Ohne eigenes hochgeladenes Bild wird ein original gestaltetes, taktisches Muster gezeigt (Grid +
   Glow-Akzente, rein aus CSS-Gradients - keine echte Grafik/kein Spiel-Artwork). Wird ein eigenes
   Bild hochgeladen, ersetzt die Inline-style="background-image" diese Gradient-Deko vollstaendig,
   das Ueberblendungs-Overlay (.alliance-banner-overlay) sorgt trotzdem fuer lesbaren Text darueber. */
.alliance-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 22px;
  padding: 20px 26px;
  min-height: 92px;
  display: flex;
  align-items: center;
  background-color: var(--bg-panel);
  background-size: cover;
  background-position: center;
  background-image:
    radial-gradient(ellipse 460px 220px at 12% 25%, rgba(91,140,255,0.22), transparent 62%),
    radial-gradient(ellipse 360px 240px at 88% 95%, rgba(53,208,163,0.16), transparent 65%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 27px),
    repeating-linear-gradient(25deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 27px),
    linear-gradient(135deg, var(--bg-panel-alt), var(--bg-panel));
}
.alliance-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,14,24,0.1), rgba(10,14,24,0.55));
  pointer-events: none;
}
.alliance-banner-content { position: relative; z-index: 1; }
.alliance-banner-tag {
  display: inline-block;
  background: rgba(91,140,255,0.2);
  color: #bcd0ff;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.alliance-banner-name { font-size: 1.5rem; font-weight: 800; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.alliance-banner-sub {
  font-size: 0.76rem;
  color: rgba(231,235,245,0.75);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 4px;
}
.alliance-banner-edit {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  font-size: 0.76rem;
  color: rgba(231,235,245,0.8);
  background: rgba(10,14,24,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 4px 10px;
  border-radius: 999px;
}
.alliance-banner-edit:hover { color: #fff; border-color: var(--accent); background: rgba(10,14,24,0.65); text-decoration: none; }
.alliance-banner-preview { margin-bottom: 0; }
.branding-preview-label { font-size: 0.76rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}
.btn:hover { text-decoration: none; opacity: 0.9; }
.btn-secondary { background: var(--bg-panel-alt); color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: var(--danger); }
.btn-small { padding: 5px 10px; font-size: 0.8rem; }

form.inline { display: inline; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.search-box { position: relative; display: inline-flex; align-items: center; }
.search-box input { padding: 8px 12px 8px 34px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.search-box-icon { position: absolute; left: 10px; color: var(--text-dim); pointer-events: none; }

.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; }
.flash-ok { background: rgba(53,208,163,0.12); border: 1px solid rgba(53,208,163,0.4); color: var(--accent-2); }
.flash-error { background: rgba(255,107,107,0.12); border: 1px solid rgba(255,107,107,0.4); color: var(--danger); }

/* Login pages */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.login-box {
  width: 340px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.login-box h1 { text-align: center; }
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 5px; font-size: 0.85rem; color: var(--text-dim); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.92rem;
}
textarea { resize: vertical; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent-2); font-weight: 700; }
.mt-0 { margin-top: 0; }

/* Event-Ergebnisse per Screenshot/OCR (2026-09-17) - Review-Tabelle: Zeilen, die noch eine
   manuelle Zuordnung brauchen bzw. bewusst ignoriert werden, leicht abgesetzt hervorheben. */
.row-needs-review { background: rgba(255,180,84,0.06); }
.row-ignored { opacity: 0.55; }

.growth-up { color: var(--accent-2); }
.growth-down { color: var(--danger); }

/* Oeffentliche Anmeldeseite (kein Login, mehrsprachig) - eigener, spielnaher Look (warme
   Orange-Akzente statt des blauen Admin-Themes), damit ein Wiedererkennungswert zu Last War
   entsteht. Alles unter .public-wrap gescoped, um das Admin-Backend unveraendert zu lassen. */
:root {
  --public-accent: #ff8a3d;
  --public-accent-2: #ff5252;
}
.public-wrap {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 40px 20px 60px;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,138,61,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(255,82,82,0.08), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}
.public-container { width: 100%; max-width: 640px; }
.public-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.public-brand::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--public-accent), var(--public-accent-2));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 0 12px rgba(255,138,61,0.55);
}
.public-welcome {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin: -8px 0 22px;
  max-width: 54ch;
}
.public-state { text-align: center; }
.public-event-card {
  display: flex;
  gap: 14px;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.public-event-card:hover {
  text-decoration: none;
  border-color: var(--public-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.public-banner {
  width: 140px;
  min-width: 140px;
  background-size: cover;
  background-position: center;
}
.public-banner-frame {
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(255,138,61,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.2) inset;
}
.public-banner-large {
  width: 100%;
  height: 170px;
  background-size: cover;
  background-position: center;
}
.public-banner-frame::after {
  /* leichte kinoartige Abdunkelung am unteren Rand, damit Text darunter ruhig wirkt */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(6,7,12,0.55) 100%);
  pointer-events: none;
}
.public-category-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  background: linear-gradient(135deg, var(--public-accent), var(--public-accent-2));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.public-event-card-body { padding: 14px 16px; }
.public-event-card-title { font-weight: 600; }

.public-wrap .btn {
  background: linear-gradient(135deg, var(--public-accent), var(--public-accent-2));
  box-shadow: 0 4px 14px rgba(255,82,82,0.35);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 11px 20px;
}
.public-wrap .btn:hover { opacity: 0.92; }
.public-wrap .chip-option:has(input:checked) {
  border-color: var(--public-accent);
  background: rgba(255,138,61,0.14);
}
.public-wrap a { color: var(--public-accent); }

/* RTL (Arabisch, siehe dir="rtl" in views/partials/public-header.ejs): Layout dreht sich durch
   dir="rtl" bei flex/grid automatisch korrekt um, nur dieses eine absolut positionierte Badge
   braucht eine explizite Spiegelung. */
[dir="rtl"] .public-category-chip { left: auto; right: 10px; }

.autocomplete-list {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: var(--bg-panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 220px;
  overflow-y: auto;
}
.autocomplete-list div { padding: 8px 12px; font-size: 0.9rem; }
.autocomplete-list div:hover { background: rgba(255,255,255,0.06); }

.checkline { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; }
.checkline input { margin-top: 3px; }

.chip-options { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.85rem;
  cursor: pointer;
}
.chip-option input { margin: 0; }
.chip-option:has(input:checked) { border-color: var(--accent); background: rgba(91,140,255,0.12); }

/* Team Assembly */
.counters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.counter-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  min-width: 90px;
  text-align: center;
  background: var(--bg-panel-alt);
}
.counter-box .counter-num { font-size: 1.3rem; font-weight: 700; }
.counter-box .counter-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-top: 2px; }
.counter-box.counter-full { border-color: var(--accent-2); }
.badge-warning { background: rgba(255,180,84,0.15); color: var(--warning); }
.badge-suspended { background: rgba(255,107,107,0.15); color: var(--danger); }
.badge-ok { background: rgba(53,208,163,0.15); color: var(--accent-2); }
.badge-flag { background: rgba(255,107,107,0.15); color: var(--danger); }
.points-hi { font-weight: 700; color: var(--warning); }
/* "Letztes Team"-Spalte auf der Team-Assembly-Seite (Nutzer-Feedback 2026-09-20): zeigt den
   konkreten Tag aus dem zuletzt finalisierten Event derselben Kategorie statt nur eines Ja/Nein -
   main_* solide gefuellt ("hat gespielt"), sub_* etwas zurueckhaltender (gestrichelter Rahmen,
   keine Fuellung), pool/unassigned neutral bzw. als dezenter Hinweis auf Prioritaet. */
.badge-team-main-a { background: rgba(91,140,255,0.15); color: var(--accent); }
.badge-team-sub-a { background: transparent; color: var(--accent); border: 1px dashed var(--accent); }
.badge-team-main-b { background: rgba(53,208,163,0.15); color: var(--accent-2); }
.badge-team-sub-b { background: transparent; color: var(--accent-2); border: 1px dashed var(--accent-2); }
.badge-team-pool { background: rgba(154,164,189,0.15); color: var(--text-dim); }
.badge-team-unassigned { background: transparent; color: var(--warning); border: 1px dashed var(--warning); }
.sort-links a { margin-left: 10px; }
.sort-links a.active { color: var(--text); font-weight: 700; text-decoration: none; }
.sortable-th { color: inherit; white-space: nowrap; }
.sortable-th:hover { text-decoration: underline; }
.sort-arrow { font-size: 0.75em; color: var(--text-dim); }
.sort-arrow.active { color: var(--accent); font-weight: 700; }
.addbox { border: 1px dashed var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 0.85rem; }
.addbox select, .addbox input { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.tag-select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.tag-select:disabled { opacity: 0.7; }

/* Team Assembly: zweispaltiges Layout mit Live-Team-Vorschau */
.assembly-layout { display: flex; gap: 16px; align-items: flex-start; }
.assembly-left { flex: 1; min-width: 0; }
.assembly-right { width: 300px; flex-shrink: 0; position: sticky; top: 16px; }
.team-preview-panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.team-preview-header { font-weight: 700; margin-bottom: 2px; }
.team-preview-hint { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 12px; }
.team-box { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; background: var(--bg); }
.team-box:last-child { margin-bottom: 0; }
.team-box-header { background: var(--bg-panel-alt); padding: 8px 10px; font-size: 0.85rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.team-box-counts { font-size: 0.7rem; font-weight: 400; color: var(--text-dim); white-space: nowrap; }
.team-box-list { max-height: 220px; overflow-y: auto; }
.team-sub-heading { background: var(--bg-panel-alt); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); padding: 4px 10px; position: sticky; top: 0; }
.team-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
.team-row:last-child { border-bottom: none; }
.team-row .power { color: var(--text-dim); font-size: 0.8rem; white-space: nowrap; }
.team-row-empty { padding: 8px 10px; font-size: 0.8rem; color: var(--text-dim); }
.team-row-registerable { align-items: center; flex-wrap: wrap; }
.team-row-name { flex: 1; min-width: 0; }
.team-row-quickadd { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.team-row-quickadd select { font-size: 0.75rem; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); max-width: 96px; }
.team-row-quickadd button { padding: 2px 9px; line-height: 1.4; }
@media (max-width: 900px) {
  .assembly-layout { flex-direction: column; }
  .assembly-right { width: 100%; position: static; }
}

/* Battle Map: kartenbasierte Zweitansicht auf die Team-Assembly-Zuweisungen */
.bm-layout { display: flex; gap: 16px; align-items: flex-start; }
.bm-left { flex: 1; min-width: 0; }
.bm-right { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.battle-map-frame { border-radius: calc(var(--radius) + 6px); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 14px 40px rgba(0,0,0,0.4); }
.battle-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 13;
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255,205,140,0.35), transparent 60%),
    linear-gradient(160deg, #d1813a 0%, #b45f22 45%, #8a4415 78%, #6e3510 100%);
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255,205,140,0.35), transparent 60%),
    radial-gradient(rgba(0,0,0,0.14) 1px, transparent 1px),
    linear-gradient(160deg, #d1813a 0%, #b45f22 45%, #8a4415 78%, #6e3510 100%);
  background-size: 100% 100%, 7px 7px, 100% 100%;
  box-shadow: inset 0 0 90px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.15);
}
/* Top Lords - Gold Mine Conquest: hochformatige Karte in dunklem Gold/Braun (eigene Gestaltung) */
.battle-map-frame:has(.bm-map-gold) { max-width: 600px; margin-inline: auto; }
/* Gold Mine: Karte hochformatig in voller Breite, der Quarry-Block steht darunter (statt daneben) */
.bm-export-row.bm-export-row-gold { flex-direction: column; }
.bm-export-row.bm-export-row-gold .bm-oilpump-legend { width: 100%; flex-direction: row; flex-wrap: wrap; }
.battle-map.bm-map-gold {
  aspect-ratio: 16 / 24;
  background-image:
    radial-gradient(ellipse 45% 22% at 50% 43%, rgba(255,196,64,0.38), transparent 70%),
    radial-gradient(rgba(0,0,0,0.16) 1px, transparent 1px),
    linear-gradient(170deg, #5b4a2b 0%, #46371f 45%, #33281a 100%);
  background-size: 100% 100%, 8px 8px, 100% 100%;
}
.bm-home-strip { position: absolute; top: 28%; bottom: 28%; width: 6.5%; pointer-events: none; border-radius: 6px; }
.bm-home-strip.left { left: 0.6%; background: linear-gradient(180deg, rgba(53,208,163,0.4), rgba(53,208,163,0.18)); box-shadow: 0 0 24px rgba(53,208,163,0.25); }
.bm-home-strip.right { right: 0.6%; background: linear-gradient(180deg, rgba(255,107,107,0.4), rgba(255,107,107,0.18)); box-shadow: 0 0 24px rgba(255,107,107,0.25); }
.bm-building { position: absolute; transform: translate(-50%, -50%); width: 150px; text-align: center; cursor: pointer; user-select: none; z-index: 3; }

/* Bewegungs-Pfeile Gebaeude-zu-Gebaeude (Nutzer-Wunsch: automatisch aus den Zuweisungen ueber alle
   Phasen abgeleitet, immer sichtbar - siehe getBuildingPathArrows in battle-map.js). Liegt unter den
   Gebaeuden/Hubs (z-index), damit Klicks weiterhin auf die Gebaeude gehen. */
.bm-arrows-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.bm-building-icon {
  width: 60px; height: 60px; margin: 0 auto 5px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(35,42,64,0.92), rgba(15,20,32,0.88));
  border: 3px solid rgba(255,255,255,0.45);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; font-size: 29px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.bm-building:hover .bm-building-icon { transform: scale(1.08); border-color: var(--accent); box-shadow: 0 4px 14px rgba(91,140,255,0.4); }
.bm-building.bm-occupied .bm-building-icon { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(53,208,163,0.22), 0 4px 10px rgba(0,0,0,0.35); }
.bm-building-name { font-size: 0.88rem; font-weight: 700; background: rgba(15,20,32,0.82); border-radius: 5px; padding: 2px 8px; display: inline-block; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.bm-building-pts { font-size: 0.68rem; font-weight: 700; color: var(--accent-2); margin-top: 2px; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.bm-building-allytag { font-size: 0.66rem; font-weight: 700; color: #fff; background: var(--accent); border-radius: 9px; padding: 1px 8px; margin-top: 3px; display: inline-block; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.bm-wave-badge { position: absolute; top: -10px; right: 8px; background: var(--warning); color: #241a00; font-size: 0.68rem; font-weight: 700; border-radius: 10px; padding: 2px 7px; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
/* Nutzer-Feedback 2026-09-17: die Karte wird als PNG exportiert und dann als Bild gepostet -
   ein Scrollbalken (frueher max-height:110px; overflow-y:auto) ist dort nutzlos, der Rest der
   Liste war im Export schlicht unsichtbar abgeschnitten. Liste waechst jetzt uneingeschraenkt in
   der Hoehe, damit bei vielen Spielern an einem Gebaeude im Export wirklich JEDER sichtbar ist -
   auf Kosten von moeglicher optischer Ueberlappung mit darunterliegenden Gebaeuden in Extremfaellen
   (weiterhin besser als komplett unsichtbare Eintraege). */
.bm-chip { font-size: 0.74rem; line-height: 1.2; background: rgba(15,20,32,0.9); color: #fff; border-radius: 8px; padding: 2px 8px; cursor: pointer; white-space: normal; word-break: break-word; max-width: 148px; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
/* Namensliste am Gebaeude (Nutzer-Feedback 2026-10-08): absolut positioniert, damit sie die Groesse
   bzw. Position des Gebaeudes (und damit Icon + Pfeile) nicht mehr beeinflusst. Den Layout-Modus
   waehlt battle-map.ejs (layoutBuilding) per Messung: below = unter dem Gebaeude, right/left =
   einspaltig neben dem Icon, split = zweispaltig auf beiden Seiten des Icons. Seitliche Listen
   sind auf die Icon-Mitte zentriert (30px = halbe Icon-Hoehe); sie selbst fangen keine Klicks
   (Klick aufs Gebaeude bleibt moeglich), die Chips schon (Klick entfernt den Spieler).
   162px = Gebaeudebreite 150 + 2x6 Luft. */
.bm-building-list { position: absolute; margin: 0; display: grid; row-gap: 3px; }
.bm-building[data-bm-layout="below"] .bm-building-list, .bm-building:not([data-bm-layout]) .bm-building-list { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; grid-template-columns: 148px; justify-items: center; }
.bm-building[data-bm-layout="split"], .bm-building[data-bm-layout="left"], .bm-building[data-bm-layout="right"] { z-index: 4; }
.bm-building[data-bm-layout="split"] .bm-building-list,
.bm-building[data-bm-layout="left"] .bm-building-list,
.bm-building[data-bm-layout="right"] .bm-building-list { top: 30px; pointer-events: none; }
.bm-building[data-bm-layout="split"] .bm-chip, .bm-building[data-bm-layout="left"] .bm-chip, .bm-building[data-bm-layout="right"] .bm-chip { pointer-events: auto; text-align: left; }
.bm-building[data-bm-layout="split"] .bm-building-list { left: 50%; transform: translate(-50%, -50%); grid-template-columns: 148px 162px 148px; }
.bm-building[data-bm-layout="right"] .bm-building-list { left: calc(100% + 6px); transform: translateY(-50%); grid-template-columns: 148px; }
.bm-building[data-bm-layout="left"] .bm-building-list { right: calc(100% + 6px); transform: translateY(-50%); grid-template-columns: 148px; }
.bm-ghost { visibility: hidden; pointer-events: none; }
.bm-chip:hover { background: var(--danger); }
.bm-chip-arrow { color: var(--text-dim); margin: 0 3px; font-weight: 400; }
.bm-chip-sub { color: #ffcf8a; font-weight: 700; }

/* Canyon Storm: Gebaeude, die in der aktuell angezeigten Phase noch nicht freigeschaltet sind. */
.bm-building.bm-locked { cursor: not-allowed; }
.bm-building.bm-locked .bm-building-icon { filter: grayscale(0.85); opacity: 0.5; }
.bm-building.bm-locked .bm-building-name { opacity: 0.55; }
.bm-building.bm-locked:hover .bm-building-icon { transform: none; border-color: rgba(255,255,255,0.45); box-shadow: 0 4px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12); }

.bm-phase-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bm-phase-tab {
  display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  background: var(--bg-panel-alt); border: 1px solid var(--border); color: var(--text-dim); text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bm-phase-tab:hover { border-color: var(--accent); color: #fff; }
.bm-phase-tab.bm-phase-active { background: var(--accent); border-color: var(--accent); color: #fff; }

.bm-status-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: var(--radius); background: var(--bg-panel-alt); border: 1px solid var(--border); margin-bottom: 10px; font-size: 0.85rem; }
.bm-roster-row { display: flex; justify-content: space-between; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px 6px 0 0; margin-bottom: 0; font-size: 0.85rem; cursor: pointer; }
.bm-roster-row:hover { border-color: var(--accent); }
.bm-roster-row.bm-selected { border-color: var(--accent); background: rgba(91,140,255,0.14); }
.bm-roster-row.bm-placed { opacity: 0.5; }
.bm-roster-row.bm-absent { text-decoration: line-through; opacity: 0.45; }
.bm-pair-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 3px 8px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; margin-bottom: 4px; background: var(--bg-panel-alt); }
.bm-pair-lbl { font-size: 0.7rem; color: var(--text-dim); margin-right: auto; }
.bm-pair-select { font-size: 0.76rem; padding: 2px 4px; border-radius: 4px; border: 1px dashed var(--accent-2); background: var(--bg); color: var(--text); max-width: 140px; }
.bm-bench-row, .bm-sub-row, .bm-sub-info-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 4px; font-size: 0.85rem; border-bottom: 1px solid var(--border); gap: 8px; }
.bm-bench-row:last-child, .bm-sub-row:last-child, .bm-sub-info-row:last-child { border-bottom: none; }
.bm-sub-row select { font-size: 0.78rem; padding: 3px 5px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text); max-width: 150px; }

/* Oil Pump Felder: eigene, kleinere Zonen auf der Karte (nur Icon + Zaehler), die eigentliche
   Namensliste steht in einem Sidebar-Panel je Feld - siehe Wireframe v3. Kein Bezug zu Oil Refinery. */
.bm-pump-zone { position: absolute; transform: translate(-50%, -50%); width: 108px; text-align: center; pointer-events: none; z-index: 3; }
.bm-pump-wave-badge { position: absolute; top: -9px; right: 10px; background: var(--success, #35d0a3); color: #062018; font-size: 0.66rem; font-weight: 700; border-radius: 9px; padding: 2px 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.bm-pump-icon { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(53,208,163,0.28), rgba(15,20,32,0.7) 70%); border: 3px solid var(--success, #35d0a3); box-shadow: 0 0 14px rgba(53,208,163,0.35), 0 3px 8px rgba(0,0,0,0.35); margin: 0 auto 3px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; position: relative; }
.bm-pump-count { position: absolute; bottom: -5px; right: -5px; background: var(--success, #35d0a3); color: #062018; font-size: 0.72rem; font-weight: 700; border-radius: 9px; padding: 0 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.35); }
.bm-pump-zone-label { font-size: 0.72rem; font-weight: 700; background: rgba(15,20,32,0.78); border-radius: 4px; padding: 2px 6px; display: inline-block; color: var(--success, #35d0a3); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.bm-pump-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.bm-pump-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; }
.bm-pump-name { font-weight: 600; white-space: nowrap; }
.bm-pump-note { flex: 1; min-width: 0; font-size: 0.76rem; padding: 3px 5px; border-radius: 4px; border: 1px dashed var(--border); background: var(--bg); color: var(--text); }
.bm-pump-remove { cursor: pointer; color: var(--text-dim); font-size: 0.9rem; padding: 0 2px; }
.bm-pump-remove:hover { color: var(--danger); }
.bm-pump-add-select { width: 100%; font-size: 0.78rem; padding: 4px 6px; border-radius: 4px; border: 1px dashed var(--accent-2); background: var(--bg); color: var(--text); }

/* Roster aufgeteilt in "Nicht zugewiesen" / "Zugewiesen" je Team - ein Spieler wandert beim
   Zuweisen client-seitig zwischen den beiden Listen (siehe moveRosterItem in battle-map.ejs). */
.bm-roster-section-lbl {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim);
  margin: 10px 0 4px; padding-top: 8px; border-top: 1px dashed var(--border);
}
.bm-roster-section-lbl.bm-roster-section-lbl-first { margin-top: 4px; padding-top: 0; border-top: none; }
.bm-roster-count {
  font-weight: 700; color: var(--text); background: var(--bg-panel-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 7px; min-width: 18px; text-align: center; font-size: 0.7rem;
}
.bm-roster-list { min-height: 4px; margin-bottom: 4px; }
.bm-roster-list:empty::after { content: ''; }
/* Zugewiesen-Liste bekommt einen dauerhaften farbigen Rand, damit die Zugehoerigkeit auch beim
   schnellen Scrollen erkennbar bleibt (Nutzer-Feedback: der Trenner ging visuell unter). */
.bm-roster-list-assigned { border-left: 2px solid var(--accent-2); padding-left: 8px; margin-left: -2px; }
.bm-roster-item { margin-bottom: 4px; }
.bm-roster-item.bm-placed .bm-roster-row { opacity: 0.7; }

/* Gebaeude-Kapazitaet: eigenes Sidebar-Panel statt Eingabefeld direkt auf der Karte (die Karte
   selbst bleibt so aufgeraeumt fuers Bild - siehe Nutzer-Feedback). */
.bm-cap-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 2px; font-size: 0.82rem; border-bottom: 1px dashed var(--border); gap: 8px; }
.bm-cap-row:last-child { border-bottom: none; }
.bm-cap-input { width: 52px; font-size: 0.8rem; padding: 3px 5px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text); text-align: center; }

/* Notizfeld unter der Karte: die editierbare Textarea bleibt ausserhalb von #bm-export-wrap, nur
   die schlichte Textwiedergabe darunter wird mit ins PNG gerendert (kein Eingabefeld im Bild). */
#bm-export-wrap { background: transparent; }
.bm-notes-render { white-space: pre-wrap; word-break: break-word; background: rgba(15,20,32,0.9); color: #fff; font-size: 0.95rem; line-height: 1.5; padding: 14px 18px; border-radius: 0 0 var(--radius) var(--radius); margin-top: -1px; }
.bm-notes-editor textarea { width: 100%; min-height: 130px; resize: vertical; font-family: inherit; font-size: 0.88rem; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }

/* Oil-Pump-Legende: steht im Export-Bereich rechts neben der Karte, damit die Namen/Notizen
   (die bisher nur in der Sidebar editierbar waren) auch mit ins PNG kommen. Zieht live mit,
   was in den .bm-pump-panel-Listen in der Sidebar eingetragen wird (siehe syncPumpLegend). */
.bm-export-row { display: flex; gap: 14px; align-items: stretch; }
.bm-export-map-col { flex: 1; min-width: 0; }
.bm-oilpump-legend { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.bm-oilpump-box { background: rgba(15,20,32,0.92); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.bm-oilpump-box h4 { margin: 0 0 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-2); }
.bm-oilpump-legend-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.86rem; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06); color: #fff; }
.bm-oilpump-legend-row:last-child { border-bottom: none; }
.bm-oilpump-legend-row .name { font-weight: 600; white-space: nowrap; }
.bm-oilpump-legend-row .note { color: var(--text-dim); font-size: 0.78rem; text-align: right; overflow-wrap: anywhere; }
.bm-oilpump-empty { color: var(--text-dim); font-size: 0.8rem; font-style: italic; }
@media (max-width: 900px) {
  .bm-export-row { flex-direction: column; }
  .bm-oilpump-legend { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .bm-oilpump-box { flex: 1; min-width: 200px; }
}

/* Canyon Storm Hubs: eigene Positionen je Fraktion (Nutzer-Feedback - abweichend von Desert Storm's
   .bm-home-strip links/rechts). Rulebringers = ein Hub oben-mittig, Dawnbreakers = zwei Hubs unten
   (links/rechts), deren Seite je Event getauscht werden kann (siehe Hub-Swap-Button/-Route). */
.bm-hub { position: absolute; pointer-events: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; z-index: 1; }
.bm-hub-top { top: 2%; left: 20%; right: 20%; height: 11%; background: linear-gradient(180deg, rgba(53,208,163,0.4), rgba(53,208,163,0.16)); box-shadow: 0 0 24px rgba(53,208,163,0.25); }
.bm-hub-bottom-left, .bm-hub-bottom-right { bottom: 2%; width: 26%; height: 11%; }
.bm-hub-bottom-left { left: 3%; }
.bm-hub-bottom-right { right: 3%; }
.bm-hub-own { background: linear-gradient(0deg, rgba(53,208,163,0.4), rgba(53,208,163,0.16)); box-shadow: 0 0 24px rgba(53,208,163,0.25); }
.bm-hub-ally { background: linear-gradient(0deg, rgba(255,107,107,0.4), rgba(255,107,107,0.16)); box-shadow: 0 0 24px rgba(255,107,107,0.25); }
.bm-hub-label { font-size: 0.72rem; font-weight: 700; background: rgba(15,20,32,0.78); border-radius: 5px; padding: 2px 8px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* Judicator (Rulebringers-Sonder-Einheit ohne feste Position, siehe freePosition-Flag in
   battle-map.js) - gestrichelt statt fest umrandet, um "nur definiert, bewegt sich frei" zu zeigen. */
.bm-building.bm-building-free .bm-building-icon { border-style: dashed; border-color: rgba(255,255,255,0.55); background: linear-gradient(160deg, rgba(64,48,20,0.75), rgba(15,20,32,0.88)); }
.bm-building-free-hint { font-size: 0.64rem; font-style: italic; color: var(--text-dim); background: rgba(15,20,32,0.7); border-radius: 4px; padding: 1px 5px; display: inline-block; margin-top: 2px; }

/* Allianz-Tag pro Gebaeude (nur Dawnbreakers) - Freitext statt einzelner Spieler, siehe ally_tag
   auf battle_map_building_caps. */
.bm-allytag-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 6px; gap: 8px; }
.bm-allytag-lbl { font-size: 0.7rem; color: var(--text-dim); }
.bm-allytag-input { flex: 1; max-width: 120px; font-size: 0.78rem; padding: 3px 6px; border-radius: 4px; border: 1px dashed var(--accent-2); background: var(--bg); color: var(--text); }

/* Phasen-Uebersicht: kombinierte Ansicht ueber alle Phasen hinweg (Nutzer-Wunsch: "ich muss das in
   einem Bild haben" statt zwischen Reitern wechseln zu muessen) - Teil von #bm-export-wrap, damit
   sie mit ins PNG kommt. */
.bm-phase-overview { background: rgba(15,20,32,0.92); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; }
.bm-phase-overview h4 { margin: 0 0 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-2); }
.bm-phase-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 16px; }
.bm-phase-overview-building strong { display: block; font-size: 0.82rem; color: #fff; margin-bottom: 3px; }
.bm-phase-overview-building ul { list-style: none; margin: 0; padding: 0; }
.bm-phase-overview-building li { font-size: 0.82rem; color: #fff; padding: 1px 0; }
.bm-phase-overview-time { display: block; font-size: 0.68rem; color: var(--accent-2); }

/* --- R4 Stuff: R4/R5-Besetzung, Daily Task Post, Alliance Train, Event-Regeln (siehe
   views/r4-stuff/index.ejs) --- */
.r4-slot-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.r4-slot-pill {
  display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 6px 4px 14px;
}
.r4-slot-pill.r5 { border-color: var(--accent-2); }
.r4-slot-tag { font-size: 0.76rem; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.r4-slot-pill.r5 .r4-slot-tag { color: var(--accent-2); }
.r4-slot-pill select {
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-panel-alt); color: var(--text); font-size: 0.78rem; max-width: 140px;
}
.r4-search-select { position: relative; }
.r4-search-input {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-panel-alt); color: var(--text); font-size: 0.78rem; width: 118px;
}
.r4-search-input:focus { outline: none; border-color: var(--accent); }
.r4-search-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  background: var(--bg-panel-alt); border: 1px solid var(--border); border-radius: 8px;
  max-height: 190px; overflow-y: auto; min-width: 160px; box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.r4-search-dropdown.open { display: block; }
.r4-search-option { padding: 7px 12px; font-size: 0.78rem; color: var(--text); cursor: pointer; }
.r4-search-option:hover { background: var(--accent); color: #fff; }
.r4-search-option.r4-search-empty { color: var(--text-dim); font-style: italic; }
.r4-search-option.r4-search-empty:hover { background: var(--bg-panel); color: var(--text-dim); }

.r4-day-btn {
  background: var(--bg-panel-alt); border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; line-height: 1.35; min-width: 54px;
}
.r4-day-btn .r4-day-tag { font-size: 0.64rem; font-weight: 500; opacity: 0.85; }
.r4-day-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.r4-day-btn.today:not(.active) { border-color: var(--accent-2); color: var(--accent-2); }
.r4-day-btn:hover:not(.active) { color: var(--text); border-color: var(--accent); text-decoration: none; }

.r4-post-box {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; font-size: 0.92rem; line-height: 1.65; white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-height: 120px;
}
.copy-feedback { font-size: 0.78rem; color: var(--accent-2); opacity: 0; transition: opacity 0.15s; }
.copy-feedback.show { opacity: 1; }

.r4-train-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.r4-train-nav .r4-week-btn { text-decoration: none; }
.r4-train-range { font-weight: 700; font-size: 0.92rem; padding: 0 6px; font-variant-numeric: tabular-nums; }
.r4-train-name { font-size: 0.85rem; font-weight: 600; padding: 6px 4px; border-radius: 8px; word-break: break-word; }
.r4-train-name.set { background: rgba(91,140,255,0.15); color: var(--accent); }
.r4-train-name.other { background: rgba(53,208,163,0.15); color: var(--accent-2); }
.r4-train-name.empty { color: var(--text-dim); }
.r4-train-grid.readonly { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.r4-train-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.r4-train-cell { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; text-align: center; }
.r4-train-cell.today { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2) inset; }
.r4-train-dow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 2px; }
.r4-train-date { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 8px; }
.r4-train-select {
  width: 100%; padding: 6px 6px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-panel-alt); color: var(--text-dim); font-size: 0.78rem; font-weight: 600;
}
.r4-train-select.set { background: rgba(91,140,255,0.15); color: var(--accent); border-color: transparent; }
.r4-train-select.other { background: rgba(53,208,163,0.15); color: var(--accent-2); border-color: transparent; }

.r4-export-wrap { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.r4-week-btn {
  background: var(--bg-panel-alt); border: 1px solid var(--border); color: var(--text-dim);
  padding: 5px 12px; border-radius: 999px; font-size: 0.76rem; cursor: pointer; font-weight: 600;
}
.r4-week-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#trainCanvas { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; border-radius: var(--radius); border: 1px solid var(--border); display: block; }

.r4-event-form {
  display: none; margin-top: 16px; padding: 16px 18px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.r4-event-form.open { display: block; }
.r4-form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 14px; }
.r4-form-field { display: flex; flex-direction: column; gap: 4px; }
.r4-form-field label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); }
.r4-form-field input, .r4-form-field select {
  padding: 7px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-panel-alt);
  color: var(--text); font-size: 0.82rem;
}

/* Manual/Handbuch fuer R4/R5-Team (Stand 2026-09-10) - siehe src/routes/manual.js + views/manual/index.ejs.
   Inhalte kommen aus den ganz normalen locales/*.json ueber manual.<section>_h / manual.<section>_body,
   die Klassen unten decken die dort eingebetteten HTML-Fragmente ab (p.card-intro, .manual-callout,
   table.changelog) sowie die Sprung-Navigation oben auf der Seite. */
.manual-intro { color: var(--text-dim); font-size: 0.92rem; margin: 4px 0 4px; max-width: 640px; }
.manual-updated { color: var(--text-dim); font-size: 0.78rem; margin: 0 0 18px; }
.manual-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.manual-toc-link {
  background: var(--bg-panel-alt); border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.manual-toc-link:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
.manual-section-body { font-size: 0.9rem; line-height: 1.65; }
.manual-section-body h3 { font-size: 0.92rem; margin: 18px 0 6px; }
.manual-section-body h3:first-child { margin-top: 0; }
.manual-section-body p { margin: 0 0 12px; }
.manual-section-body ul { margin: 0 0 12px; padding-left: 20px; }
.manual-section-body li { margin-bottom: 5px; }
.manual-section-body code {
  background: var(--code-bg, var(--bg)); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: 0.85em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.manual-section-body .card-intro { font-size: 0.95rem; color: var(--text); margin: 0 0 16px; }
.manual-callout {
  border: 1px dashed var(--accent-2); border-radius: var(--radius); background: rgba(53,208,163,0.08);
  padding: 12px 16px; margin: 0 0 16px; font-size: 0.86rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
table.changelog { margin-top: 8px; }
table.changelog td { padding: 10px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
table.changelog tr:last-child td { border-bottom: none; }
table.changelog td.date { white-space: nowrap; color: var(--text-dim); font-size: 0.8rem; padding-right: 16px; width: 1%; }
table.changelog td.desc b { display: block; margin-bottom: 2px; }
table.changelog td.desc span { display: block; color: var(--text-dim); font-size: 0.85rem; }

/* ---------- SvS (Server-vs-Server): Spielerliste, siehe views/svs/*, views/public/svs.ejs ---------- */
.svs-load-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.svs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.svs-chip { border: 1px solid var(--border); background: var(--bg-panel-alt); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; color: var(--text-dim); font-family: inherit; }
.svs-chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.svs-chip-btn { cursor: pointer; }
.svs-chip-btn:hover { color: var(--text); }
.svs-chip-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: rgba(91,140,255,0.18); }
.svs-filters { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 6px; }
.svs-filter-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.svs-filter-label { font-size: 0.8rem; color: var(--text-dim); min-width: 78px; }
.svs-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.svs-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.svs-table th, .svs-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.svs-table th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); background: var(--bg-panel-alt); }
.svs-table tr:last-child td { border-bottom: 0; }
.svs-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.svs-table td.rank { color: var(--text-dim); width: 42px; font-variant-numeric: tabular-nums; }
.svs-table tbody tr:hover { background: rgba(91,140,255,0.06); }
.svs-table tr[hidden] { display: none; }
.svs-power { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.svs-table select { padding: 6px 8px; }
.svs-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.svs-dot.ok { background: var(--accent-2); }
.svs-dot.part { background: var(--warning); }
.svs-savebar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; }
.svs-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.svs-tag-tank { background: rgba(255,180,84,0.16); color: var(--warning); }
.svs-tag-missile { background: rgba(255,107,107,0.16); color: var(--danger); }
.svs-tag-air { background: rgba(91,200,255,0.16); color: #5bc8ff; }
.svs-tag-warleader { background: rgba(91,140,255,0.2); color: var(--accent); }
.svs-tag-engineer { background: rgba(53,208,163,0.16); color: var(--accent-2); }