/* 对折森林 v0.3 · 奶油莫兰迪 × 剪纸 */
:root{
--bg:#F3ECE1; --paper:#FBF7F0; --ink:#4A4038; --ink2:#7A6D5E;
--sage:#6B7A64; --line:#E4D9C9; --pink:#B5776A;
--sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px);
--sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
--serif:"Noto Serif SC","Noto Serif CJK SC","Songti SC","STSong",Georgia,serif;
--noise:url("data:image/svg+xml;utf8,");
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
html{background:linear-gradient(180deg,#E9DCC9 0 55%,#BBA684 56%)}
body{
background:transparent;min-height:100lvh;color:var(--ink);
font:16px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Noto Sans CJK SC",sans-serif;
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.serif,.serif-svg{font-family:var(--serif)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
#safe{position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;
padding:var(--sat) var(--sar) var(--sab) var(--sal)}
/* ---------- 场景：铺满整个视口 ---------- */
#stage{position:fixed;left:0;right:0;top:0;height:100vh;height:max(100dvh,100lvh);overflow:hidden;background:#BBA684;touch-action:none;cursor:default}
#back{position:absolute;inset:0;transition:filter .6s ease}
#back.dim{filter:blur(3px) brightness(.8) saturate(.9)}
.world{position:absolute;left:0;top:0;width:400px;height:600px;transform-origin:0 0;pointer-events:none}
.layer{position:absolute;left:0;top:0;width:400px;height:600px}
.layer>svg{display:block;overflow:visible}
.layer.sway,.layer.cloud,.layer.plaque{will-change:transform}
.layer.her-color{opacity:0}
#stage.reraster .layer,#stage.reraster .perch{will-change:auto!important}
#letter.kb{padding-top:18px}
.skybird{position:absolute;left:0;top:0;width:26px;height:22px;opacity:0;will-change:transform}
.skybird .wing,#flyBird.flapping .wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap .3s ease-in-out infinite alternate}
@keyframes flap{to{transform:scaleY(-.6)}}
.ff{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
background:radial-gradient(circle,#FBF0C8 0 18%,rgba(242,223,166,.55) 30%,rgba(242,223,166,0) 70%);opacity:.3;will-change:opacity,transform}
/* 她的半边：一张半透明的纸，左边缘就是折痕 */
#flap{position:absolute;top:-2px;bottom:-2px;left:0;width:calc(100vw + 60px);will-change:transform;overflow:hidden;
/* 半透明描图纸：微微偏冷的乳白，透出后面她的树影、小猫和兔子 */
background:linear-gradient(90deg,rgba(232,228,222,.70),rgba(244,242,236,.58) 26%,rgba(246,243,238,.54));
box-shadow:-6px 0 14px rgba(90,70,50,.10) inset}
#flap::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
background:repeating-linear-gradient(97deg,rgba(255,255,255,.0) 0 7px,rgba(255,255,255,.22) 7px 8px,rgba(255,255,255,0) 8px 19px),
repeating-linear-gradient(8deg,rgba(150,140,130,.0) 0 23px,rgba(150,140,130,.06) 23px 24px)}
#flap::after{content:"";position:absolute;inset:0;opacity:.6;background-image:var(--noise)}
/* 描图纸下面慢慢流动的雾 */
#flap .mist{position:absolute;left:-30%;width:90%;height:34%;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(250,248,244,.62),rgba(250,248,244,0));will-change:transform;animation:mist 46s ease-in-out infinite alternate}
#flap .m1{top:8%}
#flap .m2{top:40%;height:28%;animation-duration:58s;animation-delay:-20s}
#flap .m3{top:66%;height:30%;animation-duration:38s;animation-delay:-9s;opacity:.8}
@keyframes mist{from{transform:translateX(0)}to{transform:translateX(70%)}}
@media (prefers-reduced-motion:reduce){#flap .mist{animation:none}}
.fold-line{position:absolute;left:0;top:0;bottom:0;border-left:1px dashed rgba(130,105,85,.45)}
#foldGlow{position:absolute;left:-10px;top:0;bottom:0;width:20px;opacity:0;
background:linear-gradient(90deg,rgba(255,250,235,0),rgba(255,248,226,.85),rgba(255,250,235,0));transition:opacity .2s}
/* 被风掀起的纸角（右下角） */
#curl{position:absolute;right:0;bottom:0;width:44px;height:44px;transform-origin:100% 100%;transform:scale(0);pointer-events:none;
background:linear-gradient(135deg,rgba(0,0,0,0) 49%,#EFE4D4 50%,#F8F1E6 72%,#E6D8C5);
filter:drop-shadow(-2px -2px 3px rgba(94,75,58,.22));clip-path:polygon(100% 0,100% 100%,0 100%)}
.grain{position:absolute;inset:0;pointer-events:none;background-image:var(--noise);opacity:.55}
/* ---------- 纸张 ---------- */
.paper{background:var(--paper);background-image:var(--noise);border-radius:4px;
box-shadow:0 1px 2px rgba(90,70,50,.12),0 10px 30px rgba(90,70,50,.18)}
.torn{clip-path:polygon(0 3px,6% 0,13% 2px,21% 0,30% 3px,38% 1px,47% 3px,55% 0,63% 2px,71% 0,80% 3px,88% 1px,95% 3px,100% 0,100% calc(100% - 3px),94% 100%,86% calc(100% - 2px),78% 100%,70% calc(100% - 3px),61% calc(100% - 1px),52% 100%,44% calc(100% - 3px),35% 100%,27% calc(100% - 2px),18% 100%,9% calc(100% - 3px),0 100%);
filter:drop-shadow(0 6px 14px rgba(90,70,50,.18))}
.paper-btn{min-height:44px;padding:0 18px;border:none;border-radius:3px;cursor:pointer;
font-size:15px;font-weight:600;letter-spacing:1px;color:#FBF7F0;background:var(--sage);
box-shadow:0 2px 0 #55634F,0 3px 8px rgba(70,60,40,.2);
clip-path:polygon(0 2px,8% 0,30% 2px,55% 0,80% 2px,100% 0,100% calc(100% - 2px),75% 100%,50% calc(100% - 2px),25% 100%,0 calc(100% - 1px))}
.paper-btn:active{transform:translateY(2px)}
.paper-btn.pink{background:var(--pink);box-shadow:0 2px 0 #935E53}
.paper-btn:focus-visible,.x:focus-visible{outline:2px solid #2C2C2B;outline-offset:2px}
/* ---------- 信纸 ---------- */
#letter{position:fixed;display:none;z-index:30;padding:26px 22px 18px;touch-action:none;will-change:transform}
#letterBody,.lp-inner{display:flex;flex-direction:column;height:100%}
.lp-inner{padding:26px 22px 18px;background:var(--paper);background-image:var(--noise);position:relative}
#letter h2,.lp-inner h2{font-size:20px;font-weight:600;line-height:1.3}
.to{font-size:13px;color:var(--ink2);margin:4px 0 12px}
#ta,.ta-static{flex:1;min-height:96px;width:100%;border:none;resize:none;outline:none;font-family:inherit;font-size:17px;line-height:32px;color:var(--ink);padding:0;
background:repeating-linear-gradient(transparent 0 31px,#E6D9C6 31px 32px);background-attachment:local;-webkit-user-select:text;user-select:text;overflow:hidden}
.ta-static{white-space:pre-wrap;overflow:hidden}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:12px}
.hint{font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:6px;white-space:nowrap}
.hint .up{font-style:normal;display:inline-block;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(-4px)}}
.stamp{position:absolute;top:18px;right:18px;width:44px;height:52px;border:2px dashed #CDB8A4;border-radius:4px;display:flex;align-items:center;justify-content:center}
#foldPaper{position:fixed;display:none;z-index:31;pointer-events:none}
#foldPaper .panel{position:absolute;left:0;width:100%;transform-style:preserve-3d}
#foldPaper .p0{z-index:3}#foldPaper .p1{z-index:1}#foldPaper .p2{z-index:2}
#foldPaper .face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#foldPaper .front{background:var(--paper);box-shadow:0 6px 18px rgba(90,70,50,.16)}
#foldPaper .back{transform:rotateX(180deg);background:#EFE6D8;background-image:var(--noise);box-shadow:inset 0 0 0 1px rgba(160,135,110,.18)}
#foldPaper .p0 .front{border-radius:4px 4px 0 0}#foldPaper .p2 .front{border-radius:0 0 4px 4px}
#foldPaper .shift{position:absolute;left:0;right:0}
#foldShape{position:fixed;display:none;z-index:31;pointer-events:none;--crease:0;
background:linear-gradient(115deg,#F7F0E5 0 48%,#E9DFD2 50%,#FBF7F0 52%);box-shadow:0 6px 16px rgba(90,70,50,.2)}
#flyBird{position:fixed;display:none;z-index:32;pointer-events:none;filter:drop-shadow(0 3px 4px rgba(94,75,58,.25))}
#ripple{position:fixed;display:none;z-index:6;width:60px;height:60px;border-radius:50%;pointer-events:none;
border:1.5px solid rgba(181,119,106,.55);box-shadow:0 0 0 6px rgba(217,175,163,.18)}
#whisper{position:fixed;display:none;z-index:45;pointer-events:none;max-width:calc(100vw - 32px);text-align:center;line-height:1.5;
font-size:14px;color:#5E4C3F;padding:6px 12px;background:rgba(251,247,240,.86);border-radius:2px;
box-shadow:0 2px 8px rgba(90,70,50,.14)}
/* ---------- 叶子翻面的小纸条：贴着叶簇弹出的小卡片 ---------- */
#noteVeil{position:fixed;inset:0;z-index:19;background:rgba(74,64,56,.06);opacity:0;pointer-events:none;transition:opacity .3s}
#noteVeil.on{opacity:1;pointer-events:auto}
#note{position:fixed;display:none;z-index:20;perspective:700px;cursor:pointer}
#note .flip{position:absolute;inset:0;transform-style:preserve-3d}
#note .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
#note .front{display:flex;align-items:center;justify-content:center}
#note .back{transform:rotateY(180deg);padding:10px 12px 9px;background:var(--paper);background-image:var(--noise);border-radius:3px;
box-shadow:0 1px 3px rgba(90,70,50,.14),0 8px 18px rgba(90,70,50,.18);display:flex;flex-direction:column;gap:5px}
#note .back.is-mine{border-top:3px solid #B6C2A8}#note .back.is-hers{border-top:3px solid #D5BBB0}
#note .tail{position:absolute;width:12px;height:12px;background:var(--paper);transform:rotate(45deg);box-shadow:2px 2px 3px rgba(90,70,50,.08)}
.n-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.n-day{font-family:var(--serif);font-size:14px;font-weight:600}
.n-who{font-size:11px;color:var(--ink2)}
.n-text{flex-shrink:0;font-size:13px;line-height:1.65;color:var(--ink);max-height:9.9em;overflow-y:auto;-webkit-user-select:text;user-select:text}
.n-text.locked{color:var(--ink2)}
.n-foot{font-size:11px;color:var(--ink2);display:flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
/* ---------- 第 30 天 ---------- */
.paper-strip{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 22px);z-index:8;display:none;
flex-direction:column;align-items:center;gap:2px;max-width:calc(100vw - 40px);
padding:9px 18px 8px;background:rgba(251,247,240,.92);font-size:15px;color:var(--ink);text-align:center;white-space:nowrap;pointer-events:none;
box-shadow:0 2px 8px rgba(90,70,50,.14);clip-path:polygon(0 2px,10% 0,40% 2px,70% 0,100% 2px,100% calc(100% - 2px),65% 100%,30% calc(100% - 2px),0 100%)}
.paper-strip .l1{display:flex;align-items:center;gap:10px}
.paper-strip small{font-size:12px;color:var(--ink2)}
.paper-strip .arr{color:#B5776A;font-size:18px;line-height:1;animation:pullL 1.8s ease-in-out infinite}
.paper-strip .arr.r{animation-name:pullR}
@keyframes pullL{50%{transform:translateX(-4px)}}@keyframes pullR{50%{transform:translateX(4px)}}
#finale{position:fixed;display:none;z-index:25;width:min(380px,calc(100vw - 32px));padding:22px 22px 20px}
#finale .k{font-size:13px;color:var(--ink2);letter-spacing:1px}
#finale h3{font-size:23px;font-weight:600;margin:4px 0 4px;line-height:1.35}
#finale p{color:var(--ink2);font-size:14.5px;margin-bottom:14px}
.stats{display:flex;gap:8px;margin-bottom:16px}
.stats div{flex:1;background:#F2EADD;border-radius:3px;padding:8px 6px;text-align:center}
.stats b{display:block;font-size:20px;font-weight:600;color:var(--ink);line-height:1.3}
.stats span{font-size:12px;color:var(--ink2);white-space:nowrap}
#picturebook{width:100%}
/* ---------- 添加到主屏幕 ---------- */
/* v0.7：让出顶部倒计时纸条（#clockStrip 在 sat+10、约 30px 高）——卡片放在纸条下面；pwa.js 会按纸条实际位置再校正 top。
底部的拖动提示 #panHint（sab+104 往上）和「回到树下」#homeBtn（左下）都在卡片下方，横屏时卡片变宽变矮、不放图标 */
#install{--iw:min(360px,calc(100vw - 32px));position:fixed;display:none;z-index:40;left:50%;margin-left:calc(var(--iw) / -2);
top:calc(var(--sat) + 54px);width:var(--iw);padding:16px 16px 16px 16px}
@media (orientation:landscape) and (max-height:520px){
#install{--iw:min(460px,calc(100vw - 32px - var(--sal) - var(--sar)));padding:11px 14px 12px}
#install img{display:none}
#install .i-row{padding-right:34px}
#install .x{top:0;right:0}
#installBtn{margin:8px 0 0;width:100%}
}
#install .i-row{display:flex;gap:12px;align-items:flex-start;padding-right:30px}
#install img{width:48px;height:48px;border-radius:11px;flex:none;box-shadow:0 1px 3px rgba(90,70,50,.2)}
.i-title{font-size:16px;font-weight:600;line-height:1.4}
.i-body{font-size:13px;line-height:1.6;color:var(--ink2);margin-top:2px}
.i-body b{color:var(--ink)}
.ico-share{display:inline-block;width:13px;height:15px;vertical-align:-2px;margin:0 1px;
background:no-repeat center/contain url("data:image/svg+xml;utf8,")}
#installBtn{margin:12px 0 0 60px;width:calc(100% - 60px)}
#installBtn[hidden]{display:none}
.x{position:absolute;top:4px;right:4px;width:44px;height:44px;border:none;background:none;font-size:22px;line-height:1;color:var(--ink2);cursor:pointer}
/* ---------- 调试 ---------- */
#debug{position:fixed;z-index:50;left:calc(var(--sal) + 10px);bottom:calc(var(--sab) + 10px);opacity:.55;
background:rgba(251,247,240,.9);border-radius:6px;padding:4px 10px;font-size:12px;color:var(--ink2)}
#debug:hover,#debug:active{opacity:.95}
#debug label{display:flex;align-items:center;gap:8px}
#debug input{width:140px;height:36px;accent-color:var(--sage)}
/* ---------- 收信 ---------- */
.perch{position:absolute;width:40px;height:33px;pointer-events:none;will-change:transform;filter:drop-shadow(0 2px 2px rgba(94,75,58,.35)) drop-shadow(0 0 4px rgba(255,250,238,.9))}
.perch.envelope{height:22px}
.perch svg{display:block}
.perch.flapping .wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap .28s ease-in-out infinite alternate}
#readLetter{position:fixed;display:none;z-index:30;padding:26px 22px 18px}
#readLetter h2{font-size:19px;font-weight:600;line-height:1.35;padding-right:44px}
.rl-text{font-size:16px;line-height:30px;color:var(--ink);margin-top:2px;padding-bottom:4px;
background:repeating-linear-gradient(transparent 0 29px,#E6D9C6 29px 30px);-webkit-user-select:text;user-select:text;overflow-y:auto;max-height:calc(100dvh - 220px)}
.rl-foot{font-size:12px;color:var(--ink2);text-align:center;margin-top:14px}
.rl-seal{position:absolute;top:18px;right:20px;width:30px;height:30px;border-radius:50%;background:#B8695D;box-shadow:inset 0 0 0 4px #C47A6C}
/* ---------- 彩蛋 ---------- */
#night{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:multiply;
background:linear-gradient(180deg,rgba(78,62,92,.62),rgba(104,84,104,.5) 55%,rgba(120,98,104,.42))}
#stage.night #worldTop{filter:brightness(.78) saturate(.85)}
#stage .sun{transition:opacity 1.6s}
#stage.night .sun{opacity:0}
#stage.blood .moon{opacity:0}
#stage .moon{transition:opacity 1.2s}
#rewind{position:fixed;inset:0;z-index:15;display:none;pointer-events:none;
background:repeating-linear-gradient(180deg,rgba(214,196,168,.0) 0 7px,rgba(214,196,168,.16) 7px 9px),rgba(222,204,176,.22);
animation:scan 1.2s linear infinite;mix-blend-mode:multiply}
@keyframes scan{to{background-position:0 -36px}}
.rw-mark{position:absolute;top:calc(var(--sat) + 16px);left:calc(var(--sal) + 16px);display:flex;align-items:center;gap:6px;color:#6E5A4A;font-size:15px;
background:rgba(251,247,240,.8);padding:4px 10px;border-radius:2px}
.rw-mark i{font-style:normal;font-size:12px;letter-spacing:-2px}
#rewind .rw-r{display:none}#rewind.fwd .rw-r{display:inline}#rewind.fwd .rw-l{display:none}#rewind.fwd i{transform:scaleX(-1)}
#tarotInvite{position:absolute;display:none;width:64px;height:62px;pointer-events:none;text-align:center}
#tarotInvite .ti-fog{position:absolute;left:0;top:30px;opacity:.95}
#tarotInvite .ti-card{position:absolute;left:21px;top:2px;filter:drop-shadow(0 2px 2px rgba(60,50,60,.3))}
#tarotInvite span{position:absolute;left:0;right:0;top:46px;font-size:9px;color:#5E5560;letter-spacing:1px}
/* ---------- 塔罗会 ---------- */
#tarot{position:fixed;inset:0;z-index:35;display:none;flex-direction:column;align-items:center;overflow:hidden;
padding:calc(var(--sat) + 22px) calc(var(--sar) + 18px) calc(var(--sab) + 18px) calc(var(--sal) + 18px);
background:linear-gradient(180deg,#77727E 0%,#8F8A94 38%,#ABA5AC 70%,#BDB6B8 100%);color:#F6F0E6}
.t-fog,.t-stars{position:absolute;inset:0;pointer-events:none}
.fogsvg{position:absolute;opacity:.55}
.t-stars svg{position:absolute}
.t-head{position:relative;text-align:center}
.t-k{font-size:12px;letter-spacing:2px;opacity:.85}
.t-head h2{font-size:24px;font-weight:600;margin-top:2px;letter-spacing:1px}
.t-sub{font-size:12px;opacity:.8}
.t-table{position:relative;display:flex;gap:22px;margin:18px 0 12px;justify-content:center}
.t-seat{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(122px,36vw)}
.t-card{width:100%;aspect-ratio:100/160;perspective:900px}
.t-in{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.t-in svg{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 6px 10px rgba(40,34,44,.35))}
.t-in .t-face{transform:rotateY(180deg)}
.t-cardname{font-size:15px;font-weight:600;margin-top:6px}
.t-name{font-size:12px;opacity:.85}
.t-reading{position:relative;flex:1;min-height:0;width:min(380px,100%);overflow-y:auto;padding:14px 16px;color:var(--ink);font-size:14px;line-height:1.75}
.t-reading p+p{margin-top:8px}
.qt{color:#8B5E52}
#tClose{position:relative;margin-top:12px;width:min(380px,100%);background:#6E6874;box-shadow:0 2px 0 #4F4A55}
/* ---------- 绘本 ---------- */
#book{position:fixed;inset:0;z-index:38;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
padding:calc(var(--sat) + 52px) calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px);
background:radial-gradient(ellipse at 50% 40%,rgba(243,236,225,.92),rgba(214,200,178,.96))}
#bookClose{top:calc(var(--sat) + 6px);right:calc(var(--sar) + 6px);z-index:3}
#bookPages{position:relative;width:min(360px,100%);flex:1;min-height:0;max-height:760px;transform-style:preserve-3d}
.b-page{position:absolute;inset:0;transform-style:preserve-3d;border-radius:2px 6px 6px 2px;
box-shadow:inset 6px 0 10px -6px rgba(90,70,50,.35),0 1px 2px rgba(90,70,50,.12),0 10px 26px rgba(90,70,50,.18)}
.b-front,.b-backside{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit}
.b-backside{transform:rotateY(180deg);background:#EFE6D8;background-image:var(--noise)}
.b-shade{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;background:linear-gradient(90deg,rgba(90,70,50,.0),rgba(90,70,50,.35))}
.b-scroll{position:absolute;inset:0 0 26px;overflow-y:auto;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);padding:22px 20px 8px;-webkit-overflow-scrolling:touch}
.b-num{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:11px;color:var(--ink2)}
.b-k{font-size:12px;color:var(--ink2);letter-spacing:1px}
.b-h{font-size:22px;font-weight:600;margin:2px 0 10px;line-height:1.35}
.b-viz{background:#F7F1E7;border-radius:4px;padding:8px 4px;margin-bottom:12px;box-shadow:inset 0 0 0 1px #EDE3D4}
.viz{display:block}
.b-text{font-size:14px;line-height:1.8;color:var(--ink)}
.b-text p+p{margin-top:8px}
.b-page.private .b-front{background:linear-gradient(180deg,#F8EFEA,#FBF7F0 30%)}
.b-page.private .b-viz{background:#F6ECE6}
.cover .b-scroll{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:6px}
.b-title{font-size:23px;font-weight:600;line-height:1.4}
.b-arch{font-size:28px;font-weight:600;color:#6F5446;margin-top:4px}
.b-line{font-size:14px;color:var(--ink2);line-height:1.7;max-width:280px}
.b-also{font-size:13px;color:var(--ink2)}
.b-foot{font-size:12px;color:var(--ink2);margin-top:8px}
#bookDots{display:flex;gap:8px;justify-content:center}
#bookDots i{width:7px;height:7px;border-radius:50%;background:#CDBBA5;cursor:pointer;position:relative}
#bookDots i::after{content:"";position:absolute;inset:-9px}
#bookDots i.on{background:#8B5E52}
.b-hint{font-size:11px;color:var(--ink2)}
/* 调试：模拟键盘弹起 */
#fakeKb{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;pointer-events:none;
background:linear-gradient(#D3D6DB,#C9CCD2);border-top:1px solid #B9BCC2}
#fakeKb::before{content:"";position:absolute;inset:10px 6px;background:repeating-linear-gradient(90deg,#FDFDFE 0 32px,transparent 32px 38px);
-webkit-mask:repeating-linear-gradient(180deg,#000 0 40px,transparent 40px 52px);mask:repeating-linear-gradient(180deg,#000 0 40px,transparent 40px 52px);border-radius:5px}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
/* 截图时保持出帧 */
.keepalive{position:fixed;left:0;top:0;width:1px;height:1px;opacity:.01;animation:ka 1s linear infinite}
@keyframes ka{to{transform:translateX(1px)}}
/* ---------- v0.4 相机与可探索的世界 ---------- */
.par{position:absolute;left:0;top:0;width:400px;height:600px}
#stage.moving .world{will-change:transform}
#stage.low .layer.sway,#stage.low .layer.cloud{will-change:auto}
#stage.low #flap .mist{animation:none}
#flap.glow .fold-line{animation:crease 2.6s ease-in-out infinite}
@keyframes crease{0%,100%{box-shadow:0 0 0 rgba(250,230,170,0)}50%{box-shadow:0 0 14px 3px rgba(250,226,160,.75);border-left-color:rgba(214,170,90,.8)}}
@media (prefers-reduced-motion:reduce){#flap.glow .fold-line{animation:none;box-shadow:0 0 10px 2px rgba(250,226,160,.6)}}
#homeBtn{position:fixed;z-index:21;left:calc(var(--sal) + 14px);bottom:calc(var(--sab) + 16px + var(--lift,0px));min-height:40px;
padding:11px 16px 11px 36px;border:0;border-radius:3px 12px 4px 10px;font:600 15px/1 inherit;font-family:inherit;color:#5E4B3A;
background:#F7F0E3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2c-4 0-6 3-6 6 0 3 2 5 5 5v5h2v-5c3 0 5-2 5-5 0-3-2-6-6-6z' fill='%2393A387'/%3E%3C/svg%3E") 12px 50%/18px no-repeat;
box-shadow:0 0 0 1px rgba(94,75,58,.14),0 2px 0 rgba(94,75,58,.14),0 6px 16px rgba(94,75,58,.24);opacity:0;transform:translateY(14px) rotate(-2deg);pointer-events:none;transition:opacity .35s,transform .35s,bottom .35s}
#homeBtn.on{opacity:1;transform:none;pointer-events:auto}
/* v0.6 首次进入的拖动提示：一张小纸条 + 一只来回滑的小手；不挡手势、不挡顶部倒计时与底部按钮 */
#panHint{position:fixed;z-index:17;left:50%;bottom:calc(var(--sab) + 104px);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 40px);
padding:8px 18px 8px 10px;background:rgba(251,247,240,.93);color:var(--ink);font-size:15px;white-space:nowrap;pointer-events:none;
box-shadow:0 2px 8px rgba(90,70,50,.16);clip-path:polygon(0 2px,12% 0,45% 2px,75% 0,100% 2px,100% calc(100% - 2px),62% 100%,28% calc(100% - 2px),0 100%);
opacity:0;visibility:hidden;transform:translate(-50%,10px) rotate(-.8deg);transition:opacity .6s,transform .6s,visibility 0s .6s}
#panHint.on{opacity:1;visibility:visible;transform:translate(-50%,0) rotate(-.8deg);transition:opacity .45s,transform .45s,visibility 0s}
#panHint .ph-hand{flex:none;display:block;width:64px;height:40px}
#panHint .ph-finger{animation:phSwipe 2.2s ease-in-out infinite}
#panHint .ph-tap{animation:phTap 2.2s ease-in-out infinite;transform-origin:25.4px 6px}
@keyframes phSwipe{0%,8%{transform:translateX(14px)}46%,58%{transform:translateX(-12px)}100%{transform:translateX(14px)}}
@keyframes phTap{0%,6%{opacity:0;transform:scale(.6)}12%{opacity:.9;transform:scale(1)}46%{opacity:.6}54%,100%{opacity:0;transform:scale(1.5)}}
#panHint.still .ph-finger,#panHint.still .ph-tap{animation:none}
#panHint.still .ph-tap{opacity:.7}
@media (prefers-reduced-motion:reduce){#panHint,#panHint.on{transition:opacity .2s,visibility 0s}#panHint .ph-finger,#panHint .ph-tap{animation:none}}
#wpanel{position:fixed;display:none;z-index:31;inset:0;margin:auto;height:fit-content;width:min(340px,calc(100vw - 36px));max-height:calc(100dvh - 120px);overflow:auto;
padding:24px 20px 18px;-webkit-overflow-scrolling:touch}
#wpanel h2{font-size:19px;font-weight:600}
#wpanel .wp-sub,#wpanel .wp-dim{font-size:13px;color:#8E7A68;margin:6px 0 12px}
#wpanel .wp-x{position:absolute;right:10px;top:8px;width:36px;height:36px;border:0;background:none;font-size:24px;color:#8E7A68}
#wpanel .wp-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
#wpanel .wp-tarot{border:0;padding:8px 12px;border-radius:4px;background:#6B6680;color:#F4ECDD;font:inherit;font-size:13px}
#wpanel .wp-list{list-style:none;margin:0;padding:0;border-top:1px dashed #D6C6B2}
#wpanel .wp-list li{border-bottom:1px dashed #D6C6B2}
#wpanel .wp-day{display:block;width:100%;text-align:left;border:0;background:none;padding:11px 2px;font:inherit;font-size:15px;color:#5E4B3A}
#wpanel .wp-day::after{content:"›";float:right;color:#B79F86;transition:transform .2s}
#wpanel .wp-day.open::after{transform:rotate(90deg)}
#wpanel .wp-text{margin:0 2px 12px;font-size:15px;line-height:1.75;white-space:pre-wrap;color:#4A3B2E}
#wpanel.wp-stone{width:min(270px,calc(100vw - 60px));text-align:center;rotate:-1.5deg}
#wpanel .wp-note{font-size:16px;line-height:1.8;margin:8px 0 6px;color:#4A3B2E}
#wpanel .wp-sign{font-size:13px;color:#8E7A68}
#finale.tucked{cursor:pointer}
#finale.tucked button{pointer-events:none}
/* ---------- v0.5 联机：倒计时纸条 / 小菜单 / 询问 / 私下提醒 / 配对页 ---------- */
#clockStrip{position:fixed;z-index:18;top:calc(var(--sat) + 10px);left:50%;transform:translateX(-50%) rotate(-.6deg);max-width:calc(100vw - 120px);
display:flex;align-items:center;gap:7px;padding:6px 14px 6px 12px;border:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-size:12.5px;letter-spacing:.5px;color:var(--ink2);background:rgba(251,247,240,.86);background-image:var(--noise);
box-shadow:0 1px 2px rgba(90,70,50,.12),0 4px 10px rgba(90,70,50,.12);
clip-path:polygon(0 2px,10% 0,35% 2px,60% 0,85% 2px,100% 0,100% calc(100% - 2px),70% 100%,40% calc(100% - 2px),15% 100%,0 calc(100% - 1px))}
#clockStrip i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--sage);opacity:.75}
#stage.night ~ #clockStrip,.night #clockStrip{background:rgba(240,232,220,.78)}
#askVeil{position:fixed;inset:0;z-index:58;display:none;background:rgba(74,64,56,.18)}
#ask{position:fixed;z-index:60;display:none;left:50%;top:50%;width:min(330px,calc(100vw - 40px));translate:-50% -50%;padding:24px 22px 18px;
-webkit-user-select:text;user-select:text}
#ask h3{font-size:18px;margin-bottom:10px}
#ask p{font-size:14.5px;color:var(--ink2);margin-bottom:6px;line-height:1.65}
.a-btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.paper-btn.ghost{background:#EDE4D6;color:var(--ink);box-shadow:0 2px 0 #CDBFAB}
#menu{position:fixed;z-index:59;display:none;left:50%;top:calc(var(--sat) + 52px);translate:-50% 0;width:min(340px,calc(100vw - 32px));padding:22px 20px 16px;
max-height:calc(100dvh - var(--sat) - var(--sab) - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#menu .m-k{font-family:var(--serif);font-size:17px;font-weight:600;margin:0 30px 6px 0}
#menu .m-line{font-size:14px;color:var(--ink);margin-bottom:12px}
#menu .m-push{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
#menu .m-sub{display:block;font-size:12.5px;color:var(--ink2);line-height:1.6;margin-bottom:10px}
#menu .m-dev{display:flex;flex-wrap:wrap;gap:6px;padding:10px;margin:4px 0 12px;border:1px dashed var(--line);border-radius:4px;font-size:12px}
#menu .m-dev b{width:100%;color:var(--ink2);font-weight:500}
#menu .m-dev button{font-size:12px;padding:6px 9px;border:none;border-radius:3px;background:#EDE4D6;color:var(--ink);cursor:pointer}
#menu .m-cal,.g-cal{margin-bottom:12px}
#menu .m-cal .paper-btn,.g-early .paper-btn{width:100%}
.m-cal select{font:inherit;font-size:12.5px;color:var(--ink);background:#F2EADD;border:1px solid var(--line);border-radius:3px;padding:1px 2px}
.m-calHelp{font-size:12.5px;line-height:1.6;color:var(--ink);background:#F2EADD;border-radius:3px;padding:8px 10px;margin-top:-2px}
.m-calHelp p{margin:0 0 4px}
.m-calHelp .g-link{display:block;padding:4px 0;font-size:12.5px}
.m-calTxt{white-space:pre-wrap;font:12px/1.6 inherit;font-family:inherit;margin:4px 0 0;-webkit-user-select:text;user-select:text}
.g-cal .m-sub{display:block;font-size:12.5px;color:var(--ink2);line-height:1.6;margin:6px 0 8px}
.g-early{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);text-align:left}
#menu .m-out{border:none;background:none;color:#A0705F;font-size:13px;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#safety{position:fixed;z-index:57;display:none;left:50%;top:50%;translate:-50% -50%;width:min(340px,calc(100vw - 36px));max-height:calc(100vh - 80px);overflow:auto;
padding:24px 22px 18px;-webkit-user-select:text;user-select:text;background-color:#FBF5EE}
#safety .sf-k{font-size:12px;letter-spacing:2px;color:var(--pink);margin-bottom:10px}
#safety p{font-size:14.5px;line-height:1.75;margin-bottom:8px}
#safety ul{list-style:none;margin:8px 0 4px;font-size:14px}
#safety li{padding:6px 0;border-top:1px dashed var(--line)}
#safety li small{display:block;color:var(--ink2)}
#safety a{color:var(--sage)}
#safety .paper-btn{width:100%;margin-top:10px}
.link-btn{border:none;background:none;color:var(--ink2);font-size:13px;padding:10px 6px;margin-left:auto;margin-right:8px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#letter .row .link-btn + .paper-btn{margin-left:0}
#gate{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:calc(var(--sat) + 28px) 18px calc(var(--sab) + 28px);
background:linear-gradient(180deg,#E9DCC9 0,#EFE5D6 52%,#D9C8AE 52.2%,#CDB997 100%)}
#gate::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:var(--noise);opacity:.5}
.g-card{position:relative;width:min(380px,100%);margin:auto 0;padding:26px 24px 22px;-webkit-user-select:text;user-select:text}
.g-art{display:block;width:120px;height:64px;margin:-4px auto 12px}
.g-card h1{font-size:30px;letter-spacing:6px;text-align:center;margin-bottom:10px}
.g-card h2{font-size:21px;letter-spacing:1px;text-align:center;margin-bottom:10px}
.g-letter{position:relative;margin:4px 0 18px;padding:16px 18px 12px;background:#FBF6EC;border-radius:3px;box-shadow:0 1px 0 rgba(120,96,70,.08),0 6px 16px -10px rgba(90,70,50,.45);color:var(--ink2);font-size:15px;line-height:1.85;transform:rotate(-.6deg)}
.g-letter p{margin:0}
.g-letter .gl-to{margin-bottom:6px;color:var(--ink,#4A3F35)}
.g-letter .gl-sign{text-align:right;margin-top:10px}
.g-p{font-size:14.5px;line-height:1.75;color:var(--ink2);margin-bottom:16px}
.g-p b{color:var(--pink);font-weight:600}
.g-main{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:10px;font-size:16px}
.g-main small{font-size:11.5px;font-weight:400;letter-spacing:.5px;opacity:.85}
.g-main:disabled{opacity:.45;cursor:default}
.g-links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:14px}
.g-link{border:none;background:none;color:var(--ink2);font-size:13px;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.g-f{display:block;margin-bottom:12px}
.g-f span{display:block;font-size:13px;color:var(--ink2);margin-bottom:4px}
.g-f input{width:100%;height:44px;padding:0 12px;font-size:16px;color:var(--ink);font-family:inherit;border:none;border-bottom:1.5px solid #CDBFAB;border-radius:3px 3px 0 0;
background:rgba(237,228,214,.55);outline:none;-webkit-user-select:text;user-select:text;-webkit-appearance:none;appearance:none}
.g-f input:focus{border-bottom-color:var(--sage);background:rgba(237,228,214,.85)}
.g-f small{display:block;font-size:11.5px;color:#9A8C7B;margin-top:3px}
.g-code{margin:6px auto 12px;padding:14px 10px;text-align:center;font-size:24px;font-weight:600;letter-spacing:3px;color:var(--ink);word-break:break-all;
background:#F1E8DA;border:1.5px dashed #CDBFAB;border-radius:4px;-webkit-user-select:all;user-select:all}
.g-url{font-size:12px;color:var(--ink2);text-align:center;word-break:break-all;margin:-4px 0 12px;-webkit-user-select:all;user-select:all}
.g-row{display:flex;gap:10px}.g-row .paper-btn{flex:1}
.g-row .paper-btn[hidden]{display:none}
.g-check{display:flex;align-items:center;gap:8px;font-size:14px;margin:14px 0 2px;cursor:pointer}
.g-check input{width:20px;height:20px;accent-color:var(--sage)}
.g-wait{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:14px;color:var(--ink2)}
.g-wait i{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:gwait 1.4s ease-in-out infinite}
@keyframes gwait{50%{opacity:.25;transform:scale(.7)}}
.g-small{display:block;text-align:center;font-size:11.5px;color:#9A8C7B;margin-top:6px}
.g-err{display:none;margin-top:12px;padding:8px 10px;font-size:13px;line-height:1.6;color:#8E5446;background:rgba(217,175,163,.25);border-radius:3px}
.g-card > .paper-btn.ghost{width:100%}