/* ============================================================================
   QZR vNext — Mascotte (états + thématisation)
   ----------------------------------------------------------------------------
   Reprend FIDÈLEMENT le système d'expressions de la mascotte (12 états +
   keyframes) historiquement dans homepage-hub.css (~l.4240+), et y ajoute la
   THÉMATISATION : la couleur d'origine (#4caf50 / #2d8a4e) suit `--qz-accent`
   via des sélecteurs d'attribut — AUCUNE modification du SVG requise.

   S'applique à tout conteneur portant data-qzr-expr="..." contenant un
   .qzr-mascot-svg (dashboard, quiz live .solo-mascot, etc.).

   À charger APRÈS vnext-tokens.css ET après homepage-hub.css (pour gagner la
   cascade). Une fois la migration faite, supprimer le bloc mascotte de
   homepage-hub.css (décommission strangler).
   ============================================================================ */

/* ── Thématisation : recolorise le SVG vert d'origine vers l'accent ─────────
   Les sélecteurs d'attribut ciblent les couleurs inline ; la propriété CSS
   `fill`/`stroke` l'emporte sur l'attribut de présentation. La visière navy
   (#1a2a3a) et l'éclair or (#f5c542) restent constants. ----------------------*/
.qzr-mascot-svg [fill="#4caf50"]   { fill: var(--qz-accent); }
.qzr-mascot-svg [stroke="#4caf50"] { stroke: var(--qz-accent); }
.qzr-mascot-svg [fill="#2d8a4e"]   { fill: var(--qz-accent-deep); }
.qzr-mascot-svg [stroke="#2d8a4e"] { stroke: var(--qz-accent-deep); }
.qzr-mascot-svg text               { fill: var(--qz-accent); } /* badge "Q" */

/* ── Base : masque les éléments optionnels, montre les défauts idle ───────── */
.qzr-m-eye-r-open,
.qzr-m-mouth-happy,
.qzr-m-mouth-sad,
.qzr-m-mouth-wow,
.qzr-m-mouth-victory,
.qzr-m-mouth-thinking { opacity: 0; }
.qzr-m-eye-r-wink,
.qzr-m-mouth-idle { opacity: 1; }

/* --- Bouche parlante (TTS) --- Ne s'anime QUE pendant la lecture : la classe
   `.qzr-speaking` est posée par qzr-speech.js sur onstart et retirée sur onend —
   jamais en boucle permanente. Sinon la bouche « talk » est invisible. */
.qzr-m-mouth-talk { opacity: 0; transform-box: fill-box; transform-origin: center; }
.qzr-speaking .qzr-m-mouth-idle,
.qzr-speaking .qzr-m-mouth-happy,
.qzr-speaking .qzr-m-mouth-sad,
.qzr-speaking .qzr-m-mouth-wow,
.qzr-speaking .qzr-m-mouth-victory,
.qzr-speaking .qzr-m-mouth-thinking { opacity: 0 !important; }
.qzr-speaking .qzr-m-mouth-talk { opacity: 1; animation: qzrMouthTalk .19s ease-in-out infinite; }
@keyframes qzrMouthTalk { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .qzr-speaking .qzr-m-mouth-talk { animation: none; opacity: 1; } }

.qzr-m-eye-l,
.qzr-m-eye-r-open,
.qzr-m-eye-r-wink,
.qzr-m-mouth-idle,
.qzr-m-mouth-happy,
.qzr-m-mouth-sad,
.qzr-m-mouth-wow,
.qzr-m-mouth-victory,
.qzr-m-mouth-thinking,
.qzr-m-sparks,
.qzr-m-arm-l,
.qzr-m-arm-r,
.qzr-m-head,
.qzr-m-cape,
.qzr-m-bolt,
.qzr-m-leg-l,
.qzr-m-leg-r {
  transition: opacity .3s ease, transform .3s ease, fill .3s ease;
}

/* ── idle : respiration + clignement + cape ───────────────────────────────── */
[data-qzr-expr="idle"] .qzr-mascot-svg { animation: qzrBreathe 3.5s ease-in-out infinite; }
[data-qzr-expr="idle"] .qzr-m-eye-l { transform-origin: 88px 62px; animation: qzrBlinkEye 4.5s ease infinite; }
[data-qzr-expr="idle"] .qzr-m-eye-r-wink { animation: qzrBlinkWink 4.5s ease infinite; }
[data-qzr-expr="idle"] .qzr-m-cape { transform-origin: 72px 120px; animation: qzrIdleCapeFlutter 4s ease-in-out infinite alternate; }

/* ── happy ────────────────────────────────────────────────────────────────── */
[data-qzr-expr="happy"] .qzr-m-eye-r-wink  { opacity: 0; }
[data-qzr-expr="happy"] .qzr-m-eye-r-open  { opacity: 1; }
[data-qzr-expr="happy"] .qzr-m-mouth-idle  { opacity: 0; }
[data-qzr-expr="happy"] .qzr-m-mouth-happy { opacity: 1; }
[data-qzr-expr="happy"] .qzr-m-arm-r { transform-origin: 128px 120px; animation: qzrThumbWiggle .4s ease 2; }

/* ── sad ──────────────────────────────────────────────────────────────────── */
[data-qzr-expr="sad"] .qzr-m-eye-r-wink { opacity: 0; }
[data-qzr-expr="sad"] .qzr-m-eye-r-open { opacity: 1; }
[data-qzr-expr="sad"] .qzr-m-eye-l      { ry: 4; transform: translateY(2px); }
[data-qzr-expr="sad"] .qzr-m-eye-r-open { ry: 4; transform: translateY(2px); }
[data-qzr-expr="sad"] .qzr-m-mouth-idle { opacity: 0; }
[data-qzr-expr="sad"] .qzr-m-mouth-sad  { opacity: 1; stroke: var(--qz-error); }
[data-qzr-expr="sad"] .qzr-m-sparks     { opacity: .25; }
[data-qzr-expr="sad"] .qzr-m-head { animation: qzrSadShake .4s ease 1; }

/* ── wow ──────────────────────────────────────────────────────────────────── */
[data-qzr-expr="wow"] .qzr-m-eye-r-wink { opacity: 0; }
[data-qzr-expr="wow"] .qzr-m-eye-r-open { opacity: 1; }
[data-qzr-expr="wow"] .qzr-m-eye-l      { rx: 8; ry: 8; }
[data-qzr-expr="wow"] .qzr-m-eye-r-open { rx: 8; ry: 8; }
[data-qzr-expr="wow"] .qzr-m-mouth-idle { opacity: 0; }
[data-qzr-expr="wow"] .qzr-m-mouth-wow  { opacity: 1; }
[data-qzr-expr="wow"] .qzr-m-sparks { animation: qzrSparksBurst .5s ease 2; }

/* ── victory (yeux dorés) ─────────────────────────────────────────────────── */
[data-qzr-expr="victory"] .qzr-m-eye-r-wink    { opacity: 0; }
[data-qzr-expr="victory"] .qzr-m-eye-r-open    { opacity: 1; fill: var(--qz-energy); }
[data-qzr-expr="victory"] .qzr-m-eye-l         { fill: var(--qz-energy); }
[data-qzr-expr="victory"] .qzr-m-mouth-idle    { opacity: 0; }
[data-qzr-expr="victory"] .qzr-m-mouth-victory { opacity: 1; }
[data-qzr-expr="victory"] .qzr-m-sparks { animation: qzrSparksBurst .5s ease 3; }

/* ── thinking ─────────────────────────────────────────────────────────────── */
[data-qzr-expr="thinking"] .qzr-m-eye-l        { ry: 3; }
[data-qzr-expr="thinking"] .qzr-m-mouth-idle     { opacity: 0; }
[data-qzr-expr="thinking"] .qzr-m-mouth-thinking { opacity: 1; }
[data-qzr-expr="thinking"] .qzr-m-head { animation: qzrHeadTilt 1.5s ease infinite alternate; }

/* ── dance (chorégraphie complète) ────────────────────────────────────────── */
[data-qzr-expr="dance"] .qzr-mascot-svg { animation: qzrDanceBody .6s ease-in-out infinite alternate; }
[data-qzr-expr="dance"] .qzr-m-eye-r-wink  { opacity: 0; }
[data-qzr-expr="dance"] .qzr-m-eye-r-open  { opacity: 1; }
[data-qzr-expr="dance"] .qzr-m-mouth-idle  { opacity: 0; }
[data-qzr-expr="dance"] .qzr-m-mouth-happy { opacity: 1; }
[data-qzr-expr="dance"] .qzr-m-head  { transform-origin: 100px 69px; animation: qzrDanceHead .6s ease-in-out infinite alternate; }
[data-qzr-expr="dance"] .qzr-m-arm-l { transform-origin: 72px 120px;  animation: qzrDanceArmL .6s ease-in-out infinite alternate; }
[data-qzr-expr="dance"] .qzr-m-arm-r { transform-origin: 128px 120px; animation: qzrDanceArmR .6s ease-in-out infinite alternate-reverse; }
[data-qzr-expr="dance"] .qzr-m-leg-l { transform-origin: 88px 170px;  animation: qzrDanceFootL .3s ease-in-out infinite alternate; }
[data-qzr-expr="dance"] .qzr-m-leg-r { transform-origin: 112px 170px; animation: qzrDanceFootR .3s ease-in-out infinite alternate-reverse; }
[data-qzr-expr="dance"] .qzr-m-cape  { animation: qzrDanceCape .3s ease-in-out infinite alternate; }
[data-qzr-expr="dance"] .qzr-m-sparks { animation: qzrSparksBurst .4s ease infinite; }

/* ── celebrate (level-up / défi) ──────────────────────────────────────────── */
[data-qzr-expr="celebrate"] .qzr-m-eye-r-wink    { opacity: 0; }
[data-qzr-expr="celebrate"] .qzr-m-eye-r-open    { opacity: 1; fill: var(--qz-energy); rx: 7; ry: 7; }
[data-qzr-expr="celebrate"] .qzr-m-eye-l         { fill: var(--qz-energy); rx: 7; ry: 7; }
[data-qzr-expr="celebrate"] .qzr-m-mouth-idle    { opacity: 0; }
[data-qzr-expr="celebrate"] .qzr-m-mouth-victory { opacity: 1; }
[data-qzr-expr="celebrate"] .qzr-m-arm-l { transform-origin: 72px 120px;  animation: qzrCelebrateArmL .5s ease infinite alternate; }
[data-qzr-expr="celebrate"] .qzr-m-arm-r { transform-origin: 128px 120px; animation: qzrCelebrateArmR .5s ease infinite alternate-reverse; }
[data-qzr-expr="celebrate"] .qzr-m-sparks { animation: qzrSparksBurst .3s ease infinite; }
[data-qzr-expr="celebrate"] .qzr-m-bolt   { animation: qzrBoltFlash .25s ease infinite; }

/* ── curious ──────────────────────────────────────────────────────────────── */
[data-qzr-expr="curious"] .qzr-m-eye-l         { rx: 5; ry: 7; }
[data-qzr-expr="curious"] .qzr-m-eye-r-wink    { opacity: 0; }
[data-qzr-expr="curious"] .qzr-m-eye-r-open    { opacity: 1; rx: 7; ry: 5; }
[data-qzr-expr="curious"] .qzr-m-mouth-idle    { opacity: 0; }
[data-qzr-expr="curious"] .qzr-m-mouth-thinking { opacity: 1; }
[data-qzr-expr="curious"] .qzr-m-head { transform-origin: 100px 69px; animation: qzrCuriousTilt 2s ease-in-out infinite alternate; }

/* ── sleep ────────────────────────────────────────────────────────────────── */
[data-qzr-expr="sleep"] .qzr-m-eye-l      { ry: 1.5; opacity: .5; }
[data-qzr-expr="sleep"] .qzr-m-eye-r-wink { opacity: .5; }
[data-qzr-expr="sleep"] .qzr-m-mouth-idle { opacity: 0; }
[data-qzr-expr="sleep"] .qzr-m-mouth-thinking { opacity: .6; }
[data-qzr-expr="sleep"] .qzr-m-sparks     { opacity: 0; }
[data-qzr-expr="sleep"] .qzr-m-bolt       { opacity: .2 !important; }
[data-qzr-expr="sleep"] .qzr-m-head { animation: qzrSleepBob 3s ease-in-out infinite; }

/* ── excited (récompense / coffre) ────────────────────────────────────────── */
[data-qzr-expr="excited"] .qzr-m-eye-r-wink    { opacity: 0; }
[data-qzr-expr="excited"] .qzr-m-eye-r-open    { opacity: 1; rx: 8; ry: 8; }
[data-qzr-expr="excited"] .qzr-m-eye-l         { rx: 8; ry: 8; }
[data-qzr-expr="excited"] .qzr-m-mouth-idle    { opacity: 0; }
[data-qzr-expr="excited"] .qzr-m-mouth-wow     { opacity: 1; }
[data-qzr-expr="excited"] .qzr-m-arm-l { transform-origin: 72px 120px;  animation: qzrExcitedShake .15s ease infinite alternate; }
[data-qzr-expr="excited"] .qzr-m-arm-r { transform-origin: 128px 120px; animation: qzrExcitedShake .15s ease infinite alternate-reverse; }
[data-qzr-expr="excited"] .qzr-m-sparks { animation: qzrSparksBurst .3s ease infinite; }
[data-qzr-expr="excited"] .qzr-m-bolt   { animation: qzrBoltFlash .2s ease infinite; }

/* ── love (score parfait — yeux cœur rouges) ──────────────────────────────── */
[data-qzr-expr="love"] .qzr-m-eye-l         { fill: var(--qz-error); rx: 7; ry: 6; }
[data-qzr-expr="love"] .qzr-m-eye-r-wink    { opacity: 0; }
[data-qzr-expr="love"] .qzr-m-eye-r-open    { opacity: 1; fill: var(--qz-error); rx: 7; ry: 6; }
[data-qzr-expr="love"] .qzr-m-mouth-idle    { opacity: 0; }
[data-qzr-expr="love"] .qzr-m-mouth-happy   { opacity: 1; }
[data-qzr-expr="love"] .qzr-m-head { animation: qzrLovePulse 1s ease-in-out infinite; }
[data-qzr-expr="love"] .qzr-m-sparks { animation: qzrSparksBurst .6s ease infinite; }

/* ── Keyframes ────────────────────────────────────────────────────────────── */
@keyframes qzrThumbWiggle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-8deg); } }
@keyframes qzrSparksBurst { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.4); opacity: 1; } }
@keyframes qzrHeadTilt { 0% { transform: rotate(0deg); } 100% { transform: rotate(3deg); } }
@keyframes qzrBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes qzrVictoryBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-10px) scale(1.08); }
  60% { transform: translateY(-4px) scale(1.04); }
}
@keyframes qzrBreathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.012) translateY(-1px); } }
@keyframes qzrBlinkEye { 0%, 90%, 100% { transform: scaleY(1); } 94%, 96% { transform: scaleY(0.1); } }
@keyframes qzrBlinkWink { 0%, 90%, 100% { opacity: 1; } 94%, 96% { opacity: 0; } }
@keyframes qzrIdleCapeFlutter { 0% { transform: skewX(0deg) rotate(0deg); } 50% { transform: skewX(1.5deg) rotate(.5deg); } 100% { transform: skewX(-1deg) rotate(-.3deg); } }
@keyframes qzrSadShake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes qzrDanceBody { 0% { transform: translateX(-3px) rotate(-2deg); } 100% { transform: translateX(3px) rotate(2deg); } }
/* One mascot on screen at a time: while the inter-question / final score sheet
   is open (it carries its own mascot — solo interim card, multiplayer interim
   bubble or podium), suppress the play-surface mascots so two never show at
   once. Toggled by body.qzr-session-scoring alongside #scoreModal.open; cleared
   in hideRankings so the play mascot reappears for the next question. */
body.qzr-session-scoring #quizRealTimeContainer .qzr-live-mascot--play,
body.qzr-session-scoring #quizRealTimeContainer .qzr-live-mascot--feedback,
body.qzr-session-scoring .solo-mascot {
  display: none !important;
}

@keyframes qzrDanceHead { 0% { transform: rotate(-4deg) translateY(-2px); } 100% { transform: rotate(4deg) translateY(0px); } }
@keyframes qzrDanceArmL { 0% { transform: rotate(15deg); } 100% { transform: rotate(-10deg); } }
@keyframes qzrDanceArmR { 0% { transform: rotate(-15deg); } 100% { transform: rotate(10deg); } }
@keyframes qzrDanceCape { 0% { transform: skewX(-3deg); } 100% { transform: skewX(3deg); } }
@keyframes qzrDanceFootL { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } }
@keyframes qzrDanceFootR { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } }
@keyframes qzrCelebrateArmL { 0% { transform: rotate(0deg); } 100% { transform: rotate(20deg); } }
@keyframes qzrCelebrateArmR { 0% { transform: rotate(0deg); } 100% { transform: rotate(-20deg); } }
@keyframes qzrBoltFlash { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.3); } }
@keyframes qzrCuriousTilt { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg) translateY(-1px); } }
@keyframes qzrSleepBob { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(3deg) translateY(2px); } }
@keyframes qzrExcitedShake { 0% { transform: rotate(-5deg); } 100% { transform: rotate(5deg); } }
@keyframes qzrLovePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }