/* Chess games: the board (public/play/lib/chessboard.js) and the side panel shared by the star hunt, mate in one,
   eight queens and knight's tour. */
.chs-wrap{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:20px;align-items:start;padding:14px}
.chs-side{display:grid;gap:10px;align-content:start}
.chs-say{margin:0;padding:12px 14px;border:3px solid var(--cm-ink,#1b1340);border-radius:16px;background:#ffd23f;font:700 16px/1.4 var(--cm-ui,system-ui);color:#1b1340}
.chs-note{min-height:1.4em;margin:0;font:600 15px/1.45 var(--cm-ui,system-ui);color:#1b1340}
.chs-levels{display:flex;flex-wrap:wrap;gap:6px}
.chs-lv{padding:6px 9px;border:2px solid #1b1340;border-radius:10px;background:#fff;font:600 13px var(--cm-ui,system-ui);cursor:pointer}
.chs-lv[aria-pressed=true]{background:#ffd23f;box-shadow:0 3px 0 #1b1340}
.chs-lv span{margin-left:4px;color:#e0a800;letter-spacing:-1px}

.cb{--n:8;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--n),minmax(0,1fr));width:min(100%,560px);aspect-ratio:1;border:4px solid #1b1340;border-radius:10px;overflow:hidden;box-shadow:6px 6px 0 #1b1340;user-select:none;touch-action:manipulation}
.cb-sq{position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;border:0;padding:0;margin:0;cursor:pointer;font:inherit;line-height:1}
.cb-sq.light{background:#f3e6c8}.cb-sq.dark{background:#b58863}
.cb-sq:focus-visible{outline:3px solid #3ec1ff;outline-offset:-3px;z-index:1}
.cb-rank,.cb-file{position:absolute;font:700 10px/1 var(--cm-ui,system-ui);opacity:.7;pointer-events:none}
.cb-rank{left:3px;top:3px}.cb-file{right:3px;bottom:2px}
.cb-sq.light .cb-rank,.cb-sq.light .cb-file{color:#b58863}.cb-sq.dark .cb-rank,.cb-sq.dark .cb-file{color:#f3e6c8}
.cb-p{font-size:calc(min(560px, 92vw) / var(--n) * .72);line-height:1;pointer-events:none;transition:transform .15s}
.cb-p.w{color:#fff;-webkit-text-stroke:1.5px #1b1340;paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.cb-p.b{color:#1b1340}
.cb-p.star{font-size:calc(min(560px, 92vw) / var(--n) * .5);animation:cb-bob 1.6s ease-in-out infinite}
.cb-p.num{font:700 calc(min(560px, 92vw) / var(--n) * .32) var(--cm-ui,system-ui);color:#1b1340;opacity:.75}
.cb-p.clash{color:#ff5d8f}
@keyframes cb-bob{50%{transform:translateY(-3px) scale(1.06)}}
.cb-sq.sel{box-shadow:inset 0 0 0 4px #ffd23f}
.cb-sq.move::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(27,19,64,.28);pointer-events:none}
.cb-sq.move:has(.cb-p:not(:empty))::after{width:86%;height:86%;background:none;border:4px solid rgba(27,19,64,.35)}
.cb-sq.hint{box-shadow:inset 0 0 0 5px #38d9a9;animation:cb-glow 1s ease-in-out infinite}
@keyframes cb-glow{50%{box-shadow:inset 0 0 0 9px #38d9a9}}
.cb-sq.hit{box-shadow:inset 0 0 0 5px #ff5d8f}
.cb-sq.last{background:#e9d36b!important}
.cb-sq.seen.light{background:#e7d3c4}.cb-sq.seen.dark{background:#9b7356}
.cb-sq.clash{box-shadow:inset 0 0 0 5px #ff5d8f}
@media(max-width:760px){.chs-wrap{grid-template-columns:minmax(0,1fr)}.chs-side{order:2}}
@media(prefers-reduced-motion:reduce){.cb-p.star,.cb-sq.hint{animation:none}}

/* printable diagrams (/chess/checkmate-in-one-puzzles) */
.pd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 22px;margin-top:14px}
.pd-item{margin:0;break-inside:avoid}.pd-item figcaption{margin-bottom:4px;font-size:14px}
.pd{display:grid;grid-template-columns:12px minmax(0,1fr);grid-template-rows:auto 12px;gap:2px}
.pd-ranks{display:grid;grid-template-rows:repeat(8,1fr);font-size:9px;text-align:center;align-items:center}
.pd-files{grid-column:2;display:grid;grid-template-columns:repeat(8,1fr);font-size:9px;text-align:center}
.pd-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:2px solid #111}
.pd-sq{display:grid;place-items:center;aspect-ratio:1}.pd-sq.light{background:#fff}.pd-sq.dark{background:#bbb}
.pd-sq i{font-style:normal;font-size:clamp(14px,3.2vw,30px);line-height:1}.pd-sq i.w{color:#fff;-webkit-text-stroke:1px #000;paint-order:stroke fill}.pd-sq i.b{color:#000}
.pd-line{margin:4px 0 0;font-size:13px}
@media(max-width:640px){.pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{.pd-sq.dark{background:#bbb!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.pd-grid{grid-template-columns:repeat(3,1fr)}}