.game-view-container{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--gap)}.game-container{--face-size:calc((var(--tile-size) * var(--no-of-tiles)) + (var(--game-container-padding) * var(--no-of-tiles) * 2));height:var(--face-size);width:var(--face-size);transform-style:preserve-3d;transform:rotate3d(1,-1,0,3deg)}.face{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:absolute;-webkit-backface-visibility:visible;backface-visibility:visible;border:2px solid #000;box-sizing:border-box;background-color:#ccaf60;transform-style:preserve-3d}.face.front{transform:translateZ(calc(var(--face-size) / 2))}.face.back{transform:translateZ(calc(0px - var(--face-size) / 2))}.face.right{transform:rotateY(90deg) translateZ(calc(var(--face-size) / 2));border-right-width:40px;border-left-width:1px;border-bottom-width:1px}.face.left{transform:rotateY(-90deg) translateZ(calc(var(--face-size) / 2))}.face.top{transform:rotateX(90deg) translateZ(calc(var(--face-size) / 2))}.face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--face-size) / 2));border-bottom-width:30px}.game{display:grid;background-color:#ccaf60}.game.--3{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.game.--4{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}.game-tile{box-sizing:border-box;width:var(--tile-size);max-width:var(--tile-size);height:var(--tile-size);max-height:var(--tile-size);font-weight:700;display:flex;justify-content:center;align-items:center;border-width:.5px;border-style:solid;border-color:var(--font-color2);background-color:#f2f2f2;color:var(--font-color2);cursor:pointer;font-size:var(--game-tile-fs);margin:calc(.5*var(--game-container-padding))}.game-tile.--empty{background-color:transparent;cursor:default;visibility:hidden}.move-counter{width:calc(100% - var(--game-container-padding)*2);padding:0 var(--game-spacing-padding);display:flex;justify-content:center;text-align:center;font-size:calc(.8*var(--game-tile-fs))}.moves-num,.timer{width:calc(var(--tile-size)*(var(--no-of-tiles)/2 - .1));background-color:var(--bg-color3);padding:var(--game-spacing);border-radius:10px;color:var(--font-color1)}.moves-num p,.timer p{margin:0 0 5px;font-weight:700}.moves-num data,.moves-num time,.timer data,.timer time{color:var(--font-color2);background-color:var(--bg-color4);display:block;border-radius:10px;padding:3px 10px;font-size:calc(.7*var(--game-tile-fs))}.timer{margin-left:var(--game-spacing)}.game-btns-container{width:calc(100% - var(--game-container-padding)*2);padding:0 var(--game-container-padding)}.game-btn,.game-btns-container{display:flex;justify-content:center;text-align:center}.game-btn{width:calc(var(--tile-size)*(var(--no-of-tiles)/2 - .1));min-height:calc(var(--tile-size)/2);border-radius:5px;border-color:transparent;text-decoration:none;font-size:18px;padding:calc(.4*var(--game-spacing));align-items:center}.game-btn *,.game-btn svg{width:var(--game-btn-icon-size);height:var(--game-btn-icon-size)}.back-btn{color:#fff;background-color:#6e0404;display:flex;justify-content:center;align-items:center;margin-left:var(--game-spacing)}.back-btn:active,.back-btn:hover,.back-btn:link,.back-btn:visited{text-decoration:none}.back-btn:hover{background-color:#4a1919}.reset-btn{cursor:pointer;color:#fff;background-color:#003771}.reset-btn:active,.reset-btn:hover,.reset-btn:link,.reset-btn:visited{text-decoration:none}.reset-btn:hover{background-color:#00448e}.reset-btn:focus{outline:none;box-shadow:none}.swal2-confirm.swal2-styled{background-color:var(--bg-color)}html{font-size:calc(112.5% + .5vw);font-weight:400;font-family:monospace}:root{--bg-color:#64b0ef;--bg-color2:#92c7f3;--bg-color3:#76bef9;--bg-color4:#98cdff;--font-color:#183875;--font-color2:#060425;--no-of-tiles:4;--choice-square-size:22px;--choice-square-margin:1px;--choice-margin:50px;--game-spacing:10px;--game-container-padding:2px;--game-tile-fs:25px;--tile-size:80px;--game-btn-icon-size:25px;--gap:30px;--gap-factor:2}@media(max-width:550px){:root{--game-spacing:5px;--game-tile-fs:25px;--tile-size:80px;--gap:20px;--choice-margin:30px}}@media(max-width:450px){:root{--game-tile-fs:22px;--tile-size:70px;--game-btn-icon-size:20px;--choice-margin:20px}}@media(max-width:365px){:root{--game-tile-fs:20px;--tile-size:60px;--choice-square-size:18px;--choice-margin:10px}}@media(max-width:310px){:root{--choice-square-size:15px;--choice-margin:5px}}@media(max-width:290px){:root{--game-tile-fs:15px;--tile-size:50px;--choice-square-size:15px;--choice-margin:5px}}@media(min-height:1000px){:root{--gap-factor:4}}@media(max-height:600px){:root{--gap-factor:1}}body{background-color:var(--bg-color);margin:0;scrollbar-width:thin;scrollbar-color:var(--bg-color) var(--bg-color2)}body::-webkit-scrollbar{width:5px;-webkit-overflow-scrolling:auto!important}body::-webkit-scrollbar-track{background:var(--bg-color2)}body::-webkit-scrollbar-thumb{background-color:var(--bg-color);border-radius:6px;border:0 solid var(--bg-color2)}button{font-family:monospace}.app-container{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:8px;height:calc(100vh - 16px)}.app-container:has(.expanded){height:auto}@media(max-height:535px){.app-container:has(.game-view-container) .social-link{display:none}}@media(max-height:500px){.app-container:has(.choice-container) .social-link{display:none}}@media(max-width:510px){.app-container:has(.choice-container) .social-link{display:none}}@media(max-height:540px){.app-container{padding:var(--gap) 0;height:auto}}.app-container .choice-squares-container.--3,.app-container:has(.--3){--no-of-tiles:3}.app-container .choice-squares-container.--4,.app-container:has(.--4){--no-of-tiles:4}.title-text{font-size:1.5em;text-align:center;color:var(--font-color2);text-shadow:5px 5px var(--bg-color2);margin-top:var(--gap)}.details-container{height:min-content;width:80vw;background-color:var(--bg-color2);opacity:.8;border-radius:15px;border-color:transparent;padding:25px;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}@media(max-width:992px){.details-container{padding:5px;box-shadow:0 0 0}}.details-text{font-size:.75em;margin:0;transition:all .5s ease;max-height:300px;height:max-content;overflow:hidden}@media(max-width:992px){.details-text{visibility:hidden;height:0;padding:0}.details-text.active{visibility:visible;height:auto;padding:15px;overflow:auto}}.details-toggler{display:none;background-color:var(--bg-color);border:1px solid #245075;border-radius:10px;flex-direction:row;justify-content:space-between;align-items:center;padding:10px;cursor:pointer}@media(max-width:992px){.details-toggler{display:flex}}.details-toggler-title{color:var(--font-color2);font-size:.8em;text-align:center;margin:0 10px}.details-toggler-icon{cursor:pointer;height:24px;width:24px;transition:all .8s ease}.details-toggler-icon.expanded{transform:rotate(180deg)}.choice-container{display:flex;margin-bottom:20px;margin-top:40px}.choice{height:calc(var(--choice-square-size)*9);width:calc(var(--choice-square-size)*4 + var(--choice-square-margin)*3 + 50px);margin:0 var(--choice-margin);display:flex;flex-direction:column;align-items:center;text-decoration:none;padding:10px;border-radius:10px}.choice:active,.choice:focus,.choice:visited{text-decoration:none;color:var(--font-color2)}.choice:hover{background-color:var(--bg-color3)}.choice.--3{margin-left:0}.choice.--4{margin-right:0}@media(max-width:280px){.choice{padding:3px}}.choice-squares-container{display:grid;border-color:transparent;border-radius:5px;padding:2px;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.choice-squares-container.--3{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);margin-top:calc(var(--choice-square-size)*.5 + var(--choice-square-size))}.choice-squares-container.--4{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);margin-top:calc(var(--choice-square-size))}.choice-square{width:var(--choice-square-size);height:var(--choice-square-size);margin:var(--choice-square-margin);background-color:#fff}.choice-square:hover{background-color:#081d45}.choice-title{margin-top:auto;margin-bottom:var(--choice-square-size);text-align:center;text-decoration:none;font-size:20px;color:var(--font-color2)}.choice-title:active,.choice-title:focus,.choice-title:hover,.choice-title:link{text-decoration:none;color:unset}@media(max-width:365px){.choice-title{font-size:15px}}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.footer,footer{position:fixed;left:20px;bottom:20px}.social-link{display:block;height:100%;width:100%;font-size:0}