:root{--font-display: "Orbitron", "Rajdhani", system-ui, sans-serif;--font-ui: "Rajdhani", system-ui, "Segoe UI", sans-serif;--bg: #05060f;--text: #dce6ff;--muted: #8fa1c9;--panel: rgba(18, 26, 52, .55);--panel-2: rgba(12, 18, 38, .72);--border: rgba(120, 160, 240, .18);--accent: #38bdf8;--liquid: #2dd4ff;--danger: #ff5a6a;--gold: #ffd76a;--radius: 16px}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;touch-action:manipulation}body.high-contrast{--panel: rgba(6, 10, 24, .9);--panel-2: rgba(4, 7, 18, .94);--border: rgba(160, 200, 255, .5);--muted: #b9c8ec}#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}#app{position:fixed;inset:0;z-index:1}.app-inner{position:relative;width:100%;height:100%}.screen{position:absolute;inset:0;display:none}.screen.active{display:flex}.btn{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:1.5px;color:var(--text);background:linear-gradient(180deg,#3c549659,#18224280);border:1px solid var(--border);border-radius:12px;padding:12px 18px;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.btn:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 22px #0006,0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}.btn.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 60%,#12203f),color-mix(in srgb,var(--accent) 24%,#0c1428));border-color:color-mix(in srgb,var(--accent) 70%,transparent);color:#fff;text-shadow:0 0 8px rgba(0,0,0,.4)}.btn.primary:hover{box-shadow:0 8px 28px #00000080,0 0 26px color-mix(in srgb,var(--accent) 65%,transparent)}.btn.wide{width:100%}.btn.small{padding:8px 12px;font-size:12px}.btn.icon{padding:10px 0;width:46px;font-size:16px;text-align:center}.menu{align-items:center;justify-content:center;flex-direction:column;padding:20px}.menu-card{width:min(500px,92vw);text-align:center;padding:40px 34px;background:var(--panel);border:1px solid var(--border);border-radius:24px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 80px #0000008c,inset 0 1px #ffffff0f;animation:rise .6s cubic-bezier(.2,.9,.3,1) both}@keyframes rise{0%{opacity:0;transform:translateY(24px) scale(.98)}}.logo{font-family:var(--font-display);font-weight:900;font-size:clamp(56px,12vw,108px);letter-spacing:10px;line-height:1;margin-left:10px;background:linear-gradient(180deg,#eafcff,var(--liquid) 55%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px color-mix(in srgb,var(--liquid) 60%,transparent));animation:flicker 6s infinite}@keyframes flicker{0%,97%,to{opacity:1}98%{opacity:.75}99%{opacity:.9}}.tagline{font-family:var(--font-display);letter-spacing:6px;color:var(--accent);font-size:14px;margin-top:6px;text-transform:uppercase}.blurb{color:var(--muted);font-size:16px;line-height:1.5;margin:18px auto 22px;max-width:40ch}.blurb em{color:var(--text);font-style:normal;font-weight:600}.menu-buttons{display:grid;gap:12px;margin-top:8px}.menu-buttons .primary{font-size:18px;padding:15px}.menu-foot{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);font-family:var(--font-display);letter-spacing:3px;font-size:13px}.menu-foot b{color:var(--gold);font-size:20px}.credit{position:absolute;bottom:14px;color:#8ca0c873;font-size:12px;letter-spacing:1px;text-align:center;padding:0 12px}.diff-pills{display:flex;gap:8px;margin:4px 0 20px}.diff-pills button{flex:1;display:flex;flex-direction:column;gap:2px;align-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:10px 6px;cursor:pointer;color:var(--muted);transition:all .18s ease}.diff-pills button strong{font-family:var(--font-display);font-size:13px;letter-spacing:1px;color:var(--text)}.diff-pills button small{font-size:11px;opacity:.7;line-height:1.1}.diff-pills button:hover{border-color:var(--accent)}.diff-pills button.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--panel-2));box-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent)}.diff-pills.small button{padding:8px 4px}.diff-pills.small button small{display:none}.game{flex-direction:column;padding:12px;gap:10px}.hud{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:10px 18px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.hud-block{display:flex;flex-direction:column}.hud-block.right{align-items:flex-end}.hud-label{font-family:var(--font-display);font-size:11px;letter-spacing:3px;color:var(--muted)}.hud-value{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1}.hud-value.big{font-size:34px;color:#fff;text-shadow:0 0 16px color-mix(in srgb,var(--accent) 55%,transparent)}.hud-zone{font-size:12px;color:var(--accent);letter-spacing:2px;text-transform:uppercase}.hud-best{font-size:12px;color:var(--muted);letter-spacing:1px}.hud-best span{color:var(--gold)}.hud-goal{display:flex;flex-direction:column;gap:5px}.hud-goal-top{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:12px;letter-spacing:2px;color:var(--muted)}.meter{height:10px;background:#0006;border-radius:6px;overflow:hidden;border:1px solid var(--border)}.meter-fill{height:100%;width:0%;border-radius:6px;transition:width .15s linear}.meter.goal .meter-fill{background:linear-gradient(90deg,var(--liquid),var(--accent));box-shadow:0 0 10px var(--liquid)}.meter.goal .meter-fill.done{background:linear-gradient(90deg,#6dffb0,var(--gold))}.meter.count{height:6px;margin-top:1px;display:none}.meter.count.show{display:block}.meter.count .meter-fill{background:linear-gradient(90deg,#8fb2ff,var(--accent));transition:width .1s linear}.meter.count.urgent .meter-fill{background:linear-gradient(90deg,var(--gold),var(--danger));animation:pulse .5s infinite}@keyframes pulse{50%{opacity:.55}}.play{flex:1;display:flex;gap:12px;min-height:0}.board-wrap{flex:1;position:relative;min-width:0;border-radius:var(--radius);overflow:hidden}#board{width:100%;height:100%;display:block}.banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .3s}.banner.show{opacity:1}.banner-main{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,8vw,80px);letter-spacing:6px;color:#fff;text-shadow:0 0 30px var(--liquid);animation:bannerin .5s cubic-bezier(.2,.9,.3,1) both}.banner-sub{font-family:var(--font-display);letter-spacing:8px;color:var(--accent);margin-top:6px}@keyframes bannerin{0%{transform:scale(.7);opacity:0;letter-spacing:26px}}.flux-alert{position:absolute;top:14px;left:50%;transform:translate(-50%);font-family:var(--font-display);font-weight:700;letter-spacing:4px;font-size:20px;color:var(--gold);text-shadow:0 0 14px var(--danger);padding:6px 16px;border-radius:10px;background:#0006;border:1px solid var(--danger);opacity:0;transition:opacity .2s}.flux-alert.show{opacity:1;animation:pulse .6s infinite}.sidebar{width:220px;display:flex;flex-direction:column;gap:10px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.panel-title{font-family:var(--font-display);font-size:12px;letter-spacing:3px;color:var(--muted);margin-bottom:8px;text-align:center}.queue-panel{flex:1;min-height:0;display:flex;flex-direction:column}.queue{flex:1;display:flex;flex-direction:column-reverse;gap:6px;align-items:center;justify-content:flex-end}.q-slot{position:relative;width:62px;height:62px;border-radius:10px;background:#00000047;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;opacity:.75;transition:all .2s}.q-slot canvas{width:100%;height:100%}.q-slot.active{width:84px;height:84px;opacity:1;border-color:var(--accent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 12%,rgba(0,0,0,.3))}.q-tag{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);font-family:var(--font-display);font-size:9px;letter-spacing:2px;color:var(--accent);background:var(--bg);padding:1px 6px;border-radius:6px;border:1px solid var(--border)}.controls{display:flex;flex-direction:column;gap:10px}.controls .flow{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 40%,#2a1f06),#1e160899);border-color:var(--gold);color:#fff}.controls .flow:hover:not(:disabled){box-shadow:0 0 24px color-mix(in srgb,var(--gold) 55%,transparent)}.control-row{display:flex;gap:8px;justify-content:space-between}.control-row .icon{flex:1}.legend{font-size:13px;color:var(--muted)}.legend-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.legend-hint{font-size:12px;opacity:.7;line-height:1.35;margin-top:8px}.dot{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}.dot.src{background:var(--accent);box-shadow:0 0 8px var(--accent)}.dot.gold{background:var(--gold);box-shadow:0 0 8px var(--gold)}.dot.bad{background:#0b0d16;border:1px solid var(--danger)}.overlay{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;padding:20px;background:#0406108c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.overlay.show{display:flex;animation:fade .25s ease both}@keyframes fade{0%{opacity:0}}.dialog{width:min(440px,94vw);background:var(--panel-2);border:1px solid var(--border);border-radius:22px;padding:28px;box-shadow:0 30px 90px #0009;animation:pop .3s cubic-bezier(.2,.9,.3,1) both}.dialog.wide{width:min(620px,94vw)}@keyframes pop{0%{transform:scale(.9) translateY(10px);opacity:0}}.dialog h2{font-family:var(--font-display);font-weight:900;letter-spacing:4px;text-align:center;margin:0 0 18px;font-size:30px;text-shadow:0 0 20px color-mix(in srgb,var(--accent) 45%,transparent)}.dialog h2.danger{color:var(--danger);text-shadow:0 0 20px rgba(255,90,106,.5)}.burst-badge{text-align:center;font-size:44px;color:var(--gold);filter:drop-shadow(0 0 16px var(--gold));animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dialog-buttons{display:grid;gap:10px;margin-top:20px}.dialog-buttons.row{grid-auto-flow:column;grid-auto-columns:1fr}.stats{display:flex;flex-direction:column;gap:6px}.stat-row{display:flex;justify-content:space-between;padding:9px 14px;background:#00000047;border-radius:10px;font-size:15px}.stat-row span:first-child{color:var(--muted)}.stat-row span:last-child{font-family:var(--font-display);font-weight:700}.stat-row.total{background:color-mix(in srgb,var(--accent) 18%,rgba(0,0,0,.3));border:1px solid var(--border);margin-top:4px;font-size:17px}.stat-row.total span:last-child{color:var(--gold)}.highscore-entry{display:none;margin-top:18px;text-align:center}.highscore-entry.show{display:block;animation:pop .4s both}.hs-line{font-family:var(--font-display);letter-spacing:3px;color:var(--gold);margin-bottom:10px;text-shadow:0 0 14px var(--gold);animation:pulse 1s infinite}.hs-input{display:flex;gap:8px;justify-content:center}.hs-input input{width:120px;font-family:var(--font-display);font-size:24px;letter-spacing:8px;text-align:center;text-transform:uppercase;background:#0006;border:1px solid var(--accent);border-radius:10px;color:#fff;padding:6px}.hs-input input:focus{outline:none;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 55%,transparent)}.settings{display:flex;flex-direction:column;gap:14px}.slider{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}.slider input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:4px;background:#ffffff1f;outline:none}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 12px var(--accent)}.slider input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 12px var(--accent)}.toggle{display:flex;align-items:center;justify-content:space-between;font-size:15px;color:var(--text);cursor:pointer}.toggle input{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}.set-diff-wrap{display:flex;flex-direction:column;gap:8px;font-size:15px}.set-diff-wrap>span{color:var(--muted);font-size:14px}.scores{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow-y:auto}.score-row{display:grid;grid-template-columns:32px 1fr auto auto auto;gap:10px;align-items:center;padding:9px 12px;background:#00000047;border-radius:10px;font-size:15px}.score-row .rank{font-family:var(--font-display);color:var(--muted)}.score-row .who{font-family:var(--font-display);font-weight:700;letter-spacing:2px}.score-row .lv,.score-row .df{font-size:12px;color:var(--muted)}.score-row .pts{font-family:var(--font-display);font-weight:700;color:var(--gold)}.score-row.hi{background:color-mix(in srgb,var(--accent) 22%,rgba(0,0,0,.3));border:1px solid var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}.score-row:nth-child(1) .rank{color:var(--gold)}.scores-empty{text-align:center;color:var(--muted);padding:30px 10px}.howto ol{margin:0 0 12px;padding-left:22px;line-height:1.5;color:var(--text);font-size:15px}.howto li{margin-bottom:8px}.howto li b{color:var(--accent)}.howto li em{color:var(--gold);font-style:normal}.howto .dot{vertical-align:middle}.howto-pieces{display:flex;gap:12px;justify-content:center;margin:8px 0}.howto-pieces figure{margin:0;text-align:center}.howto-pieces figcaption{font-size:12px;color:var(--muted);font-family:var(--font-display);letter-spacing:1px}.howto-keys{font-size:13px;color:var(--muted);text-align:center;background:#00000040;border-radius:10px;padding:10px}.howto-keys b{color:var(--accent)}@media (max-width: 760px){.play{flex-direction:column}.sidebar{width:100%;flex-direction:row;flex-wrap:wrap}.queue-panel{order:1;flex:1 1 100%}.queue{flex-direction:row-reverse}.q-slot{width:48px;height:48px}.q-slot.active{width:60px;height:60px}.controls{flex:1 1 55%}.legend{flex:1 1 40%}.hud{grid-template-columns:1fr 1.4fr 1fr;padding:8px 12px}.hud-value.big{font-size:26px}}@media (max-width: 480px){.legend,.hud-zone{display:none}}@media (prefers-reduced-motion: reduce){*{animation-duration:1ms!important}}