@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
/* Основные настройки для всех элементов */
* {
  margin: 0; /* Убираем отступы */
  padding: 0; /* Убираем внутренние отступы */
  box-sizing: border-box; /* Правильная модель размеров */
}

/* Стили для всего тела страницы */
body {
  background-color: #000; 
  color: #ff0;
  font-family: 'Fira Code', monospace;
  display: flex;
  justify-content: center; /* Центрируем по горизонтали */
  align-items: center; /* Центрируем по вертикали */
  min-height: 100vh; /* На всю высоту экрана */
  line-height: 1.6;
  text-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
  overflow: hidden; /* Запрещает прокрутку страницы, чтобы, когда открыто модальное окно, нельзя было скроллить основную страницу */
}

/* Контейнер терминала */
.terminal-container {
    width: 100%;
    max-width: 700px;
    padding-left: 80px; /* Внутренние отступы со всех сторон */
    margin-top: -120px; /* Поднимаем контейнер вверх */
    z-index: 100;
    display: flex; /* Отображение элемента: гибкое */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Строка ввода */
.input-line {
    display: flex;
    align-items: center;
    margin-top: 30px;  /* Внешний отступ сверху */
    width: 100%;
}

/* Это стиль для символа >_ перед полем ввода */
.prompt {
    color: #fff;
    margin-right: 10px;
}

/* Обрамляет поле ввода (<input>) и его подчёркивание */
.input-container {
    position: relative;  /* Позиционирование относительно */
    flex-grow: 1;        /* Растягивается на всё доступное пространство */
}

/* Поле ввода */
.input-field {
    background: none;
    border: none;
    color: #fff;
    padding: 5px 0;
    width: 100%;
    outline: none; /* Убираем обводку при фокусе */
    caret-color: #fff;
}

/* Подчеркивание поля ввода */
.underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
}

.error-message {
    color: #fff !important;
}

/* Стиль для блока вывода терминала */
#terminal-output {
    width: 100%;  /* Занимает всю ширину родителя */
}

#terminal-output div {
    margin-bottom: 15px; /* Отступ снизу для каждой строки */
}

/* Стиль для контейнера контента. Показывается только после успешного ввода кода (например, через display: block в JavaScript) */
#content-container {
    display: none;  /* Изначально скрыт */
    width: 100%;
}

/* Анимация подсказки (плавное подпрыгивание) */
.scroll-hint {
    margin-top: 2.5rem;
    color: #fff;
    font-size: 12px;
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Основные стили футера */
.site-footer {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 100%;
  z-index: 10;
  color: #fff;
  text-shadow: none;
  font-size: 14px;
}

.site-footer p:not(:last-child) {
  margin-bottom: 4px;
}

#dmcaLink {
    color: #0000FF;
    text-decoration: underline; /* Подчеркивание по умолчанию */
    transition: none; /* Убираем анимацию */
}

.site-footer div p:not(:last-child) {
    margin-bottom: 4px;
}

.refresh-icon {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 90px;
  height: 90px;
  cursor: pointer;
  user-select: none;
  z-index: 1001;
}

#watermark-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: ;
  z-index: -999;
  mix-blend-mode: screen;
}

#watermark-container canvas {
  opacity: 0.7;
}

.fullscreen-btn {
    position: fixed;
    bottom: 160px;
    right: 20px;
    cursor: pointer;
    font-size: 14px;
    padding: 3px 8px;
    border: 1px solid white;
    border-radius: 0px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    z-index: 100;
    color: white;
    -webkit-tap-highlight-color: transparent;
}
.fullscreen-btn:hover {
    background: transparent;
}
.telegram-btn {
    position: fixed;
    bottom: 160px;
    left: 20px;
    cursor: pointer;
    font-size: 10px;
    padding: 3px 8px;
    border: 1px solid white;
    border-radius: 0px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
}
.telegram-btn:hover {
    background: transparent;
}

.modal-overlay {
    position: fixed;
    top: 40px;
    left: 30px;
    right: 30px;
    bottom: 230px;
    background: transparent;
    display: flex;
    z-index: 1000;
    opacity: 0.85;
}
.modal-content {
    background: black;
    color: white;
    padding: 30px;
    max-width: 1000vw;
    max-height: 80vh;
    overflow-y: scroll;  /* Всегда показывает полосы прокрутки (даже если контент помещается) */
    border-radius: 0px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.modal-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
}
.modal-section {
    margin-bottom: 15px;
}
.modal-checkbox {
    margin-top: 20px;
    display: flex;
    align-items: center;
}
.modal-checkbox input {
    margin-right: 10px;
}
.modal-button {
    background: #0000FF;
    color: white;
    border: 0px;
    padding: 10px 20px;
    margin-top: 30px;
    cursor: pointer;
}
.modal-button:disabled {
    background: transparent;
    cursor: not-allowed;
}

/* Плеер */
.music-player {
  position: fixed;
  bottom: 240px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  z-index: 999;
}

/* Контейнер для линии прогресса и названия */
.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Вертикальная линия прогресса */
.progress-track {
  position: fixed;
  bottom: 380px;
  height: 400px;
  width: 1px;
  left: 40px;
  background: #fff;
  cursor: pointer;
  touch-action: none;
}

.progress-fill {
  position: absolute;
  width: 100%;
  background: white;
  height: 0%;
  transition: height 0.1s linear;
}

.progress-thumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  bottom: 0;
  pointer-events: none;
  transition: bottom 0.1s linear;
}

/* Контейнер для вертикального названия песни */
.song-title-wrapper {
  height: 500px;
  width: 30px;
  bottom: 380px;
  left: 10px;
  overflow: hidden;
  position: fixed;
}

/* Вертикальный текст (перевёрнутый) */
.vertical-title-container {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

/* Сам текст с анимацией движения вверх-вниз */
.vertical-title {
  color: white;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  display: inline-block;
  
  /* Анимация: плавное движение на 10px вверх-вниз */
  animation: moveUpDown 5s ease-in-out infinite alternate;
}

/* Кейфреймы анимации */
@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0); /* Исходное положение */
  }
  50% {
    transform: translateY(30px); /* Сдвиг вверх */
  }
}

/* Стили для кнопок */
.player-btn {
  background: none;
  border: 1px solid white;
  width: 40px;
  height: 30px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Пульсация для активных кнопок */
.player-btn.active {
  position: relative;
}

.player-btn.active::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: 0%;
  background: white;
  opacity: 0;
  box-shadow: 0 0 8px white;
  animation: pulse 3s infinite;
}

/* Иконка паузы (изначально скрыта) */
#pause-icon {
  display: none;
}

/* Анимация пульсации */
@keyframes pulse {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Время */
.time-label {
  position: absolute;
  font-size: 9px;
  color: white;
  white-space: nowrap;
  pointer-events: none;
  left: 12px;
  transition: bottom 0.1s linear;
}

.time-label.current {
  bottom: 0;
  transform: translateY(50%);
}

.time-label.duration {
  top: -6px;
}

/* Для тач-устройств */
@media (hover: none) {
  .progress-thumb {
    width: 14px;
    height: 14px;
  }
}