1.grid{
  2    display: grid;
  3    position: relative;
  4    grid-template-columns: repeat(3, 1fr);
  5    grid-gap: 1px;
  6    margin-top: 20px;
  7    height: 300px;
  8    width: 300px;
  9    background-color: white;
 10    opacity: 0.8;
 11}
 12
 13.cell{
 14    position: relative;
 15    display: flex;
 16    justify-content: center;
 17    align-items: center;
 18    font-size: 2em;
 19    cursor: pointer;
 20    background-color: black;
 21    height: 100px;
 22}
 23
 24#tooltip{
 25    margin-top: 20px;
 26    color: var(--gold);
 27}
 28
 29.strike-line{
 30    position: absolute;
 31    border: 3px solid var(--gold);
 32    height: 100%;
 33    background-color: var(--gold);
 34    opacity: 0.5;
 35    z-index: 1;
 36    visibility: hidden;
 37}
 38
 39.strike-line.horizontal, .strike-line.vertical, .strike-line.forward, .strike-line.backward{
 40    animation: strike 0.5s ease;
 41}
 42
 43.strike-line.horizontal{
 44    rotate: 0deg;
 45    margin-left: 47px;
 46    visibility: visible;
 47}
 48
 49.strike-line.horizontal.col0{
 50    left: 0;
 51}
 52
 53.strike-line.horizontal.col1{
 54    left: 100px;
 55}
 56
 57.strike-line.horizontal.col2{
 58    left: 200px;
 59}
 60
 61.strike-line.vertical{
 62    rotate: 90deg;
 63    margin-top: 50px;
 64    left: 150px;
 65    visibility: visible;
 66}
 67
 68.strike-line.vertical.row0{
 69    top: -150px;
 70}
 71
 72.strike-line.vertical.row1{
 73    top: -50px;
 74}
 75
 76.strike-line.vertical.row2{
 77    top: 50px;
 78}
 79
 80.strike-line.forward{
 81    height: 130%;
 82    top: -50px;
 83    left: 150px;
 84    rotate: 45deg;
 85    visibility: visible;
 86}
 87
 88.strike-line.backward{
 89    height: 130%;
 90    top: -40px;
 91    left: 150px;
 92    rotate: -45deg;
 93    visibility: visible;
 94}
 95
 96@keyframes strike{
 97    0%{
 98        transform: scale(0);
 99    }
100    100%{
101        transform: scale(1);
102    }
103}