/* ============================================================================
   Хеллоуин — сезонная тема поверх обычной.

   Всё под html.theme-halloween: класс ставит скрипт в <head> index.html, и
   только в окне дат (31 октября — 30 ноября по Москве). Вне окна файл ничего
   не делает.

   Замысел — ночь в самой игре, а не открытка: квадратная пиксельная луна,
   плоские облака, силуэт замка и кладбища блоками, тыквы, светящиеся «уровнями
   света», как фонарь в Minecraft. Свет в теме двух видов: холодный лунный сверху
   и тёплый от фонаря у курсора. Акцент сайта на сезон — цвет огня в тыкве.

   Рисует всё js/seasonal/halloween.js: пиксель-арт он кладёт в маленькие
   канвасы один раз (и при смене размера окна), браузер растягивает их без
   сглаживания. Каждый кадр работают только сдвиг слоёв при прокрутке и пятно
   фонаря — без перерисовки картинок.
   ========================================================================= */

html.theme-halloween {
    /* Ночь: холодная синева вместо тёплого чёрного обычной темы. */
    --hw-night: #080b17;
    --hw-sky: #0f1638;
    --hw-moon: #eef0f7;
    --hw-fire: #ff9d2e;
    --hw-fire-hi: #ffc061;
    --hw-ink: #1a0e02;

    --primary-color: var(--hw-fire);
    --accent-color: var(--hw-fire-hi);
    --hover-color: var(--hw-fire-hi);
    --c-red-neon: var(--hw-fire);
    --c-bg: var(--hw-night);
    --bg-dark: var(--hw-night);
    --bg-card: #10142a;
    --panel: #10142a;
    --panel-2: #171c36;
    --panel-3: #202743;
    --secondary-color: #202743;
    --border-color: #283052;
    --line: #283052;
    --text-secondary: #b3b9cd;
    --text-mute: #7b829e;
}

html.theme-halloween body {
    background-color: var(--hw-night);
}

/* Обычный фон — сетка и красное свечение. Ночью вместо них ровная темнота с
   отсветом неба сверху: звёзды и луна живут в сцене главной страницы. */
html.theme-halloween .grid-bg {
    background:
        radial-gradient(ellipse 80% 45% at 70% 0%, rgba(40, 56, 130, 0.22) 0%, transparent 100%),
        var(--hw-night);
    background-size: auto;
}

html.theme-halloween .navbar {
    background: #060813;
    border-bottom-color: #1c2240;
}

html.theme-halloween ::selection {
    background: rgba(255, 157, 46, 0.4);
    color: #fff;
}

/* --- Логотип горит, как свеча ------------------------------------------
   Свечение — отдельный слой ::after с той же надписью (в обычной теме он
   скрыт): анимируется только его прозрачность, это работа компоновщика,
   перерисовки текста нет. */

html.theme-halloween .logo-text-glitch {
    color: #ffe7bf;
    text-shadow: 3px 3px 0 #4a2500;
}

html.theme-halloween .logo-text-glitch::after {
    display: block;
    z-index: -1;
    color: transparent;
    text-shadow:
        0 0 10px rgba(255, 150, 40, 0.85),
        0 0 26px rgba(255, 110, 20, 0.45);
    animation: hw-candle 4.7s linear infinite;
}

@keyframes hw-candle {
    0%, 100% { opacity: 0.9; }
    8% { opacity: 0.7; }
    11% { opacity: 1; }
    30% { opacity: 0.82; }
    34% { opacity: 0.55; }
    37% { opacity: 0.95; }
    61% { opacity: 0.78; }
    66% { opacity: 1; }
    83% { opacity: 0.66; }
    87% { opacity: 0.9; }
}

/* --- Витрина ----------------------------------------------------------- */

/* Заголовок — золотом §6 с жёсткой тенью, как надпись в самой игре: тень в
   Minecraft — тот же цвет на четверть яркости, сдвинутый на пиксель шрифта. */
html.theme-halloween .hero-title {
    color: #ffaa00;
    text-shadow: 0.07em 0.07em 0 #3f2a00;
}

/* Подпись сезона. В разметке она есть всегда, видна только в теме. */
.hw-badge {
    display: none;
}

html.theme-halloween .hw-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    padding: 6px 12px 6px 10px;
    background: rgba(255, 157, 46, 0.1);
    color: var(--hw-fire-hi);
    font-size: var(--fs-note);
    font-weight: 600;
    /* Срезанные углы ступенькой в «пиксель», как у плашек в игровом меню. */
    clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
            100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
            4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}

html.theme-halloween .hw-badge::before {
    content: '';
    width: 18px;
    height: 16px;
    flex-shrink: 0;
    background: var(--hw-pumpkin-icon) center / 100% 100% no-repeat;
    image-rendering: pixelated;
}

/* Плитки витрины стоят прямо на сцене — чуть плотнее, чтобы силуэты под ними
   не просвечивали сквозь цифры. */
html.theme-halloween .host {
    background: rgba(23, 28, 54, 0.92);
}

/* --- Кнопки: огонь, на нём — тёмный текст ------------------------------
   Белый на оранжевом не читается, поэтому у залитых акцентом элементов текст
   тёмный. Свечение — только под курсором. */

html.theme-halloween .login-btn,
html.theme-halloween .nav-menu.overflow-hidden .nav-link.login-btn,
html.theme-halloween .login-btn:hover {
    color: var(--hw-ink) !important;
}

html.theme-halloween .btn-primary,
html.theme-halloween .btn-primary:hover,
html.theme-halloween .btn-buy,
html.theme-halloween .btn-sm.btn-primary,
html.theme-halloween .update-tag,
html.theme-halloween .step-number,
html.theme-halloween .mod-tab.active,
html.theme-halloween .mod-tab:hover,
html.theme-halloween .btn-danger:hover,
html.theme-halloween .btn-delete:hover,
html.theme-halloween .btn-sm.btn-danger:hover {
    color: var(--hw-ink);
}

html.theme-halloween .login-btn:hover,
html.theme-halloween .btn-primary:hover {
    box-shadow: 0 0 0 1px rgba(255, 192, 97, 0.6), 0 0 18px rgba(255, 140, 30, 0.45);
}

/* Красный, вписанный в styles.css числом, а не переменной, на ночной синеве
   смотрится чужим. Перекрашены места, которые видит каждый: выбранная арена
   и категория, кнопка реплея, плашка улучшения ранга. Админка остаётся как есть. */
html.theme-halloween .fb-cat.on,
html.theme-halloween .fb-arena.on,
html.theme-halloween .watch-replay-btn:hover {
    background: rgba(255, 157, 46, 0.14);
}

html.theme-halloween .watch-replay-btn {
    border-color: rgba(255, 157, 46, 0.3);
}

html.theme-halloween .rank-badge-upgrade {
    border-color: rgba(255, 157, 46, 0.35);
    background: rgba(255, 157, 46, 0.08);
}

/* --- Паутина в углах карточек ------------------------------------------
   Пиксельная, как блок паутины в игре; рисует её скрипт в --hw-web. Угол
   чередуется, чтобы ряд карточек не выглядел штампом. */

html.theme-halloween .play {
    position: relative;
}

html.theme-halloween .dash-card::after,
html.theme-halloween .play::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    background: var(--hw-web) top right / 100% 100% no-repeat;
    image-rendering: pixelated;
    opacity: 0.32;
    pointer-events: none;
}

html.theme-halloween .dash-card:nth-child(even)::after,
html.theme-halloween .play:nth-child(even)::after {
    right: auto;
    left: 0;
    transform: scaleX(-1);
}

/* --- Сцена главной ------------------------------------------------------
   Ставится в #home первой, под витрину, во всю ширину окна. Слои — канвасы
   один над другим; скрипт сдвигает их при прокрутке с разной скоростью. */

.hw-scene {
    position: absolute;
    top: calc(-1 * var(--sp-5));
    left: calc(50% - 50vw);
    width: 100vw;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, var(--hw-sky) 0%, #0b1029 55%, var(--hw-night) 100%);
}

.hw-scene canvas {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.hw-scene .hw-moon {
    position: absolute;
    top: 56px;
    right: 13vw;
    width: 96px;
    height: 96px;
    /* Ореол ступенями — свет в игре расходится уровнями, а не градиентом. */
    box-shadow:
        0 0 0 8px rgba(200, 212, 255, 0.07),
        0 0 0 16px rgba(200, 212, 255, 0.045),
        0 0 0 24px rgba(200, 212, 255, 0.025),
        0 0 90px 30px rgba(120, 140, 230, 0.12);
}

.hw-scene .hw-moon canvas {
    position: static;
    display: block;
}

/* Окна замка и рожи тыкв мерцают: анимируется прозрачность целого слоя. */
.hw-scene .hw-glow {
    animation: hw-flicker 5.3s linear infinite;
}

.hw-scene .hw-glow.near {
    animation-duration: 3.7s;
    animation-delay: -1.2s;
}

@keyframes hw-flicker {
    0%, 100% { opacity: 1; }
    17% { opacity: 0.86; }
    20% { opacity: 0.6; }
    23% { opacity: 0.95; }
    52% { opacity: 0.8; }
    71% { opacity: 1; }
    74% { opacity: 0.7; }
    78% { opacity: 0.92; }
}

/* --- Фонарь у курсора --------------------------------------------------
   Страница чуть темнеет, вокруг мыши — тёплое пятно, которое гаснет кольцами,
   как уровни света от факела. Только на устройствах с мышью; навбар выше слоя
   и не темнеет. Градиент собирает скрипт, сам он двигает только --hx/--hy. */

.hw-lantern {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hw-lantern.on {
    opacity: 1;
}

@media (max-width: 768px) {
    /* Над подписью сезона, а не на ней: на узком экране она во всю ширину. */
    .hw-scene .hw-moon {
        top: 14px;
        right: 22px;
        width: 42px;
        height: 42px;
        box-shadow:
            0 0 0 6px rgba(200, 212, 255, 0.06),
            0 0 0 12px rgba(200, 212, 255, 0.035),
            0 0 60px 20px rgba(120, 140, 230, 0.1);
    }

    html.theme-halloween .dash-card::after,
    html.theme-halloween .play::after {
        width: 40px;
        height: 40px;
    }

    /* На телефоне сцена стоит: ни мерцания, ни свечения логотипа в движении. */
    .hw-scene .hw-glow,
    html.theme-halloween .logo-text-glitch::after {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hw-scene .hw-glow,
    html.theme-halloween .logo-text-glitch::after {
        animation: none;
    }

    .hw-lantern {
        transition: none;
    }
}