body {
    padding-bottom: 2em;
}

#board thead, #board tfoot {
    line-height: 1em;
}
#board th {
    border: none;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

#board .advantage-indicator {
    display: inline-block;
    padding: .25em 4em;
}
#board tbody .advantage-indicator {
    padding: 4em .25em;
}
#board.blue-double-agent .advantage-indicator {
    background-color: rgb(43, 160, 221);
}
#board.red-double-agent .advantage-indicator {
    background-color: rgb(243, 41, 78);
}

#board tbody {
    /*border: 2px solid rgb(179, 158, 137);*/
}

#board tbody td {
    border: 1px solid rgb(179, 158, 137);
}

#board td {
    padding: .25em;
}
#board td,
.word-card .upper .rounded-circle {
    background: rgb(228, 214, 185);
}

.word-card {
    width: 100%;
    height: 100%;
    padding: .5em;
    margin: 0;
    background: rgb(228, 208, 183);
    border: 3px solid rgb(179, 158, 137);
    border-radius: 10px;
    text-align: center;
    user-select: none;
}

.word-card .upper {
    position: relative;
    padding-bottom: .5em;
}

.word-card .upper .rounded-circle {
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    border: 3px solid rgb(179, 158, 137);
}

.word-card .word-field {
    padding: 4px;
    margin: 0;
    font-weight: bold;
    text-transform: uppercase;
}

.word-card .word-field.main-word {
    background: rgb(219, 224, 253);
    border: 3px solid rgb(233, 231, 238);
}

.word-card .word-field.inverse {
    margin-right: 4em;
    padding-bottom: .75em;
    /*background: rgb(214, 211, 232);*/
    border-top: 3px solid rgb(204, 190, 188);

    color: rgb(113, 113, 114);
    font-style: italic;
    font-size: 0.8em;
    line-height: 0.8em;

    -webkit-transform:rotate(-180deg);
    -moz-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
}

.word-card.flipped * {
    visibility: hidden;
}

.word-card.flipped {
    background-size: cover;
}
.word-card.flipped.male {
    background-image: url('img/civilian-male.jpg');
}
.word-card.flipped.female {
    background-image: url('img/civilian-female.jpg');
}

.word-card.flipped.blue {
    background-color: rgb(0, 60, 114);
}
.word-card.flipped.blue.male {
    background-image: url('img/blue-male.jpg');
}
.word-card.flipped.blue.female {
    background-image: url('img/blue-female.jpg');
}

.word-card.flipped.red {
    background-color: rgb(120, 14, 4);
}
.word-card.flipped.red.male {
    background-image: url('img/red-male.jpg');
}
.word-card.flipped.red.female {
    background-image: url('img/red-female.jpg');
}

.word-card.flipped.assassin {
    background-color: black;
    background-image: url('img/assassin.jpg');
}


#codemaster-toggle {
    margin-right: .5em;
}

.codemaster-symbol {
    display: none;
    height: 2em;
    width: 2em;
    margin: 0;
    padding: 0;
    color: white;
    font-weight: bold;
    box-sizing: border-box;
}
.codemaster-symbol > i, .codemaster-symbol > span, .codemaster-symbol > em {
    display: none;
}

.word-card.blue .codemaster-symbol {
    background-color: rgb(43, 160, 221);
    border: none;
}
.word-card.blue .codemaster-symbol .fa-circle {
    display: block;
    line-height: 2rem;
}

.word-card.red .codemaster-symbol {
    background-color: rgb(243, 41, 78);
    border: none;
}
.word-card.red .codemaster-symbol .fa-square {
    display: block;
    line-height: 2rem;

    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

.word-card.assassin .codemaster-symbol {
    background-color: rgb(80, 80, 80);
    border: none;
}
.word-card.assassin .codemaster-symbol span {
    display: block;
    font-size: 2em;
    line-height: 1.5rem;
}

.word-card.civilian .codemaster-symbol {
    background-color: rgb(179, 158, 137);
}
.word-card.civilian .codemaster-symbol em {
    display: block;
}

.codemaster .codemaster-symbol {
    display: inline-block !important;
}

.codemaster .word-card {
    border: none;
    background: transparent;
    padding: 0;
}
.codemaster .word-card > * {
    display: none;
}

.codemaster #board {
    width: 10em;
    margin: 0 auto;
}
.codemaster #board td {
    border: black;
    background: black;
    vertical-align: middle;
    border: .5em solid black;
}
.codemaster #board thead th, .codemaster #board tfoot th {
    padding: .25em 0;
}

.codemaster #board .advantage-indicator {
    padding: .25em 1em;
}
.codemaster #board tbody .advantage-indicator {
    padding: 1em .25em;
}