:root {
  --bg: #11151a;
  --panel: rgba(17, 21, 26, 0.92);
  --text: #e8ecf1;
  --muted: #9aa5b1;
  --line: #2a323c;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#map { position: fixed; inset: 0; background: var(--bg); }

.panel { position: fixed; top: 12px; left: 12px; z-index: 1000; width: 260px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.panel-toggle { all: unset; display: block; width: 100%; padding: 10px 12px; font-weight: 700; font-size: 15px; cursor: pointer; }
.panel-toggle::after { content: "–"; float: right; color: var(--muted); }
.panel.collapsed .panel-toggle::after { content: "+"; }
.panel.collapsed .panel-body { display: none; }
.panel-body { padding: 0 12px 12px; min-width: 0; }
.panel-body * { min-width: 0; }
#source { overflow-wrap: anywhere; }
.panel-sub, .panel-note { margin: 0 0 10px; color: var(--muted); font-size: 12px; }
.panel-note { margin: 10px 0 0; }

.world { width: 100%; margin: 0 0 8px; padding: 6px 8px; background: #1d242c; color: var(--text); border: 1px solid var(--line); border-radius: 5px; font: inherit; }
.overlay-toggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); cursor: pointer; user-select: none; }
.overlay-toggle input { margin: 0; accent-color: #6b7c8f; }
.overlay-toggle[hidden] { display: none; }

.auth { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.auth[hidden], .auth [hidden] { display: none; }
.discord { width: 100%; padding: 7px 8px; background: #5865f2; color: #fff; border: 0; border-radius: 5px; cursor: pointer; font: inherit; font-weight: 600; }
.discord:hover { background: #4752c4; }
.markers-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.markers-toggle input { margin: 0; accent-color: #6b7c8f; }
.markers-toggle .count { margin-left: auto; color: var(--muted); font-size: 12px; }
.auth-message:empty { display: none; }
.auth-message { color: #f2c94c; }
button.link { all: unset; color: #8ab4f8; cursor: pointer; }
button.link:hover { text-decoration: underline; }

.marker-pin { width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; line-height: 1; background: #fff; border: 2px solid #11151a; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.marker-pin--private { background: #d6dde5; border-style: dashed; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.marker-popup .muted, .marker-form .muted { color: var(--muted); font-size: 12px; }
.marker-actions { display: flex; gap: 6px; margin-top: 8px; }
.marker-actions button, .marker-form button { padding: 4px 10px; background: #1d242c; color: var(--text); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; font: inherit; font-size: 12px; }
.marker-actions button.danger { color: #ff8a80; }
.marker-form { display: grid; gap: 6px; min-width: 200px; }
.marker-form select, .marker-form input[name="label"] { padding: 5px 6px; background: #1d242c; color: var(--text); border: 1px solid var(--line); border-radius: 5px; font: inherit; }
.marker-form label { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.marker-form .error { color: #ff8a80; }

.shapes { display: flex; gap: 12px; margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.shapes span { display: flex; align-items: center; gap: 5px; }
.shape { display: inline-block; background: #9aa5b1; border: 1px solid #000; }
.shape--small { width: 6px; height: 6px; border-radius: 50%; }
.shape--normal { width: 10px; height: 10px; border-radius: 50%; }

.glyph { flex: none; display: block; }
.extras .sub { padding-left: 22px; }

.kinds { list-style: none; margin: 0; padding: 0; }
.kinds label { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; user-select: none; }
.kinds input { margin: 0; accent-color: #6b7c8f; }
.swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.6); flex: none; }
.kinds .count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

.filter { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.filter[hidden] { display: none; }
.filter h2 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.filter h2 .hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
.kinds li.empty { opacity: 0.45; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 10px; background: #1d242c; color: var(--text); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; }
.chip[aria-pressed="true"] { background: #3d5a80; border-color: #8ab4f8; }
.items input:disabled + span { color: var(--muted); text-decoration: line-through; }
#filter-note:empty { display: none; }

.panel-actions { display: flex; gap: 6px; margin-top: 8px; }
.panel-actions button { flex: 1; padding: 5px 0; background: #1d242c; color: var(--text); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; font: inherit; font-size: 12px; }
.panel-actions button:hover { background: #26303a; }

.coords { position: fixed; right: 12px; bottom: 12px; z-index: 1000; padding: 4px 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); pointer-events: none; }
.coords:empty { display: none; }

.place { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; color: #f8fafc; font-weight: 600; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; }
.place--capital { font-size: 15px; }
.place--city { font-size: 13px; }
.place--village { font-size: 12px; font-weight: 500; }
.place--local { font-size: 11px; font-weight: 400; color: #d6dde5; }

.leaflet-container { background: var(--bg); font: inherit; }
.leaflet-tooltip.loot-tip { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); padding: 6px 8px; font-size: 12px; }
.leaflet-tooltip.loot-tip::before { display: none; }
.loot-tip-body { display: grid; gap: 6px; width: 220px; white-space: normal; }
.loot-picture { width: 220px; height: 220px; border-radius: 4px; display: block; }
.loot-pictures { display: flex; gap: 6px; align-items: flex-start; }
.loot-tip-body.with-photo { width: 366px; }
.loot-photo { width: 220px; height: 165px; border-radius: 4px; object-fit: cover; background: #1d242c; }
.with-photo .loot-picture { width: 140px; height: 140px; }
.leaflet-tooltip.loot-tip--photo { padding: 2px; border-radius: 3px; }
.loot-photo-card { display: block; width: 160px; height: 120px; object-fit: cover; border-radius: 2px; background: #1d242c; }
.loot-popup .leaflet-popup-content { margin: 8px; }
.loot-tip b { font-size: 13px; }
.loot-tip .muted { color: var(--muted); }

@media (max-width: 600px) {
  .panel { width: auto; right: 12px; }
}