/* ============================================================
   华夏长卷 · 视觉层 v2
   设计语言：绢帛水墨长卷
   - 陈年绢帛底 + 经纬纹理 + 远山剪影，上下深色织锦装裱
   - 墨色文字 / 朱砂点缀 / 泥金细节 / 矿物颜料朝代色
   - 楷体标题 · 宋体正文 · 全系统字体
   - v2：整体圆角化、底部年份轴、更克制的高级配色
   ============================================================ */

/* 自托管子集字体：霞鹜文楷（标题）+ 思源宋体（正文），按站内用字子集化 */
@font-face {
  font-family: 'HX Kai';
  src: url('../assets/fonts/wenkai.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'HX Serif';
  src: url('../assets/fonts/serif.woff2') format('woff2');
  font-display: swap;
}

:root {
  --silk:       #e7dabc;
  --silk-hi:    #f5ecd8;
  --silk-lo:    #d5c49e;
  --paper:      #f3ead4;
  --ink:        #262119;
  --ink-soft:   #61553f;
  --ink-faint:  #91846b;
  --cinnabar:   #a63a28;
  --cinnabar-d: #7e2417;
  --azurite:    #3f6b8f;
  --azurite-d:  #2c516f;
  --gilt:       #b0904f;
  --gilt-soft:  rgba(176,144,79,.55);
  --wood-tex:   linear-gradient(90deg, #281709, #5b3c22 50%, #221307); /* 由 JS 换成 canvas 木纹 */
  --wood-cyl:   linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.05) 24%, rgba(255,236,200,.26) 47%, rgba(255,236,200,.32) 52%, rgba(0,0,0,.08) 76%, rgba(0,0,0,.64)); /* 圆柱受光 */
  --cap-gilt:   linear-gradient(90deg, #4d3a14, #96762f 30%, #d9b768 50%, #8a6a28 72%, #3d2d0e);
  --mount:      #171d22;
  --mount-hi:   #232b31;
  --line-soft:  rgba(38,33,25,.32);
  --r-lg: 18px;
  --r-md: 12px;
  --shadow-soft: 0 12px 40px rgba(38,28,10,.20);
  --font-kai:  'HX Kai', 'Kaiti SC', 'STKaiti', 'KaiTi', 'BiauKai', 'SimSun', serif;
  --font-song: 'HX Serif', 'Songti SC', 'STSong', 'Noto Serif SC', 'SimSun', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-song);
  color: var(--ink);
  background: var(--silk);
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 舞台：绢帛底 + 远山 ---------- */
#stage {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 130% 90% at 50% 40%, rgba(255,251,240,.65), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, var(--silk-lo), var(--silk) 16%, var(--silk) 84%, var(--silk-lo));
  overflow: hidden;
}
/* 远山剪影 + 云雾（水墨氛围，极淡；提供 mist.webp 后自动叠加真水墨笔触） */
#stage::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 96px; height: 34vh;
  pointer-events: none; z-index: 0; opacity: .07;
  background:
    url('../assets/img/ui/mist.webp') bottom / 1800px auto repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1680' height='320' viewBox='0 0 1680 320'%3E%3Cpath d='M0 250 Q120 150 250 210 Q330 245 420 200 Q560 120 700 215 Q800 268 920 210 Q1050 140 1180 220 Q1290 275 1400 215 Q1520 155 1680 235 L1680 320 L0 320 Z' fill='%23383125'/%3E%3Cpath d='M0 292 Q180 225 340 272 Q480 305 620 262 Q790 215 950 280 Q1090 320 1230 268 Q1400 215 1680 290 L1680 320 L0 320 Z' fill='%23383125' opacity='.7'/%3E%3C/svg%3E") bottom / 1680px 320px repeat-x;
}
/* 绢丝经纬 + 微噪点 */
#stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image:
    repeating-linear-gradient(0deg,  rgba(120,100,60,.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,60,.028) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}

/* ---------- 背景画作层 ---------- */
#bg-layer { position: absolute; inset: 0; z-index: 1; }
/* 统一疆域底图：固定视角，悬停朝代时对应疆域着色 */
#geo-map {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .9s ease;
  /* 允许陆地画出 viewBox 之外，填满 meet 模式的留白，避免底图出现硬切边 */
  overflow: visible;
}
#geo-map.show { opacity: 1; }
#geo-map .geo-base {
  fill: rgba(120,100,60,.10);
  stroke: rgba(46,41,33,.38); stroke-width: .8;
  stroke-linejoin: round;
}
#geo-map .geo-terr {
  fill-opacity: 0; stroke-opacity: 0; stroke-width: 1.4;
  stroke-linejoin: round; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center; transform: scale(.9);
  /* 离场：疆域收缩淡出（较快、缓入） */
  transition: fill-opacity .4s ease-in, stroke-opacity .4s ease-in, transform .45s ease-in;
}
#geo-map .geo-terr.on {
  fill-opacity: .4; stroke-opacity: .9; transform: scale(1);
  /* 入场：疆域自中心舒展铺开（较慢、缓出，略延迟，让上一朝先退去） */
  transition: fill-opacity .75s ease-out .12s, stroke-opacity .75s ease-out .12s,
              transform .8s cubic-bezier(.22,.7,.24,1) .1s;
}
.bg-slot {
  position: absolute; inset: -4% -6%;
  background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.2s ease;
  will-change: opacity, transform;
  mix-blend-mode: multiply; /* 让画作“印进”绢帛纹理，消除贴图感 */
}
.bg-slot.active { opacity: .58; }
#bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0,0,0,0), rgba(210,193,158,.45) 90%),
    linear-gradient(180deg, rgba(231,218,188,.92) 0%, rgba(231,218,188,.26) 26%,
                    rgba(231,218,188,.10) 50%, rgba(231,218,188,.30) 72%, rgba(231,218,188,.94) 100%);
}

/* ---------- 上下装裱（织锦 + 泥金线） ---------- */
.mount {
  position: absolute; left: 0; right: 0; z-index: 20;
  background:
    url('../assets/img/ui/brocade.webp') center / 220px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M4 24 V8 H20 V18 H10 V13 H15' fill='none' stroke='%23b0904f' stroke-opacity='.12' stroke-width='1.6'/%3E%3C/svg%3E") center / 28px 28px,
    linear-gradient(180deg, var(--mount-hi), var(--mount));
}
.mount::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px;
  background:
    linear-gradient(90deg, transparent, var(--gilt-soft) 15%, var(--gilt-soft) 85%, transparent) center / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(176,144,79,.25) 22%, rgba(176,144,79,.25) 78%, transparent) center 3px / 100% 1px no-repeat;
}
#mount-top { top: 0; height: 54px; }
#mount-top::after { bottom: -1px; }
#mount-bottom { bottom: 0; height: 62px; }
#mount-bottom::after { top: -2px; }

/* ---------- 顶部题字 ---------- */
#chrome-top {
  position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; color: #d8cbb0;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand .seal {
  width: 32px; height: 32px; border-radius: 7px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,238,214,.22), transparent 42%),
    radial-gradient(circle at 74% 78%, rgba(58,4,0,.32), transparent 48%),
    linear-gradient(135deg, #b13a28, #832012);
  color: #f6ebd3; font-family: var(--font-kai); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 5px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(246,235,211,.28), 0 2px 6px rgba(0,0,0,.35);
  transform: rotate(-3deg);
  filter: url(#seal-rough); /* 篆刻做旧边缘 */
}
.brand h1 {
  font-family: var(--font-kai); font-size: 20px; font-weight: 400;
  letter-spacing: 9px; color: #ecdcba; text-indent: 4px;
}
.brand .sub { font-size: 11px; letter-spacing: 3px; color: #a2937a; }
#breadcrumb {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--font-kai); font-size: 13.5px; letter-spacing: 2px; color: #cbbb92;
  display: flex; gap: 10px; align-items: center; white-space: nowrap;
}
#breadcrumb .bc { cursor: pointer; opacity: .8; transition: .25s; padding: 3px 8px; border-radius: 20px; }
#breadcrumb .bc:hover { opacity: 1; color: #f2e2bd; background: rgba(240,223,186,.08); }
#breadcrumb .bc.current { opacity: 1; color: #f2e2bd; cursor: default; background: none; }
#breadcrumb .sep { opacity: .4; font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
#btn-about, #btn-tour {
  background: none; border: 1px solid rgba(203,187,146,.4); color: #cbbb92;
  font-family: var(--font-kai); font-size: 12px; letter-spacing: 2px;
  padding: 5px 15px; border-radius: 20px; cursor: pointer; transition: .25s;
  flex-shrink: 0;
}
#btn-about:hover, #btn-tour:hover { border-color: #ecdcba; color: #ecdcba; background: rgba(240,223,186,.07); }
#btn-tour { border-color: rgba(212,176,97,.55); color: #dfc389; }

/* 顶栏搜索 */
#search-wrap { position: relative; }
#search {
  width: 150px; padding: 6px 14px; border-radius: 20px;
  border: 1px solid rgba(203,187,146,.35);
  background: rgba(240,223,186,.08); color: #ead9b8;
  font-family: var(--font-song); font-size: 12px; letter-spacing: 1px;
  outline: none; transition: width .3s ease, border-color .25s, background .25s;
}
#search::placeholder { color: rgba(203,187,146,.55); }
#search:focus { width: 220px; border-color: #ecdcba; background: rgba(240,223,186,.14); }
#search-results {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px; z-index: 60;
  background: linear-gradient(165deg, #f6efdb, #eadfc2);
  border: 1px solid rgba(96,80,50,.4); border-radius: 12px;
  box-shadow: 0 16px 48px rgba(18,12,4,.4);
  overflow: hidden; display: none;
}
#search-results.show { display: block; }
.sr-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 15px; cursor: pointer;
  border-bottom: 1px dashed rgba(96,80,50,.14); transition: background .15s;
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover { background: rgba(166,58,40,.07); }
.sr-item .sr-t { font-family: var(--font-kai); font-size: 14px; color: var(--ink); letter-spacing: 1px; }
.sr-item:hover .sr-t { color: var(--cinnabar); }
.sr-item .sr-meta { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; flex-shrink: 0; }
.sr-none { padding: 12px 15px; font-size: 12px; color: var(--ink-soft); }

/* ---------- 卷面 ---------- */
#scroll-area {
  position: absolute; left: 0; right: 0; z-index: 10;
  top: calc(54px + 7vh); bottom: calc(62px + 52px + 54px + 2vh);
  cursor: grab; touch-action: none;
}
#scroll-area.dragging { cursor: grabbing; }

.layer { position: absolute; inset: 0; pointer-events: none; }
#bands  { z-index: 1; }
#periods{ z-index: 2; }
#events { z-index: 6; }

/* 中轴墨线（必须穿透点击：它横贯卷面中心，正压在朝代名与红点上） */
#axisln {
  top: 50%; height: 1px; inset-inline: 0; position: absolute; z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--line-soft) 6%, var(--line-soft) 94%, transparent);
}

/* ---------- 朝代段（圆角浮片） ---------- */
.band {
  position: absolute; top: 12px; bottom: 12px; pointer-events: auto;
  border-radius: var(--r-md);
  border: 1px solid rgba(38,33,25,.10);
  background-clip: padding-box;
  transition: box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
}
.band:hover {
  border-color: rgba(38,33,25,.20);
  box-shadow: 0 8px 26px rgba(38,28,10,.14), inset 0 0 0 1px rgba(255,251,240,.35);
}
.band .wash {
  position: absolute; inset: 0; border-radius: inherit;
  opacity: .20; pointer-events: none;
}
.band.legend-era .wash { opacity: .12; }
.band .bname {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: auto; cursor: pointer; white-space: nowrap;
  font-family: var(--font-kai); color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,251,240,.55);
}
.band .bname .nm { display: block; letter-spacing: .1em; line-height: 1.12; transition: color .2s; }
.band .bname:hover .nm { color: var(--cinnabar); }
.band .bname .eradot { /* 朝代色细点缀（极简卷面上唯一的色彩记号） */
  display: block; width: 22px; height: 3px; border-radius: 2px;
  margin: 9px auto 0; opacity: .7;
}
.band .bname.narrow .eradot { width: 14px; margin-top: 6px; }
.band .bname.docked .eradot { display: none; }
.band .bname .yr {
  display: block; font-size: 11px; letter-spacing: 1.5px; color: var(--ink-soft);
  margin-top: 9px; font-family: var(--font-song);
}
.band .bname .tg {
  display: block; font-size: 12.5px; letter-spacing: 5px; color: var(--ink-soft); margin-top: 11px;
}
.band .bname.vertical .nm { writing-mode: vertical-rl; margin: 0 auto; letter-spacing: .22em; }
/* 停靠态：放大到朝代级后，段名缩小移到卷面顶部，让出中轴事件区 */
.band .bname.docked {
  top: 52px; transform: translateX(-50%);
  padding: 3px 14px; border-radius: 16px;
  background: rgba(245,236,216,.72);
  border: 1px solid rgba(96,80,50,.22);
  box-shadow: 0 3px 12px rgba(38,28,10,.1);
}
.band .bname.docked .legend-tag { display: none; }
.band .bname .legend-tag {
  display: inline-block; font-size: 10px; color: var(--cinnabar); border: 1px solid rgba(166,58,40,.45);
  border-radius: 4px; padding: 1.5px 6px; letter-spacing: 2px; margin-top: 9px;
  background: rgba(246,235,211,.5);
}
.band .bname.narrow .yr, .band .bname.narrow .tg, .band .bname.narrow .legend-tag { display: none; }

/* ---------- 分期子带 ---------- */
.period {
  position: absolute; top: 20px; height: 24px; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; overflow: hidden;
  border-left: 2px solid rgba(38,33,25,.16); border-radius: 0 12px 12px 0;
  transition: background .25s;
}
.period:hover { background: rgba(255,251,240,.4); }
.period span {
  font-family: var(--font-kai); font-size: 12px; letter-spacing: 2px;
  color: var(--ink-soft); padding: 0 10px; white-space: nowrap;
}
.period:hover span { color: var(--cinnabar); }

/* ---------- 事件 ---------- */
.ev {
  position: absolute; pointer-events: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  will-change: transform, opacity;
  opacity: 0; transition: opacity .4s ease;
}
.ev.on { opacity: 1; pointer-events: auto; }
.ev .stem {
  width: 1px; background: linear-gradient(180deg, rgba(38,33,25,.02), rgba(38,33,25,.38));
}
.ev.below .stem { background: linear-gradient(0deg, rgba(38,33,25,.02), rgba(38,33,25,.38)); }
.ev .dot {
  position: relative;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cd4b38, var(--cinnabar) 72%);
  box-shadow: 0 0 0 2.5px rgba(243,234,212,.95), 0 0 0 3.5px rgba(166,58,40,.35), 0 2px 5px rgba(60,20,8,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ev .dot::after { /* 隐形命中圈，扩大可点范围 */
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
}
.ev.imp3 .dot {
  width: 13px; height: 13px;
  box-shadow: 0 0 0 3px rgba(243,234,212,.95), 0 0 0 4.5px rgba(166,58,40,.5), 0 2px 6px rgba(60,20,8,.3);
}
.ev.legend-ev .dot { background: var(--paper); box-shadow: 0 0 0 1.5px var(--cinnabar), 0 0 0 4.5px rgba(243,234,212,.9), 0 2px 5px rgba(60,20,8,.18); }
/* 文华类事件：石青色，视觉上略收，突出朱砂色的军政大节点 */
.ev.cul .dot {
  width: 9px; height: 9px;
  background: radial-gradient(circle at 35% 30%, #5588ad, var(--azurite) 72%);
  box-shadow: 0 0 0 2.5px rgba(243,234,212,.95), 0 0 0 3.5px rgba(56,97,133,.32), 0 2px 5px rgba(10,30,50,.2);
}
.ev.cul.imp3 .dot {
  width: 11.5px; height: 11.5px;
  box-shadow: 0 0 0 3px rgba(243,234,212,.95), 0 0 0 4.5px rgba(56,97,133,.42), 0 2px 6px rgba(10,30,50,.25);
}
.ev.cul:hover .lbl .t { color: var(--azurite-d); }
.ev.cul .lbl .t { color: #3a3f37; }
/* 细目事件（imp0）：墨灰小点，深放大后浮现 */
.ev.imp0 .dot {
  width: 7px; height: 7px;
  background: radial-gradient(circle at 35% 30%, #8a7f6a, #6a6154 72%);
  box-shadow: 0 0 0 2px rgba(243,234,212,.9), 0 0 0 3px rgba(106,97,84,.3), 0 1px 3px rgba(30,20,8,.18);
}
.ev.imp0 .lbl .t { font-size: 12.5px; color: #4c4436; }
.ev.imp0 .lbl .y { font-size: 10px; }
.ev.imp0:hover .lbl .t { color: var(--cinnabar); }
/* 标签强制单行：高度恒定（约 40px），永远小于泳道间距 62px，
   从几何上杜绝跨泳道的文字重叠 */
.ev .lbl { text-align: center; margin: 5px 0; padding: 3px 7px; white-space: nowrap; }
.ev.below .lbl { order: 2; }
.ev.below .dot { order: 0; }
.ev.below .stem { order: 1; }
.ev .lbl .t {
  display: block; font-family: var(--font-kai); font-size: 14.5px; line-height: 1.3;
  letter-spacing: 1px; color: var(--ink); white-space: nowrap; transition: color .2s;
}
.ev.imp3 .lbl .t { font-size: 16.5px; }
.ev .lbl .y { display: block; font-size: 10px; letter-spacing: .5px; color: var(--ink-faint); margin-top: 1px; }
.ev:hover .dot { transform: scale(1.4); }
.ev:hover .lbl .t { color: var(--cinnabar); }
.ev.dotonly .lbl { opacity: 0; transition: opacity .2s; }
.ev.dotonly:hover .lbl { opacity: 1; }
.ev:hover { z-index: 5; }
/* 悬停时标签垫绢底签片：密集处与画作背景上都保持可读 */
.ev .lbl { border-radius: 9px; transition: background .2s, box-shadow .2s; }
.ev:hover .lbl {
  background: rgba(245,236,216,.94);
  box-shadow: 0 3px 12px rgba(38,28,10,.15), inset 0 0 0 1px rgba(96,80,50,.18);
}

/* ---------- 年份时间轴（卷面之下：上排朝代名，下排年份） ---------- */
#timebar {
  position: absolute; left: 0; right: 0; bottom: 62px; height: 52px; z-index: 12;
  pointer-events: none;
}
#timebar::before { /* 轴线 */
  content: ''; position: absolute; top: 24px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-soft) 5%, var(--line-soft) 95%, transparent);
}
.tb-era {
  position: absolute; top: 1px; transform: translateX(-50%);
  font-family: var(--font-kai); font-size: 11.5px; letter-spacing: 2px; color: var(--ink-soft);
  padding: 2px 8px; border-radius: 11px; white-space: nowrap;
  pointer-events: auto; cursor: pointer;
  /* 只过渡外观，绝不过渡 left —— 位置必须瞬时跟随卷轴，否则标签会滑行、错位 */
  transition: color .2s, background .2s, box-shadow .2s;
}
.tb-era:hover { color: var(--cinnabar); background: rgba(255,251,240,.6); }
.tb-era.cur { /* 当前所在朝代 */
  color: var(--cinnabar); background: rgba(255,251,240,.7);
  box-shadow: inset 0 0 0 1px rgba(166,58,40,.3);
}
.tick { position: absolute; top: 19px; transform: translateX(-50%); text-align: center; }
.tick i { display: block; width: 1px; height: 10px; background: rgba(38,33,25,.42); margin: 0 auto; }
.tick span {
  display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-soft);
  letter-spacing: .5px; font-family: var(--font-song); white-space: nowrap;
}
.tick.era-b i { height: 13px; width: 1.5px; background: rgba(166,58,40,.55); }
.tick.era-b span { color: var(--cinnabar); font-family: var(--font-kai); letter-spacing: 1px; }

/* ---------- 卷轴轴头（与开场轴辊同一设计语言：木纹 + 圆柱受光 + 鎏金轴头） ---------- */
.roller {
  position: absolute; top: -26px; bottom: -26px; width: 30px; z-index: 8;
  border-radius: 15px; pointer-events: none;
  background: var(--wood-cyl), var(--wood-tex);
  background-size: 100% 100%, 100% 100%;
  box-shadow: 0 10px 26px rgba(28,18,8,.5), inset 0 0 0 1px rgba(255,225,175,.1);
}
.roller::before, .roller::after { /* 鎏金轴头 */
  content: ''; position: absolute; left: -6px; right: -6px; height: 24px; border-radius: 9px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 28%, rgba(255,238,190,.72), transparent 62%),
    var(--cap-gilt);
  box-shadow: 0 3px 9px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,240,200,.28);
}
.roller::before { top: -12px; }
.roller::after { bottom: -12px; }

/* ---------- 朝代信息横条（卷面与时间轴之间的专属空间，零遮挡） ---------- */
#era-panel {
  position: absolute; left: 0; right: 0; bottom: calc(62px + 52px); height: 54px; z-index: 25;
  display: flex; align-items: center; gap: 14px; padding: 0 26px;
  background: linear-gradient(180deg, rgba(240,229,203,.94), rgba(233,220,190,.97));
  border-top: 1px solid rgba(96,80,50,.24);
  box-shadow: 0 -6px 18px rgba(38,28,10,.05);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
  overflow: hidden; white-space: nowrap;
}
#era-panel.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#era-panel .ep-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; opacity: .85; }
#era-panel .ep-name {
  font-family: var(--font-kai); font-size: 22px; letter-spacing: 3px;
  cursor: pointer; transition: color .2s; flex-shrink: 0;
}
#era-panel .ep-name:hover { color: var(--cinnabar); }
#era-panel .ep-years { font-size: 11.5px; color: var(--ink-soft); letter-spacing: 1px; flex-shrink: 0; }
#era-panel .ep-tag {
  font-family: var(--font-kai); font-size: 12.5px; color: var(--cinnabar);
  letter-spacing: 4px; flex-shrink: 0;
}
#era-panel .ep-flex { flex: 1; }
#era-panel .ep-more {
  font-family: var(--font-kai); font-size: 12px; letter-spacing: 2px;
  color: var(--ink); background: rgba(255,251,240,.6);
  border: 1px solid rgba(96,80,50,.35); border-radius: 16px;
  padding: 5px 15px; cursor: pointer; transition: .2s; flex-shrink: 0;
}
#era-panel .ep-more:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
#era-panel .ep-baike {
  font-size: 12px; color: var(--cinnabar); text-decoration: none; letter-spacing: 1px;
  font-family: var(--font-kai); flex-shrink: 0;
}
#era-panel .ep-baike:hover { color: var(--cinnabar-d); text-decoration: underline; }
/* 朝代统计签片（横条与概览卡共用） */
.ep-stats { display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden; }
.ep-stats span {
  font-family: var(--font-kai); font-size: 11px; letter-spacing: 1px;
  color: var(--ink-soft); background: rgba(255,251,240,.55);
  border: 1px solid rgba(96,80,50,.26); border-radius: 11px;
  padding: 2.5px 10px; white-space: nowrap;
}
#modal .m-stats { margin: 2px 0 14px; flex-wrap: wrap; }

/* ---------- 缩放控件 ---------- */
#zoomctl {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%); z-index: 25;
  display: flex; flex-direction: column; gap: 10px;
}
#zoomctl button {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(96,80,50,.4);
  background: rgba(245,236,216,.94); color: var(--ink);
  font-size: 17px; font-family: var(--font-song); cursor: pointer;
  box-shadow: 0 4px 14px rgba(38,28,10,.16); transition: .25s;
  display: flex; align-items: center; justify-content: center;
}
#zoomctl button:hover {
  border-color: var(--cinnabar); color: var(--cinnabar);
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(38,28,10,.2);
}
#zoomctl #z-reset { font-family: var(--font-kai); font-size: 11px; letter-spacing: 1px; }

/* ---------- 事件类别图例 ---------- */
#legend {
  position: absolute; top: 66px; right: 24px; z-index: 25;
  display: flex; gap: 14px; align-items: center;
  font-family: var(--font-kai); font-size: 11.5px; letter-spacing: 2px; color: var(--ink-soft);
  background: rgba(245,236,216,.82); border: 1px solid rgba(96,80,50,.22);
  padding: 6px 14px; border-radius: 18px;
  box-shadow: 0 4px 14px rgba(38,28,10,.1);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
#legend.show { opacity: 1; transform: translateY(0); }
#legend .lg-item { display: flex; align-items: center; gap: 6px; }
#legend .lg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#legend .lg-pol { background: var(--cinnabar); box-shadow: 0 0 0 1.5px rgba(166,58,40,.25); }
#legend .lg-cul { background: var(--azurite); box-shadow: 0 0 0 1.5px rgba(56,97,133,.25); }
#legend .lg-leg { background: var(--paper); box-shadow: 0 0 0 1.5px var(--cinnabar); }
#legend .lg-det { background: #6a6154; box-shadow: 0 0 0 1.5px rgba(106,97,84,.3); width: 7px; height: 7px; }

/* ---------- 导览浮条（悬于故事卡之上，一路“下一站”即可坐完全程） ---------- */
#tourbar {
  position: fixed; top: 64px; left: 50%; transform: translate(-50%, -12px); z-index: 120;
  display: flex; align-items: center; gap: 12px;
  max-width: min(92vw, 860px);
  background: linear-gradient(165deg, rgba(42,33,20,.96), rgba(28,22,13,.96));
  border: 1px solid rgba(212,176,97,.4); border-radius: 26px;
  padding: 9px 12px 9px 18px;
  box-shadow: 0 14px 44px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,240,200,.06);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
#tourbar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#tourbar .tb-icon {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, #b13a28, #832012);
  color: #f5e9d2; font-family: var(--font-kai); font-size: 15px;
  display: flex; align-items: center; justify-content: center; transform: rotate(-3deg);
}
#tourbar .tb-name { font-family: var(--font-kai); font-size: 14px; color: #ecdcba; letter-spacing: 2px; white-space: nowrap; }
#tourbar .tb-prog { font-size: 11px; color: #d4b061; letter-spacing: 1px; white-space: nowrap; }
#tourbar .tb-note {
  font-size: 12px; color: #c9bb9c; letter-spacing: .5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
#tourbar button {
  background: none; border: 1px solid rgba(212,176,97,.45); color: #dfc389;
  font-family: var(--font-kai); font-size: 12px; letter-spacing: 1px;
  padding: 5px 13px; border-radius: 16px; cursor: pointer; transition: .2s; flex-shrink: 0;
}
#tourbar button:hover:not(:disabled) { border-color: #ecdcba; color: #f5e9d2; background: rgba(240,223,186,.08); }
#tourbar button:disabled { opacity: .35; cursor: default; }
#tourbar #tour-exit { padding: 5px 10px; border-color: rgba(203,187,146,.3); }

/* 导览线路列表（复用故事卡列表样式） */
#modal .m-tourlist .tour-badge {
  min-width: 26px; width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(135deg, #b13a28, #832012);
  color: #f5e9d2 !important; font-family: var(--font-kai); font-size: 14px !important;
  display: flex; align-items: center; justify-content: center; transform: rotate(-3deg);
  align-self: center;
}
#modal .m-tourlist .elt small { color: var(--ink-faint); font-size: 11px; letter-spacing: 0; }
#modal .m-tourlist .tour-desc {
  display: block; font-family: var(--font-song); font-size: 12px;
  color: var(--ink-soft); letter-spacing: .3px; margin-top: 3px;
}
#modal .m-tourlist li { align-items: flex-start; padding: 11px 10px; }

/* ---------- 此时的世界 ---------- */
#modal .m-world:not(:empty) {
  margin-top: 22px; padding: 14px 18px;
  background: rgba(63,107,143,.07);
  border: 1px solid rgba(63,107,143,.22); border-radius: 12px;
}
#modal .mw-head {
  font-family: var(--font-kai); font-size: 12.5px; letter-spacing: 3px;
  color: var(--azurite-d); margin-bottom: 8px;
}
#modal .mw-head::before { content: '◍ '; opacity: .7; }
#modal .mw-item {
  font-size: 13px; line-height: 1.9; color: #3d4a54; text-align: justify;
}
#modal .mw-item + .mw-item { margin-top: 4px; }
#modal .mw-item .mw-y {
  font-size: 11px; color: var(--azurite); margin-right: 8px;
  font-family: var(--font-kai); letter-spacing: .5px;
}

/* ---------- 深读折叠区（Phase 0/1：默认折叠，小白完全不受打扰） ---------- */
#modal .m-deep { margin-top: 20px; }
#modal .md-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: rgba(96,80,50,.05); border: 1px solid rgba(96,80,50,.24);
  border-radius: 12px; padding: 9px 14px; cursor: pointer;
  font-family: var(--font-kai); font-size: 13px; letter-spacing: 2px; color: var(--ink-soft);
  transition: background .2s, border-color .2s, color .2s;
}
#modal .md-toggle:hover { background: rgba(96,80,50,.09); border-color: rgba(96,80,50,.4); color: var(--ink); }
#modal .md-badge {
  font-style: normal; font-size: 10px; letter-spacing: 1px;
  color: #f6ebd3; background: var(--azurite); border-radius: 8px; padding: 1.5px 7px;
}
#modal .md-caret { margin-left: auto; font-style: normal; transition: transform .25s; }
#modal .m-deep.open .md-caret { transform: rotate(180deg); }
#modal .md-body {
  display: none; padding: 14px 4px 2px;
}
#modal .m-deep.open .md-body { display: block; }
#modal .md-row { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
#modal .md-k {
  flex-shrink: 0; font-family: var(--font-kai); font-size: 11px; letter-spacing: 2px;
  color: #f6ebd3; background: var(--ink-faint); border-radius: 6px; padding: 2px 7px;
}
#modal .md-v { font-size: 13.5px; color: #3d3527; line-height: 1.9; }
#modal .md-sep { font-style: normal; margin: 0 7px; color: var(--ink-faint); }
#modal .md-dispute .md-k { background: var(--cinnabar); }
#modal .md-dispute .md-v { text-align: justify; }
/* 史料原文：竖排朱线 + 文言原文 */
#modal .md-src {
  margin: 14px 0; padding: 12px 16px;
  background: rgba(190,165,115,.10); border-left: 3px solid var(--gilt);
  border-radius: 0 10px 10px 0;
}
#modal .md-src blockquote {
  font-family: var(--font-song); font-size: 15px; line-height: 2.1;
  color: #2f2a20; letter-spacing: .5px; text-align: justify;
}
#modal .md-src cite {
  display: block; margin-top: 6px; font-style: normal; text-align: right;
  font-family: var(--font-kai); font-size: 12px; color: var(--ink-soft); letter-spacing: 1px;
}
#modal .md-tr {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(96,80,50,.22);
  font-size: 13px; line-height: 1.9; color: #4a4133; text-align: justify;
}

/* ---------- 概念释义：正文里的术语 ---------- */
.gl {
  border-bottom: 1px dotted rgba(63,107,143,.75);
  cursor: help; transition: color .18s, background .18s;
  border-radius: 2px;
}
.gl:hover, .gl:focus-visible { color: var(--azurite-d); background: rgba(63,107,143,.09); outline: none; }
#gl-tip {
  position: fixed; z-index: 200; max-width: 320px; pointer-events: none;
  background: linear-gradient(165deg, #2b3540, #1d252d);
  border: 1px solid rgba(63,107,143,.5); border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
#gl-tip.show { opacity: 1; transform: translateY(0); }
#gl-tip .gt-term {
  display: block; font-family: var(--font-kai); font-size: 13.5px; letter-spacing: 2px;
  color: #8fc0e6; margin-bottom: 5px;
}
#gl-tip .gt-def {
  display: block; font-size: 12.5px; line-height: 1.85; color: #cfd8e0; text-align: justify;
}

/* ---------- 疆域图注记 ---------- */
#map-note {
  position: absolute; left: 24px; bottom: calc(62px + 52px + 54px + 14px); z-index: 25;
  font-family: var(--font-kai); font-size: 11.5px; letter-spacing: 1.5px; color: var(--ink-soft);
  background: rgba(245,236,216,.85); border: 1px solid rgba(96,80,50,.22);
  padding: 7px 14px; border-radius: 20px; pointer-events: none;
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
  box-shadow: 0 4px 14px rgba(38,28,10,.1);
}
#map-note.show { opacity: 1; transform: translateY(0); }
#map-note .mn-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin: 0 4px 0 6px; vertical-align: baseline; opacity: .85;
}

/* ---------- 操作提示 ---------- */
#hint {
  position: absolute; right: 24px; bottom: calc(62px + 52px + 54px + 14px); z-index: 25;
  font-family: var(--font-kai); font-size: 12px; letter-spacing: 3px; color: var(--ink-soft);
  background: rgba(245,236,216,.85); border: 1px solid rgba(96,80,50,.22);
  padding: 8px 16px; border-radius: 22px;
  transition: opacity 1s; pointer-events: none;
  box-shadow: 0 4px 14px rgba(38,28,10,.1);
}
#hint.fade { opacity: 0; }

/* ---------- 缩略卷（minimap） ---------- */
#minimap {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 30;
  height: 62px; width: min(640px, 62vw);
  display: flex; align-items: center;
}
#mm-track {
  position: relative; width: 100%; height: 24px; border-radius: 12px; overflow: hidden;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06);
  cursor: pointer;
  background: #2c3237;
  filter: saturate(.82); /* 与极简卷面协调 */
}
.mm-seg { position: absolute; top: 0; bottom: 0; opacity: .82; cursor: pointer; transition: opacity .2s, filter .2s; }
.mm-seg:hover { opacity: 1; filter: brightness(1.18); }
.mm-seg span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; color: rgba(255,251,240,.9); font-family: var(--font-kai);
  letter-spacing: 1px; overflow: hidden; white-space: nowrap;
}
#mm-view {
  position: absolute; top: -3px; bottom: -3px; z-index: 2; pointer-events: none;
  border: 1.5px solid #ecd9a5; border-radius: 8px;
  box-shadow: 0 0 10px rgba(236,217,165,.55), inset 0 0 12px rgba(236,217,165,.2);
}

/* ---------- 事件故事卡 ---------- */
#modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,21,14,.46); backdrop-filter: blur(9px) saturate(.85);
  opacity: 0; pointer-events: none; transition: opacity .32s ease;
}
#modal.open { opacity: 1; pointer-events: auto; }
#modal .card {
  position: relative; width: 590px; max-width: calc(100vw - 40px); max-height: 84vh;
  overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(ellipse 120% 100% at 50% 0%, rgba(255,251,240,.6), rgba(0,0,0,0) 50%),
    linear-gradient(165deg, #f6efdb, #e9ddc0);
  border: 1px solid rgba(96,80,50,.38);
  border-radius: var(--r-lg);
  box-shadow: 0 28px 80px rgba(18,12,4,.55), inset 0 0 64px rgba(190,165,115,.16);
  padding: 42px 46px 32px;
  transform: translateY(18px) scale(.98); transition: transform .32s ease;
}
#modal.open .card { transform: translateY(0) scale(1); }
#modal .card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: repeating-linear-gradient(0deg, rgba(120,100,60,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
#modal .m-img {
  margin: -42px -46px 24px; height: 195px;
  background-size: cover; background-position: center;
  border-bottom: 1px solid rgba(96,80,50,.28);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: none;
}
#modal .m-img.has { display: block; }
#modal .m-era {
  font-family: var(--font-kai); font-size: 12px; letter-spacing: 3px; color: var(--ink-soft);
}
#modal .m-year {
  font-size: 12.5px; color: var(--cinnabar); letter-spacing: 1px; margin-left: 10px;
}
#modal h2 {
  font-family: var(--font-kai); font-weight: 400; font-size: 31px; letter-spacing: 3px;
  margin: 10px 0 4px; color: var(--ink); line-height: 1.35;
}
#modal .m-legend {
  display: inline-block; vertical-align: middle; margin-left: 10px;
  font-size: 11px; color: var(--cinnabar); border: 1px solid rgba(166,58,40,.45);
  border-radius: 4px; padding: 1.5px 7px; letter-spacing: 2px;
}
#modal .m-rule {
  width: 48px; height: 2.5px; border-radius: 2px; background: var(--cinnabar); opacity: .75;
  margin: 16px 0 18px;
}
#modal .m-story {
  font-size: 15px; line-height: 2.15; color: #3d3527; text-align: justify;
  user-select: text;
}
#modal .m-story p { margin-bottom: 12px; }
#modal .m-story p:last-child { margin-bottom: 0; }
#modal .m-story .xref { /* 事件间跳转链接 */
  color: var(--cinnabar); cursor: pointer;
  border-bottom: 1px dotted rgba(166,58,40,.55);
  transition: .2s;
}
#modal .m-story .xref:hover { color: var(--cinnabar-d); border-bottom-style: solid; background: rgba(166,58,40,.06); }
#modal .m-evnote {
  margin-top: 10px; font-size: 11.5px; color: var(--ink-faint);
  font-family: var(--font-kai); letter-spacing: 1px;
}
#modal .m-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(96,80,50,.18);
}
#modal .m-baike {
  display: inline-block; text-decoration: none;
  font-family: var(--font-kai); font-size: 13.5px; letter-spacing: 2px;
  color: #f6ebd3; background: linear-gradient(135deg, #ad3826, #841f10);
  padding: 10px 22px; border-radius: 24px;
  box-shadow: 0 4px 14px rgba(132,31,16,.35), inset 0 0 0 1px rgba(246,235,211,.18);
  transition: .25s;
}
#modal .m-baike:hover { transform: translateY(-1.5px); box-shadow: 0 7px 18px rgba(132,31,16,.45), inset 0 0 0 1px rgba(246,235,211,.28); }
#modal .m-src { font-size: 10.5px; color: var(--ink-faint); }
#modal .m-close {
  position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 50%;
  border: none; background: none; color: var(--ink-soft); font-size: 22px; cursor: pointer;
  transition: .25s; display: flex; align-items: center; justify-content: center;
}
#modal .m-close:hover { color: var(--cinnabar); background: rgba(166,58,40,.08); transform: rotate(90deg); }
#modal .m-stamp {
  position: absolute; top: 36px; right: 42px; width: 48px; height: 48px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,238,214,.2), transparent 44%),
    radial-gradient(circle at 72% 80%, rgba(58,4,0,.34), transparent 50%),
    linear-gradient(135deg, #b13a28, #832012);
  border-radius: 8px; transform: rotate(3deg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-kai); font-size: 25px; color: #f3e5c9;
  box-shadow: inset 0 0 7px rgba(0,0,0,.42), inset 0 0 0 1.5px rgba(243,229,201,.3), 0 3px 10px rgba(132,31,16,.3);
  opacity: .93;
  filter: url(#seal-rough);
}
#modal .m-about-list { margin-top: 8px; font-size: 12.5px; line-height: 2; color: #4a4133; }
#modal .m-about-list li { margin-left: 18px; }

/* 朝代概览卡：题签 + 大事记列表 */
#modal .m-tagline {
  display: block; font-family: var(--font-kai); color: var(--cinnabar);
  letter-spacing: 5px; font-size: 13px; margin-bottom: 10px;
}
#modal .m-evhead {
  font-family: var(--font-kai); font-size: 12.5px; letter-spacing: 3px; color: var(--ink-soft);
  margin: 24px 0 6px; padding-top: 16px; border-top: 1px solid rgba(96,80,50,.16);
}
#modal .m-evlist { list-style: none; }
#modal .m-evlist li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 7px 10px; border-radius: 9px; cursor: pointer;
  border-bottom: 1px dashed rgba(96,80,50,.14); transition: background .2s;
}
#modal .m-evlist li:last-child { border-bottom: none; }
#modal .m-evlist li:hover { background: rgba(166,58,40,.06); }
#modal .m-evlist .ely {
  font-size: 11px; color: var(--cinnabar); min-width: 92px; flex-shrink: 0;
  letter-spacing: .5px;
}
#modal .m-evlist .elt {
  font-family: var(--font-kai); font-size: 14.5px; color: var(--ink);
  letter-spacing: 1px; transition: color .2s;
}
#modal .m-evlist li:hover .elt { color: var(--cinnabar); }

/* ---------- 开场：绢帛自双轴间展开 ---------- */
#opening {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(ellipse 100% 80% at 50% 45%, rgba(60,45,25,.28), rgba(20,14,6,.55) 78%),
    linear-gradient(180deg, #2b2318, #3a2f1f 50%, #241c11);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity 1s ease;
}
#opening.done { opacity: 0; pointer-events: none; }

/* 展开的绢帛：宽度动画，内容固定尺寸从中露出（不拉伸） */
#opening .o-sheet {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 236px; height: 64vh; overflow: hidden;
  border-radius: 3px;
  background: linear-gradient(180deg, #dccfae, #ece0c4 14%, #ece0c4 86%, #d5c7a2);
  box-shadow:
    0 22px 70px rgba(0,0,0,.5),
    inset 0 0 90px rgba(190,165,115,.25),
    inset 0 2px 0 rgba(255,250,238,.5), inset 0 -2px 0 rgba(120,95,55,.35);
  transition: width 1.9s cubic-bezier(.66,.02,.3,1);
}
#opening.unroll .o-sheet { width: min(88vw, 1560px); }
/* 卷帛两端的曲面阴影（贴着轴辊的弧光） */
#opening .o-sheet::before, #opening .o-sheet::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 54px; z-index: 2;
}
#opening .o-sheet::before {
  left: 0;
  background: linear-gradient(90deg, rgba(60,42,18,.42), rgba(60,42,18,.12) 40%, transparent 75%, rgba(255,250,238,.22) 92%, transparent);
}
#opening .o-sheet::after {
  right: 0;
  background: linear-gradient(270deg, rgba(60,42,18,.42), rgba(60,42,18,.12) 40%, transparent 75%, rgba(255,250,238,.22) 92%, transparent);
}
/* 帛面内容：固定宽度，居中，随帛面展开而“显影” */
#opening .o-sheet-in {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(88vw, 1560px); height: 100%;
  display: flex; align-items: center; justify-content: center;
  background-image:
    repeating-linear-gradient(0deg, rgba(120,100,60,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,60,.035) 0 1px, transparent 1px 4px),
    linear-gradient(0deg, rgba(176,144,79,.35), rgba(176,144,79,.35)),
    linear-gradient(0deg, rgba(176,144,79,.35), rgba(176,144,79,.35));
  background-size: auto, auto, 100% 1px, 100% 1px;
  background-position: 0 0, 0 0, 0 12px, 0 calc(100% - 12px);
  background-repeat: repeat, repeat, no-repeat, no-repeat;
}
#opening .o-water {
  font-family: var(--font-kai); font-size: clamp(90px, 15vw, 190px);
  letter-spacing: .35em; color: rgba(96,80,50,.09); white-space: nowrap;
  text-indent: .35em; user-select: none;
}
/* 展开时一道柔光随帛面扫过 */
#opening .o-sheet-in::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -30%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,250,232,.20) 50%, transparent);
  transform: skewX(-8deg);
  transition: left 2s cubic-bezier(.6,.05,.35,1) .15s;
}
#opening.unroll .o-sheet-in::after { left: 105%; }
/* 轴辊：与卷内轴头完全一致的木纹 + 圆柱受光 + 鎏金轴头 */
#opening .o-roller {
  position: absolute; top: 50%; width: 34px; height: calc(64vh + 56px);
  transform: translateY(-50%);
  border-radius: 17px; z-index: 3;
  background: var(--wood-cyl), var(--wood-tex);
  background-size: 100% 100%, 100% 100%;
  box-shadow: 0 14px 36px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,225,175,.1);
  transition: left 1.9s cubic-bezier(.66,.02,.3,1), right 1.9s cubic-bezier(.66,.02,.3,1);
}
#opening .o-left  { left: calc(50% - 118px - 34px); }
#opening .o-right { right: calc(50% - 118px - 34px); }
#opening.unroll .o-left  { left: calc(50% - min(44vw, 780px) - 30px); }
#opening.unroll .o-right { right: calc(50% - min(44vw, 780px) - 30px); }
/* 鎏金轴头 */
#opening .o-cap {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 46px; height: 26px; border-radius: 10px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 28%, rgba(255,238,190,.75), transparent 62%),
    var(--cap-gilt);
  box-shadow: 0 4px 12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,240,200,.28);
}
#opening .o-cap-t { top: -14px; }
#opening .o-cap-b { bottom: -14px; }
#opening .o-cap::after { /* 轴头端珠 */
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 14px; height: 8px; border-radius: 7px;
  background: linear-gradient(90deg, #6b511c, #d4b061 50%, #6b511c);
}
#opening .o-cap-t::after { top: -7px; }
#opening .o-cap-b::after { bottom: -7px; }

#opening .o-title { position: relative; z-index: 5; text-align: center; transition: opacity .8s ease .35s; }
#opening.unroll .o-title { opacity: 0; }
#opening .o-tiqian {
  writing-mode: vertical-rl; margin: 0 auto;
  font-family: var(--font-kai); font-size: 42px; letter-spacing: 16px; color: var(--ink);
  border: 1.5px solid rgba(96,80,50,.5); border-radius: 8px; padding: 26px 14px;
  background: linear-gradient(165deg, #f6eeda, #eadfc2);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 0 30px rgba(190,165,115,.2);
}
#opening .o-sub {
  margin-top: 22px; font-family: var(--font-kai); font-size: 13px;
  letter-spacing: 6px; color: #d8cbb0;
}
#opening .o-go {
  margin-top: 15px; font-size: 11px; letter-spacing: 4px; color: rgba(216,203,176,.75);
  animation: o-breathe 2.2s ease-in-out infinite;
}
@keyframes o-breathe { 0%,100% { opacity: .35; } 50% { opacity: .95; } }

/* ---------- 无障碍与动效偏好 ---------- */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--cinnabar); outline-offset: 2px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  #opening .o-sheet, #opening .o-roller, #opening .o-sheet-in::after { transition: none; }
  .bg-slot, #geo-map, .ev, #era-panel, #legend, #map-note { transition-duration: .01s; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 820px) {
  .brand h1 { font-size: 16px; letter-spacing: 4px; }
  .brand .sub { display: none; }
  #breadcrumb { display: none; }
  #search { width: 100px; }
  #search:focus { width: 150px; }
  #search-results { width: 250px; }
  #tourbar { top: 58px; gap: 8px; padding: 7px 10px 7px 12px; }
  #tourbar .tb-note { display: none; }
  #era-panel { height: 46px; padding: 0 14px; gap: 9px; }
  #era-panel .ep-tag, #era-panel .ep-stats, #era-panel .ep-baike { display: none; }
  #era-panel .ep-name { font-size: 18px; }
  #zoomctl { right: 12px; }
  #zoomctl button { width: 35px; height: 35px; }
  #minimap { width: calc(100vw - 32px); }
  #modal .card { padding: 32px 26px 24px; }
  #modal .m-img { margin: -32px -26px 20px; }
  #modal .m-stamp { right: 24px; }
  #hint { display: none; }
  #legend { top: 60px; right: 12px; padding: 5px 10px; gap: 9px; font-size: 10.5px; }
  #scroll-area { top: calc(54px + 3vh); bottom: calc(62px + 52px + 46px + 1vh); }
}