/* Chess board and chess-only panels. Layout and panels come from common/dojo.css. */
.cboardbox { position: relative; width: 100%; max-width: 580px; margin-inline: auto; }
/* minmax(0, 1fr): rows and columns never grow to fit content, so the board stays square */
.cboard { position: relative; width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--rule-2); touch-action: manipulation; overflow: hidden; }
.dojo .cboard .sq { position: relative; display: block; border: 0; padding: 0; border-radius: 0; background: #e9eef2; cursor: pointer; box-shadow: none; transform: none; min-width: 0; min-height: 0; overflow: hidden; }
.dojo .cboard .sq.d { background: #8fa6b8; }
.dojo .cboard .sq:hover { background: #e9eef2; }
.dojo .cboard .sq.d:hover { background: #8fa6b8; }
.cboard .co { position: absolute; font-family: var(--mono); font-size: 9px; line-height: 1; color: #0f1419; opacity: .6; pointer-events: none; z-index: 2; }
.cboard .co.f { right: 3px; bottom: 3px; }
.cboard .co.r { left: 3px; top: 3px; }
.cboard .co::before { content: attr(data-g); }
/* pieces: Cburnett SVG set (static/pieces, BSD) */
.pc { position: absolute; inset: 4%; z-index: 2; pointer-events: none; background: no-repeat center / contain; }
.pc.wK { background-image: url(/pieces/wK.svg); } .pc.wQ { background-image: url(/pieces/wQ.svg); } .pc.wR { background-image: url(/pieces/wR.svg); }
.pc.wB { background-image: url(/pieces/wB.svg); } .pc.wN { background-image: url(/pieces/wN.svg); } .pc.wP { background-image: url(/pieces/wP.svg); }
.pc.bK { background-image: url(/pieces/bK.svg); } .pc.bQ { background-image: url(/pieces/bQ.svg); } .pc.bR { background-image: url(/pieces/bR.svg); }
.pc.bB { background-image: url(/pieces/bB.svg); } .pc.bN { background-image: url(/pieces/bN.svg); } .pc.bP { background-image: url(/pieces/bP.svg); }
.cboard .sq.last::after { content: ""; position: absolute; inset: 0; background: rgba(255, 224, 61, .55); z-index: 1; }
.cboard .sq.sel::after { content: ""; position: absolute; inset: 0; background: rgba(255, 224, 61, .85); z-index: 1; }
.cboard .sq.chk::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 4px #c0182b; background: rgba(192, 24, 43, .18); }
.cboard .dot { position: absolute; z-index: 3; width: 24%; height: 24%; border-radius: 50%; background: rgba(15, 20, 25, .35); left: 38%; top: 38%; margin: 0; }
.cboard .ring { position: absolute; z-index: 3; inset: 6%; border-radius: 50%; border: 4px solid rgba(15, 20, 25, .35); }
.cboard .warnring { position: absolute; inset: 3%; border: 3px dashed #c0182b; z-index: 3; }
#arrows { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); z-index: 4; pointer-events: none; }
.cboardbox .thinking { top: 14px; }
.promo { position: absolute; z-index: 8; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 20, 25, .5); }
.promo > div { background: var(--surface); border: 2px solid var(--ink); padding: 12px; display: flex; flex-direction: column; gap: 8px; max-width: 92%; }
.promo .prow { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.promo .ptitle { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.dojo .promopc { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; padding: 6px 8px; min-width: 64px; }
.promopc .pc { position: relative; inset: auto; display: block; width: 44px; height: 44px; }
.evalbar.chess { background: #fbfcfd; }
.moves { max-height: 240px; overflow-y: auto; font-family: var(--mono); font-size: 12.5px; display: grid; grid-template-columns: 38px 1fr 1fr; padding-top: 8px; font-variant-numeric: tabular-nums; }
.moves > span { padding: 3px 4px; border-bottom: 1px solid var(--rule); }
.moves .n { color: var(--muted); }
.moves .m { display: flex; align-items: center; gap: 6px; }
.moves .m i { width: 7px; height: 7px; flex: none; background: var(--g, transparent); }
.fen { font-family: var(--mono); font-size: 10px; color: var(--muted); word-break: break-all; margin-top: 10px; }
.pvlist { margin-top: 6px; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.pvrow { display: grid; grid-template-columns: 4.2em 1fr; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--ink-2); padding: 5px 0; border-bottom: 1px solid var(--rule); }
.pvrow .who { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.pvrow b { font-family: var(--mono); color: var(--ink); }
.gl { color: var(--muted); font-size: 12px; }
.cboardbox .arrows { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); z-index: 4; pointer-events: none; }

/* static boards in the chess guides (scripts/site/cboard.mjs): no buttons, rings for the two moves */
.cboard.cstatic { box-shadow: 4px 4px 0 var(--rule-2); }
.cstatic .sq { position: relative; display: block; background: #e9eef2; min-width: 0; min-height: 0; overflow: hidden; }
.cstatic .sq.d { background: #8fa6b8; }
.cmk { position: absolute; inset: 6%; z-index: 3; border-radius: 50%; border: 5px solid; box-shadow: 0 0 0 1.5px #0f1419, inset 0 0 0 1.5px #0f1419; }
.cmk.best { border-color: #1f5fa8; }
.cmk.tempt { border-color: #ffe03d; border-style: dashed; }
.cex figcaption b { color: var(--ink); }
.cex .san { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink); }
.ckey { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 50%; border: 3px solid; box-shadow: 0 0 0 1px #0f1419; }
.ckey.best { border-color: #1f5fa8; }
.ckey.tempt { border-color: #ffe03d; border-style: dashed; }