/* Only active touch regions consume gestures; menus retain native scrolling. */
#touchControls {
  position: fixed; inset: 0; z-index: 35; pointer-events: none;
  --mobile-edge: 14px;
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  color: #e2f4ff;
  font: 600 13px/1.2 system-ui, sans-serif;
}
#touchControls[hidden], #touchControls [hidden] { display: none !important; }
#touchControls button {
  appearance: none; -webkit-appearance: none; min-width: 48px; min-height: 48px;
  margin: 0; padding: 9px 12px; border: 1px solid #91c8dd80; border-radius: 12px;
  color: #e2f4ff; background: #091a2de0; box-shadow: 0 2px 8px #0006;
  font: inherit; pointer-events: auto; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#touchControls button.is-held { background: #227d9be8; border-color: #d1f5ff; }
#touchControls button:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
.mobile-topbar {
  position: absolute; top: max(4px, env(safe-area-inset-top));
  right: max(var(--mobile-edge), env(safe-area-inset-right));
}
.mobile-topbar button { min-height: 44px !important; padding: 7px 12px !important; }
.mobile-primary {
  position: absolute; right: max(var(--mobile-edge), env(safe-area-inset-right));
  bottom: max(var(--mobile-edge), env(safe-area-inset-bottom));
  width: min(260px, 49vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px;
}
.mobile-stick {
  position: absolute; left: max(var(--mobile-edge), env(safe-area-inset-left));
  bottom: max(var(--mobile-edge), env(safe-area-inset-bottom));
  width: clamp(110px, 23vw, 145px); height: clamp(110px, 23vw, 145px);
  border: 1px solid #a7d9ee80; border-radius: 50%; background: #081b2a60;
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.mobile-stick-knob {
  position: absolute; top: calc(50% - 24px); left: calc(50% - 24px); width: 48px; height: 48px;
  border-radius: 50%; background: #8ac7e680; border: 1px solid #d5f2ffb0; pointer-events: none;
}
.mobile-stick-label { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; pointer-events: none; font-size: 11px; }
.mobile-look {
  position: absolute; right: max(var(--mobile-edge), env(safe-area-inset-right));
  bottom: calc(max(var(--mobile-edge), env(safe-area-inset-bottom)) + 174px);
  width: min(38vw, 235px); height: clamp(90px, 20vh, 160px); min-width: 90px;
  border: 1px dashed #b0dbef55; border-radius: 18px; background: #081b2a20;
  display: flex; align-items: center; justify-content: center; color: #e2f4ff90;
  pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.mobile-actions {
  position: absolute; right: max(var(--mobile-edge), env(safe-area-inset-right));
  bottom: calc(max(var(--mobile-edge), env(safe-area-inset-bottom)) + 174px);
  width: min(330px, 62vw); max-height: min(46vh, 330px); box-sizing: border-box;
  display: flex; flex-wrap: wrap; gap: 8px; padding: 10px;
  border: 1px solid #8fcde980; border-radius: 14px; background: #081423f5;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  pointer-events: auto; touch-action: pan-y;
}
.mobile-actions button { flex: 1 0 85px; }
@media (max-height: 480px) {
  #touchControls { --mobile-edge: 8px; }
  .mobile-look { height: 85px; bottom: calc(max(var(--mobile-edge), env(safe-area-inset-bottom)) + 118px); }
  .mobile-actions { bottom: calc(max(var(--mobile-edge), env(safe-area-inset-bottom)) + 118px); max-height: 58vh; }
  .mobile-primary { width: min(310px, 53vw); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
}