/* ============================================================================
   Salle de partie privée : effets « spectacle » (20/09/2026)
   Fichier à part d'app.css : il n'ajoute que des animations, déclenchées par
   les classes que pose assets/salle-fx.js. Thème : tokens du bloc final
   d'app.css (--panel, --stroke, --r, --violet, --cyan, --halo-1…), jamais de
   noir pur ni d'angle droit.
   ============================================================================ */
@property --fx-p{syntax:'<number>';inherits:false;initial-value:1}
:root{
  --fx-violet:var(--violet,#9b7bff);
  --fx-cyan:var(--cyan,#22d3ee);
  --fx-rouge:#ff5f6d;
  --fx-orange:#ffb15c;
  --fx-vert:#5fe0aa;
  --fx-eq0:#7dc0ff;
  --fx-eq1:#ff9d7a;
  --fx-voile:rgba(24,23,31,.86);
}

/* ------------------------------------------------------------ 1. ban animé -- */
.mb-civ{transform-style:preserve-3d;backface-visibility:visible}
.mb-civ.fx-ban{animation:fxBan 1.5s cubic-bezier(.2,.7,.2,1) both;z-index:2}
@keyframes fxBan{
  0%   {opacity:1;filter:none;transform:perspective(600px) rotateY(0deg);box-shadow:0 0 0 0 rgba(255,95,109,0)}
  38%  {opacity:1;filter:none;transform:perspective(600px) rotateY(180deg);box-shadow:0 0 30px -4px rgba(255,95,109,.8)}
  52%  {opacity:1;filter:none;transform:perspective(600px) rotateY(360deg) translateX(0)}
  58%  {transform:perspective(600px) rotateY(360deg) translateX(-4px) rotate(-1.5deg)}
  64%  {transform:perspective(600px) rotateY(360deg) translateX(4px) rotate(1.5deg)}
  70%  {transform:perspective(600px) rotateY(360deg) translateX(-3px)}
  76%  {opacity:1;filter:none;transform:perspective(600px) rotateY(360deg) translateX(0)}
  100% {opacity:.3;filter:grayscale(1);transform:perspective(600px) rotateY(360deg);box-shadow:0 0 0 0 rgba(255,95,109,0)}
}
/* le trait rouge qui se dessine, en diagonale */
.mb-civ.fx-ban::before{content:'';position:absolute;left:8%;right:8%;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;
  background:linear-gradient(90deg,var(--fx-rouge),#ff9aa4);box-shadow:0 0 10px var(--fx-rouge);
  transform:rotate(-24deg) scaleX(0);transform-origin:left center;pointer-events:none;z-index:3;
  animation:fxTrait .35s cubic-bezier(.3,.9,.3,1) .6s both}
@keyframes fxTrait{from{transform:rotate(-24deg) scaleX(0)}to{transform:rotate(-24deg) scaleX(1)}}
.mb-civ.fx-ban em{animation:fxCroix .4s cubic-bezier(.2,1.6,.4,1) .7s both}
@keyframes fxCroix{from{transform:scale(0) rotate(-90deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

/* le slot qui vient d'être pris : « pop » et halo */
.dr-slot.fx-pop{animation:fxPop .7s cubic-bezier(.2,1.5,.4,1) both;z-index:2}
@keyframes fxPop{
  0%  {transform:scale(.35);box-shadow:0 0 0 0 rgba(255,95,109,.9)}
  55% {transform:scale(1.18);box-shadow:0 0 0 10px rgba(255,95,109,0),0 0 28px 2px rgba(255,95,109,.55)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,95,109,0)}
}
.dr-slot.fx-pop em{animation:fxTraitSlot .3s ease-out .25s both}
@keyframes fxTraitSlot{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* -------------------------------------------------- 2. chrono en anneau -- */
.sc .mb-chrono{position:relative;width:88px;height:88px;display:grid;place-items:center;border-radius:50%;
  margin:6px auto 4px;font-variant-numeric:tabular-nums;--fx-p:1;--fx-c:var(--fx-cyan)}
.sc .mb-chrono::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from -90deg,var(--fx-c) calc(var(--fx-p) * 360deg),var(--stroke,rgba(255,255,255,.1)) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#fff calc(100% - 6px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#fff calc(100% - 6px));
  filter:drop-shadow(0 0 6px var(--fx-c));transition:--fx-p .25s linear}
.sc .mb-chrono::after{content:'';position:absolute;inset:8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,var(--glass-2,rgba(255,255,255,.08)),transparent 70%)}
.sc .mb-chrono.fx-orange{--fx-c:var(--fx-orange)}
.sc .mb-chrono.fx-rouge,.sc .mb-chrono.urgent{--fx-c:var(--fx-rouge)}
.sc .mb-chrono.fx-rouge::before{animation:fxAnneauPouls .5s ease-in-out infinite alternate}
@keyframes fxAnneauPouls{from{filter:drop-shadow(0 0 4px var(--fx-rouge))}to{filter:drop-shadow(0 0 14px var(--fx-rouge)) brightness(1.25)}}
.sc .mb-chrono.fx-depart{--fx-c:var(--fx-vert)}
.sc .dr-barre{display:none}                /* l'anneau remplace la barre */

/* l'équipe dont c'est le tour, éclairée ; l'autre en retrait */
.sa-eq{transition:opacity .5s,filter .5s,box-shadow .5s,transform .5s}
.sa-grille.fx-tour0 .sa-eq.eq1,.sa-grille.fx-tour1 .sa-eq.eq0{opacity:.5;filter:saturate(.5) brightness(.85);transform:scale(.985)}
.sa-grille.fx-tour0 .sa-eq.eq0{box-shadow:0 0 0 1px rgba(125,192,255,.55),0 0 40px -8px rgba(125,192,255,.75);animation:fxEqA 1.6s ease-in-out infinite alternate}
.sa-grille.fx-tour1 .sa-eq.eq1{box-shadow:0 0 0 1px rgba(255,157,122,.55),0 0 40px -8px rgba(255,157,122,.75);animation:fxEqB 1.6s ease-in-out infinite alternate}
@keyframes fxEqA{to{box-shadow:0 0 0 1px rgba(125,192,255,.9),0 0 52px -4px rgba(125,192,255,.95)}}
@keyframes fxEqB{to{box-shadow:0 0 0 1px rgba(255,157,122,.9),0 0 52px -4px rgba(255,157,122,.95)}}

/* ------------------------------------------------- 3. compte à rebours -- */
.fx-voile{position:fixed;inset:0;z-index:400;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(1200px 800px at 50% 50%,var(--halo-1,rgba(124,92,255,.26)),transparent 60%),var(--fx-voile);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fxFondu .35s ease-out both}
.fx-voile.fx-sortie{animation:fxFonduOut .4s ease-in both}
@keyframes fxFondu{from{opacity:0}to{opacity:1}}
@keyframes fxFonduOut{to{opacity:0}}
.fx-depart{position:relative;display:grid;place-items:center;width:100%;height:100%}
.fx-chiffre{position:absolute;font-family:'Space Grotesk',var(--mono,monospace);font-weight:800;font-size:min(46vw,300px);line-height:1;
  background:linear-gradient(180deg,#e9e3ff,var(--fx-violet) 55%,var(--fx-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.35);filter:drop-shadow(0 0 22px var(--halo-1,rgba(124,92,255,.5)));
  animation:fxChiffre 1s cubic-bezier(.2,.9,.3,1) both}
@keyframes fxChiffre{
  0%  {opacity:0;transform:scale(3) rotate(-8deg)}
  18% {opacity:1;transform:scale(1) rotate(0)}
  70% {opacity:1;transform:scale(.96)}
  100%{opacity:0;transform:scale(.6)}
}
.fx-onde{position:absolute;width:40vmin;height:40vmin;border-radius:50%;border:3px solid var(--fx-cyan);opacity:0;
  animation:fxOnde 1s ease-out both}
@keyframes fxOnde{0%{opacity:.8;transform:scale(.2)}100%{opacity:0;transform:scale(3.2)}}
.fx-depart-l{position:absolute;bottom:14vh;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--fx-cyan);font-family:var(--mono,monospace)}

/* éclat VS : les deux équipes glissent depuis les côtés */
.fx-vs{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:min(6vw,60px);width:min(100%,1100px);padding:0 16px}
.fx-eq{font-family:'Space Grotesk',var(--mono,monospace);font-weight:800;font-size:clamp(22px,5.5vw,64px);line-height:1.05;text-align:center;white-space:nowrap;
  padding:18px 22px;border-radius:var(--r,20px);border:1px solid var(--stroke,rgba(255,255,255,.12));background:var(--panel,#242331)}
.fx-eq.a{color:var(--fx-eq0);box-shadow:0 0 60px -12px rgba(125,192,255,.9);animation:fxGlisseG .7s cubic-bezier(.2,1.2,.3,1) both}
.fx-eq.b{color:var(--fx-eq1);box-shadow:0 0 60px -12px rgba(255,157,122,.9);animation:fxGlisseD .7s cubic-bezier(.2,1.2,.3,1) both}
.fx-eq small{display:block;font-size:.4em;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--muted,#c9c5d8)}
@keyframes fxGlisseG{from{opacity:0;transform:translateX(-120vw)}to{opacity:1;transform:none}}
@keyframes fxGlisseD{from{opacity:0;transform:translateX(120vw)}to{opacity:1;transform:none}}
.fx-vs-m{position:relative;z-index:1;text-align:center;font-family:'Space Grotesk',var(--mono,monospace);font-weight:900;font-size:clamp(56px,12vw,150px);font-style:italic;line-height:1;
  background:linear-gradient(180deg,#fff,var(--fx-violet) 60%,var(--fx-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 20px var(--fx-violet));animation:fxVs .6s cubic-bezier(.2,1.8,.4,1) .45s both}
@keyframes fxVs{from{opacity:0;transform:scale(0) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(-6deg)}}
.fx-eclat{position:absolute;left:50%;top:50%;width:24vmax;height:24vmax;border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(circle,rgba(34,211,238,.55),rgba(155,123,255,.28) 40%,transparent 70%);
  transform:translate(-50%,-50%) scale(.1);animation:fxEclat .9s ease-out .5s both}
@keyframes fxEclat{0%{opacity:1;transform:translate(-50%,-50%) scale(.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(7)}}
.fx-voile p{margin:0;position:absolute;bottom:12vh;font-size:14px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted,#c9c5d8);animation:fxFondu .6s 1s both}

/* --------------------------------------------- 4. roulette des cartes -- */
.fx-roul{display:grid;gap:18px;justify-items:center;width:min(100%,720px);padding:0 16px}
.fx-roul-t{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--fx-cyan);font-family:var(--mono,monospace)}
.fx-roul-t::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--fx-cyan);box-shadow:0 0 8px var(--fx-cyan);margin-right:10px;vertical-align:middle}
.fx-bandeau{position:relative;width:100%;height:96px;overflow:hidden;border-radius:var(--r,20px);border:1px solid var(--stroke-2,rgba(255,255,255,.2));
  background:linear-gradient(180deg,var(--panel2,#2b2a39),var(--panel,#242331));box-shadow:inset 0 0 40px rgba(0,0,0,.35),0 30px 60px -30px rgba(0,0,0,.9)}
.fx-bandeau::before,.fx-bandeau::after{content:'';position:absolute;left:0;right:0;height:34px;z-index:2;pointer-events:none}
.fx-bandeau::before{top:0;background:linear-gradient(var(--panel,#242331),transparent)}
.fx-bandeau::after{bottom:0;background:linear-gradient(transparent,var(--panel,#242331))}
.fx-bandeau > i{position:absolute;left:14px;right:14px;top:50%;height:52px;margin-top:-26px;border-radius:12px;z-index:1;pointer-events:none;
  border:1px solid var(--fx-violet);box-shadow:0 0 22px -4px var(--fx-violet),inset 0 0 18px rgba(155,123,255,.18)}
.fx-piste{position:absolute;left:0;right:0;top:0;will-change:transform}
.fx-piste span{display:block;height:48px;line-height:48px;text-align:center;font-family:'Space Grotesk',var(--mono,monospace);font-size:26px;font-weight:700;color:var(--muted,#c9c5d8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 20px}
.fx-piste span.ban{text-decoration:line-through;color:var(--dim,#8a8699)}
.fx-roul.fini .fx-bandeau{border-color:var(--fx-cyan);box-shadow:0 0 50px -10px var(--fx-cyan)}
.fx-roul.fini .fx-piste span.gagne{color:var(--txt,#fff);text-shadow:0 0 14px var(--fx-cyan)}
.fx-roul-g{opacity:0;font-family:'Space Grotesk',var(--mono,monospace);font-weight:800;font-size:clamp(34px,8vw,92px);line-height:1.05;text-align:center;
  background:linear-gradient(90deg,#c3b2ff,var(--fx-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px var(--halo-1,rgba(124,92,255,.5)))}
.fx-roul.fini .fx-roul-g{animation:fxGagne .7s cubic-bezier(.2,1.5,.4,1) both}
@keyframes fxGagne{from{opacity:0;transform:scale(.5) translateY(20px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------- 5. résultat -- */
.fx-confetti{position:fixed;inset:0;z-index:390;pointer-events:none}
.sc.res.fx-entree{animation:fxEntree .7s cubic-bezier(.2,.9,.3,1) both}
@keyframes fxEntree{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.mp-alerte.fx-ok{animation:fxVert 1.4s ease-in-out infinite alternate}
@keyframes fxVert{from{box-shadow:0 0 0 0 rgba(49,208,138,.0)}to{box-shadow:0 0 0 2px rgba(49,208,138,.55),0 0 34px -6px rgba(95,224,170,.9)}}
.mp-alerte.fx-ok > b{animation:fxVertT 1.4s ease-in-out infinite alternate}
@keyframes fxVertT{to{text-shadow:0 0 12px rgba(95,224,170,.9);transform:scale(1.04);transform-origin:left}}
.mp-alerte.fx-bad{animation:fxRouge .55s steps(2,jump-none) infinite}
@keyframes fxRouge{from{box-shadow:0 0 0 2px rgba(255,95,109,.9),0 0 40px -6px rgba(255,95,109,.9);background:rgba(255,95,109,.24)}to{box-shadow:0 0 0 0 rgba(255,95,109,0);background:rgba(255,95,109,.08)}}
.mp-alerte.fx-bad > b{animation:fxRougeT .55s steps(2,jump-none) infinite}
@keyframes fxRougeT{from{color:#fff;text-shadow:0 0 12px var(--fx-rouge)}to{color:#ff8f98;text-shadow:none}}

/* ------------------------------------------------------- 6. mode arène -- */
html[data-arene="1"] .dock,html[data-arene="1"] #dock,html[data-arene="1"] .suivis,html[data-arene="1"] nav.main{display:none !important}
html[data-arene="1"] body{padding-left:0 !important;padding-bottom:0 !important}
html[data-arene="1"] .wrap{max-width:min(1720px,calc(100vw - 24px)) !important}
html[data-arene="1"] .sc.bans,html[data-arene="1"] .sc.cartes{position:relative}
html[data-arene="1"] .sc.bans::after,html[data-arene="1"] .sc.cartes::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);background-size:220% 100%;animation:fxBalayage 4s linear infinite}
@keyframes fxBalayage{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------------------------------------------------- 7. bouton sourdine -- */
.fx-son{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:10px;cursor:pointer;flex:none;
  color:var(--muted,#c9c5d8);background:rgba(255,255,255,.06);border:1px solid var(--stroke-2,rgba(255,255,255,.2))}
.fx-son:hover{color:var(--txt,#fff);background:rgba(255,255,255,.12)}
.fx-son svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fx-son.muet{color:var(--dim,#8a8699)}
.fx-son.muet .on{display:none}.fx-son:not(.muet) .off{display:none}

/* ------------------------------------------ 8. mouvement réduit : fondus -- */
@media (prefers-reduced-motion:reduce){
  .mb-civ.fx-ban{animation:fxBanDoux .6s ease-out both}
  @keyframes fxBanDoux{from{opacity:1;filter:none}to{opacity:.3;filter:grayscale(1)}}
  .mb-civ.fx-ban::before,.mb-civ.fx-ban em,.dr-slot.fx-pop em{animation:fxFondu .5s ease-out both}
  .dr-slot.fx-pop{animation:fxFondu .5s ease-out both}
  .sc .mb-chrono.fx-rouge::before,.sa-grille.fx-tour0 .sa-eq.eq0,.sa-grille.fx-tour1 .sa-eq.eq1,
  .mp-alerte.fx-ok,.mp-alerte.fx-ok > b,.mp-alerte.fx-bad,.mp-alerte.fx-bad > b,
  html[data-arene="1"] .sc.bans::after,html[data-arene="1"] .sc.cartes::after{animation:none}
  .sa-grille.fx-tour0 .sa-eq.eq1,.sa-grille.fx-tour1 .sa-eq.eq0{transform:none}
  .mp-alerte.fx-bad{box-shadow:0 0 0 2px rgba(255,95,109,.7)}
  .mp-alerte.fx-ok{box-shadow:0 0 0 2px rgba(49,208,138,.5)}
  .fx-chiffre,.fx-eq.a,.fx-eq.b,.fx-vs-m,.fx-roul.fini .fx-roul-g,.sc.res.fx-entree{animation:fxFondu .6s ease-out both}
  .fx-onde,.fx-eclat{display:none}
  .fx-chiffre{animation:fxChiffreDoux 1s ease-out both}
  @keyframes fxChiffreDoux{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
}

/* --------------------------------------------------------- petits écrans -- */
@media (max-width:640px){
  .sc .mb-chrono{width:76px;height:76px;font-size:30px}
  .fx-vs{grid-template-columns:1fr;gap:10px}
  .fx-eq{white-space:normal;padding:12px 14px}
  .fx-vs-m{font-size:64px}
  .fx-bandeau{height:84px}
  .fx-piste span{font-size:20px}
}

/* étape courante du fil (#saEtapes) : redessiné seulement quand la phase change → l'animation marque le passage */
.sa-etapes span.ici i{animation:fxEtape .6s cubic-bezier(.2,1.5,.4,1) both;box-shadow:0 0 14px -2px var(--fx-cyan)}
@keyframes fxEtape{from{transform:scale(.4)}60%{transform:scale(1.25)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){ .sa-etapes span.ici i{animation:fxFondu .5s both} }