/* Fixed, viewport-relative control centers; the hit areas move with the artwork. */
body[data-device="mobile"][data-custom-controls] #touch{inset:0!important;width:100%!important;height:100%!important;transform:none!important;pointer-events:none}
body[data-device="mobile"][data-custom-controls] #touch .touch-actions{display:contents!important;transform:none!important}
body[data-device="mobile"][data-custom-controls] #touch .joystick-zone,body[data-device="mobile"][data-custom-controls] #touch .touch-action,.control-proxy{position:fixed!important;left:var(--control-x)!important;top:var(--control-y)!important;right:auto!important;bottom:auto!important;width:var(--control-size)!important;height:var(--control-size)!important;transform:translate(-50%,-50%)!important;opacity:var(--control-opacity)!important;margin:0!important;touch-action:none;box-sizing:border-box}
body[data-device="mobile"][data-custom-controls] #touch .joystick-ring{position:absolute;inset:0;width:100%!important;height:100%!important;margin:0}
body[data-device="mobile"][data-custom-controls] #touch .joystick-stick{width:48%!important;height:48%!important}
body[data-device="mobile"][data-custom-controls] #touch .joystick-zone>span{display:none}
#control-settings button{margin:4px 8px 4px 0;min-height:44px}
#control-editor[hidden]{display:none!important}
#control-editor{position:fixed;inset:0;z-index:14000;background:rgba(8,15,20,.88);color:#f9efd5;touch-action:none;overscroll-behavior:contain;font-family:system-ui,sans-serif}
#control-editor-bar{position:absolute;z-index:3;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;align-items:center;gap:8px;pointer-events:none}
#control-editor-bar>*{pointer-events:auto}#control-editor-title{margin-right:auto;font-size:18px}#control-editor button{min-height:44px;color:#fff3cf;background:#283739;border:1px solid #b39b64;border-radius:10px;padding:7px 12px;font:inherit;cursor:pointer}
#control-save{background:#715021!important}#control-editor button:focus-visible,#control-editor input:focus-visible,#control-editor select:focus-visible{outline:3px solid #72deff;outline-offset:3px}
#control-inspector{position:absolute;z-index:2;top:calc(65px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(310px,85vw);padding:10px 14px;background:#152729ed;border:1px solid #7e8068;border-radius:12px;box-sizing:border-box;font-size:14px}
#control-inspector select{width:100%;font:inherit;color:#fff;background:#233739;border:1px solid #79867a;border-radius:6px;height:34px}
#control-inspector label{display:flex;align-items:center;gap:6px;margin-top:5px;white-space:nowrap}#control-inspector input{width:100%;min-width:30px;accent-color:#e8c579;height:28px}#control-inspector output{min-width:36px;font-variant-numeric:tabular-nums}
#control-editor-status{position:absolute;z-index:2;top:calc(188px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;pointer-events:none;color:#ddd7bd}
#control-editor .control-proxy{border-radius:50%;font-size:24px;border:2px solid #d3bd7c;background:radial-gradient(circle,#425353,#172326);padding:0;user-select:none;min-height:0;z-index:1}#control-editor .control-proxy.selected{outline:3px solid #73e5dc;outline-offset:4px}#control-proxy-joystick{border:9px double #b2ba9e!important}
#control-key-list{position:absolute;top:70px;bottom:55px;left:50%;transform:translateX(-50%);width:min(600px,90vw);overflow:auto;touch-action:pan-y;display:grid;grid-template-columns:1fr 1fr;gap:8px 22px;align-content:start}#control-key-list[hidden],#control-inspector[hidden],.control-proxy[hidden]{display:none!important}#control-key-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px}#control-key-list button{min-width:92px}
#control-editor:has(#control-inspector[hidden]) #control-editor-status{top:auto;bottom:10px}
@media(max-width:550px){#control-key-list{grid-template-columns:1fr}#control-editor-bar{gap:5px}#control-editor-bar button{padding:6px 9px}}
@media(max-height:480px) and (orientation:landscape){#control-inspector{top:60px;width:285px;padding:6px 10px}#control-editor-status{top:178px}}
