/**
 * Поле-приёмник нажатий для гонок на телефоне.
 *
 * Движок гонки построен на keydown и рисует текст сам. Поле здесь нужно
 * только затем, чтобы открылась экранная клавиатура: всё, что в него попадает,
 * public/js/typing-keyfeed.js превращает в нажатия и отправляет документу, а
 * само поле тут же очищает.
 */

/*
 * Поле уводим за край, а не прячем: display:none и visibility:hidden не дают
 * полю фокус, и клавиатура не открывается. Размер ненулевой по той же причине.
 *
 * position: fixed, а не absolute: игровой экран — полноэкранная накладка с
 * собственным контекстом прокрутки, и absolute уехало бы вместе с ней.
 */
.cw-keyfeed-input {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    padding: 0;
    border: 0;
}

/* Подсказка о том, как вернуть закрытую клавиатуру. Показывается только на
   сенсорных устройствах — на компьютере возвращать нечего. */
.cw-keyfeed-hint {
    text-align: center;
    font-size: .8125rem;
    line-height: 1.4;
    padding: .5rem .75rem;
    color: rgba(255, 255, 255, .75);
}

/*
 * Правки игрового экрана под узкие экраны. Всё под (pointer: coarse), так что
 * на компьютере не меняется ничего — даже если окно сузили.
 */
@media (pointer: coarse) {
    /* Верхняя панель на телефоне не помещается в строку: разрешаем перенос и
       ужимаем отступы, иначе счётчики выдавливают друг друга. */
    #game-screen .battle-topbar { padding: .5rem .75rem; }

    #game-screen .battle-topbar > div {
        flex-wrap: wrap;
        gap: .5rem;
        justify-content: center;
    }

    #game-screen .battle-panel-head { padding: .5rem .75rem; }

    /* Заголовки панелей: имя игрока и счётчики в одну строку не влезают. */
    #game-screen .battle-panel-head > div {
        flex-wrap: wrap;
        gap: .5rem;
    }

    /* Текст гонки: кегль поменьше и межбуквенный интервал в ноль — на узком
       экране каждый лишний полупиксель на знак стоит целого слова в строке. */
    #game-screen .game-text {
        font-size: .9375rem;
        letter-spacing: 0;
        line-height: 1.6;
    }

    /* Панель соперника на телефоне занимает половину и без того короткого
       экрана. Оставляем ей треть: следить за чужим прогрессом достаточно по
       процентам в шапке. */
    #game-screen .battle-panel:last-child { flex: 0 1 32%; }
}