/* ================== ДЕМОНИЧЕСКИЙ РЕЖИМ ================== */
:root {
    --demo-red: #ff3a2f;
    --demo-red-deep: #7a1010;
    --demo-bg: #0b0000;
    --demo-text: #f6dcd0;
    --demo-link: #ff9b8a;
    --demo-link-hover: #ffd7c9;
}

@keyframes demonicPulse {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 25, 25, .25), inset 0 0 18px rgba(255, 30, 30, .08);
    }
    50% {
        box-shadow: 0 0 26px rgba(255, 45, 35, .6), inset 0 0 24px rgba(255, 40, 35, .16);
    }
}
@keyframes demonicFlicker {
    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(255, 60, 30, .4)) drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(255, 90, 45, .95)) drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
    }
}
@keyframes demonicAmbient {
    0%, 100% { opacity: .3; }
    50% { opacity: .7; }
}
@keyframes demonicEmbers {
    0%, 100% { background-position: 18% 90%, 72% 88%, 45% 94%; opacity: .45; }
    25% { background-position: 21% 82%, 70% 80%, 43% 85%; opacity: .85; }
    50% { background-position: 24% 92%, 68% 90%, 41% 92%; opacity: .4; }
    75% { background-position: 15% 86%, 75% 84%, 49% 87%; opacity: .8; }
}
@keyframes demonicGlowRing {
    0% { transform: scale(1); opacity: .8; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

body.demonic-mode {
    background: radial-gradient(120% 120% at 50% -10%, #220505 0%, #0d0000 45%, #040000 100%) fixed !important;
    background-color: var(--demo-bg) !important;
    color: var(--demo-text) !important;
}
body.demonic-mode * {
    scrollbar-color: #7a0a0a #140000;
}
body.demonic-mode ::selection {
    background: #a01414 !important;
    color: #ffffff !important;
}
body.demonic-mode:focus-visible {
    outline-color: #ff5a3d;
}
body.demonic-mode :focus-visible {
    outline: 2px solid #ff5a3d !important;
    outline-offset: 2px;
}

body.demonic-mode::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background:
        radial-gradient(ellipse at 50% -15%, rgba(255, 45, 35, .32), transparent 62%),
        radial-gradient(ellipse at 50% 115%, rgba(255, 25, 20, .2), transparent 55%) !important;
    animation: demonicAmbient 4.5s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 9997 !important;
}
body.demonic-mode::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background:
        radial-gradient(26px 26px at 18% 90%, rgba(255, 120, 60, .2), transparent 70%),
        radial-gradient(38px 38px at 72% 88%, rgba(255, 70, 30, .18), transparent 70%),
        radial-gradient(20px 20px at 45% 94%, rgba(255, 160, 80, .16), transparent 70%) !important;
    background-repeat: no-repeat !important;
    animation: demonicEmbers 7s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 9998 !important;
}

/* --- Заголовки: огненный градиент + мерцание --- */
body.demonic-mode h1,
body.demonic-mode h2,
body.demonic-mode h3,
body.demonic-mode h4,
body.demonic-mode h5,
body.demonic-mode h6 {
    color: #ffd9c7 !important;
    background: linear-gradient(180deg, #ffe6c7 0%, #ff8a4d 45%, #ff3a2f 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: demonicFlicker 3s ease-in-out infinite !important;
}

/* --- Ссылки --- */
body.demonic-mode a {
    color: var(--demo-link) !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
    transition: color .25s ease, filter .25s ease;
}
body.demonic-mode a:hover {
    color: var(--demo-link-hover) !important;
    filter: drop-shadow(0 0 10px rgba(255, 70, 40, .9));
    text-shadow: none;
}

/* --- Навигация и меню-ссылки --- */
body.demonic-mode .navbar,
body.demonic-mode .main-nav,
body.demonic-mode .nav-menu,
body.demonic-mode .menu-list a {
    background: linear-gradient(180deg, rgba(70, 6, 8, .8), rgba(28, 1, 3, .85)) !important;
}
body.demonic-mode .nav-links a,
body.demonic-mode .nav-menu a,
body.demonic-mode .main-nav a {
    background: rgba(38, 0, 6, .55) !important;
    transition: background .25s, box-shadow .25s;
}
body.demonic-mode .navbar:hover,
body.demonic-mode .main-nav:hover,
body.demonic-mode .nav-menu:hover,
body.demonic-mode .menu-list a:hover {
    background: linear-gradient(180deg, rgba(120, 10, 12, .92), rgba(60, 4, 6, .95)) !important;
    box-shadow: 0 0 22px rgba(255, 50, 35, .75) !important;
}
body.demonic-mode .nav-links a:hover,
body.demonic-mode .nav-menu a:hover,
body.demonic-mode .main-nav a:hover {
    background: rgba(120, 8, 12, .92) !important;
    box-shadow: 0 0 16px rgba(255, 46, 35, .8) !important;
}

/* --- Основные контейнеры: мягкое свечение без рамок --- */
body.demonic-mode header,
body.demonic-mode main,
body.demonic-mode section,
body.demonic-mode article,
body.demonic-mode aside,
body.demonic-mode footer,
body.demonic-mode .site-header,
body.demonic-mode .page-header,
body.demonic-mode .site-footer,
body.demonic-mode .footer-content,
body.demonic-mode .container,
body.demonic-mode .layout,
body.demonic-mode .content,
body.demonic-mode .wrap,
body.demonic-mode .wrapper,
body.demonic-mode .menu-container,
body.demonic-mode .cards,
body.demonic-mode .card,
body.demonic-mode .card-body,
body.demonic-mode .home-card,
body.demonic-mode .recipe-card,
body.demonic-mode .category-card,
body.demonic-mode .tip-card,
body.demonic-mode .info-card,
body.demonic-mode .diff-card,
body.demonic-mode .puzzle-card,
body.demonic-mode .grade-card,
body.demonic-mode .author-card,
body.demonic-mode .problem-box,
body.demonic-mode .solution-box,
body.demonic-mode .example-box,
body.demonic-mode .rule-card,
body.demonic-mode .sign-card,
body.demonic-mode .znk-card,
body.demonic-mode .emergency-card,
body.demonic-mode .fact-box,
body.demonic-mode .quote-box,
body.demonic-mode .support-card,
body.demonic-mode .support-wrap,
body.demonic-mode .sber-card,
body.demonic-mode .donate-card,
body.demonic-mode .card-block,
body.demonic-mode table {
    background-image: linear-gradient(160deg, rgba(48, 2, 4, .6), rgba(12, 0, 0, .8)) !important;
    box-shadow: 0 0 22px rgba(255, 25, 25, .25), inset 0 0 22px rgba(255, 30, 30, .1) !important;
    animation: demonicPulse 2.8s ease-in-out infinite !important;
}

/* --- Плавающие подсказки/панели --- */
body.demonic-mode .score-panel,
body.demonic-mode .card-number,
body.demonic-mode .card-number-wrap,
body.demonic-mode .card-label,
body.demonic-mode .sber-badge,
body.demonic-mode .copy-card-btn {
    background: linear-gradient(180deg, #3a0406, #1c0102) !important;
    box-shadow: 0 0 20px rgba(255, 35, 30, .5), inset 0 0 14px rgba(255, 30, 25, .18) !important;
}

/* --- Кнопки --- */
body.demonic-mode button,
body.demonic-mode .btn,
body.demonic-mode input[type="button"],
body.demonic-mode input[type="submit"],
body.demonic-mode input[type="reset"] {
    background: linear-gradient(180deg, #6a0d10, #2e0305) !important;
    color: #ffe6d6 !important;
    box-shadow: 0 0 14px rgba(255, 35, 30, .5) !important;
    transition: transform .2s ease, box-shadow .25s ease, background .25s !important;
}
body.demonic-mode button:hover,
body.demonic-mode .btn:hover,
body.demonic-mode input[type="button"]:hover,
body.demonic-mode input[type="submit"]:hover,
body.demonic-mode input[type="reset"]:hover {
    background: linear-gradient(180deg, #8a1013, #4a0708) !important;
    box-shadow: 0 0 28px rgba(255, 70, 45, .95) !important;
}

/* --- Поля ввода --- */
body.demonic-mode input[type="text"],
body.demonic-mode input[type="search"],
body.demonic-mode input[type="email"],
body.demonic-mode input[type="password"],
body.demonic-mode textarea,
body.demonic-mode select {
    background: #190104 !important;
    color: #ffe9e0 !important;
    box-shadow: inset 0 0 12px rgba(255, 30, 20, .18) !important;
}

/* --- Таблицы --- */
body.demonic-mode th,
body.demonic-mode td {
    background: rgba(22, 0, 0, .55) !important;
}

/* --- Изображения --- */
body.demonic-mode img {
    filter: drop-shadow(0 0 14px rgba(255, 45, 25, .35)) saturate(1.08);
}

/* --- Тонкие разделители --- */
body.demonic-mode hr {
    border-top: 2px solid rgba(160, 20, 18, .7) !important;
    box-shadow: 0 0 12px rgba(255, 35, 30, .5) !important;
}

/* ================== КНОПКА ПЕРЕКЛЮЧАТЕЛЯ ================== */
#demonicToggle {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 10000;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    font-family: inherit;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: radial-gradient(circle at 35% 28%, #8a1e16, #3a0506 60%, #1a0102);
    box-shadow: 0 0 18px rgba(255, 50, 35, .75), inset 0 0 12px rgba(255, 90, 50, .4);
    transition: transform .25s ease, box-shadow .25s ease;
}
#demonicToggle::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 90, 55, .55);
    animation: demonicGlowRing 2.4s ease-out infinite;
    pointer-events: none;
}
#demonicToggle:hover {
    transform: scale(1.12);
    box-shadow: 0 0 30px rgba(255, 80, 55, 1), inset 0 0 14px rgba(255, 100, 55, .5);
}
#demonicToggle.on {
    box-shadow: 0 0 26px rgba(255, 70, 40, .95), inset 0 0 14px rgba(255, 90, 50, .45);
}