/* ==========================================================================
   ЧАСТЬ 1: НАСТРОЙКА ПАЛИТРЫ И ОСНОВНОЙ СЕТКИ САЙТА
   ========================================================================== */

/* ФУНКЦИЯ 1: Цветовые переменные сбалансированной темно-синей темы */
:root {
  --bg-color: #16222f;       /* Насыщенный тёмно-синий фон вместо мрачного чёрного */
  --box-color: #213041;      /* Светлые сине-стальные карточки для крутого объёма */
  --text-color: #f4fafb;     /* Чистый кристальный текст (идеальная читаемость) */
  --text-muted: #8ca3b5;     /* Повышенная яркость для дат и подписей */
  --accent-color: #00f0ff;    /* Обжигающий neon бирюзовый Cyan */
  --accent-hover: #00c3cf;    /* Насыщенный бирюзовый при наведении мыши */
}

/* ФУНКЦИЯ 2: Сброс стандартных встроенных отступов браузера */
* {
  box-sizing: border-box;    /* Включаем границы (border) и поля (padding) в ширину */
  margin: 0;                 /* Полностью обнуляем внешние отступы элементов */
  padding: 0;                /* Полностью обнуляем внутренние отступы элементов */
}

/* ФУНКЦИЯ 3: Базовый слой страницы (body) с центрированием */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Системные шрифты Telegram */
  background-color: var(--bg-color); /* Устанавливаем фирменный темно-синий фон */
  color: var(--text-color);          /* Устанавливаем светлый цвет букв по умолчанию */
  display: flex;                     /* Включаем гибкую сетку Flexbox для выравнивания */
  justify-content: center;           /* Центрируем весь контент сайта по горизонтали */
  padding: 24px;                     /* Задаем защитные внешние отступы от краев экрана */
}

/* ФУНКЦИЯ 4: Ограничитель ширины контента под мобильный чат */
.app-container {
  width: 100%;               /* Растягиваем контейнер на всю доступную ширину экрана */
  max-width: 580px;          /* Расширяем сайт до 580px, чтобы крупные превью встали ровно */
  display: flex;             /* Включаем Flexbox для вертикального построения блоков */
  flex-direction: column;    /* Выстраиваем элементы строго сверху вниз */
  gap: 12px;                 /* Задаем фиксированный шаг-отступ между всеми блоками */
}
/* ==========================================================================
   ЧАСТЬ 2: ШАПКА, ИНТЕРФЕЙС НАВИГАЦИИ (TABS) И ЛЕНТА НОВОСТЕЙ
   ========================================================================== */

/* ФУНКЦИЯ 5: Верхняя бренд-панель для Phaser логотипа */
.top-bar {
  background-color: var(--box-color);
  padding: 14px 28px;        /* Задаем внутренние поля плашки для объема */
  border-radius: 14px;       /* Красиво скругляем углы верхней плашки */
  display: flex;             /* Горизонтальное выравнивание элементов внутри */
  align-items: center;       /* Центрируем логотип Phaser и надпись по вертикали */
  justify-content: space-between; /* Разносим элементы: логотип слева, надпись справа */
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Мягкая тень под блоком для объема */
  margin-bottom: 2px;        /* Небольшой зазор до следующего блока хедера */
}

/* ФУНКЦИЯ 6: Контейнер для фиксации размера холста Phaser */
#phaser-logo {
  width: 210px;              /* Ширина строго равна width игры в logo.js */
  height: 55px;              /* Высота строго равна height игры в logo.js */
  display: flex;             /* Flexbox для центрирования холста внутри */
  align-items: center;       /* Центрируем неоновые буквы по вертикали */
  overflow: hidden;          /* Обрезаем эффекты, вылезающие за пределы */
}

.site-title {
  font-size: 14px;
  color: var(--text-muted);  /* Приглушенный сине-серый цвет текста */
  font-weight: 500;
}

/* ФУНКЦИЯ 7: Основной блок профиля в стиле Telegram-каналов */
.header {
  background-color: var(--box-color);
  padding: 18px 22px;        /* Расширяем внутренние отступы шапки */
  border-radius: 14px 14px 0 0; /* Скругляем только верхние углы, снизу прижато меню */
  display: flex;             /* Аватарка и текст идут строго в одну строку */
  align-items: center;       /* Выравниваем иконку и заголовки по центру */
  gap: 18px;                 /* Зазор 18px между аватаром и текстом */
}

.avatar {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #00f0ff, #005b66); /* Неоновый градиент */
  border-radius: 50%;        /* Идеальный круг */
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;           /* Крупная иконка-смайлик */
}

.header-info h1 { font-size: 18px; font-weight: 600; }
.header-info p { font-size: 14px; color: var(--text-muted); margin-top: 2px; }

/* ФУНКЦИЯ 8: Меню переключения разделов */
.tabs-container {
  display: flex;
  background-color: var(--box-color);
  border-radius: 0 0 14px 14px; /* Скругляем только нижние углы */
  padding: 0 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.04); /* Тонкий разделитель сверху */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  margin-bottom: 6px;        /* Зазор перед карточками */
}

.tab {
  flex: 1; max-width: 110px; margin: 0 auto; text-align: center;
  padding: 16px 0px 12px 0px; /* Отступы с учетом короткой активной линии */
  font-size: 15px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: color 0.2s; position: relative;
}

.tab:hover { color: var(--text-color); }
.tab.active {
  color: var(--accent-color); font-weight: 700;
  border-bottom: 3px solid var(--accent-color); /* Короткая неоновая полоса */
}

/* ФУНКЦИЯ 9: Классическая карточка сообщения (Блок новостей) */
.news-card {
  background-color: var(--box-color);
  padding: 16px 20px; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; gap: 0;
}

.news-text {
  font-size: 16px; line-height: 1.55; color: var(--text-color);
  word-wrap: break-word; position: relative; width: 100%;
}
/* ==========================================================================
   ЧАСТЬ 3: ДВУХКОЛОНОЧНЫЕ ПРОЕКТЫ, КАРТИНКИ, КОНТАКТЫ И АДАПТИВНОСТЬ
   ========================================================================== */

/* ФУНКЦИЯ 10: Элементы метаданных времени и матовые плашки-бейджи */
.news-date {
  float: right; margin-top: 6px; margin-left: 10px;
  font-size: 12px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 3px; user-select: none;
}

.tg-check { width: 14px; height: 14px; fill: var(--accent-color); }

.news-title-badge {
  display: inline-block; background-color: #1c2a38; /* Матовый серо-стальной */
  padding: 5px 12px; border-radius: 6px; margin-bottom: 10px; align-self: flex-start;
}

.news-title-text { font-size: 15.5px; font-weight: 700; color: #ffffff; letter-spacing: 0.1px; }
.news-date-badge { background-color: #1c2a38; padding: 4px 10px; border-radius: 20px; font-weight: 600; color: var(--text-muted); }

/* ФУНКЦИЯ 11: Карточка проектов и левая колонка с кнопкой под фото */
.project-card-container {
  background-color: var(--box-color); border-radius: 12px; padding: 16px;
  display: flex; gap: 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); position: relative;
}

.project-left-column {
  display: flex; flex-direction: column; gap: 8px; width: 160px; min-width: 160px;
}

.project-image-box {
  width: 100%; height: 110px; border-radius: 8px; overflow: hidden;
  background-color: rgba(255,255,255,0.01); display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0, 240, 255, 0.05);
}
.project-image-box img { width: 100%; height: 100%; object-fit: cover; }

.project-btn {
  display: block; width: 100%; text-align: center; font-size: 13px; font-weight: 600;
  background-color: rgba(0, 240, 255, 0.06); color: var(--accent-color);
  border: 1px solid rgba(0, 240, 255, 0.15); padding: 6px 0; border-radius: 6px;
  text-decoration: none; transition: background-color 0.2s, border-color 0.2s;
}
.project-btn:hover { background-color: rgba(0, 240, 255, 0.12); border-color: var(--accent-color); }

/* ФУНКЦИЯ 12: Правая колонка проекта и логика авто-спойлера */
.project-info-box {
  flex: 1; display: flex; flex-direction: column; padding-bottom: 26px; align-items: flex-start;
}

.project-text-body {
  font-size: 15px; line-height: 1.5; color: var(--text-color); margin-top: 4px; margin-bottom: 10px;
  max-height: 4.5em; overflow: hidden; transition: max-height 0.4s ease; position: relative; width: 100%;
}

/* Размытие нижней строки свернутого текста */
.project-text-body.text-masked::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 25px;
  background: linear-gradient(to bottom, rgba(33, 48, 65, 0), var(--box-color));
  pointer-events: none; transition: opacity 0.2s ease;
}

.read-more-btn {
  font-size: 13px; color: var(--accent-color); font-weight: 600; cursor: pointer;
  margin-top: 4px; margin-bottom: 10px; align-self: flex-start; user-select: none; transition: opacity 0.2s;
}
.read-more-btn:hover { opacity: 0.8; }

.project-info-box .news-date-badge { position: absolute; bottom: 12px; right: 16px; font-size: 11.5px; }

/* ФУНКЦИЯ 13: Разделы Контакты, Подвал и Новые адаптивные картинки в новостях */
.contact-card { display: flex; flex-direction: column; gap: 6px; }
.contact-subtitle { font-size: 16px; font-weight: 500; color: var(--text-color); text-align: left; }
.contact-body-text { font-size: 14.5px; color: var(--text-muted); text-align: left; line-height: 1.5; }

.footer { text-align: center; padding: 24px 0 12px 0; font-size: 13px; color: var(--text-muted); user-select: none; }

.news-image-box {
  width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; margin-bottom: 12px;
  border: 1px solid rgba(0, 240, 255, 0.08); background-color: rgba(255, 255, 255, 0.01);
}
.news-image-box img { width: 100%; height: 100%; object-fit: contain; display: block; }

.news-text-container { display: flex; flex-direction: column; align-items: flex-start; position: relative; width: 100%; }
.news-card .news-date-badge { align-self: flex-end; margin-top: 8px; font-size: 11.5px; }

/* ФУНКЦИЯ 14: Анимация списков и адаптивная мобильная сетка */
.news-feed { display: flex; flex-direction: column; gap: 10px; animation: fadeInTab 0.35s ease-out; }

@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 440px) {
  body { padding: 8px; }
  .project-card-container { flex-direction: column; gap: 12px; }
  .project-left-column { width: 100%; min-width: 100%; }
  .project-image-box { height: 180px; }
  .news-card { padding: 12px 16px; }
}