#level-board { position:relative;z-index:100;text-align:center;width:100%;}

.hint-bank { width:100%;display:block;}

.letter {
    text-decoration: none !important;
}
#level-board .word { width:auto;display:inline-block;}
#level-board .word { width:auto;display:inline-block;}

#level-board { --board-width:calc(var(--wk-width) * 0.80);--max-word-size:8;--word-size:calc(var(--board-width)  / var(--max-word-size));}

#level-board[data-max-selsize="1"] { --max-word-sel-size:6;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="2"] { --max-word-sel-size:6;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="3"] { --max-word-sel-size:6;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="4"] { --max-word-sel-size:5;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="5"] { --max-word-sel-size:6;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="6"] { --max-word-sel-size:7;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="7"] { --max-word-sel-size:8;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="8"] { --max-word-sel-size:9;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="9"] { --max-word-sel-size:10;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="10"] { --max-word-sel-size:11;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="11"] { --max-word-sel-size:12;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }
#level-board[data-max-selsize="12"] { --max-word-sel-size:13;--word-sel-size:calc(var(--board-width) / var(--max-word-sel-size)); }

#level-board .word-clear,
#level-board .letter:focus,
#level-board .letter {
    color: #fff;
    font-weight: bold;
    font-size: calc(var(--word-size) * 0.6);
    width:auto;
    padding-left:5px;padding-right:5px;
    height:var(--word-size);
    margin: 2px;
    line-height:1em;
    pointer-events:all;
    overflow:hidden;
    text-align: center;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    float:left;
}

@media screen and (max-width:600px) {
    #level-board .letter {
        margin: 1px;
    }
}

#level-board .word-clear {
    font-size: calc(var(--word-sel-size) * 0.4) !important;
    width:auto;
    margin-right:10px !important;
    padding-left:5px;padding-right:5px;
    height:var(--word-sel-size);
}

#level-board .letter:focus,
#level-board .word_1_container .letter,
#level-board .word_2_container .letter {
    font-size: calc(var(--word-sel-size) * 0.6) !important;
    width:var(--word-sel-size);
    padding-left:0px;padding-right:0px;
    height:var(--word-sel-size);
}

#level-board .letter:focus.selected,
#level-board .letter:hover.selected,
#level-board .letter.selected { background:rgba(255,255,255,0.2);border-color:#fff;position:relative;}
#level-board .letter.selected:after {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 4px;
    height: calc(100% - 16px);
    content: '';
    opacity: 0;
    display: block;
    background: #fffc;
    animation: blink 530ms linear infinite alternate;
}
#level-board  .letter:focus.incorrect,
#level-board  .letter:hover.incorrect,
#level-board  .letter.incorrect {  background:var(--clr-red);
    background-image: linear-gradient(bottom, var(--clr-dark-red) 0%, var(--clr-red) 100%);
    background-image: -o-linear-gradient(bottom, var(--clr-dark-red) 0%, var(--clr-red) 100%);
    background-image: -moz-linear-gradient(bottom, var(--clr-dark-red) 0%, var(--clr-red) 100%);
    background-image: -webkit-linear-gradient(bottom, var(--clr-dark-red) 0%, var(--clr-red) 100%);
    border:1px solid transparent;
    box-shadow:0 0 10px rgba(0,0,0,0.6);
    background-image: -ms-linear-gradient(bottom, var(--clr-dark-red) 0%, var(--clr-red) 100%);color:#fff;}
#level-board  .letter:focus.locked,
#level-board  .letter:hover.locked,
#level-board  .letter.locked { background:#3338;color:#fff;border-color:1px solid rgba(255,255,255,0.6);}
#level-board  .letter:hover.correct,
#level-board  .letter.correct {      background:var(--clr-green);
    background-image: linear-gradient(bottom, var(--clr-dark-green) 0%, var(--clr-green) 100%);
    background-image: -o-linear-gradient(bottom, var(--clr-dark-green) 0%, var(--clr-green) 100%);
    border:1px solid transparent;
    box-shadow:0 0 10px rgba(0,0,0,0.6);
    background-image: -moz-linear-gradient(bottom, var(--clr-dark-green) 0%, var(--clr-green) 100%);
    background-image: -webkit-linear-gradient(bottom, var(--clr-dark-green) 0%, var(--clr-green) 100%);
    background-image: -ms-linear-gradient(bottom, var(--clr-dark-green) 0%, var(--clr-green) 100%);color:#fff;}

.word { margin:0;}
.word:first-child { margin-bottom:10px;}
.word:last-child { margin:0;}
.word_1_container { margin-bottom:0 !important;}
.word_2_container { margin-bottom:10px !important;}


@media screen and (max-width:600px) {
    .word:first-child { margin-bottom:6px;}
    .word:last-child { margin:0;}
    .word_1_container { margin-bottom:0 !important;}
    .word_2_container { margin-bottom:6px !important;}
}

#level-board .letter-selectable:focus,
#level-board .letter-selectable {  }

.word-complete .letter-selectable { pointer-events:none; }
#level-board .word-clear { float:none !important;}

#level-board .word-clear { display:none;right:100%;position:absolute;justify-content: center;align-items:center;text-decoration: none; }