/* Legacy board styles - now handled by components/_board.css */
/* This file is kept for backward compatibility but styles are overridden */

#board {
  /* Styles now handled by .chess-board class in components/_board.css */
}

/* Remove old row-based layout */
.row {
  display: contents; /* This makes the row div transparent to CSS Grid */
}

.square {
  border: 0.5px solid #333;
  position: relative;
  display: block; /* Change from flex to block */
  cursor: pointer;
  box-sizing: border-box;
  /* No minimum size constraints - let squares scale freely */
  margin: 0 !important; /* Force no margins */
  padding: 0 !important; /* Force no padding */
  width: 100%; /* Ensure full grid cell width */
  height: 100%; /* Ensure full grid cell height */
}

/* Square colors - Natural forest theme */
.square.light {
  background-color: #9acd32; /* Leaf green */
}

.square.dark {
  background-color: #6b8e23; /* Olive green - closer to light green */
}

/* Special square types */
.square.wall {
  background-image: url(/greenish-wall.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 3px solid #2f1b14;
}

.square.light.upgrade {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4a 50%, #ffd700 100%); /* Light gold with sheen */
}

.square.dark.upgrade {
  background: linear-gradient(135deg, #daa520 0%, #ffed4a 50%, #daa520 100%); /* Darker gold with sheen */
}

/* Upgrade squares that are also killable - preserve upgrade background with metallic red box shadow */
.square.light.upgrade.killable {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4a 50%, #ffd700 100%) !important; /* Preserve gold upgrade background */
  position: relative;
  animation: metallicRedShadow 3s ease-in-out infinite !important;
}

.square.dark.upgrade.killable {
  background: linear-gradient(135deg, #daa520 0%, #ffed4a 50%, #daa520 100%) !important; /* Preserve gold upgrade background */
  position: relative;
  animation: metallicRedShadow 3s ease-in-out infinite !important;
}

/* Upgrade squares that are also movable - preserve upgrade background with metallic golden box shadow */
.square.light.upgrade.movable {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4a 50%, #ffd700 100%) !important; /* Light gold with sheen */
  position: relative;
  animation: metallicGoldenShadow 3s ease-in-out infinite !important;
}

.square.dark.upgrade.movable {
  background: linear-gradient(135deg, #daa520 0%, #ffed4a 50%, #daa520 100%) !important; /* Darker gold with sheen */
  position: relative;
  animation: metallicGoldenShadow 3s ease-in-out infinite !important;
}

/* Metallic golden box shadow animation for movable squares */
@keyframes metallicGoldenShadow {
  0% {
    box-shadow: 0 0 0 4px #daa520, 0 0 10px rgba(218, 165, 32, 0.6), 0 0 0 2px #ffffff;
  }
  25% {
    box-shadow: 0 0 0 3px #b8860b, 0 0 8px rgba(184, 134, 11, 0.7), 0 0 0 1px #daa520;
  }
  50% {
    box-shadow: 0 0 0 1px #daa520, 0 0 0 0 rgba(218, 165, 32, 0);
  }
  75% {
    box-shadow: 0 0 0 3px #b8860b, 0 0 8px rgba(184, 134, 11, 0.7), 0 0 0 1px #daa520;
  }
  100% {
    box-shadow: 0 0 0 4px #daa520, 0 0 10px rgba(218, 165, 32, 0.6), 0 0 0 2px #ffffff;
  }
}

/* Metallic red box shadow animation for killable squares */
@keyframes metallicRedShadow {
  0% {
    box-shadow: 0 0 0 4px #8b0000, 0 0 10px rgba(139, 0, 0, 0.6), 0 0 0 2px #ffffff;
  }
  25% {
    box-shadow: 0 0 0 3px #a00000, 0 0 8px rgba(160, 0, 0, 0.7), 0 0 0 1px #8b0000;
  }
  50% {
    box-shadow: 0 0 0 1px #8b0000, 0 0 0 0 rgba(139, 0, 0, 0);
  }
  75% {
    box-shadow: 0 0 0 3px #a00000, 0 0 8px rgba(160, 0, 0, 0.7), 0 0 0 1px #8b0000;
  }
  100% {
    box-shadow: 0 0 0 4px #8b0000, 0 0 10px rgba(139, 0, 0, 0.6), 0 0 0 2px #ffffff;
  }
}

/* Castling move indicator */
.square.castling {
  background: linear-gradient(135deg, #4169e1 0%, #1e90ff 50%, #4169e1 100%) !important;
  box-shadow: 0 0 0 4px #ffd700, 0 0 15px rgba(255, 215, 0, 0.6);
  animation: castlingGlow 2s ease-in-out infinite alternate;
}

@keyframes castlingGlow {
  0% {
    box-shadow: 0 0 0 4px #ffd700, 0 0 15px rgba(255, 215, 0, 0.6);
  }
  100% {
    box-shadow: 0 0 0 6px #ffd700, 0 0 25px rgba(255, 215, 0, 0.8);
  }
}

.square.light.movable:hover {
  background-color: #8b0000; /* Royal crimson on hover */
}

.square.dark.movable:hover {
  background-color: #8b0000; /* Royal crimson on hover */
}

/* Hover states for upgrade squares that are movable */
.square.light.upgrade.movable:hover {
  background: linear-gradient(135deg, #8b0000 0%, #a00000 50%, #8b0000 100%) !important; /* Darker red with upgrade gradient */
  box-shadow: 0 0 0 4px #ffd700, 0 0 15px rgba(255, 215, 0, 0.6); /* Enhanced golden border and glow */
}

.square.dark.upgrade.movable:hover {
  background: linear-gradient(135deg, #8b0000 0%, #a00000 50%, #8b0000 100%) !important; /* Darker red with upgrade gradient */
  box-shadow: 0 0 0 4px #ffd700, 0 0 15px rgba(255, 215, 0, 0.6); /* Enhanced golden border and glow */
}

.square.pending {
  background-color: #eaa40b;
}

/* Piece positioning within squares */
#board .piece {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none; /* Allow clicks to pass through to square */
  display: block;
  transition: transform 0.3s ease; /* Smooth rotation transitions */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
  #board {
    /* Remove max-width constraint to allow large boards */
    /* max-width: calc(100vw - 40px); */
  }
}

@media (max-width: 768px) {
  #board {
    border-width: 5px;
    /* Remove max-width constraint to allow large boards */
    /* max-width: calc(100vw - 20px); */
    margin: 10px auto;
  }
  
  .square {
    /* No minimum size constraints - let squares scale freely */
  }
}

/* Board container for better layout */
.board-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Remove overflow hidden to allow large boards to display fully */
  overflow: visible;
  /* Allow container to grow with board size */
  min-height: fit-content;
  min-width: fit-content;
}

/* Last move indicator - Glittery silver border */
.square.last-move-from {
  position: relative;
  animation: glitteryFromBorder 3s ease-in-out infinite;
}

.square.last-move-to {
  position: relative;
  animation: glitteryToBorder 3s ease-in-out infinite;
}

/* Glittery silver animation for source square */
@keyframes glitteryFromBorder {
  0% {
    box-shadow: inset 0 0 0 2px #c0c0c0, 0 0 0 0 rgba(192, 192, 192, 0);
  }
  25% {
    box-shadow: inset 0 0 0 3px #e6e6e6, 0 0 5px rgba(230, 230, 230, 0.8), 0 0 0 1px #c0c0c0;
  }
  50% {
    box-shadow: inset 0 0 0 2px #c0c0c0, 0 0 10px rgba(192, 192, 192, 0.6), 0 0 0 2px #ffffff;
  }
  75% {
    box-shadow: inset 0 0 0 3px #e6e6e6, 0 0 5px rgba(230, 230, 230, 0.8), 0 0 0 1px #c0c0c0;
  }
  100% {
    box-shadow: inset 0 0 0 2px #c0c0c0, 0 0 0 0 rgba(192, 192, 192, 0);
  }
}

/* Glittery silver animation for destination square - brighter */
@keyframes glitteryToBorder {
  0% {
    box-shadow: inset 0 0 0 3px #c0c0c0, 0 0 0 0 rgba(192, 192, 192, 0);
  }
  25% {
    box-shadow: inset 0 0 0 4px #ffffff, 0 0 8px rgba(255, 255, 255, 0.9), 0 0 0 2px #c0c0c0;
  }
  50% {
    box-shadow: inset 0 0 0 3px #e6e6e6, 0 0 15px rgba(230, 230, 230, 0.8), 0 0 0 3px #ffffff;
  }
  75% {
    box-shadow: inset 0 0 0 4px #ffffff, 0 0 8px rgba(255, 255, 255, 0.9), 0 0 0 2px #c0c0c0;
  }
  100% {
    box-shadow: inset 0 0 0 3px #c0c0c0, 0 0 0 0 rgba(192, 192, 192, 0);
  }
}

/* Support for legacy square naming */
.square-light.movable {
  background-color: #9acd32 !important; /* Leaf green - same as regular light squares */
  position: relative;
  animation: metallicGoldenShadow 3s ease-in-out infinite !important;
}

.square-dark.movable {
  background-color: #6b8e23 !important; /* Olive green - same as regular dark squares */
  position: relative;
  animation: metallicGoldenShadow 3s ease-in-out infinite !important;
}

.square-light.killable {
  background-color: #8b0000 !important; /* Royal crimson */
  position: relative;
  animation: metallicRedShadow 3s ease-in-out infinite !important;
}

.square-dark.killable {
  background-color: #8b0000 !important; /* Royal crimson */
  position: relative;
  animation: metallicRedShadow 3s ease-in-out infinite !important;
}

/* Force override any conflicting styles for movable squares */
.square.movable {
  border: none;
  box-shadow: none;
  z-index: 10;
  position: relative;
}

.square.light.movable {
  background-color: #9acd32; /* Leaf green - same as regular light squares - USED IN FULLSCREEN MODE */
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 10;
  animation: metallicGoldenShadow 3s ease-in-out infinite;
}

.square.dark.movable {
  background-color: #6b8e23; /* Olive green - same as regular dark squares */
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 10;
  animation: metallicGoldenShadow 3s ease-in-out infinite;
}

/* More specific selectors to override style templates */
.square.light.movable,
.square-dark.movable {
  background-color: #9acd32; /* Leaf green */
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 10;
  animation: metallicGoldenShadow 3s ease-in-out infinite;
}

.square.dark.movable,
.square-light.movable {
  background-color: #6b8e23; /* Olive green */
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 10;
  animation: metallicGoldenShadow 3s ease-in-out infinite;
}

/* Force the metallic golden shadow to be visible */
.square.movable {
  border: none;
  box-shadow: none;
  z-index: 10;
  position: relative;
  animation: metallicGoldenShadow 3s ease-in-out infinite;
}

.square.light.movable {
  border: none;
  box-shadow: none;
  z-index: 10;
  position: relative;
  animation: metallicGoldenShadow 3s ease-in-out infinite;
}

.square.dark.movable {
  border: none;
  box-shadow: none;
  z-index: 10;
  position: relative;
  animation: metallicGoldenShadow 3s ease-in-out infinite;
}

/* Force override any conflicting styles for killable squares */
.square.killable {
  border: none !important;
  /* box-shadow: red !important; */
}

.square.light.killable {
  background-color: #8b0000 !important; /* Royal crimson - force override - USED IN FULLSCREEN MODE */
  border: none !important;
  
  z-index: 11;
  position: relative;
  animation: metallicRedShadow 3s ease-in-out infinite !important;
}

.square.dark.killable {
  background-color: #8b0000 !important; /* Royal crimson - force override */
  border: none !important;
  /* box-shadow: red !important; */
  z-index: 11;
  position: relative;
  animation: metallicRedShadow 3s ease-in-out infinite !important;
}

/*# sourceMappingURL=board.css-4cc59572390d006d984011c49355af139aa3d01ddfb9e5466e62a64276d99f32.map */