/* Game surfaces own gestures. Menus and editable fields retain scrolling,
   text editing and accessible pinch zoom; do not disable viewport scaling. */
.touch-game-surface,.touch-game-surface *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
.touch-game-surface :is(button,.stick,.combat-touch-aim),#arena.touch-game-surface canvas{touch-action:none}
.touch-game-surface :is(input,textarea,[contenteditable=true]){user-select:text;-webkit-user-select:text;touch-action:manipulation}
.touch-game-surface select{touch-action:manipulation}
.touch-extra-panel{touch-action:pan-y}
.touch-extra-panel button{touch-action:manipulation}
button,summary,[role=button]{touch-action:manipulation}
:is(#hud,#matchHUD)[data-touch=true] .touch-layout-custom{position:fixed!important;inset:auto!important;left:var(--touch-layout-left)!important;top:var(--touch-layout-top)!important;width:var(--touch-layout-width)!important;height:var(--touch-layout-height)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;margin:0!important;transform:none!important;flex:none!important;pointer-events:auto}
.touch-layout-settings{padding:0 0 16px;margin:16px 0;border-bottom:1px solid #91a6ad44}
.touch-layout-settings h3{font:600 16px/1.4 system-ui}.touch-layout-settings p{font:12px/1.5 system-ui;color:#b2c5c6}.touch-layout-settings button{min-height:44px}
.touch-layout-status:empty{display:none}
.touch-layout-safe{position:fixed;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
dialog.touch-layout-editor{position:fixed;inset:0;margin:0;padding:0;border:0;border-radius:0;max-width:none;max-height:none;width:100%;height:100dvh;overflow:hidden;background:#0c1723;color:#eaf4fa;overscroll-behavior:none;font-family:system-ui,sans-serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-layout-editor::backdrop{background:#091018a6}
.touch-layout-field{position:absolute;inset:14% 10%;border:1px solid #a0c6dd24;border-radius:24px;background:linear-gradient(90deg,#b054421a 0 32%,transparent 32% 68%,#499cca1a 68%),repeating-linear-gradient(0deg,transparent 0 47px,#a0c6dd08 47px 48px);display:grid;place-items:center;pointer-events:none}
.touch-layout-field span{font-size:clamp(20px,4vw,48px);font-weight:800;letter-spacing:.16em;color:#a0c6dd18}
.touch-layout-items{position:absolute;inset:0;touch-action:none}
.touch-layout-toolbar{position:relative;z-index:2;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));background:#102231;border-bottom:1px solid #9abed239;display:block;height:auto;box-shadow:0 4px 18px #0002}
.touch-layout-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.touch-layout-heading h2{font:650 18px/1.4 system-ui;margin:0}.touch-layout-profile{font:12px/1.4 system-ui;color:#acd9ed}
.touch-layout-instructions{font:12px/1.5 system-ui;margin:3px 0 8px;color:#b4c7d4}
.touch-layout-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.touch-layout-tools>select{width:130px;min-width:0;max-width:42vw}
.touch-layout-tools :is(button,select){font:500 12px/1.25 system-ui;min-height:44px;border:1px solid #85a7bb66;border-radius:9px;padding:8px 10px;background:#203648;color:#f3f7fa}
.touch-layout-tools [data-layout=save]{background:#bce3d5;color:#102920;border-color:#bce3d5;font-weight:700}
.touch-layout-size{display:flex;align-items:center;gap:7px;font:12px system-ui;flex:1;min-width:175px;max-width:330px}.touch-layout-size span{margin:0;color:#d1dfe7;font:inherit;white-space:nowrap}.touch-layout-size input{width:100%;min-width:60px;height:44px;touch-action:pan-y}.touch-layout-size output{min-width:36px;font-variant-numeric:tabular-nums}
.touch-layout-online{font:11px/1.4 system-ui;color:#e9cd9b;margin:5px 0 0}
.touch-layout-preview{position:absolute;left:var(--touch-layout-left);top:var(--touch-layout-top);width:var(--touch-layout-width);height:var(--touch-layout-height);min-width:0;min-height:0;border-radius:50%;border:1px solid #aecfdf88;background:#284354af;color:#eaf6fb;padding:3px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;transform:none!important;transition:none}
.touch-layout-preview b{font:600 24px/1 system-ui;pointer-events:none}.touch-layout-preview span{font:500 10px/1.15 system-ui;max-width:100%;overflow-wrap:anywhere;pointer-events:none}.touch-layout-preview[aria-pressed=true]{border:2px solid #c7eadb;background:#335e60d9;box-shadow:0 0 0 4px #aed9ce26;z-index:1}.touch-layout-preview[data-key=fire]{background:#985b39bd}
.touch-layout-collapse{margin-left:auto;min-height:36px;padding:6px 10px;font:12px system-ui;border:1px solid #85a7bb66;border-radius:8px;background:#203648;color:#eaf4fa}.touch-layout-compact .touch-layout-toolbar{width:max-content;max-width:70%;margin-inline:auto;border-radius:0 0 12px 12px}.touch-layout-compact :is(.touch-layout-tools,.touch-layout-instructions,.touch-layout-online,.touch-layout-heading h2){display:none}.touch-layout-compact .touch-layout-heading{gap:8px}.touch-layout-compact .touch-layout-collapse{margin:0}
:is(#hud,#matchHUD) .stick.touch-layout-custom .stick-knob{width:40%;height:40%}
@media(max-width:600px){.touch-layout-tools{gap:6px}.touch-layout-tools>select{width:110px}.touch-layout-tools [data-layout=reset]{margin-right:auto}.touch-layout-heading h2{font-size:16px}}
@media(max-height:500px){.touch-layout-toolbar{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:6px}.touch-layout-instructions{display:none}.touch-layout-heading{margin-bottom:4px}.touch-layout-online{margin:2px 0 0}}