@media (min-width: 640px) {
  .app-layout {
    padding: 3rem 2.5rem;
  }

  .card-stage__hint {
    font-size: 1rem;
    letter-spacing: 0.12em;
  }
}

@media (min-width: 960px) {
  .app-header__subtitle {
    font-size: 1.05rem;
  }

  .card {
    width: clamp(340px, 22vw, 430px);
  }
}

@media (max-height: 640px) and (min-width: 768px) {
  .app-layout {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (pointer: coarse) {
  .card {
    width: clamp(240px, 75vw, 360px);
  }

  .card__inner {
    box-shadow: 0 20px 45px rgba(12, 3, 33, 0.45), inset 0 0 0 1px rgba(209, 192, 255, 0.14);
  }
}