body.touch-enabled #touch-controls[data-custom-layout=true] .touch-actions {display:contents!important;}
body.touch-enabled #touch-controls[data-custom-layout=true] :is(.touch-stick,.touch-actions button) {position:fixed!important;left:var(--control-left)!important;top:var(--control-top)!important;width:var(--control-size)!important;height:var(--control-size)!important;min-height:0!important;margin:0!important;box-sizing:border-box;}
body.touch-enabled #touch-controls[data-custom-layout=true] .touch-knob {left:50%;top:50%;translate:-50% -50%;}
.touch-dpad-arrows {display:none;position:absolute;inset:0;grid-template:repeat(3,1fr)/repeat(3,1fr);pointer-events:none;}
.touch-dpad-arrows b {display:grid;place-items:center;font:22px system-ui;border-radius:4px;}
.touch-dpad-up{grid-area:1/2}.touch-dpad-left{grid-area:2/1}.touch-dpad-right{grid-area:2/3}.touch-dpad-down{grid-area:3/2}
body.touch-enabled #touch-controls[data-stick-type=dpad] .touch-stick {border-radius:12px;clip-path:polygon(30% 0,70% 0,70% 30%,100% 30%,100% 70%,70% 70%,70% 100%,30% 100%,30% 70%,0 70%,0 30%,30% 30%);background:#254f43;border:0;}
#touch-controls[data-stick-type=dpad] :is(.touch-knob,.touch-cross) {display:none;}
#touch-controls[data-stick-type=dpad] .touch-dpad-arrows {display:grid;}
.touch-stick[data-direction=up] .touch-dpad-up,.touch-stick[data-direction=left] .touch-dpad-left,.touch-stick[data-direction=right] .touch-dpad-right,.touch-stick[data-direction=down] .touch-dpad-down {background:#bfd899;color:#173e2c;}
#control-editor {width:min(580px,calc(100vw - 20px));padding:16px;}
#control-editor>p {font:13px/1.4 system-ui;margin:6px 0 12px;}
#control-editor .control-editor-options {display:flex;gap:6px;border:1px solid #81957866;border-radius:6px;margin:8px 0;padding:6px;}
#control-editor legend {font-size:12px;color:#d3ddb9;}
#control-editor button {border-radius:6px;cursor:pointer;}
#control-editor button[aria-pressed=true] {background:#c4dba5;color:#173c2b;border-color:#e6cc82;}
#control-editor .control-layout-preview {position:relative;margin-inline:auto;border:0;outline:1px solid #aec58d;border-radius:8px;overflow:hidden;touch-action:none;box-sizing:border-box;}
#control-editor .control-layout-stage {position:absolute;left:0;top:0;transform-origin:top left;background:linear-gradient(#102f2970,#061d2080),url('/assets/ui/character-forest-v2.jpg') center/cover;}
#control-editor .control-layout-preview button {position:absolute;display:grid;place-items:center;box-sizing:border-box;text-align:center;margin:0;padding:2px;min-height:0;font:700 11px system-ui;touch-action:none;user-select:none;cursor:grab;}
#control-editor .control-layout-preview [data-control=stick] {border-radius:50%!important;font-size:48px;background:radial-gradient(circle,#acd894 27%,#336553 29%,#1a3c32);}
#control-editor .control-layout-preview[data-stick-type=dpad] [data-control=stick] {border-radius:8px;background:#315c48;clip-path:polygon(30% 0,70% 0,70% 30%,100% 30%,100% 70%,70% 70%,70% 100%,30% 100%,30% 70%,0 70%,0 30%,30% 30%);}
#control-editor .control-editor-footer {display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
#control-editor .control-editor-footer button {flex:1;min-width:100px;font-size:12px;}
#control-editor [data-command=save] {background:#416c43;border-color:#d9c985;}
#control-editor button:focus-visible {outline:2px solid #f8d585;outline-offset:2px;}
@media (orientation:landscape) and (max-height:600px) {
  #control-editor[open] {display:grid;grid-template-columns:220px minmax(0,1fr);gap:4px 12px;width:min(960px,calc(100vw - 20px));max-height:calc(100dvh - 16px);padding:12px;box-sizing:border-box;}
  #control-editor h2 {grid-area:1/1;margin:0;font-size:16px;}
  #control-editor>p:first-of-type {grid-area:2/1;font-size:11px;margin:0;}
  #control-editor .control-editor-options {grid-column:1;margin:0;padding:4px;}
  #control-editor .control-editor-options button {min-height:34px;padding:4px;font-size:11px;}
  #control-editor .control-layout-preview {grid-column:2;grid-row:1/5;align-self:center;}
  #control-editor .control-editor-feedback {grid-column:1/-1;margin:2px 0;font-size:11px;}
  #control-editor .control-editor-footer {grid-column:1/-1;margin:0;}
  #control-editor .control-editor-footer button {min-height:36px;padding:6px;}
}