/* Keyboard setup */
#keyboard {
    padding: 0 4px env(safe-area-inset-bottom, 8px) 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.row {
    display: flex;
    justify-content: center;
    gap: 4px;
    width: 100%;
    touch-action: manipulation;
}
.key {
    flex: 1;
    height: 42px;
    max-width: 40px;
    background-color: var(--key-bg);
    color: var(--key-text);
    border: none;
    border-radius: 5px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-family:
        "Special Elite",
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
}
.key:active:not(.disabled) {
    background-color: var(--key-bg-active);
}
.key.disabled {
    background-color: var(--key-disabled);
    color: var(--key-disabled-text);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.4;
}
.key.backspace {
    max-width: none;
    flex: 2;
    background-color: var(--special-key-bg);
    font-size: 24px;
    text-transform: none;
}
.spacer {
    flex: 2;
    max-width: 20px;
}
.key.return {
    max-width: 75px;
    flex: 2;
    background-color: var(--key-bg);
    color: var(--key-text);
    font-size: 18px;
}
.key.space {
    max-width: 230px;
    font-size: 19px;
    flex: 4;
    background-color: var(--key-bg);
    color: var(--key-text);
}
.spacer-left {
    flex: 1;
    max-width: none;
    visibility: hidden;
}