.chess-puzzle { margin-top: 1.25rem; }
.chess-layout { display: grid; grid-template-columns: minmax(0, 310px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.chess-position { width: 100%; max-width: 310px; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 5px 6px; }
.chess-board { border: 1px solid var(--line, #303030); width: 100%; max-width: 288px; }
.chess-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.chess-cell { aspect-ratio: 1; min-width: 0; }
.chess-square { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; cursor: pointer; touch-action: manipulation; }
.chess-square--light { background: #797979; }
.chess-square--dark { background: #4b4b4b; }
.site-white .chess-square--light { background: #e3e3e3; }
.site-white .chess-square--dark { background: #a6a6a6; }
.chess-square.is-selected, .chess-square.is-last-move { box-shadow: inset 0 0 0 2px #ededed, inset 0 0 0 3px #292929; }
.chess-square.is-destination::after { content: ""; position: absolute; inset: 39%; border: 1px solid #222; border-radius: 50%; background: #ededed; pointer-events: none; }
.chess-square.is-destination:has(.chess-piece)::after { inset: 4px; border: 2px solid #ededed; background: transparent; }
.chess-square:focus-visible { outline: 2px solid #fff; outline-offset: -3px; z-index: 1; box-shadow: inset 0 0 0 4px #222; }
.chess-piece { position: relative; width: 94%; height: 94%; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.chess-piece--w { fill: #f6f6f6; stroke: #222; }
.chess-piece--b { fill: #222; stroke: #ededed; }
.chess-piece--w .chess-piece-eye { fill: #222; }
.chess-piece--b .chess-piece-eye { fill: #ededed; }
.chess-ranks, .chess-files { color: var(--faint, #909090); font-size: .6875rem; line-height: 1; user-select: none; }
.chess-ranks { display: grid; grid-template-rows: repeat(8, 1fr); align-items: center; text-align: center; }
.chess-files { grid-column: 2; display: grid; grid-template-columns: repeat(8, 1fr); text-align: center; padding-top: 2px; }
.chess-side { padding-top: .125rem; }
.chess-count { color: var(--faint, #909090); font-size: .75rem; margin: 0 0 .875rem; }
.chess-status { color: var(--fg, #e8e8e8); font-size: .875rem; line-height: 1.65; min-height: 5.8em; margin: 0; }
.chess-instructions { color: var(--faint, #909090); font-size: .75rem; line-height: 1.65; margin: 1rem 0 0; }
.chess-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.125rem; }
.chess-controls button { padding: .3rem 0; border: 0; border-radius: 0; background: none; color: var(--soft, #b0b0b0); font: inherit; font-size: .8125rem; cursor: pointer; text-underline-offset: 4px; }
.chess-controls button:hover { color: var(--fg, #e8e8e8); text-decoration: underline; }
.chess-controls button:focus-visible { outline: 2px solid var(--fg, #e8e8e8); outline-offset: 4px; }
@media (max-width: 580px) {
  .chess-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .chess-side { max-width: 310px; }
  .chess-status { min-height: 3.3em; }
  .chess-instructions { margin-top: .65rem; }
  .chess-controls { margin-top: .75rem; }
}