/* Checkers table — Author: Dave Greenlaw */

.ck-app {
  --ck-sq-light: var(--surface, #f3ead8);
  --ck-sq-dark: color-mix(in srgb, var(--accent, #2563eb) 18%, var(--surface, #e4d4b8));
}

.ck-app .ck-stage {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ck-felt {
  display: flex;
  justify-content: center;
}

.ck-board {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  width: min(72vw, 28rem);
  aspect-ratio: 1;
  border: 1px solid var(--border, #c4b8a4);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface, #f6f1e7);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text, #2a241c) 8%, transparent);
}

.ck-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.ck-sq {
  position: relative;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  background: var(--ck-sq-light);
  color: inherit;
}

.ck-sq.is-dark {
  background: var(--ck-sq-dark);
}

.ck-sq.is-legal {
  box-shadow: inset 0 0 0 2px var(--accent, #2563eb);
  cursor: pointer;
}

.ck-sq.is-picked {
  box-shadow: inset 0 0 0 3px var(--accent, #2563eb);
}

.ck-sq.is-dest {
  background: color-mix(in srgb, var(--accent, #2563eb) 36%, var(--ck-sq-light));
  cursor: pointer;
}

.ck-man {
  width: 68%;
  height: 68%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text, #1b1610) 55%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
}

.ck-man--b {
  background: color-mix(in srgb, var(--text, #1b1610) 88%, var(--surface, #fff));
}

.ck-man--r {
  background: color-mix(in srgb, #b42318 78%, var(--accent, #c2410c));
}

.ck-man.is-king::after {
  content: "★";
  position: absolute;
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--surface, #fff) 80%, #f5d76e);
}

.ck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  min-height: 2.25rem;
}

/* Dark / soft / glass: cream vs wood so men stay readable on playable squares. */
html[data-theme="dark"] .ck-app,
html[data-theme="soft"] .ck-app,
html[data-theme="glass"] .ck-app {
  --ck-sq-light: color-mix(in srgb, #f3ead8 90%, var(--accent, #8ab4f8));
  --ck-sq-dark: color-mix(in srgb, #7a6648 78%, var(--accent, #8ab4f8));
}

html[data-theme="dark"] .ck-man--b,
html[data-theme="soft"] .ck-man--b,
html[data-theme="glass"] .ck-man--b {
  background: #1a1612;
  border-color: color-mix(in srgb, #f4eee0 55%, transparent);
}

html[data-theme="dark"] .ck-man--r,
html[data-theme="soft"] .ck-man--r,
html[data-theme="glass"] .ck-man--r {
  background: color-mix(in srgb, #b42318 82%, #c2410c);
}

html[data-a11y-view="contrast"] .ck-sq.is-legal,
html[data-a11y-view="contrast"] .ck-sq.is-picked {
  box-shadow: inset 0 0 0 3px var(--text, #000);
}

html[data-theme="dark"][data-a11y-view="contrast"] .ck-app,
html[data-theme="soft"][data-a11y-view="contrast"] .ck-app,
html[data-theme="glass"][data-a11y-view="contrast"] .ck-app {
  --ck-sq-light: #f7f1e4;
  --ck-sq-dark: #5c4a32;
}