/* PoodleChessgroundBoard — opt-in second engine styles.
 * Board-local only: inherits the surrounding `.puzzle-board` box, never
 * resizes it. Upstream lichess chessground renders into `.cg-mount` as
 * `.cg-wrap > cg-container > (cg-board, svg, coords)` with persistent
 * `<piece>` nodes; this file provides the structural layout (mirroring the
 * upstream base stylesheet, which is not loaded as a separate asset),
 * Poodle square colors, piece images per set, highlight/dest styling,
 * promotion dialog, terminal flashes, and overlay anchors. */

.cg-host {
  position: relative;
  display: block;
}

.cg-host:focus-visible {
  outline: 2px solid rgba(16, 185, 129, 0.65);
  outline-offset: 2px;
}

.cg-mount {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 100%;
  margin: 0 auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* --- upstream structural layout (cf. vendor/chessground/chessground.base.css) --- */
.cg-mount.cg-wrap {
  box-sizing: content-box;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.cg-mount cg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  top: 0;
}

.cg-mount cg-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: 0;
  background-size: cover;
  border-radius: 6px;
}

.cg-mount.cg-wrap.manipulable cg-board {
  cursor: pointer;
}

.cg-mount cg-board square {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  pointer-events: none;
}

.cg-mount cg-board square.move-dest {
  pointer-events: auto;
}

.cg-mount cg-board square.last-move {
  will-change: transform;
}

.cg-mount.cg-wrap piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  background-size: cover;
  z-index: 2;
  will-change: transform;
  pointer-events: none;
}

.cg-mount cg-board piece.dragging {
  cursor: move;
  z-index: 11 !important;
}

.cg-mount piece.anim {
  z-index: 8;
}

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

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

.cg-mount.cg-wrap cg-auto-pieces,
.cg-mount.cg-wrap .cg-shapes,
.cg-mount.cg-wrap .cg-custom-svgs,
.cg-mount.cg-wrap .cg-shapes-below,
.cg-mount.cg-wrap .cg-custom-below {
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cg-mount.cg-wrap .cg-shapes {
  overflow: hidden;
  opacity: 0.6;
  z-index: 2;
}

.cg-mount.cg-wrap coords {
  position: absolute;
  display: flex;
  pointer-events: none;
  opacity: 0.8;
  font-family: sans-serif;
  font-size: 9px;
}

.cg-mount.cg-wrap coords.ranks {
  left: 4px;
  top: -20px;
  flex-flow: column-reverse;
  height: 100%;
  width: 12px;
}

.cg-mount.cg-wrap coords.ranks.black {
  flex-flow: column;
}

.cg-mount.cg-wrap coords.files {
  bottom: -4px;
  left: 24px;
  flex-flow: row;
  width: 100%;
  height: 16px;
  text-transform: uppercase;
  text-align: center;
}

.cg-mount.cg-wrap coords.files.black {
  flex-flow: row-reverse;
}

.cg-mount.cg-wrap coords coord {
  flex: 1 1 auto;
}

.cg-mount.cg-wrap coords.ranks coord {
  transform: translateY(39%);
}

/* --- Poodle square colors (checkerboard via conic gradient) --- */
.cg-mount cg-board {
  background-color: #f0d9b5;
  background-image: repeating-conic-gradient(#b58863 90deg, #f0d9b5 90deg 180deg, #b58863 180deg 270deg, #f0d9b5 270deg);
  background-size: 25% 25%;
}

.cg-mount[data-cg-theme="green"] cg-board {
  background-color: #eeeed2;
  background-image: repeating-conic-gradient(#769656 90deg, #eeeed2 90deg 180deg, #769656 180deg 270deg, #eeeed2 270deg);
  background-size: 25% 25%;
}

.cg-mount[data-cg-theme="tournament"] cg-board {
  background-color: #ebecd0;
  background-image: repeating-conic-gradient(#739552 90deg, #ebecd0 90deg 180deg, #739552 180deg 270deg, #ebecd0 270deg);
  background-size: 25% 25%;
}

.cg-mount[data-cg-theme="ocean"] cg-board {
  background-color: #dee3e6;
  background-image: repeating-conic-gradient(#8ca2ad 90deg, #dee3e6 90deg 180deg, #8ca2ad 180deg 270deg, #dee3e6 270deg);
  background-size: 25% 25%;
}

.cg-mount[data-cg-theme="midnight"] cg-board {
  background-color: #dee2e6;
  background-image: repeating-conic-gradient(#6c7a89 90deg, #dee2e6 90deg 180deg, #6c7a89 180deg 270deg, #dee2e6 270deg);
  background-size: 25% 25%;
}

.cg-mount[data-cg-theme="walnut"] cg-board {
  background-color: #e5c29f;
  background-image: repeating-conic-gradient(#9b6b43 90deg, #e5c29f 90deg 180deg, #9b6b43 180deg 270deg, #e5c29f 270deg);
  background-size: 25% 25%;
}

/* --- Poodle piece images per set (upstream renders piece.<role>.<color>) --- */
.cg-mount piece.pawn.white { background-image: url("/pieces/wP.svg"); }
.cg-mount piece.knight.white { background-image: url("/pieces/wN.svg"); }
.cg-mount piece.bishop.white { background-image: url("/pieces/wB.svg"); }
.cg-mount piece.rook.white { background-image: url("/pieces/wR.svg"); }
.cg-mount piece.queen.white { background-image: url("/pieces/wQ.svg"); }
.cg-mount piece.king.white { background-image: url("/pieces/wK.svg"); }
.cg-mount piece.pawn.black { background-image: url("/pieces/bP.svg"); }
.cg-mount piece.knight.black { background-image: url("/pieces/bN.svg"); }
.cg-mount piece.bishop.black { background-image: url("/pieces/bB.svg"); }
.cg-mount piece.rook.black { background-image: url("/pieces/bR.svg"); }
.cg-mount piece.queen.black { background-image: url("/pieces/bQ.svg"); }
.cg-mount piece.king.black { background-image: url("/pieces/bK.svg"); }

.cg-mount[data-piece-set="neo"] piece.pawn.white { background-image: url("/pieces/neo/wP.svg"); }
.cg-mount[data-piece-set="neo"] piece.knight.white { background-image: url("/pieces/neo/wN.svg"); }
.cg-mount[data-piece-set="neo"] piece.bishop.white { background-image: url("/pieces/neo/wB.svg"); }
.cg-mount[data-piece-set="neo"] piece.rook.white { background-image: url("/pieces/neo/wR.svg"); }
.cg-mount[data-piece-set="neo"] piece.queen.white { background-image: url("/pieces/neo/wQ.svg"); }
.cg-mount[data-piece-set="neo"] piece.king.white { background-image: url("/pieces/neo/wK.svg"); }
.cg-mount[data-piece-set="neo"] piece.pawn.black { background-image: url("/pieces/neo/bP.svg"); }
.cg-mount[data-piece-set="neo"] piece.knight.black { background-image: url("/pieces/neo/bN.svg"); }
.cg-mount[data-piece-set="neo"] piece.bishop.black { background-image: url("/pieces/neo/bB.svg"); }
.cg-mount[data-piece-set="neo"] piece.rook.black { background-image: url("/pieces/neo/bR.svg"); }
.cg-mount[data-piece-set="neo"] piece.queen.black { background-image: url("/pieces/neo/bQ.svg"); }
.cg-mount[data-piece-set="neo"] piece.king.black { background-image: url("/pieces/neo/bK.svg"); }

.cg-mount[data-piece-set="cburnett"] piece.pawn.white { background-image: url("/pieces/cburnett/wP.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.knight.white { background-image: url("/pieces/cburnett/wN.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.bishop.white { background-image: url("/pieces/cburnett/wB.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.rook.white { background-image: url("/pieces/cburnett/wR.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.queen.white { background-image: url("/pieces/cburnett/wQ.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.king.white { background-image: url("/pieces/cburnett/wK.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.pawn.black { background-image: url("/pieces/cburnett/bP.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.knight.black { background-image: url("/pieces/cburnett/bN.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.bishop.black { background-image: url("/pieces/cburnett/bB.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.rook.black { background-image: url("/pieces/cburnett/bR.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.queen.black { background-image: url("/pieces/cburnett/bQ.svg"); }
.cg-mount[data-piece-set="cburnett"] piece.king.black { background-image: url("/pieces/cburnett/bK.svg"); }

.cg-mount[data-piece-set="merida"] piece.pawn.white { background-image: url("/pieces/merida/wP.svg"); }
.cg-mount[data-piece-set="merida"] piece.knight.white { background-image: url("/pieces/merida/wN.svg"); }
.cg-mount[data-piece-set="merida"] piece.bishop.white { background-image: url("/pieces/merida/wB.svg"); }
.cg-mount[data-piece-set="merida"] piece.rook.white { background-image: url("/pieces/merida/wR.svg"); }
.cg-mount[data-piece-set="merida"] piece.queen.white { background-image: url("/pieces/merida/wQ.svg"); }
.cg-mount[data-piece-set="merida"] piece.king.white { background-image: url("/pieces/merida/wK.svg"); }
.cg-mount[data-piece-set="merida"] piece.pawn.black { background-image: url("/pieces/merida/bP.svg"); }
.cg-mount[data-piece-set="merida"] piece.knight.black { background-image: url("/pieces/merida/bN.svg"); }
.cg-mount[data-piece-set="merida"] piece.bishop.black { background-image: url("/pieces/merida/bB.svg"); }
.cg-mount[data-piece-set="merida"] piece.rook.black { background-image: url("/pieces/merida/bR.svg"); }
.cg-mount[data-piece-set="merida"] piece.queen.black { background-image: url("/pieces/merida/bQ.svg"); }
.cg-mount[data-piece-set="merida"] piece.king.black { background-image: url("/pieces/merida/bK.svg"); }

/* --- upstream square highlights --- */
.cg-mount cg-board square.selected {
  background-color: rgba(20, 85, 30, 0.5);
}

.cg-mount cg-board square.last-move {
  background-color: rgba(155, 199, 0, 0.41);
}

.cg-mount cg-board square.check {
  background: radial-gradient(circle, rgba(224, 49, 49, 0.9) 15%, rgba(224, 49, 49, 0.3) 55%, transparent 72%);
}

.cg-mount cg-board square.move-dest {
  background: radial-gradient(circle, rgba(20, 40, 30, 0.32) 22%, transparent 23%);
}

.cg-mount cg-board square.move-dest.oc {
  background: radial-gradient(circle, transparent 78%, rgba(20, 40, 30, 0.35) 79%);
}

.cg-mount cg-board square.current-premove {
  background-color: rgba(32, 120, 200, 0.5);
}

/* --- overlay anchor layer for host feedback badges --- */
.cg-mount .cg-anchors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.cg-mount .cg-anchor {
  position: absolute;
  display: block;
  pointer-events: none;
}

/* --- Promotion chooser --- */
.cg-promo-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 20;
}

.cg-promo {
  position: absolute;
  width: 12.5%;
  height: 50%;
  z-index: 21;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.cg-promo-opt {
  flex: 1 1 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  border-radius: 4px;
}

.cg-promo-opt:hover,
.cg-promo-opt:focus-visible {
  background-color: rgba(16, 185, 129, 0.25);
  outline: none;
}

/* --- Visual-only terminal states (no canvas, no audio) --- */
.cg-host.cg-solved { animation: cg-flash-solved 1200ms ease-out; }
.cg-host.cg-failed { animation: cg-shake-failed 600ms ease-out; }
.cg-host.cg-correct { animation: cg-flash-correct 400ms ease-out; }
.cg-host.cg-wrong { animation: cg-flash-wrong 400ms ease-out; }

@keyframes cg-flash-solved {
  0%, 100% { box-shadow: none; }
  25% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.85); }
}

@keyframes cg-shake-failed {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@keyframes cg-flash-correct {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.8); }
}

@keyframes cg-flash-wrong {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .cg-mount.cg-wrap piece {
    transition: none !important;
    animation: none !important;
  }

  .cg-host.cg-solved { animation: none; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.85); }
  .cg-host.cg-failed { animation: none; box-shadow: 0 0 0 4px rgba(224, 49, 49, 0.85); }
  .cg-host.cg-correct { animation: none; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.8); }
  .cg-host.cg-wrong { animation: none; box-shadow: 0 0 0 3px rgba(224, 49, 49, 0.8); }
}