/* The Checkers board and pieces, shared by games/checkers.html and the profile preview.
   The look comes from CSS variables set by js/shared/checkers-look.js:
   --ck-light, --ck-dark, --piece-black, --piece-white, --pb-rim, --pw-rim, and .k3d (3D pieces).
   The pieces lie flat like real ones, also when the board is turned (css/games/board-game.css). */
.kboard{display:grid;grid-template-columns:repeat(8,1fr);width:100%;max-width:560px;margin:0 auto;aspect-ratio:1;border:6px solid var(--ck-dark,#a0683a);border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.4);touch-action:manipulation;user-select:none;-webkit-user-select:none;container-type:inline-size}
.ksq{position:relative;border:0;padding:0;margin:0;aspect-ratio:1;min-width:0;background:var(--ck-light,#ecd3a5);cursor:default}
.ksq.dk{background:var(--ck-dark,#a0683a);cursor:pointer}
.ksq:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;z-index:2}
.ksq .co{position:absolute;z-index:2;font-size:max(8px,2cqw);font-weight:700;line-height:1;pointer-events:none;color:var(--ck-dark,#a0683a)}
.ksq.dk .co{color:var(--ck-light,#ecd3a5)}
.ksq .co.rk{left:5%;top:4%}
.ksq .co.fl{right:6%;bottom:4%}

/* A piece: a flat disc with a ring pressed into it; a king has a crown on top */
.ksq .pc{position:absolute;inset:11%;border-radius:50%;pointer-events:none;transform:scale(0);transition:transform .12s;display:grid;place-items:center}
.ksq.b .pc,.ksq.w .pc{transform:scale(1)}
.ksq.b .pc{background:var(--piece-black,#1c1c1c);box-shadow:0 0 0 1.5px var(--pb-rim,rgba(255,255,255,.55)),0 3px 0 rgba(0,0,0,.35)}
.ksq.w .pc{background:var(--piece-white,#f2efe6);box-shadow:0 0 0 1.5px var(--pw-rim,rgba(0,0,0,.45)),0 3px 0 rgba(0,0,0,.35)}
.ksq .pc::before{content:'';position:absolute;inset:18%;border-radius:50%;border:2px solid var(--pb-rim,rgba(255,255,255,.55));opacity:.55}
.ksq.w .pc::before{border-color:var(--pw-rim,rgba(0,0,0,.45))}
.ksq.king .pc::after{content:'\265B\FE0E';font-family:'Segoe UI Symbol','DejaVu Sans',serif;font-size:6.2cqw;line-height:1;color:var(--pb-rim,rgba(255,255,255,.75))}
.ksq.w.king .pc::after{color:var(--pw-rim,rgba(0,0,0,.6))}
.ksq.king .pc::before{opacity:0}

/* 3D pieces (reward for a win on Medium): turned wood with an edge; a king is two pieces stacked */
.k3d .ksq.b .pc{background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--piece-black,#1c1c1c),#fff 30%) 0,var(--piece-black,#1c1c1c) 55%,color-mix(in srgb,var(--piece-black,#1c1c1c),#000 40%) 100%);box-shadow:0 0 0 1px var(--pb-rim,rgba(255,255,255,.55)),0 .9cqw 0 color-mix(in srgb,var(--piece-black,#1c1c1c),#000 45%),0 1.4cqw 1.2cqw rgba(0,0,0,.5)}
.k3d .ksq.w .pc{background:radial-gradient(circle at 40% 35%,#fff 0,var(--piece-white,#f2efe6) 50%,color-mix(in srgb,var(--piece-white,#f2efe6),#000 25%) 100%);box-shadow:0 0 0 1px var(--pw-rim,rgba(0,0,0,.45)),0 .9cqw 0 color-mix(in srgb,var(--piece-white,#f2efe6),#000 35%),0 1.4cqw 1.2cqw rgba(0,0,0,.5)}
.k3d .ksq.king.b .pc{box-shadow:0 0 0 1px var(--pb-rim),0 .9cqw 0 color-mix(in srgb,var(--piece-black,#1c1c1c),#000 45%),0 1.3cqw 0 var(--piece-black,#1c1c1c),0 2.1cqw 0 color-mix(in srgb,var(--piece-black,#1c1c1c),#000 45%),0 2.6cqw 1.4cqw rgba(0,0,0,.5);translate:0 -1.2cqw}
.k3d .ksq.king.w .pc{box-shadow:0 0 0 1px var(--pw-rim),0 .9cqw 0 color-mix(in srgb,var(--piece-white,#f2efe6),#000 35%),0 1.3cqw 0 var(--piece-white,#f2efe6),0 2.1cqw 0 color-mix(in srgb,var(--piece-white,#f2efe6),#000 35%),0 2.6cqw 1.4cqw rgba(0,0,0,.5);translate:0 -1.2cqw}

/* The chosen piece, where it can go next (only on the player's turn), what it takes, the last move */
.ksq.sel{background:color-mix(in srgb,var(--green) 50%,var(--ck-dark,#a0683a))}
.ksq.src::before{content:'';position:absolute;inset:4%;border-radius:50%;box-shadow:0 0 0 2px rgba(255,235,59,.75);pointer-events:none;z-index:1}
.kboard.mine .ksq.to::after{content:'';position:absolute;inset:38%;border-radius:50%;background:rgba(255,255,255,.45);box-shadow:0 0 0 2px rgba(0,0,0,.25);pointer-events:none}
.kboard.mine .ksq.end::after{inset:30%;background:rgba(76,175,80,.7)}
.ksq.hit .pc{opacity:.45;outline:3px solid #e53935;outline-offset:-2px}
.ksq.path{box-shadow:inset 0 0 0 3px rgba(229,57,53,.45)}
.ksq.last{box-shadow:inset 0 0 0 3px rgba(229,57,53,.8)}
.ksq.pending .pc{opacity:.6}
/* A taken piece fades while the other piece jumps over it (the page sets --gone-delay) */
.ksq.gone .pc{transform:scale(1);animation:ck-gone calc(var(--move-ms,600ms) * .6) ease var(--gone-delay,0ms) forwards}
@keyframes ck-gone{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}
.ksq.moving{z-index:3}
@media (prefers-reduced-motion:reduce){.ksq .pc{transition:none}}