/* Стилизация элементов страницы */

/* шапка*/
header {
    display: flex; /* Включаем Flexbox для header */
    flex-direction: column; /* Вертикальное расположение элементов внутри header */
    align-items: center; /* Центрируем элементы по горизонтали */
    background-repeat: no-repeat;
    background-size: cover; /* Изображение будет покрывать весь header */
    height: 200px; /* Установите желаемую высоту для header */
}
/* Стили для меню */
nav {
   background-color:#973F2B ;
    border-radius: 10px;
    font-size: 12px;
    font-family: Arial, sans-serif; /* Шрифт текста в меню — простой и читаемый */
    display: flex; /* Располагаем пункты меню в ряд */
    justify-content: center; /* Центрируем меню по горизонтали */
}

/* Стили для списка пунктов меню */
nav ul {
    list-style-type: none; /* Убираем стандартные точки у списка */
    margin: 0; /* Убираем внешние отступы */
    padding: 0; /* Убираем внутренние отступы */
    display: flex; /* Располагаем пункты списка в ряд */
    /* gap: 20px;  расстояние между кнопками - можно добавить, чтобы разделить пункты */
}

/* Каждый пункт меню */
nav li {
    position: relative; /* Чтобы можно было правильно показать выпадающее меню */
}

/* Ссылки в меню */
nav a {
    display: block; /* Заставляем ссылку занимать всю площадь пункта */
    color: #fff; /* Цвет текста — белый */
    padding: 14px 20px; /* Отступы внутри кнопок для удобства */
    text-decoration: none; /* Убираем подчёркивание у ссылок */
}

/* Что происходит, когда мышка наведена на ссылку */
nav a:hover {
    background-color: #508BC7; /* Меняем фон кнопки на светлее фиолетовый */
}

/* Выпадающее подменю (спрятано по умолчанию) */
.dropdown {
    display: none; /* Скрываем подменю */
    position: absolute; /* Позиционируем относительно родителя */
    top: 100%; /* Показываем подменю прямо под пунктом меню */
    left: 0; /* Выравниваем по левому краю */
    background-color: #c47556; /* Меняем фон кнопки на светлее*/
    min-width: 160px; /* Минимальная ширина подменю */
    font-size: 12;
    z-index: 1; /* Чтобы подменю было поверх других элементов */
    flex-direction: column; /* Список в подменю располагается вертикально */
}

/* Ссылки внутри выпадающего подменю */
.dropdown a {
    padding: 12px 16px; /* Отступы внутри ссылок подменю */
}

/* Когда мышка наведена на пункт меню, показываем подменю */
li:hover .dropdown {
    display: flex; /* Показываем подменю и располагаем пункты вертикально */
}

/* Основные стили для всего тела страницы */
body {
    display: flex; /* Размещаем элементы вертикально */
    flex-direction: column; /* Элементы идут сверху вниз */
    min-height: 100vh; /* Минимальная высота — весь экран */
    background-color: #F7EBE0; /* Фон*/
    background-repeat: no-repeat; /* Фон не повторяется */
    background-size: cover; /* Фон растягивается на весь экран */
}

/* Главный контейнер страницы */
.main-container {
    display: flex; /* Используем flex для расположения содержимого */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    flex-grow: 1; /* Заставляем main занимать всё доступное пространство */
    padding: 20px; /* Отступы вокруг содержимого */
}


/* Настройки для картинок */
img {
    max-width: 100%; /* Картинка не выходит за пределы своего блока */
    height: auto; /* Высота подстраивается пропорционально ширине */
}

/* Заголовок первого уровня */
h1 {
    font-family: 'Courier New', sans-serif; /* Шрифт заголовка */
    text-align: center; /* Заголовок по центру */
    color: #ece6e6;
    margin-top: 10px; /* Отступ сверху */
    /* Используем Flexbox, чтобы расположить содержимое по центру */
    transform: translateY(-100px); /* Сдвигаем блок влево на 100 пикселей */
    animation: slideIn 1s forwards; /* Запускаем анимацию slideIn на 1 секунду */
    animation-delay: 0.5s; /* Ждем 0.3 секунды перед началом анимации */
    border-radius: 20px;
    font-size: 40px; /* Размер шрифта */
}

/* Заголовок второго уровня */
h2 {
    color: rgb(29, 5, 101); /*  цвет текста */
    font-size: 18px; /* Размер шрифта поменьше */
   text-align: center
   
  }

/* Подвал страницы */
footer {
    background-color: #202c4d; 
    color: #f6ecec; /* Светлый цвет текста */
    padding: 20px 0; /* Отступы сверху и снизу */
    text-align: center; /* Текст по центру */
}
/* Убираем отступы у всей страницы */
body {
    margin: 0;
    font-family: sans-serif; /* Шрифт для текста */
    background-color: #f3d1c4;
}
/* Шапка и подвал во всю ширину */
#menu-container,
#footer-container {
    width: 100%;
    box-sizing: border-box;
    }
/* Основной контейнер, где будут два блока: левый и правый */
.main-container {
    display: flex; /* Располагаем блоки в линию по горизонтали */
    gap: 20px; /* Расстояние между блоками */
    padding: 20px; /* Внутренние отступы вокруг контейнера */
    margin: 20px;
     /*box-sizing: border-box; Включаем паддинги в размеры контейнера */
}
/* блоки */
.left-block, .right-block, .middle-block {
        /* Используем Flexbox, чтобы расположить содержимое по центру */
        display: flex;
  align-items: flex-start; /* Важно! Иначе всё выравнивается по центру */
  justify-content: space-between; /* или flex-start, если хотите, чтобы right-block был справа */
  
    
    flex-direction: column; /* Вертикальное расположение элементов внутри блока */
    align-items: center; /* Центрируем содержимое по горизонтали (по ширине) */
    background-color: #324479;
    border-radius: 50px;
    color: white;
    box-shadow: 0 4px 12px rgba(10, 90, 201, 0.6);
    overflow: visible; /* чтобы масштаб и тени не обрезались */
    padding: 20px; /* Внутренние отступы внутри блока */
    opacity: 0;  /* Сначала блок невидим (прозрачный) */
    }
    @keyframes slideIn {
      to {
        opacity: 1; /* В конце анимации блок станет видимым */
        transform: translateX(0); /* Блок вернется на своё место */
      }
    }
/* Левый блок */
.left-block {
    flex: 1; /* Занимает равную часть пространства */
    
    /* Используем Flexbox, чтобы расположить содержимое по центру */
    transform: translateX(-100px); /* Сдвигаем блок влево на 100 пикселей */
    animation: slideIn 1s forwards; /* Запускаем анимацию slideIn на 1 секунду */
    animation-delay: 0.3s; /* Ждем 0.3 секунды перед началом анимации */
    }

.middle-block {
 flex: 1; /* Занимает равную часть пространства */
    /* Используем Flexbox, чтобы расположить содержимое по центру */
    transform: translateX(100px); /* Сдвигаем блок влево на 100 пикселей */
    animation: slideIn 1s forwards; /* Запускаем анимацию slideIn на 1 секунду */
    animation-delay: 0.5s; /* Ждем 0.3 секунды перед началом анимации */
}

/* Правый блок */
.right-block {
  /* УБИРАЕМ flex: 1 — это главная причина пустоты */
  width: fit-content; /* Блок будет по ширине содержимого */
  display: flex; /* Чтобы внутри были картинки в ряд/столбец */
  flex-direction: column; /* или row — в зависимости от макета */
  align-items: center; /* Центрируем картинки по горизонтали */
  transform: translateX(-100px); /* Начальное положение — сдвинут вправо */
  animation: slideIn 1s forwards;
  animation-delay: 0.7s;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.two-block {
  /* 1. Центрирование по горизонтали в потоке контента */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px auto; /* 40px сверху/снизу (чтобы не лип к контенту), auto — центр */
  
  /* 2. Ширина */
  width: fit-content; 

  /* 3. Анимация (убираем или меняем, чтобы не было резких прыжков) */
  opacity: 0;
  animation: slideUp 1s forwards;
  animation-delay: 0.7s;

  /* Оформление */
  padding: 16px;
  background-color: transparent;
      border: 7px solid #973F2B;
      box-shadow: 0 4px 12px rgba(72, 23, 22, 0.6);
      padding: 30px; /* внутренний отступ, чтобы тени не обрезались */
      overflow: visible; /* чтобы масштаб и тени не обрезались */
}

/* Плавное появление снизу вверх */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.game-rules {
    padding-left: 20px;
    padding-right: 20px;
}


/* Обертка для картинки, чтобы управлять её размером и расположением */
.image-wrapper {
    max-width: 100%; /* Ограничиваем ширину картинки размером контейнера, чтобы не выходила за границы */
    padding: 50px;
   }
/* Само изображение */
.image-wrapper img {
    max-width: 100%; /* Масштабируем изображение по ширине контейнера, чтобы оно не было больше его размера */
    height: auto; /* Высота автоматически подстраивается пропорционально ширине */
    display: block; /* Убираем лишние пробелы под изображением (делает его блочным элементом) */
    border: 4px solid rgb(75, 9, 84);
    border: 2px solid gray; /* Граница изображения */
    border-radius: 15px; /* Скругление углов */
}

.image {
    margin-top: 20px; /* Задаем отступ сверху */
}
/* result показывается проверку ответа  example выводит пример */
#result, #example{
   padding-top: 20px; /* пространство сверху внутри блока */
   padding-left: 15px; /*пространство слева внутри блока */
   padding-right: 15px; /*пространство справа внутри блока */
   padding-bottom: 20px; /*пространство снизу внутри блока */
   margin-top:10px; /*отступ сверху, чтобы отделить от других элементов */
   margin-bottom: 10px; /*отступ снизу, чтобы отделить от других элементов */
   font-weight:bold; /* делаем текст жирным */
 /* color: #ffffff !important;   !important — это специальная директива, которая 
   повышает приоритет конкретного CSS-правила.*/
   color: #ffffff; /* цвет текста*/
   background-color: #3f265e; /* цвет фона */
   max-width: 100%; /* чтобы блок не был шире ширины страницы или контейнера */
   word-wrap: break-word; /* если текст очень длинный, он переносится на следующую строку */
   border: 1px solid #ccc; /* вокруг блока есть тонкая серая рамка */
   border-radius: 10px; /* углы рамки закруглены */
   text-align: center; /* текст внутри блока по центру */
}

/* Эти стили делают кнопки красивыми и удобными для нажатия */

/* Общие стили для всех кнопок с классом "btn" */
.btn {
    padding: 7px 10px; /* делаем кнопку чуть больше по размеру — сверху/снизу и слева/справа */
    font-size: 14px; /* размер текста на кнопке */
    font-family: 'Arial', sans-serif; /* шрифт */
    background-color: #973F2B; /* цвет кнопки*/
    color: white; /* цвет текста */
    border: none; /* убираем рамку вокруг кнопки */
    border-radius: 8px; /* скругляем углы у кнопки*/
    cursor: pointer; /* при наведении курсор превращается в руку*/
    transition: background-color 0.3s, transform 0.2s; /* плавное изменение цвета и размера при наведении или нажатии */
}

/* Когда мышка наведена на кнопку (наводим курсор) — меняется цвет и увеличивается чуть-чуть в размере для эффекта "нажатия"*/
.btn:hover {
    background-color: #B1532E; /* делаем кнопку темнее при наведении*/
    transform: scale(1.05); /* немного увеличиваем кнопку при наведении*/
}

/* Общие стили для всех полей ввода с классом "input-style" */
.input-style {
    padding: 10px 15px; /* делаем внутренние отступы внутри поля*/
    font-size: 16px; /* размер шрифта*/
    border-radius: 8px; /* скругляем углы поля*/
    border: 2px solid #5E1E1C; /* создаем рамку вокруг поля*/
    outline: none; /* убираем стандартную рамку при фокусе*/
    transition: border-color 0.3s, box-shadow 0.3s; 
    /* плавное изменение цвета рамки и тени при фокусе или наведении */
    margin-bottom: 10px; /* добавляем пространство снизу между этим полем и следующими элементами*/
}

/* Когда пользователь кликает или переводит курсор в поле ввода (фокус), меняется цвет рамки и появляется тень для подсказки что оно активно*/
.input-style:focus {
    border-color: #1a0652; /* делаем рамку темнее при фокусе */
    box-shadow: 0 0 8px rgba(111, 76, 175, 0.5); 
    /* добавляем мягкую тень вокруг поля при активном состоянии */ 
}
.hover-effect {
  transition: transform 0.3s ease, filter 0.3s ease; /* плавный переход */
}

.hover-effect:hover {
  transform: scale(1.05); /* увеличиваем размер на 5% */
  filter: brightness(80%); /* затемнение до 80% яркости */
}
/* Стили для заблокированных пунктов меню */
nav li.locked > a {
  color: #ccc !important;
  cursor: default;
  user-select: none;
}

nav li.locked:hover > a {
  background-color: #508BC7;
}

/* Модальное окно */
#passwordModal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Фиксированное позиционирование */
    top: 0; left: 0; right: 0; bottom: 0; /* Занимает весь экран */
    background: rgba(0,0,0,0.5); /* Полупрозрачный темный фон */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    z-index: 1000000; /* Поверх остальных элементов */
}

/* Активное состояние модального окна */
#passwordModal.active {
    display: flex; /* Отображаем как flex-контейнер */
}

/* Содержимое модального окна */
#passwordModal .modal-content {
    background: white; /* Белый фон */
    padding: 20px 30px; /* Внутренние отступы */
    border-radius: 10px; /* Скругление углов */
    max-width: 320px; /* Максимальная ширина */
    width: 90%; /* Адаптивная ширина */
    text-align: center; /* Выравнивание текста */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Тень */
     z-index: 1000000; /* Поверх остальных элементов */
}

/* Поле ввода в модальном окне */
#passwordModal input {
    width: 100%; /* Ширина на всю доступную */
    padding: 10px; /* Внутренние отступы */
    font-size: 16px; /* Размер шрифта */
    border-radius: 8px; /* Скругление углов */
    border: 2px solid #5E1E1C; /* Рамка */
    margin-bottom: 10px; /* Отступ снизу */
    outline: none; /* Убираем стандартную обводку */
    transition: border-color 0.3s; /* Плавное изменение цвета рамки */
}

/* Фокус на поле ввода */
#passwordModal input:focus {
    border-color: #1a0652; /* Цвет рамки при фокусе */
    box-shadow: 0 0 8px rgba(111, 76, 175, 0.5); /* Тень */
}

/* Кнопка в модальном окне */
#passwordModal button {
    background-color: #973F2B; /* Цвет фона */
    border: none; /* Без рамки */
    color: white; /* Цвет текста */
    padding: 10px 20px; /* Внутренние отступы */
    font-size: 16px; /* Размер шрифта */
    border-radius: 8px; /* Скругление углов */
    cursor: pointer; /* Курсор-указатель */
    transition: background-color 0.3s; /* Плавный переход цвета */
}

/* Наведение на кнопку */
#passwordModal button:hover {
    background-color: #B1532E; /* Темнее фон */
}

/* Сообщение об ошибке */
#passwordError {
    color: red; /* Красный цвет */
    margin-top: 10px; /* Отступ сверху */
    display: none; /* Скрыто по умолчанию */
}

/* Заголовок модального окна */
.modalTitle {
    color: #000; /* Черный цвет */
}

#passwordModal {
  
  z-index: 99999;
}