/* ============================================
   CHESSER — Chess Board Styles
   ============================================ */

/* --- Board Container --- */
.chess-board-wrap {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  flex-shrink: 0;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow:
    var(--shadow-lg),
    0 0 0 3px var(--color-bg-secondary),
    0 0 0 5px var(--color-accent-gold-dim);
  position: relative;
  z-index: 1;
}

/* --- Squares --- */
.square {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background-color var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
}

.square.light {
  background-color: var(--color-board-light);
}

.square.dark {
  background-color: var(--color-board-dark);
}

/* Board themes */
.board-theme-marble .square.light { background-color: #e8e0d8; }
.board-theme-marble .square.dark { background-color: #8a8078; }

.board-theme-wood .square.light { background-color: #e8c88a; }
.board-theme-wood .square.dark { background-color: #a07040; }

/* Interactive squares */
.chess-board.interactive .square.has-piece {
  cursor: pointer;
}

.chess-board.interactive .square.legal-target {
  cursor: pointer;
}

/* --- Piece Images --- */
.square .piece-img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  pointer-events: none;
  position: relative;
  z-index: 2;
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.35));
  transition: transform var(--transition-fast);
}

.chess-board.animate-pieces .square .piece-img {
  transition: transform var(--transition-base);
}

/* Piece hover effect */
.chess-board.interactive .square.has-piece:hover .piece-img {
  transform: scale(1.08);
}

/* Selected piece lift */
.square.selected .piece-img {
  transform: scale(1.12);
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.5));
}

/* --- Square Highlights --- */

/* Selected piece square */
.square.selected {
  background-color: var(--color-highlight-selected) !important;
}
.square.selected.light {
  background-color: rgba(212, 168, 67, 0.55) !important;
}
.square.selected.dark {
  background-color: rgba(180, 130, 40, 0.65) !important;
}

/* Last move highlights */
.square.last-move {
  position: relative;
}
.square.last-move::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-highlight-last-move);
  pointer-events: none;
  z-index: 1;
}

/* Check highlight */
.square.check {
  position: relative;
}
.square.check::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--color-highlight-check) 0%, rgba(220,50,50,0.2) 60%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  animation: check-pulse 1s ease-in-out infinite alternate;
}

@keyframes check-pulse {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

/* Legal move dots */
.square.legal-target::before {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: var(--radius-full);
  background: var(--color-highlight-legal);
  z-index: 3;
  pointer-events: none;
  transition: transform var(--transition-fast);
}

.square.legal-target:hover::before {
  transform: scale(1.3);
  background: rgba(100, 180, 100, 0.5);
}

/* Legal capture target (ring instead of dot) */
.square.legal-target.has-piece::before {
  width: 90%;
  height: 90%;
  background: transparent;
  border: 4px solid var(--color-highlight-legal);
  border-radius: var(--radius-full);
}

.square.legal-target.has-piece:hover::before {
  border-color: rgba(100, 180, 100, 0.6);
}

/* Hint highlight */
.square.hint {
  position: relative;
}
.square.hint::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 3px solid var(--color-accent-gold);
  border-radius: var(--radius-sm);
  pointer-events: none;
  z-index: 3;
  animation: hint-glow 1.2s ease-in-out infinite alternate;
}

@keyframes hint-glow {
  from { box-shadow: 0 0 6px var(--color-accent-gold-glow); opacity: 0.6; }
  to { box-shadow: 0 0 14px var(--color-accent-gold-glow); opacity: 1; }
}

/* --- Coordinates --- */
.coord-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  pointer-events: none;
  z-index: 4;
  line-height: 1;
  opacity: 0.7;
}

.coord-file {
  bottom: 2px;
  right: 4px;
}

.coord-rank {
  top: 2px;
  left: 4px;
}

.square.light .coord-label {
  color: var(--color-board-dark);
}

.square.dark .coord-label {
  color: var(--color-board-light);
}

/* --- Arrow Overlay --- */
.arrow-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.arrow-overlay svg {
  width: 100%;
  height: 100%;
}

.arrow-overlay .arrow-line {
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0.7;
  fill: none;
}

.arrow-overlay .arrow-head {
  opacity: 0.7;
}

.arrow-overlay .arrow-green .arrow-line { stroke: #4abd7a; }
.arrow-overlay .arrow-green .arrow-head { fill: #4abd7a; }

.arrow-overlay .arrow-red .arrow-line { stroke: #d45454; }
.arrow-overlay .arrow-red .arrow-head { fill: #d45454; }

.arrow-overlay .arrow-blue .arrow-line { stroke: #4a90d9; }
.arrow-overlay .arrow-blue .arrow-head { fill: #4a90d9; }

.arrow-overlay .arrow-gold .arrow-line { stroke: var(--color-accent-gold); }
.arrow-overlay .arrow-gold .arrow-head { fill: var(--color-accent-gold); }

/* --- Promotion Dialog --- */
.promotion-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  border-radius: var(--radius-md);
}

.promotion-overlay.active {
  opacity: 1;
  visibility: visible;
}

.promotion-dialog {
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-accent-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-xl), var(--shadow-gold-lg);
  display: flex;
  gap: var(--space-sm);
  transform: scale(0.8);
  transition: transform var(--transition-base);
}

.promotion-overlay.active .promotion-dialog {
  transform: scale(1);
}

.promotion-option {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-bg-tertiary);
  border: 2px solid transparent;
}

.promotion-option:hover {
  background: var(--color-highlight-selected);
  border-color: var(--color-accent-gold);
  transform: scale(1.1);
}

.promotion-option img {
  width: 48px;
  height: 48px;
  pointer-events: none;
}

/* --- Evaluation Bar --- */
.eval-bar {
  width: 28px;
  height: var(--board-size);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.eval-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, #f0e6d6, #e8e0d4);
  transition: height var(--transition-slow);
}

.eval-bar-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  z-index: 2;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  pointer-events: none;
}

.eval-bar-label.top {
  top: 4px;
  color: var(--color-text-dim);
}

.eval-bar-label.bottom {
  bottom: 4px;
  color: #444;
}

/* --- Move Animation --- */
.piece-animating {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  transition: left var(--transition-base), top var(--transition-base);
}