/* ===== 丝之歌互动地图 深色主题 ===== */

:root {
  --bg: #0b0b0d;
  --bg-panel: #141417;
  --bg-hover: #1e1e24;
  --border: #2a2a32;
  --text: #e8e0d0;        /* 米白 */
  --text-dim: #9a927f;
  --accent: #c9a86a;      /* 暗金，贴合游戏风格 */
  --danger: #b05555;
  --sidebar-w: 300px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: 14px;
}

button {
  font: inherit;
  color: var(--text);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }

/* ===== 布局 ===== */

#map-wrap {
  position: absolute;
  inset: 0 0 0 var(--sidebar-w);
  transition: left .2s ease;
}
#map {
  width: 100%;
  height: 100%;
  background: #000;
}
body.sidebar-collapsed #map-wrap { left: 0; }

#sidebar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: transform .2s ease;
}
body.sidebar-collapsed #sidebar { transform: translateX(-100%); }

#sidebar-toggle {
  position: absolute;
  top: 10px; left: calc(var(--sidebar-w) + 10px);
  z-index: 1001;
  width: 36px; height: 36px;
  padding: 0;
  font-size: 18px;
  background: rgba(20, 20, 23, .9);
  transition: left .2s ease;
}
body.sidebar-collapsed #sidebar-toggle { left: 10px; }

/* ===== 侧边栏各部分 ===== */

.sidebar-header {
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.sidebar-header h1 {
  margin: 0;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: 1px;
}

.search-box {
  display: flex;
  gap: 6px;
  padding: 10px 12px 6px;
}
#search-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
}
#search-input:focus { border-color: var(--accent); }
#search-clear { flex: none; }

.sidebar-actions {
  display: flex;
  gap: 8px;
  padding: 4px 12px 10px;
}
.sidebar-actions button { flex: 1; }

.sidebar-tree {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
}

/* 分组行 */
.group-row, .category-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.group-row:hover, .category-row:hover { background: var(--bg-hover); }
.group-row { font-weight: 600; margin-top: 4px; }
.category-row { padding-left: 26px; font-weight: 400; }

.group-row .row-icon, .category-row .row-icon {
  width: 20px; height: 20px;
  flex: none;
}
.group-row .row-name, .category-row .row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-count {
  flex: none;
  font-size: 12px;
  color: var(--text-dim);
}
.group-caret {
  flex: none;
  width: 14px;
  color: var(--text-dim);
  font-size: 10px;
  text-align: center;
}

.category-list { display: none; }
.group.open .category-list { display: block; }

/* 搜索高亮 */
.sidebar-tree.searching .group-row,
.sidebar-tree.searching .category-row { opacity: .35; }
.sidebar-tree.searching .search-hit { opacity: 1; }
.search-hit .row-name { color: var(--accent); }

/* 图层开关 */
.sidebar-layers {
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 16px;
}
.layer-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* 进度 */
.sidebar-progress {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.progress-text { margin-bottom: 6px; color: var(--text-dim); }
.progress-bar {
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .2s ease;
}
.btn-danger { border-color: var(--danger); color: #e0a0a0; }
.btn-danger:hover { background: var(--danger); color: #fff; }

.sidebar-credit {
  padding: 8px 14px 12px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-dim);
}

/* ===== 地图标记 ===== */

.marker-el { position: relative; }
.marker-el img {
  width: 36px; height: 36px;
  display: block;
  transform-origin: center;
  transition: transform .12s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
/* 高缩放级别时适度放大 */
#map.zoomed-in .marker-el img { transform: scale(1.333); }
.marker-el:hover img { transform: scale(1.25); }
#map.zoomed-in .marker-el:hover img { transform: scale(1.5); }

/* 已收集：灰化 + 对勾角标 */
.marker-el.collected img {
  opacity: .35;
  filter: grayscale(1);
}
.marker-el.collected::after {
  content: "✓";
  position: absolute;
  top: -6px; right: -6px;
  width: 16px; height: 16px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: #0b0b0d;
  background: var(--accent);
  border-radius: 50%;
  z-index: 1;
}

/* 区域名标签 */
.location-label {
  background: none;
  border: none;
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  text-shadow:
    0 0 4px #000, 0 0 8px #000,
    1px 1px 2px #000, -1px -1px 2px #000;
  pointer-events: none;
}

/* ===== 弹窗 ===== */

.leaflet-popup-content-wrapper {
  background: var(--bg-panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.leaflet-popup-tip { background: var(--bg-panel); border: 1px solid var(--border); }
.leaflet-popup-content { margin: 10px 14px; line-height: 1.6; }
.leaflet-container a.leaflet-popup-close-button { color: var(--text-dim); }

.popup-title { font-size: 15px; font-weight: 700; color: var(--accent); }
.popup-cat { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.popup-notes { margin: 6px 0; white-space: pre-line; }
.popup-tags { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.popup-tag {
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
}
.popup-tag.tag-missable { border-color: var(--danger); color: #e0a0a0; }
.popup-btn { margin-top: 6px; width: 100%; }

/* ===== 移动端 ===== */

@media (max-width: 768px) {
  :root { --sidebar-w: 260px; }
  body:not(.sidebar-collapsed) #sidebar { box-shadow: 0 0 24px rgba(0,0,0,.8); }
}