:root{--bg:#0b1020;--fg:#e8ecff;--accent:#5eead4;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif}
body{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px}
canvas{width:100%;max-width:800px;aspect-ratio:4/3;background:#050814;border:1px solid #26305a;border-radius:8px;touch-action:none}
#pad{display:flex;gap:8px;width:100%;max-width:800px;justify-content:space-between}
#pad button{flex:1;min-height:56px;font-size:20px;border:1px solid #3a4780;border-radius:10px;background:#18204a;color:var(--fg);touch-action:none;user-select:none}
#pad button.on{background:var(--accent);color:#04201c}
small{opacity:.7;text-align:center}