/* ============================================================
   СЛОТОВОД · единая дизайн-система (ui.css)
   Слой структуры и состояний. Темы-акценты хабов задаются на
   странице через CSS-переменные (:root { --accent-rgb, ... }).
   Порядок: tailwind.js → ui.css → тематический <style> страницы.
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root {
  /* базовая палитра */
  --bg: #08080f;
  --gold: #f5c451;
  --acid: #34d399;
  --neon: #a855f7;

  /* акцент темы (переопределяется на странице) */
  --accent-rgb: 168, 85, 247;          /* glass:hover, game-frame */
  --grad-a: #c084fc;                   /* neon-text from */
  --grad-b: #34d399;                   /* neon-text to   */
  --btn-neon-a: #7c3aed;               /* btn-neon градиент */
  --btn-neon-b: #a855f7;
  --btn-neon-rgb: 168, 85, 247;        /* btn-neon glow */

  /* тайминги */
  --t-fast: 130ms;
  --t-base: 220ms;
  --t-slow: 350ms;

  /* радиусы */
  --r-btn: 12px;
  --r-card: 16px;
  --r-panel: 20px;

  /* фокус */
  --ring: rgba(245, 196, 81, .9);
}

/* ---------- 2. База документа ---------- */
html { scrollbar-gutter: stable; }              /* нет сдвига при открытии модалки */
html, body { overscroll-behavior-y: none; }

* { -webkit-tap-highlight-color: transparent; }

::selection { background: rgba(245, 196, 81, .28); color: #fff; }

/* тонкий фирменный скроллбар */
body {
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, .45) #0b0b14;
}
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #0b0b14; }
body::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, .4); border-radius: 8px; border: 2px solid #0b0b14; }
body::-webkit-scrollbar-thumb:hover { background: rgba(168, 85, 247, .65); }

/* ---------- 3. Фокус и клавиатура ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 4. Стекло (карточки/панели) ----------
   Два уровня: интерактивные карточки-ссылки подсвечиваются
   акцентом темы, пассивные панели — только нейтральное оживление.
   Так блоки различаются ролями, а не одним сплошным золотом.      */
.glass {
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
/* пассивные контейнеры (сайдбары, FAQ, инфобоксы) */
.glass:hover {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
/* интерактивные карточки — тихий акцент темы */
a.glass:hover,
button.glass:hover {
  border-color: rgba(var(--accent-rgb), .45);
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .16);
}

/* ---------- 5. Кнопки: единая премиум-система ----------
   Варианты: .btn-acid (главный CTA), .btn-neon (акцент темы),
   .btn-gold (премиум). Размеры и радиус — утилитами Tailwind
   (px-*/py-*/rounded-*), здесь только вид и состояния.        */
.btn-acid,
.btn-neon,
.btn-gold {
  position: relative;
  isolation: isolate;
  overflow: hidden;                     /* обрезает только блик, glow — box-shadow и не режется */
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),   /* верхний свет */
    inset 0 -10px 18px rgba(0, 0, 0, .20),    /* нижняя глубина */
    0 4px 14px rgba(0, 0, 0, .35);
  background-size: 180% 100%;
  background-position: 0% 50%;
  transition:
    background-position var(--t-slow) ease,
    box-shadow var(--t-base) ease,
    scale var(--t-fast) ease,
    filter var(--t-base) ease;
}

.btn-acid  { background-image: linear-gradient(100deg, #047857, #34d399 55%, #059669); }
.btn-neon  {
  background-image: linear-gradient(100deg, var(--btn-neon-a), var(--btn-neon-b) 55%, var(--btn-neon-a));
  --glow: rgba(var(--btn-neon-rgb), .48);
}
.btn-gold  {
  background-image: linear-gradient(100deg, #8a5f0e, #e9c362 55%, #a05a10);
  color: #1a1206;
  --glow: rgba(233, 195, 98, .35);
}
.btn-acid  { --glow: rgba(52, 211, 153, .45); }

/* hover: переливание градиента + glow (без изменения размеров) */
.btn-acid:hover,
.btn-neon:hover,
.btn-gold:hover {
  background-position: 100% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -10px 18px rgba(0, 0, 0, .20),
    0 6px 18px rgba(0, 0, 0, .4),
    0 0 24px var(--glow, rgba(52, 211, 153, .45));
}

/* блик-свип поверх (один раз за наведение) */
.btn-acid::after,
.btn-neon::after,
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .30) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform 550ms ease;
  pointer-events: none;
}
.btn-acid:hover::after,
.btn-neon:hover::after,
.btn-gold:hover::after { transform: translateX(130%); }

/* active: тактильное нажатие (scale не конфликтует с transform-утилитами) */
.btn-acid:active,
.btn-neon:active,
.btn-gold:active { scale: .965; filter: brightness(1.08); }

/* disabled */
button.btn-acid:disabled, button.btn-neon:disabled, button.btn-gold:disabled,
.btn-acid[aria-disabled="true"], .btn-neon[aria-disabled="true"], .btn-gold[aria-disabled="true"] {
  opacity: .55;
  filter: grayscale(.35);
  pointer-events: none;
}

/* ---------- 6. Мелкие компоненты ---------- */
.chip { font-size: 11px; letter-spacing: .02em; }

.neon-text {
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* рамка демо-игры (градиентный бордер + свечение) */
.demo-frame {
  position: relative;
  border-radius: 20px;
  padding: 3px;
  background: linear-gradient(135deg, rgba(245, 196, 81, .75), rgba(168, 85, 247, .6), rgba(52, 211, 153, .6));
  box-shadow: 0 0 60px rgba(168, 85, 247, .30), 0 0 120px rgba(245, 196, 81, .12);
}
.demo-frame iframe { border-radius: 17px; display: block; width: 100%; aspect-ratio: 16/9; background: #000; }

/* подложка «игра скоро» / превью до старта демо */
.game-frame {
  background:
    repeating-linear-gradient(45deg, rgba(var(--accent-rgb), .05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #151527, #0d0d19);
}

/* пульсирующая CTA-кнопка */
.pulse { animation: pulseGlow 1.8s ease-in-out infinite; }
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(245, 196, 81, .45); }
  50%      { box-shadow: 0 0 42px rgba(245, 196, 81, .85); }
}

/* мега-меню провайдеров в шапке */
.mega { display: none; }
.has-mega:hover .mega,
.has-mega:focus-within .mega,
.mega.open { display: block; }
.mega { top: 100%; padding-top: 12px; }
.mega > .panel { border-radius: 18px; }

details[open] summary { color: #34d399; }

.clamp2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.js-promo-open { cursor: pointer; }

/* ---------- 6b. Анти-overflow сеток ----------
   Grid-элементы по умолчанию не сжимаются ниже min-content
   (min-width:auto) — из-за intrinsic-ширины картинок колонки
   растягиваются и на мобильных появляется горизонтальный скролл.
   Разрешаем сжиматься элементам контентных сеток.             */
main.grid > * { min-width: 0; }
main .grid > * { min-width: 0; }

/* заголовки-строки «H2 + ссылка» не должны держать одну линию */
main .flex.items-end.justify-between { flex-wrap: wrap; column-gap: 1rem; row-gap: .5rem; }

/* текстовые строки-списки (▸ ссылка · текст) переносятся, а не растягивают страницу */
ul li.flex { flex-wrap: wrap; }

/* ---------- 7. Тач-таргеты (мобильные/тач) ---------- */
@media (pointer: coarse) {
  a.btn-acid, a.btn-neon, a.btn-gold,
  button.btn-acid, button.btn-neon, button.btn-gold {
    min-height: 44px;
  }
}

/* ---------- 8. Доступность: меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   КОМПОНЕНТЫ ВЕРХНЕГО УРОВНЯ (badges / stats / panels / qa)
   Каждый блок получает собственную тихую идентичность —
   страница читается без сплошного золота.
   ============================================================ */

/* ---------- 9. Заголовки секций: акцент-маркер ---------- */
main h2 { display: flex; align-items: center; gap: 10px; }
main h2::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.05em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--grad-a, #e8cd87), var(--grad-b, #7fd8b4));
  box-shadow: 0 0 12px rgba(var(--accent-rgb, 232, 201, 116), .35);
}

/* ---------- 10. Бейджи (фешечки) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 12px; border-radius: 999px; border: 1px solid;
  line-height: 1.4;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.badge-gold { color: #e8cd87; background: rgba(232, 205, 135, .07);  border-color: rgba(232, 205, 135, .30); }
.badge-acid { color: #7fd8b4; background: rgba(127, 216, 180, .07);  border-color: rgba(127, 216, 180, .30); }
.badge-neon { color: #b9a0f2; background: rgba(185, 160, 242, .07);  border-color: rgba(185, 160, 242, .30); }
.badge-blue { color: #8ab4f8; background: rgba(138, 180, 248, .07);  border-color: rgba(138, 180, 248, .30); }

/* ---------- 11. Стат-тайлы («Характеристики») ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
}
.stat:hover { border-color: rgba(var(--si, 148, 163, 184), .35); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.stat-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(var(--si, 148, 163, 184), .12);
  border: 1px solid rgba(var(--si, 148, 163, 184), .26);
}
.stat-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #94a3b8; margin-bottom: 2px; }
.stat-val  { display: block; font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.3; overflow-wrap: anywhere; }
.stat-slate { --si: 148, 163, 184; }
.stat-blue  { --si: 138, 180, 248; }
.stat-acid  { --si: 127, 216, 180; }
.stat-neon  { --si: 185, 160, 242; }
.stat-gold  { --si: 232, 205, 135; }

/* ---------- 12. Панели с ролью (сайдбар и промо) ---------- */
.panel-rate  { background: linear-gradient(160deg, rgba(232, 205, 135, .09), rgba(255, 255, 255, .02)); border-color: rgba(232, 205, 135, .24); }
.panel-promo { background: linear-gradient(160deg, rgba(127, 216, 180, .08), rgba(255, 255, 255, .02)); border-color: rgba(127, 216, 180, .24); }
.panel-warn  { background: rgba(251, 146, 60, .05); border-color: rgba(251, 146, 60, .22); }
.panel-rate:hover  { border-color: rgba(232, 205, 135, .4);  box-shadow: 0 0 16px rgba(232, 205, 135, .1); }
.panel-promo:hover { border-color: rgba(127, 216, 180, .4);  box-shadow: 0 0 16px rgba(127, 216, 180, .1); }
.panel-warn:hover  { border-color: rgba(251, 146, 60, .38);  box-shadow: none; }

/* ---------- 13. Ранги лидерборда ---------- */
.rank {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  color: #0d0d18; margin-top: 1px;
}
.rank-1 { background: linear-gradient(135deg, #ecd28f, #c9a24b); box-shadow: 0 0 10px rgba(232, 205, 135, .35); }
.rank-2 { background: linear-gradient(135deg, #dfe5ee, #a8b2c2); }
.rank-3 { background: linear-gradient(135deg, #e4ad7e, #c07f4e); }
.rank-n { background: rgba(255, 255, 255, .09); color: #cbd5e1; }

/* ---------- 14. FAQ-аккордеон ---------- */
details.qa {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  border-radius: 14px; overflow: hidden;
  transition: border-color var(--t-base) ease, background var(--t-base) ease;
}
details.qa[open] { border-color: rgba(127, 216, 180, .28); background: rgba(127, 216, 180, .045); }
details.qa > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 14px 44px 14px 16px;
  font-weight: 700; color: #e2e8f0;
}
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary::after {
  content: "+"; position: absolute; right: 13px; top: 50%; translate: 0 -50%;
  width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #7fd8b4;
  background: rgba(127, 216, 180, .1); border: 1px solid rgba(127, 216, 180, .26);
  transition: rotate var(--t-fast) ease;
}
details.qa[open] > summary::after { content: "−"; rotate: 180deg; }
details.qa > summary:hover { color: #fff; }
details.qa > *:not(summary) { padding: 0 16px 14px; }