/* ==========================================================
   Chess.com "Arcade" style overrides for cm-chessboard
   This file is loaded from public/ to bypass Tailwind purging.
   ========================================================== */

/* ------- Chess.com Green Board Theme ------- */
.cm-chessboard.chess-com-green .board .square.white {
  fill: #ebecd0;
}
.cm-chessboard.chess-com-green .board .square.black {
  fill: #779556;
}

/* ------- Coordinate labels: Chess.com style ------- */
.cm-chessboard .coordinates .coordinate {
  font-weight: 800 !important;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: -0.02em;
  font-size: 14px !important;
}
/* Rank labels (1-8 on left side) — nudge right to avoid overlapping pieces */
.cm-chessboard .coordinates .coordinate.rank {
  transform: translateX(4px);
}
/* File labels (a-h at bottom) — nudge right a touch to sit inside the square */
.cm-chessboard .coordinates .coordinate.file {
  transform: translateX(2px);
}

/* ── Light / green board coordinates ── */
.cm-chessboard.chess-com-green .coordinates .coordinate.white {
  fill: #6d8b3a !important;
}
.cm-chessboard.chess-com-green .coordinates .coordinate.black {
  fill: #d6dbb0 !important;
}

/* ── Dark / glass board coordinates ── */
.cm-chessboard.dark-board .coordinates .coordinate.white {
  fill: #8ca2ad !important;
}
.cm-chessboard.dark-board .coordinates .coordinate.black {
  fill: #c5d0d6 !important;
}

/* ------- Chess.com CSS Animation (injected into SVG via JS) ------- */
/* The actual animation CSS is injected into the SVG element.
   These are supplementary styles for the pieces layer. */
.cm-chessboard .pieces g[data-piece] {
  will-change: transform;
  cursor: grab;
  cursor: -webkit-grab;
}

/* Dragging piece — Chess.com exact: cursor:grabbing, z-index 2 */
.cm-chessboard-draggable-piece {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)) !important;
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

/* ------- Selection Glow: Teal for white, Red for black ------- */
/* Teal selection (white pieces) — fill + inset border */
.cm-chessboard .board .square.selected-origin-white {
  fill: rgba(0, 180, 180, 0.40) !important;
  stroke: rgba(0, 210, 210, 0.90) !important;
  stroke-width: 5px !important;
  paint-order: stroke fill !important;
  stroke-opacity: 1 !important;
}
/* Red selection (black pieces) — fill + inset border */
.cm-chessboard .board .square.selected-origin-black {
  fill: rgba(200, 50, 50, 0.40) !important;
  stroke: rgba(220, 60, 60, 0.90) !important;
  stroke-width: 5px !important;
  paint-order: stroke fill !important;
  stroke-opacity: 1 !important;
}
/* Fallback for generic selected-origin */
.cm-chessboard .board .square.selected-origin {
  fill: rgba(0, 180, 180, 0.40) !important;
  stroke: rgba(0, 210, 210, 0.90) !important;
  stroke-width: 5px !important;
  paint-order: stroke fill !important;
  stroke-opacity: 1 !important;
}

/* ------- Hover Glow (while dragging) ------- */
.cm-chessboard .board .square.hover-square {
  stroke: rgba(255, 255, 255, 0.7) !important;
  stroke-width: 1.5px !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* ------- Move Target Dots (legal destinations) ------- */
.cm-chessboard .board .square.move-target::after {
  content: '';
}

/* ------- Last Move Highlight (Chess.com yellow) ------- */
.cm-chessboard .board .marker-square {
  fill: rgba(255, 255, 51, 0.41) !important;
  opacity: 1 !important;
}

/* ------- Auto-marker override to Chess.com yellow ------- */
.cm-chessboard .board .marker-frame use {
  stroke: rgba(255, 255, 51, 0.5) !important;
  stroke-width: 3px !important;
}

/* ------- Check highlight (red glow) ------- */
.cm-chessboard .board .square.check-highlight {
  fill: rgba(255, 40, 40, 0.55) !important;
}

/* ------- Right-click user arrows (colored by modifier key) ------- */
/* Red (default right-click) */
.cm-chessboard .arrows .arrow.arrow-red line,
.cm-chessboard .arrows .arrow.arrow-red polygon {
  fill: #c33 !important;
  stroke: #c33 !important;
  opacity: 0.85;
}
/* Blue (shift + right-click) */
.cm-chessboard .arrows .arrow.arrow-blue line,
.cm-chessboard .arrows .arrow.arrow-blue polygon {
  fill: #5b80ba !important;
  stroke: #5b80ba !important;
  opacity: 0.85;
}
/* Green (alt + right-click / best move) */
.cm-chessboard .arrows .arrow.arrow-success line,
.cm-chessboard .arrows .arrow.arrow-success polygon,
.cm-chessboard .arrows .arrow.arrow-green line,
.cm-chessboard .arrows .arrow.arrow-green polygon {
  fill: #6baa64 !important;
  stroke: #6baa64 !important;
  opacity: 0.85;
}

/* ------- Marker color overrides for classification ------- */
.cm-chessboard .markers .marker-square use {
  stroke: none !important;
}

/* Orange/Yellow (ctrl + right-click / warning) */
.cm-chessboard .arrows .arrow.arrow-warning line,
.cm-chessboard .arrows .arrow.arrow-warning polygon,
.cm-chessboard .arrows .arrow.arrow-yellow line,
.cm-chessboard .arrows .arrow.arrow-yellow polygon {
  fill: #e68f00 !important;
  stroke: #e68f00 !important;
  opacity: 0.85;
}

/* Move dots (circular dots for legal destinations) */
.cm-chessboard .board .square.move-target {
  fill: transparent !important;
}

/* ------- Board container & sizing ------- */
.cm-chessboard {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}
.cm-chessboard svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ------- Knight arrow overlay ------- */
.knight-arrow-overlay {
  pointer-events: none;
}

/* ------- Classification badge glow ------- */
.classification-badge {
  transition: transform 200ms ease-out, opacity 200ms ease-out;
  animation: badge-pop 250ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes badge-pop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ------- Chess.com Piece Animation Feedback ------- */
/* Piece land — slight bounce on arrival */
@keyframes piece-land {
  0% { transform: scale(1.08); }
  50% { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.cm-chessboard .board .piece.just-moved {
  animation: piece-land 180ms ease-out;
}

/* ------- Piece selection overlays ------- */
/* Box fill for click selection (before drag) */
.piece-select-box-fill {
  pointer-events: none;
}
.piece-select-box-fill-white {
  fill: rgba(0, 200, 200, 0.28);
  filter: drop-shadow(0 0 6px rgba(0, 210, 210, 0.4));
}
.piece-select-box-fill-black {
  fill: rgba(200, 50, 50, 0.28);
  filter: drop-shadow(0 0 6px rgba(220, 60, 60, 0.4));
}
/* Circle glow for drag (created as floating div, these are fallback SVG) */
.piece-select-circle-white {
  fill: rgba(0, 200, 200, 0.30);
  stroke: none;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0, 210, 210, 0.5));
}
.piece-select-circle-black {
  fill: rgba(200, 50, 50, 0.30);
  stroke: none;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(220, 60, 60, 0.5));
}

/* Drop fill animation — circle expands to fill the square then fades */
.piece-drop-fill {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: drop-fill-expand 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.piece-drop-fill-white {
  fill: rgba(0, 200, 200, 0.40);
  stroke: none;
}
.piece-drop-fill-black {
  fill: rgba(200, 50, 50, 0.40);
  stroke: none;
}
@keyframes drop-fill-expand {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  40% {
    opacity: 0.4;
    transform: scale(2.5);
  }
  100% {
    opacity: 0;
    transform: scale(3.5);
  }
}