/* ============================================================
   小画册 · 还原纸质速写本质感
   ============================================================ */

/* ZCOOL KuaiLe 的收尾句专用子集，只包含这一句话需要的字形。 */
@font-face{
  font-family:"Child Hand End Line";
  src:url("../fonts/child-hand-end-line.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root{
  --bg:        #f8f7f3;
  --paper:     #f6f3ea;
  --ink:       #3c362e;
  --ink-soft:  #8d8577;
  --accent:    #c0392b;
  --paper-spread: url("../images/tex/video-paper-blank-spread-v5.png?v=20260901f");
  --paper-spread: image-set(
    url("../images/tex/paper-spread-lossless.webp?v=20260901f") type("image/webp"),
    url("../images/tex/video-paper-blank-spread-v5.png?v=20260901f") type("image/png")
  );

  --pw: 407px;   /* 单页宽（JS 按窗口覆盖） */
  --ph: 536px;   /* 单页高 */

  --font-ui:   -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-hand: "Chalkboard SE","Marker Felt","Comic Sans MS","PingFang SC",sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}

/* 以参考视频重新生成的空白跨页：暖白压纹、下方轻微冷影、窄中缝，
   四周保留手工纸自然撕边，不带入视频中的画与字迹。 */
.paper-texture,
.sheet.paper-texture{
  background-color:transparent;
  background-image:var(--paper-spread);
  background-repeat:no-repeat;
  background-size:200% 100%;
}
.page.even .paper-texture{ background-position:left center; }
.page.odd .paper-texture{ background-position:right center; }

/* ---------- 舞台 ---------- */
.stage{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
}

.book-viewport{
  position:relative;
  width:calc(var(--pw) * 2);
  height:var(--ph);
}

@media (min-width:641px){
  .book-viewport{ transform:translateY(-16px); }
}

#book{
  width:100%; height:100%;
  position:relative;
  perspective:2100px;
  transform-style:preserve-3d;
  transition:transform .58s cubic-bezier(.22,.8,.24,1);
}
/* 首尾合上时分别只露右半封面 / 左半封底，并都回到舞台中央。 */
#book.closed{ transform:translateX(calc(var(--pw) / -2)); }
#book.closed-end{ transform:translateX(calc(var(--pw) / 2)); }

/* ---------- 硬纸书页：每张是一块刚性板，正反两面，绕书脊铰链翻转 ---------- */
.leaf{
  position:absolute; top:0; left:var(--pw);
  width:var(--pw); height:var(--ph);
  transform-origin:left center;            /* 铰链在中缝 */
  transform-style:preserve-3d;
  will-change:transform;
}
.leaf.is-peeking{ will-change:transform; }
.leaf-face{
  position:absolute; inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
/* 正面静止朝观众（右手页），反面预转 180°（翻到左手后朝观众）。
   到底显哪一面由 JS 按翻页角度在 90° 处切换 visibility（不依赖 backface 裁剪，
   任何渲染器都不会透出镜像背面）。 */
.leaf-front{ transform:rotateY(0deg); }
.leaf-back { transform:rotateY(180deg); }
.leaf-face .page{ position:relative; width:100%; height:100%; background:transparent; }

/* 翻面时板面迎光角度变化的一层很淡的明暗（铰链侧深、书口侧淡）。
   不用 filter（会压平 3D），只用半透明渐变。 */
.leaf-face::before{
  content:""; position:absolute; inset:0; z-index:6;
  pointer-events:none; opacity:var(--fa,0);
}
.leaf-front::before{
  background:linear-gradient(to left, rgba(38,28,12,.55), rgba(38,28,12,0) 58%);
}
.leaf-back::before{
  background:linear-gradient(to right, rgba(38,28,12,.55), rgba(38,28,12,0) 58%);
}

/* 微翘只使用整页的 3D 抬升与落影。旧的矩形书口高光没有跟随撕边轮廓，
   大屏下会穿帮成白框，因此不再额外绘制伪元素。 */
.leaf-face::after{ content:none; }

/* 硬页投在下面纸页上的落影：一条边清晰的暗带，翻动时最强、随页身移动。
   独立于 3D 页身的一块平板（z 垫在纸下、转动页之下），不会压平透视。 */
.flip-shadow{
  position:absolute; top:0; height:100%;
  z-index:8;                               /* 垫在静止页(≤7)之上、翻动页(9999)之下 */
  background:linear-gradient(to right,
    rgba(48,38,24,.30) 0%,
    rgba(48,38,24,.16) 30%,
    rgba(48,38,24,0) 78%);
  filter:blur(2.5px);
  opacity:0; pointer-events:none;
}
/* 翻页时中缝线装（书脊阴影 + 线结）保持不动——像真科普特裸脊本：
   书页绕书脊翻过去，装订线一直在中缝可见。转动页 z-index 9999，
   扫过书脊时自然压在线装（z 998）之上，故无需把书脊淡出（那会造成
   翻页时中缝“若隐若现”地一闪一灭）。 */

/* 整册投影 */
.book-shadow{
  position:absolute;
  left:8%; right:8%; bottom:-25px;
  height:34px;
  background:radial-gradient(ellipse at center, rgba(70,58,40,.20), transparent 72%);
  filter:blur(12px);
  z-index:0;
  transition:opacity .5s;
}

/* ---------- 书页 ---------- */
.page{
  width:var(--pw);
  height:var(--ph);
  background:transparent;
  overflow:hidden;
}

.sheet{
  position:absolute; inset:0;
  background:var(--paper);
  overflow:hidden;
  isolation:isolate;
}
/* 外圆角：摊开时整书的外侧圆角 */
.page.even .sheet{ border-radius:7px 1px 1px 7px; }
.page.odd  .sheet{ border-radius:1px 7px 7px 1px; }
/* 书页环境光遮蔽：靠书脊处卷进装订的暗角 + 上下纸边轻微变暗 */
.page.even .sheet{ box-shadow:
  inset -28px 0 34px -28px rgba(76,61,40,.18),
  inset 0 9px 18px -16px rgba(74,57,34,.10),
  inset 0 -12px 22px -18px rgba(74,57,34,.13); }
.page.odd .sheet{ box-shadow:
  inset 28px 0 34px -28px rgba(76,61,40,.18),
  inset 0 9px 18px -16px rgba(74,57,34,.10),
  inset 0 -12px 22px -18px rgba(74,57,34,.13); }

/* 极轻的纸齿与边缘纤维，不盖住孩子的画。 */
.sheet.paper::after,
.sheet.paper-texture::after{
  content:""; position:absolute; inset:0; z-index:12; pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,.035),transparent 14%,transparent 86%,rgba(72,65,52,.02));
  mix-blend-mode:multiply;
}

/* 内页直接使用实物纸张底图，画作通过 multiply 融入纸面。
   纸底图已处理为整幅不透明（原本外缘是 RGBA 透明撕边，用户不想要那圈毛边/
   边框，故把纸面铺满到页边），背景色仅作兜底。 */
.sheet.paper{
  background-color:var(--bg);
  background-image:var(--paper-spread);
  background-repeat:no-repeat;
  background-size:200% 100%;
}
/* 底图整幅铺满单页（200% 宽，左页取左半、右页取右半），中缝书脊阴影仍在
   中央；画稿/标题都有内边距，不会越出页边。 */
.page.even .sheet.paper{ background-position:left center; }
.page.odd .sheet.paper{ background-position:right center; }

/* ---------- 书脊（中缝线装） ---------- */
.spine{
  position:absolute; top:0; bottom:0;
  left:50%; width:34px; transform:translateX(-50%);
  z-index:998;
  pointer-events:none;
  opacity:0; transition:opacity .12s ease-out;
  background:
    /* 折脊两侧纸页向下弯去的软影（很淡，在亮脊两旁，不压正中间） */
    linear-gradient(to right,
      transparent 0%,
      rgba(74,57,34,0) 26%, rgba(74,57,34,.12) 39%, rgba(74,57,34,.03) 47%,
      rgba(74,57,34,.03) 53%, rgba(74,57,34,.12) 61%, rgba(74,57,34,0) 74%,
      transparent 100%),
    /* 正中折脊是一丝受光（纸折起来朝光），极淡，不是黑线 */
    linear-gradient(to right,
      transparent 0%,
      rgba(255,253,247,0) 45%, rgba(255,253,247,.22) 50%, rgba(255,253,247,0) 55%,
      transparent 100%);
}
/* 第一次封面尚未落下、从封底重新打开，以及最终封底合上时都不显示针脚，
   避免线装贴图先于纸页出现或贴在合上的书口上。 */
body.is-open:not(.opening-book):not(.closing-book):not(.is-end-closed) .spine{ opacity:1; }
body.opening-book .spine,
body.closing-book .spine,
body.is-end-closed .spine{ opacity:0; transition-duration:.06s; }
/* 科普特（Coptic）裸脊线装——直接用从参考图抠出的真实蜡线贴图
   （images/tex/spine-thread.png，已把纸底抠成透明），竖铺满折脊。
   纯 CSS 画不出照片级的线结，故用真实贴图保证逼真。 */
.spine::before{
  content:""; position:absolute; inset:0;
  background:url("../images/tex/spine-thread.png") center top / auto 100% no-repeat;
  pointer-events:none;
}
/* 贴图已含线结与线位之间的链线；旧的 CSS 占位元素全部停用 */
.spine::after{ content:none; }
.spine .stitch{ display:none; }

/* ---------- 右侧书口：一叠纸的层叠毛边（几乎直、轻微起伏、圆角） ---------- */
.fore-edge{
  position:absolute; top:7px; bottom:8px;
  width:14px; z-index:60;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,.8,.24,1);
  background-color:#f1e9d6;
  background-image:
    /* 一叠纸的水平分层细线（很淡） */
    repeating-linear-gradient(0deg,
      rgba(120,98,60,.08) 0px, rgba(120,98,60,.08) .6px,
      rgba(255,255,255,0) .6px, rgba(255,255,255,0) 3px),
    /* 贴书处厚度阴影，外缘受光偏亮 */
    linear-gradient(to right,
      rgba(96,76,44,.18) 0%,
      rgba(120,100,64,.04) 45%,
      rgba(255,255,255,.35) 100%);
  box-shadow:2px 4px 9px rgba(60,46,25,.08);
  /* 外缘：基本笔直、轻微不规则起伏，上下圆角（一叠纸的自然毛边，非锯齿） */
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='640' viewBox='0 0 13 640'><path d='M0 0 L7 0 Q13 0 13 6 L13 8 L11.77 10 L11.84 21 L11.52 30 L11.54 47 L11.51 65 L11.66 82 L11.88 92 L11.69 102 L11.87 119 L12.02 141 L12.08 153 L12.4 171 L12.04 189 L12.43 198 L12.01 207 L11.74 218 L11.99 229 L11.76 247 L12.13 269 L12.03 279 L11.64 298 L12.0 308 L12.01 318 L11.66 336 L11.98 355 L11.76 376 L12.37 394 L11.75 408 L11.63 429 L11.69 450 L11.75 468 L12.33 484 L11.9 504 L12.43 522 L11.96 532 L12.21 543 L12.38 554 L11.49 569 L11.53 588 L12.02 605 L11.76 627 L13 632 Q13 640 7 640 L0 640 Z' fill='white'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='640' viewBox='0 0 13 640'><path d='M0 0 L7 0 Q13 0 13 6 L13 8 L11.77 10 L11.84 21 L11.52 30 L11.54 47 L11.51 65 L11.66 82 L11.88 92 L11.69 102 L11.87 119 L12.02 141 L12.08 153 L12.4 171 L12.04 189 L12.43 198 L12.01 207 L11.74 218 L11.99 229 L11.76 247 L12.13 269 L12.03 279 L11.64 298 L12.0 308 L12.01 318 L11.66 336 L11.98 355 L11.76 376 L12.37 394 L11.75 408 L11.63 429 L11.69 450 L11.75 468 L12.33 484 L11.9 504 L12.43 522 L11.96 532 L12.21 543 L12.38 554 L11.49 569 L11.53 588 L12.02 605 L11.76 627 L13 632 Q13 640 7 640 L0 640 Z' fill='white'/></svg>");
  -webkit-mask-size:12px 100%;
  mask-size:12px 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
/* 新纸张素材自身已有真实撕边；旧的程序纸叠会在外缘重复出两三层，停用。 */
.fore-edge{ display:none; }
.fore-edge-right{ right:-11px; transform-origin:left center; }
.fore-edge-left{
  left:-11px;
  transform:scaleX(-1);
  transform-origin:center;
  box-shadow:-2px 4px 9px rgba(60,46,25,.08);
}
body.is-open .fore-edge-right{ opacity:var(--right-edge-opacity,.58); }
body.is-open .fore-edge-left{ opacity:var(--left-edge-opacity,.38); }

/* ---------- 点击翻页层 ---------- */
.click-layer{
  position:absolute; inset:0; z-index:2000;
  display:flex;
}
/* 左右两半整面都可点（点哪都行），不显示固定的圆点按钮 */
.click-layer .zone{
  flex:1; cursor:pointer; touch-action:manipulation;
}
/* 翻开后左右两半仍是「点击翻页」，用手型指针表示可点；
   不用 w-resize/e-resize（左右双向箭头像拖拽调整大小，会让人误以为要拖动）。 */
body.is-open .click-layer .zone-left,
body.is-open .click-layer .zone-right{ cursor:pointer; }

/* ---------- 内页：画作 ---------- */
.page-art{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:30px 30px 20px;
}
.art-mat{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px 4px;
}
/* 画稿是白纸上的画：用 multiply 让白纸变透明、纸纹从画后透出来，
   就像直接画在这页压纹纸上（照片/扫描件需为白底，处理脚本已保证）。 */
.art-mat img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:saturate(.98) contrast(1.015);
}
.page-caption{
  padding-top:16px; text-align:center; min-height:56px;
}
.page-caption .cap-title{
  font-family:var(--font-hand);
  font-size:clamp(10px,1.55vw,14px); font-weight:700; color:var(--ink);
  letter-spacing:.4px; white-space:nowrap;
}
.page-caption .cap-meta{
  font-size:13px; color:var(--ink-soft); margin-top:4px; letter-spacing:1px;
}
.page-number{
  position:absolute; bottom:9px;
  font-size:8px; color:#968c79; letter-spacing:.4px;
  /* 纸色淡光晕：把页码从书脊折痕的暗纹里“托”出来，保持淡灰质感 */
  text-shadow:0 0 1px rgba(245,242,235,.98), 0 0 2.5px rgba(245,242,235,.75);
  z-index:3;
}
.page.even .page-number{ right:16px; }
.page.odd  .page-number{ left:16px; }

/* ---------- 横版跨页：一张宽图横跨左右两页，在中缝相接 ----------
   .spread-mat 在左右页各占一个面；里面的 <img> 宽 200%（按整个跨页两页宽
   排版），左页只露出左半、右页只露出右半，两半在书脊处严丝合缝。
   机制与纸张底图 --paper-spread 的 200% 定位一致。 */
.spread-mat{
  position:absolute; z-index:2;
  top:24px; bottom:50px;
  overflow:hidden;
}
.page.even .sheet.spread .spread-mat{ left:20px; right:0; }   /* 左页：铺到中缝(右) */
.page.odd  .sheet.spread .spread-mat{ left:0; right:20px; }   /* 右页：铺到中缝(左) */
.spread-mat img{
  position:absolute; top:0; height:100%;
  width:200%;                 /* 图按整跨页(两页宽)排版 */
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:saturate(.98) contrast(1.015);
  user-select:none; -webkit-user-drag:none;
}
.page.even .sheet.spread .spread-mat img{ left:0; }    /* 左页显示左半 */
.page.odd  .sheet.spread .spread-mat img{ right:0; }   /* 右页显示右半 */
/* 标题只放在右页下半部预留的纸边里（左右 mat 等高，故两半依旧对齐） */
.spread-caption{
  position:absolute; left:14px; right:14px; bottom:8px; z-index:5;
  padding:0; min-height:0; text-align:center; pointer-events:none;
}
.spread-caption .cap-title{ font-size:clamp(10px,1.55vw,14px); }
.spread-caption .cap-meta{ margin-top:2px; }
.page.odd .sheet.spread .page-number{ bottom:10px; }

/* ---------- 扉页 ---------- */
.sheet.title-page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:40px;
  background-color:var(--bg);
  background-image:var(--paper-spread);
  background-size:200% 100%;
}
.page.even .sheet.title-page{ background-position:left center; }
.page.odd .sheet.title-page{ background-position:right center; }
.titlepage-emoji{ font-size:30px; letter-spacing:12px; }
.titlepage-kicker{ font-size:13px; letter-spacing:6px; color:var(--ink-soft); }
.titlepage-name{
  font-family:var(--font-hand);
  font-size:44px; font-weight:800; color:var(--accent); line-height:1.2;
}
.titlepage-rule{ width:110px; border-top:2px dashed #cfc5b2; margin:4px 0; }
.titlepage-sub{ font-size:15px; color:var(--ink-soft); line-height:1.9; }

/* ---------- 尾页 ---------- */
.sheet.end-page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:40px;
  background-color:var(--bg);
  background-image:var(--paper-spread);
  background-size:200% 100%;
}
.page.even .sheet.end-page{ background-position:left center; }
.page.odd .sheet.end-page{ background-position:right center; }
.sheet.end-page .end-line{
  max-width:100%;
  font-family:"Child Hand End Line","Wawati SC","HanziPen SC",var(--font-hand);
  font-size:27px; font-weight:400; color:#766b59;
  letter-spacing:1px; line-height:1.9; text-align:center;
  padding:0 24px;
  font-synthesis:none;
}
.sheet.end-page .hand-char{
  display:inline-block;
  transform-origin:center 80%;
}
.sheet.end-page .hand-char:nth-child(4n+1){ transform:rotate(-3deg) translateY(1px); }
.sheet.end-page .hand-char:nth-child(4n+2){ transform:rotate(2deg) translateY(-2px); }
.sheet.end-page .hand-char:nth-child(4n+3){ transform:rotate(-1deg) translateY(2px); }
.sheet.end-page .hand-char:nth-child(4n){ transform:rotate(3deg) translateY(-1px); }

/* ============================================================
   童真布面硬壳封面
   ============================================================ */
.sheet.cover{
  border-radius:10px;
  background:#f3d8c7;
  box-shadow:
    inset -11px 0 24px rgba(105,71,59,.20),
    inset 0 0 0 2px rgba(255,255,255,.18),
    inset 0 -12px 26px rgba(38,52,64,.15),
    0 8px 18px rgba(48,57,61,.12);
  display:flex; align-items:center; justify-content:center;
}
.cover-art{
  position:absolute;
  left:-4%; top:-2%; width:108%; height:104%;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
}
.cover-inner{
  position:relative; z-index:2;
  width:100%;
  text-align:center;
  align-self:flex-start;
  margin-top:13%;
  padding:30px 28px;
}
.cover-title{
  display:flex; align-items:center; justify-content:center;
  gap:2px;
  font-family:"Kaiti SC","STKaiti","Yuanti SC",var(--font-hand);
  font-size:43px; font-weight:700; line-height:1.2;
  letter-spacing:0;
  text-shadow:0 1px 0 rgba(255,255,255,.76), 0 2px 7px rgba(18,71,121,.16);
}
.cover-char{ display:inline-block; }
.cover-char:nth-child(1){ transform:rotate(-3deg) translateY(2px); }
.cover-char:nth-child(2){ transform:rotate(2deg) translateY(-2px); }
.cover-char:nth-child(3){ transform:rotate(-1deg) translateY(1px); }
.cover-char:nth-child(4){ transform:rotate(2.5deg) translateY(-1px); }
.cover-char:nth-child(5){ transform:rotate(-2deg) translateY(2px); }
.cover-char.tone-0{ color:#c1534d; }
.cover-char.tone-1{ color:#b47a24; }
.cover-char.tone-2{ color:#527d5c; }
.cover-char.tone-3{ color:#487897; }
.cover-char.tone-4{ color:#a75c73; }
/* 封面内侧（翻开后看到的素色内封） */
.sheet.cover-inside{
  background-color:var(--bg);
  background-image:var(--paper-spread);
  background-size:200% 100%;
  box-shadow:inset 0 0 40px rgba(120,95,55,.15);
}
.page.even .sheet.cover-inside{ background-position:left center; }
.page.odd .sheet.cover-inside{ background-position:right center; }
/* 封底内侧/封底 */
.sheet.backcover{
  border-radius:10px;
  background:#f3d8c7;
  box-shadow:inset 11px 0 24px rgba(105,71,59,.20), inset 0 0 0 2px rgba(255,255,255,.16);
}
.sheet.backcover::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:rgba(190,119,102,.16);
  pointer-events:none;
}
.cover-art-back{
  filter:saturate(.72) brightness(.88);
  transform:scale(1.04);
}

/* 首屏只加载封面。纸张纹理在封面完成后或用户准备翻页时再启用。 */
body:not(.paper-ready) .paper-texture,
body:not(.paper-ready) .sheet.paper,
body:not(.paper-ready) .sheet.title-page,
body:not(.paper-ready) .sheet.end-page,
body:not(.paper-ready) .sheet.cover-inside{
  background-image:none;
}

/* turn.js 硬壳页边缘（书页厚度感） */
.page.hard .sheet.cover::after{
  content:""; position:absolute; top:4px; bottom:4px; right:0; width:10px;
  background:repeating-linear-gradient(to right,#d8d0bc 0 1.4px,#b9ad96 1.4px 2.8px);
  box-shadow:inset 2px 0 4px rgba(0,0,0,.18);
  border-radius:0 6px 6px 0;
}

/* ---------- 返回按钮 ---------- */
.back-btn{
  position:fixed; top:26px; left:26px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.8);
  color:#8d8577;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:80;
  opacity:0; pointer-events:none; transition:opacity .4s, transform .2s, color .2s;
  backdrop-filter:blur(4px);
}
body.is-open .back-btn{ opacity:1; pointer-events:auto; }
.back-btn:hover{ color:var(--ink); transform:translateX(-3px); }

/* ---------- 打开提示 ---------- */
.open-hint{
  position:fixed; top:calc(50% + var(--ph-half, 268px) + 22px); bottom:auto;
  left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  color:#9a9183; font-size:15px; z-index:40;
  transition:opacity .4s;
}
.open-hint .hint-dot{
  width:10px; height:10px; border-radius:50%;
  background:#c9c0b0; animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:.7} 50%{transform:scale(1.5);opacity:1} }
body.is-open .open-hint{ opacity:0; pointer-events:none; }

.back-btn:focus-visible{
  outline:2px solid rgba(52,104,180,.72);
  outline-offset:3px;
}

/* ---------- 手机 ---------- */
@media (max-width:640px){
  .cover-inner{ padding:16px; }
  .cover-title{ font-size:23px; gap:1px; }
  .sheet.title-page{ gap:7px; padding:16px; }
  .titlepage-emoji{ font-size:17px; letter-spacing:4px; }
  .titlepage-kicker{ font-size:9px; letter-spacing:2px; }
  .titlepage-name{ font-size:23px; }
  .titlepage-rule{ width:58px; }
  .titlepage-sub{ font-size:9px; line-height:1.5; }
  .page-art{ padding:11px 10px 8px; }
  .art-mat{ padding:3px 4px 0; }
  .page-caption{ padding-top:5px; min-height:28px; }
  .page-caption .cap-title{ font-size:9px; letter-spacing:0; }
  .page-caption .cap-meta{ font-size:7.5px; margin-top:1px; letter-spacing:0; }
  .spread-caption .cap-title{ font-size:9px; }
  .spread-caption .cap-meta{ font-size:7.5px; }
  .page-number{ bottom:4px; font-size:5.5px; letter-spacing:0; }
  .page.even .page-number{ right:22px; }
  .page.odd .page-number{ left:22px; }
  /* 尾页：手机上不用儿童手写体、不歪扭，普通字体小小一行居中 */
  .sheet.end-page{ gap:8px; padding:10px; }
  .sheet.end-page .end-line{
    font-family:var(--font-ui);
    font-size:11px; font-weight:400; line-height:1.5;
    letter-spacing:.5px; color:#9a9183;
    padding:0; white-space:nowrap;
  }
  .sheet.end-page .hand-char{ transform:none !important; }
}

@media (prefers-reduced-motion:reduce){
  #book,.spine,.fore-edge,.open-hint,.back-btn{ transition-duration:.12s !important; }
  .hint-dot{ animation:none !important; }
}