.controls-dialog{width:min(900px,calc(100vw - 24px));max-height:calc(100dvh - 20px);padding:0;border:1px solid #49515e;border-radius:18px;background:#252b34;color:#e9edf2;box-shadow:0 22px 90px #0009}.controls-dialog::backdrop{background:#070b12c9}.controls-header,.controls-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:#20262e}.controls-header h2{font-size:22px;margin:0}.controls-header button{width:38px;height:38px}.controls-body{padding:16px 22px;overflow:auto;max-height:calc(100dvh - 170px)}.control-tabs,.control-selector,.control-joy-mode{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.control-tabs button,.control-selector button,.control-joy-mode button{padding:9px 15px;background:#303844;border:1px solid #4a5564;border-radius:9px;color:#c4cfdb}.control-tabs .active,.control-selector .active,.control-joy-mode .active{color:#f2df9f;background:#494330;border-color:#a3935c}.control-help{font-size:12px;color:#aab6c5;line-height:1.6;display:block;margin:12px 0}.control-preview{position:relative;width:100%;aspect-ratio:16/9;background:radial-gradient(ellipse,#34414e,#171e28);border:1px solid #56616d;border-radius:12px;overflow:hidden;touch-action:none}.preview-score{position:absolute;left:50%;top:6%;transform:translateX(-50%);color:#cfb97b;font-size:21px}.preview-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#71808f;font-size:12px}.control-node{position:absolute;transform:translate(-50%,-50%);border-radius:50%;padding:0;min-width:0;background:#354953e8;color:#edf4fa;border:2px solid #8baab7;touch-action:none;user-select:none;font-size:clamp(10px,2vw,18px)}.control-node.selected{border-color:#f2d587;box-shadow:0 0 0 3px #d2b96a42}.control-node.joy-node{background:#9bb9c12a}.control-selector{margin-top:13px}.control-selector button{flex:1;padding:8px 5px;font-size:12px}.control-size{display:grid;grid-template-columns:1fr auto;gap:10px;margin:16px 0;font-size:14px}.control-size input{grid-column:1/-1;width:100%;height:32px;accent-color:#dbc47d}.control-size output{color:#e5d393}.control-joy-mode{font-size:13px}.control-key-list{display:grid;gap:12px;margin:22px 0}.control-key-list>div{display:grid;grid-template-columns:90px 1fr 90px;gap:12px;align-items:center}.control-key-list button{padding:14px;background:#303947;border:1px solid #536171;color:#e6edf4;border-radius:9px}.control-key-list .listening{border-color:#e1cb7e;color:#e1cb7e}.control-key-list .mouse-bind{font-size:12px}.controls-footer .primary{width:auto;min-width:140px}.controls-footer .control-reset{color:#f4b2ba;background:#4a2e37;border-color:#8f4d5e}.controls-footer>div{display:flex;gap:8px}#controlNotice{font-size:12px;color:#e2ba89;margin:10px 0 0}.lobby-footer .control-open{white-space:nowrap;padding:10px 18px}
#battle.touch-controls .custom-control{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;margin:0!important;z-index:5}#battle.touch-controls .custom-control .skill-face{width:100%;height:100%}#battle.touch-controls .custom-control>b{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;margin-top:3px;font-size:10px}#battle.touch-controls #dashButton.custom-control>b{position:static;transform:none;font-size:12px}#battle.touch-controls #joystick i{width:32%;height:32%;left:34%;top:34%}
@media(max-width:600px){.controls-header,.controls-footer{padding:12px 14px}.controls-body{padding:12px 14px}.controls-header h2{font-size:19px}.control-preview{max-height:none}.lobby-footer .control-open{padding:8px;font-size:12px}.controls-footer .primary{min-width:90px}.control-key-list>div{grid-template-columns:58px 1fr 70px;gap:7px}.control-joy-mode button{padding:8px}.control-selector{gap:4px}}

.controls-dialog.layout-fullscreen{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;overflow:hidden;background:#1b2632}.layout-fullscreen>.controls-header,.layout-fullscreen>.controls-footer{display:none}.layout-fullscreen .controls-body{position:absolute;inset:0;padding:0;max-height:none;overflow:hidden}.layout-fullscreen .full-control-preview{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:radial-gradient(circle at 50% 50%,#43525e 0%,#283743 47%,#18232f 75%)}.full-control-preview:before{content:'';position:absolute;width:38vmin;height:38vmin;border:2px solid #8797a320;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}.full-control-preview .preview-score{top:75px}.full-control-preview .control-node{font-size:14px;box-shadow:0 3px 12px #0005}.full-control-preview .joy-node{font-size:32px}.full-control-preview .control-node.selected{border-color:#ffe1a2;box-shadow:0 0 0 4px #e2cb7a44,0 3px 12px #0005}.layout-toolbar{position:absolute;inset:max(10px,env(safe-area-inset-top)) 0 auto;height:45px;pointer-events:none;z-index:8}.layout-toolbar button{pointer-events:auto;min-height:42px;padding:10px 17px;background:#202a36ed;color:#d9e3ec;border:1px solid #637181;border-radius:10px}.layout-toolbar .layout-save{position:absolute;left:50%;transform:translateX(-50%);width:110px;background:#dfcc8e;color:#27291f;border-color:#eedc9d;font-size:16px;font-weight:800}.layout-exit{position:absolute;left:max(12px,env(safe-area-inset-left))}.layout-tools{position:absolute;right:max(12px,env(safe-area-inset-right));display:flex;gap:7px}.control-sidebar{position:absolute;top:70px;bottom:max(12px,env(safe-area-inset-bottom));width:min(280px,34vw);box-sizing:border-box;z-index:7;padding:16px;overflow:auto;overscroll-behavior:contain;background:#222d39f5;border:1px solid #66758480;border-radius:14px;box-shadow:0 8px 25px #0005;opacity:0;pointer-events:none;transition:transform .22s ease,opacity .18s ease}.control-sidebar[data-side=left]{left:max(12px,env(safe-area-inset-left));right:auto;transform:translateX(calc(-100% - 25px))}.control-sidebar[data-side=right]{right:max(12px,env(safe-area-inset-right));left:auto;transform:translateX(calc(100% + 25px))}.control-sidebar.open{transform:translateX(0);opacity:1;pointer-events:auto}.sidebar-title{display:flex;justify-content:space-between;align-items:center;gap:8px}.sidebar-title strong{font-size:16px}.sidebar-title button{width:32px;height:32px;padding:0}.control-sidebar .control-size{margin:14px 0;gap:5px}.control-sidebar .control-size input{height:34px;touch-action:pan-y}.control-sidebar .control-joy-mode{gap:6px}.control-sidebar .control-joy-mode>span{width:100%;color:#b6c2d0}.control-sidebar .control-joy-mode button{padding:9px;font-size:12px}.reset-selected{width:100%;margin-top:9px;background:#50333d;color:#f0b9c1;border:1px solid #875361;padding:10px}.layout-fullscreen #controlNotice{position:absolute;top:58px;left:50%;transform:translateX(-50%);background:#27323a;z-index:9}.layout-fullscreen #controlNotice:empty{display:none}@media(orientation:portrait){.control-sidebar{width:45vw;padding:12px}.layout-tools{gap:4px}.layout-toolbar button{padding:9px;font-size:12px}.layout-toolbar .layout-save{width:90px}.control-sidebar .control-size{font-size:12px}.sidebar-title strong{font-size:14px}}@media(prefers-reduced-motion:reduce){.control-sidebar{transition:none}}

html.control-editor-open body> :not(#controlSettings):not(script):not(style){visibility:hidden!important;pointer-events:none!important}html.control-editor-open #controlSettings{visibility:visible!important;z-index:2147483647}html.control-editor-open #controlSettings::backdrop{background:#18232f}#controlSettings.layout-fullscreen[open]{display:block;isolation:isolate}#controlSettings .layout-toolbar{visibility:visible;z-index:20}#controlSettings .control-sidebar{z-index:15}