:root{--bg-primary: #fff;--bg-default: #fff;--bg-violeta: #9900ffc0;--bg-rojo:#ff0000c0;--bg-azul: #0000ffc0;--bg-amarillo:#ffff00c0;--bg-blanco:#fff;--bg-magenta:#ff00ffc0;--bg-naranja: #ffa500c0;--bg-content: #efeef1;--primary: darkorchid;--secondary: rgb(175, 231, 175);--max-width: 1200px;--nav-height:76px;--container-height: calc( 100vh - var(--nav-height)*2);--popup-btn-width: 80px;--popup-width: 250px;--radius: 15px;--animation-time: 2.5s;--progress-enable: .5;--popup-enable: 0;--menu-title: 1;--continue-menu: none;--score-menu: none;--menu-title-height: 30px;--bg-pause: rgb(0,0,0,.7);--menu-btn: none;--lila: #6a3c81 }body{height:100vh;background-color:var(--bg-default);transition:background-color 1.5s;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}body,div,p,img{margin:0}*{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.header{display:flex;gap:40px;justify-content:space-between;width:100%;align-items:center;padding:10px}.header,.nav-footer{height:var(--nav-height);box-sizing:border-box}.header,.nav-footer,.container{max-width:var(--max-width);margin-inline:auto}.container{height:100%;margin-inline:auto;z-index:-1}.container{max-height:var(--container-height);overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.nav-footer{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-evenly;width:100%;box-sizing:border-box;gap:40px;gap:10%;padding:15px;border-top:1px solid;border-color:#8080807f}.nav-footer i:hover{cursor:pointer}.nav-hide .nav-footer{opacity:0}.ltBtn i,.midBtn i,.rtBtn i{display:block;height:45px;width:45px;box-sizing:border-box;padding:14px;background:var(--bg-content);border-radius:100%;color:var(--primary);transition:transform 1s,backgruond .5s ease-in-out}.midBtn i{color:#fff;background:var(--primary);scale:1.4}.ltBtn i:hover,.rtBtn i:hover{background:var(--primary);cursor:pointer;opacity:.8;color:#fff;transition:background .5s ease-in-out}.box{width:120px;height:120px;box-sizing:border-box;border:none;filter:drop-shadow(0px 0px 10px rgba(0,0,0,.5))}.box:hover,.user-reply{cursor:pointer}.container,.randbox{display:flex;flex-direction:column;align-items:center;justify-content:space-between}.randbox{height:auto;justify-content:center;min-height:-webkit-fill-available;min-height:100%}.game-container{min-height:100%}.gift{position:absolute;transition:opacity .5s}.progress{width:300px;padding:10px;overflow:hidden;box-shadow:inset -2px 2px 5px #9e9e9e,inset 2px 2px 5px #fff;opacity:.5;transition:opacity .5s;margin-bottom:10vh;box-sizing:border-box}.progress-bar{position:absolute;top:0;left:0;bottom:0;width:0%;background-color:gray;transition:width 1s}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:auto;box-sizing:border-box;z-index:999;background-color:#fff6}.popup{height:180px;width:180px;min-width:var(--popup-width);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--bg-default);border:4px solid;border-radius:15px;padding:10px;color:var(--primary);opacity:0;z-index:1000;box-sizing:border-box}.popup-active .popup{opacity:1}.popup-ico{animation-name:likeHand;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate;width:100px;height:100px}#game-container{height:100%;width:100%}.onload .container{overflow:visible}.onload .randbox{height:100%}input[type=range]{accent-color:var(--primary)}.switch{position:relative;display:inline-block;width:60px;height:34px;scale:.7;transform:translate(10px)}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:var(--primary)}input:focus+.slider{box-shadow:0 0 1px var(--primary)}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.particles-img{animation:particulas 4.1s both infinite;z-index:1;position:absolute;left:70px;width:100px;height:100px;opacity:.7;scale:1.5;opacity:0}#menuDots{fill:var(--primary);color:var(--primary);position:absolute;top:10px;right:0;display:var(--menu-btn);cursor:pointer;padding:16px;font-size:25px}#menuDots:hover{fill:#000;color:#000}.nav-hide .nav-footer{visibility:hidden}@media (max-width: 1200px){.container{margin-inline:5px}}@media (max-width: 600px){#menu .tutorial-menu{width:89vw!important}}@keyframes __particles-fx{0%{opacity:0}10%{opacity:.1;z-index:1}20%{opacity:0}30%{opacity:.3;z-index:-1}40%{opacity:0}50%{opacity:.5;z-index:1}60%{opacity:0}70%{opacity:.7;z-index:-1}80%{opacity:0}90%{opacity:.9;z-index:1}to{opacity:0}}@keyframes caida-randbox{0%{top:calc(-50vh - 100px)}50%{top:calc(70vh - 100px)}to{top:calc(50vh - 100px);transform:rotate(360deg)}}@keyframes lanzar-box-1{0%{top:0;opacity:1}50%{top:-30vh;opacity:1}to{top:0;transform:rotate(360deg)}}@keyframes likeHand{0%,25%,55%,85%,to{animation-timing-function:ease-out;transform:translateZ(0)}41%,44%{animation-timing-function:ease-in;transform:translate3d(0,-80px,0) scale3d(1,1.6,1)}70%{animation-timing-function:ease-in;transform:translate3d(0,-20px,0)}90%{transform:translate3d(0,-4px,0)}}@keyframes hu__hu__{50%{transform:translateY(40px)}}.bounceOutTop{animation-name:bounceOutTop;animation-iteration-count:1}@keyframes bounceOutTop{18%,33%,48%{opacity:1}18%{transform:translate3d(0,27px,0)}33%{transform:translate3d(0,-12px,0)}48%{transform:translate3d(0,8px,0)}to{opacity:0;transform:translate3d(0,-300%,0)}}#menu .box{opacity:0;position:relative;z-index:1;top:0;top:calc(50vh - 100px);left:0;right:0;animation-name:defaultBox;animation-duration:var(--animation-time);animation-iteration-count:initial;animation-direction:alternate}#menu .onload .box{opacity:1;animation:caida-randbox var(--animation-time)!important}#menu .onload .popup{opacity:0}#menu .controls-submenu img{height:32px;width:32px}#menu .controls-submenu img{scale:1.7}#menu .range span{width:25px;display:inline-block}#menu .onStartGame .gift{display:none!important}#menu .main-menu,#menu .options-menu,#menu .help-menu,#menu .controls-submenu,#menu .resumen-submenu,#menu .go-menu{display:none}#menu .controls-submenu,#menu .options-menu,#menu .resumen-submenu{width:340px}#menu .main-menu-active .main-menu,#menu .options-menu-active .options-menu,#menu .help-menu-active .help-menu,#menu .resumen-submenu-active .resumen-submenu,#menu .controls-submenu-active .controls-submenu,#menu .go-menu-active .go-menu{display:block}#menu .popup-active .nav-footer{opacity:1}#menu .main-menu-active .nav-footer{opacity:0!important}#menu .menu{text-align:center;padding:0;margin:0;max-height:calc(100vh - var(--nav-height)* 2 - calc(var(--menu-title-height) * var(--menu-title)) - 100px);overflow:auto}#menu .menu li{list-style:none;font-size:20px;margin:19px;display:flex;justify-content:space-between;align-items:center}#menu .menu li:hover{cursor:pointer;font-weight:bolder}#menu .menu .fi{margin-right:10px}#menu .popup{text-align:center;height:fit-content}#menu .main-menu .menu li{justify-content:center!important;text-align:center}#menu .resumen-active .popup{top:70vh}#menu .menu .continue-btn,#menu .menu .exit-btn{display:none}#menu .score-btn{display:var(--score-menu)!important}#menu .menu-options-item{display:flex;gap:10px}#menu .popup{width:auto}#menu .nav-footer{opacity:0}#menu .tutorial-menu{list-style:auto;display:block;width:520px}#menu .tutorial-menu ul{padding-inline-end:0;padding-inline-start:0;margin-inline-start:40px;margin-inline-end:20px}#menu .tutorial-menu li{display:revert;list-style:auto;text-align:-webkit-auto;margin:10px 0;max-width:520px}#menu .tutorial-menu .fi{margin:10px;bottom:-4px;position:relative}#menu .separador{font-weight:bolder}#menu .help-menu{min-width:300px}#menu .close-btn{position:fixed;border-radius:20px;padding:10px;border:3px solid;left:-4.5%;top:-4.5%;width:15px;height:15px;background:var(--primary);color:#fff}#menu .close-btn:hover{background:#fff;color:var(--primary);cursor:pointer}#menu .menu-title{margin-bottom:10px;margin-top:0;height:var(--menu-title-height)}#menu .menu-title i{transform:translate(-10px,5px);position:relative;display:inline-block}#menu .menu-group{margin-left:16px;transition:height 1s ease}.collapse{overflow:auto;height:auto;transition:height 1s ease}.expande,.hide{height:0;overflow:hidden;transition:height 1s ease}#menu .menu-group-title{position:relative;text-align:left;font-size:20px;font-weight:700;margin-inline:3px}#menu #menuDots{display:none}#menu .menu-pause .continue-btn,#menu .menu-pause .exit-btn{display:block}#menu .menu-pause .play-btn,#menu .menu-pause .options-btn{display:none}#menu .button-menu-item{font-size:2px}#menu .menu-pause .popup-ico{animation-name:heartbeat}#menu .menu-pause.main-menu-active .popup:before{font-weight:bolder;position:relative;background:#fff;width:fit-content;margin-inline:auto;font-size:22px;padding:0 10px;letter-spacing:3pt;content:"PAUSE";left:5px;top:-25px}.tutorial-from-intro .tutorial-tips,.tutorial-from-intro .tutorial-quiz,.tutorial-from-quiz .tutorial-intro{display:none}#intro .box{position:relative;z-index:1;top:0;left:0;right:0;animation-name:defaultBox;animation-duration:var(--animation-time);animation-iteration-count:initial;animation-direction:alternate}#intro .box:hover{cursor:pointer}#intro .box-anim .box{animation-name:lanzar-box-1}#intro .continue .box{animation-name:defaultAnimation!important}#intro .onload .box{animation:bounce-in-top 1.1s both}#intro .progress{position:sticky;border-radius:10px;opacity:0}#intro .playGame .progress{opacity:var(--progress-enable)}#intro .gift{width:80px;height:80px;margin-top:20px;visibility:hidden}#intro .onload .progress,#intro .endgame .progress,#intro .endgame .box{opacity:0}#intro .onload .gift,#intro .endgame .gift{visibility:hidden!important}#intro .endgame .box{animation-duration:.5s;animation-name:scale-out-center!important}#intro .box-up .gift{visibility:visible}#intro .box-down .gift{visibility:hidden}#intro .box-up .randbox{height:100%}#intro .box-up .container{overflow:visible}#intro .onload .nav-footer{opacity:0}#intro .onStartGame .box{-webkit-animation:bounce-in-top 1.1s both;animation:bounce-in-top 1.1s both}#intro .nav-footer{opacity:0}#intro .center-fix{display:flex;justify-content:center}#quiz .popup-btn{opacity:1;display:block;position:absolute;background-color:#fff;border-radius:100%;bottom:-15px;left:calc(50% - var(--popup-btn-width)/2);width:var(--popup-btn-width);height:var(--popup-btn-width);bottom:-40px;font-size:60px;transition:scale .3s;opacity:0}#quiz .popup-btn:hover{cursor:pointer;scale:1.1}#quiz .user-reply,.popup{text-align:center;transition:opacity .7s;z-index:1}#quiz .btnContainer,.heart-bar{flex-direction:row}#quiz .heart-bar{display:flex;gap:10px;justify-content:center;color:red;transition:color 4s}#quiz .user-reply{border-radius:100px;width:125px;position:relative;font-size:100px;opacity:.6;margin:0;padding:56px 0 165px}#quiz .popup-ico{animation-name:likeHand;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate;width:100px;height:100px}#quiz .box{display:block;z-index:initial;margin-inline:auto}#quiz .points{position:absolute;left:50%;transform:translate(-50%,-50%);opacity:0;top:30px;font-size:30px;font-weight:700;transition:opacity .5s ease-in-out;z-index:1000}#quiz .heart{width:30px}#quiz .progress{padding:5px;position:absolute;width:100%;border-radius:unset;top:0;left:0}#quiz .progress-bar{background-color:green;width:var(--progress-width)}#quiz #game-container:hover{cursor:pointer}#quiz .user-reply{z-index:1001;transition:z-index 3s;margin-inline:auto}#quiz .box-container{width:100%}#quiz .onload .box{-webkit-animation:bounce-in-fwd 1.1s both;animation:bounce-in-fwd 1.1s both}#quiz .user-wins .popup-btn,#quiz .user-loses .popup-btn{opacity:1}#quiz .user-restart-game .heart-bar{opacity:1!important}#quiz .user-restart-game .popup-btn,#quiz .user-restart-game .points,#quiz .user-restart-game .user-reply{opacity:0!important}#quiz .user-wins .progress-bar{width:100%!important}#quiz .popup-active .user-reply{z-index:1}#quiz .popup-active .popup-ico{animation-iteration-count:infinite;transition:animation-iteration-count .5s}#quiz .popup-container{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute}#quiz .popup-active .popup-container{position:fixed;top:50%;left:50%;width:100%;height:100%;pointer-events:auto;box-sizing:border-box;z-index:999;background-color:#fff6;background-color:#ffffffb3;transform:translate(-50%,-50%)}#quiz .user-loses .points,#quiz .user-loses .heart-bar,#quiz .user-wins .heart-bar,#quiz .user-wins .points{opacity:0}#quiz .user-loses .popup,#quiz .user-wins .popup{opacity:1}#quiz .user-reply-succeeded .points{color:green;opacity:1}#quiz .user-reply-succeeded .popup,#quiz .user-reply-failed .popup{opacity:1}#quiz .user-reply-failed .points{color:red;opacity:1}#quiz .user-reply-failed .heart-bar{color:#000}#quiz .user-restart-game .popup{opacity:1}.respUser-clicker,.box-clicker{width:100%}#quiz .points:after{content:"";width:35px;height:35px;position:absolute;background-image:url(/src/assets/img/ui/coin.png);background-repeat:no-repeat;display:inline-block;left:-45px}#quiz .user-loses .particles-img,#quiz .user-reply-failed .particles-img{opacity:0!important}#score .focus{display:block!important}#score .randbox{width:100%;gap:10px;flex-wrap:nowrap;flex-direction:column;align-items:normal;justify-content:center}#score .gift{position:relative;height:50px;width:50px;opacity:1;z-index:1;top:0;left:0;right:0;animation-name:likeHand;animation-duration:3s;animation-iteration-count:3;animation-direction:alternate;-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both}#score .randbox .onload{animation-name:none}#score .box:hover{cursor:pointer}#score .gift-container{display:flex;flex-direction:row;flex-wrap:wrap;border:1px solid var(--primary);padding:10px 15px;justify-content:space-between;align-items:center;border-radius:20px;opacity:0;transition:opacity 1s}#score .score-bar{display:flex;gap:10px}#score .score-item{height:35px}#score #menuDots{display:none}#about .randbox{align-items:center}#about .title{opacity:.8;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}#about .social{font-size:40px}#about .social:hover{cursor:pointer}#about .descrip{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;width:200px;text-align:center;margin-bottom:60px}#about .about-container{display:flex;flex-direction:column;align-items:center}#about .onload .container{overflow-y:visible}#about #menuDots{display:none}