/* chronicle.css —— 编年舆图【引擎层】共用样式(中国版 / 世界版都 link 这一份)
   🔴 换皮硬律(Rule-MODULE-001):第二个形态只准换皮不准复制。
   所以样式只有这一份;各版本的差异(站名/配色微调)写在各自 index.html 的 <style> 里,
   而且必须少到能一句话列完 —— 列不完就是线划错了,回来重划。 */
:root{
  /* 🔠 全站字号倍率。主席 2026-08-31:「整个阅读起来很多字也太小了」。
     所有 font-size 都写成 calc(Npx * var(--fs)),所以调这一个数=全站(含地图与
     时间轴上的 SVG 文字,那两处由 JS 读同一个变量)一起变大,不用一处处改。
     档位挂在 <html data-fs> 上并记进 localStorage。 */
  --fs:1.12;
  /* ── 深色(默认):黑底白字 ── */
  --bg:#0e1116; --bg2:#151a22; --bg3:#1c232e; --line:#2a3341;
  --fg:#ece6da; --fg2:#a9b2c0; --fg3:#727d8d;
  --gold:#d9a441; --goldFg:#14181f; --red:#c94f43; --cyan:#4fb3c9; --green:#5fae7d;
  --shadow:0 8px 32px rgba(0,0,0,.55);
  /* 地图图层(SVG 的属性值不解析 var(),所以下面靠 CSS 规则给元素上色,不写死在属性里) */
  --land:#1d2733; --landLine:#4b5f77; --sea1:#141c27; --sea2:#0c1015;
  --river:#3f7d96; --wall:#8a7355; --canal:#4f9ab3; --mapLabel:#5d6a7b;
  --halo:#0b0e13; --regimeFillOp:.22; --regimeLineOp:.18; --evtHalo:#0b0e13; --evtFg:#e8e2d5;
  /* 时间轴 */
  --tlBg1:#141a23; --tlBg2:#10151c; --ovBg:#0d1218; --grid:#212a35; --tick:#6d7887; --cursor:#ece6da;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
html[data-fs="0"]{--fs:.95}
html[data-fs="1"]{--fs:1.12}
html[data-fs="2"]{--fs:1.3}
html[data-fs="3"]{--fs:1.52}
/* ── 浅色:白底黑字 ── */
html[data-theme="light"]{
  --bg:#f6f4ef; --bg2:#ffffff; --bg3:#f0ece3; --line:#dcd5c8;
  --fg:#1b2027; --fg2:#4b5361; --fg3:#87909e;
  --gold:#9a6c14; --goldFg:#ffffff; --red:#b23628; --cyan:#186c85; --green:#2c7548;
  --shadow:0 8px 32px rgba(60,50,30,.18);
  --land:#e9e4d8; --landLine:#98a3b0; --sea1:#e3ebf1; --sea2:#d3dfe8;
  --river:#3d87a8; --wall:#967f52; --canal:#31809e; --mapLabel:#7c8593;
  --halo:#ffffff; --regimeFillOp:.3; --regimeLineOp:.42; --evtHalo:#ffffff; --evtFg:#1b2027;
  --tlBg1:#ffffff; --tlBg2:#f3f0e8; --ovBg:#eae5db; --grid:#e0dace; --tick:#78818f; --cursor:#1b2027;
}
/* ── 米黄:暖色护眼 ── */
html[data-theme="sepia"]{
  --bg:#efe5d1; --bg2:#f8f1e1; --bg3:#e9dfc9; --line:#d8c9ac;
  --fg:#3a3125; --fg2:#615746; --fg3:#8d8270;
  --gold:#8a6413; --goldFg:#fbf5e8; --red:#a03a29; --cyan:#256477; --green:#456f40;
  --shadow:0 8px 32px rgba(90,70,35,.2);
  --land:#e3d6b9; --landLine:#a69572; --sea1:#e9ddc5; --sea2:#dccdaf;
  --river:#4d8496; --wall:#8a7043; --canal:#3f7d90; --mapLabel:#8d8270;
  --halo:#fbf5e8; --regimeFillOp:.3; --regimeLineOp:.42; --evtHalo:#fbf5e8; --evtFg:#3a3125;
  --tlBg1:#f8f1e1; --tlBg2:#efe4cd; --ovBg:#e5d9be; --grid:#dccfb2; --tick:#7e7461; --cursor:#3a3125;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* 🔴 手机浏览器地址栏会占掉屏幕高度,100vh / height:100% 量的都是"地址栏收起后的大视口",
   于是页面比真正看得见的区域高 —— 整页被顶上去,顶栏就被地址栏挡住了(主席实拍到的就是这个)。
   dvh = 当前真实可见高度,随地址栏收放实时变。旧浏览器落回 100%,不至于崩。 */
html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:calc(14px * var(--fs)); line-height:1.7; overflow:hidden;
  display:flex; flex-direction:column; height:100%; height:100dvh;
}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ── 顶栏 ── */
header{
  flex:0 0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:9px 14px; background:var(--bg2);
  border-bottom:1px solid var(--line); z-index:30;
}
.brand{display:flex;align-items:baseline;gap:9px;flex:0 0 auto}
.brand h1{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.14em;color:var(--gold)}
.brand .sub{font-size:calc(11px * var(--fs));color:var(--fg3);letter-spacing:.05em}
.chapters{display:flex;gap:6px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.chapters::-webkit-scrollbar{display:none}
.chap{
  /* 🔴 手指按得住:min-height 46(苹果/谷歌的 44 底线再加两像素余量),不是审美问题 —— 
     小于它时手指命中的常是隔壁那个朝代(Rule-MOBILE-001)。 */
  flex:0 0 auto; min-height:46px; padding:0 13px; border:1px solid var(--line); border-radius:23px;
  font-size:calc(14px * var(--fs)); color:var(--fg2); white-space:nowrap; transition:.15s;
  display:flex; align-items:center;
}
.chap:hover{border-color:var(--gold);color:var(--fg)}
/* 🔴 .hot 必须写在 .on 前面:两者特异性相同,后写的赢。
   反过来会让选中态变成"金底金字"(前景色=背景色),按钮文字直接隐形 —— 已实测踩过。 */
.chap.hot{border-color:var(--gold);color:var(--gold)}
.chap.on,.chap.hot.on{background:var(--gold);border-color:var(--gold);color:var(--goldFg);font-weight:600}
.vstamp{flex:0 0 auto;font-family:var(--mono);font-size:calc(10px * var(--fs));color:var(--fg3)}

/* ── 主区:三块【各自可收起 / 展开 / 铺满】的板 ──
   主席 2026-08-31:「地图太小……不同内容不要一次都显示,可以收缩和扩大才行」。
   老版把 地图+时间轴+事件 三层同时铺在一屏上,谁都分不到足够高度 —— 地图必然小,
   而且怎么调都只是"从别人身上抢几十像素"。现在每块自带一条标题带:
     · 点标题带 = 收起 / 展开这一块(收起后只剩 46px 的带,内容不占地方)
     · 点 ⤢ 铺满 = 这一块吃掉整个主区,其余自动收起;再点一次还原
   收起 ≠ 看不到:标题带上仍写着这块的关键信息(当前年份 / 视窗 / 事件条数),
   时间轴收起后播放与上下一件事的按钮也还留在带上,所以地图铺满时照样能走时间。 */
main{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}

/* 🔴 权重写成变量而不是 #secMap{flex:...}:id 的特异性比 .sec[data-open="0"] 高,
   直接写 id 会让"收起"被权重盖掉(收起了还占着 1.7 份空间)。id 只喂变量,
   两条 flex 规则都落在 .sec 这一级,收起态才压得住。 */
.sec{display:flex;flex-direction:column;min-height:0;flex:var(--g,1) 1 0}
.sec[data-open="0"]{flex:0 0 auto}
.sec[data-open="0"]>.secBody{display:none}
.sec.fixed{flex:0 0 auto}
#secMap{--g:2.6}   /* 主席:地图太小 —— 三块同开时,地图拿两倍多于列表的份额 */
#secEv{--g:1}
.secBar{
  flex:0 0 auto;display:flex;align-items:center;gap:5px;
  background:var(--bg2);border-bottom:1px solid var(--line);padding:0 8px 0 2px;
}
.secTog{
  flex:1 1 auto;min-width:0;min-height:46px;display:flex;align-items:center;gap:7px;padding:0 4px;
}
.secTog .ci{flex:0 0 auto;width:20px;text-align:center;color:var(--gold);font-size:calc(12px * var(--fs));transition:transform .18s}
.sec[data-open="0"] .secTog .ci{transform:rotate(-90deg)}
.secTog .cn{
  flex:0 1 auto;min-width:0;max-width:52%;font-size:calc(15px * var(--fs));font-weight:600;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 🔴 "舆图"这种两字标题绝不许被压成"舆." —— 缩的应该是后面那句摘要。
   flex-shrink 默认 1,不写这行的话名字和摘要会一起等比缩,短名字先被切掉。 */
#secMap .cn,#secTl .cn{flex:0 0 auto;max-width:none}
.secTog .cs{
  flex:1 1 auto;min-width:0;font-size:calc(13px * var(--fs));color:var(--fg3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
}
.secBtn{
  flex:0 0 auto;min-width:46px;min-height:46px;padding:0 9px;border-radius:9px;
  border:1px solid var(--line);color:var(--fg2);font-size:calc(13.5px * var(--fs));
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
}
.secBtn:hover{border-color:var(--gold);color:var(--fg)}
.secBtn.on{background:var(--gold);color:var(--goldFg);border-color:var(--gold);font-weight:600}
.secBody{flex:1 1 0;min-height:0;display:flex;flex-direction:column}

#mapWrap{
  position:relative;min-height:110px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,var(--sea1),var(--sea2) 75%);
}
#map{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#map.drag{cursor:grabbing}

/* 地图上的浮层 */
/* 右上角那排工具键约 200px 宽,年份浮层的地盘要给它让开,否则大字号下会撞上去 */
.mapTop{position:absolute;left:14px;top:12px;z-index:10;pointer-events:none;max-width:calc(100% - 224px);overflow:hidden}
.yearBig{
  font-family:var(--serif); font-size:clamp(24px,calc(34px * var(--fs)),46px); font-weight:600; line-height:1;
  color:var(--gold); text-shadow:0 2px 14px var(--sea2); letter-spacing:.02em;
}
.yearSub{font-size:calc(12px * var(--fs));color:var(--fg2);margin-top:3px;text-shadow:0 1px 6px var(--sea2)}
.eraTag{
  display:inline-block;margin-top:6px;padding:2px 9px;border-radius:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb, var(--gold) 16%, var(--bg2));border:1px solid var(--gold);
  font-size:calc(11.5px * var(--fs));color:var(--gold);max-width:min(52vw,190px);
}
.mapTools{position:absolute;right:10px;top:8px;z-index:10;display:flex;gap:5px;flex-wrap:nowrap}
.mapLayers{
  position:absolute;right:10px;top:60px;z-index:11;display:none;flex-direction:column;gap:5px;
}
.mapLayers.on{display:flex}
.tbtn{
  min-width:44px;min-height:46px;padding:0 6px;background:var(--bg2);border:1px solid var(--line);
  border-radius:9px;font-size:calc(12.5px * var(--fs));color:var(--fg2);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
}
.tbtn:hover{border-color:var(--gold);color:var(--fg)}
.tbtn.on{background:var(--gold);color:var(--goldFg);border-color:var(--gold);font-weight:600}
.ethnicBar{
  position:absolute;left:12px;bottom:8px;z-index:10;display:flex;flex-wrap:wrap;gap:4px;max-width:76%;
}
.epill{
  min-width:44px;min-height:44px;padding:0 10px;border-radius:22px;font-size:calc(12.5px * var(--fs));border:1px solid;
  background:var(--bg2);backdrop-filter:blur(4px);transition:.15s;
  display:flex;align-items:center;justify-content:center;
}
.epill.off{opacity:.32}
.mapHint{
  position:absolute;right:12px;bottom:10px;z-index:10;font-size:calc(11px * var(--fs));color:var(--fg3);
  background:var(--bg2);padding:3px 8px;border-radius:5px;opacity:.9;
}

/* 地图 SVG 的配色走 CSS 规则,这样切主题时整张图跟着变,不用重绘 */
#map .sea{fill:url(#sea)}
#map .seaStop1{stop-color:var(--sea1)}
#map .seaStop2{stop-color:var(--sea2)}
#map .land{fill:var(--land);stroke:var(--landLine)}
#map .river{stroke:var(--river)}
#map .wall{stroke:var(--wall)}
#map .canal{stroke:var(--canal)}
#map .mapLabel{fill:var(--mapLabel)}
#map .regime{fill-opacity:var(--regimeFillOp);stroke-opacity:var(--regimeLineOp)}
#map .haloTxt{stroke:var(--halo)}
#map .evtTxt{fill:var(--evtFg);stroke:var(--evtHalo)}
#map .capMark{stroke:var(--halo)}

/* ── 中层:时间轴 ── */
#tl{
  flex:0 0 auto !important; background:linear-gradient(180deg,var(--tlBg1),var(--tlBg2));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  user-select:none; position:relative; z-index:20;
  /* 滑块上的朝代刻度是绝对定位、会探出滑块几像素;不裁掉的话整页会多出几像素可滚 */
  overflow:hidden;
}
.play{background:var(--gold);color:var(--goldFg);border-color:var(--gold);font-weight:700}
.play:hover{filter:brightness(1.12)}

.scrubHint{
  padding:3px 14px 0;font-size:clamp(11px,calc(12px * var(--fs)),15px);color:var(--fg3);text-align:center;
  letter-spacing:.03em;pointer-events:none;
}
/* 播放器式滑块:横跨【全部四千年】——一路往右滑能滑到清末,往左滑能滑到夏商。
   轨道底色是朝代色带,所以滑到哪个朝代一眼看得出;轻点 = 看这一年的事。 */
.scrub{
  position:relative;height:46px;margin:2px 14px 0;display:flex;align-items:center;
  cursor:pointer;touch-action:none;
}
.scrubTrack{
  position:absolute;left:0;right:0;height:10px;border-radius:5px;
  background:var(--bg3);border:1px solid var(--line);overflow:hidden;
}
.scrubFill{
  position:absolute;left:0;height:10px;border-radius:5px 0 0 5px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 30%,transparent),color-mix(in srgb,var(--gold) 55%,transparent));
  pointer-events:none;
}
/* 朝代刻度名:滑动时知道自己在哪个朝代 */
.scrubEra{
  position:absolute;left:0;right:0;bottom:0;height:calc(15px * var(--fs));pointer-events:none;
}
.scrubEra span{
  position:absolute;transform:translateX(-50%);font-size:calc(12px * var(--fs));color:var(--fg3);
  white-space:nowrap;letter-spacing:.02em;
}
/* 细节轴的可视范围,在全景滑块上用一个方框标出来(滑块是全局,方框是"你现在放大在哪") */
.scrubWin{
  position:absolute;height:18px;min-width:5px;border:1.5px solid var(--gold);border-radius:3px;
  background:color-mix(in srgb,var(--gold) 16%,transparent);pointer-events:none;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--bg) 60%,transparent);
}
.scrubThumb{
  position:absolute;width:16px;height:16px;border-radius:50%;
  background:var(--gold);border:2px solid var(--bg2);box-shadow:0 1px 5px rgba(0,0,0,.4);
  transform:translateX(-50%);pointer-events:none;transition:width .12s,height .12s;
}
.scrub.drag .scrubThumb{width:22px;height:22px}
/* 松手吸附到大事件年时,圆钮弹一下 —— 让"它自己动了一下"这件事看得见,而不是莫名其妙跳年份 */
@keyframes thumbSnap{0%{box-shadow:0 0 0 0 var(--gold)}60%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.scrubThumb.snap{animation:thumbSnap .42s ease-out}
.scrubTip{
  position:absolute;top:-2px;transform:translateX(-50%);
  font-family:var(--mono);font-size:calc(10.5px * var(--fs));color:var(--goldFg);background:var(--gold);
  padding:0 6px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:.12s;
}
.scrub.drag .scrubTip,.scrub:hover .scrubTip{opacity:1}
/* 滑块上的事件刻度:滑到哪儿有事,一眼看得见 */
.scrubTick{position:absolute;width:2px;height:11px;border-radius:1px;transform:translateX(-50%);pointer-events:none;opacity:.85}

/* 主题切换(右上) */
.themeBar{flex:0 0 auto;display:flex;gap:4px;align-items:center}
.thBtn{
  width:46px;height:46px;border-radius:9px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(16px * var(--fs));line-height:1;font-weight:700;font-family:var(--serif);
  background:var(--bg3);color:var(--fg);
}
/* 字号档位:A－ / A＋。主席随时把整站字调大调小,记住上次的选择 */
.fsBar{flex:0 0 auto;display:flex;gap:4px;align-items:center}
.fsBtn{
  min-width:46px;height:46px;border-radius:9px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(15px * var(--fs));font-weight:700;color:var(--fg2);
}
.fsBtn:hover{border-color:var(--gold);color:var(--fg)}
.fsBtn:disabled{opacity:.35}
.fsNow{
  flex:0 0 auto;font-family:var(--mono);font-size:calc(11px * var(--fs));color:var(--fg3);
  min-width:26px;text-align:center;
}
.thBtn:hover{border-color:var(--gold)}
/* 配色按钮上写着当前是哪一种(自己就长成那个配色的样子),按一下换下一种 */
.thBtn[data-theme="dark"]{background:#12171f;color:#ece6da;border-color:#2a3341}
.thBtn[data-theme="light"]{background:#ffffff;color:#1b2027;border-color:#dcd5c8}
.thBtn[data-theme="sepia"]{background:#efe5d1;color:#3a3125;border-color:#d8c9ac}
#ovWrap{padding:0 14px;display:none}
#ov{width:100%;height:22px;display:block;cursor:crosshair}
/* 🔴 轴上的年份刻度与朝代名是 SVG 文字,字号由 JS 按 --fs 现算(见 timeline.js)。
   高度限制放在【外层容器】上:泳道多到装不下时,轴自己长高、在这个框里竖着滚,
   而不是把每条泳道压薄、把朝代名缩成蚂蚁(主席点名的正是这些字)。 */
#axWrap{
  padding:0 14px 6px; --axH:calc(124px * var(--fs));
  height:calc(var(--axH) + 6px); overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
}
#ax{width:100%;display:block;cursor:crosshair}

/* ── 事件卡片(竖向滚动的多列网格) ──
   高度不再自己写死,也不再有"三档放大":它就是一块 .sec,收起/展开/铺满由标题带管。 */
#events{background:var(--bg2);overflow:hidden;min-height:0}
.evTools{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 14px 0;
}
#search{
  flex:1 1 auto;min-width:0;min-height:44px;padding:0 12px;background:var(--bg3);
  border:1px solid var(--line);border-radius:9px;color:var(--fg);font-size:calc(14px * var(--fs));outline:none;
}
#search:focus{border-color:var(--gold)}
#search::placeholder{color:var(--fg3)}

/* 多列网格 + 竖向滚动:每张卡完整显示,不裁剪 */
.evStrip{
  /* min-height:0 是 flex 子项能真正被压缩的前提;缺了它,矮屏上这块会按内容撑开、顶破整页 */
  flex:1 1 auto;min-height:0;display:grid;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:9px;
  overflow-y:auto;overflow-x:hidden;padding:9px 14px 14px;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.nearTip{
  grid-column:1/-1;font-size:calc(11.5px * var(--fs));color:var(--fg3);padding:2px 2px 4px;
}
.evt{
  padding:10px 13px;background:var(--bg3);border:1px solid transparent;
  border-left:3px solid var(--line);border-radius:0 8px 8px 0;cursor:pointer;transition:.14s;
  display:flex;flex-direction:column;height:fit-content;
}
.evt:hover{background:var(--bg3);filter:brightness(1.06);border-left-color:var(--gold)}
.evt.imp3{border-left-color:var(--red)}
.evt.imp2{border-left-color:var(--gold)}
.evt.on{background:color-mix(in srgb, var(--gold) 12%, var(--bg3));border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.evtY{font-family:var(--mono);font-size:calc(12.5px * var(--fs));color:var(--gold);letter-spacing:.03em}
.evtT{font-size:calc(15px * var(--fs));font-weight:600;color:var(--fg);margin:1px 0 3px;line-height:1.42}
.evtP{font-size:calc(12.5px * var(--fs));color:var(--fg3)}
.evtP b{color:var(--cyan);font-weight:500}
.evtD{
  font-size:calc(13px * var(--fs));color:var(--fg2);line-height:1.7;margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.idiomChips{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
.chip{
  padding:1px 7px;border-radius:9px;font-size:calc(11px * var(--fs));white-space:nowrap;
  background:color-mix(in srgb, var(--gold) 13%, transparent);color:var(--gold);border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.empty{padding:22px 14px;color:var(--fg3);font-size:calc(12.5px * var(--fs));line-height:2}

/* ── 详情弹层 ── */
#modal{
  position:fixed;inset:0;background:color-mix(in srgb, var(--sea2) 78%, transparent);backdrop-filter:blur(4px);
  z-index:100;display:none;align-items:center;justify-content:center;padding:20px;
}
#modal.on{display:flex}
.card{
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  max-width:720px;width:100%;max-height:86vh;overflow-y:auto;box-shadow:var(--shadow);
}
.cardHead{
  padding:16px 20px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--bg2);z-index:2;
}
.cardHead .k{font-family:var(--mono);font-size:calc(11.5px * var(--fs));color:var(--gold);letter-spacing:.05em}
.cardHead h3{font-family:var(--serif);font-size:calc(21px * var(--fs));font-weight:600;margin:3px 0 5px;line-height:1.4}
.cardHead .meta{font-size:calc(12px * var(--fs));color:var(--fg3)}
.cardHead .meta b{color:var(--cyan);font-weight:500}
.x{position:absolute;right:14px;top:13px;font-size:calc(20px * var(--fs));color:var(--fg3);line-height:1}
.x:hover{color:var(--fg)}
.cardBody{padding:14px 20px 22px;font-size:calc(15px * var(--fs));line-height:1.95}
.cardBody p{margin-bottom:12px;color:var(--fg)}
.whyBox{
  margin:14px 0;padding:11px 14px;background:color-mix(in srgb, var(--cyan) 9%, transparent);
  border-left:3px solid var(--cyan);border-radius:0 7px 7px 0;
}
.whyBox .lab{font-size:calc(11.5px * var(--fs));color:var(--cyan);font-weight:600;letter-spacing:.06em;margin-bottom:3px}
.whyBox p{margin:0;color:var(--fg);font-size:calc(13.5px * var(--fs))}
.novelBox{
  margin:14px 0;padding:11px 14px;background:color-mix(in srgb, var(--red) 9%, transparent);
  border-left:3px solid var(--red);border-radius:0 7px 7px 0;
}
.novelBox .lab{font-size:calc(11.5px * var(--fs));color:var(--red);font-weight:600;letter-spacing:.06em;margin-bottom:3px}
.novelBox p{margin:0;color:var(--fg);font-size:calc(13.5px * var(--fs))}
.rawBox{
  margin:12px 0;padding:11px 14px;background:var(--bg3);border:1px solid var(--line);
  border-radius:7px;font-family:var(--serif);font-size:calc(13.5px * var(--fs));color:var(--fg2);line-height:1.9;
}
.rawBox .lab{font-family:var(--sans);font-size:calc(11px * var(--fs));color:var(--fg3);margin-bottom:4px;letter-spacing:.06em}
.secTitle{font-size:calc(12px * var(--fs));color:var(--gold);letter-spacing:.1em;margin:18px 0 8px;font-weight:600}

/* 面板里的可折叠分组:长清单不一次全铺开,点标题条才展开(主席 2026-08-31) */
.fold{margin:10px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg2)}
.foldSum{
  list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;gap:10px;
  padding:0 14px;font-size:calc(14.5px * var(--fs));font-weight:600;color:var(--fg);
  background:var(--bg3);
}
.foldSum::-webkit-details-marker{display:none}
.foldSum::before{content:'▸';color:var(--gold);font-size:calc(12px * var(--fs));transition:transform .18s}
.fold[open]>.foldSum::before{transform:rotate(90deg)}
.foldN{margin-left:auto;font-family:var(--mono);font-size:calc(12px * var(--fs));color:var(--fg3);font-weight:400}
.fold>div{padding:10px 12px 14px}

/* 关系网 / 表格 / 闯关 面板 */
#panel{
  position:absolute;inset:0;background:var(--bg);z-index:40;overflow-y:auto;display:none;
}
#panel.on{display:block}
.pWrap{max-width:1080px;margin:0 auto;padding:22px 20px 60px}
.pTitle{font-family:var(--serif);font-size:calc(25px * var(--fs));color:var(--gold);margin-bottom:5px}
.pLead{color:var(--fg2);font-size:calc(13.5px * var(--fs));line-height:1.9;margin-bottom:20px;max-width:760px}
.pBack{
  position:sticky;top:0;float:right;min-height:46px;padding:0 14px;background:var(--bg3);
  border:1px solid var(--line);border-radius:9px;font-size:calc(14px * var(--fs));color:var(--fg2);z-index:3;
}
.pBack:hover{border-color:var(--gold);color:var(--fg)}

table.grid{width:100%;border-collapse:collapse;font-size:calc(14px * var(--fs));margin:8px 0 20px}
table.grid th{
  text-align:left;padding:8px 9px;background:var(--bg3);color:var(--fg2);
  font-weight:600;font-size:calc(12px * var(--fs));border-bottom:2px solid var(--line);white-space:nowrap;
}
table.grid td{padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:top}
table.grid tr:hover td{background:var(--bg3)}
.eth{padding:1px 7px;border-radius:9px;font-size:calc(11.5px * var(--fs));font-weight:600;white-space:nowrap}
.warn{color:var(--red)}

.tree{display:flex;flex-direction:column;gap:12px}
/* ── 北方民族长河 ── */
/* 一条横向时间河:每支民族一行色带,按真实起讫年铺开 —— 谁和谁同代、谁接谁的班,一眼看出来 */
.nomRuler,.nomRow{display:flex;align-items:center;gap:8px}
.nomRuler{margin-bottom:4px;position:sticky;top:0;background:var(--bg);z-index:2;padding:2px 0}
.nomName{flex:0 0 92px;font-size:calc(12px * var(--fs));text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nomTrack{flex:1 1 auto;position:relative;height:22px}
.nomEra{
  position:absolute;top:0;height:18px;line-height:18px;font-size:calc(10.5px * var(--fs));color:var(--fg3);
  border-left:1px solid var(--line);padding-left:4px;white-space:nowrap;overflow:hidden;
}
.nomRow{padding:1px 0}
.nomRow:hover .nomBand{filter:brightness(1.35)}
.nomBand{
  position:absolute;top:3px;height:16px;border-radius:8px;border:1px solid;
  display:flex;align-items:center;padding:0 6px;font-size:calc(10px * var(--fs));white-space:nowrap;overflow:hidden;
}
.nomOut{position:absolute;top:4px;font-size:calc(10px * var(--fs));white-space:nowrap;line-height:14px}
.nomRiver{border-left:1px solid var(--line);border-right:1px solid var(--line);padding:4px 0}
/* 十三步主线:不想读全表的人,只看这一段也能把链条串起来 */
.nomSpines{display:grid;gap:4px}
.nomSpine{
  display:grid;grid-template-columns:64px 150px 1fr;gap:10px;align-items:baseline;cursor:pointer;
  padding:5px 8px;border-radius:6px;border:1px solid transparent;
}
.nomSpine:hover{border-color:var(--gold);background:var(--bg3)}
.nomSpine .y{font-family:var(--mono);font-size:calc(12px * var(--fs));color:var(--gold);text-align:right}
.nomSpine .t{font-weight:600;font-size:calc(13px * var(--fs))}
.nomSpine .s{color:var(--fg2);font-size:calc(12.5px * var(--fs))}
/* 四格档案:从哪来 / 怎么起 / 怎么没 / 人去哪 —— 链条就是靠这四格连起来的 */
.nomF{display:grid;grid-template-columns:82px 1fr;gap:8px;font-size:calc(12.5px * var(--fs));line-height:1.75;margin:4px 0}
.nomF b{color:var(--fg3);font-weight:500;font-size:calc(11.5px * var(--fs));text-align:right}
.nomF span{color:var(--fg2)}
.nomF.to span{color:var(--gold)}
.nomF.warn span{color:var(--red)}
.nomKeys{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 6px}
.nomKeys .chip{cursor:pointer;font-size:calc(11.5px * var(--fs))}
.nomKeys .chip:hover{border-color:var(--gold);color:var(--gold)}
.nomMemo{
  margin-top:6px;padding:6px 9px;border-radius:6px;font-size:calc(12.5px * var(--fs));
  background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--fg);
}
.nomRel{margin-top:6px;font-size:calc(11.5px * var(--fs));color:var(--fg3)}
.nomRel a{color:var(--cyan);cursor:pointer;text-decoration:underline dotted}
.nomCard.flash{box-shadow:0 0 0 2px var(--gold)}
@media (max-width:860px){
  .nomName{flex:0 0 62px;font-size:calc(11px * var(--fs))}
  .nomSpine{grid-template-columns:52px 1fr;row-gap:2px}
  .nomSpine .s{grid-column:2}
  .nomF{grid-template-columns:70px 1fr}
}
.node{
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:13px 15px;
  border-left:3px solid var(--gold);
}
.node h4{font-size:calc(15px * var(--fs));margin-bottom:3px;color:var(--fg)}
.node .role{font-size:calc(12px * var(--fs));color:var(--fg3);margin-bottom:6px}
.node .path{font-size:calc(12.5px * var(--fs));color:var(--fg2);margin-bottom:6px;font-family:var(--mono);line-height:1.8}
.node .out{
  display:inline-block;padding:2px 10px;border-radius:11px;font-size:calc(12px * var(--fs));font-weight:600;
  background:color-mix(in srgb, var(--gold) 15%, transparent);color:var(--gold);border:1px solid color-mix(in srgb, var(--gold) 38%, transparent);margin-bottom:6px;
}
.node .note{font-size:calc(13px * var(--fs));color:var(--fg2);line-height:1.85}

.quizBox{max-width:640px;margin:0 auto}
.qCard{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:20px}
.qRaw{font-family:var(--serif);font-size:calc(15px * var(--fs));line-height:2;color:var(--fg);margin-bottom:8px}
.qMeta{font-size:calc(12px * var(--fs));color:var(--fg3);margin-bottom:16px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{
  padding:11px 14px;background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  text-align:left;font-size:calc(14px * var(--fs));transition:.13s;
}
.opt:hover{border-color:var(--gold)}
.opt.right{background:color-mix(in srgb, var(--green) 18%, transparent);border-color:var(--green);color:var(--fg)}
.opt.wrong{background:color-mix(in srgb, var(--red) 16%, transparent);border-color:var(--red);color:var(--fg)}
.qBar{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:calc(12.5px * var(--fs));color:var(--fg2)}
.score{font-family:var(--mono);color:var(--gold)}
.qExp{margin-top:14px;padding:12px 14px;background:color-mix(in srgb, var(--cyan) 9%, transparent);border-left:3px solid var(--cyan);border-radius:0 7px 7px 0;font-size:calc(13.5px * var(--fs));line-height:1.9;color:var(--fg);display:none}
.qExp.on{display:block}
.nextq{margin-top:14px;padding:8px 18px;background:var(--gold);color:var(--goldFg);border-radius:7px;font-weight:600;font-size:calc(13.5px * var(--fs))}

/* 移动端:布局不变(还是三块可收放的板),只是各块更紧凑 */
@media (max-width:860px){
  /* 🔴 竖屏手机上,标题+20 个时代按钮+字号+主题挤一行会互相压扁。
     让"时代选择"独占第二行(order:10 + 整行宽),第一行只留标题、字号与主题。 */
  header{gap:6px;padding:6px 10px;row-gap:6px}
  .chapters{order:10;flex:0 0 100%;width:100%;gap:5px;padding-bottom:1px}
  .chap{padding:0 11px;font-size:calc(13.5px * var(--fs))}
  .fsBar{margin-left:auto}
  .fsNow{display:none}
  /* 手指要按得住:滑块与圆钮都加大 */
  .scrub{height:48px;margin:2px 12px 0}
  .scrubTrack,.scrubFill{height:11px;border-radius:5px}
  .scrubThumb{width:24px;height:24px}
  .scrub.drag .scrubThumb{width:30px;height:30px}
  .scrubTip{font-size:calc(12px * var(--fs));padding:1px 8px}
  /* 滑块已经横跨全部年代并带朝代色带,总览条在手机上是重复的,藏掉换回一行高度 */
  #ovWrap{display:none}
  .brand h1{font-size:16px}
  .brand .sub,.vstamp{display:none}
  .yearBig{font-size:clamp(20px,calc(24px * var(--fs)),32px)}
  .mapTop{left:12px;top:8px}
  /* 年份摘要在标题带上已经有了,图上只留一个大年份,把地图还给地图 */
  .yearSub,.eraTag{display:none}
  #axWrap{--axH:calc(124px * var(--fs))}
  .evStrip{grid-template-columns:1fr;padding:9px 12px 12px}
  .mapHint{display:none}
  .secTog .cn{font-size:calc(14.5px * var(--fs))}
  .secTog .cs{font-size:calc(12.5px * var(--fs))}
}
/* 矮屏(小手机 / 地址栏占掉一截 / 分屏):按比例压瘦。
   🔴 这里【只压间距,不压字号】—— 主席这轮的原话就是"字太小",
   再拿"屏幕矮"当理由把字缩回去,等于当场违背他要的东西。
   高度不够的解法是把某一块【收起来】(标题带一点就收),不是把字变小。 */
@media (max-height:760px){
  header{padding:4px 10px;row-gap:4px}
  .brand h1{font-size:15px}
  /* 矮屏上这行提示语要占掉 22px,而滑块本身长什么样已经说明了怎么用 */
  .scrubHint{display:none}
  .scrub{height:44px}
  #axWrap{--axH:calc(104px * var(--fs))}
  #mapWrap{min-height:96px}
}
/* 横屏手机:高度只剩三四百像素,砍掉可省的装饰,并把细节轴再压一档 */
@media (max-height:520px){
  /* 横屏时宽度够,时代选择不必再独占一行(那是竖屏挤才需要的),收回来省一整行高度 */
  .chapters{order:0;flex:1 1 0;width:auto;min-width:0}
  .scrubHint{display:none}
  .scrub{height:42px}
  #axWrap{--axH:calc(92px * var(--fs))}
  #mapWrap{min-height:76px}
  .eraTag{display:none}
  .yearBig{font-size:clamp(18px,calc(20px * var(--fs)),26px)}
  .evTools{padding:5px 12px 0}
}