@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Rubik:wght@400;500&display=swap');

/* Фирменный слой. Знак и шрифт — из макета логотипа: оранжевый кубик с
   головой робота, Russo One в заголовках. А ПАЛИТРА зелёная, снятая с
   ключевого арта игры: она лучше держится рядом с капсулой на главной, где
   робот стоит на зелёном.

   Имена переменных остались от той схемы: переименовывать значило бы править
   все файлы разом. Читай по подписям справа, а не по названию. */
:root {
  /* Поверхности. Фон опущен почти в чёрный: на светло-зелёном полотне
     карточки и кнопки не читались как отдельные предметы, а игровой сайт
     живёт именно контрастом тёмного поля и ярких плашек. */
  --btl-ink: #06170A;      /* обводки и самый тёмный фон */
  --btl-bg: #0A2410;       /* фон страницы */
  --btl-panel: #103317;    /* секции, шапка */
  --btl-card: #17431E;     /* карточки, плитки */
  --btl-edge: #2A6B33;     /* светлая грань на карточках */

  /* Акценты */
  --btl-orange: #F5C518;   /* ЗОЛОТО — только главное действие на экране */
  --btl-cyan: #FF8A3D;     /* ОРАНЖЕВЫЙ — ссылки и второстепенные кнопки */
  --btl-pink: #3E93D8;     /* СИНИЙ — плашки ЗБТ, ивенты */
  --btl-lime: #B5E85A;     /* лаймовый — онлайн и успешные статусы */
  --btl-wood: #C98A4B;     /* полоса-разделитель */

  /* Команды */
  --btl-red: #E24B4A;
  --btl-blue: #378ADD;

  /* Текст */
  --btl-text: #F6F1DC;     /* кремовый */
  --btl-muted: #D2E3C6;
  --btl-dim: #BFD4AF;
  --btl-on-orange: #3D2A02; /* текст поверх золотого */

  /* Форма */
  --btl-radius: 12px;
  --btl-radius-lg: 16px;
  --btl-stroke: 3px;

  /* Russo One идёт ОДНИМ начертанием. Просить у него 800 или 900 нельзя:
     браузер дорисует жир сам, и буквы поплывут. */
  --btl-display: 'Russo One', system-ui, sans-serif;
  --btl-body: 'Rubik', system-ui, sans-serif;
}

body {
  background: var(--btl-bg);
  color: var(--btl-text);
  font-family: var(--btl-body);
  font-weight: 400;
  line-height: 1.55;
}

h1, h2, h3, .btl-display {
  font-family: var(--btl-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

/* Кнопки. Игра нарисована как игрушка из пластика, поэтому и кнопка —
   объёмная плашка: тёмная обводка, «толщина» снизу, при нажатии проседает.
   Одинаковой формы держим все кнопки сайта, меняется только заливка. */
.btl-btn {
  font-family: var(--btl-display);
  font-weight: 400;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #FFD84A 0%, var(--btl-orange) 55%, #DDAE0C 100%);
  color: var(--btl-on-orange);
  border: var(--btl-stroke) solid var(--btl-ink);
  border-radius: var(--btl-radius);
  padding: 12px 20px;
  cursor: pointer;
  /* Нижняя грань — это «толщина» плашки, а не тень под ней. */
  box-shadow: 0 4px 0 var(--btl-ink), 0 8px 16px rgba(0, 0, 0, .28);
  transform: translateY(0);
  transition: transform .09s ease, box-shadow .09s ease, filter .12s ease;
}

.btl-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--btl-ink), 0 12px 20px rgba(0, 0, 0, .32);
}

/* Нажатая кнопка садится на свою же грань — как настоящая клавиша. */
.btl-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--btl-ink), 0 3px 8px rgba(0, 0, 0, .28);
}

/* Второстепенная — та же плашка, но зелёная: рядом с золотой видно, какая
   из них главная, и при этом обе выглядят кнопками, а не ссылкой в рамке. */
.btl-btn--ghost {
  background: linear-gradient(180deg, #2E6E33 0%, var(--btl-card) 60%, #1E5222 100%);
  color: var(--btl-text);
  border-color: var(--btl-ink);
}

.btl-btn--ghost:hover { border-color: var(--btl-ink); }

/* Кнопка-ссылка должна брать цвет кнопки, а не ссылки: внутри карточек
   ссылки перекрашены в оранжевый, и надпись на золотой плашке становилась
   нечитаемой. */
a.btl-btn, .step a.btl-btn, .card a.btl-btn { color: var(--btl-on-orange); }
a.btl-btn--ghost, .step a.btl-btn--ghost, .card a.btl-btn--ghost { color: var(--btl-text); }

@media (prefers-reduced-motion: reduce) {
  .btl-btn, .btl-btn:hover, .btl-btn:active { transition: none; transform: none; }
}

.btl-btn:focus-visible,
.btl-btn--ghost:focus-visible {
  outline: 3px solid var(--btl-cyan);
  outline-offset: 2px;
}

/* Полоса-разделитель секций. */
.btl-floor {
  height: 9px;
  background: var(--btl-wood);
  border-top: 2px solid var(--btl-ink);
  border-bottom: 2px solid var(--btl-ink);
}

/* Знак со словом — шапка сайта. Обводку даёт вторая копия надписи под
   первой: -webkit-text-stroke рисует её ПОВЕРХ букв и съедает тонкие места,
   поэтому нижняя копия обведена, а верхняя чистая. */
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark__ic { width: 30px; height: 30px; flex: 0 0 auto; display: block; }
.mark__txt {
  position: relative;
  font-family: var(--btl-display);
  font-size: 21px;
  letter-spacing: 2px;
  color: var(--btl-text);
  line-height: 1;
}