/* Caratteri: Pixelify Sans (testo, pixel ma fatto per leggere, pesi 400-700) e Silkscreen regular
   (marchio, numeri grandi, bottoni). Licenza SIL OFL 1.1, font/LICENZA-OFL.txt, da Fontsource. */
@font-face { font-family: 'Pixelify Sans'; src: url('../font/pixelify-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('../font/silkscreen-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* Testo: Pixelify per le lettere, Silkscreen per cifre e segni (nel Pixelify il 5 sembra una S). */
@font-face { font-family: 'Testo'; src: url('../font/silkscreen-latin-400-normal.woff2') format('woff2'); font-weight: 400 700; unicode-range: U+0030-0039, U+002B; font-display: swap; }
@font-face { font-family: 'Testo'; src: url('../font/pixelify-sans-latin-wght-normal.woff2') format('woff2'); font-weight: 400 700; unicode-range: U+0000-002A, U+002C-002F, U+003A-FFFF; font-display: swap; }

/* Carta di Roma: crema, inchiostro, cocciopesto. Contrasto da stampa, mai grigio su grigio. */
:root {
  --carta: #f3e7c9;
  --carta-2: #e9dab2;
  --scheda: #fbf4e0;
  --inchiostro: #2a1f16;
  --inchiostro-2: #46352a;
  --matita: #a48d66;
  --rosso: #c43a28;
  --rosso-scuro: #8a2414;
  /* Fasce: peperino, pino, fontanella, cocciopesto, oro. -t: la stessa tinta scura per il testo su carta. */
  --f0: #a9a397; --f0-t: #5f5a50;
  --f1: #6e9a5a; --f1-t: #33602a;
  --f2: #5b8fb8; --f2-t: #255a86;
  --f3: #d0663f; --f3-t: #9c3a17;
  --f4: #e8b33a; --f4-t: #835d00;
  --font-testo: 'Testo', 'Pixelify Sans', ui-sans-serif, system-ui, sans-serif;
  --font-titolo: 'Silkscreen', 'Pixelify Sans', ui-monospace, monospace;
  --esce: cubic-bezier(0.22, 1, 0.36, 1);
  --deciso: cubic-bezier(0.16, 1, 0.3, 1);
  --filo: 0 0 0 1px var(--inchiostro);
  --ombra: 0 0 0 1px var(--inchiostro), 0 3px 0 1px var(--inchiostro);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; height: 100dvh; overscroll-behavior: none; }

body {
  background-color: var(--carta);
  /* Grana della carta: puntini radi, a pixel. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect x='3' y='5' width='1' height='1' fill='%23cdb98e'/%3E%3Crect x='17' y='11' width='1' height='1' fill='%23d9c79f'/%3E%3Crect x='9' y='19' width='1' height='1' fill='%23cdb98e'/%3E%3Crect x='21' y='2' width='1' height='1' fill='%23e0cfa8'/%3E%3C/svg%3E");
  color: var(--inchiostro);
  font-family: var(--font-testo);
  font-size: 18px;
  line-height: 1.35;
  font-synthesis-weight: none;
  /* La legatura fi del Pixelify esce rotta ("Confini", "fiume"): lettere sempre separate. */
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'clig' 0;
}
button, input { font-variant-ligatures: none; font-feature-settings: 'liga' 0, 'clig' 0; }
/* Etichette in maiuscolo: Pixelify a peso pieno, leggibile anche piccola. */
.numero, .biglietto-etichetta, .c-tappa, .etichetta, .risposte .fascia h3, .cassa small {
  font-family: var(--font-testo) !important; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
}

button { font-family: var(--font-titolo); cursor: pointer; color: inherit; }
button:focus-visible { outline: 2px solid var(--rosso); outline-offset: 3px; }

.gioco {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom);
}

/* La mappa: carta incorniciata a doppio filo. */
.mappa {
  position: relative;
  flex: 1;
  min-height: 260px;
  margin: 8px 0;
  background: #c4c4aa;
  box-shadow: 0 0 0 1px var(--inchiostro), 0 0 0 4px var(--scheda), 0 0 0 5px var(--inchiostro);
  overflow: hidden;
  touch-action: none;
}
.mappa canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: grab; }
.zoom { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.zoom button {
  width: 36px; height: 36px; border: none;
  background: var(--scheda); font-size: 18px; line-height: 1;
  box-shadow: var(--ombra);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
.zoom button:active { transform: translateY(2px); box-shadow: var(--filo); }
.attribuzione { position: absolute; right: 0; top: 0; margin: 0; padding: 2px 7px; background: var(--scheda); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; color: var(--inchiostro-2); box-shadow: var(--filo); }

/* Il foglio di bordo: testata, tappe, la pagina del momento. */
.foglio { display: contents; }
.testata { order: -2; display: flex; justify-content: space-between; align-items: center; padding: 10px 0 4px; }
.marchio h1 { font-family: var(--font-titolo); font-weight: 400; font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; line-height: 1; }
.data { margin: 5px 0 0; font-size: 15px; color: var(--inchiostro-2); }
.cassa { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.cassa span { font-family: var(--font-titolo); font-size: 30px; display: inline-block; }
.cassa span.scatto { animation: scatto 360ms var(--deciso); }
.cassa small { font-size: 12px; color: var(--inchiostro-2); }
.testata { gap: 12px; }
.marchio { margin-right: auto; }
.suono {
  width: 36px; height: 36px; display: grid; place-items: center; border: none;
  background: var(--scheda); box-shadow: var(--ombra); color: var(--inchiostro);
  transition: transform 90ms steps(2), box-shadow 90ms steps(2);
}
.suono:active { transform: translateY(2px); box-shadow: var(--filo); }
.suono .croce { display: none; }
.suono[aria-pressed='false'] .onde { display: none; }
.suono[aria-pressed='false'] .croce { display: block; }
.suono[aria-pressed='false'] { color: var(--rosso); }

.tappe { order: -1; list-style: none; display: flex; gap: 6px; margin: 4px 0 2px; padding: 0; }
.tappe li {
  flex: 1; height: 10px;
  box-shadow: var(--filo);
  background: transparent;
  transition: background-color 300ms var(--esce);
}
.tappe li.ora { animation: lampeggia 840ms steps(1) infinite; }
.tappe li.fatta { animation: riempi 420ms var(--deciso); }
.tappe li.buca { background: repeating-linear-gradient(135deg, var(--rosso) 0 3px, var(--scheda) 3px 6px); }

.pagina { padding: 10px 0 12px; }
.pagina[hidden] { display: none; }
.pagina.entra > * { animation: entra 420ms var(--esce) both; }
.pagina.entra > *:nth-child(2) { animation-delay: 50ms; }
.pagina.entra > *:nth-child(3) { animation-delay: 100ms; }
.pagina.entra > *:nth-child(4) { animation-delay: 150ms; }
.pagina.entra > *:nth-child(5) { animation-delay: 200ms; }
.pagina.entra > *:nth-child(6) { animation-delay: 250ms; }
.pagina.entra > *:nth-child(7) { animation-delay: 300ms; }

.riga-tappa { display: flex; justify-content: space-between; align-items: baseline; }
.numero { margin: 0; font-size: 13px; color: var(--rosso); }
.tempo { margin: 0; font-family: var(--font-titolo); font-size: 22px; line-height: 1; min-width: 2ch; text-align: right; }
.tempo.poco { color: var(--rosso); animation: lampeggia-testo 500ms steps(1) infinite; }
.clessidra {
  height: 8px; margin: 8px 0 12px;
  box-shadow: var(--filo);
  background: var(--scheda);
  overflow: hidden;
}
.clessidra i {
  display: block; height: 100%;
  background: var(--f1);
  transform-origin: left;
  transition: transform 260ms linear, background-color 400ms;
  /* Tacche ogni 5 secondi: la barra si consuma a scatti visibili. */
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 12 - 2px), transparent 0 calc(100% / 12));
  mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 12 - 2px), transparent 0 calc(100% / 12));
}
.clessidra.meta i { background: var(--f4); }
.clessidra.poco i { background: var(--rosso); }

.testo { font-family: var(--font-testo); font-weight: 500; font-size: 28px; line-height: 1.15; margin: 0 0 14px; text-wrap: balance; }
.testo.piccolo { font-size: 19px; font-weight: 500; color: var(--inchiostro-2); margin-bottom: 12px; }

/* Il biglietto: la zona scelta, da timbrare. */
.biglietto {
  position: relative;
  background: var(--scheda);
  box-shadow: var(--filo);
  padding: 10px 14px 12px;
  margin: 0 0 14px;
}
.biglietto::before, .biglietto::after {
  /* Fori della perforazione sui lati, come un biglietto vero. */
  content: ''; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  background: var(--carta); box-shadow: var(--filo); border-radius: 50%;
}
.biglietto::before { left: -6px; }
.biglietto::after { right: -6px; }
.biglietto-etichetta { margin: 0 0 4px; font-size: 12px; color: var(--inchiostro-2); }
.scelta { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.15; min-height: 26px; color: #8a7556; }
.scelta.qui { color: var(--inchiostro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; animation: battuta 220ms var(--deciso); }
.biglietto.timbrato { animation: punzona 260ms var(--deciso); }

.primario {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 12px;
  border: none;
  background: var(--rosso);
  color: var(--scheda);
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px var(--inchiostro), 0 4px 0 1px var(--inchiostro);
  transition: transform 90ms steps(2), box-shadow 90ms steps(2), background-color 160ms;
}
.primario:hover:not(:disabled) { background: #d4452f; }
.primario:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 1px var(--inchiostro), 0 1px 0 1px var(--inchiostro); }
.primario:disabled { background: var(--scheda); color: var(--matita); box-shadow: 0 0 0 1px var(--matita); cursor: default; }
.tasti { display: none; margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--inchiostro-2); }
kbd { font-family: var(--font-testo); font-weight: 600; font-size: 12px; padding: 1px 5px; background: var(--scheda); box-shadow: var(--filo); }

/* Timbro: fascia scritta dentro un doppio filo del suo colore, un po' storta. */
.timbro {
  display: inline-block;
  padding: 3px 10px 2px;
  font-family: var(--font-testo);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colore-t, var(--inchiostro));
  box-shadow: 0 0 0 2px currentColor, 0 0 0 4px var(--scheda), 0 0 0 5px currentColor;
  transform: rotate(-3deg);
  white-space: nowrap;
}

/* Cartellino dell'esito sopra la mappa: il biglietto timbrato. */
.cartellino {
  position: absolute; left: 50%; bottom: 18px;
  min-width: 240px; max-width: calc(100% - 32px);
  padding: 12px 22px 14px;
  text-align: center;
  background: var(--scheda);
  box-shadow: 0 0 0 1px var(--inchiostro), 0 0 0 4px var(--scheda), 0 0 0 5px var(--inchiostro), 0 8px 0 5px rgba(42, 31, 22, 0.18);
  transform: translateX(-50%);
  pointer-events: none;
}
.cartellino[hidden] { display: none; }
.cartellino.entra { animation: cartellino 460ms var(--esce) both; }
/* Attesa: il nome c'e, la fascia no. Tre puntini che pulsano finche il sampietrino non tocca terra. */
.c-attesa { display: none; gap: 8px; height: 30px; align-items: center; }
.c-attesa i { width: 7px; height: 7px; background: var(--inchiostro); animation: puntino 900ms steps(1) infinite; }
.c-attesa i:nth-child(2) { animation-delay: 150ms; }
.c-attesa i:nth-child(3) { animation-delay: 300ms; }
.cartellino.attesa .c-attesa { display: flex; }
.cartellino.attesa .timbro, .cartellino.attesa .c-punti { display: none; }
.cartellino.attesa .c-zona { animation: battuta 300ms var(--deciso) 150ms both; }
.cartellino.rivelato .timbro { animation: timbra 340ms var(--deciso) both; }
.cartellino.rivelato .c-punti { animation: entra 300ms var(--esce) 220ms both; }
.cartellino.rivelato { animation: sobbalzo 300ms var(--deciso) 120ms; }
.cartellino.buca.rivelato { animation: scuoti 360ms steps(6) 260ms; }
.c-tappa { margin: 0; font-size: 12px; color: var(--rosso); }
.c-zona { margin: 4px 0 10px; font-family: var(--font-titolo); font-size: 26px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; }
.c-riga { display: flex; align-items: center; justify-content: center; gap: 18px; }
.c-punti { font-family: var(--font-titolo); font-size: 22px; color: var(--colore-t, var(--inchiostro)); }

/* La faccia di Themino a pixel: reagisce all'esito. */
.faccia { image-rendering: pixelated; display: block; }
.c-faccia { position: absolute; left: -40px; top: -46px; width: 112px; height: 112px; filter: drop-shadow(0 3px 0 rgba(42, 31, 22, 0.18)); }
.cartellino.attesa .c-faccia { animation: dondola 700ms steps(2) infinite; }
.faccia.reagisce { animation: reazione 420ms var(--deciso); }
.copertina-faccia { width: 112px; height: 112px; margin: -14px auto 0; }
.fine-testa { display: flex; align-items: center; gap: 14px; }
.fine-faccia { width: 112px; height: 112px; flex: none; }
@keyframes dondola { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes reazione { 0% { transform: scale(0.7) rotate(-8deg); } 60% { transform: scale(1.12) rotate(3deg); } 100% { transform: none; } }

/* Esito nel foglio: perche e giusta, e avanti. */
.esito-scheda { background: var(--scheda); box-shadow: var(--filo); padding: 12px 14px; margin: 0 0 12px; }
.esito-zona { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: 22px; font-weight: 600; text-transform: uppercase; }
.esito-zona .timbro { font-size: 14px; }
.esito-perche { margin: 0; font-size: 17px; line-height: 1.4; }
.esito-perche b { font-weight: 650; }
.esito-perche:empty { display: none; }
.esito-nota { margin: 0 0 14px; font-size: 16px; line-height: 1.4; color: var(--inchiostro-2); }
.esito-nota:empty { display: none; }
.esito-contesto { margin: 0 0 14px; padding: 10px 12px; background: var(--scheda); box-shadow: inset 3px 0 0 var(--rosso), var(--filo); font-size: 16px; line-height: 1.4; }
.esito-contesto[hidden] { display: none; }
.esito-contesto small { display: block; margin-bottom: 3px; font-size: 11px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rosso); }

/* Diario: totale, le cinque tappe coi timbri, le risposte della tappa aperta. */
.grande { font-family: var(--font-titolo); font-size: 56px; line-height: 1; margin: 6px 0 2px; }
.grande small { font-family: var(--font-testo); font-size: 20px; font-weight: 500; color: var(--inchiostro-2); margin-left: 6px; }
.fine-frase { margin: 0 0 12px; font-size: 17px; font-weight: 500; }
.righe { list-style: none; margin: 0 0 12px; padding: 0; box-shadow: var(--filo); background: var(--scheda); }
.righe li + li { border-top: 1px dashed var(--matita); }
.righe button {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 10px; align-items: center;
  width: 100%; padding: 9px 12px; border: none; background: transparent; text-align: left;
  font-family: var(--font-testo); font-size: 16px;
  transition: background-color 160ms;
}
.righe button:hover { background: rgba(196, 58, 40, 0.06); }
.righe button[aria-expanded='true'] { background: rgba(42, 31, 22, 0.06); }
.righe .n { font-family: var(--font-titolo); font-size: 14px; grid-row: span 2; }
.righe .d { color: var(--inchiostro-2); font-size: 14px; line-height: 1.25; }
.righe .z { font-size: 18px; font-weight: 600; display: flex; gap: 12px; align-items: center; margin-top: 3px; }
.righe .z .timbro { font-size: 12px; padding: 2px 7px 1px; }
.righe .p { font-family: var(--font-titolo); font-size: 15px; grid-row: span 2; color: var(--colore-t, var(--inchiostro)); }
.risposte { margin: 0 0 14px; }
.risposte:empty { display: none; }
.risposte .fascia { margin: 0 0 8px; animation: entra 360ms var(--esce) both; }
.risposte .fascia h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 3px; font-size: 13px; color: var(--colore-t); }
.risposte .fascia h3 i { width: 12px; height: 12px; background: var(--colore); box-shadow: var(--filo); }
.risposte .fascia h3 b { margin-left: auto; }
.risposte .fascia p { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.risposte .tua { color: var(--rosso); text-decoration: underline; text-underline-offset: 3px; }
.risposte .luoghi { color: var(--inchiostro-2); font-weight: 400; animation: entra 220ms var(--esce); }
.risposte .luoghi[hidden] { display: none; }
.risposte .zona-ris { font: inherit; font-weight: 500; color: inherit; background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline dotted var(--matita); text-underline-offset: 4px; }
.risposte span.zona-ris { text-decoration: none; cursor: default; }
.risposte .zona-ris[aria-expanded='true'] { text-decoration-style: solid; }
.risposte .zona-ris.tua { color: var(--rosso); text-decoration: underline; text-decoration-color: var(--rosso); }
.nota { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--inchiostro-2); }

/* Nuovo timbro sul cartellino. */
.c-nuovo { margin: 0 0 8px; font-size: 12px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f2-t); }
.c-nuovo[hidden] { display: none; }
.cartellino.rivelato .c-nuovo { animation: timbra 340ms var(--deciso) 420ms both; }

/* Serie di giorni nel diario. */
.serie { margin: -4px 0 12px; font-size: 16px; font-weight: 600; color: var(--rosso); }
.serie:empty { display: none; }

/* Tasti secondari: carta con l'ombra a pixel. */
.secondario {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; padding: 10px 12px; background: var(--scheda); color: var(--inchiostro);
  font-family: var(--font-testo); font-weight: 650; font-size: 15px; letter-spacing: 0.04em;
  box-shadow: var(--ombra); transition: transform 90ms steps(2), box-shadow 90ms steps(2), background-color 160ms;
}
.secondario:hover { background: #fffaf0; }
.secondario:active { transform: translateY(2px); box-shadow: var(--filo); }
.secondario.largo { display: flex; width: 100%; margin-top: 12px; }
.secondario[hidden] { display: none; }
.primario.piccolo { min-height: 46px; font-size: 15px; margin-top: 10px; }

/* Testata: pallino del taccuino, giorno arretrato. */
.suono { position: relative; }
.segno { position: absolute; top: -5px; right: -5px; width: 11px; height: 11px; background: var(--rosso); box-shadow: 0 0 0 2px var(--scheda), 0 0 0 3px var(--inchiostro); animation: pulsa 1.1s steps(2) infinite; }
.segno[hidden] { display: none; }
.arretrato {
  margin-top: 5px; border: none; padding: 3px 8px 2px; background: var(--rosso); color: var(--scheda);
  font-family: var(--font-testo); font-weight: 650; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: var(--filo); animation: entra 300ms var(--esce);
}
.arretrato[hidden] { display: none; }
.copertina-arretrato { margin: 8px 0 0; font-size: 14px; font-weight: 650; color: var(--rosso); }
.copertina-arretrato[hidden] { display: none; }
body.giorno-arretrato .tappe li.ora { animation-duration: 1.2s; }

/* Scorciatoie a fine diario. */
.scorciatoie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 0; }
.scorciatoie .secondario { flex-direction: column; gap: 2px; padding: 8px 4px 7px; font-size: 13px; }
.scorciatoie [data-icona] { width: 34px; height: 34px; transition: transform 220ms var(--esce); }
.scorciatoie .secondario:hover [data-icona] { transform: rotate(-6deg) scale(1.1); }
[data-icona] svg, .o-icona svg, .souv-icona svg, .q-icona svg, .ss-icona svg, .scartato-icona svg { display: block; width: 100%; height: 100%; }

/* Taccuino: una scrivania di legno con sopra gli oggetti del viaggio. */
.taccuino {
  width: min(94vw, 540px); max-height: 92dvh; overflow: auto; text-align: center;
  color: var(--scheda);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' shape-rendering='crispEdges'%3E%3Crect x='4' y='9' width='6' height='1' fill='%235a3820'/%3E%3Crect x='22' y='27' width='9' height='1' fill='%235a3820'/%3E%3Crect x='30' y='5' width='4' height='1' fill='%23845535'/%3E%3Crect x='12' y='33' width='3' height='1' fill='%23845535'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, #74492a 0 46px, #4f301b 46px 48px);
  box-shadow: 0 0 0 1px var(--inchiostro), 0 0 0 5px #8a5a33, 0 0 0 6px var(--inchiostro), 0 10px 0 6px rgba(42, 31, 22, 0.25);
}
.taccuino .etichetta { color: #f5d77a; text-shadow: 0 2px 0 #3b2414; }
.taccuino .titolo { color: var(--scheda); text-shadow: 0 3px 0 #3b2414; margin: 8px 0 18px; }
.scrivania { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; margin: 0 4px 22px; }
.oggetto {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 14px 8px 12px; border: none; background: var(--scheda); color: var(--inchiostro);
  font-family: var(--font-testo); text-align: center;
  box-shadow: 0 0 0 1px var(--inchiostro), 0 5px 0 1px rgba(30, 16, 6, 0.55);
  transform: rotate(var(--r, 0deg));
  transition: transform 240ms var(--esce), box-shadow 240ms var(--esce);
  animation: posa 520ms var(--esce) both;
}
.oggetto:nth-child(2) { animation-delay: 70ms; }
.oggetto:nth-child(3) { animation-delay: 140ms; }
.oggetto:nth-child(4) { animation-delay: 210ms; }
.oggetto:nth-child(5) { animation-delay: 280ms; }
.oggetto:hover:not(:disabled) { transform: translateY(-6px) rotate(calc(var(--r, 0deg) * -0.5)); box-shadow: 0 0 0 1px var(--inchiostro), 0 11px 0 1px rgba(30, 16, 6, 0.45); }
.oggetto:active:not(:disabled) { transform: translateY(1px) rotate(var(--r, 0deg)); box-shadow: 0 0 0 1px var(--inchiostro), 0 2px 0 1px rgba(30, 16, 6, 0.55); }
.o-icona { width: 76px; height: 76px; transition: transform 280ms var(--esce); filter: drop-shadow(0 4px 0 rgba(42, 31, 22, 0.22)); }
.oggetto:hover:not(:disabled) .o-icona { transform: rotate(-7deg) scale(1.08); }
.oggetto b { font-family: var(--font-titolo); font-weight: 400; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; margin-top: 4px; }
.oggetto small { font-size: 14px; line-height: 1.2; color: var(--inchiostro-2); min-height: 1.2em; }
.o-diario { --r: -2.2deg; }
.o-passaporto { --r: 1.6deg; }
.o-souvenir { --r: 1.8deg; }
.o-regole { --r: -1.4deg; background: #fff8ea; }
.o-classifica { --r: 1.2deg; }
.o-account { --r: -0.8deg; }
.o-account .o-icona { image-rendering: auto; object-fit: cover; }
.o-account .o-icona.faccia { image-rendering: pixelated; }
.oggetto:nth-child(6) { animation-delay: 350ms; }
.bollo {
  position: absolute; top: -9px; right: -9px; min-width: 28px; height: 28px; padding: 0 6px;
  display: grid; place-items: center; background: var(--rosso); color: var(--scheda);
  font-style: normal; font-family: var(--font-titolo); font-size: 14px;
  box-shadow: 0 0 0 1px var(--inchiostro), 0 3px 0 1px var(--inchiostro); animation: pulsa 1.1s steps(2) infinite;
}
.bollo[hidden] { display: none; }

/* Fogli del taccuino: diario di bordo, passaporto, souvenir. */
.quaderno { width: min(94vw, 600px); max-height: 92dvh; overflow: auto; padding: 18px 20px 20px; overscroll-behavior: contain; }
.q-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.q-testa .etichetta { margin-left: auto; }
.indietro { border: none; background: none; padding: 4px 0; font-family: var(--font-testo); font-weight: 650; font-size: 15px; color: var(--inchiostro-2); }
.indietro:hover { color: var(--rosso); }
.indietro[hidden] { display: none; }
.q-sotto { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; font-size: 13px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rosso); }
.q-sotto::after { content: ''; flex: 1; border-top: 1px dashed var(--matita); }
.quaderno .primario[data-chiudi] { margin-top: 18px; }
.freccia { width: 40px; height: 40px; flex: none; border: none; background: var(--scheda); box-shadow: var(--ombra); font-size: 22px; line-height: 1; transition: transform 90ms steps(2), box-shadow 90ms steps(2); }
.freccia:active:not(:disabled) { transform: translateY(2px); box-shadow: var(--filo); }
.freccia:disabled { opacity: 0.3; cursor: default; }

/* Diario di bordo. */
.db-numeri { display: grid; grid-template-columns: repeat(4, 1fr); margin: 6px 0 0; box-shadow: var(--filo); background: var(--carta); }
.db-numeri div { padding: 8px 4px 7px; text-align: center; }
.db-numeri div + div { box-shadow: -1px 0 0 var(--inchiostro); }
.db-numeri div:first-child { background: linear-gradient(180deg, rgba(232, 179, 58, 0.35), rgba(232, 179, 58, 0.1)); }
.db-numeri dt { font-size: 11px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-2); }
.db-numeri dd { margin: 2px 0 0; font-family: var(--font-titolo); font-size: 28px; line-height: 1; }
.cal-testa { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 10px; }
.cal-testa p { margin: 0; font-family: var(--font-titolo); font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
.cal-sett, .calendario { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal-sett li { text-align: center; font-size: 12px; font-weight: 650; color: var(--inchiostro-2); padding-bottom: 5px; }
.calendario li { aspect-ratio: 1; animation: entra 320ms var(--esce) both; }
.giorno {
  position: relative; width: 100%; height: 100%; padding: 0; border: none; overflow: hidden;
  display: grid; place-items: center; background: var(--carta-2); color: var(--inchiostro);
  font-family: var(--font-testo); box-shadow: inset 0 0 0 1px rgba(42, 31, 22, 0.22);
  transition: transform 180ms var(--esce), box-shadow 180ms var(--esce);
}
.giorno:disabled { background: transparent; color: var(--matita); box-shadow: inset 0 0 0 1px rgba(42, 31, 22, 0.1); cursor: default; }
.giorno:not(:disabled):hover { transform: translateY(-2px); }
.g-num { position: absolute; top: 3px; left: 4px; font-family: var(--font-titolo); font-size: 11px; line-height: 1; }
.giorno.fatto { background: var(--colore); box-shadow: var(--filo), inset 0 -4px 0 rgba(0, 0, 0, 0.16); }
.giorno.fatto .g-num { color: var(--inchiostro); }
.g-faccia { width: 74%; height: 74%; margin-top: 6px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(42, 31, 22, 0.25)); }
.g-tot { position: absolute; right: 3px; bottom: 2px; font-family: var(--font-titolo); font-weight: 400; font-size: 12px; line-height: 1; color: var(--scheda); text-shadow: 1px 0 0 var(--inchiostro), -1px 0 0 var(--inchiostro), 0 1px 0 var(--inchiostro), 0 -1px 0 var(--inchiostro); }
.giorno.aperto { background: var(--scheda); box-shadow: var(--filo); }
.g-stato { margin-top: 10px; font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rosso); }
.giorno.aperto .g-stato { animation: lampeggia-testo 1.4s steps(1) infinite; }
.giorno.iniziato { background: repeating-linear-gradient(135deg, var(--scheda) 0 4px, var(--carta-2) 4px 8px); box-shadow: var(--filo); }
.giorno.iniziato .g-stato { font-size: 18px; margin-top: 4px; color: var(--inchiostro); }
.giorno.recupero::after { content: ''; position: absolute; top: 0; right: 0; border: 7px solid transparent; border-top-color: var(--scheda); border-right-color: var(--scheda); }
.giorno.oggi { box-shadow: 0 0 0 2px var(--rosso), inset 0 -4px 0 rgba(0, 0, 0, 0.12); }
.giorno.oggi .g-num { color: var(--rosso); }
.giorno.scelto { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--inchiostro), 0 5px 0 0 var(--inchiostro); }
.giorno.scelto.oggi { box-shadow: 0 0 0 2px var(--rosso), 0 5px 0 0 var(--rosso); }
.cal-scheda { margin: 14px 0 4px; padding: 12px 14px; background: var(--carta); box-shadow: var(--filo), inset 3px 0 0 var(--rosso); animation: entra 280ms var(--esce); }
.cal-scheda[hidden] { display: none; }
.cs-data { margin: 0 0 4px; font-size: 13px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rosso); }
.cs-riga { display: flex; align-items: center; gap: 14px; }
.cs-tot { font-family: var(--font-titolo); font-size: 36px; line-height: 1; }
.cs-tot small { font-family: var(--font-testo); font-size: 16px; color: var(--inchiostro-2); margin-left: 3px; }
.cs-riga .timbro { animation: timbra 340ms var(--deciso) both; }
.cs-tappe { list-style: none; display: flex; gap: 5px; margin: 10px 0 0; padding: 0; }
.cs-tappe li { flex: 1; max-width: 46px; height: 14px; background: var(--colore); box-shadow: var(--filo); }
.cs-tappe li.buca { background: repeating-linear-gradient(135deg, var(--rosso) 0 3px, var(--scheda) 3px 6px); }
.cs-testo { margin: 8px 0 0; font-size: 15px; line-height: 1.35; color: var(--inchiostro-2); }
.legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; padding: 0; }
.legenda li { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--inchiostro-2); }
.legenda li::before { content: ''; width: 12px; height: 12px; background: var(--colore); box-shadow: var(--filo); }
.barre { list-style: none; margin: 0; padding: 0; }
.barre li { display: grid; grid-template-columns: 9.6em 1fr 2.4em; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; font-weight: 600; animation: entra 320ms var(--esce) both; }
.b-barra { height: 14px; background: var(--carta-2); box-shadow: var(--filo); }
.b-barra i { display: block; height: 100%; width: calc(var(--quota) * 100%); background: var(--colore); transform-origin: left; animation: cresce 700ms var(--esce) both; animation-delay: inherit; }
.barre li.buca .b-barra i { background: repeating-linear-gradient(135deg, var(--rosso) 0 3px, #e9a194 3px 6px); }
.b-n { font-family: var(--font-titolo); font-weight: 400; font-size: 14px; text-align: right; }

/* Passaporto dei quartieri, sfogliato per municipio. */
.pass-conto { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 4px 0 6px; font-size: 18px; }
.pass-conto b { font-family: var(--font-titolo); font-weight: 400; font-size: 44px; line-height: 1; }
.pass-nuovi { --colore-t: var(--f2-t); margin-left: auto; font-size: 13px; animation: timbra 360ms var(--deciso) 200ms both; }
.pass-nuovi[hidden] { display: none; }
.pass-barra { height: 10px; box-shadow: var(--filo); background: var(--carta); margin-bottom: 8px; }
.pass-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--f1), var(--f2), var(--f3), var(--f4)); transform-origin: left; transition: transform 700ms var(--esce); }
.mun { margin: 14px 0 10px; padding: 12px; background: var(--carta); box-shadow: var(--filo); }
.mun-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mun-num { margin: 0; font-family: var(--font-titolo); font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; }
.mun-nome { margin: 2px 0 0; font-size: 15px; color: var(--inchiostro-2); }
.mun-conto { margin: 0; font-size: 15px; white-space: nowrap; color: var(--inchiostro-2); }
.mun-conto b { font-family: var(--font-titolo); font-weight: 400; font-size: 28px; color: var(--inchiostro); }
#pass-mappa { width: 100%; height: auto; display: block; background: #ddd0ad; box-shadow: var(--filo); }
#pass-mappa.gira { animation: entra 360ms var(--esce); }
.schede { display: flex; margin: 10px 0 8px; box-shadow: var(--filo); }
.schede button { flex: 1; border: none; padding: 8px 4px; background: var(--scheda); font-family: var(--font-testo); font-weight: 650; font-size: 14px; transition: background-color 160ms; }
.schede button + button { box-shadow: -1px 0 0 var(--inchiostro); }
.schede button b { font-family: var(--font-titolo); font-weight: 400; margin-left: 3px; }
.schede button[aria-selected='true'] { background: var(--inchiostro); color: var(--scheda); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 3px; border: none;
  background: var(--scheda); color: var(--colore-t); box-shadow: 0 0 0 1.5px var(--colore-t);
  font-family: var(--font-testo); font-weight: 650; font-size: 13px; transition: background-color 160ms, transform 160ms var(--esce);
}
.chip i { width: 10px; height: 10px; background: var(--colore); box-shadow: var(--filo); }
.chip b { font-family: var(--font-titolo); font-weight: 400; font-size: 12px; }
.chip[aria-pressed='true'] { background: var(--colore); color: var(--inchiostro); transform: translateY(-2px); }
.chip:disabled { opacity: 0.35; cursor: default; }
.pass-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pass-elenco li { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; padding: 7px 8px; background: var(--scheda); box-shadow: inset 0 0 0 1px rgba(42, 31, 22, 0.18); font-size: 15px; animation: entra 280ms var(--esce) both; }
.pass-elenco .sello { width: 18px; height: 18px; flex: none; box-shadow: inset 0 0 0 1.5px var(--matita); background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(164, 141, 102, 0.3) 3px 5px); }
.pass-elenco li.presa .sello { background: var(--colore); box-shadow: var(--filo); transform: rotate(-6deg); }
.p-nome { flex: 1; font-weight: 500; color: var(--inchiostro-2); }
.presa .p-nome { font-weight: 650; color: var(--inchiostro); }
.p-tag { font-size: 10px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inchiostro-2); }
.p-tag.nuovo { color: var(--scheda); background: var(--f2-t); padding: 1px 5px; }
.p-fascia { flex-basis: 100%; padding-left: 26px; font-size: 12px; font-weight: 650; color: var(--colore-t); }
.pass-elenco .vuoto { grid-column: 1 / -1; display: block; color: var(--inchiostro-2); box-shadow: none; background: none; }
.pagine { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 0; }
.pagine p { margin: 0; font-family: var(--font-titolo); font-size: 15px; letter-spacing: 0.04em; }

/* Scatola dei souvenir. */
.souv-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.souv {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 8px; border: none; background: var(--carta-2); color: var(--inchiostro-2);
  font-family: var(--font-testo); font-weight: 600; font-size: 13px; line-height: 1.15; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(42, 31, 22, 0.2);
  transition: transform 220ms var(--esce), box-shadow 220ms var(--esce); animation: entra 320ms var(--esce) both;
}
.souv-icona { width: 58px; height: 58px; opacity: 0.5; transition: transform 260ms var(--esce); }
.souv.preso { background: var(--scheda); color: var(--inchiostro); box-shadow: var(--ombra); }
.souv.preso .souv-icona { opacity: 1; filter: drop-shadow(0 3px 0 rgba(42, 31, 22, 0.2)); }
.souv:hover { transform: translateY(-4px); }
.souv:hover .souv-icona { transform: rotate(-7deg) scale(1.08); }
.souv[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--rosso), 0 3px 0 2px var(--rosso); }
.souv.nuovo .souv-icona { animation: trema 1.6s steps(1) infinite; }
.souv.nuovo::after { content: '!'; position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--rosso); color: var(--scheda); font-family: var(--font-titolo); font-size: 13px; box-shadow: var(--filo); }
.souv-scheda { display: grid; grid-template-columns: 96px 1fr; gap: 6px 14px; align-items: center; margin: 12px 0 2px; padding: 12px; background: var(--carta); box-shadow: var(--filo); }
.souv-scheda[hidden] { display: none; }
.souv-scheda.entra { animation: entra 300ms var(--esce); }
.ss-icona { width: 96px; height: 96px; animation: spunta 420ms var(--deciso) both; }
.ss-nome { margin: 2px 0 4px; font-family: var(--font-titolo); font-weight: 400; font-size: 20px; line-height: 1.05; text-transform: uppercase; }
.ss-come { margin: 0; font-size: 15px; line-height: 1.35; color: var(--inchiostro-2); }
.souv-scheda .esito-contesto { grid-column: 1 / -1; margin: 6px 0 0; }
.quasi { list-style: none; margin: 0; padding: 0; }
.quasi li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--matita); }
.q-icona { width: 42px; height: 42px; flex: none; opacity: 0.6; }
.q-testo { flex: 1; display: flex; flex-direction: column; }
.q-testo b { font-size: 15px; font-weight: 650; }
.q-testo span { font-size: 13px; color: var(--inchiostro-2); }
.q-barra { height: 8px; margin-top: 5px; background: var(--carta-2); box-shadow: var(--filo); }
.q-barra i { display: block; height: 100%; background: var(--f4); transform-origin: left; animation: cresce 700ms var(--esce) both; }
.q-conto { font-family: var(--font-titolo); font-size: 13px; }
.quasi .vuoto { justify-content: center; color: var(--inchiostro-2); }

/* Pacchetto da scartare. */
.scarta { width: min(92vw, 420px); text-align: center; overflow: hidden; }
.pacco { display: block; width: 168px; height: 168px; margin: 18px auto 4px; padding: 0; border: none; background: none; animation: trema 1.5s steps(1) infinite; filter: drop-shadow(0 6px 0 rgba(42, 31, 22, 0.2)); }
.pacco span { display: block; width: 100%; height: 100%; transition: transform 160ms var(--esce); }
.pacco:hover span { transform: scale(1.06) rotate(-3deg); }
.pacco.apre { animation: scoppia 380ms var(--deciso) forwards; }
.pacco[hidden] { display: none; }
.scarta-aiuto { margin: 4px 0 6px; font-size: 15px; font-weight: 600; color: var(--inchiostro-2); animation: lampeggia-testo 1.4s steps(1) infinite; }
.scarta-aiuto[hidden] { display: none; }
.scartato[hidden] { display: none; }
.scartato-icona { position: relative; isolation: isolate; width: 144px; height: 144px; margin: 22px auto 14px; animation: spunta 560ms var(--deciso) both; }
.scartato-icona::before { content: ''; position: absolute; inset: -40px; z-index: -1; border-radius: 50%; background: repeating-conic-gradient(rgba(232, 179, 58, 0.42) 0 9deg, transparent 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%); animation: gira 9s linear infinite; }
.scartato .etichetta { animation: entra 360ms var(--esce) 200ms both; }
.scartato-nome { margin: 6px 0 2px; font-family: var(--font-titolo); font-weight: 400; font-size: 26px; line-height: 1.05; text-transform: uppercase; animation: entra 360ms var(--esce) 260ms both; }
.scartato-come { margin: 0 0 12px; font-size: 15px; color: var(--inchiostro-2); animation: entra 360ms var(--esce) 320ms both; }
.scartato .esito-contesto { text-align: left; animation: entra 360ms var(--esce) 400ms both; }
#scarta-avanti[hidden] { display: none; }

@keyframes posa { from { opacity: 0; transform: translateY(-16px) rotate(-8deg) scale(0.94); } }
@keyframes pulsa { 50% { transform: scale(1.18); } }
@keyframes trema { 0%, 60%, 100% { transform: none; } 65% { transform: rotate(-6deg); } 70% { transform: rotate(6deg); } 75% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
@keyframes scoppia { 40% { transform: scale(1.18) rotate(4deg); opacity: 1; } 100% { transform: scale(1.6) rotate(-10deg); opacity: 0; } }
@keyframes spunta { 0% { opacity: 0; transform: scale(0.3) rotate(-18deg); } 70% { opacity: 1; transform: scale(1.1) rotate(4deg); } 100% { transform: none; } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes cresce { from { transform: scaleX(0); } }

@media (max-width: 460px) {
  .quaderno { padding: 16px 14px 18px; }
  .pass-elenco { grid-template-columns: 1fr; }
  .barre li { grid-template-columns: 7.6em 1fr 2em; font-size: 13px; }
  .db-numeri dd { font-size: 24px; }
  .g-num { font-size: 9px; }
  .g-tot { font-size: 10px; }
  .g-stato { font-size: 9px; }
  .o-icona { width: 64px; height: 64px; }
  .scrivania { gap: 14px 10px; margin: 0 0 20px; }
}

/* Copertina del giorno. */
dialog {
  border: none; padding: 26px 24px 22px;
  background: var(--scheda); color: var(--inchiostro);
  width: min(92vw, 440px);
  box-shadow: 0 0 0 1px var(--inchiostro), 0 0 0 5px var(--scheda), 0 0 0 6px var(--inchiostro), 0 10px 0 6px rgba(42, 31, 22, 0.2);
}
dialog[open] { animation: cartellino-dialog 480ms var(--esce); }
dialog::backdrop { background: rgba(42, 31, 22, 0.42); animation: dissolvi 300ms ease-out; }
dialog.esce { animation: esce 200ms ease-in forwards; }
.copertina { text-align: center; }
.copertina > * { animation: entra 460ms var(--esce) both; }
.copertina > :nth-child(2) { animation-delay: 80ms; }
.copertina > :nth-child(3) { animation-delay: 140ms; }
.copertina > :nth-child(4) { animation-delay: 200ms; }
.copertina > :nth-child(5) { animation-delay: 260ms; }
.copertina > :nth-child(6) { animation-delay: 320ms; }
.etichetta { margin: 0; font-size: 12px; color: var(--rosso); }
.titolo { font-family: var(--font-titolo); font-weight: 400; font-size: clamp(30px, 9vw, 44px); letter-spacing: 0.04em; text-transform: uppercase; margin: 12px 0 10px; white-space: nowrap; }
.motto { font-size: 18px; font-weight: 500; line-height: 1.35; margin: 0 0 18px; text-wrap: balance; }
.regole { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; margin: 0 0 18px; box-shadow: var(--filo); }
.regole li { padding: 10px 4px 8px; font-size: 14px; line-height: 1.2; }
.regole li + li { box-shadow: -1px 0 0 var(--inchiostro); }
.regole b { display: block; font-family: var(--font-titolo); font-weight: 400; font-size: 28px; margin-bottom: 2px; }
.scala { list-style: none; padding: 0; margin: 0 0 20px; text-align: left; }
.scala li { display: flex; align-items: center; gap: 10px; padding: 5px 2px; font-size: 16px; font-weight: 500; border-bottom: 1px dashed var(--matita); }
.scala li i { width: 14px; height: 14px; background: var(--colore); box-shadow: var(--filo); }
.scala li b { margin-left: auto; font-family: var(--font-titolo); font-weight: 400; font-size: 15px; color: var(--colore-t); }
.daje { font-size: 26px; min-height: 60px; }

@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dissolvi { from { opacity: 0; } }
@keyframes esce { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
@keyframes cartellino { from { opacity: 0; transform: translate(-50%, 28px) scale(0.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes cartellino-dialog { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes timbra { 0% { opacity: 0; transform: scale(2.4) rotate(-14deg); } 70% { opacity: 1; transform: scale(0.94) rotate(-3deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
@keyframes puntino { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 0.25; transform: translateY(-3px); } }
@keyframes sobbalzo { 0% { transform: translateX(-50%); } 35% { transform: translate(-50%, 3px) scale(0.985); } 100% { transform: translateX(-50%); } }
@keyframes scuoti { 0%, 100% { transform: translateX(-50%); } 20%, 60% { transform: translateX(calc(-50% - 5px)); } 40%, 80% { transform: translateX(calc(-50% + 5px)); } }
@keyframes punzona { 0% { transform: none; } 40% { transform: translateY(2px) scale(0.985); } 100% { transform: none; } }
@keyframes battuta { from { opacity: 0.2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes scatto { 0% { transform: none; } 30% { transform: translateY(-4px) scale(1.12); } 100% { transform: none; } }
@keyframes lampeggia { 50% { box-shadow: 0 0 0 2px var(--rosso); } }
@keyframes riempi { from { transform: scaleY(0.2); } to { transform: none; } }
@keyframes lampeggia-testo { 50% { opacity: 0.35; } }

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

/* Telefono: cartellino e attribuzione compatti, la mappa resta visibile. */
@media (max-width: 899px) {
  .cartellino { bottom: 10px; min-width: 200px; padding: 8px 14px 10px; }
  .c-zona { font-size: 20px; margin: 2px 0 8px; }
  .c-riga { gap: 12px; }
  .c-punti { font-size: 18px; }
  .cartellino .timbro { font-size: 12px; }
  .attribuzione { font-size: 12px; }
  .c-faccia { width: 84px; height: 84px; left: -26px; top: -36px; }
  /* Nel diario la lista e lunga: la mappa tiene meta schermo e la pagina scorre. */
  body.in-diario .mappa { flex: none; height: 48vh; }
}

/* Telefono basso: meno aria. */
@media (max-width: 899px) and (max-height: 760px) {
  .testo { font-size: 23px; margin-bottom: 10px; }
  .biglietto { padding: 8px 12px 10px; margin-bottom: 10px; }
  .scelta { font-size: 20px; min-height: 23px; }
  .primario { min-height: 48px; padding: 10px; }
  .clessidra { margin: 6px 0 8px; }
}

/* Desktop: la mappa grande a sinistra, il foglio di bordo a destra. */
@media (min-width: 900px) {
  .gioco {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(400px, 31vw, 450px);
    gap: 0 18px;
    padding: 18px;
  }
  .mappa { margin: 4px; }
  .foglio {
    display: flex; flex-direction: column;
    min-height: 0;
    background: var(--carta);
    box-shadow: 0 0 0 1px var(--inchiostro), 0 0 0 4px var(--scheda), 0 0 0 5px var(--inchiostro);
    margin: 4px;
    overflow: auto;
  }
  .testata { padding: 14px 18px 12px; border-bottom: 1px solid var(--inchiostro); }
  .marchio h1 { font-size: 26px; }
  .tappe { margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--inchiostro); }
  .pagina { padding: 18px; display: flex; flex-direction: column; flex: 1; }
  .pagina[hidden] { display: none; }
  .testo { font-size: 32px; }
  .biglietto { margin-top: auto; }
  #pagina-tappa .primario { margin-top: 0; }
  #pagina-esito .primario { margin-top: auto; }
  .tasti { display: block; }
  .c-zona { font-size: 32px; }
}

/* Desktop stretto: la testata ci deve stare intera, coi due tasti. */
@media (min-width: 900px) and (max-width: 1280px) {
  .testata { gap: 10px; padding: 12px 14px 10px; }
  .marchio h1 { font-size: 21px; }
}

/* Telefono stretto: testata compatta, coi tasti sempre dentro lo schermo. */
@media (max-width: 420px) {
  .testata { gap: 8px; }
  .marchio { min-width: 0; }
  .marchio h1 { font-size: 20px; }
  .data { font-size: 14px; }
  .cassa span { font-size: 26px; }
  .cassa small { font-size: 11px; letter-spacing: 0.06em; }
  .arretrato { font-size: 11px; }
}

/* Meglio del X%: sotto la serie, tocca e apre la classifica. */
.meglio {
  display: block; width: 100%; margin: -4px 0 12px; padding: 8px 12px; border: none; text-align: left;
  background: linear-gradient(90deg, rgba(232, 179, 58, 0.35), rgba(232, 179, 58, 0.08)); box-shadow: var(--filo), inset 3px 0 0 var(--f4);
  font-family: var(--font-testo); font-size: 15px; font-weight: 600; color: var(--inchiostro); animation: entra 360ms var(--esce);
}
.meglio b { font-family: var(--font-titolo); font-weight: 400; font-size: 17px; color: var(--f4-t); }
.meglio:hover { background: linear-gradient(90deg, rgba(232, 179, 58, 0.5), rgba(232, 179, 58, 0.15)); }
.meglio[hidden] { display: none; }

/* Account. */
.acc-fuori { text-align: center; }
.acc-fuori[hidden], .acc-dentro[hidden] { display: none; }
.acc-mino { width: 120px; height: 120px; margin: 0 auto -4px; animation: dondola 1.4s steps(2) infinite; }
.acc-titolo { margin: 6px 0 12px; font-family: var(--font-titolo); font-weight: 400; font-size: 24px; text-transform: uppercase; }
.acc-vantaggi { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; box-shadow: var(--filo); background: var(--carta); }
.acc-vantaggi li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; font-size: 15px; font-weight: 600; animation: entra 340ms var(--esce) both; }
.acc-vantaggi li + li { border-top: 1px dashed var(--matita); }
.acc-vantaggi li:nth-child(2) { animation-delay: 70ms; }
.acc-vantaggi li:nth-child(3) { animation-delay: 140ms; }
.acc-vantaggi [data-icona] { width: 32px; height: 32px; flex: none; }
.google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 16px; border: none;
  background: #fff; color: #1f1f1f; font-family: var(--font-testo); font-weight: 650; font-size: 17px;
  box-shadow: 0 0 0 1px var(--inchiostro), 0 4px 0 1px var(--inchiostro); transition: transform 90ms steps(2), box-shadow 90ms steps(2);
}
.google:hover:not(:disabled) { background: #f6f6f6; }
.google:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 1px var(--inchiostro), 0 1px 0 1px var(--inchiostro); }
.google:disabled { opacity: 0.7; cursor: wait; }
.google .g { width: 22px; height: 22px; }
.acc-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.35; color: var(--inchiostro-2); }
.acc-testa { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.acc-foto { width: 72px; height: 72px; flex: none; object-fit: cover; box-shadow: var(--filo), 0 4px 0 1px var(--inchiostro); background: var(--carta); }
.acc-foto.faccia { image-rendering: pixelated; }
.acc-nome { margin: 2px 0 0; font-family: var(--font-titolo); font-size: 24px; line-height: 1.05; text-transform: uppercase; word-break: break-word; }
.campo { display: block; }
.campo span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rosso); }
.campo input {
  width: 100%; padding: 11px 12px; border: none; background: #fffaf0; color: var(--inchiostro);
  font-family: var(--font-testo); font-size: 20px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--inchiostro), inset 0 3px 0 rgba(42, 31, 22, 0.08);
}
.campo input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rosso), inset 0 3px 0 rgba(42, 31, 22, 0.08); }
.acc-aiuto { margin: 6px 0 12px; font-size: 13px; color: var(--inchiostro-2); }
.acc-aiuto.no { color: var(--rosso); font-weight: 600; }
.interruttore { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 16px; padding: 4px 0; border: none; background: none; font-family: var(--font-testo); font-size: 15px; font-weight: 600; text-align: left; }
.interruttore[hidden] { display: none; }
.interruttore i { position: relative; width: 44px; height: 24px; flex: none; background: var(--carta-2); box-shadow: var(--filo); transition: background-color 160ms; }
.interruttore i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--scheda); box-shadow: var(--filo); transition: transform 180ms var(--esce); }
.interruttore[aria-pressed='true'] i { background: var(--f1); }
.interruttore[aria-pressed='true'] i::after { transform: translateX(20px); }
.acc-sync { margin: 14px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--f1-t); }
.acc-sync::before { content: '✓ '; }
.acc-errore { margin: 12px 0 0; padding: 8px 10px; background: rgba(196, 58, 40, 0.1); box-shadow: inset 3px 0 0 var(--rosso); font-size: 14px; font-weight: 600; color: var(--rosso-scuro); }
.acc-errore[hidden] { display: none; }

/* Classifica di oggi. */
.cl-data { margin: 0 0 10px; font-family: var(--font-titolo); font-size: 18px; text-transform: uppercase; }
.cl-mio { margin: 0 0 14px; padding: 12px 14px; background: linear-gradient(135deg, rgba(232, 179, 58, 0.32), rgba(232, 179, 58, 0.08)); box-shadow: var(--filo); }
.cl-mio:empty { display: none; }
.cl-pos { margin: 0; font-size: 17px; }
.cl-pos b { font-family: var(--font-titolo); font-weight: 400; font-size: 40px; line-height: 1; margin-right: 4px; }
.cl-meglio { margin: 4px 0 0; font-size: 15px; font-weight: 650; color: var(--f4-t); }
.cl-nota, .cl-carico { margin: 6px 0 0; font-size: 15px; color: var(--inchiostro-2); }
.cl-carico { animation: lampeggia-testo 1.2s steps(1) infinite; }
.cl-elenco { list-style: none; margin: 0; padding: 0; box-shadow: var(--filo); background: var(--scheda); }
.cl-elenco li { display: grid; grid-template-columns: 30px 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; animation: entra 300ms var(--esce) both; }
.cl-elenco li + li { border-top: 1px dashed var(--matita); }
.cl-elenco li.io { background: rgba(196, 58, 40, 0.09); box-shadow: inset 3px 0 0 var(--rosso); }
.cl-n { font-family: var(--font-titolo); font-size: 16px; text-align: center; }
.podio-1 .cl-n, .podio-2 .cl-n, .podio-3 .cl-n { display: grid; place-items: center; width: 28px; height: 28px; color: var(--inchiostro); box-shadow: var(--filo); }
.podio-1 .cl-n { background: var(--f4); }
.podio-2 .cl-n { background: #cfc8bb; }
.podio-3 .cl-n { background: #d49a6a; }
.cl-foto { width: 40px; height: 40px; object-fit: cover; box-shadow: var(--filo); background: var(--carta); }
.cl-foto.faccia { image-rendering: pixelated; background: var(--carta-2); }
.cl-nome { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-nome b { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-tappe { display: flex; gap: 3px; }
.cl-tappe i { width: 14px; height: 8px; background: var(--colore); box-shadow: var(--filo); }
.cl-tappe i.buca { background: repeating-linear-gradient(135deg, var(--rosso) 0 2px, var(--scheda) 2px 4px); }
.cl-tot { font-family: var(--font-titolo); font-size: 22px; }
.cl-elenco .vuoto { display: block; color: var(--inchiostro-2); font-size: 15px; }
@media (max-width: 420px) {
  .scorciatoie .secondario { font-size: 11px; letter-spacing: 0; }
  .scorciatoie [data-icona] { width: 28px; height: 28px; }
}

/* Splash d'apertura: Roma che scorre dietro, la testata del diario, la scheda per partire. */
body.con-splash { overflow: hidden; }
.splash {
  position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center;
  background: #c4c4aa; overflow: hidden; padding-bottom: env(safe-area-inset-bottom);
}
.splash[hidden] { display: none; }
.splash.esce { animation: splash-via 420ms var(--esce) forwards; }
.splash-fondo { position: absolute; inset: 0; overflow: hidden; }
.splash-fondo canvas { position: absolute; top: 0; left: 0; animation: deriva 80s ease-in-out infinite alternate; will-change: transform; }
.splash-fondo::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(42, 31, 22, 0.28) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect x='3' y='5' width='1' height='1' fill='%23a48d66' opacity='.5'/%3E%3Crect x='17' y='11' width='1' height='1' fill='%23a48d66' opacity='.4'/%3E%3Crect x='9' y='19' width='1' height='1' fill='%23a48d66' opacity='.5'/%3E%3C/svg%3E");
}
.splash-banda {
  position: relative; width: 100%; margin: 0; padding: calc(9px + env(safe-area-inset-top)) 16px 9px; text-align: center;
  background: var(--carta); border-bottom: 1px solid var(--inchiostro);
  font-weight: 650; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; animation: banda 520ms var(--esce) both;
}
.splash-logo {
  position: relative; margin: 22px 16px 0; max-width: calc(100% - 32px); box-sizing: border-box; padding: 16px clamp(22px, 6vw, 46px) 12px; text-align: center; background: var(--carta);
  box-shadow: 0 0 0 1px var(--inchiostro), 0 0 0 4px var(--carta), 0 0 0 5px var(--inchiostro), 6px 8px 0 5px rgba(42, 31, 22, 0.35);
  animation: posa 640ms var(--esce) 120ms both;
}
.splash-logo h2 {
  margin: 0; font-family: var(--font-titolo); font-weight: 400; font-size: clamp(26px, 8vw, 74px); line-height: 1; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--inchiostro); text-shadow: 3px 3px 0 var(--rosso);
}
.splash-sotto {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0;
  font-weight: 650; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rosso);
}
.splash-sotto::before, .splash-sotto::after { content: ''; width: clamp(18px, 6vw, 60px); height: 5px; border-top: 1px solid var(--rosso); border-bottom: 1px solid var(--rosso); }
.splash-mino { position: absolute; left: -52px; top: -30px; width: 104px; height: 104px; filter: drop-shadow(0 4px 0 rgba(42, 31, 22, 0.25)); animation: dondola 1.6s steps(2) infinite; }
.splash-piede {
  position: relative; grid-row: 4; width: min(580px, calc(100% - 32px)); margin: 0 0 max(18px, env(safe-area-inset-bottom)); padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 10px; text-align: center; background: var(--carta);
  box-shadow: 0 0 0 1px var(--inchiostro), 0 0 0 4px var(--carta), 0 0 0 5px var(--inchiostro), 6px 8px 0 5px rgba(42, 31, 22, 0.35);
  animation: entra 560ms var(--esce) 260ms both;
}
.splash-entra { align-self: center; border: none; background: none; padding: 2px 0; font-family: var(--font-titolo); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.splash-entra:hover { color: var(--rosso); }
.splash-entra[hidden] { display: none; }
.splash-serie { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-weight: 650; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rosso); }
.splash-daje {
  min-height: 66px; font-size: clamp(18px, 4.6vw, 24px); letter-spacing: 0.16em; background: var(--inchiostro); color: var(--scheda);
  box-shadow: inset 0 0 0 3px var(--inchiostro), inset 0 0 0 4px var(--carta-2), 0 0 0 1px var(--inchiostro), 0 4px 0 1px rgba(42, 31, 22, 0.5);
}
.splash-daje:hover:not(:disabled) { background: #3b2b1f; }
.splash-tessere { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.tessera {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 64px; min-width: 0; padding: 8px 10px; border: none;
  font-family: var(--font-titolo); font-size: clamp(15px, 3.8vw, 19px); text-transform: uppercase; letter-spacing: 0.04em; color: var(--inchiostro);
  transition: transform 200ms var(--esce), box-shadow 200ms var(--esce);
}
.tessera:hover { transform: translateY(-3px); }
.t-archivio { background: linear-gradient(160deg, #a9c2c6 0 38%, #e9dab2 38% 70%, #a9c2c6 70%); box-shadow: 0 0 0 1px var(--inchiostro), 0 4px 0 1px var(--inchiostro); }
.t-data { display: flex; flex-direction: column; align-items: center; padding: 3px 8px 2px; background: var(--scheda); box-shadow: 0 0 0 1px var(--inchiostro); transform: rotate(-4deg); line-height: 1; }
.t-data small { font-family: var(--font-testo); font-size: 10px; font-weight: 650; color: var(--rosso); letter-spacing: 0.08em; }
.t-data b { font-weight: 400; font-size: 22px; }
.t-archivio .t-nome { padding: 4px 10px; background: var(--scheda); box-shadow: 0 0 0 1px var(--inchiostro); transform: rotate(-2deg); }
.t-passaporto { background: var(--scheda); box-shadow: 0 0 0 1px var(--inchiostro), 0 4px 0 1px var(--rosso); }
.t-icona { width: 38px; height: 38px; flex: none; }
.t-passaporto .t-nome { display: flex; flex-direction: column; align-items: flex-start; }
.t-passaporto small { font-family: var(--font-testo); font-size: 12px; font-weight: 650; letter-spacing: 0.04em; color: var(--inchiostro-2); text-transform: none; }
@keyframes deriva { from { transform: translate(-4%, -5%); } to { transform: translate(-16%, -15%); } }
@keyframes banda { from { transform: translateY(-100%); } }
@keyframes splash-via { to { opacity: 0; transform: scale(1.03); } }
@media (max-width: 520px) {
  .splash-mino { width: 64px; height: 64px; left: -14px; top: -40px; }
  .splash-logo { margin-top: 42px; padding: 14px 16px 10px; }
  .splash-sotto { font-size: 11px; gap: 6px; }
  .splash-piede { padding: 12px; gap: 8px; }
  .tessera { min-height: 56px; gap: 6px; padding: 6px; font-size: 13px; }
  .t-icona { width: 26px; height: 26px; }
  .t-data b { font-size: 18px; }
  .t-archivio .t-nome { padding: 3px 6px; }
}
@media (prefers-reduced-motion: reduce) { .splash-fondo canvas { animation: none; transform: translate(-10%, -10%); } }

/* Classifica: schede Oggi / Settimana, un quadratino per giorno nella settimana. */
.cl-schede { margin: 4px 0 10px; }
.cl-tappe.cl-sett i { width: 12px; height: 12px; }
.cl-tappe i.vuoto { background: transparent; box-shadow: inset 0 0 0 1px var(--matita); }

/* Proponi una chicca e Proposte da approvare. */
.o-proponi { --r: 0.4deg; grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; background: #fff8ea; box-shadow: 0 0 0 1px var(--inchiostro), 0 5px 0 1px var(--rosso); }
.o-proponi .o-icona { width: 64px; height: 64px; flex: none; }
.o-testo { display: flex; flex-direction: column; gap: 2px; }
.o-testo b { margin-top: 0; }
.o-moderazione { --r: -1deg; background: #eef3e6; }
.o-moderazione[hidden] { display: none; }
.pr-fuori, .pr-grazie { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 4px; text-align: center; }
.pr-fuori[hidden], .pr-grazie[hidden], .pr-form[hidden] { display: none; }
.pr-mino { width: 96px; height: 96px; animation: dondola 1.4s steps(2) infinite; }
.pr-form { display: flex; flex-direction: column; gap: 12px; }
.pr-intro { margin: 2px 0 0; font-size: 15px; color: var(--inchiostro-2); }
.campo textarea { width: 100%; padding: 10px 12px; border: none; background: #fffaf0; color: var(--inchiostro); font-family: var(--font-testo); font-size: 17px; line-height: 1.35; resize: vertical; box-shadow: inset 0 0 0 1px var(--inchiostro), inset 0 3px 0 rgba(42, 31, 22, 0.08); }
.campo textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rosso); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--matita); font-weight: 400; }
.pr-conta { display: block; text-align: right; font-size: 12px; color: var(--inchiostro-2); margin-top: 3px; }
.pr-zona input { width: 100%; padding: 11px 12px; border: none; background: #fffaf0; color: var(--inchiostro); font-family: var(--font-testo); font-size: 18px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--inchiostro); }
.pr-zona input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--rosso); }
.pr-zona input[hidden] { display: none; }
.pr-zone { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pr-zona-voce { border: none; padding: 6px 10px; background: var(--scheda); font-family: var(--font-testo); font-weight: 600; font-size: 15px; box-shadow: 0 0 0 1px var(--inchiostro), 0 2px 0 1px var(--inchiostro); }
.pr-zona-voce:hover { background: var(--f4); }
.pr-nessuna { margin: 0; font-size: 14px; color: var(--inchiostro-2); }
.pr-scelta { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; background: var(--f4); box-shadow: 0 0 0 1px var(--inchiostro); font-family: var(--font-titolo); font-size: 18px; text-transform: uppercase; }
.pr-scelta[hidden] { display: none; }
.pr-scelta button { margin-left: auto; border: none; background: none; font-family: var(--font-testo); font-weight: 650; font-size: 14px; text-decoration: underline; text-transform: none; }
.pr-mie, .mod-elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-mia { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 12px; background: var(--scheda); box-shadow: inset 0 0 0 1px rgba(42, 31, 22, 0.2); }
.pr-mia b { font-size: 16px; }
.pr-mia-zona { grid-column: 1; font-size: 14px; color: var(--inchiostro-2); }
.pr-stato { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 2px 8px; font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 0 0 1.5px currentColor; color: var(--inchiostro-2); }
.stato-approvata .pr-stato { color: var(--f1-t); }
.stato-scartata .pr-stato { color: var(--rosso); }
.pr-nota { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; font-style: italic; color: var(--inchiostro-2); }
.mod-schede, #mod-schede { margin: 4px 0 12px; }
.mod-voce { padding: 12px; background: var(--scheda); box-shadow: 0 0 0 1px var(--inchiostro); display: flex; flex-direction: column; gap: 6px; transition: opacity 300ms; }
.mod-voce.decisa { opacity: 0.3; }
.mod-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mod-testa b { font-size: 18px; }
.mod-zona { font-family: var(--font-titolo); font-size: 13px; text-transform: uppercase; color: var(--rosso); }
.mod-perche, .mod-domanda, .mod-chi { margin: 0; font-size: 15px; line-height: 1.4; }
.mod-domanda { color: var(--f2-t); font-weight: 600; }
.mod-chi { font-size: 13px; color: var(--inchiostro-2); }
.mod-nota { width: 100%; padding: 8px 10px; border: none; background: #fffaf0; color: var(--inchiostro); font-family: var(--font-testo); font-size: 15px; box-shadow: inset 0 0 0 1px var(--matita); }
.mod-tasti { justify-content: flex-end; }
.mod-tasti button { min-width: 64px; padding: 8px 12px; border: none; background: var(--carta); font-family: var(--font-titolo); font-size: 14px; box-shadow: 0 0 0 1px var(--inchiostro), 0 3px 0 1px var(--inchiostro); }
.mod-tasti button[aria-pressed='true'].si { background: var(--f1); color: var(--scheda); }
.mod-tasti button[aria-pressed='true'].no { background: var(--rosso); color: var(--scheda); }