body.touch #hint-desktop { display: none; }
body.touch #hint-touch { display: block; }
#touch[hidden] { display: none; }
.stick { position: fixed; bottom: calc(var(--dock, 0px) + max(12px, env(safe-area-inset-bottom)));
  width: calc(132px * var(--tscale, 1)); height: calc(132px * var(--tscale, 1));
  border-radius: 50%; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.18);
  z-index: 10; touch-action: none; opacity: .85; }
#stick-move { left: max(14px, env(safe-area-inset-left)); }
#stick-aim { right: max(14px, env(safe-area-inset-right)); border-color: rgba(255,61,242,.4); }
body.swap #stick-move { left: auto; right: max(14px, env(safe-area-inset-right)); }
body.swap #stick-aim { right: auto; left: max(14px, env(safe-area-inset-left)); }
.knob { position: absolute; left: 50%; top: 50%; width: calc(56px * var(--tscale, 1)); height: calc(56px * var(--tscale, 1));
  margin: calc(-28px * var(--tscale, 1)) 0 0 calc(-28px * var(--tscale, 1));
  border-radius: 50%; background: rgba(34,228,255,.55); pointer-events: none; }
#stick-aim .knob { background: rgba(255,61,242,.55); }
body.touch .abtn { height: 52px; }
body.touch .abtn .key { display: none; }
@media (max-height: 420px) {
  .stick { width: calc(112px * var(--tscale, 1)); height: calc(112px * var(--tscale, 1)); }
  .knob { width: calc(48px * var(--tscale, 1)); height: calc(48px * var(--tscale, 1)); margin: calc(-24px * var(--tscale, 1)) 0 0 calc(-24px * var(--tscale, 1)); }
  #dock { padding-top: 5px; gap: 5px; } #coach p { font-size: .78rem; margin-bottom: 5px; } .abtn { height: 44px; }
}