.toggleClass() não funciona | jQuery: domine a biblioteca mais popular do mercado parte 1

Na função reiniciaJogo, quando chamo: campo.toggleClass("campo-desativado");

O campo não volta para a cor branca. Entretanto, quando uso: campo.removeClass("campo-desativado");

O comportamento esperado é alcançado. Alguem pode me explicar porque?

Codigo detalhado:

function inicializaCronometro() {

    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function() {
      $("#botao-reiniciar").attr("disabled",true);
        var cronometroID = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
                campo.attr("disabled", true);
                clearInterval(cronometroID);
                campo.addClass("campo-desativado");
                $("#botao-reiniciar").attr("disabled", false);
            }
        }, 1000);
    });
}

  $("#botao-reiniciar").click(reiniciaJogo);

function reiniciaJogo(){
    campo.attr("disabled", false);
    campo.removeClass("campo-desativado");
    campo.val("");

    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");

    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();

    campo.removeClass("borda-vermelha");
    campo.removeClass("borda-verde");
}

Ok Wanderson, segue o código:

html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <div class="container">
    <h1>Alura Typer</h1>
    <p class="frase">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <ul class="informacoes center">
      <li>
        <i class="small material-icons icones">description</i>
        <span id="tamanho-frase">5</span> palavras
      </li>
      <li>
        <i class="small material-icons icones">query_builder</i>
        <span id="tempo-digitacao">5</span> segundos
      </li>
    </ul>

    <textarea class="campo-digitacao" rows="8" cols ="40"></textarea>

    <button class="btn-floating btn-large waves-effect waves-light red" id="botao-reiniciar">
         <i class="material-icons">restore</i>
    </button>

    <ul>
        <li><span id="contador-caracteres">0</span> caracteres</li>
        <li><span id="contador-palavras">0</span> palavras</li>
    </ul>
  </div>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

css:

.campo-digitacao {
    font-size: 20px;
    height: 130px;
}

.frase {
    font-size: 20px;
    text-align: left;
}

.campo-desativado {
    background-color: lightgray;
}

.icones {
    vertical-align: middle;
}

.borda-verde {
    border: 3px solid green;
}

.borda-vermelha {
    border: 3px solid red;
}

js:

var campo = $(".campo-digitacao");
var tempoInicial = $("#tempo-digitacao").text();

$(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaMarcadores();
    $("#botao-reiniciar").click(reiniciaJogo);
});


function atualizaTamanhoFrase() {

    var frase = $(".frase").text();
    var numPalavras  = frase.split(" ").length;
    var tamanhoFrase = $("#tamanho-frase");
    tamanhoFrase.text(numPalavras);
}

function inicializaContadores() {

    campo.on("input", function() {
        var conteudo = campo.val();

        var qtdPalavras = conteudo.split(/\S+/).length - 1;
        $("#contador-palavras").text(qtdPalavras);

        var qtdCaracteres = conteudo.length;
        $("#contador-caracteres").text(qtdCaracteres);

    });
}

function inicializaCronometro() {

    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function() {
      $("#botao-reiniciar").attr("disabled",true);
        var cronometroID = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
                campo.attr("disabled", true);
                clearInterval(cronometroID);
                campo.addClass("campo-desativado");
                $("#botao-reiniciar").attr("disabled", false);
            }
        }, 1000);
    });
}

$("#botao-reiniciar").click(reiniciaJogo);

function reiniciaJogo(){
    campo.attr("disabled", false);
    campo.removeClass("campo-desativado");
    campo.val("");

    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");

    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro();

    campo.removeClass("borda-vermelha");
    campo.removeClass("borda-verde");
}


function inicializaMarcadores() {

    var frase = $(".frase").text();
    campo.on("input", function() {
      var digitado = campo.val();

      if(frase.startsWith(digitado)) {
          campo.addClass("borda-verde");
          campo.removeClass("borda-vermelha");
      } else {
          campo.addClass("borda-vermelha");
          campo.removeClass("borda-verde");
      }

    });
}