*{box-sizing:border-box}
body{margin:0;background:#11151b;color:#e9edf3;font-family:system-ui,sans-serif}
.wrap{width:min(1080px,100%);margin:0 auto;padding:20px}
.hud,.tips{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hud{margin-bottom:12px}
.hud strong{font-size:24px;margin-right:12px}
.hud span,.tips{color:#aab4c3}
.meters{display:flex;gap:18px;align-items:center}
.meters label{display:flex;gap:8px;align-items:center}
progress{width:150px;height:12px;accent-color:#e85b4f}
canvas{display:block;width:100%;height:auto;background:#1f2730;border:1px solid #384554;border-radius:12px;box-shadow:0 18px 40px #0005}
.tips{font-size:14px;margin-top:10px}
.toast{margin-top:14px;padding:12px 14px;border-radius:10px;background:#222a35;border:1px solid #394657;color:#dfe6ef}
@media(max-width:640px){.wrap{padding:10px}.hud strong{display:block;margin-bottom:4px}.meters{width:100%;justify-content:space-between}progress{width:110px}}

.touch-controls{display:none;align-items:center;justify-content:space-between;gap:18px;margin-top:14px}
.dpad{display:grid;grid-template-columns:56px 56px 56px;grid-template-rows:56px 56px;gap:6px}
.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}
.touch-controls button{min-width:56px;min-height:56px;border:1px solid #4a596b;border-radius:14px;background:#293542;color:#fff;font-size:24px;touch-action:none}
.run-btn{width:84px;height:84px;border-radius:50%!important;font-size:18px!important}
@media(pointer:coarse){.touch-controls{display:flex}}