/* ============================================================
   🎃 ХЭЛЛОУИН — тема на время ивента (SEASONAL_EVENTS в balance.py).
   Включается классом html.theme-halloween (halloween.js по ответу /api/user → season_event).
   Всё перекрашивается через токены style.css, сверху — луна, туман, паутина, летучие мыши.
   ============================================================ */

html.theme-halloween {
    --bg: #0C0812;            /* безлунная ночь */
    --surface: #2A1830;       /* верх карточки — тёмная слива */
    --surface-2: #1A0F20;     /* низ карточки */
    --edge: #4B2A52;          /* обводки */
    --sole: #070409;          /* «подошва» */
    --line: rgba(255, 170, 90, 0.08);
    --text: #FFF3E6;
    --muted: #BFA2B9;
    --gold: #FF8A1F;  --gold-2: #B4520A;       /* тыква вместо золота */
    --violet: #A45CFF; --violet-2: #6A27C9;    /* ведьмин фиолетовый */
    --green: #8BE04E; --green-2: #4A8F1C;      /* зелье */
    --red: #E8384F;   --red-2: #9E1C30;        /* кровь */
    --blue: #5EE6D2;                           /* призрачная бирюза */
    --acc: #FF8A1F; --acc-bg: #2E160C; --acc-edge: rgba(255, 138, 31, 0.40); --acc-glow: rgba(255, 138, 31, 0.13);
}
html.theme-halloween #tab-fight      { --acc: #E8384F; --acc-bg: #2E0C14; --acc-edge: rgba(232, 56, 79, 0.42);  --acc-glow: rgba(232, 56, 79, 0.14); }
html.theme-halloween #tab-business   { --acc: #FF8A1F; --acc-bg: #2E160C; --acc-edge: rgba(255, 138, 31, 0.42); --acc-glow: rgba(255, 138, 31, 0.13); }
html.theme-halloween #tab-collection { --acc: #A45CFF; --acc-bg: #22113D; --acc-edge: rgba(164, 92, 255, 0.44); --acc-glow: rgba(164, 92, 255, 0.14); }
html.theme-halloween #tab-clan       { --acc: #5EE6D2; --acc-bg: #0C2A2A; --acc-edge: rgba(94, 230, 210, 0.38); --acc-glow: rgba(94, 230, 210, 0.11); }
html.theme-halloween #tab-games      { --acc: #8BE04E; --acc-bg: #15280B; --acc-edge: rgba(139, 224, 78, 0.38); --acc-glow: rgba(139, 224, 78, 0.11); }

/* 🎃 Вкладка «Праздник» вместо «Бой»: праздничные подвкладки видны только в теме, Подземелье и Дуэли — спрятаны */
html:not(.theme-halloween) .hw-only { display: none !important; }
html.theme-halloween .hw-hide { display: none !important; }

/* 🔮 Гадание: карты рубашкой, переворот */
.fcards { display: flex; gap: 10px; justify-content: center; margin: 12px 0 6px; perspective: 600px; }
.fcard {
    flex: 1; max-width: 104px; aspect-ratio: 2 / 3; border-radius: 12px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; cursor: pointer;
    background: repeating-linear-gradient(45deg, #2A1338 0 8px, #1C0C26 8px 16px);
    box-shadow: inset 0 0 0 2px #A45CFF, 0 4px 0 #070409; font-size: 30px; transition: transform 0.2s;
}
.fcard:active { transform: translateY(2px) scale(0.97); }
.fcard.back:hover { transform: translateY(-3px); }
.fcard.face { background: linear-gradient(180deg, #2A1830, #120A14); cursor: default; animation: fcard-flip 0.55s ease-out both; }
.fcard.face small { font-size: 10px; line-height: 1.2; color: var(--muted); }
.fcard.face b { font: 800 12px var(--display, sans-serif); color: var(--text); }
.fcard.dim { opacity: 0.45; }
.fcard.shuffle { animation: fcard-shuffle 0.5s ease-in-out infinite alternate; }
@keyframes fcard-flip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes fcard-shuffle { 0% { transform: translateY(0) rotate(-3deg); } 100% { transform: translateY(-6px) rotate(3deg); } }
.clue-slots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 10px 0 4px; }
.clue-slots span { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; background: #120A14; box-shadow: inset 0 0 0 1.5px #4B2A52; }
.clue-slots span.got { background: #2E160C; box-shadow: inset 0 0 0 1.5px #FF8A1F, 0 0 10px rgba(255, 138, 31, 0.35); }
@media (prefers-reduced-motion: reduce) { .fcard.face, .fcard.shuffle { animation: none; } }

/* 🐈‍⬛ Чёрный кот бежит через экран; тап — подарок */
.hw-cat { position: fixed; left: 0; z-index: 1200; padding: 14px; cursor: pointer; animation: hw-cat-run 5.5s linear forwards; }
.hw-cat span { display: inline-block; font-size: 46px; filter: drop-shadow(0 0 6px rgba(255, 178, 92, 0.55)); animation: hw-cat-hop 0.32s ease-in-out infinite alternate; }
.hw-cat.rtl { animation-name: hw-cat-run-rtl; }
.hw-cat.rtl span { transform: scaleX(-1); }
.hw-cat.caught { animation-play-state: paused; }
.hw-cat.caught span { animation: hw-cat-pop 0.4s ease-out forwards; }
@keyframes hw-cat-run { from { transform: translateX(-90px); } to { transform: translateX(calc(100vw + 20px)); } }
@keyframes hw-cat-run-rtl { from { transform: translateX(calc(100vw + 20px)); } to { transform: translateX(-90px); } }
@keyframes hw-cat-hop { from { margin-top: 0; } to { margin-top: -8px; } }
@keyframes hw-cat-pop { to { transform: scale(1.8); opacity: 0; } }
.hw-cat-toast {
    position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 1201; width: calc(100% - 48px); max-width: 360px;
    padding: 12px 14px; border-radius: 14px; text-align: center; font: 700 14px var(--display, sans-serif); color: #FFF3E6;
    background: linear-gradient(180deg, #2A1830, #120A14); box-shadow: inset 0 0 0 1.5px #FF8A1F, 0 6px 20px rgba(0, 0, 0, 0.6);
    animation: hw-toast 0.3s ease-out;
}
.hw-cat-toast.golden { box-shadow: inset 0 0 0 2px #FFD700, 0 0 30px rgba(255, 215, 0, 0.5); color: #FFE680; }
@keyframes hw-toast { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .hw-cat span { animation: none; } .hw-cat { animation-duration: 8s; } }

/* Небо: оранжевая луна справа сверху, зелёный туман снизу */
html.theme-halloween body {
    background:
        radial-gradient(160px 160px at 86% 70px, rgba(255, 196, 120, 0.55), rgba(255, 138, 31, 0.18) 45%, transparent 70%),
        radial-gradient(600px 260px at 50% 105%, rgba(139, 224, 78, 0.10), transparent 70%),
        radial-gradient(520px 320px at 0% 0%, rgba(164, 92, 255, 0.16), transparent 70%),
        var(--bg);
    background-attachment: fixed;
}
/* Сама луна — диск с кратерами, за контентом */
html.theme-halloween body::before {
    content: ""; position: fixed; z-index: 0; pointer-events: none;
    top: 34px; right: calc(50% - 220px); width: 74px; height: 74px; border-radius: 50%;
    background:
        radial-gradient(10px 10px at 30% 35%, rgba(180, 90, 20, 0.35), transparent 70%),
        radial-gradient(14px 14px at 62% 60%, rgba(180, 90, 20, 0.30), transparent 70%),
        radial-gradient(7px 7px at 55% 28%, rgba(180, 90, 20, 0.30), transparent 70%),
        radial-gradient(circle at 40% 38%, #FFE2B0, #FFAE52 60%, #E0741A);
    box-shadow: 0 0 40px 10px rgba(255, 150, 50, 0.35);
    opacity: 0.9;
}
@media (max-width: 480px) { html.theme-halloween body::before { right: 18px; } }
html.theme-halloween .app { position: relative; z-index: 1; }

/* Шапка: паутина в левом углу */
html.theme-halloween .header { background: rgba(12, 8, 18, 0.84); }
html.theme-halloween .header::after {
    content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; opacity: 0.35;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23FFE9D6' stroke-width='0.8'%3E%3Cpath d='M0 0 L64 26 M0 0 L48 48 M0 0 L26 64'/%3E%3Cpath d='M0 14 Q8 8 14 0 M0 28 Q16 16 28 0 M0 42 Q24 24 42 0 M0 56 Q32 32 56 0'/%3E%3C/svg%3E") no-repeat;
}
html.theme-halloween .me-avatar { background: linear-gradient(160deg, #4A2410, #26100A); }

/* Заголовки — с тёплым свечением, как от свечи в тыкве */
html.theme-halloween h3, html.theme-halloween h2 { text-shadow: 0 0 12px rgba(255, 138, 31, 0.25); }

/* Арена босса — туманное кладбище */
html.theme-halloween .boss-arena {
    background:
        radial-gradient(120px 80px at 50% 30%, rgba(255, 138, 31, 0.25), transparent 70%),
        linear-gradient(180deg, #1B0F22, #0C0812 70%, #13200C);
}

/* Плашка ивента под шапкой */
.season-chip {
    display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; padding: 8px 12px; border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 138, 31, 0.22), rgba(164, 92, 255, 0.16));
    box-shadow: inset 0 0 0 1.5px rgba(255, 138, 31, 0.45);
    font: 800 13px/1.2 var(--display); color: var(--text); cursor: default;
}
.season-chip .sc-icon { font-size: 22px; animation: sc-bob 2.4s ease-in-out infinite; }
.season-chip small { display: block; font: 700 11px var(--body); color: var(--muted); }
@keyframes sc-bob { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }

/* Летучие мыши и листья — фоном за контентом, не мешают нажимать */
.season-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.season-fx span { position: absolute; top: -40px; opacity: 0; will-change: transform; }
.season-fx .fx-leaf { animation: fx-fall linear infinite; }
.season-fx .fx-bat { top: auto; animation: fx-fly linear infinite; }
@keyframes fx-fall {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    10% { opacity: 0.55; }
    90% { opacity: 0.45; }
    100% { opacity: 0; transform: translate(60px, 105vh) rotate(320deg); }
}
@keyframes fx-fly {
    0% { opacity: 0; transform: translate(-60px, 0) scale(0.8); }
    10% { opacity: 0.7; }
    50% { transform: translate(55vw, -40px) scale(1); }
    90% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(110vw, 10px) scale(0.8); }
}
@media (prefers-reduced-motion: reduce) { .season-fx { display: none; } .season-chip .sc-icon { animation: none; } }

/* ---------- 🚪 Сладость или гадость ---------- */
.doors { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0 4px; }
.door {
    aspect-ratio: 3 / 4; max-width: 100%; border-radius: 10px 10px 6px 6px; display: grid; place-items: center; font-size: 26px;
    background: linear-gradient(180deg, #5A2E14, #321708); box-shadow: inset 0 0 0 2px #8A4A1E, 0 3px 0 #1A0A04;
    cursor: pointer; user-select: none; -webkit-user-select: none; position: relative;
}
.door::after { content: ""; position: absolute; right: 18%; top: 52%; width: 5px; height: 5px; border-radius: 50%; background: #FFB25C; }
.door.opened { background: #120A14; box-shadow: inset 0 0 0 2px #3A2440; cursor: default; font-size: 22px; opacity: 0.6; }
.door.opened::after { display: none; }
.door.knock { animation: door-knock 0.5s ease-in-out; }
@keyframes door-knock { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
.door-result { min-height: 20px; text-align: center; font-size: 13px; color: var(--text); margin: 4px 0 2px; }
.door-result .big { display: block; font-size: 38px; animation: sh-in 0.4s ease-out; }

/* ---------- 🧪 Котёл ведьмы ---------- */
.cauldron-pot { font-size: 30px; display: inline-block; filter: drop-shadow(0 0 8px rgba(139, 224, 78, 0.5)); }
.cauldron-pot.brewing { animation: cauldron-bubble 0.3s ease-in-out infinite alternate; }
@keyframes cauldron-bubble { from { transform: translateY(0) scale(1) rotate(-4deg); } to { transform: translateY(-4px) scale(1.12) rotate(4deg); filter: drop-shadow(0 0 16px rgba(139, 224, 78, 0.9)); } }

/* ---------- 👻 Пугалки (halloween.js → seasonScare*) ---------- */
/* Отключение света: тьма с кругом «фонарика» (центр — переменные --fx/--fy), потом вспышка молнии */
.scare-dark {
    position: fixed; inset: 0; z-index: 2500; pointer-events: none; opacity: 0; transition: opacity 1.2s ease-in;
    background: radial-gradient(circle 95px at var(--fx, 50%) var(--fy, 45%), transparent 0, rgba(0, 0, 0, 0.55) 70px, rgba(2, 0, 4, 0.97) 120px);
}
.scare-dark.on { opacity: 1; }
.scare-dark .scare-eyes { position: absolute; font-size: 30px; opacity: 0; animation: scare-blink 2.2s ease-in-out 0.9s forwards; }
@keyframes scare-blink { 0% { opacity: 0; } 20% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0.9; } }
.scare-flash { position: fixed; inset: 0; z-index: 2600; pointer-events: none; background: #F4F1FF; animation: scare-flash 0.6s ease-out forwards; }
@keyframes scare-flash { 0% { opacity: 0.92; } 100% { opacity: 0; } }

/* Таракан / паук — бегают поверх всего, по ним можно попасть пальцем */
.scare-bug { position: fixed; left: 0; top: 0; z-index: 2400; font-size: 26px; line-height: 1; cursor: pointer; user-select: none; -webkit-user-select: none;
             touch-action: manipulation; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.scare-bug .emj, .scare-bug img { width: 1em; height: 1em; pointer-events: none; }
.scare-splat { position: fixed; z-index: 2400; font-size: 28px; pointer-events: none; animation: scare-splat 0.9s ease-out forwards; }
@keyframes scare-splat { 0% { transform: scale(0.4); opacity: 1; } 30% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 0; } }
.scare-thread { position: fixed; z-index: 2399; width: 1px; background: rgba(255, 240, 230, 0.55); pointer-events: none; }

/* Призрак выглядывает из-за края */
.scare-ghost { position: fixed; z-index: 2400; font-size: 54px; pointer-events: none; opacity: 0.85; transition: transform 0.7s ease-in-out; }

@media (prefers-reduced-motion: reduce) { .scare-dark, .scare-flash { display: none; } }

/* Приветствие «Сладость или гадость?» */
.season-hello {
    position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 20px;
    background: rgba(5, 2, 8, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: sh-in 0.35s ease-out;
}
.season-hello .sh-card {
    width: min(360px, 100%); padding: 22px 18px 18px; border-radius: 22px; text-align: center;
    background: linear-gradient(180deg, #2E1A36, #170D1D); box-shadow: inset 0 0 0 2px rgba(255, 138, 31, 0.55), 0 0 40px rgba(255, 138, 31, 0.25);
}
.season-hello .sh-pumpkin { font-size: 64px; line-height: 1; animation: sh-glow 1.6s ease-in-out infinite; }
.season-hello h2 { margin: 10px 0 6px; font-size: 22px; color: #FFB25C; }
.season-hello p { font-size: 13px; color: var(--muted); line-height: 1.45; }
.season-hello button {
    margin-top: 14px; width: 100%; padding: 12px; border: 0; border-radius: 14px; cursor: pointer;
    font: 800 15px var(--display); color: #2A1205; background: linear-gradient(180deg, #FFB25C, #FF8A1F); box-shadow: 0 4px 0 #B4520A;
}
.season-hello button:active { transform: translateY(2px); box-shadow: 0 2px 0 #B4520A; }
@keyframes sh-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 138, 31, 0.5)); transform: scale(1); }
                     50% { filter: drop-shadow(0 0 18px rgba(255, 138, 31, 0.9)); transform: scale(1.06); } }