*{box-sizing:border-box}h1{font-size:1.5rem}.left-panel,.right-panel{float:left}.left-panel{width:20%;overflow:hidden;padding:10px}.left-panel label{margin:0 auto;display:block;width:fit-content;padding:3px 5px;cursor:pointer}.left-panel .guide{text-align:center;font-weight:100;font-size:1.1rem;padding:10px;color:#016fec}.left-panel .hint{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.left-panel button{border:1px solid #016fec;border-radius:5px;padding:5px 10px;color:#016fec;display:block;margin:5px auto 10px}.left-panel .image-holder{position:relative}.left-panel .image-holder .blank{content:"";display:block;background-color:#fff;position:absolute;bottom:0;right:0}.left-panel .image-holder img{max-width:100%;max-height:100%}.right-panel{width:80%}.move-count{position:absolute;padding:5px;background-color:#e1e1e1cc;z-index:1000;border-radius:0 0 5px}.empty-tile{z-index:100}.empty-tile button{position:absolute;font-size:0;border:none;background:none;width:40px;height:40px;border:1px solid #ccc;background:rgba(50,50,50,.8);border-radius:50%}.empty-tile button:after{position:absolute;left:6px;top:-12px;font-size:40px;color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;content:">"}.empty-tile button.up{bottom:-20px;left:50%;transform:translate(-50%) rotate(-90deg)}.empty-tile button.down{top:-20px;left:50%;transform:translate(-50%) rotate(90deg)}.empty-tile button.right{left:-20px;top:50%;transform:translateY(-50%)}.empty-tile button.left{right:-20px;top:50%;transform:translateY(-50%) rotate(180deg)}html{font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}
