/* =========================================================
   Seasonal theme + pixel texture polish
   js/theme.js draws the little textures used here (as --hg-*
   images, sized to land on whole screen pixels) and puts
   data-theme="halloween" on <html> in October.
   ========================================================= */

/* ---------- all year ---------- */

/* the pixel night sky (js/theme.js) sits behind everything */
body { background: transparent; }
#hg-sky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
}

/* framed blocks get a pixel bevel: lit along the top left, shaded bottom right */
.game {
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.1),
    inset -2px -2px 0 rgba(0, 0, 0, 0.45);
}

/* a faint pixel grain on panels so they read as surfaces, not flat fills */
.game > *,
.stat,
.news-item,
.faq-item,
.more-game {
  background-image: var(--hg-grain, none);
  background-size: var(--hg-grain-w, 16px) var(--hg-grain-h, 16px);
}

/* headings: a stepped pixel gem and a hard drop shadow */
.section-head h2 {
  text-shadow: 3px 3px 0 var(--hg-h2-shadow, #2a2a2a);
}
.section-head h2::before {
  content: "";
  display: inline-block;
  vertical-align: 2px;
  margin-right: 14px;
  width: 10px;
  height: 10px;
  background: var(--gold);
  clip-path: polygon(
    4px 0, 6px 0, 6px 2px, 8px 2px, 8px 4px, 10px 4px, 10px 6px, 8px 6px, 8px 8px, 6px 8px,
    6px 10px, 4px 10px, 4px 8px, 2px 8px, 2px 6px, 0 6px, 0 4px, 2px 4px, 2px 2px, 4px 2px
  );
}

/* ---------- Halloween (Oct 1 - Nov 1) ---------- */
[data-theme="halloween"] {
  --bg: #07050c;
  --panel: #110c18;
  --line: #3a2e4c;
  --line-light: #7a6894;
  --text: #f4ecd8;      /* bone white */
  --muted: #ab9fbd;
  --gold: #ff9a2e;      /* pumpkin */
  --pink: #ff6fcf;
  --cyan: #b98aff;      /* witchy purple */
  --lime: #8cf53f;      /* toxic green */
  --hg-h2-shadow: #3d1f5e;
}
[data-theme="halloween"] ::selection { background: var(--gold); color: #000; }

/* the light grays in body copy warm up a little to match the bone white */
[data-theme="halloween"] .game-desc,
[data-theme="halloween"] .news-text,
[data-theme="halloween"] .pitch-card p,
[data-theme="halloween"] .howto p:not(.mock p), /* the drawn Mac/Windows screens keep their own colors */
[data-theme="halloween"] .faq-a,
[data-theme="halloween"] .features li,
[data-theme="halloween"] .gp-text-in p { color: #ddd3c4; }

/* ooze dripping off the header (it covers the header's bottom border) */
[data-theme="halloween"] .topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--hg-ooze-h, 14px);
  background: var(--hg-ooze, none) repeat-x 0 0 / var(--hg-ooze-w, 96px) var(--hg-ooze-h, 14px);
  pointer-events: none;
}

/* a little jack-o'-lantern instead of the gem */
[data-theme="halloween"] .section-head h2::before {
  vertical-align: -1px;
  width: var(--hg-pumpkin-w, 18px);
  height: var(--hg-pumpkin-h, 16px);
  background: var(--hg-pumpkin, var(--gold)) 0 0 / 100% 100% no-repeat;
  clip-path: none;
}

/* a row of bones for the dividers */
[data-theme="halloween"] .section-rule {
  height: var(--hg-bones-h, 8px);
  background: var(--hg-bones, none) repeat-x 0 50% / var(--hg-bones-w, 28px) var(--hg-bones-h, 8px);
}

/* cobwebs in the top corner of every framed block, opposite the art */
[data-theme="halloween"] .game { position: relative; }
[data-theme="halloween"] .game::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: var(--hg-web-w, 30px);
  height: var(--hg-web-h, 30px);
  background: var(--hg-web, none) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
/* in the game lists every other block has its art on the right, so the web moves left */
[data-theme="halloween"] .game-list > .game:nth-child(even)::after {
  right: auto;
  left: 4px;
  transform: scaleX(-1);
}

/* the graveyard (drawn by js/theme.js) stands on the footer */
.hg-yard {
  margin-top: 40px;
  line-height: 0;
  overflow: hidden;
}
.hg-yard canvas { display: block; cursor: pointer; }
[data-theme="halloween"] .footer {
  margin-top: 0;
  background: #0b0812;
  border-top-color: #241a30;
}

@media (max-width: 600px) {
  /* phones: panels have less padding, so the webs would sit on the content */
  [data-theme="halloween"] .game::after { display: none; }
}