@charset "utf-8";
* {
   margin: 0;
   padding: 0;
   outline: none;
}

html {height: 100%}

a {
    color: white;
    text-decoration: none;
}

a, a:hover {
    -webkit-transition: all.6s ease;
    -moz-transition: all.6s ease;
    -o-transition: all.6s ease;
    -ms-transition: all.6s ease;
    transition: all.6s ease;
}
button {
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

button:active {
    background-color: #537D5D; /* Цвет фона кнопки при нажатии */
}

@media (min-width: 790px)
{
body {
    width: auto;
    height: 100vh;
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 1em;
	color: white;
	line-height: 135%;
	background-color: #1E201E;
}

/*основное тело*/
.body {
    width: 95%;
    height: 98.5%;
    margin-left: 2.5%;
    margin-top: 10px;
    background-color: #3C3D37;
    border-radius: 20px;
}

/*стили кнопок нижнего меню*/
.bottom-nav {
    display: none;
}
.iconDeveloper {
    border-radius: 35px;
    margin-left: 91.5%;
    margin-top: -50px;
    width: 85px;
    height: 85px;
}

.feedbackTelegram
{
    margin-left: 91%;
    width: 100px;
    height: 100px;
}
.feedbackMail
{
    margin-left: 91.3%;
    width: 90px;
    height: 85px;
}
#news {
    margin-left: 91%;
    width: 100px;
    height: 60px;
    text-align: center;
    background-color: #4CAF50;
    font-size: 25px;
    color: white;
    margin-top: 15px;
    border-radius: 10px;
    border: none;
}

#saveData {
    margin-left: 91%;
    width: 100px;
    height: 60px;
    text-align: center;
    background-color: #4CAF50;
    font-size: 20px;
    color: white;
    margin-top: 15px;
    border-radius: 10px;
    border: none;
}

.scrollable-block {
    width: 87%;
    height: 89%;
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    flex-wrap: wrap;
    margin-top: -450px;
    margin-left: 20px;
    border-radius: 15px;
    padding: 10px;
    gap: 20px;
}

.game {
    text-align: center;
    flex-shrink: 0;
    position: relative;
    margin-left: 7px;
    border: 1px solid #1E201E;
    padding: 10px;
    width: 260px;
    height: 350px;
    border-radius: 15px;
    background-color: #697565;
    display: flex;
    flex-direction: column;
}

.game-content {
    flex-grow: 1; /* Занимает все доступное пространство */
}

.icon {
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 5px;
}

.title {
    font-style: italic;
    font-weight: bold;
    color: white;
    font-size: 24px;
    background-color: #697565;
    width: 250px; /* TextArea занимает всю ширину */
    height: 50px;
    border-radius: 10px;
    text-align: center;
    resize: none; /* Запретить изменение размера */
    overflow: auto; /* Автоматическая прокрутка при необходимости */
    border: none; /* Убрать рамку */
    padding: 0; /* Убрать отступы */
    font-family: inherit; /* Наследовать шрифт */
    line-height: inherit; /* Наследовать высоту строки */
    box-sizing: border-box; /* Важно, чтобы padding не увеличивал ширину */

     /* Отключаем обводку и тень при фокусе */
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    
    /* Убираем системную подсветку при тапе на телефоне */
    -webkit-tap-highlight-color: transparent !important;
    
    /* Убираем курсор/каретку, если она вдруг появляется */
    caret-color: transparent !important;

    /* Запрещаем выделять текст (чтобы он не синел при долгом нажатии) */
    user-select: none;
    -webkit-user-select: none;
}

/* Описание в карточке (краткое) */
.description {
    font-style: italic;
    font-weight: bold;
    color: white;
    background-color: #697565;
    width: 250px;
    height: 75px; /* Жесткая фиксированная высота */
    border-radius: 10px;
    text-align: center;
    resize: none;
    overflow: hidden; /* Скрываем всё, что не влезает */
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 16px; /* Немного уменьшил шрифт, чтобы влезло больше текста */
    line-height: 1.2em;
    box-sizing: border-box;
    display: flex; /* Для центровки текста по вертикали */
    align-items: center;
    justify-content: center;

    /* Отключаем обводку и тень при фокусе */
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    
    /* Убираем системную подсветку при тапе на телефоне */
    -webkit-tap-highlight-color: transparent !important;
    
    /* Убираем курсор/каретку, если она вдруг появляется */
    caret-color: transparent !important;

    /* Запрещаем выделять текст (чтобы он не синел при долгом нажатии) */
    user-select: none;
    -webkit-user-select: none;

}

/* Дополнительно перекрываем состояния фокуса и активности */
.description:focus,
.description:active,
.description:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.game-buttons {
    margin-bottom: auto; /* Прижимает кнопки к низу */
}

.download-button, .upcoming-button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px 0;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.oficialGames {
    width: 200px;
    height: 60px;
    border-radius: 10px;
    border: 0;
    margin-left: 30%;
    margin-top: 7px;
    font-size: 20px;
}
.noOficialGames {
    width: 200px;
    height: 60px;
    border-radius: 10px;
    border: 0;
    font-size: 20px;
}

.game-modal-content {
            background-color: #4f5c51; /* Твой стиль оливкового фона */
            color: white;
            padding: 20px;
            border-radius: 10px;
            width: 90%;
            max-width: 300px;
            position: relative;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .game-modal-inner {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .modal-game-icon {
            width: 120px;
            height: 120px;
            border-radius: 15px;
            margin-bottom: 15px;
            object-fit: cover;
        }
        .modal-game-title {
            font-size: 24px;
            margin: 0 0 10px 0;
            font-weight: bold;
        }
        .modal-game-description {
            font-size: 16px;
            margin-bottom: 20px;
            white-space: pre-wrap; /* Чтобы переносы строк из БД сохранялись */
            line-height: 1.5;
            text-align: left;
            width: 100%;
        }
        .modal-game-buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            gap: 10px;
        }
        .modal-game-buttons .download-button {
            display: inline-block;
            background-color: #5fb85f;
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            text-decoration: none;
            width: 100%;
            box-sizing: border-box;
            transition: 0.3s;
        }
        .modal-game-buttons .download-button:hover {
            background-color: #4ea34e;
        }
        .modal-game-buttons .upcoming-button {
            display: inline-block;
            background-color: #D98C00;
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            text-decoration: none;
            width: 100%;
            box-sizing: border-box;
        }


        .modal-game-buttons .coming-soon-button {
            display: inline-block;
            background-color: #888;
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            text-decoration: none;
            width: 100%;
            box-sizing: border-box;
        }


        .close-game {
            position: absolute;
            top: 10px;
            right: 15px;
            color: #fff;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }
        .close-game:hover {
            color: #ccc;
        }
        /* Стили для новой кнопки на карточках */
        .open-game-btn {
            background-color: #5fb85f;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 10px;
            font-size: 15px;
            cursor: pointer;
            width: 100%;
            transition: 0.3s;
            font-family: inherit;
        }
        .open-game-btn:hover {
            background-color: #4ea34e;
        }

        /* Стили для модального окна */
.modal {
    display: none; /* JS будет менять на flex */
    position: fixed; 
    z-index: 9999; /* Поднял приоритет, чтобы точно перекрывало всё */
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh; /* Высота ровно по экрану */
    background-color: rgba(0,0,0,0.6); /* Немного затемнил фон */
    
    /* Центрирование через Flexbox */
    align-items: center;
    justify-content: center;
}

        .game-modal-content {
    background-color: #3C3D37;
    border-radius: 10px;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    /* margin: 15% auto; Убираем это! */
    margin: 0; 
    padding: 20px;
    border: 1px solid #888;
    width: 50%; 
    max-width: 300px; /* Чтобы на ПК было не слишком широко */
    
    max-height: 90vh; /* Ограничиваем высоту 90% экрана */
    overflow-y: auto; /* Скролл появится только ВНУТРИ окошка, если текст длинный */
    
    /* Добавляем позиционирование для крестика */
    position: relative; 
}

.about-modal-content {
    background-color: #3C3D37;
    border-radius: 10px;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
    /* margin: 15% auto; Убираем это! */
    margin: 0; 
    padding: 20px;
    border: 1px solid #888;
    width: 50%; 
    max-width: 600px; /* Чтобы на ПК было не слишком широко */
    
    max-height: 90vh; /* Ограничиваем высоту 90% экрана */
    overflow-y: auto; /* Скролл появится только ВНУТРИ окошка, если текст длинный */
    
    /* Добавляем позиционирование для крестика */
    position: relative; 
}

        .close {
    color: #aaa;
    position: absolute; /* Крестик теперь привязан к краю */
    right: 15px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

        .close:hover,
.close:focus {
    color: #4CAF50;
    text-decoration: none;
    cursor: pointer;
}

        #about-us-button-bottom1
        {
            width: 100px;
            font-size: 30px;
            height: 70px;
            border-radius: 15px;
            border: none;
            color: white;
            margin-left: 91%;
            margin-top: 2px;
        }
}