html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body {
  padding-bottom: 90px !important;
}

.screen, .overlay {
  position: relative !important;
  height: auto !important;
  min-height: 100vh !important;
  padding: 16px 14px !important;
  justify-content: flex-start !important;
}

.screen.hidden, .overlay.hidden {
  display: none !important;
}

button,
.btn-action,
.btn-big,
.word-btn {
  min-height: 56px !important;
  min-width: 56px !important;
  touch-action: manipulation;
}

@media (max-width: 900px) {
  .main-title,
  .activity-title {
    font-size: clamp(22px, 5.5vw, 32px) !important;
    margin: 6px 0 !important;
  }

  .instruction-box {
    padding: 12px 16px !important;
    max-width: 100% !important;
  }
  .instruction-box p {
    font-size: clamp(17px, 4vw, 22px) !important;
    line-height: 1.35 !important;
  }

  .badge-lumi,
  .activity-badge {
    font-size: clamp(13px, 3vw, 16px) !important;
    padding: 5px 14px !important;
  }

  .pedagogical-note,
  .pedagogy-container {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
  .pedagogical-note p,
  .pedagogy-container p {
    font-size: 12px !important;
  }

  .lumi-heart-container {
    width: min(60vw, 240px) !important;
    height: min(60vw, 240px) !important;
    margin: 6px 0 !important;
  }
  .lumi-avatar {
    font-size: min(24vw, 90px) !important;
  }
  .heart-pulse-circle {
    width: 70% !important;
    height: 70% !important;
  }

  .btn-action,
  .btn-big {
    font-size: clamp(18px, 4.5vw, 24px) !important;
    padding: 14px 32px !important;
    margin: 8px 0 !important;
  }

  .lumi-img {
    height: min(20vh, 120px) !important;
  }

  .bubble {
    font-size: clamp(16px, 4vw, 20px) !important;
    padding: 10px 18px !important;
    max-width: 92vw !important;
  }

  #sentence-container {
    min-height: 80px !important;
    height: auto !important;
  }

  .slot {
    min-height: 64px !important;
  }

  .word-btn {
    font-size: clamp(16px, 4vw, 20px) !important;
    padding: 10px 18px !important;
  }

  .progress-bar-container {
    width: 92% !important;
  }
}

@media (max-width: 520px) {
  body {
    padding-bottom: 100px !important;
  }
  .lumi-heart-container {
    width: min(70vw, 200px) !important;
    height: min(70vw, 200px) !important;
  }
}