/* Recensioni Dar Bruttone.
   Colori presi dal sito vero: giallo dei menu', rosso del bordo delle scodelle, nero del tratto.
   Forme: tutto cio' che si tocca e' a pillola o tondo; i riquadri di testo hanno angolo 14px. */

@font-face { font-family: Archivo; font-weight: 400 700; font-display: swap; src: url(font/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Archivo; font-weight: 400 700; font-display: swap; src: url(font/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo Narrow"; font-weight: 700; font-display: swap; src: url(font/archivo-narrow-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo Narrow"; font-weight: 700; font-display: swap; src: url(font/archivo-narrow-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light dark;

  --giallo: #F0B323;
  --inchiostro-fisso: #1F1A15;

  --carta: #FFFCF6;
  --carta-2: #FFF6DF;
  --testo: #1F1A15;
  --testo-2: #5A4D40;
  --filo: rgb(31 26 21 / .16);
  --premuto: rgb(240 179 35 / .22);
  --rosso: #B42F1E;
  --rosso-tinta: #FBE6E0;
  --giallo-tinta: #FDEFC6;
  --testata: var(--giallo);
  --testata-testo: var(--inchiostro-fisso);
  --bordo-primo: var(--inchiostro-fisso);
  --fuoco: #B42F1E;
  --scelto-fondo: var(--inchiostro-fisso);
  --scelto-testo: #FFD25E;
  --mic-fondo: var(--inchiostro-fisso);
  --mic-testo: #FFD25E;
  --avviso-fondo: var(--inchiostro-fisso);
  --avviso-testo: #FFF7EA;
  --avviso-azione: #FFD25E;
  --ossa: rgb(31 26 21 / .13);

  --largo: "Archivo", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --stretto: "Archivo Narrow", "Archivo", -apple-system, system-ui, sans-serif;

  --alto: 100dvh;
  --su: 0px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --carta: #16120F;
    --carta-2: #241D17;
    --testo: #F8F0E2;
    --testo-2: #C2B5A3;
    --filo: rgb(248 240 226 / .17);
    --premuto: rgb(240 179 35 / .14);
    --rosso: #F37B66;
    --rosso-tinta: #3C1C16;
    --giallo-tinta: #3A2C0E;
    --testata: #16120F;
    --testata-testo: #F0B323;
    --bordo-primo: var(--giallo);
    --fuoco: #F0B323;
    --scelto-fondo: var(--giallo);
    --scelto-testo: var(--inchiostro-fisso);
    --mic-fondo: var(--giallo);
    --mic-testo: var(--inchiostro-fisso);
    --avviso-fondo: #F8F0E2;
    --avviso-testo: var(--inchiostro-fisso);
    --avviso-azione: #9A2616;
    --ossa: rgb(248 240 226 / .14);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--carta);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  color: var(--testo);
  font: 400 17px/1.45 var(--largo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, p { margin: 0; font: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--fuoco); outline-offset: 2px; }
[tabindex="-1"]:focus-visible { outline: none; }
::selection { background: var(--giallo); color: var(--inchiostro-fisso); }
textarea, input { caret-color: var(--rosso); }

.nascosto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.ic { width: 24px; height: 24px; fill: currentColor; flex: none; display: block; }

/* Il guscio segue la parte di schermo visibile: con la tastiera aperta si accorcia,
   cosi' il piede resta appoggiato sopra la tastiera senza inseguimenti. */
#app {
  position: fixed;
  top: var(--su);
  left: 0;
  right: 0;
  height: var(--alto);
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--carta);
}

#schermi { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.schermo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.schermo.appare { animation: appare .16s ease-out; }
@keyframes appare { from { opacity: .4; transform: translateY(6px); } }

.scorri {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Testata ---------- */

.testata {
  flex: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 0 0 16px;
  background: var(--testata);
  color: var(--testata-testo);
  border-bottom: 5px solid var(--rosso);
  overflow: hidden;
}
.testata-testo { padding-bottom: 10px; min-width: 0; }
.testata h1 { display: flex; align-items: baseline; gap: 8px; font-family: var(--stretto); font-weight: 700; line-height: 1; }
.conta { font-size: 60px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.conta-parole { font-size: 25px; }
.lette { font-size: 15px; line-height: 1.2; margin-top: 6px; }

.oste {
  display: block;
  flex: none;
  width: 80px;
  height: 91px;
  margin: 0 12px -14px 0;
  background: currentColor;
  -webkit-mask: url(oste.png) center / contain no-repeat;
  mask: url(oste.png) center / contain no-repeat;
}

.testata-bassa { padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; min-height: 42px; align-items: center; }
.testata-riga { font: 700 18px/1.2 var(--stretto); }

#lista.senza-niente .testata .oste { visibility: hidden; }

/* ---------- Strisce fisse (Mac spento, accesso, rete) ---------- */

.strisce:empty { display: none; }
.striscia {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 16px;
  line-height: 1.3;
  background: var(--giallo-tinta);
  border-bottom: 1px solid var(--filo);
}
.striscia.grave { background: var(--rosso-tinta); }
.striscia p { flex: 1; min-width: 0; }

/* ---------- Lista ---------- */

.gruppo-titolo {
  padding: 18px 16px 6px;
  font: 700 19px/1.2 var(--stretto);
}
.gruppo-titolo.grave { color: var(--rosso); }

.riga {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 13px 16px 14px;
  text-align: left;
  border-bottom: 1px solid var(--filo);
}
.riga:active { background: var(--premuto); }
.riga-su { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.riga-nome {
  min-width: 0;
  font: 700 21px/1.2 var(--stretto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.riga-data { flex: none; font-size: 15px; color: var(--testo-2); }
.riga-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 15px; color: var(--testo-2); min-width: 0; }
.riga-luogo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga-stato { display: block; margin-top: 5px; font-size: 16px; font-weight: 600; }
.riga-stato.grave { color: var(--rosso); }
.riga-anteprima {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.riga-anteprima.una { -webkit-line-clamp: 1; line-clamp: 1; color: var(--testo-2); }

.stelle { display: inline-flex; flex: none; gap: 1px; color: var(--rosso); vertical-align: -2px; }
.stelle .ic { width: 17px; height: 17px; }
.stelle .ic.vuota { color: var(--testo); opacity: .16; }
.stelle-grandi .ic { width: 22px; height: 22px; }

/* La tendina delle ultime chiuse */
.chiuse { border-top: 8px solid transparent; }
.chiuse summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 16px;
  font: 700 19px/1.2 var(--stretto);
  cursor: pointer;
  list-style: none;
}
.chiuse summary::-webkit-details-marker { display: none; }
.chiuse summary .ic { width: 20px; height: 20px; transition: transform .15s ease-out; }
.chiuse[open] summary .ic { transform: rotate(180deg); }

/* ---------- Vuoto e caricamento ---------- */

.vuoto {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 24px 48px;
}
.vuoto .oste { width: 128px; height: 146px; margin: 0 0 18px; color: var(--testo); }
.vuoto h2 { font: 700 32px/1.1 var(--stretto); text-wrap: balance; }
.vuoto p { margin-top: 10px; color: var(--testo-2); }
.vuoto .bottone { margin-top: 20px; }

.fantasma { padding: 15px 16px; border-bottom: 1px solid var(--filo); }
.ossa { display: grid; gap: 10px; }
.ossa i, .fantasma i { display: block; height: 15px; border-radius: 7px; background: var(--ossa); animation: respira 1.5s ease-in-out infinite; }
.ossa i:nth-child(1) { width: 92%; }
.ossa i:nth-child(2) { width: 100%; }
.ossa i:nth-child(3) { width: 64%; }
.fantasma i { margin-top: 10px; }
.fantasma i:nth-child(1) { width: 42%; height: 20px; margin-top: 0; }
.fantasma i:nth-child(2) { width: 58%; }
.fantasma i:nth-child(3) { width: 96%; }
@keyframes respira { 50% { opacity: .45; } }

/* ---------- Scheda ---------- */

#schedaScorri { padding: 0 16px 16px; }

.recensione { padding-top: 16px; }
.rec-nome { font: 700 28px/1.12 var(--stretto); overflow-wrap: anywhere; }
.rec-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.rec-data { font-size: 15px; color: var(--testo-2); }
.rec-luogo { margin-top: 3px; font-size: 16px; color: var(--testo-2); }
.rec-titolo { margin-top: 16px; font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.rec-testo { margin-top: 12px; font-size: 18px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.rec-titolo + .rec-testo { margin-top: 6px; }
.rec-titolo[hidden] + .rec-testo { margin-top: 14px; }
.rec-lingua { margin-top: 8px; font-size: 15px; color: var(--testo-2); }

.collegamento {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 16px;
  color: var(--testo-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.collegamento:active { color: var(--testo); }
#nonRispondere { margin-top: 2px; }

.invito { margin-top: 20px; font: 700 21px/1.3 var(--stretto); }
.invito span { display: block; margin-top: 3px; font: 400 16px/1.35 var(--largo); color: var(--testo-2); }

.hai-detto {
  width: fit-content;
  max-width: 88%;
  margin: 10px 0 0 auto;
  padding: 9px 13px 10px;
  border-radius: 14px;
  background: var(--giallo-tinta);
  overflow-wrap: anywhere;
}
.hai-detto-su { display: block; font-size: 14px; color: var(--testo-2); }
.hai-detto-testo { display: block; font-size: 16px; line-height: 1.35; white-space: pre-wrap; }

.scrivendo { margin-top: 18px; }
.scrivendo p { font: 700 21px/1.2 var(--stretto); margin-bottom: 14px; }

.bozza { margin-top: 18px; }
.bozza-etichetta { display: block; margin-bottom: 7px; font: 700 21px/1.2 var(--stretto); }
#bozza, #misuraBozza {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 2px solid var(--testo);
  border-radius: 14px;
  background: var(--carta-2);
  font-size: 17px;
  line-height: 1.45;
  resize: none;
  overflow-wrap: anywhere;
  -webkit-appearance: none;
  appearance: none;
}
/* Copia invisibile del campo: serve solo a sapere a che altezza sta il cursore */
#misuraBozza { position: fixed; top: 0; left: 0; height: 0; min-height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
#bozza:focus { outline: none; border-color: var(--fuoco); }
#bozza[readonly] { opacity: .55; }
.bozza-conta { margin-top: 6px; font-size: 15px; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.bozza-conta.troppo { color: var(--rosso); font-weight: 600; }

.riquadro { display: flex; gap: 10px; padding: 11px 13px; border-radius: 14px; font-size: 16px; line-height: 1.35; margin-bottom: 12px; }
.riquadro-avviso { background: var(--rosso-tinta); }
.riquadro-avviso .ic { color: var(--rosso); margin-top: 1px; }
.riquadro-errore { margin-top: 18px; margin-bottom: 0; background: var(--rosso-tinta); flex-direction: column; align-items: flex-start; }

.esito { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--giallo-tinta); }
.esito.grave { background: var(--rosso-tinta); }
.esito-frase { font-size: 17px; font-weight: 600; line-height: 1.35; }
.esito-dettaglio { margin-top: 4px; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }

.finita { margin-top: 18px; }
.finita-testo { white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; border-radius: 14px; background: var(--carta-2); }

/* ---------- Bottoni ---------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border: 2px solid var(--testo);
  border-radius: 999px;
  color: inherit;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .08s ease-out;
}
.bottone:active { transform: scale(.98); }
.bottone .ic { width: 20px; height: 20px; }
.bottone-primo { background: var(--giallo); color: var(--inchiostro-fisso); border-color: var(--bordo-primo); }
.bottone-grande { display: flex; width: 100%; min-height: 58px; font: 700 22px/1 var(--stretto); }
.bottone-piccolo { min-height: 48px; padding: 0 18px; }
.bottone[aria-disabled="true"] { opacity: .42; }

/* ---------- Avvisi di 10 secondi ---------- */

.avvisi { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.avvisi:empty { display: none; }
.avvisi:not(:empty) { padding-top: 8px; padding-bottom: 8px; }
.avviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 4px 6px 4px 16px;
  border-radius: 14px;
  background: var(--avviso-fondo);
  color: var(--avviso-testo);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  animation: sale .18s ease-out;
}
.avviso p { min-width: 0; font-variant-numeric: tabular-nums; }
.avviso button {
  flex: none;
  min-height: 48px;
  padding: 0 14px;
  color: var(--avviso-azione);
  font-size: 17px;
  font-weight: 700;
}
@keyframes sale { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Filtri ---------- */

.filtri {
  flex: none;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--filo);
  background: var(--carta);
}
.filtri-riga {
  display: flex;
  gap: 8px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filtri-riga::-webkit-scrollbar { display: none; }
.filtri-riga + .filtri-riga { margin-top: 8px; }
.pillola {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 11px;
  border: 1.5px solid var(--filo);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
.pillola:active { background: var(--premuto); }
.pillola b { font-weight: 400; color: var(--testo-2); font-variant-numeric: tabular-nums; }
.pillola[aria-pressed="true"] { background: var(--scelto-fondo); border-color: var(--scelto-fondo); color: var(--scelto-testo); }
.pillola[aria-pressed="true"] b { color: inherit; }
@media (max-width: 389px) {
  .filtri-riga { gap: 6px; padding: 0 6px; }
  .pillola { gap: 4px; padding: 0 6px; }
}

/* ---------- Piede della scheda ---------- */

.dock {
  flex: none;
  display: grid;
  gap: 8px;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  background: var(--carta);
  border-top: 1px solid var(--filo);
}
body.tastiera .dock { padding-bottom: 8px; }
.dock-info { font-size: 15px; line-height: 1.3; color: var(--testo-2); padding: 0 4px; }
.dock-errore { font-size: 16px; line-height: 1.3; color: var(--rosso); font-weight: 600; padding: 0 4px; }

.dock-riga { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }

.tondo {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
.tondo:active { background: var(--premuto); }

.azioni { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.azioni .bottone { flex: 1 1 auto; min-width: 0; padding: 0 12px; }
.azioni .bottone-intero { flex-basis: 100%; }

.barra { flex: 1; min-width: 0; display: flex; }
#nota {
  display: block;
  width: 100%;
  min-height: 52px;
  max-height: 128px;
  padding: 13px 18px;
  border: 1.5px solid var(--filo);
  border-radius: 26px;
  background: var(--carta-2);
  font-size: 17px;
  line-height: 1.35;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}
#nota:focus { outline: none; border-color: var(--fuoco); }
#nota::placeholder { color: var(--testo-2); opacity: 1; }

.mic {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--mic-fondo);
  color: var(--mic-testo);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .08s ease-out;
}
.mic:active { transform: scale(.96); }
.mic .ic { grid-area: 1 / 1; width: 30px; height: 30px; }
.mic .ic-ferma, .mic .ic-manda { display: none; }
.mic[data-modo="manda"] .ic-mic, .mic[data-modo="ferma"] .ic-mic { display: none; }
.mic[data-modo="manda"] .ic-manda { display: block; width: 28px; height: 28px; }
.mic[data-modo="ferma"] .ic-ferma { display: block; width: 26px; height: 26px; }
.mic[data-modo="ferma"] { background: var(--rosso); color: var(--carta); }
.mic[data-modo="attesa"] { opacity: .55; }
.mic[aria-disabled="true"] { opacity: .42; }

.registra { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding-left: 4px; }
.collegamento-registra { color: var(--testo); padding: 0 6px 0 2px; }
.registra-tempo { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.1ch; }
.registra-tempo.ultimi { color: var(--rosso); }
.registra-livello { flex: 1; min-width: 0; height: 8px; overflow: hidden; }
.registra-livello i { display: block; height: 100%; width: 100%; border-radius: 4px; background: var(--rosso); transform: scaleX(.02); transform-origin: left; }

/* Mentre scrive nella bozza restano solo Fine (chiude la tastiera) e Approva: serve spazio per il testo */
.dock-su { display: flex; align-items: center; gap: 16px; min-width: 0; }
body:not(.scrive-bozza) .dock-su:has(#approva[hidden]) { display: none; }
.dock-su .bottone-grande { flex: 1; min-width: 0; }
#fineBozza { display: none; flex: none; justify-content: center; min-width: 56px; padding: 0 6px; color: var(--testo); font-weight: 600; }
body.scrive-bozza #fineBozza { display: inline-flex; }
body.scrive-bozza .dock-riga { display: none; }
body.scrive-bozza .dock-info { display: none; }
body.scrive-nota #indietro { display: none; }

/* ---------- Entrata ---------- */

.schermo-entra { justify-content: center; padding: 24px; background: var(--testata); color: var(--testata-testo); }
.oste-grande { width: 120px; height: 137px; margin: 0 0 20px; }
.schermo-entra h1 { font: 700 34px/1.08 var(--stretto); text-wrap: balance; }
#entraForm { display: grid; gap: 12px; margin-top: 20px; }
#entraLink {
  width: 100%;
  min-height: 54px;
  padding: 0 18px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: var(--carta);
  color: var(--testo);
  font-size: 17px;
}
#entraLink::placeholder { color: var(--testo-2); opacity: 1; }
.schermo-entra .bottone-primo { min-height: 56px; background: var(--inchiostro-fisso); color: #FFD25E; border-color: var(--inchiostro-fisso); }
.testo-errore { font-size: 16px; font-weight: 600; line-height: 1.3; }

@media (prefers-color-scheme: dark) {
  .schermo-entra .bottone-primo { background: var(--giallo); color: var(--inchiostro-fisso); border-color: var(--giallo); }
}

/* ---------- Schermi larghi: resta una colonna da telefono ---------- */

@media (min-width: 600px) {
  html { background: var(--carta-2); }
  #app { box-shadow: 0 0 0 1px var(--filo); }
}

@media (prefers-reduced-motion: reduce) {
  .schermo.appare, .avviso, .ossa i, .fantasma i { animation: none; }
  .bottone, .mic, .chiuse summary .ic { transition: none; }
}