.board{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:8px;overflow:hidden}.board .light{fill:var(--square-light)}.board .dark{fill:var(--square-dark)}.board .latest,.board .played{fill:var(--arrow);opacity:.42}.board .mate{fill:var(--brick);opacity:.85}.board .selection{fill:var(--olive);opacity:.35}.board .target{fill:var(--olive);opacity:.55}.board .target-capture{fill:none;stroke:var(--olive);stroke-width:.08;opacity:.6}.board .coordinate{font:600 .2px var(--sans);font-size:.2px;pointer-events:none}.board .on-light{fill:var(--square-dark)}.board .on-dark{fill:var(--square-light)}.no-coordinates .board .coordinate{display:none}.board .arrow{pointer-events:none;opacity:.92}.board .arrow line{stroke:var(--arrow);stroke-width:.16;stroke-linecap:round}.board .arrow polygon{fill:var(--arrow)}span.figurine{font-size:1.22em;line-height:0;position:relative;top:-.08em}.board-input{position:relative;touch-action:none;user-select:none;-webkit-user-select:none}.board-input .board{cursor:pointer}.board-input .drag-piece{position:absolute;z-index:3;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}.board-input .promotion{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:.6rem;background:color-mix(in srgb,var(--ground) 70%,transparent);border-radius:8px}.board-input .promotion button{width:22%;aspect-ratio:1;padding:.3rem;border:2px solid var(--line-strong);border-radius:10px;background:var(--square-light);cursor:pointer}.board-input .promotion button:hover,.board-input .promotion button:focus-visible{border-color:var(--olive)}.board-input .promotion img{display:block;width:100%;height:100%}