/* Halloween theme (S56). Loaded only while the theme is on, or while an admin previews
   it; every rule starts with html[data-theme="halloween"], so nothing changes when off.
   The frame (nav, header, stats bar, footer) turns into an 8-bit night; game cards,
   ads and Gold keep their normal look. Decorations are aria-hidden, never take clicks,
   and animate only transform / opacity. Sprites: templates/themes/halloween/_sprites.html. */

html[data-theme="halloween"] {
  --hw-night: #150B24;
  --hw-line: #2C1B47;
  --hw-pumpkin: #FF7A1A;
  --hw-candle: #FFD166;
  --hw-bone: #F3ECFF;
  --hw-bone-muted: #C4B4E0;
  --hw-px: 3px;
}
@media (max-width: 900px) { html[data-theme="halloween"] { --hw-px: 2px; } }
@media (max-width: 480px) { html[data-theme="halloween"] { --hw-px: 1.5px; } }

html[data-theme="halloween"] .hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Nav: night colour + a witch hat on the mascot ---------- */
html[data-theme="halloween"] .topnav { background: var(--hw-night); border-bottom-color: var(--hw-line); }
html[data-theme="halloween"] .brand { position: relative; }
html[data-theme="halloween"] .hw-hat {
  position: absolute;
  left: -1px; top: -9px;
  width: 24px; height: auto;
  transform: rotate(-12deg);
  transform-origin: 50% 100%;
  transition: transform .15s ease;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55));
}
html[data-theme="halloween"] .brand:hover .hw-hat { transform: translate(-1px, -1px) rotate(-19deg) scale(1.05); }

/* ---------- Header: dusk, bats, fog, a pixel graveyard on the bottom edge ---------- */
html[data-theme="halloween"] .hero-banner { padding-bottom: 76px; background-color: #2A1650; }
@media (max-width: 720px) { html[data-theme="halloween"] .hero-banner { padding-bottom: 60px; } }
@media (max-width: 480px) { html[data-theme="halloween"] .hero-banner { padding-bottom: 46px; } }

html[data-theme="halloween"] .hero-banner__overlay {
  background: linear-gradient(180deg, #6A4CA8 0%, #7E62B8 42%, #4A2C80 100%);
  mix-blend-mode: multiply;
}
html[data-theme="halloween"] .hw-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
html[data-theme="halloween"] .hw-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 95% at 50% 32%, transparent 52%, rgba(12, 5, 24, .55) 100%),
    linear-gradient(180deg, rgba(12, 5, 24, .30) 0%, rgba(12, 5, 24, 0) 38%, rgba(12, 5, 24, .62) 100%);
}

/* "Happy Halloween", faded and slanted, beside the headline on wide screens; on narrower screens a
   small slanted sticker in the top-left corner (the header gets a little room above the headline). */
html[data-theme="halloween"] .hw-greeting {
  position: absolute; z-index: 1;
  left: clamp(24px, 4vw, 72px); top: 36%;
  width: clamp(190px, calc(46vw - 404px), 270px); height: auto;
  transform: translateY(-50%) rotate(-11deg);
  opacity: .62;
  filter: drop-shadow(0 0 6px rgba(255, 122, 26, .55)) drop-shadow(0 2px 2px rgba(15, 8, 28, .6));
}
@media (max-width: 1299px) {
  html[data-theme="halloween"] .hero-banner { padding-top: 84px; }
  html[data-theme="halloween"] .hw-greeting { left: 22px; top: 40px; width: 190px; }
}
@media (max-width: 720px) {
  html[data-theme="halloween"] .hero-banner { padding-top: 68px; }
  html[data-theme="halloween"] .hw-greeting { left: 14px; top: 34px; width: 168px; }
}
@media (max-width: 480px) {
  html[data-theme="halloween"] .hero-banner { padding-top: 58px; }
  html[data-theme="halloween"] .hw-greeting { left: 10px; top: 28px; width: 150px; }
}

html[data-theme="halloween"] .hw-sky { position: absolute; inset: 0; z-index: 1; }
html[data-theme="halloween"] .hw-bat {
  position: absolute; left: 100%; top: var(--y, 12%);
  width: calc(15 * var(--hw-px) * var(--s, 1));
  opacity: 0;
}
html[data-theme="halloween"] .hw-bat svg { display: block; width: 100%; height: auto; }
html[data-theme="halloween"] .hw-bat__bob { display: block; animation: hw-bob 1.15s ease-in-out infinite alternate; }
html[data-theme="halloween"] .hw-bat__a { animation: hw-flap-a .3s steps(1, end) infinite; }
html[data-theme="halloween"] .hw-bat__b { animation: hw-flap-b .3s steps(1, end) infinite; }
html[data-theme="halloween"] .hw-bat--1 { --y: 9%;  --s: 1.15; --t: 6.8s; --d: .5s;  --dy: -36px; }
html[data-theme="halloween"] .hw-bat--2 { --y: 20%; --s: .85;  --t: 7.6s; --d: .9s;  --dy: -14px; }
html[data-theme="halloween"] .hw-bat--3 { --y: 5%;  --s: .7;   --t: 8.4s; --d: 1.3s; --dy: 10px; }
html[data-theme="halloween"] .hw-bat--4 { --y: 28%; --s: 1;    --t: 7.1s; --d: 1.7s; --dy: -48px; }
html[data-theme="halloween"] .hw-bat--5 { --y: 14%; --s: .6;   --t: 9s;   --d: 2.2s; --dy: -6px; }
html[data-theme="halloween"] .hw-bat--6 { --y: 33%; --s: .78;  --t: 8s;   --d: 2.6s; --dy: -30px; }
/* Every page: the flock crosses once, then one bat now and then. */
html[data-theme="halloween"] .hw-bat { animation: hw-fly var(--t) linear var(--d) 1 both; }
html[data-theme="halloween"] .hw-bat--2 { animation: hw-fly var(--t) linear var(--d) 1 both, hw-lone 32s linear 14s infinite; }

@keyframes hw-flap-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hw-flap-b { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes hw-bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes hw-fly {
  from { opacity: 1; transform: translate(0, 0); }
  to   { opacity: 1; transform: translate(calc(-100vw - 240px), var(--dy, 0px)); }
}
@keyframes hw-lone {
  0%         { opacity: 1; transform: translate(0, 0); }
  26%        { opacity: 1; transform: translate(calc(-100vw - 240px), var(--dy, 0px)); }
  26.1%, 100% { opacity: 0; transform: translate(calc(-100vw - 240px), var(--dy, 0px)); }
}

html[data-theme="halloween"] .hw-fog {
  position: absolute; left: 0; bottom: 0; z-index: 1;
  width: 200%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
}
html[data-theme="halloween"] .hw-fog--back {
  height: calc(40 * var(--hw-px));
  opacity: .5;
  background-image:
    radial-gradient(28% 55% at 14% 78%, rgba(226, 214, 250, .70), rgba(226, 214, 250, 0) 72%),
    radial-gradient(24% 48% at 46% 86%, rgba(226, 214, 250, .55), rgba(226, 214, 250, 0) 72%),
    radial-gradient(30% 60% at 78% 80%, rgba(226, 214, 250, .65), rgba(226, 214, 250, 0) 72%);
  animation: hw-drift 90s linear infinite;
}
html[data-theme="halloween"] .hw-fog--front {
  z-index: 1;
  height: calc(16 * var(--hw-px));
  opacity: .42;
  background-image:
    radial-gradient(22% 70% at 22% 100%, rgba(236, 228, 252, .75), rgba(236, 228, 252, 0) 70%),
    radial-gradient(26% 80% at 64% 100%, rgba(236, 228, 252, .65), rgba(236, 228, 252, 0) 70%),
    radial-gradient(18% 60% at 92% 100%, rgba(236, 228, 252, .70), rgba(236, 228, 252, 0) 70%);
  animation: hw-drift 55s linear infinite reverse;
}
@keyframes hw-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

html[data-theme="halloween"] .hw-grave {
  position: absolute; bottom: calc(1 * var(--hw-px)); z-index: 1;
  display: block;
  width: calc(150 * var(--hw-px)); height: calc(26 * var(--hw-px));
  max-width: 50%;
}
html[data-theme="halloween"] .hw-grave--left { left: 0; }
html[data-theme="halloween"] .hw-grave--right { right: 0; }
html[data-theme="halloween"] .hw-ground {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: calc(4 * var(--hw-px));
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 4%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%23160C26%22 d=%22M3 0h1v1h-1zM11 0h1v1h-1zM22 0h1v1h-1zM27 0h1v1h-1zM2 1h2v1h-2zM6 1h1v1h-1zM10 1h3v1h-3zM17 1h1v1h-1zM21 1h2v1h-2zM26 1h3v1h-3zM30 1h1v1h-1zM0 2h1v1h-1zM2 2h3v1h-3zM6 2h2v1h-2zM9 2h6v1h-6zM17 2h2v1h-2zM20 2h5v1h-5zM26 2h5v1h-5zM0 3h32v1h-32z%22/%3E%3C/svg%3E") repeat-x left bottom / calc(32 * var(--hw-px)) 100%;
}
html[data-theme="halloween"] .hw-ghost { animation: hw-ghost 5s ease-in-out infinite; }
html[data-theme="halloween"] .hw-eyes { animation: hw-blink 6.5s steps(1, end) 2s infinite; }
@keyframes hw-blink { 0%, 92%, 95%, 100% { opacity: 1; } 93%, 96% { opacity: 0; } }
@keyframes hw-ghost { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
html[data-theme="halloween"] .hw-flicker { animation: hw-flicker 3.4s ease-in-out infinite; }
html[data-theme="halloween"] .hw-flicker--late { animation-delay: -1.7s; }
@keyframes hw-flicker {
  0%, 100% { opacity: .82; }
  20% { opacity: 1; }
  37% { opacity: .7; }
  55% { opacity: .96; }
  72% { opacity: .76; }
}

/* The highlighted word glows like a candle instead of purple. */
html[data-theme="halloween"] .hero-banner__hl {
  --primary-bright: #FFD166;
  background-image: linear-gradient(135deg, #FF5A1F 0%, #FF7A1A 30%, #FFC24B 50%, #FF7A1A 70%, #FF5A1F 100%);
  animation-name: hero-caret, hw-ember;
}
@keyframes hw-ember {
  0%, 100% {
    filter:
      drop-shadow(0 2px 3px  rgba(15, 8, 28, .5))
      drop-shadow(0 4px 14px rgba(15, 8, 28, .35))
      drop-shadow(0 0 10px   rgba(255, 140, 40, .32))
      drop-shadow(0 0 22px   rgba(255, 90, 31, .16));
  }
  50% {
    filter:
      drop-shadow(0 2px 3px  rgba(15, 8, 28, .5))
      drop-shadow(0 4px 14px rgba(15, 8, 28, .35))
      drop-shadow(0 0 18px   rgba(255, 150, 50, .58))
      drop-shadow(0 0 36px   rgba(255, 90, 31, .32));
  }
}

/* ---------- A spider on its thread in the categories panel (desktop) ---------- */
@media (min-width: 901px) {
  html[data-theme="halloween"] .cat-panel::after {
    content: "";
    position: absolute; top: -18px; right: 24px;
    width: 18px; height: 54px;
    background:
      linear-gradient(#9C8AC0, #9C8AC0) center top / 1px 41px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 9 7%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%23FF8A2A%22 d=%22M3 4h1v1h-1zM5 4h1v1h-1z%22/%3E%3Cpath fill=%22%23120A1E%22 d=%22M0 0h1v1h-1zM8 0h1v1h-1zM1 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM2 2h5v1h-5zM0 3h9v1h-9zM2 4h1v1h-1zM4 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM3 5h3v1h-3zM7 5h1v1h-1zM0 6h1v1h-1zM4 6h1v1h-1zM8 6h1v1h-1z%22/%3E%3C/svg%3E") center bottom / 18px 14px no-repeat;
    pointer-events: none;
    animation: hw-spider 7s ease-in-out infinite;
  }
}
@keyframes hw-spider { 0%, 100% { transform: translateY(-5px); } 50% { transform: translateY(3px); } }

/* ---------- Top 3: gold, silver and bronze jack-o'-lanterns instead of the medals ---------- */
html[data-theme="halloween"] .rank-card__medal--gold,
html[data-theme="halloween"] .rank-card__medal--silver,
html[data-theme="halloween"] .rank-card__medal--bronze { background: center / contain no-repeat; }
html[data-theme="halloween"] .rank-card__medal--gold { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 14 13%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%237A4B00%22 d=%22M6 0h1v1h-1zM5 1h1v1h-1zM2 2h10v1h-10zM1 3h1v1h-1zM13 3h1v1h-1zM0 4h1v1h-1zM13 4h1v1h-1zM0 5h1v1h-1zM13 5h1v1h-1zM0 6h1v1h-1zM13 6h1v1h-1zM0 7h1v1h-1zM13 7h1v1h-1zM0 8h1v1h-1zM13 8h1v1h-1zM0 9h1v1h-1zM13 9h1v1h-1zM1 10h1v1h-1zM12 10h1v1h-1zM2 11h2v1h-2zM10 11h2v1h-2zM4 12h6v1h-6z%22/%3E%3Cpath fill=%22%23FFD166%22 d=%22M4 6h1v1h-1zM9 6h1v1h-1zM6 9h2v1h-2z%22/%3E%3Cpath fill=%22%23F7B731%22 d=%22M2 3h1v1h-1zM4 3h1v1h-1zM6 3h4v1h-4zM11 3h2v1h-2zM1 4h1v1h-1zM4 4h1v1h-1zM6 4h4v1h-4zM11 4h2v1h-2zM1 5h1v1h-1zM5 5h4v1h-4zM12 5h1v1h-1zM1 6h2v1h-2zM5 6h4v1h-4zM11 6h2v1h-2zM1 7h5v1h-5zM8 7h5v1h-5zM1 8h1v1h-1zM3 8h8v1h-8zM12 8h1v1h-1zM1 9h1v1h-1zM12 9h1v1h-1zM2 10h2v1h-2zM11 10h1v1h-1zM4 11h2v1h-2zM8 11h2v1h-2z%22/%3E%3Cpath fill=%22%234D7C0F%22 d=%22M7 0h2v1h-2zM6 1h2v1h-2z%22/%3E%3Cpath fill=%22%23FFE38A%22 d=%22M3 3h1v1h-1zM2 4h2v1h-2z%22/%3E%3Cpath fill=%22%23C98A0B%22 d=%22M5 3h1v1h-1zM10 3h1v1h-1zM5 4h1v1h-1zM10 4h1v1h-1zM6 11h2v1h-2z%22/%3E%3Cpath fill=%22%23FF6A00%22 d=%22M2 5h3v1h-3zM9 5h3v1h-3zM3 6h1v1h-1zM10 6h1v1h-1zM6 7h2v1h-2zM2 8h1v1h-1zM11 8h1v1h-1zM2 9h4v1h-4zM8 9h4v1h-4zM4 10h7v1h-7z%22/%3E%3C/svg%3E"); }
html[data-theme="halloween"] .rank-card__medal--silver { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 14 13%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%234B5563%22 d=%22M6 0h1v1h-1zM5 1h1v1h-1zM2 2h10v1h-10zM1 3h1v1h-1zM13 3h1v1h-1zM0 4h1v1h-1zM13 4h1v1h-1zM0 5h1v1h-1zM13 5h1v1h-1zM0 6h1v1h-1zM13 6h1v1h-1zM0 7h1v1h-1zM13 7h1v1h-1zM0 8h1v1h-1zM13 8h1v1h-1zM0 9h1v1h-1zM13 9h1v1h-1zM1 10h1v1h-1zM12 10h1v1h-1zM2 11h2v1h-2zM10 11h2v1h-2zM4 12h6v1h-6z%22/%3E%3Cpath fill=%22%23FFD166%22 d=%22M4 6h1v1h-1zM9 6h1v1h-1zM6 9h2v1h-2z%22/%3E%3Cpath fill=%22%23D1D5DB%22 d=%22M2 3h1v1h-1zM4 3h1v1h-1zM6 3h4v1h-4zM11 3h2v1h-2zM1 4h1v1h-1zM4 4h1v1h-1zM6 4h4v1h-4zM11 4h2v1h-2zM1 5h1v1h-1zM5 5h4v1h-4zM12 5h1v1h-1zM1 6h2v1h-2zM5 6h4v1h-4zM11 6h2v1h-2zM1 7h5v1h-5zM8 7h5v1h-5zM1 8h1v1h-1zM3 8h8v1h-8zM12 8h1v1h-1zM1 9h1v1h-1zM12 9h1v1h-1zM2 10h2v1h-2zM11 10h1v1h-1zM4 11h2v1h-2zM8 11h2v1h-2z%22/%3E%3Cpath fill=%22%234D7C0F%22 d=%22M7 0h2v1h-2zM6 1h2v1h-2z%22/%3E%3Cpath fill=%22%23F3F4F6%22 d=%22M3 3h1v1h-1zM2 4h2v1h-2z%22/%3E%3Cpath fill=%22%239CA3AF%22 d=%22M5 3h1v1h-1zM10 3h1v1h-1zM5 4h1v1h-1zM10 4h1v1h-1zM6 11h2v1h-2z%22/%3E%3Cpath fill=%22%23F97316%22 d=%22M2 5h3v1h-3zM9 5h3v1h-3zM3 6h1v1h-1zM10 6h1v1h-1zM6 7h2v1h-2zM2 8h1v1h-1zM11 8h1v1h-1zM2 9h4v1h-4zM8 9h4v1h-4zM4 10h7v1h-7z%22/%3E%3C/svg%3E"); }
html[data-theme="halloween"] .rank-card__medal--bronze { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 14 13%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%235C2E0E%22 d=%22M6 0h1v1h-1zM5 1h1v1h-1zM2 2h10v1h-10zM1 3h1v1h-1zM13 3h1v1h-1zM0 4h1v1h-1zM13 4h1v1h-1zM0 5h1v1h-1zM13 5h1v1h-1zM0 6h1v1h-1zM13 6h1v1h-1zM0 7h1v1h-1zM13 7h1v1h-1zM0 8h1v1h-1zM13 8h1v1h-1zM0 9h1v1h-1zM13 9h1v1h-1zM1 10h1v1h-1zM12 10h1v1h-1zM2 11h2v1h-2zM10 11h2v1h-2zM4 12h6v1h-6z%22/%3E%3Cpath fill=%22%23FFD166%22 d=%22M4 6h1v1h-1zM9 6h1v1h-1zM6 9h2v1h-2z%22/%3E%3Cpath fill=%22%23CD7F32%22 d=%22M2 3h1v1h-1zM4 3h1v1h-1zM6 3h4v1h-4zM11 3h2v1h-2zM1 4h1v1h-1zM4 4h1v1h-1zM6 4h4v1h-4zM11 4h2v1h-2zM1 5h1v1h-1zM5 5h4v1h-4zM12 5h1v1h-1zM1 6h2v1h-2zM5 6h4v1h-4zM11 6h2v1h-2zM1 7h5v1h-5zM8 7h5v1h-5zM1 8h1v1h-1zM3 8h8v1h-8zM12 8h1v1h-1zM1 9h1v1h-1zM12 9h1v1h-1zM2 10h2v1h-2zM11 10h1v1h-1zM4 11h2v1h-2zM8 11h2v1h-2z%22/%3E%3Cpath fill=%22%234D7C0F%22 d=%22M7 0h2v1h-2zM6 1h2v1h-2z%22/%3E%3Cpath fill=%22%23E8A866%22 d=%22M3 3h1v1h-1zM2 4h2v1h-2z%22/%3E%3Cpath fill=%22%239A5A1F%22 d=%22M5 3h1v1h-1zM10 3h1v1h-1zM5 4h1v1h-1zM10 4h1v1h-1zM6 11h2v1h-2z%22/%3E%3Cpath fill=%22%23FF5A1F%22 d=%22M2 5h3v1h-3zM9 5h3v1h-3zM3 6h1v1h-1zM10 6h1v1h-1zM6 7h2v1h-2zM2 8h1v1h-1zM11 8h1v1h-1zM2 9h4v1h-4zM8 9h4v1h-4zM4 10h7v1h-7z%22/%3E%3C/svg%3E"); }
html[data-theme="halloween"] .rank-card__medal--gold > *,
html[data-theme="halloween"] .rank-card__medal--silver > *,
html[data-theme="halloween"] .rank-card__medal--bronze > * { display: none; }

/* ---------- Stats bar: the ground the graveyard stands on ---------- */
html[data-theme="halloween"] .hero-stats-bar {
  background: var(--hw-night);
  border-bottom-color: var(--hw-line);
  box-shadow: 0 16px 30px -22px rgba(21, 11, 36, .7);
}
html[data-theme="halloween"] .hero-stats-bar__inner > div { border-right-color: rgba(243, 236, 255, .10); }
html[data-theme="halloween"] .hero-stats-bar__icon { background: rgba(255, 122, 26, .14); color: #FF9A4D; }
html[data-theme="halloween"] .hero-stats-bar__col strong { color: var(--hw-bone); }
html[data-theme="halloween"] .hero-stats-bar__col span { color: var(--hw-bone-muted); }

/* ---------- Footer: night colour + jack-o'-lanterns on its edge ---------- */
html[data-theme="halloween"] .footer { position: relative; background: var(--hw-night); border-top-color: var(--hw-line); }
html[data-theme="halloween"] .hw-patch {
  position: absolute;
  right: max(24px, calc(50% - 666px));
  top: calc(-12 * var(--hw-px));
  width: calc(44 * var(--hw-px));
  pointer-events: none;
}
html[data-theme="halloween"] .hw-patch svg { display: block; width: 100%; height: auto; }

/* Nothing moves for people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="halloween"] .hw-bat,
  html[data-theme="halloween"] .hw-bat__bob,
  html[data-theme="halloween"] .hw-bat__a,
  html[data-theme="halloween"] .hw-bat__b,
  html[data-theme="halloween"] .hw-fog,
  html[data-theme="halloween"] .hw-ghost,
  html[data-theme="halloween"] .hw-eyes,
  html[data-theme="halloween"] .hw-flicker,
  html[data-theme="halloween"] .cat-panel::after { animation: none !important; }
  html[data-theme="halloween"] .hw-bat { display: none; }
  html[data-theme="halloween"] .hero-banner__hl {
    animation: none;
    filter:
      drop-shadow(0 2px 3px  rgba(15, 8, 28, .5))
      drop-shadow(0 4px 14px rgba(15, 8, 28, .35))
      drop-shadow(0 0 14px   rgba(255, 140, 40, .45))
      drop-shadow(0 0 28px   rgba(255, 90, 31, .24));
  }
}