/* Checkers. The board is a container, so discs and numbers scale with it
   (cqw) and a phone's 390px and a laptop's 30rem both look right. Each disc
   sizes itself in em from its own font-size, which is one square wide, so the
   drag ghost (outside the container) only has to set a font-size. */
.ck { width: min(30rem, 100%); }

.ck-board {
  container-type: inline-size;
  display: grid; grid-template-columns: repeat(8, 1fr);
  border: 3px solid var(--felt-dark); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); user-select: none; -webkit-user-select: none;
}

.ck-sq {
  --sq-light: var(--paper-2);
  --sq-dark: color-mix(in srgb, var(--felt) 55%, var(--paper));
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; box-sizing: border-box; min-width: 0;
  margin: 0; padding: 0; border: 0; font: inherit; color: inherit; line-height: 1;
  background-image: var(--ov-dot, none), var(--ov-last, none);
}
.ck-sq.light { background-color: var(--sq-light); }
.ck-sq.dark { background-color: var(--sq-dark); }

/* The squares the last turn's piece crossed. An overlay, so the dark square
   stays dark. */
.ck-sq.last { --ov-last: linear-gradient(rgb(224 117 45 / 0.42), rgb(224 117 45 / 0.42)); }
.ck-sq.sel { box-shadow: inset 0 0 0 0.6cqw var(--accent); }

/* The standard square number, from data-n, so the square holds no text. */
.ck-sq.dark::before {
  content: attr(data-n); position: absolute; top: 0.8cqw; left: 0.8cqw;
  font-size: 2.4cqw; font-weight: 700; line-height: 1; opacity: 0.7; color: var(--paper); pointer-events: none;
}

/* A disc: a ring, a face, a highlight. Black is dark, White is cream; both
   read on the green squares, and the ring keeps cream off cream. */
.ck-piece {
  font-size: 12.5cqw; width: 0.76em; height: 0.76em; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 0.06em 0.1em rgb(0 0 0 / 0.35);
}
.ck-piece.black {
  background: radial-gradient(circle at 35% 30%, #5a5148, #2b2620 60%);
  border: 0.05em solid #14110e;
}
.ck-piece.white {
  background: radial-gradient(circle at 35% 30%, #fffdf8, #e6dcc6 70%);
  border: 0.05em solid #7a6e5a;
}
/* An inner ring, so every disc looks like a stacked checker. */
.ck-piece::before {
  content: ""; position: absolute; inset: 0.1em; border-radius: 50%;
  border: 0.03em solid rgb(255 255 255 / 0.22);
}
.ck-piece.white::before { border-color: rgb(122 110 90 / 0.5); }
/* A king wears a crown: Phosphor's crown-simple (fill, MIT, as the
   site's other icons), so it looks the same on every device, as the
   chess pieces do (113). A mask, so the colour below is the crown's. */
.ck-piece.king::after {
  content: ""; position: relative; width: 0.5em; height: 0.5em; background: currentColor;
  -webkit-mask: center / contain no-repeat var(--ck-crown); mask: center / contain no-repeat var(--ck-crown);
  --ck-crown: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><path d='M239.75,90.81c0,.11,0,.21-.07.32L217,195a16,16,0,0,1-15.72,13H54.71A16,16,0,0,1,39,195L16.32,91.13c0-.11-.05-.21-.07-.32A16,16,0,0,1,44,77.39l33.67,36.29,35.8-80.29a1,1,0,0,0,0-.1,16,16,0,0,1,29.06,0,1,1,0,0,0,0,.1l35.8,80.29L212,77.39a16,16,0,0,1,27.71,13.42Z'/></svg>");
}
.ck-piece.black.king::after { color: #f0c64a; }
.ck-piece.white.king::after { color: #8a5a10; }

/* Squares you can act on. */
button.ck-sq { cursor: pointer; }
button.ck-sq.mine { touch-action: none; }
button.ck-sq.mine:hover { box-shadow: inset 0 0 0 0.4cqw rgb(224 117 45 / 0.6); }
button.ck-sq:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* A destination: a dot on the empty square. */
.ck-sq.dest {
  --ov-dot: radial-gradient(circle, rgb(43 38 32 / 0.5) 0 2cqw, transparent calc(2cqw + 0.5px));
}
.ck-sq.dest:hover { box-shadow: inset 0 0 0 0.5cqw var(--accent); }

/* While dragging, any square that could take a piece is ready. */
.ck-sq.gn-drop-ready { box-shadow: inset 0 0 0 0.3cqw rgb(224 117 45 / 0.5); }
.ck-sq.gn-drop-over { box-shadow: inset 0 0 0 0.7cqw var(--accent); }
.ck-sq.gn-dragging .ck-piece { opacity: 0.35; }
.ck-sq.gn-drag-ghost { background: none; box-shadow: none; }
.ck-sq.gn-drag-ghost::before { content: none; }
.ck-sq.gn-drag-ghost .ck-piece { font-size: 4rem; }

/* Move list: one line per pair of plies, numbered by the list. The box
   opens at the newest moves and stays there (`GameKit.MoveList`):
   a column-reverse scroller whose one child, the list, sits at its end. */
.ck-moves {
  display: flex; flex-direction: column-reverse; margin: 0.8rem 0 0; max-height: 9rem; overflow-y: auto;
  font-family: var(--mono); font-size: 0.9rem; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.ck-moves ol {
  flex: none; margin: 0; padding: 0.5rem 0.5rem 0.5rem 2.2rem;
  display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; list-style-position: inside;
}
.ck-moves li { min-width: 10rem; padding: 0; }
.ck-moves li::marker { color: var(--ink-soft); }
.ck-ply { display: inline-block; min-width: 4.6rem; margin-right: 0.3rem; }