@font-face {
      font-family: 'Onest';
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url('./public/fonts/Onest-VariableFont_wght.woff2') format('woff2-variations');
    }
    
    :root {
      /* Цветовая схема */
      --tg-theme-bg-color: #212121;
      --tg-theme-text-color: #ffffff;
      --tg-theme-button-color: #ffffff;
      --tg-theme-button-text-color: #000000;
      --tg-theme-link-color: #ffffff;
      --tg-theme-accent-text-color: #ffffff;
      --tg-theme-secondary-bg-color: rgb(20, 20, 20)!important;
      --tg-theme-hint-color: #708599;
      
      /* Общие параметры */
      --border-radius: 12px;
      --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --container-width: 600px;
      --hover-effect: 0 6px 16px rgba(0, 0, 0, 0.15);
    }
    
    :root {
      --tg-theme-button-color: #ffffff !important; /* Белый фон кнопок */
      --tg-theme-button-text-color: #000000 !important; /* Чёрный текст */
      --tg-theme-link-color: #ffffff !important; /* Белые ссылки */
      --tg-theme-accent-text-color: #ffffff !important; /* Белый акцент */
    }
    
    /* Фиолетовый скроллбар? Исправляем: */
    .modal-content::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3) !important;
    }
    
    /* ===== Основные стили ===== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html {
      height: 100%;
      overflow: hidden;
    }
    
    body {
      font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
      font-weight: 500;
      line-height: 1.5;
      color: var(--tg-theme-text-color);
      background-color: var(--tg-theme-bg-color);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    /* ===== Общие компоненты ===== */
    .container {
      max-width: var(--container-width);
      margin: 0 auto;
      height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden; /* Запрещаем скролл основного контейнера */
    }
    
    /* Заголовки */
    h1, h2, h3, h4 {
      margin-top: 0;
      font-weight: 600;
      color: var(--tg-theme-text-color);
    }
    
    /* Кнопки */
    .btn {
      display: inline-block;
      padding: 12px 20px;
      border-radius: var(--border-radius);
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      text-align: center;
      border: none;
      font-size: 16px;
      position: relative;
      overflow: hidden;
      transform: translateY(0);
    }
    
    .btn::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
      opacity: 0;
      transition: var(--transition);
    }
    
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--hover-effect);
    }
    
    .btn:hover::after {
      opacity: 1;
    }
    
    .btn-primary {
      background: var(--tg-theme-button-color);
      color: var(--tg-theme-button-text-color);
      border: 1px solid rgba(0, 0, 0, 0.2);
    }
    
    .btn-primary:hover {
      background: rgba(255, 255, 255, 0.9);
    }
    
    .btn-secondary {
      background: rgba(255, 255, 255, 0.2);
      color: var(--tg-theme-text-color);
    }
    
    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.3);
    }
    
    .btn-warning {
      background: rgba(229, 57, 53, 0.2);
      color: var(--tg-theme-text-color);
    }
    
    .btn-warning:hover {
      background: rgba(229, 57, 53, 0.3);
    }
    
    /* Карточки и блоки */
    .card {
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--border-radius);
      padding: 15px;
      margin-bottom: 15px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: var(--transition);
      transform: translateY(0);
    }
    
    .card:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: var(--hover-effect);
    }
    
    /* ===== Шапка пользователя ===== */
    #main-menu {
      max-width: var(--container-width);
      margin: 0 auto;
      padding: 15px 20px 0;
      box-sizing: border-box;
    }
    
    .user-info {
      position: absolute;
      top: 10px; /* Поднимаем выше (было 20px) */
      left: 15px;
      right: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px; /* Немного уменьшаем gap */
      z-index: 10;
    }
    
    /* Увеличиваем аватар и делаем его центром */
    .avatar {
      width: 136px;
      height: 136px;
      border-radius: 50%;
      object-fit: cover;
      border: 1px solid #ffffff;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 56px;
      color: #000;
      font-weight: bold;
      box-shadow: var(--box-shadow);
      transition: var(--transition);
      order: 2;
      margin-top: -30px; /* Добавляем отрицательный margin чтобы поднять аватар */
    }
    
    .avatar:hover {
      transform: scale(1.05);
      box-shadow: 0 0 0 2px rgb(255, 255, 255);
    }
    
    .user-main {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      position: relative;
      padding-bottom: 0; /* Убираем отступ */
    }
    
    .user-header {
      display: contents; /* Разрешаем элементам быть независимыми */
    }
    
    #username {
      font-size: 31px;
      font-weight: 400;
      line-height: 1.2;
      margin-top: -10px; /* Добавляем отрицательный margin чтобы поднять юзернейм */
      transform: none;
      order: 3;
      text-align: center;
    }
    
    .user-header-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        order: 1;
        margin-bottom: 15px;
        position: relative; /* Для позиционирования кнопки настроек */
    }
    
    .activity-points {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px; /* Немного уменьшаем радиус */
      padding: 8px 14px; /* Уменьшаем padding (было 12px 20px) */
      font-size: 18px; /* Уменьшаем шрифт (было 24px) */
      display: flex;
      align-items: center;
      gap: 6px; /* Уменьшаем gap */
      margin: 0;
      min-height: 40px; /* Добавляем фиксированную высоту для выравнивания */
      margin-left: 0;
    }
    
    /* Уменьшаем иконку активности */
    .activity-icon {
      width: 22px; /* Уменьшаем (было 28px) */
      height: 22px;
      object-fit: contain;
      filter: brightness(0.9) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    
    /* Обновляем daex-coins - уменьшаем размер */
    .daex-coins {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 8px 14px; /* Уменьшаем padding (было 12px 16px) */
      font-size: 18px; /* Уменьшаем шрифт (было 24px) */
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: var(--box-shadow);
      margin: 0;
      position: static;
      transform: none;
      min-height: 40px; /* Добавляем фиксированную высоту для выравнивания */
      margin-right: 0;
    }
    
    /* Уменьшаем иконку DAEX */
    .daex-icon {
      width: 22px; /* Уменьшаем (было 28px) */
      height: 22px;
      object-fit: contain;
      filter: brightness(0.9) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    
    /* Стили для кнопки настроек */
    .settings-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 15px;
        top: 70px; /* Располагаем под daex-coins */
    }
    
    .settings-icon {
        width: 36px; /* Увеличиваем иконку до 36px */
        height: 36px;
        object-fit: contain;
        filter: brightness(0.9);
        transition: var(--transition);
    }
    
    .settings-btn:hover .settings-icon {
        transform: scale(1.1);
        filter: brightness(1);
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
        .settings-btn {
            left: 10px;
            top: 60px;
        }
        
        .settings-icon {
            width: 32px; /* Увеличиваем для мобильных тоже */
            height: 32px;
        }
    }
    
    /* ===== Навигация ===== */
    .main-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000;
        padding: 8px 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 70px; /* Увеличиваем высоту для иконок */
        z-index: 100;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        
        mask-image: linear-gradient(
            to top,
            black 70%, /* Увеличиваем градиент для иконок */
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to top,
            black 70%,
            transparent 100%
        );
    }
    
    .nav-btn {
        flex: 1;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        padding: 8px;
        font-size: 11px;
        cursor: pointer;
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        gap: 4px; /* Отступ между иконкой и текстом */
    }
    
    .nav-icon {
        width: 24px;
        height: 24px;
        object-fit: contain;
        filter: brightness(0.7);
        transition: filter 0.3s ease;
    }
    
    .nav-btn.active .nav-icon {
        filter: brightness(1);
    }
    
    .nav-btn::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 2px;
        background: var(--tg-theme-button-color);
        transition: var(--transition);
    }
    
    .nav-btn.active {
        color: #fff;
        font-weight: bold;
    }
    
    .nav-btn.active::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 2px;
        background: var(--tg-theme-button-color);
    }
    
    .nav-btn:hover .nav-icon {
        filter: brightness(1);
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
        .main-nav {
            height: 65px; /* Немного уменьшаем высоту на мобильных */
            padding: 6px 0;
        }
        
        .nav-icon {
            width: 22px;
            height: 22px;
        }
        
        .nav-btn {
            font-size: 10px;
            gap: 3px;
        }
        
        .nav-btn.active::after {
            width: 20px;
            height: 2px;
            bottom: 5px;
        }
    }
    
    /* Для очень маленьких экранов */
    @media (max-width: 320px) {
        .nav-btn {
            font-size: 9px;
        }
        
        .nav-icon {
            width: 20px;
            height: 20px;
        }
    }
    
    /* ===== Фон со звёздами ===== */
    .stars-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      overflow: hidden;
      background: #000; /* Чёрный фон */
    }
    
    /* Затемнение внизу экрана */
    .stars-background::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        transparent 100%
      );
      z-index: 1;
      pointer-events: none;
    }
    
    .stars-background::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6); /* Затемняющий слой */
      z-index: 1;
    }
    
    .particles-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity 1s ease-out;
      opacity: 0.6; /* Уменьшаем видимость частиц */
      z-index: 0;
    }
    
    @media (max-width: 480px) {
        .stars-background::after {
            height: 100px; /* Немного меньше на мобильных */
        }
    }
    
    /* ===== Затемнение для главной страницы ===== */
    .main-page .stars-background::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* Занимаем всю высоту */
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,       /* Очень темный сверху */
        rgba(0, 0, 0, 0.9) 15%,  
        rgba(0, 0, 0, 0.9) 35%,     /* Темный */
        rgba(0, 0, 0, 0.6) 40%,       /* Средняя темнота */
        rgba(0, 0, 0, 0.6) 50%,       /* Переходный */
        rgba(0, 0, 0, 0.6) 70%,       /* Легкое затемнение */
        rgba(0, 0, 0, 0.6) 85%,       /* Еще легче */
        rgba(0, 0, 0, 0.6) 92%,       /* Почти прозрачно */
        rgba(0, 0, 0, 0.6) 96%,      /* Очень прозрачно */
        rgba(0, 0, 0, 0.6) 100%         /* Полная прозрачность внизу */
      );
      z-index: 2;
      pointer-events: none;
    }
    
    /* Убираем стандартное затемнение для главной, т.к. мы его включили в новый градиент */
    .main-page .stars-background::after {
      display: none;
    }
    
    /* ===== Загрузчик ===== */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none; /* Изначально скрыт */
      align-items: center;
      justify-content: center;
      z-index: 10000;
      background-color: rgba(0, 0, 0, 0.3);
    }
    
    .loader-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .loader-background.active {
      opacity: 1;
    }
    
    
    #loader.show {
      opacity: 1;
    }
    
    .loader-content {
        text-align: center;
        max-width: 300px;
        padding: 30px;
    }
    
    
    .loader-spinner {
      width: 60px;
      height: 60px;
      border: 4px solid transparent;
      border-top: 4px solid #ffffff;
      border-radius: 50%;
      animation: swing-spin 1.8s cubic-bezier(.4,.0,.2,1) infinite;
      margin: 40px auto;
      box-sizing: border-box;
    }
    
    @keyframes spin {
      0%   { transform: rotate(0deg); }
      30%  { transform: rotate(170deg); }   /* быстрое ускорение */
      40%  { transform: rotate(185deg); }   /* лёгкая "качель" */
      60%  { transform: rotate(355deg); }   /* снова вниз */
      70%  { transform: rotate(370deg); }   /* вторая качель */
      100% { transform: rotate(360deg); }   /* полный оборот */
    }
    
    
    
    /* ===== Секция команды ===== */
    .team-section {
      padding: 5px;
      animation: fadeIn 0.3s ease;
      overflow-y: hidden;
      margin-top: -20px;
    }
    
    .team-header {
      text-align: center;
      margin-bottom: 15px;
      padding-top: 10px;
    }
    
    .team-header h2 {
      font-size: 28px;
      margin-bottom: 5px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--border-radius);
      padding: 10px;
      margin-top: 0;
      color: #ffffff;
    }
    
    .team-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
    }
    
    .team-info {
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--border-radius);
      padding: 15px;
      margin: 10px 0;
    }
    
    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 15px;
    }
    
    .info-item .label {
      color: rgba(255, 255, 255, 0.7);
    }
    
    .info-item .value {
      font-weight: 500;
      text-align: right;
    }
    
    .team-members {
      margin-top: 15px;
    }
    
    .members-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 10px;
      margin-bottom: 15px;
      max-height: 300px;
      overflow-y: auto;
      padding-right: 5px;
    }
    
    .members-list::-webkit-scrollbar {
      width: 6px;
    }
    
    .members-list::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
    }
    
    .members-list::-webkit-scrollbar-thumb {
      background: #ffffff;
      border-radius: 10px;
    }
    
    .team-member {
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--border-radius);
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: var(--transition);
      height: 60px;
      transform: translateY(0);
    }
    
    .team-member:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: var(--hover-effect);
    }
    
    .member-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.1);
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #000;
      font-weight: bold;
    }
    
    .member-name {
      font-size: 16px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }
    
    /* ===== Затемнение для страницы команды ===== */
    .team-page .stars-background::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0.4) 100%
      );
      z-index: 2;
      pointer-events: none;
    }
    
    /* Убираем стандартное затемнение для team-page */
    .team-page .stars-background::after {
      display: none;
    }
    
    /* Стили для контента команды под новым хедером */
    .team-section {
      padding: 15px;
      animation: fadeIn 0.3s ease;
      overflow-y: auto;
      margin-top: 0;
    }
    
    .team-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
      padding: 0 15px;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
      .team-section {
        padding: 10px;
      }
      
      .team-actions {
        padding: 0 10px;
      }
    }
    
    /* ===== Модальные окна (обновленная версия) ===== */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1500;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    
    .modal.show {
      opacity: 1;
      pointer-events: auto;
    }
    
    .modal-content {
      background: var(--tg-theme-secondary-bg-color);
      border-radius: 24px 24px 0 0;
      padding: 24px;
      width: 100%;
      max-width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      transform: translateY(100%); /* Начальное положение - внизу */
      transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                  opacity 0.3s ease; /* Добавляем transition для opacity */
      box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      opacity: 0; /* Начальная прозрачность */
    }
    
    .modal.show .modal-content {
      transform: translateY(0); /* Конечное положение - на месте */
      opacity: 1; /* Конечная прозрачность */
    }
    
    /* Анимация появления */
    @keyframes modalSlideUp {
      from {
        transform: translateY(100%);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    /* Анимация исчезновения */
    @keyframes modalSlideDown {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(100%);
        opacity: 0;
      }
    }
    
    /* Применяем анимации */
    .modal.show .modal-content {
      animation: modalSlideUp 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    }
    
    .modal:not(.show) .modal-content {
      animation: modalSlideDown 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    }
    
    .close-modal {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: var(--tg-theme-hint-color);
      cursor: pointer;
      transition: all 0.2s;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      border: none;
      z-index: 10;
    }
    
    .close-modal:hover {
      color: var(--tg-theme-text-color);
      background: rgba(255, 255, 255, 0.2);
    }
    
    .modal-header {
      padding-bottom: 16px;
      margin-bottom: 16px;
      position: relative;
      text-align: center;
    }
    
    .modal-header h2 {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
      color: var(--tg-theme-text-color);
    }
    
    .modal-body {
      padding: 8px 0;
    }
    
    .modal-footer {
      padding-top: 16px;
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    /* Стили для форм в модалках */
    .modal-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .modal-form input {
      width: 100%;
      padding: 16px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: var(--tg-theme-text-color);
      font-size: 16px;
      transition: border-color 0.2s;
    }
    
    .modal-form input:focus {
      outline: none;
      border-color: var(--tg-theme-button-color);
    }
    
    .modal-form button[type="submit"] {
      width: 100%;
      padding: 16px;
      border-radius: 12px;
      background: var(--tg-theme-button-color);
      color: var(--tg-theme-button-text-color);
      font-weight: 600;
      font-size: 16px;
      border: none;
      cursor: pointer;
      transition: transform 0.2s, background 0.2s;
    }
    
    .modal-form button[type="submit"]:hover {
      transform: translateY(-2px);
      background: var(--tg-theme-button-color-hover);
    }
    
    /* Специфичные стили для поиска */
    .search-container {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    
    #team-search {
      flex: 1;
      padding: 16px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: var(--tg-theme-text-color);
      font-size: 16px;
    }
    
    .search-btn {
      padding: 0 20px;
      border-radius: 12px;
      background: var(--tg-theme-button-color);
      color: var(--tg-theme-button-text-color);
      font-size: 18px;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
    }
    
    .search-btn:hover {
      background: var(--tg-theme-button-color-hover);
    }
    
    .search-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
    
    /* Результаты поиска */
    .search-results {
      max-height: 50vh;
      overflow-y: auto;
      margin-bottom: 16px;
    }
    
    .team-result {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      transition: transform 0.2s, background 0.2s;
    }
    
    .team-result:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-2px);
    }
    
    .team-name {
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--tg-theme-text-color);
    }
    
    .team-info-row {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: var(--tg-theme-hint-color);
      margin-bottom: 12px;
    }
    
    .join-btn {
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      background: var(--tg-theme-button-color);
      color: var(--tg-theme-button-text-color);
      font-weight: 600;
      font-size: 14px;
      border: none;
      cursor: pointer;
      transition: background 0.2s;
    }
    
    .join-btn:hover {
      background: var(--tg-theme-button-color-hover);
    }
    
    .join-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
    
    /* Сообщения о состоянии */
    .empty, .loading {
      text-align: center;
      padding: 24px;
      color: var(--tg-theme-hint-color);
    }
    
    .error {
      color: #ff6b6b;
      text-align: center;
      padding: 24px;
    }
    
    /* Контейнер для участников */
    .all-members-container {
      max-height: 60vh;
      overflow-y: auto;
      padding: 8px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    /* Анимации */
    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
      .modal-content {
        padding: 20px 16px;
        border-radius: 20px 20px 0 0;
        max-height: 90vh;
      }
      
      .close-modal {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 24px;
      }
      
      .modal-header h2 {
        font-size: 18px;
      }
      
      .modal-form input,
      .modal-form button[type="submit"],
      #team-search,
      .join-btn {
        padding: 14px;
      }
    }
    
    /* Затемнение фона с blur-эффектом */
    .modal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(8px);
      z-index: -1;
    }
    
    /* Прокрутка для модалок */
    .modal-content::-webkit-scrollbar {
      width: 6px;
    }
    
    .modal-content::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 3px;
    }
    
    .modal-content::-webkit-scrollbar-thumb {
      background: var(--tg-theme-button-color);
      border-radius: 3px;
    }
    
    /* Для модалки подтверждения */
    .confirmation-buttons {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }
    
    .confirmation-buttons .btn {
      flex: 1;
      padding: 16px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 16px;
      border: none;
      cursor: pointer;
      transition: transform 0.2s;
    }
    
    .confirmation-buttons .btn:hover {
      transform: translateY(-2px);
    }
    
    .confirm-btn {
      background: var(--tg-theme-button-color);
      color: var(--tg-theme-button-text-color);
    }
    
    .cancel-btn {
      background: rgba(255, 255, 255, 0.1);
      color: var(--tg-theme-text-color);
    }
    
    #confirmation-message {
      text-align: center;
      font-size: 16px;
      margin-bottom: 16px;
      color: var(--tg-theme-text-color);
      line-height: 1.5;
    }
    
    /* ===== Рейтинг ===== */
    .rating-page {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 70px; /* Обновляем с 56px на 70px */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .prize-display {
      text-align: center;
      margin: 0;
      padding: 15px 0;
      position: relative;
      background: none;
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .teams-list-container {
        flex: 1;
        overflow-y: auto;
        padding-bottom: 80px; /* Увеличиваем отступ */
    }
    
    .teams-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 8px 12px;
    }
    
    .countdown-timer, .prize-pool {
      font-size: 42px;
      font-weight: 900;
      color: #ffffff;
      margin: 0;
      padding: 0;
      line-height: 1.2;
      letter-spacing: 1.5px;
      font-family: 'Arial Black', sans-serif;
    }
    
    /* ===== ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ ЗАДАНИЙ ===== */
    
    /* Яркий хедер с градиентом */
    .quests-header {
      background: linear-gradient(to bottom, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0.7) 50%,
        rgba(0,0,0,0.4) 100%);
      padding: 20px 15px 25px 15px;
      margin: -15px -15px 15px -15px;
      position: relative;
      z-index: 2;
    }
    
    .quests-header-content {
      text-align: center;
      animation: fadeInUp 0.6s ease-out 0.2s both;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(15px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .quests-header h2 {
      margin: 0 0 6px 0;
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }
    
    .quests-header p {
      margin: 0;
      color: rgba(255,255,255,0.9);
      font-size: 14px;
      font-weight: 400;
    }
    
    /* Контейнер для вкладок */
    .quests-tabs-container {
      position: relative;
      margin-bottom: 18px;
      animation: fadeInUp 0.6s ease-out 0.3s both;
    }
    
    .quests-tabs {
      position: relative;
      display: flex;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 3px;
      margin-bottom: 15px;
    }
    
    .quest-tab {
      flex: 1;
      padding: 10px 14px;
      text-align: center;
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      border-radius: 7px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: 500;
      position: relative;
      z-index: 2;
      font-size: 14px;
      transform-origin: center;
    }
    
    .quest-tab.active {
      color: #fff;
      font-weight: 600;
    }
    
    .quest-tab:hover:not(.active) {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-1px);
    }
    
    .quest-tab:active {
      transform: translateY(0) scale(0.98);
    }
    
    /* Индикатор вкладки */
    .tab-indicator {
      position: absolute;
      height: calc(100% - 6px);
      background: rgba(255, 255, 255, 0.2);
      border-radius: 7px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
      top: 3px;
      left: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
    /* Контейнер контента */
    .quests-content-wrapper {
      z-index: 1;
      position: relative;
    }
    
    .quests-list {
      display: none;
      flex-direction: column;
      gap: 12px; /* Увеличил отступ для лучшей видимости */
      padding: 0 15px;
      animation: fadeIn 0.4s ease;
      transition: opacity 0.3s ease;
    }
    
    .quests-list:not(.active) {
      display: none;
      opacity: 0;
    }
    
    .quests-list.active {
      display: flex; /* ИЗМЕНЕНО: было block, стало flex */
      opacity: 1;
      animation: fadeIn 0.4s ease;
    }
    
    @keyframes fadeIn {
      from { 
        opacity: 0; 
        transform: translateY(10px); 
      }
      to { 
        opacity: 1; 
        transform: translateY(0); 
      }
    }
    
    /* КОМПАКТНЫЕ карточки заданий */
    .quest-item {
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.05) 100%);
      border-radius: 14px;
      padding: 14px 16px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: blur(10px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      position: relative;
      min-height: 70px;
      margin-bottom: 0; /* Гарантируем отсутствие margin */
      opacity: 0;
      transform: translateX(-50px);
      animation: slideInHover 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    /* 🔥 ОСНОВНАЯ АНИМАЦИЯ: ПООЧЕРЕДНОЕ ПОЯВЛЕНИЕ С HOVER-ЭФФЕКТОМ */
    @keyframes slideInHover {
      0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.95);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      70% {
        opacity: 0.8;
        transform: translateX(5px) scale(1.02);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
      }
      100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      }
    }
    
    /* 🔥 ПОСЛЕДОВАТЕЛЬНОЕ ПОЯВЛЕНИЕ КАРТОЧЕК */
    .quests-list.active .quest-item:nth-child(1) { 
      animation-delay: 0.1s; 
    }
    .quests-list.active .quest-item:nth-child(2) { 
      animation-delay: 0.2s; 
    }
    .quests-list.active .quest-item:nth-child(3) { 
      animation-delay: 0.3s; 
    }
    .quests-list.active .quest-item:nth-child(4) { 
      animation-delay: 0.4s; 
    }
    .quests-list.active .quest-item:nth-child(5) { 
      animation-delay: 0.5s; 
    }
    .quests-list.active .quest-item:nth-child(6) { 
      animation-delay: 0.6s; 
    }
    .quests-list.active .quest-item:nth-child(7) { 
      animation-delay: 0.7s; 
    }
    .quests-list.active .quest-item:nth-child(8) { 
      animation-delay: 0.8s; 
    }
    .quests-list.active .quest-item:nth-child(9) { 
      animation-delay: 0.9s; 
    }
    .quests-list.active .quest-item:nth-child(10) { 
      animation-delay: 1.0s; 
    }
    
    /* 🔥 АНИМАЦИЯ ДЛЯ ПРЕМИУМ ЗАДАНИЙ */
    .quest-item.premium {
      background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.08) 0%,
        rgba(255, 215, 0, 0.05) 100%);
      animation: slideInHover 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards, 
                 goldPulse 3s ease-in-out infinite 1s;
    }
    
    @keyframes goldPulse {
      0%, 100% {
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.1);
      }
      50% {
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.1),
                    0 0 20px rgba(255, 215, 0, 0.3);
      }
    }
    
    /* 🔥 HOVER ЭФФЕКТ ДЛЯ КАРТОЧЕК */
    .quest-item:hover {
      transform: translateY(-4px) translateX(0) !important;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
      border-color: rgba(255, 255, 255, 0.25);
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.08) 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important;
    }
    
    .quest-item.premium:hover {
      background: linear-gradient(135deg, 
        rgba(255, 215, 0, 0.12) 0%,
        rgba(255, 215, 0, 0.08) 100%);
      border-color: rgba(255, 215, 0, 0.5);
      box-shadow: 0 15px 35px rgba(255, 215, 0, 0.2) !important;
    }
    
    .quest-item.completed {
      opacity: 0.6;
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.03) 100%);
      animation: none;
      transform: translateX(0) !important;
    }
    
    .quest-item.removing {
      animation: slideOutLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    @keyframes slideOutLeft {
      0% {
        opacity: 1;
        transform: translateX(0);
      }
      30% {
        opacity: 0.7;
        transform: translateX(-10px);
      }
      100% {
        opacity: 0;
        transform: translateX(-50px);
      }
    }
    
    /* 🔥 ИНФОРМАЦИЯ О КВЕСТЕ С ОТСТУПОМ ДЛЯ КНОПКИ */
    .quest-info {
      flex: 1;
      min-width: 0;
      margin-right: 12px;
      opacity: 0;
      animation: contentFadeIn 0.4s ease forwards;
    }
    
    @keyframes contentFadeIn {
      to {
        opacity: 1;
      }
    }
    
    /* Анимация контента с задержкой относительно карточки */
    .quests-list.active .quest-item:nth-child(1) .quest-info { animation-delay: 0.3s; }
    .quests-list.active .quest-item:nth-child(2) .quest-info { animation-delay: 0.4s; }
    .quests-list.active .quest-item:nth-child(3) .quest-info { animation-delay: 0.5s; }
    .quests-list.active .quest-item:nth-child(4) .quest-info { animation-delay: 0.6s; }
    .quests-list.active .quest-item:nth-child(5) .quest-info { animation-delay: 0.7s; }
    .quests-list.active .quest-item:nth-child(6) .quest-info { animation-delay: 0.8s; }
    .quests-list.active .quest-item:nth-child(7) .quest-info { animation-delay: 0.9s; }
    .quests-list.active .quest-item:nth-child(8) .quest-info { animation-delay: 1.0s; }
    .quests-list.active .quest-item:nth-child(9) .quest-info { animation-delay: 1.1s; }
    .quests-list.active .quest-item:nth-child(10) .quest-info { animation-delay: 1.2s; }
    
    /* КОМПАКТНЫЙ заголовок задания */
    .quest-title {
      margin: 0 0 6px 0;
      font-size: 15px; /* Уменьшили размер шрифта */
      font-weight: 600;
      color: #ffffff;
      line-height: 1.2; /* Уменьшили межстрочный интервал */
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 36px; /* Фиксированная высота для 2 строк */
      opacity: 0;
      animation: textSlideIn 0.4s ease forwards;
    }
    
    @keyframes textSlideIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .quests-list.active .quest-item:nth-child(1) .quest-title { animation-delay: 0.4s; }
    .quests-list.active .quest-item:nth-child(2) .quest-title { animation-delay: 0.5s; }
    .quests-list.active .quest-item:nth-child(3) .quest-title { animation-delay: 0.6s; }
    .quests-list.active .quest-item:nth-child(4) .quest-title { animation-delay: 0.7s; }
    .quests-list.active .quest-item:nth-child(5) .quest-title { animation-delay: 0.8s; }
    .quests-list.active .quest-item:nth-child(6) .quest-title { animation-delay: 0.9s; }
    .quests-list.active .quest-item:nth-child(7) .quest-title { animation-delay: 1.0s; }
    .quests-list.active .quest-item:nth-child(8) .quest-title { animation-delay: 1.1s; }
    .quests-list.active .quest-item:nth-child(9) .quest-title { animation-delay: 1.2s; }
    .quests-list.active .quest-item:nth-child(10) .quest-title { animation-delay: 1.3s; }
    
    /* КОМПАКТНЫЙ хедер задания */
    .quest-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 8px;
      gap: 8px;
    }
    
    /* КОМПАКТНЫЙ золотой бейдж для DAEX заданий */
    .daex-badge {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
      border-radius: 10px;
      font-size: 11px; /* Уменьшили размер шрифта */
      font-weight: 700;
      color: #000;
      text-shadow: 0 1px 2px rgba(255,255,255,0.5);
      box-shadow: 0 2px 6px rgba(255, 215, 0, 0.4);
      white-space: nowrap;
      margin-top: 2px;
      opacity: 0;
      transform: scale(0.8);
      animation: badgePopIn 0.3s ease forwards;
    }
    
    @keyframes badgePopIn {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    
    .quests-list.active .quest-item:nth-child(1) .daex-badge { animation-delay: 0.5s; }
    .quests-list.active .quest-item:nth-child(2) .daex-badge { animation-delay: 0.6s; }
    .quests-list.active .quest-item:nth-child(3) .daex-badge { animation-delay: 0.7s; }
    .quests-list.active .quest-item:nth-child(4) .daex-badge { animation-delay: 0.8s; }
    .quests-list.active .quest-item:nth-child(5) .daex-badge { animation-delay: 0.9s; }
    .quests-list.active .quest-item:nth-child(6) .daex-badge { animation-delay: 1.0s; }
    .quests-list.active .quest-item:nth-child(7) .daex-badge { animation-delay: 1.1s; }
    .quests-list.active .quest-item:nth-child(8) .daex-badge { animation-delay: 1.2s; }
    .quests-list.active .quest-item:nth-child(9) .daex-badge { animation-delay: 1.3s; }
    .quests-list.active .quest-item:nth-child(10) .daex-badge { animation-delay: 1.4s; }
    
    .daex-icon-small {
      width: 14px; /* Уменьшили иконку */
      height: 14px;
      filter: brightness(0) saturate(100%);
    }
    
    /* КОМПАКТНЫЕ стили для убывающих наград */
    .decaying-reward-info {
      margin-bottom: 6px;
      opacity: 0;
      animation: fadeIn 0.4s ease forwards;
    }
    
    .quests-list.active .quest-item:nth-child(1) .decaying-reward-info { animation-delay: 0.6s; }
    .quests-list.active .quest-item:nth-child(2) .decaying-reward-info { animation-delay: 0.7s; }
    .quests-list.active .quest-item:nth-child(3) .decaying-reward-info { animation-delay: 0.8s; }
    .quests-list.active .quest-item:nth-child(4) .decaying-reward-info { animation-delay: 0.9s; }
    .quests-list.active .quest-item:nth-child(5) .decaying-reward-info { animation-delay: 1.0s; }
    .quests-list.active .quest-item:nth-child(6) .decaying-reward-info { animation-delay: 1.1s; }
    .quests-list.active .quest-item:nth-child(7) .decaying-reward-info { animation-delay: 1.2s; }
    .quests-list.active .quest-item:nth-child(8) .decaying-reward-info { animation-delay: 1.3s; }
    .quests-list.active .quest-item:nth-child(9) .decaying-reward-info { animation-delay: 1.4s; }
    .quests-list.active .quest-item:nth-child(10) .decaying-reward-info { animation-delay: 1.5s; }
    
    /* КОМПАКТНЫЕ бейджи наград */
    .decaying-rewards {
      display: flex;
      gap: 8px; /* Уменьшили отступ между бейджами */
      align-items: center;
      flex-wrap: wrap;
    }
    
    .decaying-reward-points,
    .decaying-reward-daex {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px; /* Уменьшили размер шрифта */
      font-weight: 700;
      padding: 4px 8px; /* Уменьшили padding */
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      opacity: 0;
      transform: translateY(5px) scale(0.95);
      animation: rewardPopIn 0.3s ease forwards;
    }
    
    @keyframes rewardPopIn {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    
    .quests-list.active .quest-item:nth-child(1) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(1) .decaying-reward-daex { animation-delay: 0.7s; }
    .quests-list.active .quest-item:nth-child(2) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(2) .decaying-reward-daex { animation-delay: 0.8s; }
    .quests-list.active .quest-item:nth-child(3) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(3) .decaying-reward-daex { animation-delay: 0.9s; }
    .quests-list.active .quest-item:nth-child(4) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(4) .decaying-reward-daex { animation-delay: 1.0s; }
    .quests-list.active .quest-item:nth-child(5) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(5) .decaying-reward-daex { animation-delay: 1.1s; }
    .quests-list.active .quest-item:nth-child(6) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(6) .decaying-reward-daex { animation-delay: 1.2s; }
    .quests-list.active .quest-item:nth-child(7) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(7) .decaying-reward-daex { animation-delay: 1.3s; }
    .quests-list.active .quest-item:nth-child(8) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(8) .decaying-reward-daex { animation-delay: 1.4s; }
    .quests-list.active .quest-item:nth-child(9) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(9) .decaying-reward-daex { animation-delay: 1.5s; }
    .quests-list.active .quest-item:nth-child(10) .decaying-reward-points,
    .quests-list.active .quest-item:nth-child(10) .decaying-reward-daex { animation-delay: 1.6s; }
    
    .decaying-reward-points {
      color: #ffffff;
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    }
    
    /* Золотой стиль для DAEX наград в убывающих заданиях */
    .decaying-reward-daex {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.2) 100%);
      border: 1px solid rgba(255, 215, 0, 0.3);
      color: #FFD700;
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
      box-shadow: 0 2px 6px rgba(255, 215, 0, 0.2);
    }
    
    /* ПРОСТОЙ ТАЙМЕР в правом верхнем углу - КОМПАКТНЫЙ */
    .quest-timer {
      position: absolute;
      top: 8px;
      right: 12px;
      padding: 2px 6px;
      border-radius: 6px;
      font-size: 10px; /* Уменьшили размер шрифта */
      font-weight: 600;
      color: rgba(255, 255, 255, 0.7);
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(5px);
      z-index: 2;
      opacity: 0;
      transform: translateX(10px);
      animation: timerSlideIn 0.4s ease forwards;
    }
    
    @keyframes timerSlideIn {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    .quests-list.active .quest-item:nth-child(1) .quest-timer { animation-delay: 0.8s; }
    .quests-list.active .quest-item:nth-child(2) .quest-timer { animation-delay: 0.9s; }
    .quests-list.active .quest-item:nth-child(3) .quest-timer { animation-delay: 1.0s; }
    .quests-list.active .quest-item:nth-child(4) .quest-timer { animation-delay: 1.1s; }
    .quests-list.active .quest-item:nth-child(5) .quest-timer { animation-delay: 1.2s; }
    .quests-list.active .quest-item:nth-child(6) .quest-timer { animation-delay: 1.3s; }
    .quests-list.active .quest-item:nth-child(7) .quest-timer { animation-delay: 1.4s; }
    .quests-list.active .quest-item:nth-child(8) .quest-timer { animation-delay: 1.5s; }
    .quests-list.active .quest-item:nth-child(9) .quest-timer { animation-delay: 1.6s; }
    .quests-list.active .quest-item:nth-child(10) .quest-timer { animation-delay: 1.7s; }
    
    /* Индикатор уменьшенной награды */
    .reward-decreased .decaying-reward-points,
    .reward-decreased .decaying-reward-daex {
      position: relative;
      animation: pulseWarning 2s infinite, bounceDecrease 0.6s ease;
    }
    
    @keyframes bounceDecrease {
      0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-5px);}
      60% {transform: translateY(-2px);}
    }
    
    .reward-decreased .decaying-reward-points::after,
    .reward-decreased .decaying-reward-daex::after {
      content: '↓';
      margin-left: 3px;
      color: #ff6b6b;
      font-weight: bold;
      font-size: 11px;
      animation: arrowBounce 1s ease infinite;
    }
    
    @keyframes arrowBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-2px); }
    }
    
    @keyframes pulseWarning {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    /* КОМПАКТНЫЕ обычные награды */
    .quest-rewards {
      display: flex;
      gap: 10px; /* Уменьшили отступ */
      align-items: center;
      flex-wrap: wrap;
      opacity: 0;
      animation: fadeIn 0.4s ease forwards;
    }
    
    .quests-list.active .quest-item:nth-child(1) .quest-rewards { animation-delay: 0.7s; }
    .quests-list.active .quest-item:nth-child(2) .quest-rewards { animation-delay: 0.8s; }
    .quests-list.active .quest-item:nth-child(3) .quest-rewards { animation-delay: 0.9s; }
    .quests-list.active .quest-item:nth-child(4) .quest-rewards { animation-delay: 1.0s; }
    .quests-list.active .quest-item:nth-child(5) .quest-rewards { animation-delay: 1.1s; }
    .quests-list.active .quest-item:nth-child(6) .quest-rewards { animation-delay: 1.2s; }
    .quests-list.active .quest-item:nth-child(7) .quest-rewards { animation-delay: 1.3s; }
    .quests-list.active .quest-item:nth-child(8) .quest-rewards { animation-delay: 1.4s; }
    .quests-list.active .quest-item:nth-child(9) .quest-rewards { animation-delay: 1.5s; }
    .quests-list.active .quest-item:nth-child(10) .quest-rewards { animation-delay: 1.6s; }
    
    .reward-points,
    .reward-daex {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 13px; /* Уменьшили размер шрифта */
      font-weight: 700;
      padding: 4px 8px; /* Уменьшили padding */
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(5px);
      opacity: 0;
      transform: translateY(5px) scale(0.95);
      animation: rewardPopIn 0.3s ease forwards;
    }
    
    .quests-list.active .quest-item:nth-child(1) .reward-points,
    .quests-list.active .quest-item:nth-child(1) .reward-daex { animation-delay: 0.8s; }
    .quests-list.active .quest-item:nth-child(2) .reward-points,
    .quests-list.active .quest-item:nth-child(2) .reward-daex { animation-delay: 0.9s; }
    .quests-list.active .quest-item:nth-child(3) .reward-points,
    .quests-list.active .quest-item:nth-child(3) .reward-daex { animation-delay: 1.0s; }
    .quests-list.active .quest-item:nth-child(4) .reward-points,
    .quests-list.active .quest-item:nth-child(4) .reward-daex { animation-delay: 1.1s; }
    .quests-list.active .quest-item:nth-child(5) .reward-points,
    .quests-list.active .quest-item:nth-child(5) .reward-daex { animation-delay: 1.2s; }
    .quests-list.active .quest-item:nth-child(6) .reward-points,
    .quests-list.active .quest-item:nth-child(6) .reward-daex { animation-delay: 1.3s; }
    .quests-list.active .quest-item:nth-child(7) .reward-points,
    .quests-list.active .quest-item:nth-child(7) .reward-daex { animation-delay: 1.4s; }
    .quests-list.active .quest-item:nth-child(8) .reward-points,
    .quests-list.active .quest-item:nth-child(8) .reward-daex { animation-delay: 1.5s; }
    .quests-list.active .quest-item:nth-child(9) .reward-points,
    .quests-list.active .quest-item:nth-child(9) .reward-daex { animation-delay: 1.6s; }
    .quests-list.active .quest-item:nth-child(10) .reward-points,
    .quests-list.active .quest-item:nth-child(10) .reward-daex { animation-delay: 1.7s; }
    
    .reward-points {
      color: #ffffff;
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    }
    
    /* КОМПАКТНЫЙ золотой стиль для DAEX наград */
    .reward-daex {
      background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.2) 100%);
      border: 1px solid rgba(255, 215, 0, 0.3);
      color: #FFD700;
      text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
      box-shadow: 0 2px 6px rgba(255, 215, 0, 0.2);
    }
    
    /* КОМПАКТНЫЕ иконки */
    .activity-icon-small,
    .daex-icon-small {
      width: 16px; /* Уменьшили иконки */
      height: 16px;
      object-fit: contain;
      transition: transform 0.2s ease;
    }
    
    .quest-item:hover .activity-icon-small,
    .quest-item:hover .daex-icon-small {
      transform: scale(1.1);
    }
    
    .activity-icon-small {
      filter: brightness(0) invert(1);
    }
    
    .daex-icon-small {
      filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(5deg);
    }
    
    .daex-badge .daex-icon-small {
      filter: brightness(0) saturate(100%);
    }
    
    /* КОМПАКТНАЯ кнопка выполнения */
    .quest-action-btn {
      padding: 10px 16px;
      background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
      border: none;
      border-radius: 12px;
      color: #000000;
      font-size: 13px; /* Уменьшили размер шрифта */
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      min-width: 70px; /* Уменьшили минимальную ширину */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
      box-shadow: 0 3px 12px rgba(74, 118, 168, 0.4);
      align-self: center;
      white-space: nowrap;
      opacity: 0;
      transform: translateX(10px) scale(0.9);
      animation: buttonPopIn 0.4s ease forwards;
    }
    
    @keyframes buttonPopIn {
      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }
    
    .quests-list.active .quest-item:nth-child(1) .quest-action-btn { animation-delay: 0.9s; }
    .quests-list.active .quest-item:nth-child(2) .quest-action-btn { animation-delay: 1.0s; }
    .quests-list.active .quest-item:nth-child(3) .quest-action-btn { animation-delay: 1.1s; }
    .quests-list.active .quest-item:nth-child(4) .quest-action-btn { animation-delay: 1.2s; }
    .quests-list.active .quest-item:nth-child(5) .quest-action-btn { animation-delay: 1.3s; }
    .quests-list.active .quest-item:nth-child(6) .quest-action-btn { animation-delay: 1.4s; }
    .quests-list.active .quest-item:nth-child(7) .quest-action-btn { animation-delay: 1.5s; }
    .quests-list.active .quest-item:nth-child(8) .quest-action-btn { animation-delay: 1.6s; }
    .quests-list.active .quest-item:nth-child(9) .quest-action-btn { animation-delay: 1.7s; }
    .quests-list.active .quest-item:nth-child(10) .quest-action-btn { animation-delay: 1.8s; }
    
    .quest-action-btn:hover:not(:disabled) {
      transform: translateY(-2px) scale(1.05) !important;
      box-shadow: 0 5px 15px rgba(74, 118, 168, 0.6) !important;
      background: linear-gradient(135deg, #f0f0f0 0%, #f0f0f0 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important;
    }
    
    .quest-action-btn:active {
      transform: translateY(0) scale(0.98) !important;
    }
    
    .quest-action-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none !important;
    }
    
    /* 🔥 КНОПКА ДЛЯ ПАРТНЕРСКИХ ЗАДАНИЙ - ФИКСИРОВАННАЯ */
    .quest-item[data-type="partners"] .quest-action-btn {
      background: transparent;
      box-shadow: none;
      min-width: 42px;
      width: 42px;
      height: 42px;
      padding: 0;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      margin-left: 0; /* Убираем margin-left */
      opacity: 0;
      animation: partnerButtonSlideIn 0.5s ease forwards;
    }
    
    @keyframes partnerButtonSlideIn {
      from {
        opacity: 0;
        transform: translateY(-50%) translateX(20px) rotate(-180deg);
      }
      to {
        opacity: 1;
        transform: translateY(-50%) translateX(0) rotate(0);
      }
    }
    
    .quests-list.active .quest-item[data-type="partners"]:nth-child(1) .quest-action-btn { animation-delay: 1.0s; }
    .quests-list.active .quest-item[data-type="partners"]:nth-child(2) .quest-action-btn { animation-delay: 1.1s; }
    .quests-list.active .quest-item[data-type="partners"]:nth-child(3) .quest-action-btn { animation-delay: 1.2s; }
    .quests-list.active .quest-item[data-type="partners"]:nth-child(4) .quest-action-btn { animation-delay: 1.3s; }
    .quests-list.active .quest-item[data-type="partners"]:nth-child(5) .quest-action-btn { animation-delay: 1.4s; }
    .quests-list.active .quest-item[data-type="partners"]:nth-child(6) .quest-action-btn { animation-delay: 1.5s; }
    .quests-list.active .quest-item[data-type="partners"]:nth-child(7) .quest-action-btn { animation-delay: 1.6s; }
    .quests-list.active .quest-item[data-type="partners"]:nth-child(8) .quest-action-btn { animation-delay: 1.7s; }
    .quests-list.active .quest-item[data-type="partners"]:nth-child(9) .quest-action-btn { animation-delay: 1.8s; }
    .quests-list.active .quest-item[data-type="partners"]:nth-child(10) .quest-action-btn { animation-delay: 1.9s; }
    
    .quest-item[data-type="partners"] .quest-action-btn:hover:not(:disabled) {
      box-shadow: 0 5px 15px rgba(135, 116, 225, 0.6) !important;
      background: linear-gradient(135deg, #9784f1 0%, #7b6bcd 100%);
      transform: translateY(-50%) scale(1.1) rotate(5deg) !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important;
    }
    
    .quest-item[data-type="partners"] .quest-action-btn:active {
      transform: translateY(-50%) scale(0.95) rotate(0) !important;
    }
    
    .quest-action-icon {
      width: 20px; /* Уменьшили иконку */
      height: 20px;
      object-fit: contain;
      filter: brightness(0) invert(1);
      transition: transform 0.3s ease;
    }
    
    .quest-item[data-type="partners"] .quest-action-btn:hover .quest-action-icon {
      transform: scale(1.1) rotate(5deg);
    }
    
    /* Для партнерских заданий увеличиваем иконку немного */
    .quest-item[data-type="partners"] .quest-action-icon {
      width: 22px;
      height: 22px;
    }
    
    .empty-quests {
      text-align: center;
      padding: 40px 20px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      font-weight: 500;
      animation: fadeIn 0.5s ease;
    }
    
    /* Стили для модалки задания */
    .quest-description {
      margin-bottom: 20px;
      padding: 15px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: var(--border-radius);
      border: 1px solid rgba(255, 255, 255, 0.1);
      line-height: 1.5;
    }
    
    .quest-result-message {
      margin-top: 15px;
      padding: 12px;
      border-radius: var(--border-radius);
      text-align: center;
      font-weight: 500;
    }
    
    .quest-result-message.success {
      background: rgba(76, 175, 80, 0.2);
      color: #4caf50;
      border: 1px solid rgba(76, 175, 80, 0.3);
    }
    
    .quest-result-message.error {
      background: rgba(244, 67, 54, 0.2);
      color: #f44336;
      border: 1px solid rgba(244, 67, 54, 0.3);
    }
    
    /* Анимации */
    @keyframes quest-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .quest-spinner {
      width: 18px; /* Уменьшили спиннер */
      height: 18px;
      border: 2px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: quest-spin 1s ease-in-out infinite;
      margin: 0 auto;
    }
    
    .quest-action-btn.loading {
      opacity: 0.7;
      pointer-events: none;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
      .quests-header {
        padding: 18px 12px 22px 12px;
        margin: -10px -10px 12px -10px;
      }
      
      .quests-header h2 {
        font-size: 22px;
      }
      
      .quests-header p {
        font-size: 13px;
      }
      
      .quests-tabs-container {
        margin: 0 0 15px 0;
        padding: 0 8px;
      }
      
      .quest-tab {
        padding: 8px 12px;
        font-size: 13px;
      }
      
      .quests-list {
        gap: 8px;
        padding: 0 12px;
      }
      
      .quest-item {
        padding: 12px 14px;
        border-radius: 12px;
        min-height: 65px;
        transform: translateX(-30px);
      }
      
      @keyframes slideInHoverMobile {
        0% {
          opacity: 0;
          transform: translateX(-30px) scale(0.95);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        70% {
          opacity: 0.8;
          transform: translateX(3px) scale(1.02);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
        }
        100% {
          opacity: 1;
          transform: translateX(0) scale(1);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }
      }
      
      .quest-item {
        animation-name: slideInHoverMobile;
      }
      
      /* Меньшие задержки на мобильных */
      .quests-list.active .quest-item:nth-child(1) { animation-delay: 0.05s; }
      .quests-list.active .quest-item:nth-child(2) { animation-delay: 0.1s; }
      .quests-list.active .quest-item:nth-child(3) { animation-delay: 0.15s; }
      .quests-list.active .quest-item:nth-child(4) { animation-delay: 0.2s; }
      .quests-list.active .quest-item:nth-child(5) { animation-delay: 0.25s; }
      .quests-list.active .quest-item:nth-child(6) { animation-delay: 0.3s; }
      .quests-list.active .quest-item:nth-child(7) { animation-delay: 0.35s; }
      .quests-list.active .quest-item:nth-child(8) { animation-delay: 0.4s; }
      .quests-list.active .quest-item:nth-child(9) { animation-delay: 0.45s; }
      .quests-list.active .quest-item:nth-child(10) { animation-delay: 0.5s; }
      
      .quest-info {
        margin-right: 8px;
      }
      
      .quest-header {
        margin-bottom: 6px;
        gap: 6px;
      }
      
      .quest-title {
        font-size: 14px;
        margin-bottom: 6px;
        max-height: 34px;
      }
      
      .daex-badge {
        font-size: 10px;
        padding: 2px 6px;
      }
      
      .quest-timer {
        top: 6px;
        right: 10px;
        font-size: 9px;
        padding: 1px 4px;
      }
      
      .decaying-rewards,
      .quest-rewards {
        gap: 6px;
      }
      
      .decaying-reward-points,
      .decaying-reward-daex,
      .reward-points,
      .reward-daex {
        font-size: 12px;
        padding: 3px 6px;
        border-radius: 14px;
      }
      
      .activity-icon-small,
      .daex-icon-small {
        width: 14px;
        height: 14px;
      }
      
      .quest-action-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 60px;
        border-radius: 10px;
      }
      
      /* Мобильная версия для партнерских кнопок */
      .quest-item[data-type="partners"] .quest-action-btn {
        min-width: 40px;
        width: 40px;
        height: 40px;
        right: 10px;
        border-radius: 10px;
      }
      
      .quest-action-icon {
        width: 18px;
        height: 18px;
      }
      
      .quest-item[data-type="partners"] .quest-action-icon {
        width: 20px;
        height: 20px;
      }
    }
    
    .quest-item[data-type="partners"] .quest-title {
      font-size: 15px;
      margin-bottom: 6px;
      line-height: 1.2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 36px;
    }
    
    .quest-item[data-type="partners"] .quest-info {
      flex: 1;
      min-width: 0;
      margin-right: 12px;
      padding-right: 0; /* Убираем лишний padding */
    }
    
    .quest-item[data-type="partners"] .quest-rewards {
      margin-top: 4px;
    }
    
    /* 🔥 ИСПРАВЛЕНИЕ ДЛЯ ПАРТНЕРСКИХ ЗАДАНИЙ */
    .quest-item[data-type="partners"] {
      flex-direction: row;
      align-items: flex-start;
      padding-right: 60px; /* Добавляем место для кнопки */
    }
    
    /* ===== НОВЫЕ СТИЛИ УВЕДОМЛЕНИЙ ===== */
    .notification-container {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 350px;
      list-style-type: none;
      margin: 0;
      padding: 0;
      pointer-events: none;
    }
    
    .notification-item {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      background-color: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      transform: translateX(-100%);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      pointer-events: auto;
    }
    
    .notification-content {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }
    
    .notification-icon svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    
    .notification-text {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.4;
      color: #000;
      margin: 0;
    }
    
    .notification-close {
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: background-color 0.2s ease;
      flex-shrink: 0;
    }
    
    .notification-close:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }
    
    .notification-close svg {
      width: 16px;
      height: 16px;
      color: #666;
    }
    
    .notification-progress-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      width: 100%;
      transform: scaleX(0);
      transform-origin: left center;
      animation: progressBar 5s linear forwards;
      border-radius: 0 0 8px 8px;
    }
    
    /* Цветовые схемы для разных типов уведомлений */
    .notification-item.success {
      background-color: rgba(209, 250, 229, 0.95);
      border-left: 4px solid #10b981;
    }
    
    .notification-item.success .notification-icon svg {
      color: #10b981;
    }
    
    .notification-item.success .notification-progress-bar {
      background-color: #10b981;
    }
    
    .notification-item.error {
      background-color: rgba(254, 226, 226, 0.95);
      border-left: 4px solid #ef4444;
    }
    
    .notification-item.error .notification-icon svg {
      color: #ef4444;
    }
    
    .notification-item.error .notification-progress-bar {
      background-color: #ef4444;
    }
    
    .notification-item.warning {
      background-color: rgba(254, 249, 195, 0.95);
      border-left: 4px solid #eab308;
    }
    
    .notification-item.warning .notification-icon svg {
      color: #eab308;
    }
    
    .notification-item.warning .notification-progress-bar {
      background-color: #eab308;
    }
    
    .notification-item.info {
      background-color: rgba(219, 234, 254, 0.95);
      border-left: 4px solid #3b82f6;
    }
    
    .notification-item.info .notification-icon svg {
      color: #3b82f6;
    }
    
    .notification-item.info .notification-progress-bar {
      background-color: #3b82f6;
    }
    
    .notification-item.default {
      background-color: rgba(243, 244, 246, 0.95);
      border-left: 4px solid #6b7280;
    }
    
    .notification-item.default .notification-icon svg {
      color: #6b7280;
    }
    
    .notification-item.default .notification-progress-bar {
      background-color: #6b7280;
    }
    
    /* Анимация прогресс-бара */
    @keyframes progressBar {
      0% {
        transform: scaleX(1);
      }
      100% {
        transform: scaleX(0);
      }
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 768px) {
      .notification-container {
        top: 10px;
        left: 10px;
        right: 10px;
        max-width: none;
      }
      
      .notification-item {
        padding: 10px 12px;
      }
      
      .notification-text {
        font-size: 13px;
      }
      
      .notification-icon svg {
        width: 18px;
        height: 18px;
      }
    }
    
    
    /* ===== Анимации ===== */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from { 
        opacity: 0;
        transform: translateY(20px);
      }
      to { 
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    
    @keyframes rotate-background {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    @keyframes rotate-star {
      from { 
        transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(var(--distance, 100px)) rotate(0deg); 
      }
      to { 
        transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(var(--distance, 100px)) rotate(360deg); 
      }
    }
    
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.02); }
      100% { transform: scale(1); }
    }
    
    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
      20%, 40%, 60%, 80% { transform: translateX(5px); }
    }
    
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-5px); }
      100% { transform: translateY(0px); }
    }
    
    .success-animation {
      animation: pulse 0.5s ease-in-out;
      position: relative;
    }
    
    .success-animation::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(76, 175, 80, 0.2);
      border-radius: var(--border-radius);
      animation: fadeOut 1s forwards;
      pointer-events: none;
    }
    
    .page {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 70px; /* Обновляем с 56px на 70px */
        overflow-y: auto;
        padding: 15px;
        z-index: 1;
        background-color: transparent;
    }
    
    /* ===== Адаптация для мобильных ===== */
    @media (max-width: 480px) {
      .user-info {
        top: 8px;
        left: 10px;
        right: 10px;
        gap: 10px;
      }
      
      .avatar {
        width: 100px; /* Увеличиваем для мобильных (было 70px) */
        height: 100px;
        font-size: 42px; /* Увеличиваем шрифт */
      }
      
      #username {
        font-size: 24px; /* Увеличиваем для мобильных (было 20px) */
        margin-top: 4px;
      }
      
      .user-header-top {
        margin-bottom: 12px; /* Уменьшаем отступ на мобильных */
      }
      
      .activity-points,
      .daex-coins {
        font-size: 16px; /* Уменьшаем для мобильных */
        padding: 6px 10px; /* Еще меньше padding */
        gap: 4px;
        min-height: 36px;
      }
      
      .activity-icon,
      .daex-icon {
        width: 18px;
        height: 18px;
      }
      
      #content {
        margin-top: 65px;
        padding: 15px;
      }
    
      .user-main {
        padding-bottom: 55px;
      }
      
      .team-member {
        padding: 8px;
        height: 45px;
      }
      
      .member-avatar {
        width: 35px;
        height: 35px;
        font-size: 16px;
      }
      
      .member-name {
        font-size: 14px;
      }
      
      .confirmation-buttons {
        flex-direction: column;
        gap: 10px;
      }
      
      .member-points {
        font-size: 12px;
        padding: 3px 6px;
        min-width: 60px;
      }
      
      /* Адаптация рейтинга */
      .countdown-timer, .prize-pool {
        font-size: 36px;
      }
    
      .prize-display {
        min-height: 70px;
        padding: 12px 0;
      }
      
      .team-card {
        height: 38px;
        padding: 6px 10px;
      }
      
      .team-position {
        font-size: 16px;
        width: 24px;
        margin-right: 8px;
      }
    
      .team-name {
        font-size: 14px;
      }
      
      .team-stats {
        font-size: 12px;
        gap: 8px;
      }
      
      /* Адаптация заданий */
      .quests-page {
        padding-top: 10px;
      }
      
      .quests-description {
        margin: 0 10px 10px;
        padding: 12px;
      }
      
      .quests-description h2 {
        font-size: 18px;
      }
      
      .quests-description p {
        font-size: 13px;
      }
      
      .quests-tabs {
        margin: 0 10px 10px;
      }
      
      .quest-tab {
        font-size: 13px;
        padding: 8px;
      }
      
      .quests-list-container {
        padding: 0 10px 10px;
      }
      
      .quest-item {
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      
      .quest-action-btn {
        width: 100%;
        margin-left: 0;
      }
      
      .quest-title {
        font-size: 15px;
      }
      
      .quest-description {
        font-size: 13px;
      }
      
      .quest-reward {
        gap: 10px;
      }
      
      .reward-points, .reward-daex {
        font-size: 13px;
      }
      
      .daex-icon-small {
        width: 14px;
        height: 14px;
      }
      
      .partner-quest-instructions {
        padding: 10px;
      }
      
      .partner-quest-instructions p {
        font-size: 13px;
      }
      
      /* Адаптация профиля */
      .profile-section {
        padding: 15px;
      }
      
      .balance-amount {
        font-size: 28px;
      }
      
      .action-btn {
        padding: 10px 12px;
        font-size: 14px;
        max-width: 130px;
      }
      
      .ref-stats {
        padding: 12px;
      }
      
      .stat-item span {
        font-size: 13px;
      }
      
      .stat-item strong {
        font-size: 16px;
      }
      
      .info-tooltip {
        width: 260px;
        padding: 12px;
        font-size: 13px;
      }
      
      .info-tooltip h4 {
        font-size: 15px;
      }
      
      .page {
        padding: 10px;
      }
    }
    
    /* Анимации появления */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes modalFadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    #content {
      animation: fadeIn 0.4s ease-out;
    }
    
    .modal-content {
      animation: modalFadeIn 0.3s ease-out;
    }
    
    /* Отключаем анимации на мобильных */
    @media (max-width: 768px) {
      .card:hover, .team-member:hover, .quest-item:hover {
        transform: none !important;
        box-shadow: none !important;
      }
      
      .btn:hover {
        transform: none !important;
      }
      
      .avatar:hover {
        transform: none !important;
      }
    }
    
    /* Анимации переходов между страницами */
    .page-transition {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 56px; /* Учитываем высоту навигации */
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
    }
    
    .page-transition.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    
    #content {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 56px; /* Высота навигации */
      overflow-y: auto;
      padding: 15px;
      z-index: 1;
      background-color: transparent;
    }
    
    .page-container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      padding: 15px;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(15px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    html, body {
      overflow-x: hidden;
      padding: 0 !important;
      margin: 0 !important;
    }
    
    #content {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
    
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
    }
    
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    
    html, body, .container, #content, .page-container {
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
      height: 100% !important;
      overflow: hidden !important;
    }
    
    /* Добавьте в конец файла */
    #deposit-modal input {
      width: 100%;
      padding: 12px;
      margin: 15px 0;
      border-radius: var(--border-radius);
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: #2d2d2d;
      color: white;
      font-size: 16px;
    }
    
    #deposit-status {
      margin-top: 15px;
      padding: 10px;
      text-align: center;
    }
    
    #ton-connect-button {
      margin: 15px 0;
    }
    
    /* Добавьте в конец файла */
    .modal {
      z-index: 1000;
    }
    
    /* Для TonConnect UI */
    .tc-widget {
      z-index: 9999 !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      background: rgba(0,0,0,0.7) !important;
    }
    
    
    /* Кнопка подключения */
    #init-connect-btn {
      margin: 20px 0;
      width: 100%;
      padding: 12px;
    }
    
    #deposit-form {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    #deposit-amount {
      padding: 12px;
      border-radius: var(--border-radius);
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(255,255,255,0.05);
      color: white;
      font-size: 16px;
    }
    
    #deposit-status {
      min-height: 20px;
      margin-top: 10px;
      text-align: center;
    }
    
    /* ===== WALLET UI ===== */
    .wallet-ui-container {
      position: absolute;
      top: 20px; /* Опускаем контейнер на 20px ниже */
      left: 0;
      z-index: 2;
      width: 100%;
      display: flex;
      justify-content: center;
    }
    
    .wallet-btn-connect {
      background: linear-gradient(135deg, rgba(0, 136, 204, 0.15) 0%, rgba(0, 170, 255, 0.15) 100%);
      color: #ffffff;
      border-radius: 16px;
      padding: 12px 20px;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.2s ease; /* Упрощаем transition */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0, 170, 255, 0.15);
      min-width: auto;
    }
    
    .wallet-btn-connect:hover {
      background: linear-gradient(135deg, rgba(0, 136, 204, 0.25) 0%, rgba(0, 170, 255, 0.25) 100%);
      /* Убираем transform: translateY(-2px); */
      box-shadow: 0 6px 25px rgba(0, 170, 255, 0.25);
    }
    
    .wallet-btn-connect:active {
      /* Убираем transform: translateY(0); */
      box-shadow: 0 2px 15px rgba(0, 170, 255, 0.2);
      background: linear-gradient(135deg, rgba(0, 136, 204, 0.2) 0%, rgba(0, 170, 255, 0.2) 100%);
    }
    
    .wallet-btn-connect-icon {
      width: 22px;
      height: 22px;
      object-fit: contain;
      filter: brightness(1.2);
    }
    
    /* Состояние загрузки */
    .wallet-btn-connect.loading {
      opacity: 0.8;
      pointer-events: none;
    }
    
    .wallet-btn-connect.loading .wallet-btn-connect-icon {
      animation: wallet-spin 1s linear infinite;
    }
    
    @keyframes wallet-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* Улучшенный контейнер для подключенного кошелька */
    .wallet-connected-box {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      padding: 10px 16px;
      gap: 10px;
      min-width: 0;
      position: relative;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.2s ease;
    }
    
    .wallet-connected-box:hover {
      background: rgba(255, 255, 255, 0.12);
      /* Убираем поднятие при hover */
    }
    
    .wallet-dropdown-btn {
      background: none;
      border: none;
      cursor: pointer;
      margin: 0;
      padding: 4px;
      display: flex;
      align-items: center;
      border-radius: 6px;
      transition: background 0.2s ease;
    }
    
    .wallet-dropdown-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .wallet-arrow {
      display: block;
      width: 12px;
      height: 12px;
      border: solid rgba(255, 255, 255, 0.7);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      transition: all 0.2s ease;
    }
    
    .wallet-dropdown-btn:hover .wallet-arrow {
      border-color: #ffffff;
    }
    
    .wallet-dropdown-menu.show .wallet-arrow {
      transform: rotate(-135deg);
    }
    
    /* Убираем анимацию появления */
    /* .wallet-ui-container {
      animation: slideInDown 0.4s ease-out;
    } */
    
    /* Адаптация для мобильных */
    @media (max-width: 768px) {
      .wallet-ui-container {
        top: 15px; /* Меньше опускаем на мобильных */
      }
      
      .wallet-btn-connect {
        padding: 10px 16px;
        font-size: 14px;
        border-radius: 14px;
      }
      
      .wallet-btn-connect-icon {
        width: 20px;
        height: 20px;
      }
      
      .wallet-connected-box {
        padding: 8px 14px;
      }
      
      .wallet-addr-short {
        font-size: 13px;
      }
    }
    
    @media (max-width: 480px) {
      .wallet-ui-container {
        top: 10px; /* Еще меньше на маленьких экранах */
      }
      
      .wallet-btn-connect {
        padding: 9px 14px;
        font-size: 13px;
        gap: 8px;
      }
      
      .wallet-btn-connect-icon {
        width: 18px;
        height: 18px;
      }
      
      .wallet-connected-box {
        padding: 7px 12px;
        gap: 8px;
      }
      
      .wallet-addr-short {
        font-size: 12px;
      }
      
      .wallet-arrow {
        width: 10px;
        height: 10px;
      }
    }
    
    /* ===== WALLET UI - ПОДКЛЮЧЕННЫЙ КОШЕЛЕК ===== */
    .wallet-ui-container {
      position: absolute;
      top: 20px;
      left: 0;
      z-index: 2;
      width: 100%;
      display: flex;
      justify-content: flex-start; /* Меняем на flex-start */
      padding: 0 15px; /* Добавляем отступы */
    }
    
    .wallet-connected-box {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.08);
      border: 1.5px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      padding: 10px 14px;
      gap: 10px;
      min-width: 0;
      position: relative;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.2s ease;
      cursor: pointer;
      max-width: 280px; /* Ограничиваем максимальную ширину */
    }
    
    .wallet-connected-box:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.2);
    }
    
    .wallet-addr-container {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }
    
    .wallet-status-indicator {
      width: 20px; /* Увеличиваем размер */
      height: 20px;
      border-radius: 6px; /* Скругляем углы */
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
    }
    
    .wallet-status-icon {
      width: 16px;
      height: 16px;
      object-fit: contain;
      filter: brightness(1.2) drop-shadow(0 1px 2px rgba(0, 170, 255, 0.4));
    }
    
    .wallet-dropdown-btn {
      background: none;
      border: none;
      cursor: pointer;
      margin: 0;
      padding: 4px;
      display: flex;
      align-items: center;
      border-radius: 6px;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    
    .wallet-dropdown-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .wallet-arrow {
      display: block;
      width: 12px;
      height: 12px;
      border: solid rgba(255, 255, 255, 0.7);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
      transition: all 0.2s ease;
    }
    
    .wallet-dropdown-btn:hover .wallet-arrow {
      border-color: #ffffff;
    }
    
    .wallet-dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 8px;
      background: rgba(35, 35, 35, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 12px;
      padding: 8px;
      min-width: 160px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.2s ease;
    }
    
    .wallet-dropdown-menu.show {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .wallet-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s ease;
      width: 100%;
      text-align: left;
    }
    
    .wallet-menu-item:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
    }
    
    .wallet-menu-item:active {
      background: rgba(255, 255, 255, 0.15);
    }
    
    .wallet-menu-icon {
      width: 16px;
      height: 16px;
      opacity: 0.7;
      flex-shrink: 0;
    }
    
    .wallet-menu-item:hover .wallet-menu-icon {
      opacity: 1;
    }
    
    /* Анимация появления для подключенного состояния */
    .wallet-connected-box {
      animation: walletConnectFadeIn 0.4s ease-out;
    }
    
    @keyframes walletConnectFadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 768px) {
      .wallet-ui-container {
        top: 15px;
        padding: 0 10px;
      }
      
      .wallet-connected-box {
        padding: 8px 12px;
        gap: 8px;
        max-width: 240px;
      }
      
      .wallet-addr-container {
        gap: 6px;
      }
      
      .wallet-addr-short {
        font-size: 13px;
      }
      
      .wallet-dropdown-menu {
        min-width: 140px;
        left: -10px;
      }
      
      .wallet-menu-item {
        padding: 9px 11px;
        font-size: 13px;
      }
    
      .wallet-status-indicator {
        width: 18px;
        height: 18px;
      }
      
      .wallet-status-icon {
        width: 14px;
        height: 14px;
      }
    }
    
    @media (max-width: 480px) {
      .wallet-ui-container {
        top: 10px;
        padding: 0 8px;
      }
      
      .wallet-connected-box {
        padding: 7px 10px;
        gap: 6px;
        max-width: 200px;
      }
      
      .wallet-status-indicator {
        width: 16px;
        height: 16px;
      }
    
      .wallet-status-icon {
        width: 12px;
        height: 12px;
      }
      
      .wallet-addr-short {
        font-size: 12px;
      }
      
      .wallet-dropdown-btn {
        padding: 3px;
      }
      
      .wallet-arrow {
        width: 10px;
        height: 10px;
      }
      
      .wallet-dropdown-menu {
        min-width: 130px;
        left: -15px;
      }
      
      .wallet-menu-item {
        padding: 8px 10px;
        font-size: 12px;
        gap: 8px;
      }
      
      .wallet-menu-icon {
        width: 14px;
        height: 14px;
      }
    }
    
    /* Подправим .profile-balance-section для позиции кошелька */
    .profile-balance-section {
      position: relative;
      min-height: 82px;
    }
    
    .withdraw-requests-admin {
      display: flex;
      gap: 20px;
      min-height: 60vh;
    }
    .requests-list {
      min-width: 260px;
      border-right: 1px solid #333;
      padding-right: 10px;
      max-height: 90vh;
      overflow-y: auto;
    }
    .request-item {
      cursor: pointer;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
      background: rgba(255,255,255,0.04);
      transition: background 0.2s;
    }
    .request-item:hover {
      background: rgba(255,255,255,0.08);
    }
    .filters {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }
    .filter-btn {
      flex: 1;
      background: #222;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 7px;
      cursor: pointer;
    }
    .filter-btn.active, .filter-btn:focus {
      background: #444;
    }
    .request-details {
      flex: 1;
      padding: 10px 15px;
    }
    .admin-actions {
      margin-top: 15px;
      display: flex;
      gap: 10px;
    }
    
    /* Убираем синее выделение при тапе на мобильных устройствах */
    .btn, 
    button, 
    .nav-btn,
    .modal-form button[type="submit"],
    .confirmation-buttons .btn,
    .quest-action-btn,
    .action-btn,
    .copy-btn,
    .search-btn,
    .join-btn,
    .wallet-btn-connect,
    .wallet-dropdown-btn,
    .wallet-menu-item {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    /* Дополнительно для iOS */
    .btn, 
    button {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-tap-highlight-color: transparent;
    }
    
    /* Улучшаем видимость анимации на мобильных */
    @media (max-width: 768px) {
      .btn::after,
      .modal-form button[type="submit"]::after,
      .confirmation-buttons .btn::after {
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.35) 0%, /* Увеличиваем прозрачность для мобильных */
          rgba(255, 255, 255, 0) 70%
        );
      }
      
      .btn:hover::after,
      .modal-form button[type="submit"]:hover::after,
      .confirmation-buttons .btn:hover::after {
        transform: scale(3); /* Немного уменьшаем масштаб для мобильных */
      }
    }
    
    /* Для устройств с поддержкой hover (десктоп) */
    @media (hover: hover) {
      .btn:hover::after,
      .modal-form button[type="submit"]:hover::after,
      .confirmation-buttons .btn:hover::after {
        transform: scale(4);
      }
    }
    
    /* Для устройств без поддержки hover (мобильные) */
    @media (hover: none) {
      .btn:active::after,
      .modal-form button[type="submit"]:active::after,
      .confirmation-buttons .btn:active::after {
        transform: scale(3);
        opacity: 0.7;
      }
      
      .btn:active,
      .modal-form button[type="submit"]:active,
      .confirmation-buttons .btn:active {
        transform: translateY(1px); /* Легкое нажатие вместо подъема */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
    
    /* Анимация мигания */
    @keyframes blinkBg {
      0% { opacity: 0.8; }
      50% { opacity: 0.4; }
      100% { opacity: 0.8; }
    }
    
     .page{
      opacity: 1;
      transform: translateY(20px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .page.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }
    
    .page.fade-out {
      opacity: 0;
      transform: translateY(20px);
    }
    
    .page.fade-in {
      opacity: 1;
      transform: translateY(0);
    }
    
    .loader-background-blink {
      background: rgba(0,0,0,0.4);
      animation: blinkBg 1.2s ease-in-out infinite;
      z-index: -1;
    }
    
    .loader-background.active {
      opacity: 1;
    }
    
    .loader-background-blur {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background: rgba(0,0,0,0.3);
      z-index: -1;
    }
    
    /* ===== Прячем скроллбары в Telegram WebApp, скролл остаётся ===== */
    
    /* WebKit (Android WebView, iOS WKWebView, Desktop Telegram/Electron) */
    *::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
    }
    *::-webkit-scrollbar-thumb,
    *::-webkit-scrollbar-track {
      background: transparent !important;
      border: none !important;
    }
    
    /* Для совместимости (не помешает) */
    * {
      scrollbar-width: none;        /* Firefox (если вдруг откроют там) */
      -ms-overflow-style: none;     /* старый IE/Edge */
    }
    
    /* Комфорт скролла и без «рывков» */
    html, body, #content, .page {
      -webkit-overflow-scrolling: touch;  /* инерционная прокрутка на iOS */
      overscroll-behavior: contain;       /* убираем «резинку»/оверскролл */
    }
    
    /* Стили для кнопки создания команды */
    .create-team-btn {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16px 20px;
        min-height: 50px;
    }
    
    .btn-text {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-weight: 700;
        font-size: 22px; /* Увеличили до 22px */
    }
    
    .ton-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        padding: 5px 10px;
        background: rgba(0, 136, 204, 0.2);
        border-radius: 8px;
        font-size: 15px;
        font-weight: 700;
        color: #0088cc;
    }
    
    .ton-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
        .create-team-btn {
            padding: 14px 16px;
            min-height: 46px;
        }
        
        .btn-text {
            font-size: 18px; /* Увеличили для мобильных */
            left: 48%;
        }
        
        .ton-badge {
            padding: 4px 8px;
            font-size: 13px;
        }
        
        .ton-icon {
            width: 16px;
            height: 16px;
        }
    }
    
    /* Стили для бейджа баланса TON в модалке */
    .modal-header-top {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    .ton-balance-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        border-radius: 12px;
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 600;
        align-self: flex-start;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }
    
    .ton-balance-badge.sufficient {
        background: rgba(76, 175, 80, 0.2);
        color: #4caf50;
    }
    
    .ton-balance-badge.insufficient {
        background: rgba(244, 67, 54, 0.2);
        color: #f44336;
    }
    
    .ton-balance-badge .ton-icon {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
        .ton-balance-badge {
            font-size: 12px;
            padding: 6px 10px;
        }
        
        .ton-balance-badge .ton-icon {
            width: 14px;
            height: 14px;
        }
    }
    
    @media (max-width: 480px) {
        .page {
            bottom: 65px; /* Обновляем для мобильных */
        }
        
        .rating-page {
            bottom: 65px;
        }
        
        .quests-page {
            bottom: 65px;
        }
    }
    
    .activity-icon-small {
      width: 16px;
      height: 16px;
      object-fit: contain;
      vertical-align: middle;
      margin-left: 4px;
      filter: brightness(0.9);
    }
    
    /* Для мобильных */
    @media (max-width: 480px) {
      .activity-icon-small {
        width: 14px;
        height: 14px;
      }
    }
    
    /* ===== ОПТИМИЗИРОВАННЫЕ СТИЛИ ПРОФИЛЯ ===== */
    .profile-container {
      max-width: 100%;
      margin: 0 auto;
      position: relative;
    }
    
    /* Контейнер секций */
    .profile-sections {
      position: relative;
      min-height: 400px;
      overflow: hidden;
    }
    
    .profile-section {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transform: translateX(100%);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      pointer-events: none;
    }
    
    .profile-section.active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    
    /* Секция Финансы */
    .finance-content {
      padding: 20px 0;
    }
    
    .balance-display {
      text-align: center;
      margin: 30px 0;
    }
    
    .balance-amount {
      font-size: 42px;
      font-weight: 800;
      margin-bottom: 24px;
      background: linear-gradient(135deg, #0088cc 0%, #00aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .balance-actions {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 20px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 16px;
      color: #ffffff;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 120px;
      justify-content: center;
    }
    
    .action-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }
    
    .action-btn:active {
      transform: translateY(0);
    }
    
    .deposit-btn {
      background: linear-gradient(135deg, rgba(0, 136, 204, 0.2) 0%, rgba(0, 170, 255, 0.2) 100%);
      border-color: rgba(0, 136, 204, 0.3);
    }
    
    .withdraw-btn {
      background: linear-gradient(135deg, rgba(255, 170, 0, 0.2) 0%, rgba(255, 204, 0, 0.2) 100%);
      border-color: rgba(255, 170, 0, 0.3);
    }
    
    /* Секция Рефералы */
    .referrals-content {
      padding: 20px 0;
    }
    
    .referral-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }
    
    .stat-item {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 16px;
      text-align: center;
      transition: all 0.3s ease;
    }
    
    .stat-item:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-2px);
    }
    
    .stat-value {
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .referral-link-container {
      margin-bottom: 20px;
    }
    
    .input-group {
      display: flex;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      overflow: hidden;
    }
    
    #ref-link {
      flex: 1;
      padding: 14px 16px;
      background: transparent;
      border: none;
      color: #ffffff;
      font-size: 14px;
      outline: none;
    }
    
    .copy-btn {
      padding: 14px 16px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: #ffffff;
      cursor: pointer;
      transition: background 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .copy-btn:hover {
      background: rgba(255, 255, 255, 0.15);
    }
    
    .referral-info {
      position: relative;
      text-align: center;
      margin-top: 20px;
    }
    
    .info-icon {
      display: inline-flex !important; /* Важно: переопределяем display */
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    .referral-info:not(.active) {
      display: block !important;
      visibility: visible !important;
    }
    
    .info-icon:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
    }
    
    .info-tooltip {
      display: none;
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 280px;
      background: rgba(42, 42, 42, 0.95);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 20px;
      z-index: 1000;
      margin-bottom: 15px;
    }
    
    .info-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 8px;
      border-style: solid;
      border-color: rgba(42, 42, 42, 0.95) transparent transparent transparent;
    }
    
    .info-tooltip h4 {
      margin: 0 0 12px 0;
      font-size: 16px;
      color: #ffffff;
    }
    
    .info-tooltip ul {
      margin: 0 0 12px 0;
      padding-left: 20px;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.5;
    }
    
    .info-tooltip li {
      margin-bottom: 6px;
    }
    
    .info-tooltip p {
      margin: 0;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.8);
    }
    
    /* ===== ФИКСИРОВАННЫЕ СТРЕЛОЧКИ ПО БОКАМ ===== */
    .section-navigation {
      position: fixed;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      z-index: 100;
      padding: 0 10px;
    }
    
    .nav-arrow {
      position: relative;
      background: rgba(255, 255, 255, 0.08); /* Более прозрачные */
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      pointer-events: auto;
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    
    .nav-arrow:hover {
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.9);
      transform: scale(1.05);
      box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
    }
    
    .nav-arrow:active {
      transform: scale(0.95);
    }
    
    .nav-arrow svg {
      width: 22px;
      height: 22px;
      transition: transform 0.2s ease;
    }
    
    .nav-arrow:hover svg {
      transform: scale(1.2);
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 768px) {
      .nav-arrow {
        width: 40px;
        height: 40px;
      }
      
      .nav-arrow svg {
        width: 20px;
        height: 20px;
      }
    }
    
    @media (max-width: 480px) {
      .nav-arrow {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.06);
      }
      
      .nav-arrow svg {
        width: 18px;
        height: 18px;
      }
    }
    
    /* ===== ЧИСТЫЕ МИНИМАЛИСТИЧНЫЕ ИНДИКАТОРЫ ===== */
    .section-indicators-container {
      position: fixed;
      bottom: 70px; /* Ставим НИЖЕ навигационной панели */
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 101; /* ВЫШЕ навигации (у навигации z-index: 100) */
      pointer-events: none;
    }
    
    .section-indicators {
      display: flex;
      gap: 16px;
      pointer-events: auto;
    }
    
    .indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .indicator:hover {
      background: rgba(255, 255, 255, 0.5);
      transform: scale(1.3);
    }
    
    .indicator.active {
      background: #ffffff;
      transform: scale(1.4);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }
    
    /* Анимация появления индикаторов */
    @keyframes fadeInIndicators {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .section-indicators {
      animation: fadeInIndicators 0.6s ease-out 0.3s both;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 768px) {
      .section-indicators-container {
        bottom: 65px;
      }
      
      .section-indicators {
        gap: 14px;
      }
      
      .indicator {
        width: 7px;
        height: 7px;
      }
      
      .indicator.active {
        transform: scale(1.3);
      }
    }
    
    
    @media (max-width: 480px) {
      .section-indicators-container {
        bottom: 60px;
      }
      
      .section-indicators {
        gap: 12px;
      }
      
      .indicator {
        width: 6px;
        height: 6px;
      }
      
      .indicator.active {
        transform: scale(1.2);
      }
    }
    
    /* Плавные переходы */
    .indicator {
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    
    /* Плавное исчезновение при скролле */
    .profile-container {
      position: relative;
      z-index: 1;
    }
    
    /* Затемнение фона для контраста */
    .section-navigation::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.3) 0%,
        transparent 20%,
        transparent 80%,
        rgba(0, 0, 0, 0.3) 100%
      );
      pointer-events: none;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .section-navigation:hover::before {
      opacity: 1;
    }
    
    .profile-section {
      transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                  opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    /* Класс для анимации свайпа */
    .swiping {
      transition: none !important;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
      .profile-nav {
        margin-bottom: 20px;
      }
      
      .profile-nav-btn {
        padding: 10px 14px;
        font-size: 13px;
      }
      
      .balance-amount {
        font-size: 36px;
        margin-bottom: 20px;
      }
      
      .balance-actions {
        flex-direction: column;
        align-items: center;
      }
      
      .action-btn {
        width: 100%;
        max-width: 200px;
      }
      
      .referral-stats-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      
      .stat-item {
        padding: 12px;
      }
      
      .stat-value {
        font-size: 20px;
      }
      
      .input-group {
        flex-direction: column;
      }
      
      #ref-link {
        padding: 12px;
        text-align: center;
      }
      
      .copy-btn {
        padding: 12px;
      }
      
      .section-navigation {
        margin-top: 24px;
      }
      
      .nav-arrow {
        width: 40px;
        height: 40px;
      }
      
      .info-tooltip {
        width: 260px;
        padding: 16px;
      }
    }
    
    /* Анимации */
    .profile-section {
      animation: fadeInUp 0.4s ease-out;
    }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* Улучшенная читаемость */
    .stat-value,
    .balance-amount {
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    /* Эффекты стекломорфизма */
    .profile-nav,
    .stat-item,
    .input-group,
    .nav-arrow {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    /* Плавные переходы */
    .profile-nav-btn,
    .action-btn,
    .copy-btn,
    .info-icon,
    .nav-arrow,
    .indicator {
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    /* Контраст для активных состояний */
    .profile-nav-btn.active,
    .indicator.active {
      background: rgba(255, 255, 255, 0.15);
    }
    
    /* ===== НОВЫЙ ТУЛТИП ДЛЯ ПРОДАКШЕНА ===== */
    .tooltip-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .tooltip-overlay.show {
      opacity: 1;
    }
    
    .tooltip-content {
      background: rgba(35, 35, 35, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      padding: 25px;
      max-width: 400px;
      width: 100%;
      position: relative;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }
    
    .tooltip-overlay.show .tooltip-content {
      transform: scale(1);
    }
    
    .tooltip-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }
    
    .tooltip-close:hover {
      background: rgba(255, 255, 255, 0.2);
      color: #ffffff;
    }
    
    .tooltip-content h4 {
      margin: 0 0 20px 0;
      font-size: 18px;
      color: #ffffff;
      font-weight: 600;
      text-align: center;
    }
    
    .tooltip-list {
      margin-bottom: 20px;
    }
    
    .tooltip-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 15px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      border-left: 3px solid rgba(255, 255, 255, 0.2);
    }
    
    .tooltip-item:last-child {
      margin-bottom: 0;
    }
    
    .level-badge {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: #ffffff;
      flex-shrink: 0;
    }
    
    .tooltip-item span:last-child {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      line-height: 1.4;
    }
    
    .current-level {
      text-align: center;
      padding-top: 15px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
    }
    
    .current-level strong {
      color: #ffffff;
      font-weight: 600;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
      .tooltip-overlay {
        padding: 15px;
      }
      
      .tooltip-content {
        padding: 20px;
        border-radius: 16px;
      }
      
      .tooltip-item {
        padding: 10px;
        flex-direction: column;
        gap: 8px;
      }
      
      .level-badge {
        width: 20px;
        height: 20px;
        font-size: 11px;
      }
      
      .tooltip-item span:last-child {
        font-size: 13px;
      }
    }
    
    /* ФИКС ДЛЯ ИКОНКИ ИНФОРМАЦИИ В РЕФЕРАЛЬНОЙ СЕКЦИИ */
    .referral-info {
      position: relative !important;
      display: inline-block !important;
      margin-top: 15px !important;
      z-index: 5 !important;
    }
    
    .info-icon {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 36px !important;
      height: 36px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      border-radius: 50% !important;
      color: rgba(255, 255, 255, 0.8) !important;
      cursor: pointer !important;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 10 !important;
      position: relative !important;
    }
    
    .info-icon:hover {
      background: rgba(255, 255, 255, 0.15) !important;
      color: #ffffff !important;
      transform: scale(1.1) !important;
    }
    
    .info-icon svg {
      width: 20px !important;
      height: 20px !important;
      display: block !important;
    }
    
    /* Гарантия видимости в секции рефералов */
    .referrals-section .info-icon {
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    /* Убираем любые возможные перекрытия */
    .referrals-content {
      position: relative;
      z-index: 2;
    }
    
    .referrals-section {
      position: relative;
      z-index: 1;
    }
    
    /* СТИЛИ ДЛЯ СТАТИСТИКИ РЕФЕРАЛОВ С ИКОНКАМИ */
    .referral-stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }
    
    .stat-item {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 20px 16px;
      text-align: center;
      transition: all 0.3s ease;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .stat-item:hover {
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .stat-icon {
      margin-bottom: 12px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      position: relative;
    }
    
    .stat-icon svg {
      width: 24px;
      height: 24px;
      color: rgba(255, 255, 255, 0.9);
    }
    
    .stat-ton-icon,
    .stat-activity-icon {
      width: 24px;
      height: 24px;
      object-fit: contain;
      filter: brightness(0.9) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    
    .stat-ton-icon {
      filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 170, 255, 0.3));
    }
    
    .stat-activity-icon {
      filter: brightness(1) drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
    }
    
    .stat-value {
      font-size: 24px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 4px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .stat-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 500;
    }
    
    /* Анимация появления */
    .stat-item {
      animation: fadeInUp 0.5s ease-out;
    }
    
    .stat-item:nth-child(1) { animation-delay: 0.1s; }
    .stat-item:nth-child(2) { animation-delay: 0.2s; }
    .stat-item:nth-child(3) { animation-delay: 0.3s; }
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(15px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 768px) {
      .referral-stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      
      .stat-item {
        padding: 16px 12px;
        flex-direction: row;
        text-align: left;
        gap: 15px;
      }
      
      .stat-icon {
        margin-bottom: 0;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
      }
      
      .stat-icon svg {
        width: 20px;
        height: 20px;
      }
      
      .stat-ton-icon,
      .stat-activity-icon {
        width: 20px;
        height: 20px;
      }
      
      .stat-value {
        font-size: 20px;
        margin-bottom: 2px;
      }
      
      .stat-content {
        flex: 1;
      }
    }
    
    @media (max-width: 480px) {
      .stat-item {
        padding: 14px 10px;
        gap: 12px;
      }
      
      .stat-icon {
        width: 32px;
        height: 32px;
      }
      
      .stat-icon svg {
        width: 18px;
        height: 18px;
      }
      
      .stat-ton-icon,
      .stat-activity-icon {
        width: 18px;
        height: 18px;
      }
      
      .stat-value {
        font-size: 18px;
      }
      
      .stat-label {
        font-size: 11px;
      }
    }
    
    /* Стили для отображения баланса TON с иконкой */
    .balance-amount {
      font-size: 48px !important; /* Увеличиваем размер шрифта */
      font-weight: 800;
      margin-bottom: 24px;
      background: linear-gradient(135deg, #0088cc 0%, #00aaff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      text-shadow: 0 2px 4px rgba(0, 170, 255, 0.4);
    }
    
    
    .ton-balance-icon {
      width: 48px !important;
      height: 48px !important;
      object-fit: contain;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 768px) {
      .balance-amount {
        font-size: 36px;
        gap: 12px;
      }
      
      .ton-balance-icon {
        width: 40px;
        height: 40px;
      }
    }
    
    @media (max-width: 480px) {
      .balance-amount {
        font-size: 32px;
        gap: 10px;
      }
      
      .ton-balance-icon {
        width: 35px;
        height: 35px;
      }
    }
    
    /* Полное удаление всех бордеров у элементов кошелька */
    .wallet-btn-connect,
    .wallet-connected-box,
    .wallet-dropdown-menu,
    .wallet-menu-item,
    .wallet-addr-container,
    .wallet-status-indicator {
      border: none !important;
      outline: none !important;
    }
    
    .wallet-addr-short {
      color: #ffffff;
      font-size: 16px; /* Увеличили с 15px до 18px */
      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
      font-weight: 600;
      letter-spacing: 0.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    /* ===== УБИРАЕМ ВСЕ ОКАНТОВКИ НА ВКЛАДКЕ ПРОФИЛЯ ===== */
    
    /* Контейнер профиля */
    .profile-container * {
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
    }
    
    /* Секции профиля */
    .profile-section,
    .finance-content,
    .referrals-content {
      border: none !important;
      box-shadow: none !important;
    }
    
    /* Карточки статистики */
    .stat-item {
      border: none !important;
      background: rgba(255, 255, 255, 0.03) !important;
      box-shadow: none !important;
    }
    
    .stat-item:hover {
      background: rgba(255, 255, 255, 0.06) !important;
      transform: translateY(-1px) !important;
    }
    
    /* Поле реферальной ссылки */
    .input-group {
      border: none !important;
      background: rgba(255, 255, 255, 0.03) !important;
      box-shadow: none !important;
    }
    
    #ref-link {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }
    
    .copy-btn {
      border: none !important;
      background: rgba(255, 255, 255, 0.05) !important;
      box-shadow: none !important;
    }
    
    .copy-btn:hover {
      background: rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Кнопки действий */
    .action-btn {
      border: none !important;
      box-shadow: none !important;
    }
    
    .deposit-btn {
      background: rgba(0, 136, 204, 0.15) !important;
    }
    
    .withdraw-btn {
      background: rgba(255, 170, 0, 0.15) !important;
    }
    
    .action-btn:hover {
      background: rgba(255, 255, 255, 0.1) !important;
      transform: translateY(-1px) !important;
    }
    
    /* Иконка информации */
    .info-icon {
      border: none !important;
      background: rgba(255, 255, 255, 0.05) !important;
      box-shadow: none !important;
    }
    
    .info-icon:hover {
      background: rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Навигационные стрелки */
    .nav-arrow {
      border: none !important;
      background: rgba(255, 255, 255, 0.05) !important;
      box-shadow: none !important;
    }
    
    .nav-arrow:hover {
      background: rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Индикаторы */
    .indicator {
      border: none !important;
      box-shadow: none !important;
    }
    
    .indicator.active {
      box-shadow: none !important;
    }
    
    /* Кошелек */
    .wallet-connected-box {
      border: none !important;
      background: rgba(255, 255, 255, 0.05) !important;
      box-shadow: none !important;
    }
    
    .wallet-dropdown-menu {
      border: none !important;
      background: rgba(35, 35, 35, 0.98) !important;
      box-shadow: none !important;
    }
    
    .wallet-menu-item {
      border: none !important;
    }
    
    .wallet-menu-item:hover {
      background: rgba(255, 255, 255, 0.08) !important;
    }
    
    /* Баланс TON */
    .balance-amount {
      text-shadow: none !important;
    }
    
    /* Убираем бордеры у иконок в статистике */
    .stat-icon {
      border: none !important;
      background: rgba(255, 255, 255, 0.05) !important;
      box-shadow: none !important;
    }
    
    /* Убираем градиентные бордеры */
    .stat-item,
    .action-btn,
    .wallet-connected-box,
    .nav-arrow {
      background-image: none !important;
    }
    
    /* Убираем последние остатки бордеров */
    .profile-section::before,
    .profile-section::after,
    .stat-item::before,
    .stat-item::after {
      display: none !important;
    }
    
    /* Делаем интерфейс более минималистичным */
    .profile-container {
      --minimal-spacing: 8px;
    }
    
    .stat-item {
      padding: 16px 12px !important;
    }
    
    .balance-actions {
      gap: 12px !important;
    }
    
    .referral-stats-grid {
      gap: 10px !important;
    }
    
    /* Улучшаем читаемость без бордеров */
    .stat-value {
      font-size: 22px !important;
      font-weight: 700 !important;
    }
    
    .stat-label {
      font-size: 11px !important;
      opacity: 0.8 !important;
    }
    
    /* Делаем кнопки более плоскими */
    .action-btn {
      padding: 12px 18px !important;
      border-radius: 12px !important;
    }
    
    /* Убираем hover-эффекты, которые создавали псевдо-бордеры */
    .action-btn:hover::after,
    .stat-item:hover::after {
      display: none !important;
    }
    
    /* Фиксим z-index для выпадающего меню */
    .wallet-dropdown-menu {
      z-index: 1000 !important;
    }
    
    /* Убираем бордеры у тултипа */
    .tooltip-content {
      border: none !important;
      background: rgba(40, 40, 40, 0.98) !important;
      backdrop-filter: blur(20px) !important;
    }
    
    .tooltip-content::after {
      display: none !important;
    }
    
    .tooltip-item {
      border: none !important;
      background: rgba(255, 255, 255, 0.05) !important;
      border-left: none !important;
    }
    
    .level-badge {
      border: none !important;
      background: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* ===== СТИЛИ ДЛЯ СТАТУС-ИНДИКАТОРА ТРАНЗАКЦИЙ ===== */
    .transaction-status {
        margin: 25px 0 15px 0;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    .status-step {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 36px;
    }
    
    .step-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .step-text {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.95);
        font-weight: 500;
        text-align: left;
        flex: 1;
        word-wrap: break-word;
    }
    
    /* Увеличенный мини-лоадер */
    .loader-spinner.mini {
        width: 30px;
        height: 30px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top: 3px solid #ffffff;
        border-radius: 50%;
        animation: mini-spin 1s linear infinite;
        margin: 0;
    }
    
    /* Иконка успеха */
    .icon-success {
        color: #4caf50;
        animation: scaleIn 0.3s ease-out;
    }
    
    /* Иконка ошибки */
    .icon-error {
        color: #f44336;
        animation: scaleIn 0.3s ease-out;
    }
    
    /* Анимации */
    @keyframes scaleIn {
        from {
            transform: scale(0);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    @keyframes mini-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
        .transaction-status {
            margin: 20px 0 12px 0;
        }
        
        .status-step {
            gap: 12px;
        }
        
        .step-icon {
            width: 28px;
            height: 28px;
        }
        
        .loader-spinner.mini {
            width: 26px;
            height: 26px;
            border-width: 2.5px;
        }
        
        .step-text {
            font-size: 15px;
        }
    }
    
    .deposit-btn {
      background: rgb(2, 43, 63) !important; /* Увеличил непрозрачность с 0.15 до 0.95 */
      padding: 16px 22px !important; /* Увеличил padding (было 14px 20px) */
      font-size: 16px !important; /* Увеличил шрифт на 1px */
      min-width: 130px !important; /* Увеличил минимальную ширину */
    }
    
    .withdraw-btn {
      background: rgb(77, 51, 0) !important; /* Увеличил непрозрачность с 0.15 до 0.95 */
      padding: 16px 22px !important; /* Увеличил padding (было 14px 20px) */
      font-size: 16px !important; /* Увеличил шрифт на 1px */
      min-width: 130px !important; /* Увеличил минимальную ширину */
    }
    
    /* Для hover-состояний тоже увеличиваем непрозрачность */
    .deposit-btn:hover {
      background: rgba(0, 106, 158, 0.3) !important; /* Полностью непрозрачный при наведении */
    }
    
    .withdraw-btn:hover {
      background: rgba(180, 120, 0, 0.3) !important; /* Полностью непрозрачный при наведении */
    }
    
    /* КОНТЕЙНЕР ПЕРЕКЛЮЧАТЕЛЯ ВАЛЮТ */
    .currency-tabs {
      display: flex;
      background: #0f0f0f;
      border-radius: 12px;
      padding: 4px;
      margin-bottom: 20px;
      border: 1px solid #3a3a3a;
    }
    
    .currency-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 16px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: #ccc;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .currency-tab:hover {
      background: #3a3a3a;
      color: #fff;
    }
    
    .currency-tab.active {
      background: #8774e1;
      color: #fff;
      box-shadow: 0 2px 8px rgba(135, 116, 225, 0.3);
    }
    
    .currency-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }
    
    /* СЕКЦИИ ВАЛЮТ */
    .currency-section {
      display: none;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s ease;
    }
    
    .currency-section.active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }
    
    /* ОБЩИЙ СТИЛЬ ДЛЯ ПОЛЕЙ ВВОДА */
    .ton-conversion-line,
    .stars-conversion-line {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
      padding: 15px;
      background: rgb(20, 20, 20);
      border-radius: 12px;
    }
    
    .conversion-icon {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }
    
    #deposit-amount,
    #stars-amount {
      width: 100px;
      padding: 10px 12px;
      border: 1px solid #444;
      border-radius: 8px;
      background: #1a1a1a;
      color: #fff;
      font-size: 16px;
      text-align: center;
    }
    
    .equals-sign {
      font-size: 18px;
      font-weight: bold;
      color: #8774e1;
    }
    
    .ton-value {
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      min-width: 60px;
      text-align: center;
    }
    
    /* КНОПКА TON (ТАКАЯ ЖЕ КАК И STARS) */
    .btn-ton {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #007bff, #0056b3);
      border: none;
      border-radius: 12px;
      color: white;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .btn-ton:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 123, 255, 0.4);
    }
    
    .btn-ton:active {
      transform: translateY(0);
    }
    
    /* КНОПКА STARS */
    .btn-stars {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #0088cc, #00a2ff);
      border: none;
      border-radius: 12px;
      color: white;
      font-weight: 600;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .btn-stars:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 20px rgba(0, 136, 204, 0.4);
    }
    
    .btn-stars:active {
      transform: translateY(0);
    }
    
    /* ИКОНКИ ДЛЯ КНОПОК */
    .btn-icon {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }
    
    /* СТАТУСНЫЕ СООБЩЕНИЯ */
    .status-message {
      margin-top: 15px;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      font-size: 14px;
    }
    
    .status-message.error {
      background-color: rgba(255, 107, 107, 0.1);
      color: #ff6b6b;
      border: 1px solid rgba(255, 107, 107, 0.3);
    }
    
    .status-message.info {
      background-color: rgba(135, 116, 225, 0.1);
      color: #8774e1;
      border: 1px solid rgba(135, 116, 225, 0.3);
    }
    
    .status-message.success {
      background-color: rgba(76, 175, 80, 0.1);
      color: #4caf50;
      border: 1px solid rgba(76, 175, 80, 0.3);
    }
    
    /* АДАПТИВНОСТЬ */
    @media (max-width: 480px) {
      .currency-tab {
        padding: 10px 12px;
        font-size: 14px;
      }
      
      .currency-icon {
        width: 18px;
        height: 18px;
      }
      
      .ton-conversion-line,
      .stars-conversion-line {
        padding: 12px;
        gap: 8px;
      }
      
      .conversion-icon {
        width: 20px;
        height: 20px;
      }
      
      #deposit-amount,
      #stars-amount {
        width: 80px;
        padding: 8px 10px;
        font-size: 14px;
      }
      
      .ton-value {
        font-size: 14px;
        min-width: 50px;
      }
      
      .btn-ton,
      .btn-stars {
        padding: 12px;
        font-size: 14px;
      }
      
      .btn-icon {
        width: 18px;
        height: 18px;
      }
    }
    
    /* Добавим в конец файла style.css */
    .team-card.user-team {
      border: 2px solid #4a76a8 !important;
      background: rgba(74, 118, 168, 0.2) !important;
    }
    
    /* Добавим в конец файла style.css */
    .load-more-container {
      text-align: center;
      padding: 8px 0;
    }
    
    .load-more-teams {
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      cursor: pointer;
      padding: 8px 16px;
      transition: all 0.3s ease;
      border-radius: 6px;
    }
    
    .load-more-teams:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.05);
    }
    
    .load-more-teams:active {
      transform: scale(0.95);
    }
    
    /* ===== ОБНОВЛЕННЫЕ СТИЛИ РЕЙТИНГА 2024 ===== */
    
    /* Основные настройки текста для всей страницы рейтинга */
    .rating-page {
        font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        font-weight: 600;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        padding-bottom: 80px;
    }
    
    /* Контейнер контента рейтинга */
    .rating-content {
        max-width: var(--container-width);
        margin: 0 auto;
        padding: 0 16px;
    }
    
    /* Админ панель */
    .admin-panel-btn-container {
        display: flex;
        justify-content: flex-end;
        margin: 0 0 20px 0;
        padding: 0 4px;
        animation: fadeInUp 0.6s ease-out 0.1s both;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(15px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .admin-panel-btn {
        background: rgba(135, 116, 225, 0.1);
        border: 1px solid rgba(135, 116, 225, 0.3);
        border-radius: 12px;
        color: #8774e1;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .admin-panel-btn:hover {
        background: rgba(135, 116, 225, 0.2);
        transform: translateY(-1px);
    }
    
    /* Бейдж команды пользователя - ОБНОВЛЕННЫЙ */
    .user-team-badge {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 180px;
        height: 44px;
        background: linear-gradient(135deg, rgba(135, 116, 225, 0.15) 0%, rgba(76, 86, 226, 0.1) 100%);
        border-radius: 22px;
        padding: 0 18px;
        margin: 10px 0 20px auto;
        font-family: 'Onest', -apple-system, sans-serif;
        border: 1px solid rgba(135, 116, 225, 0.2);
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translateY(10px);
        animation: badgeSlideIn 0.5s ease 0.2s forwards;
    }
    
    @keyframes badgeSlideIn {
        from {
            opacity: 0;
            transform: translateY(10px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    .user-team-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(135, 116, 225, 0.4), transparent);
    }
    
    .badge-text {
        color: #ffffff;
        font-weight: 700;
        font-size: 15px;
        white-space: nowrap;
        letter-spacing: 0.2px;
    }
    
    .badge-position {
        color: #8774e1;
        font-weight: 900;
        font-size: 17px;
        background: rgba(0, 0, 0, 0.3);
        padding: 2px 8px;
        border-radius: 10px;
        min-width: 36px;
        text-align: center;
    }
    
    /* Контейнер списка команд */
    .teams-list-container {
        margin-top: 5px;
    }
    
    .teams-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    /* Карточка команды - ОБНОВЛЕННЫЙ ДИЗАЙН */
    .team-card {
        display: grid;
        grid-template-columns: 60px 52px 1fr auto;
        align-items: center;
        background: rgba(25, 25, 25, 0.8);
        border-radius: 16px;
        padding: 0 18px;
        height: 72px;
        margin: 0 0 4px 0;
        font-family: 'Onest', -apple-system, sans-serif;
        position: relative;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.05);
        overflow: hidden;
        opacity: 0;
        transform: translateX(-40px);
        animation: slideInTeam 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    /* 🔥 ОСНОВНАЯ АНИМАЦИЯ: ПООЧЕРЕДНОЕ ПОЯВЛЕНИЕ КАРТОЧЕК */
    @keyframes slideInTeam {
        0% {
            opacity: 0;
            transform: translateX(-40px) scale(0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        70% {
            opacity: 0.8;
            transform: translateX(4px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
        }
        100% {
            opacity: 1;
            transform: translateX(0) scale(1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }
    }
    
    /* 🔥 ПОСЛЕДОВАТЕЛЬНОЕ ПОЯВЛЕНИЕ КАРТОЧЕК КОМАНД */
    .teams-list .team-card:nth-child(1) { 
        animation-delay: 0.1s; 
    }
    .teams-list .team-card:nth-child(2) { 
        animation-delay: 0.2s; 
    }
    .teams-list .team-card:nth-child(3) { 
        animation-delay: 0.3s; 
    }
    .teams-list .team-card:nth-child(4) { 
        animation-delay: 0.4s; 
    }
    .teams-list .team-card:nth-child(5) { 
        animation-delay: 0.5s; 
    }
    .teams-list .team-card:nth-child(6) { 
        animation-delay: 0.6s; 
    }
    .teams-list .team-card:nth-child(7) { 
        animation-delay: 0.7s; 
    }
    .teams-list .team-card:nth-child(8) { 
        animation-delay: 0.8s; 
    }
    .teams-list .team-card:nth-child(9) { 
        animation-delay: 0.9s; 
    }
    .teams-list .team-card:nth-child(10) { 
        animation-delay: 1.0s; 
    }
    
    .team-card:hover {
        background: rgba(30, 30, 30, 0.9);
        transform: translateY(-3px) translateX(0) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important;
    }
    
    /* Анимации для топ-команд */
    .team-card.top-1:hover {
        box-shadow: 0 10px 30px rgba(255, 215, 0, 0.15) !important;
    }
    
    .team-card.top-2:hover {
        box-shadow: 0 10px 30px rgba(192, 192, 192, 0.15) !important;
    }
    
    .team-card.top-3:hover {
        box-shadow: 0 10px 30px rgba(205, 127, 50, 0.15) !important;
    }
    
    .team-card.user-team:hover {
        box-shadow: 0 10px 30px rgba(74, 118, 168, 0.15) !important;
    }
    
    /* ПОЗИЦИЯ - ОБНОВЛЕННАЯ */
    .team-position {
        grid-column: 1;
        font-size: 26px !important;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        opacity: 0;
        animation: positionFadeIn 0.4s ease forwards;
    }
    
    @keyframes positionFadeIn {
        to {
            opacity: 1;
        }
    }
    
    /* Анимация позиции с задержкой */
    .teams-list .team-card:nth-child(1) .team-position { animation-delay: 0.3s; }
    .teams-list .team-card:nth-child(2) .team-position { animation-delay: 0.4s; }
    .teams-list .team-card:nth-child(3) .team-position { animation-delay: 0.5s; }
    .teams-list .team-card:nth-child(4) .team-position { animation-delay: 0.6s; }
    .teams-list .team-card:nth-child(5) .team-position { animation-delay: 0.7s; }
    .teams-list .team-card:nth-child(6) .team-position { animation-delay: 0.8s; }
    .teams-list .team-card:nth-child(7) .team-position { animation-delay: 0.9s; }
    .teams-list .team-card:nth-child(8) .team-position { animation-delay: 1.0s; }
    .teams-list .team-card:nth-child(9) .team-position { animation-delay: 1.1s; }
    .teams-list .team-card:nth-child(10) .team-position { animation-delay: 1.2s; }
    
    .team-position::before {
        content: "#";
        font-size: 18px !important;
        color: rgba(255, 255, 255, 0.5);
        margin-right: 2px;
        font-weight: 700;
        opacity: 0.7;
    }
    
    /* АВАТАРКА КОМАНДЫ - ОБНОВЛЕННАЯ */
    .team-avatar-rating {
        grid-column: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    
    .team-avatar-small {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        border: 2px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        opacity: 0;
        transform: scale(0.8);
        animation: avatarPopIn 0.4s ease forwards;
    }
    
    @keyframes avatarPopIn {
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    /* Анимация аватарки с задержкой */
    .teams-list .team-card:nth-child(1) .team-avatar-small { animation-delay: 0.4s; }
    .teams-list .team-card:nth-child(2) .team-avatar-small { animation-delay: 0.5s; }
    .teams-list .team-card:nth-child(3) .team-avatar-small { animation-delay: 0.6s; }
    .teams-list .team-card:nth-child(4) .team-avatar-small { animation-delay: 0.7s; }
    .teams-list .team-card:nth-child(5) .team-avatar-small { animation-delay: 0.8s; }
    .teams-list .team-card:nth-child(6) .team-avatar-small { animation-delay: 0.9s; }
    .teams-list .team-card:nth-child(7) .team-avatar-small { animation-delay: 1.0s; }
    .teams-list .team-card:nth-child(8) .team-avatar-small { animation-delay: 1.1s; }
    .teams-list .team-card:nth-child(9) .team-avatar-small { animation-delay: 1.2s; }
    .teams-list .team-card:nth-child(10) .team-avatar-small { animation-delay: 1.3s; }
    
    .team-avatar-small .team-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .team-card:hover .team-avatar-img {
        transform: scale(1.05);
    }
    
    .team-avatar-small .team-avatar-text {
        font-size: 20px;
        font-weight: 900;
        color: white;
        text-transform: uppercase;
    }
    
    /* НАЗВАНИЕ КОМАНДЫ - ОБНОВЛЕННОЕ */
    .team-name-rating {
        grid-column: 3;
        font-size: 18px !important;
        font-weight: 700;
        color: rgb(255, 255, 255);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 20px;
        display: flex;
        align-items: center;
        height: 100%;
        margin: 0;
        line-height: 1.2;
        letter-spacing: 0.1px;
        opacity: 0;
        animation: nameSlideIn 0.4s ease forwards;
    }
    
    @keyframes nameSlideIn {
        from {
            opacity: 0;
            transform: translateX(10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    /* Анимация названия с задержкой */
    .teams-list .team-card:nth-child(1) .team-name-rating { animation-delay: 0.5s; }
    .teams-list .team-card:nth-child(2) .team-name-rating { animation-delay: 0.6s; }
    .teams-list .team-card:nth-child(3) .team-name-rating { animation-delay: 0.7s; }
    .teams-list .team-card:nth-child(4) .team-name-rating { animation-delay: 0.8s; }
    .teams-list .team-card:nth-child(5) .team-name-rating { animation-delay: 0.9s; }
    .teams-list .team-card:nth-child(6) .team-name-rating { animation-delay: 1.0s; }
    .teams-list .team-card:nth-child(7) .team-name-rating { animation-delay: 1.1s; }
    .teams-list .team-card:nth-child(8) .team-name-rating { animation-delay: 1.2s; }
    .teams-list .team-card:nth-child(9) .team-name-rating { animation-delay: 1.3s; }
    .teams-list .team-card:nth-child(10) .team-name-rating { animation-delay: 1.4s; }
    
    /* СТАТИСТИКА - ОБНОВЛЕННАЯ */
    .team-stats {
        grid-column: 4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        height: 100%;
        padding: 14px 0;
        opacity: 0;
        animation: statsFadeIn 0.4s ease forwards;
    }
    
    @keyframes statsFadeIn {
        to {
            opacity: 1;
        }
    }
    
    /* Анимация статистики с задержкой */
    .teams-list .team-card:nth-child(1) .team-stats { animation-delay: 0.6s; }
    .teams-list .team-card:nth-child(2) .team-stats { animation-delay: 0.7s; }
    .teams-list .team-card:nth-child(3) .team-stats { animation-delay: 0.8s; }
    .teams-list .team-card:nth-child(4) .team-stats { animation-delay: 0.9s; }
    .teams-list .team-card:nth-child(5) .team-stats { animation-delay: 1.0s; }
    .teams-list .team-card:nth-child(6) .team-stats { animation-delay: 1.1s; }
    .teams-list .team-card:nth-child(7) .team-stats { animation-delay: 1.2s; }
    .teams-list .team-card:nth-child(8) .team-stats { animation-delay: 1.3s; }
    .teams-list .team-card:nth-child(9) .team-stats { animation-delay: 1.4s; }
    .teams-list .team-card:nth-child(10) .team-stats { animation-delay: 1.5s; }
    
    .team-stats .points {
        font-size: 17px !important;
        font-weight: 800;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        line-height: 1;
    }
    
    .team-stats .members {
        font-size: 14px !important;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
        white-space: nowrap;
        line-height: 1;
    }
    
    /* ИКОНКА АКТИВНОСТИ */
    .activity-icon-small {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain;
        display: block;
        filter: brightness(1.2);
        transition: transform 0.2s ease;
    }
    
    .team-card:hover .activity-icon-small {
        transform: scale(1.1);
    }
    
    /* ТОП-3 КОМАНДЫ - ОБНОВЛЕННЫЕ */
    .team-card.top-1 {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 195, 0, 0.05) 100%);
        border-left: 4px solid #FFD700;
        border-top: 1px solid rgba(255, 215, 0, 0.2);
        animation: slideInTeam 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards, 
                   goldPulse 3s ease-in-out infinite 1s;
    }
    
    @keyframes goldPulse {
        0%, 100% {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        }
        50% {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15),
                        0 0 20px rgba(255, 215, 0, 0.2);
        }
    }
    
    .team-card.top-2 {
        background: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.05) 100%);
        border-left: 4px solid #C0C0C0;
        border-top: 1px solid rgba(192, 192, 192, 0.2);
    }
    
    .team-card.top-3 {
        background: linear-gradient(135deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.05) 100%);
        border-left: 4px solid #CD7F32;
        border-top: 1px solid rgba(205, 127, 50, 0.2);
    }
    
    .team-card.top-1 .team-position {
        color: #FFD700;
        font-size: 28px !important;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }
    
    .team-card.top-1 .team-position::before {
        color: rgba(255, 215, 0, 0.7);
    }
    
    .team-card.top-2 .team-position {
        color: #C0C0C0;
        font-size: 26px !important;
        text-shadow: 0 0 8px rgba(192, 192, 192, 0.3);
    }
    
    .team-card.top-2 .team-position::before {
        color: rgba(192, 192, 192, 0.7);
    }
    
    .team-card.top-3 .team-position {
        color: #CD7F32;
        font-size: 26px !important;
        text-shadow: 0 0 8px rgba(205, 127, 50, 0.3);
    }
    
    .team-card.top-3 .team-position::before {
        color: rgba(205, 127, 50, 0.7);
    }
    
    /* КОМАНДА ПОЛЬЗОВАТЕЛЯ - ОБНОВЛЕННАЯ */
    .team-card.user-team {
        background: linear-gradient(135deg, rgba(74, 118, 168, 0.2) 0%, rgba(74, 118, 168, 0.05) 100%);
        border-left: 4px solid #4a76a8;
        border-top: 1px solid rgba(74, 118, 168, 0.3);
    }
    
    .team-card.user-team .team-position {
        color: #4a76a8;
        font-size: 26px !important;
        text-shadow: 0 0 8px rgba(74, 118, 168, 0.3);
    }
    
    .team-card.user-team .team-position::before {
        color: rgba(74, 118, 168, 0.7);
    }
    
    /* Специальные стили для аватарок топ-команд */
    .team-card.top-1 .team-avatar-small {
        border: 3px solid #FFD700;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    }
    
    .team-card.top-2 .team-avatar-small {
        border: 3px solid #C0C0C0;
        box-shadow: 0 0 12px rgba(192, 192, 192, 0.4);
    }
    
    .team-card.top-3 .team-avatar-small {
        border: 3px solid #CD7F32;
        box-shadow: 0 0 12px rgba(205, 127, 50, 0.4);
    }
    
    .team-card.user-team .team-avatar-small {
        border: 3px solid #4a76a8;
        box-shadow: 0 0 12px rgba(74, 118, 168, 0.4);
    }
    
    /* КНОПКА "ЕЩЕ" - ОБНОВЛЕННАЯ */
    .load-more-container {
        display: flex;
        justify-content: center;
        margin: 25px 0 40px 0;
        padding: 0 16px;
        opacity: 0;
        animation: fadeInUp 0.5s ease 1.5s forwards;
    }
    
    .load-more-teams, #hide-teams {
        background: linear-gradient(135deg, rgba(135, 116, 225, 0.2) 0%, rgba(135, 116, 225, 0.1) 100%);
        border: 1px solid rgba(135, 116, 225, 0.3);
        border-radius: 14px;
        color: #8774e1;
        padding: 14px 32px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        min-width: 140px;
        text-align: center;
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
    }
    
    .load-more-teams:hover, #hide-teams:hover {
        background: linear-gradient(135deg, rgba(135, 116, 225, 0.3) 0%, rgba(135, 116, 225, 0.2) 100%);
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 8px 25px rgba(135, 116, 225, 0.3);
    }
    
    .load-more-teams:active, #hide-teams:active {
        transform: translateY(0) scale(0.98);
    }
    
    /* Пустое состояние */
    .empty-teams {
        text-align: center;
        padding: 60px 20px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 16px;
        font-weight: 600;
        opacity: 0;
        animation: fadeIn 0.5s ease 0.3s forwards;
    }
    
    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    }
    
    /* АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ */
    @media (max-width: 480px) {
        .rating-content {
            padding: 0 12px;
        }
        
        .user-team-badge {
            width: 160px;
            height: 40px;
            padding: 0 16px;
            margin: 10px 0 18px auto;
        }
        
        .badge-text {
            font-size: 14px;
        }
        
        .badge-position {
            font-size: 15px;
            padding: 2px 6px;
            min-width: 32px;
        }
        
        .team-card {
            grid-template-columns: 50px 44px 1fr auto;
            height: 66px;
            padding: 0 14px;
            border-radius: 14px;
            transform: translateX(-30px);
        }
        
        @keyframes slideInTeamMobile {
            0% {
                opacity: 0;
                transform: translateX(-30px) scale(0.95);
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            }
            70% {
                opacity: 0.8;
                transform: translateX(3px) scale(1.02);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
            }
            100% {
                opacity: 1;
                transform: translateX(0) scale(1);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            }
        }
        
        .team-card {
            animation-name: slideInTeamMobile;
        }
        
        /* Меньшие задержки на мобильных */
        .teams-list .team-card:nth-child(1) { animation-delay: 0.05s; }
        .teams-list .team-card:nth-child(2) { animation-delay: 0.1s; }
        .teams-list .team-card:nth-child(3) { animation-delay: 0.15s; }
        .teams-list .team-card:nth-child(4) { animation-delay: 0.2s; }
        .teams-list .team-card:nth-child(5) { animation-delay: 0.25s; }
        .teams-list .team-card:nth-child(6) { animation-delay: 0.3s; }
        .teams-list .team-card:nth-child(7) { animation-delay: 0.35s; }
        .teams-list .team-card:nth-child(8) { animation-delay: 0.4s; }
        .teams-list .team-card:nth-child(9) { animation-delay: 0.45s; }
        .teams-list .team-card:nth-child(10) { animation-delay: 0.5s; }
        
        .team-position {
            font-size: 22px !important;
        }
        
        .team-position::before {
            font-size: 16px !important;
        }
        
        .team-avatar-small {
            width: 40px;
            height: 40px;
        }
        
        .team-avatar-small .team-avatar-text {
            font-size: 18px;
        }
        
        .team-name-rating {
            font-size: 16px !important;
            padding: 0 14px;
        }
        
        .team-stats {
            gap: 5px;
            padding: 12px 0;
        }
        
        .team-stats .points {
            font-size: 15px !important;
        }
        
        .team-stats .members {
            font-size: 13px !important;
        }
        
        .activity-icon-small {
            width: 18px !important;
            height: 18px !important;
        }
        
        .team-card.top-1 .team-position {
            font-size: 24px !important;
        }
        
        .team-card.top-2 .team-position,
        .team-card.top-3 .team-position,
        .team-card.user-team .team-position {
            font-size: 22px !important;
        }
        
        .load-more-container {
            animation-delay: 0.8s;
        }
        
        .load-more-teams, #hide-teams {
            padding: 12px 28px;
            font-size: 15px;
            min-width: 120px;
        }
    }
    
    /* Улучшенные стили для звездного фона */
    .particles-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        filter: contrast(1.2) brightness(1.1);
    }
    
    /* Улучшаем производительность */
    .stars-background {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000;
    }
    
    /* Для мобильных устройств - уменьшаем количество частиц */
    @media (max-width: 768px) {
        .particles-canvas {
            filter: contrast(1.1) brightness(1.05);
        }
    }
    
    /* Стили для canvas конфетти */
    #confetti-canvas {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      pointer-events: none !important;
      z-index: 10000 !important;
      display: none;
    }
    
    /* === СТРАНИЦА КОМАНДЫ === */
    .team-page {
      padding: 15px;
      animation: fadeIn 0.3s ease;
    }
    
    /* Верхний блок */
    .team-header-main {
      display: flex;
      align-items: flex-start; /* Меняем на flex-start */
      justify-content: space-between;
      margin-bottom: 25px;
      gap: 20px;
    }
    
    /* Левая часть - аватар */
    .team-header-left {
      flex-shrink: 0;
    }
    
    .team-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4a76a8 0%, #6b5bbd 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid rgba(255, 255, 255, 0.1);
    }
    
    .team-avatar-text {
      font-size: 28px;
      font-weight: 700;
      color: #ffffff;
    }
    
    /* Центральная часть - название и код */
    .team-header-center {
      flex: 1;
      min-width: 0;
      text-align: left;
      padding-left: 10px;
      padding-top: 8px; /* Добавляем отступ сверху */
    }
    
    .team-name {
      font-size: 28px;
      font-weight: 700;
      color: #ffffff;
      margin: 0 0 8px 0;
      line-height: 1.2;
      word-wrap: break-word;
      text-align: left;
    }
    
    .team-code {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 600;
      letter-spacing: 0.5px;
      text-align: left;
    }
    
    /* Правая часть - настройки */
    .team-header-right {
      flex-shrink: 0;
      padding-top: 8px; /* Тоже добавляем отступ для выравнивания */
    }
    
    .team-settings-btn {
      background: rgba(255, 255, 255, 0);
      border: none;
      border-radius: 12px;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .team-settings-btn:hover {
      background: rgba(255, 255, 255, 0);
      transform: scale(1.05);
    }
    
    .team-settings-icon {
      width: 22px;
      height: 22px;
      object-fit: contain;
      filter: brightness(0.9);
    }
    
    /* Описание команды */
    .team-description {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.9);
      text-align: center;
      border-left: 3px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Статистика команды */
    .team-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 10px;
      margin-bottom: 25px;
    }
    
    .stat-item {
      background: rgba(255, 255, 255, 0.03);
      border-radius: 12px;
      padding: 15px 8px;
      text-align: center;
      transition: all 0.3s ease;
    }
    
    .stat-item:hover {
      background: rgba(255, 255, 255, 0.05);
      transform: translateY(-2px);
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }
    
    .chat-btn {
      background: rgba(74, 118, 168, 0.2);
      border: none;
      border-radius: 8px;
      padding: 8px 12px;
      color: #4a76a8;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
    }
    
    .chat-btn:hover {
      background: rgba(74, 118, 168, 0.3);
      transform: scale(1.05);
    }
    
    .chat-icon {
      width: 14px;
      height: 14px;
      object-fit: contain;
    }
    
    .activity-icon-small {
      width: 14px;
      height: 14px;
      object-fit: contain;
    }
    
    /* Блок участников */
    .members-section {
      margin-top: 10px;
    }
    
    .members-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      gap: 15px;
    }
    
    .members-title {
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      flex-shrink: 0;
    }
    
    .members-controls {
      display: flex;
      gap: 10px;
      flex: 1;
      justify-content: flex-end;
    }
    
    .search-container {
      flex: 1;
      max-width: 150px;
    }
    
    .members-search {
      width: 100%;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.05);
      border: none;
      border-radius: 8px;
      color: #ffffff;
      font-size: 13px;
    }
    
    .members-search::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
    
    .sort-dropdown {
      flex-shrink: 0;
    }
    
    .sort-select {
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.05);
      border: none;
      border-radius: 8px;
      color: #ffffff;
      font-size: 13px;
      cursor: pointer;
    }
    
    .sort-select option {
      background: #2d2d2d;
      color: #ffffff;
    }
    
    /* Список участников */
    .members-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    
    .member-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 12px;
      transition: all 0.3s ease;
      border-left: 3px solid transparent;
    }
    
    .member-card:hover {
      background: rgba(255, 255, 255, 0.05);
      transform: translateX(4px);
    }
    
    .member-card.current-user {
      border-left-color: #4a76a8;
      background: rgba(74, 118, 168, 0.1);
    }
    
    .member-card.owner {
      border-left-color: #ffd700;
    }
    
    .member-info {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 1;
      min-width: 0;
    }
    
    .member-avatar {
      position: relative;
      flex-shrink: 0;
    }
    
    .avatar-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.1);
    }
    
    .avatar-fallback {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6b5bbd 0%, #8774e1 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      border: 2px solid rgba(255, 255, 255, 0.1);
    }
    
    .member-details {
      flex: 1;
      min-width: 0;
    }
    
    .member-name {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .member-rank {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500;
    }
    
    .member-points {
        font-size: 15px;
        font-weight: 700;
        color: #ffffff;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-direction: row; /* Важно: горизонтальное направление */
    }
    
    .member-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .member-menu-btn {
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }
    
    .member-menu-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.8);
    }
    
    .menu-dots {
      font-size: 16px;
      letter-spacing: 1px;
    }
    
    /* Кнопка выхода из команды */
    .team-actions {
      margin-top: 20px;
      text-align: center;
    }
    
    /* Адаптация для мобильных */
    @media (max-width: 480px) {
      .team-page {
        padding: 12px;
      }
      
      .team-header-main {
        gap: 15px;
      }
      
      .team-avatar {
        width: 60px;
        height: 60px;
      }
      
      .team-avatar-text {
        font-size: 24px;
      }
      
      .team-name {
        font-size: 24px;
      }
      
      .team-code {
        font-size: 13px;
      }
      
      .team-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }
      
      .stat-item {
        padding: 12px 6px;
      }
      
      .stat-value {
        font-size: 16px;
      }
      
      .members-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      
      .members-controls {
        justify-content: stretch;
      }
      
      .search-container {
        max-width: none;
      }
      
      .member-card {
        padding: 10px 12px;
      }
      
      .member-info {
        gap: 10px;
      }
      
      .avatar-img,
      .avatar-fallback {
        width: 36px;
        height: 36px;
      }
      
      .member-name {
        font-size: 15px;
      }
    }
    
    /* Анимации */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* Контекстное меню участника */
    .member-context-menu {
        position: fixed;
        background: rgba(35, 35, 35, 0.95);
        backdrop-filter: blur(20px);
        border-radius: 12px;
        padding: 8px;
        min-width: 180px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        display: none;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .menu-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s ease;
        width: 100%;
        text-align: left;
    }
    
    .menu-item:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    
    .menu-icon {
        width: 16px;
        height: 16px;
        object-fit: contain;
        opacity: 0.7;
    }
    
    .menu-item:hover .menu-icon {
        opacity: 1;
    }
    
    .member-points .activity-icon-small {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }
    
    /* ===== ФИКСИРОВАННЫЕ ЦВЕТА ===== */
    :root {
      /* Переопределяем цветовые переменные на фиксированные значения */
      --tg-theme-text-color: #ffffff !important;
      --tg-theme-button-text-color: #000000 !important;
      --tg-theme-link-color: #ffffff !important;
      --tg-theme-accent-text-color: #ffffff !important;
      --tg-theme-hint-color: #708599 !important;
    }
    
    /* ===== ПРИНУДИТЕЛЬНО УСТАНАВЛИВАЕМ БЕЛЫЙ ЦВЕТ ДЛЯ ВСЕХ ТЕКСТОВЫХ ЭЛЕМЕНТОВ ===== */
    
    /* Основной текст */
    body {
      color: #ffffff !important;
    }
    
    /* Заголовки */
    h1, h2, h3, h4, h5, h6 {
      color: #ffffff !important;
    }
    
    /* Username */
    #username {
      color: #ffffff !important;
    }
    
    /* Баллы активности и DAEX */
    .activity-points,
    .daex-coins {
      color: #ffffff !important;
    }
    
    /* Текст в карточках */
    .card {
      color: #ffffff !important;
    }
    
    /* Текст в модалках */
    .modal-content {
      color: #ffffff !important;
    }
    
    .modal-header h2 {
      color: #ffffff !important;
    }
    
    /* Текст в формах */
    .modal-form input {
      color: #ffffff !important;
    }
    
    /* Кнопки вторичные */
    .btn-secondary {
      color: #ffffff !important;
    }
    
    /* Текст в секции команды */
    .team-section,
    .team-header h2,
    .info-item .value {
      color: #ffffff !important;
    }
    
    /* Текст участников команды */
    .team-member,
    .member-name {
      color: #ffffff !important;
    }
    
    /* Текст в рейтинге */
    .team-name-rating,
    .team-position,
    .team-stats .points,
    .team-stats .members {
      color: #ffffff !important;
    }
    
    /* Текст в заданиях */
    .quest-title,
    .quest-description,
    .reward-points,
    .reward-daex {
      color: #ffffff !important;
    }
    
    /* Текст в профиле */
    .balance-amount,
    .stat-value,
    .stat-label,
    .action-btn {
      color: #ffffff !important;
    }
    
    /* Текст в реферальной секции */
    .referrals-content,
    .stat-item {
      color: #ffffff !important;
    }
    
    /* Текст в полях ввода */
    #ref-link {
      color: #ffffff !important;
    }
    
    /* Текст в выпадающих меню */
    .wallet-menu-item {
      color: #ffffff !important;
    }
    
    /* Текст в уведомлениях */
    .notification-text {
      color: #000000 !important; /* Для уведомлений оставляем черный для контраста */
    }
    
    /* ===== ОСОБЫЕ СЛУЧАИ ===== */
    
    /* Для полупрозрачного текста используем белый с opacity */
    .info-item .label,
    .team-code,
    .stat-label {
      color: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* Для placeholder в input */
    .modal-form input::placeholder,
    .members-search::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* Для disabled элементов */
    .quest-action-btn:disabled {
      color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* ===== ОТКЛЮЧАЕМ АНИМАЦИИ TELEGRAM WEBAPP ===== */
    
    /* Отключаем стандартные анимации переходов Telegram */
    .opacity-transition,
    .Transition_slide,
    .Transition_slide-active,
    .left-column-shown,
    .left-column-open,
    .right-column-not-shown,
    .right-column-not-open {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Отключаем конкретные классы которые ты нашел */
    .jEAibDyh,
    .Ig_tIR71,
    .Mr163uML,
    .row {
        animation: none !important;
        transition: none !important;
    }
    
    /* Отключаем все transition для основных контейнеров */
    div[class*="transition"],
    div[class*="Transition"] {
        animation: none !important;
        transition: none !important;
    }
    
    /* Принудительно устанавливаем нормальное состояние */
    .left-column-shown.left-column-open {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }
    
    /* ===== ФИКС: Убираем голубой флеш при переходе на вкладку команд ===== */
    body {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* Модалка кастомизации команды */
    .team-customization-modal {
        max-width: 400px;
        background: #212121;
        color: #ffffff;
        border-radius: 12px;
        padding: 24px;
    }
    
    .team-customization-header {
        text-align: center;
        margin-bottom: 32px;
    }
    
    .team-customization-header h2 {
        margin: 12px 0 0 0;
        font-size: 20px;
        font-weight: 600;
    }
    
    .team-customization-icon {
        font-size: 32px;
    }
    
    .settings-section {
        margin-bottom: 32px;
    }
    
    .section-title {
        font-size: 14px;
        color: #708599;
        margin: 0 0 16px 0;
        font-weight: 500;
    }
    
    .danger-title {
        color: #ff6b6b;
    }
    
    .customization-btn {
        width: 100%;
        background: #ffffff;
        color: #212121;
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: left;
    }
    
    .customization-btn:hover {
        background: #f0f0f0;
        transform: translateY(-1px);
    }
    
    .customization-btn:active {
        transform: translateY(0);
    }
    
    .danger-btn {
        background: #ff6b6b;
        color: #ffffff;
    }
    
    .danger-btn:hover {
        background: #ff5252;
    }
    
    /* Модалка управления званиями */
    .ranks-management-modal {
        max-width: 420px;
        background: #212121;
        color: #ffffff;
        border-radius: 12px;
        padding: 24px;
    }
    
    .ranks-management-header {
        text-align: center;
        margin-bottom: 24px;
    }
    
    .ranks-management-header h2 {
        margin: 12px 0 0 0;
        font-size: 20px;
        font-weight: 600;
    }
    
    .ranks-management-icon {
        font-size: 32px;
    }
    
    .ranks-section {
        margin-bottom: 24px;
    }
    
    .rank-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .rank-label {
        font-weight: 500;
        min-width: 100px;
        color: #E0E0E0;
    }
    
    .rank-input-container {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        max-width: 250px;
    }
    
    .rank-input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.3);
        color: white;
        font-size: 14px;
        transition: all 0.2s ease;
    }
    
    .rank-input:focus {
        outline: none;
        border-color: #8774e1;
        background: rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 0 2px rgba(135, 116, 225, 0.2);
    }
    
    .rank-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }
    
    .custom-ranks-list {
        background: #212121;
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 16px;
        min-height: 60px;
    }
    
    .empty-ranks-message {
        color: #708599;
        font-size: 14px;
        text-align: center;
        font-style: italic;
    }
    
    .add-rank-btn {
        text-align: center !important;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    
    .add-rank-btn:hover {
        background: rgba(255, 255, 255, 0.15);
    }
    
    .rank-reset-btn {
        padding: 6px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .rank-reset-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    .reset-icon {
        width: 16px;
        height: 16px;
        filter: invert(0.8);
    }
    
    .ranks-actions {
        display: flex;
        gap: 12px;
        margin-top: 20px;
        justify-content: center;
    }
    
    .ranks-actions .customization-btn {
        flex: 1;
        text-align: center;
    }
    
    .rank-input.changed {
        border-color: #8774e1;
        background: rgba(135, 116, 225, 0.1);
    }
    
    .save-btn {
        background: #4CAF50;
        color: #ffffff;
    }
    
    .save-btn:hover {
        background: #45a049;
    }
    
    .cancel-btn {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
    
    .cancel-btn:hover {
        background: rgba(255, 255, 255, 0.15);
    }
    
    /* Адаптивность */
    @media (max-width: 480px) {
        .team-customization-modal,
        .ranks-management-modal {
            margin: 20px;
            padding: 20px;
        }
        
        .rank-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        
        .rank-label {
            min-width: auto;
        }
        
        .ranks-actions {
            flex-direction: column;
        }
    }
    
    /* Стили для коронки владельца без бейджа */
    .member-avatar.owner-avatar {
        position: relative;
    }
    
    .crown-icon {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 19px;
        height: 19px;
        filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
        z-index: 2;
    }
    
    /* Дополнительные стили для выделения владельца */
    .member-card.owner {
        border-left: 3px solid gold;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
    }
    
    .member-card.owner .member-name {
        font-weight: 600;
        color: #FFD700;
    }
    
    /* Стили для вкладок управления званиями */
    .ranks-tabs {
        display: flex;
        background: #212121;
        padding: 4px;
        margin-bottom: 20px;
    }
    
    .rank-tab {
        flex: 1;
        padding: 12px 16px;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
    }
    
    .rank-tab.active {
        background: rgba(135, 116, 225, 0.2);
        color: #8774e1;
        box-shadow: 0 2px 8px rgba(135, 116, 225, 0.3);
    }
    
    .rank-tab:hover:not(.active) {
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.9);
    }
    
    .ranks-section {
        display: none;
    }
    
    .ranks-section.active {
        display: block;
    }
    
    /* Стили для секции кастомных званий */
    .custom-ranks-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .limit-info {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
    }
    
    .limit-count {
        color: #8774e1;
        font-weight: 600;
    }
    
    .custom-rank-form {
        background: #212121;
        padding: 20px;
        margin-bottom: 25px;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        display: block;
        margin-bottom: 8px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        font-weight: 500;
    }
    
    .rank-name-input {
        width: 100%;
        padding: 12px 16px;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: white;
        font-size: 14px;
        transition: all 0.3s ease;
    }
    
    .rank-name-input:focus {
        outline: none;
        border-color: #8774e1;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .char-counter {
        text-align: right;
        margin-top: 5px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
    }
    
    .char-count {
        color: #8774e1;
        font-weight: 600;
    }
    
    /* Стили для выбора цвета */
    .color-picker {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .color-presets {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .color-option {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.3s ease;
    }
    
    .color-option:hover {
        transform: scale(1.1);
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    .color-option.active {
        border-color: #8774e1;
        box-shadow: 0 0 0 2px #8774e1;
    }
    
    .selected-color {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .selected-color-preview {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }
    
    .selected-color-text {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        font-family: monospace;
    }
    
    /* Стоимость создания */
    .creation-cost {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: rgba(135, 116, 225, 0.1);
        border-radius: 8px;
    }
    
    .cost-label {
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
        font-weight: 500;
    }
    
    .cost-amount {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #FFD700;
        font-weight: 600;
        font-size: 16px;
    }
    
    .ton-cost-icon {
        width: 20px;
        height: 20px;
    }
    
    /* Кнопки создания */
    .custom-ranks-actions {
        display: flex;
        gap: 12px;
        margin-top: 20px;
    }
    
    .create-rank-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: linear-gradient(135deg, #8774e1, #6b5bb9);
        border: none;
        padding: 14px 20px;
        border-radius: 10px;
        color: white;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .create-rank-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(135, 116, 225, 0.4);
    }
    
    .create-rank-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }
    
    .btn-ton-icon {
        width: 18px;
        height: 18px;
    }
    
    /* Список существующих кастомных званий */
    .existing-custom-ranks {
        margin-top: 25px;
    }
    
    .existing-ranks-title {
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .custom-ranks-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .empty-custom-ranks {
        text-align: center;
        padding: 40px 20px;
        color: rgba(255, 255, 255, 0.5);
    }
    
    .empty-icon {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.5;
    }
    
    .empty-custom-ranks p {
        margin-bottom: 8px;
        font-size: 16px;
    }
    
    .empty-custom-ranks small {
        font-size: 14px;
    }
    
    /* Адаптивность */
    @media (max-width: 768px) {
        .ranks-tabs {
            flex-direction: column;
        }
        
        .color-presets {
            grid-template-columns: repeat(4, 1fr);
        }
        
        .custom-ranks-actions {
            flex-direction: column;
        }
        
        .creation-cost {
            flex-direction: column;
            gap: 10px;
            text-align: center;
        }
    }
    
    /* Стили для списка кастомных званий */
    .custom-rank-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 8px;
    }
    
    .custom-rank-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    
    .custom-rank-name {
        font-weight: 600;
        font-size: 14px;
    }
    
    .custom-rank-meta {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
    }
    
    .delete-custom-rank-btn {
        background: rgba(255, 107, 107, 0.1);
        border: 1px solid rgba(255, 107, 107, 0.3);
        border-radius: 6px;
        padding: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .delete-custom-rank-btn:hover {
        background: rgba(255, 107, 107, 0.2);
        transform: scale(1.05);
    }
    
    .delete-icon {
        width: 16px;
        height: 16px;
    }
    
    /* Стили для модалки выдачи званий */
    .promote-member-modal {
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .promote-member-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .promote-member-icon {
        font-size: 24px;
    }
    
    .member-info-section {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 20px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .member-info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
    
    .info-label {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
    }
    
    .info-value {
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
    }
    
    .member-stats {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .stat-item {
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
    }
    
    .stat-divider {
        color: rgba(255, 255, 255, 0.4);
    }
    
    /* Стили для секций званий */
    .ranks-section {
        margin-bottom: 20px;
    }
    
    .system-ranks-section,
    .custom-ranks-section {
        display: block !important; /* 🔥 ВАЖНО: принудительно показываем секции */
    }
    
    .section-title {
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 12px;
    }
    
    /* Системные звания */
    .system-ranks-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .system-rank-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .system-rank-item.current {
        background: rgba(135, 116, 225, 0.1);
        border-color: rgba(135, 116, 225, 0.3);
    }
    
    .rank-requirements {
        display: flex;
        gap: 8px;
    }
    
    .requirement {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
    }
    
    /* Кастомные звания */
    .custom-ranks-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .custom-rank-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .custom-rank-option:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .custom-rank-option.selected {
        background: rgba(135, 116, 225, 0.1);
        border-color: #8774e1;
    }
    
    .rank-name {
        font-weight: 600;
        font-size: 14px;
    }
    
    .rank-checkbox {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: white;
        transition: all 0.3s ease;
    }
    
    .custom-rank-option.selected .rank-checkbox {
        background: #8774e1;
        border-color: #8774e1;
    }
    
    .no-custom-ranks {
        text-align: center;
        padding: 30px 20px;
        color: rgba(255, 255, 255, 0.5);
    }
    
    .no-custom-ranks .empty-icon {
        font-size: 48px;
        margin-bottom: 12px;
        opacity: 0.5;
    }
    
    /* Кнопки действий */
    .promote-actions {
        display: flex;
        gap: 12px;
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .action-btn {
        flex: 1;
        padding: 12px 16px;
        border: none;
        border-radius: 8px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .remove-rank-btn {
        background: rgba(255, 107, 107, 0.1);
        color: #ff6b6b;
        border: 1px solid rgba(255, 107, 107, 0.3);
    }
    
    .remove-rank-btn:hover {
        background: rgba(255, 107, 107, 0.2);
    }
    
    .save-btn {
        background: #8774e1;
        color: white;
    }
    
    .save-btn:hover:not(:disabled) {
        background: #6b5bb9;
    }
    
    .save-btn:disabled {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.3);
        cursor: not-allowed;
    }
    
    .cancel-btn {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .cancel-btn:hover {
        background: rgba(255, 255, 255, 0.15);
    }
    
    /* Адаптивность */
    @media (max-width: 768px) {
        .promote-member-modal {
            max-width: 95%;
            margin: 10px;
        }
        
        .promote-actions {
            flex-direction: column;
        }
        
        .member-info-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }
        
        .system-rank-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        
        .rank-requirements {
            align-self: flex-end;
        }
    }
    
    /* Стили для модалок удаления команды */
    .delete-team-modal .modal-content,
    .final-confirm-modal .modal-content {
        max-width: 500px;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border: 1px solid #ff6b6b;
        border-radius: 12px;
    }
    
    .delete-team-header,
    .final-confirm-header {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .delete-team-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .delete-team-warning {
        background: rgba(255, 107, 107, 0.1);
        border: 1px solid #ff6b6b;
        border-radius: 8px;
        padding: 15px;
        margin: 20px 0;
    }
    
    .warning-list {
        margin-top: 10px;
    }
    
    .warning-item {
        color: #ff6b6b;
        margin: 5px 0;
        font-size: 14px;
    }
    
    .team-name-highlight {
        color: #ffd700;
        font-weight: bold;
    }
    
    .delete-team-actions,
    .final-confirm-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 20px;
    }
    
    .final-confirm-body {
        text-align: center;
    }
    
    .team-name-input {
        width: 100%;
        padding: 12px;
        margin: 15px 0;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 6px;
        color: white;
        font-size: 16px;
        text-align: center;
    }
    
    .team-name-input.error {
        border-color: #ff6b6b;
        background: rgba(255, 107, 107, 0.1);
    }
    
    .team-name-hint {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
    }
    
    .btn-danger {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 6px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-danger:hover:not(:disabled) {
        background: linear-gradient(135deg, #ff5252 0%, #e53935 100%);
        transform: translateY(-2px);
    }
    
    .btn-danger:disabled {
        background: #666;
        cursor: not-allowed;
        transform: none;
    }
    
    .danger-btn {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        border: 1px solid #ff6b6b;
    }
    
    .danger-btn:hover {
        background: linear-gradient(135deg, #ff5252 0%, #e53935 100%);
    }
    
    .danger-title {
        color: #ff6b6b;
    }
    
    /* Стили для модалки покупки слотов */
    .buy-slots-modal {
        max-width: 400px;
    }
    
    .buy-slots-header {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .buy-slots-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .slots-info {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .slots-stat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }
    
    .slots-stat:last-child {
        margin-bottom: 0;
    }
    
    .stat-label {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
    }
    
    .stat-value {
        color: #8774e1;
        font-weight: 600;
        font-size: 14px;
    }
    
    .expand-action {
        text-align: center;
    }
    
    .expand-team-btn {
        background: linear-gradient(135deg, #8774e1, #6b5bb9);
        border: none;
        border-radius: 12px;
        color: white;
        padding: 15px 30px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }
    
    .expand-team-btn:hover {
        background: linear-gradient(135deg, #6b5bb9, #5a4a9c);
        transform: translateY(-2px);
    }
    
    /* Стили для модалки выбора слотов */
    /* Стили для модалки выбора слотов */
    .select-slots-modal {
        max-width: 450px;
    }
    
    .select-slots-header {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .select-slots-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    /* 🔥 КНОПКИ БЕЗ ОБВОДКИ, НО С ФОНОМ */
    .customization-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        width: 100%;
        text-align: left;
        background: rgba(255, 255, 255, 0.1);
        border: none; /* 🔥 УБИРАЕМ ОБВОДКУ */
        border-radius: 10px;
        color: white;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 10px;
        line-height: 1.4;
    }
    
    .customization-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }
    
    .customization-btn .btn-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    
    /* Стили для модалки выбора слотов */
    .select-slots-modal {
        max-width: 450px;
    }
    
    .select-slots-header {
        text-align: center;
        margin-bottom: 30px;
    }
    
    .select-slots-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    /* 🔥 ОБНОВЛЕННЫЕ СТИЛИ ДЛЯ ОТОБРАЖЕНИЯ СТОИМОСТИ С ФИКСИРОВАННОЙ ШИРИНОЙ */
    .cost-display {
        text-align: center;
        margin-bottom: 30px;
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 12px;
        flex-wrap: nowrap; /* 🔥 УБИРАЕМ ПЕРЕНОС НА НОВУЮ СТРОКУ */
        min-height: 60px; /* 🔥 ФИКСИРОВАННАЯ ВЫСОТА ДЛЯ ПРЕДОТВРАЩЕНИЯ ДЕРГАНИЯ */
    }
    
    .regular-price {
        color: rgba(255, 255, 255, 0.6);
        font-size: 20px;
        white-space: nowrap; /* 🔥 ЗАПРЕЩАЕМ ПЕРЕНОС */
    }
    
    .cost-amount-large {
        font-size: 48px;
        font-weight: 700;
        color: #8774e1;
        line-height: 1;
        transition: all 0.3s ease;
        min-width: 120px; /* 🔥 ФИКСИРОВАННАЯ ШИРИНА ДЛЯ ЦИФР */
        text-align: center;
        display: inline-block;
    }
    
    /* 🔥 УКРАШЕНИЯ ПРИ СКИДКЕ */
    .cost-amount-large.discount {
        color: #10b981;
        text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    }
    
    .cost-currency {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 600;
        white-space: nowrap; /* 🔥 ЗАПРЕЩАЕМ ПЕРЕНОС */
    }
    
    .discount-badge {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap; /* 🔥 ЗАПРЕЩАЕМ ПЕРЕНОС */
        flex-shrink: 0; /* 🔥 ЗАПРЕЩАЕМ СЖИМАТЬСЯ */
    }
    
    .slots-selector {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 30px;
    }
    
    .slots-range {
        margin-bottom: 20px;
    }
    
    .slots-range-input {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.2);
        outline: none;
    }
    
    .slots-range-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #8774e1;
        cursor: pointer;
        border: 3px solid white;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    
    .slots-range-input::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #8774e1;
        cursor: pointer;
        border: 3px solid white;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    
    .range-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
    }
    
    .selected-slots {
        text-align: center;
    }
    
    .slots-count {
        font-size: 32px;
        font-weight: 700;
        color: #8774e1;
    }
    
    .slots-label {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
        margin-left: 5px;
    }
    
    .slots-actions {
        display: flex;
        gap: 12px;
    }
    
    .slots-actions .action-btn {
        flex: 1;
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .buy-btn {
        background: linear-gradient(135deg, #8774e1, #6b5bb9);
        color: white;
    }
    
    .buy-btn:hover {
        background: linear-gradient(135deg, #6b5bb9, #5a4a9c);
    }
    
    .cancel-btn {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
    }
    
    .cancel-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    .btn-icon {
        width: 16px;
        height: 16px;
    }
    
    .btn-ton-icon {
        width: 16px;
        height: 16px;
    }
    
    /* 🔥 СТИЛИ ДЛЯ КНОПКИ С ИНДИКАТОРОМ ЗАГРУЗКИ */
    .buy-btn {
        background: linear-gradient(135deg, #8774e1, #6b5bb9);
        color: white;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .buy-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }
    
    .buy-btn.loading .btn-text {
        visibility: hidden;
    }
    
    .buy-btn.loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border: 2px solid transparent;
        border-top: 2px solid white;
        border-radius: 50%;
        animation: buy-spin 1s linear infinite; /* 🔥 ИЗМЕНИЛ НАЗВАНИЕ АНИМАЦИИ */
    }
    
    @keyframes buy-spin { /* 🔥 ИЗМЕНИЛ НАЗВАНИЕ АНИМАЦИИ */
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    /* 🔥 БОЛЕЕ СПЕЦИФИЧНЫЕ СЕЛЕКТОРЫ ДЛЯ СУЩЕСТВУЮЩИХ КНОПОК */
    
    /* Кнопка создания кастомного звания */
    #create-custom-rank-btn {
        background: linear-gradient(135deg, #8774e1, #6b5bb9) !important;
        color: white !important;
        border: none !important;
    }
    
    #create-custom-rank-btn:hover {
        background: linear-gradient(135deg, #6b5bb9, #5a4a9c) !important;
    }
    
    /* Кнопка сохранения званий */
    #save-ranks-btn {
        background: linear-gradient(135deg, #8774e1, #6b5bb9) !important;
        color: white !important;
        border: none !important;
    }
    
    #save-ranks-btn:hover {
        background: linear-gradient(135deg, #6b5bb9, #5a4a9c) !important;
    }
    
    /* Кнопки в модалке управления званиями */
    .ranks-management-modal .customization-btn.save-btn,
    .ranks-management-modal .customization-btn.create-rank-btn {
        background: linear-gradient(135deg, #8774e1, #6b5bb9) !important;
        color: white !important;
        border: none !important;
    }
    
    .ranks-management-modal .customization-btn.save-btn:hover,
    .ranks-management-modal .customization-btn.create-rank-btn:hover {
        background: linear-gradient(135deg, #6b5bb9, #5a4a9c) !important;
    }
    
    
    
    /* 🔥 ФИКС ДЛЯ КНОПКИ "КУПИТЬ" - БОЛЕЕ СПЕЦИФИЧНЫЕ СЕЛЕКТОРЫ */
    
    /* Основной стиль для кнопки покупки */
    .slots-actions .action-btn.buy-btn {
        background: linear-gradient(135deg, #8774e1, #6b5bb9) !important;
        color: white !important;
        border: none !important;
    }
    
    .slots-actions .action-btn.buy-btn:hover {
        background: linear-gradient(135deg, #6b5bb9, #5a4a9c) !important;
        color: white !important;
    }
    
    .slots-actions .action-btn.buy-btn:disabled {
        background: linear-gradient(135deg, #6b5bb9, #5a4a9c) !important;
        opacity: 0.7;
        cursor: not-allowed;
    }
    
    /* Индикатор загрузки */
    .slots-actions .action-btn.buy-btn.loading .btn-text {
        visibility: hidden;
    }
    
    /* Стили для статуса команды */
    .team-status {
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 12px;
        margin: 5px 0;
        display: inline-block;
    }
    
    .team-status.full {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }
    
    .team-status.free {
        background: rgba(34, 197, 94, 0.2);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.3);
    }
    
    /* Стили для кнопки покупки слота */
    .buy-slot-btn {
        background: linear-gradient(135deg, #f59e0b, #d97706) !important;
        border: 1px solid #f59e0b !important;
    }
    
    .buy-slot-btn:hover {
        background: linear-gradient(135deg, #d97706, #b45309) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }
    
    /* Иконка щита в карточке участника */
    .shield-icon {
        width: 16px;
        height: 16px;
        margin-left: 5px;
        vertical-align: middle;
        filter: brightness(0) saturate(100%) invert(66%) sepia(98%) saturate(402%) hue-rotate(358deg) brightness(101%) contrast(96%);
    }
    
    /* Стили для модалки покупки слота */
    .buy-slot-join-modal {
        max-width: 400px;
        background: linear-gradient(135deg, #1e293b, #334155);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .buy-slot-header {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .buy-slot-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .team-info-section {
        text-align: center;
        margin-bottom: 20px;
        padding: 15px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 12px;
    }
    
    .team-name-large {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 5px;
    }
    
    .team-status-full {
        color: #ef4444;
        font-size: 14px;
    }
    
    .purchase-offer {
        margin-bottom: 25px;
    }
    
    .purchase-offer h3 {
        text-align: center;
        margin-bottom: 15px;
        color: #fff;
    }
    
    .guarantees-list {
        margin-bottom: 20px;
    }
    
    .guarantee-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }
    
    .guarantee-icon {
        margin-right: 10px;
        font-size: 16px;
    }
    
    .guarantee-text {
        color: #e2e8f0;
        font-size: 14px;
    }
    
    .cost-info {
        text-align: center;
        padding: 15px;
        background: rgba(245, 158, 11, 0.1);
        border-radius: 12px;
        border: 1px solid rgba(245, 158, 11, 0.3);
    }
    
    .cost-amount {
        font-size: 24px;
        font-weight: 700;
        color: #f59e0b;
        margin-bottom: 5px;
    }
    
    .cost-note {
        font-size: 12px;
        color: #cbd5e1;
    }
    
    .buy-slot-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .buy-slot-actions .buy-btn {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        border: 1px solid #f59e0b;
    }
    
    .buy-slot-actions .buy-btn:hover {
        background: linear-gradient(135deg, #d97706, #b45309);
    }
    
    /* Стили для эмодзи щита в карточке участника */
    .shield-emoji {
        margin-left: 5px;
        font-size: 14px;
        vertical-align: middle;
        filter: none; /* Убираем фильтры для эмодзи */
    }
    
    /* Дополнительные стили для лучшего отображения */
    .member-name {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    /* Стили для неактивной кнопки кика в меню */
    .member-context-menu .menu-item:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: none !important;
    }
    
    .member-context-menu .menu-item:disabled:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    /* 🔥 Стили для блока описания на странице команды */
    .team-description-section {
        margin: 20px 0;
        padding: 16px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .team-description-content {
        text-align: center;
    }
    
    .team-description-text {
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.8);
        font-style: italic;
    }
    
    /* 🔥 Стили для описания в карточках поиска */
    .team-description-preview {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
        margin: 4px 0 8px 0;
        line-height: 1.3;
        max-height: 32px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    
    
    /* 🔥 Стили для модалки смены описания */
    .change-description-modal {
        max-width: 500px;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border-radius: 16px;
        padding: 24px;
    }
    
    .description-header {
        text-align: center;
        margin-bottom: 24px;
    }
    
    .description-icon {
        font-size: 32px;
        margin-bottom: 12px;
    }
    
    .description-header h2 {
        margin: 0;
        font-size: 20px;
        color: white;
    }
    
    .current-description-section,
    .new-description-section {
        margin-bottom: 20px;
    }
    
    .section-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
    }
    
    .current-description-text {
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        font-style: italic;
        font-size: 14px;
    }
    
    .description-textarea {
        width: 100%;
        min-height: 80px;
        padding: 12px;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        color: white;
        font-size: 14px;
        resize: vertical;
        transition: all 0.3s ease;
    }
    
    .description-textarea:focus {
        outline: none;
        border-color: #8774e1;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .char-counter {
        text-align: right;
        margin-top: 4px;
        font-size: 12px;
        color: #8774e1;
    }
    
    .char-counter .char-count.valid {
        color: #10b981;
    }
    
    .char-counter .char-count.invalid {
        color: #ff6b6b;
    }
    
    .cost-section {
        margin: 20px 0;
        padding: 16px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        text-align: center;
    }
    
    .cost-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .cost-icon {
        font-size: 16px;
    }
    
    .cost-text {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
    }
    
    .cost-amount {
        color: #f59e0b;
        font-weight: 600;
        font-size: 14px;
    }
    
    .description-actions {
        display: flex;
        gap: 12px;
        margin-top: 24px;
    }
    
    .description-actions .action-btn {
        flex: 1;
        padding: 12px 16px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .description-actions .save-btn {
        background: #8774e1;
        color: white;
    }
    
    .description-actions .save-btn:disabled {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.4);
        cursor: not-allowed;
    }
    
    .description-actions .save-btn:not(:disabled):hover {
        background: #6b5bbd;
    }
    
    .description-actions .cancel-btn {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.8);
    }
    
    .description-actions .cancel-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* 🔥 Стили для простого отображения описания */
    .team-description-simple {
        margin: 20px 0;
        padding: 0;
    }
    
    .description-label {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .description-text-simple {
        margin: 0;
        font-size: 14px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.8);
        padding: 0;
        background: none;
        border: none;
    }
    
    /* 🔥 Стили для кнопки удаления */
    .description-actions .delete-btn {
        background: rgba(239, 68, 68, 0.2);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }
    
    .description-actions .delete-btn:hover {
        background: rgba(239, 68, 68, 0.3);
        border-color: rgba(239, 68, 68, 0.5);
    }
    
    /* 🔥 Адаптируем layout для трех кнопок */
    .description-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 24px;
    }
    
    .description-actions .action-btn {
        width: 100%;
        padding: 12px 16px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    /* 🔥 СТИЛИ ДЛЯ МОДАЛКИ ССЫЛКИ НА ЧАТ */
    .chat-link-modal {
        max-width: 450px;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }
    
    .chat-link-header {
        text-align: center;
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .chat-link-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .chat-link-header h2 {
        color: #ffffff;
        font-size: 22px;
        font-weight: 600;
        margin: 0;
    }
    
    .chat-link-state {
        margin-bottom: 20px;
    }
    
    .no-chat-message {
        text-align: center;
        color: #9ca3af;
        font-size: 14px;
        margin: 0;
        padding: 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }
    
    .current-link-section {
        margin-bottom: 20px;
    }
    
    .current-link-section .section-label {
        color: #d1d5db;
        font-size: 14px;
        margin-bottom: 8px;
        display: block;
    }
    
    .current-link {
        color: #8774e1;
        background: rgba(135, 116, 225, 0.1);
        padding: 12px 16px;
        border-radius: 8px;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        word-break: break-all;
        border: 1px solid rgba(135, 116, 225, 0.3);
    }
    
    .link-input-section {
        margin-bottom: 20px;
    }
    
    .link-input-section .section-label {
        color: #d1d5db;
        font-size: 14px;
        margin-bottom: 8px;
        display: block;
    }
    
    .link-input-container {
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        overflow: hidden;
        transition: border-color 0.3s ease;
    }
    
    .link-input-container:focus-within {
        border-color: #8774e1;
    }
    
    .link-prefix {
        padding: 12px 16px;
        background: rgba(135, 116, 225, 0.1);
        color: #8774e1;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .chat-link-input {
        flex: 1;
        background: transparent;
        border: none;
        color: #ffffff;
        padding: 12px 16px;
        font-size: 14px;
        outline: none;
        font-family: 'Courier New', monospace;
    }
    
    .chat-link-input::placeholder {
        color: #6b7280;
    }
    
    .chat-link-actions {
        display: flex;
        gap: 12px;
        margin-top: 25px;
    }
    
    .chat-link-actions .action-btn {
        flex: 1;
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
    }
    
    .chat-link-actions .save-btn {
        background: linear-gradient(135deg, #8774e1 0%, #6b5bb8 100%);
        color: white;
    }
    
    .chat-link-actions .save-btn:hover:not(:disabled) {
        background: linear-gradient(135deg, #6b5bb8 0%, #5a4a9c 100%);
        transform: translateY(-2px);
    }
    
    .chat-link-actions .save-btn:disabled {
        background: #4b5563;
        color: #9ca3af;
        cursor: not-allowed;
        transform: none;
    }
    
    .chat-link-actions .delete-btn {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border: 1px solid rgba(239, 68, 68, 0.3);
    }
    
    .chat-link-actions .delete-btn:hover {
        background: rgba(239, 68, 68, 0.2);
        transform: translateY(-2px);
    }
    
    .chat-link-actions .cancel-btn {
        background: rgba(255, 255, 255, 0.1);
        color: #d1d5db;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .chat-link-actions .cancel-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
    }
    
    /* Адаптивность для мобильных */
    @media (max-width: 480px) {
        .chat-link-modal {
            margin: 20px;
            max-width: calc(100vw - 40px);
        }
        
        .chat-link-actions {
            flex-direction: column;
        }
    }
    
    /* 🔥 СТИЛИ ДЛЯ КЛИКАБЕЛЬНОГО БЛОКА ЧАТА */
    .chat-stat-item {
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid transparent;
        border-radius: 12px;
        padding: 8px;
        position: relative;
        overflow: hidden;
    }
    
    .chat-stat-item:hover {
        background: rgba(135, 116, 225, 0.1);
        border-color: rgba(135, 116, 225, 0.3);
        transform: translateY(-2px);
    }
    
    .chat-stat-item:active {
        background: rgba(135, 116, 225, 0.2);
        transform: translateY(0);
    }
    
    .chat-stat-item .stat-value {
        color: #8774e1;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 4px;
    }
    
    .chat-stat-item .stat-label {
        color: #9ca3af;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
    
    .campaign-launch-header {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .campaign-launch-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .campaign-types-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 25px;
    }
    
    .campaign-type-card {
        display: flex;
        align-items: center;
        padding: 15px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--border-radius);
        cursor: pointer;
        transition: var(--transition);
    }
    
    .campaign-type-card:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
    }
    
    .campaign-type-card.selected {
        background: rgba(255, 255, 255, 0.15);
        border-color: #8774e1;
    }
    
    .campaign-type-icon {
        font-size: 24px;
        margin-right: 15px;
    }
    
    .campaign-type-info {
        flex: 1;
    }
    
    .campaign-type-name {
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 4px;
    }
    
    .campaign-type-status {
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 10px;
        display: inline-block;
    }
    
    .campaign-type-status.available {
        background: rgba(76, 175, 80, 0.2);
        color: #4caf50;
    }
    
    .campaign-type-status.unavailable {
        background: rgba(244, 67, 54, 0.2);
        color: #f44336;
        cursor: not-allowed;
    }
    
    .campaign-type-card[data-campaign-type="avatar"] {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .campaign-launch-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    /* Стили для модалки сбора на слоты */
    .campaign-slots-modal {
        max-width: 450px;
        background: var(--tg-theme-bg-color);
        border-radius: var(--border-radius);
    }
    
    .campaign-slots-header {
        text-align: center;
        margin-bottom: 25px;
    }
    
    .campaign-slots-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .slots-selector {
        margin-bottom: 25px;
    }
    
    .slots-range {
        margin-bottom: 15px;
    }
    
    .slots-range-input {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.1);
        outline: none;
    }
    
    .slots-range-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #8774e1;
        cursor: pointer;
    }
    
    .range-labels {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
    }
    
    .selected-slots {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .slots-count {
        font-size: 32px;
        font-weight: bold;
        color: #8774e1;
    }
    
    .slots-label {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
        margin-left: 5px;
    }
    
    .campaign-cost-info {
        text-align: center;
        margin-bottom: 30px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--border-radius);
    }
    
    .cost-display {
        margin-bottom: 10px;
    }
    
    .cost-amount-large {
        font-size: 28px;
        font-weight: bold;
        color: #8774e1;
    }
    
    .cost-currency {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.8);
        margin-left: 5px;
    }
    
    .cost-description {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.4;
    }
    
    .campaign-slots-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    /* Стили для модалки сбора на описание и чат */
    .campaign-description-modal,
    .campaign-chat-modal {
        max-width: 500px;
        background: var(--tg-theme-bg-color);
        border-radius: var(--border-radius);
    }
    
    .campaign-description-header,
    .campaign-chat-header {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .campaign-description-icon,
    .campaign-chat-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .current-description-section,
    .current-chat-section {
        margin-bottom: 20px;
    }
    
    .section-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
    }
    
    .current-description-text,
    .current-chat-text {
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-style: italic;
        color: rgba(255, 255, 255, 0.7);
    }
    
    .new-description-section,
    .new-chat-section {
        margin-bottom: 25px;
    }
    
    .description-textarea {
        width: 100%;
        min-height: 80px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: white;
        font-size: 14px;
        resize: vertical;
        transition: var(--transition);
    }
    
    .description-textarea:focus {
        outline: none;
        border-color: #8774e1;
        background: rgba(255, 255, 255, 0.08);
    }
    
    .link-input-container {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .link-prefix {
        padding: 12px;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .chat-link-input {
        flex: 1;
        padding: 12px;
        background: transparent;
        border: none;
        color: white;
        font-size: 14px;
        outline: none;
    }
    
    .char-counter {
        text-align: right;
        margin-top: 5px;
        font-size: 12px;
        color: #8774e1;
    }
    
    .cost-amount {
        font-size: 24px;
        font-weight: bold;
        color: #8774e1;
    }
    
    .campaign-description-actions,
    .campaign-chat-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    /* Стили для модалки сбора на кастомное звание */
    .campaign-rank-modal {
        max-width: 500px;
        background: var(--tg-theme-bg-color);
        border-radius: var(--border-radius);
    }
    
    .campaign-rank-header {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .campaign-rank-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .rank-name-section,
    .rank-color-section {
        margin-bottom: 25px;
    }
    
    .rank-name-input {
        width: 100%;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        color: white;
        font-size: 14px;
        transition: var(--transition);
    }
    
    .rank-name-input:focus {
        outline: none;
        border-color: #8774e1;
        background: rgba(255, 255, 255, 0.08);
    }
    
    .color-picker {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .color-presets {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    
    .color-option {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: var(--transition);
    }
    
    .color-option:hover {
        transform: scale(1.1);
    }
    
    .color-option.active {
        border-color: #8774e1;
        transform: scale(1.1);
    }
    
    .selected-color {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }
    
    .selected-color-preview {
        width: 30px;
        height: 30px;
        border-radius: 6px;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }
    
    .selected-color-text {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .campaign-rank-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    /* Стили для прогресс бара кампании */
    .campaign-progress-section {
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--border-radius);
        padding: 20px;
        margin: 20px 0;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .campaign-progress-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .campaign-progress-icon {
        font-size: 24px;
    }
    
    .campaign-progress-header h3 {
        margin: 0;
        color: white;
        font-size: 18px;
    }
    
    .campaign-info {
        margin-bottom: 20px;
    }
    
    .campaign-description {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 15px;
        line-height: 1.4;
    }
    
    .campaign-progress {
        margin-bottom: 15px;
    }
    
    .progress-bar {
        width: 100%;
        height: 8px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 8px;
    }
    
    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #8774e1, #64b5f6);
        border-radius: 4px;
        transition: width 0.3s ease;
    }
    
    .progress-stats {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .current-amount {
        color: #8774e1;
        font-weight: bold;
    }
    
    .target-amount {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .progress-percent {
        color: #64b5f6;
        margin-left: auto;
    }
    
    .campaign-actions {
        display: flex;
        gap: 10px;
    }
    
    .contribute-btn, .history-btn {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
    }
    
    .contribute-btn {
        background: #8774e1;
        color: white;
    }
    
    .contribute-btn:hover {
        background: #7560d9;
    }
    
    .history-btn {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }
    
    .history-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Стили для модалки внесения средств */
    .contribute-modal {
        max-width: 450px;
        background: var(--tg-theme-bg-color);
        border-radius: var(--border-radius);
    }
    
    .contribute-header {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .contribute-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .contribute-progress {
        margin-bottom: 25px;
    }
    
    .progress-bar-large {
        width: 100%;
        height: 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    
    .progress-fill-large {
        height: 100%;
        background: linear-gradient(90deg, #8774e1, #64b5f6);
        border-radius: 6px;
        transition: width 0.3s ease;
    }
    
    .progress-text-large {
        text-align: center;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .contribute-info {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 25px;
    }
    
    .info-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    
    .info-item:last-child {
        margin-bottom: 0;
    }
    
    .info-label {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .info-value {
        color: white;
        font-weight: 600;
    }
    
    .amount-input-section {
        margin-bottom: 30px;
    }
    
    .amount-input-container {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        overflow: hidden;
    }
    
    .amount-input {
        flex: 1;
        padding: 12px;
        background: transparent;
        border: none;
        color: white;
        font-size: 16px;
        outline: none;
    }
    
    .amount-suffix {
        padding: 12px;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
    }
    
    .amount-hint {
        text-align: center;
        margin-top: 8px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
    }
    
    .contribute-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    .campaign-progress-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 15px;
        position: relative;
    }
    
    .cancel-campaign-btn {
        background: none;
        border: none;
        color: #ff6b6b;
        font-size: 16px;
        cursor: pointer;
        padding: 5px;
        border-radius: 4px;
        transition: var(--transition);
        margin-left: auto;
    }
    
    .cancel-campaign-btn:hover {
        background: rgba(255, 107, 107, 0.1);
    }
    
    /* Стили для индикаторов маленьких остатков */
    .almost-complete {
        border-left: 4px solid #f59e0b !important;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), transparent) !important;
    }
    
    .almost-complete-badge {
        background: linear-gradient(45deg, #f59e0b, #d97706);
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        margin-left: 10px;
    }
    
    /* Анимация для завершающего взноса */
    @keyframes pulse-orange {
        0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
        70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
        100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    }
    
    .pulse-final {
        animation: pulse-orange 2s infinite;
    }
    
    /* Стили для элементов настроек */
    .settings-item {
        background: #2d2d2d;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid #404040;
    }
    
    .settings-item:hover {
        background: #3a3a3a;
        border-color: #555;
        transform: translateY(-1px);
    }
    
    .settings-item:active {
        transform: translateY(0);
    }
    
    .settings-item-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .settings-item-text {
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
    }
    
    .settings-item-arrow {
        color: #888;
        font-size: 18px;
        font-weight: bold;
        transition: transform 0.2s ease;
    }
    
    .settings-item:hover .settings-item-arrow {
        color: #8774e1;
        transform: translateX(2px);
    }
    
    /* Стили для настроек уведомлений */
    .notification-settings-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }
    
    .notification-setting-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: #2d2d2d;
        border-radius: 12px;
        border: 1px solid #404040;
        transition: all 0.2s ease;
    }
    
    .notification-setting-item:hover {
        background: #3a3a3a;
        border-color: #555;
    }
    
    .notification-setting-info {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        margin-right: 16px;
    }
    
    .notification-setting-title {
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
    }
    
    .notification-setting-description {
        color: #888;
        font-size: 14px;
        line-height: 1.3;
    }
    
    /* Toggle switch стили */
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 52px;
        height: 28px;
        flex-shrink: 0;
    }
    
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #555;
        transition: .4s;
        border-radius: 34px;
    }
    
    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    
    input:checked + .toggle-slider {
        background-color: #8774e1;
    }
    
    input:checked + .toggle-slider:before {
        transform: translateX(24px);
    }
    
    /* Анимация для toggle */
    .toggle-slider:before {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .toggle-switch input:focus + .toggle-slider {
        box-shadow: 0 0 1px #8774e1;
    }
    
    /* Информационный текст */
    .notification-settings-info {
        text-align: center;
        padding: 12px;
        background: rgba(135, 116, 225, 0.1);
        border-radius: 8px;
        border: 1px solid rgba(135, 116, 225, 0.2);
    }
    
    .notification-settings-info p {
        color: #8774e1;
        font-size: 14px;
        margin: 0;
        font-weight: 500;
    }
    
    /* ===== УПРОЩЕННЫЕ И ГАРМОНИЧНЫЕ СТИЛИ СИСТЕМЫ СЕЗОНОВ ===== */
    
    /* Общие стили для всех фаз - УПРОЩЕННЫЕ */
    .phase-display {
        text-align: center;
        padding: 16px 0;
        margin-bottom: 16px;
        animation: fadeIn 0.6s ease-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .phase-icon {
        font-size: 40px;
        margin-bottom: 12px;
        opacity: 0.9;
    }
    
    .phase-display h2 {
        color: #fff;
        font-size: 20px;
        margin-bottom: 8px;
        font-weight: 700;
    }
    
    .phase-description {
        color: #8774e1;
        font-size: 15px;
        margin-bottom: 16px;
        line-height: 1.4;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Специфичные стили для off_season */
    .off-season .phase-description {
        color: #8774e1;
        font-size: 15px;
    }
    
    .season-preview {
        margin-top: 20px;
    }
    
    .season-preview h3 {
        color: #fff;
        margin-bottom: 12px;
        font-size: 16px;
        font-weight: 600;
    }
    
    .preview-features {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .feature-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        color: #ccc;
        transition: transform 0.2s ease;
    }
    
    .feature-item:hover {
        transform: translateX(5px);
    }
    
    .feature-icon {
        font-size: 16px;
        width: 22px;
        text-align: center;
        color: #8774e1;
    }
    
    .feature-text {
        font-size: 13px;
        font-weight: 500;
    }
    
    /* Стили для preparation фазы */
    .countdown-section {
        margin: 16px 0;
    }
    
    .countdown-label {
        color: #aaa;
        font-size: 13px;
        margin-bottom: 6px;
        font-weight: 500;
    }
    
    .countdown-timer {
        font-size: 18px;
        font-weight: 700;
        color: #8774e1;
        letter-spacing: 0.5px;
    }
    
    .preparation-actions {
        margin-top: 16px;
    }
    
    .preparation-actions .btn-primary {
        background: linear-gradient(135deg, #8774e1 0%, #4a56e2 100%);
        border: none;
        border-radius: 12px;
        padding: 12px 24px;
        font-size: 15px;
        font-weight: 600;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 220px;
    }
    
    .preparation-actions .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(135, 116, 225, 0.3);
    }
    
    /* === ОЧИЩЕННЫЕ СТИЛИ ДЛЯ ACTIVE ФАЗЫ === */
    .active-season-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 8px;
    }
    
    .phase-display.active-season .phase-icon {
        font-size: 28px;
        opacity: 0.95;
        margin-bottom: 0;
        filter: drop-shadow(0 0 8px rgba(135, 116, 225, 0.5));
    }
    
    /* НАДПИСЬ "ПРИЗОВОЙ ФОНД" - ОБНОВЛЕННАЯ */
    .prize-label {
        color: #ffffff;
        font-size: 22px;
        font-weight: 800;
        margin: 0;
        position: relative;
        display: inline-block;
        padding: 4px 0;
        opacity: 0;
        animation: slideDownFade 0.8s ease-out forwards;
        animation-delay: 0.2s;
    }
    
    @keyframes slideDownFade {
        from { 
            opacity: 0;
            transform: translateY(-10px);
        }
        to { 
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Эффект hover для надписи */
    .prize-label::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, 
            transparent, 
            #8774e1, 
            #4a56e2,
            #8774e1,
            transparent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }
    
    .prize-label:hover::after {
        transform: scaleX(1);
    }
    
    /* БОЛЬШИЕ ЦИФРЫ ПРИЗОВОГО ФОНДА */
    .prize-display {
        margin: 12px 0 8px 0;
        position: relative;
        display: inline-block;
        min-height: 70px;
    }
    
    .prize-pool {
        font-size: 58px;
        font-weight: 900;
        color: #ffffff;
        margin: 0;
        line-height: 1;
        letter-spacing: 1px;
        text-shadow: 
            0 0 20px rgba(135, 116, 225, 0.7),
            0 0 40px rgba(135, 116, 225, 0.4);
        opacity: 0;
        animation: countUp 1.5s ease-out forwards;
        animation-delay: 0.3s;
    }
    
    @keyframes countUp {
        from { 
            opacity: 0;
            transform: translateY(10px) scale(0.95);
        }
        to { 
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    /* НАДПИСЬ "TON" - ОБНОВЛЕННАЯ */
    .prize-pool::after {
        content: "TON";
        font-size: 20px;
        font-weight: 800;
        color: #ffffff;
        display: block;
        margin-top: 4px;
        letter-spacing: 1px;
        opacity: 0;
        animation: fadeInUp 0.8s ease-out forwards;
        animation-delay: 1s;
        position: relative;
        padding: 2px 0;
    }
    
    @keyframes fadeInUp {
        from { 
            opacity: 0;
            transform: translateY(5px);
        }
        to { 
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Эффект hover для TON (сверху вниз) */
    .prize-pool::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 50%;
        transform: translateX(-50%) scaleY(0);
        width: 60%;
        height: 100%;
        background: linear-gradient(to bottom, 
            rgba(135, 116, 225, 0.2), 
            rgba(74, 86, 226, 0.1),
            transparent);
        z-index: -1;
        transition: transform 0.4s ease;
        transform-origin: top;
    }
    
    .prize-pool:hover::before {
        transform: translateX(-50%) scaleY(1);
    }
    
    /* ТАЙМЕР СЕЗОНА - БЕЗ КОНТЕЙНЕРА */
    .countdown-section {
        margin: 12px 0 4px 0;
        animation: fadeIn 0.8s ease-out;
        animation-delay: 0.5s;
        opacity: 0;
        animation-fill-mode: forwards;
    }
    
    .countdown-label {
        color: #aaa;
        font-size: 14px;
        margin-bottom: 4px;
        font-weight: 500;
        letter-spacing: 0.5px;
    }
    
    .countdown-timer {
        font-size: 20px;
        font-weight: 700;
        color: #8774e1;
        letter-spacing: 0.8px;
        text-shadow: 0 0 8px rgba(135, 116, 225, 0.6);
    }
    
    /* Стили для завершенной фазы */
    .finished-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-bottom: 16px;
    }
    
    .phase-display.finished .phase-icon {
        font-size: 32px;
        opacity: 0.9;
        color: #4caf50;
    }
    
    .prize-display.finished {
        margin: 0;
    }
    
    .prize-pool.finished {
        font-size: 52px;
        font-weight: 900;
        color: #ffffff;
        margin: 0;
        line-height: 1;
        letter-spacing: 1px;
        text-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
    }
    
    .prize-pool.finished::after {
        content: "TON";
        font-size: 18px;
        font-weight: 700;
        color: #4caf50;
        display: block;
        margin-top: 4px;
        letter-spacing: 0.5px;
    }
    
    /* Стили для статусов выплат */
    .distribution-status {
        margin: 20px 0 12px 0;
    }
    
    .status-label {
        color: #aaa;
        font-size: 13px;
        margin-bottom: 6px;
        font-weight: 500;
    }
    
    .status-badge {
        display: inline-block;
        padding: 8px 18px;
        border-radius: 18px;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
        min-width: 180px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* 3 ЦВЕТА СТАТУСОВ - чистые */
    .status-badge.pending {
        background: rgba(255, 255, 255, 0.1);
        color: #cccccc;
    }
    
    .status-badge.processing {
        background: rgba(255, 165, 0, 0.15);
        color: #ffa500;
        border-color: rgba(255, 165, 0, 0.3);
    }
    
    .status-badge.completed {
        background: rgba(76, 175, 80, 0.15);
        color: #4caf50;
        border-color: rgba(76, 175, 80, 0.3);
    }
    
    /* Стили для ошибок */
    .error-state {
        text-align: center;
        padding: 32px 16px;
        background: rgba(30, 30, 30, 0.8);
        border-radius: 16px;
        border: 1px solid rgba(255, 107, 107, 0.2);
    }
    
    .error-icon {
        font-size: 40px;
        margin-bottom: 16px;
        opacity: 0.7;
        color: #ff6b6b;
    }
    
    .error-state h3 {
        color: #ff6b6b;
        margin-bottom: 8px;
        font-size: 18px;
        font-weight: 700;
    }
    
    .error-state p {
        color: #888;
        margin-bottom: 16px;
        font-size: 14px;
    }
    
    /* Кнопка повторной попытки */
    .error-state .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        color: #fff;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .error-state .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
    }
    
    /* АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ */
    @media (max-width: 480px) {
        .phase-display {
            padding: 14px 0;
            margin-bottom: 14px;
        }
        
        .phase-icon {
            font-size: 36px;
            margin-bottom: 10px;
        }
        
        .phase-display h2 {
            font-size: 18px;
        }
        
        .phase-description {
            font-size: 14px;
            max-width: 95%;
            margin-bottom: 14px;
        }
        
        /* Active фаза на мобильных */
        .phase-display.active-season .phase-icon {
            font-size: 24px;
        }
        
        .prize-label {
            font-size: 20px;
        }
        
        .prize-pool {
            font-size: 48px;
        }
        
        .prize-pool::after {
            font-size: 16px;
            margin-top: 3px;
        }
        
        .prize-pool.finished {
            font-size: 44px;
        }
        
        .prize-pool.finished::after {
            font-size: 15px;
        }
        
        .countdown-section {
            margin: 10px 0 2px 0;
        }
        
        .countdown-label {
            font-size: 13px;
        }
        
        .countdown-timer {
            font-size: 18px;
        }
        
        /* Кнопки на мобильных */
        .preparation-actions .btn-primary {
            padding: 10px 20px;
            font-size: 14px;
            min-width: 200px;
        }
        
        /* Статусы на мобильных */
        .status-badge {
            padding: 7px 16px;
            font-size: 13px;
            min-width: 160px;
        }
    }
    
    /* CSS для кнопки админ-панели */
    .admin-panel-btn-container {
      text-align: center;
      margin: 15px 0;
      padding: 10px 0;
    }
    
    .admin-panel-btn {
      background: rgba(255, 165, 0, 0.2);
      color: #ffa500;
      border: 1px solid rgba(255, 165, 0, 0.4);
      border-radius: 10px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .admin-panel-btn:hover {
      background: rgba(255, 165, 0, 0.3);
      transform: translateY(-2px);
    }
    
    /* Админ-панель */
    .admin-panel-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
    }
    
    .admin-panel-overlay {
      background: rgba(0, 0, 0, 0.8);
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    
    .admin-panel-content {
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 15px;
      width: 100%;
      max-width: 800px;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .admin-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #333;
      background: rgba(255, 255, 255, 0.05);
    }
    
    .admin-panel-header h2 {
      color: #fff;
      margin: 0;
      font-size: 20px;
    }
    
    .admin-close-btn {
      background: none;
      border: none;
      color: #fff;
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .admin-panel-body {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }
    
    .admin-info-section,
    .admin-actions-section,
    .admin-status-section,
    .admin-logs-section {
      margin-bottom: 25px;
    }
    
    .admin-info-section h3,
    .admin-actions-section h3,
    .admin-status-section h3,
    .admin-logs-section h3 {
      color: #fff;
      margin-bottom: 15px;
      font-size: 16px;
    }
    
    .admin-actions-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    
    .admin-btn {
      background: rgba(135, 116, 225, 0.2);
      color: #8774e1;
      border: 1px solid rgba(135, 116, 225, 0.4);
      border-radius: 8px;
      padding: 12px 15px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
    }
    
    .admin-btn:hover {
      background: rgba(135, 116, 225, 0.3);
      transform: translateY(-2px);
    }
    
    .admin-logs {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      padding: 15px;
      max-height: 200px;
      overflow-y: auto;
      font-family: monospace;
      font-size: 12px;
    }
    
    .log-entry {
      color: #ccc;
      margin-bottom: 5px;
      padding: 5px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .log-entry:last-child {
      border-bottom: none;
    }
    
    /* Дополнительные стили для админ-панели */
    .info-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 6px;
    }
    
    .info-label {
      color: #aaa;
      font-size: 13px;
    }
    
    .info-value {
      color: #fff;
      font-weight: 600;
      font-size: 13px;
    }
    
    .payout-status-pending {
      color: #ccc;
    }
    
    .payout-status-processing {
      color: #ffa500;
    }
    
    .payout-status-completed {
      color: #4caf50;
    }
    
    .status-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .status-item:last-child {
      border-bottom: none;
    }
    
    .status-label {
      color: #aaa;
      font-size: 13px;
    }
    
    .status-value {
      color: #fff;
      font-weight: 600;
      font-size: 13px;
    }
    
    .snapshot-info {
      background: rgba(135, 116, 225, 0.1);
      border: 1px solid rgba(135, 116, 225, 0.3);
      border-radius: 8px;
      padding: 10px;
      margin-top: 10px;
      font-size: 12px;
      color: #8774e1;
    }
    
    /* Модальное окно статуса */
    .status-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10001;
    }
    
    .status-modal {
      background: #1a1a1a;
      border: 1px solid #333;
      border-radius: 15px;
      padding: 20px;
      width: 90%;
      max-width: 400px;
    }
    
    .status-modal h3 {
      color: #fff;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .status-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .status-option {
      padding: 12px 15px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .status-option.pending {
      background: rgba(255, 255, 255, 0.1);
      color: #ccc;
    }
    
    .status-option.processing {
      background: rgba(255, 165, 0, 0.2);
      color: #ffa500;
      border: 1px solid rgba(255, 165, 0, 0.4);
    }
    
    .status-option.completed {
      background: rgba(76, 175, 80, 0.2);
      color: #4caf50;
      border: 1px solid rgba(76, 175, 80, 0.4);
    }
    
    .status-option:hover {
      transform: translateY(-2px);
    }
    
    .modal-close-btn {
      width: 100%;
      padding: 10px;
      background: rgba(255, 255, 255, 0.1);
      color: #ccc;
      border: 1px solid #333;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
    }
    
    /* Стили для админ-панели */
    .admin-panel-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
      opacity: 1;
      visibility: visible;
    }
    
    .admin-panel-overlay {
      background: #1e1e1e;
      border-radius: 12px;
      width: 90%;
      max-width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      border: 1px solid #333;
    }
    
    .admin-panel-content {
      padding: 20px;
    }
    
    .admin-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #333;
    }
    
    .admin-panel-header h2 {
      margin: 0;
      color: white;
    }
    
    .admin-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .admin-status {
      color: #4CAF50;
      font-size: 14px;
    }
    
    .admin-logout-btn, .admin-close-btn {
      background: #ff4757;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }
    
    .admin-close-btn {
      background: #555;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .admin-panel-body {
      color: white;
    }
    
    .admin-info-section, .admin-actions-section, .admin-status-section, .admin-logs-section {
      margin-bottom: 25px;
    }
    
    .admin-actions-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .admin-btn {
      background: #8774e1;
      color: white;
      border: none;
      padding: 12px 15px;
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
      font-size: 14px;
      transition: background 0.2s;
    }
    
    .admin-btn:hover {
      background: #6b5bb3;
    }
    
    .admin-logs {
      background: #2d2d2d;
      border-radius: 8px;
      padding: 15px;
      max-height: 200px;
      overflow-y: auto;
      font-family: monospace;
      font-size: 12px;
    }
    
    .log-entry {
      margin-bottom: 5px;
      padding: 5px;
      border-bottom: 1px solid #333;
    }
    
    /* Кнопка админ-панели в рейтинге */
    .admin-panel-btn-container {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
    
    .admin-panel-btn {
      background: #8774e1;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.2s;
    }
    
    .admin-panel-btn:hover {
      background: #6b5bb3;
    }
    
    /* Стили для формы логина */
    .login-form {
      text-align: center;
      padding: 20px;
    }
    
    .admin-input {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border: 1px solid #333;
      border-radius: 6px;
      background: #2d2d2d;
      color: white;
      font-size: 16px;
    }
    
    .login-btn {
      width: 100%;
      padding: 12px;
      background: #8774e1;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
    }
    
    .login-error {
      color: #ff6b6b;
      margin-top: 10px;
      padding: 10px;
      background: rgba(255, 107, 107, 0.1);
      border-radius: 6px;
    }
    
    /* Стили для админ-панели */
    .admin-panel-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
      opacity: 1;
      visibility: visible;
    }
    
    .admin-panel-overlay {
      background: #1e1e1e;
      border-radius: 12px;
      width: 90%;
      max-width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      border: 1px solid #333;
    }
    
    .admin-panel-content {
      padding: 20px;
    }
    
    .admin-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #333;
    }
    
    .admin-panel-header h2 {
      margin: 0;
      color: white;
    }
    
    .admin-header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .admin-status {
      color: #4CAF50;
      font-size: 14px;
    }
    
    .admin-logout-btn, .admin-close-btn {
      background: #ff4757;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
    }
    
    .admin-close-btn {
      background: #555;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .admin-panel-body {
      color: white;
    }
    
    .admin-info-section, .admin-actions-section, .admin-status-section, .admin-logs-section {
      margin-bottom: 25px;
    }
    
    .admin-actions-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .admin-btn {
      background: #8774e1;
      color: white;
      border: none;
      padding: 12px 15px;
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
      font-size: 14px;
      transition: background 0.2s;
    }
    
    .admin-btn:hover {
      background: #6b5bb3;
    }
    
    .admin-logs {
      background: #2d2d2d;
      border-radius: 8px;
      padding: 15px;
      max-height: 200px;
      overflow-y: auto;
      font-family: monospace;
      font-size: 12px;
    }
    
    .log-entry {
      margin-bottom: 5px;
      padding: 5px;
      border-bottom: 1px solid #333;
    }
    
    /* Кнопка админ-панели в рейтинге */
    .admin-panel-btn-container {
      display: flex;
      justify-content: center;
      margin: 20px 0;
    }
    
    .admin-panel-btn {
      background: #8774e1;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.2s;
    }
    
    .admin-panel-btn:hover {
      background: #6b5bb3;
    }
    
    /* Стили для формы логина */
    .login-form {
      text-align: center;
      padding: 20px;
    }
    
    .admin-input {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border: 1px solid #333;
      border-radius: 6px;
      background: #2d2d2d;
      color: white;
      font-size: 16px;
    }
    
    .login-btn {
      width: 100%;
      padding: 12px;
      background: #8774e1;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
    }
    
    .login-error {
      color: #ff6b6b;
      margin-top: 10px;
      padding: 10px;
      background: rgba(255, 107, 107, 0.1);
      border-radius: 6px;
    }
    
    /* Стили для модалок подтверждения и отчетов */
    .password-confirm-modal-overlay,
    .prize-pool-modal-overlay,
    .report-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10002;
    }
    
    .password-confirm-modal,
    .prize-pool-modal,
    .report-modal {
      background: #1e1e1e;
      padding: 25px;
      border-radius: 12px;
      max-width: 400px;
      width: 90%;
      border: 1px solid #333;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    
    .password-confirm-modal h3,
    .prize-pool-modal h3,
    .report-modal h3 {
      margin: 0 0 15px 0;
      color: white;
      text-align: center;
    }
    
    .modal-body {
      color: #ccc;
    }
    
    .modal-body p {
      margin: 0 0 15px 0;
      text-align: center;
    }
    
    .modal-actions {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }
    
    .modal-btn {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }
    
    .modal-btn.cancel {
      background: #555;
      color: white;
    }
    
    .modal-btn.confirm {
      background: #8774e1;
      color: white;
    }
    
    .modal-btn.primary {
      background: #8774e1;
      color: white;
    }
    
    .modal-btn:hover {
      opacity: 0.9;
      transform: translateY(-1px);
    }
    
    /* Стили для отчетов */
    .report-content {
      color: white;
    }
    
    .report-summary {
      background: #2d2d2d;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    
    .report-item {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid #333;
    }
    
    .report-item:last-child {
      border-bottom: none;
    }
    
    .report-actions {
      display: flex;
      gap: 10px;
    }
    
    /* Адаптивность для админ-панели */
    @media (max-width: 768px) {
      .admin-panel-overlay {
        width: 95%;
        margin: 10px;
      }
      
      .admin-actions-grid {
        grid-template-columns: 1fr;
      }
      
      .modal-actions {
        flex-direction: column;
      }
    }
    
    /* Стили для футера настроек */
    .settings-footer {
        margin-top: 30px;
        border-top: 1px solid #333;
        padding-top: 20px;
    }
    
    .version-info {
        text-align: center;
        margin-top: 15px;
        color: #888;
        font-size: 12px;
        opacity: 0.7;
    }
    
    /* Стили для модалки связи */
    .contact-content {
        margin-bottom: 25px;
    }
    
    .contact-content p {
        color: #ccc;
        line-height: 1.5;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .contact-info {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        padding: 15px;
        margin: 20px 0;
    }
    
    .contact-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
    }
    
    .contact-label {
        color: #aaa;
        font-size: 14px;
    }
    
    .contact-value {
        color: #8774e1;
        font-weight: 500;
    }
    
    .contact-note {
        background: rgba(135, 116, 225, 0.1);
        border-radius: 8px;
        padding: 12px;
        margin: 15px 0;
    }
    
    .contact-note p {
        color: #aaa;
        font-size: 13px;
        margin: 0;
        text-align: center;
    }
    
    .contact-btn {
        width: 100%;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    /* Стили для модалки запуска сбора */
    .campaign-launch-modal {
        max-width: 500px;
        background: #212121 !important;
        border-radius: var(--border-radius);
    }
    
    /* И для всех дочерних модалок тоже */
    .campaign-slots-modal,
    .campaign-description-modal, 
    .campaign-chat-modal,
    .campaign-rank-modal,
    .contribute-modal {
        background: #212121 !important;
    }
    
    /* 🔥 ДОПОЛНИТЕЛЬНЫЙ ОТСТУП ДЛЯ КОМПАКТНОСТИ */
    @media (max-width: 480px) {
      .quests-list {
        gap: 10px;
        padding: 0 12px;
      }
      
      .quest-item {
        padding: 12px 14px;
        min-height: 65px;
      }
      
      .quest-item[data-type="partners"] {
        padding-right: 55px;
      }
      
      .quest-item[data-type="partners"] .quest-action-btn {
        right: 10px;
      }
    }
    
    /* ===== КНОПКА КИБЕРПРОСТРАНСТВА (МИНИМАЛИЗМ) ===== */
    /* Общий контейнер */
    .cyberspace-container {
        position: fixed;
        bottom: 80px;
        right: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 999;
        gap: 8px;
    }
    
    /* Текст над кнопкой - чистый минимализм */
    .cyberspace-label {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
        white-space: nowrap;
        letter-spacing: 0.3px;
        opacity: 0.9;
    }
    
    /* Кнопка с картинкой - минималистичная */
    .cyberspace-btn {
        width: 140px;
        height: 78.75px; /* 140 * (1080/1920) = 78.75 */
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
        overflow: hidden;
        cursor: pointer;
        position: relative;
    }
    
    .cyberspace-btn:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.4);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .cyberspace-btn:active {
        transform: translateY(0);
    }
    
    /* Картинка внутри кнопки */
    .cyberspace-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease;
    }
    
    .cyberspace-btn:hover .cyberspace-image {
        transform: scale(1.03);
    }
    
    /* Показатели под кнопкой - минимализм */
    .cyberspace-stats {
        display: flex;
        gap: 12px;
        margin-top: 5px;
    }
    
    .cyber-stat {
        display: flex;
        align-items: center;
        gap: 4px;
        color: rgba(255, 255, 255, 0.85);
        font-size: 12px;
        font-weight: 400;
        padding: 0;
        opacity: 0.9;
    }
    
    /* ===== МОДАЛКА КИБЕРПРОСТРАНСТВА (ТОЖЕ МИНИМАЛИЗМ) ===== */
    .cyberspace-modal .modal-content {
        background: #1a1a2e;
        border: 1px solid rgba(255, 255, 255, 0.1);
        max-width: 95%;
        max-height: 85%;
        overflow: hidden;
    }
    
    .cyberspace-modal .modal-header h2 {
        color: #fff;
        font-size: 1.3rem;
        font-weight: 500;
    }
    
    /* Табы Киберпространства - минимализм */
    .cyberspace-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
        padding: 0 10px;
        padding-bottom: 10px;
    }
    
    .cyberspace-tab {
        flex: 1;
        padding: 10px 5px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 400;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
    }
    
    .cyberspace-tab.active {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }
    
    .cyberspace-tab:hover:not(.active) {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        color: rgba(255, 255, 255, 0.9);
    }
    
    /* Контент табов */
    .cyberspace-tab-content {
        display: none;
        padding: 20px;
        text-align: center;
        color: rgba(255, 255, 255, 0.7);
        min-height: 200px;
        max-height: 400px;
        overflow-y: auto;
    }
    
    .cyberspace-tab-content.active {
        display: block;
    }
    
    .cyberspace-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200px;
        gap: 15px;
        opacity: 0.5;
    }
    
    .cyberspace-placeholder-icon {
        width: 60px;
        height: 60px;
        color: rgba(255, 255, 255, 0.3);
    }
    
    .cyberspace-placeholder-text {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);
        max-width: 200px;
        line-height: 1.4;
        text-align: center;
    }
    
    /* Адаптивность для мобильных устройств */
    @media (max-width: 768px) {
        .cyberspace-container {
            right: 15px;
            bottom: 70px;
            gap: 6px;
        }
        
        .cyberspace-label {
            font-size: 13px;
        }
        
        .cyberspace-btn {
            width: 120px;
            height: 67.5px; /* 120 * (1080/1920) = 67.5 */
        }
        
        .cyber-stat {
            font-size: 11px;
            gap: 3px;
        }
        
        .cyberspace-stats {
            gap: 10px;
        }
        
        .cyberspace-modal .modal-content {
            max-width: 98%;
            max-height: 90%;
        }
        
        .cyberspace-tab {
            padding: 8px 4px;
            font-size: 12px;
        }
        
        .cyberspace-placeholder {
            height: 180px;
            gap: 12px;
        }
        
        .cyberspace-placeholder-icon {
            width: 50px;
            height: 50px;
        }
        
        .cyberspace-placeholder-text {
            font-size: 13px;
            max-width: 180px;
        }
    }
    
    @media (max-width: 480px) {
        .cyberspace-container {
            right: 10px;
            bottom: 65px;
            gap: 5px;
        }
        
        .cyberspace-label {
            font-size: 12px;
        }
        
        .cyberspace-btn {
            width: 100px;
            height: 56.25px; /* 100 * (1080/1920) = 56.25 */
            border-radius: 6px;
        }
        
        .cyber-stat {
            font-size: 10px;
        }
        
        .cyberspace-stats {
            gap: 8px;
        }
    }
    
    /* ===== СТИЛИ ДЛЯ КИБЕРПРОСТРАНСТВА ===== */
    
    /* Статистика в модалке */
    .cyberspace-stats-section {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 25px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .cyber-stat-display {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .cyber-stat-display:last-child {
        border-bottom: none;
    }
    
    .cyber-stat-label {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
    }
    
    .cyber-stat-value {
        color: #00ffcc;
        font-size: 18px;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(0, 255, 204, 0.3);
    }
    
    /* Таймер энергии */
    .energy-timer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 8px;
        margin-top: 10px;
    }
    
    .timer-label {
        color: rgba(255, 255, 255, 0.6);
        font-size: 13px;
    }
    
    .timer-value {
        color: #ffcc00;
        font-family: monospace;
        font-size: 14px;
        font-weight: bold;
    }
    
    /* Секция покупки */
    .cyber-buy-section {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }
    
    .cyber-buy-btn {
        background: linear-gradient(135deg, #1a1a2e 0%, #0a0a1a 100%);
        border: 2px solid rgba(0, 255, 204, 0.3);
        border-radius: 12px;
        padding: 20px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: center;
        width: 100%;
    }
    
    .cyber-buy-btn:hover:not(:disabled) {
        transform: translateY(-3px);
        border-color: #00ffcc;
        box-shadow: 0 5px 15px rgba(0, 255, 204, 0.2);
    }
    
    .cyber-buy-btn:active:not(:disabled) {
        transform: translateY(0);
    }
    
    .cyber-buy-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .buy-btn-text {
        font-size: 18px;
        font-weight: bold;
        color: #00ffcc;
    }
    
    .buy-btn-cost {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #ffcc00;
        font-size: 14px;
    }
    
    .cost-icon {
        width: 20px;
        height: 20px;
    }
    
    .buy-btn-reward {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
    }
    
    .reward-value {
        color: #00ffcc;
        font-weight: bold;
    }
    
    .balance-info {
        text-align: center;
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8px;
    }
    
    /* Кнопка на главной с энергией */
    .cyber-stat.energy-stat {
        color: #ffcc00;
        font-weight: bold;
    }
    
    .cyber-stat.energy-stat.low {
        color: #ff6b6b;
    }
    
    .cyber-stat.energy-stat.full {
        color: #00ffcc;
    }
    
    /* Оповещения */
    .cyber-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        background: rgba(0, 0, 0, 0.8);
        border: 1px solid #00ffcc;
        border-radius: 8px;
        padding: 15px;
        color: white;
        z-index: 10001;
        max-width: 300px;
        display: none;
    }
    
    .cyber-notification.success {
        border-color: #00ffcc;
    }
    
    .cyber-notification.error {
        border-color: #ff6b6b;
    }
    
    /* СТИЛИ ДЛЯ СИСТЕМЫ АТАКИ */
    
    /* Кнопка атаки */
    .attack-section {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .attack-btn {
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, #ff3366 0%, #ff0033 100%);
        border: 2px solid #ff3366;
        border-radius: 12px;
        color: white;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .attack-btn:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: 0 5px 20px rgba(255, 51, 102, 0.4);
    }
    
    .attack-btn:active:not(:disabled) {
        transform: translateY(0);
    }
    
    .attack-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .attack-cost {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .energy-cost {
        color: #ffcc00;
        font-weight: bold;
    }
    
    /* Табы истории */
    .history-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .history-tab {
        flex: 1;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .history-tab.active {
        background: rgba(0, 255, 204, 0.1);
        border-color: #00ffcc;
        color: #00ffcc;
    }
    
    .history-content {
        display: none;
        min-height: 200px;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .history-content.active {
        display: block;
    }
    
    .history-empty {
        text-align: center;
        padding: 40px 20px;
        color: rgba(255, 255, 255, 0.5);
    }
    
    .history-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .history-item {
        padding: 12px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        border-left: 3px solid #00ffcc;
    }
    
    .history-item.success {
        border-left-color: #00ffcc;
    }
    
    .history-item.failed {
        border-left-color: #ff3366;
    }
    
    .history-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }
    
    .history-player {
        font-weight: bold;
        color: white;
    }
    
    .history-time {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
    }
    
    .history-result {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
    }
    
    .history-result-success {
        color: #00ffcc;
    }
    
    .history-result-failed {
        color: #ff3366;
    }
    
    .history-changes {
        margin-top: 5px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
    }
    
    /* Модалка результата атаки */
    .attack-result-modal .modal-content {
        max-width: 90%;
    }
    
    .attack-result-icon {
        text-align: center;
        font-size: 60px;
        margin-bottom: 20px;
    }
    
    .attack-result-icon.success {
        color: #00ffcc;
    }
    
    .attack-result-icon.failed {
        color: #ff3366;
    }
    
    .attack-result-message {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    
    .attack-details {
        text-align: center;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .attack-stats {
        background: rgba(255, 255, 255, 0.05);
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .attack-stat {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .attack-stat:last-child {
        border-bottom: none;
    }
    
    .attack-stat-label {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .attack-stat-value {
        font-weight: bold;
    }
    
    .attack-result-buttons {
        display: flex;
        gap: 10px;
    }
    
    /* Модалка нет энергии */
    .no-energy-modal .modal-content {
        max-width: 90%;
    }
    
    .no-energy-icon {
        text-align: center;
        font-size: 60px;
        color: #ffcc00;
        margin-bottom: 20px;
    }
    
    .no-energy-message {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .no-energy-timer {
        font-family: monospace;
        font-size: 24px;
        font-weight: bold;
        color: #ffcc00;
        padding: 10px;
        background: rgba(255, 204, 0, 0.1);
        border-radius: 8px;
        margin: 10px 0;
    }
    
    /* Добавьте эти стили в ваш основной CSS файл */
    
    /* Основные стили для нового результата атаки */
    .attack-result-container {
        max-width: 100%;
        animation: fadeIn 0.5s ease-out;
    }
    
    .attack-result-header {
        text-align: center;
        margin-bottom: 24px;
    }
    
    .attack-result-icon-container {
        margin-bottom: 16px;
    }
    
    .attack-result-icon {
        font-size: 64px;
        width: 100px;
        height: 100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    
    .attack-result-icon.success {
        background: linear-gradient(135deg, #00ffcc22, #00ffcc44);
        box-shadow: 0 0 30px #00ffcc66;
    }
    
    .attack-result-icon.failed {
        background: linear-gradient(135deg, #ff336622, #ff336644);
        box-shadow: 0 0 30px #ff336666;
    }
    
    .attack-result-title-container h2 {
        font-size: 28px;
        margin: 0 0 8px 0;
        background: linear-gradient(45deg, #fff, #00ffcc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .attack-result-title-container p {
        color: #aaa;
        font-size: 16px;
        margin: 0;
    }
    
    /* Отображение полученных очков */
    .activity-gain-display {
        background: linear-gradient(135deg, #00ffcc11, #00ffcc33);
        border: 2px solid #00ffcc44;
        border-radius: 20px;
        padding: 20px;
        margin: 20px 0;
        text-align: center;
        position: relative;
        overflow: hidden;
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.5s ease-out;
    }
    
    .activity-gain-display.animate {
        transform: scale(1);
        opacity: 1;
    }
    
    .activity-gain-label {
        font-size: 14px;
        color: #00ffcc;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }
    
    .activity-gain-value {
        font-size: 48px;
        font-weight: 800;
        background: linear-gradient(45deg, #00ffcc, #00ffaa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: pulseGlow 2s infinite;
    }
    
    .activity-gain-sparkles {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 50% 50%, #00ffcc22 0%, transparent 70%);
        animation: sparkle 3s infinite;
    }
    
    /* Прогресс бар с аватарками */
    .battle-progress-section {
        margin: 30px 0;
        padding: 20px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .avatars-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    
    .avatar-wrapper {
        position: relative;
        text-align: center;
        flex: 1;
        max-width: 120px;
    }
    
    .attacker-avatar .avatar {
        border-color: #00ffcc;
        box-shadow: 0 0 20px #00ffcc66;
    }
    
    .target-avatar .avatar {
        border-color: #ff3366;
        box-shadow: 0 0 20px #ff336666;
    }
    
    .avatar-border {
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border-radius: 50%;
        border: 2px dashed;
        animation: rotateBorder 10s linear infinite;
    }
    
    .attacker-avatar .avatar-border {
        border-color: #00ffcc44;
    }
    
    .target-avatar .avatar-border {
        border-color: #ff336644;
    }
    
    .power-value, .defense-value {
        font-size: 20px;
        font-weight: 700;
        margin: 10px 0 5px;
        color: white;
    }
    
    .power-label, .defense-label {
        font-size: 12px;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    /* Прогресс бар */
    .progress-bar-container {
        flex: 2;
        padding: 0 20px;
        position: relative;
    }
    
    .progress-bar {
        height: 16px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        margin: 15px 0 10px;
        display: flex;
    }
    
    .progress-attacker {
        background: linear-gradient(90deg, #00ffcc, #00ffaa);
        height: 100%;
        border-radius: 8px 0 0 8px;
        transition: width 2s ease-in-out;
        position: relative;
        z-index: 2;
    }
    
    .progress-target {
        background: linear-gradient(90deg, #ff3366, #ff6633);
        height: 100%;
        border-radius: 0 8px 8px 0;
        transition: width 2s ease-in-out;
        position: relative;
        z-index: 2;
    }
    
    .progress-indicator {
        position: absolute;
        top: -5px;
        width: 6px;
        height: 26px;
        background: white;
        border-radius: 3px;
        z-index: 3;
        display: none;
        box-shadow: 0 0 10px white;
    }
    
    .progress-indicator.pulse {
        animation: indicatorPulse 1s infinite;
    }
    
    .progress-labels {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #aaa;
        margin-top: 5px;
    }
    
    /* Анимации */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes bounceIn {
        0% { transform: scale(0.3); opacity: 0; }
        50% { transform: scale(1.05); }
        70% { transform: scale(0.9); }
        100% { transform: scale(1); opacity: 1; }
    }
    
    @keyframes pulseGlow {
        0%, 100% { text-shadow: 0 0 10px #00ffcc33; }
        50% { text-shadow: 0 0 20px #00ffcc66, 0 0 30px #00ffcc44; }
    }
    
    @keyframes sparkle {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.1); }
    }
    
    @keyframes rotateBorder {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    @keyframes indicatorPulse {
        0%, 100% { box-shadow: 0 0 10px white; }
        50% { box-shadow: 0 0 20px white, 0 0 30px #00ffcc; }
    }
    
    /* Контролы анимации */
    .battle-animation-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .animation-speed {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .speed-controls {
        display: flex;
        gap: 5px;
    }
    
    .speed-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #aaa;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .speed-btn.active {
        background: #00ffcc;
        color: black;
        border-color: #00ffcc;
    }
    
    /* Детали битвы */
    .battle-details {
        margin: 20px 0;
        padding: 15px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
    }
    
    .details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .detail-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .detail-icon {
        font-size: 24px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }
    
    .detail-content {
        display: flex;
        flex-direction: column;
    }
    
    .detail-label {
        font-size: 12px;
        color: #aaa;
    }
    
    .detail-value {
        font-size: 16px;
        font-weight: 600;
        color: white;
    }
    
    /* Кнопки действий */
    .attack-action-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 24px;
    }
    
    /* Кнопки для киберпространства (уникальные имена классов) */
    .cspace-btn {
        padding: 14px 20px;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        outline: none;
    }
    
    .cspace-btn-primary {
        background: linear-gradient(135deg, #00ffcc, #00ffaa);
        color: black;
    }
    
    .cspace-btn-secondary {
        background: linear-gradient(135deg, #ff3366, #ff6633);
        color: white;
    }
    
    .cspace-btn-outline {
        background: transparent;
        border: 2px solid rgba(255, 255, 255, 0.3);
        color: white;
    }
    
    .cspace-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(0, 255, 204, 0.3);
    }
    
    .cspace-btn-small {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    /* Эффект пульсации для победного цвета */
    .progress-attacker.pulse-victory {
        animation: victoryPulse 1.5s infinite;
    }
    
    @keyframes victoryPulse {
        0%, 100% { 
            box-shadow: inset 0 0 0 rgba(0, 255, 204, 0); 
        }
        50% { 
            box-shadow: inset 0 0 20px rgba(0, 255, 204, 0.5); 
        }
    }
    
    /* Медиа-запросы для мобильных */
    @media (max-width: 768px) {
        .avatars-container {
            flex-direction: column;
            gap: 20px;
        }
        
        .progress-bar-container {
            width: 100%;
            padding: 0;
        }
        
        .avatar-wrapper {
            max-width: 100%;
        }
        
        .activity-gain-value {
            font-size: 36px;
        }
        
        .battle-animation-controls {
            flex-direction: column;
            gap: 15px;
        }
        
        .attack-action-buttons {
            flex-direction: column;
        }
    }
    
    /* Компактное отображение полученных очков активности */
    .activity-gain-display {
        background: linear-gradient(135deg, rgba(0, 255, 204, 0.1), rgba(0, 255, 170, 0.2));
        border: 1px solid rgba(0, 255, 204, 0.3);
        border-radius: 12px;
        padding: 12px 16px;
        margin: 15px 0;
        position: relative;
        overflow: hidden;
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.5s ease-out;
    }
    
    .activity-gain-display.animate {
        transform: scale(1);
        opacity: 1;
    }
    
    .activity-gain-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .activity-gain-icon {
        font-size: 24px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 255, 204, 0.2);
        border-radius: 10px;
        color: #00ffcc;
    }
    
    .activity-gain-text {
        flex: 1;
    }
    
    .activity-gain-label {
        font-size: 12px;
        color: #00ffcc;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }
    
    .activity-gain-value {
        font-size: 24px;
        font-weight: 800;
        background: linear-gradient(45deg, #00ffcc, #00ffaa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    /* Эффект мерцания для значения */
    @keyframes valueGlow {
        0%, 100% { text-shadow: 0 0 5px rgba(0, 255, 204, 0.3); }
        50% { text-shadow: 0 0 15px rgba(0, 255, 204, 0.6), 0 0 20px rgba(0, 255, 204, 0.4); }
    }
    
    .activity-gain-value {
        animation: valueGlow 2s ease-in-out infinite;
    }
    
    /* Стили для аватарок и статистики киберпространства (уникальные имена) */
    .cspace-stats-display {
        text-align: center;
        margin-top: 8px;
    }
    
    .cspace-stat-value {
        font-size: 18px;
        font-weight: 700;
        color: white;
        margin-bottom: 2px;
    }
    
    .cspace-stat-label {
        font-size: 11px;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Эффекты победы/поражения */
    .victory-glow {
        animation: victoryGlow 1.5s ease-in-out infinite alternate;
        box-shadow: 0 0 20px rgba(0, 255, 204, 0.8) !important;
    }
    
    .defeated {
        filter: grayscale(0.7) brightness(0.7);
        opacity: 0.8;
    }
    
    @keyframes victoryGlow {
        from { box-shadow: 0 0 15px rgba(0, 255, 204, 0.6); }
        to { box-shadow: 0 0 25px rgba(0, 255, 204, 1), 0 0 35px rgba(0, 255, 204, 0.4); }
    }
    
    /* Пульсация прогресс бара победителя */
    .victory-pulse {
        animation: progressPulse 1.5s ease-in-out infinite;
    }
    
    @keyframes progressPulse {
        0%, 100% { box-shadow: inset 0 0 0 rgba(255, 255, 255, 0); }
        50% { box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.3); }
    }
    
    /* Переименованные классы для аватаров в битве */
    .battle-avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid;
        position: relative;
        z-index: 2;
        transition: all 0.3s ease;
    }
    
    .attacker-avatar .battle-avatar {
        border-color: #00ffcc;
        box-shadow: 0 0 20px #00ffcc66;
    }
    
    .target-avatar .battle-avatar {
        border-color: #ff3366;
        box-shadow: 0 0 20px #ff336666;
    }
    
    /* Переименованные классы для прогресс бара в битве */
    .battle-progress-bar {
        height: 16px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        margin: 15px 0 10px;
        display: flex;
    }
    
    .battle-progress-attacker {
        background: linear-gradient(90deg, #00ffcc, #00ffaa);
        height: 100%;
        border-radius: 8px 0 0 8px;
        transition: width 2s ease-in-out;
        position: relative;
        z-index: 2;
    }
    
    .battle-progress-target {
        background: linear-gradient(90deg, #ff3366, #ff6633);
        height: 100%;
        border-radius: 0 8px 8px 0;
        transition: width 2s ease-in-out;
        position: relative;
        z-index: 2;
    }
    
    .battle-progress-indicator {
        position: absolute;
        top: -5px;
        width: 6px;
        height: 26px;
        background: white;
        border-radius: 3px;
        z-index: 3;
        display: none;
        box-shadow: 0 0 10px white;
    }
    
    .battle-progress-indicator.pulse {
        animation: indicatorPulse 1s infinite;
    }
    
    @keyframes indicatorPulse {
        0%, 100% { box-shadow: 0 0 10px white; }
        50% { box-shadow: 0 0 20px white, 0 0 30px #00ffcc; }
    }
    
    /* Компактное отображение полученных очков активности */
    .activity-gain-display {
        background: linear-gradient(135deg, rgba(0, 255, 204, 0.1), rgba(0, 255, 170, 0.2));
        border: 1px solid rgba(0, 255, 204, 0.3);
        border-radius: 12px;
        padding: 12px 16px;
        margin: 15px 0;
        position: relative;
        overflow: hidden;
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.5s ease-out;
    }
    
    .activity-gain-display.animate {
        transform: scale(1);
        opacity: 1;
    }
    
    .activity-gain-content {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .activity-gain-icon {
        font-size: 24px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 255, 204, 0.2);
        border-radius: 10px;
        color: #00ffcc;
    }
    
    .activity-gain-text {
        flex: 1;
    }
    
    .activity-gain-label {
        font-size: 12px;
        color: #00ffcc;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }
    
    .activity-gain-value {
        font-size: 24px;
        font-weight: 800;
        background: linear-gradient(45deg, #00ffcc, #00ffaa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: valueGlow 2s ease-in-out infinite;
    }
    
    @keyframes valueGlow {
        0%, 100% { text-shadow: 0 0 5px rgba(0, 255, 204, 0.3); }
        50% { text-shadow: 0 0 15px rgba(0, 255, 204, 0.6), 0 0 20px rgba(0, 255, 204, 0.4); }
    }
    
    /* Стили для аватарок и статистики */
    .stats-display {
        text-align: center;
        margin-top: 8px;
    }
    
    .stat-value {
        font-size: 18px;
        font-weight: 700;
        color: white;
        margin-bottom: 2px;
    }
    
    .stat-label {
        font-size: 11px;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Эффекты победы/поражения */
    .victory-glow {
        animation: victoryGlow 1.5s ease-in-out infinite alternate;
        box-shadow: 0 0 20px rgba(0, 255, 204, 0.8) !important;
    }
    
    .defeated {
        filter: grayscale(0.7) brightness(0.7);
        opacity: 0.8;
    }
    
    @keyframes victoryGlow {
        from { box-shadow: 0 0 15px rgba(0, 255, 204, 0.6); }
        to { box-shadow: 0 0 25px rgba(0, 255, 204, 1), 0 0 35px rgba(0, 255, 204, 0.4); }
    }
    
    /* Пульсация прогресс бара победителя */
    .victory-pulse {
        animation: progressPulse 1.5s ease-in-out infinite;
    }
    
    @keyframes progressPulse {
        0%, 100% { box-shadow: inset 0 0 0 rgba(255, 255, 255, 0); }
        50% { box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.3); }
    }
    
    /* Консоль хакера */
    .hacker-console-modal .modal-content {
        background: #000;
        color: #00ff00;
        border: 1px solid #00ff00;
        border-radius: 8px;
        max-width: 95%;
        max-height: 80vh;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        font-family: 'Courier New', monospace;
        overflow: hidden;
        box-shadow: 0 0 30px rgba(0, 255, 0, 0.3);
    }
    
    .hacker-console-header {
        padding: 10px 15px;
        background: rgba(0, 255, 0, 0.05);
        border-bottom: 1px solid #00ff00;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .console-title {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .console-icon {
        font-size: 18px;
    }
    
    .console-title h3 {
        margin: 0;
        color: #00ff00;
        font-size: 14px;
        font-weight: normal;
    }
    
    .console-status {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #00ff00;
        animation: pulse 1.5s infinite;
    }
    
    .status-text {
        color: #00ff00;
        font-size: 11px;
    }
    
    .hacker-console-body {
        flex: 1;
        padding: 15px;
        overflow-y: auto;
        position: relative;
        background: rgba(0, 0, 0, 0.95);
        min-height: 200px;
        max-height: 300px;
    }
    
    .console-output {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .console-line {
        margin-bottom: 5px;
        opacity: 0;
        animation: fadeIn 0.3s forwards;
        white-space: pre-wrap;
        word-break: break-word;
    }
    
    .line-prefix {
        color: #00ff00;
        margin-right: 8px;
        font-weight: bold;
    }
    
    .line-text {
        color: #00ff00;
    }
    
    .console-line.system {
        color: #ffff00;
    }
    
    .console-line.success {
        color: #00ff00;
    }
    
    .console-line.error {
        color: #ff0000;
    }
    
    .console-line.warning {
        color: #ff9900;
    }
    
    .console-line.highlight {
        color: #00ffff;
        font-weight: bold;
    }
    
    .console-input-line {
        margin-top: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: bold;
    }
    
    .input-prefix {
        color: #00ffff;
        font-size: 12px;
    }
    
    .typing-cursor {
        width: 6px;
        height: 14px;
        background: #00ff00;
        animation: blink 1s infinite;
    }
    
    /* Анимация сканирования */
    .scan-animation {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
    }
    
    .scan-line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, #00ff00, transparent);
        animation: scan 3s linear infinite;
        box-shadow: 0 0 10px #00ff00;
    }
    
    .hacker-console-footer {
        padding: 12px 15px;
        background: rgba(0, 255, 0, 0.03);
        border-top: 1px solid #00ff00;
    }
    
    .progress-container {
        margin-bottom: 10px;
    }
    
    .progress-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        color: #00ff00;
        font-size: 11px;
    }
    
    .progress-bar {
        height: 6px;
        background: rgba(0, 255, 0, 0.1);
        border-radius: 3px;
        overflow: hidden;
    }
    
    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #00ff00, #00cc00);
        width: 0%;
        transition: width 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, 
                    transparent, 
                    rgba(255, 255, 255, 0.4), 
                    transparent);
        animation: shimmer 2s infinite;
    }
    
    .console-stats {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }
    
    .console-controls {
        text-align: center;
    }
    
    .skip-btn {
        background: transparent;
        border: 1px solid #00ff00;
        color: #00ff00;
        padding: 6px 12px;
        font-size: 11px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        font-family: 'Courier New', monospace;
    }
    
    .skip-btn:hover {
        background: rgba(0, 255, 0, 0.1);
    }
    
    /* Анимации */
    @keyframes blink {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0; }
    }
    
    @keyframes scan {
        0% { top: 0; }
        100% { top: 100%; }
    }
    
    @keyframes shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    
    /* Эффект глюка */
    .glitch {
        position: relative;
        animation: glitch 0.3s;
    }
    
    .glitch-effect {
        animation: glitch 0.3s;
    }
    
    @keyframes glitch {
        0% { transform: translate(0); filter: hue-rotate(0); }
        20% { transform: translate(-1px, 1px); filter: hue-rotate(90deg); }
        40% { transform: translate(-1px, -1px); filter: hue-rotate(180deg); }
        60% { transform: translate(1px, 1px); filter: hue-rotate(270deg); }
        80% { transform: translate(1px, -1px); filter: hue-rotate(360deg); }
        100% { transform: translate(0); filter: hue-rotate(0); }
    }
    
    /* Добавляем в CSS файл или встроенные стили */
    
    /* Аватар команды в header */
    .team-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #8774e1, #6d5dc9);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border: 3px solid rgba(255, 255, 255, 0.1);
        flex-shrink: 0;
    }
    
    .team-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    
    .team-avatar-text {
        font-size: 24px;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
    }
    
    /* Плейсхолдер аватарки */
    .avatar-placeholder {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: linear-gradient(135deg, #8774e1, #6d5dc9);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    
    .placeholder-text {
        font-size: 36px;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
    }
    
    /* Предпросмотр аватарки */
    .current-avatar-img,
    .new-avatar-img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid rgba(255, 255, 255, 0.2);
        display: block;
        margin: 0 auto;
    }
    
    /* Модалка аватарки */
    .change-avatar-modal {
        max-width: 400px;
    }
    
    .avatar-preview {
        text-align: center;
        margin: 15px 0;
    }
    
    .new-avatar-preview {
        text-align: center;
        margin: 20px 0;
    }
    
    /* Бейджи стоимости */
    .free-badge {
        background: linear-gradient(45deg, #10b981, #059669);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
        text-align: center;
        display: inline-block;
    }
    
    .paid-badge {
        background: linear-gradient(45deg, #f59e0b, #d97706);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
        text-align: center;
        display: inline-block;
    }
    
    /* Инструкции */
    .instructions-list {
        padding-left: 20px;
        margin: 15px 0;
    }
    
    .instructions-list li {
        margin-bottom: 8px;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .avatar-instructions {
        background: rgba(0, 0, 0, 0.2);
        padding: 15px;
        border-radius: 10px;
        margin: 15px 0;
    }
    
    .avatar-instructions h3 {
        margin-top: 0;
        margin-bottom: 10px;
        color: white;
        font-size: 16px;
    }
    
    /* Стили для оверлея выбора режима атаки (упрощенный) */
    .attack-mode-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10050;
        animation: fadeIn 0.3s ease-out;
        padding: 20px;
        cursor: pointer; /* Курсор указывает что можно кликнуть на фон */
    }
    
    .attack-mode-buttons {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 400px;
        animation: slideUp 0.4s ease-out;
    }
    
    .attack-mode-btn {
        width: 100%;
        padding: 25px 20px;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        color: white;
        text-align: left;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 20px;
        border: none;
        outline: none;
        position: relative;
        overflow: hidden;
    }
    
    .attack-mode-btn:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
    
    .attack-mode-btn:active {
        transform: translateY(-1px);
    }
    
    .attack-mode-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .attack-mode-btn.quick-attack {
        border-color: rgba(0, 255, 204, 0.3);
    }
    
    .attack-mode-btn.quick-attack:hover:not(:disabled) {
        border-color: rgba(0, 255, 204, 0.6);
        box-shadow: 0 10px 25px rgba(0, 255, 204, 0.2);
    }
    
    .attack-mode-btn.target-scan {
        border-color: rgba(255, 204, 0, 0.3);
    }
    
    .attack-mode-btn.target-scan:hover:not(:disabled) {
        border-color: rgba(255, 204, 0, 0.6);
        box-shadow: 0 10px 25px rgba(255, 204, 0, 0.2);
    }
    
    .attack-mode-icon {
        font-size: 36px;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        flex-shrink: 0;
    }
    
    .quick-attack .attack-mode-icon {
        background: rgba(0, 255, 204, 0.2);
        color: #00ffcc;
    }
    
    .target-scan .attack-mode-icon {
        background: rgba(255, 204, 0, 0.2);
        color: #ffcc00;
    }
    
    .attack-mode-text {
        flex: 1;
        text-align: left;
    }
    
    .attack-mode-title {
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 5px;
        color: white;
    }
    
    .attack-mode-subtitle {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.3;
    }
    
    /* Стили для сканера (упрощенные) */
    .scanner-modal .modal-content {
        max-width: 95%;
        max-height: 85%;
        background: #1a1a2e;
        border: 1px solid rgba(255, 255, 255, 0.2);
        width: 500px;
        overflow: hidden;
    }
    
    /* Убрали .scanner-info блок */
    
    .search-section {
        margin: 20px 20px 15px;
    }
    
    .search-input-container {
        position: relative;
    }
    
    #player-search-input {
        width: 100%;
        padding: 15px 45px 15px 15px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        color: white;
        font-size: 1rem;
        outline: none;
        font-family: inherit;
    }
    
    #player-search-input:focus {
        border-color: #00ffcc;
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
    }
    
    #player-search-input:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: rgba(255, 255, 255, 0.03);
    }
    
    .search-icon {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255, 255, 255, 0.5);
        font-size: 1.2rem;
        pointer-events: none;
    }
    
    .scanner-results {
        margin: 0 20px 20px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 10px;
        padding: 15px;
        max-height: 400px;
        min-height: 250px;
        overflow-y: auto;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .results-header {
        display: flex;
        justify-content: space-between;
        color: white;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 0.95rem;
    }
    
    .results-count {
        color: #00ffcc;
        font-weight: 600;
    }
    
    .players-list {
        min-height: 200px;
        position: relative;
    }
    
    .players-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .placeholder-message {
        text-align: center;
        padding: 40px 20px;
        color: rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }
    
    .placeholder-icon {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.5;
    }
    
    .placeholder-text {
        font-size: 0.95rem;
        line-height: 1.4;
    }
    
    .placeholder-text small {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.4);
    }
    
    .no-results {
        text-align: center;
        padding: 40px 20px;
        color: rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
    }
    
    .no-results-icon {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.5;
    }
    
    .no-results-text {
        font-size: 0.95rem;
        line-height: 1.4;
    }
    
    .loading-more {
        text-align: center;
        padding: 15px;
        color: rgba(255, 255, 255, 0.6);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .loading-spinner {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #00ffcc;
        border-radius: 50%;
        animation: cast-spin 1s linear infinite;
    }
    
    .loading-text {
        font-size: 0.9rem;
    }
    
    .selected-target-section {
        margin: 20px;
        padding: 15px;
        background: rgba(0, 255, 204, 0.05);
        border-radius: 10px;
        border: 1px solid rgba(0, 255, 204, 0.2);
    }
    
    .selected-header {
        color: #00ffcc;
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .selected-target-display {
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        margin-bottom: 15px;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.7);
    }
    
    #attack-selected-btn {
        width: 100%;
        padding: 15px;
        background: linear-gradient(135deg, #ff3366 0%, #ff0033 100%);
        border: 2px solid #ff3366;
        border-radius: 12px;
        color: white;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border: none;
        outline: none;
    }
    
    #attack-selected-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(255, 51, 102, 0.4);
    }
    
    #attack-selected-btn:active:not(:disabled) {
        transform: translateY(0);
    }
    
    #attack-selected-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    /* Анимации */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideUp {
        from { 
            opacity: 0;
            transform: translateY(20px);
        }
        to { 
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes cast-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    @media (max-width: 768px) {
        .attack-mode-buttons {
            max-width: 95%;
        }
        
        .attack-mode-btn {
            padding: 20px 15px;
            gap: 15px;
        }
        
        .attack-mode-icon {
            width: 50px;
            height: 50px;
            font-size: 30px;
        }
        
        .scanner-modal .modal-content {
            max-width: 98%;
            width: 98%;
            margin: 10px;
        }
    }
    
    /* ===== СТИЛИ ДЛЯ ИГРОКОВ В ПОИСКЕ ===== */
    
    /* Контейнер для списка игроков */
    .players-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    /* Карточка игрока */
    .player-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 12px 15px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
    .player-item:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    .player-item.selected {
        background: rgba(0, 255, 204, 0.1);
        border-color: rgba(0, 255, 204, 0.3);
        box-shadow: 0 0 15px rgba(0, 255, 204, 0.2);
    }
    
    /* Аватар игрока */
    .player-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        border: 2px solid rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
    }
    
    .player-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .player-item:hover .player-avatar img {
        transform: scale(1.1);
    }
    
    /* Информация об игроке */
    .player-info {
        flex: 1;
        min-width: 0;
    }
    
    .player-name {
        font-size: 16px;
        font-weight: 600;
        color: white;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .player-stats {
        display: flex;
        gap: 20px;
        font-size: 13px;
    }
    
    .player-stats .stat {
        display: flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .stat-icon {
        font-size: 14px;
        opacity: 0.8;
    }
    
    .stat-value {
        font-weight: 500;
        font-family: 'Courier New', monospace;
    }
    
    .stat.defense {
        color: #ffcc00;
    }
    
    .stat.defense .stat-icon {
        color: #ffcc00;
    }
    
    .stat.activity {
        color: #00ffcc;
    }
    
    .stat.activity .stat-icon {
        color: #00ffcc;
    }
    
    /* Кнопка выбора */
    .select-player-btn {
        padding: 8px 20px;
        background: linear-gradient(135deg, #00ffcc, #00ffaa);
        border: none;
        border-radius: 10px;
        color: black;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
        white-space: nowrap;
        min-width: 80px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .select-player-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 255, 204, 0.3);
    }
    
    .select-player-btn:active:not(:disabled) {
        transform: translateY(0);
    }
    
    .select-player-btn.disabled {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.5);
        cursor: not-allowed;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .select-player-btn.disabled:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Индикатор времени ожидания */
    .cooldown-indicator {
        font-size: 12px;
        color: #ff6b6b;
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    /* Стили для выбранного игрока */
    .selected-player {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 10px;
        background: rgba(0, 255, 204, 0.05);
        border-radius: 10px;
        border: 1px solid rgba(0, 255, 204, 0.2);
    }
    
    .selected-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #00ffcc;
        box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
        overflow: hidden;
    }
    
    .selected-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .selected-details {
        flex: 1;
    }
    
    .selected-name {
        font-size: 16px;
        font-weight: 600;
        color: white;
        margin-bottom: 5px;
    }
    
    .selected-stats {
        display: flex;
        gap: 20px;
        font-size: 13px;
    }
    
    .selected-stats span {
        display: flex;
        align-items: center;
        gap: 5px;
        color: rgba(255, 255, 255, 0.8);
    }
    
    .selected-stats .defense-stat {
        color: #ffcc00;
    }
    
    .selected-stats .activity-stat {
        color: #00ffcc;
    }
    
    /* Анимация выбора */
    @keyframes selectPulse {
        0% { box-shadow: 0 0 0 0 rgba(0, 255, 204, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(0, 255, 204, 0); }
        100% { box-shadow: 0 0 0 0 rgba(0, 255, 204, 0); }
    }
    
    .player-item.selected .select-player-btn {
        animation: selectPulse 1.5s ease-in-out;
    }
    
    /* Эффект свечения для выбранного */
    .player-item.selected::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent, rgba(0, 255, 204, 0.1), transparent);
        z-index: -1;
        opacity: 0.5;
    }
    
    /* Адаптивность */
    @media (max-width: 768px) {
        .player-item {
            padding: 10px 12px;
            gap: 12px;
        }
        
        .player-avatar {
            width: 45px;
            height: 45px;
        }
        
        .player-name {
            font-size: 15px;
        }
        
        .player-stats {
            gap: 15px;
            font-size: 12px;
        }
        
        .select-player-btn {
            padding: 6px 15px;
            font-size: 13px;
            min-width: 70px;
        }
        
        .selected-avatar {
            width: 45px;
            height: 45px;
        }
        
        .selected-name {
            font-size: 15px;
        }
        
        .selected-stats {
            gap: 15px;
            font-size: 12px;
        }
    }
    
    @media (max-width: 480px) {
        .player-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            padding: 15px;
        }
        
        .player-avatar {
            width: 60px;
            height: 60px;
        }
        
        .player-info {
            width: 100%;
        }
        
        .player-stats {
            justify-content: space-between;
        }
        
        .select-player-btn {
            width: 100%;
            padding: 10px;
        }
        
        .selected-player {
            flex-direction: column;
            text-align: center;
        }
        
        .selected-details {
            text-align: center;
        }
        
        .selected-stats {
            justify-content: center;
        }
    }
    
    /* Стили для пустого состояния */
    .placeholder-message {
        text-align: center;
        padding: 40px 20px;
        color: rgba(255, 255, 255, 0.5);
    }
    
    .placeholder-icon {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.3;
    }
    
    .placeholder-text {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    
    .placeholder-text small {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.4);
        display: block;
        margin-top: 5px;
    }
    
    /* Стили для "нет результатов" */
    .no-results {
        text-align: center;
        padding: 40px 20px;
        color: rgba(255, 255, 255, 0.5);
    }
    
    .no-results-icon {
        font-size: 48px;
        margin-bottom: 15px;
        opacity: 0.3;
    }
    
    .no-results-text {
        font-size: 16px;
        line-height: 1.5;
    }
    
    /* Индикатор загрузки */
    .loading-more {
        text-align: center;
        padding: 20px;
        color: rgba(255, 255, 255, 0.6);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .loading-spinner {
        width: 24px;
        height: 24px;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-top-color: #00ffcc;
        border-radius: 50%;
        margin: 0 auto 10px;
        animation: spin 1s linear infinite;
    }
    
    .loading-text {
        font-size: 14px;
    }
    
    /* Анимация появления игроков */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .player-item {
        animation: fadeInUp 0.3s ease-out;
    }
    
    /* Градиентный фон для премиум игроков */
    .player-item.premium {
        background: linear-gradient(135deg, 
            rgba(255, 204, 0, 0.05), 
            rgba(255, 153, 0, 0.1)
        );
        border-color: rgba(255, 204, 0, 0.3);
    }
    
    .player-item.premium .player-avatar {
        border-color: rgba(255, 204, 0, 0.5);
    }
    
    /* ===== Updated Minimalistic Black & White Tutorial Styles ===== */
    .tutorial-overlay {
      position: fixed;
      z-index: 2000;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0);
      pointer-events: auto;
      transition: background 0.3s ease;
    }
    
    .tutorial-overlay.show {
      background: rgba(0, 0, 0, 0.92);
    }
    
    /* Smart Positioning Dialog */
    .tutorial-dialog {
      position: absolute;
      z-index: 2002;
      background: #000;
      border: 1.5px solid #fff;
      border-radius: 12px;
      padding: 20px;
      max-width: min(340px, 85vw);
      min-width: min(300px, 75vw);
      width: auto;
      box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 8px 24px rgba(255, 255, 255, 0.03);
      animation: tutorialAppear 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      pointer-events: none;
      backdrop-filter: none;
      overflow: hidden;
      
      /* Smart positioning constraints */
      max-height: 90vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    /* Compact layout - less empty space */
    .tutorial-dialog::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, #000 0%, #fff 50%, #000 100%);
    }
    
    /* Larger, Bolder Text - Fills More Space */
    .tutorial-text {
      color: #fff;
      font-size: 17px;
      line-height: 1.4;
      text-align: center;
      margin: 0 0 18px 0;
      font-weight: 500;
      letter-spacing: 0.01em;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      padding: 0;
      max-width: 100%;
      word-wrap: break-word;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    
    /* Removed steps indicator entirely */
    .tutorial-steps {
      display: none;
    }
    
    /* Keep arrow but make it more subtle */
    .tutorial-arrow {
      position: absolute;
      z-index: 2001;
      width: 20px;
      height: 20px;
      background: #fff;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L2 22h20L12 2z' fill='white'/%3E%3C/svg%3E");
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      pointer-events: none;
      animation: arrowFloat 2s ease-in-out infinite;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
      opacity: 0.9;
    }
    
    @keyframes arrowFloat {
      0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
      }
      50% {
        transform: translate(-50%, -50%) translateY(-3px);
      }
    }
    
    /* Enhanced Highlight Effect for Important Elements */
    .tutorial-highlight {
      position: relative;
      z-index: 2003 !important;
      box-shadow: 
        0 0 0 3px #fff,
        0 0 0 6px rgba(255, 255, 255, 0.15),
        0 6px 25px rgba(255, 255, 255, 0.25);
      border-radius: inherit;
      animation: highlightGlow 2.5s ease-in-out infinite;
    }
    
    @keyframes highlightGlow {
      0%, 100% {
        box-shadow: 
          0 0 0 3px #fff,
          0 0 0 6px rgba(255, 255, 255, 0.15),
          0 6px 25px rgba(255, 255, 255, 0.25);
      }
      50% {
        box-shadow: 
          0 0 0 3px #fff,
          0 0 0 8px rgba(255, 255, 255, 0.2),
          0 8px 35px rgba(255, 255, 255, 0.3);
      }
    }
    
    /* Enhanced Cutout for DAEX Highlight */
    .tutorial-highlight-cutout.daex-highlight {
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 12px;
    }
    
    .tutorial-highlight-cutout {
      position: fixed;
      border-radius: 8px;
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.92);
      pointer-events: none;
      z-index: 2001;
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    /* Minimalistic Skip Button - Less Prominent */
    .tutorial-skip-btn {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: #888;
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      z-index: 2004;
      transition: all 0.2s ease;
      pointer-events: auto;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      backdrop-filter: blur(10px);
      background: rgba(0, 0, 0, 0.4);
      opacity: 0.8;
      
      /* Stay within viewport */
      left: clamp(50%, 50px, calc(100vw - 150px));
      transform: translateX(-50%);
    }
    
    .tutorial-skip-btn:hover {
      background: rgba(255, 255, 255, 0.05);
      color: #aaa;
      border-color: rgba(255, 255, 255, 0.25);
      opacity: 1;
    }
    
    .tutorial-skip-btn:active {
      transform: translateX(-50%) scale(0.98);
    }
    
    /* Smart Positioning Helpers */
    .dialog-position-top {
      top: 20px !important;
      bottom: auto !important;
    }
    
    .dialog-position-bottom {
      bottom: 20px !important;
      top: auto !important;
    }
    
    .dialog-position-center {
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
    
    .dialog-position-left {
      left: 20px !important;
      right: auto !important;
    }
    
    .dialog-position-right {
      right: 20px !important;
      left: auto !important;
    }
    
    /* Mobile Optimization - Adjusted for Larger Text */
    @media (max-width: 768px) {
      .tutorial-dialog {
        padding: 18px;
        border-radius: 10px;
        max-width: 92vw;
        min-width: 85vw;
        margin: 0 auto;
        
        /* Ensure dialog stays within viewport */
        left: clamp(50%, 10px, calc(100vw - 10px));
        transform: translateX(-50%);
        right: auto;
      }
      
      .tutorial-text {
        font-size: 16px;
        line-height: 1.4;
        margin-bottom: 16px;
      }
      
      .tutorial-skip-btn {
        bottom: 15px;
        padding: 7px 18px;
        font-size: 11px;
        left: clamp(50%, 30px, calc(100vw - 130px));
      }
      
      /* Adjust arrow for mobile */
      .tutorial-arrow {
        width: 18px;
        height: 18px;
      }
    }
    
    /* Small Screens */
    @media (max-width: 375px) {
      .tutorial-dialog {
        padding: 16px;
        border-radius: 8px;
        max-width: 94vw;
        min-width: 90vw;
      }
      
      .tutorial-text {
        font-size: 15px;
        line-height: 1.35;
        margin-bottom: 14px;
      }
      
      .tutorial-skip-btn {
        bottom: 12px;
        padding: 6px 16px;
        font-size: 10px;
      }
    }
    
    /* Extra Small Screens */
    @media (max-width: 320px) {
      .tutorial-dialog {
        padding: 14px;
        max-width: 96vw;
        min-width: 92vw;
      }
      
      .tutorial-text {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 12px;
      }
      
      .tutorial-skip-btn {
        bottom: 10px;
        padding: 5px 14px;
        font-size: 10px;
      }
    }
    
    /* Landscape Mode */
    @media (max-height: 500px) and (orientation: landscape) {
      .tutorial-dialog {
        max-height: 80vh;
        padding: 12px;
      }
      
      .tutorial-text {
        font-size: 14px;
        margin-bottom: 10px;
      }
      
      .tutorial-skip-btn {
        bottom: 10px;
        padding: 5px 12px;
        font-size: 10px;
      }
    }
    
    /* Smooth Animation for Dialog Positioning */
    .tutorial-dialog {
      transition: 
        left 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        top 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        right 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    /* Scrollbar for dialog if needed */
    .tutorial-dialog::-webkit-scrollbar {
      width: 4px;
    }
    
    .tutorial-dialog::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 2px;
    }
    
    .tutorial-dialog::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 2px;
    }
    
    /* Prevent dialog from going off-screen */
    .tutorial-dialog.force-viewport {
      left: max(10px, min(calc(100vw - 350px), 50%)) !important;
      top: max(10px, min(calc(100vh - 200px), 50%)) !important;
      transform: translate(-50%, -50%) !important;
    }
    
    /* Добавьте в ваш CSS файл */
    /* Специальные стили для туториала в киберпространстве */
    .cyberspace-modal .tutorial-dialog {
        z-index: 10000 !important; /* Выше чем сама модалка */
    }
    
    .cyberspace-modal .tutorial-highlight-cutout {
        z-index: 9999 !important;
    }
    
    /* Для кнопки атаки в туториале */
    #attack-btn.tutorial-highlight {
        animation: highlightGlowAttack 2.5s ease-in-out infinite;
    }
    
    @keyframes highlightGlowAttack {
        0%, 100% {
            box-shadow: 
                0 0 0 3px #fff,
                0 0 0 6px rgba(255, 255, 255, 0.15),
                0 6px 25px rgba(255, 255, 255, 0.25),
                0 0 20px rgba(255, 255, 255, 0.2);
        }
        50% {
            box-shadow: 
                0 0 0 3px #fff,
                0 0 0 8px rgba(255, 255, 255, 0.2),
                0 8px 35px rgba(255, 255, 255, 0.3),
                0 0 25px rgba(255, 255, 255, 0.25);
        }
    }
    
    .tutorial-dialog {
      /* Убираем animation: tutorialAppear */
      transition: 
        left 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        top 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        right 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        bottom 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

/* === VERSUS КНОПКА (КРАСИВЫЙ ВИД) === */
.versus-container {
    position: fixed;
    left: 20px;
    bottom: 80px; /* Такая же высота как у киберпространства */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 999; /* Такой же z-index как у киберпространства */
    gap: 5px; /* Уменьшил отступ между текстом и кнопкой */
    /* display: none; УБИРАЕМ ЭТО СТРОЧКУ */
}

/* ДОБАВЛЯЕМ новое правило */
#main-menu .versus-container {
    display: flex !important; /* Принудительно показываем, когда открыта главная */
}

/* Показываем только когда body имеет класс main-page */
body.main-page .versus-container {
    display: flex;
}

/* Текст над кнопкой - ОДНА СТРОЧКА, ближе к кнопке */
.versus-label {
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
    white-space: nowrap; /* Важно: запрещаем перенос строк */
    margin: 0; /* Убираем все отступы */
    padding: 0;
    line-height: 1; /* Минимальная высота строки */
}

/* Круглая кнопка - красивый вид с анимациями */
.versus-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    border: 3px solid #ffd700;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.4),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0; /* Убираем отступы у кнопки */
}

.versus-btn:hover {
    transform: scale(1.05);
    box-shadow: 
        0 0 30px rgba(255, 215, 0, 0.6),
        inset 0 0 10px rgba(255, 215, 0, 0.2);
    border-color: #ffed4e;
}

.versus-btn:active {
    transform: scale(0.95);
}

/* Картинка занимает ВСЮ кнопку */
.versus-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка растягивается на всю площадь */
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    transition: transform 0.3s ease;
}

.versus-btn:hover .versus-image {
    transform: rotate(15deg);
}

/* Анимированный градиентный ободок */
.versus-btn::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffd700);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.versus-btn:hover::before {
    opacity: 0.3;
}

/* Анимация пульсации для привлечения внимания */
@keyframes versus-pulse {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 0.4),
            inset 0 0 20px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 0.6),
            inset 0 0 15px rgba(255, 215, 0, 0.1);
    }
}

/* Добавляем пульсацию при первом появлении */
.versus-btn.first-appearance {
    animation: versus-pulse 2s ease-in-out 3;
}

/* Анимация появления кнопки */
@keyframes versus-appear {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Применяем анимацию при показе */
body.main-page .versus-container {
    animation: versus-appear 0.5s ease-out;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .versus-container {
        left: 10px;
        bottom: 80px;
        gap: 4px; /* Еще меньше отступ на мобильных */
    }
    
    .versus-label {
        font-size: 11px; /* Немного меньше текст на мобильных */
    }
    
    .versus-btn {
        width: 70px;
        height: 70px;
    }
}

/* === МОДАЛЬНОЕ ОКНО VERSUS === */
.versus-modal .modal-content {
    width: 100%;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    background: #000000;
    position: relative;
    overflow: hidden;
    border: none;
}

.versus-close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #ffd700;
    color: #ffd700;
    font-size: 24px;
    z-index: 1001;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.versus-close-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: rotate(90deg);
}

/* === ФОНОВЫЕ ГЕОМЕТРИЧЕСКИЕ ФИГУРЫ === */
.versus-background {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Круги */
.yellow-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #ffd700;
    opacity: 0.1;
    animation: float 20s infinite linear;
}

.circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.circle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    right: -50px;
    border-width: 3px;
    opacity: 0.15;
    animation-delay: -10s;
}

/* Квадраты */
.yellow-square {
    position: absolute;
    border: 2px solid #ffd700;
    opacity: 0.08;
    animation: rotate 30s infinite linear;
}

.square-1 {
    width: 150px;
    height: 150px;
    top: 20%;
    right: 10%;
    animation-delay: -5s;
}

.square-2 {
    width: 100px;
    height: 100px;
    bottom: 30%;
    left: 15%;
    opacity: 0.12;
    animation-delay: -15s;
}

/* Треугольники */
.yellow-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    opacity: 0.1;
    animation: float 25s infinite linear reverse;
}

.triangle-1 {
    border-width: 0 75px 130px 75px;
    border-color: transparent transparent #ffd700 transparent;
    top: 15%;
    left: 20%;
    animation-delay: -7s;
}

.triangle-2 {
    border-width: 130px 75px 0 75px;
    border-color: #ffd700 transparent transparent transparent;
    bottom: 20%;
    right: 20%;
    opacity: 0.15;
    animation-delay: -17s;
}

/* Линии */
.yellow-line {
    position: absolute;
    background: #ffd700;
    opacity: 0.05;
    animation: slide 20s infinite linear;
}

.line-1 {
    width: 400px;
    height: 2px;
    top: 50%;
    left: -400px;
    animation-delay: -3s;
}

/* Анимации */
@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(100px, 100px) rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(100vw + 400px));
    }
}

/* === КОНТЕНТ VERSUS === */
.versus-content {
    position: relative;
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.versus-logo {
    text-align: center;
    animation: pulse 2s infinite;
}

.versus-logo img {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.7));
    margin-bottom: 20px;
}

.versus-logo h1 {
    color: #ffd700;
    font-size: 2.5rem;
    margin: 0 0 10px 0;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    letter-spacing: 2px;
}

.coming-soon {
    color: rgba(255, 215, 0, 0.7);
    font-size: 1.2rem;
    font-style: italic;
    animation: blink 3s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.5;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .versus-container {
        left: 10px;
        top: 200px;
        width: 80px;
    }
    
    .versus-btn {
        width: 70px;
        height: 70px;
    }
    
    .versus-image {
        width: 40px;
        height: 40px;
    }
    
    .versus-logo h1 {
        font-size: 2rem;
    }
    
    .circle-1 {
        width: 200px;
        height: 200px;
    }
    
    .square-1 {
        width: 100px;
        height: 100px;
    }
}

/* === СТИЛИ ДЛЯ VERSUS МОДАЛКИ === */

/* Основная кнопка "НАЧАТЬ БИТВУ" */
.versus-main-btn {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(145deg, #000000, #1a1a1a);
    border: 4px solid #ffd700;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
    color: #ffd700;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    position: relative;
}

.versus-main-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.7);
    border-color: #ffed4e;
}

/* Кнопка "Как считается победа?" */
.versus-info-btn {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 25px;
    padding: 10px 20px;
    color: #ffd700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    z-index: 1001;
}

.versus-info-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: rgba(255, 215, 0, 0.5);
}

/* Контейнер с информацией */
.victory-info-content {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    max-width: 500px;
    z-index: 1001;
    position: relative;
}

.victory-info-text {
    color: white;
    line-height: 1.5;
}

.victory-info-text strong {
    color: #ffd700;
}

.victory-info-text small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* Кнопка закрытия информации */
.close-info-btn {
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 8px;
    padding: 8px 20px;
    color: #ffd700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 15px auto 0 auto;
}

.close-info-btn:hover {
    background: rgba(255, 215, 0, 0.3);
}

/* Адаптивность */
@media (max-width: 768px) {
    .versus-main-btn {
        width: 200px;
        height: 200px;
        font-size: 1.2rem;
    }
    
    .victory-info-content {
        margin: 15px;
        padding: 15px;
    }
}

/* === СТИЛИ ДЛЯ ТЕКСТА С ОБЪЯСНЕНИЕМ VERSUS === */

/* Оверлей для объяснения (полный экран) */
.victory-info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    padding: 20px;
}

.victory-info-overlay.show {
    opacity: 1;
}

/* Контейнер с контентом */
.victory-info-container {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    border-radius: 15px;
    padding: 30px;
    max-width: 800px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.2);
}

/* Шапка */
.victory-info-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.victory-info-header h2 {
    color: #ffd700;
    font-size: 1.8rem;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.victory-info-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Сетка с блоками информации */
.victory-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.victory-info-block {
    background: rgba(255, 215, 0, 0.05);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.victory-info-block:hover {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
}

.block-number {
    font-size: 2rem;
    margin-bottom: 15px;
    text-align: center;
}

.block-content h3 {
    color: #ffd700;
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: center;
}

.block-content p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    margin-bottom: 10px;
    text-align: center;
}

.block-note {
    color: rgba(255, 215, 0, 0.7);
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    padding: 8px;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 5px;
    border-left: 3px solid rgba(255, 215, 0, 0.3);
}

/* Итог */
.victory-info-summary {
    background: rgba(255, 215, 0, 0.08);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.summary-title {
    color: #ffd700;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
}

.summary-content p {
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    line-height: 1.5;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

/* Заключение */
.victory-info-conclusion {
    background: rgba(255, 215, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    text-align: center;
}

.victory-info-conclusion p {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
}

/* Кнопка закрытия */
.close-victory-info-btn {
    background: rgba(255, 215, 0, 0.2);
    border-radius: 25px;
    padding: 12px 30px;
    color: #ffd700;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
    width: 200px;
}

.close-victory-info-btn:hover {
    background: rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.close-victory-info-btn:active {
    transform: translateY(0);
}

/* Полоса прокрутки для контейнера */
.victory-info-container::-webkit-scrollbar {
    width: 8px;
}

.victory-info-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.victory-info-container::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.3);
    border-radius: 4px;
}

.victory-info-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.5);
}

/* Адаптивность */
@media (max-width: 850px) {
    .victory-info-container {
        padding: 20px;
        max-height: 90vh;
    }
    
    .victory-info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .victory-info-header h2 {
        font-size: 1.5rem;
    }
    
    .victory-info-header p {
        font-size: 1rem;
    }
    
    .block-content h3 {
        font-size: 1.1rem;
    }
    
    .victory-info-conclusion p {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .victory-info-container {
        padding: 15px;
        border-radius: 10px;
    }
    
    .victory-info-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .victory-info-header h2 {
        font-size: 1.3rem;
    }
    
    .victory-info-grid {
        gap: 12px;
    }
    
    .victory-info-block {
        padding: 15px;
    }
    
    .block-number {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    .close-victory-info-btn {
        width: 100%;
        padding: 10px;
    }
}

/* === СТИЛИ ДЛЯ КРЕСТИКА В МОДАЛКЕ VERSUS === */

/* Крестик в отключенном состоянии */
.versus-close-btn.disabled {
    pointer-events: none !important;
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    z-index: 1 !important;
}

/* Когда открыто объяснение, делаем крестик невидимым */
.victory-info-overlay.show ~ .versus-close-btn {
    pointer-events: none !important;
    opacity: 0.2 !important;
    z-index: 1 !important;
}

/* Чтобы оверлей был поверх крестика */
.victory-info-overlay {
    z-index: 2000 !important;
}

/* Контейнер с объяснением должен быть еще выше */
.victory-info-container {
    z-index: 2001 !important;
}

/* Основная кнопка "НАЧАТЬ БИТВУ" */
.versus-main-btn {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: linear-gradient(145deg, #000000, #1a1a1a);
    border: 4px solid #ffd700;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
    color: #ffd700;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    position: relative;
    /* Фиксируем форму для всех браузеров */
    aspect-ratio: 1 / 1;
    min-width: 250px;
    min-height: 250px;
    /* Запрещаем изменение пропорций */
    resize: none;
    flex-shrink: 0;
}

/* Ховер эффект */
.versus-main-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.7);
    border-color: #ffed4e;
}

/* Для веб-версий, где может быть проблема с aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
    .versus-main-btn::before {
        content: '';
        display: block;
        padding-top: 100%; /* Создает квадрат */
        float: left;
    }
    
    .versus-main-btn::after {
        content: '';
        display: block;
        clear: both;
    }
    
    .versus-main-btn span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* Альтернативный вариант для старых браузеров */
.versus-main-btn-wrapper {
    width: 250px;
    height: 250px;
    position: relative;
    margin: 30px auto;
}

.versus-main-btn-wrapper .versus-main-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* Адаптивность */
@media (max-width: 768px) {
    .versus-main-btn {
        width: 200px;
        height: 200px;
        min-width: 200px;
        min-height: 200px;
        font-size: 1.2rem;
    }
    
    .versus-main-btn-wrapper {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .versus-main-btn {
        width: 180px;
        height: 180px;
        min-width: 180px;
        min-height: 180px;
        font-size: 1.1rem;
    }
    
    .versus-main-btn-wrapper {
        width: 180px;
        height: 180px;
    }
}

/* Исправляем для веб-версии Telegram */
body.web .versus-main-btn {
    /* Принудительно фиксируем размеры */
    width: 250px !important;
    height: 250px !important;
    max-width: 250px !important;
    max-height: 250px !important;
    /* Убираем любые возможные трансформации */
    transform: none !important;
    transform-origin: center !important;
}

/* Если есть проблема с flex-контейнером */
.versus-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Защита от сжатия элементов */
    flex-shrink: 0;
}

.versus-content .versus-main-btn {
    /* Запрещаем сжатие в flex-контейнере */
    flex-shrink: 0;
}

/* === СТИЛИ ДЛЯ VERSUS МЕНЮ (УПРОЩЕННЫЕ) === */

/* Модалка меню */
.versus-menu-modal .modal-content {
    width: 100%;
    max-width: 480px;
    height: auto;
    max-height: 90vh;
    background: #000000; /* Меняем фон на чёрный, как в основной модалке */
    border-radius: 12px;
    overflow-y: auto;
    position: relative;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

/* Добавляем те же геометрические фигуры, что и в основной модалке */
.versus-menu-modal .versus-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
    z-index: 0;
}

/* Копируем все стили фигур из основной модалки */
.versus-menu-modal .yellow-circle,
.versus-menu-modal .yellow-square,
.versus-menu-modal .yellow-triangle,
.versus-menu-modal .yellow-line {
    position: absolute;
}

.versus-menu-modal .yellow-circle {
    border-radius: 50%;
    border: 2px solid #ffd700;
    opacity: 0.1;
    animation: float 20s infinite linear;
}

.versus-menu-modal .circle-1 {
    width: 200px;
    height: 200px;
    top: -80px;
    left: -80px;
    animation-delay: 0s;
}

.versus-menu-modal .circle-2 {
    width: 150px;
    height: 150px;
    bottom: -50px;
    right: -50px;
    border-width: 3px;
    opacity: 0.15;
    animation-delay: -10s;
}

.versus-menu-modal .yellow-square {
    border: 2px solid #ffd700;
    opacity: 0.08;
    animation: rotate 30s infinite linear;
}

.versus-menu-modal .square-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    right: 5%;
    animation-delay: -5s;
}

.versus-menu-modal .square-2 {
    width: 70px;
    height: 70px;
    bottom: 30%;
    left: 5%;
    opacity: 0.12;
    animation-delay: -15s;
}

.versus-menu-modal .yellow-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    opacity: 0.1;
    animation: float 25s infinite linear reverse;
}

.versus-menu-modal .triangle-1 {
    border-width: 0 60px 104px 60px;
    border-color: transparent transparent #ffd700 transparent;
    top: 15%;
    left: 10%;
    animation-delay: -7s;
}

.versus-menu-modal .triangle-2 {
    border-width: 104px 60px 0 60px;
    border-color: #ffd700 transparent transparent transparent;
    bottom: 20%;
    right: 10%;
    opacity: 0.15;
    animation-delay: -17s;
}

.versus-menu-modal .yellow-line {
    background: #ffd700;
    opacity: 0.05;
    animation: slide 20s infinite linear;
}

.versus-menu-modal .line-1 {
    width: 300px;
    height: 2px;
    top: 50%;
    left: -300px;
    animation-delay: -3s;
}

/* Контент меню должен быть поверх фона */
.versus-menu-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
    z-index: 1;
}

/* Остальные стили меню остаются без изменений */
.versus-menu-header {
    text-align: center;
    padding-bottom: 15px;
    position: relative;
    z-index: 1;
}

.versus-menu-title h1 {
    color: #ffd700;
    font-size: 28px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.versus-menu-subtitle {
    color: rgba(255, 215, 0, 0.7);
    font-size: 14px;
    font-weight: 300;
}

/* Переключатель режимов */
.versus-mode-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: rgba(20, 20, 20, 0.6);
    border-radius: 8px;
}

.mode-visual {
    display: flex;
    gap: 30px;
    margin-bottom: 5px;
}

.mode-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 20px;
    color: rgba(255, 215, 0, 0.5);
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.mode-item.active {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
}

.mode-item.battle-active {
    background: rgba(255, 68, 68, 0.1);
    color: #ff4444;
}

.mode-icon {
    font-size: 16px;
}

.mode-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-align: center;
    line-height: 1.4;
}

/* Основные опции */
.versus-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-title {
    color: #ffd700;
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 600;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(30, 30, 30, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.option-row:hover {
    background: rgba(40, 40, 40, 0.8);
    border-color: rgba(255, 215, 0, 0.2);
}

.option-row.active {
    background: rgba(255, 215, 0, 0.1);
    border-color: #ffd700;
}

.option-row.battle-active {
    background: rgba(255, 68, 68, 0.1);
    border-color: #ff4444;
}

.option-selector {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-circle {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 50%;
    transition: all 0.2s ease;
}

.option-row.active .option-circle {
    background: #ffd700;
    border-color: #ffd700;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.option-row.battle-active .option-circle {
    background: #ff4444;
    border-color: #ff4444;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.5);
}

.option-details {
    flex: 1;
}

.option-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
}

.option-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin-top: 2px;
}

/* Разделитель */
.options-divider {
    height: 1px;
    background: rgba(255, 215, 0, 0.2);
    margin: 5px 0;
}

/* Информация о выигрыше */
.payout-section {
    background: rgba(255, 215, 0, 0.05);
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.payout-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.payout-item:last-child {
    margin-bottom: 0;
}

.payout-value {
    color: #ffd700;
    font-weight: 600;
    font-size: 15px;
}

/* Секция с кнопкой */
.versus-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

/* Большая кнопка */
.versus-start-btn {
    width: 100%;
    height: 60px;
    background: #000;
    border: 2px solid #ffd700;
    border-radius: 10px;
    color: #ffd700;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Пульсация для ставки */
.versus-start-btn.pulsing {
    animation: pulse-glow 2s infinite;
    border-color: #ff4444;
    background: #1a0000;
    color: #ff4444;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 68, 68, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 68, 68, 0.6);
        transform: scale(1.01);
    }
}

.versus-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2);
}

.versus-start-btn.pulsing:hover {
    box-shadow: 0 5px 25px rgba(255, 68, 68, 0.4);
}

/* Подсказка под кнопкой */
.versus-hint {
    width: 100%;
    padding: 12px;
    background: rgba(20, 20, 20, 0.6);
    border-radius: 8px;
    text-align: center;
}

.hint-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    display: none;
}

.hint-content.active {
    display: flex;
}

.hint-icon {
    font-size: 18px;
}

.hint-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    flex: 1;
}

/* Адаптивность */
@media (max-width: 768px) {
    .versus-menu-modal .modal-content {
        max-width: 95%;
        max-height: 95vh;
    }
    
    .versus-menu-content {
        padding: 20px;
        gap: 20px;
    }
    
    .versus-menu-title h1 {
        font-size: 24px;
    }
    
    .mode-visual {
        gap: 20px;
    }
    
    .versus-start-btn {
        height: 55px;
        font-size: 16px;
    }
    
    .option-row {
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .versus-menu-title h1 {
        font-size: 22px;
    }
    
    .versus-menu-subtitle {
        font-size: 13px;
    }
    
    .versus-start-btn {
        height: 50px;
        font-size: 15px;
    }
    
    .hint-content {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .hint-text {
        text-align: center;
    }
    
    .mode-visual {
        flex-direction: column;
        gap: 10px;
    }
}

/* ===========================================
   VERSUS BATTLE UI - ПОЛНЫЙ CSS
   =========================================== */

/* Основные стили модалки */
.versus-battle-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10000;
    overflow: hidden;
}

.versus-battle-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.battle-modal-content {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
}

/* Фазы */
.battle-phase {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.battle-phase.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 20px;
    box-sizing: border-box;
}

/* ========== ФАЗА БИТВЫ ========== */

/* Заголовок этапа */
.battle-stage-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    margin-top: 5px;
    z-index: 10;
}

.stage-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffd700;
    font-size: 16px;
    font-weight: 700;
}

.current-stage {
    color: #000;
    background: #ffd700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.stage-separator {
    opacity: 0.5;
}

.total-stages {
    opacity: 0.5;
}

.stage-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
}

/* VS символ (краткое появление) */
.battle-vs-brief {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

.battle-vs-text {
    font-size: 80px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

/* Баллы этапа (сверху) */
.battle-stage-scores-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    height: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.battle-stage-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.4s ease;
    width: 45%;
    max-width: 200px;
}

.battle-stage-score.visible {
    opacity: 1;
    transform: translateY(0);
}

.stage-score-value {
    color: #ffd700;
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 5px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.battle-stage-score::before {
    content: 'Этап';
    color: rgba(255, 215, 0, 0.7);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

/* Левый балл этапа */
#stage-score-left {
    align-items: flex-end;
}

/* Правый балл этапа */
#stage-score-right {
    align-items: flex-start;
}

/* Основной контейнер с игроками */
.battle-players-container {
    display: flex;
    width: 100%;
    height: calc(70% - 60px);
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    flex: 1;
    position: relative;
}

/* Игроки */
.battle-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
    max-width: 200px;
    padding: 15px;
    transition: all 0.4s ease;
    position: relative;
    box-sizing: border-box;
}

/* Эффекты победителя */
.battle-player.winner {
    background: rgba(255, 215, 0, 0.05);
    border-radius: 15px;
}

.battle-player.winner .battle-player-name {
    color: #ffd700;
    transform: scale(1.05);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.battle-player.winner .battle-player-avatar {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* Аватар */
.battle-player-avatar-container {
    width: 100px;
    height: 100px;
    position: relative;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

.battle-player-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffd700;
    transition: all 0.3s ease;
}

/* Никнейм (с переносом) */
.battle-player-name {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30px;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
    padding: 0 5px;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* Общие баллы */
.battle-player-total {
    text-align: center;
    margin-top: 5px;
    width: 100%;
}

.total-label {
    color: rgba(255, 215, 0, 0.7);
    font-size: 14px;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.battle-total-value {
    color: #ffd700;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.winner .battle-total-value {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* Центральная зона */
.battle-center-zone {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    min-width: 100px;
}

/* Кнопка закрытия */
.battle-close-container {
    width: 100%;
    display: none;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    animation: close-appear 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes close-appear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.battle-close-btn {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid #ffd700;
    border-radius: 25px;
    padding: 14px 40px;
    color: #ffd700;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160px;
    text-transform: uppercase;
}

.battle-close-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2);
}

/* ========== АНИМАЦИИ ДЛЯ БАЛЛОВ ========== */

/* Быстрое обновление общего счета */
@keyframes total-update-fast {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        color: #fff;
    }
    100% {
        transform: scale(1);
    }
}

.total-updating-fast {
    animation: total-update-fast 0.3s ease;
}

/* Появление баллов этапа */
@keyframes stage-score-appear {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Накопление баллов этапа */
@keyframes stage-score-accumulate {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== АДАПТИВНОСТЬ ========== */

@media (max-width: 768px) {
    .battle-stage-scores-container {
        height: 50px;
        margin-bottom: 15px;
    }
    
    .stage-score-value {
        font-size: 28px;
    }
    
    .battle-players-container {
        padding: 0 5px;
    }
    
    .battle-player {
        width: 45%;
        padding: 10px 5px;
    }
    
    .battle-player-avatar-container {
        width: 85px;
        height: 85px;
    }
    
    .battle-player-name {
        font-size: 20px;
        min-height: 26px;
        padding: 0 3px;
    }
    
    .battle-total-value {
        font-size: 42px;
    }
    
    .battle-vs-text {
        font-size: 70px;
    }
    
    .battle-center-zone {
        flex: 0 0 80px;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .battle-stage-header {
        margin-bottom: 10px;
    }
    
    .battle-stage-scores-container {
        height: 45px;
        margin-bottom: 10px;
    }
    
    .stage-score-value {
        font-size: 24px;
        min-height: 35px;
    }
    
    .battle-stage-score::before {
        font-size: 13px;
    }
    
    .battle-player {
        padding: 8px 3px;
    }
    
    .battle-player-avatar-container {
        width: 75px;
        height: 75px;
    }
    
    .battle-player-name {
        font-size: 18px;
        margin-bottom: 8px;
        min-height: 24px;
    }
    
    .battle-total-value {
        font-size: 36px;
    }
    
    .total-label {
        font-size: 13px;
    }
    
    .battle-vs-text {
        font-size: 60px;
    }
    
    .battle-center-zone {
        flex: 0 0 60px;
        min-width: 60px;
    }
    
    .battle-close-btn {
        padding: 12px 30px;
        font-size: 15px;
        min-width: 140px;
    }
}

@media (max-width: 360px) {
    .battle-stage-scores-container {
        height: 40px;
    }
    
    .stage-score-value {
        font-size: 22px;
    }
    
    .battle-player-avatar-container {
        width: 65px;
        height: 65px;
    }
    
    .battle-player-name {
        font-size: 16px;
        min-height: 22px;
    }
    
    .battle-total-value {
        font-size: 32px;
    }
    
    .battle-center-zone {
        flex: 0 0 50px;
        min-width: 50px;
    }
}

/* Очень маленькие экраны в горизонтальной ориентации */
@media (max-height: 500px) {
    .battle-phase.active {
        padding: 10px 15px;
    }
    
    .battle-stage-scores-container {
        height: 40px;
        margin-bottom: 10px;
    }
    
    .stage-score-value {
        font-size: 20px;
    }
    
    .battle-player-avatar-container {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }
    
    .battle-player-name {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .battle-total-value {
        font-size: 28px;
    }
    
    .battle-center-zone {
        flex: 0 0 40px;
        min-width: 40px;
    }
}

/* ========== АРЕНА БИТВЫ ========== */

/* Фон арены */
.battle-arena {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Пол арены */
.arena-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, 
        rgba(255, 215, 0, 0.05) 0%,
        rgba(255, 215, 0, 0.02) 30%,
        transparent 100%);
}

/* Свечение арены */
.arena-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, 
        rgba(255, 215, 0, 0.1) 0%,
        rgba(255, 215, 0, 0.05) 40%,
        transparent 70%);
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

/* Платформы игроков */
.arena-platform {
    position: absolute;
    bottom: 10%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
}

.arena-platform.left {
    left: 15%;
    transform: translateX(-50%);
}

.arena-platform.right {
    right: 15%;
    transform: translateX(50%);
}

.arena-platform.active {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.arena-platform.victory-active {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

.arena-platform.victory-pulse {
    animation: platform-pulse 2s infinite;
}

@keyframes platform-pulse {
    0% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
    100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
}

.arena-platform.defeat-active {
    background: rgba(255, 0, 0, 0.05);
    border-color: rgba(255, 0, 0, 0.2);
    opacity: 0.7;
}

.arena-platform.draw-active {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

/* ========== ЭФФЕКТ ВХОДА НА АРЕНУ ========== */

.arena-enter-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arena-door {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #000;
    transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.arena-door.left {
    left: 0;
    border-right: 1px solid rgba(255, 215, 0, 0.3);
}

.arena-door.right {
    right: 0;
    border-left: 1px solid rgba(255, 215, 0, 0.3);
}

.arena-enter-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffd700;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 11;
}

/* ========== ВСТУПЛЕНИЕ РАУНДА ========== */

.round-intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.round-intro.active {
    opacity: 1;
}

.intro-text {
    color: #ffd700;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

.round-intro.active .intro-text {
    opacity: 1;
    transform: scale(1);
    animation: intro-text-pulse 1s ease;
}

@keyframes intro-text-pulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ========== УЛУЧШЕННЫЙ VS СИМВОЛ ========== */

.vs-digital-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 0.3) 0%,
        rgba(255, 215, 0, 0.1) 50%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.vs-digital-glow.active {
    opacity: 1;
    animation: digital-glow-pulse 1.5s ease;
}

@keyframes digital-glow-pulse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ========== ЭФФЕКТЫ СЧЕТА ========== */

/* Появление счета */
.score-appear {
    animation: score-appear-effect 0.5s ease;
}

@keyframes score-appear-effect {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Исчезновение счета */
.score-disappear {
    animation: score-disappear-effect 0.3s ease forwards;
}

@keyframes score-disappear-effect {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(10px); }
}

/* Подсчет очков */
.counting {
    animation: counting-pulse 0.5s infinite alternate;
}

@keyframes counting-pulse {
    0% { opacity: 0.9; }
    100% { opacity: 1; }
}

/* Мерцание для 4 этапа */
.score-flicker {
    animation: score-flicker 0.1s;
}

@keyframes score-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Хаотичный эффект для 4 этапа */
.chaos-effect {
    animation: chaos-flicker 0.3s infinite;
}

@keyframes chaos-flicker {
    0%, 100% { color: #ffd700; }
    50% { color: #ff6b6b; }
}

.chaos-final {
    animation: chaos-final-effect 0.4s ease;
}

@keyframes chaos-final-effect {
    0% { transform: scale(1); color: #ffd700; }
    50% { transform: scale(1.2); color: #fff; }
    100% { transform: scale(1); color: #ffd700; }
}

/* Удар при завершении подсчета */
.score-impact {
    animation: score-impact-effect 0.3s ease;
}

@keyframes score-impact-effect {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Свечение общего счета */
.total-glow {
    animation: total-glow-effect 0.3s ease;
}

@keyframes total-glow-effect {
    0% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
    50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
    100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
}

.victory-glow {
    animation: victory-glow-pulse 2s infinite;
}

@keyframes victory-glow-pulse {
    0%, 100% { 
        color: #ffd700; 
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    }
    50% { 
        color: #fff; 
        text-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
    }
}

/* ========== ЭФФЕКТЫ ПОБЕДЫ/ПОРАЖЕНИЯ ========== */

.arena-winner {
    position: relative;
    z-index: 5;
}

.arena-loser {
    opacity: 0.7;
    filter: grayscale(0.3);
}

.win-effect {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffd700;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;
    opacity: 0;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    transition: all 0.5s ease;
}

.win-effect.active {
    opacity: 1;
    animation: win-effect-float 3s ease forwards;
}

@keyframes win-effect-float {
    0% { top: -40px; opacity: 0; }
    20% { top: -60px; opacity: 1; }
    80% { top: -60px; opacity: 1; }
    100% { top: -80px; opacity: 0; }
}

.draw-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 215, 0, 0.8);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 3px;
    opacity: 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    z-index: 15;
    transition: all 0.5s ease;
}

.draw-effect.active {
    opacity: 1;
    animation: draw-effect-pulse 2s ease;
}

@keyframes draw-effect-pulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ===========================================
   VERSUS BATTLE UI - ПОЛНЫЙ CSS
   =========================================== */

/* Основные стили модалки */
.versus-battle-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10000;
    overflow: hidden;
}

.versus-battle-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.battle-modal-content {
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
}

/* Фазы */
.battle-phase {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.battle-phase.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 20px;
    box-sizing: border-box;
}

/* ========== ФАЗА ПОИСКА ========== */
.battle-search-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 30px;
}

.battle-search-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(40, 40, 40, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.battle-vs-symbol {
    font-size: 40px;
    font-weight: 900;
    color: #ffd700;
    letter-spacing: 3px;
    z-index: 2;
}

.battle-search-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.3);
    animation: search-pulse 1.5s ease-out infinite;
}

.battle-search-pulse.delay-1 {
    animation-delay: 0.5s;
}

@keyframes search-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.battle-search-text {
    color: #ffd700;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    max-width: 80%;
}

/* ========== ФАЗА БИТВЫ ========== */

/* Заголовок этапа */
.battle-stage-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    margin-top: 5px;
    z-index: 10;
}

.stage-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffd700;
    font-size: 16px;
    font-weight: 700;
}

.current-stage {
    color: #000;
    background: #ffd700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.stage-separator {
    opacity: 0.5;
}

.total-stages {
    opacity: 0.5;
}

.stage-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
}

/* VS символ (краткое появление) */
.battle-vs-brief {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    z-index: 5;
    pointer-events: none;
}

.battle-vs-text {
    font-size: 80px;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}

/* Баллы этапа (сверху) */
.battle-stage-scores-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
    height: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.battle-stage-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.4s ease;
    width: 45%;
    max-width: 200px;
}

.battle-stage-score.visible {
    opacity: 1;
    transform: translateY(0);
}

.stage-score-value {
    color: #ffd700;
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 5px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.battle-stage-score::before {
    content: 'Этап';
    color: rgba(255, 215, 0, 0.7);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

/* Левый балл этапа */
#stage-score-left {
    align-items: flex-end;
}

/* Правый балл этапа */
#stage-score-right {
    align-items: flex-start;
}

/* Основной контейнер с игроками */
.battle-players-container {
    display: flex;
    width: 100%;
    height: calc(70% - 60px);
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    flex: 1;
    position: relative;
}

/* Игроки */
.battle-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
    max-width: 200px;
    padding: 15px;
    transition: all 0.4s ease;
    position: relative;
    box-sizing: border-box;
}

/* Эффекты победителя */
.battle-player.winner {
    background: rgba(255, 215, 0, 0.05);
    border-radius: 15px;
}

.battle-player.winner .battle-player-name {
    color: #ffd700;
    transform: scale(1.05);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.battle-player.winner .battle-player-avatar {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

/* Аватар */
.battle-player-avatar-container {
    width: 100px;
    height: 100px;
    position: relative;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

.battle-player-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffd700;
    transition: all 0.3s ease;
}

/* Никнейм (с переносом) */
.battle-player-name {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30px;
    word-break: break-word;
    white-space: normal;
    line-height: 1.2;
    padding: 0 5px;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* Общие баллы */
.battle-player-total {
    text-align: center;
    margin-top: 5px;
    width: 100%;
}

.total-label {
    color: rgba(255, 215, 0, 0.7);
    font-size: 14px;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.battle-total-value {
    color: #ffd700;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.winner .battle-total-value {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* Центральная зона */
.battle-center-zone {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    min-width: 100px;
}

/* Кнопка закрытия */
.battle-close-container {
    width: 100%;
    display: none;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    animation: close-appear 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes close-appear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.battle-close-btn {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid #ffd700;
    border-radius: 25px;
    padding: 14px 40px;
    color: #ffd700;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160px;
    text-transform: uppercase;
}

.battle-close-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2);
}

/* ========== АНИМАЦИИ ДЛЯ БАЛЛОВ ========== */

/* Быстрое обновление общего счета */
@keyframes total-update-fast {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        color: #fff;
    }
    100% {
        transform: scale(1);
    }
}

.total-updating-fast {
    animation: total-update-fast 0.3s ease;
}

/* Появление баллов этапа */
@keyframes stage-score-appear {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Накопление баллов этапа */
@keyframes stage-score-accumulate {
    0% {
        transform: scale(0.9);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ========== АДАПТИВНОСТЬ ========== */

@media (max-width: 768px) {
    .battle-stage-scores-container {
        height: 50px;
        margin-bottom: 15px;
    }
    
    .stage-score-value {
        font-size: 28px;
    }
    
    .battle-players-container {
        padding: 0 5px;
    }
    
    .battle-player {
        width: 45%;
        padding: 10px 5px;
    }
    
    .battle-player-avatar-container {
        width: 85px;
        height: 85px;
    }
    
    .battle-player-name {
        font-size: 20px;
        min-height: 26px;
        padding: 0 3px;
    }
    
    .battle-total-value {
        font-size: 42px;
    }
    
    .battle-vs-text {
        font-size: 70px;
    }
    
    .battle-center-zone {
        flex: 0 0 80px;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .battle-stage-header {
        margin-bottom: 10px;
    }
    
    .battle-stage-scores-container {
        height: 45px;
        margin-bottom: 10px;
    }
    
    .stage-score-value {
        font-size: 24px;
        min-height: 35px;
    }
    
    .battle-stage-score::before {
        font-size: 13px;
    }
    
    .battle-player {
        padding: 8px 3px;
    }
    
    .battle-player-avatar-container {
        width: 75px;
        height: 75px;
    }
    
    .battle-player-name {
        font-size: 18px;
        margin-bottom: 8px;
        min-height: 24px;
    }
    
    .battle-total-value {
        font-size: 36px;
    }
    
    .total-label {
        font-size: 13px;
    }
    
    .battle-vs-text {
        font-size: 60px;
    }
    
    .battle-center-zone {
        flex: 0 0 60px;
        min-width: 60px;
    }
    
    .battle-close-btn {
        padding: 12px 30px;
        font-size: 15px;
        min-width: 140px;
    }
}

@media (max-width: 360px) {
    .battle-stage-scores-container {
        height: 40px;
    }
    
    .stage-score-value {
        font-size: 22px;
    }
    
    .battle-player-avatar-container {
        width: 65px;
        height: 65px;
    }
    
    .battle-player-name {
        font-size: 16px;
        min-height: 22px;
    }
    
    .battle-total-value {
        font-size: 32px;
    }
    
    .battle-center-zone {
        flex: 0 0 50px;
        min-width: 50px;
    }
}

/* Очень маленькие экраны в горизонтальной ориентации */
@media (max-height: 500px) {
    .battle-phase.active {
        padding: 10px 15px;
    }
    
    .battle-stage-scores-container {
        height: 40px;
        margin-bottom: 10px;
    }
    
    .stage-score-value {
        font-size: 20px;
    }
    
    .battle-player-avatar-container {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }
    
    .battle-player-name {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .battle-total-value {
        font-size: 28px;
    }
    
    .battle-center-zone {
        flex: 0 0 40px;
        min-width: 40px;
    }
}

/* ========== АРЕНА БИТВЫ ========== */

/* Фон арены */
.battle-arena {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Пол арены */
.arena-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, 
        rgba(255, 215, 0, 0.05) 0%,
        rgba(255, 215, 0, 0.02) 30%,
        transparent 100%);
}

/* Свечение арены */
.arena-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center, 
        rgba(255, 215, 0, 0.1) 0%,
        rgba(255, 215, 0, 0.05) 40%,
        transparent 70%);
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

/* Платформы игроков */
.arena-platform {
    position: absolute;
    bottom: 10%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
}

.arena-platform.left {
    left: 15%;
    transform: translateX(-50%);
}

.arena-platform.right {
    right: 15%;
    transform: translateX(50%);
}

.arena-platform.active {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.arena-platform.victory-active {
    background: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}

.arena-platform.victory-pulse {
    animation: platform-pulse 2s infinite;
}

@keyframes platform-pulse {
    0% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
    100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
}

.arena-platform.defeat-active {
    background: rgba(255, 0, 0, 0.05);
    border-color: rgba(255, 0, 0, 0.2);
    opacity: 0.7;
}

.arena-platform.draw-active {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

/* ========== ЭФФЕКТ ВХОДА НА АРЕНУ ========== */

.arena-enter-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arena-door {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: #000;
    transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.arena-door.left {
    left: 0;
    border-right: 1px solid rgba(255, 215, 0, 0.3);
}

.arena-door.right {
    right: 0;
    border-left: 1px solid rgba(255, 215, 0, 0.3);
}

.arena-enter-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffd700;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 11;
}

/* ========== ВСТУПЛЕНИЕ РАУНДА ========== */

.round-intro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.round-intro.active {
    opacity: 1;
}

.intro-text {
    color: #ffd700;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

.round-intro.active .intro-text {
    opacity: 1;
    transform: scale(1);
    animation: intro-text-pulse 1s ease;
}

@keyframes intro-text-pulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ========== УЛУЧШЕННЫЙ VS СИМВОЛ ========== */

.vs-digital-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 0.3) 0%,
        rgba(255, 215, 0, 0.1) 50%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.vs-digital-glow.active {
    opacity: 1;
    animation: digital-glow-pulse 1.5s ease;
}

@keyframes digital-glow-pulse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ========== ЭФФЕКТЫ СЧЕТА ========== */

/* Появление счета */
.score-appear {
    animation: score-appear-effect 0.5s ease;
}

@keyframes score-appear-effect {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Исчезновение счета */
.score-disappear {
    animation: score-disappear-effect 0.3s ease forwards;
}

@keyframes score-disappear-effect {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(10px); }
}

/* Подсчет очков */
.counting {
    animation: counting-pulse 0.5s infinite alternate;
}

@keyframes counting-pulse {
    0% { opacity: 0.9; }
    100% { opacity: 1; }
}

/* Мерцание для 4 этапа */
.score-flicker {
    animation: score-flicker 0.1s;
}

@keyframes score-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Хаотичный эффект для 4 этапа */
.chaos-effect {
    animation: chaos-flicker 0.3s infinite;
}

@keyframes chaos-flicker {
    0%, 100% { color: #ffd700; }
    50% { color: #ff6b6b; }
}

.chaos-final {
    animation: chaos-final-effect 0.4s ease;
}

@keyframes chaos-final-effect {
    0% { transform: scale(1); color: #ffd700; }
    50% { transform: scale(1.2); color: #fff; }
    100% { transform: scale(1); color: #ffd700; }
}

/* Удар при завершении подсчета */
.score-impact {
    animation: score-impact-effect 0.3s ease;
}

@keyframes score-impact-effect {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Свечение общего счета */
.total-glow {
    animation: total-glow-effect 0.3s ease;
}

@keyframes total-glow-effect {
    0% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
    50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
    100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
}

.victory-glow {
    animation: victory-glow-pulse 2s infinite;
}

@keyframes victory-glow-pulse {
    0%, 100% { 
        color: #ffd700; 
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    }
    50% { 
        color: #fff; 
        text-shadow: 0 0 25px rgba(255, 215, 0, 0.9);
    }
}

/* ========== ЭФФЕКТЫ ПОБЕДЫ/ПОРАЖЕНИЯ ========== */

.arena-winner {
    position: relative;
    z-index: 5;
}

.arena-loser {
    opacity: 0.7;
    filter: grayscale(0.3);
}

.win-effect {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffd700;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 2px;
    opacity: 0;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    transition: all 0.5s ease;
}

.win-effect.active {
    opacity: 1;
    animation: win-effect-float 3s ease forwards;
}

@keyframes win-effect-float {
    0% { top: -40px; opacity: 0; }
    20% { top: -60px; opacity: 1; }
    80% { top: -60px; opacity: 1; }
    100% { top: -80px; opacity: 0; }
}

.draw-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 215, 0, 0.8);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 3px;
    opacity: 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    z-index: 15;
    transition: all 0.5s ease;
}

.draw-effect.active {
    opacity: 1;
    animation: draw-effect-pulse 2s ease;
}

@keyframes draw-effect-pulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ========== НОВЫЙ ФИНАЛ БИТВЫ (МИНИМАЛИСТИЧНЫЙ) ========== */

/* Контейнер результата */
.battle-result-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 0 20px 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 30;
    animation: result-fade-in 0.5s ease;
}

@keyframes result-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Заголовок победителя/ничьей */
.battle-winner-title {
    color: #ffd700;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    animation: winner-appear 0.5s ease;
    text-align: center;
    word-break: break-word;
    max-width: 100%;
    padding: 0 10px;
    line-height: 1.2;
}

@keyframes winner-appear {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Финальный счет */
.battle-final-score {
    color: rgba(255, 255, 255, 0.9);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 1px;
    text-align: center;
    word-break: break-word;
}

.battle-final-score span {
    color: #ffd700;
    margin: 0 8px;
    font-weight: 800;
}

/* Кнопка закрытия */
.battle-close-btn {
    background: rgba(255, 215, 0, 0.1);
    border: 1.5px solid #ffd700;
    border-radius: 30px;
    padding: 12px 40px;
    color: #ffd700;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 20px;
    text-transform: uppercase;
    min-width: 160px;
}

.battle-close-btn:active {
    transform: scale(0.97);
    background: rgba(255, 215, 0, 0.2);
}

/* Подсказка о режимах - МИНИМАЛИСТИЧНАЯ */
.battle-mode-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.65;
    transition: opacity 0.3s ease;
    max-width: 100%;
    padding: 0 15px;
}

.battle-mode-title {
    color: #ffd700;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    padding: 0 10px;
}

.battle-mode-description {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    padding: 0 10px;
}

/* Адаптивность финала */
@media (max-width: 480px) {
    .battle-winner-title {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .battle-final-score {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .battle-close-btn {
        padding: 10px 35px;
        font-size: 15px;
        margin-bottom: 18px;
        min-width: 140px;
    }
    
    .battle-mode-title {
        font-size: 12px;
    }
    
    .battle-mode-description {
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    .battle-result-container {
        padding: 0 15px 20px;
    }
    
    .battle-winner-title {
        font-size: 22px;
        margin-bottom: 8px;
    }
    
    .battle-final-score {
        font-size: 20px;
        margin-bottom: 16px;
    }
    
    .battle-close-btn {
        padding: 8px 30px;
        font-size: 14px;
        margin-bottom: 16px;
        min-width: 130px;
    }
    
    .battle-mode-title {
        font-size: 11px;
    }
    
    .battle-mode-description {
        font-size: 10px;
    }
}

/* Для очень маленьких экранов по высоте */
@media (max-height: 700px) {
    .battle-result-container {
        padding: 0 20px 20px;
    }
    
    .battle-winner-title {
        margin-bottom: 8px;
    }
    
    .battle-final-score {
        margin-bottom: 16px;
    }
    
    .battle-close-btn {
        margin-bottom: 14px;
        padding: 10px 35px;
    }
}

@media (max-height: 600px) {
    .battle-result-container {
        padding: 0 20px 15px;
    }
    
    .battle-winner-title {
        font-size: 24px;
        margin-bottom: 6px;
    }
    
    .battle-final-score {
        font-size: 20px;
        margin-bottom: 12px;
    }
    
    .battle-close-btn {
        padding: 8px 30px;
        margin-bottom: 10px;
        min-width: 140px;
    }
    
    .battle-mode-title {
        font-size: 12px;
    }
    
    .battle-mode-description {
        font-size: 11px;
    }
}

@media (max-height: 500px) {
    .battle-mode-hint {
        display: none;
    }
    
    .battle-result-container {
        padding: 0 20px 12px;
    }
    
    .battle-winner-title {
        font-size: 22px;
        margin-bottom: 4px;
    }
    
    .battle-final-score {
        font-size: 18px;
        margin-bottom: 8px;
    }
    
    .battle-close-btn {
        padding: 6px 25px;
        font-size: 13px;
        margin-bottom: 8px;
        min-width: 120px;
    }
}

/* ========== ДИНАМИЧЕСКИЙ ФОН VERSUS БИТВЫ ========== */

/* Основной фон */
.battle-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Цифровой шум - основа фона */
.digital-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 30% 40%, rgba(255, 215, 0, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(255, 215, 0, 0.02) 0%, transparent 40%);
    opacity: 0.3;
    animation: noise-animation 0.2s infinite;
}

@keyframes noise-animation {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

/* ========== ГЕОМЕТРИЧЕСКИЕ ФИГУРЫ ПО РАУНДАМ ========== */

/* Контейнер для всех фигур */
.geometric-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Базовые стили фигур */
.shape {
    position: absolute;
    opacity: 0.4;
    transition: all 0.8s ease;
    pointer-events: none;
}

/* Круги */
.shape.circle {
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.15);
    background: transparent;
}

/* Квадраты */
.shape.square {
    border: 1px solid rgba(255, 215, 0, 0.15);
    background: transparent;
    transform: rotate(45deg);
}

/* Треугольники */
.shape.triangle {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 26px solid rgba(255, 215, 0, 0.1);
}

/* Гексагоны */
.shape.hexagon {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.15);
    position: relative;
    width: 40px;
    height: 23px;
}

.shape.hexagon:before,
.shape.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

.shape.hexagon:before {
    bottom: 100%;
    border-bottom: 11.5px solid rgba(255, 215, 0, 0.15);
}

.shape.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 11.5px solid rgba(255, 215, 0, 0.15);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

/* ========== ФОНЫ ДЛЯ РАУНДОВ ========== */

/* Раунд 1 - Личная активность (Спокойный, минималистичный) */
.bg-stage-1 .shape {
    opacity: 0.3;
    filter: blur(0.5px);
}

.bg-stage-1 .shape.circle {
    animation: float-circle-1 25s infinite ease-in-out;
}

.bg-stage-1 .shape.square {
    animation: float-square-1 30s infinite ease-in-out;
}

@keyframes float-circle-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(10px, -10px) rotate(180deg); }
}

@keyframes float-square-1 {
    0%, 100% { transform: translate(0, 0) rotate(45deg); }
    50% { transform: translate(-10px, 10px) rotate(225deg); }
}

/* Раунд 2 - Командное участие (Появляются связи) */
.bg-stage-2 .shape {
    opacity: 0.4;
}

.bg-stage-2 .shape.circle {
    animation: float-circle-2 20s infinite ease-in-out;
}

.bg-stage-2 .shape.square {
    animation: float-square-2 25s infinite ease-in-out;
}

.bg-stage-2 .shape.triangle {
    animation: float-triangle-2 15s infinite ease-in-out;
}

/* Эффект связей между фигурами */
.connection-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    transform-origin: left center;
    opacity: 0.3;
    z-index: 0;
}

.bg-stage-2 .connection-line {
    animation: line-pulse-2 3s infinite;
}

@keyframes line-pulse-2 {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

/* Раунд 3 - Киберпространство (Технологичный, цифровой) */
.bg-stage-3 .shape {
    opacity: 0.5;
    filter: blur(0.3px);
}

.bg-stage-3 .shape.hexagon {
    animation: hexagon-rotate 40s infinite linear;
}

.bg-stage-3 .shape.circle {
    animation: circle-pulse-3 4s infinite;
}

/* Цифровые сетки */
.digital-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0;
}

.bg-stage-3 .digital-grid {
    opacity: 0.15;
    animation: grid-pulse-3 8s infinite;
}

@keyframes circle-pulse-3 {
    0%, 100% { 
        transform: scale(1) translate(0, 0);
        box-shadow: 0 0 0 rgba(255, 215, 0, 0.1);
    }
    50% { 
        transform: scale(1.05) translate(0, -5px);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
    }
}

@keyframes hexagon-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes grid-pulse-3 {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

/* Раунд 4 - Фактор случайности (Хаотичный, динамичный) */
.bg-stage-4 .shape {
    opacity: 0.6;
    filter: blur(0.2px);
}

.bg-stage-4 .shape.circle {
    animation: circle-chaos 12s infinite linear;
}

.bg-stage-4 .shape.square {
    animation: square-chaos 15s infinite linear;
}

.bg-stage-4 .shape.triangle {
    animation: triangle-chaos 8s infinite linear;
}

/* Эффект частиц */
.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.bg-stage-4 .particles {
    opacity: 0.1;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    animation: particle-float 10s infinite linear;
}

@keyframes circle-chaos {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -15px) rotate(90deg); }
    50% { transform: translate(-10px, 25px) rotate(180deg); }
    75% { transform: translate(15px, 10px) rotate(270deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes square-chaos {
    0% { transform: translate(0, 0) rotate(45deg); }
    33% { transform: translate(-25px, 15px) rotate(165deg); }
    66% { transform: translate(20px, -20px) rotate(285deg); }
    100% { transform: translate(0, 0) rotate(405deg); }
}

@keyframes triangle-chaos {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.3); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes particle-float {
    0% { 
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

/* ========== ЭФФЕКТЫ ДЛЯ ПОБЕДЫ ========== */

/* Эффект победного свечения */
.victory-glow-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 215, 0, 0.05) 0%,
        rgba(255, 215, 0, 0.02) 40%,
        transparent 70%
    );
    opacity: 0;
    z-index: 2;
}

.victory-active .victory-glow-bg {
    opacity: 1;
    animation: victory-bg-pulse 2s infinite;
}

@keyframes victory-bg-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Эффект рикошетов победителя */
.victory-ripples {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.victory-active .victory-ripples {
    opacity: 0.3;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.2);
    animation: ripple-expand 3s infinite;
}

.ripple:nth-child(2) { animation-delay: 1s; }
.ripple:nth-child(3) { animation-delay: 2s; }

@keyframes ripple-expand {
    0% {
        transform: scale(0.1);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* ========== АНИМАЦИИ АКТИВАЦИИ РАУНДОВ ========== */

/* Плавный переход между раундами */
.shape-transition {
    animation: shape-transition-fade 0.5s ease;
}

@keyframes shape-transition-fade {
    0% { opacity: 0.3; }
    50% { opacity: 0.1; }
    100% { opacity: 0.4; }
}

/* Подсветка активной зоны */
.active-zone-highlight {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 215, 0, 0.05) 0%,
        transparent 70%
    );
    opacity: 0;
    z-index: 0;
}

.bg-stage-1 .active-zone-highlight {
    opacity: 0.1;
    animation: zone-pulse-1 4s infinite;
}

.bg-stage-2 .active-zone-highlight {
    opacity: 0.15;
    animation: zone-pulse-2 3s infinite;
}

.bg-stage-3 .active-zone-highlight {
    opacity: 0.2;
    animation: zone-pulse-3 2s infinite;
}

.bg-stage-4 .active-zone-highlight {
    opacity: 0.25;
    animation: zone-pulse-4 1.5s infinite;
}

@keyframes zone-pulse-1 {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.15; }
}

@keyframes zone-pulse-2 {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.2; }
}

@keyframes zone-pulse-3 {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.25; }
}

@keyframes zone-pulse-4 {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.3; }
}

/* ========== АДАПТИВНОСТЬ ========== */

@media (max-width: 768px) {
    .arena-platform {
        width: 100px;
        height: 100px;
    }
    
    .arena-platform.left {
        left: 10%;
    }
    
    .arena-platform.right {
        right: 10%;
    }
    
    .arena-enter-text {
        font-size: 36px;
    }
    
    .intro-text {
        font-size: 28px;
    }
    
    .win-effect {
        font-size: 20px;
        top: -30px;
    }
    
    .draw-effect {
        font-size: 26px;
    }
    
    .shape {
        opacity: 0.3 !important;
    }
    
    .shape.circle {
        width: 60px !important;
        height: 60px !important;
    }
    
    .shape.square {
        width: 50px !important;
        height: 50px !important;
    }
    
    .digital-grid {
        background-size: 20px 20px;
    }
}

@media (max-width: 480px) {
    .arena-platform {
        width: 80px;
        height: 80px;
    }
    
    .arena-enter-text {
        font-size: 28px;
    }
    
    .intro-text {
        font-size: 22px;
    }
    
    .win-effect {
        font-size: 18px;
        top: -25px;
    }
    
    .draw-effect {
        font-size: 20px;
    }
    
    .shape {
        opacity: 0.25 !important;
        filter: blur(1px) !important;
    }
    
    .shape.circle {
        width: 40px !important;
        height: 40px !important;
    }
    
    .shape.square {
        width: 35px !important;
        height: 35px !important;
    }
    
    .digital-grid {
        background-size: 15px 15px;
        opacity: 0.1 !important;
    }
    
    .digital-noise {
        opacity: 0.2;
    }
}

@media (max-width: 360px) {
    .battle-close-btn {
        min-width: 130px;
    }
}

/* ========== ФАЗА ПОИСКА ========== */
.battle-search-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.battle-search-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(40, 40, 40, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.5s ease;
}

.battle-search-circle.found {
    background: #ffd700;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.8);
}

.battle-vs-symbol {
    font-size: 40px;
    font-weight: 900;
    color: #ffd700;
    letter-spacing: 3px;
    z-index: 2;
    transition: all 0.3s ease;
}

.battle-search-circle.found .battle-vs-symbol {
    color: #000;
}

.battle-search-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.3);
    animation: search-pulse 1.5s ease-out infinite;
}

.battle-search-pulse.delay-1 {
    animation-delay: 0.5s;
}

@keyframes search-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.battle-search-pulse.found {
    border: 3px solid rgba(255, 215, 0, 0.8);
    animation: search-pulse-found 1s ease-out infinite;
}

@keyframes search-pulse-found {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.battle-search-text {
    color: #ffd700;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
    max-width: 80%;
    margin-top: 20px;
}

/* Затемнение экрана - ВЫШЕ ВСЕГО */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 999999;
}

.search-overlay.active {
    opacity: 1;
}

/* Желтая надпись на весь экран - ВЫШЕ ЗАТЕМНЕНИЯ */
.found-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    color: #ffd700;
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-shadow: 
        0 0 30px rgba(255, 215, 0, 0.7),
        0 0 60px rgba(255, 215, 0, 0.5);
    z-index: 1000000;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    pointer-events: none;
    text-align: center;
    font-family: 'Arial Black', sans-serif;
}

.found-message.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Адаптивность */
@media (max-width: 768px) {
    .found-message {
        font-size: 42px;
        letter-spacing: 6px;
    }
}

@media (max-width: 480px) {
    .found-message {
        font-size: 32px;
        letter-spacing: 4px;
        white-space: normal;
        width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 360px) {
    .found-message {
        font-size: 28px;
        letter-spacing: 3px;
    }
}

/* Стили для интерфейса ожидания в пуле */
.battle-pool-bottom {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    animation: pool-appear 0.5s ease;
}

@keyframes pool-appear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.battle-pool-info {
    color: #ffd700;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
    padding: 15px 25px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    max-width: 80%;
    backdrop-filter: blur(5px);
}

.battle-pool-info strong {
    color: #fff;
    background: rgba(255, 215, 0, 0.2);
    padding: 2px 8px;
    border-radius: 20px;
    margin: 0 2px;
}

.battle-close-pool-btn {
    padding: 12px 40px;
    background: rgba(255, 215, 0, 0.1);
    border: 1.5px solid #ffd700;
    color: #ffd700;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 160px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.battle-close-pool-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
}

.battle-close-pool-btn:active {
    transform: translateY(0);
}

.pool-status-badge {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
    border: 1px solid #ffd700;
    border-radius: 12px;
    padding: 15px 20px;
    margin: 15px 20px 5px 20px;
    position: relative;
    overflow: hidden;
    animation: badge-slide-in 0.3s ease;
}

.pool-status-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #ffd700;
    box-shadow: 0 0 10px #ffd700;
}

.badge-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.badge-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 215, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    animation: badge-pulse 2s infinite;
}

.badge-info {
    flex: 1;
}

.badge-title {
    color: #ffd700;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.badge-details {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

@keyframes badge-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes badge-pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }
}

.search-dots {
    display: inline-block;
    margin-left: 5px;
}

.search-dots span {
    opacity: 0;
    animation: dot-pulse 1.5s infinite;
    font-size: 24px;
    line-height: 1;
}

.search-dots span:nth-child(1) {
    animation-delay: 0s;
}

.search-dots span:nth-child(2) {
    animation-delay: 0.5s;
}

.search-dots span:nth-child(3) {
    animation-delay: 1s;
}

@keyframes dot-pulse {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.search-subtext {
    display: block;
    font-size: 14px;
    opacity: 0.7;
    margin-top: 15px;
    color: rgba(255, 255, 255, 0.8);
}

.search-timer {
    position: absolute;
    top: 20px;
    right: 20px;
    color: rgba(255, 215, 0, 0.6);
    font-size: 14px;
    font-family: monospace;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

/* ========== ЭКРАН ПОБЕДЫ (МИНИМАЛИСТИЧНЫЙ) ========== */

.victory-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.victory-screen.active {
    opacity: 1;
}

/* Фон как в модалке VERSUS */
.victory-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

/* Круги */
.victory-background .yellow-circle {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #ffd700;
    opacity: 0.1;
    animation: float 20s infinite linear;
}

.victory-background .circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

.victory-background .circle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    right: -50px;
    border-width: 3px;
    opacity: 0.15;
    animation-delay: -10s;
}

/* Квадраты */
.victory-background .yellow-square {
    position: absolute;
    border: 2px solid #ffd700;
    opacity: 0.08;
    animation: rotate 30s infinite linear;
}

.victory-background .square-1 {
    width: 150px;
    height: 150px;
    top: 20%;
    right: 10%;
    animation-delay: -5s;
}

.victory-background .square-2 {
    width: 100px;
    height: 100px;
    bottom: 30%;
    left: 15%;
    opacity: 0.12;
    animation-delay: -15s;
}

/* Треугольники */
.victory-background .yellow-triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    opacity: 0.1;
    animation: float 25s infinite linear reverse;
}

.victory-background .triangle-1 {
    border-width: 0 75px 130px 75px;
    border-color: transparent transparent #ffd700 transparent;
    top: 15%;
    left: 20%;
    animation-delay: -7s;
}

.victory-background .triangle-2 {
    border-width: 130px 75px 0 75px;
    border-color: #ffd700 transparent transparent transparent;
    bottom: 20%;
    right: 20%;
    opacity: 0.15;
    animation-delay: -17s;
}

/* Линии */
.victory-background .yellow-line {
    position: absolute;
    background: #ffd700;
    opacity: 0.05;
    animation: slide 20s infinite linear;
}

.victory-background .line-1 {
    width: 400px;
    height: 2px;
    top: 50%;
    left: -400px;
    animation-delay: -3s;
}

/* Анимации */
@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(100px, 100px) rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(100vw + 400px));
    }
}

/* Контент */
.victory-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

/* Надпись "ТЫ ПОБЕДИЛ" */
.victory-title {
    text-align: center;
}

.victory-title h2 {
    color: #ffd700;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 
        0 0 20px rgba(255, 215, 0, 0.5),
        2px 2px 0 rgba(0, 0, 0, 0.5);
    animation: title-fade 0.8s ease;
}

@keyframes title-fade {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Сумма выигрыша */
.victory-amount {
    text-align: center;
    margin: 20px 0;
}

.amount-value {
    color: #ffd700;
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 
        0 0 30px rgba(255, 215, 0, 0.7),
        0 0 60px rgba(255, 215, 0, 0.3);
    animation: amount-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.amount-currency {
    color: #ffd700;
    font-size: 32px;
    font-weight: 600;
    margin-left: 10px;
    opacity: 0.9;
}

@keyframes amount-pop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Вторичный текст */
.victory-message {
    text-align: center;
    color: rgba(255, 215, 0, 0.7);
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 1px;
    margin-top: 20px;
    animation: message-fade 1s ease;
}

@keyframes message-fade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== АДАПТИВНОСТЬ ========== */

@media (max-width: 768px) {
    .victory-title h2 {
        font-size: 32px;
        letter-spacing: 3px;
    }
    
    .amount-value {
        font-size: 70px;
    }
    
    .amount-currency {
        font-size: 28px;
    }
    
    .victory-message {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .victory-title h2 {
        font-size: 28px;
        letter-spacing: 2px;
    }
    
    .amount-value {
        font-size: 60px;
    }
    
    .amount-currency {
        font-size: 24px;
    }
    
    .victory-message {
        font-size: 15px;
        padding: 0 20px;
    }
}

@media (max-width: 360px) {
    .victory-title h2 {
        font-size: 24px;
    }
    
    .amount-value {
        font-size: 50px;
    }
    
    .amount-currency {
        font-size: 22px;
    }
}

/* Сообщение о поражении */
.battle-defeat-message {
    text-align: center;
    margin: 20px 0 15px;
    padding: 15px 20px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 215, 0, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    max-width: 320px;
    width: 100%;
    box-sizing: border-box;
}

.battle-defeat-message p {
    margin: 8px 0;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: 0.3px;
}

.battle-defeat-message p:first-child {
    color: #ffd700;
    font-weight: 400;
}

.battle-defeat-message .defeat-return {
    color: #ffd700;
    font-size: 18px;
    font-weight: 600;
    margin-top: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Адаптивность */
@media (max-width: 480px) {
    .battle-defeat-message {
        padding: 12px 15px;
        margin: 15px 0 10px;
    }
    
    .battle-defeat-message p {
        font-size: 14px;
        margin: 6px 0;
    }
    
    .battle-defeat-message .defeat-return {
        font-size: 16px;
        margin-top: 12px;
    }
}

@media (max-width: 360px) {
    .battle-defeat-message {
        padding: 10px 12px;
    }
    
    .battle-defeat-message p {
        font-size: 13px;
    }
    
    .battle-defeat-message .defeat-return {
        font-size: 15px;
    }
}

/* Кнопка закрыть на экране победы */
.victory-close-btn {
    background: transparent;
    border: 2px solid #ffd700;
    border-radius: 40px;
    padding: 14px 50px;
    color: #ffd700;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    margin-top: 30px;
    min-width: 200px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    animation: button-appear 1s ease;
}

.victory-close-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
}

.victory-close-btn:active {
    transform: translateY(0);
}

@keyframes button-appear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Адаптивность для кнопки */
@media (max-width: 480px) {
    .victory-close-btn {
        padding: 12px 40px;
        font-size: 16px;
        min-width: 180px;
        margin-top: 25px;
    }
}

@media (max-width: 360px) {
    .victory-close-btn {
        padding: 10px 35px;
        font-size: 15px;
        min-width: 160px;
        margin-top: 20px;
    }
}

/* Зеленая аура для победителя */
.battle-player.winner {
    position: relative;
}

.battle-player.winner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(0, 255, 0, 0.3) 0%,
        rgba(0, 255, 0, 0.1) 40%,
        transparent 70%
    );
    filter: blur(15px);
    z-index: -1;
    animation: winner-aura-pulse 2s infinite ease-in-out;
}

@keyframes winner-aura-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Для левого игрока */
.battle-player-left.winner::before {
    left: 50%;
}

/* Для правого игрока */
.battle-player-right.winner::before {
    left: 50%;
}

/* Дополнительное свечение вокруг аватара победителя */
.battle-player.winner .battle-player-avatar {
    border-color: #00ff00;
    box-shadow: 
        0 0 20px rgba(0, 255, 0, 0.5),
        0 0 40px rgba(0, 255, 0, 0.3);
    animation: winner-avatar-pulse 2s infinite;
}

@keyframes winner-avatar-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(0, 255, 0, 0.8);
    }
}

/* Имя победителя тоже с зеленым оттенком */
.battle-player.winner .battle-player-name {
    color: #00ff00;
    text-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
}

/* Общий счет победителя */
.battle-player.winner .battle-total-value {
    color: #00ff00;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
}

/* Убираем старые стили для победителя */
.battle-player.winner {
    background: transparent; /* Убираем фоновый цвет */
}

.battle-player.winner .battle-player-name {
    transform: none; /* Убираем увеличение */
}

/* ========== ФИНАЛЬНЫЙ UI БИТВЫ ========== */

/* Текст ПОБЕДА над аватаркой */
.player-victory-text {
    position: absolute;
    top: -35px; /* Поднял выше */
    left: 50%;
    transform: translateX(-50%);
    color: #ffd700;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    white-space: nowrap;
    animation: victory-text-appear 0.5s ease;
}

@keyframes victory-text-appear {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Финальный счет */
#final-score {
    color: rgba(255, 255, 255, 0.9);
    font-size: 28px;
    font-weight: 700;
    margin: 15px 0 10px; /* Уменьшил отступы */
    text-align: center;
    width: 100%;
    animation: score-appear 0.6s ease;
}

#final-score span {
    color: #ffd700;
    margin: 0 15px;
    font-weight: 800;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

@keyframes score-appear {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Подсказка */
#battle-mode-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 8px auto 10px; /* Уменьшил отступы */
    width: 100%;
    padding: 12px 20px;
    background: rgba(255, 215, 0, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    max-width: 400px;
    animation: hint-appear 0.7s ease;
}

.battle-mode-title {
    color: #ffd700;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.battle-mode-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-align: center;
    line-height: 1.4;
    max-width: 350px;
}

@keyframes hint-appear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Контейнер с кнопкой */
#close-battle-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 5px 0 15px; /* Уменьшил отступы */
    animation: close-appear 0.8s ease;
}

@keyframes close-appear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.battle-close-btn {
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid #ffd700;
    border-radius: 30px;
    padding: 12px 40px;
    color: #ffd700;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.battle-close-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.battle-close-btn:active {
    transform: translateY(0);
}

/* ========== АДАПТИВНОСТЬ ========== */

@media (max-width: 768px) {
    .player-victory-text {
        font-size: 16px;
        top: -30px;
    }
    
    #final-score {
        font-size: 24px;
        margin: 12px 0 8px;
    }
    
    #final-score span {
        margin: 0 12px;
    }
    
    #battle-mode-hint {
        padding: 10px 15px;
        margin: 6px auto 8px;
        max-width: 350px;
    }
    
    .battle-mode-title {
        font-size: 15px;
    }
    
    .battle-mode-description {
        font-size: 13px;
    }
    
    .battle-close-btn {
        padding: 10px 35px;
        font-size: 15px;
        min-width: 160px;
    }
}

@media (max-width: 480px) {
    .player-victory-text {
        font-size: 14px;
        top: -25px;
    }
    
    #final-score {
        font-size: 20px;
        margin: 10px 0 6px;
    }
    
    #final-score span {
        margin: 0 8px;
    }
    
    #battle-mode-hint {
        padding: 8px 12px;
        margin: 4px auto 6px;
        max-width: 300px;
    }
    
    .battle-mode-title {
        font-size: 14px;
    }
    
    .battle-mode-description {
        font-size: 12px;
        line-height: 1.4;
    }
    
    .battle-close-btn {
        padding: 8px 30px;
        font-size: 14px;
        min-width: 140px;
    }
}

@media (max-width: 360px) {
    .player-victory-text {
        font-size: 12px;
        top: -22px;
    }
    
    #final-score {
        font-size: 18px;
        margin: 8px 0 4px;
    }
    
    #battle-mode-hint {
        padding: 6px 10px;
    }
    
    .battle-mode-title {
        font-size: 13px;
    }
    
    .battle-mode-description {
        font-size: 11px;
    }
    
    .battle-close-btn {
        padding: 6px 25px;
        font-size: 13px;
        min-width: 120px;
    }
}