/* EXTRACTED by build.py from ../chess/style.css - do not edit here.
 * The four colour variables below are the site's to choose; everything
 * else is the same geometry the guest app uses. */
:root{--sq-light:#c6c1b6;--sq-dark:#4b4b51;--sq-hl:rgba(216,201,138,.55);--pc-white:#f7f4ee;--pc-black:#141416;--border2:#c6c9bf}
/* ── Board ──────────────────────────────────────────────────────────── */

.cb {
  display: grid;
  /* minmax(0, 1fr), not 1fr. A bare 1fr track is minmax(auto, 1fr) and refuses
   * to shrink below its content, so ranks holding pieces come out taller than
   * empty ones and the board is visibly not square — aspect-ratio on the
   * container does not save you, it just decides where the overflow goes. */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  aspect-ratio: 1;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border2);
  /* Coordinate labels are sized in em off this, so they scale with the board
   * and never need a pixel breakpoint. */
  font-size: clamp(8px, 2.1vw, 11px);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.cb-sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-light { background: var(--sq-light); }
.cb-dark  { background: var(--sq-dark); }
.cb-hl::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--sq-hl);
  pointer-events: none;
}

.cb-p {
  width: 86%; height: 86%;
  display: block;
  pointer-events: none;   /* clicks belong to the square, not the artwork */
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cb-w { fill: var(--pc-white); stroke: var(--pc-black); stroke-width: 1.1; }
.cb-b { fill: var(--pc-black); stroke: var(--pc-white); stroke-width: 1.1; }
/* The eye, the bishop's slit and the king's cross are drawn in the outline
 * colour, so they read as cut into the piece rather than sitting on it. */
.cb-w .cb-eye { fill: var(--pc-black); stroke: none; }
.cb-b .cb-eye { fill: var(--pc-white); stroke: none; }
.cb-cut { stroke-width: 1.5; }
.cb-cross { stroke-width: 3.1; }

.cb-coord {
  position: absolute;
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  opacity: 0.5;
  pointer-events: none;
}
.cb-coord-file { right: 0.25em; bottom: 0.2em; }
.cb-coord-rank { left: 0.25em; top: 0.2em; }
.cb-light .cb-coord { color: var(--sq-dark); }
.cb-dark  .cb-coord { color: var(--sq-light); }