/* ============================================================================
   Playerok / FunPay — Halloween seasonal overlay.
   Loaded AFTER redesign-2026.css, so it wins the cascade. Visual only:
   no markup/JS logic changes. It just re-paints the --rd-* palette to a
   pumpkin+witch scheme (the ambient orbs & accents inherit it automatically)
   and adds a cheap, pointer-events:none decoration layer (cobwebs + bats).
   Everything is gated behind html.floor-skin so it never touches a non-themed
   page, and heavy motion is disabled for reduced-motion / low-perf devices.
   Remove the two <link>/<script> tags in index.html to roll it back.
   ============================================================================ */

/* ---- palette: tyква-orange + ведьма-purple on a near-black night --------- */
html.floor-skin,
html.floor-skin[data-app="playerok"],
html.floor-skin[data-app="funpay"] {
  --rd-accent: #ff7518;          /* pumpkin */
  --rd-accent-2: #8b3df2;        /* witch purple */
  --rd-accent-3: #7bf04a;        /* eerie slime green */
  --rd-accent-ink: #1a0d02;
  --rd-accent-rgb: 255, 117, 24;
  --rd-accent2-rgb: 139, 61, 242;

  --rd-bg-0: #07040c;
  --rd-bg-1: #0d0816;
  --rd-bg-2: #160d24;

  --rd-glow: 0 12px 44px rgba(var(--rd-accent-rgb), 0.5);
}

/* Night-sky canvas with a low pumpkin glow rising from the bottom. */
html.floor-skin body {
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(var(--rd-accent2-rgb), 0.22), transparent 60%),
    radial-gradient(120% 80% at 0% 0%, rgba(var(--rd-accent-rgb), 0.20), transparent 55%),
    radial-gradient(140% 60% at 50% 118%, rgba(255, 117, 24, 0.16), transparent 62%),
    linear-gradient(180deg, var(--rd-bg-1) 0%, var(--rd-bg-0) 60%, #04020a 100%) !important;
}

/* Make the third ambient orb green so the aurora reads as spooky, not neon-blue. */
html.floor-skin #pk-ambient .pk-orb.o3 {
  background: radial-gradient(circle at 50% 50%, rgba(123, 240, 74, 0.42), transparent 68%) !important;
}

/* Text selection + accents in pumpkin. */
html.floor-skin ::selection { background: rgba(255, 117, 24, 0.38); color: #fff; }

/* ---- decoration layer (injected by halloween.js) ------------------------ */
#pk-hw {
  position: fixed;
  inset: 0;
  z-index: 2147483000;        /* above app chrome, below Telegram's own UI */
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* Cobwebs tucked into the two top corners. */
#pk-hw .pk-web {
  position: absolute;
  top: 0;
  width: 128px;
  height: 128px;
  opacity: 0.5;
  color: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}
#pk-hw .pk-web.r { right: 0; transform: scaleX(-1); }
#pk-hw .pk-web.l { left: 0; }

/* Crafted SVG art — crisp at any size. */
#pk-hw .pk-art { display: block; width: 100%; height: 100%; overflow: visible; }

/* Thread + hanging spider under the left web. */
#pk-hw .pk-thread {
  position: absolute;
  top: 0;
  left: 58px;
  width: 1px;
  height: 52px;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08));
}
#pk-hw .pk-spider-hang {
  position: absolute;
  top: 44px;
  left: 44px;
  width: 30px;
  height: 29px;
  transform-origin: top center;
  will-change: transform;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
}

/* Drifting critters: the wrapper handles the cross-screen path & per-item size. */
#pk-hw .pk-fly {
  position: absolute;
  left: 0;
  will-change: transform;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.5));
}
#pk-hw .pk-fly--bat     { width: 46px; height: 23px; }
#pk-hw .pk-fly--ghost   { width: 30px; height: 37px; filter: drop-shadow(0 0 11px rgba(139, 61, 242, 0.55)); }
#pk-hw .pk-fly--pumpkin { width: 36px; height: 32px; filter: drop-shadow(0 0 10px rgba(255, 117, 24, 0.5)); }

/* Pumpkin candle glow behind the carved face. */
#pk-hw .pk-pumpkin__face { filter: drop-shadow(0 0 4px rgba(255, 190, 60, 0.9)); }

@media (prefers-reduced-motion: no-preference) {
  #pk-hw .pk-spider-hang {
    animation: pk-hw-dangle 4.6s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  }
  #pk-hw .pk-fly {
    animation: pk-hw-cross var(--dur, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
  }
  /* Wings fold toward the body for a flap. */
  #pk-hw .pk-bat__wing { transform-box: fill-box; animation: pk-hw-flap 0.46s ease-in-out infinite alternate; }
  #pk-hw .pk-bat__wing--r { transform-origin: left center; }
  #pk-hw .pk-bat__wing--l { transform-origin: right center; }
  #pk-hw .pk-pumpkin__face { animation: pk-hw-flicker 2.6s steps(1, end) infinite; }
}

@keyframes pk-hw-dangle {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50%      { transform: translateY(7px) rotate(7deg); }
}

/* Fly from off-screen left to off-screen right with a gentle bob. Scale per item. */
@keyframes pk-hw-cross {
  0%   { transform: translate(-16vw, 0) rotate(-4deg) scale(var(--scale, 1)); }
  25%  { transform: translate(18vw, -24px) rotate(4deg) scale(var(--scale, 1)); }
  50%  { transform: translate(50vw, 6px) rotate(-3deg) scale(var(--scale, 1)); }
  75%  { transform: translate(82vw, -20px) rotate(4deg) scale(var(--scale, 1)); }
  100% { transform: translate(120vw, 0) rotate(-4deg) scale(var(--scale, 1)); }
}

@keyframes pk-hw-flap {
  from { transform: scaleX(1)    scaleY(1); }
  to   { transform: scaleX(0.72) scaleY(1.1); }
}

@keyframes pk-hw-flicker {
  0%, 100% { opacity: 1;    filter: drop-shadow(0 0 5px rgba(255, 190, 60, 0.95)); }
  45%      { opacity: 0.82; filter: drop-shadow(0 0 3px rgba(255, 190, 60, 0.7)); }
  60%      { opacity: 1;    filter: drop-shadow(0 0 6px rgba(255, 200, 70, 1)); }
  70%      { opacity: 0.88; filter: drop-shadow(0 0 3px rgba(255, 190, 60, 0.7)); }
}

/* Keep decoration from fighting the reader on tiny screens. */
@media (max-height: 560px) {
  #pk-hw .pk-web { width: 96px; height: 96px; }
}

/* Telegram WebView: blur, mix-blend and infinite motion drop the app to ~10fps. */
html.perf-lite #pk-ambient,
html.perf-lite #pk-glow,
html.perf-lite #pk-hw .pk-fly,
html.perf-lite #pk-hw .pk-spider-hang,
html.perf-lite #pk-hw .pk-thread,
html.perf-lite #floor-fx {
  display: none !important;
}
html.perf-lite.floor-skin .home-dashboard,
html.perf-lite.floor-skin.fp-liquid #p-home .home-dashboard {
  transform: none !important;
  transition: none !important;
  filter: none !important;
  box-shadow: none !important;
}
html.perf-lite.floor-skin .home-dashboard::before,
html.perf-lite.floor-skin .home-dashboard::after,
html.perf-lite.floor-skin .auth__duck::before,
html.perf-lite.floor-skin .auth__duck::after,
html.perf-lite.floor-skin .tab-create::after {
  display: none !important;
  animation: none !important;
}
html.perf-lite.floor-skin .ios-card,
html.perf-lite.floor-skin .profile-card,
html.perf-lite.floor-skin .wallet-method,
html.perf-lite.floor-skin .nav-row,
html.perf-lite.floor-skin .home-quick__tile,
html.perf-lite.floor-skin .deal-cell,
html.perf-lite.floor-skin .subcard,
html.perf-lite.floor-skin .pk-chat-row,
html.perf-lite.floor-skin .home-promo,
html.perf-lite.floor-skin .segment,
html.perf-lite.floor-skin .top-header,
html.perf-lite.floor-skin .tabbar,
html.perf-lite.floor-skin .sheet,
html.perf-lite.floor-skin .home-menu__card,
html.perf-lite.floor-skin .nav-list,
html.perf-lite.floor-skin .wallet-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  filter: none !important;
}