body, html {
margin:0;
padding:0;
height: 100%;
font-family: "Verdana", sans-serif;
background: #010619;
font-size:16px;
overflow-x: hidden;
}

  
  
  
  body {display: flex; flex-direction: column; }

  a {
    text-decoration: none;
    color: #fff;
  }
  
  tbody a {text-decoration: underline;
    color: #fff;}
  
 .list-group a {
 
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  .list-group svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }


.type {font-size:10px;margin-top:5px;}
.type-2 {font-size:9px;}
.image-tbl span {margin:10px; font-weight:600;}



 .button-orange margin {width:320px;}
 .create-orange {color:#FF5722;display:inline-block;}
 .dude-comment a {border-bottom:1px solid #fff;}
	#result-registration { margin-top: 10px; font-size: .8em; }
	
	
	 /* Стили кнопки спойлера */
  .spoiler-btn {
  max-width:200px;
   
    
    padding: 4px 10px;
    background-color: #3d5b85;
    border: 0.5px solid #8fa8cc;
   
    color: white;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
       clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);

  }

  .spoiler-btn:hover {
    background-color: #1b293d;
  }

  /* Прячем текст спойлера по умолчанию */
  .spoiler-content {
    font-size: 14px;
   
    
  }
	
	
	


/* Основной контейнер или родительский блок */
.header-container, .main-title-block, .logo-main-page {
  max-width: 100vw; /* максимальная ширина не больше ширины окна */
  box-sizing: border-box; /* учитываем паддинги в ширине */
  margin-left: auto;
  margin-right: auto; /* центрируем блок */
  padding-left: 15px; /* внутренние отступы для мобильных */
  padding-right: 15px;
  position: relative; /* фиксируем позиционирование для внутренних элементов */
}

/* Для адаптации svg и текста внутри */


/* Центрирование текста и элементов */
.logo-main-page img {

  display: flex;
  align-items: center;
  justify-content: center; /* центр горизонтально */
  width: 225px;
  height:85px;
 

}



.logo-main-page2 {

 
margin:0 auto;

 

}

.logo-main-page2 img {

 
  align-items: center;
  justify-content: center; /* центр горизонтально */
  width: 200px;
  height:75px;
  margin-top:30px;
 

}



.logo-main-page-p img {

  display: flex;
  align-items: center;
  justify-content: center; /* центр горизонтально */
  width: 220px;
  height:80px;
 

}


.logo-main-page-g img {

  display: flex;
  align-items: center;
  justify-content: center; /* центр горизонтально */
  width: 160px;
  height:60px;
 

}



/* Можно добавить медиа запрос для мелких экранов */
@media (max-width: 480px) {
  .header-container, .main-title-block, .logo-main-page {
    padding-left: 10px;
    padding-right: 10px;
  }
  .main-title-block h1, .main-title-block h2 {
    text-align: center;
  }
  .button-blue-main {
    width: 100%; /* кнопка занимает всю ширину на мобильных */
    box-sizing: border-box;
       font-family: Verdana, sans-serif;
  }
}


 .contner {
    max-width: 900px;
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  .tile {
    position: relative;
    flex: 1 1 calc(33.333% - 10px); /* Три в ряд с учетом gap */
    overflow: hidden;
    border-radius: 10px;
    min-width: 0;
  }
  .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Изображение не искажается, покрывает плитку */
    display: block;
    border-radius: 12px;
  }
  
  .tile img {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.tile:hover img {
  transform: scale(1.05);
  filter: brightness(0.8);
}


  .flex-container-new {
    display: flex;
    gap: 20px;
    max-width:1800px;
    margin:0 auto;
  }
  .left-block-new, .right-block-new {
    flex: 1;
  }
  @media (max-width: 768px) {
    .flex-container-new {
      flex-direction: column;
    }
    
    .right-sidebar {
    display:none;
    
  }  
    
  }



  
  
  .tile-title {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8); /* Тень для читаемости */
    z-index: 10;
  }
  @media (max-width: 768px) {
    .tile {
      flex: 1 1 calc(50% - 10px); /* Два в ряд на планшетах */
    }
  }
  @media (max-width: 480px) {
    .tile {
      flex: 1 1 100%; /* Один в ряд на маленьких экранах */
    }
  }








  /* Верхний верхний сайдбар */
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background:  #010619;
  border-bottom: 1px solid #1b293d;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 15px;
    z-index: 1000;
  }
  
.spdbr {
  background:#010619; 
  
color:#fff;
font-size:16px;
padding:5px;
overflow: hidden;
white-space: nowrap;
font-family: Verdana, sans-serif;
}  

.pls-read {
  display: flex;
  align-items: center; /* выравнивание по вертикали */
  gap: 4px; /* небольшой отступ между текстом и SVG */
  color:#fff;
  margin-left:20px;
  font-size:22px;
  font-size: clamp(16px, 2vw, 22px); 
}

.pls-read svg {
  display: block; /* убирает лишнее пространство под SVG */
  vertical-align: middle; /* дополнительно для совместимости */

}

     h1,h2,h3 {
       display:block;
    margin-block-start: 0.8em;
margin-block-end: 0.8em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;}
   
    
h1 {
    font-size: 2em;
  }

h2 {
    font-size: 1.5em;
  }

h3 {
    font-size: 1.2em;
  }
    
  
.h1-white {color:#fff; text-align:center; font-size:2em;}
.h1-nightblue {color:rgb(24, 49, 83); font-size:2em;}
.h2-white {color:#fff; text-align:center;}
.h2-nightblue {color:rgb(24, 49, 83); margin-top:25px;}
.h3-white {color:#fff; text-align:center;}
.h3-nightblue {color:rgb(24, 49, 83);}
.p-white {color:#fff; text-align:center;}
.p-nightblue {color:rgb(24, 49, 83);}

.h1-white-left {color:#fff; font-size:2em;}
.h2-white-left {color:#fff; font-size:1.5em;
  white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top:0px;
        padding-top:.85em;

}
.h3-white-left {color:#fff;font-size:1.2em;}
.p-white-left {color:#fff;}

.h2-white-left-tier {color:#fff; font-size:1em;}


.dude-sign {border-top:1px solid #fff;text-align:center;}

.close {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 0;
  top: 0;
}
@media (min-width: 768px) {
  .close {
    top: 0;
    right: 0;
  }
}

.title-link {color:#fff; font-size:16px;}
.card-img {width:100%;}

.svg {    display: flex;
    align-items: center; 
    margin:20px; }
    
.avatar {width:110px;height:110px;}   
.login-name {    
  display: flex;
  justify-content: center;
 
  margin: 10px;

} 

.logo-in-menu-games {margin:0 auto;margin-top:10px;padding-bottom:5px;  border-bottom: 1px solid #1b293d; }


 
 .logo {
    display: flex;
    align-items: center; /* выравнивание по вертикали */
  
    white-space: nowrap;
    
  }

  .logo img {
    width: 145px;
    height: 50px;
margin-left:5px;
  
    display: block; /* Чтобы убрать возможные нижние отступы у img */

  }
  
  .logo-sign-in {   display: flex;
    align-items: center; /* выравнивание по вертикали */
  
  
    font-weight: 100;
    font-style: normal;
    font-size: 1.1em;
    white-space: nowrap;}
    
  .logo-img-sign-in {    width: 80px;
    height: 80px;
    margin-right: 15px;
    
    display: block; /* Чтобы убрать возможные нижние отступы у img */}
  
  
 .logo-main-page {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
   
   
    font-weight: 100;
    font-style: normal;
    font-size: 1.4em;
    margin: 0 auto; /* убираем фиксированные отступы, центрируем */
    max-width: 100vw;
    box-sizing: border-box;
    padding: 23px 15px 15px 15px;
    position: relative;
}

  .logo-img-main-page {
    width: 60px;
    height: 60px;
    margin-right: 15px;
    display: block; 
    }
  
  
     .logo-in-sidebar {
    display: none;
  }
    .logo-in-sidebar img {
    display: none;

  }


  .top-menu {
    display: flex;
    gap: 5px;
    flex-grow: 1;
    margin-left:15px; 
    font-size:17px;
    font-weight:600;
   
  }

  .top-menu a {
    color: white;
    font-weight: 600;
    padding: 4px 8px;
    display: inline-block;
    white-space: nowrap;
    transition: background 0.3s ease;
  }

  .top-menu a:hover {
    color:#FF5722;
    
  }



.hamburger {
  font-size: 28px;
  cursor: pointer;
  font-weight:bold;
  color: white;
margin-top:-5px;
  padding:10px;
  display: none;

  z-index: 2100;
}



.sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  width: 350px;
  height: calc(100% - 50px);
  background: #010619;
  

  
  
  
  
  
  color: white;
overflow-x: hidden; /* запрет горизонтальной прокрутки и обрезка лишнего */
  transition: width 0.3s ease, left 0.3s ease;
  display: flex;
  flex-direction: column;
  z-index: 4500;
   border-right: 1px solid #1b293d;
   pointer-events: auto;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar .toggle-btn {
  background: transparent;
  border: none;
  color: white;
  font-weight: bold;
  font-size: 25px;
  padding: 5px;
  padding-top:10px;

  cursor: pointer;
  border-bottom: 1px solid #1b293d;
   border-top: 1px solid #1b293d;

  text-align: center;
}

.sidebar.collapsed .menu-item span {
  opacity: 0;
  pointer-events: none;
  
}



nav {
  width: 350px;
 
  background-color: transparent;
  padding: 5px 0px;
  user-select: none;
  overflow-x: hidden; /* запрет горизонтальной прокрутки и обрезка лишнего */
  box-sizing: border-box; /* чтобы padding не увеличивал фактическую ширину */
}

nav.shrunk {
  width: 60px;
}

.menu-item {
  position: relative; /* для абсолютного позиционирования псевдоэлемента */
  padding: 16px 20px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Используем псевдоэлемент для фона, чтобы перекрыть padding */
.menu-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px; /* компенсируем padding контейнера nav */
  right: -10px;
  bottom: 0;
  background-color: transparent;
  border-radius: 6px;
  z-index: -1; /* чтобы под текстом */

}

.menu-item:hover::before {
  background-color: #08142d;
}

 .left-75 a {color:#008CBA;}
 
.menu-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor; /* Используем текущий цвет текста для заливки */
  transition: fill 0.3s;
  display: block;
}

.menu-item span {
  font-size: 18px;
  white-space: nowrap;
}

/* При наведении меняем цвет и фон */
.menu-item:hover {
  color: #00a1ff;
  background-color: #08142d;
    
}

/* При сужении скрываем текст */
nav.shrunk .menu-item span {
  display: none;
}

/* Центрируем svg при сужении */
nav.shrunk .menu-item svg {
  margin: 0 auto;
}

.menu-item.active {
  color: #00a1ff;
  background-color: #08142d;
}

.menu-item.active svg {
  fill: currentColor;
}


.menu-item:hover {
    color:#00a1ff; 
  }
  
.menu-item a:hover {
    color:#00a1ff;
    
  }

.submenu {
  padding-left: 35px;
  display: none;
  flex-direction: column;
}

.submenu.show {
  display: flex;
}

.submenu .menu-item {
  padding: 8px 0 8px 10px;
  font-size: 0.9em;
}





  /* Правая боковая панель 250px */
  .right-sidebar {
    position: fixed;
    top: 50px;
    left: 350px;
    width: 120px;
    height: calc(100% - 50px);
    background: #08142d;
    border-right: 1px solid #1b293d;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto; /* Добавим прокрутку по вертикали, если нужно */
    transition: left 0.3s ease;
     scrollbar-width: thin;
  scrollbar-color: #555 transparent;
  }

  .sidebar.collapsed + .right-sidebar {
    left: 60px;
  }

  /* Область контента по центру */
  main.content {
    margin-top: 50px;
   margin-left: 470px; 
    padding: 0px;
    max-width: 1500px;
    background: #010619;
    min-height: 100vh;
    box-sizing: border-box;
    transition: margin-left 0.3s ease;
    
  }
  
 

  .sidebar.collapsed + .right-sidebar ~ main.content {
    margin-left: 180px; /* 60 + 200 */
  }

  
  .press-start-2p-regular {

  font-weight: 400;
  font-style: normal;
}


.container {
  display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: 100vh;
    overflow: visible;
}

/* Левый блок: гибко занимает всё доступное место, может сжиматься */
.left {
background:#010619;
     color:rgb(24, 49, 83);
  flex: 1 1 auto;   /* flex-grow:1, flex-shrink:1, flex-basis:auto */
  min-width: 0;     /* критично: позволяет блоку сжиматься внутри flex-контейнера */
  
  transition: width 0.25s ease, margin-right 0.25s ease;
}


 .left-75 {
 
    background-color: #fff; 
    width: 75%;
    color:rgb(24, 49, 83);
    box-sizing: border-box;
    
    min-height:100vh;
  }

  
  .text-in-left {padding:0 25px 25px 25px; line-height:27px;}
  .text-in-left a 
  {   text-decoration: underline;
    color: #0291e3; }
    
  .right {
    background-color: #010619; 
    
    width: 25%;
    padding: 10px;
    padding-top:0px;
    box-sizing: border-box;
    color:#fff;
    justify-content: center;
    align-items: center;
  }
  
    
  
  
  .right img {
    width: 50%;
    height: auto;
    border-radius: 4px;
     display: block;
    margin-left: auto;
    margin-right: auto;
    
  }
  
.right-chat {
  position:absolute;
  background: #010619;
  color: #fff;
  /* Используем фиксированную базовую ширину, и запрещаем увеличиваться автоматически */
  flex: 0 0 25%;    /* не растёт, не сжимается, занимает 25% */
  width: 25%;
  min-width: 60px;
  border-left: 1px solid #1b293d;
  display: flex;
  flex-direction: column;
  transition: flex-basis 0.3s ease, width 0.3s ease, opacity 0.3s ease;
  overflow: hidden; /* скрываем содержимое при сжатии */
border-right: 1px solid #1b293d;

 position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;

}

/* Заголовок */
.chat-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #3b3c5b;
  padding: 13px 23px;
margin-left:-4px;
  cursor: pointer;
  user-select: none;
height:20px;  
 margin-bottom:2px;
 border-left: 1px solid #010619;
}

.chat-toggle:hover {background-color: #2d4362;}

.chat-left {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left:-2px;
}


.chat-icon {
  position: relative; /* важно для абсолютного позиционирования точки */
  display: inline-block;
  margin-top:4px;
  margin-left:-1px;
}

/* Точка "онлайн" */
.online-dot {

  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #00ff00; /* цвет горящей точки */

 
  animation: onlineBlink 3s infinite;
}

/* Анимация мигания */
@keyframes onlineBlink {
  0%, 90% {
    background-color: #00ff00;
    box-shadow: 0 0 2px 1px rgba(106, 188, 58, 0.8);
    opacity: 1;
  }
  91%, 100% {
    background-color: #010619;
    box-shadow: none;
    opacity: 0.5;
  }
}




.chat-text { font-weight: 700; }

.chat-close {
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding-left: 8px;
  user-select: none;
  transition: color 0.2s;
}
.chat-close:hover { color: #ccc; }

.chat-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  transition: opacity 0.3s ease, padding 0.3s ease;
}

/* ========== Десктоп закрыт ========== */
.right-chat.closed-desktop {
  flex-basis: 60px;  /* ключ — изменяем flex-basis, а не translate */
  width: 60px;
}
/* Скрываем текст и контент в свернутом состоянии */
.right-chat.closed-desktop .chat-text { display: none; }

.right-chat.closed-desktop .btn-text { display: none; }

.right-chat.closed-desktop .online-dot { margin-left:-18px;margin-top:25px; }


.right-chat.closed-desktop .chat-content {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
}

/* ---------- Мобильная версия ---------- */
@media (max-width: 1199px) {
 .container { flex-direction: column; }
  .left { width: 100%; flex: 0 0 auto; min-width: 0; }
    .left-75 { width: 100%; flex: 0 0 auto; min-width: 0; }
  .right-chat {
    order: -1;
    width: 100%;
    flex: 0 0 auto;
    min-width: 100%;
    position: static;  /* чтобы не прилипал и не занимал 100vh */
    transition: max-height 0.3s ease;
  }

   .right-chat.closed-mobile .chat-content { max-height: 0; opacity: 0; overflow: hidden; padding: 0; }
  .right-chat.open-mobile .chat-content   { max-height: 350px; opacity: 1; overflow: auto; }
}

  .right-chat.closed-desktop .chat-close {
  display: none;
}
  
  @media (max-width: 1199px) {
  .right-chat {
    position: sticky;
    top: 50px;
    z-index: 900; /* чтобы не перекрывался */
  }

  .right-chat.closed-mobile .chat-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
  }

  .right-chat.open-mobile .chat-content {
    max-height: 350px;
    opacity: 1;
    overflow: auto;
  }
}


  
  
  
  
  
  
  
  
  
  .right-block 
  {
   clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
    background:  rgb(24, 49, 83);
    border: 4px solid rgb(24, 49, 83);
    image-rendering: pixelated;
    line-height:25px;
    color: #fff;  
    padding:10px;
    font-size:15px;
    box-sizing: border-box;
     
    }
  

 
.dle-search-wrapper {border-bottom: 1px  solid #1b293d;}


.dle-search-form {

  width: 100%;
margin-bottom:0px;
}

.dle-search-input {
  width: 100%;
  height:60px;
  border:none;
  border-radius:0px;
  padding: 8px 14px;
  font-size: 18px;
  box-sizing: border-box;
  background:#010618;
  color:#fff;
}
.dle-search-input:focus {
background:#08142f;
outline: none; 
}






@media (max-width: 480px) {
  .button-sign-2 {
    flex-wrap: wrap; /* если не помещаются, переносим на новую строку */
  }
  .button-grey-sign {
    flex: 1 1 100%; /* на мобильных кнопки занимают всю строку */
    max-width: 100%;
  }
}





.button-green-ok {background-color: #6abc3a;height:40px;}

.button-green {  background-color: #6abc3a;}
.button-mal {background-color: #d83434;}
.button-blue {background-color:#00a1ff;}

.button-blue-close {background-color:#00a1ff;
padding:0px; 

}
.button-orange {background-color:#FF5722;}
.button-tiffany {background-color:#009688;}
.button-grey {background-color:#162136;}
.button-purple {background-color:#9f7db1;}


.button-orange-main {background-color:#FF5722;height:60px;width:100%;margin-left:0px;margin-top:-10px;}
.button-blue-main {background-color:#00a1ff;height:60px;width:200px;margin-left:0px; font-weight:bold;font-size:24px;margin-bottom:30px;}

.button-green-ok:hover,
.button-green:hover,
.button-purple:hover,
.button-mal:hover,
.button-blue:hover,
.button-blue-close:hover,
.button-orange:hover,
.button-tiffany:hover,
.button-grey:hover {
  filter: brightness(1.2);
}

.button-green-sign {background-color: #6abc3a;height:40px;}
.button-mal-sign {background-color: #d83434;height:40px;}
.button-blue-sign {background-color:#00a1ff;height:60px;width:100%;margin-left:0px;margin-top:-10px;}
.button-orange {background-color:#FF5722;height:40px;width:100%;margin-left:0px;}


.button-green-sign:hover,
.button-mal-sign:hover,
.button-blue-sign:hover,
.button-orange-sign:hover,
.button-grey-sign:hover {
  filter: brightness(1.2);
}


.button-blue-main:hover,
.button-grey-sign:hover {
  filter: brightness(1.2);
}


.button-container { 
  display: flex;
  justify-content: center; /* центрируем кнопки по горизонтали */
  gap: 10px; /* расстояние между кнопками */
  max-width: 100vw; /* не даём контейнеру выходить за ширину экрана */
  overflow-x: hidden; /* предотвращаем горизонтальную прокрутку */
  margin-top: -10px;
  box-sizing: border-box;
  padding: 0 15px; /* чтобы не прилегать к краям экрана */

  
  }
.button-login {
  
  background-color: #162136;
  height: 50px;
  flex: 1 1; /* кнопки одинаковой ширины, растягиваются равномерно */
  min-width: 0; /* для предотвращения выхода за пределы */
width:148px;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  
  
  }



 button {
     color: #fff;
     background-color: #9f7db1;
     padding: 10px 10px 10px 10px;
   margin:5px;
   min-width:35px;
font-weight:bold;
       font-family: Verdana, sans-serif;
      font-size: 20px;

     border: 0;
     box-shadow: 0px 5px black, 0px -5px black, 5px 0px black, -5px 0px black, 0px 10px #00000038, 5px 5px #00000038, -5px 5px #00000038, inset 0px 5px #ffffff36 ;
     cursor: pointer;
     clip-path: polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 3px 3px);
}
 button:active {
     transform: translateY(5px);
     box-shadow: 0px 5px black, 0px -5px black, 5px 0px black, -5px 0px black,inset 0px 5px #00000038;
}
 
 
  .sign-in {
   position:absolute;
   right:0;
   
   
   }

.popup-fade {
	display: none;
}
.popup-fade:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 9999;
}
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  max-width: 360px;
  width: 90%;
  background: #071021;
  border: 1px solid #162136;
  border-radius: 4px;
  z-index: 99999;
  color: #fff;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  max-height: 90vh; /* ограничиваем высоту попапа 90% высоты экрана */
}


    
  .short-news-item {
    background:#0e1f3f;
    border: 4px solid #213a69; /* Цвет и толщину border можно настроить */
    margin-bottom: 10px; /* Отступ между новостями */
    box-sizing: border-box;
    width: 100%; /* вписываемся в ширину сайдбара */
    clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);

}

  .short-news-item:hover {
    background:#213a69;
    border: 4px solid #00a1ff;
}


.image-wrapper {
    width: 100%;
    padding-top: 100%; /* квадратный блок через соотношение сторон */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #213a69;
}

.image-wrapper img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* картинка заполнит квадрат */
}

.news-title {
    margin: 10px 5px 10px 5px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-weight:600;
    white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}  

.news-title2 {
    margin: 10px 5px 10px 5px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    font-weight:600;
    
}  


.right-sidebar-gor {display:none;}

.avatar-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 15px; /* отступ снизу */
}

.avatar {
  max-width: 100px; /* или нужный размер */
  height: auto;
  border-radius: 50%; /* чтобы аватарка была круглая */
  display: block;
}

.list-group {
  margin-bottom: 0;
 
  padding-right: 5px; /* чтобы скролл не заходил на текст */
}

.grey-lines-login {
  border-bottom: 1px solid #2a2f48; /* светлая разделительная линия */
  padding: 8px 0; /* небольшой вертикальный отступ для компактности */
  font-size: 17px;
}

.grey-lines-login a {
  color: #fff;
  text-decoration: none;
  display: block; /* чтобы можно было кликать по всей строке */
  padding-left: 5px;
}

.grey-lines-login a:hover {
  color: #4eb543; /* цвет при наведении */
}

.login-name {
  font-weight:600;
  font-size: 18px;
  margin-bottom: 30px;
  text-align: center;
}

.short-news-list-custom {
  width: 100%;

}

.short-news-item-custom {
    margin-top:10px;
  display: flex;
  align-items: center;
  background: #213a69;
  border: 4px solid #00a1ff;
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.short-news-item-custom:hover {
  background-color: #4565a1;
  border-color: #00a1ff;
}

.short-news-item-custom a {
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: white;
  box-sizing: border-box;
}



.image-wrapper-custom {
  flex: 0 0 40%;
  max-width: 200px;
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.image-wrapper-custom img {
  width: 100%;
  height: auto;
  max-width: 150px;
  display: block;
  object-fit: contain;
}

.news-title-custom {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  padding: 0 12px 0 20px; /* слева больше паддинга */
  position: relative;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}

/* Вертикальная линия разделитель между картинкой и заголовком */
.news-title-custom::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #00a1ff;
}



/* Адаптив: уменьшаем шрифт и отступы, чтобы не выходил за экран */
@media screen and (max-width: 1450px) and (min-width: 1199px) {
  .news-title-custom {
    font-size: 1em;
    padding: 0 8px;
  }
  .image-wrapper-custom {
    flex: 0 0 35%; /* чуть сузим картинку для больше места */
    max-width: 160px;
    margin-right: 8px;
  }
}


.short-news-list-custom-in-article {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* расстояние между новостями */
margin:25px 0;
  width: 100%;

  box-sizing: border-box;
}






.short-news-item-custom-in-article {
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
  flex: 0 0 calc(50% - 5px); /* две колонки с учётом gap */
  box-sizing: border-box;
  border: 4px solid #000;
  padding: 8px;
  display: flex;
  align-items: center;
  background: #fff;
}

.short-news-item-custom-in-article a {
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.image-wrapper-custom-in-article {
  flex: 0 0 20%;
  max-width: 80px;
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper-custom-in-article img {
  width: 100%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
  display: block;
}

.news-title-custom-in-article {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 1.1em;
  padding: 0 12px;
  position: relative;
  box-sizing: border-box;
}

.short-news-item-custom-in-article {
  border: 4px solid; /* просто ширина и стиль, цвет задаём из JS */
  box-sizing: border-box;
  /* ... остальные стили */ background:#819eae;
}

.short-news-item-custom-in-article:hover {
  background:#62869a;
}

.news-title-custom-in-article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--divider-color, #6abc3a);
}





.header-fullstory .header-content {
  display: flex;
  position:relative;
  align-items: center;

  
  
  
}

.header-icon {
  width: 65px;
  height: 65px;
  margin-right: 10px;
  
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.header-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: inline-block;
}

.header-icon-small {
  width: 35px;
  height: 35px;
  
  
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.header-icon-small img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: inline-block;
}





.header-icon2 {
  width: 65px;
  height: 65px;
  margin-right: 15px;
  margin-left: -20px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.header-icon2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: inline-block;
}




.header-fullstory h2.h2-white-left {
  flex: 1;
  margin: 0;
}

@media (min-width:1387px) {
 
   .chat-toggle {
  
border-left: 1px solid #010619;
} 
    
    
}
  
 


@media (max-width: 400px) {
  .header-fullstory .header-content {
    flex-direction: row; /* Оставляем строку, чтобы текст был справа */
    align-items: center; /* Центрируем по вертикали */
    flex-wrap: wrap; /* Добавляем перенос, если надо */
  }
  .header-icon {
    margin-right: 10px; /* Можно уменьшить отступ справа */
    margin-bottom: 0; /* Убираем нижний отступ */
    width: 50px; /* Можно уменьшить размер иконки для мобильных */
    height: 50px;
  }
  
    .header-icon2 {
    margin-right: 10px; /* Можно уменьшить отступ справа */
    margin-bottom: 0; /* Убираем нижний отступ */
    width: 50px; /* Можно уменьшить размер иконки для мобильных */
    height: 50px;
  }
  
  
  .h2-white-left {
    flex: 1; /* Заголовок занимает оставшееся пространство */
    font-size: 1.2em; /* Можно чуть уменьшить шрифт под мобильные */
    white-space: nowrap; /* Запретить перенос на новую строку */
    overflow: hidden;
    text-overflow: ellipsis; /* Если текста много — показывать троеточие */
  }
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: #38667f;
    box-sizing: border-box;
    position: sticky;
    top: 50px;
    z-index: 2000;
    transition: border-bottom 0.3s ease;
    padding: 0;
}

.tabs.sticky-border {
    border-bottom: 1px solid #274a5d;
}

.tab {
    flex: 0 0 auto; /* ширина по содержимому */
    width: fit-content; /* строго по длине текста */
    padding: 10px 16px;
    cursor: pointer;
    color: white;
    user-select: none;
    border: 1px solid #274a5d;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap; /* текст в строку */
}

.tab:first-child {
    border-left: none;
}

.tab:last-child {
    border-right: none;
}

.tab:last-child.active {
    background: #7191a2;
    color: #fff;
}

.tab:hover {
    background-color: #819eae;
    border-color: #38667f;
}

.tab.active {
    background-color: #fff;
    color: rgb(24, 49, 83);
    border-bottom: none;
}

.tab-content {
    line-height: 27px;
    padding: 0 25px;
    min-height: 100vh;
    max-width: 100vw;
    box-sizing: border-box;
}

.tab-content:not(.active) {
    display: none;
}

/* Десктоп */
@media (min-width: 769px) {
    .tab {
        flex: 1; /* растягиваем на десктопе */
    }
}

/* Мобильная - табы по тексту + заполнение ширины через justify-content */
@media (max-width: 768px) {
    .tabs {
        justify-content: flex-start; /* слева */
        padding: 0;
    }
    
    .tab {
        padding: 12px 12px;
        margin-right: 1px; /* зазор между табами */
        flex-shrink: 0; /* НЕ сжимаем */
    }
    
    .tab:last-child {
        margin-right: 0;
    }
}



  .tab-content-2 {
  line-height:27px;
    padding: 0px;
   min-height:100vh;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .tab-content-2:not(.active) {
    display: none;
  }
  
  
  
.trade-tab {background:#010619; color:#9aaec4;}
.trade-h2 {margin-top:0;padding-top:0.8em;}

.quote {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 85px;
  position: relative;
  background-repeat: no-repeat;
  background-position: 1.5% center;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  background-size: 50px;
  /* УБРАЛИ background-image - используем ::before */
  border: 4px dashed #d5d9ec;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
}

.quote::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M256,22.974h-27.656c-4.731,0-8.367,4.188-7.705,8.872l4.904,34.683H256h30.457l4.904-34.683c0.662-4.685-2.974-8.872-7.705-8.872H256z' fill='%23BA8280'/%3E%3Cpolygon fill='%23965C5C' points='222.464,44.751 225.543,66.528 256,66.528 286.457,66.528 289.536,44.751'/%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='256' x2='256' y1='475.6611' y2='-13.8296'%3E%3Cstop offset='0.0103' stop-color='%23FFCCE0'/%3E%3Cstop offset='1' stop-color='%23FFE6FA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M328.733,181.56l0.087,0.01c-0.048-0.01-0.091-0.026-0.139-0.036c-1.773-0.89-3.563-1.751-5.371-2.581c-14.48-6.648-25.809-18.919-29.865-34.328c-0.437-1.659-0.792-3.245-1.082-4.725c-1.135-5.801-1.559-11.743-0.836-17.609c3.08-25.015,21.564-36.845,21.564-36.845H256h-57.092c0,0,18.484,11.83,21.564,36.845c0.723,5.866,0.299,11.809-0.836,17.609c-0.29,1.479-0.646,3.065-1.082,4.725c-4.058,15.409-15.385,27.68-29.865,34.328c-1.808,0.83-3.598,1.691-5.371,2.581c-0.048,0.01-0.091,0.026-0.139,0.036l0.087-0.01c-56.602,28.424-94.309,88.938-89.133,157.693c6.142,81.592,73.709,146.511,155.471,149.65c92.571,3.555,168.735-70.437,168.735-162.217C418.34,263.187,381.859,208.238,328.733,181.56z' fill='url(%23grad1)'/%3E%3Cpath d='M312.854,59.05H196.377c-7.289,0-13.197,5.908-13.197,13.198l0,0c0,7.289,5.908,13.197,13.197,13.197h116.477c7.289,0,13.198-5.908,13.198-13.197l0,0C326.052,64.958,320.143,59.05,312.854,59.05z' fill='%23FFCCE0'/%3E%3Cpath d='M198.908,85.445c0,0,7.582,4.887,13.846,14.958h86.492c6.264-10.071,13.846-14.958,13.846-14.958H256H198.908z' fill='%23DB8DA5'/%3E%3Cpath d='M384.15,333.04c0.521-9.888-0.088-19.542-1.703-28.852c-3.918-22.584-24.301-38.612-47.162-36.966c-35.465,2.555-72.27,23.617-83.893,30.801c-2.79,1.724-5.632,3.374-8.594,4.781c-39.337,18.691-69.826,14.979-90.558,6.503c-11.732-4.796-24.558,3.87-24.573,16.546v0.299c0,73.722,62.162,132.925,136.932,128.052C328.913,450.013,380.758,397.401,384.15,333.04z' fill='%23CC5697'/%3E%3Cpath d='M186.041,206.189c0,0-35.918,7.771-43.749,52.925c-0.852,4.907,2.501,9.619,7.404,10.492c7.724,1.376,20.066,1.479,34.174-6.28c6.333-3.482,11.892-8.19,16.729-13.561c5.931-6.581,13.164-16.51,14.123-26.594c0.947-9.973-7.45-18.322-17.468-18.325C193.898,204.846,190.046,205.181,186.041,206.189z' fill='%23FFFFFF'/%3E%3Ccircle cx='182.974' cy='369.12' fill='%23A03774' r='15.998'/%3E%3Ccircle cx='244.055' cy='339.308' fill='%23A03774' r='4.908'/%3E%3Ccircle cx='282.23' cy='396.389' fill='%23A03774' r='27.269'/%3E%3Ccircle cx='332.041' cy='319.311' fill='%23A03774' r='12.543'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}



/* Кнопка с картинкой на всю ширину */
  .image-button {
     border-bottom: 1px solid #1b293d;
    position: relative;
    width: 100%;
    min-width:280px;
    height: 60px;
    border: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    background: none;
  }
  .image-button:hover, .image-button:focus {
    opacity: 1;
    outline: none;
  }
  /* Картинка растянутая на всю кнопку */
  .image-button img {   
    border-bottom: 1px solid #1b293d;
    width: 100%;
    height: 60px;
    object-fit: cover;
    display: block;
  }
  /* Белая иконка слева, поверх картинки */
  .image-button svg.icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    fill: white;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
    pointer-events: none;
  }
  /* Текст лежит поверх картинки по центру, белый с тенью */
  .image-button .button-text {
    position: absolute;
    left: 18px; /* чуть справа от иконки */
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
    font-size: 19px;
    font-weight: 400;
    white-space: nowrap;
    pointer-events: none;
  }
  /* Текстовое меню под кнопкой */
  .text-menu {
    margin-top: 10px;
    padding: 0 15px;
    color: white;
  }
  .text-menu ul {
    padding-left: 0;
    list-style: none;
  }
  .text-menu li {
    margin-bottom: 10px;
  }
  .text-menu a {
    color: white;
    text-decoration: none;
    font-size: 16px;
  }
  .text-menu a:hover, .text-menu a:focus {
    text-decoration: underline;
  }
  /* Боковой сайдбар с играми */
  .sidebar-expand {
    position: fixed;
    top: 0;
    left: -280px; /* скрыт слева */
    width: 280px;
    height: 100vh;
  background: #08142d;
    border-right: 1px solid #1b293d;
    overflow-y: auto;
    transition: left 0.35s ease;
    display: flex;
    flex-direction: column;
    z-index: 5000;
  }
  .sidebar-expand.active {
    left: 0px;
  }
  /* Кнопки игр */
  
  
 .sidebar-expand .game-button {
  position: relative;
 margin-left:10px;  
 margin-right:10px;
 margin-bottom:5px;
 margin-top:5px;
 /* растянуть на всю ширину */
  height: 60px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  display: block;         /* оставляем block чтобы не ломать размеры img */
  box-sizing: border-box;
  border: 1px solid #1b293d;
}

.sidebar-expand .game-button img {
  width: 280px;            /* пусть ширина определяется пропорционально */
  height: 60px;           /* высота как у кнопки */
  max-width: 100%;        /* не выходить за границы контейнера */
  object-fit: cover;    /* показывать полностью, без обрезки */
  display: block;
}


  


.sidebar-expand .game-button:hover,
.sidebar-expand .game-button:focus {
  opacity: 1;
  outline: none;
  border:2px solid #38667f;
     clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);

}



.sidebar-expand .game-button svg.icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  fill: white;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.7));
  pointer-events: none;
}

.button-text {
  display: flex;
  align-items: center;  /* Вертикальное центрирование */
  gap: 16px;            /* Расстояние между иконкой и текстом */
}


.sidebar-expand .game-button {
  position: relative; /* чтобы дочерний абсолютный элемент позиционировался относительно этого */
}

.sidebar-expand .game-button .game-title {
  position: absolute;
top:18px;
left:18px;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.trade-button {
  background-color:  orangered;
  border-bottom: 1px solid #010619;
   border-top: 1px solid #010619;
  height:50px;
  color: white;
  font-size: 14px;
  padding: 14px 19px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  width: 100%; /* чтобы сужалась вместе с родителем */
margin-top:0px;

  box-sizing: border-box;
}

.trade-button:hover {
  background-color: orange; 
}

.trade-button .icon {
  flex-shrink: 0; /* не сжимать svg */
  width: 28px;
  height: 28px;
}

.trade-button .btn-text {
  white-space: nowrap;
  transition: opacity 0.3s ease;
  font-weight: 700;
  font-size:17px;
  
}

.plus {font-size:28px;margin-top:-2px;margin-left:-2px;}



/* При ширине родителя 60px и меньше скрывать текст */
@media (max-width: 60px) {
  .trade-button .btn-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
    display: none;
  }
}

.short-news-item-link-in-article {
  margin-top:20px;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);
  background-color: #0e1f3f;
  border: 4px solid #213a69;
  display: flex;
  align-items: center; /* Выравнивание по вертикали */
  padding: 16px 16px;
  box-sizing: border-box;
  transition: background-color 0.3s, border-color 0.3s;
  max-width: 100%;
  overflow: hidden;
  
}

.short-news-item-link-in-article:hover {
  background-color: #213a69;
  border-color: #00a1ff;
}

.short-news-item-link-in-article a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  width: 100%;
  box-sizing: border-box;
}

.image-wrapper-link-in-article {
  flex: 0 0 20%;
  max-width: 25%;
  margin-right: 12px;
  box-sizing: border-box;
}

.image-wrapper-link-in-article img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-right: 4px solid #213a69;
  transition: border-color 0.3s;
  padding-right:12px;
  margin-right:12px;
}

.short-news-item-link-in-article:hover .image-wrapper-link-in-article img {
  border-color: #00a1ff;
}

.news-title-link-in-article {
  flex: 1;
  display: flex;
  align-items: center; /* Вертикальное выравнивание текста по центру */
  font-size: 1.1rem;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding-left: 16px;
}

/* Адаптивность */
@media (max-width: 600px) {
  .short-news-item-link-in-article {
    flex-direction: column;
    align-items: flex-start;
    padding:4px;
  }

  .image-wrapper-link-in-article {
    flex-basis: auto;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 8px;
  }

  .image-wrapper-link-in-article img {
    
    border-right: none;
    height:90px;
  }

  .short-news-item-link-in-article:hover .image-wrapper-link-in-article img {
    border-color: #00a1ff;
  }

  .news-title-link-in-article {
    padding-left: 0;
    width: 100%;
    font-size: 1rem;
  }
}


.info-bg {
  width: 100%;
  padding: 15px 20px;
  border-radius: 1px;
  background-color: #fff4f4; /* светло-розовый фон для ошибки, можно менять под info */
  color: #b00020; /* темно-красный текст */
  font-family: Verdana, sans-serif;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(176, 0, 32, 0.2);
  border: 1px solid #b00020;
  line-height: 1.4;
  user-select: text;
  box-sizing: border-box; /* учитывает padding внутри ширины */
  min-width: 0; /* позволяет элементу сжиматься */
  word-wrap: break-word;
}

.info-bg b {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
  color: #8b0000;
}


 /* Скрытый по умолчанию блок с комментарием */
  .dude-comment {
    display: none;
    margin-top: 20px;
    color:#fff;
  }
  /* Стили для стрелки */
  .arrow-down-dude {
    cursor: pointer;
    width: 50px;
    height: 50px;
    margin-left: 8px;
    fill: #fff;
    transition: transform 0.3s ease;
  }
  /* При открытии текстового блока поворачиваем стрелку */
  .arrow-down.open {
    transform: rotate(180deg);
  }




















  /* Мобильная версия */
  @media (max-width: 768px) {
    .sidebar-main {
      width: 100%;
    }
    .image-button {
      opacity: 1 !important;
      padding: 0;
    }
  
    .image-button svg.icon {
      left: 12px;
    }
    .image-button img {
      height: 60px;
    }
    
  .sidebar-expand .game-button img {
    height: 60px;
  }
  .sidebar-expand .game-button svg.icon {
    width: 20px;
    height: 20px;
    left: 8px;
  }
  .sidebar-expand .game-button .game-title {
    font-size: 18px;
    left: 38px;
  }
  
  .game-title {
  display: flex;
  align-items: center; /* выравнивает SVG и текст по вертикали */
  gap: 16px; /* расстояние между иконкой и текстом по желанию */
  color: #fff;
}

  .sidebar-expand .game-button {
 
  opacity: 1;
}

}

@media screen and (max-width: 1370px) and (min-width: 1199px) {

.news-title-custom::before {
display:none;
}

}



@media (max-width: 600px) {
  .short-news-item-custom-in-article {
    flex: 0 0 100%;
    margin-bottom: 0px;
  }
}

/* медиа-запрос для узких экранов */
@media (max-width: 400px) {
  .popup {
    width: 95%;
    max-width: none;
  }
}
.popup-close {
  position: absolute;
  top: -20px; /* расстояние от верхнего края попапа */
  right:-20px; /* расстояние от правого края */
  cursor: pointer;
  /* дополнительные стили, если нужно */
}
 
 
 .header-container {
  display: flex;
justify-content: center; /* Центрирует элементы по горизонтали */
  align-items: center;     /* Центрирует элементы по вертикали */
  width:100%;

}
 
 
 /* Мобильная версия */
  
  @media (max-width: 767px) {
    .sidebar {
      display: none;
    }

    .right-sidebar {
      display: none;
    }

    main.content {
      margin-left: 0px;
      padding: 0px;
      min-height: calc(100vh - 50px);
    }
  
    

    .top-menu {
      display: none;
    }

    .hamburger {
      display: block;
    }
  }
 
 
 @media (max-width: 768px) {
  .hamburger {
    display: block;
  }

   .logo-in-sidebar {
    display: flex;
    align-items: center; /* выравнивание по вертикали */

    font-weight: 100;
    font-style: normal;
    font-size: 1em;
    white-space: nowrap;
    margin-right:5px;
    margin-left:7px;
   margin-top:5px;
    text-align: center;
    
  }
    .logo-in-sidebar img {
    width: 150px;
    height: 50px;
    margin-right: 15px;
    display: block; /* Чтобы убрать возможные нижние отступы у img */

  }


  /* Убираем display:none, вместо этого скрываем сайдбар слева */
  .sidebar {
    top: 0 !important;
    
    left: -350px !important;
    width: 350px !important;
    height: 100vh !important;
    transition: left 0.3s ease !important;
    display: flex !important; /* ПОМЕНЯЛИ с none на flex */
    flex-direction: column;
    z-index: 2100;
  }

  .sidebar.visible {
    left: 0 !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
  }

  /* Отключаем сворачивание сайдбара по ширине на мобилке */
  .sidebar.collapsed {
    width: 350px !important;
  }
}
 
 /* Адаптивность для экранов меньше 768px */
  @media (max-width: 1199px) 
  
  {
    
   .short-news-item-link-in-article {
  margin-top:10px;

} 
    
    
    
    .container {
      flex-direction: column;
   
    }
    .right, .left {
      width: 100%;
      height: auto;
    }
    .right {
      order: -1; /* правый (малый) блок становится первым сверху */
      padding: 10px 10px;
    }
    .right-chat, .left {
      width: 100%;
      height: auto;
    }
    
     .right-chat {
      order: -1; /* правый (малый) блок становится первым сверху */
     
    }
    
    
    

   
  
  }
  
    @media (max-width: 768px) {

   main.content {
   
    margin-left: 0px; 
    
  } }
  
   @media (max-width: 540px) {
     
    
     
     
   .sign-in {
   display:none;
  } 
  
    .sign-in-small {
margin-left:-4px;
}
}



@media (min-width: 768px) {
  .desktop-off {
    display: none !important;
  }
}


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

  
  
  }
  
  
 

  

   @media (min-width: 541px) {
 
   .sign-in-small {display:none;}
  
  }

@media (max-width: 768px) {

  /* Чтобы скрыть текст меню при сжатии */
  .sidebar.collapsed {
    width: 60px !important;
  }
}
/***************************************************
 * Generated by SVG Artista on 11/4/2025, 1:17:34 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.7s ease 0.8s both;
          animation: animate-svg-fill-1 0.7s ease 0.8s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.7s ease 0.9s both;
          animation: animate-svg-fill-2 0.7s ease 0.9s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.7s ease 1s both;
          animation: animate-svg-fill-3 0.7s ease 1s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.7s ease 1.1s both;
          animation: animate-svg-fill-4 0.7s ease 1.1s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 255, 0);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.7s ease 1.2000000000000002s both;
          animation: animate-svg-fill-5 0.7s ease 1.2000000000000002s both;
}