/*
 * РАМКА ЭКРАНА ЗАДАНИЯ (ТЗ 10.2, 9.2, 15.5): полоса кнопок, портрет,
 * подсказчик, кнопка хода и общая сетка вариантов.
 *
 * Оформление шести видов — src/ui/views.css. Разделены по лимиту 300
 * строк: рамка общая для всех заданий и правится вместе с задачей «где
 * что стоит на экране», виды — вместе с механикой конкретного задания.
 */

/*
 * НАД ИГРОВЫМ ПОЛЕМ НЕ ВИСИТ НИЧЕГО (9.2, 15.5).
 *
 * До 07.09.2026 портрет персонажа и подсказчик были прибиты к верхним
 * углам экрана, и под них резервировалась полоса высотой 112 px. У T2 и
 * T4 это всё равно не помогало: слой сцены занимает экран целиком, отступ
 * его не двигает, и оба верхних угла комнаты теряли тап. Сжать сцену
 * значило либо отрезать от комнаты полосу, либо раздавить картинку на
 * 16 % по вертикали — разметка объектов считается в долях слоя.
 *
 * Поэтому фиксированных элементов над полем больше нет вовсе: портрет,
 * подсказчик и «твой ход» стоят в нижней полосе кнопок. Класс остался, но
 * делает обратное — отводит полосе место под «домой» и «пропустить»,
 * которые прибиты к нижним углам ПОВЕРХ неё.
 */
.task-screen .task-bar {
  /* Место под «домой» и «пропустить» — по ИЗМЕРЕННОЙ ширине самих кнопок
     (ui/dom.js:reserveCorners), а не по догадке с потолком: догадка в
     176 px требовала потолка в 14vw, а потолок на планшете 1006 px отвёл
     141 px при кнопке в 153 — и подсказчик заехал под «пропустить».
     Запасное значение --corner-clear остаётся на случай, когда измерять
     нечего: разметка без угловых кнопок. */
  padding-left: calc(var(--corner-left-w, var(--corner-clear)) + var(--gap));
  padding-right: calc(var(--corner-right-w, var(--corner-clear)) + var(--gap));
  /* Полоса переносится, а не выезжает за край: у T6 в ней семь элементов,
     и на узком экране последний уходил под кнопку «пропустить» — тап
     доставался ей (замерено tmp/screen-check.html при 800×500). */
  flex-wrap: wrap;
  row-gap: 8px;
}
/*
 * Полоса кнопок прижата к низу экрана. Раньше её прижимал вниз только
 * вид сцены (у него слой комнаты выведен из потока), а у остальных она
 * льнула к содержимому: пока сверху стояла полоса в 112 px, это было не
 * видно, а без неё содержимое собралось у верхнего края, и под полосой
 * осталась пустота высотой в треть экрана.
 */
.task-screen > .task-bar:last-child { margin-top: auto; }

/* Сетка вариантов рассчитана на 3, 4 и 6 без перевёрстки (21.6). */
.options {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
  align-content: center;
}
/*
 * Вариант ответа — предмет в деревянной рамке, как окно комнаты на карте
 * дома: один и тот же словарь материалов снаружи и внутри.
 */
.option {
  border-radius: var(--r-md);
  border: 3px solid var(--rim);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  /*
   * ЦВЕТ ТЕКСТА ЗАДАЁТСЯ ЯВНО. Вариант — светлая карточка, а не деревянная
   * табличка, и наследовать `color: var(--paper)` от общего правила кнопки
   * он не должен: до 10.09.2026 наследовал, и написание слова, которое
   * 10.2 требует показать после верного ответа, выходило цветом #F6EFE4 по
   * фону #FCF6EA — контраст 1,06 при требуемых 4,5. Слово рисовалось и было
   * нечитаемо; ни ошибки, ни признака. Аудит контраста сессии 19 этого не
   * поймал: подпись появляется только после ответа, а мерили состояние до.
   */
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px;
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.option img { max-width: 100%; max-height: 220px; border-radius: var(--r-md); pointer-events: none; }
.option .en { font-size: 28px; visibility: hidden; }
/* Написание появляется только после ответа (10.2). */
.option.revealed .en { visibility: visible; }
.option.correct {
  border-color: var(--grass);
  outline: 4px solid var(--grass);
  transform: scale(1.08);
}
.option.wrong { animation: nudge 420ms ease; }

@keyframes nudge {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-18px); }
  60%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

/* Персонаж-подсказчик (7.3, Т5): тап доступен всегда, в одной позиции —
   крайним справа в полосе кнопок задания (ui/hint-character.js). */
.hint-character {
  margin-left: auto;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  /*
   * ТАП-ЗОНА НЕ СЖИМАЕТСЯ ВМЕСТЕ С ПОЛОСОЙ (15.5, Р‑082). До 10.09.2026
   * здесь стояло `min-width: 0`, снимавшее у flex-элемента защиту от
   * сжатия: подсказчик проседал до 84 px, как только в полосе появлялась
   * длинная надпись — замерено на T7 («Ещё раз по-русски») при 800×450.
   * Полоса переносится по строкам, и непожимаемому элементу есть куда
   * встать; молча уменьшившийся палец восстановить нечем.
   */
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  flex-shrink: 0;
}
.hint-character.active { outline: 4px solid var(--berry); border-radius: var(--r-md); }
/* Запасное положение, если у вида нет полосы кнопок. */
.hint-character-floating { position: fixed; right: var(--gap); top: var(--gap); z-index: 3; }

/* Кнопка «твой ход» — совместная игра (12.6). Верх по центру: остальные
   четыре края экрана задания заняты (домой слева внизу, «пропустить»
   справа внизу, портрет слева вверху, подсказчик справа вверху).
   Ход взрослого помечен цветом И надписью, а не одним цветом (17.3);
   мигания нет — состояние статично (17.5).
   С 06.09.2026 кнопка стоит В ПОЛОСЕ КНОПОК вида, а не висит над полем:
   фиксированной она отнимала тап у кнопки записи T6 и у зоны сцены T4. */
/* Кнопка тише соседей размером, но не контрастом: приглушать текст
   нельзя, 4,5:1 — требование, а не пожелание (17.5). */
.turn { font-size: 18px; }
/* Запасное положение, если у вида нет полосы кнопок: над полем, но доступна. */
.turn-floating {
  position: fixed;
  top: var(--gap);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.turn-floating:active { transform: translateX(-50%) translateY(2px); box-shadow: none; }
.turn.active {
  background: var(--berry-deep);
  color: var(--surface);
  outline: 4px dashed var(--lamp);
}

/* Портрет персонажа (7.6) — первым в полосе кнопок задания. */
.char-portrait { margin-right: auto; }
.char-portrait img { display: block; width: 100%; height: auto; }
/* Запасное положение, если у вида нет полосы кнопок. */
.char-portrait-floating { position: fixed; left: var(--gap); top: var(--gap); z-index: 3; }
/* Подсказка — тёплый отсвет и пунктир: не «верно», а «смотри сюда» (7.3). */
.option.hinted, .scene-object.hinted {
  outline: 4px dashed var(--berry);
  box-shadow: var(--glow);
}

/* Уважается prefers-reduced-motion; мигание интерфейса отсутствует (17.5). */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* При повороте в портрет макет не перестраивается — экран-заглушка (Риск 5). */
.rotate { display: none; }
@media (orientation: portrait) {
  .screen, .thread { display: none; }
  .rotate {
    display: flex; align-items: center; justify-content: center;
    height: 100%; padding: var(--gap); text-align: center;
    font-family: var(--font-display); font-size: 28px;
  }
}