*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.mb-10{margin-bottom:2.5rem}.mr-5{margin-right:1.25rem}.mt-10{margin-top:2.5rem}.hidden{display:none}.w-\[500px\]{width:500px}.w-\[700px\]{width:700px}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-lg{border-radius:.5rem}.bg-\[\#2761c3\]{--un-bg-opacity:1;background-color:rgb(39 97 195 / var(--un-bg-opacity))}.bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity))}.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-black{--un-text-opacity:1;color:rgb(0 0 0 / var(--un-text-opacity))}div,canvas{margin:0;padding:0}body,html{width:100vw;min-height:100vh;overflow-x:hidden}#app{width:100%;height:100%}.hideScrollBar{overflow:auto}.hideScrollBar::-webkit-scrollbar{display:none}#canvas{width:100%;height:100%;display:inline-block}.dot-wrap{position:fixed;left:50%;transform:translate(-50%);bottom:10px;height:40px;z-index:99;width:260px;display:flex;color:#eee;justify-content:space-between}.arrow{width:40px;text-align:center;line-height:40px;border-radius:40px}.arrow:hover{background-color:#00000080;cursor:pointer}.dot-name{flex:1;text-align:center;line-height:40px}.page-panel{position:absolute;left:0;top:0;width:100%;height:100%}.page{position:absolute;width:100%;height:100%;left:0;top:0;display:flex;flex-direction:column;align-items:center}.cross{width:30px;height:30px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.toast-right{position:absolute;min-width:120px;padding:16px 8px;right:10px;top:50px;transform:translate(150%);box-sizing:border-box;border-radius:5px;background:#fff;box-shadow:0 2px 12px #0000001a}.gameplay{position:absolute;padding:5px;top:50px;right:10px;transform:translate(150%);background:#fff;border-radius:10px}.game-key-box{padding:5px 10px;display:grid;width:90px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);grid-gap:0px 0px}.game-key{font-size:14px;text-align:center;border-radius:5px;border:1px solid #27c39f}button{position:relative;width:11em;height:4em;outline:none;transition:.1s;background-color:transparent;border:none;font-size:13px;font-weight:700;color:#195480}#clip{--color: #2761c3;position:absolute;top:0;overflow:hidden;width:100%;height:100%;border:5px double var(--color);box-shadow:inset 0 0 15px #195480;-webkit-clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%)}.arrow{position:absolute;transition:.2s;background-color:#2761c3;top:35%;width:11%;height:30%}#leftArrow{left:-13.5%;-webkit-clip-path:polygon(100% 0,100% 100%,0 50%)}#rightArrow{-webkit-clip-path:polygon(100% 49%,0 0,0 100%);left:102%}button:hover #rightArrow{background-color:#27c39f;left:-15%;animation:.6s ease-in-out both infinite alternate rightArrow8}button:hover #leftArrow{background-color:#27c39f;left:103%;animation:.6s ease-in-out both infinite alternate leftArrow8}.corner{position:absolute;width:4em;height:4em;background-color:#2761c3;box-shadow:inset 1px 1px 8px #2781c3;transform:scale(1) rotate(45deg);transition:.2s}#rightTop{top:-1.98em;left:91%}#leftTop{top:-1.96em;left:-3em}#leftBottom{top:2.1em;left:-2.15em}#rightBottom{top:45%;left:88%}button:hover #leftTop{animation:.1s ease-in-out .05s both changeColor8,.2s linear .4s both lightEffect8}button:hover #rightTop{animation:.1s ease-in-out .15s both changeColor8,.2s linear .4s both lightEffect8}button:hover #rightBottom{animation:.1s ease-in-out .25s both changeColor8,.2s linear .4s both lightEffect8}button:hover #leftBottom{animation:.1s ease-in-out .35s both changeColor8,.2s linear .4s both lightEffect8}button:hover .corner{transform:scale(1.25) rotate(45deg)}button:hover #clip{animation:.2s ease-in-out .55s both greenLight8;--color: #27c39f}@keyframes changeColor8{0%{background-color:#2781c3}to{background-color:#27c39f}}@keyframes lightEffect8{0%{box-shadow:1px 1px 5px #27c39f}to{box-shadow:0 0 2px #27c39f}}@keyframes greenLight8{to{box-shadow:inset 0 0 32px #27c39f}}@keyframes leftArrow8{0%{transform:translate(0)}to{transform:translate(10px)}}@keyframes rightArrow8{0%{transform:translate(0)}to{transform:translate(-10px)}}.loader{display:flex;align-items:center}.bar{display:inline-block;width:3px;height:20px;background-color:#27c39f;border-radius:10px;animation:scale-up4 1s linear infinite}.bar:nth-child(2){height:35px;margin:0 5px;animation-delay:.25s}.bar:nth-child(3){animation-delay:.5s}@keyframes scale-up4{20%{background-color:#fff;transform:scaleY(1.5)}40%{transform:scaleY(1)}}