/* ============================================================
   C’est la vie. · 实体手账（V1）
   目标：手机竖屏打开像在操作一本真实制作的手工纪念册。
   ============================================================ */

:root {
  --paper: #f2e8d6;
  --paper-2: #ece0ca;
  --paper-3: #e3d5bb;
  --ink: #2b2419;
  --ink-soft: #5b4f3d;
  --ink-faint: #8a7c65;
  --red: #a5342a;
  --red-2: #8d2a22;
  --green: #2f4436;
  --green-2: #24362a;
  --blue: #2b3a56;
  --gold: #b08a3e;
  --tape: rgba(226, 205, 160, .55);

  --f-serif: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --f-hand: "Hannotate SC", "HanziPen SC", "Kaiti SC", "STKaiti", "KaiTi", cursive;
  --f-sans: "PingFang SC", "Hiragino Sans GB", -apple-system, "Segoe UI", sans-serif;

  --sheet-w: min(calc(100vw - 24px), 358px);
  --sheet-h: calc(var(--sheet-w) / 0.702);
  --spine-w: 17px;
  --page-pad: 20px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #2a2119;
  overscroll-behavior: none;
}

body {
  font-family: var(--f-serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.app {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------------- 桌面环境 ---------------- */
.desk {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, #6a5237 0%, #4a3726 38%, #30251a 72%, #201811 100%);
}
.desk-grain {
  position: absolute; inset: 0;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.6' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23w)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.desk-lamp {
  position: absolute; left: 50%; top: -6%;
  width: 150%; height: 80%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 226, 168, .30), rgba(255, 214, 150, .08) 55%, transparent 72%);
  pointer-events: none;
}
.desk-stain {
  position: absolute; right: -30px; bottom: 6%;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 34, 16, .40), rgba(60, 34, 16, .12) 62%, transparent 74%);
  filter: blur(2px);
  opacity: .8;
}

/* ---------------- 顶部 HUD ---------------- */
.hud {
  position: relative; z-index: 40;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  pointer-events: none;
  flex: 0 0 auto;
}
.hud-title { display: flex; flex-direction: column; gap: 3px; }
.hud-mark {
  font-family: var(--f-serif);
  font-size: 14px; letter-spacing: .06em;
  color: rgba(244, 232, 210, .92);
}
.hud-sub {
  font-family: var(--f-sans);
  font-size: 10px; letter-spacing: .16em;
  color: rgba(228, 210, 182, .52);
}
.hud-actions { pointer-events: auto; }

.mus {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px 0 9px;
  border-radius: 15px;
  border: 1px solid rgba(240, 224, 198, .22);
  background: rgba(38, 28, 20, .45);
  color: rgba(244, 232, 210, .82);
  font-family: var(--f-sans); font-size: 10.5px; letter-spacing: .06em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, color .25s;
}
.mus.is-playing { border-color: rgba(240, 208, 140, .5); color: #f6e3bb; }
.mus .slash { opacity: 1; transition: opacity .2s; }
.mus.is-playing .slash { opacity: 0; }
.mus .wave, .mus .wave2 { opacity: 0; transition: opacity .2s; }
.mus.is-playing .wave { opacity: 1; }
.mus.is-playing .wave2 { opacity: .55; }

/* ---------------- 书 ---------------- */
.book-wrap {
  position: relative; z-index: 20;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0 4px;
  perspective: 1900px;
  perspective-origin: 62% 48%;
}

.book {
  position: relative;
  width: var(--sheet-w);
  height: var(--sheet-h);
  transform-style: preserve-3d;
  /* 关键：静态 3D 倾斜会让 perspective 内元素的 getBoundingClientRect 与实际绘制错位，
     导致机关点击命中偏移（实测可达 80px+）。视觉倾斜改用 2D 阴影/边缘表现，
     仅保留翻页时的 3D 变换，保证点击坐标可信。 */
  transform: none;
}
.book.is-open { transform: none; }

/* 书体：书脊 + 纸叠厚度 */
.book-body { position: absolute; inset: 0; transform-style: preserve-3d; }

.spine {
  position: absolute; left: calc(-1 * var(--spine-w)); top: 3px; bottom: 3px;
  width: var(--spine-w);
  border-radius: 6px 2px 2px 6px;
  background: linear-gradient(90deg, #1b2a20 0%, #2c4033 42%, #1f3025 100%);
  box-shadow:
    inset -3px 0 5px rgba(0, 0, 0, .55),
    inset 2px 0 3px rgba(255, 240, 210, .10),
    -2px 2px 6px rgba(0, 0, 0, .45);
  z-index: 1;
}
.spine-band {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(180, 148, 90, .18), rgba(200, 170, 110, .38), rgba(180, 148, 90, .16));
}
.spine-band:first-child { top: 16%; }
.spine-band.b2 { bottom: 16%; }
.spine-stitch {
  position: absolute; left: 5px; top: 20%; bottom: 20%; width: 1px;
  background: repeating-linear-gradient(180deg, rgba(226, 200, 154, .38) 0 5px, transparent 5px 13px);
}

.edge-left {
  position: absolute; left: -2px; top: 0; bottom: 0; width: 12px;
  background: linear-gradient(90deg, rgba(0,0,0,.30), rgba(0,0,0,0));
  z-index: 2; pointer-events: none;
}
.edge-right {
  position: absolute; right: -9px; top: 4px; bottom: 4px; width: 9px;
  display: flex; flex-direction: column; gap: 1px;
  z-index: 2; pointer-events: none;
}
.edge-right i {
  flex: 1;
  background: linear-gradient(90deg, #e7dcc6, #d9cbb0);
  border-radius: 0 1px 1px 0;
  box-shadow: 1px 0 0 rgba(255,255,255,.35), 2px 1px 2px rgba(0,0,0,.22);
  opacity: .92;
}
.edge-right i:nth-child(odd) { filter: brightness(.96); }
.edge-bottom {
  position: absolute; left: 3px; right: 3px; bottom: -7px; height: 7px;
  background: linear-gradient(180deg, #e6dac4, #cfc0a4);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
  z-index: 2; pointer-events: none;
}
.edge-bottom::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(120,100,72,.30) 0 1px, transparent 1px 3px);
  opacity: .5;
}

/* ---------------- 页面 ---------------- */
.leaves { position: absolute; inset: 0; transform-style: preserve-3d; z-index: 10; }

.leaf {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform .88s cubic-bezier(.36, .06, .28, 1);
  will-change: transform;
}
.leaf.flipped { transform: rotateY(-177deg); }
.leaf.gone { visibility: hidden; }

.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 1px 4px 4px 1px;
}
.face.front {
  background-color: var(--paper);
  background-image:
    radial-gradient(140% 90% at 12% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 58%),
    radial-gradient(90% 70% at 100% 100%, rgba(150,124,84,.16), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");
  box-shadow:
    inset 14px 0 22px -14px rgba(74, 52, 28, .55),
    inset -8px 0 18px -14px rgba(74, 52, 28, .32),
    inset 0 10px 20px -16px rgba(74, 52, 28, .30),
    inset 0 -14px 22px -18px rgba(74, 52, 28, .34),
    0 1px 2px rgba(0,0,0,.16);
}
.face.back {
  transform: rotateY(180deg);
  background-color: #e8dcc6;
  background-image:
    radial-gradient(120% 90% at 88% 0%, rgba(255,255,255,.5), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='q'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.13'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23q)'/%3E%3C/svg%3E");
  box-shadow: inset -14px 0 22px -14px rgba(74,52,28,.5);
}
.face.back .back-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-sans); font-size: 10px; letter-spacing: .3em;
  color: rgba(90, 72, 48, .30);
  writing-mode: vertical-rl;
}
.face.back .back-title {
  position: absolute; right: 18px; bottom: 30px;
  font-family: var(--f-serif); font-size: 11px;
  color: rgba(90, 72, 48, .34);
  writing-mode: vertical-rl;
  letter-spacing: .1em;
}

/* 翻页阴影 */
.leaf::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(38, 24, 10, .48) 0%, rgba(38, 24, 10, .12) 16%, transparent 46%);
  opacity: 0;
  transition: opacity .88s cubic-bezier(.36, .06, .28, 1);
  z-index: 3;
}
.leaf.flipping::after { opacity: 1; }

/* ---------------- 纸张内部排版 ---------------- */
.sheet {
  position: absolute; inset: 0;
  padding: 22px var(--page-pad) 24px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sheet > * { position: relative; }

.page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  flex: 0 0 auto;
}
.kicker {
  font-family: var(--f-sans);
  font-size: 8.5px; letter-spacing: .22em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.pnum {
  font-family: var(--f-sans);
  font-size: 8.5px; letter-spacing: .1em;
  color: rgba(120, 104, 78, .55);
}

h1.page-title {
  font-family: var(--f-serif);
  font-size: 20px; font-weight: 600;
  line-height: 1.32;
  letter-spacing: .01em;
  margin: 8px 0 3px;
  color: var(--ink);
}
.hand { font-family: var(--f-hand); }
.hand.big { font-size: 17px; line-height: 1.5; }

.lead {
  font-family: var(--f-sans);
  font-size: 10.5px; line-height: 1.65;
  color: var(--ink-soft);
  margin: 4px 0 0;
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(90,72,46,.28), rgba(90,72,46,.06));
  margin: 10px 0 8px;
  flex: 0 0 auto;
}
.rule.dotted {
  height: 0; border: 0;
  border-top: 1px dashed rgba(90,72,46,.24);
  background: none;
}

/* 聊天行：手账里的抄写 */
.chat {
  display: flex; flex-direction: column; gap: 5px;
  margin: 6px 0 0;
}
.chat-row {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 11.5px; line-height: 1.5;
}
.chat-row .who {
  flex: 0 0 auto;
  font-family: var(--f-sans); font-size: 8.5px;
  color: var(--ink-faint);
  padding-top: 3px;
  min-width: 15px;
}
.chat-row .txt {
  flex: 1 1 auto;
  font-family: var(--f-serif);
  color: var(--ink);
  word-break: break-word;
}
.chat-row.him .txt { color: #33404f; }
.chat-row.her .txt { color: #6b3140; }
.chat-row.punch .txt {
  font-family: var(--f-hand);
  font-size: 14px;
  color: var(--red-2);
}
.chat-row .at {
  flex: 0 0 auto;
  font-family: var(--f-sans); font-size: 7.5px;
  color: rgba(120,104,78,.5);
  padding-top: 5px;
}

/* 胶带 */
.tape-strip {
  position: absolute;
  width: 58px; height: 17px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
    var(--tape);
  border-left: 1px solid rgba(255,255,255,.28);
  border-right: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 1px 2px rgba(80,58,30,.18);
  opacity: .92;
  z-index: 6;
  pointer-events: none;
}
.tape-strip::before, .tape-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,.4) 2px 3px);
}
.tape-strip::before { left: -1px; }
.tape-strip::after { right: -1px; }

/* 拍立得 */
.polaroid {
  position: relative;
  background: linear-gradient(180deg, #fdfaf2, #f6f0e2);
  padding: 6px 6px 24px;
  box-shadow:
    0 1px 1px rgba(60, 42, 22, .18),
    0 6px 14px -6px rgba(50, 34, 16, .45);
  border-radius: 1px;
}
.polaroid img { display: block; width: 100%; height: auto; background: #d8cdb8; }
.polaroid .cap {
  position: absolute; left: 0; right: 0; bottom: 4px;
  text-align: center;
  font-family: var(--f-hand); font-size: 10.5px;
  color: rgba(58, 46, 30, .8);
}

/* 印章 */
.stamp {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 10px;
  border: 2px solid var(--red);
  color: var(--red);
  font-family: var(--f-serif);
  font-size: 12px; letter-spacing: .18em;
  transform: rotate(-7deg);
  opacity: .78;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(165, 52, 42, .35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23s)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* 便签 */
.sticky {
  background: linear-gradient(178deg, #f4e39b, #eed88b);
  padding: 12px 12px 14px;
  box-shadow: 2px 3px 8px -3px rgba(60, 44, 20, .45);
  transform: rotate(-1.1deg);
  font-family: var(--f-hand);
  font-size: 13px; line-height: 1.65;
  color: #4a3a1c;
  position: relative;
}
.sticky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: linear-gradient(180deg, transparent, rgba(120, 90, 30, .12));
}

/* 信封 */
.envelope {
  position: relative;
  background: linear-gradient(160deg, #e8dcc2, #ddcfb2);
  box-shadow: 0 3px 10px -4px rgba(60, 42, 22, .5);
  border-radius: 2px;
}
.envelope .flap {
  position: absolute; left: 0; right: 0; top: 0; height: 46%;
  background: linear-gradient(180deg, #e2d4b8, #d6c6a6);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: 1px solid rgba(120, 98, 62, .25);
  transition: transform .7s cubic-bezier(.3,.8,.2,1);
  transform-origin: top center;
  z-index: 3;
}
.envelope.open .flap { transform: rotateX(-168deg); }
.wax {
  position: absolute; left: 50%; top: 40%;
  width: 26px; height: 26px; margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #b8483a, #8d2a22 62%, #6d1d18);
  box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 -1px 2px rgba(0,0,0,.3);
  z-index: 5;
  transition: opacity .35s, transform .35s;
}
.wax::after {
  content: "C"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-size: 13px; color: rgba(255, 226, 200, .62);
}
.envelope.open .wax { opacity: 0; transform: scale(.7); }

/* 小票 */
.receipt-paper {
  background:
    linear-gradient(180deg, #fbf7ec, #f4edda);
  box-shadow: 0 3px 12px -4px rgba(50, 36, 18, .5);
  font-family: var(--f-sans);
  color: #3b3226;
  position: relative;
}
.receipt-paper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background:
    radial-gradient(circle at 3px 0, transparent 3px, #f4edda 3px) 0 0 / 7px 6px repeat-x;
}

/* 通用小字 */
.foot {
  font-family: var(--f-sans);
  font-size: 8px; line-height: 1.6;
  color: rgba(116, 100, 74, .68);
  margin-top: auto;
  padding-top: 8px;
}
.foot b { font-weight: 600; color: rgba(96, 80, 56, .8); }
.src {
  font-family: var(--f-sans);
  font-size: 7px; line-height: 1.5;
  color: rgba(130, 114, 88, .55);
  margin-top: 3px;
  letter-spacing: .01em;
}

/* 小标签 */
.tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 8px; letter-spacing: .12em;
  padding: 2px 6px;
  border: 1px solid rgba(110, 92, 64, .35);
  color: rgba(96, 80, 56, .8);
  border-radius: 1px;
}
.tag.pending { border-color: rgba(165, 52, 42, .45); color: var(--red); }

/* ---------------- 封面 ---------------- */
.cover {
  position: absolute; inset: -3px -4px -4px -3px;
  z-index: 30;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.42, .02, .22, 1), box-shadow .6s;
  cursor: pointer;
  border-radius: 3px 5px 5px 3px;
  box-shadow:
    0 2px 3px rgba(0,0,0,.28),
    0 18px 34px -12px rgba(0,0,0,.62),
    0 44px 60px -30px rgba(0,0,0,.55);
}
.book.is-open .cover {
  transform: rotateY(-172deg) translateZ(1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  pointer-events: none;
}
.cover-cloth {
  position: absolute; inset: 0;
  border-radius: 3px 5px 5px 3px;
  background:
    radial-gradient(120% 100% at 18% 0%, rgba(96, 132, 106, .55), transparent 52%),
    linear-gradient(155deg, #3a5140 0%, #2f4436 44%, #24362a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(200, 226, 198, .10),
    inset -12px 0 26px -18px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(220, 240, 216, .12);
}
.cover-cloth::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5 0.9' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.22'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23c)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.cover-plate {
  position: absolute; left: 26px; right: 26px; top: 74px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(200, 172, 108, .5), rgba(140, 116, 68, .28));
  box-shadow: 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 1px rgba(30, 44, 34, .5);
}
.plate-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 9px;
  padding: 20px 12px 18px;
  border: 1px solid rgba(190, 164, 104, .26);
  background: linear-gradient(165deg, rgba(30, 44, 34, .55), rgba(24, 36, 28, .8));
  box-shadow: inset 0 0 18px rgba(0,0,0,.35);
}
.plate-brand {
  font-family: var(--f-serif);
  font-size: 19px; letter-spacing: .05em;
  color: #d9c79b;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.plate-rule {
  width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 170, 108, .7), transparent);
}
.plate-title {
  font-family: var(--f-serif);
  font-size: 10.5px; letter-spacing: .3em;
  color: rgba(218, 200, 162, .78);
  text-indent: .3em;
}
.plate-note {
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .26em;
  color: rgba(190, 168, 126, .5);
  text-indent: .26em;
}
.cover-label {
  position: absolute; left: 26px; bottom: 48px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 9px 11px;
  background: linear-gradient(170deg, #efe3c8, #e2d2b0);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transform: rotate(-1.6deg);
}
.cover-label span {
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .14em;
  color: #5a4a30;
}
.cover-label .hand { font-size: 14px; letter-spacing: .05em; color: #3a2e1c; }
.elastic {
  position: absolute; left: -4px; right: -4px; top: 62%;
  height: 7px;
  background: linear-gradient(180deg, #1a1a1c, #2e2e32 40%, #16161a);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  opacity: .92;
}
.cover-corner {
  position: absolute; right: -2px; bottom: -2px;
  width: 34px; height: 34px;
  background: linear-gradient(135deg, transparent 47%, #1e2e23 48%, #16241b 100%);
  border-radius: 0 0 5px 0;
  box-shadow: -1px -1px 3px rgba(0,0,0,.3);
}
.open-hint {
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center;
  font-family: var(--f-sans); font-size: 9.5px; letter-spacing: .2em;
  color: rgba(226, 208, 172, .55);
  animation: breathe 2.8s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity: .45; } 50% { opacity: .9; } }

/* 封面内侧 */
.inside-cover {
  position: absolute; inset: 0;
  z-index: 8;
  background:
    radial-gradient(120% 90% at 80% 0%, #efe5d0, #e4d6bc 70%, #d9c9ab);
  box-shadow: inset 0 0 0 1px rgba(120, 98, 62, .18), inset 12px 0 24px -18px rgba(70,48,24,.6);
  opacity: 0;
  transition: opacity .5s .3s;
  padding: 22px 18px;
}
.book.is-open .inside-cover { opacity: 1; }
.pocket {
  position: relative; height: 100%;
  border: 1px dashed rgba(120, 98, 62, .35);
  border-radius: 2px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
}
.pocket-card {
  background: #f7efdc;
  padding: 12px;
  box-shadow: 0 2px 6px -2px rgba(60,42,22,.4);
  transform: rotate(.8deg);
}
.pocket-photo {
  align-self: flex-end;
  width: 92px;
  background: #fdfaf2;
  padding: 5px 5px 20px;
  box-shadow: 0 4px 10px -4px rgba(60,42,22,.5);
  transform: rotate(-2.4deg);
  position: relative;
}
.pocket-photo img { display: block; width: 100%; height: auto; }
.pocket-photo .hand {
  position: absolute; left: 0; right: 0; bottom: 3px;
  text-align: center; font-size: 9.5px; color: #4a3a22;
}

/* ---------------- 底部 ---------------- */
.dock {
  position: relative; z-index: 40;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 6px 22px calc(env(safe-area-inset-bottom, 0px) + 14px);
}
.nav-btn {
  width: 40px; height: 34px;
  display: grid; place-items: center;
  border: 0; border-radius: 17px;
  background: rgba(40, 30, 20, .40);
  color: rgba(240, 226, 202, .82);
  border: 1px solid rgba(240, 224, 198, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .2s, transform .2s, background .2s;
}
.nav-btn:active { transform: scale(.94); background: rgba(60, 44, 28, .6); }
.nav-btn:disabled { opacity: .28; }
.pager {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  white-space: nowrap; overflow: hidden;
  font-family: var(--f-sans);
  font-size: 9px; letter-spacing: .1em;
  color: rgba(236, 220, 194, .62);
}
.pager-bar {
  flex: 1 1 auto; height: 1px;
  background: rgba(236, 220, 194, .18);
  position: relative;
}
.pager-bar i {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%; background: rgba(226, 196, 138, .72);
  transition: width .5s cubic-bezier(.3,.8,.2,1);
}
.toc-link {
  flex: 0 0 auto;
  border: 0; background: none; padding: 4px 2px;
  font-family: var(--f-sans); font-size: 9px; letter-spacing: .14em;
  color: rgba(226, 196, 138, .82);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(226, 196, 138, .35);
}

.edge-hit {
  position: fixed; top: 96px; bottom: 76px; width: 24px;
  z-index: 35;
  border: 0; background: transparent;
  padding: 0;
}
.edge-hit.left { left: 0; }
.edge-hit.right { right: 0; }
.edge-hit:disabled { pointer-events: none; }

/* ---------------- 页面专属 ---------------- */
/* 扉页 */
.title-page {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  padding-top: 8px;
  text-align: center;
}
.title-page .tp-brand {
  font-family: var(--f-serif);
  font-size: 25px; letter-spacing: .04em;
  color: #2f3b2c;
  margin-top: 10px;
}
.title-page .tp-line {
  width: 42px; height: 1px; margin: 12px 0;
  background: linear-gradient(90deg, transparent, rgba(90,72,46,.5), transparent);
}
.title-page .tp-sub {
  font-family: var(--f-sans); font-size: 10px; letter-spacing: .34em;
  color: rgba(90, 76, 54, .7);
  text-indent: .34em;
}
.title-page .tp-photo {
  margin-top: 16px;
  width: 150px;
  transform: rotate(-1.8deg);
}
.title-page .tp-hand {
  margin-top: 12px;
  font-family: var(--f-hand);
  font-size: 13px; line-height: 1.7;
  color: rgba(74, 58, 36, .82);
}
.title-page .tp-meta {
  margin-top: auto;
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .18em;
  color: rgba(120, 104, 78, .6);
  padding-bottom: 4px;
}

/* 目录 */
.toc-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column;
  gap: 0;
  overflow: hidden;
  flex: 1 1 auto;
}
.toc-item {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5.5px 0;
  border-bottom: 1px dotted rgba(110, 92, 64, .22);
  font-size: 11px;
  line-height: 1.3;
  cursor: pointer;
}
.toc-item:last-child { border-bottom: 0; }
.toc-item .ti-n {
  font-family: var(--f-sans); font-size: 8px;
  color: rgba(120,104,78,.55);
  width: 15px; flex: 0 0 auto;
}
.toc-item .ti-t {
  flex: 1 1 auto;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toc-item .ti-p {
  font-family: var(--f-sans); font-size: 8px;
  color: rgba(120,104,78,.5);
}
.toc-item.pending .ti-t { color: #8d4b44; }
.toc-item:active { background: rgba(120, 98, 62, .08); }

/* 卷宗（牛） */
.case-file {
  background: #e9dcc0;
  border: 1px solid rgba(110, 88, 52, .35);
  box-shadow: 0 3px 10px -4px rgba(60,42,22,.5);
  padding: 10px 10px 12px;
  position: relative;
}
.case-file::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 22px;
  background: #dccaa6;
  border-bottom: 1px solid rgba(110,88,52,.3);
}
.case-file .cf-head {
  position: relative; z-index: 2;
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .2em;
  color: #6a5432;
  display: flex; justify-content: space-between;
  margin-bottom: 14px;
}
.exhibit {
  display: flex; gap: 9px; align-items: flex-start;
}
.exhibit img {
  width: 66px; height: 66px; object-fit: cover;
  border: 1px solid rgba(80,60,34,.3);
  background: #cbbfa6;
  flex: 0 0 auto;
}
.exhibit .ex-body { flex: 1 1 auto; }
.ex-body .ex-t {
  font-family: var(--f-serif); font-size: 11.5px; line-height: 1.5;
  color: #33291a;
}
.ex-body .ex-n {
  font-family: var(--f-sans); font-size: 8px;
  color: rgba(96, 78, 48, .72);
  margin-top: 4px;
}
.bar-pair { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.bar-row { display: flex; align-items: center; gap: 5px; }
.bar-row .bl {
  font-family: var(--f-sans); font-size: 8px; width: 26px;
  color: rgba(96,78,48,.8); flex: 0 0 auto;
}
.bar-row .bt {
  flex: 1 1 auto; height: 7px;
  background: rgba(120, 98, 62, .14);
  position: relative;
}
.bar-row .bt i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #b8584a, #a5342a);
  width: 0;
  transition: width 1.1s cubic-bezier(.3,.8,.2,1);
}
.bar-row.her .bt i { background: linear-gradient(90deg, #7c8fa8, #4f6482); }
.bar-row .bv {
  font-family: var(--f-sans); font-size: 8px; width: 22px; text-align: right;
  color: rgba(96,78,48,.9); flex: 0 0 auto;
}

/* 叠卡（斗图） */
.deck {
  position: relative;
  flex: 1 1 auto;
  min-height: 210px;
  margin-top: 8px;
}
.deck-card {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 96px;
  transition: transform .48s cubic-bezier(.3,.8,.2,1), box-shadow .3s, opacity .3s;
  transform-origin: bottom center;
}
.deck-card .dc-in {
  height: 100%;
  background: #f7f0dd;
  border: 1px solid rgba(100, 80, 50, .28);
  box-shadow: 0 3px 8px -3px rgba(50, 34, 16, .45);
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  position: relative;
  overflow: hidden;
}
.dc-badge {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(90, 72, 46, .35);
  display: grid; place-items: center;
  font-family: var(--f-serif); font-size: 11px;
  color: rgba(70, 54, 30, .8);
}
.dc-txt {
  flex: 1 1 auto;
  font-family: var(--f-serif); font-size: 11.5px;
  color: #3a2f1e;
  line-height: 1.45;
}
.dc-meta {
  font-family: var(--f-sans); font-size: 7.5px;
  color: rgba(110, 92, 64, .6);
  margin-top: 2px;
}
.dc-ghost {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  opacity: .28;
  background: #4a5a78;
  clip-path: polygon(22% 4%, 78% 4%, 96% 40%, 84% 96%, 16% 96%, 4% 40%);
}
.deck-card.taken { opacity: .35; }
.deck-card.flung { transform: translate(var(--tx, -120%), var(--ty, -40px)) rotate(var(--rot, -14deg)) !important; opacity: 0; }

/* 掀完后的牌局记录：保留五条消息的时间与序号，不让信息随卡片飞走 */
.deck-log {
  margin-top: 12px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s .15s, transform .6s .15s;
  border-top: 1px dashed rgba(110, 92, 64, .3);
  padding-top: 7px;
}
.deck-log.on { opacity: 1; transform: translateY(0); }
.dl-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--f-sans); font-size: 8.5px;
  color: rgba(74, 58, 36, .78);
  padding: 3.5px 0;
  border-bottom: 1px dotted rgba(110, 92, 64, .16);
}
.dl-row:last-child { border-bottom: 0; }

/* 小票页：整页内容比通用页更满，单独收紧留白，保证展开后证据行不被裁 */
.ticket-page { padding: 20px var(--page-pad) 16px; }
.ticket-page .ticket-well { margin-top: 12px; }
.ticket-page .foot { padding-top: 4px; }

/* 小票（奶茶） */
.ticket-well {
  position: relative;
  margin-top: 22px;
  height: 58px;
  overflow: hidden;
  transition: height .5s cubic-bezier(.2,.8,.2,1);
  border-top: 1px dashed rgba(110, 92, 64, .3);
  border-bottom: 1px dashed rgba(110, 92, 64, .3);
  background: linear-gradient(180deg, rgba(120, 98, 62, .05), rgba(120, 98, 62, .01));
}
.ticket {
  position: absolute; left: 14px; right: 14px; top: 0;
  padding: 9px 11px 12px;
}
.ticket .tk-head {
  text-align: center;
  font-family: var(--f-sans); font-size: 7.5px; letter-spacing: .18em;
  color: #6b5a40;
  border-bottom: 1px dashed rgba(110, 92, 64, .35);
  padding-bottom: 6px;
}
.ticket .tk-line {
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--f-sans); font-size: 7.5px;
  color: #4a3d2a;
  padding: 1.5px 0;
  border-bottom: 1px dotted rgba(110, 92, 64, .16);
}
.ticket .tk-line .q { flex: 1 1 auto; }
.ticket .tk-line .v { flex: 0 0 auto; color: #7a6444; }
.ticket .tk-mid {
  margin-top: 3px;
  padding: 2px 0;
  border-top: 2px solid rgba(110, 92, 64, .35);
  border-bottom: 2px solid rgba(110, 92, 64, .35);
}
.ticket .tk-spam {
  font-family: var(--f-serif);
  font-size: 8px; line-height: 1.04;
  color: #3a2f1e;
  padding: 1px 0;
}
.ticket .tk-spam div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket .tk-spam div:nth-child(5n) { opacity: .82; }
.ticket .tk-reveal {
  margin-top: 1px;
  font-family: var(--f-hand); font-size: 11.5px;
  color: var(--red-2);
  text-align: center;
}
.pull-hint {
  position: absolute; left: 0; right: 0; top: -15px; bottom: auto;
  z-index: 5;
  pointer-events: none;
  text-align: center;
  font-family: var(--f-sans); font-size: 8.5px; letter-spacing: .16em;
  color: rgba(110, 92, 64, .7);
  animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(3px); opacity: .95; } }
.pull-grip {
  position: absolute; left: 50%; bottom: -1px; z-index: 6;
  width: 44px; height: 18px; margin-left: -22px;
  background: linear-gradient(180deg, #d9c9a8, #c9b592);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -1px 2px rgba(0,0,0,.15);
  z-index: 4;
}
.pull-grip::after {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 16px; height: 1px; margin-left: -8px;
  background: rgba(90, 72, 46, .45);
  box-shadow: 0 3px 0 rgba(90, 72, 46, .45);
}

/* 折页（中秋）：双扇门对开，打开后露出跨页图 + 四句对联 */
.gatefold {
  position: relative;
  margin-top: 8px;
  flex: 1 1 auto;
  min-height: 232px;
  perspective: 1100px;
  overflow: hidden;
  border: 1px solid rgba(100, 80, 50, .22);
  background: #f6eed9;
  box-shadow: 0 3px 10px -5px rgba(50,34,16,.4);
}
.gf-spread {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr;
}
.gf-photo { position: relative; overflow: hidden; }
.gf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gf-text { padding: 15px 12px 12px; display: flex; flex-direction: column; }
.gf-lines { display: flex; flex-direction: column; gap: 7px; }
.gf-lines .gl {
  font-family: var(--f-serif); font-size: 13px; line-height: 1.45;
  color: #3a2f1e;
}
.gf-lines .gl.him { color: #33404f; }
.gf-lines .gl.her { color: #6b3140; }
.gf-date {
  margin-top: auto; padding-top: 8px;
  font-family: var(--f-hand); font-size: 12px; color: #8d2a22;
}
.gf-door {
  position: absolute; top: 0; bottom: 0; width: 50%;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 30%),
    linear-gradient(180deg, #f8f0dc, #eee2c6);
  transition: transform 1.05s cubic-bezier(.3,.8,.2,1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 1px rgba(120, 96, 60, .14);
}
.gf-door-l { left: 0; transform-origin: left center; border-right: 1px dashed rgba(120, 96, 60, .3); }
.gf-door-r { right: 0; transform-origin: right center; border-left: 1px dashed rgba(120, 96, 60, .3); }
.gatefold.open .gf-door-l { transform: rotateY(-158deg); }
.gatefold.open .gf-door-r { transform: rotateY(158deg); }
.gf-door-t {
  font-family: var(--f-serif); font-size: 18px; letter-spacing: .14em;
  color: #5a4630; writing-mode: vertical-rl;
}
.gf-door-sub {
  font-family: var(--f-sans); font-size: 7.5px; letter-spacing: .16em;
  color: rgba(110, 92, 64, .58);
}
.gf-fold-hint {
  position: absolute; left: 0; right: 0; bottom: 4px;
  z-index: 4;
  pointer-events: none;
  text-align: center;
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .16em;
  color: rgba(110, 92, 64, .62);
  transition: opacity .3s;
}
.gatefold.open .gf-fold-hint { opacity: 0; }

/* 夸奖机 */
.machine-box {
  margin-top: 8px;
  position: relative;
  background: linear-gradient(170deg, #e8d9b8, #dcc9a2);
  border: 1px solid rgba(100, 78, 44, .35);
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0 4px 14px -6px rgba(60,42,22,.55), inset 0 1px 0 rgba(255,255,255,.4);
  flex: 0 0 auto;
}
.mb-top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .16em;
  color: #6a5432;
  margin-bottom: 10px;
}
.mb-slot {
  height: 9px;
  background: linear-gradient(180deg, #6b5a3c, #8b7754);
  border-radius: 1px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5);
  margin-bottom: 8px;
}
.strip-out {
  position: relative;
  min-height: 84px;
  background: #fbf6e8;
  box-shadow: 0 2px 6px -2px rgba(50,34,16,.4);
  padding: 9px 11px;
  overflow: hidden;
}
.strip-out .so-txt {
  font-family: var(--f-hand);
  font-size: 15px; line-height: 1.5;
  color: #2e2517;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s, transform .4s;
}
.strip-out .so-txt.on { opacity: 1; transform: translateY(0); }
.strip-out .so-mark {
  position: absolute; right: 8px; bottom: 4px;
  font-family: var(--f-sans); font-size: 7px;
  color: rgba(110, 92, 64, .5);
}
.crank {
  margin-top: 10px;
  display: flex; align-items: center; gap: 10px;
}
.crank-btn {
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid #8b7754;
  background: radial-gradient(circle at 36% 30%, #f0e2c2, #cbb894 62%, #a8946c);
  box-shadow: 0 3px 6px rgba(50,34,16,.35), inset 0 1px 2px rgba(255,255,255,.7);
  display: grid; place-items: center;
  font-family: var(--f-serif); font-size: 10px; color: #5a4830;
  transition: transform .12s;
  flex: 0 0 auto;
}
.crank-btn:active { transform: scale(.94) rotate(-8deg); }
.crank-note {
  font-family: var(--f-sans); font-size: 8.5px; line-height: 1.6;
  color: rgba(96, 78, 48, .8);
}

/* 刮刮卡 */
.scratch-wrap {
  position: relative;
  margin-top: 10px;
  height: 124px;
  background: #f7f0dd;
  border: 1px solid rgba(100, 80, 50, .28);
  box-shadow: 0 3px 10px -4px rgba(50,34,16,.45);
  overflow: hidden;
}
.scratch-under {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
}
.scratch-under .su-t {
  font-family: var(--f-serif); font-size: 19px;
  color: var(--red-2);
  letter-spacing: .04em;
}
.scratch-under .su-s {
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .16em;
  color: rgba(110, 92, 64, .75);
}
.scratch-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: grab;
}
.scratch-num {
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center;
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .14em;
  color: rgba(90, 72, 46, .5);
  pointer-events: none;
}

/* 翻翻卡（麻辣王子） */
.flipcard {
  margin-top: 10px;
  height: 176px;
  perspective: 1000px;
}
.fc-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3,.8,.2,1);
}
.flipcard.flipped .fc-inner { transform: rotateY(180deg); }
.fc-side {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid rgba(100, 80, 50, .3);
  box-shadow: 0 4px 12px -5px rgba(50,34,16,.5);
  overflow: hidden;
}
.fc-front {
  background: linear-gradient(160deg, #d8321f, #a8210f);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
}
.fc-front .snack {
  font-family: var(--f-serif); font-size: 21px; letter-spacing: .1em;
  color: #ffe9b8;
  text-shadow: 0 1px 0 rgba(80,10,0,.5);
}
.fc-front .snack-sub {
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .3em;
  color: rgba(255, 226, 170, .75);
}
.fc-front .snack-shape {
  width: 78px; height: 96px;
  background: linear-gradient(160deg, #f0c14b, #d9a02a);
  border-radius: 4px;
  position: relative;
  box-shadow: inset -6px -6px 14px rgba(120, 60, 0, .35), inset 6px 6px 12px rgba(255, 230, 160, .5);
  margin-top: 4px;
}
.fc-front .snack-shape::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 16px; height: 3px;
  background: rgba(160, 90, 0, .35);
  box-shadow: 0 10px 0 rgba(160, 90, 0, .3), 0 20px 0 rgba(160, 90, 0, .25), 0 30px 0 rgba(160, 90, 0, .2);
}
.fc-back {
  transform: rotateY(180deg);
  background: #f7f0dd;
  padding: 12px;
  display: flex; flex-direction: column; justify-content: center;
}
.fc-back .fb-title {
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .18em;
  color: rgba(110, 92, 64, .8);
  margin-bottom: 8px;
}
.bag-line {
  position: relative;
  height: 66px;
  border: 1.5px dashed rgba(70, 54, 30, .45);
  border-radius: 6px 6px 10px 10px;
  margin-bottom: 6px;
}
.bag-line::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1.5px; height: 10px;
  border: 1.5px dashed rgba(70, 54, 30, .45);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.bag-line .bl-label {
  position: absolute; left: 8px; top: 12px;
  font-family: var(--f-sans); font-size: 7.5px;
  color: rgba(90, 74, 48, .7);
  line-height: 1.6;
}
.bag-line .bl-draw {
  position: absolute; right: 8px; bottom: 6px;
  width: 62px; height: 40px;
  border: 1.4px solid rgba(60, 48, 30, .6);
  border-radius: 3px;
}
.bag-line .bl-draw::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 1.4px;
  background: rgba(60,48,30,.55);
  box-shadow: 0 8px 0 rgba(60,48,30,.4), 0 16px 0 rgba(60,48,30,.3);
}
.bag-line .bl-draw span {
  position: absolute; left: 0; right: 0; bottom: -13px;
  text-align: center; font-family: var(--f-sans); font-size: 6.5px;
  color: rgba(90, 74, 48, .8);
}
.fc-hint {
  text-align: center;
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .14em;
  color: rgba(110, 92, 64, .65);
  margin-top: 6px;
}

/* 快递单 */
.waybill {
  margin-top: 8px;
  background: #fbf7ec;
  border: 1px solid rgba(100, 80, 50, .3);
  box-shadow: 0 3px 10px -4px rgba(50,34,16,.45);
  font-family: var(--f-sans);
  color: #3b3226;
}
.wb-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 9px;
  background: linear-gradient(180deg, #e8dcc2, #ddcfb2);
  border-bottom: 1px solid rgba(100, 80, 50, .3);
  font-size: 8px; letter-spacing: .16em;
  color: #5a4830;
}
.wb-body { padding: 8px 9px 10px; }
.wb-row { display: flex; gap: 8px; font-size: 8.5px; color: #4a3d2a; padding: 2px 0; }
.wb-row .k { width: 34px; flex: 0 0 auto; color: rgba(110, 92, 64, .8); }
.wb-row .v { flex: 1 1 auto; }
.wb-calc {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed rgba(100, 80, 50, .35);
  font-family: var(--f-hand);
  font-size: 13px; line-height: 1.65;
  color: #3a2f1e;
}
.wb-stamp {
  margin-top: 6px;
  text-align: right;
}

/* 流程图（做饭） */
.flow-steps { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.flow-step {
  display: flex; align-items: center; gap: 9px;
  background: #f7f0dd;
  border: 1px solid rgba(100, 80, 50, .25);
  padding: 7px 9px;
  box-shadow: 0 2px 5px -3px rgba(50,34,16,.4);
}
.flow-step .fs-i {
  width: 19px; height: 19px; border-radius: 50%;
  border: 1px solid rgba(90,72,46,.4);
  display: grid; place-items: center;
  font-family: var(--f-sans); font-size: 8px;
  color: rgba(90,72,46,.8); flex: 0 0 auto;
}
.flow-step .fs-t {
  font-family: var(--f-serif); font-size: 12.5px; color: #3a2f1e;
  flex: 1 1 auto;
}
.flow-arrow {
  text-align: center; font-size: 9px; color: rgba(110,92,64,.5);
  line-height: 1; margin: -3px 0;
}
.flow-later {
  margin-top: 8px; padding-top: 7px;
  border-top: 1px dashed rgba(100, 80, 50, .3);
  font-family: var(--f-hand); font-size: 11.5px; line-height: 1.7;
  color: rgba(74,58,36,.9);
}

/* 印章对（居然/竟然） */
.seal-pair {
  display: flex; gap: 12px; margin-top: 14px;
  justify-content: center;
}
.seal {
  width: 88px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.seal .s-sq {
  width: 62px; height: 62px;
  border: 2px solid rgba(120, 40, 34, .8);
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: var(--f-serif); font-size: 21px;
  color: rgba(140, 44, 38, .88);
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%);
  mix-blend-mode: multiply;
}
.seal.k2 .s-sq {
  color: rgba(40, 60, 92, .85);
  border-color: rgba(40, 60, 92, .75);
  transform: rotate(2.4deg);
}
.seal .s-l {
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .12em;
  color: rgba(110, 92, 64, .8);
}
.seal .s-who {
  font-family: var(--f-hand); font-size: 11px;
  color: rgba(74, 58, 36, .85);
}

/* 接龙（南京） */
.chain-stack { display: flex; flex-direction: column; gap: 0; margin-top: 10px; }
.chain-line {
  position: relative;
  padding: 8px 10px 8px 14px;
  font-family: var(--f-serif); font-size: 12px;
  color: #3a2f1e;
  background: #f7f0dd;
  border-bottom: 1px solid rgba(100, 80, 50, .18);
  box-shadow: 0 1px 3px -2px rgba(50,34,16,.4);
}
.chain-line:nth-child(2n) { background: #f2e9d5; margin-left: 7px; }
.chain-line .ch-who {
  position: absolute; left: 3px; top: 10px;
  font-family: var(--f-sans); font-size: 7px;
  color: rgba(110, 92, 64, .6);
  writing-mode: vertical-rl;
}
.chain-line.him { border-left: 2px solid rgba(60, 80, 110, .35); }
.chain-line.her { border-left: 2px solid rgba(120, 50, 66, .35); }
.chain-line.punch { font-family: var(--f-hand); font-size: 15px; color: var(--red-2); }

/* 翻转卡（仰卧） */
.mini-flip {
  margin-top: auto;
  margin-bottom: 4px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.mf-card {
  width: 132px; height: 62px;
  position: relative;
  perspective: 600px;
  cursor: pointer;
}
.mf-in {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3,.8,.2,1);
}
.mf-card.flipped .mf-in { transform: rotateX(180deg); }
.mf-f, .mf-b {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center;
  border: 1px solid rgba(100,80,50,.35);
  background: #f7f0dd;
  font-family: var(--f-hand); font-size: 17px;
  color: #3a2f1e;
  box-shadow: 0 3px 8px -4px rgba(50,34,16,.5);
}
.mf-b { transform: rotateX(180deg); background: #eee3cb; color: #5c6e5a; }
.mf-hint {
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .14em;
  color: rgba(110, 92, 64, .6);
}

/* 拍立得散开 */
.photo-scatter {
  position: relative;
  flex: 1 1 auto;
  min-height: 250px;
  margin-top: 6px;
}
.ps-item {
  position: absolute;
  left: 50%; top: 50%;
  width: 124px;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform .7s cubic-bezier(.3,.8,.2,1);
  z-index: 2;
  cursor: pointer;
}
.photo-scatter.scattered .ps-item:nth-child(1) { transform: translate(-50%, -104%) rotate(-7deg); }
.photo-scatter.scattered .ps-item:nth-child(2) { transform: translate(6%, -62%) rotate(5deg); z-index: 3; }
.photo-scatter.scattered .ps-item:nth-child(3) { transform: translate(-106%, -30%) rotate(-4deg); z-index: 4; }
.photo-scatter.scattered .ps-item:nth-child(4) { transform: translate(-40%, 14%) rotate(6deg); z-index: 5; }
.ps-item .ps-date {
  font-family: var(--f-sans); font-size: 7.5px; text-align: center;
  color: rgba(90, 74, 48, .75);
  margin-top: 3px;
}
.ps-item .ps-lines {
  position: absolute; left: 8px; right: 8px; top: 0; bottom: 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  pointer-events: none;
}
.ps-item .ps-lines span {
  font-family: var(--f-serif); font-size: 10px; line-height: 1.35;
  color: #3a2f1e;
  background: rgba(253, 250, 242, .82);
  padding: 1px 3px;
}

/* 音符页 */
.staff {
  position: relative;
  margin-top: 6px;
  height: 152px;
  background: #fbf6e8;
  border: 1px solid rgba(100, 80, 50, .26);
  padding: 10px 8px;
  box-shadow: 0 3px 10px -4px rgba(50,34,16,.4);
}
.staff .lines {
  position: absolute; left: 8px; right: 8px; top: 34px;
  height: 80px;
  background: repeating-linear-gradient(180deg, rgba(90,72,46,.30) 0 1px, transparent 1px 20px);
  pointer-events: none;
}
.note-btn {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0; padding: 0;
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .15s;
  z-index: 3;
}
.note-btn:active { transform: translate(-50%, -50%) scale(.9); }
.note-btn .nb-dot {
  width: 13px; height: 10px;
  background: #2b2419;
  border-radius: 50%;
  transform: rotate(-16deg);
  box-shadow: 1px 1px 0 rgba(0,0,0,.2);
  transition: background .2s, transform .2s;
}
.note-btn .nb-stem {
  position: absolute; right: 6px; top: -10px;
  width: 1.4px; height: 22px;
  background: #2b2419;
  transform-origin: bottom center;
}
.note-btn.playing .nb-dot { background: var(--red); transform: rotate(-16deg) scale(1.25); }
.note-btn .nb-glyph {
  position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-sans); font-size: 7px; color: rgba(110,92,64,.75);
  white-space: nowrap;
}
.staff-foot {
  position: absolute; left: 8px; right: 8px; bottom: 6px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-sans); font-size: 7.5px;
  color: rgba(110, 92, 64, .7);
}
.play-all {
  border: 1px solid rgba(90, 72, 46, .4);
  background: #f0e6d0;
  padding: 3px 8px;
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .1em;
  color: #5a4830;
  border-radius: 2px;
}
.two-scenes {
  margin-top: 8px;
  display: flex; gap: 8px;
  flex: 1 1 auto;
}
.scene-col {
  flex: 1 1 0;
  background: #f5ecd7;
  border: 1px solid rgba(100, 80, 50, .22);
  padding: 7px 7px 8px;
  position: relative;
  min-width: 0;
}
.scene-col .sc-date {
  font-family: var(--f-sans); font-size: 7px; letter-spacing: .1em;
  color: rgba(110, 92, 64, .8);
  margin-bottom: 5px;
  display: flex; justify-content: space-between;
}
.scene-col .sc-line {
  font-family: var(--f-serif); font-size: 9.5px; line-height: 1.42;
  color: #3a2f1e;
  padding: 1.5px 0;
  word-break: break-word;
}
.scene-col .sc-line.him { color: #33404f; }
.scene-col .sc-line.her { color: #6b3140; }
.scene-col .sc-gap {
  font-family: var(--f-sans); font-size: 6.5px;
  color: var(--red);
  margin: 2px 0 2px 2px;
}
.scene-col .sc-miss {
  font-family: var(--f-hand); font-size: 11px;
  color: rgba(74,58,36,.9);
  margin-top: 4px;
}

/* 站台票（接站） */
.night-page {
  background: linear-gradient(170deg, #1a2740, #101a2c 70%, #0c1422);
  color: #d8e2f0;
}
.night-page .kicker, .night-page .pnum { color: rgba(190, 210, 235, .5); }
.night-page h1.page-title { color: #e6edf8; }
.night-page .lead { color: rgba(196, 214, 236, .72); }
.night-page .rule { background: linear-gradient(90deg, rgba(190,210,235,.3), transparent); }
.ticket-stub {
  margin-top: 10px;
  background: linear-gradient(165deg, #e8dcc2, #d9c9a8);
  color: #3a2e1c;
  padding: 11px 12px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.7);
  position: relative;
  transform: rotate(-1deg);
}
.ticket-stub::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(180deg, rgba(120,98,62,.4) 0 3px, transparent 3px 7px);
}
.ts-top {
  display: flex; justify-content: space-between;
  font-family: var(--f-sans); font-size: 7.5px; letter-spacing: .14em;
  color: rgba(90, 74, 48, .8);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(120,98,62,.3);
}
.ts-mid {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 9px 0 6px;
}
.ts-station { font-family: var(--f-serif); font-size: 19px; letter-spacing: .06em; }
.ts-arrow { font-family: var(--f-sans); font-size: 11px; color: rgba(90,74,48,.65); }
.ts-bot {
  display: flex; justify-content: space-between;
  font-family: var(--f-sans); font-size: 7px;
  color: rgba(90, 74, 48, .7);
}
.night-chat { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.nc-row {
  max-width: 88%;
  padding: 7px 9px;
  font-family: var(--f-serif); font-size: 11px; line-height: 1.5;
  border-radius: 2px;
}
.nc-row.him { align-self: flex-start; background: rgba(226, 236, 250, .10); color: #cfe0f4; border-left: 2px solid rgba(150, 180, 220, .5); }
.nc-row.her { align-self: flex-end; background: rgba(240, 224, 232, .09); color: #e8d6dd; border-right: 2px solid rgba(210, 160, 175, .45); }
.nc-row.punch {
  align-self: stretch; max-width: 100%;
  background: rgba(255, 236, 205, .10);
  border: 1px solid rgba(240, 210, 160, .3);
  font-family: var(--f-hand); font-size: 15px;
  color: #f6e3bb;
  text-align: center;
  padding: 11px 9px;
}
.night-page .foot { color: rgba(170, 190, 215, .55); }

/* 信封页（我在意） */
.env-page { display: flex; flex-direction: column; }
.env-wrap {
  position: relative;
  margin-top: 14px;
  height: 178px;
  perspective: 800px;
}
.env-wrap .envelope { position: absolute; inset: 0; z-index: 4; }
.env-letter {
  position: absolute; left: 10px; right: 10px; top: 8px;
  background: #fbf6e8;
  padding: 12px;
  box-shadow: 0 2px 8px -3px rgba(50,34,16,.5);
  transform: translateY(0);
  transition: transform .7s cubic-bezier(.3,.8,.2,1);
  z-index: 2;
  max-height: 168px;
  overflow: hidden;
}
.env-wrap.open .env-letter { transform: translateY(-46px); z-index: 8; }
.env-letter .el-lines { display: flex; flex-direction: column; gap: 4px; }
.env-letter .el-lines .chat-row { font-size: 11px; }
.gap-box {
  margin-top: auto;
  border: 1px solid rgba(165, 52, 42, .35);
  background: rgba(165, 52, 42, .04);
  padding: 8px 9px;
  position: relative;
}
.gap-box .gb-h {
  font-family: var(--f-sans); font-size: 8px; letter-spacing: .12em;
  color: var(--red);
  margin-bottom: 3px;
}
.gap-box .gb-b {
  font-family: var(--f-sans); font-size: 7.5px; line-height: 1.6;
  color: rgba(120, 60, 52, .82);
}
.apparatus {
  margin-top: 8px;
  display: flex; align-items: center; gap: 8px;
  opacity: .8;
}
.apparatus .ap-num {
  font-family: var(--f-serif); font-size: 30px; line-height: 1;
  color: rgba(110, 92, 64, .5);
}
.apparatus .ap-txt {
  font-family: var(--f-sans); font-size: 7.5px; line-height: 1.5;
  color: rgba(110, 92, 64, .8);
}

/* 封底 */
.colophon { justify-content: flex-start; }
.colophon .cp-brand {
  font-family: var(--f-serif); font-size: 16px; letter-spacing: .04em;
  color: #2f3b2c; margin-bottom: 10px;
}
.colophon p {
  font-family: var(--f-sans); font-size: 8.5px; line-height: 1.85;
  color: rgba(90, 76, 54, .82);
  margin: 0 0 8px;
}
.colophon .cp-rules {
  margin: 6px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.colophon .cp-rules li {
  font-family: var(--f-sans); font-size: 8px; line-height: 1.6;
  color: rgba(90, 76, 54, .78);
  padding-left: 11px;
  position: relative;
}
.colophon .cp-rules li::before {
  content: "·"; position: absolute; left: 3px; top: -1px;
  color: rgba(140, 44, 38, .8);
  font-size: 12px;
}
.colophon .cp-end {
  margin-top: auto;
  text-align: center;
  font-family: var(--f-hand); font-size: 12px;
  color: rgba(74, 58, 36, .75);
  padding-bottom: 6px;
}

/* toast */
.clv-toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  transform: translate(-50%, 8px);
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(30, 22, 14, .88);
  color: rgba(246, 232, 208, .95);
  font-family: var(--f-sans); font-size: 10.5px; letter-spacing: .04em;
  opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 80;
  max-width: 78vw; text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.clv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 小屏适配 */
@media (max-height: 700px) {
  :root { --page-pad: 15px; }
  h1.page-title { font-size: 18px; }
  .sheet { padding-top: 17px; padding-bottom: 17px; }
  .ticket-well { height: 196px; }
  .photo-scatter { min-height: 200px; }
  .staff { height: 130px; }
  .gatefold { min-height: 170px; }
}
@media (max-height: 620px) {
  .hud-sub { display: none; }
  .flipcard { height: 138px; }
  .scratch-wrap { height: 98px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .12s !important; }
  .leaf { transition-duration: .2s !important; }
}