:root{--bg: #040608;--bg-panel: rgba(8, 14, 22, .88);--border: rgba(0, 255, 204, .18);--border-glow: rgba(0, 255, 204, .55);--cyan: #00ffcc;--magenta: #ff2d78;--yellow: #ffe600;--dim: rgba(255, 255, 255, .38);--text: #e8f4f0;--font-head: "Orbitron", "Courier New", monospace;--font-mono: "Share Tech Mono", "Courier New", monospace;--radius: 10px;--transition: .18s ease;--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)}.gravity-status{color:#d896ff;font-family:var(--font-head);font-size:8px;font-weight:700;letter-spacing:.1em;text-shadow:0 0 8px #a855f7;white-space:nowrap}.gravity-status.hidden{display:none}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{width:100%;height:100%;overscroll-behavior:none;overflow:hidden}body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}@media(max-height:640px){#app{justify-content:flex-start;gap:4px;padding-top:calc(8px + var(--safe-top))}#dpad .dpad-btn{width:32px;height:32px;border-radius:8px;font-size:14px}#dpad{bottom:calc(4px + var(--safe-bottom))}.overlay-glass{max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom))}}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(ellipse at 20% 30%,rgba(0,255,204,.03) 0%,transparent 60%),radial-gradient(ellipse at 80% 70%,rgba(255,45,120,.03) 0%,transparent 60%),radial-gradient(ellipse at 50% 50%,#0000,#04060899);pointer-events:none;z-index:0}.scanlines{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,rgba(0,0,0,.065) 3px,rgba(0,0,0,.065) 4px);mix-blend-mode:multiply}#app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100dvh;height:100vh;gap:0;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right)}#hud{display:flex;align-items:center;justify-content:space-between;width:min(520px,94vw);padding:7px 14px;margin-bottom:6px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);flex-shrink:0;position:relative;z-index:10}.hud-block{display:flex;flex-direction:column;align-items:flex-start;gap:1px}.hud-right{align-items:flex-end}.hud-center{align-items:center}.hud-label{font-family:var(--font-head);font-size:8px;letter-spacing:.2em;color:var(--dim)}.hud-value{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--cyan);text-shadow:0 0 12px var(--cyan);letter-spacing:.05em;min-width:3ch;transition:color .2s}#mode-badge{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:.25em;color:var(--magenta);text-shadow:0 0 10px var(--magenta);padding:3px 8px;border:1px solid rgba(255,45,120,.35);border-radius:4px;background:#ff2d7814}#canvas-wrap{position:relative;flex-shrink:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 0 1px var(--border),0 0 30px #00ffcc14,0 0 80px #00ffcc0a}#game-canvas{display:block;background:#070d12;width:auto;height:auto;max-width:min(var(--canvas-max-width, 94vw),94vw);max-height:var(--canvas-max-height, calc(100dvh - 100px) );touch-action:none}#swipe-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;touch-action:none;background:transparent}@keyframes shake{0%{transform:translate(0) rotate(0)}15%{transform:translate(-7px,4px) rotate(-1.2deg)}30%{transform:translate(6px,-5px) rotate(1deg)}45%{transform:translate(-5px,6px) rotate(-.8deg)}60%{transform:translate(5px,-3px) rotate(.6deg)}75%{transform:translate(-3px,3px) rotate(-.4deg)}90%{transform:translate(2px,-2px) rotate(.2deg)}to{transform:translate(0) rotate(0)}}#canvas-wrap.shake{animation:shake .52s cubic-bezier(.36,.07,.19,.97) both}#btn-pause-icon{position:fixed;top:calc(14px + var(--safe-top));right:calc(14px + var(--safe-right));z-index:200;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;color:var(--cyan);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);touch-action:manipulation}#btn-pause-icon:hover{border-color:var(--cyan);box-shadow:0 0 14px #00ffcc4d}#btn-pause-icon svg{width:16px;height:16px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:100;background:#040608cc;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .22s ease;overflow-y:auto;padding:16px;padding-top:calc(16px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bottom))}.overlay.hidden{display:none}#username-dialog{z-index:105}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-glass{display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 32px;background:#081018eb;border:1px solid var(--border);border-radius:18px;box-shadow:0 0 0 1px #00ffcc0f,0 8px 60px #000000b3,inset 0 1px #ffffff0f;width:min(440px,100%);max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(0,255,204,.3) transparent}.overlay-glass::-webkit-scrollbar{width:4px}.overlay-glass::-webkit-scrollbar-track{background:transparent}.overlay-glass::-webkit-scrollbar-thumb{background:#00ffcc4d;border-radius:2px}.start-glass{gap:14px;padding:24px 28px}.logo-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:4px}.logo-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;color:var(--dim)}.logo-main{font-family:var(--font-head);font-size:clamp(32px,8vw,54px);font-weight:900;letter-spacing:.08em;color:var(--cyan);text-shadow:0 0 20px var(--cyan),0 0 60px rgba(0,255,204,.35),0 0 120px rgba(0,255,204,.12);line-height:1}.logo-ver{font-family:var(--font-mono);font-size:9px;color:#0fc6;letter-spacing:.2em}.setting-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.setting-label{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:.2em;color:var(--dim);min-width:76px;flex-shrink:0}.swatch-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all var(--transition);outline:none;flex-shrink:0;touch-action:manipulation}.swatch:hover,.swatch.active{border-color:#fff;box-shadow:0 0 10px currentColor,0 0 20px currentColor;transform:scale(1.15)}.swatch-custom{background:#ffffff1f;border-color:var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--dim);cursor:pointer;position:relative}.swatch-custom input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;width:100%;height:100%}.swatch-custom:hover{border-color:var(--cyan);color:var(--cyan)}.seg-group,.toggle-wrap,.mode-group{display:flex;gap:4px;flex-wrap:wrap}.seg{font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:.15em;padding:7px 11px;background:transparent;border:1px solid var(--border);border-radius:5px;color:var(--dim);cursor:pointer;transition:all var(--transition);outline:none;touch-action:manipulation;min-height:36px}.seg:hover{border-color:var(--cyan);color:var(--cyan)}.seg.active{background:#00ffcc1f;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px #0fc3}.mode-desc{font-size:11px;color:var(--dim);text-align:center;min-height:1.4em;font-family:var(--font-mono);letter-spacing:.04em;transition:color .2s}.hint-text{font-size:9px;letter-spacing:.1em;color:#fff3;font-family:var(--font-mono);text-align:center}.neon-btn{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.2em;padding:12px 26px;background:#00ffcc1a;border:1px solid var(--cyan);border-radius:var(--radius);color:var(--cyan);text-shadow:0 0 10px var(--cyan);box-shadow:0 0 20px #00ffcc26,inset 0 0 20px #00ffcc0a;cursor:pointer;transition:all var(--transition);outline:none;touch-action:manipulation;min-height:44px;width:100%}.neon-btn:hover{background:#0fc3;box-shadow:0 0 30px #00ffcc4d,inset 0 0 30px #00ffcc14;transform:translateY(-1px)}.neon-btn:active{transform:translateY(1px)}.neon-btn-lg{padding:14px 36px;font-size:13px;margin-top:4px}.neon-btn-secondary{border-color:var(--magenta);color:var(--magenta);background:#ff2d7814;text-shadow:0 0 10px var(--magenta);box-shadow:0 0 20px #ff2d781f,inset 0 0 20px #ff2d780a}.neon-btn-secondary:hover{background:#ff2d782e;box-shadow:0 0 30px #ff2d7847,inset 0 0 30px #ff2d7814}.overlay-title{font-family:var(--font-head);font-size:26px;font-weight:900;letter-spacing:.25em;color:var(--cyan);text-shadow:0 0 20px var(--cyan)}.overlay-hint{font-size:11px;color:var(--dim);letter-spacing:.08em}.overlay-hint kbd{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:3px;padding:1px 5px;font-family:var(--font-mono);font-size:11px}.go-glass{gap:14px}.go-title{font-family:var(--font-head);font-size:clamp(26px,7vw,40px);font-weight:900;letter-spacing:.2em;color:var(--magenta);text-shadow:0 0 20px var(--magenta),0 0 60px rgba(255,45,120,.3);animation:flicker 1.8s ease-in-out infinite alternate}@keyframes flicker{0%,90%{opacity:1}92%{opacity:.6}94%{opacity:1}97%{opacity:.7}to{opacity:1}}.go-score-wrap{display:flex;flex-direction:column;align-items:center;gap:2px}.go-label{font-family:var(--font-head);font-size:8px;letter-spacing:.25em;color:var(--dim)}.go-score{font-family:var(--font-head);font-size:38px;font-weight:900;color:var(--cyan);text-shadow:0 0 16px var(--cyan);letter-spacing:.05em}.go-best{color:var(--yellow);text-shadow:0 0 16px var(--yellow);font-size:26px}.go-btn-row{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;justify-content:center;width:100%}.go-btn-row .neon-btn{width:auto;flex:1;min-width:100px}.username-glass{gap:16px}.username-subtitle{font-size:10px;color:var(--dim);text-align:center;margin:-6px 0 0}#username-input{width:100%;padding:12px 14px;background:#ffffff0f;border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font-mono);font-size:16px;outline:none;transition:all var(--transition);text-transform:uppercase;letter-spacing:.05em}#username-input:focus{border-color:var(--cyan);box-shadow:0 0 12px #00ffcc40;background:#ffffff14}#username-input::placeholder{color:#ffffff40}.username-buttons{display:flex;gap:8px;justify-content:center;width:100%}.username-buttons .neon-btn{flex:1}.leaderboard-glass{gap:12px;padding:24px 20px}.leaderboard-header{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.leaderboard-title{font-family:var(--font-head);font-size:clamp(18px,5vw,24px);font-weight:900;letter-spacing:.12em;color:var(--yellow);text-shadow:0 0 16px var(--yellow);text-align:center}.leaderboard-sync-status{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;min-height:14px}.leaderboard-sync-status.online{color:#0f8}.leaderboard-sync-status.offline{color:var(--dim)}.leaderboard-sync-status.loading{color:var(--cyan)}.leaderboard-modes{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;width:100%}.leaderboard-periods{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;width:100%}.leaderboard-mode-btn,.leaderboard-period-btn{font-family:var(--font-head);font-size:8px;font-weight:700;letter-spacing:.1em;padding:7px 10px;background:transparent;border:1px solid var(--border);border-radius:5px;color:var(--dim);cursor:pointer;transition:all var(--transition);outline:none;touch-action:manipulation;min-height:34px}.leaderboard-mode-btn:hover,.leaderboard-period-btn:hover{border-color:var(--cyan);color:var(--cyan)}.leaderboard-mode-btn.active,.leaderboard-period-btn.active{background:#00ffcc1f;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px #0fc3}.leaderboard-list{width:100%;display:flex;flex-direction:column;gap:6px;min-height:160px}.lb-state-msg{text-align:center;color:var(--dim);padding:24px 0;font-size:11px;letter-spacing:.1em;font-family:var(--font-mono)}.lb-loading{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--cyan);font-size:11px;font-family:var(--font-mono);letter-spacing:.1em;padding:24px 0}@keyframes spin{to{transform:rotate(360deg)}}.lb-spinner{width:14px;height:14px;border:2px solid rgba(0,255,204,.3);border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}.leaderboard-entry{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#ffffff0a;border-left:3px solid var(--cyan);border-radius:6px;font-family:var(--font-mono);font-size:12px;transition:all var(--transition);gap:8px;position:relative;overflow:hidden}.leaderboard-entry:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(0,255,204,.03) 0%,transparent 40%);pointer-events:none}.leaderboard-entry:nth-child(1){border-left-color:#ffe600;background:#ffe60012}.leaderboard-entry:nth-child(2){border-left-color:silver;background:#c0c0c00f}.leaderboard-entry:nth-child(3){border-left-color:#cd7f32;background:#cd7f3212}.leaderboard-entry:hover{background:#ffffff14;transform:translate(3px)}.leaderboard-rank{font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--cyan);min-width:32px;text-align:center;flex-shrink:0}.leaderboard-entry:nth-child(1) .leaderboard-rank{color:#ffe600}.leaderboard-entry:nth-child(2) .leaderboard-rank{color:silver}.leaderboard-entry:nth-child(3) .leaderboard-rank{color:#cd7f32}.leaderboard-info{flex:1;display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}.leaderboard-name{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.leaderboard-score{color:var(--cyan);font-weight:700;flex-shrink:0;font-family:var(--font-head);font-size:13px}@media(max-width:600px){.desktop-only{display:none!important}}#dpad{position:fixed;bottom:calc(12px + var(--safe-bottom));left:50%;transform:translate(-50%);z-index:250;display:flex;flex-direction:column;align-items:center;gap:3px;touch-action:none;pointer-events:auto}#dpad.hidden{display:none}.dpad-row{display:flex;gap:3px;align-items:center}.dpad-mid{justify-content:center}.dpad-btn{width:58px;height:58px;background:#00ffcc14;border:1.5px solid rgba(0,255,204,.4);border-radius:12px;color:var(--cyan);font-size:20px;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:manipulation;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transform:translateZ(0);will-change:transform,background;transition:background .08s,transform .08s}.dpad-btn:active,.dpad-btn.pressed{background:#00ffcc47;box-shadow:0 0 18px #00ffcc73;transform:scale(.92) translateZ(0)}.dpad-center-btn{background:transparent;border-color:#00ffcc14;color:#00ffcc1f;font-size:12px;cursor:default}@media(max-width:600px){#app{gap:4px;justify-content:flex-start;padding-top:calc(8px + var(--safe-top))}#hud{width:calc(100vw - 16px);padding:5px 10px;margin-bottom:4px}.hud-value{font-size:16px}#mode-badge{font-size:8px}#canvas-wrap{border-radius:6px;box-shadow:0 0 0 1px var(--border)}.overlay{align-items:flex-start;padding:12px 10px;padding-top:calc(12px + var(--safe-top));padding-bottom:calc(12px + var(--safe-bottom))}.overlay-glass{padding:20px 16px;border-radius:14px;gap:12px;width:100%}.start-glass{padding:18px 14px;gap:11px}.leaderboard-glass{padding:18px 14px}.logo-main{font-size:clamp(30px,9vw,40px)}.setting-row{flex-direction:column;align-items:flex-start;gap:6px}.seg{padding:8px 10px;font-size:9px;min-height:38px}.mode-group{flex-wrap:wrap}.go-score{font-size:32px}.go-best{font-size:22px}.neon-btn{font-size:11px;padding:11px 20px}.neon-btn-lg{font-size:12px;padding:12px 28px}.overlay-glass{margin-bottom:calc(var(--dpad-height, 200px) + 12px + var(--safe-bottom))}#leaderboard-screen .overlay-glass,#pause-overlay .overlay-glass,#username-dialog .overlay-glass{margin-bottom:0}}@media(max-height:640px)and (max-width:400px){.logo-main{font-size:28px}.logo-sub,.logo-ver{display:none}.overlay-glass{gap:9px;padding:14px 12px}}#canvas-wrap.dim-1{box-shadow:0 0 0 1px #ff2d7866,0 0 40px #ff2d781f}#canvas-wrap.dim-2{box-shadow:0 0 0 1px #ffe60066,0 0 40px #ffe6001f}#canvas-wrap.dim-3{box-shadow:0 0 0 1px #7c3aed80,0 0 40px #7c3aed24}