:root{--size: 3;--tile-size: 60px}*,*::after,*::before{-webkit-box-sizing:border-box;box-sizing:border-box}body{margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background:#f8f9fa;color:#495057;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.brand{text-decoration:none}.brand h1{color:#343a40}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;text-align:center;gap:2rem}header h6{margin:0;margin-bottom:0.5rem;font-size:0.8rem;letter-spacing:0.15rem;color:#6c757d;text-transform:uppercase}header .players{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:2rem}header .players span{font-weight:bold}header .current-player h4{margin:0;text-transform:uppercase;color:#198754;letter-spacing:0.1rem}.board{display:-ms-grid;display:grid;-ms-grid-columns:(var(--tile-size))[var];grid-template-columns:repeat(var(--size), var(--tile-size));-ms-grid-rows:(var(--tile-size))[var];grid-template-rows:repeat(var(--size), var(--tile-size));padding:0.4rem;gap:0.4rem;cursor:pointer;margin-top:1rem}.board .tile{height:var(--tile-size);width:var(--tile-size);background-color:#21ca56;border-radius:0.25rem;cursor:pointer;font-size:2rem;color:#000;display:-ms-grid;display:grid;place-items:center;font-weight:bold;position:relative}.board .tile.striked{background:#b9f7c9;color:#495057}.board .tile.striked .strike{position:absolute;height:3px;width:100%;background:#ffc107;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.board .tile.striked.PLAYER1 .strike{background:#fd7e14}.board .tile.striked.PLAYER2 .strike{background:#dc3545}.board .tile.striked.horizontal-strike .strike.horizontal-strike-center{-webkit-transform:translate(-50%, -50%) rotate(0);transform:translate(-50%, -50%) rotate(0);width:130%}.board .tile.striked.vertical-strike .strike.vertical-strike-start,.board .tile.striked.vertical-strike .strike.vertical-strike-center,.board .tile.striked.vertical-strike .strike.vertical-strike-end{-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg)}.board .tile.striked.vertical-strike .strike.vertical-strike-center{width:130%}.board .tile.striked.strike-left-to-right .strike.strike-left-to-right-start,.board .tile.striked.strike-left-to-right .strike.strike-left-to-right-center,.board .tile.striked.strike-left-to-right .strike.strike-left-to-right-end{width:calc(var(--tile-size) + 20px);-webkit-transform:translate(-50%, -50%) rotate(45deg);transform:translate(-50%, -50%) rotate(45deg)}.board .tile.striked.strike-left-to-right .strike.strike-left-to-right-center{width:180%}.board .tile.striked.strike-right-to-left .strike.strike-right-to-left-start,.board .tile.striked.strike-right-to-left .strike.strike-right-to-left-center,.board .tile.striked.strike-right-to-left .strike.strike-right-to-left-end{width:calc(var(--tile-size) + 20px);-webkit-transform:translate(-50%, -50%) rotate(135deg);transform:translate(-50%, -50%) rotate(135deg)}.board .tile.striked.strike-right-to-left .strike.strike-right-to-left-center{width:180%}.board .tile:not(.striked):hover{background-color:#3ee071}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000;opacity:0.5;display:none}.modal-backdrop.show{display:block}.winner-modal{display:none;position:fixed;background-color:#fff;z-index:1041;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border-radius:0.4rem;min-width:330px}.winner-modal .modal{border:1px solid rgba(0,0,0,0.2);padding:1rem 2rem;max-width:600px;padding-top:0.6rem}.winner-modal .modal-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.winner-modal .modal-header h2{margin-bottom:0.3rem}.winner-modal .modal-body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:1.5rem}.winner-modal .modal-body .players{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;text-align:center;margin-bottom:1.8rem;gap:3rem}.winner-modal .modal-body h6{font-size:1.1rem;color:#6c757d;margin:0;margin-bottom:0.5rem;text-transform:uppercase}.winner-modal .modal-body span{font-size:1.125rem;font-weight:bold}.winner-modal .modal-body .btn{-ms-flex-item-align:end;align-self:flex-end}.winner-modal.show{display:block}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#212529;cursor:pointer;background-color:transparent;border:1px solid transparent;padding:0.375rem 0.75rem;font-size:1rem;border-radius:0.25rem}.btn-success{color:#fff;background-color:#198754;border-color:#198754}.game-modal .modal{z-index:1045;position:relative;background:#fff;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);padding:1.5rem;border-radius:1rem;width:95%;max-width:25rem}.game-modal .modal .modal-header{margin-bottom:1.3rem}.game-modal .modal .modal-header .modal-title{margin:0;color:#343a40;font-size:1.6rem}.form .form-group{margin-bottom:1rem}.form .form-label{display:block;margin-bottom:0.5rem;color:#212529;font-size:1rem;line-height:1.5;font-weight:400}.form .form-control{display:block;width:100%;padding:0.375rem 0.75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1.6px solid #ced4da;border-radius:0.25rem;outline:none;-webkit-transition:200ms ease border-color;transition:200ms ease border-color}.form .form-control:focus{border-color:#6f42c1}.btn{display:inline-block;padding:0.375rem 1rem;font-size:1rem;font-family:inherit;border:1px solid transparent;border-radius:0.25rem;line-height:1.5;letter-spacing:0.03em;font-weight:400;cursor:pointer;-webkit-transition:300ms ease background-color;transition:300ms ease background-color}.btn-primary{background-color:#6f42c1;color:#fff;border-color:#4e2d89}.btn-primary:hover,.btn-primary:focus{outline:none;background-color:#59339d}.cta-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-top:1.5rem}.d-none{display:none !important}
/*# sourceMappingURL=style.css.map */