/* Enhanced chess board styles - lichess-like */

/* Better square colors (lichess brown theme) */
.white-1e1d7 {
  background-color: #f0d9b5 !important;
}
.black-3c85d {
  background-color: #b58863 !important;
}

/* Selected piece square */
.square-55d63.square-selected {
  background-color: rgba(20, 85, 30, 0.5) !important;
}
.white-1e1d7.square-selected {
  background-color: #829769 !important;
}
.black-3c85d.square-selected {
  background-color: #646d40 !important;
}

/* Last move highlight */
.white-1e1d7.square-last-move {
  background-color: #cdd26a !important;
}
.black-3c85d.square-last-move {
  background-color: #aaa23a !important;
}

/* Legal move dot - empty square */
.square-55d63 .legal-move-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 1;
}

/* Legal move ring - capturable square */
.square-55d63 .legal-move-capture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 5px solid rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
}

/* Right-click highlight (green/yellow/red circles) */
.square-55d63.square-highlight-green {
  background: radial-gradient(circle, transparent 50%, rgba(0, 128, 0, 0.6) 50%) !important;
}
.white-1e1d7.square-highlight-green {
  background: radial-gradient(circle, rgba(240, 217, 181, 1) 50%, rgba(0, 128, 0, 0.6) 50%) !important;
}
.black-3c85d.square-highlight-green {
  background: radial-gradient(circle, rgba(181, 136, 99, 1) 50%, rgba(0, 128, 0, 0.6) 50%) !important;
}

/* Arrow SVG overlay */
.board-wrapper {
  position: relative;
  display: inline-block;
}

.board-wrapper .arrow-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.board-wrapper .arrow-canvas line {
  stroke-linecap: round;
}

/* Board border enhancement */
.board-b72b1 {
  border: none !important;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Resize slider styling */
.board-size-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #374151;
  outline: none;
  transition: background 0.2s;
}

.board-size-slider:hover {
  background: #4b5563;
}

.board-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  transition: background 0.2s;
}

.board-size-slider::-webkit-slider-thumb:hover {
  background: #818cf8;
}

.board-size-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6366f1;
  cursor: pointer;
  border: none;
}

/* Coordinate labels on board */
.board-coords-file,
.board-coords-rank {
  position: absolute;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
  z-index: 5;
  user-select: none;
}

/* Hover effect on squares */
.square-55d63:hover {
  cursor: pointer;
}

/* Piece cursor */
.piece-417db {
  cursor: grab !important;
}

.piece-417db:active {
  cursor: grabbing !important;
}

/* Check highlight */
.square-55d63.square-check {
  background: radial-gradient(ellipse at center, rgba(255, 0, 0, 0.6) 0%, rgba(231, 0, 0, 0.4) 25%, rgba(169, 0, 0, 0.1) 89%, rgba(158, 0, 0, 0) 100%) !important;
}

/* Premove style (future use) */
.square-55d63.square-premove {
  background-color: rgba(20, 30, 85, 0.5) !important;
}