/* orientation-gate.css — экран «поверните телефон» для игровой части сайта.
 * Пара к js/orientation-gate.js. Разметку строит скрипт, здесь только вид.
 *
 * ⚠️ ВСЁ ПОД ПРЕФИКСОМ .og — И ЭТО НЕ ВКУСОВЩИНА. Файл грузят игровые
 * страницы, у которых свои плотные таблицы (.gs-* зал, .rs-* миниигра,
 * .mind-* диалог). Ни одного голого селектора по тегу, ни одного общего
 * класса: гейт не имеет права красить чужую сцену.
 *
 * ⚠️ ЗАПАСНЫЕ ЗНАЧЕНИЯ У ПЕРЕМЕННЫХ — НЕ УКРАШЕНИЕ (приём css/site-footer.css).
 * Файл может приехать на страницу без tokens.css: без запасного значения
 * var(--s-4) отступы схлопнулись бы в ноль, а текст лёг бы на кромку.
 * Словарь объявлен ОДНИМ блоком, дальше — локальные имена без запасных.
 *
 * ⚠️ НИ ОДНО ПРАВИЛО ЗДЕСЬ НЕ ПРЯЧЕТ СОДЕРЖИМОЕ СТРАНИЦЫ. Гейт — надстройка:
 * узел создаёт JS, и если JS не отработал, на странице не меняется ничего.
 */

.og {
  /* цвет */
  --og-void:   var(--bg-void, #05050a);
  --og-panel:  var(--bg-panel, #120f18);
  --og-line:   var(--line, rgba(255, 255, 255, 0.12));
  --og-line-2: var(--line-strong, rgba(255, 255, 255, 0.22));
  --og-ink:    var(--ink, #ffffff);
  --og-ink-2:  var(--ink-2, rgba(255, 255, 255, 0.72));
  --og-ink-3:  var(--ink-3, rgba(255, 255, 255, 0.48));
  --og-brass:  var(--brass, #9b6a46);
  --og-accent: var(--accent, #bd8843);
  --og-accent-ink: var(--accent-ink, #241703);
  --og-accent-text: var(--accent-text, #e7bb7c);
  --og-focus:  var(--accent-focus, #febb6d);
  /* метрика */
  --og-1: var(--s-1, 4px);
  --og-2: var(--s-2, 8px);
  --og-3: var(--s-3, 12px);
  --og-4: var(--s-4, 16px);
  --og-5: var(--s-5, 20px);
  --og-6: var(--s-6, 24px);
  --og-8: var(--s-8, 32px);
  --og-r: var(--r-1, 2px);
  /* шрифт */
  --og-display: var(--font-display, Georgia, "Times New Roman", serif);
  --og-label:   var(--font-label, Georgia, serif);
  --og-body:    var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  --og-t--2: var(--t--2, 11px);
  --og-t--1: var(--t--1, 12px);
  --og-t-0:  var(--t-0, 14px);
  --og-t-2:  var(--t-2, 20px);
  --og-ls:   var(--ls-label, 0.12em);
  --og-lh:   var(--lh-body, 1.6);
  --og-lh-snug: var(--lh-snug, 1.3);
  --og-w-semi:  var(--w-semi, 600);
  /* ⚠️ Слоя выше --z-toast (200) в tokens.css нет, а гейт обязан лежать над
     ВСЕМ: максимум в css/ сейчас 7000 (панель зала и диалог архивариуса).
     Поэтому число объявлено локально. Правильный дом для него — токен
     --z-gate в tokens.css; заводить его сейчас нельзя, файл занят другой
     работой. */
  --og-z: 9000;
}

/* ── полотно ──────────────────────────────────────────────────────────────
   Слой — --og-z (см. словарь выше): гейт обязан лежать поверх сцены, иначе
   просьба окажется под тем, что она собирается прикрыть. */
.og {
  position: fixed;
  inset: 0;
  z-index: var(--og-z);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding:
    calc(var(--og-6) + env(safe-area-inset-top, 0px))
    calc(var(--og-5) + env(safe-area-inset-right, 0px))
    calc(var(--og-6) + env(safe-area-inset-bottom, 0px))
    calc(var(--og-5) + env(safe-area-inset-left, 0px));
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(155, 106, 70, 0.10), transparent 62%),
    var(--og-void);
  color: var(--og-ink-2);
  font-family: var(--og-body);
  line-height: var(--og-lh);
  -webkit-tap-highlight-color: transparent;
}

/* Прокрутку страницы под гейтом гасим: свайп по просьбе не должен уезжать
   в сцену. Класс ставит и снимает JS; без JS его нет вовсе. */
.og-lock,
.og-lock body {
  overflow: hidden;
}

.og__sheet {
  width: 100%;
  max-width: 340px;
  margin: auto;
  text-align: center;
}

/* ── где я ────────────────────────────────────────────────────────────── */
.og__where {
  margin: 0 0 var(--og-5);
  font-family: var(--og-label);
  font-size: var(--og-t--2);
  letter-spacing: var(--og-ls);
  text-transform: uppercase;
  color: var(--og-accent-text);
}

/* ── картинка-подсказка ───────────────────────────────────────────────── */
.og__art {
  display: block;
  width: clamp(120px, 42vw, 168px);
  height: auto;
  margin: 0 auto var(--og-4);
}

.og__body  { fill: var(--og-panel); stroke: var(--og-line-2); stroke-width: 2; }
.og__glass { fill: rgba(155, 106, 70, 0.16); }
.og__cam   { fill: var(--og-ink-3); }
.og__grip  { fill: var(--og-ink-3); }
.og__arc   { stroke: var(--og-brass); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 7; }
.og__tip   { fill: var(--og-brass); }

/* ⚠️ transform-box: view-box + origin в пикселях вьюбокса — приём из
   индикатора пароля: без него origin считается от bbox группы и телефон
   уезжает из кадра. Крутится ЦЕЛАЯ группа, отдельные пути не трогаем. */
.og__phone {
  transform-box: view-box;
  transform-origin: 80px 76px;
  animation: og-turn 3.6s cubic-bezier(0.62, 0, 0.28, 1) infinite;
}

.og__arc,
.og__tip {
  animation: og-hint 3.6s ease-in-out infinite;
}

@keyframes og-turn {
  0%, 16%   { transform: rotate(0deg); }
  40%, 78%  { transform: rotate(90deg); }
  96%, 100% { transform: rotate(0deg); }
}

@keyframes og-hint {
  0%, 10%  { opacity: 0.25; }
  30%, 70% { opacity: 1; }
  92%, 100% { opacity: 0.25; }
}

/* ── тексты ───────────────────────────────────────────────────────────── */
.og__call {
  margin: 0 0 var(--og-2);
  font-family: var(--og-display);
  font-size: var(--og-t-2);
  font-weight: var(--og-w-semi);
  line-height: var(--og-lh-snug);
  color: var(--og-ink);
}

.og__why {
  margin: 0;
  font-size: var(--og-t-0);
  color: var(--og-ink-2);
}

/* ── действие ─────────────────────────────────────────────────────────── */
.og__act:empty { display: none; }
.og__act { margin-top: var(--og-5); }

.og__btn {
  display: inline-block;
  min-height: 44px;
  padding: var(--og-3) var(--og-5);
  border: 1px solid var(--og-accent);
  border-radius: var(--og-r);
  background: var(--og-accent);
  color: var(--og-accent-ink);
  font-family: var(--og-label);
  font-size: var(--og-t--1);
  letter-spacing: var(--og-ls);
  text-transform: uppercase;
  cursor: pointer;
}

.og__btn:hover { background: var(--accent-hover, #d5a057); }
.og__btn:active { transform: translateY(1px); }

/* ── подсказка про замок ориентации ───────────────────────────────────────
   Живой регион всегда в разметке; пока пуст — не занимает места. Так
   скринридер произносит появление подсказки сменой текста, а не показом
   узла (спрятанный [hidden]-регион объявляется не во всех связках). */
.og__note:empty { display: none; }
.og__note {
  margin: var(--og-5) 0 0;
  padding: var(--og-3) var(--og-4);
  border: 1px solid var(--og-line);
  border-left: 2px solid var(--og-brass);
  border-radius: var(--og-r);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--og-t--1);
  text-align: left;
  color: var(--og-ink-2);
}

/* ── выходы: экран-просьба не тупик ───────────────────────────────────── */
.og__exits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--og-2) var(--og-4);
  justify-content: center;
  margin-top: var(--og-8);
  padding-top: var(--og-5);
  border-top: 1px solid var(--og-line);
}

.og__exit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--og-2);
  /* ⚠️ Выход — не служебная подпись, а единственный способ уйти с экрана
     тому, кто повернуть не может. Поэтому --ink-2, а не --ink-3: приглушать
     здесь нечего. */
  color: var(--og-ink-2);
  font-size: var(--og-t--1);
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.og__exit:hover,
.og__exit:focus-visible {
  color: var(--og-accent-text);
  border-bottom-color: var(--og-brass);
}

.og :focus-visible,
.og:focus-visible {
  outline: 2px solid var(--og-focus);
  outline-offset: 2px;
}

/* Полотно фокусируется программно — кольцо вокруг всего экрана было бы
   рамкой по краю вьюпорта и ничего не сообщало. */
.og:focus { outline: none; }

/* ── очень низкий кадр (портрет 320×480, клавиатура в кадре) ───────────── */
@media (max-height: 560px) {
  .og__art { width: clamp(96px, 30vw, 120px); }
  .og__exits { margin-top: var(--og-5); padding-top: var(--og-4); }
}

/* ── движение ─────────────────────────────────────────────────────────────
   Статика самодостаточна: телефон уже лежит горизонтально — это и есть
   то, о чём просят, — а дуга со стрелкой показывает направление. */
@media (prefers-reduced-motion: reduce) {
  .og__phone {
    animation: none;
    transform: rotate(90deg);
  }

  .og__arc,
  .og__tip {
    animation: none;
    opacity: 1;
  }

  .og__btn:active { transform: none; }
}