/* ═══════════════════════════════════════════════════════════
   第二关 · 了不起的盖茨比 —— 在 ../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}   /* 和渊默一样：拼贴对话框里只换名字颜色，不加底色和图标 */
#dlg-name.gold{background:#a88a3c}#dlg-name.grey{background:#6b665c}

/* ── 前景土堆：每个场景换色 ── */
.fg-mound{filter:blur(1.5px)}
.fg-mound svg{display:block;width:100%;height:100%}
#scene.ash{--fg:#2e2b26}
#scene.gate{--fg:#1d2219}
#scene.letter{--fg:#2a3221}
#scene.hall .fg-mound{display:none}

/* ── 1 · 灰烬谷 ── */
.ash-haze{position:absolute;inset:0;background:linear-gradient(180deg,rgba(150,140,110,.5),rgba(120,112,92,.15) 45%,rgba(90,84,70,0) 70%);mix-blend-mode:multiply;pointer-events:none}
#scene.ash #L-mist i{background:radial-gradient(ellipse,rgba(170,160,135,.45),rgba(170,160,135,0) 70%)}
#scene.ash #vignette{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 45%,rgba(30,26,18,.6) 100%)}
.billboard{filter:sepia(.3) brightness(.9) drop-shadow(0 6px 4px rgba(0,0,0,.35))}
.billboard .iris{transition:fill .25s}
.billboard.glare .iris{fill:#a8261d}
.billboard.glare{animation:tremble .12s linear 6}
.heap{opacity:.95}
#shop .shop-img{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .9s,filter .4s}
#shop .shop-img.opened{opacity:0}
#shop.open .shop-img.opened{opacity:1}
#shop.open .shop-img.shut{opacity:0}
#shop .shop-win{position:absolute;left:12.5%;top:31%;width:46%;height:43%;pointer-events:none;mix-blend-mode:screen}
#shop .win-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,rgba(255,214,110,0),rgba(255,214,110,0) 70%);transition:background 1.2s}
#shop.lit .win-glow{background:radial-gradient(ellipse at 42% 62%,rgba(255,214,110,.55),rgba(255,180,60,.18) 50%,rgba(40,30,20,0) 80%)}
#shop .flame-pen{position:absolute;left:24%;top:31%;height:39%;width:auto;opacity:0;transition:opacity .5s}
#shop.open .flame-pen{opacity:1;filter:drop-shadow(0 0 10px rgba(255,200,90,.95));animation:penbob 2.4s ease-in-out infinite}
@keyframes penbob{0%,100%{translate:0 0}50%{translate:0 -6px}}
#shop .door-light{position:absolute;left:66%;top:34%;width:21%;height:57%;background:radial-gradient(ellipse at 22% 60%,rgba(255,222,140,.85),rgba(255,190,90,0) 70%);mix-blend-mode:screen;opacity:0;transition:opacity .9s .3s;pointer-events:none}
#shop.open .door-light{opacity:1}
#shop .pq-in{position:absolute;left:76.2%;top:52.5%;transform:translate(-50%,-50%);font:900 30px/1 'DlgSerif','Noto Serif SC',serif;color:#f0cf74;text-shadow:0 0 10px rgba(255,210,110,.9);opacity:0;pointer-events:none}
#shop.open .pq-in{animation:heartOut 1.5s ease-out forwards}
@keyframes heartOut{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(30%,-420%) rotate(30deg) scale(1.3)}}
#shop.slam .shop-img.shut{animation:slam .5s ease-out;filter:brightness(.62) saturate(.7)}
@keyframes slam{0%{transform:translateX(0)}20%{transform:translateX(-6px) scaleY(1.02)}50%{transform:translateX(4px)}100%{transform:none}}
#scene.ash .npc.ashy img{filter:sepia(.4) brightness(.92)}

/* ── 2 · 铁门 ── */
.night-sky{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,30,64,.75),rgba(40,40,70,.35) 45%,rgba(60,40,30,0) 75%);mix-blend-mode:multiply;pointer-events:none}
#scene.gate #vignette{background:radial-gradient(ellipse at 55% 45%,rgba(0,0,0,0) 45%,rgba(8,10,22,.65) 100%)}
.crowd img{filter:brightness(.55) saturate(.6)}
.car-lit:after{content:'';position:absolute;right:-30px;top:40%;width:90px;height:40px;background:radial-gradient(ellipse at 0 50%,rgba(255,236,170,.75),rgba(255,236,170,0) 70%)}
.car-lit.flipx:after{right:auto;left:-30px;background:radial-gradient(ellipse at 100% 50%,rgba(255,236,170,.75),rgba(255,236,170,0) 70%)}
#gate .gate-glow{position:absolute;left:-6%;width:84%;bottom:-2%;height:96%;background:radial-gradient(ellipse 85% 75% at 100% 72%,rgba(255,242,195,.98),rgba(255,222,150,.6) 40%,rgba(255,206,120,.18) 68%,rgba(255,200,110,0) 85%);filter:blur(6px);opacity:0;transition:opacity 1.6s,filter 1.2s;pointer-events:none}
#gate.open .gate-glow{opacity:1}
#gate.enter .gate-glow{filter:blur(6px) brightness(1.35)}
#gate .gate-spill{position:absolute;left:-120%;width:220%;bottom:-36px;height:84px;background:radial-gradient(ellipse 60% 50% at 100% 45%,rgba(255,226,150,.6),rgba(255,226,150,0) 75%);opacity:0;transition:opacity 1.6s;pointer-events:none}
#gate.open .gate-spill{opacity:1}
#gate .gate-half{position:absolute;inset:0;overflow:hidden;filter:brightness(.88) var(--cut-shadow)}
#gate .gate-half img{position:absolute;inset:0;width:100%;height:100%;display:block}
#gate .gate-half .leaf{transition:transform 1.8s cubic-bezier(.4,0,.2,1)}
#gate.open .gate-half .leaf{transform:translateX(66%)}
#shop.done .flame-pen{display:none}
/* 门开后：光从画面右边涌进来 */
#gate-light{pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.8s,filter 1.2s}
#gate-light i{position:absolute;inset:0;background:radial-gradient(ellipse 58% 52% at 100% 62%,rgba(255,238,175,.9),rgba(255,206,120,.38) 45%,rgba(255,200,110,0) 78%)}
#gate.open ~ #gate-light{opacity:1}
#gate.enter ~ #gate-light{filter:brightness(1.4)}
#guard img{transition:transform .35s}
#guard.raise img{transform:translateX(18px) rotate(4deg) scale(1.06)}
#guard.bow img{transform:rotate(-8deg) translateY(6px);transform-origin:50% 100%}

/* ── 3 · 台阶与喷泉 ── */
.dusk-sky{position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,50,90,.45),rgba(120,80,60,.15) 50%,rgba(0,0,0,0) 75%);mix-blend-mode:multiply;pointer-events:none}
.greenlight{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#c8ffd8;box-shadow:0 0 12px 6px rgba(80,255,150,.85),0 0 46px 18px rgba(60,220,130,.45);animation:gpulse 3.2s ease-in-out infinite}
.greenlight.big{width:20px;height:20px;margin:-10px 0 0 -10px}
@keyframes gpulse{0%,100%{opacity:.75}50%{opacity:1}}
#gatsby,#daisy,#h-daisy{filter:var(--cut-shadow)}
/* 邀请函 / 旧信：用户提供的旧纸（拼贴纸边），浮在人物手边 */
.invite,.oldletter{opacity:0;transition:opacity .6s}
.invite.on,.oldletter.on{opacity:1}
.invite img,.oldletter img{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter .8s;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.invite img{transform:rotate(-8deg);filter:sepia(.25) saturate(1.25) drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.invite.gold img{filter:sepia(.35) saturate(1.5) brightness(1.08) drop-shadow(0 0 10px rgba(255,214,110,.95)) drop-shadow(0 0 22px rgba(255,200,90,.6))}
.oldletter img{transform:rotate(6deg);filter:sepia(.5) brightness(.92) drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.oldletter.dark img{filter:sepia(.6) grayscale(.45) brightness(.55) drop-shadow(0 3px 3px rgba(0,0,0,.4))}
.oldletter.calm img{filter:brightness(1.1) drop-shadow(0 0 10px rgba(200,225,255,.95)) drop-shadow(0 0 22px rgba(200,225,255,.6))}
.oldletter.gold img{filter:sepia(.3) saturate(1.4) brightness(1.08) drop-shadow(0 0 10px rgba(255,210,100,.95)) drop-shadow(0 0 24px rgba(255,200,90,.6))}
.prop-img img{display:block;width:100%;height:100%}
#gatsby.shake img{animation:headshake .5s ease-in-out 2}
@keyframes headshake{0%,100%{rotate:0deg}25%{rotate:-3deg}75%{rotate:3deg}}

#fountain{position:absolute;width:340px;height:260px;pointer-events:none}
#fountain .f-glow{position:absolute;left:-10%;right:-10%;top:30%;bottom:0;background:radial-gradient(ellipse at 50% 70%,rgba(90,255,160,.6),rgba(90,255,160,0) 65%);mix-blend-mode:screen;transition:filter .8s,opacity .8s;opacity:.9}
#fountain.note .f-glow{opacity:1;filter:brightness(1.5)}
#wineglass img{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter .6s}
#wineglass .w-glass,#wineglass .w-paper{opacity:0}
#wineglass.taken .w-all{opacity:0}
#wineglass.taken .w-glass,#wineglass.taken .w-paper{opacity:1}
#wineglass.note img{filter:drop-shadow(0 0 14px rgba(120,255,170,.85)) drop-shadow(0 0 4px rgba(200,255,220,.9))}

/* ── 4 · 宴会厅 ── */
#scene.hall #vignette{background:radial-gradient(ellipse at 50% 35%,rgba(0,0,0,0) 45%,rgba(10,14,10,.6) 100%)}
.crowd.guests img{filter:brightness(.42) saturate(.4)}
.crowd.laugh img{animation:laugh .25s ease-in-out 6}
@keyframes laugh{50%{translate:0 -5px}}
#host.cough img{animation:headshake .4s ease-in-out 2}
#tom img{transition:transform .4s}
#tom.stand img{transform:translateY(-14px) scale(1.06)}
#scene.dim:after{content:'';position:absolute;inset:0;background:rgba(10,14,12,.55);pointer-events:none;z-index:20;animation:fade .8s}

/* ── 卷轴：拆字 ── */
#slots .zi-row{display:flex;align-items:center;justify-content:center;gap:34px;padding:6px 0}
#slots .zi{position:relative;width:150px;height:150px;background:rgba(255,255,255,.35);border:2px dashed rgba(107,74,34,.45);border-radius:8px}
#slots .zi span{position:absolute;left:0;width:150px;text-align:center;font:900 132px/150px 'DlgSerif','Noto Serif SC',serif;color:#2a1f10;transition:transform .5s,opacity .5s,color .3s}
#slots .zi .zi-in{font-size:62px;line-height:62px;top:66px}
#slots .zi .gone{opacity:.12;transform:translate(40px,-30px) rotate(12deg)}
#slots .zi.nope{animation:tremble .12s linear 4}
#slots .zi-arrow{font:600 22px/1.4 var(--pen-font);color:#6b4a22;max-width:180px;text-align:center}
#slots .zi-arrow:after{content:' →'}
#slots .zi-res{width:150px;height:150px;display:grid;place-items:center;font:900 132px/1 'DlgSerif','Noto Serif SC',serif;color:#7a6a50;background:rgba(255,255,255,.25);border-radius:8px;transition:all .5s}
#slots .zi-res.inked{color:#1b3d70;background:#eef4ff}
#bank.split{gap:26px}
.chip.sel{outline:3px solid #c9a24a;transform:rotate(0) translateY(-4px)}

/* ── 卷轴：填空 ── */
#slots.fill .seg.blank{display:inline-block;min-width:3.2em;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}
#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}}

/* 夜里的庄园门前：装饰压暗一点，和夜色一致 */
.prop.dim{filter:brightness(.8) saturate(.9) var(--cut-shadow)}
#scene.ash .prop.dim{filter:brightness(.8) saturate(.9) var(--cut-shadow)}

/* 邀请函：抬头、正文、落款连成一封信 */
#parch-in[data-kind="swap"] #slots .rule.letter-line .rule-text{font-size:24px;letter-spacing:1px;color:#4a3a24;font-style:italic}
#slots .rule.letter-line.indent{padding-left:2em}
#slots .rule.right{justify-content:flex-end;padding-right:8%;width:100%;box-sizing:border-box;align-self:stretch}
#slots .rule.right .rule-text+.rule-text{margin-left:-6px}

/* 标题字标：本关只用四张纸片，下面换成本关名字的纸条 */
#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))}