@import "https://necolas.github.io/normalize.css/8.0.1/normalize.css";@import "https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap";@import "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";.spinner{opacity:.7;width:72px;height:72px;animation:4.8s infinite spinner-plncf9;display:grid}.spinner:before,.spinner:after{content:"";mix-blend-mode:darken;border:11.5px solid #0b7392;border-color:#0b7392 #0b7392 #0000 #0000;border-radius:50%;grid-area:1/1;animation:2s linear infinite spinner-plncf9}.spinner:after{border-color:#0000 #0000 #bfc8c9 #bfc8c9;animation-direction:reverse}@keyframes spinner-plncf9{to{transform:rotate(1turn)}}html{box-sizing:border-box;font-size:16px}*,:before,:after{box-sizing:inherit}h1{text-align:center}body{color:#e4f2f5;background-color:#202b38;font-family:Kode Mono,monospace}body h1{margin:0;font-size:5rem}#toast-container{flex-direction:column;gap:15px;width:auto;height:auto;display:flex;position:fixed;top:30px;right:30px}#toast-container .toast{background-color:#2a394b;border:1px solid #bfc8c9b3;border-radius:7px;gap:15px;max-width:85vw;padding:18px 15px;display:flex}#toast-container .toast p{place-content:center;margin:0}#toast-container .toast button{color:#e4f2f5;background-color:#161f27;border:1px solid #bfc8c9b3;border-radius:7px;height:fit-content;margin:0;padding:10px 15px;transition:background-color .18s linear,border-color .18s linear,color .18s linear,box-shadow .18s linear,transform .18s}#toast-container .toast button:hover{cursor:pointer;background-color:#324759}#toast-container .toast button:active{transform:translateY(2px)}#toast-container .toast button:focus{box-shadow:0 0 0 2px #0096bfab}.playground{width:90%;max-width:390px;margin:0 auto 5rem}.playground .screen-menu,.playground .screen-wait{flex-direction:column;align-items:center;display:flex}.playground .screen-menu button,.playground .screen-wait button{color:#e4f2f5;background-color:#161f27;border:1px solid #bfc8c9b3;border-radius:7px;height:fit-content;margin:0;padding:10px 15px;transition:background-color .18s linear,border-color .18s linear,color .18s linear,box-shadow .18s linear,transform .18s}.playground .screen-menu button:hover,.playground .screen-wait button:hover{cursor:pointer;background-color:#324759}.playground .screen-menu button:active,.playground .screen-wait button:active{transform:translateY(2px)}.playground .screen-menu button:focus,.playground .screen-wait button:focus{box-shadow:0 0 0 2px #0096bfab}.playground .screen-menu{gap:2.5rem;margin-top:4rem}.playground .screen-menu .buttons{flex-wrap:wrap;justify-content:space-evenly;gap:1rem;display:flex}.playground .screen-menu input[type=text]{color:#e4f2f5;text-align:center;letter-spacing:8px;background-color:#161f27;border:none;border-radius:7px;max-width:15rem;padding:10px;font-family:Poppins,sans-serif;font-size:1.5rem}.playground .screen-menu input[type=text]::placeholder{letter-spacing:normal}.playground .screen-wait{text-align:center;color:#bfc8c9;gap:1.2rem;font-size:1.5rem}.playground .screen-wait h2{margin-bottom:0;font-size:2rem}.playground .screen-wait strong{color:#e4f2f5;font-family:Poppins,sans-serif;font-size:1.8rem}.playground .screen-wait button{font-size:1rem}@media (width<=480px){.playground .screen-game{margin-top:1rem}}.controls{justify-content:space-between;align-items:end;gap:16px;margin-bottom:16px;display:flex}@media (width<=480px){.controls{flex-direction:column;align-items:center}}.controls .buttons{justify-content:start;gap:10px;display:flex}@media (width<=480px){.controls .buttons{flex-wrap:wrap;justify-content:center;width:100%}}.controls .buttons button{color:#e4f2f5;background-color:#161f27;border:1px solid #bfc8c9b3;border-radius:7px;height:fit-content;margin:0;padding:10px 15px;transition:background-color .18s linear,border-color .18s linear,color .18s linear,box-shadow .18s linear,transform .18s}.controls .buttons button:hover{cursor:pointer;background-color:#324759}.controls .buttons button:active{transform:translateY(2px)}.controls .buttons button:focus{box-shadow:0 0 0 2px #0096bfab}.controls .buttons button{font-size:.9rem}.controls .current-player .label{text-align:center;margin:0 0 5px}.controls .current-player .player-box{text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none;border:1px solid #bfc8c9b3;border-radius:7px;align-content:center;width:100%;height:60px;margin:0 auto;font-size:40px;font-weight:700;transition:background-color .5s}.controls .current-player .player-box.O{background-color:#ff224424}.controls .current-player .player-box.X{background-color:#00ff771a}.controls .current-player .player-box.DRAW{background-color:#333333b3}.game{grid-template-columns:repeat(3,1fr);margin:0 auto;display:grid}.mini-board{border:1px solid #ffffffbf;grid-template-columns:repeat(3,minmax(30px,1fr));display:grid;position:relative}.mini-board .cell{aspect-ratio:1;text-align:center;color:#e4f2f5;-webkit-user-select:none;user-select:none;border:1px solid #fff3;align-content:center;margin:0;font-size:25px;transition:background-color .18s,transform .18s}.mini-board .cell.active{background-color:#ffffff1a}.mini-board .cell.active:hover{cursor:pointer;background-color:#ffffff4d;transform:scale(1.1)}.mini-board .cell.inactive{pointer-events:none;background-color:#0003}.mini-board .cell.opponent-available{pointer-events:none}.mini-board .cell.opponent-available.X{background-color:#00ff770d}.mini-board .cell.opponent-available.O{background-color:#ff224414}.mini-board.X .cell,.mini-board.O .cell,.mini-board.DRAW .cell{pointer-events:none;opacity:.5}.mini-board.X:after,.mini-board.O:after{text-align:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);align-content:center;font-size:6rem;font-weight:700;position:absolute;inset:0}.mini-board.O:after{content:"O"}.mini-board.X:after{content:"X"}.mini-board{transition:background-color .5s}.mini-board.O{background-color:#ff224424}.mini-board.X{background-color:#00ff771a}.mini-board.DRAW{background-color:#333333b3}.instructions{width:80%;max-width:1000px;margin:0 auto}.instructions h2,.instructions h3{color:#e4f2f5;font-size:2.2rem}.instructions h3{font-size:1.7rem}.instructions p{color:#bfc8c9;padding-left:2rem;font-family:Poppins,sans-serif}.footer{width:100%;padding:4rem 0}.footer p{color:#bfc8c9;width:90%;max-width:fit-content;margin:0 auto;font-family:Poppins,sans-serif}.footer p a{color:#e4f2f5;text-decoration:none;transition:color .3s}.footer p a:hover{color:#0b7392}