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

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

html.iphone-player {
  --beta-ribbon-height: calc(42px + env(safe-area-inset-top));
}

html.iphone-player .beta-ribbon {
  min-height: var(--beta-ribbon-height);
  padding-top: max(6px, env(safe-area-inset-top));
}

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

.iphone-player .screen {
  height: calc(var(--iphone-viewport-height) - var(--beta-ribbon-height));
  min-height: calc(var(--iphone-viewport-height) - var(--beta-ribbon-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));
}

.iphone-player .message-modal {
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

.iphone-player .message-modal .message-box {
  width: min(420px, 100%);
  padding: 18px;
  color: var(--text);
  background: #11182a;
  border: 1px solid #344366;
  border-radius: 12px;
}

.iphone-player .message-modal .message-box h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  line-height: 1.25;
}
@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;
  }
}