:root{--app-width:100vw;--app-max-width:800px;--app-padding:1rem;--hue:200;--text-color:#fff;--piece-dark:#000;--piece-light:#fff;--tile-dark:hsl(var(--hue),50%,50%);--tile-light:hsl(var(--hue),50%,65%);--indicator-color:hsl(var(--hue),80%,80%);--bg-color:hsl(var(--hue),25%,12%);--box-color:hsl(var(--hue),25%,30%);--subtle-color:hsl(var(--hue),25%,50%)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#fff;color:var(--text-color);background-color:#172126;background-color:var(--bg-color)}.App{display:grid;grid-template-rows:repeat(3,auto);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"board board" "banner banner" "taken-pieces-black taken-pieces-white" "game-settings game-settings";grid-gap:var(--app-padding);gap:var(--app-padding);width:var(--app-width);max-width:var(--app-max-width);padding:var(--app-padding);margin:auto}.Board{grid-area:board;width:calc(var(--app-width) - var(--app-padding)*2);max-width:calc(var(--app-max-width) - var(--app-padding)*2);height:calc(var(--app-width) - var(--app-padding)*2);max-height:calc(var(--app-max-width) - var(--app-padding)*2)}.Board__inner{display:grid;height:100%;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr))}.Tile{position:relative;display:flex;align-items:center;justify-content:center;background-color:var(--tile-light)}.Tile:nth-child(16n+2),.Tile:nth-child(16n+4),.Tile:nth-child(16n+6),.Tile:nth-child(16n+8),.Tile:nth-child(16n+9),.Tile:nth-child(16n+11),.Tile:nth-child(16n+13),.Tile:nth-child(16n+15){background-color:var(--tile-dark)}.Tile--interactive{cursor:pointer}.Tile:focus{outline:none;box-shadow:inset 0 0 3px 2px var(--indicator-color)}.Tile__indicator{position:absolute;width:60%;height:60%;border-radius:50%;background-color:var(--indicator-color)}.Piece{display:inline-block;z-index:1}.Piece__icon{font-size:1em}.Piece__icon--white{color:var(--piece-light)}.Piece__icon--black{color:var(--piece-dark)}@media screen and (min-width:360px){.Piece__icon{font-size:1.5em}}@media screen and (min-width:540px){.Piece__icon{font-size:2em}}@media screen and (min-width:720px){.Piece__icon{font-size:2.5em}}@-webkit-keyframes move-piece{to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes move-piece{to{-webkit-transform:translate(0);transform:translate(0)}}.Banner{grid-area:banner;font-size:1.4em;text-align:center;padding:calc(var(--app-padding)/2);background-color:var(--box-color)}.GameSettings{grid-area:game-settings;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-template-areas:"new undo" "difficulty theme" "color-picker color-picker";grid-gap:var(--app-padding);gap:var(--app-padding)}.GameSettings__new{grid-area:new}.GameSettings__undo{grid-area:undo}.GameSettings__difficulty{grid-area:difficulty}.GameSettings__theme{grid-area:theme}.GameSettings__difficulty,.GameSettings__new,.GameSettings__theme,.GameSettings__undo{font-size:1rem;-webkit-appearance:none;appearance:none;cursor:pointer;padding:calc(var(--app-padding)/2);color:var(--text-color);background-color:var(--box-color);border:1px solid var(--subtle-color);border-radius:0}.GameSettings__difficulty:disabled,.GameSettings__new:disabled,.GameSettings__theme:disabled,.GameSettings__undo:disabled{cursor:not-allowed;color:var(--subtle-color)}.GameSettings__new:active,.GameSettings__theme--active,.GameSettings__theme:active,.GameSettings__undo:active{background-color:var(--subtle-color)}.GameSettings__difficulty{--arrow-size:12px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23fff'><polygon points='0,25 100,25 50,75'/></svg>");background-size:var(--arrow-size);background-position:calc(100% - var(--arrow-size)/2) 50%;background-repeat:no-repeat;text-align:center;text-align-last:center;padding-left:calc(var(--arrow-size)*2);padding-right:calc(var(--arrow-size)*2)}.ColorPicker{grid-area:color-picker;--thumb-size:26px;--track-size:10px;--border-width:1px;--gradient:linear-gradient(90deg,#bf4040,#c6ad33,#72c038,#00c39b,#0095d6,#6e40c1,#ca35aa,#bf4040)}.ColorPicker input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--track-size);margin:calc(var(--thumb-size)/2 - var(--track-size)/2) 0}.ColorPicker input[type=range]:focus-visible{outline:none;box-shadow:0 0 3px 2px var(--text-color)}.ColorPicker input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;cursor:grab;width:var(--thumb-size);height:var(--thumb-size);margin-top:calc(var(--thumb-size)*-1/2 - var(--track-size)*-1/2);background-color:var(--tile-dark);border:var(--border-width) solid var(--subtle-color);border-radius:50%}.ColorPicker input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}.ColorPicker input[type=range]::-moz-range-thumb{appearance:none;cursor:grab;width:var(--thumb-size);height:var(--thumb-size);margin-top:calc(var(--thumb-size)*-1/2 - var(--track-size)*-1/2);background-color:var(--tile-dark);border:var(--border-width) solid var(--subtle-color);border-radius:50%}.ColorPicker input[type=range]::-moz-range-thumb:active{cursor:grabbing}.ColorPicker input[type=range]::-ms-thumb{appearance:none;cursor:grab;width:var(--thumb-size);height:var(--thumb-size);margin-top:calc(var(--thumb-size)*-1/2 - var(--track-size)*-1/2);background-color:var(--tile-dark);border:var(--border-width) solid var(--subtle-color);border-radius:50%}.ColorPicker input[type=range]::-ms-thumb:active{cursor:grabbing}.ColorPicker input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;width:100%;height:var(--track-size);background-color:var(--text-color);background-image:var(--gradient);border:var(--border-width) solid var(--subtle-color)}.ColorPicker input[type=range]::-moz-range-track{appearance:none;width:100%;height:var(--track-size);background-color:var(--text-color);background-image:var(--gradient);border:var(--border-width) solid var(--subtle-color)}.ColorPicker input[type=range]::-ms-track{appearance:none;width:100%;height:var(--track-size);background-color:var(--text-color);background-image:var(--gradient);border:var(--border-width) solid var(--subtle-color)}.TakenPieces{line-height:2rem;min-height:calc(2rem + 1em + var(--app-padding));padding:calc(var(--app-padding)/2);text-align:center;background-color:var(--subtle-color)}.TakenPieces--white{grid-area:taken-pieces-white}.TakenPieces--black{grid-area:taken-pieces-black}
/*# sourceMappingURL=main.3b81b40b.chunk.css.map */