/* Styles personnalisés */

/* card style */
.card {
  background: linear-gradient(180deg, rgba(68,20,20,0.72), rgba(43,14,14,0.64));
  border: 1px solid rgba(212,175,55,0.08);
  box-shadow: 0 6px 30px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px) saturate(120%);
  border-radius: 1rem;
}

/* bouton primaire */
.btn-primary {
  background: linear-gradient(90deg, rgba(178,34,34,1), rgba(231,76,60,0.95));
  color: #F5E9DA;
  padding: 0.78rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: transform 0.1s ease-in-out;
}

.btn-primary:active {
  transform: translateY(1px);
}

/* loader simple */
.spinner {
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: rgba(255,255,255,0.9);
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* petites adaptations responsive */
@media (min-width: 640px) {
  .max-w-sm { max-width: 420px; }
}


/* Cercle qui s’agrandit depuis le bouton */
.portal-effect {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
  transition: opacity 0.7s ease;
}

.portal-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #B22222 0%, #3B0F0F 70%, #250c0cff 100%);
  width: 100px;
  height: 100px;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%) scale(0);
  animation: portalExpand 2s ease forwards;
}

@keyframes portalExpand {
  to {
    transform: translate(-50%, -50%) scale(20);
    opacity: 1;
  }
}

/* Particules dorées */
.spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D4AF37;
  opacity: 0;
  animation: sparkAnim 1s ease-out forwards;
}

@keyframes sparkAnim {
  0% { opacity: 1; transform: scale(0.5) translateY(0); }
  50% { opacity: 1; transform: scale(1.2) translateY(-20px); }
  100% { opacity: 0; transform: scale(0.3) translateY(-40px); }
}