/*
 * КАРТА ДОМА — «дом на закате» (ТЗ 9, таблица экранов).
 *
 * Ребёнок стоит на улице и смотрит на дом. Комната, которую она открыла,
 * СВЕТИТСЯ: окно горит, свет ложится на стену. Комната, до которой ещё не
 * дошла, тёмная и забрана ставнями. Прогресс нигде не подписан и не
 * посчитан — дом просто зажигается окно за окном (2.3.3, 11.1).
 *
 * Чердак в крыше, двор за домом на траве: место комнаты объявляет поле
 * `place` в content/rooms.json, экран не знает ни одного идентификатора.
 *
 * ПОЧЕМУ ТЁМНЫЙ ЭКРАН. Шесть картинок комнат — самое красивое, что есть в
 * проекте, а прежнее оформление их закапывало: бежевый дом, бежевые
 * нашивки, мятный фон, три несвязанные цветовые семьи. Здесь семья ровно
 * одна — синие сумерки и тёплое дерево, — и единственные насыщенные пятна
 * на экране это сами комнаты. Снаружи темно, все остальные экраны (внутри
 * дома) светлые: войти в комнату значит войти на свет.
 *
 * ВСЁ СЧИТАЕТСЯ В --u (tokens.css), а не в пикселях. Холст 100u × 62,5u
 * равен 1280×800 на планшете и сжимается целиком в окне любого размера.
 * Сверх того строки экрана разложены грид-сеткой 1fr/auto: даже если
 * содержимое сцены не уместится, оно не наедет на полку — ряды грида не
 * накладываются по определению. Обе меры вместе, потому что 06.09.2026
 * макет, свёрстанный в пикселях под 1280×800, в окне другого размера
 * наехал кнопками на дом и обрезал названия комнат.
 */

.screen.home {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: calc(1.4 * var(--u));
  padding: calc(1.6 * var(--u));
  background: var(--sky-high);
}

/*
 * Измеритель --u в пикселях для screens/home.js: размер спрайта персонажа
 * задаётся числом, и формула масштаба не должна жить в коде вторым
 * экземпляром (17.2). Вычисленный font-size браузер отдаёт в пикселях,
 * тогда как getPropertyValue вернул бы саму формулу.
 */
.u-probe { position: absolute; visibility: hidden; font-size: var(--u); }

/* --- сцена: небо, трава, дом --- */

.scene {
  position: relative;
  min-height: 0;
  /*
   * Нить и участок стоят В ПОТОКЕ друг за другом, а не наложены абсолютно.
   * Это гарантия, а не оформление: элементы колонки не накладываются по
   * определению, и никакой размер окна не заведёт гирлянду на крышу.
   * Перекрытие такого рода измеритель тап-зон не ловит — нить не
   * интерактивна, — поэтому оно и должно быть невозможно по построению.
   */
  display: flex;
  flex-direction: column;
  border-radius: var(--r-win);
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-high) 0%, var(--sky-low) 78%, var(--sky-low) 100%);
}
/* Трава: полоса у нижнего края, на которой стоят и дом, и коты. */
.scene::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(5.5 * var(--u));
  /* Трава рисуется ПОСЛЕ участка и потому лежит выше него: без этой строки
     она перехватывала тап у накладки под биркой имени — 104×24 вместо
     88×88 (замерено tmp/home-check.html). Украшение тапов не получает. */
  pointer-events: none;
  /* Дымка у горизонта: жёсткая линия «небо — трава» резала дом по основанию. */
  background: linear-gradient(
    to bottom,
    rgba(74, 88, 126, 0.5) 0%,
    var(--lawn) 14%,
    var(--lawn-edge) 100%
  );
}

/*
 * Ягодная нить висит в небе (11.2). На карте дома она внутри сцены, а не
 * отдельной полосой сверху: иначе над сумерками пришлось бы держать
 * светлую планку во всю ширину экрана.
 */
.home .thread {
  flex: 0 0 auto;
  margin: calc(0.7 * var(--u)) calc(2.4 * var(--u)) 0;
}
/* Нить в сумерках — светлая: --thread по ночному небу почти не виден. */
.home .thread-curve path { stroke: rgba(246, 239, 228, 0.55); }

/*
 * Участок: дом слева, двор и коты справа. Обе колонки прижаты низом к
 * одной линии — она и есть земля, на которой всё стоит.
 */
.plot {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  margin: 0 calc(2.4 * var(--u));
  /*
   * Отступ снизу — не глазомер и не одно число. Под биркой имени лежит
   * невидимая накладка тап-зоны высотой 88 px (15.5), и ей нужно ровно
   * столько места под биркой, сколько не хватает до 88. Отступ в одних
   * только --u этого не даёт: 88 px не сжимается вместе с окном, и в
   * окне 1120×700 нижний край накладки срезал overflow сцены — 92×84
   * вместо 88×88 (замерено tmp/home-check.html). Отсюда max().
   *
   * ДЕЛЕНИЕ НА ДВА ПОЯВИЛОСЬ 14.09.2026 вместе с центрированием самой
   * накладки: свешиваясь вниз от верха бирки, она требовала под биркой все
   * недостающие пиксели, центрированная — половину. На планшете с рабочей
   * высотой 523 CSS px эта половина и была разницей между «дом помещается»
   * и «дом лезет на ягодную нить».
   */
  padding-bottom: max(calc(4 * var(--u)), calc((var(--tap-min) - 3.2 * var(--u)) / 2));
  display: flex;
  align-items: flex-end;
  /*
   * space-evenly, а не space-between. Дом и участок с котами занимают
   * 78,2u из 92u ширины, и при space-between весь запас в 13,8u сваливался
   * в одну дыру посередине, тогда как по краям экрана было тесно. Теперь
   * запас делится на три равных промежутка: 4,6u слева, столько же между
   * домом и участком и столько же справа. Своего gap у полосы нет: он
   * прибавлялся бы к среднему промежутку и снова делал бы его шире
   * крайних — 6,3u против 3,8u.
   */
  justify-content: space-evenly;
}

/* --- двор и коты справа от дома --- */

/*
 * Колонка двора ТЯНЕТСЯ НА ВСЮ ВЫСОТУ УЧАСТКА, а не собирается по
 * содержимому, и двор в ней прижат к верху, коты — к низу.
 *
 * ПОЧЕМУ ЭТО ВАЖНО, А НЕ ОФОРМЛЕНИЕ. Ведущий кот стоит, невыбранный сидит
 * (7.3), и сидящая поза ниже стоящей на четыре с лишним --u. Пока колонка
 * собиралась по содержимому и прижималась низом, смена ведущего меняла её
 * высоту — и карточка двора над котами прыгала вверх-вниз на каждый тап по
 * коту. Замечено заказчиком на планшете 14.09.2026.
 *
 * Высота теперь не зависит от поз вовсе: обе позы живут внутри нижней
 * группы, и их разница остаётся там же, где возникла.
 */
.outside-plot {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
  gap: calc(2 * var(--u));
}

.outside-plot .chars {
  align-items: flex-end;
  justify-content: center;
  gap: calc(3.2 * var(--u));
}
/*
 * Тень под персонажем. drop-shadow по силуэту, а не эллипс под лапами:
 * прозрачный запас снизу у холста разный у поз (12 % у стоящей, 26 % у
 * сидящей), и эллипс на фиксированной высоте у одной из двух оказался бы
 * не под лапами. Перебивает бежевую тень из base.css, неуместную ночью.
 */
.outside-plot .char .char-stage-base {
  filter: drop-shadow(0 calc(0.5 * var(--u)) calc(0.7 * var(--u)) rgba(8, 14, 12, 0.65));
}
.char-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
 * Имя — бирка на ошейнике (7.4).
 *
 * Раньше под именем стоял пунктир: он должен был означать «имя можно
 * поменять», но не означал ничего — заказчик 07.09.2026 спросил, что это
 * за линия. Овальная бирка объясняет себя сама: у кота на ошейнике висит
 * жетон с именем, и по нему естественно ткнуть.
 *
 * Кнопка не мельче 88 px (15.5), и раньше это давало пустой квадрат под
 * фигуркой. Здесь видимая бирка 3,2u, а тап-зона добирается до 88 px
 * невидимой накладкой ВНИЗ, в пустую траву. Вниз, а не по центру: иначе
 * зона переехала бы на кота и отняла у него тап смены ведущего (7.3).
 * Проверяется elementFromPoint в tmp/home-check.html.
 */
.char-name {
  position: relative;
  min-width: calc(7 * var(--u));
  min-height: 0;
  height: calc(3.2 * var(--u));
  margin-top: calc(-1.2 * var(--u));
  padding: 0 calc(1.4 * var(--u));
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 calc(0.2 * var(--u)) calc(0.6 * var(--u)) rgba(8, 12, 10, 0.5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(12px, calc(1.5 * var(--u)), 20px);
}
/*
 * Накладка ЦЕНТРИРУЕТСЯ на бирке, а не свешивается вниз от её верха.
 *
 * Свешиваясь, она требовала под биркой целых 88 px пустоты, и `.plot`
 * резервировал их отступом снизу. На планшете с рабочей высотой 523 CSS px
 * этих пикселей взять было неоткуда: дом не помещался и вылезал вверх — на
 * ягодную нить, которую заказчик увидел перечёркнутой крышей и двором.
 * Центрированная накладка требует вдвое меньше и даёт ту же зону.
 */
.char-name::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, var(--tap-min));
  height: var(--tap-min);
}
/* Ведущий отличается позой, размером И тем, что бирка поймала свет из
   окон (17.3). Текст на обеих бирках --ink: 11:1 по молочному и 8:1 по
   янтарному, тогда как приглушение текста дало бы 4,48 — ниже нормы. */
.char-slot.is-active .char-name { background: var(--lamp); }

/* --- полка действий --- */

/*
 * Две группы, а не пять кнопок подряд. Слева то, что у ребёнка есть
 * всегда; справа показ, который появляется по порогам 12.2 и исчезает
 * вместе с ними. Разрыв повторяет разницу, уже существующую в коде.
 */
.shelf { display: flex; align-items: center; gap: calc(1.4 * var(--u)); }
.shelf-group { display: flex; gap: calc(1 * var(--u)); }
.shelf-show { margin-left: auto; }
/*
 * ТАП-ЗОНА 88 px ОСТАЁТСЯ, А ТАБЛИЧКА СТАНОВИТСЯ НИЖЕ.
 *
 * До 14.09.2026 кнопка полки сама была 88 px высотой, и на планшете с
 * рабочей высотой 523 CSS px полка занимала шестую часть экрана — заказчик
 * увидел это как «снизу большая область, и сами кнопки слишком большие».
 * Уменьшать тап-зону нельзя: 88 px это предел кегля пальца (15.5), и
 * правило прямо говорит, что оно побеждает пропорцию макета (Р‑082).
 *
 * Поэтому здесь тот же приём, которым проект уже добирает зоны у половины
 * кнопок: видимая табличка своего размера, а до 88 px зону добирает
 * невидимая накладка, центрированная на ней. Тап-зоной является то, что
 * отвечает на `elementFromPoint`, а не прямоугольник таблички.
 *
 * Накладка шире кнопки не становится: по ширине таблички и так больше 88.
 */
.shelf button {
  position: relative;
  min-height: 0;
  height: max(calc(5 * var(--u)), 56px);
  padding: 0 calc(2.2 * var(--u));
  background: var(--plate);
  color: var(--paper);
  border-radius: var(--r-plate);
  box-shadow: inset 0 calc(-0.35 * var(--u)) 0 rgba(16, 12, 22, 0.4);
  font-size: clamp(14px, calc(1.6 * var(--u)), 22px);
}
.shelf button::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; height: var(--tap-min);
}
/*
 * Полка выше слоя участка. Накладка выходит за табличку вверх, а `.plot`
 * объявлен `z-index: 1` — без этой строки верхние 16 px зоны доставались
 * участку, и 88 px превращались в 72 (замерено elementFromPoint на
 * планшете 14.09.2026). Интерактивного у участка на этой высоте нет:
 * его нижний край выше начала накладки.
 */
.shelf button { z-index: 2; }
.shelf button:active { transform: translateY(2px); box-shadow: none; }

/* --- сцена открытия комнаты (Т17, Р‑049): в новой комнате зажигается свет --- */

.reveal-catcher { position: fixed; inset: 0; z-index: 5; }
.reveal-face {
  position: absolute; top: calc(-0.6 * var(--u)); right: calc(-0.6 * var(--u)); z-index: 3;
  border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 calc(2 * var(--u)) rgba(255, 201, 122, 0.85);
}
.reveal-turn { transition: transform 600ms ease; transform: rotate(-6deg) scale(1.06); }