/* Shared site chrome: sticky header + footer.
   Single source of truth for the top bar and footer across every page
   (home, contact, app detail pages). Values are self-contained — they do NOT
   depend on any page's :root — so the chrome looks identical regardless of the
   host page's own stylesheet. Chrome text is Inter; only the wordmark is Nunito.
   Markup: assets/partials/site-header.php + site-footer.php. */

/* ---------- Header ---------- */
.index-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.88);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid #DDEBEE;
  font-family:'Inter', sans-serif;
  transition:background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.index-header.is-scrolled{
  background:rgba(255,255,255,0.94);
  border-bottom-color:rgba(12,58,82,.08);
  box-shadow:0 6px 20px rgba(12,58,82,.08);
}
.header-inner{
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:24px;
  padding:12px 24px;
}
/* Колонки: лого (auto) · меню (1fr, центрируется внутри) · правый блок (auto).
   Меню в средней 1fr-колонке с justify-content:center — то есть центрируется
   между лого и правым блоком, а не по центру всей страницы. При схлопывании
   меню становится absolute/display:none и уходит из сетки — тогда в потоке
   остаются лого и правый блок (см. медиазапросы). */
@media (min-width:901px){ .header-inner{ padding-left:48px; padding-right:48px; } }
.logo{
  display:flex; align-items:center; gap:12px;
  font-family:'Nunito', sans-serif; font-weight:800; font-size:20px; color:#0C3A52;
}
.logo-mark{
  width:32px; height:32px;
  object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 4px 8px rgba(12,58,82,.10));
}
nav.main-nav{ display:flex; align-items:center; justify-content:center; gap:28px; }
nav.main-nav a, nav.main-nav span{
  font-size:14.5px; font-weight:600; color:#526A78;
  transition:color .15s ease;
}
nav.main-nav a:hover{ color:#1D7A9E; }
nav.main-nav span{ color:#1D7A9E; }   /* active page (rendered as <span>) */

/* Акцентная кнопка-CTA (например «Скачать» на карточке игры). Партиал печатает
   её дважды: .nav-cta-desktop в .nav-right (справа ОТ языка) и .nav-cta-mobile
   в конце .main-nav (для бургера). Схлопывание двухступенчатое: сначала (≤860px)
   в бургер уходит меню, а кнопка остаётся у языка; затем (≤600px) прячется и
   кнопка — она появляется полосой внутри бургер-меню. CSS показывает ровно одну
   копию, поэтому дубля на экране нет. */
.nav-cta{
  min-height:38px; padding:0 16px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  color:#fff; background:#1D7A9E;
  font-family:'Inter', sans-serif; font-size:13.5px; font-weight:700;
  box-shadow:0 6px 16px rgba(29,122,158,.28);
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nav-cta-icon{ width:16px; height:16px; flex:0 0 auto; }
.nav-cta:hover{
  color:#fff; background:#186A8A;
  box-shadow:0 8px 20px rgba(29,122,158,.34);
  transform:translateY(-1px);
}
.nav-cta-mobile{ display:none; }   /* десктоп: работает только копия в .nav-right */
.nav-right{ display:flex; align-items:center; gap:12px; }
.menu-toggle{
  display:none;
  position:relative;
  width:38px;
  min-height:38px;
  flex:0 0 auto;
  border:0;
  border-radius:999px;
  background:#F0F7F6;
  color:#0C3A52;
  box-shadow:inset 0 0 0 1px rgba(12,58,82,.04);
  font-size:0;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.menu-toggle::before,
.menu-toggle::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:box-shadow .18s ease, transform .18s ease;
}
.menu-toggle::before{
  transform:translateY(-6px);
  box-shadow:0 6px 0 currentColor;
}
.menu-toggle::after{ transform:translateY(6px); }
.menu-toggle:hover{
  background:#E8F3F2;
  box-shadow:inset 0 0 0 1px rgba(12,58,82,.08);
}
.index-header.is-open .menu-toggle{
  background:#E8F3F2;
  box-shadow:inset 0 0 0 1px rgba(12,58,82,.08);
}
.index-header.is-open .menu-toggle::before{
  transform:translateY(0) rotate(45deg);
  box-shadow:none;
}
.index-header.is-open .menu-toggle::after{ transform:translateY(0) rotate(-45deg); }

.lang-switcher{ position:relative; }
.lang-btn{
  min-height:38px; border:0; border-radius:999px; padding:0 15px;
  display:inline-flex; align-items:center; gap:7px;
  color:#0C3A52; background:#F0F7F6;
  font-family:'Inter', sans-serif; font-weight:700; font-size:13px; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(12,58,82,.04);
}
.flag{ width:20px; height:14px; object-fit:cover; flex:0 0 auto; box-shadow:0 0 0 1px rgba(12,58,82,.18); }
.lang-btn .arrow{ width:10px; height:10px; transition:transform .18s ease; }
.lang-switcher.open .lang-btn .arrow{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:40;
  min-width:140px; padding:6px; border-radius:14px;
  background:#fff; box-shadow:0 20px 45px rgba(12,58,82,.16);
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
}
.lang-switcher.open .lang-menu{ opacity:1; pointer-events:auto; transform:translateY(0); }
.lang-menu a{
  min-height:38px; padding:0 11px; border-radius:10px;
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:700; opacity:.75; color:#0C3A52;
}
.lang-menu a:hover{ background:#FAFCFC; opacity:1; }
.lang-menu a.current{ color:#1D7A9E; background:#EEF7F6; opacity:1; }

/* Ступень 1 (≤860px): меню уходит в бургер, кнопка «Скачать» остаётся у языка. */
@media (max-width:860px){
  .header-inner{ position:relative; grid-template-columns:1fr auto; }
  nav.main-nav{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:16px;
    right:16px;
    z-index:30;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:6px;
    border:1px solid rgba(12,58,82,.08);
    border-radius:18px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 42px rgba(12,58,82,.16);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  nav.main-nav a, nav.main-nav span{
    position:relative;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 14px;
    border-radius:12px;
    color:#0C3A52;
    font-size:15px;
    font-weight:700;
    background:transparent;
  }
  nav.main-nav a + a::before,
  nav.main-nav a + span::before,
  nav.main-nav span + a::before,
  nav.main-nav span + span::before{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    top:0;
    height:1px;
    background:rgba(12,58,82,.07);
  }
  nav.main-nav a:hover{
    color:#1D7A9E;
    background:#FAFCFC;
  }
  .index-header.is-open nav.main-nav{ display:flex; }
  .menu-toggle{ display:block; }
}

/* Ступень 2 (≤600px): места у языка не остаётся — прячем десктопную кнопку,
   а в бургер-меню показываем её копию полосой во всю ширину, чтобы «Скачать»
   читалось как действие, а не как обычный пункт. */
@media (max-width:600px){
  .nav-cta-desktop{ display:none; }
  .main-nav .nav-cta-mobile{
    display:flex;
    justify-content:center;
    margin-top:6px;
    color:#fff; background:#1D7A9E;
    box-shadow:none;
  }
  .main-nav .nav-cta-mobile:hover{
    color:#fff; background:#186A8A;
    transform:none;
  }
  .main-nav .nav-cta-mobile::before{ display:none; }
}

/* ---------- Footer ---------- */
.index-footer{
  background:#0C3A52; color:#CFE0E8; padding:24px 0 22px; line-height:1.35;
  font-family:'Inter', sans-serif;
}
.footer-layout{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:36px; align-items:center;
}
.footer-brand-block{ display:flex; align-items:center; min-width:0; }
.footer-logo{ display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-family:'Nunito', sans-serif; font-weight:800; font-size:17px; white-space:nowrap; }
.footer-logo:hover{ opacity:.85; }
.footer-logo .logo-mark{ width:30px; height:30px; }
.footer-text{
  display:flex; flex-direction:column; align-items:flex-end; gap:8px; min-width:0;
}
.footer-meta{
  display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:7px 15px;
  font-size:11.8px; color:#93B0BD;
}
.footer-download{ display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:baseline; gap:5px 12px; min-width:0; max-width:100%; }
.footer-download-label{ color:#B8CFD9; font-size:12.5px; font-weight:700; white-space:nowrap; }
.store-badges{ display:flex; flex:0 1 auto; flex-wrap:wrap; gap:5px 13px; justify-content:flex-end; align-items:baseline; min-width:0; max-width:100%; }
.store-badge{
  display:inline-flex; align-items:center; color:#B8CFD9; font-size:12.5px; font-weight:600;
  text-decoration:none; opacity:.9; transition:opacity .15s ease, color .15s ease;
}
a.store-badge:hover{ color:#fff; opacity:1; }
.footer-company{ color:inherit; text-decoration:none; transition:color .15s ease; }
.footer-company:hover{ color:#fff; }
.footer-legal{ display:flex; gap:7px 15px; flex-wrap:wrap; }
.footer-legal a{ color:#93B0BD; text-decoration:none; }
.footer-legal a:hover{ color:#fff; }
@media (max-width:700px){
  .footer-layout{ grid-template-columns:1fr; gap:18px; }
  .footer-text{ align-items:flex-start; }
  .footer-meta{ justify-content:flex-start; }
  .footer-download{ justify-content:flex-start; align-items:flex-start; flex-direction:column; gap:7px; }
  .store-badges{ justify-content:flex-start; }
}
@media (max-width:560px){
  .index-footer{ padding:24px 0 22px; }
  .footer-meta{ flex-direction:column; align-items:flex-start; gap:10px; }
  .footer-legal{ gap:10px 14px; }
}