/* ---------- Общие переменные ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:#121212; color:#e8e8e8; line-height:1.55;
  min-height:100vh; display:flex; flex-direction:column;
}

:root{
  --nt-primary:#7709FF;
  --nt-primary-hover:#8d3bff;
  --nt-border:rgba(255,255,255,.08);
  --nt-card-bg:#121212;
  --nt-text:#e8e8e8;
  --nt-text-dim:#b0b3c7;
  --nt-radius:8px;
  --nt-radius-lg:12px;
  --nt-shadow:0 4px 12px rgba(0,0,0,.45);
  --nt-transition:.24s cubic-bezier(.25,.8,.25,1);

  /* Макеты */
  --content-max: 1654px;

  /* Лэйаут страницы игры */
  --game-left-w: 300px;
  --header-h: 72px;

  /* Legacy aliases for guides styles (map gg-* to nt-*) */
  --gg-bg: var(--nt-card-bg);
  --gg-bg-alt: #181c26;
  --gg-surface: var(--nt-card-bg);
  --gg-surface-alt: #252b38;
  --gg-border: var(--nt-border);
  --gg-border-strong: rgba(255,255,255,.14);
  --gg-text: var(--nt-text);
  --gg-text-dim: var(--nt-text-dim);
  --gg-accent: var(--nt-primary);
  --gg-accent-hover: var(--nt-primary-hover);
  --gg-accent-dim: #46331f;
  --gg-radius: var(--nt-radius-lg);
  --gg-radius-sm: var(--nt-radius);
  --gg-shadow: var(--nt-shadow);
  --gg-transition: var(--nt-transition);
  --gg-content-max: var(--content-max);
  --gg-page-gutter: var(--page-gutter);
  --gg-left-w: var(--game-left-w);
  --gg-header-h: var(--header-h);
  font-family: 'Inter',system-ui,Arial,sans-serif;
}



/* ===== Layout shim: mirror essential parts of game.css for guides page ===== */
.game-layout{
  display:grid;
  grid-template-columns: var(--gg-left-w) 1fr;
  column-gap: 24px;
  min-height: calc(100vh - var(--gg-header-h));
}
@media (max-width:1024px){ .game-layout{ grid-template-columns: 1fr; } }
/* ---------- крошки ---------- */
.breadcrumbs {
  font-size: 14px;
  margin: 20px 0 24px;
  white-space: nowrap;
  overflow-x: auto;
  color: #9aa0a6; 
}
.breadcrumbs ol {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}
.breadcrumbs li {
  display: flex;
  align-items: center;
}
.breadcrumbs li + li::before {
  content: "›";
  margin: 0 6px;
  color: #c9c9c9;
}
.breadcrumbs a{
  color: #ffffff;      /* все ссылки — белые */
  text-decoration: none;
  font-size: 15px;
}
.breadcrumbs a:hover{ text-decoration: underline; }


/* Левый сайдбар — закреплён, скролл внутри */
.left-rail{
  position: sticky; top: var(--header-h); align-self:start;
  height: calc(100vh - var(--header-h));
  overflow:auto;
  background:#121212ad;
  padding:1.2rem 1rem;
  z-index:3;
  box-shadow: 8px 0 20px -14px rgba(120, 9, 255, 0.712);
}
.left-rail::-webkit-scrollbar{width:8px}
.left-rail::-webkit-scrollbar-thumb{background:var(--nt-border);border-radius:4px}

/* On narrower screens hide sidebar like on game page */
@media (max-width:1024px){
  .left-rail{ display:none; box-shadow:none; }
}

/* Контент справа: тот же правый gutter, что и на поиске */
.right-content{
  position:relative; z-index:1;
  padding-right: var(--page-gutter);
}
.right-content > .wrap{
  /* Контейнер секций: ограничиваем ширину, без центрирования —
     левый край прилегает к сайдбару, справа — общий gutter */
  max-width: var(--content-max);
  margin-inline: 0;
  padding-block: 3.2rem;
}
@media (max-width:1024px){
  .right-content{ padding-right: min(4vw,24px); padding-left: min(4vw,24px); }
}

/* Make guides grid match product-grid sizing/behavior */
.guides-grid{
  display:grid; gap:1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 1.6rem;
}
@media(min-width:2000px){ .guides-grid{ gap:2rem; } }
@media (max-width:600px){ .guides-grid { gap:16px; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); } }

/* 3) Сайдбар: логотип/меню игр/категорий */
.game-image-wrapper{text-align:center; margin-bottom:1.2rem}
.game-logo{width:100%; height:auto; object-fit:contain}

.menu .category{
  padding:.6rem .55rem; border-radius:6px; font-weight:700;
  color:var(--nt-text); cursor:pointer; display:flex; align-items:center; gap:.45rem;
  transition:background var(--nt-transition),color var(--nt-transition);
}
.menu .category:hover{ background: rgba(255,255,255,.06); }
.menu .category.active{ background:#2a2950; }

 .subcategory-list{
   overflow: hidden;
   max-height: 0;
   transition: max-height .28s ease;
   padding-left: 1.1rem;
}
 .subcategory-list.visible{ max-height: 800px; }

.subcategory{
  padding:.45rem .35rem; border-radius:6px; color:var(--nt-text-dim);
  cursor:pointer; display:flex; align-items:center; gap:.35rem;
  transition:background var(--nt-transition),color var(--nt-transition);
}
.subcategory:hover{ background:rgba(255,255,255,.05); color:#fff; }
.subcategory.active{ background:var(--nt-primary); color:#fff; }
    /* Убрать подчеркивание у All Services и зафиксировать размеры иконки */
    .menu .category.all-services,
    .menu .category.all-services:link,
    .menu .category.all-services:visited,
    .menu .category.all-services:hover,
    .menu .category.all-services:active {
      text-decoration: none !important;
    }
    .menu .category.all-services .nav-svg svg {
      width: 28px; height: 28px; vertical-align: -3px; margin-right: 6px;
    }
/* === Sidebar: highlight current game link ============================== */
.left-rail .category.all-services.is-highlight{
  display:flex; align-items:center; gap:.55rem;
  margin: .25rem .1rem 1rem;
  padding: .7rem .65rem;
  border-radius: 10px;
  font-weight: 800;
  color:#fff;
  background: linear-gradient(135deg, rgba(100, 100, 100, 0.18), rgba(103, 101, 105, 0.1));
  border: 1px solid rgba(131, 131, 131, 0.35);
  box-shadow: inset 0 4px 14px rgba(73, 72, 73, 0.12);
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}
.left-rail .category.all-services.is-highlight:hover{
  background: linear-gradient(135deg, rgba(119,9,255,.28), rgba(119,9,255,.18));
  border-color: var(--nt-primary, #7709FF);
  transform: translateY(-1px);
}

/* === Sidebar subcategories smooth collapse === */
.subcategory-list{
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}
.subcategory-list.visible{
  display: block;            /* уже есть в файле, оставляем */
  max-height: 800px;         /* достаточно, чтобы плавно раскрыться */
}
.category.open .cat-toggle{ content: '−'; }

/* === Sidebar category toggle (SVG + / −) =============================== */
.cat-toggle{
  margin-left: auto;
  background: transparent;
  border: none;                 /* нет бордера по умолчанию */
  color: inherit;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background .18s ease, box-shadow .18s ease;
  padding: 0;
}
.cat-toggle:hover,
.cat-toggle:focus-visible{
  background: rgba(255,255,255,.08);    /* лёгкая подсветка */
  outline: 1px solid rgba(255,255,255,.20);  /* имитация бордера только при наведении/фокусе */
  outline-offset: 0;
}
.cat-toggle-icon{
  width: 16px;
  height: 16px;
  pointer-events: none; /* чтобы клики шли по кнопке, а не по <img> */
  display: block;
}

/* Sidebar icons: normalize both inline <svg> and <img> paths */
.left-rail .nav-svg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.left-rail .nav-svg svg,
.left-rail .nav-svg img,
.left-rail .nav-svg .nav-svg-img{
  width:28px;
  height:28px;
  display:block;
  object-fit:contain;
}
.left-rail .category .nav-svg{ margin-right:6px; }

/* extend previous rule that targeted only svg */
.menu .category.all-services .nav-svg svg,
.menu .category.all-services .nav-svg img,
.menu .category.all-services .nav-svg .nav-svg-img{
  width:28px;
  height:28px;
  vertical-align:-3px;
  margin-right:6px;
}

/* Game icon overlay (guide card): support <img> same as inline <svg> */
.game-icon-overlay img,
.game-icon-overlay .nav-svg-img{
  width:44px;
  height:44px;
  display:block;
  object-fit:contain;
}

/* === Background image layer under content === */
.page-bg-img {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 0;              /* ниже контента */
  overflow: hidden;
}

.page-bg-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* затемнение по нижнему краю картинки */
.page-bg-img::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(120px, 22vw, 280px);
  background:linear-gradient(
    to bottom,
    rgba(18,18,18,0)    0%,
    rgba(18,18,18,0.06) 28%,
    rgba(18,18,18,0.16) 48%,
    rgba(18,18,18,0.32) 66%,
    rgba(18,18,18,0.56) 82%,
    #121212             100%
  );
  pointer-events: none;
}

/* поднимаем всё содержимое выше картинки */
header,
.breadcrumbs,
.game-container,
.page-title-block {
  position: relative;
  z-index: 1;
}
/* Контент и футер гарантированно поверх фона */
header, .game-layout, footer { position: relative; z-index: 1; }



/* ---------- Сетка гайдов ---------- */
.guides-grid {
  --gap:28px;
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  align-items:stretch;
}
@media (max-width:600px){
  .guides-grid { --gap:16px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
}

.guide-card {
  background:var(--nt-card-bg);
  border:1px solid var(--nt-border);
  border-radius:var(--nt-radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform var(--nt-transition), box-shadow var(--nt-transition);
  box-shadow:0 2px 18px rgba(0,0,0,.22);
  will-change:transform,box-shadow,opacity;
}
.guide-card:hover{ transform:translateY(-4px); box-shadow:0 6px 24px rgba(119,9,255,.35); }
.guide-img-box{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#0f1218 }
.guide-img-box img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease, filter .35s ease; }
.guide-card:hover .guide-img-box img{ transform: scale(1.06); filter:brightness(.92); }


/* badge top-left uses same visual as product-badge-new */
.guide-card .product-badge-new{ position:absolute; top:.6rem; left:.6rem; background:var(--nt-primary); color:#fff; padding:.35rem .6rem; border-radius:6px; font-weight:700; z-index:2 }

/* game icon overlay on the right — large SVG, semi-transparent */
.game-icon-overlay{ position:absolute; right:.6rem; top:.6rem; width:44px; height:44px; opacity:.95; z-index:2; display:flex; align-items:center; justify-content:center }
.game-icon-overlay svg{ width:44px; height:44px; display:block }

/* content matches product-content */
.guide-body, .product-content{ display:flex; flex-direction:column; gap:.6rem; padding:1rem 1rem 1.1rem; background:#121212; flex:1 }
.guide-title, .product-title{ font-size:1.05rem; font-weight:800; color:#fff }

/* guide-desc uses SunEditor html — ensure same clamping as product-desc */
.guide-desc{ font-size:.95rem; color:var(--nt-text-dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.guide-desc .ql-editor{ padding:0; margin:0; color:var(--nt-text-dим); }

/* Заменяем meta-pill на горизонтальную строку меты */
.product-price-bottom.guide-meta{ margin-top:auto; align-self:flex-start; display:flex; gap:.6rem; }
.product-price-bottom.guide-meta .guide-meta-row{ display:flex; gap:.6rem; align-items:center; font-size:.95rem; }

/* Простая анимация появления: только fade-in */
@keyframes cardAppear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.guides-grid .guide-card{ animation: cardAppear .45s ease; animation-fill-mode: none; }

/* ---------- Sticky shadow эффект при скролле ---------- */
.guides-top-bar-wrapper.scrolled {
  box-shadow:0 6px 16px -6px rgba(0,0,0,.65),0 0 0 1px var(--gg-border);
}

/* ---------- Прелоады/скелетоны (опционально) ---------- */
.skeleton {
  background:linear-gradient(90deg,#222b38 25%,#2a3443 37%,#222b38 63%);
  background-size:400% 100%;
  animation:skeleton 1.4s ease infinite;
}
@keyframes skeleton {
  0% { background-position:100% 50%; }
  100% { background-position:0 50%; }
}

/* ---------- Малые устройства ---------- */
@media (max-width:520px){
  .game-head-left { flex-direction:row; }
  .game-logo-box { width:88px; min-width:88px; border-radius:16px; }
  .guides-toolbar { gap:14px; }
  .search-box input { min-width:190px; }
  .results-counter { width:100%; text-align:center; }
  .guides-grid { grid-template-columns: 1fr; --gap:16px; }
  .right-content{ padding-left: min(4vw,24px); padding-right: min(4vw,24px); }  
}
/* Read-time pill (cards) */
.rt-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #cbd1e1;
  font-size: 12px; line-height: 1; font-weight: 600;
}
.rt-pill img{ width:14px; height:14px; display:block; opacity:.9; }