/* ============================================
   Multiplayer Cursors — Minimal & Elegant
   ============================================ */

.cursors-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

.cursor-other {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  transition: transform var(--cursor-lerp) linear;
  pointer-events: none;
  z-index: 100;
}

/* Fade in/out */
.cursor-other {
  opacity: 0;
  animation: cursor-appear 300ms ease forwards;
}

.cursor-other.leaving {
  animation: cursor-disappear 300ms ease forwards;
}

@keyframes cursor-appear {
  from {
    opacity: 0;
    transform: translate(var(--cx), var(--cy)) scale(0.5);
  }
  to {
    opacity: 0.7;
    transform: translate(var(--cx), var(--cy)) scale(1);
  }
}

@keyframes cursor-disappear {
  from { opacity: 0.7; }
  to { opacity: 0; transform: translate(var(--cx), var(--cy)) scale(0.5); }
}

/* Cursor SVG arrow — smaller, cleaner */
.cursor-arrow {
  width: 14px;
  height: 18px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
}

/* Hide the colored dot — no longer needed */
.cursor-dot {
  display: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cursor-other {
    transition-duration: 0ms;
    animation-duration: 0ms;
  }
}