/* ════════════════════════════════════════════════════════════════════════
   АНАРХИЯ · новая тема (2026) + Хэллоуин
   Подключается ПОСЛЕ anarchy.css — переопределяет палитру и эффекты.
   Главное отличие: убран полноэкранный blur(28px) с бесконечной анимацией
   и backdrop-filter с тяжёлых карточек — именно они лагали на телефонах.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Палитра: глубокий фиолетово-синий + оранжевый хэллоуин-акцент */
  --bg: #08060f;
  --bg-soft: #120d1f;
  --panel: rgba(255, 255, 255, 0.04);
  --panel-strong: rgba(255, 255, 255, 0.07);
  --panel-hover: rgba(255, 255, 255, 0.11);
  --line: rgba(255, 255, 255, 0.09);
  --line-red: rgba(255, 138, 61, 0.3);
  --text: #f6f3ff;
  --text-dim: #cfc8e4;
  --muted: #948ba8;
  --red: #a06bff;
  --red-2: #ff8a3d;
  --red-deep: #6d43c9;
  --red-grad: linear-gradient(135deg, #ff8a3d, #b23bd6 52%, #7b4dff);
  --red-grad-soft: linear-gradient(135deg, #ffa95c, #c455ff);
  --gold: #ffc247;
  --ok: #46e08a;
  --danger: #ff5f6d;
  --line-red: rgba(178, 59, 214, 0.32);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 13px;
  --shadow-card: 0 20px 50px -28px rgba(0, 0, 0, 0.9);
  --shadow-red: 0 12px 34px -14px rgba(178, 59, 214, 0.6);
  --pumpkin: #ff8a3d;
  --ghost: #cdb9ff;
}

html { background: var(--bg); }

/* Фон: статичные градиенты вместо анимированного blur-слоя */
body {
  background:
    radial-gradient(1000px 560px at 50% -10%, rgba(255, 138, 61, 0.16), transparent 60%),
    radial-gradient(880px 520px at 12% 105%, rgba(123, 77, 255, 0.18), transparent 62%),
    radial-gradient(760px 480px at 95% 60%, rgba(178, 59, 214, 0.12), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

/* тяжёлый «liquid» слой выключаем полностью */
.liquid-home::before { display: none !important; content: none !important; animation: none !important; }
.liquid-home { isolation: auto; }

a { color: #c9b6ff; color: #c9b6ff; }
a { color: #c9b6ff; }
::selection { background: rgba(255, 138, 61, 0.35); }

/* ─── Карточки: без backdrop-filter (он и лагал) ─────────────────────── */
.profile-card,
.glass-card,
.shop-card,
.shop-card,
.faq-card,
.login-card,
.tile {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Хэллоуинская «паутина» по углам карточек */
.profile-card::after,
.glass-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 74px; height: 74px;
  pointer-events: none;
  opacity: 0.5;
  background:
    linear-gradient(135deg, transparent 46%, rgba(205, 185, 255, 0.35) 47%, transparent 48%),
    linear-gradient(135deg, transparent 68%, rgba(205, 185, 255, 0.22) 69%, transparent 70%),
    radial-gradient(circle at 100% 0%, rgba(205, 185, 255, 0.18), transparent 70%);
  border-top-right-radius: var(--radius-lg);
}

/* ─── Кнопки ─────────────────────────────────────────────────────────── */
.btn,
.btn-primary,
.menu-btn-primary {
  background: var(--red-grad);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-red), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover,
.btn-primary:hover { filter: brightness(1.08); }

.menu-btn {
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)) !important;
  color: var(--text-dim) !important;
  box-shadow: 0 10px 28px -20px #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.18s ease, background 0.18s ease;
}
.menu-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(140deg, rgba(255, 138, 61, 0.16), rgba(178, 59, 214, 0.12)) !important;
  border-color: rgba(255, 138, 61, 0.4) !important;
  color: #fff !important;
}
/* блик при наведении оставляем, но он дешёвый */
.menu-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.13) 30%, transparent 42%);
  transform: translateX(-110%);
  transition: transform 0.6s ease;
}
.menu-btn:hover::before { transform: translateX(110%); }

/* Первая (главная) кнопка — тыквенный акцент */
.menu-item:first-child .menu-btn {
  min-height: 92px;
  background: linear-gradient(135deg, rgba(255, 138, 61, 0.32), rgba(178, 59, 214, 0.28)) !important;
  border-color: rgba(255, 170, 100, 0.45) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px -20px rgba(255, 138, 61, 0.75) !important;
}
.menu-item:first-child .menu-label { font-size: 1.15rem; font-weight: 800; }
.menu-item:first-child .menu-btn::after {
  content: '🎃';
  margin-left: auto;
  font-size: 1.35rem;
}
.menu-btn::after { content: '↗'; margin-left: auto; color: var(--muted); font-size: 1.15rem; }

/* ─── Заголовки ──────────────────────────────────────────────────────── */
.faq-title,
h1.page-title,
.home-hero .home-title {
  background: linear-gradient(135deg, #fff 18%, #ffd9b0 55%, #ff8a3d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.home-title,
.faq-title {
  background: linear-gradient(135deg, #fff 18%, #ffd9b0 55%, #ff8a3d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* «eyebrow» — маленький чип над заголовком */
.home-eyebrow,
.faq-eyebrow,
.eyebrow {
  background: rgba(255, 138, 61, 0.1) !important;
  border: 1px solid rgba(255, 138, 61, 0.28) !important;
  color: #ffc79a !important;
}
.home-eyebrow::before,
.faq-eyebrow::before,
.eyebrow::before {
  background: var(--pumpkin) !important;
  box-shadow: 0 0 12px rgba(255, 138, 61, 0.75) !important;
}

/* ─── Нижняя навигация ───────────────────────────────────────────────── */
.bottom-nav {
  background: rgba(14, 10, 24, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 26px !important;
  box-shadow: 0 16px 44px -18px #000, inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.bn-item { color: var(--muted) !important; }
.bn-item.active {
  background: linear-gradient(145deg, rgba(255, 138, 61, 0.24), rgba(178, 59, 214, 0.18)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 170, 100, 0.3) !important;
}
.bn-item.active .bn-label { color: #ffd9b0 !important; }
.bn-item.active .bn-icon { color: #ffb877 !important; }
.bn-icon svg { stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Профиль ────────────────────────────────────────────────────────── */
.profile-photo {
  border: 2px solid rgba(255, 138, 61, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.12), var(--shadow-red) !important;
}
.profile-coins {
  background: rgba(255, 194, 247, 0.08);
  background: rgba(255, 194, 71, 0.09) !important;
  border-color: rgba(255, 194, 71, 0.3) !important;
}

/* ─── Поля ввода ─────────────────────────────────────────────────────── */
input[type='text'],
input[type='password'],
input[type='number'],
textarea,
select {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(255, 138, 61, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.16) !important;
}

/* ─── Модалки ────────────────────────────────────────────────────────── */
.modal {
  background: linear-gradient(160deg, #1b1230, #0e0a18) !important;
  border: 1px solid rgba(178, 59, 214, 0.32) !important;
}
.modal-overlay { background: rgba(4, 3, 10, 0.78) !important; }

/* ════════════════════════════════════════════════════════════════════════
   КОМПАКТНАЯ КАРТОЧКА ПРОФИЛЯ
   Достижения убраны, статы — плиткой, меньше отступов и «воздуха».
   ════════════════════════════════════════════════════════════════════════ */
.profile-card {
  padding: 20px 16px 18px !important;
}
.profile-photo-wrap {
  width: 92px !important;
  margin: 0 auto 12px !important;
}
.profile-name { font-size: 1.25rem !important; }
.profile-subtitle { margin: 7px 0 0 !important; gap: 5px !important; }
.profile-section {
  margin-top: 14px !important;
  padding-top: 12px !important;
}
.profile-section-title { margin-bottom: 5px !important; }

/* Плитка статов: монеты / дата / развлекательные цифры в ряд */
.profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin: 12px 0 0;
}
.pstat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(178, 59, 214, 0.2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim, #c9c2e0);
}
.pstat-ic { font-size: 0.95rem; line-height: 1; }
.pstat-tx { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════
   ХЭЛЛОУИН: призраки, пауки, туман
   Всё дешёвое — transform/opacity, никаких blur на полный экран.
   ════════════════════════════════════════════════════════════════════════ */

.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 5; /* под нижней настройкой (90) */
  overflow: hidden;
  pointer-events: none;
}

/* ─── Призраки: рисованный силуэт (не эмодзи), волнистая траектория ─── */
.fx-ghost {
  position: absolute;
  left: -26vw;
  top: 0;
  width: 54px;
  height: 76px;
  opacity: 0;
  animation: ghostTravel linear infinite;
  will-change: transform, opacity;
}
/* «Присел» отдохнуть на уголок сайта — тело продолжает покачиваться */
.fx-ghost.is-resting { opacity: 0.85; }
.fx-ghost .fx-ghost-body {
  display: block;
  width: 100%;
  height: 100%;
  color: #d9ccff;
  filter: drop-shadow(0 0 14px rgba(196, 168, 255, 0.75));
  animation: ghostWobble 3.7s ease-in-out infinite;
}
.fx-ghost .fx-ghost-body svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fx-ghost .fx-eye { animation: ghostBlink 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fx-ghost .fx-tail { animation: ghostTail 2.6s ease-in-out infinite; }

@keyframes ghostTravel {
  0%   { transform: translate3d(0, 0, 0) scale(0.78); opacity: 0; }
  6%   { opacity: 0.82; }
  22%  { transform: translate3d(24vw, -7vh, 0) scale(0.88); }
  40%  { transform: translate3d(45vw, 1vh, 0) scale(1); }
  58%  { transform: translate3d(66vw, -10vh, 0) scale(1.06); }
  78%  { transform: translate3d(88vw, 3vh, 0) scale(0.98); }
  92%  { opacity: 0.55; }
  100% { transform: translate3d(130vw, -4vh, 0) scale(0.9); opacity: 0; }
}
@keyframes ghostWobble {
  0%, 100% { transform: translateY(-7px) rotate(-5deg) skewX(3deg); }
  50%      { transform: translateY(8px) rotate(5deg) skewX(-3deg); }
}
/* Приземлился и сидит на видном месте — качается чуть медленнее */
@keyframes ghostRest {
  0%   { transform: translate3d(0, 0, 0) scale(0.82); opacity: 0; }
  3%   { opacity: 0.85; }
  96%  { opacity: 0.85; }
  100% { transform: translate3d(0, 0, 0) scale(0.82); opacity: 0; }
}
@keyframes ghostTail {
  0%, 100% { transform: translateX(0) scaleY(1); }
  50%      { transform: translateX(-4px) scaleY(1.12); }
}
@keyframes ghostBlink {
  0%, 86%, 100% { transform: scaleY(1); }
  90%           { transform: scaleY(0.1); }
}

/* ─── Пауки: настоящий силуэт с восемью ногами, ползущий по кривой нити ── */
.fx-spider {
  position: absolute;
  top: -40px;
  width: 40px;
  height: 34px;
  animation: spiderSwing ease-in-out infinite;
  will-change: transform;
}
.fx-spider .fx-thread {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 100vh;
  background: linear-gradient(180deg, rgba(205, 185, 255, 0), rgba(205, 185, 255, 0.4));
}
.fx-spider .fx-spider-body {
  display: block;
  width: 100%;
  height: 100%;
  color: #0d0a14;
  filter: drop-shadow(0 0 6px rgba(178, 59, 214, 0.55));
}
.fx-spider .fx-spider-body svg { display: block; width: 100%; height: 100%; }
.fx-spider .fx-leg { animation: spiderLeg 0.9s ease-in-out infinite; }
.fx-spider .fx-leg:nth-of-type(even) { animation-delay: -0.45s; }

@keyframes spiderSwing {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  30%  { transform: translate3d(2.6vw, 18vh, 0) rotate(7deg); }
  50%  { transform: translate3d(0.6vw, 24vh, 0) rotate(-3deg); }
  72%  { transform: translate3d(3.4vw, 34vh, 0) rotate(6deg); }
  100% { transform: translate3d(1vw, 44vh, 0) rotate(-2deg); }
}
@keyframes spiderLeg {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(13deg); }
}

/* ─── Летучие мыши: свой SVG с машущими крыльями
   Траектория — волнистая, сменяется направление волнистой.
   Крыло машет по вертикали. */
.fx-bat {
  position: absolute;
  left: -18vw;
  top: 0;
  width: 46px;
  height: 24px;
  opacity: 0;
  animation: batTravel linear infinite;
  will-change: transform, opacity;
}
.fx-bat .fx-bat-body { display: block; width: 100%; height: 100%; color: #120d1c; filter: drop-shadow(0 0 8px rgba(255, 138, 61, 0.35)); }
.fx-bat .fx-bat-body svg { display: block; width: 100%; height: 100%; }
.fx-bat .fx-wing { transform-box: view-box; transform-origin: 23px 11px; }
.fx-bat .fx-wing-left { animation: batFlapL 0.34s ease-in-out infinite; }
.fx-bat .fx-wing-right { animation: batFlapR 0.34s ease-in-out infinite; }
/* Мышь присела передохнуть на уголок — крылья машут медленно */
.fx-bat.is-resting { opacity: 0.8; }
.fx-bat.is-resting .fx-wing { animation-duration: 1.6s; }

@keyframes batTravel {
  0%   { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; }
  7%   { opacity: 0.9; }
  20%  { transform: translate3d(18vw, -6vh, 0) scale(0.95); }
  34%  { transform: translate3d(38vw, 3vh, 0); }
  48%  { transform: translate3d(56vw, -9vh, 0) scale(1.1); }
  62%  { transform: translate3d(78vw, -1vh, 0); }
  78%  { transform: translate3d(96vw, -12vh, 0); }
  92%  { opacity: 0.6; }
  100% { transform: translate3d(122vw, -3vh, 0) scale(0.9); opacity: 0; }
}
@keyframes batFlapL {
  0%, 100% { transform: rotate(-24deg) scaleY(1); }
  50%      { transform: rotate(26deg) scaleY(0.6); }
}
@keyframes batFlapR {
  0%, 100% { transform: rotate(24deg) scaleY(1); }
  50%      { transform: rotate(-26deg) scaleY(0.6); }
}
@keyframes batRest {
  0%   { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0; }
  3%   { opacity: 0.8; }
  96%  { opacity: 0.8; }
  100% { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0; }
}

/* Нижний туман */
.fx-fog {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 190px;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(60% 100% at 20% 100%, rgba(178, 59, 214, 0.18), transparent 70%),
    radial-gradient(55% 100% at 72% 100%, rgba(255, 138, 61, 0.14), transparent 72%),
    linear-gradient(to top, rgba(8, 6, 15, 0.9), transparent);
  animation: fogDrift 14s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes fogDrift {
  from { transform: translateX(-2%); }
  to   { transform: translateX(2%); }
}

/* Тыквы-светильники по краям (SVG, не эмодзи) */
.fx-pumpkin {
  position: absolute;
  width: 30px;
  height: 30px;
  opacity: 0.55;
  color: #ff8a3d;
  filter: drop-shadow(0 0 10px rgba(255, 138, 61, 0.45));
  animation: flicker 3.4s ease-in-out infinite;
}
.fx-pumpkin svg { display: block; width: 100%; height: 100%; }

/* Разворот: некоторые летят справа налево */
.fx-rev { animation-direction: reverse; }

/* Кнопка звука */
.fx-sound-toggle {
  position: fixed;
  right: 12px;
  bottom: 84px;
  z-index: 80;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(178, 59, 214, 0.4);
  background: rgba(13, 10, 22, 0.72);
  color: #d9ccff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(6px);
}
.fx-sound-toggle svg { width: 20px; height: 20px; }
.fx-sound-toggle.is-off { color: #7a6f96; opacity: 0.7; }
@keyframes flicker {
  0%, 100% { opacity: 0.35; transform: translateY(0) rotate(-4deg); }
  50%      { opacity: 0.85; transform: translateY(-4px) rotate(4deg); }
}

/* Уважаем «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .fx-ghost, .fx-spider, .fx-bat, .fx-fog, .fx-pumpkin, .fx-ghost-body,
  .fx-tail, .fx-eye, .fx-leg, .fx-wing { animation: none !important; }
  .fx-ghost, .fx-bat { opacity: 0.4; }
  .fx-sound-toggle { display: none; }
}

/* На маленьких экранах не мешаем контенту */
@media (max-width: 380px) {
  .fx-ghost { width: 44px; height: 62px; }
  .fx-bat { width: 34px; height: 18px; }
  .fx-spider { width: 30px; height: 26px; }
  .fx-fog { height: 140px; }
}

/* ─── Варианты траекторий: чтобы никто не летал по одной и той же ─── */
@keyframes ghostTravelB {
  0%   { transform: translate3d(0, 0, 0) scale(0.7); opacity: 0; }
  5%   { opacity: 0.75; }
  25%  { transform: translate3d(20vw, 9vh, 0) scale(0.82); }
  45%  { transform: translate3d(48vw, -4vh, 0) scale(0.95); }
  65%  { transform: translate3d(72vw, 6vh, 0) scale(1.08); }
  85%  { transform: translate3d(98vw, -2vh, 0) scale(0.9); }
  93%  { opacity: 0.5; }
  100% { transform: translate3d(132vw, 5vh, 0) scale(0.85); opacity: 0; }
}
@keyframes ghostTravelC {
  0%   { transform: translate3d(0, 0, 0) scale(0.95); opacity: 0; }
  7%   { opacity: 0.9; }
  18%  { transform: translate3d(16vw, -11vh, 0) scale(1.05); }
  38%  { transform: translate3d(40vw, 4vh, 0) scale(0.9); }
  56%  { transform: translate3d(62vw, -6vh, 0) scale(1.1); }
  74%  { transform: translate3d(84vw, 8vh, 0) scale(0.95); }
  91%  { opacity: 0.6; }
  100% { transform: translate3d(124vw, -8vh, 0) scale(1); opacity: 0; }
}
@keyframes batTravelB {
  0%   { transform: translate3d(0, 0, 0) scale(0.9); opacity: 0; }
  8%   { opacity: 0.85; }
  22%  { transform: translate3d(16vw, 8vh, 0) scale(1); }
  40%  { transform: translate3d(42vw, -5vh, 0) scale(1.12); }
  60%  { transform: translate3d(64vw, 7vh, 0) scale(0.95); }
  80%  { transform: translate3d(90vw, -3vh, 0) scale(1.05); }
  93%  { opacity: 0.55; }
  100% { transform: translate3d(126vw, 6vh, 0) scale(0.88); opacity: 0; }
}
@keyframes batTravelC {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); opacity: 0; }
  6%   { opacity: 0.95; }
  24%  { transform: translate3d(22vw, -12vh, 0) scale(0.9); }
  44%  { transform: translate3d(46vw, 2vh, 0) scale(1.05); }
  64%  { transform: translate3d(70vw, -9vh, 0) scale(0.92); }
  84%  { transform: translate3d(94vw, 5vh, 0) scale(1.08); }
  92%  { opacity: 0.6; }
  100% { transform: translate3d(128vw, -6vh, 0) scale(0.95); opacity: 0; }
}
/* Летучая мышь, ныряющая вниз и вверх */
@keyframes batDive {
  0%   { transform: translate3d(0, -14vh, 0) scale(0.9); opacity: 0; }
  9%   { opacity: 0.85; }
  30%  { transform: translate3d(30vw, 12vh, 0) scale(1.08); }
  52%  { transform: translate3d(58vw, -6vh, 0) scale(0.95); }
  76%  { transform: translate3d(88vw, 10vh, 0) scale(1.1); }
  92%  { opacity: 0.55; }
  100% { transform: translate3d(126vw, -4vh, 0) scale(0.9); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   Охота за сладостями (Хэллоуин-игра).
   Слой .fx-layer не ловит клики целиком (иначе перехватывал бы кнопки сайта),
   но цели — призрак/мышь/паук — кликабельны ВСЕГДА, без всякого режима.
   Тыквы остаются просто фоном: сладостей с них нет.
   ════════════════════════════════════════════════════════════════════════ */
.fx-layer .fx-ghost,
.fx-layer .fx-bat,
.fx-layer .fx-spider {
  pointer-events: auto;
  cursor: pointer;
}
/* Подсветка целей, чтобы было видно, по чему можно тапнуть */
.fx-layer .fx-ghost .fx-ghost-body,
.fx-layer .fx-bat .fx-bat-body,
.fx-layer .fx-spider .fx-spider-body {
  filter: drop-shadow(0 0 11px rgba(255, 138, 61, 0.9));
}

/* ─── Счётчик сладостей в шапке страницы ─── */
.hw-head {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: var(--radius-md, 16px);
  border: 1px solid rgba(255, 138, 61, 0.35);
  background: rgba(255, 138, 61, 0.1);
  color: var(--text-dim, #cfc2c6);
  font-size: 0.8rem;
  font-weight: 600;
}
.hw-head-item { white-space: nowrap; }
.hw-head b { color: var(--gold, #ffd54a); }
.hw-head-locked {
  opacity: 0.75;
  border-color: var(--line, rgba(255, 255, 255, 0.08));
  background: var(--panel, rgba(255, 255, 255, 0.035));
}

/* ─── Обменник сладостей в магазине ─── */
.hw-shop {
  margin: 0 auto 22px;
  padding: 18px 16px;
  border-radius: var(--radius-lg, 22px);
  border: 1px solid rgba(255, 138, 61, 0.4);
  background: linear-gradient(135deg, rgba(255, 138, 61, 0.14), rgba(178, 59, 214, 0.1));
  box-shadow: var(--shadow-card, 0 18px 50px -24px rgba(0, 0, 0, 0.85));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  text-align: center;
}
.hw-shop-title { margin-bottom: 6px; font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; }
.hw-shop-sub { margin-bottom: 14px; color: var(--text-dim, #cfc2c6); font-size: 0.82rem; }
.hw-shop b { color: var(--gold, #ffd54a); }
.hw-shop-btn {
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: var(--radius-md, 16px);
  background: var(--red-grad, linear-gradient(135deg, #ff5a4d, #d61f1f));
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-red, 0 10px 34px -12px rgba(255, 59, 59, 0.55));
  -webkit-tap-highlight-color: transparent;
}
.hw-shop-btn:disabled { opacity: 0.45; box-shadow: none; cursor: default; }
.hw-shop-msg {
  margin-top: 10px;
  min-height: 1em;
  font-size: 0.82rem;
  color: #ffb4f0;
  opacity: 0;
  transition: opacity 0.25s;
}
.hw-shop-msg.is-on { opacity: 1; }

/* ─── Частицы сладостей: отдельный слой поверх всего, без перехвата кликов ─── */
.hw-fx {
  position: fixed;
  inset: 0;
  z-index: 85;
  pointer-events: none;
  overflow: hidden;
}
.hw-pop,
.hw-gain {
  position: fixed;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.hw-pop { font-size: 18px; animation: hwPop 0.85s ease-out forwards; }
@keyframes hwPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20%  { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -60px)))
               scale(1.1) rotate(140deg);
  }
}
.hw-gain {
  font-size: 15px;
  font-weight: 700;
  color: #ffd54a;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  animation: hwGain 0.9s ease-out forwards;
}
@keyframes hwGain {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -80%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -170%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hw-pop, .hw-gain { animation-duration: 0.01ms !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   Экран загрузки при входе на сайт. Отдельный слой поверх всего; сам
   убирается после загрузки страницы (логика в halloween-fx.js).
   ════════════════════════════════════════════════════════════════════════ */
.fx-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(178, 59, 214, 0.2), transparent 70%),
    radial-gradient(50% 40% at 50% 66%, rgba(255, 138, 61, 0.14), transparent 72%),
    #090d19;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.fx-loader.is-done { opacity: 0; visibility: hidden; }

.fx-loader-scene { position: relative; width: 190px; height: 128px; }
.fx-loader-pumpkin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 24px rgba(255, 138, 61, 0.65));
  animation: fxLoaderBob 2.2s ease-in-out infinite;
}
.fx-loader-pumpkin svg { display: block; width: 100%; height: 100%; }
.fx-loader-ghost {
  position: absolute;
  width: 46px;
  height: 66px;
  opacity: 0.85;
  color: #d9ccff;
  filter: drop-shadow(0 0 12px rgba(196, 168, 255, 0.7));
}
.fx-loader-ghost svg { display: block; width: 100%; height: 100%; }
.fx-loader-ghost-a { left: 6px; top: 6px; animation: fxLoaderFloat 2.6s ease-in-out infinite; }
.fx-loader-ghost-b { right: 6px; top: 26px; animation: fxLoaderFloat 2.6s ease-in-out infinite reverse; }
@keyframes fxLoaderBob {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50%      { transform: translate(-50%, -60%) rotate(4deg); }
}
@keyframes fxLoaderFloat {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(8px); }
}

.fx-loader-title {
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  background: linear-gradient(90deg, #ff8a3d, #ffd54a, #b23bd6, #ff8a3d);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f1e9ff;
  animation: fxLoaderShimmer 2.4s linear infinite;
}
@keyframes fxLoaderShimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }

.fx-loader-bar {
  width: 170px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.fx-loader-bar span {
  display: block;
  height: 100%;
  width: 45%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8a3d, #b23bd6);
  animation: fxLoaderBar 1.15s ease-in-out infinite;
}
@keyframes fxLoaderBar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(330%); }
}
.fx-loader-hint { color: #9c8bb0; font-size: 0.76rem; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  .fx-loader-pumpkin, .fx-loader-ghost, .fx-loader-title, .fx-loader-bar span { animation: none !important; }
  .fx-loader-bar span { width: 100%; }
}