*{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;flex-flow:column;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;display:flex;flex-flow:column;width:100%}.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-gallery .dom-list-input-select{display:flex;flex-flow:column}.select-gallery .new-puzzle-header{margin-top:1em;font-weight:700;display:flex;flex-flow:column;align-self:flex-start}.new-puzzle-header .caption{text-align:center;color:#fff}.select-gallery .select-header{display:flex;align-items:center;margin:1em;gap:1em}.select-gallery .select-header>div{display:flex;gap:.4em}.select-gallery .select-header input,.select-gallery .select-header label{align-items:center;color:#fff;cursor:pointer}.select-gallery .select-header button{padding:.5em;border-radius:2px;cursor:pointer}.select-gallery .dom-list-input-select input{cursor:pointer;align-self:flex-start;padding:2em;margin:.5em}.select-gallery .select-body{display:flex;padding:1em}.select-gallery .select-body .list-wrap{flex:1}.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;aspect-ratio:13/9}.list-wrap .image-wrap{position:relative;width:max-content}



.list-wrap .image-wrap .in-progress{position:absolute;top:0;left:0;font-size:.8em;background:#fff;color:#000;padding:.04em .5em;border-radius:0 0 4px;box-shadow:3px 1px 5px #000}



.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 .in-progress{position:absolute;top:0;left:0;right:0;transform:translateY(-100%);text-align:center;font-size:1.05em;background:#fff;color:#000;padding:.07em .7em;border-radius:0 0 4px;box-shadow:3px 1px 5px #00}




.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{flex:1;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;position:relative}.drop-image .body label img{flex-shrink:0;max-height:70vh}.drop-image .body .drop-text{display:flex;flex-flow:column;align-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:2em;white-space:nowrap}.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}.drop-image .minimum-info{color:#fff}.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:space-between;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%}.j-wrap footer{display:flex;gap:1em;justify-content:center;color:#fff;padding:1em}.j-wrap footer .about,.j-wrap footer .privacy{cursor:pointer}.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:2.2em}.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:0}.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;font-size:1.5em;padding:1em}.dialog-box.about span{text-align:center}.dialog-box.about span a{margin:0 .2em}.dialog-box.options,.dialog-box.stats{width: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;align-items:center}.options .form .group>label{padding-bottom:.5em}.options .form .group div:not(.switch-group){display:flex;gap:.2em}.options .form .audio-group{display:flex;flex-flow:column;gap:1.8em}.options .form .audio-group .volume-control-group{display:flex;flex-flow:column;align-items:flex-start}.options .form .audio-group .volume-control-group .slider-group span{width:5ch}.options .form{margin-bottom:2em}span.bold{font-weight:700}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=range]{overflow:hidden;width:120px;-webkit-appearance:none;appearance:none;background-color:#fff;border:1px solid black}input[type=range]::-webkit-slider-runnable-track{height:20px;-webkit-appearance:none;color:#2fa1d6;margin-top:-1px}input[type=range]::-webkit-slider-thumb{width:5px;-webkit-appearance:none;height:20px;cursor:ew-resize;background:#434343;box-shadow:-80px 0 0 80px #2196f3}}input[type=range]::-moz-range-progress{background-color:#13bba4}input[type=range]::-moz-range-track{background-color:#9a905d}input[type=range]::-ms-fill-lower{background-color:#43e5f7}input[type=range]::-ms-fill-upper{background-color:#9a905d}.switch-group{display:flex;align-items:center;gap:.5em}.switch{position:relative;display:inline-block;width:60px;height:28px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px;border:2px solid black}.slider:before{position:absolute;content:"";height:20px;width:20px;left:2px;top:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(32px)}.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;max-height:7vh}.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;font-size:clamp(.9375rem,.8238636364rem + .5681818182vh,1.25rem)}.side-header .info{display:flex;flex-flow:column;gap:1em;margin:1em 0}.side-header .pieces-info,.side-header .time-info{display:flex;flex-flow:column;justify-content:center;align-items:center}.side-header .buttons{display:flex;flex-flow:column;gap:2em;margin:1em 0}