/* Board diagrams used by the landing page and the manual. Colours come from the piece set (see pieces.js). */
.dg{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1/1;width:100%;border-radius:6px;overflow:hidden;--sq-l:#EEE8DA;--sq-d:#837F74;user-select:none;-webkit-user-select:none}
.dg-sq{position:relative;display:flex;align-items:center;justify-content:center;background:var(--sq-l);min-width:0;min-height:0}
.dg-sq.d{background:var(--sq-d)}
.dg-sq svg.pc{width:90%;height:90%;position:relative;z-index:1;filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.35))}
.dg-sq.hi::before,.dg-sq.from::before{content:"";position:absolute;inset:0;background:rgba(255,205,60,.45);z-index:0}
.dg-sq.from::before{background:rgba(139,30,61,.38);box-shadow:inset 0 0 0 3px rgba(139,30,61,.9)}
.dg-sq.dot::after{content:"";position:absolute;width:28%;height:28%;border-radius:50%;background:rgba(20,20,24,.45);z-index:2}
.dg-sq.cap::after{content:"";position:absolute;width:88%;height:88%;border-radius:50%;border:5px solid rgba(20,20,24,.45);box-sizing:border-box;z-index:2}
.dg-sq.chk::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(220,30,50,.85),rgba(220,30,50,0) 72%);z-index:0}
.dg-co{position:absolute;font:600 .55rem/1 ui-monospace,Menlo,Consolas,monospace;z-index:0;pointer-events:none}
.dg-co.f{right:3px;bottom:2px}.dg-co.r{left:3px;top:2px}
.dg-sq.l .dg-co{color:var(--sq-d)}.dg-sq.d .dg-co{color:var(--sq-l)}
@keyframes dg-settle{from{opacity:0;transform:translateY(-14px) scale(.94)}to{opacity:1;transform:none}}
.dg.settle .dg-sq svg.pc{animation:dg-settle .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0) * 22ms)}
@media (prefers-reduced-motion:reduce){.dg.settle .dg-sq svg.pc{animation:none}}