/* ============================================================
   ОБЩИЙ НЕОНОВЫЙ БАЗИС hibanura
   Используется главной (hibanura.ru) и live (live.hibanura.ru).
   Странично-специфичные стили — в Main/css/style.css и live/assets/style.css.

   Общие цветовые паттерны вынесены в :root — палитра в одном месте.
   Оранжевый цвет (выделение live) сознательно оставлен в live/style.css.
   ============================================================ */

:root {
    /* Основные цвета */
    --neon-text: #e9d5ff;
    --neon-fuchsia: #f0abfc;
    --neon-purple: #c084fc;
    --neon-purple-muted: #a78bfa;
    --neon-purple-deep: #8b5cf6;
    --neon-violet: #a855f7;
    --neon-violet-deep: #7c3aed;
    --neon-error: #f87171;

    /* Фон-градиент */
    --neon-bg-a: #2a0a4a;
    --neon-bg-b: #0d0016;
    --neon-bg-c: #040008;

    /* Рамки */
    --neon-border-soft: rgba(168, 85, 247, 0.3);
    --neon-border-input: rgba(168, 85, 247, 0.35);
    --neon-border: rgba(168, 85, 247, 0.45);
    --neon-border-mid: rgba(168, 85, 247, 0.5);
    --neon-border-scroll: rgba(168, 85, 247, 0.6);
    --neon-border-hover: rgba(168, 85, 247, 0.8);

    /* Свечения / тени */
    --neon-glow: rgba(124, 58, 237, 0.25);
    --neon-glow-mid: rgba(124, 58, 237, 0.35);
    --neon-glow-strong: rgba(124, 58, 237, 0.5);
    --neon-glow-purple-soft: rgba(192, 132, 252, 0.6);
    --neon-glow-purple: rgba(192, 132, 252, 0.7);
    --neon-glow-purple-strong: rgba(192, 132, 252, 0.8);
    --neon-glow-fuchsia: rgba(240, 171, 252, 0.8);
    --neon-glow-deep: rgba(139, 92, 246, 0.6);
    --neon-glow-error: rgba(248, 113, 113, 0.6);

    /* Фоны элементов */
    --neon-bg-panel: rgba(45, 12, 80, 0.45);
    --neon-bg-panel-soft: rgba(45, 12, 80, 0.25);
    --neon-bg-item: rgba(59, 20, 110, 0.35);
    --neon-bg-item-strong: rgba(59, 20, 110, 0.5);
    --neon-bg-track: rgba(59, 20, 110, 0.3);
    --neon-bg-hover: rgba(88, 28, 160, 0.45);
    --neon-bg-hover-strong: rgba(88, 28, 160, 0.6);
    --neon-bg-overlay: rgba(4, 0, 8, 0.7);
    --neon-bg-dialog-1: rgba(13, 0, 22, 0.85);
    --neon-bg-dialog-2: rgba(13, 0, 22, 0.4);
    --neon-bg-dialog-0: rgba(13, 0, 22, 0);
}

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

/* Базовая типографика: 1rem = 16px по умолчанию, всё ниже в rem/vw */
html {
    font-size: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle at 20% 20%, var(--neon-bg-a) 0%, var(--neon-bg-b) 45%, var(--neon-bg-c) 100%);
    color: var(--neon-text);
    padding: clamp(12px, 4vw, 20px);
    overflow-x: hidden;
    position: relative;
}

/* неоновые свечения на фоне */
.neon-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(600px 600px at 85% 15%, rgba(168, 85, 247, 0.18), transparent 60%),
        radial-gradient(500px 500px at 10% 90%, rgba(124, 58, 237, 0.22), transparent 60%),
        radial-gradient(700px 700px at 50% 50%, rgba(192, 132, 252, 0.08), transparent 60%);
    z-index: 0;
}

/* Стеклянная кнопка/ссылка в неоновом стиле (кнопки стримов, ссылки сервисов) */
.neon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: clamp(10px, 3vw, 16px) clamp(12px, 4vw, 20px);
    background: var(--neon-bg-item);
    border: 1px solid var(--neon-border);
    border-radius: 14px;
    color: var(--neon-text);
    text-decoration: none;
    font-family: inherit;
    font-size: clamp(0.85rem, 3.6vw, 1.15rem);
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 0 12px var(--neon-glow);
    transition: all 0.2s ease;
}

.neon-btn:hover,
.neon-btn:focus-visible {
    border-color: var(--neon-fuchsia);
    box-shadow:
        0 0 18px var(--neon-border-hover),
        0 0 40px var(--neon-glow-strong);
    transform: translateY(-2px);
    background: var(--neon-bg-hover);
    outline: none;
}

.neon-btn.active {
    border-color: var(--neon-fuchsia);
    background: var(--neon-bg-hover-strong);
    box-shadow:
        inset 0 0 15px var(--neon-glow-strong),
        0 0 18px var(--neon-border-hover);
}

/* Заголовок и подзаголовок страницы (главная, live) */
.title {
    font-size: clamp(1.4rem, 9.5vw, 3rem);
    font-weight: 700;
    letter-spacing: clamp(2px, 1.5vw, 4px);
    color: var(--neon-purple);
    text-shadow:
        0 0 10px rgba(192, 132, 252, 0.9),
        0 0 30px rgba(168, 85, 247, 0.6),
        0 0 60px rgba(124, 58, 237, 0.4);
}

.title span {
    color: var(--neon-fuchsia);
}

.subtitle {
    margin: clamp(4px, 1vw, 6px) 0 clamp(18px, 6vw, 30px);
    font-size: clamp(0.65rem, 2.8vw, 1rem);
    letter-spacing: clamp(3px, 2.4vw, 8px);
    text-transform: uppercase;
    color: var(--neon-purple-muted);
    text-shadow: 0 0 8px rgba(139, 92, 246, 0.7);
}