/* DayZ-Live-Karte. Die Karte ist das Bild, alles andere bleibt leise:
   dunkles Oliv wie eine Kartentasche, Papierfarbe für Text, PT Sans für Kyrillisch und Latein. */

@font-face { font-family: "PT Sans"; font-weight: 400; font-display: swap; src: url(fonts/pt-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans"; font-weight: 400; font-display: swap; src: url(fonts/pt-sans-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans"; font-weight: 700; font-display: swap; src: url(fonts/pt-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans"; font-weight: 700; font-display: swap; src: url(fonts/pt-sans-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans Narrow"; font-weight: 400; font-display: swap; src: url(fonts/pt-sans-narrow-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans Narrow"; font-weight: 400; font-display: swap; src: url(fonts/pt-sans-narrow-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Sans Narrow"; font-weight: 700; font-display: swap; src: url(fonts/pt-sans-narrow-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Sans Narrow"; font-weight: 700; font-display: swap; src: url(fonts/pt-sans-narrow-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --case: #1f2a22;          /* Kartentasche */
  --case-raised: #2a372d;
  --paper: #eee8d6;         /* Kartenpapier */
  --paper-muted: #b3b59e;
  --rule: rgba(238, 232, 214, 0.14);
  --live: #8fbf7f;
  --road: #cd542a;          /* Straßenrot der Karte, hier für Warnungen */
  --sea: #8ebdd4;
  --ink: #2a2620;
  --ink-soft: #6b5a43;
  --marine: #2f6f93;
  --halo: rgba(243, 239, 224, 0.9);
  --shadow: 0 8px 28px rgba(14, 20, 15, 0.38);
  --sans: "PT Sans", system-ui, sans-serif;
  --narrow: "PT Sans Narrow", "PT Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--sea); color: var(--paper); font: 15px/1.4 var(--sans); }
#map { position: fixed; inset: 0; background: var(--sea); }
.leaflet-container { font-family: var(--sans); background: var(--sea); }
.terrain { image-rendering: auto; }

button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* --- Status oben links --- */
.status {
  position: fixed; z-index: 1000; top: max(14px, env(safe-area-inset-top)); left: 14px;
  min-width: 210px; max-width: calc(100vw - 28px); padding: 10px 14px 11px;
  background: var(--case); border-radius: 8px; box-shadow: var(--shadow);
}
.status__top { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.status__world { margin: 0; font: 700 22px/1.1 var(--narrow); letter-spacing: 0.01em; }
.status__clock { font: 700 18px/1 var(--narrow); font-variant-numeric: tabular-nums; color: var(--paper-muted); }
.status__line { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; }
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-muted); flex: none; }
.status__dot.is-live { background: var(--live); }
.status__dot.is-stale { background: var(--road); }
.status__age { margin: 2px 0 0 17px; font-size: 13px; color: var(--paper-muted); }
.status__age.is-stale { color: #f0b49c; }

/* --- Spielerliste rechts, auf dem Handy als Leiste unten --- */
.roster {
  position: fixed; z-index: 1000; top: 14px; right: 14px; width: 270px;
  max-height: calc(100vh - 120px); display: flex; flex-direction: column;
  background: var(--case); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden;
}
.roster__head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 11px 14px; border: 0; background: none; cursor: default;
  font: 700 17px/1 var(--narrow);
}
.roster__count {
  min-width: 26px; padding: 3px 7px; border-radius: 99px; background: var(--case-raised);
  text-align: center; font: 700 14px/1 var(--narrow); font-variant-numeric: tabular-nums;
}
.roster__body { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--rule); }
.roster__list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; }
.roster__player {
  display: grid; grid-template-columns: 12px 1fr; column-gap: 10px; width: 100%;
  padding: 8px 14px; border: 0; background: none; text-align: left; cursor: pointer;
}
.roster__player:hover { background: var(--case-raised); }
.roster__swatch { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--paper); }
.roster__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster__where { grid-column: 2; font-size: 13px; color: var(--paper-muted); }
.roster__empty { margin: 0; padding: 12px 14px; font-size: 14px; color: var(--paper-muted); }
.roster__all {
  margin: 4px 14px 14px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--case-raised); cursor: pointer; font-weight: 700;
}
.roster__all:hover { border-color: var(--paper-muted); }
.roster__all[hidden], .roster__empty[hidden] { display: none; }

@media (max-width: 640px) {
  .status { right: 14px; min-width: 0; }
  .roster {
    top: auto; bottom: max(14px, env(safe-area-inset-bottom)); left: 14px; right: 14px; width: auto;
    max-height: 55vh;
  }
  .roster__head { cursor: pointer; }
  .roster__body { display: none; }
  .roster.is-open .roster__body { display: flex; }
  .leaflet-bottom { bottom: 64px; }
}

/* --- Leaflet-Bedienelemente im gleichen Ton --- */
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow) !important; border-radius: 8px !important; overflow: hidden; }
.leaflet-bar a, .leaflet-bar a:hover {
  width: 36px !important; height: 36px !important; line-height: 34px !important;
  background: var(--case); color: var(--paper); border-bottom: 1px solid var(--rule) !important;
  font: 400 22px/34px var(--sans);
}
.leaflet-bar a:hover { background: var(--case-raised); }
.leaflet-bar a.leaflet-disabled { color: #5d665a; background: var(--case); }
.leaflet-control-scale-line {
  background: rgba(31, 42, 34, 0.85); color: var(--paper); border-color: var(--paper);
  font: 700 12px/1.4 var(--narrow);
}
.coords {
  padding: 5px 9px; border-radius: 6px; background: rgba(31, 42, 34, 0.85); color: var(--paper);
  font: 700 14px/1 var(--narrow); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* --- Ortsnamen: kyrillisch wie auf der Spielkarte, lateinisch darunter --- */
.place { pointer-events: none; }
.place__label {
  position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;
  color: var(--ink); font-family: var(--narrow); line-height: 1.05;
  text-shadow: 0 0 2px var(--halo), 0 0 3px var(--halo), 0 0 6px var(--halo);
}
.place__ru { display: block; font-weight: 700; }
.place__la { display: block; font-size: 0.72em; font-weight: 400; color: var(--ink-soft); }
.place--Capital .place__label { font-size: 21px; letter-spacing: 0.04em; }
.place--City .place__label { font-size: 16px; letter-spacing: 0.02em; }
.place--Village .place__label { font-size: 13px; }
.place--Village .place__ru { font-weight: 400; }
.place--Local .place__label, .place--Camp .place__label, .place--Ruin .place__label { font-size: 12px; color: #4a4339; }
.place--Local .place__ru, .place--Camp .place__ru, .place--Ruin .place__ru { font-weight: 400; }
.place--Marine .place__label { font-size: 12px; color: var(--marine); }
.place--Marine .place__la { color: var(--marine); }
.place--Hill .place__label { font-size: 11px; color: #7a5530; }
.place--Hill .place__ru { font-weight: 400; }

/* --- Gitter --- */
.gridnum { pointer-events: none; }
.gridnum span {
  position: absolute; transform: translate(-50%, -50%); font: 700 11px/1 var(--narrow);
  color: rgba(42, 38, 32, 0.55); text-shadow: 0 0 3px var(--halo);
}

/* --- Spieler --- */
.leaflet-marker-icon.player { overflow: visible; }
.player { --c: #d81b60; }
.player__cone {
  position: absolute; left: -13px; top: -30px; width: 26px; height: 30px;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, var(--c), rgba(255, 255, 255, 0));
  clip-path: polygon(50% 100%, 0 0, 100% 0); opacity: 0.6;
}
.player__dot {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 2px var(--paper), 0 1px 5px rgba(0, 0, 0, 0.5);
}
.player__name {
  position: absolute; left: 13px; top: -11px; padding: 2px 7px 3px 6px; white-space: nowrap;
  background: var(--case); color: var(--paper); border-left: 3px solid var(--c); border-radius: 3px;
  font: 700 13px/1.2 var(--narrow); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* --- Verlauf (Seitenleiste auf der Admin-Karte) --- */
.roster__tools { display: flex; gap: 8px; margin: -6px 14px 14px; }
.roster__tools .roster__all { flex: 1; margin: 0; }
.roster__tools[hidden] { display: none; }
.history {
  position: fixed; z-index: 1100; top: 14px; right: 14px; bottom: 14px; width: min(760px, calc(100vw - 28px));
  display: flex; flex-direction: column; background: var(--case); color: var(--paper);
  border-radius: 8px; box-shadow: var(--shadow); overflow: hidden;
}
.history[hidden] { display: none; }
.history__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.history__title { margin: 0; font: 700 22px/1 var(--narrow); }
.history__close { border: 0; background: none; color: var(--paper); font-size: 20px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.history__close:hover { background: var(--case-raised); }
.history__body { overflow-y: auto; padding: 14px 16px 18px; }
.history__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.history__stat { background: var(--case-raised); border-radius: 6px; padding: 10px 12px; }
.history__stat strong { display: block; font: 700 26px/1.1 var(--narrow); font-variant-numeric: tabular-nums; }
.history__stat span { font-size: 13px; color: var(--paper-muted); }
.history__section h3 { margin: 18px 0 8px; font: 700 17px/1 var(--narrow); color: #e3d6b4; }
.history__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.history__table th { text-align: left; font-weight: 700; color: var(--paper-muted); padding: 6px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.history__table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; vertical-align: top; }
.history__table a { color: #e9c9a0; }
.history__online { color: var(--live); font-weight: 700; }
.history__note { color: var(--paper-muted); font-size: 13px; margin: 14px 0 0; }
@media (max-width: 640px) {
  .history { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; }
  .history__table { font-size: 13px; }
}

/* --- Admin: Anmeldung, Bereich links, Knöpfe --- */
.roster__admin.is-on::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: var(--live); vertical-align: 1px;
}
.btn {
  padding: 7px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--case-raised);
  color: var(--paper); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--paper-muted); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn--primary { background: var(--paper); color: var(--case); border-color: var(--paper); }
.btn--danger { border-color: rgba(205, 84, 42, 0.6); color: #f3c3ae; }
.btn--danger.is-armed, .btn.is-armed { background: var(--road); border-color: var(--road); color: #fff; }
.btn--quiet { background: none; border-color: transparent; color: var(--paper-muted); padding: 4px 6px; }
.btn--small { padding: 3px 8px; font-size: 13px; }
.input {
  min-width: 0; padding: 7px 9px; border: 1px solid var(--rule); border-radius: 6px;
  background: #18211b; color: var(--paper); font: inherit;
}
.input:focus-visible { outline: 2px solid var(--paper); outline-offset: 0; }
.input::placeholder { color: #8c9180; }
.input--count { width: 64px; flex: none; }
.input--time { width: 120px; flex: none; color-scheme: dark; }

.login {
  width: min(380px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 8px;
  background: var(--case); color: var(--paper); box-shadow: var(--shadow);
}
.login::backdrop { background: rgba(14, 20, 15, 0.55); }
.login__form { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 16px; }
.login__title { margin: 0; font: 700 22px/1.1 var(--narrow); }
.login__hint { margin: 0; font-size: 14px; color: var(--paper-muted); }
.login__field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; }
.login__field input { padding: 8px 10px; border: 1px solid var(--rule); border-radius: 6px; background: #18211b; color: var(--paper); font: 400 15px/1.3 var(--sans); }
.login__error { margin: 0; min-height: 1.2em; font-size: 14px; color: #f0b49c; }
.login__actions { display: flex; justify-content: flex-end; gap: 8px; }

.admin {
  position: fixed; z-index: 1050; left: 14px; top: 118px; bottom: 76px; width: 344px;
  display: flex; flex-direction: column; background: var(--case); color: var(--paper);
  border-radius: 8px; box-shadow: var(--shadow); overflow: hidden;
}
.admin[hidden] { display: none; }
.admin__head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--rule); }
.admin__title { flex: 1; min-width: 0; margin: 0; font: 700 21px/1.1 var(--narrow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin__back, .admin__close { border: 0; background: none; color: var(--paper); font-size: 19px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.admin__back { margin-left: -8px; }
.admin__back:hover, .admin__close:hover { background: var(--case-raised); }
.admin__back[hidden] { display: none; }
.admin__body { flex: 1; overflow-y: auto; padding: 12px 16px 16px; }
.admin__player[hidden], .admin__server[hidden] { display: none; }
.admin__meta { margin: 0 0 8px; font-size: 14px; color: var(--paper-muted); }
.admin__meta a { color: #e9c9a0; font-size: 13px; }
.admin__hint { margin: 0 0 4px; font-size: 14px; color: var(--paper-muted); }
.admin__chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.admin__chip { padding: 2px 8px; border-radius: 99px; background: var(--case-raised); font-size: 13px; }
.admin__chip--warn { background: rgba(205, 84, 42, 0.28); color: #f6cdbb; }
.admin__chip--good { background: rgba(143, 191, 127, 0.22); color: #cfe6c6; }
.admin__meters { display: grid; gap: 5px; margin-bottom: 6px; }
.meter { display: grid; grid-template-columns: 86px 1fr 44px; align-items: center; gap: 8px; font-size: 13px; }
.meter__label { color: var(--paper-muted); }
.meter__bar { height: 6px; border-radius: 3px; background: #18211b; overflow: hidden; }
.meter__fill { display: block; height: 100%; background: var(--live); }
.meter--low .meter__fill { background: var(--road); }
.meter__value { text-align: right; font-variant-numeric: tabular-nums; }
.admin__group { margin: 0; padding: 12px 0 0; border: 0; }
.admin__group h3 { margin: 0 0 7px; font: 700 15px/1.1 var(--narrow); color: #e3d6b4; }
.admin__group--danger { margin-top: 6px; }
.admin__group--danger > .input { width: 100%; margin-bottom: 7px; }
.admin__row { display: flex; gap: 6px; }
.admin__row + .admin__row { margin-top: 6px; }
.admin__row[hidden] { display: none; }
.admin__row .input { flex: 1; }
.admin__row--wrap { flex-wrap: wrap; }
.admin__list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.admin__item { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.admin__item small { grid-column: 1; color: var(--paper-muted); font-size: 12px; }
.admin__item .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.admin__log .admin__item { grid-template-columns: 1fr; }
.admin__item.is-err span { color: #f0b49c; }
.admin__empty { padding: 4px 0; color: var(--paper-muted); font-size: 14px; }
.admin__foot { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 0; font-size: 13px; color: var(--paper-muted); }
.admin__result { margin: 0; padding: 10px 16px; border-top: 1px solid var(--rule); font-size: 14px; min-height: 40px; }
.admin__result:empty { display: none; }
.admin__result.is-ok { color: #cfe6c6; }
.admin__result.is-err { color: #f6cdbb; background: rgba(205, 84, 42, 0.16); }
.admin__result.is-busy { color: var(--paper-muted); }
#map.is-picking, #map.is-picking .leaflet-interactive { cursor: crosshair; }
.leaflet-marker-icon.player { cursor: pointer; }
.player.is-selected .player__dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 5px var(--c), 0 1px 8px rgba(0, 0, 0, 0.6); }
.player.is-selected .player__name { background: var(--paper); color: var(--case); }
@media (max-width: 640px) {
  .admin { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 72vh; border-radius: 12px 12px 0 0; }
  .admin.is-picking .admin__body { display: none; }   /* Karte frei machen, um das Ziel anzutippen */
}

/* --- Admin: Ausrüstung, Fahrzeuge, Zombies, Einstellungen --- */
.btn--wide { flex: 1; }
.admin__row--center { align-items: center; }
.admin__group[hidden] { display: none; }
.admin__hint code { font-size: 12px; background: #18211b; padding: 1px 4px; border-radius: 3px; color: var(--paper); }
.range { flex: 1; accent-color: var(--live); min-width: 0; }
.range__out { min-width: 34px; text-align: right; font: 700 15px/1 var(--narrow); font-variant-numeric: tabular-nums; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin-top: 4px; }
.switch input { width: 18px; height: 18px; accent-color: var(--live); margin: 0; }
.switch--small { font-size: 13px; color: var(--paper-muted); }
.input--area { width: 100%; min-height: 120px; resize: vertical; font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; margin-bottom: 7px; }

/* Inventar-Liste in der Spielerkarte */
.inv { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; max-height: 260px; overflow-y: auto; border-top: 1px solid var(--rule); }
.inv[hidden] { display: none; }
.inv__item { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0 4px calc(var(--depth, 0) * 14px); border-bottom: 1px solid var(--rule); }
.inv__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv__meta { flex: none; color: var(--paper-muted); font-variant-numeric: tabular-nums; }
.inv__item--h3 .inv__meta, .inv__item--h4 .inv__meta { color: #f0b49c; }

/* Fahrzeuge auf der Admin-Karte */
.leaflet-marker-icon.car { overflow: visible; }
.car__body {
  position: absolute; left: -6px; top: -9px; width: 12px; height: 18px; border-radius: 3px 3px 2px 2px;
  background: #2f6f93; box-shadow: 0 0 0 2px var(--paper), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.car__body::before { content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 4px; border-radius: 1px; background: rgba(238, 232, 214, 0.75); }
.car.is-driven .car__body { background: var(--road); }

/* Auswahl-Dialog für Gegenstände */
.picker {
  width: min(980px, calc(100vw - 32px)); height: min(720px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 8px;
  background: var(--case); color: var(--paper); box-shadow: var(--shadow);
}
.picker[open] { display: flex; flex-direction: column; }
.picker::backdrop { background: rgba(14, 20, 15, 0.55); }
.picker__head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 18px; border-bottom: 1px solid var(--rule); }
.picker__title { flex: 1; min-width: 0; margin: 0; font: 700 21px/1.1 var(--narrow); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker__filters { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.picker__filters .input { width: 100%; }
.picker__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { padding: 4px 11px; border: 1px solid var(--rule); border-radius: 99px; background: none; color: var(--paper-muted); font-size: 14px; cursor: pointer; }
.pill:hover { border-color: var(--paper-muted); color: var(--paper); }
.pill.is-on { background: var(--paper); border-color: var(--paper); color: var(--case); font-weight: 700; }
.picker__main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.picker__list { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; border-right: 1px solid var(--rule); }
.picker__item { display: flex; flex-direction: column; width: 100%; padding: 7px 18px; border: 0; background: none; text-align: left; cursor: pointer; }
.picker__item:hover { background: var(--case-raised); }
.picker__item.is-on { background: var(--case-raised); box-shadow: inset 3px 0 0 var(--live); }
.picker__name { font-weight: 700; }
.picker__meta { font-size: 12px; color: var(--paper-muted); }
.picker__list .admin__empty { padding: 10px 18px; }
.picker__detail { overflow-y: auto; padding: 14px 18px 18px; }
.picker__dhead h3 { margin: 0 0 2px; font: 700 22px/1.15 var(--narrow); }
.picker__give { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
.picker__lbl { font-size: 13px; color: var(--paper-muted); }
.picker__related h4 { margin: 16px 0 6px; font: 700 15px/1.1 var(--narrow); color: #e3d6b4; }
.picker__rel { list-style: none; margin: 0; padding: 0; }
.picker__rel li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--rule); }
.picker__link { border: 0; background: none; color: #e9c9a0; text-align: left; cursor: pointer; padding: 3px 0; font-size: 14px; }
.picker__link:hover { text-decoration: underline; }
.picker > .admin__result { border-top: 1px solid var(--rule); }
@media (max-width: 720px) {
  .picker { width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; }
  .picker__main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1.2fr); }
  .picker__list { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* KI-Bots in der Admin-Karte: Marker wie Spieler, aber mit Raute statt Kreis und gestricheltem Namensschild */
.player--bot .player__dot { border-radius: 2px; transform: rotate(45deg) scale(0.86); }
.player--bot .player__name { border-left-style: dashed; font-weight: 400; opacity: 0.92; }
.player--bot .player__cone { opacity: 0.4; }
.roster__player--bot .roster__swatch { border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.roster__player--bot .roster__name { font-weight: 400; }
.admin__player.is-bot .not-bot { display: none; }

/* Airdrop: Kiste in Straßenrot, damit sie auf der hellen Wüstenkarte auffällt; geplündert verblasst sie */
.leaflet-marker-icon.drop { overflow: visible; }
.drop__box {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 2px;
  background: var(--road); box-shadow: 0 0 0 2px var(--paper), 0 1px 6px rgba(0, 0, 0, 0.55);
}
.drop__box::before, .drop__box::after { content: ""; position: absolute; background: rgba(238, 232, 214, 0.8); }
.drop__box::before { left: 7px; top: 0; bottom: 0; width: 2px; }
.drop__box::after { top: 7px; left: 0; right: 0; height: 2px; }
.drop__label {
  position: absolute; left: 14px; top: -11px; padding: 2px 7px 3px 6px; white-space: nowrap;
  background: var(--case); color: var(--paper); border-left: 3px solid var(--road); border-radius: 3px;
  font: 700 13px/1.2 var(--narrow); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.drop.is-looted .drop__box { background: var(--paper-muted); }
.drop.is-looted .drop__label { border-left-color: var(--paper-muted); font-weight: 400; opacity: 0.85; }