*{
    box-sizing: border-box;
    color: #ffffff;
    font-family: 'rubick';
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
}
.container{
    display: grid;
    justify-content: center;
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 0 16px;
}
body{
    background-color: #131A2A;
    overflow-x: hidden;
}
@font-face {
    font-family: 'rubick';
    src: url('../Fonts/Rubik/Rubik-VariableFont_wght.ttf') format('woff2'),
         url('../Fonts/Rubik/Rubik-Italic-VariableFont_wght.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Unformital';
    src: url('/Fonts/Unformital/Unformital.ttf');
}

html, body {
  /* width: 100%;
  height: 100%; */
  /* overflow: hidden; Пока виден прелоадер, отключаем прокрутку */
}

/* ОБЁРТКА ПРЕЛОАДЕРА */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #15161D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* ───────────────────────────────────────────
   1) ГЛАЗА:
      - По умолчанию «блуждают» (анимация .look-around).
      - Если мышка двигается, анимация отключается, 
        и глаза смотрят на курсор.
      - Если курсор замирает на 0.3с, снова включаем .look-around.
   ─────────────────────────────────────────── */
.eyes-container {
  display: flex;
  /* между глазами расстояние зависит от ширины экрана */
  gap: 5vw;
  margin-bottom: 5vh;
}
.eye {
  position: relative;
  width: 8vw;
  height: 8vw;
  background: #FFFFFF;
  border-radius: 50%;
  overflow: hidden;
  min-width: 50px; /* минимальный размер, чтобы не схлопывалось */
  min-height: 50px;
}
.pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5vw;
  height: 2.5vw;
  min-width: 12px;
  min-height: 12px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Анимация "lookAround" – блуждающая */
.look-around {
  animation: lookAround 1.5s infinite;
}
@keyframes lookAround {
  0%   { transform: translate(-50%, -50%); }
  10%  { transform: translate(-80%, -80%); }
  20%  { transform: translate(-20%, -80%); }
  30%  { transform: translate(-80%, -20%); }
  40%  { transform: translate(-20%, -20%); }
  50%  { transform: translate(-50%, -50%); }
  70%  { transform: translate(-60%, -40%); }
  80%  { transform: translate(-40%, -60%); }
  100% { transform: translate(-50%, -50%); }
}

/* ───────────────────────────────────────────
   2) ТЕКСТ "NKKGAME" – каждая буква отдельным span
      Изначально белая, по мере прогресса слева-направо становится синей
   ─────────────────────────────────────────── */
.title-container {
  display: flex;
  gap: 0.5vw;       /* небольшой зазор между буквами */
  margin-bottom: 5vh;
}
.letter {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 8vw;   /* масштабируемый размер */
  color: #FFFFFF;   /* белый в начале */
  transition: color 0.3s;
  min-width: 30px;  /* чтобы буквы были видны на узких экранах */
  text-align: center;
}

/* ───────────────────────────────────────────
   3) КЛАВИШИ (W, A, S, D, Ctrl, Shift, Space, Enter)
      с анимацией «нажатия»
   ─────────────────────────────────────────── */
.keys-container {
  position: relative;
  width: 70vw;
  height: 40vh;
  min-width: 300px;
  min-height: 200px;
}
.key {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #444;
  border: 2px solid #FFF;
  border-radius: 8px;
  color: #FFF;
  font-family: Arial, sans-serif;
  font-weight: bold;
  user-select: none;
  animation: pressKey 2s infinite;
  transform-origin: center center;

  width: 10%;   /* процент от .keys-container */
  height: 20%;
  font-size: 1.6vw;
  min-width: 40px;
  min-height: 40px;
  text-align: center;
}
@keyframes pressKey {
  0%, 85% {
    transform: scale(1);
    background: #444;
  }
  10% {
    transform: scale(0.9);
    background: #666;
  }
}

/* Позиции кнопок (примерно как на клавиатуре) */
.key-w {
  left: 45%;
  top: 5%;
  animation-delay: 0s;
}
.key-a {
  left: 35%;
  top: 30%;
  animation-delay: 0.2s;
}
.key-s {
  left: 45%;
  top: 30%;
  animation-delay: 0.4s;
}
.key-d {
  left: 55%;
  top: 30%;
  animation-delay: 0.6s;
}
.key-ctrl {
  left: 5%;
  top: 70%;
  animation-delay: 0.8s;
}
.key-shift {
  left: 25%;
  top: 70%;
  animation-delay: 1.0s;
}
.key-space {
  left: 45%;
  top: 70%;
  width: 20%;
  animation-delay: 1.2s;
}
.key-enter {
  left: 75%;
  top: 70%;
  animation-delay: 1.4s;
}

@media (max-width: 768px) {
  .container {
    padding: 0 12px;
  }

  .keys-container {
    width: 90vw;
    min-width: 0;
    height: 34vh;
  }

  .key {
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .container {
    padding: 0 8px;
  }

  .eyes-container {
    gap: 12px;
  }

  .eye {
    min-width: 42px;
    min-height: 42px;
  }

  .keys-container {
    width: 96vw;
    min-width: 250px;
    min-height: 170px;
    height: 30vh;
  }

  .key {
    min-width: 34px;
    min-height: 34px;
    font-size: 11px;
  }
}

/* ───────────────────────────────────────────
   4) ОСНОВНОЙ КОНТЕНТ (по умолчанию скрыт)
   ─────────────────────────────────────────── */