#white-transition {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  z-index: 999999999;
  transition: opacity 4s ease;
}

#system-messages {
  position: fixed;
  left: 40px;
  bottom: 40px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
  opacity: 0;
  z-index: 1000000000;
  white-space: pre-wrap;
}

#system-messages.visible {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.typing {
  border-right: 2px solid #000;
  animation: caret 0.7s steps(1) infinite;
}

@keyframes caret {
  50% { border-color: transparent; }
}

/* Чёрный переход */
#fade-overlay {
  position: fixed;
  inset: 0;
  background: #0A0B0D;
  opacity: 1;
  transition: opacity 0.6s ease;
  z-index: 999999999;
  pointer-events: none;
}

#fade-overlay.hidden {
  opacity: 0;
}

/* Вертикальный глич */
#glitch-overlay {
  position: fixed;
  inset: 0;
  background: #0A0B0D;
  opacity: 0;
  z-index: 9999999999;
  pointer-events: none;
}

@keyframes glitch-vertical {
  0%   { clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); transform: translateX(-25px); }
  20%  { clip-path: polygon(40% 0, 55% 0, 55% 100%, 40% 100%); transform: translateX(20px); }
  40%  { clip-path: polygon(5% 0, 15% 0, 15% 100%, 5% 100%);   transform: translateX(-15px); }
  60%  { clip-path: polygon(70% 0, 90% 0, 90% 100%, 70% 100%); transform: translateX(18px); }
  80%  { clip-path: polygon(25% 0, 35% 0, 35% 100%, 25% 100%); transform: translateX(-10px); }
  100% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}

#glitch-overlay.active {
  opacity: 1;
  animation: glitch-vertical 0.35s steps(3) 3;
}

/* Footer transitions */
#footer-white-overlay {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  z-index: 999999999;
  transition: opacity 2.5s ease;
}

#footer-messages {
  position: fixed;
  left: 40px;
  bottom: 40px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  color: #000;
  opacity: 0;
  white-space: pre-wrap;
  z-index: 1000000000;
  transition: opacity .4s ease;
}

.typing-footer {
  border-right: 2px solid #000;
  animation: caretFooter .7s steps(1) infinite;
}

@keyframes caretFooter {
  50% { border-color: transparent; }
}

/* ============================================================
   НОВЫЙ ГОРИЗОНТАЛЬНЫЙ РЯД (СКРОЛЛ • КООРДИНАТЫ • ТАЙМЕР)
============================================================ */

#ui-bottom-row {
    position: fixed;
    right: 40px;
    bottom: 20px;
    display: flex;
    flex-direction: row;
    gap: 30px;
    z-index: 999999;
    pointer-events: none;
}

#ui-bottom-row > div {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    font-weight: 500;
    color: #9F9E9C;
}

/* Таймер чуть крупнее */
#timer-fixed {
    font-size: 18px;
}

/* Координаты скрываются ≤ 640px */
@media (max-width: 640px) {
    #cursor-coords {
        display: none !important;
    }
}

/* ТАЙМЕР и ПРОЙДЕННЫЙ ПУТЬ скрываются ≤ 640px */
@media (max-width: 640px) {
    #timer-fixed{
        display: none !important;
    }
}