@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@500&display=swap);*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--font-main:"Poppins",sans-serif;--mono-font:"Chivo Mono",monospace;--fs-xl:3rem;--fs-600:2rem;--fs-500:1.5rem;--fs-400:1rem;--fs-200:.6rem;--fw-regular:400;--fw-bold:700;--very-dark-color:#161616;--dark-color:#001635;--semi-dark-color:#4e709f;--light-color:#edfeff;--medium-color:#a2c9ff;--red-color:#8c0000;--width-bar:0}body,button,h1,h2,h3,h4,h5,h6,input,textarea{color:#161616;color:var(--very-dark-color);font-family:Poppins,sans-serif;font-family:var(--font-main);font-size:1rem;font-size:var(--fs-400);font-weight:400;font-weight:var(--fw-regular)}button,input{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer}ol,ul{list-style:none}a{color:inherit;text-decoration:none}img{max-width:100%}body{background-color:#edfeff;background-color:var(--light-color);color:#001635;color:var(--dark-color)}#root,body{height:100%;width:100%}.main-game{max-width:720px;width:90%}.table{grid-gap:5px;display:grid;gap:5px;grid-template-columns:repeat(4,1fr);position:relative;width:100%}.table-win{background-color:#8c0000;background-color:var(--red-color)}.square-win,.table-win{pointer-events:none;position:absolute;z-index:999}.square-win{stroke:#8c0000;stroke:var(--red-color);stroke-width:100px;-webkit-transform:scale(1.1);transform:scale(1.1)}@-webkit-keyframes square{0%{stroke-dashoffset:1202px;stroke-dasharray:1202px}to{stroke-dashoffset:2404px;stroke-dasharray:1202px}}@keyframes square{0%{stroke-dashoffset:1202px;stroke-dasharray:1202px}to{stroke-dashoffset:2404px;stroke-dasharray:1202px}}.square{aspect-ratio:1/1;background-color:#a2c9ff;background-color:var(--medium-color);border-radius:5px;position:relative;width:100%}.square:has(.piece:not(.placed)){cursor:pointer}.side-table{grid-gap:5px;display:grid;gap:5px;grid-template-columns:repeat(2,1fr);width:100%}.side-square{aspect-ratio:1/1;background-color:#4e709f;background-color:var(--semi-dark-color);border-radius:5px;position:relative;width:100%}.progress-wrapper{align-items:center;display:flex;flex-direction:column;justify-content:center;margin:0 auto;max-width:500px;width:80%}.stage{font-size:2rem;font-size:var(--fs-600);font-weight:700;font-weight:var(--fw-bold);position:relative;text-transform:uppercase}@-webkit-keyframes stage{0%{top:0}50%{top:500px}to{top:0}}@keyframes stage{0%{top:0}50%{top:500px}to{top:0}}.progress{align-items:center;display:flex;flex-direction:row;gap:.25rem;justify-content:center;margin-bottom:.5rem;width:70%}.bar{background:#a2c9ff;background:var(--medium-color);border-radius:20px;display:inline-block;height:20px;overflow:hidden;position:relative;width:100%}.bar-fill{height:100%}.side-table:not(.blocked) .side-square:has(.piece):hover{cursor:pointer}.side-table:not(.blocked) .side-square:hover>.piece{opacity:.5}.piece{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.piece,.piece-grab{aspect-ratio:1/1;position:absolute}.piece-grab{width:50px}.pierced:after{aspect-ratio:1/1;border-radius:5px;content:"";left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:50%}.side-square .pierced:after{background-color:#4e709f;background-color:var(--semi-dark-color)}.square .pierced:after{background-color:#a2c9ff;background-color:var(--medium-color)}.pierced.circle:after{border-radius:50%}.dark{background-color:#161616;background-color:var(--very-dark-color)}.light{background-color:#edfeff;background-color:var(--light-color)}.circle{border-radius:50%}.small{width:50%}.large{width:80%}.canva{position:absolute;z-index:999}.canva,.popup{height:100%;left:0;top:0;width:100%}.popup{align-items:center;background-color:rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:center;position:fixed;z-index:9999}.turn{color:#fff;font-size:3rem;font-size:var(--fs-xl);font-weight:700;font-weight:var(--fw-bold)}.leftToRight{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-name:leftToRight;animation-name:leftToRight;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-user-select:none;user-select:none}.fade{-webkit-animation-duration:1.25s;animation-duration:1.25s;-webkit-animation-name:fade;animation-name:fade;-webkit-animation-timing-function:ease;animation-timing-function:ease}.bttn,.fade{transition:opacity .2s ease}.bttn{background-color:#4e709f;background-color:var(--semi-dark-color);border-radius:5px;color:#fff;flex:1 1;font-weight:700;font-weight:var(--fw-bold);padding:.5em .75em}.bttn.light{background-color:#001635;background-color:var(--dark-color)}.bttn-wrapper{display:flex;gap:.75rem;width:100%}.bttn.blocked{background-color:#001635;background-color:var(--dark-color);cursor:not-allowed;opacity:.75}.bttn:hover{opacity:.75}.arrow-wrapper{height:20px;width:40%}.arrow{background-color:#fff;height:100%;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.arrow.down{-webkit-clip-path:polygon(50% 100%,0 0,100% 0);clip-path:polygon(50% 100%,0 0,100% 0)}.arrow.up{-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%)}.arrow.up:hover{cursor:pointer;-webkit-transform:translateY(-5px) scale(1.2);transform:translateY(-5px) scale(1.2)}.arrow.down:hover{cursor:pointer;-webkit-transform:translateY(5px) scale(1.2);transform:translateY(5px) scale(1.2)}.box{align-items:center;gap:.5rem;left:50%;max-width:400px;position:absolute;transition:top .2s ease;width:90%}.box,.box-content{display:flex;flex-direction:column;justify-content:center}.box-content{background-color:#fff;border-radius:10px;gap:1.5rem;padding:1.5em;width:100%}.box header{align-items:center;display:flex;flex-direction:column}.box h2{font-size:2rem;font-size:var(--fs-600);font-weight:700;font-weight:var(--fw-bold)}.box-rects{display:flex;flex-direction:column;gap:5px}.box-rect{background-color:#dfdfdf;border-radius:5px;display:flex;flex-direction:row;justify-content:space-between;padding:.75em}.class{font-weight:700;font-weight:var(--fw-bold)}.main-menu{gap:2rem;margin:0 auto;width:90%}.main-menu,.section-menu{display:flex;flex-direction:column}.section-menu{align-items:center;gap:.75rem}.input-size{border:4px solid #a2c9ff;border:4px solid var(--medium-color);font-size:1.5rem;font-size:var(--fs-500);padding:5px;text-align:center;width:100px}.header-menu,.option-wrapper{align-items:center;display:flex;flex-direction:column;justify-content:center;position:relative}.option-wrapper{padding-bottom:1rem}.option-wrapper:before,.option-wrapper:last-child{border-bottom:4px dashed #a2c9ff;border-bottom:4px dashed var(--medium-color)}.option-wrapper:before{content:"";height:4px;position:relative;top:1rem;width:300px;z-index:-999}.option-wrapper>h3{background-color:#edfeff;background-color:var(--light-color);padding:.2rem}.radio-input,.switch-checkbox,.zen-checkbox{display:none}.label{cursor:pointer;gap:.4rem}.bttns-wrapper,.label{align-items:center;display:flex;justify-content:center}.bttns-wrapper{flex-direction:row;gap:.5rem;width:250px}.bttns-wrapper>.bttn{flex:1 1}.bttn.active{background-color:#edfeff;background-color:var(--light-color);box-shadow:inset 0 0 0 4px #4e709f;box-shadow:inset 0 0 0 4px var(--semi-dark-color);color:#4e709f;color:var(--semi-dark-color)}.switch-wrapper{grid-gap:5px;display:grid;gap:5px;grid-template-columns:1fr auto 1fr}.switch{background-color:#4e709f;background-color:var(--semi-dark-color);border-radius:5px;grid-column:2;height:30px;position:relative;transition:background .2s ease;width:60px}.switch:hover{background-color:#4e709fc8}.switch:before{content:"OFF";left:7px}.switch:after,.switch:before{color:#edfeff;color:var(--light-color);font-size:.6rem;font-size:var(--fs-200);pointer-events:none;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.switch:after{content:"ON";right:7px}.info{cursor:pointer;position:relative}.info-container{background-color:#001635;background-color:var(--dark-color);color:#edfeff;color:var(--light-color);padding:.2em .4em;top:0;transition:opacity .2s ease;-webkit-user-select:none;user-select:none;width:-webkit-max-content;width:max-content}.info-container,.switch-ball{border-radius:5px;pointer-events:none;position:absolute}.switch-ball{aspect-ratio:1/1;background-color:#edfeff;background-color:var(--light-color);height:20px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:all .2s ease}.switch-ball:not(.active){left:5px;right:calc(100% - 5px)}.switch-ball.active{left:100%;right:5px;-webkit-transform:translate(calc(-100% - 5px),-50%);transform:translate(calc(-100% - 5px),-50%)}.switch-label{cursor:pointer}.score-wrapper{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(2,1fr);margin:0 auto;width:50%}.score-player{background-color:#a2c9ff;background-color:var(--medium-color);border-radius:5px;display:flex;gap:20px;justify-content:space-between;padding:.5em .75em}.score{font-weight:700;font-weight:var(--fw-bold)}.score-container{align-items:center;display:flex;flex-direction:row;gap:.5em}.player-abbr{display:none}.score-player.player-turn{color:#edfeff;color:var(--light-color);position:relative}.player-turn:before,.score-player.player-turn{background-color:#001635;background-color:var(--dark-color)}.player-turn:before{aspect-ratio:1/1;bottom:-5px;content:"";display:block;left:50%;position:absolute;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);width:20px;z-index:-1}.logo-svg{width:400px}.logo-svg>path,.svg-footer>path{fill:#001635;fill:var(--dark-color)}.svg-footer{--size:35px;cursor:pointer}.svg-footer,.svg-label{height:var(--size);width:var(--size)}.svg-label{--size:30px}.footer{align-items:end;bottom:20px;gap:.75rem;justify-content:end;right:20px}.footer,.how2play-popup{display:flex;position:fixed}.how2play-popup{align-items:center;background-color:#001635;background-color:var(--dark-color);height:100%;justify-content:center;left:0;opacity:.75;top:0;width:100%;z-index:9999}@media (min-width:521px){#root{display:flex;flex-direction:column;gap:2rem}#root,.main-game{align-items:center;justify-content:center}.main-game{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 50% 1fr}.info-container:before{background-color:#001635;background-color:var(--dark-color);-webkit-clip-path:polygon(100% 0,0 0,100% 100%);clip-path:polygon(100% 0,0 0,100% 100%);content:"";height:10px;left:-5px;position:absolute;top:0;width:10px}.info-wrapper{position:relative}.info-container{left:25px}}@media (max-width:520px){#root{padding:1rem 0}.main-menu{height:100%;justify-content:center}.main-game{align-items:center;display:flex;flex-direction:column;gap:1rem;margin:1em auto 1.5em;width:clamp(50%,40vh,90%)}.side-table{grid-template-columns:repeat(4,1fr);width:80%}.progress{width:80%}.bar{height:10px}.info-container{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.score-wrapper{margin-bottom:2rem}.player-abbr{display:block}.player{display:none}}@-webkit-keyframes leftToRight{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}20%{-webkit-transform:translateX(0);transform:translateX(0)}80%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes leftToRight{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}20%{-webkit-transform:translateX(0);transform:translateX(0)}80%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@-webkit-keyframes fade{0%{opacity:0;pointer-events:none}80%{opacity:0;pointer-events:none}to{opacity:100%;pointer-events:all}}@keyframes fade{0%{opacity:0;pointer-events:none}80%{opacity:0;pointer-events:none}to{opacity:100%;pointer-events:all}}@-webkit-keyframes fillBar{0%{-webkit-transform:translateX(0);transform:translateX(0);width:0;width:var(--width-bar)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:100%}to{-webkit-transform:translateX(500px);transform:translateX(500px);width:0}}@keyframes fillBar{0%{-webkit-transform:translateX(0);transform:translateX(0);width:0;width:var(--width-bar)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:100%}to{-webkit-transform:translateX(500px);transform:translateX(500px);width:0}}
/*# sourceMappingURL=main.cc86adb8.css.map*/