index.css

body {
    font: 14px "Century Gothic", Futura, sans-serif;
    margin: 20px;
  }
  
  ol, ul {
    padding-left: 30px;
  }
  
  .board-row:after {
    clear: both;
    content: "";
    display: table;
  }
  
  .status {
    margin-bottom: 10px;
  }
  
  .square {
    background: #fff;
    border: 1px solid #999;
    float: left;
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    height: 34px;
    margin-right: -1px;
    margin-top: -1px;
    padding: 0;
    text-align: center;
    width: 34px;
    cursor: inherit;
  }
  
  .square:focus {
    outline: none;
  }
  
  .kbd-navigation .square:focus {
    background: #ddd;
  }
  
  .game {
    display: flex;
    flex-direction: row;
  }
  
  .game-info {
    margin-left: 20px;
  }

  .cursor-X {
    cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAB7CAAAewgFu0HU+AAAGemlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wMS0yMlQxNToxNTo1MyswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0yMlQxNToxNTo1MyswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDEtMjJUMTU6MTU6NTMrMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6YWFmMTdjMGItMTI1ZS1jZDQ0LWIzNWYtZjhmYmJjYWM5MDc2IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDg0MjgxZGUtMDliOC00YTRkLTgzZDYtMWZjYjUyNWJiMTk0IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6YzYzMWI0ZjAtYmQ4Zi01YjQ5LTg1NWItZThhMTY5MDg4ZGRmIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YzYzMWI0ZjAtYmQ4Zi01YjQ5LTg1NWItZThhMTY5MDg4ZGRmIiBzdEV2dDp3aGVuPSIyMDE5LTAxLTIyVDE1OjE1OjUzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDphYWYxN2MwYi0xMjVlLWNkNDQtYjM1Zi1mOGZiYmNhYzkwNzYiIHN0RXZ0OndoZW49IjIwMTktMDEtMjJUMTU6MTU6NTMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDxwaG90b3Nob3A6VGV4dExheWVycz4gPHJkZjpCYWc+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0iWCIgcGhvdG9zaG9wOkxheWVyVGV4dD0iWCIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9Ik8iIHBob3Rvc2hvcDpMYXllclRleHQ9Ik8iLz4gPC9yZGY6QmFnPiA8L3Bob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuOqu3QAAAEQSURBVEiJ3ZXREYJADETfORZgCZRACZSgFYgd2IF0QAmUYAnagXZgCdhB/BBnwpmAoPhBZu6Dy5K9ZG8hiAhTx2JyhlmRLK3NEEIObJvHu4hsvAIhhAw4vLDATkTuLZCImAu4ANKswsGsgJvC5SaugyQBalUgNTClylduLS/RFFmrIpcol+kcsBpFYpy2MMZUW10OIjH0SYFjnw5jSLQ+WmhXh8Ekhj69Oug1xIxnnj54xfXND14M6OQUdSLA+mfjAgqtg9KnBpKvSYj84O2NJuHpB9P1tP1TfkOiddgbB9D+cfXpItAnPTmYVGFcfT7xRE3Xd6l9KUzvWC8lkQ691zQaaxXnQwOaNObzj/8LyQNBwF2gQr6cogAAAABJRU5ErkJggg==) 13 13,auto
  }

  .cursor-O {
    cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAB7CAAAewgFu0HU+AAAGemlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOS0wMS0yMlQxNToxNTozNCswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0yMlQxNToxNTozNCswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTktMDEtMjJUMTU6MTU6MzQrMDg6MDAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjIwMTBmZWYtMTlkZC1kMDQ0LWI4MjYtN2I5YzZjYjk0M2I2IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZTdlOGFkMmYtZjY1Ny05MDQ4LTk4NjItMjk0YjdmNWQ5NWNjIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6OGYyZDM0MzctMmEwNy0wMjRhLThlYTctMzdlZjA3MGZiOTYyIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OGYyZDM0MzctMmEwNy0wMjRhLThlYTctMzdlZjA3MGZiOTYyIiBzdEV2dDp3aGVuPSIyMDE5LTAxLTIyVDE1OjE1OjM0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoyMjAxMGZlZi0xOWRkLWQwNDQtYjgyNi03YjljNmNiOTQzYjYiIHN0RXZ0OndoZW49IjIwMTktMDEtMjJUMTU6MTU6MzQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDxwaG90b3Nob3A6VGV4dExheWVycz4gPHJkZjpCYWc+IDxyZGY6bGkgcGhvdG9zaG9wOkxheWVyTmFtZT0iWCIgcGhvdG9zaG9wOkxheWVyVGV4dD0iWCIvPiA8cmRmOmxpIHBob3Rvc2hvcDpMYXllck5hbWU9Ik8iIHBob3Rvc2hvcDpMYXllclRleHQ9Ik8iLz4gPC9yZGY6QmFnPiA8L3Bob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkhSuTYAAAEoSURBVEiJ3ZZRccMwDECfdwUQBjOEMGgYtBAKYRDKYBA6BoPQFUHLwGGQMtA+6rs6mmV7d8k+pjt9KJH0bEdS7ESEteVldcJfQTatjs45D3j1eBSRsRosIqYCHXAEAiCGhujTmXkKgD0wqYRX4BxVgwPQN0OAIZN8MPzShUyAb4UEFWgfBfRqQacqJB5TGvRW+m4x5qRiZrvJlfBW2V9m1TzlouwhNXKQPjVE5NYAGZXta5Al5LUGGRaA+BpkXAAyk7Ugs0LIQe6p4ZzrGpIWfXKQYjkaUi77TGN55o312dCM6YQIrWPlXYEOv+j2H76lEX/VOyIZkjzGz5nK3CqOemNHlk7A0crjpHKRiH/EPbCL38vHVzce5X4BPkTkbuaoQZaQ/3Nb+QYH0eKVTXyPigAAAABJRU5ErkJggg==) 13 13,auto
  }
  
  .game-board-ctn {
      position: relative;
  }

  .mask-panel {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .mask-panel span{
      color: white;
      background-color: rgba(0, 0, 0, 0.6);
      text-align: center;
      padding: .5rem;
  }

  .last-position {
    color: blue;
  }

  .win-position {
    color: red;
  }

  .oper-btn{
    padding: .5rem 0;
  }

  .tip-position
  {
    animation:tip-ani 1s infinite alternate ease-in-out;
    -moz-animation:tip-ani 1s infinite alternate ease-in-out; /* Firefox */
    -webkit-animation:tip-ani 1s infinite alternate ease-in-out; /* Safari and Chrome */
    -o-animation:tip-ani 1s infinite alternate ease-in-out; /* Opera */
  }

  @keyframes tip-ani
  {
    from {background:white;}
    to {background:#C0FF3E;}
  }

  @-moz-keyframes tip-ani /* Firefox */
  {
    from {background:white;}
    to {background:#C0FF3E;}
  }

  @-webkit-keyframes tip-ani /* Safari and Chrome */
  {
    from {background:white;}
    to {background:#C0FF3E;}
  }

  @-o-keyframes tip-ani /* Opera */
  {
    from {background:white;}
    to {background:#C0FF3E;}
  }