/* ============================================================
   华夏长卷 · 第二屏「庭」与分馆（S0 骨架 + S1 列传）
   垂直双屏：卷面(#stage)上推淡出，庭院(#halls)自下浮入。
   视觉延续绢帛水墨体系（令牌见 main.css :root）。
   ============================================================ */

/* ---------- 双屏转场 ---------- */
#halls {
  position: fixed; inset: 0; z-index: 70;
  transform: translateY(103%);
  transition: transform .78s cubic-bezier(.66,.02,.28,1);
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255,251,240,.55), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #cdbc96, var(--silk) 14%, var(--silk) 86%, var(--silk-lo));
  visibility: hidden;
}
body.halls-open #halls { transform: translateY(0); visibility: visible; }
/* 转场进行中也需可见（visibility 延迟切换） */
#halls.animating { visibility: visible; }
/* 绢丝经纬，同卷面 */
#halls::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  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;
}
#stage { transition: transform .78s cubic-bezier(.66,.02,.28,1), opacity .78s ease; }
body.halls-open #stage { transform: translateY(-11%); opacity: .28; }
body.halls-open #tourbar { display: none; }

/* ---------- 顶栏：回卷 + 印章导航（仅馆内出现） ---------- */
#h-top {
  position: relative; z-index: 5; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px 8px;
}
.h-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.h-seal-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  background: var(--cinnabar); color: #f5e9d2;
  font-family: var(--font-kai); font-size: 17px;
  filter: url(#seal-rough); box-shadow: 0 2px 8px rgba(126,36,23,.35);
}
.h-bname { font-family: var(--font-kai); font-size: 15px; letter-spacing: 4px; color: var(--ink-soft); }
.h-brand:hover .h-bname { color: var(--ink); }
#h-seals { display: flex; gap: 8px; }
.h-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px; cursor: pointer;
  font-family: var(--font-kai); font-size: 16px;
  color: var(--ink-soft); border: 1px solid rgba(38,33,25,.22);
  background: rgba(255,251,240,.35);
  transition: color .2s, background .2s, border-color .2s;
}
.h-seal:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.h-seal.active {
  background: var(--cinnabar); border-color: var(--cinnabar-d);
  color: #f5e9d2; filter: url(#seal-rough);
}
.h-seal.dim { opacity: .38; cursor: default; }
.h-seal.dim:hover { border-color: rgba(38,33,25,.22); color: var(--ink-soft); }

/* ---------- 视图容器 ---------- */
#h-views { position: relative; z-index: 4; flex: 1 1 auto; overflow: hidden; }
.h-view {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  display: none; padding: 6px 26px 60px;
  scrollbar-width: thin; scrollbar-color: rgba(97,85,63,.4) transparent;
}
.h-view.active { display: block; animation: hv-in .45s ease both; }
@keyframes hv-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.h-inner { max-width: 1060px; margin: 0 auto; }

/* 区块标题（楷体 + 泥金短线） */
.h-sec { margin: 34px 0 14px; display: flex; align-items: baseline; gap: 12px; }
.h-sec h3 {
  font-family: var(--font-kai); font-weight: normal; font-size: 20px;
  letter-spacing: 5px; color: var(--ink);
}
.h-sec .h-sub { font-size: 12px; color: var(--ink-faint); letter-spacing: 1px; }
.h-sec::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--gilt-soft); align-self: center; }

/* ---------- 庭：挂轴缩影返回条 ---------- */
#t-return {
  margin: 10px auto 0; max-width: 1060px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: var(--r-lg);
  background: rgba(255,251,240,.42); border: 1px solid rgba(38,33,25,.14);
  box-shadow: var(--shadow-soft);
  transition: background .25s, border-color .25s;
}
#t-return:hover { background: rgba(255,251,240,.62); border-color: var(--gilt-soft); }
.tr-label { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
.tr-label b { font-family: var(--font-kai); font-weight: normal; font-size: 15px; letter-spacing: 3px; color: var(--ink); }
.tr-label span { font-size: 11px; color: var(--ink-faint); letter-spacing: 1px; }
.tr-strip { flex: 1 1 auto; height: 26px; display: flex; border-radius: 5px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(38,33,25,.18); }
.tr-seg { height: 100%; opacity: .82; }
.tr-roll { flex: 0 0 10px; height: 38px; border-radius: 5px; background: var(--wood-tex); background-size: cover; position: relative; }
.tr-roll::after { content: ''; position: absolute; inset: 0; border-radius: 5px; background: var(--wood-cyl); }
.tr-up { flex: 0 0 auto; font-size: 15px; color: var(--cinnabar); font-family: var(--font-kai); letter-spacing: 2px; }

/* ---------- 庭：四馆大门 ---------- */
.t-doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.t-door {
  position: relative; border-radius: var(--r-lg); padding: 22px 18px 18px;
  background: linear-gradient(180deg, rgba(255,251,240,.5), rgba(245,236,216,.28));
  border: 1px solid rgba(38,33,25,.16);
  cursor: pointer; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.t-door:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--gilt-soft); }
.t-door.dim { cursor: default; opacity: .62; }
.t-door.dim:hover { transform: none; box-shadow: none; border-color: rgba(38,33,25,.16); }
.td-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; margin-bottom: 12px;
  font-family: var(--font-kai); font-size: 24px; color: #f5e9d2;
  filter: url(#seal-rough); box-shadow: 0 3px 10px rgba(38,28,10,.25);
}
.td-name { font-family: var(--font-kai); font-size: 19px; letter-spacing: 3px; color: var(--ink); margin-bottom: 6px; }
.td-desc { font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.td-tag {
  position: absolute; top: 14px; right: 14px; font-size: 10.5px; letter-spacing: 2px;
  color: var(--ink-faint); border: 1px solid rgba(38,33,25,.2); border-radius: 4px; padding: 2px 7px;
}
.td-count { position: absolute; top: 14px; right: 14px; font-size: 11px; letter-spacing: 1px; color: var(--cinnabar); font-family: var(--font-kai); }

/* ---------- 庭：今日条 ---------- */
.t-daily { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.td-card {
  border-radius: var(--r-lg); padding: 18px 20px;
  background: rgba(255,251,240,.42); border: 1px solid rgba(38,33,25,.14);
}
.td-k { font-size: 11px; letter-spacing: 3px; color: var(--ink-faint); margin-bottom: 10px; }
.td-k b { color: var(--cinnabar); font-weight: normal; }
.td-q { font-family: var(--font-kai); font-size: 18px; line-height: 1.9; color: var(--ink); }
.td-from { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.td-open {
  display: inline-block; margin-top: 10px; font-size: 12.5px; letter-spacing: 1px;
  color: var(--azurite); cursor: pointer; border-bottom: 1px dashed rgba(63,107,143,.5);
}
.td-open:hover { color: var(--azurite-d); }
.td-ev-t { font-family: var(--font-kai); font-size: 20px; letter-spacing: 2px; color: var(--ink); margin: 2px 0 6px; }
.td-ev-m { font-size: 12px; color: var(--ink-soft); }
.td-ev-s { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 庭：导览精选 ---------- */
.t-tours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tt-card {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border-radius: var(--r-lg); padding: 16px 18px;
  background: rgba(255,251,240,.42); border: 1px solid rgba(38,33,25,.14);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--gilt-soft); }
.tt-icon {
  flex: 0 0 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--azurite); color: #f0e6cf;
  font-family: var(--font-kai); font-size: 17px; filter: url(#seal-rough);
}
.tt-name { font-family: var(--font-kai); font-size: 16px; letter-spacing: 2px; color: var(--ink); }
.tt-name small { font-size: 11px; color: var(--ink-faint); letter-spacing: 0; margin-left: 6px; }
.tt-desc { margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--ink-soft); }
.t-alltours { margin-top: 12px; text-align: right; }
.t-alltours span { font-size: 12.5px; color: var(--azurite); cursor: pointer; letter-spacing: 1px; border-bottom: 1px dashed rgba(63,107,143,.5); }
.t-alltours span:hover { color: var(--azurite-d); }

/* ---------- 庭：小工具（同龄 / 共此世） ---------- */
.t-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tool-card {
  border-radius: var(--r-lg); padding: 18px 20px;
  background: rgba(255,251,240,.42); border: 1px solid rgba(38,33,25,.14);
}
.tool-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tool-row input[type=number] {
  width: 90px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid rgba(38,33,25,.28); background: rgba(255,251,240,.75);
  font-family: var(--font-song); font-size: 14px; color: var(--ink); outline: none;
}
.tool-row input[type=number]:focus { border-color: var(--azurite); }
.tool-row label { font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.tool-row button {
  padding: 7px 16px; border-radius: 8px; border: 1px solid var(--cinnabar);
  background: var(--cinnabar); color: #f5e9d2; cursor: pointer;
  font-family: var(--font-kai); font-size: 13.5px; letter-spacing: 2px;
}
.tool-row button:hover { background: var(--cinnabar-d); }
.tool-res { margin-top: 12px; font-size: 13px; line-height: 2; color: var(--ink); }
.tool-res .tr-item { cursor: pointer; display: block; }
.tool-res .tr-item:hover .tr-name { color: var(--cinnabar); }
.tool-res .tr-name { font-family: var(--font-kai); color: var(--azurite-d); letter-spacing: 1px; }
.tool-res .tr-none { color: var(--ink-faint); }

/* ---------- 庭：站尾 ---------- */
#t-colophon {
  margin-top: 46px; padding: 26px 0 10px; text-align: center;
  border-top: 1px solid rgba(38,33,25,.16);
}
#t-colophon .tc-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 9px; margin-bottom: 12px;
  background: var(--cinnabar); color: #f5e9d2; font-family: var(--font-kai); font-size: 20px;
  filter: url(#seal-rough);
}
#t-colophon p { font-size: 12px; line-height: 2.1; color: var(--ink-faint); letter-spacing: .5px; }
#t-colophon .tc-strong { color: var(--ink-soft); }
#t-colophon .tc-about { color: var(--azurite); cursor: pointer; border-bottom: 1px dashed rgba(63,107,143,.5); }
#t-colophon .tc-about:hover { color: var(--azurite-d); }

/* ---------- 关于页 ---------- */
.ab-body p { font-size: 13.5px; line-height: 2.1; }
.ab-body b { color: var(--ink); font-weight: normal; border-bottom: 1px solid var(--gilt-soft); }
.ab-credits { margin: 6px 0 14px; padding-left: 18px; }
.ab-credits li { font-size: 12.5px; line-height: 2; color: var(--ink-soft); }
.ab-credits li b { font-family: var(--font-kai); color: var(--ink); border: 0; margin-right: 4px; }
.ab-lnk { color: var(--azurite); text-decoration: none; border-bottom: 1px dashed rgba(63,107,143,.5); }
.ab-lnk:hover { color: var(--azurite-d); }

/* ---------- 列传：馆首与筛选 ---------- */
.z-head { margin: 18px 0 6px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.z-head h2 { font-family: var(--font-kai); font-weight: normal; font-size: 30px; letter-spacing: 8px; color: var(--ink); }
.z-head .z-sub { font-size: 12.5px; color: var(--ink-faint); letter-spacing: 1px; }
.z-filters { margin: 16px 0 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.zf-chip {
  padding: 5px 14px; border-radius: 999px; cursor: pointer; font-size: 13px;
  color: var(--ink-soft); border: 1px solid rgba(38,33,25,.22); background: rgba(255,251,240,.35);
  letter-spacing: 2px; transition: color .2s, background .2s, border-color .2s;
}
.zf-chip:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.zf-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- 列传：按朝代分组 + 人物签片网格 ---------- */
.z-grid { display: block; }
.z-eragroup { margin-bottom: 8px; }
.z-erahead {
  display: flex; align-items: baseline; gap: 12px;
  margin: 26px 0 13px; padding-bottom: 7px;
  border-bottom: 1px solid rgba(38,33,25,.14);
}
.z-erahead::before {
  content: ''; align-self: center; width: 4px; height: 17px; border-radius: 2px;
  background: var(--cinnabar);
}
.z-erahead .ze-name { font-family: var(--font-kai); font-size: 19px; letter-spacing: 5px; color: var(--ink); }
.z-erahead .ze-meta { font-size: 12px; color: var(--ink-faint); letter-spacing: 1px; }
.z-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.z-card {
  position: relative; cursor: pointer; border-radius: var(--r-md); padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(255,251,240,.52), rgba(245,236,216,.3));
  border: 1px solid rgba(38,33,25,.15); border-left: 4px solid var(--zc, var(--ink-faint));
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.z-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--gilt-soft); border-left-color: var(--zc, var(--ink-faint)); }
.zc-name { font-family: var(--font-kai); font-size: 21px; letter-spacing: 3px; color: var(--ink); }
.zc-name small { font-size: 11px; color: var(--ink-faint); letter-spacing: 0; margin-left: 7px; }
.zc-years { margin-top: 3px; font-size: 11.5px; color: var(--ink-soft); }
.zc-tag { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.zc-cat {
  position: absolute; top: 13px; right: 13px; font-size: 10.5px; letter-spacing: 2px;
  color: #f5e9d2; background: var(--zc, var(--ink-faint)); border-radius: 4px; padding: 2px 7px; opacity: .9;
}
.z-empty { padding: 60px 0; text-align: center; color: var(--ink-faint); font-size: 14px; letter-spacing: 2px; }

/* ---------- 人物页 ---------- */
.p-back { margin: 14px 0 4px; font-size: 13px; color: var(--azurite); cursor: pointer; letter-spacing: 1px; display: inline-block; }
.p-back:hover { color: var(--azurite-d); }
.p-head { margin: 10px 0 4px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.p-head h2 { font-family: var(--font-kai); font-weight: normal; font-size: 34px; letter-spacing: 6px; color: var(--ink); }
.p-zi { font-size: 13px; color: var(--ink-soft); }
.p-meta { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.p-chip {
  font-size: 11.5px; letter-spacing: 1.5px; border-radius: 4px; padding: 2px 9px;
  color: #f5e9d2; background: var(--pc, var(--ink-faint));
}
.p-chip.era { background: transparent; color: var(--ink-soft); border: 1px solid rgba(38,33,25,.25); }
.p-years { font-size: 13px; color: var(--ink-soft); }
.p-tagline { margin-top: 10px; font-family: var(--font-kai); font-size: 16px; letter-spacing: 2px; color: var(--cinnabar-d); }

/* 迷你生平卷：一生铺成一条小卷 */
.p-life {
  position: relative; margin: 26px 0 8px; height: 168px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,251,240,.45), rgba(245,236,216,.25));
  border: 1px solid rgba(38,33,25,.15); overflow: hidden;
}
.pl-axis { position: absolute; left: 3.5%; right: 3.5%; top: 50%; height: 1px; background: rgba(38,33,25,.35); }
.pl-axis::before, .pl-axis::after {
  content: ''; position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--silk); border: 1px solid rgba(38,33,25,.4);
}
.pl-axis::before { left: -4px; } .pl-axis::after { right: -4px; }
.pl-cap { position: absolute; top: 50%; font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.pl-cap.b { left: 3.5%; transform: translate(-2px, 14px); }
.pl-cap.d { right: 3.5%; transform: translate(2px, 14px); text-align: right; }
.pl-dot {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--ink-soft);
  border: 1.5px solid rgba(245,236,216,.9); box-shadow: 0 0 0 1px rgba(38,33,25,.3); z-index: 3;
}
.pl-item { position: absolute; z-index: 2; transform: translateX(-50%); text-align: center; cursor: default; }
.pl-item.up   { bottom: calc(50% + 12px); }   /* 泳道位由 layoutLife 内联覆写 */
.pl-item.down { top: calc(50% + 12px); }
.pl-item.pl-hidden { display: none; }
.pl-item .pl-t { font-family: var(--font-kai); font-size: 12.5px; letter-spacing: 1px; color: var(--ink); white-space: nowrap; }
.pl-item .pl-y { font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; }
.pl-item.up .pl-stem, .pl-item.down .pl-stem { position: absolute; left: 50%; width: 1px; height: 10px; background: rgba(38,33,25,.3); }
.pl-item.up .pl-stem { bottom: -11px; } .pl-item.down .pl-stem { top: -11px; }
.pl-item.link { cursor: pointer; }
.pl-item.link .pl-t { color: var(--cinnabar-d); border-bottom: 1px dashed rgba(166,58,40,.45); }
.pl-item.link:hover .pl-t { color: var(--cinnabar); }
.p-life .pl-dot.link { background: var(--cinnabar); }
.p-life-note { font-size: 11px; color: var(--ink-faint); letter-spacing: 1px; margin-bottom: 4px; }

/* 小传正文（复用词条虚线样式：.gl 由 main.css 提供） */
.p-bio { max-width: 760px; }
.p-bio p { margin: 0 0 14px; font-size: 15px; line-height: 2.05; color: var(--ink); text-align: justify; }

/* 名句 */
.p-quote {
  max-width: 760px; margin: 6px 0 0; padding: 14px 20px; border-left: 3px solid var(--gilt-soft);
  background: rgba(255,251,240,.4); border-radius: 0 var(--r-md) var(--r-md) 0;
}
.p-quote .q { font-family: var(--font-kai); font-size: 17px; line-height: 1.95; color: var(--ink); }
.p-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 12px; color: var(--ink-faint); }
.p-quote cite::before { content: '—— '; }

/* 关系与相关 */
.p-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.p-rel {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  border: 1px solid rgba(38,33,25,.2); border-radius: 999px; padding: 4px 13px 4px 5px;
  color: var(--ink-soft); background: rgba(255,251,240,.35);
}
.p-rel .rk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 11px;
  background: var(--ink-soft); color: var(--paper); font-family: var(--font-kai);
}
.p-rel.link { cursor: pointer; }
.p-rel.link:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.p-rel.link:hover .rk { background: var(--cinnabar); }
.p-evt {
  display: inline-flex; align-items: baseline; gap: 7px; cursor: pointer; font-size: 13px;
  border: 1px solid rgba(63,107,143,.35); border-radius: 999px; padding: 5px 14px;
  color: var(--azurite-d); background: rgba(255,251,240,.35);
}
.p-evt:hover { border-color: var(--azurite); color: var(--azurite); box-shadow: 0 2px 10px rgba(44,81,111,.15); }
.p-evt .ey { font-size: 11px; color: var(--ink-faint); }

/* ---------- 文苑：篇目网格 ---------- */
.w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 14px; }
.w-card {
  position: relative; cursor: pointer; border-radius: var(--r-md); padding: 15px 16px 13px;
  background: linear-gradient(180deg, rgba(255,251,240,.52), rgba(245,236,216,.3));
  border: 1px solid rgba(38,33,25,.15); border-left: 4px solid var(--zc, var(--ink-faint));
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.w-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--gilt-soft); border-left-color: var(--zc); }
.wc-t { font-family: var(--font-kai); font-size: 18px; letter-spacing: 2px; color: var(--ink); padding-right: 40px; }
.wc-au { margin-top: 3px; font-size: 11.5px; color: var(--ink-soft); }
.wc-fam { margin-top: 8px; font-family: var(--font-kai); font-size: 13px; color: var(--ink-soft); letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 飞花令 ---------- */
.fh-card {
  margin: 0 0 20px; border-radius: var(--r-lg); padding: 14px 18px;
  background: rgba(255,251,240,.42); border: 1px solid rgba(38,33,25,.14);
}
.fh-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fh-k { font-family: var(--font-kai); font-size: 16px; letter-spacing: 3px; color: var(--cinnabar-d); }
.fh-row input {
  width: 52px; padding: 6px 0; text-align: center; border-radius: 8px;
  border: 1px solid rgba(38,33,25,.28); background: rgba(255,251,240,.75);
  font-family: var(--font-kai); font-size: 18px; color: var(--ink); outline: none;
}
.fh-row input:focus { border-color: var(--cinnabar); }
.fh-row button {
  padding: 6px 15px; border-radius: 8px; border: 1px solid var(--cinnabar);
  background: var(--cinnabar); color: #f5e9d2; cursor: pointer;
  font-family: var(--font-kai); font-size: 13px; letter-spacing: 2px;
}
.fh-row button:hover { background: var(--cinnabar-d); }
.fh-hint { font-size: 11.5px; color: var(--ink-faint); }
#fh-res { margin-top: 4px; }
#fh-res:not(:empty) { margin-top: 12px; }
.fh-item { display: block; padding: 3px 0; font-family: var(--font-kai); font-size: 14.5px; color: var(--ink); cursor: pointer; letter-spacing: 1px; }
.fh-item b { color: var(--cinnabar); font-weight: normal; }
.fh-item i { font-style: normal; font-size: 11.5px; color: var(--ink-faint); margin-left: 8px; }
.fh-item:hover { color: var(--cinnabar-d); }

/* ---------- 阅读页：竖排原文 ｜ 白话 左右同屏对照 ---------- */
.w-meta { margin-top: 10px; }
.w-stage {
  display: flex; gap: 20px; align-items: stretch; margin: 16px 0 12px;
  --wh: min(64vh, 560px);
}
.w-read {
  flex: 0 1 auto; max-width: 58%; padding: 28px 30px;
  writing-mode: vertical-rl; height: var(--wh); min-height: 340px;
  overflow-x: auto; overflow-y: hidden;
  border-radius: var(--r-lg); border: 1px solid rgba(38,33,25,.18);
  background:
    repeating-linear-gradient(0deg,  rgba(120,100,60,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,100,60,.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #f6efdc, var(--paper) 30%, var(--paper) 70%, #ece1c6);
  box-shadow: inset 0 0 46px rgba(120,95,50,.12), var(--shadow-soft);
  scrollbar-width: thin; scrollbar-color: rgba(97,85,63,.4) transparent;
}
.w-title { margin-left: 24px; }
.w-title h2 {
  font-family: var(--font-kai); font-weight: normal; font-size: 26px;
  letter-spacing: 10px; color: var(--ink);
}
.w-title .w-au { display: block; margin-top: 14px; font-size: 13px; letter-spacing: 6px; color: var(--ink-soft); }
.w-ln {
  margin: 0; margin-block-end: 15px;
  font-family: var(--font-kai); font-size: 20px; line-height: 1.5;
  letter-spacing: 3px; color: var(--ink);
}
.w-ln.w-fam {
  color: var(--cinnabar-d);
  -webkit-text-emphasis: filled circle rgba(166,58,40,.55);
  text-emphasis: filled circle rgba(166,58,40,.55);
}
/* 白话栏：与原文等高、独立纵向滚动，对照阅读 */
.w-plain-col {
  flex: 1 1 320px; height: var(--wh); overflow-y: auto; padding: 2px 8px 2px 2px;
  scrollbar-width: thin; scrollbar-color: rgba(97,85,63,.4) transparent;
}
.w-plain-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: 14px; letter-spacing: 2px;
  border-radius: var(--r-md); border: 1px dashed rgba(38,33,25,.18);
}
.wp-dao, .wp-trans {
  border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 12px;
  background: rgba(255,251,240,.5); border: 1px solid rgba(38,33,25,.13);
  font-size: 14px; line-height: 2.05; color: var(--ink);
}
.wp-trans { margin-bottom: 0; }
.wp-k {
  display: inline-block; margin-right: 10px; font-family: var(--font-kai);
  font-size: 12px; letter-spacing: 2px; color: #f5e9d2; background: var(--gilt);
  border-radius: 4px; padding: 1px 8px; vertical-align: 2px;
}
.wp-trans p { margin: 0 0 10px; }
.wp-trans p:last-child { margin-bottom: 0; }
.w-src { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .5px; }

/* ---------- 事件卡「相关诗文」签片 ---------- */
.m-wen:not(:empty) { margin: 14px 0 4px; }
.mwen-head { font-size: 11px; letter-spacing: 3px; color: var(--ink-faint); margin-bottom: 8px; }
.mwen-head::before { content: '❧ '; color: var(--gilt); }
.mwen-chip {
  display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
  margin: 0 8px 8px 0; font-size: 13px; font-family: var(--font-kai);
  border: 1px solid rgba(63,107,143,.35); border-radius: 999px; padding: 4px 13px;
  color: var(--azurite-d); background: rgba(255,251,240,.4);
}
.mwen-chip i { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.mwen-chip:hover { border-color: var(--azurite); color: var(--azurite); }

/* ---------- 舆图（S4）：时间滑杆 + 疆域 + 都城 ---------- */
.tu-slider { position: relative; margin: 16px 0 18px; }
.tu-strip {
  position: relative; height: 26px; display: flex; border-radius: 6px; overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(38,33,25,.2); cursor: pointer;
}
.tu-strip i { height: 26px; opacity: .8; }
.tu-strip i:first-child { border-radius: 6px 0 0 6px; }
.tu-strip i:last-child { border-radius: 0 6px 6px 0; }
.tu-handle {
  position: absolute; top: -7px; width: 2px; height: 40px; margin-left: -1px;
  background: var(--cinnabar); border-radius: 1px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(245,236,216,.8);
  transition: left .3s ease;
}
.tu-handle::before {
  content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--cinnabar);
}
.tu-slider input[type=range] {
  position: absolute; inset: -8px 0; width: 100%; opacity: 0; cursor: pointer; margin: 0;
}
.tu-stage { display: flex; gap: 18px; align-items: stretch; }
.tu-map {
  flex: 1 1 62%; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(38,33,25,.16);
  background: linear-gradient(180deg, #eee3c8, var(--silk) 40%, #decfa8);
  box-shadow: inset 0 0 46px rgba(120,95,50,.10), var(--shadow-soft);
  min-height: 380px;
}
.tu-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tu-base { fill: rgba(148,131,95,.30); stroke: rgba(97,85,63,.45); stroke-width: .7; }
.tu-terr {
  opacity: 0; transition: opacity .5s ease;
  fill-opacity: .34; stroke-width: 1.6; stroke-linejoin: round;
}
.tu-terr.on { opacity: 1; }
.tu-caps { opacity: 0; transition: opacity .5s ease .12s; pointer-events: none; }
.tu-caps.on { opacity: 1; }
.tu-cap-dot { fill: var(--cinnabar); stroke: #f5e9d2; stroke-width: 2.2; }
.tu-cap-lbl {
  font-family: var(--font-kai); font-size: 21px; fill: var(--ink);
  paint-order: stroke; stroke: rgba(245,236,216,.9); stroke-width: 4px; stroke-linejoin: round;
}
.tu-move { stroke: var(--cinnabar-d); stroke-width: 2; stroke-dasharray: 7 6; opacity: .65; }
.tu-info {
  flex: 0 0 300px; border-radius: var(--r-lg); padding: 18px 20px;
  background: rgba(255,251,240,.45); border: 1px solid rgba(38,33,25,.14);
  align-self: flex-start;
}
.ti-era { display: flex; align-items: baseline; gap: 10px; }
.ti-era b { font-family: var(--font-kai); font-weight: normal; font-size: 24px; letter-spacing: 4px; color: var(--ink); }
.ti-era span { font-size: 12px; color: var(--ink-faint); }
.ti-tag { margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); letter-spacing: 1px; }
.ti-k { margin: 15px 0 7px; font-size: 11px; letter-spacing: 4px; color: var(--ink-faint); }
.ti-cap { font-size: 13.5px; line-height: 1.9; color: var(--ink); display: flex; align-items: baseline; gap: 8px; }
.ti-cap.ti-none { color: var(--ink-faint); }
.ti-n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%; font-style: normal; font-size: 11px;
  background: var(--cinnabar); color: #f5e9d2; font-family: var(--font-kai); transform: translateY(3px);
}
.ti-note { font-size: 13px; line-height: 1.95; color: var(--ink-soft); }
.tu-info .td-open { margin-top: 14px; }

/* ---------- 宝藏（S3）：深色展厅（复用装裱色 --mount，不引新色） ---------- */
.h-view.v-dark {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(229,217,189,.07), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--mount-hi), var(--mount) 30%);
}
.cg-h2 { color: #e5dbc4 !important; }
.cg-sub { color: rgba(229,217,189,.55) !important; }
.cg-empty { color: rgba(229,217,189,.5); }
.cg-eragroup { margin-bottom: 10px; }
.cg-erahead {
  display: flex; align-items: baseline; gap: 12px; margin: 28px 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(229,217,189,.16);
}
.cg-erahead::before { content: ''; align-self: center; width: 4px; height: 16px; border-radius: 2px; background: var(--gilt); }
.cg-erahead span { font-family: var(--font-kai); font-size: 19px; letter-spacing: 5px; color: #e5dbc4; }
.cg-erahead i { font-style: normal; font-size: 12px; color: rgba(229,217,189,.45); }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; }
.cg-card {
  cursor: pointer; border-radius: var(--r-md); overflow: hidden;
  background: rgba(229,217,189,.05); border: 1px solid rgba(229,217,189,.12);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.cg-card:hover {
  transform: translateY(-4px); border-color: var(--gilt-soft);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.cg-imgbox {
  height: 170px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, rgba(229,217,189,.14), rgba(0,0,0,0) 75%);
}
.cg-imgbox img { max-width: 88%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)); }
.cg-name { padding: 10px 14px 2px; font-family: var(--font-kai); font-size: 16px; letter-spacing: 1.5px; color: #e5dbc4; }
.cg-meta { padding: 0 14px 12px; font-size: 11.5px; color: rgba(229,217,189,.5); }
/* 详情 */
.cg-back { color: #9fb6c8 !important; }
.cg-stage { display: flex; gap: 26px; margin-top: 14px; }
.cg-view {
  flex: 1 1 58%; min-height: 380px; max-height: 66vh; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(ellipse 75% 65% at 50% 40%, rgba(229,217,189,.16), rgba(0,0,0,0) 78%);
  border: 1px solid rgba(229,217,189,.1);
}
.cg-view img { max-width: 100%; max-height: 60vh; object-fit: contain; filter: drop-shadow(0 18px 42px rgba(0,0,0,.6)); }
.cg-side { flex: 1 1 36%; min-width: 300px; }
.cg-title { font-family: var(--font-kai); font-weight: normal; font-size: 27px; letter-spacing: 4px; color: #ede3cb; }
.cg-facts { margin: 14px 0 4px; }
.cg-f { font-size: 13px; line-height: 2.1; color: rgba(229,217,189,.82); }
.cg-f i {
  font-style: normal; display: inline-block; margin-right: 10px; font-size: 11px;
  letter-spacing: 3px; color: var(--gilt); font-family: var(--font-kai);
}
.cg-story { margin-top: 12px; }
.cg-story p { margin: 0 0 12px; font-size: 14px; line-height: 2.05; color: #ddd2b8; text-align: justify; }
.cg-look {
  margin: 14px 0; padding: 12px 16px; border-left: 3px solid var(--gilt-soft);
  background: rgba(229,217,189,.06); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 13px; line-height: 1.95; color: #ddd2b8;
}
.cg-look i { font-style: normal; margin-right: 10px; font-size: 11px; letter-spacing: 3px; color: var(--gilt); font-family: var(--font-kai); }
.cg-chips { margin-top: 6px; }
.cg-evt { border-color: rgba(159,182,200,.4) !important; color: #9fb6c8 !important; background: rgba(229,217,189,.04) !important; }
.cg-rel { border-color: rgba(229,217,189,.25) !important; color: #d8cdb2 !important; background: rgba(229,217,189,.04) !important; }
.cg-credit { margin-top: 16px; font-size: 11px; color: rgba(229,217,189,.4); letter-spacing: .5px; }
.cg-credit a { color: rgba(159,182,200,.75); text-decoration: none; border-bottom: 1px dashed rgba(159,182,200,.4); }
/* 每日一宝卡 */
.td-cang { cursor: pointer; }
.td-cang-row { display: flex; gap: 14px; align-items: center; }
.td-cang-row img { width: 74px; height: 74px; object-fit: contain; border-radius: 8px; background: rgba(38,33,25,.08); }

/* ---------- 卷尾竖签（卷面内，游至卷末露出） ---------- */
#end-sign {
  position: absolute; top: 50%; transform: translateX(-9999px);
  z-index: 9; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px 10px; border-radius: 8px; margin-top: -86px;
  background: linear-gradient(180deg, rgba(245,236,216,.92), rgba(231,218,188,.88));
  border: 1px solid rgba(38,33,25,.3); box-shadow: 3px 4px 14px rgba(38,28,10,.22);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
#end-sign.show { opacity: 1; pointer-events: auto; }
#end-sign .es-txt {
  writing-mode: vertical-rl; font-family: var(--font-kai); font-size: 15px;
  letter-spacing: 6px; color: var(--ink);
}
#end-sign .es-go {
  writing-mode: vertical-rl; font-size: 11px; letter-spacing: 4px; color: var(--cinnabar);
  border-top: 1px solid rgba(38,33,25,.25); padding-top: 8px;
}
#end-sign:hover { border-color: var(--cinnabar); }

/* ---------- 下滚入庭提示 ---------- */
#ting-hint {
  position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(23,29,34,.82); color: #e5d9bd;
  font-size: 12px; letter-spacing: 3px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, background .25s ease, box-shadow .25s ease;
}
#ting-hint.idle { opacity: .55; }             /* 全卷视野常驻的克制提示，提升可发现性 */
#ting-hint.show { opacity: 1; }               /* 下滚累计/渐入时高亮 */
/* 静止态可点：一键快跳庭院（过渡进行中的 .show 态不接受点击） */
#ting-hint.idle:not(.show) { pointer-events: auto; cursor: pointer; }
#ting-hint.idle:not(.show):hover {
  opacity: 1; background: rgba(23,29,34,.96);
  box-shadow: 0 5px 18px rgba(0,0,0,.32);
}
#ting-hint .th-bar {
  width: 64px; height: 3px; border-radius: 2px; background: rgba(229,217,189,.25); overflow: hidden; display: inline-block;
}
#ting-hint:not(.show) .th-bar { display: none; }   /* 静止态不显进度条 */
#ting-hint .th-fill {
  display: block; height: 100%; width: calc(var(--p, 0) * 100%);
  background: #d4b061; border-radius: 2px;
}
#ting-hint .th-arrow { color: #d4b061; letter-spacing: 0; }
#ting-hint.idle:not(.show) .th-arrow { animation: th-bob 1.9s ease-in-out infinite; }
@keyframes th-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .t-doors { grid-template-columns: repeat(2, 1fr); }
  .t-daily, .t-tools, .t-tours { grid-template-columns: 1fr; }
  .h-view { padding: 6px 16px 50px; }
  /* 阅读页小屏改上下堆叠：原文在上、白话在下，各自不再限高 */
  .w-stage { flex-direction: column; --wh: auto; }
  .w-read { max-width: 100%; height: 46vh; min-height: 260px; padding: 20px 18px; }
  .w-plain-col { height: auto; overflow: visible; flex-basis: auto; }
  .w-ln { font-size: 18px; }
  .w-title h2 { font-size: 23px; letter-spacing: 7px; }
  .z-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tu-stage { flex-direction: column; }
  .tu-info { flex-basis: auto; }
  .tu-map { min-height: 300px; }
  .tu-cap-lbl { font-size: 26px; }
  .cg-stage { flex-direction: column; }
  .cg-view { min-height: 260px; }
  .cg-side { min-width: 0; }
}