:root{--ink: #eef3ff;--ink-dim: #a9b4d6;--ink-faint: #6f7aa3;--night: #0a0f2c;--glass: rgba(14, 20, 52, .72);--glass-line: rgba(160, 200, 255, .18);--signal: #8fe9ff;--perfect: #ffffff;--warn: #ffb347;--danger: #ff5a4f;--ok: #7cf0b5;--font-display: "Michroma", "Eurostile", "Bank Gothic", "Arial Black", sans-serif;--font-num: "Barlow", "Helvetica Neue", Arial, sans-serif;--font-body: "Barlow", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0;overflow:hidden;background:var(--night);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}#app{position:fixed;inset:0;overflow:hidden;touch-action:none}#scene{position:absolute;inset:0;width:100%;height:100%;display:block}#stage{position:absolute;inset:0;touch-action:none}#vignette{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(255,60,40,.55) 100%);transition:opacity .25s}#hud{position:absolute;inset:0;pointer-events:none}.hud-top{position:absolute;left:0;right:0;top:0;padding:calc(var(--safe-top) + 14px) calc(var(--safe-right) + 16px) 0 calc(var(--safe-left) + 16px);display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px}.hud-left{display:grid;gap:8px;justify-items:start}.hud-right{display:flex;justify-content:flex-end}.hud-center{text-align:center;display:grid;justify-items:center;gap:6px}.score{font-family:var(--font-num);font-weight:700;font-size:clamp(40px,11vw,64px);line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums;text-shadow:0 2px 18px rgba(120,200,255,.35);transition:transform .12s}.score.bump{transform:scale(1.08)}.sub{font-size:13px;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}.sub b{color:var(--ink);font-weight:600}.dir-label{font-size:11px;color:var(--ink-faint);letter-spacing:.14em;text-transform:uppercase}.meter{display:grid;gap:4px;width:min(30vw,150px)}.meter-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}.meter-track{height:8px;border-radius:4px;background:#ffffff1a;overflow:hidden;box-shadow:inset 0 0 0 1px var(--glass-line);background-image:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(10,15,44,.9) calc(10% - 1px) 10%)}.meter-fill{height:100%;width:100%;background:var(--ok);transition:width .3s,background-color .3s}.meter.warn .meter-fill{background:var(--warn)}.meter.danger .meter-fill{background:var(--danger);animation:blink .6s infinite alternate}.meter.danger .meter-label{color:var(--danger)}@keyframes blink{0%{opacity:1}to{opacity:.45}}.chip{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid currentColor}.chip.lean{color:var(--warn)}.chip.cantilever{color:#e8c06a;font-variant-numeric:tabular-nums}.balance{display:flex;align-items:center;gap:8px}.balance span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}.balance-box{width:30px;height:30px;border-radius:7px;position:relative;border:1px solid var(--glass-line);background:#ffffff0d;background-image:linear-gradient(var(--glass-line),var(--glass-line)),linear-gradient(var(--glass-line),var(--glass-line));background-size:1px 100%,100% 1px;background-position:center;background-repeat:no-repeat}.balance-box i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px currentColor;color:var(--ok);transition:left .25s,top .25s,background .25s}.balance.warn .balance-box i{background:var(--warn);color:var(--warn)}.balance.danger .balance-box{border-color:var(--danger)}.balance.danger .balance-box i{background:var(--danger);color:var(--danger);animation:blink .5s infinite alternate}.ability-group{display:flex;gap:10px;pointer-events:none}.chip.shift{color:var(--signal);background:#8fe9ff1a;animation:blink .8s infinite alternate}.combo{font-family:var(--font-num);font-weight:700;font-size:26px;color:var(--perfect);display:flex;align-items:baseline;gap:6px}.combo small{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}.combo.pop{animation:pop .25s}@keyframes pop{50%{transform:scale(1.25)}}.icon-btn{pointer-events:auto;width:46px;height:46px;border-radius:14px;border:1px solid var(--glass-line);background:var(--glass);display:grid;place-items:center;backdrop-filter:blur(8px)}.icon-btn svg{width:22px;height:22px;fill:var(--ink)}.hud-bottom{position:absolute;left:0;right:0;bottom:0;padding:0 calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 18px) calc(var(--safe-left) + 16px);display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.ability{pointer-events:auto;position:relative;width:68px;height:68px;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(8px);display:grid;place-items:center;align-content:center;gap:1px;padding:0;transition:opacity .2s,transform .1s}.ability:active{transform:scale(.94)}.ability span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}.ability .glyph{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ability .ring{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg)}.ring-bg{fill:none;stroke:#ffffff14;stroke-width:4}.ring-fg{fill:none;stroke:var(--signal);stroke-width:4;stroke-linecap:round;stroke-dasharray:175.9;stroke-dashoffset:175.9;transition:stroke-dashoffset .3s}.ability.ready{border-color:var(--signal);box-shadow:0 0 18px #8fe9ff59}.ability.ready .glyph{stroke:var(--signal)}.ability.active{background:#8fe9ff40}.ability.off{opacity:.38;cursor:default}.badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;border-radius:10px;background:var(--signal);color:var(--night);font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center}.hint{align-self:center;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:10px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);animation:breathe 1.4s ease-in-out infinite}@keyframes breathe{50%{opacity:.45;transform:translateY(-3px)}}#popups{position:absolute;inset:0;pointer-events:none;overflow:hidden}.popup{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-family:var(--font-display);font-size:20px;letter-spacing:.06em;animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;text-shadow:0 2px 12px rgba(0,0,0,.45)}.popup small{display:block;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.04em;opacity:.9}.popup.perfect{color:var(--perfect);font-size:24px;text-shadow:0 0 18px rgba(143,233,255,.9)}.popup.good{color:#cfeaff}.popup.danger{color:var(--warn)}.popup.poor,.popup.miss{color:var(--danger)}.popup.info{color:var(--signal);font-size:16px}.popup.support{color:#e8c06a;font-size:16px}@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.08)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-150%) scale(1)}}@media (prefers-reduced-motion: reduce){.popup{animation-duration:1.4s;animation-timing-function:linear}.hint,.chip.shift,.meter.danger .meter-fill{animation:none}}#banner{position:absolute;left:50%;top:calc(var(--safe-top) + 150px);transform:translate(-50%);text-align:center;pointer-events:none;width:min(92vw,520px);animation:banner 1.6s ease forwards}.banner-title{font-family:var(--font-display);font-size:clamp(24px,7vw,40px);color:var(--signal);letter-spacing:.08em;text-shadow:0 0 24px rgba(143,233,255,.8)}.banner-sub{margin-top:8px;font-size:15px;color:var(--ink)}@keyframes banner{0%{opacity:0;letter-spacing:.3em}20%,75%{opacity:1;letter-spacing:.08em}to{opacity:0}}#toast{position:absolute;left:50%;bottom:calc(var(--safe-bottom) + 104px);transform:translate(-50%);max-width:min(88vw,420px);text-align:center;pointer-events:none;padding:10px 16px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line);font-size:14px;line-height:1.4;backdrop-filter:blur(8px);animation:toast 3.2s ease forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}10%,85%{opacity:1;transform:translate(-50%)}to{opacity:0}}.screen{position:absolute;inset:0;display:grid;place-items:center;overflow-y:auto;padding:calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px)}.screen.modal{background:#0508188c;backdrop-filter:blur(3px)}#menu{align-items:end;background:linear-gradient(180deg,#05081800 0% 35%,#050818cc)}.menu-inner{width:min(100%,420px);display:grid;gap:18px;justify-items:stretch;padding-bottom:8px}@media (orientation: portrait){#menu{align-items:stretch}.menu-inner{display:flex;flex-direction:column;gap:16px;min-height:100%;justify-self:center}.menu-inner .brand{padding-top:4vh}.menu-inner #btn-play{margin-top:auto}}.brand{text-align:center}.brand h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(32px,10vw,54px);letter-spacing:.06em;line-height:1.05;text-wrap:balance;background:linear-gradient(180deg,#ffffff 30%,var(--signal));-webkit-background-clip:text;background-clip:text;color:transparent}.brand .subtitle{margin:6px 0 0;font-size:18px;letter-spacing:.5em;color:var(--signal);padding-left:.5em}.brand .tagline{margin:10px 0 0;color:var(--ink-dim);font-size:15px}.primary,.secondary,.ghost{border-radius:14px;min-height:52px;padding:0 20px;font-weight:600;letter-spacing:.06em}.primary{border:0;font-size:18px;text-transform:uppercase;color:var(--night);background:linear-gradient(180deg,#ffffff,var(--signal));box-shadow:0 8px 30px #8fe9ff59}.primary:active{transform:translateY(1px)}.secondary{border:1px solid var(--glass-line);background:#ffffff0f;font-size:16px}.ghost{border:0;background:transparent;color:var(--ink-dim);min-height:44px;font-size:15px}.records{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;gap:8px}.records div{text-align:center;padding:10px 4px;border-radius:12px;background:#ffffff0a}.records dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}.records dd{margin:4px 0 0;font-family:var(--font-num);font-weight:700;font-size:20px;font-variant-numeric:tabular-nums}.section-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}.skin-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.skin{border:1px solid var(--glass-line);border-radius:12px;background:#ffffff0a;padding:8px 4px;display:grid;justify-items:center;gap:6px;font-size:12px;position:relative}.skin i{width:34px;height:34px;border-radius:9px;display:block}.skin.selected{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal) inset}.skin.locked{opacity:.45}.skin.locked i{filter:grayscale(1)}.skin .lock{font-size:10px;color:var(--ink-faint);line-height:1.2;text-align:center}.menu-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px}.panel{width:min(100%,400px);display:grid;gap:12px;padding:24px 20px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);box-shadow:0 30px 80px #00000073}.panel h2{margin:0 0 6px;text-align:center;font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.06em;text-wrap:balance}.result{gap:10px}.result-score{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}#over-score{font-family:var(--font-num);font-weight:700;font-size:clamp(52px,16vw,76px);line-height:1;font-variant-numeric:tabular-nums}#over-newbest{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--night);background:var(--warn);padding:4px 8px;border-radius:6px;animation:pop .6s 2}.result-best{text-align:center;color:var(--ink-dim);font-size:14px}.breakdown{display:grid;gap:6px;padding:10px 12px;border-radius:14px;background:#ffffff0a}.breakdown .row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-dim)}.breakdown .row b{color:var(--ink);font-variant-numeric:tabular-nums}.breakdown .bar{height:6px;border-radius:3px;overflow:hidden;display:flex;background:#ffffff0f}.breakdown .bar i:nth-child(1){background:#7cc6ff}.breakdown .bar i:nth-child(2){background:#fff}.breakdown .bar i:nth-child(3){background:#c39bff}.breakdown .row .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:8px}.result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.result-stats div{text-align:center}.result-stats dt,.result-stats span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);display:block}.result-stats b{font-family:var(--font-num);font-size:22px;font-weight:700}.tags{display:flex;flex-wrap:wrap;gap:6px}.tag{padding:6px 10px;border-radius:10px;background:#c39bff24;border:1px solid rgba(195,155,255,.4);font-size:13px}.tag small{display:block;color:var(--ink-dim);font-size:11px}.tags .empty{font-size:13px;color:var(--ink-faint)}.unlocked{text-align:center;color:var(--warn);font-weight:600}.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:16px}.setting.stack{flex-direction:column;align-items:stretch;gap:8px}.toggle{width:54px;height:32px;border-radius:16px;border:1px solid var(--glass-line);background:#ffffff1a;position:relative;transition:background .2s;flex:none}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--ink-dim);transition:transform .2s,background .2s}.toggle[aria-checked=true]{background:#8fe9ff59}.toggle[aria-checked=true]:after{transform:translate(22px);background:var(--signal)}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:12px;background:#ffffff0f}.segmented button{border:0;background:transparent;min-height:38px;border-radius:9px;color:var(--ink-dim)}.segmented button.on{background:var(--signal);color:var(--night);font-weight:600}.howto-list{margin:0;padding-left:22px;display:grid;gap:10px;line-height:1.45;color:var(--ink);font-size:15px;max-width:65ch}#loading{position:absolute;inset:0;display:grid;place-items:center;background:var(--night);transition:opacity .4s}#loading.done{opacity:0;pointer-events:none}.loader{width:34px;height:34px;border-radius:6px;background:var(--signal);animation:spin 1s cubic-bezier(.6,0,.4,1) infinite}@keyframes spin{to{transform:rotate(180deg)}}#fatal{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:16px;line-height:1.5;background:var(--night)}@media (orientation: landscape) and (min-width: 820px){#menu{place-items:center start;padding-left:max(7vw,32px);background:linear-gradient(90deg,#050818d1,#0508188c 34%,#05081800 60%)}.brand{text-align:left}.brand .subtitle{padding-left:0}}@media (max-height: 640px){.menu-inner{gap:12px}.brand .tagline{display:none}.panel{padding:18px 16px;gap:8px}}@media (max-width: 380px){.meter{width:96px}.ability{width:60px;height:60px}}#debug{position:absolute;top:calc(var(--safe-top) + 70px);right:8px;width:270px;max-height:calc(100% - 90px);overflow-y:auto;background:#000000d1;color:#c8ffd8;font:11px/1.45 ui-monospace,Menlo,Consolas,monospace;border:1px solid rgba(124,240,181,.4);border-radius:10px;padding:10px;z-index:50;user-select:text}#debug h3{margin:0 0 6px;font-size:12px;color:#7cf0b5;display:flex;justify-content:space-between}#debug pre{margin:0 0 8px;white-space:pre-wrap}#debug label{display:flex;align-items:center;gap:6px;margin:3px 0}#debug input[type=range]{flex:1}#debug .dbg-btns{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}#debug button{background:#12321f;border:1px solid #2f6a46;color:#c8ffd8;border-radius:6px;padding:4px 6px;font:inherit}#debug .log{max-height:120px;overflow-y:auto;color:#8fb39c;border-top:1px solid #234;padding-top:4px}.chip.wing{color:#ffd76a;background:#ffd76a1a;font-variant-numeric:tabular-nums}.ability.branch{border-color:#ffd76a;box-shadow:0 0 18px #ffd76a59;animation:branch-in .35s ease}.ability.branch .glyph{stroke:#ffd76a}@keyframes branch-in{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}#banner.gold .banner-title{color:#ffd76a;text-shadow:0 0 24px rgba(255,215,106,.8)}#branch-picker{position:absolute;inset:0;display:grid;place-items:end center;padding:0 16px calc(var(--safe-bottom) + 108px);background:#05081859}.picker-panel{width:min(100%,420px);padding:16px;border-radius:18px;text-align:center;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);animation:toast-in .2s ease}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.picker-panel h3{margin:0 0 6px;font-family:var(--font-display);font-size:16px;letter-spacing:.08em;color:#ffd76a}.picker-hint{margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--ink-dim)}.picker-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}.pick{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:14px;background:#ffffff0f;border:1px solid var(--glass-line);color:var(--ink);font:inherit;cursor:pointer}.pick b{font-size:22px;line-height:1;font-family:var(--font-num)}.pick span{font-size:13px}.pick:active{transform:scale(.96)}.pick.primary-pick{border-color:#ffd76a;background:#ffd76a24}.pick:focus-visible{outline:2px solid var(--signal);outline-offset:2px}#pick-cancel{width:100%}.hub-status{margin-top:6px;font-size:13px;color:var(--ink-dim);text-align:center}.hub-status.good{color:var(--signal)}.hub-status.bad{color:var(--warn)}.run-rank{display:flex;align-items:baseline;justify-content:center;gap:8px;font-size:13px;color:var(--ink-dim)}.run-rank b{font-family:var(--font-num);font-size:18px;font-weight:700;color:var(--signal);letter-spacing:.02em}.board{border:1px solid var(--glass-line);border-radius:12px;padding:10px 12px;background:#ffffff08}.board-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.board-head .section-label{margin:0}.board-tabs{display:flex;gap:4px;font-size:12px;color:var(--ink-faint)}.board-tabs button{appearance:none;border:1px solid transparent;background:none;color:var(--ink-dim);font:inherit;font-size:12px;padding:4px 9px;border-radius:999px;cursor:pointer;min-height:28px}.board-tabs button.on{border-color:var(--glass-line);background:#8fe9ff1f;color:var(--ink)}.board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.board-list li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;font-size:14px}.board-list .pos{font-family:var(--font-num);font-weight:700;color:var(--ink-faint);text-align:center}.board-list .top1 .pos{color:#ffd76a}.board-list .top2 .pos{color:#d8e2f2}.board-list .top3 .pos{color:#e3a57a}.board-list .who{min-width:0;display:flex;align-items:baseline;gap:6px}.board-list .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-list small{flex:none;font-size:11px;color:var(--ink-faint)}.board-list b{font-family:var(--font-num);font-weight:700}.board-list li.me{color:var(--signal)}.board-list li.current{background:#8fe9ff29;box-shadow:inset 0 0 0 1px #8fe9ff73;color:var(--ink)}.board-list li.current b{color:var(--signal)}.board-list li.gap{display:block;text-align:center;padding:0;color:var(--ink-faint);line-height:1}.board-note{font-size:12px;color:var(--ink-faint);text-align:center;padding:6px 0 2px}.board-more{appearance:none;border:0;background:none;color:var(--ink-dim);font:inherit;font-size:12px;width:100%;padding:6px 0 0;cursor:pointer}@media (max-height: 640px){.board-list li{padding:3px 8px;font-size:13px}}