html,
body {
  height: 100dvh;
}

#content {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#content canvas {
  display: block !important;
  width: min(100vw, calc(100dvh * 1.7772727)) !important;
  height: auto !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  aspect-ratio: 782 / 440;
}

.overlay-screen {
  overflow: auto;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.home-card {
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

@media (max-width: 650px) {
  .vocab-hud {
    top: max(5px, env(safe-area-inset-top));
    left: max(7px, env(safe-area-inset-left));
    right: max(7px, env(safe-area-inset-right));
    width: auto;
    transform: none;
    padding: 5px 7px;
    border-width: 2px;
  }

  .stats {
    gap: 4px;
  }

  .stats span {
    padding: 6px 7px;
    font-size: 12px;
  }

  .listen button {
    padding: 7px 9px;
    font-size: 12px;
  }

  .target-card {
    border-width: 3px;
    border-radius: 12px;
  }

  .home-card {
    padding: 16px 18px 20px;
    border-width: 4px;
  }

  .bird-mark {
    font-size: 48px;
  }

  .home-card h1 {
    font-size: 34px;
  }

  .home-card > p:not(.eyebrow) {
    margin-block: 8px;
    font-size: 14px;
  }

  .feedback {
    top: calc(max(5px, env(safe-area-inset-top)) + 55px);
    font-size: 13px;
  }

  .word-burst {
    top: 50%;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .home-card {
    width: min(620px, 92vw);
    padding: 10px 20px 14px;
  }

  .bird-mark {
    display: none;
  }

  .home-card h1 {
    font-size: 30px;
  }

  .home-card > p:not(.eyebrow) {
    margin: 5px 0;
    font-size: 13px;
  }

  label {
    margin-top: 8px;
  }

  .rules {
    margin-top: 10px;
  }

  .vocab-hud {
    left: 50%;
    right: auto;
    max-width: 72vw;
    transform: translateX(-50%);
  }

  .feedback {
    top: 58px;
  }

  .word-burst img {
    width: 82px;
    height: 82px;
  }

  .word-burst strong {
    font-size: 34px;
  }
}