/* ==========================================================================
   DropHub home
   Grid taken off the reference at a 1536px canvas:
     page padding 8 · left column 257 · hero 912 · live drops 340 · gutter 10
   Those become one sidebar track plus a main track; the mode row, the
   dashboard and the trust strip all live in the main track, which is why they
   align under the hero instead of running the full page width.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---------- нейтральные ----------

     Раньше вся серия уходила в синеву: #07090B, #0B0F12, #10151A. По
     отдельности это читается как чёрный, но рядом с чистым чёрным шапки
     панели отдавали синим, и страница выглядела как две разные темы.

     Теперь фон — настоящий чёрный, а панели идут по нейтральной серой
     шкале без цветового сдвига. Расстояние между ступенями сохранено: на
     нём держится глубина панелей друг над другом. */
  --bg:        #000000;
  --panel:     #0A0A0B;
  --panel-2:   #0F1011;
  --panel-3:   #16171A;
  --line:      #1E2023;
  --line-soft: #151719;

  --accent:    #EDE00F;   /* the yellow of every primary CTA */
  --accent-hi: #FBF35C;
  --lime:      #D7FF00;
  /* Деньги на всём сайте: баланс, цены скинов и кейсов. Тот же зелёный,
     что у кнопок действия («Пополнить», «Открыть»), — деньги и действия
     с ними должны читаться одним цветом. */
  --money:     #6DEA5D;
  --violet:    #A62CFF;
  --magenta:   #E22CC0;
  --red:       #FF3B30;
  --gold:      #FFC93C;
  --blue:      #3E9BFF;
  --green:     #43D97A;

  --text:      #F2F5F7;
  --text-dim:  #8C97A3;
  --text-mute: #5A646E;

  --gap:       10px;
  --drops-w:   340px;   /* правая колонка: событие и живые дропы */

  /* Высота баннера. В vh, а не в пикселях: на ноутбуке 768 фиксированные
     300 съедали треть экрана, и второй ряд режимов уходил под сгиб.
     Из неё же считается ширина всей колонки — см. .kz-showcase. */
  /* 38vh, а не 30: при прежнем значении баннер выходил вдвое ниже ряда
     иконок, и первый экран читался как стена плиток с картинкой сбоку.
     Баннер — главное на странице, и по высоте он теперь сопоставим с
     рядом, а не подчинён ему. */
  --hero-h:    clamp(230px, 38vh, 400px);
  --radius:    16px;   /* скругление блоков по всему сайту; было 8 — просили плавнее */
  /* Скругление баннеров верхнего ряда. Отдельно от общего --radius: на
     референсе углы там заметно круглее, чем у панелей внутри страницы, и
     подтягивать под них весь сайт значило бы переделывать то, о чём не
     просили.

     20px — измеренное значение с magic-drop.win (border-radius и у
     слайдера баннера, и у правых карточек). На глаз я ставил 14. */
  --r-banner:  20px;

  /* ---------- ширина сайта ----------

     Раньше контент упирался в 1560px и вставал по центру, а шапка тянулась
     во всю ширину — на мониторе шире полутора тысяч это читалось как чужая
     колонка посреди пустого экрана.

     Теперь у шапки и у содержимого одно поле по краям (--pad-x), поэтому
     логотип стоит ровно над первой панелью, а не сам по себе. Потолок
     (--shell) поднят до 2040: на 1920 он не срабатывает вовсе, сайт идёт от
     края до края, а на сверхшироких мониторах строки не растягиваются до
     нечитаемой длины. */
  --shell:     2040px;
  /* Имя --pad-x, а не --edge: в upgrade.css уже есть свой --edge, и это
     ЦВЕТ рамки слота. Глобальная переменная с тем же именем подставила бы
     туда «20px» и обрушила бы box-shadow — рамка исчезла бы молча. */
  --pad-x:     20px;

  --f-cond: 'Oswald', 'Inter', sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-brush: 'Rubik Dirt', 'Oswald', cursive;
}

body {
  font-family: var(--f-body);
  color: var(--text);
  font-size: 13px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* ═══════════════ ФОН ═══════════════

   Живой переливающийся фон: цветная база плюс два слоя пятен, которые
   медленно расходятся по движению и перетекают друг в друга по яркости.

   ---------- ПОЧЕМУ ПЕРВАЯ ПОПЫТКА БЫЛА НЕВИДИМОЙ ----------

   Сперва тут стояли пятна в 6–12% непрозрачности поверх чистого чёрного.
   На чёрном это единицы яркости из 255 — глазом не отличить от фона.
   Сверху лежала виньетка, гасившая и эти единицы, а поверх всего — панели
   с непрозрачным фоном, за которыми свободного места остаётся немного.
   Втроём это давало ровно ничего.

   Поэтому теперь: база не чёрная, а тёмно-цветная (её видно и под
   панелями по краям), пятна в разы плотнее, виньетки нет вовсе.

   ---------- ЧЕГО ЗДЕСЬ ПО-ПРЕЖНЕМУ НЕТ ----------

   Пятна не ставятся по центру верха. Именно оттуда брался ореол вокруг
   баннера, который читался как свечение самого баннера. Цвет живёт по
   углам и вдоль нижнего края — там, где содержимого нет. */

body {
  /* Ровный тёмный фон на весь сайт — тот же, что был подобран на главной.
     Переливающиеся пятна (body::before/after ниже) выключены: страницы с
     фотографическими задниками ложатся прямо на эту заливку, и цветная
     база просвечивала сквозь них грязью. Сами слои пятен оставлены в
     файле — если фон снова захотят живым, включать нужно их, а не писать
     новые. */
  background: #17171F fixed;
  /* Камуфляжный слой ниже — absolute, и тянется он по body: без этого он
     схлопнется до размера экрана и узор внизу страницы повторил бы верх. */
  position: relative;
}

body::before, body::after {
  content: ''; display: none; position: fixed; z-index: -1; pointer-events: none;
  /* Больше экрана: слои ездят, и на краях не должно появляться пустоты. */
  inset: -20%;
  will-change: transform, opacity;
}

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

   Слой A: электрик слева сверху, лёд справа сверху, индиго намёком по
   верхнему центру. */
body::before {
  background:
    radial-gradient(48% 52% at 8% 4%,   rgba(50, 120, 255, .30), transparent 70%),
    radial-gradient(40% 44% at 94% 18%, rgba(80, 200, 255, .18), transparent 70%),
    radial-gradient(30% 34% at 70% 4%,  rgba(110, 90, 255, .12), transparent 72%);
  animation: kz-bg-a 34s ease-in-out infinite alternate,
             kz-bg-fade 26s ease-in-out infinite alternate;
}

/* Слой B: индиго справа снизу, электрик слева снизу, лёд по нижнему
   краю. */
body::after {
  background:
    radial-gradient(44% 48% at 92% 94%, rgba(110, 90, 255, .24), transparent 70%),
    radial-gradient(46% 50% at 4% 92%,  rgba(50, 120, 255, .28), transparent 70%),
    radial-gradient(34% 38% at 50% 100%, rgba(80, 200, 255, .14), transparent 72%);
  animation: kz-bg-b 38s ease-in-out infinite alternate,
             kz-bg-fade 26s ease-in-out infinite alternate-reverse;
}

@keyframes kz-bg-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%,  2.4%, 0) scale(1.08); }
}
@keyframes kz-bg-b {
  from { transform: translate3d(2.6%, 2.2%, 0) scale(1.07); }
  to   { transform: translate3d(-3%, -2%, 0) scale(1); }
}
/* Встречная яркость и есть перелив. Верх диапазона ровно 1, а не больше:
   непрозрачность обрезается единицей, и слой с 1.08 почти половину цикла
   стоял бы на упоре — перелива не было бы. */
@keyframes kz-bg-fade {
  from { opacity: .45; }
  to   { opacity: 1; }
}

/* Движение фона — украшение, и для тех, кто его отключил, оно не нужно.
   Слои остаются, замирают на середине. */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; opacity: .8; }
}

/* ═══════════════ КАМУФЛЯЖ ═══════════════
   Узор на весь сайт под панелями. Слой body::before переиспользован:
   пятна выключены, а здесь он включается заново без анимации. Страницы с
   фотозадниками (кейсы, батлы) лежат поверх — узор остаётся по краям.

   Слой absolute, а не fixed: fixed прибивает картинку к экрану, и внизу
   длинной страницы виден ровно тот же кусок узора, что и вверху. Здесь он
   растянут по высоте документа и прокручивается вместе с контентом.
   Ширина — background-size 100%, высота по пропорции, дальше repeat вниз:
   горизонтального стыка не возникает вовсе, а вертикальный на этой
   текстуре почти не читается и при opacity .3 не виден. */
body::before {
  display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  animation: none; will-change: auto; transform: none;
  background: url('assets/bg_camo_ref.jpg') 0 0 / 100% repeat;
  opacity: .3;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }

/* ─── shared atoms ─── */
.kz-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}
.kz-panel__head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-cond); font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text);
  margin-bottom: 10px;
}
.kz-panel__more {
  margin-left: auto; font-family: var(--f-body); font-size: 10px;
  font-weight: 600; letter-spacing: .06em; color: var(--text-mute);
  transition: color .15s;
}
.kz-panel__more:hover { color: var(--accent); }
.kz-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 6px rgba(215,255,0,.7);
  flex-shrink: 0;
}
.kz-ico { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; }
.kz-ico svg { width: 100%; height: 100%; }
.kz-caret { display: inline-flex; width: 12px; height: 12px; opacity: .6; }
.kz-caret svg { width: 100%; height: 100%; }

.kz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 14px; border-radius: 6px;
  font-family: var(--f-cond); font-size: 12px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s, filter .15s;
}
.kz-btn__arrow { display: inline-flex; width: 14px; height: 14px; }
.kz-btn__arrow svg { width: 100%; height: 100%; }
.kz-btn--accent { background: var(--accent); color: #0A0C0E; }
.kz-btn--accent:hover { background: var(--accent-hi); }
.kz-btn--ghost {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line);
}
.kz-btn--ghost:hover { background: var(--panel-3); border-color: #2A2C30; }
.kz-btn--block { width: 100%; }
.kz-btn--lg { height: 40px; padding: 0 20px; font-size: 13px; }
/* «+» пополнения — зелёный: это деньги внутрь, и он не должен спорить
   с лаймовыми кнопками действий рядом. Тон тот же, что у «Открыть» на
   странице кейса (--cs-green), чтобы зелёный на сайте был один. */
.kz-btn--add {
  width: 32px; padding: 0; background: #6DEA5D; color: #163712;
}
.kz-btn--add:hover { filter: brightness(1.06); }
.kz-btn--add svg { width: 16px; height: 16px; }

.kz-morelink {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft);
  font-family: var(--f-cond); font-size: 11px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
  transition: color .15s;
}
.kz-morelink:hover { color: var(--accent); }
.kz-morelink svg { width: 13px; height: 13px; }

/* rarity accents, shared by feed rows, drops and cases */
.r-violet  { --r: var(--violet); }
.r-gold    { --r: var(--gold); }
.r-red     { --r: var(--red); }
.r-green   { --r: var(--green); }
.r-blue    { --r: var(--blue); }
.r-magenta { --r: var(--magenta); }
.r-amber   { --r: #E08A1E; }

/* ═══════════════ HEADER ═══════════════

   Чёрная полоса, пункты в строку: иконка слева, подпись справа. Прежняя
   шапка была серо-синей (#1D2126), а пункты — колонкой «иконка над
   подписью» высотой 56px. Из-за этого она читалась как отдельная плашка,
   положенная поверх чёрной страницы, а не как её край.

   Акцент здесь лаймовый, а не жёлтый, как у кнопок внутри страницы: тем же
   лаймом набрано «Drop» в логотипе, и активный пункт с кнопкой регистрации
   встают с ним в один тон. */
.kz-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 26px;
  height: 64px; padding: 0 var(--pad-x);
  /* Ни фона, ни рамки: и то и другое переехало на слой ниже, потому что
     их надо гасить градиентом, а содержимое шапки гасить нельзя. */
  background: none;
  /* overflow здесь НЕ ставить. Шапка — родитель выпадающего меню Games, и
     любой overflow кроме visible обрежет его по высоте строки. На этом уже
     обжигались: меню было невидимым и некликабельным, и диагностировать
     пришлось через elementFromPoint. */
}

/* ═══════════════ ПОДЛОЖКА ШАПКИ ═══════════════

   Ровная полупрозрачная полоса на размытии, во всю высоту шапки и ни
   пикселем ниже. Одинаковая на всех страницах.

   Раньше здесь был градиент от почти чёрного сверху к нулю снизу, со
   свесом на 26 пикселей и маской, а на главной его перебивало отдельное
   правило (.gg-home) — та самая ровная подложка. Из-за этого главная
   выглядела монолитной и полупрозрачной, а все прочие страницы — с
   чёрной шапкой. Разошлись не темы, а одно правило: теперь вариант
   главной и есть общий, а исключения нет.

   ---------- ПОЧЕМУ ОТДЕЛЬНЫМ СЛОЕМ ----------

   Гасить надо ФОН, а не содержимое: прозрачность, поставленная на саму
   шапку, утащила бы за собой логотип и кнопки.

   z-index: -1 — чтобы слой рисовался ПОД строкой шапки, не трогая её
   детей. Ноль здесь не подошёл бы: позиционированный элемент с нулём
   рисуется поверх поточных потомков, и он закрыл бы собой логотип.

   saturate вместе с blur — не украшение: размытие усредняет цвет и
   заметно обесцвечивает то, что под ним, а лёгкое поднятие насыщенности
   возвращает проехавшему под шапкой баннеру его собственный цвет. */
.kz-header::before {
  content: ''; position: absolute; z-index: -1;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(13px) saturate(1.25);
          backdrop-filter: blur(13px) saturate(1.25);
}

/* Без backdrop-filter затухание остаётся, а размытия просто нет: заливка
   градиентом работает сама по себе и ни на что не опирается. */

/* Логотип — картинка с собственным свечением по краям: часть высоты файла
   это ореол, а не буквы, поэтому сами литеры меньше заданной высоты. */
.kz-logo { display: flex; align-items: center; }
.kz-logo__word { height: 54px; width: auto; display: block; }
.kz-logo__sub {
  font-family: var(--f-cond); font-size: 8px; font-weight: 500;
  letter-spacing: .34em; color: var(--lime); padding-left: 3px; margin-top: 3px;
}

/* min-width: 0 и прокрутка — чтобы меню сжималось, а не распирало шапку.

   Без этого пункты держат свою ширину любой ценой, правая группа (баланс,
   кнопки, аватар) выдавливается за край, и вся страница получает
   горизонтальную прокрутку. Это ломало вёрстку начиная с 1450 пикселей, а
   не только на телефоне. */
/* Прокрутки у меню шапки НЕТ, и это принципиально.

   Здесь стояло `overflow-x: auto; overflow-y: visible` — против
   переполнения шапки на средних экранах. Ловушка в том, что по правилам
   CSS `visible` рядом с любым другим значением по второй оси сам
   становится `auto`. То есть обрезка включалась и по вертикали, а любой
   overflow, кроме visible, обрезает абсолютно позиционированных потомков.
   Выпадающее меню игр — как раз такой потомок: оно исправно открывалось,
   получало нужный размер и видимость, но целиком лежало за границей
   обрезки высотой в строку меню. На экране — ничего.

   Переполнение решается не прокруткой, а тем, что ниже 980 меню шапки
   скрывается целиком, а между 1100 и 980 из него уходят второстепенные
   пункты (см. медиазапросы ниже). */
.kz-nav {
  display: flex; align-items: center; gap: 2px; list-style: none;
  min-width: 0;
}
.kz-nav__li { display: flex; align-items: center; flex: none; }
.kz-nav__item {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 13px;
  border: 1px solid transparent; border-radius: 8px;
  color: #97A0A8;
  font-size: 12px; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
  transition: color .18s, background .18s, border-color .18s;
}
.kz-nav__item:hover { color: #E8ECF0; background: #0B0B0C; }
/* Активный пункт — лаймовый текст на еле заметной лаймовой подложке.
   Иконка идёт currentColor, поэтому красится вместе с подписью. */
.kz-nav__item.is-active, .kz-nav__item.is-open {
  color: var(--lime);
  background: rgba(215, 255, 0, .07);
  border-color: rgba(215, 255, 0, .22);
}
.kz-nav__ico { position: relative; display: block; width: 18px; height: 18px; }
.kz-nav__ico > svg { width: 18px; height: 18px; display: block; }
.kz-nav__label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kz-nav__label .kz-caret { width: 11px; height: 11px; opacity: .8; }

/* Метки висят на глифе, а не на подписи, чтобы не сдвигать строку. */
.kz-nav__badge {
  position: absolute; left: 100%; top: -7px; transform: translateX(-38%);
  padding: 2px 4px; border-radius: 3px;
  background: var(--green); color: #08110B;
  font-size: 8px; font-weight: 700; line-height: 8px; letter-spacing: .04em;
}
.kz-nav__flame {
  position: absolute; left: 100%; top: -9px; transform: translateX(-45%);
  width: 15px; height: 15px; color: #FF7A18;
}
.kz-nav__flame svg { width: 100%; height: 100%; display: block; }

/* ─── правый край ───
   Все элементы одной высоты 38 и одного радиуса 8, чтобы ряд читался как
   один блок, а не как набор разнокалиберных кнопок. */
/* flex: none — правая группа не сжимается и не переносится: в ней баланс и
   кнопки входа, и урезать их нельзя. Сжимается меню слева. */
.kz-header__end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

.kz-iconbtn {
  width: 38px; height: 38px; border-radius: 8px;
  background: #0B0B0C; border: 1px solid #1B1C1F; color: #98A0A8;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.kz-iconbtn svg { width: 18px; height: 18px; }
.kz-iconbtn:hover { background: #131417; color: #fff; border-color: #26282C; }

.kz-header__end .kz-btn {
  height: 38px; padding: 0 18px; border-radius: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.kz-header__end .kz-btn--ghost {
  background: #0B0B0C; border: 1px solid #1B1C1F; color: #E6EAEE;
}
.kz-header__end .kz-btn--ghost:hover { background: #131417; border-color: #26282C; }
.kz-header__end .kz-btn--accent { background: var(--lime); color: #0A0C0E; }
.kz-header__end .kz-btn--accent:hover { background: #E4FF3D; }
/* Кнопки внутри кошелька: ниже прочих в шапке, чтобы плашка не выросла. */
.kz-wallet .kz-btn { height: 34px; padding: 0 14px; border-radius: 9px; font-size: 12px; letter-spacing: .02em; }
.kz-wallet .kz-btn--add { width: auto; background: var(--money); color: #163712; }
.kz-wallet .kz-btn--add:hover { filter: brightness(1.06); }
.kz-wallet .kz-btn--out { background: #1D1F24; color: #C6CDD4; border: 1px solid #26282C; }
.kz-wallet .kz-btn--out:hover { background: #262930; color: #fff; }

/* ─── Кошелёк в шапке ───
   Баланс и оба действия с ним живут в одной тёмной плашке: деньги, куда
   их положить и как забрать — одна мысль, и разносить её по трём местам
   незачем. Плашка держит группу вместе, а кнопки внутри неё отличаются
   не рамками, а весом: пополнение зелёное, вывод тихий. */
.kz-wallet {
  display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 4px 4px 4px 10px; border-radius: 12px;
  /* Полупрозрачная, с размытием под собой: сплошная чёрная плашка на
     камуфляже читалась как дыра в фоне. */
  background: rgba(11, 11, 12, .55); border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
}
.kz-balance {
  /* Отступы поджаты: слева плашка уже даёт 14px, справа сумма упиралась
     в пустоту перед кнопкой. */
  display: flex; align-items: center; gap: 5px; padding-right: 2px;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--money);
}
.kz-balance__coin { display: inline-flex; width: 24px; height: 24px; margin-left: -4px; color: var(--money); }   /* было 16 — не читалась */
.kz-balance__coin svg { width: 100%; height: 100%; }

/* Значок валюты вместо «$» перед суммами — ставит kraze.currency.js.
   Размер от шрифта, чтобы в любой строке монета была вровень с цифрами. */
.kz-cur {
  display: inline-block; width: 1.05em; height: 1.05em; margin-right: .22em; vertical-align: -.16em;
  background: url("assets/coin-64.png") center / contain no-repeat;
  font-style: normal;
}
@media (min-resolution: 1.5dppx) { .kz-cur { background-image: url("assets/coin-128.png"); } }
/* Монета справа от суммы: отступ переезжает на левую сторону, размер
   крупнее обычного — на кнопке она стоит одна и читается как знак
   валюты, а не как значок рядом с текстом. */
.kz-cur--lg { width: 1.3em; height: 1.3em; margin-right: 0; margin-left: .3em; vertical-align: -.24em; }

/* Монета валюты — растровая (KRAZE_ART.icon.coin вставляет <img>).
   Контейнеры по всему сайту размечены под svg 100%×100% — картинка
   ведёт себя так же, поэтому ни один из них править не пришлось. */
.kz-coin-img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ── Водяной знак на карточках со скинами ──
   Обесцвеченная D с молнией (assets/skin-mark.png) лежит под содержимым
   каждого блока с предметом. Одно правило на все страницы: список
   классов карточек, псевдоэлемент ::after у них свободен (проверено), а
   isolation + z-index:-1 кладут знак ПОД картинку и текст, но НАД фоном
   самой карточки. border-radius: inherit — знак не вылезает за скругление.
   Карточки страницы кейса (.cs-sm) знак рисуют сами в cases.css —
   здесь их нет, иначе выходило два знака. */
.pg-skin, .tr-in, .tr-rit, .up-tile, .cfl-it, .cr-item, .cs-it, .ks-it,
.bt-it, .bt-rit, .kz-drop, .mn-prize__art, .cx-case__t {
  position: relative; isolation: isolate;
}
.pg-skin::after, .tr-in::after, .tr-rit::after, .up-tile::after, .cfl-it::after, .cr-item::after,
.cs-it::after, .ks-it::after, .bt-it::after, .bt-rit::after, .kz-drop::after,
.mn-prize__art::after, .cx-case__t::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  /* 59 % вместо 74 — знак уменьшен на пятую часть: в прежнем размере он
     подпирал края карточки и спорил со скином. */
  background: url("assets/skin-mark.png") center 46% / auto 59% no-repeat;
  opacity: .085;
  /* Затухание в левый нижний угол: «to bottom left» ведёт от правого
     верха к левому низу, поэтому знак плотный сверху и сходит в ноль
     там, где под ним подпись с названием и ценой. */
  -webkit-mask: linear-gradient(to bottom left, #000 30%, rgba(0, 0, 0, .35) 62%, transparent 88%);
          mask: linear-gradient(to bottom left, #000 30%, rgba(0, 0, 0, .35) 62%, transparent 88%);
}
.bt-it { position: absolute; }   /* карточка в слоте баттла остаётся абсолютной */

/* ── Карточка ВЫБОРА скина ──
   Один вид на все места, где предмет выбирают: инвентарь краша, панель
   ставки в играх (kraze.stake.js), вход контракта, плитки апгрейда.

   Правила лежали в crash.css, а он подключён только к своей странице:
   на минере класс был, а стилей не было, и карточки выглядели иначе.
   Поэтому весь блок переехал сюда — это общий компонент, а не деталь
   одной игры.

   Разряд приходит из разметки в --r или в --rar: имена исторически
   разные, поэтому запасная цепочка, а не переименование в трёх файлах. */
.cr-item, .ks-it, .tr-in, .up-tile {
  --rr: var(--r, var(--rar, #4b69ff));
  position: relative; padding: 6px 4px 5px;
  display: grid; gap: 2px; justify-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  /* Цвет разряда заливает карточку целиком, а не подсвечивает середину:
     разряд должен читаться с одного взгляда. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--rr) 46%, var(--panel-3)),
    color-mix(in srgb, var(--rr) 16%, var(--panel-3)));
  cursor: pointer; color: var(--text);
  transition: border-color .14s, transform .14s, opacity .14s;
}
/* золотая кромка: 1px по верхней половине карточки, к середине сходит на
   нет. Кольцо из градиента, вырезанное маской, — рамка ниже остаётся */
.cr-item::before, .ks-it::before, .tr-in::before, .up-tile::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 85%, #fff) 0%,
    color-mix(in srgb, var(--gold) 55%, transparent) 30%, transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .14s;
}
/* по hover приподнимается сама картинка, а не карточка: кромка рисуется
   отдельным слоем и при transform карточки отставала от неё */
.cr-item:hover:not([disabled]), .ks-it:hover:not([disabled]),
.tr-in:hover:not([disabled]), .up-tile:hover:not([disabled]) { border-color: var(--text-mute); }
.cr-item img, .ks-it img, .tr-in img, .up-tile img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
  transition: transform .16s cubic-bezier(.2, .8, .3, 1);
}
.cr-item:hover:not([disabled]) img, .ks-it:hover:not([disabled]) img,
.tr-in:hover:not([disabled]) img, .up-tile:hover:not([disabled]) img {
  transform: translateY(-3px) scale(1.04);
}
.cr-item b, .ks-it b, .tr-in b, .up-tile b {
  font-family: var(--f-cond); font-size: 12px; font-weight: 600;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.cr-item.is-on, .ks-it.is-on, .tr-in.is-on, .up-tile.is-on {
  border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 60%, transparent);
}
.cr-item.is-on::before, .ks-it.is-on::before,
.tr-in.is-on::before, .up-tile.is-on::before { opacity: 0; }
.cr-item[disabled], .ks-it[disabled], .tr-in[disabled], .up-tile[disabled] { cursor: default; opacity: .45; }

.kz-avatar {
  display: flex; align-items: center; gap: 4px;
  padding: 0; color: var(--text-mute);
}
.kz-avatar i {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel-3); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--text-mute);
}
.kz-avatar i svg { width: 20px; height: 20px; }

/* ═══════════════ ВХОД ЧЕРЕЗ STEAM ═══════════════
   Кнопка входа и меню аккаунта. Разметку шапки правит kraze.auth.js по
   ответу /api/me, поэтому здесь только внешний вид обоих состояний. */

.kz-header__end { position: relative; }

/* У кнопок шапки задан свой display, а он сильнее, чем display:none из
   браузерного правила для [hidden] — без !important спрятать их атрибутом
   не выйдет, и «Register» осталась бы висеть рядом с входом в Steam. */
.kz-header__end [hidden] { display: none !important; }

/* Зелёная, как «+» пополнения и как «Открыть» на кейсе: вход — главное
   действие для гостя, и в ряду тёмных кнопок шапки он должен читаться
   первым. Один плоский тон без градиента — чтобы зелёный совпадал с
   кнопкой открытия, а не был её вариацией. */
.kz-header__end .kz-btn--steam {
  display: flex; align-items: center; gap: 8px; padding: 0 18px;
  background: #6DEA5D; border: 0; color: #163712;
}
.kz-header__end .kz-btn--steam:hover { filter: brightness(1.06); }
.kz-btn--steam svg { flex: none; }
.kz-btn--steam span { letter-spacing: .06em; white-space: nowrap; }

.kz-avatar--steam i { overflow: hidden; background: #0B0B0C; }
.kz-avatar--steam i img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kz-acct {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 214px; padding: 6px;
  background: #101114; border: 1px solid #23252A; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
}
.kz-acct__who { padding: 9px 11px 11px; border-bottom: 1px solid #1D1F23; margin-bottom: 6px; }
.kz-acct__who b { display: block; font-size: 13px; font-weight: 700; color: #E6EAEE; }
.kz-acct__who i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 11px; color: #6E767E; font-variant-numeric: tabular-nums;
}
.kz-acct__i {
  display: block; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #C6CDD4;
  transition: background .12s, color .12s;
}
.kz-acct__i:hover { background: #1A1C20; color: #fff; }
.kz-acct__out { color: #E8697A; margin-top: 2px; border-top: 1px solid #1D1F23; border-radius: 0 0 8px 8px; }
.kz-acct__out:hover { background: rgba(232, 105, 122, .12); color: #FF8B99; }

/* На узком экране подпись уводит кнопку за край — остаётся один значок. */
@media (max-width: 900px) {
  .kz-btn--steam span { display: none; }
  .kz-header__end .kz-btn--steam { padding: 0 12px; }
}

/* ═══════════════ LAYOUT ═══════════════ */
/* Одна колонка: левой боковой панели больше нет, верхний ряд идёт от края
   до края. Лента активности переехала полосой под дашборд. */
.kz-layout {
  display: flex; flex-direction: column;
  gap: var(--gap);
  padding: var(--gap) var(--pad-x);
  max-width: var(--shell); margin: 0 auto;
}
/* Две колонки: слева лента дропов во всю высоту, справа страница.

   Лента вертикальная, а не полосой в верхнем ряду. Вертикальный список
   читается сверху вниз сам собой, ему не нужны ни стрелки, ни прокрутка
   вбок — и он не отнимает ширину у ряда режимов, где каждая сотня
   пикселей идёт в высоту иконок. */
.kz-shell {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
/* Фон главной: картинка (assets/home_page_bg.webp) фиксированным слоем за
   всеми блоками, полупрозрачная поверх общего переливающегося фона, к низу
   страницы растворяется — как на краше и минере. Только на главной
   (класс kz-home на body). */
.kz-home .kz-shell::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/home_page_bg.webp") center top / cover no-repeat;
  opacity: .45;
  -webkit-mask: linear-gradient(180deg, #000 45%, transparent 100%); mask: linear-gradient(180deg, #000 45%, transparent 100%);
}
.kz-main { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
/* Верхний ряд в три колонки: баннер, событие, дропы.

   Первая колонка `auto` — её ширину задаёт САМ БАННЕР. На картинке вшиты
   и заголовок сверху, и кнопки снизу, поэтому обрезать её нельзя ни по
   какой стороне; значит, блок обязан повторять её пропорцию. А раз высота
   ограничена (иначе баннер съедает весь первый экран), то из пропорции
   однозначно следует и ширина. Растянуть эту колонку на 1fr — значит
   вернуть тёмные поля по бокам, из-за которых всё и переделывалось.

   Дропы забирают остаток: это горизонтальная лента, ей ширина только на
   пользу. */
/* Верхний ряд в две колонки: баннер с цифрами под ним и правая колонка,
   где живут событие и дропы.

   Баннер тянется на всю свободную ширину, а высота следует из его
   пропорции. Раньше было наоборот — высоту задавал экран, ширину
   пропорция, — и справа от баннера оставалась дыра, которую затыкали
   третьей колонкой с цифрами. Теперь цифры стоят там, где им и место:
   строкой под баннером и его ширины. */
/* ═══════════════ ВЕРХ СТРАНИЦЫ ═══════════════

   Один широкий баннер слева и две плашки справа — раскладка снята с
   референса и замерена по нему: левая часть 65% ширины ряда, правая 34%,
   промежуток остальное. Прежние 404 пикселя фиксированной ширины давали
   на мониторе 1440 отношение 2.5:1 вместо 1.95:1, и правая колонка
   выглядела приставленной сбоку, а не половиной композиции.

   Проценты, а не пиксели: на референсе колонки делят ширину, а не стоят
   каждая своим размером, и при 1920 фиксированные 404 превратились бы в
   узкую полоску у края. */
.kz-row-top {
  display: grid;
  /* Ровно 2:1 и зазор 16 — снято с самого референса, а не прикинуто по
     скриншоту. Замер на magic-drop.win при окне 1920: ряд 1841, баннер
     1217, колонка 608, зазор 16. Проверка: (1841 − 16) / 3 = 608.3, то
     есть колонка это ровно треть остатка, а баннер — две трети.

     Мои прежние 34% были подгонкой по картинке и давали 622 вместо 608 —
     на глаз незаметно, но это уже не та раскладка. */
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  /* stretch, а не start: две правые плашки обязаны вместе повторять высоту
     баннера — иначе верх читается как большая картинка и два огрызка
     рядом с ней. */
  align-items: stretch;
}
.kz-col-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ═══════════════ ПРОМО-КАРТОЧКИ СПРАВА ═══════════════

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

   Текст слева, крупное число справа — то же распределение, что на
   референсе, где справа стоит объёмная картинка. Картинки у нас нет, а
   число, набранное как объект, работает так же: даёт правой половине
   вес, чтобы карточка не была строкой текста на пустом фоне. */
.kz-promo {
  position: relative; overflow: hidden; flex: 1; min-height: 0;
  display: flex; align-items: center;
  padding: 24px 28px;
  border: 0; border-radius: var(--r-banner);
  /* Заливка снята с референса: linear-gradient(315deg, #20272F 33%, #0B1015)
     — светлее к правому верху, темнее к левому низу, без рамки.

     Прозрачность добавлена сверх референса и осознанно: у них страница
     под карточками — ровный тёмно-синий, а у нас живой градиент с лаймом
     и фиолетовым. Непрозрачная карточка на таком фоне — глухая коробка;
     на 12–15% пропуская фон, она стоит НА странице, а не поверх неё.
     Свет справа в цвет карточки — на месте той картинки-иллюстрации, что
     у референса стоит в правом краю. */
  background:
    radial-gradient(60% 90% at 100% 50%, color-mix(in srgb, var(--pc) 20%, transparent), transparent 70%),
    linear-gradient(315deg, rgba(32, 39, 47, .86) 32.69%, rgba(11, 16, 21, .88) 100%);
}
.kz-promo--code { --pc: var(--accent); }
.kz-promo--aff  { --pc: #A26CFF; }

.kz-promo__body { position: relative; z-index: 1; display: grid; gap: 8px; max-width: 64%; }
/* Заголовок 20/700 без капса и подпись 16/300 — цифры референса. Капса
   нет намеренно: на референсе капсом набраны только кнопки, и заголовок
   в обычном регистре рядом с ними и есть их иерархия. */
.kz-promo__title {
  font-family: var(--f-body), sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1.1; color: #fff;
}
.kz-promo__sub { font-size: 15px; font-weight: 300; line-height: 1.3; color: #fff; }
.kz-promo__sub code {
  font-family: var(--f-cond), sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .08em; color: var(--accent);
  padding: 1px 7px; border-radius: 5px;
  background: rgba(215, 255, 0, .09); border: 1px solid rgba(215, 255, 0, .25);
}

/* Стеклянная кнопка — ТА САМАЯ прозрачность референса: rgba(255,255,255,.1),
   без рамки, радиус 8, высота 48, 14px/500 капсом. Ниже она же задана и
   для кнопок на баннере, чтобы обе половины верха говорили на одном
   языке. */
.kz-promo__btn {
  margin-top: 10px; width: max-content;
  height: 44px; padding: 0 20px; border-radius: 8px; border: 0;
  background: rgba(255, 255, 255, .10); color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  transition: background-color .15s;
}
.kz-promo__btn:hover { background: rgba(255, 255, 255, .16); border: 0; }
.kz-promo__btn.is-done { color: var(--accent); background: rgba(215, 255, 0, .12); }
.kz-promo__ico {
  width: 13px; height: 13px; border-radius: 3px;
  border: 1.6px solid currentColor;
  box-shadow: 3px -3px 0 -1px currentColor;
}

/* Число справа: крупное, прозрачное, в цвет карточки — на месте
   иллюстрации референса. Прозрачное намеренно: плотное спорило бы с
   заголовком, как водяной знак оно даёт объём и не требует чтения. */
.kz-promo__art {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%) rotate(-8deg);
  font-family: var(--f-cond), sans-serif; font-style: normal;
  font-size: clamp(58px, 5.6vw, 96px); font-weight: 700; line-height: 1;
  color: var(--pc); opacity: .30;
  text-shadow: 0 0 34px color-mix(in srgb, var(--pc) 70%, transparent);
  pointer-events: none;
}
.kz-promo__art small { font-size: .5em; }


/* ═══════════════ LIVE EVENT ═══════════════

   Стоит справа от баннера, на месте прежних Live Drops. Корона — фон
   панели, а не картинка в потоке: она выходит за правый край и обрезается
   самой панелью, поэтому лежит абсолютом под содержимым.

   Акцент здесь фиолетовый, а не жёлтый: он идёт от самой короны, и призовой
   фонд с кнопкой встают с ней в один тон. */
.kz-event { position: relative; display: flex; flex-direction: column; overflow: hidden; }

/* Корона стоит в правом верхнем углу — в единственном месте панели, где
   действительно пусто.

   Слева от неё на этой высоте идут «DROP FEST» и призовой фонд, а те
   занимают 52% ширины. Ниже 161px панель уже занята: таймер и кнопка
   растянуты во всю ширину. Раньше корона висела по центру панели и
   заходила на обе — половина её силуэта лежала под цифрами таймера, и
   читалось это как наложение по ошибке, а не как фон.

   Размеры в пикселях, а не в процентах: высота панели задана её же
   содержимым и не меняется, а проценты от неё пришлось бы пересчитывать
   при каждой правке текста. */
.kz-event__crown {
  position: absolute; z-index: 0; pointer-events: none;
  right: -6px; top: 14px;
  height: 140px; aspect-ratio: 560 / 504;
  background: url('assets/event_crown.png') center / contain no-repeat;
}
/* Всё содержимое поверх короны. Без этого текст оказался бы под ней:
   у короны position:absolute, у остального — статический поток. */
.kz-event > *:not(.kz-event__crown) { position: relative; z-index: 1; }
/* Текстовые строки ужимаем до левой половины: иначе длинная сумма наезжает
   на корону. Кнопка и прогресс идут во всю ширину — они под ней. */
.kz-event__title,
.kz-event__poolcap,
.kz-event__pool,
.kz-event .kz-panel__head { max-width: 52%; }

.kz-event__title {
  font-family: var(--f-cond); font-size: 30px; font-weight: 700;
  font-style: italic; line-height: 1; letter-spacing: .01em;
  text-transform: uppercase;
  margin: 4px 0 18px;
}
.kz-event__title b  { font-weight: 700; color: var(--text); }
.kz-event__title em { font-style: italic; color: var(--lime); margin-left: .28em; }

.kz-event__poolcap {
  font-family: var(--f-cond); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-dim);
}
.kz-event__pool {
  font-family: var(--f-cond); font-size: 32px; font-weight: 700;
  color: var(--violet); line-height: 1; margin: 3px 0 18px;
}

.kz-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.kz-count__cell {
  background: rgba(10, 10, 11, .72); border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 0; text-align: center;
  backdrop-filter: blur(2px);
}
.kz-count__num {
  font-family: var(--f-cond); font-size: 20px; font-weight: 600;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.kz-count__lab {
  font-size: 8px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-mute); margin-top: 3px;
}
.kz-count--tight .kz-count__cell { padding: 5px 0; }
.kz-count--tight .kz-count__num { font-size: 16px; }

/* Кнопку отталкиваем вниз: содержимого в панели меньше её высоты, и без
   этого весь блок липнет к верху, а нижняя половина стоит пустой. */
#kz-join-event {
  margin: auto 0 12px; height: 42px;
  background: var(--violet); color: #fff;
}
#kz-join-event:hover { background: #B646FF; }

.kz-progress__nums {
  font-size: 11px; color: var(--text-mute);
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.kz-progress__nums b { color: var(--text-dim); font-weight: 600; }
.kz-progress { height: 4px; border-radius: 2px; background: var(--panel-3); overflow: hidden; }
.kz-progress i { display: block; height: 100%; background: var(--violet); border-radius: 2px; }

/* ═══════════════ FEED ═══════════════ */
.kz-feed__list { display: flex; flex-direction: column; }
.kz-feed__row {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 62px;
  align-items: center; gap: 8px;
  padding: 9px 0 9px 9px;
  border-top: 1px solid var(--line-soft);
}
.kz-feed__row:first-child { border-top: none; }
.kz-feed__row::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: 1px; background: var(--r, var(--line));
}
.kz-av {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel-3); color: var(--text-mute);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.kz-av svg { width: 24px; height: 24px; }
.kz-feed__user { font-size: 12px; font-weight: 600; }
.kz-feed__act  { font-size: 10px; color: var(--text-mute); }
.kz-feed__item { font-size: 11px; color: var(--r, var(--text-dim)); font-weight: 500; }
.kz-feed__price { font-size: 11px; color: var(--money); font-weight: 600; font-variant-numeric: tabular-nums; }
.kz-feed__thumb {
  grid-column: 3; grid-row: 1 / span 3;
  display: flex; align-items: center; justify-content: flex-end;
  color: var(--r, var(--text-mute)); opacity: .85;
}
.kz-feed__thumb svg,
.kz-feed__thumb img { max-width: 100%; width: auto; height: auto; max-height: 32px; object-fit: contain; }

/* ═══════════════ ВИТРИНА: БАННЕР + ЦИФРЫ ═══════════════

   На макете у баннера и полосы цифр одна рамка, а не две соседние панели.
   Поэтому рамка и радиус живут на .kz-showcase, а сам баннер внутри лежит
   без них и обрезается родителем. */
/* Ширина колонки задана шириной баннера, а не наоборот. Без этой строки
   колонку растягивала полоса цифр под баннером: четыре ячейки в строку
   требуют больше места, чем сама картинка, и по её бокам снова
   появлялись поля — то, ради чего всё и переделывалось. */
/* Витрина теперь содержит только баннер: полосы цифр под ним больше нет.
   Поэтому она не обрезает содержимое своим радиусом, а отдаёт скругление
   самому баннеру — иначе два радиуса, внешний и внутренний, спорят друг с
   другом на пиксель. */
.kz-showcase {
  padding: 0; border: 0; background: none; display: flex; flex-direction: column;
}

/* Цифры строкой в четыре ячейки, а не столбиком: панель теперь под
   баннером и широкая, а не сбоку и высокая. */
.kz-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid var(--line);
}
/* Ячейка цифры. Оформление лежит здесь целиком: раньше часть правил
   стояла в блоке витрины, и при переносе полосы из колонки под баннер эти
   правила потерялись — значок раздувался на всю ячейку. */
.kz-stat {
  display: grid; grid-template-columns: 34px minmax(0, 1fr);
  align-items: center; gap: 11px;
  padding: 13px 16px;
  border-left: 1px solid var(--line-soft);
}
.kz-stat:first-child { border-left: 0; }
.kz-stat__ico {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: var(--accent);
}
.kz-stat__ico svg { width: 22px; height: 22px; }
.kz-stat__txt { display: grid; gap: 1px; min-width: 0; }
.kz-stat__txt b {
  font-family: var(--f-cond), sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.kz-stat__txt i {
  font-style: normal; font-size: 10px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.kz-hero {
  position: relative; overflow: hidden; display: block;
  border: 1px solid var(--line); border-radius: var(--r-banner);
  /* ВЫСОТА задана, ШИРИНА следует из пропорции картинки. Не наоборот.

     Так картинка занимает блок целиком: не обрезана ни с одной стороны и
     не окружена полями. Прежде было наоборот — ширина во всю колонку,
     высота под потолок, — и блок получался 3.14 против 1.81 у картинки.
     Разницу закрывали размытой копией по бокам, и выглядело это плохо.

     Высота в vh, а не в пикселях: на ноутбуке 768 фиксированные 300
     съедали треть экрана, и второй ряд режимов уходил под сгиб. Потолок
     нужен, чтобы на большом мониторе баннер не разрастался. */
  /* Ширина по колонке, высота из пропорции — но пропорция ШИРЕ, чем у
     самой картинки (2.35 против 1.81), и это осознанная обрезка.

     Замерено по яркости строк исходника 1600x882: содержимое лежит между
     13% и 79% высоты, выше и ниже — пустое тёмное небо. Заголовок
     начинается на 14%, кнопки кончаются на 79%. Значит сверху можно
     срезать десятую часть, снизу — седьмую, и ни буквы не потерять.

     Без этой обрезки баннер при своей пропорции занимал 690 пикселей на
     экране в 940 — весь первый экран под одну картинку, а ряд игр уходил
     под сгиб. */
  width: 100%;
  /* Пропорция баннера 2.871 — замер на референсе: 1217x424.

     Там высота ряда ЖЁСТКАЯ, 424 пикселя на всех ширинах от 1500 до 1920,
     а меняется только ширина. Копировать эти 424 к нам нельзя: у нас слева
     ещё боковая панель, ряд получается уже, и при жёсткой высоте баннер из
     широкой полосы превратился бы в почти квадрат (762x424 — это 1.80
     вместо 2.87).

     Поэтому переносится ФОРМА, а не пиксели: пропорция та же, высота
     следует из нашей ширины. На нашем пределе (ряд 1814) баннер выходит
     1199x417 — почти те же 424, что и у них. */
  aspect-ratio: 2.871 / 1;
  height: auto;
  max-height: 46vh;
  /* stands in for the industrial set the old baked-in art carried: a warm
     pool where the weapon sits, cool depth behind the copy, floor falling
     away at the bottom */
  background:
    radial-gradient(72% 82% at 70% 46%, #2A2109 0%, transparent 60%),
    radial-gradient(46% 60% at 66% 88%, rgba(237,224,15,.06) 0%, transparent 70%),
    radial-gradient(64% 74% at 14% 28%, #16171A 0%, transparent 72%),
    linear-gradient(180deg, #0B0B0D 0%, #050506 100%);
}
/* Раньше здесь лежала вырезка — винтовка на прозрачном фоне, — и панель
   подкладывала под неё свой градиент. Теперь картинка цельная и занимает
   плашку целиком, поэтому ни вырезки, ни подложки, ни затемнения под текст
   больше не нужно. */
.kz-hero__art { position: absolute; inset: 0; pointer-events: none; }

/* Картинка занимает блок целиком и ничем не обрезана.

   Размытой подложки по бокам здесь больше нет — она была нужна, пока блок
   был шире картинки, и закрывала собой пустые поля. Теперь блок повторяет
   пропорцию картинки (см. .kz-hero), полей не осталось, и закрывать
   нечего: cover при совпадающих пропорциях ничего не срезает.

   cover, а не contain: при расхождении в доли процента из-за округления
   contain оставил бы по краю волосяную щель с фоном, а cover — нет. */
.kz-hero__art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  /* 55% — пересчитано под пропорцию 2.871.

     Замер по яркости строк исходника 1672x941: содержимое лежит между 0% и
     82% высоты, нижние 18% (170 строк) — тёмный пол и тень под столом, где
     нет ничего. Слот пропорции 2.871 показывает 582 строки из 941, то есть
     режет 359 — больше, чем резал слот 2.70. Чтобы снизу ушли только
     пустые 170, сверху надо снять не меньше 189, а это 53%. Берём 55%:
     сверху 197, снизу 162, пустой пол уходит целиком. */
  object-position: 50% 55%;
}
/* ═══════════════ ТЕКСТ НА БАННЕРЕ ═══════════════

   Баннер без единого слова — просто картинка, и не ясно, зачем она и куда
   ведёт. Заголовок, подпись и две кнопки ставят его в контекст: это
   витрина сайта, а не обои.

   Всё лежит в левой трети. Замерено по картинке: там тёмный зал с
   диваном, ничего важного, — художник оставил это место пустым сам.
   Справа фигура и витрина, туда текст не заходит.

   Тень под текстом — градиент слева, а не подложка-прямоугольник: он
   гаснет к центру и не рисует на картинке коробку. */
.kz-hero__copy {
  position: absolute; z-index: 2;
  /* Позиция и ширина сняты с референса: блок прижат к левому верху с
     отступом 48 и занимает 26% ширины баннера. У нас баннер уже, поэтому
     отступ в clamp, а ширина чуть больше — 30%, иначе заголовок из двух
     слов переносится в три строки. */
  left: clamp(20px, 3.9%, 48px); top: clamp(16px, 7.5%, 48px);
  width: clamp(250px, 34%, 380px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  /* Высотный бюджет. Референсные 48 сверху и заголовок в 42 рассчитаны на
     их баннер в 424 пикселя; наш при 1600 — 303, и с теми же числами
     кнопки уходили за нижний край (замерено: cta.bottom > hero.bottom).
     Поэтому отступ сверху и кегль масштабируются с шириной, ширина блока
     34% вместо 30% — чтобы подпись ложилась в две строки, а не в три, —
     и зазоры 8 вместо 10. При ширине ряда 1814 всё возвращается к
     референсным значениям само. */
  /* Подложки под текстом НЕТ — как на референсе, текст прямо на картинке.
     Прежний градиент слева убран: он рисовал на баннере тёмную стену и
     делал его тяжёлым. Читаемость держит тень у самих букв. */
  background: none;
}
.kz-hero__kicker {
  width: max-content;
  font-family: var(--f-cond), sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  padding: 4px 9px; border-radius: 5px;
  background: rgba(215, 255, 0, .1); border: 1px solid rgba(215, 255, 0, .28);
}
/* 42px и вес 500 — цифры референса. Наш Oswald в 500 на этом кегле
   выглядит как их Gotham 500: плотно, но не жирно. */
.kz-hero__title {
  margin: 0;
  font-family: var(--f-cond), sans-serif;
  font-size: clamp(26px, 2.4vw, 42px); font-weight: 500; line-height: 1.05;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}
.kz-hero__title em {
  font-style: normal; display: block; color: var(--accent);
  text-shadow: 0 0 24px rgba(215, 255, 0, .35), 0 2px 18px rgba(0, 0, 0, .7);
}
.kz-hero__lead {
  margin: 0;
  font-size: clamp(13px, .95vw, 16px); font-weight: 300; line-height: 1.3; color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}
.kz-hero__cta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
/* Кнопки на баннере — референсные: 48 высоты, радиус 8, 14px/500 капсом,
   без рамки. Основная в акцент, вторая — то же стекло rgba(255,255,255,.1),
   что и в промо-карточках. */
.kz-hero__cta .kz-btn {
  height: clamp(40px, 2.9vw, 48px); padding: 0 18px; border-radius: 8px; border: 0;
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
}
.kz-hero__cta .kz-btn--ghost {
  background: rgba(255, 255, 255, .10); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.kz-hero__cta .kz-btn--ghost:hover { background: rgba(255, 255, 255, .18); border: 0; }

/* Затемнения под текст больше нет: текст нарисован на самой картинке и
   уже сделан читаемым художником. */
/* vector fallback, used only until a bitmap exists */
.kz-hero__art > svg { position: absolute; right: 6%; top: 8%; width: 56%; height: 82%; color: var(--accent); opacity: .6; }

/* Стилей .kz-hero__copy, __eyebrow, __title, __display, __lead и __cta
   здесь больше нет: с цельным баннером этих элементов не существует, а
   правила для несуществующей разметки со временем начинают выглядеть как
   работающие и путают при правках. */

.kz-dots {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 2;
}
.kz-dots button {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2A2C30; padding: 0; transition: background .2s, width .2s;
}
.kz-dots button.is-active { background: var(--accent); width: 16px; border-radius: 4px; }

/* Плиток живых дропов здесь больше нет — раздел убран с главной.

   Заодно ушла коллизия имён: класс .kz-drop носили и плитка дропа, и
   выпадающее меню игр в шапке (см. ниже). Правила плитки подмешивались в
   меню и меняли ему тень с отступами, хотя выглядело это как «так и было». */

/* ═══════════════ ЖИВЫЕ ДРОПЫ ═══════════════

   Горизонтальная лента в правой колонке под событием.

   ---------- ЧТО ЗДЕСЬ ПЕРЕДЕЛАНО И ПОЧЕМУ ----------

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

   Стало:
   · редкость показывает ПОДСВЕТКА ПОД ПРЕДМЕТОМ и полоса снизу — ровно
     так же, как в кейсах, битвах и контракте: один приём на весь сайт
     вместо своего в каждом разделе;
   · цветов на карточке два — белое имя и лаймовая цена; скин и время
     приглушены, потому что их читают вторыми;
   · предмет крупнее, и под ним мягкое свечение в цвет редкости — на
     тёмном фоне вещь без него выглядит наклейкой;
   · лента гаснет к правому краю маской, а не обрывается: видно, что
     дальше есть ещё, и обрыв перестаёт выглядеть багом. */

.kz-drops { display: flex; flex-direction: column; }
.kz-drops__wrap { position: relative; flex: 1; min-height: 0; display: flex; }

.kz-drops__list {
  display: flex; flex-direction: row; gap: 8px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Затухание у правого края. Маска, а не градиент поверх: градиент
     пришлось бы красить в цвет панели и он разъезжался бы с ней при
     смене фона. */
  -webkit-mask: linear-gradient(90deg, #000 0 88%, transparent 100%);
          mask: linear-gradient(90deg, #000 0 88%, transparent 100%);
  padding-bottom: 2px;
}
.kz-drops__list::-webkit-scrollbar { display: none; }

.kz-drop {
  position: relative; overflow: hidden;
  /* Ширина фиксированная: по содержимому длинные имена раздувают одни
     карточки и сплющивают другие. 124 — столько нужно, чтобы «$12,542.10»
     помещалось целиком, не переносясь. */
  flex: 0 0 124px;
  display: flex; flex-direction: column;
  padding: 0 0 9px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2);
  /* Полоса редкости снизу — тот же приём, что в кейсах, битвах и
     контракте. Сверху её быть не должно: там её нет больше нигде. */
  border-bottom: 3px solid var(--r, var(--line));
  scroll-snap-align: start;
  transition: border-color .16s, transform .16s, background-color .16s;
}
.kz-drop:hover {
  transform: translateY(-3px);
  background: var(--panel-3);
  border-color: color-mix(in srgb, var(--r, var(--line)) 55%, transparent);
  border-bottom-color: var(--r, var(--line));
}

/* Площадка предмета со свечением в цвет редкости. Свечение под вещью, а
   не за всей карточкой: так оно читается как подсветка витрины, а не как
   цветной фон плитки. */
.kz-drop__art {
  position: relative; display: block;
  height: 66px; margin: 0 0 8px;
  background:
    radial-gradient(56% 62% at 50% 74%, color-mix(in srgb, var(--r, #4b69ff) 34%, transparent), transparent 72%);
}
.kz-drop__art img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  padding: 8px 10px 4px;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6));
}

.kz-drop__item {
  padding: 0 10px;
  font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Скин приглушён, а не покрашен в редкость: цвет редкости уже сказан
   полосой и свечением, а третье его повторение делает карточку пёстрой. */
.kz-drop__name {
  padding: 0 10px;
  font-size: 11px; color: var(--text-mute); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kz-drop__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  margin-top: auto; padding: 6px 10px 0;
}
.kz-drop__price {
  font-size: 13px; font-weight: 700; color: var(--money);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
/* Время самое тихое на карточке: оно нужно как признак «только что», а не
   как число, которое читают. */
.kz-drop__ago {
  font-style: normal; font-size: 10px; color: var(--text-mute);
  white-space: nowrap; opacity: .75;
}

/* Стрелки поверх краёв ленты. Полупрозрачная подложка нужна: под ними
   проезжают карточки, и на голом фоне глиф терялся бы на светлом скине. */
.kz-nudge {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(10, 10, 11, .82); border: 1px solid var(--line);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.kz-nudge:hover { color: var(--text); border-color: #2A2C30; }
.kz-nudge--prev { left: -6px; }
.kz-nudge--next { right: -6px; }
.kz-nudge::before {
  content: ''; width: 7px; height: 7px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}
.kz-nudge--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.kz-nudge--next::before { transform: rotate(45deg); margin-right: 3px; }

@keyframes kzDropIn {
  from { opacity: 0; transform: translateX(-10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.kz-drop.is-new { animation: kzDropIn .42s cubic-bezier(.16,.9,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .kz-drop { transition: border-color .18s; transform: none !important; }
  .kz-drop.is-new { animation: none; }
}

/* ═══════════════ GAME MODES ═══════════════ */
/* Perspective lives on the row, not the card: sharing one vanishing point
   means neighbouring tiles tilt as if on the same plane instead of each
   spinning about its own private camera. */
/* Десять режимов в два ряда по пять. Колонок пять, а рядов не задано —
   сетка сама переносит остаток на второй ряд. Прописывать grid-template-rows
   нельзя: добавится одиннадцатый режим, и он молча уедет за пределы
   заданных рядов.

   ---------- ПОЧЕМУ ЗДЕСЬ БОЛЬШЕ НЕТ MAX-WIDTH ----------

   Раньше ряд был искусственно ужат: ширина ограничивалась высотой экрана,
   чтобы оба ряда гарантированно влезали в первый экран. Плата за это была
   видна сразу — на мониторе 1440 колонка даёт 1159 пикселей, а ряд занимал
   954, то есть пятая часть ширины стояла пустой.

   Требование «оба ряда в первом экране» снято сознательно: содержимое ниже
   блока игр может уходить за кадр, это нормальная прокручиваемая страница.
   Взамен ряд идёт во всю колонку, а высота плитки следует из её ширины
   через пропорцию.

   ---------- ПРОПОРЦИЯ 16:9 ----------

   Плитки прямоугольные, а не почти квадратные, как было (300×338).
   Пропорция задана здесь ОДНИМ числом и держит всё остальное: кегль
   подписи считается в cqw, то есть в долях ширины плитки, и потому не
   разъезжается ни на каком экране.

   Картинки под неё надо экспортировать ровно в 16:9 — при cover любое
   расхождение уходит в обрезку по краю.

   МАКСИМАЛЬНЫЙ РАЗМЕР ПЛИТКИ (для экспорта картинок): оболочка упирается в
   --shell 2040px, из них на колонку остаётся 1814, минус четыре зазора по
   10 — на плитку приходится 354.8 CSS-пикселя. При DPR 2 это 710
   физических. Исходники в 960×540 покрывают это с запасом. */
/* Раздел игр: воздух сверху и подпись.

   .kz-main раскладывает свои секции с общим зазором в 10 пикселей, и на
   нём плитки начинались вплотную под баннерами — глаз читал их как нижнюю
   часть той же композиции. Здесь зазор нужен больше общего, поэтому он
   задан самой секции, а не поднят у всей колонки: остальным секциям
   лишний воздух ни к чему. */
.kz-games { margin-top: 26px; }

/* Заголовок раздела: по центру и крупно.

   Сначала он был набран как подписи панелей — 12px в углу. Это подпись к
   виджету, а блок игр занимает половину первого экрана и панелью не
   является: мелкая надпись сбоку от десяти крупных плиток теряется рядом с
   ними и не разделяет разделы, ради чего и ставилась.

   Кегль в clamp, а не числом: на узком экране 32px переносятся в две
   строки, на широком 22px снова теряются. */
.kz-sechead {
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 18px;
  font-family: var(--f-cond), sans-serif;
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text);
  line-height: 1.1;
}
/* Линии по обе стороны от слова: без них слово по центру пустой полосы
   висит в воздухе, а с ними читается как разделитель между рядом баннеров
   и рядом плиток — то, чем оно и является. Гаснут к краям, чтобы не
   упираться в границы колонки жирной чертой. */
.kz-sechead::before, .kz-sechead::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 40%, var(--line) 60%, transparent);
}
.kz-sechead > span {
  position: relative; padding: 0 4px;
}
/* короткая лаймовая черта под словом — тот же акцент, что у активного
   пункта меню, чтобы заголовок был из той же семьи */
.kz-sechead > span::after {
  content: ''; position: absolute; left: 50%; bottom: -8px;
  width: 34px; height: 3px; border-radius: 2px;
  transform: translateX(-50%);
  background: var(--accent); box-shadow: 0 0 12px rgba(215, 255, 0, .55);
}

.kz-modes {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px; perspective: 1400px;
}

/* Карточка. container-type объявлен ради cqw в подписи: без него
   контейнерные единицы молча откатываются к ширине ОКНА — на этом уже
   обжигались, подпись тогда росла вместе с монитором и вылезала из
   плитки. */
.kz-mode {
  display: block;
  container-type: inline-size;
  /* min-width: 0 обязателен: иначе картинка задаёт колонке минимальную
     ширину, колонки перестают сжиматься и ряд вылезает за край. */
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: 0; border: 0; background: none;
  transform-style: preserve-3d;
  /* short enough to track the cursor, long enough to glide back on leave */
  transition: transform .16s ease-out, filter .18s;
}
.kz-mode:hover { filter: brightness(1.12); }

.kz-mode__art {
  /* display: block обязателен: это <span>, и без него он остаётся
     строчным. У строчного элемента нет ширины содержимого — clientWidth
     равен нулю, — и проценты в позиционировании подписи считались не от
     карточки, а от обрывка строки: плашка выходила 84 пикселя вместо 168,
     и текст в ней не помещался. Прежнее правило задавало display: flex, и
     потому проблема не проявлялась. */
  display: block;
  position: relative; overflow: hidden;
  width: 100%; height: 100%;
  /* Радиус повторяет тот, что ВПЕЧАТАН в картинку: замерено по альфа-каналу
     всех десяти файлов — ровно 87 px из 960, то есть 9.06% ширины и 16.11%
     высоты. Два значения через слэш, а не одно: у процентного радиуса
     горизонталь считается от ширины, вертикаль от высоты, и одно число на
     прямоугольнике 16:9 дало бы эллипс вместо круга.

     Раньше здесь стояло 8px. Картинка при этом скругляла себя сама сильнее
     (на плитке 274 px её радиус — 25 px против восьми), и затемнение под
     подписью вылезало тёмными уголками за скруглённый край карточки. */
  border-radius: 9.06% / 16.11%;
  text-align: left;
}
/* cover при точном совпадении пропорций.

   Картинки теперь ровно 960×540, то есть 16:9 — та же пропорция, что у
   плитки. При точном совпадении cover и contain дают одно и то же, и
   cover выбран как страховка: если однажды приедет картинка с чуть другой
   пропорцией, она обрежется по краю на пару пикселей, а не оставит пустые
   поля, от которых плитка перестаёт читаться прямоугольником.

   object-position по центру: раньше стояло 50% 42%, потому что картинки
   были почти квадратные и из них бралась средняя полоса. Обрезать больше
   нечего — сдвиг стал бы просто ошибкой кадрирования. */
.kz-mode__art img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; display: block;
}

/* Затемнение под подписью. Вернулось намеренно.

   Раньше его не было, потому что плашка под текст была НАРИСОВАНА в самой
   картинке, а CSS только клал текст в неё процентами от высоты. Такая
   связка ломается от любой правки пропорции или пересохранения иконки:
   текст уезжает с плашки, и заметно это не сразу.

   Теперь подложку рисует CSS. Это значит, что новые картинки можно
   генерировать ЧИСТЫМИ — без текста и без плашки, — и они переживут любое
   изменение раскладки. */
.kz-mode__art::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 46%;
  /* Последняя точка СВЕТЛЕЕ предыдущей — это не опечатка.

     У новых карточек неоновая рамка нарисована по самому краю картинки, и
     затемнение, доходящее до максимума в самом низу, гасило её нижнюю дугу:
     карточка выглядела так, будто снизу растворяется. Пик темноты стоит на
     88% высоты градиента — там, где текст, — а последние проценты
     отпускаются обратно, и рамка снова видна.

     Высота убавлена с 58% до 46% по той же причине: подписи хватает
     меньшего, а каждый лишний процент съедал рисунок. */
  background: linear-gradient(180deg,
              transparent,
              rgba(5, 8, 3, .40) 52%,
              rgba(5, 8, 3, .78) 88%,
              rgba(5, 8, 3, .58));
  pointer-events: none;
}

.kz-mode__foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 0 5.5% 5.5%;
}
.kz-mode__txt { display: grid; gap: 1px; min-width: 0; }
.kz-mode__title {
  font-family: var(--f-cond);
  /* Кегль в cqw — в долях ШИРИНЫ ПЛИТКИ, а не окна и не высоты ряда.
     Плитка теперь тянется вместе с колонкой, и это единственная величина,
     от которой подпись обязана зависеть. Контейнер объявлен на .kz-mode
     выше; без него cqw откатывается к ширине окна — старый комментарий
     здесь ровно об этой ошибке и предупреждал. */
  font-size: clamp(10px, 4.4cqw, 17px); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kz-mode__sub {
  font-size: clamp(7px, 2.6cqw, 10px); letter-spacing: .04em;
  text-transform: uppercase; color: #97A0AA; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kz-mode__go { margin-left: auto; width: 14px; height: 14px; flex: none; color: var(--accent); }
.kz-mode__go svg { width: 100%; height: 100%; }

/* Неготовый режим: метка в углу и приглушённая карточка. Кликается, но
   никуда не ведёт — поэтому и рисуется кнопкой, а не ссылкой. */
.kz-mode.is-soon { opacity: .55; cursor: default; }
.kz-mode.is-soon:hover { border-color: var(--line); box-shadow: none; }
.kz-mode__soon {
  position: absolute; right: 9%; top: 10%; z-index: 3;
  padding: 3px 8px; border-radius: 20px;
  background: rgba(0, 0, 0, .66); backdrop-filter: blur(3px);
  font-family: var(--f-cond); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim);
}

/* ═══════════════ DASHBOARD ═══════════════ */
.kz-dash {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 340px;
  gap: var(--gap); align-items: start;
}

.kz-battle {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--line-soft);
}
.kz-battle:first-child { border-top: none; }
.kz-battle__map { width: 34px; height: 25px; border-radius: 4px; overflow: hidden; color: var(--text-mute); }
.kz-battle__map svg { width: 100%; height: 100%; }
.kz-battle__name { font-size: 11px; font-weight: 600; }
.kz-battle__mode { font-size: 9px; color: var(--text-mute); }
.kz-battle__slots { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.kz-battle__val { font-size: 11px; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.kz-battle__join {
  height: 22px; padding: 0 9px; border-radius: 4px;
  background: var(--panel-3); border: 1px solid var(--line);
  font-family: var(--f-cond); font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); transition: background .15s, color .15s;
}
.kz-battle__join:hover { background: var(--accent); color: #0A0C0E; border-color: var(--accent); }

.kz-cases__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.kz-case {
  position: relative; overflow: hidden; text-align: center;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 6px; padding: 10px 6px 11px;
  transition: border-color .18s, transform .18s;
}
.kz-case:hover { border-color: var(--r); transform: translateY(-2px); }
.kz-case__art {
  height: 74px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  color: var(--r, var(--text-mute));
  background: radial-gradient(60% 70% at 50% 55%, color-mix(in srgb, var(--r) 22%, transparent) 0%, transparent 72%);
}
.kz-case__art svg { width: 78%; height: 90%; }
.kz-case__art img { width: 100%; height: 100%; object-fit: contain; }
.kz-case__name {
  font-family: var(--f-cond); font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; margin-top: 6px;
}
.kz-case__price { font-size: 11px; color: var(--money); font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }

.kz-jackpot { display: flex; flex-direction: column; }
.kz-jackpot__amount {
  margin-left: auto; font-family: var(--f-cond); font-size: 19px;
  font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.kz-jackpot__art {
  position: relative; height: 118px; margin: 2px 0 10px; overflow: hidden; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.kz-jackpot__glow {
  position: absolute; inset: 0;
  background: radial-gradient(50% 60% at 50% 58%, rgba(255,201,60,.2), transparent 70%);
}
.kz-jackpot__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; border-radius: 6px; }
.kz-jackpot__case { position: relative; width: 108px; color: var(--gold); }
.kz-jackpot__crown { position: absolute; top: 2px; width: 62px; color: var(--accent); z-index: 1; }
.kz-jackpot__case svg, .kz-jackpot__crown svg { width: 100%; height: 100%; }
#kz-join-jp { margin-top: 10px; height: 36px; }

/* ═══════════════ BENEFITS ═══════════════ */
.kz-benefits {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap); padding: 4px 0 8px;
}
.kz-benefit { display: flex; align-items: center; gap: 10px; }
.kz-benefit__ico {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 6px;
  background: var(--panel-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.kz-benefit__ico svg { width: 18px; height: 18px; }
.kz-benefit__title {
  font-family: var(--f-cond); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.kz-benefit__text { font-size: 11px; color: var(--text-mute); margin-top: 1px; }

/* ═══════════════ FLOATING CHAT ═══════════════ */
.kz-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: #0A0C0E;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
  transition: filter .15s, transform .15s;
}
.kz-chat:hover { filter: brightness(1.08); transform: translateY(-2px); }
.kz-chat svg { width: 22px; height: 22px; }

/* ═══════════════ RESPONSIVE ═══════════════
   Desktop is the reference; these only kick in once the dense grid genuinely
   stops fitting, so the target layout is never compromised to serve them. */
@media (max-width: 1440px) {
  :root { --drops-w: 300px; }
  .kz-dash { grid-template-columns: 224px minmax(0, 1fr) 300px; }
}
/* Правила трёхколоночного верхнего ряда отсюда убраны. Он давно стал
   двухколоночным, а оставшийся кусок продолжал работать: на 1500 и уже он
   переводил баннер в `auto`, и правая колонка вместо своих 404 пикселей
   сжималась до двухсот — событие с дропами превращались в полоску.
   Правило для несуществующей раскладки выглядит рабочим и потому опаснее
   явной ошибки. */
@media (max-width: 1200px) {
  /* Разделы ложатся строкой над содержимым, верхний ряд складывается:
     событие с дропами уходят под баннер, а не жмутся рядом с ним. */
  .kz-shell { grid-template-columns: minmax(0, 1fr); }
  .kz-row-top { grid-template-columns: minmax(0, 1fr); }
  /* Баннеру больше не нужен потолок высоты: в одну колонку он и так не
     разрастается, а потолок начинал резать картинку сильнее нужного. */
  .kz-hero { max-height: none; }
  .kz-dash { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kz-jackpot { grid-column: span 2; }
}
/* Строка меню перестаёт помещаться задолго до телефона. Убираем по одному
   наименее нужные пункты вместо прокрутки: прокрутка вернула бы обрезку
   выпадающего меню Games, ради которой её и убирали.

   ПОРОГИ ЗАМЕРЕНЫ, а не назначены. Складывалось так: поля (2×20) + логотип
   (162) + зазор (26) + пункты со своими зазорами + зазор + правая группа
   с балансом и кнопками (488). Получилось:

       7 пунктов — 1564 px      4 пункта — 1210 px
       6 пунктов — 1457 px      3 пункта — 1064 px
       5 пунктов — 1329 px

   Раньше здесь стояло 1180 и 1060 — то есть при 1440, самой обычной
   ширине ноутбука, показывались все семь, меню вылезало за свою коробку и
   «Events» с «Affiliates» ложились поверх баланса. Коробка при этом была
   683 px, а пунктам требовалось 829: .kz-nav сжимается (min-width: 0), а
   его пункты — нет, поэтому они просто выливались наружу.

   Правила идут от широкого к узкому и накапливаются: на 1300 px сработают
   первые два, останется пять пунктов. */
@media (max-width: 1563px) {
  .kz-nav__li:nth-child(7) { display: none; }
}
@media (max-width: 1456px) {
  .kz-nav__li:nth-child(6) { display: none; }
}
@media (max-width: 1328px) {
  .kz-nav__li:nth-child(5) { display: none; }
}
@media (max-width: 1209px) {
  .kz-nav__li:nth-child(4) { display: none; }
}
/* Последняя ступень. Трём пунктам нужно 1064 px, поэтому на 1024 (всё ещё
   ноутбучная ширина, а не телефон) третий тоже уходит. Остаются Trade и
   Games — то есть торговля и вход во все игры, а это и есть тот минимум,
   ради которого шапка существует. */
@media (max-width: 1063px) {
  .kz-nav__li:nth-child(3) { display: none; }
}
@media (max-width: 980px) {
  .kz-nav { display: none; }
  .kz-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kz-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* На телефоне поле по краям режем: 20px там забирают заметную долю строки,
   а прижиматься вплотную к кромке всё равно нельзя. */
@media (max-width: 680px) {
  :root { --pad-x: 12px; }

  /* ---- шапка на телефоне ----

     Меню здесь уже скрыто, но одной правой группы всё равно больше, чем
     экрана: баланс, плюс, звук, язык, «Войти», «Регистрация» и аватар —
     это 585 пикселей при ширине 420, и страница ехала вбок.

     Убираем вторичное: язык и звук — настройки, они живут в меню аккаунта,
     а «Войти» дублирует то же действие, что и аватар. Остаются баланс,
     пополнение, регистрация и аккаунт — то, ради чего в шапку и смотрят. */
  #kz-lang, #kz-sound, .kz-header__end .kz-btn--ghost { display: none; }
  .kz-logo__word { height: 40px; }
  .kz-header { gap: 10px; }
  .kz-header__end { gap: 6px; }
  .kz-header__end .kz-btn { padding: 0 12px; font-size: 11px; }

  /* Четыре ячейки цифр в 375px не помещаются — переносим в две строки. */
  .kz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-stat:nth-child(3) { border-left: 0; }
  .kz-stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }

  /* Ширину карточки дропа здесь больше не трогаем. Прежние 46% экрана —
     наследство от той поры, когда карточка была строкой с картинкой в
     колонке 54px. Сейчас это плитка на 124 пикселя, и 46% растягивали её
     до 256: предмет с площадкой в 66 пикселей высотой терялся в пустоте, а
     подпись уезжала в левый угол. Лента и так прокручивается — узкой
     карточке ширина экрана не нужна. */

  /* Пропорцию баннера держим и на телефоне: `aspect-ratio: auto` схлопнул бы
     плашку в ноль — внутри неё теперь нет текста, который задавал высоту, а
     картинка лежит абсолютом. Приглушение opacity: .45 тоже убрано: раньше
     оно освобождало фон под наш заголовок, которого больше нет. */
  .kz-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-dash { grid-template-columns: minmax(0, 1fr); }
  .kz-jackpot { grid-column: auto; }
  .kz-cases__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kz-benefits { grid-template-columns: minmax(0, 1fr); }
  .kz-btn--ghost.kz-btn--lg, .kz-header__end .kz-btn--ghost { display: none; }
}

/* ═══════════════ ВЫПАДАЮЩИЙ СПИСОК ИГР ═══════════════
   Висит под пунктом Games. Абсолютно спозиционирован от .kz-nav__li,
   поэтому пункт меню обязан быть position: relative — без этого список
   отсчитывался бы от страницы и уезжал в левый край. */

.kz-nav__li { position: relative; }

/* Панель меню игр. Имя kz-gmenu, а НЕ kz-drop: тот класс уже носит плитка
   живого дропа, и общее имя означает, что правила меню подмешиваются в
   плитку. Именно так и вышло — min-width: 560px, поставленный меню под два
   столбца, растянул карточки дропов, и в ленту вместо трёх стала влезать
   одна. Второй раз на тех же граблях. */
.kz-gmenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  /* Под два столбца: 320 хватало на один. */
  min-width: 560px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  padding: 8px;
  /* Закрытое состояние — не display: none, а прозрачность со сдвигом:
     display нельзя анимировать, и меню появлялось бы рывком. */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.kz-nav__item.is-open + .kz-gmenu {
  opacity: 1; visibility: visible; transform: none;
}

/* Десять пунктов в два столбца. В один они дают список высотой под 600
   пикселей — он свисает ниже сгиба, и нижние игры не видно, пока меню не
   прокрутишь. Два столбца по пять умещаются в экран целиком. */
.kz-gmenu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }

.kz-game {
  position: relative;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center;
  gap: 11px; padding: 9px 10px;
  border-radius: 6px;
  transition: background .14s;
}
.kz-game:hover { background: var(--panel-3); }
.kz-game[aria-current="page"] { background: rgba(237,224,15,.1); }

.kz-game__ico { width: 42px; height: 42px; object-fit: contain; display: block; }
.kz-game__txt { display: grid; gap: 1px; min-width: 0; }
.kz-game__txt b {
  font-family: var(--f-cond); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text);
}
.kz-game__txt i {
  font-style: normal; font-size: 11px; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Неготовые разделы: тусклые и не ссылки вовсе. Ссылка, ведущая в никуда,
   раздражает сильнее, чем честная пометка. */
.kz-game.is-soon { cursor: default; }
.kz-game.is-soon:hover { background: none; }
/* Неготовый раздел приглушаем, но не стираем. Прежние grayscale(.85) и
   opacity: .4 съедали весь неон, и от иконки оставалось серое пятно — три
   из пяти пунктов выглядели одинаково пустыми. Что раздел недоступен, и так
   говорят метка «Скоро», приглушённая подпись и отсутствие ссылки. */
.kz-game.is-soon .kz-game__ico { filter: grayscale(.3); opacity: .72; }
.kz-game.is-soon .kz-game__txt b { color: var(--text-mute); }
.kz-game__soon {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  padding: 2px 7px; border-radius: 3px;
  background: var(--panel-3); color: var(--text-mute);
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 520px) {
  /* На 375 не помещается и «Регистрация»: заводят аккаунт с этой страницы
     редко, а баланс смотрят каждый заход. */
  .kz-header__end .kz-btn--accent { display: none; }
}
@media (max-width: 900px) {
  /* Тоже про МЕНЮ, а не про плитку дропа — правило осталось со старым
     именем и на узком экране расставляло плитки по центру абсолютом. */
  .kz-gmenu { min-width: 280px; left: 50%; transform: translate(-50%, -6px); }
  .kz-nav__item.is-open + .kz-gmenu { transform: translate(-50%, 0); }
  /* Один столбец: два по 280 в 900 пикселей уже не помещаются. */
  .kz-gmenu__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Кнопка звука вставляется скриптом рядом с языком. Выключённое состояние
   притушено, а не перекрашено: это не ошибка и не предупреждение. */
#kz-sound.is-off { color: var(--text-mute); }
#kz-sound.is-off:hover { color: var(--text-dim); }


/* ═══════════════ ЗНАЧОК ИГРЫ НА ЕЁ СТРАНИЦЕ ═══════════════

   Ставится скриптом kraze.gamebar.js из того же списка, что и меню Games,
   поэтому картинка на странице и картинка в меню — один файл.

   Вид тоже одинаковый: голое изображение с object-fit: contain, без
   плитки и без подложки — ровно как .kz-game__ico в выпадающем меню.
   Плашка под значком выглядела бы «фирменнее», но сделала бы одну и ту же
   игру непохожей на себя же в меню, а это и есть та мелочь, из-за которой
   интерфейс перестаёт читаться как одно целое. */
.kz-gico { display: block; flex: none; width: 30px; height: 30px; }
.kz-gico img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Полоса для страниц, у которых своего заголовка игры нет.

   Вставляется ПЕРЕД <main>, а не внутрь: у разных игр main — то сетка, то
   флекс, и новый первый ребёнок поехал бы по чужим правилам раскладки.
   Отсюда и собственные отступы — они повторяют оболочку страницы. */
.kz-gbar {
  max-width: var(--shell); margin: 0 auto;
  padding: 14px var(--pad-x) 0;
  display: flex; align-items: center; gap: 11px;
  /* если родитель main — сетка (коинфлип: меню | стол | панель), полоса
     занимает всю строку, а не одну колонку, иначе main съезжает в третью
     колонку, а панель падает под него */
  grid-column: 1 / -1;
}
.kz-gbar .kz-gico { width: 34px; height: 34px; }
.kz-gbar__txt { display: grid; gap: 1px; min-width: 0; }
.kz-gbar__txt b {
  font-family: var(--f-cond), sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.1;
}
.kz-gbar__txt i {
  font-style: normal; font-size: 11.5px; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ═══════════════ ГЛАВНАЯ ПО РЕФЕРЕНСУ (GGDROP) ═══════════════
   Снято с сохранённой копии ggdrop.info (1440): полоса живых дропов 106px
   над шапкой (кнопки 102×51 столбиком, плитки 160×104, скругление 3),
   контейнер 1233px, ряд разделов 84px со скруглением 12 (плитки 190×74,
   пункты меню 15px с отступами 18), баннер во всю ширину, секция кейсов
   с заголовком и «Свернуть». Цвета и шрифты наши. */

/* Шапка на главной не липнет к самому верху: над ней полоса дропов. */
/* Отдельного вида шапки у главной больше нет: её ровная полупрозрачная
   подложка стала общей (см. .kz-header::before). */
.gg-page {
  position: relative; max-width: 1273px; margin: 0 auto; padding: 0 20px 56px;
  display: flex; flex-direction: column; gap: 22px;
}
.gg-home .kz-games { margin-top: 6px; }
.gg-page.gg-page--top { padding-bottom: 0; }

/* ---------- живые дропы ---------- */
.gg-live { display: flex; gap: 2px; height: 106px; padding: 2px 0 0 2px; background: #1B1C24; overflow: hidden; }
.gg-live__btns { display: flex; flex-direction: column; gap: 2px; flex: none; }
.gg-live__btn {
  position: relative; width: 102px; height: 51px; padding: 0 43px 0 14px; border-radius: 3px; border: 0;
  background: var(--panel-3); color: var(--text-mute); text-align: left; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .14s, color .14s;
}
.gg-live__btn i { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.gg-live__btn i svg { width: 100%; height: 100%; display: block; }
.gg-live__btn:hover { color: var(--text); }
.gg-live__btn.is-on { color: var(--accent); background: #1B1D24; }
.gg-live__wrap { flex: 1; min-width: 0; overflow: hidden; }
.gg-live__list {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; height: 104px;
  -webkit-mask: linear-gradient(90deg, #000 92%, transparent); mask: linear-gradient(90deg, #000 92%, transparent);
}
.gg-live__item { flex: none; width: 160px; height: 104px; }
.gg-live__item.is-new { animation: gg-in .35s ease-out; }
@keyframes gg-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.gg-live__link {
  --r: #4b69ff;
  position: relative; display: block; width: 100%; height: 100%; border-radius: 3px; overflow: hidden; text-decoration: none; color: var(--text);
  background: radial-gradient(102% 157% at 50% -23%, color-mix(in srgb, var(--r) 45%, transparent) 0, color-mix(in srgb, var(--r) 18%, transparent) 42%, transparent 70%), #16171D;
}
.gg-live__img { position: absolute; inset: 0 0 26px; display: grid; place-items: center; }
.gg-live__img img { width: 110px; height: 72px; object-fit: contain; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); transition: transform .2s; }
.gg-live__link:hover .gg-live__img img { transform: scale(1.06); }
.gg-live__foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 14px 12px; }
.gg-live__title { display: block; font-size: 12px; color: #E2E3E7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* обратная сторона по наведению: оружие и цена */
.gg-live__back {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(8, 9, 12, .82); opacity: 0; transition: opacity .18s; font-size: 12px;
}
.gg-live__back b { font-weight: 700; }
.gg-live__back u { text-decoration: none; color: var(--accent); font-weight: 800; }
.gg-live__link:hover .gg-live__back { opacity: 1; }
.gg-live__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--r); opacity: .8; }

/* ---------- ряд разделов ---------- */
.gg-bar {
  display: flex; align-items: stretch; gap: 10px; min-height: 84px; padding: 5px; border-radius: 12px;
  background: rgba(20, 20, 28, .92); border: 1px solid var(--line-soft);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gg-bar__tiles, .gg-bar__menu { list-style: none; margin: 0; padding: 0; display: flex; }
.gg-bar__tiles { gap: 5px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.gg-bar__tiles::-webkit-scrollbar { display: none; }
.gg-bar__tiles li { flex: none; }
.gg-tile {
  position: relative; display: flex; width: 190px; height: 74px; padding: 12px 14px; border-radius: 8px; overflow: hidden; text-decoration: none;
  background: linear-gradient(76deg, #15161C 36%, color-mix(in srgb, var(--t) 22%, #1C1D25) 100%);
  border: 1px solid var(--line-soft); transition: border-color .14s, transform .14s;
}
.gg-tile:hover { border-color: color-mix(in srgb, var(--t) 50%, var(--line)); transform: translateY(-1px); }
.gg-tile__title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9EA0AB; z-index: 1; }
.gg-tile:hover .gg-tile__title { color: var(--text); }
.gg-tile img { position: absolute; right: 4px; bottom: -6px; width: 84px; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transition: transform .2s; }
.gg-tile:hover img { transform: translateY(-3px) scale(1.04); }
.gg-bar__menu { min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.gg-bar__menu::-webkit-scrollbar { display: none; }
.gg-bar__menu li { display: flex; }
.gg-bar__menu li + li { border-left: 1px solid rgba(255, 255, 255, .06); }
.gg-menu__link {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 18px; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; transition: color .14s, background-color .14s;
}
.gg-menu__link:hover { color: var(--accent); background: rgba(255, 255, 255, .03); }
.gg-menu__link img { width: 28px; height: auto; display: block; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }

/* ---------- баннер ----------
   Кадр с вшитыми заголовком и кнопкой (assets/home_hero.webp) во всю
   ширину окна, целиком, без обрезки: высота по пропорции. Начинается
   из-под середины ряда разделов — ряд лежит поверх него; снизу
   растворяется под заголовком кейсов. Сам баннер — ссылка на кейсы. */
.gg-banner {
  /* Кадр начинается сразу под шапкой: блок поднят на всю высоту ряда
     разделов (86px), и ряд лежит поверх него, как у референса. */
  position: relative; display: block; width: 100%; margin: -86px 0 0;
  /* Края рассеиваются, как у референса: по бокам кадр уходит в фон
     страницы за крайние 12 %, снизу растворяется под заголовком кейсов.
     Две маски пересекаются (mask-composite), поэтому углы гаснут вдвойне
     и рамки нигде не видно. */
  -webkit-mask:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 16%, #000 42%, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%),
    linear-gradient(180deg, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 16%, #000 42%, #000 58%, rgba(0,0,0,.35) 84%, transparent 100%),
    linear-gradient(180deg, #000 84%, transparent 100%);
          mask-composite: intersect;
}
.gg-banner img { width: 100%; height: auto; aspect-ratio: 1672 / 564; object-fit: cover; display: block; }
.gg-page--top { position: relative; z-index: 3; }



/* Колонка страницы наезжает на низ баннера: заголовок кейсов ложится на
   его нижнюю часть, а сам кадр под ним растворяется маской. */
.gg-home .gg-page:not(.gg-page--top) { margin-top: -170px; position: relative; z-index: 2; }

/* ---------- стрелка у ряда игр ---------- */
.gg-bar__scroll { position: relative; flex: 1; min-width: 0; display: flex; }
.gg-bar__scroll.is-over .gg-bar__tiles {
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 70px), transparent);
          mask: linear-gradient(90deg, #000 calc(100% - 70px), transparent);
}
.gg-bar__scroll.is-over.is-end .gg-bar__tiles { -webkit-mask: none; mask: none; }
.gg-bar__more {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2;
  display: none; width: 40px; height: 40px; place-items: center; border-radius: 10px; border: 1px solid var(--line);
  background: #1F2129; color: var(--text); cursor: pointer; transition: background-color .14s, color .14s;
}
.gg-bar__more svg { width: 18px; height: 18px; transition: transform .2s; }
.gg-bar__scroll.is-over .gg-bar__more { display: grid; }
.gg-bar__scroll.is-end .gg-bar__more svg { transform: rotate(180deg); }
.gg-bar__more:hover { background: #2A2D35; color: var(--accent); }

@media (max-width: 1000px) {
  .gg-home .gg-page:not(.gg-page--top) { margin-top: -80px; }
}
@media (max-width: 640px) {
  .gg-home .gg-page:not(.gg-page--top) { margin-top: -40px; }
}

/* ---------- ряд кейсов ----------
   Без карточек: картинка на прозрачном фоне, под ней имя и цена. Тень и
   свечение — от самого кейса, никаких плашек. */
.gg-cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gg-case {
  --t: #4b69ff;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px 14px; text-decoration: none; color: var(--text);
  transition: transform .18s;
}
.gg-case:hover { transform: translateY(-6px); }
/* высота площадки фиксированная, чтобы имена и цены всех пяти кейсов
   стояли на одной линии при разных пропорциях картинок */
.gg-case__art { position: relative; display: grid; place-items: center; width: 100%; height: 230px; }
/* мягкое пятно цвета кейса под ним — вместо плашки */
.gg-case__art::before {
  content: ''; position: absolute; left: 50%; bottom: 6%; width: 74%; height: 26%; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--t) 55%, transparent), transparent 75%);
  opacity: .55; transition: opacity .2s;
}
.gg-case:hover .gg-case__art::before { opacity: .95; }
/* прижимаем к низу площадки: у обложек разная пропорция, и по центру
   широкий кадр (INFERNO) вставал выше остальных */
.gg-case__art img {
  position: relative; z-index: 1; width: 100%; height: 100%; max-height: 230px; object-fit: contain; object-position: bottom; display: block;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
}
.gg-case__name { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.gg-case__price { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; color: var(--money); font-variant-numeric: tabular-nums; }
.gg-case__price .kz-coin-img { width: 14px; height: 14px; }

@media (max-width: 1000px) {
  .gg-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gg-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- шапка секции кейсов ----------
   Лежит на баннере: слева крупная надпись витринным шрифтом (Rubik Dirt,
   тот же, что на кадрах), справа блок телеграма стеклом с блюром —
   чтобы читался поверх фотографии. */
.gg-cat { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; }
.gg-cat__head {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 96px;
}
.gg-cat__lead { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gg-cat__title {
  margin: 0; font-family: 'Rubik Dirt', var(--f-cond), sans-serif; font-weight: 400;
  font-size: clamp(34px, 3.4vw, 52px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .85), 0 2px 6px rgba(0, 0, 0, .7);
}
.gg-cat__title em {
  font-style: normal; color: var(--accent);
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent), 0 4px 20px rgba(0, 0, 0, .8);
}
.gg-cat__sub { margin: 0; font-size: 13px; font-weight: 600; color: #C9CFD6; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }

/* блок телеграма */
.gg-tg {
  --t: #2AABEE;
  display: flex; align-items: center; gap: 14px; flex: none; width: min(360px, 42vw); padding: 14px 16px;
  border-radius: 16px; text-decoration: none; color: var(--text);
  background: linear-gradient(100deg, rgba(12, 14, 20, .74), color-mix(in srgb, var(--t) 20%, rgba(12, 14, 20, .74)));
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  transition: border-color .16s, transform .16s;
}
.gg-tg:hover { border-color: color-mix(in srgb, var(--t) 60%, transparent); transform: translateY(-2px); }
.gg-tg__ico {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  background: color-mix(in srgb, var(--t) 26%, transparent); color: var(--t);
  box-shadow: 0 0 26px color-mix(in srgb, var(--t) 32%, transparent);
}
.gg-tg__ico svg { width: 28px; height: 28px; }
.gg-tg__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gg-tg__txt i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t); }
.gg-tg__txt b { font-size: 15px; font-weight: 800; }
.gg-tg__txt u { text-decoration: none; font-size: 12px; color: #B4BAC3; line-height: 1.3; }
.gg-tg__go { flex: none; margin-left: auto; width: 18px; height: 18px; color: var(--text-mute); transition: transform .16s, color .16s; }
.gg-tg__go svg { width: 100%; height: 100%; display: block; }
.gg-tg:hover .gg-tg__go { color: var(--t); transform: translateX(3px); }

.gg-cat.is-closed .gg-cat__body { display: none; }

@media (max-width: 900px) {
  .gg-cat__head { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .gg-tg { width: 100%; }
}

@media (max-width: 1100px) {
  .gg-banner { min-height: 420px; }
  .gg-banner__title { font-size: 72px; }
}
@media (max-width: 760px) {
  .gg-bar { flex-direction: column; }
  .gg-bar__menu { margin: 0; }
  .gg-banner__left { padding: 28px 22px; }
  .gg-banner__title { font-size: 48px; }
  .gg-cat__title { font-size: 22px; }
  .gg-cat__btn { position: static; transform: none; margin-left: auto; }
}

/* ═══════════════ ПОДВАЛ ═══════════════
   Разметку собирает kraze.footer.js — она одинакова на всех страницах, и
   держать двадцать копий в html значило бы разойтись на первой правке. */

.kz-footer {
  margin-top: 64px; border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(8, 8, 11, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.kz-footer__in {
  max-width: var(--shell); margin: 0 auto;
  padding: 40px var(--pad-x) 30px;
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.2fr);
  gap: 34px;
}
.kz-footer__logo { width: 132px; height: auto; display: block; }
.kz-footer__brand p { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-mute); max-width: 42ch; }

.kz-footer__tg {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  height: 38px; padding: 0 15px; border-radius: 10px;
  background: rgba(62, 155, 255, .12); color: #6FB6FF;
  font-size: 13px; font-weight: 600;
  transition: background-color .14s;
}
.kz-footer__tg:hover { background: rgba(62, 155, 255, .2); }
.kz-footer__tg svg { width: 17px; height: 17px; }

.kz-footer__col h3 {
  margin: 0 0 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}
.kz-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.kz-footer__col a { font-size: 13px; color: var(--text-mute); transition: color .14s; }
.kz-footer__col a:hover { color: var(--text); }
.kz-footer__col--fair p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-mute); }

.kz-footer__bar {
  max-width: var(--shell); margin: 0 auto;
  padding: 16px var(--pad-x) 26px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-mute);
}
/* Возрастная отметка — красным и отдельным значком: это предупреждение,
   а не строчка мелким шрифтом среди прочих. */
.kz-footer__age {
  display: inline-grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255, 59, 48, .5); color: #FF7A7A;
  font-size: 11px; font-weight: 800;
}
.kz-footer__copy { margin-left: auto; }

@media (max-width: 900px) {
  .kz-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .kz-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .kz-footer__in { grid-template-columns: minmax(0, 1fr); }
  .kz-footer__copy { margin-left: 0; }
}


/* ═══════════════ ПОЛОСА ПРОКРУТКИ ═══════════════
   Системный ползунок на тёмном сайте выглядит как белая накладка из
   другой темы — особенно в маленьких прокручиваемых панелях вроде выбора
   ставки, где он занимает заметную часть ширины.

   Дорожка прозрачная, ползунок — приглушённый синевато-серый в цвет
   кромок панелей. Отступ сделан прозрачной рамкой с background-clip, а не
   шириной: так ползунок тоньше самой полосы и не липнет к содержимому. */
* { scrollbar-width: thin; scrollbar-color: #2E3650 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2E3650; border-radius: 8px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #3D4766; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }