/* AUABYSS — Hybrid redesign (dev) */

@font-face {
  font-family: 'Exocet';
  src: url('../assets/fonts/ExocetDiabloFontEnAndRu.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --abyss-black: #0a0a0f;
  --abyss-dark: #0f1015;
  --abyss-gray: #1a1a22;
  --zombie-red: #8b0000;
  --zombie-red-bright: #c41e3a;
  --zombie-red-glow: rgba(196, 30, 58, 0.3);
  --ice-blue: #4a9eff;
  --ice-blue-bright: #7bb8ff;
  --text-white: #f0f0f5;
  --text-gray: #b0b0c0;
  --text-muted: #707080;
  /* Смысловые цвета показателей — ЕДИНЫЙ источник для таблицы топа и плиток
     профиля. До этого те же хексы жили в трёх местах (таблица, карточка и
     ручной canvas-рендер PNG) и расходились: в картинке ammo был #4ade80,
     в таблице #22c55e. */
  --stat-ammo: #22c55e;
  --stat-kills: #ff6b81;
  --stat-infects: #cf9be0;
  --stat-online: var(--ice-blue-bright);
  --stat-skill: #ffc107;
  --stat-elite: gold;
  --font-display: 'Exocet', serif;
  --font-body: 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;
  --nav-h: 67px; /* единая высота header — hero padding, footer, off-canvas top тянут отсюда */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 70px; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  background: var(--abyss-black);
  color: var(--text-white);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: var(--ice-blue); text-decoration: none; }
a:hover { color: var(--ice-blue-bright); }

/* Единственный способ скрыть элемент из JS на всём сайте (состояния профиля,
   «вне рейтинга» и т.п.) — раньше у каждого блока было своё правило
   `.foo.hidden`, и новый блок молча оставался видимым. */
.hidden { display: none !important; }

/* <picture> — контейнер выбора ФОРМАТА (webp + fallback), а НЕ элемент вёрстки.
   display:contents убирает его бокс, поэтому геометрия остаётся ровно прежней:
   .hero-bg по-прежнему позиционируется абсолютно от .hero (а не от picture) и не
   становится flex-элементом секции, .poster img остаётся прямым ребёнком карточки.
   На выбор <source> это не влияет — display не участвует в подборе ресурса. */
picture { display: contents; }

/* Exocet (Diablo) рисует строчные глифы слабо — особенно «t» на латинице сразу не читается.
   Поэтому ВЕСЬ текст, набранный Exocet'ом (var(--font-display)), выводим капсом. */
.nav-link, .title-main, .title-sub, .hero-tagline, .section-title,
.about-card h3, .class-name, .mode-title, .podium-rank, .footer-brand {
  text-transform: uppercase;
}

/* ---------- Effects ---------- */

#snowCanvas {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999;
}

/* ---------- Keyframes ---------- */

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
@keyframes abyss-pulse {
  0%, 100% { color: var(--ice-blue-bright); text-shadow: 0 0 20px rgba(74,158,255,0.3); }
  50% { color: var(--zombie-red-bright); text-shadow: 0 0 40px rgba(196,30,58,0.3), 0 0 80px rgba(139,0,0,0.5); }
}

/* ---------- Navbar ---------- */

.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  /* Фиксируем ТОЧНУЮ высоту = footer (--nav-h, border-box: рамка внутри). Свой
     вертикальный padding + min-height на inner двоили бы высоту → header выше footer. */
  height: var(--nav-h);
  padding: 0;
}

/* 1380px (не 1320, как у .container): левая группа ссылок при полном RU-наборе
   физически не влезала в колонку 1fr на 1320 — переполнение съедало гэп у лого
   слева (26px) при честных 48px справа. На 1380 обе группы помещаются. */
.navbar-inner {
  max-width: 1380px; margin: 0 auto; padding: 0 12px;
  height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: clamp(16px, 2.5vw, 48px);
}

/* Обёртка меню растворяется в grid родителя на десктопе (становится off-canvas на мобилке) */
.nav-collapse { display: contents; }

/* Явные колонки + ряд: ссылки слева, лого центр, действия справа. grid-row:1 обязателен —
   logo (col2) идёт в DOM раньше links (col1), и без явного ряда grid sparse-раскладка
   кидает links/actions на вторую строку (header раздувается вдвое). */
.nav-group-links   { grid-column: 1; grid-row: 1; }
.nav-logo          { grid-column: 2; grid-row: 1; }
.nav-group-actions { grid-column: 3; grid-row: 1; }

/* space-between (не space-evenly): крайние элементы прижаты к границам колонок,
   поэтому расстояние МЕДИА↔лого и лого↔снежинка = column-gap ОБА — симметрия
   у лого гарантирована конструкцией, а не остатком свободного места. */
.nav-group {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
}

/* Бургер — только мобилка */
.nav-burger {
  display: none;
  background: none; border: none; cursor: pointer;
  color: var(--text-gray); font-size: 1.6rem; line-height: 0;
  padding: 0.3rem 0.5rem;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.nav-burger:hover { color: var(--text-white); text-shadow: 0 0 10px rgba(255,255,255,0.35); }

/* Переключатель языка — круглый флаг ТЕКУЩЕГО языка, тап меняет RU<->EN */
.lang-toggle {
  background: none; border: none; cursor: pointer;
  padding: 0.4rem 0.5rem; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.lang-toggle .flag {
  display: none; width: 18px; height: 18px;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.lang-toggle .flag svg {
  width: 100%; height: 100%; display: block; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.lang-toggle.lang-ru .flag-ru { display: block; }
.lang-toggle.lang-en .flag-en { display: block; }
.lang-toggle:hover .flag { transform: scale(1.12); filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.45)); }

.nav-logo img {
  height: 50px; width: auto;
  filter: drop-shadow(0 0 10px var(--zombie-red-glow));
  display: block;
}

.nav-link {
  font-family: var(--font-display);
  /* флюидный размер: на 1100-1380px ссылки плавно ужимаются, чтобы группа
     не переполняла свою grid-колонку и не наезжала на лого */
  font-size: clamp(0.72rem, 0.75vw + 0.2rem, 0.85rem); font-weight: 600;
  color: var(--text-gray);
  padding: 0.5rem clamp(0.4rem, 1vw, 1rem);
  letter-spacing: 1px; white-space: nowrap;
  position: relative;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Growing underline (as in prod header.css) */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--zombie-red-bright);
  transition: width 0.3s ease;
}

.nav-link:hover { color: var(--text-white); text-shadow: 0 0 10px rgba(255,255,255,0.35); }
.nav-link:hover::after,
.nav-link.active::after { width: calc(100% - 2 * clamp(0.4rem, 1vw, 1rem)); }
.nav-link.active { color: var(--zombie-red-bright); }
.nav-link.active:hover { color: var(--text-white); }

/* Фикс-ширина умещает и «ФОРУМ», и «FORUM» — при смене языка соседние иконки не прыгают */
.nav-forum { color: var(--ice-blue); min-width: 4em; text-align: center; }
.nav-forum:hover { color: var(--ice-blue-bright); text-shadow: 0 0 10px rgba(123,184,255,0.5); }
.nav-forum::after, .nav-forum.active::after { background: var(--ice-blue); }

.nav-icon {
  padding: 0.4rem clamp(0.3rem, 0.8vw, 0.7rem);
  font-size: clamp(0.8rem, 1.16vw, 1rem); line-height: 1;
  position: relative;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Brand-colored underline on icon hover (as in prod) */
.nav-icon::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  transition: width 0.3s ease;
}
.nav-icon:hover::after { width: calc(100% - 2 * clamp(0.3rem, 0.8vw, 0.75rem)); }

.nav-telegram { color: #0088cc; }
.nav-telegram:hover { color: #00aaff; text-shadow: 0 0 12px rgba(0,170,255,0.7); }
.nav-icon.nav-telegram::after { background: #0088cc; }
.nav-discord { color: #5865F2; }
.nav-discord:hover { color: #7289da; text-shadow: 0 0 12px rgba(114,137,218,0.7); }
.nav-icon.nav-discord::after { background: #5865F2; }
.nav-youtube { color: #ff0000; }
.nav-youtube:hover { color: #ff4444; text-shadow: 0 0 12px rgba(255,68,68,0.7); }
.nav-icon.nav-youtube::after { background: #ff0000; }
.nav-tiktok { color: #ffffff; }
.nav-tiktok:hover { color: #fe2c55; text-shadow: 0 0 12px rgba(254,44,85,0.7); }
.nav-icon.nav-tiktok::after { background: linear-gradient(45deg, #25f4ee, #fe2c55); }
.nav-instagram { color: #e4405f; }
.nav-instagram:hover { color: #f56040; text-shadow: 0 0 12px rgba(245,96,64,0.7); }
.nav-icon.nav-instagram::after { background: linear-gradient(45deg, #833ab4, #e4405f, #f56040); }

/* Snow toggle (ported from prod header.css) */
.snow-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--text-gray); opacity: 0.5;
  padding: 0.4rem 0.6rem; font-size: 1rem; line-height: 1;
  position: relative;
  transition: color 0.3s ease, opacity 0.3s ease, text-shadow 0.3s ease;
}
.snow-toggle:hover { color: #b8e4ff; opacity: 0.85; text-shadow: 0 0 12px rgba(184,228,255,0.9), 0 0 24px rgba(184,228,255,0.4); }
.snow-toggle.active { color: #b8e4ff; opacity: 1; text-shadow: 0 0 8px rgba(184,228,255,0.6), 0 0 16px rgba(184,228,255,0.3); }
.snow-toggle.active:hover { text-shadow: 0 0 12px rgba(184,228,255,0.8), 0 0 24px rgba(184,228,255,0.4); }
.snow-toggle::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: #b8e4ff;
  transition: width 0.3s ease;
}
.snow-toggle:hover::after { width: calc(100% - 1.2rem); box-shadow: 0 0 6px rgba(184,228,255,0.5); }

/* ---------- Hero ---------- */

.hero {
  min-height: 100vh;
  min-height: 100dvh; /* dvh: на iOS Safari 100vh включает адресную строку и подрезает hero */
  position: relative;
  padding-top: var(--nav-h); /* ровно высота header (единый источник) */
  overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, #0a0a0f 0%, #0f1015 55%, rgba(139,0,0,0.12) 100%);
}

/* ФИГУРА НЕМЕСИСА ЗАФИКСИРОВАНА ПО ЦЕНТРУ HERO НА ВСЕХ РАЗМЕРАХ (owner 2026-07-20:
   «не скакал вверх-вниз»). Приём: никакого object-fit-кропа — бокс картинки держит
   ТОЧНЫЙ аспект оригинала (1672×941 → ×1.7768), поэтому фигура всегда на одних и
   тех же долях бокса (голова 27.25%, центр 40% высоты — замерено по картинке).
   Высота: во всю ширину вьюпорта (56.3vw = 100vw/аспект), на узких — пол 78%
   высоты секции, чтобы фигура оставалась крупной (бока уходят в overflow:hidden).
   top = max из двух якорей (побеждает нижний):
   1) центр фигуры = середина секции (50% - 0.4H) — основной, «не скачет»;
   2) голова не выше низа текстового блока (clamp(195,24vw,310) ≈ низ тэглайна
      по ширинам) — страховка для коротких+широких окон, где центр недостижим.
   Якоря «низ картинки = низ секции» НЕТ намеренно (owner 2026-07-20: он тянул
   фигуру вниз к кнопкам на вертикальных телефонах); стык нижней кромки картинки
   с фоном прикрыт нижней частью hero-vignette (0.55→1.0 на 85..100%). */
.hero-bg {
  /* ВАЖНО: только vw/dvh в переменной, НИКАКИХ % — процент в height резолвится
     от высоты родителя, а тот же процент в width от ШИРИНЫ → аспект ломается
     (сплющенный Немесис, burn 2026-07-20). dvh одинаков в обоих свойствах. */
  --img-h: max(56.3vw, 78dvh);
  position: absolute; left: 50%; transform: translateX(-50%);
  height: var(--img-h);
  width: calc(var(--img-h) * 1.7768);
  top: max(calc(50% - 0.4 * var(--img-h)),
           calc(clamp(195px, 24vw, 310px) - 0.2725 * var(--img-h)));
  opacity: 0.95;
  /* Кромки растворяются в фон (маска): на адаптивах, где картинка не покрывает
     секцию по вертикали, верх/низ «тают» вместо жёсткого обреза — шва нет ни
     при каком размере. Боковых швов не бывает (ширина всегда ≥ 100vw). */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 88%, transparent 100%);
}

/* Верхняя треть чуть плотнее (0.4@30, был 0.25) — «текст-протекция»: на тесных
   вьюпортах, где голове Немесиса геометрически некуда деться из-под тэглайна
   (короткое+широкое окно), она уходит в тень, а не смешивается с текстом. */
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,15,0.88) 0%, rgba(10,10,15,0.4) 30%, rgba(10,10,15,0.1) 55%, rgba(10,10,15,0.55) 85%, #0a0a0f 100%);
}

/* Отступы сверху (от низа header до AUABYSS) и снизу (от кнопок до низа
   секции) одинаковые — 24px */
.hero-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 24px;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center;
}

/* hero-top: заголовок + подстрока + тэглайн — единый блок, гэп как внутри hero-title (10px) */
.hero-top {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero-bottom {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.hero-title { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* AUA — белым, BYSS — красным с глоу (из редизайна B) */
/* line-height 1.19 — рассчитан по canvas-метрикам Exocet: кончики Y (самые
   высокие глифы, 102px над базлайном при заявленном ascent 94px) ложатся
   ровно на верхнюю границу блока */
.title-main {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 900;
  color: var(--text-white);
  letter-spacing: 6px; line-height: 1.19;
  /* белый глоу у AUA — парный к красному глоу BYSS (свой text-shadow спана ниже) */
  text-shadow: 0 0 46px rgba(240,240,245,0.4), 0 2px 12px rgba(0,0,0,0.8);
}

.title-byss {
  color: var(--zombie-red-bright);
  text-shadow: 0 0 50px rgba(196,30,58,0.5), 0 2px 12px rgba(0,0,0,0.8);
}

/* Брендовое написание вне hero: <span class="aua">AUA</span><span class="byss">BYSS</span>
   — белая и красная половины СИММЕТРИЧНО подсвечены мягким глоу */
.aua { color: var(--text-white); text-shadow: 0 0 12px rgba(240,240,245,0.35); }
.byss { color: var(--zombie-red-bright); text-shadow: 0 0 12px rgba(196,30,58,0.5); }

/* Выделение ключевых слов фирменным красным (приём из редизайна B) */
.accent-red { color: var(--zombie-red-bright); }
.accent-blue { color: var(--ice-blue); }

.title-sub {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #d5d5e0;
  letter-spacing: 6px; text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

/* Градиент синий -> красный по тексту; глоу через drop-shadow (text-shadow с
   background-clip:text рисует пятно ПОД прозрачными буквами) */
.hero-tagline {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 600;
  background: linear-gradient(90deg, var(--ice-blue-bright) 0%, #cfe6ff 45%, var(--zombie-red-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: 3px; margin: 0; font-style: italic;
  cursor: pointer; user-select: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.9));
}
/* Hover — вспышка бело-ледяным: копия текста в ::after плавно проявляется
   ПОВЕРХ градиента (сам градиент анимировать нельзя — был резкий скачок) */
.hero-tagline::after {
  content: attr(data-text);
  position: absolute; left: 0; right: 0; top: 0;
  color: #cfe6ff;
  -webkit-text-fill-color: #cfe6ff;
  text-shadow: 0 0 14px rgba(74,158,255,0.8), 0 0 34px rgba(196,30,58,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.hero-tagline:hover::after { opacity: 1; }
.hero-tagline.music-active {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--ice-blue-bright);
  filter: none;
  animation: abyss-pulse 2s ease-in-out infinite;
}
.hero-tagline.music-active::after { display: none; }

.server-status {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.85rem;
}

/* Подсветка статуса — пульс зелёного box-shadow (из редизайна A) */
.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: #4ade80; font-weight: 700; letter-spacing: 1px;
  background: rgba(10,10,15,0.85);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 14px; border-radius: 999px;
  backdrop-filter: blur(6px);
  animation: status-badge-glow 3s ease-in-out infinite;
}
.status-badge.offline { color: #ef4444; animation: none; }

@keyframes status-badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  50% { box-shadow: 0 0 14px 0 rgba(34,197,94,0.35); }
}

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  animation: pulse-dot 2s infinite;
  box-shadow: 0 0 8px #4ade80;
}
.status-badge.offline .status-dot { background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: none; }

.status-info { color: var(--text-gray); text-shadow: 0 2px 6px rgba(0,0,0,0.9); }
.status-info i { color: var(--ice-blue); margin-right: 6px; }

.hero-buttons { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; justify-content: center; }

.btn-connect {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; width: 270px;
  background: linear-gradient(135deg, var(--zombie-red) 0%, var(--zombie-red-bright) 100%);
  color: #fff; font-weight: 700; font-size: 1.05rem;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.btn-connect:hover { transform: translateY(-2px); filter: brightness(1.15); color: #fff; }
.btn-connect i { font-size: 1.3rem; }

.btn-ip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; width: 270px;
  padding: 0; /* убить дефолтный UA-padding кнопки (1px 6px) */
  background: rgba(255,255,255,0.07); /* чуть светлее фона — оптически та же «масса», что у красной */
  border: none;
  color: var(--text-white); font-weight: 700;
  font-family: var(--font-mono); font-size: 1.05rem;
  border-radius: 10px;
  cursor: pointer; transition: all 0.3s ease;
  backdrop-filter: blur(6px);
}
.btn-ip:hover {
  background: rgba(196,30,58,0.15);
  transform: translateY(-2px);
}
.btn-ip i { color: var(--text-white); }

/* Иконки обеих кнопок: line-height 0 убирает базлайн-сдвиг глифа —
   визуальный вертикальный центр контента совпадает */
.btn-connect i, .btn-ip i { line-height: 0; }

/* ---------- Sections ---------- */

/* Все секции прозрачные — единый тёмный фон body по всему лендингу */
.section { position: relative; border-top: 1px solid rgba(255,255,255,0.08); padding: 3rem 0; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 12px; }
.container-narrow { max-width: 1100px; margin: 0 auto; }

.section-header { text-align: center; margin-bottom: 3rem; position: relative; z-index: 1; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing: 3px;
  margin: 0 0 0.5rem 0; text-transform: uppercase;
  text-shadow: 0 0 20px var(--zombie-red-glow), 0 2px 4px rgba(0,0,0,0.8);
}
.section-title i { color: var(--zombie-red-bright); margin-right: 0.5rem; }

.section-desc { color: var(--text-gray); font-size: 1rem; font-weight: 500; margin: 0; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-keep-transform { transform: none; }
.reveal-keep-transform.visible { transform: none; }

/* ---------- About ---------- */

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.about-card {
  background: var(--abyss-gray);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px; padding: 2rem;
  display: flex; flex-direction: column;
}

.about-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; letter-spacing: 2px;
  margin: 0 0 1rem 0;
}

.about-card p { color: var(--text-gray); font-weight: 500; margin: 0; }
.about-card strong { color: var(--text-white); }

.features-list { list-style: none; padding: 0; margin: 1.5rem 0 0 0; }
.features-list li { padding: 0.5rem 0; font-weight: 600; }
.features-list li i { margin-right: 0.5rem; }

.text-red { color: #dc3545; }
.text-green { color: #198754; }
.text-blue { color: var(--ice-blue); }
.text-yellow { color: #ffc107; }

/* ---------- Classes (bento) ---------- */

.classes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.class-card {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.6s ease;
}
.class-card:hover {
  border-color: rgba(196,30,58,0.5);
  box-shadow: 0 16px 50px rgba(139,0,0,0.35);
  transform: translateY(-4px);
}

.class-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  /* Исходники ландшафтные (1280x719) в портретном слоте 3/4 — кроп только
     по бокам, вертикального запаса нет, object-position по Y мёртв.
     Морды классов сидели низко: лёгкий зум со сдвигом вверх центрирует
     головы (owner 2026-07-21). При замене ассетов на портретные — убрать. */
  transform: scale(1.14) translateY(-5%);
}

.class-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(7,7,11,0.95) 78%);
}

.class-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}

.class-name {
  margin: 0; font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: 3px;
  color: var(--text-white);
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}

.class-desc { margin: 0; font-size: 0.78rem; color: var(--text-gray); line-height: 1.4; }

.class-stats { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 0.7rem; }
.stat-hp { color: #ff6b81; }
.stat-speed { color: var(--ice-blue-bright); }
.stat-grav { color: #ffc107; }

.class-ability { font-size: 0.7rem; font-weight: 600; color: #22c55e; }

/* Mode banners */

.modes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

.mode-banner {
  position: relative; border-radius: 12px; overflow: hidden;
  min-height: 300px;
  display: flex; align-items: flex-end;
  transition: box-shadow 0.3s ease, opacity 0.6s ease, transform 0.6s ease;
}
.mode-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mode-nemesis { border: 1px solid rgba(196,30,58,0.4); }
.mode-nemesis:hover { box-shadow: 0 16px 60px rgba(196,30,58,0.35); }
.mode-nemesis .mode-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,11,0.92) 0%, transparent 70%); }

.mode-survivor { border: 1px solid rgba(74,158,255,0.4); justify-content: flex-end; }
.mode-survivor:hover { box-shadow: 0 16px 60px rgba(74,158,255,0.35); }
.mode-survivor .mode-shade { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(7,7,11,0.92) 0%, transparent 70%); }

.mode-info {
  position: relative; padding: 32px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 60%;
}
.mode-survivor .mode-info { text-align: right; align-items: flex-end; }

.mode-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 2px; }
.mode-nemesis .mode-label { color: #ff6b81; }
.mode-survivor .mode-label { color: var(--ice-blue-bright); }

.mode-title { margin: 0; font-family: var(--font-display); font-size: 2rem; letter-spacing: 5px; }
.mode-nemesis .mode-title { color: var(--zombie-red-bright); text-shadow: 0 0 30px rgba(196,30,58,0.6); }
.mode-survivor .mode-title { color: var(--ice-blue); text-shadow: 0 0 30px rgba(74,158,255,0.6); }

.mode-info p { margin: 0; font-size: 1rem; font-weight: 500; color: var(--text-gray); }

/* ---------- Stats ---------- */

.search-wrap { display: flex; justify-content: center; margin-bottom: 3rem; }

.search-box {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; overflow: hidden;
  width: 100%; max-width: 480px;
}
.search-box .icon { display: flex; align-items: center; padding: 0 12px; color: var(--text-muted); }
.search-box input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  color: var(--text-white);
  font-family: var(--font-mono); font-size: 0.85rem;
  padding: 10px 4px;
}
.search-box button {
  background: var(--zombie-red-bright); color: #fff; border: none;
  font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 1px; padding: 0 18px; cursor: pointer;
  transition: background 0.3s ease;
}
.search-box button:hover { background: #e0234a; }

.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; margin-bottom: 16px; }

.podium-card {
  border-radius: 12px; padding: 24px; text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.podium-2 { background: linear-gradient(180deg, rgba(192,192,192,0.1), rgba(255,255,255,0.02)); border: 1px solid rgba(192,192,192,0.3); }
.podium-1 { background: linear-gradient(180deg, rgba(255,215,0,0.14), rgba(255,255,255,0.02)); border: 1px solid rgba(255,215,0,0.4); padding: 36px 24px; box-shadow: 0 10px 50px rgba(255,215,0,0.08); }
.podium-3 { background: linear-gradient(180deg, rgba(205,127,50,0.12), rgba(255,255,255,0.02)); border: 1px solid rgba(205,127,50,0.35); }

.podium-rank { font-family: var(--font-display); font-size: 1.8rem; }
.podium-1 .podium-rank { font-size: 2.2rem; color: gold; }
.podium-2 .podium-rank { color: #c0c0c0; }
.podium-3 .podium-rank { color: #cd7f32; }
.podium-1 .bi-trophy-fill { color: gold; font-size: 1.6rem; }

.podium-card { cursor: pointer; }
.podium-nick { font-weight: 700; font-size: 1.05rem; }
.podium-1 .podium-nick { font-size: 1.15rem; }
/* skill — главная цифра рейтинга, поэтому крупнее ammo и в фирменном золоте подиума */
.podium-skill { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; color: #ffc107; }
.podium-1 .podium-skill { font-size: 1.1rem; }
.podium-ammo { font-family: var(--font-mono); font-size: 0.85rem; color: #22c55e; }
.podium-1 .podium-ammo { font-size: 0.9rem; }
.podium-online { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }

.podium-vip {
  margin-top: 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
  color: gold; border: 1px solid rgba(255,215,0,0.4);
  border-radius: 999px; padding: 4px 12px; align-self: center;
}

.top-table-wrap {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; overflow: hidden;
}

.top-table { width: 100%; border-collapse: collapse; color: var(--text-white); }

.top-table th {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  color: var(--text-muted); letter-spacing: 2px; text-transform: uppercase;
  text-align: left; padding: 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.top-table th:first-child { padding: 14px 24px; }
.top-table th:last-child, .top-table th.num { text-align: right; }
.top-table th:last-child { padding: 14px 24px; }

.top-table td {
  padding: 11px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-weight: 600;
}
.top-table td:first-child { padding: 11px 24px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
.top-table td.num { text-align: right; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; }
.top-table td:last-child { padding: 11px 24px; }
/* Строка кликабельна — открывает профиль игрока (js/api.js, делегирование) */
.top-table tbody tr { transition: background 0.3s ease; cursor: pointer; }
.top-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.top-table tbody tr.stats-empty-row { cursor: default; }

/* Смысловые акценты показателей: одни и те же классы носят и ячейки таблицы
   топа, и значения в плитках профиля. Помимо `color` каждый класс кладёт свой
   оттенок в `--pc-accent`, которую читает `.pc-val` (см. блок плиток ниже).
   ГРАБЛЯ: раньше плитки полагались на порядок правил — `.pc-val { color }`
   объявлен в файле ПОЗЖЕ и при равной специфичности молча гасил все акценты,
   поэтому цвета видны были только в сохранённой картинке, но не в самом досье.
   Через кастомное свойство порядок правил больше ни на что не влияет. */
.td-ammo    { --pc-accent: var(--stat-ammo);    color: var(--stat-ammo); }
.td-kills   { --pc-accent: var(--stat-kills);   color: var(--stat-kills); }
.td-infects { --pc-accent: var(--stat-infects); color: var(--stat-infects); }
.td-online  { --pc-accent: var(--stat-online);  color: var(--stat-online); }
/* skill = сводный рейтинг (жёлтый, как «ценность»), нем+сурв = самые дорогие
   фраги формулы (×4) — золото подиума, чтобы читались как престиж */
.td-skill   { --pc-accent: var(--stat-skill);   color: var(--stat-skill); font-weight: 700 !important; }
.td-elite   { --pc-accent: var(--stat-elite);   color: var(--stat-elite); }
.td-rank    { color: var(--stat-skill); }

.stats-hint {
  margin: 14px 0 0; font-size: 0.78rem; color: var(--text-muted);
  font-family: var(--font-mono); text-align: center;
}

.stats-note {
  margin: 8px 0 0; font-size: 0.8rem; color: var(--text-muted);
  font-family: var(--font-mono); text-align: center;
}

/* Само слово «skill» — ССЫЛКА на единственное объяснение (skill.html). Раньше
   на его месте лежали два свёрнутых блока с длинным текстом (под таблицей топа
   и под досье) плюс title-подсказка с пересказом формулы — три копии одного
   объяснения, которые обязаны были разъехаться. Осталась ссылка: пунктир,
   цвет показателя, никакого пересказа. */
.skill-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.skill-link:hover { color: var(--stat-skill); border-bottom-color: var(--stat-skill); }

.stats-empty { text-align: center !important; color: var(--text-muted); padding: 24px 8px !important; font-family: var(--font-mono); }

/* ---------- Плитка статистики (общая: сетка профиля) ---------- */

.pc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pc-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px; padding: 14px 8px;
}
/* Цвет — из акцента, который повесил класс `.td-*` на этом же элементе;
   без него плитка остаётся нейтрально-белой (смерти, суициды, дата входа).
   Подсветка живёт ТОЛЬКО на цифре: подписи остаются приглушёнными, а кегль
   не меняется — иначе плитки начали бы спорить с местом/skill и элитой. */
.pc-val { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--pc-accent, var(--text-white)); }
/* дата последнего входа с таймзоной длиннее любого числа — свой кегль */
.pc-val-sm { font-size: 0.82rem; text-align: center; line-height: 1.35; }
.pc-label { font-size: 0.7rem; color: var(--text-muted); text-align: center; }

/* ---------- Страница профиля (player.html) ---------- */

/* Та же «полка» под фикс-шапкой, что у правовых страниц. */
.profile { padding: calc(var(--nav-h) + 2rem) 12px 4rem; }
/* Ссылка «назад» — по центру, как на правовых страницах (общее правило —
   в блоке Legal pages ниже). Здесь остаётся только своя отбивка. */
.pf-topbar { margin-bottom: 1.2rem; }

.pf-state {
  text-align: center; color: var(--text-muted);
  font-family: var(--font-mono); font-size: 0.9rem;
  padding: 3rem 1rem;
}
.pf-state-box {
  background: var(--abyss-gray);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
}
.pf-state-title {
  margin: 0 0 0.8rem; font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-white);
  text-shadow: 0 0 20px var(--zombie-red-glow);
}
.pf-state-text { margin: 0; color: var(--text-gray); font-size: 0.95rem; font-family: var(--font-body); }

/* Витрина. Это то, чем игрок хвастается — поэтому карточка не «панель со
   списком», а объект: своя рамка, своё зарево, свой брендблок и подвал. */
.pf-card {
  position: relative; overflow: hidden;
  max-width: 860px; margin: 0 auto;
  background: linear-gradient(160deg, #16161e 0%, #101016 55%, #14090e 100%);
  border: 1px solid rgba(196, 30, 58, 0.35);
  border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 60px rgba(139, 0, 0, 0.18);
}
/* красное зарево из правого нижнего угла — та же «лужа света», что на обложке */
.pf-card-glow {
  position: absolute; right: -18%; bottom: -34%;
  width: 70%; aspect-ratio: 1 / 1; pointer-events: none;
  background: radial-gradient(circle, rgba(196,30,58,0.24) 0%, rgba(139,0,0,0.10) 45%, rgba(139,0,0,0) 72%);
}
.pf-card > *:not(.pf-card-glow) { position: relative; z-index: 1; }

.pf-brand {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pf-brand-logo { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(196,30,58,0.45)); }
.pf-brand-name {
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 3px;
  text-transform: uppercase;
}
.pf-brand-sub {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 2px;
  color: var(--text-muted);
}
/* «ДОСЬЕ ИГРОКА» прижато к правому краю брендблока */
.pf-eyebrow {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--zombie-red-bright);
}

.pf-head { text-align: center; padding: 1.6rem 0 0.4rem; }
/* Ник — доминанта карточки. break-word: ники в CS бывают без пробелов. */
.pf-nick {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.8rem, 6.5vw, 3.4rem); letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-white);
  text-shadow: 0 0 26px rgba(196,30,58,0.5), 0 2px 6px rgba(0,0,0,0.8);
  overflow-wrap: anywhere;
}
.pf-steam { margin-top: 6px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); }

/* Место + skill — вторая ступень иерархии, всё остальное ниже читается как поддержка */
.pf-hero {
  display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center;
  gap: 0 clamp(12px, 3vw, 32px);
  margin: 1.4rem 0 0.6rem;
}
/* Явные колонка+ряд у ВСЕХ трёх элементов: ::before идёт первым в потоке, и без
   явной раскладки sparse-алгоритм грида роняет ячейки на второй ряд (та же
   грабля, что в .navbar-inner). */
.pf-hero::before {
  content: ''; grid-column: 2; grid-row: 1; align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.14), transparent);
}
.pf-hero-rank { grid-column: 1; grid-row: 1; }
.pf-hero-skill { grid-column: 3; grid-row: 1; }
.pf-hero-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pf-hero-val {
  font-family: var(--font-display); line-height: 1.05;
  font-size: clamp(2.6rem, 10vw, 4.6rem);
}
.pf-hero-rank .pf-hero-val { color: gold; text-shadow: 0 0 30px rgba(255,215,0,0.35); }
.pf-hero-skill .pf-hero-val { color: #ffc107; text-shadow: 0 0 30px rgba(255,193,7,0.28); }
/* вне рейтинга: место гаснет до серого — карточка не выглядит сломанной */
.pf-card.is-unranked .pf-hero-rank .pf-hero-val { color: var(--text-muted); text-shadow: none; }
.pf-hero-cap {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted);
}
.pf-unranked {
  margin: 0 0 0.4rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted);
}

/* Элитные фраги: самая престижная метрика формулы (×4) — золото подиума,
   отдельная рамка, крупнее остальной статистики. */
.pf-elite {
  margin: 1.6rem 0 1.4rem;
  background: rgba(255, 215, 0, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.32);
  border-radius: 14px; padding: 1.1rem 1.2rem;
}
.pf-elite-title {
  margin: 0 0 0.8rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: gold;
}
.pf-elite-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pf-elite-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
/* Mono, а НЕ Exocet: у большинства игроков тут 0, а «ноль» в Exocet — перечёркнутый
   круг, который читается как знак запрета. Заодно совпадает с .td-elite в таблице. */
.pf-elite-val {
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  color: gold; text-shadow: 0 0 24px rgba(255,215,0,0.3);
}
.pf-elite-lab {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: rgba(255,215,0,0.8);
}
.pf-elite-hint {
  margin: 0.9rem 0 0; text-align: center;
  font-size: 0.78rem; color: var(--text-gray);
}

.pf-sub {
  margin: 0 0 0.8rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted);
}
.pf-grid { grid-template-columns: repeat(4, 1fr); }

.pf-card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-top: 1.4rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 2px;
}
.pf-card-domain { color: var(--zombie-red-bright); font-weight: 700; }
.pf-card-addr { color: var(--text-muted); }

/* Кнопки шаринга — та же «масса», что у .btn-ip в hero */
.pf-actions { max-width: 860px; margin: 1.6rem auto 0; text-align: center; }
.pf-share-hint {
  margin: 0 0 0.9rem; font-family: var(--font-mono);
  font-size: 0.78rem; color: var(--text-muted);
}
.pf-actions-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; min-width: 230px; padding: 0 18px;
  background: rgba(255,255,255,0.07); border: none; border-radius: 10px;
  color: var(--text-white); font-family: var(--font-mono);
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer; transition: all 0.3s ease;
  backdrop-filter: blur(6px);
}
.pf-btn:hover { background: rgba(196,30,58,0.16); transform: translateY(-2px); color: var(--text-white); }
.pf-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.pf-btn i { line-height: 0; font-size: 1.1rem; }
.pf-btn-accent {
  background: linear-gradient(135deg, var(--zombie-red) 0%, var(--zombie-red-bright) 100%);
}
.pf-btn-accent:hover { filter: brightness(1.15); background: linear-gradient(135deg, var(--zombie-red) 0%, var(--zombie-red-bright) 100%); }

.pf-search { max-width: 860px; margin: 3rem auto 0; }
.pf-search-title {
  margin: 0 0 1rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted);
}
.pf-search .search-wrap { margin-bottom: 0; }

/* Держатель клона карточки на время снимка (js/profile.js → pfMountShot).
   Живёт за краем экрана, но именно ЖИВЁТ: display:none обнулил бы раскладку,
   а снимок строится из вычисленных стилей. Ни полей, ни фона — кадром служит
   сам клон, чтобы картинка обрезалась ровно по красной рамке карточки. */
.pf-shot-stage {
  position: fixed; top: 0; left: -20000px; z-index: -1;
  pointer-events: none;
}

@media (max-width: 720px) {
  .pf-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .pc-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-brand { gap: 8px; }
  .pf-eyebrow { margin-left: 0; width: 100%; }
  .pf-btn { min-width: 100%; }
}

/* ---------- Media ---------- */

.media-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

.poster {
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.6s ease;
  cursor: pointer;
}
/* Пропорции трёх афиш чуть различаются — cover заполняет карточку без пустот */
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster:hover {
  transform: scale(1.02);
  border-color: rgba(196,30,58,0.5);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.media-note { text-align: center; color: var(--text-gray); font-size: 1rem; font-weight: 500; margin: 3rem 0 0; }

/* ---------- Footer ---------- */

/* Две строки: служебная навигация (правила / приватность) + копирайт.
   Форума тут НЕТ намеренно: он уже есть в шапке отдельной фирменной ссылкой
   (.nav-forum) — дубль внизу только шумит.
   min-height, а не height: --nav-h остаётся ПОЛОМ (визуальная рифма с шапкой),
   но на узких экранах ссылки переносятся и футер честно растёт. */
.footer {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.08);
  min-height: var(--nav-h);
  padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
}
.footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 22px;
  font-family: var(--font-mono); font-size: 0.78rem;
}
.footer-nav a { color: var(--text-muted); transition: color 0.3s ease; }
.footer-nav a:hover { color: var(--text-white); }
/* текущая страница подсвечена фирменным красным и кликается «вхолостую» */
.footer-nav a.is-current { color: var(--zombie-red-bright); }
.footer-copy { margin: 0; color: var(--text-gray); font-weight: 500; }
.footer-brand {
  font-family: var(--font-display);
  letter-spacing: 2px;
  color: var(--text-white);
}

/* ---------- Legal pages (rules.html, privacy.html) ---------- */

/* Отдельные страницы под фикс-шапкой: свой верхний отступ вместо hero. */
.legal {
  padding: calc(var(--nav-h) + 3rem) 12px 4rem;
}

.legal-head { text-align: center; margin-bottom: 2.5rem; }

.legal-back {
  display: inline-block; margin-bottom: 1.5rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--text-muted);
}
.legal-back:hover { color: var(--text-white); }

/* Ссылка «назад» на САЙТЕ ОДНА ПО СМЫСЛУ — значит и выглядит везде одинаково:
   отдельной строкой ПО ЦЕНТРУ. Три её места: шапка правовой страницы
   (.legal-head, там же заголовок), конец длинного текста (.legal-foot — правила
   читают до низа, скроллить наверх незачем) и верх досье игрока (.pf-topbar).
   Раньше .pf-topbar был единственным левым — паттерн разъехался (owner
   2026-07-27). Различается только отбивка: у .legal-foot сверху, у .pf-topbar снизу. */
.legal-foot, .pf-topbar { text-align: center; }
.legal-foot { margin-top: 2.5rem; }
.legal-foot .legal-back,
.pf-topbar .legal-back { margin-bottom: 0; }

.legal-title {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 20px var(--zombie-red-glow), 0 2px 4px rgba(0,0,0,0.8);
}
.legal-sub { margin: 0.6rem 0 0; color: var(--text-gray); font-size: 1rem; }
.legal-updated {
  margin: 0.4rem 0 0; font-family: var(--font-mono);
  font-size: 0.72rem; color: var(--text-muted);
}

.legal-card {
  background: var(--abyss-gray);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px; padding: 1.6rem 1.8rem;
  margin-bottom: 1rem;
}

.legal-h2 {
  margin: 0 0 0.9rem; font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 700; letter-spacing: 2px;
  color: var(--zombie-red-bright);
}

.legal-body { color: var(--text-gray); font-size: 0.95rem; }
.legal-body p { margin: 0 0 0.9rem; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body strong { color: var(--text-white); }
.legal-body ul { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.legal-body ul:last-child { margin-bottom: 0; }
.legal-body li { margin-bottom: 0.45rem; }
.legal-body li:last-child { margin-bottom: 0; }
.legal-body code {
  font-family: var(--font-mono); font-size: 0.82rem;
  padding: 1px 7px;
  color: var(--ice-blue-bright);
  background: rgba(74,158,255,0.10);
  border-radius: 5px;
  white-space: nowrap;
}

/* ---------- skill.html: формула, пример, разбор ---------- */
/* Цвета не выдуманы заново — это те же смысловые токены, что носят колонки
   таблицы топа и плитки досье: элитные фраги (×4) золотом, потери красным,
   ammo зелёным. Формула на странице выглядит так же, как показатели в топе. */

.skill-formula {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0.4rem 0.9rem;
  margin: 0 0 1.2rem; padding: 1.1rem 1rem;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
  background: rgba(255,255,255,0.02);
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5;
  text-align: center; color: var(--text-gray);
}
.sk-num { padding: 0 0.5rem 0.45rem; border-bottom: 1px solid rgba(255,255,255,0.25); }
.sk-den { padding: 0.45rem 0.5rem 0; }
.sk-num b { color: var(--stat-elite); }
.sk-den b { color: var(--zombie-red-bright); }
.sk-mul { white-space: nowrap; }
.sk-mul b { color: var(--stat-ammo); font-size: 1.05rem; }

/* Таблица примера узкая по смыслу — на телефоне она НЕ ломает страницу
   горизонтально, а скроллится внутри своей обёртки (правило § «Do» DESIGN.md). */
.skill-tablewrap { overflow-x: auto; margin: 0 0 1.2rem; }
.skill-table {
  width: 100%; min-width: 320px; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 0.82rem;
}
.skill-table th {
  padding: 8px 10px; text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: var(--text-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.72rem;
}
.skill-table th:first-child, .skill-table td:first-child { text-align: left; color: var(--text-gray); }
.skill-table td {
  padding: 7px 10px; text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--text-white);
}
.skill-table tr:last-child td { border-bottom: none; }
.skill-table tr.sk-hi td { color: var(--stat-elite); }
.skill-table tr.sk-hi td:first-child { color: var(--stat-elite); }

.skill-math {
  margin: 0 0 1rem; padding: 0.9rem 1rem;
  border-left: 2px solid var(--zombie-red-bright); border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,0.02);
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6;
}
.skill-math p { margin: 0; color: var(--text-gray); }
.skill-math b { color: var(--text-white); }
.sk-who {
  color: var(--text-white) !important; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.35rem !important;
}
.sk-res { margin-top: 0.45rem !important; color: var(--stat-skill) !important; }
.sk-res b { color: var(--stat-skill); font-size: 1.05rem; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 2000;
  background: #198754; color: #fff;
  padding: 0.75rem 1.25rem; border-radius: 8px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.toast.show { opacity: 1; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .classes-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  /* Navbar → бургер: фикс-строка (лого слева + гамбургер справа), остальное off-canvas.
     Фикс-высота navbar = var(--nav-h) → hero padding-top снова верен (чинит P1).
     Брейкпоинт 1100 (был 900): на 900-1100 полный RU-набор ссылок физически не
     помещается в grid-колонку и наезжает на лого — бургер честнее ужимания. */
  .navbar-inner { display: flex; justify-content: space-between; align-items: center; column-gap: 0; }
  .nav-burger { display: inline-flex; align-items: center; }

  .nav-collapse {
    display: block; /* отменяем contents — обёртка становится реальной панелью */
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    max-height: 0; overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .navbar.nav-open .nav-collapse { max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; }

  /* Навигация: вертикальный ЦЕНТРИРОВАННЫЙ список с тонкими разделителями.
     У последней ссылки бордер убран — иначе двойная линия с border-top actions. */
  .nav-group-links { flex-direction: column; align-items: stretch; width: 100%; padding: 4px 0 0; }
  .nav-group-links .nav-link {
    padding: 0.95rem 1rem; font-size: 1.05rem; text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .nav-group-links .nav-link:last-child { border-bottom: none; }
  /* Растущая красная подводка живёт и в столбце (консистентно с иконками справа
     и десктопом). Ссылка растянута на всю панель, поэтому длина — фикс 6em по
     центру, чуть выше бордера-разделителя, чтобы линии не сливались. */
  .nav-group-links .nav-link::after { bottom: 0.5rem; }
  .nav-group-links .nav-link:hover::after,
  .nav-group-links .nav-link.active::after { width: 6em; }

  /* Действия: ЕДИНЫЙ центрированный ряд — снег, язык, форум, соц (язык не на
     отдельной строке — лишняя высота ради одного флага) */
  .nav-group-actions {
    width: 100%; flex-flow: row wrap; align-items: center; justify-content: center;
    gap: 14px 16px; padding: 16px 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Язык — флаг в общем ряду, размер под соседние иконки (1.35rem ≈ 22px) */
  .lang-toggle { padding: 0.35rem 0.5rem; }
  .lang-toggle .flag { width: 24px; height: 24px; }

  /* Утилиты/соц — крупнее и с ровным ритмом в ряду */
  .nav-group-actions .snow-toggle,
  .nav-group-actions .nav-icon { font-size: 1.35rem; padding: 0.35rem 0.5rem; }
  .nav-group-actions .nav-forum { font-size: 1rem; padding: 0.35rem 0.6rem; }

  /* контентные сетки в один столбец */
  .about-grid, .modes-grid, .podium { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr; max-width: 480px; }
  .mode-info { max-width: 100%; }
}

@media (max-width: 560px) {
  .classes-grid { grid-template-columns: 1fr; }
  .hero-buttons { width: 100%; }
  .btn-connect, .btn-ip { width: 100%; justify-content: center; }

  /* Заголовки hero — мягче clamp + меньше трекинг, чтобы не переполняли (P4) */
  .title-main { font-size: clamp(2.6rem, 13vw, 4.5rem); letter-spacing: 3px; }
  .title-sub { font-size: clamp(0.7rem, 3vw, 1rem); letter-spacing: 2px; }
  .hero-tagline { font-size: 1rem; letter-spacing: 2px; }

  /* Таблица статистики — горизонтальный скролл вместо обрезки (P3).
     min-width подрос с 460 до 640: колонок стало 8 (добавились skill и
     нем+сурв), на 460 они схлопывались в нечитаемую кашу. */
  .top-table-wrap { overflow-x: auto; }
  .top-table { min-width: 640px; }

  .legal-card { padding: 1.3rem 1.2rem; }
}

/* ── Spotlight: сетка классов (motion-lab graduate 2026-07-21) ─────────────
   Hover на карточку класса гасит соседей и подсвечивает выбранную фирменным
   красным. will-change держит карточки на своих compositing-слоях постоянно:
   без этого браузер сбрасывает слой в конце transition и картинка/текст
   «снапаются» на полпикселя. Гейт (hover:hover) — на touch не залипает. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .classes-grid .class-card {
    transition:
      opacity      0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
      transform    0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
      border-color 0.6s cubic-bezier(0.215, 0.61, 0.355, 1),
      box-shadow   0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: transform;
  }
  .classes-grid:has(.class-card:hover) .class-card.visible:not(:hover) {
    opacity: 0.35;
    transform: scale(0.98);
  }
  .classes-grid .class-card:hover {
    border-color: rgba(196, 30, 58, 0.6);
    box-shadow:
      0 0 0 1px rgba(196, 30, 58, 0.25),
      0 0 36px var(--zombie-red-glow),
      0 16px 50px rgba(139, 0, 0, 0.4);
  }
}