.chess-game {
  display: grid;
  justify-self: center;
  gap: .65rem;
  width: min(100%, 29rem);
  min-width: 0;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #a98dc4;
  border-radius: .65rem;
}

.chess-square {
  --board-tile: #e8d4f5;
  --board-coordinate: #493b5d;
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--board-tile);
  touch-action: manipulation;
}

.chess-square[data-shade="dark"] { --board-tile: #74629e; --board-coordinate: #fff3ff; }
.chess-square.is-last { background: #9399d1; }
.chess-square.is-check { background: #ca718e; }
.chess-square.is-selected { background: #8bc2a9; box-shadow: inset 0 0 0 3px #2e5e5b; }
.chess-square:focus-visible { z-index: 1; outline: 3px solid #432a66; outline-offset: -3px; }
.chess-square[aria-disabled="true"] { cursor: default; }

.chess-piece, .chess-promotion-piece {
  font: 400 clamp(1.1rem, 7.2vw, 2.6rem)/1 "Segoe UI Symbol", "DejaVu Sans", "Apple Symbols", serif;
  transform: translateY(-.04em);
  pointer-events: none;
}

.chess-square[data-piece^="w"] .chess-piece { color: #fff6db; text-shadow: 0 1px 1px #392940; -webkit-text-stroke: .8px #3b2d47; }
.chess-square[data-piece^="b"] .chess-piece { color: #251b39; text-shadow: 0 1px 1px #e0cbfa; -webkit-text-stroke: .4px #f0dfff; }
.chess-rank, .chess-file {
  position: absolute;
  color: var(--board-coordinate);
  font: 800 clamp(.43rem, 2.25vw, .7rem)/1 ui-monospace, monospace;
  pointer-events: none;
}
.chess-rank { inset-block-start: 2px; inset-inline-start: 2px; }
.chess-file { inset-block-end: 2px; inset-inline-end: 2px; }

.chess-square.is-legal::after {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: #18564c;
  box-shadow: 0 0 0 1px #b9e5d3;
  content: "";
  pointer-events: none;
}
.chess-square.is-legal:not([data-piece=""])::after {
  inset: 2px;
  border: 2px solid #18564c;
  background: none;
  box-shadow: none;
}

.chess-promotion { display: grid; gap: .5rem; }
.chess-promotion-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.chess-promotion-actions button { min-height: 44px; }
.chess-promotion-piece { font-size: 1.2rem; }
.chess-hint { margin: 0; color: var(--online-subtle, #a6b5d4); font-size: .85rem; }