*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#87c8ff;font-family:Trebuchet MS,system-ui,sans-serif}body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0}canvas{display:block}#cross{position:fixed;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%) scale(.65);pointer-events:none;z-index:5;transition:transform .08s ease}#cross:before,#cross:after{content:"";position:absolute;background:#ffffffe6;box-shadow:0 0 4px #0009}#cross:before{left:50%;top:0;width:2px;height:100%;transform:translate(-50%)}#cross:after{top:50%;left:0;height:2px;width:100%;transform:translateY(-50%)}#cross.locked:before,#cross.locked:after{background:#ff4d4d}#hud{position:fixed;left:18px;bottom:16px;z-index:5;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55);pointer-events:none;user-select:none}#speed{font-size:40px;font-weight:800;line-height:1;letter-spacing:-1px}#speed small{font-size:16px;opacity:.85;font-weight:600}#stats{font-size:14px;opacity:.9;margin-top:4px}#webstate{position:fixed;right:20px;bottom:18px;z-index:5;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.55);font-size:14px;text-align:right;pointer-events:none}.pill{display:inline-block;padding:3px 9px;border-radius:20px;background:#00000059;margin-left:6px}.pill.on{background:#ff4d4d}#overlay{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;background:radial-gradient(120% 120% at 50% 30%,#285aa08c,#0a142deb);backdrop-filter:blur(2px)}#overlay.hidden{display:none}#overlay h1{font-size:clamp(34px,7vw,76px);font-weight:900;letter-spacing:-2px;text-shadow:0 6px 0 #b3261e,0 8px 18px rgba(0,0,0,.5)}#overlay h1 span{color:#ffd23f}#overlay p{max-width:560px;margin:14px 16px;font-size:17px;line-height:1.5;opacity:.95}.keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 26px;margin:8px 0 26px;font-size:15px}.keys b{display:inline-block;min-width:64px;padding:2px 8px;margin-right:8px;background:#fff;color:#16284a;border-radius:6px;font-weight:800;text-align:center;box-shadow:0 3px #00000059}.keys div{text-align:left}#play{pointer-events:auto;cursor:pointer;border:none;font-weight:900;font-size:22px;color:#16284a;background:#ffd23f;padding:16px 46px;border-radius:40px;box-shadow:0 7px #c79a1f,0 10px 24px #0006;transition:transform .08s,box-shadow .08s}#play:active{transform:translateY(5px);box-shadow:0 2px #c79a1f,0 4px 12px #0006}#loading{color:#fff;font-size:18px;opacity:.9}#err{color:#ffd;background:#a11;padding:14px 20px;border-radius:10px;max-width:520px;display:none}.hint{position:fixed;top:14px;left:50%;transform:translate(-50%);z-index:5;color:#fff;background:#00000052;padding:7px 16px;border-radius:20px;font-size:14px;pointer-events:none;opacity:0;transition:opacity .4s;text-shadow:0 1px 3px rgba(0,0,0,.6)}#touch{position:fixed;inset:0;z-index:6;pointer-events:none;touch-action:none}#touch.hidden{display:none}.touch-zone{position:absolute;top:0;bottom:0;pointer-events:auto;touch-action:none}.touch-move{left:0;width:50%}.touch-look{right:0;width:50%}.joystick-base{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:#ffffff24;border:2px solid rgba(255,255,255,.35);pointer-events:none;z-index:7}.joystick-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:#ffffff8c;box-shadow:0 2px 8px #0006}.touch-buttons{position:fixed;right:18px;bottom:22px;z-index:8;display:grid;grid-template-columns:repeat(2,auto);gap:12px;pointer-events:none}.touch-btn{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;width:74px;height:74px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:#141e3780;color:#fff;font-weight:800;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.6);box-shadow:0 4px 12px #00000059}.touch-btn.pressed{background:#ff4d4d;transform:scale(.93)}