@import url('https://fonts.googleapis.com/css?family=Lunasima&display=swap');
:root {
  --color-ok-bg: #2d796a;
  --color-ok-border: #93d7ff;
  --color-ok-text: #ffffff;
  --color-ok-accent: #72aca9;

  --color-warn-bg: #83742c;
  --color-warn-border: #e0e37b;
  --color-warn-text: #ffffff;
  /* --color-warn-accent */

  --color-error-bg: rgb(95, 33, 33);
  --color-error-border: #d47272;
  --color-error-text: #ffffff;
  /* --color-error-accent */

  --color-consider-bg: #b79fcc;
  /* --color-consider-border */
  --color-consider-text: #326067;
  /* --color-consider-accent */

  --color-text: #e1e1e2;
  --color-text-accent: #ffffff;

  --color-border: rgb(229, 164, 255);
  --color-border-broken: #CD7E9E;

  --color-bg: rgb(83, 50, 127);

  --color-link: blue;
  --color-link-dark: #c44800;

  --color-pc-button-bg: #8341a8;
  --color-pc-button-bg-hover: #B062D8;
  --color-pc-button-bg-click: #3E0470;
  --color-pc-button-text: white;
  --color-pc-button-text-click: #eee;

  --color-imp-button-bg: #ff003c;
  --color-imp-button-bg-hover: #d6ca60;
  --color-imp-button-bg-click: #f21347;

  --color-unobstrusive-button-bg: var(--color-bg);
  --color-unobstrusive-button-bg-hover: rgb(94, 58, 141);
  --color-unobstrusive-button-bg-click: rgb(111, 71, 163);
  --color-unobstrusive-button-text: var(--color-text);
  --color-unobstrusive-button-text-click: #ffffff;
}

body {
  color: var(--color-text);
  
  background-image: linear-gradient(#220e3a 0%, #BC69E6 70%, #e29843 100%);

  position: relative;

  min-width: 100%;
  height: 100%;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Lunasima", Arial, sans-serif;
}

/* input elements are weird about their font */
input {
  font-family: inherit;
  font-size: inherit;
}

/* If element to scroll to is selected by id in URL, add offset to account for nav bar */
:target:before {
  content: "";
  display: block;
  height: calc(90px + 0.6em); /* fixed header height*/
  margin-top: calc(-90px - 0.6em); /* negative fixed header height */
}

/* Скрываем неактивный контент */
.tab-content {
    display: none;
    animation: fadeIn 1s;
}

/* Описания скрыты по умолчанию */
.tab-content {
    display: none;
    margin-top: 10px;
}

/* Активное описание */
.tab-content.tab-content-active {
    display: block;
}

/* Принудительно в строчку для иконок */
.tab-selection {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center;
}

/* Визуальное выделение "нажатой" иконки */
.tab.tab-active {
    color: var(--color-pc-button-bg-hover) !important;
    transform: scale(1.1);
    transition: transform 0.2s, color 0.2s;
}

.tab:hover {
    color: var(--color-pc-button-bg);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.information-stripe {
  text-align: center;
  color: white;
  font-weight: bold;
  position: relative;
}

.information-stripe span {
  line-height: 50px;
  height: 50px;
  margin: 0px 5px;
}

.information-banner {
  display: flex;
  justify-content: center;
  font-size: 110%;
}

.information-banner > * {
  padding: 50px 20px;
  max-width: 1024px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.information-banner .information {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.information-banner .button {
  height: 25px;
}

.information-banner ul {
  list-style: square inside
    url("data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==");
}

@media (max-width: 1043px) {
  .information-banner > * {
    width: 100%;
  }

  .information-banner.right > * {
    flex-flow: column-reverse;
  }

  .information-banner.left > * {
    flex-flow: column;
  }

  .information-banner .information,
  .information-banner .information * {
    text-align: center !important;
  }

  #changelog h3 {
    display: inline;
  }

  #about-inner {
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  /* Исправляем сдвиг: убираем лишние расчеты и центрируем */
  .information-banner > * {
    width: 100%;
    flex-direction: column !important;
    text-align: center;
    padding: 30px 15px; /* Уменьшаем боковые отступы, чтобы не выталкивать контент */
    box-sizing: border-box; /* Важно, чтобы padding не расширял блок */
  }

  .information-banner.right > * {
    flex-flow: column-reverse;
  }

  /* Центрируем иконки и добавляем отступы между ними */
  .tab-selection {
    justify-content: center !important; 
    flex-wrap: wrap; /* Позволяет иконкам переноситься на новую строку */
    gap: 20px;       /* Добавляет ровные отступы между кнопками-иконками */
    margin: 15px 0;
    display: grid !important;
    /* Создаем 2 колонки по умолчанию для десктопа, чтобы было 4 блока */
    grid-template-columns: repeat(2, auto);
  }

  .information-banner .information,
  .information-banner .information * {
    text-align: center !important;
    width: 100% !important;
  }

  #about-inner {
    flex-direction: column;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .tab-selection {
        /* Выстраиваем все 4 блока в одну ровную строку */
        grid-template-columns: repeat(4, auto); 
        gap: 20px;
    }
}

/* --- ЭКСТРЕМАЛЬНО МАЛЫЕ ЭКРАНЫ (Sony / Samsung S8) --- */
@media (max-width: 374px) {
    .tab-selection {
        grid-template-columns: minmax(150px, 1fr); /* Одна широкая кнопка */
    }
.information-stripe div {
    flex-direction: column; /* Выстраиваем фразы в столбик */
    padding: 15px 20px !important;
    border-radius: 60px !important; /* Делаем форму более овальной */
  }

  .information-stripe span {
    margin: 7px 0;    /* Отступы только сверху и снизу */
    font-size: 0.7rem; /* Уменьшаем шрифт, чтобы текст не "душил" рамку */
    text-align: center;
  }
}

@media (min-width: 375px) and (max-width: 699px) {
    .tab-selection {
        /* Две колонки, размер подстраивается под контент */
        grid-template-columns: repeat(2, auto); 
        gap: 25px 30px; /* Увеличиваем отступ между рядами */
    }
}

@media (min-width: 700px) {
    .tab-selection {
        /* Все кнопки в один ряд */
        grid-template-columns: repeat(4, auto); 
        gap: 40px; /* Большой отступ между кнопками на ПК */
    }
.information-banner div[style*="flex: 1"] {
    max-width: 800px; /* Ограничиваем ширину, чтобы текст не растягивался в линию */
    margin: 0 auto !important; /* Центрируем */
    padding: 20px;
}
}

/* --- ПК ВЕРСИЯ (Остается без изменений) --- */
@media (min-width: 1044px) {
  .information-banner > * {
    flex-flow: row;
    flex-shrink: 0;
  }

  .information-banner.right .information,
  .information-banner.right .information * {
    text-align: right !important;
  }

  .information-banner .information {
    width: 70%;
  }
}