/* ---------- 自带字体（vendor/fonts，都是 OFL 许可；只含页面用到的字，由 tools/make_fonts.py 裁出） ---------- */
@font-face { font-family: "SG Serif"; src: url("vendor/fonts/NotoSerifSC-VF.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --paper: #f4eddc;
  --paper-2: #ebe2cc;
  --sea: #d6dcd3;
  --land-out: #ece4d0;
  --ink: #2b2620;
  --ink-2: #5d5346;
  --ink-3: #8a7e6c;
  --line: #cdbfa4;
  --seal: #9b2d20;
  --river: #6e93a6;
  --lake: #c3d3d2;
  --t-history: #2d2a26;
  --t-unofficial: #c2891e;
  --t-adapted: #d2562a;
  --t-fiction: #7b3fa0;
  --panel: #faf6ec;
  --shadow: 0 1px 2px rgba(60, 45, 20, .12), 0 4px 16px rgba(60, 45, 20, .08);
  --font: "SG Serif", "Noto Serif SC", "Songti SC", "SimSun", "STSong", serif;
  --font-title: var(--font);   /* 标题、人名、势力名用的字体 */
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
button, select, input { font-family: inherit; }

/* ---------- 顶栏 ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--paper);
  flex-wrap: wrap;
}
.brand h1 { margin: 0; font-size: 22px; letter-spacing: .12em; font-weight: 700; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { flex: none; width: 40px; height: 40px; display: block; }
.brand-logo.tw, [data-lang="tw"] .brand-logo.cn { display: none; }   /* 繁体模式换成繁体字的那一枚印 */
[data-lang="tw"] .brand-logo.tw { display: block; }
.brand p { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); letter-spacing: .05em; }
/* 顶栏里的各组控件直接排在标题后面：宽屏一行，窄了以后“地图开关”那一组整体换到第二行 */
.controls { display: contents; }
.top .search { margin-right: auto; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 5px 12px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--ink); color: var(--paper); }
.tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel); cursor: pointer; user-select: none; color: var(--ink);
}
.chip .n { color: var(--ink-3); font-size: 11px; }
.chip.off { opacity: .45; }
.chip svg { width: 12px; height: 12px; }
.toggles { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink-2); }
.toggles label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.toggles input { accent-color: var(--seal); }

/* ---------- 主区 ---------- */
.stage { display: grid; grid-template-columns: 1fr 360px; min-height: 0; }
.mapwrap { position: relative; min-width: 0; min-height: 0; background: var(--sea); overflow: hidden; }
#map { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#map:active { cursor: grabbing; }

.sea { fill: var(--sea); }
.land-ext { fill: var(--land-out); }
.land { fill: var(--land-out); stroke: #a8a28f; stroke-width: .6; vector-effect: non-scaling-stroke; }
.cell { stroke: none; cursor: pointer; fill: var(--land-out); fill-opacity: .8; }
.ready .cell { transition: fill .35s ease, opacity .2s; }
.cell:hover { filter: brightness(1.06); }
.cells.dim .cell:not(.hl) { opacity: .35; }
.lake { fill: var(--lake); stroke: #8fb0b3; stroke-width: .5; vector-effect: non-scaling-stroke; }
.river { fill: none; stroke: var(--river); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .85; }
.hanriver { fill: none; stroke: var(--river); stroke-width: 1.6; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.marsh { fill: url(#pat-marsh); stroke: #8fb0b3; stroke-width: .5; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.edge { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.edge.ub { stroke: #7d705c; stroke-width: .35; opacity: .45; }
.edge.zb { stroke: #6b5d4d; stroke-width: .8; stroke-dasharray: 4 3; opacity: .75; }
.edge.fb { stroke: #2f2820; stroke-width: 1.7; opacity: .9; }
.frontier { fill: none; stroke: #7a5a3a; stroke-width: 1.2; stroke-dasharray: 1 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.lbl { font-family: var(--font); pointer-events: none; paint-order: stroke; stroke-linejoin: round; }
.lbl.river-l { fill: #4d7489; font-style: italic; font-size: calc(10px / var(--k)); stroke: rgba(255,255,255,.55); stroke-width: calc(2px / var(--k)); }
.lbl.mtn { fill: #7a6446; font-size: calc(10px / var(--k)); letter-spacing: .25em; stroke: rgba(244,237,220,.6); stroke-width: calc(2px / var(--k)); }
.lbl.people { fill: #8c8272; font-size: calc(12px / var(--k)); letter-spacing: .35em; }
.lbl.zhou { fill: rgba(43,38,32,.35); font-size: calc(13px / var(--k)); letter-spacing: .6em; font-weight: 600; }
.lbl.unit { fill: #3d352b; font-size: calc(9.5px / var(--k)); stroke: rgba(250,246,236,.8); stroke-width: calc(2.2px / var(--k)); }
.lbl.fac { fill: var(--ink); font-weight: 700; stroke: rgba(250,246,236,.85); stroke-width: calc(3.2px / var(--k)); text-anchor: middle; }
.lbl.fac .sub { font-weight: 400; fill: var(--ink-2); }
.lbl.ev { fill: var(--ink); font-size: calc(11.5px / var(--k)); font-weight: 600; stroke: rgba(250,246,236,.92); stroke-width: calc(3px / var(--k)); }
.lbl.cap { fill: #3b3025; font-size: calc(10px / var(--k)); stroke: rgba(250,246,236,.85); stroke-width: calc(2.4px / var(--k)); }
.lbl.proto { fill: #8a3b1c; font-size: calc(10px / var(--k)); font-style: italic; stroke: rgba(250,246,236,.9); stroke-width: calc(2.6px / var(--k)); }
.lbl.alt { fill: #5d5346; font-size: calc(10px / var(--k)); stroke: rgba(250,246,236,.9); stroke-width: calc(2.6px / var(--k)); }
.unitlabels { display: none; }
.showunits .unitlabels { display: inline; }

.mk { cursor: pointer; }
.mk .shape { stroke: #fffaf0; stroke-width: 1.4; }
.mk.past .shape { opacity: .45; }
.mk.past { pointer-events: visiblePainted; }
.mk.sel .ring { display: inline; }
.mk .ring { display: none; fill: none; stroke: var(--seal); stroke-width: 2; animation: ringfade 1.6s ease-out infinite; }
@keyframes ringfade { 0% { opacity: .9; } 100% { opacity: .15; } }   /* 只闪不缩放；别和下面“闪两圈”的 pulseout 同名，同名时后面的会盖掉前面的 */
.cap-mk circle.o { fill: #fffaf0; stroke: #2b2620; stroke-width: 1.2; }
.cap-mk circle.i { fill: #2b2620; }
.emp-mk circle { fill: #9b2d20; stroke: #fffaf0; stroke-width: 1.2; }
.emp-mk text { fill: #fffaf0; font-size: 9px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.protolink { fill: none; stroke: #b8471f; stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .85; }
.route { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.route.history { stroke: #2d2a26; }
.route.unofficial { stroke: var(--t-unofficial); }
.route.adapted, .route.fiction { stroke-dasharray: 6 4; }
.route.adapted { stroke: var(--t-adapted); }
.route.fiction { stroke: var(--t-fiction); }
.altlink { fill: none; stroke: #5d5346; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.alt-mk { fill: #fffaf0; stroke: #5d5346; stroke-width: 1.4; }

/* 图例、缩放按钮、提示 */
.legend {
  position: absolute; left: 12px; bottom: 12px; background: rgba(250,246,236,.93); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 11.5px; color: var(--ink-2); box-shadow: var(--shadow); max-width: 250px;
}
.legend .row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.legend svg { flex: none; }
.legend h4 { margin: 0 0 4px; font-size: 11px; color: var(--ink-3); font-weight: 600; letter-spacing: .1em; }
.legend .grp + .grp { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.legend .close { float: right; border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 13px; padding: 0 2px; }
.legend.min .grp { display: none; }
.legend.min h4 { margin: 0; }
.zoombtns { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; }
.zoombtns button {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: rgba(250,246,236,.95);
  cursor: pointer; font-size: 16px; color: var(--ink); box-shadow: var(--shadow);
}
.tip {
  position: absolute; pointer-events: none; background: rgba(43,38,32,.92); color: #f6efdf; font-size: 12px;
  padding: 5px 8px; border-radius: 5px; white-space: nowrap; transform: translate(12px, 12px); z-index: 5;
}

/* ---------- 侧栏 ---------- */
.side { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-height: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; background: none; padding: 9px 0; font-size: 14px; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--seal); font-weight: 600; }
.pane { display: none; overflow-y: auto; padding: 14px 16px 24px; flex: 1; min-height: 0; }
.pane.on { display: block; }
.pane h2 { margin: 4px 0 6px; font-size: 20px; line-height: 1.3; }
.pane h3 { font-size: 13px; color: var(--ink-3); margin: 16px 0 6px; font-weight: 600; letter-spacing: .08em; }
.pane p { margin: 6px 0; font-size: 14px; line-height: 1.75; }
.meta { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; }
.meta b { color: var(--ink); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 999px; color: #fff; margin-right: 4px; }
.badge.history { background: var(--t-history); }
.badge.unofficial { background: var(--t-unofficial); }
.badge.adapted { background: var(--t-adapted); }
.badge.fiction { background: var(--t-fiction); }
.badge.type { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.box { border-left: 3px solid var(--line); padding: 2px 0 2px 10px; margin: 10px 0; }
.box.hist { border-color: var(--t-history); }
.box.novel { border-color: var(--t-adapted); }
.box .k { font-size: 12px; color: var(--ink-3); letter-spacing: .08em; }
.src { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; }
.linkbtn { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer; color: var(--ink); margin: 4px 6px 0 0; }
.linkbtn:hover { border-color: var(--ink-3); }
.hint { color: var(--ink-3); font-size: 12.5px; line-height: 1.7; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; gap: 8px; align-items: baseline; padding: 6px 4px; border-bottom: 1px dashed #e3d8c2; cursor: pointer; font-size: 13.5px; line-height: 1.5; }
.list li:hover { background: #f3ebd9; }
.list li.cur { background: #efe3c8; }
.list li .d { color: var(--ink-3); font-size: 12px; min-width: 58px; font-variant-numeric: tabular-nums; }
.dot { width: 10px; height: 10px; flex: none; vertical-align: -1px; }
.list li .dot { transform: translateY(1px); }
.list li .chg { color: var(--ink-2); font-size: 12.5px; }
.yearhead { font-size: 12px; color: var(--ink-3); margin: 12px 0 2px; font-weight: 600; letter-spacing: .08em; }
.facrow { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px dashed #e3d8c2; cursor: pointer; }
.facrow:hover, .facrow.hl { background: #f3ebd9; }
.facrow .sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); }
.facrow .nm { font-size: 14px; font-weight: 600; }
.facrow .rl { font-size: 12px; color: var(--ink-2); }
.facrow .ct { font-size: 12px; color: var(--ink-3); text-align: right; }
.hist-list li.now { font-weight: 600; background: #efe3c8; }

/* ---------- 时间轴 ---------- */
.timeline {
  display: grid; grid-template-columns: 210px 1fr auto; gap: 16px; align-items: center;
  padding: 8px 18px 10px; border-top: 1px solid var(--line); background: var(--paper);
}
.now .year { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.now .era { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; min-height: 18px; }
.track { position: relative; height: 96px; }
#ticks { position: absolute; left: 0; right: 0; top: 0; height: 78px; width: 100%; overflow: visible; }
#ticks .tk { cursor: pointer; }
#ticks .ax text { font-size: 10px; fill: var(--ink-3); }
#ticks .band { fill: rgba(155,45,32,.06); }
#ticks .band-l { font-size: 10px; fill: rgba(155,45,32,.55); letter-spacing: .15em; }
#slider { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; margin: 0; accent-color: var(--seal); height: 18px; cursor: pointer; }
.buttons { display: flex; align-items: center; gap: 4px; }
.buttons button {
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 13px; color: var(--ink);
}
.buttons button.play { width: 42px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.buttons select { height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 12px; padding: 0 4px; color: var(--ink); margin-left: 4px; }

/* ---------- 人物模式（地图） ---------- */
.map-ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.view-seg button { font-weight: 600; }
.mk.dimmed { opacity: .28; }
.mk.mine .shape { stroke: #9b2d20; stroke-width: 2.2; }
.trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trail .tr-past { stroke-width: 3.2; opacity: .95; }
.trail .tr-fut { stroke-width: 1.6; stroke-dasharray: 2 5; opacity: .7; }
.tr-dot { cursor: pointer; }
.tr-dot circle { stroke-width: 1.6; }
.me .halo { fill: rgba(255,250,240,.9); stroke-width: 2.5; }
.me .seal { fill: #fffaf0; font-weight: 700; font-family: var(--font); }
.me .me-l { fill: var(--ink); font-weight: 700; stroke: rgba(250,246,236,.95); paint-order: stroke; }
.me.dead { opacity: .55; }
.pm-head { display: flex; gap: 12px; align-items: center; }
.pm-head h2 { margin: 0; }
.pm-head .zi, .pd-main h1 small { font-size: 13px; color: var(--ink-3); font-weight: 400; margin-left: 8px; }
.mini-pt { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.mini-pt.seal { display: inline-grid; place-items: center; background: var(--fc); color: #fffaf0; font-weight: 700; font-size: 17px; }
.mini-pt.face { display: inline-block; background-size: 190% auto; background-position: 62% 24%; background-repeat: no-repeat; background-color: #2a211a; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 2px 10px 2px 2px; font-size: 13px; cursor: pointer; color: var(--ink); font-family: inherit; }
.pchip .mini-pt { width: 22px; height: 22px; font-size: 11px; }
.pchip.plain { padding: 3px 10px; cursor: default; }
.pchip:hover:not(.plain) { border-color: var(--ink-3); }
.cite sup { font-size: 10px; margin-left: 2px; padding: 0 3px; border-radius: 3px; vertical-align: 4px; white-space: nowrap; cursor: help; }
.cite.zheng sup { color: #fff; background: #5d5346; }
.cite.zhu sup { color: #fff; background: var(--t-unofficial); }
.cite.yy sup { color: #fff; background: var(--t-adapted); }
/* 顶栏搜索 */
.search { position: relative; }
.search input { width: 230px; padding: 5px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); outline: none; }
.search input:focus { border-color: var(--ink-3); background: #fffdf6; }
.qres { position: absolute; top: calc(100% + 4px); left: 0; width: 420px; max-width: 90vw; max-height: 70vh; overflow: auto; z-index: 50; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
.qr { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.qr.on, .qr:hover { background: var(--paper-2); }
.qr.none, .qr.more { cursor: default; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; background: none; }
.qr .qt { flex: none; font-size: 11px; padding: 1px 6px; border-radius: 3px; color: #fff; background: var(--ink-3); }
.qr .qt.person { background: #9b2d20; }
.qr .qt.event { background: var(--t-history); }
.qr .qt.unit { background: #4a6fa5; }
.qr .qt.item { background: var(--t-unofficial); }
.qr .qt.time { background: var(--t-fiction); }
.qr .mini-pt { width: 22px; height: 22px; font-size: 11px; }
.qr .qn { flex: none; font-weight: 600; }
.qr .qs { color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.qr .qalt { flex: none; border: 1px solid var(--line); background: var(--paper); border-radius: 5px; font-size: 12px; padding: 1px 8px; cursor: pointer; color: var(--ink-2); }
.qr .qalt:hover { border-color: var(--ink-3); }
/* “此时谁在哪”的头像 */
.pp { cursor: pointer; }
.pp .stem { stroke: #5d5346; stroke-width: 1.2; }
.pp .av .bg { stroke: none; }
.pp .av .ring { fill: none; stroke-width: 2; }
.pp .av .seal { fill: #fffaf0; font-weight: 700; font-family: var(--font); }
.pp .av.stale { opacity: .55; }
.pp .more rect { fill: var(--ink); }
.pp .more text { fill: var(--paper); font-size: 9.5px; font-family: var(--font); }
.pp .pp-l { fill: var(--ink); font-weight: 600; stroke: rgba(250,246,236,.92); paint-order: stroke; }
.pp.dimmed { opacity: .25; }
.dimtxt { opacity: .7; }
.mini-pt.face.av { background-size: cover; background-position: center; }
/* 定位提示：在目标位置闪两圈 */
.pulse { pointer-events: none; }
.pulse circle { fill: none; stroke: #c0392b; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: pulseout 1.4s ease-out 2; }
.pulse circle.late { animation-delay: .45s; }
@keyframes pulseout { 0% { transform: scale(.6); opacity: .95; } 100% { transform: scale(4.2); opacity: 0; } }
.linkbtn.mini { padding: 1px 7px; font-size: 12px; margin: 0 0 0 6px; }
.cxback { margin: 0 0 10px; }
.cxback .linkbtn { margin: 0; background: var(--paper-2, var(--paper)); }
/* 事件详情里的原文摘录 */
.quotes { list-style: none; margin: 6px 0 0; padding: 0; }
.quotes li { font-size: 13px; line-height: 1.75; color: var(--ink-2); padding: 5px 0 5px 10px; border-left: 2px solid var(--line); margin-bottom: 6px; }

/* ---------- 图鉴 ---------- */
body.codex-mode .stage, body.codex-mode .timeline, body.codex-mode .map-ctl { display: none; }
body.codex-mode { grid-template-rows: auto 1fr; }
.codex { overflow-y: auto; min-height: 0; padding: 18px 24px 40px; background: var(--paper); }
.cx-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cx-tabs button { padding: 6px 14px; font-size: 14px; }
.cx-search { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 12px; font-size: 14px; min-width: 200px; color: var(--ink); }
.cx-filters { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 16px; }
.cx-filter { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cx-filter .k { font-size: 12px; color: var(--ink-3); margin-right: 4px; letter-spacing: .1em; }
.fchip { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 3px 11px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.fchip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.card { position: relative; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 8px 8px 10px; text-align: left; cursor: pointer; font-family: inherit; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card .nm { font-size: 17px; font-weight: 700; margin-top: 8px; letter-spacing: .05em; }
.card .zi { font-size: 12px; color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.card .sub { font-size: 12px; color: var(--ink-2); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.card .sub i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.card .corner { position: absolute; top: 12px; right: 12px; }
a.pt { display: block; cursor: zoom-in; }
.pt { aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: radial-gradient(ellipse at 40% 30%, #4a3b2c, #1d1712 75%); position: relative; }
.pt img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pt.ph { display: grid; place-items: center; box-shadow: inset 0 -40px 60px -30px color-mix(in srgb, var(--fc) 70%, transparent); }
.pt.ph .seal { background: #9b2d20; color: #fbeee0; font-weight: 700; font-size: 34px; padding: 10px 12px; border-radius: 4px; line-height: 1.05; writing-mode: vertical-rl; letter-spacing: .08em; box-shadow: 0 0 0 3px rgba(251,238,224,.18); }
.pt.ph .ph-note { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: rgba(251,238,224,.55); letter-spacing: .15em; }
.glyph { aspect-ratio: 1; display: grid; place-items: center; font-size: 52px; font-weight: 700; border-radius: 8px; color: #fbeee0; background: radial-gradient(ellipse at 40% 30%, #4a3b2c, #1d1712 75%); }
.glyph.history { box-shadow: inset 0 0 0 3px var(--t-history); }
.glyph.unofficial { box-shadow: inset 0 0 0 3px var(--t-unofficial); color: #f3d9a4; }
.glyph.adapted { box-shadow: inset 0 0 0 3px var(--t-adapted); color: #f6c0a6; }
.glyph.fiction { box-shadow: inset 0 0 0 3px var(--t-fiction); color: #dcc4ec; }
.cx-grid.items { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.cx-foot { margin-top: 28px; max-width: 760px; }
.cx-detail .back { margin: 0 0 14px; }
.pd { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; max-width: 1180px; }
.pd-left { position: sticky; top: 0; }
.pd-left .pt.big .seal { font-size: 60px; padding: 16px 18px; }
.pd-left .glyph.big { font-size: 96px; }
.pt-note { font-size: 11.5px; color: var(--ink-3); text-align: center; margin: 6px 0 10px; }
.primary { width: 100%; border: 0; background: var(--seal); color: #fbeee0; border-radius: 8px; padding: 10px; font-size: 15px; cursor: pointer; font-family: inherit; letter-spacing: .08em; margin-bottom: 12px; }
.primary:hover { filter: brightness(1.08); }
.facts { display: grid; grid-template-columns: 44px 1fr; gap: 6px 10px; font-size: 13px; margin: 0; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); line-height: 1.6; }
.pd-main h1 { font-size: 34px; margin: 8px 0 10px; letter-spacing: .08em; }
.pd-main h3 { font-size: 13px; color: var(--ink-3); margin: 26px 0 10px; font-weight: 600; letter-spacing: .1em; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.pd-main h3 .hint { font-weight: 400; letter-spacing: 0; }
.bio { font-size: 15px; line-height: 1.9; }
.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.look { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; border-top: 3px solid var(--line); }
.look.hist { border-top-color: var(--t-history); }
.look.novel { border-top-color: var(--t-adapted); }
.look .k { font-size: 12px; color: var(--ink-3); letter-spacing: .1em; }
.look p { margin: 6px 0 0; font-size: 14px; line-height: 1.8; }
.lines { display: flex; flex-direction: column; gap: 8px; }
.ln { display: flex; align-items: flex-start; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 6px; padding: 8px 14px; }
.ln.history { border-left-color: var(--t-history); }
.ln.unofficial { border-left-color: var(--t-unofficial); }
.ln.novel { border-left-color: var(--t-adapted); }
.ln-play { flex: none; width: 30px; height: 30px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--seal); background: var(--paper); color: var(--seal); font-size: 11px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.ln-play:hover, .ln-play.on { background: var(--seal); color: #fff; }
.ln-play.none { border-color: var(--line); color: var(--ink-3); cursor: default; background: transparent; }
.ln-q { margin: 0; font-size: 16px; line-height: 1.75; }
.ln-n { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-3); }
.cmp { display: flex; flex-direction: column; gap: 10px; }
.cmp-row { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 6px; padding: 8px 14px; }
.cmp-row.history { border-left-color: var(--t-history); }
.cmp-row.unofficial { border-left-color: var(--t-unofficial); }
.cmp-row.adapted { border-left-color: var(--t-adapted); }
.cmp-row.fiction { border-left-color: var(--t-fiction); }
.cmp-h { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.cmp-row p { margin: 6px 0 2px; font-size: 14px; line-height: 1.85; }
.trail { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.trail li { position: relative; padding: 5px 8px; font-size: 13.5px; line-height: 1.6; cursor: pointer; border-radius: 4px; display: flex; gap: 10px; }
.trail li::before { content: ""; position: absolute; left: -20px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink-3); }
.trail li:hover { background: #f3ebd9; }
.trail .y { color: var(--ink-3); min-width: 34px; font-variant-numeric: tabular-nums; }
.affil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.af { display: inline-flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: 13px; }
.af .y { font-size: 11px; color: var(--ink-3); }
.af .n { font-size: 11.5px; color: var(--ink-2); }
.arr { color: var(--ink-3); }
.rels { display: flex; flex-direction: column; gap: 6px; }
.rel { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.rel .pchip { min-width: 64px; justify-content: center; padding: 2px 10px; }
.evchips { display: flex; flex-wrap: wrap; gap: 6px; }
.evchip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 3px 11px; font-size: 13px; cursor: pointer; color: var(--ink); font-family: inherit; }
.evchip .y { color: var(--ink-3); font-size: 11.5px; }
.evchip:hover { border-color: var(--ink-3); }

/* ---------- 窄屏 ---------- */
@media (max-width: 900px) {
  body { overflow: auto; grid-template-rows: auto auto auto; }
  .top { padding: 8px 16px; }
  .controls { gap: 8px; }
  .stage { grid-template-columns: 1fr; }
  .mapwrap { height: 62vh; }
  .side { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
  .pane { max-height: 60vh; }
  .timeline { grid-template-columns: 1fr; gap: 6px; padding: 8px 16px 12px; position: sticky; bottom: 0; order: -1; }
  .now { display: flex; align-items: baseline; gap: 10px; }
  .now .year { font-size: 22px; }
  .buttons { justify-content: center; }
  .legend { max-width: 190px; font-size: 10.5px; }
  .codex { padding: 14px 16px 32px; }
  .cx-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
  .pd { grid-template-columns: 1fr; gap: 18px; }
  .pd-left { position: static; display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
  .pd-left .pt, .pd-left .glyph { grid-row: span 3; }
  .pd-left .pt.big .seal { font-size: 34px; padding: 10px; }
  .pd-left .glyph.big { font-size: 56px; }
  .pt-note { text-align: left; margin: 0; }
  .looks { grid-template-columns: 1fr; }
  .pd-main h1 { font-size: 26px; }
}

/* 版图变更的原文与纪年核对 */
.cq { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; line-height: 1.7; color: var(--ink-3); }
.okmark { color: #4f7a4a; font-weight: 600; cursor: help; }

/* 行军路线 */
.mcase { fill: none; stroke: #fffaf0; stroke-width: 5; opacity: .75; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.march { fill: none; stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.march.k-retreat { stroke-dasharray: 7 5; }
.march.k-raid { stroke-dasharray: 2 4; }
.mhead path { stroke: #fffaf0; stroke-width: 1; }
.mhead, .mstop { pointer-events: none; }
.mstop circle { stroke-width: 1.4; }
.mstop-t { font-size: 10.5px; stroke-width: 2.6px; }
.routes { list-style: none; margin: 6px 0 0; padding: 0; }
.routes li { display: flex; gap: 8px; font-size: 13px; line-height: 1.7; padding: 5px 0; border-bottom: 1px dotted var(--line); }
.routes .rsw { flex: none; width: 22px; height: 0; margin-top: 10px; border-top: 3px solid var(--c); }
.routes .rsw.retreat { border-top-style: dashed; }
.routes .loose { color: var(--ink-3); }
.march.dim { opacity: .3; }
.mhead.dim { opacity: .35; }

/* ---------- 配色方案（<html data-theme>；classic 是原来的浓色块） ---------- */
.band { fill: none; stroke-width: 10; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: butt; pointer-events: none; opacity: .62; }

/* 淡彩：浅填色 + 边界色带 + 墨线 */
[data-theme="wash"] { --sea: #dde4e1; --land-out: #f1ead8; }
[data-theme="wash"] .cell { fill-opacity: 1; }
[data-theme="wash"] .edge.fb { stroke: #3a3128; stroke-width: 1.15; opacity: .85; }
[data-theme="wash"] .edge.ub { opacity: .3; }
[data-theme="wash"] .edge.zb { opacity: .45; }
[data-theme="wash"] .lbl.fac { fill: #2b2620; stroke: rgba(250,246,236,.7); }

/* 柔和：色块减淡，不加色带 */
[data-theme="soft"] .cell { fill-opacity: 1; }
[data-theme="soft"] .edge.fb { stroke: #3a3128; stroke-width: 1.4; opacity: .85; }
[data-theme="soft"] .edge.ub { opacity: .32; }

/* 深色：和立绘同一路的暗金底 */
[data-theme="dark"] {
  --paper: #1a1713; --paper-2: #231f19; --sea: #10151a; --land-out: #26221c; --ink: #efe6d2; --ink-2: #cabea6; --ink-3: #978b76;
  --line: #473f33; --seal: #c8452f; --river: #557f96; --lake: #1c2e36; --panel: #231f19; --t-history: #e9dfc8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .cell { fill-opacity: 1; }
[data-theme="dark"] .band { opacity: .5; stroke-width: 8; }
[data-theme="dark"] .land { stroke: #4b453a; }
[data-theme="dark"] .lake { stroke: #35525c; }
[data-theme="dark"] .edge.ub { stroke: #b9ad94; opacity: .16; }
[data-theme="dark"] .edge.zb { stroke: #b9ad94; opacity: .3; }
[data-theme="dark"] .edge.fb { stroke: #0c0a08; stroke-width: 1.6; opacity: .95; }
[data-theme="dark"] .frontier { stroke: #a58a63; }
[data-theme="dark"] .lbl.river-l { fill: #7fa9bf; stroke: rgba(12,14,16,.6); }
[data-theme="dark"] .lbl.mtn { fill: #b39b74; stroke: rgba(18,16,12,.6); }
[data-theme="dark"] .lbl.people { fill: #8f8572; }
[data-theme="dark"] .lbl.zhou { fill: rgba(239,230,210,.3); }
[data-theme="dark"] .lbl.unit { fill: #d9cdb3; stroke: rgba(18,16,12,.8); }
[data-theme="dark"] .lbl.fac { stroke: rgba(14,12,9,.75); }
[data-theme="dark"] .lbl.ev { stroke: rgba(14,12,9,.9); }
[data-theme="dark"] .lbl.cap { fill: #e6dcc6; stroke: rgba(14,12,9,.85); }
[data-theme="dark"] .lbl.proto { fill: #e08a62; stroke: rgba(14,12,9,.9); }
[data-theme="dark"] .lbl.alt { fill: #cabea6; stroke: rgba(14,12,9,.9); }
[data-theme="dark"] .me .me-l, [data-theme="dark"] .pp .pp-l { stroke: rgba(14,12,9,.9); }
[data-theme="dark"] .cap-mk circle.o { fill: #1a1713; stroke: #efe6d2; }
[data-theme="dark"] .cap-mk circle.i { fill: #efe6d2; }
[data-theme="dark"] .mk .shape { stroke: #14110d; }
[data-theme="dark"] .mcase { stroke: #14110d; opacity: .7; }
[data-theme="dark"] .route.history { stroke: #e9dfc8; }
[data-theme="dark"] .legend, [data-theme="dark"] .zoombtns button { background: rgba(30,26,21,.94); color: var(--ink); }
[data-theme="dark"] .list li:hover, [data-theme="dark"] .facrow:hover, [data-theme="dark"] .facrow.hl, [data-theme="dark"] .trail li:hover { background: #2e2820; }
[data-theme="dark"] .list li.cur, [data-theme="dark"] .hist-list li.now { background: #3a3125; }
[data-theme="dark"] .badge.history { color: #1a1713; }
[data-theme="dark"] .cite.zheng sup { background: #6f6453; }
[data-theme="dark"] .search input:focus { background: #2a251e; }
[data-theme="dark"] .seg button.on { background: var(--ink); color: var(--paper); }
[data-theme="dark"] select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="search"] { background: #231f19; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] .legend svg { filter: brightness(1.5); }

/* ---------- 远近两档：全图时次要事件画小一点 ---------- */
.mk .shape { transition: transform .2s; }
.far .mk.minor .shape { transform: scale(.62); }
.far .mk.minor:hover .shape { transform: scale(1); }
.ghost { pointer-events: auto; }

/* ---------- 图鉴人物页：深色头图 + 页签 ---------- */
.cx-detail .hero {
  margin: -18px -24px 0; padding: 22px 24px 26px; color: #efe6d2;
  background:
    radial-gradient(90% 130% at 0% 0%, color-mix(in srgb, var(--fc) 42%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, #211c16, #17130f);
  border-top: 4px solid var(--fc); border-bottom: 1px solid #000;
}
.hero-in { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; max-width: 1180px; }
.hero-pt .pt { box-shadow: 0 0 0 1px rgba(214,178,110,.35), 0 12px 32px rgba(0,0,0,.55); border-radius: 8px; }
.hero-pt .pt-note { color: rgba(239,230,210,.45); margin: 8px 0 0; }
.hero-nav { display: flex; gap: 8px; margin-bottom: 18px; }
.hero-nav .back { margin: 0; background: rgba(255,250,240,.08); color: #e6dcc6; border-color: rgba(239,230,210,.25); }
.hero-nav .back:hover { background: rgba(255,250,240,.16); }
.hero .badge.history { background: #efe6d2; color: #1b1713; }
.hero h1 { font-size: 46px; margin: 10px 0 8px; letter-spacing: .1em; color: #fbf3df; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.hero h1 small { font-size: 15px; color: rgba(239,230,210,.6); font-weight: 400; margin-left: 14px; letter-spacing: .12em; }
.hero-meta { margin: 0 0 14px; font-size: 14px; color: rgba(239,230,210,.82); }
.hero-meta .sep { margin: 0 9px; color: rgba(239,230,210,.3); }
.hero-fac i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.hero .bio { font-size: 15.5px; line-height: 1.95; color: #e9dfca; max-width: 780px; margin: 0 0 14px; }
.hero .facts { grid-template-columns: 40px 1fr; max-width: 780px; font-size: 12.5px; }
.hero .facts dt { color: rgba(239,230,210,.5); }
.hero .facts dd { color: rgba(239,230,210,.8); }
.hero-act { margin-top: 16px; }
.hero-act .primary { width: auto; padding: 9px 22px; margin: 0; }
.cx-detail .pd-main { max-width: 1180px; }
.ptabs {
  position: sticky; top: -18px; z-index: 5; display: flex; gap: 4px; margin: 0 -24px; padding: 10px 24px 0;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.ptabs button {
  border: 0; background: none; font-family: inherit; font-size: 15px; color: var(--ink-2); cursor: pointer;
  padding: 8px 16px 10px; border-bottom: 3px solid transparent; margin-bottom: -1px; letter-spacing: .06em;
}
.ptabs button:hover { color: var(--ink); }
.ptabs button.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--seal); }
.ptabs .n { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-left: 5px; }
@media (max-width: 820px) {
  .hero-in { grid-template-columns: 1fr; gap: 16px; }
  .hero-pt { max-width: 220px; }
  .hero h1 { font-size: 34px; }
}

/* 物品页的头图：左边是一个大字 */
.hero.item .hero-in { grid-template-columns: 190px 1fr; }
.hero.item .glyph.big { font-size: 104px; box-shadow: inset 0 0 0 3px var(--fc), 0 0 0 1px rgba(214,178,110,.35), 0 12px 32px rgba(0,0,0,.55); color: #fbf3df; }
.hero.item .hero-meta { font-size: 15px; letter-spacing: .2em; }
.hero-owners { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.hero-owners .k { font-size: 12.5px; color: rgba(239,230,210,.5); margin-right: 4px; letter-spacing: .1em; }
.hero .pchip { background: rgba(255,250,240,.08); color: #efe6d2; border-color: rgba(239,230,210,.28); font-size: 14px; padding: 3px 12px 3px 3px; }
.hero .pchip .mini-pt { width: 28px; height: 28px; }
.hero .pchip.plain { padding: 5px 12px; }
.hero .pchip:hover:not(.plain) { background: rgba(255,250,240,.18); border-color: rgba(239,230,210,.6); }
@media (max-width: 820px) { .hero.item .hero-in { grid-template-columns: 1fr; } .hero.item .hero-pt { max-width: 140px; } }

/* ---------- 地形晕渲（data/base/relief.jpg）：垫在势力填色下面 ---------- */
.relief { pointer-events: none; }
.has-relief[data-theme="wash"] .cell { fill-opacity: .74; }
.has-relief[data-theme="soft"] .cell { fill-opacity: .8; }
[data-theme="dark"] .relief { display: none; }

/* ---------- 标题字体 ---------- */
.brand h1, .lbl.fac .nm, .hero h1, .card .nm, .now .year, .pane h2, .pm-head h2 { font-family: var(--font-title); }

/* ---------- 简繁切换 ---------- */
.lang-seg button { padding: 5px 9px; }

/* ---------- 物品图（portraits/items/）：方图，边框按可信度上色 ---------- */
.item-img { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 40% 30%, #4a3b2c, #1d1712 75%); }
.item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-img.history { box-shadow: inset 0 0 0 3px var(--t-history); }
.item-img.unofficial { box-shadow: 0 0 0 3px var(--t-unofficial); }
.item-img.adapted { box-shadow: 0 0 0 3px var(--t-adapted); }
.item-img.fiction { box-shadow: 0 0 0 3px var(--t-fiction); }
.item-img.history { box-shadow: 0 0 0 3px #b08d4f; }
a.item-img { cursor: zoom-in; }
.hero.item .item-img.big { box-shadow: 0 0 0 3px var(--fc), 0 12px 32px rgba(0,0,0,.55); }
.hero.item:has(.item-img) .hero-in { grid-template-columns: 300px 1fr; }

/* ---------- 统一控件：顶栏、地图开关、时间轴用同一套高度、圆角和开关样式 ---------- */
:root { --ctl-h: 30px; --ctl-r: 6px; }
.seg { height: var(--ctl-h); border-radius: var(--ctl-r); background: var(--panel); }
.seg button { padding: 0 12px; font-size: 13px; height: 100%; }
.seg button:not(.on):hover { background: var(--paper-2); color: var(--ink); }
.search input { height: var(--ctl-h); border-radius: var(--ctl-r); padding: 0 10px; }
/* 第二行：只和地图有关的开关，单独一条浅色的工具栏 */
.map-ctl {
  flex: 0 0 calc(100% + 36px); order: 10; margin: 0 -18px -10px; padding: 7px 18px; gap: 18px;
  background: var(--paper-2); border-top: 1px solid var(--line);
}
.ctl-grp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cap { font-size: 11.5px; color: var(--ink-3); letter-spacing: .12em; margin-right: 2px; }
.map-ctl .seg { height: 28px; }
.chip { height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; background: var(--panel); transition: opacity .15s, border-color .15s; }
.chip:hover { border-color: var(--ink-3); }
.chip.off, .chip.tog:not(:has(input:checked)) { opacity: .5; background: transparent; }
/* 开关：样子和事件筛选的小标签一样，前面一个小方块表示开着 */
.toggles { font-size: 12.5px; gap: 6px; color: var(--ink); }
.tog { position: relative; }
.tog input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tog::before { content: ""; width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--ink-3); flex: none; }
.tog:has(input:checked)::before { background: var(--seal); border-color: var(--seal); }
.tog:has(input:focus-visible) { outline: 2px solid var(--seal); outline-offset: 1px; }

/* 图例：收起时只是一个小标签 */
.legend { transition: none; }
.legend .close { font-size: 11px; }
.legend.min { padding: 0 10px; height: 28px; display: flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 999px; flex-direction: row-reverse; }
.legend.min:hover { border-color: var(--ink-3); }
.legend.min h4 { color: var(--ink-2); }

/* 地图上的缩放按钮 */
.zoombtns button { width: var(--ctl-h); height: var(--ctl-h); border-radius: var(--ctl-r); }
.zoombtns button:hover { border-color: var(--ink-3); }

/* 时间轴 */
.buttons { gap: 5px; }
.buttons button { width: 32px; height: var(--ctl-h); border-radius: var(--ctl-r); font-size: 12px; }
.buttons button:hover { border-color: var(--ink-3); }
.buttons button.play { width: 46px; background: var(--seal); border-color: var(--seal); color: #fbeee0; }
.buttons button.play:hover { filter: brightness(1.08); }
.buttons select { height: var(--ctl-h); border-radius: var(--ctl-r); padding: 0 6px; margin-left: 6px; }
.now .year { letter-spacing: .04em; }
#slider { -webkit-appearance: none; appearance: none; background: transparent; }
#slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--seal) var(--p, 0%), var(--line) var(--p, 0%)); }
#slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--seal); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--seal); }
#slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
#slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--seal); }
#slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--seal); border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--seal); }
#slider:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; }
[data-theme="dark"] .map-ctl { background: #14110d; }

/* ---------- 人物关系图 ---------- */
/* 关系的类别色：元素带 t-xxx 类，里面用 var(--tc) 取色 */
.t-kin { --tc: #c0563a; } .t-lord { --tc: #b08a2e; } .t-ally { --tc: #3f8f6a; } .t-foe { --tc: #5a4fa0; } .t-other { --tc: #9a8f7c; }
.rtag { flex: none; display: inline-block; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 3px; color: #fff; background: var(--tc); white-space: nowrap; margin-right: 2px; }
.rel { border-radius: 6px; padding: 2px 4px; margin: 0 -4px; }
.rel.on { background: var(--paper-2); }
.rel .pchip { padding: 2px 10px 2px 2px; justify-content: flex-start; }
.rel .pchip.plain { padding: 3px 10px; }

/* 人物页：以这个人为中心的一圈关系 */
.ego-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 4px 14px 10px; margin: 0 0 14px; max-width: 900px; }
.ego { display: block; width: 100%; height: auto; max-height: 640px; font-family: var(--font); }
.eg-w { stroke: var(--tc); stroke-width: 1; opacity: .2; }
.eg-e { stroke: var(--tc); stroke-width: 2; opacity: .85; }
.eg-e.rev { stroke-dasharray: 4 4; opacity: .55; }
.eg-l { font-size: 11px; text-anchor: middle; fill: var(--tc); font-weight: 600; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.eg-n .bg { fill: var(--paper); stroke: var(--ink-3); stroke-width: 2.5; }
.eg-n.plain .bg { stroke-dasharray: 3 3; stroke-width: 1.5; }
.eg-n .ini { text-anchor: middle; font-size: 13px; fill: var(--ink-3); }
.eg-n .nm { text-anchor: middle; font-size: 13px; fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.eg-n.me .bg { stroke-width: 4; }
.eg-n.me .nm { font-size: 16px; font-weight: 700; }
.eg-n.lk { cursor: pointer; }
.eg-n.lk:hover .bg { stroke-width: 4; }
.ego.hl .eg-n:not(.on), .ego.hl .eg-e:not(.on), .ego.hl .eg-l:not(.on) { opacity: .22; }
.ego.hl .eg-w { opacity: .05; }
.ego.hl .eg-w.on { opacity: .85; stroke-width: 1.6; }
.eg-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.eg-foot .linkbtn { margin: 0; }
.eg-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.eg-leg i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--tc); vertical-align: middle; margin-right: 5px; }
.eg-leg .dash i { height: 0; background: none; border-top: 2px dashed var(--ink-3); }
.eg-cap { min-height: 3.3em; margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.eg-cap b { color: var(--ink); margin: 0 8px 0 4px; }
.eg-cap i { font-style: normal; color: var(--ink-3); }

/* 图鉴的「关系网」页 */
.codex.graph-mode { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; }
.codex[hidden] { display: none; }   /* 上一行的 display 会盖掉 hidden 属性：切回地图时关系网还留在画面上，所以这里补一条 */
.rg-search { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 12px; font-size: 14px; min-width: 200px; color: var(--ink); font-family: inherit; }
.rg-ctl { margin: 12px 0 10px; }
.fchip.rg-t i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); margin-right: 5px; }
.fchip.rg-t { opacity: .5; }
.fchip.rg-t.on { opacity: 1; background: var(--panel); color: var(--ink); border-color: var(--tc); box-shadow: inset 0 0 0 1px var(--tc); }
.rg-wrap { position: relative; flex: 1; min-height: 420px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.rg-svg { display: block; width: 100%; height: 100%; cursor: grab; --k: 1; font-family: var(--font); user-select: none; }
.rg-svg:active { cursor: grabbing; }
.rg-e { stroke: var(--tc); stroke-width: 1.1; opacity: .34; vector-effect: non-scaling-stroke; }
.rg-e.off { opacity: .04; }
.rg-n { cursor: pointer; }
.rg-n .bg { fill: var(--paper); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.rg-names .nm { font-size: calc(12px / var(--k)); text-anchor: middle; fill: var(--ink); paint-order: stroke; stroke: var(--panel); stroke-width: calc(3.5px / var(--k)); stroke-linejoin: round; pointer-events: none; }
.rg-svg.far .rg-names .lo { display: none; }
.rg-n.off, .rg-names .off { opacity: .1; }
.rg-n:hover .bg { stroke-width: 4; }
.rg-n.sel .bg { stroke-width: 5; }
.rg-svg.has-focus .rg-n:not(.on), .rg-svg.has-focus .rg-names .nm:not(.on) { opacity: .12; }
.rg-svg.has-focus .rg-e:not(.on) { opacity: .035; }
.rg-svg.has-focus .rg-e.on { opacity: .95; stroke-width: 2.2; }
.rg-svg.has-focus .rg-names .nm.on { display: block; font-weight: 600; }
.rg-panel { position: absolute; top: 10px; right: 10px; bottom: 10px; width: 300px; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 12px; font-size: 13px; }
.rg-panel[hidden] { display: none; }
.rg-ph { display: flex; gap: 10px; align-items: center; }
.rg-ph .mini-pt { width: 46px; height: 46px; }
.rg-ph b { font-size: 18px; }
.rg-ph small { color: var(--ink-3); font-size: 12px; margin-left: 6px; }
.rg-ph .sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.rg-x { margin-left: auto; align-self: flex-start; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-3); }
.rg-act { margin: 10px 0 2px; }
.rg-act .primary { padding: 7px; font-size: 14px; margin-bottom: 8px; }
.rg-pathin { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; font-size: 13px; background: var(--panel); color: var(--ink); font-family: inherit; }
.rg-pathbox .hint { margin: 6px 0 0; }
.rg-chain { list-style: none; padding: 0; margin: 8px 0 2px; }
.rg-chain .hop { display: block; margin: 3px 0 3px 12px; padding: 1px 0 1px 10px; border-left: 2px solid var(--tc); font-size: 12px; color: var(--ink-2); }
.rg-list h4 { font-size: 12px; color: var(--ink-3); margin: 12px 0 4px; letter-spacing: .08em; font-weight: 600; }
.rg-list h4 i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); margin-right: 6px; }
.rg-row { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink); }
.rg-row:hover:not(.plain) { background: var(--paper-2); }
.rg-row b { flex: none; min-width: 3.2em; }
.rg-row span { color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.rg-row.plain { cursor: default; color: var(--ink-3); }
.rg-zoom { position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.rg-zoom button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: rgba(250,246,236,.95); cursor: pointer; font-size: 15px; color: var(--ink); box-shadow: var(--shadow); padding: 0; }
.rg-hint { position: absolute; left: 12px; bottom: 8px; margin: 0; font-size: 12px; color: var(--ink-3); background: rgba(250,246,236,.85); padding: 2px 8px; border-radius: 6px; pointer-events: none; }
@media (max-width: 760px) {
  .rg-panel { top: auto; left: 10px; width: auto; max-height: 46%; }
}

/* ---------- 事件配图 ---------- */
/* 事件卡片顶上的图：撑满侧栏的宽度，标题压在图的下沿（图下面那个标题就不再重复显示） */
.ev-img { position: relative; display: block; margin: -14px -16px 6px; aspect-ratio: 3 / 2; overflow: hidden; background: #1c1712; border-bottom: 3px solid var(--ink-3); }
.ev-img.history { border-bottom-color: #b08d4f; }
.ev-img.unofficial { border-bottom-color: #c2891e; }
.ev-img.adapted { border-bottom-color: #d2562a; }
.ev-img.fiction { border-bottom-color: #7b3fa0; }
.ev-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ev-img:hover img { transform: scale(1.03); }
.ev-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 42px 16px 10px; background: linear-gradient(to top, rgba(20, 15, 10, .92), rgba(20, 15, 10, .55) 55%, rgba(20, 15, 10, 0)); color: #f6ecd8; display: flex; flex-direction: column; gap: 2px; }
.ev-t { font-family: var(--font-title); font-size: 22px; line-height: 1.25; letter-spacing: .06em; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.ev-s { font-size: 12px; color: #d9c9a8; letter-spacing: .04em; }
.ev-note { margin: 0 0 8px; font-size: 11px; color: var(--ink-3); text-align: right; }
.pane h2.has-img { display: none; }

/* ---------- 时间轴：年号条和大事的名字 ---------- */
#ticks .era { cursor: pointer; }
#ticks .era rect { transition: fill-opacity .15s; }
#ticks .era text { font-size: 9px; fill: var(--ink-2); pointer-events: none; letter-spacing: .02em; }
#ticks .era:hover rect { fill-opacity: .5; }
#ticks .era.cur rect { fill-opacity: .7; }
#ticks .era.cur text { fill: var(--ink); font-weight: 700; }
#ticks .eras.ch .era text { font-size: 10px; }
#ticks .keyev text { font-size: 10px; fill: var(--ink-2); cursor: pointer; letter-spacing: .04em; }
#ticks .keyev text:hover { fill: var(--seal); }
#ticks .ax text { font-variant-numeric: tabular-nums; }

/* ---------- 图鉴首页：按势力分区 ---------- */
.cx-sec { margin: 0 0 30px; }
.cx-sech { display: flex; align-items: center; gap: 14px; padding: 9px 16px 9px 12px; margin-bottom: 14px; border-radius: 10px; border-left: 5px solid var(--fc);
  background: linear-gradient(90deg, color-mix(in srgb, var(--fc) 24%, var(--panel)), var(--panel) 62%); }
.cx-sech .ch { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--fc); color: #fffaf0; font-family: var(--font-title); font-size: 26px; font-weight: 700; box-shadow: inset 0 0 0 2px rgba(255, 250, 240, .25); }
.cx-sech .tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cx-sech b { font-family: var(--font-title); font-size: 19px; letter-spacing: .1em; }
.cx-sech .s { font-size: 12.5px; color: var(--ink-2); }
.cx-sech .n { margin-left: auto; flex: none; font-size: 12.5px; color: var(--ink-3); }
.cx-people .cx-grid { align-items: start; }
.card { border-top: 3px solid color-mix(in srgb, var(--fc, var(--line)) 75%, var(--line)); }
.card.item { border-top-width: 1px; border-top-color: var(--line); }
.pt-wrap { position: relative; }
.pt-wrap .ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 9px 8px; border-radius: 0 0 6px 6px; font-size: 12px; line-height: 1.55; color: #f3e7cf;
  background: linear-gradient(to top, rgba(20, 15, 10, .94), rgba(20, 15, 10, .7) 60%, rgba(20, 15, 10, 0)); opacity: 0; transition: opacity .18s; pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card:hover .pt-wrap .ov, .card:focus-visible .pt-wrap .ov { opacity: 1; }
.card.lead { grid-column: span 2; grid-row: span 2; }
.card.lead .nm { font-size: 26px; margin-top: 10px; }
.card.lead .zi { font-size: 14px; }
.card.lead .sub { font-size: 13px; }
.card.lead .tag { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.card.lead .pt-wrap .ov { display: none; }
@media (max-width: 560px) {
  .cx-sech .s { display: none; }
}

/* ---------- 地点条目 ---------- */
.pl-lead { margin: 12px 0 16px; max-width: 820px; }
.cx-grid.places { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.card.place { border-top: 3px solid #b08d4f; }
.card.place .cnt { color: var(--ink-3); }
.loc-wrap { border-radius: 6px; overflow: hidden; background: #dfe6e6; }
.loc { display: block; width: 100%; height: auto; }
.loc .loc-land { fill: #efe6cf; stroke: #b9ab8c; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.loc .loc-zhou { fill: #c9a25a; fill-opacity: .42; stroke: none; }
.hero.place .badge.type { color: #e9dcc0; border-color: rgba(233, 220, 192, .45); }
.loc .loc-dot { fill: var(--seal); stroke: #fffaf0; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.loc .loc-halo { fill: var(--seal); opacity: .2; }
/* 详情页头图里的位置示意：深色底，和人物页的头图一路 */
.hero.place .hero-pt { align-self: flex-start; }
.loc.big { border-radius: 8px; background: #26303a; box-shadow: 0 0 0 1px rgba(246, 236, 216, .12); font-family: var(--font); }
.loc.big .loc-land { fill: #57503f; stroke: none; }
.loc.big .loc-unit { fill: #b08d4f; opacity: .55; }
.loc.big .loc-units { fill: none; stroke: #d9c9a8; stroke-opacity: .28; stroke-width: 1; vector-effect: non-scaling-stroke; }
.loc.big .loc-dot { fill: #e2553d; stroke: #fff3dc; stroke-width: 2; }
.loc.big .loc-halo { fill: #e2553d; opacity: .28; }
.loc.big .loc-name { font-size: calc(var(--u) * 6.4); font-weight: 700; fill: #fff3dc; text-anchor: middle; paint-order: stroke; stroke: rgba(20, 15, 10, .75); stroke-width: calc(var(--u) * 1.3); stroke-linejoin: round; }
.loc.big .loc-o { cursor: pointer; }
.loc.big .loc-o circle { fill: #d9c9a8; }
.loc.big .loc-o text { font-size: calc(var(--u) * 4.2); fill: #d9c9a8; text-anchor: middle; paint-order: stroke; stroke: rgba(20, 15, 10, .7); stroke-width: calc(var(--u) * .9); stroke-linejoin: round; }
.loc.big .loc-o:hover text { fill: #fff3dc; }
.hero.place h1 small { font-size: 14px; }
/* 归属沿革的色条 */
.hbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 14px 0 3px; max-width: 620px; background: rgba(255, 255, 255, .08); }
.hbar i { display: block; height: 100%; box-shadow: inset -1px 0 0 rgba(20, 15, 10, .45); }
.hbar i.nominal { opacity: .55; }
.hbar i.contested { background-image: repeating-linear-gradient(135deg, rgba(20, 15, 10, .35) 0 3px, transparent 3px 6px); }
.hbar-ax { display: flex; justify-content: space-between; max-width: 620px; font-size: 10.5px; color: #b9aa8c; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
/* 大事：带配图的横条 */
.pl-evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.pl-ev { display: flex; gap: 12px; align-items: stretch; text-align: left; border: 1px solid var(--line); border-left: 4px solid var(--line); background: var(--panel); border-radius: 8px; padding: 0; overflow: hidden; cursor: pointer; font-family: inherit; color: var(--ink); min-height: 84px; }
.pl-ev:hover { border-color: var(--ink-3); }
.pl-ev.history { border-left-color: var(--t-history); }
.pl-ev.unofficial { border-left-color: var(--t-unofficial); }
.pl-ev.adapted { border-left-color: var(--t-adapted); }
.pl-ev.fiction { border-left-color: var(--t-fiction); }
.pl-ev img { flex: none; width: 126px; height: auto; min-height: 84px; object-fit: cover; }
.pl-ev .tx { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 8px 0; min-width: 0; }
.pl-ev img + .tx { padding-left: 0; }
.pl-ev .tx:first-child { padding-left: 12px; }
.pl-ev .t { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pl-ev .d { font-size: 12px; color: var(--ink-3); }
.pl-ev .s { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.pl-trail li { cursor: default; align-items: baseline; }
.pl-trail .pchip { margin-right: 8px; vertical-align: middle; }
.pl-trail .nt { font-size: 13px; color: var(--ink-2); }
.pl-hist li { cursor: default; }