/* --- style_anime.css --- */



/* 1. БАЗА И ШРИФТЫ */

:root {

    --bg-dark: #0f0f11;

    --accent: #9d4edd;         /* Ярко-фиолетовый */

    --accent-glow: #e0aaff;    /* Цвет свечения */

    --border: #000;

    --card-bg: #1a1a1d;

    --text-white: #ffffff;

}



body {

    margin: 0; padding: 0;

    background-color: var(--bg-dark);

    color: var(--text-white);

    font-family: 'Neucha', cursive; 

    font-size: 1.2rem;

    overflow-x: hidden;

    /* ФИКС ФУТЕРА */

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}



/* Канвас для фона */

#particle-canvas {

    position: fixed; top: 0; left: 0; width: 100%; height: 100%;

    z-index: -1; pointer-events: none;

}



h1, h2, h3 {

    font-family: 'Balsamiq Sans', cursive;

    text-transform: uppercase;

    letter-spacing: 1px;

}



/* МАНГА-БЛОК */

.manga-block {

    background: var(--card-bg);

    border: 3px solid var(--border);

    box-shadow: 0 0 10px rgba(157, 78, 221, 0.2);

    transition: all 0.2s ease-in-out;

}

.manga-block:hover {

    transform: translate(-4px, -4px);

    box-shadow: 5px 5px 0px var(--accent), 0 0 15px var(--accent);

    border-color: #fff;

}



/* --- 3. ШАПКА (УВЕЛИЧЕННАЯ) --- */

/* --- 3. ШАПКА (ФИКС: ШИРЕ И БЛИЖЕ К КРАЯМ) --- */
.anime-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 30px; /* Ближе к краям */
    height: 110px;     /* Выше */
    background: rgba(15, 15, 17, 0.95);
    border-bottom: 3px solid var(--accent);
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.5);
    position: sticky; top: 0; z-index: 1000;
}



.logo-container { display: flex; align-items: center; gap: 15px; }

.header-waifu { 
    height: 130px; /* Было 60, стало ОГРОМНОЙ */
    filter: drop-shadow(0 0 10px var(--accent)); 
    margin-top: 10px; /* Чтобы не вылезала вверх */
}

.site-title {

    font-size: 2.2rem; margin: 0; color: #fff;

    text-shadow: 0 0 10px var(--accent);

}



.nav-center { display: flex; gap: 30px; }

.nav-link {

    color: #ddd; text-decoration: none;

    font-family: 'Balsamiq Sans', cursive; font-size: 1.4rem;

    transition: 0.2s; text-shadow: 0 0 5px rgba(0,0,0,0.5);

}

.nav-link:hover {

    color: var(--accent); transform: scale(1.1);

    text-shadow: 0 0 15px var(--accent);

}



.header-controls { display: flex; align-items: center; gap: 20px; }



/* КНОПКИ ЯЗЫКА (НЕОН + ДВИЖЕНИЕ) */
.lang-btn {
    background: #000; color: #fff; border: 2px solid #fff;
    font-family: 'Balsamiq Sans', cursive; cursor: pointer;
    padding: 8px 15px; font-size: 16px; transition: 0.2s;
}
.lang-btn:hover {
    transform: translateY(-3px); /* Движение */
    box-shadow: 0 0 15px var(--accent); /* Сильный неон */
    border-color: var(--accent);
    color: var(--accent);
}
.lang-btn.active {
    background: var(--accent); border-color: var(--accent); color: #000;
    box-shadow: 0 0 15px var(--accent);
}

/* КНОПКА SUPPORT (БОЛЬШАЯ ИКОНКА) */
.btn-support-header {
    background: #000; color: #fff; border: 2px solid var(--accent);
    padding: 8px 25px; font-family: 'Balsamiq Sans', cursive; font-size: 1.1rem;
    text-decoration: none; display: flex; align-items: center; gap: 12px;
    box-shadow: 0 0 10px var(--accent); transition: 0.2s;
}
/* ВОТ ТУТ РАЗМЕР ДЕВОЧКИ В КНОПКЕ */
.btn-support-header img {
    height: 50px !important; /* Увеличил (было около 20) */
    width: auto;
}
.btn-support-header:hover {
    background: var(--accent); color: #000; 
    box-shadow: 0 0 25px var(--accent); /* Сильный неон */
    transform: scale(1.05);
}



/* 4. ГЛАВНЫЙ ЭКРАН */

.hero-section { text-align: center; padding: 100px 20px; }

.hero-slogan {

    font-size: 4rem; line-height: 1; margin-bottom: 15px; color: #fff;

    text-shadow: 4px 4px 0 #000, 0 0 20px var(--accent);

}

.hero-sub { color: var(--accent); font-size: 1.6rem; text-shadow: 0 0 10px rgba(157, 78, 221, 0.5); }



/* 5. СТАТИСТИКА */
.stats-section {
    background: #000;
    border-top: 2px solid #222;
    border-bottom: 2px solid #222;
    padding: 20px;
    margin-bottom: 50px;
    position: relative; /* <--- САМОЕ ВАЖНОЕ! Без этого картинка улетает */
}

.stats-container {
    display: flex;
    justify-content: center;
    gap: 60px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 5; /* Текст поверх картинки, если вдруг пересекутся */
}

.stat-text h3 { margin: 0; color: var(--accent); font-size: 2.2rem; text-shadow: 0 0 10px var(--accent); }
.stat-text p { margin: 0; color: #ccc; font-size: 1.1rem; }

/* ДЕВОЧКА С ОТЗЫВАМИ */
.chibi-reviews {
    position: absolute;
    left: 15%;          /* Отступ слева (двигай это число, чтобы перемещать её влево/вправо) */
    top: -140px;        /* Поднимаем вверх, чтобы сидела на полоске */
    height: 180px;      /* Размер картинки */
    width: auto;
    z-index: 10;
    filter: drop-shadow(0 0 10px #9d4edd);
    pointer-events: none;
}

/* На мобильных скрываем или двигаем */
@media (max-width: 900px) {
    .chibi-reviews {
        height: 120px;
        top: -80px;
        left: 50%;
        transform: translateX(-50%); /* По центру на телефоне */
    }
}


/* --- ОБНОВЛЕННЫЙ БЛОК ТОВАРОВ (Вставь это в style_anime.css) --- */

.products-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; max-width: 1300px; margin: 0 auto 100px; padding: 0 20px;
}

.product-card { 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; /* Важно, чтобы углы не вылезали */
}

/* КОНТЕЙНЕР КАРТИНКИ (ТЕМНАЯ ВКЛАДКА) */
.product-image {
    background: #000; /* Чисто черный фон */
    border-bottom: 2px solid #fff; /* РАЗДЕЛИТЕЛЬНАЯ ЛИНИЯ */
    /* Растягиваем блок на всю ширину, компенсируя padding родителя */
    margin: -15px -15px 15px -15px; 
    height: 220px; /* Фиксированная высота "окна" */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

/* САМА КАРТИНКА (СВЕЧЕНИЕ) */
.prod-glow {
    max-width: 85%; /* Чуть меньше контейнера */
    max-height: 85%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px #9d4edd); /* Неон */
    transition: 0.3s;
    border: none !important; 
    background: none !important;
}

/* Эффект при наведении */
.product-card:hover .prod-glow {
    transform: scale(1.1) rotate(2deg);
    filter: drop-shadow(0 0 20px #9d4edd);
}

.product-info h3 { margin: 0 0 10px; font-size: 1.6rem; }
.product-info .price { color: var(--accent); font-size: 1.8rem; font-weight: bold; text-shadow: 0 0 10px var(--accent); }

.buy-btn {
    display: block; background: #000; color: #fff; text-decoration: none;
    padding: 10px; margin-top: 15px; border: 2px solid #fff;
    text-align: center; font-family: 'Balsamiq Sans', cursive; transition: 0.2s;
}
.buy-btn:hover { background: #fff; color: #000; }



/* 7. ИНФО БЛОКИ */

.info-content-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-bottom: 80px; }

.benefit-card { padding: 30px; text-align: center; }

.benefit-icon { font-size: 3rem; display: block; margin-bottom: 15px; filter: drop-shadow(0 0 10px var(--accent)); }

.benefit-title { font-size: 1.5rem; margin-bottom: 10px; }



.faq-section { margin-bottom: 100px; }

.faq-item { margin-bottom: 20px; }

.faq-question { padding: 25px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 1.3rem; }

.faq-answer { max-height: 0; overflow: hidden; transition: 0.3s; padding: 0 25px; color: #ccc; border-top: 1px dashed #333; }



.terms-section { padding: 50px; margin-bottom: 100px; background: #151518; position: relative; }

.terms-grid { display: grid; gap: 20px; }

.term-card { padding: 20px; background: rgba(0,0,0,0.4); border-left: 4px solid var(--accent); }

.chibi-sleepy { position: absolute; bottom: -30px; right: -20px; height: 160px; filter: drop-shadow(0 0 10px #000); z-index: 10; }



/* 8. ФУТЕР */

footer { 

    text-align: center; padding: 60px 20px; background: #050505; 

    border-top: 4px solid var(--accent);

    margin-top: auto; /* ВАЖНО для прижатия к низу */

}

.footer-btn-group { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }

.btn-footer {

    width: 220px; padding: 15px; text-decoration: none; color: #fff;

    font-family: 'Balsamiq Sans', cursive; font-size: 1.3rem;

    display: flex; justify-content: center; align-items: center;

    box-shadow: 0 0 15px rgba(0,0,0,0.5);

}

.btn-discord { background: #5865F2; border-color: #5865F2; }

.btn-discord:hover { box-shadow: 0 0 20px #5865F2; }

.btn-funpay { background: #00f2ff; border-color: #00f2ff; color: #000; }

.btn-funpay:hover { box-shadow: 0 0 20px #00f2ff; }



/* АДАПТИВ ДЛЯ ГЛАВНОЙ */

@media (max-width: 900px) {

    .anime-header { flex-direction: column; height: auto; padding: 20px 0; gap: 20px; }

    .nav-center { flex-direction: column; gap: 10px; }

    .hero-slogan { font-size: 2.8rem; }

}



/* ================================================================= */

/* --- НОВЫЙ БЛОК: СТИЛИ ДЛЯ СТРАНИЦЫ ТОВАРА (РАСТЯНУТЫЙ) --- */

/* ================================================================= */



/* Контейнер для товара: МАКСИМАЛЬНАЯ ШИРИНА */

.product-page-container {

    flex: 1; /* Растягивается вертикально */

    width: 95%; /* Почти во всю ширину */

    max-width: 1700px; /* Ограничение только на ультра-мониторах */

    margin: 0 auto;

    padding: 60px 20px;

}



/* Кнопка НАЗАД (Стиль: Черная с рамкой, неон при наведении) */

.back-btn {

    display: inline-block;

    background: #000; color: #fff;

    border: 3px solid #fff;

    padding: 10px 30px;

    font-family: 'Balsamiq Sans', cursive;

    font-size: 1.3rem;

    text-decoration: none;

    margin-bottom: 20px;

    box-shadow: 0 0 10px rgba(157, 78, 221, 0.3);

    transition: 0.2s;

    text-transform: uppercase;

}

.back-btn:hover {

    background: var(--accent); color: #000;

    box-shadow: 0 0 20px var(--accent);

    transform: translate(-3px, -3px);

}



/* Огромный блок товара */

.manga-block-product {

    background: #1a1a1d;

    border: 3px solid #fff;

    box-shadow: 8px 8px 0 #000;

    padding: 60px; /* Большие внутренние отступы */

    position: relative;

    width: 100%;

    box-sizing: border-box; /* Чтобы padding не ломал ширину */

}



.product-detail-wrapper {

    display: flex;

    gap: 80px; /* Большое расстояние между картинкой и текстом */

    align-items: flex-start;

}



/* ЛЕВАЯ КОЛОНКА (Картинка) */

.prod-left {

    flex: 1;

    min-width: 400px;

}

.prod-img-container {

    width: 100%;

    height: 600px; /* Высокая картинка */

    background: #050505;

    border: 3px solid var(--accent);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);

}

.prod-main-img {

    max-width: 90%;

    max-height: 90%;

    object-fit: contain;

    /* ФИОЛЕТОВОЕ СВЕЧЕНИЕ ЛОГОТИПА */

    filter: drop-shadow(0 0 25px var(--accent));

    transition: transform 0.3s;

}

.prod-main-img:hover { transform: scale(1.05); }



/* ПРАВАЯ КОЛОНКА (Инфо) */

.prod-right {

    flex: 1; /* Равномерное распределение */

    display: flex;

    flex-direction: column;

}

.prod-title {

    font-family: 'Balsamiq Sans', cursive;

    font-size: 4rem; /* Очень крупный заголовок */

    line-height: 1.1;

    margin: 0 0 20px 0;

    color: #fff;

    text-shadow: 0 0 15px var(--accent);

}

.prod-price {

    font-family: 'Permanent Marker', cursive;

    font-size: 3.5rem;

    color: var(--accent);

    margin-bottom: 40px;

    text-shadow: 0 0 15px var(--accent);

}

.prod-desc {

    font-size: 1.3rem;

    line-height: 1.6;

    color: #ddd;

    margin-bottom: 40px;

    background: rgba(255,255,255,0.05);

    padding: 25px;

    border-left: 5px solid var(--accent);

}



/* ПРОМОКОД */

.promo-container {

    margin-top: auto; 

    margin-bottom: 25px;

}

.promo-title {

    font-family: 'Balsamiq Sans', cursive;

    font-size: 1.2rem;

    color: #aaa;

    margin-bottom: 10px;

}

.promo-flex {

    display: flex;

    gap: 15px;

    height: 55px; /* Фиксированная высота для ровности */

}

.promo-input {

    flex: 2; /* Поле ввода широкое */

    background: #000;

    border: 2px solid #fff;

    padding: 0 20px;

    color: #fff;

    font-family: 'Neucha', cursive;

    font-size: 1.4rem;

    outline: none;

    box-shadow: 0 0 10px rgba(157, 78, 221, 0.2);

    box-sizing: border-box; /* Чтобы не вылезало */

}

.promo-input:focus { border-color: var(--accent); }



.promo-btn {

    flex: 1; /* Кнопка поменьше */

    background: #222;

    color: #fff;

    border: 2px solid var(--accent);

    font-family: 'Balsamiq Sans', cursive;

    font-size: 1.2rem;

    cursor: pointer;

    box-shadow: 0 0 10px rgba(157, 78, 221, 0.2);

    transition: 0.2s;

    box-sizing: border-box;

}

.promo-btn:hover {

    background: var(--accent); color: #000;

    box-shadow: 0 0 20px var(--accent);

}



/* КНОПКА КУПИТЬ */

.buy-btn-large {

    display: block;

    width: 100%;

    padding: 25px;

    font-size: 2.2rem;

    text-align: center;

    background: var(--accent);

    color: #000;

    font-family: 'Balsamiq Sans', cursive;

    border: 3px solid #fff;

    text-decoration: none;

    box-shadow: 0 0 30px var(--accent); /* Сильное свечение */

    transition: 0.2s;

    text-transform: uppercase;

    box-sizing: border-box; /* Чтобы не вылезало */

}

.buy-btn-large:hover {

    background: #fff; color: #000;

    transform: scale(1.01);

    box-shadow: 0 0 50px #fff;

}



/* АДАПТИВ СТРАНИЦЫ ТОВАРА */

@media (max-width: 1100px) {

    .product-detail-wrapper { flex-direction: column; gap: 40px; }

    .prod-img-container { height: 400px; }

    .manga-block-product { padding: 30px; }

    .prod-title { font-size: 3rem; }

}
/* --- ДОПОЛНЕНИЯ ДЛЯ INDEX.HTML (В КОНЕЦ ФАЙЛА) --- */

/* 1. Делаем секцию базой для позиционирования */
.stats-section {
    position: relative; 
}

/* 2. Настройка Revi (большая, на полоске) */
.chibi-reviews {
    position: absolute;
    left: 57%;          /* Сдвиг слева */
    top: -170px;        /* Поднимаем вверх (отрицательный отступ) */
    height: 180px;      /* УВЕЛИЧИЛ РАЗМЕР */
    width: auto;
    z-index: 10;
    filter: drop-shadow(0 0 15px #9d4edd); /* Свечение */
    pointer-events: none;
}

/* 3. Свечение товаров на главной */
.prod-glow {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    /* Фиолетовое свечение */
    filter: drop-shadow(0 0 10px #9d4edd); 
    transition: 0.3s;
}

/* При наведении светится сильнее */
.product-card:hover .prod-glow {
    transform: scale(1.05);
    filter: drop-shadow(0 0 20px #9d4edd);
}

/* На телефонах прячем Revi или уменьшаем */
@media (max-width: 768px) {
    .chibi-reviews {
        height: 100px;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* --- ВСТАВИТЬ В САМЫЙ КОНЕЦ style_anime.css --- */

/* Свечение логотипов на главной */
.prod-glow {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Логотип будет виден целиком, не обрежется */
    
    /* ФИОЛЕТОВЫЙ НЕОН (Базовое состояние) */
    filter: drop-shadow(0 0 5px #9d4edd); 
    transition: all 0.3s ease;
}

/* Эффект при наведении на карточку */
.product-card:hover .prod-glow {
    transform: scale(1.1) rotate(2deg); /* Чуть увеличивается и поворачивается */
    filter: drop-shadow(0 0 20px #9d4edd); /* Свечение становится очень мощным */
}

/* Убираем черную рамку у картинки, если она мешает свечению */
.product-image img {
    border: none !important; /* Убираем жесткую рамку */
    background: transparent !important; /* Убираем фон, если он есть */
}