:root{--ink:#0e1622;--snow:#f6f9fc;--accent:#ff5a1f;--glass:#0e16226b;--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-t:env(safe-area-inset-top,0px)}*{box-sizing:border-box}html,body{height:100%;color:var(--snow);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#c9dcf0;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;overflow:hidden}#app,#ui{position:fixed;inset:0}#app canvas{width:100%;height:100%;display:block}#ui{pointer-events:none}.hud{text-shadow:0 1px 10px #0e162273;position:absolute;inset:0}.hud-brand{top:calc(16px + var(--safe-t));left:calc(20px + var(--safe-l));letter-spacing:.06em;font-size:20px;font-style:italic;font-weight:900;position:absolute}.hud-brand span{letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-left:8px;font-size:11px;font-style:normal;font-weight:600}.hud-stats{top:calc(18px + var(--safe-t));font-variant-numeric:tabular-nums;background:var(--glass);text-shadow:none;white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:12px;position:absolute;left:50%;transform:translate(-50%)}.hud-speed{left:calc(22px + var(--safe-l));bottom:calc(20px + var(--safe-b));align-items:baseline;gap:8px;font-style:italic;display:flex;position:absolute}.hud-speed b{font-variant-numeric:tabular-nums;text-align:right;min-width:1.2ch;font-size:clamp(44px,9vmin,84px);font-weight:900;line-height:.9}.hud-speed span{letter-spacing:.12em;text-transform:uppercase;opacity:.85;font-size:14px;font-weight:700}.hud-score{top:calc(14px + var(--safe-t));right:calc(22px + var(--safe-r));text-align:right;font-style:italic;position:absolute}.hud-score>span{letter-spacing:.16em;opacity:.8;font-size:11px;font-weight:700;display:block}.hud-score>b{font-variant-numeric:tabular-nums;font-size:clamp(28px,5.4vmin,46px);font-weight:900;line-height:1;display:block}.hud-combo{opacity:0;margin-top:8px;transition:opacity .2s,transform .2s;transform:translateY(-4px)}.hud-combo.on{opacity:1;transform:none}.combo-line{font-variant-numeric:tabular-nums;font-size:20px;font-weight:900}.combo-mult{color:var(--accent);text-shadow:0 1px 8px #0e162299;margin-left:8px}.combo-bar{background:#ffffff47;border-radius:2px;width:150px;height:4px;margin:5px 0 5px auto;overflow:hidden}.combo-bar i{background:var(--snow);transform-origin:100%;height:100%;display:block}.combo-names{opacity:.9;white-space:nowrap;text-overflow:ellipsis;max-width:46vw;font-size:12px;font-style:normal;font-weight:600;overflow:hidden}.hud-live{letter-spacing:.04em;text-transform:uppercase;opacity:0;white-space:nowrap;font-size:clamp(20px,4.2vmin,36px);font-style:italic;font-weight:900;transition:opacity .15s,transform .15s;position:absolute;top:17%;left:50%;transform:translate(-50%,6px)skew(-8deg)}.hud-live.on{opacity:.92;transform:translate(-50%)skew(-8deg)}.hud-pop{text-align:center;opacity:0;white-space:nowrap;font-style:italic;transition:opacity .35s,transform .35s;position:absolute;top:26%;left:50%;transform:translate(-50%,10px)skew(-8deg)scale(.92)}.hud-pop.on{opacity:1;transition-duration:.12s;transform:translate(-50%)skew(-8deg)scale(1)}.hud-live.on+.hud-pop.on{opacity:.3}.pop-tag{letter-spacing:.22em;min-height:1.2em;font-size:clamp(12px,2.2vmin,16px);font-weight:800}.pop-name{text-transform:uppercase;font-size:clamp(26px,6vmin,54px);font-weight:900;line-height:1.05}.pop-points{font-variant-numeric:tabular-nums;font-size:clamp(18px,3.6vmin,30px);font-weight:900}.hud-pop[data-mood=good] .pop-tag,.hud-pop[data-mood=good] .pop-points{color:#ffd84a}.hud-pop[data-mood=bad] .pop-tag,.hud-pop[data-mood=bad] .pop-points{color:#ff8a70}.hud-hints{left:50%;bottom:calc(18px + var(--safe-b));background:var(--glass);-webkit-backdrop-filter:blur(8px);width:max-content;max-width:min(94vw,900px);text-shadow:none;border-radius:14px;padding:10px 16px;font-size:12.5px;transition:opacity .8s;position:absolute;transform:translate(-50%)}.hud-hints.gone{opacity:0}.hud-hints .keys,.hud-hints .touches{gap:6px;display:grid}.hud-hints .keys>div,.hud-hints .touches>div{flex-wrap:wrap;align-items:center;gap:4px 14px;display:flex}.hud-hints em{letter-spacing:.12em;text-transform:uppercase;opacity:.75;flex:0 0 76px;font-size:10.5px;font-style:normal;font-weight:800}.hud-hints .touches{display:none}.hud-hints span{white-space:nowrap}kbd{min-width:1.7em;font:inherit;text-align:center;background:#ffffff24;border:1px solid #ffffff73;border-radius:6px;margin:0 2px;padding:1px 6px;font-size:12px;font-weight:700;display:inline-block}.is-touch .hud-hints{bottom:auto;top:calc(56px + var(--safe-t))}.is-touch .hud-hints .keys{display:none}.is-touch .hud-hints .touches{display:grid}.is-touch .hud-hints span{white-space:normal}.is-touch .hud-speed{bottom:auto;top:calc(48px + var(--safe-t))}.is-touch .hud-score{top:calc(60px + var(--safe-t))}.touch{display:none;position:absolute;inset:0}.touch.on{display:block}.touch-zone{pointer-events:auto;touch-action:none;position:absolute;inset:0 42% 0 0}.stick-base{opacity:0;background:#0e16222e;border:2px solid #ffffff80;border-radius:50%;width:132px;height:132px;margin:-66px 0 0 -66px;transition:opacity .12s;position:absolute}.stick-base.on{opacity:1}.stick-knob{background:#ffffffd9;border-radius:50%;width:58px;height:58px;margin:-29px 0 0 -29px;position:absolute;top:50%;left:50%;box-shadow:0 4px 14px #0e162259}.touch-btn{pointer-events:auto;touch-action:none;background:var(--glass);color:var(--snow);font:inherit;letter-spacing:.08em;-webkit-backdrop-filter:blur(6px);border:2px solid #fff9;border-radius:999px;font-style:italic;font-weight:800;position:absolute}.touch-jump{right:calc(26px + var(--safe-r));bottom:calc(34px + var(--safe-b));width:108px;height:108px;font-size:17px}.touch-jump.held{background:var(--accent);border-color:#fff;transform:scale(.94)}.touch-small{top:calc(14px + var(--safe-t));height:40px;padding:0 16px;font-size:12px}.touch-zoom{right:calc(16px + var(--safe-r))}.touch-rewind{right:calc(100px + var(--safe-r))}.touch-grabs{right:calc(150px + var(--safe-r));bottom:calc(30px + var(--safe-b));grid-template-columns:1fr 1fr;gap:8px;display:grid;position:absolute}.touch-grab{width:78px;height:46px;font-size:11px;position:static}.touch-grab.held{background:var(--accent);border-color:#fff}.tuning{pointer-events:auto;-webkit-user-select:auto;user-select:auto;max-height:calc(100vh - 16px);overflow-y:auto;width:300px!important}#loading{color:var(--ink);background:linear-gradient(#8fbfe6,#dbe9f6);place-content:center;justify-items:center;gap:14px;transition:opacity .5s;display:grid;position:fixed;inset:0}#loading.done{opacity:0;pointer-events:none}#loading b{letter-spacing:.05em;font-size:clamp(40px,9vmin,84px);font-style:italic;font-weight:900}#loading div{background:#0e16222e;border-radius:3px;width:min(60vw,320px);height:5px;overflow:hidden}#loading i{background:var(--ink);transform-origin:0;height:100%;transition:transform .2s;display:block;transform:scaleX(0)}#loading span{letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-size:13px;font-weight:600}