/*
 * Хром страницы вокруг полёта. Сам движок в mir.js вносит свой CSS в
 * слое @layer sw, поэтому всё написанное здесь (вне слоёв) побеждает
 * его умолчания без единого !important — на этом стоит вся тёмная тема.
 *
 * Палитра — рецептная: охра #8a683c, жжёная умбра #593822, сиена
 * #774d2c, блёклый лён #9f8b65, сливки #dfcfae, почти-чёрный #0b0906.
 */

:root,
.sw-root {
  --sw-bg: #0b0906;
  --sw-ink: #dfcfae;
  --sw-ink-soft: #9f8b65;
  --sw-accent: #8a683c;
  /* Заглавная гарнитура ST-Nizhegorodsky: узкая, только заглавные, славянского
     лада — ею же набран синематик. Old Standard TT остаётся ВТОРЫМ, и это не
     украшение: у гарнитуры нет турецкой «İ», и она одна подхватится запасной. */
  --sw-font-display: 'ST Nizhegorodsky', 'Old Standard TT', 'Times New Roman', serif;
  --sw-font-body: 'Old Standard TT', Georgia, serif;
}

/* --- Тёмная редакция движковых умолчаний ------------------------- */

/* Белое свечение неба на чёрном фоне глядится туманом — гасим до тона свечи. */
.sw-sky__glow {
  background:
    radial-gradient(60% 42% at 74% 16%, color-mix(in srgb, var(--sw-accent) 18%, transparent), transparent 70%),
    radial-gradient(46% 34% at 50% 50%, color-mix(in srgb, #dfcfae 8%, transparent), transparent 70%);
}

/* Стеклянные плашки навигации и ярлыков в исходнике замешаны на белом. */
.sw-nav {
  background: color-mix(in srgb, #0b0906 55%, transparent);
  border-color: color-mix(in srgb, var(--sw-accent) 30%, transparent);
}
.sw-nav__item.is-active { color: #0b0906; }
.sw-route__label {
  background: color-mix(in srgb, #0b0906 82%, transparent);
  border-color: color-mix(in srgb, var(--sw-accent) 30%, transparent);
}
.sw-copy__tags li {
  color: color-mix(in srgb, var(--sw-accent) 55%, #dfcfae);
  background: color-mix(in srgb, var(--sw-accent) 18%, #0b0906);
  border-color: color-mix(in srgb, var(--sw-accent) 40%, transparent);
}

/* Зов — красной нитью: она и есть подпись игры. */
.sw-topcta,
.sw-btn--primary {
  color: #f2e6c9;
  background: #a63a2a;
}

/* Заголовки — тоже красной нитью: воля владельца, один красный на всё.
   Тон чуть светлее кнопочного, иначе на тёмных сценах он тонет. */
.sw-copy__title,
.veduny h2,
.peshij h2 {
  color: #c1523f;
}
.sw-btn--ghost { color: var(--sw-ink); }

/* Знак игры в шапке — та же снятая свеча, что горит в заставке
   (landing/media/logo.png; станок — scripts/znak_svechi.py).
   Ни скругления, ни тени: у знака свой силуэт, и подложка под ним
   читалась бы как чужая плашка. */
img.sw-brand__mark {
  /* Знак вертикальный: ширину отдаём силуэту, ростом равняем по строке.
     `[БЕДА]` Движковый значок — это ЗАЛИТЫЙ градиентом прямоугольник со
     скруглением и тенью. Я подменил его картинкой, но заливку не сбросил,
     и она осталась гореть под прозрачным SVG рыжей плашкой. Сбрасываем
     всё: у свечи своя форма, подложка ей не нужна. */
  width: auto;
  height: 36px;
  /* Оптическое выравнивание, а не геометрическое: у знака вес внизу, в
     теле, а лёгкое пламя сверху центр не держит, и по геометрии свеча
     читается съехавшей вниз.

     Поправка мала: у снятой свечи тело плотное и длинное, оптический
     центр почти совпал с геометрическим. Прежние одиннадцать сотых были
     выверены под рисованный SVG с крупным пламенем, и на фотографии
     задирали знак заметно выше строки (проверено пробой на крупном).

     Сдвиг долями высоты, а не точками: знак так держит выравнивание при
     любом росте строки. */
  transform: translateY(-2.5%);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Имя игры — красной нитью, как заголовки сцен. Тень нужна: шапка
   висит над живым кадром, и на светлом (заречье в закат) красный по
   светлому проседает до порога читаемости. */
.sw-brand__name {
  color: #c1523f;
  text-shadow: 0 1px 10px color-mix(in srgb, #0b0906 85%, transparent);
}

/* Шапка — сетка, а не «раскидать по краям».
   При space-between середина отдаётся не центру ОКНА, а остатку между
   боковыми блоками: левый весил 223 точки, правый 335, и навигация
   съезжала влево на полсотни. Сетка «1fr auto 1fr» ставит её ровно по
   оси экрана независимо от того, что растёт по бокам. */
.sw-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.sw-brand { justify-self: start; }
.sw-nav { justify-self: center; }
.shapka-pravo { justify-self: end; }

/* Единая высота всего, что в шапке нажимается: было четыре разных
   (36, 38, 42), и строка выглядела рваной. */
.sw-nav,
.perekl,
.muzyka,
.sw-topcta {
  box-sizing: border-box;
  height: 38px;
}
.sw-nav { padding: 4px; }
.sw-nav__item {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 14px;
}
.muzyka { width: auto; }
.sw-topcta {
  display: grid;
  place-items: center;
  padding: 0 22px;
}

/* Правый узел шапки: язык, музыка и зов одной линией и одной высоты. */
.shapka-pravo {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Выбор языка — список. Сегмент из двух кнопок с дюжиной языков стал
   бы лентой во всю шапку, поэтому осталась одна плашка со знаком
   грамоты и нативным `select` внутри. */
.perekl {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  background: color-mix(in srgb, #0b0906 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--sw-accent) 30%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.perekl .znak--gramota { margin-left: 8px; }
.perekl__vybor {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sw-ink);
  background: transparent;
  border: 0;
  padding: 5px 2px;
  cursor: inherit;
  /* Своя стрелка не нужна: плашка и так читается нажимаемой, а родная
     стрелка в разных браузерах рисуется по-своему и ломает строку. */
  appearance: none;
  -webkit-appearance: none;
}
.perekl__vybor:focus-visible { outline: none; }
/* Раскрытый список рисует система — он наследует не наши цвета, а
   системные, и на тёмной странице выходил бы белым по белому. */
.perekl__vybor option {
  color: #0b0906;
  background: #dfcfae;
}

/* Гравюрные знаки: чёрные клейма игры, перекрашенные маской в тон
   страницы. Файл знака — тушь на прозрачном, цвет даёт background. */
.znak {
  display: block;
  background: var(--sw-ink-soft);
  -webkit-mask: var(--znak) center / contain no-repeat;
  mask: var(--znak) center / contain no-repeat;
  transition: background 0.25s, transform 0.25s;
}
.znak--gusli { --znak: url('/media/znak-gusli.png'); width: 19px; height: 19px; }
.znak--gramota { --znak: url('/media/znak-gramota.png'); width: 15px; height: 15px; }

/* Музыка — кнопка с гуслями: знак дышит, пока песня идёт. */
.muzyka {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  background: color-mix(in srgb, #0b0906 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--sw-accent) 30%, transparent);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color 0.25s, background 0.25s;
}
.muzyka:hover { border-color: var(--sw-accent); }
.muzyka:hover .znak { background: var(--sw-ink); }
.muzyka.igraet { background: color-mix(in srgb, var(--sw-accent) 30%, #0b0906); }
.muzyka.igraet .znak { background: var(--sw-ink); }

/* Столбики звука рядом с гуслями: молча стоят низкими, а пока песня
   идёт — дышат. Знак говорит, ЧТО это, столбики — идёт ли оно сейчас;
   вместе они читаются без подписи. */
.muzyka__stolbiki {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 15px;
}
.muzyka__stolbiki i {
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sw-ink-soft) 70%, transparent);
  transition: background 0.25s, height 0.25s;
}
.muzyka:hover .muzyka__stolbiki i { background: var(--sw-ink-soft); }
.muzyka.igraet .muzyka__stolbiki i {
  background: #c1523f;
  animation: stolbik 0.9s ease-in-out infinite;
}
.muzyka.igraet .muzyka__stolbiki i:nth-child(2) { animation-delay: 0.3s; }
.muzyka.igraet .muzyka__stolbiki i:nth-child(3) { animation-delay: 0.15s; }
@keyframes stolbik {
  0%, 100% { height: 4px; }
  50% { height: 15px; }
}
/* Музыка есть, но браузер ждёт жеста: столбики дышат вполсилы —
   это приглашение нажать, а не рассказ о том, что уже играет. */
.muzyka.zhdet .muzyka__stolbiki i {
  background: var(--sw-ink-soft);
  animation: stolbik-zhdet 2.4s ease-in-out infinite;
}
.muzyka.zhdet .muzyka__stolbiki i:nth-child(2) { animation-delay: 0.4s; }
.muzyka.zhdet .muzyka__stolbiki i:nth-child(3) { animation-delay: 0.2s; }
@keyframes stolbik-zhdet {
  0%, 100% { height: 4px; opacity: 0.45; }
  50% { height: 9px; opacity: 0.8; }
}

/* --- Курсор: обережный знак --------------------------------------- */

/* Курсор — оберег из клейм игры, знак-солнце, что кладут на порог от
   нечисти. Симметричный, оттого читается и в двадцать четыре точки, где
   тонкие знаки (свеча, нить) свернулись бы в кляксу.
   Обводка тёмная: без неё кремовый пропадал бы на светлых кадрах
   полёта, а красный — на чёрных. Запасной курсор назван всегда — если
   картинка не доедет, останется стрелка, а не пустота.

   Три вида, и разница между ними — сигнал, а не украшение:
     обычный      — оберег кремовый
     нажимаемое   — оберег красной нитью
     карточка     — ладанка: личный оберег ведуна, «узнать человека»

   Поменять знак — переписать имя файла: рядом лежат запасные
   `zapas-kursor-{krug,nit,svet,zarubka}[-krasnyj].png`. */
body {
  cursor: url('/media/kursor.png') 16 16, auto;
}
a,
button,
[role='button'],
.sw-route__dot,
.sw-nav__item {
  cursor: url('/media/kursor-zov.png') 16 16, pointer;
}
/* Курсор ставится на ВСЮ клетку ведуна, а не на карту.
   `[БЕДА]` При повороте карты браузер пересчитывает, что лежит под
   указателем: лицевая грань уже отвернулась, оборотная ещё скрыта
   `backface-visibility`, и на этот миг под курсором оказывается пустое
   место — знак моргал на системную стрелку по нескольку раз за поворот.
   Клетка не вращается, поэтому цель под указателем не меняется вовсе;
   грани же вынуты из-под указателя (`pointer-events: none`), а нажатие
   и без них доходит до карты — оно всплывает. */
.vedun {
  cursor: url('/media/kursor-vedun.png') 16 16, pointer;
}
.vedun__litso,
.vedun__litso *,
.vedun__oborot,
.vedun__oborot * {
  pointer-events: none;
}

/* Пальцу курсор не нужен, а картинку он всё равно бы тянул. */
@media (hover: none) and (pointer: coarse) {
  body,
  a,
  button,
  [role='button'],
  .sw-route__dot,
  .sw-nav__item,
  .vedun {
    cursor: auto;
  }
}

/* --- Общий хром -------------------------------------------------- */

.skip {
  position: absolute;
  left: -200vw;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  color: #0b0906;
  background: #dfcfae;
}
.skip:focus { left: 0; }

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

/* Всё, что лежит ПОД полётом, обязано накрывать его закреплённые слои
   (сцена z=10…120, надписи z=20, рейка z=40, шапка z=50). */
.veduny,
.foot,
.peshij {
  position: relative;
  z-index: 130;
  background: var(--sw-bg);
  color: var(--sw-ink);
  font-family: var(--sw-font-body);
}

/* --- Полоса ведунов ---------------------------------------------- */

.veduny {
  padding: clamp(3rem, 6vw, 6rem) clamp(18px, 5vw, 64px) clamp(2rem, 4vw, 4rem);
  border-top: 1px solid color-mix(in srgb, #8a683c 35%, transparent);
}
.veduny h2 {
  margin: 0;
  font-family: var(--sw-font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.veduny__slovo {
  margin: 0.8em 0 1.2em;
  max-width: 48ch;
  color: var(--sw-ink-soft);
}
/* Толк показателей: три знака на обороте карточки стояли голыми числами.
   Список, а не сетка в три колонки: строки разной длины, и колонки рвали
   бы их вразнобой. Знак не сжимается — иначе на узком экране он худеет
   до полоски. */
.veduny__tolk {
  list-style: none;
  margin: 0 0 0.7em;
  padding: 0;
  display: grid;
  gap: 0.45em;
  max-width: 62ch;
  color: var(--sw-ink-soft);
  font-size: 0.94rem;
}
.veduny__tolk li {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.veduny__tolk .znak {
  flex: 0 0 auto;
  align-self: center;
}
.veduny__tolk b {
  color: var(--sw-ink);
  font-weight: 400;
}
.veduny__porog {
  margin: 0 0 2em;
  max-width: 62ch;
  color: color-mix(in srgb, var(--sw-accent) 40%, var(--sw-ink-soft));
}
.veduny__ryad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
}
.vedun {
  margin: 0;
  perspective: 1100px;
}

/* Карточка-перевёртыш: наведение (или касание, или Enter с клавиатуры)
   поворачивает её оборотом — биография, статы, договор с богом. */
.vedun__karta {
  position: relative;
  aspect-ratio: 448 / 796;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.25, 1);
  /* Свой знак, а не системный палец: правило карточки объявлено позже
     общего и перебивало бы его наследование. */
  cursor: url('/media/kursor-vedun.png') 16 16, pointer;
  outline: none;
}
.vedun__karta:focus-visible,
.vedun__karta.otkryta {
  transform: rotateY(180deg);
}
/* Поворот по наведению — только там, где наведение существует.
   `[БЕДА]` На телефоне hover ЗАЛИПАЕТ: после касания браузер держит
   элемент «наведённым», пока не тронут другое место. Правило со всеми
   вместе означало, что второй тап снимает класс `otkryta`, а залипший
   hover продолжает держать карточку перевёрнутой — и она не
   возвращалась вовсе. */
@media (hover: hover) and (pointer: fine) {
  .vedun:hover .vedun__karta { transform: rotateY(180deg); }
}
.vedun__karta:focus-visible {
  box-shadow: 0 0 0 2px var(--sw-accent);
}
.vedun__litso,
.vedun__oborot {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid color-mix(in srgb, #8a683c 40%, transparent);
  background: #060602;
  overflow: hidden;
}
.vedun__litso video,
.vedun__litso img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vedun__oborot {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: clamp(10px, 8%, 18px);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #8a683c 22%, #0b0906), #0b0906 70%);
  font-size: clamp(0.62rem, 0.9vw, 0.8rem);
  line-height: 1.35;
  overflow-y: auto;
}
.vedun__imya {
  font-family: var(--sw-font-display);
  font-size: 1.25em;
  color: var(--sw-ink);
}
.vedun__prozvishche {
  color: var(--sw-ink-soft);
  font-style: italic;
  margin-top: -0.4em;
}
.vedun__staty {
  display: flex;
  gap: 1.1em;
  padding: 0.35em 0;
  border-top: 1px solid color-mix(in srgb, #8a683c 35%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #8a683c 35%, transparent);
}
.vedun__stat {
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.vedun__stat b {
  color: var(--sw-ink);
  font-size: 1.15em;
}
.vedun__znak {
  width: 1.25em;
  height: 1.25em;
  background: var(--sw-ink-soft);
}
.vedun__znak--krov { --znak: url('/media/znak-krov.png'); }
.vedun__znak--volya { --znak: url('/media/znak-volya.png'); }
.vedun__znak--vedanie { --znak: url('/media/znak-vedanie.png'); }
.vedun__bio {
  margin: 0;
  color: color-mix(in srgb, var(--sw-ink) 85%, var(--sw-ink-soft));
}
.vedun__stroka {
  margin: 0;
  color: var(--sw-ink-soft);
}
.vedun__stroka b {
  color: color-mix(in srgb, var(--sw-accent) 60%, #dfcfae);
  font-weight: 700;
}
.vedun video,
.vedun img {
  width: 100%;
  height: auto;
  aspect-ratio: 448 / 796;
  object-fit: cover;
  display: block;
  border: 1px solid color-mix(in srgb, #8a683c 40%, transparent);
  background: #060602;
}
.vedun figcaption {
  padding-top: 0.6em;
}
.vedun figcaption b {
  display: block;
  font-weight: 700;
}
.vedun figcaption i {
  color: var(--sw-ink-soft);
  font-style: italic;
  font-size: 0.9em;
}

/* --- Пешая версия (без скрипта) ---------------------------------- */

.peshij {
  padding: clamp(2rem, 5vw, 4rem) clamp(18px, 5vw, 64px);
  display: grid;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
.peshij img {
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, #8a683c 40%, transparent);
}
.peshij h2 {
  font-family: var(--sw-font-display);
  margin: 0.6em 0 0.3em;
}
.peshij a {
  color: #dfcfae;
}

/* --- Подвал ------------------------------------------------------ */

/* Слово слева, зовы справа — иерархия вместо столбика по центру.
   На узком складывается в колонку и центрируется. */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(18px, 5vw, 64px)
           calc(clamp(2rem, 4vw, 3.5rem) + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in srgb, #8a683c 35%, transparent);
}
.foot__slovo {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.foot p { margin: 0; }
.foot__imya {
  font-family: var(--sw-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sw-ink);
}
.foot__opis { color: var(--sw-ink-soft); }
.foot__steam {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--sw-ink-soft) 75%, transparent);
}
.foot__zovy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.foot__zov,
.foot__steam-zov {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  /* Ростом с палец: 44 точки — нижняя граница удобного нажатия. */
  min-height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.2s, background 0.25s, border-color 0.25s;
}
.foot__zov {
  color: #f2e6c9;
  background: #a63a2a;
}
.foot__zov:hover { background: #b84433; transform: translateY(-2px); }
/* Второй зов — обводкой, ведёт в Discord: два залитых рядом спорили бы
   за главенство. Steam-страницы ещё нет, и звать в мёртвую витрину
   магазина хуже, чем не звать вовсе — вместо неё здесь живая ссылка.
   Цвет на наведении — фирменный Discord-индиго, чтобы кнопка называла
   себя даже без иконки. */
.foot__steam-zov {
  color: var(--sw-ink);
  border: 1.5px solid color-mix(in srgb, var(--sw-accent) 45%, transparent);
}
.foot__steam-zov:hover {
  border-color: #5865f2;
  color: #5865f2;
  transform: translateY(-2px);
}

/* Обвод фокуса — по всей странице: клавиатурой ходят не только читалки. */
.foot__zov:focus-visible,
.foot__steam-zov:focus-visible,
.perekl__vybor:focus-visible,
.muzyka:focus-visible,
.sw-topcta:focus-visible,
.sw-nav__item:focus-visible,
.sw-btn:focus-visible,
.sw-route__dot:focus-visible {
  outline: 2px solid #c1523f;
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .foot {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .foot__slovo { align-items: center; }
  .foot__zovy { width: 100%; justify-content: center; }
}

/* --- Затухание картинки у нижней кромки -------------------------- */
/* Кадр обрывался о кромку окна ножом. Растяжка очень лёгкая: у своего
   верха её нет вовсе, под заголовком — два процента, вся сила собрана
   в последних пикселях. Это не плашка, отвергнутая владельцем дважды:
   плашка стоит ПОД строкой, а растяжка идёт по всей ширине и к тексту
   поднимается уже прозрачной.

   Живёт на СЦЕНЕ, а не на подмостках. Подмостки прибиты к окну и после
   полёта темнили бы полосу ведунов; сцена же гаснет вместе с полётом и
   уносит растяжку с собой. z-index нужен: кадр видео лежит на первом. */
.sw-scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 30vh;
  background: linear-gradient(to top,
    rgba(11, 9, 6, 0.5) 0%,
    rgba(11, 9, 6, 0.35) 15%,
    rgba(11, 9, 6, 0.22) 30%,
    rgba(11, 9, 6, 0.11) 50%,
    rgba(11, 9, 6, 0.02) 75%,
    transparent 100%);
}

/* --- Копия сцен и подсказка прокрутки --------------------------- */

/* Колонка копии шире движковой: у нас тексты описательные, и в
   42vw/460px они дробились на слишком короткие строки. Подложка-градиент
   расширена следом, иначе её край резал бы абзац пополам. */
.sw-copy {
  width: min(58vw, 780px);
  /* Копия прибита к нижнему левому углу, а не висит по центру: так
     она не заслоняет сцену, в которую летит камера, и читается снизу
     вверх — как подпись под картиной. Движок при этом продолжает
     качать её на ±2vh своим инлайновым transform, и это ему не
     мешает: привязка снизу, качка относительная. */
  top: auto;
  bottom: clamp(48px, 5.5vh, 76px);
}
.sw-copylayer::before {
  width: min(74vw, 1080px);
}
/* Абзац в движке отдельно зажат `max-width: 40ch` — и расширение
   колонки его не касалось вовсе: шире становился только заголовок.
   Ширину назвал владелец: строка выходит длиннее типографской меры,
   зато копия читается одним куском и не дробится в столбик. */
.sw-copy__body {
  max-width: 74ch;
}

/* Подсказка прокрутки — по центру, лёжа и на своей подложке.
   Читаемость важнее чистоты акцента: красный текст на тёмной ЖИВОЙ
   сцене (кадр видео под ним меняется) держит контраст около 3:1 — ниже
   порога для мелкого шрифта. Поэтому слово светлое на подложке, а
   красным остаётся колёсико и обвод. Строкой, а не столбиком: копия
   рядом прибита к самому низу, и высокий хинт задевал её углом. */
.sw-hint {
  bottom: 10px;
  color: var(--sw-ink);
  background: color-mix(in srgb, #0b0906 74%, transparent);
  border: 1px solid color-mix(in srgb, #c1523f 40%, transparent);
  border-radius: 999px;
  padding: 7px 16px;
  backdrop-filter: blur(8px);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.sw-hint i {
  width: 26px;
  height: 15px;
  border-radius: 8px;
  border-color: color-mix(in srgb, #c1523f 60%, transparent);
}
/* Колёсико лёжа катится вбок, а не вниз. */
.sw-hint i::after {
  top: 50%;
  left: 6px;
  width: 6px;
  height: 4px;
  background: #c1523f;
  transform: translateY(-50%);
  animation: sw-koleso 1.7s ease-in-out infinite;
}
@keyframes sw-koleso {
  0% { opacity: 0; left: 5px; }
  40% { opacity: 1; }
  100% { opacity: 0; left: 15px; }
}

/* Низкие окна: продающая копия длиннее прежней, и на экранах ниже
   620px она упиралась в кромку — ужимаем кегль, не тронув больших. */
@media (max-height: 620px) {
  .sw-copy__title { font-size: clamp(1.4rem, 5vw, 2rem); }
  .sw-copy__body { font-size: 0.9rem; line-height: 1.45; }
  .sw-copy__tags li { font-size: 0.72rem; padding: 5px 10px; }
}

/* --- Покой ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vedun__karta { transition: none; }
  .muzyka.igraet .muzyka__stolbiki i { animation: none; height: 11px; }
  .foot__zov:hover,
  .foot__steam-zov:hover { transform: none; }
  .sw-btn:hover { transform: none; }
  .muzyka.igraet .znak { animation: none; }
}

/* --- Телефон ------------------------------------------------------
   Не сжатый десктоп, а другая раскладка: на 375 точках ширины шапка в
   три колонки разваливается, имя игры переносится на три строки, а зов
   уезжает за край.

   Правило одно: наверху остаётся то, что помогает СЕЙЧАС (знак, язык,
   звук), а то, ради чего пришли, — внизу, под большим пальцем. */
@media (max-width: 860px) {
  .sw-topbar {
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px 14px;
  }
  /* Имя игры в шапке не помещается рядом с кнопками и переносится в
     три строки. Оставляем знак — свеча узнаётся и без подписи, а имя
     всё равно стоит в заставке и в подвале. */
  .sw-brand__name { display: none; }
  img.sw-brand__mark { height: 30px; }

  /* Маршрут по сценам — это навигация для мыши. Пальцем по нему не
     целятся, а место он занимает всю ширину. */
  .sw-nav { display: none; }

  .shapka-pravo {
    justify-self: end;
    gap: 8px;
  }
  /* Зов уходит из шапки вниз — там до него дотягивается палец. */
  .sw-topcta { display: none; }

  /* Пальцу нужно 44 точки. Высота 38 была рассчитана на курсор. */
  .perekl,
  .muzyka {
    height: 44px;
    min-width: 44px;
  }
  .perekl__vybor { font-size: 0.82rem; }

  /* Копия: одна фраза вместо абзаца, во всю ширину и над нижним
     зовом. Метки движок на телефоне не рисует вовсе. */
  /* Снизу вверх: зов у кромки, над ним подсказка о жесте, над ней
     копия. Каждая следующая отступает от предыдущей, а не наезжает. */
  .sw-copy {
    width: auto;
    left: 20px;
    right: 20px;
    bottom: calc(148px + env(safe-area-inset-bottom, 0px));
  }
  .sw-copy__body { max-width: none; }
  .sw-copylayer::before { width: 100%; }

  /* Точки маршрута сбоку — те же 44 точки на палец, но сама точка
     остаётся мелкой: растёт только область нажатия. */
  .sw-route__dot {
    width: 44px;
    height: 30px;
  }

  /* Ведуны — лента вбок, а не сетка. Шесть карточек в столбик на
     телефоне значат шесть экранов прокрутки; вбок они листаются
     одним движением большого пальца.

     Карточка занимает 72 процента ширины нарочно: край следующей
     остаётся виден, и лента сама говорит, что её листают. */
  .veduny__ryad {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Отрицательные поля выводят ленту под кромки экрана: карточки
       уезжают за край, а не упираются в него. */
    padding: 4px 20px;
    margin: -4px -20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .veduny__ryad::-webkit-scrollbar { display: none; }
  .vedun {
    flex: 0 0 72%;
    scroll-snap-align: center;
  }
  /* Оборот читают с расстояния вытянутой руки, а кегль был рассчитан
     на карточку в сетке из шести — на телефоне она втрое крупнее, и
     текст в ней оставался микроскопическим. */
  .vedun__oborot {
    font-size: 0.84rem;
    line-height: 1.4;
    gap: 0.5em;
    padding: 14px;
  }

  /* Точки-указатели под лентой: без них непонятно, сколько ещё. */
  .veduny__tochki {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    padding: 0;
    list-style: none;
  }
  .veduny__tochka {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sw-ink-soft) 45%, transparent);
    transition: background 0.25s, transform 0.25s;
  }
  .veduny__tochka[data-tut] {
    background: #c1523f;
    transform: scale(1.25);
  }

  /* Подсказка о жесте — одной строкой над зовом. */
  .sw-hint {
    bottom: calc(94px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    gap: 8px;
    font-size: 0.7rem;
  }
}

/* Нижний зов: постоянная строка у кромки экрана. */
@media (max-width: 860px) {
  .zov-niz {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(11, 9, 6, 0.96), rgba(11, 9, 6, 0.82) 60%, rgba(11, 9, 6, 0));
    pointer-events: none;
  }
  /* Красный фирменный, а не акцент текущей сцены: зов не должен
     менять цвет по ходу полёта, иначе перестаёт узнаваться. */
  .zov-niz__knopka {
    pointer-events: auto;
    display: grid;
    place-items: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    background: #c1523f;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
  }
  .zov-niz__knopka:active { transform: scale(0.985); }
  .zov-niz__slovo {
    margin: 0;
    color: var(--sw-ink-soft);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-align: center;
  }
}

/* Низкий экран в ландшафте: копия и зов начинают наезжать друг на
   друга, и подсказку убираем первой — она сказала своё за первый
   экран. */
@media (max-width: 860px) and (max-height: 480px) {
  .sw-hint { display: none; }
  .sw-copy { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Настройка под заглавную гарнитуру --------------------------- */
/*
 * У ST-Nizhegorodsky одно начертание: при `font-weight: 700` браузер
 * рисует поддельный жир и замыливает узкие штрихи. Трекинг у движка
 * отрицательный — он подобран под широкую антикву, а узким прописным
 * нужен воздух. Тень усилена вторым коротким слоем: заголовок лежит
 * на живом видео, и одного размытого пятна на светлом кадре мало.
 */
.sw-copy__eyebrow,
.sw-copy__title,
.veduny h2,
.vedun__imya,
.peshij h2,
.foot__imya {
  font-weight: 400;
  letter-spacing: 0.05em;
}
/* --- Читаемость копии на живом кадре ----------------------------- */
/* Надзаголовок стоял блёклым льном и давал 2,71 при нужных 4,5 —
   мерено по кадру видео под ним. Сливки на той же земле дают вдвое
   больше. Лён не держал и до смены гарнитуры. */
.sw-copy__eyebrow {
  color: var(--sw-ink);
  text-shadow: 0 0 3px rgba(11, 9, 6, 0.9), 0 1px 10px rgba(11, 9, 6, 0.8);
}
/* `[БЕДА, 29.08–30.08]` Тут побывало две крайности, и обе — мои. Сперва
   сплошная чернота на 54 % ширины кадра («левая сторона сайта чёрная»),
   потом тёмное пятно под копией — владелец 30.08: «убери чёрное за
   текстом». Плашки нет вовсе.

   Читаемость держат теперь САМИ БУКВЫ: тень в три слоя — узкая тёмная
   обводка вплотную к штриху, средняя и широкая подушка. Обводка даёт
   кромку на светлом кадре, подушки гасят пестроту под строкой. Кадр при
   этом не темнеет нигде, кроме толщины буквы.

   Честно: формального порога 4,5 обводка не даёт — WCAG теней не
   считает. Но выбор был между нечитаемым текстом, чёрной плашкой и
   этим; владелец отверг плашку дважды. */
.sw-copy__eyebrow {
  color: var(--sw-ink);
  text-shadow:
    0 0 2px rgba(11, 9, 6, 0.95),
    0 1px 4px rgba(11, 9, 6, 0.9),
    0 2px 14px rgba(11, 9, 6, 0.75);
}

.sw-copy__title {
  text-shadow:
    0 0 2px rgba(11, 9, 6, 0.95),
    0 1px 5px rgba(11, 9, 6, 0.92),
    0 3px 22px rgba(11, 9, 6, 0.8);
}

.sw-copy__body {
  text-shadow:
    0 0 2px rgba(11, 9, 6, 0.9),
    0 1px 6px rgba(11, 9, 6, 0.85),
    0 2px 18px rgba(11, 9, 6, 0.7);
}

@media (max-width: 860px) {
  /* На узком экране движковый градиент снизу оставлен как есть: он был
     тут с самого начала и чернотой не читался. Своей растяжки тут не
     надо — вдвоём они дали бы ту самую черноту. */
  .sw-scene::after { display: none; }
}