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

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;
}

/* Горизонтальные полоски помех */
#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;
}

/* Вертикальный шум */
#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;
}

@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: visible; /* Изменено для предотвращения обрезания текста */
    scrollbar-width: none;
    display: flex; 
    flex-direction: column;
    /* Низкое разрешение */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    /* Убеждаемся, что контент не обрезается */
    box-sizing: border-box;
    /* Привязка прокрутки к строкам */
    scroll-snap-type: y proximity;
    scroll-behavior: auto;
}

/* Внутренний контент */
#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-all;
  font-family: mononoki, monospace;
  /* Рендерим текст в маленьком размере (4px) */
  font-size: 4px;
  line-height: 1.25;
  /* Масштабируем без сглаживания до нормального размера (4px * 2.5 = 10px) */
  transform: scale(2.5);
  transform-origin: 0 0;
  /* Компенсируем ширину для масштабирования */
  width: calc(100% / 2.5);
  min-width: calc(100% / 2.5);
  /* Отключаем сглаживание при масштабировании */
  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: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
  letter-spacing: 0.08em;
  animation-duration: 0.03s;
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Специальный класс для красного текста BIOS */
.text-red {
  color: #f00 !important;
  /* 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), 0 0 3px rgba(255, 0, 0, 0.6);
  letter-spacing: 0.08em;
  animation-duration: 0.03s;
  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: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
letter-spacing: 0.08em;
animation-duration: 0.03s;
animation-name: textflicker;
animation-iteration-count: infinite;
animation-direction: alternate;
/* Наследуем масштабирование от родителя */
font-size: inherit;
/* Привязка прокрутки к строкам */
scroll-snap-align: start;
}

#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: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
  letter-spacing: 0.08em;
  animation-duration: 0.03s;
  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: 15px; margin: 10px 0; display: inline-block; }

.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: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
letter-spacing: 0.08em;
animation-duration: 0.03s;
animation-name: textflicker;
animation-iteration-count: infinite;
animation-direction: alternate;
/* Наследуем масштабирование от родителя */
}

/* Анимация мерцания CRT */
@keyframes textflicker {
from {
  text-shadow: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
}
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: 0.04rem 0 0.03rem rgba(0, 0, 0, 0.8), -0.05rem 0 0.03rem rgba(0, 0, 0, 0.8);
  letter-spacing: 0.08em;
  animation-duration: 0.03s;
  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: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
  letter-spacing: 0.08em;
  animation-duration: 0.03s;
  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: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
  letter-spacing: 0.08em;
  animation-duration: 0.03s;
  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: 0.04rem 0 0.03rem rgba(0, 0, 0, 0.8), -0.05rem 0 0.03rem rgba(0, 0, 0, 0.8);
}
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: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
  letter-spacing: 0.08em;
}

.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: 0.04rem 0 0.03rem rgba(234, 54, 175, 0.5), -0.05rem 0 0.03rem rgba(117, 250, 105, 0.5);
  letter-spacing: 0.08em;
}