html{font-size:62.5%}*{margin:0;padding:0;box-sizing:border-box}:root{--black: rgb(0, 0, 0);--purple: rgb(92, 45, 213);--lightpurple: rgb(121, 69, 255);--red: rgb(253, 102, 135);--yellow: rgb(255, 206, 103);--white: rgb(255, 255, 255);--mainFont: "Space Grotesk", sans-serif}li{list-style:none}a{text-decoration:none}h1{font-size:5.6rem}h2{font-size:2.4rem}h3{font-size:2rem}p{font-size:1.6rem}.justify-between{display:flex;align-items:center;justify-content:space-between}.flex-start{display:flex;align-items:center;justify-content:flex-start}.bold{font-weight:700}.uppercase{text-transform:uppercase}.tablet-mobile,.tablet,.mobile{display:none}.w-full{width:100%}.my-2{margin:2rem 0}@media screen and (max-width: 1050px){.desktop{display:none}.tablet-mobile,.tablet{display:block}}@media screen and (max-width: 650px){.desktop-tablet{display:none}.mobile{display:block}.tablet{display:none}}.logo-dots{display:grid;grid-template-columns:repeat(2,1fr);width:fit-content;overflow:hidden}.dot-parent{position:relative;z-index:5;height:35px;width:35px;display:flex;align-items:center;justify-content:center;margin:-.35rem;overflow:hidden}.dot{position:relative;height:20px;width:20px;border-radius:50%;box-shadow:0 3.5px 0 var(--black),.5px 0 0 var(--black);border:2px solid var(--black)}.btn-div{position:relative;height:7.2rem;width:100%}.btn{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2rem;font-size:2rem;text-transform:uppercase;font-weight:600;font-family:var(--mainFont);transition:.5s ease;z-index:5;border:5px solid var(--black);box-shadow:5px 0 10px #0f0f0fbf inset;cursor:pointer}.btn:hover{border:5px solid var(--purple);transform:translateY(.75rem);transition:.25s ease;box-shadow:0 0 #0f0f0fbf inset}.btn-content{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:2rem;border:5px solid transparent;padding:0rem 2rem}.btn-shadow{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--black);border-radius:2rem;transform:translateY(1rem);transition:.5s}.btn-div:hover .btn-shadow{background:var(--purple);box-shadow:2px 5px 5px var(--purple)}.btn-content{position:relative;z-index:5}.title-card{display:flex;align-items:center;justify-content:center;flex-direction:column;border:2px solid black;padding:6rem 4rem;width:clamp(35%,500px,100%);background:var(--lightpurple);border-radius:2rem;border:5px solid var(--black);box-shadow:0 10px 0 var(--black)}.title-card-btns-section{margin-top:7rem;display:flex;flex-direction:column;gap:2rem;width:100%}.mobile-title-section{display:flex;align-items:center;flex-direction:column;justify-content:center}.mobile-title-section{width:100%}.title-screen{background:var(--purple)}.title-card-wrapper{width:100%;display:flex;align-items:center;justify-content:center}.game-header{display:flex;align-items:center;justify-content:space-between;width:clamp(45%,65rem,90%);margin-bottom:2rem}.normal-btn{font-size:2rem;text-transform:uppercase;background:var(--purple);border-radius:5rem;padding:.5rem 2rem;outline:none;font-family:var(--mainFont);color:#fff;border:none;box-shadow:0 3px 0 var(--black);transition:.25s ease;cursor:pointer}.normal-btn:hover{box-shadow:0 1px 0 var(--black);transform:translateY(.25rem)}.mobile-player-card{background:var(--white);padding:2rem;border:5px solid var(--black);border-radius:1rem;flex:1}.mobile-player-card-content{display:flex;align-items:center;justify-content:space-evenly;position:relative}.absolute-mobile-icon-1{position:absolute;left:0;transform:translate(-100%)}.absolute-mobile-icon-2{position:absolute;right:0;transform:translate(100%)}@media screen and (max-width: 650px){.mobile-player-card-content{flex-direction:column}}.mobile-playercard-row{display:flex;gap:3rem;width:clamp(40%,65rem,90%);align-items:center;justify-content:center;margin:0 auto}.gameboard-parent{border:5px solid var(--black);border-radius:2rem;box-shadow:0 10px 0 var(--black);overflow:hidden}.gameboard{border:10px solid var(--white);border-bottom:30px solid var(--white);position:relative;z-index:1}.game-row{display:flex}.game-cel{width:8rem;height:8rem;border:5px solid var(--white);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.game-cel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:12.5px solid var(--white);border-radius:50%;transform:scale(1.45)}.game-cel-shadow{content:"";position:absolute;border:15px solid black;top:0;right:0;bottom:0;left:0;transform:scaleY(1.3) scaleX(1.5);filter:blur(2px);border-radius:50%}@media screen and (max-width: 850px){.game-cel{width:5rem;height:5rem}.game-cel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:7.5px solid var(--white);border-radius:50%;transform:scale(1.45)}.game-cel-shadow{border:8.5px solid black}}.action-row{display:flex;border-right:10px solid transparent;border-left:10px solid transparent}.action-cel{width:8rem;height:8rem;border-right:2px solid black;position:relative;cursor:pointer;border:5px solid transparent;border-right:5px solid var(--black)}.action-cel:last-child{border-right:0}.action-cel-btn{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;background:transparent;outline:none;border:none}.boardchip{width:8rem;height:8rem;border-radius:50%;border:5px solid var(--black);position:absolute}.red-chip{background:var(--red)}.yellow-chip{background:var(--yellow)}.winning-chip{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.winning-chip:after{content:"";width:25px;height:25px;border:5px solid var(--white);box-shadow:2px 2px 2px var(--lightpurple),2px 2px 5px var(--purple) inset;border-radius:50%;transform:scale(0) translateY(-2.25rem);animation:scalering 1s 1s forwards}@keyframes scalering{to{transform:scale(1) translateY(1rem)}}@media screen and (max-width: 850px){.action-cel,.boardchip{width:5rem;height:5rem}.winning-chip:after{height:17.5px;width:17.5px;border:2.5px solid var(--white)}@keyframes scalering{to{transform:scale(1) translateY(-.5rem)}}}.player-card{background:var(--white);border:5px solid var(--black);box-shadow:0 5px 0 var(--black);border-radius:1rem;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:4rem 2.5rem 2.5rem;position:relative;transform:scaleY(0);animation:popup 1s 2s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes popup{to{transform:scaleY(1)}}.absolute-icon{position:absolute;top:-25%}.player-turn-timer-container{position:relative;z-index:5}.player-turn-timer-parent{width:200px;height:150px;position:relative;bottom:0;left:50%;transform:translate(-50%) translateY(-25%);z-index:5}.player-turn-top{height:50px;width:100%;background:var(--red);clip-path:polygon(50% 15%,0% 100%,100% 100%);transform:translateY(.15rem);position:relative;z-index:5;top:.25rem;transition:.5s ease}.player-turn-top-shadow{position:absolute;height:50px;width:100%;background:var(--black);top:0;transform:scaleY(1.05) translate(.25rem);clip-path:polygon(50% 15%,0% 100%,100% 100%)}.player-turn-card{display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;border-bottom-left-radius:2rem;border-bottom-right-radius:2rem;box-shadow:0 5px 0 var(--black);border-left:3px solid var(--black);border-right:3px solid var(--black);transition:.5s ease}.player-turn-h3{text-shadow:0px 0px 5px var(--black)}.timer-h1{text-shadow:5px 5px 0px var(--black)}.winner-card{position:relative;z-index:5;background:var(--white);border:5px solid var(--black);width:fit-content;padding:2rem 8rem;border-radius:2rem;box-shadow:0 15px 0 var(--black);margin:0 auto;text-align:center;text-transform:uppercase;transform:translateY(-2.5rem)}.column-marker-parent{width:4rem;height:4rem;position:absolute;left:2.5rem;top:-1rem;transition:.5s cubic-bezier(.175,.885,.32,1.275)}.column-marker{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;transform:scale(.85)}.column-marker-base{height:50%;width:100%;border-bottom:none;border-top-left-radius:.5rem;border-top-right-radius:.5rem;box-shadow:0 -3px 0 var(--black);transition:.5s ease}.column-marker-bottom{height:35%;width:100%;z-index:5;position:relative;clip-path:polygon(0 0,50% 75%,100% 0);transform:translateY(-1px);transition:.5s ease}.column-marker-shadow{position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:0 -3px 0 var(--black);filter:blur(2px)}.column-marker-shadow-base{position:relative;width:100%;height:2rem;height:50%;background:var(--black)}.column-marker-shadow-bottom{position:relative;height:1.5rem;height:35%;width:100%;background:var(--black);clip-path:polygon(0 0,50% 75%,100% 0)}.muted{opacity:50%}@media screen and (max-width: 850px){.column-marker-parent{left:2rem;width:3rem;height:3.25rem}}.gamerow-section{position:relative;z-index:5;width:100%;display:flex;align-items:center;justify-content:center;gap:6rem;transform:scaleX(0);animation:accordion-scale 1s 1s cubic-bezier(.175,.885,.32,1.275) forwards}.gameboard-column{position:relative}@keyframes accordion-scale{to{transform:scaleX(1)}}.bg-stripe{background:var(--purple);width:100%;height:15rem;position:absolute;border-top-left-radius:5rem;border-top-right-radius:5rem;bottom:0;transition:.5s ease}.winning-stripe{animation:winningstripe 3s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes winningstripe{0%{transform:scaleY(1)}50%{transform:scaleY(2)}to{transform:scaleY(1)}}.pause-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10;transition:.5s ease;padding:2rem}.pause-overlay:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.pause-card{background:var(--lightpurple);padding:3rem 3.4rem;border-radius:2rem;width:clamp(35%,48rem,100%);border:5px solid var(--black);box-shadow:0 5px 0 var(--black);position:relative;transform:scaleY(0);text-align:center;text-transform:uppercase;color:#fff;animation:restore-scale 1s .5s forwards;z-index:5}.pause-card h1{text-shadow:1px 1px 2px var(--black)}.pause-card-btns-section{margin-top:7rem;display:flex;flex-direction:column;gap:2rem}.hide-pause{transform:scale(0)}.show-pause{transform:scale(1)}.game-screen{background:var(--lightpurple)}.rules-card{background:var(--white);padding:3rem 3.4rem;border-radius:2rem;width:clamp(35%,48rem,100%);border:5px solid var(--black);box-shadow:0 5px 0 var(--black);position:relative;transform:scaleY(0);animation:restore-scale 1s .5s forwards}@keyframes restore-scale{to{transform:scaleY(1)}}.rules-title-div{position:relative;overflow:hidden}.rules-title{text-align:center;text-transform:uppercase;position:relative;margin-bottom:4rem;transform:translateY(-10rem);animation:slidedown 1s 1.5s forwards,float 4s 2.5s infinite}@keyframes slidedown{to{transform:translateY(0)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-1.5rem)}to{transform:translateY(0)}}.rules-shadow{position:absolute;bottom:0;left:50%;transform:translate(-50%) translateY(-.25rem) rotateX(180deg) scale(1.15,.35);filter:blur(50px);opacity:0;animation:showshadow 1s 1.5s forwards,shadowfade 4s 2.5s infinite}@keyframes showshadow{to{filter:blur(5.5px);opacity:.65}}@keyframes shadowfade{0%{filter:blur(5.5px);opacity:.65}50%{filter:blur(6.5px);opacity:.45}to{filter:blur(5.5px);opacity:.65}}.rule-section{margin:1.5rem 0}.rule-section-title{color:var(--purple);margin-bottom:1.5rem}.rule-item{display:flex;gap:1rem;margin:1rem 0}.round-btn-div{width:6.4rem;height:6.4rem;position:relative}.rules-btn-div{position:absolute;bottom:-3.2rem;left:50%;transform:translate(-50%)}.round-btn{width:6.4rem;height:6.4rem;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid var(--black);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;cursor:pointer;transition:.5s ease}.rules-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--red);transition:.25s ease;box-shadow:5px 2px 10px #000 inset}.rules-btn:hover:after{box-shadow:0 5px 5px var(--purple) inset;opacity:75%}.round-btn:hover{border:3px solid var(--purple);transition:.25s ease;transform:translateY(.25rem);box-shadow:2px 3px 5px var(--black) inset}.round-btn-shadow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--black);transform:translateY(.5rem)}.check-div{width:30px;height:17px;border-bottom:5px solid white;border-left:5px solid white;transform:rotate(-45deg);border-radius:.25rem;transform:scale(0);animation:scalecheck 1s 2s forwards;box-shadow:-2px 3px 1px #0f0f0fa6;position:relative;z-index:5}@keyframes scalecheck{50%{transform:scale(1)}to{transform:scale(1) rotate(-45deg)}}.round-btn-div:hover .round-btn-shadow{background:var(--purple)}.rules-screen{background:var(--lightpurple)}.app{font-family:var(--mainFont)}.view-screen{position:relative}.screen-content{max-width:144rem;margin:0 auto;min-height:100vh;padding:2rem;position:relative;display:flex;align-items:center;flex-direction:column}.center-screen-content{justify-content:center}.bg-red{background:var(--red)}.bg-yellow{background:var(--yellow)}