.input-box{width:25vw;margin:2vh auto;display:flex;justify-content:center}.label-text{margin-top:.5vh;width:10vw;font-size:1.2em;color:#000}.name-input{width:15vw;height:3vh;background-color:#fff;font-family:inherit;font-size:large;color:#000;text-align:center;border:none;border-bottom:3px solid black;border-radius:5px;outline:none;transition:border-color .25s ease-in-out}.name-input:focus{border-color:green}.active{border-color:green}button{width:15vw;border-radius:8px;border:3px solid transparent;border-color:#000;transition:border-color .25s;background-color:#fff;padding:.6em 1.2em;cursor:pointer;font-size:1.5em;font-weight:500;font-family:inherit;color:#000}button:hover{border-color:green}.single{border-color:orange}.multi{border-color:purple}body,html{height:100%;margin:0;display:flex;justify-content:center;align-items:center;text-align:center}h1{margin-bottom:20px}.inputs-row{width:25vw;margin:5vh auto}.input-box{display:flex}.player-symbol-box{min-width:3vw;max-width:3vw;height:3vw;margin-left:2vw;border-radius:50%;box-shadow:0 0 3px #000;display:flex;align-items:center;justify-content:center;color:#000;cursor:pointer;transition:.4s ease-in-out}.player-symbol-box:hover{color:green;box-shadow:0 0 5px green}.player-symbol-text{font-size:1.5em;color:inherit;font-family:inherit}.board-singleplayer{background-color:orange}.loading-box{height:8em}.bot-message{display:flex;justify-content:center;align-items:center}.loading{width:2em;height:2em;border-radius:50%;border:10px solid goldenrod;border-top-color:var(--green);animation:loading-circle 1s linear infinite}@keyframes loading-circle{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.board-multiplayer{background-color:purple}:root{font-family:Underdog,system-ui;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:8em;line-height:1.1;color:#000}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.game-screen{height:90vh;display:flex;flex-direction:column;justify-content:space-evenly}.board-scoreboard-container{width:100vw;display:flex;justify-content:space-evenly}.scoreboard{display:flex;flex-direction:column;justify-content:space-evenly;width:25vw;box-shadow:0 0 5px gray;border-radius:5%;transition:.4s ease-in-out}.scoreboard.winner{box-shadow:0 0 25px green}.scoreboard-player-title{height:7vh;margin:0 auto;font-size:3em;color:#000;font-family:inherit}.scoreboard-player-score{margin:0 auto;font-size:8em;color:#000;font-family:inherit}.scoreboard-player-winner{width:0vw;overflow:hidden;color:green;transition:width .7s ease-in-out;font-weight:700}.scoreboard-player-winner.active{width:10vw}.scoreboard-player-winner.draw{width:10vw;color:#000}.board{display:grid;grid-template-columns:repeat(3,16vh);grid-template-rows:repeat(3,16vh);gap:1rem;background-size:100% 100%;border-radius:8px;padding:1rem}.board.game-over{opacity:.8;background-color:green}.cell{display:grid;align-items:center;justify-content:center;font-size:3rem;font-weight:700;border-radius:8px;border:3px solid transparent;background-color:#fff;cursor:pointer;transition:border-color .4s;color:#000}.cell:not(.O):not(.X):hover{border:3px solid transparent;border-color:#000}.cell.O,.cell.X,.game-over .cell{cursor:not-allowed;border:0px solid transparent}.buttons-row{display:flex;flex-direction:row;gap:16px;justify-content:center;align-items:center}