/**
 * assets/css/keyboard.css — игровая клавиатура (§51, §62 ТЗ).
 *
 * Своя клавиатура нужна потому, что системная в мини-приложении ломает
 * экран: на Android она сжимает видимую высоту, на iOS накрывает поле, а
 * жест её закрытия сворачивает само приложение. Разметку строит
 * modules/ui/keyboard.js, здесь — только раскладка и размеры.
 *
 * Материал (корпус, кромка, грань, нажатие, золото «ГОТОВО») живёт в
 * §27 ui-frame.css: рама подключена последней, и объявление цвета отсюда
 * до экрана не дожило бы.
 */

.tam-kbd {
    /* Промежуток между клавишами входит в расчёт их ширины ниже, поэтому
       он назван, а не написан числом в двух местах. */
    --tam-kbd-gap: var(--ui-space-1);

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--tam-z-keyboard);   /* выше окон, ниже тоста и подсказки */
    display: none;
    flex-direction: column;
    gap: var(--tam-kbd-gap);
    padding: var(--ui-space-2) var(--ui-space-1)
             calc(var(--ui-space-2) + var(--tam-inset-bottom, 0px));
    /* Касание по клавиатуре не должно прокручивать страницу под ней. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.tam-kbd.is-on { display: flex; }

.tam-kbd__row {
    display: flex;
    gap: var(--tam-kbd-gap);
    justify-content: center;
}

/*
 * Ширина клавиши считается от самого длинного ряда раскладки.
 *
 * У русской раскладки в верхнем ряду двенадцать знаков, у английской —
 * десять. Фиксированная ширина в 9 % оставляла бы русскому ряду пустоту
 * справа или выносила бы его за край. Число колонок приносит JS в
 * --tam-kbd-cols.
 */
.tam-kbd__key {
    flex: 0 0 auto;
    width: calc((100% - (var(--tam-kbd-cols, 10) - 1) * var(--tam-kbd-gap))
                / var(--tam-kbd-cols, 10));
    min-width: 0;
    /* Минимальная высота тапа: ниже 44px попадать пальцем уже тяжело,
       а места на низком экране мало — отсюда именно она, а не --ui-tap. */
    height: var(--ui-tap-min);
    padding: 0;
    border-radius: var(--ui-radius-sm);
    font-family: var(--ui-font-main);
    font-size: var(--ui-size-section);
    font-weight: var(--ui-weight-section);
    line-height: 1;
    cursor: pointer;
}

/* Клавиша садится вниз на свою грань — грань гасит §27 рамы. */
.tam-kbd__key:active { transform: translateY(var(--ui-press)); }

.tam-kbd__key svg {
    width: 20px;
    height: 20px;
}

/*
 * Служебные клавиши.
 *
 * У них подписи словами, и слова разной длины: «ГОТОВО», «TERMINÉ»,
 * «LEERTASTE». Ширину здесь задаёт содержимое, а не доля ряда — иначе на
 * узком экране французское «TERMINÉ» обрезалось до «TERMIN». Нижняя
 * граница ширины оставлена, чтобы ряд не рассыпался на разные размеры.
 */
.tam-kbd__row--tools .tam-kbd__key {
    font-family: var(--ui-font-condensed);
    font-size: var(--ui-size-small);
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tam-kbd__key--wide {
    flex: 0 1 auto;
    width: auto;
    min-width: calc((100% - (var(--tam-kbd-cols, 10) - 1) * var(--tam-kbd-gap))
                    / var(--tam-kbd-cols, 10) * 1.2);
    padding: 0 var(--ui-space-2);
}

/* Пробел забирает всё, что осталось от служебного ряда. */
.tam-kbd__key--space {
    flex: 1 1 auto;
    width: auto;
}

/*
 * Пока клавиатура открыта, низ страницы поднимается на её высоту.
 *
 * Иначе поле ввода оказывается ровно под ней: игрок печатает вслепую.
 * Своего правила здесь для этого больше нет — и не потому, что оно
 * лишнее: `body.tam-kbd-open .page` весит два класса, а низ разделов
 * задаёт `mvp.css` селектором с пятью `:not([data-page=...])`, и тот
 * выигрывал всегда. Вместо борьбы за вес keyboard.js на время показа
 * подставляет высоту клавиатуры в --tam-nav-h: низ страницы игра везде
 * считает от него, а меню под клавиатурой всё равно спрятано.
 */
body.tam-kbd-open .trumpamole__bottom-nav { display: none; }

/* Низкий экран: клавиша ужимается, иначе на клавиатуру уходит пол-экрана.
   Промежуток трогать больше нечем — он и так минимальный шаг шкалы. */
@media (max-height: 640px) {
    .tam-kbd__key { height: 38px; font-size: 15px; }
}