/* ══════════ GUESSINO · LE CERVEAU QUI VIT DANS LA PAGE ══════════
   Il se perche sur le bord haut des blocs (cartes, cases, boutons, fiches), à moitié caché derrière.
   Il plonge derrière un bloc et ressort sur un autre, glisse le long d'un bord, regarde là où le joueur touche,
   se penche pour regarder la mise, et change de tête selon le jeu. Posé et piloté par js/mascotte.js.
   Il est DANS la page (il défile avec elle). Seulement transform et opacity ; sage si animations réduites. */
.mascotte {
  position: absolute; z-index: 15; left: 0; top: 0;
  width: 56px; height: 100px;            /* une « fenêtre » : le bas est le bord du bloc, tout ce qui dépasse dessous est caché */
  padding: 0; border: 0; background: none;
  pointer-events: none;
  transition: translate 900ms cubic-bezier(0.5, 0, 0.3, 1);   /* la glissade le long d'un bord */
  -webkit-tap-highlight-color: transparent;
}
.mascotte.sans-glisse { transition: none; }
.mascotte[hidden] { display: none; }
.m-fenetre { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Le cerveau monte et descend derrière le bord : --sortie = part cachée (100 % = complètement derrière). */
.m-monte {
  position: absolute; left: 0; bottom: 0; width: 56px; height: 47px;
  translate: 0 var(--cache, 110%);
  transition: translate 420ms var(--ressort, cubic-bezier(0.3, 1.5, 0.5, 1));
  pointer-events: auto; cursor: pointer; touch-action: manipulation;
}
.mascotte.plonge .m-monte { transition: translate 200ms cubic-bezier(0.6, 0, 0.9, 0.4); }
.m-corps { display: block; width: 100%; height: 100%; rotate: var(--incl, 0deg); transform-origin: 50% 100%; transition: rotate 420ms var(--ressort, ease-out); }
.m-flotte { display: block; width: 100%; height: 100%; animation: m-respire 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.m-flotte svg { display: block; width: 100%; height: 100%; overflow: visible; color: var(--rose); scale: var(--niv, 1); transform-origin: 50% 100%; transition: scale 600ms var(--ressort, ease-out); }
@keyframes m-respire { 0%, 100% { scale: 1 1; } 50% { scale: 1.03 .96; } }
/* Quand il glisse le long d'un bord, il se dandine. */
.mascotte.glisse .m-flotte { animation: m-dandine 300ms ease-in-out infinite; }
@keyframes m-dandine { 0%, 100% { rotate: -7deg; translate: 0 0; } 50% { rotate: 7deg; translate: 0 -3px; } }

/* Les têtes : une seule visible à la fois. */
.m-tete { display: none; }
.mascotte[data-humeur="content"] .m-content,
.mascotte[data-humeur="reflechit"] .m-reflechit,
.mascotte[data-humeur="joie"] .m-joie,
.mascotte[data-humeur="triste"] .m-triste,
.mascotte[data-humeur="surpris"] .m-surpris { display: inline; }
/* Le regard suit le doigt (--ox, --oy posés par le script). */
.m-regard { transform: translate(var(--ox, 0px), var(--oy, 0px)); transition: transform 260ms var(--ressort, ease-out); }
.m-yeux { transform-box: fill-box; transform-origin: center; animation: m-cligne 4.6s infinite; }
@keyframes m-cligne { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.m-reflechit .m-yeux { animation: m-cherche 2.4s ease-in-out infinite; }
@keyframes m-cherche { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }

/* Ce qu'il dit quand on le touche. */
.m-bulle {
  position: absolute; left: 50%; bottom: 50px; translate: -50% 0;
  width: max-content; max-width: min(200px, 56vw); padding: 6px 10px 7px;
  background: var(--blanc); color: var(--encre);
  border: 2px solid var(--encre); border-radius: 12px;
  box-shadow: 0 3px 0 var(--ombre);
  font: 700 13px/1.25 var(--police-texte); text-align: center;
  pointer-events: none;
}
.m-bulle[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mascotte, .m-monte, .m-corps, .m-regard { transition: none; }
  .m-flotte, .m-yeux { animation: none !important; }
}
.instantane .mascotte, .instantane .m-monte { transition: none; }
.instantane .m-flotte, .instantane .m-yeux { animation: none !important; }