@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Oswald:wght@300;400;700&display=swap');

:root {
    --bg: #050505;
    --card: #111;
    --accent: #ff0033; /* Ядовито-красный */
    --text: #eee;
    --glass: rgba(15, 15, 15, 0.95);
    --header-height: 70px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    padding-top: var(--header-height); /* Отступ под шапку */
    padding-bottom: 80px;
    background-image: radial-gradient(circle at center, #1a0000 0%, #000 100%);
    background-attachment: fixed;
}

/* === UI ELEMENTS === */
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }

h1, h2, h3 { 
    font-family: 'Metal Mania'; 
    text-transform: uppercase; 
    color: var(--accent); 
    letter-spacing: 2px; 
}

/* Офигенный заголовок с эффектом */
.awesome-title {
    font-size: 3rem; 
    text-align: center; 
    margin-bottom: 40px; 
    text-shadow: 0 0 15px var(--accent);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { text-shadow: 0 0 10px var(--accent); }
    50% { text-shadow: 0 0 25px var(--accent), 0 0 5px #fff; }
    100% { text-shadow: 0 0 10px var(--accent); }
}

.btn {
    display: inline-block; background: transparent; color: var(--accent);
    border: 2px solid var(--accent); padding: 12px 20px;
    font-weight: bold; text-transform: uppercase; text-decoration: none; cursor: pointer;
    transition: 0.3s; width: 100%; text-align: center; margin-top: 10px;
    font-family: 'Oswald', sans-serif;
}
.btn:hover { background: var(--accent); color: #fff; box-shadow: 0 0 20px var(--accent); }

/* === HEADER (АДАПТИВНЫЙ) === */
header {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height);
    background: var(--glass); backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--accent); z-index: 1000;
}

.navbar {
    display: flex; justify-content: space-between; align-items: center; height: 100%;
}

/* Логотип (Картинка или Текст) */
.logo { 
    display: flex; align-items: center; 
    height: 100%; text-decoration: none; 
}
.logo img {
    max-height: 50px; /* Ограничение высоты лого */
    width: auto;
    filter: drop-shadow(0 0 5px var(--accent));
    transition: 0.3s;
}
.logo:hover img { filter: drop-shadow(0 0 15px var(--accent)); }

/* Меню ПК */
nav { display: flex; gap: 20px; }
nav a {
    color: #bbb; text-decoration: none; 
    font-weight: bold; text-transform: uppercase; font-size: 1rem; 
    transition: 0.3s; position: relative;
}
nav a:hover, nav a.active { color: #fff; text-shadow: 0 0 10px #fff; }
nav a.active::after {
    content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: var(--accent);
}

/* Бургер меню (скрыто на ПК) */
.menu-toggle { display: none; font-size: 1.8rem; color: #fff; cursor: pointer; }

/* === GRID & CARDS === */
.grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 30px; 
}

.card {
    background: var(--card); border: 1px solid #333; 
    border-radius: 6px; overflow: hidden; transition: 0.4s; 
    display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 5px 30px rgba(255,0,51,0.2); }

.card img { 
    width: 100%; height: 250px; object-fit: cover; 
    border-bottom: 1px solid #333; 
}
.card-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: 10px; font-size: 1.4rem; }
.card-body p { color: #aaa; font-size: 0.95rem; line-height: 1.5; flex-grow: 1; }

/* === МОБИЛЬНАЯ АДАПТАЦИЯ (Самое важное) === */
@media (max-width: 900px) {
    .menu-toggle { display: block; z-index: 1001; }
    
    nav {
        position: fixed; top: 0; right: -100%; width: 80%; height: 100vh;
        background: #000; flex-direction: column; 
        padding-top: 80px; padding-left: 30px;
        border-left: 2px solid var(--accent);
        transition: 0.4s ease;
        box-shadow: -10px 0 30px rgba(0,0,0,0.8);
    }
    
    nav.open { right: 0; }
    
    nav a { font-size: 1.5rem; margin-bottom: 20px; display: block; }
    
    .grid { grid-template-columns: 1fr; /* Одна колонка на телефоне */ }
    
    h1.awesome-title { font-size: 2rem; }
    
    .card img { height: auto; aspect-ratio: 16/9; } /* Правильные пропорции на мобиле */
}

/* === СЕКЦИИ === */
/* Биография */
.bio-box { 
    background: var(--glass); padding: 30px; border: 1px solid #333; 
    display: flex; gap: 30px; flex-wrap: wrap; 
}
.bio-img { flex: 0 0 300px; max-width: 100%; }
.bio-img img { width: 100%; border: 2px solid var(--accent); box-shadow: 0 0 15px var(--accent); }
.bio-text { flex: 1; font-size: 1.1rem; line-height: 1.6; text-align: justify; min-width: 300px; }

/* Чат */
.chat-container { background: #000; border: 1px solid #333; border-radius: 5px; }
.chat-box { height: 400px; overflow-y: auto; padding: 20px; display: flex; flex-direction: column-reverse; }
.msg { padding: 10px; border-bottom: 1px solid #222; }
.msg strong { color: var(--accent); }

/* Футер */
footer { background: #000; border-top: 2px solid var(--accent); padding: 40px 0; margin-top: 60px; text-align: center; }
.socials a { font-size: 1.8rem; color: #fff; margin: 0 15px; transition: 0.3s; }
.socials a:hover { color: var(--accent); transform: scale(1.2); }

/* Формы */
input, textarea { 
    width: 100%; background: #1a1a1a; border: 1px solid #444; 
    color: #fff; padding: 12px; margin-bottom: 15px; border-radius: 4px;
}
input:focus, textarea:focus { border-color: var(--accent); outline: none; }

/* === ПОЛНАЯ НОВОСТЬ (Single News Page) === */
.news-container {
    background: var(--card);
    border: 1px solid #333;
    padding: 30px;
    border-radius: 6px;
}

.news-header h1 {
    text-align: left;
    margin-bottom: 10px;
    font-size: 2.5rem;
}

.news-date {
    color: var(--accent);
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}

.news-full-img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border: 2px solid #333;
    margin-bottom: 30px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.news-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #ddd;
    white-space: pre-wrap; /* Сохраняет переносы строк из админки */
}

.news-back-btn {
    display: inline-block;
    margin-bottom: 20px;
    color: #aaa;
    text-decoration: none;
    font-size: 0.9rem;
}
.news-back-btn:hover { color: var(--accent); }

/* Маленькая кнопка "Читать далее" для главной */
.btn-small {
    padding: 8px 15px;
    font-size: 0.9rem;
    width: auto;
    display: inline-block;
    margin-top: 15px;
}