/*
 * ВИДЫ СЦЕНЫ — T2 «найди на сцене» и T4 «положи, куда сказали» (ТЗ 10.2, 14.1).
 *
 * ОТДЕЛЬНЫМ ЛИСТОМ ПО Р‑089: с появлением видов T11 и T12 лист views.css
 * перевалил за 300 строк. Граница проведена там, где её объявил сам
 * views.css задолго до деления: сцена — единственная пара видов, которая
 * работает с разметкой комнаты в процентах от базовой сетки, и правятся
 * они вместе. Остальные виды с ней связей не имеют.
 *
 * Рамка экрана — полоса кнопок, портрет, подсказчик — в src/ui/task.css.
 */

/* T2 «найди на сцене»: объекты — тап-зоны поверх фона, позиционированные в
   процентах от базовой сетки сцены (10.2, 21.6). */
.scene-screen { position: relative; }
/* Слой объектов — это и есть картинка комнаты: она растянута ровно по нему,
   и процент слота от scene.base попадает туда же, куда попал в инструменте
   разметки. Слой занимает экран целиком (inset:0 отсчитывается от padding-box,
   отступы .screen его не сужают), поэтому кнопки лежат ПОВЕРХ комнаты, как и
   было, а не отрезают от неё полосу снизу.

   background-size: 100% 100%, а не cover: при cover картинка кадрируется, если
   пропорции экрана разошлись с base, и разметка снова уезжает — незаметно и
   без ошибки. base 2560×1600 равен targetResolution 1280×800, так что на самом
   планшете растяжение нулевое. */
.scene-objects {
  position: absolute; inset: 0;
  background: center/100% 100% no-repeat;
}
/* Полоса кнопки остаётся внизу поверх комнаты: слой объектов ушёл из потока. */
.scene-screen .task-bar { position: relative; z-index: 1; margin-top: auto; }
.scene-object {
  position: absolute;
  /* contain, а не cover: предмет — вырезанный спрайт на прозрачном фоне,
     и слот на сцене не квадратный (rect в базе 2560×1600). При cover яблоко
     обрезалось бы сверху и снизу вместо того, чтобы уместиться целиком. */
  background: rgba(252, 246, 234, 0.3) center/contain no-repeat;
  border: 3px dashed var(--rim);
  border-radius: var(--r-md);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 4px;
}
/* Область попадания раздувается до --tap-min, спрайт остаётся размером слота.
   Слот задаёт, каким предмет НАРИСОВАН на фоне комнаты: ключ на комоде мелкий,
   и растягивать рисунок под палец значит ломать масштаб обстановки. Палец при
   этом обязан попадать по 88 CSS (15.5), поэтому невидимая накладка центрируется
   на слоте и добирает недостающее. Проверка C19 меряет слот по
   sceneSpriteMinPx именно из-за этой пары. */
.scene-object::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, var(--tap-min)); height: max(100%, var(--tap-min));
}
/* Цвет задаётся явно — тот же дефект, что у варианта (Р‑094) и у плитки
   T3: объект сцены это кнопка, а общее правило кнопки даёт светлый
   `--paper` по молочной подложке, контраст 1,06 при требуемых 4,5. */
.scene-object .en { font-size: 22px; visibility: hidden; color: var(--ink); }
.scene-object.revealed .en { visibility: visible; }
.scene-object.correct { outline: 6px solid var(--grass); border-style: solid; }
.scene-object.wrong { animation: nudge 420ms ease; }

/* T4 «положи, куда сказали» (10.2, 14.1).

   Зона не рисуется: «под столом» ребёнок определяет по нарисованной комнате,
   а видимый прямоугольник выдал бы все четыре ответа сразу. Видимой её делают
   подсказчик (.hinted, 7.3) и режим плейсхолдеров (.marked-zones), где
   искать на синтетическом фоне нечего. */
.place-zone { border: 3px dashed transparent; border-radius: var(--r-md); }
.marked-zones .place-zone { border-color: var(--thread); }
.place-zone.hinted { border-color: var(--grass); border-style: solid; background: rgba(107, 170, 107, 0.18); }

/* Полка под сценой — исходная точка предмета (10.2): промах и неверная зона
   возвращают его сюда, а не в центр экрана. */
.place-tray { display: flex; align-items: center; justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); }
.place-item {
  width: 160px; height: 160px;
  padding: 4px; border: 3px solid var(--rim); border-radius: var(--r-md);
  background: var(--surface) center/contain no-repeat;
  box-shadow: var(--shadow-card);
  display: flex; align-items: flex-end; justify-content: center;
  /* Перетаскивание пальцем: без этого браузер трактует движение как прокрутку
     и жест до pointermove не доходит. */
  touch-action: none;
  cursor: grab;
}
.place-item.dragging { z-index: 2; cursor: grabbing; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); }
.place-item .en { font-size: 22px; visibility: hidden; color: var(--ink); }
.place-item.revealed .en { visibility: visible; }
.place-item.correct { border-color: var(--grass); }