*,:before,:after{box-sizing:border-box}html,body{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;background:#000;width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{color:#e4e2ec;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;position:fixed;top:0;bottom:0;left:0;right:0}#app{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}#stage{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;position:absolute;top:0;bottom:0;left:0;right:0}#ui{pointer-events:none;z-index:10;padding:calc(env(safe-area-inset-top,0px) + 14px) calc(env(safe-area-inset-right,0px) + 14px) calc(env(safe-area-inset-bottom,0px) + 14px) calc(env(safe-area-inset-left,0px) + 14px);position:absolute;top:0;bottom:0;left:0;right:0}#ui>*{pointer-events:none}#ui [data-touch]{pointer-events:auto}#ui .rhythm-layer:not(.on) [data-touch],#ui .charselect:not(.on) [data-touch],#ui .results:not(.on) [data-touch],#ui .dialogue:not(.on) [data-touch],#ui .hud-hidden [data-touch]{pointer-events:none}:root{--hud-ink:#ededf2;--hud-dim:#a9a2bc;--hud-line:#ededf28c;--hud-fill:#0a081294;--hud-pink:#d81e5b;--hud-lime:#b3ff66;--hud-gold:#ffc94a;--hud-font:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace}.hud-layer{padding:inherit;grid-template-rows:auto 1fr auto;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.hud-hidden{opacity:0;pointer-events:none!important}.objective{border:1px solid var(--hud-line);background:var(--hud-fill);-webkit-backdrop-filter:blur(2px);font-family:var(--hud-font);border-radius:9px;justify-self:start;align-items:flex-start;gap:8px;max-width:74%;padding:9px 14px 9px 11px;line-height:1.35;transition:opacity .5s;display:flex}.objective .spark{color:var(--hud-gold);font-size:13px;line-height:1.2}.objective .lbl{letter-spacing:.18em;text-transform:uppercase;color:var(--hud-ink);font-size:11px;display:block}.objective .val{letter-spacing:.1em;text-transform:uppercase;color:var(--hud-ink);margin-top:2px;font-size:13px;display:block}.hud-bottom{justify-content:space-between;align-self:end;align-items:flex-end;gap:10px;display:flex;position:relative}.stick-wrap{flex-direction:column;gap:5px;display:flex}.stick{opacity:0;background:#0a081247;border:1px solid #ededf247;border-radius:50%;width:108px;height:108px;transition:opacity .28s;position:relative}.stick.on{opacity:.85}.stick .knob{border:1px solid var(--hud-line);will-change:transform;background:#d81e5b29;border-radius:50%;width:46px;height:46px;margin:-23px 0 0 -23px;position:absolute;top:50%;left:50%}.stick .arrows{color:#ededf280;font-family:var(--hud-font);font-size:10px;position:absolute;top:0;bottom:0;left:0;right:0}.stick .arrows i{font-style:normal;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.stick .arrows i:first-child{top:9px}.stick .arrows i:nth-child(2){top:auto;bottom:5px;transform:translate(-50%)}.stick .arrows i:nth-child(3){left:9px}.stick .arrows i:nth-child(4){left:auto;right:9px;transform:translateY(-50%)}.stick-label{font-family:var(--hud-font);letter-spacing:.18em;color:var(--hud-dim);opacity:0;font-size:10px;transition:opacity .28s}.stick-label.on{opacity:.8}.minimap{background:#08060e9e;border:1px solid #ededf273;border-radius:50%;width:86px;height:86px;position:relative;overflow:hidden}.minimap canvas{width:100%;height:100%;display:block}.prompt{border:1px solid var(--hud-line);-webkit-backdrop-filter:blur(3px);font-family:var(--hud-font);letter-spacing:.14em;text-transform:uppercase;color:var(--hud-ink);white-space:nowrap;opacity:0;pointer-events:none;background:#08060ed1;border-radius:999px;align-items:center;gap:10px;max-width:calc(100vw - 40px);padding:10px 18px 10px 10px;font-size:13px;transition:opacity .22s,transform .22s;display:flex;position:absolute;bottom:calc(100% + 20px);left:50%;transform:translate(-50%)translateY(6px)}.prompt.on{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.prompt:active{background:#d81e5b4d}.prompt .key{border:1px solid var(--hud-line);border-radius:50%;flex:none;place-items:center;width:26px;height:26px;font-size:12px;display:grid}.dialogue{padding:inherit;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 60px);opacity:0;pointer-events:none;flex-direction:column;justify-content:flex-end;align-items:center;gap:18px;transition:opacity .3s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.dialogue.on{opacity:1;pointer-events:auto}.dialogue .line{font-family:var(--hud-font);letter-spacing:.1em;text-transform:uppercase;text-align:center;color:var(--hud-ink);border:1px solid var(--hud-line);-webkit-backdrop-filter:blur(3px);background:#08060ebd;border-radius:10px;max-width:88%;padding:14px 20px;font-size:16px;line-height:1.5}.dialogue .choices{justify-content:center;gap:14px;width:100%;max-width:340px;display:flex}.continue{font-family:var(--hud-font);letter-spacing:.22em;text-transform:uppercase;color:var(--hud-dim);align-items:center;gap:10px;font-size:11px;animation:1.8s ease-in-out infinite contPulse;display:flex}.continue i{color:var(--hud-pink);font-size:10px;font-style:normal}@keyframes contPulse{0%,to{opacity:.45}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.continue{opacity:.8;animation:none}}.choice{min-height:58px;font-family:var(--hud-font);letter-spacing:.22em;color:var(--hud-ink);border:1px solid var(--hud-line);background:#0a0812b8;border-radius:8px;flex:1;place-items:center;font-size:17px;transition:background .12s,transform 80ms,border-color .12s;display:grid}.choice:active,.choice.pressed{background:#d81e5b6b;border-color:#fff;transform:scale(.97)}.boot{z-index:20;background:#000;place-items:center;transition:opacity .8s;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.boot.has-art{background-image:url(../img/title-screen.webp);background-position:50%;background-repeat:no-repeat;background-size:cover}.boot.has-art .boot-inner{align-self:center;margin-bottom:0}.boot.out{opacity:0;pointer-events:none}.boot-inner{justify-items:center;gap:30px;display:grid}.title-stack{text-align:center;filter:drop-shadow(1.5px 0 #00dcff80)drop-shadow(-1.5px 0 #ff00c873);justify-items:center;gap:0;font-family:Georgia,Times New Roman,Didot,serif;line-height:.94;display:grid}.title-stack .word{letter-spacing:.04em;font-size:clamp(40px,15vw,82px)}.title-stack .cross{letter-spacing:.3em;color:var(--hud-lime);filter:none;text-shadow:0 0 12px #b3ff668c;margin:clamp(8px,2.4vw,16px) 0;font-size:clamp(15px,4.6vw,26px)}.massive-mark{image-rendering:auto;filter:drop-shadow(0 0 18px #b4d2ff4d)drop-shadow(0 0 44px #d81e5b2e);width:min(74vw,420px);height:auto;display:block}.wordmark{letter-spacing:.06em;filter:drop-shadow(1.5px 0 #00dcff80)drop-shadow(-1.5px 0 #ff00c873);align-items:baseline;font-family:Georgia,Times New Roman,Didot,serif;font-size:clamp(38px,13vw,66px);line-height:1;display:flex}.wordmark .chrome,.title-stack .chrome{background:linear-gradient(#f4f4f8 0%,#b9c2cf 22%,#6f7c8e 42%,#e8ecf2 52%,#8e99a8 66%,#d8dee7 82%,#7d8896 100%);color:#0000;-webkit-background-clip:text;background-clip:text}.wordmark .flip{display:inline-block;transform:scaleX(-1)}.tap{font-family:var(--hud-font);letter-spacing:.34em;text-transform:uppercase;color:#fff;text-shadow:0 0 6px #fffffff2,0 0 18px #b3ff66cc,0 0 40px #b3ff6673,0 2px 10px #000000bf;font-size:clamp(19.2px,5.63vw,25.6px);font-weight:700;animation:1.9s ease-in-out infinite tapPulse}@keyframes tapPulse{0%,to{opacity:.62;transform:scale(.99)}50%{opacity:1;transform:scale(1.02)}}.loadbar{background:#ededf22e;width:min(52vw,210px);height:2px;overflow:hidden}.loadbar span{background:var(--hud-lime);width:0%;height:100%;transition:width .3s;display:block}.load-note{font-family:var(--hud-font);letter-spacing:.24em;text-transform:uppercase;color:var(--hud-dim);font-size:10px}@media (prefers-reduced-motion:reduce){.tap{opacity:.8;animation:none}*{transition-duration:.01ms!important}}.endcard{background:#000}.date-line{font-family:var(--hud-font);letter-spacing:.22em;text-transform:uppercase;color:var(--hud-ink);text-align:center;text-indent:.22em;text-shadow:0 0 18px #d81e5b59,0 0 42px #8ca0ff33;justify-items:center;gap:clamp(12px,3.4vw,20px);font-size:clamp(20px,7.4vw,38px);line-height:1.25;display:grid}.date-line .rule{background:var(--hud-lime);opacity:.75;text-indent:0;width:clamp(46px,16vw,84px);height:1px}.rhythm-layer{z-index:8;opacity:0;pointer-events:none;transition:opacity .45s;position:absolute;top:0;bottom:0;left:0;right:0}.rhythm-layer.on{opacity:1}.rhythm-layer canvas{image-rendering:auto;width:100%;height:100%;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.lane-zones{grid-template-columns:repeat(4,1fr);display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.rhythm-layer.on .lane-zone{pointer-events:auto}.lane-zone{-webkit-tap-highlight-color:transparent;touch-action:none}.lane-zone:active{background:#ffffff09}.charselect,.results{padding:inherit;opacity:0;pointer-events:none;--cs-accent:var(--hud-lime);flex-direction:column;align-items:center;transition:opacity .45s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.charselect.on,.results.on{opacity:1;pointer-events:auto}.charselect{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px);justify-content:flex-end;gap:16px}.cs-eyebrow{font-family:var(--hud-font);letter-spacing:.28em;text-transform:uppercase;color:var(--hud-dim);font-size:11px}.cs-row{justify-content:center;align-items:center;gap:14px;width:100%;max-width:360px;display:flex}.cs-arrow{border:1px solid var(--hud-line);width:52px;height:52px;color:var(--hud-ink);font-size:24px;font-family:var(--hud-font);cursor:pointer;background:#0a0812b3;border-radius:50%;flex:none;place-items:center;line-height:1;display:grid}.cs-arrow:active{background:var(--cs-accent);color:#0a0812}.cs-label{text-align:center;flex:1;min-width:0}.cs-name{font-family:var(--hud-font);letter-spacing:.16em;text-transform:uppercase;color:var(--cs-accent);text-shadow:0 0 22px color-mix(in srgb, var(--cs-accent) 55%, transparent);font-size:clamp(24px,8vw,40px);line-height:1.05}.cs-desc{font-family:var(--hud-font);letter-spacing:.1em;color:var(--hud-ink);opacity:.85;text-wrap:balance;max-width:92vw;margin-top:8px;font-size:clamp(11px,3.4vw,14px);line-height:1.45}.cs-dots{gap:8px;display:flex}.cs-dot{background:#ededf247;border-radius:50%;width:6px;height:6px}.cs-dot.on{background:var(--cs-accent)}.cs-select{width:100%;max-width:340px;min-height:60px;font-family:var(--hud-font);letter-spacing:.28em;text-transform:uppercase;color:var(--hud-ink);border:1px solid var(--hud-line);cursor:pointer;background:#0a0812c7;border-radius:8px;font-size:17px}.cs-select:active{background:var(--cs-accent);color:#0a0812}.countdown{pointer-events:none;z-index:12;place-items:center;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.countdown span{font-family:var(--hud-font);letter-spacing:.06em;color:#fff;text-shadow:0 0 34px #d81e5bb3,0 0 80px #788cff66;font-size:clamp(52px,22vw,130px);font-weight:700;animation:.45s cubic-bezier(.2,.9,.3,1) both cdPop}.countdown.logo{z-index:13}.countdown.logo img{filter:drop-shadow(0 0 26px #b3ff668c)drop-shadow(0 0 60px #783cff59);width:min(94vw,620px);height:auto;animation:logoSlam var(--slam,1s) cubic-bezier(.16, .84, .32, 1) both;will-change:transform, opacity;display:block}@keyframes logoSlam{0%{opacity:0;transform:scale(2.7)rotate(-4deg)}16%{opacity:1;transform:scale(1)rotate(0)}24%{transform:scale(1.03)}46%{opacity:1;transform:scale(1)}56%{opacity:.1}63%{opacity:1}72%{opacity:.08}79%{opacity:1;transform:scale(1.06)}to{opacity:0;transform:scale(1.28)}}@media (prefers-reduced-motion:reduce){.countdown.logo img{animation:logoHold var(--slam,1s) ease-out both}@keyframes logoHold{0%{opacity:0;transform:scale(1.1)}18%,80%{opacity:1;transform:scale(1)}to{opacity:0}}}@keyframes cdPop{0%{opacity:0;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}.results{justify-content:center;gap:12px;overflow-y:auto}.res-title{font-family:var(--hud-font);letter-spacing:.3em;text-transform:uppercase;color:var(--hud-dim);font-size:12px}.res-rank{text-align:center}.res-rank-value{font-family:var(--hud-font);letter-spacing:.1em;color:var(--cs-accent);text-shadow:0 0 28px color-mix(in srgb, var(--cs-accent) 60%, transparent);font-size:clamp(30px,11vw,56px);font-weight:700}.res-rank-pct{font-family:var(--hud-font);letter-spacing:.2em;color:var(--hud-dim);font-size:14px}.res-meta{font-family:var(--hud-font);letter-spacing:.16em;text-transform:uppercase;color:var(--hud-dim);gap:8px;font-size:11px;display:flex}.res-big{gap:10px;width:100%;max-width:340px;display:flex}.res-stat{border:1px solid var(--hud-line);text-align:center;background:#0a0812ad;border-radius:9px;flex:1;padding:10px 12px}.res-stat .k{font-family:var(--hud-font);letter-spacing:.22em;text-transform:uppercase;color:var(--hud-dim);font-size:9px}.res-stat .v{font-family:var(--hud-font);color:var(--hud-ink);font-variant-numeric:tabular-nums;font-size:22px}.res-table{border:1px solid var(--hud-line);background:#0a08129e;border-radius:9px;width:100%;max-width:340px;overflow:hidden}.res-row{font-family:var(--hud-font);letter-spacing:.18em;border-bottom:1px solid #ededf214;justify-content:space-between;padding:7px 14px;font-size:12px;display:flex}.res-row:last-child{border-bottom:0}.res-row .res-v{font-variant-numeric:tabular-nums}.res-row.crush .res-k{color:#ff4de0}.res-row.ate .res-k{color:#b3ff66}.res-row.hot .res-k{color:#ffb347}.res-row.cute .res-k{color:#6ec9ff}.res-row.mess .res-k{color:#8a8a9a}.res-energy{gap:5px;width:100%;max-width:340px;display:grid}.res-energy .res-k{font-family:var(--hud-font);letter-spacing:.22em;text-transform:uppercase;color:var(--hud-dim);font-size:9px}.res-bar{background:#ededf224;border-radius:3px;height:5px;overflow:hidden}.res-bar-fill{background:var(--cs-accent);height:100%;transition:width 1.1s cubic-bezier(.2,.8,.3,1)}.res-pct{font-family:var(--hud-font);color:var(--hud-dim);text-align:right;font-size:11px}.res-back{width:100%;max-width:340px;min-height:58px;font-family:var(--hud-font);letter-spacing:.26em;text-transform:uppercase;color:var(--hud-ink);border:1px solid var(--hud-line);cursor:pointer;background:#0a0812c7;border-radius:8px;margin-top:6px;font-size:15px}.res-back:active{background:var(--cs-accent);color:#0a0812}
