@media (max-width: 480px), (max-height: 700px) {
  /* Modal text sizing */
  #root .text-2xl {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  #root .text-3xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  /* Input + code box sizing */
  #root .h-16 {
    height: 3rem;
  }

  #root .\!h-16 {
    height: 3rem !important;
  }

  #root .\!w-16 {
    width: 3rem !important;
  }

  /* Move modal towards top (leave room for on-screen keyboard) */
  #root .mt-40 {
    margin-top: 4.5rem;
  }

  /* Reduce padding so content fits better on mobile */
  #root .p-12 {
    padding: 1.5rem;
  }

  #root .px-8 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Allow scrolling when viewport is reduced by on-screen keyboard */
  #root > div[class*="fixed"][class*="bg-black/50"][class*="z-[9999]"] {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}