/* ark_candy_path.css — 8/11 由 ARK_CANDY_PATH.html 抽出的 <style>(原封不動) */
 *{box-sizing:border-box;margin:0;padding:0;user-select:none}
 /* ☀️ 白天配色(預設=通用)
    7/13 兔兔:淺藍改深一點的藍、屋內場景同步、草地改深一點的綠——
    糖果屋不是歡樂的,剛開始都有點陰鬱困難,太明亮太奇怪
    7/13 二修:還是太亮→全套再降一階=莫蘭迪灰調(低飽和帶灰),深山裡的白天;
    糖果反過來發亮=希望(gum/lolli 加光暈,窗光/招牌照舊亮) */
 /* 7/13 三修:①「新糖果屋」白框=白text-shadow→拿掉 ②上排淺米chip像白框→深底淺字
    ③step/對話卡粉白太亮→深灰紫卡 ④路太亮沙色→莫蘭迪深山石徑(仍比草亮一階=看得出路) */
 /* 7/14 四修:白天再暗一階(她:還是太亮)+切換鈕色離開粉紅 */
 body{--bg:linear-gradient(180deg,#4d6a80 0%,#71899c 38%,#9a9077 100%);
   --txt:#5a4550;--h1:#e0578f;--h1sh:none;--sub:#dcc8ce;--accent:#e0578f;--tg-on:#a5673c;
   --scene:linear-gradient(180deg,#35516b 0%,#455e50 58%,#3c5427 100%);
   --ground:linear-gradient(180deg,#425e2f,#324a22);
   --road:#7d7660;--road-edge:#544d42;--road-line:#b57e93;--smoke:rgba(255,255,255,.8);
   --roof:#c46e84;--icing:#efe6d8;--wall:#a2743f;--wallglow:rgba(255,240,210,.3);--wallshade:rgba(70,40,20,.22);
   --win:radial-gradient(circle,#fff2b0,#ffcf5a);--winbord:#fff;--door:#57a98a;--doorbord:#fff;
   --jarn:#c07a3a;
   --bubble-bg:#453f4c;--bubble-bord:#6d6474;--bubble-txt:#ece2e6;--bubble-who:#e0b8a4;--ava-bg:rgba(255,220,200,.15);
   --step-bord:#c98ba0;--step-bg:#474050;--step-sh:0 6px 18px rgba(0,0,0,.25);
   --stepnum:#b0a0ac;--stepbig:#f5ead8;--stepbig-sh:0 0 14px rgba(255,170,70,.55),0 0 30px rgba(255,140,60,.24);--stepwhy:#c9b4be;
   --go-bg:#a5673c;--go-bord:#7d4a28;--go-txt:#fff3e4;--go-sh:0 3px 0 #7d4a28;--stay-bord:#8d8078;--stay-txt:#c9b49e;
   --panic-bg:#ff8fb4;--panic-bord:#fff;--panic-txt:#fff;
   --arrive:#e8b060;--mem:#6f5f66;--mem-bord:#a89a80;--restart-bord:#8d7c84;--restart-txt:#5f4f58;
   --pill-on-bord:#a5673c;--pill-on-bg:#a5673c;--pill-on-txt:#fff3e4;--pill-on-sh:none;
   --pill-off-bord:#5f7488;--pill-off-bg:rgba(25,35,45,.22);--pill-off-txt:#d9dfe6;
   --trk-on-bord:#e8a94a;--trk-on-bg:rgba(232,169,74,.18);--trk-on-txt:#ffd28a;
   --trk-off-bord:#8fa0ae;--trk-off-txt:#d3dce3;--tg-bg:rgba(25,35,45,.28);
   background:var(--bg);color:var(--txt);font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;
   min-height:100vh;overflow-x:hidden;transition:filter .8s,background .5s,color .5s}
 /* 🌙 夜晚配色(對應故事裡月光的石子;恐慌症徑之後可預設走這套) */
 body.night{--bg:linear-gradient(180deg,#3a2438 0%,#241826 55%,#1a1420 100%);
   --txt:#f4e6ea;--h1:#ffb3d9;--h1sh:none;--sub:#b89aa0;--accent:#ffb3d9;--tg-on:#c05a90;
   --scene:linear-gradient(180deg,#2e2038 0%,#281a2c 55%,#231826 78%,#2a1e24 100%);
   --ground:linear-gradient(180deg,#33283a,#241a24);
   --road:#4a3a52;--road-edge:#2b2236;--road-line:#c96b7a;--smoke:rgba(230,220,235,.5);
   --roof:#c96b7a;--icing:#ffe9d6;--wall:#7a5540;--wallglow:rgba(255,220,170,.18);--wallshade:rgba(0,0,0,.28);
   --win:radial-gradient(circle,#ffe9b0,#e8b060);--winbord:#ffe9d6;--door:#c96b7a;--doorbord:#ffe9d6;
   --jarn:#ffd9a8;
   --bubble-bg:rgba(255,255,255,.05);--bubble-bord:#6a4a6c;--bubble-txt:#ecd8ec;--bubble-who:#e0a8c8;--ava-bg:rgba(255,179,217,.16);
   --step-bord:#ffb3d9;--step-bg:rgba(255,179,217,.07);--step-sh:0 0 18px rgba(255,179,217,.15);
   --stepnum:#9a80a0;--stepbig:#fff0f8;--stepbig-sh:0 0 18px rgba(255,179,217,.75),0 0 40px rgba(255,179,217,.3);--stepwhy:#c8a8c8;
   --go-bg:rgba(255,138,192,.14);--go-bord:#c05a90;--go-txt:#ffb3d9;--go-sh:none;--stay-bord:#6a4a6c;--stay-txt:#c8a8c8;
   --panic-bg:#3a2434;--panic-bord:#d08a9c;--panic-txt:#ffc8d4;
   --arrive:#ffe0b0;--mem:#6a5a6c;--mem-bord:#3a2a3c;--restart-bord:#4a3a4c;--restart-txt:#8a7a8c;
   --pill-on-bord:#ffb3d9;--pill-on-bg:rgba(255,179,217,.12);--pill-on-txt:#ffb3d9;--pill-on-sh:none;
   --pill-off-bord:#6a4a6c;--pill-off-bg:transparent;--pill-off-txt:#c8a8c8;
   --trk-on-bord:#e8c866;--trk-on-bg:rgba(232,200,102,.12);--trk-on-txt:#ffd9a8;
   --trk-off-bord:#4a3a4c;--trk-off-txt:#9a80a0;--tg-bg:rgba(255,255,255,.08)}
 body.calm{filter:sepia(.3) brightness(.75)}
 /* 7/28 兔兔五修:「測測看整篇字都在手機一眼望去範圍內否」→ 標題這一段能省的都省(房子高度不動) */
 #w{max-width:520px;margin:0 auto;padding:10px 14px 50px;text-align:center}
 h1{font-size:21px;color:var(--h1);letter-spacing:3px;font-weight:700;text-shadow:var(--h1sh)}
 .sub{font-size:12px;color:var(--sub);margin:3px 0 6px;line-height:1.6}
 /* 🏠 7/28 兔兔(candy1.jpg):「打開一堆字跟一堆按鈕,可是房子都沒看見」
    → ①場景搬到最上面=打開那秒就看到整棟糖果屋 ②按鈕照野外那樣集中成一組組(平常收起來)
      ③白天夜晚做成房邊小鈕 ④選動物整合進圖內(點圖上的動物換一隻) */
 .tgmini{position:absolute;right:9px;top:9px;z-index:8;display:flex;gap:4px}
 .tgmini button{border:none;border-radius:13px;padding:4px 9px;font-family:inherit;font-size:11.5px;font-weight:900;
   letter-spacing:1px;cursor:pointer;background:rgba(20,14,26,.42);color:#fff;backdrop-filter:blur(2px);
   box-shadow:0 1px 4px rgba(0,0,0,.3);transition:.25s}
 .tgmini button.on{background:var(--tg-on);color:#fff3e4}
 /* 圖內換動物:點走路的動物→浮在場景下緣的一排 */
 /* 提示放腳下:頭上那位置被「點下一顆糖」佔著,兩個字會疊在門口。
    ⚠️ 7/28 兔兔:它以前掛在 .walker(人+動物一整組)上 → 置中會落在**人**身上;
       現在掛在 .budwrap(只包動物)裡,50% 才是動物的正中央 */
 .budwrap{position:relative;display:inline-block;vertical-align:-8px;line-height:0}
 .budwrap canvas{display:block}
 /* 🆕 7/30 兔兔:「字遮糖果路線 所以可以畫一個箭頭 指向動物 說可換動物
    這樣在動物頭右上就比較不會擋住了」→ 提示從**腳下**搬到**頭的右上**(bottom:100%+left:100%
    ＝貼著動物那塊 canvas 的右上角),箭頭往左下指回動物。
    ⚠️ 場景是 overflow:hidden,動物走到右邊時右上會被裁掉 → JS 量到裝不下就加 .mir
       鏡像到左上角(箭頭同時換成指右下的那顆)。 */
 #budhint{position:absolute;bottom:100%;left:100%;margin:0 0 2px 1px;
   letter-spacing:1px;pointer-events:none;white-space:nowrap;font-weight:400;text-align:center}
 #budhint.mir{left:auto;right:100%;margin:0 1px 2px 0}
 /* 箭頭貼在**靠動物那一側**才看得出在指牠:右上版箭頭在左(↙)、鏡像版在右(↘) */
 #budhint .ar{font-size:12px;line-height:1;letter-spacing:0;vertical-align:-1px}
 #budhint .ar.r,#budhint.mir .ar.l{display:none}
 #budhint.mir .ar.r{display:inline}
 .walker{cursor:pointer}
 #budpop{position:absolute;left:8px;right:8px;bottom:8px;z-index:9;display:none;
   background:rgba(24,16,30,.88);border:1.5px solid var(--pill-on-bord);border-radius:13px;padding:7px 8px;backdrop-filter:blur(3px)}
 #budpop.on{display:block}
 #budpop .bt{font-size:10.5px;color:#e8d8ea;letter-spacing:1px;margin-bottom:5px}
 #budpop .row{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
 /* 控制台:平常只露「現在走的路 / 走多久」兩顆,點開才是一組組的按鈕 */
 #ctrl{margin:2px 0 6px}
 .cbtn{border:2px solid var(--pill-off-bord);background:var(--pill-off-bg);color:var(--pill-off-txt);
   border-radius:16px;padding:5px 13px;font-family:inherit;font-size:12.5px;cursor:pointer;margin:0 3px}
 .cbtn.open{border-color:var(--pill-on-bord);background:var(--pill-on-bg);color:var(--pill-on-txt)}
 /* 7/28 兔兔四修(candy1.jpg 圈起來標 A/B):那兩顆鈕搬進場景的左右下角空白處,
    不再自己佔一整排 → 省掉一排的高度,房子跟卡片才靠得近。
    ⚠️ class 仍留 .cbtn:syncCtrl()/closePanels() 都靠它認人 */
 .cmini{position:absolute;bottom:14px;z-index:8;margin:0;padding:4px 10px;font-size:11.5px;
   border-width:1.5px;background:rgba(20,14,26,.52);color:#fff;backdrop-filter:blur(2px);
   box-shadow:0 1px 4px rgba(0,0,0,.35);max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .cmini.l{left:8px}
 .cmini.r{right:8px}
 /* 7/28 兔兔五修(candy1.jpg 圈 A):「走多久 這個調整上去 白天晚上下面 選一次而已」
    → 走多久只選一次,不佔場景下緣;搬到 ☀️/🌙 那顆下面。hudR 順勢再往下讓位。 */
 #trkbtn{top:41px;bottom:auto}
 .cmini.open{background:var(--pill-on-bg);color:var(--pill-on-txt)}
 /* 🆕 7/31 兔兔:「那個走哪條 不夠清楚 一般人預設是出門 但其實我們有很多可以選
    所以應該加上呼吸發光 黃色字體」
    → 糖果屋=安全屋:預設 🚪出門 只是 12 條裡的一條,一般人不知道還有撐住/放手/止血…那幾條 ⟹
      這顆要自己喊「我可以點」。黃字+呼吸發光只給 `#pathbtn` 一顆(她指名的是走哪條,走多久不動)。
    ⚠️ 面板打開了就停(任務達成再閃=吵);id 選擇器贏得過 .cmini.open,所以開著的時候字還是黃的。
    ⚠️ 發光只用 box-shadow/text-shadow,不加 transform ⟹ 不會把鈕撐大去壓到第 9 顆糖。 */
 /* ⚠️ 一行改兩行:這顆鈕壓在糖上面。長徑名(💔 感情·放手…)剛好把單行撐到上限 165px ⟹ 鈕右緣 176,
    而第 8 顆糖的框從 x125.3 起、第 9 顆從 x154.6 起 —— **單行不管擺哪個角、往上往下都閃不掉**
    (往上會蓋到路中間更糟)。⟹ 拆成兩行、寬度收到 30%(右緣 117 < 125.3),x 軸直接讓開,跟 y 無關最穩。
    這個壓到不是 7/31 才有的:12 條徑本來就都吃 XY_ROAD,其他 11 條一直壓著,只是預設走出門徑沒被看到。
    順帶:兩行不必再靠 ellipsis 擠字,徑名整個看得見=她說的「不夠清楚」也一起解掉。
    守門 test_candy_glow_731.py:**12 條徑逐條**比鈕跟九顆糖的框。 */
 #pathbtn{bottom:4px;max-width:30%;white-space:normal;line-height:1.4;text-align:center;
   color:#ffd84d;border-color:rgba(255,216,77,.72);animation:pathbr 2.6s ease-in-out infinite}
 @keyframes pathbr{0%,100%{box-shadow:0 1px 4px rgba(0,0,0,.35);
    text-shadow:0 1px 2px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 11px rgba(255,216,77,.5),0 1px 4px rgba(0,0,0,.35);
    text-shadow:0 0 9px rgba(255,216,77,.85),0 1px 2px rgba(0,0,0,.5)}}
 #pathbtn.open{animation:none;color:#ffd84d}
 /* 🆕 7/31 兔兔:「我點完出門 那是單獨的按紐 可是我點感情 一般使用者不知道下面子按鈕還要按了
    才能九顆糖 所以應該要給提示 看是寫在按分類哪個 或是發光呼吸按紐」→ 兩個都做:
    ①分類 tab 底下一行黃字寫明「再點下面那一顆」 ②還沒選的子鈕黃框呼吸(現在走的那條不呼吸)。
    ⚠️ 子鈕的邊框/字色是 JS 用 cssText 寫死的 inline style ⟹ 這裡一定要 !important 才蓋得過。 */
 #paths .phint{font-size:10.5px;color:#ffd84d;letter-spacing:.5px;text-align:center;margin:5px 0 6px}
 /* 🆕 7/31 二修 兔兔:「我覺得不用呼吸 因為有小字了」→ 子鈕的呼吸拿掉(小字已經講明白了,再閃就是噪音)。
    「但是點下去 應該要顯示點下的那個按紐 才跳去畫面繼續糖果 現在直接閃現去 有點奇怪」
    → 點下去先讓那顆**變成選中的樣子+彈一下**給人看見,面板停一下再收、再捲到場景(收的時機在 JS)。 */
 @keyframes pickpop{0%{transform:scale(1)}34%{transform:scale(1.17)}100%{transform:scale(1)}}
 #paths .grow button.justpick{animation:pickpop .42s ease-out}
 /* 底部多留一點:右下角「我慌了」是浮動鈕,不留白會壓到最後一排 */
 .cpanel{display:none;border:1.5px dashed var(--pill-off-bord);border-radius:14px;padding:7px 8px 18px;margin:6px 0 0}
 .cpanel.on{display:block}
 .grp{margin:3px 0 6px}
 .grp .gnm{font-size:10px;color:#d9c9a8;letter-spacing:2px;margin-bottom:3px}
 .grp .grow{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
 /* 7/28 兔兔二修:「打開以後選項應該像野外這樣打開一排,不要分很多排很雜亂」
    → 上面一排分類、下面一排該類的徑(野外 catbar+catp 那套),一次最多兩排 */
 .gtab{display:flex;gap:4px;justify-content:center;margin-bottom:7px}
 .gtab button{border:1.5px solid var(--pill-off-bord);background:transparent;color:var(--pill-off-txt);
   border-radius:14px;padding:3px 8px;font-family:inherit;font-size:11px;letter-spacing:.5px;cursor:pointer;opacity:.75}
 .gtab button.on{border-color:var(--trk-on-bord);background:var(--trk-on-bg);color:var(--trk-on-txt);opacity:1}
 /* 一類最多 4 條徑要塞同一排(390 寬):字跟內距都收一點,gap 4 */
 #paths .grow{gap:4px}
 #paths .grow button{font-size:10.5px!important;padding:4px 6px!important;white-space:nowrap}
 /* ☀️/🌙 白天夜晚切換鈕(舊的整排,7/28 改用房邊 .tgmini) */
 .toggle{display:flex;gap:8px;justify-content:center;margin:2px 0 10px}
 .tg{border:none;border-radius:18px;padding:7px 18px;font-family:inherit;font-size:13px;font-weight:900;
   letter-spacing:2px;cursor:pointer;background:var(--tg-bg);color:var(--sub);transition:.3s}
 /* 7/14 兔兔:深藍底配粉紅怪異→白天=暖棕金、夜晚=深玫瑰(--tg-on) */
 .tg.on{background:var(--tg-on);color:#fff3e4;box-shadow:0 3px 0 rgba(0,0,0,.18)}
 /* 其他按鈕都加粗,但比白天夜晚(900)細一點 */
 button{font-weight:700}
 /* ===== 場景:家+小徑 ===== */
 /* 🏠 7/29 兔兔選的那條路:「房子高度縮15%」=把第一屏差的那 60px 挖出來(另一條是講話搬到大框上面,她沒選)。
    做法:場景 400 -> 340,畫面本身包一層 .art 等比 scale(.85)。
    ⚠️ 為什麼不是直接改二十幾個 bottom:px——那樣房子/樹/路/花各縮各的,她調了七輪的構圖會跑掉。
    ⚠️ 橫向也會被 scale 吃掉 15% -> 左右會露出兩條背景色 => 把 .art 加寬到 118%、往左推 9%,
       縮完剛好回到滿版(left:% 的東西縮完還在原來的百分比,誤差 <0.5px)。
    ⚠️ 糖果/提示字/錢包那些**不放進 .art**(放進去字會一起縮 15%,六修她說過「字變小反而不清晰」),
       它們的 bottom 在 ark_candy_main.js 乘 SY。 */
 .scene{position:relative;height:340px;border-radius:14px;overflow:hidden;margin:2px 0 6px;
   background:var(--scene);transition:background .5s}
 .art{position:absolute;left:-9%;bottom:0;width:118%;height:400px;z-index:3;
   transform:scale(.85);transform-origin:50% 100%}
 .moon{position:absolute;right:12%;top:22px;font-size:38px;filter:drop-shadow(0 0 16px #ffe9a8)}
 .sun{position:absolute;right:12%;top:22px;font-size:38px;filter:drop-shadow(0 0 14px #ffe27a)}
 .cloud{position:absolute;font-size:32px;opacity:.92}
 body.night .sun,body.night .cloud{display:none}
 body:not(.night) .moon,body:not(.night) .sstar{display:none}
 .sstar{position:absolute;color:#fff;font-size:9px;animation:tw 5s infinite}
 @keyframes tw{50%{opacity:.15}}
 .ground{position:absolute;left:0;right:0;bottom:0;height:216px;background:var(--ground)}
 /* 7/6 兔兔改場景:屋=中景正中(童話構圖),路從門前蜿蜒到前景,屋後森林 */
 /* 7/7 house2.jpg:樹改自畫SVG圓冠大樹(emoji樹=各裝置字型不同→手機電腦長不一樣;SVG才一致),大樹圍繞屋 */
 body{--treetop:#3a6142;--treelite:#4e7c55;--trunk:#66452b}
 body.night{--treetop:#2c4638;--treelite:#3d5c48;--trunk:#4e3a30}
 .fir{position:absolute;z-index:0;filter:brightness(.82) saturate(.85)}
 .flower{position:absolute;z-index:2;filter:drop-shadow(0 1px 2px rgba(60,30,40,.35))}
 /* 7/7 兔兔手繪v4:屋身瘦卡通化+轉角度側面更明顯+④⑤落地窗看屋內+大煙囪+屋頂棒棒糖;白天黑夜結構不變只換色 */
 .house{position:absolute;left:calc(50% - 92px);bottom:172px;width:170px;height:190px;z-index:2;
   transform:scale(.62);transform-origin:50% 100%;/* 中景縮小=才像坐在森林前,屋頂不被裁 */
   filter:drop-shadow(0 7px 6px rgba(80,40,60,.28))}
 /* 側牆加寬=像轉了個角度;7/7 house2.jpg:透視修正=近邊高遠邊縮(原本反了),加寬放落地窗② */
 /* 7/7 house3.jpg:側牆降低=屋頂坡吃掉側牆上緣(原本牆太高屋頂太薄) */
 /* 7/7三修:側牆頂抬高(12→27斜線)=接住抬高後的屋簷,牆畫在側屋頂上面→牆頂線=簷線 */
 .wallside{position:absolute;left:170px;top:12px;width:60px;height:178px;background:var(--wall);
   filter:brightness(.68);clip-path:polygon(0 0,100% 8.4%,100% 93.7%,0 100%);border-radius:0 6px 6px 0}
 /* 側屋頂平面(7/7 house3.jpg三修——兔兔:跟她的圖有極大落差):
    真房子屋脊是「近水平」往後退(只微降=透視),之前做成往下栽的陡坡=立體錯掉。
    現在=脊線(85,-116)→(240,-86)只降30px;後緣斜下到(252,33)=比側牆(230)多挑22px出簷;
    下緣潛到側牆頂下面(牆後畫=牆頂線就是簷線),牆外的簷尖露出小段厚度=卡通簷 */
 /* 7/11 house5.jpg:側屋頂提亮+加寬出簷+脊線亮邊=夜裡也看得出「左三角+右大斜面」的造型(她畫的②) */
 .roofside{position:absolute;left:85px;top:-116px;width:176px;height:149px;background:var(--roof);
   filter:brightness(.86);clip-path:polygon(0 0,92.8% 20.1%,100% 100%,65.9% 98%)}
 .roofside:after{content:"";position:absolute;left:0;top:0;width:164px;height:6px;
   transform-origin:0 0;transform:rotate(10.4deg);
   background:linear-gradient(rgba(255,244,228,.42),transparent)}
 /* 高尖屋頂(卡通=屋頂比屋身寬大):牆0~170,屋簷-25~195=左右各挑25px出來 */
 .roof{position:absolute;left:-25px;top:-116px;width:0;height:0;border-left:110px solid transparent;
   border-right:110px solid transparent;border-bottom:136px solid var(--roof);z-index:1}
 /* 閣樓拱窗①:巫婆跟湯住樓上 */
 .attic{position:absolute;left:55px;top:-64px;width:60px;height:52px;z-index:2;overflow:hidden;
   background:var(--win);border:3px solid var(--winbord);border-radius:28px 28px 8px 8px;
   box-shadow:0 0 22px rgba(255,220,150,.55)}
 /* 屋頂棒棒糖(原本牆邊那些搬上屋頂) */
 .rooflolli{position:absolute;z-index:2;line-height:1}
 /* 門前階梯⑥:接蜿蜒路 */
 .steps i{position:absolute;height:7px;background:var(--road);border:1.5px solid var(--road-edge);
   border-radius:4px;z-index:2}
 .steps i:nth-child(1){left:58px;width:54px;bottom:-6px}
 .steps i:nth-child(2){left:53px;width:64px;bottom:-13px}
 .steps i:nth-child(3){left:48px;width:74px;bottom:-20px}
 /* 側牆窗②(7/7 house2.jpg):跟④⑤一樣是落地窗,窗大直達地板,看得到家具 */
 /* 7/14 兔兔:屋內深咖啡調色系→暖玫瑰灰牆+蜜色木地板 */
 .winside{position:absolute;left:8px;bottom:12px;width:40px;height:110px;border-radius:9px 9px 0 0;overflow:hidden;
   background:radial-gradient(ellipse at 50% 28%,rgba(255,218,150,.58),transparent 72%),
     linear-gradient(#96707e 0 55%,#9a7048 55%);border:2px solid var(--winbord);font-size:14px;line-height:1;
   display:flex;align-items:flex-end;justify-content:center;gap:2px;padding-bottom:4px;
   box-shadow:inset 0 0 9px rgba(0,0,0,.3)}
 /* 7/11 兔兔 house5.jpg:白雪糖下方發亮 CANDY HOUSE 招牌+旁邊小糖果 */
 .sign{position:absolute;left:0;top:28px;width:170px;text-align:center;z-index:3;pointer-events:none;
   font-size:10px;font-weight:900;letter-spacing:2.5px;color:#fff;white-space:nowrap;
   text-shadow:0 0 6px rgba(255,150,190,.95),0 0 14px rgba(255,120,170,.75),0 1px 2px rgba(0,0,0,.4);
   animation:signglow 2.6s ease-in-out infinite}
 @keyframes signglow{50%{text-shadow:0 0 9px rgba(255,175,205,1),0 0 22px rgba(255,120,170,.95),0 1px 2px rgba(0,0,0,.4)}}
 .sign .sg{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 4px;vertical-align:1px;
   box-shadow:inset -1px -1px 2px rgba(0,0,0,.25),0 0 5px rgba(255,220,150,.85)}
 /* 糖霜白邊(薑餅屋,下緣做成一滴一滴垂下來的樣子) */
 .icing{position:absolute;left:-2px;top:8px;width:calc(100% + 4px);height:17px;background:var(--icing);
   border-radius:5px 5px 0 0;z-index:3;
   -webkit-mask:radial-gradient(9px 11px at 11px 17px,transparent 96%,#000 98%) 0 100%/22px 17px repeat-x;
           mask:radial-gradient(9px 11px at 11px 17px,transparent 96%,#000 98%) 0 100%/22px 17px repeat-x}
 /* 牆:左亮右暗=假立體 */
 .wall{position:absolute;inset:10px 0 0 0;background:var(--wall);border-radius:0 0 8px 8px;
   box-shadow:inset -18px 0 26px var(--wallshade),inset 0 0 40px var(--wallglow)}
 /* 煙囪+冒煙(暖暖的家):7/7 house2.jpg=煙囪加長高過屋脊,煙從囪口正上方冒
    7/7 house3.jpg二修:煙囪往內移到「側屋頂坡上」(原x116在前屋頂坡=像漂浮在前簷),
    z-index降到前屋頂後面=基座埋進坡裡,側面色調略暗 */
 .chimney{position:absolute;left:152px;top:-138px;width:28px;height:80px;background:var(--wall);
   border-radius:4px;box-shadow:inset -7px 0 10px var(--wallshade);z-index:0;filter:brightness(.86)}
 .chimney:after{content:"";position:absolute;left:-4px;top:-7px;width:36px;height:9px;background:var(--icing);border-radius:4px}
 .smoke{position:absolute;left:160px;top:-152px;z-index:2}
 .smoke i{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--smoke);animation:puff 4.8s infinite}
 .smoke i:nth-child(2){animation-delay:1.2s}.smoke i:nth-child(3){animation-delay:2.4s}.smoke i:nth-child(4){animation-delay:3.6s}
 @keyframes puff{0%{transform:translate(0,0) scale(.4);opacity:0}25%{opacity:.9}100%{transform:translate(14px,-52px) scale(1.8);opacity:0}}
 /* 屋頂軟糖 */
 .gum{position:absolute;width:11px;height:11px;border-radius:50%;z-index:2;box-shadow:inset -2px -2px 3px rgba(0,0,0,.22)}
 /* 7/13 二修:天暗下來,糖果自己發亮=希望 */
 body:not(.night) .gum{box-shadow:inset -2px -2px 3px rgba(0,0,0,.22),0 0 8px rgba(255,214,140,.8)}
 body:not(.night) .lolli{filter:drop-shadow(0 0 7px rgba(255,185,215,.6))}
 /* 糖果路(SVG):7/6 改「門前蜿蜒」到前景,近寬遠窄=透視 */
 .roadsvg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
 .roadsvg .base{fill:none;stroke:var(--road-edge);stroke-linecap:round}
 .roadsvg .top{fill:none;stroke:var(--road);stroke-linecap:round}
 .roadsvg .mid{fill:none;stroke:var(--road-line);stroke-width:2.6;stroke-dasharray:2 13;stroke-linecap:round}
 /* 棒棒糖樹 */
 .lolli{position:absolute;z-index:1}
 /* 圓弧門③:糖果繞著門一圈 */
 .door{position:absolute;left:61px;bottom:0;width:48px;height:84px;background:var(--door);
   border-radius:24px 24px 0 0;border:3px solid var(--doorbord);border-bottom:none;transition:.6s;transform-origin:left;z-index:2}
 .door.open{transform:perspective(300px) rotateY(-52deg)}
 /* 7/11 兔兔:門上聖誕花環 */
 .door .wreath{position:absolute;left:50%;top:8px;transform:translateX(-50%);filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
 /* ④⑤落地窗:直達地板;7/7 house2.jpg=窗加大,才見得了裡面的家具(將來蒐集=最後的家的累積) */
 .fwin{position:absolute;bottom:0;width:52px;height:110px;z-index:2;overflow:hidden;
   background:radial-gradient(ellipse at 50% 30%,rgba(255,218,150,.62),transparent 74%),
     linear-gradient(#96707e 0 50%,transparent 50%);border:3px solid var(--winbord);border-bottom:none;
   border-radius:10px 10px 0 0;box-shadow:inset 0 0 10px rgba(0,0,0,.3),0 0 16px rgba(255,220,150,.3)}
 .fwin .rfloor{position:absolute;left:0;bottom:0;width:100%;height:50%;
   background:linear-gradient(#d2a878,#9a7048);transform:perspective(70px) rotateX(34deg);transform-origin:bottom}
 #decor{left:4px}
 #win4{left:112px}
 .fwin .fitem{position:absolute;line-height:1;text-shadow:0 2px 3px rgba(0,0,0,.45)}
 .fwin .fitem.back{bottom:36px;font-size:13px;opacity:.88}
 /* 7/11:emoji 沒有冰箱→CSS 畫一台小的(上淺格=冷凍) */
 .fwin .fridge i{display:inline-block;width:11px;height:17px;background:linear-gradient(#f0f4f8,#c8d2dc);
   border:1px solid #8a98a8;border-radius:2.5px;box-shadow:inset 0 -11px 0 rgba(170,185,200,.35)}
 /* 7/8 兔兔:家具改堆屋外左邊樹下,像聖誕樹下的禮物;蒐集滿點一下=回真正的家(ARK_POSTPET) */
 #giftpile{position:absolute;left:6%;bottom:148px;width:80px;height:56px;z-index:3;cursor:pointer}
 #giftpile .g{position:absolute;font-size:17px;line-height:1;text-shadow:0 2px 3px rgba(0,0,0,.4);
   animation:giftpop .5s ease-out}
 @keyframes giftpop{from{transform:scale(.3);opacity:0}}
 #giftpile.full .g{filter:drop-shadow(0 0 4px rgba(255,220,150,.9))}
 .fwin .fitem.front{bottom:6px;font-size:18px}
 .jar{position:absolute;left:11px;bottom:26px;font-size:28px;line-height:1}
 .jarn{position:absolute;left:0;bottom:8px;width:100%;text-align:center;font-size:10.5px;color:var(--jarn);white-space:nowrap}
 /* 小徑+糖果 */
 /* 前面的糖看得到=誘你往前;下一顆發光可點=走過去吃掉 */
 .dot{position:absolute;font-size:27px;transition:.5s;opacity:.72;transform:scale(.9);
   filter:drop-shadow(0 0 6px rgba(255,179,217,.55));animation:tw 4s infinite}
 /* 7/12 兔兔:光球看不出是糖果→光球全刪,糖果本人上場。
    該點那顆=半透明↔清楚呼吸(不發光);前面還沒走的=糖果依序若隱若現(聖誕燈式,指引前面還要走) */
 .dot.here{transform:scale(1.15);animation:herefade 2.2s ease-in-out infinite;cursor:pointer;filter:none}
 /* 7/28 兔兔:被指著的那顆不能淡到看不見(她說提示像在指旁邊的房子)→ 最低 .25 拉到 .55 */
 @keyframes herefade{0%,100%{opacity:.55}50%{opacity:1}}
 .dot.done{opacity:.35;transform:scale(.7);filter:grayscale(1);font-size:18px;animation:none}
 .dot.far{opacity:.12;transform:scale(.9);pointer-events:none;filter:none;animation:runlight 5.4s infinite}
 @keyframes runlight{0%,14%,100%{opacity:.12;transform:scale(.9);filter:none}
  7%{opacity:.75;transform:scale(1);filter:drop-shadow(0 0 5px rgba(255,220,150,.55))}}
 /* 7/28 兔兔:「糖果也應該指向下一顆糖」→ 提示改成**站在那顆糖正上方、下面一個往下的箭頭**,
    不再只是浮在旁邊的一行字(她那張圖上看起來像在指門口) */
 /* 🆕 7/30 兔兔:「另一行『點下一顆』那行應該要 -> 下顆糖果的地方」→ 不再置中站在糖正上方
    (字有 9 個字寬 ~120px,置中=橫跨整個畫面、看起來像在指旁邊的人),改成**擺在糖的斜上方一側、
    箭頭在靠糖那一端指著它**;左右哪邊放由 JS 現場量(要在場景內、不壓到人)。 */
 .dothint{position:absolute;z-index:6;pointer-events:none;letter-spacing:1px;
   white-space:nowrap;text-align:center}
 .dothint .ar{font-size:13px;line-height:1;letter-spacing:0;vertical-align:-1px}
 /* 🆕 7/30 兔兔:「點下一顆糖往前走 要在糖果的左邊 所以箭頭是指向右邊的糖果」
    → **預設=字站在糖的左邊、箭頭 ↘ 在右端**;只有左邊擺不下(出場景/壓到人)才 .mir 換到右邊(箭頭 ↙)。 */
 .dothint .ar.l,.dothint.mir .ar.r{display:none}
 .dothint.mir .ar.l{display:inline}
 /* 一行 108px 寬時,糖左邊那塊永遠被**人**站著(人站上一顆糖的位置=糖的左後方)→ 量出來 36/36 都被擠到右邊。
    折成兩行只剩 ~70px,左邊就塞得進去(她要的是「在糖果的左邊」,不是「一定要一行」)。 */
 .dothint.nw{white-space:normal;max-width:72px;line-height:1.45;text-align:right}
 .dothint.nw.mir{text-align:left}
 /* 🆕 7/30 兔兔:「白天晚上的『可換動物』跟『點下一顆糖往前走』的配色、底色、有沒有呼吸都不一樣」
    → 場景裡這兩行提示**共用同一組**:同底色、同字色、同字級、同呼吸,而且**白天晚上一樣**。
    ⚠️ 7/13 那條「白天白字看不清→改黃字」的前提是那行**沒有底色**;現在兩個都有膠囊底,
       白字在白天也讀得到 → 黃字那條連同 body:not(.night) 的覆蓋一起拿掉,不然日夜又不一致。
    ⚠️ 舊的 `tw` 是閃到 opacity .15(幾乎整個消失)——那是「沒有底色的字」才吃得下的節奏;
       套在膠囊上會整塊忽隱忽現很吵 → 換成柔和的 hintbr(1↔.62),兩行同一個節奏、同時呼吸。
    ⚠️ 這條要放在 #budhint／.dothint 兩段**後面**才蓋得過去(#budhint 是 id,選擇器裡必須帶著它)。 */
 /* 🆕 7/30 兔兔:「糖果旁邊標小數字 1 2 3 4 5 6 7 8 9」——底色/字色跟兩行提示同一套(她今天要的一致),
    但**不呼吸**:數字是要讀的,閃起來反而看不清。 */
 .dnum{position:absolute;z-index:7;pointer-events:none;font-size:8.5px;font-weight:700;line-height:1;
   color:#fff;background:rgba(20,14,26,.62);border-radius:7px;padding:1px 3.5px;letter-spacing:0;
   opacity:.55;text-shadow:0 1px 2px rgba(0,0,0,.5)}
 /* 🆕 7/30 兔兔:「數字走過的要變透明或不見 只剩下該走的 比較清楚提示」→ 三級:
    走過的淡到快不見(跟「吃過的糖變暗」同一套語言,不是整個拿掉=不會以為糖沒了)/
    還沒走的維持 .55/該走的最亮+粉底+放大。⚠️ 數字是要讀的,所以三級都不呼吸(不套 hintbr) */
 .dnum.ndone{opacity:.16;font-weight:400}
 .dnum.nhere{opacity:1;font-size:9.5px;padding:1.5px 4.5px;background:rgba(226,92,160,.92);
   box-shadow:0 0 6px rgba(255,150,200,.5)}
 @keyframes hintbr{50%{opacity:.62}}
 #budhint,.dothint{font-size:10px;color:#fff;background:rgba(20,14,26,.55);border-radius:9px;
   padding:2px 7px;text-shadow:0 1px 2px rgba(0,0,0,.5);animation:hintbr 3s ease-in-out infinite}
 /* 7/10 兔兔:禮物落堆後,下面白色發光字「您獲得了某某禮物」 */
 .giftmsg{position:absolute;left:1%;bottom:118px;width:180px;text-align:center;z-index:9;pointer-events:none;
   color:#fff;font-size:13px;letter-spacing:1px;font-weight:700;line-height:1.6;
   text-shadow:0 0 8px rgba(255,255,255,.95),0 0 20px rgba(255,240,180,.8),0 1px 2px rgba(0,0,0,.3);
   animation:giftmsg 4.4s ease forwards}
 @keyframes giftmsg{0%{opacity:0;transform:translateY(10px)}14%{opacity:1;transform:none}78%{opacity:1}100%{opacity:0}}
 .giftfly{position:absolute;z-index:9;font-size:22px;pointer-events:none;
   filter:drop-shadow(0 0 9px rgba(255,240,190,.95));
   transition:left 1.15s ease,bottom 1.15s cubic-bezier(.35,-.35,.55,1),transform 1.15s}
 /* 7/7 裝飾誘餌糖(7/30 已改成花草):路邊只負責讓路看起來甜(防無聊=啟動效果命脈)
    🆕 7/31 兔兔:「路上的花竟然也有忽明忽暗 路上花草應該都是亮的 只有隱身的糖果才是透明發光導引」
    → 舊的 .deco 跟天上星星共用 `tw`(opacity .5↔.15 一直閃)+暖色發光 ⟹ 整條路都在呼吸,
      眼睛分不出哪個能點。**會動、會發光的只准是糖**:花草改成常亮不閃、不發光,只留一點暗影撐在路上。
    ⚠️ `tw` 本身別動,天上的 .sstar 還在用(星星該閃)。 */
 .deco{position:absolute;opacity:1;pointer-events:none;animation:none;
   filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
 @keyframes beat{50%{transform:scale(1.45)}}
 .tree{position:absolute;right:10px;bottom:62px;font-size:58px}
 /* 你+小兔 */
 .walker{position:absolute;font-size:34px;transition:left 1s ease,bottom 1s ease;z-index:5;white-space:nowrap;
   pointer-events:none/* 7/6:別擋住腳邊那顆發光糖的點擊 */}
 /* 🐛 7/28 兔兔:「點了不能換動物陪」——7/28 把 onclick="togBud()" 加在 .walker 上,
    可是 .walker 從 7/6 起就是 pointer-events:none(整個框收不到點擊)→ 那顆 onclick 一次都沒被叫到,
    手指戳下去打到的是底下的 .dot / .roadsvg。
    修法:框維持 none(不擋腳邊那顆糖=7/6 的用意還在),只把**動物本人+那行提示**開回來;
    🚶 那格故意不開——她要走的那顆糖就在腳邊,開了會蓋掉走路。 */
 .walker .buddy,.walker #budhint{pointer-events:auto;cursor:pointer}
 .walker .me{filter:drop-shadow(0 0 12px rgba(140,197,255,.9));display:inline-block/* 7/29:span 不吃 transform,走路的上下起伏要靠這個 */}
 .walker .buddy{font-size:29px;display:inline-block;animation:hop 1.6s infinite}
 @keyframes hop{50%{transform:translateY(-3px)}}
 /* 🦵 7/29 兔兔:「人物(男女)跟動物走路時腳都不會動,其他野外/室內/市區腳都會動,像走路。這像飄」
    人=SVG 兩條腿各自一個 <g>(見 ark_candy_main.js 的 man/woman),繞骨盆點轉;
    動物=drawPetBody 的 walking 參數本來一直傳 false(其他場景走路時傳 true)。
    ⚠️ transform-box 一定要寫 view-box:不寫的話 transform-origin 那組 px 在 Safari 會被當成
    元素 bounding box 的座標,腿會繞自己中間轉=原地畫圈不是邁步。 */
 #walker .lg{transform-box:view-box;animation:stepA 1.45s ease-in-out infinite}
 #walker .lg2{animation-name:stepB}
 /* 站著=小幅度慢慢晃(有重心不是杵著);真的在走(位置換了那 1 秒)=大步+快 3 倍 */
 #walker.walking .lg{animation-duration:.46s;animation-name:stepAw}
 #walker.walking .lg2{animation-name:stepBw}
 #walker.walking .me{animation:bob .46s ease-in-out infinite}
 @keyframes stepA{0%,100%{transform:rotate(4.5deg)}50%{transform:rotate(-4.5deg)}}
 @keyframes stepB{0%,100%{transform:rotate(-4.5deg)}50%{transform:rotate(4.5deg)}}
 @keyframes stepAw{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}
 @keyframes stepBw{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
 /* 身體上下=兩腿交會時最高(頻率是腳的兩倍),不然只有腿在動像下半身自己走 */
 @keyframes bob{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-1.4px)}}
 /* 對話泡 */
 /* 7/28 六修:五修把這顆縮成 13.5px,兔兔說「反而不清晰」→ 字級全部還原,省空間改用併排鈕 */
 .bubble{margin:0 auto 10px;max-width:430px;border:1px solid var(--bubble-bord);border-radius:16px 16px 16px 4px;
   padding:13px 15px;font-size:15px;color:var(--bubble-txt);background:var(--bubble-bg);
   text-align:left;line-height:1.85;min-height:48px}
 .bubble b{color:var(--accent)}
 /* 七修:步驟卡自己長的那顆泡泡(在兩顆鈕上面)——.btns 已經有 margin-top:12,這裡只留上面的距離。
    ⚠️ 卡片裡這顆的頭貼/名字**改成跟第一行字同一排**(不是另外站一列):
       講話的字一個都沒縮(還是 15px),但整顆泡泡從 105px 收到 ~56px = 兩顆鈕才留得住第一屏。
       頭貼縮成 26px 是裝飾不是字;動物是誰照樣看得出來。 */
 #bubslot{margin:14px 0 0}
 /* 🆕 7/31 兔兔:「動物講話因為合併過 所以現在顯示小動物emoji跟動物名稱比後面講話得字小 不太對」
    → 7/28 為了把兩顆鈕留在第一屏,把頭貼/名字縮成 26px/13px,可是講話的字是 15px ⟹ 頭比話小。
      名字拉回 15px(跟講話同級)、頭貼 26→34px。整顆泡泡只長幾 px,兩顆鈕還在第一屏。 */
 #bubslot .who{display:inline-flex;gap:7px;margin:0 8px 0 0;font-size:15px;vertical-align:-9px}
 #bubslot .ava{font-size:21px;width:38px;height:38px;flex:0 0 38px}
 .bubble:empty{display:none}
 /* 小兔=聊天大頭貼,讓它像個陪你的角色不是小emoji */
 .bubble .who{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;
   color:var(--bubble-who);margin-bottom:7px}
 /* 🆕 7/31 五修 兔兔:「動物外面怎有個圈圈 直接動物本身就好旁邊加名字」
    → 圓底/圓角/陰影全拿掉,只剩動物本身站在那裡。
    ⚠️ `alive` 那個縮放呼吸也一起拿掉:牠自己畫的時候就在呼吸了(drawPetBody 的 bounce),
       兩層呼吸疊起來會晃。⚠️ 沒有圓底撐場之後看起來會變輕 ⟹ 框從 34→38px 補回份量。 */
 .bubble .ava{font-size:25px;line-height:1;width:42px;height:42px;flex:0 0 42px;
   display:flex;align-items:center;justify-content:center}
 /* 7/31 頭貼改成畫的那一隻(不用 emoji):canvas 內部固定 48x48,靠 CSS 縮到各處的框裡=兩種尺寸都清楚 */
 /* 🆕 7/31 六修 兔兔:「現在這版 但是厚度加厚 看起來是板子」
    → 不加底也不加外框(她選了「什麼都沒有」那版),改讓**動物本身有厚度**=像鋸出來的一塊木板立在那。
    做法:疊四層 1px 的 drop-shadow。drop-shadow 是**照 alpha 形狀**走的,一層層往下疊就長出側面;
    顏色由淺到深(#7a5c42→#4a3828)=木頭的斜切面,最後一層糊的是投影(板子離牆有距離)。
    ⚠️ 別用 box-shadow:那是照**方框**畫的,會變成一個方塊陰影不是動物的厚度。
    ⚠️ 這個厚度會畫到元素框外面 ⟹ .ava 不能有 overflow:hidden(圓圈圈拿掉時一起拿掉了,別加回來)。 */
 /* 🆕 8/1 七修 兔兔:「厚度用木頭色有點怪…看來像髒髒的邊 所以厚度小一點 2px-3px 就夠了」
    → ①四層 1px(4px)砍成**兩層 1px=2px** ②木頭褐(#7a5c42→#4a3828)換成**中性灰**。
    為什麼不是直接用深色:泡泡底本身就是深的(日 #453f4c／夜幾乎全黑),側面畫深色會整個吃掉=厚度不見;
    灰階 #6b6570→#4d4854 比動物暗、又比泡泡底亮 ⟹ 看得出是「切面」,而且不帶顏色就不會像髒。
    ⚠️ 一樣別換成 box-shadow(那是照方框走的);.ava 一樣不准 overflow:hidden。 */
 .bubble .avacv{width:100%;height:100%;display:block;
   filter:drop-shadow(0 1px 0 #6b6570) drop-shadow(0 1px 0 #4d4854)
          drop-shadow(0 3px 3px rgba(0,0,0,.45))}
 /* 小兔講話=一個字一個字打出來(像真的在說),打完游標消失 */
 .bubble .msg{display:inline}
 .bubble .msg.typing::after{content:"▊";margin-left:1px;color:var(--bubble-who);animation:caret .7s step-end infinite}
 @keyframes caret{50%{opacity:0}}
 /* 步驟卡 */
 /* 步驟指令=主角(這句就是改運的方法),全畫面最大最亮 */
 /* 7/28 六修 兔兔:「字體改小反而不清晰…字體維持之前那麼大」→ 五修縮的字級**全部還原**,
    改用她給的辦法省空間:下面兩顆鈕從兩排併成一排+字少一點(見 .btns.side) */
 .step{border:1px solid var(--step-bord);border-radius:16px;padding:18px 16px;margin:0 0 10px;
   background:var(--step-bg);box-shadow:var(--step-sh)}
 .stepnum{font-size:11px;color:var(--stepnum);margin-bottom:8px}
 .stepbig{font-size:31px;color:var(--stepbig);line-height:1.5;margin-bottom:10px;font-weight:bold;
   text-shadow:var(--stepbig-sh);
   animation:fadein 1.4s ease both,alive 2.8s 1.4s ease-in-out infinite}
 @keyframes fadein{from{opacity:0;transform:translateY(14px);filter:blur(6px)}
   to{opacity:1;transform:none;filter:none}}
 /* 很慢很輕的呼吸脈動:讓「該做的那句」活著、像在招手,又不吵(符合安撫焦慮) */
 @keyframes alive{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}
 .stepwhy{font-size:13px;color:var(--stepwhy);line-height:1.8;font-style:italic;animation:fadein 1.4s .5s ease both}
 .btns{display:flex;flex-direction:column;gap:8px;margin-top:12px}
 /* 六修 兔兔:「把下面按鈕兩個分兩排變成一排，字少一點…就可以少很多空間，字體維持之前那麼大」
    ⚠️ 只給短期徑那張卡用(.side);進階徑那兩顆字長,併一排會擠成三行 */
 .btns.side{flex-direction:row;gap:8px}
 /* ⚠️ 併排的兩顆 padding 要一樣:.go 是 10、.stay 是 8,不統一的話 flex 分完寬度還會各自
    把 padding 加在外面 → 兩顆差 4px、看起來歪一邊(box-sizing 救不了,直接統一 padding) */
 .btns.side .btn{flex:1 1 0;min-width:0;white-space:nowrap;box-sizing:border-box;padding:10px 6px}
 .btn{border:none;border-radius:14px;padding:12px;font-family:inherit;font-size:15px;cursor:pointer;transition:.15s}
 /* 按鈕降調:主角是上面那句指令 */
 .go{background:var(--go-bg);border:1px solid var(--go-bord);color:var(--go-txt);font-size:13.5px;padding:10px;box-shadow:var(--go-sh)}
 .go:active{transform:translateY(1px)}
 .stay{background:transparent;border:1px solid var(--stay-bord);color:var(--stay-txt);font-size:13px;padding:8px}
 .panic{position:fixed;right:12px;bottom:12px;z-index:20;background:var(--panic-bg);border:1px solid var(--panic-bord);
   color:var(--panic-txt);border-radius:24px;padding:10px 16px;font-family:inherit;font-size:13px;cursor:pointer;
   box-shadow:0 2px 12px rgba(0,0,0,.3)}
 /* 7/30 為了拿 ark_tip.js 的標準頁尾鈕才載那支,但它會在右下角長一顆「後面還有…」膠囊
    (right:10px/bottom:12px)——**跟上面這顆「😰 我慌了」完全同一個位置**。慌的時候按不到那顆鈕
    是這頁最不能出的錯。
    🆕 兔兔:「左下留著」→ 不關掉,搬到左下角(她要留住那條漏斗,只是別擋住我慌了)。
    ⚠️ ark_tip.js 是用 inline style 寫 right/bottom 的,所以這裡每一條都得 !important 才蓋得掉。 */
 #ark-tease{right:auto!important;left:10px!important;bottom:12px!important}
 /* 呼吸模式 */
 #breath{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;align-items:center;
   justify-content:center;background:rgba(20,12,22,.94);text-align:center;padding:20px}
 .circle{width:90px;height:90px;border-radius:50%;margin:18px 0;
   background:radial-gradient(circle,#ffd9a8,#c07a50);box-shadow:0 0 40px rgba(255,200,140,.4)}
 #btext{font-size:17px;color:#ffe4c8;letter-spacing:2px;min-height:28px}
 #bsub{font-size:12.5px;color:#c8a8a8;line-height:2;margin-top:10px;max-width:340px}
 .bbtns{display:flex;gap:10px;margin-top:22px}
 .bbtn{border:1px solid #6a4a6c;background:transparent;color:#e8c8d8;border-radius:20px;
   padding:10px 18px;font-family:inherit;font-size:13px;cursor:pointer}
 .arrive{font-size:14.5px;color:var(--arrive);line-height:2}
 .mem{font-size:10.5px;color:var(--mem);margin-top:18px;line-height:1.7;border-top:1px solid var(--mem-bord);padding-top:10px}
 .restart{background:none;border:1px solid var(--restart-bord);color:var(--restart-txt);border-radius:10px;padding:7px 14px;
   font-family:inherit;font-size:12px;cursor:pointer;margin:6px 3px 0}
 /* 7/14 兔兔:糖果屋旁呼吸小字註解 */
 /* 🪙 7/28 兔兔(candy1.jpg 二次):「陪跑的橙子說話跟按鈕中夾雜一堆金幣等系統那些,應該都在遊戲左右上角呈現,
    不是在重點的說話跟陪玩出現;中間留一大段空白使用者看不到動物陪跑說了什麼」
    → 錢包/打卡/城堡%/稱號 全部搬到場景左右上角小字;城堡大圖+長說明收進點開才看的面板 */
 .hud{position:absolute;z-index:7;font-size:10px;line-height:1.55;letter-spacing:.5px;color:#f2e6ee;
   background:rgba(20,14,26,.42);border-radius:10px;padding:3px 8px;backdrop-filter:blur(2px);
   text-shadow:0 1px 2px rgba(0,0,0,.5)}
 .hud:empty{display:none}
 .hud b{color:#ffd98a}
 #hudL{left:8px;top:8px;text-align:left;max-width:46%}
 #hudR{right:8px;top:74px;text-align:right;max-width:46%;cursor:pointer}
 /* 7/28 兔兔二修:這段字被左上角的錢包/罐子壓住 → 改用 top 定位(從錢包下面往下長,
    幾行都不會往上撞);原本 bottom:300 在手機上多換一行就頂上去 */
 /* 7/28 兔兔五修(candy1.jpg 圈 B):「我圈出來的解說 字換行沒連貫 寫連貫一點 不要空白一堆」
    → 原本 width 118 + letter-spacing 1px = 一行只塞得下 9 個字,斷成「（家鎖）」「家重建 →」兩截孤行;
      改成 letter-spacing 0(中文本來就等寬,再加間距只是把字擠出去)+ 放寬到 138px + 行高收緊,
      文案也接成一句話(拿掉硬 <br>,讓它自己斷在該斷的地方)。⚠️ 不能再寬:右邊 138+左邊界 就要碰到屋簷了。 */
 .housenote{position:absolute;left:2%;top:66px;width:min(26%,102px);z-index:5;pointer-events:none;text-align:left;
   font-size:10px;line-height:1.62;letter-spacing:0;color:#ffe6ef;text-wrap:balance;
   text-shadow:0 1px 3px rgba(20,15,25,.85),0 0 9px rgba(255,160,200,.45);animation:hnote 3.2s ease-in-out infinite}
 @keyframes hnote{0%,100%{opacity:.5}50%{opacity:1}}