/* crossword/crossword.css
   Стили кроссворда. Дополняют themes/default.css, а не заменяют его: цвета,
   кнопки, модальные окна и тёмная тема берутся оттуда — новый режим не заводит
   собственную цветовую схему (то же правило, что у детектива).
*/

/* --- Панель состояния --- */

.qc-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--qf-text-muted);
}

.qc-status-bar > div {
  white-space: nowrap;
}

/* --- Строка активной подсказки ---
   Закреплена над сеткой. На телефоне это главный способ читать задание: сетка
   на 20-30 слов занимает экран целиком, и уходить к списку подсказок за каждым
   словом невозможно. На десктопе она тоже полезна — глазами не надо искать
   строку в длинном списке. */

.qc-current-clue {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: var(--qf-surface);
  border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius);
  box-shadow: var(--qf-shadow);
  padding: 8px 10px;
  margin-bottom: 12px;
}

.qc-current-clue-body {
  flex: 1 1 auto;
  min-width: 0;
}

.qc-current-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--qf-text-muted);
  margin-bottom: 2px;
}

.qc-current-text {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  color: var(--qf-text);
}

.qc-clue-nav {
  flex: 0 0 auto;
  width: 38px;
  border: 1px solid var(--qf-border);
  background: var(--qf-row-bg);
  color: var(--qf-text);
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.qc-clue-nav:hover {
  background: var(--qf-dropzone-active-bg);
}

/* --- Сетка --- */

.qc-grid-wrap {
  /* Сетка шире экрана прокручивается вбок, а не сжимается до нечитаемости:
     клетка мельче ~32px превращает попадание пальцем в лотерею. */
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}

.qc-grid-wrap.qc-scrolls {
  border-bottom: 1px dashed var(--qf-border);
}

.qc-grid {
  --qc-cell: 38px;
  display: grid;
  gap: 0;
  width: max-content;
  margin: 0 auto;
  background: var(--qf-border);
  border: 2px solid var(--qf-text);
  border-radius: 4px;
  overflow: hidden;
}

.qc-cell {
  position: relative;
  width: var(--qc-cell);
  height: var(--qc-cell);
  box-sizing: border-box;
  border-right: 1px solid var(--qf-border);
  border-bottom: 1px solid var(--qf-border);
  background: var(--qf-input-bg);
}

/* Закрашенная клетка — любая, не покрытая ни одним словом. Отдельно их в файле
   не перечисляют.
   Цвет по умолчанию следует теме: на светлой тёмный, на тёмной светлый. Но
   учитель может задать свой (meta.blockedColor) — тогда он подставляется в
   --qc-blocked инлайном и работает в обеих темах, потому что это осознанный
   выбор оформления, а не следствие текущей темы. */
.qc-blocked {
  background: var(--qc-blocked, var(--qf-text));
}

.qc-num {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 9px;
  line-height: 1;
  color: var(--qf-text-muted);
  pointer-events: none;
  user-select: none;
}

.qc-input {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--qf-text);
  /* Размер буквы привязан к размеру клетки: на телефоне клетка мельче, и
     фиксированный кегль либо не влезал бы, либо терялся. */
  font-size: calc(var(--qc-cell) * 0.52);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  caret-color: transparent;
}

.qc-cell.qc-active {
  background: var(--qf-dropzone-active-bg);
}

.qc-cell.qc-focus {
  box-shadow: inset 0 0 0 2px var(--qf-primary);
}

/* Буква защищена, если входит в слово, открытое подсказкой или уже проверенное
   и верное. Иначе набранное поверх ломало бы уже сделанное: открытое слово
   становилось бы «неверным», а стирание соседнего неверного слова уносило
   букву на пересечении из слова, которое ученик уже сдал. */
.qc-cell.qc-locked .qc-input {
  cursor: default;
}

/* Слово проверено и верно. Красится СЛОВО целиком, а не отдельная угаданная
   буква: побуквенная подсветка превратила бы «Проверить» в тренажёр подбора.
   Тёмная тема наследует те же переменные, что и остальной проект. */
.qc-cell.qc-correct {
  background: var(--qf-success-bg);
}

.qc-cell.qc-correct .qc-input {
  color: var(--qf-success);
}

.qc-cell.qc-locked:not(.qc-correct) .qc-input {
  color: var(--qf-text-muted);
}

/* Подсветка активного слова не должна съедать зелёный: иначе, перейдя на уже
   разгаданное слово, ученик перестаёт видеть, что оно сдано. */
.qc-cell.qc-active.qc-correct {
  background: var(--qf-success-bg);
}

/* Проверка сообщает, ГДЕ ошибка, но не какая буква правильная. Подсветка
   снимается, как только клетку начали править. */
.qc-cell.qc-wrong {
  background: var(--qf-error-bg);
}

.qc-cell.qc-wrong .qc-input {
  color: var(--qf-error);
  text-decoration: line-through;
}

/* --- Списки подсказок --- */

.qc-clues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 20px;
}

.qc-clue-column h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--qf-text-muted);
  margin: 0 0 8px;
}

.qc-clue-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qc-clue {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.35;
}

.qc-clue:hover {
  background: var(--qf-row-bg);
}

.qc-clue-num {
  flex: 0 0 auto;
  min-width: 20px;
  font-weight: 700;
  color: var(--qf-text-muted);
}

.qc-clue-text {
  flex: 1 1 auto;
}

.qc-clue-len {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--qf-text-muted);
}

.qc-clue-len::before { content: "("; }
.qc-clue-len::after { content: ")"; }

.qc-clue-active {
  background: var(--qf-dropzone-active-bg);
  box-shadow: inset 2px 0 0 var(--qf-primary);
}

.qc-clue-done .qc-clue-num {
  color: var(--qf-success);
}

.qc-clue-done .qc-clue-text {
  text-decoration: line-through;
  color: var(--qf-text-muted);
}

/* Открытое подсказкой слово помечено и здесь, и в отчёте: скрывать это от
   ученика нельзя — иначе получилась бы невидимая механика. */
.qc-clue-revealed .qc-clue-num::after {
  content: " ⌁";
  color: var(--qf-error);
}

.qc-result-note {
  font-size: 14px;
  font-weight: 400;
  color: var(--qf-text-muted);
}

.qc-message-error { color: var(--qf-error); }
.qc-message-ok { color: var(--qf-success); }

/* Правильная буква. На экране не видна никогда — только на листе с ответами
   для учителя. В поле ввода её быть не может: там то, что набрал ученик. */
.qc-answer {
  display: none;
}

/* Блоки, существующие только на бумаге: строка для подписи и пометка ключа. */
.qc-print-only {
  display: none;
}

/* --- Телефон --- */

@media (max-width: 720px) {
  .qc-clues {
    grid-template-columns: 1fr;
  }
  .qc-current-text {
    font-size: 15px;
  }
}

/* --- Печать ---
   Печатается ПУСТОЙ бланк: сетка с номерами и оба списка подсказок. Ради этого
   всё и затевалось — раздать кроссворд классу на бумаге. Вписанные буквы на
   печать не идут: распечатанный наполовину решённый кроссворд бесполезен и
   тому, кто печатает, и тому, кому раздают. */

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .qf-header .qf-controls,
  .qf-actions,
  .qf-footer,
  .qf-credits,
  .qc-status-bar,
  .qc-current-clue,
  .qf-warnings,
  .qf-result,
  .qf-modal-overlay {
    display: none !important;
  }

  .qc-grid-wrap {
    overflow: visible;
  }

  /* Размер клетки на бумаге задаётся в миллиметрах и подставляется из
     --qc-print-cell (его считает приложение по числу столбцов). Экранное
     значение --qc-cell в пикселях на лист не помещается, и браузер, ужимая
     сетку, округляет доли пикселя по-разному в разных столбцах — на
     распечатке это выглядит как клетки разной ширины. !important нужен
     потому, что экранный размер приложение ставит инлайном. */
  .qc-grid {
    --qc-cell: var(--qc-print-cell, 8mm) !important;
    border-color: #000;
    background: #000;
    margin: 0;
    page-break-inside: avoid;
  }

  .qc-cell {
    background: #fff;
    border-color: #000;
    box-shadow: none !important;
  }

  /* Без этого браузер выбрасывает фоны при печати, и закрашенные клетки
     выходят белыми — сетка становится нечитаемой. */
  .qc-grid,
  .qc-cell,
  .qc-blocked {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Бланк печатается чистым: ни подсветки активного слова, ни красного, ни
     зелёного — иначе на розданном классу листе были бы видны чужие ответы. */
  .qc-cell.qc-active,
  .qc-cell.qc-wrong,
  .qc-cell.qc-correct {
    background: #fff;
  }

  /* По умолчанию светло-серый, а не чёрный: на сетке 19×19 закрашено больше
     половины клеток, и сплошная заливка съедала бы тонер целыми страницами.
     Рамка у клеток чёрная, поэтому структура сетки читается даже там, где
     принтер светлый фон почти не пропечатает.
     Если учитель выбрал свой цвет — печатаем именно его: на цветном принтере
     это и есть та самая маркировка тем и вариантов, ради которой цвет
     заводился. */
  .qc-blocked {
    background: var(--qc-print-blocked, #d9d9d9);
    opacity: 1;
  }

  .qc-num {
    color: #000;
  }

  /* Скрываем именно значение, а не поле: рамка клетки должна остаться.
     Печатается пустой бланк — распечатанный наполовину решённый кроссворд
     бесполезен и тому, кто печатает, и тому, кому раздают. */
  .qc-input {
    visibility: hidden;
  }

  /* --- Строка для подписи --- */

  .qc-print-only {
    display: block;
  }

  .qc-print-signature {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    margin: 0 0 12px;
    font-size: 12pt;
    color: #000;
  }

  .qc-rule {
    display: inline-block;
    border-bottom: 1px solid #000;
    width: 45mm;
    margin-left: 4px;
  }

  .qc-rule-long {
    width: 70mm;
  }

  /* Пометка ключа показывается только в режиме печати с ответами, подпись —
     только на пустом бланке: на листе учителя расписываться некому. */
  .qc-print-key {
    display: none;
    margin: 0 0 12px;
    font-size: 12pt;
    font-weight: 600;
    color: #000;
  }

  body.qc-print-answers .qc-print-signature { display: none; }
  body.qc-print-answers .qc-print-key { display: block; }

  /* --- Лист с ответами для учителя --- */

  body.qc-print-answers .qc-answer {
    display: block;
    width: 100%;
    height: 100%;
    line-height: var(--qc-cell);
    text-align: center;
    font-size: calc(var(--qc-cell) * 0.55);
    font-weight: 600;
    color: #000;
  }

  /* Поле ввода на листе ключа мешало бы: оно лежит поверх и перехватывало бы
     место у правильной буквы. */
  body.qc-print-answers .qc-input {
    display: none;
  }

  .qc-clues {
    grid-template-columns: 1fr 1fr;
    page-break-inside: auto;
  }

  .qc-clue {
    page-break-inside: avoid;
  }

  .qc-clue-done .qc-clue-text {
    text-decoration: none;
    color: #000;
  }

  .qc-clue-active {
    background: none;
    box-shadow: none;
  }
}

/* Движение здесь ничего не сообщает само по себе — вся информация есть
   текстом, — поэтому без анимаций интерфейс полностью рабочий. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}