/* =========================================================
   逼翰大戰爭 v8.8 地圖彩蛋與祕境（js/mapegg.js）
   =========================================================
   點地圖的反應（搖樹、花瓣、漣漪、飛鳥…）、祕境謎題（大石頭／X 標記／水晶＋石碑）、祕境入口節點、
   湖中女神、每日金蘋果、夥伴的對話框。載在 summon.css 之後（最後一層）。 */

/* ---- 裝飾層：點得到（ui.js 把裝飾物畫在 .stx-deco 這張，跟地面分開）---- */
#scr-stage .stx-deco{cursor:pointer}
.mx-lift{position:absolute;z-index:1;pointer-events:none;image-rendering:pixelated}
.mx-lift.mx-shake{animation:mx-shake .48s ease-out}
@keyframes mx-shake{15%{transform:rotate(-7deg) scale(1.06)}35%{transform:rotate(6deg) scale(1.06)}55%{transform:rotate(-4deg) scale(1.04)}75%{transform:rotate(2deg) scale(1.02)}}
.mx-lift.mx-pop{animation:mx-pop .36s cubic-bezier(.2,1.8,.4,1)}
@keyframes mx-pop{40%{transform:scale(1.35,1.2)}}
.mx-lift.mx-knock{animation:mx-knock .3s ease-out}
@keyframes mx-knock{30%{transform:translateY(-3px) scale(1.06,1.06)}60%{transform:translateY(0) scale(1.1,.9)}}
.mx-lift.mx-boing{animation:mx-boing .52s cubic-bezier(.3,1.6,.4,1)}
@keyframes mx-boing{20%{transform:scale(1.25,.72)}50%{transform:scale(.85,1.3) translateY(-8px)}75%{transform:scale(1.08,.94)}}
.mx-lift.mx-glow{animation:mx-glow .6s ease-out}
@keyframes mx-glow{25%{transform:scale(1.12);filter:brightness(2) drop-shadow(0 0 6px #e2a0ff)}}

/* ---- 粒子、飄字、漣漪 ---- */
.mx-p{position:absolute;z-index:5;width:4px;height:4px;margin:-2px 0 0 -2px;pointer-events:none;box-shadow:0 0 0 1px #0004;
  animation:mx-p var(--t,.6s) cubic-bezier(.2,.7,.4,1) forwards}
@keyframes mx-p{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.mx-p.fall{animation:mx-pfall var(--t,.6s) ease-in forwards;animation-duration:calc(var(--t,.6s) + .4s)}
@keyframes mx-pfall{0%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.mx-float{position:absolute;z-index:6;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:none;
  font-size:13px;font-weight:900;letter-spacing:1px;color:#fff;
  filter:drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000);
  animation:mx-float 1.5s ease-out forwards}
@keyframes mx-float{0%{opacity:0;margin-top:6px}12%{opacity:1;margin-top:0}75%{opacity:1}100%{opacity:0;margin-top:-22px}}
.mx-float.ouch{color:#ff8a7a;font-size:14px}
.mx-float.taunt{color:#ffb4a8;font-size:12px}
.mx-float.bub{color:#e8f4ff;font-size:12px}
.mx-float.reward{display:flex;gap:8px;font-size:17px;color:#ffe27a}
.mx-float.reward span{display:flex;align-items:center;gap:2px}
.mx-float .pxi{width:20px;height:20px}
.mx-ring{position:absolute;z-index:1;width:10px;height:5px;margin:-3px 0 0 -5px;pointer-events:none;border:2px solid #d8eeff;border-radius:50%;
  animation:mx-ring .75s ease-out forwards}
.mx-ring.lava{border-color:#ffe27a}
@keyframes mx-ring{to{transform:scale(5.5);opacity:0}}
.mx-bird{position:absolute;z-index:5;pointer-events:none;image-rendering:pixelated;animation:mx-bird 1.6s ease-in forwards}
@keyframes mx-bird{0%{transform:translate(-50%,-50%)}100%{transform:translate(calc(-50% + var(--bx)),-160px) scale(.7);opacity:0}}

/* ---- 每日金蘋果：那棵樹上一閃一閃的星星；搖下來的蘋果 ---- */
.mx-glint{position:absolute;z-index:2;width:12px;height:12px;margin:-6px 0 0 -6px;pointer-events:none;animation:mx-glint 2.4s ease-in-out infinite}
.mx-glint::before,.mx-glint::after{content:"";position:absolute;left:50%;top:50%;background:#fff6c2;box-shadow:0 0 4px #ffe27a}
.mx-glint::before{width:2px;height:12px;margin:-6px 0 0 -1px}
.mx-glint::after{width:12px;height:2px;margin:-1px 0 0 -6px}
@keyframes mx-glint{0%,55%,100%{transform:scale(0) rotate(0);opacity:0}70%{transform:scale(1.1) rotate(45deg);opacity:1}85%{transform:scale(.6) rotate(90deg);opacity:.8}}
.mx-apple{position:absolute;z-index:4;margin-left:-8px;pointer-events:none;image-rendering:pixelated;
  animation:mx-apple 1.7s cubic-bezier(.5,0,.6,1) forwards}
@keyframes mx-apple{0%{transform:translateY(-16px)}30%{transform:translateY(var(--fall))}40%{transform:translateY(calc(var(--fall) - 8px))}
  50%{transform:translateY(var(--fall))}80%{transform:translateY(var(--fall));opacity:1;filter:brightness(1.6)}100%{transform:translateY(calc(var(--fall) - 20px));opacity:0}}

/* ---- 夥伴：點得到、戳一下跳一下、轉圈圈、瞬移；頭上的對話框 ---- */
.stx-walker .stw-body{pointer-events:auto;cursor:pointer}
.stx-walker.idle .stw-body canvas.mx-hop,.stw-body canvas.mx-hop{animation:mx-hop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes mx-hop{35%{transform:translateY(-16px) scale(.92,1.1)}70%{transform:translateY(0) scale(1.12,.88)}}
.stx-walker.idle .stw-body canvas.mx-dizzy,.stw-body canvas.mx-dizzy{animation:mx-dizzy 1.6s ease-in-out}
@keyframes mx-dizzy{0%{transform:none}60%{transform:rotate(1080deg) translateY(-6px)}75%{transform:rotate(1090deg)}85%{transform:rotate(1070deg)}100%{transform:rotate(1080deg)}}
.stx-walker .stw-body{transition:opacity .15s}
.stx-walker.warp .stw-body canvas{animation:mx-warp .18s ease-in forwards}
@keyframes mx-warp{to{transform:scale(.1,1.6);opacity:0;filter:brightness(3)}}
.mx-say{position:absolute;z-index:6;transform:translate(-50%,-100%);max-width:200px;padding:4px 9px;pointer-events:none;
  font-size:12px;font-weight:900;line-height:1.4;color:#3d2308;background:#fffdf5;border:2px solid #000;box-shadow:0 3px 0 #0007;
  animation:mx-say 2.4s ease-out forwards}
.mx-say::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-5px;border:5px solid #0000;border-top-color:#000;border-bottom:0}
@keyframes mx-say{0%{opacity:0;margin-top:6px}8%{opacity:1;margin-top:0}85%{opacity:1}100%{opacity:0}}

/* ---- 祕境的謎題物件（左上角＝腳底中間）---- */
.mx-obj{position:absolute;z-index:2;transform:translate(-50%,-100%);padding:0;border:0;background:none;cursor:pointer;line-height:0;
  image-rendering:pixelated;filter:drop-shadow(0 3px 0 #0008)}
.mx-obj canvas{display:block}
button.mx-obj:hover{filter:drop-shadow(0 3px 0 #0008) brightness(1.1)}
.mx-obj::after{content:"";position:absolute;left:10%;right:10%;bottom:-3px;height:6px;border-radius:50%;background:#0005;z-index:-1}
.mx-boulder{animation:mx-wobble 5s ease-in-out infinite}
@keyframes mx-wobble{0%,88%,100%{transform:translate(-50%,-100%)}91%{transform:translate(-52%,-100%) rotate(-2deg)}94%{transform:translate(-48%,-100%) rotate(2deg)}}
.mx-obj.knock{animation:mx-objknock .25s ease-out}
@keyframes mx-objknock{30%{transform:translate(-53%,-102%) rotate(-3deg)}65%{transform:translate(-47%,-100%) rotate(2deg)}}
.mx-obj.boom{animation:mx-objboom .38s ease-in forwards}
@keyframes mx-objboom{40%{transform:translate(-50%,-100%) scale(1.2);filter:brightness(2.5)}100%{transform:translate(-50%,-100%) scale(1.6);opacity:0;filter:brightness(4)}}
.mx-dig.chestup{animation:mx-chest .65s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes mx-chest{0%{transform:translate(-50%,-60%) scale(.6)}60%{transform:translate(-50%,-130%) scale(1.1)}100%{transform:translate(-50%,-100%)}}
.mx-dig.chestup.boom{animation:mx-objboom .38s ease-in forwards}
/* 第 3 章：水晶（敲了會亮、答錯變紅抖一下、答對一起共鳴）與石碑 */
.mx-crys{transition:filter .2s}
.mx-crys.lit{filter:drop-shadow(0 3px 0 #0008) drop-shadow(0 0 6px var(--cc)) drop-shadow(0 0 12px var(--cc)) brightness(1.15)}
.mx-crys.ping{animation:mx-crysping .4s ease-out}
@keyframes mx-crysping{30%{transform:translate(-50%,-104%) scale(1.12)}}
.mx-crys.wrong{animation:mx-cryswrong .45s ease-out}
@keyframes mx-cryswrong{0%{filter:drop-shadow(0 0 8px #ff3a3a) brightness(.6)}25%{transform:translate(-54%,-100%)}50%{transform:translate(-46%,-100%)}75%{transform:translate(-52%,-100%)}}
.mx-crys.res{animation:mx-crysres .9s ease-in-out infinite alternate}
@keyframes mx-crysres{to{transform:translate(-50%,-106%);filter:drop-shadow(0 0 10px var(--cc)) drop-shadow(0 0 20px var(--cc)) brightness(1.4)}}
.mx-tablet{cursor:help}

/* ---- 祕境入口（.stn 節點的變體）---- */
.stn.secret .stn-frame{position:relative;overflow:hidden;border-color:#1a0a33;
  box-shadow:inset 0 0 0 2px #b98cff,0 4px 0 #0000009a,0 0 16px 2px #8a4ad6aa;animation:stn-secret 2.2s ease-in-out infinite}
@keyframes stn-secret{50%{box-shadow:inset 0 0 0 2px #e6d0ff,0 4px 0 #0000009a,0 0 26px 6px #b98cffcc}}
.stn.secret.cleared .stn-frame{box-shadow:inset 0 0 0 2px #ffd75e,0 4px 0 #0000009a,0 0 16px 2px #b98cff88;animation:none}
.stn-vortex{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:repeating-conic-gradient(#b98cff66 0 10deg,#0000 10deg 30deg);border-radius:50%;animation:stn-vortex 4s linear infinite}
.stn.secret.cleared .stn-vortex{opacity:.25}
@keyframes stn-vortex{to{transform:rotate(360deg)}}
.stn.secret .stn-name{color:#fff;background:linear-gradient(#8a4ad6,#3a1266);text-shadow:0 1px 0 #000}
.stn-q{position:absolute;right:-10px;top:-12px;width:22px;height:22px;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:900;line-height:1;
  color:#fff;background:linear-gradient(#c8a0ff,#6a2aa8);border:2px solid #000;box-shadow:0 2px 0 #000a;animation:stn-next 1.1s ease-in-out infinite}
.stn.secret.fresh{animation:stn-fresh .8s cubic-bezier(.2,1.5,.4,1) both}
@keyframes stn-fresh{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-200deg);filter:brightness(4)}100%{transform:translate(-50%,-50%);filter:none}}

/* ---- 右側面板：祕境模式 ---- */
.stp-head.secret{background:linear-gradient(#6a2aa8,#2a0f5a)}
.stp-no em.sec{background:#8a4ad6}
.stp-treasure{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:1px 4px;min-height:17px;margin-top:1px;padding:2px 6px 2px 3px;overflow:hidden;line-height:1.15;
  background:linear-gradient(90deg,#fff3c4,#ffd75e);border:2px solid #000;box-shadow:0 2px 0 #0004}
.stp-treasure::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,#fff0,#ffffffb0,#fff0);animation:cs-roll-shine 2.6s ease-in-out infinite}
.stp-treasure .pxi{width:14px;height:14px}
.stp-treasure span{font-size:10.5px;font-weight:900;letter-spacing:1px;color:#8a4ad6}
.stp-treasure span,.stp-treasure b,.stp-treasure em{white-space:nowrap}   /* v9.10 面板窄：寶藏文字太長時整段換到下一行，不要每個字被折斷又被裁掉 */
.stp-treasure b{font-size:12px;font-weight:900;color:#7a3a06}
.stp-treasure em{margin-left:auto;font-style:normal;font-size:10px;font-weight:900;color:#b4530a}
.stp-treasure.got{filter:grayscale(.7);opacity:.75}
.stp-treasure.got em{color:#1f7a3a}
.stp-treasure.got::after{display:none}

/* ---- 湖中女神 ---- */
.mx-goddess{position:absolute;z-index:7;width:0;height:0}
.mx-goddess canvas{position:absolute;left:-24px;top:-58px;image-rendering:pixelated;animation:mxg-rise 1.2s cubic-bezier(.2,.9,.3,1) both;
  filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #bfe0ff)}
@keyframes mxg-rise{from{transform:translateY(40px);clip-path:inset(0 0 100% 0);opacity:0}to{transform:none;clip-path:inset(0 0 0 0);opacity:1}}
.mxg-halo{position:absolute;left:-40px;top:-80px;width:80px;height:80px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#fffbe6,#ffe27a66 45%,#fff0);animation:mxg-halo 2s ease-in-out infinite alternate}
@keyframes mxg-halo{to{transform:scale(1.15);opacity:.7}}
.mxg-ripple{position:absolute;left:-30px;top:-8px;width:60px;height:16px;border:2px solid #d8eeff;border-radius:50%;animation:mxg-ripple 1.4s ease-out infinite}
@keyframes mxg-ripple{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
.mx-goddess.lava canvas{filter:drop-shadow(0 0 8px #ffe27a) drop-shadow(0 0 16px #ff5a2a) hue-rotate(160deg) saturate(1.4)}
.mx-goddess.lava .mxg-halo{background:radial-gradient(closest-side,#fff0c0,#ff8a2a77 45%,#fff0)}
.mx-goddess.lava .mxg-ripple{border-color:#ffe27a}
.mxg-say{position:absolute;left:-130px;bottom:66px;width:260px;padding:7px 10px 8px;color:#3d2308;background:#fffdf5;border:3px solid #000;
  box-shadow:0 4px 0 #0008,0 0 0 2px #fff inset;animation:sm-btn-in .4s ease-out .5s both}
.mxg-say b{display:block;font-size:12px;letter-spacing:2px;color:#6a2aa8}
.mxg-say p{margin:3px 0 0;font-size:12.5px;font-weight:800;line-height:1.5}
.mxg-say p b{display:inline;font-size:12.5px;letter-spacing:0;color:#b4530a}
.mx-goddess.below .mxg-say{bottom:auto;top:18px}
.mxg-btns{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.mxg-btns button{padding:4px 8px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:900;text-align:left;color:#1c1c1c;
  background:linear-gradient(#e2e2e2,#bdbdbd);border:2px solid #000;box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #7a7a7a}
.mxg-btns button:hover{background:linear-gradient(#fff3c4,#ffd75e)}
.mx-goddess.angry canvas{animation:mxg-angry .4s ease-in-out 3;filter:drop-shadow(0 0 8px #ff3a3a) sepia(1) hue-rotate(-40deg) saturate(3)}
@keyframes mxg-angry{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.mx-goddess.out{animation:mxg-out .6s ease-in forwards}
@keyframes mxg-out{to{opacity:0;transform:translateY(24px)}}

/* ---- 結算：祕境寶藏那一格 ---- */
.rw.tr{background:linear-gradient(#f6ecff,#dcc2ff)}
.rw.tr span{white-space:nowrap;color:#5a2a8a}
.rw.tr b{color:#6a2aa8}
.rw.tr em{background:#8a4ad6;white-space:nowrap;max-width:none}

/* =========================================================
   v8.9 更多彩蛋：小動物、雲、夜晚、路牌、UFO、偷看的人、季節（mapegg.js 的 mxAmbient）
   ========================================================= */
.mx-critter{position:absolute;left:0;top:0;z-index:1;width:0;height:0;cursor:pointer}
.mx-critter::before{content:"";position:absolute;left:-9px;top:-3px;width:18px;height:5px;border-radius:50%;background:#0004;pointer-events:none}
.mx-critter canvas{position:absolute;left:-12px;top:-22px;image-rendering:pixelated;transform:scaleX(var(--face,1));filter:drop-shadow(0 2px 0 #0005)}
.mx-critter.gec canvas{top:-12px}
.mx-critter .fb{visibility:hidden}
.mx-critter.walk .fa{animation:mx-walkA .36s steps(1) infinite}
.mx-critter.walk .fb{animation:mx-walkB .36s steps(1) infinite}
@keyframes mx-walkA{0%{visibility:visible}50%{visibility:hidden}}
@keyframes mx-walkB{0%{visibility:hidden}50%{visibility:visible}}
.mx-critter.flap canvas{animation:mx-flap .45s ease-out}
@keyframes mx-flap{30%{translate:0 -12px}60%{translate:0 -4px}}
.mx-critter.burrow canvas{animation:mx-burrow .4s ease-in forwards}
@keyframes mx-burrow{to{translate:0 8px;scale:1 .2;opacity:0}}
.mx-critter.burrow::before{opacity:0}
.mx-critter.popup canvas{animation:mx-popup .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes mx-popup{from{translate:0 8px;scale:1 .2;opacity:0}}
.mx-critter.wisp::before{display:none}
.mx-critter.wisp i{position:absolute;left:-9px;top:-34px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fff 0 18%,#e2a0ff 40%,#9a4ae0aa 60%,#9a4ae000 72%);box-shadow:0 0 14px #c070ff,0 0 28px #9a4ae088;
  animation:mx-wisp 1.6s ease-in-out infinite}
.mx-critter.wisp i::after{content:"";position:absolute;left:6px;top:13px;width:6px;height:16px;border-radius:50%;background:linear-gradient(#e2a0ff99,#fff0)}
@keyframes mx-wisp{50%{transform:translateY(-7px) scale(1.08)}}
.mx-critter.caught{pointer-events:none}
.mx-critter.caught i{animation:mx-caught .4s ease-in forwards}
@keyframes mx-caught{to{transform:scale(2.4);opacity:0}}
.mx-egg{position:absolute;z-index:1;margin:-15px 0 0 -7px;cursor:pointer;image-rendering:pixelated;animation:mx-eggin .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes mx-eggin{from{translate:0 -14px;opacity:0}}
.mx-egg.gold{filter:drop-shadow(0 0 5px #ffe27a) drop-shadow(0 0 10px #ffc53d)}
.mx-egg.crack{animation:mx-crack .45s ease-in forwards;pointer-events:none}
@keyframes mx-crack{30%{scale:1.3}100%{scale:.4;opacity:0}}
.mx-egg.fade{transition:opacity .6s;opacity:0}
/* 雲（在節點下面：雲飄到節點上時點得到節點） */
.mx-cloud{position:absolute;left:0;top:0;z-index:1;cursor:pointer;image-rendering:pixelated;opacity:.9;filter:drop-shadow(0 3px 0 #0002)}
.mx-cloud.storm{filter:brightness(.72) drop-shadow(0 3px 0 #0002);animation:mx-cloudshake .2s linear 6}
@keyframes mx-cloudshake{50%{translate:2px 0}}
.mx-cloudsh{position:absolute;left:0;top:0;z-index:0;width:80px;height:16px;border-radius:50%;background:#0000001c;pointer-events:none}
.mx-rain{position:absolute;z-index:3;width:2px;height:10px;pointer-events:none;background:linear-gradient(#a9d6ff00,#a9d6ffee);animation:mx-rain .65s linear forwards}
@keyframes mx-rain{to{transform:translateY(var(--fall));opacity:.2}}
.mx-p.gust{width:6px;height:2px;animation-duration:.9s}
.mx-bolt{position:absolute;z-index:4;width:30px;margin-left:-15px;pointer-events:none;
  background:linear-gradient(#fff,#e2a0ff);clip-path:polygon(45% 0,70% 0,52% 38%,78% 38%,32% 100%,44% 55%,20% 55%);
  box-shadow:0 0 18px #c070ff;animation:mx-bolt .5s steps(2) forwards}
@keyframes mx-bolt{0%{opacity:1}40%{opacity:.3}60%{opacity:1}100%{opacity:0}}
.mx-flashmap{position:absolute;left:0;top:0;bottom:0;right:300px;z-index:5;pointer-events:none;background:#e8d0ff;animation:mx-flashmap .4s ease-out forwards}
@keyframes mx-flashmap{from{opacity:.5}to{opacity:0}}
/* 夜晚（真實時間 18:00～6:00）：地圖變暗、螢火蟲、流星 */
#stage-map-wrap.mx-night .stage-map::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#12124a;opacity:.42;mix-blend-mode:multiply}
#stage-map-wrap.mx-night.mx-dark .stage-map::after{opacity:.22}
.mx-fly{position:absolute;z-index:3;width:4px;height:4px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c),0 0 14px var(--c);pointer-events:none;
  animation:mx-fly var(--t) ease-in-out var(--d) infinite alternate}
@keyframes mx-fly{0%{opacity:.15}50%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:.25}}
.mx-star{position:absolute;z-index:4;width:130px;height:56px;margin:-10px 0 0 -110px;cursor:pointer;animation:mx-starmv 2.6s linear forwards}
.mx-star i{position:absolute;right:6px;top:20px;width:110px;height:3px;border-radius:2px;transform:rotate(20deg);transform-origin:100% 50%;
  background:linear-gradient(90deg,#fff0,#bfe8ff 70%,#fff);box-shadow:0 0 8px #bfe8ff}
.mx-star i::after{content:"";position:absolute;right:-4px;top:-3px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 20px #8fdcff}
@keyframes mx-starmv{0%{transform:translate(0,0);opacity:0}8%{opacity:1}85%{opacity:1}100%{transform:translate(230px,84px);opacity:0}}
.mx-star.wish{animation-play-state:paused;filter:brightness(1.8) drop-shadow(0 0 10px #fff)}
/* 路牌 */
.mx-signbtn{z-index:1}
.mx-float.sign{padding:3px 9px;font-size:12px;letter-spacing:1px;color:#fff6dd;filter:none;background:#3a2206e8;border:2px solid #000;box-shadow:0 3px 0 #0007}
/* UFO */
.mx-ufowrap{position:absolute;left:0;top:0;z-index:5;cursor:pointer}
.mx-ufo{display:block;image-rendering:pixelated;filter:drop-shadow(0 0 6px #8fdcff)}
.mx-beam{position:absolute;left:12px;top:22px;width:30px;pointer-events:none;transform-origin:50% 0;
  background:linear-gradient(#e6f7ffd0,#8fdcff30);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);animation:mx-beam .3s ease-out}
@keyframes mx-beam{from{opacity:0;transform:scaleY(.1)}}
.mx-lift.mx-abduct{animation:mx-abduct 1.5s ease-in forwards}
@keyframes mx-abduct{0%{transform:none}25%{transform:translateY(-8px) rotate(-6deg)}100%{transform:translateY(calc(var(--up) * -1)) scale(.15) rotate(24deg);opacity:0}}
/* 偷看的人：從樹後面探出頭，一下又縮回去 */
.mx-peek{position:absolute;z-index:1;width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border:0;background:none;cursor:pointer;
  animation:mx-peek 6.5s ease-in-out var(--d) infinite}
.mx-peek canvas{display:block;border-radius:50%;box-shadow:0 0 0 2px #000,0 0 0 3px #ffffff66}
@keyframes mx-peek{0%,66%,100%{transform:translateX(-12px) scale(.35);opacity:0}74%,90%{transform:none;opacity:1}}
.mx-peek.found{animation:none;transform:translateY(-18px) scale(1.5);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
/* 季節 */
.mx-snow{position:absolute;left:0;top:0;bottom:0;right:300px;z-index:3;pointer-events:none;overflow:hidden}
.mx-snow i{position:absolute;top:-10px;width:4px;height:4px;background:#fff;box-shadow:0 0 3px #fff;animation:mx-snow var(--t) linear var(--d) infinite}
@keyframes mx-snow{to{transform:translate(var(--dx),490px)}}
.mx-pumpkinbtn.lit{filter:drop-shadow(0 3px 0 #0008) drop-shadow(0 0 8px #ffb02e) brightness(1.25)}

/* ---------- v9.10 第 4 章的地圖互動（mapegg.js 的 mxDecoHit4／mxSpring／mxParachute） ---------- */
.mx-lift.mx-sway{animation:mx-sway .64s ease-in-out}
@keyframes mx-sway{20%{transform:rotate(-5deg) skewX(4deg)}50%{transform:rotate(4deg) skewX(-3deg)}80%{transform:rotate(-2deg)}}
.mx-lift.mx-glow4{animation:mx-glow4 .6s ease-out}
@keyframes mx-glow4{25%{transform:scale(1.14) translateY(-2px);filter:brightness(1.8) drop-shadow(0 0 8px #ff7fc8)}}
.mx-p.swirl{border-radius:60% 0 60% 0;animation:mx-swirl var(--t,.6s) ease-out forwards;animation-duration:calc(var(--t,.6s) + .8s)}
@keyframes mx-swirl{0%{opacity:1}40%{transform:translate(calc(var(--dx) * -.8),calc(var(--dy) * .45)) rotate(calc(var(--r) * .5))}
  100%{transform:translate(calc(var(--dx) * 1.3),calc(var(--dy) * 2.2)) rotate(var(--r));opacity:0}}
.mx-heart{position:absolute;z-index:6;margin:-6px 0 0 -7px;pointer-events:none;image-rendering:pixelated;animation:mx-heart 1.3s ease-out forwards;
  filter:drop-shadow(0 0 4px #ff7fc8)}
@keyframes mx-heart{0%{transform:scale(.3);opacity:0}15%{transform:scale(1.2);opacity:1}100%{transform:translate(var(--hx,0),-58px) scale(.9);opacity:0}}
.mx-float.love{color:#ff9ad0;font-size:13px}
.mx-float.letter{color:#fff0f7;font-size:12px;padding:4px 8px;background:#5a1a3acc;border:2px solid #ff9ad0;border-radius:6px;white-space:normal;width:180px;text-align:center;animation-duration:3.2s}
.mx-letterbtn{position:absolute;z-index:5;padding:0;background:none;border:0;cursor:pointer;transform:translate(-50%,-100%);animation:mx-letter 1.4s ease-out}
.mx-letterbtn canvas{display:block;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #0006)}
.mx-letterbtn:hover{filter:brightness(1.2) drop-shadow(0 0 6px #ff9ad0)}
.mx-letterbtn.read{animation:mx-objboom .4s ease-out forwards}
.mx-letterbtn.fade{transition:opacity .6s;opacity:0}
@keyframes mx-letter{0%{transform:translate(-50%,-260%) rotate(-25deg)}35%{transform:translate(-30%,-170%) rotate(18deg)}70%{transform:translate(-62%,-120%) rotate(-10deg)}100%{transform:translate(-50%,-100%)}}
.mx-onsen{position:absolute;z-index:5;margin-left:-9px;pointer-events:none;image-rendering:pixelated;animation:mx-onsen 1.4s ease-out forwards}
@keyframes mx-onsen{0%{transform:translateY(0) scale(.4)}25%{transform:translateY(-26px) scale(1.1)}45%{transform:translateY(-6px)}60%{transform:translateY(-12px)}75%{transform:translateY(-6px);opacity:1}100%{transform:translateY(-6px);opacity:0}}
.mx-fly4{position:absolute;z-index:6;margin:-5px 0 0 -7px;pointer-events:none;image-rendering:pixelated;animation:mx-fly4 2.1s ease-in-out forwards}
@keyframes mx-fly4{0%{transform:scale(.6)}20%{transform:translate(calc(var(--bx) * .2),-30px) scaleX(.4)}40%{transform:translate(calc(var(--bx) * .45),-50px) scaleX(1)}
  60%{transform:translate(calc(var(--bx) * .65),-80px) scaleX(.4)}80%{transform:translate(calc(var(--bx) * .85),-100px) scaleX(1)}100%{transform:translate(var(--bx),-130px) scaleX(.4);opacity:0}}
.mx-steam{position:absolute;z-index:4;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#ffffffd0,#ffffff00 70%);animation:mx-steam 1.5s ease-out forwards}
@keyframes mx-steam{0%{transform:scale(.4);opacity:0}20%{opacity:.95}100%{transform:translate(var(--sx,0),-70px) scale(2.6);opacity:0}}
.mx-monkey{position:absolute;z-index:5;margin:-14px 0 0 -15px;pointer-events:none;image-rendering:pixelated;animation:mx-monkey .45s cubic-bezier(.3,1.6,.5,1)}
.mx-monkey.down{animation:mx-monkeydown .45s ease-in forwards}
@keyframes mx-monkey{from{transform:translateY(14px) scaleY(.2);opacity:0}}
@keyframes mx-monkeydown{to{transform:translateY(14px) scaleY(.2);opacity:0}}
.mx-critter.pig canvas{top:-18px;left:-14px}
.mx-para{position:absolute;left:0;top:0;z-index:6;width:0;height:0;padding:0;background:none;border:0;cursor:pointer}
.mx-para .mx-chute{position:absolute;left:-21px;top:-64px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #0005)}
.mx-para .mx-crate{position:absolute;left:-15px;top:-24px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #0006)}
.mx-para::after{content:"";position:absolute;left:-30px;top:-70px;width:60px;height:74px}
.mx-para:hover .mx-crate{filter:brightness(1.25) drop-shadow(0 0 6px #ffe27a)}
.mx-para.landed .mx-chute{transition:transform .5s,opacity .5s;transform:translateY(22px) scaleY(.35);opacity:.65}
.mx-para.open .mx-crate{animation:mx-objboom .55s ease-out forwards}
.mx-para.open .mx-chute{transition:transform .6s,opacity .6s;transform:translateY(-40px);opacity:0}
.mx-para.broke{transition:opacity .4s;opacity:0}

/* ---------- v9.12 第 5 章的地圖互動（mapegg.js 的 mxDecoHit5／mxMoonLake／mxLanternScene） ---------- */
.mx-lift.mx-creak{animation:mx-creak .52s ease-out}
@keyframes mx-creak{20%{transform:skewX(-3deg) scaleY(.97)}45%{transform:skewX(2deg)}70%{transform:skewX(-1deg)}}
.mx-lift.mx-spin{animation:mx-spin .7s ease-in-out}
@keyframes mx-spin{50%{transform:scaleX(-1) translateY(-3px)}100%{transform:scaleX(1)}}
.mx-lift.mx-bloom{animation:mx-bloom .7s ease-out}
@keyframes mx-bloom{30%{transform:scale(1.4);filter:brightness(1.6) drop-shadow(0 0 6px #fff6c2)}}
.mx-p.rise{border-radius:50%;box-shadow:0 0 4px #fff;animation:mx-prise var(--t,1.4s) ease-out forwards}
@keyframes mx-prise{0%{opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.mx-ring.moon{border-color:#e8f0ff;box-shadow:0 0 6px #cfe6ff}
.mx-float.whisper{color:#cfd6ff;font-size:12px;font-style:italic;letter-spacing:1px}
.mx-float.carve{color:#e8c890;font-size:12px;font-weight:900;padding:2px 6px;background:#3a2a20d0;border:2px solid #5a463a;animation-duration:2.6s}
.mx-eyes{position:absolute;z-index:4;width:2px;height:2px;margin:-1px 0 0 -3px;pointer-events:none;background:#ffe27a;
  box-shadow:4px 0 0 #ffe27a,0 0 4px #ffe27a,4px 0 4px #ffe27a;animation:mx-eyes 2.4s steps(1) forwards}
@keyframes mx-eyes{0%{opacity:0}10%{opacity:1}40%{opacity:0}46%{opacity:1}90%{opacity:1}100%{opacity:0}}
.mx-frog{position:absolute;z-index:6;margin:-12px 0 0 -8px;pointer-events:none;image-rendering:pixelated;animation:mx-frog 1.25s ease-out forwards}
@keyframes mx-frog{0%{transform:scale(.5);opacity:0}10%{transform:none;opacity:1}45%{transform:translate(calc(var(--bx) * .5),-34px)}
  75%{transform:translate(var(--bx),0) scaleY(.8)}85%{transform:translate(var(--bx),0)}100%{transform:translate(var(--bx),0);opacity:0}}
.mx-koi{position:absolute;z-index:6;margin:-8px 0 0 -15px;pointer-events:none;image-rendering:pixelated;animation:mx-koi .9s ease-in-out forwards}
@keyframes mx-koi{0%{transform:translate(0,6px) rotate(-60deg);opacity:0}15%{opacity:1}50%{transform:translate(calc(var(--bx) * .5),-34px) rotate(0)}
  100%{transform:translate(var(--bx),6px) rotate(60deg);opacity:0}}
.mx-critter.cat canvas{top:-18px}
.mx-critter.sit canvas{animation:mx-catsit 2.2s ease-out}
@keyframes mx-catsit{10%{translate:0 2px;scale:1 .86}25%,85%{translate:0 0;scale:1 1}}
.mx-moonbeam{position:absolute;z-index:3;width:44px;margin-left:-22px;pointer-events:none;background:linear-gradient(#ffffff00,#e8f0ffb0 30%,#cfe6ff60);
  filter:blur(2px);animation:mx-moonbeam 2.2s ease-out forwards}
@keyframes mx-moonbeam{0%{opacity:0;transform:scaleX(.3)}20%{opacity:1;transform:none}70%{opacity:.85}100%{opacity:0}}
/* 祕境 c5：石燈籠（點一下亮 25 秒）＋古井（亮著的燈籠越多越亮；五盞同時亮 → 打開） */
.mx-lantern .on{display:none}
.mx-lantern.lit .off{display:none}
.mx-lantern.lit .on{display:block}
.mx-lantern.lit{filter:drop-shadow(0 3px 0 #0008) drop-shadow(0 0 6px #ffd27a) drop-shadow(0 0 14px #ffb84a)}
.mx-lantern.flick{animation:mx-objknock .25s ease-out}
.mx-lantern.out{animation:mx-lanout .6s steps(3)}
@keyframes mx-lanout{0%,66%{filter:drop-shadow(0 0 6px #ffd27a)}33%{filter:none}}
.mx-lantern.res{animation:mx-lanres .8s ease-in-out infinite alternate}
@keyframes mx-lanres{to{filter:drop-shadow(0 3px 0 #0008) drop-shadow(0 0 10px #ffd27a) drop-shadow(0 0 22px #ffb84a) brightness(1.3)}}
.mx-well{--lit:0;filter:drop-shadow(0 3px 0 #0008) drop-shadow(0 0 calc(var(--lit) * 3px) #cfe6ff)}
.mx-well .open{display:none}
.mx-well.opened .shut{display:none}
.mx-well.opened .open{display:block}
.mx-well.opened{filter:drop-shadow(0 0 12px #fff6c2) drop-shadow(0 0 26px #cfe6ff);animation:mx-wellopen 1.6s ease-in-out}
@keyframes mx-wellopen{20%{transform:translate(-52%,-100%)}40%{transform:translate(-48%,-102%)}60%{transform:translate(-51%,-100%)}}
.mx-well.opened.boom{animation:mx-objboom .38s ease-in forwards}