/* Chess Coach board theme for cm-chessboard: warm cream / soft brown, clay highlights. */
.cc-board, .cc-board-inner { width: 100%; height: 100%; }
.cc-board-inner { border-radius: 8px; overflow: hidden; }

/* Colour themes (chesscoach/board_style.py): the wrapper gets cc-theme-<key>. */
.cc-board { --cc-sq-light: #EFE4CF; --cc-sq-dark: #B99470; }
.cc-board.cc-theme-walnut { --cc-sq-light: #F0D9B5; --cc-sq-dark: #A97A55; }
.cc-board.cc-theme-green { --cc-sq-light: #E9EDCC; --cc-sq-dark: #77995A; }
.cc-board.cc-theme-blue { --cc-sq-light: #DEE3E6; --cc-sq-dark: #8CA2AD; }
.cc-board.cc-theme-slate { --cc-sq-light: #E3E1DC; --cc-sq-dark: #8F8B84; }

.cm-chessboard.cc .board .square.white { fill: var(--cc-sq-light); }
.cm-chessboard.cc .board .square.black { fill: var(--cc-sq-dark); }
.cm-chessboard.cc .board .border { stroke-width: 0; fill: var(--cc-sq-dark); }
.cm-chessboard.cc .coordinates { pointer-events: none; user-select: none; }
.cm-chessboard.cc .coordinates .coordinate { font-family: Inter, system-ui, sans-serif; font-weight: 600;
  font-size: 7px; cursor: default; }
/* A coordinate sits on a square of the other colour: light text on dark squares and vice versa. */
.cm-chessboard.cc .coordinates .coordinate.black { fill: var(--cc-sq-light); }
.cm-chessboard.cc .coordinates .coordinate.white { fill: var(--cc-sq-dark); filter: brightness(0.8); }

/* Squares: last move, selected piece, legal destinations, king in check. */
.cm-chessboard .markers .marker.cc-mark-last { fill: var(--cc-accent, #C96442); opacity: 0.26; }
.cm-chessboard .markers .marker.cc-mark-selected { fill: var(--cc-accent, #C96442); opacity: 0.42; }
.cm-chessboard .markers .marker.cc-mark-dest { fill: #5A3C28; opacity: 0.38; }
.cm-chessboard .markers .marker.cc-mark-capture { stroke: #5A3C28; stroke-width: 3px; opacity: 0.35; }
.cm-chessboard .markers .marker.cc-mark-check { fill: #C8281E; stroke: #C8281E; stroke-width: 3px; opacity: 0.55; }

/* Circles (hints, highlighted squares) in the arrow colours. */
.cm-chessboard .markers .marker.cc-mark-clay { stroke: var(--cc-accent, #C96442); stroke-width: 3px; opacity: 0.9; }
.cm-chessboard .markers .marker.cc-mark-grey { stroke: #5E5A54; stroke-width: 3px; opacity: 0.75; }
.cm-chessboard .markers .marker.cc-mark-slate { stroke: #4F6A86; stroke-width: 3px; opacity: 0.8; }
.cm-chessboard .markers .marker.cc-mark-ochre { stroke: #C79A3A; stroke-width: 3px; opacity: 0.9; }

/* Arrows: theme accent (clay by default) = Stockfish / the move to play, warm grey = what was played, slate = your try, ochre = hints. */
.cm-chessboard .arrow-head { fill-rule: nonzero; }
.cm-chessboard .arrow-line { stroke-linecap: round; }
.cm-chessboard .cc-arrow-clay .arrow-head { fill: var(--cc-accent, #C96442); }
.cm-chessboard .cc-arrow-clay .arrow-line { stroke: var(--cc-accent, #C96442); opacity: 0.9; }
.cm-chessboard .cc-arrow-grey .arrow-head { fill: #5E5A54; }
.cm-chessboard .cc-arrow-grey .arrow-line { stroke: #5E5A54; opacity: 0.75; }
.cm-chessboard .cc-arrow-slate .arrow-head { fill: #4F6A86; }
.cm-chessboard .cc-arrow-slate .arrow-line { stroke: #4F6A86; opacity: 0.8; }
.cm-chessboard .cc-arrow-ochre .arrow-head { fill: #C79A3A; }
.cm-chessboard .cc-arrow-ochre .arrow-line { stroke: #C79A3A; opacity: 0.9; }