/* Chessboard */
.cb { position: relative; width: 100%; aspect-ratio: 1; user-select: none; -webkit-user-select: none; touch-action: none; outline: none; box-shadow: 0 0 0 1px var(--board-frame), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.cb:focus-visible { box-shadow: 0 0 0 1px var(--focus), 0 30px 60px -30px rgba(0, 0, 0, .7); }
.cb-squares { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.sq { position: relative; }
.sq.l { background: var(--sq-light); }
.sq.d { background: var(--sq-dark); }
.sq.last::before, .sq.sel::before { content: ''; position: absolute; inset: 0; background: var(--sq-last); }
.sq.sel::before { background: var(--sq-sel); }
.sq.tgt::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--sq-dot); }
.sq.tgt.cap::after { width: 86%; height: 86%; background: none; border: 3px solid var(--sq-dot); }
.sq.chk { box-shadow: inset 0 0 0 3px var(--sq-check); }
.sq.cur { box-shadow: inset 0 0 0 2px var(--focus); }
.sq[data-mark="hit"]::before { content: ''; position: absolute; inset: 0; background: rgba(184, 150, 90, .55); }
.sq[data-mark="miss"]::before { content: ''; position: absolute; inset: 0; background: rgba(164, 87, 74, .5); }
.sq[data-mark="ask"]::before { content: ''; position: absolute; inset: 18%; border: 2px solid var(--bg); outline: 2px solid var(--accent); }
.sq[data-mark="soft"]::before { content: ''; position: absolute; inset: 0; background: rgba(184, 150, 90, .22); }
.co { position: absolute; font: 600 clamp(8px, 1.1vw, 11px)/1 var(--sans); letter-spacing: .02em; pointer-events: none; opacity: .9; }
.sq.l .co { color: var(--sq-coord-light); }
.sq.d .co { color: var(--sq-coord-dark); }
.co.rk { left: 4%; top: 5%; }
.co.fl { right: 5%; bottom: 4%; }
.cb.nocoords .co { display: none; }
.cb-pieces { position: absolute; inset: 0; pointer-events: none; }
.pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; transition: transform 190ms var(--ease), opacity 220ms ease; will-change: transform; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.cb-pieces.instant .pc { transition: opacity 220ms ease; }
.pc.drag { transition: none; z-index: 5; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.cb.blind .pc { opacity: 0 !important; transition: opacity 420ms ease; }
.cb.blind .sq.last::before { background: none; }
.cb-arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cb-promo { position: absolute; inset: 0; background: rgba(12, 12, 11, .55); z-index: 10; }
.cb-promo button { position: absolute; width: 12.5%; height: 12.5%; border: 0; padding: 0; background: var(--sq-light); cursor: pointer; }
.cb-promo button:hover, .cb-promo button:focus-visible { background: var(--accent-ink); outline: none; }
.cb-promo img { width: 100%; height: 100%; }
.cb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mini { position: relative; width: 100%; aspect-ratio: 1; box-shadow: 0 0 0 1px var(--board-frame); }
.mini-sq { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); }
.mini-sq i.l { background: var(--sq-light); } .mini-sq i.d { background: var(--sq-dark); }
.mini-sq i.h { box-shadow: inset 0 0 0 999px var(--sq-last); }
.mini img { position: absolute; width: 12.5%; height: 12.5%; }