/* ═══════════════════════════════════════════════════════════
   第四关 · 瓦尔登湖 —— 在 ../level1/style.css、../level3/style3.css 之上新增的样式
   ═══════════════════════════════════════════════════════════ */
/* 本关没有谜题：不显示词语卷轴按钮 */
#btn-scroll{display:none}
#dlg-name.moss{color:#5f7a62}

/* 湖景长卷：和人物同一层（视差 1），湖面和地面对得上 */
#lakebg{position:absolute;left:0;top:0;z-index:0;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;filter:saturate(.95) contrast(.97)}
#scene.lake #vignette{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 48%,rgba(30,18,6,.45) 100%)}
#scene.lake #grainfx{opacity:.4}
#scene.lake #L-mist{display:none}

/* 梭罗 */
#thoreau{position:absolute;transform-origin:50% 100%;filter:var(--cut-shadow);transition:opacity .6s}
#thoreau img{display:block;width:100%;height:auto}
#thoreau .oarimg{position:absolute;left:-70px;top:30%;width:250px!important;transform:rotate(-34deg);z-index:-1}

/* 小船：三帧叠放，当前帧显示；船底压进水里一点，船尾拖出水纹 */
#boat{position:absolute;transform-origin:50% 90%}
#boat img{position:absolute;left:0;bottom:0;width:100%;height:auto;opacity:0;filter:var(--cut-shadow)}
#boat img.on{opacity:1;position:relative}
#boat .wake{position:absolute;left:-40px;right:30%;bottom:6px;height:14px;border-radius:50%;opacity:0;transition:opacity 1s;
  background:radial-gradient(ellipse at 100% 50%,rgba(255,240,210,.55),rgba(255,240,210,0) 70%)}
#boat.moving .wake{opacity:1;animation:wake 1.4s ease-in-out infinite}
@keyframes wake{50%{transform:scaleX(1.12) translateX(-10px)}}
#player.inboat #player-shadow{display:none}

/* 倒影：虫子的轮廓在水里晃 */
.reflect{position:absolute;width:240px;height:110px;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.reflect.on{opacity:.5}
.reflect.calm.on{opacity:.32}
.reflect i{position:absolute;inset:0;background:url(../level3/assets/bug_walk.png) 0 0/300% 100% no-repeat;transform:scaleY(-.6);transform-origin:50% 0;
  filter:brightness(.25) blur(1.2px);animation:ripple 2.4s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);mask-image:linear-gradient(180deg,#000 30%,transparent 100%)}
@keyframes ripple{0%,100%{transform:scaleY(-.6) skewX(0)}50%{transform:scaleY(-.56) skewX(4deg) translateX(6px)}}

/* 篝火之夜 */
#scene.night #lakebg,#scene.night .prop:not(#campfire){filter:brightness(.42) saturate(.6) hue-rotate(-12deg);transition:filter 1.2s}
#scene.night #player-sprite{filter:brightness(.6)}
#scene #lakebg,#scene .prop{transition:filter 1.2s}
#campfire{position:absolute;width:110px;height:110px;z-index:4;pointer-events:none;opacity:0;transition:opacity 1.2s;margin-left:-55px}
#campfire.on{opacity:1}
#campfire .glow{position:absolute;left:-260px;right:-260px;top:-200px;bottom:-60px;background:radial-gradient(ellipse at 50% 70%,rgba(255,170,70,.42),rgba(255,140,40,0) 62%);mix-blend-mode:screen;animation:glow 1.8s ease-in-out infinite}
#campfire .flame{position:absolute;left:30px;bottom:22px;width:50px;height:74px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 80%,#fff2b0,#ffb43c 45%,#e0561c 75%,rgba(224,86,28,0) 78%);transform-origin:50% 100%;animation:flame .5s ease-in-out infinite alternate}
#campfire .flame.f2{left:46px;width:30px;height:46px;animation-duration:.37s;opacity:.85}
#campfire .logs{position:absolute;left:14px;right:14px;bottom:10px;height:16px;background:#5a3a20;border-radius:8px;box-shadow:0 0 0 2.5px #f5efe0;transform:rotate(-6deg)}
@keyframes flame{0%{transform:scaleY(1) skewX(-3deg)}100%{transform:scaleY(1.14) skewX(4deg)}}
@keyframes glow{50%{opacity:.75}}
.visitor{opacity:0;transition:opacity 1.4s ease}
.visitor.on{opacity:.95}

/* 醒来：黑暗慢慢掀开 */
#wake{position:absolute;inset:0;z-index:30;background:#070806;pointer-events:none;opacity:0}
#wake.on{opacity:1}
#wake.lift{opacity:0;transition:opacity 1.6s ease}

/* 湖面光缝 */
#lightcrack{position:absolute;width:0;height:0;z-index:3;pointer-events:none}
#lightcrack i{position:absolute;left:-700px;top:-6px;width:1400px;height:12px;border-radius:50%;
  background:linear-gradient(90deg,rgba(255,236,190,0),#fff6dc 30%,#ffffff 50%,#fff6dc 70%,rgba(255,236,190,0));
  box-shadow:0 0 30px 12px rgba(255,214,140,.65),0 0 120px 40px rgba(255,190,110,.35);transform:scaleX(0);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
#lightcrack.on i{transform:scaleX(1)}

/* 自由书写：卷轴纸（与通关页同一张纸） */
#write{position:absolute;inset:0;z-index:33;background:rgba(14,16,10,.55);display:grid;place-items:center;opacity:0;transition:opacity .6s}
#write.on{opacity:1}
#write.out{opacity:0}
#write-page{position:relative;width:1300px;height:686px;transform:rotate(-.6deg);background:url(../level1/assets/scroll_paper.webp) center/100% 100% no-repeat;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));text-align:center}
#write-page .sc-eyebrow{position:absolute;top:96px;left:0;right:0}
#write-page h2{position:absolute;top:120px;left:0;right:0;margin:0;font:400 38px/1.2 'DlgSerif','ZCOOL XiaoWei','Noto Serif SC',serif;letter-spacing:8px;color:var(--ink)}
#write-prompt{position:absolute;top:212px;left:190px;right:190px;margin:0;font:21px/1.8 'DlgSerif',var(--pen-font);color:#4f6a52}
#write-line{position:absolute;top:300px;left:230px;right:230px;display:flex;align-items:flex-end;gap:10px;padding-bottom:6px;
  border-bottom:2px solid rgba(90,74,52,.45)}
#write-lead{font:600 38px/1.2 'DlgSerif',var(--pen-font);color:var(--ink);white-space:nowrap}
#write-input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:600 38px/1.2 'DlgSerif',var(--pen-font);color:#a5582f;caret-color:#5f7a62;
  transition:color .6s,filter 1s,opacity 1s}
#write-input::placeholder{color:rgba(90,74,52,.3)}
#write-idle{position:absolute;top:396px;left:0;right:0;margin:0;font:19px/1.6 'DlgSerif',var(--pen-font);color:#5f7a62;opacity:0;transition:opacity 2s}
#write-idle.on{opacity:.85}
#write-btns{position:absolute;left:0;right:0;top:470px;display:flex;justify-content:center;gap:28px}
#write-btns .lbl{min-width:0;height:58px;font-size:20px;letter-spacing:3px;padding:0 30px;white-space:nowrap}
#write.inked #write-input{filter:drop-shadow(0 0 10px rgba(255,190,110,.75))}
#write.faded #write-input{opacity:.35;filter:blur(.6px)}
#clear-text .grey{color:#8b8b86}

/* 拿到「苔痕」：右上角的笔亮一下 */
.pen.got{animation:got 1.2s ease-out 2}
@keyframes got{0%{box-shadow:0 0 0 0 rgba(200,230,215,.9)}100%{box-shadow:0 0 0 18px rgba(200,230,215,0)}}