:root{--cell-size:100px;--mark-size:calc(var(--cell-size)*0.9)}.board{width:100vw;height:100vh;display:grid;grid-template-columns:repeat(3,auto);justify-items:center}.board,.cell{justify-content:center;align-content:center;align-items:center}.cell{width:var(--cell-size);height:var(--cell-size);border:1px solid #000;display:flex;position:relative;cursor:pointer}.cell.circle,.cell.x{cursor:not-allowed}.cell:first-child,.cell:nth-child(2),.cell:nth-child(3){border-top:none}.cell:nth-child(7),.cell:nth-child(8),.cell:nth-child(9){border-bottom:none}.cell:nth-child(3n+1){border-left:none}.cell:nth-child(3n){border-right:none}.board.circle .cell:not(.x):not(.circle):hover,.board.x .cell:not(.x):not(.circle):hover{opacity:.3}.board.x .cell:not(.x):not(.circle):hover:after,.board.x .cell:not(.x):not(.circle):hover:before,.cell.x:after,.cell.x:before{content:"";position:absolute;width:calc(var(--mark-size)*0.15);height:var(--mark-size);background-color:#000}.board.x .cell:not(.x):not(.circle):hover:before,.cell.x:before{transform:rotate(45deg)}.board.x .cell:not(.x):not(.circle):hover:after,.cell.x:after{transform:rotate(-45deg)}.board.circle .cell:not(.x):not(.circle):hover:after,.board.circle .cell:not(.x):not(.circle):hover:before,.cell.circle:after,.cell.circle:before{content:"";position:absolute;border-radius:50%}.board.circle .cell:not(.x):not(.circle):hover:before,.cell.circle:before{width:var(--mark-size);height:var(--mark-size);background-color:#000}.board.circle .cell:not(.x):not(.circle):hover:after,.cell.circle:after{width:calc(var(--mark-size)*0.7);height:calc(var(--mark-size)*0.7);background-color:#fff}.winning-message{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.8);display:none;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-size:5rem}.winning-message button{font-size:3rem;background-color:#fff;border:1px solid #000;border-radius:10px;padding:.25em .5rem;cursor:pointer;outline:none;transition:all .5s ease-out}.winning-message button:hover{background-color:#000;color:#fff;border-color:#fff;transition:all .5s ease-in}.winning-message.show{display:flex}#app{font-family:Avenir,Helvetica,Arial,sans-serif}*,:after,:before{box-sizing:border-box}body{margin:0}