/* Tutorial in linea (tutorial.js): popup ancorato alla funzione, anello che pulsa sull'elemento, piccole animazioni */
.tut-luce { position: fixed; z-index: 900; border-radius: 9px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(15, 26, 38, .38);
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; }
.tut-luce::after { content: ""; position: absolute; inset: -3px; border: 2.5px solid #1f6feb; border-radius: 11px; animation: tut-pulsa 1.6s ease-out infinite; }
.tut-luce.grande { box-shadow: 0 0 0 9999px rgba(15, 26, 38, .18); }
.tut-luce.grande::after { animation: none; border-color: rgba(31, 111, 235, .7); }
@keyframes tut-pulsa { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.tut-velo { position: fixed; inset: 0; z-index: 900; background: rgba(15, 26, 38, .45); }

.tut-carta { position: fixed; z-index: 901; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; box-sizing: border-box;
  padding: 16px 18px 14px; background: #fff; color: #1f2328; border-radius: 12px; box-shadow: 0 18px 50px rgba(15, 26, 38, .32), 0 0 0 1px rgba(15, 26, 38, .06);
  font-size: 13.5px; line-height: 1.5; transition: left .35s ease, top .35s ease; }
.tut-carta.entra { animation: tut-entra .32s ease-out; }
@keyframes tut-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.tut-carta[data-lato=centro] { width: min(440px, calc(100vw - 24px)); }
/* freccia verso l'elemento */
.tut-carta::before { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); display: none; }
.tut-carta[data-lato=destra]::before { display: block; left: -6px; top: calc(var(--freccia) - 6px); box-shadow: -1px 1px 0 rgba(15, 26, 38, .06); }
.tut-carta[data-lato=sinistra]::before { display: block; right: -6px; top: calc(var(--freccia) - 6px); }
.tut-carta[data-lato=sotto]::before { display: block; top: -6px; left: calc(var(--freccia) - 6px); }
.tut-carta[data-lato=sopra]::before { display: block; bottom: -6px; left: calc(var(--freccia) - 6px); }
.tut-passo { margin: 0; color: #5d6670; font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; font-weight: 600; }
.tut-esci { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; font-size: 15px; color: #5d6670; cursor: pointer; padding: 4px 7px; border-radius: 6px; }
.tut-esci:hover { background: #edf3fc; color: #075fc9; }
.tut-carta h2 { margin: 4px 26px 8px 0; font-size: 18px; letter-spacing: -.3px; line-height: 1.25; }
.tut-testo p { margin: 0 0 8px; }
.tut-testo a { color: #075fc9; font-weight: 600; }
.tut-testo kbd { font: 11.5px ui-monospace, monospace; padding: 1px 5px; border: 1px solid #d8dde3; border-bottom-width: 2px; border-radius: 4px; background: #f6f8fa; }
.tut-piccolo { color: #5d6670; font-size: 12.5px; }
.tut-testo .tut-avviso { padding: 8px 10px; border-left: 3px solid #eb6834; background: #fff4ee; border-radius: 0 6px 6px 0; }
.tut-comandi { margin: 0 0 8px; padding-left: 18px; }
.tut-comandi li { margin-bottom: 3px; }
.tut-domanda { font-weight: 650; color: #075fc9; }

.tut-anima { margin: 2px 0 10px; }
.tut-anima canvas, .tut-anima svg { display: block; width: 100%; height: auto; border-radius: 8px; }
/* muoversi sulla mappa (animaMappa): piano con le case in prospettiva, cursore e gesto scritto */
.tut-mappa { position: relative; height: 150px; border-radius: 8px; overflow: hidden; background: #0f1a26; perspective: 420px; }
.tut-piano { position: absolute; left: 50%; top: 50%; width: 340px; height: 210px; background: #22303d; border-radius: 4px; transform-origin: 50% 50%;
  background-image: linear-gradient(#22303d, #22303d), linear-gradient(90deg, transparent 136px, #3d5266 136px, #3d5266 146px, transparent 146px),
    linear-gradient(transparent 92px, #3d5266 92px, #3d5266 101px, transparent 101px); background-blend-mode: normal; background-size: 0 0, 100% 100%, 100% 100%; }
.tut-piano i { position: absolute; border-radius: 2px; box-shadow: 1px 2px 0 rgba(0, 0, 0, .35); }
.tut-albero { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #4f9a52; }
.tut-anima .tut-cursore { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 0; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.tut-tasto { position: absolute; left: 0; top: 0; padding: 2px 7px; border-radius: 999px; background: #1f6feb; color: #fff; font: 600 11px system-ui; white-space: nowrap; }
.tut-fasi {display: flex; gap: 4px; list-style: none; margin: 6px 0 0; padding: 0; counter-reset: f; }
.tut-fasi li { flex: 1; text-align: center; font-size: 11px; padding: 3px 0; border-radius: 5px; background: #eef2f7; color: #5d6670; transition: background .3s, color .3s; }
.tut-fasi li.attiva { background: #1f6feb; color: #fff; }
.tut-chiave { margin: 6px 0 0; font-size: 11.5px; color: #5d6670; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tut-chiave i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-left: 6px; }
.tut-etichette { display: flex; gap: 8px; flex-wrap: wrap; }
.tut-etichette span { font-size: 12px; font-weight: 650; color: var(--c); border: 1.5px solid var(--c); border-radius: 999px; padding: 3px 10px; opacity: 0; animation: tut-entra .45s ease-out forwards; }
.tut-etichette span:nth-child(2) { animation-delay: .35s; }
.tut-etichette span:nth-child(3) { animation-delay: .7s; }

.tut-puntini { display: flex; gap: 4px; justify-content: center; margin: 10px 0 8px; flex-wrap: wrap; }
.tut-puntini i { width: 6px; height: 6px; border-radius: 50%; background: #d8dde3; transition: background .25s, width .25s; }
.tut-puntini i.fatto { background: #9cbcf0; }
.tut-puntini i.si { background: #1f6feb; width: 16px; border-radius: 3px; }
.tut-carta footer { display: flex; align-items: center; gap: 8px; }
.tut-carta footer span { flex: 1; }
.tut-carta footer button { border-radius: 7px; padding: 7px 13px; font-size: 13px; cursor: pointer; border: 1px solid #d8dde3; background: #fff; color: #1f2328; }
.tut-carta footer .tut-salta { border: 0; padding-left: 0; color: #5d6670; background: transparent; }
.tut-carta footer .tut-salta:hover { color: #075fc9; text-decoration: underline; }
.tut-carta footer .tut-avanti { background: #1f6feb; border-color: #1f6feb; color: #fff; font-weight: 650; }
.tut-carta footer .tut-avanti:hover { background: #075fc9; }
.tut-carta footer [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tut-luce, .tut-carta { transition: none; }
  .tut-luce::after, .tut-carta.entra, .tut-etichette span { animation: none; opacity: 1; }
}

/* popup accorciato (poco spazio attorno all'elemento): il testo scorre, i pulsanti restano in vista */
.tut-carta footer { position: sticky; bottom: -14px; margin-bottom: -14px; padding-bottom: 14px; background: #fff; }

/* telefono (telefono.css, sotto i 721 px): la nota della versione dimostrativa, in basso sopra a tutto, coprirebbe il popup e la
   barra che i passi indicano; durante il giro si nasconde (il benvenuto dice già che è una dimostrazione) e torna alla fine */
.tut-riduci { display: none; }
@media (max-width: 720px) {
  body.tutorial-attivo #fascia-dimostrazione { display: none !important; }
  .tut-carta footer button { padding: 9px 13px; }
  /* striscia larga quanto lo schermo (tutorial.js, posizionaTelefono): la schermata resta visibile e si può toccare */
  .tut-carta, .tut-carta[data-lato=centro] { width: calc(100vw - 16px); padding-top: 12px; }
  .tut-luce, .tut-luce.grande { box-shadow: none; }
  .tut-riduci { display: block; position: absolute; top: 9px; right: 44px; border: 1px solid #d8dde3; background: #fff; color: #075fc9;
    border-radius: 999px; padding: 3px 10px; font: 600 12px system-ui; cursor: pointer; }
  .tut-carta h2 { margin-right: 110px; font-size: 16.5px; }
  .tut-carta.ridotta { padding-bottom: 10px; }
  .tut-carta.ridotta :is(.tut-anima, .tut-testo, .tut-puntini, .tut-salta) { display: none; }
  .tut-carta.ridotta h2 { margin-bottom: 8px; font-size: 15px; }
}