/* ch.css — тема страниц «Цепочек 2248». Подключается ПОСЛЕ base.css.

   Направление: ночной неоновый город, как в самой игре. Это единственная
   тёмная страница витрины — так и задумано: у остальных игр темы светлые,
   а «Цепочки» узнаются по глубокому фиолетовому фону и бирюзовой краске.
   Цвета взяты прямо из темы neon в игре (src/themes.js). */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&display=swap');

:root {
  --bg: #0b0b1e;
  --surface: #171436;
  --line: rgba(255, 255, 255, 0.10);
  --text: #f3f1ff;
  --muted: #a9a3d4;
  --dim: #726b9e;
  --accent: #22d3ee;             /* бирюза плиток «2» */
  --accent2: #ec4899;            /* розовый «Цепочки дня» */
  --gold: #fbbf24;
  --on-accent: #0b0b1e;

  --display: 'Manrope', system-ui, sans-serif;
}

body {
  background-image:
    radial-gradient(ellipse at 12% 0%, #2a1b5e 0%, transparent 55%),
    radial-gradient(ellipse at 92% 12%, #10305c 0%, transparent 48%),
    linear-gradient(180deg, #0d0a26 0%, #0b0b1e 60%, #090818 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* мягкие «орбы» — тот же приём, что на фоне игровых сцен */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(34, 211, 238, 0.08) 0, transparent 260px),
    radial-gradient(circle at 82% 62%, rgba(236, 72, 153, 0.07) 0, transparent 280px),
    radial-gradient(circle at 60% 92%, rgba(139, 92, 246, 0.08) 0, transparent 300px);
}

h1, h2 { font-weight: 800; letter-spacing: -0.01em; }

/* акцентная кнопка светится, как плитка в игре */
.btn {
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.22);
}
.btn.ghost { box-shadow: none; }

/* цепочка-разделитель вместо обычной линейки */
hr.rule {
  border: 0;
  height: 2px;
  margin: 62px 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(34, 211, 238, 0.5) 20%,
    rgba(236, 72, 153, 0.5) 80%, transparent 100%);
}