:root{--bg:#14100e;--panel:#211a17;--fg:#f4ece4;--mute:#a89b90;--accent:#ffd23f;--p:#e2553b;--m:#3b8fe2}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,sans-serif;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:12px}
.wrap{max-width:440px;margin:0 auto}
h1{font-size:20px;margin:0 0 8px}
#stage{position:relative;border-radius:12px;overflow:hidden;background:#0b0908;line-height:0;touch-action:none}
canvas{width:100%;height:auto;display:block;aspect-ratio:480/572}
#hud{position:absolute;left:10px;top:8px;line-height:1.3;font-weight:700;color:var(--accent);text-shadow:0 1px 3px #000}
#hud span{display:block}
#stick{position:absolute;left:14px;bottom:14px;width:128px;height:128px;border-radius:50%;background:rgba(20,16,14,.55);border:3px solid rgba(255,210,63,.8);touch-action:none;display:none}
#stick.on{display:block}
#knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--accent);border:3px solid #14100e;box-sizing:border-box}
button{font:inherit;color:var(--fg);background:var(--panel);border:2px solid #4a3d36;border-radius:10px;padding:10px 6px;min-height:54px;cursor:pointer}
button[aria-pressed=true]{background:var(--accent);color:#14100e;border-color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.grid button{font-weight:700}
.grid .punch{border-color:var(--p)}.grid .move{border-color:var(--m)}
.grid button.on{background:var(--accent);color:#14100e}
.ctl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
p{color:var(--mute);font-size:14px}