/**
 * Мобильный тест скорости печати.
 *
 * Разметка — resources/views/speed_test/_mobile.blade.php, движок —
 * public/js/speed-test-mobile.js поверх общего public/js/typing-mobile.js.
 *
 * Стили лежат отдельным файлом, потому что тест показывается в двух местах:
 * на своей странице /speed_test и на главной, куда он приезжает отдельным
 * запросом. Раньше правила жили в блоке styles страницы теста — на главной
 * их бы просто не было.
 */

/* ---------------------------------------------------------------
   Мобильный тест (разметка — speed_test/_mobile.blade.php).
   Стили держим здесь, а не в партиале: пуш в стек styles из
   включаемого файла случился бы уже после отрисовки head.
   --------------------------------------------------------------- */

.mst-preview,
#mst .mst-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Inter', Arial, sans-serif;
    font-size: 1.25rem;
    line-height: 1.9;
    word-break: break-word;
}

/* Высота ограничена так, чтобы текст остался над экранной клавиатурой:
   та занимает примерно половину экрана, и без потолка поле уезжает под
   неё вместе с курсором. Внутри — прокрутка к текущему символу. */
#mst .mst-text {
    max-height: 34vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    cursor: text;
}

/* Слово — неразрывный блок, перенос разрешён только по пробелам между
   ними. Иначе каждая буква переносится сама по себе и слова рвутся
   посередине. Пробел вынесен в отдельную обёртку и переносу не мешает. */
#mst .mst-w {
    display: inline-block;
    white-space: nowrap;
}

/* На узких экранах строка вмещает около 26 знаков — длиннее русские
   слова практически не встречаются. Кегль снижаем на самых узких,
   чтобы запас остался и там. */
@media (max-width: 360px) {
    #mst .mst-text { font-size: 1.125rem; }
}

#mst .mst-ch {
    display: inline-block;
    white-space: pre;
    border-radius: 3px;
    transition: background-color .12s linear, color .12s linear;
}

#mst .mst-ch.is-ok  { color: #059669; }
#mst .mst-ch.is-bad { color: #fff; background: #ef4444; }

/* Текущий символ подчёркиваем, а не заливаем: заливка под пальцем
   читается как «уже набрано». */
#mst .mst-ch.is-cur {
    box-shadow: inset 0 -3px 0 0 #2563eb;
    background: rgba(37, 99, 235, .10);
}

[data-theme="dark"] #mst .mst-ch          { color: #cbd5e1; }
[data-theme="dark"] #mst .mst-ch.is-ok    { color: #34d399; }
[data-theme="dark"] #mst .mst-ch.is-bad   { color: #fff; background: #dc2626; }
[data-theme="dark"] #mst .mst-ch.is-cur   { background: rgba(96, 165, 250, .18); }

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