/* ============================================================
   САМОПИСНАЯ ЭКРАННАЯ КЛАВИАТУРА — стили (mafia-game)
   Тёмная тема, читаемая поверх дневного и ночного режимов.
   Управляется из keyboard.js (классы .kb-visible, body.custom-kb-open).
   ============================================================ */

:root {
    /* Высота клавиатуры; обновляется из JS. По умолчанию 0 — место не резервируется. */
    --kb-height: 0px;
}

#custom-keyboard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;            /* выше модалок (10000) */
    box-sizing: border-box;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #2a2018 0%, #1b140e 100%);
    border-top: 1px solid rgba(245, 216, 154, 0.18);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.45);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;        /* без скролла/зума по самой панели */
    transform: translateY(110%);
    transition: transform 0.18s ease;
    /* Верхняя граница высоты (для планшетов/больших экранов) */
    max-height: 58vh;
}

#custom-keyboard.kb-visible {
    transform: translateY(0);
}

.kb-keys {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kb-row {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.kb-key {
    flex: 1 1 0;
    min-width: 0;
    min-height: clamp(30px, 7vh, 46px);
    padding: 0 2px;
    margin: 0;
    font-size: clamp(15px, 4.4vmin, 20px);
    font-weight: 600;
    line-height: 1;
    color: #f4ead8;
    background: #3c2f24;
    border: none;
    border-radius: 7px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: background 0.08s ease;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Состояние нажатия (через pointerdown в JS) */
.kb-key.kb-active,
.kb-key:active {
    background: #5a4636;
}

/* Функциональные клавиши — другой оттенок */
.kb-fn {
    background: #2c2219;
    color: #e9d6bb;
    font-size: clamp(13px, 3.6vmin, 17px);
    font-weight: 700;
}

.kb-fn.kb-active,
.kb-fn:active {
    background: #46362a;
}

.kb-space {
    flex: 4 1 0;
    font-size: clamp(12px, 3vmin, 15px);
    color: #b9a98a;
    text-transform: lowercase;
}

.kb-enter {
    background: #6d4529;
    color: #fff;
    flex: 1.4 1 0;
}
.kb-enter.kb-active,
.kb-enter:active { background: #855433; }

.kb-bspace,
.kb-shift,
.kb-mode,
.kb-lang {
    flex: 1.4 1 0;
}

.kb-hide {
    flex: 1.1 1 0;
    font-size: clamp(16px, 4.6vmin, 22px);
}

/* Подсветка активного регистра */
.kb-shift-once {
    background: #4a5a6d;
    color: #fff;
}
.kb-shift-caps {
    background: #3f6d4a;
    color: #fff;
}

/* ============================================================
   Сосуществование с интерфейсом: чтобы активный инпут не уходил
   под клавиатуру, добавляем нижний отступ скроллящимся областям.
   ============================================================ */
body.custom-kb-open #setup-ui {
    padding-bottom: var(--kb-height);
}

/* Любой сфокусированный инпут получает запас снизу для scrollIntoView */
body.custom-kb-open input:focus,
body.custom-kb-open textarea:focus {
    scroll-margin-bottom: calc(var(--kb-height) + 20px);
}