/* ══════════════════════════════════════════════════════════════
   其二 · 形骨 —— 描红・拆解・汉夏对照
   全屏宣纸上一字独大：左近为淡墨轮廓（描红），读者沿笔路运笔，
   笔到之处留湿墨；笔路成则锁住，全字成则金生、部件染色、眉批自笔下长出。
   页面上没有任何现代控件——只有墨、字、与四周的批注线。
   ══════════════════════════════════════════════════════════════ */

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

.bone{
  --ink:#241c12;
  --qing:#3f6d8e;          /* 石青：部一 */
  --zhu:#a63428;           /* 朱砂：部二 */
  --gold:#d9b25f;
  position:absolute; inset:0;
  padding: 1.2% 1.4% 1.6%;
  color:#3a3025;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

/* 纸：与其一同一张宣纸，边上压暗，令字如在灯下 */
.bone::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 78% at 50% 22%, rgba(255,253,246,.72), transparent 62%),
    linear-gradient(180deg, #f3ead4, #e7dcbe 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);
}

/* ─────────── 字与墨的画框 ─────────── */
.bone__stage{
  position:absolute;
  inset: 3.2% 4.5% 17%;      /* 下缘让给索引与提示 */
}
.bone__under,
.bone__svg,
.bone__wet,
.bone__leads{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.bone__under{ z-index:1; }                  /* 描红的轮廓在最下 */
.bone__wet{ z-index:2; pointer-events:none; }  /* 墨是画在画布上，手势落在画框 */
.bone__svg{ z-index:3; overflow:visible; }  /* 拆解、眉批、对照的汉字浮在墨上 */
.bone__leads{ z-index:4; pointer-events:none; overflow:visible; }

/* 描红：极淡的轮廓，只在字身上，不填满——像砚边未干的一层薄墨 */
.bone__outline{
  fill: rgba(58,44,28,.028);      /* 极淡的一层纸灰，不是实心的灰字 */
  stroke: rgba(58,44,28,.34);
  stroke-width:3;
  stroke-linejoin:round;
  transition: opacity .8s ease;
}
.bone.is-done .bone__outline{ opacity:.42; }

/* ─────────── 读者之墨（canvas）与字成的金 ───────────
   墨是读者自己画的，但一律按原字形裁过（见 js/bone.js 的 compose），
   故画到字外不显、画进笔画便沿横竖撇捺填起来。下面几层只在字成时浮现。 */
.bone__locked path{ fill:none; stroke:none; }
/* 部件染色：把同一条字形轮廓按分界裁开，两部各自上色——
   颜色因此与字分毫不差，不是另画几笔去凑 */
.bone__locked path.partfill{
  opacity:0;
  transition: opacity 1.1s ease;
  mix-blend-mode: multiply;      /* 让颜色沉进墨里，而不是浮在纸上 */
}
.bone__locked path.partfill[data-part="0"]{ fill: var(--qing); }
.bone__locked path.partfill[data-part="1"]{ fill: var(--zhu); }
/* 浮在读者的墨上，故用一般叠色、低透明：两部的颜色才读得出来 */
.bone.is-done .bone__locked path.partfill{ opacity:.52; }
/* 金：照原字走一圈轮廓，内里也透一层极淡的金 */
.bone__locked path.gildfill{
  fill: rgba(232,196,116,.10);
  stroke: rgba(232,196,116,.85);
  stroke-width: 6;
  opacity:0; transition: opacity 1.5s ease .35s;
}
.bone.is-done .bone__locked path.gildfill{
  opacity:1;
  filter: drop-shadow(0 0 10px rgba(238,206,132,.75))
          drop-shadow(0 0 26px rgba(206,158,66,.4));
}
/* 对照时：脱出的那一部先以「原字的一块墨」现身，随它的组一起左移 */
.bone__locked path.piecefill{
  fill: #241c12; opacity:0;
  transition: opacity .55s ease;
}
.bone.is-compare .bone__locked .bone__partmove path.piecefill{ opacity:1; }
.bone.is-compare .bone__locked g.st:not(.bone__partmove) path.partfill{ opacity:.16; }

/* ─────────── 眉批：字的四周，自笔下长出 ─────────── */
.bone__anns text{
  font-family: var(--f-brush);
  font-size: 38px;
  letter-spacing:.06em;
  fill: rgba(58,36,22,.92);
  opacity:0;
}
.bone__anns text.on{
  animation: annIn .75s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes annIn{
  0%  { opacity:0; transform: translateY(-7px); filter: blur(5px); }
  100%{ opacity:.92; transform:none; filter: blur(0); }
}
.bone__lead{
  fill:none; stroke: rgba(120,86,48,.55); stroke-width:2.4;
  stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
}
.bone__lead.on{ animation: leadIn 1.1s ease forwards; animation-delay: var(--d, 0ms); }
@keyframes leadIn{ to{ stroke-dashoffset:0; } }

/* ─────────── 汉夏对照 ─────────── */
.bone__han.is-tangut text{ font-family: 'Tangut', var(--f-serif); }
.bone__han text{
  font-family: var(--f-brush);
  font-size: 420px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: rgba(166,52,40,.9);
  opacity:0;
  transition: opacity .9s ease .25s, transform 1.1s cubic-bezier(.2,.8,.2,1);
  transform: scale(1.12);
  transform-origin: var(--hx,500px) var(--hy,500px);
}
.bone.is-compare .bone__han text{ opacity:.86; transform:none; }
.bone__han text.halo{
  fill:none; stroke: rgba(232,196,116,.85); stroke-width:3;
  filter: drop-shadow(0 0 14px rgba(238,206,132,.7));
  opacity:0; transition: opacity 1.2s ease .5s;
}
.bone.is-compare .bone__han text.halo{ opacity:1; }
.bone__partmove{ transition: transform 1.15s cubic-bezier(.34,.72,.2,1); }
.bone.is-compare .bone__partmove{ transform: translateX(-14%); }
/* 对照时其余的笔路退后，只留脱出的那一部与汉字相看 */
.bone__locked .ink{ transition: opacity .9s ease; }
.bone.is-compare .bone__locked g.st:not(.bone__partmove) .ink{ opacity:.30; }
.bone.is-compare .bone__locked g.st:not(.bone__partmove) .wet{ opacity:.25; }

/* 对照时的一句按语 */
.bone__vs{
  position:absolute; left:50%; bottom:6.4%;
  transform: translateX(-50%);
  margin:0; max-width:70%;
  font-family: var(--f-serif);
  font-size: clamp(12px, calc(var(--u,8px) * 1.45), 17px);
  letter-spacing:.12em; line-height:1.6;
  color: rgba(74,52,30,.94);
  text-align:center;
  padding:.4em 1.1em;
  background: linear-gradient(180deg, rgba(255,252,241,.94), rgba(240,230,206,.9));
  box-shadow: 0 6px 18px rgba(24,14,4,.24), inset 0 0 0 1px rgba(126,96,56,.24);
  opacity:0; transition: opacity .7s ease .6s;
  pointer-events:none;
}
.bone.is-compare .bone__vs{ opacity:1; }

/* ─────────── 四周的零星字（码位・六书・提示） ─────────── */
.bone__ref{
  position:absolute; left:2.6%; top:1.2%;
  display:flex; flex-direction:column; align-items:flex-start; gap:.1em;
}
/* 字外这些零星的题字只是题字，不可挡住运笔的手势 */
.bone__ref, .bone__code, .bone__liushu, .bone__hint,
.bone__vs, .bone__verify, .bone__ticks{ pointer-events:none; }
/* 对应的汉字：大字朱笔，一眼即见这是「借」谁之形 */
.bone__hanref{
  margin:0;
  font-family: var(--f-brush);
  font-size: clamp(46px, calc(var(--u,8px) * 11), 130px);
  line-height:1;
  color: rgba(166,52,40,.42);
  letter-spacing:0;
  text-shadow: 0 1px 0 rgba(255,252,241,.5);
  transition: color 1s ease;
}
.bone.is-done .bone__hanref{ color: rgba(166,52,40,.16); }
.bone__code,
.bone__liushu,
.bone__hint{
  position:absolute; margin:0;
  font-family: var(--f-serif);
  letter-spacing:.22em;
  color: rgba(120,86,50,.72);
  white-space:nowrap;
}
.bone__code{
  left:1.6%; top:1.2%;
  font-family: 'Tangut', var(--f-serif);
  font-size: clamp(10px, calc(var(--u,8px)*1.05), 14px);
}
.bone__ref .bone__code{ position:relative; left:0; top:0; }
.bone__liushu{
  right:1.6%; top:1.2%; text-align:right;
  font-size: clamp(10px, calc(var(--u,8px)*1.05), 14px);
  color: rgba(166,52,40,.72);
}
.bone__liushu em{ font-style:normal; color: rgba(120,86,50,.6); letter-spacing:.1em; }
.bone__hint{
  left:50%; bottom:2.4%; transform: translateX(-50%);
  font-family: var(--f-brush);
  font-size: clamp(12px, calc(var(--u,8px)*1.45), 18px);
  color: rgba(90,62,34,.6);
  transition: opacity .5s ease;
}
.bone__hint.is-gone{ opacity:0; }
/* 形骨开著时，通用的那一条提示让位——此卷自己的话在字下 */
.stage.is-bone .hint{ opacity:0; }

/* 笔路的墨点：一笔一记，成则沉实 */
.bone__ticks{
  position:absolute; right:1.6%; top:50%;
  transform: translateY(-50%);
  display:flex; flex-direction:column; gap:.5em;
  align-items:center;
}
.bone__ticks i{
  width:.5em; height:.5em; border-radius:50%;
  background: rgba(58,44,28,.18);
  box-shadow: inset 0 0 0 1px rgba(58,44,28,.25);
  transition: background .5s ease, transform .5s ease;
}
.bone__ticks i.on{ background: rgba(36,28,18,.72); transform: scale(1.25); }

/* ─────────── 字之索引：下方一行，想描哪个就描哪个 ───────────
   不作按键之形——只在墨字上分轻重：当前的沉，其余的淡。 */
.bone__index{
  position:absolute; left:50%; bottom:6.4%;
  transform:translateX(-50%);
  display:flex; align-items:flex-end;
  gap: clamp(12px, 2.1vw, 40px);
  padding: 0 .6em;
}
.bone__index button{
  appearance:none; border:0; background:none; padding:.1em .15em .3em;
  display:flex; flex-direction:column; align-items:center; gap:.06em;
  font-family: var(--f-brush);
  color: rgba(90,62,34,.42);
  cursor:pointer;
  transition: color .35s ease, transform .35s ease;
}
.bone__index button .cat{
  font-family: var(--f-serif);
  font-size: clamp(9px, calc(var(--u,8px)*.95), 12px);
  letter-spacing:.22em; text-indent:.22em;
  color: rgba(120,86,50,.55);
}
.bone__index button .gl{
  font-size: clamp(19px, calc(var(--u,8px)*2.1), 34px);
  line-height:1.05;
}
.bone__index button .tg{
  font-family: 'Tangut', var(--f-serif);
  font-size: clamp(13px, calc(var(--u,8px)*1.35), 18px);
  color: rgba(120,86,50,.5);
  line-height:1.1;
}
.bone__index button:hover{ color: rgba(120,80,40,.72); transform: translateY(-2px); }
.bone__index button.is-current{ color: rgba(166,52,40,.9); }
.bone__index button.is-current .tg{ color: rgba(166,52,40,.6); }
.bone__index button:focus-visible{ outline:1px solid rgba(166,52,40,.5); outline-offset:3px; }

/* 待校的小注：与其一同一口吻，页面上不藏著 */
.bone__verify{
  position:absolute; left:1.6%; bottom:2.4%;
  margin:0; max-width:34%;
  font-family: var(--f-serif);
  font-size: clamp(9px, calc(var(--u,8px)*.95), 12px);
  line-height:1.6; letter-spacing:.06em;
  color: rgba(120,86,50,.6);
}

@media (max-aspect-ratio: 1/1){
  .bone{ padding:2.2% 3%; }
  .bone__anns text{ font-size:34px; }
  .bone__hint{ font-size: clamp(11px, calc(var(--u,8px)*1.3), 15px); }
  .bone__verify{ display:none; }
}

@media (prefers-reduced-motion: reduce){
}