html,body{margin:0;height:100%;background:#0d0818;color:#ddd;font:15px system-ui,sans-serif;overflow:hidden;overscroll-behavior:none;position:fixed;inset:0;width:100%;
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#wrap{position:fixed;inset:0;overflow:hidden}
canvas{position:absolute;background:#000;touch-action:none;image-rendering:pixelated}
button{font:inherit;color:#fff;background:#3a2c5c;border:1px solid #6a58a0;border-radius:10px;padding:8px 14px;touch-action:manipulation}
button:active{background:#5a4692}
#menu{position:absolute;top:env(safe-area-inset-top);left:50%;transform:translateX(-50%);background:#eee;color:#000;border:1px solid #666;display:none;z-index:30;min-width:260px;max-height:100%;overflow:auto;box-shadow:0 4px 16px #000a}
#menu div{padding:7px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:24px}
#menu div:hover{background:#39c;color:#fff}#menu hr{margin:0}#menu small{opacity:.6}
body.touch #menu div{padding:11px 16px}
#msg{position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom);background:#000b;padding:6px;text-align:center;display:none;z-index:25}

/* touch overlay */
#touch{position:absolute;inset:0;pointer-events:none;z-index:10}
#touch[hidden]{display:none}
#touch>*{pointer-events:auto}
#bar{position:absolute;display:flex;gap:6px;right:calc(8px + env(safe-area-inset-right));top:calc(8px + env(safe-area-inset-top))}
#bar button{min-width:44px;height:44px;padding:0;font-size:20px;opacity:.75;background:#1a1228cc}
#bar button.off{opacity:.35;text-decoration:line-through}
body.portrait #bar{top:calc(var(--cb,300px) + env(safe-area-inset-top) + 8px)}
#pad{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));
 width:var(--padsz,150px);height:var(--padsz,150px);border-radius:50%;background:radial-gradient(#ffffff14,#ffffff26);border:2px solid #ffffff44;touch-action:none}
#pad::before,#pad::after{content:"";position:absolute;background:#ffffff22}
#pad::before{left:50%;top:8%;bottom:8%;width:2px}#pad::after{top:50%;left:8%;right:8%;height:2px}
#knob{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:#ffffff77;border:2px solid #fff9;pointer-events:none}
#fire{position:absolute;right:calc(18px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom));
 width:calc(var(--padsz,150px)*.62);height:calc(var(--padsz,150px)*.62);border-radius:50%;background:#c4384866;border:2px solid #ffffff77;font-size:16px;touch-action:none;opacity:.9}
#fire.on{background:#e85060cc}

/* start screen */
#start{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#1a1228;overflow:auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#start[hidden]{display:none}
#start .panel{width:min(92vw,420px);text-align:center;padding:10px}
#start h1{white-space:nowrap;font-size:clamp(18px,min(6vh,8vw),34px);margin:0 0 12px;color:#ffd86a}
#start .big{display:block;width:100%;margin:8px 0;font-size:19px;padding:14px}
#start .big[disabled]{opacity:.35}
#start .row{display:flex;gap:8px;justify-content:center;margin-top:8px}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;max-height:55vh;overflow:auto;margin:8px 0;touch-action:pan-y}
#grid button{padding:10px 4px;font-size:14px}
.credit{font-size:11px;opacity:.6;margin:14px 0 0}.credit a{color:#9cf}
[hidden]{display:none!important}
body:not(.portrait) #bar{width:100px;flex-wrap:wrap;justify-content:flex-end}
body.touch #menu div{padding:8px 16px}