@font-face{font-family:DM Sans;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/dm-sans-latin-600-normal-Aqo67rzb.woff2) format("woff2"),url(/assets/dm-sans-latin-600-normal-BmdmIIQ2.woff) format("woff")}@font-face{font-family:DM Sans;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/dm-sans-latin-700-normal-DvUfVpUG.woff2) format("woff2"),url(/assets/dm-sans-latin-700-normal-CUSSCpQX.woff) format("woff")}@font-face{font-family:Space Grotesk;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/space-grotesk-latin-400-normal-CJ-V5oYT.woff2) format("woff2"),url(/assets/space-grotesk-latin-400-normal-BnQMeOim.woff) format("woff")}@font-face{font-family:Space Grotesk;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/space-grotesk-latin-500-normal-lFbtlQH6.woff2) format("woff2"),url(/assets/space-grotesk-latin-500-normal-CNSSEhBt.woff) format("woff")}:root{--bg: #0a0816;--bg-2: #120e26;--surface: #15112b;--surface-2: #1c1738;--board: #0d0a1c;--line: #2a2450;--line-soft: #1f1a3d;--text: #f4f2ff;--text-2: #b4addb;--muted: #7d76a8;--cyan: #22e4ff;--violet: #8f5bff;--magenta: #ff3dcb;--mint: #6dffb8;--beam: linear-gradient(100deg, var(--cyan), var(--violet) 55%, var(--magenta));--radius-lg: 22px;--radius-md: 14px;--radius-sm: 10px;--display: "Space Grotesk", system-ui, sans-serif;--body: "DM Sans", system-ui, sans-serif;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);font-family:var(--body);color:var(--text);background:var(--bg);color-scheme:dark;font-synthesis:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior:none}body{background:radial-gradient(120% 60% at 50% -10%,#2a1a5e55,transparent 60%),radial-gradient(80% 50% at 100% 100%,#ff3dcb14,transparent 60%),var(--bg);background-attachment:fixed;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,#game:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}svg{display:block}#app{min-height:100vh;min-height:100dvh;max-width:1440px;margin:0 auto;padding:0 max(32px,var(--safe-right)) 0 max(32px,var(--safe-left));display:flex;flex-direction:column}.topbar{flex:none;display:flex;align-items:center;gap:16px;padding:calc(var(--safe-top) + 22px) 0 18px}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;border-radius:12px}.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#241a4f,#0b0918);box-shadow:inset 0 0 0 1px #ffffff14,0 6px 20px #8f5bff33;display:grid;place-items:center}.brand-mark svg{width:34px;height:34px}.wordmark{font:700 19px/1 var(--display);letter-spacing:-.02em;text-transform:uppercase;display:flex;gap:6px}.wordmark b{font-weight:700;background:var(--beam);-webkit-background-clip:text;background-clip:text;color:transparent}.top-tag{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint)}.icon-button{flex:none;padding:0;font-size:0;line-height:0;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:#ffffff08;display:grid;place-items:center;transition:background .15s,border-color .15s,transform .1s}.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.icon-button:not(:disabled):hover{background:#ffffff12;border-color:#3b3470}.icon-button:not(:disabled):active{transform:scale(.94)}#sound .slash,#sound[aria-pressed=true] .slash{display:none}#sound[aria-pressed=false] .slash{display:inline}#sound[aria-pressed=false] .waves{display:none}#sound[aria-pressed=false]{color:var(--muted)}#sound[aria-pressed=true]{color:var(--cyan);border-color:#22e4ff55}main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(240px,1fr) minmax(340px,460px) minmax(220px,.85fr);gap:clamp(32px,5vw,80px);align-items:center;padding:8px 0 24px}.eyebrow{font:600 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}h1{font:600 clamp(44px,4.6vw,76px) / 1.02 var(--display);letter-spacing:-.04em;margin:22px 0;max-width:9ch}h1 em{font-style:normal;background:var(--beam);-webkit-background-clip:text;background-clip:text;color:transparent}.intro>p{color:var(--text-2);font-size:17px;line-height:1.6;max-width:30ch;margin:0}.platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}.platforms span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px}.game-section{--section-h: max(560px, min(880px, calc(100dvh - 150px) ));--chrome: 168px;width:100%;height:var(--section-h);display:flex;flex-direction:column;justify-content:center;gap:12px}.hud{flex:none;display:flex;align-items:center;gap:10px}.stat{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:82px;height:58px;padding:0 16px;border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line-soft)}.stat span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.stat strong{font:700 24px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.stat.best strong{background:var(--beam);-webkit-background-clip:text;background-clip:text;color:transparent}.hud-actions{margin-left:auto;display:flex;gap:8px}.hud-actions .icon-button{width:48px;height:48px}.stage{flex:none;display:grid;place-items:center}.board-wrap{position:relative;width:min(100%,calc((var(--section-h) - var(--chrome)) * 400 / 490));aspect-ratio:400 / 490;border-radius:var(--radius-lg);background:var(--board);overflow:hidden;box-shadow:0 0 0 1px #2c2560,0 0 0 5px #ffffff05,0 30px 80px -20px #000c,0 0 70px -10px #8f5bff40}#game{width:100%;height:100%;touch-action:none}#game canvas{display:block!important;width:100%!important;height:100%!important;margin:0!important}.status-line{flex:none;display:flex;align-items:center;gap:10px;min-height:24px;font-size:13px;color:var(--text-2)}.mode-pill{flex:none;font:600 10px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);border:1px solid #22e4ff40;background:#22e4ff10;border-radius:999px;padding:6px 10px}#hint{min-width:0;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.controls{flex:none;display:flex;align-items:center;gap:8px}.ball-count{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}.ball-count strong{font:700 22px/1 var(--display);color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}.ball-dot{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #22e4ff33,0 0 14px var(--cyan)}.chip{height:46px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s}.chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.chip:not(:disabled):active{transform:scale(.96)}.chip:not(:disabled):hover{background:var(--surface-2)}#recall:not(:disabled){color:var(--cyan);border-color:#22e4ff66;background:#22e4ff12}.speed-button b{font-family:var(--display);font-size:15px;color:var(--text)}.speed-button[aria-pressed=true]{border-color:#ff3dcb88;background:#ff3dcb18}.speed-button[aria-pressed=true] b{color:var(--magenta)}.overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 24px;text-align:center;background:radial-gradient(90% 55% at 50% 0%,#8f5bff26,transparent 70%),#0d0a1ced;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.overlay[hidden]{display:none}.overlay h2{font:700 clamp(32px,9vw,46px) / 1.05 var(--display);letter-spacing:-.035em;margin:12px 0 8px}.overlay p{color:var(--text-2);font-size:15px;line-height:1.5;margin:0 0 20px;max-width:28ch}.overlay .eyebrow{color:var(--magenta)}.primary-button,.secondary-button{flex:none;width:100%;max-width:320px;min-height:54px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:16px;font:700 16px/1 var(--display);letter-spacing:-.01em;transition:transform .1s,filter .15s,background .15s}.primary-button svg,.secondary-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.primary-button{border:0;color:#0b0818;background:linear-gradient(100deg,#4cecff,#a77bff 55%,#ff6ad8);box-shadow:0 10px 30px -8px #8f5bffaa,inset 0 1px #ffffff80}.primary-button:not(:disabled):hover{filter:brightness(1.08)}.primary-button:disabled{opacity:1;color:var(--muted);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}.secondary-button{margin-top:12px;border:1px solid var(--line);background:var(--surface);color:var(--text)}.secondary-button:hover{background:var(--surface-2)}.primary-button:not(:disabled):active,.secondary-button:active{transform:scale(.97)}.text-button{margin-top:8px;min-height:44px;padding:0 16px;border:0;background:none;color:var(--text-2);font-size:15px;font-weight:500}.main-menu{justify-content:flex-start;background:radial-gradient(90% 50% at 50% 0%,#8f5bff33,transparent 70%),#0d0a1cf7}.main-menu>:first-child{margin-top:auto}.main-menu>:last-child{margin-bottom:auto}.menu-logo{width:64px;height:64px;flex:none;border-radius:20px;background:linear-gradient(145deg,#241a4f,#0b0918);box-shadow:inset 0 0 0 1px #ffffff1a,0 10px 40px #8f5bff55;display:grid;place-items:center}.menu-logo svg{width:56px;height:56px}.main-menu h2{font-size:clamp(26px,7.5vw,34px);margin:16px 0 18px}.main-menu .save-description{font-size:13px;color:var(--muted);margin:10px 0 18px}.difficulty-picker{width:100%;max-width:320px;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;border:0;text-align:left}.difficulty-picker legend{padding:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.difficulty-picker label{position:relative;cursor:pointer}.difficulty-picker input{position:absolute;opacity:0;pointer-events:none}.difficulty-picker label>span{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 14px 13px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);transition:border-color .15s,background .15s}.difficulty-picker label>span:after{content:"";position:absolute;top:14px;right:14px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line)}.difficulty-picker strong{font:700 18px/1.1 var(--display)}.difficulty-picker small{font-size:12px;color:var(--muted);line-height:1.3}.difficulty-picker input:checked+span{border-color:var(--cyan);background:#22e4ff10;box-shadow:0 0 24px -6px #22e4ff66}.difficulty-picker input:checked+span:after{border-color:var(--cyan);background:radial-gradient(circle,var(--cyan) 0 4px,transparent 5px)}.difficulty-picker input[value=Hard]:checked+span{border-color:var(--magenta);background:#ff3dcb10;box-shadow:0 0 24px -6px #ff3dcb66}.difficulty-picker input[value=Hard]:checked+span:after{border-color:var(--magenta);background:radial-gradient(circle,var(--magenta) 0 4px,transparent 5px)}.difficulty-picker input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:3px}.main-menu .menu-note{font-size:12px;color:var(--muted);margin:12px 0 0}.how-to{width:100%;max-width:320px;margin-top:14px;text-align:left;font-size:13px;color:var(--text-2)}.how-to summary{list-style:none;cursor:pointer;text-align:center;min-height:40px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:600;color:var(--text-2);border-radius:10px}.how-to summary::-webkit-details-marker{display:none}.how-to summary:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}.how-to[open] summary:after{transform:translateY(2px) rotate(-135deg)}.how-to ol{margin:4px 0 0;padding:14px 16px 14px 34px;border-radius:14px;background:var(--surface);border:1px solid var(--line-soft);line-height:1.45}.how-to li+li{margin-top:6px}.how-to li::marker{color:var(--cyan);font-family:var(--display);font-weight:700}.legal-link{margin-top:4px;min-height:36px;display:inline-flex;align-items:center;font-size:12px;color:var(--muted);text-decoration:none}.legal-link:hover,footer a:hover{color:var(--text-2)}footer a{color:inherit}#back-to-menu{margin-top:6px}.guide-heading{font:600 13px/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin:0 0 24px}.guide ol{list-style:none;margin:0 0 24px;padding:0}.guide li{display:flex;gap:14px;margin-bottom:22px}.step{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font:700 14px/1 var(--display);color:var(--cyan);background:#22e4ff12;border:1px solid #22e4ff33}.guide li:nth-child(2) .step{color:var(--violet);background:#8f5bff14;border-color:#8f5bff44}.guide li:nth-child(3) .step{color:var(--magenta);background:#ff3dcb12;border-color:#ff3dcb3a}.guide h4{margin:5px 0 6px;font:600 16px/1.2 var(--display)}.guide li p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}.tip{padding:18px 20px;border-radius:16px;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--beam) border-box;border:1px solid transparent}.tip>span{font:600 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--magenta)}.tip p{margin:10px 0 0;font-size:14px;line-height:1.55;color:var(--text-2)}.keyboard-note{display:block;margin-top:22px;font-size:12px;color:var(--muted)}kbd{font:600 11px/1 var(--body);padding:3px 6px;border-radius:5px;border:1px solid var(--line);background:var(--surface);color:var(--text-2)}footer{flex:none;display:flex;justify-content:space-between;padding:18px 0 calc(var(--safe-bottom) + 22px);border-top:1px solid var(--line-soft);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}@media(max-width:1100px){main{grid-template-columns:1fr minmax(340px,440px)}.guide,.top-tag{display:none}}@media(max-width:760px),(max-height:560px){html,body{height:100%;overflow:hidden}#app{height:100vh;height:100dvh;min-height:0;padding:0 max(16px,var(--safe-right)) 0 max(16px,var(--safe-left))}.topbar,.intro,.guide,footer{display:none}main{display:flex;padding:calc(var(--safe-top) + 8px) 0 calc(var(--safe-bottom) + 8px)}.game-section{height:100%;max-width:520px;margin:0 auto;gap:10px}.menu-logo{width:56px;height:56px;border-radius:17px}.menu-logo svg{width:48px;height:48px}.main-menu h2{margin:14px 0 16px}.main-menu .save-description{margin:8px 0 14px}.primary-button,.secondary-button{min-height:50px}.secondary-button{margin-top:10px}.how-to{margin-top:6px}.stat{height:52px;min-width:74px;padding:0 14px}.stat strong{font-size:22px}.stage{flex:1;min-height:0;display:block;margin:0 calc(-1*max(16px,var(--safe-right))) 0 calc(-1*max(16px,var(--safe-left)))}.board-wrap{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:0 -1px #2c2560,0 1px #2c2560}.game-section{justify-content:flex-start}.status-line{font-size:12px;min-height:32px}.overlay{padding:20px max(20px,var(--safe-right)) 20px max(20px,var(--safe-left))}.overlay>*{max-width:360px}.chip{height:44px;padding:0 14px;font-size:13px}}@media(max-width:360px){.chip{padding:0 11px}#recall{font-size:0;gap:0}#recall svg{width:20px;height:20px}.stat{min-width:64px;padding:0 11px}}@media(max-width:760px)and (max-height:700px){.menu-logo{display:none}.game-section{gap:8px}.stat{height:46px}.hud-actions .icon-button{width:44px;height:44px}.overlay{padding-top:14px;padding-bottom:14px}.main-menu h2{margin:0 0 12px}.main-menu .save-description{margin:6px 0 10px}.primary-button,.secondary-button{min-height:46px}.difficulty-picker legend{padding-bottom:8px}.difficulty-picker label>span{padding:11px 12px}}@media(hover:none)and (pointer:coarse){button:focus-visible,a:focus-visible,summary:focus-visible,#game:focus-visible{outline:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
