/* ✅ Chess Piece Sets - Dynamic CSS for different piece styles with PNG/SVG support */

/* ✅ Base piece styles - using dynamic pieces path */
:root {
  /* Default pieces path - will be overridden by ThemeStore */
  --pieces-path: '/chess-pieces/base';

  /* Piece variables will be set dynamically by ThemeStore - no defaults here */
}

/* ✅ Base Piece Set (Default) - PNG format */
body.pieces-base {
  --pieces-path: '/chess-pieces/base';

  /* Square color variables for base pieces */
  --piece-light-square: #f0d9b5;
  --piece-dark-square: #b58863;
}

/* ✅ Alpha Piece Set - SVG format */
body.pieces-alpha {
  --pieces-path: '/chess-pieces/alpha';

  /* Square color variables for alpha pieces */
  --piece-light-square: #e8f4f8;
  --piece-dark-square: #4a90a4;
}

/* ✅ Anarcandy Piece Set - SVG format */
body.pieces-anarcandy {
  --pieces-path: '/chess-pieces/anarcandy';

  /* Square color variables for anarcandy pieces */
  --piece-light-square: #ffeaa7;
  --piece-dark-square: #d63031;
}

/* ✅ Cooke Piece Set - SVG format */
body.pieces-cooke {
  --pieces-path: '/chess-pieces/cooke';

  /* Square color variables for cooke pieces */
  --piece-light-square: #f5f3f0;
  --piece-dark-square: #8b4513;
}

/* ✅ Fantasy Piece Set - SVG format */
body.pieces-fantasy {
  --pieces-path: '/chess-pieces/fantasy';

  /* Square color variables for fantasy pieces */
  --piece-light-square: #e8d5ff;
  --piece-dark-square: #6a0dad;
}

/* ✅ Horsey Piece Set - SVG format */
body.pieces-horsey {
  --pieces-path: '/chess-pieces/horsey';

  /* Square color variables for horsey pieces */
  --piece-light-square: #fff8dc;
  --piece-dark-square: #daa520;
}

/* ✅ Maestro Piece Set - SVG format */
body.pieces-maestro {
  --pieces-path: '/chess-pieces/maestro';

  /* Square color variables for maestro pieces */
  --piece-light-square: #f0f0f0;
  --piece-dark-square: #2c3e50;
}

/* ✅ Monarchy Piece Set - SVG format */
body.pieces-monarchy {
  --pieces-path: '/chess-pieces/monarchy';

  /* Square color variables for monarchy pieces */
  --piece-light-square: #ffd700;
  --piece-dark-square: #8b0000;
}

/* ✅ Apply piece images to chessground pieces - using dynamic paths */
piece.white.pawn { background-image: var(--wp); }
piece.white.bishop { background-image: var(--wb); }
piece.white.knight { background-image: var(--wn); }
piece.white.rook { background-image: var(--wr); }
piece.white.queen { background-image: var(--wq); }
piece.white.king { background-image: var(--wk); }

piece.black.pawn { background-image: var(--bp); }
piece.black.bishop { background-image: var(--bb); }
piece.black.knight { background-image: var(--bn); }
piece.black.rook { background-image: var(--br); }
piece.black.queen { background-image: var(--bq); }
piece.black.king { background-image: var(--bk); }


/* ✅ Ensure pieces display correctly for both PNG and SVG */
piece {
  width: 12.5%;
  height: 12.5%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  will-change: transform;
  pointer-events: none;
  z-index: 2;
}

/* ✅ Ensure pieces scale properly during animations */
piece.dragging {
  cursor: grabbing;
  z-index: 9;
}

.cg-wrap piece.ghost {
  opacity: 0.3;
}