body,html{width:100%;height:100%;margin:0;padding:0}*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}#app{height:100%;width:100%}.component-cellbutton{position:absolute}.component-cellbutton .main-cell{width:calc(var(--grid-size)/2);height:calc(var(--grid-size)/2);border-radius:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:border .5s;transition:border .5s;cursor:pointer;border:0 solid transparent;-webkit-box-sizing:content-box;box-sizing:content-box}.component-cellbutton.is-hoverable .main-cell{border:calc(var(--grid-size)/15) solid #ceca61}.component-cellbutton.is-hoverable .main-cell:before{content:" ";display:block;width:100%;height:100%;border:calc(var(--grid-size)/40) solid #fff;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border .5s;transition:border .5s}.component-cellbutton.is-hoverable .main-cell:hover{border:calc(var(--grid-size)/8) solid #555;background:#fff}.component-cellbutton.is-hoverable.enable .main-cell:hover{background:#999}.component-cellbutton.is-hoverable.selected .main-cell:hover{border:calc(var(--grid-size)/8) solid #061e8b}.component-cellbutton.selected .main-cell{border:calc(var(--grid-size)/15) solid #555}.component-cellbutton.enable .main-cell{background:#999}.component-cellbutton .bar{position:absolute;left:0;top:0;-webkit-box-sizing:content-box;box-sizing:content-box;pointer-events:none;z-index:1}.component-cellbutton .bar .bar-bottom,.component-cellbutton .bar .bar-bottom-right,.component-cellbutton .bar .bar-right,.component-cellbutton .bar .bar-top-right{opacity:0;position:absolute;width:calc(var(--grid-size)/12);height:calc(var(--grid-size)/12 + var(--grid-size));-webkit-transform:translateX(-50%) translateY(calc(var(--grid-size)/-24));transform:translateX(-50%) translateY(calc(var(--grid-size)/-24));background:#000;border-radius:calc(var(--grid-size)/6);left:0;right:0}.component-cellbutton .bar .bar-bottom-right,.component-cellbutton .bar .bar-top-right{height:calc(var(--grid-size)/12 + var(--grid-hyppo-size))}.component-cellbutton .bar .bar-wrapper-right{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.component-cellbutton .bar .bar-wrapper-top-right{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.component-cellbutton .bar .bar-wrapper-bottom-right{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.component-cellbutton.is-bar-bottom-right .bar .bar-bottom-right,.component-cellbutton.is-bar-bottom .bar .bar-bottom,.component-cellbutton.is-bar-right .bar .bar-right,.component-cellbutton.is-bar-top-right .bar .bar-top-right{opacity:1}.component-cellbutton .cell1,.component-cellbutton .cell2,.component-cellbutton .cell3,.component-cellbutton .cell4{width:calc(var(--grid-size)/2);height:calc(var(--grid-size)/2);border:calc(var(--grid-size)/15) solid rgba(74,74,74,.27);border-radius:100%;background:hsla(0,0%,80%,.3);position:absolute;left:0;top:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition:all .5s;transition:all .5s}.component-cellbutton .cell4{border:calc(var(--grid-size)/15) solid #061e8b}.component-cellbutton .cell4:hover{border-width:calc(var(--grid-size)/8)}.component-cellbutton .sub-bar{pointer-events:none;width:calc(var(--grid-size)/12);height:calc(var(--grid-size)/12);background:#777;border-radius:calc(var(--grid-size)/12);position:absolute;left:0;top:0}.component-cellbutton .barrable-bottom,.component-cellbutton .barrable-bottom-left,.component-cellbutton .barrable-bottom-right,.component-cellbutton .barrable-left,.component-cellbutton .barrable-right,.component-cellbutton .barrable-top,.component-cellbutton .barrable-top-left,.component-cellbutton .barrable-top-right{opacity:0;position:absolute;pointer-events:none;cursor:pointer;left:0;top:0;z-index:1}.component-cellbutton .barrable-bottom-left .sub-bar,.component-cellbutton .barrable-bottom-right .sub-bar,.component-cellbutton .barrable-bottom .sub-bar,.component-cellbutton .barrable-left .sub-bar,.component-cellbutton .barrable-right .sub-bar,.component-cellbutton .barrable-top-left .sub-bar,.component-cellbutton .barrable-top-right .sub-bar,.component-cellbutton .barrable-top .sub-bar{height:calc(var(--grid-size)/12 + var(--grid-size)*4);-webkit-transform:translateX(-50%) translateY(calc(var(--grid-size)/-24));transform:translateX(-50%) translateY(calc(var(--grid-size)/-24));left:0;top:0}.component-cellbutton .barrable-bottom-left .sub-bar,.component-cellbutton .barrable-bottom-right .sub-bar,.component-cellbutton .barrable-top-left .sub-bar,.component-cellbutton .barrable-top-right .sub-bar{height:calc(var(--grid-size)/12 + var(--grid-hyppo-size)*4)}.component-cellbutton .barrable-top .cell1{top:calc(var(--grid-size)*-1)}.component-cellbutton .barrable-top .cell2{top:calc(var(--grid-size)*-2)}.component-cellbutton .barrable-top .cell3{top:calc(var(--grid-size)*-3)}.component-cellbutton .barrable-top .cell4{top:calc(var(--grid-size)*-4)}.component-cellbutton .barrable-top .sub-bar-wrapper{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.component-cellbutton .barrable-bottom .cell1{top:calc(var(--grid-size)*1)}.component-cellbutton .barrable-bottom .cell2{top:calc(var(--grid-size)*2)}.component-cellbutton .barrable-bottom .cell3{top:calc(var(--grid-size)*3)}.component-cellbutton .barrable-bottom .cell4{top:calc(var(--grid-size)*4)}.component-cellbutton .barrable-left .cell1{left:calc(var(--grid-size)*-1)}.component-cellbutton .barrable-left .cell2{left:calc(var(--grid-size)*-2)}.component-cellbutton .barrable-left .cell3{left:calc(var(--grid-size)*-3)}.component-cellbutton .barrable-left .cell4{left:calc(var(--grid-size)*-4)}.component-cellbutton .barrable-left .sub-bar-wrapper{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.component-cellbutton .barrable-right .cell1{left:calc(var(--grid-size)*1)}.component-cellbutton .barrable-right .cell2{left:calc(var(--grid-size)*2)}.component-cellbutton .barrable-right .cell3{left:calc(var(--grid-size)*3)}.component-cellbutton .barrable-right .cell4{left:calc(var(--grid-size)*4)}.component-cellbutton .barrable-right .sub-bar-wrapper{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.component-cellbutton .barrable-top-right .cell1{top:calc(var(--grid-size)*-1);left:calc(var(--grid-size)*1)}.component-cellbutton .barrable-top-right .cell2{top:calc(var(--grid-size)*-2);left:calc(var(--grid-size)*2)}.component-cellbutton .barrable-top-right .cell3{top:calc(var(--grid-size)*-3);left:calc(var(--grid-size)*3)}.component-cellbutton .barrable-top-right .cell4{top:calc(var(--grid-size)*-4);left:calc(var(--grid-size)*4)}.component-cellbutton .barrable-top-right .sub-bar-wrapper{-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.component-cellbutton .barrable-top-left .cell1{top:calc(var(--grid-size)*-1);left:calc(var(--grid-size)*-1)}.component-cellbutton .barrable-top-left .cell2{top:calc(var(--grid-size)*-2);left:calc(var(--grid-size)*-2)}.component-cellbutton .barrable-top-left .cell3{top:calc(var(--grid-size)*-3);left:calc(var(--grid-size)*-3)}.component-cellbutton .barrable-top-left .cell4{top:calc(var(--grid-size)*-4);left:calc(var(--grid-size)*-4)}.component-cellbutton .barrable-top-left .sub-bar-wrapper{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.component-cellbutton .barrable-bottom-right .cell1{top:calc(var(--grid-size)*1);left:calc(var(--grid-size)*1)}.component-cellbutton .barrable-bottom-right .cell2{top:calc(var(--grid-size)*2);left:calc(var(--grid-size)*2)}.component-cellbutton .barrable-bottom-right .cell3{top:calc(var(--grid-size)*3);left:calc(var(--grid-size)*3)}.component-cellbutton .barrable-bottom-right .cell4{top:calc(var(--grid-size)*4);left:calc(var(--grid-size)*4)}.component-cellbutton .barrable-bottom-right .sub-bar-wrapper{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.component-cellbutton .barrable-bottom-left .cell1{top:calc(var(--grid-size)*1);left:calc(var(--grid-size)*-1)}.component-cellbutton .barrable-bottom-left .cell2{top:calc(var(--grid-size)*2);left:calc(var(--grid-size)*-2)}.component-cellbutton .barrable-bottom-left .cell3{top:calc(var(--grid-size)*3);left:calc(var(--grid-size)*-3)}.component-cellbutton .barrable-bottom-left .cell4{top:calc(var(--grid-size)*4);left:calc(var(--grid-size)*-4)}.component-cellbutton .barrable-bottom-left .sub-bar-wrapper{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.component-cellbutton.selected.is-barrable-bottom-left .barrable-bottom-left,.component-cellbutton.selected.is-barrable-bottom-right .barrable-bottom-right,.component-cellbutton.selected.is-barrable-bottom .barrable-bottom,.component-cellbutton.selected.is-barrable-left .barrable-left,.component-cellbutton.selected.is-barrable-right .barrable-right,.component-cellbutton.selected.is-barrable-top-left .barrable-top-left,.component-cellbutton.selected.is-barrable-top-right .barrable-top-right,.component-cellbutton.selected.is-barrable-top .barrable-top{pointer-events:auto;opacity:1}.component-gridcomponent{position:absolute;-webkit-transition:all .2s;transition:all .2s}.component-gridcomponent:before{content:" ";z-index:-1;display:block;position:absolute;left:-30000.4px;top:-30000.4px;width:90000px;height:90000px;-webkit-transition:all 1s;transition:all 1s;background-size:var(--grid-size) var(--grid-size);background-image:-webkit-gradient(linear,left top,right top,from(#efefef),to(transparent)),-webkit-gradient(linear,left top,left bottom,from(#efefef),to(transparent));background-image:linear-gradient(90deg,#efefef calc(var(--grid-size)/20),transparent calc(var(--grid-size)/20)),linear-gradient(180deg,#efefef calc(var(--grid-size)/20),transparent calc(var(--grid-size)/20))}.component-gridcomponent.selected .component-cellbutton.is-hoverable:not(.selected) .main-cell{border:3px solid transparent!important;background:transparent!important}.component-gridcomponent.selected .component-cellbutton.is-hoverable:not(.selected) .main-cell:before{border-width:0!important}.component-gridcomponent.selected .component-cellbutton.is-hoverable:not(.selected).enable .main-cell{background:#999!important}.component-game{height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.component-game,.component-game .menu{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.component-game .menu{height:50px;background:#fff;position:relative;z-index:1;font-size:24px;font-family:arial;font-weight:700}.component-game .menu>div{padding:15px}.component-game .grid{overflow:hidden;height:calc(100% - 50px);width:100%;position:relative}.view-home{height:100%;width:100%}