/* Memorie — interfaccia di mamma.
   Regole: testo grande (min 20px), contrasto alto, un'azione principale per schermata,
   pulsanti ≥60px, niente gesti nascosti. Tema unico caldo, ad alta leggibilità. */

:root {
  --carta: #FAF5EC;
  --carta-scura: #F1EADC;
  --inchiostro: #29251F;
  --inchiostro-tenue: #5D564B;
  --linea: #DDD3C0;
  --primario: #9E4732;        /* terracotta profonda: l'azione principale */
  --primario-scuro: #833927;
  --primario-chiaro: #F6E3DC;
  --verde: #3F6E4C;           /* conferme */
  --blu: #33538D;             /* il libro, i link */
  --bianco: #FFFFFF;
  --ombra: 0 2px 10px rgba(41, 37, 31, 0.10);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 20px; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

#app { max-width: 720px; margin: 0 auto; padding: 16px 20px 48px; }

.caricamento { text-align: center; color: var(--inchiostro-tenue); padding: 80px 0; font-size: 1.1rem; }

button {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--inchiostro);
  background: var(--bianco);
  border: 2px solid var(--linea);
  border-radius: 18px;
  min-height: 64px;
  padding: 12px 22px;
  cursor: pointer;
  touch-action: manipulation;
}
button:active { transform: scale(0.985); }
button:focus-visible { outline: 4px solid var(--blu); outline-offset: 2px; }

.btn-primario {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--bianco);
  font-size: 1.25rem;
  min-height: 76px;
  border-radius: 22px;
  box-shadow: var(--ombra);
  width: 100%;
}
.btn-primario:active { background: var(--primario-scuro); }
.btn-secondario { width: 100%; background: var(--bianco); }
.btn-verde { background: var(--verde); border-color: var(--verde); color: var(--bianco); width: 100%; font-size: 1.15rem; }
.btn-quieto {
  background: none; border: none; min-height: 52px;
  color: var(--inchiostro-tenue); text-decoration: underline;
  text-underline-offset: 4px; font-weight: 500; font-size: 0.95rem;
}

/* ---------- intestazione con Casa ---------- */
.testata {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 18px;
}
.btn-casa {
  min-height: 56px; min-width: 56px;
  border-radius: 16px; font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px; padding: 8px 18px;
}
.testata h1 { font-size: 1.25rem; margin: 0; font-weight: 700; }

/* ---------- Home ---------- */
.saluto { font-size: 1.9rem; font-weight: 700; margin: 8px 0 2px; letter-spacing: -0.01em; }
.data-oggi { color: var(--inchiostro-tenue); margin: 0 0 20px; font-size: 1rem; }

.carta {
  background: var(--bianco);
  border: 2px solid var(--linea);
  border-radius: 24px;
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--ombra);
}
.carta .etichetta {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primario); margin: 0 0 10px;
}
.carta-vincenzo { border-color: var(--blu); background: #EFF3FB; }
.carta-vincenzo .etichetta { color: var(--blu); }

.domanda-testo { font-size: 1.45rem; font-weight: 650; line-height: 1.35; margin: 0 0 18px; }

.griglia-due { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tessera {
  background: var(--carta-scura);
  border: 2px solid var(--linea);
  border-radius: 20px;
  min-height: 96px;
  font-size: 1.05rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.tessera .icona { font-size: 1.7rem; }

.libro-copertina {
  display: flex; align-items: center; gap: 18px;
}
.libro-dorso {
  width: 74px; height: 100px; border-radius: 6px 12px 12px 6px;
  background: linear-gradient(105deg, var(--blu), #24406F);
  color: var(--bianco);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; box-shadow: var(--ombra); flex-shrink: 0;
}
.libro-info { font-size: 1.1rem; }
.libro-info b { font-size: 1.25rem; }

/* ---------- registrazione ---------- */
.domanda-fissa {
  position: sticky; top: 0; z-index: 5;
  background: var(--carta);
  padding: 10px 0 14px;
  font-size: 1.3rem; font-weight: 650; line-height: 1.35;
  border-bottom: 2px solid var(--linea);
  margin-bottom: 20px;
}

.zona-registra { text-align: center; padding: 8px 0 20px; }

.pulsantone {
  width: 190px; height: 190px;
  border-radius: 50%;
  border: none;
  background: var(--primario);
  color: var(--bianco);
  font-size: 1.2rem; font-weight: 700;
  margin: 24px auto 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 24px rgba(158, 71, 50, 0.4);
  position: relative;
}
.pulsantone .mic { font-size: 3rem; }
.pulsantone.registrando {
  background: var(--bianco);
  color: var(--primario);
  border: 6px solid var(--primario);
  animation: pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(158, 71, 50, 0.35); }
  50% { box-shadow: 0 0 0 22px rgba(158, 71, 50, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulsantone.registrando { animation: none; }
}

.timer { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; margin: 6px 0 2px; }
.stato-ascolto { color: var(--inchiostro-tenue); font-size: 1.05rem; min-height: 1.6em; }

.livello {
  height: 14px; border-radius: 7px; background: var(--carta-scura);
  margin: 14px auto; max-width: 320px; overflow: hidden;
  border: 1px solid var(--linea);
}
.livello > div { height: 100%; width: 0%; background: var(--verde); border-radius: 7px; transition: width 0.12s linear; }

.controlli-registra { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin-top: 18px; }

/* ---------- dialogo ---------- */
.chat { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 20px; }
.bolla {
  padding: 16px 20px; border-radius: 22px; font-size: 1.2rem; line-height: 1.45;
  max-width: 92%;
}
.bolla-app { background: var(--bianco); border: 2px solid var(--linea); align-self: flex-start; border-bottom-left-radius: 8px; }
.bolla-mamma { background: var(--primario-chiaro); align-self: flex-end; border-bottom-right-radius: 8px; }
.bolla-nota { color: var(--inchiostro-tenue); font-size: 0.95rem; align-self: center; text-align: center; background: none; padding: 4px; }

/* ---------- rivedi e salva ---------- */
.riascolta audio { width: 100%; margin: 14px 0; }
.pila { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }

.conferma-grande {
  text-align: center; padding: 30px 10px;
}
.conferma-grande .spunta { font-size: 4rem; }
.conferma-grande h2 { font-size: 1.5rem; margin: 12px 0 8px; }
.conferma-grande p { color: var(--inchiostro-tenue); font-size: 1.1rem; }

/* ---------- temi / griglie ---------- */
.griglia-temi { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.tema-carta {
  background: var(--bianco); border: 2px solid var(--linea); border-radius: 20px;
  padding: 18px; min-height: 120px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 1.1rem; font-weight: 650;
  position: relative;
}
.tema-carta .conta { font-weight: 500; color: var(--inchiostro-tenue); font-size: 0.95rem; }
.tema-carta .novita {
  position: absolute; top: 14px; right: 14px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--verde);
}

.storia-riga {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 12px;
}
.storia-riga .quando { color: var(--inchiostro-tenue); font-size: 0.9rem; font-weight: 500; }
.storia-riga .play { margin-left: auto; font-size: 1.5rem; color: var(--primario); }

/* ---------- storia ---------- */
.storia-testo { font-size: 1.25rem; line-height: 1.6; }
.storia-testo p { margin: 0 0 1em; }
.foto-storia { width: 100%; border-radius: 16px; margin: 12px 0; border: 2px solid var(--linea); }
.reazione {
  background: #EFF3FB; border: 2px solid var(--blu); border-radius: 18px;
  padding: 14px 18px; margin: 14px 0; font-size: 1.05rem;
}

/* ---------- famiglia ---------- */
.griglia-volti { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.volto {
  background: var(--bianco); border: 2px solid var(--linea); border-radius: 20px;
  padding: 14px; text-align: center; font-size: 1rem; font-weight: 650;
}
.volto .cerchio {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--carta-scura); border: 2px solid var(--linea);
  margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--inchiostro-tenue);
  overflow: hidden;
}
.volto .cerchio img { width: 100%; height: 100%; object-fit: cover; }
.volto .relazione { font-weight: 500; color: var(--inchiostro-tenue); font-size: 0.9rem; }

.fatto { padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 1.05rem; }

/* ---------- messaggi ---------- */
.avviso {
  background: var(--primario-chiaro); border: 2px solid var(--primario);
  border-radius: 16px; padding: 14px 18px; margin: 14px 0; font-size: 1.05rem;
}
.vuoto { text-align: center; color: var(--inchiostro-tenue); padding: 40px 10px; font-size: 1.1rem; }

h2.sezione { font-size: 1.5rem; margin: 6px 0 16px; }

@media (max-width: 420px) {
  html { font-size: 19px; }
  .griglia-due { grid-template-columns: 1fr; }
  .pulsantone { width: 170px; height: 170px; }
}