/* Минималистичный CSS Grid для таблицы планирования */
.title-planing {
    margin: 20px 0;
}

.table-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: row dense;
}

.item {
    border: 1px solid black; /* Рамка вокруг каждого элемента */
    font-size: .9em; /* Размер шрифта */
    color: black; /* Цвет текста */
    padding: 3px; /* Внутренние отступы */
    text-align: center; /* Выравнивание текста по центру */
    display: flex; /* Активируем Flexbox */
    flex-direction: column; /* Направление расположения дочерних элементов вертикально */
    align-items: center; /* Центруем по горизонтали */
}

.text-orf {
    text-align: left;
}

.item-1, .item-2, .item-3, .item-4, .item-5 {
    background-color: rgb(47, 197, 33);
}

.item-6, .item-7, .item-8, .item-9, .item-10 {
    background-color: rgb(215, 54, 230);
}

.item-11, .item-12, .item-13, .item-14, .item-15 {
    background-color: rgb(255, 255, 0);
    width: 100%;
    height: 55px;
    padding: 7px;
}

.input-text {
    width: 100%;
    resize: vertical; /* Возможность изменять высоту руками пользователя */
    overflow-y: auto; /* Появляется прокрутка, если текста много */
}

.item-png {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.circle {
    width: 30px;      /* диаметр окружности */
    height: 30px;     /* делаем квадрат для будущей окружности */
    border-radius: 50%; /* преобразует прямоугольник в круг */
    display: flex;    /* центрирование содержимого */
    align-items: center; /* центровка по вертикали */
    justify-content: center; /* центровка по горизонтали */
    background-color: rgb(255, 255, 0); /* желтый фон */
    border: 1px solid black; /* тонкая черная обводка */
}

.text-orf-effects {
    font-weight: bold; /* Выделяем важное слово полужирным */
    text-decoration: underline; /* Подчеркивание текста */
}

.bold {
    font-weight: bold; /* Выделяем полужирным */
}

 /* ---------------- стили для смайла ------------------- */
/* Минимальные отступы и естественный внешний вид смайлов */
.smiley-placeholder {
    width: 25px;
    display: inline-block;
    vertical-align: baseline; /* Вертикальное выравнивание по базовой линии текста */
    position: relative; /* Позиционирование относительное, чтобы можно было слегка подкорректировать расположение */
    margin: 0; /* Без лишних отступов */
    padding: 0; /* Без внутреннего заполнения */
    line-height: normal; /* Высота строки совпадает с обычным текстом */
    margin-right: 5px;
    margin-left: -1px;
}

.smiley-button {
    position: relative; /* Ключевое! Для правильного позиционирования выпадающего списка */
    display: inline-block; /* Чтобы не ломалась строка */
    vertical-align: baseline; /* Выравнивание по базовой линии текста */
    cursor: pointer;
}

/* Оформление смайлов */
.smiley-icon {
    background-color: transparent; /* Прозрачный фон */
    border: none; /* Без границ */
    padding: 0; /* Без отступов */
    width: 20px;
    height: 20px;
    display: inline-block; /* Расположение в одну линию с текстом */
    text-align: center; /* Центрирование иконки */
    line-height: 1.2; /* Однострочный режим */
    transition: color 0.3s ease; /* Анимация цвета */
    font-size: 1.2em; /* Размер шрифта соответствует тексту */
    cursor: pointer;
}

/* Стили списков вариантов ответов */
.smiley-options {
    display: none;
    position: absolute;
    /* Появляется ниже смайлика */
    /* top: 100%; */
    top: calc(100% + 5px); /* Отступ сверху */
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
    min-width: 60px;
}

.smiley-options li {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

/* Зелёный фон — правильный ответ */
.smiley-icon.correct {
    background-color: #d4edda;
    color: #155724;
}

/* Красный фон — неправильный ответ */
.smiley-icon.incorrect {
    background-color: #f8d7da;
    color: #721c24;
}

/* Прозрачность — при выборе */
.smiley-icon.selected {
    opacity: 0.5;
}

.smiley-options li:hover {
    background-color: #f0f0f0;
}