/* The Backgammon board and checkers, shared by games/backgammon.html and the profile preview.
   The look comes from CSS variables set by js/shared/backgammon-look.js:
   --bgm-frame, --bgm-field, --bgm-pa, --bgm-pb (the two point colours), --ck-black, --ck-white, and .d3d (3D checkers).
   The board (js/shared/backgammon-look.js, buildBoard) is a grid of 15 units (--w) across: six points, the bar,
   six points and the tray for borne-off checkers, with a frame of .4 units; two halves of five units high and
   a gap between them. Checkers are .ck inside a point (--k = place in the stack, --st = how close they stand). */
.bgboard{container-type:inline-size;width:100%;max-width:640px;margin:0 auto;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.bgb{--w:calc(100cqw / 15);position:relative;display:grid;box-sizing:border-box;width:100%;
  grid-template-columns:repeat(6,var(--w)) var(--w) repeat(6,var(--w)) calc(var(--w) * 1.2);
  grid-template-rows:calc(var(--w) * 5) calc(var(--w) * .9) calc(var(--w) * 5);
  padding:calc(var(--w) * .4);background:var(--bgm-frame,#5b3a1e);border-radius:calc(var(--w) * .3);
  box-shadow:0 6px 20px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
.bgb .half{background:var(--bgm-field,#e6cf9f);border-radius:2px;box-shadow:inset 0 0 calc(var(--w) * .35) rgba(0,0,0,.35)}
.bgb button{position:relative;border:0;padding:0;margin:0;background:none;min-width:0;font:inherit;color:inherit;cursor:default;-webkit-tap-highlight-color:transparent}
.bgb button:focus-visible{outline:3px solid var(--blue,#58a6ff);outline-offset:-3px;z-index:3}

/* Points: long triangles in two colours, pointing to the middle */
.pt::before{content:'';position:absolute;inset:0 5%;background:var(--bgm-pa,#a3362a);clip-path:polygon(0 0,100% 0,50% 90%)}
.pt.bot::before{clip-path:polygon(50% 10%,100% 100%,0 100%)}
.pt.pb::before{background:var(--bgm-pb,#f7eed6)}
.pt .pn{position:absolute;left:0;right:0;text-align:center;font-size:calc(var(--w) * .27);line-height:1;font-weight:700;color:rgba(255,255,255,.55);pointer-events:none}
.pt.top .pn{top:calc(var(--w) * -.34)}
.pt.bot .pn{bottom:calc(var(--w) * -.34)}

/* Checkers */
.ck{--c:var(--ck-black,#1f1f22);position:absolute;z-index:1;left:4%;width:92%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  top:calc(var(--k) * var(--st,1) * var(--w) * .92);
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--c),#fff 12%) 0 34%,color-mix(in srgb,var(--c),#000 12%) 37% 42%,var(--c) 45% 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.55),inset 0 0 0 1px color-mix(in srgb,var(--c),#000 35%)}
.ck.cw{--c:var(--ck-white,#f3efe6)}
.pt.bot .ck,.bar.them .ck{top:auto;bottom:calc(var(--k) * var(--st,1) * var(--w) * .92)}
.ck[data-n]::after{content:attr(data-n);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--w) * .42);font-weight:800;color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}

/* The bar (checkers that were hit wait here) and the trays for borne-off checkers */
.bar,.bar-mid{background:color-mix(in srgb,var(--bgm-frame,#5b3a1e),#000 18%)!important;box-shadow:inset 0 0 calc(var(--w) * .2) rgba(0,0,0,.5)}
.bar.them .ck{bottom:calc(var(--w) * .2 + var(--k) * var(--st,1) * var(--w) * .92)}
.bar.me .ck{top:calc(var(--w) * .2 + var(--k) * var(--st,1) * var(--w) * .92)}
.off{margin-left:calc(var(--w) * .18)!important;background:rgba(0,0,0,.28)!important;border-radius:calc(var(--w) * .1)!important}
.slab{--c:var(--ck-black,#1f1f22);position:absolute;left:9%;width:82%;height:calc(var(--w) * .27);border-radius:calc(var(--w) * .06);pointer-events:none;
  background:linear-gradient(var(--c),color-mix(in srgb,var(--c),#000 25%));box-shadow:0 1px 1px rgba(0,0,0,.5)}
.slab.cw{--c:var(--ck-white,#f3efe6)}
.off.them .slab{top:calc(var(--w) * .1 + var(--k) * var(--w) * .31)}
.off.me .slab{bottom:calc(var(--w) * .1 + var(--k) * var(--w) * .31)}

/* 3D checkers (reward for a win on Medium): thick, with a rim and a shadow */
.d3d .ck{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c),#fff 22%) 0 26%,var(--c) 30% 62%,color-mix(in srgb,var(--c),#000 18%) 66% 100%);
  box-shadow:0 calc(var(--w) * .06) 0 color-mix(in srgb,var(--c),#000 45%),0 calc(var(--w) * .1) calc(var(--w) * .14) rgba(0,0,0,.55),
             inset 0 calc(var(--w) * -.03) calc(var(--w) * .05) rgba(0,0,0,.35),inset 0 calc(var(--w) * .03) calc(var(--w) * .05) rgba(255,255,255,.35)}
.d3d .ck::before{content:'';position:absolute;inset:20%;border-radius:50%;border:calc(var(--w) * .035) solid color-mix(in srgb,var(--c),#000 30%);
  box-shadow:0 1px 0 rgba(255,255,255,.25)}
.d3d .slab{height:calc(var(--w) * .27);background:linear-gradient(color-mix(in srgb,var(--c),#fff 20%),var(--c) 40%,color-mix(in srgb,var(--c),#000 35%))}

/* Playing: where a checker can go from (.src), the chosen one (.sel), where it can go (.to), the last turn (.was) */
.bgboard.mine .src,.bgboard.mine .to{cursor:pointer}
.bgboard.mine .src .ck:last-of-type{box-shadow:0 0 0 2px #fff,0 0 0 calc(var(--w) * .1) var(--green,#3fb950)}
.bgboard.mine .sel .ck:last-of-type{translate:0 calc(var(--w) * -.12);box-shadow:0 0 0 2px #fff,0 0 0 calc(var(--w) * .13) var(--accent,#f0a500),0 6px 8px rgba(0,0,0,.5)}
.bgboard.mine .pt.bot.sel .ck:last-of-type,.bgboard.mine .bar.me.sel .ck:last-of-type{translate:0 calc(var(--w) * .12)}
.bgboard.mine .to::after{content:'';position:absolute;z-index:2;left:24%;right:24%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,var(--green,#3fb950) 70%,transparent);box-shadow:0 0 0 2px #fff;animation:bgm-pulse 1s ease-in-out infinite alternate}
.bgboard.mine .pt.top.to::after{top:calc(var(--w) * .2 + var(--n,0) * var(--w) * .92 * var(--st,1))}
.bgboard.mine .pt.bot.to::after{bottom:calc(var(--w) * .2 + var(--n,0) * var(--w) * .92 * var(--st,1))}
.bgboard.mine .off.to::after{bottom:calc(var(--w) * .3);left:18%;right:18%}
@keyframes bgm-pulse{from{opacity:.55;scale:.85}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){.bgboard.mine .to::after{animation:none}}
.pt.was::before{filter:brightness(1.12) saturate(1.2)}
.pt.top.was{box-shadow:inset 0 calc(var(--w) * .07) 0 var(--accent,#f0a500)}
.pt.bot.was{box-shadow:inset 0 calc(var(--w) * -.07) 0 var(--accent,#f0a500)}
.ck.flying{z-index:6}