/* =====================================================================
   善的種子 · 關懷之夜 — 樣式
   ===================================================================== */
:root{
  --ink:#1d2438;
  --cream:#fff7e8;
  --tzu:#2a5db0;            /* 志工藍天白雲 — 藍 */
  --tzu-soft:#e8f0fb;
  --gold:#ffce4d;
  --gold-deep:#d89a1f;
  --leaf:#5bbf6a;
  --leaf-deep:#2f8a3e;
  --warm:#ff9d4d;
  --panel:rgba(255,250,240,.94);
  --panel-dark:rgba(22,28,46,.82);
  --shadow:0 10px 30px rgba(15,20,40,.35);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;font-family:'Nunito','Noto Sans TC','PingFang TC',system-ui,sans-serif;
  background:#10131f;color:var(--ink);overflow:hidden;}
button{font-family:inherit;cursor:pointer;border:none;}
.hidden{display:none !important;}

/* ---------- 靜心之門 Stillness Gate ---------- */
#stillness{position:fixed;inset:0;z-index:50;background:#0e1626;overflow:hidden;}
#stillCanvas{display:block;width:100%;height:100%;}
.still-skip{position:fixed;top:14px;right:14px;z-index:52;font-family:'Baloo 2',Nunito,sans-serif;
  font-weight:800;font-size:14px;color:#5a3a12;background:rgba(255,236,170,.92);border:none;
  border-radius:999px;padding:8px 16px;cursor:pointer;box-shadow:0 3px 10px rgba(20,30,50,.3);}
.still-skip:active{transform:scale(.95);}
/* 冥想片刻：隱藏語言切換與靜音（被 canvas 蓋住又點不到，右上只留略過） */
body.screen-stillness .lang,
body.screen-stillness #mute{display:none !important;}

/* ---------- 通用全螢幕場景 ---------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;}

/* ---------- 語言切換 + 靜音 ---------- */
.lang{position:fixed;top:12px;right:12px;z-index:90;display:flex;gap:6px;}
.lang button{font-weight:800;font-size:13px;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.32);color:#27314a;backdrop-filter:blur(5px);}
.lang button.on{background:var(--gold);color:#5a3a12;}
#mute{position:fixed;top:12px;left:12px;z-index:90;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.32);font-size:17px;backdrop-filter:blur(5px);}

/* ---------- 善的任意門 · 開場（Canvas 動畫 + 取名/歡迎回來） ---------- */
#opening{background:#23364d;}
#doorCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;}
#opening .door-kicker{position:absolute;top:54px;left:0;right:0;z-index:5;text-align:center;
  font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;font-size:15px;letter-spacing:2px;
  color:#fff3d6;text-transform:uppercase;text-shadow:0 2px 12px rgba(20,30,50,.85);
  opacity:0;animation:doorRise .8s ease .3s forwards;}
#opening .door-ui{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 22px 40px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(to top,rgba(28,32,50,.82),rgba(28,32,50,.5) 45%,rgba(28,32,50,.12) 75%,transparent);}
.door-invite{font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;font-size:20px;line-height:1.45;
  color:#fff;margin:8px 0 16px;max-width:460px;text-shadow:0 2px 14px rgba(20,30,50,.6);
  opacity:0;animation:doorRise .8s ease .55s forwards;}
.door-name{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:14px;
  opacity:0;animation:doorRise .8s ease .7s forwards;}
.door-name label{color:#fff;font-weight:800;font-size:15px;text-shadow:0 2px 10px rgba(20,30,50,.6);}
.door-name input{width:260px;max-width:80vw;padding:12px 14px;border-radius:12px;
  border:2px solid rgba(255,255,255,.55);background:rgba(255,255,255,.94);
  font-size:16px;font-family:inherit;text-align:center;color:#27314a;}
.door-name input:focus{outline:none;border-color:#ffd98a;}
.door-welcome{font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;font-size:18px;
  color:#ffe6b0;margin-bottom:14px;text-shadow:0 2px 12px rgba(20,30,50,.7);
  opacity:0;animation:doorRise .8s ease .7s forwards;}
.enter{font-family:'Baloo 2','Nunito',system-ui,sans-serif;font-weight:800;font-size:21px;border:none;cursor:pointer;
  color:#5a3a12;background:linear-gradient(180deg,#ffe7a6,#ffce5e);
  padding:16px 36px;border-radius:999px;display:flex;align-items:center;gap:11px;
  box-shadow:0 8px 0 #d99a2e,0 18px 30px -10px rgba(120,70,0,.6);
  opacity:0;animation:doorRise .8s ease .8s forwards,doorGlow 2.6s ease-in-out 1.6s infinite;}
.enter:active{transform:translateY(5px);box-shadow:0 3px 0 #d99a2e,0 10px 20px -10px rgba(120,70,0,.6);}
.enter .arrow{font-size:18px;}
.door-note{font-family:'Nunito',sans-serif;font-weight:700;font-size:11px;color:rgba(255,255,255,.6);
  margin-top:14px;max-width:440px;line-height:1.5;opacity:0;animation:doorRise .8s ease 1.1s forwards;}
@keyframes doorRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes doorGlow{0%,100%{box-shadow:0 8px 0 #d99a2e,0 18px 30px -10px rgba(120,70,0,.6),0 0 0 0 rgba(255,221,140,.55);}
  50%{box-shadow:0 8px 0 #d99a2e,0 18px 34px -8px rgba(120,70,0,.6),0 0 0 14px rgba(255,221,140,0);}}
.card{position:relative;z-index:2;background:var(--panel);border-radius:22px;
  padding:26px 24px;max-width:380px;width:88%;box-shadow:var(--shadow);}
.card h1{font-size:26px;color:var(--ink);line-height:1.2;}
.card .sub{color:var(--gold-deep);font-weight:800;margin-top:4px;font-size:14px;}
.card .hint{font-size:13.5px;color:#54607a;line-height:1.6;margin:14px 0;}
.card label{display:block;font-weight:800;margin:8px 0 6px;color:var(--tzu);font-size:15px;}
.card input{width:100%;padding:12px 14px;border-radius:12px;border:2px solid var(--tzu-soft);
  font-size:16px;font-family:inherit;text-align:center;}
.card input:focus{outline:none;border-color:var(--tzu);}
.btn{display:inline-block;margin-top:16px;padding:13px 26px;border-radius:999px;font-weight:800;
  font-size:16px;background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#4a3007;
  box-shadow:0 6px 16px rgba(216,154,31,.4);}
.btn:active{transform:translateY(1px);}
.btn.blue{background:linear-gradient(180deg,#4c84d8,var(--tzu));color:#fff;
  box-shadow:0 6px 16px rgba(42,93,176,.4);}

/* ---------- HUB / 白天獵人角地圖（full-bleed cover） ---------- */
#hub{display:block;background:#0e1320;}
#hubTop{position:absolute;top:8px;left:0;right:0;z-index:30;text-align:center;pointer-events:none;}
#hubTop h2{font-size:20px;font-weight:800;color:#2a3550;text-shadow:0 1px 8px rgba(255,255,255,.7);}
#hubSub{font-size:12px;color:#3f5170;font-weight:700;text-shadow:0 1px 6px rgba(255,255,255,.6);}

/* 地圖完整顯示（contain）：四周留白用柔和天色漸層填，直式看起來乾淨刻意、不刺眼 */
#mapStage{position:absolute;inset:0;overflow:hidden;
  background:linear-gradient(180deg,#cfe6f4 0%,#e6f0ec 55%,#f6efe0 100%);}
#hubMap{position:absolute;inset:0;background-image:url('../../assets/images/KS_hunters_point_map.webp');
  background-size:contain;background-repeat:no-repeat;background-position:center;z-index:0;transition:filter 1.2s ease;}
/* 敘事：起點黯淡（昔日深淵）→ 越玩越亮 */
#dawnVeil{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(180deg,#3a3f63,#222a44);opacity:.5;transition:opacity 1.2s ease;}
/* 綠意（行善招甘霖→更綠） */
#greenLayer{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(120% 90% at 50% 80%, rgba(80,180,90,.7), rgba(80,180,90,0) 70%);opacity:.15;transition:opacity 1.2s ease;}
/* 空氣（霧霾；完成環保→清澈） */
#airLayer{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, rgba(150,150,160,.5), rgba(170,170,180,.2));opacity:.4;transition:opacity 1.2s ease;}
/* 珍珠柔光（高榮景） */
#pearlLayer{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(70% 55% at 50% 42%, rgba(255,250,235,.85), rgba(255,250,235,0) 72%);opacity:0;transition:opacity 1.4s ease;}
/* 全域榮景：完成越多越亮、越多花光；高完成度冒光束/彩虹 */
#prosperityLayer{position:absolute;inset:0;z-index:1;pointer-events:none;--prosper:0;}
#prosperityLayer::before{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 45% at 52% 40%, rgba(255,236,150,.6), rgba(255,236,150,0) 70%);
  opacity:calc(var(--prosper)*0.9);transition:opacity 1s ease;}
#prosperityLayer.beams::after{content:'';position:absolute;left:50%;top:-10%;width:120%;height:80%;
  transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 200deg at 50% 0%, rgba(255,244,190,0) 0deg, rgba(255,244,190,.5) 12deg, rgba(255,244,190,0) 24deg, rgba(255,244,190,0) 40deg, rgba(255,244,190,.4) 52deg, rgba(255,244,190,0) 64deg);
  opacity:.7;mix-blend-mode:screen;}
/* 高完成度：彩虹拱橋（取代光束 ::after，第一版視覺） */
#prosperityLayer.rainbow::after{
  background:radial-gradient(120% 115% at 50% 132%,
    transparent 47%, rgba(255,90,90,.32) 49%, rgba(255,180,60,.32) 52%,
    rgba(255,235,90,.30) 55%, rgba(120,215,120,.30) 58%, rgba(90,165,255,.30) 61%,
    rgba(170,110,230,.28) 64%, transparent 67%);
  opacity:.85;mix-blend-mode:screen;}
/* 完成的關 → 那一區開花變美 */
.bloom{position:absolute;transform:translate(-50%,-50%);z-index:2;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side, rgba(120,210,120,.55), rgba(255,210,120,.35) 45%, rgba(140,220,140,0) 72%);
  animation:bloomIn .8s ease both, bloomGlow 3.4s ease-in-out 0.8s infinite;}
.bloom::after{content:'🌸🌼🌷';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:14px;letter-spacing:-2px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));}
@keyframes bloomIn{from{opacity:0;transform:translate(-50%,-50%) scale(.3);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes bloomGlow{0%,100%{filter:brightness(1);}50%{filter:brightness(1.18);}}
/* 竹筒歲月：剛開的那叢花大力綻放；全開滿再倒 → 全圖花齊閃 + 彩虹加強（大圓滿） */
.bloom.new{animation:bloomPop 1s cubic-bezier(.2,1.5,.3,1) both, bloomGlow 3.4s ease-in-out 1s infinite;}
@keyframes bloomPop{0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-20deg);}65%{opacity:1;transform:translate(-50%,-50%) scale(1.35);}100%{opacity:1;transform:translate(-50%,-50%) scale(1);}}
#bloomLayer.grand .bloom{animation:bloomParty 1.6s ease both;}
@keyframes bloomParty{0%,100%{transform:translate(-50%,-50%) scale(1);filter:brightness(1);}25%{transform:translate(-50%,-50%) scale(1.35);filter:brightness(1.6) saturate(1.3);}55%{transform:translate(-50%,-50%) scale(.92);}80%{transform:translate(-50%,-50%) scale(1.12);filter:brightness(1.3);}}
#prosperityLayer.grandbow::after{opacity:1;filter:saturate(1.6) brightness(1.25);}
/* 中央總成長樹 */
#growthTree{position:absolute;transform:translate(-50%,-100%);z-index:3;pointer-events:none;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.3));transition:left .3s,top .3s;}
/* 地圖節點（圖釘） */
#pinLayer{position:absolute;inset:0;z-index:40;pointer-events:none;}  /* 關卡點永遠在里程碑面板之上、可點 */
.pinnode{pointer-events:auto;position:absolute;transform:translate(-50%,-50%);z-index:5;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:5px;}
.pinnode .dot{width:16px;height:16px;border-radius:50%;background:#9aa6bf;
  box-shadow:0 0 0 3px rgba(255,255,255,.5),0 2px 5px rgba(0,0,0,.35);}
.pinnode.soon{opacity:.78;}
.pinnode.soon .dot{width:13px;height:13px;background:radial-gradient(circle,#b9c2d6,#7e8aa6);}
.pinnode.play{cursor:pointer;z-index:6;}
.pinnode.play .dot{position:relative;width:24px;height:24px;background:radial-gradient(circle,#fff3c4,#ffb938);
  box-shadow:0 0 0 4px rgba(255,255,255,.65),0 0 18px 6px rgba(255,196,70,.85),0 3px 8px rgba(120,70,0,.4);
  animation:pinpulse 1.8s ease-in-out infinite;}
/* 放大手指觸控範圍（透明），地圖縮小時也好點 */
.pinnode.play .dot::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;}
.pinnode.play:active .dot{transform:scale(.9);}
.pinnode .pinlabel{background:var(--panel-dark);color:#fff;border-radius:10px;padding:4px 9px;
  text-align:center;line-height:1.2;box-shadow:0 4px 10px rgba(0,0,0,.35);white-space:nowrap;}
.pinnode .pinlabel b{font-size:13px;font-weight:800;display:block;}
.pinnode .pinlabel i{font-style:normal;font-size:11px;color:var(--gold);letter-spacing:1px;}
.pinnode.done .dot{box-shadow:0 0 0 4px rgba(150,230,150,.6),0 0 16px 5px rgba(150,230,150,.7),0 3px 8px rgba(0,0,0,.3);}
@keyframes pinpulse{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.6),0 0 14px 5px rgba(255,196,70,.7),0 3px 8px rgba(120,70,0,.4);}
  50%{box-shadow:0 0 0 7px rgba(255,255,255,.7),0 0 26px 10px rgba(255,196,70,.95),0 3px 8px rgba(120,70,0,.4);}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,206,77,.30),0 8px 18px rgba(216,154,31,.30);}
  50%{box-shadow:0 0 0 6px rgba(255,206,77,.55),0 10px 22px rgba(216,154,31,.5);}}

/* 里程碑進度（向外＝加速器；竹筒滿了可點倒入） */
/* 里程碑＝靠底邊的可收合面板（預設收合，絕不蓋住地圖關卡點） */
#milestones{position:absolute;left:0;right:0;bottom:0;top:auto;transform:none;z-index:24;
  display:flex;flex-direction:column;align-items:center;pointer-events:none;max-width:none;}
#msHandle{pointer-events:auto;background:rgba(14,18,38,.72);color:#fff;font-weight:800;font-size:12px;
  padding:5px 16px;border-radius:13px 13px 0 0;border:1px solid rgba(255,255,255,.14);border-bottom:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#msBody{pointer-events:auto;width:100%;max-width:520px;display:flex;flex-direction:column;gap:6px;
  padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(10,12,26,.62);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-height:42vh;overflow-y:auto;
  transition:max-height .3s ease,padding .3s ease;}
#milestones.collapsed #msBody{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;}
.ms{width:100%;background:rgba(14,18,38,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:7px 10px;}
.ms.canpour{border-color:rgba(255,206,77,.8);box-shadow:0 0 14px rgba(255,206,77,.5);cursor:pointer;}
.ms-name{color:#fff;font-weight:800;font-size:12px;margin-bottom:4px;}
.ms-name i{font-style:normal;color:var(--gold);font-weight:800;}
.ms-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden;}
.ms-bar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#7ad07f,var(--gold));transition:width .5s ease;}

/* ===== 永久玻璃 HUD（四角） ===== */
.ghud{position:fixed;z-index:80;background:rgba(18,24,44,.55);color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:7px 13px;font-weight:800;font-size:13px;display:flex;align-items:center;gap:5px;
  box-shadow:0 4px 14px rgba(0,0,0,.3);}
.ghud b{font-size:17px;}
#hudTime{top:12px;left:58px;}
#hudCoins{top:54px;right:12px;}
/* 竹筒（左下） */
#bamboo{position:fixed;z-index:80;left:12px;bottom:78px;display:flex;flex-direction:column;align-items:center;gap:3px;}
#bamboo.bump{animation:bambooBump .4s ease;}
@keyframes bambooBump{0%,100%{transform:translateY(0);}35%{transform:translateY(4px);}}
#bambooTube{position:relative;width:30px;height:62px;border-radius:8px 8px 10px 10px;overflow:hidden;
  background:linear-gradient(90deg,#7fae54,#9ec96f 40%,#6f9d49);border:2px solid #5b873d;
  box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 0 8px rgba(0,0,0,.25);}
#bambooFill{position:absolute;left:0;right:0;bottom:0;height:0;transition:height .4s ease;
  background:linear-gradient(180deg, rgba(255,206,77,.95), rgba(216,154,31,.95));}
#bambooIco{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:18px;}
#bambooCount{font-size:11px;font-weight:800;color:#fff;background:rgba(14,18,38,.6);border-radius:999px;padding:2px 8px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#pourBtn{font-size:11px;font-weight:800;color:#5a3a12;background:linear-gradient(180deg,#ffe7a6,#ffce5e);
  border-radius:999px;padding:5px 10px;box-shadow:0 3px 8px rgba(216,154,31,.5);animation:pinpulse 1.8s infinite;}

/* ===== 永久金圈米芽（右下角，住在天使光圈裡） ===== */
#sproutRing{position:fixed;z-index:80;right:10px;bottom:64px;width:84px;
  display:flex;flex-direction:column;align-items:center;}
#sproutRing .ring-halo{position:absolute;left:50%;top:34px;width:78px;height:78px;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,232,160,.55), rgba(255,210,120,.18) 60%, rgba(255,210,120,0) 75%);
  box-shadow:0 0 22px rgba(255,210,120,.6);}
#sproutPlant{position:relative;z-index:1;}
#sproutPlant svg{filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));}
#sproutStageName{position:relative;z-index:1;margin-top:2px;font-size:11px;font-weight:800;color:#fff;
  background:rgba(14,18,38,.6);border-radius:999px;padding:2px 8px;max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#sproutRing.grow .ring-halo{animation:ringGrow .9s ease;}
#sproutRing.bloom .ring-halo{animation:ringBloom 1.3s ease;}
#sproutRing.grow #sproutPlant{animation:plantBump .7s cubic-bezier(.2,1.4,.4,1);}
#sproutRing.bloom #sproutPlant{animation:plantBloom 1.1s cubic-bezier(.2,1.5,.3,1);}
@keyframes ringGrow{0%{box-shadow:0 0 18px rgba(255,210,120,.5);}45%{box-shadow:0 0 40px 10px rgba(255,221,140,.95);}100%{box-shadow:0 0 22px rgba(255,210,120,.6);}}
@keyframes ringBloom{0%{box-shadow:0 0 18px rgba(255,210,120,.5);}40%{box-shadow:0 0 60px 22px rgba(255,232,160,1);}100%{box-shadow:0 0 22px rgba(255,210,120,.6);}}
@keyframes plantBump{0%{transform:scale(1);}45%{transform:scale(1.22);}100%{transform:scale(1);}}
@keyframes plantBloom{0%{transform:scale(.8) rotate(-5deg);}55%{transform:scale(1.35) rotate(3deg);}100%{transform:scale(1) rotate(0);}}

/* 從車飛進金圈/竹筒的光點與銅板 */
.flydot,.flycoin{position:fixed;z-index:85;width:18px;height:18px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);transition:transform .7s cubic-bezier(.4,.1,.5,1),opacity .7s ease;}
.flydot{background:radial-gradient(circle,#fff,#ffd98a);box-shadow:0 0 14px 4px rgba(255,210,120,.9);}
.flycoin{width:20px;height:20px;background:radial-gradient(circle at 38% 35%,#fff6c8,#e7b03a 70%,#b9821f);
  box-shadow:0 0 10px rgba(255,206,77,.7),inset 0 0 4px rgba(120,80,0,.5);border:1px solid #caa24e;}

/* 倒竹筒等的浮動訊息 */
.flash{position:fixed;left:50%;top:18%;transform:translate(-50%,-8px);z-index:90;
  background:rgba(14,18,38,.86);color:#fff;font-weight:800;font-size:15px;padding:12px 18px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:all .3s;pointer-events:none;max-width:84vw;text-align:center;}
.flash.show{opacity:1;transform:translate(-50%,0);}

/* 關卡時：金圈米芽/竹筒移到側邊中段，不擋底部面板/回收桶 */
body.screen-level #sproutRing,body.screen-level2 #sproutRing,body.screen-level3 #sproutRing,body.screen-level4 #sproutRing{bottom:auto;top:40%;right:8px;width:70px;}
body.screen-level #bamboo,body.screen-level2 #bamboo,body.screen-level3 #bamboo,body.screen-level4 #bamboo{bottom:auto;top:38%;left:10px;}
/* 關4：拱門/角色在左側 → 竹筒＋金圈米芽全移到右側欄堆疊，不壓到主角 */
body.screen-level4 #sproutRing{top:30%;right:8px;left:auto;}
body.screen-level4 #bamboo{left:auto;right:14px;top:54%;}
body.screen-level #milestones{display:none;}

/* ---------- 小芽盆栽圖示 ---------- */
.sprout-ico{display:inline-block;}
.sprout-chip{padding-top:4px;padding-bottom:4px;}
.sprout-chip .potico{display:inline-flex;align-items:flex-end;line-height:0;}
.sprout-chip .potico svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));}
/* 結尾：大盆栽，依今晚成績放大 */
.endplant{display:flex;justify-content:center;align-items:flex-end;margin:6px auto 2px;min-height:120px;
  animation:plantPop .6s cubic-bezier(.22,1.2,.4,1) both;}
.endplant svg{filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));}
@keyframes plantPop{from{opacity:0;transform:translateY(14px) scale(.7);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ---------- 關卡 / LEVEL：插畫鋪滿（full-bleed cover），介面浮在上面 ---------- */
#level{position:fixed;inset:0;z-index:10;display:none;background:#10101f;}
/* HUD：浮動透明（不佔橫帶） */
#hudBar{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;gap:7px;align-items:center;
  justify-content:center;padding:10px 12px;pointer-events:none;}
#hudBar .chip{pointer-events:auto;background:rgba(20,26,48,.62);color:#fff;border-radius:999px;
  padding:7px 12px;font-weight:800;font-size:13px;display:flex;gap:5px;align-items:center;
  border:1px solid rgba(255,255,255,.12);white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#hudBar #leaveBtn{pointer-events:auto;position:fixed;left:calc(12px + env(safe-area-inset-left));top:calc(54px + env(safe-area-inset-top));right:auto;z-index:95;background:rgba(255,255,255,.2);color:#fff;border-radius:999px;
  padding:7px 13px;font-weight:800;font-size:13px;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
/* 舞台＝整個畫面；插畫 cover 鋪滿 */
#stage{position:absolute;inset:0;overflow:hidden;}
#sceneImg{position:absolute;inset:0;background-image:url('../../assets/images/rv_park_dusk1.webp');
  background-size:cover;background-position:center;z-index:0;transition:filter 1.4s linear;}
/* 黃昏金光（隨夜色淡出） */
#skyWarm{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(120% 70% at 60% 22%, rgba(255,180,90,.35), rgba(255,150,70,0) 60%);
  opacity:1;transition:opacity 1.4s linear;}
/* 變暗層：同一張圖平順壓暗（不硬切夜景） */
#darkLayer{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 26%, rgba(10,14,38,0) 0%, rgba(9,12,32,.35) 55%, rgba(5,7,22,.7) 100%);
  opacity:0;transition:opacity 1.4s linear;}
/* 寒冷藍調 */
#coldLayer{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(180deg,#465ea0,#171f44);opacity:0;transition:opacity 1.4s linear;}
#vignette{position:absolute;inset:0;z-index:4;pointer-events:none;
  box-shadow:inset 0 0 120px 30px rgba(4,6,18,.55);opacity:.5;transition:opacity 1.4s linear;}
/* 窗戶暖光層 */
#glowLayer{position:absolute;inset:0;z-index:5;pointer-events:none;}
.winglow{position:absolute;transform:translate(-50%,-50%);border-radius:46%;
  background:radial-gradient(closest-side, rgba(255,201,104,.98), rgba(255,170,60,.4) 52%, rgba(255,170,60,0) 76%);
  opacity:0;transition:opacity 1s ease;filter:blur(1.5px);}
.winglow.lit{animation:flicker 3.6s ease-in-out infinite;}
@keyframes flicker{0%,100%{opacity:.85;}50%{opacity:1;}}

/* 高亮目前這台車（聚光：其餘壓暗） */
#spotlight{position:absolute;z-index:6;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(6,8,20,.46);
  transition:left .5s cubic-bezier(.3,.8,.3,1),top .5s cubic-bezier(.3,.8,.3,1),width .4s,height .4s,opacity .5s;}
#spotRing{position:absolute;z-index:7;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;border:2px dashed rgba(255,226,158,.6);
  box-shadow:0 0 26px rgba(255,210,120,.45);
  transition:left .5s cubic-bezier(.3,.8,.3,1),top .5s cubic-bezier(.3,.8,.3,1),width .4s,height .4s,opacity .5s;}

/* 衝進來：大燈閃光 */
.headlight{position:absolute;z-index:6;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,248,220,.92), rgba(255,236,170,.32) 40%, rgba(255,236,170,0) 70%);
  animation:hlflash .76s ease-out forwards;}
@keyframes hlflash{0%{opacity:0;transform:translate(-50%,-50%) scale(.55);}
  22%{opacity:.95;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.18);}}
/* 粒子閃光（點線索/配對成功的爽感） */
.spark{position:fixed;z-index:86;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);
  animation-name:sparkfly;animation-timing-function:cubic-bezier(.2,.7,.3,1);animation-fill-mode:forwards;}
@keyframes sparkfly{0%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(.3);}}

/* 小芽當場長大：天使金光環 + 盆栽綻放 */
.halo{position:absolute;z-index:24;width:20px;height:20px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);border:3px solid rgba(255,224,150,.95);
  box-shadow:0 0 50px 12px rgba(255,210,120,.8), inset 0 0 30px rgba(255,224,150,.6);
  animation:haloRing 1.45s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes haloRing{0%{opacity:0;width:20px;height:20px;}
  16%{opacity:1;}100%{opacity:0;width:var(--hs,240px);height:var(--hs,240px);}}
.growcele{position:absolute;left:50%;top:46%;z-index:25;pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(120,80,0,.4));
  animation:grIn .5s cubic-bezier(.2,1.5,.35,1) both, grOut .45s ease 1.35s forwards;}
.growcele.bloom{animation:grBloom .65s cubic-bezier(.2,1.6,.3,1) both, grOut .55s ease 1.6s forwards;}
@keyframes grIn{from{opacity:0;transform:translate(-50%,-50%) scale(.3);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes grBloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-6deg);}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.28) rotate(2deg);}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);}}
@keyframes grOut{to{opacity:0;transform:translate(-50%,-58%) scale(1.05);}}

/* 線索發亮點 */
.clue{position:absolute;z-index:8;width:32px;height:32px;margin:-16px 0 0 -16px;
  border-radius:50%;background:radial-gradient(closest-side,#fff7da,#ffcf6b);
  box-shadow:0 0 0 4px rgba(255,210,110,.35),0 0 18px 7px rgba(255,200,90,.7);
  display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;
  animation:cluepulse 1.6s ease-in-out infinite;}
.clue.subtle{animation-duration:2.8s;width:26px;height:26px;margin:-13px 0 0 -13px;font-size:13px;
  box-shadow:0 0 0 3px rgba(255,210,110,.2),0 0 11px 4px rgba(255,200,90,.42);}
.clue.enter{animation:cluein .5s cubic-bezier(.22,.61,.36,1) both;}
.clue.read{animation:none;background:radial-gradient(closest-side,#d6f0d2,#8fd49a);
  box-shadow:0 0 0 3px rgba(120,200,130,.45);cursor:default;color:#2c6b39;}
@keyframes cluepulse{0%,100%{transform:scale(1);}50%{transform:scale(1.16);}}
@keyframes cluein{from{opacity:0;transform:translateX(46px) scale(.4);}to{opacity:1;transform:translateX(0) scale(1);}}
@keyframes cluetap{0%{transform:scale(1);}40%{transform:scale(1.5);}100%{transform:scale(1);}}
.clue.tap{animation:cluetap .35s ease;}

/* 浮動訊息（在舞台內、置中偏上，不擋車） */
#toast{position:absolute;left:50%;top:16%;z-index:20;
  background:rgba(14,18,38,.86);color:#fff;padding:13px 18px;border-radius:15px;font-weight:800;
  font-size:15px;max-width:86%;text-align:center;line-height:1.5;
  border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform:translate(-50%,-8px);opacity:0;transition:all .3s;pointer-events:none;}
#toast.show{opacity:1;transform:translate(-50%,0);}
#toast .warmline{display:block;font-size:13.5px;font-weight:700;color:#ffdfa0;margin-top:6px;}

/* ---------- 底部窄面板（半透明、可收合，融入夜色） ---------- */
#panel{position:absolute;left:0;right:0;bottom:0;z-index:30;
  background:linear-gradient(180deg,rgba(14,17,36,.55),rgba(11,13,28,.92));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -10px 30px rgba(0,0,0,.4);}
#panelTab{position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  width:64px;height:26px;border-radius:13px 13px 0 0;background:rgba(11,13,28,.9);
  color:#ffd98a;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.1);border-bottom:none;}
#panelChevron{transition:transform .3s ease;}
/* 收合：縮起面板內容，讓舞台長回來（不是只是蓋住） */
#panelBody{padding:12px 12px 14px;display:flex;flex-direction:column;gap:9px;
  max-height:42vh;overflow-y:auto;transition:max-height .35s ease,padding .35s ease;}
#panel.collapsed #panelBody{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;}
#panel.collapsed #panelChevron{transform:rotate(180deg);}
.prow{display:flex;align-items:center;gap:9px;}
.plabel{flex:0 0 auto;font-size:13px;font-weight:800;color:#ffd98a;width:74px;line-height:1.25;}
.notes{flex:1 1 auto;display:flex;gap:7px;flex-wrap:wrap;min-height:32px;align-items:center;}
.note-empty{font-size:12.5px;color:#aab2c8;line-height:1.5;}
.note{background:rgba(86,140,224,.26);color:#dceaff;border-radius:999px;padding:6px 11px;
  font-weight:800;font-size:13px;display:flex;gap:5px;align-items:center;
  border:1px solid rgba(140,180,255,.3);animation:popin .25s ease;}
@keyframes popin{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
/* 物資架：全部品項一次顯示、不用捲動（緊湊方格，約兩排） */
.shelf{flex:1 1 auto;display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:2px 0 2px;}
.item{background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);
  border-radius:13px;padding:8px 3px 6px;text-align:center;
  font-size:11px;font-weight:700;color:#e7ecf7;line-height:1.18;transition:transform .12s,background .15s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;}
.item:active{transform:scale(.93);}
.item.distract{border-style:dashed;opacity:.92;}
.item.inpack{background:rgba(120,200,130,.22);border-color:rgba(140,220,150,.5);opacity:.55;}
.item .em{font-size:23px;display:block;margin-bottom:3px;line-height:1;}
.item .em.multi{font-size:19px;letter-spacing:1.5px;}   /* 組合品項 2–3 顆內容物並排 */
.packrow{align-items:stretch;}
.pack{flex:1 1 auto;display:flex;gap:7px;flex-wrap:wrap;min-height:46px;align-items:center;
  background:rgba(255,206,77,.08);border:1.5px dashed rgba(255,206,77,.5);border-radius:14px;padding:7px 9px;}
.pack-empty{font-size:12.5px;color:#d8c79a;}
.pin{background:linear-gradient(180deg,rgba(255,222,150,.95),rgba(255,196,96,.95));border-radius:11px;
  padding:7px 9px;font-weight:800;font-size:12px;color:#5a3c08;display:flex;gap:5px;align-items:center;
  animation:popin .2s ease;}
.pin .x{background:rgba(0,0,0,.16);border-radius:50%;width:19px;height:19px;font-size:13px;
  display:flex;align-items:center;justify-content:center;color:#4a300a;}
#sendBtn{flex:0 0 auto;align-self:center;padding:13px 20px;border-radius:999px;font-weight:800;font-size:16px;
  background:linear-gradient(180deg,var(--leaf),var(--leaf-deep));color:#fff;
  box-shadow:0 6px 16px rgba(47,138,62,.45);transition:transform .12s,filter .2s;}
#sendBtn:active{transform:scale(.96);}
#sendBtn:disabled{filter:grayscale(.7);opacity:.5;}

/* ---------- 結尾 ---------- */
#ending .bg{filter:brightness(.95);}
/* 亮度基準：夜景仍是夜景，但不得比關1第一台車暗 → 面紗減淡＋夜照提亮 */
#ending .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,14,34,.18),rgba(8,11,28,.36));}
#ending .bg{filter:brightness(1.6) saturate(1.05);}
#ending .card{background:var(--panel-dark);color:#fff;max-height:92vh;overflow-y:auto;}
#ending .card h1{color:#fff;}
#ending .big{font-size:40px;color:var(--gold);font-weight:800;margin:6px 0;}
#ending .endwarm{font-size:13.5px;color:#d7deeec0;line-height:1.6;margin:12px 0 4px;}
#ending .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px;}

/* ---------- 響應式 ---------- */
@media (min-width:760px){
  #panelBody{max-width:820px;margin:0 auto;}
  .plabel{width:88px;font-size:14px;}
  .item{font-size:11.5px;}
}
/* 窄螢幕（直式手機）：方格改 4 欄，格子更大好點，仍不捲動 */
@media (max-width:600px){
  .shelf{grid-template-columns:repeat(4,1fr);gap:6px;}
  .plabel{width:64px;font-size:12.5px;}
  #panelBody{max-height:54vh;}
}
/* 橫式矮螢幕：面板更扁 */
@media (max-height:520px){
  #panelBody{max-height:50vh;gap:7px;padding:9px 10px 10px;}
  .item{min-height:54px;font-size:10.5px;}
  .item .em{font-size:20px;}
  .item .em.multi{font-size:16px;letter-spacing:1px;}
  .plabel{width:64px;font-size:12px;}
}

/* ===================================================================
   手機修復與優化：換名字選單、安全區、直式 RWD、面板間距
   =================================================================== */

/* 門邊「換一個名字」連結 */
.switch-link{margin-top:12px;background:rgba(255,255,255,.18);color:#fff;font-weight:700;
  font-size:clamp(12px,2.6vw,14px);padding:8px 16px;border-radius:999px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}

/* hub 角落齒輪 + 小選單（換名字/重聽/重新開始） */
#hubGear{position:fixed;z-index:81;top:calc(54px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));
  width:38px;height:38px;border-radius:50%;background:rgba(18,24,44,.55);color:#fff;font-size:18px;
  border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#hubMenu{position:fixed;z-index:82;top:calc(98px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:6px;background:rgba(14,18,38,.94);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
#hubMenu button{background:rgba(255,255,255,.1);color:#fff;font-weight:700;font-size:13px;
  padding:10px 13px;border-radius:9px;text-align:left;white-space:nowrap;}
#hubMenu #miRestart{color:#ffb39e;}
/* 意見箱：hub 圓鈕（玻璃感，跟齒輪/說明一致）＋ 結算列文字鈕 */
#hubFeedback{position:fixed;z-index:81;top:calc(54px + env(safe-area-inset-top));left:calc(100px + env(safe-area-inset-left));
  width:38px;height:38px;border-radius:50%;background:rgba(18,24,44,.55);color:#fff;font-size:17px;
  display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.fbBtn{text-decoration:none;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 16px rgba(0,0,0,.28);}
.card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* 安全區（瀏海/圓角）— 固定四角浮層內縮 */
#hudTime{top:calc(12px + env(safe-area-inset-top));left:calc(58px + env(safe-area-inset-left));}
#hudCoins{top:calc(54px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));}
.lang{top:calc(12px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));}
#mute{top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));}
#bamboo{left:calc(12px + env(safe-area-inset-left));bottom:calc(86px + env(safe-area-inset-bottom));}
#sproutRing{right:calc(10px + env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom));}

.ms-name{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* emoji 拉開間距 + clamp 放大 */
#bambooIco{font-size:clamp(1.3rem,2.2vw,2rem);}
.ghud{gap:7px;font-size:clamp(12px,2.6vw,14px);}
.ghud b{font-size:clamp(15px,3.4vw,19px);}

/* ---------- 直式（portrait）優先 ---------- */
@media (max-aspect-ratio:1/1){
  #bamboo{bottom:calc(70px + env(safe-area-inset-bottom));}
  #sproutRing{bottom:calc(56px + env(safe-area-inset-bottom));width:76px;}
  #hudTime,#hudCoins{font-size:12px;}
  /* 關卡：金圈/竹筒貼邊中段，底部讓給面板 */
  body.screen-level #sproutRing,body.screen-level2 #sproutRing,body.screen-level3 #sproutRing,body.screen-level4 #sproutRing{top:34%;width:64px;}
  body.screen-level #bamboo,body.screen-level2 #bamboo,body.screen-level3 #bamboo,body.screen-level4 #bamboo{top:32%;}
}
/* 很窄或很矮：再縮一點，避免互相重疊 */
@media (max-width:380px){
  #sproutRing{width:66px;}
  #sproutStageName{font-size:10px;max-width:84px;}
  #bambooTube{width:26px;height:54px;}
}

/* 收合把手加大，iOS 直式也好按 */
#panelTab{width:74px;height:30px;top:-30px;font-size:18px;}

/* ===================================================================
   關2 · 環保小尖兵（會呼吸：灰濛 → 就地揭曉 → 綻放）
   =================================================================== */
#level2{position:fixed;inset:0;z-index:10;display:none;overflow:hidden;background:#3a3d44;--heal:0;}
#l2scene{position:absolute;inset:0;z-index:0;overflow:hidden;}
/* before（灰濛）：有圖用圖、無圖用漸層 fallback */
#l2before{position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:linear-gradient(180deg,#6b6f78,#7d7e7c 45%,#8a857a 62%,#6d685f);filter:saturate(.6) brightness(.84);}
/* after 切片（就地揭曉）：與 before 同 cover/center 對齊；有圖用圖、無圖用亮漸層 */
#l2after{position:absolute;inset:0;}
.l2slice{position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:linear-gradient(180deg,#9fd4ee,#bfe3d6 45%,#cdebc2 62%,#a9c98f);
  opacity:0;transition:opacity 1.1s ease;}
.l2slice.on{opacity:1;}
/* 飄移的霧（開頭濃、隨療癒漸散） */
#l2fog{position:absolute;inset:-12% -22%;z-index:2;pointer-events:none;
  opacity:calc((1 - var(--heal))*.7);transition:opacity 1.4s ease;
  background:radial-gradient(42% 60% at 22% 58%,rgba(226,229,233,.7),transparent 70%),
             radial-gradient(46% 56% at 70% 55%,rgba(210,214,220,.6),transparent 72%);
  animation:l2fog 26s ease-in-out infinite;}
@keyframes l2fog{0%,100%{transform:translateX(-4%);}50%{transform:translateX(4%);}}
/* 空氣光塵（療癒越多越亮） */
#l2dust{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:calc(.25 + var(--heal)*.75);}
.l2mote{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(255,240,190,0));animation:l2mote linear infinite;}
@keyframes l2mote{0%{transform:translateY(0);opacity:0;}15%{opacity:.9;}100%{transform:translateY(-92vh);opacity:0;}}
/* 偶爾飛過的鳥（療癒後才明顯） */
#l2birds{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--heal);transition:opacity 1.4s ease;}
.l2bird{position:absolute;left:-10%;font-size:20px;animation:l2bird 15s linear infinite;}
@keyframes l2bird{0%{transform:translate(0,0);}100%{transform:translate(122vw,-6vh);}}
/* 發光待整理點（C：點下去才出現該處回收物） */
#l2spots{position:absolute;inset:0;z-index:6;}
.l2spot{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.l2spot-ring{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,150,.85),rgba(255,210,110,0) 72%);
  box-shadow:0 0 16px 5px rgba(255,206,90,.7);animation:pinpulse 1.7s ease-in-out infinite;}
.l2spot-ico{position:relative;font-size:18px;}
.l2spot.opened .l2spot-ring{animation:none;opacity:.22;}
.l2spot.opened .l2spot-ico{opacity:.4;}
.l2spot.healed{opacity:0;transition:opacity .6s ease;}
/* 就地長出的花 + 綻放層 */
.l2flower{position:fixed;z-index:86;transform:translate(-50%,-50%);font-size:24px;pointer-events:none;
  animation:l2flower 2.6s ease forwards;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));}
@keyframes l2flower{0%{opacity:0;transform:translate(-50%,-30%) scale(.3);}30%{opacity:1;transform:translate(-50%,-50%) scale(1.12);}80%{opacity:1;}100%{opacity:0;transform:translate(-50%,-72%) scale(1);}}
#l2bloom{position:absolute;inset:0;z-index:5;pointer-events:none;}

#l2top{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;justify-content:center;align-items:center;
  padding:10px 12px;pointer-events:none;}
#l2title{pointer-events:auto;background:rgba(20,26,48,.55);color:#fff;font-weight:800;font-size:14px;
  padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#l2leave{position:fixed;left:calc(12px + env(safe-area-inset-left));top:calc(54px + env(safe-area-inset-top));right:auto;z-index:95;pointer-events:auto;background:rgba(255,255,255,.2);color:#fff;
  border-radius:999px;padding:7px 13px;font-weight:800;font-size:13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#l2intro{position:absolute;top:52px;left:50%;transform:translateX(-50%);z-index:20;max-width:min(88vw,520px);
  background:rgba(14,18,38,.5);color:#fff;font-weight:700;font-size:13px;line-height:1.5;text-align:center;
  padding:9px 14px;border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
/* 待分類物：置中、wrap、不捲動 */
#l2items{position:absolute;left:0;right:0;top:0;bottom:150px;z-index:15;pointer-events:none;
  display:flex;flex-wrap:wrap;gap:12px;align-content:center;justify-content:center;padding:118px 16px 8px;}
.l2item{pointer-events:auto;}
.l2item{width:84px;min-height:84px;border-radius:16px;background:rgba(255,255,255,.93);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 6px 14px rgba(0,0,0,.3);font-weight:800;font-size:12px;color:#37414f;
  touch-action:none;cursor:grab;border:2px solid rgba(255,255,255,.65);user-select:none;-webkit-user-select:none;}
.l2item .l2item-ico{font-size:clamp(1.8rem,6vw,2.4rem);line-height:1;}
.l2item.l2dragging{z-index:88;cursor:grabbing;transform:scale(1.08);box-shadow:0 12px 26px rgba(0,0,0,.45);}
.l2item.placed{opacity:0;transform:scale(.4);transition:all .18s ease;}
/* 回收桶列：底部（可愛桶子圖片 + 三語名稱；命中範圍比圖再大一圈） */
#l2bins{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;gap:clamp(4px,1.6vw,14px);
  justify-content:center;align-items:flex-end;flex-wrap:nowrap;
  padding:6px 8px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,12,26,0),rgba(10,12,26,.42));}
.l2bin{position:relative;flex:0 1 auto;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:#fff;cursor:pointer;transition:transform .18s ease;}
.l2bin-hit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% + 28px);height:calc(100% + 28px);border-radius:18px;}   /* 加大手指命中範圍 */
.l2bin-ico{width:clamp(54px,15vw,98px);height:clamp(54px,15vw,98px);
  background-size:contain;background-position:center bottom;background-repeat:no-repeat;
  display:flex;align-items:flex-end;justify-content:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.35));transition:transform .18s ease;}
.l2bin-ico.hasimg .l2bin-emoji{display:none;}
.l2bin-emoji{font-size:clamp(1.6rem,5vw,2.6rem);line-height:1;}
.l2bin-nm{font-size:clamp(10px,2.6vw,13px);font-weight:800;background:rgba(14,18,38,.5);
  padding:2px 9px;border-radius:999px;white-space:nowrap;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
.l2bin.lit{transform:translateY(-4px);}
.l2bin.lit .l2bin-ico{filter:drop-shadow(0 0 14px rgba(150,230,150,.95)) drop-shadow(0 4px 8px rgba(0,0,0,.35));}
.l2bin.eat .l2bin-ico{animation:l2eat .42s ease;}
@keyframes l2eat{0%{transform:translateY(0) scale(1);}35%{transform:translateY(-6px) scale(1.08);}100%{transform:translateY(0) scale(1);}}
/* 街越乾淨、社區越多人走出來（純氛圍；只用 transform/opacity，數量上限 10） */
#l2dolls{position:absolute;inset:0;z-index:5;pointer-events:none;}
.l2doll,.l2sup{position:absolute;background-size:contain;background-position:center bottom;
  background-repeat:no-repeat;opacity:0;will-change:transform,opacity;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.32));
  transform:translate(-50%,-100%) translateY(9px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.56,.64,1);}
.l2doll{width:clamp(72px,18vw,128px);height:clamp(116px,28vw,200px);}
.l2sup{width:clamp(79px,20vw,141px);height:clamp(128px,31vw,220px);}
.l2doll.in{opacity:1;transform:translate(-50%,-100%);animation:l2sway 4.6s ease-in-out .55s infinite;}
.l2sup.in{opacity:1;transform:translate(-50%,-100%);animation:l2sway 5.6s ease-in-out .3s infinite;}
@keyframes l2sway{0%,100%{transform:translate(-50%,-100%) rotate(-1.6deg);}
  50%{transform:translate(-50%,-100%) rotate(1.6deg);}}
@media (prefers-reduced-motion:reduce){
  .l2doll,.l2sup{transform:translate(-50%,-100%);transition:opacity .5s ease;}
  .l2doll.in,.l2sup.in{transform:translate(-50%,-100%);animation:none;}
}
/* 結算 */
#l2end{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(10,14,34,.42),rgba(8,11,28,.64));}
#l2end .card{background:var(--panel-dark);color:#fff;max-height:92vh;overflow-y:auto;}
#l2end .card h1{color:#fff;}
@media (max-aspect-ratio:1/1){
  #l2items{bottom:166px;padding-top:96px;}
  .l2item{width:74px;min-height:74px;}
}

/* ===================================================================
   關3 · 幸福校園 畢業感恩（粉彩慶典；櫻花/彩帶/光，CSS 場景）
   =================================================================== */
#level3{position:fixed;inset:0;z-index:10;display:none;overflow:hidden;background:#e8dfe8;--heal:0;}
#l3scene{position:absolute;inset:0;z-index:0;overflow:hidden;}
#l3sky{position:absolute;inset:0;background:linear-gradient(180deg,#ffe3ef 0%,#dfeafe 44%,#e7f3d8 70%,#cfe6b8 100%);
  filter:brightness(calc(.92 + var(--heal)*.16)) saturate(calc(.85 + var(--heal)*.45));transition:filter 1.2s ease;}
/* 抽象孩子點點臉（走動；非真實可辨識的人） */
#l3kids{position:absolute;inset:0;z-index:2;pointer-events:none;}
.l3kid{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--c,#ffd27f);
  box-shadow:0 3px 6px rgba(0,0,0,.22);animation:l3kid 5s ease-in-out infinite;}
.l3kid::before{content:'';position:absolute;left:5px;top:9px;width:3px;height:3px;border-radius:50%;
  background:#3a2f22;box-shadow:9px 0 0 #3a2f22;}
.l3kid::after{content:'';position:absolute;left:7px;top:14px;width:8px;height:4px;border-bottom:2px solid #3a2f22;border-radius:0 0 6px 6px;}
/* 圖片版畢業生（去背、夠大看得清；圖載不到才退回上面的 CSS 笑臉） */
.l3kid.hasimg{width:clamp(96px,23vw,152px);height:clamp(138px,33vw,218px);
  transform:translate(-50%,-100%);border-radius:0;background-color:transparent;
  background-size:contain;background-position:center bottom;background-repeat:no-repeat;
  box-shadow:none;filter:drop-shadow(0 4px 7px rgba(0,0,0,.3));animation:l3kidImg 5s ease-in-out infinite;}
.l3kid.hasimg::before,.l3kid.hasimg::after{display:none;}
@keyframes l3kid{0%,100%{transform:translate(0,0);}50%{transform:translate(10px,-3px);}}
@keyframes l3kidImg{0%,100%{transform:translate(-50%,-100%);}50%{transform:translate(-50%,-103%);}}
/* 飄落櫻花瓣 */
#l3petals{position:absolute;inset:0;z-index:3;pointer-events:none;}
.l3petal{position:absolute;top:-6%;animation:l3petal linear infinite;}
@keyframes l3petal{0%{transform:translateY(0) rotate(0);opacity:0;}10%{opacity:.95;}100%{transform:translateY(112vh) rotate(360deg);opacity:.4;}}
/* 發光待整理點（一封封感恩） */
#l3spots{position:absolute;inset:0;z-index:6;}
.l3spot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.l3spot-ring{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,150,.85),rgba(255,210,110,0) 72%);
  box-shadow:0 0 16px 5px rgba(255,206,90,.7);animation:pinpulse 1.7s ease-in-out infinite;}
.l3spot-ico{position:relative;font-size:20px;}
.l3spot.opened .l3spot-ring{animation:none;opacity:.22;}
.l3spot.opened .l3spot-ico{opacity:.4;}
#l3bloom{position:absolute;inset:0;z-index:5;pointer-events:none;}
/* 彩帶 */
.l3conf{position:fixed;z-index:86;width:9px;height:14px;border-radius:2px;pointer-events:none;transform:translate(-50%,-50%);
  animation:l3conf 1.2s ease-out forwards;}
@keyframes l3conf{0%{opacity:1;transform:translate(-50%,-50%) rotate(0);}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) rotate(240deg);}}
/* 頂列 / 說明 */
#l3top{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;justify-content:center;align-items:center;padding:10px 12px;pointer-events:none;}
#l3title{pointer-events:auto;background:rgba(40,24,48,.55);color:#fff;font-weight:800;font-size:14px;padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#l3leave{position:fixed;left:calc(12px + env(safe-area-inset-left));top:calc(54px + env(safe-area-inset-top));right:auto;z-index:95;pointer-events:auto;background:rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:7px 13px;font-weight:800;font-size:13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#l3intro{position:absolute;top:52px;left:50%;transform:translateX(-50%);z-index:20;max-width:min(90vw,560px);
  background:rgba(40,24,48,.5);color:#fff;font-weight:700;font-size:13px;line-height:1.5;text-align:center;
  padding:9px 14px;border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
/* 感恩卡（要讀內容才知道送給誰） */
#l3items{position:absolute;left:0;right:0;top:0;bottom:150px;z-index:15;pointer-events:none;
  display:flex;flex-wrap:wrap;gap:10px;align-content:center;justify-content:center;padding:108px 14px 8px;}
.l3card{pointer-events:auto;max-width:min(80vw,260px);background:#fff;border-radius:14px;padding:10px 12px;
  display:flex;align-items:center;gap:8px;box-shadow:0 6px 14px rgba(0,0,0,.3);color:#37414f;font-weight:700;
  font-size:clamp(12px,3.2vw,14px);line-height:1.3;border:2px solid #ffd9e6;
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;}
.l3card-ico{font-size:1.5rem;flex:0 0 auto;}
.l3card-ico.hasimg{width:clamp(52px,13vw,70px);height:clamp(52px,13vw,70px);
  background-size:contain;background-position:center;background-repeat:no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));}
.l3card-ico.hasimg .l3card-emoji{display:none;}
.l3card.l3dragging{z-index:88;cursor:grabbing;transform:scale(1.05);box-shadow:0 12px 26px rgba(0,0,0,.45);}
.l3card.placed{opacity:0;transform:scale(.4);transition:all .18s ease;}
/* 三福對象（家庭/老師/社區） */
#l3targets{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;gap:clamp(8px,3.5vw,22px);
  justify-content:center;align-items:flex-end;padding:8px 10px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(30,18,38,0),rgba(30,18,38,.42));}
.l3target{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;cursor:pointer;transition:transform .18s ease;}
.l3target-hit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% + 30px);height:calc(100% + 30px);border-radius:20px;}
.l3target-ico{width:clamp(96px,15vw,230px);height:clamp(96px,15vw,230px);border-radius:22px;   /* 硬指標：1366 時 ≥14% 畫面寬 */
  display:flex;align-items:center;justify-content:center;font-size:clamp(2rem,7vw,3rem);
  background:rgba(255,255,255,.92);box-shadow:0 6px 14px rgba(0,0,0,.3);transition:box-shadow .2s,transform .18s;}
.l3target-nm{font-size:clamp(11px,2.8vw,14px);font-weight:800;background:rgba(30,18,38,.5);padding:2px 10px;border-radius:999px;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);white-space:nowrap;}
.l3target.lit{transform:translateY(-4px);}
.l3target.lit .l3target-ico{box-shadow:0 0 18px rgba(255,210,120,.95),0 6px 14px rgba(0,0,0,.3);}
/* 圖片版（去背可愛圖；載入失敗才退回 emoji） */
.l3target-ico.hasimg{background-size:96% auto;background-position:center;background-repeat:no-repeat;}
.l3target-ico.hasimg .l3target-emoji{display:none;}
/* 結算 */
#l3end{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(40,20,44,.42),rgba(20,12,28,.64));}
#l3end .card{background:var(--panel-dark);color:#fff;max-height:92vh;overflow-y:auto;}
#l3end .card h1{color:#fff;}
@media (max-aspect-ratio:1/1){ #l3items{bottom:168px;padding-top:92px;} #level3.a2 #l3items{bottom:10px;padding-top:0;} }

/* ===================================================================
   關3 升級：三幕 + school_grad 背景 + 柔光底 + 跨海送信 + 慶典 + 手感
   =================================================================== */
/* 背景圖（載到才覆蓋 #l3sky 漸層 fallback） */
#l3bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:brightness(calc(.94 + var(--heal)*.12)) saturate(calc(.95 + var(--heal)*.3));transition:filter 1.2s ease;}
/* 遊戲件後面的柔光底＋暗角，確保主體清楚、中央舞台乾淨 */
#l3soft{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 52% at 50% 47%, rgba(255,250,238,.20), rgba(255,250,238,0) 70%);
  box-shadow:inset 0 0 150px 46px rgba(38,20,42,.30);}
/* 海面波光（第二幕較明顯） */
#l3sea{position:absolute;left:0;right:0;top:30%;height:8%;z-index:2;pointer-events:none;opacity:.18;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 14px, rgba(255,255,255,.3) 14px 17px);
  animation:l3sea 5s linear infinite;}
#level3.a2 #l3sea{opacity:.5;}
@keyframes l3sea{0%{background-position:0 0;}100%{background-position:60px 0;}}
/* 隱藏彩蛋（櫻花樹） */
#l3egg{position:absolute;left:4%;top:26%;width:64px;height:96px;z-index:4;cursor:pointer;}
/* 海平線上的「花蓮」發光點 */
#l3hualien{position:absolute;z-index:6;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;}
.l3hu-ring{position:absolute;left:50%;top:6px;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(180,225,255,.85),rgba(150,200,255,0) 72%);
  box-shadow:0 0 22px 7px rgba(150,205,255,.8);animation:pinpulse 1.7s ease-in-out infinite;}
.l3hu-dot{position:relative;width:12px;height:12px;border-radius:50%;background:#eaf6ff;box-shadow:0 0 12px #bfe2ff;}
.l3hu-nm{margin-top:6px;font-size:12px;font-weight:800;color:#fff;background:rgba(30,40,70,.55);padding:2px 9px;border-radius:999px;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
#l3hualien.arrive .l3hu-ring{animation:l3huArrive .7s ease;}
@keyframes l3huArrive{0%{box-shadow:0 0 22px 7px rgba(150,205,255,.8);}45%{box-shadow:0 0 50px 20px rgba(210,240,255,1);}100%{box-shadow:0 0 22px 7px rgba(150,205,255,.8);}}
/* 第二幕的信（甩/拖都能送）：信放大、白邊縮窄（圖占滿卡面）、整塊沉到底部——花蓮星全程可見 */
.l3letter{pointer-events:auto;width:clamp(150px,15vw,212px);height:clamp(150px,15vw,212px);border-radius:18px;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,0,0,.3);border:2px solid #ffe0b0;
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;}   /* 硬指標：1366 時 ≥14% 畫面寬 */
.l3letter-ico{font-size:clamp(3.4rem,10vw,4.6rem);}
.l3letter-ico.hasimg{width:clamp(138px,13.9vw,196px);height:clamp(138px,13.9vw,196px);
  background-size:contain;background-position:center;background-repeat:no-repeat;}   /* 圖示占格內 ≥92% */
.l3letter-ico.hasimg .l3letter-emoji{display:none;}
.l3letter.l3dragging{z-index:88;cursor:grabbing;transform:translate(-50%,-50%) scale(1.08);box-shadow:0 12px 26px rgba(0,0,0,.45);}
#level3.a2 #l3items{align-content:flex-end;padding:0 14px 12px;bottom:10px;}
/* 投遞短句：孩子口吻、輪播浮現 2.8 秒；固定在信堆上方、遠離花蓮星 */
.l3note{position:fixed;left:50%;bottom:calc(176px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  max-width:min(80vw,430px);background:#fffdf4;color:#5a4a33;font-weight:800;font-size:clamp(13px,3.4vw,15.5px);line-height:1.4;
  padding:9px 18px;border-radius:14px;border:2px solid #ffe0b0;box-shadow:0 8px 20px rgba(0,0,0,.28);
  text-align:center;animation:l3note 2.8s ease both;pointer-events:none;}
@keyframes l3note{0%{opacity:0;transform:translateX(-50%) translateY(10px) rotate(-1deg);}12%,80%{opacity:1;transform:translateX(-50%) translateY(0) rotate(0);}100%{opacity:0;transform:translateX(-50%) translateY(-8px);}}
/* 拖尾光 / 學士帽 */
.l3trail{position:fixed;z-index:84;width:11px;height:11px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#fff,rgba(180,220,255,0));animation:l3trail .5s ease-out forwards;}
@keyframes l3trail{to{opacity:0;transform:translate(-50%,-50%) scale(.3);}}
.l3cap{position:fixed;z-index:86;font-size:26px;pointer-events:none;transform:translate(-50%,-50%);animation:l3cap 1.4s ease-out forwards;}
@keyframes l3cap{0%{opacity:1;transform:translate(-50%,-50%);}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-260px) rotate(40deg);}}
/* 手感：很短的畫面震動 + 目標 Q 彈 */
#l3scene.shake{animation:l3shake .3s ease;}
@keyframes l3shake{0%,100%{transform:translate(0,0);}25%{transform:translate(-4px,2px);}50%{transform:translate(3px,-2px);}75%{transform:translate(-2px,1px);}}
.l3target.bounce .l3target-ico{animation:l3bounce .5s ease;}
@keyframes l3bounce{0%,100%{transform:scale(1);}40%{transform:scale(1.2);}70%{transform:scale(.96);}}
/* 尊重 prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  .l3petal,.l3kid,#l3sea,.l3hu-ring{animation:none!important;}
  #l3scene.shake{animation:none!important;}
}

/* ===================================================================
   關4 · 互助站「最後兩份」（resourceful_helper：問→湊→稀缺斡旋）
   無計分／無好壞／回饋一致；稀缺看得見；婉拒不懲罰。
   =================================================================== */
#level4{position:fixed;inset:0;z-index:10;display:none;overflow:hidden;background:#2c2433;}
#l4scene{position:absolute;inset:0;z-index:0;overflow:hidden;}
#l4bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;
  background-image:linear-gradient(180deg,#5b4a63 0%,#7a6a72 52%,#caa98e 100%);filter:brightness(1.02) saturate(1.0);transition:filter 1.2s ease;}
#l4soft{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 58% at 50% 40%, rgba(255,248,236,.16), rgba(255,248,236,0) 72%);
  box-shadow:inset 0 0 170px 60px rgba(28,18,34,.3);}
#level4.warm #l4bg{filter:brightness(1.08) saturate(1.12);}
/* 頂列 / 標題 / 離開 */
#l4top{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;justify-content:center;align-items:center;padding:10px 12px;pointer-events:none;}
#l4title{pointer-events:auto;background:rgba(36,22,44,.58);color:#fff;font-weight:800;font-size:14px;padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#l4leave{position:fixed;left:calc(12px + env(safe-area-inset-left));top:calc(54px + env(safe-area-inset-top));z-index:95;pointer-events:auto;background:rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:7px 13px;font-weight:800;font-size:13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
/* flex 直欄主容器：物資→客人→關懷包，矮畫面也排得下，且不擋頂列/HUD */
/* 版面原則（明暺拍板）：場景構圖不動、不縮；介面直接「浮」在畫面上層（ghud 玻璃風）。
   #l4main 只當定位容器；場景(#l4guest)吃滿整區，物資列/關懷包列都是絕對定位浮層。 */
#l4main{position:absolute;left:0;right:0;top:calc(90px + env(safe-area-inset-top));bottom:0;z-index:18;}
/* 上方：物資浮層（固定大格、圖填滿；放不下 → 換行成兩排、整排置中；格子絕不等比縮小） */
#l4pantryWrap{position:absolute;left:0;right:0;top:0;z-index:24;padding:0 10px;pointer-events:none;}
#l4pantryWrap>*{pointer-events:auto;}
#l4pantryHead{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 4px 4px;}
#l4pantryLabel{color:#fff;font-weight:800;font-size:12.5px;text-shadow:0 1px 3px rgba(0,0,0,.4);}
#l4pantry{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-content:flex-start;
  max-width:min(96vw,1560px);margin:0 auto;padding:2px;}
.l4item{flex:0 0 auto;width:80px;background:rgba(255,255,255,.94);border-radius:14px;padding:7px 6px 6px;
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;border:2px solid transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.28);transition:transform .12s,box-shadow .18s;position:relative;}
.l4item:active{transform:scale(.95);}
.l4item .l4ico{font-size:2rem;line-height:1.15;}
.l4item .l4ico.l4img{width:66px;height:52px;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:9px;}
.l4item .l4nm{font-size:10.5px;font-weight:800;color:#43373f;text-align:center;line-height:1.12;}
.l4item.fresh{border-color:#bfe3a8;}
.l4item.baby{border-color:#f3c6d8;}
.l4item.gone{opacity:.32;pointer-events:none;filter:grayscale(.75);}
.l4item .l4cnt{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:9px;
  background:#3a2c44;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 2px 5px rgba(0,0,0,.3);}
.l4item.fresh .l4cnt{background:#2f6b1f;}
.l4item.gone .l4cnt{background:#7a7280;}
/* 場景層：吃滿整區（物資/關懷包是浮層，不佔版面、不擠壓場景） */
#l4guest{position:absolute;inset:0;z-index:14;}
/* Community Care 拱門框：左側、放大、往下延伸蓋住背景盆栽；外緣只羽化「上＋兩側」，底座保持實心覆蓋背景 */
#l4guestArt{position:absolute;left:0;top:-3%;bottom:-7%;aspect-ratio:1024/1536;
  background-size:100% 100%;background-position:center;background-repeat:no-repeat;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.3));
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0),#000 15%),linear-gradient(to right,rgba(0,0,0,0),#000 9%,#000 91%,rgba(0,0,0,0));
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0),#000 15%),linear-gradient(to right,rgba(0,0,0,0),#000 9%,#000 91%,rgba(0,0,0,0));
  mask-composite:intersect;}
/* 客人圖：拉近(cover)裁掉自身背景的拱門；拱形(圓頂)遮罩沿弧線無縫、重羽化(~24%)；邊緣暖光融色(::after) */
#l4guestFig{position:absolute;left:16%;right:16%;top:19%;bottom:12%;
  background-size:cover;background-position:center 20%;background-repeat:no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20132%27%3E%3Cfilter%20id=%27f%27%20x=%27-25%25%27%20y=%27-25%25%27%20width=%27150%25%27%20height=%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation=%279%27/%3E%3C/filter%3E%3Cpath%20d=%27M10%20132L10%2062A40%2056%200%200%201%2090%2062L90%20132Z%27%20fill=%27white%27%20filter=%27url(%23f)%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20132%27%3E%3Cfilter%20id=%27f%27%20x=%27-25%25%27%20y=%27-25%25%27%20width=%27150%25%27%20height=%27150%25%27%3E%3CfeGaussianBlur%20stdDeviation=%279%27/%3E%3C/filter%3E%3Cpath%20d=%27M10%20132L10%2062A40%2056%200%200%201%2090%2062L90%20132Z%27%20fill=%27white%27%20filter=%27url(%23f)%27/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease;}
#l4guestFig::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 86% at 50% 42%, rgba(250,212,132,0) 52%, rgba(247,198,104,.5) 80%, rgba(243,185,82,.85) 100%);}
#l4guestFig.show{opacity:1;transform:translateY(0);}
/* 對話框置中偏上（避開左側拱門與下方關懷包浮層） */
#l4guestPanel{position:absolute;left:54%;top:45%;transform:translate(-50%,-50%);
  width:min(46vw,500px);max-height:56%;overflow-y:auto;background:rgba(28,18,34,.82);color:#fff;border-radius:16px;
  padding:13px 16px;box-shadow:0 12px 30px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
#l4guestName{font-size:12px;font-weight:800;color:#ffd98a;margin-bottom:4px;}
#l4dialogue{font-size:clamp(13px,3.3vw,15px);line-height:1.55;color:#f3eef7;white-space:pre-line;}
#l4dialogue .deep{display:block;margin-top:7px;color:#ffe9bd;}
#l4dialogue .sys{display:block;margin-top:8px;color:#bfe3a8;font-weight:700;}
.l4mini{margin-top:10px;background:rgba(255,236,180,.14);color:#ffe9bd;border:1px solid rgba(255,224,150,.4);
  border-radius:999px;padding:7px 14px;font-weight:800;font-size:12.5px;cursor:pointer;}
.l4mini:active{transform:scale(.97);}
/* 下方：關懷包玻璃浮層（ghud 風）——z-index 高於拱門，直接蓋在門檻/畫面下緣上，永遠看得到 */
#l4bagWrap{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:30;width:min(96vw,900px);padding:10px 14px 12px;border-radius:20px;
  background:rgba(18,24,44,.55);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.35);}
#l4bagHead{color:#fff;font-weight:800;font-size:13px;margin:0 2px 6px;text-shadow:0 1px 3px rgba(0,0,0,.4);}
#l4bag{display:flex;flex-wrap:wrap;gap:8px;min-height:48px;max-height:20vh;overflow-y:auto;align-content:flex-start;
  background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.22);border-radius:14px;padding:8px;}
.l4pin{display:flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:7px 10px 7px 12px;
  font-size:14px;font-weight:800;color:#43373f;box-shadow:0 3px 8px rgba(0,0,0,.26);}
.l4pin>span:first-child{font-size:20px;line-height:1;}
.l4pin .l4pimg{width:34px;height:28px;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:7px;}
.l4pin .x{cursor:pointer;color:#b06a6a;font-weight:900;font-size:16px;padding:0 3px;}
.l4bagEmpty{color:#d7cadf;font-size:13px;font-weight:600;padding:6px 4px;}
#l4actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;justify-content:flex-end;}
.l4act{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:999px;
  padding:11px 18px;font-weight:800;font-size:14px;cursor:pointer;transition:background .18s,transform .12s;}
.l4act:active{transform:scale(.98);}
.l4act[disabled]{opacity:.4;pointer-events:none;}
.l4act.give{background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#4a3007;border-color:transparent;}
.l4act.broker{background:rgba(255,236,180,.18);color:#ffe9bd;border-color:rgba(255,224,150,.5);}
/* 自發善意 toast：沿用 #toast 視覺；浮在關卡各浮層之上（z35＞bag 30、＜scarcity 38） */
#l4toast{position:absolute;left:50%;top:24%;z-index:35;
  background:rgba(14,18,38,.86);color:#fff;padding:13px 18px;border-radius:15px;font-weight:800;
  font-size:15px;max-width:86%;text-align:center;line-height:1.5;
  border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transform:translate(-50%,-8px);opacity:0;transition:all .3s;pointer-events:none;}
#l4toast.show{opacity:1;transform:translate(-50%,0);}
/* 結算（沿用其他關的暗底卡片） */
#l4end{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(40,20,44,.46),rgba(18,10,26,.66));}
#l4end .card{background:var(--panel-dark);color:#fff;max-height:92vh;overflow-y:auto;}
#l4end .card h1{color:#fff;}
#l4endQ{color:#fdf6ff;font-weight:700;margin-top:10px;}
.l4hook{margin-top:10px;font-size:12.5px;color:#cdbcd6;font-style:italic;line-height:1.5;}
/* 稀缺時刻：必經的小覆蓋層（跳不過；唯一出路是第三條路＝跟媽媽聊聊） */
#l4scarcity{position:absolute;inset:0;z-index:38;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(180deg,rgba(30,16,34,.5),rgba(16,9,22,.72));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.l4sc-card{max-width:min(92vw,460px);background:rgba(30,20,38,.96);color:#fff;border-radius:18px;padding:20px 18px 16px;
  text-align:center;box-shadow:0 16px 44px rgba(0,0,0,.5);border:1px solid rgba(255,224,150,.28);}
.l4sc-line{font-size:clamp(14px,3.6vw,16px);font-weight:700;line-height:1.6;color:#fdf2dd;margin-bottom:14px;}
/* 三個等價選項（無好壞色；全部都好、回饋一致） */
#l4scOpts{display:flex;flex-direction:column;gap:9px;}
#l4scOpts .l4act{width:100%;text-align:center;line-height:1.4;font-size:13.5px;padding:12px 14px;}
.l4sc-result{margin-top:12px;font-size:13.5px;font-weight:700;color:#bfe3a8;line-height:1.5;}
/* 直式窄畫面：拱門縮居左下、對白改上方全寬（物資/關懷包浮層照舊） */
@media (max-aspect-ratio:3/4){
  #l4guestArt{top:auto;bottom:0;height:52%;aspect-ratio:1024/1536;}
  #l4guestPanel{left:50%;top:36%;width:min(94vw,520px);max-height:34%;}
  .l4item{width:68px;}
  .l4item .l4ico.l4img{width:54px;height:42px;}
  #l4pantry{max-height:30vh;overflow-y:auto;}
}

/* ===================================================================
   各關「怎麼玩＋獎勵」小字 + hub「？」說明面板
   =================================================================== */
.howline{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;color:#ffe2a6;line-height:1.45;}
#hubHelp{position:fixed;z-index:81;top:calc(54px + env(safe-area-inset-top));left:calc(56px + env(safe-area-inset-left));
  width:38px;height:38px;border-radius:50%;background:rgba(18,24,44,.55);color:#fff;font-size:17px;font-weight:800;
  border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
#helpPanel{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,10,22,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.help-card{background:rgba(18,22,40,.97);color:#fff;border-radius:18px;padding:18px 18px 14px;max-width:360px;width:92%;
  box-shadow:0 12px 40px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12);text-align:center;}
.help-card h3{font-size:17px;margin-bottom:10px;color:#ffd98a;font-weight:800;}
.help-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;text-align:left;}
.help-card li{font-size:13.5px;line-height:1.45;color:#e7ecf7;}
.help-card #helpClose{margin-top:14px;width:100%;padding:11px;border-radius:999px;font-weight:800;font-size:15px;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));color:#4a3007;}

/* ===================================================================
   全三關共用「做對手感」：畫面微震 + 桶子 Q 彈（reuse L3 keyframes）
   =================================================================== */
.juice-shake{animation:l3shake .3s ease;}
.l2bin.bounce .l2bin-ico{animation:l3bounce .5s ease;}
@media (prefers-reduced-motion:reduce){
  .juice-shake{animation:none!important;}
}

/* ================= 手機版面熱修（只動版面/斷點/圖層；桌面 >900px 一條都不吃到） ================= */
@media (max-width:900px){
  /* 關1：線索泡泡放大到 44px 可點面積（JS 夾取已含光暈餘量；縮擠時由分離步彼此推開） */
  .clue{width:44px;height:44px;margin:-22px 0 0 -22px;font-size:20px;}
  .clue.subtle{width:40px;height:40px;margin:-20px 0 0 -20px;font-size:17px;}
  /* 關4：桌面三塊絕對定位浮層（物資架/對話/關懷包）在窄螢幕互疊 → 改直向流式。
     物資架單列橫向捲動；對話與選項在流式中永遠完整可見、z 最高。 */
  #l4main{display:flex;flex-direction:column;gap:8px;overflow-y:auto;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));}
  #l4pantryWrap{position:static;order:1;flex:0 0 auto;}
  #l4pantry{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:2px 8px 10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;}
  .l4item{width:76px;flex:0 0 auto;}
  #l4guest{position:relative;inset:auto;order:2;flex:0 0 auto;}
  #l4guestArt{position:relative;left:auto;top:auto;bottom:auto;width:min(44vw,210px);
    aspect-ratio:1024/1536;margin:-4px auto 0;}
  #l4guestPanel{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:none;
    max-height:none;margin:4px 10px 0;z-index:40;}
  #l4bagWrap{position:relative;left:auto;transform:none;bottom:auto;order:3;width:auto;margin:0 8px;}
  .l4act{padding:13px 18px;}
}
/* 橫向矮螢幕：全域 flash 帶上移閃開頂欄字；關4 客人圖縮小減少捲動 */
@media (max-height:520px){
  .flash{top:11%;}
  #l4guestArt{width:118px;}
}
/* 手機：地圖圖釘只有圓點吃點擊（節點盒/標籤不再擋到鄰近的點），
   ::after 隱形熱區把可點面積擴到 ≥44px，視覺大小與光暈不變 */
@media (max-width:900px){
  #pinLayer .pinnode{pointer-events:none;}
  #pinLayer .pinnode .dot{pointer-events:auto;position:relative;}
  #pinLayer .pinnode .dot::after{content:'';position:absolute;left:50%;top:50%;
    width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;}
  /* 語言鈕：可點面積 ≥44px 用透明 ::after 熱區撐開，視覺高度維持 ~31px（底緣 ~43），
     這樣下移到 y48 的關卡標題才不會被撐高的語言鈕壓到 */
  .lang button{position:relative;}
  .lang button::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;}
  #msHandle{min-height:44px;display:flex;align-items:center;}
  .mail-close{min-height:44px;}
  #panelTab{width:76px;height:32px;top:-32px;}
}
/* 手機直式：時數(左上角)與語言鈕(右上角)佔住上緣兩角，置中的關卡標題在同一
   水平帶會被左右夾住而重疊 → 標題整條下移到 HUD 列下方（各自一條、不再重疊），
   並限寬避開右上角銅板。放在檔尾以壓過各關 #lXtop 的 padding 基準；純版面，不改 header 結構。 */
@media (max-width:600px){
  #hudBar{padding-top:48px;}
  #l2top,#l3top,#l4top{padding-top:48px;}
  #l2title,#l3title,#l4title{max-width:min(74vw,260px);text-align:center;}
}