/* v116 «Хэллоуин»: the owner's objects on the windows and the desktop
   (markup: halloween.js). Everything moves with transform and opacity only,
   nothing takes clicks, and everything stops for reduced motion. */

/* ── the theme itself: windows, title bars, the wall of the archive ── */
[data-theme='halloween'] .win { border-color: rgba(190, 120, 255, 0.16); }
[data-theme='halloween'] .win.is-active { box-shadow: var(--shadow-win), 0 0 0 1px rgba(255, 122, 26, 0.18), 0 0 46px rgba(123, 63, 184, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
[data-theme='halloween'] .win-bar { background: linear-gradient(90deg, #1e1126, #23122a 55%, #2b1520); border-bottom-color: rgba(255, 122, 26, 0.16); }
[data-theme='halloween'] .sw-bg {
  background:
    radial-gradient(60% 50% at 50% 0, rgba(123, 63, 184, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(10, 6, 14, 0.1), rgba(10, 6, 14, 0.5)),
    url('/assets/halloween/wall.webp?v=1') center / cover #150d18;
}
[data-theme='halloween'] .sw-bg::after { opacity: 0.25; }
[data-theme='halloween'] .sw-lamp { background: radial-gradient(closest-side, rgba(255, 140, 40, 0.17), rgba(255, 110, 30, 0.05) 55%, transparent); }

/* desktop icons: the owner's Halloween set; a hover makes them jump */
[data-theme='halloween'] .desk-icon .app-glyph { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(255, 120, 30, 0.12)); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-theme='halloween'] .desk-icon:hover .app-glyph { animation: hw-hop 620ms cubic-bezier(0.3, 0.7, 0.4, 1); }
}
@keyframes hw-hop { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-7px) rotate(-6deg); } 55% { transform: translateY(0) rotate(4deg) scale(1.04, 0.96); } 75% { transform: translateY(-2px) rotate(-2deg); } 100% { transform: translateY(0) rotate(0); } }

/* the taskbar pumpkin (replaces the drawn one of the old theme) */
[data-theme='halloween'] .taskbar::before {
  content: ''; position: absolute; right: 214px; top: -26px; width: 36px; height: 33px; pointer-events: none;
  background: url('/assets/halloween/pumpkin.webp?v=1') no-repeat center bottom / contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
}
[data-theme='halloween'] .taskbar::after {
  content: ''; position: absolute; right: 196px; top: -44px; width: 72px; height: 60px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 130, 30, 0.42), rgba(255, 100, 20, 0.12) 55%, transparent);
  animation: hw-candle 2.3s infinite;
}

/* ── window decorations ─────────────────────────────────── */
.hw, .hw-back { position: absolute; inset: 0; pointer-events: none; }
.hw-back { z-index: -1; }
:where(.hw, .hw-back, .hw-desk) img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }

/* the picture of the section, sitting on the top edge left of the buttons */
.hw-mascot { position: absolute; top: -22px; right: 134px; width: 66px; height: 66px; transform-origin: 50% 90%; filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.55)); }
.hw-mascot img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.win.is-max .hw-mascot { top: 2px; right: 134px; width: 38px; height: 38px; }
.hw-halo { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.7;
  background: radial-gradient(closest-side, rgba(255, 168, 60, 0.6), rgba(255, 120, 30, 0.2) 55%, transparent); }
.hw-a-glow .hw-halo { background: radial-gradient(closest-side, rgba(170, 110, 255, 0.6), rgba(123, 63, 184, 0.2) 55%, transparent); }
.hw-a-flicker .hw-halo { background: radial-gradient(closest-side, rgba(255, 220, 120, 0.7), rgba(255, 170, 60, 0.22) 55%, transparent); }
.hw-glint { position: absolute; inset: 0;
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 250, 225, 0.9) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; }

/* a cobweb in a corner of the window, swaying a little */
.hw-web { position: absolute; width: 100px; height: 100px; opacity: 0.5; }
.hw-web.is-tl { top: 0; left: 0; transform-origin: 0 0; }
.hw-web.is-tr { top: 0; right: 0; transform-origin: 100% 0; }
.hw-web.is-bl { bottom: 0; left: 0; transform-origin: 0 100%; }
.hw-web.is-br { bottom: 0; right: 0; transform-origin: 100% 100%; }
.hw-web.is-tr img { transform: scaleX(-1); }
.hw-web.is-bl img { transform: scaleY(-1); }
.hw-web.is-br img { transform: scale(-1, -1); }
.win.is-max .hw-web.is-tl, .win.is-max .hw-web.is-tr { top: 42px; }

/* a spider lowers itself from the title bar now and then */
.hw-spider { position: absolute; top: 42px; left: var(--x, 50%); width: 26px; margin-left: -13px; height: 0; }
.hw-spider i { position: absolute; left: 50%; top: 0; width: 1px; height: 120px; margin-left: -0.5px; transform-origin: 50% 0; transform: scaleY(0); background: linear-gradient(rgba(255, 245, 255, 0.6), rgba(255, 245, 255, 0.28)); }
.hw-spider img { position: absolute; left: 0; top: 0; width: 26px; opacity: 0; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6)); }

/* pumpkins on the bottom edge */
.hw-pumpkins { position: absolute; left: 22px; bottom: -15px; display: flex; align-items: flex-end; }
.hw-pk { position: relative; width: 54px; }
.hw-pk.is-small { width: 36px; margin-left: -8px; }
.hw-pk img { position: relative; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.55)); }
.hw-pk-glow { position: absolute; left: 50%; top: 58%; width: 230%; height: 200%; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.8;
  background: radial-gradient(closest-side, rgba(255, 140, 30, 0.42), rgba(255, 100, 20, 0.13) 55%, transparent); }
.win.is-max .hw-pumpkins { bottom: 6px; }

/* a lantern standing on the title bar */
.hw-lantern { position: absolute; top: -50px; left: 31%; width: 23px; transform-origin: 50% 100%; }
.hw-lantern img { position: relative; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.hw-lantern .hw-pk-glow { top: 50%; width: 360%; height: 170%; }

/* a mug of hot tea on the bottom edge, steam rising */
.hw-mug { position: absolute; right: -16px; bottom: -16px; width: 60px; }
.hw-mug-cup { position: relative; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.55)); }
.hw .hw-steam { position: absolute; left: 22%; bottom: 72%; width: 22px; opacity: 0; transform-origin: 50% 100%; }
.hw .hw-steam.is-2 { left: 40%; }
.win.is-max .hw-mug { right: 18px; bottom: 6px; }

/* sparkles around the cup of «Зрители» */
.hw-sparkles { position: absolute; top: -28px; right: 124px; width: 86px; height: 74px; }
.hw-sparkles i { position: absolute; width: 12px; height: 12px; opacity: 0; transform: scale(0.3);
  background: radial-gradient(closest-side, #fff7d6, rgba(255, 220, 120, 0) 70%), conic-gradient(from 45deg, transparent 0 20%, #ffd76a 22% 28%, transparent 30% 45%, #ffd76a 47% 53%, transparent 55% 70%, #ffd76a 72% 78%, transparent 80% 95%, #ffd76a 97%);
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent); mask: radial-gradient(closest-side, #000 60%, transparent); }
.hw-sparkles i:nth-child(1) { left: 4px; top: 10px; }
.hw-sparkles i:nth-child(2) { left: 70px; top: 4px; width: 9px; height: 9px; }
.hw-sparkles i:nth-child(3) { left: 76px; top: 46px; }
.hw-sparkles i:nth-child(4) { left: 0; top: 50px; width: 8px; height: 8px; }
.hw-sparkles i:nth-child(5) { left: 38px; top: -4px; width: 10px; height: 10px; }
.win.is-max .hw-sparkles { display: none; }

/* mist over the top of the window */
.hw-fog { position: absolute; left: 0; right: 0; top: 42px; height: 120px; overflow: hidden; opacity: 0.32; mix-blend-mode: screen; border-radius: 0 0 0 0; }
.hw-fog img { position: absolute; top: -10px; width: 70%; left: 0; }
.hw-fog img + img { left: 50%; transform: scaleX(-1); }

/* a bat circling near the picture */
.hw-bat { position: absolute; top: -38px; right: 214px; width: 40px; height: 20px; }
.hw-bat img { transform-origin: 50% 40%; }
.win.is-max .hw-bat { top: 8px; }

/* a ghost peeking from behind the window (it looks left; on the left side
   it is turned round) */
.hw-peek { position: absolute; right: -66px; top: 30%; width: 96px; --dir: 1; }
.hw-peek.is-left { right: auto; left: -66px; top: 22%; --dir: -1; }

/* bats bursting out of a window that opens */
.hw-burst { position: absolute; left: 50%; top: 2px; width: 76px; margin-left: -38px; opacity: 0; pointer-events: none; }

/* a word over the desktop («Бу!») */
.hw-say { position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; font: 400 34px/1 'Rubik Wet Paint', var(--font-display); color: #fff1e0; text-shadow: 0 0 14px rgba(255, 122, 26, 0.9), 0 3px 0 #2a0f00; }

/* ── on the desktop ─────────────────────────────────────── */
.hw-note-pk { position: absolute; right: -18px; bottom: -20px; width: 54px; pointer-events: none; }
.hw-note-pk img { position: relative; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.5)); }
.hw-neon-web { position: absolute; left: -2px; top: -2px; width: 80px; pointer-events: none; }
.hw-neon-web > img { opacity: 0.45; }
.hw-spider.is-desk { top: 100%; pointer-events: none; }
.hw-start-web { position: absolute; top: 0; right: 0; width: 92px; opacity: 0.3; transform: scaleX(-1); pointer-events: none; z-index: 2; }

/* ── motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hw-a-clap { animation: hw-clap 5.5s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; transform-origin: 30% 90%; }
  .hw-a-shine, .hw-a-float { animation: hw-float 4.6s ease-in-out infinite; }
  .hw-a-shine .hw-glint { animation: hw-glint 4.2s ease-in-out infinite; }
  .hw-a-flap { animation: hw-flap 3.2s ease-in-out infinite; }
  .hw-a-swing { animation: hw-swing 3.8s ease-in-out infinite; transform-origin: 50% 0; }
  .hw-a-wobble { animation: hw-wobble 4.4s ease-in-out infinite; }
  .hw-a-tv { animation: hw-float 5.2s ease-in-out infinite; }
  .hw-a-tv .hw-halo { animation: hw-tv 3.4s infinite; }
  .hw-a-beat { animation: hw-beat 1.5s cubic-bezier(0.2, 0.8, 0.3, 1) infinite; }
  .hw-a-bob { animation: hw-bob 3.6s ease-in-out infinite; }
  .hw-a-glow { animation: hw-float 5s ease-in-out infinite; }
  .hw-a-glow .hw-halo { animation: hw-pulse 3s ease-in-out infinite; }
  .hw-a-brush { animation: hw-brush 3.4s ease-in-out infinite; transform-origin: 20% 90%; }
  .hw-a-ring { animation: hw-ring 5s ease-in-out infinite; transform-origin: 70% 30%; }
  .hw-a-flicker { animation: hw-float 4.8s ease-in-out infinite; }
  .hw-a-flicker .hw-halo { animation: hw-bulb 4.2s infinite; }
  .hw-a-shake { animation: hw-shake 6s ease-in-out infinite; transform-origin: 50% 100%; }
  .hw-web { animation: hw-web 7s ease-in-out infinite; }
  .hw-spider i { animation: hw-thread 17s var(--d, 0s) ease-in-out infinite; }
  .hw-spider img { animation: hw-drop 17s var(--d, 0s) ease-in-out infinite; }
  .hw-pk-glow { animation: hw-candle 2.3s infinite; }
  .hw-pk.is-small .hw-pk-glow { animation-delay: -1.1s; }
  .hw-lantern { animation: hw-sway 4s ease-in-out infinite; }
  .hw .hw-steam { animation: hw-steam 4.6s linear infinite; }
  .hw .hw-steam.is-2 { animation-delay: -2.3s; }
  .hw-sparkles i { animation: hw-twinkle 2.6s ease-in-out infinite; }
  .hw-sparkles i:nth-child(2) { animation-delay: -0.6s; }
  .hw-sparkles i:nth-child(3) { animation-delay: -1.3s; }
  .hw-sparkles i:nth-child(4) { animation-delay: -1.9s; }
  .hw-sparkles i:nth-child(5) { animation-delay: -2.2s; }
  .hw-fog img { animation: hw-fog 26s linear infinite; }
  .hw-fog img + img { animation: hw-fog-2 26s linear infinite; }
  .hw-bat { animation: hw-batfly 10s ease-in-out infinite; }
  .hw-bat img { animation: hw-wings 0.22s ease-in-out infinite alternate; }
  .hw-peek { animation: hw-peek 16s ease-in-out infinite; }
  .hw-note-pk .hw-pk-glow { animation: hw-candle 2.3s infinite; }
  /* a window being dragged or still opening keeps still */
  .win.is-dragging .hw *, .win.is-min .hw *, .win.is-min .hw-back * { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-spider, .hw-peek, .hw-burst, .hw-say { display: none; }
  .hw-peek { transform: translateX(calc(var(--dir) * -84px)); }
  [data-theme='halloween'] .taskbar::after { animation: none; }
}

@keyframes hw-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes hw-clap { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-12deg) translateY(-4px); } 78% { transform: rotate(4deg); } 82% { transform: rotate(-1.5deg); } 86% { transform: rotate(0); } }
@keyframes hw-glint { 0%, 50% { background-position: 130% 0; } 80%, 100% { background-position: -30% 0; } }
@keyframes hw-flap { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(-4px) scale(0.93, 1.04); } 40% { transform: translateY(-1px) scale(1.04, 0.97); } 60% { transform: translateY(-5px) scale(0.94, 1.03); } 80% { transform: translateY(-2px) scale(1, 1); } }
@keyframes hw-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes hw-wobble { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-4px); } }
@keyframes hw-tv { 0%, 100% { opacity: 0.7; } 8% { opacity: 0.25; } 9% { opacity: 0.8; } 40% { opacity: 0.65; } 41% { opacity: 0.2; } 43% { opacity: 0.85; } 70% { opacity: 0.6; } }
@keyframes hw-beat { 0% { transform: scale(1.06) rotate(-3deg); } 25% { transform: scale(1) rotate(-1deg); } 50% { transform: scale(1.06) rotate(3deg); } 75% { transform: scale(1) rotate(1deg); } 100% { transform: scale(1.06) rotate(-3deg); } }
@keyframes hw-bob { 0%, 100% { transform: translateY(0) rotate(3deg); } 33% { transform: translateY(-6px) rotate(-2deg); } 66% { transform: translateY(-2px) rotate(-4deg); } }
@keyframes hw-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.85; } }
@keyframes hw-brush { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
@keyframes hw-ring { 0%, 76%, 100% { transform: rotate(0); } 79% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 85% { transform: rotate(9deg); } 88% { transform: rotate(-6deg); } 91% { transform: rotate(3deg); } 94% { transform: rotate(0); } }
@keyframes hw-bulb { 0%, 100% { opacity: 0.85; } 4% { opacity: 0.15; } 6% { opacity: 0.9; } 9% { opacity: 0.3; } 11% { opacity: 0.85; } 52% { opacity: 0.8; } 54% { opacity: 0.2; } 55% { opacity: 0.9; } }
@keyframes hw-shake { 0%, 84%, 100% { transform: translateX(0) rotate(0); } 86% { transform: translateX(-3px) rotate(-4deg); } 88% { transform: translateX(3px) rotate(4deg); } 90% { transform: translateX(-3px) rotate(-3deg); } 92% { transform: translateX(2px) rotate(2deg); } 94% { transform: translateX(0) rotate(0); } }
@keyframes hw-web { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(1.5deg) scale(1.03); } }
@keyframes hw-thread { 0%, 55% { transform: scaleY(0); } 64% { transform: scaleY(0.74); } 68% { transform: scaleY(0.64); } 72%, 84% { transform: scaleY(0.68); } 94%, 100% { transform: scaleY(0); } }
@keyframes hw-drop {
  0%, 55% { transform: translateY(-22px) rotate(0); opacity: 0; }
  57% { opacity: 1; }
  64% { transform: translateY(84px) rotate(0); }
  68% { transform: translateY(72px) rotate(0); }
  72% { transform: translateY(77px) rotate(-10deg); }
  76% { transform: translateY(77px) rotate(9deg); }
  80% { transform: translateY(77px) rotate(-6deg); }
  84% { transform: translateY(77px) rotate(0); opacity: 1; }
  93% { transform: translateY(-14px) rotate(0); opacity: 1; }
  95%, 100% { transform: translateY(-22px); opacity: 0; }
}
@keyframes hw-candle { 0%, 100% { opacity: 0.78; } 18% { opacity: 0.55; } 33% { opacity: 0.92; } 49% { opacity: 0.62; } 68% { opacity: 1; } 84% { opacity: 0.7; } }
@keyframes hw-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes hw-steam { 0% { transform: translateY(8px) scale(0.55, 0.45); opacity: 0; } 22% { opacity: 0.55; } 70% { opacity: 0.3; } 100% { transform: translateY(-46px) scale(1.05, 1.1); opacity: 0; } }
@keyframes hw-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 45% { opacity: 1; transform: scale(1.1) rotate(45deg); } 60% { opacity: 0.9; transform: scale(0.9) rotate(60deg); } }
@keyframes hw-fog { from { transform: translateX(-60%); } to { transform: translateX(100%); } }
@keyframes hw-fog-2 { from { transform: translateX(-130%) scaleX(-1); } to { transform: translateX(40%) scaleX(-1); } }
@keyframes hw-batfly {
  0%, 100% { transform: translate(0, 0) scaleX(1); }
  25% { transform: translate(-46px, -14px) scaleX(1); }
  49% { transform: translate(-80px, 4px) scaleX(1); }
  51% { transform: translate(-80px, 4px) scaleX(-1); }
  75% { transform: translate(-30px, 16px) scaleX(-1); }
  99% { transform: translate(0, 0) scaleX(-1); }
}
@keyframes hw-wings { from { transform: scaleY(1); } to { transform: scaleY(0.35) translateY(4px); } }
@keyframes hw-peek {
  0%, 48% { transform: translateX(calc(var(--dir) * -84px)) scaleX(var(--dir)) rotate(0); }
  56% { transform: translateX(0) scaleX(var(--dir)) rotate(7deg); }
  62% { transform: translateX(calc(var(--dir) * -4px)) translateY(-6px) scaleX(var(--dir)) rotate(4deg); }
  70% { transform: translateX(calc(var(--dir) * 2px)) translateY(0) scaleX(var(--dir)) rotate(8deg); }
  78%, 100% { transform: translateX(calc(var(--dir) * -84px)) scaleX(var(--dir)) rotate(0); }
}

/* ── phones: every window is the whole screen ───────────── */
@media (max-width: 759px) {
  .hw-mascot, .win.is-max .hw-mascot { top: calc(env(safe-area-inset-top) + 7px); right: 10px; width: 38px; height: 38px; }
  .hw-spider { top: calc(52px + env(safe-area-inset-top)); }
  .hw-web { width: 76px; height: 76px; opacity: 0.4; }
  .win.is-max .hw-web.is-tl, .win.is-max .hw-web.is-tr { top: calc(52px + env(safe-area-inset-top)); }
  .hw-pumpkins, .hw-mug, .hw-lantern, .hw-sparkles, .hw-bat, .hw-back, .hw-burst { display: none; }
  .hw-fog { top: calc(52px + env(safe-area-inset-top)); }
  [data-theme='halloween'] .taskbar::before, [data-theme='halloween'] .taskbar::after { display: none; }
  .hw-note-pk { display: none; }
}

/* ══ v118: inside the windows ═══════════════════════════════
   The owner: «слабо оформлено под хэллоуин… мало деталей». Until new art
   arrives — the colours of Halloween in the content itself (pumpkin
   orange, witch purple, slime green, parchment instead of white paper)
   and the objects we already have (bats, pumpkins, ghost, cobwebs,
   spider) placed inside. Same rules: transform/opacity motion only. */

/* ── the night wall (Киноархив, карточка, Заказы, Записи, Соц сети, Эфир,
   Прочти меня, Предложка, Корзина) ── */
[data-theme='halloween'] .sw { --sw-paper: #ecdbb6; --sw-tape: #f3a24c; --sw-ink: #1e1209; --sw-text-2: #d8c4a2; --sw-text-3: #a08a6c; }
/* sprayed titles drip with slime */
[data-theme='halloween'] :is(.sw-stencil, .sw-drip) { color: #bff26e; text-shadow: 0 0 2px rgba(200, 255, 120, 0.7), 0 0 20px rgba(120, 255, 60, 0.28), 0 3px 0 rgba(20, 40, 5, 0.6); }
/* the tabs of the archive: pumpkin tape, the open one is witch purple */
[data-theme='halloween'] .sw-tapes button.is-on { background: #8a45f0; color: #fff; }
/* parchment: the flyer «Кино с чатом», flyers of «Заказы», scraps of the bin */
[data-theme='halloween'] :is(.sw-flyer, .sa-flyer, .sa-gig.g2) { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), inset 0 0 34px rgba(120, 66, 14, 0.38); }
[data-theme='halloween'] .sw-flyer::after { /* a spider sitting on the corner of the flyer */
  content: ''; position: absolute; right: 18px; bottom: 16px; width: 34px; height: 34px; pointer-events: none;
  background: url('/assets/halloween/spider.webp?v=1') center / contain no-repeat; transform: rotate(-24deg); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45)); }
/* lined sheets (Прочти меня, Предложка, the note of a title card) become
   old parchment with an orange margin and brown lines */
[data-theme='halloween'] .sa-sheet {
  background:
    radial-gradient(55% 35% at 88% 8%, rgba(140, 80, 20, 0.16), transparent 70%),
    radial-gradient(45% 30% at 8% 96%, rgba(120, 60, 15, 0.2), transparent 70%),
    linear-gradient(90deg, transparent 44px, rgba(230, 110, 30, 0.6) 44px 46px, transparent 46px),
    repeating-linear-gradient(180deg, #f0e1c0 0 31px, rgba(120, 78, 36, 0.22) 31px 32px), #f0e1c0;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7), inset 0 0 46px rgba(110, 60, 15, 0.35); }
[data-theme='halloween'] .sw-note {
  background:
    radial-gradient(55% 35% at 88% 8%, rgba(140, 80, 20, 0.16), transparent 70%),
    radial-gradient(45% 30% at 8% 96%, rgba(120, 60, 15, 0.2), transparent 70%),
    linear-gradient(90deg, transparent 42px, rgba(230, 110, 30, 0.6) 42px 44px, transparent 44px),
    repeating-linear-gradient(180deg, #f0e1c0 0 31px, rgba(120, 78, 36, 0.22) 31px 32px), #f0e1c0;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7), inset 0 0 46px rgba(110, 60, 15, 0.35); }
[data-theme='halloween'] :is(.sa-sheet, .sw-note)::after { /* a dusty cobweb in the top corner of the sheet */
  content: ''; position: absolute; right: 0; top: 0; width: 96px; height: 96px; pointer-events: none; opacity: 0.32;
  background: url('/assets/halloween/cobweb.webp?v=1') center / contain no-repeat; transform: scaleX(-1); filter: brightness(0.2) sepia(1); }
[data-theme='halloween'] :is(.sa-sheet h3, .sa-sheet a, .sa-idea-field > span, .sa-scrap small) { color: #b8460b; }
[data-theme='halloween'] .sa-sheet button { background: linear-gradient(transparent 58%, rgba(255, 140, 40, 0.5) 58%); }
[data-theme='halloween'] .sa-idea-field :is(textarea, input) { background: rgba(255, 248, 232, 0.8); border-color: rgba(90, 50, 15, 0.35); }
[data-theme='halloween'] .sa-idea-field :is(textarea, input):focus { box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.28); }
[data-theme='halloween'] .sa-sign { color: #4b1a7a; }
/* «Заказы»: the price board turns into a dark slate under a cobweb */
[data-theme='halloween'] .sa-price {
  background: url('/assets/halloween/cobweb.webp?v=1') left top / 120px no-repeat, linear-gradient(135deg, #2e2236, #1c1423 45%, #2a1f31 70%, #150f1a);
  box-shadow: inset 0 0 0 3px #4a3354, inset 0 0 34px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 40px rgba(255, 122, 26, 0.12); }
[data-theme='halloween'] .sa-price-row strong { text-shadow: 0 0 14px rgba(255, 122, 26, 0.55); }
[data-theme='halloween'] .sa-price-title { color: #bff26e; text-shadow: 0 0 12px rgba(140, 255, 70, 0.35); }
[data-theme='halloween'] .sa-ads-rules { position: relative; }
[data-theme='halloween'] .sa-ads-rules::after { /* pumpkins at the foot of the board */
  content: ''; position: absolute; left: calc(50% - 64px); bottom: -22px; width: 64px; height: 58px; pointer-events: none;
  background: url('/assets/halloween/pumpkin.webp?v=1') center / contain no-repeat; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 120, 20, 0.45)); }
/* «Соц сети»: the electrical box is old purple iron with a cobweb */
[data-theme='halloween'] .sa-box {
  background: url('/assets/halloween/cobweb.webp?v=1') right top / 130px no-repeat, repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 6px), linear-gradient(135deg, #3d2b47, #2a1d33 50%, #392841);
  box-shadow: inset 0 0 0 4px #24182b, inset 0 0 50px rgba(0, 0, 0, 0.45), 0 24px 50px rgba(0, 0, 0, 0.5); }
[data-theme='halloween'] .sa-warn { background: #ff8a2a; }
[data-theme='halloween'] .sa-box::after { /* a bat asleep on the box */
  content: ''; position: absolute; left: 22px; bottom: 18px; width: 70px; height: 24px; pointer-events: none; opacity: 0.9;
  background: url('/assets/halloween/bat.webp?v=1') center / contain no-repeat; transform: rotate(-8deg); }
/* «Статистика»: parchment cards, a cobweb over the chart */
[data-theme='halloween'] .tm { --tm-paper: #ecdcb8; }
[data-theme='halloween'] .tm-graph-box { position: relative; }
[data-theme='halloween'] .tm-graph-box::after {
  content: ''; position: absolute; right: 0; top: 0; width: 110px; height: 110px; pointer-events: none; opacity: 0.3;
  background: url('/assets/halloween/cobweb.webp?v=1') center / contain no-repeat; transform: scaleX(-1); filter: brightness(0.2) sepia(1); }

/* ── «Зрители»: a stage under the moon ── */
[data-theme='halloween'] .vw {
  --violet: #9b4dff; --cyan: #8be04e;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(200, 180, 255, 0.2), transparent 62%),
    radial-gradient(820px 600px at 105% 105%, rgba(255, 110, 20, 0.17), transparent 60%),
    radial-gradient(700px 500px at -10% 75%, rgba(120, 220, 80, 0.07), transparent 60%),
    linear-gradient(180deg, #140a1e, #0b0610 70%); }
[data-theme='halloween'] .vw::before { /* the lattice becomes bats and little stars */
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23f6c343'%3E%3Cpath d='M60 58c4-5 10-7 17-6-3 2-3 5-1 7 4-2 8-2 11 0-5 1-7 4-7 8-3-3-7-3-10 0-1-3-4-4-6-3-1 1-3 3-4 5-1-2-3-4-4-5-2-1-5 0-6 3-3-3-7-3-10 0 0-4-2-7-7-8 3-2 7-2 11 0 2-2 2-5-1-7 7-1 13 1 17 6z'/%3E%3Cpath d='M18 14l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Cpath d='M98 92l1.5 4.5 4.5 1.5-4.5 1.5-1.5 4.5-1.5-4.5-4.5-1.5 4.5-1.5z'/%3E%3C/g%3E%3C/svg%3E"); }
[data-theme='halloween'] .vw-beam { background: linear-gradient(180deg, rgba(225, 212, 255, 0.24), rgba(150, 110, 255, 0.06) 55%, transparent 80%); }
/* bats crossing the stage now and then */
[data-theme='halloween'] .vw-stage::before, [data-theme='halloween'] .vw-stage::after {
  content: ''; position: absolute; left: -80px; top: 18%; width: 64px; height: 24px; opacity: 0;
  background: url('/assets/halloween/bat.webp?v=1') center / contain no-repeat; }
[data-theme='halloween'] .vw-stage::after { top: 34%; width: 44px; height: 17px; }
/* the flags: pumpkin, witch and slime, with a cobweb in the corner */
[data-theme='halloween'] .vw-place.p1 .vw-flag { --f1: #ff7a1a; --f2: #7a2600; }
[data-theme='halloween'] .vw-place.p2 .vw-flag { --f1: #8a4dff; --f2: #2a0f5c; }
[data-theme='halloween'] .vw-place.p3 .vw-flag { --f1: #4fb83a; --f2: #133d12; }
[data-theme='halloween'] .vw-flag::before {
  background: url('/assets/halloween/cobweb.webp?v=1') left top / 78px no-repeat, radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.2), transparent 60%), linear-gradient(180deg, var(--f1), var(--f2)); }
[data-theme='halloween'] :is(.vw-flag-vip, .vw-vip-strip .vw-gem) { filter: hue-rotate(-60deg) saturate(1.2); }
[data-theme='halloween'] .vw-vip-strip { border-color: rgba(255, 122, 26, 0.55); box-shadow: 0 0 30px rgba(255, 110, 20, 0.12), inset 0 0 30px rgba(155, 77, 255, 0.12); }
/* the bar «Ты»: a pumpkin-lantern instead of gold */
[data-theme='halloween'] .vw-me:not(.is-guest) {
  background: url('/assets/halloween/cobweb.webp?v=1') left top / 54px no-repeat padding-box, linear-gradient(180deg, #ffc27a, #ff8a2a 55%, #cf560c) padding-box, linear-gradient(90deg, #9b4dff, #ffd27a, #8be04e) border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 120, 20, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* ── «Видео на стрим»: a Halloween test card, a cobweb on the TV ── */
[data-theme='halloween'] .yv {
  --violet: #9b4dff; --cyan: #8be04e; --mint: #8be04e;
  background:
    radial-gradient(900px 520px at 26% -10%, rgba(255, 110, 20, 0.18), transparent 62%),
    radial-gradient(820px 600px at 110% 24%, rgba(155, 77, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #160a1f, #0b0611 74%); }
[data-theme='halloween'] .yv-test-bars { background: linear-gradient(90deg, #efe3c8 0 14.29%, #ffb02e 0 28.57%, #8be04e 0 42.86%, #ff7a1a 0 57.14%, #9b4dff 0 71.43%, #c2245a 0 85.71%, #3a1a5c 0); }
[data-theme='halloween'] .yv-tv-body::before { background: radial-gradient(closest-side, rgba(255, 120, 20, 0.28), transparent); }
[data-theme='halloween'] .yv-tv-body::after {
  content: ''; position: absolute; left: -2px; top: -2px; width: 120px; height: 120px; pointer-events: none; z-index: 3; opacity: 0.55;
  background: url('/assets/halloween/cobweb.webp?v=1') left top / contain no-repeat; }

/* ── «Что нового»: moonlight, an orange shadow under the number, a ghost ── */
[data-theme='halloween'] .up {
  background:
    radial-gradient(760px 420px at 18% -8%, rgba(200, 180, 255, 0.16), transparent 62%),
    radial-gradient(700px 520px at 105% 40%, rgba(255, 110, 20, 0.12), transparent 60%),
    linear-gradient(180deg, #150a1d, #0b0611 74%); }
[data-theme='halloween'] .up-num { text-shadow: 0.05em 0.05em 0 #ff7a1a, 0 0 40px rgba(255, 122, 26, 0.35); }
[data-theme='halloween'] .up-node { background: #ff7a1a; box-shadow: 0 0 0 4px #150a1c, 0 0 12px rgba(255, 122, 26, 0.6); }
[data-theme='halloween'] .up-ver { position: relative; }
[data-theme='halloween'] .up-ver::after { /* a little ghost floats by the version */
  content: ''; position: absolute; left: 80%; top: -16px; width: 44px; height: 43px; pointer-events: none; opacity: 0.85;
  background: url('/assets/halloween/ghost.webp?v=1') center / contain no-repeat; filter: drop-shadow(0 0 12px rgba(220, 200, 255, 0.45)); }

/* ── Rudify: every cover gets Halloween colours and a little guest ── */
[data-theme='halloween'] .rf-card:nth-child(4n + 1) .rf-cover { --c1: #ff7a1a !important; --c2: #3b0f5e !important; }
[data-theme='halloween'] .rf-card:nth-child(4n + 2) .rf-cover { --c1: #8a45f0 !important; --c2: #120818 !important; }
[data-theme='halloween'] .rf-card:nth-child(4n + 3) .rf-cover { --c1: #4fb83a !important; --c2: #1d0b2a !important; }
[data-theme='halloween'] .rf-card:nth-child(4n) .rf-cover { --c1: #c2245a !important; --c2: #2b0a12 !important; }
[data-theme='halloween'] .rf-cover::after {
  content: ''; position: absolute; left: 9%; top: 9%; width: 34%; aspect-ratio: 1; pointer-events: none;
  background: url('/assets/halloween/pumpkin.webp?v=1') center / contain no-repeat; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
[data-theme='halloween'] .rf-card:nth-child(4n + 2) .rf-cover::after { background-image: url('/assets/halloween/ghost.webp?v=1'); }
[data-theme='halloween'] .rf-card:nth-child(4n + 3) .rf-cover::after { background-image: url('/assets/halloween/bat.webp?v=1'); width: 46%; }
[data-theme='halloween'] .rf-card:nth-child(4n) .rf-cover::after { background-image: url('/assets/halloween/spider.webp?v=1'); width: 28%; }
[data-theme='halloween'] .rf-cover.is-small::after { display: none; }

@media (prefers-reduced-motion: no-preference) {
  [data-theme='halloween'] .vw-stage::before { animation: hw-stagebat 13s linear infinite 2s; }
  [data-theme='halloween'] .vw-stage::after { animation: hw-stagebat 17s linear infinite 8s; }
  [data-theme='halloween'] .up-ver::after { animation: hw-float 4.2s ease-in-out infinite; }
  [data-theme='halloween'] .sw-flyer::after { animation: hw-crawl 9s ease-in-out infinite; }
  [data-theme='halloween'] .rf-card:hover .rf-cover::after { animation: hw-hop 620ms cubic-bezier(0.3, 0.7, 0.4, 1); }
}
@keyframes hw-stagebat {
  0% { transform: translate(0, 0) scaleY(1); opacity: 0; }
  3% { opacity: 0.9; }
  12% { transform: translate(28cqw, -30px) scaleY(0.4); }
  24% { transform: translate(56cqw, 10px) scaleY(1); }
  36% { transform: translate(84cqw, -24px) scaleY(0.45); }
  44% { transform: translate(110cqw, 0) scaleY(1); opacity: 0.9; }
  45%, 100% { transform: translate(110cqw, 0); opacity: 0; }
}
@keyframes hw-crawl { 0%, 60%, 100% { transform: rotate(-24deg) translate(0, 0); } 70% { transform: rotate(-10deg) translate(-14px, -6px); } 80% { transform: rotate(-30deg) translate(-8px, -12px); } 90% { transform: rotate(-24deg) translate(0, 0); } }

/* ══ v119: the owner's second set (RudySayuki-Halloween-Extras-v2) ═══════
   A branch with a lantern over the corner of every window, a garland
   along the title bar, a raven, a sleeping bat, candles, a cauldron, a cat
   behind the window, a broom across the screen; Halloween frames, candy
   confetti and a witch-hat gem in «Зрители»; the test card of the TV;
   parchment, wax seals; covers of Rudify. */

/* the branch takes the place of the little icon of the window */
[data-theme='halloween'] .win-bar > .app-glyph { opacity: 0; }
.hw-branch { position: absolute; left: -24px; top: -24px; width: 150px; height: 150px; transform-origin: 17% 17%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.hw-branch > img { position: relative; }
.hw-branch-glow { position: absolute; left: 28.5%; top: 29%; width: 70px; height: 70px; translate: -50% -50%; border-radius: 50%; opacity: 0.8;
  background: radial-gradient(closest-side, rgba(255, 150, 40, 0.5), rgba(255, 110, 20, 0.14) 55%, transparent); }

/* a garland between the title and the picture of the section */
.hw-garland { position: absolute; top: -1px; left: 216px; right: 210px; height: 42px; transform-origin: 50% 0;
  background: url('/assets/halloween/garland.webp?v=1') left top / auto 100% repeat-x; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45)); }
.hw-garland.has-raven { right: 258px; }

/* a raven sitting on the title bar, now and then it flies off and comes back */
.hw-raven { position: absolute; top: -6px; right: 204px; width: 48px; height: 48px; }
.hw-raven img { position: absolute; inset: 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); }
.hw-raven .is-fly { opacity: 0; }

/* a bat asleep under the title bar; it wakes up for a moment */
.hw-hang { position: absolute; top: 41px; left: var(--x, 80%); width: 34px; height: 51px; margin-left: -17px; transform-origin: 50% 0; }
.hw-hang-bat, .hw-hang-bat img { position: absolute; inset: 0; }
.hw-hang-bat img { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.5)); }
.hw-hang-bat .is-awake { opacity: 0; }

/* candles on the bottom edge, three flames */
.hw-candles { position: absolute; left: 20px; bottom: -14px; width: 80px; height: 80px; }
.hw-candles > img { position: relative; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55)); }
.hw-candle-glow { position: absolute; left: 50%; top: 20%; width: 220%; height: 160%; translate: -50% -50%; border-radius: 50%; opacity: 0.75;
  background: radial-gradient(closest-side, rgba(255, 190, 90, 0.4), rgba(255, 140, 40, 0.12) 55%, transparent); }
.hw-flame { position: absolute; width: 10%; height: 20%; translate: -50% -94%; transform-origin: 50% 100%;
  background: url('/assets/halloween/flame.webp?v=1') center bottom / contain no-repeat; filter: drop-shadow(0 0 4px rgba(255, 190, 80, 0.9)); }
.hw-flame.f1 { left: 24%; top: 50%; } .hw-flame.f2 { left: 50%; top: 10.5%; } .hw-flame.f3 { left: 79%; top: 32.5%; }
.win.is-max .hw-candles { bottom: 6px; }

/* a cauldron with a bubbling brew */
.hw-cauldron { position: absolute; right: -16px; bottom: -14px; width: 76px; height: 66px; }
.hw-cauldron.is-left { right: auto; left: 18px; }
.hw-cauldron .hw-pot { position: relative; width: 100%; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55)); }
.hw-brew-glow { position: absolute; left: 50%; top: 10%; width: 150%; height: 90%; translate: -50% -50%; border-radius: 50%; opacity: 0.7;
  background: radial-gradient(closest-side, rgba(140, 255, 90, 0.4), rgba(155, 77, 255, 0.16) 55%, transparent); }
.hw .hw-cauldron .hw-steam { left: 38%; bottom: 70%; width: 20px; }
.hw-bubble { position: absolute; top: 14%; width: 9px; height: 9px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #eaffd0, #8be04e 45%, rgba(80, 160, 40, 0.2) 70%); }
.hw-bubble.b2 { left: 48%; width: 7px; height: 7px; background: radial-gradient(circle at 35% 30%, #f1dcff, #b277ff 45%, rgba(120, 60, 200, 0.2) 70%); }
.hw-bubble.b1 { left: 30%; } .hw-bubble.b3 { left: 62%; width: 6px; height: 6px; } .hw-bubble.b4 { left: 40%; width: 5px; height: 5px; }
.win.is-max .hw-cauldron { right: 14px; bottom: 6px; }
.win.is-max .hw-cauldron.is-left { left: 18px; }

/* a black cat behind the right edge of the window */
.hw-back .hw-cat { position: absolute; left: calc(100% - 2px); top: 46%; width: 82px; }

/* a witch's broom across the screen (above the windows, under the taskbar) */
.hw-broom { position: absolute; left: 0; top: 13%; z-index: 20; width: 230px; pointer-events: none; opacity: 0; }
.hw-broom img { display: block; width: 100%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }

/* ── «Зрители»: Halloween frames, candy confetti, the witch-hat gem ── */
[data-theme='halloween'] .vw-pfp.is-podium .vw-pframe { visibility: hidden; }
[data-theme='halloween'] .vw-pfp.is-podium::after {
  content: ''; position: absolute; left: -8%; top: -5.5%; width: 116%; height: 116%; pointer-events: none;
  background: url('/assets/halloween/frame-gold.webp?v=1') center / contain no-repeat; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.55)); }
[data-theme='halloween'] .vw-pfp.is-podium.p2::after { background-image: url('/assets/halloween/frame-silver.webp?v=1'); }
[data-theme='halloween'] .vw-pfp.is-podium.p3::after { background-image: url('/assets/halloween/frame-bronze.webp?v=1'); }
[data-theme='halloween'] .vw-pfp.is-podium::before { /* the place, a coin on the ring */
  content: '1'; position: absolute; z-index: 1; left: 78%; top: 76%; width: 30px; height: 30px; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center;
  font: 800 16px/1 var(--font); color: #2a1400; background: radial-gradient(circle at 35% 30%, #fff1b8, #f6c343 55%, #b27a12); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(80, 40, 0, 0.35); }
[data-theme='halloween'] .vw-pfp.is-podium.p2::before { content: '2'; background: radial-gradient(circle at 35% 30%, #ffffff, #cfd3e6 55%, #7c819e); }
[data-theme='halloween'] .vw-pfp.is-podium.p3::before { content: '3'; color: #fff3e6; background: radial-gradient(circle at 35% 30%, #ffc69a, #c4692e 55%, #6e3412); }
[data-theme='halloween'] .vw-pfp.is-podium.p1::after { z-index: 2; }
[data-theme='halloween'] .vw-pfp.is-podium::before { z-index: 3; }
[data-theme='halloween'] .vw-gem { background: url('/assets/halloween/vip-gem.webp?v=1') center / contain no-repeat; }
[data-theme='halloween'] .vw-gem > * { display: none; }
[data-theme='halloween'] :is(.vw-flag-vip, .vw-vip-strip .vw-gem) { filter: none; }
[data-theme='halloween'] .vw-vip-strip .vw-gem { font-size: 34px; }
[data-theme='halloween'] .vw-flag-vip { background: linear-gradient(180deg, #ecd6ff, #9b4dff 55%, #4b1680); text-shadow: 0 1px 2px rgba(40, 0, 60, 0.6); }
[data-theme='halloween'] .vw-confetti i { width: 24px; height: 24px; border-radius: 0; clip-path: none; background: url('/assets/halloween/c-corn.webp?v=1') center / contain no-repeat; opacity: 1; }
[data-theme='halloween'] .vw-confetti i:nth-child(8n + 2) { background-image: url('/assets/halloween/c-lolly.webp?v=1'); }
[data-theme='halloween'] .vw-confetti i:nth-child(8n + 3) { width: 30px; background-image: url('/assets/halloween/c-bat.webp?v=1'); }
[data-theme='halloween'] .vw-confetti i:nth-child(8n + 4) { width: 28px; background-image: url('/assets/halloween/c-candy.webp?v=1'); }
[data-theme='halloween'] .vw-confetti i:nth-child(8n + 5) { background-image: url('/assets/halloween/c-pumpkin.webp?v=1'); }
[data-theme='halloween'] .vw-confetti i:nth-child(8n + 6) { background-image: url('/assets/halloween/c-bone.webp?v=1'); }
[data-theme='halloween'] .vw-confetti i:nth-child(8n + 7) { width: 20px; height: 20px; background-image: url('/assets/halloween/c-eye.webp?v=1'); }
[data-theme='halloween'] .vw-confetti i:nth-child(8n) { width: 20px; height: 20px; background-image: url('/assets/halloween/c-star.webp?v=1'); }

/* ── «Видео на стрим»: the owner's test card ── */
[data-theme='halloween'] .yv-test { background: #130a1a url('/assets/halloween/tv-card.webp?v=1') center / cover no-repeat; }
[data-theme='halloween'] :is(.yv-test-bars, .yv-test-strip, .yv-test-grid) { display: none; }
[data-theme='halloween'] .yv-test-disc:not(:has(b.is-site)) { display: none; }

/* ── parchment texture and wax seals ── */
[data-theme='halloween'] :is(.sa-flyer, .sa-gig.g2) { background-image: url('/assets/halloween/parchment.webp?v=1'); background-size: 256px; }
[data-theme='halloween'] .sw-flyer { background-image: linear-gradient(103deg, transparent 31%, rgba(0, 0, 0, 0.05) 32.5%, transparent 34.5%), linear-gradient(-78deg, transparent 56%, rgba(0, 0, 0, 0.06) 57.5%, transparent 59.5%), url('/assets/halloween/parchment.webp?v=1'); background-size: auto, auto, 256px; }
[data-theme='halloween'] .sa-scrap { background: linear-gradient(115deg, rgba(0, 0, 0, 0.07) 0 12%, transparent 12% 30%, rgba(0, 0, 0, 0.06) 30% 44%, transparent 44% 66%, rgba(0, 0, 0, 0.08) 66% 80%, transparent 80%), url('/assets/halloween/parchment.webp?v=1') 0 0 / 256px, var(--sw-paper); }
[data-theme='halloween'] .tm :is(.tm-graph-box, .tm-kpis > div, .tm-lower > section) { background-image: url('/assets/halloween/parchment.webp?v=1'); background-size: 256px; }
[data-theme='halloween'] .sa-sheet {
  background:
    radial-gradient(55% 35% at 88% 8%, rgba(140, 80, 20, 0.14), transparent 70%),
    radial-gradient(45% 30% at 8% 96%, rgba(120, 60, 15, 0.18), transparent 70%),
    linear-gradient(90deg, transparent 44px, rgba(230, 110, 30, 0.6) 44px 46px, transparent 46px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(120, 78, 36, 0.22) 31px 32px),
    url('/assets/halloween/parchment.webp?v=1') 0 0 / 256px, #f0e1c0; }
[data-theme='halloween'] .sw-note {
  background:
    radial-gradient(55% 35% at 88% 8%, rgba(140, 80, 20, 0.14), transparent 70%),
    radial-gradient(45% 30% at 8% 96%, rgba(120, 60, 15, 0.18), transparent 70%),
    linear-gradient(90deg, transparent 42px, rgba(230, 110, 30, 0.6) 42px 44px, transparent 44px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(120, 78, 36, 0.22) 31px 32px),
    url('/assets/halloween/parchment.webp?v=1') 0 0 / 256px, #f0e1c0; }
/* a wax seal on the sheets, the flyers and one of the scraps */
[data-theme='halloween'] :is(.sa-sheet, .sw-note, .sw-flyer, .sa-flyer)::before {
  content: ''; position: absolute; right: -14px; bottom: -14px; width: 58px; height: 58px; pointer-events: none; z-index: 2;
  background: url('/assets/halloween/seal-pumpkin.webp?v=1') center / contain no-repeat; transform: rotate(-12deg); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4)); }
[data-theme='halloween'] .sw-flyer::before { right: 18px; top: 32%; bottom: auto; background-image: url('/assets/halloween/seal-bat.webp?v=1'); transform: rotate(10deg); }
[data-theme='halloween'] .sw-note::before { background-image: url('/assets/halloween/seal-skull.webp?v=1'); }
[data-theme='halloween'] .sa-flyer::before { right: 14px; top: 14px; bottom: auto; width: 46px; height: 46px; }
[data-theme='halloween'] .sa-flyer:nth-child(3n + 2)::before { background-image: url('/assets/halloween/seal-bat.webp?v=1'); transform: rotate(14deg); }
[data-theme='halloween'] .sa-flyer:nth-child(3n)::before { background-image: url('/assets/halloween/seal-skull.webp?v=1'); transform: rotate(-4deg); }
[data-theme='halloween'] .sa-scrap:nth-child(2)::after {
  content: ''; position: absolute; right: 10px; bottom: 8px; width: 38px; height: 38px; pointer-events: none;
  background: url('/assets/halloween/seal-skull.webp?v=1') center / contain no-repeat; transform: rotate(8deg); }

/* ── Rudify: the owner's covers for eight stations ── */
[data-theme='halloween'] .rf-cover:is([data-st='phonk'], [data-st='lofi'], [data-st='synth'], [data-st='lush'], [data-st='sd90'], [data-st='russianhits'], [data-st='rusradio'], [data-st='paradise']) {
  background: url('/assets/halloween/rudify/phonk.webp?v=1') center / cover no-repeat; }
[data-theme='halloween'] .rf-cover[data-st='lofi'] { background-image: url('/assets/halloween/rudify/lofi.webp?v=1'); }
[data-theme='halloween'] .rf-cover[data-st='synth'] { background-image: url('/assets/halloween/rudify/synth.webp?v=1'); }
[data-theme='halloween'] .rf-cover[data-st='lush'] { background-image: url('/assets/halloween/rudify/lush.webp?v=1'); }
[data-theme='halloween'] .rf-cover[data-st='sd90'] { background-image: url('/assets/halloween/rudify/sd90.webp?v=1'); }
[data-theme='halloween'] .rf-cover[data-st='russianhits'] { background-image: url('/assets/halloween/rudify/russianhits.webp?v=1'); }
[data-theme='halloween'] .rf-cover[data-st='rusradio'] { background-image: url('/assets/halloween/rudify/rusradio.webp?v=1'); }
[data-theme='halloween'] .rf-cover[data-st='paradise'] { background-image: url('/assets/halloween/rudify/paradise.webp?v=1'); }
[data-theme='halloween'] .rf-cover:is([data-st='phonk'], [data-st='lofi'], [data-st='synth'], [data-st='lush'], [data-st='sd90'], [data-st='russianhits'], [data-st='rusradio'], [data-st='paradise'])::after {
  display: block; left: 0 !important; top: auto !important; bottom: 0; width: 100% !important; height: 55%; aspect-ratio: auto; filter: none;
  background: linear-gradient(180deg, transparent, rgba(8, 3, 12, 0.78)) !important; animation: none !important; }
[data-theme='halloween'] .rf-cover:is([data-st='phonk'], [data-st='lofi'], [data-st='synth'], [data-st='lush'], [data-st='sd90'], [data-st='russianhits'], [data-st='rusradio'], [data-st='paradise']) :is(.rf-cover-grooves) { display: none; }
[data-theme='halloween'] .rf-cover b { z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hw-branch { animation: hw-branch 7s ease-in-out infinite; }
  .hw-branch-glow, .hw-candle-glow { animation: hw-candle 2.3s infinite; }
  .hw-garland { animation: hw-garland 6s ease-in-out infinite; }
  .hw-raven { animation: hw-raven 26s ease-in-out infinite; }
  .hw-raven .is-sit { animation: hw-raven-sit 26s step-end infinite; }
  .hw-raven .is-fly { animation: hw-raven-fly 26s step-end infinite; }
  .hw-hang { animation: hw-hang 4.4s ease-in-out infinite; }
  .hw-hang-bat .is-awake { animation: hw-wake 15s ease-in-out infinite; }
  .hw-flame { animation: hw-flame 0.9s ease-in-out infinite alternate; }
  .hw-flame.f2 { animation-duration: 1.1s; animation-delay: -0.4s; }
  .hw-flame.f3 { animation-duration: 0.8s; animation-delay: -0.2s; }
  .hw-brew-glow { animation: hw-pulse 2.8s ease-in-out infinite; }
  .hw .hw-cauldron .hw-steam { animation: hw-steam 4s linear infinite; }
  .hw-bubble { animation: hw-bubble 2.2s ease-in infinite; }
  .hw-bubble.b2 { animation-delay: -0.6s; } .hw-bubble.b3 { animation-delay: -1.3s; } .hw-bubble.b4 { animation-delay: -1.8s; animation-duration: 1.7s; }
  .hw-back .hw-cat { animation: hw-cat 19s ease-in-out infinite 3s; }
  .hw-broom { animation: hw-broom 46s linear infinite 9s; }
  .hw-broom img { animation: hw-broom-bob 1.3s ease-in-out infinite alternate; }
  .win.is-dragging .hw *, .win.is-min .hw *, .win.is-min .hw-back * { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .hw-broom, .hw-back .hw-cat, .hw-bubble { display: none; }
}
@keyframes hw-branch { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.6deg); } }
@keyframes hw-garland { 0%, 100% { transform: rotate(-0.25deg); } 50% { transform: rotate(0.25deg) translateY(1px); } }
@keyframes hw-raven {
  0%, 62% { transform: translate(0, 0) rotate(0); opacity: 1; }
  30% { transform: translate(0, 0) rotate(-4deg); }
  33% { transform: translate(0, 0) rotate(0); }
  64% { transform: translate(2px, -3px) rotate(0); opacity: 1; }
  74% { transform: translate(-110px, -120px) scale(0.8); opacity: 0; }
  84% { transform: translate(120px, -120px) scale(0.8); opacity: 0; }
  95% { transform: translate(0, -4px) scale(1); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes hw-raven-sit { 0% { opacity: 1; } 63% { opacity: 0; } 96% { opacity: 1; } }
@keyframes hw-raven-fly { 0% { opacity: 0; } 63% { opacity: 1; } 96% { opacity: 0; } }
@keyframes hw-hang { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes hw-wake { 0%, 58%, 82%, 100% { opacity: 0; } 62%, 78% { opacity: 1; } }
@keyframes hw-flame { from { transform: scale(0.92, 1) rotate(-3deg); opacity: 0.9; } to { transform: scale(1.06, 1.12) rotate(3deg); opacity: 1; } }
@keyframes hw-bubble { 0% { transform: translateY(6px) scale(0.4); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(-18px) scale(1); opacity: 0.9; } 100% { transform: translateY(-22px) scale(1.5); opacity: 0; } }
@keyframes hw-cat {
  0%, 52% { transform: translateX(-90px); }
  60% { transform: translateX(0) rotate(0); }
  66% { transform: translateX(-4px) rotate(-6deg); }
  74% { transform: translateX(0) rotate(4deg); }
  82%, 100% { transform: translateX(-90px) rotate(0); }
}
@keyframes hw-broom {
  0% { transform: translate(-260px, 0) rotate(-4deg); opacity: 0; }
  0.5% { opacity: 1; }
  5% { transform: translate(40vw, -30px) rotate(3deg); }
  10% { transform: translate(calc(100vw + 40px), 10px) rotate(-3deg); opacity: 1; }
  10.5%, 100% { transform: translate(calc(100vw + 60px), 10px); opacity: 0; }
}
@keyframes hw-broom-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }

@media (max-width: 759px) {
  .hw-branch, .hw-raven, .hw-candles, .hw-cauldron, .hw-back .hw-cat { display: none; }
  .hw-garland, .hw-garland.has-raven { top: calc(env(safe-area-inset-top) + 5px); left: 58%; right: 54px; height: 40px; }
  .hw-hang { top: calc(52px + env(safe-area-inset-top)); }
  .hw-broom { width: 150px; top: 22%; }
}

/* ══ v120: nothing hangs in the air (the owner: «гирлянда как будто в
   воздухе, надо на всю вкладку», «котёл, чашка, свечка в воздухе») ═══════
   The garland goes across the whole window, its cord tied to the two top
   corners; the candles, the cauldron, the mug and the pumpkins stand on
   little wooden shelves on iron brackets inside the window. */
.hw-garland, .hw-garland.has-raven { top: -13px; left: 0; right: 0; height: 30px; z-index: 0; transform-origin: 50% 0;
  background: url('/assets/halloween/garland.webp?v=1') left top / auto 100% round no-repeat; }
.win.is-max .hw-garland { top: 1px; height: 24px; }
.hw-mascot, .hw-raven, .hw-branch, .hw-sparkles, .hw-lantern { z-index: 1; }
@media (prefers-reduced-motion: no-preference) { .hw-garland { animation: hw-sag 6s ease-in-out infinite; } }
@keyframes hw-sag { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.07); } }

.hw-candles, .win.is-max .hw-candles { left: 26px; bottom: 25px; width: 70px; height: 70px; }
.hw-pumpkins, .win.is-max .hw-pumpkins { left: 26px; bottom: 25px; }
.hw-mug, .win.is-max .hw-mug { right: 28px; bottom: 25px; width: 54px; }
.hw-cauldron, .win.is-max .hw-cauldron { right: 28px; bottom: 25px; width: 70px; height: 60px; }
.hw-cauldron.is-left, .win.is-max .hw-cauldron.is-left { right: auto; left: 26px; }
/* the shelf: a plank with a warm edge and a shadow on the wall */
:is(.hw-candles, .hw-cauldron, .hw-mug, .hw-pumpkins)::after {
  content: ''; position: absolute; left: -14px; right: -14px; bottom: -10px; height: 10px; border-radius: 2px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #8a5a3a 0, #5e3a25 35%, #3a2416 100%);
  box-shadow: inset 0 1px 0 rgba(255, 205, 150, 0.28), 0 7px 12px rgba(0, 0, 0, 0.6); }
/* two iron brackets under the plank, fixed to the bottom edge of the window */
:is(.hw-candles, .hw-cauldron, .hw-mug, .hw-pumpkins)::before {
  content: ''; position: absolute; left: -6px; right: -6px; bottom: -25px; height: 15px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(135deg, #22150e 0 46%, transparent 50%) left top / 15px 15px no-repeat,
    linear-gradient(225deg, #22150e 0 46%, transparent 50%) right top / 15px 15px no-repeat; }
@media (max-width: 759px) {
  .hw-garland, .hw-garland.has-raven { top: env(safe-area-inset-top); left: 0; right: 0; height: 20px; }
}
/* the picture of the candles has an empty strip under the wax: they sit
   lower, the plank stays under the wax */
.hw-candles, .win.is-max .hw-candles { bottom: 18px; }
.hw-candles::after { bottom: -3px; }
.hw-candles::before { bottom: -18px; }

/* ══ v121: the garland stays inside the title bar (the owner: «в
   маленьком экране гирлянда за края выходит») ═══════════════════════════
   The cord runs along the top edge of the title bar, tied on the left to
   the branch over the corner and going on the right behind the picture of
   the section; the title moves down a little so the garland does not hide
   it. Nothing sticks out above the window. */
.hw-garland, .hw-garland.has-raven, .win.is-max .hw-garland { top: 0; left: 108px; right: 166px; height: 26px; }
[data-theme='halloween'] .win:has(.hw-garland) .win-title { transform: translateY(7px); }
@media (max-width: 759px) {
  .hw-garland, .hw-garland.has-raven, .win.is-max .hw-garland { top: env(safe-area-inset-top); left: 0; right: 30px; height: 20px; }
  [data-theme='halloween'] .win:has(.hw-garland) .win-title { transform: translateY(4px); }
}

/* v124: the ring answers a click only — a hand over it and a hint next to it
   for those who have never clicked it; the waltz: a note with «Выключить»,
   the notes button in the tray (round, in the corner, on a phone). */
.desktop.hw-on-ring { cursor: pointer; }
.hw-ring-hint {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
  padding: 7px 13px; border-radius: 12px;
  font: 600 14px/1.2 var(--font-ui, inherit); color: #ffe6bf;
  background: rgba(22, 10, 30, 0.9); border: 1px solid rgba(255, 186, 90, 0.55);
  box-shadow: 0 0 18px rgba(255, 150, 40, 0.35), 0 8px 24px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, calc(-100% - 26px));
  animation: hw-hint-in 420ms cubic-bezier(0.23, 1, 0.32, 1) both, hw-hint-bob 2.4s ease-in-out 420ms infinite;
  transition: opacity 300ms ease;
}
.hw-ring-hint::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: rgba(22, 10, 30, 0.9); border-right: 1px solid rgba(255, 186, 90, 0.55); border-bottom: 1px solid rgba(255, 186, 90, 0.55);
  transform: rotate(45deg);
}
.hw-ring-hint.is-gone { opacity: 0; }
@keyframes hw-hint-in { from { opacity: 0; transform: translate(-50%, calc(-100% - 14px)) scale(0.9); } }
@keyframes hw-hint-bob { 50% { transform: translate(-50%, calc(-100% - 32px)); } }
@media (prefers-reduced-motion: reduce) { .hw-ring-hint { animation: none; } }

.tray-bgm[hidden], .bgm-fab[hidden] { display: none !important; }
.tray-bgm { position: relative; color: #ffcf8a; }
.tray-bgm.is-off { color: var(--text-2); }
.tray-bgm.is-off .ico, .bgm-fab.is-off .ico { opacity: 0.55; }
.tray-bgm.is-off::after, .bgm-fab.is-off::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px;
  background: currentColor; border-radius: 2px; transform: rotate(-45deg);
}
.bgm-fab { display: none; }
@media (max-width: 759px) {
  .bgm-fab {
    display: flex; align-items: center; justify-content: center; position: absolute; z-index: 640;
    right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 42px; height: 42px; border-radius: 50%;
    color: #ffcf8a; font-size: 20px; background: rgba(22, 10, 30, 0.82); border: 1px solid rgba(255, 186, 90, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }
  .bgm-fab.is-off { color: var(--text-2); }
  .os.has-open-app .bgm-fab { display: none; }
}
.bgm-note {
  position: absolute; left: 16px; bottom: calc(var(--taskbar-h) + 14px); z-index: 850;
  max-width: 400px; padding: 12px 12px 12px 14px; border-radius: 12px;
  display: flex; gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-win);
  font-size: 13.5px;
  transition: opacity 200ms var(--ease-out), transform 260ms var(--ease-out);
}
.bgm-note[data-state='closed'] { opacity: 0; transform: translateY(12px); pointer-events: none; }
.bgm-note .bgm-ico { font-size: 22px; color: #ffcf8a; display: flex; }
.bgm-note p { margin: 0; flex: 1; min-width: 0; }
.bgm-note b { display: block; font-weight: 600; }
.bgm-note span { color: var(--text-2); }
.bgm-note .bgm-off {
  flex: none; height: 32px; padding: 0 12px; border-radius: 9px; font-weight: 600; font-size: 13px;
  color: #1a0d04; background: #ffb65c;
  transition: transform 140ms var(--ease-out), filter 140ms ease;
}
.bgm-note .bgm-off:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .bgm-note .bgm-off:hover { filter: brightness(1.08); } }
.bgm-note .bgm-x { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 16px; }
@media (max-width: 759px) {
  .bgm-note { left: 12px; right: 12px; max-width: none; bottom: auto; top: calc(12px + env(safe-area-inset-top)); }
  .bgm-note[data-state='closed'] { transform: translateY(-12px); }
}
/* the notes dance a little while the waltz plays */
.tray-bgm[data-playing='true'] .ico, .bgm-fab[data-playing='true'] .ico { animation: bgm-dance 1.8s ease-in-out infinite; }
@keyframes bgm-dance { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-1px); } }
@media (prefers-reduced-motion: reduce) { .tray-bgm .ico, .bgm-fab .ico { animation: none !important; } }