/* Атмосферная палитра для механических существ и неизведанных миров */
body {
    background: #0F111A;
    color: #D5D9E6;
}

/* Градиентный фон для элементов */
.navbar, footer {
    background: linear-gradient(to right, #0F111A, #1A1F35);
}

/* Акцентные цвета для заголовков и элементов */
h1, h2, h3, h4 {
    color: #7DF9FF;
    text-shadow: 0 0 10px rgba(125, 249, 255, 0.5);
}

/* Элементы навигации */
.navbar a {
    color: #D5D9E6;
}

.navbar a:hover {
    color: #FF7F50;
    opacity: 1;
}

.line {
    background: #7DF9FF;
}

.navbar .menu-items {
    background: #0F111A;
}

/* Кнопки и интерактивные элементы */
.catalog-btn, .feedback-btn {
    background: linear-gradient(135deg, #273057 0%, #7D3B92 100%);
    color: #D5D9E6;
    border: 1px solid #7DF9FF;
    box-shadow: 0 0 15px rgba(125, 249, 255, 0.3);
}

.catalog-btn:hover, .feedback-btn:hover {
    background: linear-gradient(135deg, #7D3B92 0%, #273057 100%);
    opacity: 1;
}

/* Формы и поля ввода */
.feedback-field {
    background-color: #1A1F35;
    color: #D5D9E6;
    border: 1px solid #7D3B92;
}

.feedback-field:focus {
    border-color: #7DF9FF;
    box-shadow: 0 0 8px rgba(125, 249, 255, 0.5);
}

/* Карточки и контейнеры */
.category-card {
    background: linear-gradient(to bottom right, #1A1F35, #273057);
    box-shadow: 0 4px 15px rgba(125, 249, 255, 0.15);
    border: 1px solid #7D3B92;
}

.game-card.large, .game-card.medium {
    background: linear-gradient(to bottom, rgba(15, 17, 26, 0.8), rgba(26, 31, 53, 0.9));
    border: 1px solid #7DF9FF;
    box-shadow: 0 0 20px rgba(125, 249, 255, 0.2);
}

/* Временная шкала */
.timeline-item {
    background: linear-gradient(to right, #1A1F35, #273057);
    border-left: 4px solid #7DF9FF;
}

/* Дополнительные элементы */
.stats-grid div, .games-container div {
    background: rgba(26, 31, 53, 0.7);
    border: 1px solid #7D3B92;
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.stats-grid div:hover, .games-container div:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(125, 249, 255, 0.2);
    border-color: #7DF9FF;
}

/* Футер */
footer a {
    color: #D5D9E6;
}

footer a:hover {
    color: #7DF9FF;
}

.copyright {
    color: #7DF9FF;
}

/* Специальные эффекты для механической тематики */
.header {
    background-image: linear-gradient(rgba(15, 17, 26, 0.7), rgba(15, 17, 26, 0.7)), url('/api/placeholder/1920/1080');
    background-attachment: fixed;
    position: relative;
}

.header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(125, 249, 255, 0.05) 0px,
        rgba(125, 249, 255, 0.05) 1px,
        transparent 1px,
        transparent 10px
    );
}

/* Анимация для механических элементов */
@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(125, 249, 255, 0.3); }
    50% { box-shadow: 0 0 20px rgba(125, 249, 255, 0.6); }
    100% { box-shadow: 0 0 5px rgba(125, 249, 255, 0.3); }
}

.logo {
    animation: glow 3s infinite;
}