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

/* Lo misura _lumi-tts.js sulla barra vera: senza barra non serve spazio. */
body {
  padding-bottom: var(--lumi-spazio-barra, 0px) !important;
}

/* La mascotte dei giochi e' fixed in basso a destra come la barra: stessa misura,
   cosi' le sta sopra invece che dietro. */
#lumi {
  bottom: var(--lumi-spazio-barra, 20px) !important;
}

/* .overlay resta fuori di proposito: nei giochi e' un fixed che deve COPRIRE il
   tabellone (schermata iniziale, schermata di vittoria) e ha gia' il suo
   overflow. Rimetterlo in flusso lo mette sopra al gioco invece che davanti. */
.screen {
  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;
}

/* Niente selezione sui bersagli da toccare, dove il tap ripetuto la innesca.
   Il testo del gioco resta selezionabile, e leggibile dagli strumenti di lettura. */
button,
[onclick] {
  user-select: none;
  -webkit-user-select: none;
}

@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) {
  .lumi-heart-container {
    width: min(70vw, 200px) !important;
    height: min(70vw, 200px) !important;
  }
}