:root{--bg:#0a0a12;--panel:#14141f;--panel-2:#1c1c2b;--line:#ffffff17;--text:#eeeef7;--muted:#eeeef78c;--accent:#8b5cf6;--accent-2:#ff4fa3;--perfect:#3ddc84;--good:#ffd23f;--miss:#ff4d5e;--grad:linear-gradient(135deg, var(--accent), var(--accent-2));--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;margin:0}body{-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit;cursor:pointer}.app{height:100%}.screen{max-width:520px;min-height:100%;padding:max(20px, env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));background:radial-gradient(600px 300px at 50% -60px, #8b5cf647, transparent 70%), var(--bg);flex-direction:column;gap:22px;margin:0 auto;display:flex}.muted{color:var(--muted);margin:0;font-size:.85rem;line-height:1.45}.center{text-align:center}.small-print{font-size:.75rem}.error{color:var(--miss);text-align:center;margin:0}.brand{text-align:center;padding-top:8px}.brand h1{letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;margin:10px 0 2px;font-size:2.1rem;font-weight:900}.brand p{color:var(--muted);letter-spacing:.08em;margin:0;font-size:.85rem}.brand-logo{border-radius:50%;width:64px;height:64px;margin:0 auto;display:block}.section-title{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:.72rem}.track-list{flex-direction:column;gap:8px;display:flex}.track{text-align:left;border:1.5px solid var(--line);background:var(--panel);border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;transition:border-color .15s,background .15s,transform .1s;display:flex}.track:active{transform:scale(.99)}.track.on{border-color:var(--accent);background:linear-gradient(135deg,#8b5cf633,#ff4fa31a)}.track-main b{font-size:1.02rem;display:block}.track-main span,.track-best span{color:var(--muted);font-size:.75rem}.track-best{text-align:right}.track-best b{font-size:1.05rem;display:block}.segmented{background:var(--panel);border:1.5px solid var(--line);border-radius:16px;grid-auto-columns:1fr;grid-auto-flow:column;gap:6px;padding:5px;display:grid}.segmented button{background:0 0;border:0;border-radius:11px;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;display:flex}.segmented button span{color:var(--muted);font-size:.68rem}.segmented button.on{background:var(--grad)}.segmented button.on span{color:#ffffffd9}.btn{border:1.5px solid var(--line);background:var(--panel-2);border-radius:14px;padding:14px 18px;font-size:1rem;font-weight:700;transition:transform .1s,opacity .15s}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.6;cursor:default}.btn.primary{background:var(--grad);border-color:#0000}.btn.big{padding:18px;font-size:1.1rem}.btn.ghost{background:0 0}.btn.small{padding:8px 12px;font-size:.85rem}.row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.sticky-cta{background:linear-gradient(to top, var(--bg) 70%, transparent);flex-direction:column;gap:8px;margin-bottom:-6px;padding:14px 0 6px;display:flex;position:sticky;bottom:0}.settings{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}.settings summary{cursor:pointer;font-size:.9rem;font-weight:600}.settings label{margin:12px 0 8px;font-size:.9rem;display:block}.settings input[type=range]{width:100%;accent-color:var(--accent);margin-top:8px}.topbar{grid-template-columns:1fr auto 1fr;align-items:center;display:grid}.topbar h2{margin:0;font-size:1.1rem}.topbar .btn{justify-self:start}.chips{gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.chip{background:var(--panel);border:1.5px solid var(--line);border-radius:999px;flex:none;padding:8px 14px;font-size:.85rem}.chip.on{background:var(--grad);border-color:#0000}.score-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.score-list li{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;grid-template-columns:34px 1fr;grid-template-areas:"rank pts""rank meta";column-gap:8px;padding:12px 14px;display:grid}.score-list .rank{color:var(--accent-2);grid-area:rank;align-self:center;font-size:1.2rem;font-weight:900}.score-list .pts{grid-area:pts;font-size:1.15rem;font-weight:800}.score-list .meta{color:var(--muted);grid-area:meta;font-size:.78rem}.score-list .score-name{color:var(--text)}.score-list li.gold .rank{color:#ffd23f}.score-list li.silver .rank{color:#d7dbe3}.score-list li.bronze .rank{color:#d98a4e}.score-list li.mine{border-color:var(--accent);background:linear-gradient(135deg,#8b5cf629,#ff4fa314)}.game{background:var(--bg);position:fixed;inset:0;overflow:hidden}.game-canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.pause-btn{top:max(14px, env(safe-area-inset-top));border:1.5px solid var(--line);background:#14141fbf;border-radius:50%;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;display:flex;position:absolute;right:14px}.pause-btn span{background:var(--text);border-radius:2px;width:4px;height:16px}.game-title{top:max(66px, calc(env(safe-area-inset-top) + 52px));letter-spacing:.08em;text-transform:uppercase;color:var(--muted);pointer-events:none;font-size:.7rem;position:absolute;right:14px}.overlay{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#06060cd1;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.panel{text-align:center;flex-direction:column;gap:10px;width:min(360px,100%);display:flex}.panel h2{margin:0 0 8px}.share-panel{max-height:100%;overflow:auto}.card-preview{aspect-ratio:9/16;border:1.5px solid var(--line);-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default;border-radius:14px;align-self:center;width:min(210px,50vw)}.toast{top:max(72px, calc(env(safe-area-inset-top) + 58px));color:var(--good);white-space:nowrap;pointer-events:none;background:#ffd23f24;border:1px solid #ffd23f66;border-radius:999px;padding:8px 14px;font-size:.78rem;animation:5s forwards fade;position:absolute;left:50%;transform:translate(-50%)}.toast.bottom{top:auto;bottom:calc(24px + env(safe-area-inset-bottom));background:var(--panel-2);border-color:var(--line);color:var(--text);animation:none;position:fixed}.share-panel .toast{color:var(--text);align-self:center;animation:none;position:static;transform:none}@keyframes fade{0%,70%{opacity:1}to{opacity:0}}.results{text-align:center;justify-content:center;align-items:center;gap:8px}.results-head{flex-direction:column;align-items:center;gap:10px;display:flex}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:.8rem}.badge{background:var(--grad);border-radius:999px;padding:5px 12px;font-size:.78rem;font-weight:800}.grade{background:var(--grad);color:#0000;-webkit-background-clip:text;background-clip:text;margin-top:10px;font-size:7rem;font-weight:900;line-height:1}.big-score{font-size:3.4rem;font-weight:900;line-height:1}.label{letter-spacing:.2em;color:var(--muted);margin-bottom:14px;font-size:.72rem}.stat-grid{grid-template-columns:repeat(3,1fr);gap:8px;width:100%;display:grid}.stat-grid div{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:12px 6px}.stat-grid b{font-size:1.25rem;display:block}.stat-grid span{color:var(--muted);font-size:.72rem}.judge-row{justify-content:center;gap:14px;margin:10px 0 18px;font-size:.85rem;font-weight:700;display:flex}.j.perfect{color:var(--perfect)}.j.good{color:var(--good)}.j.miss{color:var(--miss)}.name-prompt{background:var(--panel);border:1.5px solid var(--line);text-align:center;border-radius:14px;flex-direction:column;gap:8px;width:100%;padding:14px;display:flex}.name-prompt .row{grid-template-columns:1fr auto}.text-input{border:1.5px solid var(--line);background:var(--panel-2);width:100%;color:var(--text);font:inherit;border-radius:12px;padding:12px 14px}.text-input:focus{outline:2px solid var(--accent);outline-offset:1px}.actions{flex-direction:column;gap:8px;width:100%;display:flex}.share-thumb{background:0 0;border:none;flex-direction:column;align-self:center;align-items:center;gap:6px;margin-bottom:2px;padding:0;display:flex}.share-thumb img,.share-thumb video{aspect-ratio:9/16;object-fit:cover;border:1.5px solid var(--line);border-radius:12px;width:88px;transition:transform .15s;box-shadow:0 8px 24px #00000059}.share-thumb:active img,.share-thumb:active video{transform:scale(.96)}.share-thumb span{color:var(--muted);font-size:.7rem}