/* Эта команда для всей страницы целиком */
body {
    /* Эти строки уже есть */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    
    /* --- НОВЫЕ СТРОКИ ДЛЯ ФОНА --- */
    /* Ставим фон по умолчанию (например, комната) */
    background-image: url('images/bg_room.jpg');
    background-size: cover; /* Картинка растянется на весь экран */
    background-position: center; /* Центрируем картинку */
    transition: background-image 0.7s ease-in-out; /* Плавная смена фона */
    backdrop-filter: blur(5px);
    user-select: none;
    /* Для старых версий Safari и других браузеров на движке WebKit */
    -webkit-user-select: none; 
    
    /* Убирает серое выделение, которое появляется при долгом тапе на ссылках/кнопках в Safari */
    -webkit-tap-highlight-color: transparent; 
    
    /* Специальное свойство, которое может помочь запретить контекстное меню на iOS */
    -webkit-touch-callout: none; 
}


/* Это стиль для нашего "телефона" */
#game-container {
    width: 100%; /* Занимай всю доступную ширину ... */
    max-width: 400px; /* ... но не больше, чем 400px */
    /* --- ИСПРАВЛЕНИЕ ВЫСОТЫ --- */
    max-height: 900px;  /* Максимальная высота - 1000px */
    height: 95vh;       /* Желаемая высота - 95% от высоты видимой части окна (vh) */
    /* ИЗМЕНЕНИЕ: делаем фон полупрозрачным белым */
    background-color: rgba(255, 255, 255, 0.9); 
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(5px); /* Добавляем красивый эффект размытия фона под чатом */
}

/* Стиль для окна переписки */
#chat-window {
    flex-grow: 1; 
    padding: 20px; 
    overflow-y: auto;

    /* ВОТ ЭТИ ДВЕ ВОЛШЕБНЫЕ СТРОЧКИ! */
    display: flex; /* <-- Вешаем табличку "Включить умное распределение!" */
    flex-direction: column; /* <-- И говорим: "Распределять сверху вниз" */
}

/* --- Стили для сообщений --- */
/* Общий стиль для всех пузырей сообщений */
.message {
    padding: 12px 18px; /* Внутренние отступы, чтобы текст не прилипал к краям */
    border-radius: 20px; /* Закругляем пузыри */
    margin-bottom: 10px; /* Отступ между сообщениями */
    max-width: 75%; /* Сообщение не будет занимать всю ширину, так красивее */
    line-height: 1.4; /* Делаем текст более читаемым */
    box-sizing: border-box; /* Чтобы размеры считались правильно */
}

/* Сообщение от нашего персонажа (NPC - Non-Player Character) */
.message.npc {
    background-color: #e9e9eb; /* Светло-серый фон */
    color: #000; /* Чёрный текст */
    align-self: flex-start; /* Прижимается к левому краю */
}

/* Сообщение от игрока */
.message.player {
    background-color: #007aff; /* Фирменный синий цвет, как в iMessage */
    color: white; /* Белый текст отлично смотрится на синем */
    align-self: flex-end; /* Прижимается к правому краю */
}

/* --- Стили для кнопок внизу --- */
/* Контейнер для кнопок */
#choices-container {
    padding: 15px;
    background-color: #fff; /* Белый фон */
    border-top: 1px solid #e9e9eb; /* Тонкая серая линия-разделитель */
}

/* Стиль для самих кнопок */
button {
    width: 100%; /* Кнопка занимает всю ширину */
    padding: 15px; /* Делаем кнопку большой и удобной для нажатия */
    font-size: 17px;
    font-weight: 500; /* Делаем шрифт чуть жирнее */
    background-color: #007aff;
    color: white;
    border: none; /* Убираем уродливую рамку */
    border-radius: 12px; /* Закругляем, как и всё остальное */
    cursor: pointer; /* При наведении мышка превратится в пальчик */
    margin-top: 10px;
    transition: background-color 0.2s; /* Анимация смены цвета при наведении */
}

button:first-child {
    margin-top: 0; /* Убираем отступ у самой первой кнопки */
}

/* Что происходит, когда мы наводим мышку на кнопку */
button:hover {
    background-color: #0056b3; /* Цвет становится чуть темнее */
}
/* --- СТИЛИ ДЛЯ ВСПЛЫВАЮЩЕЙ КАРТИНКИ (МОДАЛКИ) --- */

/* Контейнер, который накрывает весь экран */
.modal {
    display: none; /* Изначально он спрятан */
    position: fixed; /* Он не двигается при прокрутке страницы */
    z-index: 1000; /* Он будет поверх всех остальных элементов */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Чёрный полупрозрачный фон */
    
    /* Магия, чтобы картинка была ровно по центру */
    align-items: center;
    justify-content: center;
}

/* Сама большая картинка внутри */
.modal-content {
    position: relative; /* <-- ДОБАВЛЯЕМ ЭТУ СТРОЧКУ */
    width: 70%;
    height: 60%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #00000000;
}

/* Крестик для закрытия */
.modal-close {
    position: absolute;
    top: 60px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* 
   НЕМНОГО ИЗМЕНИМ СТИЛЬ ДЛЯ КАРТИНКИ В ЧАТЕ:
   Добавляем `cursor: pointer`, чтобы она выглядела как кнопка.
*/
.message img {
    max-width: 100%;
    border-radius: 12px;
    margin-top: 8px;
    display: block;
    cursor: pointer; /* <--- ВОТ ЭТА ВАЖНАЯ СТРОЧКА! */
    transition: filter 0.2s; /* Плавный эффект при наведении */
}

/* Эффект при наведении на превью в чате */
.message img:hover {
    filter: brightness(0.8);
}
/* --- СТИЛИ ДЛЯ АНИМАЦИИ ПЕЧАТАНИЯ --- */

.typing-indicator {
    /* Чтобы точки выстроились в ряд */
    display: flex;
    align-items: center;
    padding: 15px 20px !important; /* Немного изменим отступы, чтобы было красиво */
}

/* Стиль для каждой из трёх точек */
.typing-indicator span {
    height: 9px;
    width: 9px;
    background-color: #9e9e9e; /* Серый цвет, как у текста */
    border-radius: 50%; /* Делаем их идеально круглыми */
    margin: 0 2px; /* Небольшой отступ между точками */
    
    /* Подключаем нашу анимацию! */
    animation: blink 1.4s infinite both;
}

/* Оживляем вторую и третью точки с небольшой задержкой */
.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Сама анимация "моргания" */
@keyframes blink {
    0% {
        opacity: 0.2;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0.2;
    }
}
/* --- СТИЛИ ДЛЯ НОВОЙ ШАПКИ ЧАТА --- */

#chat-header {
    display: flex;          /* Эта магия ставит аватарку и имя в один ряд */
    align-items: center;    /* А эта — выравнивает их по центру по высоте */
    padding: 10px 20px;     /* Внутренние отступы, чтобы было "воздушно" */
    background-color: #f7f7f7; /* Очень светло-серый фон, чтобы шапка выделялась */
    border-bottom: 1px solid #e9e9eb; /* Тонкая серая линия-разделитель, как в мессенджерах */
}

.avatar {
    width: 45px;            /* Ширина аватарки */
    height: 45px;           /* Высота аватарки */
    border-radius: 50%;     /* ВОЛШЕБСТВО: делает квадратную картинку идеально круглой */
    object-fit: cover;      /* Если картинка не квадратная, она не сплющится, а красиво обрежется */
    margin-right: 15px;     /* Отступ справа от аватарки, чтобы имя не прилипало */
    pointer-events: none;
}

.character-name {
    font-size: 18px;
    font-weight: 600;       /* Делаем шрифт жирным и важным */
    color: #000;
}
/* --- НОВАЯ АНИМАЦИЯ ПОЯВЛЕНИЯ СООБЩЕНИЙ --- */

/* Описываем саму анимацию: пузырек появляется из маленького и непрозрачного */
@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Применяем эту анимацию ко всем новым сообщениям */
.message {
    /* ... (здесь все твои старые стили для .message) ... */
    
    /* ДОБАВЛЯЕМ ЭТУ СТРОЧКУ */
    animation: pop-in 0.3s ease-out;
}
/* --- СТИЛИ ДЛЯ МИНИ-ИГРЫ --- */

/* Контейнер, который накрывает весь экран */
#minigame-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Можно и dvh, как договорились */
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирует по горизонтали */
    justify-content: flex-start; /* Прижимает к верху */
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden; /* Запрещает любую прокрутку */
    color: white;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* --- ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ МИНИ-ИГРЫ --- */

/* Область, где будет сама игра */
/* Контейнер для всей области игры (картинка + зоны) */
.minigame-area {
    position: relative;
    width: 100%;
    flex-grow: 1; /* Занимает все оставшееся место по высоте */
}

/* Стиль для самой картинки внутри */
.minigame-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Наш прозрачный щит, лежит поверх фона */
.image-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Слой щита */
}

/* СТИЛЬ ДЛЯ НАШЕГО КЛЮЧА И СОЕВОГО СОУСА (невидимой кнопки) */
.hotspot {
    position: absolute;
    cursor: pointer;
    z-index: 10; /* Лежат поверх щита! */
    
    /* Эти стили для отладки! Потом их можно убрать. */
    /* Они рисуют красный полупрозрачный квадрат, чтобы ты видел, куда нажимать. */
    /*background-color: rgba(255, 0, 0, 0.4); 
    border: 2px solid red;*/
}
/* --- Анимация для неправильного ответа в мини-игре --- */
@keyframes shake {
    10%, 90% {
      transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
      transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
      transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
      transform: translate3d(4px, 0, 0);
    }
  }
  /* --- СТИЛЬ ДЛЯ КНОПКИ РЕСТАРТА --- */

#restart-button {
    position: fixed; /* Эта магия "приклеивает" кнопку к экрану */
    top: 20px;       /* Отступ 20 пикселей сверху */
    right: 20px;      /* Отступ 20 пикселей справа */
    z-index: 9999;   /* Делает кнопку самым верхним элементом, чтобы её ничего не перекрывало */
    width: auto;
    /* Делаем её красивой */
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    transition: background-color 0.2s, transform 0.2s;
}

#restart-button:hover {
    background-color: rgba(255, 0, 0, 0.7); /* При наведении становится красной */
    transform: scale(1.05); /* И немного увеличивается */
}
/* --- СТИЛИ ДЛЯ ВНУТРИИГРОВОГО ОКНА ПОДТВЕРЖДЕНИЯ --- */

/* У нас уже есть стиль для .modal, он подойдет и сюда. */
/* Теперь стилизуем сам диалоговый блок внутри. */
.modal-dialog {
    background-color: white;
    padding: 25px 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 350px; /* Чтобы не был слишком широким на больших экранах */
    color: #333;
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);
    
}

.modal-dialog p {
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 1.5;
}

/* Контейнер для двух кнопок ("Да" и "Нет") */
.modal-buttons {
    display: flex;
    justify-content: center;  /* Расставляем кнопки по краям */
    gap: 15px; /* Пространство между кнопками */
    align-items: center; 
    
}

/* --- ИСПРАВЛЕННЫЕ СТИЛИ ДЛЯ КНОПОК В ОКНЕ --- */

/* Общий стиль для ОБЕИХ кнопок */
.modal-buttons button {
    flex: 1; /* Делает их равными по ширине */
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500; /* Сделаем шрифт чуть жирнее */
    text-align: center;
    border: none; /* Убираем рамку */
    border-radius: 12px; /* Закругляем */
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    margin-top: 0;
}

.modal-buttons button:hover {
    transform: scale(1.03); /* Небольшой эффект увеличения при наведении на любую кнопку */
}

/* Стиль для кнопки "ДА" */
#confirm-yes-button {
    background-color: #007aff; /* Синий цвет, как у основных кнопок */
    color: white;
}

#confirm-yes-button:hover {
     background-color: #0056b3; /* Становится темнее при наведении */
}

/* Стиль для кнопки "НЕТ" */
#confirm-no-button {
    background-color: #e9e9eb; /* Серый цвет */
    color: #333;
    
}

#confirm-no-button:hover {
    background-color: #d1d1d6; /* Становится темнее при наведении */
}
/* =================================== */
/* --- АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ --- */
/* =================================== */

/* Эти стили применяются ТОЛЬКО если ширина экрана 450px или меньше */
@media (max-width: 450px) {
    
    /* Убираем все отступы и фон у body, чтобы игра занимала весь экран */
    body {
        align-items: flex-start; /* Убираем центрирование по вертикали */
        /*!background-image: none !important; /* Убираем фоновую картинку на маленьких экранах */
        background-color: #e9e9eb; /* Задаем цвет фона, как в сообщениях */
    }
    
    /* Заставляем "телефончик" занимать 100% экрана, без закруглений и теней */
    #game-container {
        height: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
        /* ВОЗВРАЩАЕМ ПРОЗРАЧНОСТЬ И РАЗМЫТИЕ */
        background-color: rgba(255, 255, 255, 0.9); 
        backdrop-filter: blur(5px);
    }

    /* Можно сделать кнопку рестарта чуть меньше, чтобы не мешала */
    #restart-button {
        top: 15px;
        right: 15px;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Делаем сообщения чуть-чуть поуже, чтобы было красивее */
    .message {
        max-width: 85%;
    }
}
/* --- СТИЛИ ДЛЯ ЭКРАНА КОНЦА ДНЯ --- */

#end-of-day-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1c1c1e; /* Глубокий темный фон */
    z-index: 3000;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#end-of-day-screen h2 {
    font-size: 32px;
    margin-bottom: 15px;
}

#end-of-day-screen p {
    font-size: 18px;
    max-width: 400px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 40px;
}

#end-of-day-screen button {
    /* Используем тот же стиль, что и для кнопок в игре */
    width: auto;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 500;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

#end-of-day-screen button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}
/* --- СТИЛИ ДЛЯ СТАРТОВОГО ЭКРАНА --- */

#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000; /* Будет поверх абсолютно всего */
    overflow: hidden; /* Важно, чтобы размытие не вылезало за края */
}

/* Слой с фоном (наш "задник") */
#start-screen-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Устанавливаем нашу уникальную картинку */
    background-image: url('images/bg_start.jpg');
    background-size: cover;
    background-position: center;
    
    /* --- ВОТ ГЛАВНАЯ МАГИЯ --- */
    /* Размываем ИМЕННО ЭТОТ слой */
    filter: blur(8px);
    
    /* Хитрый трюк, чтобы размытие по краям было красивым */
    transform: scale(1.1); 
}

/* Слой с контентом (лежит поверх фона) */
#start-screen-content {
    position: relative; /* Чтобы он был над абсолютным фоном */
    z-index: 2; /* Ставим его выше фона */
    width: 100%;
    height: 100%;
    
    /* Добавляем легкое затемнение, чтобы текст лучше читался */
    background-color: rgba(0, 0, 0, 0.4);
    
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Тень для текста для лучшей читаемости */
    
    /* Центрируем контент */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
 

#start-screen-content h1 {
    font-size: 42px;
    margin-bottom: 10px;
}

#start-screen-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 50px;
}

/* Кнопка старта - делаем ее большой и заметной */
#start-screen-content button {
    width: auto;
    padding: 18px 40px;
    font-size: 20px;
    font-weight: 600;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

#start-screen button:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}


/* --- НОВЫЙ СТИЛЬ ДЛЯ КАРТИНОК, ЧТОБЫ ИХ НЕЛЬЗЯ БЫЛО СОХРАНИТЬ --- */

.message-image {
    width: 100%; /* Занимает всю ширину пузыря-сообщения */
    padding-top: 130%; /* Создает соотношение сторон 3:2 (66.66% от ширины) */
    background-size: cover; /* Масштабирует фон, чтобы он полностью покрывал блок */
    background-position: center; /* Центрирует картинку */
    border-radius: 12px; /* Закругляем уголки, как и раньше */
    margin-top: 8px; /* Отступ сверху, если есть текст */
    cursor: pointer; /* Оставляем курсор-палец для увеличения */
    transition: filter 0.2s;
}

.message-image:hover {
    filter: brightness(0.8);
}

/* --- СТИЛЬ ДЛЯ ПРОЗРАЧНОГО ЩИТА ПОВЕРХ ФОТО --- */
.image-shield {
    position: absolute; /* Позиционируем поверх родителя */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Щит полностью прозрачный и невидимый */
}