/*
 * Écran de résultat de fin de partie — feuille autonome.
 *
 * Comme `arene-carte.css`/`arene-chat.css`, elle ne partage AUCUN sélecteur
 * avec le bundle du client de jeu (source perdue, voir ../LISEZMOI.md) :
 * tout est préfixé `ares-`. Les couleurs reprennent les jetons de la
 * vitrine (`ArenaModal.tsx`), recopiés en dur : ce fichier est servi sans
 * build, il n'a pas accès au thème Tailwind.
 */

.ares-racine {
  --ares-ink: #150a1f;
  --ares-ink-2: #1e0f2c;
  --ares-rose: #ffa8d9;
  --ares-violet: #c3aaff;
  --ares-or: #ffe19b;
  --ares-vert: #3ee08a;
  --ares-texte: #fff0fa;
  --ares-mute: #c9a8dd;

  position: fixed;
  inset: 0;
  z-index: 2147483000; /* au-dessus de la carte et du chat : c'est un écran modal */
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 15px/1.5 "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: var(--ares-texte);
  padding: 1rem;
}

.ares-voile {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 18, 0.72);
  backdrop-filter: blur(4px);
}

.ares-carte {
  position: relative;
  width: 100%;
  max-width: 380px;
  border-radius: 1.5rem;
  padding: 1.75rem;
  background: linear-gradient(160deg, var(--ares-ink-2), var(--ares-ink));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  text-align: center;
  animation: ares-entree 0.25s ease-out;
}

@keyframes ares-entree {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ares-entete {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ares-rose);
}

.ares-carte.ares-positif .ares-entete {
  color: var(--ares-vert);
}

.ares-masse {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--ares-mute);
}

.ares-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ares-bouton {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ares-texte);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ares-bouton:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.24);
}

.ares-bouton-vif {
  background: linear-gradient(135deg, var(--ares-rose), var(--ares-violet));
  border-color: transparent;
  color: var(--ares-ink);
}

.ares-bouton-vif:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, var(--ares-rose), var(--ares-violet));
}

.ares-fermer {
  position: absolute;
  top: 0.75rem;
  inset-inline-end: 0.9rem;
  border: none;
  background: none;
  color: var(--ares-mute);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}

.ares-fermer:hover {
  color: var(--ares-texte);
}

@media (prefers-reduced-motion: reduce) {
  .ares-carte { animation: none; }
}