html {
    overflow: hidden;
}

body {
    margin: 0;
    min-height: 100dvh;
    font-family: 'Courier New', Courier, monospace;
    color: var(--txt-color1);
    display: flex;
    justify-content: center;
    padding: 20px 14px 24px;
    overflow: hidden
}

.game-shell {
    width: min(440px,100%);
    margin-top: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px
}

.board {
    display: grid;
    gap: 7px
}

.guess-row {
    display: flex;
    gap: 7px
}

.tile {
    width: 52px;
    height: 52px;
    border: 2px solid var(--txt-color1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: transform .25s;
    transform-style: preserve-3d;
    background: var(--bg-color)
}

.keyboard {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 7px;
}

.keyboard-key {
    height: 56px;
    min-width: 31px;
    padding: 0 6px;
    border-radius: 4px;
    background: transparent;
    font-size: .85rem;
    color: var(--txt-color1);
    border-color: var(--txt-color1);
    border-width: 1px;
    cursor: pointer;
    user-select: none
}