/* Сказочная карта: та же тёмно-золотая палитра, что и в игре.
   Карта и игра — одно место, и выглядеть они должны как одно место. */

:root {
  --bg: #12100c;
  --glass: rgba(28, 23, 17, 0.9);
  --glass-2: rgba(58, 48, 34, 0.72);
  --edge: rgba(226, 197, 128, 0.35);
  --edge-hot: #f0d68a;
  --gold: #ffe6a6;
  --text: #f3ecd9;
  --dim: #c9bda0;
  --font: "Trebuchet MS", "Segoe UI", sans-serif;
  --mono: "Consolas", "DejaVu Sans Mono", monospace;

  /* Высота шапки, измеренная на живой странице (`map.js`), и отступ панелей под
     неё. Раньше во всех панелях стояло `top: 74px` — число под шапку в один ряд.
     На узком экране она встаёт в три ряда и вырастает до 126px, и панели
     залезали ей под низ: в альбомной ориентации телефона книжка накрывала
     полосу кнопок целиком, и нажать их было нельзя, пока не закроешь сказку.
     Значение здесь запасное — на случай, если разметку ещё не измерили. */
  --шапка: 62px;
  --подШапкой: calc(var(--шапка) + 12px);
  /* Высота нижней навигации на телефоне (t138). На столе она не существует —
     переменная нулевая, и bottom-отступы панелей не меняются; на телефоне
     media-блок ниже переопределяет её, и от неё отсчитываются те же панели,
     чтобы не оказаться под пятью вкладками. */
  --нижНав: 0px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px;
  overflow: hidden;
}

#map { position: absolute; inset: 0; background: #0d0b08; }

/* Подложка приглушена: карта здесь — фон для точек, а не самоцель. Живые
   цвета OSM перетягивали внимание на автозаправки. */
.leaflet-tile-pane { filter: grayscale(0.55) brightness(0.52) contrast(1.05) sepia(0.25); }
.leaflet-container { background: #0d0b08; font-family: var(--font); }
/* Штатной полосы с подписью нет (см. `map.js`), но если Leaflet заведёт её сам
   — например, у слоя со своей `attribution`, — она не должна вылезти поперёк
   карты. Подпись живёт под кнопкой «ⓘ». */
.leaflet-control-attribution { display: none !important; }

.о-карте { margin: 0 8px 8px 0 !important; text-align: right; }
.о-карте button {
  width: 26px; height: 26px; line-height: 1; padding: 0;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 50%;
  color: var(--dim); cursor: pointer; font-size: 14px;
}
.о-карте button:hover { color: var(--gold); border-color: var(--edge-hot); }
.о-карте .строки {
  margin-top: 6px; max-width: 260px; padding: 8px 10px;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 7px;
  color: var(--dim); font-size: 11px; line-height: 1.5; text-align: left;
}
.о-карте .строки a { color: var(--gold); }
.leaflet-bar a {
  background: var(--glass); color: var(--gold); border-color: var(--edge);
}
.leaflet-bar a:hover { background: var(--glass-2); color: var(--edge-hot); }
/* Кнопки зума живут внизу слева, над легендой и фильтром жанра над ней.
   Наверху им места нет: там шапка, а под шапкой — панель викторины, и «плюс»
   садился то на название карты, то на первый вопрос. Отступ подобран под
   двухстрочную легенду округов плюс строку фильтра жанра — если у одной из
   них изменится число строк, эту цифру придётся сверить заново. */
.leaflet-bottom.leaflet-left { margin-bottom: 91px; }

/* Значок сказки-квеста поверх обычной точки: книжка вместо кружка — видно
   издалека, где на карте можно начать читать, а не только по клику узнавать,
   что тут есть сказка. */
.сказка-иконка {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20, 16, 10, .92); border: 2px solid var(--gold);
  box-shadow: 0 0 10px rgba(240, 214, 138, .55);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: transform .1s ease-out, box-shadow .1s ease-out;
}
.сказка-иконка:hover { transform: scale(1.12); box-shadow: 0 0 16px rgba(240, 214, 138, .85); }

/* Значок жанра (былина/легенда/хождение) поверх точки — меньше книжки
   сказки-квеста и с приглушённой рамкой, чтобы не спорить с ней визуально
   там, где обе метки могли бы оказаться рядом. */
.жанр-иконка {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(20, 16, 10, .88); border: 2px solid var(--dim);
  font-size: 12px; line-height: 1; cursor: pointer;
  transition: transform .1s ease-out;
}
.жанр-иконка:hover { transform: scale(1.12); }

/* ─── Полосы прокрутки ───────────────────────────────────────────────────── */
/* Системная полоса — белая и широкая: в тёмных панелях она светила ярче
   содержимого. Тонкая, полупрозрачным золотом интерфейса. Chrome и Firefox
   понимают стандартную пару свойств; дубль ::-webkit-scrollbar — для старых
   WebKit, новые его игнорируют при заданном scrollbar-width. */
* { scrollbar-width: thin; scrollbar-color: rgba(226,197,128,.38) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(226,197,128,.32); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(226,197,128,.55); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ─── Шапка ──────────────────────────────────────────────────────────────── */

#шапка {
  position: absolute; z-index: 500; inset: 0 0 auto 0;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  /* Размытие здесь допустимо: под шапкой картинка стоит на месте, это не
     игровое поле, которое перерисовывается каждый кадр. */
  background: linear-gradient(180deg, rgba(18,16,12,.94) 0%, rgba(18,16,12,.72) 70%, rgba(18,16,12,0) 100%);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
#шапка > * { pointer-events: auto; }

/* Название — кнопка: за ним рассказ о проекте. Выглядит текстом нарочно, а
   подчёркивается только под курсором: шапка не место для третьей яркой кнопки. */
.титул {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.25; white-space: nowrap; cursor: pointer;
  background: transparent; border: 0; padding: 0; text-align: left;
  font-family: var(--font);
}
.титул b { color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.титул:hover b { text-decoration: underline; }
.титул span { color: var(--dim); font-size: 11px; font-family: var(--mono); }

#оПроектеОкно {
  position: absolute; z-index: 560; top: var(--подШапкой); left: 12px;
  width: 380px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 16px 18px 18px;
  background: var(--glass); border: 1px solid var(--edge-hot); border-radius: 10px;
}
#оПроектеОкно[hidden] { display: none; }
#оПроектеОкно h2 { margin: 4px 0 10px; font-size: 19px; color: var(--gold); line-height: 1.2; }
#закрытьОПроекте {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); border-radius: 6px; cursor: pointer;
}
#оСписок { margin: 6px 0 0; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.7; }
#оВИгру { text-decoration: none; display: inline-block; }

/* min-width: кнопок в шапке прибавилось («Продолжить…», имя странника), и
   flexbox сжимал поиск до автоминимума поля ввода — от него оставался
   квадратик. Теперь ужимается полоса кнопок (она листается), а не поиск. */
.поиск { position: relative; flex: 1; max-width: 560px; min-width: 200px; }
#поиск {
  width: 100%; padding: 9px 12px;
  background: var(--glass); color: var(--text);
  border: 1px solid var(--edge); border-radius: 7px;
  font-family: var(--font); font-size: 14px; outline: none;
}
#поиск:focus { border-color: var(--edge-hot); }
#поиск::placeholder { color: #8a7f68; }

#подсказки {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 58vh; overflow-y: auto;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 7px;
}
#подсказки .строка {
  padding: 8px 11px; cursor: pointer; border-bottom: 1px solid rgba(226,197,128,.12);
}
#подсказки .строка:last-child { border-bottom: 0; }
#подсказки .строка:hover, #подсказки .строка.на { background: var(--glass-2); }
#подсказки .имя { color: var(--gold); }
#подсказки .где { color: var(--dim); font-size: 11px; font-family: var(--mono); }
#подсказки .пусто { padding: 10px 11px; color: var(--dim); }
/* Заголовок группы («Сказки-квесты», «Маршруты», «Места на карте») — три
   разных списка на одной ленте подсказок, и без подписи непонятно, куда
   ведёт клик: в книжку, в панель маршрута или на точку карты. */
#подсказки .группаЗаголовок {
  padding: 7px 11px 4px; color: #9c8f74; font-size: 10px; letter-spacing: .04em;
  text-transform: uppercase; font-family: var(--mono);
}
#подсказки .группаЗаголовок:not(:first-child) {
  border-top: 1px solid rgba(226,197,128,.12); margin-top: 4px;
}
/* Когда нашли не по написанному, а по догадке — строка сверху говорит, что
   именно поняли. Тише самих находок: это пояснение, а не результат. */
#подсказки .намёк {
  padding: 7px 11px; color: #9c8f74; font-size: 11px; font-family: var(--mono);
  border-bottom: 1px solid rgba(226,197,128,.12); background: rgba(58,48,34,.35);
}

/* Полоса кнопок листается и на столе, как на телефоне: кнопок стало больше,
   чем влезает рядом с поиском, а перенос растил бы шапку вниз и закрывал
   карту. Колесо мыши крутит её вбок (map.js), о скрытых кнопках говорит
   растворённый край (.естьДальше). */
.кнопки {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.кнопки::-webkit-scrollbar { display: none; }
.кнопки > * { flex: 0 0 auto; }
/* «Продолжить…» несёт название сказки и главы и может вырасти шире экрана —
   обрезается многоточием: полный список закладок и так есть в профиле. */
#продолжитьЧтение { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Нижняя навигация — только на телефоне (t138): её незачем видеть на столе,
   где шапка и так вмещает все пять кнопок в одну строку. Показ — в
   `@media (max-width: 720px)` ниже, вместе с самой высотой полосы. */
#нижНав { display: none; }

/* Двойники «Скрыть панели», «Во весь экран» и «Правка карты» в профиле — тоже
   только для телефона (t138): на столе те же действия и так стоят в шапке, и
   дублировать их внутри профиля незачем. Показ — в том же media-блоке. */
.рядКнопок.профильЭкран, #профильПравка, #профильПоддержать { display: none; }

/* Убрать панели с карты. Кнопка живёт в шапке рядом со «Войти», но при
   скрытых панелях остаётся видна одна она — иначе открыть панели обратно
   было бы нечем. */
#панелиКнопка, #экранКнопка, #профильПанели, #профильВоВесь {
  padding: 8px 12px; border-radius: 7px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--edge);
  color: var(--dim); font-family: var(--font); font-size: 12px;
}
/* Значок вместо слова: подписи «Во весь экран» не нужно — она есть в title, а
   полоса кнопок на телефоне и так уезжает вбок. Ширину задаём, чтобы значок
   не прыгал при смене на «выйти из полного экрана». */
#экранКнопка { min-width: 38px; font-size: 14px; line-height: 1; text-align: center; }
#панелиКнопка:hover, #экранКнопка:hover, #профильПанели:hover, #профильВоВесь:hover { color: var(--gold); border-color: var(--edge-hot); }
#панелиКнопка.горит, #экранКнопка.горит, #профильПанели.горит, #профильВоВесь.горит {
  background: #6d4b12; color: #fff3cf; border-color: var(--edge-hot);
}
#экранКнопка[hidden], #профильВоВесь[hidden] { display: none; }

/* Скрыто — значит не видно; ничего при этом не закрывается и не забывается.
   Открытая карточка останется открытой, когда панели вернут. */
body.панели-скрыты #карточка,
body.панели-скрыты #профиль,
body.панели-скрыты #вход,
body.панели-скрыты #поддержка,
body.панели-скрыты #рядом,
body.панели-скрыты #мршСписок,
body.панели-скрыты #дорога,
body.панели-скрыты #правка,
body.панели-скрыты #викторина,
body.панели-скрыты #оПроектеОкно,
body.панели-скрыты #сказка,
body.панели-скрыты #скзСписок,
body.панели-скрыты #знание,
body.панели-скрыты #нижЛев { display: none !important; }
/* Шапка — тоже панель, но кнопку, которая их возвращает, спрятать нельзя. */
/* Вместе с «Скрыть панели» остаётся и «во весь экран»: панели убирают именно
   затем, чтобы смотреть карту, и развернуть её хочется тут же. */
body.панели-скрыты #шапка > *:not(.кнопки),
body.панели-скрыты .кнопки > *:not(#панелиКнопка):not(#экранКнопка) { visibility: hidden; }

#играть, #кнопкаВикторины {
  padding: 9px 16px; border-radius: 7px; white-space: nowrap;
  background: var(--glass-2); border: 1px solid var(--edge-hot);
  color: var(--gold); text-decoration: none; letter-spacing: 1px;
  font-family: var(--font); font-size: 14px; cursor: pointer;
}
#играть:hover, #кнопкаВикторины:hover { background: #4a3d26; color: #fff3cf; }
/* Викторина тише «Войти в игру»: она развлечение, а не главный путь. */
#кнопкаВикторины { border-color: var(--edge); }

/* ─── Викторина ──────────────────────────────────────────────────────────── */

#викторина {
  position: absolute; z-index: 520; left: 12px; top: var(--подШапкой);
  width: 400px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 16px 18px 18px;
  background: var(--glass); border: 1px solid var(--edge-hot); border-radius: 10px;
}
#викторина[hidden] { display: none; }
#закрытьВикторину {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); border-radius: 6px; cursor: pointer; line-height: 1;
}
#закрытьВикторину:hover { color: var(--gold); border-color: var(--edge-hot); }
.ярлык { padding: 2px 7px; border-radius: 20px; background: var(--edge-hot); color: #12100c; font-weight: bold; }
#ходВикторины { color: var(--dim); font-family: var(--mono); font-size: 11px; }
#темаВопроса {
  margin-top: 10px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; color: #9c8f74;
}
#викторина h2 { margin: 4px 0 12px; font-size: 17px; line-height: 1.35; color: var(--gold); }

#варианты { display: flex; flex-direction: column; gap: 7px; }
.вариант {
  text-align: left; padding: 10px 12px; line-height: 1.4;
  background: rgba(58,48,34,.5); border: 1px solid var(--edge);
  color: var(--text); border-radius: 7px; cursor: pointer;
  font-family: var(--font); font-size: 14px;
}
.вариант:hover:not(:disabled) { background: var(--glass-2); border-color: var(--edge-hot); }
.вариант:disabled { cursor: default; }
.вариант.верно { border-color: #a8e86a; background: rgba(168,232,106,.16); color: #dcffbc; }
.вариант.мимо { border-color: #ff7a6a; background: rgba(255,122,106,.13); color: #ffcfc8; }
.вариант.тускло { opacity: .45; }

#разбор { margin-top: 12px; padding: 10px 12px; border-radius: 7px;
  background: rgba(58,48,34,.45); line-height: 1.5; }
#разбор.верно { border-left: 3px solid #a8e86a; }
#разбор.мимо { border-left: 3px solid #ff7a6a; }

.низВикторины { display: flex; gap: 8px; margin-top: 12px; }
.низВикторины button {
  padding: 8px 14px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); font-family: var(--font); font-size: 13px;
}
.низВикторины button:hover { color: var(--gold); border-color: var(--edge-hot); }
#дальше { margin-left: auto; color: var(--gold); border-color: var(--edge-hot); }
#подсказкаТекст {
  margin-top: 10px; color: #cbbf9f; font-size: 13px; line-height: 1.5;
  padding-left: 10px; border-left: 2px solid var(--edge);
}
#итогВикторины { margin-top: 10px; line-height: 1.5; }

/* ─── Карточка сказки ────────────────────────────────────────────────────── */

#карточка {
  position: absolute; z-index: 500; right: 12px; top: var(--подШапкой); bottom: 12px;
  width: 380px; max-width: calc(100vw - 24px);
  overflow-y: auto; padding: 16px 18px 20px;
  background: var(--glass); border: 1px solid var(--edge); border-radius: 10px;
}
#карточка[hidden] { display: none; }
/* Ручка шторки — только на телефоне (t126): на столе у карточки нет
   свёрнутого состояния, тянуть или тапать там нечего. */
#карточкаРучка { display: none; }
#закрыть {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); border-radius: 6px; cursor: pointer;
}
#закрыть:hover { color: var(--gold); border-color: var(--edge-hot); }

.метка { display: flex; gap: 8px; align-items: center; font-family: var(--mono); font-size: 11px; }
#округ { padding: 2px 7px; border-radius: 20px; color: #12100c; font-weight: bold; }
#номер { color: var(--dim); }
#карточка h1 { margin: 8px 0 2px; font-size: 21px; color: var(--gold); line-height: 1.2; }
.место { color: var(--dim); font-size: 12px; margin-bottom: 14px; }

.поле { margin-bottom: 13px; }
.имяполя {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: #9c8f74; margin-bottom: 3px;
}
.поле > div:last-child { line-height: 1.5; }
#вывод { color: #ffeec2; }
.поле.пусто > div:last-child { color: #8a7f68; font-style: italic; }

/* Зов прочесть сказку стоит сразу под названием места, а не в конце карточки:
   на телефоне карточка ограничена по высоте и прокручивается внутри себя, и
   снизу кнопка уходила за нижний край экрана — до сказки нельзя было добраться
   вовсе. Сверху она видна на любом экране без прокрутки. */
#карточкаСказка {
  display: block; width: 100%; margin: 2px 0 16px; padding: 10px 12px;
  border-radius: 7px; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--edge-hot);
  color: var(--gold); font-family: var(--font); font-size: 13px;
}
#карточкаСказка:hover { background: #4a3d26; color: #fff3cf; }
#карточкаСказка[hidden] { display: none; }

/* На столе шириной 1280–1440 сказка (520px слева) и карточка (380px справа)
   вместе съедали карту почти целиком: на 1366×768 карте оставалось около
   400px — меньше трети экрана. Сказку не трогаем, ей и так тесно с текстом;
   вместо этого карточка при открытой сказке сама сворачивается до строки
   заголовка внизу справа — тот же приём шторки, что уже есть на телефоне
   (t126), только раскрывает её не жест, а клик по ручке (JS уже умеет — та
   же `применитьСостояниеКарточки`, ничего в нём менять не пришлось).
   Ширина в свёрнутом виде считается от вьюпорта: `50vw - 560px` — это
   половина экрана минус занятая сказкой полоса (12 + 520 = 532px) и ещё
   16px запаса. При 1366px это 123px, при 1280px — 80px, при 1440px — 160px:
   во всём диапазоне карте остаётся не меньше половины ширины экрана. */
@media (min-width: 1280px) and (max-width: 1440px) {
  body.сказка-открыта #карточка {
    top: auto; bottom: 12px;
    width: calc(50vw - 560px);
    display: flex; flex-direction: column; overflow: hidden;
    padding: 4px 14px 6px; max-height: 48px;
    transition: max-height .18s ease-out, width .18s ease-out;
  }
  body.сказка-открыта #карточкаРучка {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 14px; margin: 0; padding: 0;
    background: none; border: 0; color: var(--dim); font-size: 10px; line-height: 1;
    cursor: pointer;
  }
  body.сказка-открыта #карточкаРучка:hover { color: var(--gold); }
  /* Крестик и метка округа/номера в свёрнутые 48px не помещаются — да и
     закрывать карточку, не разворачивая её, тут незачем. */
  body.сказка-открыта #карточка:not(.развёрнута) #закрыть,
  body.сказка-открыта #карточка:not(.развёрнута) .метка,
  body.сказка-открыта #карточка:not(.развёрнута) .место {
    display: none;
  }
  body.сказка-открыта #карточка:not(.развёрнута) > h1#название {
    margin: 2px 0 0; font-size: 15px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Развёрнута — прежний вид: полная колонка справа, как без сказки. */
  body.сказка-открыта #карточка.развёрнута {
    top: var(--подШапкой); width: 380px;
    max-height: calc(100vh - var(--подШапкой) - 24px);
    overflow-y: auto; padding: 16px 18px 20px;
  }
}

/* Реестр героя (js/data/geroi.js) над списком связей: кто он и кнопка сузить
   карту до его точек. Текст «кто» — не кнопка, просто абзац; фильтром служит
   только сама кнопка снизу. */
#реестрГероя[hidden] { display: none; }
.реестрКто {
  margin-bottom: 6px; color: var(--dim); font-size: 12px; line-height: 1.4;
}
.реестрФильтрКнопка {
  display: block; width: 100%; margin-bottom: 10px; padding: 7px 10px;
  border-radius: 7px; cursor: pointer;
  background: rgba(58,48,34,.5); border: 1px solid var(--edge-hot);
  color: var(--gold); font-family: var(--font); font-size: 12px;
}
.реестрФильтрКнопка:hover { background: #4a3d26; color: #fff3cf; }

/* Связи: куда идти дальше от этой точки — сперва герой, потом край.
   Строка целиком кнопка, а не ссылка со стрелочкой: на телефоне промахнуться
   мимо маленькой цели проще, чем попасть, и вся карточка держится на пальце. */
.поле.связи { margin-bottom: 16px; }
.связь {
  display: block; width: 100%; text-align: left; margin-bottom: 6px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  background: rgba(58,48,34,.35); border: 1px solid var(--edge);
  color: var(--gold); font-family: var(--font); font-size: 13px; line-height: 1.35;
}
.связь:hover { background: #4a3d26; border-color: var(--edge-hot); color: #fff3cf; }
.связьИмя { display: block; }
/* Герой и край строкой ниже: по названию сказку узнаёт тот, кто её уже знает,
   а остальным нужно, кто там и где это. */
.связьГде { display: block; color: var(--dim); font-size: 11px; }
.связьПовод {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: #9c8f74;
}
.связьЕщё {
  display: block; width: 100%; padding: 5px; cursor: pointer;
  background: none; border: 1px dashed var(--edge); border-radius: 7px;
  color: var(--dim); font-family: var(--font); font-size: 12px;
}
.связьЕщё:hover { color: var(--gold); border-color: var(--edge-hot); }

/* Ссылки на книги barius.ru (t207): та же строка, что у связей, но это
   настоящая ссылка на чужой сайт, а не переход по карте — поэтому `<a>`
   с target="_blank", а не кнопка. */
.книга {
  display: block; width: 100%; text-align: left; margin-bottom: 6px;
  padding: 7px 10px; border-radius: 7px;
  background: rgba(58,48,34,.35); border: 1px solid var(--edge);
  color: var(--gold); font-family: var(--font); font-size: 13px; line-height: 1.35;
  text-decoration: none;
}
.книга:hover { background: #4a3d26; border-color: var(--edge-hot); color: #fff3cf; }
.книгаИмя { display: block; }
.книгаКто { display: block; color: var(--dim); font-size: 11px; }

.сноска {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(226,197,128,.15);
  color: #8a7f68; font-size: 11px; line-height: 1.5;
}

/* ─── Вход, профиль, правка ──────────────────────────────────────────────── */

#войти, #ктоЯ, #правкаКнопка, #продолжитьЧтение {
  padding: 9px 14px; border-radius: 7px; white-space: nowrap; cursor: pointer;
  background: var(--glass); border: 1px solid var(--edge);
  color: var(--gold); font-family: var(--font); font-size: 14px;
}
#войти:hover, #ктоЯ:hover, #правкаКнопка:hover, #продолжитьЧтение:hover { background: var(--glass-2); border-color: var(--edge-hot); }
#продолжитьЧтение { border-color: var(--edge-hot); }
/* Горящая кнопка — единственный признак, что карта сейчас в режиме правки.
   Без него легко забыть и утащить точку, думая, что двигаешь карту.
   Двойник в профиле (`#профильПравка`, t138) горит тем же классом — оба
   переключает один `переключитьПравку` в map.js. */
#правкаКнопка.горит, #профильПравка.горит { background: #6d4b12; color: #fff3cf; border-color: var(--edge-hot); }
#профильПравка[hidden] { display: none; }

#вход, #профиль, #правка {
  position: absolute; z-index: 560; top: var(--подШапкой); right: 12px;
  width: 340px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 16px 18px 18px;
  background: var(--glass); border: 1px solid var(--edge-hot); border-radius: 10px;
}
#правка { left: 12px; right: auto; width: 360px; }
#вход[hidden], #профиль[hidden], #правка[hidden] { display: none; }
#вход h2, #профиль h2 { margin: 6px 0 12px; font-size: 18px; color: var(--gold); }
#закрытьВход, #закрытьПрофиль, #правкаЗакрыть {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); border-radius: 6px; cursor: pointer;
}
#вход label, .правкаСтрока {
  display: block; margin-bottom: 10px; color: var(--dim); font-size: 12px;
}
#вход input, .правкаСтрока input, .правкаСтрока textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  background: rgba(18,16,12,.7); color: var(--text);
  border: 1px solid var(--edge); border-radius: 6px;
  font-family: var(--font); font-size: 13px; outline: none; resize: vertical;
}
#вход input:focus, .правкаСтрока input:focus, .правкаСтрока textarea:focus { border-color: var(--edge-hot); }

.правкаИллюстрацияБлок {
  border-top: 1px solid var(--edge); padding-top: 12px; margin-top: 12px;
}
#правкаПросмотрИллюстрации {
  margin-top: 8px; max-width: 100%; border-radius: 6px; overflow: hidden;
}
#правкаПросмотрИллюстрации img {
  width: 100%; height: auto; display: block;
}
.иллюстрКнопка {
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); font-family: var(--font); font-size: 12px;
  flex: 1;
}
.иллюстрКнопка:hover { color: var(--gold); border-color: var(--edge-hot); }
#правкаПолямиИллюстрации {
  margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
}
#правкаПолямиИллюстрации label {
  display: flex; flex-direction: column; color: var(--dim); font-size: 11px;
}
#правкаПолямиИллюстрации input {
  margin-top: 4px; padding: 6px 8px;
  background: rgba(18,16,12,.7); color: var(--text);
  border: 1px solid var(--edge); border-radius: 5px;
  font-family: var(--font); font-size: 12px; outline: none;
}
#правкаПолямиИллюстрации input:focus { border-color: var(--edge-hot); }

.рядКнопок { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* Ссылка в этом ряду — такая же кнопка, как остальные: «Войти в игру» ведёт на
   другую страницу, но для человека это то же самое действие, и выглядеть оно
   должно так же. */
.рядКнопок button, .рядКнопок a {
  padding: 9px 14px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); font-family: var(--font); font-size: 13px;
}
.рядКнопок button:hover, .рядКнопок a:hover { color: var(--gold); border-color: var(--edge-hot); }
.рядКнопок .главная { background: var(--glass-2); color: var(--gold); border-color: var(--edge-hot); }

#входВесть, #правкаВесть { margin-top: 10px; color: #cbbf9f; font-size: 12px; line-height: 1.5; min-height: 16px; }
#входВесть.беда, #правкаВесть.беда { color: #ff9c8c; }
.мелко { margin-top: 10px; color: #8a7f68; font-size: 11px; line-height: 1.5; }
.строчка { color: var(--text); font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
.строчкаКнопка {
  display: inline-block; margin-bottom: 12px; padding: 6px 10px;
  background: transparent; border: 1px solid var(--edge); border-radius: 6px;
  color: var(--dim); cursor: pointer; font-family: var(--font); font-size: 12px;
}
.строчкаКнопка:hover { color: var(--gold); border-color: var(--edge-hot); }
/* Список незаконченных сказок в профиле: строка на всю ширину панели, а не
   в ряд — их может быть несколько, и в ряд они бы слиплись без переносов. */
.закладкаСказки {
  display: block; width: 100%; margin-bottom: 6px;
  text-align: left; border-color: var(--edge-hot);
}
#профильИмяФорма { margin-bottom: 12px; }
#профильИмяФорма label { display: block; margin-bottom: 8px; color: var(--dim); font-size: 12px; }
#профильИмяФорма input {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  background: rgba(18,16,12,.7); color: var(--text);
  border: 1px solid var(--edge); border-radius: 6px;
  font-family: var(--font); font-size: 13px; outline: none;
}
#профильИмяФорма input:focus { border-color: var(--edge-hot); }
#профильИмяВесть { margin-top: 8px; color: #cbbf9f; font-size: 12px; line-height: 1.5; }
#профильИмяВесть.беда { color: #ff9c8c; }
#профильПочта { color: var(--dim); font-family: var(--mono); font-size: 11px; }
#профильПерсонаж { margin-top: 4px; font-size: 13px; line-height: 1.6; }
#профильПерсонаж .строка { display: flex; justify-content: space-between; color: var(--dim); }
#профильПерсонаж .строка b { color: var(--gold); }
#профильПерсонаж .навыки { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--dim); }
#профильПерсонаж .навыки b { color: var(--gold); }
#профильПерсонаж .дела { margin-top: 8px; color: var(--dim); font-size: 12px; }
#профильПерсонаж .пустое { color: #8a7f68; font-style: italic; }
#правкаЗаголовок { color: var(--gold); font-size: 14px; margin-bottom: 4px; }

/* В режиме правки курсор говорит, что точку можно взять: без этого её
   перетаскивание — тайное знание. */
body.режим-правки .leaflet-interactive { cursor: grab; }
body.тащим, body.тащим .leaflet-interactive { cursor: grabbing !important; }

#менюКарты {
  position: fixed; z-index: 700; min-width: 220px; padding: 4px;
  background: var(--glass); border: 1px solid var(--edge-hot); border-radius: 8px;
}
#менюКарты[hidden] { display: none; }
#менюКарты .пункт {
  padding: 8px 10px; border-radius: 5px; cursor: pointer;
  color: var(--text); font-size: 13px;
}
#менюКарты .пункт:hover { background: var(--glass-2); color: var(--gold); }

/* ─── Сказка-квест ───────────────────────────────────────────────────────── */

/* «Маршруты» одеты ровно как «Сказки»: это две двери в одно — прочитать про
   место и съездить в него, — и разный вид развёл бы их по важности. Кнопки
   шапки стилизованы поимённо, общего правила у них нет: новая кнопка без своей
   строки осталась бы белым браузерным прямоугольником среди тёмных. */
#кнопкаСказки, #кнопкаМаршруты {
  padding: 9px 16px; border-radius: 7px; white-space: nowrap; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--edge);
  color: var(--gold); font-family: var(--font); font-size: 14px; letter-spacing: 1px;
}
#кнопкаСказки:hover, #кнопкаМаршруты:hover { background: #4a3d26; color: #fff3cf; border-color: var(--edge-hot); }

/* Список сказок: показывается, только если их несколько — выбор нужен один раз, */
/* а не на каждое открытие книги. */
#скзСписок {
  position: absolute; z-index: 590; left: 12px; top: var(--подШапкой);
  width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 16px 18px 18px;
  background: var(--glass); border: 1px solid var(--edge-hot); border-radius: 10px;
}
#скзСписок[hidden] { display: none; }
#скзСписок h2 { margin: 4px 0 12px; font-size: 17px; color: var(--gold); }
#закрытьСкзСписок {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); border-radius: 6px; cursor: pointer;
}
#скзСписокПоле {
  display: block; width: 100%; margin-bottom: 12px; padding: 9px 12px;
  background: var(--glass); color: var(--text);
  border: 1px solid var(--edge); border-radius: 7px;
  font-family: var(--font); font-size: 14px; outline: none;
}
#скзСписокПоле:focus { border-color: var(--edge-hot); }
#скзСписокПоле::placeholder { color: #8a7f68; }
.скзСписокПусто { padding: 10px 2px; color: var(--dim); }

/* ─── Осведомлённость ────────────────────────────────────────────────────── */
/*
   Список сказок с полоской знания. Полоска, а не одни числа: двадцать одна
   строка «7 из 10» читается как таблица, а глазом нужно одно — где пусто.
*/
#знание {
  position: absolute; z-index: 600; left: 12px; top: var(--подШапкой);
  width: 400px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 16px 18px 18px;
  background: var(--glass); border: 1px solid var(--edge-hot); border-radius: 10px;
}
#знание[hidden] { display: none; }
#знание h2 { margin: 6px 0 8px; font-size: 17px; color: var(--gold); }
#знаниеСчёт { color: var(--dim); }
#знаниеСвод { margin-bottom: 12px; line-height: 1.5; }
#закрытьЗнание {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); border-radius: 6px; cursor: pointer;
}
#закрытьЗнание:hover { color: var(--gold); border-color: var(--edge-hot); }

.знСтрока {
  display: grid; grid-template-columns: 1fr 84px; gap: 2px 10px; align-items: center;
  width: 100%; margin-bottom: 6px; padding: 8px 10px; text-align: left; cursor: pointer;
  background: rgba(58,48,34,.35); border: 1px solid var(--edge); border-radius: 7px;
  color: var(--gold); font-family: var(--font); font-size: 13px;
}
.знСтрока:hover { background: #4a3d26; border-color: var(--edge-hot); color: #fff3cf; }
/* Сказка без вопросов — видимая, но не нажимаемая: спрятать её значило бы
   ответить молчанием на вопрос «а эту проверяли?». */
.знСтрока.пусто { cursor: default; opacity: .55; }
.знСтрока.пусто:hover { background: rgba(58,48,34,.35); border-color: var(--edge); color: var(--gold); }
.знИмя { grid-column: 1; }
.знИтог { grid-column: 2; text-align: right; color: var(--dim); font-size: 11px; }
.знПолоса {
  grid-column: 1; height: 6px; border-radius: 4px;
  background: rgba(0,0,0,.35); border: 1px solid var(--edge); overflow: hidden;
}
.знПолоса i { display: block; height: 100%; background: var(--gold); }
.знСколько {
  grid-column: 2; text-align: right;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: #9c8f74;
}
.скзСписокПункт {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 10px 12px; margin-bottom: 8px; border-radius: 8px; cursor: pointer;
  background: rgba(58,48,34,.45); border: 1px solid var(--edge);
  font-family: var(--font);
}
.скзСписокПункт:last-child { margin-bottom: 0; }
.скзСписокПункт:hover { background: var(--glass-2); border-color: var(--edge-hot); }
.скзСписокПункт b { color: var(--gold); font-size: 14px; }
.скзСписокПункт span { color: var(--dim); font-size: 12px; }

/* Взрослый слой: разбор с источниками. Отделён рамкой, а не цветом фона —
   он идёт под сказкой, и заливка спорила бы с самим текстом за внимание. */
.скзВзрослый { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge); }
.взрЗачем { margin-bottom: 12px; color: var(--dim); font-size: 13px; font-style: italic; }
.взрПункт { margin-bottom: 14px; }
.взрПункт b { display: block; margin-bottom: 4px; color: var(--gold); font-size: 14px; }
.взрПункт > div { font-size: 14px; line-height: 1.55; }
/* Источник мельче текста нарочно: он нужен, чтобы проверить, а не чтобы
   читать подряд. Но он есть всегда — пункт без него не показывается вовсе. */
.взрИсточник { margin-top: 4px; color: var(--dim); font-size: 12px !important; }
#скзСлой.горит { background: #4a3d26; color: #fff3cf; border-color: var(--edge-hot); }
#скзСлой:disabled { opacity: .4; cursor: default; }
/* Задуманная сказка: видно, что она будет, и видно, что открыть её нельзя.
   Гасим целиком, а не только подпись — иначе пункт выглядит рабочим, и по
   нему будут жать до тех пор, пока не решат, что сайт сломан. */
.скзСписокПункт.вРазработке { opacity: .5; cursor: default; }
.скзСписокПункт.вРазработке:hover {
  background: rgba(58,48,34,.45); border-color: var(--edge);
}
.скзМетка {
  align-self: flex-start; margin-top: 2px; padding: 1px 6px;
  border: 1px solid var(--edge); border-radius: 4px;
  font-size: 11px !important; color: var(--dim);
}

#сказка {
  position: absolute; z-index: 580; left: 12px; top: var(--подШапкой); bottom: 12px;
  width: 520px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column;
  /* Плотнее прочих панелей нарочно: сквозь обычные девяносто процентов
     просвечивала карточка под ней, и строки двух текстов накладывались друг на
     друга. Читать сказку сквозь другой текст невозможно. */
  background: rgba(20, 17, 12, .985);
  border: 1px solid var(--edge-hot); border-radius: 10px;
}
#сказка[hidden] { display: none; }
/* Дорога: сказка сжимается в верхнюю половину экрана, карта с путём героя
   открывается под ней целиком — не нужно закрывать сказку, чтобы её увидеть. */
#сказка.дорога-режим {
  top: var(--подШапкой); left: 12px; right: 12px; bottom: auto;
  height: calc(50vh - var(--подШапкой)); width: auto; max-width: none;
}

.скзШапка {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid rgba(226,197,128,.18);
}
/* Имя сказки и «глава · концовок N из M» — одна строка, а не две: раньше
   заголовок панели занимал две строки высоты без нужды, хотя обе надписи
   короткие и рядом читаются так же ясно. Места на строку не всегда хватает —
   тогда длинный текст обрезаем многоточием, а не переносим на вторую строку. */
.скзТитул { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.скзТитул b {
  color: var(--gold); font-size: 15px; flex: 0 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.скзТитул span {
  color: var(--dim); font-size: 11px; font-family: var(--mono); flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.скзШапка button {
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); font-family: var(--font); font-size: 12px;
}
.скзШапка button:hover { color: var(--gold); border-color: var(--edge-hot); }
.скзШапка button.горит { background: #6d4b12; color: #fff3cf; border-color: var(--edge-hot); }

.скзПолотно { flex: 1; overflow-y: auto; padding: 14px 18px 18px; }

.скзГде { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
#скзМесто { color: var(--gold); font-size: 12px; font-family: var(--mono); }
#скзЧем { color: #8a7f68; font-size: 11px; line-height: 1.5; }
/* Вёрсты и адрес: «долго ли, коротко ли» числом и место, куда можно поехать. */
.скзВёрсты { color: #cbbf9f; font-size: 11px; font-family: var(--mono); margin-top: 2px; }
.скзАдрес { color: #9c8f74; font-size: 11px; line-height: 1.5; }
.скзВёрсты[hidden], .скзАдрес[hidden] { display: none; }

/* Иллюстрация главы: миниатюра в потоке текста, открывается в лайтбоксе. */
.скзКартинка {
  display: block; width: 100%; margin-bottom: 12px; padding: 0; border: none;
  background: none; cursor: zoom-in; text-align: left;
}
.скзКартинка[hidden] { display: none; }
.скзКартинка img {
  display: block; width: 100%; max-height: 280px; object-fit: contain;
  background: rgba(10, 9, 6, .35);
  border-radius: 8px; border: 1px solid var(--edge);
}
.скзКартинка span {
  display: block; margin-top: 4px; color: #8a7f68; font-size: 11px; font-style: italic;
}
/* В обычном виде картинка и так во всю ширину панели — звать некуда. */
.скзКартинкаЗов { display: none; }

/* Режим «Дорога»: панель занимает верхнюю половину экрана, и полноразмерная
   иллюстрация съедала её почти целиком — текст главы уходил под нижний край, а
   саму картинку в оставшейся полоске всё равно было не разглядеть. Сворачиваем
   её в строку-кнопку: миниатюра, зов и подпись. Полный размер — по нажатию, в
   лайтбоксе, как и раньше; смотреть его поверх половины экрана всё равно
   удобнее, чем втискивать в неё. */
/* В «Дороге» панель растянута во всю ширину экрана, и строка текста доходила до
   182 знаков на столе и 140 на планшете — на такой длине глаз теряет начало
   следующей строки. Держим колонку в книжной мерке: читают в 60–75 знаков.
   Карта под панелью при этом остаётся во всю ширину, ради чего режим и заведён.
   На телефоне правило ни на что не влияет — там и так 41 знак. */
#сказка.дорога-режим .скзПолотно > * { max-width: 68ch; }

#сказка.дорога-режим .скзКартинка {
  display: grid; grid-template-columns: 72px 1fr; align-items: center;
  column-gap: 10px; padding: 8px 10px;
  border: 1px solid var(--edge); border-radius: 8px;
  background: rgba(58, 48, 34, .35);
}
#сказка.дорога-режим .скзКартинка img {
  grid-row: 1 / 3; width: 72px; height: 48px; object-fit: cover;
  border-radius: 6px; max-height: none;
}
#сказка.дорога-режим .скзКартинкаЗов {
  display: block; margin: 0; color: var(--gold); font-size: 13px; font-style: normal;
}
#сказка.дорога-режим #скзКартинкаПодпись { margin: 0; }

/* Свёрнутую картинку легко принять за подпись под текстом. Короткий отклик на
   новой главе говорит, что там есть что посмотреть, — дважды и негромко, а не
   мигание без конца: оно бы спорило с самим чтением. */
@keyframes зовётКартинка {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 214, 138, 0); }
  35% { box-shadow: 0 0 0 3px rgba(240, 214, 138, .45); }
}
#сказка.дорога-режим .скзКартинка.зовёт { animation: зовётКартинка 1.1s ease-out 2; }
@media (prefers-reduced-motion: reduce) {
  #сказка.дорога-режим .скзКартинка.зовёт { animation: none; }
}
.скзЛайтбокс {
  position: fixed; z-index: 900; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 20px;
  background: rgba(8, 7, 5, .92);
}
.скзЛайтбокс[hidden] { display: none; }
.скзЛайтбокс img {
  max-width: min(90vw, 900px); max-height: 80vh; object-fit: contain;
  border-radius: 6px; border: 1px solid var(--edge-hot);
}
.скзЛайтбоксПодпись { color: #cbbf9f; font-size: 13px; font-style: italic; }
#скзЛайтбоксЗакрыть {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--edge-hot);
  color: var(--gold); font-family: var(--font); font-size: 14px;
}
#скзЛайтбоксЗакрыть:hover { color: #fff3cf; }

/* Верстовые столбы на карте: номер главы кружком на дороге Ивана. */
.верста span {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(18,16,12,.9); border: 1px solid var(--edge);
  color: var(--dim); font-family: var(--mono); font-size: 11px;
}
.верста span.тут { background: #6d4b12; border-color: var(--edge-hot); color: #fff3cf; }

/* Привалы: мелкие точки вдоль дороги на длинных перегонах — тут герой мог
   заночевать или перекусить, если идти от главы к главе слишком далеко
   за один день. Мельче и тише верстовых столбов — это не глава, а привал. */
.привал span {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(18,16,12,.85); border: 1px solid var(--edge);
}
.привал:hover span { background: #6d4b12; border-color: var(--edge-hot); }

/* Бегущие искры на дороге (t137): штрихи `dashArray` едут по пути героя —
   не мигание всей линии разом, а бег вдоль неё, как след. Только
   `stroke-dashoffset`: свойство недорогое для одного `<path>` (их на нить
   ровно один, см. `построитьДорогу` в map.js) и не трогает раскладку
   страницы, так что перелёт камеры этим не проседает. Шаг смещения равен
   сумме штриха и разрыва (4 + 12), иначе анимация будет дёргаться на стыке
   витка. */
@keyframes дорогаИскрыБег { to { stroke-dashoffset: -16; } }
.дорогаИскры { animation: дорогаИскрыБег 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .дорогаИскры { animation: none; }
}

/* Сам текст сказки — главное на странице, и набран он как в книге: колонка не
   во всю ширину, строка с воздухом, первая буква не жмётся к краю. */
.скзТекст { color: var(--text); font-size: 15px; line-height: 1.75; }
.скзТекст p { margin: 0 0 12px; }
.скзСобытие {
  margin: 16px 0 12px; padding: 12px 14px; border-radius: 8px;
  background: rgba(58,48,34,.5); border-left: 3px solid var(--edge-hot);
  color: #ffeec2; font-size: 14px; line-height: 1.6;
}
.скзСобытие p { margin: 0 0 8px; }
.скзСобытие p:last-child { margin: 0; }

.скзВыборы { display: flex; flex-direction: column; gap: 8px; }
.скзВыбор {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 11px 13px; border-radius: 8px; cursor: pointer;
  background: rgba(58,48,34,.45); border: 1px solid var(--edge);
  color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5;
}
.скзВыбор:hover:not(:disabled) { background: var(--glass-2); border-color: var(--edge-hot); }
.скзВыбор:disabled { cursor: default; }
.скзВыбор .буква {
  flex: 0 0 auto; width: 22px; height: 22px; line-height: 21px; text-align: center;
  border-radius: 50%; background: var(--edge); color: #12100c; font-weight: bold; font-size: 12px;
}
/* Дорога сказки подсвечивается только ПОСЛЕ ответа: подскажи раньше — и выбор
   перестанет быть выбором. */
.скзВыбор.сюжет:disabled { border-color: #a8e86a; background: rgba(168,232,106,.14); }
.скзВыбор.сюжет:disabled .буква { background: #a8e86a; }
.скзВыбор.выбран { border-width: 2px; }
.скзВыбор.тускло { opacity: .45; }

.скзРазбор {
  margin-top: 14px; padding: 12px 14px; border-radius: 8px;
  background: rgba(58,48,34,.45); color: var(--text); font-size: 14px; line-height: 1.65;
}
.скзРазбор.сюжет { border-left: 3px solid #a8e86a; }
.скзРазбор.мимо { border-left: 3px solid #e8a86a; }
.скзРазбор.конец { border-left: 3px solid var(--edge-hot); }
.скзРазбор .концовка { margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(226,197,128,.15); color: var(--gold); font-size: 13px; }

/* Котомка: что при тебе. Полоска, а не список: это память о выборах, а не
   инвентарь — считать в ней нечего. */
.скзКотомка { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.скзКотомка span {
  padding: 3px 8px; border-radius: 20px; font-size: 11px;
  background: rgba(58,48,34,.6); border: 1px solid var(--edge); color: var(--dim);
}
.скзКотомка[hidden] { display: none; }

/* Имя порока над последствием: ребёнок должен увидеть не «неверный ответ», а
   знакомое человеческое свойство — и то, куда оно приводит. */
.скзТекст .порок {
  display: inline-block; margin-bottom: 8px; padding: 2px 9px; border-radius: 20px;
  background: #6d4b12; color: #ffe6a6; font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
}
.скзРазбор p { margin: 0 0 10px; }
.скзРазбор .почему, .скзРазбор .урок, .скзРазбор .назад {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(226,197,128,.15);
  font-size: 13px; color: #e6dcc2;
}
.скзРазбор .почему b, .скзРазбор .урок b { color: var(--gold); }
.скзРазбор .назад { color: #8a7f68; font-style: italic; }

.скзНиз { display: flex; justify-content: flex-end; margin-top: 14px; }
.скзНиз button {
  padding: 10px 18px; border-radius: 7px; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--edge-hot);
  color: var(--gold); font-family: var(--font); font-size: 14px;
}
.скзНиз button:hover { background: #4a3d26; color: #fff3cf; }

/* Пока сказка открыта, кнопки зума и легенда уезжают вправо: панель занимает
   левый край целиком и накрывала их собой. Прятать нельзя — карта в это время
   живая, она летает по главам, и человек должен уметь её подвинуть. */
body.сказка-открыта .leaflet-bottom.leaflet-left { left: auto; right: 0; }
body.сказка-открыта #нижЛев { left: auto; right: 12px; }

/* Режим чтения: карта уходит, текст расходится на всю ширину и растёт.
   Панели, кнопки и легенда прячутся — на странице остаётся сказка. */
body.чтение #сказка {
  left: 0; right: 0; top: 0; bottom: 0; width: auto;
  /* Ограничение ширины снимаем нарочно: в обычном виде панель не должна
     закрывать карту целиком, а в режиме чтения — обязана. Без этой строки
     справа оставалась полоска карты, и она мешала ровно тем, что мигала. */
  max-width: none;
  /* На телефоне у панели снизу-листом есть свой max-height (68–76vh) — без
     сброса книжка на весь экран не растягивалась, а сказка обрывалась на
     середине, и снизу была видна карта: читать было нечем. */
  max-height: none;
  border: 0; border-radius: 0; background: #14110c;
}
body.чтение #шапка, body.чтение #нижЛев, body.чтение #карточка,
body.чтение #викторина, body.чтение #знание,
body.чтение .leaflet-control-container { display: none; }
body.чтение .скзПолотно { padding: 24px max(24px, calc((100vw - 760px) / 2)); }
body.чтение .скзТекст { font-size: 19px; line-height: 1.85; }
body.чтение .скзСобытие, body.чтение .скзВыбор, body.чтение .скзРазбор { font-size: 16px; }
body.чтение #map { filter: blur(0); }

@media (max-width: 720px) {
  #сказка { left: 8px; right: 8px; width: auto; top: 8px; bottom: 8px; }
  .скзТекст { font-size: 16px; }
  body.чтение .скзПолотно { padding: 18px; }
  body.чтение .скзТекст { font-size: 18px; }

  /* Заголовок сказки и пять кнопок в одну строку на телефоне не помещались:
     flexbox сжимал `.скзТитул` до нескольких пикселей, и длинное название
     переносилось по буквам. Переносим заголовок на свою строку сверху — там
     уже есть место, — а кнопки уходят под него единой строкой поуже. */
  .скзШапка { flex-wrap: wrap; padding: 8px 10px; gap: 4px 6px; }
  .скзТитул { flex: 1 1 100%; gap: 6px; }
  .скзТитул b { font-size: 14px; line-height: 1.25; }
  .скзТитул span { font-size: 10px; }
  .скзШапка button { padding: 5px 8px; font-size: 11px; }
}

/* ─── Легенда и фильтр жанра ──────────────────────────────────────────────
   Обёртка `#нижЛев` держит позицию в углу (`bottom: 12px` — фиксирован её
   нижний край, а не верхний, поэтому блок растёт вверх, когда в нём
   появляется второй элемент) и ставит жанр столбцом над легендой округов:
   в разметке жанр идёт первым, обычная колонка кладёт его сверху, а легенду
   — снизу, к зафиксированному краю. Сама легенда/фильтр — уже не
   позиционированные блоки, просто карточки друг над другом. */

#нижЛев {
  position: absolute; z-index: 400; left: 12px; bottom: 12px;
  display: flex; flex-direction: column; gap: 6px; max-width: 340px;
}
#легенда, #жанрФильтр, #геройФильтр {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  padding: 9px 12px; border-radius: 9px;
  background: var(--glass); border: 1px solid var(--edge);
  font-size: 11px; color: var(--dim);
}
#жанрФильтр:empty { display: none; }
#легенда span, #жанрФильтр span { display: flex; align-items: center; gap: 5px; cursor: pointer; }
#легенда i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
#легенда span.выкл { opacity: .35; }
/* Жанр — «показать только этот», а не «снять один из многих», поэтому
   подсветка не тусклая (как у выключенного округа), а яркая: выбранное
   видно, а не то, что убрано. */
#жанрФильтр span.выбран { color: var(--gold); font-weight: 600; }

/* Фильтр по герою реестра: не переключатель, как жанр, а разовое сужение —
   поэтому вместо строки в общем списке свой чип с явной кнопкой сброса. */
#геройФильтр[hidden] { display: none; }
#геройФильтр { align-items: center; color: var(--gold); }
#геройФильтр span { font-weight: 600; }
#геройФильтр button {
  padding: 3px 8px; border-radius: 6px; cursor: pointer;
  background: none; border: 1px dashed var(--edge); color: var(--dim);
  font-family: var(--font); font-size: 11px;
}
#геройФильтр button:hover { color: var(--gold); border-color: var(--edge-hot); }

/* ─── Планшет и телефон: шапка в несколько рядов ────────────────────────── */

/* Порог шире телефонного: на планшете (портретный iPad и подобные, до 1024px)
   в одну строку с полем поиска не помещались название и пять кнопок сразу —
   flexbox сжимал #поиск до автоматического минимума поля ввода, и оно
   выглядело узкой кнопкой, а не полем для текста. Тот же трёхрядный порядок,
   что и на телефоне, снимает сжатие: заголовок, поиск и кнопки — каждый в
   своей полноширинной строке. */
@media (max-width: 1024px) {
  #шапка { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .титул { order: 1; flex: 1 1 100%; }
  .титул b { font-size: 14px; }
  /* Подсказки роняем под всю шапку, а не под поле ввода. Пока `.поиск`
     позиционирован, выпадашка отсчитывается от него — а в три ряда это ровно
     то место, где стоит полоса кнопок. Подложка у подсказок полупрозрачная,
     кнопки сквозь неё видны, и палец честно целится в «Сказки», а нажатие
     достаётся строке подсказки: список сказок «не открывается». `position:
     static` отдаёт отсчёт шапке (она позиционирована), и список падает под
     кнопки, на карту, где ничего не загораживает. */
  .поиск { order: 2; flex: 1 1 100%; max-width: none; position: static; }
  #поиск { padding: 7px 10px; font-size: 13px; }
  #подсказки {
    left: 10px; right: 10px;
    /* Непрозрачно: здесь список висит над картой, а не над тёмной панелью, и
       сквозь стекло его тяжело читать. */
    background: #14110c; box-shadow: 0 12px 26px rgba(0, 0, 0, .5);
  }
  /* Кнопки не переносятся, а листаются вбок: перенос растил шапку вниз и
     закрывал ею карту, ради которой сюда и пришли. */
  .кнопки {
    order: 3; flex: 1 1 100%; gap: 6px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .кнопки::-webkit-scrollbar { display: none; }
  .кнопки > * { flex: 0 0 auto; padding: 7px 11px; font-size: 13px; }
  /* Полоса не влезает: на телефоне ей нужно 568px, а видно 370. Раз она
     листается, важно не сколько кнопок влезло, а какие именно, — видны первые.
     Прежний порядок оставлял за краем «Скрыть панели», ⛶ и «Войти в игру», то
     есть самый громкий призыв страницы: узнать о нём можно было, только
     случайно потянув полосу вбок. Вперёд ставим то, зачем сюда приходят; учётка
     и правка карты уезжают вправо — они нужны редко и тем, кто уже знает, что
     они есть. */
  #кнопкаСказки { order: 1; }
  /* Тот же номер, что у викторины: при равенстве флексбокс держит порядок
     разметки, а там «Маршруты» стоят сразу за «Сказками» — рядом с тем, чему
     они пара. Ничьи здесь уже в ходу (см. `#играть` и `#дорогаКнопка`). */
  #кнопкаМаршруты { order: 2; }
  #кнопкаВикторины { order: 2; }
  #играть { order: 3; }
  #дорогаКнопка { order: 3; }
  #поддержатьКнопка { order: 4; }
  #экранКнопка { order: 5; }
  #панелиКнопка { order: 6; }
  #войти, #ктоЯ { order: 7; }
  #правкаКнопка { order: 8; }
}

/* Низкий экран — это телефон, повёрнутый набок. Ширины там хватает, а высоты
   нет: шапка в три ряда занимала треть экрана (126px из 390). Сжимаем её —
   подзаголовок убираем совсем, отступы и шрифт ужимаем: карте достаётся около
   сорока пикселей, и это заметно, когда всего их 390. */
@media (max-height: 500px) {
  #шапка { padding: 4px 10px; gap: 4px; }
  .титул span { display: none; }
  #поиск { padding: 5px 10px; font-size: 12px; }
  .кнопки > * { padding: 5px 10px; font-size: 12px; }
  /* Книжке здесь нужна доля больше половины: при высоте экрана 390 половина —
     это 195 точек, из которых шапка панели и строка места съедают почти всё. */
  #сказка.дорога-режим { height: calc(70vh - var(--подШапкой)); }
}

/* ─── Телефон ────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Тесная трёхрядная шапка уступает место нижней навигации (t138): в шапке
     остаются заголовок и поиск, пять вкладок — «Карта», «Сказки», «Маршруты»,
     «Викторина», «Профиль» — переезжают в свою полосу внизу. Сама полоса
     кнопок шапки (`.кнопки`) через неё не листается больше — прятать нечего,
     все её кнопки либо стали вкладкой, либо переехали в профиль (t138). */
  .кнопки { display: none; }
  /* Полоса низкая нарочно: цель задачи — отдать карте больше площади, чем
     занимала трёхрядная шапка (126px), а не выдать взамен такую же по цене
     нижнюю. 46px высоты хватает пяти иконкам с подписью. */
  :root { --нижНав: 46px; }
  #нижНав {
    display: flex; position: fixed; z-index: 610; left: 0; right: 0; bottom: 0;
    padding: 0 2px;
    /* Высота — именно содержимое; полосу жестов снизу добавляем отдельным
       padding-bottom, а не считаем внутрь высоты (см. `box-sizing: border-box`
       вверху файла): иначе на телефоне с вырезом кнопки сжались бы вместе с
       самой полосой жестов, а не остались над ней той же высоты. */
    height: calc(var(--нижНав) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: linear-gradient(0deg, rgba(18,16,12,.97) 0%, rgba(18,16,12,.94) 75%, rgba(18,16,12,.88) 100%);
    border-top: 1px solid var(--edge);
    backdrop-filter: blur(2px);
  }
  #нижНав button {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px;
    padding: 2px; background: none; border: 0; border-radius: 8px;
    color: var(--dim); font-family: var(--font); font-size: 9px; cursor: pointer;
  }
  #нижНав button:active { color: var(--gold); background: var(--glass-2); }
  .навЗначок { font-size: 16px; line-height: 1; }
  /* На весь экран (реальный fullscreen API) и в режиме чтения нижней
     навигации на карте делать нечего — обе прячут собой всё, что не сама
     сказка или не сама карта. */
  body.чтение #нижНав { display: none; }

  /* Шапка теснее трёхрядной: заголовок и поиск занимают ровно по одной
     строке каждый, а не три с кнопками вперемешку. Подзаголовок-счётчик
     («…», число сказок и точек) убираем — это украшение, а не действие, и
     как раз он растягивал первую строку на две. */
  #шапка { padding: 6px 10px; gap: 4px; }
  .титул span { display: none; }
  #поиск { padding: 6px 10px; font-size: 13px; }

  /* Двойники в профиле (t138) — видны только здесь, на столе те же действия
     стоят в шапке. `:not([hidden])` у правки — чтобы ширина не отменяла
     собственный запрет на неадминов, который ставит `обновитьШапку()`. */
  .рядКнопок.профильЭкран { display: flex; }
  #профильПравка:not([hidden]) { display: inline-block; }
  #профильПоддержать { display: inline-block; }

  /* Панели снизу листом: боковая панель на телефоне съедает всю карту. */
  #викторина, #вход, #профиль, #правка, #оПроектеОкно, #сказка, #скзСписок,
  #знание, #поддержка, #рядом, #мршСписок, #дорога, #отзыв {
    left: 8px; right: 8px; width: auto;
    /* Снизу — с запасом на полосу жестов телефона и на нижнюю навигацию: без
       первого кнопки «Дальше» и «Назад к развилке» ложились прямо под
       системную полосу, без второго (t138) панель садилась под пятью
       вкладками и нижняя её часть была не нажать. */
    top: auto; bottom: calc(var(--нижНав) + 8px + env(safe-area-inset-bottom, 0px)); max-height: 68vh; max-width: none;
  }
  #сказка { max-height: 76vh; }

  /* Карточка точки — своя шторка снизу (t126), а не лист вместе с остальными
     панелями строкой выше. Раньше она открывалась сразу на 68vh и закрывала
     собой точку, к которой только что прилетела карта: разбор был виден, а
     то, о чём он рассказывает, — нет. Теперь по умолчанию видна только узкая
     полоса — имя, герой и «Читать сказку», — а точка на карте остаётся под
     ней. Порядок и высоты состояний считает JS (`map.js`, `открыть()` и
     обработчики `#карточкаРучка`), здесь только сама механика шторки. */
  #карточка {
    left: 8px; right: 8px; width: auto; max-width: none;
    top: auto; bottom: calc(var(--нижНав) + 8px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
    padding: 3px 16px 8px;
    transition: max-height .22s ease-out;
  }
  /* Свёрнутое состояние поднимает наверх ровно три вещи — имя, герой и кнопку
     чтения сказки, — остальное (округ, адрес, иллюстрация, разбор, связи)
     уходит вниз и открывается прокруткой уже в развёрнутом виде. */
  /* `flex-shrink: 0` держит поля целиком: без него flex сминал h1 и другие
     поля с `overflow: hidden` в нулевую высоту, лишь бы всё уместилось в
     свёрнутые 96px, — заголовок пропадал вовсе. Пусть лучше остальное честно
     уедет за нижний край (там его и накрывает `overflow: hidden` контейнера
     в свёрнутом виде и прокрутка — в развёрнутом), чем взятые в шапку поля
     схлопнутся сами. */
  #карточка > * { order: 9; flex-shrink: 0; }
  #карточка > #карточкаРучка { order: 0; }
  #карточка > h1#название { order: 1; }
  #карточка > #полеГерой { order: 2; }
  #карточка > #карточкаСказка { order: 3; }
  #карточка > h1#название,
  #карточка > #полеГерой .имяполя,
  #карточка > #полеГерой > div:last-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #карточка > h1#название { margin: 1px 0 0; font-size: 15px; line-height: 1.25; }
  /* Герой в свёрнутом виде — подпись и значение в одну строку, а не в две:
     двухэтажное поле само по себе выше половины отведённых под шторку 96px. */
  #карточка > #полеГерой {
    display: flex; align-items: baseline; gap: 5px;
    margin: 3px 0 4px;
  }
  #карточка > #полеГерой .имяполя { margin: 0; font-size: 9px; flex: 0 0 auto; }
  #карточка > #полеГерой > div:last-child { font-size: 13px; }
  #карточка > #карточкаСказка { margin: 0; padding: 7px 10px; font-size: 12px; }
  #карточкаРучка {
    display: flex; align-items: center; justify-content: center;
    align-self: center;
    width: 100%; height: 16px; margin: 0; padding: 0;
    background: none; border: 0; color: var(--dim); font-size: 10px; line-height: 1;
    cursor: grab; touch-action: none;
  }
  #карточкаРучка:active { cursor: grabbing; color: var(--gold); }
  /* Свёрнута — видна только полоса-ручка сверху и три поднятых поля; высота
     подобрана по требованию задачи (~96px) и проверена на экране 390×844. */
  #карточка:not(.развёрнута) { max-height: calc(98px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
  /* Развёрнута — прежние 68vh, полный разбор с адресом, прокрутка внутри. */
  #карточка.развёрнута { max-height: 68vh; overflow-y: auto; }
  /* Снимок места на телефоне высотой в 280px (мерка стола) съедал бы половину
     и без того тесной шторки — до разбора пришлось бы долистывать. Отсюда
     потолок в 40% высоты панели: 40% от 68vh = 27.2vh. */
  #точкаКартинкаМини { max-height: 27.2vh; }
  /* «Дорога» на телефоне отдаёт книжке больше половины. Половина рассчитана на
     стол, где под шапку уходит 56 точек; здесь шапка в три ряда съедает 126, и
     панель, честно вставшая под неё, оставляла на текст пять строк — режим
     превращался в свою вывеску. Карте внизу остаётся около трети экрана: этого
     довольно, чтобы видеть, куда ведёт дорога. */
  #сказка.дорога-режим { height: calc(62vh - var(--подШапкой) - var(--нижНав)); }
  #нижЛев { display: none; }
  /* Легенды (и фильтра жанра при ней) на телефоне нет — кнопкам зума не над
     чем подниматься; над нижней навигацией (t138) — есть. */
  .leaflet-bottom.leaflet-left { margin-bottom: calc(var(--нижНав) + 8px); }
  /* Кружок «ⓘ» — свой control в правом нижнем углу, не связанный с зумом:
     без поправки он ложился поверх подписи «Профиль» на пустой карте
     (нижняя навигация его не перекрывает и не подвигает сама). */
  .о-карте { margin-bottom: calc(var(--нижНав) + 8px) !important; }
  /* Меню правой кнопки на телефоне — по нижнему краю: у пальца нет курсора,
     и всплывающее у точки касания меню наполовину уезжает за экран. */
  #менюКарты { left: 8px !important; right: 8px; top: auto !important; bottom: calc(var(--нижНав) + 64px); }
  /* Пока читают сказку, кнопки карты садятся прямо на текст: панель занимает
     весь низ экрана. Зум пальцем щипком никуда не девается. */
  body.сказка-открыта .leaflet-control-container { display: none; }
  /* То же и со всякой другой панелью снизу: карточка точки занимает две трети
     экрана, и кнопки зума ложились прямо поверх её текста — проверено
     пересечением прямоугольников, они действительно накладывались. Убираем их
     на то время, пока панель открыта; щипок пальцем остаётся. */
  body:has(#карточка:not([hidden])) .leaflet-control-container,
  body:has(#викторина:not([hidden])) .leaflet-control-container,
  body:has(#скзСписок:not([hidden])) .leaflet-control-container,
  body:has(#профиль:not([hidden])) .leaflet-control-container,
  body:has(#вход:not([hidden])) .leaflet-control-container,
  body:has(#поддержка:not([hidden])) .leaflet-control-container,
  body:has(#рядом:not([hidden])) .leaflet-control-container,
  body:has(#мршСписок:not([hidden])) .leaflet-control-container,
  body:has(#дорога:not([hidden])) .leaflet-control-container { display: none; }
}

/* ─── Палец крупнее курсора ──────────────────────────────────────────────── */
/*
   Крестики закрытия — 26×26 и 28×28: попасть по ним пальцем трудно, а промах
   закрывает не панель, а что-нибудь под ней. Общая мерка для сенсорных
   экранов — 44 точки. Растим их и кнопки зума Leaflet (он рисует их по 26
   точек, под курсор). Кнопки шапки оставляем как есть: они 36 точек в высоту
   при большой ширине, а поднимать их до 44 значит растить саму шапку, которой
   на телефоне и без того отдано 15% экрана.
*/
@media (hover: none), (pointer: coarse) {
  #закрыть, #закрытьВикторину, #закрытьОПроекте, #закрытьСкзСписок,
  #закрытьВход, #закрытьПрофиль, #закрытьПоддержку, #закрытьРядом, #закрытьДорогу, #скзЛайтбоксЗакрыть {
    width: 44px; height: 44px; font-size: 16px;
  }
  .leaflet-touch .leaflet-control-zoom a, .leaflet-control-zoom a, .гдеЯКнопка a {
    width: 44px; height: 44px; line-height: 44px; font-size: 20px;
  }
}

/* ─── Туристический маршрут ──────────────────────────────────────────────── */
/*
   Панель стоит там же, где сказка, и такой же ширины: это продолжение чтения,
   а не отдельный раздел. Открытая поверх сказки, она её и перекрывает — читать
   и собираться в дорогу одновременно всё равно нельзя.
*/
#маршрут {
  position: absolute; z-index: 585; left: 12px; top: var(--подШапкой); bottom: 12px;
  width: 520px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column;
  background: rgba(20, 17, 12, .985);
  border: 1px solid var(--edge-hot); border-radius: 10px;
}
#маршрут[hidden] { display: none; }
.мршШапка {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid rgba(226,197,128,.18);
}
.мршТитул { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.мршТитул b { color: var(--gold); font-size: 15px; }
.мршТитул span { color: var(--dim); font-size: 11px; font-family: var(--mono); }
#мршЗакрыть {
  width: 28px; height: 28px; line-height: 1; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); border-radius: 6px; cursor: pointer;
}
#мршЗакрыть:hover { color: var(--gold); border-color: var(--edge-hot); }

.мршПолотно { flex: 1; overflow-y: auto; padding: 14px 18px 18px; }
.мршГде {
  color: var(--gold); font-family: var(--mono); font-size: 12px; margin-bottom: 10px;
}
.мршЗачем { color: var(--text); font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
.мршЗачем[hidden], .мршБлок[hidden] { display: none; }
.мршЗаголовок {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: #9c8f74; margin: 14px 0 6px;
}
#мршДобраться { margin: 0; padding-left: 18px; color: var(--dim); font-size: 13px; line-height: 1.6; }

/* Остановка — кнопка, а не строка: нажатие уводит карту к ней. */
.мршОстановка {
  display: block; width: 100%; text-align: left;
  margin-bottom: 8px; padding: 10px 12px; border-radius: 8px; cursor: pointer;
  background: rgba(58,48,34,.35); border: 1px solid var(--edge);
  color: var(--text); font-family: var(--font);
}
.мршОстановка:hover { border-color: var(--edge-hot); background: var(--glass-2); }
.мршОстановка.тут { border-color: var(--edge-hot); background: #4a3d26; }
.мршВерх { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.мршВерх b { color: var(--gold); font-size: 14px; }
.мршЗначок { font-size: 15px; }
/* Слово рядом со значком: значок один читает как «музей», другой как
   «смотровая», и без подписи список превращается в ребус. */
.мршВид {
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: #8a7f68;
}
.мршЧто { font-size: 13px; line-height: 1.5; }
/* Сказочная связь — то, ради чего сюда и едут: выделяем её цветом, а не прячем
   в общий текст. */
.мршСказка {
  margin-top: 6px; padding-left: 9px; border-left: 2px solid var(--edge-hot);
  color: #ffeec2; font-size: 13px; line-height: 1.5; font-style: italic;
}
.мршДело { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--dim); }
.мршДело b { color: #9c8f74; font-weight: normal; }
.мршДело a { color: var(--gold); }
.мршОсторожно {
  margin-top: 6px; color: #ffcfc8; font-size: 12px; line-height: 1.5;
}
.мршПроверено {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(226,197,128,.15);
  color: #8a7f68; font-size: 11px; line-height: 1.6;
}
.мршИсточники { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.мршИсточники a { color: var(--dim); }
.мршИсточники a:hover { color: var(--gold); }

/* Метка остановки на карте: значок вида в кружке, крупнее точек сказок —
   пока маршрут открыт, он главный на экране. */
.мршМетка { background: none; border: 0; }
.мршМетка span {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: #14110c; border: 2px solid var(--edge-hot);
  font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

#карточкаМаршрут {
  display: block; width: 100%; margin: 0 0 16px; padding: 10px 12px;
  border-radius: 7px; cursor: pointer;
  background: rgba(58,48,34,.45); border: 1px solid var(--edge);
  color: var(--gold); font-family: var(--font); font-size: 13px;
}
#карточкаМаршрут:hover { background: #4a3d26; color: #fff3cf; border-color: var(--edge-hot); }
#карточкаМаршрут[hidden], #скзМаршрут[hidden] { display: none; }

/* Хождение — тот же вид кнопки, что у маршрута: обе зовут показать что-то по
   этой точке, а не открывают отдельную большую панель. */
#карточкаХождение {
  display: block; width: 100%; margin: 0 0 16px; padding: 10px 12px;
  border-radius: 7px; cursor: pointer;
  background: rgba(58,48,34,.45); border: 1px solid var(--edge);
  color: var(--gold); font-family: var(--font); font-size: 13px;
}
#карточкаХождение:hover { background: #4a3d26; color: #fff3cf; border-color: var(--edge-hot); }
#карточкаХождение[hidden] { display: none; }

@media (max-width: 720px) {
  #маршрут {
    left: 8px; right: 8px; width: auto;
    top: auto; bottom: calc(var(--нижНав) + 8px + env(safe-area-inset-bottom, 0px));
    max-height: 76vh; max-width: none;
  }
}
body.панели-скрыты #маршрут { display: none !important; }

/* ─── Палец вместо мыши ──────────────────────────────────────────────────── */
/*
   На сенсорном экране наведения не бывает, а отвечал на прикосновение здесь
   только `:hover`. Выходило, что нажатие не отзывается ничем: человек не
   знает, промахнулся он или кнопка сломана, — и жмёт ещё раз, уже сердито.
   Поэтому у нажатия есть свой вид, и описан он сразу для всех устройств:
   мышь тоже нажимает, и отклик ей не мешает.
*/
#кнопкаСказки, #кнопкаМаршруты, #кнопкаВикторины, #играть, #войти, #панелиКнопка, #экранКнопка, #правкаКнопка,
#продолжитьЧтение, .строчкаКнопка,
#карточкаСказка, #закрыть, #закрытьСкзСписок, #закрытьВикторину,
#закрытьОПроекте, #закрытьВход, #закрытьПрофиль, .скзШапка button,
.вариант, .скзСписокПункт, #подсказки .строка, #легенда span, #жанрФильтр span, .связь, .связьЕщё,
.знСтрока, #знаниеКнопка, #закрытьЗнание, .реестрФильтрКнопка, #геройФильтр button {
  /* Своя подсветка вместо серого прямоугольника, который телефон рисует сам:
     о наших скруглениях он не знает и мажет углы. */
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s ease-out, filter .06s ease-out, background-color .12s ease-out;
}
#кнопкаСказки:active, #кнопкаМаршруты:active, #кнопкаВикторины:active, #играть:active, #войти:active,
#панелиКнопка:active, #экранКнопка:active, #правкаКнопка:active, #карточкаСказка:active,
#продолжитьЧтение:active, .строчкаКнопка:active,
#закрыть:active, #закрытьСкзСписок:active, #закрытьВикторину:active,
#закрытьОПроекте:active, #закрытьВход:active, #закрытьПрофиль:active,
.скзШапка button:active, .вариант:not(:disabled):active,
.скзСписокПункт:not(.вРазработке):active, .реестрФильтрКнопка:active, #геройФильтр button:active {
  transform: scale(.97);
  filter: brightness(1.35);
}
/* Строки списков не жмутся, а подсвечиваются: сжимать строку во всю ширину
   панели значит дёргать всю панель разом. */
#подсказки .строка:active, #легенда span:active, #жанрФильтр span:active,
.связь:active, .связьЕщё:active, .знСтрока:not(.пусто):active { background: var(--glass-2); }

/* Подпись под снимком места. Вынесена из кнопки, потому что у снимков под
   CC BY-SA она несёт ссылку на автора, а ссылка внутри кнопки — и негодная
   разметка, и ловушка для пальца. Выглядит так же, как подпись у листа
   сказки: та же приглушённая курсивная строка. */
.точкаПодпись {
  display: block; margin: -8px 0 12px; color: #8a7f68; font-size: 11px; font-style: italic;
}
.точкаПодпись[hidden] { display: none; }
.точкаПодпись a { color: #8a7f68; text-decoration: underline dotted; }
.точкаПодпись a:hover { color: #cbbf9f; }

/* ─── Поддержка проекта ──────────────────────────────────────────────────── */
/*
   Панель стоит там же, где вход и профиль: это тоже «про человека», а не про
   карту. Кнопка в шапке — золотой рамкой, как «Продолжить чтение»: она не
   главный призыв страницы (главный — «Сказки» и «Войти в игру»), но и не
   служебная, как «Скрыть панели».
*/
#поддержка {
  position: absolute; z-index: 560; top: var(--подШапкой); right: 12px;
  width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 16px 18px 18px;
  background: var(--glass); border: 1px solid var(--edge-hot); border-radius: 10px;
}
#поддержка[hidden] { display: none; }
#поддержка h2 { margin: 6px 0 12px; font-size: 18px; color: var(--gold); }
#поддержка label { display: block; margin: 10px 0 0; color: var(--dim); font-size: 12px; }
#поддержка input {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; box-sizing: border-box;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--edge); border-radius: 6px;
  color: var(--text); font-family: var(--font); font-size: 14px;
}
#поддержка input:focus { border-color: var(--edge-hot); outline: none; }
#поддержкаСпасибо.спасибо { color: var(--gold); border: 1px solid var(--edge-hot); border-radius: 8px; padding: 10px 12px; }
#поддержатьКнопка {
  padding: 9px 14px; border-radius: 7px; white-space: nowrap; cursor: pointer;
  background: var(--glass); border: 1px solid var(--edge-hot);
  color: var(--gold); font-family: var(--font); font-size: 14px;
}
#поддержатьКнопка:hover { background: var(--glass-2); }
/* Суммы — одной строкой из «монет»; выбранная горит, как кнопки шапки. */
.суммы { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.суммы button {
  padding: 7px 12px; border-radius: 20px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); font-family: var(--font); font-size: 13px;
}
.суммы button:hover { color: var(--gold); border-color: var(--edge-hot); }
.суммы button.горит { background: #6d4b12; color: #fff3cf; border-color: var(--edge-hot); }
#поддержка .суммы input { width: 90px; margin: 0; padding: 6px 10px; border-radius: 20px; font-size: 13px; }
#поддержкаВесть { margin-top: 10px; color: #cbbf9f; font-size: 12px; line-height: 1.5; min-height: 16px; }
#поддержкаВесть.беда { color: #ff9c8c; }
#оПоддержать { margin-left: 4px; }

/* Полоса кнопок в шапке телефона листается вбок, но края об этом не говорили:
   человек видел ровно столько кнопок, сколько влезло, и не знал, что есть ещё.
   Пока справа что-то скрыто (класс ставит map.js по scrollLeft), правый край
   полосы растворяется — это и есть подсказка «потяните». */
.кнопки.естьДальше {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

/* Панель поддержки описана ниже блока «Телефон», и её стольные `top` и
   `max-height` перебивали телефонные: панель растягивалась от шапки до низа
   с пустотой внутри. Возвращаем телефону его правила. */
@media (max-width: 720px) {
  #поддержка { top: auto; max-height: 68vh; }
}

/* ─── Где я и что рядом ──────────────────────────────────────────────────── */
/*
   Панель стоит слева, где сказка и маршрут: это про дорогу, а не про учётку.
   Уже сказки — список коротких строк, широкая панель тут ни к чему.
*/
/* Список маршрутов живёт по тем же правилам, что «Что рядом»: это две панели
   об одном — куда отсюда поехать, — и разная вёрстка у них означала бы разный
   разговор об одном и том же. */
#рядом, #мршСписок {
  position: absolute; z-index: 570; top: var(--подШапкой); left: 12px;
  width: 380px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 16px 18px 18px;
  /* Плотный фон, как у ленты и сказки: на телефоне список ближайших мест
     ложится поверх карточки точки, и сквозь стекло они читались вместе. */
  background: rgba(20, 17, 12, .985); border: 1px solid var(--edge-hot); border-radius: 10px;
}
/* Список стоит выше открытой сказки (580), как и сама панель маршрута (585):
   его зовут в том числе из шапки сказки, а под ней он оказывался невидимым —
   человек жал «Маршруты» и не видел ничего. Закрыл список — сказка снова тут,
   на своей главе; ровно так же ведёт себя и панель маршрута. */
#мршСписок { z-index: 585; }
#рядом[hidden], #мршСписок[hidden] { display: none; }
#рядом h2, #мршСписок h2 { margin: 6px 0 10px; font-size: 17px; color: var(--gold); line-height: 1.25; }
#рядом .рядКнопок, #мршСписок .рядКнопок { margin: 0 0 12px; }
#рядомВесть.беда, #мршСпВесть.беда { color: #ff9c8c; }
#закрытьРядом, #мршСпЗакрыть {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--edge); color: var(--dim);
}
#закрытьРядом:hover, #мршСпЗакрыть:hover { color: var(--gold); border-color: var(--edge-hot); }
/* Кнопка ⌖ под зумом — той же полосой и тем же размером, что кнопки зума. */
.гдеЯКнопка { margin-top: 6px !important; }
.гдеЯКнопка a { font-size: 20px; line-height: 26px; }
/* Своя точка пульсирует: одна золотая среди пятисот цветных иначе теряется. */
.гдеЯ { animation: гдеЯПульс 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes гдеЯПульс { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .гдеЯ { animation: none; } }
@media (max-width: 720px) {
  #рядом, #мршСписок, #дорога { top: auto; max-height: 68vh; }
}

/* ─── Печати путешественника ─────────────────────────────────────────────── */
#полеЯЗдесь { margin-top: 4px; }
#яЗдесь { margin-bottom: 4px; }
#яЗдесь.есть { color: var(--gold); border-color: var(--edge-hot); background: rgba(58,48,34,.35); }
#яЗдесь:disabled { opacity: .6; cursor: wait; }
#яЗдесьВесть.беда { color: #ff9c8c; }
#профильПечати { margin-bottom: 12px; }
#профильПечати .печать { display: block; width: 100%; text-align: left; margin-bottom: 6px; }
#профильПечати .печать b { color: var(--gold); font-weight: normal; }

/* ─── Моя дорога ─────────────────────────────────────────────────────────── */
/*
   Панель справа, как профиль: это тоже про человека, а не про карту. Шире
   профиля (420 против 340) — в ней лента строк «когда и что», и на 340 точках
   дата переносилась бы на вторую строку у каждой записи.
*/
#дорога {
  position: absolute; z-index: 565; top: var(--подШапкой); right: 12px;
  width: 420px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 16px 18px 18px;
  /* Плотнее прочих панелей нарочно — по той же причине, что и у сказки: на
     телефоне панели ложатся одна на другую внизу экрана, и сквозь обычные
     девяносто процентов читалась карточка точки под лентой. Два текста
     внахлёст не читаются ни один. */
  background: rgba(20, 17, 12, .985); border: 1px solid var(--edge-hot); border-radius: 10px;
}
#дорога[hidden] { display: none; }
#дорога h2 { margin: 6px 0 12px; font-size: 18px; color: var(--gold); }
#закрытьДорогу {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  background: var(--glass-2); border: 1px solid var(--edge); color: var(--dim);
}
#закрытьДорогу:hover { color: var(--gold); border-color: var(--edge-hot); }
#дорогаСколько { color: var(--dim); font-family: var(--mono); font-size: 11px; }
.дорСтрока { color: var(--text); font-size: 13px; line-height: 1.7; }
.дорСтрока b { color: var(--gold); }
#дорогаПродолжить { margin: 12px 0 4px; }
#дорогаПродолжить .строчкаКнопка { display: block; width: 100%; text-align: left; }
/* Запись ленты: значок, текст, дата. Дата — справа и тише текста: она нужна,
   чтобы отличить сегодняшнее от прошлогоднего, а не чтобы её читали. */
.дорЗапись {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid rgba(226, 197, 128, .1);
  color: var(--text); font-size: 13px; line-height: 1.4;
}
.дорЗапись:last-child { border-bottom: 0; }
.дорЗапись.ведёт { cursor: pointer; }
.дорЗапись.ведёт:hover { color: var(--gold); }
.дорЗначок { font-size: 13px; }
.дорКогда { color: var(--dim); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
#дорогаКнопка {
  padding: 9px 14px; border-radius: 7px; white-space: nowrap; cursor: pointer;
  background: var(--glass); border: 1px solid var(--edge);
  color: var(--gold); font-family: var(--font); font-size: 14px;
}
#дорогаКнопка:hover { background: var(--glass-2); border-color: var(--edge-hot); }

/* ─── Разделы викторины ──────────────────────────────────────────────────── */
/*
   Строки наборов те же, что у осведомлённости (`.знСтрока`): и там и там это
   «набор вопросов, полоска знания, лучший итог». Две разные разметки для
   одного смысла разошлись бы на первой же правке.
*/
#викПродолжить:not(:empty) { margin-bottom: 12px; }
#викПродолжить .строчкаКнопка { display: block; width: 100%; text-align: left; }
#викРазделы { margin-bottom: 10px; }
#викНазад { margin-bottom: 10px; }

/* Телефон: лента ложится листом снизу, как прочие панели. Правило повторено в
   самом конце файла нарочно — базовое `top` у #дорога описано ниже общего
   блока телефона и перебивало его, отчего панель растягивалась от шапки до
   нижнего края с пустотой внутри. */
@media (max-width: 720px) {
  #дорога { top: auto; max-height: 68vh; }
}

/* ─── Панели-окна на широком экране ──────────────────────────────────────── */
/* Перетаскивание за верх и ширина за грани окна (js/map/okna.js). Только стол
   с мышью: на телефоне и планшете панели прибиты вёрсткой, и модуль молчит.
   DOM-ручек нет: грань окна ловится геометрией в самом модуле, а курсор он
   ставит сам — absolute-ручки уезжали бы вместе с прокруткой содержимого. */
@media (min-width: 1025px) and (pointer: fine) {
  .окно h2, .окно .метка { cursor: move; }
  /* Пока окно тянется: текст не выделяется, карта не ловит мышь. */
  body.окноТянется { user-select: none; }
  body.окноТянется #map { pointer-events: none; }
}

/* ─── Обратная связь ─────────────────────────────────────────────────────── */
/* Та же вёрстка, что у входа: это тоже маленький разговор, а не панель
   содержания. z выше карточки: форму открывают из неё. */
#отзыв {
  position: absolute; z-index: 565; top: var(--подШапкой); right: 12px;
  width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 100px); overflow-y: auto;
  padding: 16px 18px 18px;
  background: var(--glass); border: 1px solid var(--edge-hot); border-radius: 10px;
}
#отзыв[hidden] { display: none; }
#отзыв h2 { margin: 6px 0 12px; font-size: 18px; color: var(--gold); }
#закрытьОтзыв {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; line-height: 1;
  background: transparent; border: 1px solid var(--edge);
  color: var(--dim); border-radius: 6px; cursor: pointer;
}
#отзыв label { display: block; margin-bottom: 10px; color: var(--dim); font-size: 12px; }
#отзыв input, #отзыв textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  background: rgba(18,16,12,.7); color: var(--text);
  border: 1px solid var(--edge); border-radius: 6px;
  font-family: var(--font); font-size: 13px; outline: none; resize: vertical;
}
#отзыв input:focus, #отзыв textarea:focus { border-color: var(--edge-hot); }
/* Приманка для ботов: поле честно стоит в форме, но человеку не видно и с
   клавиатуры не достаётся. display:none боты научились уважать, сдвиг — нет. */
#отзыв .отзывСайт { position: absolute; left: -9999px; top: -9999px; }
#отзывПро { color: var(--dim); font-size: 12px; margin: -6px 0 10px; }
#отзывВесть { margin-top: 8px; }
#отзывВесть.беда { color: #ff9c8c; }
#отзывИзКарточки { margin-top: 10px; }