.puzzle__container{flex:1;width:30vw;height:30vw;display:block;margin:6px auto;border:4px solid green;padding:6px;border-radius:6px;box-shadow:3px 3px 10px 6px rgba(0,0,0,.5);background-color:#fff}.puzzle__container .puzzle__box{height:100%;display:grid;grid-gap:4px}.puzzle__container .puzzle__box .puzzle__tile{background-color:green;border-radius:6px;display:flex;justify-content:center;align-items:center;color:#fff;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:24px}.puzzle__container .puzzle__box .puzzle__tile:not(.empty){box-shadow:2px 2px 2px 1px rgba(0,0,0,.5)}.puzzle__container .puzzle__box .puzzle__tile.correct{background-color:#097080}.puzzle__container .puzzle__box .puzzle__tile.highlighted{transform:scale(1.1)}.puzzle__container .puzzle__box .puzzle__tile.empty:not(.completed){background-color:transparent}.puzzle__container .puzzle__box .puzzle__tile.paused:not(.completed){background-color:#2c3e50}@media only screen and (max-width:640px){.puzzle__container{width:95vw;height:95vw}}.tile-enter-active,.tile-leave-active{transition:opacity 5s}.tile-enter,.tile-leave-to{opacity:0}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}body{padding:0;margin:0;background-color:#f3f379}.app{display:flex;flex-direction:column}.app .puzzle{display:flex;flex-direction:row}.app .puzzle .puzzle__left,.app .puzzle .puzzle__right{flex:1}.app .puzzle .puzzle__left,.app .puzzle .puzzle__left select{font-size:24px;font-weight:700}.app .puzzle .puzzle__left .play__button{border-radius:6px;margin:30px 20px;padding:20px;width:15vw;font-size:24px;font-weight:700;background-color:tomato;border:0;box-shadow:2px 3px 3px 2px rgba(0,0,0,.5)}.app .puzzle .puzzle__right{display:flex}.app .puzzle .puzzle__right .puzzle__score{background-color:#fff;border-radius:6px;width:15vw;margin:10px auto auto auto;padding:5px 0;box-shadow:1px 1px 8px 4px rgba(0,0,0,.5)}.app .puzzle .puzzle__right .puzzle__score div{font-size:large;display:flex;padding:5px 10px;font-weight:600}.app .puzzle .puzzle__right .puzzle__score div span{flex:1;text-align:left}.app .puzzle .puzzle__right .puzzle__score div span:nth-child(2n){text-align:center}.app .puzzle .puzzle__main{position:relative}.app .puzzle .puzzle__main .puzzle__solved{position:absolute;top:0;left:0;bottom:0;right:0;display:flex;flex-direction:column;justify-content:center;align-content:center;margin:6px 0;padding:20px;background-color:rgba(0,0,0,.8);border-radius:6px}.app .puzzle .puzzle__main .puzzle__solved span{font-size:28px;color:#fff}@media only screen and (max-width:640px){body h1{margin:10px}body .app .puzzle{flex-direction:column}body .app .puzzle .puzzle__left,body .app .puzzle .puzzle__left select{font-size:12px}body .app .puzzle .puzzle__left .play__button{border-radius:6px;margin:8px 4px;padding:10px 5px;width:30vw;font-size:12px}body .app .puzzle .puzzle__right .puzzle__score{width:45vw;margin:5px auto auto auto}body .app .puzzle .puzzle__right .puzzle__score div{padding:2px 5px}}