/*
 * Виды букв и графем — треки B и C (ТЗ 10.2, 5.2). Обе формы T7: прямая
 * `pick-sound` (буква на экране, выбор звука) и обратная `pick-letter`
 * (звук в условии, выбор буквы); на обратной живёт и T9. Здесь же
 * `build-word` — сборка слова из плиток-графем (T8).
 *
 * ОТДЕЛЬНЫМ ЛИСТОМ ПО Р‑089: с этими двумя видами `views.css` перевалил за
 * 300 строк, и лист начал тянуть в контекст оформление всех шести видов
 * ради одного. Делится по треку, а не по алфавиту: виды трека B правятся
 * вместе и ни с чем другим не связаны.
 */
/*
 * Вид «pick-sound» — T7 «Секретные буквы» (10.2).
 *
 * Буква и реплика стоят на подложке, а не на картинке: картинки в задании
 * нет вовсе, но правило Р‑087 про непрозрачную подложку выполняется тем же
 * материалом, что у остальных карточек, — иначе экран выпал бы из языка.
 */
.secret-letter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px var(--gap);
  border-radius: var(--r-md);
  border: 3px solid var(--rim);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
/*
 * Буква — самый крупный объект экрана: предмет задания, а не подпись.
 * Размер в долях меньшей стороны (Р‑082), с полом на узком окне.
 */
.secret-letter .letter-pair {
  font-size: max(64px, calc(var(--u) * 9));
  line-height: 1.1;
  color: var(--ink);
}
.secret-letter .letter-upper { color: var(--ink-soft); }

/*
 * Кнопка-звук. Подписи нет намеренно: буква варианта на экран не выходит,
 * иначе ответ читается, а не слышится (T7.js). Отсюда же требование к
 * размеру — опознавательного знака у кнопки нет, и мелкой она быть не может.
 */
.sound-option {
  min-height: max(var(--tap-min), calc(var(--u) * 14));
  gap: 0;
}
/* Значок «здесь звук»: единственное содержимое кнопки. */
.sound-mark {
  width: max(44px, calc(var(--u) * 6));
  height: max(44px, calc(var(--u) * 6));
  fill: none;
  stroke: var(--plate);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
/*
 * Уже прослушанный вариант — состояние экрана, не оценка (2.3.3): о верности
 * оно не говорит ничего. Признака два, а не один (17.3): значок становится
 * залитым И меняет цвет, потому что цвет единственным носителем смысла быть
 * не может.
 */
.sound-option.heard .sound-mark { fill: var(--berry-deep); stroke: var(--berry-deep); }
/*
 * Готовность к выбору: второй тап по этой же кнопке отвечает (10.2).
 * Признак не только цветом (17.3) — рамка утолщается и кнопка приподнята.
 */
.sound-option.armed {
  border-color: var(--berry-deep);
  border-width: 5px;
  transform: translateY(-4px);
}

/*
 * Вид «pick-letter» — обратная форма T7 (10.2). Вариантом здесь выступает
 * сама буква парой форм (5.6.5), и она же — единственное содержимое кнопки:
 * подпись рядом с буквой была бы вторым способом сказать то же самое.
 */
.letter-option {
  min-height: max(var(--tap-min), calc(var(--u) * 14));
}
.letter-option .letter-pair {
  font-size: max(48px, calc(var(--u) * 7));
  line-height: 1.1;
  color: var(--ink);
}
.letter-option .letter-upper { color: var(--ink-soft); }

/*
 * Карточка-вопрос обратной формы: сам звук и есть вопрос, поэтому карточка
 * — кнопка повтора, как карточка слова у T6. Строка подписи стоит ПОД
 * значком отдельной строкой, а не поверх него (Р‑087).
 */
.sound-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px var(--gap);
  border-radius: var(--r-md);
  border: 3px solid var(--rim);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}
.sound-question .sound-mark {
  width: max(56px, calc(var(--u) * 8));
  height: max(56px, calc(var(--u) * 8));
  fill: var(--berry-deep);
  stroke: var(--berry-deep);
}
.sound-question .say { color: var(--ink); }

/*
 * Вариант-графема (T9). Общее правило прячет `.en` внутри варианта до
 * ответа — там это написание слова, которое 10.2 запрещает показывать
 * заранее (T1). Здесь `.en` и есть сам вариант выбора, и прятать его
 * означало бы задание из пустых карточек.
 */
.letter-option .en {
  visibility: visible;
  font-size: max(48px, calc(var(--u) * 7));
  line-height: 1.1;
  color: var(--ink);
}

/*
 * Вид «build-word» — T8 «Собери слово» (10.2).
 *
 * Три полосы сверху вниз: карточка слова, слоты, плитки. Полосы стоят в
 * потоке и не накладываются — перекрытие здесь стоило бы промаха пальцем
 * по слоту, а не только вида (15.5).
 */
.word-slots {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  flex-wrap: wrap;
}
.word-slot {
  min-width: max(var(--tap-min), calc(var(--u) * 9));
  min-height: max(var(--tap-min), calc(var(--u) * 9));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  /* Пустой слот — пунктир: «сюда встанет», а не «здесь что-то есть». */
  border: 3px dashed var(--rim);
  background: transparent;
  color: var(--ink);
  font-size: max(40px, calc(var(--u) * 6));
}
.word-slot.filled {
  border-style: solid;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.word-slot.wrong { animation: nudge 420ms ease; }

.tile-tray {
  display: flex;
  justify-content: center;
  gap: var(--gap);
  flex-wrap: wrap;
}
.grapheme-tile {
  min-width: max(var(--tap-min), calc(var(--u) * 9));
  min-height: max(var(--tap-min), calc(var(--u) * 9));
  background: var(--surface);
  border: 3px solid var(--rim);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  /* Палец ведёт плитку, а не выделяет текст под ней. */
  touch-action: none;
  user-select: none;
}
.grapheme-tile .en {
  visibility: visible;
  font-size: max(40px, calc(var(--u) * 6));
  color: var(--ink);
}
/* Плитка под пальцем поднята над полосой и не мешает искать слот. */
.grapheme-tile.dragging { z-index: 5; box-shadow: var(--shadow-plate); transform: scale(1.06); }
/* Выложенная плитка остаётся на месте пустым следом: полоса не прыгает. */
.grapheme-tile.placed { visibility: hidden; }