/* Добавьте эти медиа-запросы в конец вашего CSS */

/* Увеличенный масштаб для ПК */
@media (min-width: 1024px) {
  html {
    font-size: 18px; /* Увеличиваем базовый размер шрифта */
  }

  .main-container {
    max-width: 1200px; /* Увеличиваем максимальную ширину контейнера */
    padding: 40px 24px 0 24px; /* Больше отступы */
  }

  .card {
    padding: 30px; /* Больше внутренние отступы */
    border-radius: 28px; /* Больше скругление углов */
    min-width: 320px; /* Увеличиваем минимальную ширину */
  }

  .profile-card {
    max-width: 360px; /* Увеличиваем максимальную ширину профиля */
  }

  .avatar {
    width: 110px;
    height: 110px; /* Увеличиваем аватар */
  }

  .terminal {
    height: 300px; /* Увеличиваем высоту терминала */
    font-size: 16px; /* Увеличиваем шрифт в терминале */
  }

  .buttons {
    gap: 16px; /* Больше расстояние между кнопками */
  }

  .buttons a {
    padding: 14px 18px; /* Больше кнопки */
  }
}

/* Фиксированный размер терминала на мобильных */
@media (max-width: 768px) {
  html, body {
    font-size: 16px; /* Стандартный размер для мобильных */
  }

  .terminal {
    height: 200px !important;
    max-height: 200px !important;
    font-size: 14px; /* Оптимальный размер для мобильных */
    padding: 15px;
  }

  .card {
    min-width: 100%;
    max-width: 100%;
    padding: 20px;
  }

  .profile-card {
    max-width: 100%;
  }

  .avatar {
    width: 90px;
    height: 90px;
  }

  .username {
    font-size: 24px;
  }

  .buttons {
    grid-template-columns: 1fr; /* Одна колонка кнопок на мобильных */
  }

  .secret-btn {
    grid-column: span 1;
  }
}

/* Дополнительные улучшения для очень маленьких экранов */
@media (max-width: 480px) {
  .main-container {
    padding: 20px 12px 0 12px;
  }

  .card {
    padding: 20px;
    border-radius: 20px;
  }

  .buttons {
    grid-template-columns: 1fr; /* Одна колонка кнопок */
  }

  .secret-btn {
    grid-column: span 1;
  }
}