/* =========================================================
   HALLOWEEN THEME — GameCMS, шаблон "prime"
   Включается классом .hw на <html> (ставит halloween.js)
   ========================================================= */

/* ---------- 1. Палитра: перекрашиваем переменные шаблона ---------- */
html.hw {
  --accent:        #ff7a1a;
  --accent-light:  #ffb347;
  --main-bg:       #151018;
  --hover:         #1c1520;
  --card2:         #221a27;
  --divider:       #2e2236;

  /* блок .cs-section использует свои переменные */
  --neon-pink:       #ff7a1a;
  --neon-pink-hover: #ff9a45;
  --neon-pink-glow:  rgba(255,122,26,.45);

  --hw-purple: #9b4dff;
  --hw-a10: rgba(255,122,26,.10);
  --hw-a20: rgba(255,122,26,.20);
  --hw-a35: rgba(255,122,26,.35);
}

html.hw body { background: #0f0b12; }

/* плавная смена темы (класс висит ~0.7 сек после клика) */
html.hw-anim *, html.hw-anim *::before, html.hw-anim *::after {
  transition: background-color .6s ease, border-color .6s ease, color .6s ease, box-shadow .6s ease, fill .6s ease !important;
}

/* ---------- 2. Атмосфера: свечение тыквы и луны в фоне ---------- */
html.hw .main_content {
  background:
    radial-gradient(900px 380px at 85% -60px, rgba(255,122,26,.13), transparent 70%),
    radial-gradient(700px 320px at 0% 0%, rgba(155,77,255,.12), transparent 70%),
    var(--main-bg);
}
html.hw .left_menu { background: linear-gradient(180deg, #160f1b 0%, #0f0b12 100%); }
html.hw .left_menu:after { background: radial-gradient(circle, rgba(255,122,26,.16) 0%, transparent 70%); }
html.hw .chat_sidebar { background: #120d16; }

/* ---------- 3. Меню ---------- */
html.hw .collapsible-menu a.active {
  border-color: var(--hw-a35);
  background: linear-gradient(90deg, var(--hw-a10), transparent 80%);
}
html.hw .collapsible-menu a.active svg,
html.hw .collapsible-menu a:hover svg { filter: drop-shadow(0 0 6px rgba(255,122,26,.75)); }

/* ---------- 4. Места, где розовый вшит вручную (rgba 248,33,255) ---------- */
html.hw .block_head .head_icon,
html.hw .chat-server-ico,
html.hw .g-stat-icon,
html.hw .settings-section-icon,
html.hw .page-head-ico,
html.hw .shop-card-head-ico,
html.hw .c-block-head-ico,
html.hw .shop-step-num,
html.hw .f-btn,
html.hw .wlt-discount-badge,
html.hw .logo-container > .info-line div {
  background: var(--hw-a10) !important;
  border-color: var(--hw-a35) !important;
}
html.hw .block_head > .head_icon > svg path { fill: var(--accent); }
html.hw .wlt-section-label > svg { color: var(--accent); }

html.hw .sidebar-profile:hover { border-color: var(--hw-a35); }
html.hw .sidebar-profile-glow { background: radial-gradient(circle, rgba(255,122,26,.18) 0%, transparent 70%); }
html.hw .sidebar-profile-ava  { border-color: var(--hw-a35); }

html.hw .flex-online-block:hover { border-color: var(--hw-a35); background: var(--hw-a10); }
html.hw .chat-header-glow { background: radial-gradient(ellipse, rgba(255,122,26,.14) 0%, transparent 70%); }
html.hw .footer-glow { background: radial-gradient(ellipse, rgba(255,122,26,.12) 0%, rgba(155,77,255,.06) 40%, transparent 70%); }
html.hw .footer-divider-dot { box-shadow: 0 0 10px rgba(255,122,26,.8); }
html.hw .modal-head-meta span:first-child { background: var(--hw-a10); border-color: var(--accent); }
html.hw .msg-action-btn:hover.edit { background: var(--hw-a20); }
html.hw .two-server > .server_btn a:hover,
html.hw .mfb-copy:hover { background: var(--hw-a10); }

html.hw .list-tabs a.active,
html.hw .server-btn.active,
html.hw .g-friends-navbtn.active,
html.hw .wlt-quick.active { background: var(--hw-a10); border-color: var(--hw-a35); }

html.hw .g-stat-bg,
html.hw .wlt-hero-grid {
  background-image: linear-gradient(rgba(255,122,26,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,122,26,.05) 1px, transparent 1px);
}
html.hw .cs-badge   { background: var(--hw-a20); }
html.hw .cs-section { background: radial-gradient(circle at top center, rgba(255,122,26,.07) 0%, transparent 60%); }

/* ---------- 5. Полосы онлайна в мониторинге: огонь → фиолетовый ---------- */
html.hw .server_online > .progress .bg-success,
html.hw .server_online > .progress .bg-warning,
html.hw .server_online > .progress .bg-danger {
  background: linear-gradient(90deg, #ff5e00 0%, #ffb347 55%, #9b4dff 100%) !important;
  box-shadow: 0 0 10px rgba(255,122,26,.5);
}

/* ---------- 6. Кнопки светятся ---------- */
html.hw .btn-primary,
html.hw .btn-buy,
html.hw .cs-btn,
html.hw .wlt-pay-btn { box-shadow: 0 0 18px rgba(255,122,26,.35); }

html.hw ::selection { background: #ff7a1a; color: #1a0c00; }
html.hw ::-webkit-scrollbar-thumb { background: #3a2a44; }
html.hw #nprogress .bar { background: linear-gradient(90deg, #ff5e00, #ffb347); }

/* =========================================================
   КНОПКА-ТЫКВА
   ========================================================= */
.social_btn:has(.hw-toggle) { gap: 10px; align-items: center; }

.hw-toggle {
  position: relative;
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--divider, #272024);
  transition: transform .2s, border-color .3s;
}
/* свечение — отдельным слоем, анимируется только opacity (дёшево) */
.hw-toggle::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: 0 0 22px rgba(255,122,26,.75), inset 0 0 12px rgba(255,122,26,.25);
  opacity: 0; pointer-events: none;
}
.hw-toggle svg {
  width: 24px; height: 24px; max-width: none !important;
  filter: grayscale(.85) brightness(.75);
  transition: filter .4s, transform .3s;
}
.hw-toggle:hover svg { filter: grayscale(.15) brightness(1); transform: rotate(-8deg) scale(1.08); }

.hw-toggle .p-stem  { fill: #5b8c32 !important; }
.hw-toggle .p-side  { fill: #d9590b !important; }
.hw-toggle .p-mid   { fill: #ff8a1f !important; }
.hw-toggle .hw-face { fill: #2a1200 !important; transition: fill .4s; }

html.hw .hw-toggle          { border-color: rgba(255,122,26,.6); }
html.hw .hw-toggle::after   { animation: hw-glow 2.4s ease-in-out infinite; }
html.hw .hw-toggle svg      { filter: none; }
html.hw .hw-toggle .hw-face { fill: #ffe066 !important; }
.hw-toggle.hw-pop svg       { animation: hw-pop .45s ease; }

.hw-toggle--float {
  position: fixed; left: 16px; bottom: 16px; z-index: 1002;
  width: 46px; height: 46px; border-radius: 50%;
  background: #1a1a1a;
}
.hw-toggle--float svg { width: 28px; height: 28px; }

@keyframes hw-glow { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hw-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35) rotate(-12deg); }
  70%  { transform: scale(.9) rotate(6deg); }
  100% { transform: scale(1); }
}

/* ---------- уведомление при переключении ---------- */
.hw-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1003;
  transform: translate(-50%, 20px); opacity: 0;
  padding: 11px 18px; border-radius: 12px;
  background: #1c1520; color: #fff;
  border: 1px solid rgba(255,122,26,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 22px rgba(255,122,26,.25);
  font: 600 13px Montserrat, sans-serif; white-space: nowrap;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.hw-toast.show { opacity: 1; transform: translate(-50%, 0); }
.hw-toast--off { background: #1c1a1c; border-color: #272024; box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* =========================================================
   ЭФФЕКТЫ: паутина, паук, мыши, призраки, угольки, туман
   ========================================================= */
#hw-fx {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 998;
  overflow: hidden;
  contain: strict;                    /* браузер не пересчитывает остальную страницу */
}
#hw-fx svg { max-width: none !important; height: auto; display: block; }
html.hw-paused #hw-fx, html.hw-paused #hw-fx * { animation-play-state: paused !important; }

/* паутина */
.hw-web {
  position: absolute; top: 0; right: 0;
  width: 230px; height: 230px;
  color: rgba(255,255,255,.14);
  animation: hw-fade 1.2s ease both;
}
.hw-web svg { width: 100%; height: 100%; }
.hw-web svg * { fill: none !important; stroke: currentColor !important; stroke-width: .8; }
.hw-web--l {
  right: auto; left: 220px;
  width: 150px; height: 150px;
  transform: scaleX(-1);
  color: rgba(255,255,255,.09);
}

/* ---------- паук на нитке ---------- */
.hw-spider {
  position: absolute; top: 0; left: 60%;
  width: 64px; height: 1px; margin-left: -32px;
  transform-origin: 50% 0;
  animation: hw-swing 5s ease-in-out infinite;
}
.hw-thread {
  position: absolute; top: 0; left: 50%;
  width: 1px; height: 300px; margin-left: -.5px;
  background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.55));
  transform-origin: 50% 0;
  transform: scaleY(0);
  will-change: transform;
}
.hw-spbot {
  position: absolute; top: 0; left: 0; width: 64px;
  transform: translate3d(0,-70px,0);
  will-change: transform;
}
.hw-spsway { animation: hw-spin 3.2s ease-in-out infinite; transform-origin: 50% 8%; }
.hw-spider svg { width: 64px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); }

.hw-spider .s-legs  { fill: none !important; stroke: #2c1b36 !important; stroke-width: 2.6; stroke-linecap: round; }
.hw-spider .s-legs  { transform-box: view-box; transform-origin: 30px 34px; }
.hw-spider .s-legL  { animation: hw-legL .45s ease-in-out infinite alternate; }
.hw-spider .s-legR  { animation: hw-legR .45s ease-in-out infinite alternate; }
.hw-spider .s-grad  { fill: url(#hwSpG) !important; stroke: rgba(255,122,26,.35) !important; stroke-width: .6; }
.hw-spider .s-mark  { fill: #ff7a1a !important; }
.hw-spider .s-hl    { fill: #ffffff !important; fill-opacity: .18 !important; }
.hw-spider .s-glow  { fill: #ff7a1a !important; fill-opacity: .28 !important; }
.hw-spider .s-eye   { fill: #ffc06a !important; }
.hw-spider .s-pupil { fill: #1a0f22 !important; }
.hw-spider .s-eye2  { fill: #ff7a1a !important; }
.hw-spider .s-fang  { fill: none !important; stroke: #ffb347 !important; stroke-width: 1.2; stroke-linecap: round; }
.hw-spider .s-eye, .hw-spider .s-pupil { transform-box: fill-box; transform-origin: center; animation: hw-blink 5s infinite; }

/* вспышка, которую паук «выпускает» внизу */
.hw-burst { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.hw-burst i {
  position: absolute; left: -3px; top: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #ffe08a 0%, #ff7a1a 55%, rgba(255,122,26,0) 70%);
  animation: hw-spark .9s ease-out both;
}
.hw-burst b {
  position: absolute; left: -36px; top: -36px;
  width: 72px; height: 72px; border-radius: 50%;
  border: 1px solid rgba(255,180,90,.7);
  animation: hw-ring .8s ease-out both;
}

/* ---------- летучие мыши ---------- */
.hw-bat { position: absolute; left: 0; top: 0; width: 44px; will-change: transform; }
.hw-bat svg { width: 100%; transform-origin: 50% 40%; animation: hw-flap .2s ease-in-out infinite alternate; }
.hw-bat svg * { fill: #4a2d63 !important; }

/* ---------- призраки ---------- */
.hw-ghost {
  position: absolute; left: 0; top: 0;
  opacity: 0; will-change: transform, opacity;
  filter: drop-shadow(0 0 14px rgba(205,185,255,.6));
}
.hw-ghost .g-inner { animation: hw-bob 2.6s ease-in-out infinite; }
.hw-ghost svg      { width: 100%; overflow: visible; }
.hw-ghost .g-body  { fill: #f5f0ff !important; fill-opacity: .93 !important; }
.hw-ghost .g-dark  { fill: #1a0f22 !important; }
.hw-ghost .g-shine { fill: #ffffff !important; }
.hw-ghost .g-cheek { fill: #ff9ec4 !important; fill-opacity: .45 !important; }
.hw-ghost .g-eyes  { transform-box: fill-box; transform-origin: center; animation: hw-blink 4.2s infinite; }
.hw-ghost .g-mouth { transform-box: fill-box; transform-origin: center; animation: hw-boo 3s ease-in-out infinite; }

/* ---------- угольки (без box-shadow — дешевле) ---------- */
.hw-ember {
  position: absolute; bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe08a 0%, #ff8a1f 40%, rgba(255,122,26,0) 70%);
  opacity: 0;
  will-change: transform, opacity;
  animation: hw-rise linear infinite;
}

/* ---------- туман (без filter: blur — дешевле) ---------- */
.hw-fog {
  position: absolute; left: -50%; bottom: -40px;
  width: 200%; height: 240px;
  background:
    radial-gradient(40% 60% at 20% 70%, rgba(155,77,255,.16), transparent 70%),
    radial-gradient(35% 55% at 55% 75%, rgba(255,122,26,.08), transparent 70%),
    radial-gradient(40% 60% at 85% 70%, rgba(155,77,255,.13), transparent 70%);
  will-change: transform;
  animation: hw-drift 30s linear infinite alternate;
}

@keyframes hw-fade  { from { opacity: 0; } }
@keyframes hw-swing { 0%,100% { transform: rotate(2.5deg); } 50% { transform: rotate(-2.5deg); } }
@keyframes hw-spin  { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes hw-legL  { from { transform: rotate(-5deg); } to { transform: rotate(4deg); } }
@keyframes hw-legR  { from { transform: rotate(5deg); } to { transform: rotate(-4deg); } }
@keyframes hw-spark {
  0%   { transform: translate(0,0) scale(1.4); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; }
}
@keyframes hw-ring  { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes hw-flap  { to { transform: scaleY(.35); } }
@keyframes hw-bob   { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes hw-blink { 0%,90%,100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes hw-boo   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35,1.5); } }
@keyframes hw-rise  {
  0%   { transform: translate3d(0,0,0); opacity: 0; }
  10%  { opacity: .9; }
  100% { transform: translate3d(var(--dx, 0px), -105vh, 0); opacity: 0; }
}
@keyframes hw-drift { to { transform: translate3d(25%,0,0); } }

@media (max-width: 768px) {
  .hw-web { width: 140px; height: 140px; }
  .hw-spider svg { width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  #hw-fx * { animation: none !important; }
  .hw-spider, .hw-bat, .hw-ember, .hw-ghost { display: none; }
}