:root{
    --header:#101058;
    --bg:#031328;
    --btn-login:#1f276c;      /* текст белый */
    --btn-register:#ede66a;   /* текст чёрный */
    --cta:#ede66a;            /* CTA на баннерах/карточках */
    --white:#fff; --black:#000;

    --rail-h: 208px;          /* высота карточки в рельсах */
    --radius:16px; --radius-xl:22px;
    --container:1240px; --gap:14px;
    --shadow-1:0 10px 26px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--white);
    font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }
  .container{max-width:var(--container); margin-inline:auto; padding:0 22px}

@media (max-width: 768px) {
	.container {
		padding:0 12px
	}}


  /* Фон */
  body::before{
    content:""; position:fixed; inset:-10% -10% -10% -10%; z-index:-2;
    background:
      radial-gradient(900px 700px at 15% 10%, rgba(16,16,88,.45), transparent 60%),
      radial-gradient(900px 700px at 95% 20%, rgba(14,93,160,.28), transparent 60%),
      linear-gradient(180deg, #04162c 0%, #031328 100%);
  }
  body::after{
    content:""; position:fixed; inset:0; z-index:-1; opacity:.18; pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/>\
    <feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0.18'/></feComponentTransfer></filter>\
    <rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode:overlay;
  }

  /* Header */
  .site-header{background:var(--header); position:sticky; top:0; z-index:20}
  .header-inner{min-height:56px; display:flex; align-items:center; gap:12px}
.burger {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.08);
    border: 2px solid rgba(255,255,255);
    color: #fff;
    cursor: pointer;
    order: 3;
}
  .logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--white); margin-left:10px}
.logo img {
    height: 45px;
    width: auto;
    border-radius: 10px;
    object-fit: contain;
    display: block;
}
  .spacer{flex:1}
  .search{
    display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:8px 12px; min-width:260px;
  }
  .search input{
    background:transparent; border:none; outline:none; color:#fff; width:220px; font:inherit;
  }
  .auth{display:flex; gap:10px; margin-left:10px}
.btn {
    --bg: #ede66a;
    --fg: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 800;
    color: #333;
    background: var(--bg);
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
    transition: transform .18s ease, filter .25s ease, box-shadow .25s ease;
    white-space: nowrap;
    border: 2px solid #ede66a;
}
  .btn:hover{transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 10px 22px rgba(0,0,0,.38)}
  .btn:active{transform:translateY(0)}
  .btn:visited{color:var(--fg)}
  .btn.login{--bg:var(--btn-login); --fg:var(--white)}
.btn.login {
    --bg: var(--btn-login);
    --fg: var(--white);
    border: 2px solid #fff;
    color: #fff;
}
  .btn.cta{--bg:var(--cta); --fg:#000}
  .btn.cta.inverse{--fg:#fff; --bg:color-mix(in oklab, var(--cta) 92%, #000 8%)}

  /* Сайдбар (выезжающий слева) */
  .sidebar{
    position:fixed; inset:0 auto 0 0; width:290px; background:rgba(12,18,52,.98); color:#fff;
    transform:translateX(-100%); transition:transform .28s ease; z-index:30; display:flex; flex-direction:column;
    border-right:1px solid rgba(255,255,255,.12);
  }
  .sidebar.open{transform:none}
  .sidebar-header{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.12)}
  .sidebar-body{padding:8px 8px 14px; overflow:auto}
  .side-link{
    display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:12px; color:#fff; text-decoration:none; font-weight:600;
  }
  .side-link:hover{background:rgba(255,255,255,.08)}
  .side-link svg{width:18px; height:18px}
  .sidebar-footer{padding:10px; display:flex; gap:10px; align-items:center; justify-content:space-between}
  .backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:25;
  }
  .backdrop.show{opacity:1; visibility:visible}

  /* Баннеры: 3 элемента в ряд (горизонт-скролл + стрелки) */
  .hero{padding:16px 0 6px}
  .hero-rail{
    position:relative;
  }
  .rail-track{
    display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px;
  }
  .rail-track::-webkit-scrollbar{height:8px}
  .rail-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:8px}
  .banner{
    scroll-snap-align:start; flex:0 0 calc((100% - 28px)/3); /* 3 штуки + 2 пробела */
    height:220px; border-radius:var(--radius-xl); overflow:hidden; position:relative; box-shadow:var(--shadow-1);
    background:linear-gradient(135deg, #0b1d35, #0f2a46);
  }
  .banner .media{position:absolute; inset:0}
  .banner img{width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.02); transition:opacity .5s ease, transform 8s ease}
  .banner.loaded img{opacity:1}
  .banner:hover img{transform:scale(1.06)}
  .banner .shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.0) 55%, rgba(0,0,0,.55))}
  .banner .cap{position:absolute; left:16px; right:16px; bottom:12px; display:flex; justify-content:space-between; align-items:flex-end; gap:10px}
  .banner .title{font-weight:800; font-size:18px; text-shadow:0 3px 10px rgba(0,0,0,.7)}
  .nav-btn{
    position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:12px;
    border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center; cursor:pointer;
    backdrop-filter:blur(6px); z-index:2;
  }
  .nav-btn.prev{left:-8px} .nav-btn.next{right:-8px}
  .nav-btn:disabled{opacity:.5; cursor:default}

  /* Рельсы с играми (8–10 в ряд, горизонтальная прокрутка) */
  .rail{padding:12px 0 10px}
.rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 10px;
    flex-wrap: wrap;
    gap: 20px;
}
  .rail-title{font-size:20px; font-weight:800; margin:0}
  .rail-title a{color:#fff; text-decoration:none}
  .rail-title a:visited{color:#c6cff8}
  .rail .rail-track{padding:4px 0 8px}
  .game{
    position:relative; scroll-snap-align:start; flex:0 0 152px; height:var(--rail-h);
    border-radius:16px; overflow:hidden; box-shadow:var(--shadow-1); background:linear-gradient(135deg, #0b1d35, #0f2a46);
    display:block; text-decoration:none; color:#fff;
  }
  .game .media{position:absolute; inset:0}
  .game img{width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.02); transition:opacity .45s ease, transform .25s ease}
  .game.loaded img{opacity:1}
  .game:hover img{transform:scale(1.06)}
  .game .meta{position:absolute; left:10px; right:10px; bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:8px}
  .game .name{font-size:13px; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .game .play{padding:7px 10px; border-radius:999px; background:var(--cta); color:#000; font-weight:800; font-size:12px; opacity:0; transform:translateY(8px); transition:.18s}
  .game:hover .play{opacity:1; transform:translateY(0)}
  /* visited для карточек: тонкий контур через outline */
  .game{outline:2px solid transparent; outline-offset:-2px}
  .game:visited{outline-color:#c6cff8}

  /* Текстовый блок */
  .text-block{padding:16px 0 28px}
  .text-block h2{font-size:22px; font-weight:800; margin:0 0 10px}
  .text-block h3{font-size:18px; font-weight:700; margin:16px 0 8px}
  .text-block p, .text-block li{color:#f2f5fa}
  .text-block a:link{color:#6cd2ff}
  .text-block a:visited{color:#c1bfff}

  /* Footer */
  .site-footer{background:var(--header); margin-top:12px; text-align:center}
  .footer-top{padding:16px 0 8px}
  .footer-logo img{height:40px; width:auto; border-radius:10px}
  .footer-menu{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; padding:10px 0 14px}
  .footer-menu a{color:#fff; text-decoration:none; font-weight:500; opacity:.95}
  .footer-menu a:visited{color:#e6e6ff}
  .footer-bottom{border-top:1px solid rgba(255,255,255,.25); font-size:12px; color:#cfd3dc; padding:10px 0 14px}

  /* Адаптив */
  @media (max-width:1100px){
    .banner{flex:0 0 calc((100% - 14px)/2)} /* 2 баннера */
  }
  @media (max-width:720px){
    .header-inner{gap:8px}
    .search{display:none}
    .banner{flex:0 0 100%} /* 1 баннер */
    .nav-btn.prev{left:6px} .nav-btn.next{right:6px}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important; animation:none !important}
  }


  .images-block-main {
    position: relative;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
}

@media (max-width: 768px) {
  .images-block-main {
   border-radius: 0;
        height: auto;
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}



img.main-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}


@media (max-width: 768px) {
   img.main-img {
           width: 100%;
        object-fit: contain;
        position: static;
        height: auto;
    }
}



a.btn.btn-main {
    z-index: 1;
    position: absolute;
    bottom: 20px;
    left: calc(50% - 80px);
    background: #ede66a;
    color: #000;
}


@media (max-width: 768px) {
a.btn.btn-main {
  
    position: static;
    bottom: 20px;

    background: #ede66a;
    color: #000;
    display: block;
    text-align: center;
    }
}




.games-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

        @media (max-width: 1024px) {
            .games-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .games-grid {
             grid-template-columns: repeat(2, 1fr);
        width: 100%;
            }
        }
.game-card {
    background: inherit;
    overflow: hidden;
    position: relative;
}

        .game-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
        }

.game-image {
    width: 100%;
    height: 230px;
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
}

        .game-image:nth-child(2n) {
            background: linear-gradient(45deg, #4ecdc4, #44a08d);
        }

        .game-image:nth-child(3n) {
            background: linear-gradient(45deg, #ffd166, #ff9e6d);
        }

        .game-image:nth-child(4n) {
            background: linear-gradient(45deg, #a166ab, #5073b8);
        }

.game-info {
    padding: 6px 12px;
    text-align: center;
    background: #09203d;
    border-radius: 8px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-title {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
}

.play-button {
    position: absolute;
    bottom: inherit;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: #ede66a;
    color: #031428;
    padding: 12px 30px;
    border: none;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(255,107,107,0.4);
}

        .game-card:hover .play-button {
            opacity: 1;
          
        }

.play-button:hover {
    background: #ede66a;
    box-shadow: 0 6px 20px rgba(255,107,107,0.6);
    color: #000;

}


.game-image img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: none;
}



.game-card.fade-in {
    opacity: 1;
    transform: translateY(0);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
}

.game-image {
    position: relative;
}
.game-card:hover .game-image:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000000ab;
    border-radius: 8px;
}

.title-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}


@media (max-width: 768px) {
    .auth .register {
        display: none;
    }
}

@media (max-width: 768px) {
    .burger {
        order: 3;
    }
}


.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    justify-content: space-between;
}


img {
    width: 100%;
}

.block-main.box-nf {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media (max-width: 768px) {
.block-main.box-nf {
        flex-wrap: wrap;
    }
}


.img-nf {
    max-width: 450px;
}

section.section-main.section-vizitka-page {
    padding: 50px 0;
}

.title-nf span {
    font-size: 80px;
}


img.popular.icon {
    width: 30px;
}


img.icon-head {
    width: 30px;
}