@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}*,*:after,*:before{box-sizing:border-box}html{font-family:Instrument Sans,sans-serif}body{background-color:#fff;text-align:center;margin:0 auto;max-width:500px;min-height:100vh}header h1 a{text-decoration:none;color:inherit}header h2{font-size:20px;margin:0;color:#181717}#open-menu{text-transform:uppercase;padding:20px;font-weight:700;color:#129800}.toggle-menu{cursor:pointer}#main-nav{z-index:99999999;position:fixed;top:0;left:-100%;width:300px;max-width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;transition:all .5s ease-in-out;background-color:#fff}#main-nav #close-menu{position:absolute;top:20px;right:20px;z-index:9999;cursor:pointer}#main-nav #close-menu svg{width:30px;height:30px}#main-nav #close-menu svg path{fill:#292929;transition:fill .3s ease-in-out}#main-nav #close-menu:hover svg path{stroke:#c70101}#main-nav ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}#main-nav ul li a{text-decoration:none;color:#292929;font-weight:700;font-size:16px;text-transform:uppercase;padding:10px}#main-nav ul li a:hover{color:#129800}#main-nav.active{left:0;background-color:#ffffffe6;box-shadow:0 0 20px -5px #000c}#app{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:50px}#app h2{margin:0}.text{text-align:left;font-size:16px;color:#292929;margin:0 auto;padding:20px}.text-center{text-align:center}.container{display:flex;flex-direction:column;gap:5px;margin:30px auto}#messages.warning{color:#f7630e}#loader{position:fixed;height:100vh;width:100vw;z-index:9999;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center;background-color:#000;color:#fff;flex-direction:column;gap:20px;padding:20px;transition:top .5s ease-in-out}#loader.hidden{top:-100vh}#loader p{font-size:16px;text-transform:uppercase;font-weight:700;max-width:335px}#grid{width:335px;height:335px;display:block;position:relative;opacity:1;transition:opacity .5s ease-in-out}#grid.hidden{opacity:0}#grid .cell{position:absolute;top:0;left:0;width:80px;height:80px;display:flex;justify-content:center;align-items:center;background-color:#e2e0e0;color:#292929;font-weight:700;font-size:10px;text-transform:uppercase;cursor:pointer;transition:all .2s ease-in-out,top .5s ease-in-out,left .5s ease-in-out;order:5}#grid .cell.col-1{left:0}#grid .cell.row-1{top:0}#grid .cell.col-2{left:85px}#grid .cell.row-2{top:85px}#grid .cell.col-3{left:170px}#grid .cell.row-3{top:170px}#grid .cell.col-4{left:255px}#grid .cell.row-4{top:255px}#grid .cell:hover{background-color:#e4e2e2}#grid .cell:active{transform:scale(1.05)}#grid .cell.active{background-color:#3d3d3d;color:#e4e2e2}#grid .cell.error{background-color:#c70101!important;color:#e4e2e2;animation:shake 1s ease-in-out}#grid .cell.checked{color:#fff}#grid .cell.checked[data-group="1"]{background-color:#579c1e;color:#e4e2e2}#grid .cell.checked[data-group="2"]{background-color:#1e559c;color:#e4e2e2}#grid .cell.checked[data-group="3"]{background-color:#c230b6;color:#e4e2e2}#grid .cell.checked[data-group="4"]{background-color:#ecde14}#grid .solution-line{position:absolute;left:0;width:335px;opacity:0;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:16px;text-transform:uppercase;transition:all .5s ease-in-out .5s;color:#fff}#grid .solution-line ul{list-style:none;padding:0;display:flex;gap:5px;font-size:.7em;margin:0;font-weight:700}#games-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin:0 auto;padding:20px;width:100%;max-width:400px}#games-grid .game{width:80px;max-width:25%;height:80px;display:flex;justify-content:center;align-items:center;background-color:#e2e0e0;color:#292929;font-weight:700;font-size:14px;cursor:pointer;transition:all .2s ease-in-out,top .5s ease-in-out,left .5s ease-in-out;order:5}#games-grid .game.done{background-color:#129800;color:#fff}#games-grid .game a{text-decoration:none;color:inherit}#games-grid .game:hover{background-color:#129800;color:#fff;opacity:.8}#open-modal{padding:20px;text-transform:uppercase;font-weight:700;display:none}#submit{width:100%;padding:20px;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:16px;text-transform:uppercase;background-color:#03ad44;color:#fff;cursor:pointer}#submit:hover{background-color:#4dce7e}#submit:active{background-color:#36b466}#modal,#instructions{position:fixed;top:0;left:-100%;width:100%;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;color:#292929}#modal h2,#instructions h2{text-transform:uppercase;font-size:14px}#modal h3,#instructions h3{text-transform:uppercase;font-size:10px}#modal .message,#instructions .message{background-color:#fff;width:335px;display:flex;align-items:center;flex-direction:column;position:absolute;top:50%;left:50%;max-height:100%;overflow:auto;transform:translate(-50%,-50%);color:#000;padding:20px;box-shadow:0 0 20px -5px #fff9}#modal .message .close-modal,#instructions .message .close-modal{position:absolute;top:2px;right:8px;width:20px;height:20px;cursor:pointer}#modal .message .close-modal:after,#modal .message .close-modal:before,#instructions .message .close-modal:after,#instructions .message .close-modal:before{content:"";position:absolute;width:3px;height:20px;background-color:#b11313;left:10px;top:10px;transform:rotate(45deg)}#modal .message .close-modal:before,#instructions .message .close-modal:before{transform:rotate(-45deg)}#modal .message #results,#instructions .message #results{font-size:24px}#modal .message h2,#modal .message h3,#instructions .message h2,#instructions .message h3{text-transform:uppercase;font-size:16px}#modal .message h3,#instructions .message h3{margin-top:20px;font-size:14px}#modal .message #fullstats,#instructions .message #fullstats{margin:30px auto}#modal .message #fullstats #stats,#instructions .message #fullstats #stats{display:flex;justify-content:center;flex-direction:column;list-style:none;padding:0;gap:5px;text-align:left}#modal .message #fullstats #stats li,#instructions .message #fullstats #stats li{display:flex;justify-content:center;align-items:center}#modal .message #fullstats #stats li span,#instructions .message #fullstats #stats li span{display:block;width:100%;flex-grow:1}#modal.active,#instructions.active{top:0;right:0;bottom:0;left:0}#modal .links,#instructions .links{display:flex;gap:5px;align-items:center}#modal .links a,#instructions .links a{text-decoration:none}#modal .links a#whatsapp svg,#instructions .links a#whatsapp svg{width:30px}#modal .links a#telegram svg,#instructions .links a#telegram svg{width:22px}#modal p,#instructions p{text-align:left}#tries{display:flex;justify-content:center;list-style:none;padding:0;gap:20px}#tries li{display:block;position:relative;transition:opacity .5s ease-out 1s;opacity:1;font-size:16px}#tries li:after,#tries li:before{display:block;content:"";background-color:#7e7e7e;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;transition:all .5s ease-in-out}#tries li.explode{opacity:0}#tries li.explode:before{width:30px;height:30px;background-color:#d82626;opacity:0}#tries li.explode:after{background-color:#d82626}.error-container{max-width:500px;margin:0 auto;padding:20px;text-align:center;background:#f8f9fa;border-radius:8px;box-shadow:0 2px 10px #0000001a}.retry-btn{margin-top:20px;padding:10px 20px;background:#3498db;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background .3s}.retry-btn:hover{background:#2980b9}.small{font-size:.8em;color:#6c757d;margin-top:15px}#popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #ddd;padding:5px 10px;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-size:10px;pointer-events:none;border-radius:5px;z-index:99999;opacity:0;box-shadow:0 0 10px -5px #000c;font-weight:700}@media screen and (max-height: 700px){body{align-items:flex-start}}
