*{box-sizing:border-box;font-family:Raleway,-apple-system,system,sans-serif}body{margin:0}h1{height:75px;margin-bottom:.5em;font-size:5em;background-repeat:no-repeat;background-position:2px}a{color:#3f894a;text-decoration:none;border-bottom:1px solid transparent}a:hover{color:#27552e;border-bottom:1px solid #27552e}kbd{position:relative;z-index:15;display:inline-block;min-width:1.8em;text-align:center;padding:.3em .5em;margin-top:.2em;margin-right:.5em;border:1px solid grey;border-radius:3px;background-color:#fff;transition:background-color .2s ease-out}kbd.rebind-key{background-color:#c3c3c3;transition:background-color .3s ease-out}main{--block-size:calc(70vh/var(--rows));margin:0 auto;height:100vh;border-left:1px solid #d3d3d3;border-right:1px solid #d3d3d3;background-color:#f4f4f4;display:grid;grid-template-rows:1fr auto 1fr;grid-column-gap:1em}main,main .center{position:absolute;left:50%;transform:translateX(-50%)}main .center{width:50%;min-width:15em;top:4%;z-index:10}main .center>button{width:100%;padding:1em;border:2px solid #000;background-color:#fff;font-size:medium}#info{width:12em;display:grid;grid-row-gap:.6em;grid-template-rows:repeat(3,auto) 1fr repeat(2,auto);color:#fff;font-weight:700}#info>div{padding:.9em;background:#09568e}input[type=radio]{margin-right:.8em}label{position:relative;z-index:15}#next-piece{width:calc(var(--block-size)*4);height:calc(var(--block-size)*4);margin:0 auto;display:grid;grid-gap:.1em;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);padding:.3em!important;background:transparent!important}#board{width:calc(var(--columns)*var(--block-size));height:calc(var(--rows)*var(--block-size));display:grid;grid-template-rows:repeat(var(--rows),auto);grid-template-columns:repeat(var(--columns),auto);grid-gap:1px;transition:opacity .2s ease-out}#board.lost{opacity:1%;transition:opacity .3s ease-out}#board.upside-down{transform:scaleY(-1)}div.square{border:1px solid #d3d3d3;background-color:#fff}div.square.piece.occupied{border-color:#65b41c;background-color:#65b41c}div.square.occupied{border-color:#d94343;background-color:#d94343}#help{grid-column:span 2;padding:1em;display:grid;grid-gap:.3em;grid-template-columns:repeat(2,1fr);font-size:smaller}#help .explanation{grid-column:span 2}@media (max-height:768px){main{--block-size:calc(100vh/var(--rows));grid-template-columns:1fr 1fr}#next-piece{grid-gap:1px}#help{display:none}#info{font-size:smaller}}@media (max-aspect-ratio:1/1){main{--block-size:calc(60vh/var(--rows));grid-template-columns:1fr;grid-row-gap:.5em}#help{display:none}#info{width:auto;grid-template-columns:1fr 1fr;grid-gap:.2em;font-size:smaller}}.touch-areas{position:absolute;width:100vw;height:100vh;left:50%;transform:translateX(-50%);display:grid;grid-template:"turn turn" 1fr "left right" 7fr "down down" 1fr "drop drop" 1fr}.turn-piece{grid-area:turn}.move-left{grid-area:left}.move-right{grid-area:right}.move-down{grid-area:down}.drop-piece{grid-area:drop}.center .show-touch-areas{width:100%;height:35vh;display:grid;grid-template:"turn turn" 1fr "left right" 7fr "down down" 1fr "drop drop" 1fr;grid-gap:3px}.center .show-touch-areas>div{background-color:#f9e5e5;border:3px solid #c5c5c5}.center .show-touch-areas>div:before{display:block;margin:.6em}.center .show-touch-areas .turn-piece:before{content:"Turn piece"}.center .show-touch-areas .move-left:before{content:"Move left"}.center .show-touch-areas .move-right:before{content:"Move right"}.center .show-touch-areas .move-down:before{content:"Move down"}.center .show-touch-areas .drop-piece:before{content:"Drop piece"}
/*# sourceMappingURL=index.20cb1a14.css.map */