/* Halloween skin. Loaded after style.css; drop the <link> to switch it off. No orange, gold or yellow. */

:root {
  --bg: #0d0912;
  --bg-soft: #120c19;
  --card: #150f1d;
  --card-2: #1b1325;
  --raise: #241932;

  --line: rgba(190, 150, 255, 0.12);
  --line-mid: rgba(190, 150, 255, 0.22);
  --line-hi: rgba(190, 150, 255, 0.42);

  --accent: #cdb8ff;
  --accent-dim: rgba(157, 92, 255, 0.16);
  --accent-line: rgba(168, 118, 255, 0.55);

  --ring: 0 0 0 3px rgba(157, 92, 255, 0.35);

  --hw-purple: #9d5cff;
  --hw-purple-2: #6c2bd9;
  --hw-green: #4dff9a;
  --hw-blood: #e0245e;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 520px at 85% -140px, rgba(157, 92, 255, 0.24), transparent 70%),
    radial-gradient(900px 460px at -10% 115%, rgba(77, 255, 154, 0.08), transparent 70%),
    linear-gradient(rgba(190, 150, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 150, 255, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}

/* Moon and cobwebs sit behind the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("/assets/hw-web-left.svg") left 0 top 104px / 230px 230px no-repeat,
    url("/assets/hw-web-right.svg") right 0 bottom 0 / 180px 180px no-repeat,
    radial-gradient(circle 9px at calc(100% - 152px) 176px, rgba(160, 140, 200, 0.55), transparent 100%),
    radial-gradient(circle 6px at calc(100% - 118px) 206px, rgba(160, 140, 200, 0.5), transparent 100%),
    radial-gradient(circle 58px at calc(100% - 136px) 196px, #f4efff 0%, #ddd2f6 62%, #c3b4e6 96%, transparent 100%),
    radial-gradient(circle 170px at calc(100% - 136px) 196px, rgba(205, 184, 255, 0.2), transparent 100%);
  opacity: 0.9;
}

/* Bats drifting past the moon. */
body::after {
  content: "";
  position: fixed;
  top: 130px;
  right: 40px;
  width: 360px;
  height: 200px;
  z-index: -1;
  pointer-events: none;
  background:
    url("/assets/hw-bat.svg") 12% 30% / 54px auto no-repeat,
    url("/assets/hw-bat.svg") 58% 8% / 34px auto no-repeat,
    url("/assets/hw-bat.svg") 84% 62% / 42px auto no-repeat,
    url("/assets/hw-bat.svg") 36% 78% / 26px auto no-repeat;
  animation: hw-bats 9s ease-in-out infinite alternate;
}

@keyframes hw-bats {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-26px, 12px) rotate(-2deg); }
  100% { transform: translate(-48px, -6px) rotate(1deg); }
}

::selection { background: var(--hw-purple); color: #fff; }

:focus-visible { outline-color: rgba(157, 92, 255, 0.8); }

* { scrollbar-color: rgba(157, 92, 255, 0.4) transparent; }
*::-webkit-scrollbar-thumb { background: rgba(157, 92, 255, 0.35); background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(157, 92, 255, 0.55); background-clip: content-box; }

/* Header and sale banner */

.site-top { background: rgba(13, 9, 18, 0.9); }

.sale-bar {
  gap: 12px;
  border-bottom-color: rgba(157, 92, 255, 0.35);
  background: linear-gradient(90deg, #1c0a2b, #4b1677 30%, #7a1846 52%, #4b1677 74%, #1c0a2b);
  background-size: 220% 100%;
  color: #fff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
  animation: hw-bar 10s linear infinite;
}

.sale-bar::before,
.sale-bar::after {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 12px;
  background: url("/assets/hw-bat-pale.svg") center / contain no-repeat;
  opacity: 0.9;
}

.sale-bar::after { transform: scaleX(-1); }

@keyframes hw-bar {
  from { background-position: 0% 0; }
  to { background-position: 220% 0; }
}

nav a:hover { background: rgba(157, 92, 255, 0.1); }

nav a.on {
  background: rgba(157, 92, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(157, 92, 255, 0.6), 0 0 18px rgba(157, 92, 255, 0.25);
}

/* Headings */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    background: linear-gradient(180deg, #ffffff 22%, #d9c8ff 62%, #a874ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

h1 { text-shadow: 0 0 40px rgba(157, 92, 255, 0.25); }

.land-hero h1 span {
  color: var(--hw-green);
  -webkit-text-fill-color: var(--hw-green);
  text-shadow: 0 0 26px rgba(77, 255, 154, 0.45);
}

/* Spider hanging over the home page hero. */
.land-hero::after {
  content: "";
  position: absolute;
  top: -60px;
  left: 15%;
  width: 44px;
  height: 260px;
  pointer-events: none;
  background:
    url("/assets/hw-spider.svg?v=2") center bottom / 44px auto no-repeat,
    linear-gradient(rgba(217, 204, 255, 0.4), rgba(217, 204, 255, 0.4)) center top / 1px calc(100% - 34px) no-repeat;
  animation: hw-spider 6s ease-in-out infinite alternate;
}

@keyframes hw-spider {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(46px) rotate(2deg); }
}

/* Buttons */

.btn, .item .add,
.shop .item .add,
.shop .feat-get,
.pills a.on,
.pills a.on:hover {
  background: linear-gradient(180deg, #ab78ff, #7637e6);
  color: #fff;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 22px rgba(108, 43, 217, 0.35);
}

.btn:hover, .item .add:hover,
.shop .item .add:hover,
.shop .feat-get:hover {
  background: linear-gradient(180deg, #bb90ff, #8546f2);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px rgba(157, 92, 255, 0.5);
}

.ghost:hover, .cart-btn:hover {
  background: rgba(157, 92, 255, 0.1);
  border-color: rgba(157, 92, 255, 0.55);
}

.pills a:hover { background: rgba(157, 92, 255, 0.12); }

/* Store cards */

.item {
  background: linear-gradient(180deg, #17101f, #110b18);
  border-color: rgba(190, 150, 255, 0.14);
}

.item::before {
  background: linear-gradient(90deg, transparent, rgba(157, 92, 255, 0.6), rgba(77, 255, 154, 0.35), transparent);
}

.item:hover {
  border-color: rgba(157, 92, 255, 0.6);
  box-shadow: 0 0 0 1px rgba(157, 92, 255, 0.25), 0 14px 36px rgba(108, 43, 217, 0.3);
}

.feat-card {
  background-color: #150e1d;
  border-color: rgba(157, 92, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(157, 92, 255, 0.12), 0 16px 40px rgba(108, 43, 217, 0.18);
}

.feat-card:hover { border-color: rgba(157, 92, 255, 0.65); }

.off-badge {
  background: var(--hw-blood);
  box-shadow: 0 0 14px rgba(224, 36, 94, 0.55);
}

@media (max-width: 720px) {
  body::before {
    background:
      url("/assets/hw-web-left.svg") left 0 top 96px / 150px 150px no-repeat,
      radial-gradient(circle 34px at calc(100% - 60px) 150px, #f4efff 0%, #ddd2f6 62%, #c3b4e6 96%, transparent 100%),
      radial-gradient(circle 100px at calc(100% - 60px) 150px, rgba(205, 184, 255, 0.18), transparent 100%);
    opacity: 0.7;
  }
  body::after { display: none; }
  .land-hero::after { left: 4%; height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .sale-bar,
  .land-hero::after { animation: none; }
}