:root{--board-size:min(90vh, 94vw);--square:calc(var(--board-size) / 8);--light:#e8d3a1;--dark:#8a5a2b;--frame:#4a3418;--selected:#f5d442;--target:#4ade80d9;--path:#f5d44280}body{box-sizing:border-box;color:#eee;background:#232323;justify-content:flex-start;align-items:center;min-height:100vh;margin:0;padding:2vh 2rem;font-family:system-ui,-apple-system,sans-serif;display:flex}.game{justify-content:flex-start;display:flex}.page-bg{object-fit:cover;z-index:-1;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.panel{z-index:10;background:#141414d1;border-radius:8px;flex-direction:column;align-items:flex-end;gap:.5rem;max-width:min(16rem,60vw);padding:.6rem .8rem;display:flex;position:fixed;top:1rem;right:1rem}.status{text-align:right;min-height:1.3em;margin:0;font-size:1rem}.controls{flex-direction:column;align-items:stretch;gap:.5rem;display:flex}.confirm{align-items:center;gap:.75rem;display:flex}.hidden{display:none}.controls button,.confirm button{color:#eee;cursor:pointer;background:#3a3a3a;border:1px solid #666;border-radius:6px;padding:.5rem 1rem;font-size:1rem}.controls button:hover:not(:disabled),.confirm button:hover:not(:disabled){background:#4a4a4a}.controls button:disabled{opacity:.4;cursor:default}.confirm .btn-confirm-yes{background:#7a2b2b;border-color:#a33}.offer-msg{text-align:right;overflow-wrap:break-word;color:#cdd;min-height:1.2em;margin:0;font-size:.95rem}.board{grid-template-columns:repeat(8, var(--square));grid-template-rows:repeat(8, var(--square));width:var(--board-size);height:var(--board-size);border:6px solid var(--frame);box-sizing:content-box;display:grid}.square{justify-content:center;align-items:center;display:flex;position:relative}.square.light{background:var(--light)}.square.dark{background:var(--dark);cursor:pointer}.square.selected{outline:4px solid var(--selected);outline-offset:-4px}.square.path{background:var(--path)}.square.target:after{content:"";background:var(--target);pointer-events:none;border-radius:50%;width:34%;height:34%;position:absolute}.piece{box-sizing:border-box;pointer-events:none;border-radius:50%;justify-content:center;align-items:center;width:72%;height:72%;display:flex}.piece.moving{z-index:5;position:relative}.piece.black{background:radial-gradient(circle at 35% 30%,#555,#111);border:2px solid #000}.piece.white{background:radial-gradient(circle at 35% 30%,#fff,#c4c4c4);border:2px solid #8a8a8a}.piece.king:before{content:"♛";font-size:calc(var(--square) * .42);line-height:1}.piece.black.king:before{color:#e8c34a}.piece.white.king:before{color:#7a5a10}