@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Space+Grotesk:wght@400;600;700&display=swap";:root{font-family:Space Grotesk,system-ui,-apple-system,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light;--bg-ink: #0b0d16;--bg-mid: #11182a;--bg-glow: #1c2a4a;--accent: #ff7a59;--accent-2: #6ef3c5;--accent-3: #f6d365;--text: #f7f3ee;--muted: rgba(247, 243, 238, .6);--panel: rgba(16, 20, 35, .8);--stroke: rgba(255, 255, 255, .08)}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:radial-gradient(circle at top,rgba(255,122,89,.2),transparent 50%),radial-gradient(circle at 80% 20%,rgba(110,243,197,.18),transparent 45%),linear-gradient(160deg,var(--bg-ink),var(--bg-mid) 55%,var(--bg-glow));color:var(--text)}button,input{font:inherit}button{border:none;border-radius:999px;padding:10px 20px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}button:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}button:hover{transform:translateY(-1px)}.game{min-height:100%;display:flex;flex-direction:column;gap:24px;padding:32px clamp(20px,4vw,64px) 40px}.hud{display:grid;grid-template-columns:minmax(180px,1fr) auto auto;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--stroke);border-radius:24px;padding:18px 24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 45px #03061073}.brand h1{font-family:Bebas Neue,sans-serif;letter-spacing:2px;font-size:clamp(28px,4vw,44px);margin:0}.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted)}.stats{display:flex;gap:16px}.stat{background:#080a12a6;border:1px solid var(--stroke);padding:10px 14px;border-radius:16px;min-width:88px}.label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.value{font-size:20px;font-weight:600}.controls{display:flex;gap:12px}.primary{background:linear-gradient(120deg,var(--accent),var(--accent-3));color:#15151d;font-weight:600;box-shadow:0 8px 18px #ff7a5959}.ghost{background:transparent;color:var(--text);border:1px solid var(--stroke)}.stage{display:grid;grid-template-columns:minmax(220px,320px) minmax(280px,1fr);gap:24px;align-items:start}.instructions{background:var(--panel);border:1px solid var(--stroke);border-radius:24px;padding:22px;box-shadow:0 16px 35px #03061066}.instructions h2{margin:0 0 12px;font-size:22px}.instructions p{margin:0 0 12px;color:var(--muted)}.keys{display:flex;gap:10px;margin-bottom:12px}.keys span{width:44px;height:44px;border-radius:14px;background:#ffffff14;border:1px solid var(--stroke);display:grid;place-items:center;font-size:18px;color:var(--text)}.note{font-size:13px}.lane{position:relative;height:520px;background:#04060ca6;border-radius:32px;border:1px solid var(--stroke);overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0a,0 22px 50px #0508128c}.impact-zone{position:absolute;top:28px;left:0;right:0;display:grid;justify-items:center;gap:8px;z-index:2}.impact-square{width:90px;height:90px;border-radius:18px;border:2px solid rgba(255,255,255,.5);box-shadow:0 0 22px #6ef3c559;background:radial-gradient(circle at top,rgba(110,243,197,.2),transparent 70%)}.feedback{font-size:16px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);transition:color .2s ease,transform .2s ease}.feedback[data-state=good]{color:var(--accent-2);transform:translateY(-2px) scale(1.02)}.feedback[data-state=miss]{color:var(--accent)}.track{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding-top:70px}.track-glow{position:absolute;left:50%;top:50%;width:140px;height:280px;transform:translate(-50%,-50%);filter:blur(2px)}.arrow{position:absolute;width:80px;height:80px;border-radius:18px;display:grid;place-items:center;font-size:34px;font-weight:700;color:#0f111b;box-shadow:0 12px 24px #00000059;transition:transform .08s linear}.arrow.up{background:linear-gradient(140deg,#d3f8ff,#6ef3c5)}.arrow.right{background:linear-gradient(140deg,#ffd2ba,#ff7a59)}.arrow.down{background:linear-gradient(140deg,#fff0c2,#f6d365)}.arrow.left{background:linear-gradient(140deg,#d7d4ff,#8f8bff)}@media(max-width:900px){.hud{grid-template-columns:1fr}.stats{justify-content:space-between}.stage{grid-template-columns:1fr}}body{margin:0;font-family:Space Grotesk,system-ui,sans-serif;background:#f6f3ff}.game[data-v-042fd034]{--bg-main: radial-gradient(circle at 10% 20%, #ffcd6b 0 120px, transparent 120px), radial-gradient(circle at 92% 12%, #7ee8ff 0 110px, transparent 110px), radial-gradient(circle at 85% 78%, #ff86c8 0 130px, transparent 130px), radial-gradient(circle at 12% 86%, #9dff8f 0 120px, transparent 120px), linear-gradient(135deg, #fef7e7 0%, #e8f7ff 45%, #f6f0ff 100%);--ink: #15152a;--ink-soft: #1d1b2f;--text: #1d1b2f;--muted: #5b5b7a;--panel: #ffffff;--panel-shadow: rgba(21, 21, 42, .2);--stat-bg: linear-gradient(135deg, #fff6d1 0%, #ffe4f0 100%);--stat-label: #6f4bff;--brand-title: #1a1333;--brand-shadow: #ffe55c;--ghost-bg: #ffffff;--primary-bg: linear-gradient(135deg, #6c5cff 0%, #38f5d0 100%);--lane-bg: linear-gradient(180deg, #ffffff 0%, #f1f7ff 100%);--lane-stripe: rgba(255, 90, 138, .15);--lane-inset: #ffe55c;--impact-bg: linear-gradient( 145deg, rgba(255, 229, 92, .45) 0%, rgba(255, 139, 199, .45) 100% );--feedback-bg: #ffffff;--feedback-ready: #6b6b6b;--feedback-good: #b2ffb7;--feedback-miss: #ffb4cf;--arrow-bg: #ffffff;--track-glow: radial-gradient(circle at 50% 40%, rgba(124, 240, 255, .35), transparent 60%), radial-gradient(circle at 50% 80%, rgba(255, 141, 217, .35), transparent 70%);--glass: linear-gradient(120deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2));--glass-shadow: rgba(39, 38, 81, .18);min-height:100vh;padding:32px 24px 48px;color:var(--text);background:var(--bg-main);position:relative;overflow:hidden}.game.theme-dark[data-v-042fd034]{--bg-main: radial-gradient(circle at 12% 18%, rgba(255, 190, 84, .18) 0 140px, transparent 140px), radial-gradient(circle at 88% 16%, rgba(90, 213, 255, .18) 0 130px, transparent 130px), radial-gradient(circle at 82% 78%, rgba(255, 120, 210, .2) 0 150px, transparent 150px), radial-gradient(circle at 14% 86%, rgba(120, 255, 175, .16) 0 150px, transparent 150px), linear-gradient(150deg, #0f0d1a 0%, #101a2c 50%, #1b0f27 100%);--ink: #0b0c16;--ink-soft: #12152b;--text: #eef0ff;--muted: #a9b0d9;--panel: #1b1d36;--panel-shadow: rgba(2, 6, 25, .6);--stat-bg: linear-gradient(135deg, #2d2449 0%, #1b2c42 100%);--stat-label: #9fb2ff;--brand-title: #f3f0ff;--brand-shadow: #7b6dff;--ghost-bg: #202341;--primary-bg: linear-gradient(135deg, #8b7dff 0%, #3ce0ff 100%);--lane-bg: linear-gradient(180deg, #1e223d 0%, #101526 100%);--lane-stripe: rgba(130, 160, 255, .18);--lane-inset: #2b2d5b;--impact-bg: linear-gradient( 145deg, rgba(255, 214, 94, .22) 0%, rgba(255, 135, 204, .24) 100% );--feedback-bg: #1c2039;--feedback-ready: #c6cbe8;--feedback-good: #5dffb8;--feedback-miss: #ff7fae;--arrow-bg: #1c223b;--track-glow: radial-gradient(circle at 50% 40%, rgba(78, 212, 255, .28), transparent 60%), radial-gradient(circle at 50% 80%, rgba(255, 118, 206, .28), transparent 70%);--glass: linear-gradient(120deg, rgba(32, 35, 60, .75), rgba(10, 12, 26, .6));--glass-shadow: rgba(0, 0, 0, .55)}.game[data-v-042fd034]:before,.game[data-v-042fd034]:after{content:"";position:absolute;border-radius:28px;background:var(--glass);box-shadow:0 20px 40px var(--glass-shadow);transform:rotate(-8deg);z-index:0}.game[data-v-042fd034]:before{width:260px;height:160px;top:40px;right:-40px}.game[data-v-042fd034]:after{width:220px;height:140px;bottom:40px;left:-60px;transform:rotate(10deg)}.hud[data-v-042fd034]{position:relative;z-index:2;display:grid;gap:20px;align-items:center;padding:20px 24px;border-radius:24px;background:var(--panel);box-shadow:0 16px 0 var(--ink),0 22px 30px var(--panel-shadow);border:3px solid var(--ink)}.brand .eyebrow[data-v-042fd034]{margin:0 0 6px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:.75rem;color:#ff5a8a}.brand h1[data-v-042fd034]{margin:0;font-family:Bagel Fat One,Space Grotesk,sans-serif;font-size:clamp(2rem,4vw,3.2rem);color:var(--brand-title);text-shadow:0 8px 0 var(--brand-shadow)}.tip[data-v-042fd034]{margin:10px 0 0;font-size:.95rem;font-weight:600;color:var(--muted)}.stats[data-v-042fd034]{display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:12px}.stat[data-v-042fd034]{padding:12px 14px;border-radius:18px;background:var(--stat-bg);border:2px solid var(--ink-soft);box-shadow:0 6px 0 var(--ink-soft)}.stat .label[data-v-042fd034]{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;color:var(--stat-label);letter-spacing:.12em}.stat .value[data-v-042fd034]{font-size:1.4rem;font-weight:700}.controls[data-v-042fd034]{display:flex;gap:12px;justify-content:flex-end}.mobile-pad-wrap[data-v-042fd034]{display:none;grid-template-columns:auto 1fr;gap:16px;align-items:center;justify-content:center}.mobile-controls[data-v-042fd034]{display:none;grid-template-columns:1fr;gap:8px;align-items:center;justify-content:center;padding:6px;border-radius:18px;background:var(--panel);border:3px solid var(--ink-soft);box-shadow:0 12px 0 var(--ink-soft),0 16px 20px var(--panel-shadow);width:fit-content}button[data-v-042fd034]{font-family:inherit;font-weight:700;border:3px solid var(--ink);border-radius:18px;padding:10px 18px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;color:var(--ink)}.hud .theme-toggle[data-v-042fd034]{width:48px;height:44px;min-width:48px;min-height:44px;flex:0 0 auto;padding:0;display:grid;place-items:center;font-size:1.2rem}.theme-toggle .icon[data-v-042fd034]{line-height:1}.hud .pad-toggle[data-v-042fd034]{width:48px;height:44px;min-width:48px;min-height:44px;flex:0 0 auto;padding:0;display:grid;place-items:center;font-size:1.2rem}.pad-toggle .icon[data-v-042fd034]{line-height:1}.emoji-button[data-v-042fd034]{width:36px;height:36px;padding:0;display:grid;place-items:center;font-size:1.15rem}.emoji-button .icon[data-v-042fd034]{line-height:1}.sr-only[data-v-042fd034]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button[data-v-042fd034]:active{transform:translateY(3px);box-shadow:none}.primary[data-v-042fd034]{background:var(--primary-bg);color:var(--ink);box-shadow:0 8px 0 var(--ink)}.ghost[data-v-042fd034]{background:var(--ghost-bg);color:var(--text);box-shadow:0 8px 0 var(--ink)}.stage[data-v-042fd034]{margin-top:28px;display:grid;gap:24px;grid-template-columns:1fr;align-items:start;position:relative;z-index:1}.lane[data-v-042fd034]{position:relative;height:520px;border-radius:32px;background:var(--lane-bg);border:3px solid var(--ink-soft);box-shadow:0 18px 0 var(--ink-soft),inset 0 0 0 6px var(--lane-inset);overflow:hidden}.lane[data-v-042fd034]:before{content:"";position:absolute;inset:18px;border-radius:26px;background:repeating-linear-gradient(135deg,var(--lane-stripe) 0 12px,rgba(255,90,138,0) 12px 24px);pointer-events:none}.mobile-hud[data-v-042fd034]{position:absolute;top:14px;left:14px;right:14px;display:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;z-index:4;pointer-events:none}.mobile-brand[data-v-042fd034]{width:min(100%,90px);height:44px;border-radius:14px;background:var(--glass);border:2px solid var(--ink-soft);box-shadow:0 8px 0 var(--ink-soft);font-family:Bagel Fat One,Space Grotesk,sans-serif;font-size:1.1rem;display:grid;place-items:center;color:var(--brand-title);text-shadow:0 2px 0 var(--brand-shadow)}.mobile-stats[data-v-042fd034]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,280px)}.mini-stat[data-v-042fd034]{padding:8px 10px;border-radius:14px;background:var(--glass);border:2px solid var(--ink-soft);box-shadow:0 6px 0 var(--ink-soft);text-align:center}.mini-stat .label[data-v-042fd034]{display:block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--stat-label)}.mini-stat .value[data-v-042fd034]{display:block;font-size:1rem;font-weight:700;color:var(--text)}.impact-zone[data-v-042fd034]{position:absolute;top:18px;left:0;right:0;display:grid;place-items:center;z-index:3}.impact-square[data-v-042fd034]{width:86px;height:86px;border-radius:20px;background:var(--impact-bg);border:3px solid var(--ink-soft);box-shadow:0 10px 0 var(--ink-soft);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease,filter .2s ease}.impact-square.is-running[data-state=perfect][data-v-042fd034]{border-color:#39ff7c;box-shadow:0 12px #0b1c12b3,0 0 18px #39ff7cb3,0 0 36px #39ff7c80;filter:drop-shadow(0 0 14px rgba(57,255,124,.65))}.impact-square.is-running[data-state=nice][data-v-042fd034]{border-color:#d7ff3f;box-shadow:0 12px #181e08b3,0 0 16px #d7ff3fb3,0 0 30px #d7ff3f73;filter:drop-shadow(0 0 12px rgba(215,255,63,.6))}.impact-square.is-running[data-state=miss][data-v-042fd034]{border-color:#ff4f6d;box-shadow:0 12px #230a10b3,0 0 18px #ff4f6da6,0 0 34px #ff4f6d73;filter:drop-shadow(0 0 12px rgba(255,79,109,.6))}.game.theme-dark .impact-square[data-v-042fd034]{border-color:#c9ceda}.feedback[data-v-042fd034]{margin-top:12px;padding:6px 12px;border-radius:999px;background:var(--feedback-bg);border:2px solid var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--feedback-ready)}.feedback[data-state=ready][data-v-042fd034]{color:var(--feedback-ready)}.feedback[data-state=good][data-v-042fd034]{background:var(--feedback-good)}.feedback[data-state=miss][data-v-042fd034]{background:var(--feedback-miss)}.game.theme-dark .feedback[data-state=good][data-v-042fd034],.game.theme-dark .feedback[data-state=miss][data-v-042fd034]{color:#0b0c16}.track[data-v-042fd034]{position:absolute;inset:0}.arrow[data-v-042fd034]{position:absolute;left:50%;transform:translate(-50%);width:80px;height:80px;display:grid;place-items:center;font-size:2rem;border-radius:20px;border:3px solid var(--ink-soft);box-shadow:0 8px 0 var(--ink-soft);background:var(--arrow-bg);z-index:2}.arrow.up[data-v-042fd034]{background:linear-gradient(135deg,#a8ffcf,#44f1ff)}.arrow.right[data-v-042fd034]{background:linear-gradient(135deg,#ffd36b,#ff8bd9)}.arrow.down[data-v-042fd034]{background:linear-gradient(135deg,#c7a6ff,#7cf0ff)}.arrow.left[data-v-042fd034]{background:linear-gradient(135deg,#ff9aa8,#fff27a)}.track-glow[data-v-042fd034]{position:absolute;inset:0;background:var(--track-glow);mix-blend-mode:multiply}.mobile-pad[data-v-042fd034]{display:none;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;place-content:center;margin:0 auto;padding:12px;border-radius:26px;background:var(--panel);border:3px solid var(--ink-soft);box-shadow:0 14px 0 var(--ink-soft),0 18px 26px var(--panel-shadow);width:min(100%,320px);box-sizing:border-box}.mobile-pad.is-visible[data-v-042fd034]{display:grid}.pad-button[data-v-042fd034]{width:100%;aspect-ratio:11 / 10;border-radius:18px;border:3px solid var(--ink-soft);background:linear-gradient(180deg,#f8fbff,#e7ecff);box-shadow:0 8px 0 var(--ink-soft);font-size:1.6rem;font-weight:700;color:var(--ink);display:grid;place-items:center;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.game.theme-dark .pad-button[data-v-042fd034]{background:linear-gradient(180deg,#2a2f4d,#1a1f36);color:#f2f5ff}.pad-button[data-v-042fd034]:active{transform:translateY(3px);box-shadow:none;filter:brightness(.96)}.pad-up[data-v-042fd034]{grid-column:2;grid-row:1}.pad-left[data-v-042fd034]{grid-column:1;grid-row:2}.pad-down[data-v-042fd034]{grid-column:2;grid-row:2}.pad-right[data-v-042fd034]{grid-column:3;grid-row:2}@media(max-width:900px){.game[data-v-042fd034]{padding:18px 14px 22px;min-height:100dvh}.hud[data-v-042fd034]{text-align:center}.controls[data-v-042fd034]{justify-content:center}.stage[data-v-042fd034]{margin-top:0;gap:12px;grid-template-columns:1fr;grid-template-rows:1fr auto;min-height:calc(100dvh - 48px)}.stats[data-v-042fd034]{grid-template-columns:repeat(3,minmax(90px,1fr))}.lane[data-v-042fd034]{height:auto;min-height:min(62dvh,560px)}.mobile-stats[data-v-042fd034]{display:flex;flex-direction:column;width:min(100%,90px)}}@media(hover:none)and (pointer:coarse){.hud[data-v-042fd034],.controls[data-v-042fd034]{display:none}.mobile-pad-wrap[data-v-042fd034],.mobile-controls[data-v-042fd034]{display:grid}.mobile-hud[data-v-042fd034]{display:flex}}