/* One calm board palette and local piece set across play, replay and spectators. */
:root {
    --board-light: #bbc6a7;
    --board-dark: #596a50;
    --light-sq: var(--board-light);
    --dark-sq: var(--board-dark);
}
.chessboard .square, #board .square, .board .sq { position: relative; background: var(--board-light); text-shadow: none; }
.chessboard .square:not(.is-light), #board .square.dark, .board .sq.dark { background: var(--board-dark); }
.chessboard .square.is-last, #board .square.last, .board .sq.last {
    background-image: linear-gradient(#c5f35d30, #c5f35d30);
    box-shadow: inset 0 0 0 2px #b7ff3999;
}
.chessboard .square.is-selected { box-shadow: inset 0 0 0 4px var(--signal); }
.chessboard .square.is-check { box-shadow: inset 0 0 0 4px var(--danger); }
.piece-classic {
    position: absolute;
    z-index: 1;
    inset: 4%;
    width: 92%;
    height: 92%;
    max-width: none;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.chessboard .piece-svg, .promotion-button .piece-svg { display: none; }
html:is([data-piece-set="circuit"], [data-piece-set="beast"]) :is(.chessboard, .promotion-button) .piece-classic { display: none; }
html:is([data-piece-set="circuit"], [data-piece-set="beast"]) :is(.chessboard, .promotion-button) .piece-svg { display: block; }
.promotion-button .piece-classic { position: relative; inset: auto; width: 56px; height: 56px; }
.captured-pieces { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.captured-pieces .piece-classic { position: static; width: 23px; height: 23px; }
.board-frame { padding: 8px; border-color: #78896b; background: #182019; box-shadow: 0 12px 32px #0003; }
.board-frame::before, .board-frame::after { display: none; }
/* A waiting board should retain the same piece/square contrast as a live game. */
html body:not([data-has-game="true"]) .chessboard { filter: none; }
html[data-theme="light"] body:not([data-has-game="true"]) .chessboard { filter: none; }
.chessboard .square-coord, #board .square small { z-index: 2; color: #31442c; font-weight: 600; }
.chessboard .square:not(.is-light) .square-coord, #board .square.dark small { color: #eff3e6; }
.square.is-arrived .piece-classic { animation: piece-land .24s var(--ease); }
.square.is-check .piece-classic { filter: drop-shadow(0 0 3px #ff776f); }
@media (prefers-reduced-motion: reduce) {
    .square.is-arrived .piece-classic { animation: none; }
}