:root{--ink:#10202b;--sun:#ffd23f;--sea:#1a6f9c;--panel:#091c28c7}*{box-sizing:border-box}html,body{color:#fff;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;background:#0e3b52;height:100%;margin:0;font-family:Nunito,ZCOOL KuaiLe,system-ui,sans-serif;overflow:hidden}#app{position:fixed;inset:0;overflow:hidden}body.rotated #app{width:var(--gw);height:var(--gh);transform-origin:0 0;transform:translateX(var(--gh)) rotate(90deg);inset:0 auto auto 0}#stage canvas{display:block}body.playing #stage canvas{cursor:none}#overlay{padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:radial-gradient(#05192826,#051928a6);place-items:center;display:grid;position:fixed;inset:0}#overlay.hidden,.panel.hidden{display:none}.panel{text-align:center;background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:2px solid #ffffff1f;border-radius:24px;width:min(560px,100%);max-height:100%;padding:28px 28px 22px;animation:.35s ease-out pop;position:relative;overflow:auto;box-shadow:0 20px 60px #00000073}@keyframes pop{0%{opacity:0;transform:scale(.92)}}h1,h2{letter-spacing:1px;color:var(--sun);text-shadow:0 4px 0 var(--ink), 0 6px 18px #0006;margin:0 0 10px;font-family:Lilita One,ZCOOL KuaiLe,Arial Black,sans-serif;font-weight:400}h1{font-size:clamp(48px,12vw,84px);line-height:.95}h1 b{font-weight:inherit}h1 span{color:#7dd3fc;margin-top:6px;font-size:.42em;display:block}h2{font-size:40px}.hero{filter:drop-shadow(0 10px 10px #0006);height:150px;margin:-8px 0 6px;animation:1.6s ease-in-out infinite bob}@keyframes bob{50%{transform:translateY(-8px)rotate(-3deg)}}.tag{opacity:.9;max-width:420px;margin:0 auto 18px;line-height:1.4}button{letter-spacing:1px;color:var(--ink);background:linear-gradient(#ffe57a, var(--sun));cursor:pointer;border:none;border-radius:16px;margin:6px;padding:12px 46px;font-family:Lilita One,ZCOOL KuaiLe,Arial Black,sans-serif;font-size:26px;transition:transform 80ms;box-shadow:0 6px #b8860b,0 10px 20px #00000059}button:hover{transform:translateY(-2px)}button:active{transform:translateY(4px);box-shadow:0 2px #b8860b}button:focus-visible{outline-offset:3px;outline:3px solid #7dd3fc}button.ghost{color:#fff;box-shadow:none;background:#ffffff1f;font-size:18px}.best{min-height:1.2em;color:var(--sun);margin:8px 0 0;font-weight:800}.controls{opacity:.9;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 14px;margin-top:16px;font-size:14px;display:grid}kbd{background:#ffffff24;border-bottom:2px solid #0006;border-radius:6px;min-width:22px;margin:0 1px;padding:2px 6px;font-family:inherit;font-size:12px;font-weight:800;display:inline-block}.touch-note{opacity:.65;margin:12px 0 0;font-size:13px}.bar{background:#ffffff1f;border-radius:6px;height:12px;margin:14px 0 10px;overflow:hidden}#load-bar{background:linear-gradient(90deg, #7dd3fc, var(--sun));width:0;height:100%;transition:width .25s}.stats{grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0 20px;display:grid}.stats div{background:#ffffff12;border-radius:14px;padding:10px}.stats span{opacity:.7;text-transform:uppercase;letter-spacing:1px;font-size:13px;display:block}.stats b{color:var(--sun);font-family:Lilita One,ZCOOL KuaiLe,Arial Black,sans-serif;font-size:30px;font-weight:400}html[data-lang=zh] h1{letter-spacing:4px}html[data-lang=zh] h1 span{letter-spacing:6px}html[data-lang=zh] .panel>button,html[data-lang=zh] .stats span{letter-spacing:3px}.lang-switch{background:#ffffff1a;border-radius:10px;display:flex;position:absolute;top:14px;right:14px;overflow:hidden}.lang-switch button{box-shadow:none;letter-spacing:0;color:#ffffffb3;background:0 0;border-radius:0;margin:0;padding:4px 10px;font-family:Nunito,ZCOOL KuaiLe,system-ui,sans-serif;font-size:13px;font-weight:800}.lang-switch button:hover,.lang-switch button:active{box-shadow:none;transform:none}.lang-switch button.on{background:var(--sun);color:var(--ink)}#touch-hud{top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 10px);gap:8px;display:none;position:fixed}body.touch.playing #touch-hud{display:flex}#touch-hud button.icon{width:44px;height:44px;box-shadow:none;background:#0b1e2a8c;border:2px solid #ffffff2e;border-radius:14px;place-items:center;margin:0;padding:0;display:grid}#touch-hud button.icon:hover{transform:none}#touch-hud button.icon:active{box-shadow:none;transform:scale(.92)}#touch-hud svg{fill:none;stroke:#fff;stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}#touch-hud svg .fill{fill:#fff}#btn-pause svg{stroke-width:3.4px}#btn-mute .off,#btn-mute.muted .on{display:none}#btn-mute.muted .off{display:inline}body.touch .controls{display:none}body.touch .touch-note{opacity:.85;font-size:15px;line-height:1.45}body.touch button:hover{transform:none}body.compact .panel{padding:16px 20px 14px}body.compact .hero{height:84px;margin:-4px 0 0}body.compact h1{font-size:44px}body.compact h2{font-size:30px}body.compact .tag{margin-bottom:10px;font-size:14px}body.compact .panel>button{padding:9px 36px;font-size:22px}body.compact .touch-note{margin-top:8px}body.compact .stats{margin:8px 0 12px}body.compact .stats b{font-size:24px}body.rotated #touch-hud{top:calc(env(safe-area-inset-right) + 10px);right:calc(env(safe-area-inset-bottom) + 10px)}body.rotated #overlay{padding:max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-top))}