/* ═══════════════════════════════════════════════════════════
   第六关 · 百年孤独 —— 在 ../level1/style.css、../level3/style3.css 之上新增的样式
   ═══════════════════════════════════════════════════════════ */
#dlg-name.moss{color:#5f7a62}
.chip.pen3{background:#e8efe9;color:#3d5a44;box-shadow:0 0 0 2px #9fb6a8 inset,0 3px 5px rgba(0,0,0,.15)}
#wake{position:absolute;inset:0;z-index:30;background:#070806;pointer-events:none;opacity:0}

/* 对仗填空（沿用第二关邀请函的填空样式） */
#slots.fill .seg.blank{display:inline-block;min-width:4.6em;text-align:center;border-bottom:3px solid #6b4a22;margin:0 4px;background:rgba(255,255,255,.4);cursor:pointer}
#slots.fill .seg.changed{margin:0 4px}
#slots.fill .seg.changed s{display:none}
#scroll[data-cls="echo"] #slots .rule .rule-text{font-size:25px}
#sc-tear{font:16px/1 var(--pen-font);color:#8a3a2a;padding:8px 10px;border-bottom:1px dashed rgba(138,58,42,.5);white-space:nowrap}
#sc-tear:hover{color:#b8322a}

/* 背景：马孔多长卷，和人物同层 */
#bg6{position:absolute;left:0;top:-88px;width:5172px;height:1000px;z-index:0;pointer-events:none;background-repeat:no-repeat;background-size:5172px 1000px}
#scene.mac #L-mist{display:none}
#scene.mac #vignette{background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,0) 52%,rgba(120,70,10,.32) 100%)}
#scene.mac #grainfx{opacity:.3}
/* 开场：黄色旋风铺天盖地涌来 */
#scene::after{content:'';position:absolute;inset:-20%;z-index:9;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  background:conic-gradient(from 0deg,rgba(255,214,90,.0),rgba(255,206,70,.55),rgba(255,236,150,.15),rgba(240,180,40,.6),rgba(255,214,90,0));filter:blur(30px)}
#scene.whirl::after{opacity:1;animation:whirl6 1.6s linear infinite}
@keyframes whirl6{to{transform:rotate(360deg)}}

/* 同一栋房子：刚刷的新漆 / 墙皮整片脱落 */
#house6 img{transition:filter 1.4s ease}
#house6.fresh img{filter:brightness(1.12) saturate(.75) contrast(.95)}
#house6.aged img{filter:sepia(.45) brightness(.78) contrast(1.08)}

/* 便利贴 */
.tag6{position:absolute;padding:5px 9px 6px;min-width:34px;text-align:center;background:linear-gradient(170deg,#fff6b8,#f6e27a);color:#4a3a1a;
  font:600 21px/1.1 'Long Cang','DlgSerif',var(--pen-font);transform:rotate(var(--r));box-shadow:0 3px 6px rgba(70,40,0,.28);white-space:nowrap;pointer-events:none}
.tag6:before{content:'';position:absolute;left:50%;top:-6px;width:26px;height:10px;margin-left:-13px;background:rgba(255,255,255,.55);transform:rotate(-4deg)}
/* 风里打转的便利贴 / 名字 */
.tag6.spin6{animation:spin6 var(--dur) linear infinite;animation-delay:var(--del);opacity:.9}
@keyframes spin6{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(90px,-40px) rotate(90deg)}50%{transform:translate(0,-80px) rotate(180deg)}75%{transform:translate(-90px,-40px) rotate(270deg)}100%{transform:translate(0,0) rotate(360deg)}}
.tag6.spin6.light{animation:fall6 2.2s ease-in forwards;background:radial-gradient(circle,#fffbe0,#ffe27a);box-shadow:0 0 18px 6px rgba(255,230,140,.8);color:transparent}
@keyframes fall6{to{transform:translateY(520px) scale(.2);opacity:0}}

/* 剪影 NPC */
.prop.npc6{filter:var(--cut-shadow);transition:transform .3s}
.prop.npc6.flipimg img{transform:scaleX(-1)}
.prop.npc6.walking img{animation:hop6 .32s ease-in-out infinite}
@keyframes hop6{50%{translate:0 -8px}}
.prop.crowd6 img{animation:sway6 var(--sw,3s) ease-in-out infinite;transform-origin:50% 100%}
.prop.crowd6.flipimg img{animation-name:sway6f}
@keyframes sway6{50%{transform:rotate(1.6deg)}}
@keyframes sway6f{0%,100%{transform:scaleX(-1)}50%{transform:scaleX(-1) rotate(1.6deg)}}
.prop.shake6 img{animation:shake6 .6s ease-in-out}
@keyframes shake6{20%{transform:rotate(-5deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
/* 头顶飘着的名字 */
.name6{position:absolute;left:50%;bottom:calc(100% + 18px);transform:translateX(-50%);white-space:nowrap;font:600 19px/1 'DlgSerif',var(--pen-font);color:#5a3a10;
  padding:5px 10px;background:rgba(255,241,170,.88);border-radius:3px;box-shadow:0 2px 5px rgba(80,50,0,.25);animation:bob6 2.8s ease-in-out infinite;animation-delay:var(--d)}
.name6.big{font-size:21px;background:#fff1a8}
.name6.glow{box-shadow:0 0 16px 6px rgba(255,220,110,.85);background:#fff7cf}
@keyframes bob6{50%{translate:0 -7px}}
#scene.dimnote .name6,#scene.dimnote .tag6,#scene.dimnote #handnote{filter:brightness(.55) saturate(.4);transition:filter .3s}

/* 黄蝴蝶 */
.bfly6{position:absolute;width:120px;margin:-50px 0 0 -60px;pointer-events:none;scale:var(--s);animation:orbit6 var(--dur) linear infinite;animation-delay:var(--del)}
.bfly6 img{display:block;width:100%;animation:flap6 .36s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes flap6{to{transform:scaleX(.55)}}
@keyframes orbit6{0%{translate:var(--rx) 0}25%{translate:0 var(--ry)}50%{translate:calc(var(--rx) * -1) 0}75%{translate:0 calc(var(--ry) * -1)}100%{translate:var(--rx) 0}}
.bfly6.scatter{animation:scatter6 2.6s ease-out forwards}
@keyframes scatter6{to{translate:calc(var(--rx) * 6) calc(var(--ry) * -8);opacity:0}}

/* 主角：边缘模糊 / 手背上的便利贴 */
#player.fuzzy #player-sprite{animation:fuzzy6 2.4s ease-in-out infinite}
@keyframes fuzzy6{0%,100%{filter:blur(1.6px) opacity(.82)}50%{filter:blur(3.2px) opacity(.62)}}
#player.faded6 #player-sprite{filter:blur(1.2px) opacity(.78)}
#handnote{position:absolute;left:14px;bottom:118px;width:58px;transform:rotate(-12deg);z-index:3;pointer-events:none;transition:transform .5s,opacity .5s}
#handnote img{display:block;width:100%}
#handnote span{position:absolute;inset:14% 12%;font:600 8px/1.25 'DlgSerif',serif;color:#2f3f6a;overflow:hidden}
#handnote.drop{transform:translate(20px,110px) rotate(70deg);opacity:0}
#handnote.named{filter:drop-shadow(0 0 8px rgba(255,220,110,.95))}
#handnote.named span{font-size:11px;color:#7a4b10;text-align:center;padding-top:6px}

/* 晾衣绳固定不动，只有床单鼓风 / 垂落 */
#sheet6{filter:var(--cut-shadow)}
#sheet6 .ln{display:block;width:100%}
#sheet6 .sh{position:absolute;left:0;top:0;width:100%;transform-origin:50% 21%}
#sheet6.billow .sh{animation:billow6 2.8s ease-in-out infinite}
#sheet6.billow.big .sh{animation:billowBig6 1.3s ease-in-out infinite}
#sheet6.droop .sh{animation:none;transform:scaleY(.9);filter:brightness(.88);transition:transform .4s}
@keyframes billow6{0%,100%{transform:none}50%{transform:skewX(-4deg) scale(1.03,1.02) translateX(8px)}}
@keyframes billowBig6{0%,100%{transform:skewX(-3deg) scale(1.04,1.03)}50%{transform:skewX(-9deg) scale(1.1,1.06) translateX(18px)}}
.prop.fence6{filter:var(--cut-shadow)}
/* 床单铺在主角脚下，主角站在床单中间飞 */
#sail{position:absolute;left:-230px;bottom:-62px;width:460px;z-index:-1;pointer-events:none;transform-origin:50% 50%;animation:sailIn6 .5s ease-out both}
#sail img{display:block;width:100%;transform-origin:50% 50%;animation:ripple6 1.2s ease-in-out infinite;filter:var(--cut-shadow)}
#sail.away{animation:sailAway6 1.5s ease-in forwards}
@keyframes sailIn6{from{transform:scale(.3,.1);opacity:0}to{transform:none;opacity:1}}
@keyframes ripple6{0%,100%{transform:perspective(600px) rotateX(58deg) skewX(-4deg) translateY(0)}50%{transform:perspective(600px) rotateX(50deg) skewX(5deg) translateY(-8px)}}
@keyframes sailAway6{to{transform:translate(320px,-300px) rotate(18deg) scale(.7);opacity:0}}

/* 龙卷风：风更暗、风墙压过来；改对后风停、天色转暖 */
#gale{position:absolute;left:0;top:-88px;width:5172px;height:1000px;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  background:radial-gradient(ellipse 30% 45% at 3460px 300px,rgba(20,14,30,.55),rgba(20,14,30,0) 70%)}
#scene.gale #gale{opacity:1;animation:gale6 1.4s ease-in-out infinite}
#scene.galeplus #gale{opacity:1;filter:brightness(.5)}
#scene.gale #vignette,#scene.galeplus #vignette{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 40%,rgba(20,10,30,.55) 100%)}
@keyframes gale6{50%{transform:translateX(-14px)}}
#scene.calm #bg6{filter:brightness(1.12) saturate(1.1);transition:filter 3s ease}
#scene.calm #vignette{background:radial-gradient(ellipse at 50% 40%,rgba(255,240,190,.18),rgba(120,70,10,.2) 100%);transition:background 3s}

/* 书境崩塌：画面慢慢过曝褪色，光从中间漫开，整片变白；再从白里淡出书桌 */
#scene{transition:filter 3.4s ease-in}
#scene.bloom{filter:brightness(1.7) saturate(.35) contrast(.8) blur(1.5px)}
#whiteout{position:absolute;inset:0;z-index:47;pointer-events:none;opacity:0;transition:opacity 3.2s cubic-bezier(.6,0,.35,1);
  background:radial-gradient(circle at 50% 42%,#fffef9 0%,#fffdf6 45%,#fff5dc 100%)}
#whiteout i{position:absolute;left:50%;top:42%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;
  background:radial-gradient(circle,#fff 0%,rgba(255,252,240,.85) 35%,rgba(255,250,235,0) 70%);transform:scale(.2);opacity:0;transition:transform 3.4s cubic-bezier(.5,0,.3,1),opacity 1.2s}
#whiteout.on{opacity:1}
#whiteout.on i{transform:scale(9);opacity:1}
#whiteout.off{opacity:0;transition:opacity 2.4s ease-out}

/* ═══════════ 终幕：现实书桌 ═══════════ */
#desk{position:absolute;inset:0;z-index:22;overflow:hidden;opacity:0;transition:opacity 1.4s ease;
  background:radial-gradient(ellipse 60% 70% at 46% 30%,#4a3726 0%,#2a1d13 55%,#140d08 100%)}
#desk.on{opacity:1}
#desk:before{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,#5a3d24,#3b2715);box-shadow:0 -2px 0 #6e4c2e}
#desk-lamp{position:absolute;left:-120px;top:-160px;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.35),rgba(255,200,120,0) 62%);pointer-events:none}
#reject{position:absolute;left:70px;top:430px;width:300px;padding:26px 26px 20px;background:url(../level1/assets/scroll_paper.webp) center/cover,#efe4c6;transform:rotate(-7deg);
  box-shadow:0 12px 24px rgba(0,0,0,.5);font:17px/1.8 'DlgSerif',var(--pen-font);color:#4a3a24}
#reject p{margin:0}
#reject b{color:#b8322a;font-weight:600;text-decoration:underline wavy rgba(184,50,42,.5)}
#reject .sig{text-align:right;color:#7a6a50;font-size:14px;margin-top:10px}
#fin-book{position:absolute;left:330px;top:76px;width:1180px;height:708px;background:url(../level1/assets/book.webp) center/100% 100% no-repeat;filter:drop-shadow(0 26px 30px rgba(0,0,0,.6))}
#fin-left,#fin-right{position:absolute;top:70px;height:560px;width:400px;color:var(--ink)}
#fin-left{left:132px;display:flex;flex-direction:column;justify-content:center;font:18px/2 'DlgSerif',var(--pen-font);color:#5a4a34;text-align:center;opacity:.85}
#fin-left .sc-eyebrow{margin-bottom:14px}
#fin-left p{margin:0 0 8px}
#fin-right{left:648px;text-align:center}
#fin-wrap .sc-eyebrow{margin-top:40px}
#fin-title{margin:14px 0 10px;font:400 32px/1.3 var(--title);letter-spacing:6px}
#fin-prompt{margin:0 0 30px;font:17px/1.8 'DlgSerif',var(--pen-font);color:#6b5a40}
#fin-input{width:360px;border:0;outline:0;background:transparent;border-bottom:2px solid rgba(90,70,40,.45);text-align:center;padding:6px 0 10px;
  font:600 30px/1.3 'DlgSerif',var(--pen-font);color:var(--ink);caret-color:#7a3b6b;transition:color .3s,text-shadow .3s}
#fin-input::placeholder{color:rgba(90,74,52,.32)}
#fin-idle{min-height:26px;margin:14px 0 0;font:16px/1.6 'DlgSerif',var(--pen-font);color:#5f7a62;opacity:0;transition:opacity 2s}
#fin-idle.on{opacity:.9}
#fin-btns{display:flex;justify-content:center;gap:18px;margin-top:40px}
#fin-btns .lbl{min-width:0;height:54px;font-size:17px;letter-spacing:2px;padding:0 20px;white-space:nowrap}
/* 写下“我是怪物”：三支笔的墨水同时亮起；写别人的名字：纸面浮出皇后轮廓 */
#desk.triink #fin-input{text-shadow:-3px 0 10px rgba(47,92,154,.55),3px 0 10px rgba(166,122,28,.6),0 3px 10px rgba(95,122,98,.6)}
#fin-right:after{content:'♛';position:absolute;left:0;right:0;top:120px;text-align:center;font-size:260px;line-height:1;color:#b8322a;opacity:0;transition:opacity .8s;pointer-events:none}
#desk.queen #fin-right:after{opacity:.12}
#desk.tearing #fin-book{animation:tear6 .5s ease-in-out 2}
@keyframes tear6{25%{transform:rotate(-.6deg)}75%{transform:rotate(.6deg)}}
#desk.torn #fin-right{clip-path:polygon(0 0,100% 0,96% 18%,100% 36%,94% 55%,100% 74%,95% 100%,0 100%);opacity:.35;transition:opacity 1s}
#fin-line{position:absolute;left:0;right:0;top:120px;margin:0;font:600 34px/1.5 'DlgSerif',var(--pen-font);color:#3b2a12;opacity:0;transition:opacity 1s}
#desk.done #fin-line{opacity:1}
#desk.cold #fin-line{color:#b8322a}
#desk.cold #fin-book{filter:grayscale(.85) drop-shadow(0 26px 30px rgba(0,0,0,.6))}
#fin-cap{position:absolute;left:-560px;right:-40px;bottom:-110px;margin:0;font:400 34px/1.4 var(--title);letter-spacing:8px;color:#f6e9c8;opacity:0;transition:opacity 1.6s;text-shadow:0 2px 10px rgba(0,0,0,.6)}
#fin-cap.on{opacity:1}
/* 怪字拆心 */
#guai{position:absolute;left:0;right:0;top:292px;height:260px;opacity:0;transition:opacity .8s;cursor:grab;touch-action:none;user-select:none}
#guai.on{opacity:1}
#guai span{position:absolute;top:0;font:900 210px/1 'DlgSerif','Noto Serif SC',serif;color:#2a1f10;transition:transform 1.2s cubic-bezier(.3,1.3,.5,1),color .8s,text-shadow .8s}
#guai .xin{left:96px}
#guai .sheng{left:150px}
#guai small{position:absolute;top:226px;font:600 22px/1 'DlgSerif',var(--pen-font);color:#a67a1c;opacity:0;transition:opacity .8s .5s}
#guai .lbl-x{left:60px}
#guai .lbl-s{right:58px}
#guai.apart .xin{transform:translateX(-70px);color:#b8322a;text-shadow:0 0 24px rgba(255,170,150,.9)}
#guai.apart .sheng{transform:translateX(70px);color:#a67a1c;text-shadow:0 0 24px rgba(255,230,160,.9)}
#guai.apart small{opacity:1}
#guai.merge span{transition-duration:1.2s}
#guai-hint{position:absolute;left:0;right:0;top:-44px;margin:0;font:17px/1 'DlgSerif',var(--pen-font);color:#7a6a50;transition:opacity .5s}
#guai.apart #guai-hint,#guai.merge #guai-hint{opacity:0}
#desk.done:has(#guai.on) #fin-line{opacity:.15}

/* ═══════════ 结局 ═══════════ */
#ending{position:absolute;inset:0;z-index:36;display:grid;place-items:center;background:rgba(14,12,8,.55);opacity:0;transition:opacity 1.2s ease}
#ending.on{opacity:1}
#end-page{position:relative;width:980px;padding:56px 90px 46px;text-align:center;background:url(../level1/assets/scroll_paper.webp) center/100% 100% no-repeat;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
#end-title{margin:12px 0 22px;font:400 40px/1.3 var(--title);letter-spacing:8px;color:var(--ink)}
#end-scene{margin:0 0 22px;font:18px/1.95 'DlgSerif',var(--pen-font);color:#5a4a34;text-align:left;text-indent:2em}
#end-line{margin:0 0 18px;font:600 30px/1.5 'DlgSerif',var(--pen-font);color:#3b2a12}
#end-moral{margin:0 0 10px;font:19px/1.8 'DlgSerif',var(--pen-font);color:#4a3a24}
#end-card{margin:0 0 28px;font:16px/1.8 'DlgSerif',var(--pen-font);color:#8a7656;font-style:italic}
.end-btns{display:flex;justify-content:center;gap:22px}
.end-btns .lbl{min-width:0;padding:0 26px;white-space:nowrap}
#ending.end-A #end-line{color:#2f5c9a}
#ending.end-B #end-line{color:#a6641c;text-shadow:0 0 14px rgba(255,190,90,.45)}
#ending.end-C #end-line{color:#5f7a62}
#ending.end-D #end-line{background:linear-gradient(90deg,#2f5c9a,#a67a1c,#5f7a62);-webkit-background-clip:text;background-clip:text;color:transparent}
#ending.end-bad{background:rgba(120,12,10,.45)}
#ending.end-bad #end-page{filter:grayscale(.7) drop-shadow(0 30px 40px rgba(0,0,0,.5))}
#ending.end-bad #end-line{color:#b8322a}
#ending.end-hidden{background:rgba(255,255,252,.92)}
#ending.end-hidden #end-page{filter:grayscale(.9) brightness(1.12)}
#ending.end-hidden #end-scene,#ending.end-hidden #end-moral{color:#9a9488}
#ending.crack #end-page:after{content:'';position:absolute;right:70px;top:40px;width:70px;height:120px;background:#1a1410;clip-path:polygon(40% 0,58% 22%,46% 40%,66% 62%,50% 100%,36% 64%,48% 44%,30% 20%)}

/* 对话框姓名栏：长名字分两行 */
#dlg-name.long{flex-direction:column;gap:4px;line-height:1}
#dlg-name.long b{font-weight:inherit;font-size:22px;letter-spacing:2px}
#dlg-name.long small{font-size:13px;letter-spacing:5px;opacity:.8}

/* 龙卷风场景：风眼里的那群蝴蝶等外面的蝴蝶被卷过去才渐渐显出来 */
.bfly6.eye6{opacity:0;transition:opacity 4s ease}
#scene.gather .bfly6.eye6{opacity:1}
.bfly6.swept{scale:calc(var(--s) * .8);animation-duration:2.2s}

/* 《奇遇记》最后一页：落笔后字留在原处，按钮和提示只是淡去，不挪位置 */
#fin-prompt{min-height:30px}
#fin-btns .lbl{width:170px;padding:0}
#fin-wrap #fin-btns,#fin-wrap #fin-idle{transition:opacity .6s}
#fin-wrap.sealed #fin-btns,#fin-wrap.sealed #fin-idle{opacity:0;pointer-events:none}
#fin-wrap.sealed #fin-input{border-bottom-color:transparent;cursor:default}
#desk.cold #fin-input{color:#b8322a}
#fin-line{display:none}