/* 糖果外殼 v0.22（2026-10-06 Roy：「就算被灰燼、塵土覆蓋，遊戲裡的一切都要美麗、優雅、可愛」）
   兩頁共用（eden.html／space-station.html）。取代 v0.21 的冷光斜切玻璃。
   原則：一種材質（奶油色半透明紙）、一種形狀（大圓角）、一種強調色（玫瑰）、三種狀態色（薄荷＝運轉、蜂蜜＝等待、莓果＝警戒）。
   配色借雨夜書房可愛版、字型借豬豬牧場（粉圓 Huninn）。載入順序：放在各頁 <style> 之後，同權重靠後者勝。 */
:root{--rose:#E07F98;--rose2:#EFB6C4;--uv:#B48CFF;--txt:#4A3326;--dim:#8A6F62;--line:rgba(224,127,152,.55);--line2:rgba(224,127,152,.22);
  --ok:#2E9A6A;--warn:#C98418;--bad:#D9506E;--honey:#E9A23B;
  --cream:rgba(255,250,244,.9);--glass:linear-gradient(180deg,rgba(255,252,247,.93),rgba(253,240,244,.9));
  --r:calc(var(--u)*22);--r-s:calc(var(--u)*14);--soft:0 calc(var(--u)*6) calc(var(--u)*18) rgba(92,52,86,.28)}
#shell,.pnl,.mp,.tool,#hint,#toast,#msg,#oHover,#codex,#palette,.bar,#panel,.card,.act,.pbtn,#rotate{font-family:"Huninn","Noto Sans TC","PingFang TC","Microsoft JhengHei UI",sans-serif}

/* ---- 紙：所有浮在場景上的塊 ---- */
.pnl,.mp,#hint,#msg,#oHover,#shell>#hover,#codex,#palette,.bar,#panel,.card,#end .card{background:var(--glass);color:var(--txt);border:0;border-radius:var(--r);text-shadow:none;clip-path:none;
  box-shadow:inset 0 0 0 1.5px var(--line),inset 0 2px 0 rgba(255,255,255,.9),var(--soft)}
#hint,#msg,#oHover,#shell>#hover,#palette,.bar{border-radius:999px}
#toast{background:linear-gradient(180deg,#FFF6E4,#FFE9C9);color:#6A4520;border:0;border-radius:999px;clip-path:none;box-shadow:inset 0 0 0 1.5px rgba(233,162,59,.7),var(--soft)}
.pnl .h{color:var(--rose);opacity:1;letter-spacing:.18em;font-size:.72em}
.pnl .big{color:var(--txt);text-shadow:none}
.pnl .row b,.pnl #goal .g,#goal .g,#resStar .r b,.pnl b{color:var(--rose)}
#goal .ok,#powRate .ok{color:var(--ok)}#goal .no,#powRate .no{color:var(--warn)}
.pnl{padding:calc(var(--u)*12) calc(var(--u)*20)}
.meter{background:rgba(224,127,152,.16)!important}.meter i,#powFill{background:linear-gradient(90deg,#9ED8B4,#5FBF86)!important;border-radius:99px}

/* ---- 底部導覽帶與工具鍵：暮色紫，鍵是奶油色藥丸 ---- */
#band{background:radial-gradient(1px 1px at 12% 40%,#fff8,transparent),radial-gradient(1.5px 1.5px at 31% 70%,#ffd9e4aa,transparent),radial-gradient(1px 1px at 58% 30%,#fff8,transparent),radial-gradient(1.5px 1.5px at 83% 62%,#e8d8ffaa,transparent),linear-gradient(180deg,#4A3556,#2E2240);
  border-top:0;box-shadow:0 -2px 0 rgba(239,182,196,.55),0 -14px 30px rgba(224,127,152,.18)}
.tool{border:0;border-radius:999px;background:var(--cream);color:var(--txt);letter-spacing:.04em;clip-path:none;white-space:nowrap;
  box-shadow:inset 0 0 0 1.5px var(--line2),0 calc(var(--u)*3) 0 rgba(92,52,86,.35);transition:transform .15s,background .15s,box-shadow .15s}
.tool:hover{background:#fff;transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--line),0 calc(var(--u)*5) 0 rgba(92,52,86,.35)}
.tool kbd{border:0;border-radius:6px;background:rgba(224,127,152,.16);color:var(--rose);opacity:1;padding:0 .35em}
.tool[aria-pressed="true"]{background:linear-gradient(180deg,#F5A7BA,var(--rose));color:#fff;font-weight:700;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 calc(var(--u)*3) 0 #B25A73,0 0 16px rgba(239,182,196,.7)}
.tool[aria-pressed="true"] kbd{background:rgba(255,255,255,.3);color:#fff}
.tool:active,.pbtn:active,.chip.btn:active{transform:translateY(2px) scale(.97);filter:none}
.tool:focus-visible,.pbtn:focus-visible{outline:3px solid var(--uv);outline-offset:2px}

/* ---- 提示、訊息、按鈕 ---- */
#msg,#hint{padding:.25em 1.1em;color:var(--txt)}
.act{border:0;border-radius:999px;background:linear-gradient(180deg,#F5A7BA,var(--rose));color:#fff;letter-spacing:.04em;clip-path:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 4px 0 #B25A73,0 0 18px rgba(239,182,196,.65);animation:actBreath 2.4s ease-in-out infinite}
@keyframes actBreath{50%{transform:scale(1.04)}}
#hover .pie{border:1.5px solid var(--line)}

/* ---- 百科、佈置面板、選取列、地球頁圖鑑、結算卡 ---- */
#codex,#panel{color:var(--txt)}
.cx-title small,.cx-note,.cx-bar em,#panel h4,#panel .sub{color:var(--dim)}
.cx-row,#panel .item{border-top:1.5px dashed var(--line2)}
.cx-bar i{background:linear-gradient(90deg,var(--rose2),var(--rose));border:0;border-radius:99px;box-shadow:none}
.cx-img.unseen{filter:brightness(0) opacity(.22)}
#palette{padding:calc(var(--u)*10);gap:calc(var(--u)*8)}
.pbtn,#panel button{border:0;border-radius:var(--r-s);background:#fff;color:var(--txt);clip-path:none;box-shadow:inset 0 0 0 1.5px var(--line2),0 3px 0 rgba(224,127,152,.35);transition:transform .15s}
.pbtn:hover,#panel button:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--line),0 5px 0 rgba(224,127,152,.35)}
.pbtn .c{color:#B0703A}.pbtn.poor{opacity:.5}.pbtn.poor .c{color:var(--dim)}
.pbtn.on{background:linear-gradient(180deg,#FFE1E9,#FBC6D4);box-shadow:inset 0 0 0 2px var(--rose),0 3px 0 #B25A73}.pbtn.on .c{color:#8A3A52}
#endcard,#end{background:rgba(74,53,86,.55);backdrop-filter:blur(3px)}
.card h2,#end h2{color:var(--rose);letter-spacing:.08em}
.card button{background:linear-gradient(180deg,#F5A7BA,var(--rose));color:#fff;border:0;border-radius:999px;box-shadow:0 4px 0 #B25A73}

/* ---- 機器面板 ---- */
#dock{display:flex;flex-direction:column;gap:calc(var(--u)*10);pointer-events:auto;max-height:calc(var(--u)*1080);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rose2) transparent}
.mp{padding:0;font-variant-numeric:tabular-nums;overflow:hidden}
.mp .hd{display:flex;align-items:center;gap:.5em;padding:calc(var(--u)*9) calc(var(--u)*18);cursor:pointer;background:linear-gradient(90deg,rgba(255,225,233,.85),rgba(255,225,233,0));border-bottom:1.5px solid transparent;transition:background .15s}
.mp .hd:hover{background:linear-gradient(90deg,rgba(251,198,212,.9),rgba(251,198,212,0))}
.mp.open .hd{border-bottom-color:var(--line2)}
.mp .ic{font-size:1.15em;filter:drop-shadow(0 2px 2px rgba(92,52,86,.25))}
.mp .tt{flex:1;font-size:.86em;letter-spacing:.1em;color:var(--txt);white-space:nowrap}
.mp .sm{font-size:.86em;color:var(--rose)}
.mp .pin{font-size:.75em;opacity:.3;filter:grayscale(1)}.mp.pinned .pin{opacity:1;filter:none}
.mp .dot{width:.6em;height:.6em;border-radius:50%;background:var(--rose2);box-shadow:0 0 0 2px #fff;flex:none}
.mp .dot.work{background:#5FBF86;animation:mpb 1.6s ease-in-out infinite}
.mp .dot.wait{background:var(--honey)}
.mp .dot.bad{background:var(--bad);animation:mpb .7s ease-in-out infinite}
@keyframes mpb{50%{transform:scale(.6)}}
.mp .bd{display:none;padding:calc(var(--u)*10) calc(var(--u)*18) calc(var(--u)*16)}.mp.open .bd{display:block}
.mp .st{display:flex;flex-wrap:wrap;gap:.2em .9em;font-size:.8em;color:var(--dim);margin-bottom:.5em}.mp .st b{color:var(--txt);font-weight:700}
.mp .stx{text-align:center;font-size:.82em;letter-spacing:.12em;padding:.15em 0;margin-bottom:.55em;border:0;border-radius:999px;background:currentColor}
.mp .stx{color:#fff!important}.stx.work{background:#5FBF86}.stx.full{background:var(--rose)}.stx.wait{background:var(--honey)}.stx.bad{background:var(--bad)}
.rc{margin-top:.5em}.rc .fl{display:flex;align-items:center;gap:.35em;font-size:.85em}
.rc .it{display:inline-flex;flex-direction:column;align-items:center;min-width:1.7em;line-height:1.05}.rc .it small{font-size:.66em;color:var(--dim)}
.rc .ar{flex:1;text-align:center;color:var(--rose);font-size:.72em;opacity:.9;white-space:nowrap}
.pb{position:relative;height:calc(var(--u)*12);margin-top:.3em;background:rgba(224,127,152,.14);border-radius:99px;overflow:hidden}
.pb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--rose2),var(--rose));transition:width .2s linear}
.pb.warn i{background:linear-gradient(90deg,#F7D08A,var(--honey))}
.pb.bad i{background:linear-gradient(90deg,#F2A0B2,var(--bad))}
.pb.ok i{background:linear-gradient(90deg,#BDEBCF,#5FBF86)}
.pb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.55) 0 35%,transparent 35%)}
.pb u{position:absolute;top:0;bottom:0;width:3px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px var(--rose);z-index:2}
.chips{display:flex;flex-wrap:wrap;gap:.3em}.chips span{box-shadow:inset 0 0 0 1.5px var(--line2);border-radius:999px;padding:0 .55em;font-size:.82em;background:#fff}.chips .no{opacity:.35}

#rotate{background:linear-gradient(180deg,#4A3556,#2E2240)!important;color:#FFE1E9!important}

@media (min-height:561px){#colL{width:max(200px,calc(var(--u)*340))}}   /* 平板直放 --u 很小，卡名會被截斷（2026-10-06） */
@media (max-height:560px) and (orientation:landscape){
  .mp .bd{display:none!important}.mp .hd{padding:2px 8px;gap:.3em}.mp .tt{display:none}.mp .sm{flex:1;text-align:right;font-size:12px}.mp .pin{display:none}#dock{gap:4px}
  .pnl,.mp{border-radius:12px}.tool{letter-spacing:0;padding:0 2px;background:var(--cream)}.tool kbd{display:none}
}
#codex,#panel,.card,#end .card{background:linear-gradient(180deg,rgba(255,252,247,.97),rgba(253,240,244,.97))}
@media (prefers-reduced-motion: reduce){.act{animation:none}.tool,.pbtn{transition:none}}