/*
 * Кроссворд (22.08.2026).
 *
 * 🛑 Стили перенесены из `public/bundles/crossword/css/crossword.css`: тот
 * каталог стоит в `.gitignore`, поэтому на сервер файл не доезжал вовсе - и
 * сетка кроссворда выводилась голой таблицей без клеток. Подробности - в
 * комментарии к `assets/controllers/crossword.js`.
 *
 * Оформление приведено к сайту: клетки на песочной подложке вместо серой,
 * номера слов - фирменным оранжевым, шрифт общий. Логика классов сохранена
 * как была (`letter-cell-disabled`, `word-selected`, `word-right`,
 * `word-wrong` расставляет скрипт).
 */

.crossword-wrapper,
.crossword-wrapper * {
    box-sizing: border-box;
}

/* 🛑 Обёртка прокручивается по горизонтали: у широких кроссвордов сетка не
   помещается в колонку телефона, а сжать клетки нельзя - в них вводят буквы. */
.crossword-wrapper {
    display: block;
    max-width: 100%;
    margin: 0 0 var(--sp-30);
    overflow-x: auto;
}

.crossword-wrapper-border {
    display: inline-block;
    padding: var(--sp-8);
    border-radius: var(--r-4);
    background: var(--c-sand-light);
    line-height: 0;
}

.crossword {
    border-collapse: collapse;
}

.crossword .letter-cell {
    padding: 0;
    border: 1px solid var(--c-line-strong);
}

.crossword .letter-cell .letter {
    position: relative;
    width: 28px;
    height: 28px;
    background: var(--c-white);
    font-family: var(--font-main);
    font-size: var(--fs-16);
    line-height: 28px;
    text-align: center;
}

/* Клетка вне слова - тёмная заливка, как в бумажном кроссворде. */
.crossword .letter-cell-disabled .letter {
    background: var(--c-text);
}

.crossword .letter-cell-disabled {
    border-color: var(--c-text);
}

/* Номер слова - в углу первой клетки. */
.crossword .word-num {
    position: absolute;
    top: 1px;
    left: 2px;
    color: var(--c-accent);
    font-size: var(--fs-9);
    font-weight: var(--fw-demibold);
    line-height: 1;
}

.crossword .letter-input {
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-16);
    line-height: 28px;
    text-align: center;
    text-transform: lowercase;
}

/* Выбранное слово подсвечивается целиком - так видно, куда идёт ввод. */
.crossword .word-selected .letter-input,
.crossword .word-selected {
    background: var(--c-sand-bg);
}

/* Проверка ответа: зелёное - верно, красное - нет. Цвета служебные, в палитре
   сайта их нет, поэтому заданы здесь; `!important` остался от исходных стилей -
   он перебивает подсветку выбранного слова. */
.crossword .word-right {
    background: #cdebcd !important;
}

.crossword .word-wrong {
    background: #f6d4d4 !important;
}

/* ---------- Вопросы ---------- */

.crossword-questions {
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.5;
}

.crossword-questions h4 {
    margin: 0 0 var(--sp-8);
    font-size: var(--fs-18);
    font-weight: var(--fw-demibold);
}

.crossword-questions .question {
    padding: var(--sp-4) var(--sp-8);
    border-radius: var(--r-4);
    cursor: pointer;
}

.crossword-questions .question:hover {
    background: var(--c-sand-light);
}

.crossword-questions .question span {
    color: var(--c-accent);
    font-weight: var(--fw-demibold);
}