*,:after,:before{box-sizing:inherit}html{box-sizing:border-box}body{margin:0;padding:0;font-family:sans-serif}:root{--patch-colour:brown}.scoreboard{margin-bottom:var(--square-size)}.scoreboard__track{position:relative;display:flex;overflow-x:hidden;border-left:1px solid #000;border-top:1px solid #000}.scoreboard__cell{position:relative;height:var(--square-size);min-width:var(--square-size);border-right:1px solid #000;border-bottom:1px solid #000}.scoreboard__cell--button-after:after{border-radius:50%;background-color:var(--button-colour)}.scoreboard__cell--button-after:after,.scoreboard__cell--patch-after:after{content:"";position:absolute;top:calc(var(--square-size)/4);right:calc(var(--square-size)/-4);width:calc(var(--square-size)/2);height:calc(var(--square-size)/2)}.scoreboard__cell--patch-after:after{background-color:brown;background-color:var(--patch-colour)}.scoreboard__cell--patch-taken:after{-webkit-filter:grayscale(.75);filter:grayscale(.75);opacity:.25}.scoreboard__player{--x-translate:0;--y-translate:0;position:absolute;top:calc(var(--square-size)/4);left:0;margin-left:calc(var(--square-size)/4);width:calc(var(--square-size)/2);height:calc(var(--square-size)/2);border-radius:4px;background-color:#32cd32;transform:translateX(var(--x-translate)) translateY(var(--y-translate));transition:transform .5s}.scoreboard__player--2{background-color:gold}.scoreboard__player--current{z-index:1}.scoreboard__player--current.scoreboard__player--scores-equal{--y-translate:-4px}.board__row{display:flex}.board__row:first-child .board__cell{border-top:1px solid var(--grid-border-colour)}.board__cell{position:relative;height:var(--square-size);width:var(--square-size);border-right:1px solid var(--grid-border-colour);border-bottom:1px solid var(--grid-border-colour)}.board__cell:first-child{border-left:1px solid var(--grid-border-colour)}.board__cell--has-button:before{content:"";position:absolute;top:5px;left:5px;width:1rem;height:1rem;border-radius:50%;border:2px solid #fff;background-color:var(--button-colour)}:root{--square-size:32px;--button-colour:#00f}.piece__row{display:flex}.piece__square{height:32px;height:var(--square-size);width:32px;width:var(--square-size)}.piece__square--solid{background-color:#999}.piece__square--has-button{position:relative}.piece__square--has-button:before{content:"";position:absolute;top:5px;left:5px;width:1rem;height:1rem;border-radius:50%;border:2px solid #fff;background-color:#00f;background-color:var(--button-colour)}.touch-control-button{width:var(--touch-button-size);height:var(--touch-button-size);font-size:0;background-color:hsla(0,0%,100%,.8);background-size:100% 100%}.touch-control-button--toggle-keyboard{margin-left:calc(var(--touch-button-size)*-1)}.touch-control-button--place{height:calc(var(--touch-button-size)*2);grid-column-start:4;grid-row-start:1;grid-row-end:3}.touch-control-button--down,.touch-control-button--up{grid-column-start:2}.touch-control-button--left{grid-column-start:1;grid-row-start:2}.touch-control-button--right{grid-column-start:3;grid-row-start:2}.touch-control-button--flip{grid-column-start:1;grid-row-start:1}.touch-control-button--rotate{grid-column-start:3;grid-row-start:1}:root{--touch-button-size:48px}.touch-controls{position:fixed;bottom:0;right:0;transform:translateX(192px) translateY(96px);transform:translateX(calc(var(--touch-button-size)*4)) translateY(calc(var(--touch-button-size)*2));transition:transform .3s}.touch-controls--visible{transform:none}.touch-controls__keyboard{display:grid;width:192px;width:calc(var(--touch-button-size)*4);grid-template-columns:1fr 1fr 1fr 1fr}:root{--grid-border-colour:#000}.player{position:relative;margin-bottom:var(--square-size);display:inline-block;background:repeating-linear-gradient(45deg,#fff,#fff 5px,rgba(0,255,0,.1) 0,rgba(0,255,0,.1) 10px)}.player+.player{margin-left:calc(2*var(--square-size));background:repeating-linear-gradient(135deg,#fff,#fff 5px,rgba(255,255,0,.2) 0,rgba(255,255,0,.2) 10px)}.player:not(.player--current){-webkit-filter:grayscale(.9);filter:grayscale(.9)}.player__buttons{background-color:var(--button-colour);border-radius:50%}.player__buttons,.player__seven-by-seven{position:absolute;display:flex;justify-content:center;align-items:center;height:var(--square-size);width:var(--square-size);bottom:calc(var(--square-size)*-1.25);color:#fff}.player__seven-by-seven{left:calc(var(--square-size)*2);font-size:12px;background-color:var(--patch-colour)}.player__final-score{position:absolute;display:flex;justify-content:center;align-items:center;height:calc(var(--square-size)*4);width:calc(var(--square-size)*4);margin-top:calc(var(--square-size)*-2);margin-left:calc(var(--square-size)*-2);top:50%;left:50%;font-size:50px;background-color:var(--button-colour);color:#fff}.players{display:flex;justify-content:space-around}.track-piece{position:relative;margin-left:var(--square-size);cursor:pointer}.track-piece:first-child{margin-left:0}.track-piece--not-selectable{-webkit-filter:grayscale(.75);filter:grayscale(.75);opacity:.3;pointer-events:none}.track-piece__costs{display:inline-block;margin-bottom:5px;background-color:#fff;border:2px solid #ccc;padding:5px;font-size:12px}.track-piece__costs-row:not(:last-child){margin-right:5px}.track-piece__costs-row--time{position:relative;padding-right:10px}.track-piece__costs-row--time:after,.track-piece__costs-row--time:before{content:"";position:absolute;right:0;width:0;height:0;border-style:solid}.track-piece__costs-row--time:before{top:3px;border-width:4px 4px 0;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;border-top-color:var(--button-colour)}.track-piece__costs-row--time:after{top:7px;border-width:0 4px 4px;border-left-color:transparent;border-bottom-color:var(--button-colour);border-right-color:transparent;border-top-color:transparent}.track-piece__costs-row--buttons:after{content:"";display:inline-block;width:.75em;height:.75em;margin-left:2px;background-color:var(--button-colour);border-radius:50%}.track{margin-top:var(--square-size);display:flex;align-items:flex-start;overflow-x:scroll}.track__make-buttons{display:block;min-width:100px;padding:1rem;font-size:1rem}.instructions:before{content:"";position:fixed;z-index:2;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.75)}.instructions__modal{position:fixed;z-index:2;width:80vw;max-width:650px;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);background-color:#fff;padding:2rem}.instructions__modal-heading{margin-top:0}.instructions__modal-controls{display:flex;justify-content:space-between;align-items:center}.instructions__modal-button{padding:.5rem;font:inherit}body{padding:1rem}
/*# sourceMappingURL=main.29638554.chunk.css.map */