:root {
  --rt-blood: #C4291B;
  --rt-ember: #E4572E;
  --rt-bone: #E8E3D9;
}

/* ══ the grade ══════════════════════════════════════════════════════════ */
/* Vignette and grain over everything, fixed so they do not scroll.
   pointer-events:none, or the page would stop taking clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(0,0,0,0) 38%, rgba(6,3,3,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, rgba(0,0,0,0) 1px 3px);
  mix-blend-mode: multiply;
}

/* ══ blood running off the header ═══════════════════════════════════════ */
/* The header is sticky, so an absolute child of it follows the header down the
   page — which is why this was the one element that stayed put on a phone. */
#SITE_HEADER::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 128px;
  pointer-events: none;
  z-index: 3;
  background-image: url("/assets/hw-drips.webp");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 450px 128px;
  opacity: .92;
}

/* ══ cobwebs ════════════════════════════════════════════════════════════ */
/* Desktop: across the top corners, over the header. */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 280px;
  z-index: 2147483001;
  pointer-events: none;
  background-image: url("/assets/hw-web-left.webp"), url("/assets/hw-web-right.webp");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: 280px 280px, 280px 280px;
  opacity: .78;
  transform-origin: 50% 0;
}

/* ══ bats ═══════════════════════════════════════════════════════════════ */
html::before {
  content: "";
  position: fixed;
  top: 130px;
  right: 0;
  width: 380px;
  height: 380px;
  z-index: 2147483001;
  pointer-events: none;
  background: url("/assets/hw-bats.webp") no-repeat right top / 340px 340px;
  opacity: .5;
}

/* ══ fog ════════════════════════════════════════════════════════════════ */
html::after {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 190px;
  z-index: 2147482999;
  pointer-events: none;
  background: url("/assets/hw-fog.webp") repeat-x center bottom / auto 190px;
  opacity: .42;
}

/* ══ movement ═══════════════════════════════════════════════════════════ */
/* Each on its own length so they never fall into step with one another. */
@media (prefers-reduced-motion: no-preference) {
  body::before  { animation: rt-sway 11s ease-in-out infinite alternate; }
  html::before  { animation: rt-fly 26s ease-in-out infinite alternate; }
  html::after   { animation: rt-roll 48s linear infinite; }
  #SITE_HEADER::after { animation: rt-creep 9s ease-in-out infinite alternate; }
  #SITE_HEADER  { animation: rt-flicker 7s infinite steps(1); }

  /* the webs breathe on the threads holding them to the ceiling */
  @keyframes rt-sway {
    from { transform: rotate(-.5deg) translateY(0); }
    to   { transform: rotate(.5deg) translateY(3px); }
  }
  /* the bats cross and bob rather than sliding in a straight line */
  @keyframes rt-fly {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-26px, 14px); }
    100% { transform: translate(-52px, 2px); }
  }
  /* the fog rolls sideways; the tile repeats, so it never shows an edge */
  @keyframes rt-roll {
    from { background-position-x: 0; }
    to   { background-position-x: -1200px; }
  }
  /* the blood keeps running, a little further and back */
  @keyframes rt-creep {
    from { background-position-y: -6px; }
    to   { background-position-y: 4px; }
  }
  @keyframes rt-flicker {
    0%, 92%, 100% { box-shadow: 0 10px 34px rgba(196,41,27,.14); }
    93% { box-shadow: 0 10px 34px rgba(196,41,27,.36); }
    94% { box-shadow: 0 10px 34px rgba(196,41,27,.06); }
    96% { box-shadow: 0 10px 34px rgba(196,41,27,.40); }
  }
}

/* ══ the phone ══════════════════════════════════════════════════════════ */
/* Nothing here is positioned against the viewport. The webs hang off the
   header; the bats are placed in document coordinates. Both stay where they
   are put no matter what the browser does with its address bar. */
@media (max-width: 900px) {
  #SITE_HEADER::after { height: 86px; background-size: 190px 86px; opacity: 1; }

  /* webs, tucked into both corners immediately under the header */
  #SITE_HEADER::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 34vw;
    pointer-events: none;
    z-index: 2;
    background-image: url("/assets/hw-web-left.webp"), url("/assets/hw-web-right.webp");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, right top;
    background-size: 32vw 32vw, 32vw 32vw;
    opacity: .6;
    transform-origin: 50% 0;
  }
  body::before {
    /* the bats, in document coordinates rather than viewport ones */
    position: absolute;
    top: 190px;
    left: auto;
    right: 0;
    width: 40vw;
    height: 40vw;
    background-image: url("/assets/hw-bats.webp");
    background-position: right top;
    background-size: 36vw 36vw;
    opacity: .42;
    z-index: 2147483001;
  }
  html::before { display: none; }
  html::after  { height: 20vh; background-size: auto 20vh; opacity: .36; }

  @media (prefers-reduced-motion: no-preference) {
    #SITE_HEADER::before { animation: rt-sway 11s ease-in-out infinite alternate; }
    body::before { animation: rt-fly-m 22s ease-in-out infinite alternate; }
    @keyframes rt-fly-m {
      0%   { transform: translate(0, 0); }
      50%  { transform: translate(-14px, 8px); }
      100% { transform: translate(-26px, 0); }
    }
  }
}

/* ══ colour ═════════════════════════════════════════════════════════════ */
#SITE_HEADER {
  border-bottom: 1px solid rgba(196,41,27,.55) !important;
  box-shadow: 0 10px 34px rgba(196,41,27,.14) !important;
}
#SITE_HEADER li[id^="comp-kxxb4pk1"] p,
#SITE_HEADER [data-rt-tab="extra"] p {
  color: var(--rt-bone) !important;
  letter-spacing: .04em !important;
}
#SITE_HEADER li[id^="comp-kxxb4pk1"]:hover p,
#SITE_HEADER [data-rt-tab="extra"]:hover p,
#SITE_HEADER li[data-state*="selected"] p {
  color: var(--rt-blood) !important;
  text-shadow: 0 0 14px rgba(196,41,27,.65) !important;
}
li[data-testid^="MENU_AS_CONTAINER_EXPANDABLE_MENU"] a { color: var(--rt-bone) !important; }
h1, h2, [data-hook="section.name"] { text-shadow: 0 0 22px rgba(196,41,27,.30) !important; }
#rt-games .rt-eyebrow, #rt-games .rt-game-price dd { color: var(--rt-blood) !important; }
#rt-games .rt-game-price div {
  background: rgba(196,41,27,.10) !important;
  border-color: rgba(196,41,27,.34) !important;
}
#rt-games .rt-game, #rt-featured .rt-ev { border-color: rgba(196,41,27,.30) !important; }
#rt-games, #rt-featured { background: #08070C !important; }
[data-hook="item.price"] { color: var(--rt-ember) !important; }
[data-hook="section.name"] { color: var(--rt-bone) !important; }
#SITE_FOOTER { border-top: 1px solid rgba(196,41,27,.40) !important; }