/* ==========================================================================
   FishCraft

   Идея страницы одна: спуск. Сверху — поверхность и закат, вниз по прокрутке
   вода темнеет, слева идёт шкала глубины. Поэтому блоки главной разной формы
   и не повторяют друг друга: одинаковые карточки в три колонки — это не
   вёрстка, а обои.

   Шрифты: Minecraft (minecraft.ttf, кириллическая версия) — заголовки, кнопки,
   числа, интерфейс; системный гротеск — всё, что читают абзацами. Сетка
   шрифта — 128 единиц на пиксель при 1024 на кегль, поэтому кегль пиксельного
   обязан быть кратен восьми: только тогда пиксель буквы ложится на целое число
   экранных. Все такие размеры собраны в переменных --px-* и меняются
   ступенями через медиазапросы — clamp() здесь запрещён, он даёт дробь.

   Библиотеки: motion.dev (появление, параллакс) и lenis (инерционная
   прокрутка). Обе лежат в public/vendor: CSP пускает скрипты только со 'self'.
   ========================================================================== */

@font-face {
  font-family: "Minecraft";
  src: url("/fonts/minecraft.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --void: #05080b;
  --ink: #090f14;
  --raise: rgba(255, 255, 255, 0.03);
  --raise-2: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);

  --text: #e9eef1;
  --muted: #8e9ba4;
  --dim: #5c6973;

  /* Один акцент, и он холодный: вода. Тёплого нет вовсе — жёлтый на тёмно-синем
     тянет на себя внимание сильнее любого текста, и страница про море начинает
     выглядеть как страница про распродажу.
     Акцент живёт тремя ступенями: --deep для глубины, --sea для середины,
     --cyan для света у поверхности. Они же собраны в градиент --tide — разрез
     толщи воды. Три остановки, а не две: на двух переход из синего в бирюзовый
     читается как «синий выцвел», на трёх — как вода.

     Ниже --ok/--warn/--danger: это не акценты, а статусы, и они единственные,
     кому позволен свой цвет. Зелёный и красный оставлены как есть — их читают
     не глядя. А вот жёлтый из «внимание» убран: на тёмно-синем он светится
     ярче всего на экране и притягивает взгляд к бейджу «выключена» вместо
     заголовка страницы. Вместо него холодная сталь — заметно, но не кричит. */
  --deep: #17557d;
  --sea: #2790b4;
  --cyan: #6fd0dd;
  --cyan-hi: #a6e6ee;
  --tide: linear-gradient(100deg, var(--deep) 0%, var(--sea) 46%, var(--cyan) 100%);
  --tide-hi: linear-gradient(100deg, #1c6693 0%, #2ea5cb 46%, #8fe0ea 100%);
  --ok: #6fc98a;
  --warn: #79b4d8;
  --danger: #e2727c;

  --pixel: "Minecraft", ui-monospace, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Гротеск — читаемая шкала, дробные значения здесь безвредны. */
  --t--1: 13px;
  --t-0: 15px;
  --t-1: 17px;
  --t-2: 20px;
  --t-3: clamp(22px, 2.2vw, 27px);
  --t-4: clamp(26px, 3vw, 34px);

  /* Пиксельный — только кратное восьми. Ступени, а не clamp.
     Шкала на ступень ниже, чем просится по числам: у этого шрифта прописная
     занимает семь пикселей из восьми, то есть при равном кегле он выглядит
     заметно крупнее гротеска. */
  --px-1: 16px;
  --px-2: 24px;
  --px-3: 24px;
  --px-4: 24px;
  --px-5: 32px;
  --px-6: 32px;

  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 56px);
  --rail: 64px; /* левая шкала глубины */
}

@media (min-width: 700px) {
  :root { --px-3: 32px; --px-4: 32px; --px-5: 40px; --px-6: 48px; }
}

@media (min-width: 1100px) {
  :root { --px-3: 32px; --px-4: 40px; --px-5: 48px; --px-6: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }
/* Пиксель-арт масштабируется целыми пикселями, иначе сглаживание превращает
   его в кашу. Векторные иконки — наоборот, им нужно обычное сглаживание. */
img { image-rendering: pixelated; max-width: 100%; display: block; }
img[src$=".svg"], svg { image-rendering: auto; }
/* Атрибут hidden проигрывает любому display в стилях (а он у карточек есть),
   поэтому фильтр гайдов без этой строки ничего не прятал. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: var(--t-1);
  line-height: 1.7;
  color: var(--text);
  background: var(--void);
  -webkit-text-size-adjust: 100%;
}

/* Внутренние страницы стоят на ровном фоне, главная — на спуске, у которого
   свой градиент в каждой зоне. Отсюда два разных фона у одного body. */
.page {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(126, 198, 210, 0.07), transparent 70%),
    var(--void);
}
.page--landing { background: var(--void); }

/* Межстрочный у пиксельного шрифта — только 1.25 или 1.5: при кегле, кратном
   восьми, оба дают целое число экранных пикселей, и базовая линия не попадает
   на дробную координату. */
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; line-height: 1.25; margin: 0 0 16px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--cyan); }
strong { font-weight: 600; }
code, kbd { font-family: var(--mono); font-size: 0.92em; }
kbd { padding: 2px 7px; border-radius: 5px; background: var(--raise); border: 1px solid var(--line); }
::selection { background: rgba(111, 208, 221, 0.28); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: var(--cyan); color: #04161d; font-family: var(--pixel); font-size: var(--px-1); }
.skip:focus { left: 0; top: 0; }
.main { flex: 1 0 auto; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.wrap--narrow { max-width: 820px; }
.wrap--page { padding-top: 72px; padding-bottom: 104px; }

/* Инерционная прокрутка. Пока она работает, страница не должна прыгать. */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* --------------------------------------------------------------------------
   Появление: переходы, а не кадры. Переход доигрывает даже в фоновой вкладке,
   где requestAnimationFrame стоит, — контент не может застрять невидимым.
   -------------------------------------------------------------------------- */
.has-motion [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0ms);
}
.has-motion [data-reveal].is-in { opacity: 1; transform: none; }

.word { display: inline-block; white-space: nowrap; }
.has-motion .char { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0ms); }
.has-motion .char.is-in { opacity: 1; transform: none; }

.has-motion [data-line] { transform: scaleX(0); transform-origin: left center; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--d, 0ms); }
.has-motion [data-line].is-in { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-reveal], .has-motion .char { opacity: 1; transform: none; }
  .has-motion [data-line] { transform: none; }
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(5, 8, 11, 0.72); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); min-height: 64px; display: flex; align-items: center; gap: 32px; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pixel); font-size: var(--px-2); }
.brand:hover { color: var(--text); }
.brand__mark { width: 24px; height: 24px; flex: none; }
/* Логотип набран градиентом по тексту: холодное к тёплому — те же два
   акцента, что и на главной кнопке. Цвет остаётся запасным, если браузер
   не умеет background-clip: text. */
.brand__text { background: var(--tide); -webkit-background-clip: text; background-clip: text; color: var(--cyan); -webkit-text-fill-color: transparent; }
.brand__accent { color: var(--cyan); }

.topnav { display: flex; gap: 24px; }
.topnav__link, .topbar__login { position: relative; color: var(--muted); font-size: var(--t-0); }
.topnav__link { padding-bottom: 2px; }
.topnav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--tide); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.topnav__link:hover, .topbar__login:hover, .topnav__link.is-active { color: var(--text); }
.topnav__link:hover::after, .topnav__link.is-active::after { transform: scaleX(1); }
.topbar__user { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-0); }
.topbar__avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: #04161d; font-family: var(--pixel); font-size: var(--px-1); line-height: 1; }

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 2px;
  background: var(--raise-2); border: 1px solid var(--line-2);
  color: var(--text); font-family: var(--pixel); font-size: var(--px-1); line-height: 1;
  cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.btn:hover { border-color: var(--text); color: var(--text); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn img { width: 16px; height: 16px; }

/* Главное действие страницы. Вода — единственная большая цветная площадь
   на экране, поэтому кнопка видна раньше текста. Тёмный текст поверх:
   на светлой бирюзе белый теряется. */
.btn--primary {
  background: var(--tide); border-color: transparent; color: #04161d;
  box-shadow: 0 0 0 rgba(39, 144, 180, 0);
}
.btn--primary:hover { background: var(--tide-hi); color: #04161d; border-color: transparent; box-shadow: 0 6px 26px rgba(39, 144, 180, 0.35); }
.btn--big { padding: 18px 32px; font-size: var(--px-2); }

/* Донат в шапке: тёплый контур, заливка приходит на наведении. */
.btn--donate { padding: 9px 18px; background: transparent; border-color: rgba(111, 208, 221, 0.5); color: var(--cyan); }
.btn--donate:hover { background: var(--cyan); border-color: var(--cyan); color: #04161d; }

.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { background: var(--raise); border-color: var(--text); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--dim); padding-inline: 8px; }
.btn--quiet:hover { background: transparent; border-color: transparent; color: var(--danger); }
.btn--full { width: 100%; }
.btn--small { padding: 10px 16px; }
.btn--tiny { padding: 5px 10px; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Текстовая ссылка со стрелкой — второй по важности переход. Набрана
   гротеском: стрелки в пиксельном шрифте нет, и подставленная из запасного
   она была бы другого роста. */
.link-arrow { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--t-0); }
.link-arrow::after { content: "→"; transition: transform 0.2s; }
.link-arrow:hover { color: var(--text); }
.link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Эхолот: шкала глубины слева. Метка едет по прокрутке, число и имя зоны
   меняются на ходу — это единственный элемент, который держит всю страницу
   как один спуск, а не как список секций.
   -------------------------------------------------------------------------- */
/* Эхолот — колонка, а не строка, и у колонки жёсткая ширина.
   Раньше подпись зоны стояла справа от шкалы и уезжала под текст страницы:
   правый край эхолота при любой ширине окна оказывался правее левого края
   колонки с текстом, потому что оба считались от одного центра, но эхолот
   прибавлял к своему левому краю полторы сотни пикселей читалки, а колонка —
   только внутренний отступ. Теперь имя зоны стоит вертикально вдоль шкалы,
   глубина — под ней, и вся конструкция занимает --gauge-w. Ниже 1280px
   эхолота нет вовсе: там просвета слева уже не хватает никакой ширине. */
.gauge {
  --gauge-w: 40px;
  position: fixed; left: max(14px, calc((100vw - var(--wrap)) / 2 - var(--gauge-w) - 8px));
  top: 50%; transform: translateY(-50%); z-index: 5;
  width: var(--gauge-w);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none;
}
/* Имя зоны читается снизу вверх — как надпись на борту, а не как перенос
   в три строки, которым «Полумрак» рвался бы посреди слова. */
.gauge__zone {
  font-style: normal; font-family: var(--mono); font-size: 11px; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan);
  writing-mode: vertical-rl; transform: rotate(180deg);
  max-height: 20vh; overflow: hidden; white-space: nowrap;
}
.gauge__scale { position: relative; width: 12px; height: min(38vh, 320px); display: flex; flex-direction: column; justify-content: space-between; }
.gauge__scale::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--line-2) 8%, var(--line-2) 92%, transparent); }
.gauge__tick { width: 5px; height: 1px; background: var(--line-2); }
.gauge__tick--major { width: 11px; background: rgba(255, 255, 255, 0.3); }
.gauge__marker { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(111, 208, 221, 0.16), 0 0 14px rgba(111, 208, 221, 0.7); transition: top 0.25s linear; }
.gauge__read { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0; font-family: var(--pixel); color: var(--dim); }
.gauge__read b { font-size: var(--px-1); font-weight: 400; color: var(--text); line-height: 1.25; }
.gauge__read span { font-size: 11px; font-family: var(--mono); letter-spacing: 0.1em; }
@media (max-width: 1279px) { .gauge { display: none; } }

/* --------------------------------------------------------------------------
   Зоны спуска. Каждая тонирует воду в свой цвет — от бирюзы к черноте.
   -------------------------------------------------------------------------- */
/* Толща воды собирается из четырёх слоёв, и ни один не повторяет другой:
   заливка зоны (::before), столбы света сверху (.zone__rays), силуэт дна
   снизу (.zone__floor) и живность с взвесью между ними. Раньше слой был один
   — плоский градиент из двух остановок, — и вода на всей странице выглядела
   одинаково крашеным прямоугольником.

   Каждая зона объявляет только свои цвета и силу света: правила формы одни
   на всех, иначе пять зон означали бы пять разных вёрсток. */
.zone {
  --water-top: transparent;
  --water-bottom: transparent;
  --rays: 0.7;
  --floor-fade: 0.5;
  position: relative; padding: clamp(72px, 11vw, 152px) 0; overflow: hidden;
  isolation: isolate; /* отрицательные слои живут внутри своей зоны */
}
.zone::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    /* Виньетка: у стенок кадра вода темнее, и от этого середина читается
       как просвет, а не как ровная заливка. */
    radial-gradient(130% 90% at 50% 34%, transparent 38%, rgba(2, 6, 10, 0.5) 100%),
    linear-gradient(180deg, var(--water-top), var(--water-bottom));
}
.zone--shallow { --water-top: rgba(31, 99, 116, 0.62); --water-bottom: rgba(18, 66, 86, 0.52); --rays: 1; --floor-fade: 0.62; }
.zone--reef { --water-top: rgba(18, 66, 86, 0.52); --water-bottom: rgba(13, 49, 67, 0.56); --rays: 0.68; --floor-fade: 0.58; }
.zone--twilight { --water-top: rgba(13, 49, 67, 0.56); --water-bottom: rgba(9, 31, 47, 0.64); --rays: 0.4; --floor-fade: 0.5; }
.zone--deep { --water-top: rgba(9, 31, 47, 0.64); --water-bottom: rgba(5, 17, 28, 0.74); --rays: 0.2; --floor-fade: 0.42; }
.zone--abyss { --water-top: rgba(5, 17, 28, 0.74); --water-bottom: rgba(2, 5, 9, 0.95); --rays: 0.08; --floor-fade: 0.34; }

/* Луч света сверху — граница зоны без линейки. Ниже по спуску его гасит
   собственный градиент зоны. */
.zone::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 220px; z-index: -3;
  background: radial-gradient(60% 100% at 50% 0%, rgba(126, 198, 210, 0.09), transparent 70%);
  pointer-events: none;
}

/* Столбы света. Полосы идут не отвесно, а с наклоном — так падает свет сквозь
   волну, — и очень медленно ходят вправо-влево. Маска гасит их к середине
   зоны: свет с поверхности не достаёт до дна, и на глубине от него остаётся
   только намёк (--rays). */
.zone__rays {
  position: absolute; left: -25%; right: -25%; top: -12%; height: 76%;
  /* Мягкость краёв набрана самим градиентом, а не filter: blur(). Размытие
     слоя во всю ширину экрана в каждой из пяти зон — это пять полноэкранных
     проходов на кадр; на слабой машине из-за них не успевает отрисоваться
     вообще ничего. Плавные остановки стоят ровно ноль. */
  background: repeating-linear-gradient(
    96deg,
    rgba(166, 230, 238, 0) 0px,
    rgba(166, 230, 238, 0) 34px,
    rgba(166, 230, 238, 0.045) 60px,
    rgba(166, 230, 238, 0.05) 68px,
    rgba(166, 230, 238, 0) 96px,
    rgba(166, 230, 238, 0) 138px
  );
  opacity: var(--rays);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 84%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.95), transparent 84%);
  animation: rays-drift 34s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes rays-drift {
  from { transform: translateX(-2.5%) skewX(-1deg); }
  to { transform: translateX(2.5%) skewX(1.5deg); }
}

/* Дно зоны: спрайт-силуэт, повторённый по горизонтали и растворённый кверху.
   Размер жёсткий и кратный исходному (192×48 → ×2), иначе пиксель поедет. */
.zone__floor {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 96px;
  background-repeat: repeat-x; background-position: center bottom;
  background-size: 384px 96px;
  image-rendering: pixelated;
  opacity: var(--floor-fade);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 62%);
  mask-image: linear-gradient(180deg, transparent, #000 62%);
  pointer-events: none;
}
.zone--shallow .zone__floor { background-image: url("/img/floor-shallow.png"); }
.zone--reef .zone__floor { background-image: url("/img/floor-reef.png"); }
.zone--twilight .zone__floor { background-image: url("/img/floor-twilight.png"); }
.zone--deep .zone__floor { background-image: url("/img/floor-deep.png"); }
.zone--abyss .zone__floor { background-image: url("/img/floor-abyss.png"); height: 128px; background-size: 384px 128px; }

/* Взвесь. То, из-за чего вода выглядит водой, а не цветным стеклом: мелкая
   органика, которая медленно оседает вниз. Пузырьки идут вверх, взвесь —
   вниз, и это встречное движение и даёт глубину. */
.mote {
  position: absolute; top: -12px;
  width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%;
  background: rgba(198, 232, 240, 0.8);
  opacity: 0; pointer-events: none;
}
.mote.is-placed { animation: mote-fall var(--dur, 40s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes mote-fall {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: var(--o, 0.35); }
  92% { opacity: var(--o, 0.35); }
  100% { transform: translate3d(var(--dx, 12px), var(--h, 700px), 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mote, .zone__rays { animation: none !important; } }

/* Живность плывёт в фоне зоны. Она декоративна: позиции ставит скрипт через
   CSSOM (инлайн-стили запрещены CSP), без скрипта её просто нет. */
.zone__life { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.life { position: absolute; opacity: 0; transition: opacity 0.6s ease; }
.life.is-placed { opacity: var(--o, 0.4); }
.life--row1 { --o: 0.22; }
.life--row2 { --o: 0.32; }
.life--row3 { --o: 0.5; }
.life--anchored { bottom: 0; }

@keyframes swim { from { transform: translateX(-30vw) scaleX(var(--sx, 1)); } to { transform: translateX(130vw) scaleX(var(--sx, 1)); } }
.life.is-placed:not(.life--anchored) { animation: swim var(--dur, 90s) linear infinite; animation-delay: var(--delay, 0s); }
@media (prefers-reduced-motion: reduce) { .life { animation: none !important; } }

/* Пузырьки. Они не круги залитого цвета: пузырёк в воде — это блик сверху
   слева и тонкая стенка, всё остальное сквозное. Высота подъёма (--h) —
   высота своей зоны, её ставит скрипт: пузырь должен уходить именно за верх
   блока, а не на случайные сто вьюпортов. Всплывая, он ещё и сносится вбок —
   вода не стоит на месте. */
.bubble {
  position: absolute; bottom: -24px;
  width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.6), rgba(166, 230, 238, 0.12) 62%, rgba(166, 230, 238, 0) 72%);
  border: 1px solid rgba(166, 230, 238, 0.28);
  opacity: 0; pointer-events: none;
}
.bubble.is-placed { animation: bubble-rise var(--dur, 18s) linear infinite; animation-delay: var(--delay, 0s); }

@keyframes bubble-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  12% { opacity: var(--o, 0.5); }
  50% { transform: translate3d(14px, calc(var(--h, 600px) * -0.5), 0) scale(1); }
  88% { opacity: var(--o, 0.5); }
  100% { transform: translate3d(-8px, calc(var(--h, 600px) * -1), 0) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .bubble { display: none; } }

/* --------------------------------------------------------------------------
   Экран знакомства
   -------------------------------------------------------------------------- */
.hero.zone { min-height: min(92vh, 860px); display: flex; align-items: center; padding: 96px 0 72px; }
.hero { position: relative; overflow: hidden; }
.hero__scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; color: var(--dim); font-family: var(--mono); font-size: var(--t--1); letter-spacing: 0.16em; text-transform: uppercase; }
.hero__scroll::after { content: ""; display: block; width: 1px; height: 26px; margin: 10px auto 0; background: linear-gradient(180deg, var(--line-2), transparent); }
.hero__scene { position: absolute; left: -3%; right: -3%; top: -6%; bottom: -12%; z-index: -1; background: url("/img/hero.png") center 60% / cover no-repeat; will-change: transform; }
.hero__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 11, 0.62) 0%, rgba(5, 8, 11, 0.55) 40%, var(--void) 96%); }
.hero__inner { max-width: var(--wrap); width: 100%; margin: 0 auto; padding: 0 var(--pad); }

.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--dim); font-family: var(--mono); font-size: var(--t--1); letter-spacing: 0.14em; text-transform: uppercase; }
.kicker::before { content: ""; width: 40px; height: 1px; background: var(--cyan); }
.kicker .on { color: var(--ok); }

.hero__title { font-size: var(--px-6); line-height: 1.25; margin-bottom: 28px; max-width: 18ch; }
.hero__title b { font-weight: 400; color: var(--cyan); }
.hero__text { max-width: 46ch; color: var(--muted); font-size: var(--t-2); margin-bottom: 40px; }
.hero__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Блоки главной. Каждый своей формы — в этом весь смысл.
   -------------------------------------------------------------------------- */
.block__index { font-family: var(--mono); font-size: var(--t--1); color: var(--dim); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 20px; }
.block__index::before { content: ""; display: inline-block; width: 24px; height: 1px; margin-right: 12px; vertical-align: middle; background: var(--cyan); }

/* 01 — правило проекта: одно большое предложение и три сноски. */
.rule { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.rule__statement { font-family: var(--pixel); font-size: var(--px-4); line-height: 1.5; margin: 0; }
.rule__statement em { font-style: normal; color: var(--cyan); }
.rule__notes { display: grid; gap: 24px; padding-top: 8px; }
.rule__note { color: var(--muted); font-size: var(--t-0); padding-left: 20px; border-left: 1px solid var(--line); transition: border-color 0.25s; }
.rule__note:hover { border-left-color: var(--cyan); }
.rule__note b { display: block; color: var(--text); font-family: var(--pixel); font-size: var(--px-1); line-height: 1.5; font-weight: 400; margin-bottom: 8px; }

/* 02 — цепь из двенадцати гаваней. Подпись держится ровно под своей меткой. */
.chain { margin-top: 48px; }
.chain__rail { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; padding-bottom: 22px; }
.chain__rail::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.chain__mark { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: default; }
.chain__stem { width: 1px; height: 26px; background: var(--line-2); transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s; }
.chain__lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); transition: background 0.4s, box-shadow 0.4s; }
.chain__num { font-family: var(--mono); font-size: var(--t--1); color: var(--dim); }
.chain__mark.is-lit .chain__lamp { background: var(--cyan); box-shadow: 0 0 0 4px rgba(111, 208, 221, 0.15), 0 0 18px rgba(111, 208, 221, 0.6); }
.chain__mark.is-lit .chain__stem { height: 44px; background: linear-gradient(180deg, var(--cyan), transparent); }
.chain__mark.is-lit .chain__num { color: var(--cyan); }
.chain__mark:hover .chain__lamp, .chain__mark:focus-visible .chain__lamp { background: var(--text); }
.chain__mark::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(4px);
  padding: 8px 12px; border: 1px solid var(--line-2); background: var(--ink);
  color: var(--text); font-size: var(--t--1); line-height: 1.5; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s;
}
.chain__mark:hover::after, .chain__mark:focus-visible::after { opacity: 1; transform: translateX(-50%); }
.chain__caption { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--dim); font-family: var(--mono); font-size: var(--t--1); letter-spacing: 0.1em; text-transform: uppercase; }

/* 03 — петля: пять шагов в один ряд, между ними дорисовывается линия. */
.loop { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 56px; }
.loop__step { position: relative; display: flex; flex-direction: column; gap: 16px; padding-right: 20px; }
.loop__line { position: absolute; left: 26px; right: 20px; top: 13px; height: 1px; background: var(--line-2); transform-origin: left center; }
.loop__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); position: relative; z-index: 1; box-shadow: 0 0 0 4px rgba(111, 208, 221, 0.12); }
.loop__title { font-family: var(--pixel); font-size: var(--px-1); line-height: 1.5; }
.loop__text { color: var(--dim); font-size: var(--t-0); }

/* 04 — гайды списком. Сетка карточек здесь врала бы: они разной важности. */
.rows { border-top: 1px solid var(--line); }
.rows--news { margin-top: 56px; }
.row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); transition: padding-left 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s; }
.row:hover { padding-left: 12px; border-color: var(--line-2); }
.row__index { font-family: var(--mono); font-size: var(--t--1); color: var(--dim); }
.row__title { display: block; font-family: var(--pixel); font-size: var(--px-2); line-height: 1.25; margin: 0 0 10px; }
.row:hover .row__title { color: var(--cyan); }
.row__text { color: var(--muted); font-size: var(--t-0); margin: 0; max-width: 62ch; }
.row__meta { color: var(--dim); font-family: var(--mono); font-size: var(--t--1); white-space: nowrap; }

/* Финальная полоса */
/* Кнопка внутри колонки сносок: сноски идут текстом, а действие — единственная
   плашка, и между ними нужен воздух больше обычного зазора сетки. */
.rule__notes .btn { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Общие элементы внутренних страниц
   -------------------------------------------------------------------------- */
.section__eyebrow { margin: 0 0 12px; color: var(--dim); font-family: var(--mono); font-size: var(--t--1); letter-spacing: 0.16em; text-transform: uppercase; }

.grid { display: grid; gap: 20px; }
.grid--guides { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--downloads { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 36px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 24px; }

/* Карточки и панели — одна плоскость на всём сайте: приподнятая заливка,
   тонкая рамка, никаких теней. Тени тут были бы стеклом поверх пикселя. */
.card, .panel, .box, .auth__panel, .stat, .toc, .auth__side { position: relative; background: var(--raise); border: 1px solid var(--line); }
.card { display: block; padding: 26px; color: inherit; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
a.card:hover { border-color: var(--line-2); background: var(--raise-2); color: inherit; transform: translateY(-2px); }
.card__title { font-size: var(--px-2); margin: 0 0 12px; }
.card__text { color: var(--muted); margin: 0; font-size: var(--t-0); }
.card__meta { display: block; margin-top: 16px; color: var(--dim); font-family: var(--mono); font-size: var(--t--1); }

/* Гайд-карточка: номер строкой сверху, метка, заголовок, время чтения внизу. */
.card--guide { display: flex; flex-direction: column; }
.card--guide .card__text { flex: 1; }
.card--guide::after {
  content: ""; position: absolute; left: -1px; top: -1px; width: 3px; height: 0;
  background: var(--tide); transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card--guide:hover::after { height: calc(100% + 2px); }

.card--download { text-align: center; }
.card--download .slot { margin: 0 auto 16px; }
.card--download .btn { margin-top: 16px; }
.card--download.is-disabled { opacity: 0.5; }

/* Слот — квадрат под иконку предмета, единственная деталь, оставшаяся от
   интерфейса игры. Из слотов собраны карточки скачивания и строки списков. */
.slot { display: grid; place-items: center; flex: none; width: 48px; height: 48px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line-2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.slot img { width: 24px; height: 24px; }
/* В слоте лаунчера лежит не предмет, а знак системы: вектор, красится
   вместе с карточкой, поэтому у него свой цвет и свой размер. */
.slot svg { width: 24px; height: 24px; fill: var(--cyan); transition: fill 0.2s; }
.card--download:hover .slot svg { fill: var(--cyan-hi); }
.slot--big { width: 64px; height: 64px; }
.slot--big img, .slot--big svg { width: 32px; height: 32px; }
.slot--small { width: 32px; height: 32px; }
.slot--small img { width: 16px; height: 16px; }
.slot__num { font-family: var(--pixel); font-size: var(--px-1); color: var(--cyan); }

.stat { padding: 20px; text-align: center; }
.stat__value { display: block; font-family: var(--pixel); font-size: var(--px-3); color: var(--cyan); }
.stat__label { display: block; margin-top: 8px; color: var(--dim); font-size: var(--t--1); }
.stat--panel { text-align: left; }

.tag { display: inline-block; margin-bottom: 12px; padding: 3px 10px; border: 1px solid var(--line); color: var(--dim); font-family: var(--mono); font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.08em; }
.badge { display: inline-block; padding: 1px 9px; background: var(--raise); border: 1px solid var(--line); color: var(--muted); font-size: var(--t--1); }
.badge--ok { color: var(--ok); border-color: rgba(111, 201, 138, 0.35); }
.badge--warn { color: var(--warn); border-color: rgba(121, 180, 216, 0.4); }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.chip { padding: 8px 16px; background: transparent; border: 1px solid var(--line); color: var(--muted); font: inherit; font-size: var(--t-0); cursor: pointer; transition: border-color 0.18s, color 0.18s, background 0.18s; }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip--filter.is-active { border-color: var(--cyan); color: var(--cyan); background: rgba(111, 208, 221, 0.08); }

/* Списки и таблицы */
.deflist { margin: 0; display: grid; gap: 14px; }
.deflist > div { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.deflist > div:last-child { border-bottom: 0; padding-bottom: 0; }
.deflist dt { color: var(--dim); font-size: var(--t-0); }
.deflist dd { margin: 0; text-align: right; font-size: var(--t-0); }

.table-wrap { overflow-x: auto; margin-bottom: 18px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-0); }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { color: var(--dim); font-family: var(--mono); font-size: var(--t--1); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
.table .num { font-family: var(--pixel); font-size: var(--px-1); color: var(--cyan); }
.table tr.is-current td { background: var(--raise); }
.table--dense th, .table--dense td { padding: 8px 10px; font-size: var(--t--1); }
.table__actions { display: flex; gap: 8px; }

.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.events__item { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--t--1); }
.events__event { font-family: var(--mono); color: var(--text); }
.events__meta { color: var(--dim); display: flex; align-items: center; gap: 10px; }
.inline-form { display: inline; }

.orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: var(--t-0); }
.orders__item { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.orders__status--paid { color: var(--ok); }
.orders__status--pending { color: var(--warn); }

.ticks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 22px; color: var(--muted); font-size: var(--t-0); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 1px; background: var(--cyan); }

.steps-list { margin: 0; padding-left: 22px; display: grid; gap: 12px; color: var(--muted); }
.steps-list li::marker { color: var(--cyan); font-family: var(--mono); }

.codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.codes li { padding: 12px; background: rgba(0, 0, 0, 0.4); border: 1px dashed var(--line-2); text-align: center; font-family: var(--mono); color: var(--cyan); }
/* Настройка второго фактора.

   QR обязан лежать на белом: сканеры ищут тёмное на светлом, и код, вывернутый
   под тёмную тему страницы, читается заметно хуже, а частью приложений — не
   читается вовсе. Поэтому светлая карточка внутри тёмной панели, и это не
   недосмотр вёрстки. */
.twofa__grid { display: grid; gap: 28px; grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.twofa__qr { display: grid; justify-items: center; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 0 0 1px rgba(111, 208, 221, 0.25), 0 14px 34px rgba(0, 0, 0, 0.45); }
.twofa__qr svg { display: block; width: 176px; height: 176px; }
.twofa__qr-note { margin: 0; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: #5c6973; }
.twofa__body { display: grid; gap: 20px; }

/* Ключ одной строкой. Раньше он выводился восемью блоками, и при копировании
   между ними вставлялись переносы — приложение отвечало «недопустимое
   значение». Теперь копируется цельная строка, а группы по четыре оставлены
   ниже только чтобы читать глазами. */
.keyline { display: grid; gap: 8px; }
.keyline__label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--dim); }
.keyline__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.keyline__value { flex: 1 1 260px; min-width: 0; padding: 12px 14px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line-2); border-radius: 6px; font-family: var(--mono); font-size: var(--t--1); color: var(--cyan); letter-spacing: 0.06em; word-break: break-all; user-select: all; }
.keyline__copy { flex: 0 0 auto; }
.keyline__groups { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.14em; }

@media (max-width: 720px) {
  .twofa__grid { grid-template-columns: minmax(0, 1fr); }
  .twofa__qr { justify-self: center; }
}

.code-block { margin-top: 18px; display: grid; gap: 10px; }
.code-block__label { margin: 6px 0 0; color: var(--dim); font-size: var(--t--1); }
.code-block code, .hash { display: block; padding: 14px 16px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); color: var(--ok); font-size: var(--t--1); overflow-x: auto; }
.hash { word-break: break-all; }
.hashline { margin-top: 16px; }
.hashline summary { cursor: pointer; color: var(--dim); font-size: var(--t--1); }
.hashline summary::marker { color: var(--cyan); }

/* Формы */
.auth { max-width: var(--wrap); margin: 0 auto; padding: 72px var(--pad) 104px; display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: start; }
.auth--narrow { grid-template-columns: minmax(0, 460px); justify-content: center; }
.auth__panel { padding: clamp(24px, 4vw, 36px); }
.auth__panel--center { text-align: center; }
.auth__head { margin-bottom: 28px; }
.auth__title { font-size: var(--px-4); margin-bottom: 12px; }
.auth__lead { color: var(--muted); margin: 0; font-size: var(--t-0); }
.auth__foot { margin: 28px 0 0; color: var(--dim); text-align: center; font-size: var(--t-0); }
.auth__side { padding: 28px; }
.auth__side-title { font-size: var(--px-2); margin-bottom: 18px; }
.auth__note { margin: 20px 0 0; color: var(--dim); font-size: var(--t--1); line-height: 1.7; }

.sheet { max-width: 920px; margin: 0 auto; padding: 72px var(--pad) 104px; display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.box { padding: clamp(24px, 4vw, 36px); }
.box--form { width: min(460px, 100%); }
.box--side { width: min(300px, 100%); }
.box__title { font-size: var(--px-4); margin-bottom: 12px; }
.box__subtitle { font-size: var(--px-2); margin: 28px 0 14px; }
.box__subtitle--first { margin-top: 0; }
.box__lead { color: var(--muted); font-size: var(--t-0); }
.box__foot { margin: 18px 0 0; color: var(--dim); font-size: var(--t--1); line-height: 1.7; }
.rate { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 24px 0; padding: 16px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); color: var(--muted); font-size: var(--t-0); text-align: center; }
.rate img { width: 20px; height: 20px; }
.rate strong { font-family: var(--pixel); font-size: var(--px-1); color: var(--cyan); font-weight: 400; }

.form { display: grid; gap: 18px; }
.form--inline { grid-template-columns: 1fr auto; align-items: end; }
.form__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.form__link { font-size: var(--t-0); color: var(--muted); }

.field { display: grid; gap: 8px; }
.field__label { font-family: var(--mono); font-size: var(--t--1); color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
.field__input { width: 100%; padding: 14px 16px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: var(--t-0); transition: border-color 0.18s, background-color 0.18s; }
.field__input::placeholder { color: var(--dim); }
.field__input:focus { outline: none; border-color: var(--cyan); background: rgba(0, 0, 0, 0.55); }
/* Поле, заполненное верно. Класс ставит app.js по штатной проверке браузера
   (required, pattern, type, minlength), поэтому подсказка не расходится с тем,
   что потом скажет сервер. Галочка — фон самого поля: так она стоит ровно
   в его правом краю и не зависит от того, есть ли над полем метка. */
.field__input.is-ok {
  border-color: rgba(111, 201, 138, 0.5);
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.4 3.3L13 4.7' fill='none' stroke='%236fc98a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  animation: check-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Галочка вырастает на своём месте, а не прилетает откуда-то со стороны:
   у вердикта нет направления, и движение поперёк поля его выдумывало. */
@keyframes check-pop {
  from { background-size: 0 0; }
  to { background-size: 16px 16px; }
}
.field__input.is-bad { border-color: rgba(226, 114, 124, 0.5); }

/* Виджет reCAPTCHA приходит своей вёрсткой; наше дело — только отступ
   и то, чтобы на узком экране он не выпирал из формы. */
.captcha { max-width: 100%; overflow: hidden; }

.field__input--short { max-width: 150px; }
.field__input--code { max-width: 240px; font-family: var(--mono); letter-spacing: 0.3em; }
.field__input--area { resize: vertical; min-height: 130px; }
.field__hint { color: var(--dim); font-size: var(--t--1); }

/* Раскладка поля суммы и итога — ниже, в блоке «Поле суммы со ступенькой»:
   там же, где живут стрелки, чтобы правила одного узла не искать в двух местах. */
.amount__out { color: var(--dim); font-size: var(--t--1); }
.amount__out strong { font-family: var(--pixel); font-size: var(--px-1); color: var(--cyan); font-weight: 400; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick__btn { padding: 8px 14px; background: transparent; border: 1px solid var(--line); color: var(--muted); font: inherit; font-family: var(--mono); font-size: var(--t--1); cursor: pointer; transition: border-color 0.18s, color 0.18s; }
.quick__btn:hover { color: var(--text); border-color: var(--cyan); }

.check { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: var(--t--1); line-height: 1.65; }
.check--inline { align-items: center; }
.check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--cyan); flex: none; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meter { display: block; height: 3px; background: var(--line); }
.meter__bar { display: block; height: 100%; width: 0; background: var(--tide); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }

.alert { padding: 16px 18px; margin-bottom: 24px; background: var(--raise); border-left: 2px solid var(--line-2); font-size: var(--t-0); }
.alert__title { display: block; margin-bottom: 8px; font-family: var(--pixel); font-size: var(--px-1); line-height: 1.5; }
.alert__list { margin: 0; padding-left: 20px; }
.alert p { margin: 0; }
.alert--error { border-left-color: var(--danger); }
.alert--ok { border-left-color: var(--ok); }
.alert--warn { border-left-color: var(--warn); }
.alert .btn { margin-top: 14px; }

.error-code { font-family: var(--pixel); font-size: var(--px-6); line-height: 1; margin: 0 0 16px; color: var(--cyan); }

/* Страницы */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-head--center { justify-content: center; text-align: center; border-bottom: 0; }
.page-head--center > div { max-width: 720px; }
.page-head__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.page-title { font-size: var(--px-5); margin-bottom: 12px; }
.page-lead { color: var(--muted); margin: 0; font-size: var(--t-0); }

.panel { padding: 26px; margin-bottom: 20px; }
.panel--accent { border-color: rgba(111, 208, 221, 0.4); }
.panel__title { font-family: var(--mono); font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 20px; color: var(--dim); }
.panel__note { color: var(--muted); font-size: var(--t-0); }
.panel__empty { color: var(--dim); margin: 0; }
.panels { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.coins { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.coins img { width: 24px; height: 24px; }
.coins strong { font-family: var(--pixel); font-size: var(--px-3); color: var(--cyan); font-weight: 400; }

.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 56px; align-items: start; }
.guide { max-width: 740px; }
.guide__head { margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.guide__title { font-size: var(--px-5); }
.guide__meta { color: var(--dim); font-family: var(--mono); font-size: var(--t--1); margin: 0; }
.guide__nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); flex-wrap: wrap; font-size: var(--t-0); }
.guide__nav-link { color: var(--muted); }
.guide__nav-link:hover { color: var(--cyan); }
.guide__nav-link--next { margin-left: auto; text-align: right; }

.toc { position: sticky; top: 88px; padding: 22px; }
.toc__title { font-family: var(--mono); font-size: var(--t--1); color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; }
.toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: var(--t--1); }
.toc__list a { color: var(--muted); }
.toc__list a:hover { color: var(--cyan); }

.prose { color: var(--muted); font-size: var(--t-1); line-height: 1.85; }
.prose h2 { margin-top: 2em; font-size: var(--px-3); line-height: 1.5; color: var(--text); }
.prose h3 { margin-top: 1.6em; font-size: var(--px-2); line-height: 1.5; color: var(--cyan); }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose li::marker { color: var(--dim); }
.prose strong { color: var(--text); }
.prose blockquote { margin: 1.6em 0; padding: 16px 22px; background: var(--raise); border-left: 2px solid var(--cyan); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose code { padding: 2px 6px; background: rgba(0, 0, 0, 0.4); color: var(--cyan); }
.prose pre { padding: 18px; overflow-x: auto; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); }
.prose pre code { padding: 0; background: none; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.6em; font-size: var(--t-0); }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { color: var(--dim); font-weight: 400; font-family: var(--mono); font-size: var(--t--1); }
.prose__note { margin-top: 2.6em; padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: var(--t--1); }

.fineprint { margin-top: 36px; color: var(--dim); font-size: var(--t--1); text-align: center; }

/* Подвал */
.footer { flex: none; border-top: 1px solid var(--line); background: var(--ink); }
.footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 48px var(--pad); display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__left { max-width: 46ch; }
.footer__row { display: flex; align-items: center; gap: 28px; margin-bottom: 18px; flex-wrap: wrap; }
.brand--footer { font-size: var(--px-2); }
/* Соцсети: значок и подпись одной ссылкой. Значки — инлайновый SVG в разметке
   (внешние картинки грузить неоткуда, да и CSP не пустит), красятся
   currentColor, поэтому наведение красит их вместе с текстом. */
.socials { display: flex; align-items: center; gap: 18px; font-size: var(--t--1); flex-wrap: wrap; }
.social { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); transition: color 0.2s; }
.social svg { width: 18px; height: 18px; fill: currentColor; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.social:hover { color: var(--cyan); }
.social:hover svg { transform: translateY(-2px) scale(1.12); }
.social--tg:hover { color: #4aa8e0; }
.social--dc:hover { color: #8b93f5; }
@media (prefers-reduced-motion: reduce) { .social:hover svg { transform: none; } }
.socials a, .footer__docs a { color: var(--dim); }
.socials a:hover, .footer__docs a:hover { color: var(--text); }
.footer__note { margin: 0; color: var(--dim); font-size: var(--t--1); line-height: 1.7; }
.footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; text-align: right; }

/* Плашки способов оплаты сняты до подключения провайдера: рисовать «Т-Банк»,
   «СБП» и «МИР» своими руками нельзя — это чужие товарные знаки со своими
   правилами начертания. Провайдер выдаёт брендбук и сами файлы логотипов при
   подключении; тогда они лягут в public/img и вернутся сюда. */
.footer__docs { display: flex; flex-direction: column; gap: 8px; font-size: var(--t--1); }

/* Реквизиты исполнителя.
   Отделены от «все права защищены» линией, а не пустотой: юридический блок
   должен читаться как отдельная сущность, иначе он сливается с копирайтом и
   его перестают замечать — а его назначение ровно обратное. Сетка в две
   колонки, подпись слева фиксированной ширины, значение прижато к ней: так
   значения встают по одной линии. Сетка на контейнере, а не на строке: у
   каждой строки своя сетка считала бы ширину подписи заново, и «ИНН» получил бы
   колонку уже, чем «ИСПОЛНИТЕЛЬ» — значения встали бы лесенкой. Ширина колонки
   auto, а не в пикселях: слово «ИСПОЛНИТЕЛЬ» занимало ровно 96px при колонке в
   96px, то есть держалось на нуле запаса. На узком экране список складывается
   в столбик — см. медиазапрос ниже. */
.legal {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: baseline;
}
.legal__row { display: contents; }
.legal__key {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.legal__val { margin: 0; font-size: var(--t--1); color: var(--muted); overflow-wrap: anywhere; }
/* Цифры моноширинным: номер, который переписывают в заявление или в чат,
   должен читаться цифра за цифрой, а не пропорциональным шрифтом, где 1 и 7
   похожи. Табличные цифры выравнивают разряды между строками. */
.legal__val--num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--text); }
/* Почта — единственная ссылка в блоке. Ведёт себя как остальные ссылки
   подвала: приглушена, светлеет под курсором. */
.legal__val a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); transition: color 0.2s; }
.legal__val a:hover { color: var(--cyan); border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .rule { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .loop { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .loop__line { display: none; }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc { position: static; order: -1; }
  .chain__num { display: none; }
}

@media (max-width: 620px) {
  .topbar__inner { gap: 14px; min-height: 58px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  /* Меню уезжает под шапку, а не исчезает: два пункта — это не то,
     ради чего заводят выдвижную панель. */
  .topnav { order: 3; width: 100%; gap: 20px; padding-top: 4px; }
  .topbar__right { gap: 14px; }
  .brand { font-size: var(--px-1); }
  .brand__mark { width: 20px; height: 20px; }
  .hero { min-height: auto; padding: 64px 0 56px; }
  /* Подсказка «ниже — глубже» приколота к низу экрана знакомства, а на узком
     он кончается прямо под кнопками — и она садилась поверх них. На телефоне
     прокрутка и так очевидна, поэтому подсказка просто не нужна. */
  .hero__scroll { display: none; }
  .btn--big { padding: 16px 24px; font-size: var(--px-1); }
  .row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
  .row__index, .row__meta { font-size: var(--t--1); }
  .loop { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; }
  .footer__right { align-items: flex-start; text-align: left; }
  /* Реквизиты в одну колонку: подпись над значением.
     На узком экране колонка подписей отъедала треть ширины, а значению
     оставалась половина — имя ломалось на две строки посреди слова. Столбиком
     каждая строка получает всю ширину, и переполнить её нечем. */
  .legal { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .legal__key { font-size: 10px; margin-top: 9px; }
  .legal__key:first-child { margin-top: 0; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .chain__mark::after { display: none; }
}


/* --------------------------------------------------------------------------
   Поле суммы со ступенькой

   Родные стрелки <input type="number"> сняты и заменены двумя кнопками.
   Причин две. Первая — вид: браузер рисует их своим системным светлым
   виджетом, который на тёмной форме выглядит вставкой из чужого интерфейса,
   и ни размер, ни цвет ему не задать. Вторая — поведение: у родных стрелок
   зажатие пролистывает значение с системной скоростью, и на счёте это
   выглядит поломкой. Здесь шаг ровный, сотнями, с разгоном (см. app.js).
   -------------------------------------------------------------------------- */
/* Родные стрелки сняты у всех числовых полей сайта, а не только у суммы:
   иначе они всё равно всплывали бы на наведении в панели админа — тем же
   системным светлым виджетом, из-за которого их и убрали. Там, где шаг
   действительно нужен, стоит своя ступенька; в остальных полях число
   набирают руками, и стрелки в них — украшение, которое портит вид. */
.field__input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.field__input[type="number"]::-webkit-outer-spin-button,
.field__input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper { position: relative; flex: 1; min-width: 0; }
.stepper__input { padding-right: 48px; }
/* Галочку в это поле не ставим: она встала бы под стрелками. Про верность
   суммы и так говорит строка «= столько-то фишеров» справа. */
.stepper__input.is-ok { background-image: none; padding-right: 48px; }

.stepper__arrows {
  position: absolute; right: 1px; top: 1px; bottom: 1px; width: 36px;
  display: grid; grid-template-rows: 1fr 1fr;
  border-left: 1px solid var(--line);
}
.stepper__btn {
  display: grid; place-items: center;
  padding: 0; background: transparent; border: 0; color: var(--dim);
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
.stepper__btn + .stepper__btn { border-top: 1px solid var(--line); }
.stepper__btn:hover { color: var(--cyan); background: rgba(111, 208, 221, 0.08); }
.stepper__btn:active, .stepper__btn.is-held { color: var(--cyan-hi); background: rgba(111, 208, 221, 0.18); }
.stepper__btn svg { width: 9px; height: 6px; fill: currentColor; }
.stepper__input:focus ~ .stepper__arrows { border-left-color: rgba(111, 208, 221, 0.5); }

.amount { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.amount__out { display: flex; flex-direction: column; gap: 2px; }
.amount__bonus { font-style: normal; color: var(--ok); font-size: var(--t--1); }
.amount__bonus.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   Лестница бонусов к пополнению
   -------------------------------------------------------------------------- */
.ladder { margin: 0 0 24px; }
.ladder__title { margin: 0 0 10px; color: var(--dim); font-family: var(--mono); font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.12em; }
.ladder__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ladder__step {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--line);
  color: var(--dim); font-size: var(--t--1);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ladder__step b { font-family: var(--pixel); font-size: var(--px-1); font-weight: 400; color: var(--muted); }
.ladder__step em { font-style: normal; margin-left: auto; }
/* Действующая ступень подсвечена водой: человек должен видеть, какая именно
   строка сработала на введённой сумме, а не пересчитывать пороги глазами. */
.ladder__step.is-on { border-color: rgba(111, 208, 221, 0.45); background: rgba(111, 208, 221, 0.07); color: var(--muted); }
.ladder__step.is-on b { color: var(--cyan); }

.field__optional { color: var(--dim); font-family: var(--mono); text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Своя капча
   -------------------------------------------------------------------------- */
.captcha-box__row { display: flex; align-items: stretch; gap: 10px; }
.captcha-box__image {
  width: 240px; max-width: 100%; height: auto; flex: none;
  border: 1px solid var(--line); background: #040d14;
  image-rendering: auto; /* картинка векторная: пиксельное масштабирование ей во вред */
}
.captcha-box__reload {
  display: grid; place-items: center; width: 44px; flex: none;
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  cursor: pointer; transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.captcha-box__reload:hover { color: var(--cyan); border-color: var(--cyan); background: rgba(111, 208, 221, 0.08); }
.captcha-box__reload svg { width: 18px; height: 18px; fill: currentColor; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.captcha-box__reload:hover svg { transform: rotate(-180deg); }
.field__input--captcha { max-width: 240px; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   FISHPASS
   -------------------------------------------------------------------------- */
/* Карточка в донате. Единственное место на сайте, где акцент уходит в
   фиолетовое: элитная вода лежит ниже бездны, и её цвет обязан отличаться
   от воды остальных зон, иначе она не читается как другое место. */
.passcard {
  display: grid; gap: 10px; padding: 24px; margin-bottom: 24px;
  background: linear-gradient(160deg, rgba(58, 40, 92, 0.55), rgba(10, 24, 40, 0.7));
  border: 1px solid rgba(148, 122, 214, 0.4);
  color: var(--text);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.passcard:hover { border-color: rgba(178, 152, 240, 0.75); transform: translateY(-2px); box-shadow: 0 10px 34px rgba(60, 34, 110, 0.35); color: var(--text); }
.passcard__tag { font-family: var(--mono); font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.16em; color: #b79cf0; }
.passcard__title { font-family: var(--pixel); font-size: var(--px-3); line-height: 1.25; }
.passcard__title b { font-weight: 400; color: #c9b3ff; }
.passcard__text { color: var(--muted); font-size: var(--t--1); line-height: 1.7; }
.passcard__price { font-size: var(--t--1); color: var(--dim); }
.passcard__price b { font-family: var(--pixel); font-size: var(--px-1); font-weight: 400; color: var(--cyan); }
.passcard__cta { font-family: var(--mono); font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.12em; color: #b79cf0; }

/* Полоса на главной. Стоит в самом низу спуска и потому имеет право быть
   крупной: ниже неё на странице ничего нет, кроме новостей. */
.promo-pass {
  position: relative; display: flex; gap: 32px; flex-wrap: wrap; align-items: center;
  margin: 0 0 56px; padding: clamp(24px, 4vw, 40px);
  background: linear-gradient(120deg, rgba(44, 28, 74, 0.72), rgba(8, 20, 34, 0.72) 62%, rgba(12, 44, 62, 0.7));
  border: 1px solid rgba(148, 122, 214, 0.36);
  color: var(--text); overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.promo-pass:hover { border-color: rgba(178, 152, 240, 0.7); box-shadow: 0 12px 44px rgba(52, 28, 96, 0.4); color: var(--text); }
/* Свечение из-под правого края — как фонарь удильщика в темноте. */
.promo-pass__glow {
  position: absolute; right: -10%; top: -60%; width: 60%; height: 220%;
  background: radial-gradient(circle at 50% 50%, rgba(150, 118, 232, 0.3), transparent 62%);
  pointer-events: none;
}
.promo-pass__body { position: relative; display: grid; gap: 12px; flex: 1 1 380px; }
.promo-pass__tag { font-family: var(--mono); font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.18em; color: #b79cf0; }
.promo-pass__title { font-family: var(--pixel); font-size: var(--px-5); line-height: 1.25; }
.promo-pass__title b { font-weight: 400; color: #c9b3ff; }
.promo-pass__text { color: var(--muted); font-size: var(--t-0); line-height: 1.75; max-width: 56ch; }
.promo-pass__side { position: relative; display: grid; gap: 6px; justify-items: flex-start; }
.promo-pass__price { font-size: var(--t-0); color: var(--dim); }
.promo-pass__price b { font-family: var(--pixel); font-size: var(--px-3); font-weight: 400; color: var(--cyan); }
.promo-pass__term { color: var(--dim); font-size: var(--t--1); }
.promo-pass__cta {
  margin-top: 10px; padding: 12px 22px;
  background: linear-gradient(100deg, #4b2f8f, #7d5ad6 60%, #2790b4);
  color: #f0eaff; font-family: var(--pixel); font-size: var(--px-1); line-height: 1;
}

/* Страница пропуска */
.pass__head { max-width: 760px; margin-bottom: 40px; }
.pass__title { font-family: var(--pixel); font-size: var(--px-6); line-height: 1.25; margin-bottom: 18px; }
.pass__title b { font-weight: 400; color: #c9b3ff; }
.pass__lead { color: var(--muted); font-size: var(--t-1); line-height: 1.8; }
.pass__lead em { font-style: normal; color: var(--cyan); }
.pass__fair { color: var(--dim); font-size: var(--t--1); line-height: 1.75; padding-left: 16px; border-left: 2px solid rgba(148, 122, 214, 0.5); }
.pass__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.pass__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: var(--t-0); }
.pass__price { margin: 18px 0; color: var(--dim); font-size: var(--t-0); }
.pass__price strong { font-family: var(--pixel); font-size: var(--px-3); font-weight: 400; color: var(--cyan); }
.pass__buy .btn { margin-top: 12px; }
.prize__name { font-family: var(--pixel); font-size: var(--px-2); line-height: 1.25; color: var(--cyan); margin-bottom: 8px; }
.prize__hint { color: var(--muted); font-size: var(--t--1); }
.loot__hint { color: var(--dim); white-space: normal; min-width: 22ch; }
.rule__notes--wide { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* --------------------------------------------------------------------------
   Панель админа
   -------------------------------------------------------------------------- */
.panelnav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.1em; }
.panelnav a { color: var(--dim); }
.panelnav a:hover { color: var(--cyan); }
.btn--admin { border-color: rgba(111, 208, 221, 0.5); color: var(--cyan); }
.topnav__link--pass { color: #b79cf0; }
.topnav__link--pass:hover { color: #d3c2ff; }

/* Форма в строку: короткие поля панели не заслуживают колонки во всю ширину. */
.form--row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.form--row .field { flex: 1 1 150px; min-width: 0; }
.form--row .check { flex: 1 1 160px; }
.form--row .btn { flex: none; }

.tally { font-family: var(--pixel); font-size: var(--px-1); font-weight: 400; color: var(--cyan); }
.tally__note { display: block; color: var(--dim); font-size: var(--t--1); }

@media (max-width: 620px) {
  .promo-pass { gap: 20px; }
  .promo-pass__title { font-size: var(--px-4); }
  .captcha-box__row { flex-wrap: wrap; }
  .captcha-box__reload { width: 100%; height: 40px; }
  .amount { gap: 10px; }
}

/* --------------------------------------------------------------------------
   Панель администратора: список игроков, карточка игрока, журнал.

   Отдельного «дизайна админки» здесь нет и не нужно: те же панели, таблицы и
   кнопки, что на остальном сайте. Ниже — только то, чего на публичных
   страницах не встречалось: поля в строку, страничный переключатель, метки у
   ников и опасная секция с удалением.
   -------------------------------------------------------------------------- */

/* Метка рядом с ником: «бан», «админ», «почта не подтверждена». В таблице она
   стоит в строке, поэтому нижнего отступа у неё быть не должно. */
.table .tag { margin-bottom: 0; margin-left: 6px; padding: 1px 7px; }
.tag--danger { color: var(--danger); border-color: rgba(226, 114, 124, 0.45); }
.tag--ok { color: var(--ok); border-color: rgba(111, 201, 138, 0.4); }

/* Приглушённая колонка: даты, адреса и почта не должны спорить с ником. */
.table__dim { color: var(--dim); font-size: var(--t--1); }

/* Поле в строке фильтра: подпись сверху мелко, ввод под ней. */
.field--inline { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.field--inline .field__label { font-size: var(--t--1); color: var(--dim); }
.field--inline .field__input { padding: 8px 12px; }

.filters { align-items: flex-end; }

/* Страницы списка. Ссылками, а не кнопками: их копируют и отправляют друг другу. */
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.pager__link {
  min-width: 34px; padding: 6px 10px; text-align: center;
  border: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: var(--t--1);
}
.pager__link:hover { border-color: var(--line-2); color: var(--text); }
.pager__link.is-on { border-color: var(--cyan); color: var(--cyan); }

/* Секция, из которой нельзя вернуться: удаление аккаунта. Красная рамка —
   единственное место на сайте, где она уместна. */
.panel--danger { border-color: rgba(226, 114, 124, 0.4); }
.panel--danger .panel__title { color: var(--danger); }

.btn--danger { border-color: rgba(226, 114, 124, 0.55); color: var(--danger); }
.btn--danger:hover { background: var(--danger); border-color: var(--danger); color: #0b0f13; }

/* Объявление в шапке. Обычное — тихое, техработы — красное: разница между
   «прочтите» и «сейчас ничего не работает» должна быть видна не читая. */
.sitenotice {
  border-bottom: 1px solid var(--line);
  background: var(--raise);
  padding: 10px 0;
  color: var(--muted);
  font-size: var(--t-0);
}
.sitenotice--alert {
  background: rgba(226, 114, 124, 0.12);
  border-bottom-color: rgba(226, 114, 124, 0.45);
  color: var(--text);
}

/* Действия в карточке игрока идут колонкой: подписи у них длинные («Отметить
   почту подтверждённой»), а колонка панели узкая — в строку они не влезают
   и вылезали за её край. */
.form--stack { margin-bottom: 10px; }
.form--stack .btn { width: 100%; white-space: normal; text-align: left; }
.panels .form--row { align-items: flex-end; }
.panels .form--row .btn { flex: 1 1 auto; white-space: normal; }
.panels .field--inline { min-width: 120px; }