:root{--bg:#120a08;--fg:#fff;--gold:#ffd23f;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#120a08;--fg:#fff}}
:root[data-theme="dark"]{--bg:#120a08;--fg:#fff}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
body{height:100%;margin:0;background:var(--bg);color:var(--fg);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;font:700 16px system-ui,sans-serif}
#g{position:relative;height:100%;max-width:480px;margin:0 auto;overflow:hidden}
#g canvas{position:absolute;inset:0;width:100%;height:100%}
#hud{position:absolute;left:0;right:0;top:0;height:62px;display:none;background:rgba(10,0,20,.6);border-bottom:1px solid #a2c}
#hr{position:absolute;left:8px;top:4px;font-size:21px;letter-spacing:1px}
#sc{position:absolute;left:12px;top:32px;font-size:26px}
#mid{position:absolute;left:0;right:0;top:4px;text-align:center;font-size:13px;color:#f6c}
#cn{color:var(--gold);font-size:16px}
#bar{margin:5px auto 0;width:56%;height:8px;background:#333;border-radius:4px}
#bf{height:100%;background:#ff7a45;border-radius:4px;width:0}
#ps{position:absolute;right:10px;top:7px;width:46px;height:46px;border:2px solid #ffd23f66;background:#0007;border-radius:10px;color:#ffa010;font-size:20px}
#ctl{position:absolute;left:0;right:0;bottom:14px;height:80px;display:none}
.cb{position:absolute;bottom:0;border-radius:50%;border:3px solid #fff;background:rgba(80,60,60,.75);color:#fff;font:700 10px system-ui;display:flex;align-items:center;justify-content:center;flex-direction:column;width:58px;height:58px;touch-action:none;font-size:22px}
#scr{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(20,6,10,.74);text-align:center;padding:16px;overflow:auto}
h2{margin:0;font-size:34px}
.b{width:80%;padding:16px;border:0;border-radius:16px;color:#fff;font:700 20px system-ui;box-shadow:0 5px 0 #0007}
.b1{background:linear-gradient(90deg,#ff7a45,#ff4f86)}.b2{background:linear-gradient(90deg,#4f6bff,#7a4fff)}.b3{background:#777}
.ttl{font-size:50px;line-height:1;background:linear-gradient(90deg,#ffd23f,#ff4f86);-webkit-background-clip:text;background-clip:text;color:transparent}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:92%}
.lv{aspect-ratio:1;border-radius:12px;border:2px solid #fff3;background:#0009;color:#fff;font:700 24px system-ui}
.lv small{display:block;font-size:11px;opacity:.75}.lv.cur{background:#5a0a4a;border-color:#f0c}
.sm{padding:10px 16px;border-radius:12px;border:2px solid #c3a;background:#4a1240;color:#fff;font:700 15px system-ui}
.tab{flex:1;padding:12px 4px;border-radius:12px;border:2px solid #fff3;background:#0008;color:#fff;font:700 14px system-ui}.tab.on{border-color:#f0c;background:#7a0a6a}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:94%}.it{background:#0009;border:2px solid #fff2;border-radius:14px;padding:8px;color:#fff;text-align:left;font:700 13px system-ui;min-height:92px}.it.on{border-color:#f0c;background:#5a0a4a}.it img{width:100%;height:56px;object-fit:cover;border-radius:6px;display:block;margin-bottom:6px}.it small{color:var(--gold);display:block}.bl{height:6px;border-radius:3px;margin:24px 4px 12px;transform:rotate(-4deg)}.rw{display:flex;justify-content:space-between;align-items:center;padding:16px;border:2px solid;border-radius:14px;background:#0008}
.pn{background:#0008;border:2px solid #a2c;border-radius:14px;padding:14px 22px;line-height:1.5}
.big{font-size:56px;color:#fff;line-height:1}.dim{opacity:.7;font-size:13px;letter-spacing:3px}