.joinbtn .button-mid:after {right: -25px;}
.joinbtn .button-mid:before {left: -25px;}

/* Скрываем элемент, если нужно */
.join-section .hidden {
  display: none !important;
}

/* Секция со списком кланов скрывается/показывается через чекбокс #toggleJoin */
#toggleJoin:not(:checked) ~ .join-section {
  opacity: 0;
  margin:0 auto;
}
#toggleJoin:not(:checked) ~ .join-section .guild-item {
  transition: opacity 1s ease, transform 1s ease;transform: translateY(0) scale(0);}

/* Общие стили для списка гильдий */
#guild-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.join-section .guild-item {
  margin: 10px 0;
}
.join-section .guild-button {
  display: inline-block;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.separator_g {width:0;height:1px; background-color: var(--primary-bronze);
  transition: all .5s ease-in-out;
  position: relative;
  margin: 0 auto;
}
.join-section .guild-button:hover .separator_g,.join-section .guild-button:active .separator_g,.join-section .guild-button:focus .separator_g {
width:100%;
}

/* Блок модалки внутри <li> */
.join-section .modal {
  position: fixed;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  padding: 20px;

  /* Изначально скрыто */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 999; /* выше всего */
}

/* Когда чекбокс .guild-toggle включён — показываем .modal */
.guild-toggle:checked ~ .modal {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.join-section:has(.guild-toggle:checked) #guild-list,
.join-section:has(.guild-toggle:checked) .guild-item,
.join-section:has(.guild-toggle:checked) .content{
  transform: none !important;
}

/* close-button */
.join-section .close-button {
  position: absolute;
top: 20px;
  right: 5vh;
  cursor: pointer;
  background: none;
  border: none;
z-index: 999;
}
.join-section .modal-content .close-button {color: rgb(37 34 28/1);top: 20px;
  right: 5vh;
}
.join-section .close-button svg {
  pointer-events: none;
}

/* (Опционально) Скрываем сам чекбокс .guild-toggle */
.join-section .hidden {
  display: none;
}
.join-section .guild-image{width:80px;height:auto;}
.guild-button p {text-align:center;}

.separator_g {margin-top:5px;margin-bottom:5px;}
.separator_w {position:relative;}
.separator_w::before {
  position: absolute;
  content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5LjUyIDkuNTIiIGZpbGw9InJnYigxNDIgMTE5IDcxLzEpIj48cGF0aCBkPSJNNS41MSwxLjQxYy0uMDMtLjI4LS40OC0xLjMzLS43NS0xLjQxLS4yNywuMDgtLjcyLDEuMTMtLjc1LDEuNDEtLjM3LS4xNi0uOTgtLjIzLTEuNDgtLjEyLC4zMSwuNDMsLjksMS4wNSwxLjM5LDEuMjUsLjE5LC42MywuNDYsLjc0LC42MywuODEsMCwuMjMsMCwuNDMsMCwuNjYsLjAzLC4xMywuMTQsLjE4LC4yMSwuMjEsLjA3LS4wMiwuMTgtLjA4LC4yMS0uMjEsMC0uMjMsMC0uNDMsMC0uNjYsLjE3LS4wNywuNDQtLjE4LC42My0uODEsLjQ5LS4yMSwxLjA4LS44MiwxLjM5LTEuMjUtLjUtLjExLTEuMTEtLjA0LTEuNDgsLjEyWiI+PC9wYXRoPjxwYXRoIGQ9Ik00LjAxLDguMTFjLjAzLC4yOCwuNDgsMS4zMywuNzUsMS40MSwuMjctLjA4LC43Mi0xLjEzLC43NS0xLjQxLC4zNywuMTYsLjk4LC4yMywxLjQ4LC4xMi0uMzEtLjQzLS45LTEuMDUtMS4zOS0xLjI1LS4xOS0uNjMtLjQ2LS43NC0uNjMtLjgxLDAtLjIzLDAtLjQzLDAtLjY2LS4wMy0uMTMtLjE0LS4xOC0uMjEtLjIxLS4wNywuMDItLjE4LC4wOC0uMjEsLjIxLDAsLjIzLDAsLjQzLDAsLjY2LS4xNywuMDctLjQ0LC4xOC0uNjMsLjgxLS40OSwuMjEtMS4wOCwuODItMS4zOSwxLjI1LC41LC4xMSwxLjExLC4wNCwxLjQ4LS4xMloiPjwvcGF0aD48cGF0aCBkPSJNOC4xMSw1LjUxYy4yOC0uMDMsMS4zMy0uNDgsMS40MS0uNzUtLjA4LS4yNy0xLjEzLS43Mi0xLjQxLS43NSwuMTYtLjM3LC4yMy0uOTgsLjEyLTEuNDgtLjQzLC4zMS0xLjA1LC45LTEuMjUsMS4zOS0uNjMsLjE5LS43NCwuNDYtLjgxLC42My0uMjMsMC0uNDMsMC0uNjYsMC0uMTMsLjAzLS4xOCwuMTQtLjIxLC4yMSwuMDIsLjA3LC4wOCwuMTgsLjIxLC4yMSwuMjMsMCwuNDMsMCwuNjYsMCwuMDcsLjE3LC4xOCwuNDQsLjgxLC42MywuMjEsLjQ5LC44MiwxLjA4LDEuMjUsMS4zOSwuMTEtLjUsLjA0LTEuMTEtLjEyLTEuNDhaIj48L3BhdGg+PHBhdGggZD0iTTEuNDEsNC4wMWMtLjI4LC4wMy0xLjMzLC40OC0xLjQxLC43NSwuMDgsLjI3LDEuMTMsLjcyLDEuNDEsLjc1LS4xNiwuMzctLjIzLC45OC0uMTIsMS40OCwuNDMtLjMxLDEuMDUtLjksMS4yNS0xLjM5LC42My0uMTksLjc0LS40NiwuODEtLjYzLC4yMywwLC40MywwLC42NiwwLC4xMy0uMDMsLjE4LS4xNCwuMjEtLjIxLS4wMi0uMDctLjA4LS4xOC0uMjEtLjIxLS4yMywwLS40MywwLS42NiwwLS4wNy0uMTctLjE4LS40NC0uODEtLjYzLS4yMS0uNDktLjgyLTEuMDgtMS4yNS0xLjM5LS4xMSwuNS0uMDQsMS4xMSwuMTIsMS40OFoiPjwvcGF0aD48L3N2Zz4=');
  display: block;
  width: 16px;
  height: 16px;
  left: 50%;
  transform: translate(-50%, 0) rotate(0);
top: -18px;transition: all .5s ease-in-out;transform-origin: center;
}
.join-section .guild-button:hover .separator_w::before, .join-section .guild-button:active .separator_w::before, .join-section .guild-button:focus .separator_w::before 
{transform: translate(calc(-50% + 2px), 4px) rotate(90deg);transform-origin: center;}

li.guild-item::before {display:none!important;}

.join-section .modal {
background:#dcddd4; opacity:0;
    left: 50%;
    display:block;position:fixed;
    clip-path: polygon(
        /* Верхний край */
        0% 1%, 1% 0%, 2% 1.5%, 3% 0.5%, 4% 1%, 5% 0%, 
        6% 1%, 7% 0.5%, 8% 1.5%, 9% 0%, 10% 1%, 11% 0.5%, 
        12% 1.5%, 13% 0%, 14% 1%, 15% 0.5%, 16% 1.5%, 17% 0%, 
        18% 1%, 19% 0.5%, 20% 1.5%, 21% 0%, 22% 1%, 23% 0.5%, 
        24% 1.5%, 25% 0%, 26% 1%, 27% 0.5%, 28% 1.5%, 29% 0%, 
        30% 1%, 31% 0.5%, 32% 1.5%, 33% 0%, 34% 1%, 35% 0.5%, 
        36% 1.5%, 37% 0%, 38% 1%, 39% 0.5%, 40% 1.5%, 41% 0%, 
        42% 1%, 43% 0.5%, 44% 1.5%, 45% 0%, 46% 1%, 47% 0.5%, 
        48% 1.5%, 49% 0%, 50% 1%, 51% 0.5%, 52% 1.5%, 53% 0%, 
        54% 1%, 55% 0.5%, 56% 1.5%, 57% 0%, 58% 1%, 59% 0.5%, 
        60% 1.5%, 61% 0%, 62% 1%, 63% 0.5%, 64% 1.5%, 65% 0%, 
        66% 1%, 67% 0.5%, 68% 1.5%, 69% 0%, 70% 1%, 71% 0.5%, 
        72% 1.5%, 73% 0%, 74% 1%, 75% 0.5%, 76% 1.5%, 77% 0%, 
        78% 1%, 79% 0.5%, 80% 1.5%, 81% 0%, 82% 1%, 83% 0.5%, 
        84% 1.5%, 85% 0%, 86% 1%, 87% 0.5%, 88% 1.5%, 89% 0%, 
        90% 1%, 91% 0.5%, 92% 1.5%, 93% 0%, 94% 1%, 95% 0.5%, 
        96% 1.5%, 97% 0%, 98% 1%, 99% 0.5%, 100% 1%,
        /* Правый край */
        99% 2%, 98.5% 3%, 99.5% 4%, 98% 5%, 99% 6%, 98.5% 7%, 
        99.5% 8%, 98% 9%, 99% 10%, 98.5% 11%, 99.5% 12%, 98% 13%, 
        99% 14%, 98.5% 15%, 99.5% 16%, 98% 17%, 99% 18%, 98.5% 19%, 
        99.5% 20%, 98% 21%, 99% 22%, 98.5% 23%, 99.5% 24%, 98% 25%, 
        99% 26%, 98.5% 27%, 99.5% 28%, 98% 29%, 99% 30%, 98.5% 31%, 
        99.5% 32%, 98% 33%, 99% 34%, 98.5% 35%, 99.5% 36%, 98% 37%, 
        99% 38%, 98.5% 39%, 99.5% 40%, 98% 41%, 99% 42%, 98.5% 43%, 
        99.5% 44%, 98% 45%, 99% 46%, 98.5% 47%, 99.5% 48%, 98% 49%, 
        99% 50%, 98.5% 51%, 99.5% 52%, 98% 53%, 99% 54%, 98.5% 55%, 
        99.5% 56%, 98% 57%, 99% 58%, 98.5% 59%, 99.5% 60%, 98% 61%, 
        99% 62%, 98.5% 63%, 99.5% 64%, 98% 65%, 99% 66%, 98.5% 67%, 
        99.5% 68%, 98% 69%, 99% 70%, 98.5% 71%, 99.5% 72%, 98% 73%, 
        99% 74%, 98.5% 75%, 99.5% 76%, 98% 77%, 99% 78%, 98.5% 79%, 
        99.5% 80%, 98% 81%, 99% 82%, 98.5% 83%, 99.5% 84%, 98% 85%, 
        99% 86%, 98.5% 87%, 99.5% 88%, 98% 89%, 99% 90%, 98.5% 91%, 
        99.5% 92%, 98% 93%, 99% 94%, 98.5% 95%, 99.5% 96%, 98% 97%, 
        99% 98%, 98.5% 99%, 99.5% 100%,
        /* Нижний край */
/* Нижний край */
100% 98%, 99% 97.5%, 98% 98.5%, 97% 97.5%, 96% 98%, 
95% 97.5%, 94% 98.5%, 93% 97.5%, 92% 98%, 91% 97.5%, 
90% 98.5%, 89% 97.5%, 88% 98%, 87% 97.5%, 86% 98.5%, 
85% 97.5%, 84% 98%, 83% 97.5%, 82% 98.5%, 81% 97.5%, 
80% 98%, 79% 97.5%, 78% 98.5%, 77% 97.5%, 76% 98%, 
75% 97.5%, 74% 98.5%, 73% 97.5%, 72% 98%, 71% 97.5%, 
70% 98.5%, 69% 97.5%, 68% 98%, 67% 97.5%, 66% 98.5%, 
65% 97.5%, 64% 98%, 63% 97.5%, 62% 98.5%, 61% 97.5%, 
60% 98%, 59% 97.5%, 58% 98.5%, 57% 97.5%, 56% 98%, 
55% 97.5%, 54% 98.5%, 53% 97.5%, 52% 98%, 51% 97.5%, 
50% 98.5%, 49% 97.5%, 48% 98%, 47% 97.5%, 46% 98.5%, 
45% 97.5%, 44% 98%, 43% 97.5%, 42% 98.5%, 41% 97.5%, 
40% 98%, 39% 97.5%, 38% 98.5%, 37% 97.5%, 36% 98%, 
35% 97.5%, 34% 98.5%, 33% 97.5%, 32% 98%, 31% 97.5%, 
30% 98.5%, 29% 97.5%, 28% 98%, 27% 97.5%, 26% 98.5%, 
25% 97.5%, 24% 98%, 23% 97.5%, 22% 98.5%, 21% 97.5%, 
20% 98%, 19% 97.5%, 18% 98.5%, 17% 97.5%, 16% 98%, 
15% 97.5%, 14% 98.5%, 13% 97.5%, 12% 98%, 11% 97.5%, 
10% 98.5%, 9% 97.5%, 8% 98%, 7% 97.5%, 6% 98.5%, 
5% 97.5%, 4% 98%, 3% 97.5%, 2% 98.5%, 1% 97.5%, 0% 98%,
        /* Левый край */
2% 99%, 1.5% 98%, 2.5% 97%, 1% 96%, 2% 95%, 1.5% 94%, 
        2.5% 93%, 1% 92%, 2% 91%, 1.5% 90%, 2.5% 89%, 1% 88%, 
        2% 87%, 1.5% 86%, 2.5% 85%, 1% 84%, 2% 83%, 1.5% 82%, 
        2.5% 81%, 1% 80%, 2% 79%, 1.5% 78%, 2.5% 77%, 1% 76%, 
        2% 75%, 1.5% 74%, 2.5% 73%, 1% 72%, 2% 71%, 1.5% 70%, 
        2.5% 69%, 1% 68%, 2% 67%, 1.5% 66%, 2.5% 65%, 1% 64%, 
        2% 63%, 1.5% 62%, 2.5% 61%, 1% 60%, 2% 59%, 1.5% 58%, 
        2.5% 57%, 1% 56%, 2% 55%, 1.5% 54%, 2.5% 53%, 1% 52%, 
        2% 51%, 1.5% 50%, 2.5% 49%, 1% 48%, 2% 47%, 1.5% 46%, 
        2.5% 45%, 1% 44%, 2% 43%, 1.5% 42%, 2.5% 41%, 1% 40%, 
        2% 39%, 1.5% 38%, 2.5% 37%, 1% 36%, 2% 35%, 1.5% 34%, 
        2.5% 33%, 1% 32%, 2% 31%, 1.5% 30%, 2.5% 29%, 1% 28%, 
        2% 27%, 1.5% 26%, 2.5% 25%, 1% 24%, 2% 23%, 1.5% 22%, 
        2.5% 21%, 1% 20%, 2% 19%, 1.5% 18%, 2.5% 17%, 1% 16%, 
        2% 15%, 1.5% 14%, 2.5% 13%, 1% 12%, 2% 11%, 1.5% 10%, 
        2.5% 9%, 1% 8%, 2% 7%, 1.5% 6%, 2.5% 5%, 1% 4%, 
        2% 3%, 1.5% 2%, 2.5% 1%, 1% 0%);
    border: none;
max-width: 1150px;
max-height: 80vh;
top: 50%;
}

.text-connect .modal-content h2 {
  margin-top: unset;
  padding-bottom: unset;
  font-size: 50px;
  color: var(--primary-bronze);
  display: block;
  float: unset;
  text-transform: uppercase;
  line-height: 46px;
  margin-right: unset;
  flex-shrink: 0;
padding-top:6vh;
padding-bottom:8vh;
text-align: center;
}
.text-connect .modal-content {
  max-height: 80vh;                 /* фикс высота контейнера */
  overflow: auto;               /* скроллим тут */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  display: flex;                /* если нужно — как у тебя было */
  flex-direction: column;
padding-bottom: 5vh;
}

.text-connect .modal-content-text {overflow-y: auto; flex-grow: 1;width: 85%;
  margin-left: 10%;
  padding-right: 5%;}
.text-connect .modal-content h3 {color:#898f5a; border-top: 1px solid var(--primary-bronze); padding-top: 3%;}
.text-connect .modal-content p {color: rgb(37 34 28/1);}
.text-connect .modal-content p:nth-child(2) {text-align:center;color: #898f5a;padding-top: 1%;
  font-size: 26px;
 margin-top:2vh;  
}
.text-connect .modal-content p:nth-child(2):before {width:60%; height:1px;content: "";display:block;background-color:var(--primary-bronze);margin: 0 auto;margin-bottom: 2%;}
.text-connect .modal-content ul {padding-bottom: 10%;}
.text-connect .ul-special {display:block;}
.text-connect .ul-special li {color: rgb(37 34 28/1);margin: 0 auto; text-align: right;max-width:60%;}
.text-connect .ul-special li::before { left: 0; top:9px;}

#guild-list li.guild-item p {font-size:18px;padding-bottom: 5px;}
#guild-list li.guild-item .g-name-tab-about {font-size:24px;text-transform: uppercase; color:var(--primary-bronze);}
#guild-list li.guild-item .g-list {margin-top:-10px;font-size: 12px; color:#898f5a;}
#guild-list li.guild-item .separator_w {text-transform: uppercase;font-size:14px;transition: all .5s ease-in-out;}
.join-section .guild-button:hover .separator_w, .join-section .guild-button:active .separator_w, .join-section .guild-button:focus .separator_w {color:var(--primary-bronze);}

.join-section #guild-list,
.join-section .guild-item,
.join-section .content{
  transform: none !important;
}


@media (max-width: 767px) {
.text-connect .modal-content h2 {
  font-size: 36px;
}
.text-connect .ul-special li {max-width:83%!important;}
.guild-toggle:checked ~ .modal {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -35%) scale(1);
}
  .content #guild-list {
  display: flex;
  flex-direction: column; /* Делаем вертикальный список */
  align-items: center; /* Выравниваем элементы по центру */
  flex-wrap: nowrap; /* Запрещаем перенос на новую строку */
  max-height: 70vh;
  overflow-y: auto; /* Скролл для длинного списка */
  padding: 10px;
padding-top: 55vh;
  gap: 15px; /* Отступ между элементами */
/*transform: translateY(10%);*/
}
}