/* ═══════════════════════════════════════════════════════════
   词不达意 · 第一关  —— 纸质拼贴 / 剪纸插片风格
   配色取自第一关背景图：苔绿、暖纸黄、墨褐；红心皇后的樱桃红作点缀
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#f4ecd8; --paper2:#ece0c0; --paper3:#e3d3ac;
  --note:#f2e6b4; --note-band:#e6d48f;
  --ink:#2e281d; --ink2:#5a4c36; --ink3:#8a7a5c;
  --moss:#4b6638; --moss2:#6f8a4e;
  --gold:#b48a3c; --red:#a63e2c;
  --quill:#cfe2ff; --quill2:#7ea6e0;
  --pen-font:'Noto Serif SC','Songti SC','STSong',serif;
  --hand:'Long Cang','ZCOOL XiaoWei','Kaiti SC','STKaiti',cursive;
  --title:'ZCOOL XiaoWei','Noto Serif SC','Songti SC',serif;
  --cut-shadow:drop-shadow(0 5px 3px rgba(25,30,15,.38)) drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#171b14;font-family:var(--pen-font);color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:focus-visible{outline:2px dashed var(--red);outline-offset:3px}
.hidden{display:none!important}
.key{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border:1.5px solid currentColor;border-radius:5px;font:600 13px/1 'Noto Serif SC',serif;box-shadow:0 2px 0 currentColor;margin-right:6px;transform:translateY(-1px)}

/* 舞台：固定 1600×900 逻辑分辨率，整体缩放；外围是旧书桌 */
body:before{content:'';position:fixed;inset:0;background:
  radial-gradient(ellipse at 50% 40%,#2a3122 0%,#14170f 75%);}
#stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:0 0;overflow:hidden;background:#20281b;box-shadow:0 30px 80px #000a}

/* ───────────── 场景层 ───────────── */
#scene{position:absolute;inset:0;overflow:hidden}
.layer{position:absolute;left:0;top:0;height:900px;will-change:transform}
.sky-img{position:absolute;top:-30px;left:0;height:940px;display:block;filter:saturate(.92) contrast(.96)}
/* 远景时间流动：左侧黎明薄雾 → 右侧午后金光 */
#sky-time{position:absolute;top:-30px;left:0;height:940px;width:100%;
  background:linear-gradient(90deg,rgba(110,140,165,.42) 0%,rgba(150,170,175,.18) 22%,rgba(255,255,255,0) 45%,rgba(255,214,140,.08) 75%,rgba(255,190,110,.22) 100%);mix-blend-mode:soft-light}
#sky-time:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,250,230,.0) 40%,rgba(40,50,30,.25) 100%)}
#L-mist i{position:absolute;top:430px;width:1400px;height:260px;border-radius:50%;background:radial-gradient(ellipse,rgba(250,248,235,.42),rgba(250,248,235,0) 68%);animation:mist 38s linear infinite}
#L-mist i:nth-child(2){left:1500px;top:500px;animation-duration:52s;opacity:.7}
#L-mist i:nth-child(3){left:3000px;top:400px;animation-duration:44s}
@keyframes mist{0%{transform:translateX(-120px)}50%{transform:translateX(120px)}100%{transform:translateX(-120px)}}

.prop{position:absolute;transform-origin:50% 100%;filter:var(--cut-shadow)}
.prop img{display:block;width:100%;height:auto;pointer-events:none}
.sway{animation:sway var(--sw,7s) ease-in-out infinite;animation-delay:var(--sd,0s)}
@keyframes sway{0%,100%{transform:rotate(calc(var(--sa,.8deg) * -1))}50%{transform:rotate(var(--sa,.8deg))}}
#L-far .prop{opacity:.72;filter:sepia(.35) saturate(.5) brightness(.85) blur(1.2px)}
#L-front .prop{filter:brightness(.42) saturate(.7) blur(3px);opacity:.92}

#ground{position:absolute;left:0;top:715px;height:200px;overflow:visible}
#player{position:absolute;left:0;top:0;width:0;height:0;z-index:5}
#player-sprite{position:absolute;bottom:0;transform-origin:50% 100%;background-repeat:no-repeat;filter:var(--cut-shadow)}
#player-shadow{position:absolute;left:-55px;bottom:-10px;width:110px;height:18px;border-radius:50%;background:radial-gradient(ellipse,rgba(20,25,10,.45),rgba(20,25,10,0) 70%);z-index:-1}

/* 交互物上方的问号：一张别针钉住的小纸片 */
.ask{position:absolute;left:50%;top:-58px;width:40px;height:46px;margin-left:-20px;background:var(--paper);border-radius:3px 3px 3px 14px;
  display:grid;place-items:center;font:900 28px/1 var(--title);color:var(--red);box-shadow:0 4px 0 rgba(0,0,0,.12),0 6px 10px rgba(0,0,0,.25);
  animation:bob 1.6s ease-in-out infinite;transform:rotate(-6deg);z-index:6}
.ask:before{content:'';position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--red);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* 羽毛笔 */
#quill{position:absolute;width:120px;height:160px;transform-origin:50% 100%}
#quill .qimg{position:absolute;left:50%;bottom:0;height:190px;width:auto;margin-left:-50px;transform-origin:50% 100%;filter:drop-shadow(0 4px 3px rgba(25,30,15,.35)) drop-shadow(0 0 10px rgba(170,205,255,.85)) drop-shadow(0 0 24px rgba(120,170,255,.5));animation:qfloat 3s ease-in-out infinite}
@keyframes qfloat{0%,100%{transform:translateY(0) rotate(-14deg)}50%{transform:translateY(-12px) rotate(-8deg)}}
#quill .halo{position:absolute;left:50%;bottom:-6px;width:160px;height:30px;margin-left:-80px;border-radius:50%;background:radial-gradient(ellipse,rgba(190,220,255,.65),rgba(190,220,255,0) 70%);animation:halo 3s ease-in-out infinite}
@keyframes halo{50%{opacity:.5;transform:scaleX(.8)}}

/* 枯树 */
#tree{position:absolute;transition:transform 2.6s cubic-bezier(.45,.05,.25,1),filter 2.6s,left 2.6s cubic-bezier(.45,.05,.25,1),top 2.6s cubic-bezier(.45,.05,.25,1)}
#tree img{display:block;width:100%}
#tree .core-glow{position:absolute;left:58%;top:42%;width:60px;height:40px;border-radius:50%;background:radial-gradient(ellipse,rgba(170,220,120,.75),rgba(170,220,120,0) 70%);mix-blend-mode:screen;animation:halo 2.6s ease-in-out infinite;pointer-events:none}
#tree.moved{filter:brightness(.72) saturate(.7) drop-shadow(0 4px 3px rgba(25,30,15,.35))}
#tree.shake{animation:shake .45s}
@keyframes shake{20%{translate:-8px 0}40%{translate:7px 0}60%{translate:-5px 0}80%{translate:3px 0}}

/* 睡鼠（剪影占位，与 NPC 草图同为黑色剪影） */
#mouse{position:absolute;width:120px;height:100px}
#mouse .msil{position:absolute;left:0;bottom:0;width:120px;height:auto;z-index:2;opacity:0;transform:translateY(40px) scale(.8);transition:transform .9s cubic-bezier(.3,1.6,.5,1),opacity .3s;filter:var(--cut-shadow)}
#mouse.up .msil{opacity:1;transform:translateY(-120px) scale(1)}
#mouse-grass{position:absolute;left:-120px;bottom:-22px;width:360px}
#mouse-grass.rustle{animation:rustle .35s ease-in-out 6}
@keyframes rustle{25%{transform:rotate(-2.5deg) translateX(-3px)}75%{transform:rotate(2.5deg) translateX(3px)}}

/* 路牌手写字 */
.sign-word{position:absolute;font:22px/1 var(--hand);color:#3a2c1c;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.4)}

/* 出口：书页裂缝 */
#rift{position:absolute;width:150px;height:440px}
#rift .slit{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,244,210,0),#fff8e6 40%,#fffdf6 50%,#fff8e6 60%,rgba(255,244,210,0));
  clip-path:polygon(50% 0,58% 10%,54% 20%,62% 33%,55% 45%,63% 58%,56% 70%,61% 84%,52% 100%,45% 86%,40% 72%,46% 58%,38% 45%,45% 32%,39% 20%,46% 9%);
  filter:drop-shadow(0 0 18px #fff3c4);animation:rift 2.4s ease-in-out infinite}
#rift .glow{position:absolute;left:-120px;right:-120px;top:20%;bottom:0;background:radial-gradient(ellipse at 50% 70%,rgba(255,236,170,.55),rgba(255,236,170,0) 60%);mix-blend-mode:screen}
@keyframes rift{50%{transform:scaleX(1.35);opacity:.85}}

/* 远处跑过的白兔 / 柴郡猫彩蛋 */
#far-rabbit{position:absolute;width:86px;opacity:0}
#far-rabbit.run{animation:rabbitrun 4.2s linear forwards}
@keyframes rabbitrun{0%{opacity:0;transform:translateX(0) translateY(0)}8%{opacity:1}
  10%{transform:translateX(-50px) translateY(-14px)}15%{transform:translateX(-100px) translateY(0)}20%{transform:translateX(-150px) translateY(-14px)}25%{transform:translateX(-200px) translateY(0)}30%{transform:translateX(-250px) translateY(-14px)}35%{transform:translateX(-300px) translateY(0)}40%{transform:translateX(-350px) translateY(-14px)}45%{transform:translateX(-400px) translateY(0)}50%{transform:translateX(-450px) translateY(-14px)}55%{transform:translateX(-500px) translateY(0)}60%{transform:translateX(-550px) translateY(-14px)}65%{transform:translateX(-600px) translateY(0)}70%{transform:translateX(-650px) translateY(-14px)}75%{transform:translateX(-700px) translateY(0)}80%{transform:translateX(-750px) translateY(-14px)}85%{transform:translateX(-800px) translateY(0)}92%{opacity:1}100%{opacity:0;transform:translateX(-900px) translateY(0)}}
#far-cat{position:absolute;width:90px;opacity:0;transition:opacity 2.5s}
#far-cat.show{opacity:.85}

#grainfx{position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .4 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 55%,rgba(18,14,6,.55) 100%)}
#fx{position:absolute;inset:0;pointer-events:none;z-index:30}
.bit{position:absolute;will-change:transform,opacity}

/* ───────────── 通用纸片 ───────────── */
.scrap{position:relative;background:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 0 -3px rgba(0,0,0,.08),0 8px 18px rgba(0,0,0,.28)}
.scrap:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .52 0 0 0 0 .38 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tape{position:absolute;width:96px;height:28px;background:rgba(214,196,140,.62);z-index:3;
  clip-path:polygon(0 0,4% 18%,0 36%,4% 54%,0 72%,4% 90%,0 100%,100% 100%,96% 82%,100% 64%,96% 46%,100% 28%,96% 10%,100% 0)}
.tape.t1{top:-12px;left:50%;margin-left:-48px;transform:rotate(-3deg)}
.tape.t2{top:-14px;left:28px;transform:rotate(-7deg);background:rgba(166,62,44,.5)}
.tape.t3{top:-13px;right:20px;transform:rotate(6deg);width:70px}
.tape.t4{bottom:-12px;right:40px;transform:rotate(-4deg);width:80px;background:rgba(120,150,100,.55)}

/* ───────────── HUD ───────────── */
#hud{position:absolute;left:0;right:0;top:0;height:120px;z-index:20;pointer-events:none}
#hud>*{pointer-events:auto}
#hud-life{position:absolute;left:30px;top:26px;display:flex;align-items:center;gap:14px;padding:12px 22px 12px 16px;transform:rotate(-1.5deg)}
.hud-cap{font:24px/1 var(--title);color:var(--ink2);border-right:1.5px dashed var(--ink3);padding-right:12px}
#hearts{display:flex;gap:10px}
/* 生命值：几何占位（待美术替换） */
.heart{width:22px;height:22px;position:relative;transform:rotate(45deg) scale(.9);transition:transform .3s,opacity .3s}
.heart:before,.heart:after,.heart i{position:absolute;background:var(--red)}
.heart i{inset:6px 0 0 6px}
.heart:before{content:'';width:16px;height:16px;border-radius:50%;left:0;top:6px}
.heart:after{content:'';width:16px;height:16px;border-radius:50%;left:6px;top:0}
.heart.lost{opacity:.22;filter:grayscale(1);transform:rotate(45deg) scale(.7)}
.heart.lost:before,.heart.lost:after,.heart.lost i{background:var(--ink3)}
.heart.hit{animation:hit .5s}
@keyframes hit{30%{transform:rotate(45deg) scale(1.4)}60%{transform:rotate(30deg) scale(.6)}}

#hud-title{position:absolute;left:50%;top:22px;transform:translateX(-50%) rotate(.6deg);padding:14px 34px 12px;text-align:center;background:#efe5c9}
#hud-title small{display:block;font:13px/1.3 var(--pen-font);letter-spacing:3px;color:var(--ink3)}
#hud-title b{display:block;font:400 25px/1.3 var(--title);letter-spacing:4px;color:var(--ink);margin-top:2px}

#hud-right{position:absolute;right:28px;top:22px;display:flex;align-items:center;gap:14px}
#pens{display:flex;gap:8px;padding:8px 10px;background:rgba(244,236,216,.16);border:1.5px dashed rgba(244,236,216,.45);border-radius:40px}
.pen{width:52px;height:52px;border-radius:50%;position:relative;background:var(--paper);box-shadow:0 4px 8px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .2s}
.pen-n{font:900 18px/1 var(--title)}
.pen-name{font:11px/1 var(--pen-font);color:var(--ink3);margin-top:3px}
.pen.locked{background:rgba(244,236,216,.25);color:rgba(244,236,216,.75);box-shadow:none;border:1.5px dashed rgba(244,236,216,.6)}
.pen.locked .pen-name{color:rgba(244,236,216,.6)}
.pen.active{background:var(--quill);box-shadow:0 0 0 3px #fff,0 0 18px rgba(150,190,255,.9);transform:translateY(-2px)}
.pen.active .pen-name{color:#34507a}
#btn-scroll{padding:14px 20px;font:600 17px/1 var(--pen-font);display:flex;align-items:center;transform:rotate(1.5deg);transition:transform .2s}
#btn-scroll:hover:not(.disabled){transform:rotate(0) translateY(-2px)}
#btn-scroll.disabled{opacity:.45;cursor:not-allowed}
#btn-scroll.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(207,226,255,.6),0 8px 18px rgba(0,0,0,.28)}}
#btn-mute{width:44px;height:44px;border-radius:50%;background:rgba(244,236,216,.18);color:var(--paper);font-size:20px;border:1.5px solid rgba(244,236,216,.5)}
#btn-mute.off{opacity:.45;text-decoration:line-through}

#keyhint{position:absolute;z-index:19;transform:translate(-50%,-100%);padding:7px 14px 7px 10px;background:var(--paper);border-radius:4px;font:15px/1 var(--pen-font);box-shadow:0 6px 14px rgba(0,0,0,.3);display:flex;align-items:center;white-space:nowrap}
#keyhint:after{content:'';position:absolute;bottom:-7px;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:var(--paper);border-bottom:0}

/* ───────────── 对话：长便签纸 ───────────── */
#dialog{position:absolute;left:0;right:0;bottom:26px;z-index:24;display:flex;justify-content:center;pointer-events:none}
#dlg-note{pointer-events:auto;position:relative;width:1080px;min-height:130px;padding:32px 56px 26px 60px;transform:rotate(-.5deg);cursor:pointer;
  background:linear-gradient(180deg,var(--note-band) 0 18px,var(--note) 18px);
  box-shadow:0 2px 0 rgba(255,255,255,.4) inset,0 14px 26px rgba(0,0,0,.35);
  clip-path:polygon(0 0,100% 0,100% 92%,98% 95%,96% 93%,93% 97%,90% 94%,86% 98%,82% 95%,77% 97%,72% 94%,66% 98%,60% 95%,54% 97%,48% 94%,42% 98%,36% 95%,30% 97%,24% 94%,18% 98%,12% 95%,7% 97%,3% 94%,0 97%);
  animation:noteIn .35s cubic-bezier(.2,1.4,.4,1)}
#dlg-note:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .52 0 0 0 0 .3 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes noteIn{from{transform:rotate(-2deg) translateY(40px);opacity:0}}
#dlg-name{position:absolute;top:-4px;left:150px;padding:6px 18px 6px 16px;font:400 22px/1 var(--title);letter-spacing:3px;color:#fff;background:var(--ink2);transform:rotate(-2deg);box-shadow:0 4px 8px rgba(0,0,0,.25)}
#dlg-name:empty{display:none}
#dlg-name.yuanmo{background:#33507a}
#dlg-name.yuanmo:before{content:'✒ ';font-size:17px;opacity:.85}
#dlg-name.mouse{background:#6e5a3f}
#dlg-text{position:relative;z-index:1;font:400 23px/1.75 var(--pen-font);color:var(--ink);min-height:80px;letter-spacing:.5px}
#dlg-text.narr{font-style:italic;color:var(--ink2);font-size:23px}
#dlg-text.narr:before{content:'— ';color:var(--ink3)}
#dlg-text em{font-style:normal;color:#2f5c9a;font-weight:600;background:linear-gradient(transparent 62%,rgba(150,190,255,.45) 62%)}
#dlg-next{position:absolute;right:46px;bottom:22px;font:14px/1 var(--pen-font);color:var(--ink3);display:flex;align-items:center;opacity:0;transition:opacity .2s;z-index:1}
#dlg-next.on{opacity:1;animation:bob 1.2s ease-in-out infinite}

/* ───────────── 新手引导 ───────────── */
#spot{position:absolute;z-index:26;border-radius:22px;box-shadow:0 0 0 3000px rgba(10,13,8,.72),0 0 0 3px rgba(244,236,216,.75) inset;transition:all .45s cubic-bezier(.4,0,.2,1);pointer-events:none}
#tip{position:absolute;z-index:27;width:340px;padding:22px 24px 18px;background:#fbf4dd;font:20px/1.65 var(--pen-font);color:var(--ink);transform:rotate(-1.2deg);box-shadow:0 14px 30px rgba(0,0,0,.45);animation:noteIn .35s cubic-bezier(.2,1.4,.4,1)}
#tip b{color:var(--red)}
#tip .key{color:var(--ink)}
#tip-ok{margin-top:12px;padding:8px 18px;background:var(--ink2);color:var(--paper);font:16px/1 var(--pen-font);border-radius:3px}

/* ───────────── 词语卷轴（羊皮纸 + 描金） ───────────── */
#scroll-wrap{position:absolute;inset:0;z-index:25;display:grid;place-items:center;background:rgba(12,16,10,.55);animation:fade .3s}
@keyframes fade{from{opacity:0}}
#scroll{position:relative;width:1400px;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
#parch-in:after{bottom:-17px;left:50%;transform:translateX(-50%) rotate(180deg)}
#parch-in header{text-align:center;position:relative}
.sc-eyebrow{font:13px/1 var(--pen-font);letter-spacing:5px;color:var(--ink3)}
#sc-title{margin:8px 0 0;font:400 36px/1.2 var(--title);letter-spacing:8px;color:#4a3216}
#sc-close{position:absolute;right:-20px;top:-6px;font:15px/1 var(--pen-font);color:var(--ink2);display:flex;align-items:center;padding:6px 10px;border-radius:4px}
#sc-close:hover{background:rgba(120,80,30,.1)}
#sc-passage{margin:18px 0 8px;font:18px/1.95 var(--pen-font);color:#4b3b24;text-indent:2em;text-align:justify;max-height:180px;overflow:auto}
#sc-passage .pi{display:inline-block;width:2em;height:1px}
#sc-passage .key-line{color:#7a2e1e;background:linear-gradient(transparent 65%,rgba(180,138,60,.35) 65%)}
#sc-core{margin:12px 0 6px;text-align:center}
.sc-label{display:inline-block;font:13px/1 var(--pen-font);letter-spacing:6px;color:var(--gold);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:6px 14px;margin-bottom:16px}
#slots{display:flex;justify-content:center;align-items:flex-end;gap:16px;min-height:86px}
.slot{min-width:140px;height:78px;border-bottom:3px solid #6b4a22;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;position:relative;transition:background .2s}
.slot:before{content:'';position:absolute;inset:0 0 -3px;border:2px dashed rgba(107,74,34,.35);border-bottom:0;border-radius:6px 6px 0 0}
.slot.over{background:rgba(207,226,255,.45)}
.slot.hl{animation:slothl 1.2s ease-in-out infinite}
@keyframes slothl{50%{background:rgba(207,226,255,.55)}}
#slots .tail{font:40px/1 var(--pen-font);color:#3b2a12;padding-bottom:10px}
#bank{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;min-height:90px;margin-top:18px;padding-top:16px;border-top:1px dashed rgba(107,74,34,.35)}
.chip{position:relative;padding:14px 26px 12px;font:600 32px/1 var(--pen-font);color:#2a1f10;background:#fbf6e6;cursor:grab;touch-action:none;
  transform:rotate(var(--r,0deg));box-shadow:0 2px 0 rgba(255,255,255,.7) inset,0 6px 10px rgba(60,40,10,.3);transition:transform .15s,box-shadow .15s;
  clip-path:polygon(2% 6%,20% 0,45% 5%,70% 1%,98% 4%,100% 40%,97% 70%,100% 96%,75% 100%,50% 95%,25% 100%,3% 97%,0 60%,3% 30%)}
.chip:hover{transform:rotate(0) translateY(-3px)}
.chip.ghost{position:fixed;z-index:999;pointer-events:none;transform:rotate(-4deg) scale(1.08);box-shadow:0 18px 22px rgba(0,0,0,.35)}
.chip.placeholder{opacity:.25}
.slot .chip{font-size:34px;padding:10px 20px 8px;--r:0deg}
.chip.inked{color:#1b3d70;background:#eef4ff;transition:all .5s}
#bank.hl{animation:slothl 1.2s ease-in-out infinite;border-radius:10px}
#parch-in footer{margin-top:auto;display:flex;align-items:center;gap:22px;padding-top:12px}
#sc-hint{flex:1;font:17px/1.6 var(--pen-font);color:var(--ink2)}
#sc-hint.bad{color:var(--red)}
#sc-hint.good{color:#2f5c9a}
#sc-clear{font:16px/1 var(--pen-font);color:var(--ink2);padding:10px 14px;border-bottom:1.5px solid var(--ink3)}
#scroll.wrong{animation:shake .45s}
#ink-bloom{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,rgba(200,225,255,.95),rgba(120,165,235,.5) 40%,rgba(120,165,235,0) 70%);animation:bloom 1.3s ease-out forwards}
@keyframes bloom{to{transform:scale(70);opacity:0}}
.stamp{position:absolute;right:120px;top:300px;z-index:6;font:400 44px/1 var(--title);color:#9b2f1e;border:4px double #9b2f1e;padding:10px 18px;transform:rotate(-12deg) scale(2.2);opacity:0;animation:stamp .5s .3s cubic-bezier(.3,1.6,.5,1) forwards;mix-blend-mode:multiply}
@keyframes stamp{to{transform:rotate(-12deg) scale(1);opacity:.85}}

/* ───────────── 开场：黑屏白字 ───────────── */
#cg{position:absolute;inset:0;z-index:40;background:#0b0c09;display:grid;place-items:center;cursor:pointer;transition:opacity 1.2s}
#cg.out{opacity:0}
#cg-text{position:relative;z-index:2;margin:0;max-width:980px;text-align:center;font:400 34px/1.9 var(--pen-font);color:#efe8d6;letter-spacing:4px;opacity:0;transition:opacity 1s}
#cg-text.on{opacity:1}
#cg-next{position:absolute;bottom:60px;left:0;right:0;text-align:center;font:15px/1 var(--pen-font);color:rgba(239,232,214,.4);letter-spacing:3px;animation:bob 2s infinite}
#cg-pages{position:absolute;inset:0;overflow:hidden}
.fpage{position:absolute;top:-200px;width:120px;height:160px;background:#e9e0c8;opacity:.18;
  background-image:repeating-linear-gradient(180deg,transparent 0 14px,rgba(60,50,30,.35) 14px 15px);background-size:80% 100%;background-position:center 20px;background-repeat:no-repeat;
  animation:pagefall linear infinite}
@keyframes pagefall{to{transform:translateY(1300px) rotate(var(--rot)) translateX(var(--dx))}}

/* ───────────── 通关页 ───────────── */
#clear{position:absolute;inset:0;z-index:35;background:rgba(14,16,10,.6);display:grid;place-items:center;animation:fade .6s}
#clear-page{position:relative;width:820px;padding:56px 76px 44px;background:var(--paper);transform:rotate(-1deg);box-shadow:0 30px 60px rgba(0,0,0,.5);
  background-image:repeating-linear-gradient(180deg,transparent 0 41px,rgba(120,100,60,.18) 41px 42px);background-position:0 152px;animation:pageUp .9s cubic-bezier(.2,1,.3,1)}
@keyframes pageUp{from{transform:translateY(500px) rotate(6deg)}}
#clear-page h2{margin:10px 0 22px;font:400 40px/1.2 var(--title);letter-spacing:8px}
#clear-text{min-height:210px;font:21px/2 var(--pen-font);color:var(--ink);text-indent:2em;margin:0}
#clear-text b{color:#2f5c9a}
#clear-sign{text-align:right;font:26px/1 var(--hand);color:var(--ink2);margin-top:16px;opacity:0;transition:opacity 1s}
#clear-sign.on{opacity:1}
#clear-btns{display:flex;gap:14px;margin-top:30px;opacity:0;transition:opacity .6s}
#clear-btns.on{opacity:1}


/* ───────────── 标题 ───────────── */
#title{position:absolute;inset:0;z-index:50;display:grid;place-items:center;overflow:hidden;background:#11140d;transition:opacity 1s}
#title.out{opacity:0;pointer-events:none}
#title-bg{position:absolute;inset:-40px;background:url(assets/bg_forest.jpg) 30% 50%/auto 110% no-repeat;filter:blur(5px) brightness(.45) saturate(.8);animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{to{background-position:60% 50%}}
#title-main{position:relative;text-align:center}
#logo{display:flex;gap:18px;justify-content:center}
.lg{display:grid;place-items:center;width:150px;height:170px;font:400 112px/1 var(--title);color:var(--ink);background:var(--paper);box-shadow:0 14px 26px rgba(0,0,0,.5);position:relative;
  clip-path:polygon(3% 2%,30% 0,62% 3%,97% 0,100% 30%,98% 64%,100% 98%,68% 100%,35% 97%,2% 100%,0 66%,3% 33%);animation:lgIn .8s cubic-bezier(.2,1.5,.4,1) backwards}
.lg.c1{transform:rotate(-6deg);background:#f1e6c9}
.lg.c2{transform:rotate(3deg) translateY(16px);background:#e6d9b4;color:#4b6638}
.lg.c3{transform:rotate(-2deg) translateY(-8px);background:#f4ecd8;animation-delay:.12s}
.lg.c4{transform:rotate(5deg) translateY(10px);background:#ecdcb4;color:var(--red);animation-delay:.24s}
.lg.c2{animation-delay:.06s}
@keyframes lgIn{from{opacity:0;translate:0 -60px;rotate:20deg}}
#logo-sub{margin-top:34px;font:44px/1 var(--hand);color:#efe5c9;letter-spacing:6px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
#menu{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:52px}
#title-foot{margin-top:46px;font:15px/1 var(--pen-font);color:rgba(239,229,201,.5);letter-spacing:3px}

/* ───────────── 我的创作：书本 ───────────── */
#book{position:absolute;inset:0;z-index:60;background:rgba(10,12,8,.72);display:grid;place-items:center;animation:fade .3s}
#book-in{position:relative;width:1240px;height:744px;margin-top:-40px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
#book-in:before{content:'';position:absolute;inset:0;background:url(assets/book.webp) center/100% 100% no-repeat}
/* 翻开 / 合上：内容先藏起来，书页播完翻页帧再显现 */
#book-in.opening,#book-in.closing{pointer-events:none}
#book-in.opening{animation:bkIn .4s cubic-bezier(.2,.8,.3,1) both}
#book-in.opening :is(.bpage,.barrow,#marks,#book-close),#book-in.closing :is(.bpage,.barrow,#marks,#book-close){opacity:0;transition:opacity .18s}
#book.closing{animation:bkOut .92s both}
#book-in{translate:0 0;transition:translate .45s cubic-bezier(.45,0,.25,1)}
#book-in.shut{translate:-310px 0}
#book-in.fx:before{opacity:0}
@keyframes bkIn{from{opacity:0;transform:translateY(36px) scale(.97)}}
@keyframes bkOut{0%,64%{opacity:1}100%{opacity:0}}
.bpage{position:absolute;top:66px;height:600px;width:400px;color:var(--ink);transition:opacity .12s}
.bpage.left{left:148px}
.bpage.right{left:690px}
#book-in.flipping .bpage{opacity:0}
#bp-measure-wrap{visibility:hidden;pointer-events:none}
.bp-in{position:absolute;inset:0 0 34px;overflow:hidden;font:17px/33px var(--pen-font)}
.bp-in p{margin:0 0 14px;text-indent:2em}
.bp-in p.cont{text-indent:0}
.bp-in .empty{color:var(--ink3);font-style:italic;text-indent:0;text-align:center;margin-top:220px}
.bp-h{margin:4px 0 20px;text-align:center;font:400 28px/1.3 var(--title);letter-spacing:6px;color:var(--ink)}
.bp-h:after{content:'';display:block;width:120px;height:1.5px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.bp-no{position:absolute;left:0;right:0;bottom:0;text-align:center;font:14px/1 var(--pen-font);color:var(--ink3);letter-spacing:2px}
.bp-title{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:30px}
.bp-title h2{margin:14px 0 22px;font:400 54px/1.2 var(--title);letter-spacing:8px}
.b-note{font:19px/1.8 var(--pen-font);color:var(--ink2);margin:0}
#book-flip{position:absolute;left:0;bottom:0;width:1240px;height:934px;opacity:0;pointer-events:none}
#book-flip.on{opacity:1}
.barrow{position:absolute;bottom:-26px;width:124px;height:80px;background:center/contain no-repeat;transition:transform .2s,opacity .2s,filter .2s;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
.barrow.l{left:-52px;background-image:url(assets/arrow_l.webp)}
.barrow.r{right:-52px;background-image:url(assets/arrow_r.webp)}
.barrow.l:hover{transform:translateX(-6px)}
.barrow.r:hover{transform:translateX(6px)}
.barrow.off{opacity:.25;filter:grayscale(.8);pointer-events:none}
#marks{position:absolute;right:-80px;top:90px;display:flex;flex-direction:column;gap:10px}
.mark{width:84px;padding:14px 8px 14px 16px;font:16px/1 var(--pen-font);text-align:left;color:var(--paper);background:var(--moss);border-radius:0 6px 6px 0;box-shadow:0 4px 8px rgba(0,0,0,.3)}
.mark{cursor:pointer;transition:transform .2s,background .2s,filter .2s}
.mark:not(.on){background:#6b6555;filter:saturate(.7) brightness(.92)}
.mark:not(.on):hover{transform:translateX(4px);filter:none}
.mark.on{transform:translateX(8px)}
.mark small{display:block;margin-top:6px;font-size:11px;letter-spacing:1px;opacity:.8;white-space:nowrap}
#book-close{position:absolute;left:50%;bottom:-62px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:8px 6px;
  font:400 22px/1 var(--title);letter-spacing:10px;text-indent:10px;color:#d8b46a;text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 12px rgba(216,180,106,.25);transition:color .25s,text-shadow .25s}
#book-close:before,#book-close:after{content:'';width:78px;height:9px;flex:none;
  background:radial-gradient(circle,#d8b46a 0 2.6px,transparent 3.2px) center/9px 9px no-repeat,linear-gradient(90deg,transparent,#b48a3c) center/100% 1.2px no-repeat}
#book-close:after{background:radial-gradient(circle,#d8b46a 0 2.6px,transparent 3.2px) center/9px 9px no-repeat,linear-gradient(90deg,#b48a3c,transparent) center/100% 1.2px no-repeat}
#book-close:hover{color:#f3d896;text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 16px rgba(243,216,150,.55)}
.bp-in b{font-weight:600;color:#2f5c9a}

/* 提示纸条 */
#toast{position:absolute;left:50%;top:132px;z-index:45;transform:translateX(-50%) rotate(-1deg);padding:12px 26px;background:#fbf4dd;font:18px/1.4 var(--pen-font);box-shadow:0 8px 18px rgba(0,0,0,.35);animation:noteIn .3s}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

#far-rabbit img,#far-cat img{width:100%;display:block}

#quill:before{content:'';position:absolute;left:50%;bottom:0;width:90px;margin-left:-45px;height:420px;background:linear-gradient(0deg,rgba(200,225,255,.5),rgba(200,225,255,0));filter:blur(8px);pointer-events:none}

/* ═══════════ v2：场景系统新增 ═══════════ */
.blk{position:absolute}
#L-far .prop.nofx{filter:brightness(.92) saturate(.85) drop-shadow(0 3px 2px rgba(0,0,0,.3));opacity:0}
#L-far #far-cat.show{opacity:.85}
.prop.talking,.blk.talking,.follower.talking{animation:talk .9s ease-in-out infinite}
@keyframes talk{0%,100%{scale:1}50%{scale:1.05}}
.follower{position:absolute;left:0;bottom:88px;transform-origin:50% 100%;filter:var(--cut-shadow)}
.follower img,.follower svg{display:block;width:100%;height:auto}

/* HUD 进度：四个谜题 */
#pips{display:flex;gap:8px;justify-content:center;margin-top:7px}
#pips i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink3);transition:all .4s}
#pips i.cur{border-color:var(--red);box-shadow:0 0 0 3px rgba(166,62,44,.18)}
#pips i.done{background:#2f5c9a;border-color:#2f5c9a}

/* 对话名签颜色 */
#dlg-name.blue{background:#4f6f95}#dlg-name.violet{background:#5e4c7a}#dlg-name.green{background:#4f6a3f}
#dlg-name.brown{background:#6e5a3f}#dlg-name.red{background:#9b2f2a}

/* 卷轴：多行排词 / 换词 */
#slots{flex-direction:column;align-items:center;gap:14px}
.line{display:flex;align-items:flex-end;gap:12px}
.line-label{font:13px/1 var(--pen-font);letter-spacing:3px;color:var(--gold);writing-mode:vertical-rl;padding:6px 2px;border-left:1px solid var(--gold);margin-right:4px;align-self:center}
.line .slot{min-width:104px;height:66px}
.line .slot .chip{font-size:28px;padding:9px 16px 7px}
#bank.dense{gap:14px 16px}
#bank.dense .chip{font-size:24px;padding:10px 18px 9px}
.rule{display:flex;align-items:center;gap:14px;font:26px/1.6 var(--pen-font);color:#3b2a12}
.rule-text{padding:4px 0}
.target{position:relative;display:inline-block;margin:0 4px;padding:2px 12px;color:#9b2f1e;font-weight:700;border-bottom:3px solid #9b2f1e;cursor:pointer;background:rgba(155,47,30,.08);transition:background .2s}
.target:hover{background:rgba(155,47,30,.16)}
.target.over{background:rgba(207,226,255,.6)}
.target.changed{color:#1b3d70;border-color:#2f5c9a;background:rgba(207,226,255,.35)}
.target s{position:absolute;left:50%;top:-18px;transform:translateX(-50%);font:400 14px/1 var(--pen-font);color:#9b2f1e;opacity:.7}
.target.pop{animation:pop .35s}
@keyframes pop{50%{transform:scale(1.18)}}
.target.inked{color:#1b3d70}
#bank.swap{flex-direction:column;align-items:center;gap:12px}
.group{display:flex;align-items:center;gap:18px}
.group-label{font:13px/1 var(--pen-font);letter-spacing:3px;color:var(--gold);width:84px;text-align:right}
#bank.swap .chip{font-size:26px;padding:10px 20px 9px}
.chip.used{opacity:.35}
#parch-in[data-kind="swap"] #slots{gap:8px}

/* ── 钟表洞穴（几何占位） ── */
#scene.cave #vignette{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(8,5,2,.75) 100%)}
#scene.cave #grainfx{opacity:.45}
.mound{background:#4a3828;border-radius:50% 50% 0 0/80% 80% 0 0;box-shadow:0 -3px 0 #b39a73 inset,0 0 0 3px #c8b18a}
.mound.near{background:#57422e}
#L-far .mound{background:#3b2c20;box-shadow:0 0 0 3px rgba(200,177,138,.4)}
.clock{border-radius:50%;background:#5a4126;box-shadow:0 0 0 4px #efe3c4,0 6px 6px rgba(0,0,0,.4)}
.clock:before{content:'';position:absolute;inset:9%;border-radius:50%;background:radial-gradient(circle,#f3e8cc 0 64%,transparent 65%),repeating-conic-gradient(#3b2a1a 0 3deg,#f3e8cc 3deg 30deg)}
.clock i{position:absolute;left:50%;bottom:50%;background:#2a1d12;border-radius:3px;transform-origin:50% 100%;animation:spin linear infinite}
.clock .hh{width:7%;margin-left:-3.5%;height:24%;animation-duration:48s}
.clock .mm{width:4.5%;margin-left:-2.25%;height:36%;animation-duration:8s}
.clock b{position:absolute;left:50%;top:50%;width:12%;height:12%;margin:-6%;border-radius:50%;background:#9b2f1e}
@keyframes spin{to{transform:rotate(360deg)}}
.clock.fast .hh{animation-duration:3s}.clock.fast .mm{animation-duration:.5s}
.clock.back i{animation-direction:reverse}.clock.back .mm{animation-duration:1.6s}
.clock.stop i{animation-play-state:paused}
.clock.shake{animation:tremble .16s linear infinite}
.clock.calm{animation:none}.clock.calm i{animation-direction:normal;animation-play-state:running}
.clock.calm .hh{animation-duration:48s}.clock.calm .mm{animation-duration:8s}
#L-far .clock{opacity:.55;box-shadow:0 0 0 3px rgba(239,227,196,.6)}
@keyframes tremble{0%,100%{translate:0 0}25%{translate:-2px 1px}75%{translate:2px -1px}}
.tremble{animation:tremble .14s linear infinite}
.gclock{background:linear-gradient(90deg,#4a3220,#6a4a30 50%,#4a3220);border-radius:50px 50px 6px 6px;box-shadow:0 0 0 4px #efe3c4,0 8px 10px rgba(0,0,0,.4)}
.gc-pend{position:absolute;left:50%;top:150px;width:4px;height:150px;margin-left:-2px;background:#c9a24a;transform-origin:50% 0;animation:pend 1.1s ease-in-out infinite alternate}
.gc-pend:after{content:'';position:absolute;left:-14px;bottom:-14px;width:32px;height:32px;border-radius:50%;background:#d8b45a}
@keyframes pend{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.redglow{position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle,rgba(230,40,30,.75),rgba(230,40,30,0) 65%);mix-blend-mode:screen;animation:halo 1.2s ease-in-out infinite;transition:opacity 1.5s}
.redglow.off{opacity:0}

/* ── 茶会（几何占位） ── */
#table svg,.cup svg,#bigcup svg{display:block;width:100%;height:auto;filter:var(--cut-shadow)}
#bigcup svg{filter:var(--cut-shadow)}
.sugar{display:flex;gap:4px;align-items:flex-end}
.sugar i{width:18px;height:18px;background:#fbf8ef;box-shadow:0 0 0 2px #3a2a1c;transform:rotate(8deg)}
.potion svg{display:block;width:100%;height:auto;filter:var(--cut-shadow)}
.potion.glow svg{filter:drop-shadow(0 0 14px #ffe2a6) drop-shadow(0 0 30px rgba(255,220,160,.8))}
#hatter{transition:left 1.8s cubic-bezier(.4,0,.2,1),bottom 1.8s cubic-bezier(.4,0,.2,1),width 1.8s cubic-bezier(.4,0,.2,1)}
#hatter.tiny{animation:tremble .2s linear infinite}
#hatter.grow{animation:none}
#hare{transform-origin:50% 100%;transition:transform 2s cubic-bezier(.4,0,.2,1)}
#hare.giant{transform:scale(2.15)}
.ph svg,.ph img{display:block;width:100%;height:auto;filter:var(--cut-shadow)}

/* ── 城堡（几何占位） ── */
#scene.castle #grainfx{opacity:.38}
.hedge{background:#22361f;border-radius:40% 40% 6px 6px/60% 60% 6px 6px;box-shadow:0 0 0 3px #e9d9c4}
.hedge.near{background:#2c4527}
.hedge i{position:absolute;width:22px;height:22px;border-radius:50%;background:#c83a44;box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),0 0 0 2px #f3d6d0}
.hedge i:nth-child(1){left:12%;top:22%}.hedge i:nth-child(2){left:38%;top:12%}.hedge i:nth-child(3){left:66%;top:28%}
.hedge i:nth-child(4){left:24%;top:55%}.hedge i:nth-child(5){left:56%;top:60%}.hedge i:nth-child(6){left:80%;top:48%}
#L-far .hedge{opacity:.7}
.card{background:#fbf7ec;border-radius:6px;box-shadow:0 0 0 3px #efe3c4,0 0 0 4px #3a2a1c,0 8px 8px rgba(0,0,0,.35);transform-origin:50% 100%;transition:transform .7s cubic-bezier(.5,-.4,.6,1.4),opacity .7s}
.card span{position:absolute;left:8px;top:6px;font:22px/1 serif;color:#1d1d1d}
.card span.r{left:auto;top:auto;right:8px;bottom:6px;transform:rotate(180deg)}
.card.red span{color:#b8323a}
.card:after{content:'';position:absolute;inset:26% 22%;border:2px solid currentColor;border-radius:4px;opacity:.25}
.spear{position:absolute;left:50%;bottom:20%;width:4px;height:170%;background:#4a3a26;transform-origin:50% 100%}
.spear:before{content:'';position:absolute;top:-16px;left:-8px;border:10px solid transparent;border-bottom:18px solid #9aa0a6}
.spear.x1{transform:rotate(28deg)}.spear.x2{transform:rotate(-28deg)}
.card.fall{transform:rotate(-82deg) translateY(10px);opacity:.75}
.card.guard.fall{transform:rotate(95deg) translateX(-40px);opacity:.6}
#throne{transition:opacity 1.2s,transform 1.2s}
.th-back{position:absolute;left:20%;right:20%;top:0;bottom:30%;background:#9b2f2a;border-radius:80px 80px 0 0;box-shadow:0 0 0 6px #d4a948,0 0 0 9px #efe3c4;display:grid;place-items:start center}
.th-back b{font-size:54px;color:#f3c27a;margin-top:12px}
.th-seat{position:absolute;left:12%;right:12%;bottom:18%;height:16%;background:#7a2420;box-shadow:0 0 0 5px #d4a948}
.th-steps{position:absolute;left:0;right:0;bottom:0;height:14%;background:repeating-linear-gradient(180deg,#8e2a2a 0 16px,#6e1f20 16px 20px);box-shadow:0 0 0 3px #efe3c4}
#queen{transition:opacity 1.2s,transform 1.2s}
.gone{opacity:0!important;transform:scale(.6) translateY(40px)!important}
#carousel{opacity:0;transform:scale(.4);transform-origin:50% 100%;transition:opacity 1.2s .4s,transform 1.4s .4s cubic-bezier(.3,1.5,.5,1)}
#carousel.on{opacity:1;transform:scale(1)}
.cr-top{position:absolute;left:0;right:0;top:0;height:30%;clip-path:polygon(50% 0,100% 100%,0 100%);background:repeating-conic-gradient(from 0deg at 50% 0,#d9555e 0 8deg,#fbf3e2 8deg 16deg);filter:drop-shadow(0 4px 0 #3a2a1c)}
.cr-body{position:absolute;left:8%;right:8%;top:30%;bottom:12%;display:flex;justify-content:space-around;align-items:center}
.cr-body:before{content:'';position:absolute;left:0;right:0;top:0;height:10px;background:#d4a948}
.cr-body i{width:6px;height:100%;background:#d4a948;position:relative;animation:bob 1.4s ease-in-out infinite}
.cr-body i:nth-child(2){animation-delay:-.5s}.cr-body i:nth-child(3){animation-delay:-1s}
.cr-body i:after{content:'';position:absolute;left:-26px;top:55%;width:58px;height:34px;border-radius:40% 50% 30% 30%;background:#fbf3e2;box-shadow:0 0 0 3px #3a2a1c}
.cr-base{position:absolute;left:0;right:0;bottom:0;height:12%;background:repeating-linear-gradient(90deg,#9fd0f0 0 30px,#fbf3e2 30px 60px);border-radius:10px;box-shadow:0 0 0 3px #3a2a1c}
#candy{opacity:0;transform:translateY(30px);transition:all 1s .8s}
#candy.on{opacity:1;transform:none}
#candy .aw{position:absolute;left:-6%;right:-6%;top:0;height:36%;background:repeating-linear-gradient(90deg,#f39bb4 0 26px,#fbf3e2 26px 52px);border-radius:0 0 30px 30px;box-shadow:0 0 0 3px #3a2a1c}
#candy .ct{position:absolute;left:4%;right:4%;bottom:0;height:46%;background:#c98a5a;box-shadow:0 0 0 3px #3a2a1c;display:flex;justify-content:space-around;align-items:flex-start}
#candy .ct i{width:34px;height:34px;margin-top:-26px;border-radius:50%;background:conic-gradient(#f39bb4 0 25%,#fbf3e2 0 50%,#9fd0f0 0 75%,#fbf3e2 0);box-shadow:0 0 0 3px #3a2a1c}

#clear-text p{margin:0 0 10px;font:19px/1.95 var(--pen-font);text-indent:2em}
#clear-text b{color:#2f5c9a}
#clear-page{width:900px;max-height:860px;overflow:auto}
.b-sub{display:block;text-indent:0;font:13px/1.6 var(--pen-font);letter-spacing:4px;color:var(--gold);margin-bottom:2px}

/* v2.1 卷轴版式：短文自适应剩余高度，换词选项三栏排布 */
#sc-passage{flex:1 1 0;min-height:84px;max-height:none;margin:14px 0 6px;padding-right:8px;
  -webkit-mask:linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
#sc-core,#bank,#parch-in footer{flex-shrink:0}
#sc-core{margin:6px 0 2px}.sc-label{margin-bottom:10px}
#bank{margin-top:12px;padding-top:12px;min-height:0}
#bank.swap{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px 18px;flex-direction:row}
.group{flex-direction:column;gap:8px}
.group-label{width:auto;text-align:center}
.group .chips{display:flex;gap:10px;justify-content:center}
#bank.swap .chip{font-size:24px;padding:9px 16px 8px}
.rule{font-size:24px;gap:12px}
#parch-in[data-kind="swap"] .rule .line-label{writing-mode:horizontal-tb;border-left:0;border-right:1px solid var(--gold);padding:2px 10px 2px 0;width:92px;text-align:right}
#parch-in[data-kind="swap"] #slots{align-items:flex-start;width:fit-content;margin:0 auto}

/* v3：对话立绘（用现有模型放大，腰部以上），谜题间柔和转场 */
#portrait{position:absolute;left:70px;bottom:70px;width:400px;height:520px;overflow:hidden;pointer-events:none;
  display:flex;align-items:flex-start;justify-content:center;opacity:0;transform:translateX(-60px) rotate(-3deg);transition:opacity .25s,transform .35s cubic-bezier(.2,1.3,.4,1)}
#portrait.on{opacity:1;transform:translateX(0) rotate(-1.5deg)}
#portrait-in{margin-top:auto;display:flex;justify-content:center}
#portrait-in img,#portrait-in .psvg{display:block;filter:drop-shadow(0 10px 8px rgba(0,0,0,.4));transform:translateY(38%)}
#portrait-in .psvg svg{width:100%;height:100%}
#portrait-in.quill .psvg{transform:translateY(8%) rotate(12deg);filter:drop-shadow(0 0 18px rgba(170,205,255,.95)) drop-shadow(0 0 40px rgba(120,170,255,.6))}
#dlg-note{z-index:2}
#fade{position:absolute;inset:0;z-index:46;pointer-events:none;opacity:0;transition:opacity 1s ease;
  background:radial-gradient(ellipse at 50% 55%,#f6efdc 0%,#eadfc2 70%,#d9caa4 100%)}
#fade:after{content:'';position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .52 0 0 0 0 .38 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#fade.on{opacity:1}
#scene{transition:filter 1s ease}
#scene.blurring{filter:blur(7px) saturate(.75) brightness(1.08)}
#portrait{height:560px;bottom:60px}
#portrait-in{margin-top:0}
#portrait-in img,#portrait-in .psvg{transform:none}
#portrait-in.quill .psvg{transform:translateY(60px) rotate(12deg)}

/* ═══════════ v4：Figma 新 UI ═══════════ */
/* 通用标签按钮（取自 Figma：藏青主按钮 / 米色次按钮，底部加深一道） */
.lbl{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-direction:column;min-width:300px;height:66px;padding:0 28px;
  font:400 25px/1 var(--title);letter-spacing:6px;color:#25273a;background:#f4eedf;border:2px solid #2a2622;border-radius:7px;
  box-shadow:0 5px 0 #2a2622,0 12px 20px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s,background .2s}
.lbl:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .4 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lbl.primary{background:#2c3a63;color:#f3ead4;border-color:#1b2440;box-shadow:0 7px 0 #1b2440,0 14px 22px rgba(0,0,0,.4)}
.lbl:hover:not(:disabled){transform:translateY(-2px)}
.lbl:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #2a2622,0 4px 8px rgba(0,0,0,.3)}
.lbl.primary:active:not(:disabled){box-shadow:0 2px 0 #1b2440,0 4px 8px rgba(0,0,0,.3)}
.lbl:disabled{opacity:.55;cursor:not-allowed}
.lbl small{display:block;margin-top:6px;font:13px/1 var(--pen-font);letter-spacing:3px;opacity:.75}
/* 按键角标：重新设计为老式打字机圆键，钉在标签右上角 */
.tkey{position:absolute;right:-14px;top:-16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font:700 16px/1 'Noto Serif SC',serif;color:#2a2622;background:radial-gradient(circle at 40% 35%,#fffaf0,#efe4c8 60%,#d9caa6);
  box-shadow:0 0 0 3px #2a2622,0 0 0 5px #b48a3c,0 4px 0 5px #2a2622,0 8px 10px rgba(0,0,0,.35);transform:rotate(8deg);z-index:2;transition:transform .15s}
.lbl:hover .tkey{transform:rotate(0) translateY(2px)}

/* 封面：Figma 底图 + 我们的剪纸字标 */
#title{background:#0d1020}
#title-bg{inset:0;background:url(assets/cover_bg.jpg) center 40%/cover no-repeat;filter:none;animation:coverDrift 50s ease-in-out infinite alternate}
@keyframes coverDrift{from{transform:scale(1.02)}to{transform:scale(1.08) translate(-1%,-1%)}}
#title:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(10,14,32,.15),rgba(10,14,32,.55) 70%),linear-gradient(180deg,rgba(10,14,32,.35),transparent 35%)}
#title-main{z-index:2;align-self:start;margin-top:84px}
#logo .lg{width:132px;height:150px;font-size:98px}
#logo-sub{margin-top:30px;font-size:40px}
#menu{margin-top:96px;gap:30px}
#menu .lbl{width:320px}
#title-foot{margin-top:40px;color:rgba(243,234,212,.6);text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* HUD：三支笔（Figma 卡片 + 我们的纸质与发光） */
#pens-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}
#pens{gap:12px;padding:0;background:none;border:0;border-radius:0}
.pen{width:84px;height:88px;border-radius:9px;flex-direction:column;justify-content:flex-end;padding-bottom:7px;background:#f4eedf;
  border:2px solid #4a443a;box-shadow:0 4px 0 #4a443a,0 8px 12px rgba(0,0,0,.3);position:relative;transform:rotate(var(--pr,0deg))}
.pen:nth-child(1){--pr:-1.5deg}.pen:nth-child(2){--pr:1deg}.pen:nth-child(3){--pr:-.5deg}
.pen img{position:absolute;left:50%;top:10px;height:50px;transform:translateX(-50%);filter:drop-shadow(0 2px 1px rgba(0,0,0,.2))}
.pen-n{position:absolute;left:5px;top:5px;min-width:20px;height:20px;border-radius:4px;display:grid;place-items:center;font:700 13px/1 'Noto Serif SC',serif;font-style:normal;color:#fff;background:#d6bf8c}
.pen-name{font:13px/1 var(--pen-font);color:#4a443a;margin-top:0;letter-spacing:1px}
.pen.locked{background:rgba(244,238,223,.55);border-style:dashed;border-color:rgba(74,68,58,.7);box-shadow:0 4px 10px rgba(0,0,0,.2);color:inherit}
.pen.locked img{filter:grayscale(1) brightness(1.6) opacity(.35)}
.pen.locked .pen-name{color:rgba(74,68,58,.55)}
.pen.active{background:#fbf6e8;border:3px solid #2c3a63;box-shadow:0 4px 0 #1b2440,0 0 0 6px rgba(244,238,223,.0),0 0 18px rgba(150,190,255,.75);transform:rotate(0) translateY(-2px)}
.pen.active:before{content:'';position:absolute;inset:-9px;border:2px dashed #c9a24a;border-radius:13px;pointer-events:none}
.pen.active .pen-n{background:#2c3a63}
.pen.active .pen-name{color:#2c3a63}
#pens-cap{font:13px/1 var(--pen-font);color:#f6efdc;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 8px rgba(0,0,0,.5)}
#hud-right{top:18px;align-items:flex-start}
#btn-scroll{margin-top:20px}
#btn-mute{margin-top:26px}

/* 卷轴：确认改写（Figma 主按钮样式，放在卷轴内）+ 清空 */
#sc-submit.lbl{width:auto;min-width:200px;height:58px;font-size:22px;letter-spacing:5px;border-radius:7px;clip-path:none;transform:none}
#sc-submit.lbl:hover{transform:translateY(-2px)}
#sc-submit.lbl:active{transform:translateY(4px)}
#sc-submit .tkey{width:32px;height:32px;font-size:15px;right:-12px;top:-14px}
#parch-in footer{gap:26px;padding-bottom:4px}
#sc-clear{font-size:17px}
#clear-btns .lbl{min-width:0;height:58px;font-size:19px;letter-spacing:3px;padding:0 22px}
#clear-btns{gap:22px}
.pen.locked{background:rgba(244,238,223,.88);border-color:#7a7062}
.pen.locked img{filter:grayscale(1) opacity(.45)}
.pen.locked .pen-name{color:#7a7062}
#pens-cap{padding:4px 10px;border-radius:10px;background:rgba(30,26,20,.42)}

/* v5：卷轴换成拼贴纸张底图（用户提供），展开/收起改为纸张从中缝展开、合拢 */
#parch{position:relative;width:1400px;height:737px;background:url(assets/scroll_paper.webp) center/100% 100% no-repeat;
  clip-path:inset(49% 3% 49% 3%);transform:scaleY(.94) rotate(-1.2deg);opacity:.6;
  transition:clip-path .7s cubic-bezier(.65,0,.35,1),transform .7s cubic-bezier(.65,0,.35,1),opacity .35s}
#scroll.open #parch{clip-path:inset(0 0 0 0);transform:none;opacity:1}
/* 展开时中缝的一道折痕高光，随纸张打开扫过 */
#parch:before{content:'';position:absolute;left:5%;right:5%;top:50%;height:3px;margin-top:-1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,250,235,.9),transparent);box-shadow:0 0 18px 6px rgba(255,245,215,.55);opacity:0}
#scroll.open #parch:before{animation:crease .8s ease-out}
@keyframes crease{0%{opacity:1;transform:scaleY(1)}60%{opacity:.5;transform:scaleY(40)}100%{opacity:0;transform:scaleY(60)}}
#parch-in{position:absolute;top:66px;left:118px;right:126px;bottom:96px;padding:14px 26px 6px;display:flex;flex-direction:column;opacity:0;transition:opacity .35s}
#scroll.open #parch-in{opacity:1;transition:opacity .45s .45s}
#sc-close{right:-6px;top:-2px}
#parch-in footer{padding:0 96px 0 56px}

/* v6：答错时的反击 */
#player-sprite.ouch{animation:ouch .6s steps(1) 1}
@keyframes ouch{0%,40%,80%{filter:var(--cut-shadow) sepia(1) saturate(6) hue-rotate(-35deg) brightness(.9)}20%,60%,100%{filter:var(--cut-shadow)}}
#scene.quake{animation:quake .4s}
@keyframes quake{20%{translate:-10px 4px}40%{translate:9px -3px}60%{translate:-6px 2px}80%{translate:4px 0}}
.glyph{position:absolute;font-family:'Courier New','Noto Serif SC',monospace;font-weight:900;white-space:nowrap;text-shadow:0 0 2px #fff,0 0 6px rgba(255,255,255,.8),0 3px 4px rgba(0,0,0,.35);z-index:31;will-change:transform}
.angry{animation:angryShake .12s linear infinite}
@keyframes angryShake{0%,100%{translate:0 0}25%{translate:-3px 1px}75%{translate:3px -1px}}
#tree.angry img{filter:sepia(.4) saturate(1.6) hue-rotate(-20deg) brightness(.85)}
.clock.frenzy .mm{animation-duration:.25s!important;animation-play-state:running!important}
.clock.frenzy .hh{animation-duration:1s!important;animation-play-state:running!important}
.clock.frenzy{animation:tremble .1s linear infinite}
.redglow.rage{inset:-110px;animation-duration:.35s}
.panic{animation:tremble .07s linear infinite!important}
#hatter.worse{transform:scale(.55);transform-origin:50% 100%;transition:transform .8s cubic-bezier(.3,1.5,.5,1)}
#hare.worse{transform:scale(2.7)}
#hatter{transition:left 1.8s cubic-bezier(.4,0,.2,1),bottom 1.8s cubic-bezier(.4,0,.2,1),width 1.8s cubic-bezier(.4,0,.2,1),transform .8s}
.card.jab{transform:translateX(-28px) rotate(-6deg)}
.card.guard.thrust .spear.x1{transform:rotate(-55deg) translateY(-20px)}
.card.guard.thrust .spear.x2{transform:rotate(-70deg) translateY(-20px)}
.card .spear{transition:transform .25s}
#queen.angry img{filter:drop-shadow(0 0 14px rgba(220,40,40,.9))}
.glyph{-webkit-text-stroke:1.5px #fff8ea;paint-order:stroke fill;letter-spacing:1px}
#parch-in[data-kind="swap"] #sc-passage{min-height:40px}
#parch-in[data-kind="swap"] #sc-core{margin-top:2px}
#parch-in[data-kind="swap"] #slots{gap:2px}
#parch-in[data-kind="swap"] .rule{font-size:22px;line-height:1.5}
#parch-in[data-kind="swap"] #bank{margin-top:6px;padding-top:8px}
#parch-in[data-kind="swap"] #sc-passage{flex:0 1 auto;max-height:118px}
#parch-in[data-kind="swap"] footer{margin-top:auto}

/* v7：墨水耗尽 → 关卡失败 */
#scene.inked{filter:grayscale(1) contrast(.8) brightness(.65) blur(2px);transition:filter .9s}
#over{position:absolute;inset:0;z-index:49;display:grid;place-items:center;background:rgba(12,10,8,0);transition:background .6s}
#over.on{background:rgba(12,10,8,.62)}
#over-page{position:relative;width:640px;padding:54px 60px 46px;text-align:center;background:var(--paper);color:var(--ink);
  box-shadow:0 30px 60px rgba(0,0,0,.55);transform:translateY(60px) rotate(4deg);opacity:0;transition:transform .7s cubic-bezier(.2,1.2,.3,1),opacity .4s;
  clip-path:polygon(0 2%,8% 0,22% 2%,38% 0,55% 2%,72% 0,88% 2%,100% 0,99% 30%,100% 62%,98% 100%,80% 98%,62% 100%,44% 97%,26% 100%,10% 98%,0 100%,1% 68%,0 34%)}
#over.on #over-page{transform:rotate(-1.5deg);opacity:1}
#over.out #over-page{transform:translateY(-40px) rotate(-6deg);opacity:0}
#over-page:after{content:'';position:absolute;right:46px;top:40px;width:110px;height:90px;border-radius:50% 42% 55% 48%;pointer-events:none;
  background:radial-gradient(circle at 40% 45%,rgba(30,26,22,.85),rgba(30,26,22,.5) 45%,transparent 70%);filter:blur(1px);transform:rotate(-20deg)}
#over-page h2{margin:14px 0 18px;font:400 52px/1.2 var(--title);letter-spacing:10px;color:#3a2a1c}
#over-page p{font:19px/1.9 var(--pen-font);color:var(--ink2);margin:0 0 34px}
#over-page .lbl{min-width:260px}

/* v8 */
/* 受击：做旧纸张的锈红 / 旧黄，而不是鲜艳的红 */
@keyframes ouch{0%,40%,80%{filter:var(--cut-shadow) sepia(.85) saturate(1.5) hue-rotate(-18deg) brightness(.82) contrast(.92)}20%,60%,100%{filter:var(--cut-shadow)}}
/* 怀表红光：解开后彻底熄灭（之前被呼吸动画的 opacity 覆盖） */
.redglow.off{animation:none!important;opacity:0!important;transition:opacity 1.2s}
/* 已解开的谜题：只读查看 */
#parch-in.done #sc-submit,#parch-in.done #sc-clear{opacity:.35;pointer-events:none}
#parch-in.done .chip{cursor:default}
/* 卷轴布局：确认键永远不压住词块 —— 短文可以收缩到很小，词块区与底栏固定；词多时自动缩小词块 */
#sc-passage{min-height:0!important}
#bank.dense{gap:10px 12px}
#bank.dense .chip{font-size:22px;padding:8px 15px 7px}
#parch-in footer{margin-top:10px;padding-top:14px;position:relative}
#sc-submit .tkey{top:-12px;right:-10px;width:30px;height:30px;font-size:14px}

/* 拼贴剪影：白兔面朝奔跑方向 / 面向主角 */
#far-rabbit img,#cave-rabbit img{transform:scaleX(-1)}
/* 新笔图标（右上角） */
.pen img{top:7px;height:56px;margin-left:6px}
/* 渊默立绘：拼贴纸片 + 淡蓝微光 */
#portrait-in.quill img{transform:translateY(40px) rotate(8deg);filter:drop-shadow(0 10px 8px rgba(0,0,0,.4)) drop-shadow(0 0 16px rgba(170,205,255,.75))}

/* v9：对话框换成拼贴纸张（用户提供）。有说话人 → 带名签版，旁白 → 无名字版 */
#dialog{bottom:14px}
#dlg-note{width:1120px;height:341px;min-height:0;padding:0;transform:rotate(-.4deg);clip-path:none;box-shadow:none;
  background:url(assets/dlg_named.webp) center/100% 100% no-repeat;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4))}
#dlg-note.plain{background-image:url(assets/dlg_plain.webp)}
#dlg-note:after{display:none}
#dlg-name{position:absolute;left:6.4%;top:3%;width:23.4%;height:22%;padding:0;display:flex;align-items:center;justify-content:center;
  background:none!important;box-shadow:none;transform:rotate(-1.2deg);font:400 30px/1 var(--title);letter-spacing:6px;color:#3a2a1c}
#dlg-name.yuanmo{color:#1f4e79}#dlg-name.blue{color:#3d5a80}#dlg-name.violet{color:#5a4677}#dlg-name.green{color:#46613a}
#dlg-name.brown{color:#6b4f33}#dlg-name.red{color:#9b2f2a}
#dlg-name.yuanmo:before{content:'';}
#dlg-text{position:absolute;left:8%;right:9%;top:31%;bottom:20%;min-height:0;overflow:hidden;font-size:24px;line-height:1.8;color:#2e281d}
#dlg-note.plain #dlg-text{top:22%;bottom:22%}
#dlg-text.narr{font-size:23px;color:#4e4232}
#dlg-next{right:10.5%;bottom:13%}

/* v10：自由稿纸（连词成句）与开放改词 */
#slots .line{display:flex;align-items:center;gap:12px;width:100%;justify-content:center}
.strip{position:relative;flex:0 1 860px;min-height:84px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 18px;
  border-radius:4px;background:repeating-linear-gradient(180deg,transparent 0 40px,rgba(120,90,50,.18) 40px 41px),rgba(255,251,240,.55);
  box-shadow:inset 0 0 0 1.5px rgba(120,90,50,.28);transition:box-shadow .15s,background-color .15s;cursor:pointer}
.strip:empty:before{content:'把词写在这张稿纸上';font:17px/1 var(--pen-font);color:rgba(110,85,50,.45);letter-spacing:3px;margin:0 auto}
.strip.active{box-shadow:inset 0 0 0 2px rgba(47,92,154,.55)}
.strip.over{background-color:rgba(207,226,255,.45)}
.strip .chip{font-size:30px;padding:10px 20px 9px;--r:0deg}
#bank.dense ~ * .strip .chip,.line .strip .chip{font-size:26px}
.caret{display:block;width:4px;height:52px;border-radius:2px;background:#2f5c9a;box-shadow:0 0 8px rgba(47,92,154,.6);animation:halo .8s ease-in-out infinite}
#slots .tail{font:40px/1 var(--pen-font);color:#3b2a12;align-self:flex-end;padding-bottom:12px}

.rule-text{font:26px/1.9 var(--pen-font);color:#3b2a12}
.seg{position:relative;display:inline-block;padding:0 3px;margin:0 1px;border-radius:4px;cursor:pointer;transition:background .15s,box-shadow .15s}
.seg:hover,.rule-text.armed .seg{background:rgba(180,138,60,.14);box-shadow:inset 0 -2px 0 rgba(180,138,60,.55)}
.seg.over{background:rgba(207,226,255,.75)!important}
.seg.changed{color:#1b3d70;font-weight:700;background:rgba(207,226,255,.4);box-shadow:inset 0 -3px 0 #2f5c9a}
.seg.changed s{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font:400 13px/1 var(--pen-font);color:#8a5a3a;opacity:.85;white-space:nowrap}
.seg.pop{animation:pop .35s}
.seg.inked{color:#1b3d70}
.pn{display:inline-block;margin:0 1px}
#bank.swap{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;gap:12px 14px}
#bank.swap .chip{font-size:24px;padding:9px 18px 8px}
#bank.swap.dense .chip{font-size:22px;padding:8px 15px 7px}
.chip.used{opacity:.3}
.chip.sel{transform:translateY(-4px) rotate(0);box-shadow:0 0 0 3px #2f5c9a,0 10px 14px rgba(60,40,10,.3)}
#parch-in[data-kind="swap"] .rule .line-label{writing-mode:horizontal-tb;border-left:0;border-right:1px solid var(--gold);padding:2px 10px 2px 0;width:92px;text-align:right}
#dlg-note{width:1060px;height:282px}
#dlg-name{font-size:28px;top:2%;height:22%}
#dlg-text{top:30%;bottom:16%;font-size:23px;line-height:1.75}
#dlg-note.plain #dlg-text{top:20%;bottom:18%}
#dlg-next{bottom:11%}
.seg{padding:0 2px}

/* v11：新背景 */
#tyranny{position:absolute;inset:-30px 0 0 0;pointer-events:none;transition:opacity 3s;
  background:linear-gradient(180deg,rgba(60,14,28,.55),rgba(90,20,30,.35) 55%,rgba(40,10,16,.45));mix-blend-mode:multiply}
#scene.cave #vignette{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 55%,rgba(10,6,2,.55) 100%)}

/* v12：对话框更宽更扁 —— 用九宫格切片拉伸，边角（名签、花枝、撕边）不变形 */
#dlg-note,#dlg-note.plain{width:1300px;height:248px;padding:0;box-sizing:border-box;background:none;
  border-style:solid;border-width:78px 106px 68px 273px;border-image:url(assets/dlg_named.webp) 125 170 110 440 fill stretch}
#dlg-note.plain{border-image-source:url(assets/dlg_plain.webp)}
#dlg-name{left:-225px;top:-73px;width:212px;height:64px;font-size:27px}
#dlg-text{left:-200px;right:-26px;top:6px;bottom:-30px;font-size:24px;line-height:1.72}
#dlg-note.plain #dlg-text{top:-36px;bottom:-24px}
#dlg-next{right:0;bottom:-46px}
/* 对话字体（打包的思源宋体子集，离线可用；名字见 index.html 里的 @font-face） */
#dlg-text,#dlg-name{font-family:'DlgSerif','Noto Serif SC','Songti SC',serif;font-weight:var(--dlg-weight,600)}
#dlg-note,#dlg-note.plain{height:222px}
#dlg-text{bottom:-36px}
/* v13：对话框再压矮一点，避开主角头部；旁白文字与有名字时同一位置 */
#dialog{bottom:6px}
#dlg-note,#dlg-note.plain{height:186px;border-width:62px 88px 54px 226px}
#dlg-name{left:-188px;top:-58px;width:176px;height:52px;font-size:25px}
#dlg-text,#dlg-note.plain #dlg-text{left:-168px;right:-20px;top:4px;bottom:-42px;font-size:23px;line-height:1.68}
#dlg-next{bottom:-40px}
/* v14：主角永远在 NPC 前面；去掉所有便签式提示；新茶桌 */
#player{z-index:12}
.ask{display:none!important}
#table img{display:block;width:100%;height:100%;filter:var(--cut-shadow)}
.potion .pglow{position:absolute;inset:-20px -30px;border-radius:50%;opacity:0;transition:opacity 1s;
  background:radial-gradient(ellipse,rgba(255,226,166,.85),rgba(255,226,166,0) 65%);mix-blend-mode:screen}
.potion.glow .pglow{opacity:1;animation:halo 1.6s ease-in-out infinite}
.potion .ptag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) rotate(-4deg) scale(.6);opacity:0;transition:all .6s .4s cubic-bezier(.3,1.5,.5,1);
  padding:3px 10px;font:600 18px/1.2 var(--pen-font);color:#3a2a1c;background:#f6eedb;box-shadow:0 2px 4px rgba(0,0,0,.3);white-space:nowrap}
.potion.glow .ptag{opacity:1;transform:translateX(-50%) rotate(-4deg) scale(1)}
#potion2 .ptag{transform:translateX(-50%) rotate(3deg) scale(.6)}
#potion2.glow .ptag{transform:translateX(-50%) rotate(3deg) scale(1)}

/* v15：去掉药水小纸签；扑克牌士兵、旋转木马、摩天轮换成插画 */
.potion .ptag{display:none!important}
.card.soldier{background:none;box-shadow:none;border-radius:0;filter:drop-shadow(0 5px 3px rgba(40,20,10,.35))}
.card.soldier:after{display:none}
.card.soldier img{display:block;width:100%;height:auto}
.card.soldier.jab{transform:translateX(-24px) rotate(-5deg)}
.card.soldier.guard.thrust{transform:translateX(-34px) rotate(-8deg)}
.card.soldier.fall{transform:rotate(-80deg) translateY(10px);opacity:.75}
#carousel img,#candy img{display:block;width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 6px rgba(40,20,10,.35))}
#carousel{transform-origin:50% 100%}
#candy{transform-origin:50% 100%}
#candy.on{transform:none}
/* v16：地面 = 背景图里的平台（切条，视差 1） */
#floor{position:absolute;left:0;z-index:0;pointer-events:none;background-repeat:repeat-x;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34px);mask-image:linear-gradient(180deg,transparent 0,#000 34px)}
.sky-img{filter:saturate(.92) contrast(.96)}
#floor2{position:absolute;left:0;z-index:0;pointer-events:none;background-repeat:repeat-x;background-size:auto 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
/* v17：插画表盘 + 转动指针；悬挂怀表 */
.clock.dial{background:none;box-shadow:none;border-radius:0;transform-origin:50% 100%}
.clock.dial:before{display:none}
.clock.dial>img{display:block;width:100%;height:100%;filter:drop-shadow(0 5px 4px rgba(20,12,4,.45)) brightness(.9) saturate(.88)}
/* 无纸边：和洞穴融在一起——远处更暗更雾，嵌在岩壁里的钟压暗 */
#L-far .clock.dial>img{filter:brightness(.62) saturate(.7) blur(.4px)}
.clock.dial.sunk>img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.6)) brightness(.7) saturate(.8)}
.clock.dial.sunk .hands{opacity:.8}
.clock.dial .hands{position:absolute;pointer-events:none}
.clock.dial .hands i{background:#2b1c10;box-shadow:0 0 0 1px rgba(255,240,210,.35)}
.clock.dial .hands .hh{width:7%;margin-left:-3.5%;height:24%}
.clock.dial .hands .mm{width:4%;margin-left:-2%;height:38%}
.hang{position:absolute;transform-origin:50% 0;animation:hangSwing var(--sw,5s) ease-in-out infinite;animation-delay:var(--sd,0s)}
@keyframes hangSwing{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
.hang .chain{position:absolute;left:50%;top:0;width:8px;margin-left:-4px;
  background:repeating-linear-gradient(180deg,#b8913f 0 7px,#5e4319 7px 9px,#d9b55c 9px 14px,#5e4319 14px 16px);
  box-shadow:0 0 0 1.5px rgba(247,241,226,.85),0 2px 3px rgba(0,0,0,.4)}
#L-far .hang{opacity:.8;filter:brightness(.8) saturate(.85) blur(.6px)}
.clock.dial.frenzy{animation:tremble .1s linear infinite}
#L-far .clock.dial{box-shadow:none;opacity:1}
/* 扑克牌士兵面朝主角（镜像），门口守卫更大，答错时由守卫冲刺攻击 */
.card.soldier img{transform:scaleX(-1)}
.card.soldier.guard{transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.card.soldier.guard.ready{transform:translateX(16px) rotate(4deg)}
.card.soldier.guard.thrust{transform:translateX(-110px) rotate(-10deg)}
#guard2.thrust{transform:translateX(-150px) rotate(-8deg)}
/* v18：按钮统一使用打包字体（避免“回”等字缺字显示成方块） */
.lbl,.lbl small,#clear-page h2,#over-page h2,.tagbtn{font-family:'DlgSerif','ZCOOL XiaoWei','Noto Serif SC','Songti SC',serif!important}
/* 通关页：卷轴纸张，尺寸一开始就固定，文字在里面逐字出现 */
#clear-page{width:1300px;height:686px;max-height:none;overflow:visible;padding:0;transform:rotate(-.6deg);box-shadow:none;clip-path:none;
  background:url(assets/scroll_paper.webp) center/100% 100% no-repeat;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
#clear-page .tape{display:none}
#clear-page>.sc-eyebrow{position:absolute;top:86px;left:0;right:0;text-align:center}
#clear-page h2{position:absolute;top:108px;left:0;right:0;margin:0;text-align:center;font-size:38px}
#clear-text{position:absolute;top:172px;left:150px;right:150px;height:338px;padding:2px 4px 10px 0;box-sizing:border-box;overflow-y:auto;scrollbar-width:none;min-height:0}
#clear-text::-webkit-scrollbar{display:none}
#clear-text p{font-size:18px;line-height:1.85;margin:0 0 8px}
#clear-sign{position:absolute;right:170px;top:516px;margin:0}
#clear-btns{position:absolute;left:0;right:0;top:566px;margin:0;justify-content:center}

/* 关卡之间的跳转按钮（<a> 做成标签样式） */
a.lbl{text-decoration:none;cursor:pointer}

/* ───────────── v19：HUD 换成标签卡（用户提供的撕边纸签），胶带保留 ───────────── */
#hud-life,#hud-title,#btn-scroll{background-color:transparent;box-shadow:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
#hud-life:after,#hud-title:after,#btn-scroll:after,#tip:after{display:none}
/* 生命值：左边是花枝，红心排在纸签右半 */
#hud-life{background:url(assets/tag_a.webp) center/100% 100% no-repeat;padding:24px 36px 24px 84px;min-width:170px;justify-content:center}
/* 关卡名称：两头带花的长纸签 */
#hud-title{background:url(assets/tag_b.webp) center/100% 100% no-repeat;padding:24px 70px 22px;min-width:270px}
#hud-title .tape.t1{top:-6px}
/* 词语卷轴按钮 */
#btn-scroll{background:url(assets/tag_b.webp) center/100% 100% no-repeat;padding:20px 40px 18px;border:0}
#btn-scroll.disabled{opacity:.6;filter:grayscale(.6) drop-shadow(0 6px 8px rgba(0,0,0,.3))}
/* 提示框：纸签按九宫格拉伸，花枝不变形 */
#tip{width:400px;background:none;box-shadow:none;border-style:solid;border-width:30px 26px 30px 66px;border-image:url(assets/tag_a.webp) 70 60 70 150 fill / 30px 26px 30px 66px;
  padding:14px 16px 8px 6px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45))}
#tip .tape.t3{top:-34px;right:-6px}
/* 音乐开关：纸签图标 */
#btn-mute{width:66px;height:63px;border:0;border-radius:0;background:url(assets/music_on.webp) center/contain no-repeat;font-size:0;color:transparent;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));transition:transform .2s}
#btn-mute:hover{transform:rotate(-4deg) scale(1.05)}
#btn-mute.off{opacity:1;text-decoration:none;background-image:url(assets/music_off.webp)}

/* v20：生命值标签收窄（左边不留大块空白）；浮动提示改成撕纸毛边 */
#hud-life{padding:20px 24px 20px 52px;min-width:0;gap:10px}
#toast,#keyhint{background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
#toast:before,#keyhint:before{content:'';position:absolute;inset:-3px -5px;z-index:-1;
  background:linear-gradient(180deg,#f1e3c4,#e7d3ac);box-shadow:inset 0 0 14px rgba(150,110,60,.28);
  clip-path:polygon(0% 0.9%,5% 0.4%,10% 1.6%,15% 0.6%,20% 0.3%,25% 1.6%,30% 3.7%,35% 3.2%,40% 3.1%,45% 0.9%,50% 2.1%,55% 1.1%,60% 0.7%,65% 0.4%,70% 0.9%,75% 3.7%,80% 3.3%,85% 3.2%,90% 3.2%,95% 0.8%,100% 1.2%,99.2% 10%,99.1% 20%,99.0% 30%,98.9% 40%,99.9% 50%,99.3% 60%,99.2% 70%,99.4% 80%,99.8% 90%,100% 98.1%,95% 99.6%,90% 96.3%,85% 96.5%,80% 97.8%,75% 98.8%,70% 96.4%,65% 97.7%,60% 96.5%,55% 96.6%,50% 98.0%,45% 98.3%,40% 97.6%,35% 98.3%,30% 99.4%,25% 98.8%,20% 96.7%,15% 99.8%,10% 99.8%,5% 97.5%,0% 98.9%,0.6% 90%,0.6% 80%,0.4% 70%,1.2% 60%,0.2% 50%,0.5% 40%,0.2% 30%,0.8% 20%,0.3% 10%)}

/* 复盘页：字先占好最终位置，再逐字显现 */
#clear-text .ch{opacity:0;transition:opacity .25s}
#clear-text .ch.on{opacity:1}

/* 过场动画：视频铺满，字幕压在画面下方 */
#cg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#0b0c09}
#cg.video #cg-video{display:block}
#cg.video{place-items:end center}
#cg.video:before{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(0deg,rgba(8,8,6,.78),rgba(8,8,6,0));z-index:1;pointer-events:none}
#cg.video #cg-text{margin-bottom:110px;max-width:1440px;font-size:29px;line-height:1.7;letter-spacing:3px;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.6)}
#cg.video #cg-next{bottom:40px;z-index:2}

/* 过场视频：点击只唤出右上角“跳过”，点按钮才跳过 */
#cg.video #cg-next{display:none}
#cg-skip{position:absolute;top:34px;right:44px;z-index:3;padding:10px 6px;font:23px/1 var(--pen-font);letter-spacing:6px;color:#efe8d6;background:none;border:0;text-shadow:0 1px 6px rgba(0,0,0,.85);opacity:0;pointer-events:none;transition:opacity .35s,color .2s}
#cg-skip.on{opacity:1;pointer-events:auto}
#cg-skip:hover{color:#fff7dc}

/* 卷轴：题干按原字号、原行距完整显示，不再限制高度（不出现滚动条和底部渐隐）；按钮仍固定在卷轴底部 */
#sc-passage,#parch-in[data-kind="swap"] #sc-passage{flex:0 0 auto;max-height:none;overflow:visible;-webkit-mask:none;mask:none;padding-right:0}
#parch-in[data-kind="swap"] .rule .line-label{white-space:nowrap;width:auto;min-width:92px}
#parch-in footer,#parch-in[data-kind] footer{margin-top:auto}
#parch-in #bank{margin-bottom:10px}
#scroll-wrap{place-items:start center}
/* 谜题核心（稿纸/句子 + 词库）在题干和按钮之间上下居中 */
#parch-in #sc-core,#parch-in[data-kind] #sc-core{margin-top:auto}
#parch-in #bank,#parch-in[data-kind] #bank{margin-bottom:auto}
#parch-in footer,#parch-in[data-kind] footer{margin-top:10px}

/* ═════════ v20：菜单换装（用户提供的美术） ═════════ */
/* 游戏画面以外的留边：深蓝夜空纸，四周撕开露出牛皮纸 */
html,body{background:#151b28}
body:before{background:linear-gradient(rgba(6,8,14,.62),rgba(6,8,14,.62)),url(assets/frame_bg.jpg) center/cover no-repeat;background-color:#151b28}   /* 压一层黑，和游戏画面区分开 */
#stage{box-shadow:0 0 0 2px rgba(214,186,140,.35),0 24px 70px rgba(0,0,0,.65)}
/* 标题背景：台灯、猫、书和羽毛笔围着一片星空 */
#title{background:#11152a}
#title-bg{inset:0;background:url(assets/menu_bg.jpg) center/cover no-repeat;filter:none}
#title-main{margin-top:118px}
#logo-sub{color:#f3e6c4}
#menu{margin-top:70px;gap:16px}
/* 按钮：木框嵌布面（主要动作，羽毛笔）/ 木框嵌纸面（次要动作，书）。字用同一套打包字体叠上去。
   比例照原图：图标占左边约三成，字排在右侧约 36%–86% 之间、居中，不换行；不显示按键角标 */
.lbl{--bw:320px;width:var(--bw)!important;min-width:0!important;height:calc(var(--bw) * .277)!important;padding:0 calc(var(--bw) * .13) 0 calc(var(--bw) * .35)!important;box-sizing:border-box;
  background:url(assets/btn_paper.webp) center/100% 100% no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important;color:#2a2622;
  font-size:calc(var(--bw) * .068)!important;letter-spacing:.14em!important;word-spacing:-.22em;white-space:nowrap;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.4));transition:transform .15s,filter .15s}
.lbl:after{display:none!important}
.lbl.primary{background-image:url(assets/btn_primary.webp)!important;color:#f3e8cc;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.lbl:hover:not(:disabled){transform:translateY(-2px)!important;filter:drop-shadow(0 9px 11px rgba(0,0,0,.45)) brightness(1.06)}
.lbl:active:not(:disabled){transform:translateY(3px)!important;filter:drop-shadow(0 4px 5px rgba(0,0,0,.4))}
.lbl small{font-size:11px;margin-top:3px;letter-spacing:.1em}
.lbl .tkey{display:none!important}
#menu{gap:26px}
#menu .lbl{--bw:330px}
#clear-btns .lbl{--bw:280px;letter-spacing:.08em!important}
#clear-btns .lbl.primary{--bw:360px;letter-spacing:.04em!important}
#clear-btns{gap:14px;top:534px;align-items:center}
#sc-submit.lbl{--bw:220px}
/* 墨水耗尽：和关卡名同一张撕边纸（tag_b） */
#over-page{width:700px;padding:44px 92px 40px 118px;box-sizing:border-box;background:none;box-shadow:none;clip-path:none;
  border-style:solid;border-width:46px 70px 46px 96px;border-image:url(assets/tag_b.webp) 80 150 80 190 fill / 46px 70px 46px 96px;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
#over-page:after{display:none}
#over-page .tape{display:none}
#over-page .lbl{--bw:300px}
#title-foot{margin-top:26px}

/* v21：文字排版。蓝色按钮：字在内侧两颗星（约 28% 和 84%）之间均匀排开；
   带书的纸按钮：字整体偏左一些；不带书的纸按钮（从头开始、回到第 X 关、重玩本关、回到标题）：字在两颗星之间居中 */
.lbl.primary{padding:0 calc(var(--bw) * .19) 0 calc(var(--bw) * .31)!important;letter-spacing:.42em!important;word-spacing:-.3em;text-indent:.42em}
.lbl:not(.primary){padding:0 calc(var(--bw) * .17) 0 calc(var(--bw) * .32)!important}
.lbl:not(.primary):not(#btn-book){background-image:url(assets/btn_paper_plain.webp)!important;padding:0 calc(var(--bw) * .14)!important;letter-spacing:.42em!important;word-spacing:-.3em;text-indent:.42em}
#btn-book{letter-spacing:.42em!important;word-spacing:-.3em;text-indent:.42em}
.lbl small{text-indent:0;letter-spacing:.1em!important}
#clear-btns .lbl,#clear-btns .lbl:not(.primary):not(#btn-book){letter-spacing:.16em!important;text-indent:.16em}
#clear-btns .lbl.primary{letter-spacing:.06em!important;text-indent:.06em}
#sc-submit.lbl{letter-spacing:.3em!important;text-indent:.3em;font-size:calc(var(--bw) * .072)!important}
/* 菜单顺序：“我的创作”永远第二个 */
#btn-start{order:1}#btn-book{order:2}#btn-restart{order:3}#btn-prev{order:4}
#clear-btns .lbl.primary{--bw:400px;font-size:16px!important;letter-spacing:.04em!important;text-indent:0;padding:0 calc(var(--bw) * .17) 0 calc(var(--bw) * .3)!important}

/* v22：字标换成拼贴纸片（用户提供的效果图里抠出来：四张撕边纸 + 回形针 + 胶带 + 副标题纸条） */
#logo{width:730px;height:285px;margin:0 auto;background:url(assets/logo.webp) center/contain no-repeat;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
#logo .lg{display:none}
#logo-sub{display:none}
#title-main{margin-top:96px}
#menu{margin-top:40px}
/* 过场视频：铺满时边缘多放出几像素，避免缩放后露出一条底色细缝 */
#cg-video{inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}
#cg{background:#000}
#stage{box-shadow:0 24px 70px rgba(0,0,0,.65)}
/* v23：画面上下的细缝——缩放后半像素处会透出画面底色或外框。底色改成和压暗后的外框一样的近黑，再外扩一圈同色描边盖住半像素 */
#stage{background:#07090d;box-shadow:0 0 0 2px #07090d,0 24px 70px rgba(0,0,0,.65)}
#scene{inset:-1px}
/* 确认改写：字号回到原来的 22px，用打包的思源宋体加粗，和卷轴标题一个分量 */
#sc-submit.lbl{--bw:270px;font-size:22px!important;font-weight:700;letter-spacing:.32em!important;text-indent:.32em}
@font-face{font-family:'BtnSerif';src:url(assets/fonts/NotoSerifSC-Bold.woff) format('woff');font-weight:400 900;font-display:swap}
.lbl,.lbl small{font-family:'BtnSerif','DlgSerif','Noto Serif SC','Songti SC',serif!important}

/* v24：顶部细缝——舞台已在 fit() 里对齐到整像素；全屏遮罩再各往外多铺 2px，盖住缩放后的边缘 */
#title,#cg,#scroll-wrap,#fade,#over,#clear,#book,#wake,#write,#clear-veil{inset:-2px!important}
/* 墨水耗尽：说明文字按原样分行，不自动折行 */
#over-page p{white-space:nowrap}