:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222c;
  --text: #e8eaed;
  --muted: #9aa0aa;
  --accent: #ff8a3d;
  --part: #4cc9f0;
  --kurz: #ffb703;
  --lang: #ef476f;
  --water: #1a3a52;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

#sidebar {
  width: 320px;
  flex-shrink: 0;
  background: var(--panel);
  padding: 16px;
  overflow-y: auto;
  border-right: 1px solid #000;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#sidebar h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--accent);
}
.subtitle { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
#sidebar footer { margin-top: auto; color: var(--muted); }

.control {
  background: var(--panel-2);
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.control label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.control strong { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.control input[type="search"],
.control select {
  background: #0c0e13;
  color: var(--text);
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
}

#map {
  flex: 1;
  background: var(--water);
}

.leaflet-container {
  background: var(--water) !important;
  font-family: inherit;
}

.popup h3 { margin: 0 0 6px; font-size: 14px; color: var(--accent); }
.popup .meta { color: #555; font-size: 11px; margin-bottom: 6px; }
.popup ul { margin: 4px 0; padding-left: 18px; }
.popup li { margin: 2px 0; }
.popup .weapon { border-top: 1px solid #ddd; padding-top: 6px; margin-top: 6px; }
.popup .weapon b { color: #222; }
.popup .stats { color: #555; font-size: 11px; }

.leaflet-popup-content-wrapper { max-width: 360px; }
.leaflet-popup-content { margin: 10px 12px; }
.popup.scroll {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.popup details { margin-top: 6px; }
.popup details > summary {
  cursor: pointer;
  padding: 4px 6px;
  background: #f1f1f1;
  border-radius: 4px;
  font-weight: 600;
  color: #222;
  list-style: none;
}
.popup details > summary::-webkit-details-marker { display: none; }
.popup details[open] > summary { background: #e2e2e2; }
.popup details .weapon { border-top: none; padding-top: 4px; margin-top: 4px; }

.marker-pin {
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #0006;
  box-shadow: 0 2px 4px #0008;
}
.marker-pin.part { background: var(--part); }
.marker-pin.kurz { background: var(--kurz); }
.marker-pin.lang { background: var(--lang); }

.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-part { background: var(--part); }
.dot-kurz { background: var(--kurz); }
.dot-lang { background: var(--lang); }