<div>
    <div class="flex h-centered v-centered">
        <div
            vg-for='i := 0; i < len(c.runeVal); i++'
            :class='"char-box "+c.visibleStateClassFor(i)'
            vg-content='fmt.Sprintf("&nbsp;%s&nbsp;", string(c.runeVal[i]))'>
        </div>
    </div>
</div>

<style>
.char-box {
    background: gray;
    border-bottom-width: 5px;
    font-size: 2.5em;
    width: 58px;
    height: 58px;
    text-align: center;
    text-transform: uppercase;
}

.flex {
    display: flex;
}

.h-centered {
    justify-items: center;
}

.v-centered {
    align-items: center;
}

.revealed{
    display: inline-block;
}

.concealed {
    display: none;
}
</style>