#game-board {
  display: flex;
  flex-direction: column;
}

#game-board .row {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 1.75rem;
}

#game-board .cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  aspect-ratio: 1;
  margin: 0.25rem;
  
  box-sizing: border-box;
  transition: background-color 0.3s ease;
}

#game-board .row:before{
  content: ".";
  width: 0;
  position: relative;
  right: 1rem;
  bottom: 0;
  opacity: 0%;
}

#game-board .row:has(.cell.cell.filled):before{
  opacity: 100%;
  transition: opacity 0.125s ease;
}

#game-board > .row > .cell[data-color-state='0'] {
    border: 1px solid var(--accent);
}

#game-board > .row > .cell[data-color-state='1'] {
    background-color: var(--color-state-1);
}

#game-board > .row > .cell[data-color-state='2'] {
    background-color: var(--color-state-2);
}

#game-board > .row > .cell[data-color-state='3'] {
    background-color: var(--color-state-3);
}

@keyframes cell-filled {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

#game-board .cell.filled {
    animation: cell-filled 0.125s ease-in-out;
}

@keyframes cell-colored {
  0% {
    transform: scale(1, 1);
    background: none;
    border: 1px solid var(--accent);
  }
  50% {
    transform: scale(1, 0);
  }
  100% {
    transform: scale(1, 1);
  }
}

#game-board > .row > .cell:not([data-color-state='0']) {
  animation: cell-colored .5s ease-in-out;
}

@keyframes shake {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-5px, 0);
  }
  40% {
    transform: translate(5px, 0);
  }
  60% {
    transform: translate(-5px, 0);
  }
  80% {
    transform: translate(5px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
  
}

#game-board > .row.shake {
  animation: shake 0.25s ease-in-out;
}