html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: black;
  font-family: monospace;
  /* overflow-x: hidden; */
}

body {
  color: #00B26F;
  /* overflow-y: hidden; */
}

#scene {
  height: 100vh;
  width: 100vw;
  position: relative;
  /* overflow: hidden; */
}

#sceneBg,
#sceneBg2,
#sceneBg3,
#sceneBg4,
#sceneBg5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 3s ease;
  z-index: 0;
}
/* актуальные картинки */

#sceneBg {
  background-image: url('/static/img/1.png');
}

#sceneBg2 {
  background-image: url('/static/img/2.png');
}

#sceneBg3 {
  background-image: url('/static/img/3.png');
}

#sceneBg4 {
  background-image: url('/static/img/4.png');
}

#sceneBg5 {
  background-image: url('/static/img/5.png');
}

#scene.loaded #sceneBg {
  opacity: 1;
}

#skipBtn, #backBtn {
  position: fixed;
  top: 20px;
  right: 60px;
  padding: 14px 20px;
  background-color: #330000;
  color: #ff6666;
  border: 1px solid #ff0000;
  cursor: pointer;
  font-family: monospace;
  font-size: 16px;
  z-index: 1000;
  user-select: none;
  opacity: 0;
  transition: filter 2.5s ease, opacity 2.5s ease, background-color 0.3s ease, color 0.3s ease;
}

#skipBtn.visible {
  opacity: 1;
  filter: blur(0);
}

#skipBtn:hover, #backBtn:hover {
  background-color: #ff0000;
  color: white;
}

.centerZone {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, 0%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 1;
}

#textWrapper {
  width: 100vw;
  margin-bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#typingText {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%) scale(1);
  font-size: 40px;
  line-height: 48px;
  white-space: nowrap;
  text-shadow: 0 0 8px #00774E;
  filter: blur(8px);
  opacity: 0;
  transition: transform 0.2s ease, filter 2.5s ease, opacity 2.5s ease;
}

.buttonPlace {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.btn-anim {
  opacity: 0;
  filter: blur(6px);
  transition: filter 2.5s ease, opacity 2.5s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-anim.visible {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  z-index: 1;
}

.btn {
  text-decoration: none;
  background: transparent;
  border: 2px solid #00B26F;
  color: #00B26F;
  padding: 16px 44px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 0 15px #00B26F88;
  border-radius: 8px;
  user-select: none;
  font-family: monospace;
  line-height: 48px;
}
.btn:hover {
  background: #00B26F;
  color: black;
  box-shadow: 0 0 25px #00B26Fdd;
}

.inp {
  text-decoration: none;
  background: transparent;
  border: 2px solid #00B26F;
  color: #00B26F;
  padding: 0px 20px;
  font-size: 16px;
  box-shadow: 0 0 15px #00B26F88;
  border-radius: 8px;
  font-family: monospace;
  line-height: 30px;
  margin-bottom: 5px;
}

#attentionBtn,
#nextSceneBtn,
#senseiBtn {
  background: transparent;
  border: 2px solid #00B26F;
  color: #00B26F;
  padding: 16px 44px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 0 15px #00B26F88;
  border-radius: 8px;
  user-select: none;
  font-family: monospace;
  line-height: 48px;
}

#attentionBtn:hover,
#nextSceneBtn:hover,
#senseiBtn:hover {
  /* cursor: url('./free-icon-tap-1612818.svg'), pointer !important; */
  background: #00B26F;
  color: black;
  box-shadow: 0 0 25px #00B26Fdd;
}

#twoButtons {
  display: flex;
  gap: 24px;
}

#twoButtons button {
  background: transparent;
  border: 2px solid #00B26F;
  color: #00B26F;
  padding: 16px 44px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 0 15px #00B26F88;
  border-radius: 8px;
  user-select: none;
  font-family: monospace;
  line-height: 48px;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

#twoButtons button:hover {
  background: #00B26F;
  color: black;
  box-shadow: 0 0 25px #00B26Fdd;
}

@media (max-width: 700px) {
  #typingText {
    position: static;
    transform: none;
    white-space: normal;
    font-size: 24px;
    line-height: 32px;
    padding: 0 16px;
  }
  #textWrapper {
    margin-bottom: 60px;
  }
}

@media (max-height: 650px) {
  .centerZone {
    top: 56%;
  }
}

@media (max-height: 500px) {
  .centerZone {
    top: 60%;
  }
  #textWrapper {
    margin-bottom: 40px;
  }
  #attentionBtn,
  #twoButtons button,
  #nextSceneBtn,
  #senseiBtn {
    font-size: 18px;
    padding: 12px 28px;
    line-height: 36px;
  }
  #twoButtons {
    gap: 16px;
    flex-direction: column;
  }
}
/* ▼ МОБИЛЬНЫЕ ПРАВКИ (твои) */

@media screen and (max-width: 700px) and (hover: none) and (pointer: coarse) {
  /* вернём текст в абсолют + чуть опустим */
  #typingText {
    position: absolute;
    left: 50%;
    top: 24px;
    /* сдвиг вниз */
    transform: translateX(-50%);
    white-space: normal;
    max-width: 92vw;
    font-size: 24px;
    line-height: 32px;
    padding: 0 16px;
    text-align: center;
  }
  .centerZone {
    top: 52svh;
  }
  /* поднимаем только пары кнопок */
  #twoButtonsWrap,
  #undergroundBtnWrap {
    transform: translateY(-72px) !important;
    will-change: transform;
  }
}
/* ▲ конец мобильных правок */
/* === FIX: стабильная верстка на мобилках по высоте === */

@media (max-width: 700px) and (hover: none) and (pointer: coarse) {
  /* 1) центр-зона становится контейнером с безопасными отступами */
  .centerZone {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
    width: min(92vw, 560px);
    /* главное: не даём блоку вылезать за экран */
    max-height: calc(100svh - 140px);
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* текст сверху, кнопки снизу */
    gap: 16px;
  }
  /* 2) убираем фиксированный отступ снизу */
  #textWrapper {
    width: 100%;
    margin-bottom: 0 !important;
    display: block;
  }
  /* 3) текст — НЕ absolute (так он не “оторван” от потока) */
  #typingText {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    white-space: normal;
    max-width: 100%;
    padding: 0 6px;
    text-align: center;
    font-size: 24px;
    line-height: 32px;
  }
  /* 4) кнопки больше не “поднимаем” костылями */
  #twoButtonsWrap,
  #undergroundBtnWrap {
    transform: none !important;
  }
  /* 5) две кнопки — по вертикали */
  #twoButtons {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }
  #twoButtons button,
  #attentionBtn,
  #nextSceneBtn,
  #senseiBtn {
    width: 100%;
    max-width: 360px;
  }
  /* 6) Skip — чтобы не перекрывал контент */
  #skipBtn, #backBtn {
    right: 16px;
    top: 16px;
    padding: 10px 14px;
    font-size: 14px;
  }
}
/* доп. страховка для очень низких экранов */

@media (max-height: 560px) and (max-width: 700px) {
  #typingText {
    font-size: 20px;
    line-height: 28px;
  }
  #attentionBtn,
  #twoButtons button,
  #nextSceneBtn,
  #senseiBtn {
    font-size: 18px;
    padding: 10px 18px;
    line-height: 28px;
  }
}
.notification {
    position: fixed;
    right: -300px; /* Скрыто за пределами экрана */
    top: 20px;
    width: 280px;
    background-color: #00774E; /* Зеленый фон */
    color: white;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: right 0.5s ease; /* Плавное выдвижение */
    z-index: 1000;
}

.notification-content {
    padding: 15px;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    float: right;
}

@media (max-width: 600px) {
    .notification {
        width: 90%; /* Увеличиваем ширину на мобильных устройствах */
        right: -90%; /* Скрыто за пределами экрана */
    }
}

#siteInput, #siteNext, #keywordsContainer, #keywordsAddition, #resultNext, #resultContainer, #testCompleteA, #registerContainer, #registerText {
  display:none;
  transition: 1s;
}

progress { -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 15px;
  margin-top: 3px;
  margin-bottom: 5px;
}

progress::-webkit-progress-bar {
  background-color: black;
  border-radius: 5px;
  border: 1px solid #2ecc71;
}
  /* Заполненная полоса (Chrome) */
progress::-webkit-progress-value {
  background-color: #2ecc71;
  border-radius: 5px;
}
  /* Заполненная полоса (Firefox) */
progress::-moz-progress-bar {
  background-color: #2ecc71;
  border-radius: 5px;
}


.keywordsContainer {
    display: flex;
    flex-wrap: wrap; /* Разрешает перенос элементов */
    gap: 10px; /* Расстояние между блоками */
}

#textareaKeywords {
max-width:100%;
height: 77px;
width: 100%;
border-radius: 10px;

}
.box {
    flex: 1; /* Блоки делят ширину поровну */
    min-width: 20px; /* Минимальная ширина, чтобы не сжимались слишком сильно */
    border: 1px solid #00B26F;
    margin: 10px;
    border-radius: 20px;
    padding: 20px;
}

.ul_keys {
  list-style: none;

}
.key {
  border:1px solid black;
  border-radius:5px;
  padding:5px;
  position: relative;
  margin: 3px;
  cursor:pointer;
}
.selected-key {
  border:1px solid green;
}
.key > div {
  position: absolute;
  right:5px;
  top:4px;
  color:black;
  cursor:pointer;
}

.inscription {
  font-size: large;
}


/* Мобильная версия: ширина экрана меньше 768px */
@media (max-width: 768px) {
    .keywordsContainer {
        flex-direction: column; /* Элементы в столбик */
    }
}

table {
  width: 100%; /* Ширина таблицы */
  border-collapse: collapse; /* Убирает двойные границы */
}
 th, td {
  border: 1px solid black; /* Граница ячеек */
  padding: 10px; /* Отступы внутри ячеек */
  text-align: center; /* Выравнивание текста */
}
th {
  background-color: #f2f2f2; /* Цвет фона заголовка */
}

.pin-code-container {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.pin-code-input {
  width: 40px;
  height: 40px;
  font-size: 24px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 8px;
  /* Убираем стрелочки, если type="number" */
  -moz-appearance: textfield;
}

.pin-code-input::-webkit-outer-spin-button,
.pin-code-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pin-code-input:focus {
  border-color: #007bff;
  outline: none;
}