/*
=========================================
SITE CSS
Файл конкретного сайта: блоки страниц и правки каркаса под тему.
Подключается ПОСЛЕДНИМ — только так он может переопределить те
места стартера, где цвет записан буквально (белая шапка, белая
панель меню): переменной для них не предусмотрено.
=========================================
*/

/* ==========================================================
   HEADER под тему сайта
========================================================== */

.site-header{background:var(--site-header-bg);color:var(--site-header-text);
  border-bottom:1px solid var(--color-border);}
.header-logo__text{font-family:var(--site-heading-font);font-weight:700;
  font-size:24px;letter-spacing:.4px;color:var(--site-header-text);
  white-space:nowrap;}
.menu__link{color:var(--site-header-text);}
.menu__link:hover{color:var(--color-primary);}
/* меню переносится по строкам: страниц у сайта может быть больше, чем
   помещается в один ряд, и уезжающие за край пункты хуже второй строки */
.menu__list{flex-wrap:wrap;gap:8px 24px;}
.header-menu__panel,.menu__dropdown{background:var(--site-panel-bg);
  border-color:var(--color-border);}
.menu__dropdown .menu__link{color:var(--site-header-text);}
.burger span{background:var(--site-header-text);}
.header-search{color:var(--site-header-text);}
.header-menu__top{border-bottom-color:var(--color-border);}

/* ==========================================================
   МЕНЮ ВСЕГДА БУРГЕРОМ
   В стартере выдвижная панель включается только на телефоне
   (@media max-width:768px), а на большом экране меню идёт
   строкой в шапке. Нам нужна панель везде — поэтому те же
   правила повторены здесь без ограничения по ширине.
   Переопределить это в самом стартере нельзя: он общий, а
   site.css подключается последним и потому выигрывает.
========================================================== */

.burger{display:block;}
/* меню ушло из потока, и правую группу больше некому прижать вправо */
.site-header__right{margin-left:auto;}

.header-menu{position:fixed;inset:0;z-index:1000;pointer-events:none;}
.header-menu.active{pointer-events:auto;}
.header-menu__overlay{display:block;position:absolute;inset:0;
  background:rgba(0,0,0,.45);opacity:0;transition:.25s;}
.header-menu.active .header-menu__overlay{opacity:1;}
.header-menu__panel{position:absolute;top:0;left:-320px;width:300px;max-width:85vw;
  height:100%;padding:24px;overflow-y:auto;transition:left .25s;}
.header-menu.active .header-menu__panel{left:0;}
.header-menu__top{display:flex;align-items:center;margin-bottom:24px;
  padding-bottom:16px;border-bottom:1px solid var(--color-border);}

.menu__list{display:block;}
.menu__item{width:100%;}
.menu__link{min-height:48px;justify-content:space-between;}
.menu__toggle{display:flex;align-items:center;justify-content:center;}
.menu__dropdown{display:none;position:static;min-width:0;margin:0;padding:0 0 0 18px;
  border:none;border-radius:0;box-shadow:none;}
.menu__item--parent.open>.menu__item-head .menu__arrow{transform:rotate(225deg);}
/* подменю раскрывается кнопкой, а не наведением: в выдвижной панели список,
   разъезжающийся под курсором при проходе мышью, только мешает попасть по
   нужному пункту */
@media (hover:hover){
  .menu__item--parent:hover>.menu__dropdown{display:none;}
}
.menu__item--parent.open>.menu__dropdown{display:block;}

/* ==========================================================
   КОЛОНКА КОНТЕНТА
   Блоки страницы живут в том же контейнере, что шапка,
   первый экран и подвал: колонка одной ширины и по центру.
   Без него секции растягивались бы на всю ширину окна —
   на телефоне разницы нет, а на большом экране строка
   выходит длиной в полтора экрана и её невозможно читать.
========================================================== */

.site-main__content{padding-bottom:var(--space-3xl);}

/* ==========================================================
   FOOTER под тему сайта
========================================================== */

.site-footer{background:var(--site-footer-bg);border-top:1px solid var(--color-border);}
.site-footer__inner{color:var(--site-footer-text);}

/* ==========================================================
   HERO
   Раскладка columns-reverse — наша: в стартере есть «текст слева,
   картинка справа», а зеркальный вариант нужен, чтобы страницы
   сайта не выглядели одинаковыми. Значение TV, не совпавшее с
   `columns`, попадает в ветку «картинка, потом текст» — остаётся
   выложить их в два столбца.
========================================================== */

.hero__title{font-family:var(--site-heading-font);color:var(--site-heading-color);
  text-align:center;}
.hero__text{color:var(--color-text);}
.hero__text p{margin:0 0 14px;}
.hero--columns-reverse .hero__body{display:grid;grid-template-columns:1fr 1fr;
  gap:48px;align-items:start;}
.hero--stack .hero__image{margin:0 auto;max-width:min(100%,640px);}

@media (max-width:768px){
  .hero--columns-reverse .hero__body{display:flex;flex-direction:column;gap:24px;}
}

/* ==========================================================
   БЛОКИ СТРАНИЦЫ
========================================================== */

.site-block{margin:0 0 30px;}
.site-block h2{font-family:var(--site-heading-font);color:var(--site-heading-color);
  font-size:var(--font-size-h2);line-height:1.3;margin:0 0 16px;text-align:center;}
.site-text{color:var(--color-text);}
.site-text p{margin:0 0 14px;}
.site-text ul{margin:0 0 14px;padding-left:22px;}
.site-text li{margin:0 0 8px;}
.site-text b,.site-text strong{color:var(--site-heading-color);}
.site-text a{color:var(--color-primary);}

/* ── модуль: игры (сетка карточек, каждая ведёт на целевой путь) ────── */
/* колонок ровно столько, сколько заказано карточек делится нацело: 6 -> 3,
   8 -> 4. auto-fit здесь не подходит: он оставляет одинокую карточку во
   втором ряду, а витрина должна собираться в полные ряды */
.site-games{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);}
.site-games--cols4{grid-template-columns:repeat(4,1fr);}
.site-game{display:block;text-decoration:none;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:10px 10px 14px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
/* наведение: карточка приподнимается и подсвечивается акцентом */
.site-game:hover{transform:translateY(-6px);border-color:var(--color-primary);
  box-shadow:var(--shadow-md);}
/* 3:2 — соотношение самих превью игр: при нём object-fit почти ничего не
   срезает, а карточки в ряду держат одну высоту при любых исходниках */
.site-game-media{display:block;overflow:hidden;border-radius:var(--radius-md);
  aspect-ratio:3/2;background:var(--color-background);}
.site-game-media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;}
.site-game:hover .site-game-media img{transform:scale(1.05);}
.site-game-title{display:block;margin-top:12px;text-align:center;
  font-family:var(--site-heading-font);font-weight:700;font-size:15px;
  line-height:1.3;letter-spacing:.6px;text-transform:uppercase;
  color:var(--site-heading-color);}
.site-game-title--accent{color:var(--color-primary);}
/* уважаем системную настройку «поменьше движения»: анимация — украшение */
@media (prefers-reduced-motion:reduce){
  .site-game,.site-game-media img{transition:none;}
  .site-game:hover{transform:none;}
  .site-game:hover .site-game-media img{transform:none;}
}

/* ── модуль: таблица ────────────────────────────────────────────────── */
.site-table-scroll{overflow-x:auto;}
.site-table{width:100%;border-collapse:collapse;background:transparent;
  border:2px solid var(--color-primary);}
.site-table th,.site-table td{padding:12px 14px;text-align:left;
  border:1px solid var(--color-primary);background:transparent;}
.site-table thead th{font-family:var(--site-heading-font);
  color:var(--site-heading-color);font-weight:700;border-bottom-width:2px;}

/* ── модуль: FAQ (аккордеон без единой строчки JS) ──────────────────── */
.site-faq-item{border:1px solid var(--color-border);border-radius:var(--radius-md);
  margin:0 0 10px;padding:0 16px;background:transparent;}
.site-faq-item summary{cursor:pointer;list-style:none;padding:14px 0;
  font-family:var(--site-heading-font);color:var(--site-heading-color);
  font-weight:600;display:flex;justify-content:space-between;align-items:center;
  gap:12px;}
.site-faq-item summary::-webkit-details-marker{display:none;}
.site-faq-item summary::after{content:"+";color:var(--color-primary);font-size:22px;
  line-height:1;transition:.2s;}
.site-faq-item[open] summary::after{content:"–";}
.site-faq-answer{padding:0 0 16px;color:var(--color-text);}

@media (max-width:768px){
  /* на телефоне четыре карточки в ряд — это марки вместо картинок */
  .site-games,.site-games--cols4{grid-template-columns:repeat(2,1fr);gap:12px;}
  .site-game-title{font-size:13px;}
}
@media (min-width:769px) and (max-width:980px){
  .site-games--cols4{grid-template-columns:repeat(3,1fr);}
}