/* Professional Chess Piece Outline Effect for Font Icons */
.chess-icon {
  color: white;
  -webkit-text-stroke: 1.2px black;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Fluid Glide Animation - Pro Chess Style */
@keyframes fluid-glide {
  0% {
    transform: translate(0, 0) scale(1);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
    z-index: 50;
  }
  50% {
    transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) scale(1.08);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.15));
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1);
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
    z-index: 50;
  }
}

.animate-fluid-glide {
    animation: fluid-glide 0.6s cubic-bezier(0.2, 0, 0, 1) forwards;
}

/* Clean Pro Fade Capture */
@keyframes pro-fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: grayscale(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.85);
    filter: grayscale(1);
  }
}

.animate-fade-out {
    animation: pro-fade-out 0.4s ease-out forwards;
}

/* Subtle Landing Impact */
@keyframes micro-impact {
  0% { transform: scale(1); }
  50% { transform: scale(0.99); }
  100% { transform: scale(1); }
}

.impact-active {
  animation: micro-impact 0.2s cubic-bezier(0.2, 0, 0, 1);
}

@keyframes shockwave-clean {
  0% {
    transform: scale(0.8);
    opacity: 0;
    border-width: 2px;
  }
  30% { opacity: 0.5; }
  100% {
    transform: scale(1.8);
    opacity: 0;
    border-width: 0px;
  }
}

.animate-shockwave-pro {
  animation: shockwave-clean 0.6s ease-out forwards;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 20px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }

.square-light { background-color: #f1f5f9; }
.square-dark { background-color: #cbd5e1; }

/* Highlight for moves */
.square-highlight-from { background-color: rgba(16, 185, 129, 0.2); }
.square-highlight-to { background-color: rgba(16, 185, 129, 0.3); }

.chess-piece {
    transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1);
    user-select: none;
    pointer-events: none;
}