/* ==========================================================================
   180 — Momentum Drag · physique
   Zone de lancer + jeton. Les transforms (translate, squash, tilt) sont
   pilotés par anim.js — ne pas ajouter de transition `transform` ici.
   ========================================================================== */

.momentum-drag {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(320px, 100%);
}

.momentum-drag__zone {
  position: relative;
  height: 175px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--ml-muted, #8b91a3) 35%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in srgb, var(--ml-accent, #7c8cff) 8%, transparent) 0%,
      transparent 55%
    ),
    color-mix(in srgb, var(--ml-surface, #151a24) 60%, transparent);
  touch-action: none;
}

.momentum-drag__chip {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--ml-accent, #7c8cff) 40%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--ml-accent, #7c8cff) 24%, var(--ml-surface, #151a24)),
      var(--ml-surface, #151a24)
    );
  color: var(--ml-fg, #e8eaf2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.55);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  will-change: transform;
  transition: box-shadow 0.3s ease;
}

.momentum-drag__chip.is-dragging {
  cursor: grabbing;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.6);
}

.momentum-drag__coin {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 30%,
      var(--ml-accent-2, #2dd4bf),
      color-mix(in srgb, var(--ml-accent-2, #2dd4bf) 45%, var(--ml-bg, #0d1017))
    );
  box-shadow: 0 0 8px color-mix(in srgb, var(--ml-accent-2, #2dd4bf) 55%, transparent);
}

.momentum-drag__hint {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ml-muted, #8b91a3);
}

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

@media (prefers-reduced-motion: reduce) {
  /* L'inertie et le squash sont désactivés par anim.js (placement direct). */
  .momentum-drag__chip {
    will-change: auto;
    transition: none;
  }
}