/* ==========================================================================
   DropHub — общее оформление игровых страниц

   Общие для девяти игр вещи: скругление панелей, цвет денег, вид главной
   кнопки и сетка ставки скином.

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

   Семь игр из девяти (краш, коинфлип, минер, HiLo, апгрейд, трейд, плинко)
   не заводят своей палитры и берут --panel, --line, --radius и прочее из
   home.css. Достаточно задать общее правило здесь — и все семь переезжают
   разом, без единой правки в их собственных CSS.

   ЦВЕТА не переопределяются: палитра на весь сайт одна, из home.css.

   У рулетки и слота палитры свои (--z-*, --br-*, --yellow), они дописаны
   отдельными блоками в конце файла.

   Подключать после home.css и ПЕРЕД файлом самой игры: игра вправе
   перебить общее правило, а переменные всё равно наследуются.
   ========================================================================== */

.gm-body {
  /* Скругление как у панелей кейса — единственное, что игровые страницы
     переопределяют. */
  --radius:    14px;

  /* ---------- ПОЧЕМУ ЗДЕСЬ БОЛЬШЕ НЕТ ЦВЕТОВ ----------

     Тут лежала своя палитра: синеватые панели #12141D…#20273F, такие же
     рамки и холодный текст. Замысел был выровнять игры со страницей
     кейса, но вышло наоборот — игры разошлись со ВСЕМ остальным сайтом.
     Виднее всего это стало на выдвижном меню: одни и те же плитки на
     главной чёрные, а на любой игре синие, хотя это буквально один и тот
     же элемент, собранный одним и тем же скриптом.

     Цвета берутся из home.css. Одна палитра на весь сайт: панель, рамка и
     текст в игре ровно те же, что в шапке над ней. */
}

/* ─────────── панели ───────────
   Та же кромка и тень, что у кабинета и Market: на камуфляжном фоне
   тёмный блок без края читается пятном, а не блоком. */
.gm-body .cr-card,
.gm-body .cfl-card, .gm-body .cfl-feed, .gm-body .cfl-panel, .gm-body .cfl-stage,
/* .mn-panel здесь БЫЛ и убран: панель минера — полупрозрачный блок,
   оформлен в miner.css. */
.gm-body .mn-boardwrap, .gm-body .mn-feed, .gm-body .mn-stats,
/* .hl-left здесь БЫЛ и убран: колонка ставки в HiLo — раскладка, а не
   панель; своя рамка вокруг коробки ставки и плиток «выше/ниже» читалась
   вторым чёрным блоком за ними. */
.gm-body .hl-betsblock, .gm-body .hl-stats,
/* .up-tables здесь БЫЛ и убран. Это сетка раскладки, а не панель: она
   держит две панели с зазором между ними. Своя заливка того же цвета и без
   скругления закрашивала их скруглённые углы изнутри — панели выглядели
   обрубленными по квадрату, а у самой сетки торчали прямые углы. */
.gm-body .up-panel, .gm-body .up-hist,
.gm-body .tr-card,
/* .pl-card, .pl-panel и .pl-sums здесь БЫЛИ и убраны: панель плинко на
   десктопе без подложек — просили убрать фон, элементы лежат прямо на
   странице (на телефоне свой блок задаёт mobile.css). */
.gm-body .pl-feed {
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* ─────────── деньги ───────────
   Любая сумма на игровых страницах — зелёная, как кнопка пополнения.
   Раньше каждая игра красила свои числа сама: где-то золотом, где-то
   жёлтым акцентом, и одна и та же сумма меняла цвет при переходе. */
.gm-body .cf-bet__val, .gm-body .cr-cash__sum, .gm-body .mn-prize b,
.gm-body .hl-bank b, .gm-body .pl-win, .gm-body .up-sum,
.gm-body .tr-total b, .gm-body .cs-prize__sum {
  color: var(--money);
}

/* ─────────── кнопка действия ───────────
   Главное действие в игре — зелёное с тёмной подписью, как «Открыть» на
   кейсе. Лаймовый акцент остаётся у второстепенных кнопок. */
.gm-body .kz-btn--go,
.gm-body .cf-go, .gm-body .cr-go, .gm-body .mn-go,
.gm-body .hl-go, .gm-body .pl-go, .gm-body .up-go, .gm-body .tr-go {
  background: var(--money); color: #163712; border: 0;
}
.gm-body .kz-btn--go:hover:not([disabled]),
.gm-body .cf-go:hover:not([disabled]), .gm-body .cr-go:hover:not([disabled]),
.gm-body .mn-go:hover:not([disabled]), .gm-body .hl-go:hover:not([disabled]),
.gm-body .pl-go:hover:not([disabled]), .gm-body .up-go:hover:not([disabled]),
.gm-body .tr-go:hover:not([disabled]) { filter: brightness(1.06); }

/* ─────────── рулетка ───────────
   У неё свои имена переменных (--border, --gray-btn) — заполняем их
   значениями общей палитры, разметку не трогаем. Синие оттенки, стоявшие
   здесь раньше, красили в том числе выдвижное меню: один и тот же список
   разделов был чёрным на главной и синим на рулетке. */
.gm-body.cf-body {
  --panel:    #0A0A0B;
  --border:   #1E2023;
  --gray-btn: #16171A;
  --text:     #F2F5F7;
  --text-dim: #8C97A3;
}

/* ─────────── слот ───────────
   Корпус автомата набран собственными --br-*: это рисунок железа, а не
   панели интерфейса, поэтому меняем только обвязку вокруг него. */
.gm-body.sl-body {
  --br-void: #0A0C14;
  --br-body: #12141D;
  --br-dark: #171A26;
}

/* ─────────── ставка скином (drophub.stake.js) ───────────
   Сетка предметов вместо поля с суммой. Разметку рисует общий модуль,
   поэтому и стили общие — три игры используют один и тот же вид. */
.ks-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute);
}
.ks-head__n { font-style: normal; font-size: 12px; color: var(--text-dim); }
.ks-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 5px;
  max-height: 260px; overflow: auto; scrollbar-width: thin;
}

/* ─────────── появление новой строки ставки (краш/рулетка/хайло) ───────────
   Карточка/строка — новый DOM-узел (см. keyed() в *.main.js): класс
   навешивается один раз при вставке и остаётся — повторный запуск
   анимации CSS не делает без явного re-trigger, так что на обновлении
   той же строки (например, чужой забор) она не дёргается заново. */
@keyframes gm-bet-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* без fill-mode: после конца анимации у строки не остаётся transform
   (он создавал бы контейнер и стековый контекст для вложенных картинок) */
.gm-bet-in { animation: gm-bet-in .33s cubic-bezier(.16, .8, .4, 1); }
@media (prefers-reduced-motion: reduce) {
  .gm-bet-in { animation: none; }
}
.ks-empty { margin: 0; padding: 14px 2px; font-size: 13px; color: var(--text-mute); }