/* 四大名著文学地图 · 国风样式（与全站 style.css 配合） */
.map-page {
  background:
    radial-gradient(circle at 20% 0%, rgba(178,34,34,.05), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(212,175,55,.06), transparent 45%),
    #f7f1e3;
}
.map-head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 20px 6px;
}
.crumb {
  font-size: 13px;
  color: #8a7a5c;
  margin-bottom: 8px;
}
.crumb a { color: #8a7a5c; text-decoration: none; }
.crumb a:hover { color: #b22222; }
.map-title {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 30px;
  color: #7a1f1f;
  margin: 4px 0 6px;
  letter-spacing: 2px;
}
.map-title .seal {
  display: inline-block;
  background: #b22222;
  color: #fff7e6;
  font-size: 14px;
  border-radius: 6px;
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 10px;
  letter-spacing: 1px;
  box-shadow: 0 1px 0 #7a1f1f;
}
.map-sub {
  color: #6b5d44;
  font-size: 15px;
  margin: 0 0 14px;
  line-height: 1.7;
}

/* 视图切换 Tabs */
.map-tabs {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 2px solid #e6dcc4;
}
.map-tab {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 16px;
  color: #6b5d44;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 16px;
  cursor: pointer;
  transition: .15s;
}
.map-tab:hover { color: #b22222; }
.map-tab.active {
  color: #b22222;
  border-bottom-color: #b22222;
  font-weight: 700;
}

/* 主体：侧栏 + 地图 */
.map-body {
  max-width: 1180px;
  margin: 14px auto 30px;
  padding: 0 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.map-side {
  flex: 0 0 270px;
  max-height: 620px;
  overflow-y: auto;
  background: #fffdf7;
  border: 1px solid #e6dcc4;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(120,90,40,.06);
}
.map-side .side-h {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 15px;
  color: #7a1f1f;
  padding: 6px 8px;
  border-bottom: 1px dashed #e6dcc4;
  margin-bottom: 6px;
}
.side-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 14px;
  color: #4a3f2c;
  cursor: pointer;
  line-height: 1.5;
}
.side-item:hover { background: #f3ead3; }
.side-item .si-no {
  color: #b22222;
  font-weight: 700;
  margin-right: 6px;
}
.side-item .si-meta { color: #8a7a5c; font-size: 12px; }
/* 侧栏「人物 »」：回链到人物大全对应条目 */
.side-item .si-link {
  float: right;
  color: #b22222;
  font-size: 12px;
  border-bottom: 1px dotted #b22222;
}
.side-item:hover .si-link { color: #d2691e; border-bottom-color: #d2691e; }

.map-canvas {
  flex: 1 1 auto;
  height: 620px;
  border: 1px solid #e6dcc4;
  border-radius: 10px;
  overflow: hidden;
  background: #e9e3d4;
  box-shadow: 0 2px 14px rgba(120,90,40,.10);
}
#map { width: 100%; height: 100%; }

/* 地理视图：离线国风底图（经纬网 + 朱印标记，不依赖外网瓦片） */
.leaflet-container { background: #f3ead4; }
.leaflet-container .xy-pin {
  background: radial-gradient(circle at 50% 38%, #c0392b, #7a1f1f);
  border: 2px solid #fff7e6;
  border-radius: 50%;
  width: 26px; height: 26px;
  box-shadow: 0 1px 4px rgba(80,20,20,.5);
  display: flex; align-items: center; justify-content: center;
  color: #fff7e6;
  font: 700 13px/1 "KaiTi","STKaiti","楷体",serif;
}
.leaflet-container .xy-pin span { pointer-events: none; }
.leaflet-container .xy-pin-end {
  background: radial-gradient(circle at 50% 38%, #d4af37, #9a6b00);
  border-color: #fffdf7;
  color: #3a2410;
}
.leaflet-container .xy-region {
  background: rgba(247,241,227,.82);
  border: 1px solid rgba(178,34,34,.38);
  color: #7a1f1f;
  font: 700 14px/1 "KaiTi","STKaiti","楷体",serif;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(120,90,40,.2);
}
.leaflet-container .xy-grid {
  background: transparent;
  border: none;
  color: #a8946a;
  font: 11px/1 Arial, "Helvetica Neue", sans-serif;
  white-space: nowrap;
  pointer-events: none;
}

/* 图层/图片切换条 */
.layer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}
.layer-btn {
  font-size: 13px;
  color: #6b5d44;
  background: #fffdf7;
  border: 1px solid #e6dcc4;
  border-radius: 16px;
  padding: 5px 14px;
  cursor: pointer;
}
.layer-btn:hover { border-color: #b22222; color: #b22222; }
.layer-btn.active { background: #b22222; color: #fff7e6; border-color: #b22222; }

/* 图片网格（108将 / 八十一难） */
.gallery {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  max-height: 620px;
  overflow-y: auto;
  padding: 4px;
}
.g-card {
  background: #fffdf7;
  border: 1px solid #e6dcc4;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  transition: .15s;
}
.g-card:hover { box-shadow: 0 4px 14px rgba(120,90,40,.18); transform: translateY(-2px); }
.g-card img { width: 100%; height: 150px; object-fit: cover; background: #efe7d4; display: block; }
.g-card .g-name {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 14px;
  color: #4a3f2c;
  padding: 6px 4px;
}
.g-card .g-name b { color: #b22222; }

/* Leaflet 弹窗国风化 */
.leaflet-popup-content-wrapper {
  background: #fffdf7;
  color: #3a3022;
  border-radius: 8px;
  border: 1px solid #e6dcc4;
  box-shadow: 0 4px 18px rgba(120,90,40,.22);
}
.leaflet-popup-tip { background: #fffdf7; border: 1px solid #e6dcc4; }
.leaflet-container a.leaflet-popup-close-button { color: #b22222; }
.pop { max-width: 260px; font-size: 13px; line-height: 1.7; }
.pop h3 {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  margin: 0 0 6px;
  color: #7a1f1f;
  font-size: 17px;
  border-bottom: 1px dashed #e6dcc4;
  padding-bottom: 4px;
}
.pop p { margin: 3px 0; color: #4a3f2c; }
.pop .pop-img {
  float: right;
  width: 96px;
  height: 128px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 0 6px 8px;
  border: 1px solid #e6dcc4;
}
.pop a { color: #b22222; }
.pop .pop-near {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dashed #e6dcc4;
  color: #6b5b3e;
  font-size: 12.5px;
}
.pop .pop-near b { color: #8c2f24; }

/* 图例：区分现代城市与古代地名 */
.map-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 600;
  display: none;
  gap: 14px;
  background: rgba(247, 241, 227, .94);
  border: 1px solid #e0d3ae;
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 12px;
  color: #5b4f39;
  box-shadow: 0 2px 6px rgba(90, 70, 40, .12);
  pointer-events: none;
}
.map-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}
.map-legend .lg-city { background: #8a7a55; box-shadow: 0 0 0 1.5px rgba(245, 238, 218, .9); }
.map-legend .lg-old { background: #b22222; border-radius: 2px; }

/* 现代城市标注（古今对照用）：非交互，压在古代标记下层 */
.leaflet-container .city-lb {
  background: none;
  border: 0;
  font: 12px/1.25 "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  color: #6b5b3e;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 3px #f5eeda, 0 0 3px #f5eeda, 0 0 3px #f5eeda;
}
.leaflet-container .city-lb span { margin-left: 1px; }
.leaflet-container .city-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8a7a55;
  box-shadow: 0 0 0 1.5px rgba(245, 238, 218, .9);
  vertical-align: middle;
}
.leaflet-container .city-lb-big { font-size: 13px; font-weight: 700; color: #8c2f24; }
.leaflet-container .city-lb-big .city-dot { width: 7px; height: 7px; background: #8c2f24; }

/* 总览页（保留旧样式兼容） */
.map-grid {
  max-width: 1180px;
  margin: 18px auto 36px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.map-card {
  background: #fffdf7;
  border: 1px solid #e6dcc4;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: .18s;
  box-shadow: 0 2px 10px rgba(120,90,40,.07);
}
.map-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(120,90,40,.18); }
.card-cover { width: 100%; height: 150px; object-fit: cover; display: block; }
.card-body { padding: 14px 16px 18px; }
.card-body h3 {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  color: #7a1f1f;
  font-size: 20px;
  margin: 0 0 8px;
}
.card-desc { color: #5b4f3a; font-size: 13px; line-height: 1.7; margin: 0 0 10px; }
.card-go { color: #b22222; font-size: 14px; font-weight: 700; }

@media (max-width: 820px) {
  .map-body { flex-direction: column; }
  .map-side { flex: none; width: 100%; max-height: 220px; }
  .map-canvas { width: 100%; height: 460px; }
  .gallery { max-height: 460px; }
}

/* 年份切换条（三国编年史） */
.year-lab {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 16px;
  font-weight: 700;
  color: #7a1f1f;
  padding: 4px 10px;
  white-space: nowrap;
}
.year-sel {
  font-size: 13px;
  color: #4a3f2c;
  border: 1px solid #e6dcc4;
  border-radius: 16px;
  padding: 5px 10px;
  background: #fffdf7;
  cursor: pointer;
}
.side-year { margin-bottom: 6px; }

/* 英雄谱卡片墙（三国英雄谱） */
.hero-card {
  position: relative;
  background: #fffdf7;
  border: 1px solid #e6dcc4;
  border-top: 3px solid #9a875a;
  border-radius: 8px;
  padding: 14px 10px 12px;
  text-align: center;
  transition: .15s;
}
.hero-card:hover { box-shadow: 0 4px 14px rgba(120,90,40,.18); transform: translateY(-2px); }
.hero-name {
  font-family: "KaiTi", "STKaiti", "楷体", serif;
  font-size: 21px;
  color: #4a2417;
  letter-spacing: 2px;
}
.hero-title {
  font-size: 12px;
  color: #8a7a5c;
  margin-top: 4px;
  min-height: 16px;
}
.hero-no {
  position: absolute;
  top: 4px; right: 8px;
  font-size: 12px;
  color: #b9a87f;
}
.hero-card.hero-wei  { border-top-color: #2f4c8f; }
.hero-card.hero-shu  { border-top-color: #b22222; }
.hero-card.hero-wu   { border-top-color: #2f7d4f; }
.hero-card.hero-qs   { border-top-color: #9a875a; }
.hero-card.hero-wei  .hero-name { color: #2f4c8f; }
.hero-card.hero-shu  .hero-name { color: #b22222; }
.hero-card.hero-wu   .hero-name { color: #2f7d4f; }