/* mylittleponytest.ru — свои стили, один файл, без сборки и без CDN.
 *
 * ⛔ ПАЛИТРА. Синих, фиолетовых и циановых оттенков здесь нет ни одного —
 * запрет сети (по ним страницу узнают как сделанную ИИ). Оливково-зелёная
 * и бледно-бежевая гамма забракованы владельцем отдельно. Взята тёплая
 * сторона: бумага, киноварь, охра.
 *
 * ⛔ И фирменные цвета сериала один в один не берутся — это правовая рамка.
 * Оттенки персонажей выбраны в тёплой дуге и намеренно не совпадают
 * с бренд-палитрой (там холодная бирюза, сирень и небесно-голубой).
 *
 * ⛔ ТЁМНОЙ ТЕМЫ НЕТ — снята 10.08.2026 решением владельца.
 * ⚠️ ЗАПРОС УСЛОВИЯ ТЁМНОЙ ТЕМЫ НЕ ВЫПИСАН ЗДЕСЬ ДОСЛОВНО — намеренно, по тому же
 * правилу, что и запрет цитировать засечковые гарнитуры ниже: сплошной замер по
 * сети идёт грепом по отданному файлу, и цитата в комментарии выглядит в нём точно
 * так же, как живое правило. Комментарий не должен подделывать симптом.
 * Работала тема по системной настройке устройства и без переключателя, то есть посетитель с
 * тёмной настройкой телефона (а у подростков это большинство) видел САЙТ
 * ЦЕЛИКОМ в коричневых потёмках — при том, что тест про пони живёт на светлом
 * и конфетном. Соседи по нише (mlptest.com, idrlabs) светлые оба.
 * ⚠️ Одного удаления `@media` мало: `color-scheme` в разметке и тёмная вставка
 * в аварийной странице `public/index.php` тоже возвращали потёмки. Если снова
 * появится тёмный блок — проверять ВСЕ ТРИ места, они врозь.
 */

:root {
  --paper:      #FDF7F1;
  --surface:    #FFFFFF;
  --surface-2:  #FBF1E8;
  --ink:        #2A201B;
  --ink-muted:  #736055;
  --line:       #EBDCCD;
  --accent:     #D8452C;
  --accent-text:#B3341F;
  --accent-ink: #FFFFFF;
  --accent-soft:#FDEAE4;
  --ten-1: 0 1px 2px rgba(74, 45, 30, .10);
  --ten-2: 0 1px 2px rgba(74, 45, 30, .10), 0 8px 24px rgba(74, 45, 30, .10);
  --ten-3: 0 1px 2px rgba(74, 45, 30, .12), 0 18px 40px rgba(74, 45, 30, .16);
  /* ⚠️ Стек ОДНОЙ строкой, а не двенадцатью копиями. До 10.08.2026 он был выписан
     в двенадцати правилах подряд, и правка шрифта означала двенадцать одинаковых
     замен — ровно тот случай, когда одиннадцать заменят, а одну забудут. */
  --shrift-krug: ui-rounded, "SF Pro Rounded", "Segoe UI", Verdana, system-ui, sans-serif;
  --radius: 16px;
  --shag: 150ms;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* ── ПРИЁМ САЙТА: ТЁПЛОЕ КОНФЕТНОЕ БОКЕ ──────────────────────────────────────
 * Четыре мягких круга на фоне, очень медленно «дышащие». Настроение этого сайта
 * противоположно справочнику: подростковый тест про пони — единственное место в
 * сети, где можно быть игривым, и фон здесь работает на это.
 *
 * ⛔ ПАЛИТРА ОСТАЁТСЯ ТЁПЛОЙ. Розовый, персиковый, тёплая лаванда — да; холодный
 *    синий и голубой запрещены сетью (по ним страницу узнают как сделанную ИИ), и
 *    ни одного тона из полосы 195–260° здесь нет.
 * ⚠️ Круги лежат ПОД содержимым и не трогают контраст: они на `body::before` с
 *    `z-index:-1`, прозрачность 0.16–0.22, а карточки сайта стоят на своей
 *    непрозрачной поверхности.
 * ⚠️ `position: fixed` — фон не растёт вместе со страницей и не даёт прокрутки:
 *    длина страницы теста меняется от шага к шагу.
 * 🔴 ДВИЖЕНИЕ ГАСНЕТ ПОЛНОСТЬЮ при `prefers-reduced-motion: reduce` — `animation:
 *    none`, а не «ускоренная до 0.01ms». Общее правило файла именно ускоряло, и
 *    для 42-секундного дыхания это означало бы дёрганый кадр вместо покоя.
 * ⚠️ Сдвига раскладки нет: псевдоэлемент ничего не занимает в потоке, а первый
 *    кадр анимации совпадает с состоянием покоя.
 */
body::before {
  content: "";
  position: fixed; inset: -10vmax;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 138, 168, .22), transparent 42%),
    radial-gradient(circle at 86% 12%, rgba(255, 178, 122, .20), transparent 38%),
    radial-gradient(circle at 76% 82%, rgba(216, 69, 44, .16), transparent 40%),
    radial-gradient(circle at 22% 86%, rgba(206, 150, 190, .18), transparent 44%);
  animation: dyshit 42s ease-in-out infinite alternate;
}
@keyframes dyshit {
  from { transform: scale(1)     translate3d(0, 0, 0);      opacity: .9; }
  to   { transform: scale(1.12) translate3d(1.5%, -1.5%, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* 🔴 ЗАСЕЧЕК НЕТ НИ ОДНОЙ (10.08.2026).
 * Здесь стоял засечковый стек (ui-антиква, Georgia, Times New Roman) — причём в
 * СОКРАЩЁННОМ свойстве `font`, куда греп по `font-family` не заглядывает, поэтому
 * первый замер по сети этот сайт и пропустил. Засечки лежали на ОСНОВНОМ тексте
 * всего сайта: вопросы теста, варианты ответов, разбор результата. Из пятнадцати
 * сайтов флота они оставались только тут.
 * Прежний довод — «заголовки гротеск, текст антиква, это разводит пару» — верен по
 * замыслу и неверен по исполнению: подростковый тест про пони, набранный книжной
 * антиквой, читается как учебник.
 * ⚠️ Слова-названия засечковых гарнитур не выписаны здесь дословно НАМЕРЕННО: сплошной
 * замер по сети идёт грепом по отданному файлу, и цитата в комментарии выглядела бы в
 * нём точно так же, как живой стек. Комментарий не должен подделывать симптом. Пара разведена и без засечек: округлый гротеск в
 * заголовках и кнопках, нейтральный в тексте.
 * ⚠️ `Inter` из стека заголовков тоже убран: он НЕ СИСТЕМНЫЙ, ставится отдельно, а со
 * стороны здесь ничего не подгружается — то есть у большинства просто не срабатывал.
 * ⚠️ Оба стека СВОИ у этого сайта. Сверено с соседями 10.08.2026: `"Avenir Next"…`
 * первым именем уже стоит на razmerfoto.ru, `Tahoma…` и `"Helvetica Neue"…` на
 * raschetlestnicy.ru, `"Optima"…` на stepenrodstva.ru. Одинаковый стек — такой же
 * отпечаток сети, как одинаковая шапка. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 "Noto Sans", "Segoe UI", "DejaVu Sans", system-ui, sans-serif;
  overflow-x: hidden;
}

/* Пара шрифтов разведена намеренно: заголовки — округлый гротеск (он и задаёт
   настроение этому сайту), текст — нейтральный. */
h1, h2, h3, .krupno, button, .kopyto, .verhushka, .nizina-stolbec h2 {
  font-family: var(--shrift-krug);
}

h1 { font-size: clamp(28px, 6vw, 44px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px; }
h2 { font-size: clamp(22px, 3.6vw, 30px); line-height: 1.2; letter-spacing: -.01em; margin: 40px 0 14px; }
h3 { font-size: 19px; margin: 24px 0 8px; }
p  { margin: 0 0 14px; }

a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.propustit {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; z-index: 60; border-radius: 0 0 10px 0;
}
.propustit:focus { left: 0; }

/* ------------------------------------------------------------------ шапка */
.verhushka {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  max-width: 1120px; margin: 0 auto; padding: 14px 18px;
}
.verhushka-znak {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--accent); text-decoration: none; font-weight: 700;
}
.verhushka-imya { color: var(--ink); font-size: 17px; letter-spacing: -.01em; }
.verhushka-menyu { display: flex; gap: 6px; flex-wrap: wrap; }
.verhushka-menyu a {
  display: inline-block; padding: 9px 13px; min-height: 40px;
  border-radius: 999px; text-decoration: none; color: var(--ink-muted);
  font-size: 15px; font-weight: 600;
  transition: background var(--shag), color var(--shag);
}
.verhushka-menyu a:hover { background: var(--surface-2); color: var(--ink); }

main { max-width: 1120px; margin: 0 auto; padding: 8px 18px 60px; }

/* ------------------------------------------------------------ первый экран */
.vvod { text-align: center; margin: 8px auto 22px; max-width: 720px; }
.obeshchanie { color: var(--ink-muted); font-size: 18px; margin: 0 auto 18px; max-width: 620px; }
.plashki { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
/* ⚠️ На 390 px три плашки в полном кегле встают ТРЕМЯ строками и отодвигают первый
   вопрос ещё на 90 px. Кегль и отбивка ужимаются — влезает по две в строку. */
@media (max-width: 480px) {
  .plashki { gap: 6px; margin-bottom: 16px; }
  .plashka { font-size: 13px; padding: 5px 10px; }
}
.plashka {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 14px; color: var(--ink-muted); box-shadow: var(--ten-1);
  font-family: var(--shrift-krug);
}

/* ------------------------------------------------------------- прибор/тест */
.anketa {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--ten-2);
  padding: 22px;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 700px) { .anketa { padding: 30px 34px; } }

.dorozhka-obertka { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.dorozhka { flex: 1; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.dorozhka i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 240ms ease-out; }
.schet { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
  font-family: var(--shrift-krug); }

/* 🔴 СБРОС FIELDSET/LEGEND — НЕ КОСМЕТИКА, А ПОЧИНКА.
   Вопрос размечен <fieldset class="shag"> с <legend class="formulirovka">: так и надо,
   это настоящая группа переключателей, и читалка объявляет вопрос перед каждым
   вариантом. Но у fieldset есть СВОЙ вид по умолчанию — рамка `2px groove` и
   вырез под легенду, — а в этом файле правил для них не было ни одного.
   В итоге сквозь заголовок вопроса шла серая рамка с разрывом: на снимке это
   выглядело так, будто текст наезжает на чужую карточку.
   ⚠️ Дефект того же рода, что мёртвые атрибуты в разметке: элемент взят ради
   доступности, а его собственный вид сбросить забыли. Ищется только глазами по
   снимку — в разметке всё правильно, в CSS нет НИЧЕГО, и грепать нечего. */
.shag { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.formulirovka { display: block; width: 100%; padding: 0; }

.formulirovka { font-size: clamp(21px, 4.4vw, 28px); line-height: 1.25; margin: 6px 0 20px; font-weight: 700;
  font-family: var(--shrift-krug); letter-spacing: -.01em; }

.otvety { display: grid; gap: 10px; }
.otvet {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: 56px; padding: 13px 16px;
  background: var(--surface-2); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 12px;
  font: inherit; font-size: 16px; cursor: pointer;
  transition: border-color var(--shag), background var(--shag), transform var(--shag), box-shadow var(--shag);
}
.otvet:hover { border-color: var(--accent); background: var(--accent-soft); }
.otvet:active { transform: scale(.99); }
/* Вариант — label с radio внутри; aria-pressed не ставил никто, и подсветка была
   мертва: выбранный и фокус клавиатуры не отличались от остальных (#4302). */
.otvet:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--ten-1);
}
.otvet:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.otvet .bukva {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--surface); border: 1.5px solid var(--line); color: var(--ink-muted);
  font-family: var(--shrift-krug);
}
.otvet:has(input:checked) .bukva { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.nizkonopki { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
/* Без «Назад» на первом вопросе «Дальше» осталась бы одна и уехала влево. */
.nizkonopki > :last-child { margin-left: auto; }

.kopyto {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 12px;
  border: 1.5px solid transparent; font-size: 16px; font-weight: 700; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); box-shadow: var(--ten-1);
  transition: background var(--shag), transform var(--shag), box-shadow var(--shag), opacity var(--shag);
  text-decoration: none;
}
.kopyto:hover { background: var(--accent-text); color: var(--accent-ink); box-shadow: var(--ten-2); }
.kopyto:active { transform: translateY(1px); }
.kopyto[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* display выше перебивает браузерное [hidden]{display:none}: «Назад» на первом
   вопросе и «Поделиться» без navigator.share стояли видимыми и мёртвыми (#4303). */
.kopyto[hidden] { display: none; }
.kopyto.tihaya { background: var(--surface-2); color: var(--ink); border-color: var(--line); box-shadow: none; }
.kopyto.tihaya:hover { background: var(--surface); border-color: var(--accent); color: var(--ink); }

.podskazka { font-size: 14px; color: var(--ink-muted); text-align: center; margin: 12px 0 0; }

/* Отклик формы: видно с первого взгляда, а не «примечание под кнопкой». */
.otklik {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 20px; padding: 14px 16px;
  border-radius: 14px; border: 1.5px solid var(--line);
  font-size: 16px; font-weight: 600; line-height: 1.45;
  box-shadow: var(--ten-1);
}
.otklik-znak {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px; font-weight: 800;
  font-family: var(--shrift-krug); color: #fff;
}
/* ⚠️ Зелёного в палитре сайта нет (тёплая гамма, и оливковый забракован
   владельцем отдельно), поэтому успех — НЕ зелёный, а свой акцент плюс галочка.
   Знак несёт смысл вместе с цветом: различать исходы одним цветом нельзя. */
.otklik-ok   { background: var(--accent-soft); border-color: var(--accent); }
.otklik-ok .otklik-znak { background: var(--accent); }
.otklik-sboj { background: var(--surface-2); border-color: var(--accent-text); }
.otklik-sboj .otklik-znak { background: var(--accent-text); }
.oshibka-vvoda { color: var(--accent-text); font-weight: 700; }

/* ----------------------------------------------------------- результат */
.geroj { text-align: center; }
.geroj-znak {
  width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; box-shadow: var(--ten-2);
}
.geroj-imya {
  font-size: clamp(32px, 8vw, 52px); line-height: 1.05; margin: 0 0 6px; font-weight: 800;
  letter-spacing: -.02em;
  font-family: var(--shrift-krug);
}
.geroj-korotko { font-size: 18px; color: var(--ink-muted); margin: 0 auto 8px; max-width: 480px; }
.geroj-opisanie { text-align: left; max-width: 560px; margin: 18px auto 0; }

.mezhdu {
  background: var(--accent-soft); border: 1.5px solid var(--accent);
  border-radius: 12px; padding: 12px 16px; margin: 16px auto 0; max-width: 560px;
  font-size: 15px; text-align: left;
}

/* Фигура героини на экране результата. Подложка — мягкое пятно её цветом:
   стикер вырезан по контуру, и без подложки он висит в воздухе. */
.geroj-figura {
  position: relative; display: grid; place-items: center;
  margin: 0 auto 8px; width: 100%; max-width: 240px; min-height: 200px;
}
.geroj-figura::before {
  content: ""; position: absolute; z-index: 0;
  width: 190px; height: 190px; border-radius: 50%;
  background: var(--cvet-geroini); opacity: .13;
}
.geroj-stiker { position: relative; z-index: 1; filter: drop-shadow(0 12px 22px rgba(74, 45, 30, .20)); }

.rozetka-obertka { margin: 22px auto 4px; max-width: 460px; }

/* 🔴 ОДНА СЕТКА НА ВСЕ СТРОКИ, А НЕ СЕТКА В КАЖДОЙ СТРОКЕ (10.08.2026).
 * Владелец: «в результатах очень странная ситуация с процентами, по-разному
 * отображаются, разные длины». Так и было, и это был настоящий дефект, а не
 * придирка: каждая строка была СВОИМ гридом с колонкой имени `auto`, поэтому
 * ширину дорожки задавала ДЛИНА ИМЕНИ. У «Рарити» дорожка длинная, у
 * «Твайлайт Спаркл» короткая — и 82 % на длинной дорожке рисовались той же
 * физической длиной, что 75 % на короткой. То есть полоски, чья единственная
 * работа — дать сравнить глазом, сравнивать не позволяли.
 * ⚠️ Лечится `subgrid`: строки берут колонки У РОДИТЕЛЯ, и дорожка у всех одна.
 * ⚠️ Запас для браузеров без subgrid — фиксированная колонка имени; без запаса
 * там развалится вся строка, а не «станет чуть хуже».
 */
.shkaly { margin: 26px auto 0; max-width: 560px; display: grid; gap: 9px;
  grid-template-columns: auto minmax(0, 1fr) auto; }
.shkaly > p { grid-column: 1 / -1; }
.shkala { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  align-items: center; gap: 10px; }
/* Морда добавляет ЧЕТВЁРТУЮ колонку слева — родителю тоже. */
.shkaly:has(.shkala-s-licom) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
@supports not (grid-template-columns: subgrid) {
  .shkaly { display: block; }
  .shkala { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; margin-bottom: 9px; }
  .shkala-s-licom { grid-template-columns: auto 9.5em minmax(0, 1fr) auto; }
  .shkala-imya { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.shkala-s-licom .lico-krug { width: 34px; height: 34px; border-width: 2px; }
.shkala-s-licom .lico { width: 100%; height: 100%; }
/* 🔴 НА УЗКОМ ЭКРАНЕ ИМЯ ПЕРЕЕЗЖАЕТ НА СВОЮ СТРОКУ, НО ДОРОЖКА ОСТАЁТСЯ ОБЩЕЙ.
 * На 320–420 px четыре колонки не влезают — имя жмётся до двух букв. Раньше здесь
 * строка становилась СВОИМ гридом, и это возвращало ровно тот дефект, из-за
 * которого выше заведён subgrid: дорожки опять получались разной длины. Поэтому
 * колонки по-прежнему родительские, а имя занимает первую строку внутри строки. */
@media (max-width: 460px) {
  .shkaly:has(.shkala-s-licom) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .shkala-s-licom { grid-template-rows: auto auto; }
  .shkala-s-licom .lico-krug { grid-row: 1 / span 2; grid-column: 1; }
  .shkala-s-licom .shkala-imya { grid-row: 1; grid-column: 2 / -1; font-size: 14px; text-align: left; }
  .shkala-s-licom .shkala-polosa { grid-row: 2; grid-column: 2; }
  .shkala-s-licom .shkala-chislo { grid-row: 2; grid-column: 3; }
}
.shkala-imya { font-size: 15px; white-space: nowrap;
  font-family: var(--shrift-krug); }
.shkala-polosa { height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.shkala-polosa i { display: block; height: 100%; border-radius: 999px; }
.shkala-chislo { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right;
  font-family: var(--shrift-krug); }

/* Свой профиль: тот же вид полосок, но отбит от совпадений — это ВХОД расчёта,
   а не ещё один его вывод. */
.moj-profil { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--line); }
.moj-profil .shkala-svoya .shkala-imya { font-weight: 800; color: var(--accent-text); }
.moj-profil .shkala-svoya .shkala-chislo { font-weight: 800; color: var(--accent-text); }

.deystviya { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 26px 0 0; }

/* ⭐ КАРТОЧКА НАКЛОНЯЕТСЯ ЗА МЫШКОЙ, как в Steam (просьба владельца 10.08.2026).
 * Устройство: обёртка держит перспективу, сам холст поворачивается на углы,
 * которые считает JS из положения курсора, плюс блик поверх.
 * 🔴 ТОЛЬКО ТАМ, ГДЕ ЕСТЬ МЫШЬ. Условия навешивает JS по `hover: hover` и
 * `pointer: fine`: на телефоне наклонять нечем, а `touch-action` от лишних
 * обработчиков страдает — прокрутка пальцем по карточке начинала цепляться.
 * 🔴 ГАСНЕТ ПРИ `prefers-reduced-motion: reduce` — целиком, а не «быстрее».
 * ⚠️ Углы малые (до 9°) намеренно: на 320 px шириной сильный наклон делает
 * текст на картинке нечитаемым, а картинка тут — то, что человек разглядывает. */
.kartinka-obertka { margin: 26px auto 0; max-width: 320px; perspective: 900px; }
.kartinka-obertka canvas {
  width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ten-3);
  display: block; background: var(--surface-2);
  transform: rotateX(var(--naklon-x, 0deg)) rotateY(var(--naklon-y, 0deg)) scale(var(--priblizhenie, 1));
  transition: transform 220ms ease-out, box-shadow 220ms ease-out;
  will-change: transform;
}
.kartinka-obertka.naklon-idet canvas {
  /* Пока мышка внутри — переход короткий, иначе карточка «плывёт» за курсором
     с задержкой и эффект читается как лаг, а не как отклик. */
  transition: transform 70ms linear, box-shadow 220ms ease-out;
  box-shadow: 0 2px 4px rgba(74, 45, 30, .14), 0 26px 50px rgba(74, 45, 30, .26);
}
/* Блик: мягкое световое пятно, идущее за курсором. Лежит ПОВЕРХ холста и не
   ловит события — иначе он перехватывал бы наведение у самого холста. */
.kartinka-obertka { position: relative; }
.kartinka-obertka::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
  pointer-events: none; opacity: 0; transition: opacity 220ms ease-out;
  background: radial-gradient(220px circle at var(--blik-x, 50%) var(--blik-y, 50%),
    rgba(255, 255, 255, .38), transparent 62%);
}
.kartinka-obertka.naklon-idet::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .kartinka-obertka canvas { transform: none; transition: none; }
  .kartinka-obertka::after { display: none; }
}

.imya-vvod { display: flex; gap: 8px; max-width: 420px; margin: 18px auto 0; flex-wrap: wrap; }
.imya-vvod input {
  flex: 1 1 180px; min-width: 0; min-height: 48px; padding: 11px 14px;
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
}
.imya-vvod input:focus { border-color: var(--accent); }

/* ══════════════════════════════════════════════ картинки персонажей (10.08.2026)
 * Морды и стикеры собирает bin/kartinki.py, разметку даёт lib/Personazh.php.
 * ⚠️ Ни одного `height: auto` тут нет случайно: у стикеров семь разных пропорций,
 *    поэтому высоту НЕ задаём нигде, а место в потоке держит сам поток.
 */
.lico { display: block; border-radius: 50%; }

/* Морда в кружке с рамкой цвета персонажа. Рамка отдельным элементом, а не
   border на <img>: у картинки уже запечён белый круг, и рамка на самой картинке
   съедала бы морду изнутри. */
.lico-krug {
  display: inline-grid; place-items: center; border-radius: 50%;
  border: 2.5px solid var(--line); background: var(--surface);
  box-shadow: var(--ten-1); overflow: hidden; flex: 0 0 auto;
}

.stiker { display: block; height: auto; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────── розетка */
.rozetka {
  position: relative;
  width: 100%; max-width: 440px; margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.rozetka-svg { display: block; width: 100%; height: 100%; overflow: visible; }

.rozetka-setka { fill: none; stroke: var(--line); stroke-width: 1; }
.rozetka-rama  { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.rozetka-luch  { stroke: var(--line); stroke-width: 1; }
/* ⚠️ Прозрачность 0.72, а не 0.7 «на глаз»: при 0.85 наложенные дольки почти не
   отличаются от одиночных, при 0.6 бледнеет самая маленькая. Обводка тем же
   цветом в полную силу — без неё долька на 20 % теряет край. */
/* Заливка уже разбавлена бумагой в PHP, поэтому прозрачность здесь высокая:
   на 0.72 наложение двух долек давало третий цвет, которого нет ни у кого. */
.rozetka-dolya { fill-opacity: .92; stroke-width: 1.5; stroke-opacity: .9; }
/* ⚠️ paint-order: stroke — то, чем число читается на любой заливке: обводка
   бумагой рисуется ПОД буквой, а не поверх. Без него на тёмной дольке цифры
   пропадают, а на светлой обводка съедает тонкие штрихи. */
.rozetka-chislo {
  font-family: var(--shrift-krug); font-size: 16px; font-weight: 800;
  fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4.5px;
  stroke-linejoin: round;
}

/* Морда с подписью, поставленная по своему углу. transform сдвигает её на
   собственную половину — иначе по углу встаёт левый верхний край, а не центр. */
.rozetka-mesto {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 2px;
  width: 74px; pointer-events: none;
}
.rozetka-lico {
  display: block; width: 56px; height: 56px; border-radius: 50%;
  border: 2.5px solid var(--line); background: var(--surface);
  box-shadow: var(--ten-1); overflow: hidden;
}
.rozetka-lico .lico { width: 100%; height: 100%; }
.rozetka-imya {
  font-family: var(--shrift-krug); font-size: 11px; font-weight: 700;
  color: var(--ink-muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 7px; white-space: nowrap; box-shadow: var(--ten-1);
}

/* 🔴 НА УЗКОМ ЭКРАНЕ РОЗЕТКА СЖИМАЕТСЯ ЦЕЛИКОМ, а не по частям. Морды и подписи
 * заданы в px, а картинка — в процентах; если не уменьшить px, на 320 px морды
 * съезжаются и подписи наезжают друг на друга. Проверено на 320/360/390. */
@media (max-width: 430px) {
  .rozetka { max-width: 300px; }
  .rozetka-mesto { width: 56px; }
  .rozetka-lico { width: 40px; height: 40px; border-width: 2px; }
  .rozetka-imya { font-size: 10px; padding: 0 5px; }
  .rozetka-chislo { font-size: 17px; }
}

/* ------------------------------------------------------------ первый экран */
/* 🔴 ПЕРВЫЙ ЭКРАН ОБЯЗАН СОДЕРЖАТЬ САМ ТЕСТ С КНОПКОЙ. Владелец 10.08.2026:
 * «главный экран на компьютерной версии — туда не помещается ключевая кнопка,
 * это простая вещь, которая убивает большинство конкурентов»; «на главном экране
 * уже должен быть тест с его кнопками».
 *
 * ЗАМЕР ДО ПРАВКИ (кнопка «Показать, кто я», окно × высота):
 *     1280×800 — кнопка на 1040 px, ниже сгиба на 288
 *     1440×900 — ниже сгиба на 188
 *      390×844 — ниже сгиба на 326
 * Причина: заголовок, абзац-обещание, ряд морд и три крупные плашки съедали 650 px
 * ДО начала теста, а на широком экране тест вообще стоял третьей строкой сетки,
 * под текстом и примером.
 *
 * СТАЛО: на 900 px и шире тест занимает ПРАВУЮ колонку целиком и начинается на той
 * же высоте, что заголовок; текст и пример — левую. На телефоне порядок в разметке
 * (текст → тест → пример) остаётся, а всё вводное сжато.
 * ⚠️ Порядок в разметке НЕ меняется: он правильный для телефона и для читалки, а
 * колонки собираются grid-областями. `order` испортил бы порядок чтения. */
.shapka-vvod { display: grid; gap: 18px; }
@media (min-width: 900px) {
  /* 🔴 ТЕСТ СЛЕВА, ПРИМЕР СПРАВА (владелец 11.08.2026: «важный блок с выбором
     справа, а демонстрация слева — люди привыкли слева видеть более важное»).
     Заголовок при этом идёт ПОЛОСОЙ НА ВСЮ ШИРИНУ сверху: если увести его в правую
     колонку вместе с примером, название страницы окажется сбоку от содержимого, а
     это уже не «важное слева», а просто перевёрнутая страница. */
  .shapka-vvod {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: "vvod vvod" "test primer";
    grid-template-rows: auto 1fr;
    gap: 14px 32px; align-items: start; margin-bottom: 10px;
  }
  /* ⚠️ ПОЛОСА ЗАГОЛОВКА СЖАТА В ОДНУ СТРОКУ: заголовок слева, морды и плашки справа
     от него. Когда они шли под заголовком, полоса занимала ~140 px и кнопка теста
     снова уходила за сгиб на 1280×800 (замер: ниже на 30 px). Теперь полоса — это
     высота одного заголовка. */
  .shapka-vvod .vvod {
    grid-area: vvod; text-align: left; margin: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 6px 24px;
  }
  .shapka-vvod h1 { font-size: clamp(26px, 2.9vw, 38px); flex: 1 1 340px; margin: 0; }
  .shapka-vvod .ryad-lic { margin: 0; }
  .shapka-vvod .plashki  { margin: 0; flex-wrap: wrap; }
  .shapka-vvod .plashka  { font-size: 12.5px; padding: 4px 10px; }
  .shapka-vvod .primer { grid-area: primer; margin: 0; }
  .shapka-test         { grid-area: test; width: 100%; max-width: none; margin: 0; }
  .shapka-vvod .plashki { justify-content: flex-start; }
  /* ⚠️ h1 на широком меньше, чем был: он делит строку с тестом, и прежние 44 px
     уводили первый ответ за сгиб на ноутбуке 1280×800. */
  .shapka-vvod h1 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 8px; }
}

/* 🔴 НА ТЕЛЕФОНЕ ВВОДНОЕ СЖАТО ДО МИНИМУМА — владелец: «плашки должны быть
 * намного-намного миниатюрнее, чтобы занимать меньше места». Абзац-обещание убран
 * целиком (см. pages/glavnaya.php). Всё вместе поднимает кнопку выше сгиба. */
@media (max-width: 899px) {
  .shapka-vvod h1 { font-size: clamp(24px, 6.4vw, 32px); margin-bottom: 8px; }
  .shapka-vvod .vvod { margin-bottom: 0; }
  .shapka-vvod .ryad-lic { gap: 4px; margin-bottom: 8px; }
  .shapka-vvod .ryad-lic .lico-krug { width: 32px; height: 32px; border-width: 2px; }
  .shapka-vvod .plashki { gap: 4px; margin-bottom: 10px; }
  .shapka-vvod .plashka {
    font-size: 11.5px; padding: 3px 8px; box-shadow: none;
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
  }
  .shapka-test { padding: 16px 14px; }
  .shapka-test .formulirovka { font-size: clamp(19px, 4.6vw, 23px); margin: 4px 0 14px; }
  /* ⚠️ 48 px — это ровно нижняя граница удобного нажатия пальцем, ниже не опускаем
     даже ради сгиба: непопадание по варианту хуже, чем прокрутка. */
  .shapka-test .otvet { min-height: 48px; padding: 9px 12px; font-size: 15.5px; }
  .shapka-test .otvety { gap: 7px; }
  .shapka-test .dorozhka-obertka { margin-bottom: 10px; }
  .shapka-test .nizkonopki { margin-top: 14px; }
}

/* Пример результата в шапке: карточка с розеткой и двумя стикерами по углам. */
.primer {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 26px; padding: 12px 12px 16px;
  box-shadow: var(--ten-2);
}
/* z-index у подписи выше стикеров: иначе стикер-украшение накрывает ссылку
   «открыть пример целиком» — и по ней перестаёт получаться нажать. */
.primer-podpis {
  position: relative; z-index: 3;
  text-align: center; font-size: 13px; color: var(--ink-muted);
  font-family: var(--shrift-krug); margin: 6px 0 0;
}
/* Стикеры-украшения. ⛔ Только на широком экране: на телефоне они лезут на
   розетку и ничего не добавляют, а вес добавляют. `aria-hidden` на них в
   разметке — читалке про украшение знать незачем. */
.primer-stiker { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(74, 45, 30, .22)); }
/* ⚠️ bottom −56, а не −34: на снимке 1280 стикер закрывал строку «так выглядит
   результат — открыть этот пример целиком», и надпись читалась поверх пони. */
/* ⚠️ ОБА УКРАШЕНИЯ НА ПРАВОМ КРАЮ. Пока пример стоял слева, верхний стикер висел
   слева сверху и никому не мешал. После обмена колонок (тест слева) он оказался НАД
   карточкой теста и закрывал плашку с текстом — видно на снимке 1280. Украшение не
   имеет права перекрывать содержимое, поэтому оба ушли на внешний край страницы. */
.primer-stiker-1 { right: -74px; bottom: -56px; width: 130px; }
.primer-stiker-2 { right: -40px; top: -46px; width: 112px; }
@media (max-width: 899px) { .primer-stiker { display: none; } }
/* ⚠️ СВЕС −74/−40 ВЛЕЗАЕТ ТОЛЬКО В ПОЛЕ ОТ 74 px. Справа от примера поле страницы:
   18 px отступа main, а шире 1120 px ещё половина остатка. На 900–1231 px поля
   меньше свеса, и стикеры выталкивали документ вбок на 57 px (задача #4305: на
   планшете в альбомной ориентации промах мимо ответа сдвигал всю страницу).
   Здесь свес не больше 12 px — внутри 18 px отступа с запасом на покачивание
   (rotate ±2°). Нижний стикер опущен под угол карточки: сдвинутый влево на
   прежней высоте, он лёг бы на ссылку «открыть этот пример целиком».
   Проверка — `make ekran` (ширины 900–1200 и отдельный замер стикеров). */
@media (min-width: 900px) and (max-width: 1279px) {
  .primer-stiker-1 { right: -12px; bottom: -118px; }
  .primer-stiker-2 { right: -12px; }
}
/* Лёгкое покачивание. Медленное и малое: это фон настроения, а не аттракцион. */
@media (prefers-reduced-motion: no-preference) {
  .primer-stiker-1 { animation: kachaetsya 6s ease-in-out infinite alternate; }
  .primer-stiker-2 { animation: kachaetsya 7.5s ease-in-out infinite alternate-reverse; }
}
@keyframes kachaetsya {
  from { transform: translateY(0) rotate(-2deg); }
  to   { transform: translateY(-9px) rotate(2deg); }
}

/* Одиночная фигура над заголовком (404, контакты). */
.odna-figura { display: grid; place-items: center; margin: 0 auto 6px; }
.odna-figura .stiker { filter: drop-shadow(0 10px 18px rgba(74, 45, 30, .18)); }
.odna-figura-malo { opacity: .96; }

/* Ряд морд под обещанием — то, чем шапка живёт на телефоне вместо розетки. */
.ryad-lic { display: flex; justify-content: center; gap: 6px; margin: 0 0 18px; flex-wrap: wrap; }
.ryad-lic .lico-krug { width: 46px; height: 46px; }
.ryad-lic .lico { width: 100%; height: 100%; }
@media (min-width: 900px) { .shapka-vvod .ryad-lic { justify-content: flex-start; } }

/* ------------------------------------------------------------ персонажи */
.setka { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 20px 0 0; }
@media (min-width: 640px) { .setka { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .setka { grid-template-columns: 1fr 1fr 1fr; } }

.kartochka {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--ten-1);
  transition: box-shadow var(--shag), transform var(--shag), border-color var(--shag);
}
.kartochka:hover { box-shadow: var(--ten-2); transform: translateY(-2px); }
.kartochka h3 { margin: 12px 0 4px; font-size: 20px; }
.kartochka p { font-size: 15px; color: var(--ink-muted); margin: 0 0 10px; }
.kartochka .znak-krug { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; }

/* Карточка персонажа с фигурой. Подложка — градиент её цветом, чтобы вырезанный
   по контуру стикер стоял на чём-то, а не висел. */
.kartochka-verh {
  position: relative; display: grid; place-items: end center;
  min-height: 168px; margin: -18px -18px 0; padding: 12px 12px 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(170deg, color-mix(in srgb, var(--cvet) 16%, var(--surface)), var(--surface));
  overflow: hidden;
}
/* ⚠️ Запас на браузеры без color-mix: там фон останется просто поверхностью,
   а не пропадёт в никуда (без этой строки было бы `background: none`). */
@supports not (color: color-mix(in srgb, red, blue)) {
  .kartochka-verh { background: var(--surface-2); }
}
.kartochka-stiker { filter: drop-shadow(0 8px 14px rgba(74, 45, 30, .18)); }
.kartochka-s-figuroj:hover .kartochka-stiker { transform: translateY(-3px) scale(1.03); }
.kartochka-stiker { transition: transform var(--shag); }
.znak-metka {
  position: absolute; right: 10px; top: 10px;
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--surface); box-shadow: var(--ten-1);
}

.podbor { display: grid; gap: 14px; }
.polzunok { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 12px; }
.polzunok label { font-size: 15px;
  font-family: var(--shrift-krug); }
.polzunok output { font-size: 14px; color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
.polzunok input[type=range] { width: 100%; accent-color: var(--accent); min-height: 32px; }
@media (max-width: 520px) { .polzunok { grid-template-columns: 1fr 44px; } .polzunok label { grid-column: 1 / -1; margin-bottom: -6px; } }

.itog-podbora {
  margin-top: 16px; padding: 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
}

/* ------------------------------------------------------------------ проза */
.proza { max-width: 720px; }
.proza li { margin-bottom: 6px; }

details.faq {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 0; margin-bottom: 10px; box-shadow: var(--ten-1); overflow: hidden;
}
details.faq > summary {
  cursor: pointer; padding: 15px 18px; font-weight: 700; list-style: none;
  min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--shrift-krug); font-size: 16px;
  transition: background var(--shag);
}
details.faq > summary:hover { background: var(--surface-2); }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; flex: 0 0 auto; }
details.faq[open] > summary::after { content: "−"; }
details.faq .telo { padding: 0 18px 16px; font-size: 16px; }

.tablica-obertka { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-family: var(--shrift-krug); font-size: 14px; color: var(--ink-muted); }

/* Морда вместо геометрического знака в шапке и в подвале. Рамка цветом акцента:
   знак сайта обязан читаться как знак САЙТА, а не как случайная картинка. */
/* ⚠️ Размер берётся ИЗ КАРТИНКИ (width/height у <img> ставит Personazh::lico), а не
   задан здесь числом: знак зовётся с 34 px в шапке и 40 px в подвале, и жёсткий
   размер в CSS сделал бы один из двух неправильным. */
.verhushka-lico {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--accent); background: var(--surface);
  box-shadow: var(--ten-1); overflow: hidden;
}
.verhushka-lico .lico { display: block; }

/* ------------------------------------------------------------------ подвал */
/* 🔴 ПОДВАЛ — ПОСЛЕДНИЙ ЭКРАН ПОСЛЕ РЕЗУЛЬТАТА, а не служебная полоска: здесь
 * человек либо уходит, либо отправляет ссылку дальше. Отсюда и устройство:
 * слева кто мы и ЧИСЛА продукта, дальше два столбца — куда идти и что мы о себе
 * говорим, ниже правовая оговорка, в самом низу одна строка подписи.
 * ⚠️ Три колонки — не «потому что так делают»: до 720 px они складываются в одну,
 * и порядок в разметке (мы → разделы → о нас) остаётся читаемым сверху вниз. */
.nizina {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--paper));
  padding: 34px 18px 30px; margin-top: 48px;
}
.nizina > * { max-width: 1120px; margin-left: auto; margin-right: auto; }

.nizina-verh {
  display: grid; gap: 26px; grid-template-columns: 1fr;
  padding-bottom: 24px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px)  { .nizina-verh { grid-template-columns: 1.4fr 1fr; } }
@media (min-width: 1000px) { .nizina-verh { grid-template-columns: 1.5fr .9fr 1.1fr; gap: 34px; } }

.nizina-znak {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent); text-decoration: none; font-weight: 700;
  font-family: var(--shrift-krug);
}
.nizina-znak .verhushka-imya { font-size: 18px; }
.nizina-obeshchanie { font-size: 15px; color: var(--ink-muted); margin: 10px 0 16px; max-width: 42em; }
.nizina-obeshchanie em { color: var(--ink); font-style: normal; font-weight: 700; }

/* Числа продукта. ⭐ Единственное место в подвале, которое работает как витрина:
   четыре проверяемых числа вместо слов «мы честные». */
.nizina-chisla { list-style: none; margin: 0 auto 20px; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .nizina-chisla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nizina-chisla li {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--ten-1); min-width: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
}
.nizina-chisla b {
  grid-row: span 2;
  font-family: var(--shrift-krug); font-size: 34px; line-height: 1;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.nizina-chisla span { font-size: 14px; font-weight: 700; }
.nizina-chisla small { font-size: 12.5px; color: var(--ink-muted); grid-column: 2; }
/* ⚠️ На двух плитках в ряд (до 620 px) число рядом с текстом оставляет тексту
   ~100 px, и пояснение переносится в три строки. Ниже порога число встаёт СВЕРХУ,
   и пояснению достаётся вся ширина плитки. */
@media (max-width: 619px) {
  .nizina-chisla li { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .nizina-chisla b { grid-row: auto; font-size: 30px; }
  .nizina-chisla small { grid-column: 1; }
}

.nizina-stolbec h2 {
  font-size: 15px; margin: 0 0 10px; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
/* Ссылки-разделы: навигация, поэтому без линии — то же решение, что было в
   прежнем служебном меню, и оно переехало вместе со ссылками. */
.nizina-stolbec > a {
  display: block; text-decoration: none; color: var(--ink);
  font-size: 15px; font-weight: 600; padding: 7px 0; min-height: 34px;
  transition: color var(--shag), padding-left var(--shag);
}
.nizina-stolbec > a:hover,
.nizina-stolbec > a:focus-visible { color: var(--accent-text); padding-left: 5px; }

.nizina-fakt { font-size: 14px; color: var(--ink-muted); margin: 0 0 10px; }
.nizina-fakt b { color: var(--ink); }
/* ⛔ Тут линия у ссылок ОСТАЁТСЯ: это сплошной текст, и в нём линия — единственное,
   что отличает адрес и ссылку от слов рядом. */
.nizina-fakt a { text-decoration: underline; text-decoration-thickness: 1px; }

.nizina-podpis { font-size: 13px; color: var(--ink-muted); margin: 16px auto 0; }
.ogovorka {
  font-size: 15px; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--line); border-left: 5px solid var(--accent);
  border-radius: 10px; padding: 14px 16px; box-shadow: var(--ten-1);
}
/* 🔴 ПОДЧЁРКИВАНИЯ В ПОДВАЛЕ — РЕШЕНИЕ, А НЕ УМОЛЧАНИЕ (10.08.2026).
 * Владелец: «зачем эти подчёркивания? футер это очень важный элемент, там должно быть
 * максимально хорошо проработано». Причина нашлась ровно та, что и у соседей: во всём
 * файле у ссылок нет НИ ОДНОГО правила про `text-decoration`, кроме шапки и меню, —
 * значит в подвале они остались подчёркнутыми по умолчанию браузера. Не решение, а
 * недосмотр, который выглядел как решение.
 * Правило: НАВИГАЦИЯ — без линии (отклик даёт цвет и сдвиг), ссылка в СПЛОШНОМ
 * ТЕКСТЕ — с линией, потому что там она единственное, что отличает адрес от слов
 * рядом. ⛔ Глушить её нельзя.
 * ⚠️ САМИ ПРАВИЛА `.nizina-menyu` УДАЛЕНЫ вместе с переделкой подвала: служебного
 * меню больше нет, ссылки живут в столбцах `.nizina-stolbec` и в `.nizina-fakt`,
 * и решение переехало туда дословно. Мёртвый селектор в файле выглядел бы как
 * работающее правило — и однажды его «починили» бы вместо настоящего. */

/* ------------------------------------------------- плашка про куки (узкая) */
/* ⛔ Норма — не больше 10 % экрана 390×844, то есть 84 px. Кнопка стоит В СТРОКЕ
   с текстом, а тексту дан min-width: 0 — иначе flex не даёт ему сжаться и кнопка
   уезжает на свою строку, добавляя ~40 px. */
.kuki {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--ten-3); padding: 8px 10px;
  font-size: 13px;
}
.kuki[hidden] { display: none; }
.kuki p { margin: 0; min-width: 0; flex: 1 1 auto; color: var(--ink-muted); }
.kuki a { flex: 0 0 auto; font-size: 13px; }
.kuki button {
  flex: 0 0 auto; min-height: 34px; padding: 6px 14px; border-radius: 9px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); border: 0; font-weight: 700; font-size: 13px;
  font-family: var(--shrift-krug);
}

/* ---------------------------------------------------------------- служебное */
.tolko-dlya-chtecov {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.centr { text-align: center; }
.tiho { color: var(--ink-muted); }
.malo { font-size: 14px; }

/* ------------------------------------------------------------ новое в тесте */
/* Лёгкие карточки в цвете героини записи; дата — пометкой над заголовком.
   Ленты с линией и точками нет намеренно: каждая запись — отдельная карточка. */
.novinki { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; }
.novinka {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cvet) 10%, var(--surface)), var(--surface) 55%);
  border-color: color-mix(in srgb, var(--cvet) 28%, var(--line));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .novinka { background: var(--surface); border-color: var(--line); }
}
.novinka-lico { width: 52px; height: 52px; margin-top: 2px; }
.novinka-lico .lico { width: 100%; height: 100%; }
.novinka-data {
  display: inline-block; font-family: var(--shrift-krug); font-size: 13px; font-weight: 700;
  color: var(--cvet-teksta, var(--ink-muted)); letter-spacing: .01em;
}
.novinka h2 { font-size: 20px; margin: 2px 0 6px; }
.novinka p { font-size: 16px; color: var(--ink); margin: 0; }
.novinka-poprobovat { padding: 10px 18px; font-size: 15px; margin-top: 14px; }
@media (max-width: 480px) {
  .novinka { grid-template-columns: 1fr; gap: 8px; }
  .novinka-lico { width: 40px; height: 40px; }
}

/* ------------------------------------------------------------ оценка сайта */
/* Блок lib/OcenkaBlok.php: карточка в ширину анкеты, звёзды в акцентном цвете.
   ⚠️ Правило про [hidden] обязательно: у части элементов блока свой display, и без
   него скрытые формы «5» и «1–4» стояли бы видимыми сразу (как было с .kopyto, #4303). */
.ocenka {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--ten-2); padding: 22px; max-width: 720px; margin: 44px auto 0;
}
@media (min-width: 700px) { .ocenka { padding: 26px 34px; } }
.ocenka [hidden] { display: none !important; }
.ocenka-verh { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
@media (min-width: 700px) {
  .ocenka-verh { flex-direction: row; justify-content: space-between; text-align: left; }
}
.ocenka-zagolovok { margin: 0 0 4px; font-family: var(--shrift-krug); font-size: clamp(21px, 3.4vw, 26px); }
.ocenka-podpis { margin: 0; }
.ocenka-pravo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
@media (min-width: 700px) { .ocenka-pravo { align-items: flex-end; } }
.ocenka-zvezdy { display: flex; gap: 2px; }
.ocenka-zvezda {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
  color: var(--line); transition: color var(--shag), transform var(--shag);
}
.ocenka-zvezda svg { pointer-events: none; }
.ocenka-zvezda.gorit { color: var(--accent); }
.ocenka-zvezda:not([disabled]):active { transform: scale(.92); }
.ocenka-zvezda:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.ocenka-zvezda[disabled] { cursor: default; }
.ocenka-itog { margin: 0; font-variant-numeric: tabular-nums; }
.ocenka-oshibka { margin: 0; font-size: 14px; font-weight: 700; color: var(--accent-text); }
.ocenka-vnutri {
  margin-top: 18px; padding: 18px; border-radius: 14px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line);
}
.ocenka-vnutri h3 { margin: 0 0 8px; font-family: var(--shrift-krug); }
.ocenka-vnutri p { margin: 0 0 14px; font-size: 16px; line-height: 1.5; }
.ocenka-pole {
  display: block; width: 100%; min-height: 96px; margin: 0 0 12px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink); font: inherit; font-size: 16px; resize: vertical;
}
.ocenka-pole:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ocenka-vnutri .ocenka-status { margin: 12px 0 0; font-size: 15px; font-weight: 700; }
.ocenka-status-ok { color: var(--accent); }
.ocenka-status-sboj { color: var(--accent-text); }