.board { display: block; width: 100%; height: auto; border-radius: 6px; user-select: none; -webkit-user-select: none; filter: var(--board-filter); touch-action: manipulation; }

.sq-light { fill: var(--sq-light); }
.sq-dark { fill: var(--sq-dark); }

/* Туман: плавно сгущается и рассеивается */
.fog { fill: var(--fog); opacity: 0; transition: opacity 0.28s ease; pointer-events: none; }
.fog.on { opacity: var(--fog-opacity); }

.mark-last { fill: var(--mark-last); }
.mark-selected { fill: var(--mark-selected); }
.hint { pointer-events: none; }
.hint-move { fill: var(--hint); }
.hint-capture { fill: none; stroke: var(--hint-capture); stroke-width: 9; }

.coord { font: 700 17px var(--font-ui); pointer-events: none; opacity: 0.85; }
.coord.end { text-anchor: end; }
.coord.on-light { fill: var(--sq-dark); }
.coord.on-dark { fill: var(--sq-light); }

.hit { fill: transparent; }
.board.is-interactive .hit { cursor: pointer; }

/* Фигуры. Стили .f/.d/.dot живут в спрайте, поэтому не зависят от родителей <use> */
.piece { pointer-events: none; transition: transform 0.16s ease-out, opacity 0.18s ease; }
.piece-enter { animation: piece-in 0.22s ease both; }
.piece-leave { opacity: 0; }
@keyframes piece-in { from { opacity: 0; } }

symbol .f, .f { fill: var(--pf); stroke: var(--ps); stroke-width: 3; stroke-linejoin: round; }
symbol .d, .d { fill: none; stroke: var(--pd); stroke-width: 2.6; stroke-linecap: round; display: var(--show-detail, inline); }
symbol .dot, .dot { fill: var(--pd); }
.glyph { fill: var(--pd); font: 700 46px Georgia, "Times New Roman", serif; }

.piece-icon { flex: none; display: block; }