/* Configurable mobile control HUD and editor. */
#mobileControls{
  position:relative;overflow:visible;z-index:4;
  --ctl-border-alpha:.18;--ctl-bg-alpha:.07;--ctl-text-alpha:1;
  --ctl-inner-alpha:.10;--ctl-shadow-alpha:.24;--ctl-hint-alpha:.72;
  --ctl-small-opacity:.84;--ctl-action-alpha:.13;--ctl-morph-alpha:.12;--ctl-active-alpha:.18
}
#mobileControls .padGroup{position:absolute;top:50%;height:auto;margin:0;transform-origin:center center;will-change:left,top,transform}
#mobileControls .padGroup.move{left:9%;transform:translate(-50%,-50%)}
#mobileControls .padGroup.center{left:50%;transform:translate(-50%,-50%)}
#mobileControls .padGroup.action{left:91%;transform:translate(-50%,-50%)}
#mobileControls .ctlBtn{
  border-color:rgba(210,225,255,var(--ctl-border-alpha));
  background:rgba(255,255,255,var(--ctl-bg-alpha));
  color:rgba(238,243,255,var(--ctl-text-alpha));
  box-shadow:inset 0 1px 0 rgba(255,255,255,var(--ctl-inner-alpha)),0 6px 18px rgba(0,0,0,var(--ctl-shadow-alpha))
}
#mobileControls .ctlBtn.small{opacity:var(--ctl-small-opacity)}
#mobileControls .ctlBtn.action{background:rgba(255,209,102,var(--ctl-action-alpha))}
#mobileControls .ctlBtn.morph{background:rgba(142,231,201,var(--ctl-morph-alpha))}
#mobileControls .ctlBtn:active,#mobileControls .ctlBtn.down{background:rgba(255,255,255,var(--ctl-active-alpha))}
#mobileControls .ctlHint{color:rgba(210,220,255,var(--ctl-hint-alpha))}
.mobileControlSettingOnly{display:none!important}

#mobileControlsEditor{
  display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  box-sizing:border-box;background:radial-gradient(circle at 50% 20%,rgba(38,51,95,.98),rgba(8,10,22,.99) 68%);
  color:#f2eddc;font-family:"Segoe UI",system-ui,sans-serif;touch-action:none
}
html.mobile-controls-editor-open #mobileControlsEditor{display:flex}
html.mobile-controls-editor-open #gameMenuLayer{visibility:hidden!important;pointer-events:none!important}
html.mobile-controls-editor-open #mobileControls{visibility:hidden!important;pointer-events:none!important}
.mobileControlsEditorCard{
  width:min(860px,calc(100vw - 24px));max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain;
  padding:16px;border:1px solid rgba(255,255,255,.16);border-radius:22px;
  background:linear-gradient(180deg,rgba(17,22,47,.98),rgba(8,11,28,.99));
  box-shadow:0 24px 80px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.08)
}
.mobileControlsEditorHeader{text-align:center;margin-bottom:7px}
.mobileControlsEditorHeader p{margin:0 0 3px;font:800 9px/1.2 "Segoe UI",system-ui,sans-serif;letter-spacing:.14em;color:rgba(171,187,241,.86)}
.mobileControlsEditorHeader h2{margin:0;font:900 23px/1.1 "Segoe UI",system-ui,sans-serif;color:#ffd166}
.mobileControlsEditorLead,.mobileControlsDragHint{margin:7px auto;text-align:center;color:rgba(225,232,255,.86);font:650 11px/1.35 "Segoe UI",system-ui,sans-serif}
.mobileControlsDragHint{color:rgba(185,199,240,.74);font-size:9px}
#mobileControlsPreview{
  position:relative;width:100%;height:132px;margin:10px 0 5px;border:1px solid rgba(210,225,255,.15);border-radius:17px;
  background:linear-gradient(180deg,rgba(15,21,43,.92),rgba(8,11,28,.97));overflow:hidden;touch-action:none;
  --preview-bar-height:72px;
  --ctl-border-alpha:.18;--ctl-bg-alpha:.07;--ctl-text-alpha:1;
  --ctl-inner-alpha:.10;--ctl-shadow-alpha:.24;--ctl-hint-alpha:.72;
  --ctl-small-opacity:.84;--ctl-action-alpha:.13;--ctl-morph-alpha:.12;--ctl-active-alpha:.18
}
#mobileControlsPreview::before{
  content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:var(--preview-bar-height);
  border-top:1px solid rgba(255,209,102,.22);
  background:linear-gradient(180deg,rgba(19,25,50,.88),rgba(10,13,30,.96));
  box-shadow:0 -10px 28px rgba(0,0,0,.18)
}
.controlPreviewGroup{position:absolute;z-index:2;top:50%;display:flex;align-items:center;gap:10px;transform-origin:center center;transform:translate(-50%,-50%);cursor:grab;touch-action:none}
.controlPreviewGroup:active{cursor:grabbing}
.controlPreviewGroup.move{left:9%}.controlPreviewGroup.center{left:50%;gap:6px;cursor:default}.controlPreviewGroup.action{left:91%}
.controlPreviewGroup[data-edit-group]::after{
  content:"HÚZD";position:absolute;left:50%;top:-19px;transform:translateX(-50%);padding:2px 7px;border-radius:999px;
  background:rgba(255,209,102,.92);color:#1b1320;font:900 7px/1.2 "Segoe UI",system-ui,sans-serif;letter-spacing:.08em;pointer-events:none
}
.controlPreviewGroup[data-edit-group]:focus-visible{outline:2px solid #ffd166;outline-offset:8px;border-radius:12px}
.controlPreviewButton{
  min-width:58px;height:58px;border:1px solid rgba(210,225,255,var(--ctl-border-alpha));border-radius:16px;
  background:rgba(255,255,255,var(--ctl-bg-alpha));color:rgba(238,243,255,var(--ctl-text-alpha));
  display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 19px/1 "Segoe UI",system-ui,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,var(--ctl-inner-alpha)),0 6px 18px rgba(0,0,0,var(--ctl-shadow-alpha))
}
.controlPreviewButton small{display:block;margin-top:3px;font:700 7px/1 "Segoe UI",system-ui,sans-serif;color:rgba(210,220,255,var(--ctl-hint-alpha))}
.controlPreviewButton.small{min-width:34px;width:34px;height:34px;border-radius:10px;font-size:14px;opacity:var(--ctl-small-opacity)}
.controlPreviewButton.action{min-width:66px;height:66px;border-radius:18px;font-size:17px;background:rgba(255,209,102,var(--ctl-action-alpha))}
.controlPreviewButton.morph{background:rgba(142,231,201,var(--ctl-morph-alpha))}
.mobileControlsSizeGrid{display:grid;grid-template-columns:minmax(140px,.7fr) minmax(180px,1.3fr);gap:8px 12px;align-items:center;margin:8px 0 11px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04)}
.mobileControlsSizeGrid label{display:flex;justify-content:space-between;gap:10px;font:800 11px/1.2 "Segoe UI",system-ui,sans-serif;color:#f2eddc}
.mobileControlsSizeGrid output{color:#ffd166}
.mobileControlsSizeGrid input[type="range"]{width:100%;height:24px;margin:0;accent-color:#ffd166;touch-action:pan-x}
.mobileControlsEditorActions{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px}
.mobileControlsEditorActions button{min-height:42px;border:1px solid rgba(210,225,255,.18);border-radius:13px;background:rgba(255,255,255,.07);color:#eef3ff;font:900 10px/1.1 "Segoe UI",system-ui,sans-serif;letter-spacing:.03em;touch-action:manipulation}
.mobileControlsEditorActions button.primary{border-color:rgba(255,209,102,.58);background:linear-gradient(180deg,#ffd166,#dda23b);color:#1b1320;font-size:12px}
.mobileControlsEditorActions button:active{transform:translateY(1px)}
.mobileControlsEditorActions button:focus-visible{outline:3px solid #ffd166;outline-offset:2px}

@media (pointer:coarse),(max-width:920px){
  .mobileControlSettingOnly{display:flex!important}
}
@media (max-height:520px) and (orientation:landscape){
  .mobileControlsEditorCard{width:min(900px,calc(100vw - 16px));max-height:calc(100dvh - 12px);padding:10px 12px;border-radius:17px}
  .mobileControlsEditorHeader{margin-bottom:3px}.mobileControlsEditorHeader h2{font-size:18px}.mobileControlsEditorLead{margin:4px auto;font-size:9px}
  #mobileControlsPreview{height:100px;margin:6px 0 3px;border-radius:13px}
  .controlPreviewButton{min-width:50px;height:50px;border-radius:14px;font-size:17px}.controlPreviewButton.action{min-width:58px;height:58px;font-size:15px}
  .controlPreviewButton.small{min-width:29px;width:29px;height:29px;font-size:12px}.controlPreviewGroup[data-edit-group]::after{top:-14px;font-size:6px}
  .mobileControlsDragHint{display:none}.mobileControlsSizeGrid{grid-template-columns:135px 1fr 135px 1fr;gap:5px 9px;margin:5px 0 7px;padding:6px 9px}
  .mobileControlsSizeGrid label{font-size:9px}.mobileControlsSizeGrid input[type="range"]{height:18px}
  .mobileControlsSizeGrid .visibilityLabel{grid-column:1}.mobileControlsSizeGrid .visibilityRange{grid-column:2/-1}
  .mobileControlsEditorActions button{min-height:34px;font-size:9px}.mobileControlsEditorActions button.primary{font-size:10px}
}