/* ==========================================================================
   CC Games — Halloween theme
   Loaded after site.css, and only while Halloween is the live theme
   (portal: Dashboard → Site Theme). Same layout; it recolours the site and
   adds decorations. The decoration markup is includes/themes/halloween.php.

   Everything is scoped under html.theme-halloween, so it outranks site.css
   and can never leak into another theme. Motion is transform/opacity only,
   starts from the first painted frame (no JS), and switches off for
   visitors who ask for reduced motion.
   ========================================================================== */

/* ── Palette: pumpkin orange, witch purple, a little slime green ─────────── */
.theme-halloween {
  --bg:         #0a0610;
  --bg-elev:    #100a18;
  --surface:    #140d1f;
  --surface-2:  #1b1229;
  --surface-3:  #251836;
  /* Solid, never rgba (no fringe pixels on rounded corners). */
  --line:        #24182f;
  --line-strong: #372646;
  --line-hover:  #8a4a22;

  --text:   #fff4ea;
  --text-2: #dccad6;
  --muted:  #9d8aa6;

  --brand:    #ff7a18;
  --brand-hi: #ffa24c;
  --violet:   #a53cff;
  --pink:     #ff5414;

  --grad:      linear-gradient(120deg, #ff8c1a 0%, #ff5414 45%, #9d3cff 100%);
  --grad-soft: linear-gradient(135deg, rgba(255, 122, 24, 0.24), rgba(165, 60, 255, 0.2) 55%, rgba(155, 225, 93, 0.1));
  --glow:      0 30px 50px -28px rgba(255, 122, 24, 0.8), 0 18px 36px -24px rgba(165, 60, 255, 0.75);

  scrollbar-color: #5b3080 #0a0610;
}
.theme-halloween ::selection { background: rgba(255, 122, 24, 0.45); color: #fff; }

/* ── Buttons, chips, badges ──────────────────────────────────────────────── */
.theme-halloween .btn-primary {
  background: linear-gradient(120deg, #ff8c1a 0%, #ff5414 35%, #9d3cff 70%, #ff5414 100%) no-repeat;
  background-size: 200% 100%;
  background-origin: border-box;
  box-shadow: 0 10px 28px -10px rgba(255, 102, 20, 0.85);
}
.theme-halloween .btn-primary:hover { background-position: 100% 0; box-shadow: 0 16px 36px -12px rgba(165, 60, 255, 0.8); }
.theme-halloween .nav-link[aria-current="page"] { background: rgba(255, 122, 24, 0.16); box-shadow: inset 0 0 0 1px #6a3a1c; }
.theme-halloween .chip { background: rgba(255, 122, 24, 0.13); border-color: #5c3418; }
.theme-halloween .chip-btn[aria-pressed="true"],
.theme-halloween .game-rank { box-shadow: 0 8px 22px -10px rgba(255, 102, 20, 0.9); }
.theme-halloween .game-play { box-shadow: 0 10px 24px -8px rgba(255, 102, 20, 0.95); }
.theme-halloween .success-mark { box-shadow: 0 18px 44px -14px rgba(255, 102, 20, 0.9); }
.theme-halloween .text-gradient { filter: drop-shadow(0 6px 26px rgba(255, 110, 20, 0.4)); }

/* ── Header: dusk-black, cobwebs in both corners, a witch hat on the logo ── */
.theme-halloween .site-header { background: rgba(10, 6, 16, 0.6); }
.theme-halloween .site-header.is-scrolled,
.theme-halloween.nav-open .site-header { background: rgba(10, 6, 16, 0.95); }
.theme-halloween .site-header::before,
.theme-halloween .site-header::after {
  content: '';
  position: absolute;
  top: 0;
  width: 92px;
  height: 92px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0L99.9 5.2M0 0L93.4 35.8M0 0L76.6 64.3M0 0L51.5 85.7M0 0L20.8 97.8M0 0L3.5 99.9M18.0 0.9Q15.0 3.2 16.8 6.5Q13.2 7.7 13.8 11.6Q9.9 11.6 9.3 15.4Q5.6 14.2 3.7 17.6Q1.9 15.3 0.6 18.0M36.0 1.9Q29.9 6.4 33.6 12.9Q26.3 15.5 27.6 23.1Q19.8 23.2 18.5 30.9Q11.2 28.4 7.5 35.2Q3.8 30.6 1.3 36.0M55.9 2.9Q46.5 9.9 52.3 20.1Q40.9 24.1 42.9 36.0Q30.8 36.1 28.8 48.0Q17.4 44.2 11.6 54.8Q5.8 47.6 2.0 56.0M77.9 4.1Q64.8 13.8 72.8 28.0Q57.0 33.6 59.8 50.1Q43.0 50.3 40.2 66.9Q24.2 61.6 16.2 76.3Q8.1 66.3 2.7 78.0' fill='none' stroke='%23e9defa' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  opacity: 0.5;
  pointer-events: none;
}
.theme-halloween .site-header::before { left: 0; }
.theme-halloween .site-header::after { right: 0; transform: scaleX(-1); }

.theme-halloween .brand { position: relative; }
.theme-halloween .brand::before {
  content: '';
  position: absolute;
  left: 5px;
  top: -17px;
  z-index: 1;
  width: 36px;
  height: 27px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M10 24C15 18 17 9 28 2c-3 7-1 15 3 22z' fill='%235a2a8c'/%3E%3Cpath d='M28 2c-4 4-6 9-7 14' fill='none' stroke='%237b44b8' stroke-width='1.2' stroke-linecap='round'/%3E%3Cellipse cx='20' cy='24.6' rx='19' ry='4.6' fill='%2347206f'/%3E%3Cpath d='M11.4 21.2Q20 23.6 29.6 21.2l.8 2.6Q20 26.4 10.6 23.8z' fill='%23ff7a18'/%3E%3Crect x='18' y='21.8' width='4' height='3.4' rx='.6' fill='none' stroke='%23ffd27a' stroke-width='.9'/%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(-12deg);
  transform-origin: 50% 90%;
  pointer-events: none;
  transition: transform 0.4s var(--ease-spring);
}
.theme-halloween .brand:hover::before { transform: rotate(-22deg) translate(-1px, -4px); }
.theme-halloween .brand span { text-shadow: 0 0 18px rgba(255, 122, 24, 0.45); }

/* ── Hero glows: orange left, purple right, a whisper of slime green ───── */
.theme-halloween .hero::before,
.theme-halloween .page-hero::before {
  background:
    radial-gradient(38% 46% at 14% 22%, rgba(255, 110, 20, 0.32), transparent 70%),
    radial-gradient(34% 42% at 86% 12%, rgba(165, 60, 255, 0.34), transparent 70%),
    radial-gradient(30% 38% at 68% 80%, rgba(155, 225, 93, 0.1), transparent 70%);
}
.theme-halloween .hero::after,
.theme-halloween .page-hero::after {
  background-image:
    linear-gradient(rgba(200, 150, 230, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 150, 230, 0.07) 1px, transparent 1px);
}
.theme-halloween .hero-card--3 { box-shadow: var(--shadow-lg), 0 24px 90px -24px rgba(255, 110, 20, 0.7); }
.theme-halloween .hero-card-label,
.theme-halloween .game-live { background: rgba(10, 6, 16, 0.84); border-color: #3a2649; }
.theme-halloween .hero-badge { background: rgba(20, 13, 31, 0.95); }
.theme-halloween .article-hero { box-shadow: var(--shadow-lg), 0 30px 120px -40px rgba(255, 110, 20, 0.45); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.theme-halloween .stat-card,
.theme-halloween .value-card {
  background:
    radial-gradient(180px circle at 100% 0%, rgba(255, 140, 40, 0.13), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.theme-halloween .stat-card::after,
.theme-halloween .value-card::after {
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(255, 140, 40, 0.17), transparent 65%);
}
@media (hover: hover) {
  .theme-halloween .stat-card:hover,
  .theme-halloween .value-card:hover {
    box-shadow: 0 28px 50px -30px rgba(255, 110, 20, 0.85), 0 14px 30px -24px rgba(165, 60, 255, 0.75);
  }
  .theme-halloween .stat-card:hover .stat-icon,
  .theme-halloween .value-card:hover .stat-icon { box-shadow: 0 12px 26px -10px rgba(255, 102, 20, 0.9); }
}
.theme-halloween .stat-icon { border-color: #4d2c55; }
.theme-halloween .game-thumb { background: #0b0712; }
/* The rule above always covered the loading shimmer on game thumbnails, so
   in this theme they have none; keep it that way now that the shimmer is
   its own layer (site.css, "Images fade in"). */
.theme-halloween .game-thumb::before { content: none; }

.theme-halloween .cta-band {
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(255, 110, 20, 0.4), transparent 60%),
    radial-gradient(55% 110% at 100% 100%, rgba(165, 60, 255, 0.38), transparent 60%),
    linear-gradient(135deg, #1d0f1c 0%, #1a0d33 100%);
  background-clip: padding-box;
}
.theme-halloween .cta-band .lede { color: #ead8e4; }
.theme-halloween .social-tile { background: rgba(10, 6, 16, 0.5); border-color: #3a2649; }
.theme-halloween .social-tile:hover { background: rgba(10, 6, 16, 0.72); border-color: #8a4a22; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.theme-halloween .input,
.theme-halloween .textarea,
.theme-halloween .seg-option label { background: rgba(10, 6, 16, 0.6); }
.theme-halloween .input:hover, .theme-halloween .textarea:hover { border-color: #4f3a5e; }
.theme-halloween .input:focus,
.theme-halloween .textarea:focus { background: rgba(10, 6, 16, 0.85); box-shadow: 0 0 0 4px rgba(255, 122, 24, 0.2); }
.theme-halloween .seg-option input:checked + label { background: rgba(255, 122, 24, 0.12); box-shadow: 0 0 0 4px rgba(255, 122, 24, 0.12); }
.theme-halloween .react-picker { background: #1b1229; }
.theme-halloween .react-tip { background: #0a0610; }

/* ── Footer: a little graveyard stands on its top edge ───────────────────── */
.theme-halloween .site-footer {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 110, 20, 0.05), rgba(165, 60, 255, 0.06));
}
.theme-halloween .site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 72px;
  margin-bottom: 1px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80'%3E%3Cg fill='%232b1b3d'%3E%3Cpath d='M52 66V38q0-12 14-12t14 12v28z'/%3E%3Cpath d='M166 66V36h-8v-6h8v-8h6v8h8v6h-8v30z'/%3E%3Cpath d='M258 66V43q0-9 10-9t10 9v23z' transform='rotate(-8 268 50)'/%3E%3Cpath d='M456 66V30q0-14 18-14t18 14v36z'/%3E%3C/g%3E%3Cpath d='M472 25h4v6h5v4h-5v12h-4V35h-5v-4h5z' fill='%231a1026'/%3E%3Cpath d='M60 40h12M60 45h12M60 50h8' stroke='%231a1026' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='none' stroke='%231d1229' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M552 66c0-12 0-20-6-30M550 47c6-6 12-8 20-16M546 36c-4-4-10-6-16-8M546 36c0-6 4-12 2-18M562 40c4-2 8 0 14-2'/%3E%3C/g%3E%3Cpath d='M0 80V62q40-6 80-1t80-1 80 2 80-3 80 3 80-2 80 1 40 1V80z' fill='%231d1229'/%3E%3Cpath d='M100 63l3-9 2 9 3-11 2 11zM210 62l2-7 2 7 3-9 2 9zM318 61l3-8 2 8 2-6 2 6zM418 62l2-9 3 9 2-7 2 7zM506 62l3-8 2 8 3-10 2 10z' fill='%231d1229'/%3E%3Cellipse cx='360' cy='60' rx='13' ry='10' fill='%23d9590d'/%3E%3Cellipse cx='360' cy='60' rx='6.5' ry='10' fill='%23ff8a26'/%3E%3Cpath d='M359 51q1-5 4-6l1 2q-3 1-3 4z' fill='%235b8a2e'/%3E%3Cpath d='M352 58l3-3.5 2.4 3.5zM368 58l-3-3.5-2.4 3.5zM352 63q8 5 16 0q-8 2.2-16 0z' fill='%23ffe08a'/%3E%3C/svg%3E") repeat-x left bottom / auto 72px,
    radial-gradient(60% 100% at 50% 100%, rgba(255, 110, 20, 0.1), transparent 70%);
  pointer-events: none;
}

/* ══ Decorations (includes/themes/halloween.php) ═══════════════════════════ */

/* Behind everything: stars, the moon and the fog. z-index -1 puts the layer
   under the page's content but over the page background. */
.hw-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hw-stars, .hw-stars::after {
  position: absolute;
  inset: 0 0 35%;
  /* The stars are a small picture tiled across the sky, not 8 + 8 CSS
     radial gradients: with software rendering (Firefox on many Linux PCs)
     every gradient pixel is maths, and the old star field took ~200 ms to
     redraw each time anything on the page repainted. The pictures are the
     old gradients rendered exactly as the browser drew them (the colour at
     each pixel's centre), at 1x and 2x screens, so they match pixel for
     pixel. The url() line is for browsers without image-set. */
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAEsCAYAAACMr8eAAAACMUlEQVR42u3dQQ3AQAwDQSvHH1j/5VAVRY7Ctb9IMxAWgJ0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCZ7m4V+KMkAAAAAAAAAAAAAAAAAAAAAAAAIHbSgNiyAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgHgSBSAeYwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMvdh22MsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwCfP3UsFJisJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4FS/11IBmK4kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABhoA6ZcFW6VMuHVAAAAAElFTkSuQmCC");
  background-image: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaQAAAEsCAYAAACMr8eAAAACMUlEQVR42u3dQQ3AQAwDQSvHH1j/5VAVRY7Ctb9IMxAWgJ0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCZ7m4V+KMkAAAAAAAAAAAAAAAAAAAAAAAAIHbSgNiyAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgHgSBSAeYwEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMvdh22MsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwCfP3UsFJisJAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4FS/11IBmK4kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABhoA6ZcFW6VMuHVAAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0gAAAJYCAYAAABYRsb0AAAILElEQVR42u3auQ3DQAxFweX235hydeBAUBXfmWIBts6dKeExIQG2BgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8BclAQBwR0myLSxVdhbgFF0CAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGE2SqAAAz9IlADjuOHIkAYADCQAAAACaFzsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAuysJ7iNJtsFUmQ0AAJysSwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwDsk+aiwX0kAAACvPY6yLf5Vdv8dugQAAAAAAEDzYgcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADCuZU6WOVEC4BpdAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAWWdknWKEgAA1+oSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMI+sUFXiyLgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDhljlRAQAA+EWXAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB2+wKqgDoBZ1BwZAAAAABJRU5ErkJggg==") 2x);
  background-size: 420px 300px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent);
  mask-image: linear-gradient(180deg, #000 30%, transparent);
  opacity: 0.7;
}
.hw-stars::after {
  content: '';
  inset: 0;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADmCAYAAABvebgTAAABP0lEQVR42u3csQkAMAwDQYH3HyyjeAqnyQYpAuFuhK+FEgAAAAAAAAAAAAAAAAAAAAAAAAAAAPjWHEoAAAAAAAAAAAAAMYYEAAAAAAAAAAAAAAAAAAAA4lEAAAAAAAAAAAAAAAAAAAAAACAeVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAK9OrplcpAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAcxuQXyVJPwqgQQAAAABJRU5ErkJggg==");
  background-image: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADmCAYAAABvebgTAAABP0lEQVR42u3csQkAMAwDQYH3HyyjeAqnyQYpAuFuhK+FEgAAAAAAAAAAAAAAAAAAAAAAAAAAAPjWHEoAAAAAAAAAAAAAMYYEAAAAAAAAAAAAAAAAAAAA4lEAAAAAAAAAAAAAAAAAAAAAACAeVgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAK9OrplcpAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAcxuQXyVJPwqgQQAAAABJRU5ErkJggg==") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAHMCAYAAAAJedYUAAAEoElEQVR42u3YMQ7DIBBFQcT9L0bPDVIgTvHTULqwpSiOyUy1LY9mtaUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAcEoWJeCcKgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJYsSAPepEsBey9XRDACACxYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABXZVECALiiSgAAYMECAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOCxsuz4tup7AYAblqvX0QwAgAsWAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMDXjJ6MnigB/6FKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwNNltmS2KAHALqoEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOwrsyWzRQkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBPGD0ZPVECAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA+E1vdVpdO9aeLAgAAAAASUVORK5CYII=") 2x);
  background-size: 300px 230px;
  background-position: 140px 60px;
  animation: hw-twinkle 3.6s ease-in-out infinite alternate;
}
@keyframes hw-twinkle { from { opacity: 0.15; } to { opacity: 1; } }

.hw-moon {
  position: absolute;
  top: calc(var(--header-h) + clamp(18px, 4vh, 48px));
  right: clamp(18px, 7vw, 120px);
  width: clamp(84px, 11vw, 164px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, rgba(196, 150, 70, 0.45) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 64%, rgba(196, 150, 70, 0.38) 0 13%, transparent 14%),
    radial-gradient(circle at 66% 30%, rgba(196, 150, 70, 0.3) 0 6%, transparent 7%),
    radial-gradient(circle at 30% 70%, rgba(196, 150, 70, 0.28) 0 5%, transparent 6%),
    radial-gradient(circle at 38% 34%, #fffbea 0%, #ffe7a6 45%, #f0bd5e 100%);
  box-shadow: 0 0 40px 6px rgba(255, 214, 120, 0.35), 0 0 120px 40px rgba(255, 140, 40, 0.14);
}
.hw-moon::after {
  content: '';
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 190, 90, 0.22), transparent);
  animation: hw-glow 5s ease-in-out infinite alternate;
}
@keyframes hw-glow { from { opacity: 0.45; transform: scale(0.94); } to { opacity: 1; transform: scale(1.06); } }

.hw-fog {
  position: absolute;
  left: 0;
  bottom: -6vh;
  width: 200%;
  height: 42vh;
  background:
    radial-gradient(22% 60% at 10% 70%, rgba(150, 100, 200, 0.2), transparent 70%),
    radial-gradient(18% 50% at 32% 60%, rgba(180, 140, 220, 0.16), transparent 70%),
    radial-gradient(26% 60% at 60% 75%, rgba(150, 100, 200, 0.2), transparent 70%),
    radial-gradient(18% 50% at 82% 62%, rgba(180, 140, 220, 0.16), transparent 70%);
  will-change: transform;
  animation: hw-drift 70s linear infinite;
}
.hw-fog--front {
  bottom: -12vh;
  opacity: 0.8;
  animation-duration: 44s;
  animation-direction: reverse;
}
@keyframes hw-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* In front: bats, the spider and the pumpkin. Under the header (z 100) and
   never in the way of a click. */
.hw-fx {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

/* Bats cross the screen, bob up and down, and flap. Each one is a different
   size, height, speed and start time; a negative delay means it is already
   mid-flight when the page opens. */
.hw-bat {
  position: absolute;
  left: 0;
  top: var(--y);
  width: var(--s);
  opacity: var(--o, 1);
  will-change: transform;
  animation: hw-fly var(--t) linear var(--d) infinite;
}
.hw-bat--1 { --y: 20%; --s: 62px; --t: 22s; --d: -4s; }
.hw-bat--2 { --y: 34%; --s: 34px; --t: 27s; --d: -15s; --o: 0.75; animation-direction: reverse; }
.hw-bat--3 { --y: 13%; --s: 40px; --t: 31s; --d: -21s; --o: 0.85; }
.hw-bat--4 { --y: 58%; --s: 52px; --t: 25s; --d: -9s; animation-direction: reverse; }
.hw-bat--5 { --y: 26%; --s: 28px; --t: 36s; --d: -2s; --o: 0.6; }
@keyframes hw-fly {
  0%        { transform: translateX(-12vw); }
  45%, 100% { transform: translateX(112vw); }
}
.hw-bat-bob { animation: hw-bob 1.7s ease-in-out infinite alternate; }
.hw-bat--2 .hw-bat-bob { animation-duration: 1.3s; }
.hw-bat--4 .hw-bat-bob { animation-duration: 2.1s; }
@keyframes hw-bob { from { transform: translateY(-14px) rotate(-6deg); } to { transform: translateY(16px) rotate(5deg); } }

.hw-bat-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 2px rgba(205, 140, 255, 0.95)) drop-shadow(0 0 10px rgba(165, 60, 255, 0.7)); }
.hw-bat-body, .hw-wing { fill: #24123a; }
.hw-wing {
  transform-box: view-box;
  animation: hw-flap 0.24s ease-in-out infinite alternate;
}
.hw-wing--l { transform-origin: 29px 14px; }
.hw-wing--r { transform-origin: 35px 14px; }
.hw-bat--2 .hw-wing { animation-duration: 0.19s; }
.hw-bat--5 .hw-wing { animation-duration: 0.29s; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(-0.45); } }
.hw-eye { fill: #ffb347; }

/* The spider lowers itself on its thread from under the header, in the left
   margin, and climbs back up. The outer box is a clip window that starts at
   the header's bottom edge, so the thread never shows through the header. */
.hw-spider {
  position: absolute;
  top: var(--header-h);
  left: max(6px, calc((100vw - var(--container)) / 2 - 46px));
  width: 40px;
  height: 200px;
  overflow: hidden;
}
.hw-spider-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -130px;
  animation: hw-drop 9s ease-in-out infinite;
}
.hw-thread {
  width: 1px;
  height: 150px;
  background: linear-gradient(180deg, rgba(235, 225, 255, 0), rgba(235, 225, 255, 0.55));
}
.hw-spider-svg {
  width: 32px;
  height: 32px;
  margin-top: -14px;
  overflow: visible;
  transform-origin: 50% 0;
  animation: hw-sway 3s ease-in-out infinite alternate;
}
.hw-legs { stroke: #1f1230; }
.hw-spider-body { fill: #1f1230; }
.hw-spider-svg { filter: drop-shadow(0 0 5px rgba(255, 140, 40, 0.5)); }
@keyframes hw-drop {
  0%, 12%   { transform: translateY(0); }
  42%, 70%  { transform: translateY(72px); }
  100%      { transform: translateY(0); }
}
@keyframes hw-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* A jack-o'-lantern peeks up from the bottom-left corner, candle flickering. */
.hw-pumpkin {
  position: absolute;
  left: 18px;
  bottom: -16px;
  width: 70px;
  transform-origin: 50% 100%;
  animation: hw-wobble 4s ease-in-out infinite;
}
.hw-pumpkin svg { width: 100%; height: auto; filter: drop-shadow(0 0 14px rgba(255, 110, 20, 0.55)); }
.hw-pk-side { fill: #d9590d; }
.hw-pk-mid  { fill: #ff7f1f; }
.hw-stem    { fill: #5b8a2e; }
.hw-face    { fill: #ffe08a; animation: hw-flicker 2.2s steps(1) infinite; }
@keyframes hw-wobble {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg) translateY(-3px); }
}
@keyframes hw-flicker {
  0%, 100% { opacity: 1; }
  18% { opacity: 0.72; }
  22% { opacity: 1; }
  56% { opacity: 0.82; }
  60% { opacity: 0.95; }
  64% { opacity: 0.68; }
  68% { opacity: 1; }
}

/* ── Smaller screens: fewer, smaller decorations, nothing over the text ── */
@media (max-width: 760px) {
  .hw-pumpkin, .hw-spider, .hw-bat--3, .hw-bat--5 { display: none; }
  .hw-bat--1 { --s: 40px; }
  .hw-bat--4 { --s: 34px; }
  .theme-halloween .site-header::before,
  .theme-halloween .site-header::after { width: 60px; height: 60px; }
  .theme-halloween .site-footer::before { height: 52px; background-size: auto 52px, auto; }
}

/* ── Reduced motion: keep the look, drop the movement ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hw-bat, .hw-spider, .hw-pumpkin { display: none; }
  .hw-fog, .hw-stars::after, .hw-moon::after { animation: none; }
}