Simple 'Hangman' Game

HTML

<h1>Simple 'Hangman' Game</h1>

<p>[no people will actually be harmed during this game]</p>
<form id="hangman">
    <input type="text" maxlength="1" minlength="1" name="letter" id="letter" placeholder="Guess a letter" />
    <input id="guess" name="guess" type="submit" value="Guess" />
    <button id="restart" name="restart" type="button">Restart</button>
</form>
<ul id="letters"></ul>
<p id="man"></p>
<p id="output" class="output"></p>

CSS

* {
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
}
/* Keep it simple - improvement would be to not display characters */
 .letter {
    display: inline-block;
    list-style: none;
    width: 20px;
    margin: 0 5px;
    border-bottom: 1px solid black;
    text-align: center;
    color: white;
}
.current-word {
    list-style: none;
}
.output {
    opacity: 0;
    transition: opacity 1s ease;
}
.correct {
    background-color: green;
    transition: all 1s ease;
}
.error {
    color: red;
    opacity: 1;
}
.warning {
    color: orange;
    opacity: 1;
}
.win {
    color: green;
    opacity: 1;
}

JavaScript

(function () {
    "use strict";
    var availableLetters, words, guessInput, guess, guessButton, lettersGuessed, lettersMatched, output, man, letters, lives, currentWord, numLettersMatched, messages;

    function setup() {
        /* start config options */
        availableLetters = "abcdefghijklmnopqrstuvwxyz";
        lives = 5;
        words = ["cat", "dog", "cow", "reindeer"];
        messages = {
            win: 'You win!',
            lose: 'Game over!',
            guessed: ' already guessed, please try again...',
            validLetter: 'Please enter a letter from A-Z'
        };
        /* end config options */

        lettersGuessed = lettersMatched = '';
        numLettersMatched = 0;

        /* choose a word */
        currentWord = words[Math.floor(Math.random() * words.length)];

        /* make #man and #output blank, create vars for later access */
        output = document.getElementById("output");
        man = document.getElementById("man");
        guessInput = document.getElementById("letter");

        man.innerHTML = 'You have ' + lives + ' lives remaining';
        output.innerHTML = '';

        document.getElementById("letter").value = '';

        /* make sure guess button is enabled */
        guessButton = document.getElementById("guess");
        guessInput.style.display = 'inline';
        guessButton.style.display = 'inline';

        /* set up display of letters in current word */
        letters = document.getElementById("letters");
        letters.innerHTML = '<li class="current-word">Current word:</li>';

        var letter, i;
        for (i = 0; i < currentWord.length; i++) {
            letter = '<li class="letter letter' + currentWord.charAt(i).toUpperCase() + '">' + currentWord.charAt(i).toUpperCase() + '</li>';
            letters.insertAdjacentHTML('beforeend', letter);
        }
    }

    function gameOver(win) {
        if (win) {
            output.innerHTML = messages.win;
           ...