.board{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(560px, 92vw);
  aspect-ratio: 1 / 1;
  border-radius:18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  background: rgba(255,255,255,.04);
}

.sq{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio: 1 / 1; /* IMPORTANT: keep every square identical */
  user-select:none;
}

/* Remi-ish colors: lighter + darker blue */
.sq.light{ background: #e7ecf6; }
.sq.dark{ background: #5874a6; }

/* coordinate hint (optional) */
.sq::after{
  content: attr(data-sq);
  position:absolute;
  left:8px;
  top:6px;
  font-size:10px;
  opacity:0;
  color: rgba(0,0,0,.55);
}
.board:hover .sq::after{ opacity:.16; }

/* SVG piece image */
.piece-img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  display:block; /* prevents inline baseline gaps */
  pointer-events:none;
  user-select:none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

.sq.sel{ outline: 3px solid rgba(74,163,255,.75); outline-offset: -3px; }
.sq.target{ box-shadow: inset 0 0 0 4px rgba(54,211,153,.70); }
.sq.lastFrom, .sq.lastTo{ box-shadow: inset 0 0 0 4px rgba(255,77,109,.55); }