:root{
  /* 纸与墨 */
  --paper:#EBE0C8;
  --paper-2:#E3D7BC;
  --paper-edge:#CFC1A2;
  --ink-ink:#2B2620;
  --ink-2:#4A4238;
  --ink-3:#7A6E58;
  --cinnabar:#B23A2C;
  --cover:#20394B;
  --cover-2:#16293A;
  --lamp:#E5C89A;
  --mist:#8E9CAA;
  --mist-2:#6E7C8A;

  --song:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --kai:"Ma Shan Zheng","STKaiti","KaiTi","楷体","楷体_GB2312","Kaiti SC",serif;
  --ease:cubic-bezier(.16,.84,.28,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#0B0A08;
  color:var(--ink-ink);
  font-family:var(--song);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}

/* 高度兜底：先给所有浏览器都认的 100vh，再让支持 dvh 的浏览器覆盖。
   绝不能只写 dvh——一旦不被支持，整条声明作废，.stage 高度塌成 0，封面全没了 */
.stage{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}

/* ───────── 书衣 ───────── */
.cover{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--cover) 0%,var(--cover-2) 100%);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
/* 宽屏时左右两侧用同一张图放大虚化填满，避免出现两条空底色 */
.cover::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("assets/cover.jpg") center/cover no-repeat;
  filter:blur(30px) brightness(.46) saturate(1.08);
  transform:scale(1.12);
}
.cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
  opacity:.7;
}
.cover.hide{opacity:0;transform:scale(1.04);pointer-events:none}

/* 整图完整呈现：宽高都只用 vw/vh 算（百分比锁定 940:1672），
   不依赖 aspect-ratio / dvh 也能算准——旧浏览器同样不会塌。
   手机竖屏铺满宽度，桌面收成整幅竖条居中，永不裁切、永不变形 */
.cover-frame{
  position:relative;z-index:2;
  width:min(100vw, calc(100vh * 0.5622));
  height:min(100vh, calc(100vw * 1.7787));
  aspect-ratio:940/1672;
  background:linear-gradient(160deg,var(--cover) 0%,var(--cover-2) 100%);
}
@supports (height:100dvh){
  /* 移动端地址栏伸缩时按动态视口再算一次，避免裁掉上下 */
  .cover-frame{
    width:min(100vw, calc(100dvh * 0.5622));
    height:min(100dvh, calc(100vw * 1.7787));
  }
}
.cover-art{
  position:absolute;inset:0;display:block;
  width:100%;height:100%;object-fit:contain;
}
/* 底部略压暗，让拆封的暖光更抓眼 */
.cover-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,7,10,.45),transparent 40%);
}
.seal{
  width:46px;height:46px;border-radius:2px;background:var(--cinnabar);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--kai);font-size:16px;color:#F7F1E6;letter-spacing:1px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.seal.sm{width:38px;height:38px;font-size:13px}

/* 拆封热点：圆心落在石台那封信上，尺寸随屏幕缩放并保证触控面积 */
.letter-hot{
  position:absolute;left:80%;top:62%;z-index:3;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1.6vw,10px);
  padding:clamp(9px,3vw,18px) clamp(14px,4.4vw,26px);
  background:radial-gradient(circle at 50% 42%,rgba(229,200,154,.24),rgba(229,200,154,.06) 52%,transparent 74%);
  animation:breathe 3.4s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
@keyframes breathe{0%,100%{opacity:.82}50%{opacity:1}}
.letter-hot .ring{
  width:clamp(46px,12.5vw,56px);height:clamp(46px,12.5vw,56px);
  border-radius:50%;
  border:1.5px solid rgba(229,200,154,.85);color:var(--lamp);
  background:rgba(11,10,8,.42);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease),background .35s;
}
.letter-hot .ring svg{width:52%;height:52%}
.letter-hot .hot-hint{
  font-size:clamp(11px,3.1vw,12px);letter-spacing:clamp(2px,.9vw,5px);
  color:var(--lamp);text-shadow:0 1px 6px rgba(0,0,0,.9);white-space:nowrap;
}
.letter-hot:hover .ring{transform:scale(1.1);background:rgba(11,10,8,.62)}
.letter-hot:hover{animation-play-state:paused;opacity:1}
/* 触屏不跑呼吸动画，避免一直闪 */
@media (hover:none){
  .letter-hot{animation:none;opacity:1}
}

/* ───────── 书页 ───────── */
.book{
  position:absolute;inset:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 30%,rgba(70,58,44,.35),transparent 65%),
    linear-gradient(#0B0A08,#070606);
  visibility:hidden;opacity:0;transition:opacity .7s var(--ease),visibility .7s;
}
.book.show{visibility:visible;opacity:1}

.leaf-stack{
  perspective:1800px;perspective-origin:50% 50%;
  width:min(720px,94vw);
}
.leaf{
  transform-origin:left center;
  transition:transform .55s var(--ease),opacity .45s ease;
  will-change:transform,opacity;
}
.leaf.out-next{transform:rotateY(-16deg) translateX(-16%);opacity:0}
.leaf.out-prev{transform:rotateY(16deg) translateX(16%);opacity:0}
.leaf.in-next{animation:inNext .6s var(--ease)}
.leaf.in-prev{animation:inPrev .6s var(--ease)}
@keyframes inNext{from{transform:rotateY(16deg) translateX(16%);opacity:0}to{transform:none;opacity:1}}
@keyframes inPrev{from{transform:rotateY(-16deg) translateX(-16%);opacity:0}to{transform:none;opacity:1}}

.leaf-paper{
  position:relative;width:100%;aspect-ratio:3/4;
  /* 高度兜底：与 aspect-ratio 等价，但旧浏览器也认 */
  height:min(calc(94vw * 1.3333), 74vh);
  max-height:74vh;max-height:74dvh;margin:0 auto;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,rgba(120,104,72,.07) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(120,104,72,.05) 0 1px,transparent 1px 40px),
    radial-gradient(circle at 12% 18%,rgba(120,104,72,.1) 0 1.6px,transparent 1.7px),
    radial-gradient(circle at 62% 32%,rgba(120,104,72,.08) 0 1.3px,transparent 1.4px),
    radial-gradient(circle at 34% 71%,rgba(120,104,72,.09) 0 1.8px,transparent 1.9px),
    radial-gradient(circle at 84% 62%,rgba(120,104,72,.07) 0 1.4px,transparent 1.5px),
    linear-gradient(90deg,rgba(160,142,108,.28) 0 2%,transparent 7%,transparent 93%,rgba(160,142,108,.2) 98%);
  box-shadow:
    0 30px 70px -22px rgba(0,0,0,.75),
    inset 0 0 70px rgba(150,128,92,.2),
    inset 0 2px 4px rgba(255,255,255,.5);
}
/* 版框：四周单边 */
.leaf-paper::before{
  content:"";position:absolute;inset:5.2%;
  border:1px solid rgba(60,52,42,.55);
  box-shadow:0 0 0 3px rgba(235,224,200,.6),0 0 0 4px rgba(60,52,42,.28);
  pointer-events:none;
}
/* 书脊暗部 */
.leaf-edge{
  position:absolute;top:0;bottom:0;right:0;width:9%;
  background:linear-gradient(to left,rgba(60,48,34,.28),transparent);
  pointer-events:none;
}
/* 版心内容（横排）：中缝已去掉，版心左右对称 */
.leaf-frame{
  position:absolute;left:11%;right:11%;top:12.5%;bottom:12.5%;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:18px;overflow:hidden;
}
/* 文字页 */
.v-head{display:flex;flex-direction:column;gap:8px}
.v-no{font-size:12px;letter-spacing:4px;color:var(--cinnabar)}
.v-title{font-size:20px;font-weight:500;letter-spacing:3px;color:var(--ink-ink)}
.rule-v{width:52px;height:2px;background:rgba(178,58,44,.6);flex:0 0 2px}
.v-body{
  font-family:var(--kai);font-size:18px;line-height:2.15;letter-spacing:1.5px;
  color:var(--ink-ink);
  display:flex;flex-direction:column;gap:14px;
}
.v-body p{margin:0}

/* 插图页 */
.plate{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.plate img{
  width:100%;max-height:72%;object-fit:contain;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
}
.plate-cap{font-size:13px;letter-spacing:4px;color:var(--ink-2)}

/* 跋文页 */
.colophon{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  text-align:center;
}
.colophon .co-title{font-size:28px;letter-spacing:8px;font-weight:400}
.colophon .co-body{
  font-family:var(--kai);font-size:18px;line-height:2.3;letter-spacing:2px;
  display:flex;flex-direction:column;gap:6px;
}
.colophon .co-body p{margin:0}
.co-sign{display:flex;flex-direction:row;align-items:center;gap:18px}
.co-sign .sign-name{font-family:var(--kai);font-size:22px;letter-spacing:4px;color:#332C24}

/* 封底 */
.the-end{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
.the-end .end-main{font-size:26px;letter-spacing:10px}
.the-end .end-sub{font-size:14px;letter-spacing:5px;color:var(--ink-3)}

/* 左右翻页箭头 */
.turn{
  position:absolute;top:50%;z-index:14;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(232,222,204,.26);color:rgba(232,222,204,.72);
  background:rgba(11,10,8,.34);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transform:translateY(-50%);
  transition:opacity .3s,border-color .3s,color .3s,background .3s,transform .3s;
}
.turn svg{width:20px;height:20px}
.turn-l{left:32px}
.turn-r{right:32px}
.turn:hover{
  border-color:var(--lamp);color:var(--lamp);background:rgba(11,10,8,.6);
  transform:translateY(-50%) scale(1.08);
}
.turn:focus-visible{outline:1px solid var(--lamp);outline-offset:4px}
.turn[disabled]{opacity:.16;pointer-events:none}

/* 音乐：右上角常驻 */
.music-btn{
  position:fixed;top:28px;right:32px;z-index:60;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(229,200,154,.35);color:var(--lamp);
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,10,8,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color .3s,background .3s,color .3s;
}
.music-btn:hover{border-color:var(--lamp);background:rgba(229,200,154,.12)}
.music-btn svg{width:19px;height:19px}
.music-btn.spin{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ───────── 响应式 ───────── */
@media (max-width:820px){
  .letter-hot{padding:8px 12px}
  .leaf-stack{width:94vw}
  .leaf-paper{max-height:66vh;max-height:66dvh}
  .leaf-frame{left:16%;right:14%}
  .v-body{font-size:17px;line-height:2}
  .v-title{font-size:15px}
  .turn{width:40px;height:40px}
  .turn svg{width:18px;height:18px}
  .turn-l{left:12px}
  .turn-r{right:12px}
  .music-btn{top:18px;right:16px;width:38px;height:38px}
}

/* 竖排修正（保留备用）：vertical-rl 下 flex 的 row 主轴是垂直方向，
   必须用 column 才能让内容沿水平方向从右往左排列。当前正文为横排，此规则无副作用 */
.leaf-frame,.v-head,.v-body,.colophon,.the-end{flex-direction:column}

/* 飘雪：压在最上层，不挡点击 */
.snowfall{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

/* 分页测量用的探针：横排后按高度量，不显示但参与真实排版 */
.v-body.measure{
  position:absolute;top:0;left:0;right:0;
  visibility:hidden;pointer-events:none;gap:0;
}

/* 版心放不下时，自动收字号（JS 检测后打上标记，按高度判断） */
.leaf-paper.tight .v-body{font-size:16px;line-height:1.95;letter-spacing:1px}
.leaf-paper.tighter .v-body{font-size:14px;line-height:1.8;letter-spacing:.5px}
.leaf-paper.tight .v-title{font-size:18px}
.leaf-paper.tighter .v-title{font-size:16px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}