:root{--glass:rgba(255,255,255,.72);--ink:#0b2233;--dim:#4a6577;--line:rgba(10,40,60,.2);--acc:#0b7db0;--warn:#c97800;--bg:#9cc9e6;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glass:rgba(9,22,33,.64);--ink:#eaf6ff;--dim:#8fb0c4;--line:rgba(160,220,255,.22);--acc:#5fd4ff;--warn:#ffb020;--bg:#0b1a26}}
:root[data-theme="dark"]{--glass:rgba(9,22,33,.64);--ink:#eaf6ff;--dim:#8fb0c4;--line:rgba(160,220,255,.22);--acc:#5fd4ff;--warn:#ffb020;--bg:#0b1a26}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font:500 14px/1.3 "Chakra Petch",system-ui,sans-serif}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;inset:0;pointer-events:none;--t:calc(12px + env(safe-area-inset-top,0px));--b:calc(12px + env(safe-area-inset-bottom,0px))}
.p{position:absolute;background:var(--glass);border:1px solid var(--line);border-radius:14px;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);padding:10px 14px}
.tl{left:12px;top:var(--t);display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 250px)}
.tl b{font-size:20px;font-weight:700;letter-spacing:.02em;margin-right:6px}
i{font-style:normal;font-size:12.5px;padding:3px 10px;border-radius:99px;border:1px solid var(--line);color:var(--acc)}
i.w{color:var(--warn)}
.tc{left:50%;top:calc(var(--t) + 62px);transform:translateX(-50%);text-align:center;white-space:nowrap}
.tc b{font-size:26px;font-weight:600;display:block;font-variant-numeric:tabular-nums}.tc span{color:var(--dim);font-size:12.5px}
.tr{right:12px;top:var(--t);padding:6px;border-radius:18px}
#mm{width:190px;height:190px;display:block;border-radius:12px}
.bl{left:12px;bottom:var(--b);width:230px;font-size:13px}
.bl dl{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}.bl dt{color:var(--acc);font-weight:600}.bl dd{margin:0;color:var(--dim)}
.bc{left:50%;bottom:var(--b);transform:translateX(-50%);display:flex;gap:16px;align-items:center;padding:10px 16px}
#hz{width:124px;height:124px;border-radius:50%;background:radial-gradient(circle,rgba(95,212,255,.2),transparent 70%)}
.rd{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}.rd p{margin:0;min-width:82px}
.rd b{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums;display:block;line-height:1}
small{color:var(--dim);font-size:11.5px}
.side{display:flex;flex-direction:column;gap:8px;min-width:104px}
.mt{display:flex;gap:6px;height:46px;align-items:flex-end}.mt u{flex:1;height:100%;background:var(--line);border-radius:4px;display:flex;align-items:flex-end;overflow:hidden}.mt s{display:block;width:100%;background:var(--acc);height:0}
.bat{display:flex;align-items:center;gap:8px}.bat em{flex:1;height:8px;border-radius:5px;background:var(--line);overflow:hidden}.bat s{display:block;height:100%;background:var(--acc);width:100%}
.wd{display:flex;align-items:center;gap:8px}.wd svg{width:20px;height:20px;fill:var(--acc);transition:transform .3s}
#vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.55) 100%);transition:opacity .3s}
#cpanel{display:none;left:50%;top:50%;transform:translate(-50%,-50%);width:min(450px,92vw);max-height:84vh;overflow:auto;pointer-events:auto}#cpanel.on{display:block}
.btn{pointer-events:auto;cursor:pointer}.cr{display:grid;grid-template-columns:96px 84px 22px 1fr;gap:8px;align-items:center;margin:6px 0}
.cr select,.cr input[type=range]{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:8px;padding:3px 6px}.cr select option{color:#111}
.cr em{height:7px;border-radius:5px;background:var(--line);position:relative;overflow:hidden}.cr em s{position:absolute;top:0;bottom:0;left:50%;width:0;background:var(--acc)}
#toast{position:absolute;left:50%;top:calc(var(--t) + 150px);transform:translateX(-50%);padding:10px 18px;border-radius:12px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .25s;text-align:center;max-width:80%}
#toast.on{opacity:1}#toast.bad{border-color:#ff5c5c;color:#ff7b7b}
#big{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(5,15,22,.55)}
#big.on{display:flex}#big #mm{width:min(88vmin,860px);height:min(88vmin,860px);cursor:grab;border:1px solid var(--line)}#bm{width:min(88vmin,860px);height:min(88vmin,860px);border-radius:18px;border:1px solid var(--line)}
@media (max-width:760px){.bl,.rd p:nth-child(n+3){display:none}.tl{max-width:calc(100% - 215px)}#mm{width:150px;height:150px}.bc{gap:10px;padding:8px 10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}