html.halloween {
  color-scheme: dark;
  --xp-bg: #2b2733;
  --xp-bg-dark: #221e2a;
  --xp-bg-hover: #3a3445;
  --xp-border-light: #4e475c;
  --xp-border-medium: #3a3445;
  --xp-border-dark: #15121c;
  --xp-border-shadow: #000;
  --xp-desktop-bg: #0b0a1a;
  --xp-border-blue: #6a4ab0;
  --xp-highlight: #3d2d63;
  --xp-highlight-strong: #4b3a78;
  --msn-sidebar: #5a3aa8;
  --msn-sidebar-light: #7a5cc4;
  --msn-gradient-start: #6a44c0;
  --msn-gradient-end: #4a2a90;
  --msn-border: #2e1660;
  --color-primary: #7b4fd6;
  --color-primary-dark: #5a3aa8;
  --color-primary-hover: #9a6ff0;
  --color-white: #dcd6e4;
  --color-gray-50: #2f2a38;
  --color-gray-100: #332e3c;
  --color-gray-150: #3a3445;
  --color-gray-200: #3f3949;
  --color-gray-250: #46404f;
  --color-gray-300: #4e475c;
  --color-gray-350: #5a526a;
  --color-gray-400: #8a8298;
  --color-gray-450: #9a92a8;
  --color-gray-500: #6b6478;
  --color-gray-600: #cfc8da;
  --color-gray-650: #d6d0e0;
  --color-gray-700: #e6e2ee;
  --color-gray-800: #f4f1f8;
  --color-black: #f4f1f8;
  --hint-bg: #3a2f1a;
}

html.halloween body {
  background-image: none;
  background-color: #0b0a1a;
  color: #e6e2ee;
}

#hw-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(180deg, #04020c 0%, #130a2a 40%, #2a1448 72%, #0e0a1d 100%); }
#hw-sky .hw-bliss { position: absolute; inset: 0; background: url(../bliss.jpg) center / cover no-repeat; filter: brightness(0.22) saturate(0.45); }
#hw-sky .hw-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(70, 25, 130, 0.35), rgba(20, 8, 50, 0.15) 55%, rgba(0, 0, 0, 0.55)); }
#hw-sky .hw-stars { position: absolute; inset: 0; background-image: radial-gradient(1.3px 1.3px at 14px 22px, rgba(255, 255, 255, 0.95) 50%, transparent 55%), radial-gradient(1px 1px at 70px 58px, rgba(255, 255, 255, 0.7) 50%, transparent 55%), radial-gradient(1.6px 1.6px at 128px 96px, rgba(255, 255, 255, 0.85) 50%, transparent 55%), radial-gradient(1px 1px at 180px 30px, rgba(255, 255, 255, 0.6) 50%, transparent 55%), radial-gradient(1.2px 1.2px at 230px 120px, rgba(255, 255, 255, 0.8) 50%, transparent 55%), radial-gradient(1px 1px at 96px 150px, rgba(255, 255, 255, 0.55) 50%, transparent 55%); background-size: 260px 170px; mask-image: linear-gradient(180deg, #000 35%, transparent 62%); -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 62%); animation: hw-twinkle 4s ease-in-out infinite alternate; }
#hw-sky .hw-moon { position: absolute; top: 8%; right: 13%; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 62% 30%, rgba(0, 0, 0, 0.08) 0 9px, transparent 10px), radial-gradient(circle at 35% 62%, rgba(0, 0, 0, 0.09) 0 14px, transparent 15px), radial-gradient(circle at 68% 68%, rgba(0, 0, 0, 0.07) 0 7px, transparent 8px), radial-gradient(circle at 40% 40%, #fff9d8, #efe3a6 60%, #d6c586); box-shadow: 0 0 60px 18px rgba(255, 240, 180, 0.22), 0 0 160px 70px rgba(255, 220, 140, 0.1); }
#hw-sky .hw-bat { position: absolute; width: 46px; height: 31px; background: url(../halloween/bat.svg) center / contain no-repeat; opacity: 0.92; animation: hw-flutter 1.7s ease-in-out infinite alternate; }
#hw-sky .hw-bat.b1 { top: 14%; right: 24%; }
#hw-sky .hw-bat.b2 { top: 10%; right: 9%; width: 34px; animation-delay: -0.6s; }
#hw-sky .hw-bat.b3 { top: 22%; right: 17%; width: 28px; animation-delay: -1.1s; }
#hw-sky .hw-witch { position: absolute; top: 11%; left: 0; width: 150px; height: 136px; background: url(../halloween/witch.svg) center / contain no-repeat; opacity: 0.95; animation: hw-fly 48s linear infinite; animation-delay: 6s; transform: translateX(100vw) scaleX(-1); }
#hw-sky .hw-tree { position: absolute; left: 1%; bottom: -6px; width: 420px; height: 390px; background: url(../halloween/tree.svg) bottom left / contain no-repeat; filter: brightness(0.15); }
#hw-sky .hw-house { position: absolute; right: 2%; bottom: -4px; width: 420px; height: 390px; background: url(../halloween/house.svg) bottom right / contain no-repeat; }
#hw-sky .hw-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(180deg, transparent, rgba(120, 100, 170, 0.22) 55%, rgba(170, 150, 215, 0.35)); }
#hw-sky .hw-ghost { position: absolute; width: 90px; height: 108px; background: url(../halloween/ghost.svg) center / contain no-repeat; opacity: 0.55; animation: hw-float 7s ease-in-out infinite alternate; }
#hw-sky .hw-ghost.g1 { left: 24%; bottom: 18%; }
#hw-sky .hw-ghost.g2 { right: 27%; bottom: 30%; width: 64px; height: 78px; animation-delay: -3s; opacity: 0.4; }

@keyframes hw-twinkle { from { opacity: 0.75; } to { opacity: 1; } }
@keyframes hw-flutter { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-9px) rotate(7deg); } }
@keyframes hw-fly { 0% { transform: translateX(100vw) translateY(0) scaleX(-1); } 8% { transform: translateX(72vw) translateY(-14px) scaleX(-1); } 18% { transform: translateX(42vw) translateY(10px) scaleX(-1); } 30% { transform: translateX(-200px) translateY(-6px) scaleX(-1); } 100% { transform: translateX(-200px) translateY(-6px) scaleX(-1); } }
@keyframes hw-float { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-34px) rotate(4deg); } }
@keyframes hw-swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes hw-dangle { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 42% { opacity: 1; } 44% { opacity: 0.86; } 46% { opacity: 1; } 71% { opacity: 1; } 72% { opacity: 0.9; } 74% { opacity: 1; } }
@keyframes hw-glow { from { filter: drop-shadow(0 0 4px rgba(255, 150, 40, 0.55)); } to { filter: drop-shadow(0 0 10px rgba(255, 170, 60, 0.95)); } }

#hw-deco { position: fixed; inset: 0; z-index: 8000; pointer-events: none; }
#hw-deco .hw-deco { position: absolute; }
#hw-deco .hw-web { width: 96px; height: 96px; background: url(../halloween/web.svg) top left / contain no-repeat; opacity: 0.6; }
#hw-deco .hw-web.dark { background-image: url(../halloween/web-dark.svg); opacity: 0.55; }
#hw-deco .hw-web.small { width: 64px; height: 64px; }
#hw-deco .hw-web.flip { transform: scaleX(-1); }
#hw-deco .hw-spider { width: 34px; height: 90px; background: url(../halloween/spider.svg) top center / contain no-repeat; transform-origin: top center; animation: hw-swing 2.6s ease-in-out infinite alternate, hw-dangle 5s ease-in-out infinite; }
#hw-deco .hw-pumpkin { width: 64px; height: 64px; background: url(../halloween/pumpkin.svg) center / contain no-repeat; animation: hw-glow 2.2s ease-in-out infinite alternate; }
#hw-deco .hw-pumpkin.small { width: 44px; height: 44px; }

#hw-light { position: fixed; inset: 0; z-index: 9000; pointer-events: none; display: none; background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(255, 214, 140, 0.1) 0, rgba(255, 214, 140, 0) 170px), radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 140px, rgba(0, 0, 0, 0.7) 210px, rgba(0, 0, 0, 0.975) 330px); animation: hw-flicker 9s linear infinite; }
html.halloween body:has(#login-screen.active) #hw-light, html.halloween body:has(#hub-screen.active) #hw-light { display: block; }


:where(html.halloween) .window { background: #2b2733; color: #e6e2ee; box-shadow: inset -1px -1px #0d0520, inset 1px 1px #3b1a70, inset -2px -2px #1a0a3a, inset 2px 2px #6a3ad0, inset -3px -3px #2a0f60, inset 3px 3px #5a2ab8; }
:where(html.halloween) .title-bar { background: linear-gradient(180deg, #a876f2, #6e30cc 8%, #6428c2 40%, #5c22b8 88%, #5c22b8 93%, #5220aa 95%, #3e1688 96%, #3e1688); border-top: 1px solid #4a1a9a; border-left: 1px solid #4a1a9a; border-right: 1px solid #2a0a60; text-shadow: 1px 1px #24084e; }
:where(html.halloween) .title-bar-controls button { background-color: #6428c2; }
:where(html.halloween) .title-bar-controls button[aria-label=Minimize], :where(html.halloween) .title-bar-controls button[aria-label=Maximize] { filter: hue-rotate(50deg); }
:where(html.halloween) .title-bar-controls button[aria-label=Minimize]:hover, :where(html.halloween) .title-bar-controls button[aria-label=Maximize]:hover { filter: hue-rotate(50deg) brightness(1.15); }

:where(html.halloween) button { color: #f0ecf6; border-color: #1a1326; background: linear-gradient(180deg, #5f5870, #3d3748 86%, #2b2634); }
:where(html.halloween) button:hover { background: linear-gradient(180deg, #716a84, #4a4457 86%, #352f3f); }
:where(html.halloween) button:active { background: #2b2634; }
:where(html.halloween) button:disabled { color: #8b8498; background: #35303f; }
:where(html.halloween) button.focused, :where(html.halloween) button:focus { outline-color: #cfc8da; box-shadow: inset -1px 1px #c3a8f6, inset 1px 2px #8f6adb, inset -2px 2px #a988ec, inset 1px -1px #7b58c8, inset 2px -2px #7b58c8; }
:where(html.halloween) input[type=text], :where(html.halloween) input[type=password], :where(html.halloween) input[type=email], :where(html.halloween) input[type=number], :where(html.halloween) textarea, :where(html.halloween) select { background-color: #1b1822; color: #ece8f2; border-color: #5b4d80; }
:where(html.halloween) select option { background: #1b1822; color: #ece8f2; }
:where(html.halloween) fieldset { background: #241f2d; border-color: #3f3650; }
:where(html.halloween) legend { color: #ffa64d; }
:where(html.halloween) input[type=checkbox] + label::before { background: linear-gradient(135deg, #3a3445, #1b1822); border-color: #6a5a94; }
:where(html.halloween) label { color: #e6e2ee; }
:where(html.halloween) a { color: #b9a4ff; }
html.halloween ::-webkit-scrollbar-track { background: #1e1a28; }
html.halloween ::-webkit-scrollbar-thumb { background-color: #4a3d6e; border-color: #6a5a94; box-shadow: none; background-image: none; }
html.halloween ::-webkit-scrollbar-button { background-color: #3a2d5e; filter: hue-rotate(50deg); }
html.halloween ::-webkit-scrollbar-corner { background: #1e1a28; }

html.halloween .chat-box { background: #d9d3df; border-color: #4e475c; color: #111; }
html.halloween .game-right { background: linear-gradient(180deg, #8e6ad8 0%, #5a3aa8 18%, #43288c 70%, #351f74 100%); border-left-color: #2a1660; }
html.halloween .msn-sidebar-user { background: #ebe5f5; border-color: #5a3aa8; }
html.halloween .msn-sidebar-user .player-name { color: #7a2fd0; }
html.halloween .msn-sidebar-user .player-score { color: #c45a00; }
html.halloween .msn-input-row input[type="text"] { background: #1b1822; color: #eee; border-color: #5b4d80; }
html.halloween .msg-avatar { background: #fff; }
html.halloween .start-bar { background: #332e3c; border-color: #4e475c; }
html.halloween .msn-toolbar-btn { color: #e6e2ee; }
html.halloween .msn-toolbar-btn:hover { background: #46404f; border-color: #6b6478; }
html.halloween .hub-activity-btn { background: #dcd6e4; color: #1a1326; }
html.halloween .hub-activity-btn small { color: #4a4458; }
html.halloween .hub-activity-btn:hover { background: #ebe5f5; }
html.halloween .leaderboard-tab { color: #e6e2ee; }
html.halloween .leaderboard-tab.active { color: #1a1326; }
html.halloween .leaderboard-btn { background: #3d3748; border-color: #6b6478 #15121c #15121c #6b6478; color: #ffb347; }
html.halloween .slot-popup, html.halloween .font-popup { background: #2b2733; border-color: #7b4fd6; color: #e6e2ee; }

html.halloween .wmp-menu { background: #2b2733; border-color: #15121c; color: #e6e2ee; }
html.halloween .wmp-shell, html.halloween .wmp-deck { background: linear-gradient(180deg, #8e6ad8 0%, #5a3aa8 18%, #43288c 70%, #351f74 100%); }
html.halloween .wmp-task { border-color: #2a1660; background: linear-gradient(180deg, #8f6ae8 0%, #6440c8 50%, #4e2fb0 100%); }
html.halloween .wmp-task:hover { background: linear-gradient(180deg, #a382f0 0%, #7a58d8 50%, #6040c0 100%); }
html.halloween .wmp-task.on { color: #2a1660; background: linear-gradient(180deg, #fbf8ff 0%, #e8dcff 50%, #d2c0f8 100%); border-color: #9a7fe0; }
html.halloween .wmp-lib { background: #dcd6e4; border-color: #2a1660; color: #111; }
html.halloween .wmp-libbar { background: linear-gradient(180deg, #f3ecff, #d8c8f8); border-color: #9a7fe0; }
html.halloween .wmp-libtitle { color: #2a1660; }
html.halloween .reveal { position: relative; }
html.halloween .reveal::before { content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 30px; background: url(../halloween/web-dark.svg) top left / contain no-repeat; pointer-events: none; }
#hw-deco.flare .hw-pumpkin { animation: none; filter: drop-shadow(0 0 16px rgba(255, 190, 70, 1)) brightness(1.35); transition: filter 0.2s; }
#hw-flash { position: fixed; inset: 0; z-index: 9400; pointer-events: none; background: #fff; opacity: 0; display: none; }
#hw-flash.on { display: block; animation: hw-bolt 0.7s linear forwards; }
#hw-sky.lit { filter: brightness(2.4) saturate(0.6); transition: filter 0.1s; }
@keyframes hw-bolt { 0% { opacity: 0; } 6% { opacity: 0.85; } 14% { opacity: 0.1; } 22% { opacity: 0.6; } 40% { opacity: 0; } 100% { opacity: 0; } }