[v-cloak] { display: none; }

/* Centered play area that scales with the screen (big on desktop, full on mobile). */
.game-wrap { width: min(92vw, 82vh, 720px); max-width: 100%; margin: 0 auto; }

.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr); /* equal rows — empty ranks must match piece ranks */
  direction: ltr; /* the board must NEVER mirror with an RTL (Arabic) UI */
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
  container-type: inline-size;
}
.sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  cursor: pointer;
}
.sq-light { background: #e9edf2; }
.sq-dark { background: #7f95ad; }
.sq.last::before { content: ""; position: absolute; inset: 0; background: rgba(250, 204, 21, .30); }
.sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(59, 130, 246, .38); }
.sq.check::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(239, 68, 68, .75), transparent 70%); }

.piece {
  position: relative;
  z-index: 1;
  font-size: 2.25rem; /* fallback (e.g. promotion overlay, outside the board container) */
  line-height: 1;
}
/* SVG pieces fill the square by design (no overflow, no clipped edges). */
.piece-img { position: relative; z-index: 1; width: 94%; height: 94%; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
/* Glyph fallback (if the SVG set fails to load): sized to fit the square. */
.board .piece { font-size: 12cqw; }
.piece.w { color: #fbfbfb; -webkit-text-stroke: 1.6px #263143; text-stroke: 1.6px #263143; text-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.piece.b { color: #26303f; -webkit-text-stroke: 1.5px #0c1320; text-stroke: 1.5px #0c1320; text-shadow: 0 2px 3px rgba(0, 0, 0, .2); }

.dot { position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(0, 0, 0, .22); z-index: 1; }
.ring { position: absolute; inset: 7%; border-radius: 50%; border: 0.32rem solid rgba(0, 0, 0, .24); z-index: 1; }

.coord-f { position: absolute; bottom: 2px; inset-inline-end: 4px; font-size: .58rem; font-weight: 800; opacity: .45; z-index: 1; }
.coord-r { position: absolute; top: 2px; inset-inline-start: 4px; font-size: .58rem; font-weight: 800; opacity: .45; z-index: 1; }

@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop { animation: pop .22s ease-out; }