/* Главная: шапка сайта и робот Chatty во весь оставшийся экран. На нем играют сцены,
   которые пользователи собрали в студии и которые одобрил админ (showcase-player.js). */

/* Экран главной зафиксирован: страница ровно в экран и не прокручивается. Раньше у body была
   только минимальная высота, и все, что на миг выходило за край (сцена в момент раскладки, кольцо
   мигающей кнопки 3D), давало прокрутку - на телефоне главная ездила под пальцем. */
html:has(> body.home) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body.home {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  background: var(--ground);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.home-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;   /* экран зафиксирован: в низком окне (телефон лежа) сцена сжимается, Chatty подгоняется по высоте */
  display: flex;
  flex-direction: column;
}

.home-robot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* щипок двумя пальцами ничего не масштабирует: ни Chatty, ни страницу */
  touch-action: pan-x pan-y;
}

.home-robot iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.home-robot__img {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 92%;
  width: auto;
  transform: translateX(-50%);
}

/* облачко реплики - над головой, как в студии */
.home-bubble {
  --bubble-frame:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'><path fill='%23000622' d='M4 2h1v1h-1zM5 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM13 2h1v1h-1zM12 2h1v1h-1zM13 3h1v1h-1zM12 3h1v1h-1zM15 4h1v1h-1zM14 4h1v1h-1zM13 4h1v1h-1zM12 4h1v1h-1zM15 5h1v1h-1zM14 5h1v1h-1zM13 5h1v1h-1zM12 5h1v1h-1zM4 15h1v1h-1zM5 15h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM2 13h1v1h-1zM3 13h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM2 12h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM5 12h1v1h-1zM13 15h1v1h-1zM12 15h1v1h-1zM13 14h1v1h-1zM12 14h1v1h-1zM15 13h1v1h-1zM14 13h1v1h-1zM13 13h1v1h-1zM12 13h1v1h-1zM15 12h1v1h-1zM14 12h1v1h-1zM13 12h1v1h-1zM12 12h1v1h-1zM6 0h6v3h-6zM6 15h6v3h-6zM0 6h3v6h-3zM15 6h3v6h-3zM3 3h1v1h-1zM14 3h1v1h-1zM3 14h1v1h-1zM14 14h1v1h-1z'/></svg>");
  position: absolute;
  top: 5%;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: max-content;
  max-width: min(86%, 34rem);
  margin: 0;
  padding: 12px 18px;
  font-family: var(--font-body, ui-monospace, monospace);
  font-size: clamp(15px, 2.2vw, 19px);
  line-height: 1.4;
  text-align: center;
  /* облачко всегда светлое с темным текстом - как в студии, в любой теме */
  color: #0d1b2a;
  /* углы - пиксельной лестницей сайта (styles.css: --stair, --frame-img), тень - по ее форме */
  filter: drop-shadow(5px 5px 0 rgba(0, 6, 34, 0.35));
  overflow-wrap: anywhere;
}
.home-bubble::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border: 3px solid #000622;
  border-image: var(--bubble-frame) 6 / 6px / 0 repeat;
  background: #fcf9f1;
  background-clip: padding-box;
  clip-path: var(--stair);
}
/* хвостик к голове - ступеньками по 3 px, продолжает рамку */
.home-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 30px;
  height: 15px;
  margin-left: -15px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='15' shape-rendering='crispEdges'><path fill='%23000622' d='M3 3h24v3h-24zM6 6h18v3h-18zM9 9h12v3h-12zM12 12h6v3h-6z'/><path fill='%23fcf9f1' d='M3 0h24v3h-24zM6 3h18v3h-18zM9 6h12v3h-12zM12 9h6v3h-6z'/></svg>") no-repeat;
}

/* нижняя плашка: что играет и чья сцена | кнопка «на весь экран» - одна рамка, одна высота */
@media (max-width: 700px) {
  .home-stage {
    min-height: calc(100dvh - 64px);
  }
}

/* общие стили сайта оставляют у main отступ под «трассу» старой главной - здесь его нет */
body.home main.home-stage {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Модель грузится: портал (как на заставке сайта) на ее месте; заставка гаснет - портал остается,
   а когда модель готова, Chatty выходит из него: круг проявления растет из центра портала,
   кольца разлетаются (home.js - --portal-x/y, home-robot--emerge) */
.home-robot--loading iframe {
  opacity: 0;
}
.home-robot--emerge iframe {
  animation: home-emerge 0.75s steps(10, end) both;
}
@keyframes home-emerge {
  from { clip-path: circle(0 at var(--portal-x, 50%) var(--portal-y, 50%)); filter: brightness(2.2); }
  60% { filter: brightness(1.3); }
  to { clip-path: circle(150% at var(--portal-x, 50%) var(--portal-y, 50%)); filter: none; }
}
/* Плоский Chatty (нет WebGL): фото, а на его экране - холст с мимикой (showcase-player.js, flat) */
.home-robot--flat .home-robot__img { display: block; }
.home-flat__face {
  position: absolute;
  z-index: 1;
  image-rendering: pixelated;
  pointer-events: none;
}
.home-robot--loading .home-robot__img,
.home-robot--loading .home-flat__face { opacity: 0; }
.home-robot--emerge .home-robot__img,
.home-robot--emerge .home-flat__face { animation: home-emerge-flat 0.75s steps(10, end) both; }
@keyframes home-emerge-flat {
  from { opacity: 0; filter: brightness(2.2); }
  60% { opacity: 1; filter: brightness(1.3); }
  to { opacity: 1; filter: none; }
}
.home-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(94, 176, 254, 0.28));
}
.home-robot--emerge .home-loading {
  animation: home-portal-out 0.75s steps(8, end) forwards;
}
@keyframes home-portal-out {
  to { transform: scale(2.6); opacity: 0; }
}
.home-loading i {
  position: absolute;
  inset: 0;
  margin: auto;
}
.home-loading i:nth-of-type(1),
.home-loading i:nth-of-type(2) {
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ff6601 0 7deg, transparent 7deg 16deg, #5eb0fe 16deg 24deg, transparent 24deg 32deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 0);
  animation: home-loading-spin 1.45s steps(24) infinite;
}
.home-loading i:nth-of-type(2) {
  inset: 17px;
  background: repeating-conic-gradient(from 8deg, #5eb0fe 0 5deg, transparent 5deg 15deg, #ff6601 15deg 19deg, transparent 19deg 30deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 0);
  animation-direction: reverse;
  animation-duration: 1.1s;
}
.home-loading i:nth-of-type(3) {
  inset: 34px;
  display: grid;
  place-items: center;
  background: #101e42;
  border: 2px solid #173a77;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 3px #0b1530, 0 0 0 2px rgba(255, 102, 1, 0.35);
}
/* проценты загрузки модели - под порталом, как строка статуса на заставке сайта */
.home-loading__pct {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  transform: translateX(-50%);
  font: 700 12px/1 var(--font-display, monospace);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #8eb8ff;
  white-space: nowrap;
}
:root[data-theme="light"] .home-loading__pct { color: #0d5bd9; }
.home-robot--emerge .home-loading__pct { visibility: hidden; }
.home-loading i:nth-of-type(3) img {
  width: 33px;
  height: 28px;
  object-fit: contain;
  transform: rotate(-45deg);
}
:root[data-theme="light"] .home-loading i:nth-of-type(3) {
  background: #fcf9f1;
  border-color: #0d5bd9;
  box-shadow: inset 0 0 0 3px #f1ebda, 0 0 0 2px rgba(255, 102, 1, 0.45);
}
@keyframes home-loading-spin {
  to { transform: rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
  .home-loading i { animation: none !important; }
  .home-robot--emerge iframe, .home-robot--emerge .home-loading { animation-duration: 0.01s; }
}

/* на главной страница не масштабируется щипком: ни на сцене, ни на шапке */
html:has(.home-stage),
html:has(.home-stage) body {
  touch-action: pan-x pan-y;
}
/* щипок двумя пальцами меняет масштаб робота, а не страницы; одним пальцем страница листается */
.home-robot { touch-action: pan-y; }

/* ── На весь экран на телефоне: черные полосы у краев с вырезом камеры ───────────────────────
   В полноэкранном режиме страница занимает и ту часть экрана, где у многих телефонов камера, -
   она ложилась прямо на шапку (на переключатель темы). Сверху и снизу (а на боку - слева и справа)
   оставляем черные полосы: интерфейс начинается под камерой. Полоса не меньше 36 px, а где браузер
   сообщает размер выреза - по нему. Класс ставит home.js: только на сенсорных экранах и только
   в полноэкранном режиме - на компьютере полосы не нужны. */
html.home-fullbars {
  background: #000;
  /* размеры полос - одной правдой для страницы и 3D-прогулки (она на весь экран поверх всего) */
  --bar-t: max(36px, env(safe-area-inset-top, 0px));
  --bar-b: max(24px, env(safe-area-inset-bottom, 0px));
  --bar-l: 0px;
  --bar-r: 0px;
}
html.home-fullbars body.home {
  box-sizing: border-box;
  border: 0 solid #000;
  border-top-width: max(36px, env(safe-area-inset-top, 0px));
  border-bottom-width: max(24px, env(safe-area-inset-bottom, 0px));
}
/* шапка липкая внутри body: экран главной зафиксирован, и body сам стал контейнером, так что отступ
   под полосу уже дает рамка body - сверху 0, иначе шапка съезжала на полосу ниже и наезжала на сцену */
html.home-fullbars .chrome { top: 0; }
@media (max-width: 700px) {
  /* сцена занимает экран за вычетом шапки - и полос тоже, иначе страница длиннее экрана */
  html.home-fullbars .home-stage {
    min-height: calc(100dvh - 64px - max(36px, env(safe-area-inset-top, 0px)) - max(24px, env(safe-area-inset-bottom, 0px)));
  }
}
@media (orientation: landscape) {
  html.home-fullbars body.home {
    border-top-width: 0;
    border-bottom-width: 0;
    border-left-width: max(36px, env(safe-area-inset-left, 0px));
    border-right-width: max(36px, env(safe-area-inset-right, 0px));
  }
  html.home-fullbars .chrome { top: 0; }
  html.home-fullbars .home-stage { min-height: calc(100dvh - 64px); }
  html.home-fullbars {
    --bar-t: 0px;
    --bar-b: 0px;
    --bar-l: max(36px, env(safe-area-inset-left, 0px));
    --bar-r: max(36px, env(safe-area-inset-right, 0px));
  }
}
/* полосы закреплены поверх страницы (рамка body уезжала при прокрутке) */
html.home-fullbars::before,
html.home-fullbars::after {
  content: "";
  position: fixed;
  z-index: 2147483000;
  background: #000;
  pointer-events: none;
}
html.home-fullbars::before { left: 0; right: 0; top: 0; height: var(--bar-t); }
html.home-fullbars::after { left: 0; right: 0; bottom: 0; height: var(--bar-b); }
@media (orientation: landscape) {
  html.home-fullbars::before { top: 0; bottom: 0; left: 0; right: auto; height: auto; width: var(--bar-l); }
  html.home-fullbars::after { top: 0; bottom: 0; right: 0; left: auto; height: auto; width: var(--bar-r); }
}
/* 3D-прогулка на весь экран: те же черные полосы - сцена и ее кнопки начинаются под камерой */
html.home-walk.home-fullbars .home-stage {
  inset: var(--bar-t) var(--bar-r) var(--bar-b) var(--bar-l);
}

/* ── Пульт под Chatty ─────────────────────────────────────────────────────────────────────────
   Одна панель внизу, как окно диалога в старой игре: над ней - подпись сцены, в ней - клавиша
   «на весь экран» и поле «Напишите Chatty» с оранжевой кнопкой сайта, под ней - мелкая подпись.
   Все детали - те же, что на остальных страницах: лестница-рамка, бумажный лист, кнопки .btn.
   Без поля (другой язык, нет поведения) - только клавиша, у левого края, как раньше. */
.home-dock {
  --dock-gap: 16px;
  position: absolute;
  left: var(--dock-gap);
  bottom: calc(var(--dock-gap) + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: grid;
  justify-items: start;
  gap: 10px;
  max-width: calc(100% - 2 * var(--dock-gap));
}
.home-dock[hidden] {
  display: none;
}
/* с полем - по центру и шире: пульт главной */
.home-dock.has-chat {
  left: 50%;
  width: min(680px, calc(100% - 2 * var(--dock-gap)));
  transform: translateX(-50%);
  justify-items: stretch;
}
.home-dock__bar {
  display: flex;
  align-items: stretch;
  gap: 14px;
  min-width: 0;
}

/* кнопки-ответы (нода «Варианты»): над полем, кнопки сайта поменьше; переносятся строками */
.home-choices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  padding: 0 4px 4px;
}
.home-choices[hidden] {
  display: none;
}
.home-choice {
  font-size: 11px;
  padding: 8px 12px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
}
@media (max-width: 520px) {
  .home-choices {
    gap: 8px;
  }
  .home-choice {
    font-size: 10px;
    padding: 7px 10px;
  }
}

/* подпись сцены - бумажная плашка над пультом, по левому краю */
.home-caption {
  position: relative;
  justify-self: start;
  max-width: 100%;
  display: grid;
  gap: 2px;
  margin: 0 0 0 3px;
  padding: 9px 14px;
  filter: drop-shadow(4px 4px 0 rgba(0, 6, 34, 0.3));
}
.home-caption::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border: 3px solid var(--outline-blue);
  border-image: var(--frame-img) 6 / 6px / 0 repeat;
  background: var(--paper);
  background-clip: padding-box;
  clip-path: var(--stair);
}
.home-caption[hidden] {
  display: none;
}
.home-caption__what {
  font-family: var(--font-display, inherit);
  font-size: 12px;
  line-height: 1.5;
  color: var(--navy);
  overflow-wrap: break-word;
}
.home-caption__who {
  font-size: 13px;
  color: var(--petrol);
  overflow-wrap: break-word;
}

/* клавиша «на весь экран» - кнопка сайта (.btn--ghost), квадратная, без стрелки-курсора */
.home-full {
  flex: none;
  width: 52px;
  min-height: 52px;
  padding: 0;
  color: var(--blue-pale-line);
}
.home-full::before {
  display: none;
}
.home-full svg {
  width: 20px;
  height: 20px;
}
.home-full[hidden] {
  display: none;
}
.home-full .home-full__out,
.home-full[aria-pressed="true"] .home-full__in {
  display: none;
}
.home-full[aria-pressed="true"] .home-full__out {
  display: block;
}

/* поле: лист с рамкой-лестницей, внутри - приглашение «>», ввод и оранжевая кнопка */
.home-chat {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 6px 6px 16px;
  filter: drop-shadow(4px 4px 0 rgba(0, 6, 34, 0.3));
}
.home-chat::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border: 3px solid var(--outline-blue);
  border-image: var(--frame-img) 6 / 6px / 0 repeat;
  background: var(--paper);
  background-clip: padding-box;
  clip-path: var(--stair);
}
.home-chat:focus-within::before {
  border-color: var(--orange);
  border-image-source: var(--frame-orange);
}
.home-chat[hidden] {
  display: none;
}
.home-chat__prompt {
  flex: none;
  font-family: var(--font-display, inherit);
  font-size: 14px;
  color: var(--orange);
}
/* пустое поле без фокуса - приглашение мигает, как курсор в игре */
.home-chat:not(:focus-within):has(.home-chat__input:placeholder-shown) .home-chat__prompt {
  animation: sel-blink 1s steps(2, end) infinite;
}
.home-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--petrol);
  font-family: var(--font-body, inherit);
  font-size: 16px;   /* меньше 16 - iPhone приближает страницу при вводе */
  caret-color: var(--orange);
}
.home-chat__input::placeholder {
  color: var(--text-mute, var(--slate));
  opacity: 1;
}
.home-chat__input:focus {
  outline: none;   /* фокус показывает рамка всего поля - оранжевая */
}
.home-chat__send {
  flex: none;
  gap: 10px;
  padding: 10px 16px;
  font-size: 12px;
}
.home-chat__send::before {
  display: none;
}
.home-chat__send svg {
  flex: none;
}

/* Согласие на сохранение разговора: пиксельный тумблер, как «Тема» в шапке. Включен - оранжевый,
   цвет основной кнопки; выключен - пустая темная дорожка, фишка слева. */
.home-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-mute, var(--slate));
}
.home-consent[hidden] {
  display: none;
}
.home-consent__switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-consent__switch:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.home-consent__track {
  position: relative;
  flex: none;
  width: 34px;
  height: 18px;
  background-color: rgba(0, 0, 0, 0.34);
  clip-path: var(--stair-sm);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.3), inset 2px 0 0 rgba(0, 0, 0, 0.3),
    inset 0 -2px 0 rgba(255, 255, 255, 0.22), inset -2px 0 0 rgba(255, 255, 255, 0.22);
  transition: background-color 0.12s steps(2);
}
.home-consent__track::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  background-color: var(--blue-soft);
  clip-path: var(--stair-sm);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.55), inset -2px -2px 0 rgba(0, 0, 0, 0.28);
  transition: background-color 0.12s steps(2), transform 0.12s steps(2);
}
.home-consent__switch[aria-checked="true"] .home-consent__track {
  background-color: var(--orange);
}
.home-consent__switch[aria-checked="true"] .home-consent__track::before {
  background-color: var(--white);
  transform: translateX(16px);
}
.home-consent__switch[aria-checked="true"] .home-consent__label {
  color: var(--petrol);
}
/* баланс токенов Chatty: монета с ушками (как в студии) и число; потратил - число мигает «−N» */
.home-tokens {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--petrol);
  cursor: help;
}
.home-tokens[hidden] {
  display: none;
}
.home-tokens__n {
  font-family: var(--font-display, inherit);
  font-size: 11px;
  font-weight: 400;
  color: var(--yellow, #ffd24a);
}
:root:not([data-theme="dark"]) .home-tokens__n {
  color: #8f5f00;
}
.home-tokens--empty .home-tokens__n {
  color: var(--orange);
}
.home-tokens__spent {
  position: absolute;
  left: 100%;
  top: -2px;
  margin-left: 4px;
  font-family: var(--font-display, inherit);
  font-size: 10px;
  color: var(--orange);
  white-space: nowrap;
  animation: home-spent 1.2s steps(6, end) forwards;
  pointer-events: none;
}
@keyframes home-spent {
  to { transform: translateY(-14px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-tokens__spent { animation: none; opacity: 0; }
  .home-consent__track,
  .home-consent__track::before {
    transition: none;
  }
}

@media (max-width: 700px) {
  .home-dock {
    --dock-gap: 12px;
  }
  .home-dock__bar {
    gap: 10px;
  }
  .home-full {
    width: 48px;
    min-height: 48px;
  }
  .home-chat {
    padding-left: 12px;
  }
}
/* узкий телефон: на кнопке только стрелка */
@media (max-width: 520px) {
  .home-chat__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .home-chat__send {
    width: 48px;
    padding: 10px 0;
  }
}

/* Пишут с телефона: клавиатура закрыла низ экрана - пульт встает над ней (home.js считает
   высоту клавиатуры по visualViewport в --kb), подписи прячутся, чтобы Chatty было видно. */
html.home-typing .home-dock {
  position: fixed;
  bottom: calc(var(--kb, 0px) + 8px);
  z-index: 6;
}
html.home-typing .home-dock.has-chat {
  width: calc(100% - 16px);
}
/* Chatty - в видимой части экрана над пультом: целиком, просто меньше (вьюер подстраивается под окно) */
html.home-typing .home-robot {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--vv-top, 0px);
  height: calc(var(--vv-h, 100dvh) - var(--dock-h, 72px) - 24px);
  min-height: 160px;
  z-index: 5;
}
html.home-typing .chrome {
  visibility: hidden;
}
/* окно с Chatty при клавиатуре низкое - облачко компактнее, чтобы над головой хватило места */
html.home-typing .home-bubble {
  font-size: 13px;
  padding: 8px 12px;
  max-width: 94%;
}
html.home-typing .home-caption,
html.home-typing .home-consent,
html.home-typing .home-choices,
html.home-typing .home-full {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-chat__prompt {
    animation: none !important;
  }
}

/* ── Смайлики у Chatty: слева «не нравится», справа «нравится» (home-react.js) ───────────────────
   Пиксельные 16x16, висят по бокам сцены на уровне Chatty. Веселый покачивается и подмигивает,
   у грустного катится слеза; наведение - подпрыгивают, нажатие - сжимаются и выпускают частицы. */
.home-react {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.home-react__btn {
  --px: 3.5px;
  position: absolute;
  top: 44%;
  width: calc(16 * var(--px) + 12px);
  height: calc(16 * var(--px) + 12px);
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(3px 3px 0 rgba(0, 6, 34, 0.45));
  animation: hr-float 3.2s steps(8, end) infinite;
}
/* у Chatty, а не у краев окна: на широком экране - в ~330 px от центра */
.home-react__btn--left { left: max(12px, calc(50% - 330px - 34px)); }
.home-react__btn--right { right: max(12px, calc(50% - 330px - 34px)); animation-delay: -1.6s; }
.home-react__btn svg.hr-face { display: block; width: 100%; height: 100%; overflow: visible; }
.home-react__btn:hover svg.hr-face,
.home-react__btn:focus-visible svg.hr-face { animation: hr-hop 0.5s steps(4, end); }
.home-react__btn:focus-visible { outline: 3px solid var(--accent, #ff6601); outline-offset: 2px; }
.home-react__btn.is-pressed svg.hr-face { animation: hr-press 0.32s steps(3, end); }
/* веселый подмигивает */
.home-react__btn--like .hr-eyes { transform-box: fill-box; transform-origin: center; animation: hr-blink 4.2s steps(1, end) infinite; }
/* грустный: слеза катится вниз и тает */
.home-react__btn--dislike .hr-tear { animation: hr-tear 3.6s steps(9, end) infinite; }
.home-react__bit {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  pointer-events: none;
  animation: hr-bit 0.9s steps(6, end) forwards;
}
.home-react__bit svg { display: block; width: 100%; height: 100%; }
@keyframes hr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes hr-hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-6px) scale(1.08); } 100% { transform: translateY(0) scale(1); } }
@keyframes hr-press { 0% { transform: scale(1); } 40% { transform: scale(0.82, 0.78); } 100% { transform: scale(1); } }
@keyframes hr-blink { 0%, 92% { transform: scaleY(1); } 94%, 97% { transform: scaleY(0.2); } 100% { transform: scaleY(1); } }
@keyframes hr-tear { 0%, 30% { transform: translateY(0); opacity: 0; } 35% { opacity: 1; } 85% { transform: translateY(6px); opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes hr-bit { 0% { transform: translate(0, 0) scale(0.6); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; } }
@media (max-width: 520px) {
  .home-react__btn { --px: 2.6px; top: 40%; }
  .home-react__btn--left { left: 4px; }
  .home-react__btn--right { right: 4px; }
}
/* пишут с телефона - окно с Chatty низкое, смайлики не мешают */
html.home-typing .home-react { display: none; }
@media (prefers-reduced-motion: reduce) {
  .home-react__btn, .home-react__btn svg.hr-face, .home-react__btn .hr-eyes, .home-react__btn .hr-tear { animation: none !important; }
}

/* ── 3D-прогулка (кнопка-геймпад на пульте, walk-mode.js во вьюере) ─────────────────────────────
   Сцена - на весь экран, шапка, пульт и смайлики прячутся; реплики Chatty - субтитрами сверху. */
html.home-walk,
html.home-walk body { overflow: hidden; }
html.home-walk .chrome,
html.home-walk .home-react { display: none !important; }
/* пульт в прогулке: только варианты ответа и (по Enter / кнопке чата) строка ввода - внизу по центру */
html.home-walk .home-dock { display: none !important; }
html.home-walk-ready .home-dock:has(.home-choices:not([hidden])),
html.home-walk-ready.home-walk-chat .home-dock {
  display: grid !important;
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(96px + var(--bar-b, 0px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  z-index: 205;
  justify-items: stretch;
}
html.home-walk .home-caption,
html.home-walk .home-consent,
html.home-walk .home-dock .home-full { display: none !important; }
html.home-walk:not(.home-walk-chat) .home-chat { display: none !important; }
html.home-walk .home-dock__bar { display: flex; }
html.home-walk .home-chat { flex: 1 1 auto; }
html.home-walk .home-stage {
  position: fixed;
  inset: 0;
  z-index: 200;
  min-height: 0;
  background: #05030f;
}
html.home-walk .home-robot { position: absolute; inset: 0; }
/* мышь захватывает страница (слой-ловушка в HUD), вьюер только рисует; на телефоне пальцы - во вьюер */
html.home-walk .home-robot iframe { pointer-events: none !important; }
html.home-walk-touch .home-robot iframe { pointer-events: auto !important; }
.home-walk-hud__catch { position: absolute; inset: 0; pointer-events: auto; cursor: crosshair; touch-action: none; }
html.home-walk-touch .home-walk-hud__catch { display: none; }
html.home-walk .home-bubble {
  position: fixed;
  top: 18px !important;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92%, 40rem);
  font-size: 15px;
  z-index: 202;
}
/* в прогулке облачко висит над головой Chatty в 3D: страница каждый кадр ставит --bx/--by (верх головы
   на экране) и --bs (масштаб по расстоянию); Chatty позади или за краем - облачка не видно */
html.home-walk-ready .home-bubble {
  top: var(--by, 18px) !important;
  left: var(--bx, 50%);
  max-width: min(80vw, 30rem);
  transform: translate(-50%, calc(-100% - 14px)) scale(var(--bs, 1));
  transform-origin: 50% calc(100% + 14px);
  will-change: transform, top, left;
}
html.home-walk-ready.home-walk-bubble-off .home-bubble { visibility: hidden; }
.home-walk-hud { position: absolute; inset: 0; z-index: 204; pointer-events: none; }   /* кнопки - над облачком (202) и заставкой (203) */
.home-walk-hud[hidden] { display: none; }
.home-walk-hud__cross {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background:
    linear-gradient(#19e3ff, #19e3ff) center / 2px 14px no-repeat,
    linear-gradient(#19e3ff, #19e3ff) center / 14px 2px no-repeat;
  opacity: 0.8;
  filter: drop-shadow(0 0 3px rgba(25, 227, 255, 0.8));
}
.home-walk-hud__hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 8px 14px;
  font: 13px/1.5 var(--font-body, ui-monospace, monospace);
  color: #c9f6ff;
  text-align: center;
  background: rgba(5, 3, 15, 0.72);
  border: 1px solid rgba(25, 227, 255, 0.45);
}
.home-walk-hud__top {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 10px;
  pointer-events: auto;
}
.home-walk-hud__fs[hidden] { display: none; }
/* вышли из полного экрана - кнопка возврата заметнее: зеленая, как кнопка прогулки */
.home-walk-hud__fs { color: #3dff8a; }
.home-walk-hud__fs::after { border-image: none; border-color: #1fd36a; background-color: #06301a; background-image: none; }
/* телефон: круглые неоновые кнопки под правым большим пальцем (с учетом выреза и скруглений экрана) */
.home-walk-hud__pad {
  display: none;
  position: absolute;
  padding: 0;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
html.home-walk-touch.home-walk-ready .home-walk-hud__pad { display: grid; place-items: center; }
.home-walk-hud__fire {
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width: 78px;
  height: 78px;
  border: 3px solid #ff4f9a;
  background: radial-gradient(circle, rgba(255, 79, 154, 0.35), rgba(5, 3, 15, 0.55) 70%);
  box-shadow: 0 0 18px rgba(255, 79, 154, 0.55);
}
.home-walk-hud__fire i {
  width: 30px;
  height: 30px;
  background:
    linear-gradient(#ffd0e4, #ffd0e4) center / 3px 30px no-repeat,
    linear-gradient(#ffd0e4, #ffd0e4) center / 30px 3px no-repeat;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #ffd0e4;
}
.home-walk-hud__fire.is-down { transform: scale(0.9); background: rgba(255, 79, 154, 0.55); }
.home-walk-hud__jump {
  right: calc(110px + env(safe-area-inset-right, 0px));
  bottom: calc(38px + env(safe-area-inset-bottom, 0px));
  width: 58px;
  height: 58px;
  border: 3px solid #19e3ff;
  background: radial-gradient(circle, rgba(25, 227, 255, 0.28), rgba(5, 3, 15, 0.55) 70%);
  box-shadow: 0 0 14px rgba(25, 227, 255, 0.5);
  color: #e9feff;
  font: 700 24px/1 var(--font-display, monospace);
}
.home-walk-hud__jump.is-down { transform: scale(0.9); }
.home-walk-hud__gyro {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: calc(14px + env(safe-area-inset-left, 0px));
  pointer-events: auto;
  color: #19e3ff;
}
.home-walk-hud__gyro[hidden] { display: none; }
.home-walk-hud__gyro[aria-pressed="true"] { color: #04170d; }
.home-walk-hud__gyro[aria-pressed="true"]::after { background-color: #3dff8a; border-image: none; border-color: #1fd36a; background-image: none; }
html.home-walk-touch .home-walk-hud__top { top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); }
/* телефон: подсказка коротко - и гаснет */
html.home-walk-touch.home-walk-ready .home-walk-hud__hint { animation: home-walk-in 0.4s steps(4, end) both, walk-hint-out 0.6s steps(4, end) 6s forwards; }
@keyframes walk-hint-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 520px) {
  html.home-walk:not(.home-walk-ready) .home-bubble { font-size: 13px; top: 64px !important; }
  html.home-walk-ready .home-bubble { font-size: 13px; }
  .home-walk-hud__hint { font-size: 12px; }
}
/* мышь не захвачена - приглашение щелкнуть по центру; захвачена или телефон - нет */
.home-walk-hud__click {
  position: absolute;
  left: 50%;
  top: calc(50% + 28px);
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 6px 12px;
  font: 14px/1.4 var(--font-body, ui-monospace, monospace);
  color: #05030f;
  text-align: center;
  background: #19e3ff;
  box-shadow: 0 0 14px rgba(25, 227, 255, 0.6);
}
html.home-walk-locked .home-walk-hud__click,
html.home-walk-touch .home-walk-hud__click { display: none; }

/* ── заставка входа в 3D-прогулку ─────────────────────────────────────────────────────────────
   1) home-walk-glitch: главная «ломается» - полосы сдвигаются, цвета расходятся (0.38 с);
   2) home-walk-intro: вспышка, титр CHATTY GRID с расшифровкой букв, подпись; подсказки и прицел
      ждут home-walk-ready (вьюер долетел); 3) home-walk-back - вспышка при возвращении. */
html.home-walk-glitch .home-stage {
  animation: home-glitch 0.38s steps(1, end) both;
}
@keyframes home-glitch {
  0%   { clip-path: inset(0); filter: none; transform: none; }
  12%  { clip-path: inset(8% 0 62% 0); transform: translateX(-18px); filter: drop-shadow(6px 0 #ff2bd6) drop-shadow(-6px 0 #19e3ff); }
  24%  { clip-path: inset(40% 0 22% 0); transform: translateX(22px); filter: drop-shadow(-8px 0 #ff2bd6) drop-shadow(8px 0 #19e3ff) brightness(1.4); }
  36%  { clip-path: inset(0 0 0 0); transform: translateX(-6px) skewX(-6deg); filter: hue-rotate(90deg) contrast(1.6); }
  48%  { clip-path: inset(70% 0 4% 0); transform: translateX(30px); filter: drop-shadow(10px 0 #ff2bd6) brightness(1.8); }
  60%  { clip-path: inset(18% 0 48% 0); transform: translateX(-26px); filter: invert(1) hue-rotate(180deg); }
  72%  { clip-path: inset(0 0 0 0); transform: scaleY(0.04); filter: brightness(3); }
  86%  { clip-path: inset(49% 0 49% 0); transform: scaleX(1.2); filter: brightness(4); }
  100% { clip-path: inset(50% 0 50% 0); transform: none; filter: brightness(4); }
}
.home-walk-fx {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 203;
  pointer-events: none;
  place-items: center;
  align-content: center;
  gap: 10px;
}
html.home-walk-intro .home-walk-fx,
html.home-walk-back .home-walk-fx { display: grid; }
.home-walk-fx__flash {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(5, 3, 15, 0.35) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 50%, #e9feff, #19e3ff 40%, #05030f 75%);
  opacity: 0;
}
html.home-walk-intro .home-walk-fx__flash { animation: home-walk-flash 0.7s steps(7, end) both; }
html.home-walk-back .home-walk-fx__flash { animation: home-walk-flash 0.45s steps(5, end) both; }
@keyframes home-walk-flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.home-walk-fx__title,
.home-walk-fx__sub { position: relative; display: none; text-align: center; }
html.home-walk-intro .home-walk-fx__title,
html.home-walk-intro .home-walk-fx__sub { display: block; }
.home-walk-fx__title {
  font: 400 clamp(34px, 8vw, 92px)/1 var(--font-display, var(--font-body, monospace));
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  color: #e9feff;
  text-shadow: 3px 0 #ff2bd6, -3px 0 #19e3ff, 0 0 24px rgba(25, 227, 255, 0.75);
  animation: home-walk-title 3s steps(30, end) both;
}
.home-walk-fx__sub {
  font: 14px/1.4 var(--font-body, ui-monospace, monospace);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #19e3ff;
  max-width: calc(100% - 32px);
  animation: home-walk-title 3s steps(30, end) both;
  animation-delay: 0.25s;
}
@keyframes home-walk-title {
  0% { opacity: 0; transform: scale(1.4); filter: blur(6px); }
  12% { opacity: 1; transform: scale(1); filter: none; }
  70% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(0.9) translateY(-30px); }
}
/* подсказки, прицел и приглашение щелкнуть - когда камера долетела */
html.home-walk:not(.home-walk-ready) .home-walk-hud__hint,
html.home-walk:not(.home-walk-ready) .home-walk-hud__click,
html.home-walk:not(.home-walk-ready) .home-walk-hud__cross,
html.home-walk:not(.home-walk-ready) .home-walk-hud__jump,
html.home-walk:not(.home-walk-ready) .home-bubble { visibility: hidden; }
html.home-walk-ready .home-walk-hud__hint,
html.home-walk-ready .home-walk-hud__click { animation: home-walk-in 0.4s steps(4, end) both; }
@keyframes home-walk-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  html.home-walk-glitch .home-stage,
  .home-walk-fx__flash,
  .home-walk-fx__title,
  .home-walk-fx__sub { animation-duration: 0.01s !important; }
}

/* ── Кнопка 3D-прогулки: неоновая, зовет нажать ─────────────────────────────────────────────
   Зеленое свечение пульсирует ступенями (как «PRESS START» в аркаде), раз в 2.4 с от рамки
   расходится пиксельное кольцо, сверху - бейдж «3D». Наведение - свечение ровное и ярче.
   Тот, кто уже гулял (home-walk-seen), видит пульс реже. */
.home-walk-cta {
  color: #3dff8a;
  --btn-ink: #04170d;
  animation: walk-cta-glow 1.6s steps(8, end) infinite;
}
.home-walk-cta::after {
  border-image: none;
  border-color: #1fd36a;
  background-color: #06301a;
  background-image:
    repeating-linear-gradient(0deg, rgba(61, 255, 138, 0.10) 0 1px, transparent 1px 3px);
  background-size: auto;
}
.home-walk-cta svg { filter: drop-shadow(0 0 3px rgba(61, 255, 138, 0.9)); }
@keyframes walk-cta-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(61, 255, 138, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(61, 255, 138, 0.85)) drop-shadow(0 0 2px #3dff8a); }
}
.home-walk-cta__ping {
  position: absolute;
  inset: -3px;
  z-index: -2;
  border: 3px solid #3dff8a;
  clip-path: var(--stair);
  pointer-events: none;
  opacity: 0;
  animation: walk-cta-ping 2.4s steps(10, end) infinite;
}
@keyframes walk-cta-ping {
  0% { transform: scale(1); opacity: 0.9; }
  45%, 100% { transform: scale(1.7); opacity: 0; }
}
.home-walk-cta__badge {
  position: absolute;
  top: -10px;
  right: -12px;
  padding: 2px 4px 1px;
  font: 700 9px/1 var(--font-display, monospace);
  letter-spacing: 0.04em;
  color: #04170d;
  background: #3dff8a;
  box-shadow: 0 0 0 2px #04170d, 0 0 8px rgba(61, 255, 138, 0.8);
  pointer-events: none;
  animation: walk-cta-badge 1.6s steps(2, end) infinite;
}
@keyframes walk-cta-badge {
  50% { background: #b6ffd2; }
}
.home-walk-cta:hover,
.home-walk-cta:focus-visible {
  animation: none;
  filter: drop-shadow(0 0 12px rgba(61, 255, 138, 0.95)) drop-shadow(0 0 2px #3dff8a);
}
.home-walk-cta:hover .home-walk-cta__ping,
.home-walk-cta:focus-visible .home-walk-cta__ping { animation: none; opacity: 0; }
html.home-walk-seen .home-walk-cta { animation-duration: 3.2s; }
html.home-walk-seen .home-walk-cta__ping { animation-duration: 6s; }
@media (prefers-reduced-motion: reduce) {
  .home-walk-cta,
  .home-walk-cta__ping,
  .home-walk-cta__badge { animation: none !important; }
  .home-walk-cta { filter: drop-shadow(0 0 8px rgba(61, 255, 138, 0.7)); }
}
/* автоход (R): плашка над подсказкой, мигает стрелка */
.home-walk-hud__auto {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  margin: 0;
  padding: 5px 10px;
  font: 700 12px/1.3 var(--font-display, monospace);
  color: #04170d;
  background: #3dff8a;
  box-shadow: 0 0 12px rgba(61, 255, 138, 0.7);
}
html.home-walk-auto.home-walk-ready .home-walk-hud__auto { display: block; }
/* выстрел: прицел подпрыгивает (отдача); попадание - прицел вспыхивает «крестом попадания» */
.home-walk-hud__cross.is-shot { animation: walk-recoil 0.18s steps(3, end); }
.home-walk-hud__cross.is-hit::after {
  content: "";
  position: absolute;
  inset: -9px;
  background:
    linear-gradient(45deg, transparent 45%, #ff4f9a 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #ff4f9a 45% 55%, transparent 55%);
  animation: walk-hitmark 0.35s steps(4, end) forwards;
}
@keyframes walk-recoil {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-6px) scale(1.5); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes walk-hitmark {
  0% { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.4); }
}
/* телефон: подсказка сверху, под кнопками - внизу пальцы и кнопки огня/прыжка */
html.home-walk-touch .home-walk-hud__hint {
  top: calc(64px + env(safe-area-inset-top, 0px));
  bottom: auto;
  font-size: 12px;
}

/* ── чат в 3D ─────────────────────────────────────────────────────────────────────────────── */
/* варианты ответа - как реплики в диалоге RPG: столбиком, с номером клавиши */
html.home-walk .home-choices {
  display: grid;
  gap: 6px;
  justify-items: stretch;
  counter-reset: walk-choice;
}
html.home-walk .home-choices[hidden] { display: none; }
html.home-walk .home-choice {
  justify-content: flex-start;
  text-align: left;
  counter-increment: walk-choice;
}
html.home-walk:not(.home-walk-touch) .home-choice::before {
  content: "[" counter(walk-choice) "]";
  position: static;
  translate: none;
  margin-right: 10px;
  opacity: 1;
  animation: none;
  font-size: 1em;
  color: #3dff8a;
}
/* лента чата: слева внизу, реплики гаснут через 8 с; при открытом чате видны все */
.home-walk-hud__log {
  position: absolute;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 32px));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  pointer-events: none;
}
.home-walk-hud__line {
  padding: 4px 8px;
  font: 13px/1.4 var(--font-body, ui-monospace, monospace);
  color: #e9feff;
  background: rgba(5, 3, 15, 0.7);
  border-left: 3px solid #19e3ff;
  overflow-wrap: anywhere;
  animation: walk-line 8s steps(1, end) forwards;
}
.home-walk-hud__line--me { border-left-color: #3dff8a; }
.home-walk-hud__line b { color: #19e3ff; font-weight: 700; }
.home-walk-hud__line--me b { color: #3dff8a; }
@keyframes walk-line {
  0%, 85% { opacity: 1; }
  100% { opacity: 0; }
}
html.home-walk-chat .home-walk-hud__line { animation: none; opacity: 1; }
html.home-walk:not(.home-walk-ready) .home-walk-hud__log { visibility: hidden; }
/* когда внизу варианты или строка ввода - лента и подсказка не мешают */
html.home-walk-chat .home-walk-hud__hint { visibility: hidden; }
/* кнопка чата: на телефоне - слева сверху рядом с гироскопом; на компьютере не нужна (Enter) */
.home-walk-hud__chat {
  display: none;
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: calc(14px + env(safe-area-inset-left, 0px));
  width: 48px;
  min-height: 40px;
  padding: 0;
  pointer-events: auto;
  color: #3dff8a;
}
.home-walk-hud__chat::before { display: none; }
html.home-walk-touch.home-walk-ready .home-walk-hud__chat { display: grid; place-items: center; }
html.home-walk-touch .home-walk-hud__gyro { left: calc(74px + env(safe-area-inset-left, 0px)); }
/* телефон: строка ввода и варианты - вверху, над экранной клавиатурой; лента - под ними */
html.home-walk-touch.home-walk-ready .home-dock:has(.home-choices:not([hidden])),
html.home-walk-touch.home-walk-ready.home-walk-chat .home-dock {
  top: var(--walk-dock-top, calc(64px + var(--bar-t, 0px)));
  bottom: auto;
}
/* телефон: варианты ответа - только при открытом чате (кнопка чата), иначе они закрывали сцену и кнопки */
html.home-walk-touch.home-walk-ready:not(.home-walk-chat) .home-dock:not(.home-walk-none) { display: none !important; }   /* сильнее правила «есть варианты - показать» */
/* есть варианты ответа - зеленая точка на кнопке чата */
/* (::after у кнопок сайта - их рамка, поэтому точка - отдельный элемент) */
.home-walk-hud__dot { display: none; }
html.home-walk-touch.home-walk-has-choices:not(.home-walk-chat) .home-walk-hud__dot {
  display: block;
  position: absolute;
  z-index: 1;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: #3dff8a;
  box-shadow: 0 0 0 2px #05030f, 0 0 8px rgba(61, 255, 138, 0.9);
  animation: walk-cta-badge 1.6s steps(2, end) infinite;
}
/* «на весь экран» на телефоне - квадратный значок */
.home-walk-hud__gyro--icon {
  width: 48px;
  min-height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
}
.home-walk-hud__gyro--icon::before { display: none; }
.home-walk-hud__fs--icon {
  width: 48px;
  min-height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
}
.home-walk-hud__fs--icon::before { display: none; }
html.home-walk-touch .home-walk-hud__log { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
html.home-walk-touch.home-walk-chat .home-walk-hud__pad { visibility: hidden; }
/* ответы Chatty и так в облачке над ним - в ленте только при открытом чате (история разговора) */
html.home-walk:not(.home-walk-chat) .home-walk-hud__line--bot { display: none; }
/* телефон, чат открыт: облачко не нужно (ответы - в ленте), лента - сразу под строкой ввода,
   над экранной клавиатурой (top ставит home.js) */
html.home-walk-touch.home-walk-chat .home-bubble { visibility: hidden !important; }
html.home-walk-touch.home-walk-chat .home-walk-hud__log { bottom: auto; top: var(--log-top, 50%); }

/* ── 3D-прогулка на компьютере: легенда клавиш, приглашение к мыши, панель ответов ──────────────
   Подсказки - не поверх Chatty: легенда клавишами внизу (через 8 с бледнеет), «щелкните» - над ней,
   варианты ответа - панель диалога справа внизу, как в RPG; при открытом чате - внизу по центру. */
.home-walk-hud__hint--keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  width: max-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  padding: 8px 14px;
  font-size: 12px;
  white-space: nowrap;
  transition: opacity 0.3s steps(3, end);
}
html.home-walk-ready .home-walk-hud__hint--keys { animation: home-walk-in 0.4s steps(4, end) both, walk-keys-dim 0.6s steps(3, end) 8s forwards; }
.home-walk-hud__hint--keys:hover { animation: none; opacity: 1; }
@keyframes walk-keys-dim { to { opacity: 0.35; } }
.home-walk-hud__hint--keys span { display: inline-flex; align-items: center; gap: 6px; color: #9fd8e8; }
.home-walk-hud__hint--keys kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  font: 700 10px/1.4 var(--font-display, monospace);
  letter-spacing: 0.04em;
  text-align: center;
  color: #e9feff;
  background: rgba(25, 227, 255, 0.12);
  border: 1px solid rgba(25, 227, 255, 0.6);
  box-shadow: 0 2px 0 rgba(25, 227, 255, 0.35);
}
html.home-walk:not(.home-walk-touch) .home-walk-hud__hint { pointer-events: auto; }
/* «щелкните»: не на лице Chatty - над легендой, неоновым текстом с пиксельной мышкой */
html.home-walk:not(.home-walk-touch) .home-walk-hud__click {
  top: auto;
  bottom: 70px;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  font: 13px/1.3 var(--font-body, ui-monospace, monospace);
  color: #c9f6ff;
  background: rgba(5, 3, 15, 0.78);
  border: 1px solid rgba(25, 227, 255, 0.7);
  box-shadow: 0 0 16px rgba(25, 227, 255, 0.35);
  animation: walk-click-pulse 1.6s steps(4, end) infinite;
}
html.home-walk:not(.home-walk-touch) .home-walk-hud__click::before {
  content: "";
  width: 12px;
  height: 18px;
  flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9' shape-rendering='crispEdges'><path fill='%2319e3ff' d='M1 0h4v1H1zM0 1h1v7H0zM5 1h1v7H5zM1 8h4v1H1zM3 1h1v3H3zM1 4h4v1H1z'/></svg>") center / contain no-repeat;
}
@keyframes walk-click-pulse { 50% { box-shadow: 0 0 4px rgba(25, 227, 255, 0.15); border-color: rgba(25, 227, 255, 0.35); } }
/* варианты ответа: панель диалога справа внизу (чат закрыт) */
html.home-walk-ready:not(.home-walk-touch):not(.home-walk-chat) .home-dock:has(.home-choices:not([hidden])) {
  left: auto;
  right: calc(24px + var(--bar-r, 0px));
  bottom: calc(80px + var(--bar-b, 0px));
  transform: none;
  width: min(340px, 34vw);
}
html.home-walk:not(.home-walk-touch) .home-choices {
  padding: 34px 10px 10px;
  background: rgba(5, 3, 15, 0.72);
  border: 1px solid rgba(25, 227, 255, 0.45);
  box-shadow: 0 0 22px rgba(25, 227, 255, 0.18);
  position: relative;
}
html.home-walk:not(.home-walk-touch) .home-choices::before {
  content: attr(data-walk-title);
  position: absolute;
  left: 12px;
  top: 10px;
  font: 700 10px/1 var(--font-display, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #19e3ff;
}
html.home-walk:not(.home-walk-touch) .home-choices { justify-items: stretch; justify-content: stretch; grid-template-columns: 1fr; }
html.home-walk:not(.home-walk-touch) .home-choice {
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  min-height: 0;
  padding: 9px 12px;
  font: 13px/1.35 var(--font-body, ui-monospace, monospace);
  letter-spacing: 0;
  text-transform: none;
  color: #e9feff;
  box-shadow: none;
  background: none;
}
html.home-walk:not(.home-walk-touch) .home-choice::after {
  background: rgba(25, 227, 255, 0.06);
  background-image: none;
  border-image: none;
  border: 1px solid rgba(25, 227, 255, 0.28);
  clip-path: none;
  box-shadow: none;
}
html.home-walk:not(.home-walk-touch) .home-choice:hover,
html.home-walk:not(.home-walk-touch) .home-choice:focus-visible { transform: none; color: #fff; }
html.home-walk:not(.home-walk-touch) .home-choice:hover::after,
html.home-walk:not(.home-walk-touch) .home-choice:focus-visible::after {
  background: rgba(25, 227, 255, 0.16);
  border-color: #19e3ff;
  box-shadow: 0 0 12px rgba(25, 227, 255, 0.4);
}
html.home-walk:not(.home-walk-touch) .home-choice::before {
  content: counter(walk-choice);
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-right: 10px;
  padding: 0 4px;
  font: 700 10px/1 var(--font-display, monospace);
  color: #04170d;
  background: #3dff8a;
  box-shadow: 0 2px 0 #1a9e55;
  opacity: 1;
  animation: none;
  position: static;
  translate: none;
}

/* ── Портал, пока Chatty грузится: кольцо энергии, бортовой журнал, интрига ───────────────────── */
/* кольцо копит заряд по скачанным байтам модели (--p из home.js): пиксельные сегменты, оранжевый ->
   голубой; чем больше заряд, тем ярче свечение портала */
.home-loading__ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #ff6601 0, #5eb0fe calc(var(--p, 0) * 1%), rgba(94, 176, 254, 0.12) 0);
  -webkit-mask: repeating-conic-gradient(#000 0 9deg, transparent 9deg 12deg), radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  -webkit-mask-composite: source-in;
  mask: repeating-conic-gradient(#000 0 9deg, transparent 9deg 12deg) intersect, radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  filter: drop-shadow(0 0 calc(4px + var(--p, 0) * 0.14px) rgba(94, 176, 254, 0.8));
  transition: filter 0.3s steps(3, end);
}
/* бортовой журнал: строки печатаются, старые бледнеют; не шире экрана, переносятся, не режутся */
.home-loading__log {
  position: absolute;
  left: 50%;
  top: calc(100% + 42px);
  transform: translateX(-50%);
  width: min(300px, calc(100vw - 32px));
  display: grid;
  gap: 3px;
  font: 12px/1.45 var(--font-body, ui-monospace, monospace);
  color: #9fd8e8;
  text-align: left;
}
.home-loading__log span::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 3px;
  vertical-align: -1px;
  background: currentColor;
  animation: home-log-caret 0.8s steps(2, end) infinite;
}
.home-loading__log span.is-old { color: rgba(159, 216, 232, 0.5); }
.home-loading__log span.is-old::after { display: none; }
@keyframes home-log-caret { 50% { opacity: 0; } }
.home-loading__tease,
.home-loading__slow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(300px, calc(100vw - 32px));
  margin: 0;
  text-align: center;
  font: 700 12px/1.5 var(--font-display, monospace);
  letter-spacing: 0.04em;
  color: #ffd38a;
}
.home-loading__tease { top: calc(100% + 120px); animation: home-tease 2.4s steps(6, end) infinite; }
.home-loading__tease:empty, .home-loading__slow:empty { display: none; }
.home-loading__slow { top: calc(100% + 162px); font: 12px/1.45 var(--font-body, ui-monospace, monospace); color: #8eb8ff; }
@keyframes home-tease { 50% { opacity: 0.55; } }
:root[data-theme="light"] .home-loading__log { color: #0b4a8f; }
:root[data-theme="light"] .home-loading__log span.is-old { color: rgba(11, 74, 143, 0.5); }
:root[data-theme="light"] .home-loading__tease { color: #b24a00; }
:root[data-theme="light"] .home-loading__slow { color: #0d5bd9; }
.home-robot--emerge .home-loading__log,
.home-robot--emerge .home-loading__tease,
.home-robot--emerge .home-loading__slow { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .home-loading__tease, .home-loading__log span::after { animation: none; }
}
/* портал можно потыкать: вспышка; пока Chatty грузится, портал ловит касания */
.home-robot--loading .home-loading { pointer-events: auto; cursor: pointer; }
.home-loading.is-tickled i:nth-of-type(3) { animation: home-tickle 0.45s steps(5, end); }
.home-loading.is-tickled .home-loading__ring { animation: home-tickle-ring 0.45s steps(5, end); }
@keyframes home-tickle {
  0% { transform: rotate(45deg) scale(1); }
  40% { transform: rotate(45deg) scale(1.25); box-shadow: inset 0 0 0 3px #0b1530, 0 0 18px #5eb0fe; }
  100% { transform: rotate(45deg) scale(1); }
}
@keyframes home-tickle-ring { 40% { filter: drop-shadow(0 0 16px #5eb0fe) brightness(1.6); } }

/* На телефоне шапки нет - логотип и меню плавают в углах (styles.css). В полноэкранном режиме они
   встают внутрь черных полос: в портрете - под верхнюю, лежа - между боковыми. */
@media (max-width: 880px) and (orientation: portrait) {
  html.home-fullbars .chrome { top: max(36px, env(safe-area-inset-top, 0px)); }
  html.home-fullbars .chrome__band { padding-top: 10px; }
}
@media (max-width: 880px) and (orientation: landscape) {
  html.home-fullbars .chrome { left: max(36px, env(safe-area-inset-left, 0px)); right: max(36px, env(safe-area-inset-right, 0px)); }
}