/* Основные цвета и фон */
body {
    background: #2A1F17; /* Темно-коричневый фон */
    color: #F2E7D5; /* Светлый бежевый для текста */
}

/* Заголовки */
h1, h2, h3, h4 {
    color: #E48F45; /* Теплый оранжевый для заголовков */
}

/* Навигация */
.navbar {
    background: rgba(42, 31, 23, 0.95); /* Полупрозрачный темно-коричневый */
}

.navbar a {
    color: #F2E7D5; /* Светлый бежевый для текста навигации */
}

.navbar a:hover {
    color: #E48F45; /* Теплый оранжевый при наведении */
    opacity: 1;
}

.line {
    background: #F2E7D5; /* Светлый цвет для линий гамбургер-меню */
}

.navbar .menu-items {
    background: #2A1F17; /* Темно-коричневый для мобильного меню */
}

/* Кнопки */
.catalog-btn, .feedback-btn {
    background: linear-gradient(135deg, #E48F45 0%, #B64C38 100%); /* Градиент от оранжевого к красно-коричневому */
    color: #F2E7D5;
    box-shadow: 0 4px 8px rgba(150, 60, 20, 0.3);
}

.catalog-btn:hover, .feedback-btn:hover {
    opacity: 0.9;
    box-shadow: 0 6px 12px rgba(150, 60, 20, 0.5);
}

/* Формы */
.feedback-field {
    background-color: #3A2A20; /* Темный коричневый для полей ввода */
    color: #F2E7D5; /* Светлый бежевый для текста */
    border: 1px solid #E48F45; /* Оранжевая рамка */
}

.feedback-field:focus {
    border: 1px solid #B64C38; /* Темно-оранжевая рамка при фокусе */
    box-shadow: 0 0 5px rgba(228, 143, 69, 0.5);
}

/* Карточки и блоки */
.category-card {
    background: #3A2A20; /* Темный коричневый для карточек */
    box-shadow: 0 4px 10px rgba(180, 90, 40, 0.2);
    border: 1px solid rgba(228, 143, 69, 0.3);
}

.timeline-item {
    background: rgba(58, 42, 32, 0.7); /* Полупрозрачный темный коричневый */
    border-left: 3px solid #E48F45; /* Оранжевая левая граница */
}

/* Заголовок */
.header {
    background: linear-gradient(rgba(42, 31, 23, 0.7), rgba(42, 31, 23, 0.9)), url('https://via.placeholder.com/1600x900'); /* Затемненный фон с градиентом */
    background-size: cover;
    background-position: center;
}

.header-text {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Эффекты */
a:hover, .contacts-link:hover {
    color: #E48F45;
    transition: 0.4s;
}

.game-card.large, .game-card.medium {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(228, 143, 69, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card.large:hover, .game-card.medium:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

/* Футер */
footer {
    background: #231812; /* Темнее чем основной фон */
    border-top: 1px solid rgba(228, 143, 69, 0.3);
}

.copyright {
    color: #E48F45; /* Оранжевый для копирайта */
}

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

/* Дополнительные стили для атмосферных эффектов */
.about-left-col, .catalog-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.about-left-col img, .catalog-img img {
    transition: transform 0.7s ease;
}

.about-left-col:hover img, .catalog-img:hover img {
    transform: scale(1.03);
}

/* Основные цвета и фон */
body {
    background: #2A1F17; /* Темно-коричневый фон */
    color: #F2E7D5; /* Светлый бежевый для текста */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0 0L100 100M100 0L0 100" stroke="%23382515" stroke-width="0.5"/></svg>');
    background-blend-mode: soft-light;
}

/* Заголовки */
h1, h2, h3, h4 {
    color: #E48F45; /* Теплый оранжевый для заголовков */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
}

h1:after, h2:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #E48F45, transparent);
}

/* Навигация */
.navbar {
    background: rgba(42, 31, 23, 0.95); /* Полупрозрачный темно-коричневый */
    backdrop-filter: blur(8px);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(228, 143, 69, 0.2);
}

.navbar a {
    color: #F2E7D5; /* Светлый бежевый для текста навигации */
    position: relative;
}

.navbar a:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: linear-gradient(90deg, #E48F45, #B64C38);
    transition: width 0.3s ease;
}

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

.navbar a:hover {
    color: #E48F45; /* Теплый оранжевый при наведении */
    opacity: 1;
    text-shadow: 0 0 8px rgba(228, 143, 69, 0.4);
}

.line {
    background: #E48F45; /* Оранжевый цвет для линий гамбургер-меню */
}

.navbar .menu-items {
    background: rgba(42, 31, 23, 0.98); /* Почти непрозрачный темно-коричневый для мобильного меню */
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(228, 143, 69, 0.2);
}

/* Кнопки */
.catalog-btn, .feedback-btn {
    background: linear-gradient(135deg, #E48F45 0%, #B64C38 100%); /* Градиент от оранжевого к красно-коричневому */
    color: #F2E7D5;
    box-shadow: 0 4px 8px rgba(150, 60, 20, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.catalog-btn:before, .feedback-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
    z-index: -1;
}

.catalog-btn:hover:before, .feedback-btn:hover:before {
    left: 100%;
}

.catalog-btn:hover, .feedback-btn:hover {
    opacity: 1;
    box-shadow: 0 6px 15px rgba(150, 60, 20, 0.6);
    transform: translateY(-3px);
}

/* Формы */
.feedback-field {
    background-color: #3A2A20; /* Темный коричневый для полей ввода */
    color: #F2E7D5; /* Светлый бежевый для текста */
    border: 1px solid #E48F45; /* Оранжевая рамка */
}

.feedback-field:focus {
    border: 1px solid #B64C38; /* Темно-оранжевая рамка при фокусе */
    box-shadow: 0 0 5px rgba(228, 143, 69, 0.5);
}

/* Карточки и блоки */
.category-card {
    background: #3A2A20; /* Темный коричневый для карточек */
    box-shadow: 0 4px 10px rgba(180, 90, 40, 0.2);
    border: 1px solid rgba(228, 143, 69, 0.3);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.category-card:before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #E48F45 10%, transparent 70%);
    opacity: 0.7;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(180, 90, 40, 0.3);
}

.timeline-item {
    background: rgba(58, 42, 32, 0.7); /* Полупрозрачный темный коричневый */
    border-left: 3px solid #E48F45; /* Оранжевая левая граница */
    transition: all 0.3s ease;
    position: relative;
}

.timeline-item:hover {
    transform: translateX(5px);
    background: rgba(58, 42, 32, 0.85);
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.2);
}

.timeline-item:before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: #E48F45;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(228, 143, 69, 0.8);
}

/* Заголовок */
.header {
    background: linear-gradient(rgba(42, 31, 23, 0.7), rgba(42, 31, 23, 0.9)), url('https://via.placeholder.com/1600x900'); /* Затемненный фон с градиентом */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(228, 143, 69, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(182, 76, 56, 0.1) 0%, transparent 20%);
    animation: floatLight 15s infinite alternate ease-in-out;
}

@keyframes floatLight {
    0% {
        opacity: 0.5;
        transform: translateY(-10px) scale(1);
    }
    50% {
        opacity: 0.7;
        transform: translateY(0) scale(1.05);
    }
    100% {
        opacity: 0.5;
        transform: translateY(10px) scale(1);
    }
}

.header-text {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 1;
}

.header-text h1 {
    animation: textGlow 4s infinite alternate;
}

@keyframes textGlow {
    0% {
        text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
    }
    100% {
        text-shadow: 0 0 15px rgba(228, 143, 69, 0.8), 0 0 30px rgba(228, 143, 69, 0.4);
    }
}

/* Эффекты */
a:hover, .contacts-link:hover {
    color: #E48F45;
    transition: 0.4s;
}

.game-card.large, .game-card.medium {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(228, 143, 69, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card.large:hover, .game-card.medium:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

/* Футер */
footer {
    background: #231812; /* Темнее чем основной фон */
    border-top: 1px solid rgba(228, 143, 69, 0.3);
    background-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="300" viewBox="0 0 1200 300"><path d="M0,200 Q300,250 600,150 T1200,200" stroke="%23E48F45" stroke-width="1" fill="none" opacity="0.2"/></svg>'),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="300" viewBox="0 0 1200 300"><path d="M0,150 Q300,100 600,200 T1200,150" stroke="%23B64C38" stroke-width="1" fill="none" opacity="0.15"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

footer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(228, 143, 69, 0.05) 0%, transparent 70%);
}

.copyright {
    color: #E48F45; /* Оранжевый для копирайта */
    position: relative;
}

.copyright:after {
    content: '❦';
    display: block;
    margin-top: 10px;
    color: rgba(228, 143, 69, 0.7);
}

.info-links a {
    position: relative;
    transition: all 0.3s ease;
}

.info-links a:hover {
    color: #E48F45;
    transform: translateY(-3px);
}

.info-links a:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(228, 143, 69, 0.5), transparent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.info-links a:hover:after {
    transform: scaleX(1);
}

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

/* Дополнительные стили для атмосферных эффектов */
.about-left-col, .catalog-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.about-left-col:before, .catalog-img:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 70%, rgba(228, 143, 69, 0.4) 0%, transparent 50%);
    mix-blend-mode: overlay;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.about-left-col:hover:before, .catalog-img:hover:before {
    opacity: 1;
}

.about-left-col img, .catalog-img img {
    transition: transform 0.7s ease;
    filter: brightness(0.95) contrast(1.05);
}

.about-left-col:hover img, .catalog-img:hover img {
    transform: scale(1.03);
    filter: brightness(1.05) contrast(1.1);
}

.about-left-col:after, .catalog-img:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(228, 143, 69, 0.2) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Парящие частицы для эффекта падающих листьев */
.about, .catalog, .info {
    position: relative;
    overflow: hidden;
}

.about:before, .catalog:before, .info:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 85% 7%, rgba(228, 143, 69, 0.3) 0%, transparent 3%),
        radial-gradient(circle at 15% 16%, rgba(228, 143, 69, 0.3) 0%, transparent 2%),
        radial-gradient(circle at 32% 42%, rgba(182, 76, 56, 0.2) 0%, transparent 2.5%),
        radial-gradient(circle at 73% 68%, rgba(228, 143, 69, 0.3) 0%, transparent 3%),
        radial-gradient(circle at 21% 86%, rgba(182, 76, 56, 0.2) 0%, transparent 2%);
    animation: floatParticles 40s infinite linear;
}

@keyframes floatParticles {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}