html{--viewport-width: 100vw;--viewport-height: 100vh}html,body{width:var(--viewport-width);height:var(--viewport-height);min-width:var(--viewport-width);min-height:var(--viewport-height);margin:0;overflow:hidden;background:#6fb7f2;font-family:Arial,Microsoft YaHei,sans-serif;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}body{position:fixed;top:0;right:0;bottom:0;left:0}#game{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden}canvas{display:block;max-width:100%;max-height:100%;box-shadow:0 18px 50px #00000059}button{font:inherit}#touch-controls{pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:none;padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}html.is-mobile-layout canvas{box-shadow:none}@media(pointer:coarse){canvas{box-shadow:none}}html.is-mobile-layout #touch-controls{display:block}@media(pointer:coarse),(max-width:900px),(orientation:portrait){#touch-controls{display:block}}html.is-mobile-layout.is-css-rotated #game{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;transform:none}html.is-mobile-layout.is-css-rotated canvas{position:absolute;top:50%;left:50%;width:100vh!important;height:100vw!important;max-width:none;max-height:none;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}@supports (height: 100dvh){html.is-mobile-layout.is-css-rotated #game{width:100dvw;height:100dvh}html.is-mobile-layout.is-css-rotated canvas{width:100dvh!important;height:100dvw!important}}.touch-joystick,.touch-actions,.touch-mute{pointer-events:auto;position:absolute}.touch-joystick,.touch-actions{bottom:max(18px,env(safe-area-inset-bottom))}.touch-joystick{left:max(24px,env(safe-area-inset-left));width:150px;height:150px;border-radius:50%;touch-action:none}.joystick-ring{position:absolute;top:0;right:0;bottom:0;left:0;border:3px solid rgba(255,255,255,.62);border-radius:50%;background:radial-gradient(circle,#0f172a2e 0,#0f172a2e 28%,#0f172a85 29%,#0f172a85);box-shadow:0 12px 28px #0000003d,inset 0 1px #fff3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.joystick-ring:before,.joystick-ring:after{content:"";position:absolute;background:#ffffff59;border-radius:999px}.joystick-ring:before{width:82px;height:2px;left:32px;top:73px}.joystick-ring:after{width:2px;height:82px;left:73px;top:32px}.joystick-knob{position:absolute;left:48px;top:48px;width:54px;height:54px;border:2px solid rgba(255,255,255,.86);border-radius:50%;background:#0ea5e9b3;box-shadow:0 10px 22px #0000004d,inset 0 1px #ffffff4d;transition:transform 90ms ease-out,background .12s ease-out}.touch-joystick.is-active .joystick-knob{background:#38bdf8e0;transition:background .12s ease-out}.touch-actions{right:max(24px,env(safe-area-inset-right));display:flex;align-items:flex-end;gap:12px}.touch-mute{top:max(16px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:46px;height:46px;font-size:18px;color:#dbeafe}.touch-end-actions{pointer-events:none;position:fixed;left:50%;top:62%;z-index:10000;display:flex;gap:16px;opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .14s ease-out,transform .14s ease-out}.touch-end-actions.is-visible{pointer-events:auto;opacity:1;transform:translate(-50%,-50%) scale(1)}.touch-button{width:58px;height:58px;border:2px solid rgba(255,255,255,.78);border-radius:50%;background:#0f172a94;color:#fff;box-shadow:0 10px 24px #00000042,inset 0 1px #ffffff38;font-size:22px;font-weight:800;line-height:1;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent;touch-action:none}.touch-button:active{transform:scale(.94);background:#0ea5e9b8}.touch-menu-button{min-width:96px;height:54px;border:2px solid rgba(255,255,255,.82);border-radius:8px;background:#0f172ac7;color:#fff;box-shadow:0 12px 28px #00000052,inset 0 1px #fff3;font-size:20px;font-weight:800;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent;touch-action:none}.touch-menu-button:active{transform:scale(.96);background:#0ea5e9c7}.touch-menu-button.is-hidden{display:none}.touch-attack{width:64px;height:64px;color:#fde68a}.touch-mute{width:46px;height:46px;font-size:18px;color:#dbeafe}.touch-restart{color:#bfdbfe}.touch-next{color:#bbf7d0}html.is-mobile-layout.is-css-rotated .touch-joystick{top:max(24px,env(safe-area-inset-top));bottom:auto;left:max(20px,env(safe-area-inset-left))}html.is-mobile-layout.is-css-rotated .touch-actions{right:auto;bottom:max(24px,env(safe-area-inset-bottom));left:max(34px,env(safe-area-inset-left))}html.is-mobile-layout.is-css-rotated .touch-mute{top:auto;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}html.is-mobile-layout.is-css-rotated .touch-button{transform:rotate(90deg)}html.is-mobile-layout.is-css-rotated .touch-button:active{transform:rotate(90deg) scale(.94)}html.is-mobile-layout.is-css-rotated .touch-end-actions{transform:translate(-50%,-50%) rotate(90deg) scale(.96)}html.is-mobile-layout.is-css-rotated .touch-end-actions.is-visible{transform:translate(-50%,-50%) rotate(90deg) scale(1)}html.is-mobile-layout.is-short .touch-joystick{width:128px;height:128px}html.is-mobile-layout.is-short .touch-button{width:48px;height:48px;font-size:19px}html.is-mobile-layout.is-short .joystick-ring:before{width:70px;left:27px;top:62px}html.is-mobile-layout.is-short .joystick-ring:after{height:70px;left:62px;top:27px}html.is-mobile-layout.is-short .joystick-knob{left:42px;top:42px;width:44px;height:44px}html.is-mobile-layout.is-short .touch-attack{width:54px;height:54px}html.is-mobile-layout.is-short .touch-mute{width:42px;height:42px}html.is-mobile-layout.is-short .touch-actions{gap:8px}html.is-mobile-layout.is-short .touch-menu-button{min-width:82px;height:46px;font-size:17px}