.board-area,.board-host{--sq-light:#f0d9b5;--sq-dark:#b58863;--sq-light-sel:#e8d888;--sq-dark-sel:#c8a94e;--mark-last:#e9c85c;--mark-check:var(--warn,#e37400);--piece-white:#fff;--piece-white-edge:#000;--piece-black:#000;--piece-black-edge:#000;--board-accent:var(--ch-accent,var(--accent,#6750a4));place-items:center;min-height:0;display:grid;container-type:size}.board{border-radius:var(--radius,6px);width:min(100cqw,100cqh);height:min(100cqw,100cqh);box-shadow:var(--shadow,0 8px 24px -12px #0000004d);touch-action:none;-webkit-user-select:none;user-select:none;outline:none;position:relative}.board:focus-visible{box-shadow:var(--shadow,0 8px 24px -12px #0000004d), 0 0 0 3px var(--board-accent)}.board .grid{border-radius:inherit;grid-template:repeat(8,1fr)/repeat(8,1fr);width:100%;height:100%;display:grid;overflow:hidden}.cell{place-items:center;display:grid;position:relative}.cell.light{background:var(--sq-light)}.cell.dark{background:var(--sq-dark)}.cell .coord{color:#0000005c;pointer-events:none;font-size:clamp(8px,1.5cqw,12px);font-weight:600;line-height:1;position:absolute}.cell .coord.rank{inset:2px auto auto 3px}.cell .coord.file{inset:auto 3px 2px auto}.cell.dark .coord{color:#ffffff85}.cell.last:before{content:"";background:var(--mark-last);opacity:.42;position:absolute;inset:0}.cell.sel{background:var(--sq-light-sel)}.cell.sel.dark{background:var(--sq-dark-sel)}.cell .hint{pointer-events:none;position:absolute}.cell.target .hint{background:#1e181047;border-radius:50%;width:30%;height:30%}.cell.capture-target .hint{border:max(3px,1.2cqw) solid #1e181042;border-radius:50%;inset:6%}.check-flash{z-index:6;pointer-events:none;letter-spacing:.12em;color:var(--mark-check);text-shadow:0 2px 10px #00000073,0 0 2px #0009;place-items:center;padding-left:.12em;font-size:min(12cqw,12cqh);font-weight:900;animation:1s ease-out forwards check-flash;display:grid;position:absolute;inset:0}@keyframes check-flash{0%{opacity:0;scale:.7}18%{opacity:1;scale:1.04}62%{opacity:1;scale:1}to{opacity:0;scale:1.16}}.cell.cursor{outline:3px solid var(--board-accent);outline-offset:-3px;z-index:1}.board .pieces{pointer-events:none;position:absolute;inset:0}.piece{width:12.5%;height:12.5%;translate:calc(var(--x,0) * 100%) calc(var(--y,0) * 100%);will-change:translate;transition:translate .17s cubic-bezier(.2,.9,.25,1),opacity .14s linear;position:absolute}.piece.instant{transition:none}.piece.dragging{z-index:3;cursor:grabbing;filter:drop-shadow(0 6px 10px #00000059);transition:none;scale:1.08}.piece.captured{opacity:0;scale:.7}.piece .glyph{stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 1px #00000047);width:100%;height:100%;padding:9%;display:block}:is(.piece,.cap,.trophy).w .glyph{fill:var(--piece-white);stroke:var(--piece-white-edge);stroke-width:2.2px}:is(.piece,.cap,.trophy).b .glyph{fill:var(--piece-black);stroke:var(--piece-black-edge);stroke-width:1.8px}:is(.piece,.cap,.trophy).w .glyph .notch{fill:var(--piece-white-edge);stroke:none}:is(.piece,.cap,.trophy).b .glyph .notch{fill:var(--piece-white);stroke:none}.board.locked .pieces .piece{cursor:default}.board:not(.locked) .pieces .piece{cursor:grab}.piece.shake .glyph{animation:.46s ease-in-out king-shake}@keyframes king-shake{0%,to{translate:0;rotate:0deg}12%{translate:-8%;rotate:-6deg}28%{translate:7%;rotate:5deg}44%{translate:-6%;rotate:-4deg}60%{translate:4%;rotate:3deg}80%{translate:-2%;rotate:-1.5deg}}.promo-backdrop{z-index:4;background:#14101c73;position:absolute;inset:0}.promo{z-index:5;width:12.5%;left:calc(var(--x) * 12.5%);top:calc(var(--y) * 12.5%);border-radius:var(--radius,6px);background:var(--panel,#fff);box-shadow:var(--shadow,0 8px 24px -12px #0000004d);display:grid;position:absolute;overflow:hidden}.promo button{aspect-ratio:1;cursor:pointer;background:0 0;border:0;width:100%;height:auto;padding:0;transition:background .12s;position:static;translate:none}.promo button:hover,.promo button:focus-visible{background:var(--ch-accent-soft,var(--accent-soft,#efe9fe));outline:none}@media (prefers-reduced-motion:reduce){.piece{transition:none}.piece.captured{opacity:0}.piece.shake .glyph{animation:none}.check-flash{opacity:1;animation:none}}