:root{--primary-color: #00beef;--secundary-color: #111;--black-color: #000;--white-color: #fff;--player-one: #ff2f89;--player-two: #00ff77}html{font-family:system-ui;scroll-behavior:smooth;box-sizing:border-box}*,:before,:after{padding:0;margin:0;box-sizing:inherit}body{width:100%;min-height:100vh;background-color:var(--secundary-color);color:var(--white-color)}.game{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh}.cell{position:relative;display:grid;place-items:center;height:50px;background-color:var(--black-color);color:var(--white-color);cursor:pointer;text-shadow:0 0 20px var(--white-color)}.board{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;width:100%;max-width:600px;height:auto;padding:1rem;border-radius:10px;border:3px solid var(--primary-color)}.currentTurn{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;gap:2rem;background-color:var(--black-color);padding:.8rem 2rem;border-radius:10px;border:2px solid var(--primary-color)}.currentTurn>.slot{position:relative}.currentTurn>span{font-size:1.5rem}.resetGame{background-color:var(--black-color);color:var(--white-color);padding:.8rem 2rem;margin-top:2rem;border-radius:10px;font-size:.8rem;font-weight:700;letter-spacing:1px;border:2px solid var(--primary-color);cursor:pointer;transition:background,box-shadow,color,.2s linear}.resetGame:hover{background-color:var(--primary-color);color:#000;font-weight:700;box-shadow:0 0 10px var(--primary-color)}.winnerModal{position:absolute;top:0;left:0;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:#000c}.contentWin{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:3rem 4rem;background-color:var(--black-color);border-radius:10px;border:2px solid var(--primary-color)}.cellWin{padding:1rem 2rem}.cellWin>.slot{position:relative;width:50px;height:50px;margin-top:2rem}.empty{display:none}.slot{position:absolute;width:30px;height:30px;background-color:var(--black-color);border-radius:50%;border:3px solid transparent;box-shadow:inset 0 0 6px transparent,0 0 13px transparent}.slot.playerOne{border:3px solid var(--player-one);box-shadow:inset 0 0 6px var(--player-one),0 0 13px var(--player-one)}.slot.playerTwo{border:3px solid var(--player-two);box-shadow:inset 0 0 6px var(--player-two),0 0 13px var(--player-two)}.playPage{position:absolute;top:0;left:0;display:none;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:100vh;background-color:var(--black-color);z-index:1}.playPage.active{display:flex}.playPage>h2{font-size:2rem;margin-bottom:9rem}.players{position:relative;display:flex;gap:15rem}.arrow{position:absolute;top:-25px;left:75%;transform:rotate(120deg);width:5px;height:120px;border:2px dashed var(--white-color)}.arrow:after{content:"color picker";position:absolute;top:170px;left:-10px;transform:rotate(240deg);width:max-content;cursor:default}.player{position:relative;width:100px;height:100px;border-radius:50%;border:5px solid transparent;margin-bottom:1.4rem}.playerOne{border-color:var(--player-one);filter:drop-shadow(0 0 10px var(--player-one))}.playerTwo{border-color:var(--player-two);filter:drop-shadow(0 0 10px var(--player-two))}.playerContent{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 2rem;margin-bottom:4rem}input[type=color]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;cursor:pointer;width:30px;height:30px;border-radius:50%;overflow:hidden;border-width:0px}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}.playButton{background-color:var(--black-color);color:var(--white-color);padding:.8rem 6rem;margin-top:6rem;border-radius:10px;font-size:.8rem;font-weight:700;letter-spacing:1px;border:2px solid var(--primary-color);cursor:pointer;transition:background,box-shadow,color,.2s linear}.playButton:hover{background-color:var(--primary-color);color:#000;font-weight:700;box-shadow:0 0 10px var(--primary-color)}