/* ══════════════════════════════════════════════════════════════
   番汉合时掌中珠 · 开卷 — 基础层
   色彩、字体、案几、书叶容器、卷签、印章开关
   ══════════════════════════════════════════════════════════════ */

:root{
  /* 纸与墨 */
  --paper:      #f3e8d1;
  --paper-2:    #ece0c4;
  --paper-edge: #d8c7a4;
  --ink:        #241f19;
  --ink-soft:   #453a2e;
  --ink-faint:  #6d6053;

  /* 签条朱与印朱 */
  --red:        #b8502c;
  --red-deep:   #8d3418;
  --vermilion:  #a63428;

  /* 金墨 */
  --gold-hi:    #f6e3a8;
  --gold:       #d9b25f;
  --gold-lo:    #a9741f;

  /* 案几 */
  --desk-1:     #2a211a;
  --desk-2:     #14100d;

  /* 字体 */
  --f-serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-brush: "Ma Shan Zheng", "STKaiti", "Kaiti SC", "KaiTi", "Songti SC", serif;

  /* 尺寸 */
  --stage-w: min(92vw, calc(92vh * 0.76054));
  --hz-outline: 0;
}

@supports (height: 1svh){
  :root{ --stage-w: min(92vw, calc(92svh * 0.76054)); }
}


/* ─────────── 西夏字库（自托管子集） ───────────
   本机与多数系统都没有西夏字库，文中的西夏字会渲成豆腐框。故随页带一份
   Noto Serif Tangut（SIL OFL 1.1）的 Tangut 区段子集，专供「以文字显示」
   的西夏字用（字形本身仍走 js/stroke-geometry.js 的向量，不靠字库）。 */
@font-face{
  font-family: 'Tangut';
  src: url('../assets/fonts/NotoSerifTangut-subset.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+17000-187F7, U+16FE0, U+2FF0-2FFF;
}

*,*::before,*::after{ box-sizing: border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--f-serif);
  color: var(--ink);
  background: var(--desk-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

img{ display:block; max-width:100%; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ─────────── 案几：深墨底 + 纸纹颗粒 + 一盏侧光 ─────────── */
.desk{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(130% 100% at 22% 6%, #3a2d22 0%, var(--desk-1) 42%, var(--desk-2) 78%),
    var(--desk-2);
}
.desk__grain{
  position:absolute; inset:-10%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.07; mix-blend-mode: overlay;
}
.desk__lamp{
  position:absolute; inset:0;
  background: radial-gradient(58% 44% at 50% 34%, rgba(255,226,168,.10), transparent 70%);
}

/* ─────────── 书叶舞台 ─────────── */
.stage{
  position:relative;
  width: var(--stage-w);
  height: var(--stage-h, auto);
  aspect-ratio: 794 / 1044;
  transition: width .92s cubic-bezier(.45,.05,.18,1), height .92s cubic-bezier(.45,.05,.18,1);
  perspective: 2000px;
  perspective-origin: 32% 46%;
  overflow:hidden;                     /* 翻起的纸叶扫过书脊即出框 */
  filter: drop-shadow(0 26px 54px rgba(0,0,0,.62)) drop-shadow(0 2px 0 rgba(255,238,205,.06));
  isolation: isolate;
}
/* 对开阶段：书叶展开，比例改由 JS 逐帧给定宽高 */
.stage[data-mode="spread"]{ aspect-ratio:auto; }

.svgdefs{ position:absolute; width:0; height:0; overflow:hidden; }

/* 书脊／装订沟：翻页前藏在封面之下，展开后轻微透出 */
.spine{
  position:absolute; left:0; top:0; bottom:0; width:2.6%;
  background: linear-gradient(90deg, rgba(24,15,6,.55), rgba(24,15,6,.18) 45%, transparent);
  opacity:0; transition: opacity .7s ease; pointer-events:none; z-index:6;
}
.stage[data-view="page"] .spine{ opacity:.9; }

/* 翻页投在底页上的影 */
.cast{
  position:absolute; top:0; bottom:0; left:0; width:100%;
  pointer-events:none; z-index:5; opacity:0;
  background: linear-gradient(90deg,
    rgba(22,14,6,0) 0%,
    rgba(22,14,6,.30) calc(var(--cast-x, 50%) - 12%),
    rgba(22,14,6,.52) var(--cast-x, 50%),
    rgba(22,14,6,0) calc(var(--cast-x, 50%) + 9%));
  filter: blur(7px);
}

/* ─────────── 封面叶 ─────────── */
.leaf{
  position:absolute; inset:0; z-index:10;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  will-change: transform;
}
.leaf__flat{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: fill;
  user-select:none; -webkit-user-drag:none;
}
/* 折页链：预设隐藏，翻页时接管画面 */
.leaf__curl{ position:absolute; inset:0; transform-style:preserve-3d; visibility:hidden; }
.leaf.is-curl .leaf__flat{ visibility:hidden; }
.leaf.is-curl .leaf__curl{ visibility:visible; }
/* 落于底页后，封面叶整片退场：否则 .leaf.is-curl 的子层会残留在页脚 */
.leaf.is-gone{ display:none; }

.seg{
  position:absolute; left:0; top:0;
  width: var(--len);
  height:100%;
  transform-style: preserve-3d;
  transform-origin: 0% 50%;
  transform: translateX(var(--move, 0px)) rotateY(var(--d, 0deg));
}
.seg__face{
  position:absolute; left:0; top:0; height:100%;
  /* 相邻分片各多出 3px 叠压，抵销 3D 边缘抗锯齿造成的细缝 */
  width: calc(var(--len) + 3px);
  background-image: url("../assets/cover.png");
  background-size: var(--lw) var(--lh);
  background-repeat: no-repeat;
  background-position-x: calc(var(--k) * var(--len) * -1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* 背面：宣纸纸背（帘纹 + 极淡云纹） */
.seg__back{
  transform: rotateY(180deg);
  background-image:
    radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.55), transparent 60%),
    repeating-linear-gradient(90deg, rgba(150,128,96,.10) 0 1px, rgba(150,128,96,0) 1px 8px),
    linear-gradient(180deg, #f6eeda, #efe3c9 55%, #e7d9bb);
  background-size: auto, auto, auto;
  background-position: 0 0;
}
.seg__shade{
  position:absolute; inset:0; pointer-events:none;
  /* 段内自左明至右暗线性过渡（Gouraud 式），相邻段端点取值相同，故无接缝 */
  background: linear-gradient(90deg,
    rgba(26,17,7, var(--shade-a, 0)),
    rgba(26,17,7, var(--shade-b, 0)));
}
.seg__gloss{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 34%, rgba(255,246,222,.44) 48%, transparent 62%);
  background-size: calc(var(--lw) * 2.6) 100%;
  background-position-x: calc(var(--spec-x, 0px) + var(--k) * var(--len) * -1);
  opacity: var(--spec-o, 0);
}

/* ─────────── 四卷书签 ─────────── */
.vols{
  position:absolute; right:-1px; top:12%; z-index:22;
  display:flex; flex-direction:column; gap:.55vh;
  opacity:0; visibility:hidden; transform: translateX(14px);
  transition: opacity .5s ease .35s, transform .5s ease .35s, visibility .5s;
}
.stage[data-view="page"] .vols{ opacity:.94; visibility:visible; transform:none; }

.vol{
  writing-mode: vertical-rl;
  font-family: var(--f-serif);
  font-size: clamp(10px, 1.55vh, 15px);
  letter-spacing: .22em;
  color: #6a4a30;
  padding: .55em .42em;
  border:1px solid rgba(140,108,72,.45);
  border-right:0;
  border-radius: 2px 0 0 2px;
  background:
    linear-gradient(180deg, rgba(255,252,240,.92), rgba(238,226,198,.92));
  box-shadow: -2px 2px 6px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.4);
  cursor:pointer;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.vol:hover{ transform: translateX(-4px); color: var(--red-deep); }
.vol.is-current{
  background: linear-gradient(180deg, #c05a30, #a13f20);
  color:#f7ecd6; border-color: rgba(120,40,16,.6);
}
.vol:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ─────────── 提示语 ─────────── */
.hint{
  position:absolute; left:50%; bottom:3.2%; transform:translateX(-50%);
  z-index:24;                                /* 须高于底页与封面叶 */
  margin:0; color: rgba(148,56,32,.60);
  font-family: var(--f-brush);
  font-size: clamp(12px, 1.7vh, 17px);
  letter-spacing:.42em; text-indent:.42em;
  transition: opacity 1.1s ease .1s;
  pointer-events:none; white-space:nowrap;
  text-shadow: 0 0 1px rgba(255,250,235,.8), 0 1px 10px rgba(120,70,40,.16);
}
.hint.is-gone{ opacity:0; }
.stage[data-view="page"] .hint{
  color: rgba(148,56,32,.52);
  bottom: 2.6%;
}

/* ─────────── 纸声开关（朱印） ─────────── */
.seal{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:40;
  width:3.1rem; height:3.1rem; padding:0;
  display:grid; place-items:center;
  border:1.5px solid rgba(190,72,50,.75);
  border-radius:3px;
  background: linear-gradient(160deg, rgba(166,52,40,.92), rgba(124,32,22,.92));
  color:#f6e6cf; font-family: var(--f-serif);
  font-size:.95rem; letter-spacing:0;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,220,190,.18);
  cursor:pointer; opacity:.72;
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.seal:hover{ opacity:1; transform: translateY(-2px); }
.seal[aria-pressed="false"]{
  background: linear-gradient(160deg, rgba(96,84,70,.9), rgba(58,49,40,.9));
  border-color: rgba(180,164,140,.5); color:#e2d6c2;
}
.seal:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.noscript{
  position:fixed; inset:auto 0 1rem 0; text-align:center;
  color:#e8d9bd; font-size:.9rem;
}

/* ─────────── 减少动态 ─────────── */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .leaf{ transition: opacity .35s ease; }
  .vols{ transition: opacity .3s ease; }
}