:root {
  --iphone-viewport-height: 100dvh;
}

html,
body {
  width: 100%;
  height: var(--iphone-viewport-height);
  min-height: var(--iphone-viewport-height);
  overscroll-behavior: none;
}

body.iphone-player {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

.iphone-player .screen {
  height: var(--iphone-viewport-height);
  min-height: var(--iphone-viewport-height);
}

.iphone-player input,
.iphone-player textarea,
.iphone-player select,
.iphone-player button {
  font-size: max(16px, 1rem);
}

.iphone-player .topbar,
.iphone-player .chat-header,
.iphone-player .dialog-prelude-header {
  padding-top: max(12px, env(safe-area-inset-top));
}

.iphone-player .zone-info,
.iphone-player .chat-footer,
.iphone-player .dialog-prelude-footer,
.iphone-player .stats-wrap {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.iphone-player .gps-overlay {
  min-height: var(--iphone-viewport-height);
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

@media (max-width: 430px) {
  .iphone-player .title-pill {
    max-width: calc(100vw - 112px);
  }

  .iphone-player .zone-info {
    max-height: min(39dvh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}