@font-face {
    font-family: 'HelveticaNeue-Light';
    src: url('../fonts/HelveticaNeue-Light.woff2') format('woff2');
    font-style: normal;
    font-display: swap;	
}

@font-face {
    font-family: 'HelveticaNeue-Roman';
    src: url('../fonts/HelveticaNeue-Roman.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue-Medium';
    src: url('../fonts/HelveticaNeue-Medium.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue-Bold';
    src: url('../fonts/HelveticaNeue-Bold.woff2') format('woff2');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Colus';
    src: url('../fonts/Colus.otf') format('opentype');
    font-style: normal;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
}

ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

h4,
h3,
h2,
h1 {
    margin: 0 !important;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

body {
    background: #111111;
    font-family: 'HelveticaNeue-Roman';
    margin: 0;
    color: #7C7C7C;
    font-size: 16px;
    line-height: 20px;
    padding-bottom: 80px;
    overflow-y: scroll;
}

.main_wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.main_fon {
    background: top / cover no-repeat;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -100;
    width: 100%;
    height: 600px;
}

.main_content {
    padding: 16px;
    border-radius: 0px 0px 16px 16px;
    background: #F8F8F8;
    width: 100%;
}

body.dark .main_content {
    background: #171717;
}

#body-background a {
    display: block;
    width: 100%;
    height: 50%;
}

#header,
#main,
#footer {
    z-index: 10;
}

.server {
    display: flex;
    width: 100%;
}

.server-start-date {
    margin-left: auto;
}

.server-description {
    display: flex;
    width: 100%;
}

.server-logo {
    width: 128px;
    height: 128px;
    border: #ccc solid 1px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 1em;
}

.server-logo img {
    max-width: 100%;
}

.cookie-popup {
    display: flex;
    position: fixed;
    bottom: 30px;
    width: fit-content;
    height: fit-content;
    right: 30px;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    z-index: 100;
}


.cookie-body {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    height: fit-content;
    background: #1d1d1d;
    padding: 32px;
    border-radius: 16px;
    gap: 16px;
}

.cookie-text a {
    text-decoration: underline;
}

.cookie-buttons button {
    border-radius: 6px;
    border: 1px solid #242424;
    padding: 8px 12px;
    color: #F2F2F2;
    font-family: "HelveticaNeue-Medium";
    font-size: 14px;
    line-height: normal;
    text-align: center;
    cursor: pointer;
    background: #171717;
}

.cookie-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.main_fon_img::after {
    position: absolute;
    top: 0;
    left: -2px;
    content: '';
    width: 102%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(0deg, #111 0%, #11111100 60%),
        linear-gradient(0deg, #111 0%, #11111100 60%);
}

.main_fon_img {
    position: relative;
}

@media (min-width: 1960px) {

    .main_fon_img {
        max-width: 1960px;
        margin: 0 auto;
    }

    /* .main_fon_img::after {
        background: linear-gradient(0deg, #111 0%, #11111100 60%),
            linear-gradient(0deg, #111 0%, #11111100 60%),
            linear-gradient(90deg, #111111 5%, #11111185 15%, #11111100 25%),
            linear-gradient(90deg, #111111 5%, #11111185 15%, #11111100 25%),
            linear-gradient(-90deg, #111111 5%, #11111185 15%, #11111100 25%),
            linear-gradient(-90deg, #111111 5%, #11111185 15%, #11111100 25%) !important;
    } */

    .main_fon_img::after {
        background: linear-gradient(0deg, #111 0%, #11111100 60%),
                    linear-gradient(0deg, #111 0%, #11111100 60%),
                    linear-gradient(90deg, #111111 0%, #11111185 5%, #11111100 7%),
                    linear-gradient(90deg, #111111 0%, #11111185 5%, #11111100 7%),
                    linear-gradient(-90deg, #111111 0%, #11111185 5%, #11111100 7%),
                    linear-gradient(-90deg, #111111 0%, #11111185 5%, #11111100 7%) !important;
    }
}

@media (max-width: 1220px) {
    .main_wrapper {
        padding: 0 16px;
    }
}

@media (max-width: 900px) {
    .main_wrapper {
        padding: 0;
    }

    .main_fon {
        display: none;
    }

    .side_banner {
        display: none;
    }
}

@media (max-width: 450px) {

    .cookie-body {
        max-width: 340px;
        padding: 16px;
    }

    .cookie-popup {
        bottom: 15px;
        right: 15px;
    }
	.main_fon {
    position: relative;
    display: block;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

/* контейнер видео */
.main_fon_video {
    position: absolute;
    inset: 0;
}

/* само видео */
.main_fon_video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* затемнение как у баннеров */
.main_fon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
}

}
/* =========================
   MOBILE VIDEO FULLSCREEN FIX
   ========================= */

html, body{
  height: 100%;
}

@media (max-width: 900px){
  .main_fon{
    height: 100vh !important;
    height: 100svh !important; /* корректно для моб. адресной строки */
  }

  /* если внутри .main_fon у тебя видео/картинка — пусть cover */
  .main_fon video,
  .main_fon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* чтобы контент не “прилипал” к низу, если есть fixed элементы */
  body{
    padding-bottom: max(80px, env(safe-area-inset-bottom));
  }
}
/* =========================
   HERO VIDEO / MOBILE FULLSCREEN (stable)
   ========================= */

/* 1) Фон-видео всегда позади контента */
#body-background.main_fon{
  position: fixed;
  inset: 0;
  z-index: 0;           /* ниже header/main, но выше body background */
  height: auto;         /* не держим 600px */
  display: block;
}

/* 2) Видео растягиваем cover */
#body-background .main_fon_video,
#body-background .main_fon_video video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#body-background .main_fon_video video{
  object-fit: cover;
}

/* 3) Затемнение (чтобы текст/контент читался) */
#body-background::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
  pointer-events:none;
}

/* 4) ВАЖНО: чтобы фон-ссылка не перехватывала клики по UI */
#body-background{
  pointer-events: none;
}
#body-background .main_fon_video{
  pointer-events: none;
}

/* 5) А вот сам хедер/контент — снова кликабельные и выше */
#header, #main, #footer{
  position: relative;
  z-index: 10;
}

/* 6) Мобилка: используем корректную высоту вьюпорта */
@media (max-width: 900px){
  #body-background.main_fon{
    display: block !important;      /* отменяем display:none на мобиле */
    height: 100vh;
    height: 100svh;                 /* стабильнее при адресной строке */
  }
}

/* =========================
   STOP BG VIDEO ON MOBILE
   ========================= */
@media (max-width: 900px){
  /* оставляем сам блок фона, но убираем видео */
  .main_fon_video{ display: none !important; }

  /* даём статичный фон вместо видео */
  #body-background.main_fon{
    display: block !important;
    position: fixed;
    inset: 0;
    height: 100vh !important;
    height: 100svh !important;
    background: url("images/file.685c216edc2309.21857283.jpg") center / cover no-repeat;
  }

  /* лёгкое затемнение как было */
  #body-background.main_fon::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.35);
    pointer-events:none;
  }
}

/* =========================
   DESKTOP BG BRIGHT FIX
   ========================= */
@media (min-width: 901px){
  /* ослабляем затемнение фона */
  #body-background::after{
    background: rgba(0,0,0,0.13) !important; /* было ~0.35 */
  }
}


/* Language dropdown: click-to-open */
.header_lang .dropdown-content { display: none; }
.header_lang .dropdown.is-open .dropdown-content { display: block; }

/* ==== Background must NOT block header clicks ==== */
#body-background.main_fon{
  position: fixed;      /* фон всегда на фоне */
  inset: 0;
  z-index: 0;           /* ниже всего контента */
}

/* весь контент поверх фона */
.main_wrapper{
  position: relative;
  z-index: 2;
}

/* хедер точно кликабельный */
#header{
  position: relative;
  z-index: 10;
}

/* ===== ONLINE PANEL ===== */
.online_panel{
  background: linear-gradient(
    180deg,
    rgba(140,20,20,0.10),
    rgba(0,0,0,0.00)
  );
  border: 1px solid rgba(255,255,255,0.06);
}

body:not(.dark) .online_panel{
  background: linear-gradient(
    180deg,
    rgba(140,20,20,0.06),
    rgba(255,255,255,0.00)
  );
  border: 1px solid rgba(0,0,0,0.06);
}

.online_panel .filter_panel_head{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.online_status{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(140,20,20,0.9);
}

.online_dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(140,20,20);
  box-shadow: 0 0 6px rgba(140,20,20,0.9);
  animation: pulseOnline 1.6s infinite;
}

@keyframes pulseOnline{
  0%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.4); opacity:.5; }
  100%{ transform: scale(1); opacity:1; }
}

.online_body{
  padding: 14px 0 4px;
  text-align: center;
}

.online_value{
  font-family: 'HelveticaNeue-Bold';
  font-size: 32px;
  line-height: 1;
  color: #F2F2F2;
}

body:not(.dark) .online_value{
  color: #171717;
}

.online_text{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(242,242,242,0.6);
}

body:not(.dark) .online_text{
  color: rgba(23,23,23,0.6);
}
/* =========================
   KB Banner Ad (GIF/PNG)
   ========================= */

.kb_ad{
  max-width: 940px;
  margin: 12px auto 0;
}

.kb_ad_link{
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;

  /* рамка + стекло (как в клиенте) */
  border: 1px solid rgba(255,205,120,.12);
  background: linear-gradient(180deg, rgba(30,30,30,.62), rgba(10,10,10,.16));
  box-shadow: 0 18px 60px rgba(0,0,0,.60);
  transform: translateZ(0);
}

/* тонкая золотая линия сверху */
.kb_ad_link::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,205,120,.26), transparent);
  opacity: .95;
  pointer-events:none;
  z-index: 3;
}

/* мягкий “блик” */
.kb_ad_link::after{
  content:"";
  position:absolute;
  inset:-70%;
  background: radial-gradient(circle at 18% 18%, rgba(255,205,120,.14), transparent 55%);
  opacity: .55;
  pointer-events:none;
  z-index: 2;
}

/* картинка баннера */
.kb_ad_img{
  display:block;
  width: 100%;
  height: auto;
  /* если баннеры разного размера — можно включить фикс. высоту:
     height: 130px; object-fit: cover; */
}

/* Бейдж “Реклама” */
.kb_ad_badge{
  position:absolute;
  top: 10px;
  right: 10px;
  z-index: 4;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;

  padding: 6px 9px;
  border-radius: 999px;

  border: 1px solid rgba(255,205,120,.22);
  background: rgba(255,205,120,.10);
  color: rgba(255,220,160,.98);

  backdrop-filter: blur(10px);
}

/* hover / active */
.kb_ad_link{
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease;
}
.kb_ad_link:hover{
  transform: translateY(-2px);
  border-color: rgba(255,205,120,.20);
  box-shadow: 0 28px 90px rgba(0,0,0,.72), 0 0 34px rgba(255,205,120,.12);
  filter: saturate(1.03);
}
.kb_ad_link:active{
  transform: translateY(0);
}

/* моб — компактнее */
@media (max-width: 560px){
  .kb_ad_link{ border-radius: 14px; }
  .kb_ad_badge{ top: 8px; right: 8px; padding: 5px 8px; font-size: 10px; }
}
.kb_ad_img{
  width:100%;
  height:130px;
  object-fit: cover;
}

/* ===== L2 CURSOR (your paths) ===== */
html, body, *{
  cursor: url("/images/l2.cur"), auto;
}

a,
button,
[role="button"],
.header_nav_link,
.footer_link,
.kb_card,
.server_card,
.filter_banner,
.kb_reco_card{
  cursor: url("/images/l21.cur"),
          url("/images/l2-default.cu"),
          pointer;
}
.cursor-preload{
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  cursor: url("/images/l2-default.cu"), auto;
}
.cursor-preload{
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  cursor: url("/images/l21.cur"), auto;
}
html, body {
  cursor: url("/images/l2-default.cu"), auto !important;
}

* {
  cursor: inherit !important;
}

a, button, [role="button"], input[type="submit"], .header_nav_link, .footer_link,
.kb_card, .server_card, .filter_banner, .kb_reco_card {
  cursor: url("/images/l21.cur"), url("/images/l2-default.cur"), pointer !important;
}
html, body, *{
  cursor: url("/images/l2-default.cur"), auto !important;
}

a, button, [role="button"]{
  cursor: url("/images/l21.cur"), url("/images/l2-default.cur"), pointer !important;
}
/* 1) Важно: все элементы внутри карточек наследуют cursor от родителя */
.kb_card *,
.server_card *,
.filter_banner *,
.kb_reco_card * {
  cursor: inherit !important;
}

/* 2) Самим карточкам — pointer-курсор */
.kb_card,
.server_card,
.filter_banner,
.kb_reco_card {
  cursor: url("/images/l21.cur"),
          url("/images/l2-default.cur"),
          pointer !important;
}