@font-face {
  font-family: 'mononoki';
  src: url('mononoki.ttf') format('truetype');
}

:root {
  /* CRT эффекты - общие переменные для уменьшения дубликатов */
  --crt-text-shadow: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
  --crt-text-shadow-inverted: 0.04rem 0 0.03rem rgba(0, 0, 0, 0.8), -0.05rem 0 0.03rem rgba(0, 0, 0, 0.8);
  --crt-letter-spacing: 0.08em;
  --crt-animation-duration: 0.03s;
}

body, html {
  margin: 0; padding: 0;
  background: #000; color: #fff;
  font-family: 'mononoki', monospace;
  font-size: 14px; overflow: hidden; /* Уменьшен размер текста */
  height: 100vh;
}

#crt-screen {
  position: relative; 
  height: 100vh; 
  width: 100vw;
  background: #000; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  overflow: hidden;
}

/* Эффект помех с горизонтальными полосками (как на старых CRT экранах) */
#vhs-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: transparent;
  overflow: hidden;
  opacity: 0.4;
  /* Оптимизация производительности */
  will-change: transform;
  transform: translateZ(0);
}

/* Горизонтальные полоски помех */
#vhs-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 2px
  );
  animation: scanlines-move 0.08s linear infinite;
  opacity: 0.5;
  /* Оптимизация производительности */
  will-change: transform;
  transform: translateZ(0);
}

/* Вертикальный шум */
#vhs-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
      repeating-linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.02) 0px,
          transparent 0.5px,
          transparent 1px,
          rgba(255, 255, 255, 0.02) 1.5px
      );
  animation: noise-flicker 0.15s steps(8) infinite;
  opacity: 0.3;
  /* Оптимизация производительности */
  will-change: transform, opacity;
  transform: translateZ(0);
}

@keyframes scanlines-move {
  0% {
      transform: translateY(0);
  }
  100% {
      transform: translateY(2px);
  }
}

@keyframes noise-flicker {
  0%, 100% {
      opacity: 0.3;
      transform: translateX(0);
  }
  25% {
      opacity: 0.25;
      transform: translateX(-1px);
  }
  50% {
      opacity: 0.35;
      transform: translateX(1px);
  }
  75% {
      opacity: 0.28;
      transform: translateX(-0.5px);
  }
}

/* Обертка для терминала */
#terminal-padding {
    position: relative; 
    width: 100%; 
    height: 100%;
    padding: 20px; 
    background: #000;
    box-shadow: inset 0 0 60px rgba(255,255,255,0.05);
    border-radius: 0; 
    border: none;
    overflow-y: auto; 
    overflow-x: hidden; /* Скрываем горизонтальную прокрутку, текст переносится */
    scrollbar-width: none;
    display: flex; 
    flex-direction: column;
    /* Низкое разрешение */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    /* Убеждаемся, что контент не обрезается */
    box-sizing: border-box;
    /* Привязка прокрутки к строкам реализована через JS */
    scroll-behavior: auto;
    /* Оптимизация производительности */
    will-change: scroll-position;
}

/* Внутренний контент */
#terminal-padding > * {
  position: relative;
  z-index: 0;
}

/* В полноэкранном режиме убираем все границы */
body:fullscreen #crt-screen,
body:-webkit-full-screen #crt-screen,
body:-moz-full-screen #crt-screen,
body:-ms-fullscreen #crt-screen,
#crt-screen.fullscreen {
  background: #000;
  padding: 0;
  margin: 0;
}

body:fullscreen #terminal-padding,
body:-webkit-full-screen #terminal-padding,
body:-moz-full-screen #terminal-padding,
body:-ms-fullscreen #terminal-padding,
#terminal-padding.fullscreen {
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  width: 100%;
  height: 100%;
}


#terminal {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: mononoki, monospace;
  /* Рендерим текст в маленьком размере (4px) */
  font-size: 4px;
  line-height: 1.25;
  /* Масштабируем без сглаживания - значение устанавливается через JS на основе devicePixelRatio */
  /* Значение по умолчанию через CSS переменную, JS перезаписывает через inline стили (высший приоритет) */
  transform: scale(var(--terminal-scale, 2.5));
  transform-origin: 0 0;
  /* Ширина устанавливается через JS для точного расчета */
  /* Отключаем сглаживание при масштабировании */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* Дополнительная пикселизация текста */
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  /* CRT эффект - RGB смещение и мерцание */
  text-shadow: var(--crt-text-shadow);
  letter-spacing: var(--crt-letter-spacing);
  animation-duration: var(--crt-animation-duration);
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* Предотвращаем обрезание текста */
  overflow: visible;
  box-sizing: border-box;
}

/* Медиа-запросы для дополнительной адаптивности */
@media (max-width: 768px) {
  #terminal {
    font-size: 4px;
  }
  #terminal-padding {
    padding: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1400px) {
  #terminal {
    font-size: 4px;
  }
}

@media (min-width: 1400px) and (max-width: 2000px) {
  #terminal {
    font-size: 4px;
  }
}

@media (min-width: 2000px) {
  #terminal {
    font-size: 4px;
  }
}

/* Специальный класс для красного текста BIOS */
.text-red {
  color: #f00 !important;
  /* CRT эффект для красного текста */
  text-shadow: var(--crt-text-shadow), 0 0 3px rgba(255, 0, 0, 0.6);
  letter-spacing: var(--crt-letter-spacing);
  animation-duration: var(--crt-animation-duration);
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* Наследуем масштабирование от родителя */
  font-size: inherit;
}

/* Стили для логотипа */
#logo-container {
  padding-bottom: 20px; /* Отступ между лого и текстом */
}
#logo-container img {
  max-width: 250px;
  /* Если изображение не красное по умолчанию, этот фильтр сделает его красным */
  filter: invert(14%) sepia(97%) saturate(7351%) hue-rotate(356deg) brightness(100%) contrast(124%); 
}

.hidden { display: none !important; }

.line { 
line-height: 1.4; 
color: green !important; 
/* CRT эффект для строк */
text-shadow: var(--crt-text-shadow);
letter-spacing: var(--crt-letter-spacing);
animation-duration: var(--crt-animation-duration);
animation-name: textflicker;
animation-iteration-count: infinite;
animation-direction: alternate;
/* Наследуем масштабирование от родителя */
font-size: inherit;
/* Привязка прокрутки к строкам реализована через JS */
}

#cmd-input {
  background: transparent; border: none; color: green !important;
  font-family: 'mononoki', monospace; font-size: inherit;
  outline: none; width: 60%; caret-color: green;
  /* CRT эффект для вводимого текста - явно применяем */
  text-shadow: var(--crt-text-shadow);
  letter-spacing: var(--crt-letter-spacing);
  animation-duration: var(--crt-animation-duration);
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.prog-link { color: green; cursor: pointer; text-decoration: underline; }
.prog-link:hover { background: green; color: #000 !important; }

.card { 
  border: 1px solid #fff; 
  padding: 10px; 
  margin: 5px 0; 
  display: inline-block;
  color: #0f0;
  background: rgba(0, 0, 0, 0.3);
}
.card > div {
  margin: 2px 0;
  line-height: 1.3;
}

.game-canvas {
  color: #0f0 !important;
  background: #000;
  padding: 8px;
  border: 1px solid #0a0;
  margin: 4px 0;
}

.prompt-line {
display: flex;
align-items: center;
min-height: 1.4em; /* гарантирует высоту строки */
white-space: pre;
font-family: monospace;
}

.prompt-line input {
background: transparent;
border: none;
color: green;
font-family: monospace;
font-size: inherit;
outline: none;
padding: 0;
margin: 0;
width: 100%;
/* Чтобы курсор был виден */
caret-color: green;
/* CRT эффект для вводимого текста - явно применяем */
text-shadow: var(--crt-text-shadow);
letter-spacing: var(--crt-letter-spacing);
animation-duration: var(--crt-animation-duration);
animation-name: textflicker;
animation-iteration-count: infinite;
animation-direction: alternate;
/* Наследуем масштабирование от родителя */
}

/* Анимация мерцания CRT */
@keyframes textflicker {
from {
  text-shadow: var(--crt-text-shadow);
}
to {
  text-shadow: 0.05rem 0.01rem 0.03rem rgba(234, 54, 175, 0.45), -0.04rem -0.01rem 0.03rem rgba(117, 250, 105, 0.45);
}
}

/* Стили для nano редактора */
.nano-status-top {
  /* Инвертированный эффект - темно-зеленый фон (визуально близок к обычному тексту), черный текст (как будто вырезан) */
  background: #080 !important; /* Чуть ярче темно-зеленый */
  color: #000 !important;
  padding: 2px 4px;
  margin: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* CRT эффект для инвертированного текста */
  text-shadow: var(--crt-text-shadow-inverted);
  letter-spacing: var(--crt-letter-spacing);
  animation-duration: var(--crt-animation-duration);
  animation-name: textflicker-inverted;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  font-size: inherit;
  /* Убираем зеленый цвет от .line */
  color: #000 !important;
}

.nano-status-bottom {
  /* Обычный зеленый текст без инвертирования */
  background: transparent !important;
  color: #0f0 !important;
  padding: 2px 4px;
  margin: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* CRT эффект для обычного текста */
  text-shadow: var(--crt-text-shadow);
  letter-spacing: var(--crt-letter-spacing);
  animation-duration: var(--crt-animation-duration);
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  font-size: inherit;
}

.nano-content {
/* CRT эффект для содержимого nano */
font-size: inherit;
color: #0f0 !important;
/* Наследуем CRT эффекты от .line */
}

.nano-input {
  width: 100%;
  background: #000;
  color: #0f0;
  /* CRT эффект для рамки */
  border: 1px solid #0a0;
  box-shadow: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.4), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.4);
  font-family: mononoki, monospace;
  padding: 5px;
  /* Наследуем размер от родителя (#terminal уже масштабирован) */
  font-size: inherit;
  /* Отключаем сглаживание */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  /* CRT эффект для вводимого текста - явно применяем */
  text-shadow: var(--crt-text-shadow);
  letter-spacing: var(--crt-letter-spacing);
  animation-duration: var(--crt-animation-duration);
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  caret-color: #0f0;
  resize: none;
  outline: none;
  box-sizing: border-box;
}

/* Анимация мерцания для инвертированного текста */
@keyframes textflicker-inverted {
from {
  text-shadow: var(--crt-text-shadow-inverted);
}
to {
  text-shadow: 0.05rem 0.01rem 0.03rem rgba(0, 0, 0, 0.7), -0.04rem -0.01rem 0.03rem rgba(0, 0, 0, 0.7);
}
}

/* Стили для автодополнения команд */
#cmd-suggestions {
  margin-bottom: 2px;
}

.cmd-suggestion-item {
  padding: 1px 4px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  font-size: inherit;
  /* CRT эффект */
  text-shadow: var(--crt-text-shadow);
  letter-spacing: var(--crt-letter-spacing);
}

.cmd-suggestion-item:hover {
  background: #0a0 !important;
  color: #000 !important;
  opacity: 1 !important;
}

.cmd-suggestion-indicator {
  color: #0a0 !important;
  opacity: 0.5;
  text-align: center;
  padding: 1px 0;
  font-size: inherit;
  /* CRT эффект */
  text-shadow: var(--crt-text-shadow);
  letter-spacing: var(--crt-letter-spacing);
}