:root{
  /* Палитра ТЗ */
  --header:#7375b1;
  --bg:#423742;
  --btn-login:#7e7696;
  --btn-register:#00c9ff;
  --white:#fff;
  --black:#000;

  /* Акценты */
  --accent-1:#8a7cff;
  --accent-2:#e14aff;
  --accent-3:#00d1ff;
  --glass:rgba(255,255,255,.08);

  /* Геометрия */
  --radius:18px;
  --radius-xl:28px;
  --container:1240px;
  --gap:18px;

  /* Тени */
  --shadow-1:0 10px 30px rgba(0,0,0,.35);
}

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

/* Градиентный фон + шум */
body::before {
  content: "";
  position: fixed;
  inset: -10% -10% -10% -10%;
  z-index: -3;
  background: #190127;
  filter: saturate(1.05);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; opacity:.25; 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='.9' numOctaves='2' stitchTiles='stitch'/>\
  <feColorMatrix type='saturate' values='0'/><feComponentTransfer>\
  <feFuncA type='table' tableValues='0 0.14'/></feComponentTransfer></filter>\
  <rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #1f1632;
  backdrop-filter: saturate(1.2) blur(6px);
}
.header-inner{min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.logo{display:inline-flex; gap:12px; align-items:center; text-decoration:none; color:var(--white)}
.logo img {
  height: 50px;
  width: auto;
  border-radius: 10px;
  display: block;
  object-fit: contain;
}


@media (max-width: 991px) {
  .logo img {
    height: 40px;
  }}

/* НОВЫЙ стиль кнопок */
.auth{display:flex; gap:10px}
.btn {
  --bg: var(--btn-login);
  --fg: var(--white);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 800;
  color: var(--fg);
  background: color-mix(in oklab, var(--bg) 92%, #000 8%);
  transition: transform .18s ease, filter .25s ease, box-shadow .25s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
  overflow: hidden;
  isolation: isolate;
}
/* Градиентная рамка */
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(90deg, rgb(141 96 208), rgb(201 81 232), rgb(58 167 232));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.9; pointer-events:none;
}
/* Блик, «пролетающий» слева направо */
.btn::after{
  content:""; position:absolute; inset:-40% -20%; transform:translateX(-120%) rotate(8deg);
  background:linear-gradient(95deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.32) 40%, rgba(255,255,255,0) 70%);
  transition:transform .6s ease; pointer-events:none;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 12px 28px rgba(0,0,0,.38)}
.btn:hover::after{transform:translateX(120%) rotate(8deg)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent-3); outline-offset:3px}
.btn.login {
  --bg: #190127;
  --fg: var(--white);
}
.btn.register {
  --bg: #35ec90;
  --fg: var(--black);
}
.btn.show-all{--bg:var(--btn-login); --fg:var(--white); padding:10px 16px}
/* Посещённые ссылки-кнопки не меняют цвет текста */
.btn:visited{color:var(--fg)}

/* Текст */
.text-block{padding:24px 0}
h1{margin:0 0 12px; font-size:36px; font-weight:800; letter-spacing:.2px; text-shadow:0 2px 16px rgba(0,0,0,.35)}
h2{margin:18px 0 8px; font-size:26px; font-weight:700}
h3{margin:14px 0 6px; font-size:20px; font-weight:600}
p{color:#f6f6f8; margin:0 0 10px}

/* Большой слайдер (один баннер за раз) */
.hero{position:relative; padding:22px 0 8px}
.hero-viewport{
  height:560px; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-1);
  background:
    radial-gradient(120% 120% at 85% 15%, rgba(0,209,255,.18) 0, rgba(0,209,255,0) 55%),
    radial-gradient(120% 120% at 10% 90%, rgba(225,74,255,.18) 0, rgba(225,74,255,0) 55%),
    linear-gradient(135deg, #524456, #3a2f3a);
}
.hero-track{display:flex; height:100%; transition:transform .6s cubic-bezier(.22,.8,.26,.99)}
.hero-slide{position:relative; min-width:100%; height:100%; overflow:hidden}
.hero-slide .media{position:absolute; inset:0}
.hero-slide img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04);
  transition:opacity .6s ease, transform 8s ease;
}
.hero-slide.loaded img{opacity:1}
.hero-slide:hover img{transform:scale(1.1)}
.hero-slide .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 100%)}
.hero-caption{
  position:absolute; left:24px; right:24px; bottom:22px; z-index:2;
  font-weight:800; font-size:28px; text-shadow:0 3px 14px rgba(0,0,0,.6)
}
.hero .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:56px; height:56px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(30,25,35,.45); color:#fff; cursor:pointer; outline:none;
  backdrop-filter:blur(6px); transition:opacity .2s ease, transform .2s ease;
}
.hero .nav:hover{transform:translateY(-50%) scale(1.05)}
.hero .prev{left:12px} .hero .next{right:12px}

/* Секции игр (6 в ряд, 2 ряда) */
.section{padding:16px 0 28px}
.section-title{font-size:22px; font-weight:800; margin:0 0 12px}
.grid{display:grid; gap:var(--gap)}
.cols-6{grid-template-columns:repeat(6, minmax(0,1fr))}
.card{
  position:relative; display:block;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1); isolation:isolate;
  background:
    radial-gradient(120% 120% at 85% 15%, rgba(0,209,255,.18) 0, rgba(0,209,255,0) 55%),
    radial-gradient(120% 120% at 10% 90%, rgba(225,74,255,.18) 0, rgba(225,74,255,0) 55%),
    linear-gradient(135deg, #524456, #3a2f3a);
  aspect-ratio:16/10; transform:translateZ(0);
  outline:2px solid currentColor; outline-offset:-2px;
  color:transparent; /* базово кольцо не видно, цвет зададим для :visited */
}
.card .media{position:absolute; inset:0}
.card img{
  width:100%; height:100%; display:block; object-fit:cover; opacity:0; transition:opacity .45s ease, transform .25s ease;
  transform:scale(1.02);
}
.card.loaded img{opacity:1}
.card:hover img{transform:scale(1.06)}
.card::after{
  content:""; position:absolute; inset:-20% -40% auto -40%; height:60%;
  background:linear-gradient(100deg, rgba(255,255,255,.15), rgba(255,255,255,0) 60%);
  transform:rotate(8deg); mix-blend-mode:overlay; pointer-events:none;
  opacity:.0; transition:opacity .25s ease;
}
.card:hover::after{opacity:.8}
/* Посещённые карточки — тонкое свечение по контуру (через currentColor) */
.card:visited{color:var(--accent-3)} /* меняем только color — outline возьмёт currentColor */
.is-hidden{display:none}

.section-actions{display:flex; justify-content:flex-end; margin-top:12px}

/* Посещённые ссылки в тексте/футере */
.seo a:link{color:var(--accent-3); text-underline-offset:3px}
.seo a:visited{color:var(--accent-1)}
.footer-menu a:link {
  color: #ffffff;
  text-decoration: none;
}
.footer-menu a:visited{color:#e6e6ff}

/* FAQ */
.faq{padding:10px 0 26px}
.faq details{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; margin:10px 0; overflow:hidden
}
.faq summary{
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:700; position:relative; display:flex; align-items:center; gap:10px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; margin-left:auto; width:24px; height:24px; display:grid; place-items:center;
  border-radius:8px; background:rgba(255,255,255,.12); font-weight:800
}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 16px 16px; color:#f3f3f7}

/* Появление при скролле */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}

/* Адаптив */
@media (max-width:1200px){ .cols-6{grid-template-columns:repeat(4,1fr)} .hero-viewport{height:520px} }
@media (max-width:900px){ .cols-6{grid-template-columns:repeat(3,1fr)} .hero-viewport{height:460px} }
@media (max-width:620px){ .cols-6{grid-template-columns:repeat(2,1fr)} .hero-viewport{height:380px} }
@media (max-width:420px){
  .auth .btn{padding:9px 14px; font-size:14px}
  .header-inner{min-height:60px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .hero .nav{display:none}
}

/* Footer */
.site-footer {
  background: #1f1632;
  margin-top: 28px;
  padding: 40px 0;
}
.footer-top {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 0 40px;
}

@media (max-width: 576px) {
  .footer-top {
    flex-wrap: wrap;
  }}



.footer-menus {
  display: flex;
  justify-content: space-around;
  gap: 22px;
  width: 100%;
}


@media (max-width: 576px) {
  .footer-menus {
    flex-wrap: wrap;
    justify-content: start;
  }}



.footer-menu {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-direction: column;
}
.footer-bottom{border-top:1px solid rgba(255,255,255,.25); text-align:center; padding:10px 0 14px; font-size:12px; opacity:.95}

.btn.show-all {
border: none;
}

.hero-caption {
color: #ffffff;
}


.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;
  transition: .3s;
}

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

.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;
  overflow: hidden;
  position: relative;
}


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


.play-button {
  position: absolute;
  bottom: inherit;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: #2ed380;
  color: #ffffff;
  padding: 12px 30px;
  border: none;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 600;
  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;
}

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

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


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


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


.game-title {
  color: #fff;
  font-weight: 600;
}


.wrap-btn {
  display: flex;
  justify-content: end;
}

.section-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
  background: #982bfd;
  color: #fff;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 600;
}


/* slider */

.slider-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 20px;
}

.slide {
  min-width: calc(33.333% - 14px);
  border-radius: 15px;
  padding: 0;
  box-shadow: 0 5px 20px rgb(196 84 227 / 21%);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.slide:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.slide-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  color: white;
}

.slide-1 .slide-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.slide-2 .slide-icon {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.slide-3 .slide-icon {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.slide-4 .slide-icon {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.slide-5 .slide-icon {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

.slide h3 {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: #333;
}

.slide p {
  color: #666;
  line-height: 1.6;
  font-size: 0.95em;
}

.slider-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  gap: 20px;
}

.slider-arrow {
  background: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.slider-arrow:hover {
  background: #667eea;
  color: white;
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
}

.slider-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f0f0f0;
  color: #999;
}

.slider-dots {
  display: flex;
  gap: 10px;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.slider-dot.active {
  background: #667eea;
}

.slide-counter {
  color: #666;
  font-size: 0.9em;
  margin-top: 10px;
  text-align: center;
}

@media (max-width: 1024px) {
  .slide {
      min-width: calc(50% - 10px);
  }
  
  .slider-container {
      padding: 0 50px;
  }
}

@media (max-width: 768px) {
  .slide {
      min-width: 100%;
  }
  
  .slider-container {
      padding: 0 40px;
  }
  
  .slider-arrow {
      width: 45px;
      height: 45px;
      font-size: 18px;
  }
}

@media (max-width: 480px) {
  .slider-container {
      padding: 0;
  }
  
  .slide {
      padding: 0;
  }
  
  .slide-icon {
      width: 60px;
      height: 60px;
      font-size: 1.5em;
  }
}


img.banners {
  width: 100%;
}

.sld-btn {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  background: #1f1632;
  padding: 12px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
}



.sld-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, rgb(141 96 208), rgb(201 81 232), rgb(58 167 232));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
  pointer-events: none;
}


.faq_section {
  margin: 30px 0
}

.faq_repeater {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.faq__box {
  position: relative;
  height: auto;
  overflow: hidden
}

.faq_question {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  background-color: #1f1632;
  padding: 15px 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: .4s;
  position: relative;
  border-radius: 8px;
  margin-bottom: 0;
}



.faq_question::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, rgb(141 96 208), rgb(201 81 232), rgb(58 167 232));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
  pointer-events: none;
}



.faq_question.active {
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #2e3542
}

.faq__icon {
  width: 16px;
  height: 16px;
  fill: #fff;
}




.dropbtn_button_left,
.dropbutton_list_right {
  display: none
}

.dropbutton_list_right:checked+.right__sidebar_wrapper {
  right: 35px
}

.dropbtn_button_left:checked+.left__sidebar_wrapper {
  left: 35px
}

/* FAQ-no AMP */
.panel{
  display: none;
}
.faq_question.active + .panel {
  display: block;
  border-top: none;
  border-radius: 0 0 6px 6px;
  position: relative;
  margin-top: 3px;
  padding: 10px;
}

.faq_question.active + .panel:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, rgb(141 96 208), rgb(201 81 232), rgb(58 167 232));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
  pointer-events: none;
}



.faq_question::after {
  content: '+';
  position: relative;
  right: 10px;
  top: 16px;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  transition: all 0.3s ease;
}


.faq_question.active::after {
  content: '-';
  transform: translateY(-50%) rotate(0deg);
}


p.faq_answer {
  margin: 0;
  padding: 10px 0;
}

.register::before {
  display: none;
}


.menu-games {
  display: flex;
}

.elem-games {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 20px;
}


.elem-games:hover {
  font-weight: 600;
  border-bottom: 2px solid #b36feb;
}



.menu-games {
  display: flex;
  border-bottom: 1px solid #b36feb;
}


@media (max-width: 991px) {
  .menu-games {
    width: 100%;
    overflow: auto; 
  }}

.menu-games .elem-games:first-child {
  color: #b36feb;
} 


.menu-games .elem-games:first-child {
  color: #b36feb;
  font-weight: 800;
  border-bottom: 2px solid #b36feb;
}

@media (max-width: 768px) {
.slider {
display: flex;
gap: 0;
}}