Resolvendo box-shadow quando pressionado a tecla "Enter"

Eu tive o mesmo problema que o Ruan ao finalizar o projeto; quando selecionado a tecla usando enter a tecla não ficava com o mesmo efeito de quando pressionado com a tecla space ou pressionado com o mouse. Porém depois de reler algumas vezes o código acredito ter encontrado um erro no CSS da aula, nele temos:

.tecla.active:focus,
.tecla:active:focus {
  box-shadow: 3px 3px 0 var(--reflexo) inset, 1px 1px 10px var(--luz);
}

Porém não existe uma classe '.active', o correto seria usar a classe que criamos no JavaScript '.ativa'. Logo:

.tecla.ativa:focus,
.tecla:active:focus {
  box-shadow: 3px 3px 0 var(--reflexo) inset, 1px 1px 10px var(--luz);
}

Não sei dizer ao certo porque isso afetou somente o comportamento da tecla enter (se alguém puder esclarecer seria ótimo). Porém ao fazer essa alteração a tecla enter passa a ter o comportamento esperado.

PS: ignorem o nome das variáveis de cores pois eu alterei elas para personalizar o projeto e consequentemente alterei os nomes para ficar mais coerente :)