/* ══════════════════════════════════════════════════════════════
   其三 · 合音（对音）—— 四栏互译互音
   全屏一张刻本页：左上为天地人的类目，右上为两枚视角印，中间是读法一句；
   版框之下是一条「读法带」，把四栏之名与读序正对着各自的栏标出来。
   书页自始至终不动，动的只是「眼睛从哪一栏出发」。
   没有任何现代控件——只有纸、墨、金线与批注。
   ══════════════════════════════════════════════════════════════ */

.page--harmony{ background:none; box-shadow:none; }

.harmony{
  --ink:   #2b2318;
  --ink-2: #5d5142;
  --gold:  #c79a44;
  --zhu:   #a63428;
  position:absolute; inset:0;
  padding: 0 3.6%;
  display:grid;
  /* 书眉 · 版框 · 读法带 · 地脚 */
  grid-template-rows: 11.5% 1fr 8.8% 12%;
  color: var(--ink);
  user-select:none;
  -webkit-user-select:none;
  /* 纸：与其二·形骨同一张宣纸，故四卷翻过去是同一个桌面 */
  background:
    radial-gradient(120% 78% at 50% 16%, rgba(255,253,246,.72), transparent 62%),
    linear-gradient(180deg, #f3ead4, #e9dfc2 62%, #ded1ae),
    url('../assets/paper-tile.png');
  background-size: auto, auto, 380px;
  background-blend-mode: normal, normal, multiply;
  box-shadow: inset 0 0 90px rgba(96,68,32,.20);
  touch-action: none;
}

/* ─────────── 书眉：类目（左上）· 读法（中）· 视角印（右上） ─────────── */
.hm__head{
  position:relative;
  /* 左右两列等宽，中间那一列才落在页面的中轴上——否则读法那句
     会被左边的类目顶偏（量出来差 26px，肉眼看得出来）。 */
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:start;
  column-gap: 2.2%;
  /* 留白从 1.1% 收到 .7%：书眉这一条要容纳竖排六字的视角印，
     放大字号后余量只剩十来像素（量过），往上抬一点才不至于顶到版框。 */
  padding-top: .7%;
}

/* 类目：天、地、人三类并立，当前这一类实、其余两类虚 */
.hm__cats{
  display:flex; align-items:flex-start; gap:.85em;
  justify-self:start;
}
/* 三枚类目是可以点的（换叶）：只是墨字之形，没有框、没有底，
   故按钮的样式一概抹去，只剩字与轻重的分别。 */
.hm__cat{
  display:flex; flex-direction:column; align-items:center; gap:.16em;
  margin:0; padding:0; border:0; background:none; font:inherit;
  color:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.hm__cat:disabled{ cursor:default; }
.hm__cat b{
  font-family: var(--f-brush); font-weight:400; line-height:1;
  font-size: clamp(24px, calc(var(--u,8px) * 3.05), 40px);
  color: rgba(43,35,24,.26);
  transition: color .5s ease;
}
.hm__cat i{
  font-style:normal;
  font-size: clamp(11px, calc(var(--u,8px) * 1.34), 16px);
  letter-spacing:.14em; text-indent:.14em;
  color: rgba(132,86,52,.38);
  white-space:nowrap;
}
.hm__cat.is-on b{
  color:#241d14;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 0 20px rgba(120,90,50,.18);
}
.hm__cat.is-on i{ color: rgba(166,52,40,.88); }
.hm__cat:not(:disabled):hover b{ color: rgba(43,35,24,.62); }
.hm__cat:not(:disabled):hover i{ color: rgba(166,52,40,.66); }
.hm__cat:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
/* 图尚未备的那一枚类目（ready:false）：名更虚，且不做「不可用」那种灰掉的样子。
   天、地、人三叶现已俱备，这一支备而不用。 */
.hm__cat.is-wait b{ color: rgba(43,35,24,.16); }
.hm__cat.is-wait i{ color: rgba(132,86,52,.24); }

/* 读法一句：跟着视角走，一句话说清「从哪一头读起」。
   这一句本身也要照着读序排：汉人那一侧自左而右，故排成一个自左而右的行；
   西夏人那一侧自右而左，故整行倒过来（.is-rev 把分段前后对调），
   连箭头也改指左——否则句子的排法与它自己讲的读序相悖。
   分段而不用 direction:rtl：rtl 会把「：」这类标点一并搬到行首，反而不成句。 */
.hm__ruleline{
  align-self:center; margin:0;
  display:flex; align-items:baseline; justify-content:center;
  gap:.34em;
  font-family: var(--f-serif);
  font-size: clamp(13px, calc(var(--u,8px) * 1.78), 21px);
  letter-spacing:.06em; white-space:nowrap;
  color: rgba(140,60,34,.92);
  transition: color .4s ease;
}
/* 视角一换，整句的行序也跟着掉头 */
.hm__ruleline.is-rev{ flex-direction:row-reverse; }
/* 起首的「谁学谁」：朱墨，略重，与右上那枚视角印同色 */
.hm__rl-head{ color:#a63428; }
/* 「自左而右／自右而左：」：比正文深一层的朱 */
.hm__rl-dir{ color: rgba(150,72,42,.92); }
/* 三样东西的名目：墨色，与版框上的字同调 */
.hm__rl-item{ color:#3b3226; font-weight:600; }
/* 指向的那两支箭：金色，与四栏光轨同色 */
.hm__rl-arrow{ color: rgba(178,132,44,.95); }

/* 视角印：不作按键之形，只在墨字上分轻重（无框、无底、无阴影） */
.hm__seals{ display:flex; align-items:flex-start; gap:1.1em; justify-self:end; }
.hm__seal{
  border:0; background:none; padding:0;
  writing-mode: vertical-rl;
  font-family: var(--f-brush);
  /* 字放大到 1.42u：竖排六字正好占满书眉那一条，
     再多就顶到版框上沿（量过：书眉净高约 87px，此处六字约 80px）。 */
  font-size: clamp(11px, calc(var(--u,8px) * 1.42), 19px);
  letter-spacing:.05em;
  color: rgba(166,52,40,.56);
  cursor:pointer;
  transition: color .45s ease, opacity .45s ease, text-shadow .45s ease;
}
.hm__seal:hover{ color: rgba(166,52,40,.80); }
.hm__seal[aria-pressed="false"]{ color: rgba(166,52,40,.44); }
.hm__seal[aria-pressed="false"]:hover{ color: rgba(166,52,40,.68); }
.hm__seal.is-on{
  color: rgba(150,36,26,.98);
  text-shadow: 0 0 14px rgba(190,90,50,.30), 0 1px 0 rgba(255,250,235,.8);
}
.hm__seal:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }

/* ─────────── 版框：刻本页本体 ───────────
   天类那一叶是 912×932（立着），地类那一叶是 1269×1209（一方整叶），
   所以尺寸不写死在 CSS 里：舞台居中，版框的实际宽高由 js/harmony.js
   按页面像素算出来（等比缩到舞台之内），换页时自然换成另一副身架。 */
.hm__stage{
  position:relative;
  min-height:0;
}
.hm__plate{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 30px rgba(84,58,26,.30));
  touch-action: none;
}
.hm__paper,
.hm__fx,
.hm__ripple{
  position:absolute; inset:0; width:100%; height:100%;
}
.hm__paper{
  user-select:none; -webkit-user-drag:none;
  box-shadow: 0 0 0 1px rgba(120,92,56,.22);
}
.hm__fx{ z-index:2; overflow:visible; }
.hm__ripple{ z-index:3; pointer-events:none; }

/* 词条热区：只有事件，不见其形（fill:none + pointer-events:all） */
.hm__zone{ fill:none; cursor:pointer; }

/* 金墨高亮：只落在笔锋上（派生自抽墨图），不是盖在栏上的一块色 */
.hm__hl{
  opacity:0; pointer-events:none;
  transition: opacity .5s ease;
}
.hm__hl.is-lead{ opacity:.74; }
.hm__hl.is-here{
  opacity:1;
  filter: drop-shadow(0 0 5px rgba(248,226,158,.85))
          drop-shadow(0 0 16px rgba(206,158,66,.42));
}

/* 光轨：极细的金线，自起点流向终点 */
.hm__track{
  fill:none; stroke: rgba(198,154,68,.92); stroke-width:1.5;
  stroke-linecap:round;
  stroke-dasharray: var(--len, 200) var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  animation: hm-flow 1.05s cubic-bezier(.3,.7,.2,1) forwards;
}
@keyframes hm-flow{ to{ stroke-dashoffset:0; } }

/* 引线：自落点垂至版框下缘，接住读法带上的那一个字，再落到眉批 */
.hm__lead{
  fill:none; stroke: rgba(150,96,52,.45); stroke-width:1;
  stroke-dasharray: 3 4;
}

/* ─────────── 读法带：四栏之名与读序，落在版框之下 ───────────
   文字与箭线都由 js/harmony.js 按版框的实时像素画出，
   故这里只留一条与书页同宽的画布。 */
.hm__rule{
  position:relative;
  width:100%; align-self:stretch;
}
.hm__rule-fx{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible;
}
/* 带上的字与线：字号随栏距伸缩，故字号由 js 逐枚写出，此处只管色 */
.hm__rname{
  font-family: var(--f-serif); fill:#5d5142;
  letter-spacing:.02em; text-anchor:middle;
}
.hm__rname.is-off{ fill: rgba(93,81,66,.32); }
.hm__rno-txt{ font-family: var(--f-serif); fill:#a63428; }
.hm__rno-ring{ fill:#f3ead4; stroke: rgba(166,52,40,.72); stroke-width:1; }
.hm__rno-ring.is-off{ fill:none; stroke: rgba(150,96,52,.30); stroke-dasharray: 2 2; }
/* 落在当前这一步的那一枚：纸色底、朱圈加粗，一眼看得出读到哪了 */
.hm__rno-ring.is-here{ fill:#f7ecd2; stroke: rgba(166,52,40,.95); stroke-width:1.6; }
.hm__rstub{ stroke: rgba(150,96,52,.34); stroke-width:1; }
.hm__rbase{ stroke: rgba(150,96,52,.22); stroke-width:1; }
/* 读序那一条：自第一步流向第三步，指向末一步 */
.hm__rlink{
  fill:none; stroke: rgba(198,154,68,.80); stroke-width:1.2;
  stroke-linecap:round;
  stroke-dasharray: var(--len, 200) var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  animation: hm-flow 1.0s cubic-bezier(.3,.7,.2,1) forwards;
}
.hm__rhead{ fill: rgba(198,154,68,.88); }

/* ─────────── 地脚：眉批自下长出 ─────────── */
.hm__foot{
  position:relative;
  padding: 1.6% 0 0;
  display:flex; justify-content:center;
  align-items:flex-start;
}
.hm__note{
  position:absolute; left:0; right:0; top:0;
  display:flex; justify-content:flex-start;
  opacity:0; pointer-events:none;
  transform: translateY(7px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.3,.7,.2,1);
}
.hm__note.is-on{ opacity:1; transform:none; }
.hm__note-body{
  max-width: 100%;
  padding-left: 1.05em;
  border-left:1px solid rgba(166,52,40,.55);
}
.hm__note-label{
  margin:0 0 .30em;
  font-size: clamp(9px, calc(var(--u,8px) * 1.02), 13px);
  letter-spacing:.24em; color: rgba(166,52,40,.86);
}
.hm__note-text{
  margin:0;
  font-family: var(--f-serif);
  font-size: clamp(11px, calc(var(--u,8px) * 1.34), 17px);
  line-height:1.7; letter-spacing:.03em; color:#332a1e;
}
.hm__note-text b{ font-weight:600; color:#8d3418; }
.hm__note-src{
  margin:.34em 0 0;
  font-size: clamp(9px, calc(var(--u,8px) * .96), 12px);
  letter-spacing:.05em; color: rgba(93,81,66,.78);
}
.hm__note-src em{ font-style:normal; color: rgba(166,52,40,.80); }

/* ─────────── 无事时的提示（地脚中央） ─────────── */
.hm__hint{
  align-self:center; margin:0;
  font-family: var(--f-brush);
  font-size: clamp(12px, calc(var(--u,8px) * 1.5), 19px);
  letter-spacing:.30em; text-indent:.30em;
  color: rgba(150,72,40,.62);
  transition: opacity .6s ease;
  white-space:nowrap;
}
.hm__hint.is-gone{ opacity:0; }

/* 舞台上的通用提示让开：本卷自己有话说 */
.stage.is-harmony .hint{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .hm__track, .hm__rlink{ animation-duration:.001ms; }
  .hm__note{ transition-duration:.001ms; }
}