@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');

/* ============================================
   ТЕМА HELLUVA BOSS (hb.voxinferna.com)
   Все правила действуют только при html[data-site="hb"] (ставит site.js),
   на основном сайте файл ничего не меняет.

   Язык темы — мультяшная «тушь» шоу:
     • цвета: чёрный, красный Блитцо, жёлтый (глаза импов), костяной белый;
     • заголовки — плакатный Dela Gothic One, жёлтые с жёсткой чёрной тенью;
     • кнопки — «наклейки» с чёрной обводкой и сдвинутой тенью;
     • разделители — полоски, как на рогах Блитцо.
   ============================================ */

html[data-site="hb"] {
    --hb-ink: #000000;
    --hb-red: #e0202f;
    --hb-red-deep: #6e0a14;
    --hb-yellow: #ffc83d;
    --hb-yellow-soft: #ffe2a0;
    --hb-bone: #f6ede2;
    --hb-violet: #6b4aa8;
    --hb-ink-shadow: 3px 3px 0 #000;

    /* Переменные основного сайта → палитра Helluva Boss */
    --color-dark-red: #2a060c;
    --color-blood-red: #8f0f1c;
    --color-bright-red: #e0202f;
    --color-pink: #ffc83d;
    --color-light-pink: #ffe2a0;
    --color-cream: #f6ede2;
    --color-dark: #0e0608;
    --color-dark-gray: #1c0c0f;
    --color-medium-gray: #3a1b20;
    --color-light-gray: #a4908b;
    --gradient-primary: linear-gradient(135deg, #b5101f 0%, #e0202f 100%);
    --gradient-pink: linear-gradient(135deg, #ffc83d 0%, #ffe08a 100%);
    --gradient-dark: linear-gradient(180deg, #0e0608 0%, #2a060c 100%);
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-glow-red: 0 0 18px rgba(224, 32, 47, 0.45);
    --shadow-glow-pink: 0 0 16px rgba(255, 200, 61, 0.35);
}

html[data-site="hb"] ::selection { background: var(--hb-yellow); color: #000; }
html[data-site="hb"] :focus-visible { outline: 3px solid var(--hb-yellow); outline-offset: 2px; }

/* ---------- Заголовки: жёлтая «тушь» ---------- */
html[data-site="hb"] :is(
    .section-title, .title-line-2, .logo-text,
    .casting-hero h1, .team-hero h1, .progress-hero h1, .join-banner h2,
    .season-title, .block-title, .form-title, .role-label,
    .login-title, .register-title, .video-title, .comments-section h2,
    .profile-info h1, .user-info h1, .section-box h3,
    .error-code, .error-title, .header h1, .stat-card .number
) {
    font-family: 'Dela Gothic One', 'Rubik', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--hb-yellow);
    filter: none;
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
html[data-site="hb"] .logo-text { font-size: 1.2rem; text-shadow: 2px 2px 0 #000; }
html[data-site="hb"] .title-line-1 { color: var(--hb-bone); }
html[data-site="hb"] .title-line-2 { font-size: 1.05em; line-height: 1.15; }
html[data-site="hb"] .error-code { text-shadow: 6px 6px 0 #000; animation: none; }
html[data-site="hb"] .stat-card .number { text-shadow: 2px 2px 0 #000; }
html[data-site="hb"] .episode-num { font-family: 'Dela Gothic One', 'Rubik', sans-serif; color: var(--hb-yellow); }

/* Группы на странице «Команда» — плашки-наклейки */
html[data-site="hb"] .role-label {
    font-size: 1rem;
    background: var(--hb-red-deep);
    border: 2px solid #000;
    border-radius: 8px;
    box-shadow: var(--hb-ink-shadow);
}

/* Разделитель под заголовками — полоски, как на рогах Блитцо */
html[data-site="hb"] .title-underline,
html[data-site="hb"] .divider {
    width: 120px;
    height: 10px;
    border: 2px solid var(--hb-bone);
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--hb-bone) 0 12px, #000 12px 24px);
    box-shadow: var(--hb-ink-shadow);
}

/* ---------- Кнопки-наклейки ---------- */
html[data-site="hb"] :is(
    .btn-primary, .btn-login, .btn-admin, .btn-submit, .btn-join, .back-button,
    .btn-comment, .btn-send-reply, .bot-req-btn:not(.secondary), .mobile-cta,
    .filter-btn.active, .profile-container .btn:not(.btn-outline), .admin-container .btn
) {
    background: var(--hb-red);
    color: #fff;
    border: 2px solid #000;
    box-shadow: var(--hb-ink-shadow);
    text-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
html[data-site="hb"] :is(
    .btn-primary, .btn-login, .btn-admin, .btn-submit, .btn-join, .back-button,
    .btn-comment, .btn-send-reply, .bot-req-btn:not(.secondary), .filter-btn.active,
    .profile-container .btn:not(.btn-outline)
):hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #000;
}
html[data-site="hb"] :is(
    .btn-primary, .btn-login, .btn-submit, .btn-join, .back-button, .btn-comment,
    .btn-send-reply, .bot-req-btn:not(.secondary), .filter-btn.active, .mobile-cta
):active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #000;
}
html[data-site="hb"] .mobile-cta { box-shadow: 4px 4px 0 #000; }

/* Второстепенные кнопки — жёлтый контур */
html[data-site="hb"] :is(.btn-secondary, .filter-btn:not(.active), .bot-req-btn.secondary, .btn-outline, .like-btn) {
    background: transparent;
    color: var(--hb-yellow);
    border: 2px solid var(--hb-yellow);
    box-shadow: none;
}
html[data-site="hb"] :is(.btn-secondary, .filter-btn:not(.active), .bot-req-btn.secondary, .btn-outline, .like-btn):hover {
    background: rgba(255, 200, 61, 0.1);
    box-shadow: none;
}
html[data-site="hb"] .like-btn.liked { background: rgba(255, 200, 61, 0.18); box-shadow: none; }

/* ---------- Шапка, фон, акценты ---------- */
html[data-site="hb"] .main-nav { border-bottom: 3px solid #000; box-shadow: 0 2px 0 var(--hb-red-deep); }

html[data-site="hb"] .hero-bg-animation::before {
    background:
        radial-gradient(circle at 18% 55%, rgba(224, 32, 47, 0.18) 0%, transparent 50%),
        radial-gradient(circle at 82% 75%, rgba(255, 200, 61, 0.10) 0%, transparent 45%);
}
/* Комиксный растр в первом экране */
html[data-site="hb"] .hero-bg-animation::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 200, 61, 0.09) 1.2px, transparent 1.4px);
    background-size: 9px 9px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
    pointer-events: none;
}

/* Персонажи — с чёрной «контурной» тенью, как в шоу */
html[data-site="hb"] .character-img { filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.55)); }

/* Цифры студии и карточки */
html[data-site="hb"] .stat-item { border: 2px solid #000; box-shadow: var(--hb-ink-shadow); background: var(--hb-red-deep); }
html[data-site="hb"] .stat-number { background: none; -webkit-text-fill-color: var(--hb-yellow); color: var(--hb-yellow); text-shadow: 2px 2px 0 #000; }

/* ---------- Страницы со своими цветами ---------- */
html[data-site="hb"] :is(.loading, .login-prompt a, .comment-user, .comment-quote-author, .reply-preview strong,
    .login-footer a, .register-footer a, .taken, .info-notice a, .ban-info h3, .episode-watch) {
    color: var(--hb-yellow);
}
html[data-site="hb"] :is(.video-meta, .login-prompt, .comment-quote, .btn-reply, .btn-load-replies,
    .btn-hide-replies, .form-group label, .info-notice) {
    color: var(--hb-yellow-soft);
}
html[data-site="hb"] .avatar { border-color: var(--hb-yellow); }
html[data-site="hb"] :is(input, textarea, select):focus { border-color: var(--hb-yellow) !important; box-shadow: 0 0 0 3px rgba(255, 200, 61, 0.2); }
html[data-site="hb"] .episode-watch { border-color: rgba(255, 200, 61, 0.4); }
html[data-site="hb"] .episode-watch:hover,
html[data-site="hb"] .social-link:hover { background: rgba(255, 200, 61, 0.1); box-shadow: none; }

/* Админка: активная вкладка */
html[data-site="hb"] .tab.active { background: var(--hb-red); border-color: #000; box-shadow: var(--hb-ink-shadow); }

/* Рамки и полоса прогресса на «Прогрессе» */
html[data-site="hb"] .progress-fill, html[data-site="hb"] .season-progress-fill {
    background: repeating-linear-gradient(-45deg, var(--hb-yellow) 0 10px, #e3a91f 10px 20px);
}

@media (prefers-reduced-motion: reduce) {
    html[data-site="hb"] * { transition: none !important; }
}

/* Луна в блоке «О студии» — по высоте как Кармилла на основном сайте (фигура ~540 px) */
html[data-site="hb"] .about-visual .character-img {
    max-height: 540px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Плеер: акцент жёлтый */
html[data-site="hb"] .vp { --vp-pink: #ffc83d; --vp-crimson: #e0202f; }

/* Кастинг: переключатель «Актёры / Команда» */
html[data-site="hb"] .cast-switch { border: 2px solid #000; box-shadow: var(--hb-ink-shadow); }
html[data-site="hb"] .cast-switch button.active { background: var(--hb-red); box-shadow: none; text-shadow: none; }