@font-face {
  font-family: 'Fixedsys';
  src: url('Fixedsys.eot');
  src: url('Fixedsys.eot?#iefix') format('embedded-opentype'),
       url('Fixedsys.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, body {
  margin: 0;
  width: 100%;
  min-height: 100vh; 
  
  display: flex;
  justify-content: center; 
  align-items: flex-start; 
  box-sizing: border-box;
  padding: 40px 10px;

  font-family: 'Fixedsys', monospace;
  color: #ffffff; 

  /*background-color: #050505; */
}

/* Фиксируем живой фон под контентом */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;          /* Обязательно уводит на задний план */
  pointer-events: none; /* Позволяет кликать сквозь холст */
}

.terminal {
  max-width: 900px; 
  width: 100%;
  padding: 20px; 
  box-sizing: border-box;
  text-align: center; 
  position: relative;   /* Добавьте эту строку, чтобы контент встал ПОВЕРХ холста */
  z-index: 1;           /* Поднимает контент над фоном */
}


/* Чтобы контент BIOS окон гарантированно перекрывал холст и под ними ничего не мигало */
.win-content {
  border-left: 1px solid rgba(255, 255, 255, 0.15);  /* Полупрозрачные боковые рамки */
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5px 15px;
  
  /* ЭФФЕКТ СЛИЯНИЯ: прозрачный черный фон */
  /*ackground-color: rgba(5, 5, 5, 0.85); */
  
  margin: 0;
}


/* Шапка и портрет */
.terminal-header {
  margin-bottom: 20px;
}

.ascii-portrait {
  font-family: 'Fixedsys', monospace;
  white-space: pre;
  line-height: 0.95;
  font-size: 11px;
  display: inline-block;
  margin: 0 auto;
  text-align: left;
}

.system-tag {
  margin-top: 10px;
  font-size: 1.1em;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ========================================================== */
/* НАВИГАЦИЯ (BIOS МЕНЮ)                                      */
/* ========================================================== */
.bios-navigation {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  gap: 20px; /* Отступы между кнопками */
}

.bios-btn {
  color: #ffffff;
  text-decoration: none;
  padding: 4px 12px;
  transition: all 0.1s ease;
}

/* Эффект выделения кнопки в стиле старых меню */
.bios-btn:hover {
  background-color: #ffffff;
  color: #050505;
  font-weight: bold;
}

/* ========================================================== */
/* ДВУХКОЛОНОЧНЫЙ ИНТЕРФЕЙС (ГРИД)                             */
/* ========================================================== */
.bios-grid {
  display: grid;
  /* Левая колонка занимает больше места (3 части), правая меньше (1 часть) */
  grid-template-columns: 3fr 1.3fr; 
  gap: 25px; /* Зазор между окнами и колонками */
  text-align: left;
}

/* Стили для адаптивности: на смартфонах колонки встанут друг под друга */
@media (max-width: 768px) {
  .bios-grid {
    grid-template-columns: 1fr;
  }
}

/* Контейнеры колонок, выстраивающие свои окна вертикально */
.grid-left, .grid-right {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Расстояние между окнами внутри одной колонки */
}

/* ========================================================== */
/* BIOS ОКНА С ASCII РАМКАМИ                                  */
/* ========================================================== */
.bios-window {
  font-family: 'Fixedsys', monospace;
  display: flex;
  flex-direction: column;
}

/* Верхняя и нижняя линии рамки */
.win-top, .win-bottom {
  white-space: pre;
  color: #aaaaaa; /* Чуть приглушенный цвет для рамок */
  font-size: 1em;
  letter-spacing: -0.5px; /* Помогает рамкам стыковаться плотнее */
}

/* Боковые стенки окна и внутренний контент */
.win-content {
  border-left: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  padding: 5px 15px;
  background-color: #050505; /* Окна непрозрачные, перекрывают фоновую сетку */
  margin: 0;
}

.win-content p {
  margin: 8px 0;
  line-height: 1.3;
}

/* Линия разделения внутри окон */
.win-line {
  border: none;
  border-top: 1px dashed #aaaaaa;
  margin: 10px 0;
}

/* Подвал */
.terminal-footer {
  margin-top: 40px;
  color: #555555;
  font-size: 0.9em;
}

/* ========================================================== */
/* ASCII / BIOS СКРОЛЛБАР                                     */
/* ========================================================== */

/* Код для Chrome, Edge, Яндекс, Opera и Safari */
::-webkit-scrollbar {
  width: 14px; 
}
::-webkit-scrollbar-track {
  background-color: #050505;
  border-left: 1px dashed rgba(255, 255, 255, 0.15); 
}
::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  border: 3px solid #050505; 
}
::-webkit-scrollbar-thumb:hover {
  background-color: #00ff00; 
}

/* Специальный хак для Firefox, чтобы убрать ошибку из линтера */
@-moz-document url-prefix() {
  html {
    scrollbar-color: #ffffff #050505;
  }
}