body{margin:0}#root{width:100vw;height:100vh;overflow:hidden}.chiral__main{width:500px;height:500px;position:relative;top:50%;left:50%;transform:translate(-50%,-50%)}.board{width:500px;height:500px;position:absolute}.board__lines-vertical{z-index:-1;grid-template-columns:repeat(10,auto);width:500px;height:500px;display:grid;position:absolute}.board__line-vertical{background:#dcdcdc;width:1px;height:500px;transition:all 2s}.board.end .board__line-vertical:nth-child(2n){margin-top:-100vh}.board.end .board__line-vertical:nth-child(odd){margin-top:100vh}.board__line-vertical:first-child{background:0 0}.board__lines-horizontal{z-index:-1;grid-template-rows:repeat(10,auto);width:500px;height:500px;display:grid;position:absolute}.board__line-horizontal{background:#dcdcdc;width:500px;height:1px;transition:all 2s}.board__line-horizontal:first-child{background:0 0}.board.end .board__line-horizontal:nth-child(2n){margin-left:-100vw}.board.end .board__line-horizontal:nth-child(odd){margin-left:100vw}.board__text{opacity:1;letter-spacing:2px;text-align:center;color:#121212;background:#fff;margin-top:1px;margin-left:1px;font-family:Roboto;font-size:8px;line-height:49px;transition:opacity 1.2s;position:absolute}.board.end .board__text{opacity:0}.board__tree{opacity:0;width:25px;height:32px;transition:opacity 1.2s;position:absolute}.board.start .board__tree{opacity:1}.board.end .board__tree{opacity:0}.board__tree-top{border-bottom:20px solid #dcdcdc;border-left:12.5px solid #0000;border-right:12.5px solid #0000;width:0;height:0}.board__tree-bottom{border-bottom:20px solid #dcdcdc;border-left:12.5px solid #0000;border-right:12.5px solid #0000;width:0;height:0;margin-top:-8px}.board__portal{opacity:1;background:#dcdcdc;border-radius:50%;width:10px;height:10px;transition:opacity 1.2s;position:absolute}.board.end .board__portal{opacity:0}.player{opacity:0;width:25px;height:25px;margin-top:12.5px;margin-left:12.5px;transition:transform .4s ease-in-out,opacity .6s;position:absolute}.player.start{opacity:1}.player.end{opacity:0}.player__text{width:200px;font-family:monospace;line-height:25px;transition:all .2s;position:absolute}.player__text.left{text-align:left;margin-left:30px}.player__text.right{text-align:right;margin-left:-210px}.player__body{background:#000;border-radius:2px;width:25px;height:25px;position:absolute}.player__head{background:#fff;border-radius:2px;width:3px;height:3px;margin-top:11px;margin-left:11px;transition:all .4s;position:absolute}.player__head.right{margin-top:11px;margin-left:20px}.player__head.left{margin-top:11px;margin-left:2px}.player__head.down{margin-top:20px;margin-left:11px}.player__head.up{margin-top:2px;margin-left:11px}.player__attack{background:#000;border-radius:2px;width:4px;height:25px;transition:all .1s;position:absolute}.player__attack--active{animation:.5s forwards attackAnim}@keyframes attackAnim{0%{width:4px;margin-left:0}33%{width:4px;margin-left:-8px}66%{width:40px;margin-left:10px}to{width:0;margin-left:50px}}