/* ==========================================================================
   Seasonal decoration layers (built by assets/js/decor.js)
   ========================================================================== */
.decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.decor--back {
  z-index: 0;
}
.decor--front {
  z-index: 45;
}
[data-decor='off'] .decor {
  display: none;
}

/* ---------- stars ---------- */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  animation: twinkle 4s ease-in-out infinite alternate;
}
.stars--1 {
  animation-duration: 6s;
  animation-delay: -2s;
}
.stars--2 {
  animation-duration: 3s;
  animation-delay: -1s;
}
@keyframes twinkle {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}

/* ---------- moon ---------- */
.moon {
  position: absolute;
  top: 300px;
  /* sits in the page margin next to the 1200px container */
  right: max(-40px, calc(50vw - 600px - 170px));
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe6 0%, #fbe6a2 45%, #e9bf5c 100%);
  box-shadow:
    0 0 60px 18px rgba(255, 214, 120, 0.25),
    0 0 160px 60px rgba(255, 150, 60, 0.12),
    inset -18px -12px 30px rgba(180, 110, 30, 0.35);
  opacity: 0.9;
}
.moon__crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(190, 130, 50, 0.28);
  box-shadow: inset 2px 2px 4px rgba(120, 70, 20, 0.35);
}
.moon__crater.c1 {
  width: 26px;
  height: 26px;
  top: 34px;
  left: 44px;
}
.moon__crater.c2 {
  width: 16px;
  height: 16px;
  top: 82px;
  left: 92px;
}
.moon__crater.c3 {
  width: 12px;
  height: 12px;
  top: 96px;
  left: 40px;
}
.moon--winter {
  background: radial-gradient(circle at 38% 36%, #ffffff 0%, #e6f3ff 50%, #b9d9f5 100%);
  box-shadow:
    0 0 60px 18px rgba(185, 225, 255, 0.25),
    0 0 160px 60px rgba(124, 199, 255, 0.12);
}

.cloud {
  position: absolute;
  height: 34px;
  border-radius: 50%;
  background: rgba(40, 20, 60, 0.75);
  filter: blur(8px);
  animation: cloud-drift linear infinite;
}
.cloud--1 {
  top: 150px;
  width: 260px;
  animation-duration: 90s;
  animation-delay: -20s;
}
.cloud--2 {
  top: 110px;
  width: 180px;
  animation-duration: 120s;
  animation-delay: -75s;
  opacity: 0.7;
}
@keyframes cloud-drift {
  from {
    transform: translateX(110vw);
  }
  to {
    transform: translateX(-30vw);
  }
}

/* ---------- scenery ---------- */
.scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 220px;
}
.scene__far {
  fill: var(--scene-far);
}
.scene__near {
  fill: var(--scene-near);
}
.scene__stroke {
  stroke: var(--scene-near);
}
.scene__snow {
  fill: #e8f4ff;
  opacity: 0.9;
}
.scene__lit {
  filter: drop-shadow(0 0 6px rgba(255, 170, 60, 0.9));
}
.scene__flicker {
  animation: window-flicker 6s steps(1) infinite;
}
@keyframes window-flicker {
  0%,
  100% {
    opacity: 1;
  }
  42% {
    opacity: 0.2;
  }
  44% {
    opacity: 1;
  }
  46% {
    opacity: 0.3;
  }
  48% {
    opacity: 1;
  }
}
.scene__pumpkins {
  animation: pumpkin-glow 3.2s ease-in-out infinite;
}
@keyframes pumpkin-glow {
  50% {
    opacity: 0.75;
  }
}
.scene__lantern {
  transform-origin: 232px 62px;
  animation: lantern-swing 4s ease-in-out infinite;
}
@keyframes lantern-swing {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

/* ---------- fog ---------- */
.fog {
  position: absolute;
  left: -50%;
  bottom: -20px;
  width: 200%;
  height: 180px;
  background:
    radial-gradient(ellipse 18% 55% at 12% 60%, rgba(200, 180, 230, 0.13), transparent 70%),
    radial-gradient(ellipse 22% 60% at 38% 70%, rgba(200, 180, 230, 0.11), transparent 70%),
    radial-gradient(ellipse 20% 50% at 64% 65%, rgba(200, 180, 230, 0.13), transparent 70%),
    radial-gradient(ellipse 24% 60% at 88% 70%, rgba(200, 180, 230, 0.1), transparent 70%);
  filter: blur(6px);
  animation: fog-drift 60s linear infinite;
}
.fog--2 {
  bottom: -50px;
  opacity: 0.8;
  animation-duration: 95s;
  animation-direction: reverse;
}
.fog--snow {
  background: radial-gradient(ellipse 50% 60% at 50% 80%, rgba(220, 240, 255, 0.08), transparent 70%);
}
@keyframes fog-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(25%);
  }
}

/* ---------- ghosts ---------- */
.ghost {
  position: absolute;
  top: var(--y);
  left: 0;
  width: var(--size);
  opacity: 0.16;
  animation: ghost-drift var(--dur) linear var(--delay) infinite;
}
.ghost[style*='--dir:-1'] {
  animation-direction: reverse;
}
.ghost__bob {
  animation: ghost-bob 5s ease-in-out infinite;
}
@keyframes ghost-drift {
  from {
    transform: translateX(-10vw);
  }
  to {
    transform: translateX(110vw);
  }
}
@keyframes ghost-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-26px) rotate(4deg);
  }
}

/* ---------- cobwebs ---------- */
.cobweb {
  position: absolute;
  top: 0;
  width: 190px;
  height: 190px;
  color: rgba(235, 225, 255, 0.2);
}
.cobweb--tl {
  left: 0;
}
.cobweb--tr {
  right: 0;
  transform: scaleX(-1);
}
.cobweb svg {
  width: 100%;
  height: 100%;
}

/* ---------- spiders ---------- */
/* thread (scaled 1px line) and spider (translated) share the same timing so they stay in sync */
.spider {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 34px;
}
.spider__thread {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1px;
  background: rgba(230, 220, 255, 0.45);
  transform-origin: top;
  animation: thread-drop var(--dur) ease-in-out var(--delay) infinite;
}
.spider svg {
  position: absolute;
  top: -8px;
  left: 0;
  display: block;
  width: 34px;
  animation: spider-drop var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes thread-drop {
  0%,
  100% {
    transform: scaleY(var(--line));
  }
  45%,
  55% {
    transform: scaleY(calc(var(--line) + var(--drop)));
  }
}
@keyframes spider-drop {
  0%,
  100% {
    transform: translateY(calc(var(--line) * 1px)) rotate(-5deg);
  }
  45%,
  55% {
    transform: translateY(calc((var(--line) + var(--drop)) * 1px)) rotate(5deg);
  }
}

/* ---------- bats ---------- */
.bat-flight {
  position: absolute;
  top: var(--y);
  left: 0;
  animation: bat-fly var(--dur) linear var(--delay) forwards;
  will-change: transform;
}
.bat-flight.is-rtl {
  animation-name: bat-fly-rtl;
}
.bat {
  width: var(--size);
  animation: bat-bob calc(var(--dur) / 3) ease-in-out infinite alternate;
}
.bat svg {
  width: 100%;
  fill: #0a0610;
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(255, 140, 50, 0.25));
}
.is-rtl .bat svg {
  transform: scaleX(-1);
}
.bat__wing {
  animation: flap var(--flap) ease-in-out infinite alternate;
  transform-origin: 32px 15px;
  transform-box: view-box;
}
@keyframes flap {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(-0.35);
  }
}
@keyframes bat-fly {
  from {
    transform: translateX(-12vw);
  }
  to {
    transform: translateX(112vw);
  }
}
@keyframes bat-fly-rtl {
  from {
    transform: translateX(112vw);
  }
  to {
    transform: translateX(-12vw);
  }
}
@keyframes bat-bob {
  from {
    transform: translateY(calc(var(--bob) * -1));
  }
  to {
    transform: translateY(var(--bob));
  }
}

/* ---------- falling particles ---------- */
.particle {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  opacity: var(--o);
  animation: fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.particle > span {
  display: block;
  width: 100%;
  height: 100%;
  animation: sway var(--sway) ease-in-out infinite alternate;
}
.particle svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes fall {
  from {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  to {
    transform: translate3d(var(--drift), 112vh, 0) rotate(var(--rot));
  }
}
@keyframes sway {
  from {
    transform: translateX(-24px) rotate(-28deg);
  }
  to {
    transform: translateX(24px) rotate(28deg);
  }
}
.particle--leaf svg {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.particle--snow > span {
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
.particle--firefly {
  top: auto;
  bottom: -20px;
  animation-name: rise;
}
.particle--firefly > span {
  border-radius: 50%;
  background: #fff3a8;
  box-shadow:
    0 0 10px 3px rgba(255, 220, 90, 0.8),
    0 0 20px 6px rgba(255, 180, 0, 0.35);
  animation: firefly-blink var(--sway) ease-in-out infinite alternate;
}
@keyframes rise {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--drift), -80vh, 0);
  }
}
@keyframes firefly-blink {
  from {
    opacity: 0.2;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(12px);
  }
}

.sunglow {
  position: absolute;
  top: -200px;
  right: -120px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 60, 0.28), rgba(255, 160, 0, 0.08) 45%, transparent 70%);
}
.sunglow--spring {
  background: radial-gradient(circle, rgba(255, 180, 220, 0.2), rgba(126, 217, 87, 0.06) 45%, transparent 70%);
}

/* Reduced motion / static decorations: keep the scenery, freeze the rest. */
.decor-static .decor * {
  animation: none !important;
}

@media (max-width: 768px) {
  .moon {
    display: none;
  }
}
@media (max-width: 1000px) {
  .moon {
    top: 150px;
    width: 96px;
    height: 96px;
    right: 18px;
  }
  .moon__crater {
    display: none;
  }
  .spider {
    top: 0;
  }
  .cobweb {
    top: 0;
    width: 90px;
    height: 90px;
    color: rgba(235, 225, 255, 0.13);
  }
  .scene {
    height: 150px;
  }
}

/* ==========================================================================
   Panel decorations (like Atom's "Christmas mode", for every season)
   ========================================================================== */
:root:not([data-decor='off'])[data-theme='halloween'] .panel--nav::after,
:root:not([data-decor='off'])[data-theme='halloween'] .content > .panel:first-child::after,
:root:not([data-decor='off'])[data-theme='halloween'] .category-title::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 84px;
  height: 84px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='white' stroke-opacity='.3' stroke-width='1.2'%3E%3Cpath d='M100 0L0 0M100 0L0 28M100 0L10 60M100 0L45 95M100 0L100 100'/%3E%3Cpath d='M76 0Q80 7 81 7Q88 10 91 17Q95 22 100 24'/%3E%3Cpath d='M52 0Q58 12 63 15Q72 22 75 34Q84 42 100 46'/%3E%3Cpath d='M28 0Q38 22 44 23Q58 32 60 51Q70 62 100 70'/%3E%3C/g%3E%3C/svg%3E")
    no-repeat top right / contain;
  border-top-right-radius: 8px;
}
:root:not([data-decor='off'])[data-theme='halloween'] .category-title::after {
  width: 64px;
  height: 64px;
  filter: invert(1) brightness(0.2);
  opacity: 0.55;
}
/* a glowing jack o'lantern sits on the corner of the navigation panel */
:root:not([data-decor='off'])[data-theme='halloween'] .panel--nav::before {
  content: '';
  position: absolute;
  left: -18px;
  top: -26px;
  width: 56px;
  height: 56px;
  z-index: 3;
  pointer-events: none;
  background: url('/assets/img/items/pumpkin.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 12px rgba(255, 140, 40, 0.6));
  transform: rotate(-8deg);
  animation: pumpkin-flicker 3.4s infinite;
}
@keyframes pumpkin-flicker {
  0%,
  100% {
    filter: drop-shadow(0 0 10px rgba(255, 140, 40, 0.75));
  }
  46% {
    filter: drop-shadow(0 0 16px rgba(255, 160, 50, 0.95));
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(255, 140, 40, 0.4));
  }
  54% {
    filter: drop-shadow(0 0 14px rgba(255, 150, 50, 0.9));
  }
}

/* snow lying on top of every panel (winter) */
:root:not([data-decor='off'])[data-theme='winter'] .body .panel::before,
:root:not([data-decor='off'])[data-theme='winter'] .announcement::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -9px;
  height: 20px;
  z-index: 3;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cpath d='M0 12C15 3 35 3 50 10C65 3 85 2 100 9C115 3 135 4 150 10C165 3 185 3 200 11L200 16C190 20 186 14 178 17C168 21 160 15 150 17C140 21 132 15 122 18C112 21 104 15 94 17C84 21 76 15 66 18C56 21 48 15 38 17C28 21 18 15 8 18C4 19 2 17 0 17Z' fill='white'/%3E%3C/svg%3E")
    repeat-x;
  background-size: 200px 20px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}
:root:not([data-decor='off'])[data-theme='winter'] .announcement {
  overflow: visible;
}

/* the fixed decorations never cover the player basket or modals */
.decor--front {
  z-index: 45;
}