/* ============ 视图二：环球舆图 ============ */
#mapRoot{display:flex;flex-direction:column;gap:10px;}

/* —— 全屏模式：地图区整体进入全屏，画布占满剩余高度 —— */
#mapRoot.wm-fullscreen{
  background:var(--paper);
  padding:14px 18px;
  overflow:auto;
}
#mapRoot.wm-fullscreen .wm-stage{flex:1;display:flex;min-height:0;}
#mapRoot.wm-fullscreen .wm-stage canvas{height:100%;min-height:0;flex:1;}
#mapRoot.wm-fullscreen .wm-focusbar .fb-text p{max-width:900px;}

/* —— 顶部工具条：年份 + 播放 + 聚焦 —— */
.wm-toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.wm-year{
  font-family:Georgia,var(--serif);font-size:34px;font-weight:900;color:var(--vermilion);
  letter-spacing:.02em;min-width:150px;line-height:1;
}
.wm-year small{font-size:14px;color:var(--ink-faint);font-weight:400;letter-spacing:.1em;margin-left:6px;}
.wm-nav{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:rgba(255,252,242,.7);}
.wm-nav button{
  font-family:var(--serif);font-size:14px;padding:7px 14px;border:none;cursor:pointer;
  background:transparent;color:var(--ink-soft);border-right:1px solid var(--line);transition:all .18s;
}
.wm-nav button:last-child{border-right:none;}
.wm-nav button:hover{color:var(--vermilion);background:rgba(169,50,38,.05);}
.wm-nav button.playing{background:var(--vermilion);color:#f6efe0;}
.wm-focus{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.wm-focus .label{font-size:12.5px;color:var(--ink-faint);letter-spacing:.1em;}

/* —— 重建可信度（年份旁的星级） —— */
.wm-conf{
  display:inline-flex;flex-direction:column;line-height:1.2;cursor:help;
  font-family:var(--serif);margin-left:-4px;
}
.wm-conf .wc-stars{font-size:14px;color:var(--gold);letter-spacing:.08em;}
.wm-conf .wc-stars .dim{color:var(--ink-faint);opacity:.45;}
.wm-conf .wc-text{font-size:10px;color:var(--ink-faint);letter-spacing:.08em;}

/* —— 图层栏（名城 / 信仰 / 路线） —— */
.wm-layers{
  display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,252,243,.6);
}
.wm-layers .wl-label{font-size:11.5px;color:var(--ink-faint);letter-spacing:.14em;flex:none;}
.wm-layers .wl-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 2px;}
.wm-layers .wl-routes{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.wm-layers .chip{font-size:12px;padding:4px 11px;}
.wm-layers .chip.wl-route::before{content:'〜 ';opacity:.6;}

/* —— 快照吸附提示气泡 —— */
.wm-toast{
  position:absolute;left:50%;top:12px;transform:translateX(-50%) translateY(-6px);
  z-index:7;pointer-events:none;opacity:0;transition:opacity .35s, transform .35s;
  background:rgba(43,38,32,.92);color:var(--paper);
  border-radius:8px;padding:7px 15px;font-size:12.5px;letter-spacing:.04em;
  font-family:var(--serif);box-shadow:0 3px 14px rgba(0,0,0,.28);max-width:84%;
  text-align:center;line-height:1.6;
}
.wm-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.wm-toast b{color:var(--gold);}

/* —— 面板内：名城履历表 / 前世今生横条 —— */
.city-spans .ev.cur{background:rgba(168,134,44,.12);border-radius:6px;}
.city-spans .ev.cur .y{color:var(--vermilion-deep);}
.city-spans .ev .nm{font-weight:700;color:var(--ink);}
.city-spans .ev .nt{color:var(--ink-soft);}
.lifeline{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;
}
.lifeline .ll-seg{
  font-size:12px;padding:3px 10px;border-radius:99px;
  border:1px solid var(--line);color:var(--ink-soft);background:rgba(255,252,242,.6);
  letter-spacing:.04em;white-space:nowrap;
}
.lifeline .ll-seg.cur{
  border-color:var(--vermilion);color:var(--vermilion);font-weight:700;
  background:rgba(169,50,38,.07);
}
.route-flow{
  font-size:13.5px;line-height:1.9;color:var(--ink);
  background:rgba(168,134,44,.08);border-left:3px solid var(--gold);
  padding:8px 12px;border-radius:0 6px 6px 0;margin-top:6px;
}

/* —— 行政区划开关 —— */
.wm-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  padding:5px 12px 5px 10px;border:1px solid var(--line);border-radius:99px;background:rgba(255,252,242,.7);
  transition:all .18s;}
.wm-switch:hover{border-color:var(--gold);}
.wm-switch input{position:absolute;opacity:0;width:0;height:0;}
.wm-switch-track{position:relative;width:34px;height:18px;border-radius:99px;background:var(--paper-dark);
  border:1px solid var(--line);transition:background .2s;flex:none;}
.wm-switch-dot{position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s;}
.wm-switch input:checked + .wm-switch-track{background:var(--gold);border-color:var(--gold);}
.wm-switch input:checked + .wm-switch-track .wm-switch-dot{transform:translateX(16px);}
.wm-switch-label{font-size:13px;letter-spacing:.06em;color:var(--ink-soft);display:flex;flex-direction:column;line-height:1.15;}
.wm-switch-label small{font-size:9.5px;color:var(--ink-faint);letter-spacing:.04em;}
.wm-switch input:checked ~ .wm-switch-label{color:var(--ink);}

/* —— 时间滑块 —— */
.wm-slider{
  position:relative;height:46px;padding:0 10px;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,252,243,.7);
  cursor:pointer;user-select:none;
}
.wm-rail{position:absolute;left:14px;right:14px;top:16px;height:4px;background:var(--paper-dark);border-radius:99px;}
.wm-rail-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--gold),var(--vermilion));border-radius:99px;}
.wm-stop{
  position:absolute;top:13px;width:2px;height:10px;background:var(--ink-faint);opacity:.5;
  transform:translateX(-1px);
}
.wm-stop-label{
  position:absolute;top:27px;transform:translateX(-50%);
  font-size:10px;color:var(--ink-faint);font-family:Georgia,var(--serif);white-space:nowrap;
}
.wm-knob{
  position:absolute;top:8px;width:20px;height:20px;border-radius:50%;
  background:var(--vermilion);border:3px solid #f6efe0;
  box-shadow:0 1px 6px rgba(140,36,24,.55);
  transform:translateX(-10px);cursor:grab;z-index:2;
  transition:transform .12s;
}
.wm-knob:hover{transform:translateX(-10px) scale(1.15);}
.wm-slider.dragging .wm-knob{cursor:grabbing;transform:translateX(-10px) scale(1.2);}

/* —— 地图主体 —— */
.wm-stage{
  position:relative;border:1px solid var(--ink-faint);border-radius:12px;overflow:hidden;
  background:#e9e1c9;
  box-shadow:0 2px 14px rgba(90,70,40,.08);
}
.wm-stage canvas{display:block;width:100%;height:62vh;min-height:380px;cursor:grab;}
.wm-stage canvas.dragging{cursor:grabbing;}
.wm-tip{
  position:absolute;pointer-events:none;z-index:5;display:none;
  background:rgba(43,38,32,.92);color:var(--paper);border-radius:7px;
  padding:7px 12px;font-size:13px;line-height:1.6;max-width:280px;
  box-shadow:0 3px 12px rgba(0,0,0,.25);
}
.wm-tip b{font-size:14.5px;letter-spacing:.04em;display:block;}
.wm-tip .en{color:rgba(244,237,222,.55);font-size:11px;font-family:Georgia,serif;letter-spacing:.02em;}
.wm-tip .meta{color:rgba(244,237,222,.8);font-size:11.5px;}
.wm-zoombox{
  position:absolute;right:12px;top:12px;z-index:4;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:8px;overflow:hidden;background:rgba(244,237,222,.92);
  box-shadow:0 2px 8px rgba(60,45,20,.18);
}
.wm-zoombox button{
  width:34px;height:32px;border:none;background:transparent;cursor:pointer;
  font-size:17px;color:var(--ink-soft);font-family:Georgia,serif;border-bottom:1px solid var(--line);
}
.wm-zoombox button:last-child{border-bottom:none;}
.wm-zoombox button:hover{color:var(--vermilion);background:rgba(169,50,38,.06);}
.wm-loading{
  position:absolute;inset:0;display:none;place-items:center;z-index:6;
  background:rgba(233,225,201,.55);backdrop-filter:blur(1px);
  font-size:14px;letter-spacing:.3em;color:var(--ink-soft);
}
.wm-loading.show{display:grid;}

/* —— 聚焦信息条（兴衰曲线） —— */
.wm-focusbar{
  display:none;gap:16px;align-items:stretch;
  border:1px solid rgba(168,134,44,.45);border-radius:10px;
  background:linear-gradient(135deg, rgba(168,134,44,.08), rgba(169,50,38,.05));
  padding:12px 16px;
}
.wm-focusbar.show{display:flex;flex-wrap:wrap;}
.wm-focusbar .fb-text{flex:1;min-width:240px;}
.wm-focusbar .fb-text b{font-size:15.5px;letter-spacing:.08em;}
.wm-focusbar .fb-text p{font-size:12.8px;color:var(--ink-soft);line-height:1.75;margin-top:4px;text-align:justify;}
.wm-focusbar .fb-text .pk{color:var(--vermilion);font-weight:700;}
.wm-curve{flex:0 0 320px;min-width:260px;position:relative;}
.wm-curve canvas{display:block;width:100%;height:96px;cursor:pointer;}
.wm-curve .cv-cap{font-size:10.5px;color:var(--ink-faint);text-align:center;letter-spacing:.1em;margin-top:2px;}

/* —— 此时各文明（横截面字幕） —— */
.wm-caption{
  display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;
  padding:9px 14px;border:1px solid var(--line);border-radius:10px;
  background:rgba(236,226,204,.5);font-size:12.5px;color:var(--ink-soft);
}
.wm-caption .cap-label{color:var(--ink-faint);letter-spacing:.15em;font-size:11.5px;}
.wm-caption .cap-item{display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:color .15s;}
.wm-caption .cap-item:hover{color:var(--vermilion);}
.wm-caption .cap-item i{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);flex:none;}
.wm-caption .cap-item b{font-weight:700;letter-spacing:.05em;}

/* —— 图注 —— */
.wm-note{
  font-size:11.5px;color:var(--ink-faint);line-height:1.8;letter-spacing:.04em;
  padding:0 4px;
}
.wm-note i{font-style:normal;color:var(--gold);}

/* —— 面板内：兴衰小图 —— */
.spark-wrap{margin-top:8px;}
.spark-wrap canvas{display:block;width:100%;height:72px;}
.spark-cap{font-size:11px;color:var(--ink-faint);letter-spacing:.08em;margin-top:3px;text-align:center;}

@media (max-width:880px){
  .wm-year{font-size:26px;min-width:120px;}
  .wm-stage canvas{height:48vh;min-height:300px;}
  .wm-curve{flex:1 1 100%;}
}