:root{--square-size-units: 3.5;--square-size: calc(var(--square-size-units) * 1vh);--board-size: 8}.app{height:100vh;width:100vw;overflow:hidden}.undo{margin-top:1em}.app-wrapper{height:100vh;width:100vw;max-width:600px;margin:auto;display:grid;grid-template-rows:auto 1fr;gap:16px 0;justify-items:center}.header{text-align:center;margin:0}.options{display:grid;place-items:center;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}.game{width:100%;display:grid;grid-template-rows:1fr 1fr;touch-action:none;place-items:center;align-items:stretch;gap:2vh 0}.board-wrapper{display:grid;place-items:center;width:100%}.board{aspect-ratio:1;height:100%;width:auto;height:calc(8 * var(--square-size));display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);outline:2px grey solid;touch-action:none}@keyframes blink{0%{opacity:1}50%{opacity:.25}to{opacity:1}}.board .square{outline:1px grey solid}.square.transition{transition:all .2s}.square{--color: hsla(var(--hue, 0) var(--sat, 100%) var(--lig, 40%) / var(--opa, 1));color:var(--color);background-color:var(--color);border:.8vh var(--color) solid;border-color:hsla(var(--hue) 100% var(--lig, 65%) / var(--opa, 1)) hsla(var(--hue) 100% var(--lig, 25%) / var(--opa, 1)) hsla(var(--hue) 100% var(--lig, 25%) / var(--opa, 1)) hsla(var(--hue) 100% var(--lig, 65%) / var(--opa, 1))}.user-pieces{width:100%;display:grid;grid-template-columns:repeat(3,auto);gap:2vh 1vh;flex-direction:row;place-items:center}.piece{height:100%;width:100%}.piece-grid{width:min-content;margin:auto;display:grid;place-items:center;place-content:center}.piece-grid.selected{position:absolute;top:0;left:0;transform:translate(var(--xt),var(--yt)) scale(1);pointer-events:none;touch-action:none}.piece-grid .square{height:var(--square-size);width:var(--square-size);border-width:calc(var(--square-size) / 5)}*{box-sizing:border-box}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0}h1{font-size:3.2em;line-height:1.1;margin-block:8px}button,.button{line-height:100%;display:inline-block;border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;transition:border-color .25s}button:not(:disabled){cursor:pointer}button:not(:disabled):hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button,.button{background-color:#f9f9f9}}