/* Mascotte 3D mobile — canvas e nuvoletta.
   Ordine di sovrapposizione (z-index): testi/sfondo < canvas a riposo (1) < foto delle card (3) < canvas in volo (5) < nuvoletta (6).
   La libreria imposta da sola z-index e position delle foto; gli z-index sono opzioni (zBack, zPhoto, zFront). */
.mascotte-m-canvas { position: fixed; top: 0; display: block; pointer-events: none; }

.mascotte-m-bubble {
  --mascotte-font: var(--font-inter, system-ui), -apple-system, "Segoe UI", sans-serif;
  position: fixed; left: 0; top: 0; width: max-content; opacity: 0; pointer-events: none; will-change: transform, opacity;
  font: 500 14.5px/1.35 var(--mascotte-font); letter-spacing: -0.005em; color: #0b0f2a;
}
.mascotte-m-in {
  position: relative; display: flex; align-items: center; gap: 8px; background: #fff;
  border-radius: 18px; padding: 10px 14px 10px 8px; box-shadow: 0 8px 24px rgba(10, 20, 80, 0.28);
}
/* la coda punta in alto, verso la mascotte che sbuca da dietro l'angolo della foto; --tx è posizionata dalla libreria */
.mascotte-m-in::after {
  content: ""; position: absolute; top: -6px; left: var(--tx, 70%); width: 14px; height: 14px;
  background: #fff; border-radius: 3px; transform: translateX(-50%) rotate(45deg);
}
.mascotte-m-ico { width: 30px; height: auto; flex: none; display: block; }
.mascotte-m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }