*{margin:0;padding:0;box-sizing:border-box}:root{font-family:system-ui,Arial,sans-serif;line-height:1;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--move: hsl(198.4 93.2% 59.6%);--capture: hsl(0 84.2% 60.2%);--promotion: hsl(43.3 96.4% 56.3%);--secondary: hsl(240 5.2% 38.5%);--background: hsl(0 0% 98%);--text: hsl(240 10% 3.9%)}html{scrollbar-gutter:stable}html:has(.over-screen[data-open=true]),html:has([data-pawn-promotion][data-open=true]){scrollbar-gutter:auto}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;color:var(--text)}button{border:1px solid transparent;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;color:var(--text);background-color:var(--background)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}main{width:100%;max-width:600px;margin-inline:auto;padding-inline:.5em}main header div{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;padding-inline:.4em}main header h1{font-size:2em;text-align:center;margin-block:.8em .6em;text-transform:capitalize}main header button{padding:.6em 1.2em;border-radius:6px;transition:filter .25s;border-width:2px;border-color:var(--secondary)}main header button:hover,main header button:focus-visible{filter:drop-shadow(0 0 .5em var(--secondary))}.game-board{display:grid;min-width:300px;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));aspect-ratio:1/1;transform-origin:center;transition:transform .15s;background-color:var(--background);border:1px solid var(--text)}.game-board.disable{pointer-events:none;opacity:.5}.game-board button{font-size:clamp(1em,2.8vh + 1em,2.5em);transform-origin:center;display:inline-flex;line-height:2;border-width:1.5px;justify-content:center;align-items:center;position:relative;--square-shadow: var(--move)}.game-board button.black{background-color:var(--secondary)}.game-board button[data-move-type]{box-shadow:inset 0 0 32px var(--square-shadow);border-color:var(--square-shadow)}.game-board button[data-move-type=capture]{--square-shadow: var(--capture)}.game-board button[data-move-type=promotion],.game-board button[data-move-type=all]{--square-shadow: var(--promotion)}.game-board button.king-check:after{isolation:isolate;content:"";position:absolute;inset:0;z-index:1;border:1.5px solid var(--capture);background-color:hsla(from var(--capture) h s l / .4)}.game-board.rotate{--rotation: 180deg;transform:rotate(var(--rotation))}.game-board.rotate button{transform:rotate(var(--rotation))}.backdrop{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;position:absolute;inset:0}.start-screen{display:grid;gap:1em}.start-screen h1{font-size:3em;text-align:center;padding-bottom:.25em}.start-screen button{padding:.6em 1.2em;border-radius:6px;transition:filter .25s;border-width:2px;border-color:var(--secondary);word-spacing:1.5ch}.start-screen button:hover,.start-screen button:focus-visible{filter:drop-shadow(0 0 .5em var(--secondary))}.over-screen button{padding:.6em 1.2em;border-radius:6px;transition:background-color .25s;border-width:2px;border-color:var(--secondary)}.over-screen button:hover,.over-screen button:focus-visible{background-color:hsla(from var(--background) h s l / .8)}.backdrop-content{height:100vh;width:100vw;position:relative;z-index:2;background-color:hsla(from var(--secondary) h s l / .6);-webkit-backdrop-filter:5px;backdrop-filter:5px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2em}.backdrop-content h1{font-size:2em;font-weight:600;text-transform:capitalize}.promotion-pieces{display:grid;min-width:180px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));aspect-ratio:1/1;background-color:var(--background);border:1px solid var(--text)}.promotion-pieces button{font-size:clamp(1em,2.8vh + 1em,2.5em);transform-origin:center;display:inline-flex;line-height:2;justify-content:center;align-items:center}.promotion-pieces button.black{background-color:var(--secondary)}*:disabled{cursor:not-allowed;opacity:.6}[data-open=false]{display:none}