/* Общие стили для body и HTML */
body {
    background-color: #000;
    /* Черный фон */
    color: #00FF00;
    /* Ярко-зеленый текст */
    font-family: 'roboto mono', monospace;
    /* Ретро-шрифт или моноширинный */
    line-height: 1.2;
    margin: 0;
    display: flex;
    justify-content: center;
    /* Центрировать содержимое по горизонтали */
    align-items: center; /* ИЗМЕНЕНО: Выравнивать содержимое по центру по вертикали */
    min-height: 100vh;
    /* Минимальная высота на весь экран */
    box-sizing: border-box;
    /* Учитываем padding в общей ширине/высоте */
    overflow-y: auto;
    /* Добавляем прокрутку, если контент не помещается */
}

/* Стили для начальной заставки */
#intro-screen {
    background-color: #000;
    color: #00FF00;
    font-family: 'roboto mono', monospace;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 30px;
    box-sizing: border-box;
    text-align: left;
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

#intro-text-content {
    font-size: 0.9em;
    margin-bottom: 30px;
    white-space: pre-wrap;
    overflow: hidden;
    opacity: 0;
    text-align: left;
    width: 100%;
}

/* Основной контейнер игры */
.game-container {
    height: 100vh;
    background-color: transparent;
    /* Прозрачный фон */
    padding: 30px;
    border-radius: 0;
    /* Убираем скругленные углы */
    box-shadow: none;
    /* Убираем тени */
    max-width: 450px;
    /* Максимальная ширина контейнера, ближе к оригиналу */
    width: 100%;
    text-align: left;
    /* Выравнивание текста по левому краю */
    /* border: 2px solid #00FF00; */
    /* Зеленая рамка */

    /* УДАЛЯЕМ ЭТИ СТРОКИ: */
    /* opacity: 0; */
    /* visibility: hidden; */

    /* Оставляем только переход для opacity, display будем управлять через JS */
    transition: opacity 1s ease-in-out;
}

/* Состояние после задержки: полностью видимый */
.game-container.is-visible {
    opacity: 1;
    /* visibility: visible; */ /* Эту строку тоже можно удалить, так как display:block уже сделает его видимым */
    transition: opacity 1s ease-in-out;
}

h1 {
    color: #00FF00;
    /* Зеленый заголовок */
    margin-bottom: 20px;
    font-size: 1em;
    text-align: center;
    /* Центрируем заголовок */
}

/* Стили текста сцены */
#scene-text {
    font-size: 0.9em;
    margin-bottom: 25px;
    text-align: left;
    color: #00FF00;
    /* Зеленый цвет текста сцены */
    opacity: 0;
    /* Изначально скрыт, будет появляться с эффектом печати */
    /* Для эффекта печати */
    overflow: hidden;
    /* Скрывает текст, который еще не "напечатан" */
    white-space: pre-wrap;
    /* Сохраняет пробелы и переводы строк, позволяет тексту переноситься */
    word-wrap: break-word;
    /* Перенос длинных слов */
}

/* Стили для дополнительного текста сцены */
#additional-scene-text {
    font-size: 0.8em;
    margin-bottom: 25px;
    text-align: left;
    color: #00FF00;
    opacity: 0;
    /* Изначально скрыто */
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Контейнер опций (кнопок) */
#options-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Пространство между кнопками */
    margin-bottom: 25px;
    align-items: stretch;
    /* Растянуть кнопки по ширине контейнера */
    opacity: 0;
    /* Изначально скрыт, появится после печати текста сцены */
    transition: opacity 0.6s ease-in-out;
    /* Плавное появление кнопок */
}

/* Стили для кнопок */
.option-button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    font-size: 0.9em;
    cursor: pointer;
    border: 2px solid #00FF00;
    /* Зеленая рамка */
    border-radius: 0;
    /* Убираем скругление */
    background-color: transparent;
    /* Прозрачный фон */
    background-image: none;
    /* Убираем градиент */
    color: #00FF00;
    /* Зеленый текст */
    transition: background-color 0.2s, color 0.2s, opacity 0.3s ease-in-out;
    /* Плавный переход при наведении и для opacity */
    text-align: center;
    /* Центрируем текст кнопки */
    box-shadow: none;
    /* Убираем тени */
    text-shadow: none;
    /* Убираем тень текста */
    font-family: 'roboto mono', monospace;
    /* Применяем ретро-шрифт */
}

.option-button:hover {
    background-color: #00FF00;
    /* Фон становится зеленым */
    color: #000;
    /* Текст становится черным */
}

.option-button:active {
    background-color: #00FF00;
    /* Фон становится зеленым */
    color: #000;
    /* Текст становится черным */
    transform: none;
    /* Убираем смещение при клике */
}

.option-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent;
    color: #00FF00;
}

/* Стили для отображения параметров */
#parameters {
    display: flex;
    justify-content: flex-start;
    /* Выравнивание по левому краю */
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    font-size: 0.9em;
    color: #00FF00;
    /* Зеленый цвет для параметров */
    border-top: 2px dashed #00FF00;
    /* Зеленый пунктирный разделитель */
    padding-top: 15px;
    opacity: 0;
    /* Изначально скрыт, появится после печати текста сцены */
    transition: opacity 0.6s ease-in-out;
    /* Плавное появление параметров */
}

.param-display {
    margin: 0 15px 0 0;
    /* Отступ между отдельными параметрами, выравнивание по левому краю */
    white-space: nowrap;
    /* Предотвратить перенос строки внутри одного параметра */
    color: #00FF00;
    /* Зеленый цвет текста параметров */
}

.param-display span {
    font-weight: bold;
    /* Значения параметров жирным */
    color: #00FF00;
    /* Все значения параметров зеленые */
}

/* Стили для изображения сцены */
#scene-image {
    width: 200px;
    height: 100px;
    margin-top: 25px;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    object-fit: contain;
    display: block;
}

/* Стили для финального текста */
#final-ending {
    font-size: 1.3em;
    font-weight: bold;
    color: #00FF00;
    /* Зеленый цвет для финала */
    margin-top: 20px;
    text-align: left;
    /* Выравнивание по левому краю */
    padding-top: 20px;
    border-top: 2px dashed #00FF00;
    /* Зеленый пунктирный разделитель */
    opacity: 0;
    /* Изначально скрыт, появится после печати */
    /* Для эффекта печати */
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Стили для кнопок в конце игры */
#game-end-actions {
    margin-top: 25px;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    border-top: 2px dashed #00FF00;
    /* Добавляем разделитель */
    padding-top: 15px;
}

#game-end-actions button {
    width: 100%;
    /* Кнопки занимают всю ширину */
}


/* Вспомогательные классы для управления отображением */
.display-flex {
    display: flex;
}

.display-none {
    display: none;
}

#image-container {
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    justify-content: center;
}

/* Адаптивные настройки */
@media (max-width: 600px) {
    .game-container {
        padding: 15px;
        /* Меньший padding на маленьких экранах */
    }

    #options-container {
        gap: 8px;
        /* Меньший отступ между кнопками */
    }

    .option-button {
        padding: 10px 15px;
        /* Меньший padding кнопок */
    }

    #parameters {
        flex-direction: column;
        /* Параметры друг под другом на очень маленьких экранах */
        align-items: flex-start;
        /* Выравнивание по левому краю */
    }

    .param-display {
        margin: 5px 0;
        /* Отступ между параметрами при вертикальном размещении */
    }
}