/* Affiche du prochain match : entrée « confrontation ».
   La tuile se coupe en deux le long d'une fissure en zigzag, les deux moitiés chargent,
   se percutent, un arc électrique court sur la fissure, puis la tuile se stabilise.
   Fichier autonome, à charger après app.css ; piloté par match-clash.js.
   La classe html.clash-armed est posée par une ligne de script en tête de page, sauf si le téléphone
   demande de réduire les animations, avec un filet de sécurité de 3 s. */

/* Arène vide dès le premier affichage : la tuile finale ne clignote pas avant l'entrée */
.clash-armed .hero-card[data-clash]:not(.clash-done) {
  background: #101114;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 18px 40px rgba(0, 0, 0, .55);
}
.clash-armed .hero-card[data-clash]:not(.clash-done)::before { opacity: 0; }
.clash-armed .hero-card[data-clash]:not(.clash-done) > :not(.clash-stage) { visibility: hidden; }

/* Scène posée par-dessus la tuile pendant l'entrée */
.clash-stage { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; border-radius: inherit; }
.clash-half { position: absolute; top: 0; left: 0; margin: 0 !important; will-change: transform; }
.clash-half .poster-vs, .clash-half .poster-time { visibility: hidden !important; }

.clash-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.clash-arc path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.clash-arc .arc-halo { stroke: #8fd8ff; stroke-width: 14; opacity: .42; filter: blur(5px); }
.clash-arc .arc-mid { stroke: #fff2a8; stroke-width: 5; opacity: .9; filter: blur(.8px); }
.clash-arc .arc-core { stroke: #ffffff; stroke-width: 2; }
.clash-arc .arc-branch { stroke: #ffffff; stroke-width: 1.3; opacity: .9; }
.clash-arc .arc-branch-halo { stroke: #8fd8ff; stroke-width: 6; opacity: .38; filter: blur(2.5px); }

.clash-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(70% 90% at 50% 45%, #ffffff 0%, rgba(255, 246, 200, .8) 38%, rgba(255, 255, 255, 0) 78%);
}
.clash-spark {
  position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; opacity: 0;
  background: #fffbe0; box-shadow: 0 0 6px 2px rgba(255, 236, 140, .9), 0 0 14px 4px rgba(143, 216, 255, .5);
}
.clash-spark.is-streak { width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; }

/* Impact du VS : traits de vitesse, onde de choc électrique brisée, micro-arcs, reflet */
.hero-card[data-clash] .poster-mid { position: relative; }
.hero-card[data-clash] .poster-vs { position: relative; z-index: 7; }
/* Le VS et son impact passent au-dessus de la scène du choc (z-index 5) : ils arrivent avant la fin de l'arc */
.hero-card[data-clash].clash-running .poster-vs,
.hero-card[data-clash].clash-running .clash-burst,
.hero-card[data-clash].clash-running .clash-shine { visibility: visible; }
.clash-burst { position: absolute; z-index: 6; width: 280px; height: 280px; overflow: visible; pointer-events: none; }
.clash-burst path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.burst-ray { stroke: #ffffff; stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8)); }
.burst-ray.is-warm { stroke: #fff2a8; stroke-width: 2.2; }
.burst-wave { opacity: 0; transform-box: view-box; transform-origin: 50% 50%; }
.wave-core { stroke: #ffffff; stroke-width: 2.4; }
.wave-halo { stroke: #8fd8ff; stroke-width: 8; opacity: .55; filter: blur(3px); }
.burst-crackle { stroke: #ffffff; stroke-width: 1.6; opacity: 0; filter: drop-shadow(0 0 4px rgba(143, 216, 255, .95)); }
.hero-card[data-clash] .poster-vs.clash-shine {
  position: absolute; z-index: 8; margin: 0; pointer-events: none; text-align: center; opacity: 0;
  color: transparent; text-shadow: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, rgba(143, 216, 255, .7) 54%, transparent 64%);
  background-size: 260% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}

/* Même entrée avec un score au centre (match en cours d'un tournoi, affiche d'un match joué) */
.clash-half .poster-score { visibility: hidden !important; }
.hero-card[data-clash] .poster-score { position: relative; z-index: 7; }
.hero-card[data-clash].clash-running .poster-score { visibility: visible; }
.hero-card[data-clash] .poster-score.clash-shine {
  position: absolute; z-index: 8; margin: 0; pointer-events: none; text-align: center; opacity: 0;
  color: transparent; text-shadow: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, rgba(143, 216, 255, .7) 54%, transparent 64%);
  background-size: 260% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.hero-card[data-clash] .poster-score.clash-shine i { color: transparent; }

/* Plateau : deux duels empilés, chaque VS (ou score) s'imprime à son tour, les heures se posent ensuite */
.hero-card[data-clash] .duel-mid { position: relative; }
.hero-card[data-clash] .duel-vs, .hero-card[data-clash] .duel-score { position: relative; z-index: 7; }
.clash-half .duel-vs, .clash-half .duel-score, .clash-half .duel-time { visibility: hidden !important; }
.hero-card[data-clash].clash-running .duel-vs,
.hero-card[data-clash].clash-running .duel-score { visibility: visible; }
.hero-card[data-clash] .duel-vs.clash-shine, .hero-card[data-clash] .duel-score.clash-shine {
  position: absolute; z-index: 8; margin: 0; pointer-events: none; text-align: center; opacity: 0;
  color: transparent; text-shadow: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, rgba(143, 216, 255, .7) 54%, transparent 64%);
  background-size: 260% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.hero-card[data-clash] .duel-score.clash-shine i { color: transparent; }