@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Bungee+Hairline&display=swap";*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Orbitron,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;background:#000;display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh;text-shadow:-2px -2px 0 black,1px -1px 0 black,-1px 1px 0 black,1px 1px 0 black;overflow:hidden;will-change:opacity;animation:fadeIn 2.5s ease-in-out 1}button{color:#fff;font-family:Orbitron,sans-serif;font-optical-sizing:auto;font-weight:400;padding:.4rem 1rem;border-radius:0;outline:1px solid white;transition:box-shadow .3s;margin-bottom:1rem;cursor:pointer;background:linear-gradient(to top,#4d575db6,#0d0d0daf);width:100%;text-transform:uppercase}button:last-child{margin-bottom:0}button:hover{animation:defaultButtonHover .8s ease-in-out infinite}@keyframes defaultButtonHover{0%,to{outline:2px solid white}50%{outline:5px double white}}button:active{color:#000;background:linear-gradient(to top,#c2c2c2,#fafafa);animation:buttonActive .1s ease-in-out 1;outline:1px solid rgb(32,32,32)!important}.app{display:flex;flex-direction:column;align-items:center;height:70vh;width:70vh;overflow:visible;border:2px solid #eeefea;color:#fff;box-shadow:0 0 10px #ffffff81;animation:fadeInApp .5s ease-in-out 1}.background-menu{background-size:cover;overflow:visible;bottom:0;z-index:-1;width:88vh;height:94vh;position:absolute;bottom:calc(50% - 47vh - 4px);right:calc(50% - 44vh + 4px)}.empty-board{height:70vh;width:70vh;border:1px solid #eeefea;z-index:-1;animation:sway-square 30s ease-in-out infinite;position:absolute}@keyframes sway-square{0%{transform:rotate(0)}33%{transform:rotate(8deg)}66%{transform:rotate(-8deg)}to{transform:rotate(0)}}.player-name-setup__title h1{font-size:1.8rem;margin:-50px 0 0;color:#fff;text-align:center;animation:fadeInSize .5s ease-in-out 1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes fadeInSize{0%{opacity:0}to{opacity:1}}.rules-container{display:flex;justify-content:center;align-items:center;min-height:100vh}.rules-board{background-color:#fff;border-radius:8px;padding:2rem;max-width:800px;box-shadow:0 4px 8px #0000001a}.rules-board h2{text-align:center;color:#333}.rules-board h3{margin-top:1rem;color:#555}.rules-board p,.rules-board ol{color:#666}.board-button-container{display:flex;flex-direction:row;justify-content:space-between;width:70vh;margin-top:1rem;position:relative;top:46vh;left:0;padding:0 10px}.board-button-container .menu-button-container{display:flex;align-self:flex-start}.board-button-container .undo-container{display:flex;align-self:flex-end}.undo-container{display:flex;z-index:2;position:relative;align-self:flex-end}.undo-container button{padding:.4rem 1rem;font-size:16px;cursor:pointer;color:#fff;border:1px solid white;border-radius:5px;background:linear-gradient(to top,#4d575db6,#0d0d0daf);transition:background .3s,color .3s,outline .3s,box-shadow .3s}.undo-container button:hover{animation:buttonHover .8s ease-in-out infinite}.undo-container button:active{background:linear-gradient(to top,#c2c2c2,#fafafa);color:#000;outline:1px solid rgb(32,32,32);animation:buttonActive .1s ease-in-out 1}.undo-container button:disabled{background-color:#ccc;cursor:not-allowed}@media (max-width: 415px){.undo-container button{font-size:.7rem!important;padding:.4rem .6rem!important}}@media (max-width: 100vh){.board-button-container{width:70vw;position:absolute;top:calc(46vh + 33vw);left:15vw}.player-name-setup__title h1{font-size:4.5vw;margin:-8vw 0 2vw;color:#fff;text-align:center}}@media screen and (max-width: 100vh){body{height:100vh;overflow:hidden}.app{height:70vw;width:70vw}.background-menu{opacity:1;animation:fadeInAfter 1s ease-in-out 1;width:88vw;height:94vw;top:calc(50vh - 46.6vw);left:5.5vw}@keyframes fadeInAfter{0%{opacity:0;transform:scale(0)}35%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.empty-board{height:70vw;width:70vw}.rules-container{min-height:100vw}.board{height:70vw;width:70vw}.menu-modal-content:before{top:18vw;left:19.5vw}}.cell{width:calc(70vh/8/sqrt(2));height:calc(70vh/8/sqrt(2));background:linear-gradient(45deg,#adb4b770,#24242c);display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;margin-top:2.4vh;margin-left:2.4vh;transform:rotate(-45deg);position:relative;right:1vh;border:1px solid #fbfdfe;transition:transform .2s ease-in-out}.cell.falling{animation:fall .4s ease-out forwards;will-change:transform,background-color,outline,box-shadow}@keyframes fall{0%{background-color:#fcfefcd0;outline:4px solid #fcfefc;box-shadow:0 0 100px #fcfefc;transform:scale(1.3),rotate(-45deg)}to{background-color:transparent;outline:0px solid #fcfefc;box-shadow:0 0 #fcfefc;transform:scale(1),rotate(-45deg)}}.cell:nth-child(2n){background:linear-gradient(45deg,#adb4b770,#24242c)}.cell:nth-child(odd){background:linear-gradient(45deg,#adb4b770,#3a424d)}@keyframes cellAnimaitonX{0%{background:linear-gradient(45deg,#adb4b770,#24242c);transform:scale(1),rotate(-45deg),translateY(0);box-shadow:0 0 100px #fff}10%{transform:translateY(20px);box-shadow:0 0 200px #fff}50%{transform:scale(.9);background:#fff}to{background:linear-gradient(0deg,#adb4b770,#1f1fb4);transform:scale(1.2) rotate(0),translateY(0);box-shadow:0 0 #fff}}@keyframes cellAnimaitonO{0%{background:linear-gradient(45deg,#adb4b770,#24242c);transform:scale(1),rotate(-45deg),translateY(0);box-shadow:0 0 100px #fff}10%{transform:translateY(20px);box-shadow:0 0 200px #fff}50%{transform:scale(.9);background:#fff}to{background:linear-gradient(0deg,#adb4b770,#b91818);transform:scale(1.2) rotate(0),translateY(0);box-shadow:0 0 #fff}}.cell.highlightedX:after,.cell.highlightedO:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;animation:backgroundFadeIn 1.2s ease-out forwards}.cell.highlightedX{transform:rotate(-45deg);box-shadow:0 0 150px #afafff52;outline:2px solid #1f1fb4}.cell.highlightedX:after{background:radial-gradient(circle,#adb4b770,#1f1fb4)}.cell.highlightedO{transform:rotate(-45deg);box-shadow:0 0 150px #ffa4a467;outline:2px solid #b91818b4}.cell.highlightedO:after{background:radial-gradient(circle,#adb4b770,#b91818b4)}@keyframes backgroundFadeIn{0%{opacity:0}to{opacity:.4}}.cell:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:none;z-index:-1}.cell.X:after,.cell.O:after{background:none}.cell.X{background:linear-gradient(0deg,#adb4b770,#1f1fb4);animation:cellAnimaitonX .2s ease-out forwards;transform:scale(1.2);box-shadow:0 0 #1f1fb4;outline:0px solid #1f1fb4}.cell.O{background:linear-gradient(0deg,#adb4b770,#b91818);transform:scale(1.2);animation:cellAnimaitonO .2s ease-out forwards;box-shadow:0 0 #b91818b4;outline:0px solid #b91818b4}@media screen and (max-width: 100vh){.cell{width:calc(70vw/8/sqrt(2));height:calc(70vw/8/sqrt(2));margin-top:2.4vw;margin-left:2.4vw;right:1vw}}.column{display:flex;flex-direction:column-reverse;margin:1px;position:relative}.column:hover{cursor:pointer}.column:hover:after{content:"";position:absolute;top:1vh;left:4.25vh;width:.5vh;height:.5vh;background-color:#fbfcfe;border-radius:50%;box-shadow:0 0 20px 10px #fbfcfe;z-index:1;animation:scaleIn .5s ease-in-out;opacity:.9}.column:active:after{box-shadow:0 0 10px 10px #fbfcfe;outline:7px double #fbfcfe;animation:clickedEffect .5s ease-in-out}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes clickedEffect{0%{transform:scale(1);opacity:.9;outline:6px double #fbfcfe}25%{transform:scale(.9)}50%{transform:scale(2.5);opacity:.7;outline:1px double #fbfcfe}to{transform:scale(1);opacity:.9;outline:7px double #fbfcfe}}@media screen and (max-width: 100vh){.column:hover:after{top:1vw;left:4.25vw;width:.5vw;height:.5vw}}.board{display:flex;flex-direction:row;height:70vh;width:70vh;justify-content:center;align-items:center;position:absolute;top:48.2vh;left:50vw;transform:translate(-50%,-50%)}.board.locked{pointer-events:none}.player-turn-display{position:absolute;display:flex;justify-content:center;align-items:center;top:41vh}.player-container{display:flex;width:18vh;position:relative;height:18vh;transition:box-shadow .1s ease-in}.player{width:9vh;height:18vh;display:flex;justify-content:center;align-items:center;position:absolute;transition:transform .1s ease-in;z-index:0}.player-x{background:url(/img/right-peice-player-display.png) center center no-repeat;background-size:contain;left:0;z-index:0}.player-o{background:url(/img/left-peice-player-display.png) center center no-repeat;background-size:contain;right:0;z-index:0}.left-active .player-x{transform:translate(95%)}.left-active .player-o{transform:translate(-95%)}.right-active .player-x{transform:translate(5%)}.right-active .player-o{transform:translate(-5%)}.player-container.left-active:after{content:"";width:0vh;height:0vh;position:absolute;box-shadow:0 0 10vh 10vh #0000ff3a;z-index:-1;top:9vh;left:9vh;border-radius:50%;transition:box-shadow .5s ease}.player-container.right-active:after{content:"";width:0vh;height:0vh;position:absolute;box-shadow:0 0 10vh 10vh #ff00003a;z-index:-1;top:9vh;left:9vh;border-radius:50%;transition:box-shadow .5s ease}@media screen and (max-width: 100vh){.player-turn-display{top:calc(50vh - 9vw)}.player-container{width:18vw;height:18vw}.player{width:9vw;height:18vw}.player-container.left-active:after{width:0vw;height:0vw;box-shadow:0 0 10vw 10vw #0000ff3a;top:9vw;left:9vw}.player-container.right-active:after{width:0vw;height:0vw;box-shadow:0 0 10vw 10vw #ff00003a;top:9vw;left:9vw}}.game-over{text-align:center;margin-top:20px}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#3b3b3b(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#3b3b3b;padding:20px;border-radius:8px;box-shadow:0 4px 8px #fff3;text-align:center;width:300px;font-size:1.2rem}.modal-content button{background-color:#9a9a9a;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;transition:background-color .3s ease,transform .2s;box-shadow:0 0 8px #ffffff4d;font-family:Orbitron,sans-serif;font-size:1.2rem;margin-top:10px;width:100%}.modal-content button:hover{background-color:#eeefea;color:#0d0d0d;transform:scale(1.05);box-shadow:0 0 12px #ffffff80}:root{--animation-duration: .6s;--outer-frame-height-width: 34.2vh}.win-animation-container{display:flex;justify-content:center;align-items:center;height:100%;perspective:1000px;z-index:2;position:fixed;left:calc(50vw - calc(var(--outer-frame-height-width) / 2));top:calc(calc(var(--outer-frame-height-width) / 2) - calc(var(--outer-frame-height-width) / 2))}.outer-frame{width:var(--outer-frame-height-width);height:var(--outer-frame-height-width);position:relative;transform-style:preserve-3d;animation:flipOuterFrame var(--animation-duration) ease-in-out forwards}.outer-frame__back{position:absolute;width:100%;height:100%;background:linear-gradient(-45deg,#adb4b770,#24242c);display:flex;justify-content:center;align-items:center;overflow:visible;backface-visibility:hidden}.inner-frame-rotate{transform:rotate(45deg);width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative;transform-style:preserve-3d;overflow:visible}.inner-frame{opacity:0;width:80%;height:80%;position:relative;transform-style:preserve-3d;animation:flipInnerFrame var(--animation-duration) .3s ease-in-out forwards}.inner-frame__front,.inner-frame__back{position:absolute;width:100%;height:100%;backface-visibility:hidden}.inner-frame__front{opacity:.6;background:#00f}.inner-frame__back{background:linear-gradient(45deg,#adb4b770,#24242c)}.winner-o .inner-frame__front{background:red}.winner-x .inner-frame__front{background:#00f}.winner-tie .inner-frame__front{background:gray}@keyframes flipOuterFrame{0%{transform:scaleX(4) rotateX(0) rotate(45deg);opacity:0;border:0px solid white;box-shadow:0 0 #fff}50%{border:4px solid white;box-shadow:0 0 55vh 20vh #fff}to{opacity:1;transform:scaleX(1) rotateX(180deg) rotate(45deg);border:1px solid white;box-shadow:0 0 2vh #fff}}@keyframes flipInnerFrame{0%{opacity:0;transform:rotateX(0) rotate(45deg);z-index:4}to{opacity:1;transform:rotateX(-180deg) rotate(45deg);z-index:4}}.inner-frame__back__content{display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;transform:rotate(45deg);z-index:4;width:100%;height:100%}.inner-frame__back__content h2{font-size:3vh}.inner-frame__back__content__button-container{margin-top:20px;z-index:5}.start-menu-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh;width:70vh;color:#fff;overflow:visible}.start-menu-title{height:30%;font-size:3rem;font-weight:700;margin-bottom:1rem;text-align:center}@media (min-width: 768px){.start-menu-title{font-size:4rem}}.start-menu-button-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:30%;width:40%;min-width:300px;position:relative;bottom:-8vh}.start-menu-button{color:#fff;font-weight:700;padding:.4rem 1rem;border-radius:0;outline:1px solid white;transition:box-shadow .3s;margin-bottom:1vh;cursor:pointer;background:linear-gradient(to top,#4d575db6,#0d0d0daf);width:100%}.start-menu-button:last-child{margin-bottom:0}.start-menu-button:hover{animation:buttonHover .8s ease-in-out infinite}.start-menu-button:active{color:#000;background:linear-gradient(to top,#c2c2c2,#fafafa);animation:buttonActive .1s ease-in-out 1;outline:1px solid rgb(32,32,32)!important}.start-menu-animation-display{position:absolute;width:36vh;height:36vh;overflow:visible;display:flex;justify-content:center;align-items:center}.logo-main{width:24vh;height:24vh;position:absolute;top:6vh;left:5.5vh;opacity:1;will-change:opacity;transition:opacity .5s ease-in-out}.logo-hidden{opacity:0;transition:opacity .5s ease-in-out}.start-menu-animation-cutting-frame{position:relative;width:24.5vh;height:24.5vh;overflow:hidden;transform:rotate(45deg);border:1px solid #f1f1ec62;margin-bottom:1vh}.start-menu-animation-box{position:relative;display:flex;flex-direction:row;transform:rotate(-45deg);overflow:visible;right:10vh;top:5vh}.start-menu-animation-box-background{position:absolute;width:100%;height:100%;left:0;top:0;z-index:-1;will-change:opacity,background-color;transition:opacity 2s ease,background-color 2s ease;opacity:0}.start-menu-animation-box-background.darken-background{background:radial-gradient(#202020ea,#0d0d0dc7,#0d0d0d00,#0d0d0d00);background-color:#181823;opacity:.4;transition:opacity 1s ease}.animation{position:absolute;width:120%;height:120%;display:flex;justify-content:space-between;transition:transform .5s ease-in-out;will-change:transform}.left-moving-box,.right-moving-box,.right-moving-box-cpu{width:23vh;height:23vh;transition:transform .2s ease-in;background-size:cover;background-position:center;will-change:transform;z-index:2!important;position:relative}.left-moving-box{transform:translate(-150%);background:url(/img/pvp-left.png) no-repeat center center / cover}.right-moving-box{transform:translate(150%);background:url(/img/pvp-right.png) no-repeat center center / cover}.right-moving-box-cpu{transform:translate(150%);background:url(/img/cpu-right.png) no-repeat center center / cover}.animate-left{transform:translate(-20%);transition:transform .25s ease-in,opacity .5s ease-in-out;opacity:1}.animate-right{transform:translate(15%);transition:transform .25s ease-in,opacity .5s ease-in-out;opacity:1}.left-moving-box-glow,.right-moving-box-glow{content:"";position:absolute;width:1vh;height:1vh;filter:blur(15px);z-index:-2!important;will-change:opacity;transition:opacity .5s ease-in-out;opacity:0;border-radius:50%}.left-moving-box-glow{box-shadow:0 0 10vh 4vh #00f;top:10vh;left:10vh}.right-moving-box-glow{box-shadow:0 0 10vh 4vh red;right:10vh;top:10vh}.right-moving-box-glow.show-glow,.left-moving-box-glow.show-glow{transition:opacity 2.5s ease-in-out;opacity:.6}.right-moving-box-cpu.animate-right{transform:translate(12%);transition:transform .25s ease-in,opacity .5s ease-in-out;opacity:1}.middle-static-box{text-align:center;font-size:2vh;width:8.5vh;height:8.5vh;will-change:opacity;opacity:0;z-index:-1;position:absolute;top:10vh;left:10vh}.show-vs-screen{transition:opacity .5s ease-in-out;opacity:1}.show-vs-screen.hidden{display:visible;opacity:0}@media screen and (max-width: 100vh){.start-menu-container{height:70vw;width:70vw}.start-menu-button-container{bottom:-8vw}.start-menu-animation-display{width:36vw;height:36vw}.logo-main{width:24vw;height:24vw;top:6vw;left:5.5vw}.start-menu-animation-cutting-frame{width:24.5vw;height:24.5vw;margin-bottom:1vw}.start-menu-animation-box{right:10vw;top:5vw}.left-moving-box,.right-moving-box,.right-moving-box-cpu{width:23vw;height:23vw}.left-moving-box-glow,.right-moving-box-glow{width:1vw;height:1vw}.left-moving-box-glow{box-shadow:0 0 10vw 4vw #00f;top:10vw;left:10vw}.right-moving-box-glow{box-shadow:0 0 10vw 4vw red;top:10vw;right:10vw}.middle-static-box{font-size:2vw;width:8.5vw;height:8.5vw;top:10vw;left:10vw}}@media screen and (max-width: 680px){.start-menu-button-container{bottom:-35vw;position:relative;width:55vw}.start-menu-button{margin-bottom:.5rem;max-width:100%}}.rules-container{max-width:480px;margin:10vh auto;background-color:#3b3b3b;padding:3.4rem 2rem;border-radius:2rem;box-shadow:0 4px 12px #fff3;display:flex;flex-direction:column;align-items:center;border:2px solid #eeefea;color:#fff;animation:fadeInApp .5s ease-in-out;min-height:60vh;height:auto;max-height:80vh;overflow-y:auto}.rules-content,.rule-block,h2,h3,p,ol li{text-align:center;margin-bottom:1rem}h2{color:#fff;font-size:2.4rem;margin-bottom:1.2rem;text-shadow:-2px -2px 0 black,2px -2px 0 black,-2px 2px 0 black,2px 2px 0 black;font-family:Orbitron,sans-serif}h3{color:#adafb5;font-size:1.8rem;margin:1.8rem 0;text-shadow:-2px -2px 0 black,2px -2px 0 black,-2px 2px 0 black,2px 2px 0 black;font-family:Orbitron,sans-serif}p{opacity:.85;color:#fff;text-shadow:-2px -2px 0 black,2px -2px 0 black,-2px 2px 0 black,2px 2px 0 black}ol{list-style-type:none;padding-left:0;margin:0}ol li{display:flex;margin-bottom:1rem;counter-increment:rule-counter;color:#fff;font-size:1.2rem}ol li:before{content:counter(rule-counter) ".";font-weight:700;margin-right:1rem;color:#eeefea}span{opacity:.85;color:#fff}.button-container{display:flex;justify-content:center;margin-top:2rem;width:100%}.accept-button{background-color:transparent;color:#fff;padding:10px 20px;border:2px solid #eeefea;border-radius:5px;cursor:pointer;transition:background-color .3s ease,transform .2s ease;box-shadow:0 0 8px #ffffff4d;font-family:Orbitron,sans-serif;font-size:1.2rem}.accept-button:hover{background-color:#eeefea;color:#0d0d0d;transform:scale(1.05);box-shadow:0 0 12px #ffffff80}@keyframes fadeInApp{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.set-player-name-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh;width:70vh}.set-player-name-form{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:5px;box-shadow:0 0 10px #b634341a;width:100%;height:100%;position:relative}.player-x-symbol,.player-o-symbol{position:absolute;width:24.4%;height:24.4%;mix-blend-mode:multiply;animation:fadeInSymbol .5s ease-in-out 1}@keyframes fadeInSymbol{0%{transform:scale(0)}to{transform:scale(1)}}.player-x-symbol{left:25.6%;top:24.7%;background:linear-gradient(-45deg,transparent 10%,blue);clip-path:polygon(100% 0%,0% 100%,100% 100%)}.player-o-symbol{right:25.4%;bottom:26.5%;background:linear-gradient(-45deg,red,transparent 90%);clip-path:polygon(100% 0%,0% 100%,-100% -100%)}.player-label-x-symbol{font-size:7.7vh;position:absolute;top:33.7%;left:38.8%;z-index:3}.player-label-o-symbol{font-size:7.7vh;position:absolute;bottom:36.3%;left:52.4%;z-index:3}.player-label-x-symbol,.player-label-o-symbol{animation:fadeInLabelSymbol .5s ease-in-out 1}@keyframes fadeInLabelSymbol{0%{transform:scale(1.7);opacity:0}to{transform:scale(1);opacity:1}}.input-field{width:100%;padding:1vh;background:linear-gradient(to top,#4d575db6,#0d0d0daf);border:1px solid #ffffff;border-radius:0;font-size:2vh;color:#fff;height:6%}.input-field::placeholder{color:#ffffffb3;font-family:Orbitron,sans-serif}.input-field-x::placeholder{text-align:left;direction:ltr}.input-field-o::placeholder{text-align:right;direction:rtl}.input-field-o:focus{background-color:red;color:#fff;outline:none}.input-field-x:focus{background-color:#00f;color:#fff;outline:none}.input-field-o:valid{background-color:red;color:#fff}.input-field-x:valid{background-color:#00f;color:#fff}.input-field-o{position:absolute;bottom:41%;right:50%;width:31.4%;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 100%);mask-image:linear-gradient(to right,#0000,#000,#000);text-align:right;direction:rtl;animation:fadeInFieldO .5s ease-in-out 1}.input-field-x{position:absolute;top:37%;left:50.1%;width:31.5%;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,#000,#000,#0000);text-align:left;direction:ltr;animation:fadeInFieldX .5s ease-in-out 1}@keyframes fadeInFieldX{0%{translate:-50%;transform:scaleX(0);opacity:0}to{translate:0;transform:scaleX(1);opacity:1}}@keyframes fadeInFieldO{0%{translate:50%;transform:scaleX(0);opacity:0}to{translate:0;transform:scaleX(1);opacity:1}}.set-player-name-button-container{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:end;height:30%;width:100%;position:absolute;padding:0 1.7rem;margin-bottom:1rem;bottom:0}.set-player-name-button-container button{padding:15px;background:linear-gradient(to top,#4d575db6,#0d0d0daf);color:#fff;border-radius:0;outline:1px solid white;cursor:pointer;font-size:16px;font-weight:700;transition:background .3s,outline .3s,box-shadow .3s;margin-top:10px;min-height:60px;height:25%;max-width:50%;width:200px;margin-bottom:1rem!important;display:flex;align-items:center;justify-content:center}.set-player-name-button-container button:hover{animation:buttonHover .8s ease-in-out infinite}.set-player-name-button-container button:active{background:linear-gradient(to top,#c2c2c2,#fafafa);color:#000;outline:1px solid rgb(32,32,32);animation:buttonActive .1s ease-in-out 1}@media screen and (max-width: 100vh){.set-player-name-container{height:70vw;width:70vw}.input-field{font-size:3vw;padding:1vw}.player-x-symbol,.player-o-symbol{width:44%;height:46.4%;mix-blend-mode:multiply}.player-x-symbol{left:5.9%;top:2.7%}.player-o-symbol{right:5.9%;bottom:4.7%}.player-label-x-symbol{font-size:10vw;top:27.4%;left:31.2%}.player-label-o-symbol{font-size:10vw;bottom:28.3%;left:57.4%}.input-field{height:10%}.input-field-o{bottom:31.7%;right:50%;width:45.5%}.input-field-x{top:31.5%;left:50.1%;width:45.5%}.set-player-name-button-container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:30%;width:100%;position:absolute;padding:0 1.7vw;margin-bottom:.1vw}.set-player-name-button-container button{padding:1.2vw;font-size:16px;font-weight:700;transition:background .3s,outline .3s,box-shadow .3s;margin-top:10px;min-height:32px;height:25%;max-width:100%;width:300px;margin-bottom:1vw!important}}@media screen and (max-width: 680px){.set-player-name-button-container{bottom:-25vw}}.computer-menu{display:flex;flex-direction:column}.button{color:#fff;font-weight:700;padding:.4rem 1rem;border-radius:0;outline:1px solid white;transition:box-shadow .3s;margin-bottom:1rem;cursor:pointer;background:linear-gradient(to top,#4d575db6,#0d0d0daf);width:100%}.button:active{color:#000;background:linear-gradient(to top,#c2c2c2,#fafafa);animation:buttonActive .1s ease-in-out 1;outline:1px solid rgb(32,32,32)!important}.button:hover{animation:buttonHover .8s ease-in-out infinite}.popup-menu-button{padding:.4rem 1rem;font-size:16px;cursor:pointer;color:#fff;border:1px solid white;border-radius:5px;background:linear-gradient(to top,#4d575db6,#0d0d0daf);transition:background .3s,color .3s,outline .3s,box-shadow .3s;z-index:5}.popup-menu-button:hover{animation:buttonHover .8s ease-in-out infinite}.popup-menu-button:active{background:linear-gradient(to top,#c2c2c2,#fafafa);color:#000;outline:1px solid rgb(32,32,32);animation:buttonActive .1s ease-in-out 1}.menu-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;overflow:visible;animation:fadeIn .5s ease-in-out;width:100vw;height:100vh;z-index:10}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleInBackground{0%{transform:scale(0)}to{transform:scale(1)}}.menu-modal-content:before{content:"";position:absolute;top:18vh;left:19.5vw;width:60%;height:60%;background:url(/img/popup-menu-background.png) center center no-repeat;background-size:contain;z-index:-1;overflow:visible;will-change:opacity,transform;animation:scaleInBackground .5s ease-out}.menu-modal-content{padding:20px;border-radius:10px}.menu-modal-content h2{margin-top:0;text-align:center}@keyframes scaleInButton{0%{transform:scale(0),translateY(10px)}to{transform:scale(1),translateY(0)}}.menu-modal-content button{color:#fff;font-weight:700;padding:.4rem 1rem;border-radius:0;outline:1px solid white;transition:box-shadow .3s;margin-bottom:1rem;cursor:pointer;background:linear-gradient(to top,#4d575db6,#0d0d0daf);width:100%}.menu-modal-content button:last-child{margin-bottom:0}.menu-modal-content button:hover{animation:buttonHover .8s ease-in-out infinite}@keyframes buttonHover{0%,to{outline:2px solid white}50%{outline:5px double white}}.menu-modal-content button:active{color:#000;background:linear-gradient(to top,#c2c2c2,#fafafa);animation:buttonActive .1s ease-in-out 1;outline:1px solid rgb(32,32,32)!important}@keyframes buttonActive{0%,to{background:linear-gradient(to top,#c2c2c2,#fafafa)}50%{background:linear-gradient(to top,#4d575db6,#0d0d0daf)}}.menu-modal-content label{display:flex;align-items:center;margin-bottom:1rem;font-size:16px}.menu-modal-content .MuiSwitch-root{margin-right:10px}@media (max-width: 415px){.popup-menu-button{font-size:.7rem!important;padding:.4rem .6rem!important;margin-top:2rem}}.menu-modal-content{background:#080b1050}.scoreboard{display:flex;justify-content:center;margin-bottom:20px;font-size:24px;color:#fff}.scoreboard-player{margin:0 20px;text-align:center}.player-name{display:block;font-weight:700;margin-bottom:5px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-score{display:block;font-size:32px;font-weight:700}@media screen and (max-width: 100vh){.scoreboard{font-weight:100;width:70vw;position:relative;flex-direction:row;justify-content:space-between;top:-5vh;font-size:24px;padding:0;margin:0}.scoreboard-player{width:50%;display:flex;flex-direction:row;justify-content:space-between;margin:0}.scoreboard-player:nth-child(2){width:50%;display:flex;flex-direction:row-reverse;justify-content:space-between}.player-name{display:block;font-weight:100;margin-bottom:5px;text-transform:uppercase;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;top:6px}.player-score{display:block;font-size:32px;font-weight:700;padding:0 1vw}}.timer{font-size:24px;color:#fff;text-align:center;margin-bottom:10px}.background{position:fixed;top:0;left:0;width:100vw;height:100vh;background:url(/img/lines.jpg);background-size:cover;background-position:center;z-index:-4}