.ckr{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  width:min(100%,560px);aspect-ratio:1;margin:clamp(10px,2.5vw,20px) auto;
  border:4px solid #3B2414;box-shadow:0 0 0 3px #1B1D33;
}
.ckr .sq{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;margin:0;border:0;background:#EAD9B5}
.ckr .sq.dark{background:#7A4E2D;cursor:pointer}
.ckr .sq.dark[aria-disabled="true"]{cursor:default}
.ckr .sq:focus-visible{outline:3px solid #F6C333;outline-offset:-3px;z-index:2}
.ckr .sq.last{background:#8C5D36}
.ckr .sq.sel{background:#A8743F;box-shadow:inset 0 0 0 4px #F6C333}
.ckr .sq.must{box-shadow:inset 0 0 0 3px #FF6F59}
.ckr .sq.can::after{content:"";position:absolute;width:26%;height:26%;background:#F6C333;box-shadow:0 0 0 3px #1B1D33}
.ckr .pc{width:84%;height:84%;display:block}
.ckr .pc svg{width:100%;height:100%}