html,
body {
  overscroll-behavior: none;
}

.mobile-controls,
.joystick-zone,
.joystick-base,
.joystick-thumb,
.mobile-action-buttons,
.mobile-btn {
  touch-action: none;
  overscroll-behavior: contain;
}

@media (max-width: 760px) {
  .mobile-controls {
    height: 190px;
    padding: 16px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .joystick-zone {
    width: 160px;
    height: 160px;
    flex: 0 0 160px;
  }

  .joystick-base {
    width: 140px;
    height: 140px;
    top: 10px;
    left: 10px;
  }

  .joystick-thumb {
    width: 60px;
    height: 60px;
  }

  .mobile-action-buttons {
    gap: 12px;
  }

  .mobile-btn {
    width: 80px;
    height: 80px;
    font-size: 16px;
  }

  .stage-panel {
    bottom: 202px;
  }
}

@media (max-width: 760px) and (max-height: 500px) {
  .mobile-controls {
    height: 150px;
    padding-top: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .joystick-zone {
    width: 132px;
    height: 132px;
    flex-basis: 132px;
  }

  .joystick-base {
    width: 116px;
    height: 116px;
    top: 8px;
    left: 8px;
  }

  .joystick-thumb {
    width: 52px;
    height: 52px;
  }

  .mobile-btn {
    width: 72px;
    height: 72px;
    font-size: 14px;
  }

  .stage-panel {
    bottom: 158px;
    padding: 8px 10px;
  }

  #stage-hint {
    display: none;
  }
}

@media (max-width: 340px) and (min-height: 501px) {
  .hud-top-left {
    max-width: 112px;
    gap: 4px;
  }

  .rank-badge {
    min-width: 48px;
    padding: 6px;
  }

  .rank-num {
    font-size: 22px;
  }

  .level-info {
    max-width: 60px;
  }

  .hud-top-right {
    gap: 3px;
  }

  .hud-top-right .icon-btn {
    width: 30px;
    height: 30px;
  }

  .lives-badge,
  .coin-badge {
    padding: 4px 6px;
    font-size: 0.9rem;
  }

  .mobile-controls {
    padding-right: 12px;
    padding-left: 12px;
  }

  .joystick-zone {
    width: 140px;
    height: 140px;
    flex-basis: 140px;
  }

  .joystick-base {
    width: 124px;
    height: 124px;
    top: 8px;
    left: 8px;
  }

  .joystick-thumb {
    width: 54px;
    height: 54px;
  }

  .mobile-action-buttons {
    gap: 8px;
  }

  .mobile-btn {
    width: 72px;
    height: 72px;
    font-size: 14px;
  }
}