html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #00ff55;
  font-family: monospace;
}
h1 {
  font-size: 24px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 18px;
}
p {
  font-size: 14px;
  padding-top: 5px;
}
b {
  font-weight: bold;
}
a {
  text-decoration: none;
  color: white;
}
/* общая CRT-матрица */
.crt {
  position: relative;
  height: 100vh;
  overflow: hidden;
  /* скан-линии */
  /* шум */
}
.crt:before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent, transparent 2px, rgba(0, 255, 0, 0.05) 3px);
  pointer-events: none;
}
.crt:after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAD1BMVEUAAAAAAAD///8AAAD///+tW0uFAAAAEklEQVR4nGNgYGBgAAAADAABYy3qGQAAAABJRU5ErkJggg==");
  opacity: 0.07;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* сетка: реклама — игра — реклама */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  height: 100%;
}
.left,
.right {
  background: #020202;
  border-left: 1px solid #003300;
}
/* ===========================================
   ███   ЛЕВАЯ ПАНЕЛЬ - FATE ULTRA TERMINAL   ███
   =========================================== */
.left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding: 25px 10px;
  text-align: center;
  width: 100%;
  height: 100%;
  border-right: 1px solid #001d00;
  color: #00ff55;
  font-size: 16px;
  font-family: monospace;
  /* свечение CRT */
  text-shadow: 0 0 4px #00ff55, 0 0 8px #00ff55;
  /* зелёная рамка */
  /* ========================== */
  /* ВНУТРЕННИЙ СПИСОК МЕНЮ     */
  /* ========================== */
  /* пункт меню */
  /* пульсация текста */
}
.left ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  /* вертикальная центровка */
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1;
}
.left li {
  cursor: pointer;
  padding: 6px 0;
  position: relative;
  /* свечения пунктов */
  animation: left-menu-pulse 2s infinite alternate ease-in-out;
  /* эффект старого монитора */
  filter: drop-shadow(0 0 4px #00ff55);
  transition: all 0.2s;
  /* сильное свечение при наведении */
  /* ========================== */
  /* ДОП. ГЛИЧИ ПРИ ХОВЕРЕ      */
  /* ========================== */
  /* красная тень */
  /* голубая тень */
  /* глич при наведении */
  /* ========================== */
  /* ЭФФЕКТ ЭЛТ — КАТОДНАЯ ДУГА */
  /* ========================== */
}
.left li:hover {
  color: #80ffaa;
  text-shadow: 0 0 16px #b3ffcc, 0 0 30px #b3ffcc;
  transform: scale(1.03);
}
.left li::before,
.left li::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}
.left li::before {
  color: #ff0033;
  transform: translate(2px, 0);
}
.left li::after {
  color: #00ddff;
  transform: translate(-2px, 0);
}
.left li:hover::before,
.left li:hover::after {
  opacity: 0.5;
  animation: glitch-left 0.2s infinite;
  content: "->" attr(data-text) "<-";
}
.left li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background: repeating-linear-gradient(to bottom, rgba(0, 255, 0, 0.03), rgba(0, 255, 0, 0.03) 2px, transparent 3px);
  animation: crt-scroll 4s linear infinite;
}
@keyframes left-menu-pulse {
  0% {
    text-shadow: 0 0 3px #00ff55;
  }
  100% {
    text-shadow: 0 0 12px #00ff55;
  }
}
@keyframes glitch-left {
  0% {
    transform: translate(-1px, 0);
  }
  50% {
    transform: translate(2px, -1px);
  }
  100% {
    transform: translate(-2px, 1px);
  }
}
@keyframes crt-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}
/* центр */
.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
}
.game-title {
  font-size: 48px;
  margin-bottom: 12px;
  animation: glow 0.5s infinite alternate;
  color: #c00000;
  text-shadow: 0 0 3px #00ff55;
}
/* окно игры — чистый терминал */
.game-window {
  width: 800px;
  height: 800px;
  background: #000;
  border: 2px solid #00ff55;
  padding: 10px;
  overflow-y: auto;
  white-space: normal;
  box-shadow: 0 0 15px #00ff55;
  border-radius: 6px;
}
.game-window b {
  font-weight: bold;
}
.game-window ul li {
  display: flex;
}
.game-window ul li b {
  min-width: 100px;
  color: white;
}
/* подпись */
.game-subtitle {
  margin-top: 15px;
  font-size: 20px;
  opacity: 0.9;
  color: #c00000;
}
/* мигающий курсор */
.cursor {
  animation: blink 0.7s steps(1) infinite;
}
/* анимации */
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes glow {
  0% {
    text-shadow: 2px 2px 2px #c00000;
  }
  100% {
    text-shadow: 2px 2px 12px #c00000;
  }
}
/* =============================== */
/*     ПРАВАЯ РЕКЛАМНАЯ ПАНЕЛЬ     */
/* =============================== */
/* =============================== */
/*    ASCII РАМКА + БАННЕРЫ        */
/* =============================== */
.right {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 10px;
  color: #00ff55;
  font-family: monospace;
  border-left: 1px solid #003300;
  position: relative;
  /* лёгкое общее свечение */
  text-shadow: 0 0 4px #00ff55;
}
/* ASCII контейнер */
.frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: frame-flicker 3s infinite alternate ease-in-out;
  /* =========================== */
  /*    ФИОЛЕТОВАЯ НЕОНОВАЯ     */
  /*         ВЫВЕСКА            */
  /* =========================== */
  /* основной цвет */
  /* мягкий ореол */
  /* дальний свет */
  /* базовый стиль */
  /* глубокая пульсация света */
  /* легкое хаотичное мерцание */
  /* эффект фосфора */
  /* строки рамки */
  /* Список рекламы */
}
.frame a {
  text-decoration: none;
  color: #fff;
}
.frame .neon-sign.purple {
  font-size: 22px;
  text-align: center;
  margin-bottom: 15px;
  color: #b400ff;
  font-family: monospace;
  /* мягкое и далёкое свечение */
  text-shadow: 0 0 6px #b400ff, 0 0 12px #b400ff, 0 0 18px #d46cff, 0 0 30px #d46cff, 0 0 45px #ffb3ff;
  /* пульсация + лёгкое мерцание */
  animation: purple-neon-pulse 3s infinite ease-in-out, purple-neon-flicker 4.5s infinite steps(1);
}
@keyframes purple-neon-pulse {
  0% {
    opacity: 0.85;
    text-shadow: 0 0 4px #b400ff, 0 0 12px #b400ff, 0 0 20px #d46cff;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px #b400ff, 0 0 25px #d46cff, 0 0 45px #ffb3ff;
  }
  100% {
    opacity: 0.9;
    text-shadow: 0 0 5px #b400ff, 0 0 15px #d46cff, 0 0 30px #ffb3ff;
  }
}
@keyframes purple-neon-flicker {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  92% {
    opacity: 0.6;
  }
  94% {
    opacity: 1;
  }
  95% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes frame-flicker {
  0% {
    opacity: 0.95;
    text-shadow: 0 0 3px #00ff55;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 10px #00ff55;
  }
}
.frame .ascii-top,
.frame .ascii-bottom {
  color: #00ff55;
  font-weight: bold;
  font-size: 14px;
  margin: 0;
  padding: 0;
  animation: border-glow 2s infinite alternate;
}
@keyframes border-glow {
  0% {
    text-shadow: 0 0 3px #00ff55;
  }
  100% {
    text-shadow: 0 0 12px #00ff55;
  }
}
.frame .list {
  list-style: none;
  margin: 5px 0;
  padding: 0 3px;
  width: 100%;
  /* Пункты рекламы */
  /* лёгкая пульсация */
  /* глич-слои */
  /* включаем глич при наведении */
  /* перемещение пункта при наведении */
  /* =============================== */
  /* АНИМИРОВАННЫЕ БАННЕРЫ-МОРГАНИЕ */
  /* =============================== */
  /* эффект рекламного "НЕОНА" */
  /* эффект "молния по тексту" */
}
.frame .list li {
  position: relative;
  cursor: pointer;
  padding: 4px 0;
  font-size: 14px;
  text-align: center;
  color: #fff;
  transition: 0.15s;
  animation: item-blink 1.8s infinite alternate;
}
@keyframes item-blink {
  0% {
    opacity: 0.95;
    text-shadow: 0 0 2px #00ff55;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 7px #00ff55;
  }
}
.frame .list li::before,
.frame .list li::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.frame .list li::before {
  color: #ff0044;
  transform: translate(-2px, 0);
}
.frame .list li::after {
  color: #00eaff;
  transform: translate(2px, 0);
}
.frame .list li:hover::before,
.frame .list li:hover::after {
  opacity: 0.25;
  animation: glitch 0.25s infinite;
}
@keyframes glitch {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(2px, -1px);
  }
  50% {
    transform: translate(-2px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.frame .list li:hover {
  color: #80ffaa;
  text-shadow: 0 0 12px #80ffaa;
  transform: translateX(2px);
}
.frame .list li:nth-child(odd) {
  animation: neon-fade 2.4s infinite alternate ease-in-out;
}
@keyframes neon-fade {
  0% {
    opacity: 0.85;
    text-shadow: 0 0 3px #00ff55;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 14px #00ff55;
  }
}
.frame .list li:nth-child(even)::after {
  animation: lightning 3s infinite;
}
@keyframes lightning {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  91% {
    opacity: 0.6;
  }
  92% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.mouse-bin {
  position: absolute;
  z-index: 0;
}
.mouse-bin_item_bold {
  color: #fff;
  font-weight: bold;
}