/* ============================================================
   Хеллоуин. Включается в админке («Хеллоуин» на главной панели),
   подключается из head.tpl обеих тем.

   Всё завязано на класс .hw у <html>: его ставит скрипт в head.tpl,
   если человек не выключил украшения кнопкой-тыквой. Без класса
   остаётся только сама кнопка.
   ============================================================ */

/* ---------- цвета: фиолетовый акцент меняем на тыквенный ---------- */
html.hw {
    --accent: #ff7a1a;
    --a-href-color: #ffa45c;
    --a-href-color-hover: #ff7a1a;
    --svg-color: #ff7a1a;
    --close-modal-text: #ff7a1a;
    --close-modal-hover: #ff7a1a9c;
    --modal-palette-place: #ff7a1a;
    --modal-palette-text-select: #ff7a1a;
    --btn-wallet-color: #ff7a1a;
    --btn-wallet-color-hover: #e5620b;
    --dropbtn-new-bg-hover: #ff7a1a9c;
    --card-user-header-icon: #ff7a1a;
    --card-social-info-hover: #ff7a1a9c;
    --card-social-info-active: #ff7a1a9c;
    --btn-server-play-hover: #ff7a1a9c;
    --btn-server-copy-hover: #ff7a1a9c;
    --card-social-content: #ff7a1a9c;
    --btn-topdonator-message: #ff7a1a9c;
    --btn-topdonator-message-hover: #ff7a1a;
    --topdonator-values-sum: #ff7a1a9c;
    --card-cssborkabanner-features-hover: #ff7a1a9c;
    --btn-perehod-tops: #ff7a1a9c;
    --btn-perehod-tops-hover: #ff7a1a;
    --btn-perehod-tops-active: #ff7a1a;
    --message-input-border: 1px solid #ff7a1a;
    --card-unikplugins-btn-hover: #ff7a1a9c;
    --card-unikplugins-ribbon: #ff7a1a;
    --btn-chat-send: #ff7a1a;
    --btn-chat-send-hover: #e5620b;
    --btn-changetheme: #ff7a1a;
    --btn-changetheme-hover: #e5620b;
    --dropbtn-new-active: #ff7a1a9c;
    --dropdown-linkk-hover: #ff7a1a9c;
    --miniprofile-dropdown-btn: #ff7a1a;
    --miniprofile-dropdown-btn-hover: #ff7a1a9a;
    --btn-all-default: #ff7a1a;
    --btn-all-default-hover: #e5620b;
    --number_max: #ff7a1a9c;
    --visit_users_online-hover: #ff7a1a9c;
}

html.hw .hr-row { --hr-accent-2: #8bff5a; }

/* Ночное небо: еле заметное багровое зарево сверху и зелёное снизу */
html.hw body {
    background-image:
        radial-gradient(1200px 500px at 70% -10%, rgba(255, 90, 20, .07), transparent 70%),
        radial-gradient(900px 400px at 10% 110%, rgba(110, 255, 80, .05), transparent 70%);
    background-attachment: fixed;
}

/* ---------- карточки режимов: ядовитое свечение при наведении ---------- */
html.hw .mode {
    transition: box-shadow 220ms ease, border-color 220ms ease;
}

html.hw .mode:hover {
    border-color: rgba(139, 255, 90, .55);
    box-shadow: 0 0 0 1px rgba(139, 255, 90, .25), 0 0 26px rgba(139, 255, 90, .22);
}

/* Тыква на кнопке «Играть» */
html.hw .mode__play::before {
    content: '';
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background: url(../img/halloween/pumpkin.svg) center / contain no-repeat;
    flex-shrink: 0;
}

/* ---------- шапка: меню, левая рельса, мини-профиль ----------
   В top.css и mini-profile.css фиолетовый вписан числом
   rgba(95, 101, 220, …), а не через --accent, — перекрашиваем руками */
html.hw .gl-menu__col-icon {
    border-color: rgba(255, 122, 26, .25);
    background: rgba(255, 122, 26, .12);
    color: #ffa45c;
}

html.hw .gl-menu__col-link:hover { background: rgba(255, 122, 26, .10); }

html.hw .gl-menu__col-link:hover .gl-menu__col-icon {
    box-shadow: 0 0 14px rgba(255, 122, 26, .45);
}

html.hw .h-menu.is-open {
    background: rgba(255, 122, 26, .16);
    border-color: rgba(255, 122, 26, .5);
    color: #ffa45c;
}

html.hw .left-menu-item.active { background: rgba(255, 122, 26, .16); }

html.hw .mp-wallet {
    border-color: rgba(255, 122, 26, .38);
    background: linear-gradient(135deg, rgba(255, 122, 26, .28), rgba(255, 122, 26, .07));
}

html.hw .mp-wallet:hover { border-color: rgba(255, 122, 26, .7); }

/* ---------- хеллоуинский логотип вместо синего ----------
   Подмена через content, а не через src в шаблоне: так логотип
   слушается той же кнопки-тыквы, что и остальные украшения */
html.hw .lm-logo img {
    content: url(../img/halloween/logo.webp);
}

html.hw .lm-logo:hover {
    background: rgba(255, 122, 26, .12);
    border-color: rgba(255, 122, 26, .4);
}

/* ---------- паутина по углам ---------- */
.hw-web {
    display: none;
    position: fixed;
    top: 0;
    width: 170px;
    height: 170px;
    background: url(../img/halloween/web.svg) 0 0 / contain no-repeat;
    pointer-events: none;
    /* Выше панели чата (.rc, 1101): правый угол приходится на её шапку */
    z-index: 1102;
    opacity: .45;
}

html.hw .hw-web { display: block; }

/* Левый угол — сразу за рельсом меню, иначе паутину закроет логотип */
.hw-web--left { left: 80px; }
.hw-web--right { right: 0; transform: scaleX(-1); }

/* ---------- паук на нитке ---------- */
.hw-spider {
    display: none;
    position: fixed;
    top: 0;
    left: 46%;
    z-index: 1102;
    width: 30px;
    transform-origin: 50% 0;
    animation: hw-swing 4.5s ease-in-out infinite;
}

html.hw .hw-spider { display: block; }

.hw-spider__thread {
    width: 1px;
    height: var(--hw-drop, 130px);
    margin: 0 auto;
    background: linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .55));
    transition: height 700ms cubic-bezier(.5, 0, .3, 1);
}

.hw-spider__body {
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -2px;
    cursor: pointer;
    /* Без подсветки тёмный паук теряется на тёмном фоне */
    filter: drop-shadow(0 0 3px rgba(255, 140, 60, .45));
}

/* Навёл — убежал наверх, через пару секунд спустится обратно */
.hw-spider.is-up .hw-spider__thread {
    height: 4px;
    transition-duration: 350ms;
}

@keyframes hw-swing {
    0%, 100% { transform: rotate(4deg); }
    50% { transform: rotate(-4deg); }
}

/* ---------- летучие мыши ---------- */
.hw-bat {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1102;
    width: 64px;
    height: 32px;
    pointer-events: none;
    will-change: transform;
}

/* Силуэт подсвечен, как луной: чёрная мышь на тёмном фоне не видна */
.hw-bat svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 5px rgba(255, 140, 60, .65));
}

.hw-bat__wing {
    transform-box: fill-box;
    animation: hw-flap 180ms ease-in-out infinite alternate;
}

.hw-bat__wing--l { transform-origin: 100% 40%; }
.hw-bat__wing--r { transform-origin: 0 40%; }

@keyframes hw-flap {
    from { transform: scaleY(1); }
    to { transform: scaleY(-.6); }
}

/* ---------- туман у нижнего края ---------- */
.hw-fog {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    z-index: 3;
    pointer-events: none;
    background:
        radial-gradient(40% 70% at 20% 100%, rgba(170, 255, 140, .10), transparent 70%),
        radial-gradient(35% 60% at 60% 100%, rgba(200, 200, 230, .10), transparent 70%),
        radial-gradient(30% 80% at 90% 100%, rgba(170, 255, 140, .08), transparent 70%);
    background-size: 200% 100%;
    animation: hw-fog 40s linear infinite alternate;
}

html.hw .hw-fog { display: block; }

@keyframes hw-fog {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

/* ---------- кнопка-тыква: включить и выключить украшения ---------- */
.hw-toggle {
    position: fixed;
    left: 96px;
    bottom: 16px;
    z-index: 1002;
    width: 42px;
    height: 42px;
    padding: 6px;
    border: 1px solid rgba(255, 122, 26, .35);
    border-radius: 50%;
    background: #15110f url(../img/halloween/pumpkin.svg) center / 28px no-repeat;
    cursor: pointer;
    transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.hw-toggle:hover { transform: scale(1.08) rotate(-8deg); }

/* Украшения выключены — тыква погасла, но осталась, чтобы вернуть */
html:not(.hw) .hw-toggle {
    filter: grayscale(1);
    opacity: .45;
}

@media (max-width: 900px) {
    .hw-web { width: 110px; height: 110px; }
    .hw-web--left { left: 0; }
    .hw-fog { height: 80px; }
    /* Наведения на телефоне нет, а нажатие по пауку съело бы нажатие
       по кнопке под ним */
    .hw-spider { pointer-events: none; }
    .hw-toggle { left: 12px; bottom: 76px; width: 38px; height: 38px; background-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .hw-spider, .hw-fog, .hw-bat__wing { animation: none; }
    .hw-bat { display: none; }
}