/* 在 style.css 之后加载：字体、纸张质感、场景过渡、章节过场卡、信封、重画的抓娃娃机。 */

/* ---------- 字体 ----------
   只含本作用到的字（tools/fonts/subset.js 生成）。改了文案要重新生成，否则新字会退回系统字体。
   叙述与信：思源宋体（Noto Serif SC）；绘梨衣写在小本子上的字：霞鹜文楷。都是 SIL OFL 授权。 */
@font-face{font-family:"Erii Serif";src:url("fonts/serif-sc.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Erii Hand";src:url("fonts/wenkai.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
 --serif:"Erii Serif","Noto Serif SC","Songti SC","SimSun",serif;
 --hand:"Erii Hand","Kaiti SC","STKaiti","KaiTi",var(--serif);
 /* 纸纹：细颗粒 + 拉长的纤维，叠在纸色上 */
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .31 0 0 0 0 .2 0 0 0 -1 .54'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
 --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01111 .3' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .28 0 0 0 -.45 .23'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23f)'/%3E%3C/svg%3E");
}
/* 绘梨衣亲手写的字 */
.dialogue.notebook p,.crane-note p,.ending-notebook p,.ending-notebook small,.title-intro em,
.handwritten,.birthday-handwriting,.book-signature,.postcard-promise,.book-quote,.book-cover-subtitle{font-family:var(--hand)}
.dialogue.notebook p{letter-spacing:.04em}
.book-quote{font-size:20px;line-height:1.85}
.ending-notebook p{font-size:23px;line-height:1.65}

/* ---------- 纸张质感 ---------- */
.dialogue{background:var(--grain),linear-gradient(135deg,#fffcf3f5,#f8f1e7f7)}
.crane-note{background:var(--grain),#faf5e8}
.ending-notebook{background:var(--grain),var(--fiber),#fff8e9f3}
.book-paper{background:var(--grain),var(--fiber),radial-gradient(140% 100% at 60% 30%,#fffaef 50%,#f6ead4);background-attachment:local,local,local}
/* 信纸：叠过三折，留着两道折痕 */
.letter-paper{
 background:
  var(--grain),var(--fiber),
  linear-gradient(180deg,#0000 calc(33.3% - 18px),#7a5a3a0d calc(33.3% - 1px),#fffc 33.3%,#7a5a3a10 calc(33.3% + 1.5px),#0000 calc(33.3% + 20px)),
  linear-gradient(180deg,#0000 calc(66.6% - 18px),#7a5a3a0d calc(66.6% - 1px),#fffc 66.6%,#7a5a3a10 calc(66.6% + 1.5px),#0000 calc(66.6% + 20px)),
  radial-gradient(130% 80% at 50% 35%,#fffbf3 45%,#f5e8d0);
 box-shadow:0 15px 80px #02091280,inset 0 0 50px #b88f5a24;
}
.letter-body p{color:#3b3439}

/* ---------- 场景交叉淡化 ---------- */
/* 背景固定在视口上：信和抓娃娃机这类比屏幕长的页面，顶部不会再露出一截空白。 */
.backdrop,.vignette{position:fixed}
.background-art{opacity:0;z-index:0;transition:opacity 1.2s ease,filter .8s}
.background-art.is-active{opacity:1;z-index:2}
.background-art.is-leaving{opacity:1;z-index:1;transition:filter .8s}

/* ---------- 章节过场卡 ---------- */
.chapter-card{position:fixed;inset:0;z-index:40;display:grid;place-items:center;text-align:center;cursor:pointer;opacity:0;transition:opacity .65s ease;background:radial-gradient(120% 85% at 50% 44%,#162030d9,#0a1018f2);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.chapter-card.showing{opacity:1}
.chapter-card-inner{display:grid;justify-items:center;padding:0 28px 6vh}
.card-number{font-size:13px;letter-spacing:.42em;text-indent:.42em;color:var(--gold);font-weight:600}
.card-rule{display:block;width:1px;height:58px;margin:20px 0 22px;background:linear-gradient(var(--gold),#edcc9200);transform-origin:top}
.chapter-card h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,6.2vw,58px);letter-spacing:.1em;text-indent:.1em;line-height:1.35;margin:0;color:var(--cream);text-shadow:0 4px 34px #0009}
.card-english{font-size:11px;letter-spacing:.36em;text-indent:.36em;color:#c3d0d4a6;margin:20px 0 0}
.card-index{margin-top:34px;font-size:11px;letter-spacing:.24em;color:#e16a77}
.card-skip{position:absolute;left:0;right:0;bottom:max(34px,env(safe-area-inset-bottom));font-size:12px;letter-spacing:.24em;color:#ffffff52}
.chapter-card.showing .card-number{animation:cardRise .8s .1s both}
.chapter-card.showing .card-rule{animation:cardRule .9s .25s both}
.chapter-card.showing h2{animation:cardRise .9s .4s both}
.chapter-card.showing .card-english{animation:cardRise .9s .6s both}
.chapter-card.showing .card-index{animation:cardRise .9s .75s both}
.chapter-card.showing .card-skip{animation:cardBlink 2.4s 1.3s both infinite}
@keyframes cardRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cardRule{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}
@keyframes cardBlink{0%,100%{opacity:0}50%{opacity:1}}

/* ---------- 抓娃娃机 ---------- */
#craneCanvas{aspect-ratio:45/47;cursor:grab;border-top:2px solid #7a3552}
#craneCanvas:active{cursor:grabbing}
.machine{border:0;border-radius:22px 22px 14px 14px;background:#e2aeb8;box-shadow:0 0 0 2px #f2d6a0,0 0 0 6px #7a3552,0 20px 55px #05081acc,0 0 70px #ff8fb030}
.machine-marquee{background:linear-gradient(#5d2346,#3b1632);padding:13px 14px 12px;gap:4px;position:relative}
.machine-marquee>span:first-child{color:#ffe9c4;font-size:17px;letter-spacing:.3em;text-indent:.3em;text-shadow:0 0 12px #ffb98a,0 0 28px #ff8fb080;animation:marqueeGlow 3.2s ease-in-out infinite}
.machine-stars{color:#9fe8e0;text-shadow:0 0 10px #7fe6de99}
@keyframes marqueeGlow{0%,100%{opacity:1}50%{opacity:.78}}
.machine-status{background:#170f20;border-top:2px solid #f2d6a0;color:#bff0ea;letter-spacing:.06em;padding:11px 14px;align-items:center}
.machine-status>span:last-child{color:#ffb0c4;letter-spacing:.14em}

.crane-controls{justify-content:space-between;align-items:center;gap:18px;padding:24px 6px 8px}
.flat-pad{display:flex;align-items:center;gap:14px}
.flat-pad button{width:76px;height:64px;border-radius:17px;font-size:22px;line-height:1;color:#7a2c4a;background:linear-gradient(#fbeade,#e3aeb8);border:1px solid #fff4ea;box-shadow:0 6px 0 #8c4862,0 10px 22px #0006;transition:transform .08s,box-shadow .08s}
.flat-pad button:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 #8c4862,0 3px 8px #0006;background:linear-gradient(#f3d9d0,#d99aa8)}
.grab-wrap{gap:0}
.grab-button{width:98px;height:98px;border:4px solid #f2d6a0;background:radial-gradient(circle at 36% 28%,#ff9db3,#cf486c 62%,#a5304f);box-shadow:0 7px 0 #5b1f3c,0 0 0 7px #7a355259,0 16px 30px #0007;color:#fff7ef;font-size:21px;font-weight:700;transition:transform .08s,box-shadow .08s}
.grab-button:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 #5b1f3c,0 0 0 7px #7a355259,0 6px 14px #0007}
.grab-button:disabled,.flat-pad button:disabled{opacity:.55}
.crane-hint{margin:10px 4px 0;text-align:center;font-size:12px;line-height:1.8;color:#b7c4c8}
.crane-hint b{font-weight:400;color:#ffe2a0}
@media(max-width:650px){
 .crane-controls{padding:20px 2px 6px;gap:12px}
 .flat-pad{gap:11px}
 .flat-pad button{width:68px;height:60px;font-size:20px}
 .grab-button{width:90px;height:90px;font-size:20px}
 .crane-hint{font-size:11px}
}
@media(max-width:360px){
 .flat-pad button{width:60px;height:56px}
 .grab-button{width:84px;height:84px}
}
@media(prefers-reduced-motion:reduce){.chapter-card.showing .card-skip{opacity:1}}

/* ---------- 信封 ---------- */
.envelope-stage{display:none;justify-items:center;align-content:center;min-height:calc(100svh - 190px);padding:150px 0 40px;cursor:pointer;outline:0;-webkit-tap-highlight-color:transparent}
.letter-screen.is-sealed .envelope-stage,.letter-screen.is-opening .envelope-stage{display:grid}
.letter-screen.is-sealed .letter-paper,.letter-screen.is-opening .letter-paper,
.letter-screen.is-sealed #letterNext,.letter-screen.is-opening #letterNext{display:none}
.envelope{position:relative;width:min(100%,460px);aspect-ratio:16/10.4;perspective:1100px;animation:envIn 1s cubic-bezier(.2,.7,.2,1) both}
.letter-screen.is-sealed .envelope{animation:envIn 1s cubic-bezier(.2,.7,.2,1) both,envFloat 4.5s 1s ease-in-out infinite}
.envelope>*{position:absolute}
/* 信封内衬：深红，细点纹 */
.envelope-back{inset:0;z-index:1;border-radius:5px;background:radial-gradient(#ffffff17 1px,#0000 1.6px) 0 0/9px 9px,linear-gradient(#7c2236,#9a3049);box-shadow:0 22px 50px #02060fb3,0 4px 12px #0006}
.envelope-sheet{z-index:2;left:6%;right:6%;top:6%;bottom:7%;border-radius:2px;padding:7% 8%;background:var(--grain),repeating-linear-gradient(#0000 0 21px,#9d334a14 21px 22px) 0 52px/100% calc(100% - 60px) no-repeat,#fffaf0;box-shadow:0 1px 3px #0003}
.envelope-sheet span{font-family:var(--serif);font-size:13px;color:#853148}
.envelope-pocket{inset:0;z-index:3;filter:drop-shadow(0 -1px 2px #3a1d1222)}
.envelope-pocket:before,.envelope-pocket:after{content:"";position:absolute;inset:0;border-radius:5px}
.envelope-pocket:before{clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);background:var(--fiber),linear-gradient(100deg,#efe0c4,#f6ead6 50%,#ecdcbf)}
.envelope-pocket:after{clip-path:polygon(0 100%,50% 47%,100% 100%);background:var(--grain),linear-gradient(#f3e5cc,#f8eedc);box-shadow:inset 0 1px #fff8}
.envelope-pocket span{position:absolute}
.envelope-to{z-index:1;left:0;right:0;bottom:23%;text-align:center;font-family:var(--hand);font-size:clamp(19px,5.4vw,25px);letter-spacing:.12em;color:#5a3433}
.envelope-to small{font-size:.62em;color:#8a6457;margin-left:.2em}
.envelope-from{z-index:1;left:0;right:0;bottom:11%;text-align:center;font-size:9px;letter-spacing:.32em;text-indent:.32em;color:#a2826b}
/* 封口：正面是信封纸，翻过去是内衬 */
.envelope-flap{left:0;right:0;top:0;height:60%;z-index:4;transform-origin:50% 0;transform-style:preserve-3d}
.envelope-flap i{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-front{filter:drop-shadow(0 3px 3px #4a2a1a3d)}
.flap-front:before,.flap-inside:before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.flap-front:before{background:var(--grain),linear-gradient(#f7ecd8,#ead8b9);border-radius:5px 5px 0 0}
.flap-inside{transform:rotateY(180deg)}
.flap-inside:before{background:radial-gradient(#ffffff17 1px,#0000 1.6px) 0 0/9px 9px,linear-gradient(#a23651,#7c2236)}
/* 火漆：两半，拆的时候各自掉下去 */
.envelope-seal{z-index:5;width:68px;height:68px;left:calc(50% - 34px);top:calc(60% - 50px);filter:drop-shadow(0 3px 4px #3b0a1480)}
.seal-half{position:absolute;inset:0;border-radius:50% 46% 53% 47%/47% 53% 45% 51%;background:radial-gradient(circle at 34% 28%,#d95a68,#a8283e 42%,#7d1529 72%,#62101f);box-shadow:inset 0 0 0 6px #8e1d33,inset 0 0 0 7.5px #cf5a6a70,inset 0 -3px 6px #3d061266}
.seal-half:after{content:"18";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:23px;line-height:1;color:#701126;text-shadow:0 1px 0 #ec8a9666,0 -1px 0 #3d061270}
.seal-left{clip-path:polygon(0 0,53% 0,45% 24%,57% 47%,43% 70%,52% 100%,0 100%)}
.seal-right{clip-path:polygon(53% 0,100% 0,100% 100%,52% 100%,43% 70%,57% 47%,45% 24%)}
.envelope-hint{margin:30px 0 0;font-size:12px;letter-spacing:.3em;text-indent:.3em;color:#f1dcc4b0;animation:cardBlink 2.6s 1.2s both infinite}
.envelope-stage:focus-visible .envelope-seal{outline:2px solid var(--gold);outline-offset:6px;border-radius:50%}
/* 拆信：火漆裂开 → 封口翻起 → 信纸抽出 → 信封退场 */
.is-opening .envelope{animation:none}
.is-opening .envelope-hint{animation:none;opacity:0;transition:opacity .3s}
.is-opening .envelope-seal{animation:sealPop .28s ease-out both}
.is-opening .seal-left{animation:sealLeft .8s .2s cubic-bezier(.5,0,.75,.4) both}
.is-opening .seal-right{animation:sealRight .8s .2s cubic-bezier(.5,0,.75,.4) both}
.is-opening .envelope-flap{animation:flapOpen .8s .45s cubic-bezier(.45,0,.2,1) both}
.is-opening .envelope-sheet{animation:sheetOut 1.05s 1.15s cubic-bezier(.3,.6,.2,1) both}
.is-opening .envelope-stage{animation:stageOut .55s 1.85s ease-in both}
@keyframes envIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes envFloat{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes sealPop{50%{transform:scale(1.08)}}
@keyframes sealLeft{to{opacity:0;transform:translate(-30px,88px) rotate(-42deg)}}
@keyframes sealRight{to{opacity:0;transform:translate(26px,96px) rotate(36deg)}}
@keyframes flapOpen{0%{transform:rotateX(0);z-index:4}62%{z-index:4}63%{z-index:1}100%{transform:rotateX(180deg);z-index:1}}
@keyframes sheetOut{to{transform:translateY(-62%)}}
@keyframes stageOut{to{opacity:0;transform:translateY(18px) scale(.985)}}
/* 信纸展开后，段落随阅读浮现 */
.letter-screen.is-open .letter-paper{animation:letterIn 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes letterIn{from{opacity:0;transform:translateY(30px) scale(.985)}to{opacity:1;transform:none}}
.letter-screen .reveal{opacity:0;transform:translateY(12px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.letter-screen .reveal.shown{opacity:1;transform:none}
@media(max-width:650px){
 .envelope-stage{min-height:calc(100svh - 170px);padding-top:96px}
 .envelope-seal{width:60px;height:60px;left:calc(50% - 30px);top:calc(60% - 44px)}
 .seal-half:after{font-size:20px}
 .ending-notebook p{font-size:21px}
 .book-quote{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.envelope,.letter-screen.is-sealed .envelope,.envelope-hint{animation:none}}