:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#05060c;--fg:#e7eaf6;--accent:#5cf2ff;--accent-2:#c77dff;--warn:#ffb86b}*{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html,body{width:100%;height:100%;color:var(--fg);background:radial-gradient(at 20% 10%,#c77dff2e 0%,#0000 55%),radial-gradient(at 80% 90%,#5cf2ff24 0%,#0000 60%),radial-gradient(#0c1030 0%,#04050a 75%);margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,SF Pro Text,Hiragino Sans,Yu Gothic UI,sans-serif;overflow:hidden}#app{width:100vw;height:100vh;position:relative}canvas{display:block}#hud{pointer-events:none;position:absolute;inset:0}.panel{-webkit-backdrop-filter:blur(8px);background:linear-gradient(#0a0e20b8,#0709169e);border:1px solid #5cf2ff40;border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5;position:absolute;box-shadow:0 0 24px #5cf2ff0f,inset 0 1px #ffffff0a}.panel h2{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px;font-size:12px}#panel-stats{min-width:200px;top:16px;left:16px}#panel-mode{text-align:right;min-width:220px;top:16px;right:16px}#panel-keys{opacity:.9;pointer-events:auto;max-width:320px;font-size:12px;bottom:16px;left:16px}#panel-keys summary{cursor:pointer;min-height:28px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;align-items:center;font-size:12px;font-weight:700;list-style:none;display:flex}#panel-keys summary::-webkit-details-marker{display:none}#panel-keys summary:after{content:" ▸";opacity:.7}#panel-keys[open] summary:after{content:" ▾"}#panel-keys[open] summary{margin-bottom:6px}#panel-mini[hidden]{display:none}#panel-mini{bottom:16px;right:16px}#panel-hold{text-align:center;width:160px;top:160px;left:16px}#panel-next{text-align:center;width:160px;top:160px;right:16px}.preview-canvas{background:#00000073;border-radius:8px;margin-top:4px}#panel-mini canvas{background:#0006;border-radius:6px}.preview-label{opacity:.7;letter-spacing:.15em;text-transform:uppercase;margin-top:4px;font-size:12px}#toast{letter-spacing:.2em;text-shadow:0 0 24px var(--accent);opacity:0;pointer-events:none;font-size:36px;font-weight:700;transition:opacity .25s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#toast.show{opacity:1}.stat-row{justify-content:space-between;gap:16px;display:flex}.stat-row span:last-child{color:var(--accent);font-variant-numeric:tabular-nums}.keymap{grid-template-columns:auto 1fr;gap:2px 10px;display:grid}.keymap kbd{white-space:nowrap;background:#5cf2ff1f;border:1px solid #5cf2ff4d;border-radius:4px;padding:1px 5px;font-family:ui-monospace,monospace;font-size:12px}.keymap-section{letter-spacing:.16em;color:var(--accent-2);text-transform:uppercase;opacity:.85;grid-column:1/-1;margin:4px 0 1px;font-size:12px}#gameover,#help-overlay,#pause-overlay{z-index:20;pointer-events:auto;-webkit-backdrop-filter:blur(4px);background:#02040cc7;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:none;position:absolute;inset:0}#gameover.show,#help-overlay.show,#pause-overlay.show{display:flex}#help-overlay{z-index:21}#gameover h2{color:var(--warn);letter-spacing:.1em;margin:0;font-size:56px}#pause-overlay h2{color:var(--accent);letter-spacing:.3em;text-shadow:0 0 36px var(--accent);margin:0;font-size:64px}#pause-overlay .hint,#help-overlay .hint{opacity:.7;letter-spacing:.2em;text-transform:uppercase;font-size:12px}#help-overlay{justify-content:safe center;padding:24px 16px;overflow-y:auto}#pause-overlay .pause-actions{gap:12px;margin-top:24px;display:flex}#pause-resume{min-width:200px;padding:14px 32px!important;font-size:16px!important}#help-overlay h2{color:var(--accent);letter-spacing:.18em;margin:0;font-size:36px}#help-overlay .help-grid{grid-template-columns:1fr 1fr;gap:32px;max-width:720px;font-size:13px;display:grid}#help-overlay .help-grid h3{color:var(--accent-2);letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px;font-size:12px}#gameover button,#help-overlay button,#pause-overlay button{color:var(--accent);border:1px solid var(--accent);letter-spacing:.2em;cursor:pointer;background:0 0;border-radius:6px;padding:10px 28px;font-size:14px}#gameover button:hover,#help-overlay button:hover,#pause-overlay button:hover{background:#5cf2ff1f}#pause-overlay .pause-secondary button{color:var(--fg);border-color:#e7eaf659;padding:8px 18px;font-size:12px}button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#undo-bar{z-index:30;pointer-events:auto;white-space:nowrap;background:#0a0e20eb;border:1px solid #ffb86b99;border-radius:999px;align-items:center;gap:14px;padding:8px 8px 8px 16px;font-size:13px;display:none;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}#undo-bar.show{display:flex}#undo-btn{color:var(--warn);border:1px solid var(--warn);letter-spacing:.16em;cursor:pointer;background:#ffb86b29;border-radius:999px;min-height:32px;padding:6px 16px;font-family:inherit;font-size:12px}.only-touch{display:none}#help-fab{color:var(--accent);letter-spacing:.2em;cursor:pointer;pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0e20b3;border:1px solid #5cf2ff59;border-radius:999px;min-height:28px;padding:6px 14px;font-size:12px;position:absolute;top:16px;left:50%;transform:translate(-50%)}#help-fab:hover{background:#5cf2ff26}#status-bar{pointer-events:auto;gap:6px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)translateY(36px)}.status-pill{cursor:pointer;color:inherit;letter-spacing:.18em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0e2099;border-radius:999px;min-height:28px;padding:3px 10px;font-family:ui-monospace,monospace;font-size:12px}.status-pill.on{color:#5cf2ff;border:1px solid #5cf2ff80;box-shadow:0 0 12px #5cf2ff40}.status-pill.off{color:#9aa1bb;border:1px solid #9aa1bb73}.badge{letter-spacing:.12em;color:var(--accent-2);vertical-align:middle;background:#c77dff2e;border-radius:4px;margin-left:6px;padding:1px 6px;font-size:12px;display:inline-block}#touch-controls{display:none}.touch-btn{color:var(--accent);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;-webkit-backdrop-filter:blur(6px);background:#0a0e20b3;border:1px solid #5cf2ff66;border-radius:14px;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:18px;font-weight:600;transition:background 80ms}.touch-btn:active{border-color:var(--accent);background:#5cf2ff52}.touch-btn[hidden]{display:none}#touch-dpad{bottom:max(20px, env(safe-area-inset-bottom));left:max(16px, env(safe-area-inset-left));pointer-events:auto;grid-template-rows:56px 56px 56px;grid-template-columns:56px 56px 56px;gap:4px;display:grid;position:absolute}#touch-dpad .touch-btn{width:56px;height:56px;font-size:22px}#touch-dpad [data-act=up]{grid-area:1/2}#touch-dpad [data-act=left]{grid-area:2/1}#touch-dpad [data-act=soft]{grid-area:2/2;font-size:14px}#touch-dpad [data-act=right]{grid-area:2/3}#touch-dpad [data-act=down]{grid-area:3/2}#touch-actions{bottom:max(20px, env(safe-area-inset-bottom));right:max(16px, env(safe-area-inset-right));pointer-events:auto;grid-template-rows:56px 56px 56px;grid-template-columns:64px 64px;gap:6px;display:grid;position:absolute}#touch-actions .touch-btn{font-size:16px}#touch-actions [data-act=hard]{color:var(--accent-2);letter-spacing:.18em;background:#c77dff2e;border-color:#c77dff8c;grid-area:3/1/auto/span 2;font-size:14px}#touch-actions [data-act=hard]:active{background:#c77dff66}#touch-slice{right:max(12px, env(safe-area-inset-right));pointer-events:auto;flex-direction:column;gap:4px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}#touch-slice .touch-btn{letter-spacing:.06em;width:48px;height:32px;font-size:12px}#touch-mode{top:calc(max(12px, env(safe-area-inset-top)) + 76px);pointer-events:auto;gap:4px;display:flex;position:absolute;left:50%;transform:translate(-50%)}#touch-mode .touch-btn{letter-spacing:.05em;width:44px;height:30px;padding:0;font-size:12px}#touch-mode .touch-btn.active{border-color:var(--accent);background:#5cf2ff4d}@media (pointer:coarse),(max-width:720px){#touch-controls{display:block}#panel-keys{display:none}#panel-stats{min-width:0;padding:8px 10px;font-size:12px;top:12px;left:12px}#panel-stats .stat-row{gap:10px}#panel-mode{min-width:0;padding:8px 10px;font-size:12px;top:12px;right:12px}#panel-mode>div:first-of-type{font-size:18px!important}#panel-hold,#panel-next{width:76px;padding:6px;top:auto;bottom:200px}#panel-hold{left:8px}#panel-next{right:8px}#panel-hold canvas,#panel-next canvas{width:64px;height:48px}#panel-hold h2,#panel-next h2{margin-bottom:2px;font-size:12px}#panel-hold .preview-label,#panel-next .preview-label{font-size:12px}#panel-mini{padding:6px}#status-bar{top:max(12px, env(safe-area-inset-top));transform:translate(-50%)translateY(34px)}.status-pill{letter-spacing:.04em;white-space:nowrap;min-height:28px;padding:4px 8px;font-size:11px}#help-fab{top:max(12px, env(safe-area-inset-top))}#panel-mini{transform-origin:0;inset:50% auto auto 8px;transform:translateY(-50%)scale(.7)}#undo-bar{bottom:auto;top:calc(max(12px, env(safe-area-inset-top)) + 116px)}#help-fab{min-height:28px;padding:5px 10px;font-size:12px}#toast{font-size:24px}}@media (pointer:coarse){.only-touch{display:inline}.only-keys{display:none}}@media (max-width:480px){#panel-hold,#panel-next{display:none}}#start-screen{z-index:200;pointer-events:auto;flex-direction:column;justify-content:center;align-items:center;gap:24px;display:flex;position:absolute;inset:0}.start-title{color:var(--accent);letter-spacing:.2em;text-shadow:0 0 60px var(--accent), 0 0 120px #5cf2ff66;text-align:center;margin:0;font-size:72px;font-weight:900}.start-sub{color:var(--accent-2);letter-spacing:.3em;opacity:.9;font-size:18px}#start-btn{color:var(--accent);border:1px solid var(--accent);letter-spacing:.3em;cursor:pointer;background:0 0;border-radius:6px;padding:14px 40px;font-family:inherit;font-size:16px;box-shadow:0 0 24px #5cf2ff33}#start-btn:hover{background:#5cf2ff1f;box-shadow:0 0 36px #5cf2ff59}.start-hint{color:var(--fg);opacity:.5;letter-spacing:.2em;font-size:12px}@media (max-width:600px){#help-overlay h2{letter-spacing:.1em;text-align:center;font-size:24px}#help-overlay .help-grid{grid-template-columns:1fr;gap:12px}#pause-overlay h2{letter-spacing:.2em;font-size:44px}}@media (max-width:480px){.start-title{letter-spacing:.1em;font-size:42px}.start-sub{font-size:14px}}#stat-mode{color:var(--accent);font-size:28px;font-weight:700}#stat-slice{opacity:.7;font-size:11px}#pause-overlay .hint kbd{background:#5cf2ff26;border:1px solid #5cf2ff59;border-radius:4px;padding:2px 8px}#help-overlay .help-grid p{opacity:.85;line-height:1.6}#help-overlay .help-grid kbd{background:#5cf2ff26;border-radius:3px;padding:1px 5px}#final-score{opacity:.8;font-size:18px}
