.control-safe-probe { position: absolute; inset: 0 auto auto 0; width: 0; height: 0; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); visibility: hidden; pointer-events: none; }
#mobile-controls.has-custom-layout { position: absolute; inset: 0; width: auto; height: auto; pointer-events: none; }
#mobile-controls.has-custom-layout .mobile-actions { display: contents; }
#mobile-controls .custom-control { position: absolute !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; min-height: var(--control-size) !important; flex-basis: var(--control-size) !important; transform: translate(-50%, -50%); gap: 2px; }
#mobile-controls .custom-control > svg { width: calc(var(--control-size) * .35); height: calc(var(--control-size) * .35); }
#mobile-controls #touch-attack.custom-control > svg { width: calc(var(--control-size) * .44); height: calc(var(--control-size) * .44); }
#mobile-controls .custom-control > span { font-size: clamp(11px, calc(var(--control-size) * .15), 25px); }
#mobile-controls #joystick.custom-control > span { width: calc(var(--control-size) * .42); height: calc(var(--control-size) * .42); left: calc(var(--control-size) * .29 - 1px); top: calc(var(--control-size) * .29 - 1px); }
.game-card.control-layout-editing { z-index: 60 !important; }
.menu-screen .game-section:has(.control-layout-editing) { z-index: 80; }
.control-layout-editing #mobile-controls { visibility: hidden; }
.control-layout-editor { position: absolute; inset: 0; z-index: 95; overflow: hidden; background: #122c348a; color: #173d34; touch-action: none; cursor: auto !important; }
.control-layout-editor * { cursor: auto !important; }
.control-layout-panel { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 2; display: grid; grid-template-columns: 1fr minmax(160px, 260px) auto; align-items: center; gap: 20px; padding: 16px 20px; background: #f5edd8; border: 2px solid #214c40; border-top: 4px solid #d8aa56; border-radius: 4px; }
.control-layout-heading strong { font-size: 20px; font-weight: 850; }
.control-layout-heading > span { margin-left: 9px; font-size: 12px; color: #61705b; }
.control-layout-heading p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #5d6a58; }
.control-layout-sizing { display: grid; grid-template-columns: 1fr 48px; gap: 4px 8px; align-items: center; }
.control-layout-sizing label { grid-column: 1; font-size: 13px; font-weight: 750; }
.control-layout-sizing input { grid-column: 1; grid-row: 2; width: 100%; min-width: 0; height: 28px; margin: 0; accent-color: #285749; touch-action: none; cursor: ew-resize !important; }
.control-layout-sizing output { grid-column: 2; grid-row: 2; font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.control-layout-actions { display: flex; gap: 7px; }
.control-layout-actions button { min-height: 44px; padding: 8px 14px; border: 1px solid #9cae96; border-radius: 3px; background: #fffaf0; color: #214c40; font-family: inherit; font-size: 13px; line-height: 1.3; font-weight: 750; white-space: nowrap; cursor: pointer !important; }
.control-layout-actions [data-layout-save] { background: #254f41; color: #fff3d8; border-color: #254f41; }
.control-layout-field { position: absolute; inset: 0; pointer-events: none; }
.control-layout-handle { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; left: var(--control-x); top: var(--control-y); transform: translate(-50%, -50%); width: var(--control-size); height: var(--control-size); min-height: 44px; padding: 0; border: 3px solid #fff0cb; border-radius: 50%; color: #37291e; background: #ed8b4d; box-shadow: 0 0 0 2px #17382c; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab !important; }
.control-layout-handle > svg { width: calc(var(--control-size) * .35); height: calc(var(--control-size) * .35); flex-shrink: 0; }
.control-layout-handle.layout-attack > svg { width: calc(var(--control-size) * .44); height: calc(var(--control-size) * .44); }
.control-layout-handle > span { font-size: clamp(11px, calc(var(--control-size) * .15), 25px); font-weight: 800; }
.control-layout-handle.layout-dash { background: #87b9b3; color: #263c3c; }
.control-layout-handle.layout-joystick { background: #f5edce66; border-color: #fff9e4; color: #fff8df; }
.control-layout-handle .layout-stick-knob { width: 42%; height: 42%; border-radius: 50%; background: #fff8df99; border: 1px solid #f9f4e3; }
.control-layout-handle.layout-joystick b { position: absolute; bottom: 10%; font-size: 11px; }
.control-layout-handle.is-selected { outline: 3px dashed #fff4cb; outline-offset: 7px; }
.control-layout-editor :focus-visible { outline: 3px solid #f2b852; outline-offset: 4px; }
@media (max-width: 1000px), (max-height: 520px) {
  .control-layout-panel { padding: 10px 12px; gap: 12px; grid-template-columns: 1fr minmax(130px, 210px) auto; }
  .control-layout-heading strong { font-size: 16px; }
  .control-layout-heading p { font-size: 11px; max-width: 210px; }
  .control-layout-actions { gap: 5px; }
  .control-layout-actions button { padding: 6px 9px; font-size: 12px; }
}
@media (max-width: 650px) {
  .control-layout-panel { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .control-layout-heading p { display: none; }
  .control-layout-sizing { grid-column: 1; grid-row: 2; }
  .control-layout-actions { grid-column: 2; grid-row: 1 / 3; justify-content: flex-end; }
}