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

/* ========== 0) Root & Resets ============================================== */
:root{
  --nt-bg: #121212;
  --nt-panel: rgba(35,36,58,0.97);
  --nt-text: #f0f0f0;
  --nt-muted: #a0a8b8;
  --nt-muted-2: #cbd1e1;
  --nt-primary: #7709FF;
  --nt-shadow: rgba(0,0,0,0.18);

  /* Page gutters (match header) */

}
*, *::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;
}

/* ========== 1) Page skeleton & breadcrumbs ================================ */
.game-container{ min-height:100vh; display:flex; flex-direction:column; }
.content{ width:100%; margin:0; padding:32px var(--page-gutter) 64px; flex:1; }

.breadcrumbs{ font-size:14px; margin:12px 0 24px; white-space:nowrap; overflow-x:auto; }
.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:#777; }
.breadcrumbs a{ color:#3590ff; text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }
.nav-svg svg,
.nav-svg img,
.nav-svg .nav-svg-img{ /* те же размеры, что были у svg */
  width:28px; height:28px; vertical-align:-3px; margin-right:6px;
  display:block; object-fit:contain;
}

/* ========== 2) Guides — grid & cards ===================================== */
.guides-section-title{
  font-size:2.3rem; font-weight:900; color:#fff; text-align:center;
  margin:38px 0 12px; letter-spacing:-1px;
  text-shadow:0 2px 24px #23243a, 0 0 8px #ffb70033;
  max-width:1200px; margin-left:auto; margin-right:auto; line-height:1.15;
}
.guides-section-subtitle{
  font-size:1.18em; color:var(--nt-muted); text-align:center; margin-bottom:38px;
  max-width:860px; margin-left:auto; margin-right:auto;
}

.guides-list{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(5, minmax(0,1fr));
  margin-top:1.6rem;
}

/* Card */
.guide-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: #121212;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(0,0,0,.22);
  width: 100%;
  cursor: pointer;
  transition: transform .24s cubic-bezier(.25,.8,.25,1), box-shadow .24s cubic-bezier(.25,.8,.25,1);
  min-height: 380px;      
}
.guide-card:hover{ transform:translateY(-4px); box-shadow:0 6px 24px rgba(119,9,255,.35); }

/* only image inside .guide-img-box should scale on hover */
.guide-img-box img{ transition: transform .45s ease, filter .35s ease; }
.guide-card:hover .guide-img-box img{ transform: scale(1.06); filter:brightness(.92); }

/* remove older .guide-card_img hover rules if present */
.guide-card-img{ /* kept for legacy markup but no hover transform here */ transition: transform .45s ease, filter .35s ease; }
/* Image (aspect-ratio like game-guides) */
.guide-img-box{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#0f1218; }
.guide-img-box img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.guide-card:hover .guide-img-box img{ transform:scale(1.06); }
.guide-img-box{
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0f1218;
}
.guide-img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Legacy single <img> support */
.guide-card-img{
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: #0f1218;
}
.guide-logo{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* чтоб клик шел по карточке */
}
.guide-logo svg,
.guide-logo img,
.guide-logo .nav-svg-img{ width:100%; height:100%; display:block; object-fit:contain; }
/* Content */
.guide-body{ display:flex; flex-direction:column; gap:.6rem; padding:1rem 1rem 1.1rem; background:#121212; flex:1 1 auto; }
.guide-card-title{ font-size:1.05rem; font-weight:800; color:#fff; margin:.8rem 1rem 0; }
.guide-card-desc{ font-size:.95rem; color:#b0b3c7; margin:.4rem 1rem .8rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; line-clamp:3; overflow:hidden; flex:1 1 auto; }
.guide-meta-row{ margin:0 1rem 1rem; display:flex; gap:.6rem; align-items:center; margin-top:auto; }

/* Game row inside guide card */
.guide-game-row{ display:flex; align-items:center; gap:8px; margin:12px 18px 0; color:var(--nt-muted-2); font-size:.95em; }
.guide-game-svg svg{ width:18px; height:18px; display:block; }
.guide-game-svg img,
.guide-game-svg .nav-svg-img{
  width:28px; height:28px; display:block; object-fit:contain;
}
.guide-game-name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ========== 3) Hot Featured (single big card with inner slides) =========== */
.hot-featured{ position:relative; }
.hot-featured .guide-overlay{ display:none; }

.hot-slides{
  position: relative;
  padding-bottom: 64px; /* было меньше — из-за этого текст наезжал на «низ» */
}
.hot-slide{ position: relative; display:none; cursor:pointer; }
.hot-slide.is-active{ display:block; }

.hot-featured .hot-badge{
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--nt-primary); color:#fff; font-weight:800;
  padding:6px 12px; border-radius:10px; box-shadow:0 2px 8px rgba(119,9,255,.35);
}
/* hot arrows & meta pinned bottom on the same baseline */
.hot-featured .hot-arrows{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 6;
}
.hot-featured .guide-meta-row{
  position: absolute;
  left: 18px;
  right: 108px;   /* резерв под стрелки справа */
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 5;
}
.hot-featured .guide-meta-row{
  position: absolute;
  left: 18px;
  right: 108px;         /* оставляем место под стрелки */
  bottom: 12px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;  /* не переносим дату/метки на 2 строки */
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 5;
}

.hot-featured .hot-arrows{
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 6;
}
.hot-featured .mini-arrow{
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  border-radius:999px; border:1px solid rgba(255,255,255,.06);
  background:rgba(35,36,58,.86); color:#fff; z-index:7;
}
.hot-featured .mini-arrow svg{ width:18px; height:18px; }
/* Стабилизируем высоту текста: заголовок до 2 строк, описание до 3 */
.hot-featured .guide-card-title{
  margin: 12px 16px 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hot-featured .guide-card-desc{
  margin: 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ========== 4) Pagination ================================================= */
.pagination{ margin:48px 0 24px; text-align:center; }
.pagination-btn{
  background:#23243a; color:#fff; border:none; border-radius:8px;
  padding:10px 20px; margin:0 6px; cursor:pointer; font-size:1.08em;
  transition: background .2s, color .2s; box-shadow:0 2px 8px rgba(0,0,0,.10);
}
.pagination-btn.active, .pagination-btn:hover{
  background:linear-gradient(90deg, var(--nt-primary) 0%, #23232b 100%); color:#fff;
}

/* ========== 5) Background image layer ==================================== */
.page-bg-img{ position:absolute; inset:0 auto auto 0; right:0; z-index:0; overflow:hidden; pointer-events:none; }
.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(200px, 28vw, 460px);
  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, main, footer{ position:relative; z-index:1; }

/* ========== 6) Games slider (cards + nav) ================================= */
.games-swiper{ position:relative; width:100%; max-width:100%; margin:0 auto; }
/* Reserve space for games swiper to avoid layout shift when JS initializes it */
.games-swiper{ min-height:200px; display:block; }
.games-swiper .swiper-wrapper{ min-height:200px; }
/* lightweight placeholder style while JS не инициализировал слайдер */
.games-swiper[data-initialized="false"]{ opacity:0.01; }
.games-swiper .swiper-wrapper{ display:flex; align-items:stretch; gap:0 !important; padding:8px 0 20px; }
.games-swiper .swiper-slide{ display:flex; align-items:stretch; justify-content:center; /* width via Swiper */ }

/* slider card */
.slider-game-card{
  height:200px;
  border-radius:14px;
  overflow:hidden;
  background:#151624;
  position:relative;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .28s ease, box-shadow .28s ease;
  cursor:grab;
}
.slider-game-card:active{ cursor:grabbing; }
.slider-game-card:hover{ transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,0,0,.45); }

.slider-game-card .slider-game-img{ width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.78); transition: transform .35s ease, filter .35s ease; }
.slider-game-card:hover .slider-game-img{ transform:scale(1.06); filter:brightness(.92); }

/* overlay gradient to make title readable */
.slider-game-card .slider-game-overlay{
  position:absolute; left:0; right:0; bottom:0; height:58%; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.45) 100%);
  z-index:2;
}

/* title row inside card */
.slider-game-title-row{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.slider-game-svg{ flex: 0 0 auto; }
.slider-game-svg svg{
  width: 28px;           /* было 20px */
  height: 28px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.slider-game-svg img,
.slider-game-svg .nav-svg-img{
  width:28px; height:28px; display:block; object-fit:contain;
}
.slider-game-title{
  color: #fff;
  font-weight: 800;
  font-size: 1.12rem;    /* было ~0.98rem */
  line-height: 1.2;
  text-shadow: 0 3px 12px rgba(0,0,0,.7);
  display: -webkit-box;
  -webkit-line-clamp: 2; /* всегда 2 строки максимум */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* count badge */
.slider-game-count{
  position:absolute; top:10px; left:10px; z-index:4;
  min-width:26px; height:26px; padding:0 6px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.7rem;
  background:var(--nt-primary); color:#fff;
  box-shadow:0 2px 8px rgba(119,9,255,.25);
  border:1px solid rgba(255,255,255,.06);
}

/* navigation buttons */
.games-swiper-prev, .games-swiper-next{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center; background:#1e2030; color:#fff;
  border:1px solid rgba(255,255,255,.08); box-shadow:0 4px 16px rgba(0,0,0,.35);
  z-index:6; cursor:pointer; transition:background .25s, transform .25s, opacity .25s;
}
.games-swiper-prev{ left:12px; }
.games-swiper-next{ right:12px; }
.games-swiper-prev::after, .games-swiper-next::after{ font-size:27px; line-height:1; font-weight:600; }
.games-swiper-prev::after{ content:'‹'; }
.games-swiper-next::after{ content:'›'; }
.games-swiper-prev:hover, .games-swiper-next:hover{ background:#2a2d42; transform:translateY(-50%) translateY(-3px); }
.games-swiper-prev:active, .games-swiper-next:active{ transform:translateY(-50%) scale(.92); }
.games-swiper .swiper-button-disabled{ opacity:0; visibility:hidden; pointer-events:none; }
.games-swiper-prev svg, .games-swiper-next svg{ display:none !important; } /* in case inline SVG is injected */
/* Use same arrow styles as main.deals slider for games-swiper */
.games-swiper .swiper-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background: linear-gradient(145deg,#1d202a,#11131a);
  border:1px solid var(--nt-border); box-shadow:0 6px 20px rgba(0,0,0,.35);
  color:#fff; z-index:6; cursor:pointer; transition:opacity .25s, transform .25s;
}
.games-swiper .swiper-btn:hover{ transform:translateY(-50%) scale(1.06); }
.games-swiper .swiper-btn:disabled{ opacity: .0; pointer-events: none; }
.games-swiper .swiper-btn-prev{ left: 12px; }
.games-swiper .swiper-btn-next{ right: 12px; }
/* hide when not needed */
.games-swiper .swiper-btn.hide{ display:none !important; }
/* Контент внутри — занимает оставшееся место; текст режем по строкам */
.guide-body{ display:flex; flex-direction:column; gap:.6rem; padding:1rem 1rem 1.1rem; background:#121212; flex:1 1 auto; }
.guide-card-title{
  font-size: 1.05rem; font-weight: 800; color:#fff; margin: .6rem 1rem .2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.guide-card-desc{
  font-size: .95rem; color:#b0b3c7; margin: 0 1rem .8rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* ========== 7) Media queries ============================================== */
@media (max-width:1599px){ .guides-list{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (max-width:1199px){ .guides-list{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:899px){  .guides-list{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.2rem; } }
@media (max-width:599px){  .guides-list{ grid-template-columns:repeat(1, minmax(0,1fr)); gap:0.9rem; } }

@media (max-width:1200px){
  .content{ padding:32px var(--page-gutter) 64px; }
  .slider-game-card{ height:180px; }
}
@media (max-width:900px){
  .content{ padding:16px var(--page-gutter) 40px; }
  .guide-card{ margin-bottom:18px; }
  .slider-game-card{ height:150px; }
}
@media (max-width:600px){
  .guides-section-title{ font-size:1.2rem; }
  .slider-game-card{ height:130px; }
  .slider-arrow{ width:40px; height:40px; }
}

/* ==========================================================================
   8) OVERRIDES — keep last (your high-priority tweaks)
   ========================================================================== */

/* Hot arrows: richer transitions + hover shadows */
.hot-featured .mini-arrow{ transition: transform .2s, background .2s, opacity .2s, box-shadow .2s; }
.hot-featured .mini-arrow:hover{ transform: scale(1.06); background: rgba(35,36,58,.95); box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.hot-featured .mini-arrow:active{ transform: scale(.92); opacity:.85; }

/* Hot highlight: border always on top */
.is-hot-highlight{
  border:2px solid var(--nt-primary);
  border-radius:18px; /* matches .guide-card */
  box-shadow:0 0 24px rgba(119,9,255,.25), 0 6px 22px rgba(0,0,0,.25);
}

/* Hot meta alignment: sit on the very bottom, reserve room for arrows */
.hot-featured .guide-meta-row{ bottom:12px; padding-right:88px; }

/* Отключаем старое абсолютное позиционирование мета в hot-featured и делаем общий футер фиксированным внизу карточки */
.hot-featured {
  display: flex;
  flex-direction: column;
}
.hot-featured .hot-slides { padding-bottom: 0; }

/* Убираем абсолютный мета-row из .hot-featured .guide-meta-row (источники внутри слайдов) */
.hot-featured .hot-slides .guide-meta-row { position: static; margin: 0; }

/* Общий футер: фиксируем внизу карточки, флекс-строка: слева мета, справа стрелки. */
.hot-footer{
  margin-top: 12px;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: transparent;
}
.hot-footer #hotMetaRow{ display:flex; gap:12px; align-items:center; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hot-footer .hot-arrows{ margin:0; display:flex; gap:8px; }

/* Убедимся, что .guide-card (hot-featured) занимает вертикальную структуру и footer прижимается к низу */
.hot-featured{ min-height: 380px; }
.hot-slides{ flex:1 1 auto; }

/* Мелкие правки: скрываем внутренние meta у слайдов чтобы не дублировалось при копировании */
.hot-slide .guide-meta-row{ visibility: hidden; height:0; margin:0; padding:0; }

/* Улучшенная анимация появления: только плавный fade-in без трансформаций */
@keyframes guidesCardAppear {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.guides-list .guide-card{ animation: guidesCardAppear .45s ease; animation-fill-mode: none; }
/* 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; }