/* ============================================================
 * HERO ARÈNE — Page d'accueil
 * Annonce de l'arrivée du mode Arène avec visuel battle 3D et CTA.
 * Remplace l'ancien hero-carousel.
 * ============================================================ */

.hero-arena {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px 24px 48px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(145, 70, 255, .35), transparent 60%),
    radial-gradient(ellipse 100% 70% at 50% 100%, rgba(255, 122, 74, .25), transparent 60%),
    linear-gradient(180deg, #0a0530 0%, #050118 50%, #02000c 100%);
}

/* ───── Fond animé (glows + étoiles) ───── */
.hero-arena__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
/* Glows statiques : pas d'animation (la blur 80px sur un gros élément
   est très coûteuse à repaint quand on transform). Le rendu reste joli
   avec juste 2 halos colorés fixes. */
.hero-arena__glow {
  position: absolute;
  width: 60%; height: 60%;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .4;
}
.hero-arena__glow--purple {
  background: radial-gradient(circle, rgba(145, 70, 255, .9), transparent 65%);
  top: -10%; left: -15%;
}
.hero-arena__glow--gold {
  background: radial-gradient(circle, rgba(255, 200, 80, .55), transparent 65%);
  bottom: -15%; right: -15%;
}

.hero-arena__stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 72%, #fff, transparent),
    radial-gradient(2px 2px at 48% 28%, #fff, transparent),
    radial-gradient(1px 1px at 62% 52%, #fff, transparent),
    radial-gradient(2px 2px at 80% 18%, #fff, transparent),
    radial-gradient(1px 1px at 88% 75%, #fff, transparent),
    radial-gradient(1px 1px at 18% 88%, #fff, transparent),
    radial-gradient(1px 1px at 72% 12%, #fff, transparent),
    radial-gradient(1px 1px at 40% 95%, #fff, transparent),
    radial-gradient(1px 1px at 92% 45%, #fff, transparent);
  opacity: .55;
  animation: heroArenaStars 4s ease-in-out infinite;
}
@keyframes heroArenaStars { 0%,100% { opacity: .25; } 50% { opacity: .8; } }

/* ───── Contenu (au-dessus du fond) ───── */
.hero-arena__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  text-align: center;
}

/* ───── Badge "NOUVEAU · BETA" ───── */
.hero-arena__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: linear-gradient(90deg, #ff0050, #ff7a4a);
  color: #fff;
  border-radius: 999px;
  font-family: 'Antonio', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(255, 0, 80, .55), 0 4px 12px rgba(0, 0, 0, .5);
  animation: heroArenaPulse 1.6s ease-in-out infinite;
  margin-bottom: 14px;
}
@keyframes heroArenaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(255, 0, 80, .55), 0 4px 12px rgba(0, 0, 0, .5); }
  50%      { transform: scale(1.05); box-shadow: 0 0 36px rgba(255, 0, 80, .85), 0 4px 14px rgba(0, 0, 0, .5); }
}

/* ───── Titre énorme ───── */
.hero-arena__title {
  font-family: 'Antonio', 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  margin: 0 0 10px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-arena__title--top {
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  background: linear-gradient(135deg, #c084fc, #9146ff 60%, #ff7a4a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(145, 70, 255, .6));
  animation: heroArenaTitleIn 1s cubic-bezier(.2, .9, .3, 1.2) .1s both;
}
.hero-arena__title--bottom {
  font-size: clamp(2rem, 6vw, 3.6rem);
  color: #fff;
  text-shadow: 0 0 24px rgba(145, 70, 255, .8), 0 0 6px rgba(255, 255, 255, .4);
  animation: heroArenaTitleIn 1s cubic-bezier(.2, .9, .3, 1.2) .3s both;
}
@keyframes heroArenaTitleIn {
  from { opacity: 0; transform: translateY(-26px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ───── Sous-titre ───── */
.hero-arena__subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: rgba(255, 255, 255, .85);
  max-width: 580px;
  margin: 0 0 22px 0;
  line-height: 1.55;
  animation: heroArenaFadeUp .8s ease .5s both;
}
@keyframes heroArenaFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ───── Battle visuel : 2 cartes + clash ─────
   Layout : carte gauche, VS au centre, carte droite. Sur petit
   écran on passe en colonne. */
.hero-arena__battle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 4px 0 24px;
  perspective: 1400px;
  width: 100%;
  max-width: 700px;
}

.hero-arena__card {
  position: relative;
  width: clamp(140px, 22vw, 220px);
  aspect-ratio: 5 / 7;
  border-radius: 14px;
  background: #1a1538;
  background-size: cover;
  background-position: center;
  border: 3px solid rgba(255, 255, 255, .25);
  box-shadow:
    0 0 50px rgba(255, 215, 0, .35),
    0 25px 60px rgba(0, 0, 0, .85);
  overflow: hidden;
  flex: 0 0 auto;
  transform-style: preserve-3d;
}
.hero-arena__card--p1 {
  border-color: rgba(80, 160, 255, .7);
  box-shadow:
    0 0 50px rgba(80, 160, 255, .55),
    0 25px 60px rgba(0, 0, 0, .85);
  /* Entrance 2D one-shot uniquement, puis carte statique (pas de flottement
     infini). Le navigateur GPU-accelère automatiquement translate/rotate/scale. */
  animation: heroArenaCardP1In 1s cubic-bezier(.2, .9, .3, 1.2) .8s both;
}
.hero-arena__card--p2 {
  border-color: rgba(255, 80, 80, .7);
  box-shadow:
    0 0 50px rgba(255, 80, 80, .55),
    0 25px 60px rgba(0, 0, 0, .85);
  animation: heroArenaCardP2In 1s cubic-bezier(.2, .9, .3, 1.2) 1s both;
}
/* Entrance simplifiée : pas de perspective dans le `to` final, ça reste un
   simple translate+rotate 2D qui se rend en GPU sans recalculer la persp. */
@keyframes heroArenaCardP1In {
  from { opacity: 0; transform: translateX(-160px) rotate(-15deg) scale(.85); }
  to   { opacity: 1; transform: translateX(0)      rotate(-6deg)  scale(1); }
}
@keyframes heroArenaCardP2In {
  from { opacity: 0; transform: translateX(160px)  rotate(15deg) scale(.85); }
  to   { opacity: 1; transform: translateX(0)      rotate(6deg)  scale(1); }
}

/* Image dans la carte (background-image via inline style depuis EJS).
   L'image originale contient déjà nom + stats, on n'ajoute donc plus
   d'overlay texte qui créerait des doublons. */
.hero-arena__card-image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* ───── Clash central : VS + étincelles ───── */
.hero-arena__clash {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.hero-arena__vs {
  position: relative;
  z-index: 3;
  font-family: 'Antonio', 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4rem);
  letter-spacing: .06em;
  background: linear-gradient(180deg, #ffd700, #ff7800);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Glow statique : pas d'animation filter:drop-shadow (très coûteux). */
  text-shadow: 0 0 30px rgba(255, 200, 0, .6);
  filter: drop-shadow(0 0 18px rgba(255, 80, 50, .6));
  animation: heroArenaVsIn 1.2s cubic-bezier(.2, .9, .3, 1.4) 1.2s both;
}
@keyframes heroArenaVsIn {
  0%   { opacity: 0; transform: scale(0) rotate(-180deg); }
  60%  { opacity: 1; transform: scale(1.3) rotate(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Étincelles statiques autour du VS (une seule couche, pas d'animation).
   Les radial-gradients suffisent à donner le ressenti "clash". */
.hero-arena__sparks {
  position: absolute; inset: -40px;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 200, 50, .5) 0, transparent 8%),
    radial-gradient(circle at 70% 30%, rgba(255, 100, 50, .45) 0, transparent 6%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 100, .4) 0, transparent 5%),
    radial-gradient(circle at 20% 75%, rgba(255, 200, 50, .45) 0, transparent 7%),
    radial-gradient(circle at 50% 50%, rgba(255, 215, 0, .6) 0, transparent 4%);
  opacity: .8;
}

/* ───── CTA buttons — DA cohérente avec .btn-hero du site ───── */
.hero-arena__cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2px 0 18px;
  animation: heroArenaFadeUp .8s ease 1.4s both;
}
.btn-arena {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1px;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease,
    color .22s ease;
}
.btn-arena--primary {
  background: linear-gradient(135deg, #9146ff 0%, #6d28d9 100%);
  color: #fff;
  box-shadow: 0 4px 20px rgba(145, 70, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .15);
  border-color: transparent;
}
.btn-arena--primary:hover {
  transform: translateY(-3px) scale(1.02);
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  box-shadow: 0 8px 32px rgba(145, 70, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
  color: #fff;
}
.btn-arena--primary:active { transform: translateY(-1px); }
.btn-arena--ghost {
  background: transparent;
  color: #c4a8ff;
  border-color: rgba(145, 70, 255, .45);
}
.btn-arena--ghost:hover {
  background: rgba(145, 70, 255, .14);
  border-color: rgba(145, 70, 255, .85);
  color: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 22px rgba(145, 70, 255, .22);
}
.btn-arena--ghost:active { transform: translateY(-1px); }

/* ───── Features mini-list ───── */
.hero-arena__features {
  list-style: none;
  display: flex;
  gap: 16px;
  padding: 0;
  margin: 2px 0 0;
  flex-wrap: wrap;
  justify-content: center;
  animation: heroArenaFadeUp .8s ease 1.6s both;
}
.hero-arena__features li {
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
  color: rgba(255, 255, 255, .85);
  letter-spacing: .03em;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
}

/* ───── Bloc login (si non connecté) ───── */
.hero-arena__login {
  margin-top: 24px;
  text-align: center;
  animation: heroArenaFadeUp .8s ease 1.8s both;
}
.hero-arena__login-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: #9146ff;
  color: #fff;
  border-radius: 12px;
  text-decoration: none;
  font-family: 'Antonio', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: filter .15s ease, transform .15s ease;
  box-shadow: 0 4px 18px rgba(145, 70, 255, .55);
}
.hero-arena__login-btn svg { width: 22px; height: 22px; }
.hero-arena__login-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }
.hero-arena__login-sub {
  margin: 8px 0 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .6);
}

/* ===========================================================
 * Responsive : mobile portrait
 * =========================================================== */
@media (max-width: 768px) {
  .hero-arena {
    padding: 60px 14px 30px;
    min-height: auto;
  }
  .hero-arena__battle {
    gap: 8px;
    margin: 4px 0 28px;
  }
  .hero-arena__card {
    width: clamp(110px, 30vw, 150px);
  }
  .hero-arena__card-name { font-size: .72rem; padding: 6px 8px 10px; }
  .hero-arena__card-stats { font-size: .85rem; padding: 6px 4px 5px; }
  .hero-arena__cta-row { gap: 10px; }
  .btn-arena { padding: 12px 22px; font-size: 14px; }
  .hero-arena__features { gap: 8px; }
  .hero-arena__features li { font-size: .78rem; padding: 6px 12px; }
  .hero-arena__sparks { inset: -20px; }
}

/* Très petit (≤ 380px) : on serre encore plus */
@media (max-width: 380px) {
  .hero-arena__card { width: clamp(95px, 28vw, 130px); }
  .hero-arena__card-name { font-size: .65rem; }
  .hero-arena__card-stats { font-size: .75rem; }
}