/* =========================================================
   AVATAR BATTLE SOLO — EFFETS DE COMBAT
   ---------------------------------------------------------
   Module purement visuel. Il n'existe que pour donner de
   l'énergie au moment où une manche se joue.

   RÈGLES TENUES ICI
   · rien ne masque durablement les cartes, les boutons
     ou les scores : tout est en pointer-events:none et
     tout disparaît en moins de deux secondes
   · aucune bibliothèque, aucune vidéo, aucune image
   · transform et opacity uniquement — ce sont les deux
     seules propriétés que le GPU d'une tablette de 2020
     anime sans effort
   · prefers-reduced-motion coupe tout

   Tout est préfixé « fx- » : aucune règle ne peut fuir vers
   le reste du jeu.
   ========================================================= */

/* La scène a besoin d'un repère pour placer les effets. */
.sb-arene{ position:relative; }

/* =========================================================
   LES PORTRAITS DES ADVERSAIRES
   Déposés dans adversaires/. Tant qu'il n'y en a pas, rien
   de tout ceci ne s'applique et l'emoji reste.
   ========================================================= */
.sb-pick-photo{
  position:relative;
  padding-left:86px;          /* la place de la vignette */
  overflow:hidden;
}
.sb-pick-photo .sb-portrait{
  position:absolute; left:12px; top:50%;
  transform:translateY(-50%);
  width:62px; height:62px;
  border-radius:14px; object-fit:cover;
  border:2px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.sb-pick-photo:hover .sb-portrait{ border-color:rgba(255,255,255,.3); }

@media (max-width:420px){
  .sb-pick-photo{ padding-left:74px; }
  .sb-pick-photo .sb-portrait{ width:52px; height:52px; }
}

/* ---------------------------------------------------------
   1. LA CARTE QUI JOUE S'AVANCE
   --------------------------------------------------------- */
.sb-card{
  transition:transform .42s cubic-bezier(.34,1.3,.5,1), filter .42s ease;
  will-change:transform;
}
.sb-card.fx-avance{
  transform:translateX(26px) scale(1.045);
  filter:drop-shadow(0 0 22px rgba(155,227,74,.45));
  z-index:6;
}
.sb-card.fx-avance-inv{
  transform:translateX(-26px) scale(1.045);
  filter:drop-shadow(0 0 22px rgba(239,109,109,.45));
  z-index:6;
}
/* La carte qui encaisse recule et vibre, très brièvement. */
.sb-card.fx-touche{ animation:fx-secousse .42s ease-out; }
@keyframes fx-secousse{
  0%  { transform:translateX(0)    rotate(0); }
  18% { transform:translateX(-9px) rotate(-1.4deg); }
  36% { transform:translateX(7px)  rotate(1.1deg); }
  54% { transform:translateX(-5px) rotate(-.7deg); }
  72% { transform:translateX(3px)  rotate(.4deg); }
  100%{ transform:translateX(0)    rotate(0); }
}
/* Un flash court sur la carte touchée */
.sb-card.fx-touche::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:rgba(255,255,255,.55);
  animation:fx-flash .3s ease-out forwards;
  pointer-events:none;
}
@keyframes fx-flash{ from{ opacity:.55; } to{ opacity:0; } }

/* ---------------------------------------------------------
   2. L'ANNONCE
   --------------------------------------------------------- */
.fx-couche{
  position:absolute; inset:0; z-index:9;
  pointer-events:none;          /* JAMAIS cliquable */
  overflow:hidden;
}

.fx-annonce{
  position:absolute; left:50%; top:38%;
  transform:translate(-50%,-50%);
  font-family:var(--ac-titre, 'Montserrat', sans-serif);
  font-weight:900; font-style:italic;
  font-size:clamp(30px,7.4vw,74px);
  letter-spacing:-1.6px; line-height:1;
  white-space:nowrap; text-align:center;
  -webkit-text-stroke:2px rgba(0,0,0,.55);
  text-shadow:0 5px 0 rgba(0,0,0,.35);
  animation:fx-annonce-in 1.05s cubic-bezier(.18,1.4,.38,1) forwards;
}
@keyframes fx-annonce-in{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(2.4) rotate(-9deg); }
  16% { opacity:1; transform:translate(-50%,-50%) scale(.94) rotate(-2deg); }
  28% {            transform:translate(-50%,-50%) scale(1.06) rotate(-2deg); }
  38% {            transform:translate(-50%,-50%) scale(1)    rotate(-2deg); }
  78% { opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-58%) scale(1.04) rotate(-2deg); }
}
/* Le petit sous-titre : le nom de la figure jouée */
.fx-sous{
  position:absolute; left:50%; top:52%;
  transform:translate(-50%,-50%);
  font-family:var(--ac-titre, 'Montserrat', sans-serif);
  font-weight:800; font-size:clamp(11px,2.1vw,16px);
  letter-spacing:3px; text-transform:uppercase;
  color:#fff; opacity:0; white-space:nowrap;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  animation:fx-sous-in 1.05s ease-out forwards;
}
@keyframes fx-sous-in{
  0%,14%{ opacity:0; transform:translate(-50%,-42%); }
  30%   { opacity:.92; transform:translate(-50%,-50%); }
  80%   { opacity:.92; }
  100%  { opacity:0; }
}

/* ---------------------------------------------------------
   3. LE PROJECTILE
   Il part de la carte qui joue et file vers l'autre.
   --------------------------------------------------------- */
.fx-tir{
  position:absolute; top:46%; left:14%;
  font-size:clamp(26px,5vw,46px); line-height:1;
  filter:drop-shadow(0 0 12px currentColor);
  animation:fx-tir-va .5s cubic-bezier(.4,0,.7,1) forwards;
}
.fx-tir.inv{ left:auto; right:14%; animation-name:fx-tir-vient; }
@keyframes fx-tir-va{
  0%  { opacity:0; transform:translateX(0)     scale(.5); }
  16% { opacity:1; }
  100%{ opacity:0; transform:translateX(66vw)  scale(1.5); }
}
@keyframes fx-tir-vient{
  0%  { opacity:0; transform:translateX(0)     scale(.5); }
  16% { opacity:1; }
  100%{ opacity:0; transform:translateX(-66vw) scale(1.5); }
}
@media (min-width:900px){
  @keyframes fx-tir-va    { 0%{opacity:0;transform:translateX(0) scale(.5);} 16%{opacity:1;} 100%{opacity:0;transform:translateX(560px) scale(1.5);} }
  @keyframes fx-tir-vient { 0%{opacity:0;transform:translateX(0) scale(.5);} 16%{opacity:1;} 100%{opacity:0;transform:translateX(-560px) scale(1.5);} }
}

/* ---------------------------------------------------------
   4. LES HUIT STYLES
   Chacun ne change que la couleur, l'arrière-plan et le
   mouvement du projectile. Le squelette reste le même :
   c'est ce qui garde le module léger.
   --------------------------------------------------------- */

/* — a. FLAMMES — */
.fx-flamme .fx-annonce{ color:#FFB03A; }
.fx-flamme .fx-tir{ color:#FF7A1A; animation-duration:.46s; }
.fx-flamme .fx-couche::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 50% 62%, rgba(255,122,26,.30), transparent 68%);
  animation:fx-fond .9s ease-out forwards;
}

/* — b. ROTATION — */
.fx-rotation .fx-annonce{ color:#7FD4FF; }
.fx-rotation .fx-tir{ color:#7FD4FF; animation:fx-tir-tourne .56s linear forwards; }
.fx-rotation.inv .fx-tir{ animation-name:fx-tir-tourne-inv; }
@keyframes fx-tir-tourne{
  0%  { opacity:0; transform:translateX(0) rotate(0) scale(.6); }
  14% { opacity:1; }
  100%{ opacity:0; transform:translateX(62vw) rotate(900deg) scale(1.3); }
}
@keyframes fx-tir-tourne-inv{
  0%  { opacity:0; transform:translateX(0) rotate(0) scale(.6); }
  14% { opacity:1; }
  100%{ opacity:0; transform:translateX(-62vw) rotate(-900deg) scale(1.3); }
}

/* — c. SAUT — */
.fx-saut .fx-annonce{ color:#9BE34A; }
.fx-saut .fx-tir{ color:#9BE34A; animation:fx-tir-saute .58s ease-out forwards; }
.fx-saut.inv .fx-tir{ animation-name:fx-tir-saute-inv; }
@keyframes fx-tir-saute{
  0%  { opacity:0; transform:translate(0,0) scale(.6); }
  14% { opacity:1; }
  50% { transform:translate(31vw,-56px) scale(1.25); }
  100%{ opacity:0; transform:translate(62vw,0) scale(1.1); }
}
@keyframes fx-tir-saute-inv{
  0%  { opacity:0; transform:translate(0,0) scale(.6); }
  14% { opacity:1; }
  50% { transform:translate(-31vw,-56px) scale(1.25); }
  100%{ opacity:0; transform:translate(-62vw,0) scale(1.1); }
}

/* — d. ONDE MUSICALE — */
.fx-onde .fx-annonce{ color:#C89BFF; }
.fx-onde .fx-tir{ color:#C89BFF; }
.fx-onde .fx-couche::before{
  content:''; position:absolute; left:50%; top:46%;
  width:40px; height:40px; margin:-20px 0 0 -20px;
  border-radius:50%; border:3px solid rgba(200,155,255,.65);
  animation:fx-onde-pousse .85s ease-out forwards;
}
@keyframes fx-onde-pousse{
  from{ transform:scale(.3); opacity:.9; }
  to  { transform:scale(11); opacity:0; }
}

/* — e. PAS RAPIDES — */
.fx-pas .fx-annonce{ color:#F0997B; }
.fx-pas .fx-tir{ color:#F0997B; animation-duration:.4s; }
.fx-pas .fx-couche::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(105deg,
    rgba(240,153,123,.20) 0 3px, transparent 3px 26px);
  animation:fx-fond .55s ease-out forwards;
}

/* — f. DOUBLE IMPACT — */
.fx-double .fx-annonce{ color:#FF6B8B; }
.fx-double .fx-tir{ color:#FF6B8B; }
.fx-double .fx-tir.deux{ top:58%; animation-delay:.14s; }
.fx-double .fx-couche::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(50% 60% at 50% 50%, rgba(255,107,139,.26), transparent 66%);
  animation:fx-fond .8s ease-out forwards;
}

/* — g. ÉCLAIRS — */
.fx-eclair .fx-annonce{ color:#FFE45C; }
.fx-eclair .fx-tir{ color:#FFE45C; animation-duration:.36s; }
.fx-eclair .fx-couche::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(92deg, transparent 0%, rgba(255,228,92,.42) 48%, transparent 100%);
  animation:fx-stroboscope .62s steps(2, end) 3 forwards;
}
@keyframes fx-stroboscope{ 0%{opacity:.65;} 50%{opacity:0;} 100%{opacity:0;} }

/* — h. EFFET FINAL — */
.fx-final .fx-annonce{
  color:#FF3B3B;
  font-size:clamp(34px,9vw,92px);
  -webkit-text-stroke:3px rgba(0,0,0,.7);
  animation-duration:1.35s;
}
.fx-final .fx-tir{ color:#FF3B3B; animation-duration:.6s; }
.fx-final .fx-couche::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 80% at 50% 50%, rgba(255,59,59,.34), rgba(0,0,0,.55) 78%);
  animation:fx-fond 1.25s ease-out forwards;
}
.fx-final .fx-sous{ color:#FFD9D9; letter-spacing:5px; }

@keyframes fx-fond{ from{ opacity:1; } to{ opacity:0; } }

/* ---------------------------------------------------------
   5. PETITS ÉCRANS
   Sur un téléphone les cartes sont empilées : on réduit les
   déplacements pour ne rien pousser hors de l'écran.
   --------------------------------------------------------- */
@media (max-width:760px){
  .sb-card.fx-avance    { transform:translateY(-8px) scale(1.03); }
  .sb-card.fx-avance-inv{ transform:translateY(-8px) scale(1.03); }
  .fx-annonce{ font-size:clamp(26px,9vw,44px); -webkit-text-stroke-width:1.5px; }
  .fx-tir{ font-size:30px; }
}

/* ---------------------------------------------------------
   6. MOUVEMENT RÉDUIT
   Le module se coupe entièrement. Le jeu, lui, continue :
   les scores et les résultats s'affichent normalement.
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fx-couche{ display:none !important; }
  .sb-card{ transition:none !important; }
  .sb-card.fx-avance,
  .sb-card.fx-avance-inv{ transform:none !important; filter:none !important; }
  .sb-card.fx-touche{ animation:none !important; }
  .sb-card.fx-touche::after{ display:none !important; }
}