/* Основная цветовая палитра для уютных английских улочек */
body {
    background: #2C3639; /* Темно-серый с оттенком зелени, как брусчатка в тумане */
    color: #F5EFE7; /* Теплый кремовый цвет для основного текста */
}

/* Стили заголовков в стиле английской классики */
h1, h2, h3, h4 {
    color: #DCD7C9; /* Приглушенный светло-бежевый, как старинный пергамент */
}

/* Акцентный цвет для ссылок - цвет старинных фонарей */
.navbar a {
    color: #F5EFE7;
}

.navbar a:hover {
    color: #A27B5C; /* Теплый коричневый, как деревянные фасады */
}

/* Гамбургер-меню в мобильной версии */
.line {
    background: #DCD7C9;
}

.navbar .menu-items {
    background: #2C3639;
}

/* Кнопки с оттенком старинного кирпича */
.catalog-btn {
    background: #A27B5C; /* Теплый коричневый, как кирпичные стены */
    color: #F5EFE7;
}

.catalog-btn:hover {
    background: #8B6B4A; /* Немного темнее при наведении */
}

/* Оформление подвала */
footer {
    background: #3F4E4F; /* Темно-серый с оттенком зелени, чуть светлее основного фона */
}

footer a {
    color: #DCD7C9;
}

/* Поля формы обратной связи */
.feedback-field {
    background-color: #3F4E4F;
    color: #F5EFE7;
    border: 1px solid #A27B5C;
}

.feedback-btn {
    background: #A27B5C;
    color: #F5EFE7;
}

.feedback-btn:hover {
    background: #8B6B4A;
}

/* Контакты */
.contacts-link, .contacts-address {
    color: #DCD7C9;
}

/* Карточки категорий в стиле уютных английских домиков */
.category-card {
    background: #3F4E4F;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid #A27B5C;
}

/* Временная шкала */
.timeline-item {
    background: #3F4E4F;
    border-left: 3px solid #A27B5C;
}

/* Сетка особенностей */
.featured-grid .game-card {
    background: linear-gradient(rgba(44, 54, 57, 0.7), rgba(44, 54, 57, 0.9));
    border: 1px solid #A27B5C;
}

/* Карточки игр в сетке */
.games-container .game-card {
    background: #3F4E4F;
    border: 1px solid #A27B5C;
}

/* Дополнительные акцентные элементы */
.copyright {
    color: #DCD7C9;
}

/* Эффект наведения для ссылок и карточек */
.category-card:hover, .game-card:hover {
    box-shadow: 0 6px 12px rgba(162, 123, 92, 0.3);
    transform: translateY(-5px);
}

/* Основная цветовая палитра для уютных английских улочек */
body {
    background: #2C3639; /* Темно-серый с оттенком зелени, как брусчатка в тумане */
    color: #F5EFE7; /* Теплый кремовый цвет для основного текста */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a27b5c' fill-opacity='0.1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* Стили заголовков в стиле английской классики */
h1, h2, h3, h4 {
    color: #DCD7C9; /* Приглушенный светло-бежевый, как старинный пергамент */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Акцентный цвет для ссылок - цвет старинных фонарей */
.navbar a {
    color: #F5EFE7;
    position: relative;
}

.navbar a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #A27B5C;
    transition: width 0.4s ease;
}

.navbar a:hover {
    color: #A27B5C; /* Теплый коричневый, как деревянные фасады */
}

.navbar a:hover::after {
    width: 100%;
}

/* Гамбургер-меню в мобильной версии */
.line {
    background: #DCD7C9;
}

.navbar .menu-items {
    background: #2C3639;
}

/* Кнопки с оттенком старинного кирпича */
.catalog-btn {
    background: #A27B5C; /* Теплый коричневый, как кирпичные стены */
    color: #F5EFE7;
}

.catalog-btn:hover {
    background: #8B6B4A; /* Немного темнее при наведении */
}

/* Оформление подвала */
footer {
    background: #3F4E4F; /* Темно-серый с оттенком зелени, чуть светлее основного фона */
    position: relative;
    overflow: hidden;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #A27B5C, transparent);
}

footer a {
    color: #DCD7C9;
    position: relative;
    display: inline-block;
}

footer a::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #DCD7C9;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
}

footer a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Поля формы обратной связи */
.feedback-field {
    background-color: #3F4E4F;
    color: #F5EFE7;
    border: 1px solid #A27B5C;
}

.feedback-btn {
    background: #A27B5C;
    color: #F5EFE7;
}

.feedback-btn:hover {
    background: #8B6B4A;
}

/* Контакты */
.contacts-link, .contacts-address {
    color: #DCD7C9;
}

/* Карточки категорий в стиле уютных английских домиков */
.category-card {
    background: #3F4E4F;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid #A27B5C;
}

/* Временная шкала */
.timeline-item {
    background: #3F4E4F;
    border-left: 3px solid #A27B5C;
}

/* Сетка особенностей */
.featured-grid .game-card {
    background: linear-gradient(rgba(44, 54, 57, 0.7), rgba(44, 54, 57, 0.9));
    border: 1px solid #A27B5C;
}

/* Карточки игр в сетке */
.games-container .game-card {
    background: #3F4E4F;
    border: 1px solid #A27B5C;
    position: relative;
    overflow: hidden;
}

.games-container .game-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(220, 215, 201, 0.1), transparent);
    transition: 0.8s;
}

.games-container .game-card:hover::before {
    left: 100%;
}

/* Дополнительные акцентные элементы */
.copyright {
    color: #DCD7C9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Эффект наведения для ссылок и карточек */
.category-card:hover, .game-card:hover {
    box-shadow: 0 6px 12px rgba(162, 123, 92, 0.3);
    transform: translateY(-5px);
}

/* Стилизация затемнения для больших изображений */
.game-card.large::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(44, 54, 57, 0.9) 0%, rgba(44, 54, 57, 0.4) 50%, rgba(44, 54, 57, 0.1) 100%);
    transition: 0.4s;
    pointer-events: none;
}

/* Эффект для заголовков при наведении */
h2:hover, h3:hover {
    color: #A27B5C;
    transition: 0.4s;
}