:root{--card:#ffffffd1;--ink:#3b2f2f;--sub:#7a6a64;--accent:#ff7a9c;--ok:#6cc58f;--warn:#f5b34a;--bad:#ef5b5b}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);background:#f6e7d8;margin:0;font-family:-apple-system,BlinkMacSystemFont,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif;overflow:hidden}#c{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}#hud{pointer-events:none;position:fixed;inset:0}#hud>*{pointer-events:auto}.card{background:var(--card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:18px;width:280px;padding:14px 16px;position:absolute;top:16px;left:16px;box-shadow:0 8px 30px #50281e1f}.title{align-items:center;gap:8px;font-size:20px;font-weight:800;display:flex}.chip{color:#c2456a;background:#ffe1ea;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:700}.sub{color:var(--sub);margin:4px 0 10px;font-size:13px}.row{grid-template-columns:44px 1fr 30px;align-items:center;gap:8px;margin:6px 0;font-size:13px;display:grid}.bar{background:#efe3dc;border-radius:999px;height:10px;overflow:hidden}.bar i{background:var(--ok);border-radius:999px;width:50%;height:100%;transition:width .3s,background .3s;display:block}.bar i.mid{background:var(--warn)}.bar i.low{background:var(--bad)}.val{text-align:right;font-variant-numeric:tabular-nums;color:var(--sub)}.tr{flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:calc(100vw - 32px);display:flex;position:absolute;top:16px;right:16px}.pill.on{color:#c2456a;background:#ffe1ea}.prompt{color:#fff;white-space:nowrap;cursor:pointer;z-index:3;background:#3b2f2f;border:0;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;position:absolute;transform:translate(-50%,-130%);box-shadow:0 6px 16px #50281e38}.prompt[hidden]{display:none}#joystick{touch-action:none;z-index:3;background:#ffffff8c;border:2px solid #fffffff2;border-radius:50%;width:116px;height:116px;display:none;position:absolute;bottom:168px;left:18px;box-shadow:0 8px 24px #50281e1f}#joystick .knob{background:#fff;border-radius:50%;width:52px;height:52px;margin:-26px 0 0 -26px;position:absolute;top:50%;left:50%;box-shadow:0 4px 12px #50281e2e}@media (width<=640px),(pointer:coarse){#joystick{display:block}}.pill{background:var(--card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);cursor:pointer;border:0;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:700;box-shadow:0 4px 16px #50281e1a}#actions{flex-wrap:wrap;justify-content:center;gap:10px;width:min(96vw,720px);display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}#actions button{min-width:84px;color:var(--ink);cursor:pointer;background:#fff;border:0;border-radius:16px;padding:10px 14px;font-size:14px;font-weight:700;transition:transform .1s,box-shadow .2s;position:relative;box-shadow:0 6px 18px #50281e24}#actions button:active{transform:scale(.94)}#actions button .ic{font-size:22px;line-height:1.2;display:block}#actions button.alert{box-shadow:0 0 0 3px var(--bad),0 6px 18px #50281e24;animation:1s infinite pulse}#actions button .badge{background:var(--bad);color:#fff;border-radius:999px;padding:2px 6px;font-size:11px;display:none;position:absolute;top:-6px;right:-6px}@keyframes pulse{50%{transform:scale(1.05)}}#toast{opacity:0;color:#fff;pointer-events:none;white-space:nowrap;background:#3b2f2f;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .3s;position:absolute;top:18px;left:50%;transform:translate(-50%,-30px)}#toast.show{opacity:1;transform:translate(-50%)}.hint{color:var(--sub);background:var(--card);border-radius:10px;padding:6px 10px;font-size:12px;position:absolute;bottom:16px;right:16px}@media (width<=640px){.card{width:auto;padding:10px 12px;top:64px;right:16px}.tr{left:16px;right:auto}.hint{display:none}#actions button{flex:30%;min-width:0;padding:8px 6px;font-size:13px}#toast{white-space:normal;text-align:center;max-width:90vw;top:auto;bottom:150px}}