/* ==========================================================================
   181 — Card Swipe Stack · physique
   Pile de cartes swipeables. La transition `transform` par défaut anime la
   remontée de la pile (overshoot spring) ; elle est coupée quand le JS pilote
   la carte (.is-dragging, .is-snapping, .is-flying, .is-resetting).
   ========================================================================== */

.swipe-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: min(320px, 100%);
}

.swipe-stack__zone {
  position: relative;
  width: 100%;
  height: 176px;
  touch-action: none;
}

.swipe-stack__card {
  position: absolute;
  top: 6px;
  left: calc(50% - 80px);
  width: 160px;
  height: 136px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ml-fg, #e8eaf2) 10%, transparent);
  border-radius: 14px;
  background: var(--ml-surface, #151a24);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.7);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  /* remontée de la pile : overshoot façon spring */
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swipe-stack__card.is-dragging,
.swipe-stack__card.is-snapping,
.swipe-stack__card.is-flying,
.swipe-stack__card.is-resetting {
  transition: none;
}

.swipe-stack__card.is-dragging {
  cursor: grabbing;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8);
}

.swipe-stack__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  font-size: 1.55rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--ml-accent, #7c8cff) 38%, var(--ml-surface, #151a24)),
      color-mix(in srgb, var(--ml-accent-2, #2dd4bf) 26%, var(--ml-surface, #151a24))
    );
}

.swipe-stack__art--teal {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--ml-accent-2, #2dd4bf) 42%, var(--ml-surface, #151a24)),
      color-mix(in srgb, var(--ml-accent, #7c8cff) 22%, var(--ml-surface, #151a24))
    );
}

.swipe-stack__art--rose {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, #f472b6 40%, var(--ml-surface, #151a24)),
      color-mix(in srgb, var(--ml-accent, #7c8cff) 26%, var(--ml-surface, #151a24))
    );
}

.swipe-stack__art--gold {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, #fbbf24 34%, var(--ml-surface, #151a24)),
      color-mix(in srgb, #f472b6 22%, var(--ml-surface, #151a24))
    );
}

.swipe-stack__title {
  margin: 0.55rem 0.8rem 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ml-fg, #e8eaf2);
}

.swipe-stack__sub {
  margin: 0.15rem 0.8rem 0;
  font-size: 0.72rem;
  color: var(--ml-muted, #8b91a3);
}

.swipe-stack__badge {
  position: absolute;
  top: 8px;
  padding: 0.25rem 0.5rem;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0; /* révélé par le JS selon la direction du drag */
  pointer-events: none;
  background: color-mix(in srgb, var(--ml-bg, #0d1017) 55%, transparent);
}

.swipe-stack__badge--yes {
  left: 8px;
  color: var(--swipe-stack-yes, var(--ml-accent-2, #2dd4bf));
  transform: rotate(-12deg);
}

.swipe-stack__badge--no {
  right: 8px;
  color: var(--swipe-stack-no, #ff6b81);
  transform: rotate(12deg);
}

.swipe-stack__actions {
  display: flex;
  gap: 1.1rem;
}

.swipe-stack__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 50%;
  background: var(--ml-surface, #151a24);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}

.swipe-stack__btn svg {
  width: 14px;
  height: 14px;
}

.swipe-stack__btn:hover {
  transform: translateY(-2px) scale(1.07);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, currentColor 60%, transparent);
}

.swipe-stack__btn:active {
  transform: scale(0.9);
}

.swipe-stack__btn:focus-visible {
  outline: 2px solid var(--ml-accent-2, #2dd4bf);
  outline-offset: 3px;
}

.swipe-stack__btn--yes {
  color: var(--swipe-stack-yes, var(--ml-accent-2, #2dd4bf));
}

.swipe-stack__btn--no {
  color: var(--swipe-stack-no, #ff6b81);
}

.swipe-stack__hint {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ml-muted, #8b91a3);
}

/* Région live pour lecteurs d'écran — visuellement masquée */
.swipe-stack__live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Accessibilité --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Éjection et snap-back sont remplacés par un placement direct (anim.js). */
  .swipe-stack__card,
  .swipe-stack__btn {
    will-change: auto;
    transition: none;
  }
}