@media (max-width: 430px) {
  :root {
    --glass-radius: 18px;
    --glass-blur: 32px;
  }

  .ar-panel {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px);
  }

  .hud-toolbar {
    left: 8px;
    right: 8px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 6px;
    padding: 8px;
  }

  .btn-symbol {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .hud-toolbar {
    top: calc(10px + env(safe-area-inset-top));
    bottom: auto;
    left: calc(8px + env(safe-area-inset-left));
    right: auto;
    width: 72px;
    max-height: calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    flex-direction: column;
  }

  .status-panel {
    top: calc(10px + env(safe-area-inset-top));
    left: 92px;
    right: calc(12px + env(safe-area-inset-right));
    bottom: auto;
  }
}

@media (min-width: 720px) {
  .ar-panel {
    width: clamp(340px, 38vw, 520px);
  }
}