:root{--clr-red: hsl(5, 84%, 56%);--clr-red-dark: hsl(5, 84%, 46%);--clr-blue: hsl(230, 95%, 53%);--clr-blue-dark: hsl(230, 95%, 43%);--clr-won: #FFD700}body{display:flex;align-items:center;flex-direction:column;background:#1b1b1b;color:#fff;font-family:Arial,Helvetica,sans-serif}main{display:flex;flex-direction:column;margin:20px}main #won_message{width:100%;text-align:center;font-size:20px;font-weight:500;color:#fff}main #won_message.red{color:var(--clr-red)}main #won_message.blue{color:var(--clr-blue)}main .board_row{display:flex;flex-direction:row;width:min(400px,95vw)}main .board_row .board_cell{position:relative;width:14.2857142857%;font-size:150%;background:#ddd;border:none;outline:1px solid #000;aspect-ratio:1;cursor:pointer;--webkit-appearance: none;color:#000;display:flex;align-items:center;justify-content:center;border-radius:0;margin:0}main .board_row .board_cell.won{background:var(--clr-won)}main .board_row .board_cell .circle{position:absolute;--distance_from_edge: 5px;width:calc(100% - var(--distance_from_edge));aspect-ratio:1;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:50%}main .board_row .board_cell .circle.gray{background:#aaa}main .board_row .board_cell .circle.blue{background:linear-gradient(140deg, var(--clr-blue-dark) 35%, var(--clr-blue) 100%)}main .board_row .board_cell .circle.red{background:linear-gradient(140deg, var(--clr-red-dark) 35%, var(--clr-red) 100%)}main .board_row .board_cell .text{position:absolute;z-index:10}main .board_row .board_cell[data-state=cross] button{background:var(--clr-red)}main .board_row .board_cell[data-state=circle] button{background:var(--clr-blue)}main .board_row .board_cell[data-state=disabled] button{opacity:.3;pointer-events:none}#interface{width:100%;max-width:400px;display:flex;flex-direction:column;gap:20px}#interface .turn{width:100%;display:flex;justify-content:space-evenly;margin-bottom:10px}#interface .turn button{height:50px;aspect-ratio:1;border-radius:50%;cursor:pointer}#interface .turn button.active{border:5px solid #fff}#interface .turn button.active.won{border:5px solid var(--clr-won)}#interface .turn button.red{background:var(--clr-red)}#interface .turn button.blue{background:var(--clr-blue)}#interface .controlls{display:flex;justify-content:space-evenly;flex-direction:row;width:100%}#interface button,#interface select{font-size:20px;border-radius:2px;color:#fff;background:none;border:none}#interface button option,#interface select option{color:#000}#interface #undo{height:30px;aspect-ratio:1;background:none;border:none}#interface #undo img{height:100%;filter:invert(100%)}/*# sourceMappingURL=main.css.map */