/* ═══════════════════════════════════════════════════════════
   第三关 · 变形计 —— 在 ../level1/style.css 之上新增的样式
   ═══════════════════════════════════════════════════════════ */
/* ── 与第二关相同的通用部分：剪纸阴影、名牌、两支笔的词块颜色、换笔高亮 ── */
.cut,.cut-svg{filter:var(--cut-shadow)}
.blk>svg.cut-svg,.blk>.cut-svg{display:block;width:100%;height:100%}
.flipx>svg{transform:scaleX(-1)}
.flipimg img{transform:scaleX(-1)}
/* ── 名牌颜色 ── */
#dlg-name.yanshe{color:#a8642a}   /* 和渊默一样：拼贴对话框里只换名字颜色，不加底色和图标 */
.chip.sel{outline:3px solid #c9a24a;transform:rotate(0) translateY(-4px)}
#sc-passage .letter{display:block;margin:4px 0 0;padding:10px 16px;font-style:italic;color:#5a4a30;background:rgba(244,231,189,.45);border-left:4px solid #c9a24a}
/* ── 两支笔的词块颜色：渊默蓝白，焰舌金 ── */
.chip.pen1{background:#d9e6fb;color:#1c3866;box-shadow:0 0 0 2px #7f9ccc inset,0 3px 5px rgba(0,0,0,.15)}
.chip.pen2{background:#fbe6b0;color:#74430f;box-shadow:0 0 0 2px #cf9636 inset,0 3px 5px rgba(0,0,0,.15)}
#parch-in[data-pen="2"] .sc-eyebrow{color:#a8642a}
#bank.xdense{gap:10px 12px}
#bank.xdense .chip{font-size:21px;padding:8px 14px 7px}
#hud.pens-up{z-index:26}
#hud.pens-up #hud-life,#hud.pens-up #hud-title,#hud.pens-up #btn-scroll,#hud.pens-up #btn-mute{opacity:0;transition:opacity .3s}
#hud.pens-up #pens .pen:not(.locked){box-shadow:0 0 0 3px #fff8e4,0 0 18px rgba(255,220,140,.8)}
/* 换笔：没落笔的字褪去，稿纸轻轻一抖 */
#slots .fadeout{transition:opacity .5s,filter .5s,transform .5s;opacity:0;filter:blur(3px);transform:translateY(-14px) rotate(-4deg)}
#scroll.penswap #parch-in{animation:penswap .6s ease-out}
@keyframes penswap{0%{filter:none}30%{filter:sepia(.6) brightness(1.08)}100%{filter:none}}
#dlg-name.blue{background:#4f6f95}#dlg-name.violet{background:#5e4c7a}#dlg-name.brown{background:#6e5a3f}

/* ── 主角的虫影：回执之后鼓起尖角，沙发之后整个成形 ── */
#bugshadow{position:absolute;left:-150px;bottom:-6px;width:300px;height:200px;pointer-events:none;z-index:-1;opacity:0;transition:opacity 1.2s}
#bugshadow svg{width:100%;height:100%;fill:#1c1814;stroke:#1c1814;filter:blur(1.5px)}
#bugshadow g{opacity:0;transition:opacity 1s}
#player.form1 #bugshadow{opacity:.55}#player.form1 #bugshadow .f1{opacity:1}
#player.form1 #bugshadow{left:-150px;bottom:110px;height:150px}
#player.form2 #bugshadow{opacity:0}   /* 变成虫以后直接换虫子立绘，不再需要影子 */

/* ── 房间：地板 / 天窗的灰尘光 ── */
#scene.room #vignette,#scene.living #vignette,#scene.hall3 #vignette{background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,0) 40%,rgba(20,16,10,.62) 100%)}
#scene.room #grainfx,#scene.living #grainfx,#scene.hall3 #grainfx{opacity:.5}
#scene.greyer{filter:grayscale(.8) brightness(.85);transition:filter .3s}

/* ── 卧室：床、灌了铅的被子、床头的信、门缝的光 ── */
@keyframes heavy{50%{transform:scaleY(.96) translateY(6px);filter:brightness(.6)}}
#note{transition:opacity .8s}
#note img{display:block;width:100%;height:100%;transform:rotate(-8deg);filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));transition:filter .5s}
#note.on img{filter:drop-shadow(0 0 10px rgba(255,230,160,.95)) drop-shadow(0 0 4px rgba(255,230,160,.9))}
#doorlight i,#doorlight3 i{position:absolute;left:10%;right:10%;bottom:0;height:10px;background:linear-gradient(90deg,transparent,rgba(255,220,140,.95),transparent);filter:blur(3px);opacity:0;transition:opacity 1.5s}
#doorlight.on i,#doorlight3.on i{opacity:1}
#doorlight.on:after,#doorlight3.on:after{content:'';position:absolute;left:-40%;right:-40%;bottom:0;height:120px;background:radial-gradient(ellipse at 50% 100%,rgba(255,220,140,.4),rgba(255,220,140,0) 70%);pointer-events:none}

/* ── 客厅：巨大的家人剪影、餐桌、沙发 ── */
.giant img{filter:brightness(.35) blur(1px);opacity:.82}
#sofa,#sofa-front{transition:transform .3s;transform-origin:50% 100%}
#sofa.sag,#sofa-front.sag{transform:scaleY(.94)}

/* ── 走廊：退稿信、门上的木牌、蜂鸣、面包和水 ── */
.paper{transform:rotate(var(--r,0deg));transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.paper.shake{animation:tremble .12s linear 6}
.paper.tidy{transform:rotate(0) scale(.6);opacity:.0;transition:transform .6s,opacity .6s}
#stack i{position:absolute;left:20%;right:20%;bottom:0;height:22px;background:#f3ecd9;box-shadow:0 -6px 0 #e9e0c8,0 -12px 0 #f3ecd9,0 4px 6px rgba(0,0,0,.3);opacity:0;transition:opacity .6s .9s}
#scene.living .paper.tidy ~ #stack i{opacity:1}
#sign{display:grid;place-items:center;background:#7a5a3a;border:5px solid #4a3624;box-shadow:0 6px 10px rgba(0,0,0,.4),inset 0 0 0 3px #a8835a}
#sign .sign-in{display:flex;gap:6px}
#sign .sign-in b{display:grid;place-items:center;width:46px;height:46px;background:#e6d6b0;box-shadow:inset 0 0 0 2px #b99a62;font:900 32px/1 'DlgSerif','Noto Serif SC',serif;color:#3a2a1c}
#sign .sign-in b.none{background:rgba(0,0,0,.25);box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
#sign.lit{box-shadow:0 0 0 4px rgba(255,220,140,.6),0 0 24px rgba(255,220,140,.6)}
#sign.deny{animation:tremble .1s linear 6}
#sign.ok .sign-in b{background:#f3e6c0}
#L-far #grete-end{opacity:0;transition:opacity 1.6s}
#L-far #grete-end.show{opacity:1}
#buzz i{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0) 40%,rgba(255,250,235,.55) 100%);transition:opacity .4s}
#buzz.on i{opacity:1;animation:buzz .18s steps(2) infinite}
#buzz.loud i{opacity:1;animation:buzz .08s steps(2) infinite;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.1) 30%,rgba(255,250,235,.85) 100%)}
@keyframes buzz{50%{transform:translate(2px,-1px)}}
.faller{position:absolute;z-index:30;pointer-events:none;filter:drop-shadow(0 4px 3px rgba(0,0,0,.35))}
.faller .drop-word{display:block;font:900 54px/1 'DlgSerif','Noto Serif SC',serif;color:#3a332a;-webkit-text-stroke:2px #efe4c6;paint-order:stroke fill}

/* ── 卷轴：挪标点 ── */
#slots .pn-line{display:flex;justify-content:center;align-items:flex-end;padding:18px 0 8px;font:900 56px/1 'DlgSerif','Noto Serif SC',serif;color:#2a1f10}
#slots .pn-ch{padding:0 2px}
#slots .gap{display:inline-grid;place-items:end center;width:34px;height:62px;margin:0 2px;border-bottom:3px dashed rgba(107,74,34,.35);cursor:pointer;transition:background .2s}
#slots .gap:hover,#slots .gap.armed{background:rgba(201,162,74,.18)}
#slots .gap.full{border-bottom-color:transparent}
#slots .gap .mk{font:900 48px/1 'DlgSerif','Noto Serif SC',serif;color:#a63e2c}
#slots .gap .mk.inked{color:#1b3d70}
#bank.marks{gap:22px}
#bank.marks .chip{font-size:40px;padding:6px 22px 10px}

/* ── 卷轴：推字块（木牌） ── */
#slots .pboard{position:relative;margin:4px auto 0;background:#8c6b47;box-shadow:inset 0 0 0 6px #5e4630,0 6px 12px rgba(0,0,0,.3);border-radius:4px;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 2px,transparent 2px 14px)}
#slots .pcell{position:absolute;width:var(--c);height:var(--c);box-shadow:inset 0 0 0 1px rgba(255,240,210,.08);cursor:pointer}
#slots .prule{position:absolute;background:rgba(250,236,200,.22);border:3px dashed #f3e2b4;border-radius:6px}
#slots .prule span{position:absolute;left:-58px;top:50%;transform:translateY(-50%);font:700 15px/1 var(--pen-font);color:#f3e2b4;letter-spacing:2px}
#slots .pblock{position:absolute;width:var(--c);height:var(--c);display:grid;place-items:center;transition:left .12s,top .12s;
  background:#e6d6b0;box-shadow:inset 0 0 0 3px #b99a62,0 3px 4px rgba(0,0,0,.35);font:900 34px/1 'DlgSerif','Noto Serif SC',serif;color:#3a2a1c;transform:scale(.9)}
#slots .pblock.in{background:#f6ead0}
#slots .pblock.stuck{animation:tremble .1s linear 3}
#slots .pblock.inked{color:#1b3d70;background:#eef4ff}
#slots .pbug{position:absolute;width:var(--c);height:var(--c);transition:left .12s,top .12s;display:grid;place-items:center}
#slots .pbug i{display:block;width:70%;height:46%;background:#1c1814;border-radius:50%;box-shadow:0 0 0 3px #efe4c6;position:relative}
#slots .pbug i:before{content:'';position:absolute;right:-9px;top:3px;width:14px;height:14px;border-radius:50%;background:#1c1814;box-shadow:0 0 0 3px #efe4c6}
#slots .pbug i:after{content:'';position:absolute;left:8%;right:8%;top:-8px;bottom:-8px;background:repeating-linear-gradient(90deg,#1c1814 0 3px,transparent 3px 11px);z-index:-1}
#slots .pbug.left{transform:scaleX(-1)}
#slots .prow{text-align:center;margin-top:10px;font:600 22px/1.4 var(--pen-font);color:#4a3a24}
#slots .prow b{letter-spacing:4px;font-size:26px}
#slots .prow em{font-style:normal;color:#a08a5c}
#slots .prow small{font-size:15px;color:#8a6a3a}

/* 退稿信：纸条图 + 字迹 */
.paper .paper-img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.paper .paper-ink{position:absolute;inset:0;width:100%;height:100%}
.apple-fall{position:absolute;left:0;top:0;z-index:15;pointer-events:none;filter:drop-shadow(0 4px 3px rgba(0,0,0,.35))}

/* 床图：左下角对齐，换图时轻轻一弹 */
#bed img{position:absolute;left:0;bottom:0;display:block;filter:drop-shadow(0 6px 5px rgba(25,20,10,.4))}
#bed.heavy img{animation:heavy .6s ease-in-out 2}

/* 变成虫：一团黑色慢慢涌上来，再慢慢散开 */
.inkcloud{position:absolute;left:-150px;bottom:-30px;width:300px;height:300px;pointer-events:none;z-index:5}
.inkcloud i{position:absolute;border-radius:50%;background:radial-gradient(circle,#0e0c0a 0,#1a1612 45%,rgba(20,16,12,0) 72%);filter:blur(6px);opacity:0;transform:scale(.3);
  transition:opacity 1.6s ease,transform 1.8s cubic-bezier(.3,.7,.3,1)}
.inkcloud i:nth-child(1){left:70px;top:90px;width:170px;height:170px}
.inkcloud i:nth-child(2){left:20px;top:150px;width:150px;height:140px;transition-delay:.15s}
.inkcloud i:nth-child(3){left:140px;top:140px;width:150px;height:150px;transition-delay:.3s}
.inkcloud i:nth-child(4){left:60px;top:20px;width:130px;height:130px;transition-delay:.45s}
.inkcloud i:nth-child(5){left:120px;top:200px;width:120px;height:100px;transition-delay:.2s}
.inkcloud.in i{opacity:.95;transform:scale(1)}
.inkcloud.out i{opacity:0;transform:scale(1.25);transition:opacity 1.8s ease,transform 2s ease}

/* ── 用户提供的房间背景：门画在背景里，门缝的光、门上的木牌叠在背景层上 ── */
.bgdoor-light{position:absolute;width:300px;height:30px;pointer-events:none}
#L-sky #sign{position:absolute}
#door3{position:absolute;width:300px;height:600px;pointer-events:none}
#door3 i{position:absolute;inset:0;opacity:0;transition:opacity 1.6s,clip-path 1.6s;mix-blend-mode:screen;clip-path:inset(0 0 0 100%);
  background:linear-gradient(90deg,rgba(255,226,150,.15),rgba(255,236,175,.75) 60%,rgba(255,244,205,.95));filter:blur(3px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 92%,transparent)}
#door3.crack i{opacity:.7;clip-path:inset(0 0 0 82%)}          /* 渊默：门开一道缝 */
#door3.self i{opacity:.85;clip-path:inset(0 0 0 55%);transition-duration:3.2s}   /* 否认：自己慢慢挪开 */
#door3.burst i{opacity:1;clip-path:inset(0 0 0 0)}              /* 焰舌：门整个被撞开 */
#door3.crack:after,#door3.self:after,#door3.burst:after{content:'';position:absolute;left:-30%;right:-60%;bottom:-40px;height:120px;background:radial-gradient(ellipse at 70% 40%,rgba(255,226,150,.5),rgba(255,226,150,0) 70%);pointer-events:none}
.prop-img img{display:block;width:100%;height:100%}
.apple-img{display:block}

/* 客厅里的父母：站在背景餐桌前的巨大黑影，要看得清（远景层默认的半透明会让它们几乎消失） */
#scene.living #L-far .prop.giant{opacity:.92;filter:none}
#scene.living #L-far .prop.giant img{opacity:1;filter:brightness(.55) drop-shadow(0 0 2px rgba(240,225,195,.7)) drop-shadow(0 0 18px rgba(0,0,0,.55))}

/* 标题字标：本关只用四张纸片，下面换成本关名字的纸条 */
#logo{height:219px;background-image:url(../level1/assets/logo_tiles.webp)}
#logo-sub{display:inline-block;margin-top:18px;padding:10px 34px 8px;background:#efe3c6;color:#2a2622;font-size:32px;letter-spacing:6px;text-shadow:none;transform:rotate(-1.2deg);
  clip-path:polygon(0 8%,6% 0,30% 6%,55% 0,80% 5%,100% 0,98% 50%,100% 100%,70% 94%,40% 100%,12% 93%,0 100%,2% 50%);filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}
/* ─────────── 门上的家规：华容道 ─────────── */
#slots .kboard{position:relative;margin:6px auto 0;background:#7a5a3a;border-radius:6px;
  box-shadow:0 0 0 10px #5e4630,0 0 0 13px #a8835a,0 10px 18px 10px rgba(0,0,0,.28);touch-action:none;user-select:none}
#slots .kboard:before{content:'';position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,240,210,.05) 0 calc(var(--c) - 1px),rgba(0,0,0,.12) calc(var(--c) - 1px) var(--c)),
             repeating-linear-gradient(0deg,rgba(255,240,210,.04) 0 calc(var(--c) - 1px),rgba(0,0,0,.1) calc(var(--c) - 1px) var(--c))}
#slots .kexit{position:absolute;bottom:-14px;height:16px;background:linear-gradient(180deg,#2a1d12,#f7e7b8);
  box-shadow:0 0 18px 6px rgba(255,226,150,.55);border-radius:0 0 4px 4px;z-index:0}
#slots .kexit:after{content:'出口';position:absolute;left:50%;top:22px;transform:translateX(-50%);font:700 15px/1 var(--pen-font);color:#8a6a3a;letter-spacing:4px;white-space:nowrap}
#slots .kpiece{position:absolute;box-sizing:border-box;padding:4px;cursor:grab;z-index:1;transition:left .12s,top .12s}
#slots .kpiece b{display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;background:#e9dbb6;
  box-shadow:inset 0 0 0 2px #b99a62,0 3px 0 #6e5233,0 5px 8px rgba(0,0,0,.3);border-radius:3px;
  font:900 34px/1.1 'DlgSerif','Noto Serif SC',serif;color:#3a2a1c;writing-mode:vertical-rl;letter-spacing:6px}
#slots .kpiece.s21 b,#slots .kpiece.s11 b{writing-mode:horizontal-tb}
#slots .kpiece.key b{background:#f4e2c8;color:#8a1e14;font-size:78px;box-shadow:inset 0 0 0 3px #a0442e,0 3px 0 #6e2a1a,0 6px 12px rgba(0,0,0,.35)}
#slots .kpiece.drag{cursor:grabbing;transition:none;z-index:3;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}
#slots .kpiece:hover b{filter:brightness(1.05)}
#slots .krow{text-align:center;margin-top:44px;font:600 22px/1.4 var(--pen-font);color:#4a3a24}
#slots .krow b{letter-spacing:4px;font-size:26px}
#slots .krow small{font-size:15px;color:#8a6a3a}
/* 拖出去就自动判定，不需要提交按钮 */
#scroll.klotski #sc-submit{display:none}
/* 木牌从门上松开、落下 */
#sign.drop{transition:transform 1.2s cubic-bezier(.5,0,.75,0),opacity 1.2s ease .3s;transform:translateY(420px) rotate(14deg);opacity:0}
/* 门开以后的地板条（与 #floor 同一套样式） */
#floor-open{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)}