/*
 * checkers.css — luxury physical. Walnut and maple, weighted stone discs.
 *
 * Perf rule that shapes everything here: up to 24 discs are live DOM elements and
 * the whole board does a 3D flip. So each disc gets ONE cast shadow (not a stack),
 * grain comes from a single shared SVG turbulence filter, and only transform and
 * opacity are ever animated.
 */

.checkers-board { --maple: #e8d5a9; --walnut: #5b3a24; }

/* Grain: two cheap repeating gradients over a base. No images, no per-square filters. */
.csq {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background-blend-mode: overlay, overlay, normal;
}
.csq.light {
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(88deg, rgba(120,72,32,.10) 0 2px, transparent 2px 7px),
    linear-gradient(160deg, #f0dfb8 0%, var(--maple) 55%, #d8c193 100%);
}
.csq.dark {
  background:
    repeating-linear-gradient(93deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(87deg, rgba(0,0,0,.18) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #6b452b 0%, var(--walnut) 55%, #472c1a 100%);
}
/* raking light across the whole surface, so the board reads as a physical object */
.checkers-board .grid8::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(148deg, rgba(255,244,214,.16) 0%, transparent 42%, rgba(0,0,0,.22) 100%);
}
.csq.playable { cursor: pointer; }

/* ---- the discs ---------------------------------------------------------- */
.disc {
  position: absolute;
  width: 78%; height: 78%;
  border-radius: 50%;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  /* ONE cast shadow + a bevel ring. Do not add layers here; 24 of these must fly. */
  box-shadow:
    0 6px 10px -2px rgba(0,0,0,.6),
    inset 0 2px 3px rgba(255,255,255,.35),
    inset 0 -3px 5px rgba(0,0,0,.45);
  transition: transform .18s ease-out, opacity .18s;
  will-change: transform;
}
.disc.white {
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0%, #ede4d3 32%, #cbbfa8 70%, #a5977c 100%);
  border: 1px solid rgba(120,100,70,.5);
}
.disc.red {
  background:
    radial-gradient(circle at 34% 28%, #e88b7a 0%, #b93124 34%, #8c1f16 72%, #5e130d 100%);
  border: 1px solid rgba(60,10,6,.6);
}
/* milled edge ridges — a conic sheen, one element */
.disc::before {
  content: ''; position: absolute; inset: 7%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,.10), transparent 12%, rgba(0,0,0,.10) 25%,
              transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%, rgba(0,0,0,.10) 75%, transparent 88%, rgba(255,255,255,.10));
  opacity: .55; pointer-events: none;
}
.disc.sel { transform: scale(1.06); box-shadow: 0 10px 16px -3px rgba(0,0,0,.7), 0 0 0 3px var(--accent); }
.disc.lift { transform: translateY(-6%) scale(1.04); }

/* kings: a slow gold specular sweep + a crown glyph */
.disc.king::after {
  content: '♔';
  font-size: 46%;
  line-height: 1;
  color: #f7e6a8;
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 8px rgba(247,214,110,.55);
  z-index: 1;
}
.disc.king {
  animation: kingSheen 5s linear infinite;
}
@keyframes kingSheen {
  0%   { filter: brightness(1) }
  50%  { filter: brightness(1.14) }
  100% { filter: brightness(1) }
}

/* legal-move affordances */
.cdot::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 26%; height: 26%; border-radius: 50%;
  background: rgba(255,255,255,.55);
  box-shadow: 0 0 10px rgba(255,255,255,.5);
  z-index: 2;
}
.cjump::after { background: rgba(239,68,68,.85); box-shadow: 0 0 14px rgba(239,68,68,.8); }
.chint { box-shadow: inset 0 0 0 4px rgba(59,130,246,.9); }
.cmust { box-shadow: inset 0 0 0 3px rgba(239,68,68,.55); }

@media (prefers-reduced-motion: reduce) {
  .disc, .disc.king { transition: none; animation: none; }
}