/*
 * Personnage qui apparaît sur une étape — page joueur (lot 1, 03/10/2026).
 * Chargée par src/pages/teamquester.js seulement si une étape porte un
 * personnage rendu. Jetons de l'univers (--lq-*) avec repli pour les quêtes
 * sans univers (rendu historique) : surface claire, encre sombre, accent de
 * la marque (--c).
 * ⚠ Cache-bust : `?v=` NUMÉRIQUE de LQ_APPARITION_CSS (teamquester.js).
 */

/* Région d'annonce : présente dès le chargement, hors écran. */
.lq-ap-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

.lq-ap{
  --lq-ap-dur:calc(var(--lq-dur,220ms) * 2);
  --lq-ap-ease:var(--lq-ease,cubic-bezier(.2,.8,.2,1));
  --lq-ap-accent:var(--lq-accent,var(--c,#2d6a4f));
  position:fixed;z-index:24;
  left:var(--lq-ap-x,0);top:var(--lq-ap-y,0);width:var(--lq-ap-fw,auto);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:auto;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  opacity:0;
  transition:transform var(--lq-ap-dur) var(--lq-ap-ease),opacity var(--lq-ap-dur) var(--lq-ap-ease);
  will-change:transform,opacity;
}
.lq-ap--gauche{align-items:flex-start;transform:translate3d(calc(-100% - 24px),0,0)}
.lq-ap--droite{align-items:flex-end;transform:translate3d(calc(100% + 24px),0,0)}
.lq-ap--haut{transform:translate3d(0,-60vh,0)}
.lq-ap--bas{transform:translate3d(0,60vh,0)}
.lq-ap.is-in{opacity:1;transform:none}
.lq-ap.is-out{opacity:0;transition-duration:calc(var(--lq-ap-dur) * .6)}
/* Réaction qui part AVEC sa fenêtre (« Bonne réponse » / « Raté », fondu de 300 ms) : même rythme, quel que soit l'univers. */
.lq-ap.is-out.is-quick{transition-duration:250ms}
.lq-ap.is-still,.lq-ap.is-still.is-out{transition:none}
/* Mesure hors écran, avant placement. */
.lq-ap.is-measure{visibility:hidden;left:-9999px;top:0;transition:none}

.lq-ap-fig{position:relative;width:var(--lq-ap-w,120px);height:var(--lq-ap-h,160px);flex:none}
.lq-ap-img{display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));pointer-events:none}

/* Image sans transparence : médaillon encadré (jamais un rectangle brut). */
.lq-ap--medal .lq-ap-img{box-sizing:border-box;object-fit:cover;filter:none;border-radius:50%;
  border:3px solid var(--lq-ap-accent);background:var(--lq-surface,#fff);
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 3px var(--lq-surface,#fff)}

/* Bulle : surface, accent et police de l'univers. */
.lq-ap-bubble{
  position:relative;box-sizing:border-box;margin:0;
  width:max-content;max-width:var(--lq-ap-bw,260px);
  padding:10px 14px;border-radius:16px;
  background:var(--lq-surface,#ffffff);color:var(--lq-ink,#14181f);
  border:2px solid var(--lq-ap-accent);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  font:500 15px/1.4 var(--lq-font-text,inherit);
  overflow-wrap:anywhere;text-align:left;
}
.lq-ap-who{display:block;margin-bottom:2px;font:700 12px/1.3 var(--lq-font-title,inherit);
  letter-spacing:.02em;color:var(--lq-accent-ink-text,var(--lq-ink,#14181f))}
/* Dispositions. DOM : bulle puis personnage ; l'ordre visuel vient d'ici.
   row = bulle à côté (vers l'intérieur de l'écran), col = bulle au-dessus
   (au-dessous si le personnage entre par le haut). */
.lq-ap.is-row{flex-direction:row;align-items:flex-start}
.lq-ap.is-row.lq-ap--gauche .lq-ap-fig,.lq-ap.is-row.lq-ap--haut .lq-ap-fig,.lq-ap.is-row.lq-ap--bas .lq-ap-fig{order:0}
.lq-ap.is-row.lq-ap--gauche .lq-ap-bubble,.lq-ap.is-row.lq-ap--haut .lq-ap-bubble,.lq-ap.is-row.lq-ap--bas .lq-ap-bubble{order:1}
.lq-ap.is-row .lq-ap-bubble{margin-top:12px}
.lq-ap.is-col.lq-ap--haut .lq-ap-fig{order:0}
.lq-ap.is-col.lq-ap--haut .lq-ap-bubble{order:1}

/* Pointe de la bulle, vers le personnage. */
.lq-ap-bubble::after{content:"";position:absolute;width:12px;height:12px;
  background:inherit;border:inherit;border-top:0;border-left:0}
.lq-ap.is-col .lq-ap-bubble::after{bottom:-8px;left:calc(50% - 6px);transform:rotate(45deg)}
.lq-ap.is-col.lq-ap--gauche .lq-ap-bubble::after{left:28px}
.lq-ap.is-col.lq-ap--droite .lq-ap-bubble::after{left:auto;right:28px}
.lq-ap.is-col.lq-ap--haut .lq-ap-bubble::after{bottom:auto;top:-8px;transform:rotate(225deg)}
.lq-ap.is-row .lq-ap-bubble::after{top:22px;left:-8px;transform:rotate(135deg)}
.lq-ap.is-row.lq-ap--droite .lq-ap-bubble::after{left:auto;right:-8px;transform:rotate(-45deg)}

/* Fermer : 44 px, DANS le cadre (coin haut du personnage, côté intérieur de
   l'écran) — un bouton qui déborderait échapperait au contrôle de recouvrement. */
.lq-ap-x{position:absolute;top:0;width:44px;height:44px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:2px solid var(--lq-ap-accent);
  background:var(--lq-surface,#fff);color:var(--lq-ink,#14181f);
  font:700 24px/1 system-ui,sans-serif;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.3)}
.lq-ap-x{right:0}
.lq-ap--droite .lq-ap-x{right:auto;left:0}
/* Bulle à côté : le bouton passe au coin EXTÉRIEUR, loin de la pointe. */
.lq-ap.is-row.lq-ap--droite .lq-ap-x{left:auto;right:0}
.lq-ap.is-row.lq-ap--gauche .lq-ap-x{right:auto;left:0}
.lq-ap-x:focus-visible{outline:3px solid var(--lq-accent-text,var(--lq-ap-accent));outline-offset:2px}

@media (prefers-reduced-motion:reduce){.lq-ap,.lq-ap.is-out{transition:none!important}}
html.paused .lq-ap,html.paused .lq-ap.is-out{transition:none!important}

/* Lot 3 — portrait du personnage dans la modale de narration de la même étape. */
.lq-ap-narr{display:flex;justify-content:center;margin:0 auto 10px}
.lq-ap-narr-img{display:block;width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.lq-ap-narr--medal .lq-ap-narr-img{object-fit:cover;border-radius:50%;border:3px solid var(--lq-accent,var(--c,#2d6a4f));filter:none}

/* Lot 4 — bibliothèque : pose = image + masque d'accent, fondu croisé entre
   poses, petit rebond à l'arrivée, respiration au repos. Transform / opacity
   seulement ; rien sous « mouvement réduit » ni sous html.paused. */
.lq-ap-pose{position:absolute;inset:0;transition:opacity 200ms ease}
.lq-ap-pose.is-entering,.lq-ap-pose.is-leaving{opacity:0}
.lq-ap-accent{position:absolute;inset:0;pointer-events:none;
  background:var(--lq-accent,var(--c,#2d6a4f));mix-blend-mode:color;
  -webkit-mask-image:var(--lq-ap-mask);mask-image:var(--lq-ap-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.lq-ap-bubble{transition:opacity 200ms ease}
.lq-ap-bubble.is-gone{opacity:0;visibility:hidden;transition:opacity 200ms ease,visibility 0s 200ms}
@keyframes lqApBounce{0%{transform:translateY(0)}40%{transform:translateY(-7px)}70%{transform:translateY(2px)}100%{transform:translateY(0)}}
@keyframes lqApBreath{from{transform:scale(1,1)}to{transform:scale(1.008,1.018)}}
@media (prefers-reduced-motion:no-preference){
  html:not(.paused) .lq-ap.is-in:not(.is-out) .lq-ap-fig{animation:lqApBounce 420ms var(--lq-ease,ease-out) calc(var(--lq-dur,220ms) * 2) 1 both}
  html:not(.paused) .lq-ap--lib.is-in:not(.is-out) .lq-ap-pose{transform-origin:50% 100%;animation:lqApBreath 1.6s ease-in-out calc(var(--lq-dur,220ms) * 2 + 420ms) infinite alternate}
}
@media (prefers-reduced-motion:reduce){.lq-ap-pose,.lq-ap-bubble{transition:none!important}}
html.paused .lq-ap-pose,html.paused .lq-ap-bubble{transition:none!important}

/* Bouton Fermer DANS la bulle (lot 4) : flottant au coin, le texte l'entoure. */
.lq-ap-bubble .lq-ap-x{position:relative;top:auto;left:auto;right:auto;float:right;margin:-6px -8px 2px 8px;width:44px;height:44px;box-shadow:none}
.lq-ap--droite .lq-ap-bubble .lq-ap-x,.lq-ap.is-row.lq-ap--droite .lq-ap-bubble .lq-ap-x{left:auto;right:auto}
.lq-ap-said{margin:0}

/* Superposition (04/10) — « après une bonne réponse » sans place à côté de la
   fiche (390 px) : au-dessus de la fiche (22) ET de la barre du haut (25), sous
   les fenêtres modales (≥ 30). Le voile prend le toucher : un geste le renvoie. */
.lq-ap.lq-ap--over{z-index:27}
/* Réaction simultanée à « Bonne réponse » / « Raté » (07/10/2026) : au-dessus de ces fenêtres (z-index 70). */
.lq-ap.lq-ap--top{z-index:80}
.lq-ap-scrim{position:fixed;inset:0;z-index:26;background:rgba(0,0,0,.38);
  cursor:pointer;-webkit-tap-highlight-color:transparent;animation:lqApScrim calc(var(--lq-dur,220ms) * 2) ease both}
@keyframes lqApScrim{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lq-ap-scrim{animation:none}}
html.paused .lq-ap-scrim{animation:none}

/* Troupe en pixel art (`"rendu": "pixel"` à l'import, 04/10) : agrandie sans
   lissage — sinon le navigateur floute les blocs. */
.lq-ap--px .lq-ap-img,.lq-ap-narr--px .lq-ap-narr-img{image-rendering:crisp-edges;image-rendering:pixelated}