*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none}
html,body{margin:0;height:100%;background:#12161d;overflow:hidden;touch-action:none;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}
#wrap{max-width:480px;margin:0 auto;height:100dvh;position:relative;background:#0e1218}
canvas{display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;top:10px;left:0;right:0;text-align:center;color:#cdd6e0;
  font-size:13px;pointer-events:none;text-shadow:0 1px 3px #000}
#hint{position:absolute;bottom:118px;left:0;right:0;text-align:center;color:#6b7686;
  font-size:11px;pointer-events:none}
#reset{position:absolute;top:8px;right:10px;background:#1c232d;border:1px solid #2c3542;
  color:#9fb0c0;border-radius:9px;padding:6px 10px;font-size:12px}
#ctrl{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:space-between;
  align-items:center;padding:0 18px;pointer-events:none}
#pad{position:relative;width:150px;height:150px;border-radius:50%;
  background:rgba(28,35,45,.55);border:1.5px solid #2c3542;pointer-events:auto;touch-action:none}
#knob{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;
  border-radius:50%;background:radial-gradient(circle at 40% 35%,#3c4a59,#232c37);
  border:1.5px solid #4a5865;pointer-events:none}
#bfire{pointer-events:auto;width:92px;height:92px;border-radius:50%;border:none;
  background:radial-gradient(circle at 40% 35%,#e0995e,#c46a3a);color:#20140c;font-size:15px;
  font-weight:700;letter-spacing:.06em;box-shadow:0 3px 0 #8f4d2a}
#bfire:active{transform:translateY(2px);box-shadow:0 1px 0 #8f4d2a}