/* UI в стиле сайта платочингисхана.рф (снято с самого сайта 13.09.2026):
   светлый тёплый фон, коричневый #544840 как основной цвет, оранжевый
   #ff7300 как акцент, белые «пилюли» и карточки со скруглением 16 px,
   заголовки Buyan Bold капсом, текст Inter Tight.
   Тёмный HUD с золотом убран: гид должен читаться как продолжение сайта,
   с которого человек пришёл по QR. */

:root {
  --brown: #544840;          /* основной: текст, кнопки */
  --brown-2: #6b5d53;        /* второстепенный текст */
  --brown-soft: rgba(84,72,64,.12);
  --orange: #ff7300;         /* акцент: активное, внимание */
  --sand: #fbfbf9;           /* фон страницы сайта */
  --sand-2: #f1ede6;         /* фон под карточками */
  --white: #ffffff;
  --gray: #b9b9b9;
  --line: rgba(84,72,64,.14);
  --shadow: 0 8px 24px rgba(60,44,30,.10), 0 1px 3px rgba(60,44,30,.08);
  --r: 14px;                 /* ЕДИНЫЙ радиус скругления для всего интерфейса */

  /* кривые сильнее встроенных: встроенные ease слишком вялые */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --display: "Buyan", "Inter Tight", Arial, sans-serif;
  --font: "Inter Tight", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Arial, sans-serif;

  /* совместимость со старыми правилами в js/html */
  --gold: var(--orange);
  --ink: var(--brown);
  --paper: var(--brown);
}

/* 8th Wall (xrextras) подмешивает `* { box-sizing: inherit }` ПОСЛЕ нашего
   стиля — поэтому border-box ставится на корень: inherit тогда наследует его.
   Без этого отступы считаются поверх ширины, и экран уезжает вправо/вниз. */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--sand); color: var(--brown);
  font-family: var(--font); font-weight: 400;
}

/* видеофон камеры — только в режиме gyro */
#camfeed {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; display: none; background: #000;
}
body.camera-mode #camfeed { display: block; }

a-scene { position: fixed; inset: 0; z-index: 1; opacity: 0; transition: opacity 300ms var(--ease-out); }
/* встроенная кнопка A-Frame «VR / полный экран» — посетителю не нужна */
.a-enter-vr, .a-enter-ar, .a-enter-vr-button, .a-enter-ar-button { display: none !important; }
body.in-scene a-scene { opacity: 1; }

/* ---------- общие элементы: пилюли и кнопки ---------- */
.pill {
  background: var(--white); color: var(--brown);
  border-radius: var(--r); box-shadow: var(--shadow);
}

.btn {
  display: block; width: 100%; padding: 15px 16px; margin-bottom: 10px; cursor: pointer;
  overflow-wrap: anywhere;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--white); color: var(--brown);
  font: 600 16px var(--font); box-shadow: var(--shadow);
  text-decoration: none; text-align: center;
}
.btn.primary { background: var(--brown); border-color: var(--brown); color: var(--white); }
.btn.hidden { display: none; }   /* запасной режим / демо прячутся классом hidden */

.btn:disabled { opacity: .5; cursor: default; }
.btn.small { padding: 11px 16px; font-size: 14px; margin-bottom: 0; }

/* ---------- splash ---------- */
/* Экран входа — ПРОКРУЧИВАЕМЫЙ, а не центрированный флексом: флекс-центровка
   при переполнении режет верх и сталкивает кнопки за край экрана (маленькие
   телефоны, крупный системный шрифт, альбомная ориентация). Здесь контейнер
   прокручивается, а внутренняя обёртка растёт до высоты экрана и центрирует
   содержимое только когда места хватает. */
#splash {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(90% 55% at 50% 0%, #efe8dc 0%, var(--sand) 70%);
}
#splash.hidden { display: none; }

/* экран выбора языка — тот же холст, что вход; три крупные кнопки */
#langScreen {
  position: fixed; inset: 0; z-index: 21;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(90% 55% at 50% 0%, #efe8dc 0%, var(--sand) 70%);
}
#langScreen.hidden { display: none; }
.langpick { display: flex; flex-direction: column; gap: 12px; }
.lang-pick { padding: 20px 16px; font-size: 19px; margin: 0; }
.lang-pick[data-lang="cn"] { font-family: var(--font); }
/* margin:auto у ребёнка флекс-колонки: центр, когда места хватает, и честная
   прокрутка с верха, когда не хватает — без обрезания и без min-height,
   который на телефонах считается непредсказуемо */
.splash-wrap {
  margin: 0; flex: 1 0 auto; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(18px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right))
           calc(20px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
}

/* шапка — ПИКСЕЛЬ В ПИКСЕЛЬ как на платочингисхана.рф в мобильной версии
   (замерено 13.09): 18 px от краёв экрана и сверху, высота 59, радиус 12,
   без тени, логотип 80×35 с отступом 11 px — у нас текстом, он легче
   (решение заказчика работы). Так переход с сайта в гид читается как одна
   экосистема. */
.brand {
  width: 100%; max-width: 520px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 59px; padding: 0 11px; margin-bottom: 22px;
  background: var(--white); border-radius: 12px; box-shadow: none;
}
.wordmark {
  font: 700 16px/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em;
  color: var(--brown);
}
.brand-tag {
  font: 500 11px var(--font); color: var(--brown-2);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r);
}

/* шапка прибита к верху, как на сайте; центрируется только содержимое под ней */
.splash-inner { max-width: 460px; width: 100%; text-align: center; margin: auto 0; flex: 0 0 auto; }

#splash h1 {
  font: 700 clamp(30px, 8.5vw, 44px)/0.98 var(--display);
  text-transform: uppercase; margin: 0 0 12px; color: var(--brown);
}
#splash .sub { margin: 0 0 24px; color: var(--brown-2); font-size: 15px; line-height: 1.45; }

.langs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }
.langs.small { margin: 0; gap: 6px; }

.lang-btn {
  min-width: 56px; padding: 9px 14px; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--line); background: var(--white);
  color: var(--brown); font: 600 14px var(--font); box-shadow: var(--shadow);
}
.lang-btn.active { background: var(--brown); border-color: var(--brown); color: var(--white); }

/* выбор варианта подачи — белые карточки, активная помечена оранжевым */
.variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.variant-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  padding: 14px 6px 12px; border-radius: var(--r); text-align: center;
  border: 1.5px solid transparent; background: var(--white); color: var(--brown);
  font: 500 13px var(--font); box-shadow: var(--shadow); position: relative;
}
.variant-btn b { font: 700 26px/1 var(--display); color: var(--gray); }
.variant-btn span { font-weight: 600; }
.variant-btn small { font-size: 10.5px; line-height: 1.25; color: var(--brown-2); }
.variant-btn.active { border-color: var(--orange); }
.variant-btn.active b { color: var(--orange); }
.variant-btn:disabled { opacity: .45; cursor: default; box-shadow: none; background: var(--sand-2); }

.hint { margin: 12px 0 0; font-size: 12px; color: var(--brown-2); line-height: 1.5; opacity: .85; }
.hint.dev { display: none; }
body.debug .hint.dev { display: block; }

/* ---------- overlay (HUD поверх камеры/сцены) ---------- */
#overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
}
#overlay.hidden { display: none; }
#overlay button { pointer-events: auto; }

.badge { font-size: 10px; color: var(--orange); margin-top: 2px; font-weight: 600; line-height: 1.2;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghost {
  padding: 9px 12px; border-radius: var(--r); cursor: pointer;
  border: 1px solid transparent; background: rgba(255,255,255,.92);
  color: var(--brown); font: 600 12px var(--font); backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.ghost.on { background: var(--brown); color: var(--white); }
.ghost.tiny { padding: 5px 10px; font-size: 11px; }

.toast {
  align-self: center; max-width: 88%; margin: 0 auto;
  background: rgba(255,255,255,.95); color: var(--brown);
  border-left: 3px solid var(--orange);
  border-radius: var(--r); padding: 10px 16px; font-size: 13px; line-height: 1.4;
  text-align: center; opacity: 0; transition: opacity .25s; pointer-events: none;
  box-shadow: var(--shadow);
}
.toast.show { opacity: 1; }

.bottombar { display: flex; flex-direction: column; gap: 8px; }

/* ---------- HUD: одна прозрачная шестерёнка под большим пальцем ----------
   Язык выбран на входе, «Заново» внутри настроек — на экране только сцена.
   Тень под штрихами, чтобы иконка читалась и на светлом небе. */
.bottombar { align-items: flex-end; }
.hud-gear {
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: var(--r);
  background: transparent; color: var(--white); cursor: pointer;
  display: grid; place-items: center; pointer-events: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
  transition: transform 220ms var(--ease-out), opacity 160ms ease;
}
.hud-gear:active { transform: scale(0.92); }
body.sheet-open .hud-gear { opacity: 0; pointer-events: none; }   /* открыто — шестерёнка не нужна */

/* нажатие — ответ интерфейса, что он услышал */
.btn, .ghost, .lang-btn, .variant-btn, .seg button { transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease; }
.btn:active, .ghost:active, .lang-btn:active, .variant-btn:active, .seg button:active { transform: scale(0.97); }


@media (prefers-reduced-motion: reduce) {
  .sheet, .backdrop { transition-duration: 1ms; transition-delay: 0ms; }
}

.diag { width: 100%; max-width: 520px; }

.diag {
  font: 400 10px/1.2 ui-monospace, Consolas, monospace;
  color: rgba(255,255,255,.7); text-shadow: 0 1px 2px rgba(0,0,0,.5); text-align: right;
  padding: 6px 4px 0 0;
}
.diag.hidden { display: none; }

/* ---------- слой перетаскивания (свайп = поворот объекта) ---------- */
#dragLayer {
  position: absolute; inset: 0; z-index: 0; pointer-events: auto;
  touch-action: none;
}

#overlay > .top-stack { position: relative; z-index: 2; }
/* контейнер окна настроек ВЫШЕ подложки (11): иначе окно, лежащее внутри
   контейнера с меньшим z-index, целиком уходит под подложку, и ни одна
   кнопка не получает тап — контекст наложения перекрывает свой z-index */
#overlay > .bottombar { position: relative; z-index: 12; }

.top-stack { display: flex; flex-direction: column; gap: 8px; }

/* ---------- настройки: модальное окно по центру ----------
   Модалка, в отличие от всплывашки, не привязана к триггеру — растёт из
   центра: scale(.96) + opacity, 220 мс ease-out; закрывается быстрее. */
/* подложка ПРОЗРАЧНАЯ: под нами живая камера, затемнять и размывать её
   нельзя — читается как сбой. Подложка нужна только чтобы тап мимо окна
   его закрывал. Окно читается за счёт собственной тени. */
.backdrop {
  position: fixed; inset: 0; z-index: 11; pointer-events: auto;
  background: transparent;
}
.backdrop.hidden { display: none; }

.sheet {
  position: fixed; left: 50%; top: 50%; z-index: 12;
  width: min(92vw, 420px); max-height: min(86vh, 640px); overflow-y: auto;
  transform: translate(-50%, -50%);
  background: var(--white); border-radius: var(--r); box-shadow: 0 18px 50px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.12);
  padding: 14px 16px 16px; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: auto;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.sheet.hidden { display: none; }
.sheet.entering { opacity: 0; transform: translate(-50%, -50%) scale(0.96); transition: none; }
.sheet.leaving  { opacity: 0; transform: translate(-50%, -50%) scale(0.98); transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out); }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 700 14px var(--display); text-transform: uppercase; color: var(--brown);
}
.sheet-head .ghost { box-shadow: none; border-color: var(--line); }

.sheet .row { display: flex; align-items: center; gap: 10px; }
.sheet .row label { flex: 0 0 auto; font-size: 12px; color: var(--brown-2); min-width: 96px; }
.sheet .row b { flex: 0 0 auto; font: 600 12px ui-monospace, Consolas, monospace; min-width: 56px; text-align: right; color: var(--brown); }

.sheet input[type=range] {
  flex: 1 1 auto; min-width: 0; height: 26px; accent-color: var(--orange); background: transparent;
}

.seg { display: flex; gap: 6px; flex: 1 1 auto; }
.seg button {
  flex: 1 1 0; padding: 8px 4px; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--line); background: var(--white);
  color: var(--brown); font: 600 12px var(--font);
}
.seg button.on { background: var(--brown); border-color: var(--brown); color: var(--white); }
.langs-seg .lang-btn { flex: 1 1 0; min-width: 0; padding: 8px 4px; box-shadow: none; }

.toggles { flex-wrap: wrap; }
.toggles .ghost { box-shadow: none; border-color: var(--line); }
.toggles .ghost.on { background: var(--brown); border-color: var(--brown); color: var(--white); }

.sheet .hint { margin-top: 0; }

/* ---------- атрибуция 8th Wall (требование XR Engine License, п.1.3) ---------- */
.credit {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 4px 10px calc(4px + env(safe-area-inset-bottom));
  font: 400 9px/1.3 var(--font); text-align: center;
  color: var(--brown-2); background: rgba(255,255,255,.75);
  pointer-events: auto;
}
.credit.hidden { display: none; }
.credit a { color: var(--orange); }

/* ---------- подсказка поиска маркера ---------- */
.marker-hint {
  align-self: center; max-width: 90%;
  background: var(--orange); color: var(--white);
  border-radius: var(--r); padding: 10px 16px;
  font: 600 13px/1.35 var(--font); text-align: center; box-shadow: var(--shadow);
}
.marker-hint.hidden { display: none; }

/* ---------- вывод чисел калибровки ---------- */
.readout {
  margin: 0; padding: 8px 10px; border-radius: var(--r);
  background: var(--sand-2); border: 1px solid var(--line);
  font: 400 10px/1.4 ui-monospace, Consolas, monospace;
  color: var(--brown); white-space: pre-wrap; word-break: break-all;
  user-select: all;
}

/* узкие экраны: карточки вариантов и кнопки ужимаются, а не ломаются */
@media (max-width: 380px) {
  .brand { margin-bottom: 18px; }
  #splash .sub { font-size: 14px; margin-bottom: 18px; }
  .langs { margin-bottom: 16px; }
  .variants { gap: 6px; margin-bottom: 14px; }
  .variant-btn { padding: 12px 4px 10px; font-size: 12px; }
  .variant-btn b { font-size: 22px; }
  .variant-btn small { font-size: 10px; }
  .btn { padding: 13px 12px; font-size: 15px; }
}
@media (max-width: 330px) {
  .variants { grid-template-columns: 1fr 1fr; }
  .variant-btn:disabled { display: none; }
}
/* альбомная ориентация телефона: высоты мало, всё в одну плотную колонку */
@media (max-height: 460px) {
  .brand { margin-bottom: 12px; }
  #splash h1 { font-size: 26px; margin-bottom: 6px; }
  #splash .sub { margin-bottom: 12px; font-size: 13px; }
  .langs { margin-bottom: 12px; }
  .variants { margin-bottom: 10px; }
  .variant-btn { padding: 8px 4px; }
  .variant-btn small { display: none; }
  .btn { padding: 11px 12px; margin-bottom: 8px; font-size: 14px; }
  .hint { margin-top: 8px; }
}



/* ================= движение: принципы одни на весь путь =================
   Только transform / opacity / clip-path. Вход — ease-out, не дольше 300 мс,
   каскадом; выход быстрее входа. Ничего не появляется из ниоткуда:
   стартовое состояние — scale(.96) и лёгкий сдвиг, а не scale(0). */

/* --- экраны: язык, вход, HUD --- */
#langScreen, #splash, #overlay {
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}
#langScreen.leaving, #splash.leaving {
  opacity: 0; transform: scale(0.985); pointer-events: none;
}
#overlay.leaving { opacity: 0; }

/* содержимое экрана проявляется каскадом сверху вниз */
.splash-wrap > .brand,
.splash-inner > *,
.langpick > .lang-pick {
  transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out);
}
.entering .splash-wrap > .brand,
.entering .splash-inner > *,
.entering .langpick > .lang-pick {
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: none;
}
.splash-inner > :nth-child(1) { transition-delay: 40ms; }
.splash-inner > :nth-child(2) { transition-delay: 80ms; }
.splash-inner > :nth-child(3) { transition-delay: 120ms; }
.splash-inner > :nth-child(4) { transition-delay: 160ms; }
.splash-inner > :nth-child(5) { transition-delay: 200ms; }
.splash-inner > :nth-child(6) { transition-delay: 240ms; }
.langpick > .lang-pick:nth-child(1) { transition-delay: 60ms; }
.langpick > .lang-pick:nth-child(2) { transition-delay: 110ms; }
.langpick > .lang-pick:nth-child(3) { transition-delay: 160ms; }
/* карточки вариантов — свой мелкий каскад внутри своего шага */
.variant-btn { transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out), border-color 160ms ease, background-color 160ms ease; }
.entering .variant-btn { opacity: 0; transform: translateY(8px) scale(0.985); transition: none; }
.variant-btn:nth-child(2) { transition-delay: 140ms; }
.variant-btn:nth-child(3) { transition-delay: 160ms; }
.variant-btn b { transition: color 200ms ease; }
.variant-btn:active { transform: scale(0.97); transition-delay: 0ms; transition-duration: 160ms; }

/* HUD: плашка приподнимается снизу, когда сцена уже видна */
.bottombar { transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out); transition-delay: 120ms; }
.entering .bottombar { opacity: 0; transform: translateY(12px); transition: none; }

/* --- уведомления: снизу-сверху, но не из ниоткуда --- */
.toast {
  transform: translateY(-6px) scale(0.98);
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
}
.toast.show { transform: none; transition: opacity 220ms var(--ease-out), transform 280ms var(--ease-out); }
.marker-hint { transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out); }


@media (prefers-reduced-motion: reduce) {
  #langScreen, #splash, #overlay, .splash-wrap > .brand, .splash-inner > *,
  .langpick > .lang-pick, .variant-btn, .bottombar, .toast {
    transition-duration: 1ms !important; transition-delay: 0ms !important;
    transform: none !important;
  }
}

/* ---------- заглушка для ПК (js/gate.js) ---------- */
#desktopGate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; overflow-y: auto;
  background: radial-gradient(90% 55% at 50% 0%, #efe8dc 0%, var(--sand) 70%);
  color: var(--brown);
}
html.gated #langScreen, html.gated #splash, html.gated #overlay, html.gated a-scene { display: none !important; }
.gate-inner { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.gate-block { background: var(--white); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); }
.gate-block h2 { margin: 0 0 6px; font: 700 20px/1.15 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.gate-cn h2 { font-family: var(--font); text-transform: none; }
.gate-block p { margin: 0; font: 400 15px/1.45 var(--font); color: var(--brown-2); }