/* ============================================================
   Remember — demo su schermate vere

   Niente piu' riproduzione dell'interfaccia: dentro la cornice c'e'
   l'immagine dello schermo dell'app. Qui si definisce solo come sta
   l'immagine e dove sono le zone che si toccano.

   Le zone sono <button> trasparenti posizionati in percentuale sopra
   la foto: restano al loro posto a qualunque dimensione del telefono,
   e sono raggiungibili da tastiera perche' sono bottoni veri.
   ============================================================ */

.app-remember .demo-screen {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;   /* il contenuto lungo scorre, non allunga la cornice */
}

.app-remember .shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #F4F6F8;
}

/* Le zone sensibili: completamente invisibili.
   Niente alone al passaggio, niente cornice al tocco: sullo schermo vero
   quella roba non c'e', e disegnarla sopra la fotografia la falsa. Il
   ritorno al tocco ce l'ha gia' la demo, ed e' il piu' onesto possibile:
   cambia la schermata.

   Resta solo il contorno del fuoco da tastiera, che compare appunto solo
   per chi naviga col Tab: senza, non si capirebbe dove si e'. */
.app-remember .hot {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;          /* niente ritardo di 300 ms */
  -webkit-tap-highlight-color: transparent;  /* niente alone grigio di sistema */
}
.app-remember .hot:focus-visible {
  outline: 2px solid #a6d57b;
  outline-offset: -2px;
  border-radius: 8px;
}