.touch-controls { display: none; }
@media (pointer: coarse) {
  .touch-controls { position: fixed; z-index: 30; inset: auto 12px 16px; display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
  .touch-controls div { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; }
  .touch-controls button { width: 44px; height: 44px; border: 1px solid #ffffff88; border-radius: 12px; color: white; background: #122238bb; font: 14px system-ui; touch-action: none; pointer-events: auto; }
  .touch-controls button:active { background: #3868ee; }
  .touch-controls button[data-code="KeyW"] { grid-column: 2; }
  .touch-controls button[data-code="KeyA"] { grid-column: 1; }
  #instructions { display: none; }
  #minimap { bottom: 130px !important; }
  #hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; left: 8px; right: 8px; top: 8px; }
  #hud > .hud-panel > .label { display: none; }
  .hud-panel { min-width: 0; padding: 6px 8px; font-size: 10px; overflow-wrap: anywhere; }
  .hud-panel .value { font-size: 16px; }
  #gliderStatus { font-size: 11px; }
  #timeDisplay { top: 105px; left: 8px; transform: none; }
  #timeDisplay .hud-panel { min-width: 64px; }
  #ui > .hud-panel { top: 105px !important; right: 8px !important; }
  #musicBtn { top: 105px; right: 134px; }
}