@import"https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500;9..40,600&display=swap";.quote-box{max-width:18.125rem;border-radius:1.125rem;background-color:var(--bg-color);text-align:center;font-weight:600;padding:1rem;box-shadow:4px 4px 4px #000000bf}.quote-box h3{color:var(--aqua);font-size:1.625rem}.quote-box p{color:var(--yellow);width:13.5rem;margin:2rem auto;font-size:1.5rem;line-height:2rem}.quote-box .aqua-circle{width:1.8125rem;height:1.8125rem;border-radius:100%;background-color:var(--aqua);margin:0 auto}.quote-box .aqua-circle svg{margin-top:28%}.home{width:80%;margin:0 auto;padding-top:4%;text-align:center}.home .pick{width:19.1875rem;height:9.625rem;margin:auto;border-radius:.4375rem;background-color:var(--dark-bg-color);box-shadow:0 4px 4px #00000040}.home .pick h3{padding-top:1rem;margin-top:0;color:#fff;font-size:1.375rem;font-weight:600}.home .pick .player-options{box-sizing:border-box;margin:1rem auto;width:95%;height:30%;background-color:var(--bg-color);border-radius:.3125rem;display:flex;padding:2.8%}.home .pick .player-options div{flex:1 1;height:98%;border-radius:.3125rem;cursor:pointer}.home .pick .player-options div svg{padding-top:1%}.home .pick .selected{background-color:var(--grey)}.home .new-game{margin-top:1rem}.home .new-game button{margin:.5rem auto;border-radius:.3125rem;width:19.1875rem;height:2.5rem;font-size:.875rem}.home .new-game button:nth-of-type(1){background-color:var(--yellow)}.home .new-game button:nth-of-type(2){background-color:var(--aqua)}.home .invite button{margin-top:3rem;width:14rem;height:2rem;border-radius:.3125rem;background-color:var(--yellow);font-weight:800}.code-conf button{height:2.25rem;border-radius:.625rem;font-size:1rem}.code-conf button:disabled{pointer-events:none}.code-conf .enter-code label{color:#fff;font-size:1.2rem}.code-conf .enter-code div{width:100%;display:flex;justify-content:center;gap:1rem;margin-top:1rem}.code-conf .enter-code div input{background-color:transparent;border:1px solid var(--grey);outline:none;border-radius:.625rem;padding-left:1rem;width:35%;height:2.0625rem;font-size:1.2rem;color:var(--grey)}.code-conf .enter-code div button{width:20%;background-color:var(--aqua)}.code-conf .ruler{margin:2rem auto;width:90%;display:flex;align-items:center;gap:1rem}.code-conf .ruler span hr{width:9.5rem;border-bottom:none}.code-conf .ruler p{font-size:1.2rem;color:var(--grey);margin:0}.code-conf .generate-code button{width:50%;font-weight:700;background-color:var(--yellow)}.code-conf .generate-code p{color:var(--grey)}.code-conf .generate-code p span{color:#fff;font-weight:800}.code-conf .generate-code .copy-share{display:flex;justify-content:center}.code-conf .generate-code .copy-share button{height:2rem;width:fit-content;background-color:transparent}.code-conf .generate-code .copy-share button svg{width:2rem;height:1.5rem;color:var(--aqua)}.code-conf .generate-code .copy-share button:disabled{pointer-events:auto}.code-conf .conf-response p{margin:2rem auto 0;font-size:1.2rem;font-weight:800}.code-conf .conf-response h3{margin:1rem auto 0;color:#fff}@media screen and (max-width: 970px){.code-conf .ruler{width:95%}}.game-box{width:26rem;height:45rem;background-color:var(--bg-color);border-radius:2.6875rem;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;box-shadow:4px 4px 4px #000000bf}.game-box>h3{color:#fff;position:absolute;top:1.5rem;letter-spacing:.1rem}.game-box>h3 span{color:var(--grey);text-decoration:underline}.game-box>h3 svg{margin-left:.5rem;cursor:pointer}.game-box .logo{position:absolute;top:8.7rem}@keyframes slide-text{0%{left:11rem}to{left:3.5rem}}@media screen and (max-width: 500px){@keyframes slide-text{0%{left:10rem}to{left:3.5rem}}}@media screen and (max-width: 970px){.game-box{width:100vw;border-bottom-left-radius:0;border-bottom-right-radius:0}}:root{--light-grey: #A8BEC9}.play-area{width:77%;margin:0 auto;text-align:center}.play-area .top-layer,.play-area .scores{display:flex;width:100%;justify-content:space-between;margin:1rem auto;gap:1.88rem}.play-area .top-layer{margin-top:0}.play-area .top-layer div:nth-of-type(1){width:2rem}.play-area .top-layer .turn,.play-area .top-layer .refresh{display:flex;align-items:center;justify-content:center}.play-area .top-layer .turn{box-sizing:border-box;width:5.375rem;height:2.4375rem;border-radius:.625rem;background:var(--dark-bg-color);box-shadow:0 4px 4px #00000040;font-size:.75rem;font-weight:600;color:var(--light-grey);border-top:2px solid}.play-area .top-layer .turn span{height:3.5rem;font-size:2.5rem;font-weight:600}.play-area .top-layer .refresh{box-sizing:border-box;width:2rem;height:2rem;border-radius:.3125rem;background-color:#a7bdc8;box-shadow:0 4px 4px #00000040;margin-top:.3rem;cursor:pointer}.play-area .tic-tac-cards{width:100%;margin:1rem auto;display:grid;grid-template-columns:min-content min-content min-content;justify-content:space-between;row-gap:1.88rem}.play-area .tic-tac-cards div{width:5.375rem;height:5.375rem;border-radius:.625rem;background-color:var(--dark-bg-color);box-shadow:0 4px 4px #00000040;display:flex;align-items:center;justify-content:center}.play-area .scores div{box-sizing:border-box;width:5.375rem;height:3.0625rem;border-radius:.625rem;font-size:.675rem;font-weight:600;color:#1e1e1e;padding-top:.5rem}.play-area .scores div h3{font-size:.875rem;margin:0}.play-area .scores .aqua{background-color:var(--aqua)}.play-area .scores div:nth-of-type(2){background-color:var(--light-grey)}.play-area .scores .yellow{background-color:var(--yellow)}.game-over .game-result{margin-top:0;color:#acc2cd;font-size:.9375rem;font-weight:700}.game-over h1{color:var(--yellow);text-align:center;font-size:1.75rem;font-weight:800;margin-bottom:1.5rem}.game-over h1 svg{position:relative;top:7px;margin-right:10px}.game-over .game-over-buttons{width:80%;margin:1rem auto;display:flex;justify-content:space-around}.game-over .game-over-buttons button{width:7.0625rem;height:2.0625rem;border-radius:.625rem}.game-over .game-over-buttons .quit{background-color:var(--yellow)}.game-over .game-over-buttons .play-again{background-color:var(--aqua)}.username h3{margin-top:0;color:#fff}.username div{width:100%;display:flex;justify-content:center;gap:1rem}.username div input{background-color:transparent;border:1px solid var(--grey);outline:none;border-radius:.625rem;padding-left:1rem;width:35%;height:2.0625rem;font-size:1.2rem;color:var(--grey)}.username div button{width:20%;height:2.25rem;background-color:var(--aqua);border-radius:.625rem;font-size:1rem}.username p{font-size:1rem;color:#f95555;margin-bottom:0}.popup{width:26rem;height:45rem;border-radius:2.6875rem;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#000000ba;position:absolute;z-index:5}.popup main{width:98%;background-color:var(--bg-color);text-align:center;padding:1.5rem 0;position:relative}.popup main .close-popup{position:absolute;top:-.5rem;right:.5rem;color:var(--light-grey);font-size:2.5rem;cursor:pointer}@media screen and (max-width: 970px){.popup{width:100vw;border-bottom-left-radius:0;border-bottom-right-radius:0}}:root{--aqua: #31C4BE;--yellow: #F2B237;--bg-color: #192A32;--grey: #D9D9D9;--dark-bg-color: #1F3540;-webkit-tap-highlight-color:transparent}body{font-family:DM Sans,sans-serif;background-color:#0e4355;margin:0}button{border:none;cursor:pointer;font-weight:600;color:var(--bg-color)}button:active{scale:.9}#game{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}#quote{position:absolute;bottom:4%;left:15%}@media screen and (min-width: 975px) and (max-width: 1255px){#quote{left:5%}}@media screen and (max-width: 975px){#quote{display:none}#game{height:100svh;align-items:end}}