/* ============================================================
   Major Public — фирменное оформление
   ------------------------------------------------------------
   Подключается на ВСЕХ страницах через css_always.
   Файл грузится после стилей шаблона и после стилей модулей,
   поэтому побеждает по каскаду без !important и без правки
   чужих файлов. Обновление шаблона его не затронет.
   ============================================================ */

:root {
  /* Шрифт заголовков: Stratum2 — интерфейсный шрифт Counter-Strike.
     Лежит в поставке шаблона. Конкуренты сидят на Unbounded,
     который стоял здесь раньше. */
  --font-family-1: "Stratum2", "Unbounded", var(--font-family-2), sans-serif;

  /* Моноширинный Stratum2 — он же лежит в поставке. Цифрам он идёт
     больше пропорционального: столбцы сходятся сами собой. */
  --mp-mono: "Stratum2 Mono", "Stratum2", ui-monospace, monospace;

  /* Уклон логотипа: 8/11. Мотив срезов, засечек и бликов. */
  --mp-slope: 36.03deg;

  /* Шкала размеров шаблона поднята примерно на десятую часть: в исходном
     виде текст на большом мониторе мелковат. Правим здесь, а не по местам,
     потому что шаблон и модули берут размеры из этих же переменных. */
  --font-size-xxs: 9px;
  --font-size-xs: 11px;
  --font-size-s: 13px;
  --font-size-m: 15px;
  --font-size-default: 17px;
  --font-size-l: 20px;
  --font-size-xl: 22px;
  --font-size-xxl: 25px;
  --font-size-xxxl: 27px;
  --font-size-4xl: 32px;
  --font-size-5xl: 34px;
  --font-size-6xl: 40px;
  --font-size-7xl: 45px;
}

body { font-size: 16px; }

/* ---------- Типографика ---------- */

h1, h2, h3, h4, h5,
.nav_sitename,
.new-title__text {
  font-family: var(--font-family-1);
  letter-spacing: .01em;
}

/* Цифры должны выстраиваться в колонку, а не плясать.
   Особенно заметно в таблицах лидеров и наказаний. */
.statistics_number,
.progress-value,
.server_players_block,
.table td,
.table th {
  font-variant-numeric: tabular-nums;
}

/* ---------- Знак проекта в шапке и подвале ---------- */

/* Шаблон рисует только текстовое название. Монограмму ставим
   фоном псевдоэлемента — своим файлом, не трогая container.php. */
.logo-text {
  display: flex;
  align-items: center;
  gap: 11px;
}

.logo-text::before {
  content: "";
  flex: none;
  width: 46px;
  height: 30px;
  background: url(../img/mark.svg) 50% / contain no-repeat;
  filter: drop-shadow(0 0 14px rgba(255, 64, 32, .18));
}

.nav_sitename {
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: .06em;
}

.left_footer > a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.left_footer > a::before {
  content: "";
  flex: none;
  width: 32px;
  height: 21px;
  background: url(../img/mark.svg) 50% / contain no-repeat;
  opacity: .5;
  transition: opacity .2s ease;
}

.left_footer > a:hover::before {
  opacity: 1;
}

/* Фиксированная ширина из шаблона рвёт строку рядом со знаком. */
.footer_sitename {
  width: auto;
  max-width: none;
}

/* На узком экране шаблон прячет название сайта, и знак остаётся
   единственной приметой проекта в шапке — значит крупнее, а не мельче. */
@media (max-width: 769px) {
  .logo-text::before { width: 42px; height: 27px; }
  .left_footer > a::before { display: none; }
}

/* ---------- Статистика проекта ---------- */

/* В макете цифры стоят на фоне страницы, без карточек:
   шесть плашек подряд перебивают всё остальное на экране. */
.statistics_container {
  background: transparent;
  border-radius: 0;
  padding: 18px 6px 20px;
}

.statistics_number {
  order: 1;
  font-family: var(--mp-mono);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: var(--font-weight-7);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--text-default);
}

.statistics_name {
  order: 2;
  margin-top: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--font-size-s);
  color: var(--text-secondary);
}

/* Шесть показателей в столбик занимают на телефоне полтора экрана.
   Ставим их по двое: колонка модуля — `col-md-2`, на узком она во всю
   ширину, поэтому ширину задаём сами. */
@media (max-width: 768px) {
  .row > .col-md-2:has(> .statistics_container) {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Смысл цветом, а не рамками: живая цифра — акцентная,
   привилегии — золотом, наказания — красным, остальное молчит. */
#count24 {
  color: var(--span);
  text-shadow: 0 0 26px rgba(255, 64, 32, .4);
}

#countv { color: var(--money); }
#countb { color: var(--red); }

/* Иконок в макете нет. Без карточек они перестали быть углом плашки
   и повисли между соседними числами, разрывая строку. */
.statistics_icon,
.prem_icon { display: none; }

/* Плашка привилегий: золотую рамку и пульс снимаем,
   цвет цифры и выезжающую стрелку оставляем. */
.statistic__premium {
  outline: none;
  animation: none;
}

.statistic__premium:before { display: none; }
.statistic__premium .statistics_name { color: var(--text-secondary); }

/* ---------- Карточка сервера ---------- */

.server_block {
  min-height: 168px;
  justify-content: space-between;
}

/* Сервер пока один. Сетка модуля раскладывает карточки по 25em,
   и единственная занимает треть экрана — растягиваем её на всю ширину.
   Появится второй сервер — правило перестанет действовать само. */
.servers_wrap:has(> .server_block:only-child) {
  grid-template-columns: 1fr !important;
}

.servers_wrap:has(> .server_block:only-child) .server_block {
  min-height: 280px;
}

/* Картинка кадрируется по карточке, а не свисает сверху:
   так на месте карты можно держать нарисованный баннер.
   Смещение по вертикали выбрано так, чтобы каска не срезалась. */
.server_map_image {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.server_map_image .map {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
}

/* Затемнение поверх картинки: слева, где лежат название и адрес.
   Модуль рисует свой градиент — заменяем его на более глубокий,
   иначе светлые карты забивают надпись. */
.server_map_image:after {
  background: linear-gradient(96deg,
    rgba(14, 15, 17, .92) 0 24%,
    rgba(14, 15, 17, .5) 50%,
    rgba(14, 15, 17, .06) 78%);
}

.server_name_custom {
  font-family: var(--font-family-1);
  font-size: clamp(19px, 2.4vw, 28px);
  letter-spacing: .02em;
  max-width: 100%;
}

/* Счётчик игроков — отдельной плашкой, как в макете. */
.server_players_mapname { height: auto; }

.server_players_block {
  font-family: var(--mp-mono);
  font-size: var(--font-size-m);
  background: var(--transparent-5-w);
  border-radius: var(--br-8);
  padding: 4px 11px;
}

/* Полоса заполнения — акцентная, со свечением. */
.progress-value {
  box-shadow: 0 0 12px rgba(255, 64, 32, .35);
}

/* ---------- Слайдер баннеров ---------- */

/* Пропорция задана жёстко, а не через clamp по ширине окна: у баннеров
   персонажи стоят у самого нижнего края кадра, и расхождение даже в три
   процента срезало им ступни. Баннеры собраны 2400×600 — ровно 4:1,
   столько же держит и полоса, поэтому `cover` ничего не отрезает. */
.image-slider.swiper {
  height: auto;
  aspect-ratio: 4 / 1;
  min-height: 240px;
}

/* На телефоне четыре к одному — полоска в сотню пикселей, туда не влезет
   ни заголовок, ни кнопка. Там высота фиксированная, а кадр сдвинут
   вправо, чтобы персонажи остались в виду. */
@media (max-width: 900px) {
  .image-slider.swiper {
    aspect-ratio: auto;
    height: 320px;
  }

  .image-slider__image img {
    object-position: 72% center;
  }
}

/* Шаблон расставляет заголовок, описание и кнопку абсолютными
   координатами от низа слайда (100px, 60px, 20px). Описание в две
   строки при этом наезжает на заголовок. Ставим их в поток колонкой
   от нижнего края — тогда высота считается сама. */
.image-slider__image {
  position: relative;
  overflow: hidden;
  /* Высота слайда задана в 100%, а отступы без border-box прибавляются
     к ней — кнопка уезжала за нижний край. */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* По центру, а не у нижнего края: кадр баннера высокий, и прижатый
     вниз текст оставлял пустой всю верхнюю половину. */
  justify-content: center;
  gap: clamp(6px, 1vw, 12px);
  padding: clamp(18px, 2.6vw, 40px);
}

.image-slider__image img {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.image-slider__image h3,
.image-slider__image p,
.image-slider__image .swiper_btn {
  position: static;
  margin: 0;
}

.image-slider__image h3 { order: 1; }
.image-slider__image p { order: 2; }

.image-slider__image .swiper_btn {
  order: 3;
  align-self: flex-start;
  margin-top: 6px;
}

.image-slider__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(96deg,
    rgba(14, 15, 17, .9) 0 24%,
    rgba(14, 15, 17, .5) 52%,
    rgba(14, 15, 17, .05) 80%);
}

.image-slider__image h3,
.image-slider__image p { z-index: 2; }

/* Засечка над заголовком — тот же уклон, что у слэшей логотипа. */
.image-slider__image h3::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: 11px;
  background: var(--span);
  transform: skewX(calc(-1 * var(--mp-slope)));
}

/* Длинные подписи в шаблоне стоят в одну строку и обрезаются. */
.image-slider__image p {
  white-space: normal;
  text-wrap: wrap;
  width: auto;
  max-width: min(52ch, 58%);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.5;
  color: var(--text-custom);
}

/* Полоса баннера — самый крупный блок на странице, и надписи на ней
   должны читаться с расстояния. */
.image-slider__image h3 {
  font-size: clamp(26px, 2.9vw, 42px);
  line-height: 1.12;
}

/* Кнопка слайдера приводится к виду кнопок сайта. */
.image-slider__image .swiper_btn {
  height: 44px;
  line-height: 44px;
  border-radius: var(--br-12);
}

/* ---------- Таблицы ---------- */

.table thead th {
  font-size: var(--font-size-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Таблице общее укрупнение шрифта не идёт: в таблице лидеров десять
   колонок, и на подросшем кегле имена игроков начинало резать
   многоточием. Держим её на шаг мельче страницы, а вместо сжатия
   колонок включаем прокрутку — она у обёртки уже предусмотрена. */
.table {
  font-size: var(--font-size-s);
}

/* Десять колонок с аватарами в ширину колонки не помещаются, и браузер
   отыгрывался на единственном сжимаемом столбце — ники резало до одной
   буквы («R…», «Ki…»). Даём таблице настоящую ширину: обёртка умеет
   прокручиваться, а на широком мониторе прокрутки и не появится. */
.table-responsive .table {
  min-width: 880px;
}

.table td,
.table th {
  padding-block: 12px;
  padding-inline: 8px;
}

.table tbody tr {
  transition: background .2s ease;
}

.table tbody tr:hover {
  background: var(--transparent-3-w);
}

/* ---------- Заголовки карточек ---------- */

.card-header .badge {
  font-family: var(--font-family-1);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--font-size-s);
}

.card-header .badge::before {
  content: "";
  flex: none;
  width: 4px;
  height: 14px;
  background: var(--span);
  transform: skewX(calc(-1 * var(--mp-slope)));
}

/* ---------- Кнопки ---------- */

/* Диагональный блик под тем же углом, что и слэши логотипа.
   Появляется только на главной кнопке действия. */
.server_button.play {
  position: relative;
  overflow: hidden;
}

.server_button.play::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 36%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: rotate(var(--mp-slope));
  animation: mp-sheen 5.2s ease-in-out infinite;
}

@keyframes mp-sheen {
  0%, 74% { left: -70%; }
  90%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .server_button.play::after { animation: none; }
}

/* ---------- Угольки на баннерах ---------- */

/* Слой лежит на рисунке, но ниже затемнения и текста: затемнение густое
   слева, где надпись, и почти прозрачное справа — там искры и видны. */
.mp-sparks {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Отсвет очага справа снизу — источник, откуда летят угольки. */
.mp-heat {
  position: absolute;
  right: -16%;
  bottom: -28%;
  display: block;
  width: 58%;
  height: 110%;
  background: radial-gradient(closest-side, rgba(255, 95, 45, .42), transparent 72%);
  filter: blur(7px);
  animation: mp-heat 5.5s ease-in-out infinite;
}

@keyframes mp-heat {
  0%   { opacity: .4; transform: translateY(0) scaleY(1); }
  50%  { opacity: .68; transform: translateY(-7px) scaleY(1.07); }
  100% { opacity: .4; transform: translateY(0) scaleY(1); }
}

@keyframes mp-ember {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  12%  { opacity: 1; transform: translate(-4px, -24px) scale(1); }
  70%  { opacity: .8; }
  100% { opacity: 0; transform: translate(-18px, -215px) scale(.4); }
}

@keyframes mp-ember-b {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  18%  { opacity: .9; transform: translate(6px, -30px) scale(1); }
  100% { opacity: 0; transform: translate(24px, -235px) scale(.35); }
}

@keyframes mp-flicker {
  0%, 100% { opacity: .4; }
  40%      { opacity: .95; }
  62%      { opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-heat { animation: none; }
}

/* ---------- Соцсети в шапке ---------- */

.mp-socials {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

.mp-soc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--br-12);
  background: var(--transparent-4-w);
  color: var(--text-secondary);
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.mp-soc svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.mp-soc:hover {
  transform: translateY(-1px);
  background: var(--transparent-10-w);
  color: var(--text-default);
}

/* Наведение окрашивает в цвет самой площадки — они уже есть в палитре. */
.mp-soc--tg:hover { color: var(--brand-telegram-color); }
.mp-soc--vk:hover { color: var(--brand-vkontakte-color); }
.mp-soc--ds:hover { color: var(--brand-discord-color); }
.mp-soc--yt:hover { color: var(--brand-youtube-color); }
.mp-soc--tt:hover { color: var(--brand-tiktok-color); }

/* На телефоне в шапке и без них тесно. */
@media (max-width: 900px) {
  .mp-socials { display: none; }
}

/* ---------- Пустые витрины ---------- */

/* Пока товаров нет, движок рисует пустой прямоугольник — посетитель
   видит дыру и не понимает, сломалось или так задумано. Подписываем.
   Правила отключатся сами, как только появится первый товар.
   Не `:empty`: в разметке остаются переводы строк, и он не срабатывает. */
.shop_wrapper_product:not(:has(*))::after,
#cases > .cases-section__title:last-child::after {
  content: "Скоро здесь появятся товары";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 24px;
  border: 1px dashed var(--transparent-10-w);
  border-radius: var(--br-16);
  color: var(--text-secondary);
  font-size: var(--font-size-m);
  text-align: center;
  /* Витрина товаров — сетка: заглушка должна занять всю строку,
     иначе встаёт узкой колонкой на месте первого товара. */
  grid-column: 1 / -1;
}

#cases > .cases-section__title:last-child::after {
  content: "Скоро здесь появятся кейсы";
  margin-top: 16px;
}

/* ---------- Шапка ---------- */

/* В макете счётчик онлайна стоит справа, рядом с кнопками, а не сразу
   за названием сайта. Переносит его `always.js`; здесь только отступ. */
.navbar_usermenu > .online {
  margin-right: 4px;
}

/* Кнопки шапки по макету: «Пополнить» — спокойная, со светлой рамкой,
   вход через Steam — акцентный, это главное действие для гостя. */
/* В макете «Пополнить» — прозрачная кнопка с тонкой светлой рамкой,
   а вход через Steam — сплошной акцентный. Сплошная кнопка на экране
   одна, и это главное действие для гостя. */
.pay_button {
  background: transparent !important;
  border: 1px solid var(--transparent-20-w);
  border-radius: var(--br-8);
}

.pay_button .hide_balance_text {
  color: var(--text-default) !important;
  font-weight: var(--font-weight-6);
}

.pay_button svg {
  fill: var(--text-custom);
}

.pay_button:hover {
  border-color: var(--transparent-20-w);
  background: var(--transparent-4-w) !important;
}

.navbar_usermenu button[onclick*="auth=login"] {
  background: var(--span);
  color: #1a0703;
  font-weight: var(--font-weight-6);
}

.navbar_usermenu button[onclick*="auth=login"] svg {
  fill: #1a0703;
}

/* ---------- Меню в шапке ---------- */

/* Торговые разделы выделены акцентом: за ними идут деньги, и в макете
   конкурентов они тоже горят. Метку ставит `always.js` — категорию
   в CSS по её содержимому не выбрать. */
.drpdwn_menu .dropdown.mp-nav-hot > .dropbtn .desc_nav_item {
  color: var(--span);
  text-shadow: 0 0 18px rgba(255, 64, 32, .5);
}

.drpdwn_menu .dropdown.mp-nav-hot > .dropbtn svg {
  fill: var(--span);
  filter: drop-shadow(0 0 8px rgba(255, 64, 32, .45));
}

.drpdwn_menu .dropdown.mp-nav-hot > .dropbtn:hover .desc_nav_item {
  text-shadow: 0 0 26px rgba(255, 64, 32, .8);
}

/* Поиск игроков из шапки убран: он не нужен посетителю на витрине,
   а место в строке занимает. Профили ищутся из таблицы лидеров. */
.navbar_usermenu .search_players {
  display: none;
}

/* ---------- Слайдер: точки вместо стрелок ---------- */

/* В макете переключение — только точки в правом нижнем углу.
   Круглые стрелки в плашке движок рисует сам, они лишние. */
.image-slider .swiper-button-prev,
.image-slider .swiper-button-next,
.image-slider .swiper-buttons {
  display: none !important;
}

.image-slider .swiper-pagination {
  left: auto !important;
  right: 22px !important;
  bottom: 18px !important;
  width: auto !important;
  display: flex;
  align-items: center;
  gap: 7px;
}

.image-slider .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 !important;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .26);
  opacity: 1;
  transition: width .3s ease, background .3s ease;
}

.image-slider .swiper-pagination-bullet-active {
  width: 22px !important;
  border-radius: 20px;
  background-color: var(--span);
}

/* ---------- Разделитель перед баннером ---------- */

/* В макете сервер отчёркнут от рекламной полосы тонкой линией. */
.col-md-12:has(> .image-slider) {
  margin-top: 10px;
  padding-top: 26px;
  border-top: 1px solid var(--transparent-5-w);
}

/* ---------- Меню по центру шапки ---------- */

/* В потоке меню прижимается к логотипу: слева лого с названием, справа
   кнопки, и середина остаётся пустой. Ставим его по центру самой шапки
   абсолютом — только на широких экранах, где для этого есть место.
   Ниже 1080 движок и так прячет меню под бургер.

   `top`/`bottom` обязательны: у шаблонного `.drpdwn_menu` высота задана
   в процентах, и без них абсолютный блок схлопывался в ноль. Пункты
   меню внутри тоже тянутся на всю высоту, поэтому выпадающий список,
   отсчитанный от них, уезжал вниз — под первый экран. */
@media (min-width: 1280px) {
  .navbar {
    position: relative;
    z-index: 150;
  }

  .drpdwn_menu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------- Надстрочник на баннере ---------- */

/* В макете над заголовком стоит мелкая подпись раздела: «Игровой
   магазин», «Кейсы», «Набор в команду». Разметка слайда её не
   предусматривает, поэтому её добавляет `always.js`. */
.mp-eye {
  order: 0;
  z-index: 2;
  font-family: var(--mp-mono);
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--span);
}

.mp-eye::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: 11px;
  background: var(--span);
  transform: skewX(calc(-1 * var(--mp-slope)));
}

/* Засечка переезжает на надстрочник — на заголовке она была бы второй. */
.image-slider__image:has(.mp-eye) h3::before {
  display: none;
}

/* ---------- Кнопка на баннере ---------- */

/* В макете это сплошная акцентная кнопка с тёмной надписью и бликом,
   без иконки. Шаблон рисует стрелку в квадратике и растит её на весь
   фон при наведении — к макету это отношения не имеет. */
.image-slider__image .swiper_btn {
  height: auto;
  line-height: 1;
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--br-8);
  background: linear-gradient(135deg, var(--span), #e5300f);
  box-shadow: 0 6px 22px rgba(255, 64, 32, .3);
  color: #1a0703;
  font-size: var(--font-size-default);
  font-weight: var(--font-weight-6);
  gap: 0;
}

.image-slider__image .swiper_btn:hover {
  border: 1px solid transparent;
  transform: translateY(-1px);
}

.image-slider__image .swiper_btn svg,
.image-slider__image .swiper_btn .swiper_action_svg {
  display: none;
}

/* Блик под тем же уклоном, что у слэшей логотипа. */
.image-slider__image .swiper_btn::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 36%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: rotate(var(--mp-slope));
  animation: mp-sheen 5.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .image-slider__image .swiper_btn::after { animation: none; }
}