*{padding:0;margin:0;font-family:Lato,sans-serif;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{background-color:#410000}.dom-list ul{list-style-type:none;padding:0;margin:0 0 0 20px}.dom-list li{display:inline-table;text-align:center;font-size:20px;color:#fff;margin:0 30px 30px 0;line-height:27px;cursor:pointer}.dom-list li .caption{display:table-caption;text-transform:capitalize;text-overflow:ellipsis;caption-side:bottom}.j-wrap{display:flex;align-items:stretch;position:absolute;transform-origin:0 0;width:100%;height:100%;z-index:0;background-color:#410000;background-size:cover!important;background-repeat:repeat;background-image:url(../assets/images/background.jpg)}canvas,.overlay,.dialog-wrap{position:absolute;top:0;left:0;width:100%;height:100%}.topnav-toggle{position:absolute;top:0;left:-99999px}#topnav{position:absolute;top:3em;left:1em;background:#fff;border:1px solid black;border-radius:2px;padding:1.2em 4em 1.2em 1em;display:none;flex-flow:column;gap:1.2em;z-index:100}.topnav-toggle:checked~#topnav{display:flex}.modal{position:absolute;transform:translate(-50%,-50%);left:50%;top:50%}.overlay{display:flex;justify-content:flex-start;background-color:#410000;overflow:hidden}.dialog-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0003}.dialog-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 1em #000}.navbar{display:flex;align-items:center;box-sizing:border-box;padding:1em}.navbar-label{text-align:left;color:#fff;font:2em Segoe UI,Helvetica,Arial}.navbar>*{margin-left:.4em}.home{padding:1em;overflow:auto}.home .menu-bar{display:flex;align-items:center;margin-bottom:1em;cursor:pointer}.home .menu-bar .menu-hamburger{width:2em;aspect-ratio:1/1;background:url(../assets/images/menu_command.png);background-position:-4px -4px;cursor:pointer}.home .menu-bar .menu-header{padding:.2em;color:#fff;font-size:1.2em;line-height:1.2em;margin-left:5px;cursor:pointer}.home .navbar-label{margin-left:1em;margin-bottom:1em}.select-gallery{overflow:auto}.select-gallery .sub-controls{display:flex;justify-content:space-between}.select-gallery .sub-sort{cursor:pointer;color:#fff;padding:1em;width:25%}.select-gallery .sub-sort .random{text-transform:capitalize;margin-left:.2em}.select-gallery .sub-filter{width:50%;display:flex;flex-wrap:wrap;align-items:center;padding:1em;gap:1em}.select-gallery .sub-filter span{cursor:pointer;color:#fff;text-transform:capitalize}.select-gallery .sub-filter span:first-child{font-size:1.8em}.select-category{display:flex;flex-flow:column;align-items:stretch;width:100%}.select-category .list-wrap{box-sizing:border-box;overflow:auto}.list-wrap ul li img{box-shadow:0 0 1em #000;width:250px;height:188px}.list-wrap .image-wrap{position:relative;width:max-content}.list-wrap .image-wrap .difficulty{font-weight:700;font-size:1.4em;text-shadow:.08em .08em .1em black;display:flex;align-items:center;gap:.4em;position:absolute;bottom:0;right:0}.list-wrap .image-wrap .nb-pieces-image{background:url(../assets/images/puzzle_piece_preview.png);background-size:cover;width:1em;aspect-ratio:1/1.5}.caption{width:222px;height:30px;line-height:32px;margin:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}.difficulty-modal{display:flex;flex-flow:column;margin:auto;height:90%;min-width:600px;min-height:0}.difficulty-modal .header{display:flex;justify-content:space-between;align-items:center;color:#000;padding:.4em;font-size:1.8em;background:#fff}.difficulty-modal .header span{margin:auto}.difficulty-modal .header .close{cursor:pointer}.difficulty-modal .image-wrap{display:flex;justify-content:center;align-items:center;background:#fff;flex:1}.difficulty-modal .image-wrap .pad{width:4.4em}.difficulty-modal .image-wrap img{min-width:0;min-height:0}.difficulty-modal .items{display:flex}.difficulty-modal .items .difficulty-item{flex:1 0 0;position:relative;color:#fff;background:#000;display:flex;border-right:2px solid white;width:135px;padding:.5em;box-sizing:border-box;cursor:pointer}.difficulty-modal .items .difficulty-item:first-child{border-left:none}.difficulty-modal .items .difficulty-item:last-child{border-right:none}.difficulty-item img{position:absolute;top:.3em;left:.3em;height:2.6em}.difficulty-item .labels{margin-left:1.2em;padding:.2em;display:flex;flex-flow:column;justify-content:center;align-items:center;width:100%}.difficulty-item .num{font-size:1.6em;font-weight:700}.difficulty-item .level{font-weight:700;font-size:1em;margin-top:.2em;text-align:center}.modal.completed{display:flex;flex-flow:column;gap:.2em;background:#fff;padding:2em;border-radius:4px;left:calc(50% - 60px)}.completed .label{margin-bottom:.5em;color:#994100;font-size:2.2em;font-weight:700;text-align:center}.completed .title{margin:.2em;font-weight:700;font-size:1.6em;text-align:center}.completed .info{margin:.2em;font-weight:700;font-size:2.2em;text-align:center}.completed .small{font-size:1.2em;font-weight:700;text-align:center;font-weight:400}.completed .actions{display:flex;justify-content:space-around;margin-top:.8em}.completed .button{background:#994100;color:#fff;padding:.5em 1em;font-weight:700;border-radius:4px}.noconnection{display:flex;flex-flow:column;justify-content:center;align-items:center;font-size:2em;color:#fff;flex:1}.splash{width:100%;display:flex;flex-flow:column;justify-content:center;align-items:center;background-size:cover!important;background-repeat:repeat;background-image:url(../assets/images/background.jpg)}.splash .progress{color:#fff;font-size:2em}.loading{display:flex;justify-content:center;align-items:center;font-size:2em;color:#fff;flex:1}.drop-image{display:flex;flex-flow:column;width:100%}.drop-image .header{align-self:flex-end;margin:2em}.drop-image .body{margin:2em;flex-grow:1;display:flex;justify-content:center}.drop-image .body input{display:none}.drop-image .body label{display:flex;justify-content:center}.drop-image .body label img{flex-shrink:0}.modal.new-puzzle{position:absolute;width:100%;height:100%;display:flex;flex-flow:column;gap:1em;justify-content:center;align-items:center;background:#410000}.drop-image .image-wrap{border:4px solid white;height:50%}.drop-image .image-wrap img{max-width:100%;max-height:100%}.drop-image .form{display:flex;color:#fff;align-items:center;justify-content:space-around;gap:1em;font-size:1.2em}.drop-image .form input{padding:.8em}.drop-image .form .button{padding:.5em;color:#000;background:#ccc}.drop-image .form .button.ok{color:#fff;background:green}.about>h3{font-size:1.2em}.about>h3,.about>span,.stats>h3,.stats>span{display:block;text-align:center}.close-bg{background:#000;opacity:.2;position:absolute;width:100%;height:100%}.dialog-box .about,.dialog-box .stats{display:flex;justify-content:center;align-items:center}.jigsaw-board{position:relative}.jigsaw-board .side-header{display:flex;flex:0 0 3.2em;position:relative;justify-content:center;overflow:hidden}.jigsaw-board .pieces-dialog,.jigsaw-board .options-dialog{position:absolute;box-sizing:border-box;background:#fff;padding:1em;width:12em;border:4px solid black;display:flex;flex-flow:column;gap:1em}.pieces-dialog div:nth-child(1){padding-bottom:1em;border-bottom:1px solid black}.options-dialog div:nth-child(2){padding-bottom:1em;border-bottom:1px solid black}.pieces-dialog-overlay{position:absolute;width:100%;height:100%;background:#0003}.icon-text{position:relative;display:flex;gap:.5em;align-items:center}.icon-text label{box-sizing:border-box;padding:.2em}.check-icon{visibility:hidden;width:15px;aspect-ratio:1;background:url(../assets/images/checked.png)}.icon-text .checkbox{position:absolute;left:-99999px}.icon-text .checkbox:checked~.check-icon{visibility:visible}.jigsaw-board .background{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover}.jigsaw-board .background-dialog{position:absolute;bottom:1em;left:50%;width:80%;transform:translate(-50%);background:#0003;padding:1em;display:flex;justify-content:space-around;gap:.2em}.jigsaw-board .background-dialog div{flex:1 1 0}.jigsaw-board .background-dialog img{max-width:100%}.jigsaw-board{flex:1;display:flex}.jigsaw-board .board-wrap{position:relative;flex:1 0 0}.jigsaw-board .board-wrap .loading{position:absolute;font-size:2em;color:#fff;top:50%;left:50%;transform:translate(-50%,-50%)}.jigsaw-board .board{position:absolute;top:0;left:0;width:100%;height:100%}.jigsaw-board .side-header{display:flex;flex-direction:column;gap:1em;padding:0 1em;background:#000;color:#fff}.side-header .icon-button{display:flex;align-items:center;flex-direction:column;min-height:0;flex:1 1 auto}.side-header .icon-button>*{min-height:0;flex:1 1 auto}.side-header .icon-button img{width:100%;display:block;height:auto;object-fit:contain}.side-header .icon-button span{color:#fff;text-align:center}.side-header .info{display:flex;flex-flow:column;gap:1em;padding:2em 0}.side-header .pieces-info,.side-header .time-info{display:flex;flex-flow:column;justify-content:center;align-items:center}.dialog-box{background:#fff;border-radius:4px;display:flex;flex-flow:column}.dialog-box .header{padding:.8em;display:flex;justify-content:center;border-bottom:1px solid gray;background:#eee;border-radius:4px 4px 0 0;height:1.6em}.dialog-box .header{stroke:#211d1e;position:relative}.dialog-box .header h3{display:flex;align-items:center}.dialog-box .header svg:hover{stroke:#fff;background:#e4002b}.dialog-box .header svg{position:absolute;top:50%;right:1em;height:2em;transform:translateY(-50%)}.dialog-box .body{padding:2em}.tabs-horiz{display:flex;flex-flow:row nowrap;justify-content:center}.tabs-horiz span{flex:1 1 auto;text-align:center;padding:.5em .2em;cursor:pointer;position:relative;min-width:15%;box-shadow:0 1px gray;border-radius:4px 4px 0 0}.tabs-horiz span.active{box-shadow:0 -1px gray,-1px 0 gray,1px 0 gray}.tabs-content,.tabs-horiz{padding:1.5em}.tabs-content{display:flex;justify-content:center}table,th,td{border:1px solid gray;padding:.6em;text-align:center}table{border-collapse:collapse;table-layout:fixed;width:100%}.dialog-box.about .body{display:flex;flex-flow:column nowrap;justify-content:center;gap:.5em}.dialog-box.about span{text-align:center}.dialog-box.about span a{margin:0 .2em}.dialog-box.options,.dialog-box.stats{width:70%;height:70%;max-width:700px}.dialog-box .body{overflow:auto;flex:1}.options .form{width:100%;display:grid;row-gap:2em;column-gap:1em;grid-template-columns:1fr 1fr}.options .form .group{display:flex;flex-flow:column;gap:.2em}.options .form .group>label{padding-bottom:.5em}.options .form .group div{display:flex;gap:.2em;align-items:center}span.bold{font-weight:700}