.draughts-board-frame{--draughts-cells:8;--draughts-light:#e9dab8;--draughts-dark:#476d58;--draughts-last-to:color-mix(in oklab, var(--draughts-dark), #e9c55a 40%);--draughts-last-from:color-mix(in oklab, var(--draughts-dark), #e9c55a 20%);--draughts-number:#f0f6ec6b;--draughts-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--draughts-grain-opacity:.14;background:linear-gradient(0deg,#10090480 0 3px,#0000 3px),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .16' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .05 0 0 0 0 .02 1.1 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E") 0 0/100% 100%,linear-gradient(160deg,#6a4931,#3f2c1f 55%,#553a28);border:1px solid #1c110ae6;border-radius:14px;width:100%;max-width:920px;padding:clamp(9px,1.3vw,15px);position:relative;overflow:hidden;box-shadow:inset 0 1px #ffe2b63d,inset 0 -4px 3px -1px #0000004d}.draughts-board-frame[data-variant=international]{--draughts-cells:10;--draughts-light:#e7cfa2;--draughts-dark:#8d5d3b;--draughts-last-to:color-mix(in oklab, var(--draughts-dark), #f0c35a 42%);--draughts-last-from:color-mix(in oklab, var(--draughts-dark), #f0c35a 21%);--draughts-number:#ffeed67a;--draughts-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .19' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .16 0 0 0 0 .07 1.25 0 0 0 -.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");--draughts-grain-opacity:.42}@media (width<=600px){.draughts-board-frame{border-radius:10px;padding:7px}}.draughts-board{z-index:1;aspect-ratio:1;background:var(--draughts-light);border:2px solid #1e150e;border-radius:3px;grid-auto-rows:1fr;width:100%;display:grid;position:relative;overflow:hidden;box-shadow:0 0 0 1px #e9c7844d;container-type:inline-size}.draughts-board:before,.draughts-board:after{content:"";z-index:1;pointer-events:none;position:absolute;inset:0}.draughts-board:before{background:var(--draughts-grain) 0 0 / 100% 100%;opacity:var(--draughts-grain-opacity);mix-blend-mode:multiply}.draughts-board:after{background:radial-gradient(120% 110% at 50% 42%,#fffaeb1a,#0000 52%,#120c0633 100%)}.draughts-square{cursor:default;background:0 0;border:0;place-items:center;min-width:0;min-height:0;padding:0;display:grid;position:relative}.draughts-square.light{background:var(--draughts-light)}.draughts-square.dark{background:var(--draughts-dark)}.draughts-square.dark.last-from,.draughts-square.dark.last-via{background:var(--draughts-last-from)}.draughts-square.dark.last-to{background:var(--draughts-last-to)}.draughts-square.source:not(:disabled),.draughts-square.target:not(:disabled){cursor:pointer}.draughts-square-number{z-index:2;color:var(--draughts-number);font-family:var(--font-app-mono), monospace;pointer-events:none;font-size:clamp(7px,1.05vw,11px);font-weight:400;line-height:1;position:absolute;top:4%;left:6%}.draughts-board-frame[data-variant=english] .draughts-square-number{font-size:clamp(7px,1.2vw,12px)}.draughts-target{z-index:4;aspect-ratio:1;width:24%;font-size:calc(100cqi / var(--draughts-cells));background:#faeec8d9;border-radius:50%;transition:transform .14s;position:relative;box-shadow:0 0 0 .06em #faeec82e,0 1px 3px #00000038}.draughts-square.target:not(:disabled):hover .draughts-target{transform:scale(1.25)}.draughts-piece{--draughts-side:0 .034em 0 var(--piece-side);--draughts-stack:var(--draughts-side);--draughts-drop:0 .05em .05em #0000004d, 0 .09em .13em #00000024;z-index:3;aspect-ratio:1;width:76%;font-size:calc(100cqi / var(--draughts-cells,8));-webkit-user-select:none;user-select:none;background:radial-gradient(ellipse 38% 24% at 50% 24%, rgba(255, 255, 255, var(--piece-sheen)), transparent 100%), radial-gradient(circle at 50% 40%, var(--piece-hi) 0, var(--piece-top) 48%, var(--piece-lo) 100%);box-shadow:inset 0 .016em 0 var(--piece-lip-hi), inset 0 -.022em .008em var(--piece-lip-lo), var(--draughts-stack), var(--draughts-drop);will-change:var(--piece-layer,auto);border-radius:50%;position:absolute;transform:translateY(-.017em)}.draughts-piece:before{content:"";pointer-events:none;box-shadow:inset 0 .012em .004em var(--piece-groove-dark), 0 .012em .004em var(--piece-groove-light);border-radius:50%;position:absolute;inset:15%}.draughts-piece.red{--piece-hi:#cf5546;--piece-top:#b7382d;--piece-lo:#9c2b23;--piece-lip-hi:#ffcdba80;--piece-lip-lo:#40080480;--piece-side:#6c1b15;--piece-seam:#1e040280;--piece-groove-dark:#480a058c;--piece-groove-light:#ffc0aa52;--piece-sheen:.13;--crown-hi:#f8dc86;--crown-lo:#e0b24c}.draughts-piece.white{--piece-hi:#fcf8ee;--piece-top:#efe6d1;--piece-lo:#dccdae;--piece-lip-hi:#fffffff2;--piece-lip-lo:#7a623c61;--piece-side:#b5a17b;--piece-seam:#5a46288c;--piece-groove-dark:#765c3461;--piece-groove-light:#ffffffbf;--piece-sheen:.3;--crown-hi:#c39a48;--crown-lo:#9c7428}.draughts-piece.black{--piece-hi:#47423c;--piece-top:#2d2a26;--piece-lo:#1e1c1a;--piece-lip-hi:#ffffff2b;--piece-lip-lo:#0000008c;--piece-side:#0d0c0b;--piece-seam:#ffffff29;--piece-groove-dark:#0009;--piece-groove-light:#ffffff1c;--piece-sheen:.07;--crown-hi:#e3bf68;--crown-lo:#c49a42}.draughts-piece.king{--draughts-stack:0 .033em 0 var(--piece-side), 0 .041em 0 var(--piece-seam), 0 .074em 0 var(--piece-side);--draughts-drop:0 .09em .05em #0000004d, 0 .13em .14em #00000024;transform:translateY(-.037em)}.draughts-piece.king:after{content:"";pointer-events:none;background:linear-gradient(var(--crown-hi), var(--crown-lo));position:absolute;inset:23% 23% 25%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3.2 6.2 7.6 10 12 3.2 16.4 10l4.4-3.8-1.7 9.3H4.9Z'/%3E%3Crect x='4.9' y='16.4' width='14.2' height='2.4' rx='.8'/%3E%3Ccircle cx='3.2' cy='5.4' r='1.5'/%3E%3Ccircle cx='12' cy='2.3' r='1.5'/%3E%3Ccircle cx='20.8' cy='5.4' r='1.5'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M3.2 6.2 7.6 10 12 3.2 16.4 10l4.4-3.8-1.7 9.3H4.9Z'/%3E%3Crect x='4.9' y='16.4' width='14.2' height='2.4' rx='.8'/%3E%3Ccircle cx='3.2' cy='5.4' r='1.5'/%3E%3Ccircle cx='12' cy='2.3' r='1.5'/%3E%3Ccircle cx='20.8' cy='5.4' r='1.5'/%3E%3C/svg%3E") 50%/contain no-repeat}.draughts-piece.is-crowning:after{animation:.26s cubic-bezier(.2,.8,.2,1) draughts-crown-drop}@keyframes draughts-crown-drop{0%{opacity:0;transform:translateY(-60%)scale(1.15)}60%{opacity:1}}@media (prefers-reduced-motion:reduce){.draughts-piece.is-crowning:after{animation:none}}.draughts-square.selected .draughts-piece{--draughts-drop:0 .17em .15em #00000038, 0 .26em .3em #0000001f;transform:translateY(-.075em)scale(1.08)}.draughts-square.selected .draughts-piece.king{transform:translateY(-.095em)scale(1.08)}@media (hover:hover){.draughts-square.source:not(:disabled):not(.selected):hover .draughts-piece{transform:translateY(-.03em)scale(1.025)}}.draughts-mini-piece{vertical-align:middle;background:radial-gradient(circle at 50% 40%, var(--piece-hi) 0, var(--piece-top) 48%, var(--piece-lo) 100%);width:16px;height:16px;box-shadow:inset 0 1px 0 var(--piece-lip-hi), 0 1px 0 var(--piece-side), 0 1px 2px #00000040;border-radius:50%;flex:0 0 16px;display:inline-block;position:relative}.draughts-mini-piece.red{--piece-hi:#cf5546;--piece-top:#b7382d;--piece-lo:#9c2b23;--piece-lip-hi:#ffcdba80;--piece-side:#6c1b15}.draughts-mini-piece.white{--piece-hi:#fcf8ee;--piece-top:#efe6d1;--piece-lo:#d6c6a4;--piece-lip-hi:#fffffff2;--piece-side:#a9946c}.draughts-mini-piece.black{--piece-hi:#47423c;--piece-top:#2d2a26;--piece-lo:#1e1c1a;--piece-lip-hi:#ffffff2b;--piece-side:#0d0c0b}