/* ============================================================
   LUMICHESS CM-CHESSBOARD THEME
   Warm cream/espresso board with amber accents.
   Overrides the "default" theme in cm-chessboard.
   ============================================================ */

/* ── Board Square Colors ─────────────────────────────────── */

.cm-chessboard.default .board .square.white {
  fill: var(--lumi-board-light, #F5E6C8);
}
.cm-chessboard.default .board .square.black {
  fill: var(--lumi-board-dark, #A67B4B);
}

/* Border (none mode) */
.cm-chessboard.default.border-type-none .board .border {
  stroke: var(--lumi-board-dark, #A67B4B);
  fill: var(--lumi-board-dark, #A67B4B);
}

/* ── Coordinates ─────────────────────────────────────────── */

.cm-chessboard.default .coordinates .coordinate {
  font-family: var(--lumi-font, 'Satoshi', sans-serif);
  font-weight: 600;
  font-size: 7px;
}
.cm-chessboard.default .coordinates .coordinate.black {
  fill: rgba(245, 230, 200, 0.8);
}
.cm-chessboard.default .coordinates .coordinate.white {
  fill: rgba(92, 69, 3, 0.7);
}

/* ── Board Shadow & Container ────────────────────────────── */

.cm-board-wrap {
  border-radius: var(--lumi-radius-xs, 4px);
  overflow: hidden;
  box-shadow: var(--lumi-shadow-board, 0 4px 24px rgba(0,0,0,0.5));
}

svg.cm-chessboard {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Engine Arrow Styles (best move / alternatives) ──────── */

/* Best-move arrow (green) */
.cm-chessboard .arrow-best .arrow-head {
  fill: rgba(96, 181, 73, 0.9);
  fill-rule: nonzero;
}
.cm-chessboard .arrow-best .arrow-line {
  stroke: rgba(96, 181, 73, 0.9);
  stroke-linecap: round;
  opacity: 0.7;
}

/* Alternative engine arrow (lighter amber) */
.cm-chessboard .arrow-alt .arrow-head {
  fill: rgba(223, 145, 0, 0.6);
  fill-rule: nonzero;
}
.cm-chessboard .arrow-alt .arrow-line {
  stroke: rgba(223, 145, 0, 0.6);
  stroke-linecap: round;
  opacity: 0.5;
}

/* Hint arrow (green) */
.cm-chessboard .arrow-hint .arrow-head {
  fill: rgba(129, 182, 76, 0.9);
  fill-rule: nonzero;
}
.cm-chessboard .arrow-hint .arrow-line {
  stroke: rgba(129, 182, 76, 0.9);
  stroke-linecap: round;
  opacity: 0.7;
}

/* Lesson arrow — green (for instructional move arrows) */
.cm-chessboard .arrow-green .arrow-head {
  fill: rgba(0, 200, 0, 0.85);
  fill-rule: nonzero;
}
.cm-chessboard .arrow-green .arrow-line {
  stroke: rgba(0, 200, 0, 0.85);
  stroke-linecap: round;
  opacity: 0.7;
}

/* Lesson arrow — red (for danger/wrong arrows) */
.cm-chessboard .arrow-red .arrow-head {
  fill: rgba(250, 65, 45, 0.85);
  fill-rule: nonzero;
}
.cm-chessboard .arrow-red .arrow-line {
  stroke: rgba(250, 65, 45, 0.85);
  stroke-linecap: round;
  opacity: 0.7;
}

/* ── User Annotation Arrows (right-click drawn) ─────────── */

/* Green arrow (default right-click) */
.cm-chessboard .arrow-success .arrow-head {
  fill: rgba(21, 120, 27, 0.85);
  fill-rule: nonzero;
}
.cm-chessboard .arrow-success .arrow-line {
  stroke: rgba(21, 120, 27, 0.85);
  stroke-linecap: round;
  opacity: 0.75;
}

/* Blue arrow (Alt + right-click) */
.cm-chessboard .arrow-info .arrow-head {
  fill: rgba(0, 60, 180, 0.85);
  fill-rule: nonzero;
}
.cm-chessboard .arrow-info .arrow-line {
  stroke: rgba(0, 60, 180, 0.85);
  stroke-linecap: round;
  opacity: 0.75;
}

/* Red arrow (Shift + right-click) */
.cm-chessboard .arrow-danger .arrow-head {
  fill: rgba(170, 30, 30, 0.85);
  fill-rule: nonzero;
}
.cm-chessboard .arrow-danger .arrow-line {
  stroke: rgba(170, 30, 30, 0.85);
  stroke-linecap: round;
  opacity: 0.75;
}

/* Orange arrow (Shift + Alt + right-click) */
.cm-chessboard .arrow-warning .arrow-head {
  fill: rgba(230, 143, 0, 0.85);
  fill-rule: nonzero;
}
.cm-chessboard .arrow-warning .arrow-line {
  stroke: rgba(230, 143, 0, 0.85);
  stroke-linecap: round;
  opacity: 0.75;
}

/* ── User Annotation Circle Markers (right-click) ───────── */

/* Right-click square highlights (full square fill — all light red) */
.cm-chessboard .markers .marker.marker-sq-success,
.cm-chessboard .markers .marker.marker-sq-info,
.cm-chessboard .markers .marker.marker-sq-danger,
.cm-chessboard .markers .marker.marker-sq-warning {
  fill: rgba(204, 51, 51, 0.5);
  opacity: 1;
}

/* ── Marker Overrides ────────────────────────────────────────
   Tuned to match Chess.com / Lichess feedback intensity. The previous
   amber-frame (4 corner brackets) read too subtle on the maestro pieces;
   players reported clicking a piece "didn't do anything visible". The
   selection auto-marker is now MARKER_TYPE.square (full-tile fill) and
   we style it here. Legal-move dots are bolder and capture squares show
   a clear ring outline. */

/* Selected piece's source square — solid amber tile fill (Lichess style).
   Auto-applied by cm-chessboard when a piece is grabbed via click or
   drag (autoMarkers = MARKER_TYPE.square in ChessgroundBoard.js). */
.cm-chessboard .markers .marker.marker-square {
  fill: rgba(255, 191, 0, 0.42);
  opacity: 1;
}

/* Keep the old marker-frame style available too — only used by callers
   that explicitly request it (e.g., focus-mode highlighting). */
.cm-chessboard .markers .marker.marker-frame {
  stroke: rgba(255, 191, 0, 0.7);
  stroke-width: 3;
  fill: rgba(255, 191, 0, 0.1);
}

/* Legal-move destination dots — larger, darker, more visible. cm-chessboard's
   default dot is rendered via the markers SVG sprite; we control its
   appearance via fill/opacity here. */
.cm-chessboard .markers .marker.marker-dot {
  fill: rgba(20, 20, 20, 0.45);
  opacity: 1;
}
.cm-chessboard .markers-top-layer .marker.marker-dot {
  fill: rgba(20, 20, 20, 0.45);
  opacity: 1;
}

/* Capture indicator — convert from "bevel corners" (subtle) to a thick
   ring outline around the square (Chess.com-style). The bevel marker is
   actually drawn as a square-with-cut-corners; styling it as a ring via
   a heavy stroke + transparent fill turns the cut corners into the
   ring's gap, giving the same "this captures something" affordance you
   see on Chess.com. */
.cm-chessboard .markers .marker.marker-bevel {
  fill: transparent;
  stroke: rgba(20, 20, 20, 0.4);
  stroke-width: 4;
  opacity: 1;
}

/* ── Last-Move Highlighting ─────────────────────────────── */

.cm-chessboard .markers .marker.marker-last-move {
  fill: rgba(255, 199, 0, 0.33);
  opacity: 1;
}

/* ── Check Indication ───────────────────────────────────── */

.cm-chessboard .markers .marker.marker-check {
  fill: rgba(204, 51, 51, 0.55);
  opacity: 1;
}

/* ── Classification Square Highlights (behind pieces) ─────
   All fills use the canonical SVG-badge hex values at 35%
   alpha so the square tint matches the badge icon exactly.
   Keep in sync with src/classification/MoveClassifier.js. */

.cm-chessboard .markers .marker.marker-class-brilliant {
  fill: rgba(163, 88, 208, 0.35); /* #a358d0 */
  opacity: 1;
}
.cm-chessboard .markers .marker.marker-class-great {
  fill: rgba(59, 135, 200, 0.35); /* #3b87c8 */
  opacity: 1;
}
.cm-chessboard .markers .marker.marker-class-bestmove {
  fill: rgba(91, 168, 41, 0.35); /* #5ba829 */
  opacity: 1;
}
.cm-chessboard .markers .marker.marker-class-excellent {
  fill: rgba(110, 175, 32, 0.35); /* #6eaf20 */
  opacity: 1;
}
.cm-chessboard .markers .marker.marker-class-good {
  fill: rgba(115, 164, 90, 0.35); /* #73a45a */
  opacity: 1;
}
.cm-chessboard .markers .marker.marker-class-bookmove {
  fill: rgba(196, 154, 42, 0.35); /* #c49a2a */
  opacity: 1;
}
.cm-chessboard .markers .marker.marker-class-inaccuracy {
  fill: rgba(232, 186, 2, 0.35); /* #e8ba02 */
  opacity: 1;
}
.cm-chessboard .markers .marker.marker-class-mistake {
  fill: rgba(229, 130, 13, 0.35); /* #e5820d */
  opacity: 1;
}
.cm-chessboard .markers .marker.marker-class-blunder {
  fill: rgba(207, 49, 32, 0.35); /* #cf3120 */
  opacity: 1;
}
.cm-chessboard .markers .marker.marker-class-missed {
  fill: rgba(212, 89, 89, 0.35); /* #d45959 */
  opacity: 1;
}

/* ── Promotion Dialog (dark theme) ───────────────────────── */

svg.cm-chessboard .promotion-dialog-group .promotion-dialog {
  fill: rgba(30, 30, 27, 0.92);
  fill-opacity: 1;
  stroke: rgba(255, 191, 0, 0.15);
}

svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button:hover {
  fill: rgba(255, 191, 0, 0.15);
}

svg.cm-chessboard .promotion-dialog-group .promotion-dialog-button-group:focus .promotion-dialog-button {
  stroke: rgba(255, 191, 0, 0.3);
  stroke-width: 2px;
}

/* ── Classification Overlay ──────────────────────────────── */

.cg-classification-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.cg-classification-layer .cg-sq-overlay {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
}

.cg-classification-layer .classification {
  position: absolute;
  width: 40%;
  height: 40%;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: 12;
}

.cg-classification-layer .cg-sq-highlight {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Premove Highlights ─────────────────────────────────── */

.cg-classification-layer .cg-sq-premove {
  pointer-events: none;
  z-index: 8;
}

/* ── Piece Interactions ─────────────────────────────────── */

/* Pointer cursor on interactive squares */
.cm-chessboard .board.input-enabled .square {
  cursor: pointer;
}

/* Ghost piece at source square during drag (30% opacity) */
.cm-chessboard .pieces g[visibility="hidden"] {
  visibility: visible !important;
  opacity: 0.3;
}

/* In-board dragging piece */
.cm-chessboard .pieces g.dragging,
.cm-chessboard .piece.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}

/* Separate draggable piece element (appended to body during drag) */
svg.cm-chessboard-draggable-piece {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.45)) drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  z-index: 1000;
}

/* ── Game Result Overlay (centered on board) ──────────── */

.cg-result-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.0);
  transition: background 0.4s ease;
  cursor: pointer;
}

.cg-result-overlay--visible {
  background: rgba(0, 0, 0, 0.55);
}

.cg-result-overlay__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 32px;
  border-radius: 12px;
  background: rgba(30, 30, 27, 0.92);
  border: 1px solid rgba(255, 191, 0, 0.15);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 191, 0, 0.06);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.cg-result-overlay--visible .cg-result-overlay__card {
  opacity: 1;
  transform: scale(1);
}

.cg-result-overlay__icon {
  width: 36px;
  height: 36px;
  color: #FFBF00;
}

.cg-result-overlay__icon svg {
  width: 100%;
  height: 100%;
}

.cg-result-overlay__label {
  font-family: var(--lumi-font, 'Satoshi', sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.cg-result-overlay__winner {
  font-family: var(--lumi-font, 'Satoshi', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.03em;
}