:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  min-height: 100%;
  background: #0b0d12;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

.topbar {
  min-height: calc(68px + var(--safe-top));
  height: auto;
  padding-top: var(--safe-top);
  padding-right: max(5vw, var(--safe-right));
  padding-left: max(5vw, var(--safe-left));
}

.screen {
  min-height: calc(100vh - 68px);
  min-height: calc(100dvh - 68px - var(--safe-top));
  padding-bottom: max(6vh, calc(20px + var(--safe-bottom)));
}

footer {
  height: auto;
  min-height: calc(36px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
}

button,
[role='button'],
label.choice span,
input,
select {
  touch-action: manipulation;
}

.mini-stage,
.mini-stage canvas {
  touch-action: pan-y;
}

.mini-stage canvas.pong-canvas {
  touch-action: none;
}

.playoff-modal {
  padding-top: max(20px, var(--safe-top));
  padding-right: max(20px, var(--safe-right));
  padding-bottom: max(20px, var(--safe-bottom));
  padding-left: max(20px, var(--safe-left));
}

html[data-app-platform='standalone'] .topbar,
html[data-app-platform='native'] .topbar {
  user-select: none;
  -webkit-user-select: none;
}

@media (pointer: coarse) {
  button,
  select,
  input:not([type='radio']):not([type='checkbox']),
  .choice span {
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  .topbar {
    padding-right: max(20px, var(--safe-right));
    padding-left: max(20px, var(--safe-left));
  }

  .screen {
    padding-right: max(20px, var(--safe-right));
    padding-left: max(20px, var(--safe-left));
    padding-bottom: max(5vh, calc(20px + var(--safe-bottom)));
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .playoff-shell {
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}