*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#1b1b3a;overflow:hidden;overscroll-behavior:none}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}
#stage{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:0}
canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block;background:#fbf7ea;box-shadow:0 0 0 4px #4a4e8c}

/* on-screen controller: only on touch devices (or with ?touch in the URL) */
#pad{display:none;width:100%;max-width:560px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:12px}
body.touch #pad{display:flex}
#pad button{font:700 14px/1 system-ui,sans-serif;color:#fbf7ea;background:#4a4e8c;border:2px solid #c9d1ee;border-radius:10px;touch-action:none}
#pad button.on{background:#c9d1ee;color:#1b1b3a}
.ab button{background:#772432!important}
.ab button.on{background:#c9d1ee!important;color:#772432}
.dpad{display:grid;grid-template:repeat(3,52px)/repeat(3,52px);gap:2px}
.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}
.mid{display:flex;flex-direction:column;gap:10px}
.mid button{width:78px;height:34px;font-size:11px;border-radius:17px;letter-spacing:.06em}
.ab{display:flex;gap:14px;align-items:flex-end}
.ab button{width:64px;height:64px;border-radius:50%;font-size:20px}
.ab .b{margin-bottom:-22px}