/* Project Horizon's October theme. Remove this stylesheet link to restore the regular look. */
:root {
  --halloween-orange: #ffab59;
  --halloween-violet: #bda8f5;
}

body {
  background: #0c1023;
}

body::before {
  background:
    radial-gradient(ellipse 65% 43% at 92% 3%, rgba(111, 71, 151, .18), transparent 75%),
    radial-gradient(ellipse 58% 44% at 5% 60%, rgba(181, 92, 40, .11), transparent 75%);
}

.site-header {
  border-bottom-color: rgba(255, 171, 89, .26);
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 345px;
  border-color: rgba(255, 171, 89, .34);
  background:
    radial-gradient(circle at 79% 17%, rgba(192, 171, 241, .13), transparent 27%),
    linear-gradient(145deg, #1c1a32, #111728 69%, #26192b);
  box-shadow: inset 0 1px 0 rgba(255, 226, 187, .09), 0 20px 56px rgba(0, 0, 0, .27), 0 0 45px rgba(232, 119, 45, .05);
}

.halloween-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.halloween-moon {
  position: absolute;
  width: 116px;
  height: 116px;
  right: 16%;
  top: 22px;
  border-radius: 50%;
  background: #efe1c6;
  box-shadow: 0 0 0 15px rgba(239, 225, 198, .045), 0 0 70px 28px rgba(239, 225, 198, .17);
  opacity: .62;
}

.halloween-pumpkin,
.halloween-bat {
  position: absolute;
  display: block;
  user-select: none;
}

.halloween-pumpkin {
  width: clamp(115px, 16vw, 215px);
  bottom: -26px;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45));
  animation: pumpkin-float 6s ease-in-out infinite;
}

.halloween-pumpkin-left { left: -23px; transform: rotate(-9deg); }
.halloween-pumpkin-right { right: -32px; transform: rotate(11deg) scale(.85); animation-delay: -2.5s; }

.halloween-bat { width: 60px; opacity: .68; }
.halloween-bat-left { left: 15%; top: 35px; transform: rotate(-16deg); }
.halloween-bat-right { right: 9%; top: 92px; transform: rotate(17deg) scale(.7); }

.halloween-eyebrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  margin: 0 auto 20px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 171, 89, .39);
  border-radius: 999px;
  background: rgba(255, 171, 89, .1);
  color: #ffd1a1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero-title {
  background: linear-gradient(95deg, #f9efe4 20%, #ffd2a4 57%, #f9efe4 95%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-sub { color: #e1d7e7; }
.hero .search-wrap { z-index: 3 !important; }
#gameSearch { border-color: rgba(255, 171, 89, .34); }
#gameSearch:focus { border-color: #ffab59; box-shadow: 0 0 0 3px rgba(255, 171, 89, .16); }

.section-label-text::before { content: '✦ '; color: #ffab59; }
.featured-card:hover, .game-card:hover { border-color: rgba(255, 171, 89, .7) !important; }
.featured-badge, .recommend-badge { border-color: rgba(255, 171, 89, .48) !important; }

@keyframes pumpkin-float {
  50% { translate: 0 -7px; }
}

@media (max-width: 680px) {
  .hero { min-height: 340px; padding-bottom: 47px; }
  .halloween-eyebrow { font-size: 9px; letter-spacing: .12em; margin-bottom: 17px; }
  .halloween-pumpkin { width: 85px; bottom: -20px; opacity: .86; }
  .halloween-pumpkin-left { left: -24px; }
  .halloween-pumpkin-right { right: -29px; }
  .halloween-moon { width: 70px; height: 70px; right: 9%; top: 20px; opacity: .38; }
  .halloween-bat { width: 36px; }
  .halloween-bat-left { left: 5%; top: 24px; }
  .halloween-bat-right { right: 7%; top: 67px; }
}

@media (prefers-reduced-motion: reduce) {
  .halloween-pumpkin { animation: none; }
}