/* Общие стили */
html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Занимает всю высоту viewport */
    width: 100%;
    overflow: hidden; /* Запрещаем появление полосы прокрутки */
}
body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
  box-sizing: border-box;
}

#app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
#controls {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-between;
	    flex-shrink: 0; /* Запрещаем сжатие */
    width: auto; /* Автоматическая ширина */
}
#stats {
    flex-grow: 1;
}
#game-container {
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

	    min-height: 0; /* Позволяем уменьшаться до нуля */
    max-height: 100%; /* Ограничиваем высоту размером родителя */
	
}

#mobile-controls {
    display: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
    flex-direction: column;
    gap: 10px;
}

.control-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* Добавляем перенос при маленькой ширине */
}

.control-button, .navigate-button {
    width: 50px;
    height: 50px;
    font-size: 24px;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    background-color: hsl(153, 98%, 23%);
    color: white;
    cursor: pointer;
    outline: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease-in-out, background-color 0.3s ease;
	 opacity: 0.5; /* Устанавливаем начальную прозрачность (70%) */
}

.control-button,.navigate-button:hover {
    background-color: hsl(153, 98%, 20%);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
	 opacity: 0.7; /* Полностью видимая при взаимодействии */
}

.control-button,.navigate-button:active {
    transform: scale(0.95);
    background-color: hsl(153, 98%, 10%);
	 opacity: 0.7; /* Полностью видимая при взаимодействии */
}

#win-container {
    display: none;
    position: fixed; /* Используем fixed для лучшей адаптивности */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8); /* Полупрозрачный фон */
    color: white;
    padding: 20px;
    border-radius: 15px; /* Сглаженные углы */
    width: 80%; /* Адаптивная ширина */
    max-width: 400px; /* Максимальная ширина */
    text-align: center;
    font-family: Arial, sans-serif; /* Более современный шрифт */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Тень для эффекта глубины */
}

#win-container table {
    margin: 10px auto; /* Центрирование таблицы */
    border-collapse: collapse; /* Убираем лишние отступы между ячейками */
    width: 100%; /* Ширина таблицы */
}

#win-container table td {

    padding: 8px; /* Отступы внутри ячеек */
    font-size: 1em; /* Размер текста */
}

#win-container caption {
    font-size: 1.5em; /* Размер заголовка */
    font-weight: bold; /* Жирный шрифт */
    margin-bottom: 10px; /* Отступ под заголовком */
    color: #FFD700; /* Золотистый цвет */
}



/* Стили для светлой темы */
@media (prefers-color-scheme: light) {
    #controls {
        background: rgba(0, 0, 0, 0.7);
    }

    #win-container {
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
    }
		    /* Изменяем цвет заголовков для темной темы */
    #win-container caption {
        color: #FFD700; /* Красный цвет для заголовков */
    }
	
	#game-container {
   
    background-color: white;
	}
}

/* Стили для темной темы */
@media (prefers-color-scheme: dark) {
    #controls {
        background: rgba(255, 255, 255, 0.7);
        color: black;
    }

    #win-container {
        background-color: rgba(255, 255, 255, 0.8);
        color: black;
    }
	    /* Изменяем цвет заголовков для темной темы */
    #win-container caption {
        color: red; /* Красный цвет для заголовков */
    }
		#game-container {
   
    background-color: black;
	}
}
/* Адаптивность для ландшафтной ориентации */
@media (orientation: landscape) {
    #app-container {
        flex-direction: row;
    }

    #controls {
        flex-direction: column;
        width: auto;
        flex-shrink: 0;
    }

    #game-container {
        min-width: 0;
        max-width: 100%;
    }
}
/* Адаптивность для мобильных устройств в портретной ориентации */
@media (max-width: 768px) and (orientation: portrait) {
    #controls {
        flex-direction: row;
        gap: 5px;
    }

    .control-button {
        width: 70px;
        height: 70px;
        font-size: 18px;
    }

    /* Показываем кнопки на мобильных устройствах */
    #mobile-controls {
        display: flex;
    }
}

/* Адаптивность для мобильных устройств в ландшафтной ориентации */
@media (max-height: 768px) and (orientation: landscape) {
    #controls {
        flex-direction: column;
        gap: 5px;
    }

    .control-button,.navigate-button {
        width: 70px;
        height: 70px;
        font-size: 18px;
    }

    /* Показываем кнопки на мобильных устройствах */
    #mobile-controls {
        display: flex;

        gap: 10px;
        bottom: 10px; /* Отступ от нижней границы */
        right: 10px; /* Отступ от правой границы */
    }
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
    #controls {
        font-size: 12px;
        padding: 5px;
    }

    .control-button,.navigate-button {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}

/* Основные стили для модального окна */
.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Остается на месте */
    z-index: 1000; /* На переднем плане */
    left: 0;
    top: 0;
    width: 100%; /* Полная ширина */
    height: 100%; /* Полная высота */
    overflow: auto; /* Включает прокрутку, если необходимо */
    background-color: rgba(0, 0, 0, 0.5); /* Черный фон с прозрачностью */
}

/* Стили для содержимого модального окна */
.modal-content {
    background-color: #fefefe; /* Белый фон */
    margin: auto; /* Центрирование */
    padding: 20px; /* Отступы */
    border: 1px solid #888; /* Рамка */
    width: 80%; /* Ширина */
    max-width: 600px; /* Максимальная ширина */
    max-height: 80%; /* Максимальная высота */
    border-radius: 8px; /* Закругленные углы */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень */
    overflow-y: auto; /* Прокрутка по вертикали, если содержимое превышает высоту */
}

/* Стили для кнопки закрытия */
.close {
    color: #aaa; /* Цвет кнопки */
    float: right; /* Выравнивание вправо */
    font-size: 28px; /* Размер шрифта */
    font-weight: bold; /* Жирный шрифт */
}

.close:hover,
.close:focus {
    color: black; /* Цвет при наведении */
    text-decoration: none; /* Убираем подчеркивание */
    cursor: pointer; /* Курсор в виде указателя */
}

/* Стили для заголовка модального окна */
.modal-content h2 {
    margin-top: 0; /* Убираем верхний отступ */
}

/* Стили для таблицы внутри модального окна */
table {
    width: 100%; /* Полная ширина */
    border-collapse: collapse; /* Убираем промежутки между ячейками */
}

th, td {
    padding: 10px; /* Отступы внутри ячеек */
    text-align: left; /* Выравнивание текста */
    border-bottom: 1px solid #ddd; /* Нижняя граница */
}

th {
    background-color: #f2f2f2; /* Цвет фона заголовка */
}

/* Общий стиль для контейнера табов */
.tabs-container {
    width: 100%;
    max-width: 600px; /* Ограничение ширины для адаптивности */
    margin: 0 auto; /* Центрирование */
    font-family: Arial, sans-serif;
}

/* Стиль для панели табов */
.tabs {
    display: flex;
    border-bottom: 2px solid #ccc; /* Линия под табами */
    background-color: #f9f9f9; /* Фоновый цвет панели табов */
    border-radius: 5px 5px 0 0; /* Скругление углов сверху */
    overflow: hidden; /* Убираем лишние отступы */
}

/* Стиль для каждой вкладки */
.tab {
    padding: 10px 20px; /* Внутренний отступ */
    cursor: pointer; /* Изменение курсора на "пальчик" */
    border: none; /* Убираем границу */
    background-color: transparent; /* Прозрачный фон */
    color: #333; /* Цвет текста */
    font-size: 16px; /* Размер шрифта */
    transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход при наведении */
    position: relative; /* Для создания эффекта подчеркивания */
}

/* Эффект при наведении мыши */
.tab:hover {
    background-color: #e0e0e0; /* Цвет при наведении */
}

/* Стиль активной вкладки */
.tab.active {
    background-color: #fff; /* Белый фон */
    color: #007bff; /* Цвет текста активной вкладки */
    border-bottom: 2px solid #007bff; /* Подчеркивание активной вкладки */
    z-index: 1; /* Чтобы активная вкладка была поверх других */
}

/* Стиль содержимого табов */
.tab-content {
    padding: 20px; /* Внутренний отступ */
    border: 1px solid #ddd; /* Граница вокруг содержимого */
    border-top: none; /* Убираем верхнюю границу, так как она заменяется линией под табами */
    border-radius: 0 0 5px 5px; /* Скругление нижних углов */
    background-color: #fff; /* Фоновый цвет */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Тени для эффекта глубины */
}