/* =============================================================
   GAME: International Draughts (10×10)
   ============================================================= */
.board-draughts10 {
  --cell: min(calc((100vw - 72px) / 10), 50px);
  --dr-glow: #ff9a6b;
  display: grid; grid-template-columns: repeat(10, var(--cell)); grid-auto-rows: var(--cell);
  padding: 8px; background: #061a1e; border-radius: 14px;
  box-shadow: 0 0 0 2px var(--dr-glow), 0 0 26px rgba(255, 154, 107, .36);
}
.dr-cell { position: relative; border: 0; padding: 0; display: grid; place-items: center; }
.dr-cell.light { background: #2c5458; background-image: linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 60%); }
.dr-cell.dark { background: #0a2125; cursor: default; color: inherit; font: inherit; }
.dr-cell.dark:focus { outline: none; }
.dr-cell.dark:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 1; }
.dr-num {
  position: absolute; left: 3%; top: 1%; font: 600 calc(var(--cell) * .2) / 1 var(--font-body);
  color: rgba(160, 225, 225, .32); pointer-events: none;
}
.dr-slot { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.dr-cell.last { background: #16484a; }
.dr-cell.lastcap::before { content: ""; width: 30%; height: 30%; border-radius: 50%; border: 2px dashed rgba(255, 170, 130, .55); }
.dr-cell.trail { background: #3a2a22; }
.dr-cell.trail::before { content: ""; width: 22%; height: 22%; border-radius: 50%; background: rgba(255, 154, 107, .55); }
.dr-cell.movable, .dr-cell.dest { cursor: pointer; }
.dr-cell.dest::after {
  content: ""; position: absolute; width: 32%; height: 32%; border-radius: 50%;
  background: rgba(255, 190, 150, .6); box-shadow: 0 0 10px rgba(255, 154, 107, .8); pointer-events: none;
}
.dr-cell.dest:hover::after { width: 62%; height: 62%; opacity: .55; }
.dr-cell.victim::after {
  content: ""; position: absolute; inset: 9%; border-radius: 50%; pointer-events: none; z-index: 2;
  border: 2px dashed #ff5a4a; box-shadow: 0 0 10px rgba(255, 90, 74, .7);
}

.dr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* pieces: a thick draughtsman seen from above — glossy top with two engraved rings,
   a ridged edge built from stacked shadows (--h = one ridge), and a soft contact shadow */
.dr-piece {
  --h: calc(var(--cell) * .028);
  position: relative; width: 78%; height: 78%; border-radius: 50%; display: grid; place-items: center;
  transform: translateY(calc(var(--h) * -2));
  background: radial-gradient(circle at 50% 50%, transparent 66%, var(--lip) 70%, transparent 74%),
    radial-gradient(circle at 36% 28%, var(--hi) 0, var(--face) 48%, var(--lo) 100%);
  box-shadow:
    inset 0 0 0 calc(var(--cell) * .02) var(--rim),
    0 var(--h) 0 var(--e1), 0 calc(var(--h) * 2) 0 var(--e2), 0 calc(var(--h) * 3) 0 var(--e1), 0 calc(var(--h) * 4) 0 var(--e3),
    0 calc(var(--h) * 5) calc(var(--h) * 3) rgba(0, 0, 0, .6);
  transition: transform .15s, opacity .2s, filter .15s;
}
.dr-piece::before, .dr-piece::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.dr-piece::before { inset: 16%; box-shadow: inset 0 1px 1.5px var(--groove), 0 1px 0 var(--ridge); }
.dr-piece::after { inset: 31%; box-shadow: inset 0 1px 1.5px var(--groove), 0 1px 0 var(--ridge); }
.dr-piece.king::after { display: none; }
.dr-piece.p1 {
  --hi: #ffffff; --face: #fbf3e4; --lo: #d6c6a8; --lip: rgba(120, 90, 40, .14); --rim: rgba(190, 150, 100, .5);
  --e1: #d2c09c; --e2: #f3e8d2; --e3: #a08a62; --groove: rgba(110, 80, 30, .38); --ridge: rgba(255, 255, 255, .95);
}
.dr-piece.p2 {
  --hi: #5c6a70; --face: #1f2a2e; --lo: #070c0e; --lip: rgba(0, 0, 0, .35); --rim: rgba(255, 154, 107, .6);
  --e1: #141c1f; --e2: #6a3a28; --e3: #050809; --groove: rgba(0, 0, 0, .75); --ridge: rgba(255, 255, 255, .13);
}
.dr-dot.p1 { background: #fbf3e4; }
.dr-dot.p2 { background: #1f2a2e; box-shadow: 0 0 0 2px var(--dr-glow); }
.dr-crown { position: relative; z-index: 1; width: 66%; height: 66%; overflow: visible; filter: drop-shadow(0 1px .8px rgba(0, 0, 0, .55)); }
.dr-crown .c { fill: url(#dr-gold); stroke: #7a4a00; stroke-width: .9; stroke-linejoin: round; }
.dr-crown .j { fill: #ff7a4a; stroke: #8a2f0f; stroke-width: .6; }
/* jumped but not yet removed (Turkish strike): dimmed with a red cross */
.dr-piece.ghost { opacity: .72; transform: scale(.84); }
.dr-piece.ghost::after {
  display: block; inset: 18%; box-shadow: none; border-radius: 0;
  background: linear-gradient(45deg, transparent 42%, #ff5a4a 42%, #ff5a4a 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #ff5a4a 42%, #ff5a4a 58%, transparent 58%);
  filter: drop-shadow(0 0 3px rgba(255, 70, 50, .9));
}

.dr-cell.movable .dr-piece { filter: drop-shadow(0 0 calc(var(--cell) * .07) rgba(255, 154, 107, .9)); }
.dr-cell.must .dr-piece { animation: dr-must 1s ease-in-out infinite alternate; }
.dr-cell.movable:hover .dr-piece { transform: translateY(calc(var(--h) * -3.5)); }
.dr-cell.selected .dr-piece { transform: translateY(calc(var(--h) * -4)) scale(1.06); filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 calc(var(--cell) * .16) var(--dr-glow)); animation: none; }
.dr-cell.last .dr-piece:not(.ghost) { outline: 2px solid rgba(255, 210, 63, .75); outline-offset: 1px; }
@keyframes dr-must { to { filter: drop-shadow(0 0 2px var(--t-gold)) drop-shadow(0 0 calc(var(--cell) * .14) rgba(255, 210, 63, .85)); } }
@media (prefers-reduced-motion: reduce) {
  .dr-cell.must .dr-piece { animation: none; filter: drop-shadow(0 0 2px var(--t-gold)) drop-shadow(0 0 calc(var(--cell) * .12) rgba(255, 210, 63, .8)); }
  .dr-piece { transition: none; }
}
@media (max-width: 420px) { .dr-num { display: none; } }