/*
 * ДОМ НА КАРТЕ ДОМА: крыша с чердачным окном, стена с окнами комнат
 * (ТЗ 9, 17.4). Небо, трава, участок, коты и полка — в src/ui/home.css.
 *
 * Выделен отдельным листом по лимиту 300 строк: экран целиком в один
 * файл не помещается, а дом — самостоятельная деталь, которую правят,
 * не открывая остального.
 *
 * Все размеры в --u (tokens.css): холст карты дома 100u × 62,5u, дом
 * занимает 46u по ширине крыши и 40u по высоте с крышей вместе.
 */

/*
 * Скрытый вход в родительскую панель (13.1, home.js:parentGateTrigger).
 * Маленький, без подписи, в углу, где не мешает сцене — обратная задача
 * тап-зонам ребёнка (15.5): не привлекать внимание и не отвечать на
 * обычный тап, только на долгое удержание.
 */
.parent-gate {
  position: fixed;
  top: calc(0.8 * var(--u)); left: calc(0.8 * var(--u));
  width: calc(4 * var(--u)); height: calc(4 * var(--u));
  min-width: 0; min-height: 0;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  z-index: 3;
}
/*
 * Приглушён до трети: взрослый, знающий, где искать, видит его сразу, а
 * ребёнку он не обещает ничего. Ярче делать нельзя — станет кнопкой, на
 * которую ребёнок будет жать и ничего не получать, тусклее незачем: до
 * 14.09.2026 он был прозрачным, и найти панель не смог и взрослый.
 */
.parent-gate svg {
  width: 70%; height: 70%;
  fill: rgba(246, 239, 228, 0.32);
  pointer-events: none;
}
/*
 * Зона удержания шире самого домика: попадать в неё пальцем взрослому, а
 * значок должен оставаться незаметным. Случайного срабатывания это не
 * добавляет — обычный тап не делает ничего, нужно держать две секунды.
 */
.parent-gate::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--tap-min); height: var(--tap-min);
}

/* --- дом --- */

.house { position: relative; display: flex; flex-direction: column; align-items: center; }
/*
 * Пятно света на траве под домом: горящие окна должны куда-то светить,
 * иначе дом и земля выглядят двумя вырезками, положенными рядом.
 */
.house::after {
  content: '';
  position: absolute;
  left: -12%; right: -12%;
  bottom: calc(-2.4 * var(--u));
  height: calc(6 * var(--u));
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 201, 122, 0.2), rgba(255, 201, 122, 0) 72%);
  pointer-events: none;
}

/*
 * Крыша со срезанным коньком: чистый треугольник читается детским
 * рисунком дома, срез делает силуэт спокойнее. Свес шире стены на 2u с
 * каждой стороны. Прямых углов у трапеции нет ни одного.
 */
.house-roof {
  position: relative;
  width: calc(43 * var(--u));
  /* Крыша не ниже чердачного окна с запасом: окно упирается в предел
     88 px (15.5), который вместе с окном не сжимается, и в маленьком
     окне торчало над коньком. */
  height: max(calc(12 * var(--u)), calc(var(--tap-min) + 2.6 * var(--u)));
  background: linear-gradient(to bottom, var(--shingle) 0%, var(--timber-dark) 100%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(0.9 * var(--u));
}

.house-wall {
  width: calc(39.16 * var(--u));
  padding: calc(1.6 * var(--u)) calc(1.6 * var(--u)) calc(2 * var(--u));
  background: linear-gradient(to bottom, var(--timber) 0%, var(--timber-dark) 130%);
  border-radius: 0 0 var(--r-win) var(--r-win);
  box-shadow: 0 calc(0.5 * var(--u)) calc(2.4 * var(--u)) rgba(16, 12, 22, 0.5);
  display: grid;
  /* Две колонки под четыре комнаты дома. Пятая комната с place "inside"
     встанет третьим рядом и потребует пересчёта холста — это решение, а
     не догадка, и потому вынесено в open-questions. */
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: calc(1.4 * var(--u));
}

/* --- окно комнаты --- */

.room {
  position: relative;
  /* Ровно пропорции файлов сцен (1536×960): при cover они не кадрируются. */
  width: calc(17.28 * var(--u));
  height: calc(10.8 * var(--u));
  /* 88 px — предел кегля пальца, а не пропорция макета (15.5): в узком
     окне чердачное окно доходило до 130×81, и высоты не хватало. */
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0;
  overflow: hidden;
  /* Кегль названия считается от ширины ЭТОГО окна (cqw ниже). */
  container-type: inline-size;
  border: calc(0.3 * var(--u)) solid var(--timber-lit);
  border-radius: var(--r-win);
  background: none;
  /* Свет из окна ложится и наружу, и внутрь рамы. */
  box-shadow:
    0 0 calc(3.4 * var(--u)) calc(-0.4 * var(--u)) rgba(255, 201, 122, 0.5),
    inset 0 0 calc(2 * var(--u)) rgba(255, 201, 122, 0.22);
  transition: box-shadow 700ms ease, border-color 700ms ease;
}
/* Комната в крыше меньше: это чердачное окно, а не стена. */
.room.in-roof { width: calc(13 * var(--u)); height: calc(8.1 * var(--u)); }
/* Двор стоит на траве сам по себе и потому крупнее комнат дома. */
/*
 * Двор крупнее комнат: он стоит на траве сам по себе. Выше 16,9u ему
 * нельзя — колонка «двор + коты» складывается в 37,9u при 38,6u высоты
 * дома, и лишнее выносит двор над коньком крыши (замерено при 28u: верх
 * двора оказывался на 4 px выше конька).
 */
.room.outside { width: calc(27 * var(--u)); height: calc(16.9 * var(--u)); }

/*
 * Картинка комнаты — отдельный <img>, а не фон кнопки.
 *
 * Гасить закрытую комнату надо фильтром, а фильтр на самой кнопке
 * погасил бы вместе с картинкой и название на подоконнике вместе с его
 * контрастом. Слоем взят <img>, а не фон псевдоэлемента: относительный
 * url() внутри пользовательского свойства браузер считает от адреса
 * ЛИСТА СТИЛЕЙ, а не документа, и `assets/img/...` превращался в
 * `src/ui/assets/img/...` — молча, без ошибки. У атрибута src такой
 * ловушки нет, и путь остаётся относительным, как требует 15.6.
 */
.room-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: filter 700ms ease;
}
.room.locked .room-view { filter: brightness(0.42) saturate(0.3) contrast(0.92); }
.room.locked {
  border-color: var(--timber);
  box-shadow: none;
}
/*
 * Ставни. Закрытая комната отличается НЕ цветом (17.3): она темнее, она
 * забрана планками, и подпись у неё тише — три признака, каждый читается
 * отдельно. Планки полупрозрачные: комната обязана остаться узнаваемой,
 * ребёнок видит, что дом больше, чем ей пока доступно (17.4).
 */
.room.locked::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    180deg,
    rgba(62, 49, 44, 0.62) 0 calc(0.55 * var(--u)),
    rgba(122, 98, 84, 0.5) calc(0.55 * var(--u)) calc(1.15 * var(--u))
  );
}

/*
 * Название на подоконнике — тёмной полосе поперёк низа окна.
 *
 * Полоса непрозрачна на 82 %, поэтому контраст не зависит от картинки под
 * ней: даже на белом пикселе выходит 7,5:1 при требуемых 4,5 (17.5). До
 * этого текст лежал прямо на картинке, и буква пропадала там, где под ней
 * оказался тёмный край мебели — 1,16:1 в гостиной.
 *
 * Кегль в cqw — доле ширины САМОГО окна: чердачное окно вдвое меньше
 * двора, и одна кегля на всех либо не влезала бы, либо терялась.
 * nowrap: «гардеробная» переносилась и уезжала за край окна.
 */
.room-name {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 2% 6% 3%;
  /* Плашка непрозрачна там, где стоят буквы, и растворяется вверху: сплошная
     полоса поперёк окна читалась субтитром под фильмом. */
  background: linear-gradient(to top, var(--sill) 0%, var(--sill) 64%, rgba(20, 14, 12, 0) 100%);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(11px, 8cqw, 24px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
}
.room.locked .room-name { color: rgba(246, 239, 228, 0.74); }