/* Tablero (chessground) — colores, piezas, marcas y coordenadas.
   Los colores del tablero llegan como variables (--c-claro, --c-oscuro) que pone lib/ajustes.js según el tema;
   las piezas, con una hoja que genera lib/ajustes.js para el juego de piezas elegido. */

.tablero {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radio-tablero, 4px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.tablero .cg-wrap { width: 100%; height: 100%; }
.tablero cg-board {
  border-radius: var(--radio-tablero, 4px);
  background-color: var(--c-oscuro);
  background-image: var(--tablero-img);
  background-size: 100% 100%;
}

/* Marcas */
cg-board square.last-move { background: var(--c-ultima, rgba(255, 214, 64, .42)); }
cg-board square.selected { background: var(--c-sel, rgba(255, 214, 64, .55)); }
cg-board square.check {
  background: radial-gradient(ellipse at center, rgba(255, 40, 20, 1) 0%, rgba(231, 50, 30, .85) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%);
}
cg-board square.move-dest {
  background: radial-gradient(rgba(20, 20, 10, .22) 19%, rgba(0, 0, 0, 0) 20%);
}
cg-board square.move-dest:hover { background: rgba(20, 20, 10, .18); }
cg-board square.oc.move-dest {
  background: radial-gradient(transparent 0%, transparent 79%, rgba(20, 20, 10, .22) 80%);
}
cg-board square.premove-dest {
  background: radial-gradient(rgba(40, 90, 160, .45) 19%, rgba(0, 0, 0, 0) 20%);
}
cg-board square.oc.premove-dest {
  background: radial-gradient(transparent 0%, transparent 79%, rgba(40, 90, 160, .4) 80%);
}
cg-board square.current-premove { background: rgba(60, 110, 190, .5); }
.cg-wrap piece.dragging { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .35)); }
cg-board square.hover-pieza { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .55); }

/* Coordenadas dentro de las casillas, como en los tableros de madera */
.cg-wrap coords { font-family: var(--f-texto); font-weight: 800; font-size: clamp(9px, 2.4cqw, 14px); opacity: 1; }
.tablero { container-type: inline-size; }
.cg-wrap coords.ranks { left: 2px; top: 0; width: 12px; }
.cg-wrap coords.ranks coord { transform: none; padding-top: 2px; }
.cg-wrap coords.files { bottom: 0; left: 0; height: auto; text-transform: lowercase; text-align: right; }
.cg-wrap coords.files coord { padding: 0 4px 2px 0; }
.cg-wrap coords.ranks coord:nth-child(odd), .cg-wrap coords.files coord:nth-child(even) { color: var(--c-claro); }
.cg-wrap coords.ranks coord:nth-child(even), .cg-wrap coords.files coord:nth-child(odd) { color: var(--c-oscuro); }
.cg-wrap coords.ranks.black coord:nth-child(odd), .cg-wrap coords.files.black coord:nth-child(even) { color: var(--c-claro); }
.cg-wrap coords.ranks.black coord:nth-child(even), .cg-wrap coords.files.black coord:nth-child(odd) { color: var(--c-oscuro); }
.sin-coords .cg-wrap coords { display: none; }

/* Flechas y círculos */
.cg-wrap .cg-shapes { opacity: .8; }

/* Elegir pieza al coronar */
.coronar {
  position: absolute; inset: 0; z-index: 20; background: rgba(10, 9, 8, .55);
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
}
.coronar button {
  border: 0; padding: 0; background: radial-gradient(circle, #f4f1ea 0, #d9d2c4 70%); border-radius: 50%;
  cursor: pointer; transform: scale(.9); transition: transform .12s, background .12s;
  background-size: cover; box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.coronar button:hover { transform: scale(1); background-color: #fff; }
.coronar button span { display: block; width: 100%; height: 100%; background-size: 82%; background-position: center; background-repeat: no-repeat; }

/* Iconos de clasificación de jugadas sobre el tablero (revisión) */
.cg-wrap .cg-custom-svgs .marca-jugada { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }

/* Barra de evaluación */
.barra-eval {
  position: relative; width: 22px; border-radius: 4px; overflow: hidden; background: #403d39;
  flex: 0 0 auto; align-self: stretch;
}
.barra-eval .blanco { position: absolute; left: 0; right: 0; bottom: 0; background: #f5f3ee; transition: height .4s ease; }
.barra-eval.girada .blanco { bottom: auto; top: 0; }
.barra-eval .cifra {
  position: absolute; left: 0; right: 0; text-align: center; font: 700 10px/1 var(--f-mono); z-index: 2; padding: 4px 0;
}
.barra-eval .cifra.abajo { bottom: 0; color: #403d39; }
.barra-eval .cifra.arriba { top: 0; color: #f5f3ee; }