/* ==========================================================================
   DropHub — главная (index.html)

   Раскладка снята с референса на холсте 1600×1000: колонка контента,
   сверху ряд «слайдер 826:300 + колонка 378px», зазор 16; ниже секция
   «Режимы игр» — сетка в три колонки, карточки 389×240 с зазором 16,
   первая на два ряда. Колонка у нас своя — та же .gg-page (1233px), что
   и у ряда разделов над ней, чтобы края блоков совпадали с меню.

   Шрифты и кнопки — наши (home.css): Oswald в заголовках, Inter в тексте,
   лаймовая кнопка действия. Палитра — своя, в блоке ниже.

   Телефоны на сайте тормозят, поэтому здесь нарочно бедно: ни одного
   backdrop-filter, крупных размытых теней нет, бесконечная анимация одна —
   мигающая точка «онлайн»; двигаются только transform и opacity.
   ========================================================================== */

/* ═══════════════ ПАЛИТРА ═══════════════
   Всё на body.ht-home — значит, только на этой странице; общие файлы и
   живая главная не меняются.

   Почему было грязно. Плитки и карточки смешивали цвет игры с серым
   (#14151B, #17171F) на 20–70 %, а сверху клали чёрную полосу. Серый
   съедает насыщенность: жёлтый превращался в оливку, оранжевый в
   коричневый, зелёный в болотный. Тёмный жёлтый и тёмный оранжевый —
   это и есть оливка и коричневый, поэтому ни жёлтого, ни оранжевого фоном
   здесь больше нет: у каждой игры тройка оттенков одного тона —
   глубокий (-d, под текстом), чистый (без суффикса) и светлый (-l, блик
   и обводка), — подобранных с одинаковой светлотой, чтобы ряд читался
   набором. Соседние в меню и в сетке разнесены по кругу минимум на 45°.

   Подложки — глубокий индиго-фиолет вместо почти чёрного: страница
   легче, и фиолетовый бренда (#A62CFF) с лаймом (#D7FF00) на нём родные. */
body.ht-home {
  --ht-bg:        #1A1430;   /* страница (было #17171F) */
  --ht-deep:      #120C26;   /* слайдер, затемнения */
  --ht-surface:   #221B3E;   /* карточки режимов */
  --ht-surface-2: #2C2452;   /* плашки, кнопки на карточках */
  --ht-line:      #3A3166;   /* обводки */
  --ht-text:      #F5F3FF;
  --ht-text-dim:  #BDB7DE;   /* 8.5:1 на --ht-surface */
  --ht-scrim:     16, 10, 36; /* затемнение под текстом слайдов, rgba() */

  /* игры: глубокий / чистый / светлый */
  --ht-cases-d:    #4C1D95; --ht-cases:    #7C3AED; --ht-cases-l:    #A855F7;  /* фиолет бренда */
  --ht-roll-d:     #881337; --ht-roll:     #E11D48; --ht-roll-l:     #FB7185;  /* роза-красный */
  --ht-upgrade-d:  #1E3A8A; --ht-upgrade:  #2563EB; --ht-upgrade-l:  #60A5FA;  /* синий */
  --ht-battles-d:  #8A2408; --ht-battles:  #EA580C; --ht-battles-l:  #FB923C;  /* огонь: тёмный конец в красный, не в коричневый */
  --ht-crash-d:    #065F46; --ht-crash:    #059669; --ht-crash-l:    #34D399;  /* изумруд */
  --ht-plinko-d:   #701A75; --ht-plinko:   #C026D3; --ht-plinko-l:   #E879F9;  /* фуксия */
  --ht-miner-d:    #115E59; --ht-miner:    #0D9488; --ht-miner-l:    #2DD4BF;  /* бирюза */
  --ht-hilo-d:     #0C4A6E; --ht-hilo:     #0284C7; --ht-hilo-l:     #38BDF8;  /* небесный */
  --ht-coinflip-d: #831843; --ht-coinflip: #DB2777; --ht-coinflip-l: #F472B6;  /* розовый */
  --ht-slots-d:    #312E81; --ht-slots:    #4F46E5; --ht-slots-l:    #818CF8;  /* индиго */
  --ht-contract-d: #14532D; --ht-contract: #16A34A; --ht-contract-l: #4ADE80;  /* зелёный */
  --ht-oneclick-d: #713F12; --ht-oneclick: #CA8A04; --ht-oneclick-l: #FACC15;  /* золото — клетка ×100 */
  --ht-upbattle-d: #3F5200; --ht-upbattle: #7C9A05; --ht-upbattle-l: #C6E21B;  /* лайм сайта — сторона создателя */
  /* правая колонка */
  --ht-bonus-d:    #065F46; --ht-bonus:    #059669; --ht-bonus-l:    #34D399;
  --ht-promo-d:    #1E3A8A; --ht-promo:    #2563EB; --ht-promo-l:    #60A5FA;

  /* Общие нейтрали сайта — те же ступени, но с фиолетовым подтоном: иначе
     серые панели ленты ставок и шапки выглядели бы чужими на индиго. */
  --panel:     #0D0A1A;
  --panel-2:   #130E24;
  --panel-3:   #1E1836;
  --line:      #2B2449;
  --line-soft: #1F1938;

  background-color: var(--ht-bg);
}

/* Тон на элемент: --gd глубокий, --g чистый, --gl светлый. Один и тот же
   класс красит и плитку меню, и карточку режима. */
.ht-t-cases,    .ht-home .gg-tile[href="cases.html"]    { --gd: var(--ht-cases-d);    --g: var(--ht-cases);    --gl: var(--ht-cases-l); }
.ht-t-roll,     .ht-home .gg-tile[href="roulette.html"] { --gd: var(--ht-roll-d);     --g: var(--ht-roll);     --gl: var(--ht-roll-l); }
.ht-t-upgrade,  .ht-home .gg-tile[href="upgrade.html"]  { --gd: var(--ht-upgrade-d);  --g: var(--ht-upgrade);  --gl: var(--ht-upgrade-l); }
.ht-t-battles,  .ht-home .gg-tile[href="battles.html"]  { --gd: var(--ht-battles-d);  --g: var(--ht-battles);  --gl: var(--ht-battles-l); }
.ht-t-crash,    .ht-home .gg-tile[href="crash.html"]    { --gd: var(--ht-crash-d);    --g: var(--ht-crash);    --gl: var(--ht-crash-l); }
.ht-t-plinko,   .ht-home .gg-tile[href="plinko.html"]   { --gd: var(--ht-plinko-d);   --g: var(--ht-plinko);   --gl: var(--ht-plinko-l); }
.ht-t-miner,    .ht-home .gg-tile[href="miner.html"]    { --gd: var(--ht-miner-d);    --g: var(--ht-miner);    --gl: var(--ht-miner-l); }
.ht-t-hilo,     .ht-home .gg-tile[href="hilo.html"]     { --gd: var(--ht-hilo-d);     --g: var(--ht-hilo);     --gl: var(--ht-hilo-l); }
.ht-t-coinflip, .ht-home .gg-tile[href="coinflip.html"] { --gd: var(--ht-coinflip-d); --g: var(--ht-coinflip); --gl: var(--ht-coinflip-l); }
.ht-t-slots,    .ht-home .gg-tile[href="slot.html"]     { --gd: var(--ht-slots-d);    --g: var(--ht-slots);    --gl: var(--ht-slots-l); }
.ht-t-contract                                          { --gd: var(--ht-contract-d); --g: var(--ht-contract); --gl: var(--ht-contract-l); }
.ht-t-oneclick                                          { --gd: var(--ht-oneclick-d); --g: var(--ht-oneclick); --gl: var(--ht-oneclick-l); }
.ht-t-upbattle, .ht-home .gg-tile[href="upbattle.html"] { --gd: var(--ht-upbattle-d); --g: var(--ht-upbattle); --gl: var(--ht-upbattle-l); }

/* ═══════════════ РЯД РАЗДЕЛОВ (общий drophub.topbar.js, цвета — только здесь) ═══════════════
   У плитки свой --t в style="" — его не трогаем: плитка красится через
   --gd/--g/--gl по href. Плитка, которой в таблице нет (новая игра),
   берёт тон из своего --t — запасные значения в var(). */
.ht-home .gg-bar { background: rgba(30, 23, 58, .92); border-color: var(--ht-line); }
.ht-home .gg-tile {
  --tile-d: var(--gd, color-mix(in srgb, var(--t) 42%, #120C26));
  --tile-m: var(--g, var(--t));
  --tile-l: var(--gl, var(--t));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .10) 100%),
    radial-gradient(58% 120% at 82% 64%, color-mix(in srgb, var(--tile-l) 58%, transparent), transparent 70%),
    linear-gradient(100deg, var(--tile-d) 0%, color-mix(in srgb, var(--tile-m) 62%, var(--tile-d)) 58%, var(--tile-m) 100%);
  border-color: color-mix(in srgb, var(--tile-l) 48%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 18px -12px var(--tile-m);
}
.ht-home .gg-tile:hover {
  border-color: color-mix(in srgb, var(--tile-l) 85%, #fff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 12px 22px -12px var(--tile-l);
}
.ht-home .gg-bar__more { background: var(--ht-surface-2); border-color: var(--ht-line); }
.ht-home .gg-bar__more:hover { background: #372E62; }
/* Лента дропов над шапкой красится в index.drops.css. */

/* Колонка страницы. Отрицательного отступа, как у главной под баннером,
   здесь нет: body без .gg-home, и правило из home.css не срабатывает. */
.ht-page { margin-top: 18px; gap: 26px; }

.ht-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ═══════════════ ВЕРХНИЙ РЯД ═══════════════ */
/* Слайдер ~2/3, правая колонка ~1/3 (не уже 400px): фиксированные 378px
   справа смотрелись узкой полоской рядом со слайдером. */
.ht-head {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(400px, 1fr); gap: 16px;
}

/* ---------- слайдер ----------
   Лента слайдов двигается transform'ом; высота — из пропорции 826:300.
   align-self: stretch — на окнах 1000–1240 правая колонка выше слайдера
   по пропорции, и он дотягивается до неё, а не висит коротышкой.
   touch-action: pan-y — вертикальная прокрутка остаётся браузеру, а
   горизонтальный свайп забирает слайдер (слушатели пассивные). */
.ht-slider {
  /* width: 100% — ширина от колонки, а не от высоты ряда через aspect-ratio:
     иначе на 1001–1240px слайдер вылезал под правую колонку */
  position: relative; align-self: stretch; aspect-ratio: 826 / 300; width: 100%; min-width: 0;
  border-radius: var(--r-banner); overflow: hidden; isolation: isolate;
  background: var(--ht-deep); touch-action: pan-y;
}
.ht-slider__track {
  display: flex; height: 100%;
  transition: transform .55s cubic-bezier(.22, .72, .2, 1);
}
.ht-slider.is-drag .ht-slider__track { transition: none; }

/* --t — светлый тон слайда (плашка над заголовком, выделенное слово).
   Тон тот же, что у игры в меню и в сетке; у кейсов — лайм бренда, это
   главный слайд. */
.ht-slide {
  --t: var(--lime);
  position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; padding: 34px 44px 40px;
  color: #fff; text-decoration: none;
}
.ht-slide--earn    { --t: var(--lime); }
.ht-slide--cases   { --t: var(--lime); }
.ht-slide--battles { --t: var(--ht-battles-l); }
.ht-slide--upgrade { --t: var(--ht-upgrade-l); }
.ht-slide--rewards { --t: #FFC93C; }

.ht-slide__bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; display: block;
}
/* Все слайды — креативы (assets/tiles/, assets/slides/), пропорция почти
   как у слайдера (826:300): кадр целиком, по центру */

/* Затемнение под текстом: слева плотное, к середине кадра сходит на нет;
   снизу тонкая полоса под точками. Один слой на слайд. */
/* Затемнение — глубокий индиго, а не чёрный: фото под ним не сереет. */
.ht-slide::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(var(--ht-scrim), .6) 0%, transparent 28%),
    linear-gradient(90deg, rgba(var(--ht-scrim), .94) 0%, rgba(var(--ht-scrim), .74) 30%, rgba(var(--ht-scrim), .18) 58%, transparent 76%);
}

.ht-slide__copy {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  max-width: min(440px, 60%);
}
.ht-slide__title {
  font-family: var(--f-cond); font-weight: 700; font-size: 40px; line-height: 1.02;
  letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.ht-slide__title em { font-style: normal; color: color-mix(in srgb, var(--t) 78%, #fff); }
.ht-slide__sub { font-size: 14.5px; line-height: 1.45; color: #E2DEF5; max-width: 380px; text-shadow: 0 1px 6px rgba(var(--ht-scrim), .8); }

/* Кнопка действия — лаймовая, как у баннера главной и «Войти» в шторке. */
.ht-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-top: 4px; padding: 0 18px;
  border-radius: 10px; background: var(--lime); color: #0B0B0E;
  font-family: var(--f-cond); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.ht-btn svg { width: 16px; height: 16px; transition: transform .18s; }
.ht-slide:hover .ht-btn svg { transform: translateX(3px); }
.ht-slide:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; border-radius: var(--r-banner); }

/* стрелки — только мышью и только по наведению, как у референса */
.ht-slider__arrow {
  position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px;
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(var(--ht-scrim), .74); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
  opacity: 0; transition: opacity .2s, background-color .15s, color .15s;
}
.ht-slider__arrow svg { width: 18px; height: 18px; }
.ht-slider__arrow--prev { left: 12px; }
.ht-slider__arrow--next { right: 12px; }
.ht-slider:hover .ht-slider__arrow, .ht-slider__arrow:focus-visible { opacity: 1; }
.ht-slider__arrow:hover { background: rgba(var(--ht-scrim), .94); color: var(--lime); }
@media (hover: none) { .ht-slider__arrow { display: none; } }

/* Точки: кнопка 22×22 под палец, сама точка — псевдоэлемент 8px.
   Активная растягивается scaleX, а не шириной: без перекладки. */
.ht-slider__dots {
  position: absolute; left: 50%; bottom: 8px; z-index: 3; transform: translateX(-50%);
  display: flex; gap: 2px;
}
.ht-slider__dot { width: 22px; height: 22px; display: grid; place-items: center; }
.ht-slider__dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .38);
  transition: transform .25s, background-color .25s;
}
.ht-slider__dot.is-on::before { background: var(--lime); transform: scaleX(2.2); }
.ht-slider__dot:focus-visible { outline: 2px solid var(--lime); outline-offset: -3px; border-radius: 6px; }

/* ---------- правая колонка ----------
   Две маленькие карточки рядом, под ними промокод; колонка высотой со
   слайдер — маленькие забирают остаток. */
.ht-side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; min-width: 0; }
.ht-side__minis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 0; }

/* Правые карточки: глубокий тон сверху слева (под текстом), чистый —
   снизу справа (под артом), за артом светлое пятно, сверху 1px блика. */
.ht-mini {
  --gd: var(--ht-cases-d); --g: var(--ht-cases); --gl: var(--ht-cases-l);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 120px; padding: 16px 18px; border-radius: var(--r-banner); overflow: hidden; isolation: isolate;
  color: #fff; text-decoration: none;
  background:
    radial-gradient(60% 70% at 88% 86%, color-mix(in srgb, var(--gl) 46%, transparent), transparent 72%),
    linear-gradient(150deg, var(--gd) 0%, color-mix(in srgb, var(--g) 55%, var(--gd)) 62%, var(--g) 100%);
  border: 1px solid color-mix(in srgb, var(--gl) 46%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform .18s ease, border-color .18s;
}
.ht-mini--raffle { --gd: var(--ht-cases-d); --g: var(--ht-cases); --gl: var(--ht-cases-l); }
.ht-mini--bonus  { --gd: var(--ht-bonus-d); --g: var(--ht-bonus); --gl: var(--ht-bonus-l); }
.ht-mini:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gl) 85%, #fff); }
.ht-mini:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* арт заходит под конец подписи — короткая тень держит текст на нём */
.ht-mini__title { font-family: var(--f-cond); font-weight: 600; font-size: 19px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(var(--ht-scrim), .55); }
.ht-mini__sub { font-size: 12px; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 4px rgba(var(--ht-scrim), .8); }
.ht-mini__go {
  margin-top: auto; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--ht-scrim), .34); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ht-mini__go svg { width: 16px; height: 16px; transition: transform .18s; }
.ht-mini:hover .ht-mini__go svg { transform: translateX(2px); }
.ht-mini__art {
  position: absolute; z-index: -1; right: -14px; bottom: -12px; width: 98px; height: auto; display: block;
  pointer-events: none; transition: transform .25s ease;
}
.ht-mini__art--coin  { right: 8px; bottom: 8px; width: 68px; transform: rotate(-12deg); }
.ht-mini__art--coin2 { right: 68px; bottom: 10px; width: 38px; transform: rotate(18deg); opacity: .9; }
.ht-mini:hover .ht-mini__art { transform: translateY(-4px); }
.ht-mini:hover .ht-mini__art--coin  { transform: translateY(-4px) rotate(-12deg); }
.ht-mini:hover .ht-mini__art--coin2 { transform: translateY(-6px) rotate(24deg); }

/* Креативы владельца (assets/side/, 2026-10-14) — во всю карточку; сверху
   слева затемнение под заголовок, снизу — под стрелку. */
.ht-mini__bg, .ht-promo__bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none; transition: transform .35s ease;
}
.ht-mini--raffle .ht-mini__bg { object-position: 62% 58%; }  /* билеты v2: главный билет «D» в кадре */
/* телефон: карточка низкая и широкая — главный билет опускаем под подпись */
@media (max-width: 600px) { .ht-mini--raffle .ht-mini__bg { object-position: 62% 22%; } }
.ht-mini--bonus  .ht-mini__bg { object-position: 72% 78%; }
.ht-mini:has(.ht-mini__bg)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(var(--ht-scrim), .82) 0%, rgba(var(--ht-scrim), .35) 38%, transparent 58%),
    linear-gradient(0deg, rgba(var(--ht-scrim), .55) 0%, transparent 34%);
}
.ht-mini:hover .ht-mini__bg { transform: scale(1.05); }
/* промокод: монета «D» крупно справа (креатив почти квадратный — в
   низком блоке видна его полоса через монету), слева под форму —
   затемнение. Владелец вернул этот вариант вместо билета (2026-10-14). */
.ht-promo__bg { object-position: 100% 62%; }
.ht-promo:has(.ht-promo__bg)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--ht-scrim), .78) 0%, rgba(var(--ht-scrim), .5) 46%, rgba(var(--ht-scrim), .08) 78%);
}

/* ---------- промокод ---------- */
/* Промокод — синий: спокойный на большой площади, и лаймовая кнопка на
   нём горит сильнее всего (было золото на сером — выходило коричневым). */
.ht-promo {
  position: relative; padding: 16px 18px; border-radius: var(--r-banner); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(42% 80% at 96% 4%, color-mix(in srgb, var(--ht-promo-l) 40%, transparent), transparent 72%),
    linear-gradient(160deg, var(--ht-promo-d) 0%, color-mix(in srgb, var(--ht-promo) 46%, var(--ht-promo-d)) 100%);
  border: 1px solid color-mix(in srgb, var(--ht-promo-l) 42%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.ht-promo__art {
  position: absolute; z-index: -1; right: -22px; top: -26px; width: 104px; height: auto; display: block;
  transform: rotate(14deg); opacity: .85; pointer-events: none;
}
/* Переключатель «Специальный / Обычный» под заголовком владелец убрал
   (2026-10-12): заголовок, под ним сразу поле и «Применить». */
.ht-promo__title {
  margin: 0 0 12px; font-family: var(--f-cond); font-weight: 600; font-size: 19px; line-height: 1.1;
  letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
.ht-promo__form { display: flex; gap: 8px; }
.ht-promo__field { flex: 1; min-width: 0; display: block; }
.ht-promo__input {
  width: 100%; height: 42px; padding: 0 14px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(var(--ht-scrim), .55); color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .04em; outline: none;
  transition: border-color .15s;
}
.ht-promo__input::placeholder { color: rgba(255, 255, 255, .62); letter-spacing: 0; }
.ht-promo__input:focus { border-color: var(--lime); }
.ht-promo__apply {
  flex: none; height: 42px; padding: 0 16px; border-radius: 12px; background: var(--lime); color: #0B0B0E;
  font-family: var(--f-cond); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18); transition: filter .15s;
}
.ht-promo__apply:hover { filter: brightness(1.06); }
.ht-promo__apply:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ht-promo__apply:disabled { filter: none; opacity: .6; cursor: progress; }
.ht-promo__note { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: #E6F0FF; overflow-wrap: anywhere; }
.ht-promo__note:empty { display: none; }
/* ответ сервера (index.js): зачислено — лайм, отказ — светло-красный;
   оба читаются на синем фоне карточки */
.ht-promo__note.is-ok  { color: var(--lime); }
.ht-promo__note.is-bad { color: #FFB3B3; }
.ht-promo__login {
  padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ht-promo__login:hover { color: var(--lime); }
.ht-promo__login:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* ═══════════════ РЕЖИМЫ ИГР ═══════════════ */
.ht-sec { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ht-sec__ico {
  /* цветная сетка 2×2, как значок «Меню» на нижней полосе телефона;
     подложка — фиолетовая плашка вместо лаймовой */
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(138, 48, 245, .16); box-shadow: inset 0 0 0 1px rgba(190, 150, 255, .16);
}
.ht-sec__ico svg { width: 20px; height: 20px; }
.ht-sec__title {
  margin: 0; font-family: var(--f-cond); font-weight: 600; font-size: 20px; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; color: #fff;
}

/* Ряды по 240px; если в сетке есть плитки-креативы (8:3, .ht-cell--photo,
   сейчас сняты), первый ряд — по их высоте. Колонка главной шире общей
   (1520px), чтобы плитки и слайдер были крупнее. */
.ht-home .gg-page { max-width: 1560px; }
.ht-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 240px; gap: 16px;
}
.ht-grid:has(> .ht-cell--photo) { grid-template-rows: auto; }
.ht-cell { min-width: 0; }
.ht-cell--tall { grid-row: span 2; }
/* Контракты, «1 Клик» и HiLo — одной строкой, четвёртым рядом (просьба
   владельца 2026-10-15 — тогда третьим был «Апгрейд-батл»; 2026-10-25 он
   переехал на место HiLo под Кейс-батлами, HiLo — сюда): высокий
   Апгрейд 2 клетки + 10 карточек = 12 клеток, ровно 4 ряда по 3, без
   дыр. Поменяется число карточек — поменять и здесь.
   На ПК ряд — три равные трети, как и ряды выше: швы между плитками
   идут ровными столбцами через всю сетку (неравный 10 : 13 : 13 читался
   кирпичной кладкой). Строки «1 Клик» и Контрактов помещаются над артом
   в одну линию, настройки плиток на ПК — в @media ниже. Ряд чуть выше
   (272px): строка над головой террориста и плашка под колесом
   помещаются.
   В две колонки на 761–1000 «1 Клик» и HiLo — рядом, одной строкой под
   Miner | Контракты (6 ровных рядов), на ≤760 и телефоне — во всю
   ширину (.ht-cell--wide / --full в @media ниже). Граница ПК — 1000.02px, а не
   1001px: при дробной ширине (масштаб 150 % и т. п.) между 1000 и 1001
   не действовал ни один из запросов. */
@media (min-width: 1000.02px) {
  .ht-grid { grid-template-rows: repeat(3, 240px) 272px; }
}
/* Стримерский режим (drophub.streamer.js) прячет плитки рулетки, плинко,
   минёра, HiLo и краша — пять из одиннадцати. Жёсткие четыре ряда выше
   тогда оставались пустыми (владелец 2026-10-28: «куча пустого места»):
   рядов — сколько нужно, а «1 Клик» — во всю ширину последнего ряда.
   Остаются Апгрейд (2 клетки) + Кейсы, Кейс-батлы, Апгрейд-батл,
   Контракты = два полных ряда, без дыр. */
html.dh-streamer .ht-grid { grid-template-rows: none; }
html.dh-streamer .ht-grid > .ht-cell--wide { grid-column: 1 / -1; }

/* Цвет режима — тот же, что у его плитки в ряду разделов над страницей:
   одна игра читается одним цветом везде (таблица --ht-* в начале файла,
   классы .ht-t-* там же).

   Раньше все карточки были одного тёмно-фиолетового: 13 % цвета на
   сером, а справа чёрный фон арта. Теперь левая часть, где текст, —
   в глубоком тоне игры, к арту он сходит в подложку; сам арт не
   тонируется, только его чёрные углы притушены тем же тоном (::after),
   чтобы прямоугольник картинки не читался чёрной дырой. */
.ht-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  height: 100%; padding: 22px 22px 20px; border-radius: 16px; overflow: hidden; isolation: isolate;
  color: #fff; text-decoration: none;
  background:
    radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--g) 34%, transparent) 0%, transparent 70%),
    linear-gradient(120deg, var(--gd) 0%, color-mix(in srgb, var(--gd) 55%, var(--ht-surface)) 38%, var(--ht-surface) 72%);
  border: 1px solid color-mix(in srgb, var(--gl) 30%, var(--ht-line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .2s ease, border-color .2s;
}
.ht-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(78% 88% at 70% 50%, transparent 52%, color-mix(in srgb, var(--gd) 62%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--gd) 40%, transparent) 0%, transparent 34%);
}
.ht-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gl) 75%, var(--ht-line)); }
.ht-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* Арт режима справа и гаснет к тексту. У картинок своя неоновая рамка
   по краю кадра — scale(1.16) уводит её за обрез карточки. */
.ht-card__art {
  position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 70%; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 42%);
          mask: linear-gradient(90deg, transparent 0%, #000 42%);
}
.ht-card__art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.16); transition: transform .35s ease;
}
.ht-card:hover .ht-card__art img { transform: scale(1.22); }

/* высокая карточка: арт на всю ширину между заголовком и плашкой снизу,
   края по вертикали гаснут */
.ht-card--tall .ht-card__art {
  left: 0; width: auto; top: 16%; bottom: 8%;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 80%, transparent 100%);
}
.ht-card--tall::after {
  background:
    radial-gradient(80% 62% at 50% 54%, transparent 50%, color-mix(in srgb, var(--gd) 62%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--gd) 40%, transparent) 0%, transparent 24%);
}
.ht-card--tall .ht-card__art img { transform: scale(1.12); }
.ht-card--tall:hover .ht-card__art img { transform: scale(1.17); }
.ht-card--tall .ht-card__title { font-size: 34px; }

/* карточка со значком вместо арта: значок справа на пятне цвета (сейчас
   таких нет — «Контракты» с 2026-10-15 креатив, .ht-card--art ниже) */
.ht-card--icon {
  background:
    radial-gradient(42% 62% at 80% 52%, color-mix(in srgb, var(--gl) 34%, transparent) 0%, transparent 72%),
    radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--g) 34%, transparent) 0%, transparent 70%),
    linear-gradient(120deg, var(--gd) 0%, color-mix(in srgb, var(--gd) 55%, var(--ht-surface)) 38%, var(--ht-surface) 72%);
}
.ht-card--icon::after { background: linear-gradient(0deg, color-mix(in srgb, var(--gd) 40%, transparent) 0%, transparent 34%); }
.ht-card--icon .ht-card__art {
  top: 50%; bottom: auto; right: 7%; width: 34%; max-width: 150px; overflow: visible;
  transform: translateY(-50%); -webkit-mask: none; mask: none;
}
.ht-card--icon .ht-card__art img { height: auto; object-fit: contain; transform: rotate(-6deg); }
.ht-card--icon:hover .ht-card__art img { transform: rotate(-2deg) scale(1.06); }

/* широкая карточка: арт — свой SVG (был у «1 Клик», дуга колеса),
   целиком, прижат вправо; без увеличения — у него нет рамки по краю
   кадра, которую надо прятать. С 2026-10-15 обе широкие («1 Клик»,
   «Апгрейд-батл») — креативы: их арт задаёт .ht-card--art ниже. */
.ht-card--wide .ht-card__art {
  width: 64%;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 34%);
          mask: linear-gradient(90deg, transparent 0%, #000 34%);
}
.ht-card--wide .ht-card__art img { object-fit: contain; object-position: right center; transform: none; transform-origin: 72% 0; }
.ht-card--wide:hover .ht-card__art img { transform: scale(1.04); }
.ht-card__badge.ht-card__badge--new { background: var(--lime); color: #12140A; box-shadow: 0 0 14px rgba(215, 255, 0, .35); }

/* Карточки с креативами (.ht-card--art): Рулетка, Crash, Miner — с
   2026-10-14; Кейсы, Кейс-батлы, Plinko, Контракты, 1 Клик, Апгрейд-батл,
   новый Miner (miner-v3), а затем Апгрейд и HiLo — с 2026-10-15, по
   аналогии с ними. Старого арта в сетке больше нет.
   Арт на прозрачном фоне (*-v2-*.webp, miner-v3) — во всю карточку,
   прижат вправо-вниз (персонажи обрезаны снизу — стоят от края), без
   затемнения углов поверх (::after) — владелец просил убрать цвет перед
   артом; слева арт гаснет под текст. Тень и ореол (--art-glow) отделяют
   арт от фона. Ручки на плитку: --art-k — масштаб, растёт от точки
   --art-o; --art-p — куда арт прижат (object-position); --art-m — маска
   (где арт гаснет); --art-l — левый край поля арта (по умолчанию 0 — вся
   карточка): у узкой плитки арт в поле меньше и сам уменьшается, а не
   заезжает под текст.
   Фон — не плоский цвет игры из таблицы --ht-*, а своя сцена, в тон
   арта и соседей по сетке: подсветка за персонажем, отсвет у главного
   предмета, низ темнее; на прежних плоских фонах арт смотрелся
   наклейкой. Соседи на ПК (с 2026-10-25): Апгрейд (сапфир) | Кейсы |
   Кейс-батлы, ниже Апгрейд-батл (графит) | Plinko; Рулетка | Crash |
   Miner; Контракты | 1 Клик | HiLo (зелёное сукно). Рядом не стоят два
   одинаковых тона ни на ПК, ни в две колонки (≤1000, телефон); ближе
   всех — бирюзовый Miner над зелёным HiLo на ПК. */
.ht-card--art { --art-k: 1; --art-o: right bottom; --art-p: right bottom; }
.ht-card--art::after { background: none; }
.ht-card--art .ht-card__art {
  left: var(--art-l, 0); width: auto;
  -webkit-mask: var(--art-m, linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, #000 46%));
          mask: var(--art-m, linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, #000 46%));
}
.ht-card--art .ht-card__art img {
  object-fit: contain; object-position: var(--art-p);
  transform: scale(var(--art-k)); transform-origin: var(--art-o);
  filter: drop-shadow(0 12px 20px rgba(6, 3, 16, .65)) drop-shadow(0 0 22px var(--art-glow));
}
.ht-card--art:hover .ht-card__art img { transform: scale(calc(var(--art-k) + .04)); }
.ht-card--art .ht-card__title { text-shadow: 0 2px 10px rgba(0, 0, 0, .6), 0 0 18px var(--art-glow); }
.ht-card.ht-card--art:hover { border-color: var(--edge-hi); }

/* Рулетка: квадратный арт (боец над колесом) справа; крупнее на 12 % —
   растёт вниз (низ колеса за край), шлем сверху не срезается. Малиновый
   в тон её неона, золотой отсвет у колеса. */
.ht-card.ht-t-roll {
  --art-k: 1.12; --art-o: 96% 12%; --art-glow: rgba(236, 72, 153, .45); --edge-hi: rgba(249, 168, 212, .7);
  border-color: rgba(244, 114, 182, .38);
  background:
    radial-gradient(30% 50% at 76% 62%, rgba(251, 191, 36, .16) 0%, transparent 70%),
    radial-gradient(55% 85% at 72% 58%, rgba(219, 39, 119, .55) 0%, rgba(190, 24, 93, .16) 55%, transparent 76%),
    radial-gradient(70% 70% at 0% 0%, rgba(219, 39, 119, .32) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(10, 2, 10, .55) 100%),
    linear-gradient(118deg, #3D0C2F 0%, #270A22 40%, #170618 72%);
}
/* Crash: арт 2:1 чуть крупнее (от правого нижнего угла: граната справа
   не срезается, уходит только дым слева); лаймовый отсвет у гранаты. */
.ht-card.ht-t-crash {
  --art-k: 1.13; --art-o: right bottom; --art-glow: rgba(167, 139, 250, .5); --edge-hi: rgba(196, 181, 253, .7);
  border-color: rgba(167, 139, 250, .38);
  background:
    radial-gradient(26% 38% at 91% 30%, rgba(215, 255, 0, .22) 0%, transparent 70%),
    radial-gradient(55% 80% at 64% 62%, rgba(139, 92, 246, .6) 0%, rgba(124, 58, 237, .16) 55%, transparent 76%),
    radial-gradient(70% 70% at 0% 0%, rgba(124, 58, 237, .38) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(5, 2, 14, .55) 100%),
    linear-gradient(118deg, #24104C 0%, #170B33 40%, #0E0720 72%);
}
/* Miner (miner-v3, 2026-10-15): арт 12:7 целиком (шлем сверху у края —
   без увеличения; при наведении растёт вниз, от правого верхнего угла,
   иначе срезался шлем), слева сверху у арта пусто — там текст; лаймовый
   отсвет у бомбы-черепа. Фон — тёмная бирюза (цвет Miner, глубже):
   индиго рядом с фиолетовым Crash сливался, на бирюзе тёмно-синяя форма
   и лайм ярче. */
.ht-card.ht-t-miner {
  --art-o: right top; --art-glow: rgba(45, 212, 191, .35); --edge-hi: rgba(94, 234, 212, .7);
  border-color: rgba(45, 212, 191, .38);
  background:
    radial-gradient(24% 40% at 85% 74%, rgba(215, 255, 0, .2) 0%, transparent 70%),
    radial-gradient(55% 85% at 66% 46%, rgba(13, 148, 136, .5) 0%, rgba(15, 118, 110, .16) 55%, transparent 76%),
    radial-gradient(70% 70% at 0% 0%, rgba(45, 212, 191, .22) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(2, 10, 12, .55) 100%),
    linear-gradient(118deg, #08363A 0%, #082A2E 40%, #061B1F 72%);
}

/* Кейсы: боец на кейсе DropHub, арт почти квадратный — справа; крупнее
   на 8 %, растёт влево и вниз (низ кейса за край), шлем не срезается,
   правая перчатка не уходит за край. Фиолетовый бренда, но пурпурнее
   Crash (они не соседи); лаймовый отсвет у «D». */
.ht-card.ht-t-cases {
  --art-k: 1.08; --art-o: right top; --art-glow: rgba(168, 85, 247, .42); --edge-hi: rgba(216, 180, 254, .7);
  border-color: rgba(192, 132, 252, .36);
  background:
    radial-gradient(22% 34% at 77% 84%, rgba(215, 255, 0, .16) 0%, transparent 70%),
    radial-gradient(50% 85% at 76% 50%, rgba(147, 51, 234, .55) 0%, rgba(126, 34, 206, .16) 55%, transparent 76%),
    radial-gradient(70% 70% at 0% 0%, rgba(147, 51, 234, .34) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(8, 3, 18, .55) 100%),
    linear-gradient(118deg, #2C0F58 0%, #1D0B3D 40%, #120726 72%);
}
/* Кейс-батлы: двое у весов — арт шире карточки, поэтому мельче (0.84)
   и от правого нижнего угла: слева над бойцом — название, справа над
   террористом — LIVE. Поле арта — не шире 400px (--art-l): на широкой
   плитке (1440, 1920) арт рос с карточкой, и поднятый кулак бойца
   ложился на строку («…против игроков»). Огонь батлов, тёмный; золотой
   отсвет у весов. */
.ht-card.ht-t-battles {
  --art-k: .84; --art-l: max(0px, calc(100% - 400px)); --art-glow: rgba(249, 115, 22, .4); --edge-hi: rgba(253, 186, 116, .7);
  border-color: rgba(251, 146, 60, .36);
  background:
    radial-gradient(22% 40% at 60% 46%, rgba(251, 191, 36, .2) 0%, transparent 70%),
    radial-gradient(60% 85% at 62% 58%, rgba(234, 88, 12, .44) 0%, rgba(194, 65, 12, .14) 55%, transparent 76%),
    radial-gradient(70% 70% at 0% 0%, rgba(234, 88, 12, .3) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(14, 4, 2, .55) 100%),
    linear-gradient(118deg, #3D1608 0%, #29100A 40%, #190A0A 72%);
}
/* Plinko: девушка у доски — справа целиком. Поле арта — правее строки
   и плашки (от 172px): в широкой плитке арт почти во всю высоту, чем
   уже плитка (1250, 1100) — тем он меньше, но девушка не заходит под
   «Шарик по пирамиде», а туфли — под плашку «16 рядов · 10 шаров»; под
   текстом её нет. Поле обрезает ореол девушки (overflow) — край поля
   гаснет на первых 18px, иначе вдоль неё шёл прямой вертикальный стык;
   арт на 4 % мельче — девушка дальше от этого края.
   Орхидея (фуксия Plinko, глубже): сиреневая блузка и лайм на ней
   читаются; золотой отсвет у штырьков. Малиновая рулетка — не соседка. */
.ht-card.ht-t-plinko {
  --art-l: max(172px, calc(100% - 305px)); --art-k: .96;
  --art-m: linear-gradient(90deg, transparent 0, #000 18px);
  --art-glow: rgba(217, 70, 239, .38); --edge-hi: rgba(240, 171, 252, .7);
  border-color: rgba(232, 121, 249, .34);
  background:
    radial-gradient(24% 36% at 80% 48%, rgba(251, 191, 36, .14) 0%, transparent 70%),
    radial-gradient(55% 85% at 72% 52%, rgba(192, 38, 211, .5) 0%, rgba(162, 28, 175, .16) 55%, transparent 76%),
    radial-gradient(70% 70% at 0% 0%, rgba(192, 38, 211, .3) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(12, 2, 14, .55) 100%),
    linear-gradient(118deg, #380B3E 0%, #26092B 40%, #17061B 72%);
}
/* Контракты: три ствола → контракт с печатью → M4. Арт втрое шире
   высоты — мельче (0.9), справа и чуть выше низа: между строкой и
   плашкой «Возврат 94%», пистолет плашкой не закрыт; под текстом арта
   нет — маска мягче, стволы на входе не гаснут. Поле арта — не шире
   410px (--art-l): на 1440/1920 арт рос с плиткой, приклад АК упирался
   в строку, глушитель — в плашку. Сцена — холодная ночная синева: в две
   колонки (≤1000, телефон) под орхидеей Plinko и фиолетовым Crash
   индиго читалось третьей фиолетовой плиткой подряд. На ней оба
   свечения арта: фиолет у стволов на входе, лайм у M4 на выходе (без
   него синий M4 тонул в синем фоне). */
.ht-card.ht-t-contract {
  --art-k: .9; --art-p: right 66%; --art-l: max(0px, calc(100% - 410px)); --art-glow: rgba(129, 140, 248, .34);
  --art-m: linear-gradient(90deg, rgba(0, 0, 0, .6) 0%, #000 30%); --edge-hi: rgba(147, 197, 253, .7);
  border-color: rgba(96, 165, 250, .32);
  background:
    radial-gradient(28% 45% at 84% 66%, rgba(163, 230, 53, .2) 0%, transparent 70%),
    radial-gradient(28% 50% at 34% 74%, rgba(147, 51, 234, .3) 0%, transparent 70%),
    radial-gradient(45% 70% at 56% 70%, rgba(37, 99, 235, .3) 0%, transparent 72%),
    radial-gradient(70% 70% at 0% 0%, rgba(59, 130, 246, .24) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(2, 5, 14, .55) 100%),
    linear-gradient(118deg, #13204A 0%, #0F1940 40%, #0B1230 72%);
}
/* 1 Клик (во всю ширину на ≤760 и телефоне — это базовые правила; на
   761–1000 — рядом с Апгрейд-батлом, на ПК — в ряду с Контрактами, см.
   @media ниже): террорист с колесом ×100 — справа во всю высоту
   (балаклава у верхнего края, низ колеса за краем; при наведении растёт
   вниз — от правого верхнего угла, балаклава не срезается). Золото
   «клетки ×100» — только светом: узкий ореол за головой террориста и
   отсвет у ×100; основа — тёмное вино (#2C0B1E → #150818), за террористом
   — малиновое свечение, в углу под названием — слабый малиновый, за
   колесом — фиолет его сегментов. Тёплая «слива» #211516 с широким
   янтарным ореолом на деле была кофейно-коричневой (оттенок 3–15°,
   насыщенность ≈0,25) — единственная грязная по цвету плитка в сетке;
   ещё раньше — сплошная охра и жёлтый угол (горчица). С винной основой
   золото колеса и ×100 горит на ней, а не тонет. */
.ht-card.ht-t-oneclick {
  --art-o: right top; --art-glow: rgba(250, 204, 21, .3); --edge-hi: rgba(253, 224, 71, .7);
  border-color: rgba(250, 204, 21, .32);
  background:
    radial-gradient(16% 40% at 80% 34%, rgba(250, 204, 21, .26) 0%, transparent 70%),
    radial-gradient(34% 90% at 80% 92%, rgba(168, 85, 247, .45) 0%, transparent 72%),
    radial-gradient(16% 70% at 70% 40%, rgba(251, 191, 36, .3) 0%, rgba(245, 158, 11, .08) 60%, transparent 76%),
    radial-gradient(50% 100% at 72% 60%, rgba(190, 24, 93, .24) 0%, transparent 74%),
    radial-gradient(40% 90% at 0% 0%, rgba(225, 29, 72, .14) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(8, 3, 10, .55) 100%),
    linear-gradient(110deg, #2C0B1E 0%, #1F0A1B 42%, #150818 78%);
}
/* Апгрейд-батл — обычной клеткой под Кейс-батлами, рядом с Plinko
   (просьба владельца 2026-10-25; раньше — в нижнем ряду с Контрактами
   и «1 Клик», а на ≤760 — во всю ширину, на его месте теперь HiLo).
   Спецназовец и террорист по сторонам кольца, обрезаны снизу (ремни,
   низ кольца). Строка над артом во всю ширину — две строки ровно,
   «Новинка» над террористом; арт под строкой. Поле арта начинается
   выше картинки (padding-top: картинка стоит там же, а её свечению
   сверху есть место — иначе над головами шла прямая линия обреза
   свечения). Телефон — в @media (max-width: 600px) ниже.
   Фон — их поединок, но цвет только светом у арта: лайм за
   спецназовцем и у кольца, фиолет за террористом и правее. Основа
   почти нейтральная — ночной графит-индиго в тон подложки страницы,
   угол под названием — индиго: сплошной затемнённый лайм, лаймовый
   угол и широкий лаймовый ореол на графите читались хаки, оливковым
   «болотом». */
.ht-card.ht-t-upbattle {
  --art-l: 14px; --art-p: right top; --art-o: 50% 0; --art-glow: rgba(190, 242, 100, .24); --edge-hi: rgba(217, 249, 157, .7);
  --art-m: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, #000 30%);
  border-color: rgba(190, 242, 100, .3);
  background:
    radial-gradient(14% 26% at 61% 76%, rgba(215, 255, 0, .2) 0%, transparent 70%),
    radial-gradient(30% 56% at 90% 60%, rgba(147, 51, 234, .5) 0%, transparent 72%),
    radial-gradient(26% 50% at 34% 62%, rgba(163, 230, 53, .26) 0%, transparent 72%),
    radial-gradient(60% 60% at 0% 0%, rgba(99, 102, 241, .2) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(4, 4, 8, .55) 100%),
    linear-gradient(110deg, #19182E 0%, #141327 40%, #0F0F1C 70%, #1A0E33 100%);
}
.ht-card.ht-t-upbattle .ht-card__art { top: 66px; padding-top: 28px; bottom: -24px; }
.ht-t-upbattle .ht-card__head { max-width: 100%; }
.ht-t-upbattle .ht-card__line { text-wrap: balance; }

/* Апгрейд (высокая, upgrade-v2, 2026-10-15): девушка держит обычный АК и
   золотой, над ними лаймовая стрелка. Арт во всю ширину под названием
   (поле — от 60px сверху): стрелка и волосы не под «АПГРЕЙД», оба АК
   целые; низ поля за краем карточки — на ПК подошвы ботинок за обрезом,
   на узкой плитке (1250) арт по ширине и опущен (--art-p 40 %), целиком.
   Поле арта начинается на 30px выше картинки (padding-top: картинка там
   же, под названием), чтобы её свечению сверху было место — иначе над
   волосами через всю плитку шла прямая линия обреза. При наведении
   растёт вниз, от верха (--art-o) — макушка и стрелка не срезаются, уходят
   только ботинки. Левый край чуть приглушён (--art-m) — АК слева не гаснет.
   Сцена — сапфир, синий цвет Апгрейда на сайте, глубже: фиолетовый
   комбинезон, лайм стрелки и золото АК на нём читаются, а с фиолетовыми
   Кейсами справа и малиновой Рулеткой снизу плитка не сливается.
   Ореол за девушкой голубой, отсветы — лаймовый под стрелкой,
   фиолетовый у обычного АК, золотой у золотого, внизу фиолетовый
   «подиум» под ногами. */
.ht-card.ht-t-upgrade {
  --art-p: 50% 40%; --art-o: 50% 0;
  --art-m: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, #000 34%);
  --art-glow: rgba(96, 165, 250, .34); --edge-hi: rgba(147, 197, 253, .7);
  border-color: rgba(96, 165, 250, .34);
  background:
    radial-gradient(30% 12% at 60% 15%, rgba(215, 255, 0, .2) 0%, transparent 70%),
    radial-gradient(26% 13% at 80% 29%, rgba(251, 191, 36, .26) 0%, transparent 70%),
    radial-gradient(26% 13% at 19% 29%, rgba(168, 85, 247, .36) 0%, transparent 70%),
    radial-gradient(48% 36% at 50% 40%, rgba(96, 165, 250, .44) 0%, rgba(59, 130, 246, .14) 55%, transparent 76%),
    radial-gradient(62% 20% at 50% 100%, rgba(139, 92, 246, .42) 0%, transparent 72%),
    radial-gradient(80% 36% at 0% 0%, rgba(59, 130, 246, .3) 0%, transparent 70%),
    linear-gradient(180deg, transparent 64%, rgba(3, 6, 20, .5) 100%),
    linear-gradient(160deg, #132A66 0%, #0E1D4C 40%, #0A1437 72%);
}
.ht-card.ht-t-upgrade .ht-card__art { top: 30px; padding-top: 30px; bottom: -40px; left: 10px; right: 10px; }

/* HiLo (hilo-v2, 2026-10-15): девушка с двумя картами, за столом
   спецназовец и террорист, над ними ▲ и ▼. Арт справа, поле — правее
   суммы банка (--art-l 110px): волосы девушки не под «БАНК РАУНДА» и на
   узкой плитке; от правого верхнего угла чуть крупнее (низ стола и
   ботинки — за краем). Картинка — с 46px сверху: ▼ ниже LIVE на любой
   ширине (на 1100–1250 и 601–800 бейдж закрывал его верх); поле — выше
   (padding-top), свечению значков сверху есть место. Левый край поля
   гаснет на первых 28px (--art-m), как у Plinko: колено девушки не
   срезано ровной вертикалью, лицо — почти в полную яркость (под ним
   текста нет). Сцена — зелёное сукно игрового
   стола: зелёный в сетке больше не повторяется (бирюзовый Miner над ним
   на ПК — другой оттенок, синее и темнее); на нём тёмно-синий спецназ и
   фиолет девушки яркие. Баннер во всю ширину на телефоне — в
   @media (max-width: 600px) ниже.
   Тёплый отсвет лампы над столом, лаймовый у ▲, фиолетовый у ▼. */
.ht-card.ht-t-hilo {
  --art-k: 1.08; --art-l: 110px; --art-o: right top; --art-p: right top;
  --art-m: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .8) 28px, #000 36%);
  --art-glow: rgba(52, 211, 153, .3); --edge-hi: rgba(110, 231, 183, .7);
  border-color: rgba(52, 211, 153, .34);
  background:
    radial-gradient(14% 26% at 68% 30%, rgba(215, 255, 0, .22) 0%, transparent 70%),
    radial-gradient(14% 26% at 87% 33%, rgba(168, 85, 247, .32) 0%, transparent 70%),
    radial-gradient(34% 44% at 58% 76%, rgba(251, 191, 36, .16) 0%, transparent 70%),
    radial-gradient(56% 85% at 64% 56%, rgba(16, 185, 129, .42) 0%, rgba(5, 150, 105, .14) 55%, transparent 76%),
    radial-gradient(70% 70% at 0% 0%, rgba(16, 185, 129, .24) 0%, transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(2, 10, 7, .55) 100%),
    linear-gradient(118deg, #0B3A2B 0%, #082A20 40%, #061B16 72%);
}
.ht-card.ht-t-hilo .ht-card__art { top: 24px; padding-top: 22px; bottom: -20px; }

/* ПК и две колонки на 761–1000: «1 Клик» — не во всю ширину, а клеткой
   ряда (на ПК — треть рядом с Контрактами и HiLo, ≈456×272 на 1440; на
   761–1000 — половина, рядом с HiLo под Miner | Контракты, см.
   @media (min-width: 761px) and (max-width: 1000px) ниже): строка над
   артом, арт под ней — колесо целиком, от «D» до ×100, голова
   террориста ниже строки (строка в одну линию — во всю ширину), рука с
   большим пальцем выше плашки; при наведении арт растёт вниз, от верха
   (балаклава не срезается). Поле арта начинается выше картинки
   (padding-top), как у Апгрейд-батла.
   Фон — та же сцена, свет переставлен под новое место персонажа:
   основа — тёмное вино, узкий золотой ореол за головой террориста и
   отсвет у ×100, малиновое свечение за ним, фиолет под колесом (тёплая
   «слива» с широким янтарным ореолом читалась кофейно-коричневой
   плитой). */
@media (min-width: 761px) {
  .ht-card.ht-t-oneclick {
    --art-p: right bottom; --art-o: right top;
    background:
      radial-gradient(14% 22% at 69% 64%, rgba(250, 204, 21, .3) 0%, transparent 70%),
      radial-gradient(38% 46% at 72% 98%, rgba(168, 85, 247, .5) 0%, transparent 72%),
      radial-gradient(18% 36% at 47% 44%, rgba(251, 191, 36, .34) 0%, rgba(245, 158, 11, .08) 60%, transparent 76%),
      radial-gradient(60% 90% at 64% 60%, rgba(190, 24, 93, .26) 0%, transparent 74%),
      radial-gradient(55% 60% at 0% 0%, rgba(225, 29, 72, .16) 0%, transparent 70%),
      linear-gradient(180deg, transparent 60%, rgba(8, 3, 10, .55) 100%),
      linear-gradient(118deg, #2C0B1E 0%, #1F0A1B 42%, #150818 78%);
  }
  .ht-card.ht-t-oneclick .ht-card__art { top: 56px; padding-top: 28px; bottom: -4px; }
  .ht-t-oneclick .ht-card__head { max-width: 100%; }
}
@media (min-width: 1000.02px) {
  .ht-t-contract .ht-card__head { max-width: 100%; }
}

/* Карточка-плитка с готовой картинкой (assets/tiles/*: «Кейсы»,
   «Кейс-батлы»): картинка во всю карточку без маски к тексту — сцена
   цельная. Текст читается за счёт затемнения сверху (заголовок) и снизу
   (плашка); середина, где персонажи, открыта. */
.ht-card--photo .ht-card__art {
  left: 0; width: auto; top: 0; bottom: 0;
  -webkit-mask: none; mask: none;
}
/* ячейка плитки — ровно в пропорции креатива 8:3: картинка видна целиком,
   без обрезки и без увеличения */
.ht-cell--photo { aspect-ratio: 8 / 3; }
.ht-card--photo .ht-card__art img { object-position: center; transform: none; }
.ht-card--photo:hover .ht-card__art img { transform: none; }
/* затухание слева под текстом (сходит к середине — персонажи справа
   остаются яркими) + лёгкое сверху и снизу */
.ht-card--photo::after {
  background:
    linear-gradient(90deg, rgba(14, 9, 30, .88) 0%, rgba(14, 9, 30, .62) 24%, rgba(14, 9, 30, .22) 44%, transparent 58%),
    linear-gradient(180deg, rgba(14, 9, 30, .5) 0%, transparent 32%, transparent 70%, rgba(14, 9, 30, .5) 100%);
}
.ht-card--photo .ht-card__head { max-width: 72%; }

.ht-card__head { position: relative; display: flex; flex-direction: column; gap: 6px; max-width: 58%; min-width: 0; }
.ht-card__title {
  font-family: var(--f-cond); font-weight: 600; font-size: 26px; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.ht-card__line { font-size: 13px; font-weight: 500; line-height: 1.35; color: #DCD8F0; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
/* банк: сумма, под ней подпись — в строку подпись наезжала на арт */
.ht-card__line--bank { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ht-card__line--bank b {
  font-family: var(--f-cond); font-size: 20px; font-weight: 600; color: var(--money);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ht-card__line--bank i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #D6D2EE; }

/* LIVE — красный, но на тон темнее: белый мелкий текст 4.8:1 (было 4.4) */
.ht-card__badge {
  position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; background: #DC2626; color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* плашка внизу: индиго подложки, обводка в тоне игры */
.ht-card__meta {
  position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  height: 28px; padding: 0 11px; border-radius: 14px;
  background: rgba(var(--ht-scrim), .72); border: 1px solid color-mix(in srgb, var(--gl) 30%, transparent);
  font-size: 12.5px; font-weight: 600; color: #E6E3F7; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ht-card__meta[hidden] { display: none; }
.ht-card__meta > span { overflow: hidden; text-overflow: ellipsis; }

/* Единственная бесконечная анимация страницы — точка «сейчас играют».
   Только opacity: её считает композитор, страница не перерисовывается. */
.ht-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--money); animation: ht-blink 1.6s ease-in-out infinite; }
@keyframes ht-blink { 50% { opacity: .3; } }

/* Live-ставки ниже первого экрана: пока не доскроллили, браузер их не
   раскладывает и не рисует, хотя лента ставок обновляется каждые пару
   секунд. Во всю ширину: карточки «Награды» / «Играй бесплатно» справа
   владелец убрал (2026-10-14; сетка в home.css — общая с колонкой 440px). */
.ht-home .gg-bets { grid-template-columns: minmax(0, 1fr); content-visibility: auto; contain-intrinsic-size: auto 430px; }
/* content-visibility включает paint-containment: всё, что рисуется за краем
   секции, срезается — красное свечение точки «Live» слева выглядело
   обрезанным. Запас по бокам внутри секции, снаружи он гасится отрицательным
   отступом — раскладка не меняется. */
.ht-home .gg-bets { padding-inline: 12px; margin-inline: -12px; }
/* высоту ленты раньше задавали карточки справа (список — flex: 1 по их
   высоте); без них — 8 строк, как на узком экране (home.css) */
.ht-home .gg-bets__list { flex: none; height: calc(8 * 52px + 7 * 4px); }

/* ═══════════════ АДАПТИВ ═══════════════ */

/* 601–1000: слайдер во всю ширину, под ним одна строка — две маленькие
   карточки и промокод; сетка режимов в две колонки. */
@media (max-width: 1000px) {
  .ht-head { grid-template-columns: minmax(0, 1fr); }
  .ht-slider { align-self: auto; }
  .ht-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto; }
  .ht-mini { min-height: 150px; }
  /* две колонки: плитки-креативы — баннерами во всю ширину и первыми;
     ряды по содержимому, высота обычной карточки — у ячейки */
  .ht-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; grid-auto-flow: row dense; }
  .ht-cell { height: 210px; }
  .ht-cell--tall { height: auto; }
  .ht-cell--photo { height: auto; grid-column: 1 / -1; order: -1; }
  /* широкие («1 Клик», HiLo) — той же высоты, что и ряды
     (210px): при 160px арт был в треть высоты, «1 Клик» — пустая полоса
     с картинкой в углу. Во всю ширину — только на ≤760: на 761–1000 они
     рядом, обычными клетками (@media ниже) */
  .ht-cell--wide, .ht-cell--full { height: 210px; grid-column: 1 / -1; }
  .ht-slide__title { font-size: 34px; }
  /* креативы: карточка ниже (210px), а широкие арты растут с её шириной —
     двое у весов и стволы контракта заезжали под название и строку;
     мельче и от низа, поле арта — снова вся карточка */
  .ht-card.ht-t-battles { --art-k: .74; --art-l: 0; }
  .ht-card.ht-t-contract { --art-k: .8; --art-p: right bottom; --art-l: 0; }
}

/* 761–1000: «1 Клик» и HiLo — рядом, одной строкой под Miner |
   Контракты, а не двумя баннерами во всю ширину (там арт занимал
   правые ~40 %, слева — пустая полоса, а сетка выходила в 7 рядов с
   разной шириной). Теперь 6 ровных рядов по две клетки, без дыр. Арт,
   строка и фон «1 Клик» — как на ПК (@media (min-width: 761px) выше),
   только карточка ниже (210px, а не 272px) — арт начинается выше. На
   ≤760 клетка уже (≈350px): плашка ложилась на колесо — там снова во
   всю ширину. На 761–900 клетка 353–412px: арт на 10 % мельче, к
   правому нижнему углу — балаклава не упирается в строку.
   Апгрейд-батл на 601–1000 — тоже в клетке 210px: арт выше, на
   601–900 на 10 % мельче — шлем не упирается в строку, плашка «1 на 1»
   не закрывает спецназовца по грудь. */
@media (min-width: 761px) and (max-width: 1000px) {
  .ht-cell--wide, .ht-cell--full { grid-column: auto; }
  .ht-card.ht-t-oneclick .ht-card__art { top: 44px; padding-top: 20px; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .ht-card.ht-t-upbattle .ht-card__art { top: 60px; padding-top: 20px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .ht-card.ht-t-oneclick { --art-k: .9; --art-o: right bottom; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .ht-card.ht-t-upbattle { --art-k: .9; --art-o: right bottom; }
}
/* 601–650: клетка 281–305px — название чуть мельче (иначе «БАТЛ» уходит
   под «Новинку»), строка в три линии — арт ниже, шлем не под ней */
@media (min-width: 601px) and (max-width: 650px) {
  .ht-t-upbattle .ht-card__title { font-size: 23px; }
  .ht-card.ht-t-upbattle .ht-card__art { top: 74px; }
}

/* ≤760: ряда разделов нет (mobile.css), колонка начинается под шапкой;
   промокод уходит на свою строку. */
@media (max-width: 760px) {
  .ht-page { margin-top: 12px; gap: 22px; }
  .ht-side { grid-template-columns: minmax(0, 1fr); }
  .ht-mini { min-height: 112px; }
}

/* 601–760 (планшет, две колонки).
   «КЕЙС-БАТЛЫ» на 601–650 переносилось («КЕЙС-» / «БАТЛЫ»): строка
   58 % ≈ 137px, слову нужно 145px — даём 66 %, до LIVE остаётся > 40px,
   арт ниже названия. */
@media (min-width: 601px) and (max-width: 760px) {
  .ht-card.ht-t-battles .ht-card__head { max-width: 66%; }
}

/* ≤600: слайдер выше пропорцией и с мелким текстом; «Розыгрыши» и
   «Бонусы» — две равные колонки во всю ширину, без боковой прокрутки;
   сетка в две колонки с плотными зазорами. */
@media (max-width: 600px) {
  .ht-head { gap: 10px; }
  .ht-slider { aspect-ratio: 16 / 10; border-radius: 16px; }
  .ht-slide { padding: 16px 16px 34px; align-items: flex-end; }
  .ht-slide::before {
    background:
      linear-gradient(0deg, rgba(12, 11, 19, .9) 0%, rgba(12, 11, 19, .55) 45%, transparent 75%),
      linear-gradient(90deg, rgba(12, 11, 19, .7) 0%, transparent 70%);
  }
  .ht-slide__copy { gap: 7px; max-width: 78%; }
  /* кадр 16:10 вырезает середину креатива — сдвигаем к героям */
  .ht-slide--rewards .ht-slide__bg { object-position: 74% 50%; }
  .ht-slide--upgrade .ht-slide__bg { object-position: 70% 50%; }
  .ht-slide--earn .ht-slide__bg { object-position: 64% 50%; }
  .ht-slide__title { font-size: 24px; }
  .ht-slide__sub {
    font-size: 12.5px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ht-btn { height: 34px; padding: 0 14px; font-size: 12px; margin-top: 2px; }
  .ht-slider__dots { bottom: 4px; }

  /* «Розыгрыши» и «Бонусы» — две равные колонки во всю ширину. Раньше
     это была лента с прокруткой вбок (карточка 64 % ширины), и «Бонусы»
     обрезались правым краем экрана — владелец принял это за поломку
     вёрстки. Теперь обе видны целиком на 320–600px; арт мельче и прижат
     в правый нижний угол, текст сверху слева над ним. */
  .ht-side { gap: 10px; }
  .ht-side__minis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ht-mini { min-width: 0; min-height: 104px; padding: 12px 12px 10px; border-radius: 16px; gap: 3px; }
  .ht-mini__title { font-size: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ht-mini__sub { font-size: 11.5px; line-height: 1.3; max-width: 100%; }
  .ht-mini__go { display: none; }
  .ht-mini__art { width: 76px; right: -10px; bottom: -12px; }
  .ht-mini__art--coin  { width: 48px; right: 8px; bottom: 8px; }
  .ht-mini__art--coin2 { width: 28px; right: 50px; bottom: 10px; }

  .ht-promo { padding: 14px; border-radius: 16px; }
  .ht-promo__input { font-size: 16px; }   /* меньше 16px — iOS приближает страницу при фокусе */

  .ht-sec { margin-bottom: 10px; }
  .ht-sec__title { font-size: 17px; }
  .ht-grid { gap: 10px; }
  .ht-cell { height: 124px; }
  .ht-cell--tall, .ht-cell--photo { height: auto; }
  .ht-card { padding: 12px 12px 10px; border-radius: 14px; }
  .ht-card:hover { transform: none; }
  .ht-card__art { width: 74%; }
  /* креативы (рулетка, Miner): рулетка без увеличения — иначе колесо
     лезет под название; Miner прижат кверху — длинная плашка «Поле 5×5 ·
     до 24 мин» снизу закрывала бомбу */
  .ht-card.ht-t-roll { --art-k: 1; --art-o: right bottom; }
  .ht-card.ht-t-miner { --art-p: right top; }
  /* Новые креативы на телефоне (карточка ~166×124, строки нет — только
     название сверху и плашка снизу): арт между ними, плашка не ложится
     на главное. Кейсы — мельче к верху (плашка «45 кейсов от» закрывала
     «D» на кейсе); батлы — по центру по высоте (плашка закрывала бойца);
     Plinko — во всю карточку, без маски, но мельче к верху: пучок не
     под «PLINKO», туфли не под плашкой; контракт — во всю ширину по
     центру; «1 Клик» чуть мельче и от низа — рука не под плашкой, низ
     колеса за краем; Апгрейд-батл — во всю ширину между названием и
     плашкой, лица бойцов выше плашки. */
  .ht-card.ht-t-cases { --art-k: .8; --art-o: right top; }
  .ht-card.ht-t-battles { --art-k: .75; --art-o: right center; --art-p: right center; }
  .ht-card.ht-t-plinko { --art-l: 0; --art-k: .66; --art-o: right top; --art-m: none; }
  .ht-card.ht-t-contract { --art-k: 1; --art-p: right center; }
  .ht-card.ht-t-oneclick { --art-k: .92; --art-o: right bottom; }
  .ht-card.ht-t-upbattle { --art-l: 0; --art-k: 1; --art-p: center top; --art-o: center top; --art-m: none; }
  .ht-card.ht-t-upbattle .ht-card__art { top: 34px; padding-top: 0; bottom: 0; }
  .ht-t-upbattle .ht-card__head { max-width: 100%; }
  /* «Новинка» в клетке 143–200px садится на название — на телефоне без неё */
  .ht-t-upbattle .ht-card__badge { display: none; }
  /* Апгрейд — во всю ширину карточки сразу под названием (строки на
     телефоне нет), АК по краям целые. HiLo — баннер во всю ширину: арт
     справа, крупнее (низ стола за краем), с 28px сверху — ▼ ниже LIVE;
     слева суммы банка и плашки он не касается. */
  .ht-card.ht-t-upgrade { --art-p: 50% 0; }
  .ht-card.ht-t-upgrade .ht-card__art { top: 16px; padding-top: 20px; left: 0; right: 0; }
  .ht-card.ht-t-hilo { --art-k: 1.2; --art-l: 30%; --art-p: right top; --art-o: right top; }
  .ht-card.ht-t-hilo .ht-card__art { top: 28px; padding-top: 0; bottom: -14px; }
  /* отсветы ▲ и ▼ и сукна — у значков и стола на арте баннера (иначе
     лаймовое пятно висело над пустым фоном) */
  .ht-card.ht-t-hilo {
    background:
      radial-gradient(9% 22% at 79% 38%, rgba(215, 255, 0, .22) 0%, transparent 70%),
      radial-gradient(9% 22% at 93% 40%, rgba(168, 85, 247, .32) 0%, transparent 70%),
      radial-gradient(22% 44% at 76% 86%, rgba(251, 191, 36, .16) 0%, transparent 70%),
      radial-gradient(40% 90% at 76% 60%, rgba(16, 185, 129, .42) 0%, rgba(5, 150, 105, .14) 55%, transparent 76%),
      radial-gradient(50% 90% at 0% 0%, rgba(16, 185, 129, .24) 0%, transparent 70%),
      linear-gradient(180deg, transparent 60%, rgba(2, 10, 7, .55) 100%),
      linear-gradient(110deg, #0B3A2B 0%, #082A20 40%, #061B16 72%);
  }
  .ht-card__head { gap: 4px; max-width: 78%; }
  .ht-card__title { font-size: 17px; }
  .ht-card--tall .ht-card__title { font-size: 22px; }
  /* на телефоне под заголовком только банк — описание не влезает */
  .ht-card__line:not(.ht-card__line--bank) { display: none; }
  .ht-card__line--bank b { font-size: 15px; }
  .ht-card__line--bank i { display: none; }
  .ht-card__badge { top: 10px; right: 10px; height: 17px; padding: 0 6px; font-size: 8.5px; letter-spacing: .1em; }
  .ht-card__meta { height: 22px; padding: 0 8px; gap: 5px; border-radius: 11px; font-size: 11px; }
  .ht-dot { width: 6px; height: 6px; }
  .ht-card--icon .ht-card__art { width: 40%; right: 6%; }
  .ht-cell--wide, .ht-cell--full { height: 124px; }
  .ht-card--wide:not(.ht-card--art) .ht-card__art { width: 72%; }
}

/* Кто попросил меньше движения — без автопрокрутки (index.js), без
   переездов и мигания. */
@media (prefers-reduced-motion: reduce) {
  .ht-slider__track, .ht-card, .ht-mini, .ht-card__art img, .ht-mini__art { transition: none; }
  .ht-card:hover, .ht-mini:hover { transform: none; }
  .ht-dot { animation: none; }
}

/* Live ставки: круглая аватарка с висящим значком уровня (krazeLevel.player,
   home.gg.js). Размер круга — здесь (home.css правит другой агент): 32 px
   в строке 52 px; на телефоне 30 — кольцо не подходит к верхнему краю. */
.gg-bet__user .kz-ava { --a: 32px; }
@media (max-width: 760px) {
  .gg-bet__user .kz-ava { --a: 30px; }
}