/* Valori di default: app.js li sovrascrive con i colori di js/config.js */
:root {
  --crema: 251 245 234;
  --carta: 255 253 248;
  --inchiostro: 42 33 28;
  --rosso: 163 38 42;
  --oro: 201 154 46;
  --petrolio: 30 90 102;
  --ombra: 0 10px 30px -12px rgb(var(--inchiostro) / 0.25);
  color-scheme: light;
}

html, body { background: rgb(var(--crema)); }
body {
  min-height: 100svh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
  background-image:
    radial-gradient(circle at 15% 0%, rgb(var(--oro) / 0.10), transparent 40%),
    radial-gradient(circle at 100% 30%, rgb(var(--petrolio) / 0.07), transparent 45%);
  background-attachment: fixed;
}
button { -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* ---------- tipografia ---------- */
.titolo { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.01em; }
.titolo-sezione { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.4rem; line-height: 1.2; }
.etichetta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--inchiostro) / 0.55); }
.etichetta.chiara { color: rgb(255 255 255 / 0.75); }
.calligrafia { font-family: Caveat, cursive; font-size: 1.45rem; line-height: 1.25; color: rgb(var(--petrolio)); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.font-display { font-family: Fraunces, Georgia, serif; }

/* ---------- schermate ---------- */
.schermata { animation: entra 0.45s ease both; padding-top: 1.25rem; }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.nascosto { display: none !important; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0.8rem 1.25rem; border-radius: 999px;
  font-weight: 700; font-size: 1.02rem; transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn-primario { background: rgb(var(--rosso)); color: #fff; box-shadow: 0 8px 20px -8px rgb(var(--rosso) / 0.7); }
.btn-secondario { background: rgb(var(--carta)); color: rgb(var(--inchiostro)); border: 2px solid rgb(var(--inchiostro) / 0.12); }
.btn-pericolo { background: transparent; color: rgb(var(--rosso)); border: 2px solid rgb(var(--rosso) / 0.45); }
.btn-testo { background: transparent; color: rgb(var(--inchiostro) / 0.65); min-height: 2.75rem; }
.link-indietro { font-weight: 600; color: rgb(var(--petrolio)); padding: 0.5rem 0; }

/* ---------- campi ---------- */
.campo {
  width: 100%; padding: 0.9rem 1rem; border-radius: 1rem;
  background: rgb(var(--carta)); border: 2px solid rgb(var(--inchiostro) / 0.12);
  font-size: 16px; /* evita lo zoom su iOS */
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.campo:focus { border-color: rgb(var(--petrolio)); box-shadow: 0 0 0 4px rgb(var(--petrolio) / 0.15); }
.campo.text-2xl { font-size: 1.6rem; }
.campo.text-lg { font-size: 1.15rem; }

/* ---------- elementi vari ---------- */
.sigillo {
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: Fraunces, serif; font-size: 2.8rem; font-weight: 900;
  color: rgb(var(--oro)); background: rgb(var(--rosso));
  box-shadow: 0 0 0 6px rgb(var(--crema)), 0 0 0 8px rgb(var(--oro) / 0.6), var(--ombra);
}
.pulsa { animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.06); } }
.rimbalzo { animation: rimbalzo 1.2s ease infinite; display: inline-block; }
@keyframes rimbalzo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.scheda { background: rgb(var(--carta)); border-radius: 1.25rem; padding: 1.1rem 1.2rem; box-shadow: var(--ombra); }
.avviso { background: rgb(var(--petrolio) / 0.1); color: rgb(var(--petrolio)); border-radius: 1rem; padding: 0.85rem 1rem; font-weight: 500; }
.vuoto { text-align: center; padding: 1.5rem 1rem; color: rgb(var(--inchiostro) / 0.55); border: 2px dashed rgb(var(--inchiostro) / 0.15); border-radius: 1.25rem; }

.barra { height: 0.5rem; border-radius: 999px; background: rgb(var(--inchiostro) / 0.1); overflow: hidden; }
.barra span { display: block; height: 100%; background: rgb(var(--oro)); border-radius: 999px; transition: width 0.6s ease; }
.barra.chiara { background: rgb(255 255 255 / 0.2); }

/* barra dei passi dell'intro */
.barra-intro { position: sticky; top: 0; z-index: 5; padding: 0.75rem 0 0.5rem; background: linear-gradient(rgb(var(--crema)) 75%, transparent); }
.passi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.25rem; }
.passi li { font-size: 0.6rem; font-weight: 700; text-align: center; color: rgb(var(--inchiostro) / 0.35); text-transform: uppercase; letter-spacing: 0.04em; }
.passi li span { display: block; height: 0.3rem; border-radius: 999px; background: rgb(var(--inchiostro) / 0.12); margin-bottom: 0.3rem; }
.passi li.fatto span { background: rgb(var(--oro)); }
.passi li.ora { color: rgb(var(--rosso)); }
.passi li.ora span { background: rgb(var(--rosso)); }
.badge-demo { text-align: center; font-size: 0.72rem; font-weight: 700; color: rgb(var(--petrolio)); background: rgb(var(--petrolio) / 0.1); border-radius: 999px; padding: 0.3rem 0.75rem; margin-bottom: 0.6rem; }

/* opzioni di test e quiz */
.opzione {
  text-align: left; padding: 1rem 1.15rem; border-radius: 1rem; font-weight: 500;
  background: rgb(var(--carta)); border: 2px solid rgb(var(--inchiostro) / 0.1);
  box-shadow: 0 2px 0 rgb(var(--inchiostro) / 0.06);
  transition: border-color 0.2s, background 0.2s, transform 0.12s, opacity 0.3s;
}
.opzione:active { transform: scale(0.98); }
.opzione.scelta, .opzione.giusta { border-color: rgb(var(--petrolio)); background: rgb(var(--petrolio) / 0.1); }
.opzione.giusta { border-color: rgb(var(--rosso)); background: rgb(var(--rosso) / 0.1); }
.opzione.finta { opacity: 0.45; text-decoration: line-through; text-decoration-color: rgb(var(--rosso)); }

.nota-clinica {
  margin-top: 1.25rem; min-height: 2rem; font-family: Caveat, cursive; font-size: 1.5rem; line-height: 1.2;
  color: rgb(var(--petrolio)); opacity: 0; transform: rotate(-1.5deg) translateY(6px); transition: all 0.4s ease;
}
.nota-clinica.visibile { opacity: 1; transform: rotate(-1.5deg); }

.scuoti { animation: scuoti 0.45s ease; }
@keyframes scuoti {
  20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

/* ---------- Rorschach ---------- */
.tavola {
  background: #fbf8f1; border-radius: 1.25rem; padding: 1rem 1rem 1.5rem; box-shadow: var(--ombra);
  border: 1px solid rgb(var(--inchiostro) / 0.08);
}
.macchia { display: block; width: 100%; max-height: 52vh; margin-top: 0.5rem; }
.macchia .inchiostro { fill: #1d1a1a; }

/* ---------- ricetta ---------- */
.ricetta { background: rgb(var(--carta)); border-radius: 1.25rem; overflow: hidden; box-shadow: var(--ombra); border: 1px solid rgb(var(--rosso) / 0.2); }
.ricetta-testa { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.1rem; background: rgb(var(--rosso)); color: rgb(var(--oro)); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ricetta-corpo {
  padding: 1.1rem 1.2rem 1.3rem;
  background-image: repeating-linear-gradient(transparent 0 31px, rgb(var(--petrolio) / 0.08) 31px 32px);
}
.elenco-ricetta li::before { content: '– '; }
.rx { font-family: Fraunces, serif; font-size: 3rem; line-height: 1; color: rgb(var(--rosso)); font-weight: 900; }
.firma { margin-top: 1.25rem; text-align: right; font-family: Caveat, cursive; font-size: 1.35rem; color: rgb(var(--inchiostro) / 0.75); }

/* ---------- puzzle ---------- */
.puzzle-attesa { text-align: center; padding: 3rem 0; opacity: 0.6; }
.puzzle {
  display: grid; gap: 4px; width: 100%; max-height: 62vh; margin-inline: auto;
  padding: 4px; border-radius: 1.1rem; background: rgb(var(--inchiostro) / 0.12);
  transition: gap 0.6s ease, padding 0.6s ease, box-shadow 0.6s ease;
}
.pezzo { position: relative; overflow: hidden; border-radius: 0.5rem; background: rgb(var(--carta)); transition: border-radius 0.6s, box-shadow 0.2s, transform 0.15s; }
.pezzo img { position: absolute; max-width: none; object-fit: cover; pointer-events: none; }
.pezzo.selezionato { box-shadow: inset 0 0 0 4px rgb(var(--oro)); transform: scale(0.95); z-index: 1; }
.pezzo.pop { animation: pop 0.25s ease; }
@keyframes pop { 50% { transform: scale(0.92); } }
.puzzle.risolto { gap: 0; padding: 0; box-shadow: 0 0 0 4px rgb(var(--oro)), var(--ombra); }
.puzzle.risolto .pezzo { border-radius: 0; }

/* ---------- memory ---------- */
.memory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; perspective: 900px; }
.carta-mem { position: relative; aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform 0.5s ease; }
.carta-mem.girata { transform: rotateY(180deg); }
.faccia {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.25rem;
  border-radius: 1rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--ombra);
}
.retro {
  background: rgb(var(--rosso)); color: rgb(var(--oro)); font-family: Fraunces, serif; font-weight: 900; font-size: 2.4rem;
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.06) 0 8px, transparent 8px 16px);
  border: 3px solid rgb(var(--oro) / 0.6);
}
.fronte { background: rgb(var(--carta)); transform: rotateY(180deg); border: 3px solid rgb(var(--inchiostro) / 0.08); }
.fronte .emoji { font-size: 2.6rem; line-height: 1; }
.fronte small { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; }
.carta-mem.trovata .fronte { border-color: rgb(var(--oro)); animation: trovata 0.5s ease; }
@keyframes trovata { 50% { transform: rotateY(180deg) scale(1.08); } }

/* ---------- biglietto / voucher ---------- */
.biglietto { position: relative; background: rgb(var(--carta)); border-radius: 1.4rem; box-shadow: var(--ombra); border: 2px solid rgb(var(--rosso)); overflow: hidden; }
.biglietto-testa { display: flex; justify-content: space-between; padding: 0.9rem 1.2rem; background: rgb(var(--rosso)); color: rgb(var(--oro)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8rem; }
.biglietto-corpo { padding: 1.1rem 1.2rem 1.2rem; }
.biglietto .importo { font-family: Fraunces, serif; font-weight: 900; font-size: 3.4rem; line-height: 1.05; color: rgb(var(--rosso)); margin: 0.6rem 0 0.4rem; }
.biglietto-piede {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1.2rem 1rem; border-top: 3px dashed rgb(var(--oro) / 0.7);
}
.biglietto-piede::before, .biglietto-piede::after {
  content: ''; position: absolute; top: -14px; width: 26px; height: 26px; border-radius: 50%;
  background: rgb(var(--crema)); border: 2px solid rgb(var(--rosso));
}
.biglietto-piede::before { left: -15px; }
.biglietto-piede::after { right: -15px; }
.biglietto-piede .calligrafia { font-size: 1.3rem; text-align: right; }
.biglietto.annullato { filter: grayscale(0.85); opacity: 0.75; }
.biglietto.annullato::after {
  content: 'ANNULLATO'; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg);
  font-family: Fraunces, serif; font-weight: 900; font-size: 2.2rem; color: rgb(var(--rosso));
  border: 4px solid rgb(var(--rosso)); padding: 0.2rem 1rem; border-radius: 0.5rem; background: rgb(var(--carta) / 0.85);
}
.entrata-biglietto { animation: biglietto 0.9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes biglietto { from { opacity: 0; transform: translateY(40px) rotate(-4deg) scale(0.9); } to { opacity: 1; transform: none; } }

/* ---------- portafoglio ---------- */
.saldo-card {
  border-radius: 1.5rem; padding: 1.3rem 1.4rem; color: #fff; box-shadow: var(--ombra);
  background: linear-gradient(135deg, rgb(var(--petrolio)), rgb(var(--petrolio) / 0.82)), rgb(var(--petrolio));
  position: relative; overflow: hidden;
}
.saldo-card::after { content: '✈︎'; position: absolute; right: -0.5rem; bottom: -1.6rem; font-size: 7rem; opacity: 0.12; transform: rotate(-20deg); }
.saldo-numero { font-family: Fraunces, serif; font-weight: 900; font-size: 3.2rem; line-height: 1.05; margin-top: 0.2rem; }

.riga-buono {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; min-width: 0;
  padding: 0.9rem 1.1rem; border-radius: 1.1rem; background: rgb(var(--carta));
  box-shadow: 0 2px 0 rgb(var(--inchiostro) / 0.06); border: 1px solid rgb(var(--inchiostro) / 0.08);
  transition: transform 0.12s;
}
.riga-buono:active { transform: scale(0.98); }
.riga-buono.annullato { opacity: 0.55; }
.riga-buono.annullato .importo-riga { text-decoration: line-through; }
.chip { display: inline-block; margin-top: 0.2rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgb(var(--oro) / 0.18); color: rgb(var(--inchiostro) / 0.75); }
.chip-ok { background: rgb(var(--petrolio) / 0.15); color: rgb(var(--petrolio)); }
.chip-annullato { background: rgb(var(--rosso) / 0.12); color: rgb(var(--rosso)); }
.chip-rapido { padding: 0.5rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; background: rgb(var(--carta)); border: 2px solid rgb(var(--inchiostro) / 0.12); }
.chip-rapido:active { background: rgb(var(--oro) / 0.2); }

.menu-fondo { display: grid; border-radius: 1.25rem; overflow: hidden; background: rgb(var(--carta)); border: 1px solid rgb(var(--inchiostro) / 0.08); }
.menu-fondo button { text-align: left; padding: 0.95rem 1.1rem; font-weight: 500; border-bottom: 1px solid rgb(var(--inchiostro) / 0.07); }
.menu-fondo button:last-child { border-bottom: 0; }
.menu-fondo button:active { background: rgb(var(--oro) / 0.12); }

/* anteprima WhatsApp (tutorial) */
.wa-anteprima { background: #e5ddd5; border-radius: 1.1rem; padding: 0.9rem; background-image: radial-gradient(rgb(0 0 0 / 0.04) 1px, transparent 1px); background-size: 14px 14px; }
.wa-bolla { position: relative; margin-left: auto; max-width: 88%; background: #d9fdd3; color: #111; border-radius: 0.8rem 0 0.8rem 0.8rem; padding: 0.6rem 0.75rem 1.3rem; font-size: 0.9rem; line-height: 1.35; box-shadow: 0 1px 1px rgb(0 0 0 / 0.1); }
.wa-ora { position: absolute; right: 0.6rem; bottom: 0.3rem; font-size: 0.65rem; color: #53bdeb; }

/* ---------- toast e modale ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 60;
  transform: translate(-50%, 150%); opacity: 0; max-width: calc(100% - 2rem); width: max-content;
  background: rgb(var(--inchiostro)); color: #fff; padding: 0.8rem 1.2rem; border-radius: 999px;
  font-weight: 500; text-align: center; box-shadow: var(--ombra); transition: all 0.35s cubic-bezier(.2, 1.2, .4, 1);
  pointer-events: none;
}
#toast.visibile { transform: translate(-50%, 0); opacity: 1; }

.modal-sfondo {
  position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; justify-items: center;
  background: rgb(var(--inchiostro) / 0); transition: background 0.25s; padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}
.modal-box {
  width: 100%; max-width: 28rem; max-height: 88svh; overflow-y: auto;
  background: rgb(var(--crema)); border-radius: 1.5rem; padding: 1.4rem;
  transform: translateY(30px); opacity: 0; transition: all 0.3s cubic-bezier(.2, 1.2, .4, 1);
}
.modal-sfondo.aperto { background: rgb(var(--inchiostro) / 0.45); }
.modal-sfondo.aperto .modal-box { transform: none; opacity: 1; }
@media (min-width: 640px) { .modal-sfondo { align-items: center; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}