.touch-controls{--touch-edge-left:max(16px, env(safe-area-inset-left));--touch-edge-right:max(16px, env(safe-area-inset-right));--touch-steer-left:0;--touch-steer-right:auto;--touch-stick-left:calc(var(--touch-edge-left) + 60px);--touch-stick-right:auto;--touch-buttons-left:auto;--touch-buttons-right:var(--touch-edge-right);--touch-buttons-areas:"item  ." "brake drift";pointer-events:none;touch-action:none;position:fixed;inset:0}.touch-controls[hidden]{display:none}.touch-controls[data-hand=left]{--touch-steer-left:auto;--touch-steer-right:0;--touch-stick-left:auto;--touch-stick-right:calc(var(--touch-edge-right) + 60px);--touch-buttons-left:var(--touch-edge-left);--touch-buttons-right:auto;--touch-buttons-areas:".     item" "drift brake"}.touch-steer{left:var(--touch-steer-left);right:var(--touch-steer-right);pointer-events:auto;width:45%;height:60%;position:absolute;bottom:0}.touch-controls[data-steering=tilt] .touch-stick{display:none}.touch-stick{left:var(--touch-stick-left);right:var(--touch-stick-right);bottom:calc(max(16px, env(safe-area-inset-bottom)) + 20px);background:#ffffff59;border:3px solid #fff9;border-radius:50%;width:64px;height:64px;position:absolute}.touch-buttons{left:var(--touch-buttons-left);right:var(--touch-buttons-right);bottom:max(16px, env(safe-area-inset-bottom));grid-template-columns:auto auto;grid-template-areas:var(--touch-buttons-areas);pointer-events:auto;align-items:end;gap:12px;display:grid;position:absolute}.touch-button{--touch-button-size:calc(var(--touch-button-base,60px) * var(--touch-button-scale,1));width:var(--touch-button-size);height:var(--touch-button-size);color:#fff;font:700 calc(13px * var(--touch-button-scale,1)) system-ui, sans-serif;touch-action:none;background:#00000059;border:3px solid #ffffffb3;border-radius:50%}.touch-button.down{background:#ffd166b3}.touch-drift{--touch-button-base:84px;--touch-button-scale:var(--touch-drift-scale,1);--touch-button-x:var(--touch-drift-x);--touch-button-y:var(--touch-drift-y);grid-area:drift}.touch-item{--touch-button-scale:var(--touch-item-scale,1);--touch-button-x:var(--touch-item-x);--touch-button-y:var(--touch-item-y);grid-area:item}.touch-brake{--touch-button-scale:var(--touch-brake-scale,1);--touch-button-x:var(--touch-brake-x);--touch-button-y:var(--touch-brake-y);grid-area:brake}.touch-controls[data-layout=custom] .touch-buttons{inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);pointer-events:none;display:block}.touch-controls[data-layout=custom] .touch-button{--touch-button-outer:clamp(0px, calc(var(--touch-button-x) - var(--touch-button-size) / 2), calc(100% - var(--touch-button-size)));right:var(--touch-button-outer);bottom:clamp(0px, calc(var(--touch-button-y) - var(--touch-button-size) / 2), calc(100% - var(--touch-button-size)));pointer-events:auto;position:absolute}.touch-controls[data-layout=custom][data-hand=left] .touch-button{right:auto;left:var(--touch-button-outer)}.toasts{top:max(12px, env(safe-area-inset-top));z-index:40;pointer-events:none;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:calc(100vw - 32px);display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{color:#fff;text-align:center;background:#1d3557e6;border-radius:999px;margin:0;padding:8px 16px;font:700 clamp(14px,3.6vh,18px)/1.3 system-ui,sans-serif;animation:.2s ease-out toast-in;box-shadow:0 2px 10px #0000004d}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}}@media (prefers-reduced-motion:reduce){.toast{animation:none}}
