/* Shared safe-area values keep the editor and runtime using the same projection. */
.touch-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.touch-preset-card{min-width:0;min-height:44px;padding:8px!important;text-align:left;border:1px solid #aabf9166!important;border-radius:7px;background:#17271d!important;color:#eeeadb!important}.touch-preset-card:hover,.touch-preset-card:focus-visible{border-color:#eacc75!important}.touch-preset-card svg{display:block;width:100%;background:#101b17;border-radius:4px;margin-bottom:6px;max-height:100px}.touch-preset-card strong,.touch-preset-card small{display:block;white-space:normal}.touch-preset-card strong{font-size:12px}.touch-preset-card small{font-size:10px;color:#bdceb0}.touch-preset-card circle{fill:#9bac8055;stroke:#d5ddb1;stroke-width:3}.touch-preset-card .preset-fire{fill:#d6b66488}.touch-preset-card text{fill:#fff;font:22px system-ui;text-anchor:middle}.touch-presets>.settings-note{font-size:11px}
#touch-controls,#touch-layout-editor{--layout-safe-left:env(safe-area-inset-left,0px);--layout-safe-right:env(safe-area-inset-right,0px);--layout-safe-top:env(safe-area-inset-top,0px);--layout-safe-bottom:env(safe-area-inset-bottom,0px)}
#touch-controls.custom-touch-layout .look-pad{left:0;right:0;top:72px;bottom:0}
#touch-controls.custom-touch-layout [data-custom-control]{position:absolute!important;z-index:2;border-radius:50%;touch-action:none}
#touch-controls.custom-touch-layout .move-pad{z-index:1;pointer-events:auto}
#touch-controls.custom-touch-layout .move-stick{width:100%;height:100%;left:0;top:0;bottom:auto;opacity:1}
#touch-controls.custom-touch-layout [data-touch-extra]{display:block;border:1px solid #ddd8b388;background:#17271d99;color:#f6f4df;font-size:11px}
#touch-controls.custom-touch-layout [data-custom-control].held{opacity:1!important}
#touch-controls.custom-touch-layout .touch-fire-left:not([hidden]){display:block}
.settings-tabs{grid-template-columns:repeat(3,1fr)}#touch-layout-open{width:100%;min-height:48px;font-size:14px;margin:12px 0}#settings-touch-layout .touch-advice{font-size:12px}
#touch-layout-editor{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#17221eee;color:#eeeadb;overflow:hidden;font:13px/1.35 system-ui;overscroll-behavior:none}
#touch-layout-editor::backdrop{background:#000c}.layout-surface{position:absolute;inset:0;touch-action:none;background:linear-gradient(#a9baa411 1px,transparent 1px),linear-gradient(90deg,#a9baa411 1px,transparent 1px);background-size:5% 5%}
.layout-toolbar{position:absolute;z-index:4;top:max(4px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));display:flex;gap:6px;align-items:center;pointer-events:auto}.layout-toolbar strong{margin-right:auto;font-size:12px;line-height:1.2}.layout-toolbar small{display:block;font-size:9px;color:#bbccb5}
#touch-layout-editor button{min-height:44px;min-width:44px;background:#263b2c;color:#eee9d9;border:1px solid #aabf9166;border-radius:5px;font-size:10px;padding:7px;touch-action:manipulation}
#touch-layout-editor #layout-save{background:#dcc58d;color:#192119}.layout-tools{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));z-index:3;width:min(340px,calc(100% - 16px));max-height:calc(100% - 72px);overflow:auto;padding:12px;background:#111e16f5;border:1px solid #bccc9c66;border-radius:8px;overscroll-behavior:contain}
.layout-tools label{display:flex;align-items:center;gap:6px;font-size:10px;min-height:42px;min-width:0}.layout-tools>label{justify-content:space-between}.layout-tools output{width:44px;text-align:right}.layout-tools input[type=range]{flex:1;min-width:50px;width:auto}.layout-row{display:flex;gap:6px;margin:4px 0;align-items:center}.layout-row>label{flex:1}.layout-tools select{width:100%;max-width:100%;min-width:0;height:44px;font-size:11px}.layout-position input[type=number]{width:52px;min-width:0;height:36px;padding:3px;font-size:12px}.layout-position input[type=checkbox]{width:20px;height:20px}.layout-position label{flex:1;flex-wrap:wrap}.layout-help,#layout-feedback{font-size:10px;color:#bdceb0;margin:7px 0 0}
#touch-layout-editor .layout-control{position:absolute;z-index:1;touch-action:none;border-radius:50%;padding:3px;background:#60785a88;border:2px solid #d5ddb1;color:white;font-size:11px;overflow:hidden;user-select:none}
#touch-layout-editor .layout-control[aria-pressed=true]{outline:3px solid #eacc75;outline-offset:2px;background:#5d693eaa}
#touch-layout-editor .layout-stick{border-width:3px;background:radial-gradient(circle,#dae3c777 25%,#5a735533 28%);font-size:12px;align-content:end;padding-bottom:12px}
@media(max-width:370px){.layout-toolbar{gap:3px}.layout-toolbar strong{font-size:10px}.layout-toolbar button{padding:5px}.layout-tools{padding:8px}}