/* Two-thumb HUD: a movement stick and a primary fire target with a reachable action arc. */
html.touch-device,.touch-device body{height:100%;height:100dvh;overscroll-behavior:none}
.touch-device #canvas{height:100dvh;touch-action:none}
#touch-controls{--control-size:1;--control-opacity:.7;--edge:max(18px,env(safe-area-inset-right));position:fixed;inset:0;z-index:4;pointer-events:none;color:white;font:13px Chalet,Arial,sans-serif;user-select:none;-webkit-user-select:none}
#touch-controls[hidden],#touch-controls [hidden]{display:none!important}
#touch-controls button,#touch-controls select{box-sizing:border-box;min-height:44px;touch-action:none;pointer-events:auto;color:#fff;background:#10182065;border:1px solid #ffffff88;font:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
#touch-controls button:focus-visible,#touch-controls select:focus-visible{outline:3px solid #a4d99b;outline-offset:3px}
#touch-controls button.pressed,#touch-controls button.latched,#touch-controls button[aria-pressed=true]{background:#8ac67be0;color:#0a1b0d;border-color:#cdf3c5}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.touch-look{position:absolute;inset:0;pointer-events:auto;touch-action:none}
.touch-toolbar{position:absolute;top:max(8px,env(safe-area-inset-top));right:var(--edge);display:flex;align-items:center;gap:6px;z-index:3;pointer-events:none}
.touch-toolbar label{pointer-events:auto}.touch-toolbar select{border-radius:22px;padding:0 12px;max-width:112px;background:#101820ad;font-size:13px!important}
.touch-toolbar option{background:#161d23;color:white}
.touch-toolbar button{width:44px;height:44px;border-radius:50%;font:25px Arial,sans-serif!important;background:#10182090!important}
.touch-stick{position:absolute;z-index:1;width:calc(128px * var(--control-size));height:calc(128px * var(--control-size));left:max(28px,env(safe-area-inset-left));bottom:max(44px,env(safe-area-inset-bottom));border:2px solid #ffffff80;border-radius:50%;background:#12182020;pointer-events:auto;touch-action:none;opacity:var(--control-opacity)}
.touch-stick-knob{position:absolute;left:30%;top:30%;width:40%;height:40%;box-sizing:border-box;border:1px solid #ffffffbb;border-radius:50%;background:#e8eef440}
.touch-stick.sprinting{border-color:#a8e898;box-shadow:0 0 0 5px #a8e89830}.touch-stick.sprinting .touch-stick-knob{background:#8ac67b99}
.touch-stick>span{position:absolute;bottom:-23px;width:160%;left:-30%;text-align:center;font-size:11px;text-shadow:0 1px 4px #000}
.touch-actions{position:absolute;inset:0;pointer-events:none;z-index:1}
.touch-actions button{position:absolute;right:var(--edge);bottom:max(22px,env(safe-area-inset-bottom));width:calc(52px * var(--control-size));height:calc(52px * var(--control-size));padding:4px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;opacity:var(--control-opacity);box-shadow:0 1px 8px #0003;text-shadow:0 1px 3px #0008}
.touch-actions button.pressed,.touch-actions button.latched{opacity:1;text-shadow:none}
.touch-icon{font:calc(23px * var(--control-size))/1 Arial,sans-serif;pointer-events:none}.touch-label{font-size:calc(10px * var(--control-size));line-height:1.1;pointer-events:none}
.touch-actions [data-slot=fire]{right:calc(var(--edge) + 5px);bottom:calc(32px + 22px * var(--control-size));width:calc(84px * var(--control-size));height:calc(84px * var(--control-size));border:2px solid #fff; background:#15211970}
.touch-actions [data-slot=fire] .touch-icon{font-size:calc(38px * var(--control-size))}.touch-actions [data-slot=fire] .touch-label{font-size:12px;letter-spacing:1px;text-transform:uppercase}
.touch-actions [data-slot=aim]{right:calc(var(--edge) + 109px * var(--control-size));bottom:calc(22px + 70px * var(--control-size))}
.touch-actions [data-slot=jump]{right:calc(var(--edge) + 10px * var(--control-size));bottom:calc(22px + 146px * var(--control-size))}
.touch-actions [data-slot=reload]{right:calc(var(--edge) + 111px * var(--control-size));bottom:22px}
.touch-actions [data-slot=enter]{right:calc(var(--edge) + 94px * var(--control-size));bottom:calc(22px + 150px * var(--control-size))}
.touch-actions [data-slot=weapons]{right:calc(var(--edge) + 184px * var(--control-size));bottom:calc(22px + 33px * var(--control-size))}
/* Driving: left thumb steers; right thumb chooses the large, separated pedals. */
.touch-actions [data-slot=gas]{right:var(--edge);bottom:22px;width:calc(70px * var(--control-size));height:calc(94px * var(--control-size));border-radius:22px;border-width:2px}
.touch-actions [data-slot=brake]{right:calc(var(--edge) + 84px * var(--control-size));bottom:22px;width:calc(64px * var(--control-size));height:calc(78px * var(--control-size));border-radius:20px}
.touch-actions [data-slot=handbrake],.touch-actions [data-slot=yaw-right]{right:var(--edge);bottom:calc(22px + 112px * var(--control-size))}
.touch-actions [data-slot=horn],.touch-actions [data-slot=yaw-left]{right:calc(var(--edge) + 170px * var(--control-size));bottom:22px}
.touch-actions [data-slot=drive-fire]{right:calc(var(--edge) + 170px * var(--control-size));bottom:calc(22px + 75px * var(--control-size))}
#touch-controls[data-mode=drive] [data-slot=enter],#touch-controls[data-mode=fly] [data-slot=enter]{right:calc(var(--edge) + 86px * var(--control-size));bottom:calc(22px + 100px * var(--control-size))}
/* Menus put confirmation and back closest to the thumb. */
.touch-actions [data-slot=select]{right:var(--edge);bottom:22px;width:70px;height:70px}
.touch-actions [data-slot=back]{right:calc(var(--edge) + 88px);bottom:22px}
.touch-actions [data-slot=previous]{right:calc(var(--edge) + 88px);bottom:108px}
.touch-actions [data-slot=next]{right:var(--edge);bottom:108px}
.touch-actions [data-slot=tab]{right:calc(var(--edge) + 166px);bottom:108px}
.touch-actions [data-slot=delete]{right:calc(var(--edge) + 166px);bottom:22px}
.touch-extra{position:absolute;z-index:5;pointer-events:auto;top:max(60px,env(safe-area-inset-top));right:var(--edge);width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;background:#10161bf5;border:1px solid #ffffff40;border-radius:16px;box-sizing:border-box;padding:16px;box-shadow:0 10px 40px #0008;touch-action:pan-y}
.touch-panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.touch-panel-heading strong{font-size:20px;letter-spacing:.3px}.touch-panel-heading button{border:0!important;border-radius:50%;width:44px;font-size:26px!important}
.touch-extra label{display:block;margin:14px 0;line-height:1.6}.touch-extra output{float:right;color:#a8e898;font-variant-numeric:tabular-nums}.touch-extra input[type=range]{display:block;width:100%;min-height:30px;accent-color:#a8e898;touch-action:none}
.touch-extra .touch-check{display:flex;align-items:center;gap:10px;min-height:44px;margin:5px 0}.touch-check input{width:20px;height:20px;accent-color:#a8e898}
.touch-extra p{color:#bfccd2;font-size:12px;line-height:1.5}.touch-utilities{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.touch-extra button{border-radius:8px;padding:8px 12px}
.touch-hint{position:absolute;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));max-width:45%;color:#ffffffe0;font-size:12px;line-height:1.5;text-shadow:0 1px 4px #000;transition:opacity .5s;pointer-events:none}.touch-hint.dismissed{opacity:0}
.touch-notice{display:none;position:absolute;top:74px;left:16px;right:16px;text-align:center;font-size:12px;text-shadow:0 1px 4px #000;pointer-events:none}
@media(orientation:portrait){.touch-notice{display:block}.touch-hint{top:104px;left:24px;right:24px;max-width:none;text-align:center}.touch-stick{left:18px;bottom:64px;width:108px;height:108px}.touch-actions [data-slot=weapons]{right:var(--edge);bottom:calc(22px + 218px * var(--control-size))}.touch-actions [data-slot=horn],.touch-actions [data-slot=yaw-left],.touch-actions [data-slot=drive-fire]{right:var(--edge);bottom:calc(22px + 214px * var(--control-size))}.touch-actions [data-slot=drive-fire]{right:calc(var(--edge) + 86px * var(--control-size))}.touch-toolbar{left:16px;right:16px;justify-content:center}}
@media(max-height:360px){.touch-stick{width:110px;height:110px;bottom:32px}.touch-hint{max-width:40%}}
@media(prefers-reduced-motion:reduce){.touch-hint,.ls-key,.ls-spin{transition:none!important;animation:none!important}}
.touch-device #loading > #ls-bars { position:fixed; left:max(16px,env(safe-area-inset-left)); right:max(16px,env(safe-area-inset-right)); top:auto; bottom:max(44px,env(safe-area-inset-bottom)); flex-direction:column; align-items:stretch; gap:8px; font:16px Chalet,Arial,sans-serif; }
.touch-device #loading > #ls-bars .ls-bar { height:auto; min-height:42px; padding:8px 12px; white-space:normal; background:#000c; }
.touch-device #modes { flex-wrap:wrap; justify-content:center; gap:10px; }
.touch-device #modes button { min-height:48px; font-size:18px; padding:0 16px; touch-action:manipulation; border:1px solid #ffffff75; border-radius:5px; }
.touch-device #modes .ls-key { display:none; }.touch-device #label { flex:1; line-height:1.35; }.touch-device #ls-log { bottom:8px; font-size:10px; }
.touch-device #hud { max-width:80vw; bottom:auto; top:64px; }