/* ⚡ CRITICAL: Static CSS file to prevent memory leaks from inline <style> tags
   This file is loaded ONCE and never recreated, preventing HTMLImageElement listener accumulation
   
   BEFORE: Inline <style> tag re-rendered on every move → +2 listeners per move → 400+ listeners after 60 moves
   AFTER: Static CSS file loaded once → stable listener count → no memory leak
*/

/* ⚡ FORCE PERFECT SQUARE - OVERRIDE CHESSGROUND CSS */
.cg-wrap {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

cg-container {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: 100% !important;
}

cg-board {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Custom chessboard background - ONLY when no theme is set */
/* When body[data-board-theme] exists, globals.css themes take over */
body:not([data-board-theme]) .cg-wrap cg-board,
body[data-board-theme="custom"] .cg-wrap cg-board {
  background-image: url('/chessboard.jpg') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* Custom piece sprites - PNG assets (loaded ONCE, not on every move!) */
/* All pieces use 94% size, queens 92% for consistent appearance */
.cg-wrap piece.pawn.white { 
  background-image: url('/pieces/white/white-pawn.png') !important;
  background-size: 94% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.pawn.black { 
  background-image: url('/pieces/black/black-pawn.png') !important;
  background-size: 94% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.rook.white,
.promo-piece-img.piece.rook.white { 
  background-image: url('/pieces/white/white-rook.png') !important;
  background-size: 94% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.rook.black,
.promo-piece-img.piece.rook.black { 
  background-image: url('/pieces/black/black-rook.png') !important;
  background-size: 94% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.knight.white,
.promo-piece-img.piece.knight.white { 
  background-image: url('/pieces/white/white-knight.png') !important;
  background-size: 94% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.knight.black,
.promo-piece-img.piece.knight.black { 
  background-image: url('/pieces/black/black-knight.png') !important;
  background-size: 94% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.bishop.white,
.promo-piece-img.piece.bishop.white { 
  background-image: url('/pieces/white/dragon_bishop_white.png') !important; 
  background-size: 89% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.bishop.black,
.promo-piece-img.piece.bishop.black { 
  background-image: url('/pieces/black/dragon_bishop_black.png') !important; 
  background-size: 89% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.queen.white,
.promo-piece-img.piece.queen.white { 
  background-image: url('/pieces/white/white-queen.png') !important;
  background-size: 92% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.queen.black,
.promo-piece-img.piece.queen.black { 
  background-image: url('/pieces/black/black-queen.png') !important;
  background-size: 92% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.king.white { 
  background-image: url('/pieces/white/white-king.png') !important;
  background-size: 94% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.cg-wrap piece.king.black { 
  background-image: url('/pieces/black/black-king.png') !important;
  background-size: 94% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ⚡ Piece styling - OPTIMIZED */
.cg-wrap piece {
  background-size: cover !important;
  z-index: 2;
  pointer-events: none;
}

.cg-wrap piece.anim {
  z-index: 8;
  will-change: transform;
}

.cg-wrap piece.dragging {
  z-index: 10;
  cursor: move;
}

.cg-wrap piece.fading {
  z-index: 1;
  opacity: 0.5;
}

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

/* ⚡ Mobile touch optimization */
@media (hover: none) and (pointer: coarse) {
  .cg-wrap {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========================================
   PROMOTION DIALOG PIECES
   Load chessground.custom-pieces.css AFTER this file
   ======================================== */