/*
 * ВИДЫ, ГДЕ НА ЭКРАНЕ ОБА ПЕРСОНАЖА — T10 «Разговор» и T11 «Кто из них?»
 * (ТЗ 10.2, 7.1).
 *
 * ОТДЕЛЬНЫМ ЛИСТОМ ПО Р‑089, и граница здесь не по счёту строк, а по
 * смыслу: это ровно те два вида, у которых персонажи являются содержанием
 * экрана, а не его убранством. Тот же список в коде — SOLO_CHARACTER_VIEWS
 * в screens/task.js: портрет и подсказчик на эти экраны не выходят, потому
 * что были бы третьим и четвёртым котом.
 *
 * Рамка экрана — полоса кнопок и кнопки углов — в src/ui/task.css.
 */

/*
 * T11 «Кто из них?» (10.2, 7.1): оба персонажа рядом, тап по нужному.
 *
 * Ровно два варианта, и сетка задана явно, а не auto-fit: общее правило
 * `.options` при широком окне растянуло бы две карточки на всю ширину, и
 * коты разъехались бы к краям экрана — сравнивать их пришлось бы через
 * полметра пустоты. Здесь они стоят рядом, как на карте дома.
 */
.character-options {
  grid-template-columns: repeat(2, minmax(0, auto));
  justify-content: center;
  gap: calc(var(--gap) * 2);
}
/*
 * ПЕРСОНАЖ НЕ ЯВЛЯЕТСЯ КАРТИНКОЙ ВАРИАНТА, и общий потолок высоты к нему
 * неприменим. `.option img` ограничивает картинку 220 px — верно для
 * карточки слова, губительно здесь: персонаж это СТОПКА слоёв с якорями,
 * и потолок сжимает подложку (300 → 220), не трогая координаты надетого.
 * Носки при этом отъезжают из-под лап, а шарф повисает ниже шеи. Ошибки
 * нет, на экране это выглядит как криво нарисованный кот.
 */
.character-option img { max-width: none; max-height: none; }
.character-option {
  /* Тап-зоной является вся карточка целиком: персонаж — предмет выбора, а
     не картинка с кнопкой под ней. Пол по --tap-min стоит на случай, когда
     доля экрана даёт меньше 88 px (Р‑082). */
  min-width: max(var(--tap-min), calc(var(--u) * 26));
  min-height: max(var(--tap-min), calc(var(--u) * 30));
  padding: var(--gap);
}
/*
 * Написание слова — своей строкой ПОД персонажем, на подложке карточки, а
 * не поверх меха (Р‑087). До ответа скрыто, место занимает (10.2).
 */
.character-word {
  visibility: hidden;
  display: block;
  padding: 4px 12px;
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
}
.character-word .en { font-size: max(28px, calc(var(--u) * 4)); color: var(--ink); }
.character-option.revealed .character-word { visibility: visible; }

/*
 * T10 «Разговор» (10.2): один кот говорит, у второго картинки-ответы.
 *
 * Персонажи стоят по сторонам, реплика и ответы — под своим котом. Это не
 * симметрия ради симметрии: ребёнок должен видеть, КТО спрашивает и КТО
 * отвечает, иначе «выбери ответ за второго персонажа» теряет смысл.
 */
.dialogue-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap) * 2);
}
.dialogue-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}
/* Реплика — крупная кнопка повтора под говорящим (9.2, Р‑085). */
.dialogue-bubble {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border-radius: var(--r-md);
  border: 3px solid var(--rim);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialogue-bubble .sound-mark { width: 40px; height: 40px; fill: var(--berry); stroke: var(--berry); stroke-width: 1.6; }
/*
 * Два варианта в ряд; в диалоге без выбора он же держит одну карточку.
 *
 * ФЛЕКС, А НЕ СЕТКА, и это не вкусовщина. Общее правило `.options` — грид
 * `repeat(auto-fit, minmax(200px, 1fr))`, рассчитанный на блок во всю
 * ширину экрана. Здесь ряд стоит в колонке под персонажем, ширина у него
 * содержательная, и auto-fit в таком контейнере разложил тринадцать дорожек
 * по 99 px под карточки шириной 179: карточки наехали друг на друга на
 * 63 px. Проверка центров этого не поймала — центр каждой оставался
 * свободен, — а палец у правого края левой карточки попадал по правой.
 */
.dialogue-options {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: var(--gap);
}
.dialogue-option {
  width: max(var(--tap-min), calc(var(--u) * 14));
  padding: 8px;
  gap: 6px;
}
/* Картинка шаблона: вписывается целиком, не кадрируется. */
.dialogue-pic {
  width: max(var(--tap-min), calc(var(--u) * 13));
  height: max(var(--tap-min), calc(var(--u) * 10));
  background: center/contain no-repeat;
}
/*
 * Подпись — своей строкой ПОД картинкой, на подложке (Р‑087), и место под
 * неё занято всегда: иначе ряд подпрыгнул бы в момент ответа.
 */
.dialogue-word {
  visibility: hidden;
  display: block;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
}
.dialogue-word .en { font-size: max(15px, calc(var(--u) * 1.7)); color: var(--ink); }
.dialogue-option.revealed .dialogue-word { visibility: visible; }